@opengovsg/oui 0.0.30 → 0.0.31

package/dist/cjs/avatar/avatar-context.cjs

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

package/dist/cjs/avatar/avatar-group-context.cjs

@@ -0,0 +1,88 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+var ouiTheme = require('@opengovsg/oui-theme');
+var children = require('../system/react-utils/children.cjs');
+var context = require('../system/react-utils/context.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+
+const [AvatarGroupProvider, useAvatarGroupContext] = context.createContext({
+  name: "AvatarGroupContext",
+  strict: false
+});
+function useAvatarGroup(props = {}) {
+  const {
+    as,
+    ref,
+    max = 5,
+    total,
+    size,
+    color,
+    prominence,
+    radius,
+    children: children$1,
+    renderCount,
+    className,
+    classNames,
+    countProps,
+    ...otherProps
+  } = props;
+  const domRef = refs.useDomRef(ref);
+  const Component = as || "div";
+  const context = $670gB$react.useMemo(
+    () => ({
+      size,
+      color,
+      radius,
+      prominence
+    }),
+    [size, color, radius, prominence]
+  );
+  const slots = $670gB$react.useMemo(
+    () => ouiTheme.avatarGroupStyles({ className: className ?? classNames?.base }),
+    [className, classNames?.base]
+  );
+  const validChildren = children.getValidChildren(children$1);
+  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 $670gB$react.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: ouiTheme.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
+  };
+}
+
+exports.AvatarGroupProvider = AvatarGroupProvider;
+exports.useAvatarGroup = useAvatarGroup;
+exports.useAvatarGroupContext = useAvatarGroupContext;

package/dist/cjs/avatar/avatar-group.cjs

@@ -0,0 +1,60 @@
+"use strict";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var utils = require('../system/utils.cjs');
+var avatar = require('./avatar.cjs');
+var avatarGroupContext = require('./avatar-group-context.cjs');
+
+const AvatarGroup = utils.forwardRef((props, ref) => {
+  const {
+    Component,
+    clones,
+    context,
+    remainingCount,
+    getAvatarGroupCountProps,
+    getAvatarGroupProps,
+    renderCount
+  } = avatarGroupContext.useAvatarGroup({
+    ...props,
+    ref
+  });
+  const renderedCount = $670gB$react.useMemo(() => {
+    if (remainingCount <= 0) return null;
+    if (renderCount) {
+      return renderCount(remainingCount);
+    }
+    const countAvatarVariantProps = {
+      prominence: "subtle",
+      color: "primary"
+    };
+    if (context.prominence === "subtle") {
+      countAvatarVariantProps.color = "white";
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      avatar.AvatarRoot,
+      {
+        ...countAvatarVariantProps,
+        ...getAvatarGroupCountProps(),
+        name: `+${remainingCount}`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.AvatarFallback, { children: [
+          "+",
+          remainingCount
+        ] })
+      }
+    );
+  }, [
+    context.prominence,
+    getAvatarGroupCountProps,
+    remainingCount,
+    renderCount
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...getAvatarGroupProps(), children: /* @__PURE__ */ jsxRuntime.jsxs(avatarGroupContext.AvatarGroupProvider, { value: context, children: [
+    clones,
+    renderedCount
+  ] }) });
+});
+AvatarGroup.displayName = "AvatarGroup";
+
+exports.AvatarGroup = AvatarGroup;

package/dist/cjs/avatar/avatar.cjs

