@opengovsg/oui 0.0.40 → 0.0.41

package/dist/cjs/badge/i18n.cjs

@@ -0,0 +1,19 @@
+"use strict";
+'use strict';
+
+const i18nStrings = {
+  "en-SG": {
+    "Close badge": "Close badge"
+  },
+  "zh-SG": {
+    "Close badge": "\u5173\u95ED\u5FBD\u7AE0"
+  },
+  "ms-SG": {
+    "Close badge": "Tutup lencana"
+  },
+  "ta-SG": {
+    "Close badge": "\u0BAA\u0BC7\u0B9F\u0BCD\u0B9C\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

package/dist/cjs/badge/use-badge.cjs

@@ -7,22 +7,9 @@ var reactAria = require('react-aria');
 var useDeepCompare = require('use-deep-compare');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
+var i18n = require('./i18n.cjs');
 var refs = require('../system/react-utils/refs.cjs');
 
-const i18nStrings = {
-  "en-SG": {
-    close: "Close badge"
-  },
-  "zh-SG": {
-    close: "\u5173\u95ED\u5FBD\u7AE0"
-  },
-  "ms-SG": {
-    close: "Tutup lencana"
-  },
-  "ta-SG": {
-    close: "\u0BAA\u0BC7\u0B9F\u0BCD\u0B9C\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
-  }
-};
 function useBadge(originalProps) {
   const [_props, variantProps] = utils.mapPropsVariants(
     originalProps,
@@ -42,7 +29,7 @@ function useBadge(originalProps) {
   const domRef = refs.useDomRef(ref);
   const Component = $670gB$react.useMemo(() => as || "div", [as]);
   const baseClassName = ouiTheme.cn(classNames?.base, className);
-  const formatMessage = reactAria.useMessageFormatter(i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   const isCloseable = variantProps.isCloseable || !!onClose;
   const {
     focusProps: closeFocusProps,
@@ -83,16 +70,16 @@ function useBadge(originalProps) {
         className: classNames?.closeButton,
         isFocusVisible: isCloseButtonFocusVisible
       }),
-      "aria-label": formatMessage("close"),
+      "aria-label": stringFormatter.format("Close badge"),
       ...utils$1.mergeProps(closePressProps, closeFocusProps)
     };
   }, [
     classNames?.closeButton,
     closeFocusProps,
     closePressProps,
-    formatMessage,
     isCloseButtonFocusVisible,
     slots,
+    stringFormatter,
     variantProps?.size
   ]);
   return {

package/dist/cjs/banner/banner.cjs

@@ -8,24 +8,11 @@ var reactAria = require('react-aria');
 var reactStately = require('react-stately');
 var ouiTheme = require('@opengovsg/oui-theme');
 var button = require('../button/button.cjs');
+var i18n = require('./i18n.cjs');
 var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
 var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/info.cjs');
 var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');
 
-const i18nStrings = {
-  "en-SG": {
-    dismiss: "Close banner"
-  },
-  "zh-SG": {
-    dismiss: "\u5173\u95ED\u6A2A\u5E45"
-  },
-  "ms-SG": {
-    dismiss: "Tutup sepanduk"
-  },
-  "ta-SG": {
-    dismiss: "\u0B89\u0B9F\u0BC8\u0B95\u0BB3\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
-  }
-};
 const Banner = ({
   variant = "info",
   size,
@@ -37,7 +24,7 @@ const Banner = ({
   defaultExpanded = true,
   ...disclosureProps
 }) => {
-  const formatMessage = reactAria.useMessageFormatter(i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   const styles = ouiTheme.bannerStyles({ variant, size });
   const startContent = $670gB$react.useMemo(() => {
     if (startContentProp) {
@@ -107,7 +94,7 @@ const Banner = ({
             variant: "clear",
             color: "neutral",
             isIconOnly: true,
-            "aria-label": formatMessage("dismiss"),
+            "aria-label": stringFormatter.format("Close banner"),
             className: styles.dismissButton({
               className: classNames?.dismissButton
             }),

package/dist/cjs/banner/i18n.cjs

@@ -0,0 +1,19 @@
+"use strict";
+'use strict';
+
+const i18nStrings = {
+  "en-SG": {
+    "Close banner": "Close banner"
+  },
+  "zh-SG": {
+    "Close banner": "\u5173\u95ED\u6A2A\u5E45"
+  },
+  "ms-SG": {
+    "Close banner": "Tutup sepanduk"
+  },
+  "ta-SG": {
+    "Close banner": "\u0B89\u0B9F\u0BC8\u0B95\u0BB3\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

package/dist/cjs/calendar/calendar-bottom-content.cjs

@@ -5,10 +5,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var date = require('@internationalized/date');
+var reactAria = require('react-aria');
 var button = require('../button/button.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
-var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
+var i18n = require('./i18n.cjs');
 
 const CalendarBottomContent = ({
   bottomContent,
@@ -17,7 +18,7 @@ const CalendarBottomContent = ({
 }) => {
   const state = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
   const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
-  const formatMessage = useCalendarI18n.useCalendarI18n();
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   const handleTodayClick = $670gB$react.useCallback(() => {
     const todayDate = date.today(date.getLocalTimeZone());
     state.setFocusedDate(todayDate);
@@ -47,7 +48,7 @@ const CalendarBottomContent = ({
           slot: null,
           className: slots.todayButton({ className: classNames?.todayButton }),
           onPress: handleTodayClick,
-          children: formatMessage("today")
+          children: stringFormatter.format("Today")
         }
       )
     }

package/dist/cjs/calendar/calendar-month-day-selector.cjs

@@ -5,19 +5,20 @@
 var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var date = require('@internationalized/date');
+var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var select = require('../select/select.cjs');
 var selectItem = require('../select/select-item.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
+var i18n = require('./i18n.cjs');
 var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
-var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
 
 const CalendarMonthDaySelector = () => {
   const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
   const state = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
   const { months, years, datePartOrder } = useCalendarSelectors.useCalendarSelectors(state);
-  const formatMessage = useCalendarI18n.useCalendarI18n();
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
     if (part === "month") {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -38,7 +39,7 @@ const CalendarMonthDaySelector = () => {
             popover: "min-w-[12ch]"
           },
           selectedKey: state.visibleRange.start.month,
-          "aria-label": formatMessage("selectMonth"),
+          "aria-label": stringFormatter.format("Select month"),
           onSelectionChange: (month) => {
             state.setFocusedDate(
               new date.CalendarDate(state.focusedDate.year, Number(month), 1)
@@ -67,7 +68,7 @@ const CalendarMonthDaySelector = () => {
           popover: "min-w-[8ch]"
         },
         selectedKey: state.visibleRange.start.year,
-        "aria-label": formatMessage("selectYear"),
+        "aria-label": stringFormatter.format("Select year"),
         onSelectionChange: (year) => {
           state.setFocusedDate(
             new date.CalendarDate(

package/dist/cjs/calendar/hooks/index.cjs

@@ -1,11 +1,8 @@
 "use strict";
 'use strict';
 
-var useCalendarI18n = require('./use-calendar-i18n.cjs');
 var useCalendarSelectors = require('./use-calendar-selectors.cjs');
 
 
 
-exports.i18nStrings = useCalendarI18n.i18nStrings;
-exports.useCalendarI18n = useCalendarI18n.useCalendarI18n;
 exports.useCalendarSelectors = useCalendarSelectors.useCalendarSelectors;

package/dist/cjs/calendar/i18n.cjs

@@ -0,0 +1,27 @@
+"use strict";
+'use strict';
+
+const i18nStrings = {
+  "en-SG": {
+    "Select month": "Select month",
+    "Select year": "Select year",
+    Today: "Today"
+  },
+  "zh-SG": {
+    "Select month": "\u9009\u62E9\u6708\u4EFD",
+    "Select year": "\u9009\u62E9\u5E74\u4EFD",
+    Today: "\u4ECA\u5929"
+  },
+  "ms-SG": {
+    "Select month": "Pilih bulan",
+    "Select year": "Pilih tahun",
+    Today: "Hari ini"
+  },
+  "ta-SG": {
+    "Select month": "\u0BAE\u0BBE\u0BA4\u0BA4\u0BCD\u0BA4\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
+    "Select year": "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
+    Today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

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

@@ -11,6 +11,7 @@ var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
+var i18n = require('./i18n.cjs');
 var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
 var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');
@@ -25,42 +26,24 @@ const calculateEstimatedRowHeight = (size) => {
       return 48;
   }
 };
-const i18nStrings = {
-  "en-SG": {
-    clear: "Clear",
-    empty: "No matching results"
-  },
-  "zh-SG": {
-    clear: "\u6E05\u9664",
-    empty: "\u6CA1\u6709\u5339\u914D\u7684\u7ED3\u679C"
-  },
-  "ms-SG": {
-    clear: "Jelas",
-    empty: "Tiada hasil yang sepadan"
-  },
-  "ta-SG": {
-    clear: "\u0BA4\u0BC6\u0BB3\u0BBF\u0BB5\u0BC1",
-    empty: "\u0BAA\u0BCA\u0BB0\u0BC1\u0BA8\u0BCD\u0BA4\u0BC1\u0BAE\u0BCD \u0BAE\u0BC1\u0B9F\u0BBF\u0BB5\u0BC1\u0B95\u0BB3\u0BCD \u0B87\u0BB2\u0BCD\u0BB2\u0BC8"
-  }
-};
 function ComboBoxEmptyState({
   size,
   className
 }) {
   const styles = ouiTheme.listBoxItemStyles({ size });
-  const formatMessage = reactAria.useMessageFormatter(i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       className: styles.container({
         className: ouiTheme.cn("cursor-default italic", className)
       }),
-      children: formatMessage("empty")
+      children: stringFormatter.format("No matching results")
     }
   );
 }
 function ComboBox(originalProps) {
-  const formatMessage = reactAria.useMessageFormatter(i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   const [_props, variantProps] = utils.mapPropsVariants(
     originalProps,
     ouiTheme.comboBoxStyles.variantKeys
@@ -173,7 +156,7 @@ function ComboBox(originalProps) {
               slot: null,
               onPress: onClear,
               isDisabled: isComboBoxDisabled,
-              "aria-label": formatMessage("clear"),
+              "aria-label": stringFormatter.format("Clear"),
               className: ouiTheme.composeRenderProps(
                 classNames?.clearButton,
                 (className, renderProps) => ouiTheme.comboBoxClearButtonStyles({

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

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+const i18nStrings = {
+  "en-SG": {
+    Clear: "Clear",
+    "No matching results": "No matching results"
+  },
+  "zh-SG": {
+    Clear: "\u6E05\u9664",
+    "No matching results": "\u6CA1\u6709\u5339\u914D\u7684\u7ED3\u679C"
+  },
+  "ms-SG": {
+    Clear: "Jelas",
+    "No matching results": "Tiada hasil yang sepadan"
+  },
+  "ta-SG": {
+    Clear: "\u0BA4\u0BC6\u0BB3\u0BBF\u0BB5\u0BC1",
+    "No matching results": "\u0BAA\u0BCA\u0BB0\u0BC1\u0BA8\u0BCD\u0BA4\u0BC1\u0BAE\u0BCD \u0BAE\u0BC1\u0B9F\u0BBF\u0BB5\u0BC1\u0B95\u0BB3\u0BCD \u0B87\u0BB2\u0BCD\u0BB2\u0BC8"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

package/dist/cjs/index.cjs

@@ -68,6 +68,7 @@ var navbarContext = require('./navbar/navbar-context.cjs');
 var index = require('./avatar/index.cjs');
 var accordion = require('./accordion/accordion.cjs');
 var timeField = require('./time-field/time-field.cjs');
+var searchField = require('./search-field/search-field.cjs');
 var sonner = require('sonner');
 var avatarContext = require('./avatar/avatar-context.cjs');
 var avatarGroup = require('./avatar/avatar-group.cjs');
@@ -184,6 +185,7 @@ exports.AccordionItem = accordion.AccordionItem;
 exports.AccordionStyleContext = accordion.AccordionStyleContext;
 exports.useAccordionStyleContext = accordion.useAccordionStyleContext;
 exports.TimeField = timeField.TimeField;
+exports.SearchField = searchField.SearchField;
 Object.defineProperty(exports, "toast", {
 	enumerable: true,
 	get: function () { return sonner.toast; }

package/dist/cjs/modal/i18n.cjs

@@ -3,16 +3,16 @@
 
 const i18nStrings = {
   "en-SG": {
-    dismiss: "Dismiss"
+    Dismiss: "Dismiss"
   },
   "zh-SG": {
-    dismiss: "\u53D6\u6D88"
+    Dismiss: "\u53D6\u6D88"
   },
   "ms-SG": {
-    dismiss: "Tutup"
+    Dismiss: "Tutup"
   },
   "ta-SG": {
-    dismiss: "\u0BAE\u0BC2\u0B9F\u0BC1"
+    Dismiss: "\u0BAE\u0BC2\u0B9F\u0BC1"
   }
 };
 

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

@@ -19,7 +19,7 @@ function ModalContent({
   ...props
 }) {
   const { slots, classNames, buttonSize } = $670gB$react.useContext(modalVariantContext.ModalVariantContext);
-  const formatMessage = reactAria.useMessageFormatter(i18n.i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   const closeButtonContent = $670gB$react.isValidElement(closeButtonContentProp) ? closeButtonContentProp : /* @__PURE__ */ jsxRuntime.jsx(x.default, {});
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Dialog,
@@ -34,7 +34,7 @@ function ModalContent({
           {
             slot: "close",
             isIconOnly: true,
-            "aria-label": formatMessage("dismiss"),
+            "aria-label": stringFormatter.format("Dismiss"),
             size: buttonSize,
             variant: "clear",
             color: "neutral",

package/dist/cjs/navbar/navbar-menu/i18n.cjs

@@ -3,20 +3,20 @@
 
 const i18nStrings = {
   "en-SG": {
-    openMenu: "Open navigation menu",
-    closeMenu: "Close navigation menu"
+    "Open navigation menu": "Open navigation menu",
+    "Close navigation menu": "Close navigation menu"
   },
   "zh-SG": {
-    openMenu: "\u6253\u5F00\u5BFC\u822A\u83DC\u5355",
-    closeMenu: "\u5173\u95ED\u5BFC\u822A\u83DC\u5355"
+    "Open navigation menu": "\u6253\u5F00\u5BFC\u822A\u83DC\u5355",
+    "Close navigation menu": "\u5173\u95ED\u5BFC\u822A\u83DC\u5355"
   },
   "ms-SG": {
-    openMenu: "Buka menu navigasi",
-    closeMenu: "Tutup menu navigasi"
+    "Open navigation menu": "Buka menu navigasi",
+    "Close navigation menu": "Tutup menu navigasi"
   },
   "ta-SG": {
-    openMenu: "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8\u0BA4\u0BCD \u0BA4\u0BBF\u0BB1",
-    closeMenu: "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
+    "Open navigation menu": "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8\u0BA4\u0BCD \u0BA4\u0BBF\u0BB1",
+    "Close navigation menu": "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
   }
 };
 

package/dist/cjs/navbar/navbar-menu/toggle.cjs

@@ -35,7 +35,7 @@ const NavbarMenuToggle = ({
     }
     window.scrollTo({ top: menuTopOffset, behavior: "instant" });
   };
-  const formatMessage = reactAria.useMessageFormatter(i18n.i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   const toggleStyles = $670gB$react.useMemo(() => {
     return ouiTheme.buttonStyles({
       variant: "unstyled",
@@ -80,7 +80,7 @@ const NavbarMenuToggle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.ToggleButton,
     {
-      "aria-label": isMenuOpen ? formatMessage("closeMenu") : formatMessage("openMenu"),
+      "aria-label": isMenuOpen ? stringFormatter.format("Close navigation menu") : stringFormatter.format("Open navigation menu"),
       ref: menuRef,
       "data-open": ouiTheme.dataAttr(isMenuOpen),
       className: toggleStyles,

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/search.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createLucideIcon = require('../createLucideIcon.cjs');
+
+/**
+ * @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 = [
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
+  ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
+];
+const Search = createLucideIcon.default("Search", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = Search;

package/dist/cjs/search-field/i18n.cjs

@@ -0,0 +1,19 @@
+"use strict";
+'use strict';
+
+const i18nStrings = {
+  "en-SG": {
+    Search: "Search"
+  },
+  "zh-SG": {
+    Search: "\u641C\u7D22"
+  },
+  "ms-SG": {
+    Search: "Cari"
+  },
+  "ta-SG": {
+    Search: "\u0BA4\u0BC7\u0B9F\u0BC1"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

package/dist/cjs/search-field/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var searchField = require('./search-field.cjs');
+
+
+
+exports.SearchField = searchField.SearchField;

package/dist/cjs/search-field/search-field.cjs

@@ -0,0 +1,91 @@
+"use strict";
+'use strict';
+
+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');
+
+function SearchField(originalProps) {
+  const [
+    {
+      label,
+      description,
+      errorMessage,
+      searchIcon,
+      inputProps,
+      classNames,
+      ...props
+    },
+    variantProps
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.searchFieldStyles.variantKeys);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
+  const styles = ouiTheme.searchFieldStyles(variantProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.SearchField,
+    {
+      "aria-label": stringFormatter.format("Search"),
+      ...props,
+      className: ouiTheme.composeRenderProps(
+        props.className,
+        (className, renderProps) => styles.base({
+          className,
+          ...renderProps
+        })
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Label,
+          {
+            size: variantProps.size,
+            className: styles.label({ className: classNames?.label }),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(field.FieldGroup, { className: styles.group({ className: classNames?.group }), children: [
+          searchIcon !== null && (searchIcon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            search.default,
+            {
+              "aria-hidden": true,
+              className: styles.searchIcon({
+                className: classNames?.searchIcon
+              })
+            }
+          ) : searchIcon),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              size: variantProps.size,
+              variant: "unstyled",
+              className: styles.input({ className: classNames?.input }),
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              isIconOnly: true,
+              isAttached: true,
+              variant: "clear",
+              color: "sub",
+              size: variantProps.size,
+              className: styles.clearButton({ className: classNames?.clearButton }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(x.default, { "aria-hidden": true })
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage })
+      ]
+    }
+  );
+}
+
+exports.SearchField = SearchField;

package/dist/esm/badge/i18n.js

@@ -0,0 +1,17 @@
+"use strict";
+const i18nStrings = {
+  "en-SG": {
+    "Close badge": "Close badge"
+  },
+  "zh-SG": {
+    "Close badge": "\u5173\u95ED\u5FBD\u7AE0"
+  },
+  "ms-SG": {
+    "Close badge": "Tutup lencana"
+  },
+  "ta-SG": {
+    "Close badge": "\u0BAA\u0BC7\u0B9F\u0BCD\u0B9C\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
+  }
+};
+
+export { i18nStrings };

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

@@ -1,26 +1,13 @@
 "use strict";
 import { useMemo, useCallback, cloneElement, isValidElement } from 'react';
 import { mergeProps } from '@react-aria/utils';
-import { useMessageFormatter, useFocusRing, usePress } from 'react-aria';
+import { useLocalizedStringFormatter, useFocusRing, usePress } from 'react-aria';
 import { useDeepCompareMemo } from 'use-deep-compare';
 import { badgeStyles, cn, badgeCloseButtonStyles } from '@opengovsg/oui-theme';
 import { mapPropsVariants } from '../system/utils.js';
+import { i18nStrings } from './i18n.js';
 import { useDomRef } from '../system/react-utils/refs.js';
 
-const i18nStrings = {
-  "en-SG": {
-    close: "Close badge"
-  },
-  "zh-SG": {
-    close: "\u5173\u95ED\u5FBD\u7AE0"
-  },
-  "ms-SG": {
-    close: "Tutup lencana"
-  },
-  "ta-SG": {
-    close: "\u0BAA\u0BC7\u0B9F\u0BCD\u0B9C\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
-  }
-};
 function useBadge(originalProps) {
   const [_props, variantProps] = mapPropsVariants(
     originalProps,
@@ -40,7 +27,7 @@ function useBadge(originalProps) {
   const domRef = useDomRef(ref);
   const Component = useMemo(() => as || "div", [as]);
   const baseClassName = cn(classNames?.base, className);
-  const formatMessage = useMessageFormatter(i18nStrings);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   const isCloseable = variantProps.isCloseable || !!onClose;
   const {
     focusProps: closeFocusProps,
@@ -81,16 +68,16 @@ function useBadge(originalProps) {
         className: classNames?.closeButton,
         isFocusVisible: isCloseButtonFocusVisible
       }),
-      "aria-label": formatMessage("close"),
+      "aria-label": stringFormatter.format("Close badge"),
       ...mergeProps(closePressProps, closeFocusProps)
     };
   }, [
     classNames?.closeButton,
     closeFocusProps,
     closePressProps,
-    formatMessage,
     isCloseButtonFocusVisible,
     slots,
+    stringFormatter,
     variantProps?.size
   ]);
   return {