@opengovsg/oui 0.0.54 → 0.0.56

package/dist/cjs/list-box/list-box.cjs

@@ -0,0 +1,65 @@
+"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 utils = require('../system/utils.cjs');
+
+const ListBoxItem = utils.forwardRef(function ListBoxItem2(originalProps, ref) {
+  const [
+    { className, description, children, classNames, ...props },
+    variantProps
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.listBoxItemStyles.variantKeys);
+  const styles = ouiTheme.listBoxItemStyles(variantProps);
+  const defaultTextValue = $670gB$react.useMemo(() => {
+    if (props.textValue) {
+      return props.textValue;
+    }
+    if (typeof children === "string") {
+      return children;
+    }
+    return void 0;
+  }, [children, props.textValue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ListBoxItem,
+    {
+      ref,
+      textValue: defaultTextValue,
+      ...props,
+      className: reactAriaComponents.composeRenderProps(
+        className ?? classNames?.container,
+        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
+      ),
+      children: (renderProps) => {
+        if (typeof children === "function") {
+          return children(renderProps);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.Text,
+            {
+              className: styles.label({ className: classNames?.label }),
+              slot: "label",
+              children
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.Text,
+            {
+              className: styles.description({
+                className: classNames?.description
+              }),
+              slot: "description",
+              children: description
+            }
+          )
+        ] });
+      }
+    }
+  );
+});
+
+exports.ListBoxItem = ListBoxItem;

package/dist/cjs/navbar/index.cjs

@@ -4,9 +4,9 @@
 var navbar = require('./navbar.cjs');
 var navbarBrand = require('./navbar-brand.cjs');
 var navbarContent = require('./navbar-content.cjs');
-var menu = require('./navbar-menu/menu.cjs');
-var item = require('./navbar-menu/item.cjs');
-var toggle = require('./navbar-menu/toggle.cjs');
+var navbarMenu = require('./navbar-menu.cjs');
+var navbarMenuItem = require('./navbar-menu-item.cjs');
+var navbarMenuToggle = require('./navbar-menu-toggle.cjs');
 var navbarItem = require('./navbar-item.cjs');
 var useNavbar = require('./use-navbar.cjs');
 var navbarContext = require('./navbar-context.cjs');
@@ -16,9 +16,9 @@ var navbarContext = require('./navbar-context.cjs');
 exports.Navbar = navbar.Navbar;
 exports.NavbarBrand = navbarBrand.NavbarBrand;
 exports.NavbarContent = navbarContent.NavbarContent;
-exports.NavbarMenu = menu.NavbarMenu;
-exports.NavbarMenuItem = item.NavbarMenuItem;
-exports.NavbarMenuToggle = toggle.NavbarMenuToggle;
+exports.NavbarMenu = navbarMenu.NavbarMenu;
+exports.NavbarMenuItem = navbarMenuItem.NavbarMenuItem;
+exports.NavbarMenuToggle = navbarMenuToggle.NavbarMenuToggle;
 exports.NavbarItem = navbarItem.NavbarItem;
 exports.useNavbar = useNavbar.useNavbar;
 exports.NavbarProvider = navbarContext.NavbarProvider;

package/dist/cjs/navbar/{navbar-menu/item.cjs → navbar-menu-item.cjs}

@@ -5,9 +5,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var utils = require('../../system/utils.cjs');
-var navbarContext = require('../navbar-context.cjs');
-var refs = require('../../system/react-utils/refs.cjs');
+var utils = require('../system/utils.cjs');
+var navbarContext = require('./navbar-context.cjs');
+var refs = require('../system/react-utils/refs.cjs');
 
 const NavbarMenuItem = utils.forwardRef(
   (props, ref) => {

package/dist/cjs/navbar/{navbar-menu/toggle.cjs → navbar-menu-toggle.cjs}

@@ -7,8 +7,8 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var navbarContext = require('../navbar-context.cjs');
-var i18n = require('./i18n.cjs');
+var navbarContext = require('./navbar-context.cjs');
+var navbarMenuI18n = require('./navbar-menu-i18n.cjs');
 
 const NavbarMenuToggle = ({
   icon,
@@ -35,7 +35,7 @@ const NavbarMenuToggle = ({
     }
     window.scrollTo({ top: menuTopOffset, behavior: "instant" });
   };
-  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(navbarMenuI18n.i18nStrings);
   const toggleStyles = $670gB$react.useMemo(() => {
     return ouiTheme.buttonStyles({
       variant: "unstyled",

package/dist/cjs/navbar/{navbar-menu/menu.cjs → navbar-menu.cjs}

@@ -3,12 +3,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var Overlay = require('../../node_modules/.pnpm/@react-aria_overlays@3.31.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/Overlay.cjs');
+var Overlay = require('../node_modules/.pnpm/@react-aria_overlays@3.31.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/Overlay.cjs');
 var reactAria = require('react-aria');
 var ouiTheme = require('@opengovsg/oui-theme');
-var utils = require('../../system/utils.cjs');
-var navbarContext = require('../navbar-context.cjs');
-var refs = require('../../system/react-utils/refs.cjs');
+var utils = require('../system/utils.cjs');
+var navbarContext = require('./navbar-context.cjs');
+var refs = require('../system/react-utils/refs.cjs');
 
 const NavbarMenu = utils.forwardRef(
   ({ className, children, portalContainer, style, onKeyDown, ...props }, ref) => {

package/dist/cjs/navbar/navbar.cjs

@@ -8,7 +8,7 @@ var reactAria = require('react-aria');
 var children = require('../system/react-utils/children.cjs');
 var utils = require('../system/utils.cjs');
 var navbarContext = require('./navbar-context.cjs');
-var menu = require('./navbar-menu/menu.cjs');
+var navbarMenu = require('./navbar-menu.cjs');
 var useNavbar = require('./use-navbar.cjs');
 
 const showOnScrollUpVariants = {
@@ -29,10 +29,10 @@ const Navbar = utils.forwardRef((props, ref) => {
   const { children: children$1, ...otherProps } = props;
   const context = useNavbar.useNavbar({ ...otherProps, ref });
   const Component = context.Component;
-  const [childrenWithoutMenu, menu$1] = children.pickChildren(children$1, menu.NavbarMenu);
+  const [childrenWithoutMenu, menu] = children.pickChildren(children$1, navbarMenu.NavbarMenu);
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("header", { ...context.getWrapperProps(), children: childrenWithoutMenu }),
-    menu$1
+    menu
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(navbarContext.NavbarProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: context.isMenuOpen, children: context.shouldShowOnScrollUp ? /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, children: /* @__PURE__ */ jsxRuntime.jsx(
     react.m.nav,

package/dist/cjs/navbar/use-navbar.cjs

@@ -70,8 +70,12 @@ function useNavbar(originalProps) {
   $670gB$react.useEffect(() => {
     navHeight.current = domRef.current?.offsetHeight || 0;
   }, [domRef]);
+  const [scrollElement, setScrollElement] = $670gB$react.useState(null);
+  $670gB$react.useLayoutEffect(() => {
+    setScrollElement(parentRef?.current ?? null);
+  }, [parentRef]);
   useScrollPosition.useScrollPosition({
-    elementRef: parentRef,
+    element: scrollElement,
     isEnabled: shouldShowOnScrollUp || !disableScrollHandler,
     callback: ({ prevPos, currPos }) => {
       onScrollPositionChange?.(currPos.y);

package/dist/cjs/pagination/index.cjs

@@ -4,7 +4,7 @@
 var pagination = require('./pagination.cjs');
 var paginationCursor = require('./pagination-cursor.cjs');
 var paginationItem = require('./pagination-item.cjs');
-var usePagination$1 = require('./hooks/use-pagination.cjs');
+var usePaginationBase = require('./use-pagination-base.cjs');
 var usePagination = require('./use-pagination.cjs');
 
 
@@ -12,6 +12,6 @@ var usePagination = require('./use-pagination.cjs');
 exports.Pagination = pagination.Pagination;
 exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
-exports.PaginationItemType = usePagination$1.PaginationItemType;
+exports.PaginationItemType = usePaginationBase.PaginationItemType;
 exports.CURSOR_TRANSITION_TIMEOUT = usePagination.CURSOR_TRANSITION_TIMEOUT;
 exports.usePagination = usePagination.usePagination;

package/dist/cjs/pagination/pagination.cjs

@@ -7,10 +7,10 @@ var $670gB$react = require('react');
 var i18n = require('@react-aria/i18n');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
-var usePagination$1 = require('./hooks/use-pagination.cjs');
 var paginationCursor = require('./pagination-cursor.cjs');
 var paginationItem = require('./pagination-item.cjs');
 var usePagination = require('./use-pagination.cjs');
+var usePaginationBase = require('./use-pagination-base.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');
 var ellipsis = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/ellipsis.cjs');
 var chevronsRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevrons-right.cjs');
@@ -42,7 +42,7 @@ const Pagination = utils.forwardRef((props, ref) => {
   const isRTL = direction === "rtl";
   const renderChevronIcon = $670gB$react.useCallback(
     (key) => {
-      if (key === usePagination$1.PaginationItemType.PREV && !isRTL || key === usePagination$1.PaginationItemType.NEXT && isRTL) {
+      if (key === usePaginationBase.PaginationItemType.PREV && !isRTL || key === usePaginationBase.PaginationItemType.NEXT && isRTL) {
         return /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, {});
       }
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -66,11 +66,11 @@ const Pagination = utils.forwardRef((props, ref) => {
         "data-slot": "prev",
         getAriaLabel: getItemAriaLabel,
         isDisabled: props.isDisabled || !loop && activePage === 1,
-        value: usePagination$1.PaginationItemType.PREV,
+        value: usePaginationBase.PaginationItemType.PREV,
         onPress: onPrevious,
-        children: renderChevronIcon(usePagination$1.PaginationItemType.PREV)
+        children: renderChevronIcon(usePaginationBase.PaginationItemType.PREV)
       },
-      usePagination$1.PaginationItemType.PREV
+      usePaginationBase.PaginationItemType.PREV
     );
   }, [
     slots,
@@ -92,11 +92,11 @@ const Pagination = utils.forwardRef((props, ref) => {
         "data-slot": "next",
         getAriaLabel: getItemAriaLabel,
         isDisabled: props.isDisabled || !loop && activePage === total,
-        value: usePagination$1.PaginationItemType.NEXT,
+        value: usePaginationBase.PaginationItemType.NEXT,
         onPress: onNext,
-        children: renderChevronIcon(usePagination$1.PaginationItemType.NEXT)
+        children: renderChevronIcon(usePaginationBase.PaginationItemType.NEXT)
       },
-      usePagination$1.PaginationItemType.NEXT
+      usePaginationBase.PaginationItemType.NEXT
     );
   }, [
     slots,
@@ -114,19 +114,19 @@ const Pagination = utils.forwardRef((props, ref) => {
       const isBefore = index < range.indexOf(activePage);
       if (renderItemProp && typeof renderItemProp === "function") {
         let page = typeof value == "number" ? value : index;
-        if (value === usePagination$1.PaginationItemType.NEXT) {
+        if (value === usePaginationBase.PaginationItemType.NEXT) {
           page = activePage + 1;
         }
-        if (value === usePagination$1.PaginationItemType.PREV) {
+        if (value === usePaginationBase.PaginationItemType.PREV) {
           page = activePage - 1;
         }
-        if (value === usePagination$1.PaginationItemType.DOTS) {
+        if (value === usePaginationBase.PaginationItemType.DOTS) {
           page = isBefore ? activePage - dotsJump >= 1 ? activePage - dotsJump : 1 : activePage + dotsJump <= total ? activePage + dotsJump : total;
         }
         const itemChildren = {
-          [usePagination$1.PaginationItemType.PREV]: renderChevronIcon(usePagination$1.PaginationItemType.PREV),
-          [usePagination$1.PaginationItemType.NEXT]: renderChevronIcon(usePagination$1.PaginationItemType.NEXT),
-          [usePagination$1.PaginationItemType.DOTS]: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          [usePaginationBase.PaginationItemType.PREV]: renderChevronIcon(usePaginationBase.PaginationItemType.PREV),
+          [usePaginationBase.PaginationItemType.NEXT]: renderChevronIcon(usePaginationBase.PaginationItemType.NEXT),
+          [usePaginationBase.PaginationItemType.DOTS]: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               ellipsis.default,
               {
@@ -168,13 +168,13 @@ const Pagination = utils.forwardRef((props, ref) => {
           getAriaLabel: getItemAriaLabel
         });
       }
-      if (value === usePagination$1.PaginationItemType.PREV) {
+      if (value === usePaginationBase.PaginationItemType.PREV) {
         return renderPrevItem();
       }
-      if (value === usePagination$1.PaginationItemType.NEXT) {
+      if (value === usePaginationBase.PaginationItemType.NEXT) {
         return renderNextItem();
       }
-      if (value === usePagination$1.PaginationItemType.DOTS) {
+      if (value === usePaginationBase.PaginationItemType.DOTS) {
         return /* @__PURE__ */ jsxRuntime.jsxs(
           paginationItem.PaginationItem,
           {
@@ -206,7 +206,7 @@ const Pagination = utils.forwardRef((props, ref) => {
               )
             ]
           },
-          usePagination$1.PaginationItemType.DOTS + isBefore
+          usePaginationBase.PaginationItemType.DOTS + isBefore
         );
       }
       return /* @__PURE__ */ $670gB$react.createElement(

package/dist/cjs/pagination/use-pagination.cjs

@@ -8,7 +8,7 @@ var useDeepCompare = require('use-deep-compare');
 var usehooksTs = require('usehooks-ts');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
-var usePagination$1 = require('./hooks/use-pagination.cjs');
+var usePaginationBase = require('./use-pagination-base.cjs');
 var refs = require('../system/react-utils/refs.cjs');
 
 const CURSOR_TRANSITION_TIMEOUT = 300;
@@ -93,7 +93,7 @@ function usePagination(originalProps) {
     },
     [domRef]
   );
-  const { range, activePage, setPage, previous, next, first, last } = usePagination$1.usePagination({
+  const { range, activePage, setPage, previous, next, first, last } = usePaginationBase.usePagination({
     page,
     total,
     initialPage,
@@ -179,11 +179,11 @@ function usePagination(originalProps) {
       return getItemAriaLabelProp(page2);
     }
     switch (page2) {
-      case usePagination$1.PaginationItemType.DOTS:
+      case usePaginationBase.PaginationItemType.DOTS:
         return "dots element";
-      case usePagination$1.PaginationItemType.PREV:
+      case usePaginationBase.PaginationItemType.PREV:
         return "previous page button";
-      case usePagination$1.PaginationItemType.NEXT:
+      case usePaginationBase.PaginationItemType.NEXT:
         return "next page button";
       case "first":
         return "first page button";

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

@@ -8,11 +8,11 @@ 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 calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 var utils = require('../system/utils.cjs');
 
 const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {

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

@@ -67,14 +67,7 @@ const TagFieldListInner = (props, ref) => {
     if (typeof props.children === "function") {
       return props.children({ ...childProps, itemProps });
     }
-    return /* @__PURE__ */ $670gB$react.createElement(
-      tagFieldItem.TagFieldItem,
-      {
-        ...childProps,
-        ...itemProps,
-        key
-      }
-    );
+    return /* @__PURE__ */ $670gB$react.createElement(tagFieldItem.TagFieldItem, { ...childProps, ...itemProps, key });
   }) });
 };
 const TagFieldList = utils.forwardRefGeneric(TagFieldListInner);

package/dist/esm/avatar/avatar.js

@@ -7,7 +7,7 @@ import { avatarStyles, dataAttr } from '@opengovsg/oui-theme';
 import { forwardRef, mapPropsVariants } from '../system/utils.js';
 import { AvatarContext, useAvatarContext } from './avatar-context.js';
 import { useAvatarGroupContext } from './avatar-group-context.js';
-import { useImageLoadingStatus } from './hooks/use-img-loading-status.js';
+import { useImageLoadingStatus } from './use-img-loading-status.js';
 import { getInitialsFromText } from './utils.js';
 import { useDomRef } from '../system/react-utils/refs.js';
 import User from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js';

package/dist/esm/button/button.js

@@ -30,6 +30,7 @@ const Button = forwardRef(
     spinner: spinnerProp,
     isIconOnly,
     isAttached,
+    preserveWidth,
     ...props
   }, ref) => {
     const {
@@ -50,6 +51,7 @@ const Button = forwardRef(
       const spinnerSize = buttonSpinnerSizeMap[size];
       return /* @__PURE__ */ jsx(Spinner, { size: spinnerSize });
     }, [size, spinnerProp]);
+    const shouldPreserveWidth = isPending && preserveWidth && !loadingText && !pendingElement;
     return /* @__PURE__ */ jsx(
       Button$1,
       {
@@ -73,11 +75,14 @@ const Button = forwardRef(
         ref,
         children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
           renderChildren(renderProps, startContent),
-          isPending && spinnerPlacement === "start" ? renderChildren(renderProps, spinner) : null,
-          isPending ? null : renderChildren(renderProps, children),
+          isPending && !shouldPreserveWidth && spinnerPlacement === "start" ? renderChildren(renderProps, spinner) : null,
+          !isPending ? renderChildren(renderProps, children) : shouldPreserveWidth ? /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "opacity-0", children: renderChildren(renderProps, children) }),
+            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: renderChildren(renderProps, spinner) })
+          ] }) : null,
           isPending && loadingText ? loadingText : null,
           isPending && pendingElement ? renderChildren(renderProps, pendingElement) : null,
-          isPending && spinnerPlacement === "end" ? renderChildren(renderProps, spinner) : null,
+          isPending && !shouldPreserveWidth && spinnerPlacement === "end" ? renderChildren(renderProps, spinner) : null,
           renderChildren(renderProps, endContent),
           !disableRipple && /* @__PURE__ */ jsx(Ripple, { onClear: onClearRipple, ripples })
         ] })

package/dist/esm/calendar/calendar-month-day-selector.js

@@ -10,7 +10,7 @@ import { SelectItem } from '../select/select-item.js';
 import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
 import { i18nStrings } from './i18n.js';
-import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
+import { useCalendarSelectors } from './use-calendar-selectors.js';
 
 const CalendarMonthDaySelector = () => {
   const { slots, size, classNames } = useCalendarStyleContext();

package/dist/esm/calendar/index.js

@@ -1,5 +1,9 @@
 "use strict";
+export { AgnosticCalendarStateContext, useAgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
 export { Calendar, CalendarStateWrapper } from './calendar.js';
+export { CalendarBottomContent } from './calendar-bottom-content.js';
+export { CalendarGridHeader } from './calendar-grid-header.js';
+export { CalendarHeader } from './calendar-header.js';
 export { CalendarStyleContext, useCalendarStyleContext } from './calendar-style-context.js';
 export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './utils.js';
 export { CalendarDate } from '@internationalized/date';

package/dist/esm/calendar/{hooks/use-calendar-selectors.js → use-calendar-selectors.js}

@@ -2,7 +2,7 @@
 "use client";
 import { useMemo } from 'react';
 import { useDateFormatter } from 'react-aria';
-import { useGenerateLocalizedMonths, useGenerateLocalizedYears } from '../utils.js';
+import { useGenerateLocalizedMonths, useGenerateLocalizedYears } from './utils.js';
 
 const useCalendarSelectors = (state) => {
   const yearRange = useMemo(() => {

package/dist/esm/combo-box/combo-box-item.js

@@ -1,10 +1,9 @@
 "use strict";
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { useContextProps, ListBoxItem, Text, composeRenderProps } from 'react-aria-components';
-import { listBoxItemStyles } from '@opengovsg/oui-theme';
-import { forwardRef, mapPropsVariants } from '../system/utils.js';
+import { jsx } from 'react/jsx-runtime';
+import { useContextProps } from 'react-aria-components';
+import { ListBoxItem } from '../list-box/list-box.js';
+import { forwardRef } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
 
 const ComboBoxItem = forwardRef(function ComboBoxItem2(originalProps, ref) {
@@ -13,56 +12,7 @@ const ComboBoxItem = forwardRef(function ComboBoxItem2(originalProps, ref) {
     ref,
     ComboBoxVariantContext
   );
-  const [
-    { className, description, children, classNames, ...props },
-    variantProps
-  ] = mapPropsVariants(originalProps, listBoxItemStyles.variantKeys);
-  const styles = listBoxItemStyles(variantProps);
-  const defaultTextValue = useMemo(() => {
-    if (props.textValue) {
-      return props.textValue;
-    }
-    if (typeof children === "string") {
-      return children;
-    }
-    return void 0;
-  }, [children, props.textValue]);
-  return /* @__PURE__ */ jsx(
-    ListBoxItem,
-    {
-      textValue: defaultTextValue,
-      ...props,
-      className: composeRenderProps(
-        className ?? classNames?.container,
-        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
-      ),
-      children: (renderProps) => {
-        if (typeof children === "function") {
-          return children(renderProps);
-        }
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              className: styles.label({ className: classNames?.label }),
-              slot: "label",
-              children
-            }
-          ),
-          description && /* @__PURE__ */ jsx(
-            Text,
-            {
-              className: styles.description({
-                className: classNames?.description
-              }),
-              slot: "description",
-              children: description
-            }
-          )
-        ] });
-      }
-    }
-  );
+  return /* @__PURE__ */ jsx(ListBoxItem, { ref, ...originalProps });
 });
 
 export { ComboBoxItem };

package/dist/esm/file-dropzone/file-dropzone.js

@@ -1,11 +1,11 @@
 "use strict";
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ErrorCode, useDropzone } from 'react-dropzone';
 import { useCallback, useMemo, useEffect } from 'react';
 import { useFormValidationState } from '@react-stately/form';
 import { useField, useId } from 'react-aria';
 import { Provider, LabelContext, GroupContext, TextContext, FieldErrorContext, Group } from 'react-aria-components';
+import { ErrorCode, useDropzone } from 'react-dropzone';
 import { fileDropzoneStyles, dataAttr } from '@opengovsg/oui-theme';
 import { Label, Description, FieldError } from '../field/field.js';
 import { useControllableState } from '../hooks/use-controllable-state.js';
@@ -88,7 +88,11 @@ const FileDropzone = (originalProps) => {
     (file) => {
       const errors = [];
       if (maxFileSizeByType.length > 0) {
-        const limit = resolveMaxFileSize(file.type, maxFileSizeByType, maxFileSize);
+        const limit = resolveMaxFileSize(
+          file.type,
+          maxFileSizeByType,
+          maxFileSize
+        );
         if (limit !== Number.POSITIVE_INFINITY && file.size > limit) {
           errors.push({
             code: ErrorCode.FileTooLarge,
@@ -196,7 +200,14 @@ const FileDropzone = (originalProps) => {
       return `Minimum file size: ${formatBytes(minFileSize, 2, fileSizeBase)}`;
     }
     return null;
-  }, [maxFileSize, maxFileSizeByType, minFileSize, showFileSizeText, fileSizeBase, fileSizeTextOverride]);
+  }, [
+    maxFileSize,
+    maxFileSizeByType,
+    minFileSize,
+    showFileSizeText,
+    fileSizeBase,
+    fileSizeTextOverride
+  ]);
   const triggerFileSelector = useCallback(() => {
     if (isDisabled || isReadOnly) return;
     dropzoneState.inputRef.current?.click();