@bspk/ui 1.1.34 → 1.2.0

package/dist/styles/denali-boss.css.js

@@ -3,7 +3,7 @@
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`/* Generated from figma export: 2025-07-08T20:32:21.402Z */
 
-@import url('https://fonts.googleapis.com/css2?family=Work%20Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
 body {
     font-family: var(--typeface);
 }
@@ -607,15 +607,15 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - Denali & Boss */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - Denali & Boss */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - Denali & Boss */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - Denali & Boss */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - Denali & Boss */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -869,17 +869,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - Denali & Boss */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - Denali & Boss */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - Denali & Boss */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - Denali & Boss */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - Denali & Boss */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - Denali & Boss */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -893,7 +893,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - Denali & Boss */
     --surface-neutral-transparent: #ffffff00;
     /* Typeface - Brand */
     --typeface: 'Inter', 'Work Sans', sans-serif;
@@ -1882,4 +1882,3 @@ body {
 }
 `));
 document.head.appendChild(style);
-

package/dist/styles/era.css

@@ -604,17 +604,17 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - 3.0 */
+    /* Foreground/Brand/on-brand-primary - Theme - ERA */
     --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - ERA */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - ERA */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - ERA */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - ERA */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - ERA */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -868,17 +868,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - ERA */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - ERA */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - ERA */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - ERA */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - ERA */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - ERA */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -892,7 +892,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - ERA */
     --surface-neutral-transparent: #ffffff00;
     /* Colors/Brands/ERA/Tertiary/00-base - Global (primitives) */
     --tertiary-00-base: #990033;

package/dist/styles/era.css.js

@@ -607,17 +607,17 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - 3.0 */
+    /* Foreground/Brand/on-brand-primary - Theme - ERA */
     --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - ERA */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - ERA */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - ERA */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - ERA */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - ERA */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -871,17 +871,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - ERA */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - ERA */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - ERA */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - ERA */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - ERA */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - ERA */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -895,7 +895,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - ERA */
     --surface-neutral-transparent: #ffffff00;
     /* Colors/Brands/ERA/Tertiary/00-base - Global (primitives) */
     --tertiary-00-base: #990033;
@@ -1892,4 +1892,3 @@ body {
 }
 `));
 document.head.appendChild(style);
-

package/dist/styles/sothebys.css

@@ -1,6 +1,6 @@
 /* Generated from figma export: 2025-07-08T20:32:21.402Z */
 
-@import url('https://fonts.googleapis.com/css2?family=Work%20Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap');
 body {
     font-family: var(--typeface);
 }
@@ -604,17 +604,17 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - 3.0 */
+    /* Foreground/Brand/on-brand-primary - Theme - Sotheby's */
     --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - Sotheby's */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - Sotheby's */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - Sotheby's */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - Sotheby's */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - Sotheby's */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -868,17 +868,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - Sotheby's */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - Sotheby's */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - Sotheby's */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - Sotheby's */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - Sotheby's */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - Sotheby's */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -892,7 +892,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - Sotheby's */
     --surface-neutral-transparent: #ffffff00;
     /* Typeface - Brand */
     --typeface: 'Geist', 'Work Sans', sans-serif;

package/dist/styles/sothebys.css.js

@@ -3,7 +3,7 @@
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`/* Generated from figma export: 2025-07-08T20:32:21.402Z */
 
-@import url('https://fonts.googleapis.com/css2?family=Work%20Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap');
 body {
     font-family: var(--typeface);
 }
@@ -607,17 +607,17 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - 3.0 */
+    /* Foreground/Brand/on-brand-primary - Theme - Sotheby's */
     --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - Sotheby's */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - Sotheby's */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - Sotheby's */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - Sotheby's */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - Sotheby's */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -871,17 +871,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - Sotheby's */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - Sotheby's */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - Sotheby's */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - Sotheby's */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - Sotheby's */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - Sotheby's */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -895,7 +895,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - Sotheby's */
     --surface-neutral-transparent: #ffffff00;
     /* Typeface - Brand */
     --typeface: 'Geist', 'Work Sans', sans-serif;
