From b097948828f569b5aa7a96162a7a2e61d361d2dc Mon Sep 17 00:00:00 2001
From: marcelovicentegc <marcelovicentegc@gmail.com>
Date: Thu, 23 Nov 2023 14:47:52 -0300
Subject: [PATCH] docs: generate sandbox

---
 package.json                                  |   3 +-
 packages/components/src/button/button.tsx     |   2 +-
 packages/next-docs/package.json               |   1 +
 .../next-docs/pages/components/_meta.json     |   1 -
 .../pages/components/action/code.mdx          |  31 +-
 .../pages/components/action/props.mdx         |  82 +++
 .../next-docs/pages/components/alert/code.mdx |  33 +-
 .../pages/components/alert/props.mdx          |  13 +-
 .../next-docs/pages/components/bleed/code.mdx |   6 +-
 .../pages/components/bleed/props.mdx          |  23 +-
 .../pages/components/button/code.mdx          |  31 +-
 .../pages/components/button/props.mdx         |  22 +-
 .../pages/components/center-props/code.mdx    |   7 -
 .../pages/components/center/code.mdx          |   6 +-
 .../pages/components/center/props.mdx         |   2 +-
 .../pages/components/checkbox-field/code.mdx  |  31 +-
 .../pages/components/checkbox-field/props.mdx |  20 +-
 .../pages/components/checkbox-group/code.mdx  |   6 +-
 .../pages/components/checkbox-group/props.mdx |  20 +-
 .../pages/components/checkbox/code.mdx        |  31 +-
 .../pages/components/checkbox/props.mdx       |  14 +-
 .../components/clickable-bubble/code.mdx      |  33 +-
 .../components/clickable-bubble/props.mdx     |   8 +-
 .../pages/components/clickable/code.mdx       |  31 +-
 .../pages/components/clickable/props.mdx      |   8 +-
 .../pages/components/combobox-item/code.mdx   |   6 +-
 .../pages/components/combobox-item/props.mdx  |   8 +-
 .../pages/components/combobox-list/code.mdx   |   6 +-
 .../pages/components/combobox-list/props.mdx  |   8 +-
 .../components/combobox-popover/code.mdx      |   6 +-
 .../components/combobox-popover/props.mdx     |   8 +-
 .../components/combobox-provider/code.mdx     |  36 --
 .../pages/components/combobox/code.mdx        |   6 +-
 .../pages/components/combobox/props.mdx       |   8 +-
 .../pages/components/composable/code.mdx      |  34 +-
 .../pages/components/composable/props.mdx     |  11 +-
 .../pages/components/compose/code.mdx         |  31 +-
 .../pages/components/compose/props.mdx        |  10 +-
 .../pages/components/container/code.mdx       |  32 +-
 .../pages/components/container/props.mdx      |   8 +-
 .../pages/components/content/code.mdx         |  32 +-
 .../pages/components/content/props.mdx        |  11 +-
 .../pages/components/field-label/code.mdx     |   6 +-
 .../pages/components/field-label/props.mdx    |  11 +-
 .../pages/components/field-message/code.mdx   |   6 +-
 .../pages/components/field-message/props.mdx  |  14 +-
 .../next-docs/pages/components/field/code.mdx |   6 +-
 .../pages/components/field/props.mdx          |   8 +-
 .../components/filter-apply-props/code.mdx    |   7 -
 .../pages/components/filter-apply/code.mdx    |  31 +-
 .../pages/components/filter-apply/props.mdx   |   2 +-
 .../components/filter-clear-props/code.mdx    |   7 -
 .../pages/components/filter-clear/code.mdx    |  31 +-
 .../pages/components/filter-clear/props.mdx   |   2 +-
 .../components/filter-list-props/code.mdx     |   7 -
 .../pages/components/filter-list/code.mdx     |  34 +-
 .../pages/components/filter-list/props.mdx    |   4 +-
 .../components/filter-option-props/code.mdx   |   7 -
 .../pages/components/filter-option/code.mdx   |  32 +-
 .../pages/components/filter-option/props.mdx  |   4 +-
 .../pages/components/filter-popover/code.mdx  |  32 +-
 .../pages/components/filter-popover/props.mdx |  11 +-
 .../pages/components/filter-provider/code.mdx |  35 +-
 .../components/filter-provider/props.mdx      |  35 +-
 .../components/filter-trigger-props/code.mdx  |   7 -
 .../pages/components/filter-trigger/code.mdx  |  32 +-
 .../pages/components/filter-trigger/props.mdx |   2 +-
 .../components/filter-value-props/code.mdx    |   7 -
 .../pages/components/filter-value/code.mdx    |   6 +-
 .../pages/components/filter-value/props.mdx   |   2 +-
 .../pages/components/filter/code.mdx          |  32 +-
 .../pages/components/filter/props.mdx         |  35 +-
 .../pages/components/flex-props/code.mdx      |   7 -
 .../next-docs/pages/components/flex/code.mdx  |   6 +-
 .../next-docs/pages/components/flex/props.mdx |   2 +-
 .../pages/components/grid-cell-props/code.mdx |   7 -
 .../pages/components/grid-cell/code.mdx       |   6 +-
 .../pages/components/grid-cell/props.mdx      |   2 +-
 .../pages/components/grid-props/code.mdx      |   7 -
 .../next-docs/pages/components/grid/code.mdx  |   6 +-
 .../next-docs/pages/components/grid/props.mdx |   2 +-
 .../pages/components/icon-button/code.mdx     |  32 +-
 .../pages/components/icon-button/props.mdx    |  25 +-
 .../pages/components/interfaces/code.mdx      | 196 -------
 .../pages/components/link-box/code.mdx        |  31 +-
 .../pages/components/link-box/props.mdx       |  16 +-
 .../next-docs/pages/components/link/code.mdx  |  31 +-
 .../next-docs/pages/components/link/props.mdx |   8 +-
 .../pages/components/locale-provider/code.mdx |  33 +-
 .../components/locale-provider/props.mdx      |  11 +-
 .../pages/components/menu-item/code.mdx       |   6 +-
 .../pages/components/menu-item/props.mdx      |  14 +-
 .../pages/components/menu-provider/code.mdx   |  57 ---
 .../components/menu-separator-props/code.mdx  |   7 -
 .../pages/components/menu-separator/code.mdx  |   6 +-
 .../pages/components/menu-separator/props.mdx |   2 +-
 .../pages/components/menu-trigger/code.mdx    |   6 +-
 .../next-docs/pages/components/menu/code.mdx  |   6 +-
 .../next-docs/pages/components/menu/props.mdx |   8 +-
 .../components/modal-header-props/code.mdx    |   7 -
 .../pages/components/modal-header/code.mdx    |   6 +-
 .../pages/components/modal-header/props.mdx   |   2 +-
 .../next-docs/pages/components/modal/code.mdx |   6 +-
 .../pages/components/modal/props.mdx          |  19 +-
 .../pages/components/pagination/code.mdx      |  31 +-
 .../pages/components/pagination/props.mdx     |  23 +-
 .../pages/components/popover-dismiss/code.mdx |  33 +-
 .../components/popover-dismiss/props.mdx      |   8 +-
 .../components/popover-provider/code.mdx      |  32 --
 .../pages/components/popover-trigger/code.mdx |  33 +-
 .../components/popover-trigger/props.mdx      |   8 +-
 .../pages/components/popover/code.mdx         |  33 +-
 .../pages/components/popover/props.mdx        |   8 +-
 .../pages/components/radio-group/code.mdx     |   6 +-
 .../pages/components/radio-group/props.mdx    |  26 +-
 .../next-docs/pages/components/radio/code.mdx |   6 +-
 .../pages/components/radio/props.mdx          |  11 +-
 .../pages/components/scroll-area/code.mdx     |  31 +-
 .../pages/components/scroll-area/props.mdx    |  11 +-
 .../pages/components/search/code.mdx          |   6 +-
 .../pages/components/search/props.mdx         |  11 +-
 .../pages/components/select-field/code.mdx    |  31 +-
 .../pages/components/select-field/props.mdx   |  23 +-
 .../pages/components/select-list/code.mdx     |   6 +-
 .../pages/components/select-list/props.mdx    |  11 +-
 .../components/select-option-check/code.mdx   |   6 +-
 .../components/select-option-check/props.mdx  |   8 +-
 .../pages/components/select-option/code.mdx   |   6 +-
 .../pages/components/select-option/props.mdx  |  14 +-
 .../pages/components/select-popover/code.mdx  |   6 +-
 .../pages/components/select-popover/props.mdx |   8 +-
 .../pages/components/select-provider/code.mdx |  58 ---
 .../pages/components/select/code.mdx          |   6 +-
 .../pages/components/select/props.mdx         |   8 +-
 .../pages/components/simple-table/code.mdx    |  31 +-
 .../pages/components/simple-table/props.mdx   |  38 +-
 .../pages/components/skeleton/code.mdx        |   6 +-
 .../pages/components/skeleton/props.mdx       |   8 +-
 .../pages/components/spinner/code.mdx         |  31 +-
 .../pages/components/spinner/props.mdx        |  11 +-
 .../next-docs/pages/components/stack/code.mdx |   6 +-
 .../pages/components/stack/props.mdx          |  17 +-
 .../pages/components/tab-list/code.mdx        |  36 +-
 .../pages/components/tab-list/props.mdx       |   8 +-
 .../pages/components/tab-panel/code.mdx       |  36 +-
 .../pages/components/tab-panel/props.mdx      |  11 +-
 .../pages/components/tab-provider/code.mdx    |  36 --
 .../pages/components/tab-provider/props.mdx   | 482 ------------------
 .../next-docs/pages/components/tab/code.mdx   |  36 +-
 .../next-docs/pages/components/tab/props.mdx  |   8 +-
 .../pages/components/table-body/code.mdx      |   6 +-
 .../pages/components/table-body/props.mdx     |   8 +-
 .../pages/components/table-cell/code.mdx      |   6 +-
 .../pages/components/table-cell/props.mdx     |   8 +-
 .../components/table-header-cell/code.mdx     |   6 +-
 .../components/table-header-cell/props.mdx    |  11 +-
 .../pages/components/table-header/code.mdx    |   6 +-
 .../pages/components/table-header/props.mdx   |   8 +-
 .../pages/components/table-row/code.mdx       |   6 +-
 .../pages/components/table-row/props.mdx      |  17 +-
 .../next-docs/pages/components/table/code.mdx |   6 +-
 .../pages/components/table/props.mdx          |  20 +-
 .../next-docs/pages/components/tag/code.mdx   |   6 +-
 .../next-docs/pages/components/tag/props.mdx  |  14 +-
 .../pages/components/text-input/code.mdx      |   6 +-
 .../pages/components/text-input/props.mdx     |  28 +-
 .../pages/components/text-props/code.mdx      |  47 --
 .../next-docs/pages/components/text/code.mdx  |  10 +-
 .../next-docs/pages/components/text/props.mdx |  10 +-
 .../pages/components/textarea/code.mdx        |   6 +-
 .../pages/components/textarea/props.mdx       |  17 +-
 .../components/textinput/best-practices.mdx   |  90 ----
 .../pages/components/tooltip-anchor/code.mdx  |  32 +-
 .../pages/components/tooltip-anchor/props.mdx |   8 +-
 .../pages/components/tooltip-arrow/code.mdx   |  33 +-
 .../pages/components/tooltip-arrow/props.mdx  |   8 +-
 .../pages/components/tooltip-popover/code.mdx |  32 +-
 .../components/tooltip-popover/props.mdx      |  11 +-
 .../components/tooltip-provider/code.mdx      |  32 --
 .../components/tooltip-provider/props.mdx     | 374 --------------
 .../pages/components/tooltip/code.mdx         |  31 +-
 .../pages/components/tooltip/props.mdx        |   8 +-
 .../pages/components/visually-hidden/code.mdx |  31 +-
 .../components/visually-hidden/props.mdx      |   8 +-
 .../pages/hooks/use-filter-context/code.mdx   |   2 +-
 .../next-docs/pages/hooks/use-locale/code.mdx |   2 +-
 .../pages/hooks/use-popover-context/code.mdx  |  27 -
 .../pages/hooks/use-popover-store/code.mdx    |  31 --
 .../pages/hooks/use-radio-state/code.mdx      |   2 +-
 .../pages/hooks/use-select-context/code.mdx   |  27 -
 .../pages/hooks/use-select-store/code.mdx     |  56 --
 pnpm-lock.yaml                                |  14 +
 scripts/typedoc-to-nextra.js                  | 111 +++-
 typedoc.json                                  |   1 +
 194 files changed, 1636 insertions(+), 2657 deletions(-)
 create mode 100644 packages/next-docs/pages/components/action/props.mdx
 delete mode 100644 packages/next-docs/pages/components/center-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/combobox-provider/code.mdx
 delete mode 100644 packages/next-docs/pages/components/filter-apply-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/filter-clear-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/filter-list-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/filter-option-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/filter-trigger-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/filter-value-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/flex-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/grid-cell-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/grid-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/interfaces/code.mdx
 delete mode 100644 packages/next-docs/pages/components/menu-provider/code.mdx
 delete mode 100644 packages/next-docs/pages/components/menu-separator-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/modal-header-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/popover-provider/code.mdx
 delete mode 100644 packages/next-docs/pages/components/select-provider/code.mdx
 delete mode 100644 packages/next-docs/pages/components/tab-provider/code.mdx
 delete mode 100644 packages/next-docs/pages/components/tab-provider/props.mdx
 delete mode 100644 packages/next-docs/pages/components/text-props/code.mdx
 delete mode 100644 packages/next-docs/pages/components/textinput/best-practices.mdx
 delete mode 100644 packages/next-docs/pages/components/tooltip-provider/code.mdx
 delete mode 100644 packages/next-docs/pages/components/tooltip-provider/props.mdx
 delete mode 100644 packages/next-docs/pages/hooks/use-popover-context/code.mdx
 delete mode 100644 packages/next-docs/pages/hooks/use-popover-store/code.mdx
 delete mode 100644 packages/next-docs/pages/hooks/use-select-context/code.mdx
 delete mode 100644 packages/next-docs/pages/hooks/use-select-store/code.mdx

diff --git a/package.json b/package.json
index 8cc6a1ce93..3f08c2bb95 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "build:storybook": "pnpm build && pnpm storybook build",
     "chromatic": "chromatic --exit-zero-on-changes --build-script-name=build:storybook",
     "docs": "npm --prefix packages/admin-ui-docs run start",
-    "generate-docs": "typedoc --plugin typedoc-plugin-markdown --hideBreadcrumbs && node scripts/typedoc-to-nextra.js",
+    "generate-docs": "typedoc --plugin typedoc-plugin-markdown --hideBreadcrumbs --hideInPageTOC --plugin typedoc-plugin-mdn-links && node scripts/typedoc-to-nextra.js",
     "next-docs": "npm --prefix packages/next-docs run dev",
     "build:docs": "npm --prefix packages/admin-ui-docs run build-docs",
     "build:next-docs": "npm --prefix packages/next-docs run build-docs",
@@ -132,6 +132,7 @@
     "turbo": "1.4.3",
     "typedoc": "^0.25.3",
     "typedoc-plugin-markdown": "^3.17.1",
