@bspk/ui 1.1.31 → 1.1.33

package/dist/components/Avatar/avatar.css

@@ -0,0 +1,86 @@
+[data-bspk=avatar] {
+  --height: var(--spacing-sizing-10);
+  --font: var(--labels-base);
+  --svg-size: var(--spacing-sizing-10);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  height: var(--height);
+  width: var(--height);
+  aspect-ratio: 1/1;
+  border-radius: 999px;
+  background-color: var(--background);
+  color: var(--foreground);
+  font: var(--font);
+}
+[data-bspk=avatar]:not([data-color]) {
+  --foreground: var(--foreground-neutral-on-surface);
+  --background: var(--surface-neutral-t3-low);
+}
+[data-bspk=avatar]:has(img) {
+  overflow: hidden;
+  align-items: start;
+  justify-content: start;
+}
+[data-bspk=avatar] img {
+  vertical-align: top;
+  max-width: 100%;
+}
+[data-bspk=avatar] svg {
+  width: var(--svg-size);
+  height: var(--svg-size);
+}
+[data-bspk=avatar] [data-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-bspk=avatar][data-size=x-small] {
+  --height: var(--spacing-sizing-06);
+  --font: var(--labels-x-small);
+  --svg-size: var(--spacing-sizing-04);
+}
+[data-bspk=avatar][data-size=small] {
+  --height: var(--spacing-sizing-08);
+  --font: var(--labels-small);
+  --svg-size: var(--spacing-sizing-05);
+}
+[data-bspk=avatar][data-size=medium] {
+  --height: var(--spacing-sizing-10);
+  --font: var(--labels-base);
+  --svg-size: var(--spacing-sizing-05);
+}
+[data-bspk=avatar][data-size=large] {
+  --height: var(--spacing-sizing-12);
+  --font: var(--labels-large);
+  --svg-size: var(--spacing-sizing-06);
+}
+[data-bspk=avatar][data-size=x-large] {
+  --height: var(--spacing-sizing-14);
+  --font: var(--subheader-x-large);
+  --svg-size: var(--spacing-sizing-08);
+}
+[data-bspk=avatar][data-size=xx-large] {
+  --height: var(--spacing-sizing-17);
+  --font: var(--subheader-xx-large);
+  --svg-size: var(--spacing-sizing-12);
+}
+[data-bspk=avatar][data-size=xxx-large] {
+  --height: var(--spacing-sizing-19);
+  --font: var(--display-regular-small);
+  --svg-size: var(--spacing-sizing-15);
+}
+[data-bspk=avatar][data-size=xxxx-large] {
+  --height: var(--spacing-sizing-21);
+  --font: var(--display-regular-medium);
+  --svg-size: var(--spacing-sizing-17);
+}
+[data-bspk=avatar][data-size=xxxxx-large] {
+  --height: var(--spacing-sizing-23);
+  --font: var(--display-regular-large);
+  --svg-size: var(--spacing-sizing-18);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,92 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=avatar] {
+  --height: var(--spacing-sizing-10);
+  --font: var(--labels-base);
+  --svg-size: var(--spacing-sizing-10);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  height: var(--height);
+  width: var(--height);
+  aspect-ratio: 1/1;
+  border-radius: 999px;
+  background-color: var(--background);
+  color: var(--foreground);
+  font: var(--font);
+}
+[data-bspk=avatar]:not([data-color]) {
+  --foreground: var(--foreground-neutral-on-surface);
+  --background: var(--surface-neutral-t3-low);
+}
+[data-bspk=avatar]:has(img) {
+  overflow: hidden;
+  align-items: start;
+  justify-content: start;
+}
+[data-bspk=avatar] img {
+  vertical-align: top;
+  max-width: 100%;
+}
+[data-bspk=avatar] svg {
+  width: var(--svg-size);
+  height: var(--svg-size);
+}
+[data-bspk=avatar] [data-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-bspk=avatar][data-size=x-small] {
+  --height: var(--spacing-sizing-06);
+  --font: var(--labels-x-small);
+  --svg-size: var(--spacing-sizing-04);
+}
+[data-bspk=avatar][data-size=small] {
+  --height: var(--spacing-sizing-08);
+  --font: var(--labels-small);
+  --svg-size: var(--spacing-sizing-05);
+}
+[data-bspk=avatar][data-size=medium] {
+  --height: var(--spacing-sizing-10);
+  --font: var(--labels-base);
+  --svg-size: var(--spacing-sizing-05);
+}
+[data-bspk=avatar][data-size=large] {
+  --height: var(--spacing-sizing-12);
+  --font: var(--labels-large);
+  --svg-size: var(--spacing-sizing-06);
+}
+[data-bspk=avatar][data-size=x-large] {
+  --height: var(--spacing-sizing-14);
+  --font: var(--subheader-x-large);
+  --svg-size: var(--spacing-sizing-08);
+}
+[data-bspk=avatar][data-size=xx-large] {
+  --height: var(--spacing-sizing-17);
+  --font: var(--subheader-xx-large);
+  --svg-size: var(--spacing-sizing-12);
+}
+[data-bspk=avatar][data-size=xxx-large] {
+  --height: var(--spacing-sizing-19);
+  --font: var(--display-regular-small);
+  --svg-size: var(--spacing-sizing-15);
+}
+[data-bspk=avatar][data-size=xxxx-large] {
+  --height: var(--spacing-sizing-21);
+  --font: var(--display-regular-medium);
+  --svg-size: var(--spacing-sizing-17);
+}
+[data-bspk=avatar][data-size=xxxxx-large] {
+  --height: var(--spacing-sizing-23);
+  --font: var(--display-regular-large);
+  --svg-size: var(--spacing-sizing-18);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

@@ -0,0 +1 @@
+export * from './Avatar';

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+export * from './Avatar';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,64 @@
+import { AvatarProps, SizeVariant } from '../Avatar';
+import './avatar-group.scss';
+export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
+export type AvatarGroupProps = {
+    /**
+     * The avatars to display in the group.
+     *
+     * @example
+     *     [
+     *         { name: 'Jane Doe', image: '/profile.jpg' },
+     *         { name: 'John Smith', initials: 'JS' },
+     *     ];
+     *
+     * @type Array<AvatarItem>
+     * @required
+     */
+    items: AvatarItem[];
+    /**
+     * Size of the avatar group.
+     *
+     * @default small
+     */
+    size?: Extract<SizeVariant, 'large' | 'medium' | 'small' | 'x-small'>;
+    /**
+     * The maximum number of avatars to display before showing the overflowCount.
+     *
+     * This is used to limit the number of avatars displayed in the group.
+     *
+     * @minimum 3
+     * @maximum 5
+     */
+    max?: number;
+    /**
+     * The variant of the avatar group.
+     *
+     * @default spread
+     */
+    variant?: 'spread' | 'stacked';
+};
+/**
+ * AvatarGroup component displays a group of avatars.
+ *
+ * @example
+ *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
+ *
+ *     export function Example() {
+ *         return (
+ *             <AvatarGroup
+ *                 items={[
+ *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'John Smith', initials: 'JS' },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name AvatarGroup
+ * @phase Backlog
+ */
+declare function AvatarGroup({ items, size, max, variant }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace AvatarGroup {
+    var bspkName: string;
+}
+export { AvatarGroup };

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '../Avatar';
+import './avatar-group.css.js';
+/**
+ * AvatarGroup component displays a group of avatars.
+ *
+ * @example
+ *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
+ *
+ *     export function Example() {
+ *         return (
+ *             <AvatarGroup
+ *                 items={[
+ *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'John Smith', initials: 'JS' },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name AvatarGroup
+ * @phase Backlog
+ */
+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] }) }))] }) }));
+}
+AvatarGroup.bspkName = 'AvatarGroup';
+export { AvatarGroup };
+//# sourceMappingURL=AvatarGroup.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,12 @@
+[data-bspk=avatar-group] {
+  width: 100%;
+}
+[data-bspk=avatar-group] [data-wrap] {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  justify-content: end;
+  gap: var(--spacing-sizing-02);
+  overflow: hidden;
+}

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

