@bspk/ui 1.0.0

package/NumberField.js

@@ -0,0 +1,20 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { FormField } from './FormField.js';
+import { NumberInput } from './NumberInput.js';
+
+/**
+ * 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
+ */
+function NumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }) {
+    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
+    return (jsx(FormField, { controlId: controlId, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => jsx(NumberInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId }) }));
+}
+NumberField.bspkName = 'NumberField';
+
+export { NumberField };
+//# sourceMappingURL=NumberField.js.map

package/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sources":["src/NumberField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AASA;;;;;;;AAOG;AACH,SAAS,WAAW,CAAC,EACjB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACE,EAAA;AACf,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,gBAAgB,KAAK,SAAS,CAAC;IAErG,QACIA,IAAC,SAAS,EAAA,EACN,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,KAAKA,GAAC,CAAA,WAAW,EAAK,EAAA,GAAA,UAAU,KAAM,UAAU,EAAA,YAAA,EAAc,KAAK,EAAE,EAAE,EAAE,SAAS,EAAA,CAAI,EAC1F,CAAA,EACd;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa;;;;"}

package/NumberInput.d.ts

@@ -0,0 +1,34 @@
+import { CommonProps } from '.';
+export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & {
+    /**
+     * The value of the control.
+     *
+     * @required
+     */
+    value?: number;
+    /** Callback when the value changes. */
+    onChange: (value: number) => void;
+    /**
+     * If the value should be centered between the up & down buttons.
+     *
+     * @default false
+     */
+    centered?: boolean;
+    /** Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is accepted. */
+    max?: number;
+    /** Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is accepted. */
+    min?: number;
+};
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * @name NumberInput
+ */
+declare function NumberInput({ value, onChange, centered, size, disabled, readOnly, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }: NumberInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace NumberInput {
+    var bspkName: string;
+}
+export { NumberInput };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/NumberInput.js

@@ -0,0 +1,188 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { SvgAdd } from '@bspk/icons/Add';
+import { SvgRemove } from '@bspk/icons/Remove';
+import { css } from '@emotion/react';
+import { useId } from './hooks/useId.js';
+import { useLongPress } from './hooks/useLongPress.js';
+
+function isNumber(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return undefined;
+    const num = Number(value);
+    return isNaN(num) ? undefined : num;
+}
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * @name NumberInput
+ */
+function NumberInput({ 
+//
+value = 1, onChange, centered = false, size = 'medium', disabled = false, readOnly = false, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }) {
+    const inputId = useId(inputIdProp);
+    const max = isNumber(maxProp);
+    const min = isNumber(minProp);
+    const fix = (next = value) => {
+        let fixValue = next;
+        if (typeof min !== 'undefined' && next < min)
+            fixValue = min;
+        if (typeof max !== 'undefined' && next > max)
+            fixValue = max;
+        if (fixValue !== value)
+            onChange(fixValue);
+    };
+    const buttonProps = {
+        min,
+        max,
+        disabled,
+        readOnly,
+        onChange: fix,
+        value,
+    };
+    return (jsxs("div", { "aria-valuemax": max || undefined, "aria-valuemin": min || undefined, css: style, "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [!!centered && jsx(IncrementButton, { ...buttonProps, increment: -1 }), jsx("input", { "aria-label": ariaLabel, disabled: disabled, id: inputId, name: name, onBlur: () => {
+                    fix();
+                }, onChange: (event) => {
+                    onChange(event.target.value);
+                }, readOnly: readOnly, type: "number", value: value }), !centered && (jsxs(Fragment, { children: [jsx("div", { "aria-hidden": true, "data-divider": true }), jsx(IncrementButton, { ...buttonProps, increment: -1 })] })), jsx(IncrementButton, { ...buttonProps, increment: 1 })] }));
+}
+// eslint-disable-next-line react/no-multi-comp
+function IncrementButton({ increment, min, max, readOnly, disabled, onChange, value, }) {
+    const add = increment === 1;
+    const prevValue = isNumber(value) || 0;
+    const isDisabled = readOnly ||
+        disabled ||
+        (typeof min !== 'undefined' && prevValue + increment < min) ||
+        (typeof max !== 'undefined' && prevValue + increment > max);
+    const longPress = useLongPress((pressCounter) => onChange(prevValue + increment * pressCounter), 2000, isDisabled);
+    return (jsx("button", { "aria-label": `${add ? 'Increase' : 'Decrease'} value`, "data-increment": increment, disabled: isDisabled, type: "button", ...longPress.buttonProps, children: add ? jsx(SvgAdd, {}) : jsx(SvgRemove, {}) }));
+}
+NumberInput.bspkName = 'NumberInput';
+const style = css `
+    // medium
+    --font: var(--body-base);
+    --height: var(--spacing-sizing-10);
+    --svg-width: var(--spacing-sizing-05);
+    --color: var(--foreground-neutral-on-surface);
+    width: 100%;
+
+    display: flex;
+    flex-flow: row nowrap;
+    font: var(--font);
+    height: var(--height);
+    border: 1px solid var(--stroke-neutral-base);
+    border-radius: var(--radius-small);
+    background: var(--surface-neutral-t1-base);
+
+    &:focus-within {
+        border-color: var(--stroke-brand-primary);
+        outline: 1px solid var(--stroke-brand-primary);
+    }
+
+    [data-divider] {
+        width: 4px;
+        border-right: 1px solid var(--stroke-neutral-base);
+        // account for border - 3(margin)  * 2 + 2(border)
+        height: calc(var(--height) - 8px);
+        margin: 3px 0;
+    }
+
+    button {
+        min-width: var(--height);
+        background: none;
+        border: none;
+        cursor: pointer;
+        font: var(--font);
+        svg {
+            width: var(--svg-width);
+        }
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--color);
+
+        &:disabled {
+            cursor: not-allowed;
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    input {
+        color: var(--color);
+        min-width: 0;
+        display: block;
+        font: var(--font);
+        text-align: center;
+        padding: 0 var(--spacing-sizing-03);
+        background: transparent;
+        border: none;
+
+        &:focus {
+            outline: none;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &[type='number'] {
+            appearance: textfield;
+            -moz-appearance: textfield;
+        }
+    }
+
+    &:not([data-disabled], [data-readonly]) {
+        input,
+        button:not(:disabled) {
+            &:hover {
+                background-color: var(--interactions-hover-opacity);
+            }
+
+            &:active {
+                background-color: var(--interactions-press-opacity);
+            }
+        }
+
+        &[data-invalid] {
+            border-color: var(--status-error);
+            outline-color: var(--status-error);
+        }
+    }
+
+    &[data-disabled],
+    &[data-readonly] {
+        --color: var(--foreground-neutral-disabled-on-surface);
+        border-color: var(--stroke-neutral-disabled-light);
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        [data-divider] {
+            border-color: var(--stroke-neutral-disabled-light);
+        }
+    }
+
+    &[data-readonly] {
+        input {
+            color: var(--foreground-neutral-on-surface) !important;
+        }
+    }
+
+    &[data-size='small'] {
+        --font: var(--body-small);
+        --height: var(--spacing-sizing-08);
+    }
+
+    &[data-size='large'] {
+        --font: var(--body-large);
+        --height: var(--spacing-sizing-12);
+        --svg-width: var(--spacing-sizing-06);
+    }
+`;
+
+export { NumberInput, style };
+//# sourceMappingURL=NumberInput.js.map

package/NumberInput.js.map

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

package/OTPInput.d.ts

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

package/OTPInput.js

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

package/OTPInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.js","sources":["src/OTPInput.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAiB,EAAA;IACzC,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,gBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAIxB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/PageControl.d.ts

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

package/PageControl.js

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

package/PageControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageControl.js","sources":["src/PageControl.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAoB,EAAA;IAC/C,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,mBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAI9B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/PasswordInput.d.ts

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

package/PasswordInput.js

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

package/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sources":["src/PasswordInput.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAsB,EAAA;IACnD,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,qBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAIlC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/PhoneNumberInput.d.ts

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

package/PhoneNumberInput.js

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

package/PhoneNumberInput.js.map

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

package/Popover.d.ts

@@ -0,0 +1,44 @@
+import { ReactElement } from 'react';
+import { Placement } from './hooks/useFloating';
+import { CallToActionButton, CommonProps } from './';
+export type PopoverProps = CommonProps<'disabled'> & {
+    /**
+     * The placement of the popover.
+     *
+     * @default top
+     */
+    placement?: Placement;
+    /** The popover header. */
+    header: string;
+    /**
+     * The content of the popover.
+     *
+     * @type multiline
+     */
+    content: string;
+    /**
+     * The call to action button properties.
+     *
+     * @type CallToActionButton
+     */
+    callToAction?: CallToActionButton;
+    /**
+     * A single element that will trigger the popover when clicked.
+     *
+     * @type ReactElement
+     * @required
+     */
+    children: ReactElement;
+};
+/**
+ * Brief message that provide additional guidance and helps users perform an action if needed.
+ *
+ * @name Popover
+ */
+declare function Popover({ placement, header, content, callToAction, children, disabled }: PopoverProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Popover {
+    var bspkName: string;
+}
+export { Popover };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Popover.js

@@ -0,0 +1,152 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { SvgClose } from '@bspk/icons/Close';
+import { css } from '@emotion/react';
+import { useId, useState, useRef, useMemo, cloneElement } from 'react';
+import { Button } from './Button.js';
+import { Portal } from './Portal.js';
+import { Txt } from './Txt.js';
+import { useFloating } from './hooks/useFloating.js';
+import { useOutsideClick } from './hooks/useOutsideClick.js';
+
+/**
+ * Brief message that provide additional guidance and helps users perform an action if needed.
+ *
+ * @name Popover
+ */
+function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }) {
+    const id = useId();
+    const [show, setShow] = useState(false);
+    const arrowRef = useRef(null);
+    const { elements, floatingStyles, middlewareData } = useFloating({
+        placement: placement,
+        strategy: 'absolute',
+        offsetOptions: 22,
+        arrowRef,
+        hide: !show,
+    });
+    useOutsideClick([elements.floating], () => setShow(false));
+    const child = useMemo(() => !disabled &&
+        children &&
+        cloneElement(children, {
+            onClick: () => setShow((prev) => !prev),
+            'aria-describedby': id,
+        }), [children, disabled, id]);
+    return disabled ? (children) : (jsxs(Fragment, { children: [child, jsx(Portal, { children: jsxs("div", { css: style, "data-placement": middlewareData?.offset?.placement, "data-popover": "", id: id, ref: (node) => {
+                        elements.setFloating(node);
+                        elements.setTrigger(document.querySelector(`[aria-describedby="${id}"]`));
+                    }, style: floatingStyles, children: [jsxs("header", { children: [jsx(Txt, { variant: "heading-h6", children: header }), jsx("button", { "aria-label": "Close", onClick: () => setShow(false), children: jsx(SvgClose, {}) })] }), jsxs("div", { "data-content": true, children: [jsx(Txt, { as: "div", variant: "body-small", children: content }), callToAction?.label && callToAction?.onClick && (jsx(Button, { "data-call-to-action": true, label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "secondary" }))] }), jsx("div", { "data-arrow": true, ref: (node) => {
+                                arrowRef.current = node;
+                            }, style: {
+                                left: `${middlewareData?.arrow?.x}px`,
+                                top: `${middlewareData?.arrow?.y}px`,
+                            } })] }) })] }));
+}
+Popover.bspkName = 'Popover';
+const style = css `
+    position: absolute;
+    z-index: var(--z-index-tooltip-popover);
+    background: var(--surface-neutral-t1-base);
+    box-shadow: var(--drop-shadow-float);
+    padding: var(--spacing-sizing-04);
+    width: 300px;
+    border-radius: var(--radius-large);
+    display: flex;
+    flex-direction: column;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--spacing-sizing-02);
+        gap: var(--spacing-sizing-04);
+
+        button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0;
+            margin: 0 0 0 auto;
+            color: var(--foreground-neutral-on-surface-variant-01);
+            height: var(--spacing-sizing-06);
+            width: var(--spacing-sizing-06);
+
+            svg {
+                width: var(--spacing-sizing-06);
+                height: var(--spacing-sizing-06);
+            }
+        }
+    }
+
+    --arrow-size: var(--spacing-sizing-02);
+    --arrow-offset: calc(var(--arrow-size) * -2);
+    --arrow-background-color: var(--surface-neutral-t1-base);
+
+    [data-arrow] {
+        z-index: 1;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
+        border-color: transparent transparent transparent transparent;
+    }
+
+    &[data-placement^='top'] {
+        [data-arrow] {
+            bottom: var(--arrow-offset);
+            border-top-color: var(--arrow-background-color);
+            filter: drop-shadow(0 2px 1px var(--shadow-10));
+        }
+    }
+    &[data-placement^='right'] {
+        [data-arrow] {
+            margin-left: calc(var(--arrow-offset) * 2);
+            border-right-color: var(--arrow-background-color);
+            filter: drop-shadow(-2px 0 1px var(--shadow-10));
+        }
+    }
+    &[data-placement^='bottom'] {
+        [data-arrow] {
+            top: var(--arrow-offset);
+            border-bottom-color: var(--arrow-background-color);
+            filter: drop-shadow(0 -2px 1px var(--shadow-10));
+        }
+    }
+    &[data-placement='bottom-start'] {
+        [data-arrow] {
+            margin-left: var(--arrow-offset);
+        }
+    }
+    &[data-placement='bottom-end'] {
+        [data-arrow] {
+            margin-left: calc(var(--arrow-offset) * -1);
+        }
+    }
+    &[data-placement^='left'] {
+        [data-arrow] {
+            right: var(--arrow-offset);
+            border-left-color: var(--arrow-background-color);
+            filter: drop-shadow(2px 0 1px var(--shadow-10));
+        }
+    }
+
+    [data-content] {
+        gap: var(--spacing-sizing-04);
+        display: flex;
+        flex-direction: column;
+    }
+
+    [data-call-to-action] {
+        margin: 0 0 0 auto;
+        /* background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0 var(--spacing-sizing-03);
+    height: var(--spacing-sizing-12);
+    font: var(--labels-small);
+    color: var(--foreground-brand-primary); */
+    }
+`;
+
+export { Popover, style };
+//# sourceMappingURL=Popover.js.map

package/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["src/Popover.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AA0CA;;;;AAIG;AACH,SAAS,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAgB,EAAA;AAC3G,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACxC,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC;AAC7D,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,aAAa,EAAE,EAAE;QACjB,QAAQ;QACR,IAAI,EAAE,CAAC,IAAI;AACd,KAAA,CAAC,CAAC;AAEH,IAAA,eAAe,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3D,MAAM,KAAK,GAAG,OAAO,CACjB,MACI,CAAC,QAAQ;QACT,QAAQ;QACR,YAAY,CAAC,QAAQ,EAAE;AACnB,YAAA,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;AACvC,YAAA,kBAAkB,EAAE,EAAE;SACzB,CAAC,EACN,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC3B,CAAC;AAEF,IAAA,OAAO,QAAQ,IACX,QAAQ,KAERA,IACK,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,KAAK,EACNC,GAAC,CAAA,MAAM,cACHF,IACI,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,oBACM,cAAc,EAAE,MAAM,EAAE,SAAS,kBACpC,EAAE,EACf,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,KAAI;AACV,wBAAA,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AAC3B,wBAAA,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAc,CAAA,mBAAA,EAAsB,EAAE,CAAA,EAAA,CAAI,CAAC,CAAC,CAAC;AAC3F,qBAAC,EACD,KAAK,EAAE,cAAc,EAErB,QAAA,EAAA,CAAAA,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,CACIE,IAAC,GAAG,EAAA,EAAC,OAAO,EAAC,YAAY,YAAE,MAAM,EAAA,CAAO,EACxCA,GAAmB,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,OAAO,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EACpD,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAG,EAAA,CAAA,EAAA,CACP,IACJ,EACTF,IAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CACIE,IAAC,GAAG,EAAA,EAAC,EAAE,EAAC,KAAK,EAAC,OAAO,EAAC,YAAY,EAC7B,QAAA,EAAA,OAAO,GACN,EACL,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,KACzCA,GAAA,CAAC,MAAM,EAEH,EAAA,qBAAA,EAAA,IAAA,EAAA,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,GACrB,CACL,CAAA,EAAA,CACC,EACNA,GAEI,CAAA,KAAA,EAAA,EAAA,YAAA,EAAA,IAAA,EAAA,GAAG,EAAE,CAAC,IAAI,KAAI;AACV,gCAAA,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;6BAC3B,EACD,KAAK,EAAE;AACH,gCAAA,IAAI,EAAE,CAAG,EAAA,cAAc,EAAE,KAAK,EAAE,CAAC,CAAI,EAAA,CAAA;AACrC,gCAAA,GAAG,EAAE,CAAG,EAAA,cAAc,EAAE,KAAK,EAAE,CAAC,CAAI,EAAA,CAAA;AACvC,6BAAA,EAAA,CACH,CACA,EAAA,CAAA,EAAA,CACD,CACV,EAAA,CAAA,CACN,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAItB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/Portal.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type PortalProps = {
+    /**
+     * The content to render in the portal.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /** The container to render the portal in. */
+    container?: HTMLElement;
+};
+/**
+ * Utility component to render children in the portals container provided by the BaseProvider.
+ *
+ * Initial SRR is supported.
+ *
+ * @name Portal
+ */
+declare function Portal({ children, container }: PortalProps): import("react").ReactPortal | null;
+declare namespace Portal {
+    var bspkName: string;
+}
+export { Portal };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */