@opengovsg/oui 0.0.55 → 0.0.56

package/AGENTS.md

@@ -33,7 +33,7 @@ Component files land in `components/oui/`, shared utilities in `lib/oui/`. From
 ## Import
 
 ```tsx
-import { Button, Accordion, TextField } from "@opengovsg/oui"
+import { Accordion, Button, TextField } from "@opengovsg/oui"
 ```
 
 Subpath imports also work (e.g., `import { Button } from "@opengovsg/oui/button"`).

package/dist/cjs/button/button.cjs

@@ -32,6 +32,7 @@ const Button = $670gB$react.forwardRef(
     spinner: spinnerProp,
     isIconOnly,
     isAttached,
+    preserveWidth,
     ...props
   }, ref) => {
     const {
@@ -52,6 +53,7 @@ const Button = $670gB$react.forwardRef(
       const spinnerSize = buttonSpinnerSizeMap[size];
       return /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: spinnerSize });
     }, [size, spinnerProp]);
+    const shouldPreserveWidth = isPending && preserveWidth && !loadingText && !pendingElement;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Button,
       {
@@ -75,11 +77,14 @@ const Button = $670gB$react.forwardRef(
         ref,
         children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           children.renderChildren(renderProps, startContent),
-          isPending && spinnerPlacement === "start" ? children.renderChildren(renderProps, spinner$1) : null,
-          isPending ? null : children.renderChildren(renderProps, children$1),
+          isPending && !shouldPreserveWidth && spinnerPlacement === "start" ? children.renderChildren(renderProps, spinner$1) : null,
+          !isPending ? children.renderChildren(renderProps, children$1) : shouldPreserveWidth ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "opacity-0", children: children.renderChildren(renderProps, children$1) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: children.renderChildren(renderProps, spinner$1) })
+          ] }) : null,
           isPending && loadingText ? loadingText : null,
           isPending && pendingElement ? children.renderChildren(renderProps, pendingElement) : null,
-          isPending && spinnerPlacement === "end" ? children.renderChildren(renderProps, spinner$1) : null,
+          isPending && !shouldPreserveWidth && spinnerPlacement === "end" ? children.renderChildren(renderProps, spinner$1) : null,
           children.renderChildren(renderProps, endContent),
           !disableRipple && /* @__PURE__ */ jsxRuntime.jsx(ripple.Ripple, { onClear: onClearRipple, ripples })
         ] })

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

