@sonic-equipment/ui 0.0.119 → 1.1.0

package/dist/forms/fields/select-field/select-field.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Select, Button, SelectValue, Popover, ListBox, Header, ListBoxSection, ListBoxItem } from 'react-aria-components';
+import clsx from 'clsx';
+import { Icon } from '../../../icon/icon.js';
+import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { ProgressCircle } from '../../../loading/progress-circle.js';
+import { childrenToText } from '../../../shared/utils/children-to-text.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { Label } from '../../elements/label/label.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
+import styles from './select-field.module.css.js';
+
+function SelectField({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, info, isDisabled, isInvalid, isLoading, isRequired, label, name, onChange, optionGroups, options, placeholder, selectedOption, showLabel = true, showPlaceholder, size = 'lg', variant = 'outline', }) {
+    const [selectedKey, setSelectedKey] = useState(defaultSelectedOption);
+    const isControlled = selectedOption !== undefined;
+    const currentSelectedKey = isControlled ? selectedOption : selectedKey;
+    const handleChange = (key) => {
+        if (!isControlled)
+            setSelectedKey(key);
+        onChange?.(key);
+    };
+    const grouplessOptions = Object.keys(options).filter(key => {
+        if (!optionGroups)
+            return [];
+        return !Object.values(optionGroups).some(group => group.options.includes(key));
+    });
+    return (jsx(Select, { "aria-label": label, className: clsx(styles['select-field'], styles[size], styles[variant], {
+            [styles['loading']]: isLoading,
+        }, className), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
+            ? undefined
+            : String(defaultSelectedOption), isDisabled: isDisabled, isInvalid: isInvalid, isRequired: isRequired, name: name, onSelectionChange: key => handleChange(key), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: jsxs(Fragment, { children: [jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { className: styles.value, "data-test-selector": "value" }), isLoading ? (jsx(ProgressCircle, { "aria-hidden": "true", className: styles.loading, variant: "gray" })) : (jsx(Icon, { className: styles.icon, name: "ArrowDown", size: "xxs" }))] }), jsx(Popover, { className: clsx(styles.popover, styles[variant]), maxHeight: 300, placement: "bottom left", children: jsxs(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), optionGroups &&
+                                    optionGroups.map(({ key: groupKey, options: groupOptions, reactNode }) => {
+                                        return (groupOptions.some(k => k in options) && (jsxs(ListBoxSection, { className: styles.section, children: [jsx(Header, { className: styles.header, children: reactNode || label }), groupOptions.map(optionKey => {
+                                                    const value = options[optionKey];
+                                                    const textValue = childrenToText(value);
+                                                    return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [currentSelectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
+                                                })] }, groupKey)));
+                                    }), optionGroups && grouplessOptions.length > 0 && (jsx(ListBoxSection, { className: styles.section, children: grouplessOptions.map(optionKey => {
+                                        const value = options[optionKey];
+                                        const textValue = childrenToText(value);
+                                        return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [currentSelectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
+                                    }) })), !optionGroups &&
+                                    Object.entries(options).map(([optionKey, value]) => {
+                                        const textValue = childrenToText(value);
+                                        return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [currentSelectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
+                                    })] }) })] }) }) }));
+}
+
+export { SelectField };

package/dist/forms/fields/select-field/select-field.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"select-field":"select-field-module-T07fb","md":"select-field-module-x-dtL","solid":"select-field-module-jfk-G","loading":"select-field-module-NyDa0","button":"select-field-module-uGX30","value":"select-field-module-z-6Ym","icon":"select-field-module-Njvvb","popover":"select-field-module-tbhPg","listbox":"select-field-module-Rwf0R","header":"select-field-module-KDZmc","section":"select-field-module-7A3aF","item":"select-field-module-u3hoe","label":"select-field-module-g1IlV"};
+
+export { styles as default };

package/dist/forms/fields/switch-field/switch-field.d.ts

@@ -0,0 +1,10 @@
+import { ValidateFunction } from '../../elements/field-error/field-error';
+import { SwitchProps, SwitchPropsBase } from '../../elements/switch/switch';
+export interface SwitchFieldPropsBase extends SwitchPropsBase {
+    errorMessage?: string;
+    info?: string;
+    isInvalid?: boolean;
+    validate?: ValidateFunction<string[]>;
+}
+export type SwitchFieldProps = SwitchFieldPropsBase & SwitchProps;
+export declare function SwitchField(props: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/fields/switch-field/switch-field.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CheckboxGroup } from 'react-aria-components';
+import clsx from 'clsx';
+import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { Switch } from '../../elements/switch/switch.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
+import styles from './switch-field.module.css.js';
+
+function SwitchField(props) {
+    const { autoFocus, className, 'data-test-selector': dataTestSelector, defaultSelected, errorMessage, info, isDisabled, isInvalid, isReadOnly, isRequired, isSelected, name, onChange, validate, value = 'true', } = props;
+    const children = 'children' in props ? props.children : undefined;
+    const ariaLabel = 'aria-label' in props ? props['aria-label'] : undefined;
+    return (jsx(CheckboxGroup, { "aria-label": ariaLabel, className: clsx(styles['switch-field'], className), defaultValue: defaultSelected ? [value] : undefined, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, validate: validate, value: isSelected ? [value] : undefined, children: jsx(FormFieldLayout, { errorSlot: errorMessage && jsx(FieldError, { children: errorMessage }), infoSlot: info && jsx(InfoIconTooltip, { children: info }), children: jsx(Switch, { "aria-label": ariaLabel, autoFocus: autoFocus, className: className, "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isSelected: isSelected, name: name, onChange: onChange, value: value, children: children }) }) }));
+}
+
+export { SwitchField };

package/dist/forms/fields/switch-field/switch-field.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"switch-field":"switch-field-module-sVrKL"};
+
+export { styles as default };

package/dist/forms/fields/text-field/password-reveal-toggle/password-reveal-toggle.d.ts

@@ -0,0 +1,10 @@
+interface PasswordRevealToggleProps {
+    onChange: (showPassword: boolean) => void;
+    showPassword: boolean;
+}
+/**
+ * This component is used to show a toggle to reveal password value.
+ * It can be used as inline element of the Input component.
+ */
+export declare function PasswordRevealToggle({ onChange, showPassword, }: PasswordRevealToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/fields/text-field/password-reveal-toggle/password-reveal-toggle.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox } from 'react-aria-components';
+import { Icon } from '../../../../icon/icon.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import styles from './password-reveal-toggle.module.css.js';
+
+/**
+ * This component is used to show a toggle to reveal password value.
+ * It can be used as inline element of the Input component.
+ */
+function PasswordRevealToggle({ onChange, showPassword, }) {
+    const t = useFormattedMessage();
+    const helpText = showPassword ? t('Conceal value') : t('Reveal value');
+    return (jsx(Checkbox, { "aria-label": helpText, className: styles['password-reveal-toggle'], onChange: onChange, children: jsx("span", { title: helpText, children: showPassword ? jsx(Icon, { name: "Invisible" }) : jsx(Icon, { name: "Visible" }) }) }));
+}
+
+export { PasswordRevealToggle };

package/dist/forms/fields/text-field/password-reveal-toggle/password-reveal-toggle.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"password-reveal-toggle":"password-reveal-toggle-module-cW16B"};
+
+export { styles as default };

package/dist/forms/fields/text-field/text-field.d.ts

@@ -0,0 +1,50 @@
+import { FocusEvent, SyntheticEvent } from 'react';
+import { ValidateFunction } from '../../elements/field-error/field-error';
+interface TextFieldPropsBase {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    autoGrow?: boolean;
+    className?: string;
+    customErrorMessage?: string;
+    'data-test-selector'?: string;
+    defaultValue?: string;
+    info?: string | React.ReactNode;
+    inputMode?: 'text' | 'tel' | 'search' | 'email' | 'url';
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    label: string;
+    maxLength?: number;
+    minLength?: number;
+    name?: string;
+    onChange?: (value: string) => void;
+    onInput?: (e: SyntheticEvent<HTMLInputElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent) => void;
+    placeholder?: string;
+    role?: string;
+    showLabel?: boolean;
+    size?: 'md' | 'lg';
+    spellCheck?: boolean;
+    validate?: ValidateFunction<string>;
+    value?: string;
+    variant?: 'solid' | 'outline';
+}
+export interface SingleLineTextFieldProps extends TextFieldPropsBase {
+    inlineElement?: React.ReactNode;
+    isMultiline?: false;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    pattern?: string;
+    rows?: never;
+    type?: 'text' | 'email' | '_search' | '_password';
+}
+export interface MultiLineTextFieldProps extends TextFieldPropsBase {
+    isMultiline: true;
+    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    pattern?: never;
+    rows?: number;
+    type?: never;
+}
+export type TextFieldProps = SingleLineTextFieldProps | MultiLineTextFieldProps;
+export declare function TextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/fields/text-field/text-field.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { TextField as TextField$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { Input } from '../../elements/input/input.js';
+import { Label } from '../../elements/label/label.js';
+import { TextArea } from '../../elements/textarea/textarea.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
+import styles from './text-field.module.css.js';
+
+function SingleLineInput({ autoGrow, 'data-test-selector': dataTestSelector, inlineElement, inputMode, label, onBlur, pattern, placeholder, role, size, type = 'text', value, variant, }) {
+    return (jsx(Input, { autoGrow: autoGrow, "data-test-selector": dataTestSelector, inlineElement: inlineElement, inputMode: inputMode, label: label, onBlur: onBlur, pattern: pattern, placeholder: placeholder, role: role, size: size, type: type.replace(/^_/, ''), value: value, variant: variant }));
+}
+function MultiLineInput({ autoGrow, 'data-test-selector': dataTestSelector, inputMode, label, onBlur, placeholder, role, size, value, variant, }) {
+    return (jsx(TextArea, { autoGrow: autoGrow, "data-test-selector": dataTestSelector, inputMode: inputMode, label: label, onBlur: onBlur, placeholder: placeholder, role: role, size: size, value: value, variant: variant }));
+}
+function TextField(props) {
+    const { autoComplete, autoFocus, autoGrow, className, customErrorMessage, 'data-test-selector': dataTestSelector, defaultValue, info, inputMode, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, minLength, name, onBlur, onChange, onInput, onKeyUp, pattern, placeholder, role, showLabel = true, size = 'lg', spellCheck, validate, value, variant = 'solid', } = props;
+    return (jsx(TextField$1, { "aria-label": label, autoComplete: autoComplete, autoFocus: autoFocus, className: clsx(styles['text-field'], className), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, minLength: minLength, name: name, onChange: value => onChange?.(value), onInput: onInput, onKeyUp: onKeyUp, spellCheck: spellCheck?.toString(), validate: validate, value: value, children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, { children: isInvalid && customErrorMessage }), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: isMultiline ? (jsx(MultiLineInput, { isMultiline: true, autoGrow: autoGrow, "data-test-selector": dataTestSelector, inputMode: inputMode, label: label, onBlur: onBlur, placeholder: placeholder, role: role, size: size, variant: variant })) : (jsx(SingleLineInput, { autoGrow: autoGrow, "data-test-selector": dataTestSelector, 
+                // eslint-disable-next-line unicorn/consistent-destructuring
+                inlineElement: props.inlineElement, inputMode: inputMode, label: label, onBlur: onBlur, pattern: pattern, placeholder: placeholder, role: role, size: size, type: props.type, variant: variant })) }) }));
+}
+
+export { TextField };

package/dist/forms/fields/text-field/text-field.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"text-field":"text-field-module-TYL3X"};
+
+export { styles as default };

package/dist/forms/layout/form/form-field-layout.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface FormFieldLayoutProps {
+    children: ReactNode;
+    className?: string;
+    errorSlot?: ReactNode;
+    infoSlot?: ReactNode;
+    labelSlot?: ReactNode;
+}
+export declare function FormFieldLayout({ children, className, errorSlot, infoSlot, labelSlot, }: FormFieldLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/layout/form/form-field-layout.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './form-field-layout.module.css.js';
+
+function FormFieldLayout({ children, className, errorSlot, infoSlot, labelSlot, }) {
+    return (jsxs("div", { className: clsx(styles['form-field-layout'], className), children: [labelSlot && jsx("div", { className: styles['label'], children: labelSlot }), jsx("div", { className: styles['input'], children: children }), infoSlot && jsx("div", { className: styles['info'], children: infoSlot }), errorSlot && jsx("div", { className: styles['error'], children: errorSlot })] }));
+}
+
+export { FormFieldLayout };

package/dist/forms/layout/form/form-field-layout.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form-field-layout":"form-field-layout-module-6lieX","label":"form-field-layout-module-3CQx4","input":"form-field-layout-module-0CMW-","info":"form-field-layout-module-RCuwU","error":"form-field-layout-module-VHcQ-"};
+
+export { styles as default };

package/dist/forms/layout/form/form-segment-group.d.ts

@@ -0,0 +1,6 @@
+export interface FormSegmentGroupProps {
+    children: React.ReactNode;
+    className?: string;
+    title?: string;
+}
+export declare function FormSegmentGroup({ children, className, title, }: FormSegmentGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/layout/form/form-segment-group.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './form-segment-group.module.css.js';
+
+function FormSegmentGroup({ children, className, 
+// columns,
+title, }) {
+    return (jsx("fieldset", { "aria-label": title, className: clsx(styles['form-segment-group'], 
+        // columns && styles['columns'],
+        className), children: children }));
+}
+
+export { FormSegmentGroup };

package/dist/forms/layout/form/form-segment-group.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form-segment-group":"form-segment-group-module-810IM"};
+
+export { styles as default };

package/dist/forms/layout/form/form-segment.d.ts

@@ -0,0 +1,6 @@
+export interface FormSegmentProps {
+    children: React.ReactNode;
+    className?: string;
+    isFloating?: boolean;
+}
+export declare function FormSegment({ children, className, isFloating, }: FormSegmentProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/layout/form/form-segment.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './form-segment.module.css.js';
+
+function FormSegment({ children, className, isFloating, }) {
+    return (jsx("div", { className: clsx(styles['form-segment'], isFloating && styles['floating'], className), children: children }));
+}
+
+export { FormSegment };

package/dist/forms/layout/form/form-segment.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form-segment":"form-segment-module-GbJZZ","floating":"form-segment-module-60hj6"};
+
+export { styles as default };

package/dist/forms/layout/form/form.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { FormProps as AriaFormProps } from 'react-aria-components';
+export interface OnSubmitEventArgs {
+    formData: FormData;
+    submitter?: HTMLButtonElement;
+}
+export type OnSubmitHandler = (e: OnSubmitEventArgs) => void;
+export type ValidationErrors = AriaFormProps['validationErrors'];
+export interface FormProps {
+    autoComplete?: boolean;
+    children: ReactNode;
+    className?: string;
+    errorMessage?: string;
+    footer?: ReactNode;
+    header?: ReactNode;
+    onSubmit?: OnSubmitHandler;
+    title?: string;
+    validationErrors?: ValidationErrors;
+}
+export declare function Form({ autoComplete, children, className, errorMessage, footer, header, onSubmit, title, validationErrors, }: FormProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/layout/form/form.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { Form as Form$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { Message } from '../../../message/message.js';
+import { scrollToTop } from '../../../shared/utils/scrolling.js';
+import styles from './form.module.css.js';
+
+function Form({ autoComplete = false, children, className, errorMessage, footer, header, onSubmit, title, validationErrors, }) {
+    const handleSubmit = (event) => {
+        if (onSubmit) {
+            event.preventDefault();
+            const form = event.currentTarget;
+            const formData = new FormData(form);
+            const submitter = event.nativeEvent.submitter;
+            onSubmit({ formData, submitter });
+        }
+    };
+    useEffect(() => {
+        if (errorMessage) {
+            scrollToTop();
+        }
+    }, [errorMessage]);
+    return (jsxs(Form$1, { "aria-label": title, autoComplete: autoComplete ? 'on' : 'off', className: clsx(styles['form'], className), onSubmit: handleSubmit, validationBehavior: "native", validationErrors: validationErrors, children: [header && jsx("header", { className: styles['form-header'], children: header }), errorMessage && (jsx("section", { className: styles['error-messages'], children: jsx(Message, { type: "danger", children: errorMessage }) })), children, footer && jsx("footer", { className: styles['form-footer'], children: footer })] }));
+}
+
+export { Form };

package/dist/forms/layout/form/form.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form":"form-module-j-sK-","error-messages":"form-module-FJZtR","form-header":"form-module-KjHjn","form-footer":"form-module-2IhUq"};
+
+export { styles as default };

package/dist/forms/partials/address-form/address-form.d.ts

@@ -0,0 +1,11 @@
+import { Address } from '../../../shared/model/address';
+import { Country } from '../../../shared/model/countries-languages';
+export interface AddressFormProps {
+    address: Address | null | undefined;
+    countries: Country[];
+    currentCountry: Country | undefined;
+    isLoading?: boolean;
+    isReadonly?: boolean;
+    showCurrencyChangeWarning?: boolean;
+}
+export declare function AddressForm({ address, countries, currentCountry: _currentCountry, isLoading, isReadonly, showCurrencyChangeWarning, }: AddressFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/partials/address-form/address-form.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { CountrySelect } from '../../../country-select/country-select.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { Message } from '../../../message/message.js';
+import { validatePhone, validateEmail } from '../../../shared/model/address.js';
+import { TextField } from '../../fields/text-field/text-field.js';
+import formStyles from './address-form.module.css.js';
+
+function AddressForm({ address, countries, currentCountry: _currentCountry, isLoading = false, isReadonly = false, showCurrencyChangeWarning = false, }) {
+    const t = useFormattedMessage();
+    const [companyName, setCompanyName] = useState(address?.companyName || '');
+    const [lastName, setLastName] = useState(address?.lastName || '');
+    const currentCountry = countries.find(c => address?.country
+        ? typeof address.country === 'string'
+            ? false
+            : c.id === address.country.id
+        : undefined) || _currentCountry;
+    const [selectedCountry, setSelectedCountry] = useState(currentCountry);
+    const currencyHasChanged = Boolean(currentCountry) &&
+        selectedCountry?.currencyCode !== currentCountry?.currencyCode;
+    if (countries.length === 0) {
+        return (jsx(Message, { type: "danger", children: jsx(FormattedMessage, { id: "No countries available. Unable to change address." }) }));
+    }
+    return (jsxs(Fragment, { children: [jsx(TextField, { defaultValue: address?.firstName, isDisabled: isLoading || isReadonly, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading || isReadonly, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { defaultValue: address?.companyName, isDisabled: isLoading || isReadonly, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: address?.attention, isDisabled: isLoading || isReadonly, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: formStyles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.address1, isDisabled: isLoading || isReadonly, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: formStyles['span-2'], children: jsx(TextField, { defaultValue: address?.address2, isDisabled: isLoading || isReadonly, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: formStyles['span-2'], children: jsx(TextField, { defaultValue: address?.address3, isDisabled: isLoading || isReadonly, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: address?.postalCode, isDisabled: isLoading || isReadonly, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: address?.city, isDisabled: isLoading || isReadonly, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsxs("div", { className: formStyles['span-2'], children: [jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading || isReadonly, name: "countrySelect", onCountryChange: setSelectedCountry, selectedCountry: selectedCountry }), showCurrencyChangeWarning && currencyHasChanged && (jsx(Message, { className: formStyles['currency-warning'], type: "warning", children: jsx(FormattedMessage, { id: "Selecting this country will result in your cart to be converted to the currency {0}", replacementValues: {
+                                '0': selectedCountry?.currencyCode || t('Unknown'),
+                            } }) }))] }), jsx("div", { className: formStyles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.phone, isDisabled: isLoading || isReadonly, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
+                        if (!value)
+                            return value;
+                        return (validatePhone(value) || t('Please enter a valid phone number'));
+                    } }) }), jsx("div", { className: formStyles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.email || '', isDisabled: isLoading || isReadonly, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
+                        if (!value)
+                            return value;
+                        return (validateEmail(value) || t('Please enter a valid email address'));
+                    } }) })] }));
+}
+
+export { AddressForm };

package/dist/forms/partials/address-form/address-form.module.css.js

@@ -0,0 +1,3 @@
+var formStyles = {"form":"address-form-module-pbmJ-","span-2":"address-form-module-dRYo2","currency-warning":"address-form-module-62GxY"};
+
+export { formStyles as default };

package/dist/forms/partials/password-validation/password-validation.d.ts

@@ -0,0 +1,4 @@
+export declare function PasswordValidation({ isDisabled, onPasswordChanged, }: {
+    isDisabled?: boolean;
+    onPasswordChanged?: (password: string | undefined) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/forms/partials/password-validation/password-validation.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { validatePassword } from '../../../shared/model/account.js';
+import { PasswordField } from '../../fields/password-field/password-field.js';
+import { FormSegment } from '../../layout/form/form-segment.js';
+
+function PasswordValidation({ isDisabled = false, onPasswordChanged, }) {
+    const t = useFormattedMessage();
+    const [password, setPassword] = useState('');
+    const [passwordConfirm, setPasswordConfirm] = useState('');
+    const isMatchingPasswords = useCallback(() => {
+        if (!password || !passwordConfirm)
+            return undefined;
+        return password === passwordConfirm;
+    }, [password, passwordConfirm]);
+    useEffect(() => {
+        if (!isMatchingPasswords())
+            return onPasswordChanged?.(password);
+        onPasswordChanged?.(password);
+    }, [isMatchingPasswords, onPasswordChanged, password, passwordConfirm]);
+    return (jsxs(Fragment, { children: [jsx(FormSegment, { children: jsx(PasswordField, { autoComplete: "new-password", "data-test-selector": "new_password", info: "Password must be at least 8 characters long, include at least one number, at least one lowercase character, at least one uppercase character and at least one non-alphanumeric character.", isDisabled: isDisabled, isRequired: true, label: t('New password'), name: "new-password", onChange: setPassword, validate: value => {
+                        if (!value)
+                            return;
+                        return (validatePassword(value) ||
+                            t('Password does not meet requirements'));
+                    } }) }), jsx(FormSegment, { children: jsx(PasswordField, { autoComplete: "new-password", customErrorMessage: isMatchingPasswords() === false
+                        ? 'Passwords do not match'
+                        : undefined, "data-test-selector": "new_passwordConfirm", isDisabled: isDisabled, isInvalid: isMatchingPasswords() === false ? true : undefined, isRequired: true, label: t('Confirm new password'), onChange: setPasswordConfirm, value: passwordConfirm }) })] }));
+}
+
+export { PasswordValidation };

package/dist/global-search/categories-grid/categories-grid.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CategoryCard } from '../../cards/category-card/category-card.js';
+import styles from './categories-grid.module.css.js';
+
+function CategoriesGrid({ categories, onItemClick, }) {
+    return (jsx("div", { className: styles['categories-grid'], children: categories.map(category => (jsx("div", { className: styles['category'], children: jsx(CategoryCard, { className: styles['category-grid-card'], href: category.href, image: {
+                    fit: 'contain',
+                    image: category.image,
+                    title: category.title,
+                }, onClick: onItemClick, route: { prefetch: true }, title: category.title }, category.title) }, category.title))) }));
+}
+
+export { CategoriesGrid };

package/dist/global-search/categories-grid/categories-grid.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1","category-grid-card":"categories-grid-module-Q7i00"};
+
+export { styles as default };

package/dist/global-search/global-search-provider/global-search-provider.d.ts

@@ -1,10 +1,4 @@
 import { SearchClient } from 'algoliasearch';
-export declare const GlobalSearchDisclosureContext: React.Context<{
-    close: VoidFunction;
-    isOpen: boolean;
-    open: VoidFunction;
-    toggle: VoidFunction;
-} | null>;
 export declare function GlobalSearchProvider({ children, searchClient, }: {
     children: React.ReactNode;
     searchClient: SearchClient;

package/dist/global-search/global-search-provider/global-search-provider.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { AlgoliaSearchProvider } from '../../algolia/algolia-search-provider.js';
+
+function GlobalSearchProvider({ children, searchClient, }) {
+    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: children }));
+}
+
+export { GlobalSearchProvider };

package/dist/global-search/global-search-provider/use-search-disclosure.d.ts

@@ -1,6 +1 @@
-export declare const useGlobalSearchDisclosure: () => {
-    close: VoidFunction;
-    isOpen: boolean;
-    open: VoidFunction;
-    toggle: VoidFunction;
-};
+export declare const useGlobalSearchDisclosure: () => import("../../drawer/use-drawer").UseDrawerReturnType;

package/dist/global-search/global-search-provider/use-search-disclosure.js

@@ -0,0 +1,9 @@
+"use client";
+import { useDrawer } from '../../drawer/use-drawer.js';
+
+const useGlobalSearchDisclosure = () => useDrawer({
+    groupId: 'drawers-header',
+    instanceId: 'global-search',
+});
+
+export { useGlobalSearchDisclosure };

package/dist/global-search/global-search.d.ts

@@ -7,4 +7,6 @@ export declare function SearchRoot(): import("react/jsx-runtime").JSX.Element;
  * uses the autocomplete widgets
  * https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
  */
-export declare function GlobalSearch(): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalSearch({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/global-search/global-search.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { Transition } from 'react-transition-group';
+import clsx from 'clsx';
+import { useAlgoliaSearch } from '../algolia/use-algolia-search.js';
+import { Drawer } from '../drawer/drawer.js';
+import { useOnNavigate } from '../shared/routing/use-on-navigate.js';
+import { useGlobalSearchDisclosure } from './global-search-provider/use-search-disclosure.js';
+import { ConnectedSearchInput } from './search-input/connected-search-input.js';
+import { SearchResultPanel } from './search-result-panel/search-result-panel.js';
+import styles from './global-search.module.css.js';
+
+function SearchRoot() {
+    const { autocomplete, inputRef } = useAlgoliaSearch();
+    const { isOpen } = useGlobalSearchDisclosure();
+    useEffect(() => {
+        if (inputRef.current === null)
+            return;
+        if (isOpen) {
+            inputRef.current.focus();
+        }
+        else {
+            inputRef.current.blur();
+        }
+    }, [inputRef, isOpen]);
+    return (jsx("div", { className: styles['search-root'], children: jsx(Transition, { in: isOpen, nodeRef: inputRef, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles['search-container'], styles[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles.input, children: jsx(ConnectedSearchInput, {}) }), jsx(SearchResultPanel, {})] })) }) }));
+}
+/**
+ * Global search using algolia autocomplete with a custom renderer
+ * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/
+ *
+ * Highly influenced by the two column layout sandbox which
+ * uses the autocomplete widgets
+ * https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
+ */
+// TODO: this is used in Header V1; header V2 only embeds a SearchRoot instance (perhaps use a more descriptive name)
+function GlobalSearch({ className }) {
+    const { close, groupId, instanceId } = useGlobalSearchDisclosure();
+    useOnNavigate(close);
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: (className), groupId: groupId, instanceId: instanceId, position: "top", showUnder: "header", children: jsx(SearchRoot, {}) }));
+}
+
+export { GlobalSearch, SearchRoot };

package/dist/global-search/global-search.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx","search-container":"global-search-module--orCF","input":"global-search-module-vXnL6","entering":"global-search-module-MYwlp","entered":"global-search-module-Jmt3c","exiting":"global-search-module-gQQfY","exited":"global-search-module-AABcw"};
+
+export { styles as default };

package/dist/global-search/plugins/categories-plugin.d.ts

@@ -1,4 +1,4 @@
-import { AutocompletePlugin } from '@algolia/autocomplete-core';
+import { AutocompletePlugin } from '@algolia/autocomplete-core/dist/esm';
 import { Hit } from '@algolia/client-search';
 import { SearchClient } from 'algoliasearch';
 export type CategoryHit = Hit<{