@bspk/ui 1.0.1 → 1.1.12

package/README.md

@@ -10,4 +10,9 @@ https://bspk.anywhere.re
 npm install @bspk/ui
 ```
 
+```bash
+npm install --peer @bspk/icons react react-dom
+```
+
+
 <!--- Copyright 2025 Anywhere Real Estate - CC BY 4.0 -->

package/{Avatar.d.ts → dist/Avatar.d.ts}

@@ -1,3 +1,4 @@
+import './avatar.scss';
 import { ReactNode } from 'react';
 import { ColorVariant } from './utils/colorVariants';
 import { CommonProps } from '.';
@@ -30,10 +31,9 @@ export type AvatarProps = CommonProps<'aria-label'> & {
  *
  * @name Avatar
  */
-declare function Avatar({ initials, color, size, icon, image, 'aria-label': ariaLabel, overflowCount, }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Avatar({ initials, color, size, icon, image, 'aria-label': ariaLabel, overflowCount, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Avatar {
     var bspkName: string;
 }
 export { Avatar };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Avatar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low);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]:has(img){overflow:hidden}[data-bspk=avatar] img{max-width:100%}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large)}`);;
+import { useMemo } from 'react';
+/**
+ * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an
+ * overflowCount.
+ *
+ * @name Avatar
+ */
+function Avatar({ initials, color = 'grey', size = 'small', icon, image, 'aria-label': ariaLabel, overflowCount, }) {
+    const children = useMemo(() => {
+        if (initials)
+            return _jsx("span", { "data-initials": true, children: initials });
+        if (icon)
+            return _jsx("span", { "data-icon": true, children: icon });
+        if (image)
+            return _jsx("img", { alt: ariaLabel, src: image });
+        if (overflowCount)
+            return _jsxs("span", { "data-overflow-count": true, children: ["+", overflowCount] });
+        return null;
+    }, [ariaLabel, icon, image, initials, overflowCount]);
+    return (_jsx(_Fragment, { children: children && (_jsx("div", { "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, children: children })) }));
+}
+Avatar.bspkName = 'Avatar';
+export { Avatar };
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAwC3C;;;;;GAKG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,IAAI,EACJ,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,GACH;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,GAAQ,CAAC;QAC3D,IAAI,IAAI;YAAE,OAAO,4CAAiB,IAAI,GAAQ,CAAC;QAC/C,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QACtD,IAAI,aAAa;YAAE,OAAO,6DAA4B,aAAa,IAAQ,CAAC;QAC5E,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAEtD,OAAO,CACH,4BACK,QAAQ,IAAI,CACT,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,GACF,CACN,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/{Badge.d.ts → dist/Badge.d.ts}

@@ -1,3 +1,4 @@
+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
@@ -24,10 +25,9 @@ export type BadgeProps = {
  *
  * @name Badge
  */
-declare function Badge({ count: countProp, size, variant }: BadgeProps): false | import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Badge({ count: countProp, size, variant }: BadgeProps): false | import("react/jsx-runtime").JSX.Element;
 declare namespace Badge {
     var bspkName: string;
 }
 export { Badge };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Badge.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=badge]{--size: var(--spacing-sizing-06);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-circular);height:var(--size);min-width:var(--size);padding:0 var(--spacing-sizing-02);font:var(--labels-x-small);color:var(--foreground-brand-on-primary);background:var(--surface-brand-primary)}[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)}`);;
+import { tryIntParse } from './utils/tryIntPsrse';
+/**
+ * Visual indicator for new items within a parent page represented with a numerical count of new items.
+ *
+ * @name Badge
+ */
+function Badge({ count: countProp, size = 'small', variant = 'primary' }) {
+    const count = tryIntParse(countProp);
+    return (count !== null && (_jsx("div", { "data-bspk": "badge", "data-size": size, "data-variant": variant, children: count > 99 ? '99+' : count })));
+}
+Badge.bspkName = 'Badge';
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAwBlD;;;;GAIG;AACH,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,SAAS,EAAc;IAChF,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,OAAO,CACH,KAAK,KAAK,IAAI,IAAI,CACd,2BAAe,OAAO,eAAY,IAAI,kBAAgB,OAAO,YACxD,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACzB,CACT,CACJ,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/{BannerAlert.d.ts → dist/BannerAlert.d.ts}

@@ -1,3 +1,4 @@
+import './banner-alert.scss';
 import { ElementProps, AlertVariant, CallToActionButton } from './';
 export type BannerAlertProps = {
     /**
@@ -19,12 +20,12 @@ export type BannerAlertProps = {
      */
     header: string;
     /**
-     * The children of the banner alert.
+     * The body of the banner alert.
      *
      * @type multiline
      * @required
      */
-    children: string;
+    body: string;
     /**
      * This property may be undefined or an object containing required CallToActionButton properties.
      *
@@ -44,10 +45,9 @@ export type BannerAlertProps = {
  *
  * @name BannerAlert
  */
-declare function BannerAlert({ variant, onClose, header, callToAction, children, elevated, }: ElementProps<BannerAlertProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+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 };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/BannerAlert.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
+import { SvgClose } from '@bspk/icons/Close';
+import { SvgErrorFill } from '@bspk/icons/ErrorFill';
+import { SvgInfoFill } from '@bspk/icons/InfoFill';
+import { SvgWarningFill } from '@bspk/icons/WarningFill';
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=banner-alert]{--color: var(--status-information);--on-color: var(--status-on-information);display:flex;flex-direction:row;border:2px solid var(--color);border-radius:var(--radius-medium);box-sizing:border-box;background-color:var(--surface-neutral-t1-base);width:100%}[data-bspk=banner-alert][data-variant=error]{--color: var(--status-error);--on-color: var(--status-on-error)}[data-bspk=banner-alert][data-variant=success]{--color: var(--status-success);--on-color: var(--status-on-success)}[data-bspk=banner-alert][data-variant=warning]{--color: var(--status-warning);--on-color: var(--status-on-warning)}[data-bspk=banner-alert][data-elevated]{box-shadow:var(--drop-shadow-raise)}[data-bspk=banner-alert] [data-icon-bar]{flex:1;padding:var(--spacing-sizing-04) var(--spacing-sizing-03);background:var(--color);color:var(--on-color)}[data-bspk=banner-alert] [data-icon-bar] svg{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=banner-alert] [data-content]{flex:100%;display:flex;flex-direction:column;padding:var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=banner-alert] [data-content] header{display:flex;flex-direction:row;gap:var(--spacing-sizing-03);height:var(--spacing-sizing-12);align-items:center}[data-bspk=banner-alert] [data-content] header span{flex:1;display:flex;align-items:center;color:var(--foreground-neutral-on-surface);font:var(--heading-h6)}@media(any-pointer: coarse){[data-bspk=banner-alert] [data-content] header span{font:var(--heading-h6)}}[data-bspk=banner-alert] [data-content] header button{background:none;border:none;cursor:pointer;padding:0;margin:0 0 0 auto;color:var(--foreground-neutral-on-surface-variant-01);height:var(--spacing-sizing-08);width:var(--spacing-sizing-08)}@media(any-pointer: coarse){[data-bspk=banner-alert] [data-content] header button{height:var(--spacing-sizing-12);width:var(--spacing-sizing-12)}}[data-bspk=banner-alert] [data-content] header button svg{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=banner-alert] [data-content] [data-body]{display:flex;flex-direction:column;gap:var(--spacing-sizing-02);padding:0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0}[data-bspk=banner-alert] [data-content] [data-body] span{font:var(--body-base)}[data-bspk=banner-alert] [data-content] [data-body] button{margin-left:auto;background:none;border:none;cursor:pointer;padding:0 var(--spacing-sizing-03);height:var(--spacing-sizing-12);font:var(--labels-small)}`);;
+/**
+ * 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.
+ *
+ * @name BannerAlert
+ */
+function BannerAlert({ variant = 'informational', onClose, header, callToAction, body, elevated = false, }) {
+    return (_jsxs("article", { "data-bspk": "banner-alert", "data-elevated": elevated || undefined, "data-variant": variant, children: [_jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && _jsx(SvgErrorFill, {}), variant === 'informational' && _jsx(SvgInfoFill, {}), variant === 'success' && _jsx(SvgCheckCircleFill, {}), variant === 'warning' && _jsx(SvgWarningFill, {})] }), _jsxs("div", { "data-content": true, children: [(header || onClose) && (_jsxs("header", { children: [_jsx("span", { children: header }), typeof onClose === 'function' && (_jsx("button", { "aria-label": "Close", onClick: onClose, type: "button", children: _jsx(SvgClose, {}) }))] })), _jsxs("div", { "data-body": true, children: [_jsx("span", { children: body }), callToAction?.label && callToAction?.onClick && (_jsx("button", { onClick: callToAction.onClick, children: callToAction.label }))] })] })] }));
+}
+BannerAlert.bspkName = 'BannerAlert';
+export { BannerAlert };
+//# sourceMappingURL=BannerAlert.js.map

package/dist/BannerAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../src/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,qBAAqB,CAAC;AA2C7B;;;;;GAKG;AACH,SAAS,WAAW,CAAC,EACjB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,gCAAmB,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,aACzF,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,+BAAmB,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,YACtD,KAAC,QAAQ,KAAG,GACP,CACZ,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,iBAAQ,OAAO,EAAE,YAAY,CAAC,OAAO,YAAG,YAAY,CAAC,KAAK,GAAU,CACvE,IACC,IACJ,IACA,CACb,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/{Button.d.ts → dist/Button.d.ts}

@@ -1,3 +1,4 @@
+import './button.scss';
 import { ElementType, ReactNode } from 'react';
 import { ButtonSize, CommonProps, ElementProps } from './';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
@@ -62,5 +63,4 @@ declare namespace Button {
     var bspkName: string;
 }
 export { Button };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Button.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=button]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;box-sizing:border-box;background:rgba(0,0,0,0);text-decoration:none;width:fit-content;position:relative}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon]{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon]{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background:linear-gradient(var(--primary-background), var(--primary-background));color:var(--foreground-brand-on-primary);border-radius:var(--radius-small)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=primary][data-destructive]{--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid 1px var(--stroke-neutral-base);border-radius:var(--radius-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid 1px var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=secondary][data-destructive]{background:rgba(0,0,0,0);color:var(--status-error);border:solid 1px var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:rgba(0,0,0,0);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=tertiary][data-destructive]{color:var(--status-error)}`);;
+import { isValidElement } from 'react';
+import { Tooltip } from './Tooltip';
+import { isValidIcon } from './utils/children';
+import { useErrorLogger } from './utils/errors';
+/**
+ * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
+ *
+ * @name Button
+ */
+function Button(props) {
+    const { size = 'medium', variant = 'primary', destructive = false, width = 'hug', as: As = 'button', disabled = false, label: labelProp, icon, showLabel: showLabelProp = true, toolTip: toolTipProp, children, ...containerProps } = props;
+    const label = typeof children === 'string' ? children : labelProp || '';
+    // ignore showLabel=false if there is no icon
+    const hideLabel = showLabelProp === false && icon;
+    const toolTip = toolTipProp || hideLabel ? label : undefined;
+    const { logError } = useErrorLogger();
+    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
+    logError(!label, 'Button - The button must have a label.');
+    const button = (_jsx(As, { ...containerProps, "aria-label": label, "data-bspk": "button", "data-destructive": destructive || undefined, "data-size": size, "data-variant": variant, "data-width": width, disabled: disabled || undefined, children: children && typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [_jsx("span", { "data-touch-target": true }), !!icon && isValidElement(icon) && _jsx("span", { "data-button-icon": true, children: icon }), !hideLabel && _jsx("span", { "data-button-label": true, children: label })] })) }));
+    if (toolTip) {
+        return (_jsx(Tooltip, { label: toolTip, placement: "top", children: button }));
+    }
+    return button;
+}
+Button.bspkName = 'Button';
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0DhD;;;;GAIG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,SAAS,EAAE,aAAa,GAAG,IAAI,EAC/B,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC;IAElD,MAAM,OAAO,GAAG,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAE7D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,KAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,YAE9B,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACI,2CAA0B,EACzB,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,GACA,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/{Card.d.ts → dist/Card.d.ts}

@@ -1,3 +1,4 @@
+import './card.scss';
 import { ReactNode } from 'react';
 export type CardProps = {
     /**
@@ -28,10 +29,9 @@ export type CardProps = {
  *
  * @name Card
  */
-declare function Card({ children, showPadding, variant }: CardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Card({ children, showPadding, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Card {
     var bspkName: string;
 }
 export { Card };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Card.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=card]{display:block;background:var(--surface-neutral-t1-base);padding:var(--spacing-sizing-03);border-radius:var(--radius-medium);overflow:hidden}[data-bspk=card][data-hide-padding]{padding:0}[data-bspk=card][data-variant=outlined]{border:solid 1px var(--stroke-neutral-low)}[data-bspk=card][data-variant=elevated]{box-shadow:0 1px 2px 0 var(--shadow-32),0 1px 3px 1px var(--shadow-15)}`);;
