@opengovsg/oui 0.0.6 → 0.0.8

package/dist/cjs/govt-banner/govt-banner.cjs

@@ -4,9 +4,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ouiTheme = require('@opengovsg/oui-theme');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
+var ouiTheme = require('@opengovsg/oui-theme');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
 var landmark = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.cjs');
 var externalLink = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.cjs');

package/dist/cjs/index.cjs

@@ -1,6 +1,7 @@
 "use strict";
 'use strict';
 
+var input = require('./input/input.cjs');
 var useControllableState = require('./hooks/use-controllable-state.cjs');
 var button = require('./button/button.cjs');
 var govtBanner = require('./govt-banner/govt-banner.cjs');
@@ -10,18 +11,24 @@ var spinner = require('./spinner/spinner.cjs');
 var useSpinner = require('./spinner/use-spinner.cjs');
 var toggle = 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');
 var field = require('./field/field.cjs');
 var textArea = require('./text-area/text-area.cjs');
 var textAreaField = require('./text-area-field/text-area-field.cjs');
 var comboBox = require('./combo-box/combo-box.cjs');
 var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
+var comboBoxItem = require('./combo-box/combo-box-item.cjs');
+var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
 var banner = require('./banner/banner.cjs');
 var tagField = require('./tag-field/tag-field.cjs');
+var select = require('./select/select.cjs');
+var selectItem = require('./select/select-item.cjs');
+var selectVariantContext = require('./select/select-variant-context.cjs');
+var badge = require('./badge/badge.cjs');
 
 
 
+exports.Input = input.Input;
 exports.useControllableState = useControllableState.useControllableState;
 exports.Button = button.Button;
 exports.GovtBanner = govtBanner.GovtBanner;
@@ -31,7 +38,6 @@ exports.Spinner = spinner.Spinner;
 exports.useSpinner = useSpinner.useSpinner;
 exports.Toggle = toggle.Toggle;
 exports.SkipNavLink = skipNavLink.SkipNavLink;
-exports.Input = input.Input;
 exports.TextField = textField.TextField;
 exports.Description = field.Description;
 exports.FieldError = field.FieldError;
@@ -41,7 +47,14 @@ exports.TextArea = textArea.TextArea;
 exports.TextAreaField = textAreaField.TextAreaField;
 exports.ComboBox = comboBox.ComboBox;
 exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
-exports.ComboBoxItem = comboBox.ComboBoxItem;
 exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
+exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
+exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
+exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
 exports.Banner = banner.Banner;
 exports.TagField = tagField.TagField;
+exports.Select = select.Select;
+exports.SelectItem = selectItem.SelectItem;
+exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
+exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
+exports.Badge = badge.Badge;

package/dist/cjs/input/input.cjs

@@ -4,8 +4,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ouiTheme = require('@opengovsg/oui-theme');
 var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
 
 const Input = react.forwardRef(
   ({ size, variant, isDisabled, ...props }, ref) => {

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs

@@ -0,0 +1,19 @@
+'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 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon.default("Check", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = Check;

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.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 = [
+  ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
+  ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
+];
+const ChevronsUpDown = createLucideIcon.default("ChevronsUpDown", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = ChevronsUpDown;

package/dist/cjs/select/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+'use strict';
+
+var select = require('./select.cjs');
+var selectItem = require('./select-item.cjs');
+var selectVariantContext = require('./select-variant-context.cjs');
+
+
+
+exports.Select = select.Select;
+exports.SelectItem = selectItem.SelectItem;
+exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
+exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;

package/dist/cjs/select/select-item.cjs

@@ -0,0 +1,64 @@
+"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 utils = require('../system/utils.cjs');
+var selectVariantContext = require('./select-variant-context.cjs');
+var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
+
+const SelectItem = utils.forwardRef(function SelectItem2({ classNames, ...originalProps }, ref) {
+  [originalProps, ref] = reactAriaComponents.useContextProps(
+    originalProps,
+    ref,
+    selectVariantContext.SelectVariantContext
+  );
+  const [props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.selectItemStyles.variantKeys
+  );
+  const styles = ouiTheme.selectItemStyles(variantProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ListBoxItem,
+    {
+      ...props,
+      ref,
+      className: ouiTheme.composeRenderProps(
+        props.className ?? classNames?.base,
+        (className, renderProps) => styles.base({ className, ...renderProps })
+      ),
+      children: (renderProps) => {
+        if (typeof props.children === "function") {
+          return props.children(renderProps);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: styles.text({
+                className: classNames?.text,
+                ...renderProps
+              }),
+              children: props.children
+            }
+          ),
+          renderProps.isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: styles.icon({
+                className: classNames?.icon,
+                ...renderProps
+              }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(check.default, {})
+            }
+          )
+        ] });
+      }
+    }
+  );
+});
+
+exports.SelectItem = SelectItem;

