@ceed/ads 1.18.1-next.1 → 1.19.0-next.2

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -3,6 +3,7 @@ import { AutocompleteProps as JoyAutocompleteProps } from '@mui/joy';
 interface AutocompleteOption {
     value: string;
     label: string;
+    secondaryText?: string;
     startDecorator?: React.ReactNode;
     endDecorator?: React.ReactNode;
 }

package/dist/components/Select/Select.d.ts

@@ -17,6 +17,7 @@ type OptionType = {
     label: string;
     value: string | number;
     disabled?: boolean;
+    secondaryText?: string;
 } | string | number;
 type InferOptionValue<OptionValue> = OptionValue extends {
     value: infer V;

package/dist/index.cjs

@@ -345,9 +345,10 @@ Alert.displayName = "Alert";
 // src/components/Autocomplete/Autocomplete.tsx
 var import_react6 = __toESM(require("react"));
 var import_joy10 = require("@mui/joy");
+var import_base = require("@mui/base");
 var import_Close = __toESM(require("@mui/icons-material/Close"));
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_base = require("@mui/base");
+var import_base2 = require("@mui/base");
 
 // src/components/FormControl/FormControl.tsx
 var import_joy5 = require("@mui/joy");
@@ -431,24 +432,34 @@ function useControlledState(controlledValue, defaultValue, onChange) {
 }
 
 // src/components/Autocomplete/Autocomplete.tsx
-var AutocompletePopper = (0, import_joy10.styled)(import_base.Popper, {
+var AutocompletePopper = (0, import_joy10.styled)(import_base2.Popper, {
   name: "Autocomplete",
   slot: "Popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
+var itemHeightMap = {
+  sm: { default: 32, secondary: 47 },
+  md: { default: 36, secondary: 55 },
+  lg: { default: 44, secondary: 65 }
+};
 var AutocompleteListBox = import_react6.default.forwardRef((props, ref) => {
   const {
     anchorEl,
     open,
     modifiers,
     children,
+    hasSecondaryText = false,
     ownerState: { loading, size: fontSize },
     ...innerProps
   } = props;
   const parentRef = (0, import_react6.useRef)(null);
   const isGrouped = children[0].every((child) => child.hasOwnProperty("group"));
-  const renderTargets = (() => {
+  const itemHeight = (0, import_react6.useMemo)(() => {
+    const heights = itemHeightMap[fontSize ?? "md"];
+    return hasSecondaryText ? heights.secondary : heights.default;
+  }, [fontSize, hasSecondaryText]);
+  const renderTargets = (0, import_react6.useMemo)(() => {
     if (loading) {
       return [children[1]];
     }
@@ -462,10 +473,10 @@ var AutocompleteListBox = import_react6.default.forwardRef((props, ref) => {
       ]);
     }
     return children[0];
-  })();
+  }, [loading, children, isGrouped]);
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: renderTargets.length,
-    estimateSize: () => 36,
+    estimateSize: () => itemHeight,
     getScrollElement: () => parentRef.current,
     measureElement: (element) => element.clientHeight,
     overscan: 5
@@ -476,7 +487,7 @@ var AutocompleteListBox = import_react6.default.forwardRef((props, ref) => {
       virtualizer.measure();
     }
   }, [open, virtualizer]);
-  return /* @__PURE__ */ import_react6.default.createElement(AutocompletePopper, { ref, anchorEl, open, modifiers }, /* @__PURE__ */ import_react6.default.createElement(import_joy10.AutocompleteListbox, { ...innerProps }, /* @__PURE__ */ import_react6.default.createElement("div", { ref: parentRef, style: { overflow: "auto" } }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(AutocompletePopper, { ref, anchorEl, open, modifiers }, /* @__PURE__ */ import_react6.default.createElement(import_joy10.AutocompleteListbox, { ...innerProps, size: fontSize }, /* @__PURE__ */ import_react6.default.createElement("div", { ref: parentRef, style: { overflow: "auto" } }, /* @__PURE__ */ import_react6.default.createElement(
     "div",
     {
       style: {
@@ -513,21 +524,32 @@ var AutocompleteListBox = import_react6.default.forwardRef((props, ref) => {
     )
   ))));
 });
-var AutocompleteDeleteSize = {
+var autocompleteDeleteSize = {
   sm: "20px",
   md: "24px",
   lg: "28px"
 };
+var secondaryTextLevelMap = {
+  sm: "body-xs",
+  md: "body-sm",
+  lg: "body-md"
+};
 var AutocompleteTagDelete = (0, import_joy10.styled)(IconButton_default, {
   name: "Autocomplete",
   slot: "tagDelete"
 })(({ theme, size = "sm" }) => ({
-  width: AutocompleteDeleteSize[size],
-  height: AutocompleteDeleteSize[size],
-  minWidth: AutocompleteDeleteSize[size],
-  minHeight: AutocompleteDeleteSize[size],
+  width: autocompleteDeleteSize[size],
+  height: autocompleteDeleteSize[size],
+  minWidth: autocompleteDeleteSize[size],
+  minHeight: autocompleteDeleteSize[size],
   borderRadius: "50%"
 }));
+var autocompleteFilterOptions = (0, import_base.createFilterOptions)({
+  stringify: (option) => {
+    return option.secondaryText ? `${option.label} ${option.secondaryText}` : option.label;
+  }
+});
+var getOptionLabel = (option) => `${option.label ?? ""}`;
 function Autocomplete(props) {
   const {
     label,
@@ -603,6 +625,14 @@ function Autocomplete(props) {
     () => applySize(value?.endDecorator || props.endDecorator),
     [value, applySize, props.endDecorator]
   );
+  const slotProps = (0, import_react6.useMemo)(
+    () => ({
+      listbox: {
+        hasSecondaryText: options.some((opt) => opt.secondaryText)
+      }
+    }),
+    [options]
+  );
   const handleChange = (0, import_react6.useCallback)(
     (event, value2) => {
       const newValue = value2;
@@ -633,7 +663,7 @@ function Autocomplete(props) {
       disabled,
       startDecorator,
       endDecorator,
-      getOptionLabel: (option) => `${option.label ?? ""}`,
+      getOptionLabel,
       renderTags: (tags, getTagProps) => tags.map((tag, index) => {
         const { onClick, ...rest } = getTagProps({ index });
         return applySize(
@@ -645,6 +675,8 @@ function Autocomplete(props) {
       slots: {
         listbox: AutocompleteListBox
       },
+      slotProps,
+      filterOptions: autocompleteFilterOptions,
       renderOption: (props2, option) => /* @__PURE__ */ import_react6.default.createElement(import_joy10.AutocompleteOption, { ...props2 }, option.startDecorator && /* @__PURE__ */ import_react6.default.createElement(
         import_joy10.ListItemDecorator,
         {
@@ -653,7 +685,10 @@ function Autocomplete(props) {
           })
         },
         applySize(option.startDecorator)
-      ), applySize(option.label), option.endDecorator && /* @__PURE__ */ import_react6.default.createElement(
+      ), option.secondaryText ? /* @__PURE__ */ import_react6.default.createElement(import_joy10.ListItemContent, { sx: { gap: 0.5 } }, /* @__PURE__ */ import_react6.default.createElement(import_joy10.Typography, { level: "inherit" }, applySize(option.label)), /* @__PURE__ */ import_react6.default.createElement(import_joy10.Typography, { level: secondaryTextLevelMap[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : (
+        // TODO: haulla에서 사용할 때, label을 ReactNode로 넘기면 에러가 발생함....
+        applySize(option.label)
+      ), option.endDecorator && /* @__PURE__ */ import_react6.default.createElement(
         import_joy10.ListItemDecorator,
         {
           sx: (theme) => ({
@@ -2215,7 +2250,7 @@ var import_react19 = __toESM(require("react"));
 var import_react_imask = require("react-imask");
 var import_CalendarToday = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy27 = require("@mui/joy");
-var import_base2 = require("@mui/base");
+var import_base3 = require("@mui/base");
 
 // src/components/Sheet/Sheet.tsx
 var import_joy25 = require("@mui/joy");
@@ -2251,7 +2286,7 @@ var CalendarButton = (0, import_joy27.styled)(IconButton_default, {
     outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
   }
 }));
-var StyledPopper = (0, import_joy27.styled)(import_base2.Popper, {
+var StyledPopper = (0, import_joy27.styled)(import_base3.Popper, {
   name: "DatePicker",
   slot: "popper"
 })(({ theme }) => ({
@@ -2464,7 +2499,7 @@ var DatePicker = (0, import_react19.forwardRef)((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
-  return /* @__PURE__ */ import_react19.default.createElement(DatePickerRoot, null, /* @__PURE__ */ import_react19.default.createElement(import_base2.FocusTrap, { open: true }, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(DatePickerRoot, null, /* @__PURE__ */ import_react19.default.createElement(import_base3.FocusTrap, { open: true }, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
     Input_default,
     {
       ...innerProps,
@@ -2510,7 +2545,7 @@ var DatePicker = (0, import_react19.forwardRef)((inProps, ref) => {
       helperText,
       readOnly: readOnly || inputReadOnly
     }
-  ), open && /* @__PURE__ */ import_react19.default.createElement(import_base2.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react19.default.createElement(
+  ), open && /* @__PURE__ */ import_react19.default.createElement(import_base3.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react19.default.createElement(
     StyledPopper,
     {
       id: "date-picker-popper",
@@ -2640,6 +2675,11 @@ var import_joy29 = require("@mui/joy");
 var import_framer_motion19 = require("framer-motion");
 var MotionOption = (0, import_framer_motion19.motion)(import_joy29.Option);
 var Option = MotionOption;
+var secondaryTextLevelMap2 = {
+  sm: "body-xs",
+  md: "body-sm",
+  lg: "body-md"
+};
 Option.displayName = "Option";
 function Select(props) {
   const {
@@ -2681,6 +2721,13 @@ function Select(props) {
     };
     onChange?.(newEvent, newValue);
   };
+  const optionMap = (0, import_react21.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    options.forEach((option) => {
+      map.set(option.value, option);
+    });
+    return map;
+  }, [options]);
   const select = /* @__PURE__ */ import_react21.default.createElement(
     import_joy29.Select,
     {
@@ -2689,9 +2736,16 @@ function Select(props) {
       disabled,
       size,
       color: error ? "danger" : color,
-      onChange: handleChange
+      onChange: handleChange,
+      renderValue: (selected) => {
+        if (!selected) return null;
+        if (Array.isArray(selected)) {
+          return selected.map((s) => optionMap.get(s.value)?.label).join(", ");
+        }
+        return optionMap.get(selected.value)?.label;
+      }
     },
-    options.map((option) => /* @__PURE__ */ import_react21.default.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.label))
+    options.map((option) => /* @__PURE__ */ import_react21.default.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ import_react21.default.createElement(import_joy29.ListItemContent, { sx: { gap: 0.5 } }, /* @__PURE__ */ import_react21.default.createElement(import_joy29.Typography, { level: "inherit" }, option.label), /* @__PURE__ */ import_react21.default.createElement(import_joy29.Typography, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
   );
   return /* @__PURE__ */ import_react21.default.createElement(
     FormControl_default,
@@ -4111,7 +4165,7 @@ var import_react29 = __toESM(require("react"));
 var import_react_imask2 = require("react-imask");
 var import_CalendarToday2 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy36 = require("@mui/joy");
-var import_base3 = require("@mui/base");
+var import_base4 = require("@mui/base");
 var CalendarButton2 = (0, import_joy36.styled)(IconButton_default, {
   name: "DateRangePicker",
   slot: "calendarButton"
@@ -4122,7 +4176,7 @@ var CalendarButton2 = (0, import_joy36.styled)(IconButton_default, {
     outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
   }
 }));
-var StyledPopper2 = (0, import_joy36.styled)(import_base3.Popper, {
+var StyledPopper2 = (0, import_joy36.styled)(import_base4.Popper, {
   name: "DateRangePicker",
   slot: "popper"
 })(({ theme }) => ({
@@ -4365,7 +4419,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
-  return /* @__PURE__ */ import_react29.default.createElement(DateRangePickerRoot, null, /* @__PURE__ */ import_react29.default.createElement(import_base3.FocusTrap, { open: true }, /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(DateRangePickerRoot, null, /* @__PURE__ */ import_react29.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
     Input_default,
     {
       ...innerProps,
@@ -4411,7 +4465,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
       helperText,
       readOnly: readOnly || inputReadOnly
     }
-  ), open && /* @__PURE__ */ import_react29.default.createElement(import_base3.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react29.default.createElement(
+  ), open && /* @__PURE__ */ import_react29.default.createElement(import_base4.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react29.default.createElement(
     StyledPopper2,
     {
       id: "date-range-picker-popper",
@@ -5982,8 +6036,8 @@ MenuButton.displayName = "MenuButton";
 var import_react49 = __toESM(require("react"));
 var import_CalendarToday3 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy61 = require("@mui/joy");
-var import_base4 = require("@mui/base");
-var StyledPopper3 = (0, import_joy61.styled)(import_base4.Popper, {
+var import_base5 = require("@mui/base");
+var StyledPopper3 = (0, import_joy61.styled)(import_base5.Popper, {
   name: "MonthPicker",
   slot: "popper"
 })(({ theme }) => ({
@@ -6115,7 +6169,7 @@ var MonthPicker = (0, import_react49.forwardRef)((inProps, ref) => {
     },
     [buttonRef]
   );
-  return /* @__PURE__ */ import_react49.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react49.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react49.default.createElement(import_base5.FocusTrap, { open: true }, /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement(
     Input_default,
     {
       ...innerProps,
@@ -6162,7 +6216,7 @@ var MonthPicker = (0, import_react49.forwardRef)((inProps, ref) => {
       label,
       helperText
     }
-  ), open && /* @__PURE__ */ import_react49.default.createElement(import_base4.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react49.default.createElement(
+  ), open && /* @__PURE__ */ import_react49.default.createElement(import_base5.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react49.default.createElement(
     StyledPopper3,
     {
       id: "month-picker-popper",
@@ -6236,8 +6290,8 @@ var import_react50 = __toESM(require("react"));
 var import_react_imask3 = require("react-imask");
 var import_CalendarToday4 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy62 = require("@mui/joy");
-var import_base5 = require("@mui/base");
-var StyledPopper4 = (0, import_joy62.styled)(import_base5.Popper, {
+var import_base6 = require("@mui/base");
+var StyledPopper4 = (0, import_joy62.styled)(import_base6.Popper, {
   name: "MonthRangePicker",
   slot: "popper"
 })(({ theme }) => ({
@@ -6376,7 +6430,7 @@ var MonthRangePicker = (0, import_react50.forwardRef)((inProps, ref) => {
     },
     [setValue, setAnchorEl, format]
   );
-  return /* @__PURE__ */ import_react50.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react50.default.createElement(import_base5.FocusTrap, { open: true }, /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react50.default.createElement(import_base6.FocusTrap, { open: true }, /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(
     Input_default,
     {
       ...innerProps,
@@ -6413,7 +6467,7 @@ var MonthRangePicker = (0, import_react50.forwardRef)((inProps, ref) => {
       label,
       helperText
     }
-  ), open && /* @__PURE__ */ import_react50.default.createElement(import_base5.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react50.default.createElement(
+  ), open && /* @__PURE__ */ import_react50.default.createElement(import_base6.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react50.default.createElement(
     StyledPopper4,
     {
       id: "month-range-picker-popper",
@@ -6584,7 +6638,7 @@ Navigator.displayName = "Navigator";
 // src/components/ProfileMenu/ProfileMenu.tsx
 var import_react54 = __toESM(require("react"));
 var import_joy65 = require("@mui/joy");
-var import_base6 = require("@mui/base");
+var import_base7 = require("@mui/base");
 var import_ArrowDropDown = __toESM(require("@mui/icons-material/ArrowDropDown"));
 var StyledProfileCard = (0, import_joy65.styled)(import_joy3.Stack, {
   name: "ProfileMenu",
@@ -6636,7 +6690,7 @@ function ProfileMenu(props) {
     defaultOpen ?? false,
     (0, import_react54.useCallback)((value) => onOpenChange?.(value), [onOpenChange])
   );
-  return /* @__PURE__ */ import_react54.default.createElement(import_base6.ClickAwayListener, { onClickAway: () => setOpen(false) }, /* @__PURE__ */ import_react54.default.createElement("div", null, /* @__PURE__ */ import_react54.default.createElement(import_joy65.Dropdown, { open }, /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(import_base7.ClickAwayListener, { onClickAway: () => setOpen(false) }, /* @__PURE__ */ import_react54.default.createElement("div", null, /* @__PURE__ */ import_react54.default.createElement(import_joy65.Dropdown, { open }, /* @__PURE__ */ import_react54.default.createElement(
     ProfileMenuButton,
     {
       size,

package/dist/index.js

@@ -131,7 +131,7 @@ import {
   listItemClasses,
   ListItemButton as ListItemButton2,
   listItemButtonClasses as listItemButtonClasses2,
-  ListItemContent,
+  ListItemContent as ListItemContent3,
   listItemContentClasses,
   ListItemDecorator as ListItemDecorator2,
   listItemDecoratorClasses,
@@ -244,9 +244,12 @@ import {
   ListSubheader as JoyListSubheader,
   AutocompleteListbox as JoyAutocompleteListbox,
   ListItemDecorator,
+  ListItemContent,
+  Typography as Typography2,
   CircularProgress,
   styled as styled3
 } from "@mui/joy";
+import { createFilterOptions } from "@mui/base";
 import CloseIcon from "@mui/icons-material/Close";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Popper } from "@mui/base";
@@ -339,18 +342,28 @@ var AutocompletePopper = styled3(Popper, {
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
+var itemHeightMap = {
+  sm: { default: 32, secondary: 47 },
+  md: { default: 36, secondary: 55 },
+  lg: { default: 44, secondary: 65 }
+};
 var AutocompleteListBox = React5.forwardRef((props, ref) => {
   const {
     anchorEl,
     open,
     modifiers,
     children,
+    hasSecondaryText = false,
     ownerState: { loading, size: fontSize },
     ...innerProps
   } = props;
   const parentRef = useRef2(null);
   const isGrouped = children[0].every((child) => child.hasOwnProperty("group"));
-  const renderTargets = (() => {
+  const itemHeight = useMemo(() => {
+    const heights = itemHeightMap[fontSize ?? "md"];
+    return hasSecondaryText ? heights.secondary : heights.default;
+  }, [fontSize, hasSecondaryText]);
+  const renderTargets = useMemo(() => {
     if (loading) {
       return [children[1]];
     }
@@ -364,10 +377,10 @@ var AutocompleteListBox = React5.forwardRef((props, ref) => {
       ]);
     }
     return children[0];
-  })();
+  }, [loading, children, isGrouped]);
   const virtualizer = useVirtualizer({
     count: renderTargets.length,
-    estimateSize: () => 36,
+    estimateSize: () => itemHeight,
     getScrollElement: () => parentRef.current,
     measureElement: (element) => element.clientHeight,
     overscan: 5
@@ -378,7 +391,7 @@ var AutocompleteListBox = React5.forwardRef((props, ref) => {
       virtualizer.measure();
     }
   }, [open, virtualizer]);
-  return /* @__PURE__ */ React5.createElement(AutocompletePopper, { ref, anchorEl, open, modifiers }, /* @__PURE__ */ React5.createElement(JoyAutocompleteListbox, { ...innerProps }, /* @__PURE__ */ React5.createElement("div", { ref: parentRef, style: { overflow: "auto" } }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement(AutocompletePopper, { ref, anchorEl, open, modifiers }, /* @__PURE__ */ React5.createElement(JoyAutocompleteListbox, { ...innerProps, size: fontSize }, /* @__PURE__ */ React5.createElement("div", { ref: parentRef, style: { overflow: "auto" } }, /* @__PURE__ */ React5.createElement(
     "div",
     {
       style: {
@@ -415,21 +428,32 @@ var AutocompleteListBox = React5.forwardRef((props, ref) => {
     )
   ))));
 });
-var AutocompleteDeleteSize = {
+var autocompleteDeleteSize = {
   sm: "20px",
   md: "24px",
   lg: "28px"
 };
+var secondaryTextLevelMap = {
+  sm: "body-xs",
+  md: "body-sm",
+  lg: "body-md"
+};
 var AutocompleteTagDelete = styled3(IconButton_default, {
   name: "Autocomplete",
   slot: "tagDelete"
 })(({ theme, size = "sm" }) => ({
-  width: AutocompleteDeleteSize[size],
-  height: AutocompleteDeleteSize[size],
-  minWidth: AutocompleteDeleteSize[size],
-  minHeight: AutocompleteDeleteSize[size],
+  width: autocompleteDeleteSize[size],
+  height: autocompleteDeleteSize[size],
+  minWidth: autocompleteDeleteSize[size],
+  minHeight: autocompleteDeleteSize[size],
   borderRadius: "50%"
 }));
+var autocompleteFilterOptions = createFilterOptions({
+  stringify: (option) => {
+    return option.secondaryText ? `${option.label} ${option.secondaryText}` : option.label;
+  }
+});
+var getOptionLabel = (option) => `${option.label ?? ""}`;
 function Autocomplete(props) {
   const {
     label,
@@ -505,6 +529,14 @@ function Autocomplete(props) {
     () => applySize(value?.endDecorator || props.endDecorator),
     [value, applySize, props.endDecorator]
   );
+  const slotProps = useMemo(
+    () => ({
+      listbox: {
+        hasSecondaryText: options.some((opt) => opt.secondaryText)
+      }
+    }),
+    [options]
+  );
   const handleChange = useCallback2(
     (event, value2) => {
       const newValue = value2;
@@ -535,7 +567,7 @@ function Autocomplete(props) {
       disabled,
       startDecorator,
       endDecorator,
-      getOptionLabel: (option) => `${option.label ?? ""}`,
+      getOptionLabel,
       renderTags: (tags, getTagProps) => tags.map((tag, index) => {
         const { onClick, ...rest } = getTagProps({ index });
         return applySize(
@@ -547,6 +579,8 @@ function Autocomplete(props) {
       slots: {
         listbox: AutocompleteListBox
       },
+      slotProps,
+      filterOptions: autocompleteFilterOptions,
       renderOption: (props2, option) => /* @__PURE__ */ React5.createElement(JoyAutocompleteOption, { ...props2 }, option.startDecorator && /* @__PURE__ */ React5.createElement(
         ListItemDecorator,
         {
@@ -555,7 +589,10 @@ function Autocomplete(props) {
           })
         },
         applySize(option.startDecorator)
-      ), applySize(option.label), option.endDecorator && /* @__PURE__ */ React5.createElement(
+      ), option.secondaryText ? /* @__PURE__ */ React5.createElement(ListItemContent, { sx: { gap: 0.5 } }, /* @__PURE__ */ React5.createElement(Typography2, { level: "inherit" }, applySize(option.label)), /* @__PURE__ */ React5.createElement(Typography2, { level: secondaryTextLevelMap[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : (
+        // TODO: haulla에서 사용할 때, label을 ReactNode로 넘기면 에러가 발생함....
+        applySize(option.label)
+      ), option.endDecorator && /* @__PURE__ */ React5.createElement(
         ListItemDecorator,
         {
           sx: (theme) => ({
@@ -2565,10 +2602,15 @@ var Textarea_default = Textarea;
 
 // src/components/Select/Select.tsx
 import React19, { useMemo as useMemo7 } from "react";
-import { Select as JoySelect, Option as JoyOption } from "@mui/joy";
+import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography3 } from "@mui/joy";
 import { motion as motion19 } from "framer-motion";
 var MotionOption = motion19(JoyOption);
 var Option = MotionOption;
+var secondaryTextLevelMap2 = {
+  sm: "body-xs",
+  md: "body-sm",
+  lg: "body-md"
+};
 Option.displayName = "Option";
 function Select(props) {
   const {
@@ -2610,6 +2652,13 @@ function Select(props) {
     };
     onChange?.(newEvent, newValue);
   };
+  const optionMap = useMemo7(() => {
+    const map = /* @__PURE__ */ new Map();
+    options.forEach((option) => {
+      map.set(option.value, option);
+    });
+    return map;
+  }, [options]);
   const select = /* @__PURE__ */ React19.createElement(
     JoySelect,
     {
@@ -2618,9 +2667,16 @@ function Select(props) {
       disabled,
       size,
       color: error ? "danger" : color,
-      onChange: handleChange
+      onChange: handleChange,
+      renderValue: (selected) => {
+        if (!selected) return null;
+        if (Array.isArray(selected)) {
+          return selected.map((s) => optionMap.get(s.value)?.label).join(", ");
+        }
+        return optionMap.get(selected.value)?.label;
+      }
     },
-    options.map((option) => /* @__PURE__ */ React19.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.label))
+    options.map((option) => /* @__PURE__ */ React19.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React19.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React19.createElement(Typography3, { level: "inherit" }, option.label), /* @__PURE__ */ React19.createElement(Typography3, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
   );
   return /* @__PURE__ */ React19.createElement(
     FormControl_default,
@@ -5062,7 +5118,7 @@ CurrencyRange.displayName = "CurrencyRange";
 
 // src/components/FilterMenu/components/PercentageInput.tsx
 import React38 from "react";
-import { Stack as Stack8, Typography as Typography2 } from "@mui/joy";
+import { Stack as Stack8, Typography as Typography4 } from "@mui/joy";
 
 // src/components/PercentageInput/PercentageInput.tsx
 import React37, { useCallback as useCallback20, useMemo as useMemo14, useState as useState12 } from "react";
@@ -5197,7 +5253,7 @@ var PercentageInput3 = ({
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React38.createElement(Stack8, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React38.createElement(Typography2, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React38.createElement(Stack8, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React38.createElement(Typography4, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React38.createElement(
     PercentageInput,
     {
       value: _value,
@@ -7293,7 +7349,7 @@ export {
   ListDivider2 as ListDivider,
   ListItem,
   ListItemButton2 as ListItemButton,
-  ListItemContent,
+  ListItemContent3 as ListItemContent,
   ListItemDecorator2 as ListItemDecorator,
   ListSubheader,
   Markdown,