@tipp/ui 2.4.0 → 2.6.0

package/dist/molecules/autocomplete-textfield.cjs

@@ -52,8 +52,8 @@ __export(autocomplete_textfield_exports, {
   AutocompleteTextfield: () => AutocompleteTextfield
 });
 module.exports = __toCommonJS(autocomplete_textfield_exports);
-var import_react4 = require("react");
-var import_themes4 = require("@radix-ui/themes");
+var import_react5 = require("react");
+var import_themes5 = require("@radix-ui/themes");
 
 // src/atoms/text-field.tsx
 var import_themes = require("@radix-ui/themes");
@@ -82,40 +82,92 @@ Root.displayName = "TextField.Root";
 var TextField = { Root, Slot: import_themes.TextField.Slot };
 
 // src/atoms/dropdown-menu.tsx
-var import_themes2 = require("@radix-ui/themes");
+var import_themes3 = require("@radix-ui/themes");
+var import_react3 = require("react");
+
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
+// src/theme/theme-provider.tsx
 var import_react2 = require("react");
+var import_themes2 = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Content = (0, import_react2.forwardRef)((props, ref) => {
-  const _a = props, { isNavigation, className } = _a, rest = __objRest(_a, ["isNavigation", "className"]);
-  const contentClassName = (0, import_react2.useMemo)(() => {
+var ThemeAccentContext = (0, import_react2.createContext)(void 0);
+
+// src/atoms/dropdown-menu.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DropdownMenuContext = (0, import_react3.createContext)({});
+var Content = (0, import_react3.forwardRef)((props, ref) => {
+  const _a = props, { isNavigation, className, color } = _a, rest = __objRest(_a, ["isNavigation", "className", "color"]);
+  const { color: contextColor } = (0, import_react3.useContext)(DropdownMenuContext);
+  const themeAccent = (0, import_react3.useContext)(ThemeAccentContext);
+  const { color: radixColor, className: colorClassName } = (0, import_react3.useMemo)(
+    () => {
+      var _a2;
+      return resolveColor((_a2 = color != null ? color : contextColor) != null ? _a2 : themeAccent);
+    },
+    [color, contextColor, themeAccent]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  const contentClassName = (0, import_react3.useMemo)(() => {
     const cls = isNavigation ? "dropdown-navigation" : "";
-    return [cls, className].join(" ");
-  }, [isNavigation, className]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_themes2.DropdownMenu.Content,
+    return [cls, colorClassName, className].filter(Boolean).join(" ");
+  }, [isNavigation, colorClassName, className]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_themes3.DropdownMenu.Content,
     __spreadProps(__spreadValues({
       ref
     }, rest), {
-      className: contentClassName
+      className: contentClassName,
+      color: appliedColor
     })
   );
 });
 Content.displayName = "DropdownMenu.Content";
-var Trigger = (0, import_react2.forwardRef)(
+var Trigger = (0, import_react3.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild: _asChild } = _b, props = __objRest(_b, ["asChild"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.DropdownMenu.Trigger, __spreadValues({ ref }, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.DropdownMenu.Trigger, __spreadValues({ ref }, props));
   }
 );
 Trigger.displayName = "DropdownMenu.Trigger";
-var DropdownMenu = __spreadProps(__spreadValues({}, import_themes2.DropdownMenu), {
+function Root2(props) {
+  const _a = props, { color } = _a, rest = __objRest(_a, ["color"]);
+  const value = (0, import_react3.useMemo)(() => ({ color }), [color]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.DropdownMenu.Root, __spreadValues({}, rest)) });
+}
+Root2.displayName = "DropdownMenu.Root";
+var DropdownMenu = __spreadProps(__spreadValues({}, import_themes3.DropdownMenu), {
+  Root: Root2,
   Content,
   Trigger
 });
 
 // src/atoms/typo.tsx
-var import_themes3 = require("@radix-ui/themes");
-var import_react3 = require("react");
+var import_themes4 = require("@radix-ui/themes");
+var import_clsx2 = require("clsx");
+var import_react4 = require("react");
 
 // src/utils/map-with-responsive.ts
 var mapWithResponsive = (args) => {
@@ -136,11 +188,15 @@ var mapWithResponsive = (args) => {
 };
 
 // src/atoms/typo.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Typo = (0, import_react3.forwardRef)(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Typo = (0, import_react4.forwardRef)(
   (props, ref) => {
-    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
-    const radixSize = (0, import_react3.useMemo)(() => {
+    const _a = props, { size, variant, children, color, className } = _a, rest = __objRest(_a, ["size", "variant", "children", "color", "className"]);
+    const { color: radixColor, className: colorClassName } = (0, import_react4.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
+    const radixSize = (0, import_react4.useMemo)(() => {
       if (size !== void 0) return size;
       if (variant === void 0) return "2";
       return mapWithResponsive({
@@ -158,14 +214,23 @@ var Typo = (0, import_react3.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_themes4.Text,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx2.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize,
+        children
+      })
+    );
   }
 );
 Typo.displayName = "Typo";
 
 // src/molecules/autocomplete-textfield.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var AutocompleteTextfield = (0, import_react4.forwardRef)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var AutocompleteTextfield = (0, import_react5.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       options,
@@ -191,18 +256,18 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
       "error"
     ]);
     const isControlled = externalValue !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react4.useState)("");
+    const [internalValue, setInternalValue] = (0, import_react5.useState)("");
     const inputValue = isControlled ? externalValue : internalValue;
-    const [open, setOpen] = (0, import_react4.useState)(false);
-    const [highlightedIndex, setHighlightedIndex] = (0, import_react4.useState)(-1);
-    const inputRef = (0, import_react4.useRef)(null);
-    const listRef = (0, import_react4.useRef)(null);
-    const listboxId = (0, import_react4.useId)();
-    const justSelectedRef = (0, import_react4.useRef)(false);
+    const [open, setOpen] = (0, import_react5.useState)(false);
+    const [highlightedIndex, setHighlightedIndex] = (0, import_react5.useState)(-1);
+    const inputRef = (0, import_react5.useRef)(null);
+    const listRef = (0, import_react5.useRef)(null);
+    const listboxId = (0, import_react5.useId)();
+    const justSelectedRef = (0, import_react5.useRef)(false);
     const filtered = options.filter(
       (opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())
     ).slice(0, maxItems);
-    const handleInputChange = (0, import_react4.useCallback)(
+    const handleInputChange = (0, import_react5.useCallback)(
       (e) => {
         const next = e.target.value;
         if (!isControlled) setInternalValue(next);
@@ -213,7 +278,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
       },
       [isControlled, onChange, options, maxItems, emptyMessage]
     );
-    const handleSelect = (0, import_react4.useCallback)(
+    const handleSelect = (0, import_react5.useCallback)(
       (option) => {
         var _a2;
         if (!isControlled) setInternalValue(option.label);
@@ -226,7 +291,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
       },
       [isControlled, onChange, onSelect]
     );
-    const handleFocus = (0, import_react4.useCallback)(() => {
+    const handleFocus = (0, import_react5.useCallback)(() => {
       if (justSelectedRef.current) {
         justSelectedRef.current = false;
         return;
@@ -234,7 +299,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
       const currentFiltered = options.filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())).slice(0, maxItems);
       setOpen(currentFiltered.length > 0 || emptyMessage !== null);
     }, [options, inputValue, maxItems, emptyMessage]);
-    const handleBlur = (0, import_react4.useCallback)((e) => {
+    const handleBlur = (0, import_react5.useCallback)((e) => {
       var _a2, _b2;
       if (e.relatedTarget && ((_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.contains(e.relatedTarget))) {
         return;
@@ -242,7 +307,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
       setOpen(false);
       setHighlightedIndex(-1);
     }, []);
-    const handleKeyDown = (0, import_react4.useCallback)(
+    const handleKeyDown = (0, import_react5.useCallback)(
       (e) => {
         if (!open) {
           if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -285,13 +350,13 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
       },
       [open, filtered, highlightedIndex, handleSelect]
     );
-    (0, import_react4.useEffect)(() => {
+    (0, import_react5.useEffect)(() => {
       if (!listRef.current || highlightedIndex < 0) return;
       const item = listRef.current.children[highlightedIndex];
       item.scrollIntoView({ block: "nearest" });
     }, [highlightedIndex]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes4.Box, { position: "relative", style: { width: "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_themes5.Box, { position: "relative", style: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         TextField.Root,
         __spreadProps(__spreadValues({
           "aria-activedescendant": open && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0,
@@ -317,12 +382,12 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
           value: inputValue
         }, rest), {
           children: [
-            slotLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextField.Slot, { side: "left", children: slotLeft }),
-            slotRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextField.Slot, { side: "right", children: slotRight })
+            slotLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextField.Slot, { side: "left", children: slotLeft }),
+            slotRight && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextField.Slot, { side: "right", children: slotRight })
           ]
         })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         DropdownMenu.Root,
         {
           modal: false,
@@ -334,7 +399,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
           },
           open,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "span",
               {
                 "aria-hidden": "true",
@@ -349,7 +414,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
                 }
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               DropdownMenu.Content,
               {
                 align: "start",
@@ -366,7 +431,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
                   padding: 0,
                   width: "var(--radix-dropdown-menu-trigger-width)"
                 },
-                children: filtered.length === 0 && emptyMessage !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Box, { px: "2", py: "2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, { color: "gray", children: emptyMessage }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                children: filtered.length === 0 && emptyMessage !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes5.Box, { px: "2", py: "2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Typo, { color: "gray", children: emptyMessage }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "ul",
                   {
                     id: listboxId,
@@ -375,7 +440,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
                     style: { listStyle: "none", margin: 0, padding: 0 },
                     children: filtered.map((option, index) => {
                       const isHighlighted = index === highlightedIndex;
-                      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "li",
                         {
                           "aria-selected": isHighlighted,
@@ -394,7 +459,7 @@ var AutocompleteTextfield = (0, import_react4.forwardRef)(
                             backgroundColor: isHighlighted ? "var(--accent-3)" : "transparent",
                             transition: "background-color 80ms"
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, { variant: "body", children: option.label })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Typo, { variant: "body", children: option.label })
                         },
                         option.value
                       );

package/dist/molecules/autocomplete-textfield.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/molecules/autocomplete-textfield.tsx","../../src/atoms/text-field.tsx","../../src/atoms/dropdown-menu.tsx","../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { Box } from '@radix-ui/themes';\nimport { TextField, type RootProps as TextFieldRootProps } from '../atoms/text-field';\nimport { DropdownMenu } from '../atoms/dropdown-menu';\nimport { Typo } from '../atoms/typo';\n\nexport interface AutocompleteOption {\n  label: string;\n  value: string;\n}\n\nexport interface AutocompleteTextfieldProps\n  extends Omit<TextFieldRootProps, 'value' | 'onChange' | 'onSelect'> {\n  options: AutocompleteOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (option: AutocompleteOption) => void;\n  placeholder?: string;\n  /** 빈 결과일 때 표시할 메시지. null이면 빈 결과 시 드롭다운을 표시하지 않음 */\n  emptyMessage?: string | null;\n  /** 최대 표시 항목 수 (기본값: 10) */\n  maxItems?: number;\n  /** TextField 왼쪽 슬롯 (아이콘 등) */\n  slotLeft?: React.ReactNode;\n  /** TextField 오른쪽 슬롯 (아이콘 등) */\n  slotRight?: React.ReactNode;\n}\n\nexport const AutocompleteTextfield = forwardRef<\n  HTMLInputElement,\n  AutocompleteTextfieldProps\n>(\n  (\n    {\n      options,\n      value: externalValue,\n      onChange,\n      onSelect,\n      placeholder,\n      emptyMessage = '검색 결과가 없습니다.',\n      maxItems = 10,\n      slotLeft,\n      slotRight,\n      error,\n      ...rest\n    },\n    ref\n  ): React.ReactElement => {\n    const isControlled = externalValue !== undefined;\n    const [internalValue, setInternalValue] = useState('');\n    const inputValue = isControlled ? externalValue : internalValue;\n\n    const [open, setOpen] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const listboxId = useId();\n    const justSelectedRef = useRef(false);\n\n    const filtered = options\n      .filter((opt: AutocompleteOption) =>\n        opt.label.toLowerCase().includes(inputValue.toLowerCase())\n      )\n      .slice(0, maxItems);\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const next = e.target.value;\n        if (!isControlled) setInternalValue(next);\n        onChange?.(next);\n        const nextFiltered = options\n          .filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase()))\n          .slice(0, maxItems);\n        setOpen(nextFiltered.length > 0 || emptyMessage !== null);\n        setHighlightedIndex(-1);\n      },\n      [isControlled, onChange, options, maxItems, emptyMessage]\n    );\n\n    const handleSelect = useCallback(\n      (option: AutocompleteOption) => {\n        if (!isControlled) setInternalValue(option.label);\n        onChange?.(option.label);\n        onSelect?.(option);\n        setOpen(false);\n        setHighlightedIndex(-1);\n        justSelectedRef.current = true;\n        inputRef.current?.focus();\n      },\n      [isControlled, onChange, onSelect]\n    );\n\n    const handleFocus = useCallback(() => {\n      if (justSelectedRef.current) {\n        justSelectedRef.current = false;\n        return;\n      }\n      const currentFiltered = options\n        .filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase()))\n        .slice(0, maxItems);\n      setOpen(currentFiltered.length > 0 || emptyMessage !== null);\n    }, [options, inputValue, maxItems, emptyMessage]);\n\n    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      // 포커스가 dropdown content 내부로 이동한 경우 닫지 않음\n      if (e.relatedTarget && inputRef.current?.parentElement?.contains(e.relatedTarget as Node)) {\n        return;\n      }\n      setOpen(false);\n      setHighlightedIndex(-1);\n    }, []);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!open) {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            setOpen(true);\n            setHighlightedIndex(0);\n            e.preventDefault();\n          }\n          return;\n        }\n\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev < filtered.length - 1 ? prev + 1 : 0\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev > 0 ? prev - 1 : filtered.length - 1\n            );\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex]);\n            }\n            break;\n          case 'Escape':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          case 'Tab':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          default:\n            break;\n        }\n      },\n      [open, filtered, highlightedIndex, handleSelect]\n    );\n\n    // 하이라이트 항목을 리스트 뷰에 스크롤\n    useEffect(() => {\n      if (!listRef.current || highlightedIndex < 0) return;\n      const item = listRef.current.children[highlightedIndex];\n      (item as HTMLElement).scrollIntoView({ block: 'nearest' });\n    }, [highlightedIndex]);\n\n    return (\n      <Box position=\"relative\" style={{ width: '100%' }}>\n        <TextField.Root\n          aria-activedescendant={\n            open && highlightedIndex >= 0\n              ? `${listboxId}-option-${highlightedIndex}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={open ? listboxId : undefined}\n          aria-expanded={open}\n          error={error}\n          onBlur={handleBlur}\n          onChange={handleInputChange}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n              node;\n            if (typeof ref === 'function') {\n              ref(node);\n            } else if (ref) {\n              (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n                node;\n            }\n          }}\n          role=\"combobox\"\n          style={{ width: '100%' }}\n          value={inputValue}\n          {...rest}\n        >\n          {slotLeft && <TextField.Slot side=\"left\">{slotLeft}</TextField.Slot>}\n          {slotRight && <TextField.Slot side=\"right\">{slotRight}</TextField.Slot>}\n        </TextField.Root>\n\n        {/* DropdownMenu.Trigger는 포지셔닝 앵커 전용으로 사용 (비대화형) */}\n        <DropdownMenu.Root\n          modal={false}\n          onOpenChange={(nextOpen) => {\n            if (!nextOpen && document.activeElement !== inputRef.current) {\n              setOpen(false);\n              setHighlightedIndex(-1);\n            }\n          }}\n          open={open}\n        >\n          <DropdownMenu.Trigger asChild>\n            <span\n              aria-hidden=\"true\"\n              style={{\n                bottom: 0,\n                height: 0,\n                left: 0,\n                opacity: 0,\n                pointerEvents: 'none',\n                position: 'absolute',\n                width: '100%',\n              }}\n            />\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Content\n            align=\"start\"\n            onCloseAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            onOpenAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            sideOffset={4}\n            style={{\n              maxHeight: 240,\n              overflowY: 'auto',\n              padding: 0,\n              width: 'var(--radix-dropdown-menu-trigger-width)',\n            }}\n          >\n            {filtered.length === 0 && emptyMessage !== null ? (\n              <Box px=\"2\" py=\"2\">\n                <Typo color=\"gray\">\n                  {emptyMessage}\n                </Typo>\n              </Box>\n            ) : (\n              <ul\n                id={listboxId}\n                ref={listRef}\n                role=\"listbox\"\n                style={{ listStyle: 'none', margin: 0, padding: 0 }}\n              >\n                {filtered.map((option, index) => {\n                  const isHighlighted = index === highlightedIndex;\n                  return (\n                    <li\n                      aria-selected={isHighlighted}\n                      id={`${listboxId}-option-${index}`}\n                      key={option.value}\n                      onMouseEnter={() => {\n                        setHighlightedIndex(index);\n                      }}\n                      onPointerDown={(e) => {\n                        // blur 전에 선택되도록 pointerdown 사용\n                        e.preventDefault();\n                        handleSelect(option);\n                      }}\n                      role=\"option\"\n                      style={{\n                        padding: 'var(--spacing-4) var(--spacing-6)',\n                        cursor: 'pointer',\n                        backgroundColor: isHighlighted\n                          ? 'var(--accent-3)'\n                          : 'transparent',\n                        transition: 'background-color 80ms',\n                      }}\n                    >\n                      <Typo variant=\"body\">{option.label}</Typo>\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </Box>\n    );\n  }\n);\n\nAutocompleteTextfield.displayName = 'AutocompleteTextfield';\n","import { TextField as RTextField } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\ntype RSlotProps = RTextField.SlotProps;\n\ntype RootProps = RTextField.RootProps & { error?: boolean };\n\nconst Root = forwardRef<\n  HTMLInputElement,\n  RTextField.RootProps & { error?: boolean }\n>((props, ref) => {\n  const { error, style, className, ...rest } = props;\n\n  const fieldStyle = useMemo(() => {\n    if (!error) return style;\n    const errorStyle = {\n      boxShadow: 'inset 0 0 0 var(--text-field-border-width) var(--error-11)',\n    };\n\n    return { ...(style || {}), ...errorStyle };\n  }, [error, style]);\n\n  const classNameStr = error ? `error ${className}` : className;\n  return (\n    <RTextField.Root\n      className={classNameStr}\n      ref={ref}\n      style={fieldStyle}\n      {...rest}\n    />\n  );\n});\n\nRoot.displayName = 'TextField.Root';\n\nconst TextField = { Root, Slot: RTextField.Slot };\n\nexport { TextField };\nexport type { RootProps, RSlotProps as SlotProps };\n","import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\ntype ContentProps = RadixDropdownMenu.ContentProps & {\n  isNavigation?: boolean;\n  onOpenAutoFocus?: (event: Event) => void;\n};\n\nconst Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {\n  const { isNavigation, className, ...rest } = props;\n  const contentClassName = useMemo(() => {\n    const cls = isNavigation ? 'dropdown-navigation' : '';\n    return [cls, className].join(' ');\n  }, [isNavigation, className]);\n\n  return (\n    <RadixDropdownMenu.Content\n      ref={ref}\n      {...rest}\n      className={contentClassName}\n    />\n  );\n});\n\nContent.displayName = 'DropdownMenu.Content';\n\n/** @radix-ui/themes의 DropdownMenu.Trigger는 asChild 타입이 누락되어 있어 별도로 확장 */\ntype TriggerProps = RadixDropdownMenu.TriggerProps & { asChild?: boolean };\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>(\n  ({ asChild: _asChild, ...props }, ref) => (\n    <RadixDropdownMenu.Trigger ref={ref} {...props} />\n  ),\n);\n\nTrigger.displayName = 'DropdownMenu.Trigger';\n\nexport const DropdownMenu = {\n  ...RadixDropdownMenu,\n  Content,\n  Trigger,\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactNode => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n\n      if (variant === undefined) return '2';\n\n      return mapWithResponsive({\n        value: variant,\n        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n          switch (variantValue) {\n            case 'caption':\n              return '1';\n            case 'subtitle':\n              return '3';\n            case 'body':\n            default:\n              return '2';\n          }\n        },\n      });\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n"],"mappings":"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","names":["import_react","import_themes","RTextField","import_themes","import_react","import_jsx_runtime","RadixDropdownMenu","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","_a","_b"]}
+{"version":3,"sources":["../../src/molecules/autocomplete-textfield.tsx","../../src/atoms/text-field.tsx","../../src/atoms/dropdown-menu.tsx","../../src/utils/resolve-color.ts","../../src/theme/theme-provider.tsx","../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { Box } from '@radix-ui/themes';\nimport { TextField, type RootProps as TextFieldRootProps } from '../atoms/text-field';\nimport { DropdownMenu } from '../atoms/dropdown-menu';\nimport { Typo } from '../atoms/typo';\n\nexport interface AutocompleteOption {\n  label: string;\n  value: string;\n}\n\nexport interface AutocompleteTextfieldProps\n  extends Omit<TextFieldRootProps, 'value' | 'onChange' | 'onSelect'> {\n  options: AutocompleteOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (option: AutocompleteOption) => void;\n  placeholder?: string;\n  /** 빈 결과일 때 표시할 메시지. null이면 빈 결과 시 드롭다운을 표시하지 않음 */\n  emptyMessage?: string | null;\n  /** 최대 표시 항목 수 (기본값: 10) */\n  maxItems?: number;\n  /** TextField 왼쪽 슬롯 (아이콘 등) */\n  slotLeft?: React.ReactNode;\n  /** TextField 오른쪽 슬롯 (아이콘 등) */\n  slotRight?: React.ReactNode;\n}\n\nexport const AutocompleteTextfield = forwardRef<\n  HTMLInputElement,\n  AutocompleteTextfieldProps\n>(\n  (\n    {\n      options,\n      value: externalValue,\n      onChange,\n      onSelect,\n      placeholder,\n      emptyMessage = '검색 결과가 없습니다.',\n      maxItems = 10,\n      slotLeft,\n      slotRight,\n      error,\n      ...rest\n    },\n    ref\n  ): React.ReactElement => {\n    const isControlled = externalValue !== undefined;\n    const [internalValue, setInternalValue] = useState('');\n    const inputValue = isControlled ? externalValue : internalValue;\n\n    const [open, setOpen] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const listboxId = useId();\n    const justSelectedRef = useRef(false);\n\n    const filtered = options\n      .filter((opt: AutocompleteOption) =>\n        opt.label.toLowerCase().includes(inputValue.toLowerCase())\n      )\n      .slice(0, maxItems);\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const next = e.target.value;\n        if (!isControlled) setInternalValue(next);\n        onChange?.(next);\n        const nextFiltered = options\n          .filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase()))\n          .slice(0, maxItems);\n        setOpen(nextFiltered.length > 0 || emptyMessage !== null);\n        setHighlightedIndex(-1);\n      },\n      [isControlled, onChange, options, maxItems, emptyMessage]\n    );\n\n    const handleSelect = useCallback(\n      (option: AutocompleteOption) => {\n        if (!isControlled) setInternalValue(option.label);\n        onChange?.(option.label);\n        onSelect?.(option);\n        setOpen(false);\n        setHighlightedIndex(-1);\n        justSelectedRef.current = true;\n        inputRef.current?.focus();\n      },\n      [isControlled, onChange, onSelect]\n    );\n\n    const handleFocus = useCallback(() => {\n      if (justSelectedRef.current) {\n        justSelectedRef.current = false;\n        return;\n      }\n      const currentFiltered = options\n        .filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase()))\n        .slice(0, maxItems);\n      setOpen(currentFiltered.length > 0 || emptyMessage !== null);\n    }, [options, inputValue, maxItems, emptyMessage]);\n\n    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      // 포커스가 dropdown content 내부로 이동한 경우 닫지 않음\n      if (e.relatedTarget && inputRef.current?.parentElement?.contains(e.relatedTarget as Node)) {\n        return;\n      }\n      setOpen(false);\n      setHighlightedIndex(-1);\n    }, []);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!open) {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            setOpen(true);\n            setHighlightedIndex(0);\n            e.preventDefault();\n          }\n          return;\n        }\n\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev < filtered.length - 1 ? prev + 1 : 0\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev > 0 ? prev - 1 : filtered.length - 1\n            );\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex]);\n            }\n            break;\n          case 'Escape':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          case 'Tab':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          default:\n            break;\n        }\n      },\n      [open, filtered, highlightedIndex, handleSelect]\n    );\n\n    // 하이라이트 항목을 리스트 뷰에 스크롤\n    useEffect(() => {\n      if (!listRef.current || highlightedIndex < 0) return;\n      const item = listRef.current.children[highlightedIndex];\n      (item as HTMLElement).scrollIntoView({ block: 'nearest' });\n    }, [highlightedIndex]);\n\n    return (\n      <Box position=\"relative\" style={{ width: '100%' }}>\n        <TextField.Root\n          aria-activedescendant={\n            open && highlightedIndex >= 0\n              ? `${listboxId}-option-${highlightedIndex}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={open ? listboxId : undefined}\n          aria-expanded={open}\n          error={error}\n          onBlur={handleBlur}\n          onChange={handleInputChange}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n              node;\n            if (typeof ref === 'function') {\n              ref(node);\n            } else if (ref) {\n              (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n                node;\n            }\n          }}\n          role=\"combobox\"\n          style={{ width: '100%' }}\n          value={inputValue}\n          {...rest}\n        >\n          {slotLeft && <TextField.Slot side=\"left\">{slotLeft}</TextField.Slot>}\n          {slotRight && <TextField.Slot side=\"right\">{slotRight}</TextField.Slot>}\n        </TextField.Root>\n\n        {/* DropdownMenu.Trigger는 포지셔닝 앵커 전용으로 사용 (비대화형) */}\n        <DropdownMenu.Root\n          modal={false}\n          onOpenChange={(nextOpen) => {\n            if (!nextOpen && document.activeElement !== inputRef.current) {\n              setOpen(false);\n              setHighlightedIndex(-1);\n            }\n          }}\n          open={open}\n        >\n          <DropdownMenu.Trigger asChild>\n            <span\n              aria-hidden=\"true\"\n              style={{\n                bottom: 0,\n                height: 0,\n                left: 0,\n                opacity: 0,\n                pointerEvents: 'none',\n                position: 'absolute',\n                width: '100%',\n              }}\n            />\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Content\n            align=\"start\"\n            onCloseAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            onOpenAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            sideOffset={4}\n            style={{\n              maxHeight: 240,\n              overflowY: 'auto',\n              padding: 0,\n              width: 'var(--radix-dropdown-menu-trigger-width)',\n            }}\n          >\n            {filtered.length === 0 && emptyMessage !== null ? (\n              <Box px=\"2\" py=\"2\">\n                <Typo color=\"gray\">\n                  {emptyMessage}\n                </Typo>\n              </Box>\n            ) : (\n              <ul\n                id={listboxId}\n                ref={listRef}\n                role=\"listbox\"\n                style={{ listStyle: 'none', margin: 0, padding: 0 }}\n              >\n                {filtered.map((option, index) => {\n                  const isHighlighted = index === highlightedIndex;\n                  return (\n                    <li\n                      aria-selected={isHighlighted}\n                      id={`${listboxId}-option-${index}`}\n                      key={option.value}\n                      onMouseEnter={() => {\n                        setHighlightedIndex(index);\n                      }}\n                      onPointerDown={(e) => {\n                        // blur 전에 선택되도록 pointerdown 사용\n                        e.preventDefault();\n                        handleSelect(option);\n                      }}\n                      role=\"option\"\n                      style={{\n                        padding: 'var(--spacing-4) var(--spacing-6)',\n                        cursor: 'pointer',\n                        backgroundColor: isHighlighted\n                          ? 'var(--accent-3)'\n                          : 'transparent',\n                        transition: 'background-color 80ms',\n                      }}\n                    >\n                      <Typo variant=\"body\">{option.label}</Typo>\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </Box>\n    );\n  }\n);\n\nAutocompleteTextfield.displayName = 'AutocompleteTextfield';\n","import { TextField as RTextField } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\ntype RSlotProps = RTextField.SlotProps;\n\ntype RootProps = RTextField.RootProps & { error?: boolean };\n\nconst Root = forwardRef<\n  HTMLInputElement,\n  RTextField.RootProps & { error?: boolean }\n>((props, ref) => {\n  const { error, style, className, ...rest } = props;\n\n  const fieldStyle = useMemo(() => {\n    if (!error) return style;\n    const errorStyle = {\n      boxShadow: 'inset 0 0 0 var(--text-field-border-width) var(--error-11)',\n    };\n\n    return { ...(style || {}), ...errorStyle };\n  }, [error, style]);\n\n  const classNameStr = error ? `error ${className}` : className;\n  return (\n    <RTextField.Root\n      className={classNameStr}\n      ref={ref}\n      style={fieldStyle}\n      {...rest}\n    />\n  );\n});\n\nRoot.displayName = 'TextField.Root';\n\nconst TextField = { Root, Slot: RTextField.Slot };\n\nexport { TextField };\nexport type { RootProps, RSlotProps as SlotProps };\n","import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';\nimport { createContext, forwardRef, useContext, useMemo } from 'react';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\nimport { ThemeAccentContext } from '../theme/theme-provider';\n\nconst DropdownMenuContext = createContext<{ color?: UiColor }>({});\n\ntype ContentProps = DistributiveOmit<\n  RadixDropdownMenu.ContentProps,\n  'color'\n> & {\n  isNavigation?: boolean;\n  onOpenAutoFocus?: (event: Event) => void;\n  color?: UiColor;\n};\n\nconst Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {\n  const { isNavigation, className, color, ...rest } = props;\n  const { color: contextColor } = useContext(DropdownMenuContext);\n  const themeAccent = useContext(ThemeAccentContext);\n\n  // Content는 Portal로 렌더돼 theme의 className override를 못 받으므로, per-instance/Root color가\n  // 없으면 theme custom accent(black)를 fallback으로 적용해 Portal 안에서도 black을 유지한다.\n  const { color: radixColor, className: colorClassName } = useMemo(\n    () => resolveColor(color ?? contextColor ?? themeAccent),\n    [color, contextColor, themeAccent],\n  );\n\n  // custom color(black)는 className override만 사용 — fallback color를 함께 넘기면 자식 Item이\n  // 자기 data-accent-color로 gray를 다시 적용해 override를 덮는다.\n  const appliedColor = colorClassName ? undefined : radixColor;\n\n  const contentClassName = useMemo(() => {\n    const cls = isNavigation ? 'dropdown-navigation' : '';\n    return [cls, colorClassName, className].filter(Boolean).join(' ');\n  }, [isNavigation, colorClassName, className]);\n\n  return (\n    <RadixDropdownMenu.Content\n      ref={ref}\n      {...rest}\n      className={contentClassName}\n      color={appliedColor}\n    />\n  );\n});\n\nContent.displayName = 'DropdownMenu.Content';\n\n// @radix-ui/themes의 DropdownMenu.Trigger는 asChild 타입이 누락되어 있어 별도로 확장\ntype TriggerProps = RadixDropdownMenu.TriggerProps & { asChild?: boolean };\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>(\n  ({ asChild: _asChild, ...props }, ref) => (\n    <RadixDropdownMenu.Trigger ref={ref} {...props} />\n  ),\n);\n\nTrigger.displayName = 'DropdownMenu.Trigger';\n\ntype RootProps = RadixDropdownMenu.RootProps & {\n  /** Content에 일괄 적용할 color. Content에서 color prop으로 개별 override 가능. */\n  color?: UiColor;\n};\n\nfunction Root(props: RootProps): React.ReactNode {\n  const { color, ...rest } = props;\n\n  const value = useMemo(() => ({ color }), [color]);\n\n  return (\n    <DropdownMenuContext.Provider value={value}>\n      <RadixDropdownMenu.Root {...rest} />\n    </DropdownMenuContext.Provider>\n  );\n}\n\nRoot.displayName = 'DropdownMenu.Root';\n\nexport const DropdownMenu = {\n  ...RadixDropdownMenu,\n  Root,\n  Content,\n  Trigger,\n};\n","import type { BadgeProps as RadixBadgeProps } from '@radix-ui/themes';\n\n/**\n * Radix Themes가 제공하는 accent color union (gray, red, blue, ...).\n * 모든 color 지원 컴포넌트가 동일한 union을 공유하므로 Badge에서 파생한다.\n */\nexport type RadixColor = NonNullable<RadixBadgeProps['color']>;\n\n/** TIPP 시맨틱 color 별칭. */\nexport type SemanticColor = 'error' | 'accent' | 'neutral' | 'success';\n\n/**\n * Radix accent에 대응이 없어 CSS accent override로 처리하는 커스텀 color.\n * (예: black — `style/black.scss`의 `.tipp-accent-black` 참고)\n */\nexport type CustomColor = 'black';\n\n/** color 지원 컴포넌트가 노출하는 통합 color 타입. */\nexport type UiColor = RadixColor | SemanticColor | CustomColor;\n\n/**\n * union 각 멤버에 분배되는 Omit.\n * Radix의 polymorphic 컴포넌트 props(Text/Heading/Link 등 `as`로 분기되는 union)에서\n * 키를 제거할 때 일반 Omit은 union을 단일 객체로 합쳐 `as` 분기를 무너뜨리므로 이 타입을 쓴다.\n */\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nconst SEMANTIC_COLOR_MAP: Record<SemanticColor, RadixColor | undefined> = {\n  error: 'red',\n  neutral: 'gray',\n  success: 'green',\n  accent: undefined,\n};\n\ninterface CustomColorConfig {\n  /**\n   * accent override를 적용할 className.\n   */\n  className: string;\n  /**\n   * Radix에 넘길 fallback color.\n   * Text/Heading/Link 등은 `color` prop이 있어야 `data-accent-color`가 붙어\n   * `--accent-*`를 참조하므로, 유효한 Radix color를 함께 넘긴 뒤 className으로\n   * `--accent-*`를 덮어쓴다. (Badge/Button은 prop 없이도 accent 기반이라 무해)\n   */\n  fallbackColor: RadixColor;\n}\n\nconst CUSTOM_COLOR_MAP: Record<CustomColor, CustomColorConfig> = {\n  black: { className: 'tipp-accent-black', fallbackColor: 'gray' },\n};\n\nconst isSemanticColor = (color?: UiColor): color is SemanticColor =>\n  color !== undefined && color in SEMANTIC_COLOR_MAP;\n\nconst isCustomColor = (color?: UiColor): color is CustomColor =>\n  color !== undefined && color in CUSTOM_COLOR_MAP;\n\nexport interface ResolvedColor {\n  /** Radix 컴포넌트의 `color` prop에 그대로 전달할 값. custom color면 undefined. */\n  color?: RadixColor;\n  /** accent override를 적용하기 위해 요소에 붙일 className. */\n  className?: string;\n}\n\n/**\n * 통합 color 입력을 Radix color prop과 className으로 정규화한다.\n *\n * - custom color(black 등): Radix color는 비우고 accent override className을 반환\n * - semantic color(error/neutral/success/accent): 대응 Radix color로 변환\n * - Radix color: 그대로 pass-through\n */\nexport const resolveColor = (color?: UiColor): ResolvedColor => {\n  if (isCustomColor(color)) {\n    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];\n    return { color: fallbackColor, className };\n  }\n\n  if (isSemanticColor(color)) {\n    return { color: SEMANTIC_COLOR_MAP[color] };\n  }\n\n  return { color };\n};\n","import React, { createContext } from 'react';\nimport { Theme } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\ntype ThemeProps = React.ComponentProps<typeof Theme>;\n\n/**\n * 테마 전역 primary가 custom color(black 등)일 때 그 값을 하위로 전달하는 context.\n * Radix는 Portal 컨텐츠(Select 드롭다운 등)에 theme의 accentColor \"값\"(여기선 fallback gray)만\n * 복제하고 `.tipp-accent-black` className은 복제하지 않으므로, Portal 안에서는 accent override가\n * 사라진다. 래핑된 overlay 컴포넌트(Select 등)가 이 context를 최하위 fallback color로 읽어\n * 자기 요소에 className을 직접 부여하면 Portal 내부에서도 black이 유지된다.\n * (custom accent가 아닐 때는 undefined — Radix 네이티브 portal 상속에 맡긴다.)\n */\nexport const ThemeAccentContext = createContext<UiColor | undefined>(undefined);\n\nexport interface ThemeProviderProps extends Omit<ThemeProps, 'accentColor'> {\n  children: React.ReactNode;\n  /**\n   * 전역 primary(accent) color. Radix accent color에 더해 커스텀 `black`을 지원한다.\n   * black이면 Radix에는 fallback `gray`를 넘기고 Theme 루트에 accent override\n   * className을 부여하여 하위 컴포넌트가 color prop 없이도 black을 상속한다.\n   */\n  accentColor?: ThemeProps['accentColor'] | 'black';\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): React.ReactNode {\n  const { accentColor = 'iris', className, ...rest } = props;\n\n  const { color: radixAccent, className: accentClassName } =\n    resolveColor(accentColor);\n\n  // custom accent(className이 생기는 경우 = black)일 때만 Portal 보정용으로 context에 흘린다.\n  const themeAccent = accentClassName ? accentColor : undefined;\n\n  return (\n    <ThemeAccentContext.Provider value={themeAccent}>\n      <Theme\n        accentColor={radixAccent ?? 'iris'}\n        className={clsx(accentClassName, className)}\n        radius=\"medium\"\n        {...rest}\n      />\n    </ThemeAccentContext.Provider>\n  );\n}\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\n\nexport type TypoProps = DistributiveOmit<RadixTextProps, 'color'> & {\n  variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n  color?: UiColor;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactNode => {\n    const { size, variant, children, color, className, ...rest } = props;\n\n    const { color: radixColor, className: colorClassName } = useMemo(\n      () => resolveColor(color),\n      [color]\n    );\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n\n      if (variant === undefined) return '2';\n\n      return mapWithResponsive({\n        value: variant,\n        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n          switch (variantValue) {\n            case 'caption':\n              return '1';\n            case 'subtitle':\n              return '3';\n            case 'body':\n            default:\n              return '2';\n          }\n        },\n      });\n    }, [size, variant]);\n\n    return (\n      <RadixText\n        {...rest}\n        className={clsx(colorClassName, className)}\n        color={radixColor}\n        ref={ref}\n        size={radixSize}\n      >\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAOO;AACP,IAAAC,iBAAoB;;;ACRpB,oBAAwC;AACxC,mBAAoC;AAuBhC;AAjBJ,IAAM,WAAO,yBAGX,CAAC,OAAO,QAAQ;AAChB,QAA6C,YAArC,SAAO,OAAO,UAXxB,IAW+C,IAAT,iBAAS,IAAT,CAA5B,SAAO,SAAO;AAEtB,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,QAAI,CAAC,MAAO,QAAO;AACnB,UAAM,aAAa;AAAA,MACjB,WAAW;AAAA,IACb;AAEA,WAAO,kCAAM,SAAS,CAAC,IAAO;AAAA,EAChC,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,QAAM,eAAe,QAAQ,SAAS,SAAS,KAAK;AACpD,SACE;AAAA,IAAC,cAAAC,UAAW;AAAA,IAAX;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,OAAO;AAAA,OACH;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AAEnB,IAAM,YAAY,EAAE,MAAM,MAAM,cAAAA,UAAW,KAAK;;;ACnChD,IAAAC,iBAAkD;AAClD,IAAAC,gBAA+D;;;AC4B/D,IAAM,qBAAoE;AAAA,EACxE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAgBA,IAAM,mBAA2D;AAAA,EAC/D,OAAO,EAAE,WAAW,qBAAqB,eAAe,OAAO;AACjE;AAEA,IAAM,kBAAkB,CAAC,UACvB,UAAU,UAAa,SAAS;AAElC,IAAM,gBAAgB,CAAC,UACrB,UAAU,UAAa,SAAS;AAgB3B,IAAM,eAAe,CAAC,UAAmC;AAC9D,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,WAAW,cAAc,IAAI,iBAAiB,KAAK;AAC3D,WAAO,EAAE,OAAO,eAAe,UAAU;AAAA,EAC3C;AAEA,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO,EAAE,OAAO,mBAAmB,KAAK,EAAE;AAAA,EAC5C;AAEA,SAAO,EAAE,MAAM;AACjB;;;ACrFA,IAAAC,gBAAqC;AACrC,IAAAC,iBAAsB;AACtB,kBAAqB;AAoCf,IAAAC,sBAAA;AAvBC,IAAM,yBAAqB,6BAAmC,MAAS;;;AF2B1E,IAAAC,sBAAA;AAjCJ,IAAM,0BAAsB,6BAAmC,CAAC,CAAC;AAWjE,IAAM,cAAU,0BAAyC,CAAC,OAAO,QAAQ;AACvE,QAAoD,YAA5C,gBAAc,WAAW,MArBnC,IAqBsD,IAAT,iBAAS,IAAT,CAAnC,gBAAc,aAAW;AACjC,QAAM,EAAE,OAAO,aAAa,QAAI,0BAAW,mBAAmB;AAC9D,QAAM,kBAAc,0BAAW,kBAAkB;AAIjD,QAAM,EAAE,OAAO,YAAY,WAAW,eAAe,QAAI;AAAA,IACvD,MAAG;AA5BP,UAAAC;AA4BU,2BAAaA,MAAA,wBAAS,iBAAT,OAAAA,MAAyB,WAAW;AAAA;AAAA,IACvD,CAAC,OAAO,cAAc,WAAW;AAAA,EACnC;AAIA,QAAM,eAAe,iBAAiB,SAAY;AAElD,QAAM,uBAAmB,uBAAQ,MAAM;AACrC,UAAM,MAAM,eAAe,wBAAwB;AACnD,WAAO,CAAC,KAAK,gBAAgB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,EAClE,GAAG,CAAC,cAAc,gBAAgB,SAAS,CAAC;AAE5C,SACE;AAAA,IAAC,eAAAC,aAAkB;AAAA,IAAlB;AAAA,MACC;AAAA,OACI,OAFL;AAAA,MAGC,WAAW;AAAA,MACX,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;AAED,QAAQ,cAAc;AAKtB,IAAM,cAAU;AAAA,EACd,CAAC,IAAiC,QAAK;AAAtC,iBAAE,WAAS,SAzDd,IAyDG,IAAwB,kBAAxB,IAAwB,CAAtB;AACD,wDAAC,eAAAA,aAAkB,SAAlB,iBAA0B,OAAc,MAAO;AAAA;AAEpD;AAEA,QAAQ,cAAc;AAOtB,SAASC,MAAK,OAAmC;AAC/C,QAA2B,YAAnB,QAtEV,IAsE6B,IAAT,iBAAS,IAAT,CAAV;AAER,QAAM,YAAQ,uBAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;AAEhD,SACE,6CAAC,oBAAoB,UAApB,EAA6B,OAC5B,uDAAC,eAAAD,aAAkB,MAAlB,mBAA2B,KAAM,GACpC;AAEJ;AAEAC,MAAK,cAAc;AAEZ,IAAM,eAAe,iCACvB,eAAAD,eADuB;AAAA,EAE1B,MAAAC;AAAA,EACA;AAAA,EACA;AACF;;;AGtFA,IAAAC,iBAAkC;AAClC,IAAAC,eAAqB;AACrB,IAAAC,gBAA2C;;;ACFpC,IAAM,oBAAoB,CAChC,SAC+B;AAC9B,QAAM,EAAC,OAAO,MAAK,IAAI;AACvB,MAAG,OAAO,UAAU,UAAS;AAC3B,WAAO,MAAM,KAAK;AAAA,EACpB;AAAC;AAED,MAAG,OAAO,UAAU,UAAS;AAC3B,UAAM,SAAyC,CAAC;AAChD,QAAI;AACJ,SAAI,OAAO,OAAM;AACf,aAAO,GAAG,IAAI,MAAM,MAAM,GAAG,CAAC;AAAA,IAChC;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;;;AD6BM,IAAAC,sBAAA;AA/BC,IAAM,WAAO;AAAA,EAClB,CAAC,OAAkB,QAAyB;AAC1C,UAA+D,YAAvD,QAAM,SAAS,UAAU,OAAO,UAnB5C,IAmBmE,IAAT,iBAAS,IAAT,CAA9C,QAAM,WAAS,YAAU,SAAO;AAExC,UAAM,EAAE,OAAO,YAAY,WAAW,eAAe,QAAI;AAAA,MACvD,MAAM,aAAa,KAAK;AAAA,MACxB,CAAC,KAAK;AAAA,IACR;AAEA,UAAM,gBAAY,uBAAgC,MAAM;AACtD,UAAI,SAAS,OAAW,QAAO;AAE/B,UAAI,YAAY,OAAW,QAAO;AAElC,aAAO,kBAAkB;AAAA,QACvB,OAAO;AAAA,QACP,OAAO,CAAC,iBAAmD;AACzD,kBAAQ,cAAc;AAAA,YACpB,KAAK;AACH,qBAAO;AAAA,YACT,KAAK;AACH,qBAAO;AAAA,YACT,KAAK;AAAA,YACL;AACE,qBAAO;AAAA,UACX;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,WACE;AAAA,MAAC,eAAAC;AAAA,MAAA,iCACK,OADL;AAAA,QAEC,eAAW,mBAAK,gBAAgB,SAAS;AAAA,QACzC,OAAO;AAAA,QACP;AAAA,QACA,MAAM;AAAA,QAEL;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;;;ALiHX,IAAAC,sBAAA;AA3ID,IAAM,4BAAwB;AAAA,EAInC,CACE,IAaA,QACuB;AAdvB,iBACE;AAAA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IAlDN,IAwCI,IAWK,iBAXL,IAWK;AAAA,MAVH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,eAAe,kBAAkB;AACvC,UAAM,CAAC,eAAe,gBAAgB,QAAI,wBAAS,EAAE;AACrD,UAAM,aAAa,eAAe,gBAAgB;AAElD,UAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AACtC,UAAM,CAAC,kBAAkB,mBAAmB,QAAI,wBAAS,EAAE;AAE3D,UAAM,eAAW,sBAAyB,IAAI;AAC9C,UAAM,cAAU,sBAAyB,IAAI;AAC7C,UAAM,gBAAY,qBAAM;AACxB,UAAM,sBAAkB,sBAAO,KAAK;AAEpC,UAAM,WAAW,QACd;AAAA,MAAO,CAAC,QACP,IAAI,MAAM,YAAY,EAAE,SAAS,WAAW,YAAY,CAAC;AAAA,IAC3D,EACC,MAAM,GAAG,QAAQ;AAEpB,UAAM,wBAAoB;AAAA,MACxB,CAAC,MAA2C;AAC1C,cAAM,OAAO,EAAE,OAAO;AACtB,YAAI,CAAC,aAAc,kBAAiB,IAAI;AACxC,6CAAW;AACX,cAAM,eAAe,QAClB,OAAO,CAAC,QAAQ,IAAI,MAAM,YAAY,EAAE,SAAS,KAAK,YAAY,CAAC,CAAC,EACpE,MAAM,GAAG,QAAQ;AACpB,gBAAQ,aAAa,SAAS,KAAK,iBAAiB,IAAI;AACxD,4BAAoB,EAAE;AAAA,MACxB;AAAA,MACA,CAAC,cAAc,UAAU,SAAS,UAAU,YAAY;AAAA,IAC1D;AAEA,UAAM,mBAAe;AAAA,MACnB,CAAC,WAA+B;AAxFtC,YAAAC;AAyFQ,YAAI,CAAC,aAAc,kBAAiB,OAAO,KAAK;AAChD,6CAAW,OAAO;AAClB,6CAAW;AACX,gBAAQ,KAAK;AACb,4BAAoB,EAAE;AACtB,wBAAgB,UAAU;AAC1B,SAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAAA,MACpB;AAAA,MACA,CAAC,cAAc,UAAU,QAAQ;AAAA,IACnC;AAEA,UAAM,kBAAc,2BAAY,MAAM;AACpC,UAAI,gBAAgB,SAAS;AAC3B,wBAAgB,UAAU;AAC1B;AAAA,MACF;AACA,YAAM,kBAAkB,QACrB,OAAO,CAAC,QAAQ,IAAI,MAAM,YAAY,EAAE,SAAS,WAAW,YAAY,CAAC,CAAC,EAC1E,MAAM,GAAG,QAAQ;AACpB,cAAQ,gBAAgB,SAAS,KAAK,iBAAiB,IAAI;AAAA,IAC7D,GAAG,CAAC,SAAS,YAAY,UAAU,YAAY,CAAC;AAEhD,UAAM,iBAAa,2BAAY,CAAC,MAA0C;AA/G9E,UAAAA,KAAAC;AAiHM,UAAI,EAAE,mBAAiBA,OAAAD,MAAA,SAAS,YAAT,gBAAAA,IAAkB,kBAAlB,gBAAAC,IAAiC,SAAS,EAAE,iBAAwB;AACzF;AAAA,MACF;AACA,cAAQ,KAAK;AACb,0BAAoB,EAAE;AAAA,IACxB,GAAG,CAAC,CAAC;AAEL,UAAM,oBAAgB;AAAA,MACpB,CAAC,MAA6C;AAC5C,YAAI,CAAC,MAAM;AACT,cAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,oBAAQ,IAAI;AACZ,gCAAoB,CAAC;AACrB,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,QACF;AAEA,gBAAQ,EAAE,KAAK;AAAA,UACb,KAAK;AACH,cAAE,eAAe;AACjB;AAAA,cAAoB,CAAC,SACnB,OAAO,SAAS,SAAS,IAAI,OAAO,IAAI;AAAA,YAC1C;AACA;AAAA,UACF,KAAK;AACH,cAAE,eAAe;AACjB;AAAA,cAAoB,CAAC,SACnB,OAAO,IAAI,OAAO,IAAI,SAAS,SAAS;AAAA,YAC1C;AACA;AAAA,UACF,KAAK;AACH,cAAE,eAAe;AACjB,gBAAI,oBAAoB,KAAK,SAAS,gBAAgB,GAAG;AACvD,2BAAa,SAAS,gBAAgB,CAAC;AAAA,YACzC;AACA;AAAA,UACF,KAAK;AACH,oBAAQ,KAAK;AACb,gCAAoB,EAAE;AACtB;AAAA,UACF,KAAK;AACH,oBAAQ,KAAK;AACb,gCAAoB,EAAE;AACtB;AAAA,UACF;AACE;AAAA,QACJ;AAAA,MACF;AAAA,MACA,CAAC,MAAM,UAAU,kBAAkB,YAAY;AAAA,IACjD;AAGA,iCAAU,MAAM;AACd,UAAI,CAAC,QAAQ,WAAW,mBAAmB,EAAG;AAC9C,YAAM,OAAO,QAAQ,QAAQ,SAAS,gBAAgB;AACtD,MAAC,KAAqB,eAAe,EAAE,OAAO,UAAU,CAAC;AAAA,IAC3D,GAAG,CAAC,gBAAgB,CAAC;AAErB,WACE,8CAAC,sBAAI,UAAS,YAAW,OAAO,EAAE,OAAO,OAAO,GAC9C;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,yBACE,QAAQ,oBAAoB,IACxB,GAAG,SAAS,WAAW,gBAAgB,KACvC;AAAA,UAEN,qBAAkB;AAAA,UAClB,iBAAe,OAAO,YAAY;AAAA,UAClC,iBAAe;AAAA,UACf;AAAA,UACA,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX;AAAA,UACA,KAAK,CAAC,SAAS;AACb,YAAC,SAA6D,UAC5D;AACF,gBAAI,OAAO,QAAQ,YAAY;AAC7B,kBAAI,IAAI;AAAA,YACV,WAAW,KAAK;AACd,cAAC,IAAwD,UACvD;AAAA,YACJ;AAAA,UACF;AAAA,UACA,MAAK;AAAA,UACL,OAAO,EAAE,OAAO,OAAO;AAAA,UACvB,OAAO;AAAA,WACH,OA5BL;AAAA,UA8BE;AAAA,wBAAY,6CAAC,UAAU,MAAV,EAAe,MAAK,QAAQ,oBAAS;AAAA,YAClD,aAAa,6CAAC,UAAU,MAAV,EAAe,MAAK,SAAS,qBAAU;AAAA;AAAA;AAAA,MACxD;AAAA,MAGA;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACC,OAAO;AAAA,UACP,cAAc,CAAC,aAAa;AAC1B,gBAAI,CAAC,YAAY,SAAS,kBAAkB,SAAS,SAAS;AAC5D,sBAAQ,KAAK;AACb,kCAAoB,EAAE;AAAA,YACxB;AAAA,UACF;AAAA,UACA;AAAA,UAEA;AAAA,yDAAC,aAAa,SAAb,EAAqB,SAAO,MAC3B;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,QAAQ;AAAA,kBACR,QAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,UAAU;AAAA,kBACV,OAAO;AAAA,gBACT;AAAA;AAAA,YACF,GACF;AAAA,YAEA;AAAA,cAAC,aAAa;AAAA,cAAb;AAAA,gBACC,OAAM;AAAA,gBACN,kBAAkB,CAAC,MAAa;AAC9B,oBAAE,eAAe;AAAA,gBACnB;AAAA,gBACA,iBAAiB,CAAC,MAAa;AAC7B,oBAAE,eAAe;AAAA,gBACnB;AAAA,gBACA,YAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,WAAW;AAAA,kBACX,WAAW;AAAA,kBACX,SAAS;AAAA,kBACT,OAAO;AAAA,gBACT;AAAA,gBAEC,mBAAS,WAAW,KAAK,iBAAiB,OACzC,6CAAC,sBAAI,IAAG,KAAI,IAAG,KACb,uDAAC,QAAK,OAAM,QACT,wBACH,GACF,IAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,KAAK;AAAA,oBACL,MAAK;AAAA,oBACL,OAAO,EAAE,WAAW,QAAQ,QAAQ,GAAG,SAAS,EAAE;AAAA,oBAEjD,mBAAS,IAAI,CAAC,QAAQ,UAAU;AAC/B,4BAAM,gBAAgB,UAAU;AAChC,6BACE;AAAA,wBAAC;AAAA;AAAA,0BACC,iBAAe;AAAA,0BACf,IAAI,GAAG,SAAS,WAAW,KAAK;AAAA,0BAEhC,cAAc,MAAM;AAClB,gDAAoB,KAAK;AAAA,0BAC3B;AAAA,0BACA,eAAe,CAAC,MAAM;AAEpB,8BAAE,eAAe;AACjB,yCAAa,MAAM;AAAA,0BACrB;AAAA,0BACA,MAAK;AAAA,0BACL,OAAO;AAAA,4BACL,SAAS;AAAA,4BACT,QAAQ;AAAA,4BACR,iBAAiB,gBACb,oBACA;AAAA,4BACJ,YAAY;AAAA,0BACd;AAAA,0BAEA,uDAAC,QAAK,SAAQ,QAAQ,iBAAO,OAAM;AAAA;AAAA,wBAnB9B,OAAO;AAAA,sBAoBd;AAAA,oBAEJ,CAAC;AAAA;AAAA,gBACH;AAAA;AAAA,YAEJ;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,sBAAsB,cAAc;","names":["import_react","import_themes","RTextField","import_themes","import_react","import_react","import_themes","import_jsx_runtime","import_jsx_runtime","_a","RadixDropdownMenu","Root","import_themes","import_clsx","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","_a","_b"]}

package/dist/molecules/autocomplete-textfield.js

@@ -1,10 +1,12 @@
 import {
   AutocompleteTextfield
-} from "../chunk-LSDD4TAP.js";
+} from "../chunk-AJTGTGOC.js";
 import "../chunk-6NPTJBFE.js";
-import "../chunk-SMLC2O3V.js";
-import "../chunk-PMJIFLDT.js";
+import "../chunk-T73HHR3I.js";
+import "../chunk-GR4PG6HY.js";
 import "../chunk-LDBWASUA.js";
+import "../chunk-WYWM2HSZ.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   AutocompleteTextfield