@@ -1880,4 +1880,3 @@ body {
 }
 `));
 document.head.appendChild(style);
-

package/dist/{index.d.ts → types/common.d.ts}

@@ -6,16 +6,11 @@
  * @bspk/ui/Txt".
  */
 import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef } from 'react';
-export declare const BRANDS: {
-    /** The title of the brand. */
-    title: string;
-    /** The slug of the brand, used in URLs and identifiers. */
-    slug: Brand;
-}[];
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
 export type SetRef<T> = (instance: T | null) => void;
 export type ElementProps<P extends Record<string, unknown>, E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements, O extends string = ''> = Omit<ComponentPropsWithoutRef<E>, O | keyof P> & P;
 export type ElementConstructorProps<E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements, O extends string = ''> = Omit<ComponentPropsWithoutRef<E>, O>;
+export type DataProps = Record<`data-${string}`, string>;
 export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
 export type CallToActionButton = {
     /**
@@ -33,12 +28,7 @@ export type CallToActionButton = {
     /** The size of the call to action button. */
     size?: ButtonSize;
 };
-/**
- * The props that are common to input elements.
- *
- * If an element is invalid it must have an errorMessage.
- */
-export type InvalidPropsLibrary = {
+export type CommonPropsLibrary = {
     /**
      * Marks the element as invalid and displays error state theme.
      *
@@ -47,15 +37,6 @@ export type InvalidPropsLibrary = {
      * @default false
      */
     invalid?: boolean;
-    /**
-     * Marks the element as invalid and displays error message.
-     *
-     * When an element is invalid it must display an error message explaining why it is invalid.
-     */
-    errorMessage?: string;
-};
-export type InvalidProps<K extends keyof InvalidPropsLibrary> = Pick<InvalidPropsLibrary, K>;
-export type CommonPropsLibrary = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
     /**
@@ -116,9 +97,18 @@ export type CommonPropsLibrary = {
      * This is a utility attribute used to identify the owning component of another component.
      *
      * This is used to identify the component in the UI library and is not intended for public use.
+     *
+     * @utility
      */
-    'data-bspk-owner'?: string;
+    owner?: string;
 };
 export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
+export type RequiredCommonProps<K extends keyof CommonPropsLibrary> = Required<Pick<CommonPropsLibrary, K>>;
+export type FormFieldControlProps = {
+    /** The id of the control description. */
+    'aria-describedby'?: string;
+    /** The id of the error message */
+    'aria-errormessage'?: string;
+};
 export type Brand = 'anywhere' | 'better-homes-gardens' | 'cartus' | 'century-21' | 'coldwell-banker' | 'corcoran' | 'denali-boss' | 'era' | 'sothebys';
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/types/common.js

@@ -0,0 +1,10 @@
+/**
+ * There are no barrel files for this repository.
+ *
+ * Components should be imported directly like "import { Txt } from
+ *
+ * @bspk/ui/Txt".
+ */
+export {};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+//# sourceMappingURL=common.js.map

package/dist/types/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAyIH,sDAAsD"}

package/{meta-types.ts → dist/types/meta.d.ts}

@@ -2,21 +2,24 @@
  * This file is used to build the meta types for the project. It's used in the build-meta.ts file and also copied in to
  * the meta output file.
  */
-
+export declare const COMPONENT_PHASE_ORDER: ComponentPhase[];
+export declare const COMPONENT_PHASES: Record<ComponentPhase, {
+    title: string;
+    id: ComponentPhase;
+    description: string;
+}>;
 export type BaseMeta = {
     name: string;
     description?: string;
     file: string;
     example?: string;
 };
-
 export type TypeMeta = BaseMeta & {
     id: string;
     references?: string[];
     properties?: TypeProperty[];
     components?: string[];
 };
-
 export type TypeProperty = {
     name: string;
     description?: string;
@@ -31,7 +34,6 @@ export type TypeProperty = {
     maximum?: number;
     example?: string;
 };
-
 export type ComponentMeta = BaseMeta & {
     slug: string;
     dependencies: string[];
@@ -43,18 +45,9 @@ export type ComponentMeta = BaseMeta & {
     };
     phase: ComponentPhase;
 };
-
 export type UtilityMeta = BaseMeta & {
     param?: string;
     returns?: string;
 };
-
-export type ComponentPhase =
-    | 'AccessibilityReview'
-    | 'Backlog'
-    | 'DesignReview'
-    | 'ProductionReady'
-    | 'Utility'
-    | 'WorkInProgress';
-
+export type ComponentPhase = 'Backlog' | 'Dev' | 'QA' | 'Stable' | 'Utility' | 'UXReview';
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/types/meta.js

@@ -0,0 +1,47 @@
+/**
+ * This file is used to build the meta types for the project. It's used in the build-meta.ts file and also copied in to
+ * the meta output file.
+ */
+export const COMPONENT_PHASE_ORDER = [
+    'Utility', // Utility components are not tracked in the progress
+    //
+    'Backlog', // components that are not actively being worked on
+    'Dev', // components that are actively being developed
+    'QA', // components that are undergoing QA
+    'UXReview', // components that are in UX Review
+    'Stable', // production ready
+];
+export const COMPONENT_PHASES = {
+    Backlog: {
+        title: 'Backlog',
+        id: 'Backlog',
+        description: 'The component has been initiated but is currently on hold. It awaits further development and is not actively being worked on at this time.',
+    },
+    Dev: {
+        title: 'Development',
+        id: 'Dev',
+        description: 'The component is actively under development. This phase includes the creation of visual elements and integration tests to ensure comprehensive functionality.',
+    },
+    QA: {
+        title: 'Quality Assurance',
+        id: 'QA',
+        description: 'The component is being carefully evaluated by our Bespoke Engineering team. They are ensuring that it aligns with our high standards of functionality and performance.',
+    },
+    UXReview: {
+        title: 'UX Review',
+        id: 'UXReview',
+        description: 'The component is being carefully evaluated by our Bespoke UX team. They are ensuring that it aligns with our high standards of aesthetics and user experience and is accessible to all users.',
+    },
+    Stable: {
+        title: 'Stable',
+        id: 'Stable',
+        description: 'The component has successfully passed all reviews and is ready for use. It is now officially released and ready for use in a production environment.',
+    },
+    Utility: {
+        title: 'Utility',
+        id: 'Utility',
+        description: "The component progress isn't tracked as it's a utility component.",
+    },
+};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+//# sourceMappingURL=meta.js.map

package/dist/types/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../src/types/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAqB;IACnD,SAAS,EAAE,qDAAqD;IAChE,EAAE;IACF,SAAS,EAAE,mDAAmD;IAC9D,KAAK,EAAE,+CAA+C;IACtD,IAAI,EAAE,oCAAoC;IAC1C,UAAU,EAAE,mCAAmC;IAC/C,QAAQ,EAAE,mBAAmB;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAOzB;IACA,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EACP,4IAA4I;KACnJ;IACD,GAAG,EAAE;QACD,KAAK,EAAE,aAAa;QACpB,EAAE,EAAE,KAAK;QACT,WAAW,EACP,+JAA+J;KACtK;IACD,EAAE,EAAE;QACA,KAAK,EAAE,mBAAmB;QAC1B,EAAE,EAAE,IAAI;QACR,WAAW,EACP,wKAAwK;KAC/K;IACD,QAAQ,EAAE;QACN,KAAK,EAAE,WAAW;QAClB,EAAE,EAAE,UAAU;QACd,WAAW,EACP,+LAA+L;KACtM;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,EAAE,EAAE,QAAQ;QACZ,WAAW,EACP,sJAAsJ;KAC7J;IACD,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EAAE,mEAAmE;KACnF;CACJ,CAAC;AAkDF,sDAAsD"}

package/dist/utils/bound.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A utility function to bound a number within a specified range. Allows for rollover behavior.
+ *
+ * @param params
+ * @param params.num The number to bound, can be a number, string, or undefined
+ * @param params.max The maximum value the number can be
+ * @param params.min The minimum value the number can be
+ * @param params.rollover If true, the number will wrap around when it exceeds the bounds
+ * @param params.defaultValue The default value to return if the input is invalid or undefined
+ * @returns The bounded number
+ */
+export declare function bound({ num, max, min, rollover, defaultValue, }: {
+    num: number | string | undefined;
+    max: number;
+    min: number;
+    rollover?: boolean;
+    defaultValue?: number;
+}): number;

package/dist/utils/bound.js

@@ -0,0 +1,22 @@
+/**
+ * A utility function to bound a number within a specified range. Allows for rollover behavior.
+ *
+ * @param params
+ * @param params.num The number to bound, can be a number, string, or undefined
+ * @param params.max The maximum value the number can be
+ * @param params.min The minimum value the number can be
+ * @param params.rollover If true, the number will wrap around when it exceeds the bounds
+ * @param params.defaultValue The default value to return if the input is invalid or undefined
+ * @returns The bounded number
+ */
+export function bound({ num, max, min, rollover = false, defaultValue = min, }) {
+    const parsedNum = typeof num === 'number' ? num : parseInt(num, 10);
+    if (isNaN(parsedNum))
+        return defaultValue ?? min;
+    if (parsedNum > max)
+        return rollover ? min : max;
+    if (parsedNum < min)
+        return rollover ? max : min;
+    return parsedNum;
+}
+//# sourceMappingURL=bound.js.map

package/dist/utils/bound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bound.js","sourceRoot":"","sources":["../../src/utils/bound.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,KAAK,CAAC,EAClB,GAAG,EACH,GAAG,EACH,GAAG,EACH,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,GAAG,GAOrB;IACG,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAa,EAAE,EAAE,CAAC,CAAC;IAC9E,IAAI,KAAK,CAAC,SAAS,CAAC;QAAE,OAAO,YAAY,IAAI,GAAG,CAAC;IACjD,IAAI,SAAS,GAAG,GAAG;QAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACjD,IAAI,SAAS,GAAG,GAAG;QAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACjD,OAAO,SAAS,CAAC;AACrB,CAAC"}

package/dist/utils/createExampleChildElement.d.ts

@@ -0,0 +1,17 @@
+import { DemoAction, DemoSetState } from './demo';
+type ExampleChildElementProps = {
+    exampleState: Record<string, any>;
+    name: string;
+    setState: DemoSetState;
+    action: DemoAction;
+    id?: string;
+};
+/**
+ * Returns example leading and trailing components for use in component examples. Allows which type of element is
+ * rendered to be determined by the example state.
+ */
+export declare function createExampleChildElement({ exampleState, name, setState, action, id }: ExampleChildElementProps): {
+    element: JSX.Element | null;
+    componentName?: string;
+};
+export {};

package/dist/utils/createExampleChildElement.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */ import { SvgContentCopy } from '@bspk/icons/ContentCopy';
+import { SvgDiamond } from '@bspk/icons/Diamond';
+import { Avatar } from '../components/Avatar';
+import { Checkbox } from '../components/Checkbox';
+import { Img } from '../components/Img';
+import { ListItem } from '../components/ListItem';
+import { Radio } from '../components/Radio';
+import { Switch } from '../components/Switch';
+import { Tag } from '../components/Tag';
+import { Txt } from '../components/Txt';
+/**
+ * Returns example leading and trailing components for use in component examples. Allows which type of element is
+ * rendered to be determined by the example state.
+ */
+export function createExampleChildElement({ exampleState, name, setState, action, id }) {
+    const componentName = exampleState[name];
+    if (componentName === 'Checkbox' || componentName === 'Radio' || componentName === 'Switch') {
+        let As = Checkbox;
+        if (componentName === 'Radio')
+            As = Radio;
+        else if (componentName === 'Switch')
+            As = Switch;
+        const toggleName = `data-${name}-toggle-${id}`;
+        return {
+            element: (_jsx(As, { "aria-label": `${componentName} demo`, checked: exampleState[toggleName], disabled: exampleState.disabled, name: `${name}-toggle`, onChange: (checked) => {
+                    setState({ [toggleName]: checked });
+                }, onClick: () => action(`${name} ${componentName} clicked`), readOnly: exampleState.readOnly, value: `${name}-${componentName}` })),
+            componentName,
+        };
+    }
+    if (componentName === 'ListItemButton')
+        return {
+            element: (_jsx(ListItem.Button, { icon: _jsx(SvgContentCopy, {}), label: "LI Button", onClick: () => action('ListItem button clicked') })),
+            componentName,
+        };
+    if (componentName === 'Img')
+        return { element: _jsx(Img, { alt: "placeholder", src: "/placeholder.svg" }) };
+    if (componentName === 'Avatar')
+        return { element: _jsx(Avatar, { name: "List Item", showTooltip: false }) };
+    if (componentName === 'Tag') {
+        return { element: _jsx(Tag, { label: "Tag" }) };
+    }
+    if (componentName === 'Txt')
+        return { element: _jsx(Txt, { children: "Text" }) };
+    if (componentName === 'Icon')
+        return { element: _jsx(SvgDiamond, {}) };
+    return { element: null };
+}
+//# sourceMappingURL=createExampleChildElement.js.map

package/dist/utils/createExampleChildElement.js.map

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