@@ -11,8 +11,8 @@ var select = require('../select/select.cjs');
 var selectItem = require('../select/select-item.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
-var useCalendarSelectors = require('./use-calendar-selectors.cjs');
 var i18n = require('./i18n.cjs');
+var useCalendarSelectors = require('./use-calendar-selectors.cjs');
 
 const CalendarMonthDaySelector = () => {
   const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();

package/dist/cjs/file-dropzone/file-dropzone.cjs

@@ -3,11 +3,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactDropzone = require('react-dropzone');
 var $670gB$react = require('react');
 var form = require('@react-stately/form');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
+var reactDropzone = require('react-dropzone');
 var ouiTheme = require('@opengovsg/oui-theme');
 var field = require('../field/field.cjs');
 var useControllableState = require('../hooks/use-controllable-state.cjs');
@@ -90,7 +90,11 @@ const FileDropzone = (originalProps) => {
     (file) => {
       const errors = [];
       if (maxFileSizeByType.length > 0) {
-        const limit = utils$1.resolveMaxFileSize(file.type, maxFileSizeByType, maxFileSize);
+        const limit = utils$1.resolveMaxFileSize(
+          file.type,
+          maxFileSizeByType,
+          maxFileSize
+        );
         if (limit !== Number.POSITIVE_INFINITY && file.size > limit) {
           errors.push({
             code: reactDropzone.ErrorCode.FileTooLarge,
@@ -198,7 +202,14 @@ const FileDropzone = (originalProps) => {
       return `Minimum file size: ${utils$1.formatBytes(minFileSize, 2, fileSizeBase)}`;
     }
     return null;
-  }, [maxFileSize, maxFileSizeByType, minFileSize, showFileSizeText, fileSizeBase, fileSizeTextOverride]);
+  }, [
+    maxFileSize,
+    maxFileSizeByType,
+    minFileSize,
+    showFileSizeText,
+    fileSizeBase,
+    fileSizeTextOverride
+  ]);
   const triggerFileSelector = $670gB$react.useCallback(() => {
     if (isDisabled || isReadOnly) return;
     dropzoneState.inputRef.current?.click();

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

@@ -46,7 +46,7 @@ function GovtBanner({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",
                 {
-                  className: slots.crest({ className: classNames?.crest }),
+                  className: slots.crest(),
                   version: "1.1",
                   viewBox: "0 0 32 32",
                   xmlns: "http://www.w3.org/2000/svg",
@@ -60,163 +60,83 @@ function GovtBanner({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: slots.mainContent({ className: classNames?.mainContent }),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "A Singapore Government Agency Website" }),
-                    environment ? /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
-                      "[NOTE: THIS IS A ",
-                      environment.toUpperCase(),
-                      " WEBSITE]"
-                    ] }) : null,
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
-                      {
-                        className: slots.identifyButton({
-                          className: classNames?.identifyButton
-                        }),
-                        "data-focus-visible": ouiTheme.dataAttr(isFocusVisible),
-                        ref: triggerRef,
-                        type: "button",
-                        ...reactAria.mergeProps(buttonProps, focusProps),
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.link({ className: classNames?.link }), children: "How to identify" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            chevronDown.default,
-                            {
-                              className: slots.chevron({ className: classNames?.chevron })
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panel({ className: classNames?.panel }), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: slots.panelGroup({
-                className: classNames?.panelGroup
-              }),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  landmark.default,
-                  {
-                    className: slots.panelIcon({ className: classNames?.panelIcon })
-                  }
-                ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.mainContent(), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "A Singapore Government Agency Website" }),
+                environment ? /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+                  "[NOTE: THIS IS A ",
+                  environment.toUpperCase(),
+                  " WEBSITE]"
+                ] }) : null,
                 /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
+                  "button",
                   {
-                    className: slots.panelSection({
-                      className: classNames?.panelSection
-                    }),
+                    className: slots.identifyButton(),
+                    "data-focus-visible": ouiTheme.dataAttr(isFocusVisible),
+                    ref: triggerRef,
+                    type: "button",
+                    ...reactAria.mergeProps(buttonProps, focusProps),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: slots.panelHeader({
-                            className: classNames?.panelHeader
-                          }),
-                          children: "Official website links end with .gov.sg"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
-                        "Government agencies communicate via ",
-                        /* @__PURE__ */ jsxRuntime.jsx("b", { children: ".gov.sg" }),
-                        " websites (e.g. go.gov.sg/open).",
-                        " ",
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          "a",
-                          {
-                            className: slots.link({ className: classNames?.link }),
-                            href: "https://www.gov.sg/trusted-sites#govsites",
-                            rel: "noreferrer",
-                            target: "_blank",
-                            children: [
-                              "Trusted websites",
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                externalLink.default,
-                                {
-                                  "aria-hidden": true,
-                                  className: slots.inlineIcon({
-                                    className: ouiTheme.twMerge("ml-0.5", classNames?.inlineIcon)
-                                  })
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ] })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.link(), children: "How to identify" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(chevronDown.default, { className: slots.chevron() })
                     ]
                   }
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: slots.panelGroup({
-                className: classNames?.panelGroup
-              }),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  lock.default,
-                  {
-                    className: slots.panelIcon({ className: classNames?.panelIcon })
-                  }
-                ),
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panel(), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panelGroup(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(landmark.default, { className: slots.panelIcon() }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panelSection(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: slots.panelHeader(), children: "Official website links end with .gov.sg" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
+                "Government agencies communicate via ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: ".gov.sg" }),
+                " websites (e.g. go.gov.sg/open).",
+                " ",
                 /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
+                  "a",
                   {
-                    className: slots.panelSection({
-                      className: classNames?.panelSection
-                    }),
+                    className: slots.link(),
+                    href: "https://www.gov.sg/trusted-sites#govsites",
+                    rel: "noreferrer",
+                    target: "_blank",
                     children: [
+                      "Trusted websites",
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        "p",
+                        externalLink.default,
                         {
-                          className: slots.panelHeader({
-                            className: classNames?.panelHeader
-                          }),
-                          children: "Secure websites use HTTPS"
+                          "aria-hidden": true,
+                          className: slots.inlineIcon({ className: "ml-0.5" })
                         }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
-                        "Look for a ",
-                        /* @__PURE__ */ jsxRuntime.jsx("b", { children: "lock" }),
-                        " ",
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": true, children: [
-                          "(",
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            lock.default,
-                            {
-                              className: slots.inlineIcon({
-                                className: classNames?.inlineIcon
-                              })
-                            }
-                          ),
-                          ")"
-                        ] }),
-                        " ",
-                        "or ",
-                        /* @__PURE__ */ jsxRuntime.jsx("b", { children: "https://" }),
-                        " as an added precaution. Share sensitive information only on official, secure websites."
-                      ] })
+                      )
                     ]
                   }
                 )
-              ]
-            }
-          )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panelGroup(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lock.default, { className: slots.panelIcon() }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panelSection(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: slots.panelHeader(), children: "Secure websites use HTTPS" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
+                "Look for a ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "lock" }),
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": true, children: [
+                  "(",
+                  /* @__PURE__ */ jsxRuntime.jsx(lock.default, { className: slots.inlineIcon() }),
+                  ")"
+                ] }),
+                " ",
+                "or ",
+                /* @__PURE__ */ jsxRuntime.jsx("b", { children: "https://" }),
+                " as an added precaution. Share sensitive information only on official, secure websites."
+              ] })
+            ] })
+          ] })
         ] }) })
       ]
     }

package/dist/cjs/hooks/use-scroll-position.cjs

