@opengovsg/oui 0.0.45 → 0.0.46

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

@@ -0,0 +1,32 @@
+"use strict";
+'use strict';
+
+var phoneNumberField = require('./phone-number-field.cjs');
+var BasePhoneInput = require('react-phone-number-input');
+
+
+
+exports.CountrySelect = phoneNumberField.CountrySelect;
+exports.FlagComponent = phoneNumberField.FlagComponent;
+exports.PhoneInput = phoneNumberField.PhoneInput;
+exports.PhoneNumberField = phoneNumberField.PhoneNumberField;
+Object.defineProperty(exports, "formatPhoneNumber", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.formatPhoneNumber; }
+});
+Object.defineProperty(exports, "formatPhoneNumberIntl", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.formatPhoneNumberIntl; }
+});
+Object.defineProperty(exports, "isPossiblePhoneNumber", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.isPossiblePhoneNumber; }
+});
+Object.defineProperty(exports, "isValidPhoneNumber", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.isValidPhoneNumber; }
+});
+Object.defineProperty(exports, "parsePhoneNumber", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.parsePhoneNumber; }
+});

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

@@ -0,0 +1,299 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var BasePhoneInput = require('react-phone-number-input');
+var flags = require('react-phone-number-input/flags');
+var NonInternationalBasePhoneInput = require('react-phone-number-input/input');
+var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
+var useControllableState = require('../hooks/use-controllable-state.cjs');
+var input = require('../input/input.cjs');
+var select = require('../select/select.cjs');
+var selectItem = require('../select/select-item.cjs');
+var l10n = require('../system/l10n.cjs');
+var utils = require('../system/utils.cjs');
+var constants = require('./constants.cjs');
+var context = require('./context.cjs');
+var i18n = require('./i18n.cjs');
+
+const PhoneInput = ({
+  onClear,
+  onKeyDown,
+  ...props
+}) => {
+  const {
+    placeholderMode,
+    examples,
+    selectedCountry,
+    styles,
+    size,
+    classNames,
+    stringFormatter
+  } = context.usePhoneInputContext();
+  const inputPlaceholder = $670gB$react.useMemo(() => {
+    const defaultPlaceholder = stringFormatter.format("Enter a phone number");
+    if (placeholderMode === "off") {
+      return props.placeholder ?? defaultPlaceholder;
+    }
+    const exampleNumber = selectedCountry && examples[selectedCountry];
+    if (placeholderMode === "aggressive") {
+      return exampleNumber ?? props.placeholder ?? defaultPlaceholder;
+    }
+    return props.placeholder ?? exampleNumber ?? defaultPlaceholder;
+  }, [
+    props.placeholder,
+    stringFormatter,
+    placeholderMode,
+    examples,
+    selectedCountry
+  ]);
+  const handleKeyDown = $670gB$react.useCallback(
+    (event) => {
+      if (event.metaKey && event.key === "Backspace") {
+        event.preventDefault();
+        onClear?.();
+      } else {
+        onKeyDown?.(event);
+      }
+    },
+    [onClear, onKeyDown]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    input.Input,
+    {
+      variant: "unstyled",
+      placeholder: inputPlaceholder,
+      type: "tel",
+      autoComplete: "tel",
+      size,
+      ...props,
+      onKeyDown: handleKeyDown,
+      className: styles.input({
+        className: ouiTheme.cn(classNames?.input, props.className)
+      })
+    }
+  );
+};
+const PhoneNumberField = (originalProps) => {
+  const [
+    {
+      placeholderMode = "polite",
+      examples = constants.MOBILE_EXAMPLES,
+      label,
+      description,
+      errorMessage,
+      classNames,
+      isInvalid,
+      ...props
+    },
+    { variant = "international", ...variantProps }
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.phoneNumberFieldStyles.variantKeys);
+  const stringFormatter = l10n.useLocalizedStringFormatter(i18n.i18nStrings);
+  const defaultCountry = $670gB$react.useMemo(
+    () => props.defaultCountry ?? "SG",
+    [props.defaultCountry]
+  );
+  const [selectedCountry, setSelectedCountry] = $670gB$react.useState(
+    defaultCountry
+  );
+  const [value, setValue] = useControllableState.useControllableState({
+    defaultValue: props.defaultValue,
+    value: props.value,
+    onChange: props.onChange
+  });
+  const triggerRef = $670gB$react.useRef(null);
+  const { size = "md", isDisabled } = variantProps;
+  const styles = ouiTheme.phoneNumberFieldStyles({
+    ...variantProps,
+    variant,
+    isDisabled,
+    size
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.TextField,
+    {
+      isDisabled,
+      className: styles.base({
+        className: classNames?.base
+      }),
+      isInvalid,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Provider,
+          {
+            values: [
+              [
+                context.PhoneInputContext,
+                {
+                  triggerRef,
+                  placeholderMode,
+                  examples,
+                  selectedCountry,
+                  classNames,
+                  styles,
+                  variant,
+                  ...variantProps,
+                  size,
+                  stringFormatter
+                }
+              ]
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              field.FieldGroup,
+              {
+                isInvalid,
+                isDisabled,
+                "data-variant": variant,
+                ref: triggerRef,
+                className: styles.group({
+                  className: classNames?.group
+                }),
+                children: variant === "international" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  BasePhoneInput,
+                  {
+                    disabled: isDisabled,
+                    className: styles.wrapper({
+                      className: classNames?.wrapper
+                    }),
+                    international: false,
+                    addInternationalOption: false,
+                    defaultCountry: selectedCountry,
+                    countryOptionsOrder: [defaultCountry],
+                    onCountryChange: setSelectedCountry,
+                    countrySelectComponent: CountrySelect,
+                    inputComponent: PhoneInput,
+                    onClear: () => setValue(void 0),
+                    ...props,
+                    value,
+                    onChange: (v) => setValue(v)
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper({ className: classNames?.wrapper }), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    NonInternationalBasePhoneInput,
+                    {
+                      country: defaultCountry,
+                      onClear: () => setValue(void 0),
+                      ...props,
+                      inputComponent: PhoneInput,
+                      value,
+                      onChange: setValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FlagComponent,
+                    {
+                      className: styles.flag({ className: classNames?.flag }),
+                      country: defaultCountry,
+                      countryName: stringFormatter.format(defaultCountry)
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size, className: classNames?.error, children: errorMessage })
+      ]
+    }
+  );
+};
+function CountrySelect(props) {
+  const { options, value, onChange, onBlur, onFocus } = props;
+  const { triggerRef, classNames, styles, size, isDisabled, stringFormatter } = context.usePhoneInputContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select,
+    {
+      size,
+      popoverProps: {
+        // Position popover relative to the wrapping div instead of the Button
+        triggerRef
+      },
+      classNames: {
+        base: styles.select({ className: classNames?.select }),
+        trigger: styles.selectTrigger({
+          className: classNames?.selectTrigger
+        }),
+        icon: styles.selectIcon({ className: classNames?.selectIcon }),
+        // Apply same styles as trigger for consistent sizing
+        list: styles.selectList({ className: classNames?.selectList }),
+        popover: styles.selectPopover({ className: classNames?.selectPopover })
+      },
+      enableSearch: true,
+      variant: "unstyled",
+      isDisabled,
+      value,
+      onChange: (v) => onChange(v),
+      items: options,
+      renderSelectValue: () => /* @__PURE__ */ jsxRuntime.jsx(
+        FlagComponent,
+        {
+          className: styles.flag({ className: classNames?.flag }),
+          country: value,
+          countryName: value && stringFormatter.format(value)
+        }
+      ),
+      onBlur,
+      onFocus,
+      children: (country) => {
+        const l10nLabel = country.value ? stringFormatter.format(country.value) : "";
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          selectItem.SelectItem,
+          {
+            classNames: {
+              text: styles.selectItem({ className: classNames?.selectItem })
+            },
+            textValue: `${l10nLabel} ${country.label}`,
+            id: country.value,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FlagComponent,
+                {
+                  className: styles.flag({ className: classNames?.flag }),
+                  country: country.value,
+                  countryName: l10nLabel
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: styles.selectItemLabel({
+                    className: classNames?.selectItemLabel
+                  }),
+                  children: l10nLabel
+                }
+              ),
+              country.value && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: styles.selectItemCountryCode({
+                    className: classNames?.selectItemCountryCode
+                  }),
+                  children: `+${BasePhoneInput.getCountryCallingCode(country.value)}`
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+const FlagComponent = ({
+  country,
+  countryName,
+  className
+}) => {
+  const Flag = country && flags[country];
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: Flag && /* @__PURE__ */ jsxRuntime.jsx(Flag, { title: countryName }) });
+};
+
+exports.CountrySelect = CountrySelect;
+exports.FlagComponent = FlagComponent;
+exports.PhoneInput = PhoneInput;
+exports.PhoneNumberField = PhoneNumberField;

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

@@ -0,0 +1,3 @@
+"use strict";
+'use strict';
+

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/search-field/search-field.cjs

@@ -5,13 +5,13 @@ var jsxRuntime = require('react/jsx-runtime');
 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 input = require('../input/input.cjs');
 var utils = require('../system/utils.cjs');
 var i18n = require('./i18n.cjs');
 var search = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/search.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 field = require('../field/field.cjs');
-var button = require('../button/button.cjs');
 
 function SearchField(originalProps) {
   const [

package/dist/cjs/select/i18n.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+const i18nStrings = {
+  "en-SG": {
+    "Search...": "Search...",
+    "Search options": "Search options"
+  },
+  "zh-SG": {
+    "Search...": "\u641C\u7D22...",
+    "Search options": "\u641C\u7D22\u9009\u9879"
+  },
+  "ms-SG": {
+    "Search...": "Cari...",
+    "Search options": "Cari pilihan"
+  },
+  "ta-SG": {
+    "Search...": "\u0BA4\u0BC7\u0B9F\u0BC1...",
+    "Search options": "\u0BA4\u0BC7\u0B9F\u0BB2\u0BCD \u0BB5\u0BBF\u0BB0\u0BC1\u0BAA\u0BCD\u0BAA\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

package/dist/cjs/select/select.cjs

@@ -7,31 +7,15 @@ 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 sizing = require('../system/react-utils/sizing.cjs');
 var utils = require('../system/utils.cjs');
+var i18n = require('./i18n.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 button = require('../button/button.cjs');
 
-const i18nStrings = {
-  "en-SG": {
-    searchPlaceholder: "Search...",
-    searchAriaLabel: "Search options"
-  },
-  "zh-SG": {
-    searchPlaceholder: "\u641C\u7D22...",
-    searchAriaLabel: "\u641C\u7D22\u9009\u9879"
-  },
-  "ms-SG": {
-    searchPlaceholder: "Cari...",
-    searchAriaLabel: "Cari pilihan"
-  },
-  "ta-SG": {
-    searchPlaceholder: "\u0BA4\u0BC7\u0B9F\u0BC1...",
-    searchAriaLabel: "\u0BA4\u0BC7\u0B9F\u0BB2\u0BCD \u0BB5\u0BBF\u0BB0\u0BC1\u0BAA\u0BCD\u0BAA\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
-  }
-};
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {
     case "xs":
@@ -49,7 +33,7 @@ function Select({
   errorMessage,
   ...originalProps
 }) {
-  const formatter = reactAria.useLocalizedStringFormatter(i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   const [_props, variantProps] = utils.mapPropsVariants(
     originalProps,
     ouiTheme.selectStyles.variantKeys
@@ -61,9 +45,12 @@ function Select({
     enableSearch = false,
     searchPlaceholder,
     searchIcon,
+    renderSelectValue,
+    popoverProps,
     ...props
   } = _props;
   const styles = ouiTheme.selectStyles(variantProps);
+  const triggerWidth = sizing.useElementWidth(popoverProps?.triggerRef);
   const { contains } = reactAriaComponents.useFilter({ sensitivity: "base" });
   const layoutOptions = $670gB$react.useMemo(() => {
     return {
@@ -130,7 +117,8 @@ function Select({
                 {
                   className: styles.selectedText({
                     className: classNames?.selectedText
-                  })
+                  }),
+                  children: renderSelectValue
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -153,31 +141,43 @@ function Select({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage }),
-        /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { className: styles.popover({ className: classNames?.popover }), children: enableSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { filter: contains, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            reactAriaComponents.SearchField,
-            {
-              autoFocus: true,
-              "aria-label": formatter.format("searchAriaLabel"),
-              className: styles.searchField({
-                className: classNames?.searchField
-              }),
-              children: [
-                renderedSearchIcon,
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactAriaComponents.Input,
-                  {
-                    placeholder: searchPlaceholder ?? formatter.format("searchPlaceholder"),
-                    className: styles.searchInput({
-                      className: classNames?.searchInput
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          listContent
-        ] }) : listContent })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          popover.Popover,
+          {
+            className: styles.popover({ className: classNames?.popover }),
+            ...triggerWidth !== null ? {
+              style: {
+                "--trigger-width": triggerWidth
+              }
+            } : {},
+            ...popoverProps,
+            children: enableSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { filter: contains, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                reactAriaComponents.SearchField,
+                {
+                  autoFocus: true,
+                  "aria-label": stringFormatter.format("Search options"),
+                  className: styles.searchField({
+                    className: classNames?.searchField
+                  }),
+                  children: [
+                    renderedSearchIcon,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactAriaComponents.Input,
+                      {
+                        placeholder: searchPlaceholder ?? stringFormatter.format("Search..."),
+                        className: styles.searchInput({
+                          className: classNames?.searchInput
+                        })
+                      }
+                    )
+                  ]
+                }
+              ),
+              listContent
+            ] }) : listContent
+          }
+        )
       ]
     }
   ) });

package/dist/cjs/sidebar/sidebar-list.cjs

@@ -8,11 +8,11 @@ var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var reactStately = require('react-stately');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
 var utils = require('../system/utils.cjs');
 var context = require('./context.cjs');
 var i18n = require('./i18n.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 button = require('../button/button.cjs');
 
 const SidebarListSection = ({
   onlyCaretToggle,

package/dist/cjs/system/l10n.cjs

@@ -0,0 +1,18 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+var string = require('@internationalized/string');
+var i18n = require('@react-aria/i18n');
+var reactAriaComponents = require('react-aria-components');
+
+function useLocalizedStringFormatter(strings, packageName) {
+  const { locale } = reactAriaComponents.useLocale();
+  const dictionary = i18n.useLocalizedStringDictionary(strings, packageName);
+  return $670gB$react.useMemo(
+    () => new string.LocalizedStringFormatter(locale, dictionary),
+    [locale, dictionary]
+  );
+}
+
+exports.useLocalizedStringFormatter = useLocalizedStringFormatter;

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

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+var utils = require('@react-aria/utils');
+
+function useElementWidth(ref) {
+  const [elementWidth, setElementWidth] = $670gB$react.useState(null);
+  const onResize = $670gB$react.useCallback(() => {
+    if (ref && ref.current && ref.current instanceof HTMLElement) {
+      setElementWidth(`${ref.current.offsetWidth}px`);
+    }
+  }, [ref]);
+  utils.useResizeObserver({
+    ref,
+    onResize
+  });
+  return elementWidth;
+}
+
+exports.useElementWidth = useElementWidth;

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

@@ -6,6 +6,7 @@ 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');
@@ -14,7 +15,6 @@ 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');
 
 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,

package/dist/cjs/time-field/time-field.cjs

@@ -5,9 +5,9 @@ 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 dateField = require('../date-field/date-field.cjs');
+var field = require('../field/field.cjs');
+var utils = require('../system/utils.cjs');
 
 function TimeField(originalProps) {
   const [

package/dist/esm/banner/banner.js

@@ -5,10 +5,10 @@ import { useMemo, useRef } from 'react';
 import { useLocalizedStringFormatter, useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { bannerStyles } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import { i18nStrings } from './i18n.js';
 import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/info.js';
-import { Button } from '../button/button.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
 
 const Banner = ({

package/dist/esm/checkbox/checkbox.js

@@ -3,11 +3,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
+import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
 import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.js';
 import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/check.js';
-import { Label, Description, FieldError } from '../field/field.js';
 
 const Checkbox = ({
   classNames,