@kimdw-rtk/ui 0.1.7 → 0.1.9

package/dist/components/Accordion/Accordion.cjs

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Accordion_css = require('./Accordion.css.vanilla.cjs');
+var AccordionContext = require('./AccordionContext.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Accordion = react.forwardRef(({ children, className, isPadding = true, isExpanded: initIsExpaned = false, sx: propSx, ...props }, ref) => {
+    const [isExpanded, dispatch] = react.useReducer(AccordionContext.accordionReducer, initIsExpaned);
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Accordion_css.accordion({ isPadding }), className, sx.sx(propSx)), ...props, children: jsxRuntime.jsx(AccordionContext.AccordionContext.Provider, { value: { isExpanded, dispatch }, children: children }) }));
+});
+Accordion.displayName = 'Accordion';
+
+exports.Accordion = Accordion;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Accordion.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 accordion = createRuntimeFn62c9670f_esm.c({defaultClassName:'Accordion__18xln004 Accordion_layeredBase__18xln001',variantClassNames:{isPadding:{true:'Accordion_styleWithLayer__18xln002',false:'Accordion_styleWithLayer__18xln003'}},defaultVariants:{},compoundVariants:[]});
+
+exports.accordion = accordion;

package/dist/components/Accordion/AccordionContent.cjs

@@ -0,0 +1,61 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var AccordionContent_css = require('./AccordionContent.css.vanilla.cjs');
+var AccordionContext = require('./AccordionContext.cjs');
+
+const AccordionContent = ({ children }) => {
+    const containerRef = react.useRef(null);
+    const accordionContext = react.useContext(AccordionContext.AccordionContext);
+    const initRef = react.useRef(true);
+    if (!accordionContext) {
+        throw new Error('AccordionContent must be used within an Accordion component.');
+    }
+    const { isExpanded } = accordionContext;
+    react.useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        if (!isExpanded) {
+            container.style.height = `${container.scrollHeight}px`;
+            container.className = AccordionContent_css.container({ isExpanded });
+            //eslint-disable-next-line
+            container.offsetTop;
+            container.style.height = '0';
+            initRef.current = false;
+            return;
+        }
+        if (initRef.current) {
+            container.style.height = 'auto';
+        }
+        else {
+            container.style.height = `${container.scrollHeight}px`;
+        }
+        container.className = AccordionContent_css.container({ isExpanded });
+        initRef.current = false;
+    }, [isExpanded]);
+    react.useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const handleTransitionEnd = (e) => {
+            if (e.target !== container ||
+                e.propertyName !== 'height' ||
+                !isExpanded) {
+                return;
+            }
+            container.style.height = 'auto';
+        };
+        container.addEventListener('transitionend', handleTransitionEnd);
+        return () => {
+            container.removeEventListener('transitionend', handleTransitionEnd);
+        };
+    }, [containerRef, isExpanded]);
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: AccordionContent_css.container({ isExpanded }), children: jsxRuntime.jsx("div", { className: AccordionContent_css.inner, children: children }) }));
+};
+
+exports.AccordionContent = AccordionContent;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Accordion.css.ts.vanilla.css');
+require('./AccordionContent.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 container = createRuntimeFn62c9670f_esm.c({defaultClassName:'AccordionContent__a19wuy3 AccordionContent_layeredBase__a19wuy0',variantClassNames:{isExpanded:{true:'AccordionContent_styleWithLayer__a19wuy1',false:'AccordionContent_styleWithLayer__a19wuy2'}},defaultVariants:{},compoundVariants:[]});
+var inner = 'AccordionContent_styleWithLayer__a19wuy6';
+
+exports.container = container;
+exports.inner = inner;

package/dist/components/Accordion/AccordionContext.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var react = require('react');
+
+const AccordionContext = react.createContext(undefined);
+const accordionReducer = (_, action) => {
+    return action;
+};
+
+exports.AccordionContext = AccordionContext;
+exports.accordionReducer = accordionReducer;

package/dist/components/Accordion/AccordionTrigger.cjs

@@ -0,0 +1,19 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var AccordionContext = require('./AccordionContext.cjs');
+var AccordionTrigger_css = require('./AccordionTrigger.css.vanilla.cjs');
+var chevronDown = require('../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+
+const AccordionTrigger = ({ children, iconPosition = 'right', }) => {
+    const accordionContext = react.useContext(AccordionContext.AccordionContext);
+    if (!accordionContext) {
+        throw new Error('AccordionTrigger must be used within an Accordion component.');
+    }
+    const { dispatch, isExpanded } = accordionContext;
+    return (jsxRuntime.jsxs("div", { "aria-expanded": isExpanded, className: AccordionTrigger_css.triggerContainer({ iconPosition }), onClick: () => dispatch(!isExpanded), children: [jsxRuntime.jsx("span", { children: children }), jsxRuntime.jsx("span", { className: AccordionTrigger_css.arrow({ expand: isExpanded }), children: jsxRuntime.jsx(chevronDown.default, { size: "1em" }) })] }));
+};
+
+exports.AccordionTrigger = AccordionTrigger;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Accordion.css.ts.vanilla.css');
+require('./AccordionTrigger.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 arrow = createRuntimeFn62c9670f_esm.c({defaultClassName:'AccordionTrigger__1xaprgb9 AccordionTrigger_layeredBase__1xaprgb6',variantClassNames:{expand:{true:'AccordionTrigger_styleWithLayer__1xaprgb7',false:'AccordionTrigger_styleWithLayer__1xaprgb8'}},defaultVariants:{},compoundVariants:[]});
+var triggerContainer = createRuntimeFn62c9670f_esm.c({defaultClassName:'AccordionTrigger__1xaprgb3 AccordionTrigger_layeredBase__1xaprgb0',variantClassNames:{iconPosition:{text:'AccordionTrigger_styleWithLayer__1xaprgb1',right:'AccordionTrigger_styleWithLayer__1xaprgb2'}},defaultVariants:{},compoundVariants:[]});
+
+exports.arrow = arrow;
+exports.triggerContainer = triggerContainer;

package/dist/components/Alert/index.cjs

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@kimdw-rtk/utils');
+var Dialog = require('../Dialog/Dialog.cjs');
+var DialogContent = require('../Dialog/DialogContent.cjs');
+var DialogFooter = require('../Dialog/DialogFooter.cjs');
+var index = require('../Button/index.cjs');
+
+const Alert = ({ children }) => {
+    const { close } = utils.useOverlay();
+    utils.usePreventKeyboardInput();
+    return (jsxRuntime.jsxs(Dialog.Dialog, { children: [jsxRuntime.jsx(DialogContent.DialogContent, { children: children }), jsxRuntime.jsx(DialogFooter.DialogFooter, { children: jsxRuntime.jsx(index.Button, { size: "sm", onClick: close, children: "\uD655\uC778" }) })] }));
+};
+
+exports.Alert = Alert;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Box.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 box = createRuntimeFn62c9670f_esm.c({defaultClassName:'Box__1wsb57c2',variantClassNames:{flex:{true:'Box_styleWithLayer__1wsb57c0'},rounded:{true:'Box_styleWithLayer__1wsb57c1'}},defaultVariants:{},compoundVariants:[]});
+
+exports.box = box;

package/dist/components/Box/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Box_css = require('./Box.css.vanilla.cjs');
+var sprinklesUtils = require('../../utils/sprinklesUtils.cjs');
+var sprinkles_css = require('../../styles/sprinkles.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Box = react.forwardRef(({ children, flex = false, rounded = false, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, Box_css.box({ flex, rounded }), sx.sx(propSx), sprinkles_css.sprinkles(sprinklesUtils.filterSprinkles(props))), ...sprinklesUtils.omitSprinkles(props), children: children }));
+});
+Box.displayName = 'Box';
+
+exports.Box = Box;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+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:[]});
+
+exports.button = button;
+exports.icon = icon;
+exports.span = span;

package/dist/components/Button/index.cjs

@@ -0,0 +1,26 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+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 localRef = react.useRef(null);
+    const elementRef = ref || localRef;
+    const { ripple } = index.useRipple(elementRef);
+    return (jsxRuntime.jsxs("button", { ref: elementRef, className: clsx.clsx(className, Button_css.button({
+            color,
+            size,
+            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] }));
+});
+Button.displayName = 'Button';
+
+exports.buttonCss = Button_css;
+exports.Button = Button;

package/dist/components/Card/Card.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Card_css = require('./Card.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Card = react.forwardRef(({ width, height, color = 'card', variant = 'outlined', size = 'md', className, style, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Card_css.card({ color, size, variant }), className, sx.sx(propSx)), style: { width, height, ...style }, ...props }));
+});
+Card.displayName = 'Card';
+
+exports.cardCss = Card_css;
+exports.Card = Card;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+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 paddingVar = 'var(--paddingVar__1foreks0)';
+
+exports.card = card;
+exports.paddingVar = paddingVar;

package/dist/components/Card/CardContent.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var CardContent_css = require('./CardContent.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const CardContent = react.forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(CardContent_css.cardContent, className, sx.sx(propSx)), ...props }));
+});
+CardContent.displayName = 'CardContent';
+
+exports.CardContent = CardContent;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./CardInteraction.css.ts.vanilla.css');
+require('./Card.css.ts.vanilla.css');
+require('./CardContent.css.ts.vanilla.css');
+
+var cardContent = 'CardContent_styleWithLayer__1nhygmc0';
+
+exports.cardContent = cardContent;

package/dist/components/Card/CardHeader.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var CardHeader_css = require('./CardHeader.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const CardHeader = react.forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(CardHeader_css.cardHeader, className, sx.sx(propSx)), ...props }));
+});
+CardHeader.displayName = 'CardHeader';
+
+exports.CardHeader = CardHeader;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./CardInteraction.css.ts.vanilla.css');
+require('./Card.css.ts.vanilla.css');
+require('./CardHeader.css.ts.vanilla.css');
+
+var cardHeader = 'CardHeader_styleWithLayer__1mpqtlh0';
+
+exports.cardHeader = cardHeader;

package/dist/components/Card/CardInteraction.cjs

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var CardInteraction_css = require('./CardInteraction.css.vanilla.cjs');
+var index = require('../../hooks/useRipple/index.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const CardInteraction = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    const elementRef = react.useRef(null);
+    const { ripple } = index.useRipple(ref ?? elementRef);
+    return (jsxRuntime.jsxs("div", { ref: ref ?? elementRef, className: clsx.clsx(className, CardInteraction_css.cardInteraction, sx.sx(propSx)), ...props, children: [children, ripple] }));
+});
+CardInteraction.displayName = 'CardInteraction';
+
+exports.CardInteraction = CardInteraction;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./CardInteraction.css.ts.vanilla.css');
+
+var cardInteraction = 'CardInteraction_styleWithLayer__3n4sac0';
+
+exports.cardInteraction = cardInteraction;

package/dist/components/Card/CardThumbnail.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var CardThumbnail_css = require('./CardThumbnail.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const CardThumbnail = react.forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("img", { ref: ref, className: clsx.clsx(CardThumbnail_css.thumbnail, className, sx.sx(propSx)), ...props }));
+});
+CardThumbnail.displayName = 'CardThumbnail';
+
+exports.CardThumbnail = CardThumbnail;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./CardThumbnail.css.ts.vanilla.css');
+
+var thumbnail = 'CardThumbnail_styleWithLayer__1c08tgo0';
+
+exports.thumbnail = thumbnail;

package/dist/components/Chip/Chip.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Chip_css = require('./Chip.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Chip = react.forwardRef(({ children, className, color = 'primary', size = 'md', sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Chip_css.chip({ color, size }), className, sx.sx(propSx)), ...props, children: jsxRuntime.jsx("span", { children: children }) }));
+});
+Chip.displayName = 'Chip';
+
+exports.chipCss = Chip_css;
+exports.Chip = Chip;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Chip.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 chip = createRuntimeFn62c9670f_esm.c({defaultClassName:'Chip__1ogf81t10 Chip_layeredBase__1ogf81tw',variantClassNames:{color:{primary:'Chip_styleWithLayer__1ogf81t2',secondary:'Chip_styleWithLayer__1ogf81t3',muted:'Chip_styleWithLayer__1ogf81t4',accent:'Chip_styleWithLayer__1ogf81t5',card:'Chip_styleWithLayer__1ogf81t6',danger:'Chip_styleWithLayer__1ogf81t7',warning:'Chip_styleWithLayer__1ogf81t8',success:'Chip_styleWithLayer__1ogf81t9',red:'Chip_styleWithLayer__1ogf81ta',orange:'Chip_styleWithLayer__1ogf81tb',amber:'Chip_styleWithLayer__1ogf81tc',yellow:'Chip_styleWithLayer__1ogf81td',lime:'Chip_styleWithLayer__1ogf81te',green:'Chip_styleWithLayer__1ogf81tf',emerald:'Chip_styleWithLayer__1ogf81tg',teal:'Chip_styleWithLayer__1ogf81th',cyan:'Chip_styleWithLayer__1ogf81ti',sky:'Chip_styleWithLayer__1ogf81tj',blue:'Chip_styleWithLayer__1ogf81tk',indigo:'Chip_styleWithLayer__1ogf81tl',violet:'Chip_styleWithLayer__1ogf81tm',purple:'Chip_styleWithLayer__1ogf81tn',fuchsia:'Chip_styleWithLayer__1ogf81to',pink:'Chip_styleWithLayer__1ogf81tp',rose:'Chip_styleWithLayer__1ogf81tq',slate:'Chip_styleWithLayer__1ogf81tr',gray:'Chip_styleWithLayer__1ogf81ts',zinc:'Chip_styleWithLayer__1ogf81tt',neutral:'Chip_styleWithLayer__1ogf81tu',stone:'Chip_styleWithLayer__1ogf81tv'},size:{sm:'Chip_styleWithLayer__1ogf81tx',md:'Chip_styleWithLayer__1ogf81ty',lg:'Chip_styleWithLayer__1ogf81tz'}},defaultVariants:{},compoundVariants:[]});
+
+exports.chip = chip;

package/dist/components/Confirm/index.cjs

@@ -0,0 +1,22 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utils = require('@kimdw-rtk/utils');
+var index = require('../Box/index.cjs');
+var Dialog = require('../Dialog/Dialog.cjs');
+var DialogContent = require('../Dialog/DialogContent.cjs');
+var DialogFooter = require('../Dialog/DialogFooter.cjs');
+var index$1 = require('../Button/index.cjs');
+
+const Confirm = ({ children, ref, onConfirm, onCancle, }) => {
+    const { close } = utils.useOverlay();
+    utils.usePreventKeyboardInput();
+    react.useImperativeHandle(ref, () => ({
+        close,
+    }));
+    return (jsxRuntime.jsxs(Dialog.Dialog, { children: [jsxRuntime.jsx(DialogContent.DialogContent, { children: children }), jsxRuntime.jsx(DialogFooter.DialogFooter, { children: jsxRuntime.jsxs(index.Box, { gap: "md", flex: true, children: [jsxRuntime.jsx(index$1.Button, { size: "sm", onClick: onConfirm, children: "\uD655\uC778" }), jsxRuntime.jsx(index$1.Button, { color: "secondary", size: "sm", onClick: onCancle, children: "\uCDE8\uC18C" })] }) })] }));
+};
+
+exports.Confirm = Confirm;

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

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

package/dist/components/Container/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Container_css = require('./Container.css.vanilla.cjs');
+var sprinklesUtils = require('../../utils/sprinklesUtils.cjs');
+var sprinkles_css = require('../../styles/sprinkles.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Container = react.forwardRef(({ children, className, size, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, Container_css.container({ size }), sx.sx(propSx), sprinkles_css.sprinkles(sprinklesUtils.filterSprinkles(props))), ...sprinklesUtils.omitSprinkles(props), children: children }));
+});
+Container.displayName = 'Container';
+
+exports.Container = Container;

package/dist/components/Dialog/Dialog.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Dialog_css = require('./Dialog.css.vanilla.cjs');
+var index = require('../Box/index.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Dialog = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx(index.Box, { ref: ref, boxShadow: "border-sm", className: clsx.clsx(Dialog_css.container, className, sx.sx(propSx)), flexDirection: "row", gap: "lg", flex: true, ...props, children: children }));
+});
+Dialog.displayName = 'Dialog';
+
+exports.Dialog = Dialog;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+require('./Dialog.css.ts.vanilla.css');
+
+var container = 'Dialog_container__qjtgcx0';
+
+exports.container = container;

package/dist/components/Dialog/DialogContent.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var DialogContent_css = require('./DialogContent.css.vanilla.cjs');
+var index = require('../Box/index.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const DialogContent = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx(index.Box, { ref: ref, className: clsx.clsx(DialogContent_css.container, className, sx.sx(propSx)), ...props, children: children }));
+});
+DialogContent.displayName = 'DialogContent';
+
+exports.DialogContent = DialogContent;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./DialogHeader.css.ts.vanilla.css');
+require('./DialogContent.css.ts.vanilla.css');
+
+var container = 'DialogContent_styleWithLayer__1v0lk0e0';
+
+exports.container = container;

package/dist/components/Dialog/DialogFooter.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var index = require('../Box/index.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const DialogFooter = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx(index.Box, { ref: ref, className: clsx.clsx(className, sx.sx(propSx)), justifyContent: "flex-end", flex: true, ...props, children: children }));
+});
+DialogFooter.displayName = 'DialogFooter';
+
+exports.DialogFooter = DialogFooter;

package/dist/components/Dialog/DialogHeader.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var DialogHeader_css = require('./DialogHeader.css.vanilla.cjs');
+var x = require('../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/x.cjs');
+var index = require('../Box/index.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const DialogHeader = react.forwardRef(({ children, className, sx: propSx, onCloseClick, ...props }, ref) => {
+    return (jsxRuntime.jsxs(index.Box, { ref: ref, alignItems: "center", className: clsx.clsx(DialogHeader_css.container, className, sx.sx(propSx)), fontSize: "lg", fontWeight: "normal", justifyContent: "space-between", flex: true, ...props, children: [jsxRuntime.jsx("span", { children: children }), jsxRuntime.jsx("button", { "aria-label": "\uB2EB\uAE30", className: DialogHeader_css.close, onClick: onCloseClick, children: jsxRuntime.jsx(x.default, {}) })] }));
+});
+DialogHeader.displayName = 'DialogHeader';
+
+exports.DialogHeader = DialogHeader;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./DialogHeader.css.ts.vanilla.css');
+
+var close = 'DialogHeader_styleWithLayer__jb8ns01';
+var container = 'DialogHeader_styleWithLayer__jb8ns00';
+
+exports.close = close;
+exports.container = container;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Flex.css.ts.vanilla.css');
+
+var flex = 'Flex_styleWithLayer__jkg3sh0';
+
+exports.flex = flex;