@bspk/ui 1.2.0 → 1.3.1

package/dist/components/PasswordField/PasswordField.js

@@ -25,9 +25,9 @@ import { PasswordInput } from '../PasswordInput';
  *     }
  *
  * @name PasswordField
- * @phase QA
+ * @phase UXReview
  */
-export function PasswordField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...inputProps }) {
-    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, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId, invalid: invalid, required: required, value: inputProps.value ?? '' })) }));
+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 ?? '' })) }));
 }
 //# sourceMappingURL=PasswordField.js.map

package/dist/components/PasswordField/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../../../src/components/PasswordField/PasswordField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAsB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,SAAS,EACT,YAAY,EACZ,UAAU,EACV,OAAO,EACP,KAAK,EACL,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACI;IACjB,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,aAAa,OACN,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,EAAE,GAC/B,CACL,GACO,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../../../src/components/PasswordField/PasswordField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAsB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,SAAS,EACT,YAAY,EACZ,UAAU,EACV,OAAO,EACP,KAAK,EACL,aAAa,EACb,QAAQ,EACR,GAAG,kBAAkB,EACJ;IACjB,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,aAAa,OACN,kBAAkB,KAClB,UAAU,EACd,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,kBAAkB,CAAC,KAAK,IAAI,EAAE,GACvC,CACL,GACO,CACf,CAAC;AACN,CAAC"}

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -15,7 +15,7 @@ export type PasswordInputProps = Pick<TextInputProps, 'aria-describedby' | 'aria
  *     }
  *
  * @name PasswordInput
- * @phase QA
+ * @phase UXReview
  */
 export declare function PasswordInput({ disabled, readOnly, size, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, inputRef, name, onChange, required, value, containerRef, id, invalid, ...props }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PasswordInput/PasswordInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
 import './password-input.css.js';
+import { useState } from 'react';
 import { Button } from '../Button';
 import { TextInput } from '../TextInput';
 /**
@@ -17,7 +17,7 @@ import { TextInput } from '../TextInput';
  *     }
  *
  * @name PasswordInput
- * @phase QA
+ * @phase UXReview
  */
 export function PasswordInput({ disabled, readOnly, size = 'medium', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, inputRef, name, onChange, required, value, containerRef, id, invalid, ...props }) {
     const [isShowingPassword, setIsShowingPassword] = useState(false);

package/dist/components/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAqBnE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,EAAE,EACF,OAAO,EACP,GAAG,KAAK,EACS;IACjB,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,iBAAS,KAAK,eAAY,gBAAgB,YACtC,KAAC,SAAS,wBACY,eAAe,uBACd,gBAAgB,gBACvB,SAAS,EACrB,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EACH,CAAC,iBAAiB,IAAI,CAClB,4BACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClD,iBAAW,CAAC,CAAI,CACnB,CAAC,GACH,CACN,EAEL,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACV,CAAC,CAAC,aAA6B,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;YACtE,CAAC,EACD,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EACJ,CAAC,QAAQ;gBACT,CAAC,QAAQ,IAAI,CACT,KAAC,MAAM,IACH,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,EAC7C,KAAK,EAAE,KAAK,GACd,GACA,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAqBnE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,EAAE,EACF,OAAO,EACP,GAAG,KAAK,EACS;IACjB,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,iBAAS,KAAK,eAAY,gBAAgB,YACtC,KAAC,SAAS,wBACY,eAAe,uBACd,gBAAgB,gBACvB,SAAS,EACrB,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EACH,CAAC,iBAAiB,IAAI,CAClB,4BACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClD,iBAAW,CAAC,CAAI,CACnB,CAAC,GACH,CACN,EAEL,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACV,CAAC,CAAC,aAA6B,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;YACtE,CAAC,EACD,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EACJ,CAAC,QAAQ;gBACT,CAAC,QAAQ,IAAI,CACT,KAAC,MAAM,IACH,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,EAC7C,KAAK,EAAE,KAAK,GACd,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -1,8 +1,8 @@
+import './phone-number-input.scss';
 import { TextInputProps } from '-/components/TextInput';
 import { FormFieldControlProps } from '-/types/common';
 import { SupportedCountryCode } from '-/utils/countryCodes';
-import './phone-number-input.scss';
-export type PhoneNumberInputProps = FormFieldControlProps & Pick<TextInputProps, 'aria-label' | 'autoComplete' | 'disabled' | 'inputRef' | 'invalid' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'type' | 'value'> & {
+export type PhoneNumberInputProps = FormFieldControlProps & Pick<TextInputProps, 'aria-label' | 'disabled' | 'inputRef' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size' | 'value'> & {
     /**
      * The default country code to select when the component is rendered. If not provided, it will attempt to guess
      * based on the user's locale. If the guessed country code is not supported, it will default to 'US'. Based on
@@ -33,5 +33,5 @@ export type PhoneNumberInputProps = FormFieldControlProps & Pick<TextInputProps,
  * @name PhoneNumberInput
  * @phase UXReview
  */
-export declare function PhoneNumberInput({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...inputProps }: PhoneNumberInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneNumberInput({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, name, ...inputProps }: PhoneNumberInputProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -1,34 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './phone-number-input.css.js';
 import { SvgIcon } from '@bspk/icons/SvgIcon';
 import { AsYouType, getCountryCallingCode } from 'libphonenumber-js';
-import { useMemo, useState } from 'react';
-import { Divider } from '../Divider';
-import { ListItem } from '../ListItem';
-import { Listbox } from '../Listbox';
-import { Modal } from '../Modal';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { ListItemMenu } from '../ListItemMenu';
 import { TextInput } from '../TextInput';
-import { useCombobox } from '../../hooks/useCombobox';
+import { useId } from '../../hooks/useId';
 import { useUIContext } from '../../hooks/useUIContext';
 import { countryCodeData, countryCodes } from '../../utils/countryCodes';
 import { guessUserCountryCode } from '../../utils/guessUserCountryCode';
-import './phone-number-input.css.js';
-const useCountryCodeSelectOptions = (initialCountryCode) => {
-    return useMemo(() => {
-        const selectOptions = countryCodes.map((code) => {
-            const countryCodeDetails = countryCodeData[code];
-            const callingCodeString = `(+${getCountryCallingCode(code)})`;
-            return {
-                value: code,
-                label: `${countryCodeDetails?.name}`,
-                leading: countryCodeDetails?.flagIconName ? _jsx(SvgIcon, { name: countryCodeDetails?.flagIconName }) : null,
-                trailing: callingCodeString,
-            };
-        });
-        const defaultCode = initialCountryCode || guessUserCountryCode();
-        return { countryCodeSelectOptions: selectOptions, defaultCountryCode: defaultCode };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-};
+import { useIds } from '../../utils/useIds';
+const SELECT_OPTIONS = countryCodes.map((code) => {
+    const countryCodeDetails = countryCodeData[code];
+    return {
+        value: code,
+        label: `${countryCodeDetails?.name}`,
+        leading: countryCodeDetails?.flagIconName ? (_jsx(SvgIcon, { "aria-hidden": true, name: countryCodeDetails?.flagIconName })) : null,
+        trailing: `(+${getCountryCallingCode(code)})`,
+    };
+});
 /**
  * A text input that allows users to enter text phone numbers with country codes.
  *
@@ -41,22 +32,11 @@ const useCountryCodeSelectOptions = (initialCountryCode) => {
  * @name PhoneNumberInput
  * @phase UXReview
  */
-export function PhoneNumberInput({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...inputProps }) {
-    const { isMobile } = useUIContext();
-    const { toggleProps, menuProps, closeMenu, elements, isOpen: showCountryCodeSelectMenu, activeIndex, } = useCombobox({
-        placement: 'bottom',
-        disabled,
-        readOnly,
-    });
-    const { countryCodeSelectOptions, defaultCountryCode } = useCountryCodeSelectOptions(initialCountryCode);
-    const [countryCode, setCountryCode] = useState(defaultCountryCode);
-    const formattedValue = useMemo(() => {
-        if (disableFormatting) {
-            return value;
-        }
-        const formatter = new AsYouType(countryCode);
-        return formatter.input(value || '');
-    }, [value, countryCode, disableFormatting]);
+export function PhoneNumberInput({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, name, ...inputProps }) {
+    const id = useId();
+    const items = useIds(`phone-number-input-${id}`, SELECT_OPTIONS);
+    const [countryCode, setCountryCode] = useState(initialCountryCode || guessUserCountryCode());
+    const [inputRef, setInputRef] = useState(null);
     const { callingCode, selectedCodeData } = useMemo(() => {
         const selectedValue = (countryCode || 'US');
         const data = countryCodeData[selectedValue] ?? countryCodeData.US;
@@ -66,21 +46,38 @@ export function PhoneNumberInput({ value, onChange, disableFormatting, initialCo
         };
     }, [countryCode]);
     const handleChange = (newValue) => {
-        const rawNumber = newValue.replace(/\D/g, '');
+        let rawNumber = newValue.replace(/\D/g, '');
         if (rawNumber === value)
             return;
+        if (!disableFormatting) {
+            const formatter = new AsYouType(countryCode);
+            rawNumber = formatter.input(`${rawNumber}`);
+        }
         onChange(rawNumber, countryCode);
     };
-    const setRef = (el) => {
-        elements.setReference(el);
-    };
-    return (_jsxs("div", { "data-bspk": "phone-number-input", ref: setRef, children: [_jsx(TextInput, { ...inputProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, disabled: disabled, leading: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsxs("button", { ...(disabled ? {} : toggleProps), "aria-label": "Open country code menu", "data-bspk": "country-code-select", children: [_jsx(SvgIcon, { name: selectedCodeData.flagIconName }), _jsx(SvgIcon, { name: "KeyboardArrowDown" })] }), _jsx(Divider, { orientation: "vertical" }), _jsx("span", { style: { cursor: 'default' }, children: `+${callingCode}` })] }), onChange: handleChange, readOnly: readOnly, value: formattedValue }), showCountryCodeSelectMenu && (_jsx(_Fragment, { children: isMobile ? (_jsx(Modal, { description: "select a country code for your phone number", header: "Country Code", onClose: closeMenu, open: showCountryCodeSelectMenu, owner: "phone-number-input", children: countryCodeSelectOptions.map((option, index) => (_jsx(ListItem, { active: activeIndex === index || undefined, "aria-selected": countryCode === option.value, "data-bspk": "country-code-select-option", id: `${option.value}-country-code-select-option`, includeAriaLabel: false, label: option.label, leading: option.leading, onClick: () => {
-                            setCountryCode(option.value);
-                            closeMenu();
-                        }, trailing: option.trailing }, option.value))) })) : (_jsx(Listbox, { activeIndex: activeIndex, "data-bspk-owner": "phone-number-input", includeAriaLabel: false, innerRef: elements.setFloating, itemCount: countryCodeSelectOptions.length, itemDisplayCount: countryCodeSelectOptions.length <= 10 ? countryCodeSelectOptions.length : 10, items: countryCodeSelectOptions, onChange: (next, event) => {
-                        event?.preventDefault();
-                        closeMenu();
-                        setCountryCode(next[0]);
-                    }, owner: "phone-number-input", selectedValues: [countryCode], ...menuProps })) }))] }));
+    const { sendAriaLiveMessage } = useUIContext();
+    const fauxInputRef = useRef(null);
+    return (_jsx(ListItemMenu, { disabled: disabled || readOnly, itemOnClick: ({ currentId, setShow }) => {
+            if (currentId) {
+                const item = items.find((i) => i.id === currentId);
+                setCountryCode(item.value);
+                sendAriaLiveMessage(`Selected country code ${item.label}`);
+                setShow(false);
+            }
+        }, items: ({ show }) => {
+            if (!show)
+                return items.filter((item) => countryCode.includes(item.value));
+            return items.map((item) => ({
+                ...item,
+                'aria-selected': item.value === countryCode,
+            }));
+        }, label: "Select country code", onClose: () => {
+            inputRef?.focus();
+        }, owner: "phone-number-input", role: "listbox", scrollLimit: 10, width: "reference", children: (toggleProps, { setRef }) => {
+            return (_jsx("div", { "data-bspk": "phone-number-input", children: _jsx(TextInput, { ...inputProps, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel, autoComplete: "off", containerRef: setRef, disabled: disabled, inputRef: setInputRef, leading: _jsxs(_Fragment, { children: [_jsx("input", { contentEditable: true, name: `${name}-country-code`, ...toggleProps, "aria-label": "select country code", ref: fauxInputRef }), _jsxs(Button, { disabled: disabled || readOnly, label: "Open country code menu", onClick: () => {
+                                    fauxInputRef.current?.focus();
+                                    fauxInputRef.current?.click();
+                                }, variant: "tertiary", children: [_jsx(SvgIcon, { name: selectedCodeData.flagIconName }), _jsx(SvgIcon, { name: "KeyboardArrowDown" })] }), _jsx("span", { "aria-hidden": "true", style: { cursor: 'default' }, children: `+${callingCode}` })] }), name: name, onChange: handleChange, owner: "phone-number-input", readOnly: readOnly, value: value }) }));
+        } }));
 }
 //# sourceMappingURL=PhoneNumberInput.js.map

package/dist/components/PhoneNumberInput/PhoneNumberInput.js.map

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

package/dist/components/PhoneNumberInput/PhoneNumberInputExample.d.ts

@@ -0,0 +1,4 @@
+import { PhoneNumberInputProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<PhoneNumberInputProps>[];
+export declare const PhoneNumberInputExample: ComponentExample<PhoneNumberInputProps>;

package/dist/components/PhoneNumberInput/PhoneNumberInputExample.js

@@ -0,0 +1,5 @@
+export const presets = [];
+export const PhoneNumberInputExample = {
+    variants: false,
+};
+//# sourceMappingURL=PhoneNumberInputExample.js.map

package/dist/components/PhoneNumberInput/PhoneNumberInputExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumberInputExample.js","sourceRoot":"","sources":["../../../src/components/PhoneNumberInput/PhoneNumberInputExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAoC,EAAE,CAAC;AAE3D,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/PhoneNumberInput/phone-number-input.css

@@ -1,36 +1,46 @@
 [data-bspk=phone-number-input] {
+  position: relative;
   width: 100%;
 }
-[data-bspk=phone-number-input] [data-bspk=text-input] {
+
+[data-bspk-owner=phone-number-input] {
   padding-left: 0;
 }
-[data-bspk=phone-number-input] [data-bspk=divider] {
-  margin-left: 0;
-  margin-top: var(--spacing-sizing-01);
-  margin-bottom: var(--spacing-sizing-01);
-}
-[data-bspk=phone-number-input] [data-bspk=country-code-select] {
-  border: 0;
-  padding: var(--spacing-sizing-02);
-  background: none;
-  cursor: pointer;
-  outline: none;
-}
-[data-bspk=phone-number-input] [data-bspk=country-code-select] [data-bspk-name=KeyboardArrowDown] {
-  margin-left: var(--spacing-sizing-02);
+[data-bspk-owner=phone-number-input] [data-bspk=divider] {
+  margin: 0 var(--spacing-sizing-02) 0 0;
 }
-[data-bspk=phone-number-input] [data-bspk=country-code] {
-  font: var(--body-base);
-  color: var(--foreground-neutral-on-surface);
+[data-bspk-owner=phone-number-input] [data-leading] {
+  overflow: hidden;
+  position: relative;
 }
-[data-bspk=phone-number-input] [data-bspk=txt] {
-  cursor: default;
+[data-bspk-owner=phone-number-input] [data-leading] [contentEditable] {
+  position: absolute;
+  opacity: 0;
+  inset: 0;
+  z-index: 2;
 }
-[data-bspk=phone-number-input] [data-disabled] [data-bspk=country-code-select] {
-  cursor: default;
+[data-bspk-owner=phone-number-input] [data-leading] [contentEditable]:focus-visible {
+  outline: none;
 }
-
-[data-bspk-owner=phone-number-input] [data-bspk=list-item] [data-trailing] {
-  font: var(--body-base);
-  color: var(--foreground-neutral-on-surface);
+[data-bspk-owner=phone-number-input] [data-leading] [contentEditable]:focus-visible + [data-bspk=button] {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk-owner=phone-number-input] [data-leading] [data-bspk=button] {
+  gap: var(--spacing-sizing-02);
+  padding: 0 var(--spacing-sizing-03);
+  min-height: 100%;
+  margin-right: var(--spacing-sizing-02);
+}
+[data-bspk-owner=phone-number-input] [data-leading] [data-bspk=button]::after {
+  content: "";
+  position: absolute;
+  top: var(--spacing-sizing-01);
+  bottom: var(--spacing-sizing-01);
+  right: 0;
+  width: 1px;
+  background-color: var(--stroke-neutral-base);
+  pointer-events: none;
+}
+[data-bspk-owner=phone-number-input][data-size=small] [data-leading] [data-bspk=button] {
+  padding-left: var(--spacing-sizing-02);
 }

package/dist/components/PhoneNumberInput/phone-number-input.css.js

@@ -2,40 +2,50 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=phone-number-input] {
+  position: relative;
   width: 100%;
 }
-[data-bspk=phone-number-input] [data-bspk=text-input] {
+
+[data-bspk-owner=phone-number-input] {
   padding-left: 0;
 }
-[data-bspk=phone-number-input] [data-bspk=divider] {
-  margin-left: 0;
-  margin-top: var(--spacing-sizing-01);
-  margin-bottom: var(--spacing-sizing-01);
-}
-[data-bspk=phone-number-input] [data-bspk=country-code-select] {
-  border: 0;
-  padding: var(--spacing-sizing-02);
-  background: none;
-  cursor: pointer;
-  outline: none;
-}
-[data-bspk=phone-number-input] [data-bspk=country-code-select] [data-bspk-name=KeyboardArrowDown] {
-  margin-left: var(--spacing-sizing-02);
+[data-bspk-owner=phone-number-input] [data-bspk=divider] {
+  margin: 0 var(--spacing-sizing-02) 0 0;
 }
-[data-bspk=phone-number-input] [data-bspk=country-code] {
-  font: var(--body-base);
-  color: var(--foreground-neutral-on-surface);
+[data-bspk-owner=phone-number-input] [data-leading] {
+  overflow: hidden;
+  position: relative;
 }
-[data-bspk=phone-number-input] [data-bspk=txt] {
-  cursor: default;
+[data-bspk-owner=phone-number-input] [data-leading] [contentEditable] {
+  position: absolute;
+  opacity: 0;
+  inset: 0;
+  z-index: 2;
 }
-[data-bspk=phone-number-input] [data-disabled] [data-bspk=country-code-select] {
-  cursor: default;
+[data-bspk-owner=phone-number-input] [data-leading] [contentEditable]:focus-visible {
+  outline: none;
 }
-
-[data-bspk-owner=phone-number-input] [data-bspk=list-item] [data-trailing] {
-  font: var(--body-base);
-  color: var(--foreground-neutral-on-surface);
+[data-bspk-owner=phone-number-input] [data-leading] [contentEditable]:focus-visible + [data-bspk=button] {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk-owner=phone-number-input] [data-leading] [data-bspk=button] {
+  gap: var(--spacing-sizing-02);
+  padding: 0 var(--spacing-sizing-03);
+  min-height: 100%;
+  margin-right: var(--spacing-sizing-02);
+}
+[data-bspk-owner=phone-number-input] [data-leading] [data-bspk=button]::after {
+  content: "";
+  position: absolute;
+  top: var(--spacing-sizing-01);
+  bottom: var(--spacing-sizing-01);
+  right: 0;
+  width: 1px;
+  background-color: var(--stroke-neutral-base);
+  pointer-events: none;
+}
+[data-bspk-owner=phone-number-input][data-size=small] [data-leading] [data-bspk=button] {
+  padding-left: var(--spacing-sizing-02);
 }
 `));
 document.head.appendChild(style);

package/dist/components/Popover/Popover.d.ts

@@ -1,7 +1,11 @@
+import './popover.scss';
 import { ReactElement } from 'react';
 import { Placement, UseFloatingProps } from '-/hooks/useFloating';
 import { CallToActionButton, CommonProps, ElementProps } from '-/types/common';
-import './popover.scss';
+export type PopoverTriggerProps = {
+    onClick?: () => void;
+    'aria-describedby'?: string;
+};
 export type PopoverProps = CommonProps<'disabled'> & Pick<UseFloatingProps, 'refWidth'> & {
     /**
      * The placement of the popover.
@@ -30,12 +34,11 @@ export type PopoverProps = CommonProps<'disabled'> & Pick<UseFloatingProps, 'ref
      */
     secondaryCallToAction?: CallToActionButton;
     /**
-     * A single element that will trigger the popover when clicked.
+     * A callback to render the trigger element.
      *
-     * @type ReactElement
      * @required
      */
-    children: ReactElement;
+    children: (triggerProps: PopoverTriggerProps) => ReactElement;
 };
 /**
  * Brief message that provide additional guidance and helps users perform an action if needed.

package/dist/components/Popover/Popover.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './popover.css.js';
 import { SvgClose } from '@bspk/icons/Close';
-import { cloneElement, useMemo, useRef, useState } from 'react';
+import { FocusTrap } from 'focus-trap-react';
+import { useRef, useState } from 'react';
 import { Button } from '../Button';
 import { Portal } from '../Portal';
 import { Txt } from '../Txt';
@@ -8,7 +10,6 @@ import { useFloating } from '../../hooks/useFloating';
 import { useId } from '../../hooks/useId';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { cssWithVars } from '../../utils/cwv';
-import './popover.css.js';
 /**
  * Brief message that provide additional guidance and helps users perform an action if needed.
  *
@@ -41,7 +42,7 @@ import './popover.css.js';
  * @name Popover
  * @phase UXReview
  */
-export function Popover({ placement = 'top', header, content, callToAction, secondaryCallToAction, children, disabled = false, refWidth = false, ...props }) {
+export function Popover({ placement = 'top', header, content, callToAction, secondaryCallToAction, children, disabled = false, refWidth, ...props }) {
     const id = useId();
     const [show, setShow] = useState(false);
     const arrowRef = useRef(null);
@@ -51,18 +52,12 @@ export function Popover({ placement = 'top', header, content, callToAction, seco
         offsetOptions: 22,
         arrowRef,
         hide: !show,
-        refWidth: refWidth,
+        refWidth,
     });
     useOutsideClick({
         elements: [elements.floating],
         callback: () => setShow(false),
     });
-    const child = useMemo(() => !disabled &&
-        children &&
-        cloneElement(children, {
-            onClick: () => setShow((prev) => !prev),
-            'aria-describedby': id,
-        }), [children, disabled, id]);
     const basicArrowX = middlewareData?.arrow?.x ? `${middlewareData.arrow.x}px` : '0px';
     const getArrowX = () => {
         if (middlewareData?.arrow?.x) {
@@ -75,14 +70,22 @@ export function Popover({ placement = 'top', header, content, callToAction, seco
         }
         return '0px';
     };
-    return disabled ? (children) : (_jsxs(_Fragment, { children: [child, _jsx(Portal, { children: _jsxs("div", { "data-bspk": "popover", "data-placement": middlewareData?.offset?.placement, id: id, ref: (node) => {
-                        elements.setFloating(node);
-                        elements.setReference(document.querySelector(`[aria-describedby="${id}"]`));
-                    }, style: { ...floatingStyles, ...props.style }, 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 }), _jsxs("div", { "data-cta-row": true, children: [secondaryCallToAction?.label && secondaryCallToAction?.onClick && (_jsx(Button, { label: secondaryCallToAction.label, onClick: secondaryCallToAction.onClick, size: "small", variant: "secondary" })), callToAction?.label && callToAction?.onClick && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "primary" }))] })] }), _jsx("div", { "data-arrow": true, ref: (node) => {
-                                arrowRef.current = node;
-                            }, style: cssWithVars({
-                                '--position-left': refWidth ? getArrowX() : basicArrowX,
-                                '--position-top': `${middlewareData?.arrow?.y || 0}px`,
-                            }) })] }) })] }));
+    if (disabled)
+        return children({});
+    return (_jsxs(_Fragment, { children: [children({
+                onClick: () => setShow(!show),
+                'aria-describedby': id,
+            }), show && (_jsx(Portal, { children: _jsx(FocusTrap, { focusTrapOptions: {
+                        fallbackFocus: () => elements.floating || document.body,
+                        clickOutsideDeactivates: true,
+                    }, children: _jsxs("div", { "data-bspk": "popover", "data-placement": middlewareData?.offset?.placement, id: id, ref: (node) => {
+                            elements.setFloating(node);
+                            elements.setReference(document.querySelector(`[aria-describedby="${id}"]`));
+                        }, style: { ...floatingStyles, ...props.style }, children: [_jsxs("header", { children: [_jsx(Txt, { variant: "heading-h6", children: header }), _jsx(Button, { "data-close": true, icon: _jsx(SvgClose, {}), iconOnly: true, label: "Close", onClick: () => setShow(false), variant: "tertiary" })] }), _jsxs("div", { "data-content": true, children: [_jsx(Txt, { as: "div", variant: "body-small", children: content }), _jsxs("div", { "data-cta-row": true, children: [secondaryCallToAction?.label && secondaryCallToAction?.onClick && (_jsx(Button, { label: secondaryCallToAction.label, onClick: secondaryCallToAction.onClick, size: "small", variant: "secondary" })), callToAction?.label && callToAction?.onClick && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "primary" }))] })] }), _jsx("div", { "data-arrow": true, ref: (node) => {
+                                    arrowRef.current = node;
+                                }, style: cssWithVars({
+                                    '--position-left': refWidth ? getArrowX() : basicArrowX,
+                                    '--position-top': `${middlewareData?.arrow?.y || 0}px`,
+                                }) })] }) }) }))] }));
 }
 //# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

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

package/dist/components/Popover/PopoverExample.js

@@ -4,21 +4,26 @@ import { Txt } from '../Txt';
 export const PopoverExample = ({ action }) => ({
     containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
-        return (_jsxs(_Fragment, { children: [_jsx(Txt, { style: { marginBottom: `var(--spacing-sizing-02)` }, children: "Click button for a Popover" }), _jsx(Component, { ...props, children: _jsx(Button, { label: `${props.placement}`, variant: "secondary" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Txt, { style: { marginBottom: `var(--spacing-sizing-02)` }, children: "Click button for a Popover" }), _jsx(Component, { ...props, children: (triggerProps) => _jsx(Button, { label: `${props.placement}`, variant: "secondary", ...triggerProps }) })] }));
     },
     presets: [
         {
             label: 'With CallToAction',
             propState: {
+                header: 'With CallToAction',
+                content: 'With CallToAction body',
                 callToAction: {
                     label: 'CTA Button',
                     onClick: () => action('Call to action clicked!'),
                 },
+                children: () => _jsx(_Fragment, {}),
             },
         },
         {
             label: 'With both CallToActions',
             propState: {
+                header: 'With both CallToActions',
+                content: 'With both CallToActions body',
                 callToAction: {
                     label: 'Primary',
                     onClick: () => action('Primary call to action clicked!'),
@@ -27,6 +32,7 @@ export const PopoverExample = ({ action }) => ({
                     label: 'Secondary',
                     onClick: () => action('Secondary call to action clicked!'),
                 },
+                children: () => _jsx(_Fragment, {}),
             },
         },
     ],

package/dist/components/Popover/PopoverExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverExample.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,CAAC,MAAM,cAAc,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,8BACI,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,0BAA0B,EAAE,2CAAkC,EAC1F,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,GAAG,GACnD,IACb,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,YAAY;oBACnB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;aACJ;SACJ;QACD;YACI,KAAK,EAAE,yBAAyB;YAChC,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,SAAS;oBAChB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC;iBAC3D;gBACD,qBAAqB,EAAE;oBACnB,KAAK,EAAE,WAAW;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,mCAAmC,CAAC;iBAC7D;aACJ;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}
+{"version":3,"file":"PopoverExample.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,CAAC,MAAM,cAAc,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,8BACI,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,0BAA0B,EAAE,2CAAkC,EAC1F,KAAC,SAAS,OAAK,KAAK,YACf,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,KAAK,YAAY,GAAI,GACxF,IACb,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,mBAAmB;gBAC3B,OAAO,EAAE,wBAAwB;gBACjC,YAAY,EAAE;oBACV,KAAK,EAAE,YAAY;oBACnB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,mBAAK;aACxB;SACJ;QACD;YACI,KAAK,EAAE,yBAAyB;YAChC,SAAS,EAAE;gBACP,MAAM,EAAE,yBAAyB;gBACjC,OAAO,EAAE,8BAA8B;gBACvC,YAAY,EAAE;oBACV,KAAK,EAAE,SAAS;oBAChB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC;iBAC3D;gBACD,qBAAqB,EAAE;oBACnB,KAAK,EAAE,WAAW;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,mCAAmC,CAAC;iBAC7D;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,mBAAK;aACxB;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}

package/dist/components/Popover/popover.css

@@ -21,18 +21,9 @@
   margin-bottom: var(--spacing-sizing-02);
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=popover] header button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--foreground-neutral-on-surface-variant-01);
-  height: var(--spacing-sizing-06);
-  width: var(--spacing-sizing-06);
-}
-[data-bspk=popover] header button svg {
-  width: var(--spacing-sizing-06);
-  height: var(--spacing-sizing-06);
+[data-bspk=popover] header [data-bspk=button][data-close] {
+  margin-right: calc(var(--spacing-sizing-02) * -1);
+  margin-top: calc(var(--spacing-sizing-02) * -1);
 }
 [data-bspk=popover] [data-arrow] {
   z-index: 1;