@bspk/ui 1.1.34 → 1.2.0

package/dist/components/Select/select.css

@@ -15,6 +15,7 @@
   max-height: var(--select-height);
   display: flex;
   flex-direction: row;
+  align-items: center;
   gap: var(--spacing-sizing-02);
   flex-grow: 0;
   flex-shrink: 0;
@@ -25,20 +26,23 @@
   background: var(--select-background);
   padding: 0 var(--select-padding);
 }
-[data-bspk=select] [data-placeholder] {
+[data-bspk=select] * {
+  pointer-events: none;
+}
+[data-bspk=select] [data-bspk=list-item][data-bspk-owner=select] {
   display: block;
   max-width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
   padding: 0;
-}
-[data-bspk=select] [data-placeholder] [data-inner] {
   min-height: auto;
-  padding: 0;
 }
-[data-bspk=select] [data-placeholder] [data-item-label] [data-text] {
+[data-bspk=select] [data-bspk=list-item][data-bspk-owner=select] [data-item-label] [data-text] {
   color: var(--select-text-color);
 }
+[data-bspk=select] [data-bspk=list-item][data-bspk-owner=select][data-placeholder] [data-item-label] [data-text] {
+  color: var(--foreground-neutral-on-surface-variant-03);
+}
 [data-bspk=select] [data-icon] {
   display: flex;
   flex-direction: column;
@@ -92,8 +96,5 @@
 [data-bspk=select][data-invalid] {
   --select-border-color: var(--status-error);
 }
-[data-bspk=select][data-empty] {
-  --select-text-color: var(--foreground-neutral-on-surface-variant-03);
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Select/select.css.js

@@ -18,6 +18,7 @@ style.appendChild(document.createTextNode(`[data-bspk=select] {
   max-height: var(--select-height);
   display: flex;
   flex-direction: row;
+  align-items: center;
   gap: var(--spacing-sizing-02);
   flex-grow: 0;
   flex-shrink: 0;
@@ -28,20 +29,23 @@ style.appendChild(document.createTextNode(`[data-bspk=select] {
   background: var(--select-background);
   padding: 0 var(--select-padding);
 }
-[data-bspk=select] [data-placeholder] {
+[data-bspk=select] * {
+  pointer-events: none;
+}
+[data-bspk=select] [data-bspk=list-item][data-bspk-owner=select] {
   display: block;
   max-width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
   padding: 0;
-}
-[data-bspk=select] [data-placeholder] [data-inner] {
   min-height: auto;
-  padding: 0;
 }
-[data-bspk=select] [data-placeholder] [data-item-label] [data-text] {
+[data-bspk=select] [data-bspk=list-item][data-bspk-owner=select] [data-item-label] [data-text] {
   color: var(--select-text-color);
 }
+[data-bspk=select] [data-bspk=list-item][data-bspk-owner=select][data-placeholder] [data-item-label] [data-text] {
+  color: var(--foreground-neutral-on-surface-variant-03);
+}
 [data-bspk=select] [data-icon] {
   display: flex;
   flex-direction: column;
@@ -95,11 +99,7 @@ style.appendChild(document.createTextNode(`[data-bspk=select] {
 [data-bspk=select][data-invalid] {
   --select-border-color: var(--status-error);
 }
-[data-bspk=select][data-empty] {
-  --select-text-color: var(--foreground-neutral-on-surface-variant-03);
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/SelectField/SelectField.d.ts

@@ -1,6 +1,6 @@
-import { FormFieldProps } from '../FormField';
-import { SelectProps } from '../Select';
-export type SelectFieldProps = Pick<SelectProps, 'disabled' | 'itemDisplayCount' | 'label' | 'name' | 'onChange' | 'options' | 'placeholder' | 'readOnly' | 'size' | 'value'> & Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'labelTrailing' | 'required'>;
+import { FormFieldWrapProps } from '-/components/FormField';
+import { SelectProps } from '-/components/Select';
+export type SelectFieldProps = FormFieldWrapProps<SelectProps>;
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
  *
@@ -29,11 +29,7 @@ export type SelectFieldProps = Pick<SelectProps, 'disabled' | 'itemDisplayCount'
  *     }
  *
  * @name SelectField
- * @phase DesignReview
+ * @phase Dev
  */
-declare function SelectField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...selectProps }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectField {
-    var bspkName: string;
-}
-export { SelectField };
+export declare function SelectField({ label, helperText, controlId, labelTrailing, required, invalid, errorMessage, ...inputProps }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SelectField/SelectField.js

@@ -29,12 +29,11 @@ import { Select } from '../Select';
  *     }
  *
  * @name SelectField
- * @phase DesignReview
+ * @phase Dev
  */
-function SelectField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...selectProps }) {
-    const errorMessage = (!selectProps.readOnly && !selectProps.disabled && errorMessageProp) || undefined;
-    return (_jsx(FormField, { controlId: id, "data-bspk": "select-field", errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => _jsx(Select, { ...selectProps, ...fieldProps, id: id, invalid: !!errorMessage, label: label }) }));
+export function SelectField({ label, helperText, controlId, labelTrailing, required, invalid, errorMessage, ...inputProps }) {
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "select-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(Select
+        //
+        , { ...inputProps, ...fieldProps, id: controlId, invalid: invalid, label: label })) }));
 }
-SelectField.bspkName = 'SelectField';
-export { SelectField };
 //# sourceMappingURL=SelectField.js.map

package/dist/components/SelectField/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAiB1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAS,WAAW,CAAC,EACjB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,aAAa,EACb,QAAQ,EACR,GAAG,WAAW,EACC;IACf,MAAM,YAAY,GAAG,CAAC,CAAC,WAAW,CAAC,QAAQ,IAAI,CAAC,WAAW,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAEvG,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,EAAE,eACH,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,KAAC,MAAM,OAAK,WAAW,KAAM,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,GAAI,GACnG,CACf,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,KAAK,EACL,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,GAAG,UAAU,EACE;IACf,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,MAAM;QACH,EAAE;eACE,UAAU,KACV,UAAU,EACd,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACd,CACL,GACO,CACf,CAAC;AACN,CAAC"}

package/dist/components/Skeleton/Circular.d.ts

@@ -0,0 +1,2 @@
+import { SkeletonProps } from './Skeleton';
+export declare function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Circular.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from './Skeleton';
+export function SkeletonCircular(props) {
+    return _jsx(Skeleton, { ...props, variant: "circular" });
+}
+//# sourceMappingURL=Circular.js.map

package/dist/components/Skeleton/Circular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Circular.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Circular.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,gBAAgB,CAAC,KAA8C;IAC3E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,UAAU,GAAG,CAAC;AACtD,CAAC"}

package/dist/components/Skeleton/Photo.d.ts

@@ -0,0 +1,2 @@
+import { SkeletonProps } from './Skeleton';
+export declare function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Photo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from './Skeleton';
+export function SkeletonPhoto(props) {
+    return _jsx(Skeleton, { ...props, variant: "photo" });
+}
+//# sourceMappingURL=Photo.js.map

package/dist/components/Skeleton/Photo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Photo.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Photo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,aAAa,CAAC,KAA8C;IACxE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AACnD,CAAC"}

package/dist/components/Skeleton/Profile.d.ts

@@ -0,0 +1,2 @@
+import { SkeletonProps } from './Skeleton';
+export declare function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Profile.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from './Skeleton';
+export function SkeletonProfile(props) {
+    return _jsx(Skeleton, { ...props, variant: "profile" });
+}
+//# sourceMappingURL=Profile.js.map

package/dist/components/Skeleton/Profile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Profile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,eAAe,CAAC,KAA8C;IAC1E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;AACrD,CAAC"}

package/dist/components/Skeleton/Rectangular.d.ts

@@ -0,0 +1,2 @@
+import { SkeletonProps } from './Skeleton';
+export declare function SkeletonRectangular(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Rectangular.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from './Skeleton';
+export function SkeletonRectangular(props) {
+    return _jsx(Skeleton, { ...props, variant: "rectangular" });
+}
+//# sourceMappingURL=Rectangular.js.map

package/dist/components/Skeleton/Rectangular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rectangular.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Rectangular.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,mBAAmB,CAAC,KAA8C;IAC9E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,aAAa,GAAG,CAAC;AACzD,CAAC"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
+export type SkeletonVariant = 'circular' | 'photo' | 'profile' | 'rectangular' | 'thumbnail';
 export type SkeletonProps = {
     /**
      * The variant of the skeleton that best hints the content being loaded.
      *
      * @default rectangular
      */
-    variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'thumbnail';
+    variant?: SkeletonVariant;
     /**
      * The width of the skeleton. This is ignored when variant is 'profile' or 'thumbnail'.
      *
@@ -62,16 +63,7 @@ export type SkeletonProps = {
  * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
  *
  * @name Skeleton
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Skeleton({ width, height, variant, children }: SkeletonProps): string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
-declare namespace Skeleton {
-    var bspkName: string;
-}
-declare function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;
-declare function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;
-declare function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;
-declare function SkeletonRectangular(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;
-declare function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;
-export { Skeleton, SkeletonCircular, SkeletonPhoto, SkeletonProfile, SkeletonRectangular, SkeletonThumbnail };
+export declare function Skeleton({ width, height, variant, children }: SkeletonProps): string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Skeleton/Skeleton.js

@@ -33,29 +33,12 @@ import { cssWithVars } from '../../utils/cwv';
  * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
  *
  * @name Skeleton
- * @phase DesignReview
+ * @phase UXReview
  */
-function Skeleton({ width = 100, height = 100, variant = 'rectangular', children = null }) {
+export function Skeleton({ width = 100, height = 100, variant = 'rectangular', children = null }) {
     return children !== null && children !== undefined && children !== false ? (children) : (_jsx("div", { "aria-busy": "true", "aria-label": "Loading", "data-bspk": "skeleton", "data-variant": variant, role: "status", style: cssWithVars({
             '--height': typeof height === 'number' ? `${height}px` : height,
             '--width': typeof width === 'number' ? `${width}px` : width,
         }) }));
 }
-Skeleton.bspkName = 'Skeleton';
-function SkeletonCircular(props) {
-    return _jsx(Skeleton, { ...props, variant: "circular" });
-}
-function SkeletonPhoto(props) {
-    return _jsx(Skeleton, { ...props, variant: "photo" });
-}
-function SkeletonProfile(props) {
-    return _jsx(Skeleton, { ...props, variant: "profile" });
-}
-function SkeletonRectangular(props) {
-    return _jsx(Skeleton, { ...props, variant: "rectangular" });
-}
-function SkeletonThumbnail(props) {
-    return _jsx(Skeleton, { ...props, variant: "thumbnail" });
-}
-export { Skeleton, SkeletonCircular, SkeletonPhoto, SkeletonProfile, SkeletonRectangular, SkeletonThumbnail };
 //# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAiC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAS,QAAQ,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,aAAa,EAAE,QAAQ,GAAG,IAAI,EAAiB;IACpG,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,UAAU,kBACN,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC9D,CAAC,GACJ,CACL,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,SAAS,gBAAgB,CAAC,KAA8C;IACpE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,UAAU,GAAG,CAAC;AACtD,CAAC;AAED,SAAS,aAAa,CAAC,KAA8C;IACjE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AACnD,CAAC;AAED,SAAS,eAAe,CAAC,KAA8C;IACnE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;AACrD,CAAC;AAED,SAAS,mBAAmB,CAAC,KAA8C;IACvE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,aAAa,GAAG,CAAC;AACzD,CAAC;AAED,SAAS,iBAAiB,CAAC,KAA8C;IACrE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,WAAW,GAAG,CAAC;AACvD,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,aAAa,EAAE,eAAe,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAmC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,aAAa,EAAE,QAAQ,GAAG,IAAI,EAAiB;IAC3G,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,UAAU,kBACN,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC9D,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}

package/dist/components/Skeleton/SkeletonExample.d.ts

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

package/dist/components/Skeleton/SkeletonExample.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @cspell/spellchecker */ import { useState, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Avatar } from '../Avatar';
 import { ExamplePlaceholder } from '../ExamplePlaceholder';
 import { useTimeout } from '../../hooks/useTimeout';
 export const SkeletonExample = {
     render: ({ props, preset, Component }) => {
         if (preset?.label === 'Loading Transition')
-            return _jsx(SkeletonTransition, { ...props, Component: Component });
+            return _jsx(SkeletonTransition, { Component: Component, props: props });
         return _jsx(Component, { ...props });
     },
     presets: [
@@ -19,13 +19,16 @@ export const SkeletonExample = {
         },
     ],
 };
-function SkeletonTransition({ Component, ...props }) {
-    const loadingTimeout = useTimeout();
+function SkeletonTransition({ Component, props, }) {
     const [loaded, setLoaded] = useState(false);
-    useEffect(() => {
-        setLoaded(false);
-        loadingTimeout.set(() => setLoaded(true), 3000);
-    }, [loadingTimeout, props.variant]);
-    return (_jsx(Component, { ...props, children: loaded && (_jsxs(_Fragment, { children: [props.variant === 'rectangular' && (_jsx(ExamplePlaceholder, { height: props.height, width: props.width })), props.variant === 'circular' && (_jsx(ExamplePlaceholder, { height: props.height, style: { borderRadius: '100%' }, width: props.width })), props.variant === 'photo' && (_jsx(ExamplePlaceholder, { height: props.height, width: props.width, children: "Loaded" })), props.variant === 'profile' && _jsx(Avatar, { color: "red", name: "Bob Boberson" }), props.variant === 'thumbnail' && _jsx(ExamplePlaceholder, { height: props.height, width: props.width })] })) }));
+    useTimeout(() => setLoaded(true), 3000);
+    return (_jsx(Component, { ...props, children: loaded && _jsx(_Fragment, { children: PROP_VARIANT_CHILDREN[props.variant] }) }));
 }
+const PROP_VARIANT_CHILDREN = {
+    rectangular: _jsx(ExamplePlaceholder, { height: "100px", width: "100px" }),
+    circular: _jsx(ExamplePlaceholder, { height: "100px", style: { borderRadius: '100%' }, width: "100px" }),
+    photo: (_jsx(ExamplePlaceholder, { height: "100px", width: "100px", children: "Loaded" })),
+    profile: _jsx(Avatar, { color: "red", name: "Bob Robertson" }),
+    thumbnail: _jsx(ExamplePlaceholder, { height: "100px", width: "100px" }),
+};
 //# sourceMappingURL=SkeletonExample.js.map

package/dist/components/Skeleton/SkeletonExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonExample.js","sourceRoot":"","sources":["../../../src/components/Skeleton/SkeletonExample.tsx"],"names":[],"mappings":";AAAA,yCAAyC,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,oBAAoB;YAAE,OAAO,KAAC,kBAAkB,OAAK,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;QAC3G,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACP,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;aAClB;SACJ;KACJ;CACJ,CAAC;AAEF,SAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACwD;IAChE,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC;IACpC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,SAAS,CAAC,GAAG,EAAE;QACX,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpC,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YACf,MAAM,IAAI,CACP,8BACK,KAAK,CAAC,OAAO,KAAK,aAAa,IAAI,CAChC,KAAC,kBAAkB,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CACnE,EACA,KAAK,CAAC,OAAO,KAAK,UAAU,IAAI,CAC7B,KAAC,kBAAkB,IACf,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAC/B,KAAK,EAAE,KAAK,CAAC,KAAK,GACpB,CACL,EACA,KAAK,CAAC,OAAO,KAAK,OAAO,IAAI,CAC1B,KAAC,kBAAkB,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,uBAEvC,CACxB,EACA,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,cAAc,GAAG,EACzE,KAAK,CAAC,OAAO,KAAK,WAAW,IAAI,KAAC,kBAAkB,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,IACnG,CACN,GACO,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"SkeletonExample.js","sourceRoot":"","sources":["../../../src/components/Skeleton/SkeletonExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,oBAAoB;YAAE,OAAO,KAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAE9G,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACP,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;aAClB;SACJ;KACJ;CACJ,CAAC;AAEF,SAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,KAAK,GACiE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAExC,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YAAG,MAAM,IAAI,4BAAG,qBAAqB,CAAC,KAAM,CAAC,OAA0B,CAAC,GAAI,GAAa,CAChH,CAAC;AACN,CAAC;AAED,MAAM,qBAAqB,GAAuD;IAC9E,WAAW,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;IAChE,QAAQ,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG;IAC9F,KAAK,EAAE,CACH,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,uBAE3B,CACxB;IACD,OAAO,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,eAAe,GAAG;IACpD,SAAS,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;CACjE,CAAC"}

package/dist/components/Skeleton/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+import { SkeletonProps } from './Skeleton';
+export declare function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Thumbnail.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from './Skeleton';
+export function SkeletonThumbnail(props) {
+    return _jsx(Skeleton, { ...props, variant: "thumbnail" });
+}
+//# sourceMappingURL=Thumbnail.js.map

package/dist/components/Skeleton/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Thumbnail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,iBAAiB,CAAC,KAA8C;IAC5E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,WAAW,GAAG,CAAC;AACvD,CAAC"}

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

@@ -1 +1,6 @@
 export * from './Skeleton';
+export * from './Circular';
+export * from './Photo';
+export * from './Profile';
+export * from './Rectangular';
+export * from './Thumbnail';

package/dist/components/Skeleton/index.js

@@ -1,2 +1,7 @@
 export * from './Skeleton';
+export * from './Circular';
+export * from './Photo';
+export * from './Profile';
+export * from './Rectangular';
+export * from './Thumbnail';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/dist/components/SkeletonText/SkeletonText.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TxtVariant } from '../../utils/txtVariants';
+import { TxtVariant } from '-/utils/txtVariants';
 export type SkeletonTextProps = {
     /**
      * The variant of the text being loaded.
@@ -42,11 +42,7 @@ export type SkeletonTextProps = {
  * @exampleDescription This example shows a skeleton loading state for some text but can be used for any element.
  *
  * @name SkeletonText
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function SkeletonText({ lines, variant, children }: SkeletonTextProps): string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
-declare namespace SkeletonText {
-    var bspkName: string;
-}
-export { SkeletonText };
+export declare function SkeletonText({ lines, variant, children }: SkeletonTextProps): string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SkeletonText/SkeletonText.js

@@ -19,14 +19,12 @@ import { cssWithVars } from '../../utils/cwv';
  * @exampleDescription This example shows a skeleton loading state for some text but can be used for any element.
  *
  * @name SkeletonText
- * @phase DesignReview
+ * @phase UXReview
  */
-function SkeletonText({ lines = 3, variant, children = null }) {
+export function SkeletonText({ lines = 3, variant, children = null }) {
     return children !== null && children !== undefined && children !== false ? (children) : (_jsx("div", { "aria-busy": "true", "aria-label": "Loading", "data-bspk": "skeleton-text", role: "status", style: cssWithVars({
             '--text-height': `var(--${variant}-size)`,
             '--text-margin': `calc(var(--${variant}-line-height) - var(--${variant}-size))`,
         }), children: [...Array(Math.max(1, lines || 0))].map((_, index) => (_jsx("div", { "data-line": true }, index))) }));
 }
-SkeletonText.bspkName = 'SkeletonText';
-export { SkeletonText };
 //# sourceMappingURL=SkeletonText.js.map

package/dist/components/SkeletonText/SkeletonText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../src/components/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA2B1C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAqB;IAC5E,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,eAAe,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,eAAe,EAAE,SAAS,OAAO,QAAQ;YACzC,eAAe,EAAE,cAAc,OAAO,yBAAyB,OAAO,SAAS;SAClF,CAAC,YAED,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,mCAAoB,KAAK,CAAI,CAChC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,YAAY,CAAC,QAAQ,GAAG,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../src/components/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA2B1C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAqB;IACnF,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,eAAe,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,eAAe,EAAE,SAAS,OAAO,QAAQ;YACzC,eAAe,EAAE,cAAc,OAAO,yBAAyB,OAAO,SAAS;SAClF,CAAC,YAED,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,mCAAoB,KAAK,CAAI,CAChC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/SkeletonText/SkeletonTextExample.d.ts

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

package/dist/components/SkeletonText/SkeletonTextExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTextExample.js","sourceRoot":"","sources":["../../../src/components/SkeletonText/SkeletonTextExample.tsx"],"names":[],"mappings":";AAAA,yCAAyC,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD,MAAM,CAAC,MAAM,mBAAmB,GAAwC;IACpE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,oBAAoB;YAAE,OAAO,KAAC,sBAAsB,OAAK,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;QAC/G,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACP,OAAO,EAAE,WAAW;gBACpB,KAAK,EAAE,CAAC;aACX;SACJ;KACJ;CACJ,CAAC;AAEF,SAAS,sBAAsB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EAGX;IACG,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC;IACpC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,SAAS,CAAC,GAAG,EAAE;QACX,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YACf,MAAM,IAAI,CACP,sIAGI,CACP,GACO,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"SkeletonTextExample.js","sourceRoot":"","sources":["../../../src/components/SkeletonText/SkeletonTextExample.tsx"],"names":[],"mappings":";AAAA,yCAAyC,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,CAAC,MAAM,mBAAmB,GAAwC;IACpE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,oBAAoB;YAAE,OAAO,KAAC,sBAAsB,OAAK,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;QAC/G,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACP,OAAO,EAAE,WAAW;gBACpB,KAAK,EAAE,CAAC;aACX;SACJ;KACJ;CACJ,CAAC;AAEF,SAAS,sBAAsB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EAGX;IACG,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC;IACpC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,SAAS,CAAC,GAAG,EAAE;QACX,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YACf,MAAM,IAAI,CACP,sIAGI,CACP,GACO,CACf,CAAC;AACN,CAAC"}

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,80 @@
+import './slider.scss';
+import { CommonPropsLibrary } from '-/types/common';
+export type SliderValue = number | [number, number];
+export type SliderProps<Value> = Pick<CommonPropsLibrary, 'disabled' | 'readOnly'> & {
+    /**
+     * The label of the slider.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The numerical value of the slider.
+     *
+     * Providing an array of two numbers will create a **range slider**.
+     *
+     * @required
+     */
+    value: Value;
+    /**
+     * Invoked with the new value when value changes.
+     *
+     * @required
+     */
+    onChange: (newValue: Value) => void;
+    /**
+     * The minimum value of the slider.
+     *
+     * @required
+     */
+    min: number;
+    /**
+     * The maximum value of the slider.;
+     *
+     * @required
+     */
+    max: number;
+    /**
+     * Indicates if marks should be displayed on the slider.
+     *
+     * @default false
+     */
+    marks?: boolean;
+    /**
+     * The number that specifies the granularity that the value must adhere to
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Optional function to format the display of each number.
+     *
+     * Useful for currency, percentages, etc.
+     */
+    formatNumber?: (value: number, context?: 'max' | 'min' | 'rangeEnd' | 'rangeStart') => string;
+    /**
+     * The name of the slider input, useful for form submissions.
+     *
+     * @required
+     */
+    name: string;
+};
+/**
+ * A control element that allows customers to select a value or adjust a setting by moving the handle along a horizontal
+ * track.
+ *
+ * @example
+ *     import { Slider } from '@bspk/ui/Slider';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState(50);
+ *
+ *         return <Slider value={value} min={0} max={100} label="Slider Example" onChange={setValue} />;
+ *     }
+ *
+ * @name Slider
+ * @phase UXReview
+ */
+export declare function Slider<V = SliderValue>({ value: valueProp, onChange, min, max, label, marks, step, disabled, readOnly, name, formatNumber: formatNumberProp, }: SliderProps<V>): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */