@kimdw-rtk/ui 0.0.23 → 0.0.25

package/dist/components/Navigation/NavigationBar.css.ts.vanilla.css

@@ -0,0 +1,25 @@
+@layer components;
+@layer components {
+  .NavigationBar_layeredBase__x4q5x91 {
+    z-index: 20;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    border-bottom: 1px solid rgb(var(--color-border\.weak__n6e2fs4));
+    background-color: rgba(var(--color-background__n6e2fs1), 0.75);
+    backdrop-filter: blur(2rem) saturate(150%);
+    color: rgb(var(--color-border__n6e2fs3));
+    transition: border-bottom-color 0.2s ease;
+    container-type: inline-size;
+    container-name: NavigationBar_navigationBarContainer__x4q5x90;
+  }
+  .NavigationBar_styleWithLayer__x4q5x92 {
+    height: 4em;
+  }
+  .NavigationBar_styleWithLayer__x4q5x93 {
+    height: 5em;
+  }
+  .NavigationBar_styleWithLayer__x4q5x94 {
+    height: 6em;
+  }
+}

package/dist/components/Navigation/NavigationContainer.css.js

@@ -1,12 +1,3 @@
-import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
-
-const container = style({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '0.5em',
-    height: '100%',
-    margin: '0 auto',
-});
+var container = 'NavigationContainer_container__1s3m4g70';
 
 export { container };

package/dist/components/Navigation/NavigationContainer.css.ts.vanilla.css

@@ -0,0 +1,8 @@
+.NavigationContainer_container__1s3m4g70 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  height: 100%;
+  margin: 0 auto;
+}

package/dist/components/Navigation/NavigationDrawer.css.js

@@ -1,52 +1,7 @@
-import { styleWithLayer, recipeWithLayer } from '../../utils/styleUtils.css.js';
-import { navigationBarContainer } from './NavigationBar.css.js';
-import { theme } from '../../themes/theme.css.js';
+import { c as createRuntimeFn } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
 
-const narrow = styleWithLayer({
-    display: 'none',
-    '@container': {
-        [`${navigationBarContainer} (max-width: 800px)`]: {
-            display: 'block',
-        },
-    },
-});
-const wide = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '0.5em',
-    flexGrow: '1',
-    '@container': {
-        [`${navigationBarContainer} (max-width: 800px)`]: {
-            display: 'none',
-        },
-    },
-});
-const popup = recipeWithLayer({
-    base: {
-        position: 'absolute',
-        top: '100%',
-        height: 'calc(100vh - 100%)',
-        left: '0',
-        width: '100%',
-        zIndex: '100',
-        maxHeight: '100vh',
-        padding: '0.75em',
-        borderBottom: `1px solid rgb(${theme.color.border})`,
-        backgroundColor: `rgb(${theme.color.background})`,
-        transition: 'opacity 0.2s ease',
-    },
-    variants: {
-        isVisible: {
-            true: {
-                opacity: '1',
-            },
-            false: {
-                opacity: '0',
-                pointerEvents: 'none',
-            },
-        },
-    },
-});
+var narrow = 'NavigationDrawer_styleWithLayer__1190lva0';
+var popup = createRuntimeFn({defaultClassName:'NavigationDrawer__1190lva5 NavigationDrawer_layeredBase__1190lva2',variantClassNames:{isVisible:{true:'NavigationDrawer_styleWithLayer__1190lva3',false:'NavigationDrawer_styleWithLayer__1190lva4'}},defaultVariants:{},compoundVariants:[]});
+var wide = 'NavigationDrawer_styleWithLayer__1190lva1';
 
 export { narrow, popup, wide };

package/dist/components/Navigation/NavigationDrawer.css.ts.vanilla.css

@@ -0,0 +1,41 @@
+@layer components;
+@layer components {
+  .NavigationDrawer_styleWithLayer__1190lva0 {
+    display: none;
+  }
+  .NavigationDrawer_styleWithLayer__1190lva1 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5em;
+    flex-grow: 1;
+  }
+  .NavigationDrawer_layeredBase__1190lva2 {
+    position: absolute;
+    top: 100%;
+    height: calc(100vh - 100%);
+    left: 0;
+    width: 100%;
+    z-index: 100;
+    max-height: 100vh;
+    padding: 0.75em;
+    border-bottom: 1px solid rgb(var(--color-border__n6e2fs3));
+    background-color: rgb(var(--color-background__n6e2fs1));
+    transition: opacity 0.2s ease;
+  }
+  .NavigationDrawer_styleWithLayer__1190lva3 {
+    opacity: 1;
+  }
+  .NavigationDrawer_styleWithLayer__1190lva4 {
+    opacity: 0;
+    pointer-events: none;
+  }
+  @container NavigationBar_navigationBarContainer__x4q5x90 (max-width: 800px) {
+    .NavigationDrawer_styleWithLayer__1190lva0 {
+      display: block;
+    }
+    .NavigationDrawer_styleWithLayer__1190lva1 {
+      display: none;
+    }
+  }
+}

package/dist/components/Navigation/NavigationItem.css.js

@@ -1,38 +1,5 @@
-import { recipeWithLayer } from '../../utils/styleUtils.css.js';
-import { narrow } from './NavigationDrawer.css.js';
-import { spacing } from '../../tokens/semantic/spacing.js';
-import { theme } from '../../themes/theme.css.js';
-import { typography } from '../../tokens/semantic/typography.js';
+import { c as createRuntimeFn } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
 
-const container = recipeWithLayer({
-    base: {
-        position: 'relative',
-        lineHeight: '0',
-        padding: spacing.lg,
-        fontSize: '0.9375em',
-        fontWeight: typography.weight.semiBold,
-        transition: 'color 0.2s ease',
-        cursor: 'pointer',
-        ':hover': {
-            color: `rgb(${theme.color.foreground})`,
-        },
-        selectors: {
-            [`${narrow} &`]: {
-                padding: `${spacing['2xl']} ${spacing.lg}`,
-                fontSize: '1.125em',
-            },
-        },
-    },
-    variants: {
-        isSelected: {
-            true: {
-                color: `rgb(${theme.color['secondary-foreground']})`,
-            },
-            false: {
-                color: `rgba(${theme.color['secondary-foreground']}, 0.5)`,
-            },
-        },
-    },
-});
+var container = createRuntimeFn({defaultClassName:'NavigationItem__1epy0hz3 NavigationItem_layeredBase__1epy0hz0',variantClassNames:{isSelected:{true:'NavigationItem_styleWithLayer__1epy0hz1',false:'NavigationItem_styleWithLayer__1epy0hz2'}},defaultVariants:{},compoundVariants:[]});
 
 export { container };

package/dist/components/Navigation/NavigationItem.css.ts.vanilla.css

@@ -0,0 +1,25 @@
+@layer components;
+@layer components {
+  .NavigationItem_layeredBase__1epy0hz0 {
+    position: relative;
+    line-height: 0;
+    padding: 0.75em;
+    font-size: 0.9375em;
+    font-weight: 600;
+    transition: color 0.2s ease;
+    cursor: pointer;
+  }
+  .NavigationItem_layeredBase__1epy0hz0:hover {
+    color: rgb(var(--color-foreground__n6e2fs2));
+  }
+  .NavigationDrawer_styleWithLayer__1190lva0 .NavigationItem_layeredBase__1epy0hz0 {
+    padding: 1.5em 0.75em;
+    font-size: 1.125em;
+  }
+  .NavigationItem_styleWithLayer__1epy0hz1 {
+    color: rgb(var(--color-secondary-foreground__n6e2fsa));
+  }
+  .NavigationItem_styleWithLayer__1epy0hz2 {
+    color: rgba(var(--color-secondary-foreground__n6e2fsa), 0.5);
+  }
+}

package/dist/components/Navigation/NavigationLogo.css.js

@@ -1,7 +1,3 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-
-const navigationLogo = styleWithLayer({
-    marginRight: '0.5em',
-});
+var navigationLogo = 'NavigationLogo_styleWithLayer__1u9v1830';
 
 export { navigationLogo };

package/dist/components/Navigation/NavigationLogo.css.ts.vanilla.css

@@ -0,0 +1,6 @@
+@layer components;
+@layer components {
+  .NavigationLogo_styleWithLayer__1u9v1830 {
+    margin-right: 0.5em;
+  }
+}

package/dist/components/Navigation/NavigationMenu.css.js

@@ -1,22 +1,3 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-import { narrow } from './NavigationDrawer.css.js';
-import { spacing } from '../../tokens/semantic/spacing.js';
-import { theme } from '../../themes/theme.css.js';
-
-const navigationMenu = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5em',
-    selectors: {
-        [`${narrow} &`]: {
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            gap: '0',
-            width: '100%',
-            borderTop: `1px solid rgb(${theme.color['border.weak']})`,
-            paddingTop: spacing['md'],
-        },
-    },
-});
+var navigationMenu = 'NavigationMenu_styleWithLayer__rsojes0';
 
 export { navigationMenu };

package/dist/components/Navigation/NavigationMenu.css.ts.vanilla.css

@@ -0,0 +1,16 @@
+@layer components;
+@layer components {
+  .NavigationMenu_styleWithLayer__rsojes0 {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+  .NavigationDrawer_styleWithLayer__1190lva0 .NavigationMenu_styleWithLayer__rsojes0 {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    width: 100%;
+    border-top: 1px solid rgb(var(--color-border\.weak__n6e2fs4));
+    padding-top: 0.5em;
+  }
+}

package/dist/components/Range/Range.css.js

@@ -1,96 +1,8 @@
-import { createVar } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
-import { recipeWithLayer, styleWithLayer } from '../../utils/styleUtils.css.js';
-import { SCALE_COLOR } from '../../tokens/scale/color.js';
-import { semanticColor } from '../../tokens/semantic/color.js';
-import { theme } from '../../themes/theme.css.js';
+import { c as createRuntimeFn } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
 
-const backgroundVar = createVar();
-const semanticColors = semanticColor.reduce((prev, color) => ({
-    ...prev,
-    [color]: styleWithLayer({
-        vars: {
-            [backgroundVar]: theme.color[color],
-        },
-    }),
-}), {});
-const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
-    ...prev,
-    [value]: styleWithLayer({
-        vars: {
-            [backgroundVar]: theme.color[value][100],
-        },
-    }),
-}), {});
-const range = recipeWithLayer({
-    base: {
-        position: 'relative',
-        width: '100%',
-        height: '2em',
-        userSelect: 'none',
-    },
-    variants: {
-        color: {
-            ...semanticColors,
-            ...scaleColors,
-        },
-        size: {
-            sm: {
-                fontSize: '0.75em',
-            },
-            md: {
-                fontSize: '1em',
-            },
-            lg: {
-                fontSize: '1.25em',
-            },
-        },
-    },
-});
-const thumb = styleWithLayer({
-    display: 'inline-block',
-    position: 'absolute',
-    top: '50%',
-    width: '1.25em',
-    height: '1.25em',
-    borderRadius: '50%',
-    boxShadow: `0 0 0.375em 0.125em rgba(${backgroundVar}, 0.33)`,
-    backgroundColor: `rgb(${backgroundVar})`,
-    transform: 'translate(-50%, -50%)',
-    cursor: 'pointer',
-    '::before': {
-        position: 'absolute',
-        inset: '-0.75em',
-        content: '',
-    },
-    '::after': {
-        position: 'absolute',
-        inset: '0',
-        borderRadius: '50%',
-        boxShadow: `0 0 0.5em 0.125em rgba(${backgroundVar}, 0.5)`,
-        opacity: '0',
-        transition: 'opacity 0.2s ease',
-        content: '',
-    },
-    selectors: {
-        '&:hover::after': {
-            opacity: '1',
-        },
-    },
-});
-const fill = styleWithLayer({
-    position: 'absolute',
-    top: '0',
-    height: '100%',
-    backgroundColor: `rgb(${backgroundVar})`,
-});
-const bar = styleWithLayer({
-    position: 'absolute',
-    top: '50%',
-    width: '100%',
-    height: '0.5em',
-    borderRadius: theme.borderRadius,
-    backgroundColor: `rgb(${theme.color.muted})`,
-    transform: 'translateY(-50%)',
-});
+var bar = 'Range_styleWithLayer__biyxwo1z';
+var fill = 'Range_styleWithLayer__biyxwo1y';
+var range = createRuntimeFn({defaultClassName:'Range__biyxwoz Range_layeredBase__biyxwov',variantClassNames:{color:{primary:'Range_styleWithLayer__biyxwo1',secondary:'Range_styleWithLayer__biyxwo2',muted:'Range_styleWithLayer__biyxwo3',accent:'Range_styleWithLayer__biyxwo4',card:'Range_styleWithLayer__biyxwo5',danger:'Range_styleWithLayer__biyxwo6',warning:'Range_styleWithLayer__biyxwo7',success:'Range_styleWithLayer__biyxwo8',red:'Range_styleWithLayer__biyxwo9',orange:'Range_styleWithLayer__biyxwoa',amber:'Range_styleWithLayer__biyxwob',yellow:'Range_styleWithLayer__biyxwoc',lime:'Range_styleWithLayer__biyxwod',green:'Range_styleWithLayer__biyxwoe',emerald:'Range_styleWithLayer__biyxwof',teal:'Range_styleWithLayer__biyxwog',cyan:'Range_styleWithLayer__biyxwoh',sky:'Range_styleWithLayer__biyxwoi',blue:'Range_styleWithLayer__biyxwoj',indigo:'Range_styleWithLayer__biyxwok',violet:'Range_styleWithLayer__biyxwol',purple:'Range_styleWithLayer__biyxwom',fuchsia:'Range_styleWithLayer__biyxwon',pink:'Range_styleWithLayer__biyxwoo',rose:'Range_styleWithLayer__biyxwop',slate:'Range_styleWithLayer__biyxwoq',gray:'Range_styleWithLayer__biyxwor',zinc:'Range_styleWithLayer__biyxwos',neutral:'Range_styleWithLayer__biyxwot',stone:'Range_styleWithLayer__biyxwou'},size:{sm:'Range_styleWithLayer__biyxwow',md:'Range_styleWithLayer__biyxwox',lg:'Range_styleWithLayer__biyxwoy'}},defaultVariants:{},compoundVariants:[]});
+var thumb = 'Range_styleWithLayer__biyxwo1x';
 
 export { bar, fill, range, thumb };

package/dist/components/Range/Range.css.ts.vanilla.css

@@ -0,0 +1,152 @@
+@layer components;
+@layer components {
+  .Range_styleWithLayer__biyxwo1 {
+    --backgroundVar__biyxwo0: var(--color-primary__n6e2fs7);
+  }
+  .Range_styleWithLayer__biyxwo2 {
+    --backgroundVar__biyxwo0: var(--color-secondary__n6e2fs9);
+  }
+  .Range_styleWithLayer__biyxwo3 {
+    --backgroundVar__biyxwo0: var(--color-muted__n6e2fsb);
+  }
+  .Range_styleWithLayer__biyxwo4 {
+    --backgroundVar__biyxwo0: var(--color-accent__n6e2fsd);
+  }
+  .Range_styleWithLayer__biyxwo5 {
+    --backgroundVar__biyxwo0: var(--color-card__n6e2fsf);
+  }
+  .Range_styleWithLayer__biyxwo6 {
+    --backgroundVar__biyxwo0: var(--color-danger__n6e2fsh);
+  }
+  .Range_styleWithLayer__biyxwo7 {
+    --backgroundVar__biyxwo0: var(--color-warning__n6e2fsj);
+  }
+  .Range_styleWithLayer__biyxwo8 {
+    --backgroundVar__biyxwo0: var(--color-success__n6e2fsl);
+  }
+  .Range_styleWithLayer__biyxwo9 {
+    --backgroundVar__biyxwo0: var(--color-red-100__n6e2fso);
+  }
+  .Range_styleWithLayer__biyxwoa {
+    --backgroundVar__biyxwo0: var(--color-orange-100__n6e2fsz);
+  }
+  .Range_styleWithLayer__biyxwob {
+    --backgroundVar__biyxwo0: var(--color-amber-100__n6e2fs1a);
+  }
+  .Range_styleWithLayer__biyxwoc {
+    --backgroundVar__biyxwo0: var(--color-yellow-100__n6e2fs1l);
+  }
+  .Range_styleWithLayer__biyxwod {
+    --backgroundVar__biyxwo0: var(--color-lime-100__n6e2fs1w);
+  }
+  .Range_styleWithLayer__biyxwoe {
+    --backgroundVar__biyxwo0: var(--color-green-100__n6e2fs27);
+  }
+  .Range_styleWithLayer__biyxwof {
+    --backgroundVar__biyxwo0: var(--color-emerald-100__n6e2fs2i);
+  }
+  .Range_styleWithLayer__biyxwog {
+    --backgroundVar__biyxwo0: var(--color-teal-100__n6e2fs2t);
+  }
+  .Range_styleWithLayer__biyxwoh {
+    --backgroundVar__biyxwo0: var(--color-cyan-100__n6e2fs34);
+  }
+  .Range_styleWithLayer__biyxwoi {
+    --backgroundVar__biyxwo0: var(--color-sky-100__n6e2fs3f);
+  }
+  .Range_styleWithLayer__biyxwoj {
+    --backgroundVar__biyxwo0: var(--color-blue-100__n6e2fs3q);
+  }
+  .Range_styleWithLayer__biyxwok {
+    --backgroundVar__biyxwo0: var(--color-indigo-100__n6e2fs41);
+  }
+  .Range_styleWithLayer__biyxwol {
+    --backgroundVar__biyxwo0: var(--color-violet-100__n6e2fs4c);
+  }
+  .Range_styleWithLayer__biyxwom {
+    --backgroundVar__biyxwo0: var(--color-purple-100__n6e2fs4n);
+  }
+  .Range_styleWithLayer__biyxwon {
+    --backgroundVar__biyxwo0: var(--color-fuchsia-100__n6e2fs4y);
+  }
+  .Range_styleWithLayer__biyxwoo {
+    --backgroundVar__biyxwo0: var(--color-pink-100__n6e2fs59);
+  }
+  .Range_styleWithLayer__biyxwop {
+    --backgroundVar__biyxwo0: var(--color-rose-100__n6e2fs5k);
+  }
+  .Range_styleWithLayer__biyxwoq {
+    --backgroundVar__biyxwo0: var(--color-slate-100__n6e2fs5v);
+  }
+  .Range_styleWithLayer__biyxwor {
+    --backgroundVar__biyxwo0: var(--color-gray-100__n6e2fs66);
+  }
+  .Range_styleWithLayer__biyxwos {
+    --backgroundVar__biyxwo0: var(--color-zinc-100__n6e2fs6h);
+  }
+  .Range_styleWithLayer__biyxwot {
+    --backgroundVar__biyxwo0: var(--color-neutral-100__n6e2fs6s);
+  }
+  .Range_styleWithLayer__biyxwou {
+    --backgroundVar__biyxwo0: var(--color-stone-100__n6e2fs73);
+  }
+  .Range_layeredBase__biyxwov {
+    position: relative;
+    width: 100%;
+    height: 2em;
+    user-select: none;
+  }
+  .Range_styleWithLayer__biyxwow {
+    font-size: 0.75em;
+  }
+  .Range_styleWithLayer__biyxwox {
+    font-size: 1em;
+  }
+  .Range_styleWithLayer__biyxwoy {
+    font-size: 1.25em;
+  }
+  .Range_styleWithLayer__biyxwo1x {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: 50%;
+    box-shadow: 0 0 0.375em 0.125em rgba(var(--backgroundVar__biyxwo0), 0.33);
+    background-color: rgb(var(--backgroundVar__biyxwo0));
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+  }
+  .Range_styleWithLayer__biyxwo1x::before {
+    content: "";
+    position: absolute;
+    inset: -0.75em;
+  }
+  .Range_styleWithLayer__biyxwo1x::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0.5em 0.125em rgba(var(--backgroundVar__biyxwo0), 0.5);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  .Range_styleWithLayer__biyxwo1x:hover::after {
+    opacity: 1;
+  }
+  .Range_styleWithLayer__biyxwo1y {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    background-color: rgb(var(--backgroundVar__biyxwo0));
+  }
+  .Range_styleWithLayer__biyxwo1z {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    height: 0.5em;
+    border-radius: var(--borderRadius__n6e2fs0);
+    background-color: rgb(var(--color-muted__n6e2fsb));
+    transform: translateY(-50%);
+  }
+}

package/dist/components/ScrollArea/ScrollArea.css.js

@@ -1,35 +1,7 @@
-import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-
-const MASK_SIZE = '3rem';
-const scrollArea = styleWithLayer({
-    width: '100%',
-    overflowX: 'scroll',
-    '::-webkit-scrollbar': {
-        display: 'none',
-    },
-});
-const maskLeft = style({
-    maskImage: `linear-gradient(to left,
-  black 0%,
-  black calc(100% - ${MASK_SIZE}),
-  transparent 100%)`,
-});
-const maskRight = style({
-    maskImage: `linear-gradient(to right,
-  black 0%,
-  black calc(100% - ${MASK_SIZE}),
-  transparent 100%)`,
-});
-const maskBoth = style({
-    maskImage: `linear-gradient(to right,
-  transparent 0%,
-  black ${MASK_SIZE},
-  black calc(100% - ${MASK_SIZE}),
-  transparent 100%)`,
-});
-const wrapper = style({
-    width: 'max-content',
-});
+var maskBoth = 'ScrollArea_maskBoth__m6lfro3';
+var maskLeft = 'ScrollArea_maskLeft__m6lfro1';
+var maskRight = 'ScrollArea_maskRight__m6lfro2';
+var scrollArea = 'ScrollArea_styleWithLayer__m6lfro0';
+var wrapper = 'ScrollArea_wrapper__m6lfro4';
 
 export { maskBoth, maskLeft, maskRight, scrollArea, wrapper };

