@tipp/ui 2.3.33 → 2.3.35

package/dist/{chunk-RFXVHZAN.js → chunk-64XYTE54.js}

@@ -12,15 +12,15 @@ import {
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 
 // src/app/platform/userInfos/coaching-customer-info/large.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -61,4 +61,4 @@ function CoachingCustomerInfoLarge({
 export {
   CoachingCustomerInfoLarge
 };
-//# sourceMappingURL=chunk-RFXVHZAN.js.map
+//# sourceMappingURL=chunk-64XYTE54.js.map

package/dist/{chunk-TTVJOFG5.js → chunk-6MQMVYEP.js}

@@ -1,9 +1,9 @@
 import {
   CoachingCustomerInfoLarge
-} from "./chunk-RFXVHZAN.js";
+} from "./chunk-64XYTE54.js";
 import {
   CoachingCustomerInfoMedium
-} from "./chunk-KD6EXWP7.js";
+} from "./chunk-62HSZXVT.js";
 import {
   CoachingCustomerInfoSmall
 } from "./chunk-YADSNPMG.js";
@@ -27,4 +27,4 @@ function CoachingCustomerInfo(props) {
 export {
   CoachingCustomerInfo
 };
-//# sourceMappingURL=chunk-TTVJOFG5.js.map
+//# sourceMappingURL=chunk-6MQMVYEP.js.map

package/dist/{chunk-3WNHPKHP.js → chunk-7R5KG7SJ.js}

@@ -1,15 +1,15 @@
+import {
+  ReviewQuestionSatisfisText
+} from "./chunk-W7TBPRHG.js";
 import {
   review_question_text_default
-} from "./chunk-XXMZLXDE.js";
+} from "./chunk-TCFXG4AX.js";
 import {
   review_question_radio_default
-} from "./chunk-GXG26SHU.js";
+} from "./chunk-OILH5J7Q.js";
 import {
   review_question_satisfaction_option_default
-} from "./chunk-JFJ3N4V5.js";
-import {
-  ReviewQuestionSatisfisText
-} from "./chunk-W7TBPRHG.js";
+} from "./chunk-NTJLECYY.js";
 
 // src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.tsx
 import { jsx } from "react/jsx-runtime";
@@ -66,4 +66,4 @@ var review_question_body_default = ReviewQuestionBody;
 export {
   review_question_body_default
 };
-//# sourceMappingURL=chunk-3WNHPKHP.js.map
+//# sourceMappingURL=chunk-7R5KG7SJ.js.map

package/dist/{chunk-6UXCNYVO.js → chunk-7R65MUL6.js}

@@ -4,15 +4,15 @@ import {
 import {
   Select
 } from "./chunk-X2GMDZ7M.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   Typo
 } from "./chunk-PMJIFLDT.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 
 // src/molecules/dynamic-form-editor-field-list-panel.tsx
 import { useMemo } from "react";
@@ -103,4 +103,4 @@ function DynamicFormEditorFieldListPanel(props) {
 export {
   DynamicFormEditorFieldListPanel
 };
-//# sourceMappingURL=chunk-6UXCNYVO.js.map
+//# sourceMappingURL=chunk-7R65MUL6.js.map

package/dist/{chunk-MIATMZDP.js → chunk-AA6OYHCE.js}

@@ -1,12 +1,12 @@
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   Typo
 } from "./chunk-PMJIFLDT.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 
 // src/molecules/dynamic-form-editor-issues-panel.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,4 +36,4 @@ function DynamicFormEditorIssuesPanel(props) {
 export {
   DynamicFormEditorIssuesPanel
 };
-//# sourceMappingURL=chunk-MIATMZDP.js.map
+//# sourceMappingURL=chunk-AA6OYHCE.js.map

package/dist/{chunk-CI2XFT7Y.js → chunk-AYWPBD4T.js}

@@ -7,6 +7,9 @@ import {
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
+import {
+  Badge
+} from "./chunk-U3BQT7ZO.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -20,9 +23,6 @@ import {
   ArrowRightIcon,
   TimerIcon
 } from "./chunk-DLP4UUNG.js";
-import {
-  Badge
-} from "./chunk-U3BQT7ZO.js";
 
 // src/app/platform/curriculum-card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -96,4 +96,4 @@ function CurriculumCard(props) {
 export {
   CurriculumCard
 };