+/**
+ * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
+ * elements.
+ *
+ * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
+ * details.
+ *
+ * @name Card
+ */
+function Card({ children, showPadding, variant = 'elevated' }) {
+    return (_jsx("div", { "data-bspk": "card", "data-hide-padding": showPadding === false || undefined, "data-variant": variant, children: children }));
+}
+Card.bspkName = 'Card';
+export { Card };
+//# sourceMappingURL=Card.js.map

package/dist/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAwBrB;;;;;;;;GAQG;AACH,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAa;IACpE,OAAO,CACH,2BAAe,MAAM,uBAAoB,WAAW,KAAK,KAAK,IAAI,SAAS,kBAAgB,OAAO,YAC7F,QAAQ,GACP,CACT,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/{Checkbox.d.ts → dist/Checkbox.d.ts}

@@ -1,3 +1,4 @@
+import './checkbox.scss';
 import { ToggleControlProps, ElementProps } from './';
 export type CheckboxProps = ToggleControlProps<HTMLInputElement> & {
     /**
@@ -17,10 +18,9 @@ export type CheckboxProps = ToggleControlProps<HTMLInputElement> & {
  *
  * @name Checkbox
  */
-declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, ...props }: ElementProps<CheckboxProps, 'input'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 declare namespace Checkbox {
     var bspkName: string;
 }
 export { Checkbox };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Checkbox.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=checkbox]{display:block;position:relative;width:var(--spacing-sizing-06);aspect-ratio:1/1;padding:2px}[data-bspk=checkbox] input[type=checkbox]{position:absolute;opacity:0;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}[data-bspk=checkbox] span{--stroke: var(--stroke-neutral-base);--inner: none;--background: none;--color: var(--foreground-brand-on-primary);box-sizing:border-box;display:flex;width:20px;aspect-ratio:1/1;cursor:pointer;border-radius:2px;border:2px solid var(--stroke);align-items:center;flex-direction:column;justify-content:center;position:relative;background:var(--background);color:var(--color)}[data-bspk=checkbox] span svg[data-checked]{width:14px;display:none}[data-bspk=checkbox] span svg[data-indeterminate]{width:12px;display:none}[data-bspk=checkbox] input[type=checkbox]:not(:checked,:indeterminate,:disabled):hover+span{background-color:var(--interactions-neutral-hover-opacity)}[data-bspk=checkbox] input[type=checkbox]:not(:checked,:indeterminate,:disabled):active+span{background-color:var(--interactions-neutral-press-opacity)}[data-bspk=checkbox] input[type=checkbox]:checked+span svg[data-checked],[data-bspk=checkbox] input[type=checkbox]:indeterminate+span svg[data-indeterminate]{display:block}[data-bspk=checkbox] input[type=checkbox]:checked+span,[data-bspk=checkbox] input[type=checkbox]:indeterminate+span{--stroke: var(--stroke-brand-primary);--background: var(--surface-brand-primary)}[data-bspk=checkbox] input[type=checkbox]:disabled{pointer-events:none}[data-bspk=checkbox] input[type=checkbox]:disabled+span{--stroke: var(--stroke-neutral-interactions-disabled-light)}[data-bspk=checkbox] input[type=checkbox]:disabled:is(:checked,:indeterminate)+span{--stroke: transparent;--background: var(--interactions-disabled-opacity);--color: var(--foreground-neutral-disabled-on-surface)}[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):checked+span,[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):indeterminate+span{--background: var(--status-error)}[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled)+span{--stroke: var(--status-error)}`);;
+import { useEffect, useRef } from 'react';
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
+ * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
+ * CheckboxGroup component.
+ *
+ * @element
+ *
+ * @name Checkbox
+ */
+function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, ...props }) {
+    const indeterminate = !!indeterminateProp;
+    const checked = !!checkedProp && !indeterminate;
+    const inputRef = useRef();
+    useEffect(() => {
+        if (!inputRef.current)
+            return;
+        inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-invalid": invalid || undefined, checked: checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
+                    if (!node)
+                        return;
+                    inputRef.current = node;
+                    node.indeterminate = indeterminate;
+                }, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [_jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) }), _jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) })] })] }));
+}
+Checkbox.bspkName = 'Checkbox';
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAc1C;;;;;;;;GAQG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,kBACK,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACI,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,EACN,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,IACH,IACJ,CACV,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/{CheckboxGroup.d.ts → dist/CheckboxGroup.d.ts}

@@ -41,7 +41,7 @@ export type CheckboxGroupProps = CommonProps<'aria-label'> & {
  *
  * @name CheckboxGroup
  */
-declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 declare namespace CheckboxGroup {
     var bspkName: string;
 }

package/dist/CheckboxGroup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from './Checkbox';
+import { ToggleOption } from './ToggleOption';
+/**
+ * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name CheckboxGroup
+ */
+function CheckboxGroup({ onChange, options = [], name, values = [], selectAll, selectAllProps, ...props }) {
+    return (_jsxs("div", { ...props, "data-bspk": "checkbox-group", role: "group", children: [selectAll && (_jsx(_Fragment, { children: _jsx(ToggleOption, { label: selectAllProps?.label || 'All', children: _jsx(Checkbox, { "aria-label": selectAllProps?.label || 'All', checked: !!values.length && values.length === options.length, indeterminate: !!values.length && values.length < options.length, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), value: "all" }) }) })), options.map(({ label, description, value }) => (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Checkbox, { "aria-label": label, checked: values.includes(value), name: name, onChange: (checked) => {
+                        onChange(checked ? [...values, value] : values.filter((v) => v !== value));
+                    }, value: value }) }, value)))] }));
+}
+CheckboxGroup.bspkName = 'CheckboxGroup';
+export { CheckboxGroup };
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../src/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA0CjE;;;;GAIG;AACH,SAAS,aAAa,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBAAS,KAAK,eAAY,gBAAgB,EAAC,IAAI,EAAC,OAAO,aAClD,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,YAC/C,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAC5D,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAChE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,YAC5D,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;oBAC/E,CAAC,EACD,KAAK,EAAE,KAAK,GACd,IATuC,KAAK,CAUnC,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/{CheckboxOption.d.ts → dist/CheckboxOption.d.ts}

@@ -6,7 +6,7 @@ export type CheckboxOptionProps = Pick<CheckboxProps, 'checked' | 'disabled' | '
  *
  * @name CheckboxOption
  */
-declare function CheckboxOption({ label, description, ...checkboxProps }: CheckboxOptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CheckboxOption({ label, description, ...checkboxProps }: CheckboxOptionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CheckboxOption {
     var bspkName: string;
 }

package/dist/CheckboxOption.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from './Checkbox';
+import { ToggleOption } from './ToggleOption';
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name CheckboxOption
+ */
+function CheckboxOption({ label, description, ...checkboxProps }) {
+    return (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, label: label, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": label }) }));
+}
+CheckboxOption.bspkName = 'CheckboxOption';
+export { CheckboxOption };
+//# sourceMappingURL=CheckboxOption.js.map

package/dist/CheckboxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../src/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQjE;;;;GAIG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAuB;IACjF,OAAO,CACH,KAAC,YAAY,iBAAW,iBAAiB,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC5E,KAAC,QAAQ,OAAK,aAAa,gBAAc,KAAK,GAAI,GACvC,CAClB,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/{Chip.d.ts → dist/Chip.d.ts}

@@ -1,3 +1,4 @@
+import './chip.scss';
 import { CSSProperties, ReactNode } from 'react';
 import { CommonProps } from '.';
 export type ChipProps = CommonProps<'disabled' | 'onClick'> & {
@@ -41,10 +42,9 @@ export type ChipProps = CommonProps<'disabled' | 'onClick'> & {
  *
  * @name Chip
  */
-declare function Chip({ children, wrap, variant, flat, disabled, selected, onClick, style: styleProp, }: ChipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Chip({ children, wrap, variant, flat, disabled, selected, onClick, style: styleProp, }: ChipProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Chip {
     var bspkName: string;
 }
 export { Chip };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Chip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=chip]{display:flex;flex-direction:column;justify-content:center;width:fit-content;height:var(--spacing-sizing-06);padding:0 var(--spacing-sizing-02);font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01);background-color:var(--surface-neutral-t1-base);border:1px solid var(--stroke-neutral-low);border-radius:var(--radius-small)}[data-bspk=chip]:not([data-flat]){box-shadow:var(--drop-shadow-raise)}[data-bspk=chip][data-variant=filter]{cursor:pointer}[data-bspk=chip][data-wrap]{height:auto}[data-bspk=chip][data-disabled]{color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed;border-color:var(--stroke-neutral-disabled-light);background-image:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):hover{background-image:linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):active{background-image:linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):focus{outline:1px solid var(--stroke-neutral-focus);border-color:var(--stroke-neutral-focus)}[data-bspk=chip][data-selected]{background-color:var(--surface-brand-primary-highlight);border-color:var(--stroke-brand-primary)}`);;
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @name Chip
+ */
+function Chip({ children = '', wrap = false, variant = 'filter', flat = false, disabled = false, selected = false, onClick, style: styleProp, }) {
+    let additionalProps = {};
+    if (variant === 'filter') {
+        additionalProps = {
+            onClick,
+            role: 'button',
+            tabIndex: 0,
+        };
+    }
+    return (_jsx("span", { "data-bspk": "chip", "data-disabled": disabled || undefined, "data-flat": flat || undefined, "data-selected": selected || undefined, "data-variant": variant, "data-wrap": wrap || undefined, style: styleProp, ...additionalProps, children: children }));
+}
+Chip.bspkName = 'Chip';
+export { Chip };
+//# sourceMappingURL=Chip.js.map

package/dist/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AA2CrB;;;;GAIG;AACH,SAAS,IAAI,CAAC,EACV,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EAAE,SAAS,GACR;IACR,IAAI,eAAe,GAAG,EAAE,CAAC;IAEzB,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvB,eAAe,GAAG;YACd,OAAO;YACP,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,CAAC;SACd,CAAC;IACN,CAAC;IAED,OAAO,CACH,4BACc,MAAM,mBACD,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,kBACtB,OAAO,eACV,IAAI,IAAI,SAAS,EAC5B,KAAK,EAAE,SAAS,KACZ,eAAe,YAElB,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/{Dialog.d.ts → dist/Dialog.d.ts}

@@ -1,3 +1,4 @@
+import './dialog.scss';
 import { ReactNode, Ref } from 'react';
 import { CommonProps, ElementProps } from './';
 export type DialogProps = CommonProps<'id'> & {
@@ -37,10 +38,9 @@ export type DialogProps = CommonProps<'id'> & {
  *
  * @name Dialog
  */
-declare function Dialog({ children, innerRef, onClose, open, placement, hideScrim, id: idProp, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Dialog({ children, innerRef, onClose, open, placement, hideScrim, id: idProp, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
 declare namespace Dialog {
     var bspkName: string;
 }
 export { Dialog };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Dialog.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=dialog]{position:fixed;inset:0;z-index:var(--z-index-dialog)}[data-bspk=dialog] [data-dialog-box]{text-align:start;position:relative;border-radius:var(--radius-large);box-shadow:var(--drop-shadow-float);background:var(--surface-neutral-t1-base);color:var(--foreground-neutral-on-surface);max-height:calc(100vh - var(--spacing-sizing-24));overflow:scroll;z-index:2}[data-bspk=dialog] [data-dialog-box]>:first-of-type{margin-top:0}[data-bspk=dialog] [data-dialog-box]>:last-child{margin-bottom:0}@media(width >= 640px){[data-bspk=dialog] [data-dialog-box]{width:90%}}@media(width >= 768px){[data-bspk=dialog] [data-dialog-box]{width:80%}}@media(width >= 1024px){[data-bspk=dialog] [data-dialog-box]{width:60%}}@media(width >= 1280px){[data-bspk=dialog] [data-dialog-box]{width:50%}}[data-bspk=dialog] [data-dialog-backdrop]{z-index:1;position:fixed;inset:0;background-color:var(--background-scrim);opacity:0;transition:opacity .3s}[data-bspk=dialog][data-visibility=show] [data-dialog-backdrop]{opacity:1}[data-bspk=dialog][data-placement=center]{display:flex;justify-content:center;align-items:center}[data-bspk=dialog][data-placement=center] [data-dialog-box]{transition:opacity 1s;opacity:0}[data-bspk=dialog][data-placement=center][data-visibility=show] [data-dialog-box]{opacity:1}[data-bspk=dialog][data-placement=bottom] [data-dialog-box]{position:absolute;border-bottom-left-radius:0;border-bottom-right-radius:0;width:600px;left:50%;transform:translateX(-50%);bottom:-100vh;transition:bottom .3s}[data-bspk=dialog][data-placement=bottom][data-visibility=show] [data-dialog-box]{bottom:0}[data-bspk=dialog][data-placement=top] [data-dialog-box]{position:absolute;border-top-left-radius:0;border-top-right-radius:0;width:600px;left:50%;transform:translateX(-50%);top:-100vh;transition:top .3s}[data-bspk=dialog][data-placement=top][data-visibility=show] [data-dialog-box]{top:0}[data-bspk=dialog][data-placement=left] [data-dialog-box]{position:absolute;max-height:unset;width:280px;height:100vh;border-bottom-left-radius:0;border-top-left-radius:0;left:-100vw;transition:left .3s}[data-bspk=dialog][data-placement=left][data-visibility=show] [data-dialog-box]{left:0}[data-bspk=dialog][data-placement=right] [data-dialog-box]{position:absolute;max-height:unset;width:280px;height:100vh;border-bottom-right-radius:0;border-top-right-radius:0;right:-100vw;transition:right .3s}[data-bspk=dialog][data-placement=right][data-visibility=show] [data-dialog-box]{right:0}`);;
+import { FocusTrap } from 'focus-trap-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Portal } from './Portal';
+import { useId } from './hooks/useId';
+import { useOutsideClick } from './hooks/useOutsideClick';
+/**
+ * Dialogs display important information that users need to acknowledge. They appear over the interface and block
+ * further interactions until an action is selected.
+ *
+ * @name Dialog
+ */
+function Dialog({ 
+//
+children, innerRef, onClose, open, placement = 'center', hideScrim, id: idProp, ...containerProps }) {
+    const id = useId(idProp);
+    const boxRef = useRef(null);
+    const [visibility, setVisibilityState] = useState(open ? 'show' : 'hidden');
+    const prevVisibility = useRef(visibility);
+    const setVisibility = useCallback((next) => {
+        setVisibilityState((prev) => {
+            prevVisibility.current = prev;
+            return next;
+        });
+    }, []);
+    const handleKeyDown = useCallback((e) => e.key === 'Escape' && onClose(), [onClose]);
+    useEffect(() => {
+        if (open) {
+            if (prevVisibility.current.startsWith('show'))
+                return;
+            setVisibility('showing');
+            return;
+        }
+        if (prevVisibility.current.startsWith('hid'))
+            return;
+        setVisibility('hiding');
+    }, [open, setVisibility]);
+    useEffect(() => {
+        if (prevVisibility.current === visibility)
+            return;
+        if (visibility === 'showing') {
+            document.body.style.overflow = 'hidden';
+            setTimeout(() => setVisibility('show'), 10);
+        }
+        if (visibility === 'hiding') {
+            document.body.style.overflow = '';
+            setTimeout(() => setVisibility('hidden'), 10);
+        }
+    }, [setVisibility, visibility]);
+    useEffect(() => {
+        if (visibility.startsWith('hid'))
+            return;
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown, visibility]);
+    useOutsideClick([boxRef.current], onClose, !open);
+    return (visibility !== 'hidden' && (_jsx(Portal, { children: _jsxs("div", { ...containerProps, "data-bspk": "dialog", "data-placement": placement, "data-visibility": visibility, id: id, ref: innerRef, role: "presentation", children: [!hideScrim && _jsx("div", { "aria-hidden": "true", "data-dialog-backdrop": true }), _jsx(FocusTrap, { focusTrapOptions: {
+                        fallbackFocus: () => boxRef.current,
+                        clickOutsideDeactivates: true,
+                    }, children: _jsx("div", { "data-dialog-box": true, ref: (node) => {
+                            boxRef.current = node;
+                        }, tabIndex: -1, children: children }) })] }) })));
+}
+Dialog.bspkName = 'Dialog';
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map

package/dist/Dialog.js.map

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

package/{Divider.d.ts → dist/Divider.d.ts}

@@ -1,3 +1,4 @@
+import './divider.scss';
 import { ElementProps } from './';
 export type DividerProps = {
     /**
@@ -35,10 +36,9 @@ export type DividerProps = {
  *
  * @name Divider
  */
-declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 declare namespace Divider {
     var bspkName: string;
 }
 export { Divider };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Divider.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=divider]{/*! --inset: is set via inline style */display:flex;background-color:var(--stroke-neutral-low);align-self:stretch;place-content:stretch stretch;margin:0;padding:0;content:"hello";--length: calc(100% - var(--inset) * 2)}[data-bspk=divider],[data-bspk=divider][data-thickness=light]{--line-thickness: 1px;--padding: var(--spacing-sizing-02)}[data-bspk=divider][data-thickness=heavy]{--line-thickness: 2px;--padding: var(--spacing-sizing-04)}[data-bspk=divider],[data-bspk=divider][data-orientation=horizontal]{width:unset;min-height:unset;height:var(--line-thickness);min-width:var(--length);margin:var(--padding) var(--inset)}[data-bspk=divider][data-orientation=vertical]{height:unset;min-width:unset;width:var(--line-thickness);min-height:var(--length);margin:var(--inset) var(--padding)}[data-bspk=divider][data-hide-padding]{--padding: 0}`);;
+const insetToVariable = (insetProp) => {
+    const inset = Number(insetProp);
+    if (inset === undefined || inset === null || inset < 1 || inset > 12)
+        return '0px';
+    return `var(--spacing-sizing-${inset.toString().padStart(2, '0')})`;
+};
+/**
+ * Horizontal thin lines that separates grouped content in a list or other containers with an optional section/group
+ * label.
+ *
+ * Vertical thin lines that separates grouped content or other visual elements within a container.
+ *
+ * @name Divider
+ */
+function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
+    return (_jsx("div", { ...props, "aria-orientation": orientation, "data-bspk": "divider", "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: {
+            ...props.style,
+            '--inset': insetToVariable(inset),
+        } }));
+}
+Divider.bspkName = 'Divider';
+export { Divider };
+//# sourceMappingURL=Divider.js.map

package/dist/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAgCxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,SAAS,OAAO,CAAC,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,sBACS,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EACD;YACI,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACb,GAE9B,CACL,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}