@kimdw-rtk/ui 0.0.17 → 0.0.18

package/dist/components/Range/Range.css.mjs

@@ -1,13 +1,10 @@
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Range/Range.css.ts
 import { createVar } from "@vanilla-extract/css";
-import { recipeWithLayer, styleWithLayer } from "#styleUtils.mjs";
-import { theme } from "#themes.mjs";
-import { semanticColor } from "#tokens.mjs";
-import { SCALE_COLOR } from "../../tokens/scale/color.mjs";
-var backgroundVar = createVar();
-var semanticColors = semanticColor.reduce(
+import { recipeWithLayer, styleWithLayer } from "#styleUtils";
+import { theme } from "#themes";
+import { semanticColor } from "#tokens";
+import { SCALE_COLOR } from "../../tokens/scale/color";
+const backgroundVar = createVar();
+const semanticColors = semanticColor.reduce(
   (prev, color) => ({
     ...prev,
     [color]: styleWithLayer({
@@ -18,7 +15,7 @@ var semanticColors = semanticColor.reduce(
   }),
   {}
 );
-var scaleColors = SCALE_COLOR.reduce(
+const scaleColors = SCALE_COLOR.reduce(
   (prev, value) => ({
     ...prev,
     [value]: styleWithLayer({
@@ -29,7 +26,7 @@ var scaleColors = SCALE_COLOR.reduce(
   }),
   {}
 );
-var range = recipeWithLayer({
+const range = recipeWithLayer({
   base: {
     position: "relative",
     width: "100%",
@@ -54,7 +51,7 @@ var range = recipeWithLayer({
     }
   }
 });
-var thumb = styleWithLayer({
+const thumb = styleWithLayer({
   display: "inline-block",
   position: "absolute",
   top: "50%",
@@ -85,13 +82,13 @@ var thumb = styleWithLayer({
     }
   }
 });
-var fill = styleWithLayer({
+const fill = styleWithLayer({
   position: "absolute",
   top: "0",
   height: "100%",
   backgroundColor: `rgb(${backgroundVar})`
 });
-var bar = styleWithLayer({
+const bar = styleWithLayer({
   position: "absolute",
   top: "50%",
   width: "100%",

package/dist/components/Range/Range.css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Range/Range.css.ts"],"sourcesContent":["import { createVar } from '@vanilla-extract/css';\n\nimport { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\n\nconst backgroundVar = createVar();\n\nconst semanticColors = semanticColor.reduce(\n  (prev, color) => ({\n    ...prev,\n    [color]: styleWithLayer({\n      vars: {\n        [backgroundVar]: theme.color[color],\n      },\n    }),\n  }),\n  {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n  (prev, value) => ({\n    ...prev,\n    [value]: styleWithLayer({\n      vars: {\n        [backgroundVar]: theme.color[value][100],\n      },\n    }),\n  }),\n  {} as Record<ScaleColor, string>,\n);\n\nexport const range = recipeWithLayer({\n  base: {\n    position: 'relative',\n\n    width: '100%',\n    height: '2em',\n\n    userSelect: 'none',\n  },\n\n  variants: {\n    color: {\n      ...semanticColors,\n      ...scaleColors,\n    },\n\n    size: {\n      sm: {\n        fontSize: '0.75em',\n      },\n\n      md: {\n        fontSize: '1em',\n      },\n\n      lg: {\n        fontSize: '1.25em',\n      },\n    },\n  },\n});\n\nexport const thumb = styleWithLayer({\n  display: 'inline-block',\n  position: 'absolute',\n  top: '50%',\n\n  width: '1.25em',\n  height: '1.25em',\n\n  borderRadius: '50%',\n\n  boxShadow: `0 0 0.375em 0.125em rgba(${backgroundVar}, 0.33)`,\n  backgroundColor: `rgb(${backgroundVar})`,\n\n  transform: 'translate(-50%, -50%)',\n\n  cursor: 'pointer',\n\n  '::before': {\n    position: 'absolute',\n    inset: '-0.75em',\n\n    content: '',\n  },\n\n  '::after': {\n    position: 'absolute',\n    inset: '0',\n\n    borderRadius: '50%',\n\n    boxShadow: `0 0 0.5em 0.125em rgba(${backgroundVar}, 0.5)`,\n\n    opacity: '0',\n    transition: 'opacity 0.2s ease',\n\n    content: '',\n  },\n\n  selectors: {\n    '&:hover::after': {\n      opacity: '1',\n    },\n  },\n});\n\nexport const fill = styleWithLayer({\n  position: 'absolute',\n  top: '0',\n\n  height: '100%',\n\n  backgroundColor: `rgb(${backgroundVar})`,\n});\n\nexport const bar = styleWithLayer({\n  position: 'absolute',\n  top: '50%',\n\n  width: '100%',\n  height: '0.5em',\n  borderRadius: theme.borderRadius,\n\n  backgroundColor: `rgb(${theme.color.muted})`,\n\n  transform: 'translateY(-50%)',\n});\n"],"mappings":";;;AAAA,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,SAAS,mBAAoC;AAE7C,IAAM,gBAAgB,UAAU;AAEhC,IAAM,iBAAiB,cAAc;AAAA,EACnC,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,MAAM;AAAA,QACJ,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK;AAAA,MACpC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEA,IAAM,cAAc,YAAY;AAAA,EAC9B,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,MAAM;AAAA,QACJ,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK,EAAE,GAAG;AAAA,MACzC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEO,IAAM,QAAQ,gBAAgB;AAAA,EACnC,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IAEA,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,IAAM,QAAQ,eAAe;AAAA,EAClC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AAAA,EAEL,OAAO;AAAA,EACP,QAAQ;AAAA,EAER,cAAc;AAAA,EAEd,WAAW,4BAA4B,aAAa;AAAA,EACpD,iBAAiB,OAAO,aAAa;AAAA,EAErC,WAAW;AAAA,EAEX,QAAQ;AAAA,EAER,YAAY;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,SAAS;AAAA,EACX;AAAA,EAEA,WAAW;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,cAAc;AAAA,IAEd,WAAW,0BAA0B,aAAa;AAAA,IAElD,SAAS;AAAA,IACT,YAAY;AAAA,IAEZ,SAAS;AAAA,EACX;AAAA,EAEA,WAAW;AAAA,IACT,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAEM,IAAM,OAAO,eAAe;AAAA,EACjC,UAAU;AAAA,EACV,KAAK;AAAA,EAEL,QAAQ;AAAA,EAER,iBAAiB,OAAO,aAAa;AACvC,CAAC;AAEM,IAAM,MAAM,eAAe;AAAA,EAChC,UAAU;AAAA,EACV,KAAK;AAAA,EAEL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc,MAAM;AAAA,EAEpB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,EAEzC,WAAW;AACb,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/Range/Range.css.ts"],"sourcesContent":["import { createVar } from '@vanilla-extract/css';\n\nimport { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\n\nconst backgroundVar = createVar();\n\nconst semanticColors = semanticColor.reduce(\n  (prev, color) => ({\n    ...prev,\n    [color]: styleWithLayer({\n      vars: {\n        [backgroundVar]: theme.color[color],\n      },\n    }),\n  }),\n  {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n  (prev, value) => ({\n    ...prev,\n    [value]: styleWithLayer({\n      vars: {\n        [backgroundVar]: theme.color[value][100],\n      },\n    }),\n  }),\n  {} as Record<ScaleColor, string>,\n);\n\nexport const range = recipeWithLayer({\n  base: {\n    position: 'relative',\n\n    width: '100%',\n    height: '2em',\n\n    userSelect: 'none',\n  },\n\n  variants: {\n    color: {\n      ...semanticColors,\n      ...scaleColors,\n    },\n\n    size: {\n      sm: {\n        fontSize: '0.75em',\n      },\n\n      md: {\n        fontSize: '1em',\n      },\n\n      lg: {\n        fontSize: '1.25em',\n      },\n    },\n  },\n});\n\nexport const thumb = styleWithLayer({\n  display: 'inline-block',\n  position: 'absolute',\n  top: '50%',\n\n  width: '1.25em',\n  height: '1.25em',\n\n  borderRadius: '50%',\n\n  boxShadow: `0 0 0.375em 0.125em rgba(${backgroundVar}, 0.33)`,\n  backgroundColor: `rgb(${backgroundVar})`,\n\n  transform: 'translate(-50%, -50%)',\n\n  cursor: 'pointer',\n\n  '::before': {\n    position: 'absolute',\n    inset: '-0.75em',\n\n    content: '',\n  },\n\n  '::after': {\n    position: 'absolute',\n    inset: '0',\n\n    borderRadius: '50%',\n\n    boxShadow: `0 0 0.5em 0.125em rgba(${backgroundVar}, 0.5)`,\n\n    opacity: '0',\n    transition: 'opacity 0.2s ease',\n\n    content: '',\n  },\n\n  selectors: {\n    '&:hover::after': {\n      opacity: '1',\n    },\n  },\n});\n\nexport const fill = styleWithLayer({\n  position: 'absolute',\n  top: '0',\n\n  height: '100%',\n\n  backgroundColor: `rgb(${backgroundVar})`,\n});\n\nexport const bar = styleWithLayer({\n  position: 'absolute',\n  top: '50%',\n\n  width: '100%',\n  height: '0.5em',\n  borderRadius: theme.borderRadius,\n\n  backgroundColor: `rgb(${theme.color.muted})`,\n\n  transform: 'translateY(-50%)',\n});\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,SAAS,mBAAoC;AAE7C,MAAM,gBAAgB,UAAU;AAEhC,MAAM,iBAAiB,cAAc;AAAA,EACnC,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,MAAM;AAAA,QACJ,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK;AAAA,MACpC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEA,MAAM,cAAc,YAAY;AAAA,EAC9B,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,MAAM;AAAA,QACJ,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK,EAAE,GAAG;AAAA,MACzC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEO,MAAM,QAAQ,gBAAgB;AAAA,EACnC,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IAEA,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,QAAQ,eAAe;AAAA,EAClC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AAAA,EAEL,OAAO;AAAA,EACP,QAAQ;AAAA,EAER,cAAc;AAAA,EAEd,WAAW,4BAA4B,aAAa;AAAA,EACpD,iBAAiB,OAAO,aAAa;AAAA,EAErC,WAAW;AAAA,EAEX,QAAQ;AAAA,EAER,YAAY;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,SAAS;AAAA,EACX;AAAA,EAEA,WAAW;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,cAAc;AAAA,IAEd,WAAW,0BAA0B,aAAa;AAAA,IAElD,SAAS;AAAA,IACT,YAAY;AAAA,IAEZ,SAAS;AAAA,EACX;AAAA,EAEA,WAAW;AAAA,IACT,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAEM,MAAM,OAAO,eAAe;AAAA,EACjC,UAAU;AAAA,EACV,KAAK;AAAA,EAEL,QAAQ;AAAA,EAER,iBAAiB,OAAO,aAAa;AACvC,CAAC;AAEM,MAAM,MAAM,eAAe;AAAA,EAChC,UAAU;AAAA,EACV,KAAK;AAAA,EAEL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc,MAAM;AAAA,EAEpB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,EAEzC,WAAW;AACb,CAAC;","names":[]}

package/dist/components/Range/Range.mjs

@@ -1,14 +1,11 @@
 "use client";
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Range/Range.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from "react";
 import clsx from "clsx";
-import { sx } from "#styles.mjs";
-import { usePointerSlider } from "../../hooks/usePointerSlider/index.mjs";
-import * as s from "./Range.css.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Range = forwardRef(
+import { sx } from "#styles";
+import { usePointerSlider } from "../../hooks/usePointerSlider";
+import * as s from "./Range.css";
+const Range = forwardRef(
   ({
     min,
     max,

package/dist/components/Range/Range.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Range/Range.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport { usePointerSlider } from '../../hooks/usePointerSlider';\nimport * as s from './Range.css';\n\ninterface RangeProps\n  extends Omit<UIComponent<'div', typeof s.range>, 'children' | 'onChange'> {\n  min: number;\n  max: number;\n  defaultMinValue: number;\n  defaultMaxValue: number;\n  onChange: (min: number, max: number) => void;\n}\n\nexport const Range = forwardRef<HTMLDivElement, RangeProps>(\n  (\n    {\n      min,\n      max,\n      defaultMinValue,\n      defaultMaxValue,\n      onChange,\n      className,\n      color = 'primary',\n      size = 'md',\n      sx: propSx,\n      ...props\n    },\n    ref,\n  ) => {\n    const barRef = useRef<HTMLDivElement>(null);\n    const leftThumbRef = useRef<HTMLSpanElement>(null);\n    const rightThumbRef = useRef<HTMLSpanElement>(null);\n    const leftValue = usePointerSlider(leftThumbRef, {\n        min,\n        max,\n        defaultValue: defaultMinValue,\n      }),\n      rightValue = usePointerSlider(rightThumbRef, {\n        min,\n        max,\n        defaultValue: defaultMaxValue,\n      });\n    const initRef = useRef<boolean>(false);\n\n    const minValue = Math.min(leftValue, rightValue),\n      maxValue = Math.max(leftValue, rightValue);\n\n    useEffect(() => {\n      if (!initRef.current) {\n        initRef.current = true;\n        return;\n      }\n\n      onChange(minValue, maxValue);\n      // eslint-disable-next-line\n    }, [minValue, maxValue]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(s.range({ color, size }), className, sx(propSx))}\n        {...props}\n      >\n        <div className={s.bar}>\n          <div\n            ref={barRef}\n            className={s.fill}\n            style={{\n              left: `${((minValue - min) / (max - min)) * 100}%`,\n              right: `${(1 - (maxValue - min) / (max - min)) * 100}%`,\n            }}\n          />\n        </div>\n        <span ref={leftThumbRef} className={s.thumb} />\n        <span ref={rightThumbRef} className={s.thumb} />\n      </div>\n    );\n  },\n);\nRange.displayName = 'Range';\n\nexport { s as rangeCss };\n"],"mappings":";;;;AAEA,SAAS,YAAY,WAAW,cAAc;AAE9C,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,SAAS,wBAAwB;AACjC,YAAY,OAAO;AAwDb,SAMI,KANJ;AA7CC,IAAM,QAAQ;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SAAS,OAAuB,IAAI;AAC1C,UAAM,eAAe,OAAwB,IAAI;AACjD,UAAM,gBAAgB,OAAwB,IAAI;AAClD,UAAM,YAAY,iBAAiB,cAAc;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,GACD,aAAa,iBAAiB,eAAe;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,CAAC;AACH,UAAM,UAAU,OAAgB,KAAK;AAErC,UAAM,WAAW,KAAK,IAAI,WAAW,UAAU,GAC7C,WAAW,KAAK,IAAI,WAAW,UAAU;AAE3C,cAAU,MAAM;AACd,UAAI,CAAC,QAAQ,SAAS;AACpB,gBAAQ,UAAU;AAClB;AAAA,MACF;AAEA,eAAS,UAAU,QAAQ;AAAA,IAE7B,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAO,QAAM,EAAE,OAAO,KAAK,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QAC9D,GAAG;AAAA,QAEJ;AAAA,8BAAC,SAAI,WAAa,OAChB;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAa;AAAA,cACb,OAAO;AAAA,gBACL,MAAM,IAAK,WAAW,QAAQ,MAAM,OAAQ,GAAG;AAAA,gBAC/C,OAAO,IAAI,KAAK,WAAW,QAAQ,MAAM,QAAQ,GAAG;AAAA,cACtD;AAAA;AAAA,UACF,GACF;AAAA,UACA,oBAAC,UAAK,KAAK,cAAc,WAAa,SAAO;AAAA,UAC7C,oBAAC,UAAK,KAAK,eAAe,WAAa,SAAO;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/Range/Range.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport { usePointerSlider } from '../../hooks/usePointerSlider';\nimport * as s from './Range.css';\n\ninterface RangeProps\n  extends Omit<UIComponent<'div', typeof s.range>, 'children' | 'onChange'> {\n  min: number;\n  max: number;\n  defaultMinValue: number;\n  defaultMaxValue: number;\n  onChange: (min: number, max: number) => void;\n}\n\nexport const Range = forwardRef<HTMLDivElement, RangeProps>(\n  (\n    {\n      min,\n      max,\n      defaultMinValue,\n      defaultMaxValue,\n      onChange,\n      className,\n      color = 'primary',\n      size = 'md',\n      sx: propSx,\n      ...props\n    },\n    ref,\n  ) => {\n    const barRef = useRef<HTMLDivElement>(null);\n    const leftThumbRef = useRef<HTMLSpanElement>(null);\n    const rightThumbRef = useRef<HTMLSpanElement>(null);\n    const leftValue = usePointerSlider(leftThumbRef, {\n        min,\n        max,\n        defaultValue: defaultMinValue,\n      }),\n      rightValue = usePointerSlider(rightThumbRef, {\n        min,\n        max,\n        defaultValue: defaultMaxValue,\n      });\n    const initRef = useRef<boolean>(false);\n\n    const minValue = Math.min(leftValue, rightValue),\n      maxValue = Math.max(leftValue, rightValue);\n\n    useEffect(() => {\n      if (!initRef.current) {\n        initRef.current = true;\n        return;\n      }\n\n      onChange(minValue, maxValue);\n      // eslint-disable-next-line\n    }, [minValue, maxValue]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(s.range({ color, size }), className, sx(propSx))}\n        {...props}\n      >\n        <div className={s.bar}>\n          <div\n            ref={barRef}\n            className={s.fill}\n            style={{\n              left: `${((minValue - min) / (max - min)) * 100}%`,\n              right: `${(1 - (maxValue - min) / (max - min)) * 100}%`,\n            }}\n          />\n        </div>\n        <span ref={leftThumbRef} className={s.thumb} />\n        <span ref={rightThumbRef} className={s.thumb} />\n      </div>\n    );\n  },\n);\nRange.displayName = 'Range';\n\nexport { s as rangeCss };\n"],"mappings":";AAkEM,SAMI,KANJ;AAhEN,SAAS,YAAY,WAAW,cAAc;AAE9C,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,SAAS,wBAAwB;AACjC,YAAY,OAAO;AAWZ,MAAM,QAAQ;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SAAS,OAAuB,IAAI;AAC1C,UAAM,eAAe,OAAwB,IAAI;AACjD,UAAM,gBAAgB,OAAwB,IAAI;AAClD,UAAM,YAAY,iBAAiB,cAAc;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,GACD,aAAa,iBAAiB,eAAe;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,CAAC;AACH,UAAM,UAAU,OAAgB,KAAK;AAErC,UAAM,WAAW,KAAK,IAAI,WAAW,UAAU,GAC7C,WAAW,KAAK,IAAI,WAAW,UAAU;AAE3C,cAAU,MAAM;AACd,UAAI,CAAC,QAAQ,SAAS;AACpB,gBAAQ,UAAU;AAClB;AAAA,MACF;AAEA,eAAS,UAAU,QAAQ;AAAA,IAE7B,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,EAAE,MAAM,EAAE,OAAO,KAAK,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QAC9D,GAAG;AAAA,QAEJ;AAAA,8BAAC,SAAI,WAAW,EAAE,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAW,EAAE;AAAA,cACb,OAAO;AAAA,gBACL,MAAM,IAAK,WAAW,QAAQ,MAAM,OAAQ,GAAG;AAAA,gBAC/C,OAAO,IAAI,KAAK,WAAW,QAAQ,MAAM,QAAQ,GAAG;AAAA,cACtD;AAAA;AAAA,UACF,GACF;AAAA,UACA,oBAAC,UAAK,KAAK,cAAc,WAAW,EAAE,OAAO;AAAA,UAC7C,oBAAC,UAAK,KAAK,eAAe,WAAW,EAAE,OAAO;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}

package/dist/components/Range/Range.spec.mjs

@@ -1,6 +1,5 @@
-// src/components/Range/Range.spec.tsx
-import { uiTest } from "../../tests/uiTest.mjs";
-import { Range } from "./Range.mjs";
+import { uiTest } from "../../tests/uiTest";
+import { Range } from "./Range";
 describe("Range \uCEF4\uD3EC\uB10C\uD2B8", () => {
   uiTest(Range, "Range");
 });

package/dist/components/Range/Range.spec.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Range/Range.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { Range } from './Range';\n\ndescribe('Range 컴포넌트', () => {\n  uiTest(Range, 'Range');\n});\n"],"mappings":";AAAA,SAAS,cAAc;AACvB,SAAS,aAAa;AAEtB,SAAS,kCAAc,MAAM;AAC3B,SAAO,OAAO,OAAO;AACvB,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/Range/Range.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { Range } from './Range';\n\ndescribe('Range 컴포넌트', () => {\n  uiTest(Range, 'Range');\n});\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,aAAa;AAEtB,SAAS,kCAAc,MAAM;AAC3B,SAAO,OAAO,OAAO;AACvB,CAAC;","names":[]}

package/dist/components/Range/index.mjs

@@ -1,3 +1,2 @@
-// src/components/Range/index.ts
-export * from "./Range.mjs";
+export * from "./Range";
 //# sourceMappingURL=index.mjs.map

package/dist/components/Range/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Range/index.ts"],"sourcesContent":["export * from './Range';\n"],"mappings":";AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/Range/index.ts"],"sourcesContent":["export * from './Range';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/components/ScrollArea/ScrollArea.css.mjs

@@ -1,36 +1,33 @@
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/ScrollArea/ScrollArea.css.ts
 import { style } from "@vanilla-extract/css";
-import { styleWithLayer } from "#styleUtils.mjs";
-var MASK_SIZE = "3rem";
-var scrollArea = styleWithLayer({
+import { styleWithLayer } from "#styleUtils";
+const MASK_SIZE = "3rem";
+const scrollArea = styleWithLayer({
   width: "100%",
   overflowX: "scroll",
   "::-webkit-scrollbar": {
     display: "none"
   }
 });
-var maskLeft = style({
+const maskLeft = style({
   maskImage: `linear-gradient(to left,
   black 0%,
   black calc(100% - ${MASK_SIZE}),
   transparent 100%)`
 });
-var maskRight = style({
+const maskRight = style({
   maskImage: `linear-gradient(to right,
   black 0%,
   black calc(100% - ${MASK_SIZE}),
   transparent 100%)`
 });
-var maskBoth = style({
+const maskBoth = style({
   maskImage: `linear-gradient(to right,
   transparent 0%,
   black ${MASK_SIZE},
   black calc(100% - ${MASK_SIZE}),
   transparent 100%)`
 });
-var wrapper = style({
+const wrapper = style({
   width: "max-content"
 });
 export {

package/dist/components/ScrollArea/ScrollArea.css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { styleWithLayer } from '#styleUtils';\n\nconst MASK_SIZE = '3rem';\n\nexport const scrollArea = styleWithLayer({\n  width: '100%',\n  overflowX: 'scroll',\n\n  '::-webkit-scrollbar': {\n    display: 'none',\n  },\n});\n\nexport const maskLeft = style({\n  maskImage: `linear-gradient(to left,\n  black 0%,\n  black calc(100% - ${MASK_SIZE}),\n  transparent 100%)`,\n});\n\nexport const maskRight = style({\n  maskImage: `linear-gradient(to right,\n  black 0%,\n  black calc(100% - ${MASK_SIZE}),\n  transparent 100%)`,\n});\n\nexport const maskBoth = style({\n  maskImage: `linear-gradient(to right,\n  transparent 0%,\n  black ${MASK_SIZE},\n  black calc(100% - ${MASK_SIZE}),\n  transparent 100%)`,\n});\n\nexport const wrapper = style({\n  width: 'max-content',\n});\n"],"mappings":";;;AAAA,SAAS,aAAa;AAEtB,SAAS,sBAAsB;AAE/B,IAAM,YAAY;AAEX,IAAM,aAAa,eAAe;AAAA,EACvC,OAAO;AAAA,EACP,WAAW;AAAA,EAEX,uBAAuB;AAAA,IACrB,SAAS;AAAA,EACX;AACF,CAAC;AAEM,IAAM,WAAW,MAAM;AAAA,EAC5B,WAAW;AAAA;AAAA,sBAES,SAAS;AAAA;AAE/B,CAAC;AAEM,IAAM,YAAY,MAAM;AAAA,EAC7B,WAAW;AAAA;AAAA,sBAES,SAAS;AAAA;AAE/B,CAAC;AAEM,IAAM,WAAW,MAAM;AAAA,EAC5B,WAAW;AAAA;AAAA,UAEH,SAAS;AAAA,sBACG,SAAS;AAAA;AAE/B,CAAC;AAEM,IAAM,UAAU,MAAM;AAAA,EAC3B,OAAO;AACT,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { styleWithLayer } from '#styleUtils';\n\nconst MASK_SIZE = '3rem';\n\nexport const scrollArea = styleWithLayer({\n  width: '100%',\n  overflowX: 'scroll',\n\n  '::-webkit-scrollbar': {\n    display: 'none',\n  },\n});\n\nexport const maskLeft = style({\n  maskImage: `linear-gradient(to left,\n  black 0%,\n  black calc(100% - ${MASK_SIZE}),\n  transparent 100%)`,\n});\n\nexport const maskRight = style({\n  maskImage: `linear-gradient(to right,\n  black 0%,\n  black calc(100% - ${MASK_SIZE}),\n  transparent 100%)`,\n});\n\nexport const maskBoth = style({\n  maskImage: `linear-gradient(to right,\n  transparent 0%,\n  black ${MASK_SIZE},\n  black calc(100% - ${MASK_SIZE}),\n  transparent 100%)`,\n});\n\nexport const wrapper = style({\n  width: 'max-content',\n});\n"],"mappings":"AAAA,SAAS,aAAa;AAEtB,SAAS,sBAAsB;AAE/B,MAAM,YAAY;AAEX,MAAM,aAAa,eAAe;AAAA,EACvC,OAAO;AAAA,EACP,WAAW;AAAA,EAEX,uBAAuB;AAAA,IACrB,SAAS;AAAA,EACX;AACF,CAAC;AAEM,MAAM,WAAW,MAAM;AAAA,EAC5B,WAAW;AAAA;AAAA,sBAES,SAAS;AAAA;AAE/B,CAAC;AAEM,MAAM,YAAY,MAAM;AAAA,EAC7B,WAAW;AAAA;AAAA,sBAES,SAAS;AAAA;AAE/B,CAAC;AAEM,MAAM,WAAW,MAAM;AAAA,EAC5B,WAAW;AAAA;AAAA,UAEH,SAAS;AAAA,sBACG,SAAS;AAAA;AAE/B,CAAC;AAEM,MAAM,UAAU,MAAM;AAAA,EAC3B,OAAO;AACT,CAAC;","names":[]}

package/dist/components/ScrollArea/ScrollArea.mjs

@@ -1,15 +1,12 @@
 "use client";
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/ScrollArea/ScrollArea.tsx
+import { jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { useCombinedRefs } from "@kimdw-rtk/utils";
 import clsx from "clsx";
-import { useMouseScroll } from "#hooks/useMouseScroll.mjs";
-import { sx } from "#styles.mjs";
-import * as s from "./ScrollArea.css.mjs";
-import { jsx } from "react/jsx-runtime";
-var ScrollArea = forwardRef(
+import { useMouseScroll } from "#hooks/useMouseScroll";
+import { sx } from "#styles";
+import * as s from "./ScrollArea.css";
+const ScrollArea = forwardRef(
   ({ children, className, sx: propSx, ...props }, ref) => {
     const scrollAreaRef = useRef(null);
     const targetRef = useCombinedRefs(ref, scrollAreaRef);

package/dist/components/ScrollArea/ScrollArea.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport { useCombinedRefs } from '@kimdw-rtk/utils';\nimport clsx from 'clsx';\n\nimport { useMouseScroll } from '#hooks/useMouseScroll';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './ScrollArea.css';\n\ntype ScrollAreaProps = UIComponent<'div'>;\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ children, className, sx: propSx, ...props }, ref) => {\n    const scrollAreaRef = useRef<HTMLDivElement>(null);\n    const targetRef = useCombinedRefs(ref, scrollAreaRef);\n    const [hasLeftSpace, setHasLeftSpace] = useState<boolean>(false);\n    const [hasRightSpace, setHasRightSpace] = useState<boolean>(true);\n    useMouseScroll(scrollAreaRef);\n\n    useEffect(() => {\n      const element = scrollAreaRef.current;\n\n      if (element === null) {\n        return;\n      }\n\n      const handleScroll = () => {\n        setHasLeftSpace(element.scrollLeft !== 0);\n        setHasRightSpace(\n          Math.round(element.scrollLeft + element.clientWidth) <\n            element.scrollWidth,\n        );\n      };\n\n      handleScroll();\n\n      element.addEventListener('scroll', handleScroll);\n\n      return () => {\n        element.removeEventListener('scroll', handleScroll);\n      };\n    }, []);\n\n    return (\n      <div\n        ref={targetRef}\n        className={clsx(\n          s.scrollArea,\n          className,\n          sx(propSx),\n          hasLeftSpace && hasRightSpace && s.maskBoth,\n          hasLeftSpace && s.maskLeft,\n          hasRightSpace && s.maskRight,\n        )}\n        {...props}\n      >\n        <div className={s.wrapper}>{children}</div>\n      </div>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { s as scrollAreaCss };\n"],"mappings":";;;;AAEA,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AAExD,SAAS,uBAAuB;AAChC,OAAO,UAAU;AAEjB,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAGnB,YAAY,OAAO;AAiDX;AA7CD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,UAAU,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AACtD,UAAM,gBAAgB,OAAuB,IAAI;AACjD,UAAM,YAAY,gBAAgB,KAAK,aAAa;AACpD,UAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAC/D,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,IAAI;AAChE,mBAAe,aAAa;AAE5B,cAAU,MAAM;AACd,YAAM,UAAU,cAAc;AAE9B,UAAI,YAAY,MAAM;AACpB;AAAA,MACF;AAEA,YAAM,eAAe,MAAM;AACzB,wBAAgB,QAAQ,eAAe,CAAC;AACxC;AAAA,UACE,KAAK,MAAM,QAAQ,aAAa,QAAQ,WAAW,IACjD,QAAQ;AAAA,QACZ;AAAA,MACF;AAEA,mBAAa;AAEb,cAAQ,iBAAiB,UAAU,YAAY;AAE/C,aAAO,MAAM;AACX,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,MACpD;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACP;AAAA,UACF;AAAA,UACA,GAAG,MAAM;AAAA,UACT,gBAAgB,iBAAmB;AAAA,UACnC,gBAAkB;AAAA,UAClB,iBAAmB;AAAA,QACrB;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,SAAI,WAAa,WAAU,UAAS;AAAA;AAAA,IACvC;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport { useCombinedRefs } from '@kimdw-rtk/utils';\nimport clsx from 'clsx';\n\nimport { useMouseScroll } from '#hooks/useMouseScroll';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './ScrollArea.css';\n\ntype ScrollAreaProps = UIComponent<'div'>;\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ children, className, sx: propSx, ...props }, ref) => {\n    const scrollAreaRef = useRef<HTMLDivElement>(null);\n    const targetRef = useCombinedRefs(ref, scrollAreaRef);\n    const [hasLeftSpace, setHasLeftSpace] = useState<boolean>(false);\n    const [hasRightSpace, setHasRightSpace] = useState<boolean>(true);\n    useMouseScroll(scrollAreaRef);\n\n    useEffect(() => {\n      const element = scrollAreaRef.current;\n\n      if (element === null) {\n        return;\n      }\n\n      const handleScroll = () => {\n        setHasLeftSpace(element.scrollLeft !== 0);\n        setHasRightSpace(\n          Math.round(element.scrollLeft + element.clientWidth) <\n            element.scrollWidth,\n        );\n      };\n\n      handleScroll();\n\n      element.addEventListener('scroll', handleScroll);\n\n      return () => {\n        element.removeEventListener('scroll', handleScroll);\n      };\n    }, []);\n\n    return (\n      <div\n        ref={targetRef}\n        className={clsx(\n          s.scrollArea,\n          className,\n          sx(propSx),\n          hasLeftSpace && hasRightSpace && s.maskBoth,\n          hasLeftSpace && s.maskLeft,\n          hasRightSpace && s.maskRight,\n        )}\n        {...props}\n      >\n        <div className={s.wrapper}>{children}</div>\n      </div>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { s as scrollAreaCss };\n"],"mappings":";AA4DQ;AA1DR,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AAExD,SAAS,uBAAuB;AAChC,OAAO,UAAU;AAEjB,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,aAAa;AAAA,EACxB,CAAC,EAAE,UAAU,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AACtD,UAAM,gBAAgB,OAAuB,IAAI;AACjD,UAAM,YAAY,gBAAgB,KAAK,aAAa;AACpD,UAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAC/D,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,IAAI;AAChE,mBAAe,aAAa;AAE5B,cAAU,MAAM;AACd,YAAM,UAAU,cAAc;AAE9B,UAAI,YAAY,MAAM;AACpB;AAAA,MACF;AAEA,YAAM,eAAe,MAAM;AACzB,wBAAgB,QAAQ,eAAe,CAAC;AACxC;AAAA,UACE,KAAK,MAAM,QAAQ,aAAa,QAAQ,WAAW,IACjD,QAAQ;AAAA,QACZ;AAAA,MACF;AAEA,mBAAa;AAEb,cAAQ,iBAAiB,UAAU,YAAY;AAE/C,aAAO,MAAM;AACX,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,MACpD;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT,EAAE;AAAA,UACF;AAAA,UACA,GAAG,MAAM;AAAA,UACT,gBAAgB,iBAAiB,EAAE;AAAA,UACnC,gBAAgB,EAAE;AAAA,UAClB,iBAAiB,EAAE;AAAA,QACrB;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,SAAI,WAAW,EAAE,SAAU,UAAS;AAAA;AAAA,IACvC;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}

package/dist/components/ScrollArea/ScrollArea.spec.mjs

@@ -1,6 +1,5 @@
-// src/components/ScrollArea/ScrollArea.spec.tsx
-import { uiTest } from "../../tests/uiTest.mjs";
-import { ScrollArea } from "./ScrollArea.mjs";
+import { uiTest } from "../../tests/uiTest";
+import { ScrollArea } from "./ScrollArea";
 describe("ScrollArea \uCEF4\uD3EC\uB10C\uD2B8", () => {
   uiTest(ScrollArea, "ScrollArea");
 });

package/dist/components/ScrollArea/ScrollArea.spec.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { ScrollArea } from './ScrollArea';\n\ndescribe('ScrollArea 컴포넌트', () => {\n  uiTest(ScrollArea, 'ScrollArea');\n});\n"],"mappings":";AAAA,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAE3B,SAAS,uCAAmB,MAAM;AAChC,SAAO,YAAY,YAAY;AACjC,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { ScrollArea } from './ScrollArea';\n\ndescribe('ScrollArea 컴포넌트', () => {\n  uiTest(ScrollArea, 'ScrollArea');\n});\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAE3B,SAAS,uCAAmB,MAAM;AAChC,SAAO,YAAY,YAAY;AACjC,CAAC;","names":[]}

package/dist/components/ScrollArea/index.mjs

@@ -1,3 +1,2 @@
-// src/components/ScrollArea/index.ts
-export * from "./ScrollArea.mjs";
+export * from "./ScrollArea";
 //# sourceMappingURL=index.mjs.map

package/dist/components/ScrollArea/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScrollArea/index.ts"],"sourcesContent":["export * from './ScrollArea';\n"],"mappings":";AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ScrollArea/index.ts"],"sourcesContent":["export * from './ScrollArea';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/components/Select/Select.css.mjs

@@ -1,9 +1,6 @@
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Select/Select.css.ts
-import { recipeWithLayer } from "#styleUtils.mjs";
-import { typography } from "#tokens.mjs";
-var select = recipeWithLayer({
+import { recipeWithLayer } from "#styleUtils";
+import { typography } from "#tokens";
+const select = recipeWithLayer({
   base: {
     position: "relative"
   },

package/dist/components/Select/Select.css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/Select.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\nimport { typography } from '#tokens';\n\nexport const select = recipeWithLayer({\n  base: {\n    position: 'relative',\n  },\n\n  variants: {\n    size: {\n      sm: {\n        fontSize: typography.size.sm,\n      },\n      md: {\n        fontSize: typography.size.md,\n      },\n      lg: {\n        fontSize: typography.size.lg,\n      },\n    },\n  },\n});\n"],"mappings":";;;AAAA,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAEpB,IAAM,SAAS,gBAAgB;AAAA,EACpC,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,MACA,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,MACA,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/Select/Select.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\nimport { typography } from '#tokens';\n\nexport const select = recipeWithLayer({\n  base: {\n    position: 'relative',\n  },\n\n  variants: {\n    size: {\n      sm: {\n        fontSize: typography.size.sm,\n      },\n      md: {\n        fontSize: typography.size.md,\n      },\n      lg: {\n        fontSize: typography.size.lg,\n      },\n    },\n  },\n});\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAEpB,MAAM,SAAS,gBAAgB;AAAA,EACpC,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,MACA,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,MACA,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/components/Select/Select.mjs

@@ -1,7 +1,5 @@
 "use client";
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Select/Select.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   forwardRef,
   useEffect,
@@ -10,13 +8,12 @@ import {
 } from "react";
 import { useCombinedRefs } from "@kimdw-rtk/utils";
 import clsx from "clsx";
-import { sx } from "#styles.mjs";
-import * as s from "./Select.css.mjs";
-import { SelectContext, selectReducer } from "./SelectContext.mjs";
-import SelectOptionList from "./SelectOptionList.mjs";
-import SelectTrigger from "./SelectTrigger.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Select = forwardRef(
+import { sx } from "#styles";
+import * as s from "./Select.css";
+import { SelectContext, selectReducer } from "./SelectContext";
+import SelectOptionList from "./SelectOptionList";
+import SelectTrigger from "./SelectTrigger";
+const Select = forwardRef(
   ({
     children,
     className,

package/dist/components/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useEffect,\n  useReducer,\n  useRef,\n  type ComponentProps,\n  type CSSProperties,\n  type RefObject,\n} from 'react';\n\nimport { useCombinedRefs } from '@kimdw-rtk/utils';\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Select.css';\nimport { SelectContext, selectReducer } from './SelectContext';\nimport SelectOptionList from './SelectOptionList';\nimport SelectTrigger from './SelectTrigger';\n\ninterface SelectProps\n  extends Omit<UIComponent<'div', typeof s.select>, 'ref' | 'onChange'> {\n  ref?: RefObject<{ value?: string } | null>;\n  name?: string;\n  width?: CSSProperties['width'];\n  defaultValue?: string;\n  variant?: ComponentProps<typeof SelectTrigger>['variant'];\n  onChange?: (value: string | undefined) => void;\n}\n\nexport const Select = forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      name,\n      defaultValue,\n      width = '100%',\n      size = 'md',\n      sx: propSx,\n      variant = 'outlined',\n      onChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const targetRef = useCombinedRefs(ref, containerRef);\n    const [state, dispatch] = useReducer(selectReducer, {\n      isActive: false,\n      containerRef,\n      defaultValue,\n      items: new Map(),\n    });\n\n    useEffect(() => {\n      const container = containerRef.current;\n\n      if (!container) {\n        return;\n      }\n\n      const handleOutsideClick = (e: MouseEvent) => {\n        if (container.contains(e.target as Node) || !state.isActive) {\n          return;\n        }\n\n        dispatch({ type: 'TOGGLE' });\n      };\n\n      window.addEventListener('mousedown', handleOutsideClick);\n\n      return () => {\n        window.removeEventListener('mousedown', handleOutsideClick);\n      };\n    }, [state.isActive, dispatch]);\n\n    useEffect(() => {\n      if (!onChange || !state.items.size) {\n        return;\n      }\n\n      onChange(state.selected);\n      //eslint-disable-next-line\n    }, [state.selected]);\n\n    return (\n      <SelectContext.Provider value={{ state, dispatch }}>\n        <div\n          ref={targetRef}\n          style={{ ...style, width }}\n          className={clsx(s.select({ size }), className, sx(propSx))}\n          {...props}\n        >\n          <SelectTrigger variant={variant}>\n            {state.selected !== null && state.items.get(state.selected || '')}\n          </SelectTrigger>\n          <SelectOptionList>{children}</SelectOptionList>\n          <input type=\"hidden\" name={name} value={state.selected || ''} />\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\nSelect.displayName = 'Select';\n\nexport { s as selectCss };\n"],"mappings":";;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,uBAAuB;AAChC,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AACnB,SAAS,eAAe,qBAAqB;AAC7C,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAuElB,SAME,KANF;AA3DD,IAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,gBAAgB,KAAK,YAAY;AACnD,UAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,eAAe;AAAA,MAClD,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,OAAO,oBAAI,IAAI;AAAA,IACjB,CAAC;AAED,cAAU,MAAM;AACd,YAAM,YAAY,aAAa;AAE/B,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AAEA,YAAM,qBAAqB,CAAC,MAAkB;AAC5C,YAAI,UAAU,SAAS,EAAE,MAAc,KAAK,CAAC,MAAM,UAAU;AAC3D;AAAA,QACF;AAEA,iBAAS,EAAE,MAAM,SAAS,CAAC;AAAA,MAC7B;AAEA,aAAO,iBAAiB,aAAa,kBAAkB;AAEvD,aAAO,MAAM;AACX,eAAO,oBAAoB,aAAa,kBAAkB;AAAA,MAC5D;AAAA,IACF,GAAG,CAAC,MAAM,UAAU,QAAQ,CAAC;AAE7B,cAAU,MAAM;AACd,UAAI,CAAC,YAAY,CAAC,MAAM,MAAM,MAAM;AAClC;AAAA,MACF;AAEA,eAAS,MAAM,QAAQ;AAAA,IAEzB,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,OAAO,SAAS,GAC/C;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,QACzB,WAAW,KAAO,SAAO,EAAE,KAAK,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QACxD,GAAG;AAAA,QAEJ;AAAA,8BAAC,iBAAc,SACZ,gBAAM,aAAa,QAAQ,MAAM,MAAM,IAAI,MAAM,YAAY,EAAE,GAClE;AAAA,UACA,oBAAC,oBAAkB,UAAS;AAAA,UAC5B,oBAAC,WAAM,MAAK,UAAS,MAAY,OAAO,MAAM,YAAY,IAAI;AAAA;AAAA;AAAA,IAChE,GACF;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useEffect,\n  useReducer,\n  useRef,\n  type ComponentProps,\n  type CSSProperties,\n  type RefObject,\n} from 'react';\n\nimport { useCombinedRefs } from '@kimdw-rtk/utils';\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Select.css';\nimport { SelectContext, selectReducer } from './SelectContext';\nimport SelectOptionList from './SelectOptionList';\nimport SelectTrigger from './SelectTrigger';\n\ninterface SelectProps\n  extends Omit<UIComponent<'div', typeof s.select>, 'ref' | 'onChange'> {\n  ref?: RefObject<{ value?: string } | null>;\n  name?: string;\n  width?: CSSProperties['width'];\n  defaultValue?: string;\n  variant?: ComponentProps<typeof SelectTrigger>['variant'];\n  onChange?: (value: string | undefined) => void;\n}\n\nexport const Select = forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      name,\n      defaultValue,\n      width = '100%',\n      size = 'md',\n      sx: propSx,\n      variant = 'outlined',\n      onChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const targetRef = useCombinedRefs(ref, containerRef);\n    const [state, dispatch] = useReducer(selectReducer, {\n      isActive: false,\n      containerRef,\n      defaultValue,\n      items: new Map(),\n    });\n\n    useEffect(() => {\n      const container = containerRef.current;\n\n      if (!container) {\n        return;\n      }\n\n      const handleOutsideClick = (e: MouseEvent) => {\n        if (container.contains(e.target as Node) || !state.isActive) {\n          return;\n        }\n\n        dispatch({ type: 'TOGGLE' });\n      };\n\n      window.addEventListener('mousedown', handleOutsideClick);\n\n      return () => {\n        window.removeEventListener('mousedown', handleOutsideClick);\n      };\n    }, [state.isActive, dispatch]);\n\n    useEffect(() => {\n      if (!onChange || !state.items.size) {\n        return;\n      }\n\n      onChange(state.selected);\n      //eslint-disable-next-line\n    }, [state.selected]);\n\n    return (\n      <SelectContext.Provider value={{ state, dispatch }}>\n        <div\n          ref={targetRef}\n          style={{ ...style, width }}\n          className={clsx(s.select({ size }), className, sx(propSx))}\n          {...props}\n        >\n          <SelectTrigger variant={variant}>\n            {state.selected !== null && state.items.get(state.selected || '')}\n          </SelectTrigger>\n          <SelectOptionList>{children}</SelectOptionList>\n          <input type=\"hidden\" name={name} value={state.selected || ''} />\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\nSelect.displayName = 'Select';\n\nexport { s as selectCss };\n"],"mappings":";AA4FQ,SAME,KANF;AA1FR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,uBAAuB;AAChC,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AACnB,SAAS,eAAe,qBAAqB;AAC7C,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAYnB,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,gBAAgB,KAAK,YAAY;AACnD,UAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,eAAe;AAAA,MAClD,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,OAAO,oBAAI,IAAI;AAAA,IACjB,CAAC;AAED,cAAU,MAAM;AACd,YAAM,YAAY,aAAa;AAE/B,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AAEA,YAAM,qBAAqB,CAAC,MAAkB;AAC5C,YAAI,UAAU,SAAS,EAAE,MAAc,KAAK,CAAC,MAAM,UAAU;AAC3D;AAAA,QACF;AAEA,iBAAS,EAAE,MAAM,SAAS,CAAC;AAAA,MAC7B;AAEA,aAAO,iBAAiB,aAAa,kBAAkB;AAEvD,aAAO,MAAM;AACX,eAAO,oBAAoB,aAAa,kBAAkB;AAAA,MAC5D;AAAA,IACF,GAAG,CAAC,MAAM,UAAU,QAAQ,CAAC;AAE7B,cAAU,MAAM;AACd,UAAI,CAAC,YAAY,CAAC,MAAM,MAAM,MAAM;AAClC;AAAA,MACF;AAEA,eAAS,MAAM,QAAQ;AAAA,IAEzB,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,OAAO,SAAS,GAC/C;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,QACzB,WAAW,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QACxD,GAAG;AAAA,QAEJ;AAAA,8BAAC,iBAAc,SACZ,gBAAM,aAAa,QAAQ,MAAM,MAAM,IAAI,MAAM,YAAY,EAAE,GAClE;AAAA,UACA,oBAAC,oBAAkB,UAAS;AAAA,UAC5B,oBAAC,WAAM,MAAK,UAAS,MAAY,OAAO,MAAM,YAAY,IAAI;AAAA;AAAA;AAAA,IAChE,GACF;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}

package/dist/components/Select/Select.spec.mjs

@@ -1,14 +1,7 @@
-import {
-  fireEvent,
-  react_esm_exports,
-  render
-} from "../../chunk-Y4CBEQ5S.mjs";
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Select/Select.spec.tsx
-import { Select, SelectOption } from "./index.mjs";
-import { uiTest } from "../../tests/uiTest.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Select, SelectOption } from ".";
+import { uiTest } from "../../tests/uiTest";
 describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
   uiTest(Select, "Select");
   it("\uD074\uB9AD\uD55C option\uC758 \uB0B4\uC6A9\uC774 Select\uC5D0 \uBCF4\uC778\uB2E4.", () => {
@@ -18,8 +11,8 @@ describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
         /* @__PURE__ */ jsx(SelectOption, { value: "2", children: "2\uBC88" })
       ] })
     );
-    const select = react_esm_exports.screen.getByTestId("select");
-    fireEvent.click(react_esm_exports.screen.getByText("2\uBC88"));
+    const select = screen.getByTestId("select");
+    fireEvent.click(screen.getByText("2\uBC88"));
     expect(select).toHaveTextContent("2\uBC88");
   });
   it("\uC0C8\uB85C\uC6B4 option\uC744 \uD074\uB9AD\uD558\uBA74 onChange \uC774\uBCA4\uD2B8\uAC00 \uBC1C\uC0DD\uD558\uACE0, form value, ref.value\uC758 \uAC12\uC774 \uBC14\uB010\uB2E4.", () => {
@@ -30,8 +23,8 @@ describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
         /* @__PURE__ */ jsx(SelectOption, { value: "2", children: "2\uBC88" })
       ] }) })
     );
-    const option2 = react_esm_exports.screen.getByText("2\uBC88");
-    const form = react_esm_exports.screen.getByTestId("form");
+    const option2 = screen.getByText("2\uBC88");
+    const form = screen.getByTestId("form");
     fireEvent.click(option2);
     expect(handleChange).toHaveBeenCalledTimes(1);
     expect(handleChange.mock.calls[0][0]).toBe("2");
@@ -39,7 +32,7 @@ describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
     fireEvent.click(option2);
     expect(handleChange).toHaveBeenCalledTimes(1);
     expect(new FormData(form).get("select")).toBe("2");
-    fireEvent.click(react_esm_exports.screen.getByText("1\uBC88"));
+    fireEvent.click(screen.getByText("1\uBC88"));
     expect(handleChange).toHaveBeenCalledTimes(2);
     expect(handleChange.mock.calls[1][0]).toBe("1");
     expect(new FormData(form).get("select")).toBe("1");
@@ -51,7 +44,7 @@ describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
         /* @__PURE__ */ jsx(SelectOption, { value: "2", children: "2\uBC88" })
       ] })
     );
-    const select = react_esm_exports.screen.getByTestId("select");
+    const select = screen.getByTestId("select");
     expect(select).toHaveTextContent("2\uBC88");
   });
 });

package/dist/components/Select/Select.spec.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/Select.spec.tsx"],"sourcesContent":["import { fireEvent, render, screen } from '@testing-library/react';\n\nimport { Select, SelectOption } from '.';\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Select 컴포넌트', () => {\n  uiTest(Select, 'Select');\n\n  it('클릭한 option의 내용이 Select에 보인다.', () => {\n    render(\n      <Select data-testid=\"select\">\n        <SelectOption value=\"1\">1번</SelectOption>\n        <SelectOption value=\"2\">2번</SelectOption>\n      </Select>,\n    );\n\n    const select = screen.getByTestId('select');\n\n    fireEvent.click(screen.getByText('2번'));\n    expect(select).toHaveTextContent('2번');\n  });\n\n  it('새로운 option을 클릭하면 onChange 이벤트가 발생하고, form value, ref.value의 값이 바뀐다.', () => {\n    const handleChange = jest.fn();\n\n    render(\n      <form data-testid=\"form\">\n        <Select data-testid=\"select\" name=\"select\" onChange={handleChange}>\n          <SelectOption value=\"1\">1번</SelectOption>\n          <SelectOption value=\"2\">2번</SelectOption>\n        </Select>\n      </form>,\n    );\n\n    const option2 = screen.getByText('2번');\n    const form = screen.getByTestId('form') as HTMLFormElement;\n\n    fireEvent.click(option2);\n    expect(handleChange).toHaveBeenCalledTimes(1);\n    expect(handleChange.mock.calls[0][0]).toBe('2');\n    expect(new FormData(form).get('select')).toBe('2');\n\n    fireEvent.click(option2);\n    expect(handleChange).toHaveBeenCalledTimes(1);\n    expect(new FormData(form).get('select')).toBe('2');\n\n    fireEvent.click(screen.getByText('1번'));\n    expect(handleChange).toHaveBeenCalledTimes(2);\n    expect(handleChange.mock.calls[1][0]).toBe('1');\n    expect(new FormData(form).get('select')).toBe('1');\n  });\n\n  it('defaultValue의 값이 기본으로 보인다.', () => {\n    render(\n      <Select data-testid=\"select\" defaultValue=\"2\">\n        <SelectOption value=\"1\">1번</SelectOption>\n        <SelectOption value=\"2\">2번</SelectOption>\n      </Select>,\n    );\n\n    const select = screen.getByTestId('select');\n\n    expect(select).toHaveTextContent('2번');\n  });\n});\n"],"mappings":";;;;;;;;AAEA,SAAS,QAAQ,oBAAoB;AACrC,SAAS,cAAc;AAOjB,SACE,KADF;AALN,SAAS,mCAAe,MAAM;AAC5B,SAAO,QAAQ,QAAQ;AAEvB,KAAG,uFAAgC,MAAM;AACvC;AAAA,MACE,qBAAC,UAAO,eAAY,UAClB;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B;AAAA,IACF;AAEA,UAAM,SAAS,yBAAO,YAAY,QAAQ;AAE1C,cAAU,MAAM,yBAAO,UAAU,SAAI,CAAC;AACtC,WAAO,MAAM,EAAE,kBAAkB,SAAI;AAAA,EACvC,CAAC;AAED,KAAG,qLAAuE,MAAM;AAC9E,UAAM,eAAe,KAAK,GAAG;AAE7B;AAAA,MACE,oBAAC,UAAK,eAAY,QAChB,+BAAC,UAAO,eAAY,UAAS,MAAK,UAAS,UAAU,cACnD;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B,GACF;AAAA,IACF;AAEA,UAAM,UAAU,yBAAO,UAAU,SAAI;AACrC,UAAM,OAAO,yBAAO,YAAY,MAAM;AAEtC,cAAU,MAAM,OAAO;AACvB,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,aAAa,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,GAAG;AAC9C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAEjD,cAAU,MAAM,OAAO;AACvB,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAEjD,cAAU,MAAM,yBAAO,UAAU,SAAI,CAAC;AACtC,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,aAAa,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,GAAG;AAC9C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAAA,EACnD,CAAC;AAED,KAAG,gFAA8B,MAAM;AACrC;AAAA,MACE,qBAAC,UAAO,eAAY,UAAS,cAAa,KACxC;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B;AAAA,IACF;AAEA,UAAM,SAAS,yBAAO,YAAY,QAAQ;AAE1C,WAAO,MAAM,EAAE,kBAAkB,SAAI;AAAA,EACvC,CAAC;AACH,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/Select/Select.spec.tsx"],"sourcesContent":["import { fireEvent, render, screen } from '@testing-library/react';\n\nimport { Select, SelectOption } from '.';\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Select 컴포넌트', () => {\n  uiTest(Select, 'Select');\n\n  it('클릭한 option의 내용이 Select에 보인다.', () => {\n    render(\n      <Select data-testid=\"select\">\n        <SelectOption value=\"1\">1번</SelectOption>\n        <SelectOption value=\"2\">2번</SelectOption>\n      </Select>,\n    );\n\n    const select = screen.getByTestId('select');\n\n    fireEvent.click(screen.getByText('2번'));\n    expect(select).toHaveTextContent('2번');\n  });\n\n  it('새로운 option을 클릭하면 onChange 이벤트가 발생하고, form value, ref.value의 값이 바뀐다.', () => {\n    const handleChange = jest.fn();\n\n    render(\n      <form data-testid=\"form\">\n        <Select data-testid=\"select\" name=\"select\" onChange={handleChange}>\n          <SelectOption value=\"1\">1번</SelectOption>\n          <SelectOption value=\"2\">2번</SelectOption>\n        </Select>\n      </form>,\n    );\n\n    const option2 = screen.getByText('2번');\n    const form = screen.getByTestId('form') as HTMLFormElement;\n\n    fireEvent.click(option2);\n    expect(handleChange).toHaveBeenCalledTimes(1);\n    expect(handleChange.mock.calls[0][0]).toBe('2');\n    expect(new FormData(form).get('select')).toBe('2');\n\n    fireEvent.click(option2);\n    expect(handleChange).toHaveBeenCalledTimes(1);\n    expect(new FormData(form).get('select')).toBe('2');\n\n    fireEvent.click(screen.getByText('1번'));\n    expect(handleChange).toHaveBeenCalledTimes(2);\n    expect(handleChange.mock.calls[1][0]).toBe('1');\n    expect(new FormData(form).get('select')).toBe('1');\n  });\n\n  it('defaultValue의 값이 기본으로 보인다.', () => {\n    render(\n      <Select data-testid=\"select\" defaultValue=\"2\">\n        <SelectOption value=\"1\">1번</SelectOption>\n        <SelectOption value=\"2\">2번</SelectOption>\n      </Select>,\n    );\n\n    const select = screen.getByTestId('select');\n\n    expect(select).toHaveTextContent('2번');\n  });\n});\n"],"mappings":"AAUM,SACE,KADF;AAVN,SAAS,WAAW,QAAQ,cAAc;AAE1C,SAAS,QAAQ,oBAAoB;AACrC,SAAS,cAAc;AAEvB,SAAS,mCAAe,MAAM;AAC5B,SAAO,QAAQ,QAAQ;AAEvB,KAAG,uFAAgC,MAAM;AACvC;AAAA,MACE,qBAAC,UAAO,eAAY,UAClB;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B;AAAA,IACF;AAEA,UAAM,SAAS,OAAO,YAAY,QAAQ;AAE1C,cAAU,MAAM,OAAO,UAAU,SAAI,CAAC;AACtC,WAAO,MAAM,EAAE,kBAAkB,SAAI;AAAA,EACvC,CAAC;AAED,KAAG,qLAAuE,MAAM;AAC9E,UAAM,eAAe,KAAK,GAAG;AAE7B;AAAA,MACE,oBAAC,UAAK,eAAY,QAChB,+BAAC,UAAO,eAAY,UAAS,MAAK,UAAS,UAAU,cACnD;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B,GACF;AAAA,IACF;AAEA,UAAM,UAAU,OAAO,UAAU,SAAI;AACrC,UAAM,OAAO,OAAO,YAAY,MAAM;AAEtC,cAAU,MAAM,OAAO;AACvB,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,aAAa,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,GAAG;AAC9C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAEjD,cAAU,MAAM,OAAO;AACvB,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAEjD,cAAU,MAAM,OAAO,UAAU,SAAI,CAAC;AACtC,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,aAAa,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,GAAG;AAC9C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAAA,EACnD,CAAC;AAED,KAAG,gFAA8B,MAAM;AACrC;AAAA,MACE,qBAAC,UAAO,eAAY,UAAS,cAAa,KACxC;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B;AAAA,IACF;AAEA,UAAM,SAAS,OAAO,YAAY,QAAQ;AAE1C,WAAO,MAAM,EAAE,kBAAkB,SAAI;AAAA,EACvC,CAAC;AACH,CAAC;","names":[]}

package/dist/components/Select/SelectContext.mjs

@@ -1,9 +1,6 @@
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Select/SelectContext.ts
 import { createContext } from "react";
-var SelectContext = createContext(void 0);
-var selectReducer = (state, action) => {
+const SelectContext = createContext(void 0);
+const selectReducer = (state, action) => {
   switch (action.type) {
     case "ADD": {
       if (state.selected === void 0 && state.defaultValue === action.payload.value) {

package/dist/components/Select/SelectContext.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/SelectContext.ts"],"sourcesContent":["import { createContext, type Dispatch, type ReactNode } from 'react';\n\ntype SelectState = {\n  isActive: boolean;\n  selected?: string;\n  defaultValue?: string;\n  items: Map<string, ReactNode>;\n  containerRef: React.RefObject<HTMLDivElement | null>;\n};\n\ntype SelectAction =\n  | { type: 'ADD'; payload: { value: string; children: ReactNode } }\n  | { type: 'REMOVE'; payload: { value: string } }\n  | { type: 'SELECT'; payload: { value: string } }\n  | { type: 'TOGGLE' };\n\nexport const SelectContext = createContext<\n  { state: SelectState; dispatch: Dispatch<SelectAction> } | undefined\n>(undefined);\n\nexport const selectReducer = (\n  state: SelectState,\n  action: SelectAction,\n): SelectState => {\n  switch (action.type) {\n    case 'ADD': {\n      // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.\n      if (\n        state.selected === undefined &&\n        state.defaultValue === action.payload.value\n      ) {\n        return {\n          ...state,\n          selected: action.payload.value,\n          items: new Map(state.items).set(\n            action.payload.value,\n            action.payload.children,\n          ),\n        };\n      }\n      return {\n        ...state,\n        items: new Map(state.items).set(\n          action.payload.value,\n          action.payload.children,\n        ),\n      };\n    }\n    case 'REMOVE': {\n      const newMap = new Map(state.items);\n      newMap.delete(action.payload.value);\n      return { ...state, items: newMap };\n    }\n    case 'SELECT':\n      return { ...state, isActive: false, selected: action.payload.value };\n    case 'TOGGLE':\n      return { ...state, isActive: !state.isActive };\n  }\n};\n"],"mappings":";;;AAAA,SAAS,qBAAoD;AAgBtD,IAAM,gBAAgB,cAE3B,MAAS;AAEJ,IAAM,gBAAgB,CAC3B,OACA,WACgB;AAChB,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK,OAAO;AAEV,UACE,MAAM,aAAa,UACnB,MAAM,iBAAiB,OAAO,QAAQ,OACtC;AACA,eAAO;AAAA,UACL,GAAG;AAAA,UACH,UAAU,OAAO,QAAQ;AAAA,UACzB,OAAO,IAAI,IAAI,MAAM,KAAK,EAAE;AAAA,YAC1B,OAAO,QAAQ;AAAA,YACf,OAAO,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,OAAO,IAAI,IAAI,MAAM,KAAK,EAAE;AAAA,UAC1B,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,IACA,KAAK,UAAU;AACb,YAAM,SAAS,IAAI,IAAI,MAAM,KAAK;AAClC,aAAO,OAAO,OAAO,QAAQ,KAAK;AAClC,aAAO,EAAE,GAAG,OAAO,OAAO,OAAO;AAAA,IACnC;AAAA,IACA,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,QAAQ,MAAM;AAAA,IACrE,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,UAAU,CAAC,MAAM,SAAS;AAAA,EACjD;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/Select/SelectContext.ts"],"sourcesContent":["import { createContext, type Dispatch, type ReactNode } from 'react';\n\ntype SelectState = {\n  isActive: boolean;\n  selected?: string;\n  defaultValue?: string;\n  items: Map<string, ReactNode>;\n  containerRef: React.RefObject<HTMLDivElement | null>;\n};\n\ntype SelectAction =\n  | { type: 'ADD'; payload: { value: string; children: ReactNode } }\n  | { type: 'REMOVE'; payload: { value: string } }\n  | { type: 'SELECT'; payload: { value: string } }\n  | { type: 'TOGGLE' };\n\nexport const SelectContext = createContext<\n  { state: SelectState; dispatch: Dispatch<SelectAction> } | undefined\n>(undefined);\n\nexport const selectReducer = (\n  state: SelectState,\n  action: SelectAction,\n): SelectState => {\n  switch (action.type) {\n    case 'ADD': {\n      // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.\n      if (\n        state.selected === undefined &&\n        state.defaultValue === action.payload.value\n      ) {\n        return {\n          ...state,\n          selected: action.payload.value,\n          items: new Map(state.items).set(\n            action.payload.value,\n            action.payload.children,\n          ),\n        };\n      }\n      return {\n        ...state,\n        items: new Map(state.items).set(\n          action.payload.value,\n          action.payload.children,\n        ),\n      };\n    }\n    case 'REMOVE': {\n      const newMap = new Map(state.items);\n      newMap.delete(action.payload.value);\n      return { ...state, items: newMap };\n    }\n    case 'SELECT':\n      return { ...state, isActive: false, selected: action.payload.value };\n    case 'TOGGLE':\n      return { ...state, isActive: !state.isActive };\n  }\n};\n"],"mappings":"AAAA,SAAS,qBAAoD;AAgBtD,MAAM,gBAAgB,cAE3B,MAAS;AAEJ,MAAM,gBAAgB,CAC3B,OACA,WACgB;AAChB,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK,OAAO;AAEV,UACE,MAAM,aAAa,UACnB,MAAM,iBAAiB,OAAO,QAAQ,OACtC;AACA,eAAO;AAAA,UACL,GAAG;AAAA,UACH,UAAU,OAAO,QAAQ;AAAA,UACzB,OAAO,IAAI,IAAI,MAAM,KAAK,EAAE;AAAA,YAC1B,OAAO,QAAQ;AAAA,YACf,OAAO,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,OAAO,IAAI,IAAI,MAAM,KAAK,EAAE;AAAA,UAC1B,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,IACA,KAAK,UAAU;AACb,YAAM,SAAS,IAAI,IAAI,MAAM,KAAK;AAClC,aAAO,OAAO,OAAO,QAAQ,KAAK;AAClC,aAAO,EAAE,GAAG,OAAO,OAAO,OAAO;AAAA,IACnC;AAAA,IACA,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,QAAQ,MAAM;AAAA,IACrE,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,UAAU,CAAC,MAAM,SAAS;AAAA,EACjD;AACF;","names":[]}

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

@@ -1,9 +1,6 @@
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Select/SelectOption.css.ts
-import { styleWithLayer } from "#styleUtils.mjs";
-import { theme } from "#themes.mjs";
-var selectOption = styleWithLayer({
+import { styleWithLayer } from "#styleUtils";
+import { theme } from "#themes";
+const selectOption = styleWithLayer({
   padding: "0.75em 0.5em",
   transition: "background-color 0.2s ease",
   cursor: "default",

package/dist/components/Select/SelectOption.css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/SelectOption.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nexport const selectOption = styleWithLayer({\n  padding: '0.75em 0.5em',\n\n  transition: 'background-color 0.2s ease',\n\n  cursor: 'default',\n\n  ':hover': {\n    backgroundColor: `rgb(${theme.color.accent})`,\n  },\n});\n"],"mappings":";;;AAAA,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AAEf,IAAM,eAAe,eAAe;AAAA,EACzC,SAAS;AAAA,EAET,YAAY;AAAA,EAEZ,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,iBAAiB,OAAO,MAAM,MAAM,MAAM;AAAA,EAC5C;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/Select/SelectOption.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nexport const selectOption = styleWithLayer({\n  padding: '0.75em 0.5em',\n\n  transition: 'background-color 0.2s ease',\n\n  cursor: 'default',\n\n  ':hover': {\n    backgroundColor: `rgb(${theme.color.accent})`,\n  },\n});\n"],"mappings":"AAAA,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AAEf,MAAM,eAAe,eAAe;AAAA,EACzC,SAAS;AAAA,EAET,YAAY;AAAA,EAEZ,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,iBAAiB,OAAO,MAAM,MAAM,MAAM;AAAA,EAC5C;AACF,CAAC;","names":[]}

package/dist/components/Select/SelectOption.mjs

@@ -1,12 +1,9 @@
 "use client";
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Select/SelectOption.tsx
-import { useContext, useEffect } from "react";
-import { SelectContext } from "./SelectContext.mjs";
-import * as s from "./SelectOption.css.mjs";
 import { jsx } from "react/jsx-runtime";
-var SelectOption = ({ children, value }) => {
+import { useContext, useEffect } from "react";
+import { SelectContext } from "./SelectContext";
+import * as s from "./SelectOption.css";
+const SelectOption = ({ children, value }) => {
   const selectContext = useContext(SelectContext);
   if (!selectContext) {
     throw new Error("SelectOption must be rendered within a Select.");

package/dist/components/Select/SelectOption.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/SelectOption.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useEffect, type ReactNode } from 'react';\n\nimport { SelectContext } from './SelectContext';\nimport * as s from './SelectOption.css';\n\ninterface SelectOptionProps {\n  children: ReactNode;\n  value: string;\n}\n\nexport const SelectOption = ({ children, value }: SelectOptionProps) => {\n  const selectContext = useContext(SelectContext);\n\n  if (!selectContext) {\n    throw new Error('SelectOption must be rendered within a Select.');\n  }\n\n  const { dispatch } = selectContext;\n\n  useEffect(() => {\n    dispatch({ type: 'ADD', payload: { value, children } });\n\n    return () => {\n      dispatch({ type: 'REMOVE', payload: { value } });\n    };\n    // eslint-disable-next-line\n  }, [dispatch, value]);\n\n  const handleClick = () => {\n    dispatch({ type: 'SELECT', payload: { value } });\n  };\n\n  return (\n    <div className={s.selectOption} onClick={handleClick}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAEA,SAAS,YAAY,iBAAiC;AAEtD,SAAS,qBAAqB;AAC9B,YAAY,OAAO;AA8Bf;AAvBG,IAAM,eAAe,CAAC,EAAE,UAAU,MAAM,MAAyB;AACtE,QAAM,gBAAgB,WAAW,aAAa;AAE9C,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,QAAM,EAAE,SAAS,IAAI;AAErB,YAAU,MAAM;AACd,aAAS,EAAE,MAAM,OAAO,SAAS,EAAE,OAAO,SAAS,EAAE,CAAC;AAEtD,WAAO,MAAM;AACX,eAAS,EAAE,MAAM,UAAU,SAAS,EAAE,MAAM,EAAE,CAAC;AAAA,IACjD;AAAA,EAEF,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,QAAM,cAAc,MAAM;AACxB,aAAS,EAAE,MAAM,UAAU,SAAS,EAAE,MAAM,EAAE,CAAC;AAAA,EACjD;AAEA,SACE,oBAAC,SAAI,WAAa,gBAAc,SAAS,aACtC,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/Select/SelectOption.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useEffect, type ReactNode } from 'react';\n\nimport { SelectContext } from './SelectContext';\nimport * as s from './SelectOption.css';\n\ninterface SelectOptionProps {\n  children: ReactNode;\n  value: string;\n}\n\nexport const SelectOption = ({ children, value }: SelectOptionProps) => {\n  const selectContext = useContext(SelectContext);\n\n  if (!selectContext) {\n    throw new Error('SelectOption must be rendered within a Select.');\n  }\n\n  const { dispatch } = selectContext;\n\n  useEffect(() => {\n    dispatch({ type: 'ADD', payload: { value, children } });\n\n    return () => {\n      dispatch({ type: 'REMOVE', payload: { value } });\n    };\n    // eslint-disable-next-line\n  }, [dispatch, value]);\n\n  const handleClick = () => {\n    dispatch({ type: 'SELECT', payload: { value } });\n  };\n\n  return (\n    <div className={s.selectOption} onClick={handleClick}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";AAmCI;AAjCJ,SAAS,YAAY,iBAAiC;AAEtD,SAAS,qBAAqB;AAC9B,YAAY,OAAO;AAOZ,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,MAAyB;AACtE,QAAM,gBAAgB,WAAW,aAAa;AAE9C,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,QAAM,EAAE,SAAS,IAAI;AAErB,YAAU,MAAM;AACd,aAAS,EAAE,MAAM,OAAO,SAAS,EAAE,OAAO,SAAS,EAAE,CAAC;AAEtD,WAAO,MAAM;AACX,eAAS,EAAE,MAAM,UAAU,SAAS,EAAE,MAAM,EAAE,CAAC;AAAA,IACjD;AAAA,EAEF,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,QAAM,cAAc,MAAM;AACxB,aAAS,EAAE,MAAM,UAAU,SAAS,EAAE,MAAM,EAAE,CAAC;AAAA,EACjD;AAEA,SACE,oBAAC,SAAI,WAAW,EAAE,cAAc,SAAS,aACtC,UACH;AAEJ;","names":[]}

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

@@ -1,10 +1,7 @@
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Select/SelectOptionList.css.ts
 import { keyframes } from "@vanilla-extract/css";
-import { recipeWithLayer } from "#styleUtils.mjs";
-import { theme } from "#themes.mjs";
-var fadeIn = keyframes({
+import { recipeWithLayer } from "#styleUtils";
+import { theme } from "#themes";
+const fadeIn = keyframes({
   "0%": {
     transform: "scale(0.95)",
     opacity: 0
@@ -14,7 +11,7 @@ var fadeIn = keyframes({
     opacity: 1
   }
 });
-var container = recipeWithLayer({
+const container = recipeWithLayer({
   base: {
     overflowY: "auto",
     position: "absolute",

package/dist/components/Select/SelectOptionList.css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/SelectOptionList.css.ts"],"sourcesContent":["import { keyframes } from '@vanilla-extract/css';\n\nimport { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nconst fadeIn = keyframes({\n  '0%': {\n    transform: 'scale(0.95)',\n    opacity: 0,\n  },\n\n  '100%': {\n    transform: 'scale(1)',\n    opacity: 1,\n  },\n});\n\nexport const container = recipeWithLayer({\n  base: {\n    overflowY: 'auto',\n    position: 'absolute',\n    zIndex: '10',\n\n    width: '100%',\n    minWidth: 'max-content',\n    border: `1px solid rgb(${theme.color.border})`,\n    borderRadius: theme.borderRadius,\n    margin: '0.5rem 0',\n\n    backgroundColor: `rgb(${theme.color.background})`,\n\n    animation: `${fadeIn} 0.3s ease 1`,\n    transformOrigin: '0 0',\n\n    userSelect: 'none',\n\n    '::-webkit-scrollbar': {\n      width: '0.25rem',\n      height: '0.25rem',\n    },\n\n    '::-webkit-scrollbar-thumb': {\n      borderRadius: '0.5rem',\n\n      backgroundColor: `rgb(${theme.color['muted-foreground']})`,\n    },\n  },\n\n  variants: {\n    isVisible: {\n      true: {\n        display: 'block',\n      },\n      false: {\n        display: 'none',\n      },\n    },\n\n    isAbove: {\n      true: {\n        top: '100%',\n      },\n      false: {\n        bottom: '100%',\n      },\n    },\n  },\n});\n"],"mappings":";;;AAAA,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEtB,IAAM,SAAS,UAAU;AAAA,EACvB,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EAEA,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF,CAAC;AAEM,IAAM,YAAY,gBAAgB;AAAA,EACvC,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ,iBAAiB,MAAM,MAAM,MAAM;AAAA,IAC3C,cAAc,MAAM;AAAA,IACpB,QAAQ;AAAA,IAER,iBAAiB,OAAO,MAAM,MAAM,UAAU;AAAA,IAE9C,WAAW,GAAG,MAAM;AAAA,IACpB,iBAAiB;AAAA,IAEjB,YAAY;AAAA,IAEZ,uBAAuB;AAAA,MACrB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,6BAA6B;AAAA,MAC3B,cAAc;AAAA,MAEd,iBAAiB,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAAA,IACzD;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/Select/SelectOptionList.css.ts"],"sourcesContent":["import { keyframes } from '@vanilla-extract/css';\n\nimport { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nconst fadeIn = keyframes({\n  '0%': {\n    transform: 'scale(0.95)',\n    opacity: 0,\n  },\n\n  '100%': {\n    transform: 'scale(1)',\n    opacity: 1,\n  },\n});\n\nexport const container = recipeWithLayer({\n  base: {\n    overflowY: 'auto',\n    position: 'absolute',\n    zIndex: '10',\n\n    width: '100%',\n    minWidth: 'max-content',\n    border: `1px solid rgb(${theme.color.border})`,\n    borderRadius: theme.borderRadius,\n    margin: '0.5rem 0',\n\n    backgroundColor: `rgb(${theme.color.background})`,\n\n    animation: `${fadeIn} 0.3s ease 1`,\n    transformOrigin: '0 0',\n\n    userSelect: 'none',\n\n    '::-webkit-scrollbar': {\n      width: '0.25rem',\n      height: '0.25rem',\n    },\n\n    '::-webkit-scrollbar-thumb': {\n      borderRadius: '0.5rem',\n\n      backgroundColor: `rgb(${theme.color['muted-foreground']})`,\n    },\n  },\n\n  variants: {\n    isVisible: {\n      true: {\n        display: 'block',\n      },\n      false: {\n        display: 'none',\n      },\n    },\n\n    isAbove: {\n      true: {\n        top: '100%',\n      },\n      false: {\n        bottom: '100%',\n      },\n    },\n  },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEtB,MAAM,SAAS,UAAU;AAAA,EACvB,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EAEA,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF,CAAC;AAEM,MAAM,YAAY,gBAAgB;AAAA,EACvC,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ,iBAAiB,MAAM,MAAM,MAAM;AAAA,IAC3C,cAAc,MAAM;AAAA,IACpB,QAAQ;AAAA,IAER,iBAAiB,OAAO,MAAM,MAAM,UAAU;AAAA,IAE9C,WAAW,GAAG,MAAM;AAAA,IACpB,iBAAiB;AAAA,IAEjB,YAAY;AAAA,IAEZ,uBAAuB;AAAA,MACrB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,6BAA6B;AAAA,MAC3B,cAAc;AAAA,MAEd,iBAAiB,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAAA,IACzD;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/components/Select/SelectOptionList.mjs

@@ -1,13 +1,10 @@
-import "../../chunk-IEP6GGEX.mjs";
-
-// src/components/Select/SelectOptionList.tsx
+import { jsx } from "react/jsx-runtime";
 import { useContext, useMemo, useRef } from "react";
 import clsx from "clsx";
-import { sprinkles } from "#styles.mjs";
-import { SelectContext } from "./SelectContext.mjs";
-import * as s from "./SelectOptionList.css.mjs";
-import { jsx } from "react/jsx-runtime";
-var SelectOptionList = ({ children }) => {
+import { sprinkles } from "#styles";
+import { SelectContext } from "./SelectContext";
+import * as s from "./SelectOptionList.css";
+const SelectOptionList = ({ children }) => {
   const selectContext = useContext(SelectContext);
   const containerRef = useRef(null);
   if (!selectContext) {
@@ -15,15 +12,15 @@ var SelectOptionList = ({ children }) => {
   }
   const { state } = selectContext;
   const isAbove = useMemo(() => {
-    const container2 = containerRef.current;
+    const container = containerRef.current;
     const parent = state.containerRef.current;
-    if (!state.isActive || !container2 || !parent) {
+    if (!state.isActive || !container || !parent) {
       return;
     }
     const parentRect = parent.getBoundingClientRect();
-    container2.style.display = "block";
-    const containerRect = container2.getBoundingClientRect();
-    container2.style.display = "";
+    container.style.display = "block";
+    const containerRect = container.getBoundingClientRect();
+    container.style.display = "";
     if (containerRect.top + containerRect.height < window.innerHeight) {
       return true;
     }