@opengovsg/oui 0.0.45 → 0.0.46

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

@@ -5,11 +5,11 @@ import { useMemo, useCallback } from 'react';
 import { useLocalizedStringFormatter } from 'react-aria';
 import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
 import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
 import { i18nStrings } from './i18n.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.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';

package/dist/esm/date-field/date-field.js

@@ -4,8 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
 import { dateInputStyles, composeTailwindRenderProps, composeRenderProps, dateSegmentStyles } from '@opengovsg/oui-theme';
-import { mapPropsVariants } from '../system/utils.js';
 import { Label, Description, FieldError } from '../field/field.js';
+import { mapPropsVariants } from '../system/utils.js';
 
 function DateField(originalProps) {
   const [

package/dist/esm/date-picker/date-picker.js

@@ -4,13 +4,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
 import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { Calendar as Calendar$1 } from '../calendar/calendar.js';
+import '@internationalized/date';
+import { DateInput } from '../date-field/date-field.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
-import { DateInput } from '../date-field/date-field.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Calendar as Calendar$1 } from '../calendar/calendar.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Button } from '../button/button.js';
 
 function DatePicker(originalProps) {
   const [

package/dist/esm/date-range-picker/date-range-picker.js

@@ -5,13 +5,13 @@ import { useMemo } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
 import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { DateInput } from '../date-field/date-field.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { RangeCalendar } from '../range-calendar/range-calendar.js';
 import { mapPropsVariants } from '../system/utils.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { DateInput } from '../date-field/date-field.js';
-import { Button } from '../button/button.js';
 
 function DateRangePicker(originalProps) {
   const [

package/dist/esm/field/field.js

@@ -1,9 +1,9 @@
 "use strict";
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { Label as Label$1, Text, FieldError as FieldError$1, Group } from 'react-aria-components';
-import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
+import { forwardRef, useMemo } from 'react';
+import { Group, Label as Label$1, Text, FieldError as FieldError$1 } from 'react-aria-components';
+import { composeRenderProps, fieldGroupStyles, labelStyles, descriptionStyles, fieldErrorStyles } from '@opengovsg/oui-theme';
 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';
 
 function Label({ size, className, ...props }) {
@@ -55,17 +55,20 @@ function FieldError({
     }
   );
 }
-function FieldGroup(props) {
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      ...props,
-      className: composeRenderProps(
-        props.className,
-        (className, renderProps) => fieldGroupStyles({ ...renderProps, className })
-      )
-    }
-  );
-}
+const FieldGroup = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(
+      Group,
+      {
+        ...props,
+        ref,
+        className: composeRenderProps(
+          props.className,
+          (className, renderProps) => fieldGroupStyles({ ...renderProps, className })
+        )
+      }
+    );
+  }
+);
 
 export { Description, FieldError, FieldErrorIcon, FieldGroup, Label };

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

@@ -7,13 +7,13 @@ import { useField, useId } from 'react-aria';
 import { Provider, LabelContext, GroupContext, TextContext, FieldErrorContext, Group } from 'react-aria-components';
 import { 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';
 import { mapPropsVariants } from '../system/utils.js';
 import { FileDropzoneStyleContext, FileDropzoneStateContext, useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
 import { FileInfo } from './file-info.js';
 import { formatErrorMessage, formatBytes } from './utils.js';
-import { useControllableState } from '../hooks/use-controllable-state.js';
 import Upload from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/upload.js';
-import { Label, Description, FieldError } from '../field/field.js';
 
 const FileDropzone = (originalProps) => {
   const [props, variantProps] = mapPropsVariants(

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

@@ -3,10 +3,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { fileInfoDropzoneStyles, cn } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import { useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
 import { formatBytes } from './utils.js';
 import Trash2 from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/trash-2.js';
-import { Button } from '../button/button.js';
 
 const FileInfo = ({ file, imagePreview, classNames }) => {
   const {

package/dist/esm/index.js

@@ -1,4 +1,8 @@
 "use strict";
+export { useControllableState } from './hooks/use-controllable-state.js';
+export { useDraggable } from './hooks/use-draggable.js';
+export { Button } from './button/button.js';
+export { GovtBanner } from './govt-banner/govt-banner.js';
 export { Ripple } from './ripple/ripple.js';
 export { useRipple } from './ripple/use-ripple.js';
 export { Spinner } from './spinner/spinner.js';
@@ -7,22 +11,41 @@ export { Toggle } from './toggle/toggle.js';
 export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
 export { Input } from './input/input.js';
 export { TextField } from './text-field/text-field.js';
+export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
 export { TextArea } from './text-area/text-area.js';
 export { TextAreaField } from './text-area-field/text-area-field.js';
+export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
+export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
+export { ComboBoxItem } from './combo-box/combo-box-item.js';
+export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
+export { Banner } from './banner/banner.js';
 export { TagField } from './tag-field/tag-field.js';
 export { TagFieldItem } from './tag-field/tag-field-item.js';
 export { Select } from './select/select.js';
 export { SelectItem } from './select/select-item.js';
 export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
+export { Badge } from './badge/badge.js';
+export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
+export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
+export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
+export { CalendarDate } from '@internationalized/date';
 export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
 export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
 export { Popover } from './popover/popover.js';
 export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
+export { DateField, DateInput } from './date-field/date-field.js';
+export { DatePicker } from './date-picker/date-picker.js';
+export { DateRangePicker } from './date-range-picker/date-range-picker.js';
+export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
+export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
 export { Pagination } from './pagination/pagination.js';
 export { PaginationCursor } from './pagination/pagination-cursor.js';
 export { PaginationItem } from './pagination/pagination-item.js';
 export { PaginationItemType } from './pagination/hooks/use-pagination.js';
 export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
+export { FileDropzone } from './file-dropzone/file-dropzone.js';
+export { FileInfo } from './file-dropzone/file-info.js';
+export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
 export { NumberField } from './number-field/number-field.js';
 export { Modal } from './modal/modal.js';
 export { ModalContent } from './modal/modal-content.js';
@@ -41,42 +64,21 @@ export { NavbarItem } from './navbar/navbar-item.js';
 export { useNavbar } from './navbar/use-navbar.js';
 export { NavbarProvider, useNavbarContext } from './navbar/navbar-context.js';
 export { Avatar } from './avatar/index.js';
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext } from './accordion/accordion.js';
 export { TimeField } from './time-field/time-field.js';
 export { SearchField } from './search-field/search-field.js';
 export { Link } from './link/link.js';
+export { Breadcrumb, Breadcrumbs } from './breadcrumbs/breadcrumbs.js';
 export { Sidebar, generateSidebarItems } from './sidebar/sidebar.js';
 export { SidebarRoot } from './sidebar/sidebar-root.js';
 export { SidebarItem } from './sidebar/sidebar-item.js';
 export { SidebarList } from './sidebar/sidebar-list.js';
 export { SidebarHeader } from './sidebar/sidebar-header.js';
 export { Tooltip, TooltipTrigger } from './tooltip/tooltip.js';
-export { useControllableState } from './hooks/use-controllable-state.js';
-export { useDraggable } from './hooks/use-draggable.js';
-export { Button } from './button/button.js';
-export { GovtBanner } from './govt-banner/govt-banner.js';
-export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
-export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
-export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
-export { ComboBoxItem } from './combo-box/combo-box-item.js';
-export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
-export { Banner } from './banner/banner.js';
-export { Badge } from './badge/badge.js';
-export { CalendarDate } from '@internationalized/date';
-export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
-export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
-export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
-export { DateField, DateInput } from './date-field/date-field.js';
-export { DatePicker } from './date-picker/date-picker.js';
-export { DateRangePicker } from './date-range-picker/date-range-picker.js';
-export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
-export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
-export { FileDropzone } from './file-dropzone/file-dropzone.js';
-export { FileInfo } from './file-dropzone/file-info.js';
-export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
+export { CountrySelect, FlagComponent, PhoneInput, PhoneNumberField } from './phone-number-field/phone-number-field.js';
+export { formatPhoneNumber, formatPhoneNumberIntl, isPossiblePhoneNumber, isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input';
 export { toast } from 'sonner';
 export { AvatarContext, useAvatarContext } from './avatar/avatar-context.js';
 export { AvatarGroup } from './avatar/avatar-group.js';
 export { AvatarGroupProvider, useAvatarGroup } from './avatar/avatar-group-context.js';
 export { AvatarFallback, AvatarImage, AvatarRoot } from './avatar/avatar.js';
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext } from './accordion/accordion.js';
-export { Breadcrumb, Breadcrumbs } from './breadcrumbs/breadcrumbs.js';

package/dist/esm/modal/modal-content.js

@@ -5,10 +5,10 @@ import { useContext, isValidElement } from 'react';
 import { useLocalizedStringFormatter } from 'react-aria';
 import { Dialog } from 'react-aria-components';
 import { cn } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import { i18nStrings } from './i18n.js';
 import { ModalVariantContext } from './modal-variant-context.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';
-import { Button } from '../button/button.js';
 
 function ModalContent({
   closeButtonContent: closeButtonContentProp,

package/dist/esm/number-field/number-field.js

@@ -3,12 +3,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { NumberField as NumberField$1 } from 'react-aria-components';
 import { numberFieldStyles, composeTailwindRenderProps, dataAttr, fieldBorderStyles, cn } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Input } from '../input/input.js';
 import { mapPropsVariants } from '../system/utils.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 Plus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/plus.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Button } from '../button/button.js';
 
 function NumberField(originalProps) {
   const [