@bspk/ui 1.1.34 → 1.2.0

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

@@ -1,7 +1,8 @@
-import { ColorVariant } from '../../utils/colorVariants';
+import { CommonProps } from '-/types/common';
+import { ColorVariant } from '-/utils/colorVariants';
 import './avatar.scss';
 export type SizeVariant = 'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'xxxxx-large';
-export type AvatarProps = {
+export type AvatarProps = CommonProps<'disabled'> & {
     /**
      * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
      *
@@ -24,9 +25,10 @@ export type AvatarProps = {
      */
     color?: Exclude<ColorVariant, 'white'>;
     /**
-     * The initials to display in the avatar limited to 2 characters.
+     * Customizable initials to display in the avatar limited to 2 characters.
      *
-     * If not provided, the first two letters of the name will be used as initials.
+     * By default, initials are the first letters of the first two words in the name. For a single-word name, only one
+     * initial is shown. Names with three or more words, only the first two initials are used.
      *
      * @example
      *     AG;
@@ -46,11 +48,17 @@ export type AvatarProps = {
      */
     image?: string;
     /**
-     * Whether to show the represeneetd user's name as a tooltip.
+     * Whether to show the represented user's name as a tooltip.
      *
      * @default true
      */
     showTooltip?: boolean;
+    /**
+     * The function to call when the avatar is clicked.
+     *
+     * @type () => void
+     */
+    onClick?: () => void;
 };
 /**
  * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, or image.
@@ -67,7 +75,7 @@ export type AvatarProps = {
  *                 image="/profile.jpg"
  *                 initials="AR"
  *                 name="Andre Giant"
- *                 showTooltip={true}
+ *                 showTooltip
  *                 size="large"
  *             />
  *         );
@@ -76,11 +84,7 @@ export type AvatarProps = {
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name: ariaLabel, showTooltip, }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace Avatar {
-    var bspkName: string;
-}
-export { Avatar };
+export declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name: ariaLabel, showTooltip, 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

@@ -23,7 +23,7 @@ const DEFAULT = {
  *                 image="/profile.jpg"
  *                 initials="AR"
  *                 name="Andre Giant"
- *                 showTooltip={true}
+ *                 showTooltip
  *                 size="large"
  *             />
  *         );
@@ -32,14 +32,14 @@ const DEFAULT = {
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
- * @phase DesignReview
+ * @phase UXReview
  */
-function Avatar({ initials: initialsProp, color = DEFAULT.color, size = DEFAULT.size, showIcon, image, name: ariaLabel, showTooltip = DEFAULT.showTooltip, }) {
+export function Avatar({ initials: initialsProp, color = DEFAULT.color, size = DEFAULT.size, showIcon, image, name: ariaLabel, showTooltip = DEFAULT.showTooltip, onClick, disabled, ...props }) {
     const children = useMemo(() => {
         if (image)
-            return _jsx("img", { alt: ariaLabel, src: image });
+            return _jsx("img", { alt: ariaLabel, "aria-hidden": true, src: image });
         if (showIcon)
-            return (_jsx("span", { "data-icon": true, children: _jsx(SvgPerson, {}) }));
+            return (_jsx("span", { "aria-hidden": true, "data-icon": true, children: _jsx(SvgPerson, {}) }));
         let initials = initialsProp;
         if (ariaLabel && !initials)
             initials = ariaLabel
@@ -54,9 +54,7 @@ function Avatar({ initials: initialsProp, color = DEFAULT.color, size = DEFAULT.
     }, [ariaLabel, showIcon, image, initialsProp]);
     if (!children)
         return null;
-    const avatar = (_jsx("div", { "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, children: children }));
-    return showTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar;
+    const avatar = (triggerProps) => (_jsx("button", { ...triggerProps, "aria-describedby": triggerProps?.['aria-describedby'] || ariaLabel, "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, disabled: disabled || undefined, onClick: disabled ? undefined : onClick, tabIndex: 0, ...props, children: children }));
+    return showTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar();
 }
-Avatar.bspkName = 'Avatar';
-export { 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,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,eAAe,CAAC;AAEvB,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAiEX;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,GACvB;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEtD,IAAI,QAAQ;YACR,OAAO,CACH,4CACI,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;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,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,CACX,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC;AAChF,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAIpE,OAAO,eAAe,CAAC;AAEvB,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAwEX;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,EACjC,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;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,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,YAAkC,EAAE,EAAE,CAAC,CACnD,oBACQ,YAAY,sBACE,YAAY,EAAE,CAAC,kBAAkB,CAAC,IAAI,SAAS,gBACrD,SAAS,eACX,QAAQ,gBACN,KAAK,eACN,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACvC,QAAQ,EAAE,CAAC,KACP,KAAK,YAER,QAAQ,GACJ,CACZ,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;AAClF,CAAC"}

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

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { AvatarProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const AvatarExample: ComponentExample<AvatarProps>;

package/dist/components/Avatar/AvatarExample.js

@@ -9,11 +9,20 @@ export const AvatarExample = {
                 showIcon: false,
             },
         },
+        {
+            label: 'One Word Name',
+            propState: {
+                name: 'Andre',
+                image: undefined, // Ensure no image is set
+                initials: undefined, // Ensure no initials are set
+                showIcon: false,
+            },
+        },
         {
             label: 'With Initials',
             propState: {
-                name: 'Andre Giant',
-                initials: 'GA',
+                name: 'Andre The Giant',
+                initials: 'AG',
                 image: undefined, // Ensure no image is set
                 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":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;gBAClD,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;aAC9C;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,cAAc;gBACrB,QAAQ,EAAE,KAAK;aAClB;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"AvatarExample.js","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;gBAClD,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;gBAClD,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,IAAI,EAAE,iBAAiB;gBACvB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;aAC9C;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,cAAc;gBACrB,QAAQ,EAAE,KAAK;aAClB;SACJ;KACJ;CACJ,CAAC"}

package/dist/components/Avatar/avatar.css

@@ -2,6 +2,7 @@
   --height: var(--spacing-sizing-10);
   --font: var(--labels-base);
   --svg-size: var(--spacing-sizing-10);
+  border: unset;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -10,10 +11,14 @@
   height: var(--height);
   width: var(--height);
   aspect-ratio: 1/1;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background-color: var(--background);
   color: var(--foreground);
   font: var(--font);
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  --state-background: transparent;
 }
 [data-bspk=avatar]:not([data-color]) {
   --foreground: var(--foreground-neutral-on-surface);
@@ -27,6 +32,7 @@
 [data-bspk=avatar] img {
   vertical-align: top;
   max-width: 100%;
+  height: auto;
 }
 [data-bspk=avatar] svg {
   width: var(--svg-size);
@@ -82,5 +88,25 @@
   --font: var(--display-regular-large);
   --svg-size: var(--spacing-sizing-18);
 }
+[data-bspk=avatar]::after {
+  content: "";
+  position: absolute;
+  display: block;
+  inset: 0;
+  border-radius: var(--radius-full);
+  background: var(--state-background);
+}
+[data-bspk=avatar]:hover {
+  --state-background: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=avatar]:active {
+  --state-background: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=avatar][disabled] {
+  opacity: 0.5;
+}
+[data-bspk=avatar]:focus:not(:active) {
+  outline: 2px solid var(--stroke-neutral-focus);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -5,6 +5,7 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
   --height: var(--spacing-sizing-10);
   --font: var(--labels-base);
   --svg-size: var(--spacing-sizing-10);
+  border: unset;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -13,10 +14,14 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
   height: var(--height);
   width: var(--height);
   aspect-ratio: 1/1;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background-color: var(--background);
   color: var(--foreground);
   font: var(--font);
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  --state-background: transparent;
 }
 [data-bspk=avatar]:not([data-color]) {
   --foreground: var(--foreground-neutral-on-surface);
@@ -30,6 +35,7 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
 [data-bspk=avatar] img {
   vertical-align: top;
   max-width: 100%;
+  height: auto;
 }
 [data-bspk=avatar] svg {
   width: var(--svg-size);
@@ -85,8 +91,27 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
   --font: var(--display-regular-large);
   --svg-size: var(--spacing-sizing-18);
 }
+[data-bspk=avatar]::after {
+  content: "";
+  position: absolute;
+  display: block;
+  inset: 0;
+  border-radius: var(--radius-full);
+  background: var(--state-background);
+}
+[data-bspk=avatar]:hover {
+  --state-background: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=avatar]:active {
+  --state-background: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=avatar][disabled] {
+  opacity: 0.5;
+}
+[data-bspk=avatar]:focus:not(:active) {
+  outline: 2px solid var(--stroke-neutral-focus);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -1,4 +1,4 @@
-import { AvatarProps, SizeVariant } from '../Avatar';
+import { AvatarProps, SizeVariant } from '-/components/Avatar';
 import './avatar-group.scss';
 export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
 export type AvatarGroupProps = {
@@ -7,8 +7,10 @@ export type AvatarGroupProps = {
      *
      * @example
      *     [
-     *         { name: 'Jane Doe', image: '/profile.jpg' },
-     *         { name: 'John Smith', initials: 'JS' },
+     *         { name: 'Fezzik', image: '/profile.jpg' },
+     *         { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
+     *         { name: 'Miracle Max', initials: 'MM', color: 'green' },
+     *         { name: 'Princess Buttercup', showIcon: true },
      *     ];
      *
      * @type Array<AvatarItem>
@@ -26,8 +28,7 @@ export type AvatarGroupProps = {
      *
      * This is used to limit the number of avatars displayed in the group.
      *
-     * @minimum 3
-     * @maximum 5
+     * Recommended to set this to a value between 3 and 5 for optimal display.
      */
     max?: number;
     /**
@@ -47,18 +48,15 @@ export type AvatarGroupProps = {
  *         return (
  *             <AvatarGroup
  *                 items={[
- *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
  *                     { name: 'John Smith', initials: 'JS' },
+ *                     { name: 'Princess Buttercup' },
  *                 ]}
  *             />
  *         );
  *     }
  *
  * @name AvatarGroup
- * @phase Backlog
+ * @phase UXReview
  */
-declare function AvatarGroup({ items, size, max, variant }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace AvatarGroup {
-    var bspkName: string;
-}
-export { AvatarGroup };
+export declare function AvatarGroup({ items, size, max, variant }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -11,22 +11,22 @@ import './avatar-group.css.js';
  *         return (
  *             <AvatarGroup
  *                 items={[
- *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
  *                     { name: 'John Smith', initials: 'JS' },
+ *                     { name: 'Princess Buttercup' },
  *                 ]}
  *             />
  *         );
  *     }
  *
  * @name AvatarGroup
- * @phase Backlog
+ * @phase UXReview
  */
-function AvatarGroup({ items, size = 'small', max = 5, variant }) {
+export function AvatarGroup({ items, size = 'small', max = 5, variant }) {
     if (!Array.isArray(items) || !items?.length)
         return null;
     const overFlowCount = items.length - max;
-    return (_jsx("div", { "data-bspk": "avatar-group", "data-max": max, "data-size": size, "data-variant": variant, children: _jsxs("div", { "data-wrap": true, children: [items.map((item, index) => (_jsx(Avatar, { ...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] }) }))] }) }));
+    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] }) }))] }) }));
 }
-AvatarGroup.bspkName = 'AvatarGroup';
-export { AvatarGroup };
 //# 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,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AACvE,OAAO,qBAAqB,CAAC;AAyC7B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IAC9E,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;IAEzC,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,6CACK,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,KAAC,MAAM,OAAiB,IAAI,EAAE,IAAI,EAAE,IAAI,IAA3B,KAAK,CAA0B,CAC/C,CAAC,EACD,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,gBAAY,OAAO,eAAY,IAAI,YAClE,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AAEvE,OAAO,qBAAqB,CAAC;AA0C7B;;;;;;;;;;;;;;;;;;;;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"}

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

@@ -0,0 +1,3 @@
+import { AvatarGroupProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+export declare const AvatarGroupExample: ComponentExample<AvatarGroupProps>;

package/dist/components/AvatarGroup/AvatarGroupExample.js

@@ -0,0 +1,31 @@
+export const AvatarGroupExample = {
+    presets: [
+        {
+            label: 'Stacked',
+            propState: {
+                items: [
+                    { name: 'Fezzik', image: '/profile.jpg' },
+                    { 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',
+            },
+        },
+        {
+            label: 'Stacked + 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' },
+                ],
+                max: 3,
+                variant: 'stacked',
+            },
+        },
+    ],
+};
+//# sourceMappingURL=AvatarGroupExample.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupExample.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,OAAO,EAAE;QACL;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;oBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;oBACxD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;oBACxE,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;iBAClE;gBACD,OAAO,EAAE,SAAS;aACrB;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;oBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;oBACxD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;oBACxE,EAAE,IAAI,EAAE,sBAAsB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;oBAC/D,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;iBAClE;gBACD,GAAG,EAAE,CAAC;gBACN,OAAO,EAAE,SAAS;aACrB;SACJ;KACJ;CACJ,CAAC"}

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

@@ -7,6 +7,17 @@
   flex-direction: row;
   align-items: end;
   justify-content: end;
-  gap: var(--spacing-sizing-02);
   overflow: hidden;
 }
+[data-bspk=avatar-group] [data-gap="01"] {
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=avatar-group] [data-gap="02"] {
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=avatar-group] [data-stacked="02"]:not(:last-child) {
+  margin-right: -8px;
+}
+[data-bspk=avatar-group] [data-stacked="01"]:not(:last-child) {
+  margin-right: -4px;
+}

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

@@ -10,9 +10,19 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar-group] {
   flex-direction: row;
   align-items: end;
   justify-content: end;
-  gap: var(--spacing-sizing-02);
   overflow: hidden;
 }
+[data-bspk=avatar-group] [data-gap="01"] {
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=avatar-group] [data-gap="02"] {
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=avatar-group] [data-stacked="02"]:not(:last-child) {
+  margin-right: -8px;
+}
+[data-bspk=avatar-group] [data-stacked="01"]:not(:last-child) {
+  margin-right: -4px;
+}
 `));
 document.head.appendChild(style);
-

package/dist/components/Badge/Badge.d.ts

@@ -2,8 +2,7 @@ import { ReactNode } from 'react';
 import './badge.scss';
 export type BadgeProps = {
     /**
-     * The content of the badge. If larger than 99, the badge will display '99+'. If null or undefined, the badge will
-     * be hidden.
+     * The content of the badge. If larger than 99, the badge will display '99+'.
      *
      * @example
      *     5;
@@ -11,7 +10,6 @@ export type BadgeProps = {
      * @default 1
      *
      * @type number
-     * @minimum 1
      */
     count?: number;
     /**
@@ -25,7 +23,7 @@ export type BadgeProps = {
      *
      * @default primary
      */
-    variant?: 'primary' | 'secondary';
+    color?: 'primary' | 'secondary';
     /**
      * Whether the badge should have a border that matches the surface color.
      *
@@ -45,20 +43,16 @@ export type BadgeProps = {
  * Visual indicator for new items within a parent page represented with a numerical count of new items.
  *
  * @example
- *     import { Badge } from '@bspk/ui/badge';
+ *     import { Badge } from '@bspk/ui/Badge';
  *
  *     function Example() {
- *         return <Badge count={5} size="small" variant="primary" />;
+ *         return <Badge count={5} size="small" color="primary" />;
  *     }
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *
  * @name Badge
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Badge({ count: countProp, size, variant, surfaceBorder, children }: BadgeProps): import("react/jsx-runtime").JSX.Element | undefined;
-declare namespace Badge {
-    var bspkName: string;
-}
-export { Badge };
+export declare function Badge({ count: countProp, size, surfaceBorder, children, color }: BadgeProps): string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Badge/Badge.js

@@ -5,27 +5,25 @@ import './badge.css.js';
  * Visual indicator for new items within a parent page represented with a numerical count of new items.
  *
  * @example
- *     import { Badge } from '@bspk/ui/badge';
+ *     import { Badge } from '@bspk/ui/Badge';
  *
  *     function Example() {
- *         return <Badge count={5} size="small" variant="primary" />;
+ *         return <Badge count={5} size="small" color="primary" />;
  *     }
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *
  * @name Badge
- * @phase DesignReview
+ * @phase UXReview
  */
-function Badge({ count: countProp, size = 'small', variant = 'primary', surfaceBorder, children }) {
+export function Badge({ count: countProp, size = 'small', surfaceBorder, children, color = 'primary' }) {
     const count = tryIntParse(countProp);
-    if (count === null)
-        return;
-    const badge = (_jsx("sup", { "data-bspk": "badge", "data-size": size, "data-surface-border": surfaceBorder || undefined, "data-variant": variant, children: count > 99 ? '99+' : count }));
+    if (typeof count === 'undefined')
+        return children || null;
+    const badge = (_jsx("sup", { "data-attachment": !!children || undefined, "data-bspk": "badge", "data-color": color, "data-size": size, "data-surface-border": surfaceBorder || undefined, children: typeof count === 'number' && count > 99 ? '99+' : count }));
     if (children) {
-        return (_jsxs("span", { "data-bspk": "badge-wrapper", children: [children, badge] }));
+        return (_jsxs("span", { "data-attachment-wrapper": true, children: [children, badge] }));
     }
     return badge;
 }
-Badge.bspkName = 'Badge';
-export { Badge };
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,cAAc,CAAC;AA4CtB;;;;;;;;;;;;;;GAcG;AACH,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAc;IACzG,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO;IAE3B,MAAM,KAAK,GAAG,CACV,2BAAe,OAAO,eAAY,IAAI,yBAAuB,aAAa,IAAI,SAAS,kBAAgB,OAAO,YACzG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACzB,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,6BAAgB,eAAe,aAC1B,QAAQ,EACR,KAAK,IACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,cAAc,CAAC;AA0CtB;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAc;IAC9G,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,OAAO,KAAK,KAAK,WAAW;QAAE,OAAO,QAAQ,IAAI,IAAI,CAAC;IAE1D,MAAM,KAAK,GAAG,CACV,iCACqB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAC9B,OAAO,gBACL,KAAK,eACN,IAAI,yBACM,aAAa,IAAI,SAAS,YAE9C,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACtD,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,4DACK,QAAQ,EACR,KAAK,IACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC"}

package/dist/components/Badge/BadgeExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { BadgeProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const BadgeExample: ComponentExample<BadgeProps>;

package/dist/components/Badge/BadgeExample.js

@@ -1,44 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+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" }) }));
+    },
     containerStyle: { width: '100%' },
-    render: ({ props, Component, preset }) => {
-        if (preset?.label === 'Borders')
-            return _jsx(ExampleBadgeVariants, { Component: Component, props: props });
-        if (preset?.label === 'With Context') {
-            return (_jsx(_Fragment, { children: _jsx(Component, { ...props, children: _jsx(Avatar, { image: "/profile.jpg", name: "Andre Giant" }) }) }));
-        }
-        return _jsx(Component, { ...props });
+    variants: {
+        surfaceBorder: { color: { options: ['primary', 'secondary'] } },
+        size: { count: { options: [9, 99, 999] } },
     },
-    presets: [
-        {
-            label: 'With Context',
-        },
-        {
-            label: 'Borders',
-        },
-    ],
 };
-function ExampleBadgeVariants({ Component, ...props }) {
-    const cells = [
-        ['', 'Small', 'X-Small'],
-        ['None', { size: 'small', surfaceBorder: false }, { size: 'x-small', surfaceBorder: false }],
-        ['Border', { size: 'small', surfaceBorder: true }, { size: 'x-small', surfaceBorder: true }],
-    ];
-    let border = false;
-    return (_jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }, children: cells.flat().map((content, idx) => {
-            if (typeof content === 'string' && content === 'Border')
-                border = true;
-            return (_jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: '8px',
-                    padding: '8px',
-                    background: typeof content !== 'string' && border ? 'var(--surface-neutral-t3-low)' : 'transparent',
-                }, children: typeof content === 'string'
-                    ? content
-                    : [9, 99, 999].map((count, idx2) => (_jsx(Component, { count: count, ...props, ...content }, idx2))) }, idx));
-        }) }));
-}
 //# sourceMappingURL=BadgeExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeExample.js","sourceRoot":"","sources":["../../../src/components/Badge/BadgeExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,CAAC,MAAM,YAAY,GAAiC;IACtD,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,SAAS;YAAE,OAAO,KAAC,oBAAoB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAErG,IAAI,MAAM,EAAE,KAAK,KAAK,cAAc,EAAE,CAAC;YACnC,OAAO,CACH,4BACI,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,GAAG,GAC1C,GACb,CACN,CAAC;QACN,CAAC;QACD,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,cAAc;SACxB;QACD;YACI,KAAK,EAAE,SAAS;SACnB;KACJ;CACJ,CAAC;AAEF,SAAS,oBAAoB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EAIX;IACG,MAAM,KAAK,GAAG;QACV,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC;QACxB,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;QAC5F,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;KAClE,CAAC;IAE/B,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,EAAE,YAC9E,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;YAC/B,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ;gBAAE,MAAM,GAAG,IAAI,CAAC;YACvE,OAAO,CACH,cAEI,KAAK,EAAE;oBACH,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,KAAK;oBACV,OAAO,EAAE,KAAK;oBACd,UAAU,EACN,OAAO,OAAO,KAAK,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,aAAa;iBAC9F,YAEA,OAAO,OAAO,KAAK,QAAQ;oBACxB,CAAC,CAAC,OAAO;oBACT,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,KAAiB,KAAK,KAAO,OAAsB,IAA5C,IAAI,CAA4C,CACjF,CAAC,IAfH,GAAG,CAgBN,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,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,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"}