@kimdw-rtk/ui 0.0.7 → 0.0.9

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

@@ -1,5 +1,6 @@
-import { style } from '@vanilla-extract/css';
-export const container = style({
+import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+
+const container = style({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -7,3 +8,5 @@ export const container = style({
     height: '100%',
     margin: '0 auto',
 });
+
+export { container };

package/dist/components/Navigation/NavigationContainer.js

@@ -1,9 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { sx } from '#styles';
-import * as s from './NavigationContainer.css';
-export const NavigationContainer = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: clsx(className, s.container, sx(propSx)), ...props, children: children }));
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import '../../styles/layers.css.js';
+import '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import { sx } from '../../styles/sx.js';
+import { container } from './NavigationContainer.css.js';
+
+const NavigationContainer = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(className, container, sx(propSx)), ...props, children: children }));
 });
 NavigationContainer.displayName = 'NavigationContainer';
+
+export { NavigationContainer };

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

@@ -1,7 +1,8 @@
-import { recipeWithLayer, styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-import { navigationBarContainer } from './NavigationBar.css';
-export const narrow = styleWithLayer({
+import { styleWithLayer, recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+import { navigationBarContainer } from './NavigationBar.css.js';
+
+const narrow = styleWithLayer({
     display: 'none',
     '@container': {
         [`${navigationBarContainer} (max-width: 800px)`]: {
@@ -9,7 +10,7 @@ export const narrow = styleWithLayer({
         },
     },
 });
-export const wide = styleWithLayer({
+const wide = styleWithLayer({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -21,7 +22,7 @@ export const wide = styleWithLayer({
         },
     },
 });
-export const popup = recipeWithLayer({
+const popup = recipeWithLayer({
     base: {
         position: 'absolute',
         top: '100%',
@@ -47,3 +48,5 @@ export const popup = recipeWithLayer({
         },
     },
 });
+
+export { narrow, popup, wide };

package/dist/components/Navigation/NavigationDrawer.js

@@ -1,10 +1,52 @@
-'use client';
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { AlignJustifyIcon, XIcon } from 'lucide-react';
-import { Box, Button } from '#components';
-import * as s from './NavigationDrawer.css';
-export const NavigationDrawer = ({ menu, aside }) => {
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useState, useEffect } from 'react';
+import '../Accordion/Accordion.js';
+import '../Accordion/AccordionContent.css.js';
+import '../Accordion/AccordionContext.js';
+import '../Accordion/AccordionTrigger.css.js';
+import '@kimdw-rtk/utils';
+import { Box } from '../Box/index.js';
+import { Button } from '../Button/index.js';
+import '../Card/Card.js';
+import '../Card/CardContent.js';
+import '../Card/CardInteraction.js';
+import '../Card/CardThumbnail.js';
+import '../Chip/Chip.js';
+import '../Dialog/Dialog.js';
+import '../Dialog/DialogContent.js';
+import '../Dialog/DialogFooter.js';
+import '../Dialog/DialogHeader.js';
+import './NavigationAside.js';
+import './NavigationBar.js';
+import './NavigationContainer.js';
+import { wide, narrow, popup } from './NavigationDrawer.css.js';
+import './NavigationItem.js';
+import './NavigationLogo.js';
+import './NavigationMenu.js';
+import '../Range/Range.js';
+import '../ScrollArea/ScrollArea.js';
+import '../Select/Select.js';
+import '../Select/SelectContext.js';
+import '../Select/SelectOption.css.js';
+import '../Skeleton/index.js';
+import '../Table/Table.js';
+import '../../styles/layers.css.js';
+import '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import '../Table/TableCell.css.js';
+import '../Table/TableHead.css.js';
+import '../Table/TableRow.css.js';
+import '../Tabs/Tabs.js';
+import '../Tabs/TabsContent.js';
+import '../Tabs/TabsList.js';
+import '../Tabs/TabsTrigger.js';
+import '../TextField/index.js';
+import '../Toast/index.js';
+import '../Typography/index.js';
+import X from '../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/x.js';
+import AlignJustify from '../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/align-justify.js';
+
+const NavigationDrawer = ({ menu, aside }) => {
     const [isExpanded, setIsExpanded] = useState(false);
     const handleClick = () => {
         setIsExpanded((prev) => !prev);
@@ -19,5 +61,7 @@ export const NavigationDrawer = ({ menu, aside }) => {
             }
         };
     }, [isExpanded]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: s.wide, children: [menu, aside] }), _jsxs("div", { className: s.narrow, children: [_jsx(Button, { size: "icon-md", color: "secondary", variant: "ghost", onClick: handleClick, children: isExpanded ? _jsx(XIcon, {}) : _jsx(AlignJustifyIcon, {}) }), _jsx("div", { className: s.popup({ isVisible: isExpanded }), children: _jsxs(Box, { flex: true, gap: "xl", flexDirection: "column-reverse", alignItems: "flex-end", paddingY: "lg", children: [_jsx(Box, { width: "100%", onClick: () => setIsExpanded(false), children: menu }), aside] }) })] })] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: wide, children: [menu, aside] }), jsxRuntimeExports.jsxs("div", { className: narrow, children: [jsxRuntimeExports.jsx(Button, { size: "icon-md", color: "secondary", variant: "ghost", onClick: handleClick, children: isExpanded ? jsxRuntimeExports.jsx(X, {}) : jsxRuntimeExports.jsx(AlignJustify, {}) }), jsxRuntimeExports.jsx("div", { className: popup({ isVisible: isExpanded }), children: jsxRuntimeExports.jsxs(Box, { flex: true, gap: "xl", flexDirection: "column-reverse", alignItems: "flex-end", paddingY: "lg", children: [jsxRuntimeExports.jsx(Box, { width: "100%", onClick: () => setIsExpanded(false), children: menu }), aside] }) })] })] }));
 };
+
+export { NavigationDrawer };

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

@@ -1,8 +1,10 @@
-import { recipeWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-import { spacing, typography } from '#tokens';
-import { narrow } from './NavigationDrawer.css';
-export const container = recipeWithLayer({
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+import { spacing } from '../../tokens/semantic/spacing.js';
+import { typography } from '../../tokens/semantic/typography.js';
+import { narrow } from './NavigationDrawer.css.js';
+
+const container = recipeWithLayer({
     base: {
         position: 'relative',
         lineHeight: '0',
@@ -32,3 +34,5 @@ export const container = recipeWithLayer({
         },
     },
 });
+
+export { container };

package/dist/components/Navigation/NavigationItem.js

@@ -1,9 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { sx } from '#styles';
-import * as s from './NavigationItem.css';
-export const NavigationItem = forwardRef(({ style, className, sx: propSx, isSelected = false, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, style: { ...style }, className: clsx(s.container({ isSelected }), className, sx(propSx)), ...props }));
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import '../../styles/layers.css.js';
+import '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import { sx } from '../../styles/sx.js';
+import { container } from './NavigationItem.css.js';
+
+const NavigationItem = forwardRef(({ style, className, sx: propSx, isSelected = false, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, style: { ...style }, className: clsx(container({ isSelected }), className, sx(propSx)), ...props }));
 });
 NavigationItem.displayName = 'NavigationItem';
+
+export { NavigationItem };

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

@@ -1,4 +1,7 @@
-import { styleWithLayer } from '#styleUtils';
-export const navigationLogo = styleWithLayer({
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+
+const navigationLogo = styleWithLayer({
     marginRight: '0.5em',
 });
+
+export { navigationLogo };

package/dist/components/Navigation/NavigationLogo.js

@@ -1,9 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { sx } from '#styles';
-import * as s from './NavigationLogo.css';
-export const NavigationLogo = forwardRef(({ className, sx: propSx, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: clsx(s.navigationLogo, className, sx({ marginRight: { mobile: 'lg', desktop: '3xl' } }), sx(propSx)), ...props }));
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import '../../styles/layers.css.js';
+import '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import { sx } from '../../styles/sx.js';
+import { navigationLogo } from './NavigationLogo.css.js';
+
+const NavigationLogo = forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(navigationLogo, className, sx({ marginRight: { mobile: 'lg', desktop: '3xl' } }), sx(propSx)), ...props }));
 });
 NavigationLogo.displayName = 'NavigationLogo';
