@opengovsg/oui 0.0.39 → 0.0.41

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

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var timeField = require('./time-field.cjs');
+
+
+
+exports.TimeField = timeField.TimeField;

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

@@ -0,0 +1,61 @@
+"use strict";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var dateField = require('../date-field/date-field.cjs');
+var field = require('../field/field.cjs');
+var utils = require('../system/utils.cjs');
+
+function TimeField(originalProps) {
+  const [
+    {
+      label,
+      description,
+      className,
+      classNames,
+      errorMessage,
+      inputProps,
+      ...props
+    },
+    variantProps
+  ] = $670gB$react.useMemo(
+    () => utils.mapPropsVariants(originalProps, ouiTheme.dateInputStyles.variantKeys),
+    [originalProps]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.TimeField,
+    {
+      ...props,
+      isDisabled: variantProps.isDisabled,
+      className: ouiTheme.composeTailwindRenderProps(
+        className ?? classNames?.base,
+        "flex w-full flex-col gap-2"
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dateField.DateInput,
+          {
+            ...variantProps,
+            ...inputProps,
+            className: classNames?.input ?? inputProps?.className
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Description,
+          {
+            size: variantProps.size,
+            className: classNames?.description,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage })
+      ]
+    }
+  );
+}
+
+exports.TimeField = TimeField;

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 {

package/dist/esm/banner/banner.js

@@ -2,28 +2,15 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useRef } from 'react';
-import { useMessageFormatter, useDisclosure } from 'react-aria';
+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 X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
 