package/dist/cjs/select/select-variant-context.cjs

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [SelectVariantContext, useSelectVariantContext] = context.createContext({
+  name: "SelectVariantContext",
+  strict: true
+});
+
+exports.SelectVariantContext = SelectVariantContext;
+exports.useSelectVariantContext = useSelectVariantContext;

package/dist/cjs/select/select.cjs

@@ -0,0 +1,103 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var selectVariantContext = require('./select-variant-context.cjs');
+var chevronsUpDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.cjs');
+var field = require('../field/field.cjs');
+var button = require('../button/button.cjs');
+
+const calculateEstimatedRowHeight = (size) => {
+  switch (size) {
+    case "xs":
+      return 44;
+    case "sm":
+      return 44;
+    case "md":
+      return 48;
+  }
+};
+function Select({
+  label,
+  description,
+  classNames,
+  ...originalProps
+}) {
+  const [_props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.selectStyles.variantKeys
+  );
+  const { items, children, listLayoutOptions, ...props } = _props;
+  const styles = ouiTheme.selectStyles(variantProps);
+  const layout = react.useMemo(() => {
+    return new reactAriaComponents.ListLayout({
+      estimatedRowHeight: calculateEstimatedRowHeight(
+        variantProps.size ?? "md"
+      ),
+      ...listLayoutOptions
+    });
+  }, [listLayoutOptions, variantProps.size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[selectVariantContext.SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Select,
+    {
+      className: ouiTheme.composeRenderProps(
+        props.className,
+        (className, renderProps) => styles.base({ className, ...renderProps })
+      ),
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            size: variantProps.size,
+            variant: variantProps.variant ?? ouiTheme.selectStyles.defaultVariants.variant,
+            color: variantProps.color ?? ouiTheme.selectStyles.defaultVariants.color,
+            className: ouiTheme.composeRenderProps(
+              classNames?.trigger,
+              (className, renderProps) => styles.trigger({ className, ...renderProps })
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactAriaComponents.SelectValue,
+                {
+                  className: styles.selectedText({
+                    className: classNames?.selectedText
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(chevronsUpDown.default, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Description,
+          {
+            size: variantProps.size,
+            className: classNames?.description,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Virtualizer, { layout, children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.ListBox,
+          {
+            items,
+            shouldFocusWrap: true,
+            className: ouiTheme.composeRenderProps(
+              classNames?.list,
+              (className, renderProps) => styles.list({ className, ...renderProps })
+            ),
+            children
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+
+exports.Select = Select;

package/dist/cjs/spinner/use-spinner.cjs

@@ -3,8 +3,8 @@
 'use strict';
 
 var react = require('react');
-var ouiTheme = require('@opengovsg/oui-theme');
 var useDeepCompare = require('use-deep-compare');
+var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
 
 const useSpinner = (originalProps) => {

package/dist/cjs/system/react-utils/context.cjs

@@ -21,11 +21,7 @@ function createContext(options = {}) {
     }
     return context;
   }
-  return [
-    Context.Provider,
-    useContext,
-    Context
-  ];
+  return [Context, useContext];
 }
 
 exports.createContext = createContext;

package/dist/cjs/system/react-utils/index.cjs

@@ -2,7 +2,9 @@
 'use strict';
 
 var context = require('./context.cjs');
+var refs = require('./refs.cjs');
 
 
 
 exports.createContext = context.createContext;
+exports.useDomRef = refs.useDomRef;

package/dist/cjs/system/react-utils/refs.cjs

@@ -0,0 +1,12 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+function useDomRef(ref) {
+  const domRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => domRef.current);
+  return domRef;
+}
+
+exports.useDomRef = useDomRef;

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

@@ -1,10 +1,11 @@
 "use strict";
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ouiTheme = require('@opengovsg/oui-theme');
 var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
 var tagFieldStateContext = require('./tag-field-state-context.cjs');
 
@@ -56,8 +57,8 @@ const TagFieldListInner = (props, ref) => {
         item,
         isHighlighted: highlightedIndex === virtualRow.index,
         key: virtualRow.key,
-        ...itemProps,
-        classNames: itemClassNames
+        itemClassNames,
+        ...itemProps
       };
       if (typeof props.children === "function") {
         return props.children(childProps);

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -4,15 +4,15 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ouiTheme = require('@opengovsg/oui-theme');
 var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var input = require('../input/input.cjs');
 var tagFieldList = require('./tag-field-list.cjs');
 var tagFieldRoot = require('./tag-field-root.cjs');
 var tagFieldTagList = require('./tag-field-tag-list.cjs');
 var tagFieldTrigger = require('./tag-field-trigger.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
 var field = require('../field/field.cjs');
-var input = require('../input/input.cjs');
 
 function TagField({
   classNames,

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

@@ -127,6 +127,7 @@ function useTagField(props, state) {
   });
   const { isInvalid, validationErrors, validationDetails } = state.displayValidation;
   const inputProps = getInputProps({
+    placeholder: props.placeholder,
     ref: inputRef,
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"],

package/dist/cjs/text-area/text-area.cjs

@@ -4,8 +4,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ouiTheme = require('@opengovsg/oui-theme');
 var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
 
 const TextArea = react.forwardRef(
   ({ size, variant, isDisabled, ...props }, ref) => {

package/dist/cjs/text-area-field/text-area-field.cjs

@@ -3,8 +3,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ouiTheme = require('@opengovsg/oui-theme');
 var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
 var textArea = require('../text-area/text-area.cjs');
 var field = require('../field/field.cjs');
 

package/dist/cjs/text-field/text-field.cjs

@@ -3,8 +3,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ouiTheme = require('@opengovsg/oui-theme');
 var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
 var input = require('../input/input.cjs');
 var field = require('../field/field.cjs');
 

package/dist/cjs/toggle/toggle.cjs

@@ -4,9 +4,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ouiTheme = require('@opengovsg/oui-theme');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
 
 const Toggle = ({

package/dist/esm/badge/badge.js

@@ -0,0 +1,40 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { useBadge } from './use-badge.js';
+import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
+
+const Badge = forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    slots,
+    classNames,
+    getChipProps,
+    getCloseButtonProps,
+    startContent,
+    endContent,
+    isCloseable
+  } = useBadge({ ...props, ref });
+  const start = useMemo(() => {
+    if (props.variant === "dot" && !startContent) {
+      return /* @__PURE__ */ jsx("span", { className: slots.dot({ className: classNames?.dot }) });
+    }
+    return startContent;
+  }, [props.variant, startContent, slots, classNames?.dot]);
+  const end = useMemo(() => {
+    if (isCloseable) {
+      return /* @__PURE__ */ jsx("span", { ...getCloseButtonProps(), children: endContent ?? /* @__PURE__ */ jsx(X, { className: "size-full" }) });
+    }
+    return endContent;
+  }, [endContent, getCloseButtonProps, isCloseable]);
+  return /* @__PURE__ */ jsxs(Component, { ...getChipProps(), children: [
+    start,
+    /* @__PURE__ */ jsx("span", { className: slots.content({ className: classNames?.content }), children }),
+    end
+  ] });
+});
+Badge.displayName = "Badge";
+
+export { Badge };

package/dist/esm/badge/index.js

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

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

@@ -0,0 +1,109 @@
+"use strict";
+import { useMemo, useCallback, cloneElement, isValidElement } from 'react';
+import { mergeProps } from '@react-aria/utils';
+import { useMessageFormatter, 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 { 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,
+    badgeStyles.variantKeys
+  );
+  const {
+    ref,
+    as,
+    children,
+    startContent,
+    endContent,
+    onClose,
+    classNames,
+    className,
+    ...props
+  } = _props;
+  const domRef = useDomRef(ref);
+  const Component = useMemo(() => as || "div", [as]);
+  const baseClassName = cn(classNames?.base, className);
+  const formatMessage = useMessageFormatter(i18nStrings);
+  const isCloseable = variantProps.isCloseable || !!onClose;
+  const {
+    focusProps: closeFocusProps,
+    isFocusVisible: isCloseButtonFocusVisible
+  } = useFocusRing();
+  const slots = useDeepCompareMemo(
+    () => ({
+      ...badgeStyles({ isCloseable, ...variantProps }),
+      closeButton: badgeCloseButtonStyles
+    }),
+    [variantProps, isCloseable, badgeStyles, badgeCloseButtonStyles]
+  );
+  const { pressProps: closePressProps } = usePress({
+    isDisabled: !!variantProps?.isDisabled,
+    onPress: onClose
+  });
+  const getContentClone = useCallback(
+    (content) => isValidElement(content) ? cloneElement(content, {
+      // @ts-expect-error types are not full
+      className: content.props?.className
+    }) : null,
+    []
+  );
+  const getChipProps = useCallback(() => {
+    return {
+      ref: domRef,
+      className: slots.base({ className: baseClassName }),
+      "aria-disabled": variantProps?.isDisabled,
+      ...props
+    };
+  }, [baseClassName, domRef, props, slots, variantProps?.isDisabled]);
+  const getCloseButtonProps = useCallback(() => {
+    return {
+      role: "button",
+      tabIndex: 0,
+      className: slots.closeButton({
+        size: variantProps?.size,
+        className: classNames?.closeButton,
+        isFocusVisible: isCloseButtonFocusVisible
+      }),
+      "aria-label": formatMessage("close"),
+      ...mergeProps(closePressProps, closeFocusProps)
+    };
+  }, [
+    classNames?.closeButton,
+    closeFocusProps,
+    closePressProps,
+    formatMessage,
+    isCloseButtonFocusVisible,
+    slots,
+    variantProps?.size
+  ]);
+  return {
+    Component,
+    children,
+    slots,
+    classNames,
+    isCloseable,
+    startContent: getContentClone(startContent),
+    endContent: getContentClone(endContent),
+    getCloseButtonProps,
+    getChipProps
+  };
+}
+
+export { useBadge };

package/dist/esm/banner/banner.js

@@ -2,9 +2,9 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useRef } from 'react';
-import { bannerStyles } from '@opengovsg/oui-theme';
 import { useMessageFormatter, useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
+import { bannerStyles } from '@opengovsg/oui-theme';
 import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.js';
 import { Button } from '../button/button.js';

package/dist/esm/button/button.js

@@ -2,9 +2,9 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
-import { buttonStyles } from '@opengovsg/oui-theme';
 import { chain } from '@react-aria/utils';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
+import { buttonStyles } from '@opengovsg/oui-theme';
 import { useRipple } from '../ripple/use-ripple.js';
 import { Spinner } from '../spinner/spinner.js';
 import { Ripple } from '../ripple/ripple.js';