@opengovsg/oui 0.0.0-snapshot-20251002073151 → 0.0.0-snapshot-20251201075851

package/dist/cjs/badge/badge.cjs

@@ -3,11 +3,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var useBadge = require('./use-badge.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');
 
-const Badge = $670gB$react.forwardRef((props, ref) => {
+const Badge = react.forwardRef((props, ref) => {
   const {
     Component,
     children,
@@ -19,13 +19,13 @@ const Badge = $670gB$react.forwardRef((props, ref) => {
     endContent,
     isCloseable
   } = useBadge.useBadge({ ...props, ref });
-  const start = $670gB$react.useMemo(() => {
+  const start = react.useMemo(() => {
     if (props.variant === "dot" && !startContent) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.dot({ className: classNames?.dot }) });
     }
     return startContent;
   }, [props.variant, startContent, slots, classNames?.dot]);
-  const end = $670gB$react.useMemo(() => {
+  const end = react.useMemo(() => {
     if (isCloseable) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { ...getCloseButtonProps(), children: endContent ?? /* @__PURE__ */ jsxRuntime.jsx(x.default, { className: "size-full" }) });
     }

package/dist/cjs/badge/use-badge.cjs

@@ -1,7 +1,7 @@
 "use strict";
 'use strict';
 
-var $670gB$react = require('react');
+var react = require('react');
 var utils$1 = require('@react-aria/utils');
 var reactAria = require('react-aria');
 var useDeepCompare = require('use-deep-compare');
@@ -40,7 +40,7 @@ function useBadge(originalProps) {
     ...props
   } = _props;
   const domRef = refs.useDomRef(ref);
-  const Component = $670gB$react.useMemo(() => as || "div", [as]);
+  const Component = react.useMemo(() => as || "div", [as]);
   const baseClassName = ouiTheme.cn(classNames?.base, className);
   const formatMessage = reactAria.useMessageFormatter(i18nStrings);
   const isCloseable = variantProps.isCloseable || !!onClose;
@@ -59,14 +59,14 @@ function useBadge(originalProps) {
     isDisabled: !!variantProps?.isDisabled,
     onPress: onClose
   });
-  const getContentClone = $670gB$react.useCallback(
-    (content) => $670gB$react.isValidElement(content) ? $670gB$react.cloneElement(content, {
+  const getContentClone = react.useCallback(
+    (content) => react.isValidElement(content) ? react.cloneElement(content, {
       // @ts-expect-error types are not full
       className: content.props?.className
     }) : null,
     []
   );
-  const getChipProps = $670gB$react.useCallback(() => {
+  const getChipProps = react.useCallback(() => {
     return {
       ref: domRef,
       className: slots.base({ className: baseClassName }),
@@ -74,7 +74,7 @@ function useBadge(originalProps) {
       ...props
     };
   }, [baseClassName, domRef, props, slots, variantProps?.isDisabled]);
-  const getCloseButtonProps = $670gB$react.useCallback(() => {
+  const getCloseButtonProps = react.useCallback(() => {
     return {
       role: "button",
       tabIndex: 0,

package/dist/cjs/banner/banner.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -39,10 +39,13 @@ const Banner = ({
 }) => {
   const formatMessage = reactAria.useMessageFormatter(i18nStrings);
   const styles = ouiTheme.bannerStyles({ variant, size });
-  const startContent = $670gB$react.useMemo(() => {
+  const startContent = react.useMemo(() => {
     if (startContentProp) {
       return startContentProp;
     }
+    if (startContentProp === null) {
+      return null;
+    }
     switch (variant) {
       case "info":
         return /* @__PURE__ */ jsxRuntime.jsx(info.default, { className: styles.icon({ className: classNames?.icon }) });
@@ -56,9 +59,11 @@ const Banner = ({
         );
     }
   }, [classNames?.icon, startContentProp, styles, variant]);
-  const bannerRef = $670gB$react.useRef(null);
+  const bannerRef = react.useRef(null);
   const state = reactStately.useDisclosureState({
-    defaultExpanded
+    defaultExpanded,
+    isExpanded: disclosureProps.isExpanded,
+    onExpandedChange: disclosureProps.onExpandedChange
   });
   const { buttonProps, panelProps: bannerProps } = reactAria.useDisclosure(
     disclosureProps,
@@ -76,7 +81,7 @@ const Banner = ({
       ...isDismissable ? bannerProps : {},
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.content({ className: classNames?.content }), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          startContent && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: styles.startContentWrapper({

package/dist/cjs/button/button.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var utils = require('@react-aria/utils');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -11,7 +11,7 @@ var useRipple = require('../ripple/use-ripple.cjs');
 var spinner = require('../spinner/spinner.cjs');
 var ripple = require('../ripple/ripple.cjs');
 
-const Button = $670gB$react.forwardRef(
+const Button = react.forwardRef(
   ({
     startContent,
     endContent,
@@ -37,7 +37,7 @@ const Button = $670gB$react.forwardRef(
       onClear: onClearRipple,
       ripples
     } = useRipple.useRipple();
-    const spinner$1 = $670gB$react.useMemo(() => {
+    const spinner$1 = react.useMemo(() => {
       if (spinnerProp) {
         return spinnerProp;
       }

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

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var 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 = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
   const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
   const formatMessage = useCalendarI18n.useCalendarI18n();
-  const handleTodayClick = $670gB$react.useCallback(() => {
+  const handleTodayClick = react.useCallback(() => {
     const todayDate = date.today(date.getLocalTimeZone());
     state.setFocusedDate(todayDate);
     if (shouldSetDateOnTodayButtonClick) {

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

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var button = require('../button/button.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
@@ -16,7 +16,7 @@ var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0
 function CalendarHeader({ offsetMonths = 0 }) {
   const { direction } = reactAriaComponents.useLocale();
   const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
-  const state = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const state = 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 $670gB$react = require('react');
+var react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
@@ -15,7 +15,7 @@ var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
 
 const CalendarMonthDaySelector = () => {
   const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
-  const state = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const state = 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) => {
@@ -63,7 +63,8 @@ const CalendarMonthDaySelector = () => {
           list: slots.yearList({ className: classNames?.yearList }),
           selectedText: slots.selectorText({
             className: classNames?.selectorText
-          })
+          }),
+          popover: "min-w-[8ch]"
         },
         selectedKey: state.visibleRange.start.year,
         "aria-label": formatMessage("selectYear"),

package/dist/cjs/calendar/calendar.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var 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 = $670gB$react.useMemo(
+  const context = 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 = $670gB$react.useMemo(() => {
+  const dateToHighlight = 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 = $670gB$react.useContext(reactAriaComponents.CalendarStateContext);
+  const state = 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 $670gB$react = require('react');
+var react = require('react');
 var reactAria = require('react-aria');
 var utils = require('../utils.cjs');
 
 const useCalendarSelectors = (state) => {
-  const yearRange = $670gB$react.useMemo(() => {
+  const yearRange = 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 = $670gB$react.useMemo(() => {
+  const datePartOrder = react.useMemo(() => {
     const parts = dateFormatter.formatToParts(
       state.visibleRange.start.toDate(state.timeZone)
     );
@@ -29,7 +29,7 @@ const useCalendarSelectors = (state) => {
     yearRange.end,
     state.timeZone
   );
-  return $670gB$react.useMemo(() => {
+  return react.useMemo(() => {
     return {
       months,
       years,

package/dist/cjs/calendar/utils.cjs

@@ -1,7 +1,7 @@
 "use strict";
 'use strict';
 
-var $670gB$react = require('react');
+var 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 $670gB$react.useMemo(() => {
+  return 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 $670gB$react.useMemo(() => {
+  return react.useMemo(() => {
     return Array.from({ length: yearEnd - yearStart + 1 }, (_, i) => {
       const year = yearStart + i;
       return {

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

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var 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 = $670gB$react.useDeferredValue(inputValue);
-  const preparedItems = $670gB$react.useMemo(() => {
+  const deferredInputValue = react.useDeferredValue(inputValue);
+  const preparedItems = react.useMemo(() => {
     return items?.map((item) => ({
       ...item,
       prepared: fuzzysort.prepare(item.textValue)
     })) ?? [];
   }, [items]);
-  const [filteredResults, setFilteredResults] = $670gB$react.useState({ items, result: {} });
-  const onSelectionChange = $670gB$react.useCallback(
+  const [filteredResults, setFilteredResults] = react.useState({ items, result: {} });
+  const onSelectionChange = react.useCallback(
     (key) => {
       onSelectionChangeProp(key);
       setFilteredResults({ items: preparedItems, result: {} });
     },
     [onSelectionChangeProp, preparedItems]
   );
-  const onInputChange = $670gB$react.useCallback(
+  const onInputChange = 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 $670gB$react = require('react');
+var 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 = $670gB$react.useMemo(() => {
+  const defaultTextValue = 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 $670gB$react = require('react');
+var react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -79,7 +79,7 @@ function ComboBox(originalProps) {
     ...props
   } = _props;
   const styles = ouiTheme.comboBoxStyles(variantProps);
-  const layout = $670gB$react.useMemo(() => {
+  const layout = react.useMemo(() => {
     return new reactAriaComponents.ListLayout({
       estimatedRowHeight: calculateEstimatedRowHeight(
         variantProps.size ?? "md"
@@ -87,7 +87,7 @@ function ComboBox(originalProps) {
       ...listLayoutOptions
     });
   }, [listLayoutOptions, variantProps.size]);
-  const renderEmptyState = $670gB$react.useCallback(
+  const renderEmptyState = 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 $670gB$react = require('react');
+var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
@@ -11,9 +11,17 @@ var field = require('../field/field.cjs');
 
 function DateField(originalProps) {
   const [
-    { label, description, errorMessage, className, classNames, ...props },
+    {
+      inputProps,
+      label,
+      description,
+      errorMessage,
+      className,
+      classNames,
+      ...props
+    },
     variantProps
-  ] = $670gB$react.useMemo(
+  ] = react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.dateFieldStyles.variantKeys),
     [originalProps]
   );
@@ -28,11 +36,11 @@ function DateField(originalProps) {
       isDisabled: variantProps.isDisabled,
       className: ouiTheme.composeTailwindRenderProps(
         className ?? classNames?.base,
-        "flex flex-col gap-2"
+        "flex w-full flex-col gap-2"
       ),
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(DateInput, { size: variantProps.size, className: styles }),
+        /* @__PURE__ */ jsxRuntime.jsx(DateInput, { size: variantProps.size, className: styles, ...inputProps }),
         description && /* @__PURE__ */ jsxRuntime.jsx(
           field.Description,
           {
@@ -47,7 +55,7 @@ function DateField(originalProps) {
   );
 }
 function DateInput(originalProps) {
-  const [{ className, classNames, ...props }, variantProps] = $670gB$react.useMemo(
+  const [{ className, classNames, ...props }, variantProps] = react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.dateInputStyles.variantKeys),
     [originalProps]
   );
@@ -67,6 +75,7 @@ function DateInput(originalProps) {
           className: ouiTheme.composeRenderProps(
             classNames?.segment,
             (className2, renderProps) => styles.segment({
+              isEditable: segment.isEditable,
               ...renderProps,
               className: className2
             })

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

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
@@ -25,10 +25,11 @@ function DatePicker(originalProps) {
       calendarProps,
       popoverProps,
       calendarButtonProps,
+      selectorIcon,
       ...props
     },
     variantProps
-  ] = $670gB$react.useMemo(
+  ] = react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.datePickerStyles.variantKeys),
     [originalProps]
   );
@@ -63,20 +64,44 @@ function DatePicker(originalProps) {
                 className: classNames?.calendarButton
               }),
               ...calendarButtonProps,
-              children: /* @__PURE__ */ jsxRuntime.jsx(calendar.default, { "aria-hidden": true })
+              children: selectorIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
+                calendar.default,
+                {
+                  className: styles.selectorIcon({
+                    className: classNames?.selectorIcon
+                  }),
+                  "aria-hidden": true
+                }
+              )
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsxRuntime.jsx(
-          calendar$1.Calendar,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          popover.Popover,
           {
-            size: variantProps.size === "xs" ? "sm" : variantProps.size,
-            classNames: classNames?.calendar,
-            ...calendarProps
+            placement: "bottom end",
+            classNames: classNames?.popover,
+            ...popoverProps,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsxRuntime.jsx(
+              calendar$1.Calendar,
+              {
+                size: variantProps.size === "xs" ? "sm" : variantProps.size,
+                classNames: classNames?.calendar,
+                pageBehavior: props.pageBehavior,
+                ...calendarProps
+              }
+            ) })
           }
-        ) }) }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
-        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage })
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Description,
+          {
+            className: classNames?.description,
+            size: variantProps.size,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { classNames: classNames?.error, size: variantProps.size, children: errorMessage })
       ]
     }
   );

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

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -31,12 +31,12 @@ function DateRangePicker(originalProps) {
       ...props
     },
     variantProps
-  ] = $670gB$react.useMemo(
+  ] = react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.dateRangePickerStyles.variantKeys),
     [originalProps]
   );
   const styles = ouiTheme.dateRangePickerStyles(variantProps);
-  const { minValue, maxValue } = $670gB$react.useMemo(() => {
+  const { minValue, maxValue } = react.useMemo(() => {
     return {
       minValue: minValueProp ?? new date.CalendarDate(1900, 0, 1),
       // Default to 1 Jan 1900

package/dist/cjs/field/field.cjs

@@ -3,6 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var 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');
@@ -14,12 +15,19 @@ function Description({ size, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Text,
     {
-      ...props,
       slot: "description",
+      ...props,
       className: ouiTheme.descriptionStyles({ className, size })
     }
   );
 }
+function FieldErrorIcon({
+  size,
+  className
+}) {
+  const styles = ouiTheme.fieldErrorStyles({ size });
+  return /* @__PURE__ */ jsxRuntime.jsx(circleAlert.default, { className: styles.icon({ className }) });
+}
 function FieldError({
   children,
   className,
@@ -28,7 +36,15 @@ function FieldError({
   ...props
 }) {
   const styles = ouiTheme.fieldErrorStyles({ size });
-  if (!children) return null;
+  const childrenFromProps = react.useMemo(() => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FieldErrorIcon, { className: classNames?.icon, size }),
+        children
+      ] });
+    }
+    return children;
+  }, [children, classNames?.icon, size]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.FieldError,
     {
@@ -37,10 +53,7 @@ function FieldError({
         className ?? classNames?.text,
         (className2, renderProps) => styles.text({ ...renderProps, className: className2 })
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(circleAlert.default, { className: styles.icon({ className: classNames?.icon }) }),
-        children
-      ] })
+      children: childrenFromProps
     }
   );
 }
@@ -59,5 +72,6 @@ function FieldGroup(props) {
 
 exports.Description = Description;
 exports.FieldError = FieldError;
+exports.FieldErrorIcon = FieldErrorIcon;
 exports.FieldGroup = FieldGroup;
 exports.Label = Label;

package/dist/cjs/field/index.cjs

@@ -7,5 +7,6 @@ var field = require('./field.cjs');
 
 exports.Description = field.Description;
 exports.FieldError = field.FieldError;
+exports.FieldErrorIcon = field.FieldErrorIcon;
 exports.FieldGroup = field.FieldGroup;
 exports.Label = field.Label;

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

@@ -0,0 +1,18 @@
+"use strict";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [FileDropzoneStateContext, useFileDropzoneStateContext] = context.createContext({
+  strict: true,
+  name: "FileDropzoneStateContext"
+});
+const [FileDropzoneStyleContext, useFileDropzoneStyleContext] = context.createContext({
+  strict: true,
+  name: "FileDropzoneStyleContext"
+});
+
+exports.FileDropzoneStateContext = FileDropzoneStateContext;
+exports.FileDropzoneStyleContext = FileDropzoneStyleContext;
+exports.useFileDropzoneStateContext = useFileDropzoneStateContext;
+exports.useFileDropzoneStyleContext = useFileDropzoneStyleContext;