@@ -12,19 +12,19 @@ function getScrollPosition(element) {
   return { x: element.scrollLeft, y: element.scrollTop };
 }
 const useScrollPosition = (props) => {
-  const { elementRef, delay = 30, callback, isEnabled } = props;
+  const { element, delay = 30, callback, isEnabled } = props;
   const position = $670gB$react.useRef(
-    isEnabled ? getScrollPosition(elementRef?.current) : { x: 0, y: 0 }
+    isEnabled ? getScrollPosition(element) : { x: 0, y: 0 }
   );
   const throttleTimeout = $670gB$react.useRef(null);
   const handler = $670gB$react.useCallback(() => {
-    const currPos = getScrollPosition(elementRef?.current);
+    const currPos = getScrollPosition(element);
     if (typeof callback === "function") {
       callback({ prevPos: position.current, currPos });
     }
     position.current = currPos;
     throttleTimeout.current = null;
-  }, [callback, elementRef]);
+  }, [callback, element]);
   $670gB$react.useEffect(() => {
     if (!isEnabled) return;
     const handleScroll = () => {
@@ -37,7 +37,7 @@ const useScrollPosition = (props) => {
         handler();
       }
     };
-    const target = elementRef?.current || window;
+    const target = element || window;
     target.addEventListener("scroll", handleScroll);
     return () => {
       target.removeEventListener("scroll", handleScroll);
@@ -46,7 +46,7 @@ const useScrollPosition = (props) => {
         throttleTimeout.current = null;
       }
     };
-  }, [elementRef?.current, delay, handler, isEnabled]);
+  }, [element, delay, handler, isEnabled]);
   return position.current;
 };
 

package/dist/cjs/navbar/use-navbar.cjs

@@ -70,8 +70,12 @@ function useNavbar(originalProps) {
   $670gB$react.useEffect(() => {
     navHeight.current = domRef.current?.offsetHeight || 0;
   }, [domRef]);
+  const [scrollElement, setScrollElement] = $670gB$react.useState(null);
+  $670gB$react.useLayoutEffect(() => {
+    setScrollElement(parentRef?.current ?? null);
+  }, [parentRef]);
   useScrollPosition.useScrollPosition({
-    elementRef: parentRef,
+    element: scrollElement,
     isEnabled: shouldShowOnScrollUp || !disableScrollHandler,
     callback: ({ prevPos, currPos }) => {
       onScrollPositionChange?.(currPos.y);

package/dist/cjs/pagination/pagination.cjs

@@ -7,10 +7,10 @@ var $670gB$react = require('react');
 var i18n = require('@react-aria/i18n');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
-var usePaginationBase = require('./use-pagination-base.cjs');
 var paginationCursor = require('./pagination-cursor.cjs');
 var paginationItem = require('./pagination-item.cjs');
 var usePagination = require('./use-pagination.cjs');
+var usePaginationBase = require('./use-pagination-base.cjs');
 var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
 var ellipsis = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/ellipsis.cjs');
 var chevronsRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevrons-right.cjs');

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

@@ -67,14 +67,7 @@ const TagFieldListInner = (props, ref) => {
     if (typeof props.children === "function") {
       return props.children({ ...childProps, itemProps });
     }
-    return /* @__PURE__ */ $670gB$react.createElement(
-      tagFieldItem.TagFieldItem,
-      {
-        ...childProps,
-        ...itemProps,
-        key
-      }
-    );
+    return /* @__PURE__ */ $670gB$react.createElement(tagFieldItem.TagFieldItem, { ...childProps, ...itemProps, key });
   }) });
 };
 const TagFieldList = utils.forwardRefGeneric(TagFieldListInner);

package/dist/esm/button/button.js

@@ -30,6 +30,7 @@ const Button = forwardRef(
     spinner: spinnerProp,
     isIconOnly,
     isAttached,
+    preserveWidth,
     ...props
   }, ref) => {
     const {
@@ -50,6 +51,7 @@ const Button = forwardRef(
       const spinnerSize = buttonSpinnerSizeMap[size];
       return /* @__PURE__ */ jsx(Spinner, { size: spinnerSize });
     }, [size, spinnerProp]);
+    const shouldPreserveWidth = isPending && preserveWidth && !loadingText && !pendingElement;
     return /* @__PURE__ */ jsx(
       Button$1,
       {
@@ -73,11 +75,14 @@ const Button = forwardRef(
         ref,
         children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
           renderChildren(renderProps, startContent),
-          isPending && spinnerPlacement === "start" ? renderChildren(renderProps, spinner) : null,
-          isPending ? null : renderChildren(renderProps, children),
+          isPending && !shouldPreserveWidth && spinnerPlacement === "start" ? renderChildren(renderProps, spinner) : null,
+          !isPending ? renderChildren(renderProps, children) : shouldPreserveWidth ? /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "opacity-0", children: renderChildren(renderProps, children) }),
+            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: renderChildren(renderProps, spinner) })
+          ] }) : null,
           isPending && loadingText ? loadingText : null,
           isPending && pendingElement ? renderChildren(renderProps, pendingElement) : null,
-          isPending && spinnerPlacement === "end" ? renderChildren(renderProps, spinner) : null,
+          isPending && !shouldPreserveWidth && spinnerPlacement === "end" ? renderChildren(renderProps, spinner) : null,
           renderChildren(renderProps, endContent),
           !disableRipple && /* @__PURE__ */ jsx(Ripple, { onClear: onClearRipple, ripples })
         ] })

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

@@ -9,8 +9,8 @@ import { Select } from '../select/select.js';
 import { SelectItem } from '../select/select-item.js';
 import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
-import { useCalendarSelectors } from './use-calendar-selectors.js';
 import { i18nStrings } from './i18n.js';
+import { useCalendarSelectors } from './use-calendar-selectors.js';
 
 const CalendarMonthDaySelector = () => {
   const { slots, size, classNames } = useCalendarStyleContext();

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

@@ -1,11 +1,11 @@
 "use strict";
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ErrorCode, useDropzone } from 'react-dropzone';
 import { useCallback, useMemo, useEffect } from 'react';
 import { useFormValidationState } from '@react-stately/form';
 import { useField, useId } from 'react-aria';
 import { Provider, LabelContext, GroupContext, TextContext, FieldErrorContext, Group } from 'react-aria-components';
+import { ErrorCode, useDropzone } from 'react-dropzone';
 import { fileDropzoneStyles, dataAttr } from '@opengovsg/oui-theme';
 import { Label, Description, FieldError } from '../field/field.js';
 import { useControllableState } from '../hooks/use-controllable-state.js';
@@ -88,7 +88,11 @@ const FileDropzone = (originalProps) => {
     (file) => {
       const errors = [];
       if (maxFileSizeByType.length > 0) {
-        const limit = resolveMaxFileSize(file.type, maxFileSizeByType, maxFileSize);
+        const limit = resolveMaxFileSize(
+          file.type,
+          maxFileSizeByType,
+          maxFileSize
+        );
         if (limit !== Number.POSITIVE_INFINITY && file.size > limit) {
           errors.push({
             code: ErrorCode.FileTooLarge,
@@ -196,7 +200,14 @@ const FileDropzone = (originalProps) => {
       return `Minimum file size: ${formatBytes(minFileSize, 2, fileSizeBase)}`;
     }
     return null;
-  }, [maxFileSize, maxFileSizeByType, minFileSize, showFileSizeText, fileSizeBase, fileSizeTextOverride]);
+  }, [
+    maxFileSize,
+    maxFileSizeByType,
+    minFileSize,
+    showFileSizeText,
+    fileSizeBase,
+    fileSizeTextOverride
+  ]);
   const triggerFileSelector = useCallback(() => {
     if (isDisabled || isReadOnly) return;
     dropzoneState.inputRef.current?.click();

package/dist/esm/govt-banner/govt-banner.js

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
-import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
+import { govtBannerStyles, dataAttr } from '@opengovsg/oui-theme';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/landmark.js';
 import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/external-link.js';
@@ -44,7 +44,7 @@ function GovtBanner({
               /* @__PURE__ */ jsxs(
                 "svg",
                 {
-                  className: slots.crest({ className: classNames?.crest }),
+                  className: slots.crest(),
                   version: "1.1",
                   viewBox: "0 0 32 32",
                   xmlns: "http://www.w3.org/2000/svg",
@@ -58,163 +58,83 @@ function GovtBanner({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: slots.mainContent({ className: classNames?.mainContent }),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "A Singapore Government Agency Website" }),
-                    environment ? /* @__PURE__ */ jsxs("b", { children: [
-                      "[NOTE: THIS IS A ",
-                      environment.toUpperCase(),
-                      " WEBSITE]"
-                    ] }) : null,
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        className: slots.identifyButton({
-                          className: classNames?.identifyButton
-                        }),
-                        "data-focus-visible": dataAttr(isFocusVisible),
-                        ref: triggerRef,
-                        type: "button",
-                        ...mergeProps(buttonProps, focusProps),
-                        children: [
-                          /* @__PURE__ */ jsx("span", { className: slots.link({ className: classNames?.link }), children: "How to identify" }),
-                          /* @__PURE__ */ jsx(
-                            ChevronDown,
-                            {
-                              className: slots.chevron({ className: classNames?.chevron })
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxs("div", { className: slots.panel({ className: classNames?.panel }), children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: slots.panelGroup({
-                className: classNames?.panelGroup
-              }),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Landmark,
-                  {
-                    className: slots.panelIcon({ className: classNames?.panelIcon })
-                  }
-                ),
+              /* @__PURE__ */ jsxs("div", { className: slots.mainContent(), children: [
+                /* @__PURE__ */ jsx("span", { children: "A Singapore Government Agency Website" }),
+                environment ? /* @__PURE__ */ jsxs("b", { children: [
+                  "[NOTE: THIS IS A ",
+                  environment.toUpperCase(),
+                  " WEBSITE]"
+                ] }) : null,
                 /* @__PURE__ */ jsxs(
-                  "div",
+                  "button",
                   {
-                    className: slots.panelSection({
-                      className: classNames?.panelSection
-                    }),
+                    className: slots.identifyButton(),
+                    "data-focus-visible": dataAttr(isFocusVisible),
+                    ref: triggerRef,
+                    type: "button",
+                    ...mergeProps(buttonProps, focusProps),
                     children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: slots.panelHeader({
-                            className: classNames?.panelHeader
-                          }),
-                          children: "Official website links end with .gov.sg"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("article", { children: [
-                        "Government agencies communicate via ",
-                        /* @__PURE__ */ jsx("b", { children: ".gov.sg" }),
-                        " websites (e.g. go.gov.sg/open).",
-                        " ",
-                        /* @__PURE__ */ jsxs(
-                          "a",
-                          {
-                            className: slots.link({ className: classNames?.link }),
-                            href: "https://www.gov.sg/trusted-sites#govsites",
-                            rel: "noreferrer",
-                            target: "_blank",
-                            children: [
-                              "Trusted websites",
-                              /* @__PURE__ */ jsx(
-                                ExternalLink,
-                                {
-                                  "aria-hidden": true,
-                                  className: slots.inlineIcon({
-                                    className: twMerge("ml-0.5", classNames?.inlineIcon)
-                                  })
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ] })
+                      /* @__PURE__ */ jsx("span", { className: slots.link(), children: "How to identify" }),
+                      /* @__PURE__ */ jsx(ChevronDown, { className: slots.chevron() })
                     ]
                   }
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: slots.panelGroup({
-                className: classNames?.panelGroup
-              }),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Lock,
-                  {
-                    className: slots.panelIcon({ className: classNames?.panelIcon })
-                  }
-                ),
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxs("div", { className: slots.panel(), children: [
+          /* @__PURE__ */ jsxs("div", { className: slots.panelGroup(), children: [
+            /* @__PURE__ */ jsx(Landmark, { className: slots.panelIcon() }),
+            /* @__PURE__ */ jsxs("div", { className: slots.panelSection(), children: [
+              /* @__PURE__ */ jsx("div", { className: slots.panelHeader(), children: "Official website links end with .gov.sg" }),
+              /* @__PURE__ */ jsxs("article", { children: [
+                "Government agencies communicate via ",
+                /* @__PURE__ */ jsx("b", { children: ".gov.sg" }),
+                " websites (e.g. go.gov.sg/open).",
+                " ",
                 /* @__PURE__ */ jsxs(
-                  "div",
+                  "a",
                   {
-                    className: slots.panelSection({
-                      className: classNames?.panelSection
-                    }),
+                    className: slots.link(),
+                    href: "https://www.gov.sg/trusted-sites#govsites",
+                    rel: "noreferrer",
+                    target: "_blank",
                     children: [
+                      "Trusted websites",
                       /* @__PURE__ */ jsx(
-                        "p",
+                        ExternalLink,
                         {
-                          className: slots.panelHeader({
-                            className: classNames?.panelHeader
-                          }),
-                          children: "Secure websites use HTTPS"
+                          "aria-hidden": true,
+                          className: slots.inlineIcon({ className: "ml-0.5" })
                         }
-                      ),
-                      /* @__PURE__ */ jsxs("article", { children: [
-                        "Look for a ",
-                        /* @__PURE__ */ jsx("b", { children: "lock" }),
-                        " ",
-                        /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
-                          "(",
-                          /* @__PURE__ */ jsx(
-                            Lock,
-                            {
-                              className: slots.inlineIcon({
-                                className: classNames?.inlineIcon
-                              })
-                            }
-                          ),
-                          ")"
-                        ] }),
-                        " ",
-                        "or ",
-                        /* @__PURE__ */ jsx("b", { children: "https://" }),
-                        " as an added precaution. Share sensitive information only on official, secure websites."
-                      ] })
+                      )
                     ]
                   }
                 )
-              ]
-            }
-          )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: slots.panelGroup(), children: [
+            /* @__PURE__ */ jsx(Lock, { className: slots.panelIcon() }),
+            /* @__PURE__ */ jsxs("div", { className: slots.panelSection(), children: [
+              /* @__PURE__ */ jsx("p", { className: slots.panelHeader(), children: "Secure websites use HTTPS" }),
+              /* @__PURE__ */ jsxs("article", { children: [
+                "Look for a ",
+                /* @__PURE__ */ jsx("b", { children: "lock" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
+                  "(",
+                  /* @__PURE__ */ jsx(Lock, { className: slots.inlineIcon() }),
+                  ")"
+                ] }),
+                " ",
+                "or ",
+                /* @__PURE__ */ jsx("b", { children: "https://" }),
+                " as an added precaution. Share sensitive information only on official, secure websites."
+              ] })
+            ] })
+          ] })
         ] }) })
       ]
     }

package/dist/esm/hooks/use-scroll-position.js

@@ -10,19 +10,19 @@ function getScrollPosition(element) {
   return { x: element.scrollLeft, y: element.scrollTop };
 }
 const useScrollPosition = (props) => {
-  const { elementRef, delay = 30, callback, isEnabled } = props;
+  const { element, delay = 30, callback, isEnabled } = props;
   const position = useRef(
-    isEnabled ? getScrollPosition(elementRef?.current) : { x: 0, y: 0 }
+    isEnabled ? getScrollPosition(element) : { x: 0, y: 0 }
   );
   const throttleTimeout = useRef(null);
   const handler = useCallback(() => {
-    const currPos = getScrollPosition(elementRef?.current);
+    const currPos = getScrollPosition(element);
     if (typeof callback === "function") {
       callback({ prevPos: position.current, currPos });
     }
     position.current = currPos;
     throttleTimeout.current = null;
-  }, [callback, elementRef]);
+  }, [callback, element]);
   useEffect(() => {
     if (!isEnabled) return;
     const handleScroll = () => {
@@ -35,7 +35,7 @@ const useScrollPosition = (props) => {
         handler();
       }
     };
-    const target = elementRef?.current || window;
+    const target = element || window;
     target.addEventListener("scroll", handleScroll);
     return () => {
       target.removeEventListener("scroll", handleScroll);
@@ -44,7 +44,7 @@ const useScrollPosition = (props) => {
         throttleTimeout.current = null;
       }
     };
-  }, [elementRef?.current, delay, handler, isEnabled]);
+  }, [element, delay, handler, isEnabled]);
   return position.current;
 };
 

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

@@ -1,6 +1,6 @@
 "use strict";
 "use client";
-import { useRef, useCallback, useState, useEffect } from 'react';
+import { useRef, useCallback, useState, useEffect, useLayoutEffect } from 'react';
 import { usePreventScroll as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18 } from '../node_modules/.pnpm/@react-aria_overlays@3.31.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/usePreventScroll.js';
 import { useResizeObserver, mergeProps } from '@react-aria/utils';
 import { useControlledState } from '@react-stately/utils';
@@ -68,8 +68,12 @@ function useNavbar(originalProps) {
   useEffect(() => {
     navHeight.current = domRef.current?.offsetHeight || 0;
   }, [domRef]);
+  const [scrollElement, setScrollElement] = useState(null);
+  useLayoutEffect(() => {
+    setScrollElement(parentRef?.current ?? null);
+  }, [parentRef]);
   useScrollPosition({
-    elementRef: parentRef,
+    element: scrollElement,
     isEnabled: shouldShowOnScrollUp || !disableScrollHandler,
     callback: ({ prevPos, currPos }) => {
       onScrollPositionChange?.(currPos.y);

package/dist/esm/pagination/pagination.js

@@ -5,10 +5,10 @@ import { useCallback, createElement } from 'react';
 import { useLocale } from '@react-aria/i18n';
 import { cn, dataAttr } from '@opengovsg/oui-theme';
 import { forwardRef } from '../system/utils.js';
-import { PaginationItemType } from './use-pagination-base.js';
 import { PaginationCursor } from './pagination-cursor.js';
 import { PaginationItem } from './pagination-item.js';
 import { usePagination } from './use-pagination.js';
+import { PaginationItemType } from './use-pagination-base.js';
 import ChevronLeft from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-left.js';
 import Ellipsis from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/ellipsis.js';
 import ChevronsRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevrons-right.js';

package/dist/esm/tag-field/tag-field-list.js

@@ -65,14 +65,7 @@ const TagFieldListInner = (props, ref) => {
     if (typeof props.children === "function") {
       return props.children({ ...childProps, itemProps });
     }
-    return /* @__PURE__ */ createElement(
-      TagFieldItem,
-      {
-        ...childProps,
-        ...itemProps,
-        key
-      }
-    );
+    return /* @__PURE__ */ createElement(TagFieldItem, { ...childProps, ...itemProps, key });
   }) });
 };
 const TagFieldList = forwardRefGeneric(TagFieldListInner);

package/dist/types/button/button.d.ts

@@ -41,6 +41,16 @@ export interface ButtonProps extends AriaButtonProps, ButtonVariantProps {
      * If true, you must provide an `aria-label` for accessibility.
      */
     isIconOnly?: boolean;
+    /**
+     * Whether to preserve the button's width while pending to prevent layout
+     * shift. When enabled, the children are kept in the layout (hidden via
+     * `opacity-0` and `aria-hidden`) and the spinner is overlaid on top.
+     *
+     * Only applies when no `loadingText` or `pendingElement` is provided, since
+     * those replace the children with content of a different width.
+     * @defaultValue false
+     */
+    preserveWidth?: boolean;
 }
 /**
  * You probably do not want to use this component if you are rendering a link.

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,WAAW,EACZ,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAQ9D,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,kBAAkB;IACtE;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAE9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAErD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAElC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAyFlB,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,WAAW,EACZ,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAQ9D,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,kBAAkB;IACtE;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAE9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAErD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAElC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GA2GlB,CAAA"}

package/dist/types/file-dropzone/file-dropzone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-dropzone.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/file-dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,eAAe,EAA4B,MAAM,gBAAgB,CAAA;AAgB/E,OAAO,KAAK,EACV,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAY,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAWvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EACtC,SAAS,EACT,UAAU,CAAC,QAAQ,EAAE,CAAC,EACtB,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE9B,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,UAAU,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAA;IACtD,sCAAsC;IACtC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB,wCAAwC;IACxC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IACtC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,eAAe,EAAE,CAAA;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAA;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAA;IAE5D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAA;CACxC;AAED,eAAO,MAAM,YAAY,kBAAmB,iBAAiB,4CAkV5D,CAAA"}
+{"version":3,"file":"file-dropzone.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/file-dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,eAAe,EAA4B,MAAM,gBAAgB,CAAA;AAe/E,OAAO,KAAK,EACV,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAY,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAa9C,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EACtC,SAAS,EACT,UAAU,CAAC,QAAQ,EAAE,CAAC,EACtB,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE9B,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,UAAU,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAA;IACtD,sCAAsC;IACtC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB,wCAAwC;IACxC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IACtC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,eAAe,EAAE,CAAA;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAA;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAA;IAE5D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAA;CACxC;AAED,eAAO,MAAM,YAAY,kBAAmB,iBAAiB,4CA+V5D,CAAA"}

package/dist/types/file-dropzone/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGnD,MAAM,WAAW,eAAe;IAC9B,iEAAiE;IACjE,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAA;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,aAChB,MAAM,WACP,MAAM,KACd,OAOF,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,aACnB,MAAM,SACT,eAAe,EAAE,kBACR,MAAM,KACrB,MAOF,CAAA;AAED,eAAO,MAAM,WAAW,UACf,MAAM,4BAEP,QAAQ,GAAG,SAAS,SACnB,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,WAavE,CAAA;AAED,eAAO,MAAM,kBAAkB,UACtB,aAAa,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,UAC9B;IACN,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,QAAQ,GAAG,SAAS,CAAA;CACnC,WAgBF,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGnD,MAAM,WAAW,eAAe;IAC9B,iEAAiE;IACjE,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAA;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,aAAc,MAAM,WAAW,MAAM,KAAG,OAOnE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,aACnB,MAAM,SACT,eAAe,EAAE,kBACR,MAAM,KACrB,MAOF,CAAA;AAED,eAAO,MAAM,WAAW,UACf,MAAM,4BAEP,QAAQ,GAAG,SAAS,SACnB,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,WAavE,CAAA;AAED,eAAO,MAAM,kBAAkB,UACtB,aAAa,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,UAC9B;IACN,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,QAAQ,GAAG,SAAS,CAAA;CACnC,WAgBF,CAAA"}

package/dist/types/govt-banner/govt-banner.d.ts

@@ -10,29 +10,20 @@ interface GovtBannerProps extends DisclosureProps {
      */
     environment?: LiteralUnion<"production" | "staging" | "uat" | "preview", string>;
     /**
-     * List of classes to change the className of the element.
+     * List of classes to change the className of the element. Only the outer
+     * container slots can be overridden; the internal layout and styling are
+     * fixed to keep the banner consistent across applications.
      *
      * @example
      * ```text
      * Component: GovtBanner
      *
      * Class names:
-     * - banner: the wrapper of the full government banner component,
+     * - banner: the wrapper of the full government banner component
      * - mainContentContainer: the wrapper of the main content of the banner
-     * - crest: the SVG of the government crest
-     * - mainContent: the main content of the banner
-     * - link: link stylings
-     * - identifyButton: for the "how to identify" button
-     * - chevron: the chevron icon beside the "how to identify" button
-     * - panel: the wrapper for the panel that appears when the "how to identify" button is clicked
-     * - panelGroup: the wrapper for the panel group containing the icon and the panel section
-     * - panelIcon: the icon in the panel group
-     * - panelSection: the wrapper for the panel section containing the header and content
-     * - panelHeader: the header in the panel section
-     * - inlineIcon: the icon in the panel content
      * ```
      */
-    classNames?: SlotsToClasses<GovtBannerSlots>;
+    classNames?: Pick<SlotsToClasses<GovtBannerSlots>, "banner" | "mainContentContainer">;
 }
 export declare function GovtBanner({ environment, classNames, ...props }: GovtBannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/govt-banner/govt-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"govt-banner.d.ts","sourceRoot":"","sources":["../../../src/govt-banner/govt-banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAM7C,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG3E,UAAU,eAAgB,SAAQ,eAAe;IAC/C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CACxB,YAAY,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,EAC5C,MAAM,CACP,CAAA;IAED;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;CAC7C;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CAoJjB"}
+{"version":3,"file":"govt-banner.d.ts","sourceRoot":"","sources":["../../../src/govt-banner/govt-banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAM7C,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG3E,UAAU,eAAgB,SAAQ,eAAe;IAC/C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CACxB,YAAY,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,EAC5C,MAAM,CACP,CAAA;IAED;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,eAAe,CAAC,EAC/B,QAAQ,GAAG,sBAAsB,CAClC,CAAA;CACF;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CAuGjB"}

package/dist/types/hooks/use-scroll-position.d.ts

@@ -14,9 +14,11 @@ export interface UseScrollPositionOptions {
      */
     isEnabled?: boolean;
     /**
-     * The element to track the scroll position for.
+     * The element to track the scroll position for. Pass a `useState`-held
+     * element (via a callback ref) so the effect re-runs when the element
+     * mounts. Falls back to `window` when `null` or `undefined`.
      */
-    elementRef?: React.RefObject<HTMLElement> | null;
+    element?: HTMLElement | null;
     /**
      * The callback function to be called when the scroll position changes.
      */

package/dist/types/hooks/use-scroll-position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-position.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-scroll-position.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,WAAW,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAalD,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EACV,OAAO,EACP,OAAO,GACR,EAAE;QACD,OAAO,EAAE,WAAW,CAAA;QACpB,OAAO,EAAE,WAAW,CAAA;KACrB,KAAK,IAAI,CAAA;CACX;AAED,eAAO,MAAM,iBAAiB,UACrB,wBAAwB,KAC9B,WAiDF,CAAA"}
+{"version":3,"file":"use-scroll-position.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-scroll-position.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,WAAW,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAalD,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EACV,OAAO,EACP,OAAO,GACR,EAAE;QACD,OAAO,EAAE,WAAW,CAAA;QACpB,OAAO,EAAE,WAAW,CAAA;KACrB,KAAK,IAAI,CAAA;CACX;AAED,eAAO,MAAM,iBAAiB,UACrB,wBAAwB,KAC9B,WAiDF,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-navbar.d.ts","sourceRoot":"","sources":["../../../src/navbar/use-navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAMnD,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAQ9D,UAAU,KAAM,SAAQ,WAAW,CAAC,KAAK,CAAC;IACxC;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;IACzD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAA;IACjD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACzC;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,kBAAkB,CAAA;AAEvD,wBAAgB,SAAS,CAAC,aAAa,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HtD;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"use-navbar.d.ts","sourceRoot":"","sources":["../../../src/navbar/use-navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAYnD,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAQ9D,UAAU,KAAM,SAAQ,WAAW,CAAC,KAAK,CAAC;IACxC;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;IACzD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAA;IACjD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACzC;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,kBAAkB,CAAA;AAEvD,wBAAgB,SAAS,CAAC,aAAa,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmItD;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/pagination/pagination.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAQ1D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;CAAG;AAE9D,eAAO,MAAM,UAAU,2FAiRrB,CAAA"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/pagination/pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAS1D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;CAAG;AAE9D,eAAO,MAAM,UAAU,2FAiRrB,CAAA"}

package/dist/types/tag-field/tag-field-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-field-list.d.ts","sourceRoot":"","sources":["../../../src/tag-field/tag-field-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AACvD,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAKtD,MAAM,WAAW,wBACf,SAAQ,SAAS,EACf,UAAU,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC;IAC5D,cAAc,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CACzD;AAED,eAAO,MAAM,mBAAmB,mFAC+C,CAAA;AAE/E,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAC1C,SAAQ,OAAO,CAAC,wBAAwB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;IACnD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;CAC3E;AAgFD,eAAO,MAAM,YAAY,GA9EE,CAAC,SAAS,MAAM,oFAqB9B,MAAO,SAyD4C,CAAA"}
+{"version":3,"file":"tag-field-list.d.ts","sourceRoot":"","sources":["../../../src/tag-field/tag-field-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AACvD,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAKtD,MAAM,WAAW,wBACf,SAAQ,SAAS,EACf,UAAU,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC;IAC5D,cAAc,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CACzD;AAED,eAAO,MAAM,mBAAmB,mFAC+C,CAAA;AAE/E,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAC1C,SAAQ,OAAO,CAAC,wBAAwB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;IACnD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;CAC3E;AA0ED,eAAO,MAAM,YAAY,GAxEE,CAAC,SAAS,MAAM,oFAqB9B,MAAO,SAmD4C,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/oui",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -51,8 +51,8 @@
     "storybook": "10.2.10",
     "tsx": "^4.21.0",
     "typescript": "5.7.3",
-    "@opengovsg/oui-theme": "0.0.55",
     "@oui/chromatic": "0.0.0",
+    "@opengovsg/oui-theme": "0.0.56",
     "@oui/eslint-config": "0.0.0",
     "@oui/prettier-config": "0.0.0",
     "@oui/typescript-config": "0.0.0"
@@ -74,7 +74,7 @@
     "@tanstack/react-virtual": "^3.13.10",
     "downshift": "^9.0.9",
     "fuzzysort": "^3.1.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.18.1",
     "nanoid": "^5.1.5",
     "react-aria": "^3.41.1",
     "react-dropzone": "^14.3.8",
@@ -91,7 +91,7 @@
     "motion": ">=11.12.0 || >=12.0.0-alpha.1",
     "react": ">= 18",
     "react-aria-components": "^1.14.0",
-    "@opengovsg/oui-theme": "0.0.55"
+    "@opengovsg/oui-theme": "0.0.56"
   },
   "scripts": {
     "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",