@opengovsg/oui 0.0.48 → 0.0.50

package/dist/cjs/index.cjs

@@ -9,7 +9,7 @@ var ripple = require('./ripple/ripple.cjs');
 var useRipple = require('./ripple/use-ripple.cjs');
 var spinner = require('./spinner/spinner.cjs');
 var useSpinner = require('./spinner/use-spinner.cjs');
-var toggle = require('./toggle/toggle.cjs');
+var toggle$1 = require('./toggle/toggle.cjs');
 var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
 var input = require('./input/input.cjs');
 var textField = require('./text-field/text-field.cjs');
@@ -29,7 +29,7 @@ var selectVariantContext = require('./select/select-variant-context.cjs');
 var badge = require('./badge/badge.cjs');
 var calendar = require('./calendar/calendar.cjs');
 var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
-var utils = require('./calendar/utils.cjs');
+var utils$1 = require('./calendar/utils.cjs');
 var date = require('@internationalized/date');
 var rangeCalendar = require('./range-calendar/range-calendar.cjs');
 var menu = require('./menu/menu.cjs');
@@ -43,11 +43,11 @@ var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context
 var pagination = require('./pagination/pagination.cjs');
 var paginationCursor = require('./pagination/pagination-cursor.cjs');
 var paginationItem = require('./pagination/pagination-item.cjs');
-var usePagination = require('./pagination/hooks/use-pagination.cjs');
-var usePagination$1 = require('./pagination/use-pagination.cjs');
+var usePagination$1 = require('./pagination/hooks/use-pagination.cjs');
+var usePagination = require('./pagination/use-pagination.cjs');
 var fileDropzone = require('./file-dropzone/file-dropzone.cjs');
 var fileInfo = require('./file-dropzone/file-info.cjs');
-var utils$1 = require('./file-dropzone/utils.cjs');
+var utils = require('./file-dropzone/utils.cjs');
 var numberField = require('./number-field/number-field.cjs');
 var modal = require('./modal/modal.cjs');
 var modalContent = require('./modal/modal-content.cjs');
@@ -61,7 +61,7 @@ var navbarBrand = require('./navbar/navbar-brand.cjs');
 var navbarContent = require('./navbar/navbar-content.cjs');
 var menu$1 = require('./navbar/navbar-menu/menu.cjs');
 var item = require('./navbar/navbar-menu/item.cjs');
-var toggle$1 = require('./navbar/navbar-menu/toggle.cjs');
+var toggle = require('./navbar/navbar-menu/toggle.cjs');
 var navbarItem = require('./navbar/navbar-item.cjs');
 var useNavbar = require('./navbar/use-navbar.cjs');
 var navbarContext = require('./navbar/navbar-context.cjs');
@@ -79,11 +79,13 @@ var sidebarHeader = require('./sidebar/sidebar-header.cjs');
 var tooltip = require('./tooltip/tooltip.cjs');
 var phoneNumberField = require('./phone-number-field/phone-number-field.cjs');
 var BasePhoneInput = require('react-phone-number-input');
-var sonner = require('sonner');
+var infobox = require('./infobox/infobox.cjs');
+var radio = require('./radio-group/radio.cjs');
 var avatarContext = require('./avatar/avatar-context.cjs');
+var avatar = require('./avatar/avatar.cjs');
 var avatarGroup = require('./avatar/avatar-group.cjs');
 var avatarGroupContext = require('./avatar/avatar-group-context.cjs');
-var avatar = require('./avatar/avatar.cjs');
+var sonner = require('sonner');
 
 
 
@@ -95,7 +97,7 @@ exports.Ripple = ripple.Ripple;
 exports.useRipple = useRipple.useRipple;
 exports.Spinner = spinner.Spinner;
 exports.useSpinner = useSpinner.useSpinner;
-exports.Toggle = toggle.Toggle;
+exports.Toggle = toggle$1.Toggle;
 exports.SkipNavLink = skipNavLink.SkipNavLink;
 exports.Input = input.Input;
 exports.TextField = textField.TextField;
@@ -124,10 +126,10 @@ exports.Calendar = calendar.Calendar;
 exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
 exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
 exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
