@opengovsg/oui 0.0.0-snapshot-20251203100754 → 0.0.0-snapshot-20260126025301

package/dist/cjs/banner/banner.cjs

@@ -3,14 +3,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
 var ouiTheme = require('@opengovsg/oui-theme');
-var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
-var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.cjs');
 var button = require('../button/button.cjs');
-var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
+var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
+var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/info.cjs');
+var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');
 
 const i18nStrings = {
   "en-SG": {
@@ -39,7 +39,7 @@ const Banner = ({
 }) => {
   const formatMessage = reactAria.useMessageFormatter(i18nStrings);
   const styles = ouiTheme.bannerStyles({ variant, size });
-  const startContent = react.useMemo(() => {
+  const startContent = $670gB$react.useMemo(() => {
     if (startContentProp) {
       return startContentProp;
     }
@@ -59,7 +59,7 @@ const Banner = ({
         );
     }
   }, [classNames?.icon, startContentProp, styles, variant]);
-  const bannerRef = react.useRef(null);
+  const bannerRef = $670gB$react.useRef(null);
   const state = reactStately.useDisclosureState({
     defaultExpanded,
     isExpanded: disclosureProps.isExpanded,

package/dist/cjs/button/button.cjs

@@ -3,15 +3,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var utils = require('@react-aria/utils');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var ripple = require('../ripple/ripple.cjs');
 var useRipple = require('../ripple/use-ripple.cjs');
 var spinner = require('../spinner/spinner.cjs');
+var children = require('../system/react-utils/children.cjs');
 
-const Button = react.forwardRef(
+const Button = $670gB$react.forwardRef(
   ({
     startContent,
     endContent,
@@ -23,8 +24,9 @@ const Button = react.forwardRef(
     size = "md",
     spinnerPlacement = "start",
     loadingText,
+    pendingElement,
     onPress,
-    children,
+    children: children$1,
     disableRipple,
     isPending,
     spinner: spinnerProp,
@@ -37,7 +39,7 @@ const Button = react.forwardRef(
       onClear: onClearRipple,
       ripples
     } = useRipple.useRipple();
-    const spinner$1 = react.useMemo(() => {
+    const spinner$1 = $670gB$react.useMemo(() => {
       if (spinnerProp) {
         return spinnerProp;
       }
@@ -49,7 +51,7 @@ const Button = react.forwardRef(
       const spinnerSize = buttonSpinnerSizeMap[size];
       return /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: spinnerSize });
     }, [size, spinnerProp]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Button,
       {
         ...props,
@@ -70,15 +72,16 @@ const Button = react.forwardRef(
         isPending,
         onPress: utils.chain(onPress, onPressRipple),
         ref,
-        children: [
-          startContent,
-          isPending && spinnerPlacement === "start" ? spinner$1 : null,
-          isPending ? null : children,
+        children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          children.renderChildren(renderProps, startContent),
+          isPending && spinnerPlacement === "start" ? children.renderChildren(renderProps, spinner$1) : null,
+          isPending ? null : children.renderChildren(renderProps, children$1),
           isPending && loadingText ? loadingText : null,
-          isPending && spinnerPlacement === "end" ? spinner$1 : null,
-          endContent,
+          isPending && pendingElement ? children.renderChildren(renderProps, pendingElement) : null,
+          isPending && spinnerPlacement === "end" ? children.renderChildren(renderProps, spinner$1) : null,
+          children.renderChildren(renderProps, endContent),
           !disableRipple && /* @__PURE__ */ jsxRuntime.jsx(ripple.Ripple, { onClear: onClearRipple, ripples })
-        ]
+        ] })
       }
     );
   }

package/dist/cjs/calendar/calendar-bottom-content.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var button = require('../button/button.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
@@ -15,10 +15,10 @@ const CalendarBottomContent = ({
   showTodayButton,
   shouldSetDateOnTodayButtonClick
 }) => {
-  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const state = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
   const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
   const formatMessage = useCalendarI18n.useCalendarI18n();
-  const handleTodayClick = react.useCallback(() => {
+  const handleTodayClick = $670gB$react.useCallback(() => {
     const todayDate = date.today(date.getLocalTimeZone());
     state.setFocusedDate(todayDate);
     if (shouldSetDateOnTodayButtonClick) {

package/dist/cjs/calendar/calendar-header.cjs

@@ -3,20 +3,20 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var button = require('../button/button.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendarMonthDaySelector = require('./calendar-month-day-selector.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
 var utils = require('./utils.cjs');
-var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
-var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
+var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
+var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
 
 function CalendarHeader({ offsetMonths = 0 }) {
   const { direction } = reactAriaComponents.useLocale();
   const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
-  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const state = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
   const monthYearTitle = utils.useLocalizedMonthYear(
     state.visibleRange.start.add({ months: offsetMonths }),
     state.timeZone

package/dist/cjs/calendar/calendar-month-day-selector.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var select = require('../select/select.cjs');
@@ -15,7 +15,7 @@ var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
 
 const CalendarMonthDaySelector = () => {
   const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
-  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const state = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
   const { months, years, datePartOrder } = useCalendarSelectors.useCalendarSelectors(state);
   const formatMessage = useCalendarI18n.useCalendarI18n();
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {

package/dist/cjs/calendar/calendar.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var useDeepCompare = require('use-deep-compare');
@@ -36,7 +36,7 @@ const Calendar = utils.forwardRefGeneric(function Calendar2(originalProps, ref)
     () => ouiTheme.calendarStyles(variantProps),
     [variantProps]
   );
-  const context = react.useMemo(
+  const context = $670gB$react.useMemo(
     () => ({
       slots,
       classNames,
@@ -46,7 +46,7 @@ const Calendar = utils.forwardRefGeneric(function Calendar2(originalProps, ref)
     [className, classNames, slots, variantProps.size]
   );
   const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
-  const dateToHighlight = react.useMemo(() => {
+  const dateToHighlight = $670gB$react.useMemo(() => {
     if (props.defaultFocusedValue !== void 0) {
       return props.defaultFocusedValue;
     }
@@ -149,7 +149,7 @@ const Calendar = utils.forwardRefGeneric(function Calendar2(originalProps, ref)
 const CalendarStateWrapper = ({
   children
 }) => {
-  const state = react.useContext(reactAriaComponents.CalendarStateContext);
+  const state = $670gB$react.useContext(reactAriaComponents.CalendarStateContext);
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[agnosticCalendarStateContext.AgnosticCalendarStateContext, state]], children });
 };
 

package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs

@@ -2,18 +2,18 @@
 "use client";
 'use strict';
 
-var react = require('react');
+var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var utils = require('../utils.cjs');
 
 const useCalendarSelectors = (state) => {
-  const yearRange = react.useMemo(() => {
+  const yearRange = $670gB$react.useMemo(() => {
     const start = state.minValue.year ?? 1900;
     const end = state.maxValue.year ?? 2100;
     return { start, end };
   }, [state.maxValue, state.minValue]);
   const dateFormatter = reactAria.useDateFormatter(state);
-  const datePartOrder = react.useMemo(() => {
+  const datePartOrder = $670gB$react.useMemo(() => {
     const parts = dateFormatter.formatToParts(
       state.visibleRange.start.toDate(state.timeZone)
     );
@@ -29,7 +29,7 @@ const useCalendarSelectors = (state) => {
     yearRange.end,
     state.timeZone
   );
-  return react.useMemo(() => {
+  return $670gB$react.useMemo(() => {
     return {
       months,
       years,

package/dist/cjs/calendar/utils.cjs

@@ -1,7 +1,7 @@
 "use strict";
 'use strict';
 
-var react = require('react');
+var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var i18n = require('@react-aria/i18n');
 
@@ -25,7 +25,7 @@ function useGenerateLocalizedMonths(timeZone, formatterOptions) {
     timeZone,
     ...formatterOptions
   });
-  return react.useMemo(() => {
+  return $670gB$react.useMemo(() => {
     return Array.from({ length: 12 }, (_, i) => {
       const id = i + 1;
       return {
@@ -43,7 +43,7 @@ function useGenerateLocalizedYears(yearStart, yearEnd, timeZone, formatterOption
     timeZone,
     ...formatterOptions
   });
-  return react.useMemo(() => {
+  return $670gB$react.useMemo(() => {
     return Array.from({ length: yearEnd - yearStart + 1 }, (_, i) => {
       const year = yearStart + i;
       return {

package/dist/cjs/checkbox/checkbox.cjs

@@ -8,8 +8,8 @@ var ouiTheme = require('@opengovsg/oui-theme');
 var field = require('../field/field.cjs');
 var utils = require('../system/utils.cjs');
 var checkboxGroupStyleContext = require('./checkbox-group-style-context.cjs');
-var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.cjs');
-var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
+var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.cjs');
+var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/check.cjs');
 
 const Checkbox = ({
   classNames,
@@ -20,8 +20,8 @@ const Checkbox = ({
     originalProps,
     ouiTheme.checkboxStyles.variantKeys
   );
-  const { size } = checkboxGroupStyleContext.useCheckboxGroupStyleContext();
-  const styles = ouiTheme.checkboxStyles({ size, ...variants });
+  const context = checkboxGroupStyleContext.useCheckboxGroupStyleContext();
+  const styles = ouiTheme.checkboxStyles({ size: context?.size, ...variants });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Checkbox,
     {

package/dist/cjs/combo-box/combo-box-fuzzy.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var fuzzysort = require('fuzzysort');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -45,22 +45,22 @@ function ComboBoxFuzzy(originalProps) {
     inputValue,
     ...props
   } = _props;
-  const deferredInputValue = react.useDeferredValue(inputValue);
-  const preparedItems = react.useMemo(() => {
+  const deferredInputValue = $670gB$react.useDeferredValue(inputValue);
+  const preparedItems = $670gB$react.useMemo(() => {
     return items?.map((item) => ({
       ...item,
       prepared: fuzzysort.prepare(item.textValue)
     })) ?? [];
   }, [items]);
-  const [filteredResults, setFilteredResults] = react.useState({ items, result: {} });
-  const onSelectionChange = react.useCallback(
+  const [filteredResults, setFilteredResults] = $670gB$react.useState({ items, result: {} });
+  const onSelectionChange = $670gB$react.useCallback(
     (key) => {
       onSelectionChangeProp(key);
       setFilteredResults({ items: preparedItems, result: {} });
     },
     [onSelectionChangeProp, preparedItems]
   );
-  const onInputChange = react.useCallback(
+  const onInputChange = $670gB$react.useCallback(
     (value) => {
       onInputChangeProp(value);
       if (!value) {

package/dist/cjs/combo-box/combo-box-item.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
@@ -20,7 +20,7 @@ const ComboBoxItem = utils.forwardRef(function ComboBoxItem2(originalProps, ref)
     variantProps
   ] = utils.mapPropsVariants(originalProps, ouiTheme.listBoxItemStyles.variantKeys);
   const styles = ouiTheme.listBoxItemStyles(variantProps);
-  const defaultTextValue = react.useMemo(() => {
+  const defaultTextValue = $670gB$react.useMemo(() => {
     if (props.textValue) {
       return props.textValue;
     }

package/dist/cjs/combo-box/combo-box.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -11,9 +11,9 @@ var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
-var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
-var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
-var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
+var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
+var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {
@@ -79,7 +79,7 @@ function ComboBox(originalProps) {
     ...props
   } = _props;
   const styles = ouiTheme.comboBoxStyles(variantProps);
-  const layout = react.useMemo(() => {
+  const layout = $670gB$react.useMemo(() => {
     return new reactAriaComponents.ListLayout({
       estimatedRowHeight: calculateEstimatedRowHeight(
         variantProps.size ?? "md"
@@ -87,7 +87,7 @@ function ComboBox(originalProps) {
       ...listLayoutOptions
     });
   }, [listLayoutOptions, variantProps.size]);
-  const renderEmptyState = react.useCallback(
+  const renderEmptyState = $670gB$react.useCallback(
     (props2) => {
       if (renderEmptyStateProp) {
         return renderEmptyStateProp(props2);

package/dist/cjs/date-field/date-field.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var field = require('../field/field.cjs');
@@ -21,7 +21,7 @@ function DateField(originalProps) {
       ...props
     },
     variantProps
-  ] = react.useMemo(
+  ] = $670gB$react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.dateFieldStyles.variantKeys),
     [originalProps]
   );
@@ -55,7 +55,7 @@ function DateField(originalProps) {
   );
 }
 function DateInput(originalProps) {
-  const [{ className, classNames, ...props }, variantProps] = react.useMemo(
+  const [{ className, classNames, ...props }, variantProps] = $670gB$react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.dateInputStyles.variantKeys),
     [originalProps]
   );

package/dist/cjs/date-picker/date-picker.cjs

@@ -3,16 +3,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
+var calendar$1 = require('../calendar/calendar.cjs');
+require('@internationalized/date');
 var dateField = require('../date-field/date-field.cjs');
 var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
-var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
-var calendar$1 = require('../calendar/calendar.cjs');
-var button = require('../button/button.cjs');
+var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
 
 function DatePicker(originalProps) {
   const [
@@ -29,7 +30,7 @@ function DatePicker(originalProps) {
       ...props
     },
     variantProps
-  ] = react.useMemo(
+  ] = $670gB$react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.datePickerStyles.variantKeys),
     [originalProps]
   );

package/dist/cjs/date-range-picker/date-range-picker.cjs

@@ -3,17 +3,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
 var dateField = require('../date-field/date-field.cjs');
 var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var rangeCalendar = require('../range-calendar/range-calendar.cjs');
 var utils = require('../system/utils.cjs');
-var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
-var button = require('../button/button.cjs');
+var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
 
 function DateRangePicker(originalProps) {
   const [
@@ -31,12 +31,12 @@ function DateRangePicker(originalProps) {
       ...props
     },
     variantProps
-  ] = react.useMemo(
+  ] = $670gB$react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.dateRangePickerStyles.variantKeys),
     [originalProps]
   );
   const styles = ouiTheme.dateRangePickerStyles(variantProps);
-  const { minValue, maxValue } = react.useMemo(() => {
+  const { minValue, maxValue } = $670gB$react.useMemo(() => {
     return {
       minValue: minValueProp ?? new date.CalendarDate(1900, 0, 1),
       // Default to 1 Jan 1900

package/dist/cjs/field/field.cjs

@@ -3,10 +3,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
+var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
 
 function Label({ size, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { ...props, className: ouiTheme.labelStyles({ className, size }) });
@@ -36,7 +36,7 @@ function FieldError({
   ...props
 }) {
   const styles = ouiTheme.fieldErrorStyles({ size });
-  const childrenFromProps = react.useMemo(() => {
+  const childrenFromProps = $670gB$react.useMemo(() => {
     if (typeof children === "string") {
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(FieldErrorIcon, { className: classNames?.icon, size }),

package/dist/cjs/file-dropzone/file-dropzone.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var form = require('@react-stately/form');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
@@ -15,7 +15,7 @@ var utils = require('../system/utils.cjs');
 var contexts = require('./contexts.cjs');
 var fileInfo = require('./file-info.cjs');
 var utils$1 = require('./utils.cjs');
-var upload = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.cjs');
+var upload = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/upload.cjs');
 
 const FileDropzone = (originalProps) => {
   const [props, variantProps] = utils.mapPropsVariants(
@@ -25,6 +25,7 @@ const FileDropzone = (originalProps) => {
   const {
     name,
     allowedMimeTypes = [],
+    fileSizeBase = "binary",
     maxFileSize = Number.POSITIVE_INFINITY,
     minFileSize = 0,
     showFileSizeText = true,
@@ -65,15 +66,16 @@ const FileDropzone = (originalProps) => {
   });
   const slots = ouiTheme.fileDropzoneStyles(variantProps);
   const fileSizeTextId = reactAria.useId();
-  const formatError = react.useCallback(
+  const formatError = $670gB$react.useCallback(
     (error) => utils$1.formatErrorMessage(error, {
       maxFileSize,
       minFileSize,
-      maxFiles
+      maxFiles,
+      fileSizeBase
     }),
-    [maxFileSize, maxFiles, minFileSize]
+    [fileSizeBase, maxFileSize, maxFiles, minFileSize]
   );
-  const onDrop = react.useCallback(
+  const onDrop = $670gB$react.useCallback(
     (acceptedFiles, fileRejections) => {
       const files = acceptedFiles;
       if (showRejectedFiles) {
@@ -91,13 +93,13 @@ const FileDropzone = (originalProps) => {
     },
     [formatError, onError, setRejections, setValue, showRejectedFiles]
   );
-  const handleRemoveFile = react.useCallback(
+  const handleRemoveFile = $670gB$react.useCallback(
     (fileName) => {
       setValue((files) => files.filter((file) => file.name !== fileName));
     },
     [setValue]
   );
-  const handleRemoveRejection = react.useCallback(
+  const handleRemoveRejection = $670gB$react.useCallback(
     (fileName) => {
       setRejections(
         (rejections2) => rejections2.filter((file) => file.name !== fileName)
@@ -123,30 +125,31 @@ const FileDropzone = (originalProps) => {
     maxFiles,
     multiple: maxFiles !== 1
   });
-  const fileSizeText = react.useMemo(() => {
+  const fileSizeText = $670gB$react.useMemo(() => {
     const notDefaultMaxFileSize = maxFileSize !== Number.POSITIVE_INFINITY;
     const notDefaultMinFileSize = minFileSize !== 0;
     const shouldShow = showFileSizeText && (notDefaultMaxFileSize || notDefaultMinFileSize);
     if (!shouldShow) return null;
     if (notDefaultMaxFileSize && notDefaultMinFileSize) {
-      return `File size must be between ${utils$1.formatBytes(minFileSize, 2)} and ${utils$1.formatBytes(
+      return `File size must be between ${utils$1.formatBytes(minFileSize, 2, fileSizeBase)} and ${utils$1.formatBytes(
         maxFileSize,
-        2
+        2,
+        fileSizeBase
       )}`;
     }
     if (notDefaultMaxFileSize) {
-      return `Maximum file size: ${utils$1.formatBytes(maxFileSize, 2)}`;
+      return `Maximum file size: ${utils$1.formatBytes(maxFileSize, 2, fileSizeBase)}`;
     }
     if (notDefaultMinFileSize) {
-      return `Minimum file size: ${utils$1.formatBytes(minFileSize, 2)}`;
+      return `Minimum file size: ${utils$1.formatBytes(minFileSize, 2, fileSizeBase)}`;
     }
     return null;
-  }, [maxFileSize, minFileSize, showFileSizeText]);
-  const triggerFileSelector = react.useCallback(() => {
+  }, [maxFileSize, minFileSize, showFileSizeText, fileSizeBase]);
+  const triggerFileSelector = $670gB$react.useCallback(() => {
     if (isDisabled || isReadOnly) return;
     dropzoneState.inputRef.current?.click();
   }, [dropzoneState, isDisabled, isReadOnly]);
-  react.useEffect(() => {
+  $670gB$react.useEffect(() => {
     if (value.length <= maxFiles) {
       let changed = false;
       const newFiles = value.map((file) => {
@@ -161,14 +164,14 @@ const FileDropzone = (originalProps) => {
       }
     }
   }, [maxFiles, setValue, value]);
-  const inputProps = react.useMemo(() => {
+  const inputProps = $670gB$react.useMemo(() => {
     const inputProps2 = { ...fieldProps, name };
     if (fileSizeText) {
       inputProps2["aria-describedby"] = inputProps2["aria-describedby"] ? `${inputProps2["aria-describedby"]} ${fileSizeTextId}` : fileSizeTextId;
     }
     return getInputProps(inputProps2);
   }, [fieldProps, getInputProps, fileSizeTextId, name, fileSizeText]);
-  const showDropzone = react.useMemo(() => {
+  const showDropzone = $670gB$react.useMemo(() => {
     if (hideDropzoneOnValue) {
       return value.length < maxFiles;
     }
@@ -187,6 +190,7 @@ const FileDropzone = (originalProps) => {
           {
             isDisabled,
             isReadOnly,
+            fileSizeBase,
             maxFiles,
             maxFileSize,
             showDropzone,