@@ -0,0 +1,132 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var utils$2 = require('@react-aria/utils');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var avatarContext = require('./avatar-context.cjs');
+var avatarGroupContext = require('./avatar-group-context.cjs');
+var useImgLoadingStatus = require('./hooks/use-img-loading-status.cjs');
+var utils$1 = require('./utils.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+var user = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.cjs');
+
+const AvatarRoot = utils.forwardRef(
+  (originalProps, ref) => {
+    const groupContext = avatarGroupContext.useAvatarGroupContext();
+    const [
+      {
+        name,
+        getInitials = utils$1.getInitialsFromText,
+        classNames,
+        className,
+        children,
+        as,
+        ...props
+      },
+      {
+        color = groupContext?.color,
+        prominence = groupContext?.prominence,
+        size = groupContext?.size,
+        radius = groupContext?.radius,
+        ...variantProps
+      }
+    ] = utils.mapPropsVariants(originalProps, ouiTheme.avatarStyles.variantKeys);
+    const isInGroup = !!groupContext;
+    const domRef = refs.useDomRef(ref);
+    const slots = ouiTheme.avatarStyles({
+      color,
+      prominence,
+      size,
+      radius,
+      isInGroup,
+      ...variantProps
+    });
+    const [imageLoadingStatus, setImageLoadingStatus] = $670gB$react.useState("idle");
+    const Component = as || "span";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      avatarContext.AvatarContext,
+      {
+        value: {
+          imageLoadingStatus,
+          setImageLoadingStatus,
+          slots,
+          classNames,
+          getInitials,
+          name
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Component,
+          {
+            ref: domRef,
+            ...props,
+            className: slots.base({ className: className ?? classNames?.base }),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+const AvatarImage = utils.forwardRef(
+  ({ src, as, ...props }, ref) => {
+    const domRef = refs.useDomRef(ref);
+    const {
+      setImageLoadingStatus,
+      imageLoadingStatus,
+      slots,
+      name,
+      classNames
+    } = avatarContext.useAvatarContext();
+    const currentImageStatus = useImgLoadingStatus.useImageLoadingStatus(src, props);
+    const Component = as || "img";
+    utils$2.useLayoutEffect(() => {
+      setImageLoadingStatus(currentImageStatus);
+    }, [currentImageStatus, setImageLoadingStatus]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref: domRef,
+        alt: name,
+        "data-loaded": ouiTheme.dataAttr(imageLoadingStatus === "loaded"),
+        ...props,
+        src,
+        className: slots.image({ className: classNames?.image })
+      }
+    );
+  }
+);
+const AvatarFallback = utils.forwardRef(
+  ({ children, as, ...props }, ref) => {
+    const domRef = refs.useDomRef(ref);
+    const { slots, classNames, imageLoadingStatus, name, getInitials } = avatarContext.useAvatarContext();
+    const childrenToRender = $670gB$react.useMemo(() => {
+      if (children) return children;
+      if (name) {
+        return getInitials(name);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(user.default, { className: slots.icon({ className: classNames?.icon }) });
+    }, [children, classNames?.icon, getInitials, name, slots]);
+    const Component = as || "div";
+    if (imageLoadingStatus === "loaded") {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        title: name,
+        className: slots.fallback({ className: classNames?.fallback }),
+        ref: domRef,
+        ...props,
+        children: childrenToRender
+      }
+    );
+  }
+);
+
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;
+exports.AvatarRoot = AvatarRoot;

package/dist/cjs/avatar/hooks/use-img-loading-status.cjs

@@ -0,0 +1,68 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+
+function useIsHydrated() {
+  return $670gB$react.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function subscribe() {
+  return () => {
+  };
+}
+function resolveLoadingStatus(image, src) {
+  if (!image) {
+    return "idle";
+  }
+  if (!src) {
+    return "error";
+  }
+  if (image.src !== src) {
+    image.src = src;
+  }
+  return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
+}
+function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
+  const isHydrated = useIsHydrated();
+  const imageRef = $670gB$react.useRef(null);
+  const image = (() => {
+    if (!isHydrated) return null;
+    if (!imageRef.current) {
+      imageRef.current = new window.Image();
+    }
+    return imageRef.current;
+  })();
+  const [loadingStatus, setLoadingStatus] = $670gB$react.useState(
+    () => resolveLoadingStatus(image, src)
+  );
+  $670gB$react.useLayoutEffect(() => {
+    setLoadingStatus(resolveLoadingStatus(image, src));
+  }, [image, src]);
+  $670gB$react.useLayoutEffect(() => {
+    const updateStatus = (status) => () => {
+      setLoadingStatus(status);
+    };
+    if (!image) return;
+    const handleLoad = updateStatus("loaded");
+    const handleError = updateStatus("error");
+    image.addEventListener("load", handleLoad);
+    image.addEventListener("error", handleError);
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    if (typeof crossOrigin === "string") {
+      image.crossOrigin = crossOrigin;
+    }
+    return () => {
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
+    };
+  }, [image, crossOrigin, referrerPolicy]);
+  return loadingStatus;
+}
+
+exports.useImageLoadingStatus = useImageLoadingStatus;

package/dist/cjs/avatar/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+var avatar = require('./avatar.cjs');
+var avatarContext = require('./avatar-context.cjs');
+var avatarGroup = require('./avatar-group.cjs');
+var avatarGroupContext = require('./avatar-group-context.cjs');
+
+const Avatar = Object.assign(avatar.AvatarRoot, {
+  Root: avatar.AvatarRoot,
+  Image: avatar.AvatarImage,
+  Fallback: avatar.AvatarFallback
+});
+
+exports.AvatarFallback = avatar.AvatarFallback;
+exports.AvatarImage = avatar.AvatarImage;
+exports.AvatarRoot = avatar.AvatarRoot;
+exports.AvatarContext = avatarContext.AvatarContext;
+exports.useAvatarContext = avatarContext.useAvatarContext;
+exports.AvatarGroup = avatarGroup.AvatarGroup;
+exports.AvatarGroupProvider = avatarGroupContext.AvatarGroupProvider;
+exports.useAvatarGroup = avatarGroupContext.useAvatarGroup;
+exports.Avatar = Avatar;

package/dist/cjs/avatar/utils.cjs

@@ -0,0 +1,9 @@
+"use strict";
+'use strict';
+
+const getInitialsFromText = (text, limit = 2) => {
+  const initials = text?.trim().split(/[\s\-_.]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase()).join("") || "";
+  return initials.slice(0, limit);
+};
+
+exports.getInitialsFromText = getInitialsFromText;

package/dist/cjs/checkbox/checkbox.cjs

@@ -20,8 +20,8 @@ const Checkbox = ({
     originalProps,
     ouiTheme.checkboxStyles.variantKeys
   );
-  const { size } = checkboxGroupStyleContext.useCheckboxGroupStyleContext();
-  const styles = ouiTheme.checkboxStyles({ size, ...variants });
+  const context = checkboxGroupStyleContext.useCheckboxGroupStyleContext();
+  const styles = ouiTheme.checkboxStyles({ size: context?.size, ...variants });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Checkbox,
     {

package/dist/cjs/index.cjs

@@ -20,13 +20,11 @@ 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 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 badge = require('./badge/badge.cjs');
 var calendar = require('./calendar/calendar.cjs');
 var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
 var utils = require('./calendar/utils.cjs');
@@ -65,7 +63,14 @@ 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 index = require('./avatar/index.cjs');
+var banner = require('./banner/banner.cjs');
+var badge = require('./badge/badge.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');
 
 
 
@@ -94,14 +99,12 @@ 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.TagFieldItem = tagFieldItem.TagFieldItem;
 exports.Select = select.Select;
 exports.SelectItem = selectItem.SelectItem;
 exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
 exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
-exports.Badge = badge.Badge;
 exports.Calendar = calendar.Calendar;
 exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
 exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
@@ -169,7 +172,18 @@ exports.NavbarItem = navbarItem.NavbarItem;
 exports.useNavbar = useNavbar.useNavbar;
 exports.NavbarProvider = navbarContext.NavbarProvider;
 exports.useNavbarContext = navbarContext.useNavbarContext;
+exports.Avatar = index.Avatar;
+exports.Banner = banner.Banner;
+exports.Badge = badge.Badge;
 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/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/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 };

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

@@ -0,0 +1,58 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { forwardRef } from '../system/utils.js';
+import { AvatarRoot, AvatarFallback } from './avatar.js';
+import { useAvatarGroup, AvatarGroupProvider } from './avatar-group-context.js';
+
+const AvatarGroup = forwardRef((props, ref) => {
+  const {
+    Component,
+    clones,
+    context,
+    remainingCount,
+    getAvatarGroupCountProps,
+    getAvatarGroupProps,
+    renderCount
+  } = useAvatarGroup({
+    ...props,
+    ref
+  });
+  const renderedCount = useMemo(() => {
+    if (remainingCount <= 0) return null;
+    if (renderCount) {
+      return renderCount(remainingCount);
+    }
+    const countAvatarVariantProps = {
+      prominence: "subtle",
+      color: "primary"
+    };
+    if (context.prominence === "subtle") {
+      countAvatarVariantProps.color = "white";
+    }
+    return /* @__PURE__ */ jsx(
+      AvatarRoot,
+      {
+        ...countAvatarVariantProps,
+        ...getAvatarGroupCountProps(),
+        name: `+${remainingCount}`,
+        children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [
+          "+",
+          remainingCount
+        ] })
+      }
+    );
+  }, [
+    context.prominence,
+    getAvatarGroupCountProps,
+    remainingCount,
+    renderCount
+  ]);
+  return /* @__PURE__ */ jsx(Component, { ...getAvatarGroupProps(), children: /* @__PURE__ */ jsxs(AvatarGroupProvider, { value: context, children: [
+    clones,
+    renderedCount
+  ] }) });
+});
+AvatarGroup.displayName = "AvatarGroup";
+
+export { AvatarGroup };

package/dist/esm/avatar/avatar.js

@@ -0,0 +1,128 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useLayoutEffect } from '@react-aria/utils';
+import { avatarStyles, dataAttr } from '@opengovsg/oui-theme';
+import { forwardRef, mapPropsVariants } from '../system/utils.js';
+import { AvatarContext, useAvatarContext } from './avatar-context.js';
+import { useAvatarGroupContext } from './avatar-group-context.js';
+import { useImageLoadingStatus } from './hooks/use-img-loading-status.js';
+import { getInitialsFromText } from './utils.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+import User from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js';
+
+const AvatarRoot = forwardRef(
+  (originalProps, ref) => {
+    const groupContext = useAvatarGroupContext();
+    const [
+      {
+        name,
+        getInitials = getInitialsFromText,
+        classNames,
+        className,
+        children,
+        as,
+        ...props
+      },
+      {
+        color = groupContext?.color,
+        prominence = groupContext?.prominence,
+        size = groupContext?.size,
+        radius = groupContext?.radius,
+        ...variantProps
+      }
+    ] = mapPropsVariants(originalProps, avatarStyles.variantKeys);
+    const isInGroup = !!groupContext;
+    const domRef = useDomRef(ref);
+    const slots = avatarStyles({
+      color,
+      prominence,
+      size,
+      radius,
+      isInGroup,
+      ...variantProps
+    });
+    const [imageLoadingStatus, setImageLoadingStatus] = useState("idle");
+    const Component = as || "span";
+    return /* @__PURE__ */ jsx(
+      AvatarContext,
+      {
+        value: {
+          imageLoadingStatus,
+          setImageLoadingStatus,
+          slots,
+          classNames,
+          getInitials,
+          name
+        },
+        children: /* @__PURE__ */ jsx(
+          Component,
+          {
+            ref: domRef,
+            ...props,
+            className: slots.base({ className: className ?? classNames?.base }),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+const AvatarImage = forwardRef(
+  ({ src, as, ...props }, ref) => {
+    const domRef = useDomRef(ref);
+    const {
+      setImageLoadingStatus,
+      imageLoadingStatus,
+      slots,
+      name,
+      classNames
+    } = useAvatarContext();
+    const currentImageStatus = useImageLoadingStatus(src, props);
+    const Component = as || "img";
+    useLayoutEffect(() => {
+      setImageLoadingStatus(currentImageStatus);
+    }, [currentImageStatus, setImageLoadingStatus]);
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: domRef,
+        alt: name,
+        "data-loaded": dataAttr(imageLoadingStatus === "loaded"),
+        ...props,
+        src,
+        className: slots.image({ className: classNames?.image })
+      }
+    );
+  }
+);
+const AvatarFallback = forwardRef(
+  ({ children, as, ...props }, ref) => {
+    const domRef = useDomRef(ref);
+    const { slots, classNames, imageLoadingStatus, name, getInitials } = useAvatarContext();
+    const childrenToRender = useMemo(() => {
+      if (children) return children;
+      if (name) {
+        return getInitials(name);
+      }
+      return /* @__PURE__ */ jsx(User, { className: slots.icon({ className: classNames?.icon }) });
+    }, [children, classNames?.icon, getInitials, name, slots]);
+    const Component = as || "div";
+    if (imageLoadingStatus === "loaded") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        title: name,
+        className: slots.fallback({ className: classNames?.fallback }),
+        ref: domRef,
+        ...props,
+        children: childrenToRender
+      }
+    );
+  }
+);
+
+export { AvatarFallback, AvatarImage, AvatarRoot };

package/dist/esm/avatar/hooks/use-img-loading-status.js

@@ -0,0 +1,66 @@
+"use strict";
+import { useRef, useState, useLayoutEffect, useSyncExternalStore } from 'react';
+
+function useIsHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function subscribe() {
+  return () => {
+  };
+}
+function resolveLoadingStatus(image, src) {
+  if (!image) {
+    return "idle";
+  }
+  if (!src) {
+    return "error";
+  }
+  if (image.src !== src) {
+    image.src = src;
+  }
+  return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
+}
+function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
+  const isHydrated = useIsHydrated();
+  const imageRef = useRef(null);
+  const image = (() => {
+    if (!isHydrated) return null;
+    if (!imageRef.current) {
+      imageRef.current = new window.Image();
+    }
+    return imageRef.current;
+  })();
+  const [loadingStatus, setLoadingStatus] = useState(
+    () => resolveLoadingStatus(image, src)
+  );
+  useLayoutEffect(() => {
+    setLoadingStatus(resolveLoadingStatus(image, src));
+  }, [image, src]);
+  useLayoutEffect(() => {
+    const updateStatus = (status) => () => {
+      setLoadingStatus(status);
+    };
+    if (!image) return;
+    const handleLoad = updateStatus("loaded");
+    const handleError = updateStatus("error");
+    image.addEventListener("load", handleLoad);
+    image.addEventListener("error", handleError);
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    if (typeof crossOrigin === "string") {
+      image.crossOrigin = crossOrigin;
+    }
+    return () => {
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
+    };
+  }, [image, crossOrigin, referrerPolicy]);
+  return loadingStatus;
+}
+
+export { useImageLoadingStatus };

package/dist/esm/avatar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { AvatarRoot, AvatarFallback, AvatarImage } from './avatar.js';
+export { AvatarContext, useAvatarContext } from './avatar-context.js';
+export { AvatarGroup } from './avatar-group.js';
+export { AvatarGroupProvider, useAvatarGroup } from './avatar-group-context.js';
+
+const Avatar = Object.assign(AvatarRoot, {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarRoot };

package/dist/esm/avatar/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+const getInitialsFromText = (text, limit = 2) => {
+  const initials = text?.trim().split(/[\s\-_.]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase()).join("") || "";
+  return initials.slice(0, limit);
+};
+
+export { getInitialsFromText };

package/dist/esm/checkbox/checkbox.js

@@ -18,8 +18,8 @@ const Checkbox = ({
     originalProps,
     checkboxStyles.variantKeys
   );
-  const { size } = useCheckboxGroupStyleContext();
-  const styles = checkboxStyles({ size, ...variants });
+  const context = useCheckboxGroupStyleContext();
+  const styles = checkboxStyles({ size: context?.size, ...variants });
   return /* @__PURE__ */ jsx(
     Checkbox$1,
     {

package/dist/esm/index.js

@@ -18,13 +18,11 @@ export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
 export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
 export { ComboBoxItem } from './combo-box/combo-box-item.js';
 export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
-export { Banner } from './banner/banner.js';
 export { TagField } from './tag-field/tag-field.js';
 export { TagFieldItem } from './tag-field/tag-field-item.js';
 export { Select } from './select/select.js';
 export { SelectItem } from './select/select-item.js';
 export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
-export { Badge } from './badge/badge.js';
 export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
 export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
 export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
@@ -63,4 +61,11 @@ export { NavbarMenuToggle } from './navbar/navbar-menu/toggle.js';
 export { NavbarItem } from './navbar/navbar-item.js';
 export { useNavbar } from './navbar/use-navbar.js';
 export { NavbarProvider, useNavbarContext } from './navbar/navbar-context.js';
+export { Avatar } from './avatar/index.js';
+export { Banner } from './banner/banner.js';
+export { Badge } from './badge/badge.js';
 export { toast } from 'sonner';
+export { AvatarContext, useAvatarContext } from './avatar/avatar-context.js';
+export { AvatarGroup } from './avatar/avatar-group.js';
+export { AvatarGroupProvider, useAvatarGroup } from './avatar/avatar-group-context.js';
+export { AvatarFallback, AvatarImage, AvatarRoot } from './avatar/avatar.js';

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js

@@ -0,0 +1,17 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["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("User", __iconNode);
+
+export { __iconNode, User as default };

package/dist/types/avatar/avatar-context.d.ts

@@ -0,0 +1,12 @@
+import type { AvatarSlots, avatarStyles, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { ImageLoadingStatus } from "./hooks/use-img-loading-status";
+export interface UseAvatarContextReturn {
+    imageLoadingStatus: ImageLoadingStatus;
+    setImageLoadingStatus: React.Dispatch<React.SetStateAction<ImageLoadingStatus>>;
+    slots: ReturnType<typeof avatarStyles>;
+    classNames?: SlotsToClasses<AvatarSlots>;
+    name?: string;
+    getInitials: (name: string) => string;
+}
+export declare const AvatarContext: import("react").Context<UseAvatarContextReturn>, useAvatarContext: () => UseAvatarContextReturn;
+//# sourceMappingURL=avatar-context.d.ts.map

package/dist/types/avatar/avatar-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-context.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGxE,MAAM,WAAW,sBAAsB;IACrC,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CACnC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CACzC,CAAA;IACD,KAAK,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC;AACD,eAAO,MAAO,aAAa,mDAAE,gBAAgB,8BAIzC,CAAA"}

package/dist/types/avatar/avatar-group-context.d.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import type { AvatarGroupSlots, AvatarGroupVariantProps, AvatarVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { ReactRef } from "../system/react-utils";
+import type { HtmlUiProps, PropGetter } from "../system/types";
+import type { AvatarProps } from "./index";
+export type UseAvatarGroupContextReturn = {
+    size?: UseAvatarGroupProps["size"];
+    color?: UseAvatarGroupProps["color"];
+    radius?: UseAvatarGroupProps["radius"];
+    prominence?: UseAvatarGroupProps["prominence"];
+};
+export declare const AvatarGroupProvider: import("react").Context<UseAvatarGroupContextReturn | undefined>, useAvatarGroupContext: () => UseAvatarGroupContextReturn | undefined;
+export interface UseAvatarGroupProps extends HtmlUiProps<"div">, AvatarGroupVariantProps, Pick<AvatarVariantProps, "size" | "color" | "prominence" | "radius"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLDivElement | null>;
+    /**
+     * The maximum number of visible avatars
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Control the number of avatar not visible
+     */
+    total?: number;
+    /**
+     * This allows you to render a custom count component.
+     */
+    renderCount?: (count: number) => ReactNode;
+    /**
+     * Props to be passed to the count component.
+     */
+    countProps?: Partial<AvatarProps>;
+    /**
+     * Classname or List of classes to change the classNames of the avatar group.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <AvatarGroup classNames={{
+     *    base: "base-classes",
+     *    count: "count-classes"
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<AvatarGroupSlots>;
+}
+export declare function useAvatarGroup(props?: UseAvatarGroupProps): {
+    Component: import("../system/types").As<any>;
+    context: UseAvatarGroupContextReturn;
+    remainingCount: number;
+    clones: import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement>[];
+    renderCount: ((count: number) => ReactNode) | undefined;
+    getAvatarGroupProps: PropGetter;
+    getAvatarGroupCountProps: () => {
+        classNames?: SlotsToClasses<import("@opengovsg/oui-theme").AvatarSlots>;
+        className: string;
+        name?: string;
+        getInitials?: (name: string) => string;
+        size?: "md" | "sm" | "xs" | "2xs" | undefined;
+        color?: "white" | "primary" | undefined;
+        radius?: "none" | "lg" | "md" | "sm" | "full" | undefined;
+        prominence?: "subtle" | "strong" | undefined;
+        isInGroup?: boolean | undefined;
+        children?: ReactNode | undefined;
+    };
+};
+export type UseAvatarReturn = ReturnType<typeof useAvatarGroup>;
+//# sourceMappingURL=avatar-group-context.d.ts.map

package/dist/types/avatar/avatar-group-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group-context.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar-group-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,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;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAA;CAC/C,CAAA;AAED,eAAO,MAAO,mBAAmB,oEAAE,qBAAqB,+CAMtD,CAAA;AAEF,MAAM,WAAW,mBACf,SAAQ,WAAW,CAAC,KAAK,CAAC,EACxB,uBAAuB,EACvB,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,QAAQ,CAAC;IACtE;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAE1C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAEjC;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CAC9C;AAED,wBAAgB,cAAc,CAAC,KAAK,GAAE,mBAAwB;;;;;0BAtBtC,MAAM,KAAK,SAAS;;;;;;;;;;;;;;EAyG3C;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA"}

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

@@ -0,0 +1,5 @@
+import type { UseAvatarGroupProps } from "./avatar-group-context";
+export interface AvatarGroupProps extends UseAvatarGroupProps {
+}
+export declare const AvatarGroup: import("../system/utils").InternalForwardRefRenderFunction<"div", AvatarGroupProps, never>;
+//# sourceMappingURL=avatar-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar-group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAMjE,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;CAAG;AAEhE,eAAO,MAAM,WAAW,4FAoDtB,CAAA"}

package/dist/types/avatar/avatar.d.ts

@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from "react";
+import type { AvatarSlots, AvatarVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+export interface AvatarProps extends AvatarVariantProps, PropsWithChildren {
+    classNames?: SlotsToClasses<AvatarSlots>;
+    className?: string;
+    name?: string;
+    getInitials?: (name: string) => string;
+}
+export declare const AvatarRoot: import("../system/utils").InternalForwardRefRenderFunction<"span", AvatarProps, never>;
+export interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src?: string;
+}
+export declare const AvatarImage: import("../system/utils").InternalForwardRefRenderFunction<"img", AvatarImageProps, never>;
+export interface AvatarFallbackProps {
+    children?: React.ReactNode;
+}
+export declare const AvatarFallback: import("../system/utils").InternalForwardRefRenderFunction<"div", AvatarFallbackProps, never>;
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAW7B,MAAM,WAAW,WAAY,SAAQ,kBAAkB,EAAE,iBAAiB;IACxE,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC;AAED,eAAO,MAAM,UAAU,wFA8DtB,CAAA;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACjD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,WAAW,4FA8BvB,CAAA;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AACD,eAAO,MAAM,cAAc,+FAiC1B,CAAA"}

package/dist/types/avatar/hooks/use-img-loading-status.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithoutRef } from "react";
+export type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
+export declare function useImageLoadingStatus(src: string | undefined, { referrerPolicy, crossOrigin }: ComponentPropsWithoutRef<"img">): ImageLoadingStatus;
+//# sourceMappingURL=use-img-loading-status.d.ts.map

package/dist/types/avatar/hooks/use-img-loading-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-img-loading-status.d.ts","sourceRoot":"","sources":["../../../../src/avatar/hooks/use-img-loading-status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAGrD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAiCxE,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,wBAAwB,CAAC,KAAK,CAAC,sBA6CjE"}

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

@@ -0,0 +1,15 @@
+import { AvatarFallback, AvatarImage, AvatarRoot } from "./avatar";
+export type { AvatarFallbackProps, AvatarImageProps, AvatarProps, } from "./avatar";
+export declare const Avatar: import("../system/utils").InternalForwardRefRenderFunction<"span", import("./avatar").AvatarProps, never> & {
+    Root: import("../system/utils").InternalForwardRefRenderFunction<"span", import("./avatar").AvatarProps, never>;
+    Image: import("../system/utils").InternalForwardRefRenderFunction<"img", import("./avatar").AvatarImageProps, never>;
+    Fallback: import("../system/utils").InternalForwardRefRenderFunction<"div", import("./avatar").AvatarFallbackProps, never>;
+};
+export { AvatarRoot, AvatarImage, AvatarFallback };
+export { AvatarContext, useAvatarContext } from "./avatar-context";
+export type { UseAvatarContextReturn } from "./avatar-context";
+export { AvatarGroup } from "./avatar-group";
+export type { AvatarGroupProps } from "./avatar-group";
+export { AvatarGroupProvider, useAvatarGroup } from "./avatar-group-context";
+export type { UseAvatarGroupContextReturn, UseAvatarGroupProps, } from "./avatar-group-context";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAElE,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,GACZ,MAAM,UAAU,CAAA;AAEjB,eAAO,MAAM,MAAM;;;;CAIjB,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA;AAGlD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAClE,YAAY,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5E,YAAY,EACV,2BAA2B,EAC3B,mBAAmB,GACpB,MAAM,wBAAwB,CAAA"}

package/dist/types/avatar/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getInitialsFromText: (text: string, limit?: number) => string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/avatar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/avatar/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,SAAU,MAAM,qBAAc,MAU7D,CAAA"}

package/dist/types/checkbox/checkbox-group-style-context.d.ts

@@ -2,5 +2,5 @@ import type { CheckboxProps } from "./checkbox";
 export interface UseProvideCheckboxGroupStylesReturn {
     size: CheckboxProps["size"];
 }
-export declare const CheckboxGroupStyleContext: import("react").Context<UseProvideCheckboxGroupStylesReturn>, useCheckboxGroupStyleContext: () => UseProvideCheckboxGroupStylesReturn;
+export declare const CheckboxGroupStyleContext: import("react").Context<UseProvideCheckboxGroupStylesReturn | undefined>, useCheckboxGroupStyleContext: () => UseProvideCheckboxGroupStylesReturn | undefined;
 //# sourceMappingURL=checkbox-group-style-context.d.ts.map

package/dist/types/checkbox/checkbox-group-style-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group-style-context.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox-group-style-context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAG/C,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAC5B;AAED,eAAO,MAAO,yBAAyB,gEAAE,4BAA4B,2CAOjE,CAAA"}
+{"version":3,"file":"checkbox-group-style-context.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox-group-style-context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAG/C,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAC5B;AAED,eAAO,MAAO,yBAAyB,4EAAE,4BAA4B,uDAOjE,CAAA"}

package/dist/types/index.d.mts

@@ -30,4 +30,5 @@ export * from "./number-field";
 export * from "./modal";
 export * from "./toast";
 export * from "./navbar";
+export * from "./avatar";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts

@@ -30,4 +30,5 @@ export * from "./number-field";
 export * from "./modal";
 export * from "./toast";
 export * from "./navbar";
+export * from "./avatar";
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,SAAS,IAAI,aAAa,EAC1B,gBAAgB,IAAI,oBAAoB,EACxC,YAAY,EAEZ,cAAc,EACf,MAAM,uBAAuB,CAAA;AAG9B,OAAO,EAIL,WAAW,IAAI,eAAe,EAQ/B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EACV,uBAAuB,EACvB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAS7B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAK9C,eAAO,MAAO,kBAAkB,gEAAE,qBAAqB,2CAMrD,CAAA;AACF,MAAM,WAAW,SAAS,CAAC,CAAC,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,gBAAgB;IACtE,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CAC9C;AA4CD,eAAO,MAAM,IAAI,GA1CE,CAAC,SAAS,MAAM,0EAYxB,MACP,SA6B4C,CAAA;AAEhD,MAAM,WAAW,aACf,SAAQ,iBAAiB,EACvB,uBAAuB;IACzB,UAAU,CAAC,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAA;IACjD,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAC9C,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED,eAAO,MAAM,QAAQ,kGA+HnB,CAAA;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,2CASlD;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,CACjC,SAAQ,oBAAoB,CAAC,CAAC,CAAC,EAC7B,uBAAuB;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,UAAU,CAAC,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAA;CACrD;AAwCD,eAAO,MAAM,WAAW,GAtCE,CAAC,SAAS,MAAM,8EAzM/B,MACP,SA8O0D,CAAA;AAE9D,eAAO,MAAM,WAAW,wBAAkB,CAAA;AAC1C,eAAO,MAAM,cAAc,gEACmytD,MAAO,aAAa,wDADlytD,CAAA"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,SAAS,IAAI,aAAa,EAC1B,gBAAgB,IAAI,oBAAoB,EACxC,YAAY,EAEZ,cAAc,EACf,MAAM,uBAAuB,CAAA;AAG9B,OAAO,EAIL,WAAW,IAAI,eAAe,EAQ/B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EACV,uBAAuB,EACvB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAS7B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAK9C,eAAO,MAAO,kBAAkB,gEAAE,qBAAqB,2CAOrD,CAAA;AACF,MAAM,WAAW,SAAS,CAAC,CAAC,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,gBAAgB;IACtE,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CAC9C;AA4CD,eAAO,MAAM,IAAI,GA1CE,CAAC,SAAS,MAAM,0EAY/B,MAAK,SA8BuC,CAAA;AAEhD,MAAM,WAAW,aACf,SAAQ,iBAAiB,EACvB,uBAAuB;IACzB,UAAU,CAAC,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAA;IACjD,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAC9C,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED,eAAO,MAAM,QAAQ,kGA+HnB,CAAA;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,2CASlD;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,CACjC,SAAQ,oBAAoB,CAAC,CAAC,CAAC,EAC7B,uBAAuB;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,UAAU,CAAC,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAA;CACrD;AAwCD,eAAO,MAAM,WAAW,GAtCE,CAAC,SAAS,MAAM,8EAzMtC,MAAK,SA+OqD,CAAA;AAE9D,eAAO,MAAM,WAAW,wBAAkB,CAAA;AAC1C,eAAO,MAAM,cAAc,gEAC0xtD,MAAO,aAAa,wDADzxtD,CAAA"}

package/dist/types/system/react-utils/context.d.ts

@@ -1,9 +1,9 @@
-export interface CreateContextOptions<T = any> {
+export interface CreateContextOptions<T = any, S extends boolean = true> {
     /**
      * If `true`, React will throw if context is `null` or `undefined`
      * In some cases, you might want to support nested context, so you can set it to `false`
      */
-    strict?: boolean;
+    strict?: S;
     /**
      * Error message to throw if the context is `undefined`
      */
@@ -14,11 +14,11 @@ export interface CreateContextOptions<T = any> {
     name?: string;
     defaultValue?: T;
 }
-export type CreateContextReturn<T> = [React.Context<T>, () => T];
+export type CreateContextReturn<T, S extends boolean> = S extends true ? [React.Context<T>, () => T] : [React.Context<T | undefined>, () => T | undefined];
 /**
  * Creates a named context, provider, and hook.
  *
  * @param options - create context options
  */
-export declare function createContext<ContextType>(options?: CreateContextOptions<ContextType>): CreateContextReturn<ContextType>;
+export declare function createContext<ContextType, S extends boolean = true>(options?: CreateContextOptions<ContextType, S>): CreateContextReturn<ContextType, S>;
 //# sourceMappingURL=context.d.ts.map

package/dist/types/system/react-utils/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/context.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,GAAG;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,YAAY,CAAC,EAAE,CAAC,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAA;AAEhE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,WAAW,EACvC,OAAO,GAAE,oBAAoB,CAAC,WAAW,CAAM,GAC9C,mBAAmB,CAAC,WAAW,CAAC,CA2BlC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/context.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,OAAO,GAAG,IAAI;IACrE;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAA;IACV;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,YAAY,CAAC,EAAE,CAAC,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GAClE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAC3B,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,CAAA;AAEvD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,OAAO,GAAG,IAAI,EACjE,OAAO,GAAE,oBAAoB,CAAC,WAAW,EAAE,CAAC,CAAM,GACjD,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAC,CA2BrC"}

package/package.json

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