-exports.getEraFormat = utils.getEraFormat;
-exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
-exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
-exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
+exports.getEraFormat = utils$1.getEraFormat;
+exports.useGenerateLocalizedMonths = utils$1.useGenerateLocalizedMonths;
+exports.useGenerateLocalizedYears = utils$1.useGenerateLocalizedYears;
+exports.useLocalizedMonthYear = utils$1.useLocalizedMonthYear;
 Object.defineProperty(exports, "CalendarDate", {
 	enumerable: true,
 	get: function () { return date.CalendarDate; }
@@ -162,13 +164,13 @@ exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGrou
 exports.Pagination = pagination.Pagination;
 exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
-exports.PaginationItemType = usePagination.PaginationItemType;
-exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
-exports.usePagination = usePagination$1.usePagination;
+exports.PaginationItemType = usePagination$1.PaginationItemType;
+exports.CURSOR_TRANSITION_TIMEOUT = usePagination.CURSOR_TRANSITION_TIMEOUT;
+exports.usePagination = usePagination.usePagination;
 exports.FileDropzone = fileDropzone.FileDropzone;
 exports.FileInfo = fileInfo.FileInfo;
-exports.formatBytes = utils$1.formatBytes;
-exports.formatErrorMessage = utils$1.formatErrorMessage;
+exports.formatBytes = utils.formatBytes;
+exports.formatErrorMessage = utils.formatErrorMessage;
 exports.NumberField = numberField.NumberField;
 exports.Modal = modal.Modal;
 exports.ModalContent = modalContent.ModalContent;
@@ -183,7 +185,7 @@ exports.NavbarBrand = navbarBrand.NavbarBrand;
 exports.NavbarContent = navbarContent.NavbarContent;
 exports.NavbarMenu = menu$1.NavbarMenu;
 exports.NavbarMenuItem = item.NavbarMenuItem;
-exports.NavbarMenuToggle = toggle$1.NavbarMenuToggle;
+exports.NavbarMenuToggle = toggle.NavbarMenuToggle;
 exports.NavbarItem = navbarItem.NavbarItem;
 exports.useNavbar = useNavbar.useNavbar;
 exports.NavbarProvider = navbarContext.NavbarProvider;
@@ -232,15 +234,18 @@ Object.defineProperty(exports, "parsePhoneNumber", {
 	enumerable: true,
 	get: function () { return BasePhoneInput.parsePhoneNumber; }
 });
-Object.defineProperty(exports, "toast", {
-	enumerable: true,
-	get: function () { return sonner.toast; }
-});
+exports.Infobox = infobox.Infobox;
+exports.Radio = radio.Radio;
+exports.RadioGroup = radio.RadioGroup;
 exports.AvatarContext = avatarContext.AvatarContext;
 exports.useAvatarContext = avatarContext.useAvatarContext;
-exports.AvatarGroup = avatarGroup.AvatarGroup;
-exports.AvatarGroupProvider = avatarGroupContext.AvatarGroupProvider;
-exports.useAvatarGroup = avatarGroupContext.useAvatarGroup;
 exports.AvatarFallback = avatar.AvatarFallback;
 exports.AvatarImage = avatar.AvatarImage;
 exports.AvatarRoot = avatar.AvatarRoot;
+exports.AvatarGroup = avatarGroup.AvatarGroup;
+exports.AvatarGroupProvider = avatarGroupContext.AvatarGroupProvider;
+exports.useAvatarGroup = avatarGroupContext.useAvatarGroup;
+Object.defineProperty(exports, "toast", {
+	enumerable: true,
+	get: function () { return sonner.toast; }
+});

package/dist/cjs/infobox/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var infobox = require('./infobox.cjs');
+
+
+
+exports.Infobox = infobox.Infobox;

package/dist/cjs/infobox/infobox.cjs

@@ -0,0 +1,39 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var useInfobox = require('./use-infobox.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 circleCheck = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-check.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');
+
+const Infobox = (props) => {
+  const { Component, children, slots, classNames, icon, variant } = useInfobox.useInfobox(props);
+  const displayedIcon = $670gB$react.useMemo(() => {
+    if (icon) {
+      return icon;
+    }
+    if (icon === null) {
+      return null;
+    }
+    const iconClassName = slots.icon({ className: classNames?.icon });
+    switch (variant) {
+      case "error":
+        return /* @__PURE__ */ jsxRuntime.jsx(circleAlert.default, { className: iconClassName });
+      case "success":
+        return /* @__PURE__ */ jsxRuntime.jsx(circleCheck.default, { className: iconClassName });
+      case "warning":
+      case "info":
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(info.default, { className: iconClassName });
+    }
+  }, [icon, variant, slots, classNames?.icon]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Component, { className: slots.base({ className: classNames?.base }), children: [
+    displayedIcon,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: slots.wrapper({ className: classNames?.wrapper }), children })
+  ] });
+};
+
+exports.Infobox = Infobox;

package/dist/cjs/infobox/use-infobox.cjs

@@ -0,0 +1,32 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+var useDeepCompare = require('use-deep-compare');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+
+function useInfobox(originalProps) {
+  const [_props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.infoboxStyles.variantKeys
+  );
+  const { children, as, classNames, icon } = _props;
+  const Component = $670gB$react.useMemo(() => as || "div", [as]);
+  const slots = useDeepCompare.useDeepCompareMemo(
+    () => ({
+      ...ouiTheme.infoboxStyles({ ...variantProps })
+    }),
+    [variantProps, ouiTheme.infoboxStyles]
+  );
+  return {
+    Component,
+    children,
+    slots,
+    classNames,
+    icon,
+    variant: variantProps.variant
+  };
+}
+
+exports.useInfobox = useInfobox;

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-check.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: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+];
+const CircleCheck = createLucideIcon.default("CircleCheck", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = CircleCheck;

package/dist/cjs/pagination/index.cjs

@@ -4,14 +4,14 @@
 var pagination = require('./pagination.cjs');
 var paginationCursor = require('./pagination-cursor.cjs');
 var paginationItem = require('./pagination-item.cjs');
-var usePagination = require('./hooks/use-pagination.cjs');
-var usePagination$1 = require('./use-pagination.cjs');
+var usePagination$1 = require('./hooks/use-pagination.cjs');
+var usePagination = require('./use-pagination.cjs');
 
 
 
 exports.Pagination = pagination.Pagination;
 exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
-exports.PaginationItemType = usePagination.PaginationItemType;
-exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
-exports.usePagination = usePagination$1.usePagination;
+exports.PaginationItemType = usePagination$1.PaginationItemType;
+exports.CURSOR_TRANSITION_TIMEOUT = usePagination.CURSOR_TRANSITION_TIMEOUT;
+exports.usePagination = usePagination.usePagination;

package/dist/cjs/radio-group/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+'use strict';
+
+var radio = require('./radio.cjs');
+
+
+
+exports.Radio = radio.Radio;
+exports.RadioGroup = radio.RadioGroup;

package/dist/cjs/radio-group/radio-group-variant-context.cjs

@@ -0,0 +1,15 @@
+"use strict";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [RadioGroupVariantContext, useRadioGroupVariantContext] = context.createContext({
+  name: "RadioGroupVariantContext",
+  strict: false,
+  defaultValue: {
+    size: "md"
+  }
+});
+
+exports.RadioGroupVariantContext = RadioGroupVariantContext;
+exports.useRadioGroupVariantContext = useRadioGroupVariantContext;

package/dist/cjs/radio-group/radio.cjs

@@ -0,0 +1,99 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
+var children = require('../system/react-utils/children.cjs');
+var utils = require('../system/utils.cjs');
+var radioGroupVariantContext = require('./radio-group-variant-context.cjs');
+
+const Radio = ({
+  classNames,
+  className,
+  children: children$1,
+  description,
+  ...originalProps
+}) => {
+  const [props, variants] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.radioStyles.variantKeys
+  );
+  const groupContext = radioGroupVariantContext.useRadioGroupVariantContext();
+  const styles = ouiTheme.radioStyles({ size: groupContext?.size, ...variants });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Radio,
+    {
+      ...props,
+      isDisabled: variants.isDisabled,
+      className: reactAriaComponents.composeRenderProps(
+        className ?? classNames?.base,
+        (className2, renderProps) => styles.base({ ...renderProps, className: className2 })
+      ),
+      children: (renderProps) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: styles.circle({
+                ...renderProps,
+                className: classNames?.circle
+              }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: styles.icon({
+                    ...renderProps,
+                    className: classNames?.icon
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label({ className: classNames?.label }), children: children.renderChildren(renderProps, children$1) }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            field.Description,
+            {
+              size: groupContext?.size,
+              className: styles.description({
+                className: classNames?.description
+              }),
+              children: description
+            }
+          )
+        ] });
+      }
+    }
+  );
+};
+const RadioGroup = ({
+  label,
+  description,
+  errorMessage,
+  classNames,
+  size,
+  ...props
+}) => {
+  const context = { size };
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[radioGroupVariantContext.RadioGroupVariantContext, context]], children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.RadioGroup,
+    {
+      ...props,
+      className: reactAriaComponents.composeRenderProps(
+        props.className ?? classNames?.base,
+        (className, renderProps) => ouiTheme.radioGroupStyles({ ...renderProps, size, className })
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size, className: classNames?.label, children: label }),
+        props.children,
+        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size, classNames: classNames?.error, children: errorMessage })
+      ]
+    }
+  ) });
+};
+
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;

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

