@bspk/ui 1.3.3 → 1.3.5

package/dist/components/ListItem/ListItem.d.ts

@@ -1,8 +1,8 @@
 import './list-item.scss';
-import { AnchorHTMLAttributes, ElementType, ReactNode, MouseEvent, AriaAttributes, AriaRole } from 'react';
+import { AnchorHTMLAttributes, ElementType, ReactNode, MouseEvent, AriaAttributes, AriaRole, ComponentProps } from 'react';
 import { ListItemButton } from './ListItemButton';
 import { CommonProps, ElementProps, SetRef } from '-/types/common';
-export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'active' | 'owner'> & Pick<AriaAttributes, 'aria-label'> & {
+export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'active' | 'owner' | 'style'> & Pick<AriaAttributes, 'aria-label'> & {
     /**
      * The element type to render as.
      *
@@ -19,12 +19,16 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
      * @options Icon, Img, Avatar
      */
     leading?: ReactNode;
+    /** Props to pass to the leading element wrapper span. */
+    leadingProps?: ComponentProps<'span'>;
     /**
      * The label to display in the ListItem.
      *
      * @required
      */
     label: string;
+    /** Props to pass to the label wrapper span. */
+    labelProps?: ComponentProps<'span'>;
     /** The subtext to display in the ListItem. */
     subText?: string;
     /**
@@ -37,6 +41,8 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
      * @options Checkbox, Icon, ListItemButton, Radio, Switch, Tag, Txt
      */
     trailing?: ReactNode;
+    /** Props to pass to the trailing element wrapper span. */
+    trailingProps?: ComponentProps<'span'>;
     /**
      * The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the list item.
      *
@@ -63,18 +69,21 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
      * If not provided, a unique ID will be generated. This is useful for accessibility and testing purposes.
      */
     id?: string;
-    /**
-     * Whether to hide the label from screen readers. Use this when the label is redundant with other context, such
-     * as within a ListItemMenu or Label.
-     *
-     * @default false
-     */
-    hideAriaLabel?: boolean;
     /**
      * Indicates the current "selected" state of the list item when used in a selectable context, such as within a
      * ListItemMenu.
      */
     'aria-selected'?: boolean;
+    /**
+     * Determines how the ListItem uses horizontal space.
+     *
+     * If set to 'fill', options expand to fill the container's width.
+     *
+     * If set to 'hug', options only take up as much space as the content requires.
+     *
+     * @default fill
+     */
+    width?: 'fill' | 'hug';
 };
 /**
  * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
@@ -94,7 +103,7 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
  *     import { SvgSquare } from '@bspk/icons/Square';
  *     import { ListItem } from '@bspk/ui/ListItem';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <ListItem
  *                 label="Example label"
@@ -108,7 +117,7 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
  * @name ListItem
  * @phase UXReview
  */
-declare function ListItem<As extends ElementType = 'div'>({ active, as, innerRef, label, leading, owner, role: roleProp, subText, trailing, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, 'aria-disabled': ariaDisabled, 'aria-readonly': ariaReadonly, hideAriaLabel, ...props }: ElementProps<ListItemProps<As>, As>): import("react/jsx-runtime").JSX.Element | null;
+declare function ListItem<As extends ElementType = ElementType>({ active, as, innerRef, label, labelProps, leading, leadingProps, owner, role: roleProp, subText, trailing, trailingProps, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, 'aria-disabled': ariaDisabled, 'aria-readonly': ariaReadonly, width, ...props }: ElementProps<ListItemProps<As>, As>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ListItem {
     var Button: typeof ListItemButton;
 }

package/dist/components/ListItem/ListItem.js

@@ -21,7 +21,7 @@ import { useId } from '../../hooks/useId';
  *     import { SvgSquare } from '@bspk/icons/Square';
  *     import { ListItem } from '@bspk/ui/ListItem';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <ListItem
  *                 label="Example label"
@@ -35,7 +35,7 @@ import { useId } from '../../hooks/useId';
  * @name ListItem
  * @phase UXReview
  */
-function ListItem({ active, as, innerRef, label, leading, owner, role: roleProp, subText, trailing, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, 'aria-disabled': ariaDisabled, 'aria-readonly': ariaReadonly, hideAriaLabel, ...props }) {
+function ListItem({ active, as, innerRef, label, labelProps, leading, leadingProps, owner, role: roleProp, subText, trailing, trailingProps, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, 'aria-disabled': ariaDisabled, 'aria-readonly': ariaReadonly, width, ...props }) {
     const id = useId(idProp);
     if (!label)
         return null;
@@ -44,7 +44,7 @@ function ListItem({ active, as, innerRef, label, leading, owner, role: roleProp,
     const isDisabled = Boolean(props.disabled || ariaDisabled);
     const actionable = !!(props.href || props.onClick || as === 'button') && !isReadOnly && !isDisabled;
     const role = roleLogic(roleProp, { as: As, props, actionable });
-    return (_jsxs(As, { ...props, "aria-label": ariaLabel || undefined, "aria-selected": ariaSelected, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-bspk-owner": owner || undefined, "data-disabled": isDisabled || undefined, "data-readonly": isReadOnly || undefined, id: id, onClick: isReadOnly || isDisabled ? undefined : props.onClick, ref: innerRef, role: role, tabIndex: props.tabIndex || (actionable ? 0 : -1), children: [leading && (_jsx("span", { "aria-hidden": true, "data-leading": true, children: leading })), _jsxs("span", { "aria-hidden": hideAriaLabel ? true : undefined, "data-item-label": true, children: [_jsx(Truncated, { "data-text": true, children: label }), subText && _jsx("span", { "data-sub-text": true, children: subText })] }), trailing && _jsx("span", { "data-trailing": true, children: trailing })] }));
+    return (_jsxs(As, { ...props, "aria-label": ariaLabel || undefined, "aria-selected": ariaSelected, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-bspk-owner": owner || undefined, "data-disabled": isDisabled || undefined, "data-readonly": isReadOnly || undefined, "data-width": width === 'hug' ? 'hug' : undefined, id: id, onClick: isReadOnly || isDisabled ? undefined : props.onClick, ref: innerRef, role: role, tabIndex: props.tabIndex || (actionable ? 0 : -1), children: [leading && (_jsx("span", { ...leadingProps, "data-leading": true, children: leading })), _jsxs("span", { ...labelProps, "data-item-label": true, children: [_jsx(Truncated, { "data-text": true, children: label }), subText && _jsx("span", { "data-sub-text": true, children: subText })] }), trailing && (_jsx("span", { ...trailingProps, "data-trailing": true, children: trailing }))] }));
 }
 ListItem.Button = ListItemButton;
 export { ListItem };

package/dist/components/ListItem/ListItem.js.map

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

package/dist/components/ListItem/ListItemExample.js

@@ -17,12 +17,12 @@ export const presets = (action) => [
         },
     },
     {
-        label: 'As Role Button',
+        label: 'As Div',
         propState: {
             as: undefined,
-            label: 'as="button"',
+            label: 'role = "button"',
             role: 'button',
-            subText: 'Button example',
+            subText: 'aria-disabled = {true}',
             trailing: undefined,
             leading: undefined,
             'aria-disabled': true,

package/dist/components/ListItem/ListItemExample.js.map

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

package/dist/components/ListItem/list-item.css

@@ -1,6 +1,5 @@
 [data-bspk=list-item] {
   display: flex;
-  width: 100%;
   user-select: none;
   color: var(--foreground-neutral-on-surface);
   background-color: var(--surface-neutral-t1-base);
@@ -14,6 +13,11 @@
   border: unset;
   margin: unset;
   text-decoration: unset;
+  width: 100%;
+}
+[data-bspk=list-item][data-width=hug] {
+  width: auto;
+  max-width: 100%;
 }
 [data-pseudo=focus] [data-bspk=list-item], [data-bspk=list-item]:focus-visible, [data-bspk=list-item]:has(*:focus-visible) {
   outline: solid 2px var(--stroke-neutral-focus);

package/dist/components/ListItem/list-item.css.js

@@ -3,7 +3,6 @@
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=list-item] {
   display: flex;
-  width: 100%;
   user-select: none;
   color: var(--foreground-neutral-on-surface);
   background-color: var(--surface-neutral-t1-base);
@@ -17,6 +16,11 @@ style.appendChild(document.createTextNode(`[data-bspk=list-item] {
   border: unset;
   margin: unset;
   text-decoration: unset;
+  width: 100%;
+}
+[data-bspk=list-item][data-width=hug] {
+  width: auto;
+  max-width: 100%;
 }
 [data-pseudo=focus] [data-bspk=list-item], [data-bspk=list-item]:focus-visible, [data-bspk=list-item]:has(*:focus-visible) {
   outline: solid 2px var(--stroke-neutral-focus);

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

@@ -2,7 +2,7 @@ import './menu.scss';
 import { ElementType, ReactNode } from 'react';
 import { CommonProps, ElementProps, SetRef } from '-/types/common';
 export declare function menuItemId(menuId: string, index: number): string;
-export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' | 'owner' | 'role'> & {
+export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' | 'owner' | 'role' | 'style'> & {
     /** A ref to the inner div element. */
     innerRef?: SetRef<HTMLDivElement>;
     /**
@@ -24,6 +24,13 @@ export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' |
      * @type ElementType
      */
     as?: As;
+    /**
+     * The width of the menu.
+     *
+     * @type HTMLElement.style.width
+     * @exampleType string
+     */
+    width?: HTMLElement['style']['width'];
 };
 /**
  * A container housing a simple list of options presented to the customer to select one option at a time.
@@ -33,7 +40,7 @@ export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' |
  *
  *     import { Menu } from '@bspk/ui/Menu';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <Menu>
  *                 <ListItem label="List Item" />

package/dist/components/Menu/Menu.js

@@ -12,7 +12,7 @@ export function menuItemId(menuId, index) {
  *
  *     import { Menu } from '@bspk/ui/Menu';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <Menu>
  *                 <ListItem label="List Item" />
@@ -28,6 +28,6 @@ export function menuItemId(menuId, index) {
 export function Menu({ as, innerRef, id: idProp, children, owner, label, ...props }) {
     const menuId = useId(idProp);
     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 }));
+    return (_jsx(As, { ...props, "aria-label": label || undefined, "data-bspk-owner": owner || undefined, "data-bspk-utility": "menu", id: menuId, ref: innerRef, style: { ...props.style, width: props.width }, children: children }));
 }
 //# 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,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"}
+{"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;AAiCD;;;;;;;;;;;;;;;;;;;;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,EACb,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,YAE5C,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}

package/dist/components/Menu/MenuExample.js

@@ -13,10 +13,10 @@ import { ListItem } from '../ListItem';
 import { Switch } from '../Switch';
 export const MenuExample = ({ action, }) => ({
     render: ({ props, Component, setState }) => {
-        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: () => {
+        return (_jsxs(Component, { ...props, style: { padding: 'var(--spacing-sizing-02) var(--spacing-sizing-02)' }, children: [_jsx(ListItem, { label: "Michael Scott", leading: _jsx(Avatar, { image: "/avatar-01.png", 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: () => {
+                        }, value: "dark-mode" }) }), _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" })] }));
     },

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/Modal/Modal.d.ts

@@ -70,7 +70,7 @@ export type ModalProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | 'i
  *     import { Button } from '@bspk/ui/Button';
  *     import { Modal } from '@bspk/ui/Modal';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [open, setOpen] = React.useState(false);
  *
  *         return (

package/dist/components/Modal/Modal.js

@@ -48,7 +48,7 @@ function useDialogHeight() {
  *     import { Button } from '@bspk/ui/Button';
  *     import { Modal } from '@bspk/ui/Modal';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [open, setOpen] = React.useState(false);
  *
  *         return (

package/dist/components/Modal/ModalExample.js

@@ -18,7 +18,7 @@ export const ModalExample = ({ action }) => ({
             propState: {
                 header: 'Confirmation Modal',
                 description: 'This modal has a call to action and a cancel button.',
-                children: (_jsx(_Fragment, { children: _jsx("p", { children: "This is a confirmation modal. It has a call to action and a cancel button. The call to action is the primary button and the cancel button is the tertiary button." }) })),
+                children: (_jsx("p", { children: "This is a confirmation modal. It has a call to action and a cancel button. The call to action is the primary button and the cancel button is the tertiary button." })),
                 callToAction: {
                     label: 'Call to Action',
                     onClick: () => action('Call to Action clicked'),

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,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"}
+{"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,4LAGI,CACP;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/Pagination/PageInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { TextInput } from '../TextInput';
+import { Input } from '../Input';
 import { Txt } from '../Txt';
 export const PageInput = ({ numPages, onChange, value }) => {
     const [page, setPage] = useState(String(value));
@@ -31,6 +31,6 @@ export const PageInput = ({ numPages, onChange, value }) => {
     return (_jsx("form", { onSubmit: (e) => {
             e.preventDefault();
             handleSubmit();
-        }, style: { display: 'contents' }, children: _jsxs("div", { "data-bspk": "page-input", children: [_jsx(TextInput, { "aria-label": "Page input", name: "page-input", onBlur: handleSubmit, onChange: handleChange, showClearButton: false, size: "small", value: page }), _jsx(Txt, { variant: "body-small", children: pageCountMessage })] }) }));
+        }, style: { display: 'contents' }, children: _jsxs("div", { "data-bspk": "page-input", children: [_jsx(Input, { "aria-label": "Page input", name: "page-input", onBlur: handleSubmit, onChange: handleChange, showClearButton: false, size: "small", value: page }), _jsx(Txt, { variant: "body-small", children: pageCountMessage })] }) }));
 };
 //# sourceMappingURL=PageInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageInput.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAIvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAElC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACvB,OAAO,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC;QACD,uDAAuD;IAC3D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;QACjC,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrC,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,UAAU,IAAI,QAAQ,CAAC;QAE1F,IAAI,iBAAiB,IAAI,GAAG,KAAK,EAAE,EAAE,CAAC;YAClC,OAAO,CAAC,GAAG,CAAC,CAAC;QACjB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,UAAU,IAAI,QAAQ,EAAE,CAAC;YAClE,QAAQ,CAAC,UAAU,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,QAAQ,EAAE,CAAC;IAE1C,OAAO,CACH,eACI,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,YAAY,EAAE,CAAC;QACnB,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YAE9B,4BAAe,YAAY,aACvB,KAAC,SAAS,kBACK,YAAY,EACvB,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,GACb,EAEF,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,gBAAgB,GAAO,IAChD,GACH,CACV,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"PageInput.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAIvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAElC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACvB,OAAO,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC;QACD,uDAAuD;IAC3D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;QACjC,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrC,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,UAAU,IAAI,QAAQ,CAAC;QAE1F,IAAI,iBAAiB,IAAI,GAAG,KAAK,EAAE,EAAE,CAAC;YAClC,OAAO,CAAC,GAAG,CAAC,CAAC;QACjB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,UAAU,IAAI,QAAQ,EAAE,CAAC;YAClE,QAAQ,CAAC,UAAU,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,QAAQ,EAAE,CAAC;IAE1C,OAAO,CACH,eACI,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,YAAY,EAAE,CAAC;QACnB,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YAE9B,4BAAe,YAAY,aACvB,KAAC,KAAK,kBACS,YAAY,EACvB,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,GACb,EAEF,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,gBAAgB,GAAO,IAChD,GACH,CACV,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,43 @@
+import './password.scss';
+import { InputProps } from '-/components/Input';
+import { FieldControlProps } from '-/types/common';
+export type PasswordProps = FieldControlProps & Pick<InputProps, 'containerRef' | 'inputProps' | 'inputRef' | 'size'>;
+/**
+ * An input field that is specifically built with a show/hide toggle for entering security passwords.
+ *
+ * For a more complete example with field usage, see the PasswordField component.
+ *
+ * @example
+ *     import { Password } from '@bspk/ui/Password';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleStandalone() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return (
+ *             <Password
+ *                 aria-label="Enter password"
+ *                 value={value}
+ *                 onChange={setValue}
+ *                 aria-label="password"
+ *                 name="password"
+ *             />
+ *         );
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [value, setValue] = useState('');
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Password</FieldLabel>
+ *                 <Password value={value} onChange={setValue} aria-label="password" name="password" />
+ *                 <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name Password
+ * @phase UXReview
+ */
+export declare function Password({ inputProps, inputRef, name, onChange, required, containerRef, invalid: invalidProp, readOnly, disabled, id: idProp, 'aria-label': ariaLabel, ...props }: PasswordProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Password/Password.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './password.css.js';
+import { useState } from 'react';
+import { Button } from '../Button';
+import { useFieldInit } from '../Field';
+import { InputElement } from '../Input';
+/**
+ * An input field that is specifically built with a show/hide toggle for entering security passwords.
+ *
+ * For a more complete example with field usage, see the PasswordField component.
+ *
+ * @example
+ *     import { Password } from '@bspk/ui/Password';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleStandalone() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return (
+ *             <Password
+ *                 aria-label="Enter password"
+ *                 value={value}
+ *                 onChange={setValue}
+ *                 aria-label="password"
+ *                 name="password"
+ *             />
+ *         );
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [value, setValue] = useState('');
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Password</FieldLabel>
+ *                 <Password value={value} onChange={setValue} aria-label="password" name="password" />
+ *                 <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name Password
+ * @phase UXReview
+ */
+export function Password({ inputProps, inputRef, name, onChange, required = false, containerRef, invalid: invalidProp, readOnly, disabled, id: idProp, 'aria-label': ariaLabel, ...props }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+    const [isShowingPassword, setIsShowingPassword] = useState(false);
+    const togglePasswordVisibility = () => {
+        if (disabled || readOnly)
+            return;
+        setIsShowingPassword((prev) => !prev);
+    };
+    return (_jsx(InputElement, { ...props, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel || undefined, autoComplete: "off", containerRef: containerRef, "data-bspk-owner": "password", id: id, inputProps: inputProps, inputRef: inputRef, invalid: invalid, name: name, onChange: onChange, onClick: (e) => {
+            e.currentTarget?.querySelector('input')?.focus();
+        }, owner: "password", required: required, showClearButton: false, trailing: !disabled &&
+            !readOnly && (_jsx(Button, { "data-toggle-visibility-button": true, label: isShowingPassword ? 'Hide' : 'Show', onClick: togglePasswordVisibility, variant: "tertiary" })), type: isShowingPassword ? 'text' : 'password' }));
+}
+//# sourceMappingURL=Password.js.map

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

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

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

@@ -0,0 +1 @@
+export * from './Password';

package/dist/components/Password/index.js

@@ -0,0 +1,2 @@
+export * from './Password';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Password/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/Password/password.css

@@ -0,0 +1,21 @@
+[data-bspk-owner=password] [data-bspk=input] {
+  padding-right: 0;
+}
+[data-bspk-owner=password] [data-bspk=input] [data-toggle-visibility-button] {
+  font: var(--button-font);
+  height: 100%;
+}
+[data-bspk-owner=password] [data-bspk=input][data-disabled] [data-toggle-visibility-button], [data-bspk-owner=password] [data-bspk=input][data-readonly] [data-toggle-visibility-button] {
+  cursor: default;
+}
+[data-bspk-owner=password] [data-bspk=input][data-size=small] {
+  --button-font: var(--labels-small);
+}
+[data-bspk-owner=password] [data-bspk=input][data-size=medium] {
+  --button-font: var(--labels-base);
+}
+[data-bspk-owner=password] [data-bspk=input][data-size=large] {
+  --button-font: var(--labels-large);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Password/password.css.js

@@ -0,0 +1,26 @@
+/** * 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-owner=password] [data-bspk=input] {
+  padding-right: 0;
+}
+[data-bspk-owner=password] [data-bspk=input] [data-toggle-visibility-button] {
+  font: var(--button-font);
+  height: 100%;
+}
+[data-bspk-owner=password] [data-bspk=input][data-disabled] [data-toggle-visibility-button], [data-bspk-owner=password] [data-bspk=input][data-readonly] [data-toggle-visibility-button] {
+  cursor: default;
+}
+[data-bspk-owner=password] [data-bspk=input][data-size=small] {
+  --button-font: var(--labels-small);
+}
+[data-bspk-owner=password] [data-bspk=input][data-size=medium] {
+  --button-font: var(--labels-base);
+}
+[data-bspk-owner=password] [data-bspk=input][data-size=large] {
+  --button-font: var(--labels-large);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/PasswordField/PasswordField.d.ts

@@ -1,31 +1,15 @@
-import { FormFieldWrapProps } from '-/components/FormField';
-import { PasswordInputProps } from '-/components/PasswordInput';
-export type PasswordFieldProps = FormFieldWrapProps<PasswordInputProps>;
+import { FormFieldControlProps } from '-/components/FormField';
+import { PasswordProps } from '-/components/Password';
+export type PasswordFieldProps = FormFieldControlProps<PasswordProps>;
 /**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
+ * A field wrapper for the Password component.
  *
- * This component takes properties from the FormField and PasswordInput components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { PasswordField } from '@bspk/ui/PasswordField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return (
- *             <PasswordField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
+ * This component takes properties from the FormField and Password components.
  *
  * @name PasswordField
  * @phase UXReview
+ *
+ * @generated
  */
-export declare function PasswordField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...passwordInputProps }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PasswordField/PasswordField.js

@@ -1,33 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormField } from '../FormField';
-import { PasswordInput } from '../PasswordInput';
+import { Password } from '../Password';
 /**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
+ * A field wrapper for the Password component.
  *
- * This component takes properties from the FormField and PasswordInput components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { PasswordField } from '@bspk/ui/PasswordField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return (
- *             <PasswordField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
+ * This component takes properties from the FormField and Password components.
  *
  * @name PasswordField
  * @phase UXReview
+ *
+ * @generated
  */
-export function PasswordField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...passwordInputProps }) {
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "password-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(PasswordInput, { ...passwordInputProps, ...fieldProps, id: controlId, invalid: invalid, required: required, value: passwordInputProps.value ?? '' })) }));
+export function PasswordField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
+    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(Password, { ...controlProps }) }));
 }
 //# sourceMappingURL=PasswordField.js.map