@bspk/ui 1.3.8 → 1.3.10

package/dist/components/Pagination/PageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageList.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAiB;IACjE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACjD,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;QACvB,OAAO,CACH,KAAC,MAAM,kBACS,QAAQ,IAAI,EAAE,EAE1B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,IAL3C,IAAI,CAMX,CACL,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC"}
+{"version":3,"file":"PageList.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAiB;IACjE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACjD,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;QACvB,OAAO,CACH,KAAC,MAAM,kBACS,QAAQ,IAAI,EAAE,EAE1B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,IAL3C,IAAI,CAMX,CACL,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC"}

package/dist/components/Pagination/Pagination.d.ts

@@ -4,7 +4,9 @@ export type PaginationProps = {
     /**
      * The number of pages to display in the pagination component.
      *
-     * @default 1
+     * If there is only one page, the component will not render.
+     *
+     * @default 2
      */
     numPages: number;
     /**
@@ -22,18 +24,15 @@ export type PaginationProps = {
  *
  * @example
  *     import { Pagination } from '@bspk/ui/Pagination';
- *     import { usePaginationState } from '@bspk/ui/hooks/usePaginationState';
  *
  *     function Example() {
- *         const numPages = 10;
- *
- *         const { currentPage, setCurrentPage } = usePaginationState(numPages);
+ *         const [currentPage, setCurrentPage] = useState(1);
  *
- *         return <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages} />;
+ *         return <Pagination value={currentPage} onChange={setCurrentPage} numPages={10} />;
  *     }
  *
  * @name Pagination
  * @phase UXReview
  */
-export declare function Pagination({ numPages, value, onChange, ...ariaProps }: AriaAttributes & PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ numPages, value, onChange, ...ariaProps }: AriaAttributes & PaginationProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Pagination/Pagination.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './pagination.css.js';
 import { SvgIcon } from '@bspk/icons/SvgIcon';
-import { PageInput } from './PageInput';
+import { useEffect, useState } from 'react';
 import { PageList } from './PageList';
 import { Button } from '../Button';
+import { InputElement } from '../Input';
 // After this point the manual input renders. With equal or fewer pages the individual page buttons render instead.
 const INPUT_TYPE_THRESHOLD = 7;
 /**
@@ -12,14 +13,11 @@ const INPUT_TYPE_THRESHOLD = 7;
  *
  * @example
  *     import { Pagination } from '@bspk/ui/Pagination';
- *     import { usePaginationState } from '@bspk/ui/hooks/usePaginationState';
  *
  *     function Example() {
- *         const numPages = 10;
+ *         const [currentPage, setCurrentPage] = useState(1);
  *
- *         const { currentPage, setCurrentPage } = usePaginationState(numPages);
- *
- *         return <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages} />;
+ *         return <Pagination value={currentPage} onChange={setCurrentPage} numPages={10} />;
  *     }
  *
  * @name Pagination
@@ -27,19 +25,34 @@ const INPUT_TYPE_THRESHOLD = 7;
  */
 export function Pagination({ numPages, value, onChange, ...ariaProps }) {
     const nextPage = () => {
-        if (value < numPages) {
+        if (value < numPages)
             onChange(value + 1);
-        }
     };
     const previousPage = () => {
-        if (value > 1) {
+        if (value > 1)
             onChange(value - 1);
-        }
     };
-    const isFirstPage = value === 1;
-    const isLastPage = value === numPages;
-    const isOutOfBoundsValue = value < 1 || value > numPages;
-    const isOneOrFewerPages = numPages <= 1;
-    return (_jsxs("span", { "data-bspk": "pagination", role: "group", ...ariaProps, children: [_jsx(Button, { disabled: isOutOfBoundsValue || isOneOrFewerPages || isFirstPage, icon: _jsx(SvgIcon, { name: "ChevronLeft" }), iconOnly: true, label: isFirstPage ? 'First page' : `Previous page (${value - 1})`, onClick: previousPage, owner: "pagination", size: "small", variant: "tertiary" }), numPages > INPUT_TYPE_THRESHOLD ? (_jsx(PageInput, { numPages: numPages, onChange: onChange, value: value })) : (_jsx(PageList, { numPages: numPages, onChange: onChange, value: value })), _jsx(Button, { disabled: isOutOfBoundsValue || isOneOrFewerPages || isLastPage, icon: _jsx(SvgIcon, { name: "ChevronRight" }), iconOnly: true, label: isLastPage ? 'Last page' : `Next page (${value + 1})`, onClick: nextPage, owner: "pagination", size: "small", variant: "tertiary" })] }));
+    const [inputValue, setInputValue] = useState(`${value}`);
+    useEffect(() => setInputValue(`${value}`), [value]);
+    const submitInputChange = () => {
+        const parsedValue = parseInt(inputValue || '', 10);
+        if (isNaN(parsedValue))
+            return setInputValue(`${value}`);
+        let next = parsedValue;
+        if (parsedValue < 1)
+            next = 1;
+        if (parsedValue > numPages)
+            next = numPages;
+        onChange(next);
+        if (next !== parsedValue)
+            setInputValue(`${next}`);
+    };
+    const inBounds = (n) => n >= 1 && n <= numPages;
+    if (numPages <= 1)
+        return null;
+    return (_jsxs("span", { "data-bspk": "pagination", role: "group", ...ariaProps, children: [_jsx(Button, { disabled: !inBounds(value - 1), icon: _jsx(SvgIcon, { name: "ChevronLeft" }), iconOnly: true, label: value === 1 ? 'First page' : `Previous page (${value - 1})`, onClick: previousPage, owner: "pagination", size: "small", variant: "tertiary" }), numPages > INPUT_TYPE_THRESHOLD ? (_jsxs("form", { "data-input-form": true, onSubmit: (e) => {
+                    e.preventDefault();
+                    submitInputChange();
+                }, children: [_jsx(InputElement, { name: "page-number", onBlur: () => submitInputChange(), onChange: setInputValue, owner: "pagination", showClearButton: false, type: "number", value: inputValue }), "of ", numPages] })) : (_jsx(PageList, { numPages: numPages, onChange: onChange, value: value })), _jsx(Button, { disabled: !inBounds(value + 1), icon: _jsx(SvgIcon, { name: "ChevronRight" }), iconOnly: true, label: value === numPages ? 'Last page' : `Next page (${value + 1})`, onClick: nextPage, owner: "pagination", size: "small", variant: "tertiary" })] }));
 }
 //# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,mHAAmH;AACnH,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAoB/B;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAoC;IACpG,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,IAAI,KAAK,GAAG,QAAQ,EAAE,CAAC;YACnB,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACZ,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,KAAK,CAAC,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,QAAQ,CAAC;IACtC,MAAM,kBAAkB,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,QAAQ,CAAC;IACzD,MAAM,iBAAiB,GAAG,QAAQ,IAAI,CAAC,CAAC;IAExC,OAAO,CACH,6BAAgB,YAAY,EAAC,IAAI,EAAC,OAAO,KAAK,SAAS,aACnD,KAAC,MAAM,IACH,QAAQ,EAAE,kBAAkB,IAAI,iBAAiB,IAAI,WAAW,EAChE,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAC,aAAa,GAAG,EACpC,QAAQ,QACR,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG,CAAC,GAAG,EAClE,OAAO,EAAE,YAAY,EACrB,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,EAED,QAAQ,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAC/B,KAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACtE,CAAC,CAAC,CAAC,CACA,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACrE,EAED,KAAC,MAAM,IACH,QAAQ,EAAE,kBAAkB,IAAI,iBAAiB,IAAI,UAAU,EAC/D,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAC,cAAc,GAAG,EACrC,QAAQ,QACR,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,KAAK,GAAG,CAAC,GAAG,EAC5D,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,IACC,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}

package/dist/components/Pagination/pagination.css

@@ -6,23 +6,14 @@
   gap: var(--spacing-sizing-01);
   flex: 1;
 }
