@opengovsg/oui 0.0.47 → 0.0.49

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/range-calendar/range-calendar.cjs

@@ -8,12 +8,12 @@ var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var useDeepCompare = require('use-deep-compare');
 var ouiTheme = require('@opengovsg/oui-theme');
-var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
 var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
 var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
 var calendarHeader = require('../calendar/calendar-header.cjs');
 var utils = require('../system/utils.cjs');
+var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 
 const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
   const [props, variantProps] = utils.mapPropsVariants(

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

@@ -5,13 +5,13 @@ 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');
+var button = require('../button/button.cjs');
 
 function SearchField(originalProps) {
   const [

package/dist/cjs/select/select.cjs

@@ -7,7 +7,6 @@ var $670gB$react = require('react');
 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 popover = require('../popover/popover.cjs');
 var sizing = require('../system/react-utils/sizing.cjs');
@@ -15,6 +14,7 @@ var utils = require('../system/utils.cjs');
 var i18n = require('./i18n.cjs');
 var selectVariantContext = require('./select-variant-context.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 button = require('../button/button.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

package/dist/cjs/sidebar/sidebar-list.cjs

@@ -8,11 +8,11 @@ var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var reactStately = require('react-stately');
 var ouiTheme = require('@opengovsg/oui-theme');
-var button = require('../button/button.cjs');
 var utils = require('../system/utils.cjs');
 var context = require('./context.cjs');
 var i18n = require('./i18n.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 button = require('../button/button.cjs');
 
 const SidebarListSection = ({
   onlyCaretToggle,

package/dist/cjs/tabs/index.cjs

@@ -8,6 +8,7 @@ var tabs = require('./tabs.cjs');
 exports.Tab = tabs.Tab;
 exports.TabList = tabs.TabList;
 exports.TabPanel = tabs.TabPanel;
+exports.TabPanels = tabs.TabPanels;
 exports.Tabs = tabs.Tabs;
 exports.TabsVariantContext = tabs.TabsVariantContext;
 exports.useTabsVariantContext = tabs.useTabsVariantContext;

package/dist/cjs/tabs/tabs.cjs

@@ -88,10 +88,12 @@ function TabPanel(props) {
     }
   );
 }
+const TabPanels = reactAriaComponents.TabPanels;
 
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
 exports.Tabs = Tabs;
 exports.TabsVariantContext = TabsVariantContext;
 exports.useTabsVariantContext = useTabsVariantContext;

package/dist/cjs/tag-field/tag-field-list.cjs

@@ -12,18 +12,18 @@ var tagFieldStateContext = require('./tag-field-state-context.cjs');
 const TagFieldListContext = $670gB$react.createContext(null);
 const TagFieldListInner = (props, ref) => {
   [props, ref] = reactAriaComponents.useContextProps(props, ref, TagFieldListContext);
-  const { items, getItemProps, highlightedIndex } = $670gB$react.useContext(tagFieldStateContext.TagFieldStateContext);
+  const { items, getItemProps, highlightedIndex, itemToKey } = $670gB$react.useContext(tagFieldStateContext.TagFieldStateContext);
   const { slot, rowVirtualizer, itemClassNames, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { slot: slot ?? void 0, ref, ...rest, children: props.children !== void 0 && typeof props.children !== "function" ? props.children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { slot: slot ?? void 0, ref, ...rest, children: props.children !== void 0 && typeof props.children !== "function" ? props.children : rowVirtualizer ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
         "aria-hidden": true,
-        style: { height: rowVirtualizer?.getTotalSize() }
+        style: { height: rowVirtualizer.getTotalSize() }
       },
       "total-size"
     ),
-    rowVirtualizer?.getVirtualItems().map((virtualRow) => {
+    rowVirtualizer.getVirtualItems().map((virtualRow) => {
       const item = items[virtualRow.index];
       const itemProps = getItemProps({
         item,
@@ -55,7 +55,27 @@ const TagFieldListInner = (props, ref) => {
         }
       );
     })
-  ] }) });
+  ] }) : items.map((item, index) => {
+    const itemProps = getItemProps({ item, index });
+    const key = itemToKey(item);
+    const childProps = {
+      item,
+      isHighlighted: highlightedIndex === index,
+      key,
+      classNames: itemClassNames
+    };
+    if (typeof props.children === "function") {
+      return props.children({ ...childProps, itemProps });
+    }
+    return /* @__PURE__ */ $670gB$react.createElement(
+      tagFieldItem.TagFieldItem,
+      {
+        ...childProps,
+        ...itemProps,
+        key
+      }
+    );
+  }) });
 };
 const TagFieldList = utils.forwardRefGeneric(TagFieldListInner);
 

package/dist/cjs/tag-field/use-tag-field.cjs

@@ -8,6 +8,10 @@ var downshift = require('downshift');
 var lodashEs = require('lodash-es');
 var reactAria = require('react-aria');
 
+function useOptionalVirtualizer(isVirtualized, options) {
+  const virtualizer = reactVirtual.useVirtualizer(options);
+  return isVirtualized ? virtualizer : null;
+}
 function useTagField(props, state) {
   let { buttonRef } = props;
   const {
@@ -21,7 +25,8 @@ function useTagField(props, state) {
     itemToKey,
     itemToText,
     label,
-    virtualRowHeight = 40
+    virtualRowHeight = 40,
+    isVirtualized = true
   } = props;
   const backupBtnRef = $670gB$react.useRef(null);
   buttonRef = buttonRef ?? backupBtnRef;
@@ -51,7 +56,7 @@ function useTagField(props, state) {
   const disabledKeysSet = $670gB$react.useMemo(() => {
     return new Set(disabledKeys);
   }, [disabledKeys]);
-  const rowVirtualizer = reactVirtual.useVirtualizer({
+  const rowVirtualizer = useOptionalVirtualizer(isVirtualized, {
     count: items.length,
     getScrollElement: () => listBoxRef.current,
     estimateSize: () => virtualRowHeight,
@@ -78,11 +83,17 @@ function useTagField(props, state) {
     },
     isItemDisabled: (item) => isDisabled || isReadOnly || disabledKeysSet.has(itemToKey(item)),
     items,
-    scrollIntoView: () => {
+    // Noop for scrollIntoView if virtualized, as we'll handle it in onHighlightedIndexChange
+    scrollIntoView: (node) => {
+      if (!isVirtualized) {
+        node.scrollIntoView({ block: "nearest" });
+      }
     },
     onHighlightedIndexChange: ({ highlightedIndex: highlightedIndex2, type }) => {
       if (type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex2 >= 0) {
-        rowVirtualizer.scrollToIndex(highlightedIndex2);
+        if (rowVirtualizer) {
+          rowVirtualizer.scrollToIndex(highlightedIndex2);
+        }
       }
     },
     defaultHighlightedIndex: 0,

package/dist/cjs/tooltip/tooltip.cjs

@@ -5,10 +5,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var children = require('../system/react-utils/children.cjs');
 var utils = require('../system/utils.cjs');
 
 function Tooltip(originalProps) {
-  const [{ children, showArrow = true, classNames, ...props }, variantProps] = utils.mapPropsVariants(originalProps, ouiTheme.tooltipStyles.variantKeys);
+  const [{ children: children$1, showArrow = true, classNames, ...props }, variantProps] = utils.mapPropsVariants(originalProps, ouiTheme.tooltipStyles.variantKeys);
   const styles = ouiTheme.tooltipStyles(variantProps);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Tooltip,
@@ -31,17 +32,14 @@ function Tooltip(originalProps) {
             width: 8,
             height: 8,
             viewBox: "0 0 8 8",
-            className: ouiTheme.composeRenderProps(
-              classNames?.arrow,
-              (className, renderProps2) => styles.arrow({
-                className,
-                ...renderProps2
-              })
-            )(renderProps),
+            className: styles.arrow({
+              ...renderProps,
+              className: children.renderChildren(renderProps, classNames?.arrow)
+            }),
             children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0 L4 4 L8 0" })
           }
         ) }),
-        children
+        children$1
       ] })
     }
   );

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/banner/banner.js

@@ -5,10 +5,10 @@ import { useMemo, useRef } from 'react';
 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 { Button } from '../button/button.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 Banner = ({

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/checkbox/checkbox.js

@@ -4,6 +4,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
 import { Label, Description, FieldError } from '../field/field.js';
+import { renderChildren } from '../system/react-utils/children.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
 import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.js';
@@ -31,32 +32,39 @@ const Checkbox = ({
         className ?? classNames?.base,
         (className2, renderProps) => styles.base({ ...renderProps, className: className2 })
       ),
-      children: ({ isSelected, isIndeterminate, ...renderProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: styles.box({
-              isSelected: isSelected || isIndeterminate,
-              ...renderProps,
-              className: classNames?.box
-            }),
-            children: isIndeterminate ? /* @__PURE__ */ jsx(
-              Minus,
-              {
-                "aria-hidden": true,
-                className: styles.icon({ className: classNames?.icon })
-              }
-            ) : isSelected ? /* @__PURE__ */ jsx(
-              Check,
-              {
-                "aria-hidden": true,
-                className: styles.icon({ className: classNames?.icon })
-              }
-            ) : null
-          }
-        ),
-        props.children
-      ] })
+      children: (renderProps) => {
+        const { isSelected, isIndeterminate, ...restRenderProps } = renderProps;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.box({
+                isSelected: isSelected || isIndeterminate,
+                ...restRenderProps,
+                className: renderChildren(renderProps, classNames?.box)
+              }),
+              children: isIndeterminate ? /* @__PURE__ */ jsx(
+                Minus,
+                {
+                  "aria-hidden": true,
+                  className: styles.icon({
+                    className: renderChildren(renderProps, classNames?.icon)
+                  })
+                }
+              ) : isSelected ? /* @__PURE__ */ jsx(
+                Check,
+                {
+                  "aria-hidden": true,
+                  className: styles.icon({
+                    className: renderChildren(renderProps, classNames?.icon)
+                  })
+                }
+              ) : null
+            }
+          ),
+          props.children
+        ] });
+      }
     }
   );
 };

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/date-picker/date-picker.js

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

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

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

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

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

package/dist/esm/index.js

@@ -1,7 +1,6 @@
 "use strict";
 export { useControllableState } from './hooks/use-controllable-state.js';
 export { useDraggable } from './hooks/use-draggable.js';
-export { Button } from './button/button.js';
 export { GovtBanner } from './govt-banner/govt-banner.js';
 export { Ripple } from './ripple/ripple.js';
 export { useRipple } from './ripple/use-ripple.js';
@@ -18,26 +17,18 @@ export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
 export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
 export { ComboBoxItem } from './combo-box/combo-box-item.js';
 export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
-export { Banner } from './banner/banner.js';
 export { TagField } from './tag-field/tag-field.js';
 export { TagFieldItem } from './tag-field/tag-field-item.js';
 export { Select } from './select/select.js';
 export { SelectItem } from './select/select-item.js';
 export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
-export { Badge } from './badge/badge.js';
-export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
-export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
-export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
-export { CalendarDate } from '@internationalized/date';
 export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
 export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
 export { Popover } from './popover/popover.js';
-export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
+export { Tab, TabList, TabPanel, TabPanels, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
 export { DateField, DateInput } from './date-field/date-field.js';
 export { DatePicker } from './date-picker/date-picker.js';
 export { DateRangePicker } from './date-range-picker/date-range-picker.js';
-export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
-export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
 export { Pagination } from './pagination/pagination.js';
 export { PaginationCursor } from './pagination/pagination-cursor.js';
 export { PaginationItem } from './pagination/pagination-item.js';
@@ -64,11 +55,9 @@ export { NavbarItem } from './navbar/navbar-item.js';
 export { useNavbar } from './navbar/use-navbar.js';
 export { NavbarProvider, useNavbarContext } from './navbar/navbar-context.js';
 export { Avatar } from './avatar/index.js';
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext } from './accordion/accordion.js';
 export { TimeField } from './time-field/time-field.js';
 export { SearchField } from './search-field/search-field.js';
 export { Link } from './link/link.js';
-export { Breadcrumb, Breadcrumbs } from './breadcrumbs/breadcrumbs.js';
 export { Sidebar, generateSidebarItems } from './sidebar/sidebar.js';
 export { SidebarRoot } from './sidebar/sidebar-root.js';
 export { SidebarItem } from './sidebar/sidebar-item.js';
@@ -77,8 +66,21 @@ 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 { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext } from './accordion/accordion.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 { Badge } from './badge/badge.js';
+export { Banner } from './banner/banner.js';
+export { Breadcrumb, Breadcrumbs } from './breadcrumbs/breadcrumbs.js';
+export { Button } from './button/button.js';
+export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
+export { CalendarDate } from '@internationalized/date';
+export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
+export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
+export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
+export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.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 };