@ceed/cds 1.17.0 → 1.18.0-next.1

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

@@ -341,9 +341,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");
@@ -432,24 +433,39 @@ 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 optionPaddingMap = {
+  sm: { px: "8px", py: "3px" },
+  md: { px: "12px", py: "4px" },
+  lg: { px: "16px", py: "6px" }
+};
 var AutocompleteListBox = import_react6.default.forwardRef((props, ref) => {
   const {
     anchorEl,
     open,
     modifiers,
     children,
+    hasSecondaryText = false,
     ownerState: { loading, size: fontSize = "md" },
     ...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]];
     }
@@ -463,10 +479,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
@@ -514,19 +530,24 @@ 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 = "md" }) => ({
-  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%"
 }));
 function Autocomplete(props) {
@@ -646,7 +667,18 @@ function Autocomplete(props) {
       slots: {
         listbox: AutocompleteListBox
       },
-      renderOption: (props2, option) => /* @__PURE__ */ import_react6.default.createElement(import_joy10.AutocompleteOption, { ...props2 }, option.startDecorator && /* @__PURE__ */ import_react6.default.createElement(
+      slotProps: {
+        listbox: {
+          hasSecondaryText: options.some((opt) => opt.secondaryText)
+        }
+      },
+      filterOptions: (0, import_base.createFilterOptions)({
+        stringify: (option) => {
+          const opt = option;
+          return opt.secondaryText ? `${opt.label} ${opt.secondaryText}` : opt.label;
+        }
+      }),
+      renderOption: (props2, option) => /* @__PURE__ */ import_react6.default.createElement(import_joy10.AutocompleteOption, { ...props2, sx: optionPaddingMap[size ?? "md"] }, option.startDecorator && /* @__PURE__ */ import_react6.default.createElement(
         import_joy10.ListItemDecorator,
         {
           sx: (theme) => ({
@@ -654,7 +686,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) => ({
@@ -2216,7 +2251,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");
@@ -2252,7 +2287,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 }) => ({
@@ -2465,7 +2500,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,
@@ -2511,7 +2546,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",
@@ -2641,6 +2676,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 {
@@ -2682,6 +2722,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,
     {
@@ -2690,9 +2737,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 }, 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,
@@ -4112,7 +4166,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"
@@ -4123,7 +4177,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 }) => ({
@@ -4366,7 +4420,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,
@@ -4412,7 +4466,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",
@@ -4975,8 +5029,8 @@ MenuButton.displayName = "MenuButton";
 var import_react38 = __toESM(require("react"));
 var import_CalendarToday3 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy49 = require("@mui/joy");
-var import_base4 = require("@mui/base");
-var StyledPopper3 = (0, import_joy49.styled)(import_base4.Popper, {
+var import_base5 = require("@mui/base");
+var StyledPopper3 = (0, import_joy49.styled)(import_base5.Popper, {
   name: "MonthPicker",
   slot: "popper"
 })(({ theme }) => ({
@@ -5108,7 +5162,7 @@ var MonthPicker = (0, import_react38.forwardRef)((inProps, ref) => {
     },
     [buttonRef]
   );
-  return /* @__PURE__ */ import_react38.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react38.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react38.default.createElement(import_base5.FocusTrap, { open: true }, /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(
     Input_default,
     {
       ...innerProps,
@@ -5155,7 +5209,7 @@ var MonthPicker = (0, import_react38.forwardRef)((inProps, ref) => {
       label,
       helperText
     }
-  ), open && /* @__PURE__ */ import_react38.default.createElement(import_base4.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react38.default.createElement(
+  ), open && /* @__PURE__ */ import_react38.default.createElement(import_base5.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react38.default.createElement(
     StyledPopper3,
     {
       id: "month-picker-popper",
@@ -5229,8 +5283,8 @@ var import_react39 = __toESM(require("react"));
 var import_react_imask3 = require("react-imask");
 var import_CalendarToday4 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy50 = require("@mui/joy");
-var import_base5 = require("@mui/base");
-var StyledPopper4 = (0, import_joy50.styled)(import_base5.Popper, {
+var import_base6 = require("@mui/base");
+var StyledPopper4 = (0, import_joy50.styled)(import_base6.Popper, {
   name: "MonthRangePicker",
   slot: "popper"
 })(({ theme }) => ({
@@ -5369,7 +5423,7 @@ var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
     },
     [setValue, setAnchorEl, format]
   );
-  return /* @__PURE__ */ import_react39.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react39.default.createElement(import_base5.FocusTrap, { open: true }, /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react39.default.createElement(import_base6.FocusTrap, { open: true }, /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(
     Input_default,
     {
       ...innerProps,
@@ -5406,7 +5460,7 @@ var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
       label,
       helperText
     }
-  ), open && /* @__PURE__ */ import_react39.default.createElement(import_base5.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react39.default.createElement(
+  ), open && /* @__PURE__ */ import_react39.default.createElement(import_base6.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react39.default.createElement(
     StyledPopper4,
     {
       id: "month-range-picker-popper",

package/dist/index.js

@@ -136,7 +136,7 @@ import {
   listItemClasses,
   ListItemButton as ListItemButton2,
   listItemButtonClasses as listItemButtonClasses2,
-  ListItemContent,
+  ListItemContent as ListItemContent3,
   listItemContentClasses,
   ListItemDecorator as ListItemDecorator2,
   listItemDecoratorClasses,
@@ -249,9 +249,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";
@@ -349,18 +352,33 @@ 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 optionPaddingMap = {
+  sm: { px: "8px", py: "3px" },
+  md: { px: "12px", py: "4px" },
+  lg: { px: "16px", py: "6px" }
+};
 var AutocompleteListBox = React5.forwardRef((props, ref) => {
   const {
     anchorEl,
     open,
     modifiers,
     children,
+    hasSecondaryText = false,
     ownerState: { loading, size: fontSize = "md" },
     ...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]];
     }
@@ -374,10 +392,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
@@ -425,19 +443,24 @@ 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 = "md" }) => ({
-  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%"
 }));
 function Autocomplete(props) {
@@ -557,7 +580,18 @@ function Autocomplete(props) {
       slots: {
         listbox: AutocompleteListBox
       },
-      renderOption: (props2, option) => /* @__PURE__ */ React5.createElement(JoyAutocompleteOption, { ...props2 }, option.startDecorator && /* @__PURE__ */ React5.createElement(
+      slotProps: {
+        listbox: {
+          hasSecondaryText: options.some((opt) => opt.secondaryText)
+        }
+      },
+      filterOptions: createFilterOptions({
+        stringify: (option) => {
+          const opt = option;
+          return opt.secondaryText ? `${opt.label} ${opt.secondaryText}` : opt.label;
+        }
+      }),
+      renderOption: (props2, option) => /* @__PURE__ */ React5.createElement(JoyAutocompleteOption, { ...props2, sx: optionPaddingMap[size ?? "md"] }, option.startDecorator && /* @__PURE__ */ React5.createElement(
         ListItemDecorator,
         {
           sx: (theme) => ({
@@ -565,7 +599,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) => ({
@@ -2575,10 +2612,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 {
@@ -2620,6 +2662,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,
     {
@@ -2628,9 +2677,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 }, 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,
@@ -6514,7 +6570,7 @@ export {
   ListDivider,
   ListItem,
   ListItemButton2 as ListItemButton,
-  ListItemContent,
+  ListItemContent3 as ListItemContent,
   ListItemDecorator2 as ListItemDecorator,
   ListSubheader,
   Markdown,