@kimdw-rtk/ui 0.0.23 → 0.0.25

package/dist/components/Card/Card.css.js

@@ -1,71 +1,5 @@
-import { recipeWithLayer, styleWithLayer } from '../../utils/styleUtils.css.js';
-import { SCALE_COLOR } from '../../tokens/scale/color.js';
-import { cardInteraction } from './CardInteraction.css.js';
-import { theme } from '../../themes/theme.css.js';
-import { semanticColor } from '../../tokens/semantic/color.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 semanticColors = semanticColor.reduce((prev, color) => ({
-    ...prev,
-    [color]: styleWithLayer({
-        backgroundColor: `rgb(${theme.color[color]})`,
-    }),
-}), {});
-const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
-    ...prev,
-    [value]: styleWithLayer({
-        backgroundColor: `color-mix(in srgb, rgb(${theme.color[value][500]}) 20%, rgb(${theme.color.background}) 80%)`,
-    }),
-}), {});
-const card = recipeWithLayer({
-    base: {
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        position: 'relative',
-        borderRadius: theme.borderRadius,
-        color: `rgb(${theme.color.foreground})`,
-        transition: 'border-color 0.2s ease, transform 0.4s ease',
-        selectors: {
-            [`&:has(${cardInteraction}:hover)`]: {
-                borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 10%, rgb(${theme.color.border}) 90%)`,
-            },
-            [`&:has(${cardInteraction}:active)`]: {
-                borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 40%, rgb(${theme.color.border}) 60%)`,
-            },
-        },
-    },
-    variants: {
-        variant: {
-            contained: {},
-            outlined: {
-                border: '1px solid',
-                borderColor: `rgb(${theme.color.border})`,
-            },
-            glass: {
-                border: `1px solid rgb(${theme.color['border.weak']})`,
-                borderRadius: '0.75rem',
-                background: `linear-gradient(rgba(${theme.color['card.gradient']}, 0.06) 0%, rgba(${theme.color['card.gradient']}, 0.02) 100%)`,
-                backdropFilter: 'blur(1rem)',
-                '::before': {
-                    position: 'absolute',
-                    inset: '0',
-                    background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)',
-                    opacity: '0',
-                    transition: 'opacity 0.3s ease',
-                    content: '',
-                },
-                selectors: {
-                    '&:hover::before': {
-                        opacity: '1',
-                    },
-                },
-            },
-        },
-        color: {
-            ...semanticColors,
-            ...scaleColors,
-        },
-    },
-});
+var card = createRuntimeFn({defaultClassName:'Card__1foreksy Card_layeredBase__1foreksu',variantClassNames:{variant:{contained:'Card_styleWithLayer__1foreksv',outlined:'Card_styleWithLayer__1foreksw',glass:'Card_styleWithLayer__1foreksx'},color:{primary:'Card_styleWithLayer__1foreks0',secondary:'Card_styleWithLayer__1foreks1',muted:'Card_styleWithLayer__1foreks2',accent:'Card_styleWithLayer__1foreks3',card:'Card_styleWithLayer__1foreks4',danger:'Card_styleWithLayer__1foreks5',warning:'Card_styleWithLayer__1foreks6',success:'Card_styleWithLayer__1foreks7',red:'Card_styleWithLayer__1foreks8',orange:'Card_styleWithLayer__1foreks9',amber:'Card_styleWithLayer__1foreksa',yellow:'Card_styleWithLayer__1foreksb',lime:'Card_styleWithLayer__1foreksc',green:'Card_styleWithLayer__1foreksd',emerald:'Card_styleWithLayer__1forekse',teal:'Card_styleWithLayer__1foreksf',cyan:'Card_styleWithLayer__1foreksg',sky:'Card_styleWithLayer__1foreksh',blue:'Card_styleWithLayer__1foreksi',indigo:'Card_styleWithLayer__1foreksj',violet:'Card_styleWithLayer__1foreksk',purple:'Card_styleWithLayer__1foreksl',fuchsia:'Card_styleWithLayer__1foreksm',pink:'Card_styleWithLayer__1foreksn',rose:'Card_styleWithLayer__1forekso',slate:'Card_styleWithLayer__1foreksp',gray:'Card_styleWithLayer__1foreksq',zinc:'Card_styleWithLayer__1foreksr',neutral:'Card_styleWithLayer__1forekss',stone:'Card_styleWithLayer__1forekst'}},defaultVariants:{},compoundVariants:[]});
 
 export { card };

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

@@ -0,0 +1,129 @@
+@layer components;
+@layer components {
+  .Card_styleWithLayer__1foreks0 {
+    background-color: rgb(var(--color-primary__n6e2fs7));
+  }
+  .Card_styleWithLayer__1foreks1 {
+    background-color: rgb(var(--color-secondary__n6e2fs9));
+  }
+  .Card_styleWithLayer__1foreks2 {
+    background-color: rgb(var(--color-muted__n6e2fsb));
+  }
+  .Card_styleWithLayer__1foreks3 {
+    background-color: rgb(var(--color-accent__n6e2fsd));
+  }
+  .Card_styleWithLayer__1foreks4 {
+    background-color: rgb(var(--color-card__n6e2fsf));
+  }
+  .Card_styleWithLayer__1foreks5 {
+    background-color: rgb(var(--color-danger__n6e2fsh));
+  }
+  .Card_styleWithLayer__1foreks6 {
+    background-color: rgb(var(--color-warning__n6e2fsj));
+  }
+  .Card_styleWithLayer__1foreks7 {
+    background-color: rgb(var(--color-success__n6e2fsl));
+  }
+  .Card_styleWithLayer__1foreks8 {
+    background-color: color-mix(in srgb, rgb(var(--color-red-500__n6e2fss)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreks9 {
+    background-color: color-mix(in srgb, rgb(var(--color-orange-500__n6e2fs13)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksa {
+    background-color: color-mix(in srgb, rgb(var(--color-amber-500__n6e2fs1e)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksb {
+    background-color: color-mix(in srgb, rgb(var(--color-yellow-500__n6e2fs1p)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksc {
+    background-color: color-mix(in srgb, rgb(var(--color-lime-500__n6e2fs20)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksd {
+    background-color: color-mix(in srgb, rgb(var(--color-green-500__n6e2fs2b)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1forekse {
+    background-color: color-mix(in srgb, rgb(var(--color-emerald-500__n6e2fs2m)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksf {
+    background-color: color-mix(in srgb, rgb(var(--color-teal-500__n6e2fs2x)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksg {
+    background-color: color-mix(in srgb, rgb(var(--color-cyan-500__n6e2fs38)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksh {
+    background-color: color-mix(in srgb, rgb(var(--color-sky-500__n6e2fs3j)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksi {
+    background-color: color-mix(in srgb, rgb(var(--color-blue-500__n6e2fs3u)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksj {
+    background-color: color-mix(in srgb, rgb(var(--color-indigo-500__n6e2fs45)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksk {
+    background-color: color-mix(in srgb, rgb(var(--color-violet-500__n6e2fs4g)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksl {
+    background-color: color-mix(in srgb, rgb(var(--color-purple-500__n6e2fs4r)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksm {
+    background-color: color-mix(in srgb, rgb(var(--color-fuchsia-500__n6e2fs52)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksn {
+    background-color: color-mix(in srgb, rgb(var(--color-pink-500__n6e2fs5d)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1forekso {
+    background-color: color-mix(in srgb, rgb(var(--color-rose-500__n6e2fs5o)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksp {
+    background-color: color-mix(in srgb, rgb(var(--color-slate-500__n6e2fs5z)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksq {
+    background-color: color-mix(in srgb, rgb(var(--color-gray-500__n6e2fs6a)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1foreksr {
+    background-color: color-mix(in srgb, rgb(var(--color-zinc-500__n6e2fs6l)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1forekss {
+    background-color: color-mix(in srgb, rgb(var(--color-neutral-500__n6e2fs6w)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_styleWithLayer__1forekst {
+    background-color: color-mix(in srgb, rgb(var(--color-stone-500__n6e2fs77)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
+  }
+  .Card_layeredBase__1foreksu {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    border-radius: var(--borderRadius__n6e2fs0);
+    color: rgb(var(--color-foreground__n6e2fs2));
+    transition: border-color 0.2s ease, transform 0.4s ease;
+  }
+  .Card_layeredBase__1foreksu:has(.CardInteraction_styleWithLayer__3n4sac0:hover) {
+    border-color: color-mix(in srgb, rgb(var(--color-primary__n6e2fs7)) 10%, rgb(var(--color-border__n6e2fs3)) 90%);
+  }
+  .Card_layeredBase__1foreksu:has(.CardInteraction_styleWithLayer__3n4sac0:active) {
+    border-color: color-mix(in srgb, rgb(var(--color-primary__n6e2fs7)) 40%, rgb(var(--color-border__n6e2fs3)) 60%);
+  }
+  .Card_styleWithLayer__1foreksw {
+    border: 1px solid;
+    border-color: rgb(var(--color-border__n6e2fs3));
+  }
+  .Card_styleWithLayer__1foreksx {
+    border: 1px solid rgb(var(--color-border\.weak__n6e2fs4));
+    border-radius: 0.75rem;
+    background: linear-gradient(rgba(var(--color-card\.gradient__n6e2fs5), 0.06) 0%, rgba(var(--color-card\.gradient__n6e2fs5), 0.02) 100%);
+    backdrop-filter: blur(1rem);
+  }
+  .Card_styleWithLayer__1foreksx::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  .Card_styleWithLayer__1foreksx:hover::before {
+    opacity: 1;
+  }
+}

package/dist/components/Card/CardContent.css.js

@@ -1,9 +1,3 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-import { spacing } from '../../tokens/semantic/spacing.js';
-
-const cardContent = styleWithLayer({
-    flex: '1 1 auto',
-    padding: spacing.md,
-});
+var cardContent = 'CardContent_styleWithLayer__1nhygmc0';
 
 export { cardContent };

package/dist/components/Card/CardContent.css.ts.vanilla.css

@@ -0,0 +1,7 @@
+@layer components;
+@layer components {
+  .CardContent_styleWithLayer__1nhygmc0 {
+    flex: 1 1 auto;
+    padding: 0.5em;
+  }
+}

package/dist/components/Card/CardInteraction.css.js

@@ -1,11 +1,3 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-
-const cardInteraction = styleWithLayer({
-    position: 'relative',
-    overflow: 'hidden',
-    height: '100%',
-    cursor: 'pointer',
-    userSelect: 'none',
-});
+var cardInteraction = 'CardInteraction_styleWithLayer__3n4sac0';
 
 export { cardInteraction };

package/dist/components/Card/CardInteraction.css.ts.vanilla.css

@@ -0,0 +1,10 @@
+@layer components;
+@layer components {
+  .CardInteraction_styleWithLayer__3n4sac0 {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+  }
+}

package/dist/components/Card/CardThumbnail.css.js

@@ -1,8 +1,3 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-
-const thumbnail = styleWithLayer({
-    width: 'auto',
-    maxWidth: '100%',
-});
+var thumbnail = 'CardThumbnail_styleWithLayer__1c08tgo0';
 
 export { thumbnail };

package/dist/components/Card/CardThumbnail.css.ts.vanilla.css

@@ -0,0 +1,7 @@
+@layer components;
+@layer components {
+  .CardThumbnail_styleWithLayer__1c08tgo0 {
+    width: auto;
+    max-width: 100%;
+  }
+}

package/dist/components/Chip/Chip.css.js

@@ -1,59 +1,5 @@
-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 { theme } from '../../themes/theme.css.js';
-import { semanticColor } from '../../tokens/semantic/color.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 foregroundVar = createVar();
-const semanticColors = semanticColor.reduce((prev, color) => ({
-    ...prev,
-    [color]: styleWithLayer({
-        vars: {
-            [backgroundVar]: theme.color[color],
-            [foregroundVar]: theme.color[`${color}-foreground`],
-        },
-    }),
-}), {});
-const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
-    ...prev,
-    [value]: styleWithLayer({
-        vars: {
-            [backgroundVar]: theme.color[value][500],
-            [foregroundVar]: theme.color[value][50],
-        },
-    }),
-}), {});
-const chip = recipeWithLayer({
-    base: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        lineHeight: '0',
-        gap: '0.125em',
-        height: '2em',
-        padding: '0 0.75em',
-        borderRadius: theme.borderRadius,
-        backgroundColor: `rgb(${backgroundVar})`,
-        color: `rgb(${foregroundVar})`,
-        userSelect: 'none',
-    },
-    variants: {
-        color: {
-            ...semanticColors,
-            ...scaleColors,
-        },
-        size: {
-            sm: {
-                fontSize: '0.75em',
-            },
-            md: {
-                fontSize: '0.875em',
-            },
-            lg: {
-                fontSize: '1em',
-            },
-        },
-    },
-});
+var chip = createRuntimeFn({defaultClassName:'Chip__1ogf81t10 Chip_layeredBase__1ogf81tw',variantClassNames:{color:{primary:'Chip_styleWithLayer__1ogf81t2',secondary:'Chip_styleWithLayer__1ogf81t3',muted:'Chip_styleWithLayer__1ogf81t4',accent:'Chip_styleWithLayer__1ogf81t5',card:'Chip_styleWithLayer__1ogf81t6',danger:'Chip_styleWithLayer__1ogf81t7',warning:'Chip_styleWithLayer__1ogf81t8',success:'Chip_styleWithLayer__1ogf81t9',red:'Chip_styleWithLayer__1ogf81ta',orange:'Chip_styleWithLayer__1ogf81tb',amber:'Chip_styleWithLayer__1ogf81tc',yellow:'Chip_styleWithLayer__1ogf81td',lime:'Chip_styleWithLayer__1ogf81te',green:'Chip_styleWithLayer__1ogf81tf',emerald:'Chip_styleWithLayer__1ogf81tg',teal:'Chip_styleWithLayer__1ogf81th',cyan:'Chip_styleWithLayer__1ogf81ti',sky:'Chip_styleWithLayer__1ogf81tj',blue:'Chip_styleWithLayer__1ogf81tk',indigo:'Chip_styleWithLayer__1ogf81tl',violet:'Chip_styleWithLayer__1ogf81tm',purple:'Chip_styleWithLayer__1ogf81tn',fuchsia:'Chip_styleWithLayer__1ogf81to',pink:'Chip_styleWithLayer__1ogf81tp',rose:'Chip_styleWithLayer__1ogf81tq',slate:'Chip_styleWithLayer__1ogf81tr',gray:'Chip_styleWithLayer__1ogf81ts',zinc:'Chip_styleWithLayer__1ogf81tt',neutral:'Chip_styleWithLayer__1ogf81tu',stone:'Chip_styleWithLayer__1ogf81tv'},size:{sm:'Chip_styleWithLayer__1ogf81tx',md:'Chip_styleWithLayer__1ogf81ty',lg:'Chip_styleWithLayer__1ogf81tz'}},defaultVariants:{},compoundVariants:[]});
 
 export { chip };

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

@@ -0,0 +1,144 @@
+@layer components;
+@layer components {
+  .Chip_styleWithLayer__1ogf81t2 {
+    --backgroundVar__1ogf81t0: var(--color-primary__n6e2fs7);
+    --foregroundVar__1ogf81t1: var(--color-primary-foreground__n6e2fs8);
+  }
+  .Chip_styleWithLayer__1ogf81t3 {
+    --backgroundVar__1ogf81t0: var(--color-secondary__n6e2fs9);
+    --foregroundVar__1ogf81t1: var(--color-secondary-foreground__n6e2fsa);
+  }
+  .Chip_styleWithLayer__1ogf81t4 {
+    --backgroundVar__1ogf81t0: var(--color-muted__n6e2fsb);
+    --foregroundVar__1ogf81t1: var(--color-muted-foreground__n6e2fsc);
+  }
+  .Chip_styleWithLayer__1ogf81t5 {
+    --backgroundVar__1ogf81t0: var(--color-accent__n6e2fsd);
+    --foregroundVar__1ogf81t1: var(--color-accent-foreground__n6e2fse);
+  }
+  .Chip_styleWithLayer__1ogf81t6 {
+    --backgroundVar__1ogf81t0: var(--color-card__n6e2fsf);
+    --foregroundVar__1ogf81t1: var(--color-card-foreground__n6e2fsg);
+  }
+  .Chip_styleWithLayer__1ogf81t7 {
+    --backgroundVar__1ogf81t0: var(--color-danger__n6e2fsh);
+    --foregroundVar__1ogf81t1: var(--color-danger-foreground__n6e2fsi);
+  }
+  .Chip_styleWithLayer__1ogf81t8 {
+    --backgroundVar__1ogf81t0: var(--color-warning__n6e2fsj);
+    --foregroundVar__1ogf81t1: var(--color-warning-foreground__n6e2fsk);
+  }
+  .Chip_styleWithLayer__1ogf81t9 {
+    --backgroundVar__1ogf81t0: var(--color-success__n6e2fsl);
+    --foregroundVar__1ogf81t1: var(--color-success-foreground__n6e2fsm);
+  }
+  .Chip_styleWithLayer__1ogf81ta {
+    --backgroundVar__1ogf81t0: var(--color-red-500__n6e2fss);
+    --foregroundVar__1ogf81t1: var(--color-red-50__n6e2fsn);
+  }
+  .Chip_styleWithLayer__1ogf81tb {
+    --backgroundVar__1ogf81t0: var(--color-orange-500__n6e2fs13);
+    --foregroundVar__1ogf81t1: var(--color-orange-50__n6e2fsy);
+  }
+  .Chip_styleWithLayer__1ogf81tc {
+    --backgroundVar__1ogf81t0: var(--color-amber-500__n6e2fs1e);
+    --foregroundVar__1ogf81t1: var(--color-amber-50__n6e2fs19);
+  }
+  .Chip_styleWithLayer__1ogf81td {
+    --backgroundVar__1ogf81t0: var(--color-yellow-500__n6e2fs1p);
+    --foregroundVar__1ogf81t1: var(--color-yellow-50__n6e2fs1k);
+  }
+  .Chip_styleWithLayer__1ogf81te {
+    --backgroundVar__1ogf81t0: var(--color-lime-500__n6e2fs20);
+    --foregroundVar__1ogf81t1: var(--color-lime-50__n6e2fs1v);
+  }
+  .Chip_styleWithLayer__1ogf81tf {
+    --backgroundVar__1ogf81t0: var(--color-green-500__n6e2fs2b);
+    --foregroundVar__1ogf81t1: var(--color-green-50__n6e2fs26);
+  }
+  .Chip_styleWithLayer__1ogf81tg {
+    --backgroundVar__1ogf81t0: var(--color-emerald-500__n6e2fs2m);
+    --foregroundVar__1ogf81t1: var(--color-emerald-50__n6e2fs2h);
+  }
+  .Chip_styleWithLayer__1ogf81th {
+    --backgroundVar__1ogf81t0: var(--color-teal-500__n6e2fs2x);
+    --foregroundVar__1ogf81t1: var(--color-teal-50__n6e2fs2s);
+  }
+  .Chip_styleWithLayer__1ogf81ti {
+    --backgroundVar__1ogf81t0: var(--color-cyan-500__n6e2fs38);
+    --foregroundVar__1ogf81t1: var(--color-cyan-50__n6e2fs33);
+  }
+  .Chip_styleWithLayer__1ogf81tj {
+    --backgroundVar__1ogf81t0: var(--color-sky-500__n6e2fs3j);
+    --foregroundVar__1ogf81t1: var(--color-sky-50__n6e2fs3e);
+  }
+  .Chip_styleWithLayer__1ogf81tk {
+    --backgroundVar__1ogf81t0: var(--color-blue-500__n6e2fs3u);
+    --foregroundVar__1ogf81t1: var(--color-blue-50__n6e2fs3p);
+  }
+  .Chip_styleWithLayer__1ogf81tl {
+    --backgroundVar__1ogf81t0: var(--color-indigo-500__n6e2fs45);
+    --foregroundVar__1ogf81t1: var(--color-indigo-50__n6e2fs40);
+  }
+  .Chip_styleWithLayer__1ogf81tm {
+    --backgroundVar__1ogf81t0: var(--color-violet-500__n6e2fs4g);
+    --foregroundVar__1ogf81t1: var(--color-violet-50__n6e2fs4b);
+  }
+  .Chip_styleWithLayer__1ogf81tn {
+    --backgroundVar__1ogf81t0: var(--color-purple-500__n6e2fs4r);
+    --foregroundVar__1ogf81t1: var(--color-purple-50__n6e2fs4m);
+  }
+  .Chip_styleWithLayer__1ogf81to {
+    --backgroundVar__1ogf81t0: var(--color-fuchsia-500__n6e2fs52);
+    --foregroundVar__1ogf81t1: var(--color-fuchsia-50__n6e2fs4x);
+  }
+  .Chip_styleWithLayer__1ogf81tp {
+    --backgroundVar__1ogf81t0: var(--color-pink-500__n6e2fs5d);
+    --foregroundVar__1ogf81t1: var(--color-pink-50__n6e2fs58);
+  }
+  .Chip_styleWithLayer__1ogf81tq {
+    --backgroundVar__1ogf81t0: var(--color-rose-500__n6e2fs5o);
+    --foregroundVar__1ogf81t1: var(--color-rose-50__n6e2fs5j);
+  }
+  .Chip_styleWithLayer__1ogf81tr {
+    --backgroundVar__1ogf81t0: var(--color-slate-500__n6e2fs5z);
+    --foregroundVar__1ogf81t1: var(--color-slate-50__n6e2fs5u);
+  }
+  .Chip_styleWithLayer__1ogf81ts {
+    --backgroundVar__1ogf81t0: var(--color-gray-500__n6e2fs6a);
+    --foregroundVar__1ogf81t1: var(--color-gray-50__n6e2fs65);
+  }
+  .Chip_styleWithLayer__1ogf81tt {
+    --backgroundVar__1ogf81t0: var(--color-zinc-500__n6e2fs6l);
+    --foregroundVar__1ogf81t1: var(--color-zinc-50__n6e2fs6g);
+  }
+  .Chip_styleWithLayer__1ogf81tu {
+    --backgroundVar__1ogf81t0: var(--color-neutral-500__n6e2fs6w);
+    --foregroundVar__1ogf81t1: var(--color-neutral-50__n6e2fs6r);
+  }
+  .Chip_styleWithLayer__1ogf81tv {
+    --backgroundVar__1ogf81t0: var(--color-stone-500__n6e2fs77);
+    --foregroundVar__1ogf81t1: var(--color-stone-50__n6e2fs72);
+  }
+  .Chip_layeredBase__1ogf81tw {
+    display: inline-flex;
+    align-items: center;
+    line-height: 0;
+    gap: 0.125em;
+    height: 2em;
+    padding: 0 0.75em;
+    border-radius: var(--borderRadius__n6e2fs0);
+    background-color: rgb(var(--backgroundVar__1ogf81t0));
+    color: rgb(var(--foregroundVar__1ogf81t1));
+    user-select: none;
+  }
+  .Chip_styleWithLayer__1ogf81tx {
+    font-size: 0.75em;
+  }
+  .Chip_styleWithLayer__1ogf81ty {
+    font-size: 0.875em;
+  }
+  .Chip_styleWithLayer__1ogf81tz {
+    font-size: 1em;
+  }
+}

package/dist/components/Dialog/Dialog.css.js

@@ -1,22 +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';
-import { theme } from '../../themes/theme.css.js';
-
-const container = style({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '1rem',
-    overflowY: 'auto',
-    maxWidth: 'calc(100vw - 2rem)',
-    minWidth: 'min(20rem, calc(100vw - 2rem))',
-    maxHeight: 'calc(100vh - 2rem)',
-    borderRadius: theme.borderRadius,
-    boxSizing: 'border-box',
-    backgroundColor: `rgb(${theme.color.background})`,
-});
-style({
-    marginBottom: '1rem',
-    lineHeight: '150%',
-    wordBreak: 'break-all',
-});
+var container = 'Dialog_container__qjtgcx0';
 
 export { container };

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

@@ -0,0 +1,17 @@
+.Dialog_container__qjtgcx0 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  max-width: calc(100vw - 2rem);
+  min-width: min(20rem, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  border-radius: var(--borderRadius__n6e2fs0);
+  box-sizing: border-box;
+  background-color: rgb(var(--color-background__n6e2fs1));
+}
+.Dialog_message__qjtgcx1 {
+  margin-bottom: 1rem;
+  line-height: 150%;
+  word-break: break-all;
+}

package/dist/components/Dialog/DialogContent.css.js

@@ -1,15 +1,3 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-import { container as container$1 } from './DialogHeader.css.js';
-import { theme } from '../../themes/theme.css.js';
-
-const container = styleWithLayer({
-    padding: '0 1.5rem 1.5rem 1.5rem',
-    wordBreak: 'break-all',
-    selectors: {
-        [`${container$1} + &`]: {
-            color: `rgb(${theme.color['muted-foreground']})`,
-        },
-    },
-});
+var container = 'DialogContent_styleWithLayer__1v0lk0e0';
 
 export { container };

package/dist/components/Dialog/DialogContent.css.ts.vanilla.css

@@ -0,0 +1,10 @@
+@layer components;
+@layer components {
+  .DialogContent_styleWithLayer__1v0lk0e0 {
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    word-break: break-all;
+  }
+  .DialogHeader_styleWithLayer__jb8ns00 + .DialogContent_styleWithLayer__1v0lk0e0 {
+    color: rgb(var(--color-muted-foreground__n6e2fsc));
+  }
+}

package/dist/components/Dialog/DialogHeader.css.js

@@ -1,26 +1,4 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-import { theme } from '../../themes/theme.css.js';
-
-const container = styleWithLayer({
-    position: 'sticky',
-    top: '0',
-    padding: '1.5rem',
-    zIndex: '10',
-    backgroundColor: `rgb(${theme.color.background})`,
-});
-const close = styleWithLayer({
-    width: '1.25rem',
-    height: '1.25rem',
-    padding: '0',
-    border: '0',
-    backgroundColor: 'transparent',
-    fontSize: '1em',
-    color: `rgb(${theme.color['muted-foreground']})`,
-    cursor: 'pointer',
-    transition: 'color 0.1s ease',
-    ':hover': {
-        color: `rgb(${theme.color['foreground']})`,
-    },
-});
+var close = 'DialogHeader_styleWithLayer__jb8ns01';
+var container = 'DialogHeader_styleWithLayer__jb8ns00';
 
 export { close, container };

package/dist/components/Dialog/DialogHeader.css.ts.vanilla.css

@@ -0,0 +1,24 @@
+@layer components;
+@layer components {
+  .DialogHeader_styleWithLayer__jb8ns00 {
+    position: sticky;
+    top: 0;
+    padding: 1.5rem;
+    z-index: 10;
+    background-color: rgb(var(--color-background__n6e2fs1));
+  }
+  .DialogHeader_styleWithLayer__jb8ns01 {
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    font-size: 1em;
+    color: rgb(var(--color-muted-foreground__n6e2fsc));
+    cursor: pointer;
+    transition: color 0.1s ease;
+  }
+  .DialogHeader_styleWithLayer__jb8ns01:hover {
+    color: rgb(var(--color-foreground__n6e2fs2));
+  }
+}

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

@@ -1,9 +1,3 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-
-const wide = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5em',
-});
+var wide = 'NavigationAside_styleWithLayer__alxqst0';
 
 export { wide };

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

@@ -0,0 +1,8 @@
+@layer components;
+@layer components {
+  .NavigationAside_styleWithLayer__alxqst0 {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+}

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

@@ -1,35 +1,6 @@
-import { createContainer } 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 } from '../../utils/styleUtils.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 navigationBarContainer = createContainer();
-const navigationBar = recipeWithLayer({
-    base: {
-        zIndex: '20',
-        position: 'sticky',
-        top: '0',
-        width: '100%',
-        borderBottom: `1px solid rgb(${theme.color['border.weak']})`,
-        backgroundColor: `rgba(${theme.color.background}, 0.75)`,
-        backdropFilter: 'blur(2rem) saturate(150%)',
-        color: `rgb(${theme.color.border})`,
-        transition: 'border-bottom-color 0.2s ease',
-        containerType: 'inline-size',
-        containerName: navigationBarContainer,
-    },
-    variants: {
-        size: {
-            sm: {
-                height: '4em',
-            },
-            md: {
-                height: '5em',
-            },
-            lg: {
-                height: '6em',
-            },
-        },
-    },
-});
+var navigationBar = createRuntimeFn({defaultClassName:'NavigationBar__x4q5x95 NavigationBar_layeredBase__x4q5x91',variantClassNames:{size:{sm:'NavigationBar_styleWithLayer__x4q5x92',md:'NavigationBar_styleWithLayer__x4q5x93',lg:'NavigationBar_styleWithLayer__x4q5x94'}},defaultVariants:{},compoundVariants:[]});
+var navigationBarContainer = 'NavigationBar_navigationBarContainer__x4q5x90';
 
 export { navigationBar, navigationBarContainer };