+    "typedoc-plugin-mdn-links": "^3.1.4",
     "typescript": "4.9.5",
     "url-loader": "^4.1.0",
     "vite": "4.3.9",
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index 719c0e7121..b4fce0f2c8 100644
--- a/packages/components/src/button/button.tsx
+++ b/packages/components/src/button/button.tsx
@@ -70,7 +70,7 @@ export interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
   children: ReactNode
   /**
    * Increase or decrease padding.
-   * @default normal
+   * @default 'normal'
    */
   size?: 'normal' | 'large'
   /**
diff --git a/packages/next-docs/package.json b/packages/next-docs/package.json
index 6182d1c028..1fda7a8a45 100644
--- a/packages/next-docs/package.json
+++ b/packages/next-docs/package.json
@@ -13,6 +13,7 @@
     "@vtex/shoreline-preset-admin": "workspace:*",
     "@vtex/shoreline-icons": "workspace:*",
     "@vtex/shoreline-utils": "workspace:*",
+    "@vtex/shoreline-components": "workspace:*",
     "next": "13.4.7",
     "nextra": "2.10.0",
     "nextra-theme-docs": "2.10.0",
diff --git a/packages/next-docs/pages/components/_meta.json b/packages/next-docs/pages/components/_meta.json
index 134ac23309..82d4f2d6a2 100644
--- a/packages/next-docs/pages/components/_meta.json
+++ b/packages/next-docs/pages/components/_meta.json
@@ -1,5 +1,4 @@
 {
-  "interfaces": "Interfaces",
   "action": "Action",
   "alert": "Alert",
   "bleed": "Bleed",
diff --git a/packages/next-docs/pages/components/action/code.mdx b/packages/next-docs/pages/components/action/code.mdx
index fa1aad836d..fd8e69ca5f 100644
--- a/packages/next-docs/pages/components/action/code.mdx
+++ b/packages/next-docs/pages/components/action/code.mdx
@@ -6,9 +6,9 @@ Specific button used for contextual actions
 
 #### Parameters
 
-| Name    | Type                                                                                                                                                                                      |
-| :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `props` | `Omit`\<[`ButtonProps`](interfaces/ButtonProps.md), `"variant"`\> & \{ `iconOnly?`: `boolean` ; `label?`: `ReactNode` ; `vertical?`: `boolean` } & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                                                                                                                                                                                                                                       |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<[`ButtonProps`](interfaces/ButtonProps.md), `"variant"`\> & \{ `iconOnly?`: `boolean` ; `label?`: `ReactNode` ; `vertical?`: `boolean` } & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Specific button used for contextual actions
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Action>Label</Action>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Action } from '@vtex/shoreline-components'
+export default function App() { return (<><Action>Label</Action></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/action/props.mdx b/packages/next-docs/pages/components/action/props.mdx
new file mode 100644
index 0000000000..c98acaee10
--- /dev/null
+++ b/packages/next-docs/pages/components/action/props.mdx
@@ -0,0 +1,82 @@
+# shoreline
+
+## Interfaces
+
+- [AccessibleIconProps](interfaces/AccessibleIconProps.md)
+- [AlertProps](interfaces/AlertProps.md)
+- [BleedProps](interfaces/BleedProps.md)
+- [ButtonProps](interfaces/ButtonProps.md)
+- [CheckboxFieldProps](interfaces/CheckboxFieldProps.md)
+- [CheckboxGroupProps](interfaces/CheckboxGroupProps.md)
+- [CheckboxProps](interfaces/CheckboxProps.md)
+- [ClickableBubbleProps](interfaces/ClickableBubbleProps.md)
+- [ClickableProps](interfaces/ClickableProps.md)
+- [ComboboxItemProps](interfaces/ComboboxItemProps.md)
+- [ComboboxListProps](interfaces/ComboboxListProps.md)
+- [ComboboxPopoverProps](interfaces/ComboboxPopoverProps.md)
+- [ComboboxProps](interfaces/ComboboxProps.md)
+- [ComposableProps](interfaces/ComposableProps.md)
+- [ComposeProps](interfaces/ComposeProps.md)
+- [ContainerProps](interfaces/ContainerProps.md)
+- [ContentProps](interfaces/ContentProps.md)
+- [FieldLabelProps](interfaces/FieldLabelProps.md)
+- [FieldMessageProps](interfaces/FieldMessageProps.md)
+- [FieldProps](interfaces/FieldProps.md)
+- [FilterPopoverProps](interfaces/FilterPopoverProps.md)
+- [FilterProps](interfaces/FilterProps.md)
+- [FilterProviderProps](interfaces/FilterProviderProps.md)
+- [GridCellShorthandProps](interfaces/GridCellShorthandProps.md)
+- [GridShorthandProps](interfaces/GridShorthandProps.md)
+- [IconButtonProps](interfaces/IconButtonProps.md)
+- [LinkBoxProps](interfaces/LinkBoxProps.md)
+- [LinkProps](interfaces/LinkProps.md)
+- [LocaleProviderProps](interfaces/LocaleProviderProps.md)
+- [MenuItemProps](interfaces/MenuItemProps.md)
+- [MenuProps](interfaces/MenuProps.md)
+- [ModalProps](interfaces/ModalProps.md)
+- [PaginationProps](interfaces/PaginationProps.md)
+- [PopoverDismissProps](interfaces/PopoverDismissProps.md)
+- [PopoverProps](interfaces/PopoverProps.md)
+- [PopoverTriggerProps](interfaces/PopoverTriggerProps.md)
+- [RadioGroupProps](interfaces/RadioGroupProps.md)
+- [RadioGroupState](interfaces/RadioGroupState.md)
+- [RadioProps](interfaces/RadioProps.md)
+- [ScrollAreaProps](interfaces/ScrollAreaProps.md)
+- [SearchProps](interfaces/SearchProps.md)
+- [SelectFieldProps](interfaces/SelectFieldProps.md)
+- [SelectListProps](interfaces/SelectListProps.md)
+- [SelectOptionCheckProps](interfaces/SelectOptionCheckProps.md)
+- [SelectOptionProps](interfaces/SelectOptionProps.md)
+- [SelectPopoverProps](interfaces/SelectPopoverProps.md)
+- [SelectProps](interfaces/SelectProps.md)
+- [SimpleTableProps](interfaces/SimpleTableProps.md)
+- [SkeletonProps](interfaces/SkeletonProps.md)
+- [SpinnerProps](interfaces/SpinnerProps.md)
+- [StackProps](interfaces/StackProps.md)
+- [TabListProps](interfaces/TabListProps.md)
+- [TabPanelProps](interfaces/TabPanelProps.md)
+- [TabProps](interfaces/TabProps.md)
+- [TableBodyProps](interfaces/TableBodyProps.md)
+- [TableCellProps](interfaces/TableCellProps.md)
+- [TableHeaderCellProps](interfaces/TableHeaderCellProps.md)
+- [TableHeaderProps](interfaces/TableHeaderProps.md)
+- [TableProps](interfaces/TableProps.md)
+- [TableRowProps](interfaces/TableRowProps.md)
+- [TagProps](interfaces/TagProps.md)
+- [TextInputProps](interfaces/TextInputProps.md)
+- [TextareaProps](interfaces/TextareaProps.md)
+- [TooltipAnchorProps](interfaces/TooltipAnchorProps.md)
+- [TooltipArrowProps](interfaces/TooltipArrowProps.md)
+- [TooltipPopoverProps](interfaces/TooltipPopoverProps.md)
+- [TooltipProps](interfaces/TooltipProps.md)
+- [VisuallyHiddenProps](interfaces/VisuallyHiddenProps.md)
+
+## Type Aliases
+
+### ActionProps
+
+Ƭ **ActionProps**: [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<[`ButtonProps`](interfaces/ButtonProps.md), `"variant"`\> & \{ `iconOnly?`: `boolean` ; `label?`: `ReactNode` ; `vertical?`: `boolean` }
+
+#### Defined in
+
+[packages/components/src/action/action.tsx:34](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/action/action.tsx#L34)
diff --git a/packages/next-docs/pages/components/alert/code.mdx b/packages/next-docs/pages/components/alert/code.mdx
index f58809b6de..95f8dc284b 100644
--- a/packages/next-docs/pages/components/alert/code.mdx
+++ b/packages/next-docs/pages/components/alert/code.mdx
@@ -6,9 +6,9 @@ Alert indicators allow users to view semantic messages that are prominent and ca
 
 #### Parameters
 
-| Name    | Type                                                                           |
-| :------ | :----------------------------------------------------------------------------- |
-| `props` | [`AlertProps`](interfaces/AlertProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                        |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`AlertProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,13 +16,38 @@ Alert indicators allow users to view semantic messages that are prominent and ca
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Alert onDismiss={() => {}}>
   <Text>Message</Text>
   <Action>Action</Action>
 </Alert>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Alert } from '@vtex/shoreline-components'
+import { Text } from '@vtex/shoreline-components'
+import { Action } from '@vtex/shoreline-components'
+export default function App() { return (<><Alert onDismiss={() => {}}> <Text>Message</Text> <Action>Action</Action></Alert></>)}`,
+}}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/alert/props.mdx b/packages/next-docs/pages/components/alert/props.mdx
index a6e6c1ad57..ef2909b613 100644
--- a/packages/next-docs/pages/components/alert/props.mdx
+++ b/packages/next-docs/pages/components/alert/props.mdx
@@ -6,22 +6,15 @@
 
   ↳ **`AlertProps`**
 
-## Table of contents
-
-### Properties
-
-- [onDismiss](props.md#ondismiss)
-- [variant](props.md#variant)
-
 ## Properties
 
 ### onDismiss
 
-• `Optional` **onDismiss**: `MouseEventHandler`\<`HTMLButtonElement`\>
+• `Optional` **onDismiss**: `MouseEventHandler`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\>
 
 #### Defined in
 
-[packages/components/src/alert/alert.tsx:74](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/alert/alert.tsx#L74)
+[packages/components/src/alert/alert.tsx:74](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/alert/alert.tsx#L74)
 
 ---
 
@@ -31,4 +24,4 @@
 
 #### Defined in
 
-[packages/components/src/alert/alert.tsx:73](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/alert/alert.tsx#L73)
+[packages/components/src/alert/alert.tsx:73](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/alert/alert.tsx#L73)
diff --git a/packages/next-docs/pages/components/bleed/code.mdx b/packages/next-docs/pages/components/bleed/code.mdx
index a27bb03f11..6f1bf106da 100644
--- a/packages/next-docs/pages/components/bleed/code.mdx
+++ b/packages/next-docs/pages/components/bleed/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                           |
-| :------ | :----------------------------------------------------------------------------- |
-| `props` | [`BleedProps`](interfaces/BleedProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                        |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`BleedProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/bleed/props.mdx b/packages/next-docs/pages/components/bleed/props.mdx
index a85eb82cda..7bdb91b7c6 100644
--- a/packages/next-docs/pages/components/bleed/props.mdx
+++ b/packages/next-docs/pages/components/bleed/props.mdx
@@ -6,17 +6,6 @@
 
   ↳ **`BleedProps`**
 
-## Table of contents
-
-### Properties
-
-- [bottom](props.md#bottom)
-- [horizontal](props.md#horizontal)
-- [left](props.md#left)
-- [right](props.md#right)
-- [top](props.md#top)
-- [vertical](props.md#vertical)
-
 ## Properties
 
 ### bottom
@@ -33,7 +22,7 @@ Bottom bleed
 
 #### Defined in
 
-[packages/components/src/bleed/bleed.tsx:68](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/bleed/bleed.tsx#L68)
+[packages/components/src/bleed/bleed.tsx:68](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/bleed/bleed.tsx#L68)
 
 ---
 
@@ -51,7 +40,7 @@ Horizontal bleed
 
 #### Defined in
 
-[packages/components/src/bleed/bleed.tsx:83](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/bleed/bleed.tsx#L83)
+[packages/components/src/bleed/bleed.tsx:83](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/bleed/bleed.tsx#L83)
 
 ---
 
@@ -69,7 +58,7 @@ Left bleed
 
 #### Defined in
 
-[packages/components/src/bleed/bleed.tsx:73](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/bleed/bleed.tsx#L73)
+[packages/components/src/bleed/bleed.tsx:73](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/bleed/bleed.tsx#L73)
 
 ---
 
@@ -87,7 +76,7 @@ Right bleed
 
 #### Defined in
 
-[packages/components/src/bleed/bleed.tsx:78](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/bleed/bleed.tsx#L78)
+[packages/components/src/bleed/bleed.tsx:78](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/bleed/bleed.tsx#L78)
 
 ---
 
@@ -105,7 +94,7 @@ Top bleed
 
 #### Defined in
 
-[packages/components/src/bleed/bleed.tsx:63](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/bleed/bleed.tsx#L63)
+[packages/components/src/bleed/bleed.tsx:63](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/bleed/bleed.tsx#L63)
 
 ---
 
@@ -123,4 +112,4 @@ Vertical bleed
 
 #### Defined in
 
-[packages/components/src/bleed/bleed.tsx:88](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/bleed/bleed.tsx#L88)
+[packages/components/src/bleed/bleed.tsx:88](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/bleed/bleed.tsx#L88)
diff --git a/packages/next-docs/pages/components/button/code.mdx b/packages/next-docs/pages/components/button/code.mdx
index 6f5402ff37..288d6a504d 100644
--- a/packages/next-docs/pages/components/button/code.mdx
+++ b/packages/next-docs/pages/components/button/code.mdx
@@ -6,9 +6,9 @@ Buttons triggers allow users to identify and start the most important actions in
 
 #### Parameters
 
-| Name    | Type                                                                                |
-| :------ | :---------------------------------------------------------------------------------- |
-| `props` | [`ButtonProps`](interfaces/ButtonProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                               |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`ButtonProps`](props.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Buttons triggers allow users to identify and start the most important actions in
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Button>Action label</Button>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Button } from '@vtex/shoreline-components'
+export default function App() { return (<><Button>Action label</Button></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/button/props.mdx b/packages/next-docs/pages/components/button/props.mdx
index e87ca41c6c..c203ac0dfd 100644
--- a/packages/next-docs/pages/components/button/props.mdx
+++ b/packages/next-docs/pages/components/button/props.mdx
@@ -8,16 +8,6 @@
 
   ↳↳ [`IconButtonProps`](IconButtonProps.md)
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [children](props.md#children)
-- [loading](props.md#loading)
-- [size](props.md#size)
-- [variant](props.md#variant)
-
 ## Properties
 
 ### asChild
@@ -34,7 +24,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:95](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L95)
+[packages/components/src/button/button.tsx:95](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L95)
 
 ---
 
@@ -48,7 +38,7 @@ ComponentPropsWithoutRef.children
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:70](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L70)
+[packages/components/src/button/button.tsx:70](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L70)
 
 ---
 
@@ -66,7 +56,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:90](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L90)
+[packages/components/src/button/button.tsx:90](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L90)
 
 ---
 
@@ -79,12 +69,12 @@ Increase or decrease padding.
 **`Default`**
 
 ```ts
-normal;
+"normal";
 ```
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:75](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L75)
+[packages/components/src/button/button.tsx:75](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L75)
 
 ---
 
@@ -102,4 +92,4 @@ Change between color combinations.
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:80](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L80)
+[packages/components/src/button/button.tsx:80](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L80)
diff --git a/packages/next-docs/pages/components/center-props/code.mdx b/packages/next-docs/pages/components/center-props/code.mdx
deleted file mode 100644
index 2a46b864d2..0000000000
--- a/packages/next-docs/pages/components/center-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### CenterProps
-
-Ƭ **CenterProps**: `ComponentPropsWithoutRef`\<`"div"`\>
-
-#### Defined in
-
-[packages/components/src/center/center.tsx:12](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/center/center.tsx#L12)
diff --git a/packages/next-docs/pages/components/center/code.mdx b/packages/next-docs/pages/components/center/code.mdx
index fcb7a80e64..c6a5158940 100644
--- a/packages/next-docs/pages/components/center/code.mdx
+++ b/packages/next-docs/pages/components/center/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                                                                   |
-| :------ | :------------------------------------------------------------------------------------------------------------------------------------- |
-| `props` | `Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\>, `"ref"`\> & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                                                                                                                                                                                                                                                                                           |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<`DetailedHTMLProps`\<`HTMLAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, [`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, `"ref"`\> & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/center/props.mdx b/packages/next-docs/pages/components/center/props.mdx
index 4639415929..2448702bcd 100644
--- a/packages/next-docs/pages/components/center/props.mdx
+++ b/packages/next-docs/pages/components/center/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/center/center.tsx:12](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/center/center.tsx#L12)
+[packages/components/src/center/center.tsx:12](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/center/center.tsx#L12)
diff --git a/packages/next-docs/pages/components/checkbox-field/code.mdx b/packages/next-docs/pages/components/checkbox-field/code.mdx
index 27fa77986d..f9221ee827 100644
--- a/packages/next-docs/pages/components/checkbox-field/code.mdx
+++ b/packages/next-docs/pages/components/checkbox-field/code.mdx
@@ -6,9 +6,9 @@ Checkbox field with label and help message
 
 #### Parameters
 
-| Name    | Type                                                                                           |
-| :------ | :--------------------------------------------------------------------------------------------- |
-| `props` | [`CheckboxFieldProps`](interfaces/CheckboxFieldProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`CheckboxFieldProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Checkbox field with label and help message
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <CheckboxField>Label</CheckboxField>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { CheckboxField } from '@vtex/shoreline-components'
+export default function App() { return (<><CheckboxField>Label</CheckboxField></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/checkbox-field/props.mdx b/packages/next-docs/pages/components/checkbox-field/props.mdx
index d31f192b97..b8b6607592 100644
--- a/packages/next-docs/pages/components/checkbox-field/props.mdx
+++ b/packages/next-docs/pages/components/checkbox-field/props.mdx
@@ -6,16 +6,6 @@
 
   ↳ **`CheckboxFieldProps`**
 
-## Table of contents
-
-### Properties
-
-- [error](props.md#error)
-- [errorText](props.md#errortext)
-- [helpText](props.md#helptext)
-- [indeterminate](props.md#indeterminate)
-- [value](props.md#value)
-
 ## Properties
 
 ### error
@@ -32,7 +22,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox-field.tsx:52](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox-field.tsx#L52)
+[packages/components/src/checkbox/checkbox-field.tsx:52](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox-field.tsx#L52)
 
 ---
 
@@ -44,7 +34,7 @@ Error message
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox-field.tsx:56](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox-field.tsx#L56)
+[packages/components/src/checkbox/checkbox-field.tsx:56](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox-field.tsx#L56)
 
 ---
 
@@ -56,7 +46,7 @@ Help message
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox-field.tsx:60](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox-field.tsx#L60)
+[packages/components/src/checkbox/checkbox-field.tsx:60](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox-field.tsx#L60)
 
 ---
 
@@ -70,7 +60,7 @@ AriaCheckboxProps.indeterminate
 
 #### Defined in
 
-[packages/components/src/checkbox/use-aria-checkbox.ts:87](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/use-aria-checkbox.ts#L87)
+[packages/components/src/checkbox/use-aria-checkbox.ts:87](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/use-aria-checkbox.ts#L87)
 
 ---
 
@@ -84,4 +74,4 @@ AriaCheckboxProps.value
 
 #### Defined in
 
-[packages/components/src/checkbox/use-aria-checkbox.ts:88](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/use-aria-checkbox.ts#L88)
+[packages/components/src/checkbox/use-aria-checkbox.ts:88](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/use-aria-checkbox.ts#L88)
diff --git a/packages/next-docs/pages/components/checkbox-group/code.mdx b/packages/next-docs/pages/components/checkbox-group/code.mdx
index f2a0c5f6d3..a2be1f2370 100644
--- a/packages/next-docs/pages/components/checkbox-group/code.mdx
+++ b/packages/next-docs/pages/components/checkbox-group/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                             |
-| :------ | :----------------------------------------------------------------------------------------------- |
-| `props` | [`CheckboxGroupProps`](interfaces/CheckboxGroupProps.md) & `RefAttributes`\<`HTMLInputElement`\> |
+| Name    | Type                                                                                                                                    |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`CheckboxGroupProps`](props.md) & `RefAttributes`\<[`HTMLInputElement`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/checkbox-group/props.mdx b/packages/next-docs/pages/components/checkbox-group/props.mdx
index 53118c02d8..e8e4067a79 100644
--- a/packages/next-docs/pages/components/checkbox-group/props.mdx
+++ b/packages/next-docs/pages/components/checkbox-group/props.mdx
@@ -6,16 +6,6 @@
 
   ↳ **`CheckboxGroupProps`**
 
-## Table of contents
-
-### Properties
-
-- [direction](props.md#direction)
-- [error](props.md#error)
-- [errorText](props.md#errortext)
-- [helpText](props.md#helptext)
-- [label](props.md#label)
-
 ## Properties
 
 ### direction
@@ -24,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox-group.tsx:45](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox-group.tsx#L45)
+[packages/components/src/checkbox/checkbox-group.tsx:45](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox-group.tsx#L45)
 
 ---
 
@@ -34,7 +24,7 @@
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox-group.tsx:41](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox-group.tsx#L41)
+[packages/components/src/checkbox/checkbox-group.tsx:41](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox-group.tsx#L41)
 
 ---
 
@@ -44,7 +34,7 @@
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox-group.tsx:43](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox-group.tsx#L43)
+[packages/components/src/checkbox/checkbox-group.tsx:43](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox-group.tsx#L43)
 
 ---
 
@@ -54,7 +44,7 @@
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox-group.tsx:42](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox-group.tsx#L42)
+[packages/components/src/checkbox/checkbox-group.tsx:42](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox-group.tsx#L42)
 
 ---
 
@@ -64,4 +54,4 @@
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox-group.tsx:44](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox-group.tsx#L44)
+[packages/components/src/checkbox/checkbox-group.tsx:44](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox-group.tsx#L44)
diff --git a/packages/next-docs/pages/components/checkbox/code.mdx b/packages/next-docs/pages/components/checkbox/code.mdx
index 6649293581..9aae0df91f 100644
--- a/packages/next-docs/pages/components/checkbox/code.mdx
+++ b/packages/next-docs/pages/components/checkbox/code.mdx
@@ -6,9 +6,9 @@ Checkbox controls allow users to make multiple independent choices in a form whe
 
 #### Parameters
 
-| Name    | Type                                                                                 |
-| :------ | :----------------------------------------------------------------------------------- |
-| `props` | [`CheckboxProps`](interfaces/CheckboxProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                           |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`CheckboxProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Checkbox controls allow users to make multiple independent choices in a form whe
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Checkbox>Label</Checkbox>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Checkbox } from '@vtex/shoreline-components'
+export default function App() { return (<><Checkbox>Label</Checkbox></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/checkbox/props.mdx b/packages/next-docs/pages/components/checkbox/props.mdx
index 2ef7d80b11..ddca1c56d9 100644
--- a/packages/next-docs/pages/components/checkbox/props.mdx
+++ b/packages/next-docs/pages/components/checkbox/props.mdx
@@ -6,14 +6,6 @@
 
   ↳ **`CheckboxProps`**
 
-## Table of contents
-
-### Properties
-
-- [error](props.md#error)
-- [indeterminate](props.md#indeterminate)
-- [value](props.md#value)
-
 ## Properties
 
 ### error
@@ -30,7 +22,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/checkbox/checkbox.tsx:65](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/checkbox.tsx#L65)
+[packages/components/src/checkbox/checkbox.tsx:65](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/checkbox.tsx#L65)
 
 ---
 
@@ -44,7 +36,7 @@ AriaCheckboxProps.indeterminate
 
 #### Defined in
 
-[packages/components/src/checkbox/use-aria-checkbox.ts:87](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/use-aria-checkbox.ts#L87)
+[packages/components/src/checkbox/use-aria-checkbox.ts:87](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/use-aria-checkbox.ts#L87)
 
 ---
 
@@ -58,4 +50,4 @@ AriaCheckboxProps.value
 
 #### Defined in
 
-[packages/components/src/checkbox/use-aria-checkbox.ts:88](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/checkbox/use-aria-checkbox.ts#L88)
+[packages/components/src/checkbox/use-aria-checkbox.ts:88](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/checkbox/use-aria-checkbox.ts#L88)
diff --git a/packages/next-docs/pages/components/clickable-bubble/code.mdx b/packages/next-docs/pages/components/clickable-bubble/code.mdx
index 26bfc8e865..f1bbc6b9df 100644
--- a/packages/next-docs/pages/components/clickable-bubble/code.mdx
+++ b/packages/next-docs/pages/components/clickable-bubble/code.mdx
@@ -6,9 +6,9 @@ Bubbles events to Clickable
 
 #### Parameters
 
-| Name    | Type                                                                                               |
-| :------ | :------------------------------------------------------------------------------------------------- |
-| `props` | [`ClickableBubbleProps`](interfaces/ClickableBubbleProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                  |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`ClickableBubbleProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,7 +16,7 @@ Bubbles events to Clickable
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Clickable>
  <ClickableBubble>
    <p>Clicking the text will bubble the Click event to Clickable</p>
@@ -24,6 +24,31 @@ Bubbles events to Clickable
 </Clickable>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Clickable } from '@vtex/shoreline-components'
+import { ClickableBubble } from '@vtex/shoreline-components'
+import { ClickableBubble } from '@vtex/shoreline-components'
+export default function App() { return (<><Clickable> <ClickableBubble>   <p>Clicking the text will bubble the Click event to Clickable</p> <ClickableBubble></Clickable></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/clickable-bubble/props.mdx b/packages/next-docs/pages/components/clickable-bubble/props.mdx
index 182a3de0f5..808871d890 100644
--- a/packages/next-docs/pages/components/clickable-bubble/props.mdx
+++ b/packages/next-docs/pages/components/clickable-bubble/props.mdx
@@ -1,11 +1,5 @@
 # ClickableBubbleProps
 
-## Table of contents
-
-### Properties
-
-- [children](props.md#children)
-
 ## Properties
 
 ### children
@@ -16,4 +10,4 @@ Children to bubble event
 
 #### Defined in
 
-[packages/components/src/clickable/clickable-bubble.tsx:25](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/clickable/clickable-bubble.tsx#L25)
+[packages/components/src/clickable/clickable-bubble.tsx:25](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/clickable/clickable-bubble.tsx#L25)
diff --git a/packages/next-docs/pages/components/clickable/code.mdx b/packages/next-docs/pages/components/clickable/code.mdx
index 6560af9c45..9c98f5d888 100644
--- a/packages/next-docs/pages/components/clickable/code.mdx
+++ b/packages/next-docs/pages/components/clickable/code.mdx
@@ -6,9 +6,9 @@ Represents clickable surfaces
 
 #### Parameters
 
-| Name    | Type                                                                                   |
-| :------ | :------------------------------------------------------------------------------------- |
-| `props` | [`ClickableProps`](interfaces/ClickableProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                            |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`ClickableProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,35 @@ Represents clickable surfaces
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Clickable>
   Text <button>Click Me</button>
 </Clickable>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Clickable } from '@vtex/shoreline-components'
+export default function App() { return (<><Clickable>  Text <button>Click Me</button></Clickable></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/clickable/props.mdx b/packages/next-docs/pages/components/clickable/props.mdx
index 1f93c3ad56..b4c016886a 100644
--- a/packages/next-docs/pages/components/clickable/props.mdx
+++ b/packages/next-docs/pages/components/clickable/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`ClickableProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/clickable/clickable.tsx:52](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/clickable/clickable.tsx#L52)
+[packages/components/src/clickable/clickable.tsx:52](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/clickable/clickable.tsx#L52)
diff --git a/packages/next-docs/pages/components/combobox-item/code.mdx b/packages/next-docs/pages/components/combobox-item/code.mdx
index 72ed12476d..8cfd550958 100644
--- a/packages/next-docs/pages/components/combobox-item/code.mdx
+++ b/packages/next-docs/pages/components/combobox-item/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                         |
-| :------ | :------------------------------------------------------------------------------------------- |
-| `props` | [`ComboboxItemProps`](interfaces/ComboboxItemProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                               |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`ComboboxItemProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/combobox-item/props.mdx b/packages/next-docs/pages/components/combobox-item/props.mdx
index 2efbf47b26..7e34240c69 100644
--- a/packages/next-docs/pages/components/combobox-item/props.mdx
+++ b/packages/next-docs/pages/components/combobox-item/props.mdx
@@ -8,12 +8,6 @@
 
   ↳ **`ComboboxItemProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -30,4 +24,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/combobox/combobox-item.tsx:32](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/combobox/combobox-item.tsx#L32)
+[packages/components/src/combobox/combobox-item.tsx:32](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/combobox/combobox-item.tsx#L32)
diff --git a/packages/next-docs/pages/components/combobox-list/code.mdx b/packages/next-docs/pages/components/combobox-list/code.mdx
index 306a6937f5..268ff36af4 100644
--- a/packages/next-docs/pages/components/combobox-list/code.mdx
+++ b/packages/next-docs/pages/components/combobox-list/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                         |
-| :------ | :------------------------------------------------------------------------------------------- |
-| `props` | [`ComboboxListProps`](interfaces/ComboboxListProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                               |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`ComboboxListProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/combobox-list/props.mdx b/packages/next-docs/pages/components/combobox-list/props.mdx
index 8d172d8760..93ab53fbe4 100644
--- a/packages/next-docs/pages/components/combobox-list/props.mdx
+++ b/packages/next-docs/pages/components/combobox-list/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`ComboboxListProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/combobox/combobox-list.tsx:27](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/combobox/combobox-list.tsx#L27)
+[packages/components/src/combobox/combobox-list.tsx:27](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/combobox/combobox-list.tsx#L27)
diff --git a/packages/next-docs/pages/components/combobox-popover/code.mdx b/packages/next-docs/pages/components/combobox-popover/code.mdx
index 84dff72f3d..cd2d7b0640 100644
--- a/packages/next-docs/pages/components/combobox-popover/code.mdx
+++ b/packages/next-docs/pages/components/combobox-popover/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                               |
-| :------ | :------------------------------------------------------------------------------------------------- |
-| `props` | [`ComboboxPopoverProps`](interfaces/ComboboxPopoverProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                  |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`ComboboxPopoverProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/combobox-popover/props.mdx b/packages/next-docs/pages/components/combobox-popover/props.mdx
index bd2c6c725b..95d99d8923 100644
--- a/packages/next-docs/pages/components/combobox-popover/props.mdx
+++ b/packages/next-docs/pages/components/combobox-popover/props.mdx
@@ -8,12 +8,6 @@
 
   ↳ **`ComboboxPopoverProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -30,4 +24,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/combobox/combobox-popover.tsx:32](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/combobox/combobox-popover.tsx#L32)
+[packages/components/src/combobox/combobox-popover.tsx:32](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/combobox/combobox-popover.tsx#L32)
diff --git a/packages/next-docs/pages/components/combobox-provider/code.mdx b/packages/next-docs/pages/components/combobox-provider/code.mdx
deleted file mode 100644
index 6cf66fe787..0000000000
--- a/packages/next-docs/pages/components/combobox-provider/code.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-### ComboboxProvider
-
-▸ **ComboboxProvider**(`props?`): `JSX.Element`
-
-Provides a combobox store to Combobox components.
-
-#### Parameters
-
-| Name     | Type                    |
-| :------- | :---------------------- |
-| `props?` | `ComboboxProviderProps` |
-
-#### Returns
-
-`JSX.Element`
-
-**`See`**
-
-https://ariakit.org/components/combobox
-
-**`Example`**
-
-```jsx
-<ComboboxProvider defaultValue="">
-  <Combobox />
-  <ComboboxPopover>
-    <ComboboxItem value="Apple" />
-    <ComboboxItem value="Banana" />
-    <ComboboxItem value="Orange" />
-  </ComboboxPopover>
-</ComboboxProvider>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/combobox/combobox-provider.d.ts:18
diff --git a/packages/next-docs/pages/components/combobox/code.mdx b/packages/next-docs/pages/components/combobox/code.mdx
index de248e6c1b..c9647b1ccd 100644
--- a/packages/next-docs/pages/components/combobox/code.mdx
+++ b/packages/next-docs/pages/components/combobox/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                   |
-| :------ | :------------------------------------------------------------------------------------- |
-| `props` | [`ComboboxProps`](interfaces/ComboboxProps.md) & `RefAttributes`\<`HTMLInputElement`\> |
+| Name    | Type                                                                                                                               |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`ComboboxProps`](props.md) & `RefAttributes`\<[`HTMLInputElement`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/combobox/props.mdx b/packages/next-docs/pages/components/combobox/props.mdx
index abce2290f6..b51a5fb3b9 100644
--- a/packages/next-docs/pages/components/combobox/props.mdx
+++ b/packages/next-docs/pages/components/combobox/props.mdx
@@ -8,12 +8,6 @@
 
   ↳ **`ComboboxProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -30,4 +24,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/combobox/combobox.tsx:32](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/combobox/combobox.tsx#L32)
+[packages/components/src/combobox/combobox.tsx:32](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/combobox/combobox.tsx#L32)
diff --git a/packages/next-docs/pages/components/composable/code.mdx b/packages/next-docs/pages/components/composable/code.mdx
index 16b689112e..bc0288daa6 100644
--- a/packages/next-docs/pages/components/composable/code.mdx
+++ b/packages/next-docs/pages/components/composable/code.mdx
@@ -6,9 +6,9 @@ Defines a composable child inside of a Compose component
 
 #### Parameters
 
-| Name    | Type                                               |
-| :------ | :------------------------------------------------- |
-| `props` | [`ComposableProps`](interfaces/ComposableProps.md) |
+| Name    | Type                          |
+| :------ | :---------------------------- |
+| `props` | [`ComposableProps`](props.md) |
 
 #### Returns
 
@@ -16,7 +16,7 @@ Defines a composable child inside of a Compose component
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 function Button({ asChild, children, ...props }) {
   const Composition = asChild ? Compose : "button";
   return (
@@ -27,6 +27,30 @@ function Button({ asChild, children, ...props }) {
 }
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Composition } from '@vtex/shoreline-components'
+import { Composable } from '@vtex/shoreline-components'
+export default function App() { return (<>function Button({ asChild, children, ...props }){ const Composition = asChild ? Compose : 'button' return (   <Composition {...props}>     Prefix <Composable>{children}</Composable>   </Composition> )}</>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
-[packages/components/src/compose/composable.tsx:17](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/compose/composable.tsx#L17)
+[packages/components/src/compose/composable.tsx:17](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/compose/composable.tsx#L17)
diff --git a/packages/next-docs/pages/components/composable/props.mdx b/packages/next-docs/pages/components/composable/props.mdx
index 9ababa27cc..de55da3a27 100644
--- a/packages/next-docs/pages/components/composable/props.mdx
+++ b/packages/next-docs/pages/components/composable/props.mdx
@@ -1,12 +1,5 @@
 # ComposableProps
 
-## Table of contents
-
-### Properties
-
-- [children](props.md#children)
-- [render](props.md#render)
-
 ## Properties
 
 ### children
@@ -15,7 +8,7 @@
 
 #### Defined in
 
-[packages/components/src/compose/composable.tsx:29](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/compose/composable.tsx#L29)
+[packages/components/src/compose/composable.tsx:29](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/compose/composable.tsx#L29)
 
 ---
 
@@ -25,4 +18,4 @@
 
 #### Defined in
 
-[packages/components/src/compose/composable.tsx:28](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/compose/composable.tsx#L28)
+[packages/components/src/compose/composable.tsx:28](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/compose/composable.tsx#L28)
diff --git a/packages/next-docs/pages/components/compose/code.mdx b/packages/next-docs/pages/components/compose/code.mdx
index 416bacca6f..03dfef4eb4 100644
--- a/packages/next-docs/pages/components/compose/code.mdx
+++ b/packages/next-docs/pages/components/compose/code.mdx
@@ -7,9 +7,9 @@ Used to implement Shoreline composition
 
 #### Parameters
 
-| Name    | Type                                                                    |
-| :------ | :---------------------------------------------------------------------- |
-| `props` | [`ComposeProps`](interfaces/ComposeProps.md) & `RefAttributes`\<`any`\> |
+| Name    | Type                                                  |
+| :------ | :---------------------------------------------------- |
+| `props` | [`ComposeProps`](props.md) & `RefAttributes`\<`any`\> |
 
 #### Returns
 
@@ -17,13 +17,36 @@ Used to implement Shoreline composition
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 function Button({ asChild, ...props }) {
   const Composition = asChild ? Compose : "button";
   return <Composition {...props} />;
 }
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Composition } from '@vtex/shoreline-components'
+export default function App() { return (<>function Button({ asChild, ...props }){ const Composition = asChild ? Compose : 'button' return <Composition {...props} />}</>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/compose/props.mdx b/packages/next-docs/pages/components/compose/props.mdx
index df1de43fa0..0581fb90c5 100644
--- a/packages/next-docs/pages/components/compose/props.mdx
+++ b/packages/next-docs/pages/components/compose/props.mdx
@@ -2,16 +2,10 @@
 
 ## Hierarchy
 
-- `HTMLAttributes`\<`HTMLElement`\>
+- `HTMLAttributes`\<[`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement)\>
 
   ↳ **`ComposeProps`**
 
-## Table of contents
-
-### Properties
-
-- [children](props.md#children)
-
 ## Properties
 
 ### children
@@ -24,4 +18,4 @@ HTMLAttributes.children
 
 #### Defined in
 
-[packages/components/src/compose/compose.tsx:33](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/compose/compose.tsx#L33)
+[packages/components/src/compose/compose.tsx:33](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/compose/compose.tsx#L33)
diff --git a/packages/next-docs/pages/components/container/code.mdx b/packages/next-docs/pages/components/container/code.mdx
index d25565f315..d9211f4ce0 100644
--- a/packages/next-docs/pages/components/container/code.mdx
+++ b/packages/next-docs/pages/components/container/code.mdx
@@ -6,9 +6,9 @@ Wraps Content component to support Container Queries
 
 #### Parameters
 
-| Name    | Type                                                                                   |
-| :------ | :------------------------------------------------------------------------------------- |
-| `props` | [`ContainerProps`](interfaces/ContainerProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                            |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`ContainerProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,36 @@ Wraps Content component to support Container Queries
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Container>
   <Content>...</Content>
 </Container>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Container } from '@vtex/shoreline-components'
+import { Content } from '@vtex/shoreline-components'
+export default function App() { return (<><Container> <Content>...</Content></Container></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/container/props.mdx b/packages/next-docs/pages/components/container/props.mdx
index aa3e8d7d05..3ec755515a 100644
--- a/packages/next-docs/pages/components/container/props.mdx
+++ b/packages/next-docs/pages/components/container/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`ContainerProps`**
 
-## Table of contents
-
-### Properties
-
-- [as](props.md#as)
-
 ## Properties
 
 ### as
@@ -28,4 +22,4 @@ Select the rendered html tag
 
 #### Defined in
 
-[packages/components/src/content/container.tsx:30](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/content/container.tsx#L30)
+[packages/components/src/content/container.tsx:30](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/content/container.tsx#L30)
diff --git a/packages/next-docs/pages/components/content/code.mdx b/packages/next-docs/pages/components/content/code.mdx
index f6475c157b..bc5a37b6f5 100644
--- a/packages/next-docs/pages/components/content/code.mdx
+++ b/packages/next-docs/pages/components/content/code.mdx
@@ -6,9 +6,9 @@ Content containers allow merchants to easily scan information to understand its
 
 #### Parameters
 
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `props` | [`ContentProps`](interfaces/ContentProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                          |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`ContentProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,36 @@ Content containers allow merchants to easily scan information to understand its
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Container>
   <Content>...</Content>
 </Container>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Container } from '@vtex/shoreline-components'
+import { Content } from '@vtex/shoreline-components'
+export default function App() { return (<><Container> <Content>...</Content></Container></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/content/props.mdx b/packages/next-docs/pages/components/content/props.mdx
index 42ea68aa49..06eed706bd 100644
--- a/packages/next-docs/pages/components/content/props.mdx
+++ b/packages/next-docs/pages/components/content/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`ContentProps`**
 
-## Table of contents
-
-### Properties
-
-- [as](props.md#as)
-- [narrow](props.md#narrow)
-
 ## Properties
 
 ### as
@@ -29,7 +22,7 @@ Select the rendered html tag
 
 #### Defined in
 
-[packages/components/src/content/content.tsx:31](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/content/content.tsx#L31)
+[packages/components/src/content/content.tsx:31](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/content/content.tsx#L31)
 
 ---
 
@@ -47,4 +40,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/content/content.tsx:36](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/content/content.tsx#L36)
+[packages/components/src/content/content.tsx:36](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/content/content.tsx#L36)
diff --git a/packages/next-docs/pages/components/field-label/code.mdx b/packages/next-docs/pages/components/field-label/code.mdx
index 19ffafbc04..f97c2d99f2 100644
--- a/packages/next-docs/pages/components/field-label/code.mdx
+++ b/packages/next-docs/pages/components/field-label/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                       |
-| :------ | :----------------------------------------------------------------------------------------- |
-| `props` | [`FieldLabelProps`](interfaces/FieldLabelProps.md) & `RefAttributes`\<`HTMLLabelElement`\> |
+| Name    | Type                                                                                                                                 |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`FieldLabelProps`](props.md) & `RefAttributes`\<[`HTMLLabelElement`](https://developer.mozilla.org/docs/Web/API/HTMLLabelElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/field-label/props.mdx b/packages/next-docs/pages/components/field-label/props.mdx
index d21193aad0..b3286d6f64 100644
--- a/packages/next-docs/pages/components/field-label/props.mdx
+++ b/packages/next-docs/pages/components/field-label/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`FieldLabelProps`**
 
-## Table of contents
-
-### Properties
-
-- [disabled](props.md#disabled)
-- [optional](props.md#optional)
-
 ## Properties
 
 ### disabled
@@ -21,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/field/field-label.tsx:30](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/field/field-label.tsx#L30)
+[packages/components/src/field/field-label.tsx:30](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/field/field-label.tsx#L30)
 
 ---
 
@@ -31,4 +24,4 @@
 
 #### Defined in
 
-[packages/components/src/field/field-label.tsx:31](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/field/field-label.tsx#L31)
+[packages/components/src/field/field-label.tsx:31](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/field/field-label.tsx#L31)
diff --git a/packages/next-docs/pages/components/field-message/code.mdx b/packages/next-docs/pages/components/field-message/code.mdx
index 6be3ebf47d..d05d5c5271 100644
--- a/packages/next-docs/pages/components/field-message/code.mdx
+++ b/packages/next-docs/pages/components/field-message/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                         |
-| :------ | :------------------------------------------------------------------------------------------- |
-| `props` | [`FieldMessageProps`](interfaces/FieldMessageProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                               |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`FieldMessageProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/field-message/props.mdx b/packages/next-docs/pages/components/field-message/props.mdx
index eac4da5aca..8819c52034 100644
--- a/packages/next-docs/pages/components/field-message/props.mdx
+++ b/packages/next-docs/pages/components/field-message/props.mdx
@@ -6,14 +6,6 @@
 
   ↳ **`FieldMessageProps`**
 
-## Table of contents
-
-### Properties
-
-- [error](props.md#error)
-- [errorText](props.md#errortext)
-- [helpText](props.md#helptext)
-
 ## Properties
 
 ### error
@@ -30,7 +22,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/field/field-message.tsx:40](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/field/field-message.tsx#L40)
+[packages/components/src/field/field-message.tsx:40](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/field/field-message.tsx#L40)
 
 ---
 
@@ -42,7 +34,7 @@ Error text message
 
 #### Defined in
 
-[packages/components/src/field/field-message.tsx:35](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/field/field-message.tsx#L35)
+[packages/components/src/field/field-message.tsx:35](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/field/field-message.tsx#L35)
 
 ---
 
@@ -54,4 +46,4 @@ Help text message
 
 #### Defined in
 
-[packages/components/src/field/field-message.tsx:31](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/field/field-message.tsx#L31)
+[packages/components/src/field/field-message.tsx:31](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/field/field-message.tsx#L31)
diff --git a/packages/next-docs/pages/components/field/code.mdx b/packages/next-docs/pages/components/field/code.mdx
index 79de7b90b4..435f963e7b 100644
--- a/packages/next-docs/pages/components/field/code.mdx
+++ b/packages/next-docs/pages/components/field/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                           |
-| :------ | :----------------------------------------------------------------------------- |
-| `props` | [`FieldProps`](interfaces/FieldProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                        |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`FieldProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/field/props.mdx b/packages/next-docs/pages/components/field/props.mdx
index 735fd41825..af38f6e308 100644
--- a/packages/next-docs/pages/components/field/props.mdx
+++ b/packages/next-docs/pages/components/field/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`FieldProps`**
 
-## Table of contents
-
-### Properties
-
-- [variant](props.md#variant)
-
 ## Properties
 
 ### variant
@@ -20,4 +14,4 @@
 
 #### Defined in
 
-[packages/components/src/field/field.tsx:19](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/field/field.tsx#L19)
+[packages/components/src/field/field.tsx:19](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/field/field.tsx#L19)
diff --git a/packages/next-docs/pages/components/filter-apply-props/code.mdx b/packages/next-docs/pages/components/filter-apply-props/code.mdx
deleted file mode 100644
index 7a292cfab6..0000000000
--- a/packages/next-docs/pages/components/filter-apply-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### FilterApplyProps
-
-Ƭ **FilterApplyProps**: [`PopoverDismissProps`](interfaces/PopoverDismissProps.md)
-
-#### Defined in
-
-[packages/components/src/filter/filter-apply.tsx:38](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/filter/filter-apply.tsx#L38)
diff --git a/packages/next-docs/pages/components/filter-apply/code.mdx b/packages/next-docs/pages/components/filter-apply/code.mdx
index 6d09b471c4..b12a8d7d40 100644
--- a/packages/next-docs/pages/components/filter-apply/code.mdx
+++ b/packages/next-docs/pages/components/filter-apply/code.mdx
@@ -6,9 +6,9 @@ Action that applies the Filter value, and closes the popover
 
 #### Parameters
 
-| Name    | Type                                                                                                |
-| :------ | :-------------------------------------------------------------------------------------------------- |
-| `props` | [`PopoverDismissProps`](interfaces/PopoverDismissProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                                                                |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`PopoverDismissProps`](interfaces/PopoverDismissProps.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Action that applies the Filter value, and closes the popover
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <FilterApply>Apply</FilterApply>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { FilterApply } from '@vtex/shoreline-components'
+export default function App() { return (<><FilterApply>Apply</FilterApply></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/filter-apply/props.mdx b/packages/next-docs/pages/components/filter-apply/props.mdx
index fd7986d357..eeee703b7d 100644
--- a/packages/next-docs/pages/components/filter-apply/props.mdx
+++ b/packages/next-docs/pages/components/filter-apply/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-apply.tsx:38](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-apply.tsx#L38)
+[packages/components/src/filter/filter-apply.tsx:38](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-apply.tsx#L38)
diff --git a/packages/next-docs/pages/components/filter-clear-props/code.mdx b/packages/next-docs/pages/components/filter-clear-props/code.mdx
deleted file mode 100644
index b0841e37ee..0000000000
--- a/packages/next-docs/pages/components/filter-clear-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### FilterClearProps
-
-Ƭ **FilterClearProps**: [`PopoverDismissProps`](interfaces/PopoverDismissProps.md)
-
-#### Defined in
-
-[packages/components/src/filter/filter-clear.tsx:37](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/filter/filter-clear.tsx#L37)
diff --git a/packages/next-docs/pages/components/filter-clear/code.mdx b/packages/next-docs/pages/components/filter-clear/code.mdx
index 7fd681ef03..d6a73cc399 100644
--- a/packages/next-docs/pages/components/filter-clear/code.mdx
+++ b/packages/next-docs/pages/components/filter-clear/code.mdx
@@ -6,9 +6,9 @@ Action that clears both Filter value and UI Select value
 
 #### Parameters
 
-| Name    | Type                                                                                                |
-| :------ | :-------------------------------------------------------------------------------------------------- |
-| `props` | [`PopoverDismissProps`](interfaces/PopoverDismissProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                                                                |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`PopoverDismissProps`](interfaces/PopoverDismissProps.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Action that clears both Filter value and UI Select value
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <FilterClear>Clear</FilterClear>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { FilterClear } from '@vtex/shoreline-components'
+export default function App() { return (<><FilterClear>Clear</FilterClear></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/filter-clear/props.mdx b/packages/next-docs/pages/components/filter-clear/props.mdx
index 9d4be35584..b947dda66e 100644
--- a/packages/next-docs/pages/components/filter-clear/props.mdx
+++ b/packages/next-docs/pages/components/filter-clear/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-clear.tsx:37](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-clear.tsx#L37)
+[packages/components/src/filter/filter-clear.tsx:37](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-clear.tsx#L37)
diff --git a/packages/next-docs/pages/components/filter-list-props/code.mdx b/packages/next-docs/pages/components/filter-list-props/code.mdx
deleted file mode 100644
index 56bf2f5e17..0000000000
--- a/packages/next-docs/pages/components/filter-list-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### FilterListProps
-
-Ƭ **FilterListProps**: `Omit`\<[`SelectListProps`](interfaces/SelectListProps.md), `"alwaysVisible"`\>
-
-#### Defined in
-
-[packages/components/src/filter/filter-list.tsx:37](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/filter/filter-list.tsx#L37)
diff --git a/packages/next-docs/pages/components/filter-list/code.mdx b/packages/next-docs/pages/components/filter-list/code.mdx
index 3c3d720a63..a24620914d 100644
--- a/packages/next-docs/pages/components/filter-list/code.mdx
+++ b/packages/next-docs/pages/components/filter-list/code.mdx
@@ -6,9 +6,9 @@ Filter listbox
 
 #### Parameters
 
-| Name    | Type                                                                                  |
-| :------ | :------------------------------------------------------------------------------------ |
-| `props` | [`FilterListProps`](modules.md#filterlistprops) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                               |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`FilterListProps`](modules.md#filterlistprops) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,7 +16,7 @@ Filter listbox
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <FilterProvider>
   <FilterPopover>
     <FilterList>
@@ -26,6 +26,32 @@ Filter listbox
 </FilterProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { FilterProvider } from '@vtex/shoreline-components'
+import { FilterPopover } from '@vtex/shoreline-components'
+import { FilterList } from '@vtex/shoreline-components'
+import { FilterOption } from '@vtex/shoreline-components'
+export default function App() { return (<><FilterProvider> <FilterPopover>   <FilterList>     <FilterOption value="option">Option</FilterOption>   </FilterList> </FilterPopover></FilterProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/filter-list/props.mdx b/packages/next-docs/pages/components/filter-list/props.mdx
index 11c6e0da6c..fc7b7406de 100644
--- a/packages/next-docs/pages/components/filter-list/props.mdx
+++ b/packages/next-docs/pages/components/filter-list/props.mdx
@@ -1,7 +1,7 @@
 ### FilterListProps
 
-Ƭ **FilterListProps**: `Omit`\<[`SelectListProps`](interfaces/SelectListProps.md), `"alwaysVisible"`\>
+Ƭ **FilterListProps**: [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<[`SelectListProps`](interfaces/SelectListProps.md), `"alwaysVisible"`\>
 
 #### Defined in
 
-[packages/components/src/filter/filter-list.tsx:37](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-list.tsx#L37)
+[packages/components/src/filter/filter-list.tsx:37](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-list.tsx#L37)
diff --git a/packages/next-docs/pages/components/filter-option-props/code.mdx b/packages/next-docs/pages/components/filter-option-props/code.mdx
deleted file mode 100644
index 6d585d9d13..0000000000
--- a/packages/next-docs/pages/components/filter-option-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### FilterOptionProps
-
-Ƭ **FilterOptionProps**: `Omit`\<[`SelectOptionProps`](interfaces/SelectOptionProps.md), `"hideOnClick"`\>
-
-#### Defined in
-
-[packages/components/src/filter/filter-option.tsx:51](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/filter/filter-option.tsx#L51)
diff --git a/packages/next-docs/pages/components/filter-option/code.mdx b/packages/next-docs/pages/components/filter-option/code.mdx
index 9a33d76a32..f5fbfbe79e 100644
--- a/packages/next-docs/pages/components/filter-option/code.mdx
+++ b/packages/next-docs/pages/components/filter-option/code.mdx
@@ -6,9 +6,9 @@ Filter Option
 
 #### Parameters
 
-| Name    | Type                                                                                      |
-| :------ | :---------------------------------------------------------------------------------------- |
-| `props` | [`FilterOptionProps`](modules.md#filteroptionprops) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                                   |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`FilterOptionProps`](modules.md#filteroptionprops) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,36 @@ Filter Option
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Filter label="Label">
   <FilterOption value="option">Option</FilterOption>
 </Filter>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Filter } from '@vtex/shoreline-components'
+import { FilterOption } from '@vtex/shoreline-components'
+export default function App() { return (<><Filter label="Label"> <FilterOption value="option">Option</FilterOption></Filter></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/filter-option/props.mdx b/packages/next-docs/pages/components/filter-option/props.mdx
index aec543c799..0c21f816f9 100644
--- a/packages/next-docs/pages/components/filter-option/props.mdx
+++ b/packages/next-docs/pages/components/filter-option/props.mdx
@@ -1,7 +1,7 @@
 ### FilterOptionProps
 
-Ƭ **FilterOptionProps**: `Omit`\<[`SelectOptionProps`](interfaces/SelectOptionProps.md), `"hideOnClick"`\>
+Ƭ **FilterOptionProps**: [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<[`SelectOptionProps`](interfaces/SelectOptionProps.md), `"hideOnClick"`\>
 
 #### Defined in
 
-[packages/components/src/filter/filter-option.tsx:51](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-option.tsx#L51)
+[packages/components/src/filter/filter-option.tsx:51](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-option.tsx#L51)
diff --git a/packages/next-docs/pages/components/filter-popover/code.mdx b/packages/next-docs/pages/components/filter-popover/code.mdx
index 26a093f88c..ec639cb129 100644
--- a/packages/next-docs/pages/components/filter-popover/code.mdx
+++ b/packages/next-docs/pages/components/filter-popover/code.mdx
@@ -6,9 +6,9 @@ Filter popover box
 
 #### Parameters
 
-| Name    | Type                                                                                           |
-| :------ | :--------------------------------------------------------------------------------------------- |
-| `props` | [`FilterPopoverProps`](interfaces/FilterPopoverProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`FilterPopoverProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,36 @@ Filter popover box
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <FilterProvider>
   <FilterPopover>...</FilterPopover>
 </FilterProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { FilterProvider } from '@vtex/shoreline-components'
+import { FilterPopover } from '@vtex/shoreline-components'
+export default function App() { return (<><FilterProvider> <FilterPopover>  ... </FilterPopover></FilterProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/filter-popover/props.mdx b/packages/next-docs/pages/components/filter-popover/props.mdx
index 944a8dbc86..9e93f65a4e 100644
--- a/packages/next-docs/pages/components/filter-popover/props.mdx
+++ b/packages/next-docs/pages/components/filter-popover/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`FilterPopoverProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [messages](props.md#messages)
-
 ## Properties
 
 ### asChild
@@ -33,7 +26,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/popover/popover.tsx:39](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/popover/popover.tsx#L39)
+[packages/components/src/popover/popover.tsx:39](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/popover/popover.tsx#L39)
 
 ---
 
@@ -50,4 +43,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/filter/filter-popover.tsx:62](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-popover.tsx#L62)
+[packages/components/src/filter/filter-popover.tsx:62](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-popover.tsx#L62)
diff --git a/packages/next-docs/pages/components/filter-provider/code.mdx b/packages/next-docs/pages/components/filter-provider/code.mdx
index d308162d16..aa9fa9d730 100644
--- a/packages/next-docs/pages/components/filter-provider/code.mdx
+++ b/packages/next-docs/pages/components/filter-provider/code.mdx
@@ -6,9 +6,9 @@ Provides context to Filter
 
 #### Parameters
 
-| Name    | Type                                                       |
-| :------ | :--------------------------------------------------------- |
-| `props` | [`FilterProviderProps`](interfaces/FilterProviderProps.md) |
+| Name    | Type                              |
+| :------ | :-------------------------------- |
+| `props` | [`FilterProviderProps`](props.md) |
 
 #### Returns
 
@@ -16,13 +16,38 @@ Provides context to Filter
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <FilterProvider>
   <FilterTrigger>...</FilterTrigger>
   <FilterPopover>...</FilterPopover>
 </FilterProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { FilterProvider } from '@vtex/shoreline-components'
+import { FilterTrigger } from '@vtex/shoreline-components'
+import { FilterPopover } from '@vtex/shoreline-components'
+export default function App() { return (<><FilterProvider>  <FilterTrigger>...</FilterTrigger>  <FilterPopover>...</FilterPopover></FilterProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:17](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L17)
+[packages/components/src/filter/filter-provider.tsx:17](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L17)
diff --git a/packages/next-docs/pages/components/filter-provider/props.mdx b/packages/next-docs/pages/components/filter-provider/props.mdx
index 45a501bcf3..4a94c0918a 100644
--- a/packages/next-docs/pages/components/filter-provider/props.mdx
+++ b/packages/next-docs/pages/components/filter-provider/props.mdx
@@ -1,20 +1,5 @@
 # FilterProviderProps
 
-## Table of contents
-
-### Properties
-
-- [children](props.md#children)
-- [defaultOpen](props.md#defaultopen)
-- [defaultSearchValue](props.md#defaultsearchvalue)
-- [defaultValue](props.md#defaultvalue)
-- [open](props.md#open)
-- [searchValue](props.md#searchvalue)
-- [setOpen](props.md#setopen)
-- [setSearchValue](props.md#setsearchvalue)
-- [setValue](props.md#setvalue)
-- [value](props.md#value)
-
 ## Properties
 
 ### children
@@ -23,7 +8,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:80](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L80)
+[packages/components/src/filter/filter-provider.tsx:80](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L80)
 
 ---
 
@@ -33,7 +18,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:83](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L83)
+[packages/components/src/filter/filter-provider.tsx:83](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L83)
 
 ---
 
@@ -43,7 +28,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:86](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L86)
+[packages/components/src/filter/filter-provider.tsx:86](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L86)
 
 ---
 
@@ -53,7 +38,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:91](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L91)
+[packages/components/src/filter/filter-provider.tsx:91](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L91)
 
 ---
 
@@ -63,7 +48,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:81](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L81)
+[packages/components/src/filter/filter-provider.tsx:81](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L81)
 
 ---
 
@@ -73,7 +58,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:84](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L84)
+[packages/components/src/filter/filter-provider.tsx:84](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L84)
 
 ---
 
@@ -83,7 +68,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:82](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L82)
+[packages/components/src/filter/filter-provider.tsx:82](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L82)
 
 ---
 
@@ -93,7 +78,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:85](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L85)
+[packages/components/src/filter/filter-provider.tsx:85](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L85)
 
 ---
 
@@ -103,7 +88,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:88](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L88)
+[packages/components/src/filter/filter-provider.tsx:88](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L88)
 
 ---
 
@@ -113,4 +98,4 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:87](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L87)
+[packages/components/src/filter/filter-provider.tsx:87](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L87)
diff --git a/packages/next-docs/pages/components/filter-trigger-props/code.mdx b/packages/next-docs/pages/components/filter-trigger-props/code.mdx
deleted file mode 100644
index 9a5e40685e..0000000000
--- a/packages/next-docs/pages/components/filter-trigger-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### FilterTriggerProps
-
-Ƭ **FilterTriggerProps**: [`PopoverTriggerProps`](interfaces/PopoverTriggerProps.md)
-
-#### Defined in
-
-[packages/components/src/filter/filter-trigger.tsx:29](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/filter/filter-trigger.tsx#L29)
diff --git a/packages/next-docs/pages/components/filter-trigger/code.mdx b/packages/next-docs/pages/components/filter-trigger/code.mdx
index c9e74e15f7..f0254d0f03 100644
--- a/packages/next-docs/pages/components/filter-trigger/code.mdx
+++ b/packages/next-docs/pages/components/filter-trigger/code.mdx
@@ -6,9 +6,9 @@ Triggers the Filter Popover box, also displays the Filter applied value
 
 #### Parameters
 
-| Name    | Type                                                                                                |
-| :------ | :-------------------------------------------------------------------------------------------------- |
-| `props` | [`PopoverTriggerProps`](interfaces/PopoverTriggerProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                                                                |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`PopoverTriggerProps`](interfaces/PopoverTriggerProps.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -16,12 +16,36 @@ Triggers the Filter Popover box, also displays the Filter applied value
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <FilterProvider>
   <FilterTrigger>Open</FilterTrigger>
 </FilterProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { FilterProvider } from '@vtex/shoreline-components'
+import { FilterTrigger } from '@vtex/shoreline-components'
+export default function App() { return (<><FilterProvider>  <FilterTrigger>Open</FilterTrigger></FilterProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/filter-trigger/props.mdx b/packages/next-docs/pages/components/filter-trigger/props.mdx
index 9030bc3e59..886f880bcb 100644
--- a/packages/next-docs/pages/components/filter-trigger/props.mdx
+++ b/packages/next-docs/pages/components/filter-trigger/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-trigger.tsx:29](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-trigger.tsx#L29)
+[packages/components/src/filter/filter-trigger.tsx:29](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-trigger.tsx#L29)
diff --git a/packages/next-docs/pages/components/filter-value-props/code.mdx b/packages/next-docs/pages/components/filter-value-props/code.mdx
deleted file mode 100644
index e8783223f6..0000000000
--- a/packages/next-docs/pages/components/filter-value-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### FilterValueProps
-
-Ƭ **FilterValueProps**: `ComponentPropsWithoutRef`\<`"span"`\>
-
-#### Defined in
-
-[packages/components/src/filter/filter-value.tsx:29](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/filter/filter-value.tsx#L29)
diff --git a/packages/next-docs/pages/components/filter-value/code.mdx b/packages/next-docs/pages/components/filter-value/code.mdx
index 260ad9be3e..f763ba0d0e 100644
--- a/packages/next-docs/pages/components/filter-value/code.mdx
+++ b/packages/next-docs/pages/components/filter-value/code.mdx
@@ -6,9 +6,9 @@ Renders the Filter applied value
 
 #### Parameters
 
-| Name    | Type                                                                                                                                      |
-| :------ | :---------------------------------------------------------------------------------------------------------------------------------------- |
-| `props` | `Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLSpanElement`\>, `HTMLSpanElement`\>, `"ref"`\> & `RefAttributes`\<`HTMLSpanElement`\> |
+| Name    | Type                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<`DetailedHTMLProps`\<`HTMLAttributes`\<[`HTMLSpanElement`](https://developer.mozilla.org/docs/Web/API/HTMLSpanElement)\>, [`HTMLSpanElement`](https://developer.mozilla.org/docs/Web/API/HTMLSpanElement)\>, `"ref"`\> & `RefAttributes`\<[`HTMLSpanElement`](https://developer.mozilla.org/docs/Web/API/HTMLSpanElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/filter-value/props.mdx b/packages/next-docs/pages/components/filter-value/props.mdx
index 740c93f294..60f72bb863 100644
--- a/packages/next-docs/pages/components/filter-value/props.mdx
+++ b/packages/next-docs/pages/components/filter-value/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-value.tsx:29](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-value.tsx#L29)
+[packages/components/src/filter/filter-value.tsx:29](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-value.tsx#L29)
diff --git a/packages/next-docs/pages/components/filter/code.mdx b/packages/next-docs/pages/components/filter/code.mdx
index 8d8c020fef..cae154960a 100644
--- a/packages/next-docs/pages/components/filter/code.mdx
+++ b/packages/next-docs/pages/components/filter/code.mdx
@@ -6,9 +6,9 @@ Filter component
 
 #### Parameters
 
-| Name    | Type                                                                             |
-| :------ | :------------------------------------------------------------------------------- |
-| `props` | [`FilterProps`](interfaces/FilterProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                         |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`FilterProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,36 @@ Filter component
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Filter label="Label">
   <FilterOption value="option">Option</FilterOption>
 </Filter>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Filter } from '@vtex/shoreline-components'
+import { FilterOption } from '@vtex/shoreline-components'
+export default function App() { return (<><Filter label="Label"> <FilterOption value="option">Option</FilterOption></Filter></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/filter/props.mdx b/packages/next-docs/pages/components/filter/props.mdx
index fb12ff34e1..4eb6bd4339 100644
--- a/packages/next-docs/pages/components/filter/props.mdx
+++ b/packages/next-docs/pages/components/filter/props.mdx
@@ -6,21 +6,6 @@
 
   ↳ **`FilterProps`**
 
-## Table of contents
-
-### Properties
-
-- [children](props.md#children)
-- [className](props.md#classname)
-- [defaultSearchValue](props.md#defaultsearchvalue)
-- [defaultValue](props.md#defaultvalue)
-- [label](props.md#label)
-- [messages](props.md#messages)
-- [searchValue](props.md#searchvalue)
-- [setSearchValue](props.md#setsearchvalue)
-- [setValue](props.md#setvalue)
-- [value](props.md#value)
-
 ## Properties
 
 ### children
@@ -29,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter.tsx:67](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter.tsx#L67)
+[packages/components/src/filter/filter.tsx:67](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter.tsx#L67)
 
 ---
 
@@ -39,7 +24,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter.tsx:68](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter.tsx#L68)
+[packages/components/src/filter/filter.tsx:68](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter.tsx#L68)
 
 ---
 
@@ -53,7 +38,7 @@ InheritedProps.defaultSearchValue
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:86](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L86)
+[packages/components/src/filter/filter-provider.tsx:86](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L86)
 
 ---
 
@@ -67,7 +52,7 @@ InheritedProps.defaultValue
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:91](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L91)
+[packages/components/src/filter/filter-provider.tsx:91](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L91)
 
 ---
 
@@ -77,7 +62,7 @@ InheritedProps.defaultValue
 
 #### Defined in
 
-[packages/components/src/filter/filter.tsx:66](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter.tsx#L66)
+[packages/components/src/filter/filter.tsx:66](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter.tsx#L66)
 
 ---
 
@@ -98,7 +83,7 @@ InheritedProps.messages
 
 #### Defined in
 
-[packages/components/src/filter/filter-popover.tsx:62](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-popover.tsx#L62)
+[packages/components/src/filter/filter-popover.tsx:62](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-popover.tsx#L62)
 
 ---
 
@@ -112,7 +97,7 @@ InheritedProps.searchValue
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:84](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L84)
+[packages/components/src/filter/filter-provider.tsx:84](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L84)
 
 ---
 
@@ -126,7 +111,7 @@ InheritedProps.setSearchValue
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:85](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L85)
+[packages/components/src/filter/filter-provider.tsx:85](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L85)
 
 ---
 
@@ -140,7 +125,7 @@ InheritedProps.setValue
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:88](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L88)
+[packages/components/src/filter/filter-provider.tsx:88](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L88)
 
 ---
 
@@ -154,4 +139,4 @@ InheritedProps.value
 
 #### Defined in
 
-[packages/components/src/filter/filter-provider.tsx:87](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-provider.tsx#L87)
+[packages/components/src/filter/filter-provider.tsx:87](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-provider.tsx#L87)
diff --git a/packages/next-docs/pages/components/flex-props/code.mdx b/packages/next-docs/pages/components/flex-props/code.mdx
deleted file mode 100644
index a6e255baaf..0000000000
--- a/packages/next-docs/pages/components/flex-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### FlexProps
-
-Ƭ **FlexProps**: `ComponentPropsWithoutRef`\<`"div"`\> & `FlexShorthandProps`
-
-#### Defined in
-
-[packages/components/src/flex/flex.tsx:52](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/flex/flex.tsx#L52)
diff --git a/packages/next-docs/pages/components/flex/code.mdx b/packages/next-docs/pages/components/flex/code.mdx
index 07eccb9636..d5e4bfbca6 100644
--- a/packages/next-docs/pages/components/flex/code.mdx
+++ b/packages/next-docs/pages/components/flex/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                                                                                          |
-| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `props` | `Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\>, `"ref"`\> & `FlexShorthandProps` & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<`DetailedHTMLProps`\<`HTMLAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, [`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, `"ref"`\> & `FlexShorthandProps` & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/flex/props.mdx b/packages/next-docs/pages/components/flex/props.mdx
index 6fb0db9ca9..7cc2f89c0b 100644
--- a/packages/next-docs/pages/components/flex/props.mdx
+++ b/packages/next-docs/pages/components/flex/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/flex/flex.tsx:52](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/flex/flex.tsx#L52)
+[packages/components/src/flex/flex.tsx:52](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/flex/flex.tsx#L52)
diff --git a/packages/next-docs/pages/components/grid-cell-props/code.mdx b/packages/next-docs/pages/components/grid-cell-props/code.mdx
deleted file mode 100644
index e8010e89ea..0000000000
--- a/packages/next-docs/pages/components/grid-cell-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### GridCellProps
-
-Ƭ **GridCellProps**: `ComponentPropsWithoutRef`\<`"div"`\> & [`GridCellShorthandProps`](interfaces/GridCellShorthandProps.md)
-
-#### Defined in
-
-[packages/components/src/grid/grid-cell.tsx:42](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/grid/grid-cell.tsx#L42)
diff --git a/packages/next-docs/pages/components/grid-cell/code.mdx b/packages/next-docs/pages/components/grid-cell/code.mdx
index be91909c39..ff4fbf3fae 100644
--- a/packages/next-docs/pages/components/grid-cell/code.mdx
+++ b/packages/next-docs/pages/components/grid-cell/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                                                                                                                                      |
-| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `props` | `Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\>, `"ref"`\> & [`GridCellShorthandProps`](interfaces/GridCellShorthandProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<`DetailedHTMLProps`\<`HTMLAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, [`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, `"ref"`\> & [`GridCellShorthandProps`](interfaces/GridCellShorthandProps.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/grid-cell/props.mdx b/packages/next-docs/pages/components/grid-cell/props.mdx
index f6103cf8a3..cfc8b94273 100644
--- a/packages/next-docs/pages/components/grid-cell/props.mdx
+++ b/packages/next-docs/pages/components/grid-cell/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/grid/grid-cell.tsx:42](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/grid/grid-cell.tsx#L42)
+[packages/components/src/grid/grid-cell.tsx:42](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/grid/grid-cell.tsx#L42)
diff --git a/packages/next-docs/pages/components/grid-props/code.mdx b/packages/next-docs/pages/components/grid-props/code.mdx
deleted file mode 100644
index 986d8d1337..0000000000
--- a/packages/next-docs/pages/components/grid-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### GridProps
-
-Ƭ **GridProps**: `ComponentPropsWithoutRef`\<`"div"`\> & [`GridShorthandProps`](interfaces/GridShorthandProps.md)
-
-#### Defined in
-
-[packages/components/src/grid/grid.tsx:44](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/grid/grid.tsx#L44)
diff --git a/packages/next-docs/pages/components/grid/code.mdx b/packages/next-docs/pages/components/grid/code.mdx
index 8352949dab..f44d61fb3f 100644
--- a/packages/next-docs/pages/components/grid/code.mdx
+++ b/packages/next-docs/pages/components/grid/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                                                                                                                              |
-| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `props` | `Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\>, `"ref"`\> & [`GridShorthandProps`](interfaces/GridShorthandProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<`DetailedHTMLProps`\<`HTMLAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, [`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, `"ref"`\> & [`GridShorthandProps`](interfaces/GridShorthandProps.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/grid/props.mdx b/packages/next-docs/pages/components/grid/props.mdx
index 37eb050cc8..39c5095b02 100644
--- a/packages/next-docs/pages/components/grid/props.mdx
+++ b/packages/next-docs/pages/components/grid/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/grid/grid.tsx:44](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/grid/grid.tsx#L44)
+[packages/components/src/grid/grid.tsx:44](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/grid/grid.tsx#L44)
diff --git a/packages/next-docs/pages/components/icon-button/code.mdx b/packages/next-docs/pages/components/icon-button/code.mdx
index 18d8bde31d..467c5ed3ac 100644
--- a/packages/next-docs/pages/components/icon-button/code.mdx
+++ b/packages/next-docs/pages/components/icon-button/code.mdx
@@ -6,9 +6,9 @@ A button designed specifically for usage with a single icon.
 
 #### Parameters
 
-| Name    | Type                                                                                        |
-| :------ | :------------------------------------------------------------------------------------------ |
-| `props` | [`IconButtonProps`](interfaces/IconButtonProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                                   |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`IconButtonProps`](props.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -16,12 +16,36 @@ A button designed specifically for usage with a single icon.
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <IconButton label="Delete">
   <IconTrash />
 </IconButton>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { IconButton } from '@vtex/shoreline-components'
+import { IconTrash } from '@vtex/shoreline-components'
+export default function App() { return (<><IconButton label="Delete"> <IconTrash /></IconButton></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/icon-button/props.mdx b/packages/next-docs/pages/components/icon-button/props.mdx
index fe54d41028..bbf0acc03a 100644
--- a/packages/next-docs/pages/components/icon-button/props.mdx
+++ b/packages/next-docs/pages/components/icon-button/props.mdx
@@ -6,17 +6,6 @@
 
   ↳ **`IconButtonProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [children](props.md#children)
-- [label](props.md#label)
-- [loading](props.md#loading)
-- [size](props.md#size)
-- [variant](props.md#variant)
-
 ## Properties
 
 ### asChild
@@ -37,7 +26,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:95](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L95)
+[packages/components/src/button/button.tsx:95](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L95)
 
 ---
 
@@ -51,7 +40,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:70](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L70)
+[packages/components/src/button/button.tsx:70](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L70)
 
 ---
 
@@ -61,7 +50,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/icon-button/icon-button.tsx:33](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/icon-button/icon-button.tsx#L33)
+[packages/components/src/icon-button/icon-button.tsx:33](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/icon-button/icon-button.tsx#L33)
 
 ---
 
@@ -83,7 +72,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:90](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L90)
+[packages/components/src/button/button.tsx:90](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L90)
 
 ---
 
@@ -96,7 +85,7 @@ Increase or decrease padding.
 **`Default`**
 
 ```ts
-normal;
+"normal";
 ```
 
 #### Inherited from
@@ -105,7 +94,7 @@ normal;
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:75](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L75)
+[packages/components/src/button/button.tsx:75](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L75)
 
 ---
 
@@ -127,4 +116,4 @@ Change between color combinations.
 
 #### Defined in
 
-[packages/components/src/button/button.tsx:80](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/button/button.tsx#L80)
+[packages/components/src/button/button.tsx:80](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/button/button.tsx#L80)
diff --git a/packages/next-docs/pages/components/interfaces/code.mdx b/packages/next-docs/pages/components/interfaces/code.mdx
deleted file mode 100644
index e07072c4b3..0000000000
--- a/packages/next-docs/pages/components/interfaces/code.mdx
+++ /dev/null
@@ -1,196 +0,0 @@
-# shoreline
-
-## Table of contents
-
-### Interfaces
-
-- [AccessibleIconProps](interfaces/AccessibleIconProps.md)
-- [AlertProps](interfaces/AlertProps.md)
-- [BleedProps](interfaces/BleedProps.md)
-- [ButtonProps](interfaces/ButtonProps.md)
-- [CheckboxFieldProps](interfaces/CheckboxFieldProps.md)
-- [CheckboxGroupProps](interfaces/CheckboxGroupProps.md)
-- [CheckboxProps](interfaces/CheckboxProps.md)
-- [ClickableBubbleProps](interfaces/ClickableBubbleProps.md)
-- [ClickableProps](interfaces/ClickableProps.md)
-- [ComboboxItemProps](interfaces/ComboboxItemProps.md)
-- [ComboboxListProps](interfaces/ComboboxListProps.md)
-- [ComboboxPopoverProps](interfaces/ComboboxPopoverProps.md)
-- [ComboboxProps](interfaces/ComboboxProps.md)
-- [ComposableProps](interfaces/ComposableProps.md)
-- [ComposeProps](interfaces/ComposeProps.md)
-- [ContainerProps](interfaces/ContainerProps.md)
-- [ContentProps](interfaces/ContentProps.md)
-- [FieldLabelProps](interfaces/FieldLabelProps.md)
-- [FieldMessageProps](interfaces/FieldMessageProps.md)
-- [FieldProps](interfaces/FieldProps.md)
-- [FilterPopoverProps](interfaces/FilterPopoverProps.md)
-- [FilterProps](interfaces/FilterProps.md)
-- [FilterProviderProps](interfaces/FilterProviderProps.md)
-- [GridCellShorthandProps](interfaces/GridCellShorthandProps.md)
-- [GridShorthandProps](interfaces/GridShorthandProps.md)
-- [IconButtonProps](interfaces/IconButtonProps.md)
-- [LinkBoxProps](interfaces/LinkBoxProps.md)
-- [LinkProps](interfaces/LinkProps.md)
-- [LocaleProviderProps](interfaces/LocaleProviderProps.md)
-- [MenuItemProps](interfaces/MenuItemProps.md)
-- [MenuProps](interfaces/MenuProps.md)
-- [ModalProps](interfaces/ModalProps.md)
-- [PaginationProps](interfaces/PaginationProps.md)
-- [PopoverDismissProps](interfaces/PopoverDismissProps.md)
-- [PopoverProps](interfaces/PopoverProps.md)
-- [PopoverTriggerProps](interfaces/PopoverTriggerProps.md)
-- [RadioGroupProps](interfaces/RadioGroupProps.md)
-- [RadioGroupState](interfaces/RadioGroupState.md)
-- [RadioProps](interfaces/RadioProps.md)
-- [ScrollAreaProps](interfaces/ScrollAreaProps.md)
-- [SearchProps](interfaces/SearchProps.md)
-- [SelectFieldProps](interfaces/SelectFieldProps.md)
-- [SelectListProps](interfaces/SelectListProps.md)
-- [SelectOptionCheckProps](interfaces/SelectOptionCheckProps.md)
-- [SelectOptionProps](interfaces/SelectOptionProps.md)
-- [SelectPopoverProps](interfaces/SelectPopoverProps.md)
-- [SelectProps](interfaces/SelectProps.md)
-- [SimpleTableProps](interfaces/SimpleTableProps.md)
-- [SkeletonProps](interfaces/SkeletonProps.md)
-- [SpinnerProps](interfaces/SpinnerProps.md)
-- [StackProps](interfaces/StackProps.md)
-- [TabListProps](interfaces/TabListProps.md)
-- [TabPanelProps](interfaces/TabPanelProps.md)
-- [TabProps](interfaces/TabProps.md)
-- [TableBodyProps](interfaces/TableBodyProps.md)
-- [TableCellProps](interfaces/TableCellProps.md)
-- [TableHeaderCellProps](interfaces/TableHeaderCellProps.md)
-- [TableHeaderProps](interfaces/TableHeaderProps.md)
-- [TableProps](interfaces/TableProps.md)
-- [TableRowProps](interfaces/TableRowProps.md)
-- [TagProps](interfaces/TagProps.md)
-- [TextInputProps](interfaces/TextInputProps.md)
-- [TextareaProps](interfaces/TextareaProps.md)
-- [TooltipAnchorProps](interfaces/TooltipAnchorProps.md)
-- [TooltipArrowProps](interfaces/TooltipArrowProps.md)
-- [TooltipPopoverProps](interfaces/TooltipPopoverProps.md)
-- [TooltipProps](interfaces/TooltipProps.md)
-- [VisuallyHiddenProps](interfaces/VisuallyHiddenProps.md)
-
-### Type Aliases
-
-- [ActionProps](modules.md#actionprops)
-- [CenterProps](modules.md#centerprops)
-- [FilterApplyProps](modules.md#filterapplyprops)
-- [FilterClearProps](modules.md#filterclearprops)
-- [FilterListProps](modules.md#filterlistprops)
-- [FilterOptionProps](modules.md#filteroptionprops)
-- [FilterTriggerProps](modules.md#filtertriggerprops)
-- [FilterValueProps](modules.md#filtervalueprops)
-- [FlexProps](modules.md#flexprops)
-- [GridCellProps](modules.md#gridcellprops)
-- [GridProps](modules.md#gridprops)
-- [MenuSeparatorProps](modules.md#menuseparatorprops)
-- [ModalHeaderProps](modules.md#modalheaderprops)
-- [TextProps](modules.md#textprops)
-
-### Variables
-
-- [FilterContext](modules.md#filtercontext)
-
-### Functions
-
-- [AccessibleIcon](modules.md#accessibleicon)
-- [Action](modules.md#action)
-- [Alert](modules.md#alert)
-- [Bleed](modules.md#bleed)
-- [Button](modules.md#button)
-- [Center](modules.md#center)
-- [Checkbox](modules.md#checkbox)
-- [CheckboxField](modules.md#checkboxfield)
-- [CheckboxGroup](modules.md#checkboxgroup)
-- [Clickable](modules.md#clickable)
-- [ClickableBubble](modules.md#clickablebubble)
-- [Combobox](modules.md#combobox)
-- [ComboboxItem](modules.md#comboboxitem)
-- [ComboboxList](modules.md#comboboxlist)
-- [ComboboxPopover](modules.md#comboboxpopover)
-- [Composable](modules.md#composable)
-- [Compose](modules.md#compose)
-- [Container](modules.md#container)
-- [Content](modules.md#content)
-- [Field](modules.md#field)
-- [FieldLabel](modules.md#fieldlabel)
-- [FieldMessage](modules.md#fieldmessage)
-- [Filter](modules.md#filter)
-- [FilterApply](modules.md#filterapply)
-- [FilterClear](modules.md#filterclear)
-- [FilterList](modules.md#filterlist)
-- [FilterOption](modules.md#filteroption)
-- [FilterPopover](modules.md#filterpopover)
-- [FilterProvider](modules.md#filterprovider)
-- [FilterTrigger](modules.md#filtertrigger)
-- [FilterValue](modules.md#filtervalue)
-- [Flex](modules.md#flex)
-- [Grid](modules.md#grid)
-- [GridCell](modules.md#gridcell)
-- [IconButton](modules.md#iconbutton)
-- [Link](modules.md#link)
-- [LinkBox](modules.md#linkbox)
-- [LocaleProvider](modules.md#localeprovider)
-- [Menu](modules.md#menu)
-- [MenuItem](modules.md#menuitem)
-- [MenuSeparator](modules.md#menuseparator)
-- [MenuTrigger](modules.md#menutrigger)
-- [Modal](modules.md#modal)
-- [ModalHeader](modules.md#modalheader)
-- [Pagination](modules.md#pagination)
-- [Popover](modules.md#popover)
-- [PopoverDismiss](modules.md#popoverdismiss)
-- [PopoverTrigger](modules.md#popovertrigger)
-- [Radio](modules.md#radio)
-- [RadioGroup](modules.md#radiogroup)
-- [ScrollArea](modules.md#scrollarea)
-- [Search](modules.md#search)
-- [Select](modules.md#select)
-- [SelectField](modules.md#selectfield)
-- [SelectList](modules.md#selectlist)
-- [SelectOption](modules.md#selectoption)
-- [SelectOptionCheck](modules.md#selectoptioncheck)
-- [SelectPopover](modules.md#selectpopover)
-- [SimpleTable](modules.md#simpletable)
-- [Skeleton](modules.md#skeleton)
-- [Spinner](modules.md#spinner)
-- [Stack](modules.md#stack)
-- [Tab](modules.md#tab)
-- [TabList](modules.md#tablist)
-- [TabPanel](modules.md#tabpanel)
-- [Table](modules.md#table)
-- [TableBody](modules.md#tablebody)
-- [TableCell](modules.md#tablecell)
-- [TableHeader](modules.md#tableheader)
-- [TableHeaderCell](modules.md#tableheadercell)
-- [TableRow](modules.md#tablerow)
-- [Tag](modules.md#tag)
-- [Text](modules.md#text)
-- [TextInput](modules.md#textinput)
-- [Textarea](modules.md#textarea)
-- [Tooltip](modules.md#tooltip)
-- [TooltipAnchor](modules.md#tooltipanchor)
-- [TooltipArrow](modules.md#tooltiparrow)
-- [TooltipPopover](modules.md#tooltippopover)
-- [VisuallyHidden](modules.md#visuallyhidden)
-- [createMessageHook](modules.md#createmessagehook)
-- [get](modules.md#get)
-- [getExpandedColumn](modules.md#getexpandedcolumn)
-- [getSelectionColum](modules.md#getselectioncolum)
-- [isComposable](modules.md#iscomposable)
-- [useFilterContext](modules.md#usefiltercontext)
-- [useLocale](modules.md#uselocale)
-- [useRadioState](modules.md#useradiostate)
-
-## Type Aliases
-
-### ActionProps
-
-Ƭ **ActionProps**: `Omit`\<[`ButtonProps`](interfaces/ButtonProps.md), `"variant"`\> & \{ `iconOnly?`: `boolean` ; `label?`: `ReactNode` ; `vertical?`: `boolean` }
-
-#### Defined in
-
-[packages/components/src/action/action.tsx:34](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/action/action.tsx#L34)
diff --git a/packages/next-docs/pages/components/link-box/code.mdx b/packages/next-docs/pages/components/link-box/code.mdx
index 53a54c024c..dd53a4f648 100644
--- a/packages/next-docs/pages/components/link-box/code.mdx
+++ b/packages/next-docs/pages/components/link-box/code.mdx
@@ -6,9 +6,9 @@ A container that acts as a link. It allows text selection and stop its children
 
 #### Parameters
 
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `props` | [`LinkBoxProps`](interfaces/LinkBoxProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                          |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`LinkBoxProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,7 +16,7 @@ A container that acts as a link. It allows text selection and stop its children
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <LinkBox href="">
   <div>
     <a>...</a>
@@ -25,6 +25,29 @@ A container that acts as a link. It allows text selection and stop its children
 </LinkBox>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { LinkBox } from '@vtex/shoreline-components'
+export default function App() { return (<><LinkBox href="">  <div>    <a>...</a>  </div>  <button>...</button></LinkBox></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 packages/utils/dist/index.d.ts:183
diff --git a/packages/next-docs/pages/components/link-box/props.mdx b/packages/next-docs/pages/components/link-box/props.mdx
index 29cf2f2ee4..cbf4abf6c2 100644
--- a/packages/next-docs/pages/components/link-box/props.mdx
+++ b/packages/next-docs/pages/components/link-box/props.mdx
@@ -2,18 +2,10 @@
 
 ## Hierarchy
 
-- `Omit`\<[`ClickableProps`](ClickableProps.md), `"onClick"`\>
+- [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<[`ClickableProps`](ClickableProps.md), `"onClick"`\>
 
   ↳ **`LinkBoxProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [href](props.md#href)
-- [target](props.md#target)
-
 ## Properties
 
 ### asChild
@@ -34,7 +26,7 @@ Omit.asChild
 
 #### Defined in
 
-[packages/components/src/clickable/clickable.tsx:52](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/clickable/clickable.tsx#L52)
+[packages/components/src/clickable/clickable.tsx:52](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/clickable/clickable.tsx#L52)
 
 ---
 
@@ -50,7 +42,7 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href
 
 #### Defined in
 
-[packages/components/src/link-box/link-box.tsx:43](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/link-box/link-box.tsx#L43)
+[packages/components/src/link-box/link-box.tsx:43](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/link-box/link-box.tsx#L43)
 
 ---
 
@@ -72,4 +64,4 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
 
 #### Defined in
 
-[packages/components/src/link-box/link-box.tsx:49](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/link-box/link-box.tsx#L49)
+[packages/components/src/link-box/link-box.tsx:49](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/link-box/link-box.tsx#L49)
diff --git a/packages/next-docs/pages/components/link/code.mdx b/packages/next-docs/pages/components/link/code.mdx
index 51831d0826..cdb39ba2b0 100644
--- a/packages/next-docs/pages/components/link/code.mdx
+++ b/packages/next-docs/pages/components/link/code.mdx
@@ -6,9 +6,9 @@ Anchor component
 
 #### Parameters
 
-| Name    | Type                                                                            |
-| :------ | :------------------------------------------------------------------------------ |
-| `props` | [`LinkProps`](interfaces/LinkProps.md) & `RefAttributes`\<`HTMLAnchorElement`\> |
+| Name    | Type                                                                                                                             |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`LinkProps`](props.md) & `RefAttributes`\<[`HTMLAnchorElement`](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Anchor component
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Link href="https://vtex.com">Go to VTEX</Link>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Link } from '@vtex/shoreline-components'
+export default function App() { return (<><Link href="https://vtex.com">Go to VTEX</Link></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/link/props.mdx b/packages/next-docs/pages/components/link/props.mdx
index 4ebf82f4de..a4d9350376 100644
--- a/packages/next-docs/pages/components/link/props.mdx
+++ b/packages/next-docs/pages/components/link/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`LinkProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/link/link.tsx:27](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/link/link.tsx#L27)
+[packages/components/src/link/link.tsx:27](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/link/link.tsx#L27)
diff --git a/packages/next-docs/pages/components/locale-provider/code.mdx b/packages/next-docs/pages/components/locale-provider/code.mdx
index 61931a9d05..4d9ec99b7c 100644
--- a/packages/next-docs/pages/components/locale-provider/code.mdx
+++ b/packages/next-docs/pages/components/locale-provider/code.mdx
@@ -6,9 +6,9 @@ Provides the locale
 
 #### Parameters
 
-| Name    | Type                                                       |
-| :------ | :--------------------------------------------------------- |
-| `props` | [`LocaleProviderProps`](interfaces/LocaleProviderProps.md) |
+| Name    | Type                              |
+| :------ | :-------------------------------- |
+| `props` | [`LocaleProviderProps`](props.md) |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Provides the locale
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <LocaleProvider locale="pt-BR">...</LocaleProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { LocaleProvider } from '@vtex/shoreline-components'
+export default function App() { return (<><LocaleProvider locale="pt-BR"> ...</LocaleProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
-[packages/components/src/locale/locale-provider.tsx:12](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/locale/locale-provider.tsx#L12)
+[packages/components/src/locale/locale-provider.tsx:12](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/locale/locale-provider.tsx#L12)
diff --git a/packages/next-docs/pages/components/locale-provider/props.mdx b/packages/next-docs/pages/components/locale-provider/props.mdx
index 42776b2799..c87e8255aa 100644
--- a/packages/next-docs/pages/components/locale-provider/props.mdx
+++ b/packages/next-docs/pages/components/locale-provider/props.mdx
@@ -1,12 +1,5 @@
 # LocaleProviderProps
 
-## Table of contents
-
-### Properties
-
-- [children](props.md#children)
-- [locale](props.md#locale)
-
 ## Properties
 
 ### children
@@ -15,7 +8,7 @@
 
 #### Defined in
 
-[packages/components/src/locale/locale-provider.tsx:26](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/locale/locale-provider.tsx#L26)
+[packages/components/src/locale/locale-provider.tsx:26](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/locale/locale-provider.tsx#L26)
 
 ---
 
@@ -31,4 +24,4 @@ https://www.ietf.org/rfc/bcp/bcp47.txt
 
 #### Defined in
 
-[packages/components/src/locale/locale-provider.tsx:25](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/locale/locale-provider.tsx#L25)
+[packages/components/src/locale/locale-provider.tsx:25](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/locale/locale-provider.tsx#L25)
diff --git a/packages/next-docs/pages/components/menu-item/code.mdx b/packages/next-docs/pages/components/menu-item/code.mdx
index a391a7a312..ae959da1fe 100644
--- a/packages/next-docs/pages/components/menu-item/code.mdx
+++ b/packages/next-docs/pages/components/menu-item/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                 |
-| :------ | :----------------------------------------------------------------------------------- |
-| `props` | [`MenuItemProps`](interfaces/MenuItemProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                           |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`MenuItemProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/menu-item/props.mdx b/packages/next-docs/pages/components/menu-item/props.mdx
index c91eb1edf0..9573c731e0 100644
--- a/packages/next-docs/pages/components/menu-item/props.mdx
+++ b/packages/next-docs/pages/components/menu-item/props.mdx
@@ -6,14 +6,6 @@
 
   ↳ **`MenuItemProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [critical](props.md#critical)
-- [disabled](props.md#disabled)
-
 ## Properties
 
 ### asChild
@@ -30,7 +22,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/menu/menu-item.tsx:36](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/menu/menu-item.tsx#L36)
+[packages/components/src/menu/menu-item.tsx:36](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/menu/menu-item.tsx#L36)
 
 ---
 
@@ -48,7 +40,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/menu/menu-item.tsx:41](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/menu/menu-item.tsx#L41)
+[packages/components/src/menu/menu-item.tsx:41](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/menu/menu-item.tsx#L41)
 
 ---
 
@@ -66,4 +58,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/menu/menu-item.tsx:46](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/menu/menu-item.tsx#L46)
+[packages/components/src/menu/menu-item.tsx:46](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/menu/menu-item.tsx#L46)
diff --git a/packages/next-docs/pages/components/menu-provider/code.mdx b/packages/next-docs/pages/components/menu-provider/code.mdx
deleted file mode 100644
index 7d7ea9bb58..0000000000
--- a/packages/next-docs/pages/components/menu-provider/code.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
-### MenuProvider
-
-▸ **MenuProvider**\<`T`\>(`props`): `ReactElement`
-
-Provides a menu store to Menu components.
-
-#### Type parameters
-
-| Name | Type                                          |
-| :--- | :-------------------------------------------- |
-| `T`  | extends `MenuStoreValues` = `MenuStoreValues` |
-
-#### Parameters
-
-| Name    | Type                                                                          |
-| :------ | :---------------------------------------------------------------------------- |
-| `props` | `PickRequired`\<`MenuProviderProps`\<`T`\>, `"values"` \| `"defaultValues"`\> |
-
-#### Returns
-
-`ReactElement`
-
-**`See`**
-
-https://ariakit.org/components/menu
-
-**`Example`**
-
-```jsx
-<MenuProvider placement="top">
-  <MenuButton>Edit</MenuButton>
-  <Menu>
-    <MenuItem>Undo</MenuItem>
-    <MenuItem>Redo</MenuItem>
-  </Menu>
-</MenuProvider>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/menu/menu-provider.d.ts:19
-
-▸ **MenuProvider**(`props?`): `ReactElement`
-
-#### Parameters
-
-| Name     | Type                                     |
-| :------- | :--------------------------------------- |
-| `props?` | `MenuProviderProps`\<`MenuStoreValues`\> |
-
-#### Returns
-
-`ReactElement`
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/menu/menu-provider.d.ts:20
diff --git a/packages/next-docs/pages/components/menu-separator-props/code.mdx b/packages/next-docs/pages/components/menu-separator-props/code.mdx
deleted file mode 100644
index 01d2f9cd0b..0000000000
--- a/packages/next-docs/pages/components/menu-separator-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### MenuSeparatorProps
-
-Ƭ **MenuSeparatorProps**: `ComponentPropsWithoutRef`\<`"hr"`\>
-
-#### Defined in
-
-[packages/components/src/menu/menu-separator.tsx:11](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/menu/menu-separator.tsx#L11)
diff --git a/packages/next-docs/pages/components/menu-separator/code.mdx b/packages/next-docs/pages/components/menu-separator/code.mdx
index 1e16bcc529..aaa99c64f1 100644
--- a/packages/next-docs/pages/components/menu-separator/code.mdx
+++ b/packages/next-docs/pages/components/menu-separator/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                                                                |
-| :------ | :---------------------------------------------------------------------------------------------------------------------------------- |
-| `props` | `Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLHRElement`\>, `HTMLHRElement`\>, `"ref"`\> & `RefAttributes`\<`HTMLHRElement`\> |
+| Name    | Type                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<`DetailedHTMLProps`\<`HTMLAttributes`\<[`HTMLHRElement`](https://developer.mozilla.org/docs/Web/API/HTMLHRElement)\>, [`HTMLHRElement`](https://developer.mozilla.org/docs/Web/API/HTMLHRElement)\>, `"ref"`\> & `RefAttributes`\<[`HTMLHRElement`](https://developer.mozilla.org/docs/Web/API/HTMLHRElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/menu-separator/props.mdx b/packages/next-docs/pages/components/menu-separator/props.mdx
index 926696fcf6..6d89885acc 100644
--- a/packages/next-docs/pages/components/menu-separator/props.mdx
+++ b/packages/next-docs/pages/components/menu-separator/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/menu/menu-separator.tsx:11](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/menu/menu-separator.tsx#L11)
+[packages/components/src/menu/menu-separator.tsx:11](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/menu/menu-separator.tsx#L11)
diff --git a/packages/next-docs/pages/components/menu-trigger/code.mdx b/packages/next-docs/pages/components/menu-trigger/code.mdx
index 377d3ebece..38b9a13ecc 100644
--- a/packages/next-docs/pages/components/menu-trigger/code.mdx
+++ b/packages/next-docs/pages/components/menu-trigger/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                        |
-| :------ | :---------------------------------------------------------- |
-| `props` | `MenuTriggerProps` & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                        |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| `props` | `MenuTriggerProps` & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/menu/code.mdx b/packages/next-docs/pages/components/menu/code.mdx
index 32cfbf62a3..34859aff7d 100644
--- a/packages/next-docs/pages/components/menu/code.mdx
+++ b/packages/next-docs/pages/components/menu/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                         |
-| :------ | :--------------------------------------------------------------------------- |
-| `props` | [`MenuProps`](interfaces/MenuProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                       |
+| :------ | :------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`MenuProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/menu/props.mdx b/packages/next-docs/pages/components/menu/props.mdx
index e1989bb0fb..cdf0df53b0 100644
--- a/packages/next-docs/pages/components/menu/props.mdx
+++ b/packages/next-docs/pages/components/menu/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`MenuProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/menu/menu.tsx:30](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/menu/menu.tsx#L30)
+[packages/components/src/menu/menu.tsx:30](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/menu/menu.tsx#L30)
diff --git a/packages/next-docs/pages/components/modal-header-props/code.mdx b/packages/next-docs/pages/components/modal-header-props/code.mdx
deleted file mode 100644
index 5783354246..0000000000
--- a/packages/next-docs/pages/components/modal-header-props/code.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-### ModalHeaderProps
-
-Ƭ **ModalHeaderProps**: `ComponentPropsWithoutRef`\<`"div"`\>
-
-#### Defined in
-
-[packages/components/src/modal/modal-header.tsx:31](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/modal/modal-header.tsx#L31)
diff --git a/packages/next-docs/pages/components/modal-header/code.mdx b/packages/next-docs/pages/components/modal-header/code.mdx
index 53a20e2c40..fdeeabf20b 100644
--- a/packages/next-docs/pages/components/modal-header/code.mdx
+++ b/packages/next-docs/pages/components/modal-header/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                                                                   |
-| :------ | :------------------------------------------------------------------------------------------------------------------------------------- |
-| `props` | `Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\>, `"ref"`\> & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                                                                                                                                                                                                                                                                                           |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<`DetailedHTMLProps`\<`HTMLAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, [`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\>, `"ref"`\> & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/modal-header/props.mdx b/packages/next-docs/pages/components/modal-header/props.mdx
index 29fc39ed01..6f3a024459 100644
--- a/packages/next-docs/pages/components/modal-header/props.mdx
+++ b/packages/next-docs/pages/components/modal-header/props.mdx
@@ -4,4 +4,4 @@
 
 #### Defined in
 
-[packages/components/src/modal/modal-header.tsx:31](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/modal/modal-header.tsx#L31)
+[packages/components/src/modal/modal-header.tsx:31](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/modal/modal-header.tsx#L31)
diff --git a/packages/next-docs/pages/components/modal/code.mdx b/packages/next-docs/pages/components/modal/code.mdx
index bb12c5042e..d7d2822c9f 100644
--- a/packages/next-docs/pages/components/modal/code.mdx
+++ b/packages/next-docs/pages/components/modal/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                           |
-| :------ | :----------------------------------------------------------------------------- |
-| `props` | [`ModalProps`](interfaces/ModalProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                        |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`ModalProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/modal/props.mdx b/packages/next-docs/pages/components/modal/props.mdx
index 398af367e3..b4617e94a5 100644
--- a/packages/next-docs/pages/components/modal/props.mdx
+++ b/packages/next-docs/pages/components/modal/props.mdx
@@ -6,18 +6,11 @@
 
   ↳ **`ModalProps`**
 
-## Table of contents
-
-### Properties
-
-- [onClose](props.md#onclose)
-- [open](props.md#open)
-
 ## Properties
 
 ### onClose
 
-• `Optional` **onClose**: (`event`: `Event`) => `void`
+• `Optional` **onClose**: (`event`: [`Event`](https://developer.mozilla.org/docs/Web/API/Event)) => `void`
 
 #### Type declaration
 
@@ -25,9 +18,9 @@
 
 ##### Parameters
 
-| Name    | Type    |
-| :------ | :------ |
-| `event` | `Event` |
+| Name    | Type                                                        |
+| :------ | :---------------------------------------------------------- |
+| `event` | [`Event`](https://developer.mozilla.org/docs/Web/API/Event) |
 
 ##### Returns
 
@@ -35,7 +28,7 @@
 
 #### Defined in
 
-[packages/components/src/modal/modal.tsx:27](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/modal/modal.tsx#L27)
+[packages/components/src/modal/modal.tsx:27](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/modal/modal.tsx#L27)
 
 ---
 
@@ -45,4 +38,4 @@
 
 #### Defined in
 
-[packages/components/src/modal/modal.tsx:28](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/modal/modal.tsx#L28)
+[packages/components/src/modal/modal.tsx:28](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/modal/modal.tsx#L28)
diff --git a/packages/next-docs/pages/components/pagination/code.mdx b/packages/next-docs/pages/components/pagination/code.mdx
index e6ef117a01..08f4d4fd5e 100644
--- a/packages/next-docs/pages/components/pagination/code.mdx
+++ b/packages/next-docs/pages/components/pagination/code.mdx
@@ -6,9 +6,9 @@ Pagination triggers allow merchants to view the size of a list and navigate betw
 
 #### Parameters
 
-| Name    | Type                                                                                     |
-| :------ | :--------------------------------------------------------------------------------------- |
-| `props` | [`PaginationProps`](interfaces/PaginationProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                             |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`PaginationProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,7 +16,7 @@ Pagination triggers allow merchants to view the size of a list and navigate betw
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Pagination
   page={page}
   onPageChange={(page, type) => {}}
@@ -27,6 +27,29 @@ Pagination triggers allow merchants to view the size of a list and navigate betw
 />
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Pagination } from '@vtex/shoreline-components'
+export default function App() { return (<><Pagination  page={page}  onPageChange={(page, type) => {}} total={total} size={size} sizeOptions={[25, 50, 100]} onSizeChange={(size) => {}}/></>)}`,
+}}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/pagination/props.mdx b/packages/next-docs/pages/components/pagination/props.mdx
index b1a2d79567..aed5d65fd6 100644
--- a/packages/next-docs/pages/components/pagination/props.mdx
+++ b/packages/next-docs/pages/components/pagination/props.mdx
@@ -6,17 +6,6 @@
 
   ↳ **`PaginationProps`**
 
-## Table of contents
-
-### Properties
-
-- [onPageChange](props.md#onpagechange)
-- [onSizeChange](props.md#onsizechange)
-- [page](props.md#page)
-- [size](props.md#size)
-- [sizeOptions](props.md#sizeoptions)
-- [total](props.md#total)
-
 ## Properties
 
 ### onPageChange
@@ -40,7 +29,7 @@
 
 #### Defined in
 
-[packages/components/src/pagination/pagination.tsx:114](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/pagination/pagination.tsx#L114)
+[packages/components/src/pagination/pagination.tsx:114](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/pagination/pagination.tsx#L114)
 
 ---
 
@@ -64,7 +53,7 @@
 
 #### Defined in
 
-[packages/components/src/pagination/pagination.tsx:115](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/pagination/pagination.tsx#L115)
+[packages/components/src/pagination/pagination.tsx:115](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/pagination/pagination.tsx#L115)
 
 ---
 
@@ -74,7 +63,7 @@
 
 #### Defined in
 
-[packages/components/src/pagination/pagination.tsx:118](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/pagination/pagination.tsx#L118)
+[packages/components/src/pagination/pagination.tsx:118](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/pagination/pagination.tsx#L118)
 
 ---
 
@@ -84,7 +73,7 @@
 
 #### Defined in
 
-[packages/components/src/pagination/pagination.tsx:117](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/pagination/pagination.tsx#L117)
+[packages/components/src/pagination/pagination.tsx:117](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/pagination/pagination.tsx#L117)
 
 ---
 
@@ -94,7 +83,7 @@
 
 #### Defined in
 
-[packages/components/src/pagination/pagination.tsx:116](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/pagination/pagination.tsx#L116)
+[packages/components/src/pagination/pagination.tsx:116](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/pagination/pagination.tsx#L116)
 
 ---
 
@@ -104,4 +93,4 @@
 
 #### Defined in
 
-[packages/components/src/pagination/pagination.tsx:119](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/pagination/pagination.tsx#L119)
+[packages/components/src/pagination/pagination.tsx:119](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/pagination/pagination.tsx#L119)
diff --git a/packages/next-docs/pages/components/popover-dismiss/code.mdx b/packages/next-docs/pages/components/popover-dismiss/code.mdx
index 565b2d073a..3458c6f27b 100644
--- a/packages/next-docs/pages/components/popover-dismiss/code.mdx
+++ b/packages/next-docs/pages/components/popover-dismiss/code.mdx
@@ -6,9 +6,9 @@ Dismiss the Popover
 
 #### Parameters
 
-| Name    | Type                                                                                                |
-| :------ | :-------------------------------------------------------------------------------------------------- |
-| `props` | [`PopoverDismissProps`](interfaces/PopoverDismissProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                                       |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`PopoverDismissProps`](props.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -16,7 +16,7 @@ Dismiss the Popover
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <PopoverProvider>
   <Popover>
     <PopoverDismiss>Dismiss</PopoverDismiss>
@@ -24,6 +24,31 @@ Dismiss the Popover
 </PopoverProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { PopoverProvider } from '@vtex/shoreline-components'
+import { Popover } from '@vtex/shoreline-components'
+import { PopoverDismiss } from '@vtex/shoreline-components'
+export default function App() { return (<><PopoverProvider> <Popover>   <PopoverDismiss>Dismiss</PopoverDismiss> </Popover></PopoverProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/popover-dismiss/props.mdx b/packages/next-docs/pages/components/popover-dismiss/props.mdx
index 65d9a772ef..23c5145027 100644
--- a/packages/next-docs/pages/components/popover-dismiss/props.mdx
+++ b/packages/next-docs/pages/components/popover-dismiss/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`PopoverDismissProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/popover/popover-dismiss.tsx:38](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/popover/popover-dismiss.tsx#L38)
+[packages/components/src/popover/popover-dismiss.tsx:38](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/popover/popover-dismiss.tsx#L38)
diff --git a/packages/next-docs/pages/components/popover-provider/code.mdx b/packages/next-docs/pages/components/popover-provider/code.mdx
deleted file mode 100644
index 4cf503abbe..0000000000
--- a/packages/next-docs/pages/components/popover-provider/code.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-### PopoverProvider
-
-▸ **PopoverProvider**(`props?`): `JSX.Element`
-
-Provides a popover store to Popover components.
-
-#### Parameters
-
-| Name     | Type                   |
-| :------- | :--------------------- |
-| `props?` | `PopoverProviderProps` |
-
-#### Returns
-
-`JSX.Element`
-
-**`See`**
-
-https://ariakit.org/components/popover
-
-**`Example`**
-
-```jsx
-<PopoverProvider>
-  <PopoverDisclosure />
-  <Popover />
-</PopoverProvider>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/popover/popover-provider.d.ts:14
diff --git a/packages/next-docs/pages/components/popover-trigger/code.mdx b/packages/next-docs/pages/components/popover-trigger/code.mdx
index df4da7677b..5a567aac07 100644
--- a/packages/next-docs/pages/components/popover-trigger/code.mdx
+++ b/packages/next-docs/pages/components/popover-trigger/code.mdx
@@ -6,9 +6,9 @@ Triggers popover containers
 
 #### Parameters
 
-| Name    | Type                                                                                                |
-| :------ | :-------------------------------------------------------------------------------------------------- |
-| `props` | [`PopoverTriggerProps`](interfaces/PopoverTriggerProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                                       |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`PopoverTriggerProps`](props.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -16,13 +16,38 @@ Triggers popover containers
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <PopoverProvider>
   <PopoverTrigger>Trigger</PopoverTrigger>
   <Popover>Content</Popover>
 </PopoverProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { PopoverProvider } from '@vtex/shoreline-components'
+import { PopoverTrigger } from '@vtex/shoreline-components'
+import { Popover } from '@vtex/shoreline-components'
+export default function App() { return (<><PopoverProvider>   <PopoverTrigger>Trigger</PopoverTrigger>   <Popover>Content</Popover> </PopoverProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/popover-trigger/props.mdx b/packages/next-docs/pages/components/popover-trigger/props.mdx
index d56891818e..0999074a45 100644
--- a/packages/next-docs/pages/components/popover-trigger/props.mdx
+++ b/packages/next-docs/pages/components/popover-trigger/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`PopoverTriggerProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/popover/popover-trigger.tsx:38](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/popover/popover-trigger.tsx#L38)
+[packages/components/src/popover/popover-trigger.tsx:38](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/popover/popover-trigger.tsx#L38)
diff --git a/packages/next-docs/pages/components/popover/code.mdx b/packages/next-docs/pages/components/popover/code.mdx
index 34ff871180..8d4df1ae59 100644
--- a/packages/next-docs/pages/components/popover/code.mdx
+++ b/packages/next-docs/pages/components/popover/code.mdx
@@ -7,9 +7,9 @@ information of an item through an overlay.
 
 #### Parameters
 
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `props` | [`PopoverProps`](interfaces/PopoverProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                          |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`PopoverProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -17,13 +17,38 @@ information of an item through an overlay.
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <PopoverProvider>
   <PopoverTrigger>Trigger</PopoverTrigger>
   <Popover>Content</Popover>
 </PopoverProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { PopoverProvider } from '@vtex/shoreline-components'
+import { PopoverTrigger } from '@vtex/shoreline-components'
+import { Popover } from '@vtex/shoreline-components'
+export default function App() { return (<><PopoverProvider>   <PopoverTrigger>Trigger</PopoverTrigger>   <Popover>Content</Popover> </PopoverProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/popover/props.mdx b/packages/next-docs/pages/components/popover/props.mdx
index 19be4cf9bb..5a6acc0fcb 100644
--- a/packages/next-docs/pages/components/popover/props.mdx
+++ b/packages/next-docs/pages/components/popover/props.mdx
@@ -8,12 +8,6 @@
 
   ↳↳ [`FilterPopoverProps`](FilterPopoverProps.md)
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -30,4 +24,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/popover/popover.tsx:39](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/popover/popover.tsx#L39)
+[packages/components/src/popover/popover.tsx:39](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/popover/popover.tsx#L39)
diff --git a/packages/next-docs/pages/components/radio-group/code.mdx b/packages/next-docs/pages/components/radio-group/code.mdx
index 2be05f75c5..d276eb124d 100644
--- a/packages/next-docs/pages/components/radio-group/code.mdx
+++ b/packages/next-docs/pages/components/radio-group/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                       |
-| :------ | :----------------------------------------------------------------------------------------- |
-| `props` | [`RadioGroupProps`](interfaces/RadioGroupProps.md) & `RefAttributes`\<`HTMLInputElement`\> |
+| Name    | Type                                                                                                                                 |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`RadioGroupProps`](props.md) & `RefAttributes`\<[`HTMLInputElement`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/radio-group/props.mdx b/packages/next-docs/pages/components/radio-group/props.mdx
index 958ecc0482..009c5b51f5 100644
--- a/packages/next-docs/pages/components/radio-group/props.mdx
+++ b/packages/next-docs/pages/components/radio-group/props.mdx
@@ -6,18 +6,6 @@
 
   ↳ **`RadioGroupProps`**
 
-## Table of contents
-
-### Properties
-
-- [className](props.md#classname)
-- [direction](props.md#direction)
-- [error](props.md#error)
-- [errorText](props.md#errortext)
-- [helpText](props.md#helptext)
-- [label](props.md#label)
-- [state](props.md#state)
-
 ## Properties
 
 ### className
@@ -30,7 +18,7 @@ ComponentPropsWithoutRef.className
 
 #### Defined in
 
-[packages/components/src/radio/radio-group.tsx:61](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio-group.tsx#L61)
+[packages/components/src/radio/radio-group.tsx:61](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio-group.tsx#L61)
 
 ---
 
@@ -40,7 +28,7 @@ ComponentPropsWithoutRef.className
 
 #### Defined in
 
-[packages/components/src/radio/radio-group.tsx:66](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio-group.tsx#L66)
+[packages/components/src/radio/radio-group.tsx:66](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio-group.tsx#L66)
 
 ---
 
@@ -50,7 +38,7 @@ ComponentPropsWithoutRef.className
 
 #### Defined in
 
-[packages/components/src/radio/radio-group.tsx:62](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio-group.tsx#L62)
+[packages/components/src/radio/radio-group.tsx:62](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio-group.tsx#L62)
 
 ---
 
@@ -60,7 +48,7 @@ ComponentPropsWithoutRef.className
 
 #### Defined in
 
-[packages/components/src/radio/radio-group.tsx:64](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio-group.tsx#L64)
+[packages/components/src/radio/radio-group.tsx:64](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio-group.tsx#L64)
 
 ---
 
@@ -70,7 +58,7 @@ ComponentPropsWithoutRef.className
 
 #### Defined in
 
-[packages/components/src/radio/radio-group.tsx:63](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio-group.tsx#L63)
+[packages/components/src/radio/radio-group.tsx:63](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio-group.tsx#L63)
 
 ---
 
@@ -80,7 +68,7 @@ ComponentPropsWithoutRef.className
 
 #### Defined in
 
-[packages/components/src/radio/radio-group.tsx:65](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio-group.tsx#L65)
+[packages/components/src/radio/radio-group.tsx:65](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio-group.tsx#L65)
 
 ---
 
@@ -90,4 +78,4 @@ ComponentPropsWithoutRef.className
 
 #### Defined in
 
-[packages/components/src/radio/radio-group.tsx:67](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio-group.tsx#L67)
+[packages/components/src/radio/radio-group.tsx:67](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio-group.tsx#L67)
diff --git a/packages/next-docs/pages/components/radio/code.mdx b/packages/next-docs/pages/components/radio/code.mdx
index 399c48dd82..7ff2d866bb 100644
--- a/packages/next-docs/pages/components/radio/code.mdx
+++ b/packages/next-docs/pages/components/radio/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                             |
-| :------ | :------------------------------------------------------------------------------- |
-| `props` | [`RadioProps`](interfaces/RadioProps.md) & `RefAttributes`\<`HTMLInputElement`\> |
+| Name    | Type                                                                                                                            |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`RadioProps`](props.md) & `RefAttributes`\<[`HTMLInputElement`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/radio/props.mdx b/packages/next-docs/pages/components/radio/props.mdx
index f4d0530fb9..516fa9c8ca 100644
--- a/packages/next-docs/pages/components/radio/props.mdx
+++ b/packages/next-docs/pages/components/radio/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`RadioProps`**
 
-## Table of contents
-
-### Properties
-
-- [error](props.md#error)
-- [value](props.md#value)
-
 ## Properties
 
 ### error
@@ -21,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/radio/radio.tsx:43](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio.tsx#L43)
+[packages/components/src/radio/radio.tsx:43](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio.tsx#L43)
 
 ---
 
@@ -35,4 +28,4 @@ ComponentPropsWithoutRef.value
 
 #### Defined in
 
-[packages/components/src/radio/radio.tsx:44](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio.tsx#L44)
+[packages/components/src/radio/radio.tsx:44](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio.tsx#L44)
diff --git a/packages/next-docs/pages/components/scroll-area/code.mdx b/packages/next-docs/pages/components/scroll-area/code.mdx
index fc38ca96c0..e875cafdf4 100644
--- a/packages/next-docs/pages/components/scroll-area/code.mdx
+++ b/packages/next-docs/pages/components/scroll-area/code.mdx
@@ -6,9 +6,9 @@ Cross-browser scroll styling
 
 #### Parameters
 
-| Name    | Type                                                                                     |
-| :------ | :--------------------------------------------------------------------------------------- |
-| `props` | [`ScrollAreaProps`](interfaces/ScrollAreaProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                             |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`ScrollAreaProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Cross-browser scroll styling
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <ScrollArea>Content</ScrollArea>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { ScrollArea } from '@vtex/shoreline-components'
+export default function App() { return (<><ScrollArea>  Content</ScrollArea></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/scroll-area/props.mdx b/packages/next-docs/pages/components/scroll-area/props.mdx
index 173b547ed6..170e746bd9 100644
--- a/packages/next-docs/pages/components/scroll-area/props.mdx
+++ b/packages/next-docs/pages/components/scroll-area/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`ScrollAreaProps`**
 
-## Table of contents
-
-### Properties
-
-- [scrollHideDelay](props.md#scrollhidedelay)
-- [type](props.md#type)
-
 ## Properties
 
 ### scrollHideDelay
@@ -29,7 +22,7 @@ Timeout (in ms) to hide the scrollbar
 
 #### Defined in
 
-[packages/components/src/scroll-area/scroll-area.tsx:54](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/scroll-area/scroll-area.tsx#L54)
+[packages/components/src/scroll-area/scroll-area.tsx:54](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/scroll-area/scroll-area.tsx#L54)
 
 ---
 
@@ -47,4 +40,4 @@ Scroll type
 
 #### Defined in
 
-[packages/components/src/scroll-area/scroll-area.tsx:49](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/scroll-area/scroll-area.tsx#L49)
+[packages/components/src/scroll-area/scroll-area.tsx:49](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/scroll-area/scroll-area.tsx#L49)
diff --git a/packages/next-docs/pages/components/search/code.mdx b/packages/next-docs/pages/components/search/code.mdx
index 98614c60b3..13b3cca060 100644
--- a/packages/next-docs/pages/components/search/code.mdx
+++ b/packages/next-docs/pages/components/search/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `props` | [`SearchProps`](interfaces/SearchProps.md) & `RefAttributes`\<`HTMLInputElement`\> |
+| Name    | Type                                                                                                                             |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SearchProps`](props.md) & `RefAttributes`\<[`HTMLInputElement`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/search/props.mdx b/packages/next-docs/pages/components/search/props.mdx
index d12dee7159..c2cf825a89 100644
--- a/packages/next-docs/pages/components/search/props.mdx
+++ b/packages/next-docs/pages/components/search/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`SearchProps`**
 
-## Table of contents
-
-### Properties
-
-- [loading](props.md#loading)
-- [onClear](props.md#onclear)
-
 ## Properties
 
 ### loading
@@ -29,7 +22,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/search/search.tsx:70](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/search/search.tsx#L70)
+[packages/components/src/search/search.tsx:70](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/search/search.tsx#L70)
 
 ---
 
@@ -55,4 +48,4 @@ undefined;
 
 #### Defined in
 
-[packages/components/src/search/search.tsx:75](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/search/search.tsx#L75)
+[packages/components/src/search/search.tsx:75](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/search/search.tsx#L75)
diff --git a/packages/next-docs/pages/components/select-field/code.mdx b/packages/next-docs/pages/components/select-field/code.mdx
index 8b9018338d..741d795d36 100644
--- a/packages/next-docs/pages/components/select-field/code.mdx
+++ b/packages/next-docs/pages/components/select-field/code.mdx
@@ -7,9 +7,9 @@ that includes between five and seven values.
 
 #### Parameters
 
-| Name    | Type                                                                                          |
-| :------ | :-------------------------------------------------------------------------------------------- |
-| `props` | [`SelectFieldProps`](interfaces/SelectFieldProps.md) & `RefAttributes`\<`HTMLSelectElement`\> |
+| Name    | Type                                                                                                                                    |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SelectFieldProps`](props.md) & `RefAttributes`\<[`HTMLSelectElement`](https://developer.mozilla.org/docs/Web/API/HTMLSelectElement)\> |
 
 #### Returns
 
@@ -17,7 +17,7 @@ that includes between five and seven values.
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <SelectField label="Label" helpText="Help text" errorText="Error text">
   <option>option</option>
   <option>option</option>
@@ -25,6 +25,29 @@ that includes between five and seven values.
 </SelectField>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { SelectField } from '@vtex/shoreline-components'
+export default function App() { return (<><SelectField  label="Label"  helpText="Help text"  errorText="Error text">  <option>option</option>  <option>option</option>  <option>option</option></SelectField></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/select-field/props.mdx b/packages/next-docs/pages/components/select-field/props.mdx
index 7f4e926500..a7a81a9dc5 100644
--- a/packages/next-docs/pages/components/select-field/props.mdx
+++ b/packages/next-docs/pages/components/select-field/props.mdx
@@ -6,17 +6,6 @@
 
   ↳ **`SelectFieldProps`**
 
-## Table of contents
-
-### Properties
-
-- [disabled](props.md#disabled)
-- [error](props.md#error)
-- [errorText](props.md#errortext)
-- [helpText](props.md#helptext)
-- [label](props.md#label)
-- [optional](props.md#optional)
-
 ## Properties
 
 ### disabled
@@ -29,7 +18,7 @@ ComponentPropsWithoutRef.disabled
 
 #### Defined in
 
-[packages/components/src/select-field/select-field.tsx:82](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select-field/select-field.tsx#L82)
+[packages/components/src/select-field/select-field.tsx:82](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select-field/select-field.tsx#L82)
 
 ---
 
@@ -39,7 +28,7 @@ ComponentPropsWithoutRef.disabled
 
 #### Defined in
 
-[packages/components/src/select-field/select-field.tsx:78](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select-field/select-field.tsx#L78)
+[packages/components/src/select-field/select-field.tsx:78](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select-field/select-field.tsx#L78)
 
 ---
 
@@ -49,7 +38,7 @@ ComponentPropsWithoutRef.disabled
 
 #### Defined in
 
-[packages/components/src/select-field/select-field.tsx:80](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select-field/select-field.tsx#L80)
+[packages/components/src/select-field/select-field.tsx:80](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select-field/select-field.tsx#L80)
 
 ---
 
@@ -59,7 +48,7 @@ ComponentPropsWithoutRef.disabled
 
 #### Defined in
 
-[packages/components/src/select-field/select-field.tsx:81](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select-field/select-field.tsx#L81)
+[packages/components/src/select-field/select-field.tsx:81](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select-field/select-field.tsx#L81)
 
 ---
 
@@ -69,7 +58,7 @@ ComponentPropsWithoutRef.disabled
 
 #### Defined in
 
-[packages/components/src/select-field/select-field.tsx:79](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select-field/select-field.tsx#L79)
+[packages/components/src/select-field/select-field.tsx:79](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select-field/select-field.tsx#L79)
 
 ---
 
@@ -79,4 +68,4 @@ ComponentPropsWithoutRef.disabled
 
 #### Defined in
 
-[packages/components/src/select-field/select-field.tsx:83](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select-field/select-field.tsx#L83)
+[packages/components/src/select-field/select-field.tsx:83](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select-field/select-field.tsx#L83)
diff --git a/packages/next-docs/pages/components/select-list/code.mdx b/packages/next-docs/pages/components/select-list/code.mdx
index 3bb2169649..ac6cccd07e 100644
--- a/packages/next-docs/pages/components/select-list/code.mdx
+++ b/packages/next-docs/pages/components/select-list/code.mdx
@@ -4,9 +4,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                     |
-| :------ | :--------------------------------------------------------------------------------------- |
-| `props` | [`SelectListProps`](interfaces/SelectListProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                             |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SelectListProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/select-list/props.mdx b/packages/next-docs/pages/components/select-list/props.mdx
index 032bf543bb..6f6fdf9991 100644
--- a/packages/next-docs/pages/components/select-list/props.mdx
+++ b/packages/next-docs/pages/components/select-list/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`SelectListProps`**
 
-## Table of contents
-
-### Properties
-
-- [alwaysVisible](props.md#alwaysvisible)
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### alwaysVisible
@@ -27,7 +20,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/select/select-list.tsx:41](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select/select-list.tsx#L41)
+[packages/components/src/select/select-list.tsx:41](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select/select-list.tsx#L41)
 
 ---
 
@@ -45,4 +38,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/select/select-list.tsx:36](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select/select-list.tsx#L36)
+[packages/components/src/select/select-list.tsx:36](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select/select-list.tsx#L36)
diff --git a/packages/next-docs/pages/components/select-option-check/code.mdx b/packages/next-docs/pages/components/select-option-check/code.mdx
index 01280c8f6b..bf3f28bbe2 100644
--- a/packages/next-docs/pages/components/select-option-check/code.mdx
+++ b/packages/next-docs/pages/components/select-option-check/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                                    |
-| :------ | :------------------------------------------------------------------------------------------------------ |
-| `props` | [`SelectOptionCheckProps`](interfaces/SelectOptionCheckProps.md) & `RefAttributes`\<`HTMLSpanElement`\> |
+| Name    | Type                                                                                                                                      |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SelectOptionCheckProps`](props.md) & `RefAttributes`\<[`HTMLSpanElement`](https://developer.mozilla.org/docs/Web/API/HTMLSpanElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/select-option-check/props.mdx b/packages/next-docs/pages/components/select-option-check/props.mdx
index 8e11b7b682..4bfb9a4530 100644
--- a/packages/next-docs/pages/components/select-option-check/props.mdx
+++ b/packages/next-docs/pages/components/select-option-check/props.mdx
@@ -1,11 +1,5 @@
 # SelectOptionCheckProps
 
-## Table of contents
-
-### Properties
-
-- [className](props.md#classname)
-
 ## Properties
 
 ### className
@@ -14,4 +8,4 @@
 
 #### Defined in
 
-[packages/components/src/select/select-option-check.tsx:17](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select/select-option-check.tsx#L17)
+[packages/components/src/select/select-option-check.tsx:17](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select/select-option-check.tsx#L17)
diff --git a/packages/next-docs/pages/components/select-option/code.mdx b/packages/next-docs/pages/components/select-option/code.mdx
index 93fbb82dfe..d6ebf679c0 100644
--- a/packages/next-docs/pages/components/select-option/code.mdx
+++ b/packages/next-docs/pages/components/select-option/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                         |
-| :------ | :------------------------------------------------------------------------------------------- |
-| `props` | [`SelectOptionProps`](interfaces/SelectOptionProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                               |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SelectOptionProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/select-option/props.mdx b/packages/next-docs/pages/components/select-option/props.mdx
index c5c1caf6e9..a275dfe772 100644
--- a/packages/next-docs/pages/components/select-option/props.mdx
+++ b/packages/next-docs/pages/components/select-option/props.mdx
@@ -6,14 +6,6 @@
 
   ↳ **`SelectOptionProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [hideOnClick](props.md#hideonclick)
-- [value](props.md#value)
-
 ## Properties
 
 ### asChild
@@ -30,7 +22,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/select/select-option.tsx:30](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select/select-option.tsx#L30)
+[packages/components/src/select/select-option.tsx:30](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select/select-option.tsx#L30)
 
 ---
 
@@ -48,7 +40,7 @@ true;
 
 #### Defined in
 
-[packages/components/src/select/select-option.tsx:39](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select/select-option.tsx#L39)
+[packages/components/src/select/select-option.tsx:39](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select/select-option.tsx#L39)
 
 ---
 
@@ -60,4 +52,4 @@ Option value
 
 #### Defined in
 
-[packages/components/src/select/select-option.tsx:34](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select/select-option.tsx#L34)
+[packages/components/src/select/select-option.tsx:34](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select/select-option.tsx#L34)
diff --git a/packages/next-docs/pages/components/select-popover/code.mdx b/packages/next-docs/pages/components/select-popover/code.mdx
index 584bd726bd..5dd6630032 100644
--- a/packages/next-docs/pages/components/select-popover/code.mdx
+++ b/packages/next-docs/pages/components/select-popover/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                           |
-| :------ | :--------------------------------------------------------------------------------------------- |
-| `props` | [`SelectPopoverProps`](interfaces/SelectPopoverProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SelectPopoverProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/select-popover/props.mdx b/packages/next-docs/pages/components/select-popover/props.mdx
index 5eaef3e4a2..b792c04014 100644
--- a/packages/next-docs/pages/components/select-popover/props.mdx
+++ b/packages/next-docs/pages/components/select-popover/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`SelectPopoverProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/select/select-popover.tsx:27](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select/select-popover.tsx#L27)
+[packages/components/src/select/select-popover.tsx:27](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select/select-popover.tsx#L27)
diff --git a/packages/next-docs/pages/components/select-provider/code.mdx b/packages/next-docs/pages/components/select-provider/code.mdx
deleted file mode 100644
index f03a549249..0000000000
--- a/packages/next-docs/pages/components/select-provider/code.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
-### SelectProvider
-
-▸ **SelectProvider**\<`T`\>(`props`): `ReactElement`
-
-Provides a select store to Select components.
-
-#### Type parameters
-
-| Name | Type                      |
-| :--- | :------------------------ |
-| `T`  | extends `Value` = `Value` |
-
-#### Parameters
-
-| Name    | Type                                                                          |
-| :------ | :---------------------------------------------------------------------------- |
-| `props` | `PickRequired`\<`SelectProviderProps`\<`T`\>, `"defaultValue"` \| `"value"`\> |
-
-#### Returns
-
-`ReactElement`
-
-**`See`**
-
-https://ariakit.org/components/select
-
-**`Example`**
-
-```jsx
-<SelectProvider defaultValue="Apple">
-  <Select />
-  <SelectPopover>
-    <SelectItem value="Apple" />
-    <SelectItem value="Banana" />
-    <SelectItem value="Orange" />
-  </SelectPopover>
-</SelectProvider>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/select/select-provider.d.ts:20
-
-▸ **SelectProvider**(`props?`): `ReactElement`
-
-#### Parameters
-
-| Name     | Type                             |
-| :------- | :------------------------------- |
-| `props?` | `SelectProviderProps`\<`Value`\> |
-
-#### Returns
-
-`ReactElement`
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/select/select-provider.d.ts:21
diff --git a/packages/next-docs/pages/components/select/code.mdx b/packages/next-docs/pages/components/select/code.mdx
index cfa85ce29b..c58315f2e4 100644
--- a/packages/next-docs/pages/components/select/code.mdx
+++ b/packages/next-docs/pages/components/select/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                |
-| :------ | :---------------------------------------------------------------------------------- |
-| `props` | [`SelectProps`](interfaces/SelectProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                               |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SelectProps`](props.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/select/props.mdx b/packages/next-docs/pages/components/select/props.mdx
index 5ca1c1b7de..9e2c81aee7 100644
--- a/packages/next-docs/pages/components/select/props.mdx
+++ b/packages/next-docs/pages/components/select/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`SelectProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/select/select.tsx:28](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/select/select.tsx#L28)
+[packages/components/src/select/select.tsx:28](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/select/select.tsx#L28)
diff --git a/packages/next-docs/pages/components/simple-table/code.mdx b/packages/next-docs/pages/components/simple-table/code.mdx
index e38917ab83..822b8bb357 100644
--- a/packages/next-docs/pages/components/simple-table/code.mdx
+++ b/packages/next-docs/pages/components/simple-table/code.mdx
@@ -12,9 +12,9 @@ Controlled table render built on top of TanStack/Table API
 
 #### Parameters
 
-| Name    | Type                                                                                                |
-| :------ | :-------------------------------------------------------------------------------------------------- |
-| `props` | [`SimpleTableProps`](interfaces/SimpleTableProps.md)\<`T`\> & `RefAttributes`\<`HTMLTableElement`\> |
+| Name    | Type                                                                                                                                         |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SimpleTableProps`](props.md)\<`T`\> & `RefAttributes`\<[`HTMLTableElement`](https://developer.mozilla.org/docs/Web/API/HTMLTableElement)\> |
 
 #### Returns
 
@@ -26,10 +26,33 @@ https://tanstack.com/table/v8
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <SimpleTable data={[]} columsn={[]} options={{}} />
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { SimpleTable } from '@vtex/shoreline-components'
+export default function App() { return (<><SimpleTable data={[]} columsn={[]} options={{}} /></>)}`,
+}}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 packages/utils/dist/index.d.ts:183
diff --git a/packages/next-docs/pages/components/simple-table/props.mdx b/packages/next-docs/pages/components/simple-table/props.mdx
index 65a99767db..a930a58733 100644
--- a/packages/next-docs/pages/components/simple-table/props.mdx
+++ b/packages/next-docs/pages/components/simple-table/props.mdx
@@ -14,22 +14,6 @@
 
   ↳ **`SimpleTableProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [columnWidths](props.md#columnwidths)
-- [density](props.md#density)
-- [options](props.md#options)
-- [renderDetail](props.md#renderdetail)
-- [rowClick](props.md#rowclick)
-- [setSort](props.md#setsort)
-- [sort](props.md#sort)
-- [sortable](props.md#sortable)
-- [stickyColumn](props.md#stickycolumn)
-- [stickyHeader](props.md#stickyheader)
-
 ## Properties
 
 ### asChild
@@ -50,7 +34,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:59](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L59)
+[packages/components/src/table/table.tsx:59](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L59)
 
 ---
 
@@ -82,7 +66,7 @@ When using the SimpleTable component
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:54](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L54)
+[packages/components/src/table/table.tsx:54](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L54)
 
 ---
 
@@ -104,7 +88,7 @@ The density of the table
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:74](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L74)
+[packages/components/src/table/table.tsx:74](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L74)
 
 ---
 
@@ -120,7 +104,7 @@ https://tanstack.com/table/v8/docs/api/core/table
 
 #### Defined in
 
-[packages/components/src/simple-table/simple-table.tsx:195](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/simple-table/simple-table.tsx#L195)
+[packages/components/src/simple-table/simple-table.tsx:195](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/simple-table/simple-table.tsx#L195)
 
 ---
 
@@ -146,7 +130,7 @@ Renders function for the detail row
 
 #### Defined in
 
-[packages/components/src/simple-table/simple-table.tsx:199](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/simple-table/simple-table.tsx#L199)
+[packages/components/src/simple-table/simple-table.tsx:199](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/simple-table/simple-table.tsx#L199)
 
 ---
 
@@ -156,7 +140,7 @@ Renders function for the detail row
 
 #### Defined in
 
-[packages/components/src/simple-table/simple-table.tsx:216](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/simple-table/simple-table.tsx#L216)
+[packages/components/src/simple-table/simple-table.tsx:216](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/simple-table/simple-table.tsx#L216)
 
 ---
 
@@ -168,7 +152,7 @@ Setter for SortingState for controlled sort usage
 
 #### Defined in
 
-[packages/components/src/simple-table/simple-table.tsx:212](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/simple-table/simple-table.tsx#L212)
+[packages/components/src/simple-table/simple-table.tsx:212](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/simple-table/simple-table.tsx#L212)
 
 ---
 
@@ -180,7 +164,7 @@ SortingState for controlled sort usage
 
 #### Defined in
 
-[packages/components/src/simple-table/simple-table.tsx:208](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/simple-table/simple-table.tsx#L208)
+[packages/components/src/simple-table/simple-table.tsx:208](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/simple-table/simple-table.tsx#L208)
 
 ---
 
@@ -198,7 +182,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/simple-table/simple-table.tsx:204](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/simple-table/simple-table.tsx#L204)
+[packages/components/src/simple-table/simple-table.tsx:204](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/simple-table/simple-table.tsx#L204)
 
 ---
 
@@ -220,7 +204,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:69](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L69)
+[packages/components/src/table/table.tsx:69](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L69)
 
 ---
 
@@ -242,4 +226,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:64](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L64)
+[packages/components/src/table/table.tsx:64](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L64)
diff --git a/packages/next-docs/pages/components/skeleton/code.mdx b/packages/next-docs/pages/components/skeleton/code.mdx
index a7468c7868..69b4afb9fd 100644
--- a/packages/next-docs/pages/components/skeleton/code.mdx
+++ b/packages/next-docs/pages/components/skeleton/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                 |
-| :------ | :----------------------------------------------------------------------------------- |
-| `props` | [`SkeletonProps`](interfaces/SkeletonProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                           |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SkeletonProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/skeleton/props.mdx b/packages/next-docs/pages/components/skeleton/props.mdx
index 90fe5d0f00..603a4bde05 100644
--- a/packages/next-docs/pages/components/skeleton/props.mdx
+++ b/packages/next-docs/pages/components/skeleton/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`SkeletonProps`**
 
-## Table of contents
-
-### Properties
-
-- [shape](props.md#shape)
-
 ## Properties
 
 ### shape
@@ -28,4 +22,4 @@ rect;
 
 #### Defined in
 
-[packages/components/src/skeleton/skeleton.tsx:25](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/skeleton/skeleton.tsx#L25)
+[packages/components/src/skeleton/skeleton.tsx:25](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/skeleton/skeleton.tsx#L25)
diff --git a/packages/next-docs/pages/components/spinner/code.mdx b/packages/next-docs/pages/components/spinner/code.mdx
index 961e2b8a93..65af3ae98e 100644
--- a/packages/next-docs/pages/components/spinner/code.mdx
+++ b/packages/next-docs/pages/components/spinner/code.mdx
@@ -6,9 +6,9 @@ Loading indicator
 
 #### Parameters
 
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `props` | [`SpinnerProps`](interfaces/SpinnerProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                          |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`SpinnerProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,10 +16,33 @@ Loading indicator
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Spinner description="loading" size={16} />
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Spinner } from '@vtex/shoreline-components'
+export default function App() { return (<><Spinner description="loading" size={16} /></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/spinner/props.mdx b/packages/next-docs/pages/components/spinner/props.mdx
index 06ad8bb314..a87272b3ae 100644
--- a/packages/next-docs/pages/components/spinner/props.mdx
+++ b/packages/next-docs/pages/components/spinner/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`SpinnerProps`**
 
-## Table of contents
-
-### Properties
-
-- [description](props.md#description)
-- [size](props.md#size)
-
 ## Properties
 
 ### description
@@ -29,7 +22,7 @@ Specify a description that would be used to best describe the loading state
 
 #### Defined in
 
-[packages/components/src/spinner/spinner.tsx:43](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/spinner/spinner.tsx#L43)
+[packages/components/src/spinner/spinner.tsx:43](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/spinner/spinner.tsx#L43)
 
 ---
 
@@ -47,4 +40,4 @@ Increase or decrease the size of the shape
 
 #### Defined in
 
-[packages/components/src/spinner/spinner.tsx:48](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/spinner/spinner.tsx#L48)
+[packages/components/src/spinner/spinner.tsx:48](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/spinner/spinner.tsx#L48)
diff --git a/packages/next-docs/pages/components/stack/code.mdx b/packages/next-docs/pages/components/stack/code.mdx
index ffd8339bb0..f70a1c7f59 100644
--- a/packages/next-docs/pages/components/stack/code.mdx
+++ b/packages/next-docs/pages/components/stack/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                           |
-| :------ | :----------------------------------------------------------------------------- |
-| `props` | [`StackProps`](interfaces/StackProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                        |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`StackProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/stack/props.mdx b/packages/next-docs/pages/components/stack/props.mdx
index d162e127da..dd59837eea 100644
--- a/packages/next-docs/pages/components/stack/props.mdx
+++ b/packages/next-docs/pages/components/stack/props.mdx
@@ -6,15 +6,6 @@
 
   ↳ **`StackProps`**
 
-## Table of contents
-
-### Properties
-
-- [align](props.md#align)
-- [direction](props.md#direction)
-- [fluid](props.md#fluid)
-- [space](props.md#space)
-
 ## Properties
 
 ### align
@@ -31,7 +22,7 @@ start;
 
 #### Defined in
 
-[packages/components/src/stack/stack.tsx:58](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/stack/stack.tsx#L58)
+[packages/components/src/stack/stack.tsx:58](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/stack/stack.tsx#L58)
 
 ---
 
@@ -49,7 +40,7 @@ column;
 
 #### Defined in
 
-[packages/components/src/stack/stack.tsx:43](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/stack/stack.tsx#L43)
+[packages/components/src/stack/stack.tsx:43](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/stack/stack.tsx#L43)
 
 ---
 
@@ -67,7 +58,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/stack/stack.tsx:48](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/stack/stack.tsx#L48)
+[packages/components/src/stack/stack.tsx:48](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/stack/stack.tsx#L48)
 
 ---
 
@@ -85,4 +76,4 @@ space between items
 
 #### Defined in
 
-[packages/components/src/stack/stack.tsx:53](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/stack/stack.tsx#L53)
+[packages/components/src/stack/stack.tsx:53](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/stack/stack.tsx#L53)
diff --git a/packages/next-docs/pages/components/tab-list/code.mdx b/packages/next-docs/pages/components/tab-list/code.mdx
index 46cb27b206..50bf30c37d 100644
--- a/packages/next-docs/pages/components/tab-list/code.mdx
+++ b/packages/next-docs/pages/components/tab-list/code.mdx
@@ -4,9 +4,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `props` | [`TabListProps`](interfaces/TabListProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                          |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TabListProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -14,7 +14,7 @@
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <TabProvider>
   <TabList>
     <Tab>Tab 1</Tab>
@@ -25,6 +25,34 @@
 </TabProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { TabProvider } from '@vtex/shoreline-components'
+import { TabList } from '@vtex/shoreline-components'
+import { Tab } from '@vtex/shoreline-components'
+import { Tab } from '@vtex/shoreline-components'
+import { TabPanel } from '@vtex/shoreline-components'
+import { TabPanel } from '@vtex/shoreline-components'
+export default function App() { return (<><TabProvider> <TabList>   <Tab>Tab 1</Tab>   <Tab>Tab 2</Tab> </TabList> <TabPanel>   Tab 1 </TabPanel> <TabPanel>   Tab 2 </TabPanel></TabProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/tab-list/props.mdx b/packages/next-docs/pages/components/tab-list/props.mdx
index 316c8d4521..c1278113fc 100644
--- a/packages/next-docs/pages/components/tab-list/props.mdx
+++ b/packages/next-docs/pages/components/tab-list/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`TabListProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/tab/tab-list.tsx:42](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tab/tab-list.tsx#L42)
+[packages/components/src/tab/tab-list.tsx:42](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tab/tab-list.tsx#L42)
diff --git a/packages/next-docs/pages/components/tab-panel/code.mdx b/packages/next-docs/pages/components/tab-panel/code.mdx
index 9e6011bf53..7e56b59158 100644
--- a/packages/next-docs/pages/components/tab-panel/code.mdx
+++ b/packages/next-docs/pages/components/tab-panel/code.mdx
@@ -4,9 +4,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                 |
-| :------ | :----------------------------------------------------------------------------------- |
-| `props` | [`TabPanelProps`](interfaces/TabPanelProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                           |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TabPanelProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -14,7 +14,7 @@
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <TabProvider>
   <TabList>
     <Tab>Tab 1</Tab>
@@ -25,6 +25,34 @@
 </TabProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { TabProvider } from '@vtex/shoreline-components'
+import { TabList } from '@vtex/shoreline-components'
+import { Tab } from '@vtex/shoreline-components'
+import { Tab } from '@vtex/shoreline-components'
+import { TabPanel } from '@vtex/shoreline-components'
+import { TabPanel } from '@vtex/shoreline-components'
+export default function App() { return (<><TabProvider> <TabList>   <Tab>Tab 1</Tab>   <Tab>Tab 2</Tab> </TabList> <TabPanel>   Tab 1 </TabPanel> <TabPanel>   Tab 2 </TabPanel></TabProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/tab-panel/props.mdx b/packages/next-docs/pages/components/tab-panel/props.mdx
index 16cfeb96d9..c9c67e0e47 100644
--- a/packages/next-docs/pages/components/tab-panel/props.mdx
+++ b/packages/next-docs/pages/components/tab-panel/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`TabPanelProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [tabId](props.md#tabid)
-
 ## Properties
 
 ### asChild
@@ -29,7 +22,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/tab/tab-panel.tsx:42](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tab/tab-panel.tsx#L42)
+[packages/components/src/tab/tab-panel.tsx:42](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tab/tab-panel.tsx#L42)
 
 ---
 
@@ -41,4 +34,4 @@ The id of the tab that controls this panel. By default, this value will be infer
 
 #### Defined in
 
-[packages/components/src/tab/tab-panel.tsx:46](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tab/tab-panel.tsx#L46)
+[packages/components/src/tab/tab-panel.tsx:46](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tab/tab-panel.tsx#L46)
diff --git a/packages/next-docs/pages/components/tab-provider/code.mdx b/packages/next-docs/pages/components/tab-provider/code.mdx
deleted file mode 100644
index 5da0e26679..0000000000
--- a/packages/next-docs/pages/components/tab-provider/code.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-### TabProvider
-
-▸ **TabProvider**(`props?`): `JSX.Element`
-
-Provides a tab store to Tab components.
-
-#### Parameters
-
-| Name     | Type                                                 |
-| :------- | :--------------------------------------------------- |
-| `props?` | [`TabProviderProps`](interfaces/TabProviderProps.md) |
-
-#### Returns
-
-`JSX.Element`
-
-**`See`**
-
-https://ariakit.org/components/tab
-
-**`Example`**
-
-```jsx
-<TabProvider>
-  <TabList>
-    <Tab>For You</Tab>
-    <Tab>Following</Tab>
-  </TabList>
-  <TabPanel>For You</TabPanel>
-  <TabPanel>Following</TabPanel>
-</TabProvider>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/tab/tab-provider.d.ts:18
diff --git a/packages/next-docs/pages/components/tab-provider/props.mdx b/packages/next-docs/pages/components/tab-provider/props.mdx
deleted file mode 100644
index 1e5e30fecc..0000000000
--- a/packages/next-docs/pages/components/tab-provider/props.mdx
+++ /dev/null
@@ -1,482 +0,0 @@
-# Interface: TabProviderProps
-
-## Hierarchy
-
-- `TabStoreProps`
-
-  ↳ **`TabProviderProps`**
-
-## Table of contents
-
-### Properties
-
-- [activeId](TabProviderProps.md#activeid)
-- [children](TabProviderProps.md#children)
-- [defaultActiveId](TabProviderProps.md#defaultactiveid)
-- [defaultItems](TabProviderProps.md#defaultitems)
-- [defaultSelectedId](TabProviderProps.md#defaultselectedid)
-- [focusLoop](TabProviderProps.md#focusloop)
-- [focusShift](TabProviderProps.md#focusshift)
-- [focusWrap](TabProviderProps.md#focuswrap)
-- [includesBaseElement](TabProviderProps.md#includesbaseelement)
-- [items](TabProviderProps.md#items)
-- [orientation](TabProviderProps.md#orientation)
-- [rtl](TabProviderProps.md#rtl)
-- [selectOnMove](TabProviderProps.md#selectonmove)
-- [selectedId](TabProviderProps.md#selectedid)
-- [setActiveId](TabProviderProps.md#setactiveid)
-- [setItems](TabProviderProps.md#setitems)
-- [setSelectedId](TabProviderProps.md#setselectedid)
-- [store](TabProviderProps.md#store)
-- [virtualFocus](TabProviderProps.md#virtualfocus)
-
-## Properties
-
-### activeId
-
-• `Optional` **activeId**: `null` \| `string`
-
-The current focused item `id`.
-
-- `null` focuses the base composite element and users will be able to
-  navigate out of it using arrow keys.
-- If `activeId` is initially set to `null`, the `includesBaseElement` prop
-  will also default to `true`, which means the base composite element
-  itself will have focus and users will be able to navigate to it using
-  arrow keys.
-
-#### Inherited from
-
-TabStoreProps.activeId
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:122
-
----
-
-### children
-
-• `Optional` **children**: `ReactNode`
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/tab/tab-provider.d.ts:20
-
----
-
-### defaultActiveId
-
-• `Optional` **defaultActiveId**: `null` \| `string`
-
-The composite item id that should be active by default when the composite
-widget is rendered. If `null`, the composite element itself will have focus
-and users will be able to navigate to it using arrow keys. If `undefined`,
-the first enabled item will be focused.
-
-#### Inherited from
-
-TabStoreProps.defaultActiveId
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:202
-
----
-
-### defaultItems
-
-• `Optional` **defaultItems**: `Item`[]
-
-The defaut value for the `items` state.
-
-**`Default`**
-
-```ts
-[];
-```
-
-#### Inherited from
-
-TabStoreProps.defaultItems
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/collection/collection-store.d.ts:61
-
----
-
-### defaultSelectedId
-
-• `Optional` **defaultSelectedId**: `null` \| `string`
-
-The id of the tab whose panel is currently visible. If it's `undefined`, it
-will be automatically set to the first enabled tab.
-
-#### Inherited from
-
-TabStoreProps.defaultSelectedId
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:83
-
----
-
-### focusLoop
-
-• `Optional` **focusLoop**: `boolean` \| `Orientation`
-
-**`Default`**
-
-```ts
-true;
-```
-
-#### Inherited from
-
-TabStoreProps.focusLoop
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:22
-
----
-
-### focusShift
-
-• `Optional` **focusShift**: `boolean`
-
-**Works only on two-dimensional composites**. If enabled, moving up or down
-when there's no next item or when the next item is disabled will shift to
-the item right before it.
-
-**`Default`**
-
-```ts
-false;
-```
-
-#### Inherited from
-
-TabStoreProps.focusShift
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:102
-
----
-
-### focusWrap
-
-• `Optional` **focusWrap**: `boolean` \| `Orientation`
-
-**Works only on two-dimensional composites**. If enabled, moving to the
-next item from the last one in a row or column will focus the first item in
-the next row or column and vice-versa.
-
-- `true` wraps between rows and columns.
-- `horizontal` wraps only between rows.
-- `vertical` wraps only between columns.
-- If `focusLoop` matches the value of `focusWrap`, it'll wrap between the
-  last item in the last row or column and the first item in the first row
-  or column and vice-versa.
-
-**`Default`**
-
-```ts
-false;
-```
-
-#### Inherited from
-
-TabStoreProps.focusWrap
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:95
-
----
-
-### includesBaseElement
-
-• `Optional` **includesBaseElement**: `boolean`
-
-Indicates whether the composite element should be included in the focus
-order.
-
-**`Default`**
-
-```ts
-false;
-```
-
-#### Inherited from
-
-TabStoreProps.includesBaseElement
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:112
-
----
-
-### items
-
-• `Optional` **items**: `Item`[]
-
-Lists all the items with their meta data. This state is automatically
-updated when an item is registered or unregistered with the `registerItem`
-function.
-
-#### Inherited from
-
-TabStoreProps.items
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/collection/collection-store.d.ts:18
-
----
-
-### orientation
-
-• `Optional` **orientation**: `Orientation`
-
-**`Default`**
-
-```ts
-"horizontal";
-```
-
-#### Inherited from
-
-TabStoreProps.orientation
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:18
-
----
-
-### rtl
-
-• `Optional` **rtl**: `boolean`
-
-Determines how the `next` and `previous` functions will behave. If `rtl` is
-set to `true`, they will be inverted. This only affects the composite
-widget behavior. You still need to set `dir="rtl"` on HTML/CSS.
-
-**`Default`**
-
-```ts
-false;
-```
-
-#### Inherited from
-
-TabStoreProps.rtl
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:53
-
----
-
-### selectOnMove
-
-• `Optional` **selectOnMove**: `boolean`
-
-Whether the tab should be selected when it receives focus. If it's set to
-`false`, the tab will be selected only when it's clicked.
-
-Live examples:
-
-- [Tab with React Router](https://ariakit.org/examples/tab-react-router)
-
-**`Default`**
-
-```ts
-true;
-```
-
-#### Inherited from
-
-TabStoreProps.selectOnMove
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:39
-
----
-
-### selectedId
-
-• `Optional` **selectedId**: `null` \| `string`
-
-The id of the tab whose panel is currently visible. If it's `undefined`, it
-will be automatically set to the first enabled tab.
-
-Live examples:
-
-- [Tab with React Router](https://ariakit.org/examples/tab-react-router)
-
-#### Inherited from
-
-TabStoreProps.selectedId
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:30
-
----
-
-### setActiveId
-
-• `Optional` **setActiveId**: (`activeId`: `undefined` \| `null` \| `string`) => `void`
-
-#### Type declaration
-
-▸ (`activeId`): `void`
-
-A callback that gets called when the `activeId` state changes.
-
-##### Parameters
-
-| Name       | Type                              | Description        |
-| :--------- | :-------------------------------- | :----------------- |
-| `activeId` | `undefined` \| `null` \| `string` | The new active id. |
-
-##### Returns
-
-`void`
-
-**`Example`**
-
-```ts
-const [activeId, setActiveId] = useState(null);
-const composite = useCompositeStore({ activeId, setActiveId });
-```
-
-#### Inherited from
-
-TabStoreProps.setActiveId
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/composite/composite-store.d.ts:35
-
----
-
-### setItems
-
-• `Optional` **setItems**: (...`args`: [items: Item[]]) => `void`
-
-#### Type declaration
-
-▸ (`...args`): `void`
-
-A callback that gets called when the `items` state changes.
-
-##### Parameters
-
-| Name      | Type            |
-| :-------- | :-------------- |
-| `...args` | [items: Item[]] |
-
-##### Returns
-
-`void`
-
-**`Example`**
-
-```ts
-const [items, setItems] = useState([]);
-const collection = useCollectionStore({ items, setItems });
-```
-
-#### Inherited from
-
-TabStoreProps.setItems
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/collection/collection-store.d.ts:32
-
----
-
-### setSelectedId
-
-• `Optional` **setSelectedId**: (`selectedId`: `undefined` \| `null` \| `string`) => `void`
-
-#### Type declaration
-
-▸ (`selectedId`): `void`
-
-Function that will be called when the `selectedId` state changes.
-
-##### Parameters
-
-| Name         | Type                              | Description          |
-| :----------- | :-------------------------------- | :------------------- |
-| `selectedId` | `undefined` \| `null` \| `string` | The new selected id. |
-
-##### Returns
-
-`void`
-
-#### Inherited from
-
-TabStoreProps.setSelectedId
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/tab/tab-store.d.ts:70
-
----
-
-### store
-
-• `Optional` **store**: `Store`\<`Partial`\<`TabStoreState`\>\>
-
-Another store object that will be kept in sync with the original store.
-
-#### Inherited from
-
-TabStoreProps.store
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/utils/store.d.ts:50
-
----
-
-### virtualFocus
-
-• `Optional` **virtualFocus**: `boolean`
-
-If enabled, the composite element will act as an
-[aria-activedescendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)
-container instead of [roving
-tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).
-DOM focus will remain on the composite element while its items receive
-virtual focus.
-
-Live examples:
-
-- [Multi-selectable
-  Combobox](https://ariakit.org/examples/combobox-multiple)
-
-**`Default`**
-
-```ts
-false;
-```
-
-#### Inherited from
-
-TabStoreProps.virtualFocus
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:34
diff --git a/packages/next-docs/pages/components/tab/code.mdx b/packages/next-docs/pages/components/tab/code.mdx
index d5706961dc..976f31a6dd 100644
--- a/packages/next-docs/pages/components/tab/code.mdx
+++ b/packages/next-docs/pages/components/tab/code.mdx
@@ -4,9 +4,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                          |
-| :------ | :---------------------------------------------------------------------------- |
-| `props` | [`TabProps`](interfaces/TabProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+| Name    | Type                                                                                                                            |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`TabProps`](props.md) & `RefAttributes`\<[`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement)\> |
 
 #### Returns
 
@@ -14,7 +14,7 @@
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <TabProvider>
   <TabList>
     <Tab>Tab 1</Tab>
@@ -25,6 +25,34 @@
 </TabProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { TabProvider } from '@vtex/shoreline-components'
+import { TabList } from '@vtex/shoreline-components'
+import { Tab } from '@vtex/shoreline-components'
+import { Tab } from '@vtex/shoreline-components'
+import { TabPanel } from '@vtex/shoreline-components'
+import { TabPanel } from '@vtex/shoreline-components'
+export default function App() { return (<><TabProvider> <TabList>   <Tab>Tab 1</Tab>   <Tab>Tab 2</Tab> </TabList> <TabPanel>   Tab 1 </TabPanel> <TabPanel>   Tab 2 </TabPanel></TabProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/tab/props.mdx b/packages/next-docs/pages/components/tab/props.mdx
index 5fb1d89436..96b8fb210c 100644
--- a/packages/next-docs/pages/components/tab/props.mdx
+++ b/packages/next-docs/pages/components/tab/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`TabProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -28,4 +22,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/tab/tab.tsx:44](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tab/tab.tsx#L44)
+[packages/components/src/tab/tab.tsx:44](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tab/tab.tsx#L44)
diff --git a/packages/next-docs/pages/components/table-body/code.mdx b/packages/next-docs/pages/components/table-body/code.mdx
index 9063fbeb76..410c8e034e 100644
--- a/packages/next-docs/pages/components/table-body/code.mdx
+++ b/packages/next-docs/pages/components/table-body/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                   |
-| :------ | :------------------------------------------------------------------------------------- |
-| `props` | [`TableBodyProps`](interfaces/TableBodyProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                            |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`TableBodyProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/table-body/props.mdx b/packages/next-docs/pages/components/table-body/props.mdx
index d30e9f83a2..ba66e94ba0 100644
--- a/packages/next-docs/pages/components/table-body/props.mdx
+++ b/packages/next-docs/pages/components/table-body/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`TableBodyProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -20,4 +14,4 @@
 
 #### Defined in
 
-[packages/components/src/table/table-body.tsx:18](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-body.tsx#L18)
+[packages/components/src/table/table-body.tsx:18](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-body.tsx#L18)
diff --git a/packages/next-docs/pages/components/table-cell/code.mdx b/packages/next-docs/pages/components/table-cell/code.mdx
index 220b924be3..7189fd0d13 100644
--- a/packages/next-docs/pages/components/table-cell/code.mdx
+++ b/packages/next-docs/pages/components/table-cell/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                   |
-| :------ | :------------------------------------------------------------------------------------- |
-| `props` | [`TableCellProps`](interfaces/TableCellProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                            |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`TableCellProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/table-cell/props.mdx b/packages/next-docs/pages/components/table-cell/props.mdx
index 4a602de5e3..7349705f88 100644
--- a/packages/next-docs/pages/components/table-cell/props.mdx
+++ b/packages/next-docs/pages/components/table-cell/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`TableCellProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -20,4 +14,4 @@
 
 #### Defined in
 
-[packages/components/src/table/table-cell.tsx:16](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-cell.tsx#L16)
+[packages/components/src/table/table-cell.tsx:16](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-cell.tsx#L16)
diff --git a/packages/next-docs/pages/components/table-header-cell/code.mdx b/packages/next-docs/pages/components/table-header-cell/code.mdx
index 576335e240..13522d140d 100644
--- a/packages/next-docs/pages/components/table-header-cell/code.mdx
+++ b/packages/next-docs/pages/components/table-header-cell/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                               |
-| :------ | :------------------------------------------------------------------------------------------------- |
-| `props` | [`TableHeaderCellProps`](interfaces/TableHeaderCellProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                  |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`TableHeaderCellProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/table-header-cell/props.mdx b/packages/next-docs/pages/components/table-header-cell/props.mdx
index 43fd230fff..8d3051a322 100644
--- a/packages/next-docs/pages/components/table-header-cell/props.mdx
+++ b/packages/next-docs/pages/components/table-header-cell/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`TableHeaderCellProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [sortable](props.md#sortable)
-
 ## Properties
 
 ### asChild
@@ -21,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/table/table-header-cell.tsx:24](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-header-cell.tsx#L24)
+[packages/components/src/table/table-header-cell.tsx:24](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-header-cell.tsx#L24)
 
 ---
 
@@ -31,4 +24,4 @@
 
 #### Defined in
 
-[packages/components/src/table/table-header-cell.tsx:25](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-header-cell.tsx#L25)
+[packages/components/src/table/table-header-cell.tsx:25](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-header-cell.tsx#L25)
diff --git a/packages/next-docs/pages/components/table-header/code.mdx b/packages/next-docs/pages/components/table-header/code.mdx
index e9c01bd921..10579f84a4 100644
--- a/packages/next-docs/pages/components/table-header/code.mdx
+++ b/packages/next-docs/pages/components/table-header/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                       |
-| :------ | :----------------------------------------------------------------------------------------- |
-| `props` | [`TableHeaderProps`](interfaces/TableHeaderProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                              |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TableHeaderProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/table-header/props.mdx b/packages/next-docs/pages/components/table-header/props.mdx
index 572ab153c9..6947638786 100644
--- a/packages/next-docs/pages/components/table-header/props.mdx
+++ b/packages/next-docs/pages/components/table-header/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`TableHeaderProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -20,4 +14,4 @@
 
 #### Defined in
 
-[packages/components/src/table/table-header.tsx:23](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-header.tsx#L23)
+[packages/components/src/table/table-header.tsx:23](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-header.tsx#L23)
diff --git a/packages/next-docs/pages/components/table-row/code.mdx b/packages/next-docs/pages/components/table-row/code.mdx
index 4ce5a0e712..57380bfce1 100644
--- a/packages/next-docs/pages/components/table-row/code.mdx
+++ b/packages/next-docs/pages/components/table-row/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                 |
-| :------ | :----------------------------------------------------------------------------------- |
-| `props` | [`TableRowProps`](interfaces/TableRowProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                           |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TableRowProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/table-row/props.mdx b/packages/next-docs/pages/components/table-row/props.mdx
index 321842f2b1..f8b57f28b8 100644
--- a/packages/next-docs/pages/components/table-row/props.mdx
+++ b/packages/next-docs/pages/components/table-row/props.mdx
@@ -6,15 +6,6 @@
 
   ↳ **`TableRowProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [dimOnHover](props.md#dimonhover)
-- [expanded](props.md#expanded)
-- [selected](props.md#selected)
-
 ## Properties
 
 ### asChild
@@ -23,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/table/table-row.tsx:34](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-row.tsx#L34)
+[packages/components/src/table/table-row.tsx:34](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-row.tsx#L34)
 
 ---
 
@@ -33,7 +24,7 @@
 
 #### Defined in
 
-[packages/components/src/table/table-row.tsx:35](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-row.tsx#L35)
+[packages/components/src/table/table-row.tsx:35](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-row.tsx#L35)
 
 ---
 
@@ -43,7 +34,7 @@
 
 #### Defined in
 
-[packages/components/src/table/table-row.tsx:33](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-row.tsx#L33)
+[packages/components/src/table/table-row.tsx:33](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-row.tsx#L33)
 
 ---
 
@@ -53,4 +44,4 @@
 
 #### Defined in
 
-[packages/components/src/table/table-row.tsx:32](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table-row.tsx#L32)
+[packages/components/src/table/table-row.tsx:32](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table-row.tsx#L32)
diff --git a/packages/next-docs/pages/components/table/code.mdx b/packages/next-docs/pages/components/table/code.mdx
index 29b2fcf783..42c8385909 100644
--- a/packages/next-docs/pages/components/table/code.mdx
+++ b/packages/next-docs/pages/components/table/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                           |
-| :------ | :----------------------------------------------------------------------------- |
-| `props` | [`TableProps`](interfaces/TableProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                        |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TableProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/table/props.mdx b/packages/next-docs/pages/components/table/props.mdx
index 6cf6f64b5c..696db28dbe 100644
--- a/packages/next-docs/pages/components/table/props.mdx
+++ b/packages/next-docs/pages/components/table/props.mdx
@@ -8,16 +8,6 @@
 
   ↳↳ [`SimpleTableProps`](SimpleTableProps.md)
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [columnWidths](props.md#columnwidths)
-- [density](props.md#density)
-- [stickyColumn](props.md#stickycolumn)
-- [stickyHeader](props.md#stickyheader)
-
 ## Properties
 
 ### asChild
@@ -34,7 +24,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:59](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L59)
+[packages/components/src/table/table.tsx:59](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L59)
 
 ---
 
@@ -62,7 +52,7 @@ When using the SimpleTable component
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:54](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L54)
+[packages/components/src/table/table.tsx:54](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L54)
 
 ---
 
@@ -80,7 +70,7 @@ The density of the table
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:74](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L74)
+[packages/components/src/table/table.tsx:74](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L74)
 
 ---
 
@@ -98,7 +88,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:69](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L69)
+[packages/components/src/table/table.tsx:69](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L69)
 
 ---
 
@@ -116,4 +106,4 @@ false;
 
 #### Defined in
 
-[packages/components/src/table/table.tsx:64](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/table/table.tsx#L64)
+[packages/components/src/table/table.tsx:64](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/table/table.tsx#L64)
diff --git a/packages/next-docs/pages/components/tag/code.mdx b/packages/next-docs/pages/components/tag/code.mdx
index 37e2929a7a..f4528a62cc 100644
--- a/packages/next-docs/pages/components/tag/code.mdx
+++ b/packages/next-docs/pages/components/tag/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                       |
-| :------ | :------------------------------------------------------------------------- |
-| `props` | [`TagProps`](interfaces/TagProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                      |
+| :------ | :------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`TagProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/tag/props.mdx b/packages/next-docs/pages/components/tag/props.mdx
index 3ca2e00eaa..a8380c7425 100644
--- a/packages/next-docs/pages/components/tag/props.mdx
+++ b/packages/next-docs/pages/components/tag/props.mdx
@@ -6,14 +6,6 @@
 
   ↳ **`TagProps`**
 
-## Table of contents
-
-### Properties
-
-- [color](props.md#color)
-- [size](props.md#size)
-- [variant](props.md#variant)
-
 ## Properties
 
 ### color
@@ -26,7 +18,7 @@ ComponentPropsWithoutRef.color
 
 #### Defined in
 
-[packages/components/src/tag/tag.tsx:33](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tag/tag.tsx#L33)
+[packages/components/src/tag/tag.tsx:33](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tag/tag.tsx#L33)
 
 ---
 
@@ -36,7 +28,7 @@ ComponentPropsWithoutRef.color
 
 #### Defined in
 
-[packages/components/src/tag/tag.tsx:44](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tag/tag.tsx#L44)
+[packages/components/src/tag/tag.tsx:44](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tag/tag.tsx#L44)
 
 ---
 
@@ -46,4 +38,4 @@ ComponentPropsWithoutRef.color
 
 #### Defined in
 
-[packages/components/src/tag/tag.tsx:32](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tag/tag.tsx#L32)
+[packages/components/src/tag/tag.tsx:32](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tag/tag.tsx#L32)
diff --git a/packages/next-docs/pages/components/text-input/code.mdx b/packages/next-docs/pages/components/text-input/code.mdx
index ec5862b430..74a12ebcbf 100644
--- a/packages/next-docs/pages/components/text-input/code.mdx
+++ b/packages/next-docs/pages/components/text-input/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                     |
-| :------ | :--------------------------------------------------------------------------------------- |
-| `props` | [`TextInputProps`](interfaces/TextInputProps.md) & `RefAttributes`\<`HTMLInputElement`\> |
+| Name    | Type                                                                                                                                |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TextInputProps`](props.md) & `RefAttributes`\<[`HTMLInputElement`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/text-input/props.mdx b/packages/next-docs/pages/components/text-input/props.mdx
index aedde459bd..4188406f36 100644
--- a/packages/next-docs/pages/components/text-input/props.mdx
+++ b/packages/next-docs/pages/components/text-input/props.mdx
@@ -2,22 +2,10 @@
 
 ## Hierarchy
 
-- `Omit`\<`ComponentPropsWithoutRef`\<`"input"`\>, `"prefix"`\>
+- [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<`ComponentPropsWithoutRef`\<`"input"`\>, `"prefix"`\>
 
   ↳ **`TextInputProps`**
 
-## Table of contents
-
-### Properties
-
-- [disabled](props.md#disabled)
-- [error](props.md#error)
-- [errorText](props.md#errortext)
-- [helpText](props.md#helptext)
-- [label](props.md#label)
-- [prefix](props.md#prefix)
-- [suffix](props.md#suffix)
-
 ## Properties
 
 ### disabled
@@ -38,7 +26,7 @@ Omit.disabled
 
 #### Defined in
 
-[packages/components/src/text-input/text-input.tsx:67](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/text-input/text-input.tsx#L67)
+[packages/components/src/text-input/text-input.tsx:67](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/text-input/text-input.tsx#L67)
 
 ---
 
@@ -56,7 +44,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/text-input/text-input.tsx:62](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/text-input/text-input.tsx#L62)
+[packages/components/src/text-input/text-input.tsx:62](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/text-input/text-input.tsx#L62)
 
 ---
 
@@ -66,7 +54,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/text-input/text-input.tsx:77](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/text-input/text-input.tsx#L77)
+[packages/components/src/text-input/text-input.tsx:77](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/text-input/text-input.tsx#L77)
 
 ---
 
@@ -76,7 +64,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/text-input/text-input.tsx:78](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/text-input/text-input.tsx#L78)
+[packages/components/src/text-input/text-input.tsx:78](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/text-input/text-input.tsx#L78)
 
 ---
 
@@ -86,7 +74,7 @@ false;
 
 #### Defined in
 
-[packages/components/src/text-input/text-input.tsx:76](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/text-input/text-input.tsx#L76)
+[packages/components/src/text-input/text-input.tsx:76](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/text-input/text-input.tsx#L76)
 
 ---
 
@@ -98,7 +86,7 @@ Node added before input space
 
 #### Defined in
 
-[packages/components/src/text-input/text-input.tsx:71](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/text-input/text-input.tsx#L71)
+[packages/components/src/text-input/text-input.tsx:71](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/text-input/text-input.tsx#L71)
 
 ---
 
@@ -110,4 +98,4 @@ Node added before input space
 
 #### Defined in
 
-[packages/components/src/text-input/text-input.tsx:75](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/text-input/text-input.tsx#L75)
+[packages/components/src/text-input/text-input.tsx:75](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/text-input/text-input.tsx#L75)
diff --git a/packages/next-docs/pages/components/text-props/code.mdx b/packages/next-docs/pages/components/text-props/code.mdx
deleted file mode 100644
index 3758602817..0000000000
--- a/packages/next-docs/pages/components/text-props/code.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-### TextProps
-
-Ƭ **TextProps**: `Span` \| `Heading` \| `Label` \| `Paragraph` \| `Div`
-
-#### Defined in
-
-[packages/components/src/text/text.tsx:59](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/text/text.tsx#L59)
-
-## Variables
-
-### FilterContext
-
-• `Const` **FilterContext**: `Context`\<`undefined` \| `SelectStore`\<`Value`\>\>
-
-#### Defined in
-
-[packages/components/src/filter/filter-context.ts:5](https://github.com/vtex/shoreline/blob/dd054909f/packages/components/src/filter/filter-context.ts#L5)
-
-## Functions
-
-### AccessibleIcon
-
-▸ **AccessibleIcon**(`props`): `null` \| `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`\>\>
-
-Makes icons accessible by adding a label
-
-#### Parameters
-
-| Name    | Type                                                                                             |
-| :------ | :----------------------------------------------------------------------------------------------- |
-| `props` | [`AccessibleIconProps`](interfaces/AccessibleIconProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
-
-#### Returns
-
-`null` \| `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`\>\>
-
-**`Example`**
-
-```ts
-<AccessibleIcon>
- <svg {...} />
-</AccessibleIcon>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/text/code.mdx b/packages/next-docs/pages/components/text/code.mdx
index 926ac608c7..5bcfe6e2c9 100644
--- a/packages/next-docs/pages/components/text/code.mdx
+++ b/packages/next-docs/pages/components/text/code.mdx
@@ -6,11 +6,11 @@
 
 #### Parameters
 
-| Name             | Type                                                                                                                                   | Description                             |
-| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------- |
-| `props`          | `Object`                                                                                                                               | -                                       |
-| `props.as?`      | `"div"` \| `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"label"` \| `"p"` \| `"span"`                                  | -                                       |
-| `props.variant?` | `"body"` \| `"action"` \| `"emphasis"` \| `"caption1"` \| `"caption2"` \| `"display1"` \| `"display2"` \| `"display3"` \| `"display4"` | Text variant **`Default`** `ts 'body' ` |
+| Name             | Type                                                                                                                                   | Description                                                                         |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- |
+| `props`          | `Object`                                                                                                                               | -                                                                                   |
+| `props.as?`      | `"div"` \| `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"label"` \| `"p"` \| `"span"`                                  | -                                                                                   |
+| `props.variant?` | `"body"` \| `"action"` \| `"emphasis"` \| `"caption1"` \| `"caption2"` \| `"display1"` \| `"display2"` \| `"display3"` \| `"display4"` | Text variant **`Default`** `tsx copy showLineNumbers filename="example.tsx 'body' ` |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/text/props.mdx b/packages/next-docs/pages/components/text/props.mdx
index d890b51f16..bfc6f3dfe1 100644
--- a/packages/next-docs/pages/components/text/props.mdx
+++ b/packages/next-docs/pages/components/text/props.mdx
@@ -4,7 +4,7 @@
 
 #### Defined in
 
-[packages/components/src/text/text.tsx:59](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/text/text.tsx#L59)
+[packages/components/src/text/text.tsx:59](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/text/text.tsx#L59)
 
 ## Variables
 
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/filter/filter-context.ts:5](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-context.ts#L5)
+[packages/components/src/filter/filter-context.ts:5](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-context.ts#L5)
 
 ## Functions
 
@@ -26,9 +26,9 @@ Makes icons accessible by adding a label
 
 #### Parameters
 
-| Name    | Type                                                                                             |
-| :------ | :----------------------------------------------------------------------------------------------- |
-| `props` | [`AccessibleIconProps`](interfaces/AccessibleIconProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                                          |
+| :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `props` | [`AccessibleIconProps`](interfaces/AccessibleIconProps.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/textarea/code.mdx b/packages/next-docs/pages/components/textarea/code.mdx
index b87f1160bb..75f1b23c67 100644
--- a/packages/next-docs/pages/components/textarea/code.mdx
+++ b/packages/next-docs/pages/components/textarea/code.mdx
@@ -6,9 +6,9 @@
 
 #### Parameters
 
-| Name    | Type                                                                                 |
-| :------ | :----------------------------------------------------------------------------------- |
-| `props` | [`TextareaProps`](interfaces/TextareaProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                           |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TextareaProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
diff --git a/packages/next-docs/pages/components/textarea/props.mdx b/packages/next-docs/pages/components/textarea/props.mdx
index ce4ea79093..dcd59ec49d 100644
--- a/packages/next-docs/pages/components/textarea/props.mdx
+++ b/packages/next-docs/pages/components/textarea/props.mdx
@@ -6,15 +6,6 @@
 
   ↳ **`TextareaProps`**
 
-## Table of contents
-
-### Properties
-
-- [error](props.md#error)
-- [errorText](props.md#errortext)
-- [helpText](props.md#helptext)
-- [label](props.md#label)
-
 ## Properties
 
 ### error
@@ -23,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/textarea/textarea.tsx:65](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/textarea/textarea.tsx#L65)
+[packages/components/src/textarea/textarea.tsx:65](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/textarea/textarea.tsx#L65)
 
 ---
 
@@ -33,7 +24,7 @@
 
 #### Defined in
 
-[packages/components/src/textarea/textarea.tsx:68](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/textarea/textarea.tsx#L68)
+[packages/components/src/textarea/textarea.tsx:68](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/textarea/textarea.tsx#L68)
 
 ---
 
@@ -43,7 +34,7 @@
 
 #### Defined in
 
-[packages/components/src/textarea/textarea.tsx:67](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/textarea/textarea.tsx#L67)
+[packages/components/src/textarea/textarea.tsx:67](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/textarea/textarea.tsx#L67)
 
 ---
 
@@ -53,4 +44,4 @@
 
 #### Defined in
 
-[packages/components/src/textarea/textarea.tsx:66](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/textarea/textarea.tsx#L66)
+[packages/components/src/textarea/textarea.tsx:66](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/textarea/textarea.tsx#L66)
diff --git a/packages/next-docs/pages/components/textinput/best-practices.mdx b/packages/next-docs/pages/components/textinput/best-practices.mdx
deleted file mode 100644
index 4a6eaef6dd..0000000000
--- a/packages/next-docs/pages/components/textinput/best-practices.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-# Best Practices
-
-## Components
-
-### TextInput vs. TextArea, DatePicker, NumberInput, Search, and Combobox
-
-- **TextArea:** use when the text value usually takes up more than a line.
-- **DatePicker:** use for date values.
-- **NumberInput:** use for numeric values with a unit and a specific format, such as quantities, measurements, and monetary amounts.
-- **Search:** use when the text value will be simultaneously submitted and used to filter items in a list.
-- **Combobox:** use when the merchant can search to select a predefined value or when they can list multiple values in the same field.
-
-## Variants
-
-### Prefix and Suffix
-
-- Use a `prefix` when the value always starts with the same characters. For example, URLs that always start with `https://`.
-- Use a `suffix` when the value always ends with the same characters. For example, a monetary amount that ends in `USD`, a weight value that ends in `kg`, a size measurement that ends in `cm` or a number that ends in `%`.
-- Don't use a suffix with an icon.
-- Don't use a field as the prefix or suffix of another field. For example, instead of using a Select as a prefix, include it as a separate field in the same line.
-
-### Optional
-
-- Mark a TextInput as optional when it's sometimes necessary. For example, the phone number of a store or the second line of an address.
-- Whenever a field is marked as optional, the term _(optional)_ is included by default next to the label.
-- Don't mark the mandatory fields of a form.
-- Don't include many optional fields in a form. Prefer keeping it short, so it's easier to understand and navigate.
-
-## Position
-
-### Position in a container
-
-Considering left-to-right interfaces:
-
-- The field size should comfortably fit the values usually filled in, considering localization as well.
-- Group and sort fields in a way that is logical to the merchant, according to user research. For example, the name is expected to come before the ID.
-- Don't position two fields that are not complementary on the same line. For example, the street name is not usually on the same line as the city.
-- Don't include more than three fields on the same line.
-
-## Behavior
-
-### Disabled state
-
-- Disable a field only if, in some condition, it becomes enabled. For example, a field that is incompatible with an option currently chosen in the form.
-- When the reason why the field is disabled might be unclear, use a Tooltip trigger next to the label to explain. Display the information when hovering over the trigger, not the field itself.
-
-### Error state
-
-- Prevent errors whenever possible. Implement any restrictions in the field itself whenever possible, such as not allowing spaces and limiting the number of characters.
-- The validation behavior should communicate the error at the right moment and make it easier to fix.
-- Show the error in a specific field when the merchant removes the focus or in any fields when they attempt to submit the form. For example, show an error when the merchant removes the focus of an empty mandatory field.
-- Remove the error state of the field as soon as the merchant modifies its value.
-
-## Content
-
-### Label
-
-- Write the name that best describes the value that must be filled. For example, use _Email address_ when the value should be an email address.
-- Visually hide the field label only when this definition is already present somewhere else, such as a column label that already describes all the fields in the column.
-- Use sentence case, but capitalize proper nouns.
-- Don't include redundant words. For example, write _Name_ as the label instead of _Promotion name_ on a page that includes promotion in its title.
-- Don't use an icon in a prefix to replace a label that isn't present anywhere else.
-- Don't use verbs. For example, instead of _Fill name_, use only _Name_.
-- Don't use personal pronouns. For example, write _VTEX account_ instead of _My VTEX account_.
-- Don't use interrogations.
-
-### Placeholder text
-
-Don't use placeholder text. Define the field in its label and provide any other necessary information in the help text.
-
-### Help text
-
-- Use a help text to provide any other information that is necessary besides the label.
-- Write a single sentence that is short and direct.
-- Use sentence case, but capitalize proper nouns.
-- When the help text explains the label, write as if you are completing the following sentence: _This is the [help text]_. For example, the help text for a Seller ID field could be "_Seller identifier in the marketplace_".
-- When the help text explains how the field value will be used, start with a verb in the present tense as if completing the following sentence: _When you fill a value in this field, it [help text]_. For example, the help text for a Seller ID field could be "_Appears to customers in the store_".
-- When the help text explains the label and how the value will be used, combine the two sentences described in the previous topics. For example, "_Seller identifier in the marketplace that appears to customers in the store_".
-- Don't explain format rules that can be implemented. Prefer implementing a mask or validation rules instead.
-- Don't include links. Use the Alert before the field if this is necessary.
-- Don't use periods or commas.
-- Don't repeat the label in the text.
-
-### Error text
-
-- Use error messages for static validation, such as _Fill this information_, and for dynamic validation, such as _This value is already in use_.
-- Start with imperative verbs. For example, write _Fill this information_ instead of _This field is required_.
-- Include the necessary details in the error message. For example, write _Fill only letters and numbers_ instead of _Fill only valid characters_.
-- Don't use periods or commas.
-- Don't use incomplete sentences. For example, write _Inform email_ instead of _Inform_.
diff --git a/packages/next-docs/pages/components/tooltip-anchor/code.mdx b/packages/next-docs/pages/components/tooltip-anchor/code.mdx
index 1d33e3b201..c10ca496f4 100644
--- a/packages/next-docs/pages/components/tooltip-anchor/code.mdx
+++ b/packages/next-docs/pages/components/tooltip-anchor/code.mdx
@@ -6,9 +6,9 @@ The anchor of the Tooltip
 
 #### Parameters
 
-| Name    | Type                                                                                           |
-| :------ | :--------------------------------------------------------------------------------------------- |
-| `props` | [`TooltipAnchorProps`](interfaces/TooltipAnchorProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TooltipAnchorProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,7 +16,7 @@ The anchor of the Tooltip
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <TooltipProvider>
   <TooltipAnchor asChild>
     <button>i</button>
@@ -24,6 +24,30 @@ The anchor of the Tooltip
 </TooltipProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { TooltipProvider } from '@vtex/shoreline-components'
+import { TooltipAnchor } from '@vtex/shoreline-components'
+export default function App() { return (<><TooltipProvider> <TooltipAnchor asChild>   <button>i</button> </TooltipAnchor></TooltipProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/tooltip-anchor/props.mdx b/packages/next-docs/pages/components/tooltip-anchor/props.mdx
index 35ddd30229..a9f7e2cb29 100644
--- a/packages/next-docs/pages/components/tooltip-anchor/props.mdx
+++ b/packages/next-docs/pages/components/tooltip-anchor/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`TooltipAnchorProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -20,4 +14,4 @@
 
 #### Defined in
 
-[packages/components/src/tooltip/tooltip-anchor.tsx:32](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tooltip/tooltip-anchor.tsx#L32)
+[packages/components/src/tooltip/tooltip-anchor.tsx:32](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tooltip/tooltip-anchor.tsx#L32)
diff --git a/packages/next-docs/pages/components/tooltip-arrow/code.mdx b/packages/next-docs/pages/components/tooltip-arrow/code.mdx
index 277433c407..e7ef27d36e 100644
--- a/packages/next-docs/pages/components/tooltip-arrow/code.mdx
+++ b/packages/next-docs/pages/components/tooltip-arrow/code.mdx
@@ -6,9 +6,9 @@ Arrow of the Tooltip
 
 #### Parameters
 
-| Name    | Type                                                                                         |
-| :------ | :------------------------------------------------------------------------------------------- |
-| `props` | [`TooltipArrowProps`](interfaces/TooltipArrowProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                               |
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TooltipArrowProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,7 +16,7 @@ Arrow of the Tooltip
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <TooltipProvider>
   <TooltipPopover>
     <TooltipAnchor />
@@ -24,6 +24,31 @@ Arrow of the Tooltip
 </TooltipProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { TooltipProvider } from '@vtex/shoreline-components'
+import { TooltipPopover } from '@vtex/shoreline-components'
+import { TooltipAnchor } from '@vtex/shoreline-components'
+export default function App() { return (<><TooltipProvider> <TooltipPopover>   <TooltipAnchor /> </TooltipPopover></TooltipProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/tooltip-arrow/props.mdx b/packages/next-docs/pages/components/tooltip-arrow/props.mdx
index 02b76e0a8a..d859f5500b 100644
--- a/packages/next-docs/pages/components/tooltip-arrow/props.mdx
+++ b/packages/next-docs/pages/components/tooltip-arrow/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`TooltipArrowProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-
 ## Properties
 
 ### asChild
@@ -20,4 +14,4 @@
 
 #### Defined in
 
-[packages/components/src/tooltip/tooltip-arrow.tsx:30](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tooltip/tooltip-arrow.tsx#L30)
+[packages/components/src/tooltip/tooltip-arrow.tsx:30](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tooltip/tooltip-arrow.tsx#L30)
diff --git a/packages/next-docs/pages/components/tooltip-popover/code.mdx b/packages/next-docs/pages/components/tooltip-popover/code.mdx
index e55e3c6dac..f2cefb55bd 100644
--- a/packages/next-docs/pages/components/tooltip-popover/code.mdx
+++ b/packages/next-docs/pages/components/tooltip-popover/code.mdx
@@ -6,9 +6,9 @@ Popover of the Tooltip
 
 #### Parameters
 
-| Name    | Type                                                                                             |
-| :------ | :----------------------------------------------------------------------------------------------- |
-| `props` | [`TooltipPopoverProps`](interfaces/TooltipPopoverProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                 |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TooltipPopoverProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,36 @@ Popover of the Tooltip
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <TooltipProvider>
   <TooltipPopover>Text</TooltipPopover>
 </TooltipProvider>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { TooltipProvider } from '@vtex/shoreline-components'
+import { TooltipPopover } from '@vtex/shoreline-components'
+export default function App() { return (<><TooltipProvider> <TooltipPopover>   Text </TooltipPopover></TooltipProvider></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/tooltip-popover/props.mdx b/packages/next-docs/pages/components/tooltip-popover/props.mdx
index 607a13d59c..d235ede9d0 100644
--- a/packages/next-docs/pages/components/tooltip-popover/props.mdx
+++ b/packages/next-docs/pages/components/tooltip-popover/props.mdx
@@ -6,13 +6,6 @@
 
   ↳ **`TooltipPopoverProps`**
 
-## Table of contents
-
-### Properties
-
-- [asChild](props.md#aschild)
-- [gutter](props.md#gutter)
-
 ## Properties
 
 ### asChild
@@ -21,7 +14,7 @@
 
 #### Defined in
 
-[packages/components/src/tooltip/tooltip-popover.tsx:33](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tooltip/tooltip-popover.tsx#L33)
+[packages/components/src/tooltip/tooltip-popover.tsx:33](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tooltip/tooltip-popover.tsx#L33)
 
 ---
 
@@ -31,4 +24,4 @@
 
 #### Defined in
 
-[packages/components/src/tooltip/tooltip-popover.tsx:34](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tooltip/tooltip-popover.tsx#L34)
+[packages/components/src/tooltip/tooltip-popover.tsx:34](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tooltip/tooltip-popover.tsx#L34)
diff --git a/packages/next-docs/pages/components/tooltip-provider/code.mdx b/packages/next-docs/pages/components/tooltip-provider/code.mdx
deleted file mode 100644
index 7432b00036..0000000000
--- a/packages/next-docs/pages/components/tooltip-provider/code.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-### TooltipProvider
-
-▸ **TooltipProvider**(`props?`): `JSX.Element`
-
-Provides a tooltip store to Tooltip components.
-
-#### Parameters
-
-| Name     | Type                                                         |
-| :------- | :----------------------------------------------------------- |
-| `props?` | [`TooltipProviderProps`](interfaces/TooltipProviderProps.md) |
-
-#### Returns
-
-`JSX.Element`
-
-**`See`**
-
-https://ariakit.org/components/tooltip
-
-**`Example`**
-
-```jsx
-<TooltipProvider timeout={250}>
-  <TooltipAnchor />
-  <Tooltip />
-</TooltipProvider>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/tooltip/tooltip-provider.d.ts:14
diff --git a/packages/next-docs/pages/components/tooltip-provider/props.mdx b/packages/next-docs/pages/components/tooltip-provider/props.mdx
deleted file mode 100644
index 2a66f2965f..0000000000
--- a/packages/next-docs/pages/components/tooltip-provider/props.mdx
+++ /dev/null
@@ -1,374 +0,0 @@
-# Interface: TooltipProviderProps
-
-## Hierarchy
-
-- `TooltipStoreProps`
-
-  ↳ **`TooltipProviderProps`**
-
-## Table of contents
-
-### Properties
-
-- [animated](TooltipProviderProps.md#animated)
-- [children](TooltipProviderProps.md#children)
-- [defaultOpen](TooltipProviderProps.md#defaultopen)
-- [disclosure](TooltipProviderProps.md#disclosure)
-- [hideTimeout](TooltipProviderProps.md#hidetimeout)
-- [open](TooltipProviderProps.md#open)
-- [placement](TooltipProviderProps.md#placement)
-- [popover](TooltipProviderProps.md#popover)
-- [setMounted](TooltipProviderProps.md#setmounted)
-- [setOpen](TooltipProviderProps.md#setopen)
-- [showTimeout](TooltipProviderProps.md#showtimeout)
-- [skipTimeout](TooltipProviderProps.md#skiptimeout)
-- [store](TooltipProviderProps.md#store)
-- [timeout](TooltipProviderProps.md#timeout)
-- [type](TooltipProviderProps.md#type)
-
-## Properties
-
-### animated
-
-• `Optional` **animated**: `number` \| `boolean`
-
-Determines whether the content should animate when it is shown or hidden.
-
-- If `true`, the `animating` state will be `true` when the content is shown
-  or hidden and it will wait for `stopAnimation` to be called or a CSS
-  animation/transition to end before becoming `false`.
-- If it's set to a number, the `animating` state will be `true` when the
-  content is shown or hidden and it will wait for the number of
-  milliseconds to pass before becoming `false`.
-
-Live examples:
-
-- [Animated Combobox](https://ariakit.org/examples/combobox-animated)
-- [Animated Dialog](https://ariakit.org/examples/dialog-animated)
-- [Animated Select](https://ariakit.org/examples/select-animated)
-
-**`Default`**
-
-```ts
-false;
-```
-
-#### Inherited from
-
-TooltipStoreProps.animated
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/disclosure/disclosure-store.d.ts:44
-
----
-
-### children
-
-• `Optional` **children**: `ReactNode`
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/tooltip/tooltip-provider.d.ts:16
-
----
-
-### defaultOpen
-
-• `Optional` **defaultOpen**: `boolean`
-
-The default visibility state of the content.
-
-**`Default`**
-
-```ts
-false;
-```
-
-#### Inherited from
-
-TooltipStoreProps.defaultOpen
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/disclosure/disclosure-store.d.ts:115
-
----
-
-### disclosure
-
-• `Optional` **disclosure**: `null` \| `DisclosureStore`
-
-A reference to another disclosure store that controls another disclosure
-component to keep them in sync. Element states like `contentElement` and
-`disclosureElement` won't be synced. For that, use the `store` prop
-instead.
-
-#### Inherited from
-
-TooltipStoreProps.disclosure
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/disclosure/disclosure-store.d.ts:122
-
----
-
-### hideTimeout
-
-• `Optional` **hideTimeout**: `number`
-
-**`Default`**
-
-```ts
-0;
-```
-
-#### Inherited from
-
-TooltipStoreProps.hideTimeout
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tooltip/tooltip-store.d.ts:23
-
----
-
-### open
-
-• `Optional` **open**: `boolean`
-
-The visibility state of the content.
-
-Live examples:
-
-- [Dialog with React
-  Router](https://ariakit.org/examples/dialog-react-router)
-
-**`Default`**
-
-```ts
-false;
-```
-
-#### Inherited from
-
-TooltipStoreProps.open
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/disclosure/disclosure-store.d.ts:16
-
----
-
-### placement
-
-• `Optional` **placement**: `Placement`
-
-**`Default`**
-
-```ts
-"top";
-```
-
-#### Inherited from
-
-TooltipStoreProps.placement
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tooltip/tooltip-store.d.ts:21
-
----
-
-### popover
-
-• `Optional` **popover**: `null` \| `PopoverStore`
-
-A reference to another popover store that's controlling another popover to
-keep them in sync.
-
-#### Inherited from
-
-TooltipStoreProps.popover
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/popover/popover-store.d.ts:65
-
----
-
-### setMounted
-
-• `Optional` **setMounted**: (`mounted`: `boolean`) => `void`
-
-#### Type declaration
-
-▸ (`mounted`): `void`
-
-A callback that gets called when the `mounted` state changes.
-
-##### Parameters
-
-| Name      | Type      | Description            |
-| :-------- | :-------- | :--------------------- |
-| `mounted` | `boolean` | The new mounted value. |
-
-##### Returns
-
-`void`
-
-**`Example`**
-
-```ts
-const [mounted, setMounted] = useState(false);
-const disclosure = useDisclosureStore({ setMounted });
-```
-
-#### Inherited from
-
-TooltipStoreProps.setMounted
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/disclosure/disclosure-store.d.ts:33
-
----
-
-### setOpen
-
-• `Optional` **setOpen**: (`open`: `boolean`) => `void`
-
-#### Type declaration
-
-▸ (`open`): `void`
-
-A callback that gets called when the `open` state changes.
-
-##### Parameters
-
-| Name   | Type      | Description         |
-| :----- | :-------- | :------------------ |
-| `open` | `boolean` | The new open value. |
-
-##### Returns
-
-`void`
-
-**`Example`**
-
-```ts
-const [open, setOpen] = useState(false);
-const disclosure = useDisclosureStore({ open, setOpen });
-```
-
-#### Inherited from
-
-TooltipStoreProps.setOpen
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/disclosure/disclosure-store.d.ts:25
-
----
-
-### showTimeout
-
-• `Optional` **showTimeout**: `number`
-
-The amount of time in milliseconds to wait before **showing** the popover.
-It defaults to the value passed to `timeout`.
-
-#### Inherited from
-
-TooltipStoreProps.showTimeout
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/hovercard/hovercard-store.d.ts:24
-
----
-
-### skipTimeout
-
-• `Optional` **skipTimeout**: `number`
-
-The amount of time after a tooltip is hidden while all tooltips on the
-page can be shown immediately, without waiting for the show timeout.
-
-**`Default`**
-
-```ts
-300;
-```
-
-#### Inherited from
-
-TooltipStoreProps.skipTimeout
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tooltip/tooltip-store.d.ts:19
-
----
-
-### store
-
-• `Optional` **store**: `Store`\<`Partial`\<`TooltipStoreState`\>\>
-
-Another store object that will be kept in sync with the original store.
-
-#### Inherited from
-
-TooltipStoreProps.store
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/utils/store.d.ts:50
-
----
-
-### timeout
-
-• `Optional` **timeout**: `number`
-
-The amount of time in milliseconds to wait before showing and hiding the
-popover. To control the delay for showing and hiding separately, use
-`showTimeout` and `hideTimeout`.
-
-**`Default`**
-
-```ts
-500;
-```
-
-#### Inherited from
-
-TooltipStoreProps.timeout
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/hovercard/hovercard-store.d.ts:19
-
----
-
-### type
-
-• `Optional` **type**: `"label"` \| `"description"`
-
-Determines whether the tooltip is being used as a label or a description
-for the anchor element.
-
-**`Default`**
-
-```ts
-"description";
-```
-
-#### Inherited from
-
-TooltipStoreProps.type
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tooltip/tooltip-store.d.ts:13
diff --git a/packages/next-docs/pages/components/tooltip/code.mdx b/packages/next-docs/pages/components/tooltip/code.mdx
index c8be0de797..ca87859a33 100644
--- a/packages/next-docs/pages/components/tooltip/code.mdx
+++ b/packages/next-docs/pages/components/tooltip/code.mdx
@@ -6,9 +6,9 @@ Tooltip component
 
 #### Parameters
 
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `props` | [`TooltipProps`](interfaces/TooltipProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                          |
+| :------ | :---------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`TooltipProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,35 @@ Tooltip component
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <Tooltip text="Text">
   <button>i</button>
 </Tooltip>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { Tooltip } from '@vtex/shoreline-components'
+export default function App() { return (<><Tooltip text="Text">  <button>i</button></Tooltip></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/tooltip/props.mdx b/packages/next-docs/pages/components/tooltip/props.mdx
index 53e9653349..6878a79ea5 100644
--- a/packages/next-docs/pages/components/tooltip/props.mdx
+++ b/packages/next-docs/pages/components/tooltip/props.mdx
@@ -6,12 +6,6 @@
 
   ↳ **`TooltipProps`**
 
-## Table of contents
-
-### Properties
-
-- [text](props.md#text)
-
 ## Properties
 
 ### text
@@ -22,4 +16,4 @@ Text displayed on the popover
 
 #### Defined in
 
-[packages/components/src/tooltip/tooltip.tsx:61](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/tooltip/tooltip.tsx#L61)
+[packages/components/src/tooltip/tooltip.tsx:61](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/tooltip/tooltip.tsx#L61)
diff --git a/packages/next-docs/pages/components/visually-hidden/code.mdx b/packages/next-docs/pages/components/visually-hidden/code.mdx
index 2808206d0b..37826100c1 100644
--- a/packages/next-docs/pages/components/visually-hidden/code.mdx
+++ b/packages/next-docs/pages/components/visually-hidden/code.mdx
@@ -6,9 +6,9 @@ Renders an element that is visually only to screen readers
 
 #### Parameters
 
-| Name    | Type                                                                                             |
-| :------ | :----------------------------------------------------------------------------------------------- |
-| `props` | [`VisuallyHiddenProps`](interfaces/VisuallyHiddenProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+| Name    | Type                                                                                                                                 |
+| :------ | :----------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | [`VisuallyHiddenProps`](props.md) & `RefAttributes`\<[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)\> |
 
 #### Returns
 
@@ -16,12 +16,35 @@ Renders an element that is visually only to screen readers
 
 **`Example`**
 
-```ts
+```tsx copy showLineNumbers filename="example.tsx
 <a href="#">
   Learn more<VisuallyHidden> about brazilian beaches</VisuallyHidden>
 </a>
 ```
 
+import {
+SandpackProvider,
+SandpackLayout,
+SandpackCodeEditor,
+SandpackPreview,
+} from '@codesandbox/sandpack-react'
+
+<SandpackProvider
+template="react"
+customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+files={{'/App.js': `import React from 'react'
+import { VisuallyHidden } from '@vtex/shoreline-components'
+export default function App() { return (<><a href="#"> Learn more<VisuallyHidden> about brazilian beaches</VisuallyHidden></a></>)}`,
+  }}
+
+>   <SandpackLayout>
+
+    <SandpackCodeEditor />
+    <SandpackPreview />
+
+  </SandpackLayout>
+</SandpackProvider>
+
 #### Defined in
 
 node_modules/.pnpm/@types+react@18.2.14/node_modules/@types/react/ts5.0/index.d.ts:355
diff --git a/packages/next-docs/pages/components/visually-hidden/props.mdx b/packages/next-docs/pages/components/visually-hidden/props.mdx
index 044b7e61c1..e179433eea 100644
--- a/packages/next-docs/pages/components/visually-hidden/props.mdx
+++ b/packages/next-docs/pages/components/visually-hidden/props.mdx
@@ -1,11 +1,5 @@
 # VisuallyHiddenProps
 
-## Table of contents
-
-### Properties
-
-- [children](props.md#children)
-
 ## Properties
 
 ### children
@@ -14,4 +8,4 @@
 
 #### Defined in
 
-[packages/components/src/visually-hidden/visually-hidden.tsx:19](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/visually-hidden/visually-hidden.tsx#L19)
+[packages/components/src/visually-hidden/visually-hidden.tsx:19](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/visually-hidden/visually-hidden.tsx#L19)
diff --git a/packages/next-docs/pages/hooks/use-filter-context/code.mdx b/packages/next-docs/pages/hooks/use-filter-context/code.mdx
index c3cc1a8167..be65516595 100644
--- a/packages/next-docs/pages/hooks/use-filter-context/code.mdx
+++ b/packages/next-docs/pages/hooks/use-filter-context/code.mdx
@@ -16,4 +16,4 @@ const filter = useFilterContext();
 
 #### Defined in
 
-[packages/components/src/filter/filter-context.ts:12](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/filter/filter-context.ts#L12)
+[packages/components/src/filter/filter-context.ts:12](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/filter/filter-context.ts#L12)
diff --git a/packages/next-docs/pages/hooks/use-locale/code.mdx b/packages/next-docs/pages/hooks/use-locale/code.mdx
index 896205a01c..7ca9afe06d 100644
--- a/packages/next-docs/pages/hooks/use-locale/code.mdx
+++ b/packages/next-docs/pages/hooks/use-locale/code.mdx
@@ -16,4 +16,4 @@ const locale = useLocale();
 
 #### Defined in
 
-[packages/components/src/locale/use-locale.ts:9](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/locale/use-locale.ts#L9)
+[packages/components/src/locale/use-locale.ts:9](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/locale/use-locale.ts#L9)
diff --git a/packages/next-docs/pages/hooks/use-popover-context/code.mdx b/packages/next-docs/pages/hooks/use-popover-context/code.mdx
deleted file mode 100644
index fdf0c137a6..0000000000
--- a/packages/next-docs/pages/hooks/use-popover-context/code.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-### usePopoverContext
-
-▸ **usePopoverContext**(): `undefined` \| `PopoverStore`
-
-Returns the popover store from the nearest popover container.
-
-#### Returns
-
-`undefined` \| `PopoverStore`
-
-**`Example`**
-
-```ts
-function Popover() {
-  const store = usePopoverContext();
-
-  if (!store) {
-    throw new Error("Popover must be wrapped in PopoverProvider");
-  }
-
-  // Use the store...
-}
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/popover/popover-context.d.ts:15
diff --git a/packages/next-docs/pages/hooks/use-popover-store/code.mdx b/packages/next-docs/pages/hooks/use-popover-store/code.mdx
deleted file mode 100644
index 584d302ed7..0000000000
--- a/packages/next-docs/pages/hooks/use-popover-store/code.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-### usePopoverStore
-
-▸ **usePopoverStore**(`props?`): `PopoverStore`
-
-Creates a popover store.
-
-#### Parameters
-
-| Name     | Type                |
-| :------- | :------------------ |
-| `props?` | `PopoverStoreProps` |
-
-#### Returns
-
-`PopoverStore`
-
-**`See`**
-
-https://ariakit.org/components/popover
-
-**`Example`**
-
-```jsx
-const popover = usePopoverStore();
-<PopoverDisclosure store={popover}>Disclosure</PopoverDisclosure>
-<Popover store={popover}>Popover</Popover>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/popover/popover-store.d.ts:15
diff --git a/packages/next-docs/pages/hooks/use-radio-state/code.mdx b/packages/next-docs/pages/hooks/use-radio-state/code.mdx
index 936000f492..4ecdeb24ff 100644
--- a/packages/next-docs/pages/hooks/use-radio-state/code.mdx
+++ b/packages/next-docs/pages/hooks/use-radio-state/code.mdx
@@ -14,4 +14,4 @@
 
 #### Defined in
 
-[packages/components/src/radio/radio-group.tsx:70](https://github.com/vtex/shoreline/blob/9cdfd7505/packages/components/src/radio/radio-group.tsx#L70)
+[packages/components/src/radio/radio-group.tsx:70](https://github.com/vtex/shoreline/blob/6674ddada/packages/components/src/radio/radio-group.tsx#L70)
diff --git a/packages/next-docs/pages/hooks/use-select-context/code.mdx b/packages/next-docs/pages/hooks/use-select-context/code.mdx
deleted file mode 100644
index 22cc3512cf..0000000000
--- a/packages/next-docs/pages/hooks/use-select-context/code.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-### useSelectContext
-
-▸ **useSelectContext**(): `undefined` \| `SelectStore`\<`Value`\>
-
-Returns the select store from the nearest select container.
-
-#### Returns
-
-`undefined` \| `SelectStore`\<`Value`\>
-
-**`Example`**
-
-```ts
-function Select() {
-  const store = useSelectContext();
-
-  if (!store) {
-    throw new Error("Select must be wrapped in SelectProvider");
-  }
-
-  // Use the store...
-}
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/select/select-context.d.ts:15
diff --git a/packages/next-docs/pages/hooks/use-select-store/code.mdx b/packages/next-docs/pages/hooks/use-select-store/code.mdx
deleted file mode 100644
index c10e778f86..0000000000
--- a/packages/next-docs/pages/hooks/use-select-store/code.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-### useSelectStore
-
-▸ **useSelectStore**\<`T`\>(`props`): `SelectStore`\<`T`\>
-
-Creates a select store.
-
-#### Type parameters
-
-| Name | Type                      |
-| :--- | :------------------------ |
-| `T`  | extends `Value` = `Value` |
-
-#### Parameters
-
-| Name    | Type                                                                       |
-| :------ | :------------------------------------------------------------------------- |
-| `props` | `PickRequired`\<`SelectStoreProps`\<`T`\>, `"defaultValue"` \| `"value"`\> |
-
-#### Returns
-
-`SelectStore`\<`T`\>
-
-**`See`**
-
-https://ariakit.org/components/select
-
-**`Example`**
-
-```jsx
-const select = useSelectStore({ defaultValue: "Apple" });
-<Select store={select} />
-<SelectPopover store={select}>
-  <SelectItem value="Apple" />
-  <SelectItem value="Orange" />
-</SelectPopover>
-```
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/select/select-store.d.ts:31
-
-▸ **useSelectStore**(`props?`): `SelectStore`
-
-#### Parameters
-
-| Name     | Type                          |
-| :------- | :---------------------------- |
-| `props?` | `SelectStoreProps`\<`Value`\> |
-
-#### Returns
-
-`SelectStore`
-
-#### Defined in
-
-node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/select/select-store.d.ts:32
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 042ef845b2..13fd23e982 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -266,6 +266,9 @@ importers:
       typedoc-plugin-markdown:
         specifier: ^3.17.1
         version: 3.17.1(typedoc@0.25.3)
+      typedoc-plugin-mdn-links:
+        specifier: ^3.1.4
+        version: 3.1.4(typedoc@0.25.3)
       typescript:
         specifier: 4.9.5
         version: 4.9.5
@@ -746,6 +749,9 @@ importers:
       '@vtex/admin-ui':
         specifier: ^0.136.1
         version: 0.136.1(react-dom@18.2.0)(react@18.2.0)
+      '@vtex/shoreline-components':
+        specifier: workspace:*
+        version: link:../components
       '@vtex/shoreline-icons':
         specifier: workspace:*
         version: link:../icons
@@ -27604,6 +27610,14 @@ packages:
       typedoc: 0.25.3(typescript@4.9.5)
     dev: true
 
+  /typedoc-plugin-mdn-links@3.1.4(typedoc@0.25.3):
+    resolution: {integrity: sha512-uChw0fOIQQOyte+SBVPyeORAvxVmABycG28hIFJCagLHPW6ZxuvvDPcGvD4Wb2dJ8TW9y9pneYqQR+UW2/DhhA==}
+    peerDependencies:
+      typedoc: '>= 0.23.14 || 0.24.x || 0.25.x'
+    dependencies:
+      typedoc: 0.25.3(typescript@4.9.5)
+    dev: true
+
   /typedoc@0.25.3(typescript@4.9.5):
     resolution: {integrity: sha512-Ow8Bo7uY1Lwy7GTmphRIMEo6IOZ+yYUyrc8n5KXIZg1svpqhZSWgni2ZrDhe+wLosFS8yswowUzljTAV/3jmWw==}
     engines: {node: '>= 16'}
diff --git a/scripts/typedoc-to-nextra.js b/scripts/typedoc-to-nextra.js
index c533e5a0dc..9440b14745 100644
--- a/scripts/typedoc-to-nextra.js
+++ b/scripts/typedoc-to-nextra.js
@@ -7,6 +7,99 @@ const prettierConfigPath = require.resolve('../.prettierrc')
 const prettierConfig = require(prettierConfigPath)
 const path = require('path')
 
+const RESERVED_TYPEDOC_KEYWORDS = {
+  interfaces: 'Interfaces',
+  props: 'Props',
+  md: '.md',
+  tsxCodeBlockHeader: '```tsx copy showLineNumbers filename="example.tsx',
+  tsxCodeBlockEnd: '```',
+}
+
+function exampleToSandpackTemplate(example) {
+  // Extract components from example
+  const components = example.match(/<([A-Z][a-zA-Z0-9]*)/g)
+  // Import components from @vtex/shoreline-components
+  const imports = components
+    .map((component) => {
+      const componentName = component.replace('<', '')
+
+      return `import { ${componentName} } from '@vtex/shoreline-components'`
+    })
+    .join('\n')
+
+  console.log({ example })
+
+  // Removes markdown code block
+  const parsedExample = example
+    .replace(RESERVED_TYPEDOC_KEYWORDS.tsxCodeBlockHeader, '')
+    .replace(RESERVED_TYPEDOC_KEYWORDS.tsxCodeBlockEnd, '')
+    // Makes a one liner string
+    .replaceAll('\n', '')
+
+  // Add example within export default
+  const exportedExample = `export default function App() { return (<>${parsedExample}</>)}`
+
+  const code = `import React from 'react'\n${imports}\n${exportedExample}`
+
+  // Add imports and example to template
+  const template =
+    `
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackPreview,
+} from '@codesandbox/sandpack-react' 
+
+<SandpackProvider 
+  template="react" 
+  customSetup={{ dependencies: { '@vtex/shoreline-components': '^0.21.0' } }}
+  files={{'/App.js': ` +
+    `\`${code}\`` +
+    `,
+  }}
+>
+  <SandpackLayout>
+    <SandpackCodeEditor />
+    <SandpackPreview />
+  </SandpackLayout>
+</SandpackProvider>`
+
+  return template
+}
+
+/**
+ * Add a Sandpack example to the docs based on a given `@example` block
+ *
+ * @param {string} file
+ * @returns
+ */
+function addSandpack(file) {
+  const exampleIndex = file.indexOf(
+    RESERVED_TYPEDOC_KEYWORDS.tsxCodeBlockHeader
+  )
+
+  const exampleEndIndex = file.indexOf(
+    `${RESERVED_TYPEDOC_KEYWORDS.tsxCodeBlockEnd}\n`,
+    exampleIndex
+  )
+
+  if (exampleIndex === -1 || exampleEndIndex === -1) {
+    return file
+  }
+
+  const example = file.substring(
+    exampleIndex,
+    exampleEndIndex + RESERVED_TYPEDOC_KEYWORDS.tsxCodeBlockEnd.length
+  )
+
+  const template = exampleToSandpackTemplate(example)
+
+  const newExample = `${example}\n\n${template}`
+
+  return file.replace(example, newExample)
+}
+
 /**
  * Copy a folder recursively
  *
@@ -69,7 +162,7 @@ function splitIntoMultipleFiles() {
       // since typedoc classifies type-declared type as type aliases under
       // the modules.md file, while it separates interface-declared types
       // under the interfaces folder
-      const isTypeAlias = methodName.includes('Props')
+      const isTypeAlias = methodName.includes(RESERVED_TYPEDOC_KEYWORDS.props)
 
       if (isHook && !isTypeAlias) {
         const kebabCaseName = methodName
@@ -106,14 +199,25 @@ function splitIntoMultipleFiles() {
 
         const filePath = `${folderPath}/code.mdx`
 
-        fs.writeFileSync(filePath, method)
+        let parsedMethod = method
+          // Replace type annotations with the jsx syntax
+          .replaceAll('```ts', RESERVED_TYPEDOC_KEYWORDS.tsxCodeBlockHeader)
+          // Replace the link reference to the interface file with the props file
+          .replaceAll(`(interfaces/${methodName}Props.md)`, '(props.md)')
+
+        parsedMethod = addSandpack(parsedMethod)
+
+        fs.writeFileSync(filePath, parsedMethod)
 
         prettify(filePath)
 
         components.push(methodName)
 
         const correspondingInterface = interfacesFiles.find(
-          (i) => i.replace('.md', '').replace('Props', '') === methodName
+          (i) =>
+            i
+              .replace(RESERVED_TYPEDOC_KEYWORDS.md, '')
+              .replace(RESERVED_TYPEDOC_KEYWORDS.props, '') === methodName
         )
 
         if (correspondingInterface) {
@@ -124,7 +228,6 @@ function splitIntoMultipleFiles() {
 
           const interfaceFilePath = `${folderPath}/props.mdx`
 
-          // TODO: Fix links between components and their props
           const parsedInterfaceFile = interfaceFile
             // Replace the interface name with the component name on the title
             .replace('Interface: ', '')
diff --git a/typedoc.json b/typedoc.json
index cd45701b6e..a934cdf98e 100644
--- a/typedoc.json
+++ b/typedoc.json
@@ -11,5 +11,6 @@
   "excludeExternals": true,
   "externalPattern": ["**/node_modules/**"],
   "tsconfig": "packages/components/tsconfig.json",
+  "commentStyle": "all",
   "out": "__tmpDocs"
 }