@kimdw-rtk/ui 0.1.14 → 0.1.16

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

@@ -9,6 +9,9 @@ export declare const span: import("@vanilla-extract/recipes").RuntimeFn<{
         lg: {
             fontSize: "1.125em";
         };
+        xl: {
+            fontSize: "1.25em";
+        };
         'icon-sm': {
             fontSize: "1em";
         };
@@ -18,6 +21,9 @@ export declare const span: import("@vanilla-extract/recipes").RuntimeFn<{
         'icon-lg': {
             fontSize: "1.5em";
         };
+        'icon-xl': {
+            fontSize: "1.75em";
+        };
     };
 }>;
 export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -71,6 +77,10 @@ export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
             height: "2.75em";
             padding: "0 1em";
         };
+        xl: {
+            height: "3em";
+            padding: "0 1.125em";
+        };
         'icon-sm': {
             width: "2em";
             height: "2em";
@@ -83,6 +93,10 @@ export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
             width: "2.75em";
             height: "2.75em";
         };
+        'icon-xl': {
+            width: "3em";
+            height: "3em";
+        };
     };
     variant: {
         contained: {
@@ -117,17 +131,6 @@ export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
                 cursor: "default";
             };
         };
-        glass: {
-            boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.08)";
-            backgroundColor: `rgba(var(--${string}), 0.75)`;
-            backdropFilter: "blur(1rem)";
-            color: `rgb(var(--${string}))`;
-            ':disabled': {
-                backgroundColor: `rgb(var(--${string}))`;
-                color: `rgb(var(--${string}))`;
-                cursor: "default";
-            };
-        };
     };
     pulse: {
         true: {

package/dist/components/Button/Button.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.css.ts"],"names":[],"mappings":"AA+CA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;EA+Bf,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+IjB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.css.ts"],"names":[],"mappings":"AA+CA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCf,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyIjB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}

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

@@ -7,16 +7,16 @@
   }
 }
 @layer components;
-.Button_icon__1abigts2v {
+.Button_icon__1abigts31 {
   line-height: 0;
 }
-.Button_icon__1abigts2v > * {
+.Button_icon__1abigts31 > * {
   width: 1em;
   height: 1em;
   line-height: 0;
   pointer-events: none;
 }
-.Button__1abigts1o svg {
+.Button__1abigts1t svg {
   width: 1em;
   height: 1em;
 }
@@ -154,15 +154,21 @@
     font-size: 1.125em;
   }
   .Button_styleWithLayer__1abigts11 {
-    font-size: 1em;
+    font-size: 1.25em;
   }
   .Button_styleWithLayer__1abigts12 {
-    font-size: 1.25em;
+    font-size: 1em;
   }
   .Button_styleWithLayer__1abigts13 {
+    font-size: 1.25em;
+  }
+  .Button_styleWithLayer__1abigts14 {
     font-size: 1.5em;
   }
-  .Button_layeredBase__1abigts1b {
+  .Button_styleWithLayer__1abigts15 {
+    font-size: 1.75em;
+  }
+  .Button_layeredBase__1abigts1f {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -175,77 +181,74 @@
     cursor: pointer;
     user-select: none;
   }
-  .Button_styleWithLayer__1abigts1c {
+  .Button_styleWithLayer__1abigts1g {
     gap: 0.5em;
   }
-  .Button_styleWithLayer__1abigts1d {
+  .Button_styleWithLayer__1abigts1h {
     height: 2.25em;
     padding: 0 0.75em;
   }
-  .Button_styleWithLayer__1abigts1e {
+  .Button_styleWithLayer__1abigts1i {
     height: 2.5em;
     padding: 0 0.875em;
   }
-  .Button_styleWithLayer__1abigts1f {
+  .Button_styleWithLayer__1abigts1j {
     height: 2.75em;
     padding: 0 1em;
   }
-  .Button_styleWithLayer__1abigts1g {
+  .Button_styleWithLayer__1abigts1k {
+    height: 3em;
+    padding: 0 1.125em;
+  }
+  .Button_styleWithLayer__1abigts1l {
     width: 2em;
     height: 2em;
   }
-  .Button_styleWithLayer__1abigts1h {
+  .Button_styleWithLayer__1abigts1m {
     width: 2.5em;
     height: 2.5em;
   }
-  .Button_styleWithLayer__1abigts1i {
+  .Button_styleWithLayer__1abigts1n {
     width: 2.75em;
     height: 2.75em;
   }
-  .Button_styleWithLayer__1abigts1j {
+  .Button_styleWithLayer__1abigts1o {
+    width: 3em;
+    height: 3em;
+  }
+  .Button_styleWithLayer__1abigts1p {
     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 {
+  .Button_styleWithLayer__1abigts1p:disabled {
     background-color: rgb(var(--color-muted__n6e2fsb));
     color: rgb(var(--color-muted-foreground__n6e2fsc));
     cursor: default;
   }
-  .Button_styleWithLayer__1abigts1k {
+  .Button_styleWithLayer__1abigts1q {
     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 {
+  .Button_styleWithLayer__1abigts1q:disabled {
     background-color: rgb(var(--color-muted__n6e2fsb));
     color: rgb(var(--color-muted-foreground__n6e2fsc));
     cursor: default;
   }
-  .Button_styleWithLayer__1abigts1l {
+  .Button_styleWithLayer__1abigts1r {
     background: transparent;
     color: rgb(var(--color-foreground__n6e2fs2));
   }
-  .Button_styleWithLayer__1abigts1l:hover {
+  .Button_styleWithLayer__1abigts1r: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));
+  .Button_styleWithLayer__1abigts1r:disabled {
     color: rgb(var(--color-muted-foreground__n6e2fsc));
     cursor: default;
   }
-  .Button_styleWithLayer__1abigts1n::after {
+  .Button_styleWithLayer__1abigts1s::after {
     content: "";
     position: absolute;
     inset: 0;

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

@@ -6,9 +6,9 @@ require('./../../styles/globalStyle.css.ts.vanilla.css');
 require('./Button.css.ts.vanilla.css');
 var createRuntimeFn62c9670f_esm = require('../../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.cjs');
 
-var button = createRuntimeFn62c9670f_esm.c({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 = createRuntimeFn62c9670f_esm.c({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:[]});
+var button = createRuntimeFn62c9670f_esm.c({defaultClassName:'Button__1abigts1t Button_layeredBase__1abigts1f',variantClassNames:{hasIcon:{true:'Button_styleWithLayer__1abigts1g'},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__1abigts1h',md:'Button_styleWithLayer__1abigts1i',lg:'Button_styleWithLayer__1abigts1j',xl:'Button_styleWithLayer__1abigts1k','icon-sm':'Button_styleWithLayer__1abigts1l','icon-md':'Button_styleWithLayer__1abigts1m','icon-lg':'Button_styleWithLayer__1abigts1n','icon-xl':'Button_styleWithLayer__1abigts1o'},variant:{contained:'Button_styleWithLayer__1abigts1p',outlined:'Button_styleWithLayer__1abigts1q',ghost:'Button_styleWithLayer__1abigts1r'},pulse:{true:'Button_styleWithLayer__1abigts1s'}},defaultVariants:{},compoundVariants:[]});
+var icon = 'Button_icon__1abigts31';
+var span = createRuntimeFn62c9670f_esm.c({defaultClassName:'Button__1abigts16 Button_layeredBase__1abigtsx',variantClassNames:{size:{sm:'Button_styleWithLayer__1abigtsy',md:'Button_styleWithLayer__1abigtsz',lg:'Button_styleWithLayer__1abigts10',xl:'Button_styleWithLayer__1abigts11','icon-sm':'Button_styleWithLayer__1abigts12','icon-md':'Button_styleWithLayer__1abigts13','icon-lg':'Button_styleWithLayer__1abigts14','icon-xl':'Button_styleWithLayer__1abigts15'}},defaultVariants:{},compoundVariants:[]});
 
 exports.button = button;
 exports.icon = icon;

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

@@ -4,8 +4,8 @@ import './../../styles/globalStyle.css.ts.vanilla.css';
 import './Button.css.ts.vanilla.css';
 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';
 
-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:[]});
+var button = createRuntimeFn({defaultClassName:'Button__1abigts1t Button_layeredBase__1abigts1f',variantClassNames:{hasIcon:{true:'Button_styleWithLayer__1abigts1g'},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__1abigts1h',md:'Button_styleWithLayer__1abigts1i',lg:'Button_styleWithLayer__1abigts1j',xl:'Button_styleWithLayer__1abigts1k','icon-sm':'Button_styleWithLayer__1abigts1l','icon-md':'Button_styleWithLayer__1abigts1m','icon-lg':'Button_styleWithLayer__1abigts1n','icon-xl':'Button_styleWithLayer__1abigts1o'},variant:{contained:'Button_styleWithLayer__1abigts1p',outlined:'Button_styleWithLayer__1abigts1q',ghost:'Button_styleWithLayer__1abigts1r'},pulse:{true:'Button_styleWithLayer__1abigts1s'}},defaultVariants:{},compoundVariants:[]});
+var icon = 'Button_icon__1abigts31';
+var span = createRuntimeFn({defaultClassName:'Button__1abigts16 Button_layeredBase__1abigtsx',variantClassNames:{size:{sm:'Button_styleWithLayer__1abigtsy',md:'Button_styleWithLayer__1abigtsz',lg:'Button_styleWithLayer__1abigts10',xl:'Button_styleWithLayer__1abigts11','icon-sm':'Button_styleWithLayer__1abigts12','icon-md':'Button_styleWithLayer__1abigts13','icon-lg':'Button_styleWithLayer__1abigts14','icon-xl':'Button_styleWithLayer__1abigts15'}},defaultVariants:{},compoundVariants:[]});
 
 export { button, icon, span };

package/dist/components/Button/index.cjs

@@ -8,7 +8,7 @@ var Button_css = require('./Button.css.vanilla.cjs');
 var index = require('../../hooks/useRipple/index.cjs');
 var sx = require('../../styles/sx.cjs');
 
-const Button = react.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', pulse = false, className, sx: propSx, icon, ...props }, ref) => {
+const Button = react.forwardRef(({ children, color = 'primary', size = 'md', fontSize, variant = 'contained', pulse = false, className, sx: propSx, icon, ...props }, ref) => {
     const localRef = react.useRef(null);
     const elementRef = ref || localRef;
     const { ripple } = index.useRipple(elementRef);
@@ -18,7 +18,7 @@ const Button = react.forwardRef(({ children, color = 'primary', size = 'md', var
             variant,
             pulse,
             hasIcon: icon !== undefined,
-        }), sx.sx(propSx)), ...props, children: [icon !== undefined && jsxRuntime.jsx("span", { className: Button_css.icon, children: icon }), jsxRuntime.jsx("span", { className: Button_css.span({ size }), children: children }), ripple] }));
+        }), sx.sx(propSx)), ...props, children: [icon !== undefined && jsxRuntime.jsx("span", { className: Button_css.icon, children: icon }), jsxRuntime.jsx("span", { className: Button_css.span({ size: fontSize ?? size }), children: children }), ripple] }));
 });
 Button.displayName = 'Button';
 

package/dist/components/Button/index.d.ts

@@ -1,8 +1,9 @@
 import { type ReactElement } from 'react';
-import type { UIComponent } from '#types';
+import type { RecipeVariantsProps, UIComponent } from '#types';
 import * as s from './Button.css';
 interface ButtonProps extends UIComponent<'button', typeof s.button> {
     icon?: ReactElement;
+    fontSize?: RecipeVariantsProps<typeof s.span>['size'];
 }
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export { s as buttonCss };

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAM9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAElC,UAAU,WAAY,SAAQ,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC;IAClE,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,wHAyClB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAM9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE/D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAElC,UAAU,WAAY,SAAQ,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC;IAClE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,MAAM,wHA0ClB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,SAAS,EAAE,CAAC"}

package/dist/components/Button/index.js

@@ -8,7 +8,7 @@ export { Button_css as buttonCss };
 import { useRipple } from '../../hooks/useRipple/index.js';
 import { sx } from '../../styles/sx.js';
 
-const Button = forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', pulse = false, className, sx: propSx, icon: icon$1, ...props }, ref) => {
+const Button = forwardRef(({ children, color = 'primary', size = 'md', fontSize, variant = 'contained', pulse = false, className, sx: propSx, icon: icon$1, ...props }, ref) => {
     const localRef = useRef(null);
     const elementRef = ref || localRef;
     const { ripple } = useRipple(elementRef);
@@ -18,7 +18,7 @@ const Button = forwardRef(({ children, color = 'primary', size = 'md', variant =
             variant,
             pulse,
             hasIcon: icon$1 !== undefined,
-        }), sx(propSx)), ...props, children: [icon$1 !== undefined && jsx("span", { className: icon, children: icon$1 }), jsx("span", { className: span({ size }), children: children }), ripple] }));
+        }), sx(propSx)), ...props, children: [icon$1 !== undefined && jsx("span", { className: icon, children: icon$1 }), jsx("span", { className: span({ size: fontSize ?? size }), children: children }), ripple] }));
 });
 Button.displayName = 'Button';
 

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

@@ -6,25 +6,6 @@ export declare const card: import("@vanilla-extract/recipes").RuntimeFn<{
             border: "1px solid";
             borderColor: `rgb(var(--${string}))`;
         };
-        glass: {
-            border: `1px solid rgb(var(--${string}))`;
-            borderRadius: "0.75rem";
-            background: `linear-gradient(rgba(var(--${string}), 0.06) 0%, rgba(var(--${string}), 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: {
         transparent: {

package/dist/components/Card/Card.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,oBAAc,CAAC;AAsBtC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAuEP,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,QAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAgB;;;;EAKpC,CAAC"}
+{"version":3,"file":"Card.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,oBAAc,CAAC;AAsBtC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA4CP,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,QAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAgB;;;;EAKpC,CAAC"}

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

@@ -110,38 +110,21 @@
     border-color: rgb(var(--color-border__n6e2fs3));
   }
   .Card_styleWithLayer__1foreksy {
-    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__1foreksy::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__1foreksy:hover::before {
-    opacity: 1;
-  }
-  .Card_styleWithLayer__1foreksz {
     background-color: transparent;
   }
-  .Card_styleWithLayer__1foreks10 {
+  .Card_styleWithLayer__1foreksz {
     --paddingVar__1foreks0: 0.25em;
   }
-  .Card_styleWithLayer__1foreks11 {
+  .Card_styleWithLayer__1foreks10 {
     --paddingVar__1foreks0: 0.5em;
   }
-  .Card_styleWithLayer__1foreks12 {
+  .Card_styleWithLayer__1foreks11 {
     --paddingVar__1foreks0: 0.75em;
   }
-  .Card_styleWithLayer__1foreks13 {
+  .Card_styleWithLayer__1foreks12 {
     --paddingVar__1foreks0: 1em;
   }
-  .Card_styleWithLayer__1foreks14 {
+  .Card_styleWithLayer__1foreks13 {
     --paddingVar__1foreks0: 1.5em;
   }
 }

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

@@ -7,7 +7,7 @@ require('./CardInteraction.css.ts.vanilla.css');
 require('./Card.css.ts.vanilla.css');
 var createRuntimeFn62c9670f_esm = require('../../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.cjs');
 
-var card = createRuntimeFn62c9670f_esm.c({defaultClassName:'Card__1foreks15 Card_layeredBase__1foreksv',variantClassNames:{variant:{contained:'Card_styleWithLayer__1foreksw',outlined:'Card_styleWithLayer__1foreksx',glass:'Card_styleWithLayer__1foreksy'},color:{primary:'Card_styleWithLayer__1foreks1',secondary:'Card_styleWithLayer__1foreks2',muted:'Card_styleWithLayer__1foreks3',accent:'Card_styleWithLayer__1foreks4',card:'Card_styleWithLayer__1foreks5',danger:'Card_styleWithLayer__1foreks6',warning:'Card_styleWithLayer__1foreks7',success:'Card_styleWithLayer__1foreks8',red:'Card_styleWithLayer__1foreks9',orange:'Card_styleWithLayer__1foreksa',amber:'Card_styleWithLayer__1foreksb',yellow:'Card_styleWithLayer__1foreksc',lime:'Card_styleWithLayer__1foreksd',green:'Card_styleWithLayer__1forekse',emerald:'Card_styleWithLayer__1foreksf',teal:'Card_styleWithLayer__1foreksg',cyan:'Card_styleWithLayer__1foreksh',sky:'Card_styleWithLayer__1foreksi',blue:'Card_styleWithLayer__1foreksj',indigo:'Card_styleWithLayer__1foreksk',violet:'Card_styleWithLayer__1foreksl',purple:'Card_styleWithLayer__1foreksm',fuchsia:'Card_styleWithLayer__1foreksn',pink:'Card_styleWithLayer__1forekso',rose:'Card_styleWithLayer__1foreksp',slate:'Card_styleWithLayer__1foreksq',gray:'Card_styleWithLayer__1foreksr',zinc:'Card_styleWithLayer__1forekss',neutral:'Card_styleWithLayer__1forekst',stone:'Card_styleWithLayer__1foreksu',transparent:'Card_styleWithLayer__1foreksz'},size:{sm:'Card_styleWithLayer__1foreks10',md:'Card_styleWithLayer__1foreks11',lg:'Card_styleWithLayer__1foreks12',xl:'Card_styleWithLayer__1foreks13','2xl':'Card_styleWithLayer__1foreks14'}},defaultVariants:{},compoundVariants:[]});
+var card = createRuntimeFn62c9670f_esm.c({defaultClassName:'Card__1foreks14 Card_layeredBase__1foreksv',variantClassNames:{variant:{contained:'Card_styleWithLayer__1foreksw',outlined:'Card_styleWithLayer__1foreksx'},color:{primary:'Card_styleWithLayer__1foreks1',secondary:'Card_styleWithLayer__1foreks2',muted:'Card_styleWithLayer__1foreks3',accent:'Card_styleWithLayer__1foreks4',card:'Card_styleWithLayer__1foreks5',danger:'Card_styleWithLayer__1foreks6',warning:'Card_styleWithLayer__1foreks7',success:'Card_styleWithLayer__1foreks8',red:'Card_styleWithLayer__1foreks9',orange:'Card_styleWithLayer__1foreksa',amber:'Card_styleWithLayer__1foreksb',yellow:'Card_styleWithLayer__1foreksc',lime:'Card_styleWithLayer__1foreksd',green:'Card_styleWithLayer__1forekse',emerald:'Card_styleWithLayer__1foreksf',teal:'Card_styleWithLayer__1foreksg',cyan:'Card_styleWithLayer__1foreksh',sky:'Card_styleWithLayer__1foreksi',blue:'Card_styleWithLayer__1foreksj',indigo:'Card_styleWithLayer__1foreksk',violet:'Card_styleWithLayer__1foreksl',purple:'Card_styleWithLayer__1foreksm',fuchsia:'Card_styleWithLayer__1foreksn',pink:'Card_styleWithLayer__1forekso',rose:'Card_styleWithLayer__1foreksp',slate:'Card_styleWithLayer__1foreksq',gray:'Card_styleWithLayer__1foreksr',zinc:'Card_styleWithLayer__1forekss',neutral:'Card_styleWithLayer__1forekst',stone:'Card_styleWithLayer__1foreksu',transparent:'Card_styleWithLayer__1foreksy'},size:{sm:'Card_styleWithLayer__1foreksz',md:'Card_styleWithLayer__1foreks10',lg:'Card_styleWithLayer__1foreks11',xl:'Card_styleWithLayer__1foreks12','2xl':'Card_styleWithLayer__1foreks13'}},defaultVariants:{},compoundVariants:[]});
 var paddingVar = 'var(--paddingVar__1foreks0)';
 
 exports.card = card;

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

@@ -5,7 +5,7 @@ import './CardInteraction.css.ts.vanilla.css';
 import './Card.css.ts.vanilla.css';
 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';
 
-var card = createRuntimeFn({defaultClassName:'Card__1foreks15 Card_layeredBase__1foreksv',variantClassNames:{variant:{contained:'Card_styleWithLayer__1foreksw',outlined:'Card_styleWithLayer__1foreksx',glass:'Card_styleWithLayer__1foreksy'},color:{primary:'Card_styleWithLayer__1foreks1',secondary:'Card_styleWithLayer__1foreks2',muted:'Card_styleWithLayer__1foreks3',accent:'Card_styleWithLayer__1foreks4',card:'Card_styleWithLayer__1foreks5',danger:'Card_styleWithLayer__1foreks6',warning:'Card_styleWithLayer__1foreks7',success:'Card_styleWithLayer__1foreks8',red:'Card_styleWithLayer__1foreks9',orange:'Card_styleWithLayer__1foreksa',amber:'Card_styleWithLayer__1foreksb',yellow:'Card_styleWithLayer__1foreksc',lime:'Card_styleWithLayer__1foreksd',green:'Card_styleWithLayer__1forekse',emerald:'Card_styleWithLayer__1foreksf',teal:'Card_styleWithLayer__1foreksg',cyan:'Card_styleWithLayer__1foreksh',sky:'Card_styleWithLayer__1foreksi',blue:'Card_styleWithLayer__1foreksj',indigo:'Card_styleWithLayer__1foreksk',violet:'Card_styleWithLayer__1foreksl',purple:'Card_styleWithLayer__1foreksm',fuchsia:'Card_styleWithLayer__1foreksn',pink:'Card_styleWithLayer__1forekso',rose:'Card_styleWithLayer__1foreksp',slate:'Card_styleWithLayer__1foreksq',gray:'Card_styleWithLayer__1foreksr',zinc:'Card_styleWithLayer__1forekss',neutral:'Card_styleWithLayer__1forekst',stone:'Card_styleWithLayer__1foreksu',transparent:'Card_styleWithLayer__1foreksz'},size:{sm:'Card_styleWithLayer__1foreks10',md:'Card_styleWithLayer__1foreks11',lg:'Card_styleWithLayer__1foreks12',xl:'Card_styleWithLayer__1foreks13','2xl':'Card_styleWithLayer__1foreks14'}},defaultVariants:{},compoundVariants:[]});
+var card = createRuntimeFn({defaultClassName:'Card__1foreks14 Card_layeredBase__1foreksv',variantClassNames:{variant:{contained:'Card_styleWithLayer__1foreksw',outlined:'Card_styleWithLayer__1foreksx'},color:{primary:'Card_styleWithLayer__1foreks1',secondary:'Card_styleWithLayer__1foreks2',muted:'Card_styleWithLayer__1foreks3',accent:'Card_styleWithLayer__1foreks4',card:'Card_styleWithLayer__1foreks5',danger:'Card_styleWithLayer__1foreks6',warning:'Card_styleWithLayer__1foreks7',success:'Card_styleWithLayer__1foreks8',red:'Card_styleWithLayer__1foreks9',orange:'Card_styleWithLayer__1foreksa',amber:'Card_styleWithLayer__1foreksb',yellow:'Card_styleWithLayer__1foreksc',lime:'Card_styleWithLayer__1foreksd',green:'Card_styleWithLayer__1forekse',emerald:'Card_styleWithLayer__1foreksf',teal:'Card_styleWithLayer__1foreksg',cyan:'Card_styleWithLayer__1foreksh',sky:'Card_styleWithLayer__1foreksi',blue:'Card_styleWithLayer__1foreksj',indigo:'Card_styleWithLayer__1foreksk',violet:'Card_styleWithLayer__1foreksl',purple:'Card_styleWithLayer__1foreksm',fuchsia:'Card_styleWithLayer__1foreksn',pink:'Card_styleWithLayer__1forekso',rose:'Card_styleWithLayer__1foreksp',slate:'Card_styleWithLayer__1foreksq',gray:'Card_styleWithLayer__1foreksr',zinc:'Card_styleWithLayer__1forekss',neutral:'Card_styleWithLayer__1forekst',stone:'Card_styleWithLayer__1foreksu',transparent:'Card_styleWithLayer__1foreksy'},size:{sm:'Card_styleWithLayer__1foreksz',md:'Card_styleWithLayer__1foreks10',lg:'Card_styleWithLayer__1foreks11',xl:'Card_styleWithLayer__1foreks12','2xl':'Card_styleWithLayer__1foreks13'}},defaultVariants:{},compoundVariants:[]});
 var paddingVar = 'var(--paddingVar__1foreks0)';
 
 export { card, paddingVar };

package/dist/components/Range/Range.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Range.css.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BhB,CAAC;AAEH,eAAO,MAAM,KAAK,QA2ChB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,GAAG,QAWd,CAAC"}
+{"version":3,"file":"Range.css.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BhB,CAAC;AAEH,eAAO,MAAM,KAAK,QA4ChB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,GAAG,QAWd,CAAC"}

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

@@ -95,6 +95,7 @@
     width: 100%;
     height: 2em;
     user-select: none;
+    touch-action: none;
   }
   .Range_styleWithLayer__biyxwow {
     font-size: 0.75em;
@@ -116,6 +117,7 @@
     background-color: rgb(var(--backgroundVar__biyxwo0));
     transform: translate(-50%, -50%);
     cursor: pointer;
+    touch-action: none;
   }
   .Range_styleWithLayer__biyxwo1x::before {
     content: "";

package/dist/components/ScrollArea/ScrollArea.cjs

@@ -4,16 +4,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var utils = require('@kimdw-rtk/utils');
+var vanillaExtractDynamic_esm = require('../../node_modules/.pnpm/@vanilla-extract_dynamic@2.1.5/node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.cjs');
 var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
 var index = require('../../hooks/useMouseScroll/index.cjs');
 var ScrollArea_css = require('./ScrollArea.css.vanilla.cjs');
+var spacing = require('../../tokens/semantic/spacing.cjs');
 var sx = require('../../styles/sx.cjs');
 
-const ScrollArea = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+const ScrollArea = react.forwardRef(({ children, className, innerPadding = 'lg', sx: propSx, style, ...props }, ref) => {
     const scrollAreaRef = react.useRef(null);
     const targetRef = utils.useCombinedRefs(ref, scrollAreaRef);
-    const [hasLeftSpace, setHasLeftSpace] = react.useState(false);
-    const [hasRightSpace, setHasRightSpace] = react.useState(true);
     index.useMouseScroll(scrollAreaRef);
     react.useEffect(() => {
         const element = scrollAreaRef.current;
@@ -28,20 +28,15 @@ const ScrollArea = react.forwardRef(({ children, className, sx: propSx, ...props
             }
             e.preventDefault();
         };
-        const handleScroll = () => {
-            setHasLeftSpace(element.scrollLeft !== 0);
-            setHasRightSpace(Math.ceil(element.scrollLeft + element.clientWidth) <
-                Math.floor(element.scrollWidth));
-        };
-        handleScroll();
-        element.addEventListener('scroll', handleScroll);
         element.addEventListener('wheel', handleWheel);
         return () => {
-            element.removeEventListener('scroll', handleScroll);
             element.removeEventListener('wheel', handleWheel);
         };
     }, []);
-    return (jsxRuntime.jsx("div", { ref: targetRef, className: clsx.clsx(ScrollArea_css.scrollArea, className, sx.sx(propSx), hasLeftSpace && hasRightSpace && ScrollArea_css.maskBoth, hasLeftSpace && ScrollArea_css.maskLeft, hasRightSpace && ScrollArea_css.maskRight), ...props, children: jsxRuntime.jsx("div", { className: ScrollArea_css.wrapper, children: children }) }));
+    return (jsxRuntime.jsx("div", { ref: targetRef, className: clsx.clsx(ScrollArea_css.scrollArea, className, sx.sx(propSx), ScrollArea_css.mask), ...props, style: {
+            ...style,
+            ...vanillaExtractDynamic_esm.assignInlineVars({ [ScrollArea_css.paddingVar]: spacing.spacing[innerPadding] }),
+        }, children: jsxRuntime.jsx("div", { className: ScrollArea_css.wrapper, children: children }) }));
 });
 ScrollArea.displayName = 'ScrollArea';
 

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

@@ -1,6 +1,5 @@
+export declare const paddingVar: `var(--${string})`;
 export declare const scrollArea: string;
-export declare const maskLeft: string;
-export declare const maskRight: string;
-export declare const maskBoth: string;
+export declare const mask: string;
 export declare const wrapper: string;
 //# sourceMappingURL=ScrollArea.css.d.ts.map

package/dist/components/ScrollArea/ScrollArea.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.css.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,QASrB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC"}
+{"version":3,"file":"ScrollArea.css.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,oBAAc,CAAC;AAEtC,eAAO,MAAM,UAAU,QASrB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC"}

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

@@ -1,33 +1,22 @@
 @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 {
+.ScrollArea_mask__m6lfro2 {
   mask-image: linear-gradient(to right,
 transparent 0%,
-black 3rem,
-black calc(100% - 3rem),
+black var(--paddingVar__m6lfro0),
+black calc(100% - var(--paddingVar__m6lfro0)),
 transparent 100%);
 }
-.ScrollArea_wrapper__m6lfro4 {
+.ScrollArea_wrapper__m6lfro3 {
   width: max-content;
+  padding-inline: var(--paddingVar__m6lfro0);
 }
 @layer components {
-  .ScrollArea_styleWithLayer__m6lfro0 {
+  .ScrollArea_styleWithLayer__m6lfro1 {
     width: 100%;
     overflow-x: scroll;
     user-select: none;
   }
-  .ScrollArea_styleWithLayer__m6lfro0::-webkit-scrollbar {
+  .ScrollArea_styleWithLayer__m6lfro1::-webkit-scrollbar {
     display: none;
   }
 }

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

@@ -5,14 +5,12 @@ require('./../../styles/sprinkles.css.ts.vanilla.css');
 require('./../../styles/globalStyle.css.ts.vanilla.css');
 require('./ScrollArea.css.ts.vanilla.css');
 
-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';
+var mask = 'ScrollArea_mask__m6lfro2';
+var paddingVar = 'var(--paddingVar__m6lfro0)';
+var scrollArea = 'ScrollArea_styleWithLayer__m6lfro1';
+var wrapper = 'ScrollArea_wrapper__m6lfro3';
 
-exports.maskBoth = maskBoth;
-exports.maskLeft = maskLeft;
-exports.maskRight = maskRight;
+exports.mask = mask;
+exports.paddingVar = paddingVar;
 exports.scrollArea = scrollArea;
 exports.wrapper = wrapper;

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

@@ -3,10 +3,9 @@ import './../../styles/sprinkles.css.ts.vanilla.css';
 import './../../styles/globalStyle.css.ts.vanilla.css';
 import './ScrollArea.css.ts.vanilla.css';
 
-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';
+var mask = 'ScrollArea_mask__m6lfro2';
+var paddingVar = 'var(--paddingVar__m6lfro0)';
+var scrollArea = 'ScrollArea_styleWithLayer__m6lfro1';
+var wrapper = 'ScrollArea_wrapper__m6lfro3';
 
-export { maskBoth, maskLeft, maskRight, scrollArea, wrapper };
+export { mask, paddingVar, scrollArea, wrapper };

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,6 +1,9 @@
+import { spacing } from '#tokens';
 import type { UIComponent } from '#types';
 import * as s from './ScrollArea.css';
-type ScrollAreaProps = UIComponent<'div'>;
+interface ScrollAreaProps extends UIComponent<'div'> {
+    innerPadding?: keyof typeof spacing;
+}
 export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export { s as scrollAreaCss };
 //# sourceMappingURL=ScrollArea.d.ts.map

package/dist/components/ScrollArea/ScrollArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,KAAK,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,yHA+DtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,UAAU,eAAgB,SAAQ,WAAW,CAAC,KAAK,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,UAAU,yHAiDtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { useCombinedRefs } from '@kimdw-rtk/utils';
+import { assignInlineVars } from '../../node_modules/.pnpm/@vanilla-extract_dynamic@2.1.5/node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
 import { useMouseScroll } from '../../hooks/useMouseScroll/index.js';
-import { wrapper, scrollArea, maskBoth, maskLeft, maskRight } from './ScrollArea.css.vanilla.js';
+import { wrapper, paddingVar, scrollArea, mask } from './ScrollArea.css.vanilla.js';
 import * as ScrollArea_css from './ScrollArea.css.vanilla.js';
 export { ScrollArea_css as scrollAreaCss };
+import { spacing } from '../../tokens/semantic/spacing.js';
 import { sx } from '../../styles/sx.js';
 
-const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+const ScrollArea = forwardRef(({ children, className, innerPadding = 'lg', sx: propSx, style, ...props }, ref) => {
     const scrollAreaRef = useRef(null);
     const targetRef = useCombinedRefs(ref, scrollAreaRef);
-    const [hasLeftSpace, setHasLeftSpace] = useState(false);
-    const [hasRightSpace, setHasRightSpace] = useState(true);
     useMouseScroll(scrollAreaRef);
     useEffect(() => {
         const element = scrollAreaRef.current;
@@ -28,20 +28,15 @@ const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, re
             }
             e.preventDefault();
         };
-        const handleScroll = () => {
-            setHasLeftSpace(element.scrollLeft !== 0);
-            setHasRightSpace(Math.ceil(element.scrollLeft + element.clientWidth) <
-                Math.floor(element.scrollWidth));
-        };
-        handleScroll();
-        element.addEventListener('scroll', handleScroll);
         element.addEventListener('wheel', handleWheel);
         return () => {
-            element.removeEventListener('scroll', handleScroll);
             element.removeEventListener('wheel', handleWheel);
         };
     }, []);
-    return (jsx("div", { ref: targetRef, className: clsx(scrollArea, className, sx(propSx), hasLeftSpace && hasRightSpace && maskBoth, hasLeftSpace && maskLeft, hasRightSpace && maskRight), ...props, children: jsx("div", { className: wrapper, children: children }) }));
+    return (jsx("div", { ref: targetRef, className: clsx(scrollArea, className, sx(propSx), mask), ...props, style: {
+            ...style,
+            ...assignInlineVars({ [paddingVar]: spacing[innerPadding] }),
+        }, children: jsx("div", { className: wrapper, children: children }) }));
 });
 ScrollArea.displayName = 'ScrollArea';
 

package/dist/components/Select/SelectOption.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOption.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,QAUvB,CAAC"}
+{"version":3,"file":"SelectOption.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOption.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,QAevB,CAAC"}

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

@@ -1,7 +1,10 @@
 @layer components;
 @layer components {
   .SelectOption_styleWithLayer__16jsez30 {
+    overflow-x: hidden;
     padding: 0.75em 0.5em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     transition: background-color 0.2s ease;
     cursor: default;
   }

package/dist/components/Select/SelectOptionList.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOptionList.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOptionList.css.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAkDpB,CAAC"}
+{"version":3,"file":"SelectOptionList.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOptionList.css.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAiDpB,CAAC"}

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

@@ -15,7 +15,6 @@
     position: absolute;
     z-index: 10;
     width: 100%;
-    min-width: max-content;
     border: 1px solid rgb(var(--color-border__n6e2fs3));
     border-radius: var(--borderRadius__n6e2fs0);
     margin: 0.5rem 0;

package/dist/hooks/usePointerSlider/index.cjs

@@ -7,40 +7,91 @@ const usePointerSlider = (ref, { min, max, defaultValue, }) => {
     const [value, setValue] = react.useState(defaultValue);
     react.useEffect(() => {
         const element = ref.current;
-        let isDown = false, parentWidth = 0, parentX = 0;
         if (element === null) {
             return;
         }
-        element.style.left = `${((defaultValue - min) / (max - min)) * 100}%`;
-        const handlePointerDown = (e) => {
-            element.setPointerCapture(e.pointerId);
-            isDown = true;
+        const ownerWindow = element.ownerDocument.defaultView;
+        if (ownerWindow === null) {
+            return;
+        }
+        let isDragging = false, activePointerId = null, parentWidth = 0, parentX = 0;
+        const setThumbPosition = (nextValue) => {
+            element.style.left = `${((nextValue - min) / (max - min)) * 100}%`;
+        };
+        const syncParentRect = () => {
             const boundingRect = element.parentElement?.getBoundingClientRect();
             if (boundingRect === undefined) {
-                return;
+                return false;
             }
             parentWidth = boundingRect.width;
             parentX = boundingRect.x;
+            return parentWidth > 0;
         };
-        const handlePointerMove = (e) => {
-            if (!isDown) {
+        const updateValue = (clientX) => {
+            if (parentWidth <= 0 || !Number.isFinite(clientX)) {
                 return;
             }
-            const currentValue = Math.min(max, Math.max(min, Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min));
-            element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;
+            const currentValue = Math.min(max, Math.max(min, Math.round((clientX - parentX) / (parentWidth / (max - min))) + min));
+            setThumbPosition(currentValue);
             setValue(currentValue);
         };
+        setValue(defaultValue);
+        setThumbPosition(defaultValue);
+        const handlePointerDown = (e) => {
+            if (e.pointerType === 'mouse' && e.button !== 0) {
+                return;
+            }
+            if (!syncParentRect()) {
+                return;
+            }
+            e.preventDefault();
+            isDragging = true;
+            activePointerId = Number.isFinite(e.pointerId) ? e.pointerId : null;
+            if (activePointerId !== null &&
+                element.hasPointerCapture?.(activePointerId) === false) {
+                element.setPointerCapture?.(activePointerId);
+            }
+            updateValue(e.clientX);
+        };
+        const handlePointerMove = (e) => {
+            if (!isDragging ||
+                (activePointerId !== null && activePointerId !== e.pointerId)) {
+                return;
+            }
+            updateValue(e.clientX);
+        };
         const handlePointerUp = (e) => {
-            element.releasePointerCapture(e.pointerId);
-            isDown = false;
+            if (activePointerId !== null && activePointerId !== e.pointerId) {
+                return;
+            }
+            if (activePointerId !== null &&
+                element.hasPointerCapture?.(activePointerId)) {
+                element.releasePointerCapture?.(activePointerId);
+            }
+            isDragging = false;
+            activePointerId = null;
+        };
+        const handleLostPointerCapture = () => {
+            isDragging = false;
+            activePointerId = null;
         };
         element.addEventListener('pointerdown', handlePointerDown);
         element.addEventListener('pointermove', handlePointerMove);
         element.addEventListener('pointerup', handlePointerUp);
+        element.addEventListener('pointercancel', handlePointerUp);
+        element.addEventListener('lostpointercapture', handleLostPointerCapture);
+        ownerWindow.addEventListener('pointermove', handlePointerMove);
+        ownerWindow.addEventListener('pointerup', handlePointerUp);
+        ownerWindow.addEventListener('pointercancel', handlePointerUp);
         return () => {
             element.removeEventListener('pointerdown', handlePointerDown);
             element.removeEventListener('pointermove', handlePointerMove);
             element.removeEventListener('pointerup', handlePointerUp);
+            element.removeEventListener('pointercancel', handlePointerUp);
+            element.removeEventListener('lostpointercapture', handleLostPointerCapture);
+            ownerWindow.removeEventListener('pointermove', handlePointerMove);
+            ownerWindow.removeEventListener('pointerup', handlePointerUp);
+            ownerWindow.removeEventListener('pointercancel', handlePointerUp);
         };
     }, [ref, max, min, defaultValue]);
     return value;

package/dist/hooks/usePointerSlider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePointerSlider/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC5E,KAAK,CAAC,EACN,6BAIG;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;CACtB,KACA,MA+DF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePointerSlider/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC5E,KAAK,CAAC,EACN,6BAIG;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;CACtB,KACA,MA2IF,CAAC"}

package/dist/hooks/usePointerSlider/index.js

@@ -5,40 +5,91 @@ const usePointerSlider = (ref, { min, max, defaultValue, }) => {
     const [value, setValue] = useState(defaultValue);
     useEffect(() => {
         const element = ref.current;
-        let isDown = false, parentWidth = 0, parentX = 0;
         if (element === null) {
             return;
         }
-        element.style.left = `${((defaultValue - min) / (max - min)) * 100}%`;
-        const handlePointerDown = (e) => {
-            element.setPointerCapture(e.pointerId);
-            isDown = true;
+        const ownerWindow = element.ownerDocument.defaultView;
+        if (ownerWindow === null) {
+            return;
+        }
+        let isDragging = false, activePointerId = null, parentWidth = 0, parentX = 0;
+        const setThumbPosition = (nextValue) => {
+            element.style.left = `${((nextValue - min) / (max - min)) * 100}%`;
+        };
+        const syncParentRect = () => {
             const boundingRect = element.parentElement?.getBoundingClientRect();
             if (boundingRect === undefined) {
-                return;
+                return false;
             }
             parentWidth = boundingRect.width;
             parentX = boundingRect.x;
+            return parentWidth > 0;
         };
-        const handlePointerMove = (e) => {
-            if (!isDown) {
+        const updateValue = (clientX) => {
+            if (parentWidth <= 0 || !Number.isFinite(clientX)) {
                 return;
             }
-            const currentValue = Math.min(max, Math.max(min, Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min));
-            element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;
+            const currentValue = Math.min(max, Math.max(min, Math.round((clientX - parentX) / (parentWidth / (max - min))) + min));
+            setThumbPosition(currentValue);
             setValue(currentValue);
         };
+        setValue(defaultValue);
+        setThumbPosition(defaultValue);
+        const handlePointerDown = (e) => {
+            if (e.pointerType === 'mouse' && e.button !== 0) {
+                return;
+            }
+            if (!syncParentRect()) {
+                return;
+            }
+            e.preventDefault();
+            isDragging = true;
+            activePointerId = Number.isFinite(e.pointerId) ? e.pointerId : null;
+            if (activePointerId !== null &&
+                element.hasPointerCapture?.(activePointerId) === false) {
+                element.setPointerCapture?.(activePointerId);
+            }
+            updateValue(e.clientX);
+        };
+        const handlePointerMove = (e) => {
+            if (!isDragging ||
+                (activePointerId !== null && activePointerId !== e.pointerId)) {
+                return;
+            }
+            updateValue(e.clientX);
+        };
         const handlePointerUp = (e) => {
-            element.releasePointerCapture(e.pointerId);
-            isDown = false;
+            if (activePointerId !== null && activePointerId !== e.pointerId) {
+                return;
+            }
+            if (activePointerId !== null &&
+                element.hasPointerCapture?.(activePointerId)) {
+                element.releasePointerCapture?.(activePointerId);
+            }
+            isDragging = false;
+            activePointerId = null;
+        };
+        const handleLostPointerCapture = () => {
+            isDragging = false;
+            activePointerId = null;
         };
         element.addEventListener('pointerdown', handlePointerDown);
         element.addEventListener('pointermove', handlePointerMove);
         element.addEventListener('pointerup', handlePointerUp);
+        element.addEventListener('pointercancel', handlePointerUp);
+        element.addEventListener('lostpointercapture', handleLostPointerCapture);
+        ownerWindow.addEventListener('pointermove', handlePointerMove);
+        ownerWindow.addEventListener('pointerup', handlePointerUp);
+        ownerWindow.addEventListener('pointercancel', handlePointerUp);
         return () => {
             element.removeEventListener('pointerdown', handlePointerDown);
             element.removeEventListener('pointermove', handlePointerMove);
             element.removeEventListener('pointerup', handlePointerUp);
+            element.removeEventListener('pointercancel', handlePointerUp);
+            element.removeEventListener('lostpointercapture', handleLostPointerCapture);
+            ownerWindow.removeEventListener('pointermove', handlePointerMove);
+            ownerWindow.removeEventListener('pointerup', handlePointerUp);
+            ownerWindow.removeEventListener('pointercancel', handlePointerUp);
         };
     }, [ref, max, min, defaultValue]);
     return value;

package/dist/node_modules/.pnpm/@vanilla-extract_dynamic@2.1.5/node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var vanillaExtractPrivate_esm = require('../../../../../@vanilla-extract_private@1.0.9/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.esm.cjs');
+
+function assignInlineVars(varsOrContract, tokens) {
+  var styles = {};
+  {
+    var _vars = varsOrContract;
+    for (var varName in _vars) {
+      var value = _vars[varName];
+      if (value == null) {
+        continue;
+      }
+      styles[vanillaExtractPrivate_esm.getVarName(varName)] = value;
+    }
+  }
+  Object.defineProperty(styles, 'toString', {
+    value: function value() {
+      return Object.keys(this).map(key => "".concat(key, ":").concat(this[key])).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
+exports.assignInlineVars = assignInlineVars;

package/dist/node_modules/.pnpm/@vanilla-extract_dynamic@2.1.5/node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js

@@ -0,0 +1,24 @@
+import { getVarName } from '../../../../../@vanilla-extract_private@1.0.9/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.esm.js';
+
+function assignInlineVars(varsOrContract, tokens) {
+  var styles = {};
+  {
+    var _vars = varsOrContract;
+    for (var varName in _vars) {
+      var value = _vars[varName];
+      if (value == null) {
+        continue;
+      }
+      styles[getVarName(varName)] = value;
+    }
+  }
+  Object.defineProperty(styles, 'toString', {
+    value: function value() {
+      return Object.keys(this).map(key => "".concat(key, ":").concat(this[key])).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
+export { assignInlineVars };

package/dist/node_modules/.pnpm/@vanilla-extract_private@1.0.9/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.esm.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+  return variable;
+}
+
+exports.getVarName = getVarName;

package/dist/node_modules/.pnpm/@vanilla-extract_private@1.0.9/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.esm.js

@@ -0,0 +1,9 @@
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+  return variable;
+}
+
+export { getVarName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimdw-rtk/ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "private": false,
   "type": "module",
   "imports": {