-[data-bspk=pagination] [data-bspk=page-input] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sizing-01);
-}
-[data-bspk=pagination] [data-bspk=page-input] [data-bspk=txt] {
-  color: var(--foreground-neutral-on-surface-variant-02);
-  text-wrap: nowrap;
+[data-bspk=pagination] [data-input-form] {
+  display: contents;
 }
-[data-bspk=pagination] [data-bspk=page-input] [data-bspk=text-input] {
-  width: var(--spacing-sizing-12);
+[data-bspk=pagination] [data-bspk=input] {
+  max-width: var(--spacing-sizing-12);
 }
-[data-bspk=pagination] [data-bspk=page-input] [data-bspk=text-input] input {
+[data-bspk=pagination] [data-bspk=input] input {
   text-align: center;
-  flex: 1;
 }
 [data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small] {
   padding: 6px 0;

package/dist/components/Pagination/pagination.css.js

@@ -9,23 +9,14 @@ style.appendChild(document.createTextNode(`[data-bspk=pagination] {
   gap: var(--spacing-sizing-01);
   flex: 1;
 }
-[data-bspk=pagination] [data-bspk=page-input] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sizing-01);
-}
-[data-bspk=pagination] [data-bspk=page-input] [data-bspk=txt] {
-  color: var(--foreground-neutral-on-surface-variant-02);
-  text-wrap: nowrap;
+[data-bspk=pagination] [data-input-form] {
+  display: contents;
 }
-[data-bspk=pagination] [data-bspk=page-input] [data-bspk=text-input] {
-  width: var(--spacing-sizing-12);
+[data-bspk=pagination] [data-bspk=input] {
+  max-width: var(--spacing-sizing-12);
 }
-[data-bspk=pagination] [data-bspk=page-input] [data-bspk=text-input] input {
+[data-bspk=pagination] [data-bspk=input] input {
   text-align: center;
-  flex: 1;
 }
 [data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small] {
   padding: 6px 0;

package/dist/components/Password/Password.d.ts

@@ -11,30 +11,29 @@ export type PasswordProps = FieldControlProps & Pick<InputProps, 'containerRef'
  *     import { Password } from '@bspk/ui/Password';
  *     import { useState } from 'react';
  *
- *     function ExampleStandalone() {
+ *     () => {
  *         const [value, setValue] = useState('');
  *
  *         return (
- *             <Password
- *                 aria-label="Enter password"
- *                 value={value}
- *                 onChange={setValue}
- *                 aria-label="password"
- *                 name="password"
- *             />
+ *             <>
+ *                 // standalone password example
+ *                 <Password
+ *                     aria-label="Enter password"
+ *                     value={value}
+ *                     onChange={setValue}
+ *                     aria-label="password"
+ *                     name="password"
+ *                 />
+ *                 <br />
+ *                 // password used within a field
+ *                 <Field>
+ *                     <FieldLabel>Password</FieldLabel>
+ *                     <Password value={value} onChange={setValue} aria-label="password" name="password" />
+ *                     <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
- *
- *     function ExampleWithField() {
- *         const [value, setValue] = useState('');
- *         return (
- *             <Field>
- *                 <FieldLabel>Password</FieldLabel>
- *                 <Password value={value} onChange={setValue} aria-label="password" name="password" />
- *                 <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
- *             </Field>
- *         );
- *     }
+ *     };
  *
  * @name Password
  * @phase UXReview

package/dist/components/Password/Password.js

@@ -13,30 +13,29 @@ import { InputElement } from '../Input';
  *     import { Password } from '@bspk/ui/Password';
  *     import { useState } from 'react';
  *
- *     function ExampleStandalone() {
+ *     () => {
  *         const [value, setValue] = useState('');
  *
  *         return (
- *             <Password
- *                 aria-label="Enter password"
- *                 value={value}
- *                 onChange={setValue}
- *                 aria-label="password"
- *                 name="password"
- *             />
+ *             <>
+ *                 // standalone password example
+ *                 <Password
+ *                     aria-label="Enter password"
+ *                     value={value}
+ *                     onChange={setValue}
+ *                     aria-label="password"
+ *                     name="password"
+ *                 />
+ *                 <br />
+ *                 // password used within a field
+ *                 <Field>
+ *                     <FieldLabel>Password</FieldLabel>
+ *                     <Password value={value} onChange={setValue} aria-label="password" name="password" />
+ *                     <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
- *
- *     function ExampleWithField() {
- *         const [value, setValue] = useState('');
- *         return (
- *             <Field>
- *                 <FieldLabel>Password</FieldLabel>
- *                 <Password value={value} onChange={setValue} aria-label="password" name="password" />
- *                 <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
- *             </Field>
- *         );
- *     }
+ *     };
  *
  * @name Password
  * @phase UXReview

package/dist/components/Password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","sourceRoot":"","sources":["../../../src/components/Password/Password.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAK9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,wBAAwB,GAAG,GAAG,EAAE;QAClC,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,OACL,KAAK,sBACS,eAAe,uBACd,gBAAgB,gBACvB,SAAS,IAAI,SAAS,EAClC,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,YAAY,qBACV,UAAU,EAC1B,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,CAAC,CAAC,aAA6B,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;QACtE,CAAC,EACD,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,EACtB,QAAQ,EACJ,CAAC,QAAQ;YACT,CAAC,QAAQ,IAAI,CACT,KAAC,MAAM,2CAEH,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC1C,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAC,UAAU,GACpB,CACL,EAEL,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC/C,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"Password.js","sourceRoot":"","sources":["../../../src/components/Password/Password.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAK9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,wBAAwB,GAAG,GAAG,EAAE;QAClC,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,OACL,KAAK,sBACS,eAAe,uBACd,gBAAgB,gBACvB,SAAS,IAAI,SAAS,EAClC,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,YAAY,qBACV,UAAU,EAC1B,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,CAAC,CAAC,aAA6B,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;QACtE,CAAC,EACD,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,EACtB,QAAQ,EACJ,CAAC,QAAQ;YACT,CAAC,QAAQ,IAAI,CACT,KAAC,MAAM,2CAEH,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC1C,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAC,UAAU,GACpB,CACL,EAEL,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC/C,CACL,CAAC;AACN,CAAC"}

package/dist/components/Popover/Popover.d.ts

@@ -48,26 +48,17 @@ export type PopoverProps = CommonProps<'disabled'> & Pick<UseFloatingProps, 'ref
  *     import { Popover } from '@bspk/ui/Popover';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         const [showPopover, setShowPopover] = useState<boolean>(false);
- *
- *         const togglePopover = () => setShowPopover(!showPopover);
- *         const onPopoverCallToActionClick = () => alert('Action clicked');
- *
- *         return (
- *             <Popover
- *                 placement="bottom"
- *                 content="This is a popover content"
- *                 header="Popover Header"
- *                 callToAction={{
- *                     label: 'Action',
- *                     onClick: onPopoverCallToActionClick,
- *                 }}
- *             >
- *                 <Button label="Toggle popover" onClick={togglePopover} />
- *             </Popover>
- *         );
- *     }
+ *     <Popover
+ *         placement="bottom"
+ *         content="This is a popover content"
+ *         header="Popover Header"
+ *         callToAction={{
+ *             label: 'Action',
+ *             onClick: () => action('Action clicked'),
+ *         }}
+ *     >
+ *         {(triggerProps) => <Button {...triggerProps} label="Toggle popover" />}
+ *     </Popover>;
  *
  * @name Popover
  * @phase UXReview

package/dist/components/Popover/Popover.js

@@ -18,26 +18,17 @@ import { cssWithVars } from '../../utils/cwv';
  *     import { Popover } from '@bspk/ui/Popover';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         const [showPopover, setShowPopover] = useState<boolean>(false);
- *
- *         const togglePopover = () => setShowPopover(!showPopover);
- *         const onPopoverCallToActionClick = () => alert('Action clicked');
- *
- *         return (
- *             <Popover
- *                 placement="bottom"
- *                 content="This is a popover content"
- *                 header="Popover Header"
- *                 callToAction={{
- *                     label: 'Action',
- *                     onClick: onPopoverCallToActionClick,
- *                 }}
- *             >
- *                 <Button label="Toggle popover" onClick={togglePopover} />
- *             </Popover>
- *         );
- *     }
+ *     <Popover
+ *         placement="bottom"
+ *         content="This is a popover content"
+ *         header="Popover Header"
+ *         callToAction={{
+ *             label: 'Action',
+ *             onClick: () => action('Action clicked'),
+ *         }}
+ *     >
+ *         {(triggerProps) => <Button {...triggerProps} label="Toggle popover" />}
+ *     </Popover>;
  *
  * @name Popover
  * @phase UXReview

package/dist/components/Popover/Popover.js.map

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

package/dist/components/Popover/PopoverExample.js

@@ -4,7 +4,7 @@ import { Txt } from '../Txt';
 export const PopoverExample = ({ action }) => ({
     containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
-        return (_jsxs(_Fragment, { children: [_jsx(Txt, { style: { marginBottom: `var(--spacing-sizing-02)` }, children: "Click button for a Popover" }), _jsx(Component, { ...props, children: (triggerProps) => _jsx(Button, { label: `${props.placement}`, variant: "secondary", ...triggerProps }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Txt, { style: { marginBottom: `var(--spacing-sizing-02)` }, children: "Click for a Popover" }), _jsx(Component, { ...props, children: (triggerProps) => _jsx(Button, { label: `${props.placement}`, variant: "secondary", ...triggerProps }) })] }));
     },
     presets: [
         {

package/dist/components/Popover/PopoverExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverExample.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,CAAC,MAAM,cAAc,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,8BACI,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,0BAA0B,EAAE,2CAAkC,EAC1F,KAAC,SAAS,OAAK,KAAK,YACf,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,KAAK,YAAY,GAAI,GACxF,IACb,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,mBAAmB;gBAC3B,OAAO,EAAE,wBAAwB;gBACjC,YAAY,EAAE;oBACV,KAAK,EAAE,YAAY;oBACnB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB;SACJ;QACD;YACI,KAAK,EAAE,yBAAyB;YAChC,SAAS,EAAE;gBACP,MAAM,EAAE,yBAAyB;gBACjC,OAAO,EAAE,8BAA8B;gBACvC,YAAY,EAAE;oBACV,KAAK,EAAE,SAAS;oBAChB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC;iBAC3D;gBACD,qBAAqB,EAAE;oBACnB,KAAK,EAAE,WAAW;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,mCAAmC,CAAC;iBAC7D;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}
+{"version":3,"file":"PopoverExample.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,CAAC,MAAM,cAAc,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,8BACI,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,0BAA0B,EAAE,oCAA2B,EACnF,KAAC,SAAS,OAAK,KAAK,YACf,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,KAAK,YAAY,GAAI,GACxF,IACb,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,mBAAmB;gBAC3B,OAAO,EAAE,wBAAwB;gBACjC,YAAY,EAAE;oBACV,KAAK,EAAE,YAAY;oBACnB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB;SACJ;QACD;YACI,KAAK,EAAE,yBAAyB;YAChC,SAAS,EAAE;gBACP,MAAM,EAAE,yBAAyB;gBACjC,OAAO,EAAE,8BAA8B;gBACvC,YAAY,EAAE;oBACV,KAAK,EAAE,SAAS;oBAChB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC;iBAC3D;gBACD,qBAAqB,EAAE;oBACnB,KAAK,EAAE,WAAW;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,mCAAmC,CAAC;iBAC7D;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}

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

@@ -49,9 +49,7 @@ export type ProgressBarProps = {
  * @example
  *     import { ProgressBar } from '@bspk/ui/ProgressBar';
  *
- *     function Example() {
- *         return <ProgressBar label="Example label" completion={50} />;
- *     }
+ *     <ProgressBar label="Example label" completion={50} />;
  *
  * @name ProgressBar
  * @phase UXReview

package/dist/components/ProgressBar/ProgressBar.js

@@ -9,9 +9,7 @@ import { cssWithVars } from '../../utils/cwv';
  * @example
  *     import { ProgressBar } from '@bspk/ui/ProgressBar';
  *
- *     function Example() {
- *         return <ProgressBar label="Example label" completion={50} />;
- *     }
+ *     <ProgressBar label="Example label" completion={50} />;
  *
  * @name ProgressBar
  * @phase UXReview

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,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"}
+{"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;;;;;;;;;;;GAWG;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/ProgressCircle/ProgressCircle.d.ts

@@ -21,9 +21,7 @@ export type ProgressCircleProps = {
  * @example
  *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
  *
- *     function Example() {
- *         return <ProgressCircle label="Example label" />;
- *     }
+ *     <ProgressCircle label="Example label" />;
  *
  * @name ProgressCircle
  * @phase UXReview

package/dist/components/ProgressCircle/ProgressCircle.js

@@ -9,9 +9,7 @@ import { useId } from '../../hooks/useId';
  * @example
  *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
  *
- *     function Example() {
- *         return <ProgressCircle label="Example label" />;
- *     }
+ *     <ProgressCircle label="Example label" />;
  *
  * @name ProgressCircle
  * @phase UXReview

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

@@ -1 +1 @@
-{"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"}
+{"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;;;;;;;;;;GAUG;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/ProgressionStepper/ProgressionStepper.d.ts

@@ -58,9 +58,7 @@ export type ProgressionStepperProps = {
  * @example
  *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
  *
- *     function Example() {
- *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
- *     }
+ *     <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *
  * @name ProgressionStepper
  * @phase UXReview

package/dist/components/ProgressionStepper/ProgressionStepper.js

@@ -7,9 +7,7 @@ import { SvgCheck } from '@bspk/icons/Check';
  * @example
  *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
  *
- *     function Example() {
- *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
- *     }
+ *     <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *
  * @name ProgressionStepper
  * @phase UXReview

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,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAsD7C;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,GAAG,EAAE,EACV,aAAa,EAAE,iBAAiB,GAAG,CAAC,EACpC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnF,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE1E,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;IAEjD,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,CACH,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,WAAW,CAAC,IAAI,GAAQ,EAC1C,gDACK,WAAW,EAAE,OAAO;4BACjB,CAAC,mBAAmB,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpC,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,iBAAiB,UAAM,KAAK,CAAC,MAAM,IAC1C,CACN,CAAC,GACH,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,mBAAmB,IAAI,OAAO;wBAAE,MAAM,GAAG,UAAU,CAAC;yBACnD,IAAI,mBAAmB,GAAG,CAAC,KAAK,OAAO;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAEjE,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"}
+{"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;AAsD7C;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,GAAG,EAAE,EACV,aAAa,EAAE,iBAAiB,GAAG,CAAC,EACpC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnF,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE1E,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;IAEjD,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,CACH,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,WAAW,CAAC,IAAI,GAAQ,EAC1C,gDACK,WAAW,EAAE,OAAO;4BACjB,CAAC,mBAAmB,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpC,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,iBAAiB,UAAM,KAAK,CAAC,MAAM,IAC1C,CACN,CAAC,GACH,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,mBAAmB,IAAI,OAAO;wBAAE,MAAM,GAAG,UAAU,CAAC;yBACnD,IAAI,mBAAmB,GAAG,CAAC,KAAK,OAAO;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAEjE,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/RadioGroup/RadioGroup.d.ts

@@ -35,7 +35,7 @@ export type RadioGroupProps = Omit<FieldControlProps, 'readOnly'> & {
  *     import { useState } from 'react';
  *     import { RadioGroup } from '@bspk/ui/RadioGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedOption, setSelectedOption] = useState<string>('1');
  *
  *         return (
@@ -54,7 +54,7 @@ export type RadioGroupProps = Omit<FieldControlProps, 'readOnly'> & {
  *                 value={selectedOption}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name RadioGroup
  * @phase UXReview

package/dist/components/RadioGroup/RadioGroup.js

@@ -11,7 +11,7 @@ import { RadioOption } from '../RadioOption';
  *     import { useState } from 'react';
  *     import { RadioGroup } from '@bspk/ui/RadioGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedOption, setSelectedOption] = useState<string>('1');
  *
  *         return (
@@ -30,7 +30,7 @@ import { RadioOption } from '../RadioOption';
  *                 value={selectedOption}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name RadioGroup
  * @phase UXReview

package/dist/components/Rating/Rating.d.ts

@@ -9,7 +9,7 @@ export type RatingProps = {
      */
     value?: number;
     /**
-     * If included the component is in interactive mode and this callback is fired when a star is selected.
+     * If included the component is interactive and this callback is fired when the user selects a new rating value.
      *
      * @param value - The new value of the rating.
      */
@@ -28,9 +28,7 @@ export type RatingProps = {
  * @example
  *     import { Rating } from '@bspk/ui/Rating';
  *
- *     function Example() {
- *         return <Rating value={4.5} />;
- *     }
+ *     <Rating value={4.5} size="large" />;
  *
  * @name Rating
  * @phase UXReview

package/dist/components/Rating/Rating.js

@@ -14,19 +14,21 @@ const iconWidths = {
  * @example
  *     import { Rating } from '@bspk/ui/Rating';
  *
- *     function Example() {
- *         return <Rating value={4.5} />;
- *     }
+ *     <Rating value={4.5} size="large" />;
  *
  * @name Rating
  * @phase UXReview
  */
 export function Rating({ size = 'medium', value, onChange }) {
-    const As = onChange ? 'button' : 'div';
-    return (_jsx("div", { "aria-label": onChange ? 'Select a star rating' : value ? `${value} out of ${MAX_STARS} stars` : 'Rating', "data-bspk": "rating", "data-size": size, role: onChange ? 'radiogroup' : 'img', children: Array.from({ length: MAX_STARS }, (_, index) => {
+    if (!onChange)
+        return (_jsx("div", { "aria-label": value ? `${value} out of ${MAX_STARS} stars` : 'Rating', "data-bspk": "rating", "data-size": size, role: "img", children: Array.from({ length: MAX_STARS }, (_, index) => {
+                const fill = getFill(index + 1, value);
+                return (_jsxs("div", { "data-fill": fill, "data-star": true, role: "presentation", tabIndex: -1, children: [_jsx(SvgStarFill, { width: iconWidths[size] }), fill === 'half' && (_jsx("div", { "data-fill-half": true, children: _jsx("div", { "data-star": true, children: _jsx(SvgStarFill, { width: iconWidths[size] }) }) }))] }, index));
+            }) }));
+    return (_jsx("div", { "aria-label": value ? `${value} out of ${MAX_STARS} stars` : 'Select a star rating', "data-bspk": "rating", "data-size": size, role: "radiogroup", children: Array.from({ length: MAX_STARS }, (_, index) => {
             const fill = getFill(index + 1, value);
             const selected = value !== undefined && Math.floor(value) === index;
-            return (_jsxs(As, { "aria-checked": selected, "aria-hidden": !onChange, "aria-label": onChange ? `Rate ${index + 1}` : undefined, "data-fill": fill, "data-star": true, onClick: () => onChange?.(index + 1), role: onChange ? 'radio' : 'presentation', tabIndex: onChange ? (selected ? 0 : -1) : -1, type: "button", children: [_jsx(SvgStarFill, { width: iconWidths[size] }), fill === 'half' && (_jsx("div", { "data-fill-half": true, children: _jsx("div", { "data-star": true, children: _jsx(SvgStarFill, { width: iconWidths[size] }) }) }))] }, index));
+            return (_jsxs("button", { "aria-checked": selected, "aria-label": `Rate ${index + 1}`, "data-fill": fill, "data-star": true, onClick: () => onChange?.(index + 1), role: "radio", tabIndex: selected ? 0 : -1, type: "button", children: [_jsx(SvgStarFill, { width: iconWidths[size] }), fill === 'half' && (_jsx("div", { "data-fill-half": true, children: _jsx("div", { "data-star": true, children: _jsx(SvgStarFill, { width: iconWidths[size] }) }) }))] }, index));
         }) }));
 }
 function getFill(num, value) {