@kimdw-rtk/ui 0.0.23 → 0.0.25

package/dist/components/Accordion/Accordion.css.js

@@ -1,27 +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 } 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 paddingVar = createVar();
-const accordion = recipeWithLayer({
-    base: {
-        width: '100%',
-        borderBottom: `1px solid rgb(${theme.color.border})`,
-    },
-    variants: {
-        isPadding: {
-            true: {
-                vars: {
-                    [paddingVar]: '0.75em',
-                },
-            },
-            false: {
-                vars: {
-                    [paddingVar]: '0.75em 0',
-                },
-            },
-        },
-    },
-});
+var accordion = createRuntimeFn({defaultClassName:'Accordion__18xln004 Accordion_layeredBase__18xln001',variantClassNames:{isPadding:{true:'Accordion_styleWithLayer__18xln002',false:'Accordion_styleWithLayer__18xln003'}},defaultVariants:{},compoundVariants:[]});
 
-export { accordion, paddingVar };
+export { accordion };

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

@@ -0,0 +1,13 @@
+@layer components;
+@layer components {
+  .Accordion_layeredBase__18xln001 {
+    width: 100%;
+    border-bottom: 1px solid rgb(var(--color-border__n6e2fs3));
+  }
+  .Accordion_styleWithLayer__18xln002 {
+    --paddingVar__18xln000: 0.75em;
+  }
+  .Accordion_styleWithLayer__18xln003 {
+    --paddingVar__18xln000: 0.75em 0;
+  }
+}

package/dist/components/Accordion/AccordionContent.css.js

@@ -1,25 +1,6 @@
-import { recipeWithLayer, styleWithLayer } from '../../utils/styleUtils.css.js';
-import { paddingVar } from './Accordion.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 container = recipeWithLayer({
-    base: {
-        overflow: 'hidden',
-        transition: 'height 0.2s ease, opacity 0.2s ease',
-    },
-    variants: {
-        isExpanded: {
-            true: {
-                opacity: '1',
-            },
-            false: {
-                height: '0',
-                opacity: '0',
-            },
-        },
-    },
-});
-const inner = styleWithLayer({
-    padding: paddingVar,
-});
+var container = createRuntimeFn({defaultClassName:'AccordionContent__a19wuy3 AccordionContent_layeredBase__a19wuy0',variantClassNames:{isExpanded:{true:'AccordionContent_styleWithLayer__a19wuy1',false:'AccordionContent_styleWithLayer__a19wuy2'}},defaultVariants:{},compoundVariants:[]});
+var inner = 'AccordionContent_styleWithLayer__a19wuy6';
 
 export { container, inner };

package/dist/components/Accordion/AccordionContent.css.ts.vanilla.css

@@ -0,0 +1,17 @@
+@layer components;
+@layer components {
+  .AccordionContent_layeredBase__a19wuy0 {
+    overflow: hidden;
+    transition: height 0.2s ease, opacity 0.2s ease;
+  }
+  .AccordionContent_styleWithLayer__a19wuy1 {
+    opacity: 1;
+  }
+  .AccordionContent_styleWithLayer__a19wuy2 {
+    height: 0;
+    opacity: 0;
+  }
+  .AccordionContent_styleWithLayer__a19wuy6 {
+    padding: var(--paddingVar__18xln000);
+  }
+}

package/dist/components/Accordion/AccordionTrigger.css.js

@@ -1,42 +1,6 @@
-import { recipeWithLayer } from '../../utils/styleUtils.css.js';
-import { paddingVar } from './Accordion.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 triggerContainer = recipeWithLayer({
-    base: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.25em',
-        width: '100%',
-        padding: paddingVar,
-        cursor: 'pointer',
-        ':hover': {
-            textDecoration: 'underline',
-        },
-    },
-    variants: {
-        iconPosition: {
-            text: {},
-            right: {
-                justifyContent: 'space-between',
-            },
-        },
-    },
-});
-const arrow = recipeWithLayer({
-    base: {
-        lineHeight: '0',
-        transition: 'transform 0.2s ease',
-    },
-    variants: {
-        expand: {
-            true: {
-                transform: 'rotate(-180deg)',
-            },
-            false: {
-                transform: 'rotate(0)',
-            },
-        },
-    },
-});
+var arrow = createRuntimeFn({defaultClassName:'AccordionTrigger__1xaprgb9 AccordionTrigger_layeredBase__1xaprgb6',variantClassNames:{expand:{true:'AccordionTrigger_styleWithLayer__1xaprgb7',false:'AccordionTrigger_styleWithLayer__1xaprgb8'}},defaultVariants:{},compoundVariants:[]});
+var triggerContainer = createRuntimeFn({defaultClassName:'AccordionTrigger__1xaprgb3 AccordionTrigger_layeredBase__1xaprgb0',variantClassNames:{iconPosition:{text:'AccordionTrigger_styleWithLayer__1xaprgb1',right:'AccordionTrigger_styleWithLayer__1xaprgb2'}},defaultVariants:{},compoundVariants:[]});
 
 export { arrow, triggerContainer };

package/dist/components/Accordion/AccordionTrigger.css.ts.vanilla.css

@@ -0,0 +1,27 @@
+@layer components;
+@layer components {
+  .AccordionTrigger_layeredBase__1xaprgb0 {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+    width: 100%;
+    padding: var(--paddingVar__18xln000);
+    cursor: pointer;
+  }
+  .AccordionTrigger_layeredBase__1xaprgb0:hover {
+    text-decoration: underline;
+  }
+  .AccordionTrigger_styleWithLayer__1xaprgb2 {
+    justify-content: space-between;
+  }
+  .AccordionTrigger_layeredBase__1xaprgb6 {
+    line-height: 0;
+    transition: transform 0.2s ease;
+  }
+  .AccordionTrigger_styleWithLayer__1xaprgb7 {
+    transform: rotate(-180deg);
+  }
+  .AccordionTrigger_styleWithLayer__1xaprgb8 {
+    transform: rotate(0);
+  }
+}

package/dist/components/Box/Box.css.js

@@ -1,19 +1,5 @@
-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 box = recipeWithLayer({
-    variants: {
-        flex: {
-            true: {
-                display: 'flex',
-            },
-        },
-        rounded: {
-            true: {
-                borderRadius: theme.borderRadius,
-            },
-        },
-    },
-});
+var box = createRuntimeFn({defaultClassName:'Box__1wsb57c2',variantClassNames:{flex:{true:'Box_styleWithLayer__1wsb57c0'},rounded:{true:'Box_styleWithLayer__1wsb57c1'}},defaultVariants:{},compoundVariants:[]});
 
 export { box };

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

@@ -0,0 +1,9 @@
+@layer components;
+@layer components {
+  .Box_styleWithLayer__1wsb57c0 {
+    display: flex;
+  }
+  .Box_styleWithLayer__1wsb57c1 {
+    border-radius: var(--borderRadius__n6e2fs0);
+  }
+}

package/dist/components/Button/Button.css.js

@@ -1,185 +1,7 @@
-import { style, keyframes, createVar, globalStyle } 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.background,
-        },
-    }),
-}), {});
-const pulse = keyframes({
-    '0%': {
-        backgroundPosition: '-300% 0',
-    },
-    '100%': {
-        backgroundPosition: '300% 0',
-    },
-});
-const span = recipeWithLayer({
-    base: {
-        lineHeight: '0',
-    },
-    variants: {
-        size: {
-            sm: {
-                fontSize: '0.875em',
-            },
-            md: {
-                fontSize: '1em',
-            },
-            lg: {
-                fontSize: '1.125em',
-            },
-            'icon-sm': {
-                fontSize: '1em',
-            },
-            'icon-md': {
-                fontSize: '1.25em',
-            },
-            'icon-lg': {
-                fontSize: '1.5em',
-            },
-        },
-    },
-});
-const button = recipeWithLayer({
-    base: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'relative',
-        overflow: 'hidden',
-        border: '0',
-        borderRadius: theme.borderRadius,
-        fontSize: '1em',
-        transition: 'background-color 0.2s ease, color 0.2s ease',
-        cursor: 'pointer',
-        userSelect: 'none',
-    },
-    variants: {
-        hasIcon: {
-            true: {
-                gap: '0.5em',
-            },
-        },
-        color: {
-            ...semanticColors,
-            ...scaleColors,
-        },
-        size: {
-            sm: {
-                height: '2.25em',
-                padding: '0 0.75em',
-            },
-            md: {
-                height: '2.5em',
-                padding: '0 0.875em',
-            },
-            lg: {
-                height: '2.75em',
-                padding: '0 1em',
-            },
-            'icon-sm': {
-                width: '2em',
-                height: '2em',
-            },
-            'icon-md': {
-                width: '2.5em',
-                height: '2.5em',
-            },
-            'icon-lg': {
-                width: '2.75em',
-                height: '2.75em',
-            },
-        },
-        variant: {
-            contained: {
-                boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
-                backgroundColor: `rgb(${backgroundVar})`,
-                color: `rgb(${foregroundVar})`,
-                ':disabled': {
-                    backgroundColor: `rgb(${theme.color.muted})`,
-                    color: `rgb(${theme.color['muted-foreground']})`,
-                    cursor: 'default',
-                },
-            },
-            outlined: {
-                boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,
-                backgroundColor: `rgb(${theme.color.background})`,
-                color: `rgb(${theme.color.foreground})`,
-                ':disabled': {
-                    backgroundColor: `rgb(${theme.color.muted})`,
-                    color: `rgb(${theme.color['muted-foreground']})`,
-                    cursor: 'default',
-                },
-            },
-            ghost: {
-                background: 'transparent',
-                color: `rgb(${theme.color.foreground})`,
-                ':hover': {
-                    backgroundColor: `rgba(${backgroundVar}, 0.8)`,
-                    color: `rgb(${foregroundVar})`,
-                },
-                ':disabled': {
-                    color: `rgb(${theme.color['muted-foreground']})`,
-                    cursor: 'default',
-                },
-            },
-            glass: {
-                boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
-                backgroundColor: `rgba(${backgroundVar}, 0.75)`,
-                backdropFilter: 'blur(1rem)',
-                color: `rgb(${theme.color.foreground})`,
-                ':disabled': {
-                    backgroundColor: `rgb(${theme.color.muted})`,
-                    color: `rgb(${theme.color['muted-foreground']})`,
-                    cursor: 'default',
-                },
-            },
-        },
-        pulse: {
-            true: {
-                '::after': {
-                    content: '',
-                    position: 'absolute',
-                    inset: '0',
-                    background: 'linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)',
-                    backgroundSize: '300% 100%',
-                    animation: `${pulse} 5s linear 0s infinite`,
-                },
-            },
-        },
-    },
-});
-const icon = style({
-    lineHeight: '0',
-});
-globalStyle(`${icon} > *`, {
-    width: '1em',
-    height: '1em',
-    lineHeight: '0',
-    pointerEvents: 'none',
-});
-globalStyle(`${button.classNames.base} svg`, {
-    width: '1em',
-    height: '1em',
-});
+var button = createRuntimeFn({defaultClassName:'Button__1abigts1o Button_layeredBase__1abigts1b',variantClassNames:{hasIcon:{true:'Button_styleWithLayer__1abigts1c'},color:{primary:'Button_styleWithLayer__1abigts2',secondary:'Button_styleWithLayer__1abigts3',muted:'Button_styleWithLayer__1abigts4',accent:'Button_styleWithLayer__1abigts5',card:'Button_styleWithLayer__1abigts6',danger:'Button_styleWithLayer__1abigts7',warning:'Button_styleWithLayer__1abigts8',success:'Button_styleWithLayer__1abigts9',red:'Button_styleWithLayer__1abigtsa',orange:'Button_styleWithLayer__1abigtsb',amber:'Button_styleWithLayer__1abigtsc',yellow:'Button_styleWithLayer__1abigtsd',lime:'Button_styleWithLayer__1abigtse',green:'Button_styleWithLayer__1abigtsf',emerald:'Button_styleWithLayer__1abigtsg',teal:'Button_styleWithLayer__1abigtsh',cyan:'Button_styleWithLayer__1abigtsi',sky:'Button_styleWithLayer__1abigtsj',blue:'Button_styleWithLayer__1abigtsk',indigo:'Button_styleWithLayer__1abigtsl',violet:'Button_styleWithLayer__1abigtsm',purple:'Button_styleWithLayer__1abigtsn',fuchsia:'Button_styleWithLayer__1abigtso',pink:'Button_styleWithLayer__1abigtsp',rose:'Button_styleWithLayer__1abigtsq',slate:'Button_styleWithLayer__1abigtsr',gray:'Button_styleWithLayer__1abigtss',zinc:'Button_styleWithLayer__1abigtst',neutral:'Button_styleWithLayer__1abigtsu',stone:'Button_styleWithLayer__1abigtsv'},size:{sm:'Button_styleWithLayer__1abigts1d',md:'Button_styleWithLayer__1abigts1e',lg:'Button_styleWithLayer__1abigts1f','icon-sm':'Button_styleWithLayer__1abigts1g','icon-md':'Button_styleWithLayer__1abigts1h','icon-lg':'Button_styleWithLayer__1abigts1i'},variant:{contained:'Button_styleWithLayer__1abigts1j',outlined:'Button_styleWithLayer__1abigts1k',ghost:'Button_styleWithLayer__1abigts1l',glass:'Button_styleWithLayer__1abigts1m'},pulse:{true:'Button_styleWithLayer__1abigts1n'}},defaultVariants:{},compoundVariants:[]});
+var icon = 'Button_icon__1abigts2v';
+var span = createRuntimeFn({defaultClassName:'Button__1abigts14 Button_layeredBase__1abigtsx',variantClassNames:{size:{sm:'Button_styleWithLayer__1abigtsy',md:'Button_styleWithLayer__1abigtsz',lg:'Button_styleWithLayer__1abigts10','icon-sm':'Button_styleWithLayer__1abigts11','icon-md':'Button_styleWithLayer__1abigts12','icon-lg':'Button_styleWithLayer__1abigts13'}},defaultVariants:{},compoundVariants:[]});
 
 export { button, icon, span };

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

@@ -0,0 +1,256 @@
+@keyframes Button_pulse__1abigtsw {
+  0% {
+    background-position: -300% 0;
+  }
+  100% {
+    background-position: 300% 0;
+  }
+}
+@layer components;
+.Button_icon__1abigts2v {
+  line-height: 0;
+}
+.Button_icon__1abigts2v > * {
+  width: 1em;
+  height: 1em;
+  line-height: 0;
+  pointer-events: none;
+}
+.Button__1abigts1o svg {
+  width: 1em;
+  height: 1em;
+}
+@layer components {
+  .Button_styleWithLayer__1abigts2 {
+    --backgroundVar__1abigts0: var(--color-primary__n6e2fs7);
+    --foregroundVar__1abigts1: var(--color-primary-foreground__n6e2fs8);
+  }
+  .Button_styleWithLayer__1abigts3 {
+    --backgroundVar__1abigts0: var(--color-secondary__n6e2fs9);
+    --foregroundVar__1abigts1: var(--color-secondary-foreground__n6e2fsa);
+  }
+  .Button_styleWithLayer__1abigts4 {
+    --backgroundVar__1abigts0: var(--color-muted__n6e2fsb);
+    --foregroundVar__1abigts1: var(--color-muted-foreground__n6e2fsc);
+  }
+  .Button_styleWithLayer__1abigts5 {
+    --backgroundVar__1abigts0: var(--color-accent__n6e2fsd);
+    --foregroundVar__1abigts1: var(--color-accent-foreground__n6e2fse);
+  }
+  .Button_styleWithLayer__1abigts6 {
+    --backgroundVar__1abigts0: var(--color-card__n6e2fsf);
+    --foregroundVar__1abigts1: var(--color-card-foreground__n6e2fsg);
+  }
+  .Button_styleWithLayer__1abigts7 {
+    --backgroundVar__1abigts0: var(--color-danger__n6e2fsh);
+    --foregroundVar__1abigts1: var(--color-danger-foreground__n6e2fsi);
+  }
+  .Button_styleWithLayer__1abigts8 {
+    --backgroundVar__1abigts0: var(--color-warning__n6e2fsj);
+    --foregroundVar__1abigts1: var(--color-warning-foreground__n6e2fsk);
+  }
+  .Button_styleWithLayer__1abigts9 {
+    --backgroundVar__1abigts0: var(--color-success__n6e2fsl);
+    --foregroundVar__1abigts1: var(--color-success-foreground__n6e2fsm);
+  }
+  .Button_styleWithLayer__1abigtsa {
+    --backgroundVar__1abigts0: var(--color-red-500__n6e2fss);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsb {
+    --backgroundVar__1abigts0: var(--color-orange-500__n6e2fs13);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsc {
+    --backgroundVar__1abigts0: var(--color-amber-500__n6e2fs1e);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsd {
+    --backgroundVar__1abigts0: var(--color-yellow-500__n6e2fs1p);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtse {
+    --backgroundVar__1abigts0: var(--color-lime-500__n6e2fs20);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsf {
+    --backgroundVar__1abigts0: var(--color-green-500__n6e2fs2b);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsg {
+    --backgroundVar__1abigts0: var(--color-emerald-500__n6e2fs2m);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsh {
+    --backgroundVar__1abigts0: var(--color-teal-500__n6e2fs2x);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsi {
+    --backgroundVar__1abigts0: var(--color-cyan-500__n6e2fs38);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsj {
+    --backgroundVar__1abigts0: var(--color-sky-500__n6e2fs3j);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsk {
+    --backgroundVar__1abigts0: var(--color-blue-500__n6e2fs3u);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsl {
+    --backgroundVar__1abigts0: var(--color-indigo-500__n6e2fs45);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsm {
+    --backgroundVar__1abigts0: var(--color-violet-500__n6e2fs4g);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsn {
+    --backgroundVar__1abigts0: var(--color-purple-500__n6e2fs4r);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtso {
+    --backgroundVar__1abigts0: var(--color-fuchsia-500__n6e2fs52);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsp {
+    --backgroundVar__1abigts0: var(--color-pink-500__n6e2fs5d);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsq {
+    --backgroundVar__1abigts0: var(--color-rose-500__n6e2fs5o);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsr {
+    --backgroundVar__1abigts0: var(--color-slate-500__n6e2fs5z);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtss {
+    --backgroundVar__1abigts0: var(--color-gray-500__n6e2fs6a);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtst {
+    --backgroundVar__1abigts0: var(--color-zinc-500__n6e2fs6l);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsu {
+    --backgroundVar__1abigts0: var(--color-neutral-500__n6e2fs6w);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_styleWithLayer__1abigtsv {
+    --backgroundVar__1abigts0: var(--color-stone-500__n6e2fs77);
+    --foregroundVar__1abigts1: var(--color-background__n6e2fs1);
+  }
+  .Button_layeredBase__1abigtsx {
+    line-height: 0;
+  }
+  .Button_styleWithLayer__1abigtsy {
+    font-size: 0.875em;
+  }
+  .Button_styleWithLayer__1abigtsz {
+    font-size: 1em;
+  }
+  .Button_styleWithLayer__1abigts10 {
+    font-size: 1.125em;
+  }
+  .Button_styleWithLayer__1abigts11 {
+    font-size: 1em;
+  }
+  .Button_styleWithLayer__1abigts12 {
+    font-size: 1.25em;
+  }
+  .Button_styleWithLayer__1abigts13 {
+    font-size: 1.5em;
+  }
+  .Button_layeredBase__1abigts1b {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--borderRadius__n6e2fs0);
+    font-size: 1em;
+    transition: background-color 0.2s ease, color 0.2s ease;
+    cursor: pointer;
+    user-select: none;
+  }
+  .Button_styleWithLayer__1abigts1c {
+    gap: 0.5em;
+  }
+  .Button_styleWithLayer__1abigts1d {
+    height: 2.25em;
+    padding: 0 0.75em;
+  }
+  .Button_styleWithLayer__1abigts1e {
+    height: 2.5em;
+    padding: 0 0.875em;
+  }
+  .Button_styleWithLayer__1abigts1f {
+    height: 2.75em;
+    padding: 0 1em;
+  }
+  .Button_styleWithLayer__1abigts1g {
+    width: 2em;
+    height: 2em;
+  }
+  .Button_styleWithLayer__1abigts1h {
+    width: 2.5em;
+    height: 2.5em;
+  }
+  .Button_styleWithLayer__1abigts1i {
+    width: 2.75em;
+    height: 2.75em;
+  }
+  .Button_styleWithLayer__1abigts1j {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+    background-color: rgb(var(--backgroundVar__1abigts0));
+    color: rgb(var(--foregroundVar__1abigts1));
+  }
+  .Button_styleWithLayer__1abigts1j:disabled {
+    background-color: rgb(var(--color-muted__n6e2fsb));
+    color: rgb(var(--color-muted-foreground__n6e2fsc));
+    cursor: default;
+  }
+  .Button_styleWithLayer__1abigts1k {
+    box-shadow: inset 0 0 0 1px rgb(var(--backgroundVar__1abigts0));
+    background-color: rgb(var(--color-background__n6e2fs1));
+    color: rgb(var(--color-foreground__n6e2fs2));
+  }
+  .Button_styleWithLayer__1abigts1k:disabled {
+    background-color: rgb(var(--color-muted__n6e2fsb));
+    color: rgb(var(--color-muted-foreground__n6e2fsc));
+    cursor: default;
+  }
+  .Button_styleWithLayer__1abigts1l {
+    background: transparent;
+    color: rgb(var(--color-foreground__n6e2fs2));
+  }
+  .Button_styleWithLayer__1abigts1l:hover {
+    background-color: rgba(var(--backgroundVar__1abigts0), 0.8);
+    color: rgb(var(--foregroundVar__1abigts1));
+  }
+  .Button_styleWithLayer__1abigts1l:disabled {
+    color: rgb(var(--color-muted-foreground__n6e2fsc));
+    cursor: default;
+  }
+  .Button_styleWithLayer__1abigts1m {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+    background-color: rgba(var(--backgroundVar__1abigts0), 0.75);
+    backdrop-filter: blur(1rem);
+    color: rgb(var(--color-foreground__n6e2fs2));
+  }
+  .Button_styleWithLayer__1abigts1m:disabled {
+    background-color: rgb(var(--color-muted__n6e2fsb));
+    color: rgb(var(--color-muted-foreground__n6e2fsc));
+    cursor: default;
+  }
+  .Button_styleWithLayer__1abigts1n::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%);
+    background-size: 300% 100%;
+    animation: Button_pulse__1abigtsw 5s linear 0s infinite;
+  }
+}