diff --git a/.storybook/themeDecorator.jsx b/.storybook/themeDecorator.jsx
index ea231c9177..b9700838c7 100644
--- a/.storybook/themeDecorator.jsx
+++ b/.storybook/themeDecorator.jsx
@@ -1,6 +1,9 @@
 import React from 'react'
 import { ThemeProvider } from '../packages/admin-ui/dist/vtex-admin-ui.esm'
+import '../packages/tokens/dist/styles.min.css'
 
 export function themeDecorator(storyFn) {
-  return <ThemeProvider experimentalDisabledGlobalStyles>{storyFn()}</ThemeProvider>
+  return (
+    <ThemeProvider experimentalDisabledGlobalStyles>{storyFn()}</ThemeProvider>
+  )
 }
diff --git a/packages/components/package.json b/packages/components/package.json
index 86fdfde68d..c18a025671 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -17,17 +17,15 @@
       "import": "./dist/esm/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./styles": "./dist/styles.min.css"
+    "./styles": "./dist/index.css"
   },
   "engines": {
     "node": ">=16"
   },
   "scripts": {
-    "prebuild": "rm -rf dist && rm -rf shoreline && pnpm run theme",
+    "prebuild": "rm -rf dist",
     "dev": "tsup --watch",
-    "build": "npm run prebuild && tsup && npm run build:css",
-    "build:css": "lightningcss --minify --bundle --targets '>= 0.25%' ./src/styles.css -o ./dist/styles.min.css",
-    "theme": "shorelinecss theme"
+    "build": "tsup"
   },
   "repository": {
     "directory": "packages/admin-ui",
diff --git a/packages/components/src/action/stories/action.stories.tsx b/packages/components/src/action/stories/action.stories.tsx
index 5f99d36df8..596eaa3406 100644
--- a/packages/components/src/action/stories/action.stories.tsx
+++ b/packages/components/src/action/stories/action.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Action } from '../index'
diff --git a/packages/components/src/alert/alert.tsx b/packages/components/src/alert/alert.tsx
index ff22a9f829..c1e6394391 100644
--- a/packages/components/src/alert/alert.tsx
+++ b/packages/components/src/alert/alert.tsx
@@ -7,6 +7,7 @@ import {
 } from '@vtex/shoreline-icons'
 import type { ComponentPropsWithoutRef, MouseEventHandler } from 'react'
 import React, { forwardRef } from 'react'
+import './alert.css'
 
 import { IconButton } from '../icon-button'
 
diff --git a/packages/components/src/alert/stories/alert.stories.tsx b/packages/components/src/alert/stories/alert.stories.tsx
index 0754e20c13..fb8d37f7d0 100644
--- a/packages/components/src/alert/stories/alert.stories.tsx
+++ b/packages/components/src/alert/stories/alert.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../alert.css'
 import React, { useState } from 'react'
 
 import { Alert } from '../index'
diff --git a/packages/components/src/bleed/bleed.tsx b/packages/components/src/bleed/bleed.tsx
index b731bcd27f..c250c57d67 100644
--- a/packages/components/src/bleed/bleed.tsx
+++ b/packages/components/src/bleed/bleed.tsx
@@ -1,6 +1,7 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { cssVar } from '@vtex/shoreline-utils'
+import './bleed.css'
 
 const defaultBleed = '0rem'
 
diff --git a/packages/components/src/bleed/stories/bleed.stories.tsx b/packages/components/src/bleed/stories/bleed.stories.tsx
index 7d25290129..e32e1114d3 100644
--- a/packages/components/src/bleed/stories/bleed.stories.tsx
+++ b/packages/components/src/bleed/stories/bleed.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Bleed } from '../index'
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index 9292ce9cb5..719c0e7121 100644
--- a/packages/components/src/button/button.tsx
+++ b/packages/components/src/button/button.tsx
@@ -5,6 +5,7 @@ import { Button as BaseButton } from '@ariakit/react'
 import { Spinner } from '../spinner'
 import { Center } from '../center'
 import { Compose, Composable } from '../compose'
+import './button.css'
 
 /**
  * Buttons triggers allow users to identify and start the most important actions in a container.
diff --git a/packages/components/src/button/stories/button.stories.tsx b/packages/components/src/button/stories/button.stories.tsx
index f45c5a08a2..b35248c1c1 100644
--- a/packages/components/src/button/stories/button.stories.tsx
+++ b/packages/components/src/button/stories/button.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import './style.css'
 
 import React, { Fragment } from 'react'
diff --git a/packages/components/src/center/center.tsx b/packages/components/src/center/center.tsx
index 04f812288c..7ddad9f3fe 100644
--- a/packages/components/src/center/center.tsx
+++ b/packages/components/src/center/center.tsx
@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './center.css'
 
 export const Center = forwardRef<HTMLDivElement, CenterProps>(function Center(
   props,
diff --git a/packages/components/src/center/stories/center.stories.tsx b/packages/components/src/center/stories/center.stories.tsx
index fa5954f6c0..4a27c4f309 100644
--- a/packages/components/src/center/stories/center.stories.tsx
+++ b/packages/components/src/center/stories/center.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Center } from '../index'
diff --git a/packages/components/src/checkbox/checkbox.tsx b/packages/components/src/checkbox/checkbox.tsx
index d58e1c5fd7..aa7c98edd2 100644
--- a/packages/components/src/checkbox/checkbox.tsx
+++ b/packages/components/src/checkbox/checkbox.tsx
@@ -4,9 +4,9 @@ import { IconCheckSmall, IconMinusSmall } from '@vtex/shoreline-icons'
 
 import { VisuallyHidden } from '../visually-hidden'
 import { useAriaCheckbox } from './use-aria-checkbox'
-
 import type { AriaCheckboxProps } from './use-aria-checkbox'
 import { Text } from '../text'
+import './checkbox.css'
 
 /**
  * Checkbox controls allow users to make multiple independent choices in a form where there are at most five options and each option is binary.
diff --git a/packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx b/packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx
index 516d89a98f..844035baf8 100644
--- a/packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx
+++ b/packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../checkbox.css'
 import React, { useMemo, useState } from 'react'
 import { useForm, Controller } from 'react-hook-form'
 import { FixedSizeList } from 'react-window'
diff --git a/packages/components/src/checkbox/stories/checkbox.stories.tsx b/packages/components/src/checkbox/stories/checkbox.stories.tsx
index e2435a76dd..9976f4b992 100644
--- a/packages/components/src/checkbox/stories/checkbox.stories.tsx
+++ b/packages/components/src/checkbox/stories/checkbox.stories.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from 'react'
-import '../../../dist/styles.min.css'
-import '../checkbox.css'
 
 import { Checkbox, CheckboxField, CheckboxGroup } from '../index'
 import { VisuallyHidden } from '@ariakit/react'
diff --git a/packages/components/src/clickable/clickable.tsx b/packages/components/src/clickable/clickable.tsx
index 9b9555460e..18292e1304 100644
--- a/packages/components/src/clickable/clickable.tsx
+++ b/packages/components/src/clickable/clickable.tsx
@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Compose } from '../compose'
 import { hasSomeTextSelected } from '@vtex/shoreline-utils'
+import './clickable.css'
 
 /**
  * Represents clickable surfaces
diff --git a/packages/components/src/clickable/stories/clickable.stories.tsx b/packages/components/src/clickable/stories/clickable.stories.tsx
index e46afee569..9a0e81e526 100644
--- a/packages/components/src/clickable/stories/clickable.stories.tsx
+++ b/packages/components/src/clickable/stories/clickable.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../clickable.css'
 import React from 'react'
 
 import { Clickable, ClickableBubble } from '../index'
diff --git a/packages/components/src/combobox/stories/combobox.stories.tsx b/packages/components/src/combobox/stories/combobox.stories.tsx
index b466934b63..8923fef846 100644
--- a/packages/components/src/combobox/stories/combobox.stories.tsx
+++ b/packages/components/src/combobox/stories/combobox.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React, { startTransition, useMemo, useState } from 'react'
 import { matchSorter } from 'match-sorter'
 
diff --git a/packages/components/src/compose/stories/compose.stories.tsx b/packages/components/src/compose/stories/compose.stories.tsx
index 365333ce24..dc22c993f2 100644
--- a/packages/components/src/compose/stories/compose.stories.tsx
+++ b/packages/components/src/compose/stories/compose.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React, { useRef } from 'react'
 
 import { Compose, Composable } from '../index'
diff --git a/packages/components/src/content/content.tsx b/packages/components/src/content/content.tsx
index b9d515ab00..492a4a15a0 100644
--- a/packages/components/src/content/content.tsx
+++ b/packages/components/src/content/content.tsx
@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './content.css'
 
 import type { ContentContainerAs } from './types'
 
diff --git a/packages/components/src/content/stories/content.stories.tsx b/packages/components/src/content/stories/content.stories.tsx
index 1e536eadf9..600732147b 100644
--- a/packages/components/src/content/stories/content.stories.tsx
+++ b/packages/components/src/content/stories/content.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import './styles.css'
 
 import React from 'react'
diff --git a/packages/components/src/field/field.tsx b/packages/components/src/field/field.tsx
index 80caac71ac..fd53e3a9a3 100644
--- a/packages/components/src/field/field.tsx
+++ b/packages/components/src/field/field.tsx
@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './field.css'
 
 export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
   props,
diff --git a/packages/components/src/field/stories/field.stories.tsx b/packages/components/src/field/stories/field.stories.tsx
index f135a745a1..4f5899544d 100644
--- a/packages/components/src/field/stories/field.stories.tsx
+++ b/packages/components/src/field/stories/field.stories.tsx
@@ -1,13 +1,9 @@
-import '../../../dist/styles.min.css'
-import './style.css'
-import '../field.css'
-
 import React from 'react'
+import { Checkbox, Radio } from '@ariakit/react'
 
 import { Field, FieldLabel, FieldMessage } from '../index'
 import { Stack } from '../../stack'
-
-import { Checkbox, Radio } from '@ariakit/react'
+import './style.css'
 
 export default {
   title: 'shoreline-components/field',
diff --git a/packages/components/src/filter/filter.tsx b/packages/components/src/filter/filter.tsx
index de196b8a76..05a330ddfc 100644
--- a/packages/components/src/filter/filter.tsx
+++ b/packages/components/src/filter/filter.tsx
@@ -6,6 +6,7 @@ import { FilterTrigger } from './filter-trigger'
 import type { FilterPopoverProps } from './filter-popover'
 import { FilterPopover } from './filter-popover'
 import { FilterList } from './filter-list'
+import './filter.css'
 
 /**
  * Filter component
diff --git a/packages/components/src/filter/stories/filter.stories.tsx b/packages/components/src/filter/stories/filter.stories.tsx
index 96a8ccae2b..19090af334 100644
--- a/packages/components/src/filter/stories/filter.stories.tsx
+++ b/packages/components/src/filter/stories/filter.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../filter.css'
 import React, { useState, useMemo, startTransition } from 'react'
 import { matchSorter } from 'match-sorter'
 
diff --git a/packages/components/src/flex/flex.tsx b/packages/components/src/flex/flex.tsx
index 5545350d0d..ecf1bc8a87 100644
--- a/packages/components/src/flex/flex.tsx
+++ b/packages/components/src/flex/flex.tsx
@@ -1,6 +1,7 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import type { CSSProperty } from '@vtex/shoreline-utils'
+import './flex.css'
 
 export const Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
   props,
diff --git a/packages/components/src/flex/stories/flex.stories.tsx b/packages/components/src/flex/stories/flex.stories.tsx
index bede22e10f..dfff98715a 100644
--- a/packages/components/src/flex/stories/flex.stories.tsx
+++ b/packages/components/src/flex/stories/flex.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Flex } from '../index'
diff --git a/packages/components/src/grid/grid.tsx b/packages/components/src/grid/grid.tsx
index 553d373be0..4d3d22936f 100644
--- a/packages/components/src/grid/grid.tsx
+++ b/packages/components/src/grid/grid.tsx
@@ -1,6 +1,7 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import type { CSSProperty } from '@vtex/shoreline-utils'
+import './grid.css'
 
 export const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
   props,
diff --git a/packages/components/src/grid/stories/grid.stories.tsx b/packages/components/src/grid/stories/grid.stories.tsx
index d8613fbd3a..5c57026930 100644
--- a/packages/components/src/grid/stories/grid.stories.tsx
+++ b/packages/components/src/grid/stories/grid.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Grid, GridCell } from '../index'
diff --git a/packages/components/src/icon-button/icon-button.tsx b/packages/components/src/icon-button/icon-button.tsx
index 98b70b4b1b..b240d6bf78 100644
--- a/packages/components/src/icon-button/icon-button.tsx
+++ b/packages/components/src/icon-button/icon-button.tsx
@@ -4,6 +4,7 @@ import React, { forwardRef } from 'react'
 import type { ButtonProps } from '../button'
 import { Button } from '../button'
 import { AccessibleIcon } from '../accessible-icon'
+import './icon-button.css'
 
 /**
  * A button designed specifically for usage with a single icon.
diff --git a/packages/components/src/icon-button/stories/icon-button.stories.tsx b/packages/components/src/icon-button/stories/icon-button.stories.tsx
index 0a130fab80..8307987bbf 100644
--- a/packages/components/src/icon-button/stories/icon-button.stories.tsx
+++ b/packages/components/src/icon-button/stories/icon-button.stories.tsx
@@ -1,11 +1,8 @@
-import '../../../dist/styles.min.css'
-
 import React, { useState } from 'react'
-import { IconButton } from '../index'
-import { Stack } from '../../stack'
 import { IconTrash } from '@vtex/shoreline-icons'
-
 import { AccessibleIcon } from '../../accessible-icon'
+import { Stack } from '../../stack'
+import { IconButton } from '../index'
 
 export default {
   title: 'shoreline-components/icon-button',
diff --git a/packages/components/src/link-box/link-box.tsx b/packages/components/src/link-box/link-box.tsx
index 85bad97782..79fa1c0f6a 100644
--- a/packages/components/src/link-box/link-box.tsx
+++ b/packages/components/src/link-box/link-box.tsx
@@ -5,6 +5,7 @@ import type { ClickableProps } from '../clickable'
 import { Clickable } from '../clickable'
 import type { NavigationTarget } from './link-box-utils'
 import { navigate } from './link-box-utils'
+import './link-box.css'
 
 /**
  * A container that acts as a link. It allows text selection and stop its children event propagation.
diff --git a/packages/components/src/link-box/stories/link-box.stories.tsx b/packages/components/src/link-box/stories/link-box.stories.tsx
index 4094d8e281..f6bf246900 100644
--- a/packages/components/src/link-box/stories/link-box.stories.tsx
+++ b/packages/components/src/link-box/stories/link-box.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../link-box.css'
 import React from 'react'
 import { Button } from '../../button'
 import { Menu, MenuTrigger, MenuItem, MenuProvider } from '../../menu'
diff --git a/packages/components/src/link/link.tsx b/packages/components/src/link/link.tsx
index 54d94f7b80..70eaf2c353 100644
--- a/packages/components/src/link/link.tsx
+++ b/packages/components/src/link/link.tsx
@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 
 import { Compose } from '../compose'
+import './link.css'
 
 /**
  * Anchor component
diff --git a/packages/components/src/link/stories/link.stories.tsx b/packages/components/src/link/stories/link.stories.tsx
index 3eefe7e71e..543a9e0ccb 100644
--- a/packages/components/src/link/stories/link.stories.tsx
+++ b/packages/components/src/link/stories/link.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../link.css'
 import React from 'react'
 
 import { Link } from '../index'
diff --git a/packages/components/src/menu/menu.tsx b/packages/components/src/menu/menu.tsx
index 4dbe78c361..4e22d94c83 100644
--- a/packages/components/src/menu/menu.tsx
+++ b/packages/components/src/menu/menu.tsx
@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Menu as BaseMenu } from '@ariakit/react'
+import './menu.css'
 
 export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
   props,
diff --git a/packages/components/src/menu/stories/menu.stories.tsx b/packages/components/src/menu/stories/menu.stories.tsx
index c86feec95e..ea4f047afd 100644
--- a/packages/components/src/menu/stories/menu.stories.tsx
+++ b/packages/components/src/menu/stories/menu.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../menu.css'
 import React from 'react'
 import {
   IconCaretDown,
diff --git a/packages/components/src/modal/modal.tsx b/packages/components/src/modal/modal.tsx
index a77f6e09db..ae5c1970d9 100644
--- a/packages/components/src/modal/modal.tsx
+++ b/packages/components/src/modal/modal.tsx
@@ -1,7 +1,9 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Dialog } from '@ariakit/react'
+
 import { Container } from '../content'
+import './modal.css'
 
 export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
   props,
diff --git a/packages/components/src/modal/stories/modal.stories.tsx b/packages/components/src/modal/stories/modal.stories.tsx
index af5c34bb8d..c79e288b03 100644
--- a/packages/components/src/modal/stories/modal.stories.tsx
+++ b/packages/components/src/modal/stories/modal.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../modal.css'
 import React, { useState } from 'react'
 
 import { Modal, ModalHeader } from '../index'
diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx
index 66afc692ff..8881a7b9df 100644
--- a/packages/components/src/pagination/pagination.tsx
+++ b/packages/components/src/pagination/pagination.tsx
@@ -10,6 +10,7 @@ import {
 import { AccessibleIcon } from '../accessible-icon'
 import { VisuallyHidden } from '../visually-hidden'
 import { useId } from '@vtex/shoreline-utils'
+import './pagination.css'
 
 /**
  * Pagination triggers allow merchants to view the size of a list and navigate between pages.
diff --git a/packages/components/src/pagination/stories/pagination.stories.tsx b/packages/components/src/pagination/stories/pagination.stories.tsx
index c5f0880616..6adac42634 100644
--- a/packages/components/src/pagination/stories/pagination.stories.tsx
+++ b/packages/components/src/pagination/stories/pagination.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../pagination.css'
 import './style.css'
 import React, { useState } from 'react'
 
diff --git a/packages/components/src/popover/popover.tsx b/packages/components/src/popover/popover.tsx
index 42a7bfe121..36ab8ac6e4 100644
--- a/packages/components/src/popover/popover.tsx
+++ b/packages/components/src/popover/popover.tsx
@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Popover as BasePopover } from '@ariakit/react'
 import { Container } from '../content'
+import './popover.css'
 
 /**
  * Popover containers allow merchants to access and interact with more
diff --git a/packages/components/src/popover/stories/popover.stories.tsx b/packages/components/src/popover/stories/popover.stories.tsx
index 2307d9d0cf..83d973e84b 100644
--- a/packages/components/src/popover/stories/popover.stories.tsx
+++ b/packages/components/src/popover/stories/popover.stories.tsx
@@ -1,7 +1,5 @@
 import React from 'react'
 
-import '../../../dist/styles.min.css'
-import '../popover.css'
 import './styles.css'
 
 import { Content } from '../../content'
diff --git a/packages/components/src/radio/radio-group.tsx b/packages/components/src/radio/radio-group.tsx
index 85a0704633..dddb865a03 100644
--- a/packages/components/src/radio/radio-group.tsx
+++ b/packages/components/src/radio/radio-group.tsx
@@ -9,6 +9,7 @@ import {
 import { Field, FieldLabel, FieldMessage } from '../field'
 import { Stack } from '../stack'
 import { useId } from '@vtex/shoreline-utils'
+import './radio-group.css'
 
 export const RadioGroup = forwardRef<HTMLInputElement, RadioGroupProps>(
   function Radio(props, ref) {
diff --git a/packages/components/src/radio/radio.css b/packages/components/src/radio/radio.css
index 6ba2aee2ae..9688046aec 100644
--- a/packages/components/src/radio/radio.css
+++ b/packages/components/src/radio/radio.css
@@ -22,7 +22,7 @@
 
       &:hover {
         border: var(--sl-element-border-hover);
-      };
+      }
 
       &:checked {
         background-color: var(--sl-element-bg-checked);
@@ -30,7 +30,7 @@
 
         &:hover {
           border: var(--sl-element-border-checked);
-        };
+        }
 
         &:after {
           background-color: var(--sl-element-check-bg);
@@ -42,7 +42,7 @@
       }
 
       &:after {
-        content: "";
+        content: '';
         width: 0.5rem;
         height: 0.5rem;
         display: block;
@@ -84,5 +84,5 @@
         --sl-element-focus-ring-checked: none;
       }
     }
-  };
+  }
 }
diff --git a/packages/components/src/radio/radio.tsx b/packages/components/src/radio/radio.tsx
index 041ad5b6d5..8b62d3924e 100644
--- a/packages/components/src/radio/radio.tsx
+++ b/packages/components/src/radio/radio.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react'
 import { Radio as BaseRadio } from '@ariakit/react'
 import { Field, FieldLabel } from '../field'
 import { useId } from '@vtex/shoreline-utils'
+import './radio.css'
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
   props,
diff --git a/packages/components/src/radio/stories/radio.stories.tsx b/packages/components/src/radio/stories/radio.stories.tsx
index 9139e324b9..2b52843adb 100644
--- a/packages/components/src/radio/stories/radio.stories.tsx
+++ b/packages/components/src/radio/stories/radio.stories.tsx
@@ -1,7 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../radio.css'
-import '../radio-group.css'
-import '../../field/field.css'
 import React, { useEffect, useState } from 'react'
 
 import { Radio, RadioGroup, useRadioState } from '../index'
diff --git a/packages/components/src/scroll-area/scroll-area.tsx b/packages/components/src/scroll-area/scroll-area.tsx
index 4ae1814bb8..4ae1679ea0 100644
--- a/packages/components/src/scroll-area/scroll-area.tsx
+++ b/packages/components/src/scroll-area/scroll-area.tsx
@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Root, Viewport, Scrollbar, Thumb } from '@radix-ui/react-scroll-area'
+import './scroll-area.css'
 
 /**
  * Cross-browser scroll styling
diff --git a/packages/components/src/scroll-area/stories/scroll-area.stories.tsx b/packages/components/src/scroll-area/stories/scroll-area.stories.tsx
index c4e787e76f..4558d22860 100644
--- a/packages/components/src/scroll-area/stories/scroll-area.stories.tsx
+++ b/packages/components/src/scroll-area/stories/scroll-area.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../scroll-area.css'
 import React from 'react'
 
 import { ScrollArea } from '../index'
diff --git a/packages/components/src/search/search.tsx b/packages/components/src/search/search.tsx
index 9bcb12959c..573a6681cc 100644
--- a/packages/components/src/search/search.tsx
+++ b/packages/components/src/search/search.tsx
@@ -5,6 +5,7 @@ import { IconMagnifyingGlassSmall, IconXCircle } from '@vtex/shoreline-icons'
 import { useId } from '@vtex/shoreline-utils'
 import { Spinner } from '../spinner'
 import { VisuallyHidden } from '../visually-hidden'
+import './search.css'
 
 export const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(
   props,
diff --git a/packages/components/src/search/stories/search.stories.tsx b/packages/components/src/search/stories/search.stories.tsx
index 9595ed7043..ae085833d4 100644
--- a/packages/components/src/search/stories/search.stories.tsx
+++ b/packages/components/src/search/stories/search.stories.tsx
@@ -1,6 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../search.css'
-
 import React from 'react'
 
 import { Search } from '../index'
diff --git a/packages/components/src/select-field/select-field.tsx b/packages/components/src/select-field/select-field.tsx
index abdf38e45d..4cfd70f759 100644
--- a/packages/components/src/select-field/select-field.tsx
+++ b/packages/components/src/select-field/select-field.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react'
 import { Field, FieldLabel, FieldMessage } from '../field'
 import { IconCaretUpDownSmall } from '@vtex/shoreline-icons'
 import { useId } from '@vtex/shoreline-utils'
+import './select-field.css'
 
 /**
  * Select fields allow merchants to choose a single option from a list
diff --git a/packages/components/src/select-field/stories/select-field.stories.tsx b/packages/components/src/select-field/stories/select-field.stories.tsx
index 2f9a2f8104..633d868f96 100644
--- a/packages/components/src/select-field/stories/select-field.stories.tsx
+++ b/packages/components/src/select-field/stories/select-field.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../select-field.css'
 import './style.css'
 
 import React, { useState } from 'react'
diff --git a/packages/components/src/select/select.tsx b/packages/components/src/select/select.tsx
index e48aee554e..59627f59f7 100644
--- a/packages/components/src/select/select.tsx
+++ b/packages/components/src/select/select.tsx
@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Select as SelectTrigger } from '@ariakit/react'
+import './select.css'
 
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
   function Select(props, ref) {
diff --git a/packages/components/src/select/stories/select.stories.tsx b/packages/components/src/select/stories/select.stories.tsx
index ee9de5edbc..8b090cfbac 100644
--- a/packages/components/src/select/stories/select.stories.tsx
+++ b/packages/components/src/select/stories/select.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../select.css'
 import React, { startTransition, useMemo, useState } from 'react'
 import { matchSorter } from 'match-sorter'
 
diff --git a/packages/components/src/simple-table/simple-table.tsx b/packages/components/src/simple-table/simple-table.tsx
index 052b710583..81078423dd 100644
--- a/packages/components/src/simple-table/simple-table.tsx
+++ b/packages/components/src/simple-table/simple-table.tsx
@@ -28,6 +28,7 @@ import type { NavigationTarget } from '../link-box/link-box-utils'
 import { LinkBox } from '../link-box'
 import { Clickable } from '../clickable'
 import { IconArrowDown, IconArrowUp } from '@vtex/shoreline-icons'
+import './simple-table.css'
 
 /**
  * Controlled table render built on top of TanStack/Table API
diff --git a/packages/components/src/simple-table/stories/clickable-rows.stories.tsx b/packages/components/src/simple-table/stories/clickable-rows.stories.tsx
index 136c57062e..43661e1cde 100644
--- a/packages/components/src/simple-table/stories/clickable-rows.stories.tsx
+++ b/packages/components/src/simple-table/stories/clickable-rows.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import React, { useMemo } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
 import { SimpleTable } from '../index'
diff --git a/packages/components/src/simple-table/stories/custom-column-widths.stories.tsx b/packages/components/src/simple-table/stories/custom-column-widths.stories.tsx
index 67cb685e5b..f507f5a092 100644
--- a/packages/components/src/simple-table/stories/custom-column-widths.stories.tsx
+++ b/packages/components/src/simple-table/stories/custom-column-widths.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import React, { useMemo } from 'react'
 import {
   IconCloudArrowUp,
diff --git a/packages/components/src/simple-table/stories/detail.stories.tsx b/packages/components/src/simple-table/stories/detail.stories.tsx
index ff03b12f72..611a406da8 100644
--- a/packages/components/src/simple-table/stories/detail.stories.tsx
+++ b/packages/components/src/simple-table/stories/detail.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import React, { useMemo } from 'react'
 import {
   IconCaretDown,
diff --git a/packages/components/src/simple-table/stories/fixed-first-column.stories.tsx b/packages/components/src/simple-table/stories/fixed-first-column.stories.tsx
index eed149cd48..7630171fb7 100644
--- a/packages/components/src/simple-table/stories/fixed-first-column.stories.tsx
+++ b/packages/components/src/simple-table/stories/fixed-first-column.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import React, { useMemo } from 'react'
 import {
   IconCloudArrowUp,
diff --git a/packages/components/src/simple-table/stories/pagination.stories.tsx b/packages/components/src/simple-table/stories/pagination.stories.tsx
index 04c0452824..a2b5e54d51 100644
--- a/packages/components/src/simple-table/stories/pagination.stories.tsx
+++ b/packages/components/src/simple-table/stories/pagination.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import React, { useEffect, useMemo, useState } from 'react'
 import {
   IconCloudArrowUp,
diff --git a/packages/components/src/simple-table/stories/row-links.stories.tsx b/packages/components/src/simple-table/stories/row-links.stories.tsx
index d48e90b9bf..effb09afb8 100644
--- a/packages/components/src/simple-table/stories/row-links.stories.tsx
+++ b/packages/components/src/simple-table/stories/row-links.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import React, { useMemo } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
 import { SimpleTable } from '../index'
diff --git a/packages/components/src/simple-table/stories/selection.stories.tsx b/packages/components/src/simple-table/stories/selection.stories.tsx
index 54d512542c..1159e87ce3 100644
--- a/packages/components/src/simple-table/stories/selection.stories.tsx
+++ b/packages/components/src/simple-table/stories/selection.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import type { HTMLProps } from 'react'
 import React, { useMemo } from 'react'
 import {
diff --git a/packages/components/src/simple-table/stories/simple-table.stories.tsx b/packages/components/src/simple-table/stories/simple-table.stories.tsx
index 02c2eeb304..5d33d2cb4c 100644
--- a/packages/components/src/simple-table/stories/simple-table.stories.tsx
+++ b/packages/components/src/simple-table/stories/simple-table.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import type { HTMLProps } from 'react'
 import React, { useMemo } from 'react'
 import {
diff --git a/packages/components/src/simple-table/stories/sorting.stories.tsx b/packages/components/src/simple-table/stories/sorting.stories.tsx
index 14dedda231..12e1204e07 100644
--- a/packages/components/src/simple-table/stories/sorting.stories.tsx
+++ b/packages/components/src/simple-table/stories/sorting.stories.tsx
@@ -1,6 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
-
 import React, { useMemo, useState } from 'react'
 import type { ColumnDef, SortingState } from '@tanstack/react-table'
 
diff --git a/packages/components/src/simple-table/stories/sticky-header.stories.tsx b/packages/components/src/simple-table/stories/sticky-header.stories.tsx
index edf085cb54..de0e6ab495 100644
--- a/packages/components/src/simple-table/stories/sticky-header.stories.tsx
+++ b/packages/components/src/simple-table/stories/sticky-header.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import React, { useMemo } from 'react'
 import {
   IconCloudArrowUp,
diff --git a/packages/components/src/simple-table/stories/table-nesting.stories.tsx b/packages/components/src/simple-table/stories/table-nesting.stories.tsx
index 135d49ca93..3cd593ab4e 100644
--- a/packages/components/src/simple-table/stories/table-nesting.stories.tsx
+++ b/packages/components/src/simple-table/stories/table-nesting.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../simple-table.css'
 import React, { useMemo } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
 
diff --git a/packages/components/src/skeleton/skeleton.tsx b/packages/components/src/skeleton/skeleton.tsx
index f7104a77f8..32756d91d2 100644
--- a/packages/components/src/skeleton/skeleton.tsx
+++ b/packages/components/src/skeleton/skeleton.tsx
@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './skeleton.css'
 
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
   function Skeleton(props, ref) {
diff --git a/packages/components/src/skeleton/stories/skeleton.stories.tsx b/packages/components/src/skeleton/stories/skeleton.stories.tsx
index b41279b890..3147940d15 100644
--- a/packages/components/src/skeleton/stories/skeleton.stories.tsx
+++ b/packages/components/src/skeleton/stories/skeleton.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../skeleton.css'
 import React from 'react'
 
 import { Skeleton } from '../index'
diff --git a/packages/components/src/spinner/spinner.tsx b/packages/components/src/spinner/spinner.tsx
index 6fde9eb776..0a7fc8f1da 100644
--- a/packages/components/src/spinner/spinner.tsx
+++ b/packages/components/src/spinner/spinner.tsx
@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './spinner.css'
 
 const DEFAULT_SIZE = 16
 const DEFAULT_DESCRIPTION = 'loading'
diff --git a/packages/components/src/spinner/stories/spinner.stories.tsx b/packages/components/src/spinner/stories/spinner.stories.tsx
index 15cee39bfd..e0def680b2 100644
--- a/packages/components/src/spinner/stories/spinner.stories.tsx
+++ b/packages/components/src/spinner/stories/spinner.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Spinner } from '../index'
diff --git a/packages/components/src/stack/stack.tsx b/packages/components/src/stack/stack.tsx
index 17c717c134..3c3abc8894 100644
--- a/packages/components/src/stack/stack.tsx
+++ b/packages/components/src/stack/stack.tsx
@@ -1,6 +1,7 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { cssVar } from '@vtex/shoreline-utils'
+import './stack.css'
 
 export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
   props,
diff --git a/packages/components/src/stack/stories/stack.stories.tsx b/packages/components/src/stack/stories/stack.stories.tsx
index b6907d9364..3b651f8cb8 100644
--- a/packages/components/src/stack/stories/stack.stories.tsx
+++ b/packages/components/src/stack/stories/stack.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Stack } from '../index'
diff --git a/packages/components/src/styles.css b/packages/components/src/styles.css
deleted file mode 100644
index 865e412b26..0000000000
--- a/packages/components/src/styles.css
+++ /dev/null
@@ -1,37 +0,0 @@
-@import '../shoreline/styles.css';
-/* PLOP_INJECT_STYLES */
-@import './skeleton/skeleton.css';
-@import './tab/tab.css';
-@import './tooltip/tooltip.css';
-@import './filter/filter.css';
-@import './scroll-area/scroll-area.css';
-@import './select/select.css';
-@import './clickable/clickable.css';
-@import './link/link.css';
-@import './link-box/link-box.css';
-@import './pagination/pagination.css';
-@import './modal/modal.css';
-@import './popover/popover.css';
-@import './checkbox/checkbox.css';
-@import './simple-table/simple-table.css';
-@import './alert/alert.css';
-@import './tag/tag.css';
-@import './search/search.css';
-@import './table/table.css';
-@import './menu/menu.css';
-@import './select-field/select-field.css';
-@import './radio/radio.css';
-@import './radio/radio-group.css';
-@import './bleed/bleed.css';
-@import './button/button.css';
-@import './center/center.css';
-@import './content/content.css';
-@import './flex/flex.css';
-@import './grid/grid.css';
-@import './icon-button/icon-button.css';
-@import './spinner/spinner.css';
-@import './stack/stack.css';
-@import './text/text.css';
-@import './text-input/text-input.css';
-@import './field/field.css';
-@import './textarea/textarea.css';
diff --git a/packages/components/src/tab/stories/tab.stories.tsx b/packages/components/src/tab/stories/tab.stories.tsx
index 01650ba5a5..bf3809c88f 100644
--- a/packages/components/src/tab/stories/tab.stories.tsx
+++ b/packages/components/src/tab/stories/tab.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import '../tab.css'
 import React from 'react'
 
diff --git a/packages/components/src/tab/tab.tsx b/packages/components/src/tab/tab.tsx
index 8f263c611c..7cf75bc829 100644
--- a/packages/components/src/tab/tab.tsx
+++ b/packages/components/src/tab/tab.tsx
@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Tab as BaseTab } from '@ariakit/react'
+import './tab.css'
 
 /**
  * @example
diff --git a/packages/components/src/table/stories/table.stories.tsx b/packages/components/src/table/stories/table.stories.tsx
index 9a06d4957d..cdbbf8d134 100644
--- a/packages/components/src/table/stories/table.stories.tsx
+++ b/packages/components/src/table/stories/table.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../table.css'
 import React from 'react'
 
 import {
diff --git a/packages/components/src/table/table.tsx b/packages/components/src/table/table.tsx
index 73daa2dd44..b6156ab335 100644
--- a/packages/components/src/table/table.tsx
+++ b/packages/components/src/table/table.tsx
@@ -2,6 +2,7 @@ import { constants } from '@vtex/shoreline-utils'
 import type { ComponentPropsWithoutRef, CSSProperties } from 'react'
 import React, { forwardRef } from 'react'
 import { Compose } from '../compose'
+import './table.css'
 
 export const Table = forwardRef<HTMLDivElement, TableProps>(function Table(
   props,
diff --git a/packages/components/src/tag/stories/tag.stories.tsx b/packages/components/src/tag/stories/tag.stories.tsx
index 5f42fb3738..3d0360152b 100644
--- a/packages/components/src/tag/stories/tag.stories.tsx
+++ b/packages/components/src/tag/stories/tag.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../tag.css'
 import React from 'react'
 
 import { Tag } from '../index'
diff --git a/packages/components/src/tag/tag.tsx b/packages/components/src/tag/tag.tsx
index 3f44d940da..b843cdaa95 100644
--- a/packages/components/src/tag/tag.tsx
+++ b/packages/components/src/tag/tag.tsx
@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './tag.css'
 
 export const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(
   props,
diff --git a/packages/components/src/text-input/stories/text-input.stories.tsx b/packages/components/src/text-input/stories/text-input.stories.tsx
index 084b11b54c..11729f2ebb 100644
--- a/packages/components/src/text-input/stories/text-input.stories.tsx
+++ b/packages/components/src/text-input/stories/text-input.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-
 import React from 'react'
 
 import { TextInput } from '../index'
diff --git a/packages/components/src/text-input/text-input.css b/packages/components/src/text-input/text-input.css
index 4d702fffd4..fea1bbe707 100644
--- a/packages/components/src/text-input/text-input.css
+++ b/packages/components/src/text-input/text-input.css
@@ -1,5 +1,5 @@
 @layer sl-components {
-  [data-sl-text-input]{
+  [data-sl-text-input] {
     font: var(--sl-text-body-font);
     letter-spacing: var(--sl-text-body-letter-spacing);
   }
@@ -15,35 +15,35 @@
     border: var(--sl-border-strong);
     &:hover {
       border: var(--sl-border-strong-hover);
-    };
+    }
     &:focus-within {
       box-shadow: var(--sl-focus-ring);
-    };
+    }
 
     &[data-error='true'] {
       border: var(--sl-border-critical-strong);
 
       &:hover {
         border: var(--sl-border-critical-strong-hover);
-      };
+      }
       &:focus-within {
         box-shadow: var(--sl-focus-ring-critical);
-      };
-    };
+      }
+    }
     &[data-disabled='true'] {
       border: var(--sl-border-disabled);
       background-color: var(--sl-bg-disabled);
-    };
+    }
     & > [data-sl-text-input-term] {
       padding: var(--sl-space-3) var(--sl-space-4);
       height: 100%;
       &[data-type='prefix'] {
-        border-right:  var(--sl-border);
-      };
+        border-right: var(--sl-border);
+      }
       &[data-type='suffix'] {
-        border-left:  var(--sl-border);
-      };
-    };
+        border-left: var(--sl-border);
+      }
+    }
     & > [data-sl-input] {
       padding-left: var(--sl-space-4);
       padding-right: var(--sl-space-4);
@@ -52,8 +52,7 @@
       background-color: unset;
       &:focus {
         outline: none;
-      };
-    };
-  };
+      }
+    }
+  }
 }
-
diff --git a/packages/components/src/text-input/text-input.tsx b/packages/components/src/text-input/text-input.tsx
index 08492c44ea..c018149a3f 100644
--- a/packages/components/src/text-input/text-input.tsx
+++ b/packages/components/src/text-input/text-input.tsx
@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Field, FieldLabel, FieldMessage } from '../field'
 import { useId } from '@vtex/shoreline-utils'
+import './text-input.css'
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
   function TextInput(props, ref) {
diff --git a/packages/components/src/text/stories/text.stories.tsx b/packages/components/src/text/stories/text.stories.tsx
index ecfde3858d..e8eba38655 100644
--- a/packages/components/src/text/stories/text.stories.tsx
+++ b/packages/components/src/text/stories/text.stories.tsx
@@ -1,8 +1,6 @@
-import '../../../dist/styles.min.css'
 import React, { useRef } from 'react'
 
 import { Text } from '../index'
-
 import { Stack } from '../../stack'
 
 export default {
diff --git a/packages/components/src/text/text.tsx b/packages/components/src/text/text.tsx
index 914129b894..21cc3cd28b 100644
--- a/packages/components/src/text/text.tsx
+++ b/packages/components/src/text/text.tsx
@@ -1,6 +1,7 @@
 import type { AnyObject } from '@vtex/shoreline-utils'
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './text.css'
 
 export const Text = forwardRef(function Text(props: TextProps, ref: any) {
   const { children, variant = 'body', ...otherProps } = props
diff --git a/packages/components/src/textarea/stories/textarea.stories.tsx b/packages/components/src/textarea/stories/textarea.stories.tsx
index ef89a6def0..35209379bc 100644
--- a/packages/components/src/textarea/stories/textarea.stories.tsx
+++ b/packages/components/src/textarea/stories/textarea.stories.tsx
@@ -1,7 +1,5 @@
-import '../../../dist/styles.min.css'
 import './style.css'
 import React from 'react'
-import '../textarea.css'
 
 import { Textarea } from '../index'
 import { Stack } from '../../stack'
diff --git a/packages/components/src/textarea/textarea.tsx b/packages/components/src/textarea/textarea.tsx
index ba55ecf8e7..6d1e01fa0e 100644
--- a/packages/components/src/textarea/textarea.tsx
+++ b/packages/components/src/textarea/textarea.tsx
@@ -5,6 +5,7 @@ import { useId } from '@vtex/shoreline-utils'
 import { Field, FieldLabel } from '../field'
 import { Stack } from '../stack'
 import { Grid } from '../grid'
+import './textarea.css'
 
 export const Textarea = forwardRef<HTMLDivElement, TextareaProps>(
   function Textarea(props, ref) {
diff --git a/packages/components/src/tooltip/stories/tooltip.stories.tsx b/packages/components/src/tooltip/stories/tooltip.stories.tsx
index d8836c510d..5d1d06e975 100644
--- a/packages/components/src/tooltip/stories/tooltip.stories.tsx
+++ b/packages/components/src/tooltip/stories/tooltip.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../tooltip.css'
 import React, { useState } from 'react'
 
 import {
diff --git a/packages/components/src/tooltip/tooltip.tsx b/packages/components/src/tooltip/tooltip.tsx
index e97b38168e..d1c69649d5 100644
--- a/packages/components/src/tooltip/tooltip.tsx
+++ b/packages/components/src/tooltip/tooltip.tsx
@@ -6,6 +6,7 @@ import { TooltipProvider } from './tooltip-provider'
 import { TooltipAnchor } from './tooltip-anchor'
 import { TooltipPopover } from './tooltip-popover'
 import { TooltipArrow } from './tooltip-arrow'
+import './tooltip.css'
 
 /**
  * Tooltip component
diff --git a/packages/components/src/visually-hidden/stories/visually-hidden.stories.tsx b/packages/components/src/visually-hidden/stories/visually-hidden.stories.tsx
index 4b9a10989e..8f28d7d13f 100644
--- a/packages/components/src/visually-hidden/stories/visually-hidden.stories.tsx
+++ b/packages/components/src/visually-hidden/stories/visually-hidden.stories.tsx
@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 import type { Meta } from '@storybook/react'
 
diff --git a/packages/tokens/.gitignore b/packages/tokens/.gitignore
new file mode 100644
index 0000000000..b2088288e5
--- /dev/null
+++ b/packages/tokens/.gitignore
@@ -0,0 +1,2 @@
+# Shoreline styles
+shoreline
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
new file mode 100644
index 0000000000..62b2b8c252
--- /dev/null
+++ b/packages/tokens/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@vtex/shoreline-tokens",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.min.css"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "prebuild": "rm -rf dist && rm -rf shoreline && pnpm run theme",
+    "dev": "tsup --watch",
+    "build": "npm run prebuild && tsup && npm run build:css",
+    "build:css": "lightningcss --minify --bundle --targets '>= 0.25%' ./src/styles.css -o ./dist/styles.min.css",
+    "theme": "shorelinecss theme"
+  },
+  "repository": {
+    "directory": "packages/admin-ui",
+    "type": "git",
+    "url": "git+https://github.com/vtex/admin-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vtex/admin-ui/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@vtex/shoreline-cli": "workspace",
+    "@vtex/shoreline-preset-admin": "workspace",
+    "@vtex/shoreline-theme": "workspace",
+    "lightningcss-cli": "1.22.0",
+    "tsup": "7.2.0"
+  }
+}
diff --git a/packages/components/shoreline.config.ts b/packages/tokens/shoreline.config.ts
similarity index 100%
rename from packages/components/shoreline.config.ts
rename to packages/tokens/shoreline.config.ts
diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts
new file mode 100644
index 0000000000..e670651d52
--- /dev/null
+++ b/packages/tokens/src/index.ts
@@ -0,0 +1,2 @@
+// TODO: Export theme as Object: https://github.com/vtex/shoreline/issues/1281.
+export const theme = {}
diff --git a/packages/tokens/src/styles.css b/packages/tokens/src/styles.css
new file mode 100644
index 0000000000..61cb3264f2
--- /dev/null
+++ b/packages/tokens/src/styles.css
@@ -0,0 +1 @@
+@import '../shoreline/styles.css';
diff --git a/packages/tokens/tsconfig.json b/packages/tokens/tsconfig.json
new file mode 100644
index 0000000000..9907687682
--- /dev/null
+++ b/packages/tokens/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "declarations"
+  },
+  "include": ["./src"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/*test-utils*"
+  ]
+}
diff --git a/packages/tokens/tsup.config.ts b/packages/tokens/tsup.config.ts
new file mode 100644
index 0000000000..7bed58a5aa
--- /dev/null
+++ b/packages/tokens/tsup.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  external: ['react'],
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  dts: true,
+  legacyOutput: true,
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cee2db254d..247194ef98 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -852,6 +852,31 @@ importers:
         specifier: 7.1.0
         version: 7.1.0(@swc/core@1.2.241)(postcss@8.4.27)(typescript@4.9.5)
 
+  packages/tokens:
+    dependencies:
+      react:
+        specifier: '>=18'
+        version: 18.2.0
+      react-dom:
+        specifier: '>=18'
+        version: 18.2.0(react@18.2.0)
+    devDependencies:
+      '@vtex/shoreline-cli':
+        specifier: workspace
+        version: link:../cli
+      '@vtex/shoreline-preset-admin':
+        specifier: workspace
+        version: link:../shoreline-preset-admin
+      '@vtex/shoreline-theme':
+        specifier: workspace
+        version: link:../theme
+      lightningcss-cli:
+        specifier: 1.22.0
+        version: 1.22.0
+      tsup:
+        specifier: 7.2.0
+        version: 7.2.0(@swc/core@1.2.241)(postcss@8.4.27)(typescript@4.9.5)
+
   packages/utils:
     dependencies:
       csstype:
diff --git a/templates/component/stories/component.stories.tsx.hbs b/templates/component/stories/component.stories.tsx.hbs
index 888f257394..1d55ab94e5 100644
--- a/templates/component/stories/component.stories.tsx.hbs
+++ b/templates/component/stories/component.stories.tsx.hbs
@@ -1,4 +1,4 @@
-import '../../../dist/styles.min.css'
+
 import '../{{kebabCase name}}.css'
 import React from 'react'