-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,
@@ -35,7 +22,7 @@ const Banner = ({
   defaultExpanded = true,
   ...disclosureProps
 }) => {
-  const formatMessage = useMessageFormatter(i18nStrings);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   const styles = bannerStyles({ variant, size });
   const startContent = useMemo(() => {
     if (startContentProp) {
@@ -105,7 +92,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/esm/banner/i18n.js

@@ -0,0 +1,17 @@
+"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"
+  }
+};
+
+export { i18nStrings };

package/dist/esm/calendar/calendar-bottom-content.js

@@ -3,10 +3,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useCallback } from 'react';
 import { today, getLocalTimeZone } from '@internationalized/date';
+import { useLocalizedStringFormatter } from 'react-aria';
 import { Button } from '../button/button.js';
 import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
-import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
+import { i18nStrings } from './i18n.js';
 
 const CalendarBottomContent = ({
   bottomContent,
@@ -15,7 +16,7 @@ const CalendarBottomContent = ({
 }) => {
   const state = useContext(AgnosticCalendarStateContext);
   const { slots, classNames, size } = useCalendarStyleContext();
-  const formatMessage = useCalendarI18n();
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   const handleTodayClick = useCallback(() => {
     const todayDate = today(getLocalTimeZone());
     state.setFocusedDate(todayDate);
@@ -45,7 +46,7 @@ const CalendarBottomContent = ({
           slot: null,
           className: slots.todayButton({ className: classNames?.todayButton }),
           onPress: handleTodayClick,
-          children: formatMessage("today")
+          children: stringFormatter.format("Today")
         }
       )
     }

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

@@ -3,19 +3,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { CalendarDate } from '@internationalized/date';
+import { useLocalizedStringFormatter } from 'react-aria';
 import { Group } from 'react-aria-components';
 import { Select } from '../select/select.js';
 import { SelectItem } from '../select/select-item.js';
 import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
+import { i18nStrings } from './i18n.js';
 import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
-import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
 
 const CalendarMonthDaySelector = () => {
   const { slots, size, classNames } = useCalendarStyleContext();
   const state = useContext(AgnosticCalendarStateContext);
   const { months, years, datePartOrder } = useCalendarSelectors(state);
-  const formatMessage = useCalendarI18n();
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   return /* @__PURE__ */ jsx(Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
     if (part === "month") {
       return /* @__PURE__ */ jsx(
@@ -36,7 +37,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 CalendarDate(state.focusedDate.year, Number(month), 1)
@@ -65,7 +66,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 CalendarDate(

package/dist/esm/calendar/hooks/index.js

@@ -1,3 +1,2 @@
 "use strict";
-export { i18nStrings, useCalendarI18n } from './use-calendar-i18n.js';
 export { useCalendarSelectors } from './use-calendar-selectors.js';

package/dist/esm/calendar/i18n.js

@@ -0,0 +1,25 @@
+"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"
+  }
+};
+
+export { i18nStrings };

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

@@ -2,13 +2,14 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
-import { useMessageFormatter } from 'react-aria';
+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 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';
@@ -23,42 +24,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 = listBoxItemStyles({ size });
-  const formatMessage = useMessageFormatter(i18nStrings);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   return /* @__PURE__ */ jsx(
     "span",
     {
       className: styles.container({
         className: cn("cursor-default italic", className)
       }),
-      children: formatMessage("empty")
+      children: stringFormatter.format("No matching results")
     }
   );
 }
 function ComboBox(originalProps) {
-  const formatMessage = useMessageFormatter(i18nStrings);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   const [_props, variantProps] = mapPropsVariants(
     originalProps,
     comboBoxStyles.variantKeys
@@ -171,7 +154,7 @@ function ComboBox(originalProps) {
               slot: null,
               onPress: onClear,
               isDisabled: isComboBoxDisabled,
-              "aria-label": formatMessage("clear"),
+              "aria-label": stringFormatter.format("Clear"),
               className: composeRenderProps(
                 classNames?.clearButton,
                 (className, renderProps) => comboBoxClearButtonStyles({

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

@@ -0,0 +1,21 @@
+"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"
+  }
+};
+
+export { i18nStrings };

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

@@ -3,7 +3,7 @@
 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 { dateInputStyles, composeTailwindRenderProps, composeRenderProps, dateSegmentStyles } from '@opengovsg/oui-theme';
 import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
 
@@ -20,13 +20,9 @@ function DateField(originalProps) {
     },
     variantProps
   ] = useMemo(
-    () => mapPropsVariants(originalProps, dateFieldStyles.variantKeys),
+    () => mapPropsVariants(originalProps, dateInputStyles.variantKeys),
     [originalProps]
   );
-  const styles = dateFieldStyles({
-    className: classNames?.input,
-    ...variantProps
-  });
   return /* @__PURE__ */ jsxs(
     DateField$1,
     {
@@ -38,7 +34,14 @@ function DateField(originalProps) {
       ),
       children: [
         label && /* @__PURE__ */ jsx(Label, { size: variantProps.size, className: classNames?.label, children: label }),
-        /* @__PURE__ */ jsx(DateInput, { size: variantProps.size, className: styles, ...inputProps }),
+        /* @__PURE__ */ jsx(
+          DateInput,
+          {
+            ...variantProps,
+            ...inputProps,
+            className: classNames?.input ?? inputProps?.className
+          }
+        ),
         description && /* @__PURE__ */ jsx(
           Description,
           {
@@ -57,13 +60,18 @@ function DateInput(originalProps) {
     () => mapPropsVariants(originalProps, dateInputStyles.variantKeys),
     [originalProps]
   );
-  const styles = dateInputStyles(variantProps);
   return /* @__PURE__ */ jsx(
     DateInput$1,
     {
-      className: composeTailwindRenderProps(
+      className: composeRenderProps(
         className ?? classNames?.base,
-        styles.base()
+        (className2, renderProps) => {
+          return dateInputStyles({
+            ...variantProps,
+            ...renderProps,
+            className: className2
+          });
+        }
       ),
       ...props,
       children: (segment) => /* @__PURE__ */ jsx(
@@ -72,7 +80,7 @@ function DateInput(originalProps) {
           segment,
           className: composeRenderProps(
             classNames?.segment,
-            (className2, renderProps) => styles.segment({
+            (className2, renderProps) => dateSegmentStyles({
               isEditable: segment.isEditable,
               ...renderProps,
               className: className2

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

@@ -47,6 +47,7 @@ function DatePicker(originalProps) {
           /* @__PURE__ */ jsx(
             DateInput,
             {
+              variant: "unstyled",
               size: variantProps.size,
               className: styles.input({ className: classNames?.input })
             }

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

@@ -63,6 +63,7 @@ function DateRangePicker(originalProps) {
                 /* @__PURE__ */ jsx(
                   DateInput,
                   {
+                    variant: "unstyled",
                     slot: "start",
                     size: variantProps.size,
                     className: styles.startInput({ className: classNames?.startInput })
@@ -81,6 +82,7 @@ function DateRangePicker(originalProps) {
                 /* @__PURE__ */ jsx(
                   DateInput,
                   {
+                    variant: "unstyled",
                     slot: "end",
                     size: variantProps.size,
                     className: styles.endInput({ className: classNames?.endInput })

package/dist/esm/index.js

@@ -65,6 +65,8 @@ 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 { toast } from 'sonner';
 export { AvatarContext, useAvatarContext } from './avatar/avatar-context.js';
 export { AvatarGroup } from './avatar/avatar-group.js';

package/dist/esm/modal/i18n.js

@@ -1,16 +1,16 @@
 "use strict";
 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/esm/modal/modal-content.js

@@ -2,7 +2,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useContext, isValidElement } from 'react';
-import { useMessageFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from 'react-aria';
 import { Dialog } from 'react-aria-components';
 import { cn } from '@opengovsg/oui-theme';
 import { Button } from '../button/button.js';
@@ -17,7 +17,7 @@ function ModalContent({
   ...props
 }) {
   const { slots, classNames, buttonSize } = useContext(ModalVariantContext);
-  const formatMessage = useMessageFormatter(i18nStrings);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   const closeButtonContent = isValidElement(closeButtonContentProp) ? closeButtonContentProp : /* @__PURE__ */ jsx(X, {});
   return /* @__PURE__ */ jsx(
     Dialog,
@@ -32,7 +32,7 @@ function ModalContent({
           {
             slot: "close",
             isIconOnly: true,
-            "aria-label": formatMessage("dismiss"),
+            "aria-label": stringFormatter.format("Dismiss"),
             size: buttonSize,
             variant: "clear",
             color: "neutral",