@ceed/ads 1.37.0-next.1 → 1.37.1

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   useTheme as useTheme2,
   useColorScheme,
-  useThemeProps as useThemeProps14,
+  useThemeProps as useThemeProps10,
   ButtonGroup,
   alertClasses,
   boxClasses,
@@ -136,7 +136,7 @@ Accordions.displayName = "Accordions";
 
 // src/components/Alert/Alert.tsx
 import React3 from "react";
-import { Alert as JoyAlert, styled, useThemeProps } from "@mui/joy";
+import { Alert as JoyAlert, styled } from "@mui/joy";
 import { motion as motion3 } from "framer-motion";
 
 // src/components/Typography/Typography.tsx
@@ -173,9 +173,8 @@ var contentLevelMapping = {
   md: "body-sm",
   lg: "body-md"
 };
-function Alert(inProps) {
-  const props = useThemeProps({ props: inProps, name: "Alert" });
-  const { title, content, actions, color = "primary", size = "sm", ...innerProps } = props;
+function Alert(props) {
+  const { title, content, actions, color = "primary", size = "md", ...innerProps } = props;
   const invertedColors = props.invertedColors || props.variant === "solid";
   return /* @__PURE__ */ React3.createElement(MotionAlert, { ...innerProps, color, endDecorator: actions, invertedColors, size }, /* @__PURE__ */ React3.createElement(Stack_default, null, title && /* @__PURE__ */ React3.createElement(Typography_default, { level: titleLevelMapping[size], fontWeight: "bold", color }, title), /* @__PURE__ */ React3.createElement(Typography_default, { level: contentLevelMapping[size], fontWeight: 500, color }, content)));
 }
@@ -574,7 +573,7 @@ var Autocomplete_default = Autocomplete;
 
 // src/components/Avatar/Avatar.tsx
 import React6, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
-import { Avatar as JoyAvatar, AvatarGroup, styled as styled4, useThemeProps as useThemeProps2 } from "@mui/joy";
+import { Avatar as JoyAvatar, AvatarGroup, styled as styled4, useThemeProps } from "@mui/joy";
 var StyledAvatar = styled4(JoyAvatar, {
   name: "Avatar",
   slot: "Root",
@@ -596,7 +595,7 @@ var defaultGetInitial = (name) => {
   }
 };
 var Avatar = forwardRef2(function Avatar2(inProps, ref) {
-  const props = useThemeProps2({
+  const props = useThemeProps({
     props: inProps,
     name: "Avatar"
   });
@@ -816,7 +815,7 @@ var isSameMonth = (date1, date2) => {
 
 // src/components/Calendar/hooks/use-calendar-props.ts
 import { useCallback as useCallback4, useMemo as useMemo4, useState as useState3 } from "react";
-import { useThemeProps as useThemeProps3 } from "@mui/joy";
+import { useThemeProps as useThemeProps2 } from "@mui/joy";
 var resolveView = (view, views) => {
   return views.includes(view) ? view : views[0];
 };
@@ -865,7 +864,7 @@ var useCalendarProps = (inProps) => {
     },
     [resolvedView, inProps, viewMonth, paginate]
   );
-  const props = useThemeProps3({
+  const props = useThemeProps2({
     props: {
       locale: "default",
       views: ["day", "month"],
@@ -1917,7 +1916,7 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-import { styled as styled7, useThemeProps as useThemeProps4 } from "@mui/joy";
+import { styled as styled7, useThemeProps as useThemeProps3 } from "@mui/joy";
 
 // src/components/CurrencyInput/hooks/use-currency-setting.ts
 var CURRENCY_DECIMAL_MAP = {
@@ -2103,7 +2102,7 @@ var CurrencyInputRoot = styled7(Input_default, {
   overridesResolver: (props, styles) => styles.root
 })({});
 var CurrencyInput = React17.forwardRef(function CurrencyInput2(inProps, ref) {
-  const props = useThemeProps4({ props: inProps, name: "CurrencyInput" });
+  const props = useThemeProps3({ props: inProps, name: "CurrencyInput" });
   const {
     currency = "USD",
     name,
@@ -2631,7 +2630,7 @@ import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 import React19, { forwardRef as forwardRef6, useCallback as useCallback9, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
 import { IMaskInput, IMask } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
-import { styled as styled10, useThemeProps as useThemeProps5 } from "@mui/joy";
+import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
 import { FocusTrap, ClickAwayListener, Popper as Popper2 } from "@mui/base";
 
 // src/components/Sheet/Sheet.tsx
@@ -2819,7 +2818,7 @@ var TextMaskAdapter3 = React19.forwardRef(function TextMaskAdapter4(props, ref)
   );
 });
 var DatePicker = forwardRef6((inProps, ref) => {
-  const props = useThemeProps5({ props: inProps, name: "DatePicker" });
+  const props = useThemeProps4({ props: inProps, name: "DatePicker" });
   const {
     onChange,
     disabled,
@@ -3166,11 +3165,22 @@ function Select(props) {
     disabled,
     required,
     onChange,
+    // NOTE: id 를 FormControl 에 넘겨 htmlFor/labelId(`${id}-label`)를 결정론적으로 만든다.
+    // Joy FormControl context 가 FormLabel(id) ↔ Select button(aria-labelledby)을 자동 결선하므로,
+    // 외부에서 useId 로 라벨/버튼 ARIA 를 수동 결합할 필요가 없다.
+    id,
+    slotProps,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
     ...innerProps
   } = props;
+  const {
+    formControl: formControlProps,
+    formLabel: formLabelProps,
+    formHelperText: formHelperTextProps,
+    ...joySlotProps
+  } = slotProps ?? {};
   const options = useMemo8(
     () => props.options.map((option) => {
       if (option.hasOwnProperty("value") && option.hasOwnProperty("label")) {
@@ -3211,6 +3221,7 @@ function Select(props) {
       disabled,
       size,
       color: error ? "danger" : color,
+      slotProps: joySlotProps,
       onChange: handleChange,
       renderValue: (selected) => {
         if (!selected) return null;
@@ -3230,12 +3241,14 @@ function Select(props) {
       size,
       color,
       error,
+      id,
       sx,
-      className
+      className,
+      ...formControlProps
     },
-    label && /* @__PURE__ */ React21.createElement(FormLabel_default, null, label),
+    label && /* @__PURE__ */ React21.createElement(FormLabel_default, { ...formLabelProps }, label),
     select,
-    helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default, null, helperText)
+    helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default, { ...formHelperTextProps }, helperText)
   );
 }
 Select.displayName = "Select";
@@ -4199,7 +4212,7 @@ import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
 import NextIcon from "@mui/icons-material/ChevronRightRounded";
 import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
 import LastPageIcon from "@mui/icons-material/LastPageRounded";
-import { styled as styled13, useThemeProps as useThemeProps6 } from "@mui/joy";
+import { styled as styled13 } from "@mui/joy";
 var PaginationButton = styled13(Button_default, {
   name: "Pagination",
   slot: "button"
@@ -4250,14 +4263,13 @@ var PaginationContainer = styled13(Stack_default, {
     lg: theme.spacing(2)
   }[size]
 }));
-function Pagination(inProps) {
-  const props = useThemeProps6({ props: inProps, name: "Pagination" });
+function Pagination(props) {
   const {
     paginationModel: _paginationModel,
     defaultPaginationModel = { page: 1, pageSize: 25 },
     onPageChange,
     rowCount,
-    size = "sm",
+    size = "md",
     variant = "standard",
     ...innerProps
   } = props;
@@ -4912,7 +4924,7 @@ DataTable.displayName = "DataTable";
 import React27, { forwardRef as forwardRef8, useCallback as useCallback14, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo12, useRef as useRef8, useState as useState11 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
-import { styled as styled14, useThemeProps as useThemeProps7 } from "@mui/joy";
+import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
 import { FocusTrap as FocusTrap2, ClickAwayListener as ClickAwayListener2, Popper as Popper3 } from "@mui/base";
 var hasAlphabeticMonth2 = (format) => /MMMM|MMM/.test(format);
 var CalendarButton2 = styled14(IconButton_default, {
@@ -5088,7 +5100,7 @@ var TextMaskAdapter5 = React27.forwardRef(function TextMaskAdapter6(props, ref)
   );
 });
 var DateRangePicker = forwardRef8((inProps, ref) => {
-  const props = useThemeProps7({ props: inProps, name: "DateRangePicker" });
+  const props = useThemeProps5({ props: inProps, name: "DateRangePicker" });
   const {
     onChange,
     disabled,
@@ -5462,7 +5474,6 @@ var InsetDrawer = styled19(JoyDrawer)(({ theme }) => ({
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
 import React31, { useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo13, useRef as useRef9, useState as useState12 } from "react";
 import SearchIcon from "@mui/icons-material/Search";
-import { useThemeProps as useThemeProps8 } from "@mui/joy";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 function LabelWithTooltip(props) {
   const { label, size } = props;
@@ -5495,15 +5506,14 @@ function LabelWithTooltip(props) {
   }
   return labelContent;
 }
-function FilterableCheckboxGroup(inProps) {
-  const props = useThemeProps8({ props: inProps, name: "FilterableCheckboxGroup" });
+function FilterableCheckboxGroup(props) {
   const {
     value,
     options,
     label,
     placeholder,
     helperText,
-    size = "sm",
+    size = "md",
     required,
     onChange,
     maxHeight = 300,
@@ -5936,7 +5946,7 @@ import { Stack as Stack6 } from "@mui/joy";
 import React36, { forwardRef as forwardRef9, useCallback as useCallback20, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useMemo as useMemo15, useRef as useRef10, useState as useState14 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
-import { styled as styled20, useThemeProps as useThemeProps9 } from "@mui/joy";
+import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
 var hasAlphabeticMonth3 = (format) => /MMMM|MMM/.test(format);
 var StyledPopper3 = styled20(Popper4, {
@@ -6025,7 +6035,7 @@ var TextMaskAdapter7 = React36.forwardRef(function TextMaskAdapter8(props, ref)
   );
 });
 var MonthRangePicker = forwardRef9((inProps, ref) => {
-  const props = useThemeProps9({ props: inProps, name: "MonthRangePicker" });
+  const props = useThemeProps6({ props: inProps, name: "MonthRangePicker" });
   const {
     onChange,
     disabled,
@@ -6380,7 +6390,7 @@ import { Stack as Stack9, Typography as Typography5 } from "@mui/joy";
 // src/components/PercentageInput/PercentageInput.tsx
 import React40, { useCallback as useCallback24, useMemo as useMemo17, useState as useState15 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
-import { styled as styled21, useThemeProps as useThemeProps10 } from "@mui/joy";
+import { styled as styled21, useThemeProps as useThemeProps7 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
@@ -6414,7 +6424,7 @@ var PercentageInputRoot = styled21(Input_default, {
 })({});
 var PercentageInput = React40.forwardRef(
   function PercentageInput2(inProps, ref) {
-    const props = useThemeProps10({ props: inProps, name: "PercentageInput" });
+    const props = useThemeProps7({ props: inProps, name: "PercentageInput" });
     const {
       name,
       onChange,
@@ -6701,7 +6711,7 @@ function FilterMenu(props) {
         }
       ) : null;
     }))),
-    /* @__PURE__ */ React44.createElement(DialogActions, { sx: { justifyContent: "space-between" } }, useClear && filters?.length === 1 && /* @__PURE__ */ React44.createElement(Button2, { variant: "plain", color: "neutral", onClick: handleClear }, "Clear"), useReset && !useClear && /* @__PURE__ */ React44.createElement(Button2, { variant: "plain", color: "neutral", onClick: handleClear }, "Reset"), /* @__PURE__ */ React44.createElement(Button2, { variant: "solid", color: "primary", onClick: handleApply }, "Apply"))
+    /* @__PURE__ */ React44.createElement(DialogActions, { sx: { justifyContent: "space-between" } }, useClear && filters?.length === 1 && /* @__PURE__ */ React44.createElement(Button2, { variant: "plain", color: "neutral", size: "md", onClick: handleClear }, "Clear"), useReset && !useClear && /* @__PURE__ */ React44.createElement(Button2, { variant: "plain", color: "neutral", size: "md", onClick: handleClear }, "Reset"), /* @__PURE__ */ React44.createElement(Button2, { variant: "solid", color: "primary", size: "md", onClick: handleApply }, "Apply"))
   );
 }
 FilterMenu.displayName = "FilterMenu";
@@ -7154,7 +7164,14 @@ var Markdown = (props) => {
   return /* @__PURE__ */ React47.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React47.createElement(
     Suspense,
     {
-      fallback: fallback || /* @__PURE__ */ React47.createElement(Typography, null, /* @__PURE__ */ React47.createElement(Skeleton, null, content || ""))
+      fallback: (
+        // While in the fallback state, prevent browser auto-translation (e.g. Chrome/Google Translate)
+        // from wrapping text nodes in <font> tags. Once the lazy react-markdown chunk arrives, React
+        // swaps the fallback for the real content via insertBefore; if the browser has mutated the DOM
+        // in the meantime, the reference node's parent changes and React throws a DOMException
+        // ("Failed to execute 'insertBefore' on 'Node'"), crashing the subtree. (cf. facebook/react#11538)
+        fallback || /* @__PURE__ */ React47.createElement(Typography, { translate: "no", className: "notranslate" }, /* @__PURE__ */ React47.createElement(Skeleton, null, content || ""))
+      )
     },
     /* @__PURE__ */ React47.createElement(
       LazyReactMarkdown,
@@ -7305,7 +7322,7 @@ MenuButton2.displayName = "MenuButton";
 // src/components/MonthPicker/MonthPicker.tsx
 import React49, { forwardRef as forwardRef10, useCallback as useCallback29, useEffect as useEffect15, useImperativeHandle as useImperativeHandle5, useRef as useRef12, useState as useState18 } from "react";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
-import { styled as styled23, useThemeProps as useThemeProps11 } from "@mui/joy";
+import { styled as styled23, useThemeProps as useThemeProps8 } from "@mui/joy";
 import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
 var StyledPopper4 = styled23(Popper5, {
   name: "MonthPicker",
@@ -7360,7 +7377,7 @@ function parseDate4(dateString, format) {
   return result;
 }
 var MonthPicker = forwardRef10((inProps, ref) => {
-  const props = useThemeProps11({ props: inProps, name: "MonthPicker" });
+  const props = useThemeProps8({ props: inProps, name: "MonthPicker" });
   const {
     onChange,
     disabled,
@@ -7682,7 +7699,7 @@ Navigator.displayName = "Navigator";
 
 // src/components/ProfileMenu/ProfileMenu.tsx
 import React53, { useCallback as useCallback30, useMemo as useMemo19 } from "react";
-import { Dropdown as Dropdown2, ListDivider, menuItemClasses, styled as styled26, MenuButton as MenuButton3, useThemeProps as useThemeProps12 } from "@mui/joy";
+import { Dropdown as Dropdown2, ListDivider, menuItemClasses, styled as styled26, MenuButton as MenuButton3 } from "@mui/joy";
 import { ClickAwayListener as ClickAwayListener5 } from "@mui/base";
 import DropdownIcon from "@mui/icons-material/ArrowDropDown";
 var StyledProfileCard = styled26(Stack, {
@@ -7704,7 +7721,7 @@ var StyledProfileMenuButton = styled26(MenuButton3, {
   "--Button-gap": theme.spacing(1)
 }));
 function ProfileMenuButton(props) {
-  const { size = "sm", src, alt, children, getInitial, ...innerProps } = props;
+  const { size = "md", src, alt, children, getInitial, ...innerProps } = props;
   return /* @__PURE__ */ React53.createElement(
     StyledProfileMenuButton,
     {
@@ -7728,8 +7745,7 @@ var ProfileMenuRoot = styled26(Menu, {
     border: "none"
   }
 }));
-function ProfileMenu(inProps) {
-  const props = useThemeProps12({ props: inProps, name: "ProfileMenu" });
+function ProfileMenu(props) {
   const { open: _open, defaultOpen, onOpenChange, profile, getInitial, menuItems, size, ...innerProps } = props;
   const [open, setOpen] = useControlledState(
     _open,
@@ -7934,7 +7950,7 @@ RadioList.displayName = "RadioList";
 
 // src/components/SearchBar/SearchBar.tsx
 import * as React56 from "react";
-import { styled as styled28, useThemeProps as useThemeProps13 } from "@mui/joy/styles";
+import { styled as styled28, useThemeProps as useThemeProps9 } from "@mui/joy/styles";
 import Box2 from "@mui/joy/Box";
 import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
@@ -7954,7 +7970,7 @@ var SearchBarRoot = styled28(Box2, {
   flexShrink: 0
 }));
 var SearchBar = React56.forwardRef(function SearchBar2(inProps, ref) {
-  const props = useThemeProps13({ props: inProps, name: "SearchBar" });
+  const props = useThemeProps9({ props: inProps, name: "SearchBar" });
   const { showSelect = false, options, placeholder: placeholderProp, value, onChange, onSearch, ...other } = props;
   const [selectVal, setSelectVal] = React56.useState(options?.[0]?.value ?? "");
   const [isHovered, setIsHovered] = React56.useState(false);
@@ -8447,9 +8463,6 @@ var defaultTheme = extendTheme({
       }
     },
     JoyAvatar: {
-      defaultProps: {
-        size: "sm"
-      },
       styleOverrides: {
         root: ({ ownerState }) => ({
           ...ownerState.size === "xs" && {
@@ -8471,121 +8484,6 @@ var defaultTheme = extendTheme({
       defaultProps: {
         size: "sm"
       }
-    },
-    JoyButton: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyIconButton: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyChip: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyCard: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyBreadcrumbs: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyList: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyMenu: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyMenuList: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyTabs: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyTabList: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyStepper: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyModalDialog: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyAccordionGroup: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyButtonGroup: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyMenuButton: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyCircularProgress: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyLinearProgress: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoySlider: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    JoyBadge: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    Alert: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    Pagination: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    FilterableCheckboxGroup: {
-      defaultProps: {
-        size: "sm"
-      }
-    },
-    ProfileMenu: {
-      defaultProps: {
-        size: "sm"
-      }
     }
   }
 });
@@ -8774,5 +8672,5 @@ export {
   useColorScheme,
   useMenuButton,
   useTheme2 as useTheme,
-  useThemeProps14 as useThemeProps
+  useThemeProps10 as useThemeProps
 };