@opengovsg/oui 0.0.32 → 0.0.33

package/dist/cjs/accordion/accordion.cjs

@@ -0,0 +1,189 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var children = require('../system/react-utils/children.cjs');
+var utils = require('../system/utils.cjs');
+var context = require('../system/react-utils/context.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');
+
+const [AccordionStyleContext, useAccordionStyleContext] = context.createContext({
+  name: "AccordionStyleContext",
+  strict: true
+});
+const AccordionItem = utils.forwardRef(
+  ({ classNames, className, children, ...props }, ref) => {
+    const { slots } = $670gB$react.useContext(AccordionStyleContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Disclosure,
+      {
+        ...props,
+        ref,
+        className: reactAriaComponents.composeRenderProps(
+          className,
+          (className2, renderProps) => slots.item({
+            ...renderProps,
+            className: ouiTheme.cn(classNames?.item, className2)
+          })
+        ),
+        children
+      }
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+function AccordionHeader({
+  children: children$1,
+  classNames,
+  indicator,
+  startContent,
+  endContent,
+  hideIndicator = false
+}) {
+  const { slots, classNames: contextClassNames } = $670gB$react.useContext(
+    AccordionStyleContext
+  );
+  const { isExpanded } = $670gB$react.useContext(reactAriaComponents.DisclosureStateContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Heading,
+    {
+      className: slots.heading({
+        className: ouiTheme.cn(contextClassNames?.heading, classNames?.heading)
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Button,
+        {
+          slot: "trigger",
+          className: slots.trigger({
+            className: ouiTheme.cn(contextClassNames?.trigger, classNames?.trigger)
+          }),
+          children: (buttonRenderProps) => {
+            const headerRenderProps = { ...buttonRenderProps, isExpanded };
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              startContent && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: slots.startContentWrapper({
+                    className: ouiTheme.cn(
+                      contextClassNames?.startContentWrapper,
+                      classNames?.startContentWrapper
+                    )
+                  }),
+                  children: children.renderChildren(headerRenderProps, startContent)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: slots.title({
+                    className: ouiTheme.cn(contextClassNames?.title, classNames?.title)
+                  }),
+                  children: children.renderChildren(headerRenderProps, children$1)
+                }
+              ),
+              !hideIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: slots.indicator({
+                    className: ouiTheme.cn(
+                      contextClassNames?.indicator,
+                      classNames?.indicator
+                    )
+                  }),
+                  children: children.renderChildren(
+                    headerRenderProps,
+                    indicator ?? /* @__PURE__ */ jsxRuntime.jsx(chevronDown.default, {})
+                  )
+                }
+              ),
+              startContent && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: slots.endContentWrapper({
+                    className: ouiTheme.cn(
+                      contextClassNames?.endContentWrapper,
+                      classNames?.endContentWrapper
+                    )
+                  }),
+                  children: children.renderChildren(headerRenderProps, endContent)
+                }
+              ),
+              children.renderChildren(headerRenderProps, endContent)
+            ] });
+          }
+        }
+      )
+    }
+  );
+}
+function AccordionContent({
+  children,
+  classNames,
+  ...props
+}) {
+  const { slots, classNames: contextClassNames } = $670gB$react.useContext(
+    AccordionStyleContext
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.DisclosurePanel,
+    {
+      ...props,
+      className: ouiTheme.composeTailwindRenderProps(
+        props.className,
+        slots.panel({
+          className: ouiTheme.cn(contextClassNames?.panel, classNames?.panel)
+        })
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: slots.content({
+            className: ouiTheme.cn(contextClassNames?.content, classNames?.content)
+          }),
+          children
+        }
+      )
+    }
+  );
+}
+const Accordion = utils.forwardRef(
+  (originalProps, ref) => {
+    const [
+      { classNames, className, ...props },
+      { size = "md", ...variantProps }
+    ] = utils.mapPropsVariants(originalProps, ouiTheme.accordionStyles.variantKeys);
+    const slots = ouiTheme.accordionStyles({ size, ...variantProps });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionStyleContext.Provider,
+      {
+        value: {
+          slots,
+          classNames
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.DisclosureGroup,
+          {
+            className: slots.base({
+              className: ouiTheme.cn(classNames?.base, className)
+            }),
+            ...props,
+            ref
+          }
+        )
+      }
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionHeader = AccordionHeader;
+exports.AccordionItem = AccordionItem;
+exports.AccordionStyleContext = AccordionStyleContext;
+exports.useAccordionStyleContext = useAccordionStyleContext;

package/dist/cjs/accordion/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+'use strict';
+
+var accordion = require('./accordion.cjs');
+
+
+
+exports.Accordion = accordion.Accordion;
+exports.AccordionContent = accordion.AccordionContent;
+exports.AccordionHeader = accordion.AccordionHeader;
+exports.AccordionItem = accordion.AccordionItem;
+exports.AccordionStyleContext = accordion.AccordionStyleContext;
+exports.useAccordionStyleContext = accordion.useAccordionStyleContext;

package/dist/cjs/banner/banner.cjs

@@ -7,9 +7,9 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.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 button = require('../button/button.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 = {

package/dist/cjs/button/button.cjs

@@ -7,9 +7,10 @@ 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 ripple = require('../ripple/ripple.cjs');
+var children = require('../system/react-utils/children.cjs');
 
 const Button = $670gB$react.forwardRef(
   ({
@@ -23,8 +24,9 @@ const Button = $670gB$react.forwardRef(
     size = "md",
     spinnerPlacement = "start",
     loadingText,
+    pendingElement,
     onPress,
-    children,
+    children: children$1,
     disableRipple,
     isPending,
     spinner: spinnerProp,
@@ -49,7 +51,7 @@ const Button = $670gB$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 = $670gB$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-month-day-selector.cjs

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
+var select = require('../select/select.cjs');
+var selectItem = require('../select/select-item.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
 var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
-var select = require('../select/select.cjs');
-var selectItem = require('../select/select-item.cjs');
 var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
 
 const CalendarMonthDaySelector = () => {

package/dist/cjs/checkbox/checkbox.cjs

@@ -5,11 +5,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 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.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');
-var field = require('../field/field.cjs');
 
 const Checkbox = ({
   classNames,

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

@@ -7,13 +7,13 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+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 field = require('../field/field.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');
-var popover = require('../popover/popover.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

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

@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var utils = require('../system/utils.cjs');
 var field = require('../field/field.cjs');
+var utils = require('../system/utils.cjs');
 
 function DateField(originalProps) {
   const [

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

@@ -6,13 +6,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var utils = require('../system/utils.cjs');
-var dateField = require('../date-field/date-field.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');
+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 button = require('../button/button.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.2.3/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
 
 function DatePicker(originalProps) {
   const [

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

@@ -7,13 +7,13 @@ var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var utils = require('../system/utils.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');
-var rangeCalendar = require('../range-calendar/range-calendar.cjs');
-var field = require('../field/field.cjs');
-var dateField = require('../date-field/date-field.cjs');
 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.2.3/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
 
 function DateRangePicker(originalProps) {
   const [

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

@@ -9,13 +9,13 @@ var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var reactDropzone = require('react-dropzone');
 var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
+var useControllableState = require('../hooks/use-controllable-state.cjs');
 var utils = require('../system/utils.cjs');
 var contexts = require('./contexts.cjs');
 var fileInfo = require('./file-info.cjs');
 var utils$1 = require('./utils.cjs');
-var useControllableState = require('../hooks/use-controllable-state.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');
-var field = require('../field/field.cjs');
 
 const FileDropzone = (originalProps) => {
   const [props, variantProps] = utils.mapPropsVariants(

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

@@ -5,10 +5,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
 var contexts = require('./contexts.cjs');
 var utils = require('./utils.cjs');
 var trash2 = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/trash-2.cjs');
-var button = require('../button/button.cjs');
 
 const FileInfo = ({ file, imagePreview, classNames }) => {
   const {

package/dist/cjs/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 'use strict';
 
-var index = require('./avatar/index.cjs');
 var useControllableState = require('./hooks/use-controllable-state.cjs');
 var useDraggable = require('./hooks/use-draggable.cjs');
 var button = require('./button/button.cjs');
@@ -28,10 +27,10 @@ var select = require('./select/select.cjs');
 var selectItem = require('./select/select-item.cjs');
 var selectVariantContext = require('./select/select-variant-context.cjs');
 var badge = require('./badge/badge.cjs');
-var date = require('@internationalized/date');
 var calendar = require('./calendar/calendar.cjs');
 var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
 var utils = require('./calendar/utils.cjs');
+var date = require('@internationalized/date');
 var rangeCalendar = require('./range-calendar/range-calendar.cjs');
 var menu = require('./menu/menu.cjs');
 var popover = require('./popover/popover.cjs');
@@ -41,10 +40,10 @@ var datePicker = require('./date-picker/date-picker.cjs');
 var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
 var checkbox = require('./checkbox/checkbox.cjs');
 var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
-var usePagination = require('./pagination/hooks/use-pagination.cjs');
 var pagination = require('./pagination/pagination.cjs');
 var paginationCursor = require('./pagination/pagination-cursor.cjs');
 var paginationItem = require('./pagination/pagination-item.cjs');
+var usePagination = require('./pagination/hooks/use-pagination.cjs');
 var usePagination$1 = require('./pagination/use-pagination.cjs');
 var fileDropzone = require('./file-dropzone/file-dropzone.cjs');
 var fileInfo = require('./file-dropzone/file-info.cjs');
@@ -57,7 +56,6 @@ var modalBody = require('./modal/modal-body.cjs');
 var modalHeader = require('./modal/modal-header.cjs');
 var modalVariantContext = require('./modal/modal-variant-context.cjs');
 var toast = require('./toast/toast.cjs');
-var sonner = require('sonner');
 var navbar = require('./navbar/navbar.cjs');
 var navbarBrand = require('./navbar/navbar-brand.cjs');
 var navbarContent = require('./navbar/navbar-content.cjs');
@@ -67,6 +65,9 @@ var toggle$1 = require('./navbar/navbar-menu/toggle.cjs');
 var navbarItem = require('./navbar/navbar-item.cjs');
 var useNavbar = require('./navbar/use-navbar.cjs');
 var navbarContext = require('./navbar/navbar-context.cjs');
+var index = require('./avatar/index.cjs');
+var accordion = require('./accordion/accordion.cjs');
+var sonner = require('sonner');
 var avatarContext = require('./avatar/avatar-context.cjs');
 var avatarGroup = require('./avatar/avatar-group.cjs');
 var avatarGroupContext = require('./avatar/avatar-group-context.cjs');
@@ -74,7 +75,6 @@ var avatar = require('./avatar/avatar.cjs');
 
 
 
-exports.Avatar = index.Avatar;
 exports.useControllableState = useControllableState.useControllableState;
 exports.useDraggable = useDraggable.useDraggable;
 exports.Button = button.Button;
@@ -108,10 +108,6 @@ exports.SelectItem = selectItem.SelectItem;
 exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
 exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
 exports.Badge = badge.Badge;
-Object.defineProperty(exports, "CalendarDate", {
-	enumerable: true,
-	get: function () { return date.CalendarDate; }
-});
 exports.Calendar = calendar.Calendar;
 exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
 exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
@@ -120,6 +116,10 @@ exports.getEraFormat = utils.getEraFormat;
 exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
 exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
 exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
+Object.defineProperty(exports, "CalendarDate", {
+	enumerable: true,
+	get: function () { return date.CalendarDate; }
+});
 exports.RangeCalendar = rangeCalendar.RangeCalendar;
 exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
 exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -146,10 +146,10 @@ exports.Checkbox = checkbox.Checkbox;
 exports.CheckboxGroup = checkbox.CheckboxGroup;
 exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
 exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
-exports.PaginationItemType = usePagination.PaginationItemType;
 exports.Pagination = pagination.Pagination;
 exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
+exports.PaginationItemType = usePagination.PaginationItemType;
 exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
 exports.usePagination = usePagination$1.usePagination;
 exports.FileDropzone = fileDropzone.FileDropzone;
@@ -165,10 +165,6 @@ exports.ModalHeader = modalHeader.ModalHeader;
 exports.ModalVariantContext = modalVariantContext.ModalVariantContext;
 exports.useModalVariantContext = modalVariantContext.useModalVariantContext;
 exports.Toaster = toast.Toaster;
-Object.defineProperty(exports, "toast", {
-	enumerable: true,
-	get: function () { return sonner.toast; }
-});
 exports.Navbar = navbar.Navbar;
 exports.NavbarBrand = navbarBrand.NavbarBrand;
 exports.NavbarContent = navbarContent.NavbarContent;
@@ -179,6 +175,17 @@ exports.NavbarItem = navbarItem.NavbarItem;
 exports.useNavbar = useNavbar.useNavbar;
 exports.NavbarProvider = navbarContext.NavbarProvider;
 exports.useNavbarContext = navbarContext.useNavbarContext;
+exports.Avatar = index.Avatar;
+exports.Accordion = accordion.Accordion;
+exports.AccordionContent = accordion.AccordionContent;
+exports.AccordionHeader = accordion.AccordionHeader;
+exports.AccordionItem = accordion.AccordionItem;
+exports.AccordionStyleContext = accordion.AccordionStyleContext;
+exports.useAccordionStyleContext = accordion.useAccordionStyleContext;
+Object.defineProperty(exports, "toast", {
+	enumerable: true,
+	get: function () { return sonner.toast; }
+});
 exports.AvatarContext = avatarContext.AvatarContext;
 exports.useAvatarContext = avatarContext.useAvatarContext;
 exports.AvatarGroup = avatarGroup.AvatarGroup;

package/dist/cjs/menu/menu.cjs

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var context = require('../system/react-utils/context.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');
 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 popover = require('../popover/popover.cjs');
 
 const [MenuVariantContext, useMenuVariantContext] = context.createContext({
   name: "MenuVariantContext",

package/dist/cjs/modal/modal-content.cjs

@@ -7,10 +7,10 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
 var i18n = require('./i18n.cjs');
 var modalVariantContext = require('./modal-variant-context.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');
-var button = require('../button/button.cjs');
 
 function ModalContent({
   closeButtonContent: closeButtonContentProp,

package/dist/cjs/number-field/number-field.cjs

@@ -5,12 +5,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
+var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
 var utils = require('../system/utils.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 plus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/plus.cjs');
-var field = require('../field/field.cjs');
-var input = require('../input/input.cjs');
-var button = require('../button/button.cjs');
 
 function NumberField(originalProps) {
   const [

package/dist/cjs/range-calendar/range-calendar.cjs

@@ -8,12 +8,12 @@ var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var useDeepCompare = require('use-deep-compare');
 var ouiTheme = require('@opengovsg/oui-theme');
+var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
 var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
 var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
 var calendarHeader = require('../calendar/calendar-header.cjs');
 var utils = require('../system/utils.cjs');
-var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 
 const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
   const [props, variantProps] = utils.mapPropsVariants(

package/dist/cjs/select/select.cjs

@@ -7,12 +7,12 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
+var field = require('../field/field.cjs');
+var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
-var field = require('../field/field.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 popover = require('../popover/popover.cjs');
-var button = require('../button/button.cjs');
 
 const i18nStrings = {
   "en-SG": {

package/dist/cjs/system/react-utils/children.cjs

@@ -21,6 +21,13 @@ const pickChildren = (children, targetChild) => {
   const targetChildren = target.length >= 0 ? target : void 0;
   return [withoutTargetChildren, targetChildren];
 };
+const renderChildren = (renderProps, children) => {
+  if (typeof children === "function") {
+    return children(renderProps);
+  }
+  return children;
+};
 
 exports.getValidChildren = getValidChildren;
 exports.pickChildren = pickChildren;
+exports.renderChildren = renderChildren;

package/dist/cjs/tag-field/tag-field.cjs

@@ -6,15 +6,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
+var popover = require('../popover/popover.cjs');
 var tagFieldItem = require('./tag-field-item.cjs');
 var tagFieldList = require('./tag-field-list.cjs');
 var tagFieldRoot = require('./tag-field-root.cjs');
 var tagFieldTagList = require('./tag-field-tag-list.cjs');
 var tagFieldTrigger = require('./tag-field-trigger.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 field = require('../field/field.cjs');
-var input = require('../input/input.cjs');
-var popover = require('../popover/popover.cjs');
 
 function TagField({
   classNames,

package/dist/cjs/text-area-field/text-area-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var textArea = require('../text-area/text-area.cjs');
 var field = require('../field/field.cjs');
+var textArea = require('../text-area/text-area.cjs');
 
 function TextAreaField({
   label,

package/dist/cjs/text-field/text-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var input = require('../input/input.cjs');
 var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
 
 function TextField({
   label,