+
+export { NavigationLogo };

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

@@ -1,8 +1,9 @@
-import { styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-import { spacing } from '#tokens';
-import { narrow } from './NavigationDrawer.css';
-export const navigationMenu = styleWithLayer({
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+import { spacing } from '../../tokens/semantic/spacing.js';
+import { narrow } from './NavigationDrawer.css.js';
+
+const navigationMenu = styleWithLayer({
     display: 'flex',
     alignItems: 'center',
     gap: '0.5em',
@@ -17,3 +18,5 @@ export const navigationMenu = styleWithLayer({
         },
     },
 });
+
+export { navigationMenu };

package/dist/components/Navigation/NavigationMenu.js

@@ -1,10 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { sx } from '#styles';
-import * as s from './NavigationMenu.css';
-export const NavigationMenu = forwardRef(({ className, sx: propSx, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: clsx(s.navigationMenu, className, sx(propSx)), ...props }));
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import '../../styles/layers.css.js';
+import '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import { sx } from '../../styles/sx.js';
+import { navigationMenu } from './NavigationMenu.css.js';
+import * as NavigationMenu_css from './NavigationMenu.css.js';
+export { NavigationMenu_css as navigationMenuCss };
+
+const NavigationMenu = forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(navigationMenu, className, sx(propSx)), ...props }));
 });
 NavigationMenu.displayName = 'NavigationMenu';
-export { s as navigationMenuCss };
+
+export { NavigationMenu };

package/dist/components/Range/Range.css.js

@@ -1,8 +1,9 @@
-import { createVar } from '@vanilla-extract/css';
-import { recipeWithLayer, styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-import { semanticColor } from '#tokens';
-import { SCALE_COLOR } from '../../tokens/scale/color';
+import { createVar } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { styleWithLayer, recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { SCALE_COLOR } from '../../tokens/scale/color.js';
+import { theme } from '../../themes/theme.css.js';
+import { semanticColor } from '../../tokens/semantic/color.js';
+
 const backgroundVar = createVar();
 const semanticColors = semanticColor.reduce((prev, color) => ({
     ...prev,
@@ -20,7 +21,7 @@ const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
         },
     }),
 }), {});
-export const range = recipeWithLayer({
+const range = recipeWithLayer({
     base: {
         position: 'relative',
         width: '100%',
@@ -45,7 +46,7 @@ export const range = recipeWithLayer({
         },
     },
 });
-export const thumb = styleWithLayer({
+const thumb = styleWithLayer({
     display: 'inline-block',
     position: 'absolute',
     top: '50%',
@@ -76,13 +77,13 @@ export const thumb = styleWithLayer({
         },
     },
 });
-export const fill = styleWithLayer({
+const fill = styleWithLayer({
     position: 'absolute',
     top: '0',
     height: '100%',
     backgroundColor: `rgb(${backgroundVar})`,
 });
-export const bar = styleWithLayer({
+const bar = styleWithLayer({
     position: 'absolute',
     top: '50%',
     width: '100%',
@@ -91,3 +92,5 @@ export const bar = styleWithLayer({
     backgroundColor: `rgb(${theme.color.muted})`,
     transform: 'translateY(-50%)',
 });
+
+export { bar, fill, range, thumb };

package/dist/components/Range/Range.js

@@ -1,11 +1,16 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import { sx } from '#styles';
-import { usePointerSlider } from '../../hooks/usePointerSlider';
-import * as s from './Range.css';
-export const Range = forwardRef(({ min, max, defaultMinValue, defaultMaxValue, onChange, className, color = 'primary', size = 'md', sx: propSx, ...props }, ref) => {
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useRef, useEffect } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import '../../styles/layers.css.js';
+import '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import { sx } from '../../styles/sx.js';
+import { usePointerSlider } from '../../hooks/usePointerSlider/index.js';
+import { bar, fill, thumb, range } from './Range.css.js';
+import * as Range_css from './Range.css.js';
+export { Range_css as rangeCss };
+
+const Range = forwardRef(({ min, max, defaultMinValue, defaultMaxValue, onChange, className, color = 'primary', size = 'md', sx: propSx, ...props }, ref) => {
     const barRef = useRef(null);
     const leftThumbRef = useRef(null);
     const rightThumbRef = useRef(null);
@@ -28,10 +33,11 @@ export const Range = forwardRef(({ min, max, defaultMinValue, defaultMaxValue, o
         onChange(minValue, maxValue);
         // eslint-disable-next-line
     }, [minValue, maxValue]);
-    return (_jsxs("div", { ref: ref, className: clsx(s.range({ color, size }), className, sx(propSx)), ...props, children: [_jsx("div", { className: s.bar, children: _jsx("div", { ref: barRef, className: s.fill, style: {
+    return (jsxRuntimeExports.jsxs("div", { ref: ref, className: clsx(range({ color, size }), className, sx(propSx)), ...props, children: [jsxRuntimeExports.jsx("div", { className: bar, children: jsxRuntimeExports.jsx("div", { ref: barRef, className: fill, style: {
                         left: `${((minValue - min) / (max - min)) * 100}%`,
                         right: `${(1 - (maxValue - min) / (max - min)) * 100}%`,
-                    } }) }), _jsx("span", { ref: leftThumbRef, className: s.thumb }), _jsx("span", { ref: rightThumbRef, className: s.thumb })] }));
+                    } }) }), jsxRuntimeExports.jsx("span", { ref: leftThumbRef, className: thumb }), jsxRuntimeExports.jsx("span", { ref: rightThumbRef, className: thumb })] }));
 });
 Range.displayName = 'Range';
-export { s as rangeCss };
+
+export { Range };

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

@@ -1,32 +1,35 @@
-import { style } from '@vanilla-extract/css';
-import { styleWithLayer } from '#styleUtils';
+import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+
 const MASK_SIZE = '3rem';
-export const scrollArea = styleWithLayer({
+const scrollArea = styleWithLayer({
     width: '100%',
     overflowX: 'scroll',
     '::-webkit-scrollbar': {
         display: 'none',
     },
 });
-export const maskLeft = style({
+const maskLeft = style({
     maskImage: `linear-gradient(to left,
   black 0%,
   black calc(100% - ${MASK_SIZE}),
   transparent 100%)`,
 });
-export const maskRight = style({
+const maskRight = style({
     maskImage: `linear-gradient(to right,
   black 0%,
   black calc(100% - ${MASK_SIZE}),
   transparent 100%)`,
 });
-export const maskBoth = style({
+const maskBoth = style({
     maskImage: `linear-gradient(to right,
   transparent 0%,
   black ${MASK_SIZE},
   black calc(100% - ${MASK_SIZE}),
   transparent 100%)`,
 });
-export const wrapper = style({
+const wrapper = style({
     width: 'max-content',
 });
+
+export { maskBoth, maskLeft, maskRight, scrollArea, wrapper };

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,12 +1,17 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { useCombinedRefs } from '@kimdw-rtk/utils';
-import clsx from 'clsx';
-import { useMouseScroll } from '#hooks/useMouseScroll';
-import { sx } from '#styles';
-import * as s from './ScrollArea.css';
-export const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { useMouseScroll } from '../../hooks/useMouseScroll/index.js';
+import '../../styles/layers.css.js';
+import '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import { sx } from '../../styles/sx.js';
+import { wrapper, scrollArea, maskBoth, maskLeft, maskRight } from './ScrollArea.css.js';
+import * as ScrollArea_css from './ScrollArea.css.js';
+export { ScrollArea_css as scrollAreaCss };
+
+const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
     const scrollAreaRef = useRef(null);
     const targetRef = useCombinedRefs(ref, scrollAreaRef);
     const [hasLeftSpace, setHasLeftSpace] = useState(false);
@@ -28,7 +33,8 @@ export const ScrollArea = forwardRef(({ children, className, sx: propSx, ...prop
             element.removeEventListener('scroll', handleScroll);
         };
     }, []);
-    return (_jsx("div", { ref: targetRef, className: clsx(s.scrollArea, className, sx(propSx), hasLeftSpace && hasRightSpace && s.maskBoth, hasLeftSpace && s.maskLeft, hasRightSpace && s.maskRight), ...props, children: _jsx("div", { className: s.wrapper, children: children }) }));
+    return (jsxRuntimeExports.jsx("div", { ref: targetRef, className: clsx(scrollArea, className, sx(propSx), hasLeftSpace && hasRightSpace && maskBoth, hasLeftSpace && maskLeft, hasRightSpace && maskRight), ...props, children: jsxRuntimeExports.jsx("div", { className: wrapper, children: children }) }));
 });
 ScrollArea.displayName = 'ScrollArea';
-export { s as scrollAreaCss };
+
+export { ScrollArea };

package/dist/components/Select/Select.css.js

@@ -1,6 +1,7 @@
-import { recipeWithLayer } from '#styleUtils';
-import { typography } from '#tokens';
-export const select = recipeWithLayer({
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { typography } from '../../tokens/semantic/typography.js';
+
+const select = recipeWithLayer({
     base: {
         position: 'relative',
     },
@@ -18,3 +19,5 @@ export const select = recipeWithLayer({
         },
     },
 });
+
+export { select };

package/dist/components/Select/Select.js

@@ -1,14 +1,19 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useReducer, useRef, } from 'react';
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useRef, useReducer, useEffect } from 'react';
 import { useCombinedRefs } from '@kimdw-rtk/utils';
-import clsx from 'clsx';
-import { sx } from '#styles';
-import * as s from './Select.css';
-import { SelectContext, selectReducer } from './SelectContext';
-import SelectOptionList from './SelectOptionList';
-import SelectTrigger from './SelectTrigger';
-export const Select = forwardRef(({ children, className, style, name, defaultValue, width = '100%', size = 'md', sx: propSx, variant = 'outlined', onChange, ...props }, ref) => {
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import '../../styles/layers.css.js';
+import '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import { sx } from '../../styles/sx.js';
+import { select } from './Select.css.js';
+import * as Select_css from './Select.css.js';
+export { Select_css as selectCss };
+import { selectReducer, SelectContext } from './SelectContext.js';
+import SelectOptionList from './SelectOptionList.js';
+import SelectTrigger from './SelectTrigger.js';
+
+const Select = forwardRef(({ children, className, style, name, defaultValue, width = '100%', size = 'md', sx: propSx, variant = 'outlined', onChange, ...props }, ref) => {
     const containerRef = useRef(null);
     const targetRef = useCombinedRefs(ref, containerRef);
     const [state, dispatch] = useReducer(selectReducer, {
@@ -40,7 +45,8 @@ export const Select = forwardRef(({ children, className, style, name, defaultVal
         onChange(state.selected);
         //eslint-disable-next-line
     }, [state.selected]);
-    return (_jsx(SelectContext.Provider, { value: { state, dispatch }, children: _jsxs("div", { ref: targetRef, style: { ...style, width }, className: clsx(s.select({ size }), className, sx(propSx)), ...props, children: [_jsx(SelectTrigger, { variant: variant, children: state.selected !== null && state.items.get(state.selected || '') }), _jsx(SelectOptionList, { children: children }), _jsx("input", { type: "hidden", name: name, value: state.selected || '' })] }) }));
+    return (jsxRuntimeExports.jsx(SelectContext.Provider, { value: { state, dispatch }, children: jsxRuntimeExports.jsxs("div", { ref: targetRef, style: { ...style, width }, className: clsx(select({ size }), className, sx(propSx)), ...props, children: [jsxRuntimeExports.jsx(SelectTrigger, { variant: variant, children: state.selected !== null && state.items.get(state.selected || '') }), jsxRuntimeExports.jsx(SelectOptionList, { children: children }), jsxRuntimeExports.jsx("input", { type: "hidden", name: name, value: state.selected || '' })] }) }));
 });
 Select.displayName = 'Select';
-export { s as selectCss };
+
+export { Select };

package/dist/components/Select/SelectContext.js

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
-export const SelectContext = createContext(undefined);
-export const selectReducer = (state, action) => {
+
+const SelectContext = createContext(undefined);
+const selectReducer = (state, action) => {
     switch (action.type) {
         case 'ADD': {
             // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.
@@ -28,3 +29,5 @@ export const selectReducer = (state, action) => {
             return { ...state, isActive: !state.isActive };
     }
 };
+
+export { SelectContext, selectReducer };

package/dist/components/Select/SelectOption.css.js

@@ -1,6 +1,7 @@
-import { styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-export const selectOption = styleWithLayer({
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const selectOption = styleWithLayer({
     padding: '0.75em 0.5em',
     transition: 'background-color 0.2s ease',
     cursor: 'default',
@@ -8,3 +9,5 @@ export const selectOption = styleWithLayer({
         backgroundColor: `rgb(${theme.color.accent})`,
     },
 });
+
+export { selectOption };

package/dist/components/Select/SelectOption.js

@@ -1,9 +1,9 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
 import { useContext, useEffect } from 'react';
-import { SelectContext } from './SelectContext';
-import * as s from './SelectOption.css';
-export const SelectOption = ({ children, value }) => {
+import { SelectContext } from './SelectContext.js';
+import { selectOption } from './SelectOption.css.js';
+
+const SelectOption = ({ children, value }) => {
     const selectContext = useContext(SelectContext);
     if (!selectContext) {
         throw new Error('SelectOption must be rendered within a Select.');
@@ -19,5 +19,7 @@ export const SelectOption = ({ children, value }) => {
     const handleClick = () => {
         dispatch({ type: 'SELECT', payload: { value } });
     };
-    return (_jsx("div", { className: s.selectOption, onClick: handleClick, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: selectOption, onClick: handleClick, children: children }));
 };
+
+export { SelectOption };

package/dist/components/Select/SelectOptionList.css.js

@@ -1,6 +1,7 @@
-import { keyframes } from '@vanilla-extract/css';
-import { recipeWithLayer } from '#styleUtils';
-import { theme } from '#themes';
+import { keyframes } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
 const fadeIn = keyframes({
     '0%': {
         transform: 'scale(0.95)',
@@ -11,7 +12,7 @@ const fadeIn = keyframes({
         opacity: 1,
     },
 });
-export const container = recipeWithLayer({
+const container = recipeWithLayer({
     base: {
         overflowY: 'auto',
         position: 'absolute',
@@ -53,3 +54,5 @@ export const container = recipeWithLayer({
         },
     },
 });
+
+export { container };

package/dist/components/Select/SelectOptionList.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo, useRef } from 'react';
-import clsx from 'clsx';
-import { sprinkles } from '#styles';
-import { SelectContext } from './SelectContext';
-import * as s from './SelectOptionList.css';
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useContext, useRef, useMemo } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import '../../styles/layers.css.js';
+import { sprinkles } from '../../styles/sprinkles.css.js';
+import '../../styles/globalStyle.css.js';
+import { SelectContext } from './SelectContext.js';
+import { container } from './SelectOptionList.css.js';
+
 const SelectOptionList = ({ children }) => {
     const selectContext = useContext(SelectContext);
     const containerRef = useRef(null);
@@ -28,6 +31,7 @@ const SelectOptionList = ({ children }) => {
         // 그렇지 않으면 parent의 상단/하단 중 공간이 더 넓은 쪽으로 리스트를 보여줌
         return parentRect.top + parentRect.height / 2 < window.innerHeight / 2;
     }, [state.isActive, state.containerRef]);
-    return (_jsx("div", { ref: containerRef, className: clsx(s.container({ isVisible: state.isActive, isAbove }), sprinkles({ boxShadow: 'accent-sm' })), children: children }));
+    return (jsxRuntimeExports.jsx("div", { ref: containerRef, className: clsx(container({ isVisible: state.isActive, isAbove }), sprinkles({ boxShadow: 'accent-sm' })), children: children }));
 };
-export default SelectOptionList;
+
+export { SelectOptionList as default };