@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Menu/Menu.js

@@ -1,25 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Portal } from '../Portal';
-import { Scrim } from '../Scrim';
-import { useId } from '../../hooks/useId';
-import { cssWithVars } from '../../utils/cwv';
+import { jsx as _jsx } from "react/jsx-runtime";
 import './menu.css.js';
+import { useId } from '../../hooks/useId';
 export function menuItemId(menuId, index) {
     return `menu-${menuId}-item-${index}`;
 }
-export const MIN_ITEM_COUNT = 3;
-export const MAX_ITEM_COUNT = 10;
-// returns the item count to display based on the items and the itemDisplayCount bounded by the MIN_ITEM_COUNT and MAX_ITEM_COUNT
-function boundCount(itemLength = 0, itemDisplayCount = 0) {
-    const minItemCount = Math.max(MIN_ITEM_COUNT, itemLength);
-    const maxItemCount = Math.min(MAX_ITEM_COUNT, itemLength);
-    return (
-    // Ensure we don't display less than the minimum item count
-    Math.min(minItemCount, 
-    // Ensure we don't display more items than available
-    Math.min(maxItemCount, itemDisplayCount)));
-}
 /**
  * A container housing a simple list of options presented to the customer to select one option at a time.
  *
@@ -32,29 +16,18 @@ function boundCount(itemLength = 0, itemDisplayCount = 0) {
  *         return (
  *             <Menu>
  *                 <ListItem label="List Item" />
+ *                 <ListItem label="List Item" />
+ *                 <ListItem label="List Item" />
  *             </Menu>
  *         );
  *     }
  *
  * @name Menu
- * @phase DesignReview
+ * @phase UXReview
  */
-function Menu({ 
-//
-innerRef, id: idProp, children, portal = true, itemDisplayCount: itemDisplayCountProp, itemCount, floating = true, onOutsideClick, ...props }) {
+export function Menu({ as, innerRef, id: idProp, children, owner, label, ...props }) {
     const menuId = useId(idProp);
-    const itemDisplayCount = useMemo(() => {
-        return itemDisplayCountProp && boundCount(itemCount, itemDisplayCountProp);
-    }, [itemCount, itemDisplayCountProp]);
-    const menu = (_jsxs(_Fragment, { children: [floating && _jsx(Scrim, { "data-bspk-owner": "menu", onClick: () => onOutsideClick?.(), variant: "dropdown" }), _jsx("div", { role: "listbox", ...props, "data-bspk": "menu", "data-floating": floating || undefined, id: menuId, ref: innerRef, style: cssWithVars({
-                    ...props.style,
-                    '--overflow-y': itemCount && itemDisplayCount && itemCount > itemDisplayCount ? 'scroll' : undefined,
-                    maxHeight: itemDisplayCount === false
-                        ? 'auto'
-                        : `calc(calc(${itemDisplayCount} * var(--list-item-height)) + 2px /* borders */)`,
-                }), children: children })] }));
-    return portal ? _jsx(Portal, { children: menu }) : menu;
+    const As = as || 'div';
+    return (_jsx(As, { ...props, "aria-label": label || undefined, "data-bspk-owner": owner || undefined, "data-bspk-utility": "menu", id: menuId, ref: innerRef, children: children }));
 }
-Menu.bspkName = 'Menu';
-export { Menu };
 //# sourceMappingURL=Menu.js.map

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,aAAa,CAAC;AAErB,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAa;IACpD,OAAO,QAAQ,MAAM,SAAS,KAAK,EAAE,CAAC;AAC1C,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC;AAChC,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AAEjC,iIAAiI;AACjI,SAAS,UAAU,CAAC,UAAU,GAAG,CAAC,EAAE,gBAAgB,GAAG,CAAC;IACpD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAC1D,OAAO;IACH,2DAA2D;IAC3D,IAAI,CAAC,GAAG,CACJ,YAAY;IACZ,oDAAoD;IACpD,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAC3C,CACJ,CAAC;AACN,CAAC;AA6CD;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,IAAI,CAAC;AACV,EAAE;AACF,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,MAAM,GAAG,IAAI,EACb,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,cAAc,EACd,GAAG,KAAK,EACqB;IAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,oBAAoB,IAAI,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,CACT,8BACK,QAAQ,IAAI,KAAC,KAAK,uBAAiB,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE,EAAE,OAAO,EAAC,UAAU,GAAG,EACnG,cACI,IAAI,EAAC,SAAS,KACV,KAAK,eACC,MAAM,mBACD,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;oBACf,GAAG,KAAK,CAAC,KAAK;oBACd,cAAc,EACV,SAAS,IAAI,gBAAgB,IAAI,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBACxF,SAAS,EACL,gBAAgB,KAAK,KAAK;wBACtB,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,aAAa,gBAAgB,kDAAkD;iBAC5F,CAAC,YAED,QAAQ,GACP,IACP,CACN,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,KAAC,MAAM,cAAE,IAAI,GAAU,CAAC,CAAC,CAAC,IAAI,CAAC;AACnD,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAa;IACpD,OAAO,QAAQ,MAAM,SAAS,KAAK,EAAE,CAAC;AAC1C,CAAC;AA0BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAkC;IAC/G,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,EAAE,GAAG,EAAE,IAAI,KAAK,CAAC;IAEvB,OAAO,CACH,KAAC,EAAE,OACK,KAAK,gBACG,KAAK,IAAI,SAAS,qBACb,KAAK,IAAI,SAAS,uBACjB,MAAM,EACxB,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,QAAQ,YAEZ,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}

