@ceed/cds 1.39.1 → 1.40.1

package/dist/index.js

@@ -270,13 +270,17 @@ var IconButton_default = IconButton;
 import { useState, useCallback, useEffect, useRef } from "react";
 function useControlledState(controlledValue, defaultValue, onChange) {
   const { current: isControlled } = useRef(controlledValue !== void 0);
-  const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
-  const displayValue = isControlled ? controlledValue : internalValue;
+  const [internalValue, setInternalValue] = useState(controlledValue !== void 0 ? controlledValue : defaultValue);
+  const hasWarnedRef = useRef(false);
   useEffect(() => {
-    if (isControlled) {
-      setInternalValue(controlledValue);
-    }
+    if (false) return;
+    if (hasWarnedRef.current || isControlled === (controlledValue !== void 0)) return;
+    hasWarnedRef.current = true;
+    console.warn(
+      isControlled ? "useControlledState: A component is changing a controlled input to be uncontrolled. Pass `null` instead of `undefined` to keep it controlled with an empty value." : "useControlledState: A component is changing an uncontrolled input to be controlled. Pass `null` instead of `undefined` for the initial empty value to make it controlled from the first render."
+    );
   }, [isControlled, controlledValue]);
+  const displayValue = isControlled ? controlledValue : internalValue;
   const handleChange = useCallback(
     (value) => {
       const newValue = typeof value === "function" ? value(displayValue) : value;
@@ -383,6 +387,7 @@ var AutocompleteListBox = React5.forwardRef((props, ref) => {
     )
   ))));
 });
+var EMPTY_MULTIPLE_VALUE = [];
 var autocompleteDeleteSize = {
   sm: "20px",
   md: "24px",
@@ -425,9 +430,9 @@ function Autocomplete(props) {
     className,
     ...innerProps
   } = props;
-  const [_value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
+    props.defaultValue ?? null,
     useCallback2(
       (value2) => onChange?.({
         target: {
@@ -438,6 +443,7 @@ function Autocomplete(props) {
       [onChange, props.name]
     )
   );
+  const _value = rawValue ?? (props.multiple ? EMPTY_MULTIPLE_VALUE : "");
   const options = useMemo(
     () => props.options.map((option) => {
       if (typeof option !== "object") {
@@ -498,7 +504,7 @@ function Autocomplete(props) {
     (event, value2) => {
       const newValue = value2;
       const _value2 = Array.isArray(newValue) ? newValue.map((value3) => value3.value) : newValue?.value;
-      setValue(_value2);
+      setValue(_value2 ?? null);
       if (Array.isArray(newValue) && newValue.map((value3) => optionMap.get(value3.value)) || optionMap.get(newValue?.value)) {
         onChangeComplete?.({
           ...event,
@@ -1806,7 +1812,7 @@ var Container = forwardRef5(function Container2(props, ref) {
 Container.displayName = "Container";
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-import React17, { useCallback as useCallback8, useMemo as useMemo6, useState as useState7 } from "react";
+import React17, { useCallback as useCallback8, useMemo as useMemo6 } from "react";
 import { NumericFormat } from "react-number-format";
 
 // src/components/Input/Input.tsx
@@ -1830,6 +1836,10 @@ var Input = React16.forwardRef((props, ref) => {
     onChange,
     name,
     type,
+    // NOTE: value/defaultValue는 아래에서 직접 다루므로 innerProps 스프레드에서 제외한다.
+    // defaultValue가 스프레드에 남으면 항상 정의되는 value와 함께 DOM input에 도달해 React가 경고한다.
+    value: valueProp,
+    defaultValue: defaultValueProp,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
@@ -1842,8 +1852,8 @@ var Input = React16.forwardRef((props, ref) => {
   }
   const [passwordVisible, setPasswordVisible] = useState6(false);
   const [value, setValue] = useControlledState(
-    props.value,
-    props.defaultValue,
+    valueProp,
+    defaultValueProp ?? null,
     useCallback7(
       (value2) => {
         onChange?.({
@@ -1862,8 +1872,9 @@ var Input = React16.forwardRef((props, ref) => {
     setValue(e.target.value);
   };
   const handleClear = () => {
-    setValue(props.defaultValue || "");
+    setValue(defaultValueProp || "");
   };
+  const displayValue = valueProp !== void 0 ? valueProp : value;
   const handleTogglePasswordVisibility = () => {
     setPasswordVisible((prev) => !prev);
   };
@@ -1873,7 +1884,7 @@ var Input = React16.forwardRef((props, ref) => {
   const input = /* @__PURE__ */ React16.createElement(
     MotionInput,
     {
-      value,
+      value: displayValue ?? "",
       name,
       onChange: handleChange,
       required,
@@ -1894,7 +1905,7 @@ var Input = React16.forwardRef((props, ref) => {
           "aria-label": passwordVisible ? "Hide password" : "Show password"
         },
         passwordVisible ? /* @__PURE__ */ React16.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React16.createElement(VisibilityIcon, null)
-      )) : null : enableClearable ? /* @__PURE__ */ React16.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React16.createElement(
+      )) : null : enableClearable ? /* @__PURE__ */ React16.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, displayValue && /* @__PURE__ */ React16.createElement(
         IconButton_default,
         {
           onMouseDown: (e) => e.preventDefault(),
@@ -2132,7 +2143,7 @@ var CurrencyInput = React17.forwardRef(function CurrencyInput2(inProps, ref) {
   const { symbol, thousandSeparator, decimalSeparator, placeholder, fixedDecimalScale, decimalScale } = useCurrencySetting(props);
   const [_value, setValue] = useControlledState(
     props.value,
-    props.defaultValue,
+    props.defaultValue ?? null,
     useCallback8((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
   );
   const value = useMemo6(() => {
@@ -2147,22 +2158,17 @@ var CurrencyInput = React17.forwardRef(function CurrencyInput2(inProps, ref) {
     }
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
-  const [isOverLimit, setIsOverLimit] = useState7(!!max && !!value && value > max);
+  const isOverLimit = useMemo6(() => max != null && value != null && value > max, [max, value]);
   const handleChange = useCallback8(
     (event) => {
       if (event.target.value === "") {
-        setValue(void 0);
+        setValue(null);
         return;
       }
       const amount = useMinorUnit ? Number(decimalSeparator ? event.target.value?.replace(decimalSeparator, "") : event.target.value) : Number(event.target.value);
-      if (!!max && Number(event.target.value) > max) {
-        setIsOverLimit(true);
-      } else {
-        setIsOverLimit(false);
-      }
       setValue(amount);
     },
-    [decimalSeparator, max, useMinorUnit, setValue]
+    [decimalSeparator, useMinorUnit, setValue]
   );
   return /* @__PURE__ */ React17.createElement(
     CurrencyInputRoot,
@@ -2626,7 +2632,7 @@ var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PU
 // src/components/DataTable/components.tsx
 import React23, {
   useRef as useRef5,
-  useState as useState9,
+  useState as useState8,
   useLayoutEffect,
   useMemo as useMemo9,
   useCallback as useCallback10,
@@ -2638,7 +2644,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
 import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // src/components/DatePicker/DatePicker.tsx
-import React19, { forwardRef as forwardRef6, useCallback as useCallback9, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
+import React19, { forwardRef as forwardRef6, useCallback as useCallback9, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState7 } 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";
@@ -2857,16 +2863,20 @@ var DatePicker = forwardRef6((inProps, ref) => {
   } = props;
   const innerRef = useRef4(null);
   const buttonRef = useRef4(null);
-  const [value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    useCallback9((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    useCallback9(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const isAlphabeticDisplay = hasAlphabeticMonth(displayFormat);
-  const [displayValue, setDisplayValue] = useState8(
+  const [displayValue, setDisplayValue] = useState7(
     () => value ? formatValueString(parseDate(value, format), displayFormat, locale) : ""
   );
-  const [anchorEl, setAnchorEl] = useState8(null);
+  const [anchorEl, setAnchorEl] = useState7(null);
   const open = Boolean(anchorEl);
   useEffect4(() => {
     if (!anchorEl) {
@@ -3319,7 +3329,7 @@ var TextEllipsis = ({
   ...rest
 }) => {
   const textRef = useRef5(null);
-  const [showTooltip, setShowTooltip] = useState9(false);
+  const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
     const element = textRef.current;
     if (!element) return;
@@ -3336,7 +3346,7 @@ var TextEllipsis = ({
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = useRef5(null);
-  const [showTooltip, setShowTooltip] = useState9(false);
+  const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
     const element = textRef.current;
     if (element) {
@@ -3394,7 +3404,7 @@ var HeadCell = (props) => {
   useLayoutEffect(() => {
     ref.current = localRef.current;
   }, [ref]);
-  const [isHovered, setIsHovered] = useState9(false);
+  const [isHovered, setIsHovered] = useState8(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = useMemo9(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
@@ -3523,7 +3533,7 @@ var BodyCell = (props) => {
     onCellEditStop
   } = props;
   const theme = useTheme();
-  const [value, setValue] = useState9(row[field]);
+  const [value, setValue] = useState8(row[field]);
   const cellRef = useRef5(null);
   const params = useMemo9(
     () => ({
@@ -3745,9 +3755,9 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
 });
 
 // src/components/DataTable/hooks.ts
-import { useState as useState10, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useMemo as useMemo10, useCallback as useCallback11, useEffect as useEffect6, createRef } from "react";
+import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useMemo as useMemo10, useCallback as useCallback11, useEffect as useEffect6, createRef } from "react";
 function useColumnWidths(columnsByField) {
-  const [widths, setWidths] = useState10({});
+  const [widths, setWidths] = useState9({});
   const roRef = useRef6();
   useLayoutEffect2(() => {
     if (roRef.current) roRef.current.disconnect();
@@ -3808,8 +3818,8 @@ function useDataTableRenderer({
   }
   const onSelectionModelChangeRef = useRef6(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
-  const [focusedRowId, setFocusedRowId] = useState10(null);
-  const [selectionAnchor, setSelectionAnchor] = useState10(null);
+  const [focusedRowId, setFocusedRowId] = useState9(null);
+  const [selectionAnchor, setSelectionAnchor] = useState9(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
@@ -3901,7 +3911,7 @@ function useDataTableRenderer({
     () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
-  const [page, setPage] = useState10(paginationModel?.page || 1);
+  const [page, setPage] = useState9(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
   const getId = useCallback11(
     (row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
@@ -4580,7 +4590,8 @@ function Component(props, apiRef) {
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
   const showNoRowsOverlay = !loading && rowCount === 0;
-  const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0));
+  const showFillerColumn = columns.length > 0 && columns.every((c) => !!c.width);
+  const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0) + (showFillerColumn ? 1 : 0));
   const getRowClickHandler = useCallback13(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
@@ -4771,7 +4782,7 @@ function Component(props, apiRef) {
             minWidth: c.minWidth ?? "50px"
           }
         }
-      ))), /* @__PURE__ */ React26.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React26.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React26.createElement(
+      )), showFillerColumn && /* @__PURE__ */ React26.createElement("col", { style: { minWidth: 0 } })), /* @__PURE__ */ React26.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React26.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React26.createElement(
         "th",
         {
           rowSpan: processedColumnGroups.maxLevel + 2,
@@ -4800,7 +4811,13 @@ function Component(props, apiRef) {
           },
           group.headerName ?? group.groupId
         ), emptyCells > 0 && Array.from({ length: emptyCells }).map((_2, i) => /* @__PURE__ */ React26.createElement("th", { key: `empty-between-${level}-${groupIndex}-${i}`, colSpan: 1 })));
-      }))), /* @__PURE__ */ React26.createElement("tr", null, (!processedColumnGroups || processedColumnGroups.groups.length === 0) && checkboxSelection && /* @__PURE__ */ React26.createElement(
+      }), showFillerColumn && level === 0 && /* @__PURE__ */ React26.createElement(
+        "th",
+        {
+          "aria-hidden": "true",
+          rowSpan: processedColumnGroups.maxLevel + 2
+        }
+      ))), /* @__PURE__ */ React26.createElement("tr", null, (!processedColumnGroups || processedColumnGroups.groups.length === 0) && checkboxSelection && /* @__PURE__ */ React26.createElement(
         "th",
         {
           style: {
@@ -4823,7 +4840,7 @@ function Component(props, apiRef) {
             ...c
           }
         )
-      )))), /* @__PURE__ */ React26.createElement(
+      )), showFillerColumn && (!processedColumnGroups || processedColumnGroups.groups.length === 0) && /* @__PURE__ */ React26.createElement("th", { "aria-hidden": "true" }))), /* @__PURE__ */ React26.createElement(
         VirtualizedTableBody,
         {
           ref: tableBodyRef,
@@ -4922,7 +4939,8 @@ function Component(props, apiRef) {
                 editMode,
                 noWrap: props.noWrap
               }
-            )
+            ),
+            showFillerColumn && /* @__PURE__ */ React26.createElement("td", { "aria-hidden": "true" })
           );
         })
       ), Footer && /* @__PURE__ */ React26.createElement(Footer, null))
@@ -4944,7 +4962,7 @@ var DataTable = forwardRef7(Component);
 DataTable.displayName = "DataTable";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-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 React27, { forwardRef as forwardRef8, useCallback as useCallback14, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo12, useRef as useRef8, useState as useState10 } 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";
@@ -5151,16 +5169,20 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
   } = props;
   const innerRef = useRef8(null);
   const buttonRef = useRef8(null);
-  const [value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    useCallback14((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    useCallback14(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const isAlphabeticDisplay = hasAlphabeticMonth2(displayFormat);
-  const [displayValue, setDisplayValue] = useState11(
+  const [displayValue, setDisplayValue] = useState10(
     () => value ? formatValueString2(parseDates(value, format), displayFormat, locale) : ""
   );
-  const [anchorEl, setAnchorEl] = useState11(null);
+  const [anchorEl, setAnchorEl] = useState10(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo12(
     () => value ? parseDates(value, format) : void 0,
@@ -5528,14 +5550,15 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
 }));
 
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
-import React32, { useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo13, useRef as useRef9, useState as useState12 } from "react";
+import React32, { useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo13, useRef as useRef9, useState as useState11 } from "react";
 import SearchIcon from "@mui/icons-material/Search";
 import { useThemeProps as useThemeProps8 } from "@mui/joy";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
+var EMPTY_VALUE = [];
 function LabelWithTooltip(props) {
   const { label, size } = props;
   const labelContentRef = useRef9(null);
-  const [isOverflowing, setIsOverflowing] = useState12(false);
+  const [isOverflowing, setIsOverflowing] = useState11(false);
   const labelContent = /* @__PURE__ */ React32.createElement(
     "span",
     {
@@ -5577,13 +5600,14 @@ function FilterableCheckboxGroup(inProps) {
     maxHeight = 300,
     disabled
   } = props;
-  const [searchTerm, setSearchTerm] = useState12("");
-  const [sortedOptions, setSortedOptions] = useState12(options);
-  const [internalValue, setInternalValue] = useControlledState(
+  const [searchTerm, setSearchTerm] = useState11("");
+  const [sortedOptions, setSortedOptions] = useState11(options);
+  const [rawValue, setInternalValue] = useControlledState(
     value,
-    value ?? [],
-    useCallback15((newValue) => onChange?.(newValue), [onChange])
+    value ?? EMPTY_VALUE,
+    useCallback15((newValue) => onChange?.(newValue ?? []), [onChange])
   );
+  const internalValue = rawValue ?? EMPTY_VALUE;
   const parentRef = useRef9(null);
   const isInitialSortRef = useRef9(false);
   const prevOptionsRef = useRef9([...options]);
@@ -5809,13 +5833,13 @@ function IconMenuButton(props) {
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
-import React34, { lazy, Suspense, useEffect as useEffect10, useState as useState13 } from "react";
+import React34, { lazy, Suspense, useEffect as useEffect10, useState as useState12 } from "react";
 import { Skeleton } from "@mui/joy";
 import { Link as Link2 } from "@mui/joy";
 import remarkGfm from "remark-gfm";
 var LazyReactMarkdown = lazy(() => import("react-markdown"));
 var Markdown = (props) => {
-  const [rehypeAccent, setRehypeAccent] = useState13(null);
+  const [rehypeAccent, setRehypeAccent] = useState12(null);
   useEffect10(() => {
     const loadRehypeAccent = async () => {
       const module = await import("./chunks/rehype-accent-FZRUD7VI.js");
@@ -5997,7 +6021,7 @@ function MenuButton2(props) {
 MenuButton2.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-import React36, { forwardRef as forwardRef9, useCallback as useCallback16, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState14 } from "react";
+import React36, { forwardRef as forwardRef9, useCallback as useCallback16, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState13 } from "react";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
 import { styled as styled21, useThemeProps as useThemeProps9 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
@@ -6082,11 +6106,15 @@ var MonthPicker = forwardRef9((inProps, ref) => {
   } = props;
   const innerRef = useRef10(null);
   const buttonRef = useRef10(null);
-  const [value, setValue, isControlled] = useControlledState(
+  const [rawValue, setValue, isControlled] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    useCallback16((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    useCallback16(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const getFormattedDisplayValue = useCallback16(
     (inputValue) => {
       if (!inputValue) return "";
@@ -6098,8 +6126,8 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [format, displayFormat, locale]
   );
-  const [displayValue, setDisplayValue] = useState14(() => getFormattedDisplayValue(value));
-  const [anchorEl, setAnchorEl] = useState14(null);
+  const [displayValue, setDisplayValue] = useState13(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = useState13(null);
   const open = Boolean(anchorEl);
   useEffect11(() => {
     if (!anchorEl) {
@@ -6251,7 +6279,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
 });
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React37, { forwardRef as forwardRef10, useCallback as useCallback17, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo14, useRef as useRef11, useState as useState15 } from "react";
+import React37, { forwardRef as forwardRef10, useCallback as useCallback17, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo14, useRef as useRef11, useState as useState14 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled22, useThemeProps as useThemeProps10 } from "@mui/joy";
@@ -6368,15 +6396,19 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
   const isAlphabeticDisplay = hasAlphabeticMonth3(displayFormat);
   const innerRef = useRef11(null);
   const buttonRef = useRef11(null);
-  const [value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    useCallback17((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    useCallback17(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
-  const [displayValue, setDisplayValue] = useState15(
+  const value = rawValue ?? "";
+  const [displayValue, setDisplayValue] = useState14(
     () => value ? formatValueString4(parseDates2(value), displayFormat, locale) : ""
   );
-  const [anchorEl, setAnchorEl] = useState15(null);
+  const [anchorEl, setAnchorEl] = useState14(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo14(() => value ? parseDates2(value) : void 0, [value]);
   useEffect12(() => {
@@ -6661,7 +6693,7 @@ function Navigator(props) {
 Navigator.displayName = "Navigator";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React41, { useCallback as useCallback18, useMemo as useMemo15, useState as useState16 } from "react";
+import React41, { useCallback as useCallback18, useMemo as useMemo15 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled25, useThemeProps as useThemeProps11 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -6717,34 +6749,30 @@ var PercentageInput = React41.forwardRef(
     } = props;
     const [_value, setValue] = useControlledState(
       props.value,
-      props.defaultValue,
+      props.defaultValue ?? null,
       useCallback18((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = useState16(
-      max && _value && _value > max || min && _value && _value < min
-    );
     const value = useMemo15(() => {
       if (_value && useMinorUnit) {
         return _value / Math.pow(10, maxDecimalScale);
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
+    const internalError = useMemo15(
+      () => value != null && (max != null && value > max || min != null && value < min),
+      [max, min, value]
+    );
     const handleChange = useCallback18(
       (event) => {
         if (event.target.value === "") {
-          setValue(void 0);
+          setValue(null);
           return;
         }
         const originalAmount = Number(event.target.value);
-        if (min && originalAmount < min || max && originalAmount > max) {
-          setInternalError(true);
-        } else {
-          setInternalError(false);
-        }
         const amount = useMinorUnit ? padDecimal(originalAmount, maxDecimalScale) : originalAmount;
         setValue(amount);
       },
-      [setValue, useMinorUnit, maxDecimalScale, min, max]
+      [setValue, useMinorUnit, maxDecimalScale]
     );
     return /* @__PURE__ */ React41.createElement(
       PercentageInputRoot,
@@ -7496,7 +7524,7 @@ function ThemeProvider(props) {
 ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Uploader/Uploader.tsx
-import React49, { useCallback as useCallback19, useEffect as useEffect13, useMemo as useMemo16, useRef as useRef12, useState as useState18 } from "react";
+import React49, { useCallback as useCallback19, useEffect as useEffect13, useMemo as useMemo16, useRef as useRef12, useState as useState16 } from "react";
 import { styled as styled31, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
@@ -7646,10 +7674,10 @@ var Uploader = React49.memo((props) => {
   } = props;
   const dropZoneRef = useRef12(null);
   const inputRef = useRef12(null);
-  const [errorText, setErrorText] = useState18();
-  const [files, setFiles] = useState18([]);
-  const [uploaded, setUploaded] = useState18(props.uploaded || []);
-  const [previewState, setPreviewState] = useState18("idle");
+  const [errorText, setErrorText] = useState16();
+  const [files, setFiles] = useState16([]);
+  const [uploaded, setUploaded] = useState16(props.uploaded || []);
+  const [previewState, setPreviewState] = useState16("idle");
   const accepts = useMemo16(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
   const parsedAccepts = useMemo16(
     () => accepts.flatMap((type) => {