package/dist/components/ScrollArea/ScrollArea.css.ts.vanilla.css

@@ -0,0 +1,32 @@
+@layer components;
+.ScrollArea_maskLeft__m6lfro1 {
+  mask-image: linear-gradient(to left,
+black 0%,
+black calc(100% - 3rem),
+transparent 100%);
+}
+.ScrollArea_maskRight__m6lfro2 {
+  mask-image: linear-gradient(to right,
+black 0%,
+black calc(100% - 3rem),
+transparent 100%);
+}
+.ScrollArea_maskBoth__m6lfro3 {
+  mask-image: linear-gradient(to right,
+transparent 0%,
+black 3rem,
+black calc(100% - 3rem),
+transparent 100%);
+}
+.ScrollArea_wrapper__m6lfro4 {
+  width: max-content;
+}
+@layer components {
+  .ScrollArea_styleWithLayer__m6lfro0 {
+    width: 100%;
+    overflow-x: scroll;
+  }
+  .ScrollArea_styleWithLayer__m6lfro0::-webkit-scrollbar {
+    display: none;
+  }
+}

package/dist/components/Select/Select.css.js

@@ -1,23 +1,5 @@
-import { recipeWithLayer } from '../../utils/styleUtils.css.js';
-import { typography } from '../../tokens/semantic/typography.js';
+import { c as createRuntimeFn } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
 
-const select = recipeWithLayer({
-    base: {
-        position: 'relative',
-    },
-    variants: {
-        size: {
-            sm: {
-                fontSize: typography.size.sm,
-            },
-            md: {
-                fontSize: typography.size.md,
-            },
-            lg: {
-                fontSize: typography.size.lg,
-            },
-        },
-    },
-});
+var select = createRuntimeFn({defaultClassName:'Select__7k9d9e4 Select_layeredBase__7k9d9e0',variantClassNames:{size:{sm:'Select_styleWithLayer__7k9d9e1',md:'Select_styleWithLayer__7k9d9e2',lg:'Select_styleWithLayer__7k9d9e3'}},defaultVariants:{},compoundVariants:[]});
 
 export { select };

package/dist/components/Select/Select.css.ts.vanilla.css

@@ -0,0 +1,15 @@
+@layer components;
+@layer components {
+  .Select_layeredBase__7k9d9e0 {
+    position: relative;
+  }
+  .Select_styleWithLayer__7k9d9e1 {
+    font-size: 0.875em;
+  }
+  .Select_styleWithLayer__7k9d9e2 {
+    font-size: 1em;
+  }
+  .Select_styleWithLayer__7k9d9e3 {
+    font-size: 1.125em;
+  }
+}

package/dist/components/Select/SelectOption.css.js

@@ -1,13 +1,3 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-import { theme } from '../../themes/theme.css.js';
-
-const selectOption = styleWithLayer({
-    padding: '0.75em 0.5em',
-    transition: 'background-color 0.2s ease',
-    cursor: 'default',
-    ':hover': {
-        backgroundColor: `rgb(${theme.color.accent})`,
-    },
-});
+var selectOption = 'SelectOption_styleWithLayer__16jsez30';
 
 export { selectOption };

package/dist/components/Select/SelectOption.css.ts.vanilla.css

@@ -0,0 +1,11 @@
+@layer components;
+@layer components {
+  .SelectOption_styleWithLayer__16jsez30 {
+    padding: 0.75em 0.5em;
+    transition: background-color 0.2s ease;
+    cursor: default;
+  }
+  .SelectOption_styleWithLayer__16jsez30:hover {
+    background-color: rgb(var(--color-accent__n6e2fsd));
+  }
+}