package/dist/components/Menu/MenuExample.d.ts

@@ -1,6 +1,6 @@
-import { ComponentExampleFn } from '../../utils/demo';
-import { ElementProps } from '../..';
 import { MenuProps } from '.';
-export declare const MenuExample: ComponentExampleFn<ElementProps<MenuProps, 'div'> & {
-    'data-dark-mode': boolean;
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const MenuExample: ComponentExampleFn<MenuProps & {
+    style?: unknown;
+    'data-dark-mode'?: boolean;
 }>;

package/dist/components/Menu/MenuExample.js

@@ -13,13 +13,13 @@ import { ListItem } from '../ListItem';
 import { Switch } from '../Switch';
 export const MenuExample = ({ action, }) => ({
     render: ({ props, Component, setState }) => {
-        return (_jsxs(Component, { ...props, "aria-label": "Settings Menu", floating: false, portal: false, style: { padding: 'var(--spacing-sizing-02) var(--spacing-sizing-02)' }, children: [_jsx(ListItem, { label: "Michael Scott", leading: _jsx(Avatar, { image: "/profile2.jpg", name: "Michael Scott" }), subText: "michael.scott@email.com" }), _jsx(Divider, { inset: 2, padding: true }), _jsx(ListItem, { href: "#/my-profile", label: "My profile", leading: _jsx(SvgAccountCircle, {}) }), _jsx(ListItem, { href: "#/settings", label: "Settings", leading: _jsx(SvgSettings, {}) }), _jsx(ListItem, { label: "Dark mode", leading: props['data-dark-mode'] ? _jsx(SvgDarkModeFill, {}) : _jsx(SvgDarkMode, {}), role: "checkbox", trailing: _jsx(Switch, { "aria-label": "Toggle dark mode", checked: !!props['data-dark-mode'], name: "dark-mode", onChange: () => {
+        return (_jsxs(Component, { ...props, style: { padding: 'var(--spacing-sizing-02) var(--spacing-sizing-02)' }, children: [_jsx(ListItem, { label: "Michael Scott", leading: _jsx(Avatar, { image: "/profile2.jpg", name: "Michael Scott" }), subText: "michael.scott@email.com" }), _jsx(Divider, { inset: 2, padding: true }), _jsx(ListItem, { href: "#/my-profile", label: "My profile", leading: _jsx(SvgAccountCircle, {}) }), _jsx(ListItem, { href: "#/settings", label: "Settings", leading: _jsx(SvgSettings, {}) }), _jsx(ListItem, { as: "label", label: "Dark mode", leading: props['data-dark-mode'] ? _jsx(SvgDarkModeFill, {}) : _jsx(SvgDarkMode, {}), trailing: _jsx(Switch, { "aria-label": "Toggle dark mode", checked: !!props['data-dark-mode'], name: "dark-mode", onChange: () => {
                             setState((prev) => ({ 'data-dark-mode': !prev['data-dark-mode'] }));
                             action('Dark mode toggled');
                         } }) }), _jsx(Divider, { inset: 2, padding: false, thickness: "light" }), _jsx(ListItem, { href: "#/guide-tutorial", label: "Guide and tutorial", leading: _jsx(SvgMenuBook, {}) }), _jsx(ListItem, { href: "#/help-center", label: "Help center", leading: _jsx(SvgHelp, {}) }), _jsx(Divider, { inset: 2, padding: true }), _jsx(ListItem, { href: "#/go-premium", label: "Go premium", leading: _jsx(SvgLicense, {}) }), _jsx(ListItem, { label: "Log out", leading: _jsx(SvgLogout, {}), onClick: () => {
                         action('Log out clicked');
-                    } })] }));
+                    }, role: "button" })] }));
     },
-    disableProps: ['floating', 'portal'],
+    variants: false,
 });
 //# sourceMappingURL=MenuExample.js.map

package/dist/components/Menu/MenuExample.js.map

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

package/dist/components/Menu/menu.css

@@ -1,20 +1,16 @@
-[data-bspk=menu] {
+[data-bspk-utility=menu] {
   --overflow-y: hidden;
   width: 332px;
   box-sizing: border-box;
   border: 1px solid var(--stroke-neutral-low);
   background-color: var(--surface-neutral-t1-base);
   box-shadow: var(--drop-shadow-float);
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
-  overflow: hidden var(--overflow-y);
-}
-[data-bspk=menu][data-floating] {
+  overflow: hidden auto;
+  height: fit-content;
   z-index: var(--z-index-dropdown);
 }
-[data-bspk=menu] [data-bspk=list-item][data-selected] {
-  background-color: var(--surface-brand-primary-highlight);
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Menu/menu.css.js

@@ -1,26 +1,21 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=menu] {
+style.appendChild(document.createTextNode(`[data-bspk-utility=menu] {
   --overflow-y: hidden;
   width: 332px;
   box-sizing: border-box;
   border: 1px solid var(--stroke-neutral-low);
   background-color: var(--surface-neutral-t1-base);
   box-shadow: var(--drop-shadow-float);
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
-  overflow: hidden var(--overflow-y);
-}
-[data-bspk=menu][data-floating] {
+  overflow: hidden auto;
+  height: fit-content;
   z-index: var(--z-index-dropdown);
 }
-[data-bspk=menu] [data-bspk=list-item][data-selected] {
-  background-color: var(--surface-brand-primary-highlight);
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/MenuButton/MenuButton.d.ts

@@ -1,6 +1,6 @@
-import { ElementProps } from '../../index.js';
-import { ButtonProps } from '../Button';
 import './menu-button.scss';
+import { ButtonProps } from '-/components/Button';
+import { ElementProps } from '-/types/common';
 export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
 /**
  * Utility component used within top navigation.
@@ -15,9 +15,5 @@ export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
  * @name MenuButton
  * @phase Utility
  */
-declare function MenuButton(props: ElementProps<MenuButtonProps, 'button'>): import("react/jsx-runtime").JSX.Element;
-declare namespace MenuButton {
-    var bspkName: string;
-}
-export { MenuButton };
+export declare function MenuButton(props: ElementProps<MenuButtonProps, 'button'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/MenuButton/MenuButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SvgMenu } from '@bspk/icons/Menu';
 import './menu-button.css.js';
+import { SvgMenu } from '@bspk/icons/Menu';
 /**
  * Utility component used within top navigation.
  *
@@ -14,9 +14,7 @@ import './menu-button.css.js';
  * @name MenuButton
  * @phase Utility
  */
-function MenuButton(props) {
+export function MenuButton(props) {
     return (_jsx("button", { "data-bspk": "menu-button", ...props, children: _jsx(SvgMenu, {}) }));
 }
-MenuButton.bspkName = 'MenuButton';
-export { MenuButton };
 //# sourceMappingURL=MenuButton.js.map

package/dist/components/MenuButton/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAI3C,OAAO,oBAAoB,CAAC;AAI5B;;;;;;;;;;;;GAYG;AACH,SAAS,UAAU,CAAC,KAA8C;IAC9D,OAAO,CACH,8BAAkB,aAAa,KAAK,KAAK,YACrC,KAAC,OAAO,KAAG,GACN,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAM3C;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,KAA8C;IACrE,OAAO,CACH,8BAAkB,aAAa,KAAK,KAAK,YACrC,KAAC,OAAO,KAAG,GACN,CACZ,CAAC;AACN,CAAC"}

package/dist/components/MenuButton/menu-button.css.js

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

package/dist/components/Modal/Modal.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
-import { CallToActionButton } from '../../index.js';
-import { ButtonProps } from '../Button';
-import { DialogProps } from '../Dialog';
 import './modal.scss';
+import { ReactNode } from 'react';
+import { ButtonProps } from '-/components/Button';
+import { DialogProps } from '-/components/Dialog';
+import { CallToActionButton } from '-/types/common';
 export type ModalCallToAction = Pick<ButtonProps, 'destructive'> & Pick<CallToActionButton, 'label' | 'onClick'>;
-export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef' | 'onClose' | 'open'> & {
+export type ModalProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | 'id' | 'innerRef' | 'onClose' | 'open' | 'owner'> & {
     /**
      * Modal header.
      *
@@ -75,7 +75,7 @@ export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef'
  *
  *         return (
  *             <>
- *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Button label="Open Modal" onClick={() => setOpen(true)} />
  *                 <Modal
  *                     description="Example description"
  *                     header="Example header"
@@ -91,11 +91,7 @@ export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef'
  * @ignoreRefs ButtonProps
  *
  * @name Modal
- * @phase WorkInProgress
+ * @phase UXReview
  */
-declare function Modal({ header, description, children, callToAction, cancelButton, buttonFormat, innerRef, ...dialogProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Modal {
-    var bspkName: string;
-}
-export { Modal };
+export declare function Modal({ header, description, children, callToAction, cancelButton, buttonFormat, innerRef, disableFocusTrap, ...dialogProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Modal/Modal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './modal.css.js';
 import { SvgClose } from '@bspk/icons/Close';
 import { useMemo, useRef } from 'react';
 import { Button } from '../Button';
@@ -7,7 +8,6 @@ import { Txt } from '../Txt';
 import { useEventListener } from '../../hooks/useAddEventListener';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { useUIContext } from '../../hooks/useUIContext';
-import './modal.css.js';
 // This hook is used to set the height of the modal based on the dialog box height.
 // It listens to the resize event and updates the modal height accordingly.
 function useDialogHeight() {
@@ -53,7 +53,7 @@ function useDialogHeight() {
  *
  *         return (
  *             <>
- *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Button label="Open Modal" onClick={() => setOpen(true)} />
  *                 <Modal
  *                     description="Example description"
  *                     header="Example header"
@@ -69,9 +69,9 @@ function useDialogHeight() {
  * @ignoreRefs ButtonProps
  *
  * @name Modal
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function Modal({ header, description, children, callToAction, cancelButton, buttonFormat = 'horizontal', innerRef, ...dialogProps }) {
+export function Modal({ header, description, children, callToAction, cancelButton, buttonFormat = 'horizontal', innerRef, disableFocusTrap, ...dialogProps }) {
     const { isMobile } = useUIContext();
     const buttons = useMemo(() => {
         const nextButtons = [];
@@ -93,8 +93,6 @@ function Modal({ header, description, children, callToAction, cancelButton, butt
         return nextButtons;
     }, [callToAction, cancelButton, dialogProps.onClose, isMobile]);
     const { setModalRefs } = useDialogHeight();
-    return (_jsx(Dialog, { ...dialogProps, "aria-description": description, "aria-label": header, innerRef: setModalRefs, placement: "center", showScrim: true, children: _jsxs("div", { "data-bspk": "modal", ref: (node) => innerRef?.(node), style: { visibility: 'hidden' }, children: [_jsxs("header", { children: [_jsx(Txt, { as: "div", "data-dialog-title": true, variant: "heading-h4", children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), label: "close", onClick: dialogProps.onClose, showLabel: false, variant: "tertiary" })] }), _jsx("main", { children: children }), Array.isArray(buttons) && buttons.length > 0 && (_jsx("footer", { "data-button-format": buttonFormat, children: buttons.map((buttonProps, idx) => (_jsx(Button, { ...buttonProps, size: isMobile ? 'medium' : 'small' }, idx))) }))] }) }));
+    return (_jsx(Dialog, { ...dialogProps, "aria-description": description, "aria-label": header, disableFocusTrap: disableFocusTrap, innerRef: setModalRefs, placement: "center", showScrim: true, children: _jsxs("div", { "data-bspk": "modal", ref: (node) => innerRef?.(node), style: { visibility: 'hidden' }, children: [_jsxs("div", { "data-modal-header": true, children: [_jsx(Txt, { as: "div", "data-dialog-title": true, variant: "heading-h4", children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "close", onClick: dialogProps.onClose, variant: "tertiary" })] }), _jsx("div", { "data-modal-main": true, children: children }), Array.isArray(buttons) && buttons.length > 0 && (_jsx("div", { "data-button-format": buttonFormat, "data-modal-footer": true, children: buttons.map((buttonProps, idx) => (_jsx(Button, { ...buttonProps, size: isMobile ? 'medium' : 'small' }, idx))) }))] }) }));
 }
-Modal.bspkName = 'Modal';
-export { Modal };
 //# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

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

package/dist/components/Modal/ModalExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExampleFn } from '../../utils/demo';
 import { ModalProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 export declare const ModalExample: ComponentExampleFn<ModalProps>;

package/dist/components/Modal/ModalExample.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '.';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { ListItem } from '../ListItem';
-import { Modal } from '.';
 export const ModalExample = ({ action }) => ({
-    hideVariants: true,
+    variants: false,
     render: ({ props, setState }) => {
         const label = 'Open Modal';
         const { children, ...modalProps } = props;
@@ -34,7 +34,7 @@ export const ModalExample = ({ action }) => ({
                 description: 'This modal has no buttons.',
                 children: (_jsxs(_Fragment, { children: [_jsx("p", { children: "This is a demo of a scrolling modal. Most modals won't scroll but mobile uses modals as dropdowns which may have more items than can fit in the screen." }), Array(30)
                             .fill('')
-                            .map((_, index) => (_jsx(ListItem, { label: `Option ${index + 1}`, onClick: () => action(`Option ${index + 1} clicked`), trailing: _jsx(Checkbox, { "aria-label": "", name: "", onChange: () => { }, value: "" }) }, `key${index}`)))] })),
+                            .map((_, index) => (_jsx(ListItem, { as: "label", label: `Option ${index + 1}`, onClick: () => action(`Option ${index + 1} clicked`), trailing: _jsx(Checkbox, { "aria-label": "", name: "", onChange: () => { }, value: "" }) }, `key${index}`)))] })),
             },
         },
     ],

package/dist/components/Modal/ModalExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalExample.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAc,KAAK,EAAE,MAAM,GAAG,CAAC;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACzE,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC;QAE3B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,KAAK,oCAAwB,EAAE,EAAC,WAAW,KAAK,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,QAAQ,GACL,IACT,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL,qBAAqB;QACrB;YACI,KAAK,EAAE,cAAc;YACrB,KAAK,EAAE,sBAAsB;YAC7B,SAAS,EAAE;gBACP,MAAM,EAAE,oBAAoB;gBAC5B,WAAW,EAAE,sDAAsD;gBACnE,QAAQ,EAAE,CACN,4BACI,4LAGI,GACL,CACN;gBACD,YAAY,EAAE;oBACV,KAAK,EAAE,gBAAgB;oBACvB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC;iBAClD;gBACD,YAAY,EAAE,QAAQ;aACzB;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,aAAa;gBACrB,WAAW,EAAE,4BAA4B;gBACzC,QAAQ,EAAE,CACN,8BACI,kLAGI,EACH,KAAK,CAAC,EAAE,CAAC;6BACL,IAAI,CAAC,EAAE,CAAC;6BACR,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACf,KAAC,QAAQ,IAEL,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU,CAAC,EACpD,QAAQ,EAAE,KAAC,QAAQ,kBAAY,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,EAAE,GAAG,IAHpE,MAAM,KAAK,EAAE,CAIpB,CACL,CAAC,IACP,CACN;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ModalExample.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,KAAK,EAAE,MAAM,GAAG,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACzE,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC;QAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,KAAK,oCAAwB,EAAE,EAAC,WAAW,KAAK,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,QAAQ,GACL,IACT,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL,qBAAqB;QACrB;YACI,KAAK,EAAE,cAAc;YACrB,KAAK,EAAE,sBAAsB;YAC7B,SAAS,EAAE;gBACP,MAAM,EAAE,oBAAoB;gBAC5B,WAAW,EAAE,sDAAsD;gBACnE,QAAQ,EAAE,CACN,4BACI,4LAGI,GACL,CACN;gBACD,YAAY,EAAE;oBACV,KAAK,EAAE,gBAAgB;oBACvB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC;iBAClD;gBACD,YAAY,EAAE,QAAQ;aACzB;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,aAAa;gBACrB,WAAW,EAAE,4BAA4B;gBACzC,QAAQ,EAAE,CACN,8BACI,kLAGI,EACH,KAAK,CAAC,EAAE,CAAC;6BACL,IAAI,CAAC,EAAE,CAAC;6BACR,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACf,KAAC,QAAQ,IACL,EAAE,EAAC,OAAO,EAEV,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU,CAAC,EACpD,QAAQ,EAAE,KAAC,QAAQ,kBAAY,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,EAAE,GAAG,IAHpE,MAAM,KAAK,EAAE,CAIpB,CACL,CAAC,IACP,CACN;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/Modal/modal.css

@@ -3,36 +3,28 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sizing-02);
+  padding: var(--spacing-sizing-05);
+}
+[data-screen-size=small] [data-bspk=modal] {
   padding: var(--spacing-sizing-04);
 }
-[data-bspk=modal] > header {
+[data-bspk=modal] > [data-modal-header] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=modal] main {
+[data-bspk=modal] [data-modal-main] {
   flex: 1;
   overflow-y: auto;
   max-height: fit-content;
 }
-[data-bspk=modal] > footer {
+[data-bspk=modal] > [data-modal-footer] {
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: var(--spacing-sizing-04);
 }
-@media (width < 640px) {
-  [data-bspk=modal] > footer [data-bspk=button] {
-    width: 50%;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] {
-    flex-direction: column-reverse;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] [data-bspk=button] {
-    width: 100%;
-  }
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Modal/modal.css.js

@@ -6,39 +6,30 @@ style.appendChild(document.createTextNode(`[data-bspk=modal] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sizing-02);
+  padding: var(--spacing-sizing-05);
+}
+[data-screen-size=small] [data-bspk=modal] {
   padding: var(--spacing-sizing-04);
 }
-[data-bspk=modal] > header {
+[data-bspk=modal] > [data-modal-header] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=modal] main {
+[data-bspk=modal] [data-modal-main] {
   flex: 1;
   overflow-y: auto;
   max-height: fit-content;
 }
-[data-bspk=modal] > footer {
+[data-bspk=modal] > [data-modal-footer] {
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: var(--spacing-sizing-04);
 }
-@media (width < 640px) {
-  [data-bspk=modal] > footer [data-bspk=button] {
-    width: 50%;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] {
-    flex-direction: column-reverse;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] [data-bspk=button] {
-    width: 100%;
-  }
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/NumberField/NumberField.d.ts

@@ -1,6 +1,6 @@
-import { FormFieldProps } from '../FormField';
-import { NumberInputProps } from '../NumberInput';
-export type NumberFieldProps = Pick<NumberInputProps, 'align' | 'disabled' | 'errorMessage' | 'id' | 'invalid' | 'max' | 'min' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'> & Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+import { FormFieldWrapProps } from '-/components/FormField';
+import { NumberInputProps } from '-/components/NumberInput';
+export type NumberFieldProps = FormFieldWrapProps<NumberInputProps>;
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
  * pressing the (+) or (-).
@@ -27,11 +27,7 @@ export type NumberFieldProps = Pick<NumberInputProps, 'align' | 'disabled' | 'er
  *     }
  *
  * @name NumberField
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function NumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
-declare namespace NumberField {
-    var bspkName: string;
-}
-export { NumberField };
+export declare function NumberField({ label, errorMessage, disabled, helperText, controlId, labelTrailing, required, invalid, ...inputProps }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/NumberField/NumberField.js

@@ -27,12 +27,9 @@ import { NumberInput } from '../NumberInput';
  *     }
  *
  * @name NumberField
- * @phase DesignReview
+ * @phase UXReview
  */
-function NumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }) {
-    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "number-field", errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => _jsx(NumberInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId }) }));
+export function NumberField({ label, errorMessage, disabled, helperText, controlId, labelTrailing, required, invalid, ...inputProps }) {
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "number-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(NumberInput, { ...inputProps, ...fieldProps, "aria-label": label, disabled: disabled, id: controlId, invalid: invalid })) }));
 }
-NumberField.bspkName = 'NumberField';
-export { NumberField };
 //# sourceMappingURL=NumberField.js.map

package/dist/components/NumberField/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAoB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAmBzE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAS,WAAW,CAAC,EACjB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACE;IACf,MAAM,YAAY,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAErG,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,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,WAAW,OAAK,UAAU,KAAM,UAAU,gBAAc,KAAK,EAAE,EAAE,EAAE,SAAS,GAAI,GAC1F,CACf,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAoB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIzE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,EACP,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,WAAW,OACJ,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,GAClB,CACL,GACO,CACf,CAAC;AACN,CAAC"}

package/dist/components/NumberInput/IncrementButton.d.ts

@@ -0,0 +1,7 @@
+export type IncrementButtonProps = {
+    disabled: boolean;
+    increment: -1 | 1;
+    onIncrement: (increment: -1 | 1) => void;
+    inputId: string;
+};
+export declare function IncrementButton({ increment, disabled, onIncrement, inputId }: IncrementButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NumberInput/IncrementButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgAdd } from '@bspk/icons/Add';
+import { SvgRemove } from '@bspk/icons/Remove';
+import { useLongPress } from '../../hooks/useLongPress';
+export function IncrementButton({ increment, disabled, onIncrement, inputId }) {
+    const add = increment === 1;
+    const { setTriggerElement, ...handlers } = useLongPress(() => onIncrement(increment), disabled);
+    return (_jsx("button", { ...handlers, "aria-controls": inputId, "aria-hidden": "true", "data-increment": increment, disabled: disabled, ref: setTriggerElement, tabIndex: -1, type: "button", children: add ? _jsx(SvgAdd, {}) : _jsx(SvgRemove, {}) }));
+}
+//# sourceMappingURL=IncrementButton.js.map

package/dist/components/NumberInput/IncrementButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncrementButton.js","sourceRoot":"","sources":["../../../src/components/NumberInput/IncrementButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AASpD,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAwB;IAC/F,MAAM,GAAG,GAAG,SAAS,KAAK,CAAC,CAAC;IAE5B,MAAM,EAAE,iBAAiB,EAAE,GAAG,QAAQ,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;IAEhG,OAAO,CACH,oBACQ,QAAQ,mBACG,OAAO,iBACV,MAAM,oBACF,SAAS,EACzB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,iBAAiB,EACtB,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,YAEZ,GAAG,CAAC,CAAC,CAAC,KAAC,MAAM,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GAC5B,CACZ,CAAC;AACN,CAAC"}

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, InvalidPropsLibrary } from '../../index.js';
 import './number-input.scss';
-export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> & InvalidPropsLibrary & {
+import { CommonProps, FormFieldControlProps } from '-/types/common';
+export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & FormFieldControlProps & {
     /** The value of the control. */
     value?: number | string;
     /**
@@ -18,10 +18,6 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
     /**
      * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
      * accepted.
-     *
-     * @default 99
-     * @maximum 99
-     * @minimum 1
      */
     max?: number;
     /**
@@ -29,9 +25,14 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
      * accepted.
      *
      * @default 0
-     * @minimum 0
      */
     min?: number;
+    /**
+     * The amount to increment or decrement the value by when the (+) or (-) buttons are pressed.
+     *
+     * @default 1
+     */
+    step?: number;
 };
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
@@ -56,11 +57,7 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
  *     }
  *
  * @name NumberInput
- * @phase DesignReview
+ * @phase Utility
  */
-declare function NumberInput({ value, onChange, align, size, disabled, readOnly, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
-declare namespace NumberInput {
-    var bspkName: string;
-}
-export { NumberInput };
+export declare function NumberInput({ value, onChange, align, size, disabled, readOnly, name, id: inputIdProp, 'aria-label': ariaLabel, max: maxProp, min, invalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, step, ...inputElementProps }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */