@bspk/ui 1.3.4 → 1.3.5

package/dist/components/Avatar/Avatar.d.ts

@@ -48,7 +48,7 @@ export type AvatarProps = CommonProps<'disabled'> & {
      * When provided the image will be displayed instead of the icon or initials.
      *
      * @example
-     *     /profile.jpg
+     *     /avatar-01.png
      */
     image?: string;
     /**
@@ -76,7 +76,7 @@ export type AvatarProps = CommonProps<'disabled'> & {
  *             <Avatar
  *                 color="blue"
  *                 icon={<SvgPerson />}
- *                 image="/profile.jpg"
+ *                 image="/avatar-01.png"
  *                 initials="AR"
  *                 name="Andre Giant"
  *                 showTooltip
@@ -90,5 +90,5 @@ export type AvatarProps = CommonProps<'disabled'> & {
  * @name Avatar
  * @phase UXReview
  */
-export declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name: ariaLabel, hideTooltip, onClick, disabled, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name, hideTooltip, onClick, disabled, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Avatar/Avatar.js

@@ -15,7 +15,7 @@ import { Tooltip } from '../Tooltip';
  *             <Avatar
  *                 color="blue"
  *                 icon={<SvgPerson />}
- *                 image="/profile.jpg"
+ *                 image="/avatar-01.png"
  *                 initials="AR"
  *                 name="Andre Giant"
  *                 showTooltip
@@ -29,15 +29,15 @@ import { Tooltip } from '../Tooltip';
  * @name Avatar
  * @phase UXReview
  */
-export function Avatar({ initials: initialsProp, color = 'grey', size = 'small', showIcon, image, name: ariaLabel, hideTooltip = false, onClick, disabled, ...props }) {
+export function Avatar({ initials: initialsProp, color = 'grey', size = 'small', showIcon, image, name, hideTooltip = false, onClick, disabled, ...props }) {
     const children = useMemo(() => {
         if (image)
-            return _jsx("img", { alt: ariaLabel, "aria-hidden": true, src: image });
+            return _jsx("img", { alt: name, "aria-hidden": true, src: image });
         if (showIcon)
             return (_jsx("span", { "aria-hidden": true, "data-icon": true, children: _jsx(SvgPerson, {}) }));
         let initials = initialsProp;
-        if (ariaLabel && !initials)
-            initials = ariaLabel
+        if (name && !initials)
+            initials = name
                 .split(' ')
                 .map((word) => word.charAt(0))
                 .slice(0, 2)
@@ -46,10 +46,10 @@ export function Avatar({ initials: initialsProp, color = 'grey', size = 'small',
         if (initials)
             return (_jsx("span", { "aria-hidden": true, "data-initials": true, children: initials.slice(0, 2) }));
         return null;
-    }, [ariaLabel, showIcon, image, initialsProp]);
+    }, [name, showIcon, image, initialsProp]);
     if (!children)
         return null;
-    const avatar = (triggerProps) => (_jsx("div", { ...props, ...triggerProps, "aria-disabled": disabled || undefined, "aria-label": onClick ? ariaLabel : undefined, "aria-labelledby": onClick ? triggerProps['aria-labelledby'] : undefined, "aria-roledescription": "person", "data-bspk": "avatar", "data-color": color, "data-size": size, onClickCapture: disabled ? undefined : onClick, role: onClick ? 'button' : '', tabIndex: onClick && !disabled ? 0 : undefined, children: children }));
-    return !hideTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar({});
+    const avatar = (triggerProps) => (_jsx("div", { ...props, ...triggerProps, "aria-disabled": disabled || undefined, "aria-label": name, "aria-roledescription": "person", "data-bspk": "avatar", "data-color": color, "data-size": size, onClickCapture: disabled ? undefined : onClick, role: onClick ? 'button' : 'img', tabIndex: onClick && !disabled ? 0 : undefined, children: children }));
+    return !hideTooltip ? _jsx(Tooltip, { label: name, children: avatar }) : avatar({});
 }
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AA8EpE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,KAAK,EACnB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACE;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,iBAAe,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEzE,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,+BACnB,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,mCAClB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAClB,CACV,CAAC;QAEN,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,iBACQ,KAAK,KACL,YAAY,mBACD,QAAQ,IAAI,SAAS,gBACxB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,qBAC1B,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,0BACjD,QAAQ,eACnB,QAAQ,gBACN,KAAK,eACN,IAAI,EACf,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAC9C,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAC7B,QAAQ,EAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAE7C,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AACrF,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AA8EpE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACE;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,IAAI,iBAAe,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEpE,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,+BACnB,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,IAAI,IAAI,CAAC,QAAQ;YACjB,QAAQ,GAAG,IAAI;iBACV,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,mCAClB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAClB,CACV,CAAC;QAEN,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE1C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,iBACQ,KAAK,KACL,YAAY,mBACD,QAAQ,IAAI,SAAS,gBACxB,IAAI,0BACK,QAAQ,eACnB,QAAQ,gBACN,KAAK,eACN,IAAI,EACf,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAC9C,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAChC,QAAQ,EAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAE7C,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,IAAI,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAChF,CAAC"}

package/dist/components/Avatar/AvatarExample.js

@@ -38,7 +38,7 @@ export const presets = [
         label: 'With Image',
         propState: {
             name: 'Andre Giant',
-            image: '/profile.jpg',
+            image: '/avatar-01.png',
             showIcon: false,
         },
     },

package/dist/components/Avatar/AvatarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarExample.js","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAA0B;IAC1C;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;YAClD,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;YAClD,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;SAC9C;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,cAAc;YACrB,QAAQ,EAAE,KAAK;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO;CACV,CAAC"}
+{"version":3,"file":"AvatarExample.js","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAA0B;IAC1C;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;YAClD,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;YAClD,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;SAC9C;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,gBAAgB;YACvB,QAAQ,EAAE,KAAK;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO;CACV,CAAC"}

package/dist/components/Avatar/avatar.css

@@ -1,8 +1,11 @@
 [data-bspk=avatar] {
+  /*! 
+  --avatar-border: is set via inline style 
+  */
   --height: var(--spacing-sizing-10);
   --font: var(--labels-base);
   --svg-size: var(--spacing-sizing-10);
-  border: unset;
+  border: var(--avatar-border);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -107,6 +110,7 @@
 }
 [data-bspk=avatar]:focus:not(:active) {
   outline: 2px solid var(--stroke-neutral-focus);
+  outline-offset: -2px;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Avatar/avatar.css.js

@@ -2,10 +2,13 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=avatar] {
+  /*! 
+  --avatar-border: is set via inline style 
+  */
   --height: var(--spacing-sizing-10);
   --font: var(--labels-base);
   --svg-size: var(--spacing-sizing-10);
-  border: unset;
+  border: var(--avatar-border);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -110,6 +113,7 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
 }
 [data-bspk=avatar]:focus:not(:active) {
   outline: 2px solid var(--stroke-neutral-focus);
+  outline-offset: -2px;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,13 +1,14 @@
 import './avatar-group.scss';
 import { AvatarProps, SizeVariant } from '-/components/Avatar';
+import { CommonProps } from '-/types/common';
 export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
-export type AvatarGroupProps = {
+export type AvatarGroupProps = CommonProps<'style'> & {
     /**
      * The avatars to display in the group.
      *
      * @example
      *     [
-     *         { name: 'Fezzik', image: '/profile.jpg' },
+     *         { name: 'Fezzik', image: '/avatar-01.png' },
      *         { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
      *         { name: 'Miracle Max', initials: 'MM', color: 'green' },
      *         { name: 'Princess Buttercup', showIcon: true },
@@ -22,19 +23,23 @@ export type AvatarGroupProps = {
      *
      * @default small
      */
-    size?: Extract<SizeVariant, 'large' | 'medium' | 'small' | 'x-small'>;
+    size?: SizeVariant;
     /**
-     * The maximum number of avatars to display before showing the overflowCount.
+     * The maximum number of avatars to display before showing the overflow menu.
      *
      * This is used to limit the number of avatars displayed in the group.
      *
      * Recommended to set this to a value between 3 and 5 for optimal display.
+     *
+     * @default 5
+     * @min 1
+     * @max 5
      */
     max?: number;
     /**
      * The variant of the avatar group.
      *
-     * @default spread
+     * @default auto
      */
     variant?: 'spread' | 'stacked';
 };
@@ -59,4 +64,4 @@ export type AvatarGroupProps = {
  * @name AvatarGroup
  * @phase UXReview
  */
-export declare function AvatarGroup({ items, size, max, variant }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AvatarGroup({ items, size, max: maxProp, variant, style }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './avatar-group.css.js';
+import { AvatarGroupOverflow } from './Overflow';
 import { Avatar } from '../Avatar';
 /**
  * AvatarGroup component displays a group of avatars.
@@ -22,11 +23,9 @@ import { Avatar } from '../Avatar';
  * @name AvatarGroup
  * @phase UXReview
  */
-export function AvatarGroup({ items, size = 'small', max = 5, variant }) {
-    if (!Array.isArray(items) || !items?.length)
-        return null;
-    const overFlowCount = items.length - max;
-    const small = size === 'x-small' || size === 'small';
-    return (_jsx("div", { "data-bspk": "avatar-group", "data-max": max, "data-size": size, "data-variant": variant, children: _jsxs("div", { "data-gap": variant === 'spread' ? (small ? '01' : '02') : undefined, "data-wrap": true, children: [items.slice(0, max).map((item, index) => (_jsx(Avatar, { "data-stacked": variant === 'stacked' ? (small ? '01' : '02') : undefined, ...item, size: size }, index))), overFlowCount > 0 && (_jsx("div", { "aria-hidden": true, "data-bspk": "avatar", "data-color": "white", "data-size": size, children: _jsxs("span", { "data-overflow-count": true, children: ["+", overFlowCount] }) }))] }) }));
+export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'spread', style }) {
+    const max = maxProp > items.length ? items.length : maxProp;
+    const overflowItems = items.slice(max);
+    return !Array.isArray(items) || !items?.length ? null : (_jsx("div", { "data-bspk": "avatar-group", "data-max": max, "data-size": size, "data-variant": variant, style: style, children: _jsxs("div", { "data-wrap": true, children: [items.slice(0, max).map((item, index) => (_jsx(Avatar, { ...item, onClick: () => { }, size: size }, index))), overflowItems.length > 0 && (_jsx(AvatarGroupOverflow, { items: overflowItems, overflow: overflowItems.length, size: size }))] }) }));
 }
 //# sourceMappingURL=AvatarGroup.js.map

package/dist/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AA0CvE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IACrF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACzC,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,OAAO,CAAC;IAErD,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,2BAAe,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,gCAClE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,oBACW,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,KAEnE,IAAI,EACR,IAAI,EAAE,IAAI,IAFL,KAAK,CAGZ,CACL,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,gBAAY,OAAO,eAAY,IAAI,YAClE,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AA+CvE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAChH,MAAM,GAAG,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpD,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,EAAE,KAAK,EAAE,KAAK,YAC7F,6CACK,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,OAAiB,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,IAAI,EAAE,IAAI,IAA9C,KAAK,CAA6C,CAClE,CAAC,EACD,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,KAAC,mBAAmB,IAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,CAC5F,IACC,GACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/AvatarGroup/AvatarGroupExample.js

@@ -1,37 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { COLOR_VARIANTS } from '../../utils/colorVariants';
 const BLUE = COLOR_VARIANTS[4];
 const GREEN = COLOR_VARIANTS[5];
-const GREY = COLOR_VARIANTS[0];
 const PURPLE = COLOR_VARIANTS[10];
 export const presets = [
     {
         label: 'Stacked',
         propState: {
             items: [
-                { name: 'Fezzik', image: '/profile.jpg' },
+                { name: 'Fezzik', image: '/avatar-01.png' },
                 { name: 'Inigo Montoya', initials: 'IM', color: BLUE },
                 { name: 'Miracle Max', initials: 'MM', showIcon: false, color: GREEN },
                 { name: 'Princess Buttercup', showIcon: true, color: PURPLE },
             ],
             variant: 'stacked',
+            max: 10,
         },
     },
     {
-        label: 'Stacked + Overflow',
+        label: 'Stacked With Overflow',
         propState: {
             items: [
-                { name: 'Fezzik', image: '/profile.jpg' },
-                { name: 'Inigo Montoya', initials: 'IM', color: BLUE },
-                { name: 'Miracle Max', initials: 'MM', showIcon: false, color: GREEN },
-                { name: 'Westley Man In Black', initials: 'WB', color: GREY },
-                { name: 'Princess Buttercup', showIcon: true, color: PURPLE },
+                {
+                    name: 'Alice Johnson',
+                    image: '/avatar-01.png',
+                },
+                {
+                    name: 'Bob Smith',
+                    image: '/avatar-02.png',
+                },
+                {
+                    name: 'Charlie Brown',
+                    image: '/avatar-03.png',
+                },
+                {
+                    name: 'David Wilson',
+                    image: '/avatar-04.png',
+                },
+                {
+                    name: 'Eva Green',
+                    image: '/avatar-05.png',
+                },
+                { name: 'Frank Miller', image: '/avatar-06.png' },
+                { name: 'Grace Lee', image: '/avatar-07.png' },
+                { name: 'Hannah Kim', image: '/avatar-08.png' },
+                { name: 'Ian Clark', image: '/avatar-09.png' },
+                { name: 'Julia Adams', image: '/avatar-10.png' },
+                { name: 'Katherine Johnson', image: '/avatar-11.png' },
             ],
-            max: 3,
             variant: 'stacked',
+            max: 5,
         },
     },
 ];
 export const AvatarGroupExample = {
     presets,
+    defaultState: {
+        variant: 'spread',
+    },
+    render: ({ props, Component, preset }) => _jsx(Component, { ...props }, preset?.label),
+    variants: false,
 };
 //# sourceMappingURL=AvatarGroupExample.js.map

package/dist/components/AvatarGroup/AvatarGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupExample.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroupExample.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,MAAM,IAAI,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAChC,MAAM,IAAI,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC;AAElC,MAAM,CAAC,MAAM,OAAO,GAA+B;IAC/C;QACI,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;gBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACtD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBACtE,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAChE;YACD,OAAO,EAAE,SAAwC;SACpD;KACJ;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;gBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACtD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBACtE,EAAE,IAAI,EAAE,sBAAsB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC7D,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAChE;YACD,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,SAAwC;SACpD;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,OAAO;CACV,CAAC"}
+{"version":3,"file":"AvatarGroupExample.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroupExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,MAAM,IAAI,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAChC,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC;AAElC,MAAM,CAAC,MAAM,OAAO,GAA+B;IAC/C;QACI,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE;gBAC3C,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACtD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBACtE,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAChE;YACD,OAAO,EAAE,SAAwC;YACjD,GAAG,EAAE,EAAE;SACV;KACJ;IACD;QACI,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,IAAI,EAAE,eAAe;oBACrB,KAAK,EAAE,gBAAgB;iBAC1B;gBACD;oBACI,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,gBAAgB;iBAC1B;gBACD;oBACI,IAAI,EAAE,eAAe;oBACrB,KAAK,EAAE,gBAAgB;iBAC1B;gBACD;oBACI,IAAI,EAAE,cAAc;oBACpB,KAAK,EAAE,gBAAgB;iBAC1B;gBACD;oBACI,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,gBAAgB;iBAC1B;gBACD,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,gBAAgB,EAAE;gBACjD,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE;gBAC9C,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE;gBAC/C,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE;gBAC9C,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE;gBAChD,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,gBAAgB,EAAE;aACzD;YACD,OAAO,EAAE,SAAwC;YACjD,GAAG,EAAE,CAAC;SACT;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,OAAO;IACP,YAAY,EAAE;QACV,OAAO,EAAE,QAAQ;KACpB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAyB,KAAK,IAAxB,MAAM,EAAE,KAAK,CAAe;IACtF,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/AvatarGroup/Overflow.d.ts

@@ -0,0 +1,11 @@
+import { AvatarProps, SizeVariant } from '-/components/Avatar';
+type AvatarGroupOverflowProps = {
+    /** The number of overflow avatars */
+    overflow: number;
+    /** The size of the avatar group */
+    size: SizeVariant;
+    /** The avatars in the overflow */
+    items: AvatarProps[];
+};
+export declare function AvatarGroupOverflow({ items: itemsProp, overflow, size }: AvatarGroupOverflowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AvatarGroup/Overflow.js

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar } from '../Avatar';
+import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
+import { Portal } from '../Portal';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
+import { useFloating } from '../../hooks/useFloating';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
+import { useIds } from '../../utils/useIds';
+export function AvatarGroupOverflow({ items: itemsProp, overflow, size }) {
+    const items = useIds(`avatar-overflow`, itemsProp);
+    const menuId = `avatar-overflow-menu-${items[0]?.id}`;
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: items.map((i) => i.id),
+    });
+    const closeMenu = () => setActiveElementId(null);
+    const open = Boolean(activeElementId);
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: false,
+    });
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => closeMenu(),
+        disabled: !open,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("button", { "aria-activedescendant": activeElementId || undefined, "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "menu", "aria-hidden": true, "aria-label": `Show ${overflow} more avatar${overflow > 1 ? 's' : ''}`, "data-bspk": "avatar", "data-bspk-owner": "avatar-overflow", "data-size": size, onBlur: () => closeMenu(), onClick: () => setActiveElementId(activeElementId === null ? items[0]?.id : null), onKeyDown: handleKeyDown(arrowKeyCallbacks), ref: elements.setReference, role: "combobox", children: _jsxs("span", { "data-overflow-count": true, children: ["+", overflow] }) }), open && (_jsx(Portal, { children: _jsx(Menu, { id: menuId, innerRef: elements.setFloating, role: "menu", style: {
+                        ...floatingStyles,
+                        ...scrollListItemsStyle(5, items.length),
+                        '--list-item-height': `var(--spacing-sizing-12)`,
+                        paddingRight: 'var(--spacing-sizing-04)',
+                    }, width: "fit-content", children: items.map((item, index) => (_jsx(ListItem, { active: activeElementId === item.id, label: item.name, leading: _jsx(Avatar, { ...item, hideTooltip: true, size: "small" }) }, index))) }) }))] }));
+}
+//# sourceMappingURL=Overflow.js.map

package/dist/components/AvatarGroup/Overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/Overflow.tsx"],"names":[],"mappings":"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"}

package/dist/components/AvatarGroup/avatar-group.css

@@ -1,23 +1,37 @@
 [data-bspk=avatar-group] {
-  width: 100%;
+  width: fit-content;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 [data-bspk=avatar-group] [data-wrap] {
-  width: 100%;
+  min-width: fit-content;
   display: flex;
   flex-direction: row;
-  align-items: end;
-  justify-content: end;
-  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+}
+[data-bspk=avatar-group] [data-bspk=avatar] {
+  z-index: 1;
+}
+[data-bspk=avatar-group] [data-bspk=avatar]:hover {
+  z-index: 2;
+}
+[data-bspk=avatar-group] [data-bspk=avatar][data-bspk-owner=avatar-overflow] {
+  --avatar-border: solid 1px var(--stroke-neutral-low);
+  background-color: var(--surface-neutral-t1-base);
 }
-[data-bspk=avatar-group] [data-gap="01"] {
-  gap: var(--spacing-sizing-01);
+[data-bspk=avatar-group][data-variant=spread] {
+  --avatar-border: none;
 }
-[data-bspk=avatar-group] [data-gap="02"] {
-  gap: var(--spacing-sizing-02);
+[data-bspk=avatar-group][data-variant=spread] [data-bspk=avatar] + [data-bspk=avatar] {
+  margin-left: var(--spacing-sizing-02);
 }
-[data-bspk=avatar-group] [data-stacked="02"]:not(:last-child) {
-  margin-right: -8px;
+[data-bspk=avatar-group][data-variant=stacked] {
+  --avatar-border: solid 1px var(--stroke-neutral-low);
 }
-[data-bspk=avatar-group] [data-stacked="01"]:not(:last-child) {
-  margin-right: -4px;
+[data-bspk=avatar-group][data-variant=stacked] [data-bspk=avatar] + [data-bspk=avatar] {
+  margin-left: calc(var(--spacing-sizing-02) * -1);
 }

package/dist/components/AvatarGroup/avatar-group.css.js

@@ -2,27 +2,41 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=avatar-group] {
-  width: 100%;
+  width: fit-content;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 [data-bspk=avatar-group] [data-wrap] {
-  width: 100%;
+  min-width: fit-content;
   display: flex;
   flex-direction: row;
-  align-items: end;
-  justify-content: end;
-  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+}
+[data-bspk=avatar-group] [data-bspk=avatar] {
+  z-index: 1;
+}
+[data-bspk=avatar-group] [data-bspk=avatar]:hover {
+  z-index: 2;
+}
+[data-bspk=avatar-group] [data-bspk=avatar][data-bspk-owner=avatar-overflow] {
+  --avatar-border: solid 1px var(--stroke-neutral-low);
+  background-color: var(--surface-neutral-t1-base);
 }
-[data-bspk=avatar-group] [data-gap="01"] {
-  gap: var(--spacing-sizing-01);
+[data-bspk=avatar-group][data-variant=spread] {
+  --avatar-border: none;
 }
-[data-bspk=avatar-group] [data-gap="02"] {
-  gap: var(--spacing-sizing-02);
+[data-bspk=avatar-group][data-variant=spread] [data-bspk=avatar] + [data-bspk=avatar] {
+  margin-left: var(--spacing-sizing-02);
 }
-[data-bspk=avatar-group] [data-stacked="02"]:not(:last-child) {
-  margin-right: -8px;
+[data-bspk=avatar-group][data-variant=stacked] {
+  --avatar-border: solid 1px var(--stroke-neutral-low);
 }
-[data-bspk=avatar-group] [data-stacked="01"]:not(:last-child) {
-  margin-right: -4px;
+[data-bspk=avatar-group][data-variant=stacked] [data-bspk=avatar] + [data-bspk=avatar] {
+  margin-left: calc(var(--spacing-sizing-02) * -1);
 }
 `));
 document.head.appendChild(style);

package/dist/components/Badge/BadgeExample.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar } from '../Avatar';
 export const BadgeExample = {
     render: ({ props, Component }) => {
-        return (_jsx(Component, { ...props, children: _jsx(Avatar, { image: "/profile.jpg", name: "Andre Giant" }) }));
+        return (_jsx(Component, { ...props, children: _jsx(Avatar, { image: "/avatar-01.png", name: "Andre Giant" }) }));
     },
     containerStyle: { width: '100%' },
     variants: {

package/dist/components/Badge/BadgeExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeExample.js","sourceRoot":"","sources":["../../../src/components/Badge/BadgeExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,YAAY,GAAiC;IACtD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,GAAG,GAC1C,CACf,CAAC;IACN,CAAC;IACD,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,QAAQ,EAAE;QACN,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAE;QAC/D,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE;KAC7C;CACJ,CAAC"}
+{"version":3,"file":"BadgeExample.js","sourceRoot":"","sources":["../../../src/components/Badge/BadgeExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,YAAY,GAAiC;IACtD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,MAAM,IAAC,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,aAAa,GAAG,GAC5C,CACf,CAAC;IACN,CAAC;IACD,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,QAAQ,EAAE;QACN,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAE;QAC/D,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE;KAC7C;CACJ,CAAC"}

package/dist/components/BadgeDot/BadgeDotExample.js

@@ -6,7 +6,7 @@ export const BadgeDotExample = {
     defaultState: {},
     disableProps: [],
     render: ({ props, Component }) => {
-        return (_jsx(Component, { ...props, children: props.outline === true ? (_jsx(Button, { label: "Button", size: "large" })) : (_jsx(Avatar, { image: "/profile.jpg", name: "Andre Giant" })) }));
+        return (_jsx(Component, { ...props, children: props.outline === true ? (_jsx(Button, { label: "Button", size: "large" })) : (_jsx(Avatar, { image: "/avatar-01.png", name: "Andre Giant" })) }));
     },
     sections: [],
     variants: {

package/dist/components/BadgeDot/BadgeDotExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeDotExample.js","sourceRoot":"","sources":["../../../src/components/BadgeDot/BadgeDotExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YACf,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CACtB,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG,CACzC,CAAC,CAAC,CAAC,CACA,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,GAAG,CACrD,GACO,CACf,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE;QACN,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;KACjD;CACJ,CAAC"}
+{"version":3,"file":"BadgeDotExample.js","sourceRoot":"","sources":["../../../src/components/BadgeDot/BadgeDotExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YACf,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CACtB,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG,CACzC,CAAC,CAAC,CAAC,CACA,KAAC,MAAM,IAAC,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,aAAa,GAAG,CACvD,GACO,CACf,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE;QACN,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;KACjD;CACJ,CAAC"}

package/dist/components/Button/Button.d.ts

@@ -2,7 +2,7 @@ import './button.scss';
 import { AriaAttributes, ElementType, ReactNode } from 'react';
 import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
+export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -94,5 +94,5 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
  * @name Button
  * @phase UXReview
  */
-export declare function Button<As extends ElementType = 'button'>(props: AriaAttributes & ElementProps<ButtonProps<As>, As>): JSX.Element;
+export declare function Button<As extends ElementType = ElementType>(props: AriaAttributes & ElementProps<ButtonProps<As>, As>): JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,6 @@
 import './card.scss';
 import { ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
 export type CardProps = {
     /**
      * The content of the card.
@@ -36,5 +37,5 @@ export type CardProps = {
  * @name Card
  * @phase UXReview
  */
-export declare function Card({ children, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ children, variant, ...props }: ElementProps<CardProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/Card.js

@@ -22,7 +22,7 @@ import './card.css.js';
  * @name Card
  * @phase UXReview
  */
-export function Card({ children, variant = 'elevated' }) {
-    return (_jsx("div", { "data-bspk": "card", "data-variant": variant, children: children }));
+export function Card({ children, variant = 'elevated', ...props }) {
+    return (_jsx("div", { ...props, "data-bspk": "card", "data-variant": variant, children: children }));
 }
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAkBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAa;IAC9D,OAAO,CACH,2BAAe,MAAM,kBAAe,OAAO,YACtC,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAmBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAE,GAAG,KAAK,EAAkC;IAC7F,OAAO,CACH,iBAAS,KAAK,eAAY,MAAM,kBAAe,OAAO,YACjD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -34,7 +34,7 @@ export type CheckboxGroupProps = FieldControlProps<string[]> & {
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
  *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
+ *         const [value, setValue] = React.useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -45,9 +45,9 @@ export type CheckboxGroupProps = FieldControlProps<string[]> & {
  *                     { label: 'Option 2', value: 'option2' },
  *                     { label: 'Option 3', value: 'option3' },
  *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
+ *                 value={value}
+ *                 onChange={(nextValue: string[]) => {
+ *                     setValue(nextValue);
  *                 }}
  *             />
  *         );

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -11,7 +11,7 @@ const ALL_LABEL = 'All';
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
  *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
+ *         const [value, setValue] = React.useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -22,9 +22,9 @@ const ALL_LABEL = 'All';
  *                     { label: 'Option 2', value: 'option2' },
  *                     { label: 'Option 3', value: 'option3' },
  *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
+ *                 value={value}
+ *                 onChange={(nextValue: string[]) => {
+ *                     setValue(nextValue);
  *                 }}
  *             />
  *         );

package/dist/components/CheckboxGroupField/CheckboxGroupField.d.ts

@@ -11,5 +11,5 @@ export type CheckboxGroupFieldProps = FormFieldControlProps<CheckboxGroupProps>;
  *
  * @generated
  */
-export declare function CheckboxGroupField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: CheckboxGroupFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxGroupField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: CheckboxGroupFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */