From 4006f2fb5198c79adb2eae671bbdea782c02dd2d Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Mon, 9 Sep 2024 10:53:36 +0800
Subject: [PATCH] comment out failing ve properties

---
 .../src/components/atoms/Avatar/Avatar.tsx    |  61 ++--
 .../atoms/BackdropSurface/BackdropSurface.tsx |   6 +-
 .../src/components/atoms/Banner/Banner.tsx    |  60 +--
 components/src/components/atoms/Box/Box.tsx   |  12 +-
 .../src/components/atoms/Button/Button.tsx    | 172 +++++----
 .../atoms/DynamicPopover/DynamicPopover.tsx   |  12 +-
 .../src/components/atoms/Field/Field.tsx      |  20 +-
 .../src/components/atoms/Heading/Heading.tsx  |   6 +-
 .../atoms/RecordItem/RecordItem.tsx           |  20 +-
 .../src/components/atoms/Spinner/Spinner.tsx  |  18 +-
 components/src/components/atoms/Tag/Tag.tsx   |  30 +-
 .../molecules/Checkbox/Checkbox.tsx           |  30 +-
 .../molecules/CheckboxRow/CheckboxRow.tsx     |  37 +-
 .../CountdownCircle/CountdownCircle.tsx       |  48 ++-
 .../CurrencyToggle/CurrencyToggle.tsx         |  34 +-
 .../molecules/Dropdown/Dropdown.tsx           |  82 ++---
 .../molecules/FieldSet/FieldSet.tsx           |   2 +-
 .../components/molecules/Helper/Helper.tsx    |  14 +-
 .../src/components/molecules/Input/Input.tsx  | 132 +++----
 .../src/components/molecules/Modal/Modal.tsx  |  58 +--
 .../molecules/PageButtons/PageButtons.tsx     |  22 +-
 .../components/molecules/Profile/Profile.tsx  | 101 ++++--
 .../molecules/RadioButton/RadioButton.tsx     |  30 +-
 .../RadioButtonGroup/RadioButtonGroup.tsx     |   2 +-
 .../components/molecules/Select/Select.tsx    | 105 +++---
 .../utils/getValueForTransitionState.ts       |  12 +-
 .../components/molecules/Slider/Slider.tsx    |   6 +-
 .../molecules/Textarea/Textarea.tsx           |  54 +--
 .../Textarea/utils/getValueForSize.ts         |   4 +-
 .../molecules/ThemeToggle/ThemeToggle.tsx     |  26 +-
 .../components/molecules/Toggle/Toggle.tsx    |  18 +-
 .../components/molecules/Tooltip/Tooltip.tsx  | 140 +++----
 .../components/organisms/Dialog/Dialog.tsx    |  22 +-
 .../organisms/Dialog/DialogContent.tsx        |  40 +-
 .../Dialog/utils/getValueForStepType.ts       |   5 +-
 .../src/components/organisms/Toast/Toast.tsx  |  48 +--
 components/src/css/sprinkles.css.ts           |   4 +-
 ....timestamp-1725815945518-422a86fef5bcc.mjs | 145 ++++++++
 ....timestamp-1725815947765-fd9a4f4b2778b.mjs | 145 ++++++++
 ....timestamp-1725815950293-41439afa59d5d.mjs | 145 ++++++++
 ....timestamp-1725815953487-0343402bb3962.mjs | 145 ++++++++
 ....timestamp-1725815955485-2158d09ba86e4.mjs | 145 ++++++++
 ....timestamp-1725815957453-6837690cd0c97.mjs | 145 ++++++++
 ....timestamp-1725815959897-209d1ff271053.mjs | 145 ++++++++
 ....timestamp-1725815961928-15cc7176dc9d7.mjs | 145 ++++++++
 ....timestamp-1725815963891-bc47058775012.mjs | 145 ++++++++
 ....timestamp-1725815965900-7b4198febb1a8.mjs | 145 ++++++++
 ....timestamp-1725815968105-3d7101b68d3e7.mjs | 145 ++++++++
 ...s.timestamp-1725815970189-14417fc5646f.mjs | 145 ++++++++
 ....timestamp-1725815972598-ae33a863f20bd.mjs | 145 ++++++++
 ....timestamp-1725816181594-ce0f57870f858.mjs | 145 ++++++++
 ....timestamp-1725816183711-ab395ea2a697e.mjs | 145 ++++++++
 ...s.timestamp-1725816185866-f5d1a7c293ac.mjs | 145 ++++++++
 ....timestamp-1725816188047-b0fee4c1cb274.mjs | 145 ++++++++
 ....timestamp-1725816190370-d471cfabd3cd3.mjs | 145 ++++++++
 ....timestamp-1725816193028-fbe30e11b4401.mjs | 145 ++++++++
 ....timestamp-1725816195709-ca03cd171ba89.mjs | 145 ++++++++
 ....timestamp-1725816198425-5a8644a384bf8.mjs | 145 ++++++++
 ....timestamp-1725816200759-e00d44ed6bcb8.mjs | 145 ++++++++
 ....timestamp-1725816203026-3d5ae936181ee.mjs | 145 ++++++++
 ....timestamp-1725816205286-a1576679029a5.mjs | 145 ++++++++
 ....timestamp-1725816207460-6f74624c2ad91.mjs | 145 ++++++++
 ....timestamp-1725816209610-481d2442c221f.mjs | 145 ++++++++
 docs/public/playroom/preview/index.html       |  15 -
 .../components/PaletteRow.tsx                 |   8 +-
 docs/src/components/CodeBlock/CodeBlock.tsx   |   2 +-
 docs/src/components/CodePreview.tsx           |  10 +-
 docs/src/components/CopyButton.tsx            |   6 +-
 docs/src/components/GitHubLink.tsx            |   2 +-
 docs/src/components/Logos/Logos.tsx           |   4 +-
 docs/src/components/MDX.tsx                   |   5 +-
 docs/src/components/NavBar.tsx                |  22 +-
 docs/src/components/Palette/Palette.tsx       |   6 +-
 docs/src/components/PropsTable.tsx            |   7 +-
 docs/src/components/SearchIcons.tsx           |  11 +-
 docs/src/components/SideBar.tsx               |   8 +-
 docs/src/layouts/docs.tsx                     |  11 +-
 docs/src/pages/_app.tsx                       |   4 +-
 docs/src/pages/index.mdx                      |   4 +-
 docs/src/pages/index_copy.mdx                 | 102 ++++++
 package.json                                  |   4 +
 pnpm-lock.yaml                                | 342 +-----------------
 82 files changed, 4729 insertions(+), 1107 deletions(-)
 create mode 100644 components/vite.config.ts.timestamp-1725815945518-422a86fef5bcc.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815947765-fd9a4f4b2778b.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815950293-41439afa59d5d.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815953487-0343402bb3962.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815955485-2158d09ba86e4.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815957453-6837690cd0c97.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815959897-209d1ff271053.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815961928-15cc7176dc9d7.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815963891-bc47058775012.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815965900-7b4198febb1a8.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815968105-3d7101b68d3e7.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815970189-14417fc5646f.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725815972598-ae33a863f20bd.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816181594-ce0f57870f858.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816183711-ab395ea2a697e.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816185866-f5d1a7c293ac.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816188047-b0fee4c1cb274.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816190370-d471cfabd3cd3.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816193028-fbe30e11b4401.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816195709-ca03cd171ba89.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816198425-5a8644a384bf8.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816200759-e00d44ed6bcb8.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816203026-3d5ae936181ee.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816205286-a1576679029a5.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816207460-6f74624c2ad91.mjs
 create mode 100644 components/vite.config.ts.timestamp-1725816209610-481d2442c221f.mjs
 delete mode 100644 docs/public/playroom/preview/index.html
 create mode 100644 docs/src/pages/index_copy.mdx

diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx
index 8ba9aa79..da16d924 100644
--- a/components/src/components/atoms/Avatar/Avatar.tsx
+++ b/components/src/components/atoms/Avatar/Avatar.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react'
 
-import { rainbowSprinkles } from '@/src/css/rainbow-spinkles.css'
-
 import { rawColorToRGBA } from '@/src/tokens/color'
 
 import { Box, type BoxProps } from '../Box/Box'
@@ -42,13 +40,13 @@ const Placeholder = ({
 }: PlaceholderProps & BoxProps) => (
   <Box
     alignItems="center"
-    background={$url || 'blueGradient'}
+    // background={$url || 'blueGradient'}
     display="flex"
-    filter={$disabled ? 'grayscale(1)' : 'unset'}
-    height="100%"
+    // filter={$disabled ? 'grayscale(1)' : 'unset'}
+    // height="100%"
     justifyContent="center"
     position="absolute"
-    width="100%"
+    // width="100%"
     {...props}
   />
 )
@@ -67,7 +65,7 @@ export type AvatarProps = {
   /** An element that overlays the avatar */
   checked?: boolean
   /** An svg to overlay over the avatar */
-  icon?: React.ReactElement
+  icon?: React.FC
   /** The deconding attribute of an img element */
   decoding?: NativeImgAttributes['decoding']
   /** A custom sizing for the avatar */
@@ -84,7 +82,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   icon,
   checked,
   size,
-  ...props
+  // ...props
 }) => {
   const ref = React.useRef<HTMLImageElement>(null)
   const [showImage, setShowImage] = React.useState(!!src)
@@ -115,35 +113,38 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   const isImageVisible = showImage && !!src
 
-  const {
-    className: imgClassName,
-    style: imgStyle,
-    otherProps: imgOtherProps,
-  } = rainbowSprinkles({
-    display: isImageVisible ? 'block' : 'none',
-    position: 'absolute',
-    height: '100%',
-    objectFit: 'cover',
-    width: '100%',
-    filter: disabled ? 'grayscale(1)' : undefined,
-    ...props,
-  })
+  // const {
+  //   className: imgClassName,
+  //   style: imgStyle,
+  //   otherProps: imgOtherProps,
+  // } = rainbowSprinkles({
+  //   display: isImageVisible ? 'block' : 'none',
+  //   position: 'absolute',
+  //   height: '100%',
+  //   objectFit: 'cover',
+  //   width: '100%',
+  //   filter: disabled ? 'grayscale(1)' : undefined,
+  //   ...props,
+  // })
 
   const overlay = React.useMemo(() => {
     if (disabled || (!icon && !checked)) return null
     return (
       <Box
         alignItems="center"
-        bg={
-          checked
-            ? rawColorToRGBA([56, 137, 255], 0.75)
-            : rawColorToRGBA([0, 0, 0], 0.25)
-        }
+        // bg={
+        //   checked
+        //     ? rawColorToRGBA([56, 137, 255], 0.75)
+        //     : rawColorToRGBA([0, 0, 0], 0.25)
+        // }
         color="white"
         display="flex"
         justifyContent="center"
       >
-        <Box as={icon ?? <CheckSVG />} wh="40%" />
+        <Box
+          as={icon ?? CheckSVG}
+        // wh="40%"
+        />
       </Box>
     )
   }, [checked, disabled, icon])
@@ -157,9 +158,9 @@ export const Avatar: React.FC<AvatarProps> = ({
         />
       )}
       <img
-        className={imgClassName}
-        style={imgStyle}
-        {...imgOtherProps}
+        // className={imgClassName}
+        // style={imgStyle}
+        // {...imgOtherProps}
         alt={label}
         decoding={decoding}
         ref={ref}
diff --git a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx
index a1031f30..af13a45f 100644
--- a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx
+++ b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx
@@ -15,7 +15,7 @@ export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProp
       className={backdropSurface({
         entered: !$empty && $state === 'entered',
       })}
-      height="100vh"
+      // height="100vh"
       left="0"
       overflow="hidden"
       position="fixed"
@@ -24,8 +24,8 @@ export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProp
       transitionDuration={300}
       transitionProperty="all"
       transitionTimingFunction="popIn"
-      width="100vw"
-      zIndex="999"
+      // width="100vw"
+      // zIndex="999"
     />
   ),
 )
diff --git a/components/src/components/atoms/Banner/Banner.tsx b/components/src/components/atoms/Banner/Banner.tsx
index 2568d89b..3137c614 100644
--- a/components/src/components/atoms/Banner/Banner.tsx
+++ b/components/src/components/atoms/Banner/Banner.tsx
@@ -18,9 +18,9 @@ type BaseProps = {
   as?: 'a'
   onDismiss?: () => void
   actionIcon?: React.ReactNode
-  icon?: React.ReactNode
+  icon?: React.FC
   iconType?: IconTypes
-} & NativeDivProps
+} & BoxProps
 
 type WithIcon = {
   icon?: React.ReactNode
@@ -59,11 +59,11 @@ const ContainerBox = React.forwardRef<HTMLElement, ContainerProps>(
   ({ $alert, $hasAction, ...props }, ref) => (
     <Box
       alignItems={{ base: 'stretch', sm: 'center' }}
-      backgroundColor={{
-        base: getValueForAlert($alert, 'background'),
-        hover: getValueForAlert($alert, 'hover'),
-      }}
-      borderColor={getValueForAlert($alert, 'border')}
+      // backgroundColor={{
+      //   base: getValueForAlert($alert, 'background'),
+      //   hover: getValueForAlert($alert, 'hover'),
+      // }}
+      // borderColor={getValueForAlert($alert, 'border')}
       borderRadius="2xLarge"
       borderStyle="solid"
       borderWidth="1x"
@@ -73,13 +73,13 @@ const ContainerBox = React.forwardRef<HTMLElement, ContainerProps>(
       position="relative"
       pr={$hasAction ? '8' : undefined}
       ref={ref}
-      transform={{
-        base: 'translateY(0)',
-        hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
-      }}
+      // transform={{
+      //   base: 'translateY(0)',
+      //   hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
+      // }}
       transitionDuration={150}
       transitionProperty="all"
-      transitionTimingFunction="ease-in-out"
+      // transitionTimingFunction="ease-in-out"
       width="full"
       {...props}
     />
@@ -91,9 +91,9 @@ const IconBox = ({
   ...props
 }: BoxProps & { $alert: NonNullableAlert }) => (
   <Box
-    backgroundColor={getValueForAlert($alert, 'icon')}
+    // backgroundColor={getValueForAlert($alert, 'icon')}
     borderRadius="full"
-    color={getValueForAlert($alert, 'svg')}
+    // color={getValueForAlert($alert, 'svg')}
     flex={0}
     flexBasis={{ base: '8', sm: '10' }}
     height={{ base: '8', sm: '10' }}
@@ -109,7 +109,7 @@ const SVGBox = ({
   <Box
     display="block"
     height="full"
-    transform={$alert === 'info' ? 'scale(1)' : 'scale(0.5)'}
+    // transform={$alert === 'info' ? 'scale(1)' : 'scale(0.5)'}
     width="full"
     {...props}
   />
@@ -134,26 +134,26 @@ const ActionButtonIconBox = ({
 }: BoxProps & { $alert: NonNullableAlert, $hasAction: boolean }) => (
   <Box
     alignItems="center"
-    backgroundColor={{
-      base: getValueForAlert($alert, 'actionIcon'),
-      hover: getValueForAlert($alert, 'actionIconHover'),
-    }}
+    // backgroundColor={{
+    //   base: getValueForAlert($alert, 'actionIcon'),
+    //   hover: getValueForAlert($alert, 'actionIconHover'),
+    // }}
     borderRadius="full"
-    color={{
-      base: getValueForAlert($alert, 'actionSvg'),
-      hover: getValueForAlert($alert, 'actionSvgHover'),
-    }}
+    // color={{
+    //   base: getValueForAlert($alert, 'actionSvg'),
+    //   hover: getValueForAlert($alert, 'actionSvgHover'),
+    // }}
     cursor="pointer"
     display="flex"
     height="5"
     justifyContent="center"
-    transform={{
-      base: 'translateY(0)',
-      hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
-    }}
+    // transform={{
+    //   base: 'translateY(0)',
+    //   hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
+    // }}
     transitionDuration={150}
     transitionProperty="all"
-    transitionTimingFunction="ease-in-out"
+    // transitionTimingFunction="ease-in-out"
     width="5"
     {...props}
   />
@@ -170,7 +170,7 @@ const ActionButton = ({
   onDismiss,
 }: Pick<BannerProps, 'alert' | 'onDismiss'> & { hasHref: boolean } & WithIcon) => {
   if (onDismiss) {
-    const Icon = (icon || <CrossSVG />) as React.ReactElement
+    const Icon = (icon || CrossSVG) as React.FC
     return (
       <ActionButtonBox onClick={() => onDismiss()}>
         <ActionButtonIconBox $alert={alert} $hasAction>
@@ -180,7 +180,7 @@ const ActionButton = ({
     )
   }
   if (hasHref || icon) {
-    const Icon = (icon || <UpRightArrowSVG />) as React.ReactElement
+    const Icon = (icon || UpRightArrowSVG) as React.FC
     return (
       <ActionButtonBox as="div">
         <ActionButtonIconBox $alert={alert} $hasAction={false}>
diff --git a/components/src/components/atoms/Box/Box.tsx b/components/src/components/atoms/Box/Box.tsx
index 2cfdd08a..1f3132e8 100644
--- a/components/src/components/atoms/Box/Box.tsx
+++ b/components/src/components/atoms/Box/Box.tsx
@@ -1,7 +1,8 @@
 import type {
   AllHTMLAttributes,
-  ElementType,
-  ReactElement } from 'react'
+  FunctionComponent,
+  ComponentClass,
+} from 'react'
 import React, {
   forwardRef,
 } from 'react'
@@ -18,11 +19,11 @@ type HTMLProperties = Omit<
 >
 
 export type BoxProps = Sprinkles &
-  HTMLProperties & { as?: ElementType | ReactElement<any> }
+  HTMLProperties & { as?: string | FunctionComponent<any> | ComponentClass<any, any> }
 
 export const Box = forwardRef<HTMLElement, BoxProps >(
   (
-    { as = 'div', className, ...props },
+    { as = 'div', className, children, ...props },
     ref,
   ) => {
     const atomProps: Record<string, unknown> = {}
@@ -37,12 +38,13 @@ export const Box = forwardRef<HTMLElement, BoxProps >(
       }
     }
 
-    const atomicCss = sprinkles(props)
+    const atomicCss = sprinkles(atomProps)
 
     return React.createElement(as, {
       className: clsx(atomicCss, className),
       ...nativeProps,
       ref,
+      children,
     })
   },
 )
diff --git a/components/src/components/atoms/Button/Button.tsx b/components/src/components/atoms/Button/Button.tsx
index a8ecdd4e..de5fa635 100644
--- a/components/src/components/atoms/Button/Button.tsx
+++ b/components/src/components/atoms/Button/Button.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { P, match } from 'ts-pattern'
 
-import { scale, translateY } from '@/src/css/utils/common'
+// import { scale, translateY } from '@/src/css/utils/common'
 
 import { removeNullishProps } from '@/src/utils/removeNullishProps'
 
@@ -10,16 +10,17 @@ import type {
   ColorStyle,
   WithColorStyle } from './utils/withColorStyle'
 import {
-  getValueForColourStyle,
+// getValueForColourStyle,
 } from './utils/withColorStyle'
 
 import type { Color } from './utils/getValidatedColor'
-import { getValidatedColor } from './utils/getValidatedColor'
+// import { getValidatedColor } from './utils/getValidatedColor'
 
-import { getValueForSize } from './utils/getValueForSize'
+// import { getValueForSize } from './utils/getValueForSize'
 
 import type { ReactNodeNoStrings } from '../../../types'
-import { Spinner } from '../Spinner/Spinner'
+// import { Spinner } from '../Spinner/Spinner'
+const Spinner = () => <div>Spinner</div>
 import type { BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'
 
@@ -77,12 +78,12 @@ type WithoutAnchor = {
 }
 
 type ButtonBoxProps = {
-  $pressed: boolean
-  $shadow: boolean
+  $pressed?: boolean
+  $shadow?: boolean
   $shape?: BaseProps['shape']
   $size?: BaseProps['size']
   $type?: BaseProps['type']
-  $colorStyle: WithColorStyle['colorStyle']
+  $colorStyle?: WithColorStyle['colorStyle']
   $color?: Color
   $hasCounter?: boolean
 }
@@ -92,14 +93,15 @@ const ButtonBox = React.forwardRef<
 >(
   (
     {
-      $pressed,
-      $shadow,
-      $shape = 'rectangle',
-      $size = 'medium',
-      $colorStyle = 'accentPrimary',
-      $hasCounter,
-      $color,
+      // $pressed,
+      // $shadow,
+      // $shape = 'rectangle',
+      // $size = 'medium',
+      // $colorStyle = 'accentPrimary',
+      // $hasCounter,
+      // $color,
       as,
+      children,
       ...props
     },
     ref,
@@ -107,69 +109,77 @@ const ButtonBox = React.forwardRef<
     <Box
       alignItems="center"
       as={as ?? 'button'}
-      backgroundColor={{
-        base: getValueForColourStyle(
-          $colorStyle,
-          $pressed ? 'hover' : 'background',
-        ),
-        hover: getValueForColourStyle($colorStyle, 'hover'),
-        disabled: getValueForColourStyle('disabled', 'background'),
-      }}
-      borderColor={{
-        base: getValueForColourStyle($colorStyle, 'border'),
-        disabled: getValueForColourStyle('disabled', 'border'),
-        hover: getValueForColourStyle($colorStyle, 'hover'),
-      }}
-      borderRadius={['circle', 'rounded'].includes($shape) ? 'full' : 'large'}
+      // backgroundColor={{
+      //   base: getValueForColourStyle(
+      //     $colorStyle,
+      //     $pressed ? 'hover' : 'background',
+      //   ),
+      //   hover: getValueForColourStyle($colorStyle, 'hover'),
+      //   disabled: getValueForColourStyle('disabled', 'background'),
+      // }}
+      // borderColor={{
+      //   base: getValueForColourStyle($colorStyle, 'border'),
+      //   disabled: getValueForColourStyle('disabled', 'border'),
+      //   hover: getValueForColourStyle($colorStyle, 'hover'),
+      // }}
+      // borderRadius={['circle', 'rounded'].includes($shape) ? 'full' : '$large'}
       borderStyle="solid"
       borderWidth="1x"
-      boxShadow={$shadow ? '0.25 grey' : 'none'}
-      color={{
-        base: getValidatedColor(
-          $color,
-          getValueForColourStyle($colorStyle, 'content'),
-        ),
-        disabled: getValueForColourStyle('disabled', 'content'),
-      }}
+      // boxShadow={$shadow ? '0.25 grey' : 'none'}
+      // color={{
+      //   base: getValidatedColor(
+      //     $color,
+      //     getValueForColourStyle($colorStyle, 'content'),
+      //   ),
+      //   disabled: getValueForColourStyle('disabled', 'content'),
+      // }}
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
       display="flex"
-      fill={getValueForColourStyle($colorStyle, 'content')}
-      fontSize={getValueForSize($size, 'fontSize')}
+      // fill={getValueForColourStyle($colorStyle, 'content')}
+      // fontSize={getValueForSize($size, 'fontSize')}
       fontWeight="bold"
       gap="2"
-      height={getValueForSize($size, 'height')}
+      // height={getValueForSize($size, 'height')}
       justifyContent="center"
       position="relative"
       // px={$hasCounter ? '12' : getValueForSize($size, 'px')}
       ref={ref}
-      transform={{
-        base: translateY(0),
-        hover: translateY(-1),
-        active: translateY(-1),
-        disabled: translateY(0),
-      }}
+      // transform={{
+      //   base: translateY(0),
+      //   hover: translateY(-1),
+      //   active: translateY(-1),
+      //   disabled: translateY(0),
+      // }}
       transitionDuration={150}
       transitionProperty="all"
       transitionTimingFunction="inOut"
-      width={
-        ['square', 'circle'].includes($shape)
-          ? getValueForSize($size, 'height')
-          : 'full'
-      }
-      {...{
-        px: $hasCounter ? '12' : getValueForSize($size, 'px'),
-        ...props,
-      }}
+      // width={
+      //   ['square', 'circle'].includes($shape)
+      //     ? getValueForSize($size, 'height')
+      //     : 'full'
+      // }
+      // {...{
+      //   px: $hasCounter ? '12' : getValueForSize($size, 'px'),
+      //   ...props,
+      // }}
+      // {...props}
+      children={children}
     />
   ),
 )
 
 const SVGBox = ({
-  $size,
+  // $size,
   ...props
 }: BoxProps & {
   $size: 'small' | 'medium' | 'flexible'
-}) => <Box display="block" wh={getValueForSize($size, 'svgSize')} {...props} />
+}) => (
+  <Box
+    display="block"
+    // wh={getValueForSize($size, 'svgSize')}
+    {...props}
+  />
+)
 
 const ContentBox = ({
   $fullWidth,
@@ -201,7 +211,8 @@ const CounterBox = (props: BoxProps) => (
 
 const CounterIconBox = ({
   $visible,
-  $colorStyle,
+  // $colorStyle,
+  children,
   ...props
 }: BoxProps & {
   $visible: boolean
@@ -209,12 +220,12 @@ const CounterIconBox = ({
 }) => (
   <Box
     alignItems="center"
-    borderColor={getValueForColourStyle($colorStyle, 'content')}
+    // borderColor={getValueForColourStyle($colorStyle, 'content')}
     borderRadius="full"
     borderStyle="solid"
     borderWidth="2x"
     boxSizing="border-box"
-    color={getValueForColourStyle($colorStyle, 'content')}
+    // color={getValueForColourStyle($colorStyle, 'content')}
     display="flex"
     fontSize="extraSmall"
     height="6"
@@ -223,11 +234,12 @@ const CounterIconBox = ({
     opacity={$visible ? 1 : 0}
     pointerEvents="none"
     px="1"
-    transform={$visible ? scale(1) : scale(0.3)}
+    // transform={$visible ? scale(1) : scale(0.3)}
     transitionDuration={300}
     transitionProperty="all"
     transitionTimingFunction="inOut"
-    {...props}
+    children={children}
+    // {...props}
   />
 )
 
@@ -240,8 +252,8 @@ const TooltipIndicatorBox = (props: BoxProps) => (
     display="flex"
     justifyContent="center"
     position="absolute"
-    right="-10px"
-    top="-10px"
+    // right="-10px"
+    // top="-10px"
     wh="6"
     {...props}
   />
@@ -293,7 +305,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         .with([P._, true, P._], () =>
           React.isValidElement(prefix)
             ? (
-                <SVGBox $size={size} as={prefix} />
+                <SVGBox $size={size} as={prefix as any} />
               )
             : null,
         )
@@ -304,7 +316,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         .with([P._, P._, true], () =>
           React.isValidElement(suffix)
             ? (
-                <SVGBox $size={size} as={suffix} />
+                <SVGBox $size={size} as={suffix as any} />
               )
             : null,
         )
@@ -321,21 +333,21 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <ButtonBox
-        $color={color}
-        $colorStyle={colorStyle}
-        $hasCounter={!!count}
-        $pressed={pressed}
-        $shadow={shadow}
-        $shape={shape}
-        $size={size}
+        // $color={color}
+        // $colorStyle={colorStyle}
+        // $hasCounter={!!count}
+        // $pressed={pressed}
+        // $shadow={shadow}
+        // $shape={shape}
+        // $size={size}
         as={asProp as any}
-        disabled={disabled}
-        href={href}
-        ref={ref}
-        rel={rel}
-        tabIndex={tabIndex}
-        target={target}
-        type={type}
+        // disabled={disabled}
+        // href={href}
+        // ref={ref}
+        // rel={rel}
+        // tabIndex={tabIndex}
+        // target={target}
+        // type={type}
         // position={zIndex && 'relative'}
         zIndex={zIndex}
         onClick={onClick}
diff --git a/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx b/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx
index 523203ad..31801c18 100644
--- a/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx
+++ b/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx
@@ -183,17 +183,17 @@ const PopoverBox = React.forwardRef<HTMLElement, BoxProps & PopoverBoxProps>(
       position="absolute"
       ref={ref}
       top={getValueForTransitionState($state.status, 'topFunc')($y)}
-      transform={{
-        base: `translate3d(0, 0, 0) ${$mobileTranslate}`,
-        sm: `translate3d(0, 0, 0) ${$translate}`,
-      }}
-      transitionDuration={`${$transitionDuration}ms`}
+      // transform={{
+      //   base: `translate3d(0, 0, 0) ${$mobileTranslate}`,
+      //   sm: `translate3d(0, 0, 0) ${$translate}`,
+      // }}
+      // transitionDuration={`${$transitionDuration}ms`}
       transitionProperty={getValueForTransitionState(
         $state.status,
         'transitionProperty',
       )}
       visibility={getValueForTransitionState($state.status, 'visibility')}
-      width={{ xs: makeWidth($mobileWidth), sm: makeWidth($width) }}
+      // width={{ xs: makeWidth($mobileWidth), sm: makeWidth($width) }}
       zIndex={999999}
     />
   ),
diff --git a/components/src/components/atoms/Field/Field.tsx b/components/src/components/atoms/Field/Field.tsx
index 44370a3c..1cc7a10b 100644
--- a/components/src/components/atoms/Field/Field.tsx
+++ b/components/src/components/atoms/Field/Field.tsx
@@ -45,7 +45,7 @@ export type FieldProps = FieldBaseProps & {
   /** The id attribute of the label element */
   id?: NativeFormProps['id']
   disabled?: boolean
-} & Omit<NativeLabelProps, 'id' | 'children'>
+} & Omit<BoxProps, 'id' | 'children'>
 
 const RequiredBox = () => (
   <Box as="span" color="redPrimary" marginLeft="1" whiteSpace="pre">
@@ -65,15 +65,15 @@ const LabelBox = ({
   $required?: boolean
 }) => (
   <Box
-    cursor={match([$disabled, $readOnly])
-      .with([true, P._], () => 'not-allowed')
-      .with([false, true], () => 'none')
-      .with([false, false], () => 'pointer')
-      .exhaustive()}
+    // cursor={match([$disabled, $readOnly])
+    //   .with([true, P._], () => 'not-allowed')
+    //   .with([false, true], () => 'none')
+    //   .with([false, false], () => 'pointer')
+    //   .exhaustive()}
     display="flex"
     flexBasis="auto"
-    flexGrow="2"
-    flexShrink="1"
+    // flexGrow="2"
+    // flexShrink="1"
     overflow="hidden"
     position="relative"
     {...props}
@@ -91,7 +91,7 @@ const SecondaryLabelBox = (props: React.ComponentProps<typeof Typography>) => (
   <Typography
     flexBasis="auto"
     flexGrow={0}
-    flexShrink="2"
+    // flexShrink="2"
     overflow="hidden"
     position="relative"
     textAlign="right"
@@ -242,7 +242,7 @@ const ContainerBox = ({
   ...props
 }: BoxProps & ContainerProps) => (
   <Box
-    alignItems={$inline ? 'flex-start' : 'normal'}
+    // alignItems={$inline ? 'flex-start' : 'normal'}
     display="flex"
     flexDirection={match([!!$inline, !!$reverse])
       .with([true, true], () => 'row-reverse' as const)
diff --git a/components/src/components/atoms/Heading/Heading.tsx b/components/src/components/atoms/Heading/Heading.tsx
index 501d2f8a..e7280bfd 100644
--- a/components/src/components/atoms/Heading/Heading.tsx
+++ b/components/src/components/atoms/Heading/Heading.tsx
@@ -25,9 +25,9 @@ const ContainerBox = React.forwardRef<
     <Box
       color={$color}
       fontFamily="sans"
-      fontSize={getValueForLevel($level, 'fontSize', $responsive)}
-      fontWeight={getValueForLevel($level, 'fontWeight', $responsive)}
-      lineHeight={getValueForLevel($level, 'lineHeight', $responsive)}
+      // fontSize={getValueForLevel($level, 'fontSize', $responsive)}
+      // fontWeight={getValueForLevel($level, 'fontWeight', $responsive)}
+      // lineHeight={getValueForLevel($level, 'lineHeight', $responsive)}
       ref={ref}
       textAlign={textAlign}
       textTransform={textTransform}
diff --git a/components/src/components/atoms/RecordItem/RecordItem.tsx b/components/src/components/atoms/RecordItem/RecordItem.tsx
index e550f016..19623974 100644
--- a/components/src/components/atoms/RecordItem/RecordItem.tsx
+++ b/components/src/components/atoms/RecordItem/RecordItem.tsx
@@ -18,7 +18,7 @@ type BaseProps = {
   value: string
   size?: Size
   inline?: boolean
-  icon?: ReactNode
+  icon?: React.FC
   keyLabel?: string | ReactNode
   keySublabel?: string | ReactNode
   children: string
@@ -75,7 +75,7 @@ const ContainerBox = ({
     height={$inline ? '10' : 'fit'}
     px="3"
     py="2.5"
-    transform={{ base: 'translateY(0)', hover: 'translateY(-1px)' }}
+    // transform={{ base: 'translateY(0)', hover: 'translateY(-1px)' }}
     transitionDuration={150}
     transitionProperty="all"
     transitionTimingFunction="inOut"
@@ -92,9 +92,9 @@ const PrefixBox = ({
   <Box
     alignItems="flex-start"
     display="flex"
-    flexBasis={match($inline)
-      .with(true, () => 'initial')
-      .otherwise(() => ($size === 'large' ? '30' : '22.5'))}
+    // flexBasis={match($inline)
+    //   .with(true, () => 'initial')
+    //   .otherwise(() => ($size === 'large' ? '30' : '22.5'))}
     flexGrow={0}
     flexShrink={0}
     gap="2"
@@ -139,12 +139,12 @@ const PrefixSVGBox = (props: BoxProps) => (
 const TrailingSVGBox = ({
   $rotate,
   ...props
-}: BoxProps & { $rotate: boolean }) => (
+}: BoxProps & { $rotate?: boolean }) => (
   <Box
     color="greyPrimary"
     display="block"
     marginTop="1"
-    transform={$rotate ? 'rotate(45deg)' : 'none'}
+    // transform={$rotate ? 'rotate(45deg)' : 'none'}
     wh="3"
     {...props}
   />
@@ -180,13 +180,13 @@ export const RecordItem = React.forwardRef<
             rel: 'nofollow noreferrer',
             target: '_blank',
             ...props,
-          } as NativeElementProps & NativeAnchorProps)
+          } as BoxProps)
         : ({
             onClick: () => {
               copy(value)
             },
             ...props,
-          } as NativeElementProps & NativeButtonProps)
+          } as BoxProps)
 
     const hasPrefix = !!icon || !!keyLabel
     const hasLabels = !!keyLabel || !!keySublabel
@@ -236,7 +236,7 @@ export const RecordItem = React.forwardRef<
       <ContainerBox $inline={inline} as={asProp} {...generatedProps}>
         {hasPrefix && (
           <PrefixBox $inline={inline} $size={size}>
-            {icon && <PrefixSVGBox as={icon as React.ReactElement} />}
+            {icon && <PrefixSVGBox as={icon as React.FC} />}
             {hasLabels && (
               <PrefixLabelsContainerBox $inline={inline}>
                 {KeyLabel}
diff --git a/components/src/components/atoms/Spinner/Spinner.tsx b/components/src/components/atoms/Spinner/Spinner.tsx
index fc3ddb40..5f248a96 100644
--- a/components/src/components/atoms/Spinner/Spinner.tsx
+++ b/components/src/components/atoms/Spinner/Spinner.tsx
@@ -17,22 +17,22 @@ export type SpinnerProps = {
   /** A tokens 'mode' color value */
   color?: Color
   size?: Size
-} & Omit<NativeDivProps, 'children' | 'color'>
+} & Omit<BoxProps, 'children' | 'color'>
 
 const ContainerBox = React.forwardRef<
   HTMLElement,
-  BoxProps & { $size: Size, $color?: Color }
+  BoxProps & { $size?: Size, $color?: Color }
 >(({ $size, $color, ...props }, ref) => (
   <Box
     {...props}
-    color={validateColor($color)}
+    // color={validateColor($color)}
     ref={ref}
-    strokeWidth={getValueForSize($size, 'strokeWidth')}
-    wh={getValueForSize($size, 'size')}
+    // strokeWidth={getValueForSize($size, 'strokeWidth')}
+    // wh={getValueForSize($size, 'size')}
   />
 ))
 
-const svg = (
+const svg = () => (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <circle
       cx="12"
@@ -62,7 +62,7 @@ export const Spinner = React.forwardRef<HTMLElement, SpinnerProps>(
       <ContainerBox
         {...props}
         $color={color}
-        $size={size}
+        // $size={size}
         className={styles.animation}
         ref={ref}
       >
@@ -72,8 +72,8 @@ export const Spinner = React.forwardRef<HTMLElement, SpinnerProps>(
         <Box
           as={svg}
           display="block"
-          fill="currentColor"
-          stroke="currentColor"
+          // fill="currentColor"
+          // stroke="currentColor"
           wh="full"
         />
       </ContainerBox>
diff --git a/components/src/components/atoms/Tag/Tag.tsx b/components/src/components/atoms/Tag/Tag.tsx
index 428b815c..aaa76d54 100644
--- a/components/src/components/atoms/Tag/Tag.tsx
+++ b/components/src/components/atoms/Tag/Tag.tsx
@@ -32,29 +32,29 @@ export const Tag: React.FC<TagProps> = ({
     <Box
       alignItems="center"
       as={as}
-      backgroundColor={{
-        base: getValueForColorStyle(colorStyle, 'background'),
-        hover: getValueForColorStyle(
-          colorStyle,
-          hover ? 'hover' : 'background',
-        ),
-        active: getValueForColorStyle(colorStyle, 'hover'),
-      }}
+      // backgroundColor={{
+      //   base: getValueForColorStyle(colorStyle, 'background'),
+      //   hover: getValueForColorStyle(
+      //     colorStyle,
+      //     hover ? 'hover' : 'background',
+      //   ),
+      //   active: getValueForColorStyle(colorStyle, 'hover'),
+      // }}
       borderRadius="full"
-      color={getValueForColorStyle(colorStyle, 'content')}
+      // color={getValueForColorStyle(colorStyle, 'content')}
       display="flex"
       fontSize={size === 'small' ? 'extraSmall' : 'small'}
       fontWeight="bold"
       lineHeight={size === 'small' ? 'extraSmall' : 'small'}
       px="2"
       py="0.5"
-      transform={{
-        base: translateY(0),
-        hover: translateY(hover ? -1 : 0),
-        active: translateY(-1),
-      }}
+      // transform={{
+      //   base: translateY(0),
+      //   hover: translateY(hover ? -1 : 0),
+      //   active: translateY(-1),
+      // }}
       transitionDuration={150}
-      transitionProperty="color, border-color, background-color, transform"
+      // transitionProperty="color, border-color, background-color, transform"
       transitionTimingFunction="inOut"
       width="max"
       {...removeNullishProps(props)}
diff --git a/components/src/components/molecules/Checkbox/Checkbox.tsx b/components/src/components/molecules/Checkbox/Checkbox.tsx
index 46ccddbf..718468be 100644
--- a/components/src/components/molecules/Checkbox/Checkbox.tsx
+++ b/components/src/components/molecules/Checkbox/Checkbox.tsx
@@ -50,7 +50,7 @@ export type CheckboxProps = {
   readOnly?: NativeInputProps['readOnly']
 } & Omit<FieldBaseProps, 'labelRight'> &
 Omit<
-  NativeInputProps,
+  BoxProps,
   | 'size'
   | 'color'
   | 'type'
@@ -66,17 +66,17 @@ const InputBox = React.forwardRef<HTMLElement, BoxProps & { $colorStyle: ColorSt
   ({ $colorStyle, disabled, checked, ...props }, ref) => (
     <Box
       position="relative"
-      transform={{ base: translateY(0), hover: translateY(-1) }}
-      transition="transform 150ms ease-in-out"
+      // transform={{ base: translateY(0), hover: translateY(-1) }}
+      // transition="transform 150ms ease-in-out"
       wh="5"
     >
       <Box
         as="input"
-        backgroundColor={{
-          base: 'border',
-          disabled: 'border',
-          checked: getValueForColorStyle($colorStyle, 'background'),
-        }}
+        // backgroundColor={{
+        //   base: 'border',
+        //   disabled: 'border',
+        //   checked: getValueForColorStyle($colorStyle, 'background'),
+        // }}
         borderRadius="small"
         checked={checked}
         className={styles.checkbox}
@@ -84,25 +84,25 @@ const InputBox = React.forwardRef<HTMLElement, BoxProps & { $colorStyle: ColorSt
         disabled={disabled}
         display="grid"
         fontFamily="inherit"
-        placeContent="center"
+        // placeContent="center"
         position="relative"
         ref={ref}
-        transition="background-color 150ms ease-in-out"
+        // transition="background-color 150ms ease-in-out"
         type="checkbox"
         wh="full"
         {...props}
       />
       <Box
-        backgroundColor={getValueForColorStyle($colorStyle, 'content')}
+        // backgroundColor={getValueForColorStyle($colorStyle, 'content')}
         className={styles.icon}
         left="0"
-        maskImage={`url('data:image/svg+xml; utf8, <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 12.625L10.125 20.125L22 3.875" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>')`}
-        maskPosition="center"
-        maskRepeat="no-repeat"
+        // maskImage={`url('data:image/svg+xml; utf8, <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 12.625L10.125 20.125L22 3.875" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>')`}
+        // maskPosition="center"
+        // maskRepeat="no-repeat"
         pointerEvents="none"
         position="absolute"
         top="0"
-        transition="background-color 150ms ease-in-out"
+        // transition="background-color 150ms ease-in-out"
         wh="full"
       />
     </Box>
diff --git a/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx b/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx
index 35d6269a..f82cbdde 100644
--- a/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx
+++ b/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx
@@ -19,16 +19,16 @@ export type CheckboxRowProps = {
   label: string
   subLabel?: string
   colorStyle?: ColorStyle
-} & React.InputHTMLAttributes<HTMLInputElement>
+} & BoxProps
 
 const ContainerBox = ({ disabled, ...props }: BoxProps) => (
   <Box
     position="relative"
-    transform={{
-      base: translateY(0),
-      hover: translateY(disabled ? 0 : -1),
-    }}
-    transition="transform 150ms ease-in-out"
+    // transform={{
+    //   base: translateY(0),
+    //   hover: translateY(disabled ? 0 : -1),
+    // }}
+    // transition="transform 150ms ease-in-out"
     {...props}
     width="full"
   />
@@ -53,7 +53,7 @@ const Label = ({
     {...props}
     alignItems="center"
     as="label"
-    backgroundColor={getValueForColorStyle($colorStyle, 'background')}
+    // backgroundColor={getValueForColorStyle($colorStyle, 'background')}
     borderColor="transparent"
     borderRadius="large"
     borderStyle="solid"
@@ -62,7 +62,7 @@ const Label = ({
     display="flex"
     gap="4"
     padding="4"
-    transition="all 0.3s ease-in-out"
+    // transition="all 0.3s ease-in-out"
     wh="full"
   />
 )
@@ -79,7 +79,12 @@ const CircleFrame = (props: BoxProps) => (
 )
 
 const SVG = (props: BoxProps) => (
-  <Box {...props} display="block" fill="currentColor" wh="4" />
+  <Box
+    {...props}
+    display="block"
+    // fill="currentColor"
+    wh="4"
+  />
 )
 
 const Circle = ({
@@ -90,22 +95,22 @@ const Circle = ({
   <Box
     {...props}
     alignItems="center"
-    backgroundColor={getValueForColorStyle(
-      $colorStyle,
-      $hover ? 'iconHover' : 'icon',
-    )}
+    // backgroundColor={getValueForColorStyle(
+    //   $colorStyle,
+    //   $hover ? 'iconHover' : 'icon',
+    // )}
     borderColor="transparent"
     borderRadius="full"
     borderStyle="solid"
     borderWidth="1x"
-    color={getValueForColorStyle($colorStyle, 'svg')}
+    // color={getValueForColorStyle($colorStyle, 'svg')}
     display="flex"
     justifyContent="center"
     position="absolute"
-    transition="all 0.3s ease-in-out"
+    // transition="all 0.3s ease-in-out"
     wh="full"
   >
-    <SVG as={<CheckSVG />} />
+    <SVG as={CheckSVG} />
   </Box>
 )
 
diff --git a/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx b/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
index 5eb534b1..8d2bd422 100644
--- a/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
+++ b/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
@@ -21,15 +21,15 @@ const NumberBox = ({
   <Box
     {...props}
     alignItems="center"
-    color={disabled ? 'greyPrimary' : getValidatedColor($color)}
+    // color={disabled ? 'greyPrimary' : getValidatedColor($color)}
     display="flex"
-    fontSize={getValueForNumberForSize($size, 'fontSize')}
+    // fontSize={getValueForNumberForSize($size, 'fontSize')}
     fontWeight="extraBold"
     justifyContent="center"
-    lineHeight={getValueForNumberForSize($size, 'lineHeight')}
-    marginTop={getValueForNumberForSize($size, 'marginTop')}
+    // lineHeight={getValueForNumberForSize($size, 'lineHeight')}
+    // marginTop={getValueForNumberForSize($size, 'marginTop')}
     position="absolute"
-    wh={getValueForNumberForSize($size, 'size')}
+    // wh={getValueForNumberForSize($size, 'size')}
   />
 )
 
@@ -43,14 +43,26 @@ const ContainerBox = React.forwardRef<
 >(({ $size, $color, disabled, ...props }, ref) => (
   <Box
     {...props}
-    color={disabled ? 'greyLight' : getValidatedColor($color)}
+    // color={disabled ? 'greyLight' : getValidatedColor($color)}
     ref={ref}
-    stroke="currentColor"
+    // stroke="currentColor"
     strokeWidth="1"
     wh={$size === 'large' ? '24' : '16'}
   />
 ))
 
+const CircleIcon = () => (
+  <circle
+    cx="12"
+    cy="12"
+    fill="none"
+    // opacity={opacity}
+    r="9"
+    // strokeDasharray={strokeDashArray}
+    strokeLinecap="round"
+  />
+)
+
 const Circle = ({
   $progress,
   disabled,
@@ -66,24 +78,8 @@ const Circle = ({
   return (
     <Box
       {...props}
-      as={(
-        <circle
-          cx="12"
-          cy="12"
-          fill="none"
-          opacity={opacity}
-          r="9"
-          strokeDasharray={strokeDashArray}
-          strokeLinecap="round"
-          strokeWidth={match([!!disabled, $progress])
-            .with(
-              [false, P.when((x?: number) => typeof x === 'number' && x <= 0)],
-              () => '0',
-            )
-            .otherwise(() => '4')}
-        />
-      )}
-      transition="all 1s linear, stroke-width 0.2s ease-in-out 1s"
+      as={CircleIcon}
+      // transition="all 1s linear, stroke-width 0.2s ease-in-out 1s"
     />
   )
 }
@@ -156,7 +152,7 @@ export const CountdownCircle = React.forwardRef<HTMLDivElement, CountdownCircleP
             .with([false, true], () => currentCount)
             .with([false, false], () => (
               <Box
-                as={<CheckSVG />}
+                as={CheckSVG}
                 data-testid="countdown-complete-check"
                 display="block"
                 id="countdown-complete-check"
diff --git a/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx b/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx
index 5c0bccfb..e3d9d356 100644
--- a/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx
+++ b/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx
@@ -15,12 +15,12 @@ export type CurrencyToggleProps = {
   size?: Size
   fiat?: string
   color?: Color
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>
+} & Omit<BoxProps, 'size'>
 
 const Container = (props: BoxProps) => (
   <Box
     {...props}
-    height="fit-content"
+    // height="fit-content"
     position="relative"
     width="fit"
   />
@@ -40,16 +40,16 @@ const Label = ({
     display="flex"
     fontFamily="sans"
     fontSize="small"
-    fontWeight={$size === 'extraSmall' ? '$normal' : 'bold'}
-    height={getValuesForKnob($size, 'height')}
+    // fontWeight={$size === 'extraSmall' ? '$normal' : 'bold'}
+    // height={getValuesForKnob($size, 'height')}
     justifyContent="center"
     left="1/2"
     position="absolute"
     top="1/2"
-    transform={$type === 'eth' ? 'translateX(-50%)' : 'translateX(50%)'}
-    transition="color 0.1s linear"
-    translate="-50% -50%"
-    width={getValuesForKnob($size, 'width')}
+    // transform={$type === 'eth' ? 'translateX(-50%)' : 'translateX(50%)'}
+    // transition="color 0.1s linear"
+    // translate="-50% -50%"
+    // width={getValuesForKnob($size, 'width')}
   />
 )
 
@@ -60,15 +60,15 @@ const Checkbox = React.forwardRef<HTMLElement, BoxProps & { $size: Size }>(
       alignItems="center"
       as="input"
       backgroundColor="greySurface"
-      borderRadius={getValueForCheckbox($size, 'borderRadius')}
+      // borderRadius={getValueForCheckbox($size, 'borderRadius')}
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
       display="flex"
-      height={getValueForCheckbox($size, 'height')}
+      // height={getValueForCheckbox($size, 'height')}
       justifyContent="center"
       position="relative"
       ref={ref}
       type="checkbox"
-      width={getValueForCheckbox($size, 'width')}
+      // width={getValueForCheckbox($size, 'width')}
     />
   ),
 )
@@ -80,16 +80,16 @@ const Slider = ({
 }: BoxProps & { $size: Size, $color: Color }) => (
   <Box
     {...props}
-    backgroundColor={getValidatedColor($color)}
-    borderRadius={$size === 'extraSmall' ? 'full' : '$medium'}
+    // backgroundColor={getValidatedColor($color)}
+    // borderRadius={$size === 'extraSmall' ? 'full' : '$medium'}
     display="block"
-    height={getValuesForKnob($size, 'height')}
+    // height={getValuesForKnob($size, 'height')}
     left="1/2"
     position="absolute"
     top="1/2"
-    transition="transform 0.3s ease-in-out, background-color 0.1s ease-in-out"
-    translate="-50% -50%"
-    width={getValuesForKnob($size, 'width')}
+    // transition="transform 0.3s ease-in-out, background-color 0.1s ease-in-out"
+    // translate="-50% -50%"
+    // width={getValuesForKnob($size, 'width')}
   />
 )
 
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
index 68b7e489..06c7b44c 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -76,7 +76,7 @@ export type DropdownProps = {
   responsive?: boolean
   /** The label for the cancel button when showing an action sheet */
   cancelLabel?: string
-} & NativeDivProps
+} & BoxProps
 
 type PropsWithIsOpen = {
   isOpen: boolean
@@ -99,7 +99,7 @@ type DropdownMenuProps = {
   direction: Direction
   state?: TransitionState['status']
   height?: string | number
-} & NativeDivProps &
+} & BoxProps &
 PopoverProps
 
 type DropdownMenuContainerProps = {
@@ -125,26 +125,26 @@ const DropdownMenuBox = React.forwardRef<
     opacity={1}
     padding="1.5"
     ref={ref}
-    transform={match([$state, $direction, $shortThrow])
-      .with([P.union('entering', 'entered'), P._, P._], () => `translateY(0)`)
-      .with(
-        [P._, 'up', true],
-        () => `translateY(calc(${commonVars.space['2.5']}))`,
-      )
-      .with(
-        [P._, 'down', true],
-        () => `translateY(calc(-1 * ${commonVars.space['2.5']}))`,
-      )
-      .with(
-        [P._, 'up', false],
-        () => `translateY(calc(${commonVars.space['12']}))`,
-      )
-      .with(
-        [P._, 'down', false],
-        () => `translateY(calc(-1 * ${commonVars.space['12']}))`,
-      )
-      .exhaustive()}
-    transition="all .35s cubic-bezier(1, 0, 0.22, 1.6)"
+    // transform={match([$state, $direction, $shortThrow])
+    //   .with([P.union('entering', 'entered'), P._, P._], () => `translateY(0)`)
+    //   .with(
+    //     [P._, 'up', true],
+    //     () => `translateY(calc(${commonVars.space['2.5']}))`,
+    //   )
+    //   .with(
+    //     [P._, 'down', true],
+    //     () => `translateY(calc(-1 * ${commonVars.space['2.5']}))`,
+    //   )
+    //   .with(
+    //     [P._, 'up', false],
+    //     () => `translateY(calc(${commonVars.space['12']}))`,
+    //   )
+    //   .with(
+    //     [P._, 'down', false],
+    //     () => `translateY(calc(-1 * ${commonVars.space['12']}))`,
+    //   )
+    //   .exhaustive()}
+    // transition="all .35s cubic-bezier(1, 0, 0.22, 1.6)"
     width="full"
     zIndex={1}
   />
@@ -152,7 +152,7 @@ const DropdownMenuBox = React.forwardRef<
 
 interface MenuButtonProps {
   $color?: Colors
-  $icon?: React.ReactElement
+  $icon?: React.FC
   $showIndicator?: boolean | Colors
 }
 
@@ -163,12 +163,12 @@ const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
       alignItems="center"
       backgroundColor={{ base: 'backgroundPrimary', hover: 'greySurface' }}
       borderRadius="large"
-      color={
-        disabled ? 'textTertiary' : $color ? `$${$color}` : 'textPrimary'
-      }
+      // color={
+      //   disabled ? 'textTertiary' : $color ? `$${$color}` : 'textPrimary'
+      // }
       cursor={disabled ? 'not-allowed' : 'pointer'}
       display="flex"
-      filter={{ base: 'brightness(1)', active: 'brightness(0.9)' }}
+      // filter={{ base: 'brightness(1)', active: 'brightness(0.9)' }}
       fontWeight="normal"
       gap="2"
       height="12"
@@ -177,17 +177,17 @@ const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
       paddingRight={$showIndicator ? '6' : '3'}
       position="relative"
       ref={ref}
-      transform={{ base: 'translateY(0px)', active: 'translateY(0px)' }}
+      // transform={{ base: 'translateY(0px)', active: 'translateY(0px)' }}
       transitionDuration={150}
-      transitionProperty="color, transform, filter"
-      transitionTimingFunction="ease-in-out"
+      // transitionProperty="color, transform, filter"
+      // transitionTimingFunction="ease-in-out"
       width="full"
     >
       {$icon
         ? (
             <Box
               as={$icon}
-              color={$color ? `$${$color}` : 'textPrimary'}
+              // color={$color ? `$${$color}` : 'textPrimary'}
               flexBasis="4"
               flexGrow={0}
               flexShrink={0}
@@ -198,16 +198,16 @@ const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
       {children}
       {$showIndicator && (
         <Box
-          backgroundColor={
-            typeof $showIndicator === 'boolean'
-              ? 'accent'
-              : `$${$showIndicator}`
-          }
+          // backgroundColor={
+          //   typeof $showIndicator === 'boolean'
+          //     ? 'accent'
+          //     : `$${$showIndicator}`
+          // }
           borderRadius="full"
           position="absolute"
           right="3"
           top="1/2"
-          transform="translateY(-50%)"
+          // transform="translateY(-50%)"
           wh="2"
         />
       )}
@@ -343,12 +343,12 @@ const Chevron = ({
   $direction,
 }: { $open?: boolean, $direction: Direction } & BoxProps) => (
   <Box
-    as={<DownChevronSVG />}
-    fill="currentColor"
+    as={DownChevronSVG}
+    // fill="currentColor"
     marginLeft="1"
     marginRight="0.5"
-    transform={rotation($direction, !!$open)}
-    transitionDuration="200"
+    // transform={rotation($direction, !!$open)}
+    // transitionDuration="200"
     transitionProperty="all"
     transitionTimingFunction="inOut"
     width="3"
diff --git a/components/src/components/molecules/FieldSet/FieldSet.tsx b/components/src/components/molecules/FieldSet/FieldSet.tsx
index 5addb838..f2b155d9 100644
--- a/components/src/components/molecules/FieldSet/FieldSet.tsx
+++ b/components/src/components/molecules/FieldSet/FieldSet.tsx
@@ -63,7 +63,7 @@ export type FieldSetProps = {
       name: string
       tone: TagProps['color']
     }
-} & Omit<NativeFieldSetProps, 'children'>
+} & Omit<BoxProps, 'children'>
 
 export const FieldSet: React.FC<FieldSetProps> = ({
   children,
diff --git a/components/src/components/molecules/Helper/Helper.tsx b/components/src/components/molecules/Helper/Helper.tsx
index dd230fd8..af4bf2f0 100644
--- a/components/src/components/molecules/Helper/Helper.tsx
+++ b/components/src/components/molecules/Helper/Helper.tsx
@@ -13,7 +13,7 @@ type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
 type Alignment = 'horizontal' | 'vertical'
 
-export type HelperProps = NativeDivProps & {
+export type HelperProps = BoxProps & {
   alert?: Alert
   alignment?: Alignment
   children: React.ReactNode
@@ -27,8 +27,8 @@ const Container = ({
   <Box
     {...props}
     alignItems="center"
-    backgroundColor={getValueForAlert($alert, 'background')}
-    borderColor={getValueForAlert($alert, 'border')}
+    // backgroundColor={getValueForAlert($alert, 'background')}
+    // borderColor={getValueForAlert($alert, 'border')}
     borderRadius="large"
     borderStyle="solid"
     borderWidth="1x"
@@ -36,7 +36,7 @@ const Container = ({
     flexDirection={$alignment === 'horizontal' ? 'row' : 'column'}
     gap={$alignment === 'horizontal' ? '4' : '2'}
     justifyContent={$alignment === 'horizontal' ? 'flex-start' : 'center'}
-    overflowX="auto"
+    // overflowX="auto"
     px="4"
     py={$alignment === 'horizontal' ? '4' : '6'}
     textAlign={$alignment === 'horizontal' ? 'left' : 'center'}
@@ -45,7 +45,11 @@ const Container = ({
 )
 
 const IconElement = ({ $alert, ...props }: BoxProps & { $alert: Alert }) => (
-  <Box {...props} color={getValueForAlert($alert, 'svg')} wh="6" />
+  <Box
+    {...props}
+    // color={getValueForAlert($alert, 'svg')}
+    wh="6"
+  />
 )
 
 export const Helper: React.FC<HelperProps> = ({
diff --git a/components/src/components/molecules/Input/Input.tsx b/components/src/components/molecules/Input/Input.tsx
index f1a02f03..9531935c 100644
--- a/components/src/components/molecules/Input/Input.tsx
+++ b/components/src/components/molecules/Input/Input.tsx
@@ -9,7 +9,7 @@ import { scale } from '@/src/css/utils/common'
 
 import * as styles from './styles.css'
 
-import type { FieldBaseProps } from '../../atoms/Field/Field'
+import type { FieldBaseProps, FieldProps } from '../../atoms/Field/Field'
 import { Field } from '../../atoms/Field/Field'
 import type { Space } from '../../../tokens/index'
 import type { BoxProps } from '../../atoms/Box/Box'
@@ -86,7 +86,7 @@ type BaseProps = Omit<FieldBaseProps, 'inline'> & {
   /** Set of styles  */
   // parentStyles?: BoxProps
 } & Omit<
-  NativeInputProps,
+  BoxProps,
   | 'size'
   | 'prefix'
   | 'children'
@@ -115,7 +115,7 @@ type WithTypeDateTimeLocal = {
 export type Size = NonNullable<BaseProps['size']>
 
 type ContainerProps = {
-  $size: Size
+  $size?: Size
   $disabled?: boolean
   $hasError?: boolean
   $suffix?: boolean
@@ -124,24 +124,24 @@ type ContainerProps = {
   $userStyles?: BoxProps
 }
 const Container = ({
-  $size,
+  // $size,
   ...props
 }: BoxProps & ContainerProps & StatusDot) => (
   <Box
     {...props}
     display="flex"
-    height={getValueForSize($size, 'height')}
+    // height={getValueForSize($size, 'height')}
     position="relative"
     transitionDuration={150}
-    transitionProperty="color, border-colror, background-color"
+    // transitionProperty="color, border-colror, background-color"
   />
 )
 
 const Label = ({
-  $size,
+  // $size,
   $disabled,
   ...props
-}: BoxProps & { $disabled?: boolean, $size: Size }) => (
+}: BoxProps & { $disabled?: boolean, $size?: Size }) => (
   <Box
     {...props}
     alignItems="center"
@@ -150,19 +150,19 @@ const Label = ({
     color="greyPrimary"
     cursor={$disabled ? 'not-allowed' : 'pointer'}
     display="flex"
-    fontSize={getValueForSize($size, 'labelFontSize')}
+    // fontSize={getValueForSize($size, 'labelFontSize')}
     fontWeight="normal"
     gap="2"
     height="full"
-    lineHeight={getValueForSize($size, 'labelFontSize')}
-    px={getValueForSize($size, 'outerPadding')}
+    // lineHeight={getValueForSize($size, 'labelFontSize')}
+    // px={getValueForSize($size, 'outerPadding')}
   />
 )
 
 type IconBoxProps = {
   $icon: React.ReactElement
   $iconWidth?: any
-  $size: Size
+  $size?: Size
 }
 
 const Icon = ({
@@ -178,13 +178,13 @@ const Icon = ({
     boxSizing="content-box"
     cursor="pointer"
     display="flex"
-    flexBasis={$iconWidth ? `$${$iconWidth}` : getValueForSize($size, 'icon')}
+    // flexBasis={$iconWidth ? `$${$iconWidth}` : getValueForSize($size, 'icon')}
     flexGrow={0}
     flexShrink={0}
     justifyContent="flex-start"
-    order={-1}
-    paddingLeft={getValueForSize($size, 'outerPadding')}
-    width={$iconWidth ? `$${$iconWidth}` : getValueForSize($size, 'icon')}
+    // order={-1}
+    // paddingLeft={getValueForSize($size, 'outerPadding')}
+    // width={$iconWidth ? `$${$iconWidth}` : getValueForSize($size, 'icon')}
     zIndex={1}
   >
     {$icon}
@@ -195,14 +195,15 @@ const ActionButton = ({
   $icon,
   $size,
   ...props
-}: BoxProps & { $size: Size, $icon?: React.ReactNode }) => {
-  const Icon: React.ReactElement = React.isValidElement($icon)
-    ? (
-        $icon
-      )
-    : (
-        <CrossCircleSVG />
-      )
+}: BoxProps & { $size?: Size, $icon?: React.FC }) => {
+  // const Icon: React.FC = React.isValidElement($icon)
+  //   ? (
+  //       $icon
+  //     )
+  //   : (
+  //       <CrossCircleSVG />
+  //     )
+  const Icon = $icon
   return (
     <Box
       {...props}
@@ -211,23 +212,23 @@ const ActionButton = ({
       color={{ base: 'greyPrimary', hover: 'greyBright' }}
       cursor="pointer"
       display="flex"
-      flexBasis={getValueForSize($size, 'iconPadding')}
+      // flexBasis={getValueForSize($size, 'iconPadding')}
       flexGrow={0}
       flexShrink={0}
       justifyContent="flex-start"
-      marginLeft={`calc(-1 * ${getValueForSize($size, 'iconPadding')})`}
+      // marginLeft={`calc(-1 * ${getValueForSize($size, 'iconPadding')})`}
       opacity={1}
-      paddingRight={getValueForSize($size, 'outerPadding')}
-      transform={scale(1)}
-      transition="all 0.1s ease-in-out"
+      // paddingRight={getValueForSize($size, 'outerPadding')}
+      // transform={scale(1)}
+      // transition="all 0.1s ease-in-out"
     >
       <Box
         as={Icon}
         display="block"
-        fill="CurrentColor"
-        stroke="CurrentColor"
-        transition="all 150ms ease-in-out"
-        wh={getValueForSize($size, 'icon')}
+        // fill="CurrentColor"
+        // stroke="CurrentColor"
+        // transition="all 150ms ease-in-out"
+        // wh={getValueForSize($size, 'icon')}
       />
     </Box>
   )
@@ -248,7 +249,6 @@ const InputComponent = React.forwardRef<HTMLElement, BoxProps & InputComponentPr
       $hasIcon,
       $hasAction,
       $hasError,
-      // $iconWidth,
       ...props
     },
     ref,
@@ -262,19 +262,21 @@ const InputComponent = React.forwardRef<HTMLElement, BoxProps & InputComponentPr
           ? 'redPrimary'
           : { base: 'textPrimary', disabled: 'greyPrimary' }
       }
-      cursor={{ base: 'text', disabled: 'not-allowed', readonly: 'default' }}
-      fontSize={getValueForSize($size, 'labelFontSize')}
+      cursor={{ base: 'text', disabled: 'not-allowed',
+        // readonly: 'default'
+      }}
+      // fontSize={getValueForSize($size, 'labelFontSize')}
       fontWeight="normal"
-      paddingLeft={
-        $hasIcon
-          ? getValueForSize($size, 'innerPadding')
-          : getValueForSize($size, 'outerPadding')
-      }
-      paddingRight={
-        $hasAction
-          ? getValueForSize($size, 'innerPadding')
-          : getValueForSize($size, 'outerPadding')
-      }
+      // paddingLeft={
+      //   $hasIcon
+      //     ? getValueForSize($size, 'innerPadding')
+      //     : getValueForSize($size, 'outerPadding')
+      // }
+      // paddingRight={
+      //   $hasAction
+      //     ? getValueForSize($size, 'innerPadding')
+      //     : getValueForSize($size, 'outerPadding')
+      // }
       position="relative"
       ref={ref}
       textOverflow="ellipsis"
@@ -284,7 +286,7 @@ const InputComponent = React.forwardRef<HTMLElement, BoxProps & InputComponentPr
 )
 
 type InnerContainerProps = {
-  $size: Size
+  $size?: Size
   $hasError?: boolean
   $disabled: boolean
   $readOnly?: boolean
@@ -292,27 +294,27 @@ type InnerContainerProps = {
 }
 
 const InnerContainer = ({
-  $size,
+  // $size,
   $disabled,
   ...props
 }: BoxProps & InnerContainerProps) => (
   <Box
     {...props}
     backgroundColor={$disabled ? 'greyLight' : 'backgroundPrimary'}
-    borderRadius={getValueForSize($size, 'borderRadius')}
+    // borderRadius={getValueForSize($size, 'borderRadius')}
     borderWidth="1x"
     color="textPrimary"
     display="flex"
     overflow="hidden"
     position="relative"
     transitionDuration={150}
-    transitionProperty="color, border-color, background-color"
+    // transitionProperty="color, border-color, background-color"
     transitionTimingFunction="inOut"
     wh="full"
   />
 )
 
-export type InputProps = BaseProps & (WithTypeEmail | WithTypeText | WithTypeDateTimeLocal)
+export type InputProps = Omit<BaseProps, 'size'> & { size: Size } & (WithTypeEmail | WithTypeText | WithTypeDateTimeLocal)
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
@@ -349,7 +351,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       type = 'text',
       units,
       value,
-      width,
+      // width,
       onBlur,
       onChange,
       onFocus,
@@ -376,7 +378,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       e.stopPropagation()
 
       if (onClickAction) {
-        onClickAction()
+        // onClickAction()
         return inputRef.current?.focus()
       }
 
@@ -400,7 +402,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         labelSecondary={labelSecondary}
         readOnly={readOnly}
         required={required}
-        width={width}
+        // width={width}
       >
         {ids => (
           <Container
@@ -409,16 +411,16 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               validated,
               show: showDot,
             })}
-            {...{
-              $size: size,
-            }}
+            // {...{
+            //   $size: size,
+            // }}
           >
             <InnerContainer
               // $alwaysShowAction={alwaysShowAction}
               $disabled={!!disabled}
               // $hasError={!!error}
               // $readOnly={!!readOnly}
-              $size={size}
+              // $size={size}
               className={statusBorder({
                 readonly: readOnly,
                 disabled: disabled,
@@ -441,7 +443,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 autoCorrect={autoCorrect}
                 autoFocus={autoFocus}
                 className={styles.input({
-                  size: size,
+                  // size: size,
                   showAction: alwaysShowAction,
                 })}
                 defaultValue={defaultValue}
@@ -463,10 +465,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                   aria-hidden="true"
                   as={prefixAs}
                   className={styles.label}
-                  order={-2}
+                  // order={-2}
                   {...ids?.label}
                   $disabled={disabled}
-                  $size={size}
+                  // $size={size}
                 >
                   {prefix}
                 </Label>
@@ -475,15 +477,15 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 <Icon
                   $icon={icon}
                   $iconWidth={iconWidth}
-                  $size={size}
+                  // $size={size}
                   className={styles.icon}
                   {...ids?.label}
                 />
               )}
               {hasAction && (
                 <ActionButton
-                  $icon={actionIcon}
-                  $size={size}
+                  // $icon={actionIcon}
+                  // $size={size}
                   data-testid="input-action-button"
                   onClick={handleClickAction}
                   onMouseDown={e => e.preventDefault()}
@@ -492,7 +494,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               {suffix && (
                 <Label
                   $disabled={disabled}
-                  $size={size}
+                  // $size={size}
                   aria-hidden="true"
                   className={styles.label}
                   {...ids?.label}
diff --git a/components/src/components/molecules/Modal/Modal.tsx b/components/src/components/molecules/Modal/Modal.tsx
index 7d5c3182..a5b19e2d 100644
--- a/components/src/components/molecules/Modal/Modal.tsx
+++ b/components/src/components/molecules/Modal/Modal.tsx
@@ -25,41 +25,41 @@ const Container: React.FC<BoxProps & ContainerProps> = ({
   return (
     <Box
       {...props}
-      bottom={{
-        base: getValueForMode(mobileMode, 'bottom'),
-        sm: getValueForMode(desktopMode, 'bottom'),
-      }}
+      // bottom={{
+      //   base: getValueForMode(mobileMode, 'bottom'),
+      //   sm: getValueForMode(desktopMode, 'bottom'),
+      // }}
       display="flex"
       flexDirection="row"
-      left={{
-        base: getValueForMode(mobileMode, 'left'),
-        sm: getValueForMode(desktopMode, 'left'),
-      }}
+      // left={{
+      //   base: getValueForMode(mobileMode, 'left'),
+      //   sm: getValueForMode(desktopMode, 'left'),
+      // }}
       opacity={entered ? 1 : 0}
       position="fixed"
-      top={{
-        base: getValueForMode(mobileMode, 'top'),
-        sm: getValueForMode(desktopMode, 'top'),
-      }}
-      transform={{
-        base: entered
-          ? 'translateY(0px)'
-          : getValueForMode(mobileMode, 'transform'),
-        sm: entered
-          ? 'translateY(0px)'
-          : getValueForMode(desktopMode, 'transform'),
-      }}
+      // top={{
+      //   base: getValueForMode(mobileMode, 'top'),
+      //   sm: getValueForMode(desktopMode, 'top'),
+      // }}
+      // transform={{
+      //   base: entered
+      //     ? 'translateY(0px)'
+      //     : getValueForMode(mobileMode, 'transform'),
+      //   sm: entered
+      //     ? 'translateY(0px)'
+      //     : getValueForMode(desktopMode, 'transform'),
+      // }}
       transitionDuration={300}
       transitionProperty="all"
       transitionTimingFunction="popIn"
-      translate={{
-        base: getValueForMode(mobileMode, 'translate'),
-        sm: getValueForMode(desktopMode, 'translate'),
-      }}
-      width={{
-        base: getValueForMode(mobileMode, 'width'),
-        sm: getValueForMode(desktopMode, 'width'),
-      }}
+      // translate={{
+      //   base: getValueForMode(mobileMode, 'translate'),
+      //   sm: getValueForMode(desktopMode, 'translate'),
+      // }}
+      // width={{
+      //   base: getValueForMode(mobileMode, 'width'),
+      //   sm: getValueForMode(desktopMode, 'width'),
+      // }}
       zIndex={9999}
     />
   )
@@ -81,7 +81,7 @@ export type ModalProps = {
   renderCallback?: () => void
   /** if true, modal will remain centered to bottom of page */
   mobileOnly?: boolean
-} & NativeDivProps
+} & BoxProps
 
 export const Modal = ({
   children,
diff --git a/components/src/components/molecules/PageButtons/PageButtons.tsx b/components/src/components/molecules/PageButtons/PageButtons.tsx
index 1ea07f1f..7a0324c2 100644
--- a/components/src/components/molecules/PageButtons/PageButtons.tsx
+++ b/components/src/components/molecules/PageButtons/PageButtons.tsx
@@ -20,7 +20,7 @@ export type PageButtonsProps = {
   alwaysShowLast?: boolean
   showEllipsis?: boolean
   onChange: (value: number) => void
-} & Omit<NativeDivProps, 'children' | 'onChange'>
+} & Omit<BoxProps, 'children' | 'onChange'>
 
 enum Marker {
   ellipsis = -1,
@@ -39,31 +39,31 @@ const Container = (props: BoxProps) => (
 
 type PageButtonProps = {
   $selected?: boolean
-  $size: Size
+  // $size: Size
 }
 
 const PageButton = ({
   $selected,
-  $size,
+  // $size,
   ...props
 }: PageButtonProps & BoxProps) => (
   <Box
     {...props}
     as="button"
     backgroundColor={{ base: 'background', hover: 'greySurface' }}
-    border="1px solid"
+    // border="1px solid"
     borderColor="border"
-    borderRadius={getValueForSize($size, 'borderRadius')}
+    // borderRadius={getValueForSize($size, 'borderRadius')}
     color={$selected ? 'accent' : 'greyPrimary'}
     cursor={$selected ? 'default' : 'pointer'}
-    fontSize={getValueForSize($size, 'fontSize')}
+    // fontSize={getValueForSize($size, 'fontSize')}
     fontWeight="bold"
-    height={getValueForSize($size, 'height')}
-    lineHeight={getValueForSize($size, 'lineHeight')}
-    minWidth={getValueForSize($size, 'minWidth')}
+    // height={getValueForSize($size, 'height')}
+    // lineHeight={getValueForSize($size, 'lineHeight')}
+    // minWidth={getValueForSize($size, 'minWidth')}
     padding="2"
     pointerEvents={$selected ? 'none' : 'auto'}
-    transition="all 0.15s ease-in-out"
+    // transition="all 0.15s ease-in-out"
   />
 )
 
@@ -140,7 +140,7 @@ export const PageButtons: React.FC<PageButtonsProps> = ({
           : (
               <PageButton
                 $selected={value === current}
-                $size={size}
+                // $size={size}
                 data-testid="pagebutton"
                 key={value}
                 type="button"
diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx
index 3f6e10d0..4e7c8d0d 100644
--- a/components/src/components/molecules/Profile/Profile.tsx
+++ b/components/src/components/molecules/Profile/Profile.tsx
@@ -36,10 +36,10 @@ type BaseProps = {
   size?: Size
   /** The colour of the indicator */
   indicatorColor?: Colors
-} & Omit<NativeDivProps, 'children'>
+} & Omit<BoxProps, 'children'>
 
 interface ContainerProps {
-  $size: Size
+  // $size: Size
   $hasDropdown?: boolean
   $open: boolean
 }
@@ -51,59 +51,67 @@ const calculateWidth = (size: Size) => {
 }
 
 const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
-  ({ $size, $hasDropdown, $open, ...props }, ref) => (
+  ({
+    // $size,
+    $hasDropdown, $open, ...props }, ref) => (
     <Box
       alignItems="center"
       backgroundColor={$open ? 'border' : 'backgroundPrimary'}
       borderRadius="full"
-      cursor={$hasDropdown ? 'pointer' : 'unset'}
+      // cursor={$hasDropdown ? 'pointer' : 'unset'}
       display="flex"
-      filter={{
-        base: brightness(1),
-        hover: brightness($hasDropdown ? 1.05 : 1),
-      }}
+      // filter={{
+      //   base: brightness(1),
+      //   hover: brightness($hasDropdown ? 1.05 : 1),
+      // }}
       flexDirection="row"
       gap="2"
-      height={getValueForSize($size, 'height')}
+      // height={getValueForSize($size, 'height')}
       justifyContent="flex-start"
-      maxWidth={getValueForSize($size, 'maxWidth')}
-      padding={getValueForSize($size, 'padding')}
-      paddingRight={getValueForSize($size, 'paddingRight')}
+      // maxWidth={getValueForSize($size, 'maxWidth')}
+      // padding={getValueForSize($size, 'padding')}
+      // paddingRight={getValueForSize($size, 'paddingRight')}
       position="relative"
       ref={ref}
-      transform={{
-        base: translateY(0),
-        hover: translateY($hasDropdown ? -1 : 0),
-      }}
+      // transform={{
+      //   base: translateY(0),
+      //   hover: translateY($hasDropdown ? -1 : 0),
+      // }}
       transitionDuration={150}
-      transitionProperty="color, border-color, background-color, transform, filter"
+      // transitionProperty="color, border-color, background-color, transform, filter"
       transitionTimingFunction="inOut"
-      width={getValueForSize($size, 'width')}
+      // width={getValueForSize($size, 'width')}
       zIndex={10}
       {...props}
     />
   ),
 )
 
-const AvatarContainer = ({ $size, ...props }: BoxProps & { $size: Size }) => (
+const AvatarContainer = ({
+  // $size,
+  ...props }: BoxProps & {
+  // $size: Size
+  }) => (
   <Box
     {...props}
-    flexBasis={$size === 'large' ? '12' : '10'}
+    // flexBasis={$size === 'large' ? '12' : '10'}
     flexGrow={0}
     flexShrink={0}
-    width={$size === 'large' ? '12' : '10'}
+    // width={$size === 'large' ? '12' : '10'}
   />
 )
 
 const ProfileInnerContainer = ({
-  $size,
+  // $size,
   ...props
-}: BoxProps & { $size: Size }) => {
+}: BoxProps & {
+  // $size: Size
+}) => {
   return (
     <Box
       {...props}
       data-testid="profile-inner-container"
-      display={$size === 'small' ? 'none' : 'block'}
+      // display={$size === 'small' ? 'none' : 'block'}
       flex={1}
       minWidth="none"
       overflow="hidden"
@@ -111,29 +119,38 @@ const ProfileInnerContainer = ({
   )
 }
 
-const ProfileInner = ({ size = 'medium', avatar, address, ensName }: ProfileProps) => (
+const ProfileInner = ({
+  // size = 'medium',
+  avatar, address, ensName }: ProfileProps) => (
   <>
-    <AvatarContainer $size={size}>
+    <AvatarContainer
+    // $size={size}
+      {...{}}
+    >
       <Avatar
         label="profile-avatar"
         {...(typeof avatar === 'string' ? { src: avatar } : avatar || {})}
       />
     </AvatarContainer>
-    <ProfileInnerContainer $size={size}>
+    <ProfileInnerContainer
+    // $size={size}
+      {...{}}
+    >
       <Typography
         as="h3"
         color="text"
         data-testid="profile-title"
         ellipsis
-        fontVariant={size === 'large' ? 'headingFour' : 'bodyBold'}
+        // fontVariant={size === 'large' ? 'headingFour' : 'bodyBold'}
       >
         {ensName
-        || shortenAddress(
-          address,
-          size === 'large' ? 30 : 10,
-          size === 'large' ? 10 : 5,
-          size === 'large' ? 10 : 5,
-        )}
+        // || shortenAddress(
+        //   address,
+        //   size === 'large' ? 30 : 10,
+        //   size === 'large' ? 10 : 5,
+        //   size === 'large' ? 10 : 5,
+        // )
+        }
       </Typography>
     </ProfileInnerContainer>
   </>
@@ -156,7 +173,7 @@ export const Profile: React.FC<ProfileProps> = ({
   if (dropdownItems) {
     return (
       <Dropdown
-        width={calculateWidth(size)}
+        // width={calculateWidth(size)}
         {...{
           indicatorColor,
           items: dropdownItems,
@@ -169,11 +186,14 @@ export const Profile: React.FC<ProfileProps> = ({
         <Container
           $hasDropdown
           $open={isOpen}
-          $size={size}
+          // $size={size}
           onClick={() => setIsOpen(!isOpen)}
           {...removeNullishProps(props)}
         >
-          <ProfileInner {...{ size, avatar, address, ensName }} />
+          <ProfileInner {...{
+            // size,
+            avatar, address, ensName }}
+          />
         </Container>
       </Dropdown>
     )
@@ -182,11 +202,14 @@ export const Profile: React.FC<ProfileProps> = ({
   return (
     <Container
       $open={isOpen}
-      $size={size}
+      // $size={size}
       data-testid={getTestId(props, 'profile')}
       {...removeNullishProps(props)}
     >
-      <ProfileInner {...{ size, avatar, address, ensName }} />
+      <ProfileInner {...{
+        // size,
+        avatar, address, ensName }}
+      />
     </Container>
   )
 }
diff --git a/components/src/components/molecules/RadioButton/RadioButton.tsx b/components/src/components/molecules/RadioButton/RadioButton.tsx
index 5d8a9d1d..2bd4f6ec 100644
--- a/components/src/components/molecules/RadioButton/RadioButton.tsx
+++ b/components/src/components/molecules/RadioButton/RadioButton.tsx
@@ -37,7 +37,7 @@ export type RadioButtonProps = {
   onBlur?: NativeInputProps['onBlur']
 } & Omit<FieldBaseProps, 'labelRight'> &
 Omit<
-  NativeInputProps,
+  BoxProps,
   | 'children'
   | 'value'
   | 'defaultValue'
@@ -56,8 +56,8 @@ const Mark = ({ $color, disabled, ...props }: BoxProps & { $color: Color }) => (
     pointerEvents="none"
     position="absolute"
     top="1/2"
-    transition="all 150ms ease-in-out"
-    translate="-50% -50%"
+    // transition="all 150ms ease-in-out"
+    // translate="-50% -50%"
     wh="3"
   />
 )
@@ -72,23 +72,23 @@ const Input = React.forwardRef<HTMLElement, BoxProps & { $color: Color }>(
         borderRadius="full"
         cursor={{ base: 'pointer', disabled: 'not-allowed' }}
         display="grid"
-        filter={{
-          base: brightness(1.0),
-          hover: brightness(1.05),
-          disabled: brightness(1),
-        }}
+        // filter={{
+        //   base: brightness(1.0),
+        //   hover: brightness(1.05),
+        //   disabled: brightness(1),
+        // }}
         flexBasis="5"
         flexGrow={0}
         flexShrink={0}
-        placeContent="center"
+        // placeContent="center"
         ref={ref}
         role="radio"
-        transform={{
-          base: translateY(0),
-          hover: translateY(-1),
-          disabled: translateY(0),
-        }}
-        transition="all 150ms ease-in-out"
+        // transform={{
+        //   base: translateY(0),
+        //   hover: translateY(-1),
+        //   disabled: translateY(0),
+        // }}
+        // transition="all 150ms ease-in-out"
         type="radio"
         wh="5"
       />
diff --git a/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx b/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
index 33aa4254..5c291bd0 100644
--- a/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
@@ -37,7 +37,7 @@ export type RadioButtonGroupProps = {
   onChange?: NativeInputProps['onChange']
   /** The handler for the blur event. */
   onBlur?: NativeInputProps['onBlur']
-} & Omit<NativeDivProps, 'onFocus' | 'onChange' | 'onBlur'>
+} & Omit<BoxProps, 'onFocus' | 'onChange' | 'onBlur'>
 
 export const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGroupProps>(
   (
diff --git a/components/src/components/molecules/Select/Select.tsx b/components/src/components/molecules/Select/Select.tsx
index 1f55adbd..cbc0aa5d 100644
--- a/components/src/components/molecules/Select/Select.tsx
+++ b/components/src/components/molecules/Select/Select.tsx
@@ -33,7 +33,7 @@ const CREATE_OPTION_VALUE = 'CREATE_OPTION_VALUE'
 export type Size = 'small' | 'medium'
 
 type ContainerProps = {
-  $size: Size
+  // $size: Size
   $disabled: boolean
   $hasError: boolean
   $validated: boolean
@@ -43,7 +43,9 @@ type ContainerProps = {
 
 const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
   (
-    { $size, $showDot, $hasError, $validated, $disabled, $readOnly, ...props },
+    {
+      // $size,
+      $showDot, $hasError, $validated, $disabled, $readOnly, ...props },
     ref,
   ) => (
     <Box
@@ -54,9 +56,9 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
         show: $showDot && !$disabled,
       })}
       cursor="pointer"
-      fontSize={getValueForSize($size, 'fontSize')}
-      height={getValueForSize($size, 'height')}
-      lineHeight={getValueForSize($size, 'lineHeight')}
+      // fontSize={getValueForSize($size, 'fontSize')}
+      // height={getValueForSize($size, 'height')}
+      // lineHeight={getValueForSize($size, 'lineHeight')}
       pointerEvents={$readOnly ? 'none' : 'all'}
       position="relative"
       ref={ref}
@@ -67,7 +69,7 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
 type SelectContainerProps = {
   $hasError: boolean
   $disabled: boolean
-  $size: Size
+  // $size: Size
   $readOnly: boolean
 }
 
@@ -75,7 +77,7 @@ const SelectContainer = ({
   $hasError,
   $disabled,
   $readOnly,
-  $size,
+  // $size,
   ...props
 }: BoxProps & SelectContainerProps) => (
   <Box
@@ -97,14 +99,14 @@ const SelectContainer = ({
     gap="2"
     height="full"
     overflow="hidden"
-    paddingLeft={getValueForSize($size, 'outerPadding')}
+    // paddingLeft={getValueForSize($size, 'outerPadding')}
   />
 )
 
 const RootInput = React.forwardRef<HTMLInputElement, BoxProps>((props, ref) => (
   <Box
     {...props}
-    appearance="none"
+    // appearance="none"
     as="input"
     overflow="hidden"
     position="absolute"
@@ -161,10 +163,12 @@ const SelectInput = React.forwardRef<HTMLInputElement, BoxProps>((props, ref) =>
 ))
 
 const SelectActionButton = ({
-  $size,
+  // $size,
   $disabled,
   ...props
-}: BoxProps & { $size: Size, $disabled: boolean }) => (
+}: BoxProps & {
+  // $size: Size,
+  $disabled: boolean }) => (
   <Box
     {...props}
     alignItems="center"
@@ -177,12 +181,12 @@ const SelectActionButton = ({
     margin="0"
     padding="0"
     paddingLeft="2"
-    paddingRight={getValueForSize($size, 'outerPadding')}
+    // paddingRight={getValueForSize($size, 'outerPadding')}
   >
     <Box
-      as={<CrossCircleSVG />}
+      as={CrossCircleSVG}
       display="block"
-      wh={getValueForSize($size, 'iconWidth')}
+      // wh={getValueForSize($size, 'iconWidth')}
     />
   </Box>
 )
@@ -190,11 +194,11 @@ const SelectActionButton = ({
 const ToggleMenuButton = ({
   $open,
   $direction,
-  $size,
+  // $size,
   $disabled,
   ...props
 }: BoxProps & {
-  $size: Size
+  // $size: Size
   $open: boolean
   $direction: Direction
   $disabled: boolean
@@ -215,17 +219,17 @@ const ToggleMenuButton = ({
       margin="0"
       padding="0"
       paddingLeft="2"
-      paddingRight={getValueForSize($size, 'outerPadding')}
+      // paddingRight={getValueForSize($size, 'outerPadding')}
     >
       <Box
-        as={<DownChevronSVG />}
+        as={DownChevronSVG}
         display="block"
-        fill="currentColor"
-        transform={rotate(rotation)}
-        transitionDuration="200"
+        // fill="currentColor"
+        // transform={rotate(rotation)}
+        // transitionDuration="200"
         transitionProperty="all"
         transitionTimingFunction="inOut"
-        wh={getValueForSize($size, 'iconWidth')}
+        // wh={getValueForSize($size, 'iconWidth')}
       />
     </Box>
   )
@@ -235,14 +239,14 @@ type SelectOptionContainerProps = {
   $state?: TransitionState['status'] | 'default'
   $direction?: Direction
   $rows?: number
-  $size?: Size
+  // $size?: Size
   $align?: 'left' | 'right'
 }
 const SelectOptionContainer = ({
   $state = 'default',
   $direction = 'down',
   // $rows,
-  $size = 'medium',
+  // $size = 'medium',
   $align,
   ...props
 }: BoxProps & SelectOptionContainerProps) => (
@@ -253,34 +257,34 @@ const SelectOptionContainer = ({
     borderRadius="2xLarge"
     borderStyle="solid"
     borderWidth="1x"
-    bottom={getValueForTransitionState($state, 'bottom', $direction)}
+    // bottom={getValueForTransitionState($state, 'bottom', $direction)}
     display={$state === 'exited' ? 'none' : 'block'}
-    fontSize={getValueForSize($size, 'fontSize')}
+    // fontSize={getValueForSize($size, 'fontSize')}
     left={$align === 'left' ? '0' : 'unset'}
     lineHeight="body"
     minWidth="full"
-    opacity={getValueForTransitionState($state, 'opacity', $direction)}
+    // opacity={getValueForTransitionState($state, 'opacity', $direction)}
     overflow="hidden"
     padding="2"
     position="absolute"
     right={$align === 'right' ? '0' : 'unset'}
-    top={getValueForTransitionState($state, 'top', $direction)}
-    transition="all 0.3s cubic-bezier(1, 0, 0.22, 1.6), z-index 0.3s linear"
-    visibility={getValueForTransitionState($state, 'visibility', $direction)}
-    zIndex={getValueForTransitionState($state, 'zIndex', $direction)}
+    // top={getValueForTransitionState($state, 'top', $direction)}
+    // transition="all 0.3s cubic-bezier(1, 0, 0.22, 1.6), z-index 0.3s linear"
+    // visibility={getValueForTransitionState($state, 'visibility', $direction)}
+    // zIndex={getValueForTransitionState($state, 'zIndex', $direction)}
   />
 )
 
 type SelectOptionListProps = {
   $rows?: number
   $direction: Direction
-  $size: Size
+  // $size: Size
 }
 
 const SelectOptionList = ({
   $rows,
   $direction,
-  $size = 'medium',
+  // $size = 'medium',
   children,
   ...props
 }: BoxProps & SelectOptionListProps) => {
@@ -291,7 +295,7 @@ const SelectOptionList = ({
         display="flex"
         flexDirection={$direction === 'up' ? 'column-reverse' : 'column'}
         hideDividers
-        maxHeight={getValueForSize($size, 'maxHeightFunc')($rows)}
+        // maxHeight={getValueForSize($size, 'maxHeightFunc')($rows)}
         paddingRight="1"
         width="full"
       >
@@ -306,7 +310,7 @@ const SelectOptionList = ({
       display="flex"
       flexDirection={$direction === 'up' ? 'column-reverse' : 'column'}
       gap="1"
-      justifyContent="space-between"
+      // justifyContent="space-between"
       overflow="hidden"
       wh="full"
     >
@@ -319,14 +323,14 @@ type SelectOptionRowProps = {
   $selected?: boolean
   $color?: Colors
   $highlighted?: boolean
-  $size: Size
+  // $size: Size
   option: SelectOptionProps
 }
 const SelectOptionRow = ({
   $selected,
   $highlighted,
   $color,
-  $size,
+  // $size,
   option,
   ...props
 }: BoxProps & SelectOptionRowProps) => {
@@ -347,14 +351,14 @@ const SelectOptionRow = ({
       color={{ base: $color || 'textPrimary', disabled: 'greyPrimary' }}
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
       display="flex"
-      flexBasis={getValueForSize($size, 'rowHeight')}
+      // flexBasis={getValueForSize($size, 'rowHeight')}
       flexGrow={0}
       flexShrink={0}
-      fontSize={getValueForSize($size, 'fontSize')}
+      // fontSize={getValueForSize($size, 'fontSize')}
       fontWeight="normal"
-      height={getValueForSize($size, 'rowHeight')}
+      // height={getValueForSize($size, 'rowHeight')}
       justifyContent="flex-start"
-      lineHeight={getValueForSize($size, 'lineHeight')}
+      // lineHeight={getValueForSize($size, 'lineHeight')}
       px="3"
       textAlign="left"
       transitionDuration={150}
@@ -475,7 +479,7 @@ export type SelectProps = {
   readOnly?: boolean
 } & FieldBaseProps & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'placeholder'> &
 Omit<
-  NativeDivProps,
+  BoxProps,
   | 'children'
   | 'id'
   | 'onChange'
@@ -820,7 +824,7 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
             $hasError={!!error}
             $readOnly={readOnly}
             $showDot={showDot}
-            $size={size}
+            // $size={size}
             $validated={!!validated}
             id={`combo-${id}`}
             ref={displayRef}
@@ -832,7 +836,8 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
               $disabled={!!disabled}
               $hasError={!!error}
               $readOnly={readOnly}
-              $size={size}
+              // $size={size}
+              {...{}}
             >
               <RootInput
                 ref={inputRef}
@@ -892,7 +897,7 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
                 ? (
                     <SelectActionButton
                       $disabled={disabled}
-                      $size={size}
+                      // $size={size}
                       type="button"
                       onClick={handleInputClear}
                     >
@@ -905,7 +910,7 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
                           $direction={direction}
                           $disabled={disabled}
                           $open={isOpen}
-                          $size={size}
+                          // $size={size}
                           id="chevron"
                           type="button"
                           onClick={() => setMenuOpen(!menuOpen)}
@@ -919,7 +924,7 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
               $align={align}
               $direction={direction}
               $rows={rows}
-              $size={size}
+              // $size={size}
               $state={state.status}
               id={`listbox-${id}`}
               role="listbox"
@@ -929,7 +934,7 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
               <SelectOptionList
                 $direction={direction}
                 $rows={rows}
-                $size={size}
+                // $size={size}
               >
                 {visibleOptions.length === 0 && (
                   <NoResultsContainer>{emptyListMessage}</NoResultsContainer>
@@ -939,9 +944,9 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
                     {...{
                       $selected: option?.value === value,
                       $highlighted: index === highlightedIndex,
-                      gap: cssVars.space[innerPadding],
+                      // gap: cssVars.space[innerPadding],
                       $color: option.color,
-                      $size: size,
+                      // $size: size,
                     }}
                     data-option-index={index}
                     data-testid={`select-option-${option.value}`}
diff --git a/components/src/components/molecules/Select/utils/getValueForTransitionState.ts b/components/src/components/molecules/Select/utils/getValueForTransitionState.ts
index 2daf9248..b8c348a8 100644
--- a/components/src/components/molecules/Select/utils/getValueForTransitionState.ts
+++ b/components/src/components/molecules/Select/utils/getValueForTransitionState.ts
@@ -1,12 +1,10 @@
 import type { TransitionState } from 'react-transition-state'
 
-import type { Sprinkles } from '@/src/css/rainbow-spinkles.css'
-
 import type { Direction } from '../Select'
 
 type Properties = {
   zIndex: string
-  visibility: Sprinkles['visibility']
+  // visibility: Sprinkles['visibility']
   top: string
   bottom: string
   opacity: string
@@ -20,14 +18,14 @@ const transitionMap: {
   entered: {
     up: {
       zIndex: '20',
-      visibility: 'visible',
+      // visibility: 'visible',
       top: 'auto',
       bottom: 'calc(100% + 0.5rem)',
       opacity: '1',
     },
     down: {
       zIndex: '20',
-      visibility: 'visible',
+      // visibility: 'visible',
       top: 'calc(100% + 0.5rem)',
       bottom: 'auto',
       opacity: '1',
@@ -36,14 +34,14 @@ const transitionMap: {
   default: {
     up: {
       zIndex: '1',
-      visibility: 'hidden',
+      // visibility: 'hidden',
       top: 'auto',
       bottom: 'calc(100% - 3rem)',
       opacity: '0',
     },
     down: {
       zIndex: '1',
-      visibility: 'hidden',
+      // visibility: 'hidden',
       top: 'calc(100% - 3rem)',
       bottom: 'auto',
       opacity: '0',
diff --git a/components/src/components/molecules/Slider/Slider.tsx b/components/src/components/molecules/Slider/Slider.tsx
index 9b1a6bb3..48fe94ae 100644
--- a/components/src/components/molecules/Slider/Slider.tsx
+++ b/components/src/components/molecules/Slider/Slider.tsx
@@ -34,7 +34,7 @@ export type SliderProps = FieldBaseProps & {
   /** The handler for focus events. */
   onFocus?: NativeInputProps['onFocus']
 } & Omit<
-  NativeInputProps,
+  BoxProps,
     'children' | 'value' | 'defaultValue' | 'aria-invalid' | 'type'
 >
 
@@ -42,13 +42,13 @@ const SliderComponent = React.forwardRef<HTMLElement, BoxProps>(
   (props, ref) => (
     <Box
       {...props}
-      appearance="none"
+      // appearance="none"
       as="input"
       backgroundColor={{ base: 'blueSurface', hover: 'blueLight' }}
       borderRadius="full"
       className={styles.slider}
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
-      filter={{ base: 'grayscale(0)', disabled: 'grayscale(100%)' }}
+      // filter={{ base: 'grayscale(0)', disabled: 'grayscale(100%)' }}
       height="1.5"
       opacity={1}
       ref={ref}
diff --git a/components/src/components/molecules/Textarea/Textarea.tsx b/components/src/components/molecules/Textarea/Textarea.tsx
index 2b051d7f..94390ba2 100644
--- a/components/src/components/molecules/Textarea/Textarea.tsx
+++ b/components/src/components/molecules/Textarea/Textarea.tsx
@@ -47,21 +47,21 @@ const Container = ({
     display="flex"
     position="relative"
     transitionDuration={150}
-    transitionProperty="color, border-color, background-color"
+    // transitionProperty="color, border-color, background-color"
     transitionTimingFunction="inOut"
   />
 )
 
 type TextAreaProps = {
   $error?: boolean
-  $size: TextareaProps['size']
+  $size?: TextareaProps['size']
   $hasAction?: boolean
   $alwaysShowAction?: boolean
 }
 const TextArea = React.forwardRef<HTMLElement, BoxProps & TextAreaProps>(
   (
     {
-      $size = 'medium',
+      // $size = 'medium',
       $hasAction,
       $error,
       $alwaysShowAction,
@@ -90,35 +90,35 @@ const TextArea = React.forwardRef<HTMLElement, BoxProps & TextAreaProps>(
       color={{ base: 'textPrimary', disabled: 'greyPrimary' }}
       disabled={disabled}
       display="flex"
-      fontSize={getValueForSize($size, 'fontSize')}
+      // fontSize={getValueForSize($size, 'fontSize')}
       fontWeight="normal"
       fontFamily="inherit"
-      lineHeight={getValueForSize($size, 'fontSize')}
+      // lineHeight={getValueForSize($size, 'fontSize')}
       minHeight="14"
-      outline="none"
+      // outline="none"
       overflow="hidden"
-      paddingLeft={getValueForSize($size, 'paddingX')}
-      paddingRight={getValueForSize(
-        $size,
-        $hasAction ? 'paddingAction' : 'paddingX',
-      )}
+      // paddingLeft={getValueForSize($size, 'paddingX')}
+      // paddingRight={getValueForSize(
+      //   $size,
+      //   $hasAction ? 'paddingAction' : 'paddingX',
+      // )}
       position="relative"
-      py={getValueForSize($size, 'paddingY')}
+      // py={getValueForSize($size, 'paddingY')}
       readOnly={readOnly}
       ref={ref}
-      resize="none"
-      transition="all 0.3s ease-in-out"
+      // resize="none"
+      // transition="all 0.3s ease-in-out"
       width="full"
     />
   ),
 )
 
 const ActionButton = ({
-  $size = 'medium',
+  // $size = 'medium',
   $icon,
   ...props
-}: BoxProps & { $size: Size, $icon: React.ReactNode }) => {
-  const icon = React.isValidElement($icon) ? $icon : <CrossCircleSVG />
+}: BoxProps & { $size?: Size, $icon?: React.FC }) => {
+  const icon = React.isValidElement($icon) ? $icon : CrossCircleSVG
   return (
     <Box
       {...props}
@@ -131,15 +131,15 @@ const ActionButton = ({
       position="absolute"
       right="0"
       top="0"
-      transform={{ base: translateY(0), hover: translateY(-1) }}
-      transition="all 0.1s ease-in-out"
+      // transform={{ base: translateY(0), hover: translateY(-1) }}
+      // transition="all 0.1s ease-in-out"
       type="button"
-      wh={getValueForSize($size, 'actionSize')}
+      // wh={getValueForSize($size, 'actionSize')}
     >
       <Box
         as={icon}
-        transition="all 0.1s ease-in-out"
-        wh={getValueForSize($size, 'iconSize')}
+        // transition="all 0.1s ease-in-out"
+        // wh={getValueForSize($size, 'iconSize')}
       />
     </Box>
   )
@@ -183,7 +183,7 @@ export type TextareaProps = Omit<FieldBaseProps, 'inline'> & {
   /** If true, shows a status dot of the current state of validation */
   showDot?: boolean
   /** A replacement icon for the action button */
-  actionIcon?: React.ReactNode
+  actionIcon?: React.FC
   /** If true, will show the action button even when there is not input */
   alwaysShowAction?: boolean
   /** A custom handler that replaces the clear handler */
@@ -195,7 +195,7 @@ export type TextareaProps = Omit<FieldBaseProps, 'inline'> & {
   /** The handler for focus events. */
   onFocus?: NativeTextareaProps['onFocus']
 } & Omit<
-  NativeTextareaProps,
+  BoxProps,
     'children' | 'value' | 'defaultValue' | 'aria-invalid'
 >
 
@@ -306,7 +306,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
               }}
               $error={hasError}
               $hasAction={hasAction}
-              $size={size}
+              // $size={size}
               autoCorrect={autoCorrect}
               autoFocus={autoFocus}
               defaultValue={defaultValue}
@@ -327,11 +327,11 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             {showAction && (
               <ActionButton
                 $icon={actionIcon}
-                $size={size}
+                // $size={size}
                 type="button"
                 onClick={handleClickAction}
               >
-                {actionIcon || <CrossCircleSVG />}
+                {/* {actionIcon || <CrossCircleSVG />} */}
               </ActionButton>
             )}
           </Container>
diff --git a/components/src/components/molecules/Textarea/utils/getValueForSize.ts b/components/src/components/molecules/Textarea/utils/getValueForSize.ts
index f8f0fc35..4d6d0053 100644
--- a/components/src/components/molecules/Textarea/utils/getValueForSize.ts
+++ b/components/src/components/molecules/Textarea/utils/getValueForSize.ts
@@ -1,4 +1,6 @@
-import type { Size } from '../Textarea'
+// import type { Size } from '../Textarea'
+
+type Size = 'small' | 'medium'
 
 type Properties = {
   actionSize: string
diff --git a/components/src/components/molecules/ThemeToggle/ThemeToggle.tsx b/components/src/components/molecules/ThemeToggle/ThemeToggle.tsx
index 16ee915a..5b5bf0e0 100644
--- a/components/src/components/molecules/ThemeToggle/ThemeToggle.tsx
+++ b/components/src/components/molecules/ThemeToggle/ThemeToggle.tsx
@@ -18,12 +18,12 @@ export type ThemeToggleProps = {
   size?: Size
   color?: Color
   mode?: Mode
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>
+} & Omit<BoxProps, 'size'>
 
 const Container = (props: BoxProps) => (
   <Box
     {...props}
-    height="fit-content"
+    // height="fit-content"
     position="relative"
     width="fit"
   />
@@ -42,16 +42,16 @@ const Label = ({
     cursor="pointer"
     display="flex"
     fontSize="small"
-    fontWeight={$size === 'extraSmall' ? '$normal' : 'bold'}
+    // fontWeight={$size === 'extraSmall' ? '$normal' : 'bold'}
     justifyContent="center"
     left="1/2"
     pointerEvents="none"
     position="absolute"
     top="1/2"
-    transform={$mode === 'dark' ? 'translateX(-50%)' : 'translateX(50%)'}
-    transition="color 0.1s linear"
-    translate="-50% -50%"
-    wh={getValueForSize($size, 'knobSize')}
+    // transform={$mode === 'dark' ? 'translateX(-50%)' : 'translateX(50%)'}
+    // transition="color 0.1s linear"
+    // translate="-50% -50%"
+    // wh={getValueForSize($size, 'knobSize')}
   />
 )
 
@@ -65,12 +65,12 @@ const Checkbox = React.forwardRef<HTMLElement, BoxProps & { $size: Size }>(
       borderRadius="full"
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
       display="flex"
-      height={getValueForSize($size, 'height')}
+      // height={getValueForSize($size, 'height')}
       justifyContent="center"
       position="relative"
       ref={ref}
       type="checkbox"
-      width={getValueForSize($size, 'width')}
+      // width={getValueForSize($size, 'width')}
     />
   ),
 )
@@ -82,16 +82,16 @@ const Slider = ({
 }: BoxProps & { $size: Size, $color: Color }) => (
   <Box
     {...props}
-    backgroundColor={getValidatedColor($color)}
+    // backgroundColor={getValidatedColor($color)}
     borderRadius="full"
     display="block"
     left="1/2"
     pointerEvents="none"
     position="absolute"
     top="1/2"
-    transition="transform 0.3s ease-in-out, background-color 0.1s ease-in-out"
-    translate="-50% -50%"
-    wh={getValueForSize($size, 'knobSize')}
+    // transition="transform 0.3s ease-in-out, background-color 0.1s ease-in-out"
+    // translate="-50% -50%"
+    // wh={getValueForSize($size, 'knobSize')}
   />
 )
 
diff --git a/components/src/components/molecules/Toggle/Toggle.tsx b/components/src/components/molecules/Toggle/Toggle.tsx
index d95a204d..44e25f05 100644
--- a/components/src/components/molecules/Toggle/Toggle.tsx
+++ b/components/src/components/molecules/Toggle/Toggle.tsx
@@ -12,7 +12,7 @@ export type Size = 'small' | 'medium' | 'large'
 export type ToggleProps = {
   size?: Size
   color?: Color
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>
+} & Omit<BoxProps, 'type' | 'size'>
 
 const CheckBox = React.forwardRef<
   HTMLElement,
@@ -22,21 +22,21 @@ const CheckBox = React.forwardRef<
     {...props}
     alignItems="center"
     as="input"
-    backgroundColor={{
-      base: 'border',
-      checked: getValidatedColor($color),
-      disabled: 'border',
-    }}
+    // backgroundColor={{
+    //   base: 'border',
+    //   checked: getValidatedColor($color),
+    //   disabled: 'border',
+    // }}
     borderRadius="full"
     cursor={{ base: 'pointer', disabled: 'not-allowed' }}
     display="flex"
-    height={getValueForSize($size, 'height')}
+    // height={getValueForSize($size, 'height')}
     justifyContent="center"
     position="relative"
     ref={ref}
-    transition="background-color 0.1s ease-in-out"
+    // transition="background-color 0.1s ease-in-out"
     type="checkbox"
-    width={getValueForSize($size, 'width')}
+    // width={getValueForSize($size, 'width')}
   />
 ))
 
diff --git a/components/src/components/molecules/Tooltip/Tooltip.tsx b/components/src/components/molecules/Tooltip/Tooltip.tsx
index 9770b66e..756f58fd 100644
--- a/components/src/components/molecules/Tooltip/Tooltip.tsx
+++ b/components/src/components/molecules/Tooltip/Tooltip.tsx
@@ -17,22 +17,22 @@ import clsx from 'clsx'
 import type { Color } from '@/src/tokens/color'
 
 type TooltipPopoverElementProps = {
-  $background: Color
-  $placement: DynamicPopoverSide
-  $mobilePlacement: DynamicPopoverSide
+  // $background: Color
+  // $placement: DynamicPopoverSide
+  // $mobilePlacement: DynamicPopoverSide
 }
 
 const TooltipPopoverElement = ({
-  $background = 'backgroundPrimary',
-  $placement,
-  $mobilePlacement,
+  // $background = 'backgroundPrimary',
+  // $placement,
+  // $mobilePlacement,
   children,
   className,
   ...props
 }: BoxProps & TooltipPopoverElementProps) => (
   <Box
     {...props}
-    backgroundColor={$background}
+    // backgroundColor={$background}
     borderRadius="large"
     boxSizing="border-box"
     className={clsx(className, styles.popover)}
@@ -42,71 +42,71 @@ const TooltipPopoverElement = ({
   >
     {children}
     <Box
-      borderBottomColor={{
-        base: getValueForPlacement(
-          $mobilePlacement,
-          'borderBottomColorFunction',
-        )($background),
-        sm: getValueForPlacement(
-          $placement,
-          'borderBottomColorFunction',
-        )($background),
-      }}
-      borderLeftColor={{
-        base: getValueForPlacement(
-          $mobilePlacement,
-          'borderLeftColorFunction',
-        )($background),
-        sm: getValueForPlacement(
-          $placement,
-          'borderLeftColorFunction',
-        )($background),
-      }}
-      borderRightColor={{
-        base: getValueForPlacement(
-          $mobilePlacement,
-          'borderRightColorFunction',
-        )($background),
-        sm: getValueForPlacement(
-          $placement,
-          'borderRightColorFunction',
-        )($background),
-      }}
+      // borderBottomColor={{
+      //   base: getValueForPlacement(
+      //     $mobilePlacement,
+      //     'borderBottomColorFunction',
+      //   )($background),
+      //   sm: getValueForPlacement(
+      //     $placement,
+      //     'borderBottomColorFunction',
+      //   )($background),
+      // }}
+      // borderLeftColor={{
+      //   base: getValueForPlacement(
+      //     $mobilePlacement,
+      //     'borderLeftColorFunction',
+      //   )($background),
+      //   sm: getValueForPlacement(
+      //     $placement,
+      //     'borderLeftColorFunction',
+      //   )($background),
+      // }}
+      // borderRightColor={{
+      //   base: getValueForPlacement(
+      //     $mobilePlacement,
+      //     'borderRightColorFunction',
+      //   )($background),
+      //   sm: getValueForPlacement(
+      //     $placement,
+      //     'borderRightColorFunction',
+      //   )($background),
+      // }}
       borderStyle="solid"
-      borderTopColor={{
-        base: getValueForPlacement(
-          $mobilePlacement,
-          'borderTopColorFunction',
-        )($background),
-        sm: getValueForPlacement(
-          $placement,
-          'borderTopColorFunction',
-        )($background),
-      }}
+      // borderTopColor={{
+      //   base: getValueForPlacement(
+      //     $mobilePlacement,
+      //     'borderTopColorFunction',
+      //   )($background),
+      //   sm: getValueForPlacement(
+      //     $placement,
+      //     'borderTopColorFunction',
+      //   )($background),
+      // }}
       borderWidth="10x"
-      bottom={{
-        base: getValueForPlacement($mobilePlacement, 'bottom'),
-        sm: getValueForPlacement($placement, 'bottom'),
-      }}
+      // bottom={{
+      //   base: getValueForPlacement($mobilePlacement, 'bottom'),
+      //   sm: getValueForPlacement($placement, 'bottom'),
+      // }}
       display="initial"
       height="0"
-      left={{
-        base: getValueForPlacement($mobilePlacement, 'left'),
-        sm: getValueForPlacement($placement, 'left'),
-      }}
-      margin={{
-        xs: getValueForPlacement($mobilePlacement, 'margin'),
-        sm: getValueForPlacement($placement, 'margin'),
-      }}
+      // left={{
+      //   base: getValueForPlacement($mobilePlacement, 'left'),
+      //   sm: getValueForPlacement($placement, 'left'),
+      // }}
+      // margin={{
+      //   xs: getValueForPlacement($mobilePlacement, 'margin'),
+      //   sm: getValueForPlacement($placement, 'margin'),
+      // }}
       position="absolute"
-      right={{
-        base: getValueForPlacement($mobilePlacement, 'right'),
-        sm: getValueForPlacement($placement, 'right'),
-      }}
-      top={{
-        base: getValueForPlacement($mobilePlacement, 'top'),
-        sm: getValueForPlacement($placement, 'top'),
-      }}
+      // right={{
+      //   base: getValueForPlacement($mobilePlacement, 'right'),
+      //   sm: getValueForPlacement($placement, 'right'),
+      // }}
+      // top={{
+      //   base: getValueForPlacement($mobilePlacement, 'top'),
+      //   sm: getValueForPlacement($placement, 'top'),
+      // }}
       width="0"
     />
   </Box>
@@ -122,9 +122,9 @@ const TooltipPopover = ({
 }: TooltipPopoverProps) => {
   return (
     <TooltipPopoverElement
-      $background={background}
-      $mobilePlacement={mobilePlacement}
-      $placement={placement}
+      // $background={background}
+      // $mobilePlacement={mobilePlacement}
+      // $placement={placement}
       data-testid="tooltip-popover"
     >
       {children}
diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx
index 14413b0e..da577e10 100644
--- a/components/src/components/organisms/Dialog/Dialog.tsx
+++ b/components/src/components/organisms/Dialog/Dialog.tsx
@@ -12,7 +12,7 @@ import { DialogContent } from './DialogContent'
 import type { BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 import { getValueForAlert } from './utils/getValueForAlert'
-import { getValueForStepType } from './utils/getValueForStepType'
+// import { getValueForStepType } from './utils/getValueForStepType'
 import { Typography } from '../../atoms'
 import { Modal } from '../../molecules'
 
@@ -30,13 +30,13 @@ const CloseButton = (props: BoxProps) => (
     position="absolute"
     right="2"
     top="2"
-    transform={{ base: translateY(0), hover: translateY(-1) }}
+    // transform={{ base: translateY(0), hover: translateY(-1) }}
     transitionDuration={150}
     transitionProperty="all"
     transitionTimingFunction="inOut"
     wh="8"
   >
-    <Box as={<CrossSVG />} color="greyPrimary" display="block" wh="4" />
+    <Box as={CrossSVG} color="greyPrimary" display="block" wh="4" />
   </Box>
 )
 
@@ -51,7 +51,7 @@ const StyledCard = (props: BoxProps) => (
     display="flex"
     flexDirection="column"
     gap={{ xs: '4', sm: '6' }}
-    maxHeight={{ xs: '80vh', sm: 'min(90vh, 144)' }}
+    // maxHeight={{ xs: '80vh', sm: 'min(90vh, 144)' }}
     maxWidth={{ xs: 'unset', sm: '80vw' }}
     minWidth={{ xs: 'unset', sm: '64' }}
     overflow="hidden"
@@ -64,13 +64,13 @@ const StyledCard = (props: BoxProps) => (
 type NonNullableAlert = NonNullable<WithAlert['alert']>
 
 const Icon = ({ $alert, ...props }: BoxProps & { $alert: NonNullableAlert }) => {
-  const Icon = ['error', 'warning'].includes($alert) ? <AlertSVG /> : <EthSVG />
+  const Icon = ['error', 'warning'].includes($alert) ? AlertSVG : EthSVG
   return (
     <Box
       {...props}
-      backgroundColor={getValueForAlert($alert, 'backgroundColor')}
+      // backgroundColor={getValueForAlert($alert, 'backgroundColor')}
       borderRadius="full"
-      color={getValueForAlert($alert, 'color')}
+      // color={getValueForAlert($alert, 'color')}
       flexBasis="8"
       flexGrow={0}
       flexShrink={0}
@@ -79,7 +79,7 @@ const Icon = ({ $alert, ...props }: BoxProps & { $alert: NonNullableAlert }) =>
       <Box
         as={Icon}
         display="block"
-        transform={getValueForAlert($alert, 'svgTransform')}
+        // transform={getValueForAlert($alert, 'svgTransform')}
         wh="full"
       />
     </Box>
@@ -136,11 +136,11 @@ export type StepType = 'notStarted' | 'inProgress' | 'completed'
 const StepItem = ({ $type, ...props }: BoxProps & { $type: StepType }) => (
   <Box
     {...props}
-    backgroundColor={getValueForStepType($type, 'backgroundColor')}
-    borderColor={getValueForStepType($type, 'borderColor')}
+    // backgroundColor={getValueForStepType($type, 'backgroundColor')}
+    // borderColor={getValueForStepType($type, 'borderColor')}
     borderRadius="full"
     borderStyle="solid"
-    borderWidth={getValueForStepType($type, 'borderWidth')}
+    // borderWidth={getValueForStepType($type, 'borderWidth')}
     wh="3.5"
   />
 )
diff --git a/components/src/components/organisms/Dialog/DialogContent.tsx b/components/src/components/organisms/Dialog/DialogContent.tsx
index edc7d51f..8d9a3961 100644
--- a/components/src/components/organisms/Dialog/DialogContent.tsx
+++ b/components/src/components/organisms/Dialog/DialogContent.tsx
@@ -47,28 +47,28 @@ const Container = forwardRef<
     flexDirection="column"
     gap="4"
     justifyContent="flex-start"
-    margin={{
-      base: $fullWidth
-        ? `margin: 0 -${space['4']};`
-        : `0 -${space[$horizontalPadding]}`,
-      sm: $fullWidth
-        ? `margin: 0 -${space['6']}`
-        : `0 -${space[$horizontalPadding]}`,
-    }}
+    // margin={{
+    //   base: $fullWidth
+    //     ? `margin: 0 -${space['4']};`
+    //     : `0 -${space[$horizontalPadding]}`,
+    //   sm: $fullWidth
+    //     ? `margin: 0 -${space['6']}`
+    //     : `0 -${space[$horizontalPadding]}`,
+    // }}
     maxHeight="60vh"
-    maxWidth={{
-      base: 'viewWidth',
-      sm: `calc(${space['128']} + 2 * ${space[$horizontalPadding]})`,
-    }}
+    // maxWidth={{
+    //   base: 'viewWidth',
+    //   sm: `calc(${space['128']} + 2 * ${space[$horizontalPadding]})`,
+    // }}
     overflow="hidden"
-    width={{
-      sm: $fullWidth
-        ? '80vw'
-        : `calc(80vw - 2 * ${space['6']} + 2 * ${space[$horizontalPadding]})`,
-      base: $fullWidth
-        ? `width: calc(100% + 2 * ${space['4']});`
-        : `calc(100% + 2 * ${space[$horizontalPadding]})`,
-    }}
+    // width={{
+    //   sm: $fullWidth
+    //     ? '80vw'
+    //     : `calc(80vw - 2 * ${space['6']} + 2 * ${space[$horizontalPadding]})`,
+    //   base: $fullWidth
+    //     ? `width: calc(100% + 2 * ${space['4']});`
+    //     : `calc(100% + 2 * ${space[$horizontalPadding]})`,
+    // }}
   />
 ))
 const ScrollBoxContent = ({
diff --git a/components/src/components/organisms/Dialog/utils/getValueForStepType.ts b/components/src/components/organisms/Dialog/utils/getValueForStepType.ts
index c3df69e2..444c31d0 100644
--- a/components/src/components/organisms/Dialog/utils/getValueForStepType.ts
+++ b/components/src/components/organisms/Dialog/utils/getValueForStepType.ts
@@ -1,9 +1,8 @@
-import type { Sprinkles } from '@/src/css/rainbow-spinkles.css'
-
 import type { StepType } from '../Dialog'
 
 type Properties = {
-  borderWidth: Sprinkles['borderWidth']
+  // borderWidth: Sprinkles['borderWidth']
+  borderWidth: string
   borderColor: string
   backgroundColor: string
 }
diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx
index e48f2b33..bf5b5665 100644
--- a/components/src/components/organisms/Toast/Toast.tsx
+++ b/components/src/components/organisms/Toast/Toast.tsx
@@ -16,7 +16,7 @@ import type { Space } from '@/src/tokens'
 const CloseIcon = (props: BoxProps) => (
   <Box
     {...props}
-    as={<CrossSVG />}
+    as={CrossSVG}
     cursor="pointer"
     opacity={{ base: 0.5, hover: 0.7 }}
     padding="1.5"
@@ -48,41 +48,41 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
     <Box
       {...props}
       alignItems="flex-start"
-      backdropFilter="blur(16px)"
-      backgroundColor="rbga(255,255,255,0.8)"
+      // backdropFilter="blur(16px)"
+      // backgroundColor="rbga(255,255,255,0.8)"
       borderColor="greySurface"
       borderRadius="2xLarge"
       borderStyle="solid"
       borderWidth="1x"
-      bottom={match($mobile)
-        .with(true, () => 'unset')
-        .otherwise(() => ($bottom ? `$${$bottom}` : 'unset'))}
-      boxShadow="0.02"
+      // bottom={match($mobile)
+      //   .with(true, () => 'unset')
+      //   .otherwise(() => ($bottom ? `$${$bottom}` : 'unset'))}
+      // boxShadow="0.02"
       display="flex"
       flexDirection="column"
       justifyContent="center"
-      left={match($mobile)
-        .with(true, () => ($popped ? '2.5%' : '3.75%'))
-        .otherwise(() => ($left ? `$${$left}` : 'unset'))}
-      maxWidth={match($mobile)
-        .with(true, () => 'unset')
-        .otherwise(() => '112')}
+      // left={match($mobile)
+      //   .with(true, () => ($popped ? '2.5%' : '3.75%'))
+      //   .otherwise(() => ($left ? `$${$left}` : 'unset'))}
+      // maxWidth={match($mobile)
+      //   .with(true, () => 'unset')
+      //   .otherwise(() => '112')}
       opacity={$state.status === 'entered' ? 1 : 0}
       padding="4.5"
       position="fixed"
       ref={ref}
-      right={match($mobile)
-        .with(true, () => 'unset')
-        .otherwise(() => ($right ? `$${$right}` : 'unset'))}
-      top={match($mobile)
-        .with(true, () => 'calc(100vh / 100 * 2.5)')
-        .otherwise(() => ($top ? `$${$top}` : 'unset'))}
-      touchAction={$popped ? 'none' : 'unset'}
-      transform={$state.status === 'entered' ? translateY(0) : translateY(-64)}
+      // right={match($mobile)
+      //   .with(true, () => 'unset')
+      //   .otherwise(() => ($right ? `$${$right}` : 'unset'))}
+      // top={match($mobile)
+      //   .with(true, () => 'calc(100vh / 100 * 2.5)')
+      //   .otherwise(() => ($top ? `$${$top}` : 'unset'))}
+      // touchAction={$popped ? 'none' : 'unset'}
+      // transform={$state.status === 'entered' ? translateY(0) : translateY(-64)}
       transitionDuration={300}
       transitionProperty="all"
       transitionTimingFunction="popIn"
-      width={$popped ? '95%' : '92.5%'}
+      // width={$popped ? '95%' : '92.5%'}
       zIndex={10000}
     />
   ),
@@ -93,7 +93,7 @@ const Draggable = () => (
     alignItems="center"
     display="flex"
     justifyContent="center"
-    marginBottom="calc(-1 * 0.5rem)"
+    // marginBottom="calc(-1 * 0.5rem)"
     paddingTop="3"
     width="full"
   >
@@ -120,7 +120,7 @@ export type ToastProps = {
   right?: Space
   bottom?: Space
   variant?: 'touch' | 'desktop'
-} & Omit<NativeDivProps, 'title'>
+} & Omit<BoxProps, 'title'>
 
 type InternalProps = {
   state: TransitionState
diff --git a/components/src/css/sprinkles.css.ts b/components/src/css/sprinkles.css.ts
index ee45f3e8..d28fba93 100644
--- a/components/src/css/sprinkles.css.ts
+++ b/components/src/css/sprinkles.css.ts
@@ -40,8 +40,8 @@ const responsivePropeties = defineProperties({
     alignSelf: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'inherit'],
     alignItems: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'inherit'],
     justifySelf: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'inherit'],
-    justifyContent: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'inherit'],
-    display: ['none', 'block', 'flex', 'inline-block', 'grid', 'table', 'inherit', 'initial'],
+    justifyContent: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'inherit', 'space-between'],
+    display: ['none', 'block', 'flex', 'inline-block', 'grid', 'table', 'inherit', 'initial', 'inline'],
     flexDirection: ['row', 'row-reverse', 'column', 'column-reverse', 'inherit'],
     flex: [1, '0 0 1px', 'auto', 'initial', 'none', 'inherit'],
     flexShrink: [0, 1, 2, 'inherit'],
diff --git a/components/vite.config.ts.timestamp-1725815945518-422a86fef5bcc.mjs b/components/vite.config.ts.timestamp-1725815945518-422a86fef5bcc.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815945518-422a86fef5bcc.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815947765-fd9a4f4b2778b.mjs b/components/vite.config.ts.timestamp-1725815947765-fd9a4f4b2778b.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815947765-fd9a4f4b2778b.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815950293-41439afa59d5d.mjs b/components/vite.config.ts.timestamp-1725815950293-41439afa59d5d.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815950293-41439afa59d5d.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEsRUFDUixPQUFTO0FBQUEsRUFDVCxTQUFXO0FBQUEsSUFDVCxLQUFLO0FBQUEsTUFDSCxRQUFVO0FBQUEsTUFDVixTQUFXO0FBQUEsTUFDWCxPQUFTO0FBQUEsSUFDWDtBQUFBLElBQ0EsZUFBZTtBQUFBLE1BQ2IsUUFBVTtBQUFBLE1BQ1YsU0FBVztBQUFBLElBQ2I7QUFBQSxFQUNGO0FBQUEsRUFDQSxhQUFlO0FBQUEsSUFDYjtBQUFBLElBQ0E7QUFBQSxJQUNBO0FBQUEsRUFDRjtBQUFBLEVBQ0EsT0FBUztBQUFBLElBQ1A7QUFBQSxFQUNGO0FBQUEsRUFDQSxZQUFjO0FBQUEsRUFDZCxTQUFXO0FBQUEsRUFDWCxTQUFXO0FBQUEsSUFDVCxPQUFTO0FBQUEsSUFDVCxlQUFlO0FBQUEsSUFDZixNQUFRO0FBQUEsSUFDUixZQUFZO0FBQUEsSUFDWixjQUFjO0FBQUEsSUFDZCxTQUFXO0FBQUEsSUFDWCxNQUFRO0FBQUEsSUFDUixLQUFPO0FBQUEsRUFDVDtBQUFBLEVBQ0EsY0FBZ0I7QUFBQSxJQUNkLDhCQUE4QjtBQUFBLElBQzlCLE1BQVE7QUFBQSxJQUNSLDBCQUEwQjtBQUFBLElBQzFCLGNBQWM7QUFBQSxFQUNoQjtBQUFBLEVBQ0EsaUJBQW1CO0FBQUEsSUFDakIsd0JBQXdCO0FBQUEsSUFDeEIsNkJBQTZCO0FBQUEsSUFDN0IsMEJBQTBCO0FBQUEsSUFDMUIsK0JBQStCO0FBQUEsSUFDL0IsZUFBZTtBQUFBLElBQ2YsZ0JBQWdCO0FBQUEsSUFDaEIsb0JBQW9CO0FBQUEsSUFDcEIsb0NBQW9DO0FBQUEsSUFDcEMsd0JBQXdCO0FBQUEsSUFDeEIsNEJBQTRCO0FBQUEsSUFDNUIsNEJBQTRCO0FBQUEsSUFDNUIsZ0NBQWdDO0FBQUEsSUFDaEMsT0FBUztBQUFBLElBQ1QsT0FBUztBQUFBLElBQ1QsYUFBYTtBQUFBLElBQ2IsTUFBUTtBQUFBLElBQ1IsbUJBQW1CO0FBQUEsSUFDbkIsdUJBQXVCO0FBQUEsSUFDdkIsUUFBVTtBQUFBLEVBQ1o7QUFBQSxFQUNBLGtCQUFvQjtBQUFBLElBQ2xCLE9BQVM7QUFBQSxJQUNULGFBQWE7QUFBQSxFQUNmO0FBQ0Y7OztBRGxFQSxPQUFPLFVBQVU7QUFDakIsT0FBTyxlQUFlO0FBTHRCLElBQU0sbUNBQW1DO0FBT3pDLElBQU8sc0JBQVEsYUFBYSxDQUFDLEVBQUUsS0FBSyxNQUFNO0FBQ3hDLFNBQVE7QUFBQSxJQUNOLFFBQVE7QUFBQSxNQUNOLElBQUk7QUFBQSxRQUNGLE9BQU8sQ0FBQyxJQUFJO0FBQUEsTUFDZDtBQUFBLElBQ0Y7QUFBQSxJQUNBLE9BQU87QUFBQSxNQUNMLFFBQVE7QUFBQSxNQUNSLEtBQUs7QUFBQSxRQUNILE9BQU87QUFBQSxRQUNQLFVBQVUsWUFBVSxTQUFTLFdBQVcsUUFBUSxRQUFRLElBQUk7QUFBQSxRQUM1RCxTQUFTLENBQUMsTUFBTSxLQUFLO0FBQUEsTUFDdkI7QUFBQSxNQUNBLGVBQWU7QUFBQSxRQUNiLFVBQVUsT0FBTyxLQUFLLGdCQUFJLGdCQUFnQjtBQUFBLE1BQzVDO0FBQUEsSUFDRjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsT0FBTztBQUFBLFFBQ0w7QUFBQSxVQUNFLE1BQU07QUFBQSxVQUNOLGFBQWEsS0FBSyxRQUFRLGdDQUFTO0FBQUEsUUFDckM7QUFBQSxRQUNBO0FBQUEsVUFDRSxNQUFNO0FBQUEsVUFDTixhQUFhLEtBQUssUUFBUSxrQ0FBVyxJQUFJO0FBQUEsUUFDM0M7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsY0FBYyxFQUFFLFVBQVUsQ0FBQyxlQUFlLEVBQUUsQ0FBQztBQUFBLE1BQzdDLHFCQUFxQjtBQUFBLFFBQ25CLGFBQWEsU0FBUyxnQkFBZ0IsQ0FBQyxFQUFFLEtBQUssTUFBTSxVQUFVLElBQUksS0FBSztBQUFBLE1BQ3pFLENBQUM7QUFBQSxNQUNELFVBQVU7QUFBQSxRQUFFLFdBQVcsS0FBSyxRQUFRLGdDQUFTO0FBQUEsUUFDM0MsU0FBUztBQUFBLFVBQ1A7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFFBQ0Y7QUFBQSxRQUNBLGlCQUFpQixDQUFDLFVBQVUsYUFBYTtBQUFBLFVBQ3ZDLFNBQVMsUUFBUSxRQUFRLGdCQUFnQixFQUFFO0FBQUEsVUFDM0MsVUFBVSxTQUFTLFFBQVEsT0FBTyxFQUFFO0FBQUEsUUFDdEM7QUFBQSxRQUNBLGNBQWM7QUFBQSxRQUNkLFFBQVE7QUFBQSxNQUNWLENBQUM7QUFBQSxJQUNIO0FBQUEsSUFDQSxNQUFNO0FBQUEsTUFDSixhQUFhO0FBQUEsTUFDYixTQUFTO0FBQUEsTUFDVCxVQUFVO0FBQUEsUUFDUixVQUFVO0FBQUEsTUFDWjtBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
diff --git a/components/vite.config.ts.timestamp-1725815953487-0343402bb3962.mjs b/components/vite.config.ts.timestamp-1725815953487-0343402bb3962.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815953487-0343402bb3962.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815955485-2158d09ba86e4.mjs b/components/vite.config.ts.timestamp-1725815955485-2158d09ba86e4.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815955485-2158d09ba86e4.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815957453-6837690cd0c97.mjs b/components/vite.config.ts.timestamp-1725815957453-6837690cd0c97.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815957453-6837690cd0c97.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815959897-209d1ff271053.mjs b/components/vite.config.ts.timestamp-1725815959897-209d1ff271053.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815959897-209d1ff271053.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815961928-15cc7176dc9d7.mjs b/components/vite.config.ts.timestamp-1725815961928-15cc7176dc9d7.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815961928-15cc7176dc9d7.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815963891-bc47058775012.mjs b/components/vite.config.ts.timestamp-1725815963891-bc47058775012.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815963891-bc47058775012.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815965900-7b4198febb1a8.mjs b/components/vite.config.ts.timestamp-1725815965900-7b4198febb1a8.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815965900-7b4198febb1a8.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815968105-3d7101b68d3e7.mjs b/components/vite.config.ts.timestamp-1725815968105-3d7101b68d3e7.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815968105-3d7101b68d3e7.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815970189-14417fc5646f.mjs b/components/vite.config.ts.timestamp-1725815970189-14417fc5646f.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815970189-14417fc5646f.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725815972598-ae33a863f20bd.mjs b/components/vite.config.ts.timestamp-1725815972598-ae33a863f20bd.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725815972598-ae33a863f20bd.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816181594-ce0f57870f858.mjs b/components/vite.config.ts.timestamp-1725816181594-ce0f57870f858.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816181594-ce0f57870f858.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816183711-ab395ea2a697e.mjs b/components/vite.config.ts.timestamp-1725816183711-ab395ea2a697e.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816183711-ab395ea2a697e.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816185866-f5d1a7c293ac.mjs b/components/vite.config.ts.timestamp-1725816185866-f5d1a7c293ac.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816185866-f5d1a7c293ac.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816188047-b0fee4c1cb274.mjs b/components/vite.config.ts.timestamp-1725816188047-b0fee4c1cb274.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816188047-b0fee4c1cb274.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816190370-d471cfabd3cd3.mjs b/components/vite.config.ts.timestamp-1725816190370-d471cfabd3cd3.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816190370-d471cfabd3cd3.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816193028-fbe30e11b4401.mjs b/components/vite.config.ts.timestamp-1725816193028-fbe30e11b4401.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816193028-fbe30e11b4401.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEsRUFDUixPQUFTO0FBQUEsRUFDVCxTQUFXO0FBQUEsSUFDVCxLQUFLO0FBQUEsTUFDSCxRQUFVO0FBQUEsTUFDVixTQUFXO0FBQUEsTUFDWCxPQUFTO0FBQUEsSUFDWDtBQUFBLElBQ0EsZUFBZTtBQUFBLE1BQ2IsUUFBVTtBQUFBLE1BQ1YsU0FBVztBQUFBLElBQ2I7QUFBQSxFQUNGO0FBQUEsRUFDQSxhQUFlO0FBQUEsSUFDYjtBQUFBLElBQ0E7QUFBQSxJQUNBO0FBQUEsRUFDRjtBQUFBLEVBQ0EsT0FBUztBQUFBLElBQ1A7QUFBQSxFQUNGO0FBQUEsRUFDQSxZQUFjO0FBQUEsRUFDZCxTQUFXO0FBQUEsRUFDWCxTQUFXO0FBQUEsSUFDVCxPQUFTO0FBQUEsSUFDVCxlQUFlO0FBQUEsSUFDZixNQUFRO0FBQUEsSUFDUixZQUFZO0FBQUEsSUFDWixjQUFjO0FBQUEsSUFDZCxTQUFXO0FBQUEsSUFDWCxNQUFRO0FBQUEsSUFDUixLQUFPO0FBQUEsRUFDVDtBQUFBLEVBQ0EsY0FBZ0I7QUFBQSxJQUNkLDhCQUE4QjtBQUFBLElBQzlCLE1BQVE7QUFBQSxJQUNSLDBCQUEwQjtBQUFBLElBQzFCLGNBQWM7QUFBQSxFQUNoQjtBQUFBLEVBQ0EsaUJBQW1CO0FBQUEsSUFDakIsd0JBQXdCO0FBQUEsSUFDeEIsNkJBQTZCO0FBQUEsSUFDN0IsMEJBQTBCO0FBQUEsSUFDMUIsK0JBQStCO0FBQUEsSUFDL0IsZUFBZTtBQUFBLElBQ2YsZ0JBQWdCO0FBQUEsSUFDaEIsb0JBQW9CO0FBQUEsSUFDcEIsb0NBQW9DO0FBQUEsSUFDcEMsd0JBQXdCO0FBQUEsSUFDeEIsNEJBQTRCO0FBQUEsSUFDNUIsNEJBQTRCO0FBQUEsSUFDNUIsZ0NBQWdDO0FBQUEsSUFDaEMsT0FBUztBQUFBLElBQ1QsT0FBUztBQUFBLElBQ1QsYUFBYTtBQUFBLElBQ2IsTUFBUTtBQUFBLElBQ1IsbUJBQW1CO0FBQUEsSUFDbkIsdUJBQXVCO0FBQUEsSUFDdkIsUUFBVTtBQUFBLEVBQ1o7QUFBQSxFQUNBLGtCQUFvQjtBQUFBLElBQ2xCLE9BQVM7QUFBQSxJQUNULGFBQWE7QUFBQSxFQUNmO0FBQ0Y7OztBRGxFQSxPQUFPLFVBQVU7QUFDakIsT0FBTyxlQUFlO0FBTHRCLElBQU0sbUNBQW1DO0FBT3pDLElBQU8sc0JBQVEsYUFBYSxDQUFDLEVBQUUsS0FBSyxNQUFNO0FBQ3hDLFNBQVE7QUFBQSxJQUNOLFFBQVE7QUFBQSxNQUNOLElBQUk7QUFBQSxRQUNGLE9BQU8sQ0FBQyxJQUFJO0FBQUEsTUFDZDtBQUFBLElBQ0Y7QUFBQSxJQUNBLE9BQU87QUFBQSxNQUNMLFFBQVE7QUFBQSxNQUNSLEtBQUs7QUFBQSxRQUNILE9BQU87QUFBQSxRQUNQLFVBQVUsWUFBVSxTQUFTLFdBQVcsUUFBUSxRQUFRLElBQUk7QUFBQSxRQUM1RCxTQUFTLENBQUMsTUFBTSxLQUFLO0FBQUEsTUFDdkI7QUFBQSxNQUNBLGVBQWU7QUFBQSxRQUNiLFVBQVUsT0FBTyxLQUFLLGdCQUFJLGdCQUFnQjtBQUFBLE1BQzVDO0FBQUEsSUFDRjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsT0FBTztBQUFBLFFBQ0w7QUFBQSxVQUNFLE1BQU07QUFBQSxVQUNOLGFBQWEsS0FBSyxRQUFRLGdDQUFTO0FBQUEsUUFDckM7QUFBQSxRQUNBO0FBQUEsVUFDRSxNQUFNO0FBQUEsVUFDTixhQUFhLEtBQUssUUFBUSxrQ0FBVyxJQUFJO0FBQUEsUUFDM0M7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsY0FBYyxFQUFFLFVBQVUsQ0FBQyxlQUFlLEVBQUUsQ0FBQztBQUFBLE1BQzdDLHFCQUFxQjtBQUFBLFFBQ25CLGFBQWEsU0FBUyxnQkFBZ0IsQ0FBQyxFQUFFLEtBQUssTUFBTSxVQUFVLElBQUksS0FBSztBQUFBLE1BQ3pFLENBQUM7QUFBQSxNQUNELFVBQVU7QUFBQSxRQUFFLFdBQVcsS0FBSyxRQUFRLGdDQUFTO0FBQUEsUUFDM0MsU0FBUztBQUFBLFVBQ1A7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFFBQ0Y7QUFBQSxRQUNBLGlCQUFpQixDQUFDLFVBQVUsYUFBYTtBQUFBLFVBQ3ZDLFNBQVMsUUFBUSxRQUFRLGdCQUFnQixFQUFFO0FBQUEsVUFDM0MsVUFBVSxTQUFTLFFBQVEsT0FBTyxFQUFFO0FBQUEsUUFDdEM7QUFBQSxRQUNBLGNBQWM7QUFBQSxRQUNkLFFBQVE7QUFBQSxNQUNWLENBQUM7QUFBQSxJQUNIO0FBQUEsSUFDQSxNQUFNO0FBQUEsTUFDSixhQUFhO0FBQUEsTUFDYixTQUFTO0FBQUEsTUFDVCxVQUFVO0FBQUEsUUFDUixVQUFVO0FBQUEsTUFDWjtBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
diff --git a/components/vite.config.ts.timestamp-1725816195709-ca03cd171ba89.mjs b/components/vite.config.ts.timestamp-1725816195709-ca03cd171ba89.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816195709-ca03cd171ba89.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816198425-5a8644a384bf8.mjs b/components/vite.config.ts.timestamp-1725816198425-5a8644a384bf8.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816198425-5a8644a384bf8.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816200759-e00d44ed6bcb8.mjs b/components/vite.config.ts.timestamp-1725816200759-e00d44ed6bcb8.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816200759-e00d44ed6bcb8.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816203026-3d5ae936181ee.mjs b/components/vite.config.ts.timestamp-1725816203026-3d5ae936181ee.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816203026-3d5ae936181ee.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816205286-a1576679029a5.mjs b/components/vite.config.ts.timestamp-1725816205286-a1576679029a5.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816205286-a1576679029a5.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816207460-6f74624c2ad91.mjs b/components/vite.config.ts.timestamp-1725816207460-6f74624c2ad91.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816207460-6f74624c2ad91.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/components/vite.config.ts.timestamp-1725816209610-481d2442c221f.mjs b/components/vite.config.ts.timestamp-1725816209610-481d2442c221f.mjs
new file mode 100644
index 00000000..05cae750
--- /dev/null
+++ b/components/vite.config.ts.timestamp-1725816209610-481d2442c221f.mjs
@@ -0,0 +1,145 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vitest@2.0.5_@types+node@22.5.0_jsdom@24.1.3_terser@5.31.6/node_modules/vitest/dist/config.js";
+import { vanillaExtractPlugin } from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/@vanilla-extract+vite-plugin@3.9.5_@types+node@22.5.0_babel-plugin-macros@3.1.0_terser@5.31.6_w4mww6o2fvain4y2lypfwha27e/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.js";
+import tsconfigPaths from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-tsconfig-paths@4.0.1_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+
+// package.json
+var package_default = {
+  name: "@ensdomains/thorin",
+  version: "1.0.0-beta.9",
+  description: "A web3 native design system",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  type: "module",
+  types: "./dist/types/index.d.ts",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs",
+      types: "./dist/types/index.d.ts"
+    },
+    "./style.css": {
+      import: "./dist/style.css",
+      require: "./dist/style.css"
+    }
+  },
+  sideEffects: [
+    "src/atoms/**/*",
+    "src/theme/**/*",
+    "*.css.ts"
+  ],
+  files: [
+    "dist"
+  ],
+  repository: "ensdomains/thorin",
+  license: "MIT",
+  scripts: {
+    build: "vite build",
+    "build:watch": "vite build --watch --mode development",
+    lint: "eslint . -c eslint.config.mjs",
+    "lint:fix": "eslint . -c eslint.config.mjs --fix",
+    "lint:types": "tsc --noEmit",
+    prepack: "pnpm build",
+    test: "vitest run",
+    ver: "pnpm npm version"
+  },
+  dependencies: {
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    clsx: "^1.1.1",
+    "react-transition-state": "^2.1.1",
+    "ts-pattern": "^4.3.0"
+  },
+  devDependencies: {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    jsdom: "^24.1.1",
+    react: "^18.0.0",
+    "react-dom": "^18.0.0",
+    vite: "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-tsconfig-paths": "^4.0.1",
+    vitest: "^2.0.5"
+  },
+  peerDependencies: {
+    react: "^18",
+    "react-dom": "^18"
+  }
+};
+
+// vite.config.ts
+import path from "path";
+import dtsPlugin from "file:///Users/davidchu/projects/ens/thorin/node_modules/.pnpm/vite-plugin-dts@4.0.3_@types+node@22.5.0_typescript@5.5.4_vite@5.4.2_@types+node@22.5.0_terser@5.31.6_/node_modules/vite-plugin-dts/dist/index.mjs";
+var __vite_injected_original_dirname = "/Users/davidchu/projects/ens/thorin/components";
+var vite_config_default = defineConfig(({ mode }) => {
+  return {
+    server: {
+      fs: {
+        allow: [".."]
+      }
+    },
+    build: {
+      minify: false,
+      lib: {
+        entry: "./src/index.ts",
+        fileName: (format) => `index.${format === "cjs" ? "cjs" : "js"}`,
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: Object.keys(package_default.peerDependencies)
+      }
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: path.resolve(__vite_injected_original_dirname)
+        },
+        {
+          find: "!",
+          replacement: path.resolve(__vite_injected_original_dirname, "..")
+        }
+      ]
+    },
+    plugins: [
+      tsconfigPaths({ projects: ["tsconfig.json"] }),
+      vanillaExtractPlugin({
+        identifiers: mode === "development" ? ({ hash }) => `thorin-${hash}` : "short"
+      }),
+      dtsPlugin({
+        entryRoot: path.resolve(__vite_injected_original_dirname),
+        exclude: [
+          "src/**/*.docs.mdx",
+          "src/**/*.snippets.tsx",
+          "src/**/*.test.ts*"
+        ],
+        beforeWriteFile: (filePath, content) => ({
+          content: content.replace(/\/\.\.\/src/g, ""),
+          filePath: filePath.replace("src", "")
+        }),
+        staticImport: true,
+        outDir: "dist/types"
+      })
+    ],
+    test: {
+      environment: "jsdom",
+      globals: true,
+      coverage: {
+        provider: "v8"
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAicGFja2FnZS5qc29uIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhdmlkY2h1L3Byb2plY3RzL2Vucy90aG9yaW4vY29tcG9uZW50cy92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZGF2aWRjaHUvcHJvamVjdHMvZW5zL3Rob3Jpbi9jb21wb25lbnRzL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZydcbmltcG9ydCB7IHZhbmlsbGFFeHRyYWN0UGx1Z2luIH0gZnJvbSAnQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpbidcbmltcG9ydCB0c2NvbmZpZ1BhdGhzIGZyb20gJ3ZpdGUtdHNjb25maWctcGF0aHMnXG5pbXBvcnQgcGtnIGZyb20gJy4vcGFja2FnZS5qc29uJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmltcG9ydCBkdHNQbHVnaW4gZnJvbSAndml0ZS1wbHVnaW4tZHRzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIHJldHVybiAoe1xuICAgIHNlcnZlcjoge1xuICAgICAgZnM6IHtcbiAgICAgICAgYWxsb3c6IFsnLi4nXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIGxpYjoge1xuICAgICAgICBlbnRyeTogJy4vc3JjL2luZGV4LnRzJyxcbiAgICAgICAgZmlsZU5hbWU6IGZvcm1hdCA9PiBgaW5kZXguJHtmb3JtYXQgPT09ICdjanMnID8gJ2NqcycgOiAnanMnfWAsXG4gICAgICAgIGZvcm1hdHM6IFsnZXMnLCAnY2pzJ10sXG4gICAgICB9LFxuICAgICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgICBleHRlcm5hbDogT2JqZWN0LmtleXMocGtnLnBlZXJEZXBlbmRlbmNpZXMpLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBmaW5kOiAnQCcsXG4gICAgICAgICAgcmVwbGFjZW1lbnQ6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUpLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgZmluZDogJyEnLFxuICAgICAgICAgIHJlcGxhY2VtZW50OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnLi4nKSxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXG4gICAgICB0c2NvbmZpZ1BhdGhzKHsgcHJvamVjdHM6IFsndHNjb25maWcuanNvbiddIH0pLFxuICAgICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgICBpZGVudGlmaWVyczogbW9kZSA9PT0gJ2RldmVsb3BtZW50JyA/ICh7IGhhc2ggfSkgPT4gYHRob3Jpbi0ke2hhc2h9YCA6ICdzaG9ydCcsXG4gICAgICB9KSxcbiAgICAgIGR0c1BsdWdpbih7IGVudHJ5Um9vdDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSksXG4gICAgICAgIGV4Y2x1ZGU6IFtcbiAgICAgICAgICAnc3JjLyoqLyouZG9jcy5tZHgnLFxuICAgICAgICAgICdzcmMvKiovKi5zbmlwcGV0cy50c3gnLFxuICAgICAgICAgICdzcmMvKiovKi50ZXN0LnRzKicsXG4gICAgICAgIF0sXG4gICAgICAgIGJlZm9yZVdyaXRlRmlsZTogKGZpbGVQYXRoLCBjb250ZW50KSA9PiAoe1xuICAgICAgICAgIGNvbnRlbnQ6IGNvbnRlbnQucmVwbGFjZSgvXFwvXFwuXFwuXFwvc3JjL2csICcnKSxcbiAgICAgICAgICBmaWxlUGF0aDogZmlsZVBhdGgucmVwbGFjZSgnc3JjJywgJycpLFxuICAgICAgICB9KSxcbiAgICAgICAgc3RhdGljSW1wb3J0OiB0cnVlLFxuICAgICAgICBvdXREaXI6ICdkaXN0L3R5cGVzJyxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgdGVzdDoge1xuICAgICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgICBnbG9iYWxzOiB0cnVlLFxuICAgICAgY292ZXJhZ2U6IHtcbiAgICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pXG59KVxuIiwgIntcbiAgXCJuYW1lXCI6IFwiQGVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwidmVyc2lvblwiOiBcIjEuMC4wLWJldGEuOVwiLFxuICBcImRlc2NyaXB0aW9uXCI6IFwiQSB3ZWIzIG5hdGl2ZSBkZXNpZ24gc3lzdGVtXCIsXG4gIFwibWFpblwiOiBcIi4vZGlzdC9pbmRleC5janNcIixcbiAgXCJtb2R1bGVcIjogXCIuL2Rpc3QvaW5kZXguanNcIixcbiAgXCJ0eXBlXCI6IFwibW9kdWxlXCIsXG4gIFwidHlwZXNcIjogXCIuL2Rpc3QvdHlwZXMvaW5kZXguZC50c1wiLFxuICBcImV4cG9ydHNcIjoge1xuICAgIFwiLlwiOiB7XG4gICAgICBcImltcG9ydFwiOiBcIi4vZGlzdC9pbmRleC5qc1wiLFxuICAgICAgXCJyZXF1aXJlXCI6IFwiLi9kaXN0L2luZGV4LmNqc1wiLFxuICAgICAgXCJ0eXBlc1wiOiBcIi4vZGlzdC90eXBlcy9pbmRleC5kLnRzXCJcbiAgICB9LFxuICAgIFwiLi9zdHlsZS5jc3NcIjoge1xuICAgICAgXCJpbXBvcnRcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCIsXG4gICAgICBcInJlcXVpcmVcIjogXCIuL2Rpc3Qvc3R5bGUuY3NzXCJcbiAgICB9XG4gIH0sXG4gIFwic2lkZUVmZmVjdHNcIjogW1xuICAgIFwic3JjL2F0b21zLyoqLypcIixcbiAgICBcInNyYy90aGVtZS8qKi8qXCIsXG4gICAgXCIqLmNzcy50c1wiXG4gIF0sXG4gIFwiZmlsZXNcIjogW1xuICAgIFwiZGlzdFwiXG4gIF0sXG4gIFwicmVwb3NpdG9yeVwiOiBcImVuc2RvbWFpbnMvdGhvcmluXCIsXG4gIFwibGljZW5zZVwiOiBcIk1JVFwiLFxuICBcInNjcmlwdHNcIjoge1xuICAgIFwiYnVpbGRcIjogXCJ2aXRlIGJ1aWxkXCIsXG4gICAgXCJidWlsZDp3YXRjaFwiOiBcInZpdGUgYnVpbGQgLS13YXRjaCAtLW1vZGUgZGV2ZWxvcG1lbnRcIixcbiAgICBcImxpbnRcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qc1wiLFxuICAgIFwibGludDpmaXhcIjogXCJlc2xpbnQgLiAtYyBlc2xpbnQuY29uZmlnLm1qcyAtLWZpeFwiLFxuICAgIFwibGludDp0eXBlc1wiOiBcInRzYyAtLW5vRW1pdFwiLFxuICAgIFwicHJlcGFja1wiOiBcInBucG0gYnVpbGRcIixcbiAgICBcInRlc3RcIjogXCJ2aXRlc3QgcnVuXCIsXG4gICAgXCJ2ZXJcIjogXCJwbnBtIG5wbSB2ZXJzaW9uXCJcbiAgfSxcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9zcHJpbmtsZXNcIjogXCJeMS42LjNcIixcbiAgICBcImNsc3hcIjogXCJeMS4xLjFcIixcbiAgICBcInJlYWN0LXRyYW5zaXRpb24tc3RhdGVcIjogXCJeMi4xLjFcIixcbiAgICBcInRzLXBhdHRlcm5cIjogXCJeNC4zLjBcIlxuICB9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L2RvbVwiOiBcIl45LjMuM1wiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9qZXN0LWRvbVwiOiBcIl42LjEuNFwiLFxuICAgIFwiQHRlc3RpbmctbGlicmFyeS9yZWFjdFwiOiBcIl4xNC4wLjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvdXNlci1ldmVudFwiOiBcIl4xNC41LjFcIixcbiAgICBcIkB0eXBlcy9ub2RlXCI6IFwiXjIyLjIuMFwiLFxuICAgIFwiQHR5cGVzL3JlYWN0XCI6IFwiXjE4LjIuMjhcIixcbiAgICBcIkB0eXBlcy9yZWFjdC1kb21cIjogXCJeMTguMi4xM1wiLFxuICAgIFwiQHR5cGVzL3Rlc3RpbmctbGlicmFyeV9famVzdC1kb21cIjogXCJeNi4wLjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3QvY3NzXCI6IFwiXjEuMTMuMFwiLFxuICAgIFwiQHZhbmlsbGEtZXh0cmFjdC9keW5hbWljXCI6IFwiXjIuMC4zXCIsXG4gICAgXCJAdmFuaWxsYS1leHRyYWN0L3JlY2lwZXNcIjogXCJeMC41LjBcIixcbiAgICBcIkB2YW5pbGxhLWV4dHJhY3Qvdml0ZS1wbHVnaW5cIjogXCJeMy45LjBcIixcbiAgICBcImpzZG9tXCI6IFwiXjI0LjEuMVwiLFxuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJ2aXRlXCI6IFwiXjUuNC4wXCIsXG4gICAgXCJ2aXRlLXBsdWdpbi1kdHNcIjogXCJeNC4wLjJcIixcbiAgICBcInZpdGUtdHNjb25maWctcGF0aHNcIjogXCJeNC4wLjFcIixcbiAgICBcInZpdGVzdFwiOiBcIl4yLjAuNVwiXG4gIH0sXG4gIFwicGVlckRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4XCJcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0VCxTQUFTLG9CQUFvQjtBQUN6VixTQUFTLDRCQUE0QjtBQUNyQyxPQUFPLG1CQUFtQjs7O0FDRjFCO0FBQUEsRUFDRSxNQUFRO0FBQUEsRUFDUixTQUFXO0FBQUEsRUFDWCxhQUFlO0FBQUEsRUFDZixNQUFRO0FBQUEsRUFDUixRQUFVO0FBQUEsRUFDVixNQUFRO0FBQUEs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
diff --git a/docs/public/playroom/preview/index.html b/docs/public/playroom/preview/index.html
deleted file mode 100644
index 798b0ec5..00000000
--- a/docs/public/playroom/preview/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta name="description" content="Design systems for ENS built with React and Vanilla Extract" />
-  <meta charset="utf-8">
-  <title>ENS Design</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="author" content="">
-</head>
-
-<body>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/src/components/AdditionalColors/components/PaletteRow.tsx b/docs/src/components/AdditionalColors/components/PaletteRow.tsx
index b7cbbeb6..36137bde 100644
--- a/docs/src/components/AdditionalColors/components/PaletteRow.tsx
+++ b/docs/src/components/AdditionalColors/components/PaletteRow.tsx
@@ -26,12 +26,12 @@ const PaletteCell = ({
       <Box
         width="full"
         height="24"
-        backgroundColor={rawColorToRGB(color)}
+        // backgroundColor={rawColorToRGB(color)}
         borderRadius="large"
-        border="1px solid"
+        // border="1px solid"
         borderColor="border"
-        transform={{ base: 'scale(1)', hover: 'scale(1.05)' }}
-        transition="transform 0.15s ease-in-out"
+        // transform={{ base: 'scale(1)', hover: 'scale(1.05)' }}
+        // transition="transform 0.15s ease-in-out"
         onClick={onClick}
       />
     </Box>
diff --git a/docs/src/components/CodeBlock/CodeBlock.tsx b/docs/src/components/CodeBlock/CodeBlock.tsx
index 45fd2270..9289ae1e 100644
--- a/docs/src/components/CodeBlock/CodeBlock.tsx
+++ b/docs/src/components/CodeBlock/CodeBlock.tsx
@@ -34,7 +34,7 @@ const Pre = (props: PropsWithChildren) => (
     backgroundColor="greySurface"
     borderRadius="large"
     padding="4"
-    border="1px solid"
+    // border="1px solid"
     borderColor="border"
     position="relative"
   />
diff --git a/docs/src/components/CodePreview.tsx b/docs/src/components/CodePreview.tsx
index c81d92e1..4b411eb7 100644
--- a/docs/src/components/CodePreview.tsx
+++ b/docs/src/components/CodePreview.tsx
@@ -59,8 +59,8 @@ const ContainerInner = React.forwardRef<
     backgroundColor="background"
     borderTopLeftRadius="2xLarge"
     borderTopRightRadius="2xLarge"
-    borderBottomLeftRadius={$expand ? '2xLarge' : 'unset'}
-    borderBottomRightRadius={$expand ? '2xLarge' : 'unset'}
+    // borderBottomLeftRadius={$expand ? '2xLarge' : 'unset'}
+    // borderBottomRightRadius={$expand ? '2xLarge' : 'unset'}
     overflow="auto"
     padding="4"
   />
@@ -74,7 +74,7 @@ const LiveEditorContainer = (props: BoxProps) => (
     position="relative"
     padding="1.5"
     borderColor="transparent"
-    borderTopColor="border"
+    // borderTopColor="border"
     borderStyle="solid"
     fontFamily="mono"
     borderWidth="1x"
@@ -151,7 +151,7 @@ export const CodePreview = ({
           <Button
             colorStyle="transparent"
             color="blue"
-            prefix={state.expand ? <UpChevronSVG /> : <DownChevronSVG />}
+            prefix={state.expand ? UpChevronSVG : DownChevronSVG}
             size="small"
             onClick={() => setState(x => ({ ...x, expand: !x.expand }))}
           >
@@ -164,7 +164,7 @@ export const CodePreview = ({
             as="a"
             colorStyle="transparent"
             color="blue"
-            prefix={<OutlinkSVG />}
+            prefix={OutlinkSVG}
             href={createPlayroomLink({ code })}
             size="small"
             target="_blank"
diff --git a/docs/src/components/CopyButton.tsx b/docs/src/components/CopyButton.tsx
index 83abec6c..64dcc855 100644
--- a/docs/src/components/CopyButton.tsx
+++ b/docs/src/components/CopyButton.tsx
@@ -48,11 +48,11 @@ export const CopyButton = ({ content }: Props) => {
         justifyContent="center"
         alignItems="center"
         borderRadius="medium"
-        transform={{ base: 'translateY(0)', hover: 'translateY(-1px)' }}
-        transition="all 0.3s ease-in-out"
+        // transform={{ base: 'translateY(0)', hover: 'translateY(-1px)' }}
+        // transition="all 0.3s ease-in-out"
       >
         <Box
-          as={state.copied ? <CheckSVG /> : <CopySVG />}
+          as={state.copied ? CheckSVG : CopySVG}
           wh="3"
           color="textPrimary"
         />
diff --git a/docs/src/components/GitHubLink.tsx b/docs/src/components/GitHubLink.tsx
index c5b8bb38..aa757279 100644
--- a/docs/src/components/GitHubLink.tsx
+++ b/docs/src/components/GitHubLink.tsx
@@ -10,7 +10,7 @@ export const GitHubLink = ({ href }: { href: string }) => (
         alignItems="center"
         justifyContent="center"
       >
-        <Box as={<GithubSVG />} wh="4" display="inline" color="accent" />
+        <Box as={GithubSVG} wh="4" display="inline" color="accent" />
         <Typography color="accent" fontVariant="body">
           Edit on GitHub
         </Typography>
diff --git a/docs/src/components/Logos/Logos.tsx b/docs/src/components/Logos/Logos.tsx
index 090b2ff2..9dd98418 100644
--- a/docs/src/components/Logos/Logos.tsx
+++ b/docs/src/components/Logos/Logos.tsx
@@ -12,7 +12,7 @@ const Panel = ({ background = 'background', alt, src }: Item) => {
     <Box
       flex={1}
       position="relative"
-      border="1px solid"
+      // border="1px solid"
       borderColor="border"
       borderRadius="large"
       display="flex"
@@ -20,7 +20,7 @@ const Panel = ({ background = 'background', alt, src }: Item) => {
       justifyContent="center"
       py="10"
       px="4"
-      backgroundColor={`$${background}`}
+      // backgroundColor={`$${background}`}
     >
       <Image src={src} height="56" width="126" alt={alt} />
       <Box
diff --git a/docs/src/components/MDX.tsx b/docs/src/components/MDX.tsx
index acd4fa21..d054323a 100644
--- a/docs/src/components/MDX.tsx
+++ b/docs/src/components/MDX.tsx
@@ -13,7 +13,8 @@ import { Logos } from './Logos/Logos'
 
 const StyledLink = (props: React.ComponentProps<typeof Link>) => (
   <Box
-    as={<Link {...props} />}
+    as={Link}
+    {...props}
     color="accent"
     cursor="pointer"
     // textDecoration="underline"
@@ -45,7 +46,7 @@ export const MDX: MDXProviderProps['components'] = {
           <Box as="a" href={`#${id}`} display="inline">
             {children}
             <Box
-              as={<LinkSVG />}
+              as={LinkSVG}
               display="inline-block"
               marginLeft="2"
               wh="4"
diff --git a/docs/src/components/NavBar.tsx b/docs/src/components/NavBar.tsx
index a225ca8c..12254105 100644
--- a/docs/src/components/NavBar.tsx
+++ b/docs/src/components/NavBar.tsx
@@ -24,8 +24,8 @@ export const NavBar = ({
       padding={{ base: '4', sm: '6' }}
       backgroundColor="backgroundPrimary"
       height={{ base: '20', sm: '24' }}
-      borderBottom="1px solid"
-      borderBottomColor="border"
+      // borderBottom="1px solid"
+      // borderBottomColor="border"
     >
       <Box display="flex">
         <Box
@@ -33,37 +33,37 @@ export const NavBar = ({
           display={{ base: 'block', sm: 'none' }}
           onClick={onToggle}
           padding="4"
-          marginLeft="-16px"
+          // marginLeft="-16px"
           backgroundColor="transparent"
-          outline="none"
+          // outline="none"
         >
           <Box wh="6" position="relative">
             <Box
-              as={<CrossSVG />}
+              as={CrossSVG}
               wh="full"
               position="absolute"
               opacity={open ? 1 : 0}
-              transition="opacity 0.2s ease-in-out"
+              // transition="opacity 0.2s ease-in-out"
             />
             <Box
-              as={<MenuSVG />}
+              as={MenuSVG}
               position="absolute"
               wh="full"
               opacity={open ? 0 : 1}
-              transition="opacity 0.2s ease-in-out"
+              // transition="opacity 0.2s ease-in-out"
             />
           </Box>
         </Box>
         <Link href="/">
-          <Box as={<LogoSVG />} height="12" />
+          <Box as={LogoSVG} height="12" />
         </Link>
       </Box>
       <Box display="flex" gap="2" alignItems="center">
         <Link href="https://github.com/ensdomains/thorin">
-          <Box as={<GithubSVG />} color="text" wh="4" />
+          <Box as={GithubSVG} color="text" wh="4" />
         </Link>
         <Link href="https://github.com/ensdomains/thorin">
-          <Box as={<FigmaSVG />} wh="4" />
+          <Box as={FigmaSVG} wh="4" />
         </Link>
         <Tag size="small">v1.0</Tag>
       </Box>
diff --git a/docs/src/components/Palette/Palette.tsx b/docs/src/components/Palette/Palette.tsx
index b1e15517..fe6f93fc 100644
--- a/docs/src/components/Palette/Palette.tsx
+++ b/docs/src/components/Palette/Palette.tsx
@@ -43,10 +43,10 @@ const ColorCell = ({
   onClick: () => void
 }) => (
   <Box
-    transform={{ base: 'scale(1)', hover: 'scale(1.05)' }}
-    backgroundColor={`rgb(${color[0]}, ${color[1]}, ${color[2]})`}
+    // transform={{ base: 'scale(1)', hover: 'scale(1.05)' }}
+    // backgroundColor={`rgb(${color[0]}, ${color[1]}, ${color[2]})`}
     borderRadius="large"
-    transition="transform 0.15s ease-in-out"
+    // transition="transform 0.15s ease-in-out"
     onClick={onClick}
   />
 )
diff --git a/docs/src/components/PropsTable.tsx b/docs/src/components/PropsTable.tsx
index afddcd07..f3cd97cb 100644
--- a/docs/src/components/PropsTable.tsx
+++ b/docs/src/components/PropsTable.tsx
@@ -33,7 +33,12 @@ const TableHead = ({
 )
 
 const DataCell = ({ children }: React.PropsWithChildren) => (
-  <Box as="td" borderTop="1px solid" borderTopColor="border" padding="4">
+  <Box
+    as="td"
+    // borderTop="1px solid"
+    // borderTopColor="border"
+    padding="4"
+  >
     {children}
   </Box>
 )
diff --git a/docs/src/components/SearchIcons.tsx b/docs/src/components/SearchIcons.tsx
index b39e5a30..a0d4309b 100644
--- a/docs/src/components/SearchIcons.tsx
+++ b/docs/src/components/SearchIcons.tsx
@@ -34,10 +34,10 @@ const IconGrid = (props: BoxProps) => (
     display="grid"
     gap="4"
 
-    gridTemplateColumns={{
-      base: 'repeat(auto-fit, minmax(4.5rem, 1fr))',
-      md: 'repeat(auto-fit, minmax(5rem, 1fr))',
-    }}
+    // gridTemplateColumns={{
+    //   base: 'repeat(auto-fit, minmax(4.5rem, 1fr))',
+    //   md: 'repeat(auto-fit, minmax(5rem, 1fr))',
+    // }}
   />
 )
 
@@ -68,7 +68,7 @@ const ComponentContainer = (props: BoxProps) => (
     transitionDuration={150}
     transitionProperty="box-shadow"
     transitionTimingFunction="inOut"
-    boxShadow={{ base: '1', hover: '1', active: '0.5' }}
+    // boxShadow={{ base: '1', hover: '1', active: '0.5' }}
   />
 )
 
@@ -98,6 +98,7 @@ export const SearchIcons = () => {
             value={state.query}
             onChange={event =>
               setState(x => ({ ...x, query: event.target.value }))}
+            size="large" // TODO: Check what size this should be
           />
 
           <IconGrid>
diff --git a/docs/src/components/SideBar.tsx b/docs/src/components/SideBar.tsx
index 18759471..9c56b62f 100644
--- a/docs/src/components/SideBar.tsx
+++ b/docs/src/components/SideBar.tsx
@@ -69,14 +69,14 @@ export const SideBar = ({ open, links }: { open: boolean, links: Links }) => {
       position="fixed"
       flexDirection="column"
       top={{ base: '20', sm: '24' }}
-      left={{ base: open ? '0' : '-100%', sm: '0' }}
+      // left={{ base: open ? '0' : '-100%', sm: '0' }}
       width="64"
       bottom="0"
       backgroundColor="backgroundPrimary"
-      borderRight="1px solid"
-      borderRightColor="border"
+      // borderRight="1px solid"
+      // borderRightColor="border"
       gap="4"
-      transition="left 0.2s ease-in-out"
+      // transition="left 0.2s ease-in-out"
       paddingRight="1"
     >
       <ScrollBox width="full" hideDividers>
diff --git a/docs/src/layouts/docs.tsx b/docs/src/layouts/docs.tsx
index 2daea0ec..931c264b 100644
--- a/docs/src/layouts/docs.tsx
+++ b/docs/src/layouts/docs.tsx
@@ -22,16 +22,21 @@ const Container = (props: React.ComponentProps<typeof Typography>) => (
     flexDirection="column"
     backgroundColor="backgroundPrimary"
     justifyContent={{ base: 'center', lg: 'flex-end', xl: 'center' }}
-    margin="0 auto"
+    // margin="0 auto"
     width="full"
-    minHeight="100vh"
+    // minHeight="100vh"
     px="6"
     boxSizing="border-box"
   />
 )
 
 const Article = (props: BoxProps) => (
-  <Box {...props} as="article" maxWidth="192" margin="0 auto" />
+  <Box
+    {...props}
+    as="article"
+    maxWidth="192"
+  // margin="0 auto"
+  />
 )
 
 const Main = (props: BoxProps) => (
diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx
index 48db18b7..c3d13718 100644
--- a/docs/src/pages/_app.tsx
+++ b/docs/src/pages/_app.tsx
@@ -18,7 +18,9 @@ const App = ({ Component, pageProps }: AppProps) => {
       {/* <Head /> */}
       {/* Prevent theme flash */}
       <MDXProvider components={MDX}>
-        <ThemeProvider>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
+        <ThemeProvider>
+          {getLayout(<Component {...pageProps} />)}
+        </ThemeProvider>
       </MDXProvider>
     </>
   )
diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
index 45e6eec0..fa665e11 100644
--- a/docs/src/pages/index.mdx
+++ b/docs/src/pages/index.mdx
@@ -82,9 +82,9 @@ import { Button, LockSVG } from '@ensdomains/thorin'
 ```
 
 ```tsx live=true expand=true
-<Box alignItems="center" gap="$4">
+<Box alignItems="center" gap="4">
   <div style={{ width: '180px' }}>
-    <Button prefix={<LockSVG />} variant="primary">
+    <Button prefix={LockSVG} variant="primary">
       Connect Wallet
     </Button>
   </div>
diff --git a/docs/src/pages/index_copy.mdx b/docs/src/pages/index_copy.mdx
new file mode 100644
index 00000000..45e6eec0
--- /dev/null
+++ b/docs/src/pages/index_copy.mdx
@@ -0,0 +1,102 @@
+import { Header, Link } from '~/components'
+
+<Header
+  description={
+    <>
+      Design system for <Link href="https://ens.domains">ENS</Link> built with{' '}
+      <Link href="https://reactjs.org/">React</Link>.
+    </>
+  }
+  title="ENS Design System (alpha)"
+/>
+
+## Install
+
+```bash
+pnpm i @ensdomains/thorin react-transition-state@1.1.5
+```
+
+## Set Up
+
+Wrap the root of your app in a [`ThemeProvider`](https://styled-components.com/docs/advanced) module. Import **ThorinGlobalStyles** and declare it as a child of **ThemeProvider**. Import **lightTheme** or **darkTheme** and pass it to the **ThemeProvider**. Add [Satoshi](https://www.fontshare.com/fonts/satoshi) to your font stack.
+
+In this example we are adding the **lightTheme**.
+
+```tsx
+import React, { useState } from 'react'
+import { ThemeProvider } from '@ensdomains/thorin'
+import 'thorin/dist/style.css'
+
+const App = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      {children}
+    </ThemeProvider>
+  )
+}
+```
+
+### Dark Theme
+
+To use the dark theme, import `darkTheme` and pass it to the `ThemeProvider`.
+
+```tsx
+import React, { useState } from 'react'
+import { ThemeProvider } from 'styled-components'
+import { ThorinGlobalStyles, darkTheme } from '@ensdomains/thorin'
+
+const App = () => {
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <ThorinGlobalStyles />
+      {children}
+    </ThemeProvider>
+  )
+}
+```
+
+### Custom Themes
+
+To customise the theme, you can change properties on either the `lightTheme` or `darkTheme` objects, or create an entirely new one.
+
+```tsx
+import { ThemeProvider, lightTheme } from '@ensdomains/thorin'
+
+const theme = {
+  ...lightTheme,
+  colors: {
+    ...lightTheme.colors,
+    foreground: 'rgba(255, 255, 255, 0.4)',
+  },
+}
+
+const App = () => {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
+}
+```
+
+## Use Components
+
+```tsx
+import { Button, LockSVG } from '@ensdomains/thorin'
+```
+
+```tsx live=true expand=true
+<Box alignItems="center" gap="$4">
+  <div style={{ width: '180px' }}>
+    <Button prefix={<LockSVG />} variant="primary">
+      Connect Wallet
+    </Button>
+  </div>
+</Box>
+```
+
+## Component Groups
+
+Thorin is organized according to the [`Atomic Design Methodology`](https://atomicdesign.bradfrost.com/chapter-2/).
+
+**Atoms** serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
+
+**Molecules** are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
+
+**Organisms** are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
diff --git a/package.json b/package.json
index a1af3b25..e5757759 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,11 @@
   "pnpm": {
     "overrides": {
       "ts-morph": "17.0.1"
+    
     }
   },
+  "resolutions": {
+    "rollup": "npm:@rollup/wasm-node"
+  },
   "packageManager": "pnpm@9.4.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5e4dd9e..bbb41c31 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,7 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
+  rollup: npm:@rollup/wasm-node
   ts-morph: 17.0.1
 
 importers:
@@ -171,7 +172,7 @@ importers:
         version: 5.4.2(@types/node@22.5.0)(terser@5.31.6)
       vite-plugin-dts:
         specifier: ^4.0.2
-        version: 4.0.3(@types/node@22.5.0)(rollup@4.21.2)(typescript@5.5.4)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6))
+        version: 4.0.3(@types/node@22.5.0)(typescript@5.5.4)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6))
       vite-tsconfig-paths:
         specifier: ^4.0.1
         version: 4.0.1(typescript@5.5.4)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6))
@@ -2357,170 +2358,15 @@ packages:
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+      rollup: npm:@rollup/wasm-node
     peerDependenciesMeta:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.21.1':
-    resolution: {integrity: sha512-2thheikVEuU7ZxFXubPDOtspKn1x0yqaYQwvALVtEcvFhMifPADBrgRPyHV0TF3b+9BgvgjgagVyvA/UqPZHmg==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm-eabi@4.21.2':
-    resolution: {integrity: sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.21.1':
-    resolution: {integrity: sha512-t1lLYn4V9WgnIFHXy1d2Di/7gyzBWS8G5pQSXdZqfrdCGTwi1VasRMSS81DTYb+avDs/Zz4A6dzERki5oRYz1g==}
-    cpu: [arm64]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.21.2':
-    resolution: {integrity: sha512-xGU5ZQmPlsjQS6tzTTGwMsnKUtu0WVbl0hYpTPauvbRAnmIvpInhJtgjj3mcuJpEiuUw4v1s4BimkdfDWlh7gA==}
-    cpu: [arm64]
-    os: [android]
-
-  '@rollup/rollup-darwin-arm64@4.21.1':
-    resolution: {integrity: sha512-AH/wNWSEEHvs6t4iJ3RANxW5ZCK3fUnmf0gyMxWCesY1AlUj8jY7GC+rQE4wd3gwmZ9XDOpL0kcFnCjtN7FXlA==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-arm64@4.21.2':
-    resolution: {integrity: sha512-99AhQ3/ZMxU7jw34Sq8brzXqWH/bMnf7ZVhvLk9QU2cOepbQSVTns6qoErJmSiAvU3InRqC2RRZ5ovh1KN0d0Q==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-x64@4.21.1':
-    resolution: {integrity: sha512-dO0BIz/+5ZdkLZrVgQrDdW7m2RkrLwYTh2YMFG9IpBtlC1x1NPNSXkfczhZieOlOLEqgXOFH3wYHB7PmBtf+Bg==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-x64@4.21.2':
-    resolution: {integrity: sha512-ZbRaUvw2iN/y37x6dY50D8m2BnDbBjlnMPotDi/qITMJ4sIxNY33HArjikDyakhSv0+ybdUxhWxE6kTI4oX26w==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.21.1':
-    resolution: {integrity: sha512-sWWgdQ1fq+XKrlda8PsMCfut8caFwZBmhYeoehJ05FdI0YZXk6ZyUjWLrIgbR/VgiGycrFKMMgp7eJ69HOF2pQ==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.21.2':
-    resolution: {integrity: sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-musleabihf@4.21.1':
-    resolution: {integrity: sha512-9OIiSuj5EsYQlmwhmFRA0LRO0dRRjdCVZA3hnmZe1rEwRk11Jy3ECGGq3a7RrVEZ0/pCsYWx8jG3IvcrJ6RCew==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-musleabihf@4.21.2':
-    resolution: {integrity: sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-gnu@4.21.1':
-    resolution: {integrity: sha512-0kuAkRK4MeIUbzQYu63NrJmfoUVicajoRAL1bpwdYIYRcs57iyIV9NLcuyDyDXE2GiZCL4uhKSYAnyWpjZkWow==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-gnu@4.21.2':
-    resolution: {integrity: sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-musl@4.21.1':
-    resolution: {integrity: sha512-/6dYC9fZtfEY0vozpc5bx1RP4VrtEOhNQGb0HwvYNwXD1BBbwQ5cKIbUVVU7G2d5WRE90NfB922elN8ASXAJEA==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-musl@4.21.2':
-    resolution: {integrity: sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.21.1':
-    resolution: {integrity: sha512-ltUWy+sHeAh3YZ91NUsV4Xg3uBXAlscQe8ZOXRCVAKLsivGuJsrkawYPUEyCV3DYa9urgJugMLn8Z3Z/6CeyRQ==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.21.2':
-    resolution: {integrity: sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@rollup/rollup-linux-riscv64-gnu@4.21.1':
-    resolution: {integrity: sha512-BggMndzI7Tlv4/abrgLwa/dxNEMn2gC61DCLrTzw8LkpSKel4o+O+gtjbnkevZ18SKkeN3ihRGPuBxjaetWzWg==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@rollup/rollup-linux-riscv64-gnu@4.21.2':
-    resolution: {integrity: sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@rollup/rollup-linux-s390x-gnu@4.21.1':
-    resolution: {integrity: sha512-z/9rtlGd/OMv+gb1mNSjElasMf9yXusAxnRDrBaYB+eS1shFm6/4/xDH1SAISO5729fFKUkJ88TkGPRUh8WSAA==}
-    cpu: [s390x]
-    os: [linux]
-
-  '@rollup/rollup-linux-s390x-gnu@4.21.2':
-    resolution: {integrity: sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==}
-    cpu: [s390x]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-gnu@4.21.1':
-    resolution: {integrity: sha512-kXQVcWqDcDKw0S2E0TmhlTLlUgAmMVqPrJZR+KpH/1ZaZhLSl23GZpQVmawBQGVhyP5WXIsIQ/zqbDBBYmxm5w==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-gnu@4.21.2':
-    resolution: {integrity: sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-musl@4.21.1':
-    resolution: {integrity: sha512-CbFv/WMQsSdl+bpX6rVbzR4kAjSSBuDgCqb1l4J68UYsQNalz5wOqLGYj4ZI0thGpyX5kc+LLZ9CL+kpqDovZA==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-musl@4.21.2':
-    resolution: {integrity: sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-win32-arm64-msvc@4.21.1':
-    resolution: {integrity: sha512-3Q3brDgA86gHXWHklrwdREKIrIbxC0ZgU8lwpj0eEKGBQH+31uPqr0P2v11pn0tSIxHvcdOWxa4j+YvLNx1i6g==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rollup/rollup-win32-arm64-msvc@4.21.2':
-    resolution: {integrity: sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rollup/rollup-win32-ia32-msvc@4.21.1':
-    resolution: {integrity: sha512-tNg+jJcKR3Uwe4L0/wY3Ro0H+u3nrb04+tcq1GSYzBEmKLeOQF2emk1whxlzNqb6MMrQ2JOcQEpuuiPLyRcSIw==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rollup/rollup-win32-ia32-msvc@4.21.2':
-    resolution: {integrity: sha512-5rA4vjlqgrpbFVVHX3qkrCo/fZTj1q0Xxpg+Z7yIo3J2AilW7t2+n6Q8Jrx+4MrYpAnjttTYF8rr7bP46BPzRw==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rollup/rollup-win32-x64-msvc@4.21.1':
-    resolution: {integrity: sha512-xGiIH95H1zU7naUyTKEyOA/I0aexNMUdO9qRv0bLKN3qu25bBdrxZHqA3PTJ24YNN/GdMzG4xkDcd/GvjuhfLg==}
-    cpu: [x64]
-    os: [win32]
-
-  '@rollup/rollup-win32-x64-msvc@4.21.2':
-    resolution: {integrity: sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==}
-    cpu: [x64]
-    os: [win32]
+  '@rollup/wasm-node@4.21.2':
+    resolution: {integrity: sha512-AJCfdXkpe5EX+jfWOMYuFl3ZomTQyfx4V4geRmChdTwAo05FdpnobwqtYn0mo7Mf1qVN7mniI7kdG98vKDVd2g==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
 
   '@rushstack/eslint-patch@1.10.3':
     resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
@@ -7281,16 +7127,6 @@ packages:
     resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
     hasBin: true
 
-  rollup@4.21.1:
-    resolution: {integrity: sha512-ZnYyKvscThhgd3M5+Qt3pmhO4jIRR5RGzaSovB6Q7rGNrK5cUncrtLmcTTJVSdcKXyZjW8X8MB0JMSuH9bcAJg==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
-
-  rollup@4.21.2:
-    resolution: {integrity: sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
-
   rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
 
@@ -11166,109 +11002,17 @@ snapshots:
       tiny-warning: 1.0.3
       tslib: 2.4.0
 
-  '@rollup/pluginutils@5.1.0(rollup@4.21.2)':
+  '@rollup/pluginutils@5.1.0':
     dependencies:
       '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
-    optionalDependencies:
-      rollup: 4.21.2
-
-  '@rollup/rollup-android-arm-eabi@4.21.1':
-    optional: true
-
-  '@rollup/rollup-android-arm-eabi@4.21.2':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.21.1':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.21.2':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.21.1':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.21.2':
-    optional: true
 
-  '@rollup/rollup-darwin-x64@4.21.1':
-    optional: true
-
-  '@rollup/rollup-darwin-x64@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-s390x-gnu@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-s390x-gnu@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-x64-gnu@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-x64-gnu@4.21.2':
-    optional: true
-
-  '@rollup/rollup-linux-x64-musl@4.21.1':
-    optional: true
-
-  '@rollup/rollup-linux-x64-musl@4.21.2':
-    optional: true
-
-  '@rollup/rollup-win32-arm64-msvc@4.21.1':
-    optional: true
-
-  '@rollup/rollup-win32-arm64-msvc@4.21.2':
-    optional: true
-
-  '@rollup/rollup-win32-ia32-msvc@4.21.1':
-    optional: true
-
-  '@rollup/rollup-win32-ia32-msvc@4.21.2':
-    optional: true
-
-  '@rollup/rollup-win32-x64-msvc@4.21.1':
-    optional: true
-
-  '@rollup/rollup-win32-x64-msvc@4.21.2':
-    optional: true
+  '@rollup/wasm-node@4.21.2':
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      fsevents: 2.3.3
 
   '@rushstack/eslint-patch@1.10.3': {}
 
@@ -14156,14 +13900,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.45.1(eslint@9.9.1)(typescript@4.9.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.2(eslint-plugin-import@2.29.1)(eslint@9.9.1))(eslint@9.9.1):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@8.3.0(eslint@9.9.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint@9.9.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 5.45.1(eslint@9.9.1)(typescript@4.9.4)
+      '@typescript-eslint/parser': 8.3.0(eslint@9.9.1)(typescript@5.5.4)
       eslint: 9.9.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.5.2(eslint-plugin-import@2.29.1)(eslint@9.9.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -14177,7 +13920,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.9.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.45.1(eslint@9.9.1)(typescript@4.9.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.2(eslint-plugin-import@2.29.1)(eslint@9.9.1))(eslint@9.9.1)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@8.3.0(eslint@9.9.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint@9.9.1)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -17480,51 +17223,6 @@ snapshots:
     dependencies:
       glob: 10.3.15
 
-  rollup@4.21.1:
-    dependencies:
-      '@types/estree': 1.0.5
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.21.1
-      '@rollup/rollup-android-arm64': 4.21.1
-      '@rollup/rollup-darwin-arm64': 4.21.1
-      '@rollup/rollup-darwin-x64': 4.21.1
-      '@rollup/rollup-linux-arm-gnueabihf': 4.21.1
-      '@rollup/rollup-linux-arm-musleabihf': 4.21.1
-      '@rollup/rollup-linux-arm64-gnu': 4.21.1
-      '@rollup/rollup-linux-arm64-musl': 4.21.1
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.21.1
-      '@rollup/rollup-linux-riscv64-gnu': 4.21.1
-      '@rollup/rollup-linux-s390x-gnu': 4.21.1
-      '@rollup/rollup-linux-x64-gnu': 4.21.1
-      '@rollup/rollup-linux-x64-musl': 4.21.1
-      '@rollup/rollup-win32-arm64-msvc': 4.21.1
-      '@rollup/rollup-win32-ia32-msvc': 4.21.1
-      '@rollup/rollup-win32-x64-msvc': 4.21.1
-      fsevents: 2.3.3
-
-  rollup@4.21.2:
-    dependencies:
-      '@types/estree': 1.0.5
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.21.2
-      '@rollup/rollup-android-arm64': 4.21.2
-      '@rollup/rollup-darwin-arm64': 4.21.2
-      '@rollup/rollup-darwin-x64': 4.21.2
-      '@rollup/rollup-linux-arm-gnueabihf': 4.21.2
-      '@rollup/rollup-linux-arm-musleabihf': 4.21.2
-      '@rollup/rollup-linux-arm64-gnu': 4.21.2
-      '@rollup/rollup-linux-arm64-musl': 4.21.2
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.21.2
-      '@rollup/rollup-linux-riscv64-gnu': 4.21.2
-      '@rollup/rollup-linux-s390x-gnu': 4.21.2
-      '@rollup/rollup-linux-x64-gnu': 4.21.2
-      '@rollup/rollup-linux-x64-musl': 4.21.2
-      '@rollup/rollup-win32-arm64-msvc': 4.21.2
-      '@rollup/rollup-win32-ia32-msvc': 4.21.2
-      '@rollup/rollup-win32-x64-msvc': 4.21.2
-      fsevents: 2.3.3
-    optional: true
-
   rrweb-cssom@0.6.0: {}
 
   rrweb-cssom@0.7.1: {}
@@ -18706,10 +18404,10 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-dts@4.0.3(@types/node@22.5.0)(rollup@4.21.2)(typescript@5.5.4)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6)):
+  vite-plugin-dts@4.0.3(@types/node@22.5.0)(typescript@5.5.4)(vite@5.4.2(@types/node@22.5.0)(terser@5.31.6)):
     dependencies:
       '@microsoft/api-extractor': 7.47.4(@types/node@22.5.0)
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
+      '@rollup/pluginutils': 5.1.0
       '@volar/typescript': 2.4.0
       '@vue/language-core': 2.0.29(typescript@5.5.4)
       compare-versions: 6.1.1
@@ -18740,7 +18438,7 @@ snapshots:
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.41
-      rollup: 4.21.1
+      rollup: '@rollup/wasm-node@4.21.2'
     optionalDependencies:
       '@types/node': 22.5.0
       fsevents: 2.3.3
@@ -18750,7 +18448,7 @@ snapshots:
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.41
-      rollup: 4.21.1
+      rollup: '@rollup/wasm-node@4.21.2'
     optionalDependencies:
       '@types/node': 22.5.2
       fsevents: 2.3.3