@@ -22,6 +22,7 @@ function SearchField(originalProps) {
       searchIcon,
       inputProps,
       classNames,
+      clearIcon,
       ...props
     },
     variantProps
@@ -68,7 +69,7 @@ function SearchField(originalProps) {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          clearIcon !== null && /* @__PURE__ */ jsxRuntime.jsx(
             button.Button,
             {
               isIconOnly: true,
@@ -76,8 +77,10 @@ function SearchField(originalProps) {
               variant: "clear",
               color: "sub",
               size: variantProps.size,
-              className: styles.clearButton({ className: classNames?.clearButton }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(x.default, { "aria-hidden": true })
+              className: styles.clearButton({
+                className: classNames?.clearButton
+              }),
+              children: clearIcon ?? /* @__PURE__ */ jsxRuntime.jsx(x.default, { "aria-hidden": true })
             }
           )
         ] }),

package/dist/esm/accordion/accordion.js

@@ -2,7 +2,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { Disclosure, composeRenderProps, DisclosureGroup, DisclosureStateContext, Heading, Button, DisclosurePanel } from 'react-aria-components';
+import { Disclosure, composeRenderProps, DisclosureGroup, DisclosurePanel, DisclosureStateContext, Heading, Button } from 'react-aria-components';
 import { cn, accordionStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
 import { renderChildren } from '../system/react-utils/children.js';
 import { forwardRef, mapPropsVariants } from '../system/utils.js';

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

@@ -1,5 +1,5 @@
 "use strict";
-import { useMemo, useCallback, cloneElement, isValidElement } from 'react';
+import { useMemo, useCallback, isValidElement, cloneElement } from 'react';
 import { mergeProps } from '@react-aria/utils';
 import { useLocalizedStringFormatter, useFocusRing, usePress } from 'react-aria';
 import { useDeepCompareMemo } from 'use-deep-compare';

package/dist/esm/breadcrumbs/breadcrumbs.js

@@ -3,12 +3,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { useLocalizedStringFormatter } from 'react-aria';
-import { Provider, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, MenuTrigger } from 'react-aria-components';
+import { Breadcrumb as Breadcrumb$1, Provider, Breadcrumbs as Breadcrumbs$1, MenuTrigger } from 'react-aria-components';
 import { breadcrumbsStyles, composeRenderProps } from '@opengovsg/oui-theme';
 import { Link } from '../link/link.js';
 import { Menu, MenuItem } from '../menu/menu.js';
 import { getValidChildren } from '../system/react-utils/children.js';
-import { BreadcrumbsStyleContext, useBreadcrumbsStyleContext } from './context.js';
+import { useBreadcrumbsStyleContext, BreadcrumbsStyleContext } from './context.js';
 import { i18nStrings } from './i18n.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';
 

package/dist/esm/calendar/calendar.js

@@ -3,7 +3,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useContext } from 'react';
 import { CalendarDate, today, getLocalTimeZone } from '@internationalized/date';
-import { Calendar as Calendar$1, composeRenderProps, Provider, CalendarGrid, CalendarGridBody, CalendarCell, Text, CalendarStateContext } from 'react-aria-components';
+import { Calendar as Calendar$1, Provider, CalendarGrid, CalendarGridBody, CalendarCell, composeRenderProps, Text, CalendarStateContext } from 'react-aria-components';
 import { useDeepCompareMemo } from 'use-deep-compare';
 import { calendarStyles, dataAttr, cn } from '@opengovsg/oui-theme';
 import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';

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

@@ -2,7 +2,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { useContextProps, ListBoxItem, composeRenderProps, Text } from 'react-aria-components';
+import { useContextProps, ListBoxItem, Text, composeRenderProps } from 'react-aria-components';
 import { listBoxItemStyles } from '@opengovsg/oui-theme';
 import { forwardRef, mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';

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

@@ -4,7 +4,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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 { comboBoxStyles, composeRenderProps, comboBoxClearButtonStyles, composeTailwindRenderProps, listBoxItemStyles, cn } 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';

package/dist/esm/index.js

@@ -77,8 +77,10 @@ export { SidebarHeader } from './sidebar/sidebar-header.js';
 export { Tooltip, TooltipTrigger } from './tooltip/tooltip.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 { Infobox } from './infobox/infobox.js';
+export { Radio, RadioGroup } from './radio-group/radio.js';
 export { AvatarContext, useAvatarContext } from './avatar/avatar-context.js';
+export { AvatarFallback, AvatarImage, AvatarRoot } from './avatar/avatar.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 { toast } from 'sonner';

package/dist/esm/infobox/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Infobox } from './infobox.js';

