@kimdw-rtk/ui 0.0.31 → 0.1.2

package/dist/components/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import type { UIComponent } from '../../types';
+import type { UIComponent } from '#types';
 import * as s from './Accordion.css';
 interface AccordionProps extends UIComponent<'div', typeof s.accordion> {
     isExpanded?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,iBAAiB,CAAC;AAGrC,UAAU,cAAe,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,wHA0BrB,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,iBAAiB,CAAC;AAGrC,UAAU,cAAe,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,wHA0BrB,CAAC"}

package/dist/components/Accordion/AccordionTrigger.js

@@ -11,7 +11,7 @@ const AccordionTrigger = ({ children, iconPosition = 'right', }) => {
         throw new Error('AccordionTrigger must be used within an Accordion component.');
     }
     const { dispatch, isExpanded } = accordionContext;
-    return (jsxs("div", { className: triggerContainer({ iconPosition }), "aria-expanded": isExpanded, onClick: () => dispatch(!isExpanded), children: [jsx("span", { children: children }), jsx("span", { className: arrow({ expand: isExpanded }), children: jsx(ChevronDown, { size: "1em" }) })] }));
+    return (jsxs("div", { "aria-expanded": isExpanded, className: triggerContainer({ iconPosition }), onClick: () => dispatch(!isExpanded), children: [jsx("span", { children: children }), jsx("span", { className: arrow({ expand: isExpanded }), children: jsx(ChevronDown, { size: "1em" }) })] }));
 };
 
 export { AccordionTrigger };

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

@@ -1,5 +1,5 @@
-import { type SprinklesProps } from '../../styles';
-import type { UIComponent } from '../../types';
+import { type SprinklesProps } from '#styles';
+import type { UIComponent } from '#types';
 import * as s from './Box.css';
 type BoxProps = UIComponent<'div', typeof s.box> & SprinklesProps;
 export declare const Box: import("react").ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,KAAK,CAAC,MAAM,WAAW,CAAC;AAE/B,KAAK,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC;AAElE,eAAO,MAAM,GAAG,kHA2Bf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,OAAO,KAAK,CAAC,MAAM,WAAW,CAAC;AAE/B,KAAK,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC;AAElE,eAAO,MAAM,GAAG,kHA2Bf,CAAC"}

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

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

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,EAAc,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAElC,UAAU,WACR,SAAQ,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC/D,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,wHAuClB,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,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"}

package/dist/components/Button/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
 import { icon, span, button } from './Button.css.js';
 import * as Button_css from './Button.css.js';
@@ -9,8 +9,10 @@ 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 { ripple } = useRipple(ref);
-    return (jsxs("button", { ref: ref, className: clsx(className, button({
+    const localRef = useRef(null);
+    const elementRef = ref || localRef;
+    const { ripple } = useRipple(elementRef);
+    return (jsxs("button", { ref: elementRef, className: clsx(className, button({
             color,
             size,
             variant,

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

@@ -1,3 +1,4 @@
+export declare const paddingVar: `var(--${string})`;
 export declare const card: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         contained: {};
@@ -26,6 +27,9 @@ export declare const card: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
     color: {
+        transparent: {
+            backgroundColor: "transparent";
+        };
         red: string;
         orange: string;
         amber: string;
@@ -57,5 +61,32 @@ export declare const card: import("@vanilla-extract/recipes").RuntimeFn<{
         warning: string;
         success: string;
     };
+    size: {
+        sm: {
+            vars: {
+                [paddingVar]: "0.25em";
+            };
+        };
+        md: {
+            vars: {
+                [paddingVar]: "0.5em";
+            };
+        };
+        lg: {
+            vars: {
+                [paddingVar]: "0.75em";
+            };
+        };
+        xl: {
+            vars: {
+                [paddingVar]: "1em";
+            };
+        };
+        '2xl': {
+            vars: {
+                [paddingVar]: "1.5em";
+            };
+        };
+    };
 }>;
 //# sourceMappingURL=Card.css.d.ts.map

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":"AA2BA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEf,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAsEP,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.js

@@ -5,6 +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__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:[]});
+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 paddingVar = 'var(--paddingVar__1foreks0)';
 
-export { card };
+export { card, paddingVar };

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

@@ -1,121 +1,120 @@
 @layer components;
 @layer components {
-  .Card_styleWithLayer__1foreks0 {
+  .Card_styleWithLayer__1foreks1 {
     background-color: rgb(var(--color-primary__n6e2fs7));
   }
-  .Card_styleWithLayer__1foreks1 {
+  .Card_styleWithLayer__1foreks2 {
     background-color: rgb(var(--color-secondary__n6e2fs9));
   }
-  .Card_styleWithLayer__1foreks2 {
+  .Card_styleWithLayer__1foreks3 {
     background-color: rgb(var(--color-muted__n6e2fsb));
   }
-  .Card_styleWithLayer__1foreks3 {
+  .Card_styleWithLayer__1foreks4 {
     background-color: rgb(var(--color-accent__n6e2fsd));
   }
-  .Card_styleWithLayer__1foreks4 {
+  .Card_styleWithLayer__1foreks5 {
     background-color: rgb(var(--color-card__n6e2fsf));
   }
-  .Card_styleWithLayer__1foreks5 {
+  .Card_styleWithLayer__1foreks6 {
     background-color: rgb(var(--color-danger__n6e2fsh));
   }
-  .Card_styleWithLayer__1foreks6 {
+  .Card_styleWithLayer__1foreks7 {
     background-color: rgb(var(--color-warning__n6e2fsj));
   }
-  .Card_styleWithLayer__1foreks7 {
+  .Card_styleWithLayer__1foreks8 {
     background-color: rgb(var(--color-success__n6e2fsl));
   }
-  .Card_styleWithLayer__1foreks8 {
+  .Card_styleWithLayer__1foreks9 {
     background-color: color-mix(in srgb, rgb(var(--color-red-500__n6e2fss)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreks9 {
+  .Card_styleWithLayer__1foreksa {
     background-color: color-mix(in srgb, rgb(var(--color-orange-500__n6e2fs13)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksa {
+  .Card_styleWithLayer__1foreksb {
     background-color: color-mix(in srgb, rgb(var(--color-amber-500__n6e2fs1e)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksb {
+  .Card_styleWithLayer__1foreksc {
     background-color: color-mix(in srgb, rgb(var(--color-yellow-500__n6e2fs1p)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksc {
+  .Card_styleWithLayer__1foreksd {
     background-color: color-mix(in srgb, rgb(var(--color-lime-500__n6e2fs20)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksd {
+  .Card_styleWithLayer__1forekse {
     background-color: color-mix(in srgb, rgb(var(--color-green-500__n6e2fs2b)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1forekse {
+  .Card_styleWithLayer__1foreksf {
     background-color: color-mix(in srgb, rgb(var(--color-emerald-500__n6e2fs2m)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksf {
+  .Card_styleWithLayer__1foreksg {
     background-color: color-mix(in srgb, rgb(var(--color-teal-500__n6e2fs2x)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksg {
+  .Card_styleWithLayer__1foreksh {
     background-color: color-mix(in srgb, rgb(var(--color-cyan-500__n6e2fs38)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksh {
+  .Card_styleWithLayer__1foreksi {
     background-color: color-mix(in srgb, rgb(var(--color-sky-500__n6e2fs3j)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksi {
+  .Card_styleWithLayer__1foreksj {
     background-color: color-mix(in srgb, rgb(var(--color-blue-500__n6e2fs3u)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksj {
+  .Card_styleWithLayer__1foreksk {
     background-color: color-mix(in srgb, rgb(var(--color-indigo-500__n6e2fs45)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksk {
+  .Card_styleWithLayer__1foreksl {
     background-color: color-mix(in srgb, rgb(var(--color-violet-500__n6e2fs4g)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksl {
+  .Card_styleWithLayer__1foreksm {
     background-color: color-mix(in srgb, rgb(var(--color-purple-500__n6e2fs4r)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksm {
+  .Card_styleWithLayer__1foreksn {
     background-color: color-mix(in srgb, rgb(var(--color-fuchsia-500__n6e2fs52)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksn {
+  .Card_styleWithLayer__1forekso {
     background-color: color-mix(in srgb, rgb(var(--color-pink-500__n6e2fs5d)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1forekso {
+  .Card_styleWithLayer__1foreksp {
     background-color: color-mix(in srgb, rgb(var(--color-rose-500__n6e2fs5o)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksp {
+  .Card_styleWithLayer__1foreksq {
     background-color: color-mix(in srgb, rgb(var(--color-slate-500__n6e2fs5z)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksq {
+  .Card_styleWithLayer__1foreksr {
     background-color: color-mix(in srgb, rgb(var(--color-gray-500__n6e2fs6a)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1foreksr {
+  .Card_styleWithLayer__1forekss {
     background-color: color-mix(in srgb, rgb(var(--color-zinc-500__n6e2fs6l)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1forekss {
+  .Card_styleWithLayer__1forekst {
     background-color: color-mix(in srgb, rgb(var(--color-neutral-500__n6e2fs6w)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_styleWithLayer__1forekst {
+  .Card_styleWithLayer__1foreksu {
     background-color: color-mix(in srgb, rgb(var(--color-stone-500__n6e2fs77)) 20%, rgb(var(--color-background__n6e2fs1)) 80%);
   }
-  .Card_layeredBase__1foreksu {
+  .Card_layeredBase__1foreksv {
     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) {
+  .Card_layeredBase__1foreksv: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) {
+  .Card_layeredBase__1foreksv: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 {
+  .Card_styleWithLayer__1foreksx {
     border: 1px solid;
     border-color: rgb(var(--color-border__n6e2fs3));
   }
-  .Card_styleWithLayer__1foreksx {
+  .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__1foreksx::before {
+  .Card_styleWithLayer__1foreksy::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -123,7 +122,25 @@
     opacity: 0;
     transition: opacity 0.3s ease;
   }
-  .Card_styleWithLayer__1foreksx:hover::before {
+  .Card_styleWithLayer__1foreksy:hover::before {
     opacity: 1;
   }
+  .Card_styleWithLayer__1foreksz {
+    background-color: transparent;
+  }
+  .Card_styleWithLayer__1foreks10 {
+    --paddingVar__1foreks0: 0.25em;
+  }
+  .Card_styleWithLayer__1foreks11 {
+    --paddingVar__1foreks0: 0.5em;
+  }
+  .Card_styleWithLayer__1foreks12 {
+    --paddingVar__1foreks0: 0.75em;
+  }
+  .Card_styleWithLayer__1foreks13 {
+    --paddingVar__1foreks0: 1em;
+  }
+  .Card_styleWithLayer__1foreks14 {
+    --paddingVar__1foreks0: 1.5em;
+  }
 }

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

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import type { UIComponent } from '../../types';
+import type { UIComponent } from '#types';
 import * as s from './Card.css';
 interface CardProps extends UIComponent<'div', typeof s.card> {
     width?: CSSProperties['width'];

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAEhC,UAAU,SAAU,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,mHAuBhB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAEhC,UAAU,SAAU,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,mHA4BhB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC"}

package/dist/components/Card/Card.js

@@ -6,8 +6,8 @@ import * as Card_css from './Card.css.js';
 export { Card_css as cardCss };
 import { sx } from '../../styles/sx.js';
 
-const Card = forwardRef(({ width, height, color = 'card', variant = 'outlined', className, style, sx: propSx, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: clsx(card({ color, variant }), className, sx(propSx)), style: { width, height, ...style }, ...props }));
+const Card = forwardRef(({ width, height, color = 'card', variant = 'outlined', size = 'md', className, style, sx: propSx, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: clsx(card({ color, size, variant }), className, sx(propSx)), style: { width, height, ...style }, ...props }));
 });
 Card.displayName = 'Card';
 

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

@@ -1 +1 @@
-{"version":3,"file":"CardContent.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardContent.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,QAItB,CAAC"}
+{"version":3,"file":"CardContent.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardContent.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,QAItB,CAAC"}

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

@@ -1,6 +1,8 @@
 import './../../styles/layers.css.ts.vanilla.css';
 import './../../styles/sprinkles.css.ts.vanilla.css';
 import './../../styles/globalStyle.css.ts.vanilla.css';
+import './CardInteraction.css.ts.vanilla.css';
+import './Card.css.ts.vanilla.css';
 import './CardContent.css.ts.vanilla.css';
 
 var cardContent = 'CardContent_styleWithLayer__1nhygmc0';

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

@@ -2,6 +2,6 @@
 @layer components {
   .CardContent_styleWithLayer__1nhygmc0 {
     flex: 1 1 auto;
-    padding: 0.5em;
+    padding: var(--paddingVar__1foreks0);
   }
 }

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

@@ -1,4 +1,4 @@
-import type { UIComponent } from '../../types';
+import type { UIComponent } from '#types';
 type CardContentProps = UIComponent<'div'>;
 export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<CardContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"CardContent.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,gBAAgB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,eAAO,MAAM,WAAW,0HAUvB,CAAC"}
+{"version":3,"file":"CardContent.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,gBAAgB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,eAAO,MAAM,WAAW,0HAUvB,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare const cardHeader: string;
+//# sourceMappingURL=CardHeader.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,QAGrB,CAAC"}

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

@@ -0,0 +1,10 @@
+import './../../styles/layers.css.ts.vanilla.css';
+import './../../styles/sprinkles.css.ts.vanilla.css';
+import './../../styles/globalStyle.css.ts.vanilla.css';
+import './CardInteraction.css.ts.vanilla.css';
+import './Card.css.ts.vanilla.css';
+import './CardHeader.css.ts.vanilla.css';
+
+var cardHeader = 'CardHeader_styleWithLayer__1mpqtlh0';
+
+export { cardHeader };

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

@@ -0,0 +1,7 @@
+@layer components;
+@layer components {
+  .CardHeader_styleWithLayer__1mpqtlh0 {
+    padding: var(--paddingVar__1foreks0);
+    padding-bottom: 0;
+  }
+}

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

@@ -0,0 +1,5 @@
+import type { UIComponent } from '#types';
+type CardHeaderProps = UIComponent<'div'>;
+export declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<CardHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=CardHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,yHAUtB,CAAC"}

package/dist/components/Card/CardHeader.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { cardHeader } from './CardHeader.css.js';
+import { sx } from '../../styles/sx.js';
+
+const CardHeader = forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: clsx(cardHeader, className, sx(propSx)), ...props }));
+});
+CardHeader.displayName = 'CardHeader';
+
+export { CardHeader };

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

@@ -1,4 +1,4 @@
-import type { UIComponent } from '../../types';
+import type { UIComponent } from '#types';
 type CardInteractionProps = UIComponent<'div'>;
 export declare const CardInteraction: import("react").ForwardRefExoticComponent<Omit<CardInteractionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"CardInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardInteraction.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,oBAAoB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE/C,eAAO,MAAM,eAAe,8HAoB3B,CAAC"}
+{"version":3,"file":"CardInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardInteraction.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,oBAAoB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE/C,eAAO,MAAM,eAAe,8HAoB3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardThumbnail.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardThumbnail.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAGpB,CAAC"}
+{"version":3,"file":"CardThumbnail.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardThumbnail.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAEpB,CAAC"}

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

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

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

@@ -1,4 +1,4 @@
-import type { UIComponent } from '../../types';
+import type { UIComponent } from '#types';
 type CardThumbnailProps = UIComponent<'img'>;
 export declare const CardThumbnail: import("react").ForwardRefExoticComponent<Omit<CardThumbnailProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"CardThumbnail.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardThumbnail.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,kBAAkB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE7C,eAAO,MAAM,aAAa,8HAUzB,CAAC"}
+{"version":3,"file":"CardThumbnail.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardThumbnail.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,kBAAkB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE7C,eAAO,MAAM,aAAa,8HAUzB,CAAC"}

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

@@ -1,5 +1,6 @@
 export * from './Card';
 export * from './CardContent';
+export * from './CardHeader';
 export * from './CardInteraction';
 export * from './CardThumbnail';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/dist/components/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-import type { UIComponent } from '../../types';
+import type { UIComponent } from '#types';
 import * as s from './Chip.css';
 type ChipProps = UIComponent<'div', typeof s.chip>;
 export declare const Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAEhC,KAAK,SAAS,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;AAEnD,eAAO,MAAM,IAAI,mHAsBhB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAEhC,KAAK,SAAS,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;AAEnD,eAAO,MAAM,IAAI,mHAsBhB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC"}

package/dist/components/Confirm/index.js

@@ -14,7 +14,7 @@ const Confirm = ({ children, ref, onConfirm, onCancle, }) => {
     useImperativeHandle(ref, () => ({
         close,
     }));
-    return (jsxs(Dialog, { children: [jsx(DialogContent, { children: children }), jsx(DialogFooter, { children: jsxs(Box, { flex: true, gap: "md", children: [jsx(Button, { size: "sm", onClick: onConfirm, children: "\uD655\uC778" }), jsx(Button, { color: "secondary", size: "sm", onClick: onCancle, children: "\uCDE8\uC18C" })] }) })] }));
+    return (jsxs(Dialog, { children: [jsx(DialogContent, { children: children }), jsx(DialogFooter, { children: jsxs(Box, { gap: "md", flex: true, children: [jsx(Button, { size: "sm", onClick: onConfirm, children: "\uD655\uC778" }), jsx(Button, { color: "secondary", size: "sm", onClick: onCancle, children: "\uCDE8\uC18C" })] }) })] }));
 };
 
 export { Confirm };

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

@@ -0,0 +1,4 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: Record<"sm" | "md" | "lg", string>;
+}>;
+//# sourceMappingURL=Container.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.css.d.ts","sourceRoot":"","sources":["../../../src/components/Container/Container.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;EASpB,CAAC"}

package/dist/components/Container/Container.css.js

@@ -0,0 +1,9 @@
+import './../../styles/layers.css.ts.vanilla.css';
+import './../../styles/sprinkles.css.ts.vanilla.css';
+import './../../styles/globalStyle.css.ts.vanilla.css';
+import './Container.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 container = createRuntimeFn({defaultClassName:'Container__1ku3u154 Container_layeredBase__1ku3u153',variantClassNames:{size:{sm:'Container_styleWithLayer__1ku3u150',md:'Container_styleWithLayer__1ku3u151',lg:'Container_styleWithLayer__1ku3u152'}},defaultVariants:{},compoundVariants:[]});
+
+export { container };

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

@@ -0,0 +1,16 @@
+@layer components;
+@layer components {
+  .Container_styleWithLayer__1ku3u150 {
+    max-width: 768px;
+  }
+  .Container_styleWithLayer__1ku3u151 {
+    max-width: 1024px;
+  }
+  .Container_styleWithLayer__1ku3u152 {
+    max-width: 1440px;
+  }
+  .Container_layeredBase__1ku3u153 {
+    margin-inline: auto;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,7 @@
+import { type SprinklesProps } from '#styles';
+import type { UIComponent } from '#types';
+import * as s from './Container.css';
+type ContainerProps = UIComponent<'div', typeof s.container> & SprinklesProps;
+export declare const Container: import("react").ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,OAAO,KAAK,CAAC,MAAM,iBAAiB,CAAC;AAErC,KAAK,cAAc,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,cAAc,CAAC;AAE9E,eAAO,MAAM,SAAS,wHAiBrB,CAAC"}

package/dist/components/Container/index.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { container } from './Container.css.js';
+import { omitSprinkles, filterSprinkles } from '../../utils/sprinklesUtils.js';
+import { sprinkles } from '../../styles/sprinkles.css.js';
+import { sx } from '../../styles/sx.js';
+
+const Container = forwardRef(({ children, className, size, sx: propSx, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: clsx(className, container({ size }), sx(propSx), sprinkles(filterSprinkles(props))), ...omitSprinkles(props), children: children }));
+});
+Container.displayName = 'Container';
+
+export { Container };

package/dist/components/Dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
-import type { UIComponent } from '../../types';
+import type { UIComponent } from '#types';
 type DialogProps = Omit<UIComponent<'div'>, 'color'>;
 export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,eAAO,MAAM,MAAM,qHAgBlB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,eAAO,MAAM,MAAM,qHAgBlB,CAAC"}