@opengovsg/oui 0.0.29 → 0.0.31

package/dist/cjs/index.cjs

@@ -3,6 +3,7 @@
 
 var useControllableState = require('./hooks/use-controllable-state.cjs');
 var useDraggable = require('./hooks/use-draggable.cjs');
+var button = require('./button/button.cjs');
 var govtBanner = require('./govt-banner/govt-banner.cjs');
 var ripple = require('./ripple/ripple.cjs');
 var useRipple = require('./ripple/use-ripple.cjs');
@@ -12,17 +13,31 @@ 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 tagField = require('./tag-field/tag-field.cjs');
 var tagFieldItem = require('./tag-field/tag-field-item.cjs');
 var select = require('./select/select.cjs');
 var selectItem = require('./select/select-item.cjs');
 var selectVariantContext = require('./select/select-variant-context.cjs');
+var calendar = require('./calendar/calendar.cjs');
+var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
+var utils = require('./calendar/utils.cjs');
+var date = require('@internationalized/date');
 var rangeCalendar = require('./range-calendar/range-calendar.cjs');
 var menu = require('./menu/menu.cjs');
 var popover = require('./popover/popover.cjs');
 var tabs = require('./tabs/tabs.cjs');
+var dateField = require('./date-field/date-field.cjs');
+var datePicker = require('./date-picker/date-picker.cjs');
+var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
+var checkbox = require('./checkbox/checkbox.cjs');
+var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
 var pagination = require('./pagination/pagination.cjs');
 var paginationCursor = require('./pagination/pagination-cursor.cjs');
 var paginationItem = require('./pagination/pagination-item.cjs');
@@ -48,29 +63,20 @@ var toggle$1 = require('./navbar/navbar-menu/toggle.cjs');
 var navbarItem = require('./navbar/navbar-item.cjs');
 var useNavbar = require('./navbar/use-navbar.cjs');
 var navbarContext = require('./navbar/navbar-context.cjs');
-var button = require('./button/button.cjs');
-var field = require('./field/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 index = require('./avatar/index.cjs');
 var banner = require('./banner/banner.cjs');
 var badge = require('./badge/badge.cjs');
-var date = require('@internationalized/date');
-var calendar = require('./calendar/calendar.cjs');
-var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
-var utils = require('./calendar/utils.cjs');
-var dateField = require('./date-field/date-field.cjs');
-var datePicker = require('./date-picker/date-picker.cjs');
-var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
-var checkbox = require('./checkbox/checkbox.cjs');
-var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
 var sonner = require('sonner');
+var avatarContext = require('./avatar/avatar-context.cjs');
+var avatarGroup = require('./avatar/avatar-group.cjs');
+var avatarGroupContext = require('./avatar/avatar-group-context.cjs');
+var avatar = require('./avatar/avatar.cjs');
 
 
 
 exports.useControllableState = useControllableState.useControllableState;
 exports.useDraggable = useDraggable.useDraggable;
+exports.Button = button.Button;
 exports.GovtBanner = govtBanner.GovtBanner;
 exports.Ripple = ripple.Ripple;
 exports.useRipple = useRipple.useRipple;
@@ -80,14 +86,37 @@ exports.Toggle = toggle.Toggle;
 exports.SkipNavLink = skipNavLink.SkipNavLink;
 exports.Input = input.Input;
 exports.TextField = textField.TextField;
+exports.Description = field.Description;
+exports.FieldError = field.FieldError;
+exports.FieldErrorIcon = field.FieldErrorIcon;
+exports.FieldGroup = field.FieldGroup;
+exports.Label = field.Label;
 exports.TextArea = textArea.TextArea;
 exports.TextAreaField = textAreaField.TextAreaField;
+exports.ComboBox = comboBox.ComboBox;
+exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
+exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
+exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
+exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
+exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
 exports.TagField = tagField.TagField;
 exports.TagFieldItem = tagFieldItem.TagFieldItem;
 exports.Select = select.Select;
 exports.SelectItem = selectItem.SelectItem;
 exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
 exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
+exports.Calendar = calendar.Calendar;
+exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
+exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
+exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
+exports.getEraFormat = utils.getEraFormat;
+exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
+exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
+exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
+Object.defineProperty(exports, "CalendarDate", {
+	enumerable: true,
+	get: function () { return date.CalendarDate; }
+});
 exports.RangeCalendar = rangeCalendar.RangeCalendar;
 exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
 exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -106,6 +135,14 @@ exports.TabPanel = tabs.TabPanel;
 exports.Tabs = tabs.Tabs;
 exports.TabsVariantContext = tabs.TabsVariantContext;
 exports.useTabsVariantContext = tabs.useTabsVariantContext;
+exports.DateField = dateField.DateField;
+exports.DateInput = dateField.DateInput;
+exports.DatePicker = datePicker.DatePicker;
+exports.DateRangePicker = dateRangePicker.DateRangePicker;
+exports.Checkbox = checkbox.Checkbox;
+exports.CheckboxGroup = checkbox.CheckboxGroup;
+exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
+exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
 exports.Pagination = pagination.Pagination;
 exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
@@ -135,41 +172,18 @@ exports.NavbarItem = navbarItem.NavbarItem;
 exports.useNavbar = useNavbar.useNavbar;
 exports.NavbarProvider = navbarContext.NavbarProvider;
 exports.useNavbarContext = navbarContext.useNavbarContext;
-exports.Button = button.Button;
-exports.Description = field.Description;
-exports.FieldError = field.FieldError;
-exports.FieldErrorIcon = field.FieldErrorIcon;
-exports.FieldGroup = field.FieldGroup;
-exports.Label = field.Label;
-exports.ComboBox = comboBox.ComboBox;
-exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
-exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
-exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
-exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
-exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
+exports.Avatar = index.Avatar;
 exports.Banner = banner.Banner;
 exports.Badge = badge.Badge;
-Object.defineProperty(exports, "CalendarDate", {
-	enumerable: true,
-	get: function () { return date.CalendarDate; }
-});
-exports.Calendar = calendar.Calendar;
-exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
-exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
-exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
-exports.getEraFormat = utils.getEraFormat;
-exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
-exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
-exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
-exports.DateField = dateField.DateField;
-exports.DateInput = dateField.DateInput;
-exports.DatePicker = datePicker.DatePicker;
-exports.DateRangePicker = dateRangePicker.DateRangePicker;
-exports.Checkbox = checkbox.Checkbox;
-exports.CheckboxGroup = checkbox.CheckboxGroup;
-exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
-exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
 Object.defineProperty(exports, "toast", {
 	enumerable: true,
 	get: function () { return sonner.toast; }
 });
+exports.AvatarContext = avatarContext.AvatarContext;
+exports.useAvatarContext = avatarContext.useAvatarContext;
+exports.AvatarGroup = avatarGroup.AvatarGroup;
+exports.AvatarGroupProvider = avatarGroupContext.AvatarGroupProvider;
+exports.useAvatarGroup = avatarGroupContext.useAvatarGroup;
+exports.AvatarFallback = avatar.AvatarFallback;
+exports.AvatarImage = avatar.AvatarImage;
+exports.AvatarRoot = avatar.AvatarRoot;

package/dist/cjs/modal/modal-content.cjs

@@ -7,10 +7,10 @@ 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 i18n = require('./i18n.cjs');
 var modalVariantContext = require('./modal-variant-context.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 ModalContent({
   closeButtonContent: closeButtonContentProp,

package/dist/cjs/navbar/navbar-menu/menu.cjs

@@ -16,7 +16,7 @@ const NavbarMenu = utils.forwardRef(
     const {
       slots,
       isMenuOpen,
-      height,
+      menuTopOffsetPx,
       classNames,
       setIsMenuOpen,
       domRef: parentRef,
@@ -46,7 +46,7 @@ const NavbarMenu = utils.forwardRef(
             style: {
               ...style,
               // @ts-expect-error due to not having any type declaration for CSS variables in React style prop
-              "--navbar-height": typeof height === "number" ? `${height}px` : height
+              "--menu-offset": menuTopOffsetPx
             },
             onKeyDown: reactAria.chain(handleKeyDown, onKeyDown),
             ...props,

package/dist/cjs/navbar/navbar-menu/toggle.cjs

@@ -26,13 +26,14 @@ const NavbarMenuToggle = ({
     isMenuOpen,
     setIsMenuOpen,
     menuRef,
-    position
+    position,
+    menuTopOffset
   } = navbarContext.useNavbarContext();
   const shouldScrollToTop = (isMenuOpen2) => {
     if (!isMenuOpen2 || position === "sticky" || typeof window === "undefined") {
       return;
     }
-    window.scrollTo({ top: 0, behavior: "instant" });
+    window.scrollTo({ top: menuTopOffset, behavior: "instant" });
   };
   const formatMessage = reactAria.useMessageFormatter(i18n.i18nStrings);
   const toggleStyles = $670gB$react.useMemo(() => {

package/dist/cjs/navbar/navbar.cjs

@@ -3,6 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
 var reactAria = require('react-aria');
 var children = require('../system/react-utils/children.cjs');
 var utils = require('../system/utils.cjs');
@@ -10,6 +11,20 @@ var navbarContext = require('./navbar-context.cjs');
 var menu = require('./navbar-menu/menu.cjs');
 var useNavbar = require('./use-navbar.cjs');
 
+const showOnScrollUpVariants = {
+  visible: {
+    y: 0,
+    transition: {
+      ease: [0, 0, 0.2, 1]
+    }
+  },
+  hidden: {
+    y: "-100%",
+    transition: {
+      ease: [0, 0, 0.2, 1]
+    }
+  }
+};
 const Navbar = utils.forwardRef((props, ref) => {
   const { children: children$1, ...otherProps } = props;
   const context = useNavbar.useNavbar({ ...otherProps, ref });
@@ -19,7 +34,16 @@ const Navbar = utils.forwardRef((props, ref) => {
     /* @__PURE__ */ jsxRuntime.jsx("header", { ...context.getWrapperProps(), children: childrenWithoutMenu }),
     menu$1
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(navbarContext.NavbarProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: context.isMenuOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...context.getBaseProps(), children: content }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(navbarContext.NavbarProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: context.isMenuOpen, children: context.shouldShowOnScrollUp ? /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.nav,
+    {
+      animate: context.isNavbarHidden ? "hidden" : "visible",
+      initial: "visible",
+      variants: showOnScrollUpVariants,
+      ...reactAria.mergeProps(context.getBaseProps(), context.motionProps),
+      children: content
+    }
+  ) }) : /* @__PURE__ */ jsxRuntime.jsx(Component, { ...context.getBaseProps(), children: content }) }) });
 });
 Navbar.displayName = "Navbar";
 

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

@@ -6,24 +6,30 @@ var $670gB$react = require('react');
 var usePreventScroll = require('../node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/usePreventScroll.cjs');
 var utils$2 = require('@react-aria/utils');
 var utils$1 = require('@react-stately/utils');
-var useDeepCompare = require('use-deep-compare');
 var ouiTheme = require('@opengovsg/oui-theme');
+var useScrollPosition = require('../hooks/use-scroll-position.cjs');
 var utils = require('../system/utils.cjs');
 var refs = require('../system/react-utils/refs.cjs');
 
+const NAVBAR_PRESENCE_BUFFER = 10;
 function useNavbar(originalProps) {
   const [
     {
       ref,
       as,
+      parentRef,
       height = "4rem",
       shouldBlockScroll = true,
+      shouldShowOnScrollUp = false,
+      disableScrollHandler = false,
+      onScrollPositionChange,
       isMenuOpen: isMenuOpenProp,
       isMenuDefaultOpen,
       onMenuOpenChange = () => {
       },
       className,
       classNames,
+      motionProps,
       ...otherProps
     },
     variantProps
@@ -31,62 +37,62 @@ function useNavbar(originalProps) {
   const Component = as || "nav";
   const domRef = refs.useDomRef(ref);
   const menuRef = $670gB$react.useRef(null);
-  const prevWidth = $670gB$react.useRef(0);
-  const navHeight = $670gB$react.useRef(0);
   const handleMenuOpenChange = $670gB$react.useCallback(
     (isOpen) => {
       onMenuOpenChange(isOpen || false);
     },
     [onMenuOpenChange]
   );
+  const [menuTopOffset, setMenuOffset] = $670gB$react.useState(0);
+  const [isNavbarHidden, setIsNavbarHidden] = $670gB$react.useState(false);
   const [isMenuOpen, setIsMenuOpen] = utils$1.useControlledState(
     isMenuOpenProp,
     isMenuDefaultOpen ?? false,
     handleMenuOpenChange
   );
-  const updateWidth = $670gB$react.useCallback(() => {
-    if (domRef.current) {
-      const width = domRef.current.offsetWidth;
-      if (width !== prevWidth.current) {
-        prevWidth.current = width;
-      }
-    }
-  }, [domRef]);
   usePreventScroll.usePreventScroll({
     isDisabled: !(shouldBlockScroll && isMenuOpen)
   });
   utils$2.useResizeObserver({
     ref: domRef,
     onResize: () => {
-      const currentWidth = domRef.current?.offsetWidth;
-      const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
-      if (currentWidth && currentWidth + scrollWidth == prevWidth.current) {
-        return;
-      }
-      if (currentWidth !== prevWidth.current) {
-        updateWidth();
-        setIsMenuOpen(false);
-      }
+      setMenuOffset(domRef.current?.getBoundingClientRect().top || 0);
     }
   });
+  const truePosition = variantProps.position ?? "sticky";
+  const positionVariantProp = shouldShowOnScrollUp ? "sticky" : truePosition;
+  const slots = ouiTheme.navbarStyles({
+    ...variantProps,
+    position: positionVariantProp
+  });
+  const baseStyles = ouiTheme.cn(classNames?.base, className);
+  const navHeight = $670gB$react.useRef(0);
   $670gB$react.useEffect(() => {
-    updateWidth();
     navHeight.current = domRef.current?.offsetHeight || 0;
-  }, [domRef, updateWidth]);
-  const slots = useDeepCompare.useDeepCompareMemo(
-    () => ouiTheme.navbarStyles({
-      ...variantProps
-    }),
-    [variantProps]
-  );
-  const baseStyles = ouiTheme.cn(classNames?.base, className);
+  }, [domRef]);
+  useScrollPosition.useScrollPosition({
+    elementRef: parentRef,
+    isEnabled: shouldShowOnScrollUp || !disableScrollHandler,
+    callback: ({ prevPos, currPos }) => {
+      onScrollPositionChange?.(currPos.y);
+      if (shouldShowOnScrollUp) {
+        setIsNavbarHidden((prev) => {
+          const next = currPos.y > prevPos.y + NAVBAR_PRESENCE_BUFFER && currPos.y > navHeight.current;
+          return next !== prev ? next : prev;
+        });
+      }
+    }
+  });
+  const heightPx = typeof height === "number" ? `${height}px` : height;
+  const menuTopOffsetPx = `calc(${heightPx} + ${menuTopOffset}px)`;
   const getBaseProps = (props = {}) => ({
     ...utils$2.mergeProps(otherProps, props),
+    "data-hidden": ouiTheme.dataAttr(isNavbarHidden),
     "data-menu-open": ouiTheme.dataAttr(isMenuOpen),
     ref: domRef,
     className: slots.base({ class: ouiTheme.cn(baseStyles, props?.className) }),
     style: {
-      "--navbar-height": typeof height === "number" ? `${height}px` : height,
+      "--navbar-height": heightPx,
       ...otherProps?.style,
       ...props?.style
     }
@@ -102,14 +108,18 @@ function useNavbar(originalProps) {
     Component,
     slots,
     domRef,
-    height,
+    menuTopOffset,
+    menuTopOffsetPx,
+    isNavbarHidden,
+    shouldShowOnScrollUp: shouldShowOnScrollUp && truePosition === "static",
     isMenuOpen,
     classNames,
     setIsMenuOpen,
     menuRef,
     getBaseProps,
     getWrapperProps,
-    position: variantProps.position ?? "sticky"
+    position: positionVariantProp,
+    motionProps
   };
 }
 

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.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: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
+  ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
+];
+const User = createLucideIcon.default("User", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = User;

package/dist/cjs/number-field/number-field.cjs

@@ -5,12 +5,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 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 minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.cjs');
 var plus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/plus.cjs');
-var field = require('../field/field.cjs');
-var button = require('../button/button.cjs');
 
 function NumberField(originalProps) {
   const [

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/select/select.cjs

@@ -6,12 +6,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 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 utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
-var field = require('../field/field.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/tag-field/tag-field.cjs

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
 var input = require('../input/input.cjs');
 var popover = require('../popover/popover.cjs');
 var tagFieldItem = require('./tag-field-item.cjs');
@@ -14,7 +15,6 @@ 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.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
-var field = require('../field/field.cjs');
 
 function TagField({
   classNames,

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

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 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');
+var textArea = require('../text-area/text-area.cjs');
 
 function TextAreaField({
   label,

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

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var input = require('../input/input.cjs');
 var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
 
 function TextField({
   label,

package/dist/esm/avatar/avatar-context.js

@@ -0,0 +1,9 @@
+"use strict";
+import { createContext } from '../system/react-utils/context.js';
+
+const [AvatarContext, useAvatarContext] = createContext({
+  name: "AvatarContext",
+  strict: true
+});
+
+export { AvatarContext, useAvatarContext };

package/dist/esm/avatar/avatar-group-context.js

@@ -0,0 +1,84 @@
+"use strict";
+import { useMemo, cloneElement } from 'react';
+import { avatarGroupStyles, cn } from '@opengovsg/oui-theme';
+import { getValidChildren } from '../system/react-utils/children.js';
+import { createContext } from '../system/react-utils/context.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const [AvatarGroupProvider, useAvatarGroupContext] = createContext({
+  name: "AvatarGroupContext",
+  strict: false
+});
+function useAvatarGroup(props = {}) {
+  const {
+    as,
+    ref,
+    max = 5,
+    total,
+    size,
+    color,
+    prominence,
+    radius,
+    children,
+    renderCount,
+    className,
+    classNames,
+    countProps,
+    ...otherProps
+  } = props;
+  const domRef = useDomRef(ref);
+  const Component = as || "div";
+  const context = useMemo(
+    () => ({
+      size,
+      color,
+      radius,
+      prominence
+    }),
+    [size, color, radius, prominence]
+  );
+  const slots = useMemo(
+    () => avatarGroupStyles({ className: className ?? classNames?.base }),
+    [className, classNames?.base]
+  );
+  const validChildren = getValidChildren(children);
+  const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
+  const remainingCount = total ? total : max != null ? validChildren.length - max : -1;
+  const clones = childrenWithinMax.map((child, index) => {
+    return cloneElement(child, {
+      // @ts-expect-error: CSS variable is not recognized as a valid style property
+      style: {
+        "--avatar-zindex": childrenWithinMax.length - index
+      }
+    });
+  });
+  const getAvatarGroupProps = () => {
+    return {
+      ref: domRef,
+      className: slots.base({
+        class: cn(classNames?.base, className)
+      }),
+      role: "group",
+      ...otherProps
+    };
+  };
+  const getAvatarGroupCountProps = () => {
+    return {
+      className: slots.counter({
+        class: classNames?.counter
+      }),
+      ...countProps
+    };
+  };
+  return {
+    Component,
+    context,
+    remainingCount,
+    clones,
+    renderCount,
+    getAvatarGroupProps,
+    getAvatarGroupCountProps
+  };
+}
+
+export { AvatarGroupProvider, useAvatarGroup, useAvatarGroupContext };