package/dist/esm/infobox/infobox.js

@@ -0,0 +1,37 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useInfobox } from './use-infobox.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 CircleCheck from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-check.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';
+
+const Infobox = (props) => {
+  const { Component, children, slots, classNames, icon, variant } = useInfobox(props);
+  const displayedIcon = useMemo(() => {
+    if (icon) {
+      return icon;
+    }
+    if (icon === null) {
+      return null;
+    }
+    const iconClassName = slots.icon({ className: classNames?.icon });
+    switch (variant) {
+      case "error":
+        return /* @__PURE__ */ jsx(CircleAlert, { className: iconClassName });
+      case "success":
+        return /* @__PURE__ */ jsx(CircleCheck, { className: iconClassName });
+      case "warning":
+      case "info":
+      default:
+        return /* @__PURE__ */ jsx(Info, { className: iconClassName });
+    }
+  }, [icon, variant, slots, classNames?.icon]);
+  return /* @__PURE__ */ jsxs(Component, { className: slots.base({ className: classNames?.base }), children: [
+    displayedIcon,
+    /* @__PURE__ */ jsx("div", { className: slots.wrapper({ className: classNames?.wrapper }), children })
+  ] });
+};
+
+export { Infobox };

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

@@ -0,0 +1,30 @@
+"use strict";
+import { useMemo } from 'react';
+import { useDeepCompareMemo } from 'use-deep-compare';
+import { infoboxStyles } from '@opengovsg/oui-theme';
+import { mapPropsVariants } from '../system/utils.js';
+
+function useInfobox(originalProps) {
+  const [_props, variantProps] = mapPropsVariants(
+    originalProps,
+    infoboxStyles.variantKeys
+  );
+  const { children, as, classNames, icon } = _props;
+  const Component = useMemo(() => as || "div", [as]);
+  const slots = useDeepCompareMemo(
+    () => ({
+      ...infoboxStyles({ ...variantProps })
+    }),
+    [variantProps, infoboxStyles]
+  );
+  return {
+    Component,
+    children,
+    slots,
+    classNames,
+    icon,
+    variant: variantProps.variant
+  };
+}
+
+export { useInfobox };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-check.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 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+];
+const CircleCheck = createLucideIcon("CircleCheck", __iconNode);
+
+export { __iconNode, CircleCheck as default };

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

@@ -2,7 +2,7 @@
 "use client";
 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 { numberFieldStyles, fieldBorderStyles, cn, composeTailwindRenderProps, dataAttr } 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';

package/dist/esm/pagination/use-pagination-item.js

@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import { useFocusRing } from '@react-aria/focus';
 import { usePress, useHover } from '@react-aria/interactions';
-import { useRouter, mergeProps, chain, shouldClientNavigate } from '@react-aria/utils';
+import { useRouter, chain, shouldClientNavigate, mergeProps } from '@react-aria/utils';
 import { cn, dataAttr } from '@opengovsg/oui-theme';
 import { useDomRef } from '../system/react-utils/refs.js';
 import { filterDOMProps } from '../system/react-utils/filter-dom-props.js';

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

@@ -1,12 +1,12 @@
 "use strict";
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo, useState, useRef, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useCallback, useState, useRef } from 'react';
 import { TextField, Provider } from 'react-aria-components';
 import BasePhoneInput, { getCountryCallingCode } from 'react-phone-number-input';
 import flags from 'react-phone-number-input/flags';
 import NonInternationalBasePhoneInput from 'react-phone-number-input/input';
-import { phoneNumberFieldStyles, cn } from '@opengovsg/oui-theme';
+import { cn, phoneNumberFieldStyles } from '@opengovsg/oui-theme';
 import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { useControllableState } from '../hooks/use-controllable-state.js';
 import { Input } from '../input/input.js';
@@ -15,7 +15,7 @@ import { SelectItem } from '../select/select-item.js';
 import { useLocalizedStringFormatter } from '../system/l10n.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { MOBILE_EXAMPLES } from './constants.js';
-import { PhoneInputContext, usePhoneInputContext } from './context.js';
+import { usePhoneInputContext, PhoneInputContext } from './context.js';
 import { i18nStrings } from './i18n.js';
 
 const PhoneInput = ({

package/dist/esm/popover/popover.js

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useSlottedContext, PopoverContext, Popover as Popover$1, composeRenderProps, OverlayArrow } from 'react-aria-components';
+import { useSlottedContext, PopoverContext, Popover as Popover$1, OverlayArrow, composeRenderProps } from 'react-aria-components';
 import { popoverArrowStyles, popoverStyles } from '@opengovsg/oui-theme';
 
 const Popover = ({

package/dist/esm/radio-group/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Radio, RadioGroup } from './radio.js';

package/dist/esm/radio-group/radio-group-variant-context.js

@@ -0,0 +1,12 @@
+"use strict";
+import { createContext } from '../system/react-utils/context.js';
+
+const [RadioGroupVariantContext, useRadioGroupVariantContext] = createContext({
+  name: "RadioGroupVariantContext",
+  strict: false,
+  defaultValue: {
+    size: "md"
+  }
+});
+
+export { RadioGroupVariantContext, useRadioGroupVariantContext };

package/dist/esm/radio-group/radio.js

@@ -0,0 +1,96 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Radio as Radio$1, composeRenderProps, Provider, RadioGroup as RadioGroup$1 } from 'react-aria-components';
+import { radioStyles, radioGroupStyles } from '@opengovsg/oui-theme';
+import { Description, Label, FieldError } from '../field/field.js';
+import { renderChildren } from '../system/react-utils/children.js';
+import { mapPropsVariants } from '../system/utils.js';
+import { useRadioGroupVariantContext, RadioGroupVariantContext } from './radio-group-variant-context.js';
+
+const Radio = ({
+  classNames,
+  className,
+  children,
+  description,
+  ...originalProps
+}) => {
+  const [props, variants] = mapPropsVariants(
+    originalProps,
+    radioStyles.variantKeys
+  );
+  const groupContext = useRadioGroupVariantContext();
+  const styles = radioStyles({ size: groupContext?.size, ...variants });
+  return /* @__PURE__ */ jsx(
+    Radio$1,
+    {
+      ...props,
+      isDisabled: variants.isDisabled,
+      className: composeRenderProps(
+        className ?? classNames?.base,
+        (className2, renderProps) => styles.base({ ...renderProps, className: className2 })
+      ),
+      children: (renderProps) => {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: styles.circle({
+                ...renderProps,
+                className: classNames?.circle
+              }),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: styles.icon({
+                    ...renderProps,
+                    className: classNames?.icon
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles.label({ className: classNames?.label }), children: renderChildren(renderProps, children) }),
+          description && /* @__PURE__ */ jsx(
+            Description,
+            {
+              size: groupContext?.size,
+              className: styles.description({
+                className: classNames?.description
+              }),
+              children: description
+            }
+          )
+        ] });
+      }
+    }
+  );
+};
+const RadioGroup = ({
+  label,
+  description,
+  errorMessage,
+  classNames,
+  size,
+  ...props
+}) => {
+  const context = { size };
+  return /* @__PURE__ */ jsx(Provider, { values: [[RadioGroupVariantContext, context]], children: /* @__PURE__ */ jsxs(
+    RadioGroup$1,
+    {
+      ...props,
+      className: composeRenderProps(
+        props.className ?? classNames?.base,
+        (className, renderProps) => radioGroupStyles({ ...renderProps, size, className })
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx(Label, { size, className: classNames?.label, children: label }),
+        props.children,
+        description && /* @__PURE__ */ jsx(Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsx(FieldError, { size, classNames: classNames?.error, children: errorMessage })
+      ]
+    }
+  ) });
+};
+
+export { Radio, RadioGroup };

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

@@ -20,6 +20,7 @@ function SearchField(originalProps) {
       searchIcon,
       inputProps,
       classNames,
+      clearIcon,
       ...props
     },
     variantProps
@@ -66,7 +67,7 @@ function SearchField(originalProps) {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsx(
+          clearIcon !== null && /* @__PURE__ */ jsx(
             Button,
             {
               isIconOnly: true,
@@ -74,8 +75,10 @@ function SearchField(originalProps) {
               variant: "clear",
               color: "sub",
               size: variantProps.size,
-              className: styles.clearButton({ className: classNames?.clearButton }),
-              children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+              className: styles.clearButton({
+                className: classNames?.clearButton
+              }),
+              children: clearIcon ?? /* @__PURE__ */ jsx(X, { "aria-hidden": true })
             }
           )
         ] }),

package/dist/esm/tabs/tabs.js

@@ -2,8 +2,8 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useContextProps, TabList as TabList$1, composeRenderProps, Tab as Tab$1, TabPanels as TabPanels$1, Provider, Tabs as Tabs$1, TabPanel as TabPanel$1 } from 'react-aria-components';
-import { tabListStyles, tabStyles, tabsStyles, tabPanelStyles } from '@opengovsg/oui-theme';
+import { useContextProps, TabList as TabList$1, composeRenderProps, Tab as Tab$1, TabPanels as TabPanels$1, TabPanel as TabPanel$1, Provider, Tabs as Tabs$1 } from 'react-aria-components';
+import { tabListStyles, tabStyles, tabPanelStyles, tabsStyles } from '@opengovsg/oui-theme';
 import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
 import { createContext } from '../system/react-utils/context.js';
 

package/dist/types/index.d.mts

@@ -39,4 +39,6 @@ export * from "./breadcrumbs";
 export * from "./sidebar";
 export * from "./tooltip";
 export * from "./phone-number-field";
+export * from "./infobox";
+export * from "./radio-group";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts

@@ -39,4 +39,6 @@ export * from "./breadcrumbs";
 export * from "./sidebar";
 export * from "./tooltip";
 export * from "./phone-number-field";
+export * from "./infobox";
+export * from "./radio-group";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,sBAAsB,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA"}

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

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

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

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

package/dist/types/infobox/infobox.d.ts

@@ -0,0 +1,5 @@
+import type { UseInfoboxProps } from "./use-infobox";
+export interface InfoboxProps extends UseInfoboxProps {
+}
+export declare const Infobox: (props: InfoboxProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=infobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"infobox.d.ts","sourceRoot":"","sources":["../../../src/infobox/infobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAIpD,MAAM,WAAW,YAAa,SAAQ,eAAe;CAAG;AAExD,eAAO,MAAM,OAAO,UAAW,YAAY,4CAsC1C,CAAA"}

package/dist/types/infobox/use-infobox.d.ts

@@ -0,0 +1,54 @@
+import type { InfoboxSlots, InfoboxVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { HtmlUiProps } from "../system/types";
+export interface UseInfoboxProps extends HtmlUiProps, InfoboxVariantProps {
+    /**
+     * Icon to show on the left of the infobox.
+     * If not specified, a default icon will be used according to the infobox variant.
+     * Pass `null` to explicitly hide the icon.
+     */
+    icon?: React.ReactNode | null;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Infobox classNames={{
+     *    base: "base-classes",
+     *    icon: "icon-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<InfoboxSlots>;
+}
+export declare function useInfobox(originalProps: UseInfoboxProps): {
+    Component: import("../system/types").As<any>;
+    children: import("react").ReactNode;
+    slots: {
+        base: ((slotProps?: ({
+            size?: "md" | "sm" | undefined;
+            variant?: "error" | "warning" | "success" | "info" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
+            size?: "md" | "sm" | undefined;
+            variant?: "error" | "warning" | "success" | "info" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
+        icon: ((slotProps?: ({
+            size?: "md" | "sm" | undefined;
+            variant?: "error" | "warning" | "success" | "info" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
+            size?: "md" | "sm" | undefined;
+            variant?: "error" | "warning" | "success" | "info" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
+        wrapper: ((slotProps?: ({
+            size?: "md" | "sm" | undefined;
+            variant?: "error" | "warning" | "success" | "info" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
+            size?: "md" | "sm" | undefined;
+            variant?: "error" | "warning" | "success" | "info" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
+    };
+    classNames: SlotsToClasses<"base" | "wrapper" | "icon"> | undefined;
+    icon: import("react").ReactNode;
+    variant: "error" | "warning" | "success" | "info" | undefined;
+};
+//# sourceMappingURL=use-infobox.d.ts.map

package/dist/types/infobox/use-infobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infobox.d.ts","sourceRoot":"","sources":["../../../src/infobox/use-infobox.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,mBAAmB;IACvE;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAC7B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;CAC1C;AAED,wBAAgB,UAAU,CAAC,aAAa,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBxD"}

package/dist/types/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export { Radio, RadioGroup } from "./radio";
+export type { RadioGroupProps, RadioProps } from "./radio";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/radio-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAE3C,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/types/radio-group/radio-group-variant-context.d.ts

@@ -0,0 +1,6 @@
+import type { RadioGroupVariantProps } from "@opengovsg/oui-theme";
+export interface RadioGroupVariantContextValue extends RadioGroupVariantProps {
+    size: RadioGroupVariantProps["size"];
+}
+export declare const RadioGroupVariantContext: import("react").Context<RadioGroupVariantContextValue | undefined>, useRadioGroupVariantContext: () => RadioGroupVariantContextValue | undefined;
+//# sourceMappingURL=radio-group-variant-context.d.ts.map

package/dist/types/radio-group/radio-group-variant-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-variant-context.d.ts","sourceRoot":"","sources":["../../../src/radio-group/radio-group-variant-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;AAIlE,MAAM,WAAW,6BAA8B,SAAQ,sBAAsB;IAC3E,IAAI,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAA;CACrC;AAED,eAAO,MAAO,wBAAwB,sEAAE,2BAA2B,iDAO/D,CAAA"}

package/dist/types/radio-group/radio.d.ts

@@ -0,0 +1,39 @@
+import type { RadioGroupProps as AriaRadioGroupProps, RadioProps as AriaRadioProps, ValidationResult } from "react-aria-components";
+import type { FieldErrorSlots, RadioGroupVariantProps, RadioSlots, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
+import { radioStyles } from "@opengovsg/oui-theme";
+export interface RadioProps extends AriaRadioProps, VariantProps<typeof radioStyles> {
+    classNames?: SlotsToClasses<RadioSlots>;
+    description?: string;
+}
+export declare const Radio: ({ classNames, className, children, description, ...originalProps }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, "children">, RadioGroupVariantProps {
+    /**
+     * Label for the radio group
+     */
+    label?: string;
+    /**
+     * Radio components
+     */
+    children?: React.ReactNode;
+    /**
+     * Description text for the radio group
+     */
+    description?: string;
+    /**
+     * Error message - can be string or function for validation
+     */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /**
+     * Optional classNames for different parts of the group
+     */
+    classNames?: SlotsToClasses<"label" | "base" | "description"> & {
+        error?: SlotsToClasses<FieldErrorSlots>;
+    };
+    /**
+     * Size of all Radio children
+     * Will be propagated via context
+     */
+    size?: RadioProps["size"];
+}
+export declare const RadioGroup: ({ label, description, errorMessage, classNames, size, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radio.d.ts.map

package/dist/types/radio-group/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio-group/radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,IAAI,mBAAmB,EACtC,UAAU,IAAI,cAAc,EAC5B,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAQ9B,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,UAAU,EACV,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAoB,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAUpE,MAAM,WAAW,UACf,SAAQ,cAAc,EACpB,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAA;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,KAAK,uEAMf,UAAU,4CAqDZ,CAAA;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,EAC3C,sBAAsB;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAElE;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG;QAC9D,KAAK,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;KACxC,CAAA;IAED;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;CAC1B;AAED,eAAO,MAAM,UAAU,qEAOpB,eAAe,4CA+BjB,CAAA"}

package/dist/types/search-field/search-field.d.ts

@@ -10,6 +10,11 @@ export interface SearchFieldProps extends AriaSearchFieldProps, SearchFieldVaria
     searchIcon?: React.ReactNode | null;
     inputProps?: Partial<InputProps>;
     classNames?: SlotsToClasses<SearchFieldSlots>;
+    /**
+     * The icon to show in the clear button. Defaults to an `XIcon`. Set to `null` to hide the clear button.
+     * @example Can also be used to provide a spinner icon while the search is loading.
+     */
+    clearIcon?: React.ReactNode;
 }
 export declare function SearchField(originalProps: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=search-field.d.ts.map

package/dist/types/search-field/search-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,uBAAuB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EACT,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD;yCACqC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CAC9C;AAED,wBAAgB,WAAW,CAAC,aAAa,EAAE,gBAAgB,2CAwE1D"}
+{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,uBAAuB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EACT,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD;yCACqC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAE7C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,wBAAgB,WAAW,CAAC,aAAa,EAAE,gBAAgB,2CA6E1D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/oui",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -50,9 +50,9 @@
     "storybook": "10.1.10",
     "tsx": "^4.21.0",
     "typescript": "5.7.3",
-    "@oui/chromatic": "0.0.0",
-    "@opengovsg/oui-theme": "0.0.48",
+    "@opengovsg/oui-theme": "0.0.50",
     "@oui/eslint-config": "0.0.0",
+    "@oui/chromatic": "0.0.0",
     "@oui/prettier-config": "0.0.0",
     "@oui/typescript-config": "0.0.0"
   },
@@ -90,7 +90,7 @@
     "motion": ">=11.12.0 || >=12.0.0-alpha.1",
     "react": ">= 18",
     "react-aria-components": "^1.14.0",
-    "@opengovsg/oui-theme": "0.0.48"
+    "@opengovsg/oui-theme": "0.0.50"
   },
   "scripts": {
     "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",