@@ -0,0 +1,18 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=avatar-group] {
+  width: 100%;
+}
+[data-bspk=avatar-group] [data-wrap] {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  justify-content: end;
+  gap: var(--spacing-sizing-02);
+  overflow: hidden;
+}
+`));
+document.head.appendChild(style);
+

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

@@ -0,0 +1 @@
+export * from './AvatarGroup';

package/dist/components/AvatarGroup/index.js

@@ -0,0 +1,2 @@
+export * from './AvatarGroup';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

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

@@ -0,0 +1,64 @@
+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.
+     *
+     * @example
+     *     5;
+     *
+     * @default 1
+     *
+     * @type number
+     * @minimum 1
+     */
+    count?: number;
+    /**
+     * The size of the badge.
+     *
+     * @default small
+     */
+    size?: 'small' | 'x-small';
+    /**
+     * The color variant of the badge.
+     *
+     * @default primary
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * Whether the badge should have a border that matches the surface color.
+     *
+     * @default false
+     */
+    surfaceBorder?: boolean;
+    /**
+     * The context for which the badge is applied.
+     *
+     * Could be a button, link, or any other element that the badge is associated with.
+     *
+     * @type
+     */
+    children?: ReactNode;
+};
+/**
+ * Visual indicator for new items within a parent page represented with a numerical count of new items.
+ *
+ * @example
+ *     import { Badge } from '@bspk/ui/badge';
+ *
+ *     function Example() {
+ *         return <Badge count={5} size="small" variant="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
+ *
+ * @name Badge
+ * @phase DesignReview
+ */
+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 };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Badge/Badge.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tryIntParse } from '../../utils/tryIntPsrse';
+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';
+ *
+ *     function Example() {
+ *         return <Badge count={5} size="small" variant="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
+ *
+ * @name Badge
+ * @phase DesignReview
+ */
+function Badge({ count: countProp, size = 'small', variant = 'primary', surfaceBorder, children }) {
+    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 (children) {
+        return (_jsxs("span", { "data-bspk": "badge-wrapper", children: [children, badge] }));
+    }
+    return badge;
+}
+Badge.bspkName = 'Badge';
+export { Badge };
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/Badge/BadgeExample.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar } from '../Avatar';
+export const BadgeExample = {
+    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 });
+    },
+    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

@@ -0,0 +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"}

package/dist/components/Badge/badge.css

@@ -0,0 +1,45 @@
+[data-bspk=badge] {
+  --size: var(--spacing-sizing-06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-circular);
+  height: var(--size);
+  width: fit-content;
+  min-width: var(--size);
+  font: var(--labels-x-small);
+  color: var(--foreground-brand-on-primary);
+  background: var(--surface-brand-primary);
+  padding: 0 var(--spacing-sizing-02);
+}
+[data-bspk=badge][data-size=x-small] {
+  --size: var(--spacing-sizing-05);
+  padding: 2px var(--spacing-sizing-01);
+}
+[data-bspk=badge][data-variant=secondary] {
+  color: var(--foreground-brand-on-secondary);
+  background: var(--surface-brand-secondary);
+}
+[data-bspk=badge][data-surface-border] {
+  border: 2px solid var(--surface-neutral-t1-base);
+}
+
+[data-bspk=badge-wrapper] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  flex-shrink: 0;
+}
+[data-bspk=badge-wrapper] [data-bspk=badge] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+  z-index: 2;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Badge/badge.css.js

@@ -0,0 +1,51 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=badge] {
+  --size: var(--spacing-sizing-06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-circular);
+  height: var(--size);
+  width: fit-content;
+  min-width: var(--size);
+  font: var(--labels-x-small);
+  color: var(--foreground-brand-on-primary);
+  background: var(--surface-brand-primary);
+  padding: 0 var(--spacing-sizing-02);
+}
+[data-bspk=badge][data-size=x-small] {
+  --size: var(--spacing-sizing-05);
+  padding: 2px var(--spacing-sizing-01);
+}
+[data-bspk=badge][data-variant=secondary] {
+  color: var(--foreground-brand-on-secondary);
+  background: var(--surface-brand-secondary);
+}
+[data-bspk=badge][data-surface-border] {
+  border: 2px solid var(--surface-neutral-t1-base);
+}
+
+[data-bspk=badge-wrapper] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  flex-shrink: 0;
+}
+[data-bspk=badge-wrapper] [data-bspk=badge] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+  z-index: 2;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+export * from './Badge';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/BannerAlert/BannerAlert.d.ts

@@ -0,0 +1,71 @@
+import { ElementProps, AlertVariant, CallToActionButton } from '../../index.js';
+import './banner-alert.scss';
+export type BannerAlertProps = {
+    /**
+     * The color variant of the banner alert.
+     *
+     * @default informational
+     */
+    variant?: AlertVariant;
+    /**
+     * The function to call when the banner alert is closed. If not included the close button will not be displayed.
+     *
+     * @type () => void
+     */
+    onClose?: () => void;
+    /**
+     * The header of the banner alert.
+     *
+     * @required
+     */
+    header: string;
+    /**
+     * The body of the banner alert.
+     *
+     * @type multiline
+     * @required
+     */
+    body: string;
+    /**
+     * This property may be undefined or an object containing required CallToActionButton properties.
+     *
+     * @type CallToActionButton
+     */
+    callToAction?: CallToActionButton;
+    /**
+     * Is the alert elevated. If true a drop shadow is added.
+     *
+     * @default false
+     */
+    elevated?: boolean;
+};
+/**
+ * A visual and contextual message used to communicate an important message or notification to users relating to a
+ * status or the body content of a page.
+ *
+ * @example
+ *     import { BannerAlert } from '@bspk/ui/BannerAlert';
+ *
+ *     function Example() {
+ *         <BannerAlert
+ *             variant="error"
+ *             header="Error"
+ *             body="There was an error processing your request."
+ *             onClose={() => console.log('Alert closed')}
+ *         />;
+ *     }
+ *
+ * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
+ *
+ *
+ *
+ *
+ * @name BannerAlert
+ * @phase DesignReview
+ */
+declare function BannerAlert({ variant, onClose, header, callToAction, body, elevated, }: ElementProps<BannerAlertProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare namespace BannerAlert {
+    var bspkName: string;
+}
+export { BannerAlert };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */