@bspk/ui 1.1.33 → 1.2.0

package/dist/components/PasswordField/PasswordField.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../FormField';
+import { PasswordInput } from '../PasswordInput';
+/**
+ * A text input that allows users to enter text, numbers or symbols in a singular line.
+ *
+ * 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}
+ *             />
+ *         );
+ *     }
+ *
+ * @name PasswordField
+ * @phase QA
+ */
+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 ?? '' })) }));
+}
+//# sourceMappingURL=PasswordField.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/PasswordField/index.js

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

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

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

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

@@ -0,0 +1,21 @@
+import './password-input.scss';
+import { TextInputProps } from '-/components/TextInput';
+export type PasswordInputProps = Pick<TextInputProps, 'aria-describedby' | 'aria-errormessage' | 'aria-label' | 'containerRef' | 'disabled' | 'id' | 'inputProps' | 'inputRef' | 'invalid' | 'name' | 'onChange' | 'readOnly' | 'required' | 'size' | 'value'>;
+/**
+ * An input field that is specifically built with a show/hide toggle for entering security passwords.
+ *
+ * @example
+ *     import { PasswordInput } from '@bspk/ui/PasswordInput';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return <PasswordInput value={value} onChange={setValue} aria-label="password" name="password" />;
+ *     }
+ *
+ * @name PasswordInput
+ * @phase QA
+ */
+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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import './password-input.css.js';
+import { Button } from '../Button';
+import { TextInput } from '../TextInput';
+/**
+ * An input field that is specifically built with a show/hide toggle for entering security passwords.
+ *
+ * @example
+ *     import { PasswordInput } from '@bspk/ui/PasswordInput';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return <PasswordInput value={value} onChange={setValue} aria-label="password" name="password" />;
+ *     }
+ *
+ * @name PasswordInput
+ * @phase QA
+ */
+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);
+    const togglePasswordVisibility = () => {
+        if (disabled || readOnly)
+            return;
+        setIsShowingPassword((prev) => !prev);
+    };
+    return (_jsx("div", { ...props, "data-bspk": "password-input", children: _jsx(TextInput, { "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel, autoComplete: "off", containerRef: containerRef, disabled: disabled, id: id, inputProps: inputProps, inputRef: inputRef, invalid: invalid, leading: !isShowingPassword && (_jsx(_Fragment, { children: Array.from({ length: value?.length || 0 }, (_, i) => (_jsx("span", {}, i))) })), name: name, onChange: onChange, onClick: (e) => {
+                e.currentTarget?.querySelector('input')?.focus();
+            }, owner: "password-input", readOnly: readOnly, required: required, showClearButton: false, size: size, trailing: !disabled &&
+                !readOnly && (_jsx(Button, { label: isShowingPassword ? 'Hide' : 'Show', onClick: togglePasswordVisibility, variant: "tertiary" })), type: isShowingPassword ? 'text' : 'password', value: value }) }));
+}
+//# sourceMappingURL=PasswordInput.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/PasswordInput/index.js

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

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

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

package/dist/components/PasswordInput/password-input.css

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

package/dist/components/PasswordInput/password-input.css.js

@@ -0,0 +1,33 @@
+/** * 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=password-input] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+[data-bspk=password-input] [data-bspk=text-input] {
+  padding-right: 0;
+}
+[data-bspk=password-input] [data-bspk=text-input] [data-bspk=button] {
+  font: var(--button-font);
+  height: 100%;
+}
+[data-bspk=password-input] [data-disabled] [data-toggle-visibility-button],
+[data-bspk=password-input] [data-readonly] [data-toggle-visibility-button] {
+  cursor: default;
+}
+[data-bspk=password-input][data-size=small] {
+  --button-font: var(--labels-small);
+}
+[data-bspk=password-input][data-size=medium] {
+  --button-font: var(--labels-base);
+}
+[data-bspk=password-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/PhoneNumberField/PhoneNumberField.d.ts

@@ -1,6 +1,6 @@
-import { FormFieldProps } from '../FormField';
-import { PhoneNumberInputProps } from '../PhoneNumberInput';
-export type PhoneNumberFieldProps = Pick<PhoneNumberInputProps, 'autoComplete' | 'disabled' | 'disableFormatting' | 'errorMessage' | 'initialCountryCode' | 'inputRef' | 'invalid' | 'name' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'type' | 'value'> & Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing'>;
+import { FormFieldWrapProps } from '-/components/FormField';
+import { PhoneNumberInputProps } from '-/components/PhoneNumberInput';
+export type PhoneNumberFieldProps = FormFieldWrapProps<PhoneNumberInputProps>;
 /**
  * A text input that allows users to enter text phone numbers with country codes.
  *
@@ -8,11 +8,7 @@ export type PhoneNumberFieldProps = Pick<PhoneNumberInputProps, 'autoComplete' |
  *     <PhoneNumberField label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
  *
  * @name PhoneNumberField
- * @phase WorkInProgress
+ * @phase UXReview
  */
-declare function PhoneNumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, value, onChange, disableFormatting, initialCountryCode, invalid, ...inputProps }: PhoneNumberFieldProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PhoneNumberField {
-    var bspkName: string;
-}
-export { PhoneNumberField };
+export declare function PhoneNumberField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...inputProps }: PhoneNumberFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -8,12 +8,9 @@ import { PhoneNumberInput } from '../PhoneNumberInput';
  *     <PhoneNumberField label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
  *
  * @name PhoneNumberField
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function PhoneNumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, value, onChange, disableFormatting, initialCountryCode, invalid, ...inputProps }) {
-    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "phone-number-field", errorMessage: errorMessage, helperText: helperText, invalid: !inputProps.readOnly && !inputProps.disabled && invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(PhoneNumberInput, { "aria-label": label, disableFormatting: disableFormatting, errorMessage: errorMessage, initialCountryCode: initialCountryCode, onChange: onChange, value: value, ...fieldProps, ...inputProps })) }));
+export function PhoneNumberField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...inputProps }) {
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "phone-number-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => _jsx(PhoneNumberInput, { ...inputProps, ...fieldProps, "aria-label": label, invalid: invalid }) }));
 }
-PhoneNumberField.bspkName = 'PhoneNumberField';
-export { PhoneNumberField };
 //# sourceMappingURL=PhoneNumberField.js.map

package/dist/components/PhoneNumberField/PhoneNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../../../src/components/PhoneNumberField/PhoneNumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,+BAA+B,CAAC;AAsBxF;;;;;;;;GAQG;AACH,SAAS,gBAAgB,CAAC,EACtB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,EACP,GAAG,UAAU,EACO;IACpB,MAAM,YAAY,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAErG,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,oBAAoB,EAC9B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,OAAO,EAChE,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,gBAAgB,kBACD,KAAK,EACjB,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,KACR,UAAU,KACV,UAAU,GAChB,CACL,GACO,CACf,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../../../src/components/PhoneNumberField/PhoneNumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,+BAA+B,CAAC;AAIxF;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,SAAS,EACT,YAAY,EACZ,UAAU,EACV,OAAO,EACP,KAAK,EACL,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACO;IACpB,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,oBAAoB,EAC9B,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,KAAC,gBAAgB,OAAK,UAAU,KAAM,UAAU,gBAAc,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,GAClG,CACf,CAAC;AACN,CAAC"}

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

@@ -1,8 +1,8 @@
-import { InvalidPropsLibrary } from '../../index.js';
-import { TextInputProps } from '../TextInput';
-import { SupportedCountryCode } from '../../utils/countryCodes';
+import { TextInputProps } from '-/components/TextInput';
+import { FormFieldControlProps } from '-/types/common';
+import { SupportedCountryCode } from '-/utils/countryCodes';
 import './phone-number-input.scss';
-export type PhoneNumberInputProps = InvalidPropsLibrary & Pick<TextInputProps, 'aria-label' | 'autoComplete' | 'disabled' | 'inputRef' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'type' | 'value'> & {
+export type PhoneNumberInputProps = FormFieldControlProps & Pick<TextInputProps, 'aria-label' | 'autoComplete' | 'disabled' | 'inputRef' | 'invalid' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'type' | '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
@@ -31,11 +31,7 @@ export type PhoneNumberInputProps = InvalidPropsLibrary & Pick<TextInputProps, '
  *     <PhoneNumberInput aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
  *
  * @name PhoneNumberInput
- * @phase WorkInProgress
+ * @phase UXReview
  */
-declare function PhoneNumberInput({ errorMessage, value, onChange, disableFormatting, initialCountryCode, disabled, invalid, readOnly, ...inputProps }: PhoneNumberInputProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PhoneNumberInput {
-    var bspkName: string;
-}
-export { PhoneNumberInput };
+export declare function PhoneNumberInput({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...inputProps }: PhoneNumberInputProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -39,16 +39,14 @@ const useCountryCodeSelectOptions = (initialCountryCode) => {
  *     <PhoneNumberInput aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
  *
  * @name PhoneNumberInput
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function PhoneNumberInput({ errorMessage, value, onChange, disableFormatting, initialCountryCode, disabled, invalid, readOnly, ...inputProps }) {
+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,
-        invalid,
         readOnly,
-        errorMessage,
     });
     const { countryCodeSelectOptions, defaultCountryCode } = useCountryCodeSelectOptions(initialCountryCode);
     const [countryCode, setCountryCode] = useState(defaultCountryCode);
@@ -76,15 +74,13 @@ function PhoneNumberInput({ errorMessage, value, onChange, disableFormatting, in
     const setRef = (el) => {
         elements.setReference(el);
     };
-    return (_jsxs("div", { "data-bspk": "phone-number-input", ref: setRef, children: [_jsx(TextInput, { onChange: handleChange, value: formattedValue, ...inputProps, disabled: disabled, errorMessage: errorMessage, invalid: invalid, 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", { "aria-label": "Country code", style: { cursor: 'default' }, children: `+${callingCode}` })] }), readOnly: readOnly }), showCountryCodeSelectMenu && (_jsx(_Fragment, { children: isMobile ? (_jsx(Modal, { "data-bspk-owner": "phone-number-input", description: "select a country code for your phone number", header: "Country Code", onClose: closeMenu, open: showCountryCodeSelectMenu, 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`, label: option.label, leading: option.leading, onClick: () => {
+    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", innerRef: elements.setFloating, itemDisplayCount: countryCodeSelectOptions.length, items: countryCodeSelectOptions, onChange: (next, event) => {
+                        }, 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]);
-                    }, selectedValues: [countryCode], ...menuProps })) }))] }));
+                    }, owner: "phone-number-input", selectedValues: [countryCode], ...menuProps })) }))] }));
 }
-PhoneNumberInput.bspkName = 'PhoneNumberInput';
-export { PhoneNumberInput };
 //# 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/phone-number-input.css.js

@@ -39,4 +39,3 @@ style.appendChild(document.createTextNode(`[data-bspk=phone-number-input] {
 }
 `));
 document.head.appendChild(style);
-

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

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
-import { CallToActionButton, CommonProps } from '../../index.js';
-import { Placement } from '../../hooks/useFloating';
+import { Placement, UseFloatingProps } from '-/hooks/useFloating';
+import { CallToActionButton, CommonProps, ElementProps } from '-/types/common';
 import './popover.scss';
-export type PopoverProps = CommonProps<'disabled'> & {
+export type PopoverProps = CommonProps<'disabled'> & Pick<UseFloatingProps, 'refWidth'> & {
     /**
      * The placement of the popover.
      *
@@ -23,6 +23,12 @@ export type PopoverProps = CommonProps<'disabled'> & {
      * @type CallToActionButton
      */
     callToAction?: CallToActionButton;
+    /**
+     * The secondary call to action button properties.
+     *
+     * @type CallToActionButton
+     */
+    secondaryCallToAction?: CallToActionButton;
     /**
      * A single element that will trigger the popover when clicked.
      *
@@ -61,11 +67,7 @@ export type PopoverProps = CommonProps<'disabled'> & {
  *     }
  *
  * @name Popover
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Popover({ placement, header, content, callToAction, children, disabled }: PopoverProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Popover {
-    var bspkName: string;
-}
-export { Popover };
+export declare function Popover({ placement, header, content, callToAction, secondaryCallToAction, children, disabled, refWidth, ...props }: ElementProps<PopoverProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Popover/Popover.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SvgClose } from '@bspk/icons/Close';
-import { cloneElement, useId, useMemo, useRef, useState } from 'react';
+import { cloneElement, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button';
 import { Portal } from '../Portal';
 import { Txt } from '../Txt';
 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.
@@ -37,9 +39,9 @@ import './popover.css.js';
  *     }
  *
  * @name Popover
- * @phase DesignReview
+ * @phase UXReview
  */
-function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }) {
+export function Popover({ placement = 'top', header, content, callToAction, secondaryCallToAction, children, disabled = false, refWidth = false, ...props }) {
     const id = useId();
     const [show, setShow] = useState(false);
     const arrowRef = useRef(null);
@@ -49,24 +51,38 @@ function Popover({ placement = 'top', header, content, callToAction, children, d
         offsetOptions: 22,
         arrowRef,
         hide: !show,
+        refWidth: refWidth,
+    });
+    useOutsideClick({
+        elements: [elements.floating],
+        callback: () => setShow(false),
     });
-    useOutsideClick([elements.floating], () => 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) {
+            if (placement === 'top-start' || placement === 'bottom-start')
+                return '16px';
+            if (placement === 'top' || placement === 'bottom')
+                return `${middlewareData.arrow.x}px`;
+            if (placement === 'top-end' || placement === 'bottom-end')
+                return `${(middlewareData.arrow.x * 2 || 32) - 16}px`;
+        }
+        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, 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) => {
+                    }, 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: {
-                                left: `${middlewareData?.arrow?.x}px`,
-                                top: `${middlewareData?.arrow?.y}px`,
-                            } })] }) })] }));
+                            }, style: cssWithVars({
+                                '--position-left': refWidth ? getArrowX() : basicArrowX,
+                                '--position-top': `${middlewareData?.arrow?.y || 0}px`,
+                            }) })] }) })] }));
 }
-Popover.bspkName = 'Popover';
-export { Popover };
 //# 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.d.ts

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

package/dist/components/Popover/PopoverExample.js

@@ -1,19 +1,35 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../Button';
+import { Txt } from '../Txt';
 export const PopoverExample = ({ action }) => ({
+    containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
-        return (_jsx(_Fragment, { children: _jsx(Component, { ...props, children: _jsx(Button, { label: `Click me (${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: _jsx(Button, { label: `${props.placement}`, variant: "secondary" }) })] }));
     },
     presets: [
         {
             label: 'With CallToAction',
             propState: {
                 callToAction: {
-                    label: 'Click me',
+                    label: 'CTA Button',
                     onClick: () => action('Call to action clicked!'),
                 },
             },
         },
+        {
+            label: 'With both CallToActions',
+            propState: {
+                callToAction: {
+                    label: 'Primary',
+                    onClick: () => action('Primary call to action clicked!'),
+                },
+                secondaryCallToAction: {
+                    label: 'Secondary',
+                    onClick: () => action('Secondary call to action clicked!'),
+                },
+            },
+        },
     ],
+    variants: false,
 });
 //# sourceMappingURL=PopoverExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverExample.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,CAAC,MAAM,cAAc,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,4BACI,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,MAAM,IAAC,KAAK,EAAE,aAAa,KAAK,CAAC,SAAS,GAAG,EAAE,OAAO,EAAC,WAAW,GAAG,GAC9D,GACb,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;aACJ;SACJ;KACJ;CACJ,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,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"}

package/dist/components/Popover/popover.css

@@ -4,13 +4,15 @@
   background: var(--surface-neutral-t1-base);
   box-shadow: var(--drop-shadow-float);
   padding: var(--spacing-sizing-04);
-  width: 300px;
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
+  max-width: 300px;
   --arrow-size: var(--spacing-sizing-02);
   --arrow-offset: calc(var(--arrow-size) * -2);
   --arrow-background-color: var(--surface-neutral-t1-base);
+  --position-left: 0px;
+  --position-top: 0px;
 }
 [data-bspk=popover] header {
   display: flex;
@@ -24,7 +26,6 @@
   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);
@@ -44,44 +45,38 @@
 }
 [data-bspk=popover][data-placement^=top] [data-arrow] {
   bottom: var(--arrow-offset);
+  left: var(--position-left);
   border-top-color: var(--arrow-background-color);
-  filter: drop-shadow(0 2px 1px var(--shadow-10));
+  filter: drop-shadow(0 1px 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=right] [data-arrow] {
+  top: var(--position-top);
   margin-left: calc(var(--arrow-offset) * 2);
   border-right-color: var(--arrow-background-color);
-  filter: drop-shadow(-2px 0 1px var(--shadow-10));
+  filter: drop-shadow(-1px 0 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=bottom] [data-arrow] {
-  top: var(--arrow-offset);
+  left: var(--position-left);
+  top: -15px;
   border-bottom-color: var(--arrow-background-color);
-  filter: drop-shadow(0 -2px 1px var(--shadow-10));
-}
-[data-bspk=popover][data-placement=bottom-start] [data-arrow] {
-  margin-left: var(--arrow-offset);
-}
-[data-bspk=popover][data-placement=bottom-end] [data-arrow] {
-  margin-left: calc(var(--arrow-offset) * -1);
+  filter: drop-shadow(0 -1px 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=left] [data-arrow] {
+  top: var(--position-top);
   right: var(--arrow-offset);
   border-left-color: var(--arrow-background-color);
-  filter: drop-shadow(2px 0 1px var(--shadow-10));
+  filter: drop-shadow(1px 0 1px var(--shadow-10));
 }
 [data-bspk=popover] [data-content] {
   gap: var(--spacing-sizing-04);
   display: flex;
   flex-direction: column;
 }
-[data-bspk=popover] [data-call-to-action] {
+[data-bspk=popover] [data-cta-row] {
+  display: flex;
+  align-items: end;
+  gap: var(--spacing-sizing-02);
   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); */
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */