@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Popover/popover.css

@@ -4,13 +4,15 @@
   background: var(--surface-neutral-t1-base);
   box-shadow: var(--drop-shadow-float);
   padding: var(--spacing-sizing-04);
-  width: 300px;
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
+  max-width: 300px;
   --arrow-size: var(--spacing-sizing-02);
   --arrow-offset: calc(var(--arrow-size) * -2);
   --arrow-background-color: var(--surface-neutral-t1-base);
+  --position-left: 0px;
+  --position-top: 0px;
 }
 [data-bspk=popover] header {
   display: flex;
@@ -19,19 +21,9 @@
   margin-bottom: var(--spacing-sizing-02);
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=popover] 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-06);
-  width: var(--spacing-sizing-06);
-}
-[data-bspk=popover] header button svg {
-  width: var(--spacing-sizing-06);
-  height: var(--spacing-sizing-06);
+[data-bspk=popover] header [data-bspk=button][data-close] {
+  margin-right: calc(var(--spacing-sizing-02) * -1);
+  margin-top: calc(var(--spacing-sizing-02) * -1);
 }
 [data-bspk=popover] [data-arrow] {
   z-index: 1;
@@ -44,44 +36,38 @@
 }
 [data-bspk=popover][data-placement^=top] [data-arrow] {
   bottom: var(--arrow-offset);
+  left: var(--position-left);
   border-top-color: var(--arrow-background-color);
-  filter: drop-shadow(0 2px 1px var(--shadow-10));
+  filter: drop-shadow(0 1px 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=right] [data-arrow] {
+  top: var(--position-top);
   margin-left: calc(var(--arrow-offset) * 2);
   border-right-color: var(--arrow-background-color);
-  filter: drop-shadow(-2px 0 1px var(--shadow-10));
+  filter: drop-shadow(-1px 0 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=bottom] [data-arrow] {
-  top: var(--arrow-offset);
+  left: var(--position-left);
+  top: -15px;
   border-bottom-color: var(--arrow-background-color);
-  filter: drop-shadow(0 -2px 1px var(--shadow-10));
-}
-[data-bspk=popover][data-placement=bottom-start] [data-arrow] {
-  margin-left: var(--arrow-offset);
-}
-[data-bspk=popover][data-placement=bottom-end] [data-arrow] {
-  margin-left: calc(var(--arrow-offset) * -1);
+  filter: drop-shadow(0 -1px 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=left] [data-arrow] {
+  top: var(--position-top);
   right: var(--arrow-offset);
   border-left-color: var(--arrow-background-color);
-  filter: drop-shadow(2px 0 1px var(--shadow-10));
+  filter: drop-shadow(1px 0 1px var(--shadow-10));
 }
 [data-bspk=popover] [data-content] {
   gap: var(--spacing-sizing-04);
   display: flex;
   flex-direction: column;
 }
-[data-bspk=popover] [data-call-to-action] {
+[data-bspk=popover] [data-cta-row] {
+  display: flex;
+  align-items: end;
+  gap: var(--spacing-sizing-02);
   margin: 0 0 0 auto;
-  /* background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0 var(--spacing-sizing-03);
-  height: var(--spacing-sizing-12);
-  font: var(--labels-small);
-  color: var(--foreground-brand-primary); */
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Popover/popover.css.js

@@ -7,13 +7,15 @@ style.appendChild(document.createTextNode(`[data-bspk=popover] {
   background: var(--surface-neutral-t1-base);
   box-shadow: var(--drop-shadow-float);
   padding: var(--spacing-sizing-04);
-  width: 300px;
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
+  max-width: 300px;
   --arrow-size: var(--spacing-sizing-02);
   --arrow-offset: calc(var(--arrow-size) * -2);
   --arrow-background-color: var(--surface-neutral-t1-base);
+  --position-left: 0px;
+  --position-top: 0px;
 }
 [data-bspk=popover] header {
   display: flex;
@@ -22,19 +24,9 @@ style.appendChild(document.createTextNode(`[data-bspk=popover] {
   margin-bottom: var(--spacing-sizing-02);
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=popover] 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-06);
-  width: var(--spacing-sizing-06);
-}
-[data-bspk=popover] header button svg {
-  width: var(--spacing-sizing-06);
-  height: var(--spacing-sizing-06);
+[data-bspk=popover] header [data-bspk=button][data-close] {
+  margin-right: calc(var(--spacing-sizing-02) * -1);
+  margin-top: calc(var(--spacing-sizing-02) * -1);
 }
 [data-bspk=popover] [data-arrow] {
   z-index: 1;
@@ -47,47 +39,40 @@ style.appendChild(document.createTextNode(`[data-bspk=popover] {
 }
 [data-bspk=popover][data-placement^=top] [data-arrow] {
   bottom: var(--arrow-offset);
+  left: var(--position-left);
   border-top-color: var(--arrow-background-color);
-  filter: drop-shadow(0 2px 1px var(--shadow-10));
+  filter: drop-shadow(0 1px 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=right] [data-arrow] {
+  top: var(--position-top);
   margin-left: calc(var(--arrow-offset) * 2);
   border-right-color: var(--arrow-background-color);
-  filter: drop-shadow(-2px 0 1px var(--shadow-10));
+  filter: drop-shadow(-1px 0 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=bottom] [data-arrow] {
-  top: var(--arrow-offset);
+  left: var(--position-left);
+  top: -15px;
   border-bottom-color: var(--arrow-background-color);
-  filter: drop-shadow(0 -2px 1px var(--shadow-10));
-}
-[data-bspk=popover][data-placement=bottom-start] [data-arrow] {
-  margin-left: var(--arrow-offset);
-}
-[data-bspk=popover][data-placement=bottom-end] [data-arrow] {
-  margin-left: calc(var(--arrow-offset) * -1);
+  filter: drop-shadow(0 -1px 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=left] [data-arrow] {
+  top: var(--position-top);
   right: var(--arrow-offset);
   border-left-color: var(--arrow-background-color);
-  filter: drop-shadow(2px 0 1px var(--shadow-10));
+  filter: drop-shadow(1px 0 1px var(--shadow-10));
 }
 [data-bspk=popover] [data-content] {
   gap: var(--spacing-sizing-04);
   display: flex;
   flex-direction: column;
 }
-[data-bspk=popover] [data-call-to-action] {
+[data-bspk=popover] [data-cta-row] {
+  display: flex;
+  align-items: end;
+  gap: var(--spacing-sizing-02);
   margin: 0 0 0 auto;
-  /* background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0 var(--spacing-sizing-03);
-  height: var(--spacing-sizing-12);
-  font: var(--labels-small);
-  color: var(--foreground-brand-primary); */
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Portal/Portal.d.ts

@@ -21,9 +21,5 @@ export type PortalProps = {
  * @name Portal
  * @phase Utility
  */
-declare function Portal({ children, container }: PortalProps): import("react").ReactPortal | null;
-declare namespace Portal {
-    var bspkName: string;
-}
-export { Portal };
+export declare function Portal({ children, container }: PortalProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Portal/Portal.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 /**
@@ -8,16 +9,15 @@ import { createPortal } from 'react-dom';
  * @name Portal
  * @phase Utility
  */
-function Portal({ children, container }) {
+export function Portal({ children, container }) {
     const [portalContainer, setPortalContainer] = useState(container || null);
     useEffect(() => {
         if (!portalContainer && typeof window !== 'undefined')
             setPortalContainer(document.body);
     }, [portalContainer]);
+    if (!portalContainer)
+        return null;
     // data-bspk="portal" can't be used here
-    return portalContainer && createPortal(children, portalContainer);
+    return _jsx(_Fragment, { children: createPortal(children, portalContainer) });
 }
-Portal.bspkName = 'Portal';
-export { Portal };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 //# sourceMappingURL=Portal.js.map

package/dist/components/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/components/Portal/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAiBzC;;;;;;;GAOG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe;IAChD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,wCAAwC;IACxC,OAAO,eAAe,IAAI,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,sDAAsD"}
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/components/Portal/Portal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAiBzC;;;;;;;GAOG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe;IACvD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,CAAC,eAAe;QAAE,OAAO,IAAI,CAAC;IAElC,wCAAwC;IACxC,OAAO,4BAAG,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,GAAI,CAAC;AAC1D,CAAC"}

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -27,6 +27,20 @@ export type ProgressBarProps = {
     align?: 'center' | 'left';
     /** The label of the progressbar. */
     label: string;
+    /**
+     * If true and completion = 100, displays the progress bar in the success color.
+     *
+     * @deprecated This has a very narrow use-case. See guidelines for more information.
+     * @default false
+     */
+    successColor?: boolean;
+    /**
+     * Whether to hide the success color when the progress bar is complete.
+     *
+     * @deprecated This has a very narrow use-case. See guidelines for more information.
+     * @default false
+     */
+    successHidden?: boolean;
 };
 /**
  * A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
@@ -40,11 +54,7 @@ export type ProgressBarProps = {
  *     }
  *
  * @name ProgressBar
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function ProgressBar({ size, completion, align, label }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ProgressBar {
-    var bspkName: string;
-}
-export { ProgressBar };
+export declare function ProgressBar({ size, completion: completionProp, align, label, successColor, successHidden, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useId } from 'react';
-import { cssWithVars } from '../../utils/cwv';
 import './progress-bar.css.js';
+import { useId } from '../../hooks/useId';
+import { cssWithVars } from '../../utils/cwv';
 /**
  * A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
  * occurring in the background.
@@ -14,12 +14,13 @@ import './progress-bar.css.js';
  *     }
  *
  * @name ProgressBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function ProgressBar({ size = 'large', completion = 0, align = 'center', label }) {
+export function ProgressBar({ size = 'large', completion: completionProp = 0, align = 'center', label, successColor = false, successHidden = false, }) {
     const id = useId();
-    return (_jsxs("div", { "data-align": align, "data-bspk": "progress-bar", "data-size": size, children: [_jsxs("progress", { "aria-busy": completion < 100, "aria-label": "A bounded progress bar from 0 to 100", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": completion, id: id, max: "100", value: completion, children: [completion, "%"] }), _jsx("div", { "aria-hidden": true, "data-bar": true, style: cssWithVars({ '--width': `${completion}%` }) }), _jsx("label", { htmlFor: id, children: label })] }));
+    const completion = Math.max(0, Math.min(100, Math.round(completionProp))); // Ensure completion is between 0 and 100
+    if (successHidden && completion === 100)
+        return null;
+    return (_jsxs("div", { "data-align": align, "data-bspk": "progress-bar", "data-size": size, "data-success": successColor && completion === 100 ? 'color' : undefined, children: [_jsxs("progress", { "aria-busy": completion < 100, "aria-label": "A bounded progress bar from 0 to 100", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": completion, id: id, max: "100", value: completion, children: [completion, "%"] }), _jsx("div", { "aria-hidden": true, "data-bar": true, style: cssWithVars({ '--width': `${completion}%` }) }), _jsx("label", { htmlFor: id, children: label })] }));
 }
-ProgressBar.bspkName = 'ProgressBar';
-export { ProgressBar };
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,qBAAqB,CAAC;AAgC7B;;;;;;;;;;;;;GAaG;AACH,SAAS,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAC9F,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,6BAAiB,KAAK,eAAY,cAAc,eAAY,IAAI,aAC5D,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC,GAAI,EACjF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA8C1C;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,IAAI,GAAG,OAAO,EACd,UAAU,EAAE,cAAc,GAAG,CAAC,EAC9B,KAAK,GAAG,QAAQ,EAChB,KAAK,EACL,YAAY,GAAG,KAAK,EACpB,aAAa,GAAG,KAAK,GACN;IACf,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,yCAAyC;IAEpH,IAAI,aAAa,IAAI,UAAU,KAAK,GAAG;QAAE,OAAO,IAAI,CAAC;IAErD,OAAO,CACH,6BACgB,KAAK,eACP,cAAc,eACb,IAAI,kBACD,YAAY,IAAI,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,aAEtE,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC,GAAI,EACjF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC"}

package/dist/components/ProgressBar/progress-bar.css

@@ -27,6 +27,9 @@
 [data-bspk=progress-bar][data-size=small] [data-bar] {
   height: var(--spacing-sizing-01);
 }
+[data-bspk=progress-bar][data-success=color] [data-bar]::after {
+  background-color: var(--status-success);
+}
 [data-bspk=progress-bar] label {
   font-size: var(--labels-small);
   width: 100%;

package/dist/components/ProgressBar/progress-bar.css.js

@@ -30,6 +30,9 @@ style.appendChild(document.createTextNode(`[data-bspk=progress-bar] {
 [data-bspk=progress-bar][data-size=small] [data-bar] {
   height: var(--spacing-sizing-01);
 }
+[data-bspk=progress-bar][data-success=color] [data-bar]::after {
+  background-color: var(--status-success);
+}
 [data-bspk=progress-bar] label {
   font-size: var(--labels-small);
   width: 100%;
@@ -42,4 +45,3 @@ style.appendChild(document.createTextNode(`[data-bspk=progress-bar] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/ProgressCircle/ProgressCircle.d.ts

@@ -26,11 +26,10 @@ export type ProgressCircleProps = {
  *     }
  *
  * @name ProgressCircle
- * @phase AccessibilityReview
+ * @phase UXReview
  */
 declare function ProgressCircle({ label, labelPosition, size }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressCircle {
-    var bspkName: string;
     var SVG: (props: {
         strokeWidth?: number;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressCircle/ProgressCircle.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/no-multi-comp */ import { useId } from 'react';
-import { Txt } from '../Txt';
 import './progress-circle.css.js';
+import { ProgressCircleSVG } from './ProgressCircleSVG';
+import { Txt } from '../Txt';
+import { useId } from '../../hooks/useId';
 /**
  * Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
  *
@@ -13,7 +14,7 @@ import './progress-circle.css.js';
  *     }
  *
  * @name ProgressCircle
- * @phase AccessibilityReview
+ * @phase UXReview
  */
 function ProgressCircle({ label, labelPosition, size = 'medium' }) {
     let variant = 'labels-base';
@@ -24,13 +25,6 @@ function ProgressCircle({ label, labelPosition, size = 'medium' }) {
     const labelId = useId();
     return (_jsxs("div", { "aria-labelledby": labelId, "data-bspk": "progress-circle", "data-label-position": labelPosition, "data-size": size, role: "progressbar", children: [_jsx(ProgressCircle.SVG, {}), _jsx(Txt, { id: labelId, variant: variant, children: label || 'Loading ...' })] }));
 }
-ProgressCircle.bspkName = 'ProgressCircle';
-export { ProgressCircle };
-const ProgressCircleSVG = (props) => {
-    const strokeWidth = props.strokeWidth || 10;
-    const width = 100;
-    const id = useId();
-    return (_jsxs("svg", { ...props, "data-animated": true, fill: "none", viewBox: `0 0 ${width * 2} ${width * 2}`, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: `${id}spinner-secondHalf`, children: [_jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: 0 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] }), _jsxs("linearGradient", { id: `${id}spinner-firstHalf`, children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] })] }), _jsxs("g", { strokeWidth: strokeWidth * 2, children: [_jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`, stroke: `url(#${id}spinner-secondHalf)` }), _jsx("path", { d: `M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`, stroke: `url(#${id}spinner-firstHalf)` }), _jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`, stroke: "currentColor", strokeLinecap: "round" })] })] }));
-};
 ProgressCircle.SVG = ProgressCircleSVG;
+export { ProgressCircle };
 //# sourceMappingURL=ProgressCircle.js.map

package/dist/components/ProgressCircle/ProgressCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,wCAAwC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,wBAAwB,CAAC;AAmBhC;;;;;;;;;;;;GAYG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,GAAG,QAAQ,EAAuB;IAClF,IAAI,OAAO,GAAe,aAAa,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;SAC1C,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;IAEpD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,kCACqB,OAAO,eACd,iBAAiB,yBACN,aAAa,eACvB,IAAI,EACf,IAAI,EAAC,aAAa,aAElB,KAAC,cAAc,CAAC,GAAG,KAAG,EACtB,KAAC,GAAG,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YAC7B,KAAK,IAAI,aAAa,GACrB,IACJ,CACT,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,iBAAiB,GAAG,CAAC,KAA+B,EAAE,EAAE;IAC1D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;IAC5C,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,kBAAS,KAAK,yBAAgB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,aAC9E,2BACI,0BAAgB,EAAE,EAAE,GAAG,EAAE,oBAAoB,aACzC,eAAM,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,EACjB,0BAAgB,EAAE,EAAE,GAAG,EAAE,mBAAmB,aACxC,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC7D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,IACd,EACP,aAAG,WAAW,EAAE,WAAW,GAAG,CAAC,aAC3B,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GACzC,EACF,eACI,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GACxC,EAEF,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,EAChH,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACvB,IACF,IACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,GAAG,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAoBtC;;;;;;;;;;;;GAYG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,GAAG,QAAQ,EAAuB;IAClF,IAAI,OAAO,GAAe,aAAa,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;SAC1C,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;IAEpD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,kCACqB,OAAO,eACd,iBAAiB,yBACN,aAAa,eACvB,IAAI,EACf,IAAI,EAAC,aAAa,aAElB,KAAC,cAAc,CAAC,GAAG,KAAG,EACtB,KAAC,GAAG,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YAC7B,KAAK,IAAI,aAAa,GACrB,IACJ,CACT,CAAC;AACN,CAAC;AAED,cAAc,CAAC,GAAG,GAAG,iBAAiB,CAAC;AAEvC,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ProgressCircle/ProgressCircleSVG.d.ts

@@ -0,0 +1,3 @@
+export declare const ProgressCircleSVG: (props: {
+    strokeWidth?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressCircle/ProgressCircleSVG.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from '../../hooks/useId';
+export const ProgressCircleSVG = (props) => {
+    const strokeWidth = props.strokeWidth || 10;
+    const width = 100;
+    const id = useId();
+    return (_jsxs("svg", { ...props, "data-animated": true, fill: "none", viewBox: `0 0 ${width * 2} ${width * 2}`, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: `${id}spinner-secondHalf`, children: [_jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: 0 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] }), _jsxs("linearGradient", { id: `${id}spinner-firstHalf`, children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] })] }), _jsxs("g", { strokeWidth: strokeWidth * 2, children: [_jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`, stroke: `url(#${id}spinner-secondHalf)` }), _jsx("path", { d: `M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`, stroke: `url(#${id}spinner-firstHalf)` }), _jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`, stroke: "currentColor", strokeLinecap: "round" })] })] }));
+};
+//# sourceMappingURL=ProgressCircleSVG.js.map

package/dist/components/ProgressCircle/ProgressCircleSVG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircleSVG.js","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircleSVG.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;IAC5C,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,kBAAS,KAAK,yBAAgB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,aAC9E,2BACI,0BAAgB,EAAE,EAAE,GAAG,EAAE,oBAAoB,aACzC,eAAM,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,EACjB,0BAAgB,EAAE,EAAE,GAAG,EAAE,mBAAmB,aACxC,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC7D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,IACd,EACP,aAAG,WAAW,EAAE,WAAW,GAAG,CAAC,aAC3B,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GACzC,EACF,eACI,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GACxC,EAEF,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,EAChH,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACvB,IACF,IACF,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/ProgressCircle/progress-circle.css.js

@@ -43,4 +43,3 @@ style.appendChild(document.createTextNode(`[data-bspk=progress-circle] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/ProgressionStepper/ProgressionStepper.d.ts

@@ -1,5 +1,5 @@
-import { ElementProps } from '../../index.js';
 import './progression-stepper.scss';
+import { ElementProps } from '-/types/common';
 /** A progress stepper item is a single step in the progress bar. */
 export type ProgressionStepperItem = {
     /**
@@ -30,11 +30,7 @@ export type ProgressionStepperProps = {
      * The steps to display in the progress bar.
      *
      * @example
-     *     [
-     *         { name: '[Name of step to proceed forward 1]' },
-     *         { name: '[Name of step to proceed forward 2]' },
-     *         { name: '[Name of step to proceed forward 3]' },
-     *     ];
+     *     [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }];
      *
      * @type Array<ProgressionStepperItem>
      * @required
@@ -71,11 +67,7 @@ export type ProgressionStepperProps = {
  *     }
  *
  * @name ProgressionStepper
- * @phase Backlog
+ * @phase UXReview
  */
-declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
-declare namespace ProgressionStepper {
-    var bspkName: string;
-}
-export { ProgressionStepper };
+export declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressionStepper/ProgressionStepper.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { SvgCheck } from '@bspk/icons/Check';
 import './progression-stepper.css.js';
+import { SvgCheck } from '@bspk/icons/Check';
 /**
  * A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
  *
@@ -12,20 +12,18 @@ import './progression-stepper.css.js';
  *     }
  *
  * @name ProgressionStepper
- * @phase Backlog
+ * @phase UXReview
  */
-function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
+export function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
     const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
-    return !steps?.length ? null : (_jsxs("div", { ...containerProps, "data-bspk": "progression-stepper", "data-variant": variant, children: [variant === 'widget' && (_jsxs("label", { children: [_jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), _jsx("span", { "data-subtitle": true, children: currentStep >= steps.length ? ('Completed') : (_jsxs(_Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), _jsx("ol", { children: steps.flatMap(({ name, subtext }, index) => {
+    return !steps?.length ? null : (_jsxs("div", { ...containerProps, "data-bspk": "progression-stepper", "data-variant": variant, children: [variant === 'widget' && (_jsxs("label", { children: [_jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), _jsx("span", { "data-subtitle": true, children: currentStep > steps.length ? ('Completed') : (_jsxs(_Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), _jsx("ol", { children: steps.map(({ name, subtext }, index) => {
                     const stepNum = index + 1;
                     let status = 'incomplete';
-                    if (stepNum < currentStep)
+                    if (currentStep > stepNum)
                         status = 'complete';
-                    else if (stepNum === currentStep)
+                    else if (currentStep === stepNum)
                         status = 'current';
-                    return (_jsxs("li", { "data-status": status, "data-step": stepNum, children: [_jsxs("span", { "aria-hidden": true, "data-line-circle": true, children: [_jsx("span", { "data-line": "before" }), _jsxs("span", { "data-circle": true, children: [_jsx("span", { children: stepNum }), status === 'complete' && _jsx(SvgCheck, {})] }), _jsx("span", { "data-line": "after" })] }), variant !== 'widget' && (_jsxs("span", { "data-content": true, children: [_jsx("span", { "data-name": true, children: name }), subtext && _jsx("span", { "data-subtext": true, children: subtext })] }))] }, `step-${index}`));
+                    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, "data-status": status, "data-step": stepNum, children: [_jsxs("span", { "data-line-circle": true, children: [_jsx("span", { "data-line": "before" }), _jsx("span", { "data-circle": true, children: status === 'complete' ? (_jsx(SvgCheck, { "aria-hidden": true })) : ((variant !== 'widget' || status === 'current') && _jsx("span", { children: stepNum })) }), _jsx("span", { "data-line": "after" })] }), variant !== 'widget' && (_jsxs("span", { "data-content": true, children: [_jsx("span", { "data-name": true, children: name }), subtext && _jsx("span", { "data-subtext": true, children: subtext })] }))] }, `step-${index}`));
                 }) })] }));
 }
-ProgressionStepper.bspkName = 'ProgressionStepper';
-export { ProgressionStepper };
 //# sourceMappingURL=ProgressionStepper.js.map

package/dist/components/ProgressionStepper/ProgressionStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,4BAA4B,CAAC;AA6DpC;;;;;;;;;;;;GAYG;AACH,SAAS,kBAAkB,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,OAAO,GAAG,WAAW;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,OAAO,KAAK,WAAW;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,6BAAiB,MAAM,eAAa,OAAO,aACvC,0EACI,4BAAgB,QAAQ,GAAG,EAC3B,gDACI,yBAAO,OAAO,GAAQ,EACrB,MAAM,KAAK,UAAU,IAAI,KAAC,QAAQ,KAAG,IACnC,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAd6C,QAAQ,KAAK,EAAE,CAe5D,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC;AAED,kBAAkB,CAAC,QAAQ,GAAG,oBAAoB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AA0D7C;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC1B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACpC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,WAAW,GAAG,OAAO;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,WAAW,KAAK,OAAO;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,8BACkB,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,iBAC1C,MAAM,eACR,OAAO,aAGlB,qDACI,4BAAgB,QAAQ,GAAG,EAC3B,8CACK,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CACrB,KAAC,QAAQ,mBAAc,IAAI,GAAI,CAClC,CAAC,CAAC,CAAC,CACA,CAAC,OAAO,KAAK,QAAQ,IAAI,MAAM,KAAK,SAAS,CAAC,IAAI,yBAAO,OAAO,GAAQ,CAC3E,GACE,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAlBI,QAAQ,KAAK,EAAE,CAmBnB,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC"}

package/dist/components/ProgressionStepper/ProgressionStepperExample.d.ts

@@ -1,3 +1,4 @@
-import { ComponentExample } from '../../utils/demo';
 import { ProgressionStepperProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<ProgressionStepperProps>[];
 export declare const ProgressionStepperExample: ComponentExample<ProgressionStepperProps>;

package/dist/components/ProgressionStepper/ProgressionStepperExample.js

@@ -1,50 +1,52 @@
-export const ProgressionStepperExample = {
-    presets: [
-        {
-            label: 'Horizontal',
-            propState: {
-                variant: 'horizontal',
-                currentStep: 2,
-                steps: [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }],
-            },
+export const presets = [
+    {
+        label: 'Horizontal',
+        propState: {
+            variant: 'horizontal',
+            currentStep: 2,
+            steps: [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }],
         },
-        {
-            label: 'Vertical',
-            propState: {
-                variant: 'vertical',
-                currentStep: 2,
-                steps: [
-                    {
-                        name: 'Name of step 1',
-                        subtext: `Subtext of step 1`,
-                    },
-                    {
-                        name: 'Name of step 2',
-                        subtext: `Subtext of step 2`,
-                    },
-                    {
-                        name: 'Name of step 3',
-                        subtext: `Subtext of step 3`,
-                    },
-                ],
-            },
+    },
+    {
+        label: 'Vertical',
+        propState: {
+            variant: 'vertical',
+            currentStep: 2,
+            steps: [
+                {
+                    name: 'Name of step 1',
+                    subtext: `Subtext of step 1`,
+                },
+                {
+                    name: 'Name of step 2',
+                    subtext: `Subtext of step 2`,
+                },
+                {
+                    name: 'Name of step 3',
+                    subtext: `Subtext of step 3`,
+                },
+            ],
         },
-        {
-            label: 'Widget',
-            propState: {
-                variant: 'widget',
-                currentStep: 2,
-                steps: [
-                    { name: 'Name of step 1' },
-                    { name: 'Name of step 2' },
-                    { name: 'Name of step 3' },
-                    { name: 'Name of step 4' },
-                    { name: 'Name of step 5' },
-                    { name: 'Name of step 6' },
-                    { name: 'Name of step 7' },
-                ],
-            },
+    },
+    {
+        label: 'Widget',
+        propState: {
+            variant: 'widget',
+            currentStep: 3,
+            steps: [
+                { name: 'Name of step 1' },
+                { name: 'Name of step 2' },
+                { name: 'Name of step 3' },
+                { name: 'Name of step 4' },
+                { name: 'Name of step 5' },
+                { name: 'Name of step 6' },
+                { name: 'Name of step 7' },
+            ],
         },
-    ],
+    },
+];
+export const ProgressionStepperExample = {
+    containerStyle: { width: '100%' },
+    presets,
 };
 //# sourceMappingURL=ProgressionStepperExample.js.map