@opengovsg/oui 0.0.0-snapshot-20251216073051 → 0.0.0-snapshot-20260126032728

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 { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } 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 { 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 { 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 { Button } from '../button/button.js';
 import { Popover } from '../popover/popover.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';
 
 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 { 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 { RangeCalendar } from '../range-calendar/range-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';
+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';
 
 function DateRangePicker(originalProps) {
   const [

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(
@@ -23,6 +23,7 @@ const FileDropzone = (originalProps) => {
   const {
     name,
     allowedMimeTypes = [],
+    fileSizeBase = "binary",
     maxFileSize = Number.POSITIVE_INFINITY,
     minFileSize = 0,
     showFileSizeText = true,
@@ -67,9 +68,10 @@ const FileDropzone = (originalProps) => {
     (error) => formatErrorMessage(error, {
       maxFileSize,
       minFileSize,
-      maxFiles
+      maxFiles,
+      fileSizeBase
     }),
-    [maxFileSize, maxFiles, minFileSize]
+    [fileSizeBase, maxFileSize, maxFiles, minFileSize]
   );
   const onDrop = useCallback(
     (acceptedFiles, fileRejections) => {
@@ -127,19 +129,20 @@ const FileDropzone = (originalProps) => {
     const shouldShow = showFileSizeText && (notDefaultMaxFileSize || notDefaultMinFileSize);
     if (!shouldShow) return null;
     if (notDefaultMaxFileSize && notDefaultMinFileSize) {
-      return `File size must be between ${formatBytes(minFileSize, 2)} and ${formatBytes(
+      return `File size must be between ${formatBytes(minFileSize, 2, fileSizeBase)} and ${formatBytes(
         maxFileSize,
-        2
+        2,
+        fileSizeBase
       )}`;
     }
     if (notDefaultMaxFileSize) {
-      return `Maximum file size: ${formatBytes(maxFileSize, 2)}`;
+      return `Maximum file size: ${formatBytes(maxFileSize, 2, fileSizeBase)}`;
     }
     if (notDefaultMinFileSize) {
-      return `Minimum file size: ${formatBytes(minFileSize, 2)}`;
+      return `Minimum file size: ${formatBytes(minFileSize, 2, fileSizeBase)}`;
     }
     return null;
-  }, [maxFileSize, minFileSize, showFileSizeText]);
+  }, [maxFileSize, minFileSize, showFileSizeText, fileSizeBase]);
   const triggerFileSelector = useCallback(() => {
     if (isDisabled || isReadOnly) return;
     dropzoneState.inputRef.current?.click();
@@ -185,6 +188,7 @@ const FileDropzone = (originalProps) => {
           {
             isDisabled,
             isReadOnly,
+            fileSizeBase,
             maxFiles,
             maxFileSize,
             showDropzone,

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 {
@@ -17,7 +17,8 @@ const FileInfo = ({ file, imagePreview, classNames }) => {
     isReadOnly
   } = useFileDropzoneStateContext();
   const { size, variant, itemClassNames } = useFileDropzoneStyleContext();
-  const readableFileSize = formatBytes(file.size, 2);
+  const { fileSizeBase } = useFileDropzoneStateContext();
+  const readableFileSize = formatBytes(file.size, 2, fileSizeBase);
   const styles = fileInfoDropzoneStyles({
     size,
     variant,

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

@@ -1,8 +1,8 @@
 "use strict";
 import { ErrorCode } from 'react-dropzone';
 
-const formatBytes = (bytes, decimals = 2, size) => {
-  const k = 1e3;
+const formatBytes = (bytes, decimals = 2, base = "binary", size) => {
+  const k = base === "binary" ? 1024 : 1e3;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
   if (bytes === 0 || bytes === void 0)
@@ -14,9 +14,9 @@ const formatErrorMessage = (error, config) => {
   const { maxFileSize, minFileSize, maxFiles } = config;
   switch (error.code) {
     case ErrorCode.FileTooLarge:
-      return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2)}`;
+      return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2, config.fileSizeBase)}`;
     case ErrorCode.FileTooSmall:
-      return `Please upload a file above ${formatBytes(minFileSize, 2)}`;
+      return `Please upload a file above ${formatBytes(minFileSize, 2, config.fileSizeBase)}`;
     case ErrorCode.TooManyFiles:
       return `Maximum number of files allowed is ${maxFiles}.`;
     default: {

package/dist/esm/index.js

@@ -25,10 +25,10 @@ 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 { 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 { 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';
@@ -38,10 +38,10 @@ 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 { PaginationItemType } from './pagination/hooks/use-pagination.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';
@@ -54,7 +54,6 @@ export { ModalBody } from './modal/modal-body.js';
 export { ModalHeader } from './modal/modal-header.js';
 export { ModalVariantContext, useModalVariantContext } from './modal/modal-variant-context.js';
 export { Toaster } from './toast/toast.js';
-export { toast } from 'sonner';
 export { Navbar } from './navbar/navbar.js';
 export { NavbarBrand } from './navbar/navbar-brand.js';
 export { NavbarContent } from './navbar/navbar-content.js';
@@ -64,3 +63,10 @@ export { NavbarMenuToggle } from './navbar/navbar-menu/toggle.js';
 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 { 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';

package/dist/esm/menu/menu.js

@@ -4,11 +4,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useMemo, useCallback } from 'react';
 import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider, Menu as Menu$1, MenuSection as MenuSection$1, Header, Collection, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Separator } from 'react-aria-components';
 import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
+import { Popover } from '../popover/popover.js';
 import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
 import { createContext } from '../system/react-utils/context.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 ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
-import { Popover } from '../popover/popover.js';
 
 const [MenuVariantContext, useMenuVariantContext] = createContext({
   name: "MenuVariantContext",

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

@@ -5,10 +5,10 @@ import { useContext, isValidElement } from 'react';
 import { useMessageFormatter } 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/navbar/navbar-menu/menu.js

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Overlay as $337b884510726a0d$export$c6fdb837b070b4ff } from '../../node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/Overlay.js';
+import { Overlay as $337b884510726a0d$export$c6fdb837b070b4ff } from '../../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.js';
 import { chain } from 'react-aria';
 import { dataAttr, cn } from '@opengovsg/oui-theme';
 import { forwardRef } from '../../system/utils.js';

package/dist/esm/navbar/use-navbar.js

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 import { useRef, useCallback, useState, useEffect } from 'react';
-import { usePreventScroll as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18 } from '../node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/usePreventScroll.js';
+import { usePreventScroll as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18 } from '../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/usePreventScroll.js';
 import { useResizeObserver, mergeProps } from '@react-aria/utils';
 import { useControlledState } from '@react-stately/utils';
 import { navbarStyles, cn, dataAttr } from '@opengovsg/oui-theme';

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js

@@ -0,0 +1,17 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
+  ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
+];
+const User = createLucideIcon("User", __iconNode);
+
+export { __iconNode, User as default };

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 { Input } from '../input/input.js';
-import { Button } from '../button/button.js';
 
 function NumberField(originalProps) {
   const [

package/dist/esm/range-calendar/range-calendar.js

@@ -6,12 +6,12 @@ import { CalendarDate, today, getLocalTimeZone, getDayOfWeek } from '@internatio
 import { RangeCalendar as RangeCalendar$1, Provider, CalendarGrid, CalendarGridBody, Text, RangeCalendarStateContext, useLocale, CalendarCell } from 'react-aria-components';
 import { useDeepCompareMemo } from 'use-deep-compare';
 import { calendarStyles, composeRenderProps, cn, dataAttr } from '@opengovsg/oui-theme';
+import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
 import { AgnosticCalendarStateContext } from '../calendar/agnostic-calendar-state-context.js';
 import { CalendarBottomContent } from '../calendar/calendar-bottom-content.js';
 import { CalendarGridHeader } from '../calendar/calendar-grid-header.js';
 import { CalendarHeader } from '../calendar/calendar-header.js';
 import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
-import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
 
 const RangeCalendar = forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
   const [props, variantProps] = mapPropsVariants(

package/dist/esm/select/select.js

@@ -1,16 +1,35 @@
 "use strict";
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { Provider, Select as Select$1, SelectValue, Virtualizer, ListLayout, ListBox } from 'react-aria-components';
-import { selectStyles, composeRenderProps } from '@opengovsg/oui-theme';
+import { useMemo, isValidElement, cloneElement } from 'react';
+import { useLocalizedStringFormatter } from 'react-aria';
+import { useFilter, Virtualizer, ListLayout, ListBox, Provider, Select as Select$1, SelectValue, Autocomplete, SearchField, Input } from 'react-aria-components';
+import { selectStyles, cn, composeRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { Label, Description, FieldError } from '../field/field.js';
+import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { SelectVariantContext } from './select-variant-context.js';
-import { Label, Description, FieldError } from '../field/field.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 { Popover } from '../popover/popover.js';
-import { Button } from '../button/button.js';
 
+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":
@@ -28,12 +47,22 @@ function Select({
   errorMessage,
   ...originalProps
 }) {
+  const formatter = useLocalizedStringFormatter(i18nStrings);
   const [_props, variantProps] = mapPropsVariants(
     originalProps,
     selectStyles.variantKeys
   );
-  const { items, children, listLayoutOptions, ...props } = _props;
+  const {
+    items,
+    children,
+    listLayoutOptions,
+    enableSearch = false,
+    searchPlaceholder,
+    searchIcon,
+    ...props
+  } = _props;
   const styles = selectStyles(variantProps);
+  const { contains } = useFilter({ sensitivity: "base" });
   const layoutOptions = useMemo(() => {
     return {
       estimatedRowHeight: calculateEstimatedRowHeight(
@@ -42,6 +71,37 @@ function Select({
       ...listLayoutOptions
     };
   }, [listLayoutOptions, variantProps.size]);
+  const renderedSearchIcon = useMemo(() => {
+    if (!enableSearch || !searchIcon) return null;
+    if (isValidElement(searchIcon)) {
+      const iconElement = searchIcon;
+      return cloneElement(iconElement, {
+        className: styles.searchIcon({
+          className: cn(classNames?.searchIcon, iconElement.props.className)
+        })
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles.searchIcon({ className: classNames?.searchIcon }),
+        children: searchIcon
+      }
+    );
+  }, [classNames?.searchIcon, enableSearch, searchIcon, styles]);
+  const listContent = /* @__PURE__ */ jsx(Virtualizer, { layout: ListLayout, layoutOptions, children: /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      autoFocus: !enableSearch,
+      items,
+      shouldFocusWrap: true,
+      className: composeRenderProps(
+        classNames?.list,
+        (className, renderProps) => styles.list({ className, ...renderProps })
+      ),
+      children
+    }
+  ) });
   return /* @__PURE__ */ jsx(Provider, { values: [[SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxs(
     Select$1,
     {
@@ -91,19 +151,31 @@ function Select({
           }
         ),
         /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage }),
-        /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsx(Virtualizer, { layout: ListLayout, layoutOptions, children: /* @__PURE__ */ jsx(
-          ListBox,
-          {
-            autoFocus: true,
-            items,
-            shouldFocusWrap: true,
-            className: composeRenderProps(
-              classNames?.list,
-              (className, renderProps) => styles.list({ className, ...renderProps })
-            ),
-            children
-          }
-        ) }) })
+        /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: enableSearch ? /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+          /* @__PURE__ */ jsxs(
+            SearchField,
+            {
+              autoFocus: true,
+              "aria-label": formatter.format("searchAriaLabel"),
+              className: styles.searchField({
+                className: classNames?.searchField
+              }),
+              children: [
+                renderedSearchIcon,
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: searchPlaceholder ?? formatter.format("searchPlaceholder"),
+                    className: styles.searchInput({
+                      className: classNames?.searchInput
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          listContent
+        ] }) : listContent })
       ]
     }
   ) });

package/dist/esm/system/react-utils/children.js

@@ -19,5 +19,11 @@ 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;
+};
 
-export { getValidChildren, pickChildren };
+export { getValidChildren, pickChildren, renderChildren };

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

@@ -4,15 +4,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { createElement } from 'react';
 import { composeRenderProps } from 'react-aria-components';
 import { tagFieldStyles } from '@opengovsg/oui-theme';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import { Input } from '../input/input.js';
+import { Popover } from '../popover/popover.js';
 import { TagFieldItem } from './tag-field-item.js';
 import { TagFieldList } from './tag-field-list.js';
 import { TagFieldRoot } from './tag-field-root.js';
 import { TagFieldTagList } from './tag-field-tag-list.js';
 import { TagFieldTrigger } from './tag-field-trigger.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 { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Input } from '../input/input.js';
-import { Popover } from '../popover/popover.js';
 
 function TagField({
   classNames,

package/dist/esm/text-area-field/text-area-field.js

@@ -3,8 +3,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextField } from 'react-aria-components';
 import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { TextArea } from '../text-area/text-area.js';
 import { Label, Description, FieldError } from '../field/field.js';
+import { TextArea } from '../text-area/text-area.js';
 
 function TextAreaField({
   label,

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

@@ -3,8 +3,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextField as TextField$1 } from 'react-aria-components';
 import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { Input } from '../input/input.js';
 import { Label, Description, FieldError } from '../field/field.js';
+import { Input } from '../input/input.js';
 
 function TextField({
   label,

package/dist/esm/toast/toast.js

@@ -4,9 +4,9 @@ import { jsx } from 'react/jsx-runtime';
 import { Toaster as Toaster$1 } from 'sonner';
 export { toast } from 'sonner';
 import { toastStyles } from '@opengovsg/oui-theme';
+import { Spinner } from '../spinner/spinner.js';
 import { mapPropsVariants } from '../system/utils.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 { Spinner } from '../spinner/spinner.js';
 
 function Toaster(originalProps) {
   const [{ toastOptions, closeButton = true, ...props }, variantProps] = mapPropsVariants(originalProps, toastStyles.variantKeys);

package/dist/types/accordion/accordion.d.ts

@@ -0,0 +1,50 @@
+import type React from "react";
+import type { DisclosurePanelProps as AriaDisclosurePanelProps, DisclosureProps as AriaDisclosureProps, ButtonRenderProps, DisclosureGroupProps, RenderProps } from "react-aria-components";
+import type { AccordionSlots, AccordionVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+import { accordionStyles } from "@opengovsg/oui-theme";
+export interface UseProvideAccordionStylesReturn {
+    slots: ReturnType<typeof accordionStyles>;
+    classNames?: SlotsToClasses<AccordionSlots>;
+}
+export declare const AccordionStyleContext: React.Context<UseProvideAccordionStylesReturn>, useAccordionStyleContext: () => UseProvideAccordionStylesReturn;
+export interface AccordionItemProps extends Omit<AriaDisclosureProps, "isExpanded" | "defaultExpanded" | "onExpandedChange"> {
+    children: React.ReactNode;
+    classNames?: SlotsToClasses<AccordionSlots>;
+}
+export declare const AccordionItem: import("../system/utils").InternalForwardRefRenderFunction<"div", AccordionItemProps, never>;
+export interface AccordionHeaderRenderProps extends ButtonRenderProps {
+    isExpanded: boolean;
+}
+export interface AccordionHeaderProps extends Pick<RenderProps<AccordionHeaderRenderProps>, "children"> {
+    classNames?: SlotsToClasses<Extract<AccordionSlots, "heading" | "title" | "trigger" | "indicator" | "startContentWrapper" | "endContentWrapper">>;
+    /**
+     * The indicator. Defaults to a chevron icon.
+     */
+    indicator?: RenderProps<AccordionHeaderRenderProps>["children"];
+    /**
+     * Whether to hide the indicator.
+     * @default false
+     */
+    hideIndicator?: boolean;
+    /**
+     * The header start content.
+     */
+    startContent?: RenderProps<AccordionHeaderRenderProps>["children"];
+    /**
+     * The header end content.
+     */
+    endContent?: RenderProps<AccordionHeaderRenderProps>["children"];
+}
+export declare function AccordionHeader({ children, classNames, indicator, startContent, endContent, hideIndicator, }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface AccordionContentProps extends AriaDisclosurePanelProps {
+    children: React.ReactNode;
+    classNames?: SlotsToClasses<"panel" | "content">;
+}
+export declare function AccordionContent({ children, classNames, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+interface AccordionProps extends DisclosureGroupProps, AccordionVariantProps {
+    children: React.ReactNode;
+    classNames?: SlotsToClasses<AccordionSlots>;
+}
+export declare const Accordion: import("../system/utils").InternalForwardRefRenderFunction<"div", AccordionProps, never>;
+export {};
+//# sourceMappingURL=accordion.d.ts.map

package/dist/types/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EACV,oBAAoB,IAAI,wBAAwB,EAChD,eAAe,IAAI,mBAAmB,EACtC,iBAAiB,EACjB,oBAAoB,EACpB,WAAW,EACZ,MAAM,uBAAuB,CAAA;AAa9B,OAAO,KAAK,EACV,cAAc,EACd,qBAAqB,EACrB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,eAAe,EAGhB,MAAM,sBAAsB,CAAA;AAM7B,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;IACzC,UAAU,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAC5C;AAED,eAAO,MAAO,qBAAqB,kDAAE,wBAAwB,uCAIzD,CAAA;AAEJ,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,YAAY,GAAG,iBAAiB,GAAG,kBAAkB,CACtD;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAC5C;AAED,eAAO,MAAM,aAAa,8FAkBzB,CAAA;AAGD,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB;IACnE,UAAU,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,WAAW,CAAC,0BAA0B,CAAC,EAAE,UAAU,CAAC;IACjE,UAAU,CAAC,EAAE,cAAc,CACzB,OAAO,CACL,cAAc,EACZ,SAAS,GACT,OAAO,GACP,SAAS,GACT,WAAW,GACX,qBAAqB,GACrB,mBAAmB,CACtB,CACF,CAAA;IAED;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAC,UAAU,CAAC,CAAA;IAE/D;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAC,UAAU,CAAC,CAAA;IAClE;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAC,UAAU,CAAC,CAAA;CACjE;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,aAAqB,GACtB,EAAE,oBAAoB,2CA6EtB;AAED,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;CACjD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAuBvB;AAED,UAAU,cAAe,SAAQ,oBAAoB,EAAE,qBAAqB;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAC5C;AAED,eAAO,MAAM,SAAS,0FA0BrB,CAAA"}

package/dist/types/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./accordion";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accordion/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/types/avatar/avatar-context.d.ts

@@ -0,0 +1,12 @@
+import type { AvatarSlots, avatarStyles, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { ImageLoadingStatus } from "./hooks/use-img-loading-status";
+export interface UseAvatarContextReturn {
+    imageLoadingStatus: ImageLoadingStatus;
+    setImageLoadingStatus: React.Dispatch<React.SetStateAction<ImageLoadingStatus>>;
+    slots: ReturnType<typeof avatarStyles>;
+    classNames?: SlotsToClasses<AvatarSlots>;
+    name?: string;
+    getInitials: (name: string) => string;
+}
+export declare const AvatarContext: import("react").Context<UseAvatarContextReturn>, useAvatarContext: () => UseAvatarContextReturn;
+//# sourceMappingURL=avatar-context.d.ts.map

package/dist/types/avatar/avatar-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-context.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGxE,MAAM,WAAW,sBAAsB;IACrC,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CACnC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CACzC,CAAA;IACD,KAAK,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC;AACD,eAAO,MAAO,aAAa,mDAAE,gBAAgB,8BAIzC,CAAA"}