@bspk/ui 1.0.0

package/ListItem.js

@@ -0,0 +1,207 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { Button } from './Button.js';
+import { getChildrenElements } from './utils/children.js';
+import { useErrorLogger } from './utils/errors.js';
+
+const LEADING_COMPONENTS = Object.freeze(['Icon', 'Img', 'Profile']);
+const TRAILING_COMPONENTS = Object.freeze([
+    'ListItemButton',
+    'Checkbox',
+    'Icon',
+    'Radio',
+    'Switch',
+    'Tag',
+    'Txt',
+]);
+/**
+ * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
+ * navigation in most experiences.
+ *
+ * With its flexible and simple structure, the list item element is core and can meet the needs of many uses cases.
+ *
+ * The ListItem has three main elements: leading element, label, and trailing element.
+ *
+ * Leading elements may be one of the following [Icon](/icons), Img, Profile.
+ *
+ * Trailing elements may be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
+ *
+ * The ListItemButton is a more limited Button with context specific options.
+ *
+ * @subComponents ListItemButton
+ *
+ * @name ListItem
+ */
+function ListItem({ as, disabled, invalid, leading: leadingProp, trailing: trailingProp, label, subText, active, readOnly, ...props }) {
+    let As = as || 'div';
+    const { logError } = useErrorLogger();
+    const { leading, trailing } = useChildren(leadingProp, trailingProp);
+    if (!label)
+        return;
+    const requiredAs = [];
+    if ('href' in props)
+        requiredAs.push('a');
+    if (trailing?.name) {
+        // if trailing is a ListItemButton and As is a button, change As to div
+        if (trailing?.name === 'ListItemButton')
+            requiredAs.push('div');
+        if (['Checkbox', 'Radio', 'Switch'].includes(trailing.name))
+            requiredAs.push('label');
+    }
+    if (requiredAs.length === 1) {
+        As = requiredAs[0];
+    }
+    const requiredAsError = logError(requiredAs.length > 1, `ListItem: Multiple required elements detected. Using ${As} as the element type.`);
+    if (requiredAsError)
+        As = requiredAs[0];
+    if (!As && 'onClick' in props)
+        As = 'button';
+    const actionable = ('onClick' in props || 'href' in props) && !disabled && !readOnly;
+    return (jsx(As, { ...props, "aria-disabled": disabled || undefined, "aria-invalid": invalid || undefined, css: style, "data-action": actionable || undefined, "data-active": active || undefined, "data-component": leading?.name || undefined, "data-list-item": true, "data-readonly": readOnly || undefined, role: as !== 'button' && 'onClick' in props ? 'button' : undefined, children: jsxs("span", { "data-inner": true, children: [leading && (jsx("span", { "data-component": leading.name, "data-leading": true, children: leading.child })), jsxs("span", { "data-item-label": true, children: [jsx("span", { "data-text": true, children: label }), subText && jsx("span", { "data-sub-text": true, children: subText })] }), trailing && (jsx("span", { "data-component": trailing.name, "data-trailing": true, children: trailing.child }))] }) }));
+}
+ListItem.bspkName = 'ListItem';
+/** A button that can be used as a trailing element in a ListItem. */
+// eslint-disable-next-line react/no-multi-comp
+function ListItemButton({ label, icon, ...buttonProps }) {
+    return jsx(Button, { icon: icon, label: label, showLabel: false, ...buttonProps, size: "large", variant: "tertiary" });
+}
+ListItemButton.bspkName = 'ListItemButton';
+ListItem.Button = ListItemButton;
+const style = css `
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 var(--spacing-sizing-02);
+    background: unset;
+    border: unset;
+    margin: unset;
+    text-decoration: unset;
+    user-select: none;
+    color: var(--foreground-neutral-on-surface);
+
+    &:is(a),
+    &:is(button),
+    &[onclick],
+    &[role='button'] {
+        cursor: pointer;
+    }
+
+    [data-inner] {
+        height: 100%;
+        width: 100%;
+        min-height: var(--spacing-sizing-09);
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-sizing-03);
+        padding: var(--spacing-sizing-02) 0;
+        justify-items: stretch;
+
+        & > * {
+            min-height: 100%;
+            width: fit-content;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            flex: 1;
+            flex-shrink: 0;
+
+            svg {
+                width: 24px;
+                max-width: unset;
+            }
+        }
+    }
+
+    /* &:has(+ [data-list-item]) {
+    [data-inner] {
+      border-bottom: 1px solid var(--stroke-neutral-low);
+    }
+  } */
+
+    &[data-action] {
+        [data-pseudo='focus'] &,
+        &:focus-visible,
+        &:has(*:focus-visible) {
+            //outline: 2px solid var(--stroke-neutral-focus);
+            box-shadow: inset var(--stroke-neutral-focus) 0 0 0 2px;
+
+            [data-inner] {
+                border-color: transparent;
+            }
+        }
+    }
+
+    [data-component='Img'] > img {
+        height: 36px;
+        width: 36px;
+        max-width: unset;
+    }
+
+    &:is(label) {
+        [data-inner] {
+            border-bottom: 0;
+            gap: var(--spacing-sizing-02);
+        }
+    }
+
+    [data-item-label] {
+        flex: 100%;
+        text-align: left;
+
+        [data-text] {
+            font: var(--labels-base);
+            color: var(--foreground-neutral-on-surface);
+        }
+
+        [data-sub-text] {
+            font: var(--body-small);
+            color: var(--foreground-neutral-on-surface-variant-01);
+        }
+    }
+
+    &[aria-disabled] {
+        [data-text],
+        [data-sub-text] {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    &[data-action] {
+        [data-pseudo='hover'] &,
+        &:hover {
+            background-color: var(--interactions-neutral-hover-opacity);
+        }
+
+        [data-pseudo='active'] &,
+        &[data-active],
+        &:active {
+            background-color: var(--interactions-neutral-press-opacity);
+        }
+    }
+`;
+function useChildren(leadingProp, trailingProp) {
+    const { logError } = useErrorLogger();
+    let leading = getChildrenElements(leadingProp)[0] || null;
+    const trailingElements = getChildrenElements(trailingProp);
+    let trailing = trailingElements[0] || null;
+    if (leading) {
+        const valid = LEADING_COMPONENTS.includes(leading.name);
+        if (!valid)
+            leading = null;
+        logError(!valid, `ListItem - Leading child is invalid. Must be one of:${LEADING_COMPONENTS} Elements: ${leading?.name || 'None'}`);
+    }
+    if (trailing) {
+        const valid = TRAILING_COMPONENTS.includes(trailing.name);
+        if (!valid)
+            trailing = null;
+        logError(!valid, `ListItem - Trailing child is invalid. Must be one of:${TRAILING_COMPONENTS} Elements: ${trailing?.name || 'None'}`);
+    }
+    return {
+        leading,
+        trailing,
+    };
+}
+
+export { LEADING_COMPONENTS, ListItem, TRAILING_COMPONENTS, style };
+//# sourceMappingURL=ListItem.js.map

package/ListItem.js.map

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

package/Menu.d.ts

@@ -0,0 +1,86 @@
+import { ComponentProps, MouseEvent as ReactMouseEvent } from 'react';
+import { ListItem } from './ListItem';
+import { CommonProps, ElementProps } from './';
+export declare const MIN_ITEM_COUNT = 3;
+export declare const MAX_ITEM_COUNT = 10;
+export declare function menuItemId(menuId: string, index: number): string;
+/** The props for the renderListItem function. Useful for customizing menu list items. */
+export type RenderListItemParams<M extends MenuItem> = Pick<MenuProps<M>, 'activeIndex' | 'isMulti' | 'selectedValues'> & {
+    index: number;
+    item: M;
+    menuId: string;
+    selected: boolean;
+    itemId?: string;
+};
+/** The props for the menu items. */
+export type MenuItem = CommonProps<'disabled'> & {
+    /** The content to display in the menu item. */
+    label: string;
+    /** The value of the menu item. */
+    value: string;
+    /** The unique id of the menu item. */
+    id?: string;
+};
+export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled' | 'id'> & {
+    /**
+     * The number of items to display in the menu
+     *
+     * @default 5
+     * @minimum 3
+     * @maximum 10
+     */
+    itemCount?: number;
+    /**
+     * Content to display in the menu.
+     *
+     * @type MenuItems
+     */
+    items?: Item[];
+    /** A ref to the inner div element. */
+    innerRef?: (node: HTMLElement | null) => void;
+    /**
+     * Message to display when no results are found
+     *
+     * @type multiline
+     */
+    noResultsMessage?: string;
+    /** The index of the currently highlighted item. */
+    activeIndex?: number;
+    /** The values of the selected items */
+    selectedValues?: string[];
+    /**
+     * A function which given data about the list item returns additional list item props used to render the list items.
+     *
+     * @type (props: RenderListItemParams) => ComponentProps<typeof ListItem>;
+     * @param {RenderListItemParams} props
+     * @returns {ComponentProps<typeof ListItem>}
+     */
+    renderListItem?: (props: RenderListItemParams<Item>) => Partial<ComponentProps<typeof ListItem>>;
+    /**
+     * Whether the menu allows multiple selections.
+     *
+     * @default false
+     */
+    isMulti?: boolean;
+    /**
+     * The function to call when the selected values change.
+     *
+     * @type (selectedValues: String[], event: ChangeEvent) => void
+     * @param {string[]} selectedValues
+     * @param {ChangeEvent} event
+     * @returns {void}
+     */
+    onChange?: (selectedValues: string[], event?: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+/**
+ * A container housing a simple list of options presented to the user to select one option at a time.
+ *
+ * @name Menu
+ */
+declare function Menu<Item extends MenuItem = MenuItem>({ itemCount: itemCountProp, items: itemsProp, noResultsMessage, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, renderListItem, isMulti, ...props }: ElementProps<MenuProps<Item>, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Menu {
+    var bspkName: string;
+}
+export { Menu };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Menu.js

@@ -0,0 +1,98 @@
+import { css, createElement } from '@emotion/react';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useMemo } from 'react';
+import { Checkbox } from './Checkbox.js';
+import { ListItem } from './ListItem.js';
+import { Txt } from './Txt.js';
+import { useId } from './hooks/useId.js';
+
+const MIN_ITEM_COUNT = 3;
+const MAX_ITEM_COUNT = 10;
+function menuItemId(menuId, index) {
+    return `menu-${menuId}-item-${index}`;
+}
+/**
+ * A container housing a simple list of options presented to the user to select one option at a time.
+ *
+ * @name Menu
+ */
+function Menu({ itemCount: itemCountProp = 5, items: itemsProp = [], noResultsMessage, innerRef, onChange, activeIndex, selectedValues = [], disabled, id: idProp, renderListItem, isMulti, ...props }) {
+    const menuId = useId(idProp);
+    const items = Array.isArray(itemsProp) ? itemsProp : [];
+    const itemCount = useMemo(() => 
+    // Ensure itemCount is within the range of items.length
+    Math.min(items.length, 
+    // pin itemCountProp to a range of 3 to 10
+    Math.max(MIN_ITEM_COUNT, Math.min(itemCountProp, MAX_ITEM_COUNT))), [itemCountProp, items.length]);
+    return (jsx("div", { ...props, css: style, "data-disabled": disabled || undefined, "data-item-count": itemCount || undefined, "data-menu": "", "data-no-items": !items.length || undefined, id: menuId, ref: innerRef, role: "listbox", style: { ...props.style, '--item-count': itemCount }, children: items.length ? (items.map((item, index) => {
+            const itemId = item.id || menuItemId(menuId, index);
+            const selected = Array.isArray(selectedValues) && selectedValues.includes(item.value);
+            const renderProps = renderListItem?.({
+                activeIndex,
+                index,
+                item,
+                selectedValues,
+                isMulti,
+                menuId: menuId || '',
+                selected,
+                itemId,
+            });
+            return (createElement(ListItem, { ...renderProps, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-posinset": index + 1, "aria-selected": selected || undefined, as: "button", "data-menu-item": true, "data-selected": selected || undefined, disabled: item.disabled || undefined, id: itemId, key: itemId, label: renderProps?.label?.toString() || item.label?.toString(), onClick: (event) => {
+                    if (renderProps)
+                        renderProps?.onClick?.(event);
+                    if (onChange) {
+                        if (!isMulti) {
+                            onChange?.([item.value], event);
+                            return;
+                        }
+                        onChange(selected
+                            ? selectedValues.filter((value) => value !== item.value)
+                            : [...selectedValues, item.value], event);
+                    }
+                }, role: "option", tabIndex: -1, trailing: isMulti ? (jsx(Checkbox, { "aria-label": item.label, checked: selected, name: item.value, onChange: (checked) => {
+                        onChange?.(checked
+                            ? selectedValues.filter((value) => value !== item.value)
+                            : [...selectedValues, item.value]);
+                    }, value: item.value })) : (renderProps?.trailing) }));
+        })) : (jsxs(Fragment, { children: [jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage })] })) }));
+}
+Menu.bspkName = 'Menu';
+const style = css `
+    /** 
+  --item-count is set via inline style. :)
+   */
+
+    width: 332px;
+    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);
+    display: flex;
+    flex-direction: column;
+
+    --item-size: var(--spacing-sizing-12);
+
+    &[data-floating] {
+        z-index: var(--z-index-dropdown);
+    }
+
+    &[data-item-count] {
+        height: calc(var(--item-count) * var(--item-size));
+        overflow-y: scroll;
+    }
+
+    &[data-no-items] {
+        padding: var(--spacing-sizing-08) var(--spacing-sizing-04);
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-sizing-03);
+    }
+
+    [data-list-item] {
+        min-height: var(--item-size);
+        height: var(--item-size);
+    }
+`;
+
+export { MAX_ITEM_COUNT, MIN_ITEM_COUNT, Menu, menuItemId, style };
+//# sourceMappingURL=Menu.js.map

package/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["src/Menu.tsx"],"sourcesContent":[null],"names":["_jsx","_createElement","_jsxs","_Fragment"],"mappings":"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"}

package/MenuButton.d.ts

@@ -0,0 +1,16 @@
+import { ElementType } from 'react';
+import { ButtonProps } from './Button';
+import { ElementProps } from '.';
+export type MenuButtonProps<As extends ElementType> = Pick<ButtonProps<As>, 'as' | 'onClick'>;
+/**
+ * Utility component used within top navigation.
+ *
+ * @name MenuButton
+ */
+declare function MenuButton<As extends ElementType = 'button'>({ as, ...props }: ElementProps<MenuButtonProps<As>, As>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace MenuButton {
+    var bspkName: string;
+}
+export { MenuButton };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/MenuButton.js

@@ -0,0 +1,30 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { SvgMenu } from '@bspk/icons/Menu';
+import { css } from '@emotion/react';
+
+/**
+ * Utility component used within top navigation.
+ *
+ * @name MenuButton
+ */
+function MenuButton({ as, ...props }) {
+    return (jsx("button", { ...props, css: style, children: jsx(SvgMenu, {}) }));
+}
+MenuButton.bspkName = 'MenuButton';
+const style = css `
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    height: 48px;
+    width: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--spacing-sizing-01);
+    color: var(--foreground-neutral-on-surface-variant-01);
+`;
+
+export { MenuButton, style };
+//# sourceMappingURL=MenuButton.js.map

package/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","sources":["src/MenuButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAUA;;;;AAIG;AACH,SAAS,UAAU,CAAoC,EAAE,EAAE,EAAE,GAAG,KAAK,EAAyC,EAAA;AAG1G,IAAA,QACIA,GAAA,CAAA,QAAA,EAAA,EAAA,GAAY,KAAK,EAAE,GAAG,EAAE,KAAK,EAAA,QAAA,EACzBA,GAAC,CAAA,OAAO,EAAG,EAAA,CAAA,EAAA,CACN,EACX;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAI5B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;"}

package/Modal.d.ts

@@ -0,0 +1,31 @@
+import { DialogProps } from './Dialog';
+export type ModalProps = DialogProps & {
+    /**
+     * Modal header.
+     *
+     * @required
+     */
+    header: string;
+    /**
+     * Modal description.
+     *
+     * @required
+     */
+    description: string;
+};
+/**
+ * Modals display important information that users need to acknowledge. They appear over the interface and block further
+ * interactions until an action is selected. Modal is a wrapper around the Dialog component that provides a header and
+ * footer for the dialog.
+ *
+ * TODO: Add support for custom header and footer
+ *
+ * @name Modal
+ */
+declare function Modal({ header, description, children, id: idProp, ...dialogProps }: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Modal {
+    var bspkName: string;
+}
+export { Modal };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Modal.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { SvgClose } from '@bspk/icons/Close';
+import { css } from '@emotion/react';
+import { useMemo } from 'react';
+import { Button } from './Button.js';
+import { Dialog } from './Dialog.js';
+import { Txt } from './Txt.js';
+import { useId } from './hooks/useId.js';
+import { srOnly } from './utils/srOnly.js';
+
+/**
+ * Modals display important information that users need to acknowledge. They appear over the interface and block further
+ * interactions until an action is selected. Modal is a wrapper around the Dialog component that provides a header and
+ * footer for the dialog.
+ *
+ * TODO: Add support for custom header and footer
+ *
+ * @name Modal
+ */
+function Modal({ 
+//
+header, description, children, id: idProp, ...dialogProps }) {
+    const id = useId(idProp);
+    const ids = useMemo(() => ({
+        description: `dialog-dialog-${id}-description`,
+        title: `dialog-dialog-${id}-title`,
+    }), [id]);
+    return (jsx(Dialog, { ...dialogProps, "aria-describedby": ids.description, "aria-labelledby": ids.title, children: jsxs("div", { css: style, "data-modal-body": true, children: [jsxs("header", { children: [jsx(Txt, { as: "div", "data-dialog-title": true, id: ids.title, variant: "heading-h4", children: header }), jsx(Button, { icon: jsx(SvgClose, {}), label: "close", onClick: dialogProps.onClose, showLabel: false, variant: "tertiary" })] }), jsxs("main", { children: [jsx("p", { ...srOnly(children), "data-dialog-description": true, id: ids.description, children: description }), children] })] }) }));
+}
+Modal.bspkName = 'Modal';
+const style = css `
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    gap: var(--spacing-sizing-02);
+    padding: var(--spacing-sizing-04);
+
+    > header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--spacing-sizing-04);
+    }
+
+    main {
+        overflow: auto;
+        flex: 1;
+    }
+`;
+
+export { Modal, style };
+//# sourceMappingURL=Modal.js.map

package/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["src/Modal.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAyBA;;;;;;;;AAQG;AACH,SAAS,KAAK,CAAC;AACX;AACA,MAAM,EACN,WAAW,EACX,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,GAAG,WAAW,EACL,EAAA;AACT,IAAA,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAEzB,IAAA,MAAM,GAAG,GAAG,OAAO,CACf,OAAO;QACH,WAAW,EAAE,CAAiB,cAAA,EAAA,EAAE,CAAc,YAAA,CAAA;QAC9C,KAAK,EAAE,CAAiB,cAAA,EAAA,EAAE,CAAQ,MAAA,CAAA;AACrC,KAAA,CAAC,EACF,CAAC,EAAE,CAAC,CACP,CAAC;AAEF,IAAA,QACIA,GAAC,CAAA,MAAM,OAAK,WAAW,EAAA,kBAAA,EAAoB,GAAG,CAAC,WAAW,qBAAmB,GAAG,CAAC,KAAK,EAClF,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,sCACXA,IACI,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,GAAG,EAAC,EAAA,EAAE,EAAC,KAAK,EAAA,mBAAA,EAAA,IAAA,EAAmB,EAAE,EAAE,GAAG,CAAC,KAAK,EAAE,OAAO,EAAC,YAAY,YAC9D,MAAM,EAAA,CACL,EACNA,GAAC,CAAA,MAAM,IACH,IAAI,EAAEA,GAAC,CAAA,QAAQ,KAAG,EAClB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,SAAS,EAAE,KAAK,EAChB,OAAO,EAAC,UAAU,EACpB,CAAA,CAAA,EAAA,CACG,EACTC,IACI,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAA,GAAA,EAAA,EAAA,GAAO,MAAM,CAAC,QAAQ,CAAC,EAA0B,yBAAA,EAAA,IAAA,EAAA,EAAE,EAAE,GAAG,CAAC,WAAW,EAC/D,QAAA,EAAA,WAAW,GACZ,EACH,QAAQ,IACN,CACL,EAAA,CAAA,EAAA,CACD,EACX;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAIlB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/MultiSelection.d.ts

@@ -0,0 +1,20 @@
+export type MultiSelectionProps = {
+    /**
+     * The content of the multi selection.
+     *
+     * @required
+     */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name MultiSelection
+ */
+declare function MultiSelection({ children }: MultiSelectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace MultiSelection {
+    var bspkName: string;
+}
+export { MultiSelection };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/MultiSelection.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name MultiSelection
+ */
+function MultiSelection({ children }) {
+    return (jsx("div", { css: style, "data-multi-selection": true, children: children }));
+}
+MultiSelection.bspkName = 'MultiSelection';
+const style = css `
+    display: flex;
+`;
+
+export { MultiSelection, style };
+//# sourceMappingURL=MultiSelection.js.map

package/MultiSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelection.js","sources":["src/MultiSelection.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAuB,EAAA;IACrD,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,sBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAIpC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/NavigationRail.d.ts

@@ -0,0 +1,20 @@
+export type NavigationRailProps = {
+    /**
+     * The content of the navigation rail.
+     *
+     * @required
+     */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name NavigationRail
+ */
+declare function NavigationRail({ children }: NavigationRailProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace NavigationRail {
+    var bspkName: string;
+}
+export { NavigationRail };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/NavigationRail.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name NavigationRail
+ */
+function NavigationRail({ children }) {
+    return (jsx("div", { css: style, "data-navigation-rail": true, children: children }));
+}
+NavigationRail.bspkName = 'NavigationRail';
+const style = css `
+    display: flex;
+`;
+
+export { NavigationRail, style };
+//# sourceMappingURL=NavigationRail.js.map

package/NavigationRail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRail.js","sources":["src/NavigationRail.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAuB,EAAA;IACrD,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,sBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAIpC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/NumberField.d.ts

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