-//# sourceMappingURL=chunk-CI2XFT7Y.js.map
+//# sourceMappingURL=chunk-AYWPBD4T.js.map

package/dist/{chunk-4QHXYLE4.js → chunk-CIQ7ELE6.js}

@@ -15,6 +15,9 @@ import {
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
+import {
+  Badge
+} from "./chunk-U3BQT7ZO.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -27,9 +30,6 @@ import {
 import {
   Button
 } from "./chunk-ZVDAEY5Q.js";
-import {
-  Badge
-} from "./chunk-U3BQT7ZO.js";
 
 // src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -148,4 +148,4 @@ var start_review_default = StartReview;
 export {
   start_review_default
 };
-//# sourceMappingURL=chunk-4QHXYLE4.js.map
+//# sourceMappingURL=chunk-CIQ7ELE6.js.map

package/dist/{chunk-SNPAB3HJ.js → chunk-DWBYAHIR.js}

@@ -1,6 +1,9 @@
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -13,9 +16,6 @@ import {
 import {
   Button
 } from "./chunk-ZVDAEY5Q.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 import {
   DownloadIcon
 } from "./chunk-DLP4UUNG.js";
@@ -65,4 +65,4 @@ function ReportCard(props) {
 export {
   ReportCard
 };
-//# sourceMappingURL=chunk-SNPAB3HJ.js.map
+//# sourceMappingURL=chunk-DWBYAHIR.js.map

package/dist/{chunk-WOAZK56Z.js → chunk-ESM3HX57.js}

@@ -1,12 +1,12 @@
-import {
-  start_review_default
-} from "./chunk-4QHXYLE4.js";
 import {
   ReviewQuestion_default
-} from "./chunk-TB3ZF5TJ.js";
+} from "./chunk-PGUDVR3V.js";
 import {
   complete_review_default
 } from "./chunk-NIMLBANB.js";
+import {
+  start_review_default
+} from "./chunk-CIQ7ELE6.js";
 import {
   CurriculumReviewProvider,
   useCurriculumReviewContext
@@ -86,4 +86,4 @@ var CurriculumReviewSteps_default = CurriculumReviewSteps;
 export {
   CurriculumReviewSteps_default
 };
-//# sourceMappingURL=chunk-WOAZK56Z.js.map
+//# sourceMappingURL=chunk-ESM3HX57.js.map

package/dist/{chunk-SACH3XVV.js → chunk-F7JSPN5P.js}

@@ -7,6 +7,9 @@ import {
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
+import {
+  Badge
+} from "./chunk-U3BQT7ZO.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -22,9 +25,6 @@ import {
 import {
   AspectRatio
 } from "./chunk-EAXUQEO5.js";
-import {
-  Badge
-} from "./chunk-U3BQT7ZO.js";
 import {
   __spreadProps,
   __spreadValues
@@ -160,4 +160,4 @@ function LearningPost(props) {
 export {
   LearningPost
 };
-//# sourceMappingURL=chunk-SACH3XVV.js.map
+//# sourceMappingURL=chunk-F7JSPN5P.js.map

package/dist/{chunk-MFIOT62L.js → chunk-F7LTJOOC.js}

@@ -19,7 +19,13 @@ import {
 } from "./chunk-CRTRMMJ7.js";
 
 // src/atoms/pagination.tsx
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Pagination(props) {
   const { onChange, count = 0, siblingCount = 2 } = props;
@@ -34,14 +40,24 @@ function Pagination(props) {
     }
     return Array.from({ length: end - start + 1 }, (_, i) => i + start);
   }, [count, page, siblingCount]);
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const isFirstRender = useRef(true);
   useEffect(() => {
-    onChange == null ? void 0 : onChange(page);
-  }, [onChange, page]);
+    var _a;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, page);
+  }, [page]);
   useEffect(() => {
-    if (props.page) {
+    if (props.page && props.page !== page) {
       setPage(props.page);
     }
-  }, [props.page]);
+  }, [props.page, page]);
   const prev = useMemo(() => {
     const p = page - 1;
     return p < 1 ? void 0 : p;
@@ -122,4 +138,4 @@ function Pagination(props) {
 export {
   Pagination
 };
-//# sourceMappingURL=chunk-MFIOT62L.js.map
+//# sourceMappingURL=chunk-F7LTJOOC.js.map

package/dist/chunk-F7LTJOOC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n} from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지, 1부터 시작 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n  /** 표시할 페이지 버튼의 개수 */\n  siblingCount?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0, siblingCount = 2 } = props;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    let start = Math.max(1, page - siblingCount);\n    let end = Math.min(count, page + siblingCount);\n    if (page - siblingCount <= 0 && end < count) {\n      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);\n    } else if (page + siblingCount > count && start > 1) {\n      start = Math.max(1, start - (page + siblingCount - count));\n    }\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page, siblingCount]);\n\n  // onChange 참조가 매 렌더 새로 생성되더라도 effect가 재발화하지 않도록 ref로 보관한다.\n  const onChangeRef = useRef(onChange);\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  });\n\n  // 내부 page 상태가 바뀔 때만 부모에 알림. 마운트 시 초기 page는 부모가 이미 알고 있으므로 제외.\n  const isFirstRender = useRef(true);\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n    onChangeRef.current?.(page);\n  }, [page]);\n\n  useEffect(() => {\n    if (props.page && props.page !== page) {\n      setPage(props.page);\n    }\n  }, [props.page, page]);\n\n  const prev = useMemo<number | undefined>(() => {\n    const p = page - 1;\n    return p < 1 ? undefined : p;\n  }, [page]);\n\n  const next = useMemo<number | undefined>(() => {\n    const n = page + 1;\n    return n > count ? undefined : n;\n  }, [count, page]);\n\n  const onClickPrev = useCallback(() => {\n    prev && setPage(prev);\n  }, [prev]);\n\n  const onClickNext = useCallback(() => {\n    next && setPage(next);\n  }, [next]);\n\n  const doublePrev = useMemo<number | undefined>(() => {\n    if (!visibleItems.length) return;\n    return Math.max(0, visibleItems[0] - 1);\n  }, [visibleItems]);\n\n  const onClickDoublePrev = useCallback(() => {\n    doublePrev && setPage(doublePrev);\n  }, [doublePrev]);\n\n  const doubleNext = useMemo<number | undefined>(() => {\n    if (!visibleItems.length) return;\n    const n = visibleItems[visibleItems.length - 1] + 1;\n    if (n > count) return;\n    return Math.min(count, n);\n  }, [count, visibleItems]);\n\n  const onClickDoubleNext = useCallback(() => {\n    doubleNext && setPage(doubleNext);\n  }, [doubleNext]);\n\n  const iconSize = {\n    height: 24,\n    width: 24,\n  };\n\n  const moveButtonProps: IconButtonProps = {\n    variant: 'ghost',\n    size: 'large',\n    style: { borderRadius: '50%' },\n  };\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\">\n      <IconButton\n        disabled={!doublePrev}\n        onClick={onClickDoublePrev}\n        {...moveButtonProps}\n      >\n        <DoubleArrowLeftIcon {...iconSize} />\n      </IconButton>\n      <IconButton disabled={!prev} onClick={onClickPrev} {...moveButtonProps}>\n        <ChevronLeftIcon {...iconSize} />\n      </IconButton>\n      <Flex gap=\"1\">\n        {visibleItems.map((item) => {\n          return (\n            <button\n              className={`page-button ${item === page ? 'active' : ''}`}\n              key={item}\n              onClick={() => {\n                setPage(item);\n              }}\n              type=\"button\"\n            >\n              <Typo variant=\"body\">{item}</Typo>\n            </button>\n          );\n        })}\n      </Flex>\n      <IconButton disabled={!next} onClick={onClickNext} {...moveButtonProps}>\n        <ChevronRightIcon {...iconSize} />\n      </IconButton>\n      <IconButton\n        disabled={!doubleNext}\n        onClick={onClickDoubleNext}\n        {...moveButtonProps}\n      >\n        <DoubleArrowRightIcon {...iconSize} />\n      </IconButton>\n    </Flex>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-KCAOUZCT.js → chunk-GTO7GG2K.js}

@@ -1,6 +1,6 @@
 import {
   DynamicFormField
-} from "./chunk-MPZJH3PI.js";
+} from "./chunk-HTNDVNLQ.js";
 import {
   DynamicFormProvider,
   useDynamicForm
@@ -242,4 +242,4 @@ export {
   DynamicForm,
   createYupValidation
 };
-//# sourceMappingURL=chunk-KCAOUZCT.js.map
+//# sourceMappingURL=chunk-GTO7GG2K.js.map

package/dist/{chunk-MPZJH3PI.js → chunk-HTNDVNLQ.js}

@@ -16,12 +16,12 @@ import {
 import {
   RadioGroup
 } from "./chunk-6DJOIRMF.js";
-import {
-  Inset
-} from "./chunk-XQOL7UBI.js";
 import {
   Grid
 } from "./chunk-EGEQY3KT.js";
+import {
+  Inset
+} from "./chunk-XQOL7UBI.js";
 import {
   CheckboxGroup
 } from "./chunk-W7X7KSJP.js";
@@ -284,4 +284,4 @@ function DynamicFormField({
 export {
   DynamicFormField
 };
-//# sourceMappingURL=chunk-MPZJH3PI.js.map
+//# sourceMappingURL=chunk-HTNDVNLQ.js.map

package/dist/{chunk-PWTMDEL2.js → chunk-LATTGN7W.js}

@@ -1,9 +1,9 @@
-import {
-  EditServiceType
-} from "./chunk-6HMQEUHX.js";
 import {
   EditCoachingTime
 } from "./chunk-MTGKF6SO.js";
+import {
+  EditServiceType
+} from "./chunk-6HMQEUHX.js";
 import {
   Grid
 } from "./chunk-EGEQY3KT.js";
@@ -16,6 +16,9 @@ import {
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   BulletText
 } from "./chunk-Z34HR7RE.js";
@@ -25,9 +28,6 @@ import {
 import {
   Button
 } from "./chunk-ZVDAEY5Q.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 import {
   Pencil1Icon
 } from "./chunk-DLP4UUNG.js";
@@ -141,4 +141,4 @@ function SessionCard(props) {
 export {
   SessionCard
 };
-//# sourceMappingURL=chunk-PWTMDEL2.js.map
+//# sourceMappingURL=chunk-LATTGN7W.js.map

package/dist/chunk-LSDD4TAP.js

@@ -0,0 +1,276 @@
+import {
+  TextField
+} from "./chunk-6NPTJBFE.js";
+import {
+  DropdownMenu
+} from "./chunk-SMLC2O3V.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/autocomplete-textfield.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { Box } from "@radix-ui/themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AutocompleteTextfield = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      options,
+      value: externalValue,
+      onChange,
+      onSelect,
+      placeholder,
+      emptyMessage = "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+      maxItems = 10,
+      slotLeft,
+      slotRight,
+      error
+    } = _b, rest = __objRest(_b, [
+      "options",
+      "value",
+      "onChange",
+      "onSelect",
+      "placeholder",
+      "emptyMessage",
+      "maxItems",
+      "slotLeft",
+      "slotRight",
+      "error"
+    ]);
+    const isControlled = externalValue !== void 0;
+    const [internalValue, setInternalValue] = useState("");
+    const inputValue = isControlled ? externalValue : internalValue;
+    const [open, setOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const listboxId = useId();
+    const justSelectedRef = useRef(false);
+    const filtered = options.filter(
+      (opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())
+    ).slice(0, maxItems);
+    const handleInputChange = useCallback(
+      (e) => {
+        const next = e.target.value;
+        if (!isControlled) setInternalValue(next);
+        onChange == null ? void 0 : onChange(next);
+        const nextFiltered = options.filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase())).slice(0, maxItems);
+        setOpen(nextFiltered.length > 0 || emptyMessage !== null);
+        setHighlightedIndex(-1);
+      },
+      [isControlled, onChange, options, maxItems, emptyMessage]
+    );
+    const handleSelect = useCallback(
+      (option) => {
+        var _a2;
+        if (!isControlled) setInternalValue(option.label);
+        onChange == null ? void 0 : onChange(option.label);
+        onSelect == null ? void 0 : onSelect(option);
+        setOpen(false);
+        setHighlightedIndex(-1);
+        justSelectedRef.current = true;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      },
+      [isControlled, onChange, onSelect]
+    );
+    const handleFocus = useCallback(() => {
+      if (justSelectedRef.current) {
+        justSelectedRef.current = false;
+        return;
+      }
+      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 = 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;
+      }
+      setOpen(false);
+      setHighlightedIndex(-1);
+    }, []);
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (!open) {
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            setOpen(true);
+            setHighlightedIndex(0);
+            e.preventDefault();
+          }
+          return;
+        }
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev < filtered.length - 1 ? prev + 1 : 0
+            );
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev > 0 ? prev - 1 : filtered.length - 1
+            );
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {
+              handleSelect(filtered[highlightedIndex]);
+            }
+            break;
+          case "Escape":
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          case "Tab":
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          default:
+            break;
+        }
+      },
+      [open, filtered, highlightedIndex, handleSelect]
+    );
+    useEffect(() => {
+      if (!listRef.current || highlightedIndex < 0) return;
+      const item = listRef.current.children[highlightedIndex];
+      item.scrollIntoView({ block: "nearest" });
+    }, [highlightedIndex]);
+    return /* @__PURE__ */ jsxs(Box, { position: "relative", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(
+        TextField.Root,
+        __spreadProps(__spreadValues({
+          "aria-activedescendant": open && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0,
+          "aria-autocomplete": "list",
+          "aria-controls": open ? listboxId : void 0,
+          "aria-expanded": open,
+          error,
+          onBlur: handleBlur,
+          onChange: handleInputChange,
+          onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          ref: (node) => {
+            inputRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          role: "combobox",
+          style: { width: "100%" },
+          value: inputValue
+        }, rest), {
+          children: [
+            slotLeft && /* @__PURE__ */ jsx(TextField.Slot, { side: "left", children: slotLeft }),
+            slotRight && /* @__PURE__ */ jsx(TextField.Slot, { side: "right", children: slotRight })
+          ]
+        })
+      ),
+      /* @__PURE__ */ jsxs(
+        DropdownMenu.Root,
+        {
+          modal: false,
+          onOpenChange: (nextOpen) => {
+            if (!nextOpen && document.activeElement !== inputRef.current) {
+              setOpen(false);
+              setHighlightedIndex(-1);
+            }
+          },
+          open,
+          children: [
+            /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  bottom: 0,
+                  height: 0,
+                  left: 0,
+                  opacity: 0,
+                  pointerEvents: "none",
+                  position: "absolute",
+                  width: "100%"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              DropdownMenu.Content,
+              {
+                align: "start",
+                onCloseAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                onOpenAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                sideOffset: 4,
+                style: {
+                  maxHeight: 240,
+                  overflowY: "auto",
+                  padding: 0,
+                  width: "var(--radix-dropdown-menu-trigger-width)"
+                },
+                children: filtered.length === 0 && emptyMessage !== null ? /* @__PURE__ */ jsx(Box, { px: "2", py: "2", children: /* @__PURE__ */ jsx(Typo, { color: "gray", children: emptyMessage }) }) : /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    id: listboxId,
+                    ref: listRef,
+                    role: "listbox",
+                    style: { listStyle: "none", margin: 0, padding: 0 },
+                    children: filtered.map((option, index) => {
+                      const isHighlighted = index === highlightedIndex;
+                      return /* @__PURE__ */ jsx(
+                        "li",
+                        {
+                          "aria-selected": isHighlighted,
+                          id: `${listboxId}-option-${index}`,
+                          onMouseEnter: () => {
+                            setHighlightedIndex(index);
+                          },
+                          onPointerDown: (e) => {
+                            e.preventDefault();
+                            handleSelect(option);
+                          },
+                          role: "option",
+                          style: {
+                            padding: "var(--spacing-4) var(--spacing-6)",
+                            cursor: "pointer",
+                            backgroundColor: isHighlighted ? "var(--accent-3)" : "transparent",
+                            transition: "background-color 80ms"
+                          },
+                          children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: option.label })
+                        },
+                        option.value
+                      );
+                    })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+AutocompleteTextfield.displayName = "AutocompleteTextfield";
+
+export {
+  AutocompleteTextfield
+};
+//# sourceMappingURL=chunk-LSDD4TAP.js.map