@ceed/ads 1.40.1 → 1.41.0

package/dist/index.js

@@ -260,13 +260,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;
@@ -373,6 +377,7 @@ var AutocompleteListBox = React5.forwardRef((props, ref) => {
     )
   ))));
 });
+var EMPTY_MULTIPLE_VALUE = [];
 var autocompleteDeleteSize = {
   sm: "20px",
   md: "24px",
@@ -415,9 +420,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: {
@@ -428,6 +433,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") {
@@ -488,7 +494,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,
@@ -1796,7 +1802,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
@@ -1820,6 +1826,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,
@@ -1832,8 +1842,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?.({
@@ -1852,8 +1862,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);
   };
@@ -1863,7 +1874,7 @@ var Input = React16.forwardRef((props, ref) => {
   const input = /* @__PURE__ */ React16.createElement(
     MotionInput,
     {
-      value,
+      value: displayValue ?? "",
       name,
       onChange: handleChange,
       required,
@@ -1884,7 +1895,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(),
@@ -2122,7 +2133,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(() => {
@@ -2137,22 +2148,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,
@@ -2616,7 +2622,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,
@@ -2628,7 +2634,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";
@@ -2847,16 +2853,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) {
@@ -3309,7 +3319,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;
@@ -3326,7 +3336,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) {
@@ -3384,7 +3394,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(),
@@ -3513,7 +3523,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(
     () => ({
@@ -3735,9 +3745,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();
@@ -3798,8 +3808,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 ?? [],
@@ -3891,7 +3901,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}`,
@@ -4934,7 +4944,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";
@@ -5141,16 +5151,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,
@@ -5495,14 +5509,15 @@ 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 React31, { 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__ */ React31.createElement(
     "span",
     {
@@ -5544,13 +5559,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]);
@@ -5821,7 +5837,7 @@ function RadioGroup2(props) {
 RadioGroup2.displayName = "RadioGroup";
 
 // src/components/FilterMenu/components/DateRange.tsx
-import React35, { useCallback as useCallback19, useMemo as useMemo14, useState as useState13, useEffect as useEffect10 } from "react";
+import React35, { useCallback as useCallback19, useMemo as useMemo14, useState as useState12, useEffect as useEffect10 } from "react";
 import { Stack as Stack5 } from "@mui/joy";
 function DateRange(props) {
   const {
@@ -5839,7 +5855,7 @@ function DateRange(props) {
     hideClearButton
   } = props;
   const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
-  const [selectedOption, setSelectedOption] = useState13("all-time");
+  const [selectedOption, setSelectedOption] = useState12("all-time");
   const dateRangeOptions = useMemo14(
     () => [
       { label: "All Time", value: "all-time" },
@@ -5968,7 +5984,7 @@ import React37, { useCallback as useCallback21, useMemo as useMemo16 } from "rea
 import { Stack as Stack6 } from "@mui/joy";
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-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 React36, { forwardRef as forwardRef9, useCallback as useCallback20, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useMemo as useMemo15, useRef as useRef10, useState as useState13 } 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";
@@ -6085,15 +6101,19 @@ var MonthRangePicker = forwardRef9((inProps, ref) => {
   const isAlphabeticDisplay = hasAlphabeticMonth3(displayFormat);
   const innerRef = useRef10(null);
   const buttonRef = useRef10(null);
-  const [value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    useCallback20((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    useCallback20(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
-  const [displayValue, setDisplayValue] = useState14(
+  const value = rawValue ?? "";
+  const [displayValue, setDisplayValue] = useState13(
     () => value ? formatValueString3(parseDates2(value), displayFormat, locale) : ""
   );
-  const [anchorEl, setAnchorEl] = useState14(null);
+  const [anchorEl, setAnchorEl] = useState13(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo15(() => value ? parseDates2(value) : void 0, [value]);
   useEffect11(() => {
@@ -6316,7 +6336,7 @@ function CurrencyInput3(props) {
   const [internalValue, setInternalValue] = useControlledState(value, value, onChange);
   const handleCurrencyChange = useCallback22(
     (event) => {
-      const newValue = event.target.value;
+      const newValue = event.target.value ?? void 0;
       setInternalValue(newValue);
     },
     [setInternalValue]
@@ -6349,7 +6369,7 @@ function CurrencyRange(props) {
   const maxValue = internalValue?.[1];
   const handleMinChange = useCallback23(
     (event) => {
-      const newMinValue = event.target.value;
+      const newMinValue = event.target.value ?? void 0;
       const currentMaxValue = maxValue;
       if (newMinValue !== void 0 && currentMaxValue !== void 0) {
         setInternalValue([newMinValue, currentMaxValue]);
@@ -6363,7 +6383,7 @@ function CurrencyRange(props) {
   );
   const handleMaxChange = useCallback23(
     (event) => {
-      const newMaxValue = event.target.value;
+      const newMaxValue = event.target.value ?? void 0;
       const currentMinValue = minValue;
       if (currentMinValue !== void 0 && newMaxValue !== void 0) {
         setInternalValue([currentMinValue, newMaxValue]);
@@ -6413,7 +6433,7 @@ import React41 from "react";
 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 React40, { useCallback as useCallback24, useMemo as useMemo17 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled21, useThemeProps as useThemeProps10 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -6469,34 +6489,30 @@ var PercentageInput = React40.forwardRef(
     } = props;
     const [_value, setValue] = useControlledState(
       props.value,
-      props.defaultValue,
+      props.defaultValue ?? null,
       useCallback24((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = useState15(
-      max && _value && _value > max || min && _value && _value < min
-    );
     const value = useMemo17(() => {
       if (_value && useMinorUnit) {
         return _value / Math.pow(10, maxDecimalScale);
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
+    const internalError = useMemo17(
+      () => value != null && (max != null && value > max || min != null && value < min),
+      [max, min, value]
+    );
     const handleChange = useCallback24(
       (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__ */ React40.createElement(
       PercentageInputRoot,
@@ -6549,7 +6565,7 @@ var PercentageInput3 = ({
     PercentageInput,
     {
       value: _value,
-      onChange: (event) => setValue(event.target.value),
+      onChange: (event) => setValue(event.target.value ?? void 0),
       useMinorUnit,
       maxDecimalScale,
       min,
@@ -6573,7 +6589,7 @@ function PercentageRange(props) {
   const maxValue = internalValue?.[1];
   const handleMinChange = useCallback25(
     (event) => {
-      const newMinValue = event.target.value;
+      const newMinValue = event.target.value ?? void 0;
       const currentMaxValue = maxValue;
       if (newMinValue !== void 0) {
         setInternalValue([newMinValue, currentMaxValue || null]);
@@ -6585,7 +6601,7 @@ function PercentageRange(props) {
   );
   const handleMaxChange = useCallback25(
     (event) => {
-      const newMaxValue = event.target.value;
+      const newMaxValue = event.target.value ?? void 0;
       const currentMinValue = minValue;
       if (newMaxValue !== void 0) {
         setInternalValue([currentMinValue || null, newMaxValue]);
@@ -6639,7 +6655,7 @@ function Autocomplete2(props) {
   const autocompleteValue = typeof internalValue === "string" || typeof internalValue === "number" ? String(internalValue) : void 0;
   const handleChange = useCallback26(
     (event) => {
-      const val = event.target.value;
+      const val = event.target.value ?? void 0;
       if (val) {
         const numVal = Number(val);
         setInternalValue(!isNaN(numVal) && isFinite(numVal) ? numVal : val);
@@ -6742,7 +6758,7 @@ function FilterMenu(props) {
 FilterMenu.displayName = "FilterMenu";
 
 // src/components/Uploader/Uploader.tsx
-import React45, { useCallback as useCallback28, useEffect as useEffect13, useMemo as useMemo18, useRef as useRef11, useState as useState16 } from "react";
+import React45, { useCallback as useCallback28, useEffect as useEffect13, useMemo as useMemo18, useRef as useRef11, useState as useState14 } from "react";
 import { styled as styled22, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
@@ -6892,10 +6908,10 @@ var Uploader = React45.memo((props) => {
   } = props;
   const dropZoneRef = useRef11(null);
   const inputRef = useRef11(null);
-  const [errorText, setErrorText] = useState16();
-  const [files, setFiles] = useState16([]);
-  const [uploaded, setUploaded] = useState16(props.uploaded || []);
-  const [previewState, setPreviewState] = useState16("idle");
+  const [errorText, setErrorText] = useState14();
+  const [files, setFiles] = useState14([]);
+  const [uploaded, setUploaded] = useState14(props.uploaded || []);
+  const [previewState, setPreviewState] = useState14("idle");
   const accepts = useMemo18(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
   const parsedAccepts = useMemo18(
     () => accepts.flatMap((type) => {
@@ -7157,13 +7173,13 @@ function IconMenuButton(props) {
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
-import React47, { lazy, Suspense, useEffect as useEffect14, useState as useState17 } from "react";
+import React47, { lazy, Suspense, useEffect as useEffect14, useState as useState15 } 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] = useState17(null);
+  const [rehypeAccent, setRehypeAccent] = useState15(null);
   useEffect14(() => {
     const loadRehypeAccent = async () => {
       const module = await import("./chunks/rehype-accent-FZRUD7VI.js");
@@ -7345,7 +7361,7 @@ function MenuButton2(props) {
 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 React49, { forwardRef as forwardRef10, useCallback as useCallback29, useEffect as useEffect15, useImperativeHandle as useImperativeHandle5, useRef as useRef12, useState as useState16 } from "react";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled23, useThemeProps as useThemeProps11 } from "@mui/joy";
 import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
@@ -7430,11 +7446,15 @@ var MonthPicker = forwardRef10((inProps, ref) => {
   } = props;
   const innerRef = useRef12(null);
   const buttonRef = useRef12(null);
-  const [value, setValue, isControlled] = useControlledState(
+  const [rawValue, setValue, isControlled] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    useCallback29((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    useCallback29(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const getFormattedDisplayValue = useCallback29(
     (inputValue) => {
       if (!inputValue) return "";
@@ -7446,8 +7466,8 @@ var MonthPicker = forwardRef10((inProps, ref) => {
     },
     [format, displayFormat, locale]
   );
-  const [displayValue, setDisplayValue] = useState18(() => getFormattedDisplayValue(value));
-  const [anchorEl, setAnchorEl] = useState18(null);
+  const [displayValue, setDisplayValue] = useState16(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = useState16(null);
   const open = Boolean(anchorEl);
   useEffect15(() => {
     if (!anchorEl) {