@sonic-equipment/ui 121.0.0 → 123.0.0

package/dist/checkout/adyen-payment.d.ts

@@ -0,0 +1,21 @@
+import { MutableRefObject } from 'react';
+import Dropin from '@adyen/adyen-web/dist/types/components/Dropin';
+import { AdyenPaymentModel } from 'shared/api/storefront/model/shop.model';
+import '@adyen/adyen-web/dist/adyen.css';
+interface AdyenPaymentProps {
+    amount: number;
+    billToId: string;
+    cartId: string;
+    countryCode: string;
+    currencyCode: string;
+    dropinRef: MutableRefObject<Dropin | null>;
+    environment: 'test' | 'live' | 'live-us' | 'live-au' | 'live-apse' | 'live-in';
+    locale: string;
+    onComplete: (result: AdyenPaymentModel) => Promise<void>;
+    onError: (error: unknown, result: AdyenPaymentModel) => void;
+    orderAmount: number;
+    redirectResult: string | undefined;
+    returnUrl: string;
+}
+export declare function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dropinRef, environment, locale, onComplete, onError, orderAmount, redirectResult, returnUrl, }: AdyenPaymentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/checkout/adyen-payment.js

@@ -0,0 +1,165 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import AdyenCheckout from '@adyen/adyen-web';
+import qs from 'query-string';
+import { useCreateAdyenSession } from '../shared/api/storefront/hooks/payment/use-create-adyen-session.js';
+import { useFetchAdyenConfig } from '../shared/api/storefront/hooks/payment/use-fetch-adyen-config.js';
+import { getAdyenPaymentDetails, postAdyenPayment } from '../shared/api/storefront/services/cart-service.js';
+import { parseAmount } from './parse-amount.js';
+
+function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dropinRef, environment, locale, onComplete, onError, orderAmount, redirectResult, returnUrl, }) {
+    const dropinDivRef = useRef(null);
+    const { data: adyenSettings } = useFetchAdyenConfig();
+    const { data: adyenSession, error, mutate: createAdyenSession, } = useCreateAdyenSession();
+    useEffect(() => {
+        createAdyenSession({
+            cartId,
+            orderAmount,
+            returnUrl,
+        });
+    }, [cartId, countryCode, orderAmount, returnUrl, createAdyenSession]);
+    useEffect(() => {
+        if (!adyenSettings || !adyenSession || !dropinDivRef.current)
+            return;
+        const options = {
+            amount: parseAmount(amount, countryCode),
+            analytics: {
+                enabled: false,
+            },
+            clientKey: adyenSettings.clientKey,
+            countryCode,
+            environment,
+            locale,
+            onAdditionalDetails: (async (state, _component) => {
+                if (!state.details.redirectResult) {
+                    throw new Error('No redirectResult');
+                }
+                const result = await getAdyenPaymentDetails({
+                    redirectResult: state.details.redirectResult,
+                });
+                const { amount: adyenAmount, customerId: adyenCustomerId } = getAndRemoveAdyenQueryParams();
+                if (amount.toFixed(2).replaceAll(/[,.]/gi, '') !== adyenAmount)
+                    return onError(new Error('Invalid amount'), result);
+                if (billToId !== adyenCustomerId)
+                    return onError(new Error('Invalid customer'), result);
+                return handlePaymentResponse(result, onComplete, onError);
+            }),
+            onSubmit: (async (state, _component) => {
+                if (state.data.paymentMethod.type === 'paybybank') {
+                    state.data.countryCode = countryCode;
+                }
+                const result = await postAdyenPayment({
+                    currencyCode,
+                    data: state.data,
+                    orderAmount,
+                    returnUrl,
+                    webOrderNumber: adyenSession.webOrderNumber,
+                });
+                if (result.action) {
+                    if (result.action.type === 'redirect') {
+                        return handleRedirectPaymentAction(result);
+                    }
+                    throw new Error('Invalid payment response');
+                }
+                return handlePaymentResponse(result, onComplete, onError);
+            }),
+            session: {
+                ...adyenSession,
+                id: adyenSession.transactionId,
+            },
+            showPayButton: false,
+        };
+        (async function loadAdyen() {
+            if (!dropinDivRef.current)
+                return;
+            const checkout = await AdyenCheckout(options);
+            const dropIn = checkout.create('dropin');
+            if (redirectResult)
+                checkout.submitDetails({ details: { redirectResult } });
+            if (dropinRef.current)
+                dropinRef.current.unmount();
+            dropinRef.current = dropIn.mount(dropinDivRef.current);
+        })();
+    }, [
+        billToId,
+        adyenSettings,
+        adyenSession,
+        amount,
+        countryCode,
+        currencyCode,
+        environment,
+        locale,
+        orderAmount,
+        redirectResult,
+        returnUrl,
+        dropinRef,
+        onComplete,
+        onError,
+    ]);
+    if (error)
+        return jsx("div", { children: String(error) });
+    return jsx("div", { ref: dropinDivRef, id: "dropin" });
+}
+function getAndRemoveAdyenQueryParams() {
+    if (typeof window === 'undefined')
+        return {};
+    const params = qs.parse(window.location.search || '');
+    const { amount, customerId, redirectResult } = params;
+    delete params['redirectResult'];
+    delete params['amount'];
+    delete params['customerId'];
+    history?.pushState({}, '', `${window.location.pathname}${qs.stringify(params) ? `?${qs.stringify(params)}` : ''}`);
+    return { amount, customerId, redirectResult };
+}
+async function handlePaymentResponse(result, onSubmit, onError) {
+    try {
+        if (result.action) {
+            if (result.action.type === 'redirect') {
+                handleRedirectPaymentAction(result);
+            }
+            else {
+                throw new Error('Adyen_Error');
+            }
+        }
+        else {
+            switch (result.resultCode) {
+                case 'Pending':
+                case 'Received':
+                case 'Authorised':
+                    return await onSubmit(result);
+                case 'Refused':
+                    throw new Error('Adyen_Refused');
+                case 'Cancelled':
+                    throw new Error('Adyen_Cancelled');
+                default:
+                    throw new Error('Adyen_Error');
+            }
+        }
+    }
+    catch (error) {
+        onError(error, result);
+    }
+}
+function handleRedirectPaymentAction(adyenPaymentResult) {
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return;
+    if (adyenPaymentResult.action.method === 'GET') {
+        window.location.href = adyenPaymentResult.action.url;
+    }
+    else if (adyenPaymentResult.action.method === 'POST') {
+        const form = document.createElement('form');
+        form.method = 'POST';
+        form.action = adyenPaymentResult.action.url;
+        for (const key in adyenPaymentResult.action.data) {
+            const input = document.createElement('input');
+            input.name = key;
+            input.value = adyenPaymentResult.action.data[key];
+            form.append(input);
+        }
+        document.body.append(form);
+        form.submit();
+        form.remove();
+    }
+}
+
+export { AdyenPayment };

package/dist/checkout/parse-amount.d.ts

@@ -0,0 +1,2 @@
+import { PaymentAmountExtended } from '@adyen/adyen-web/dist/types/types';
+export declare function parseAmount(amount: string | number, countryCode: string): PaymentAmountExtended;

package/dist/checkout/parse-amount.js

@@ -0,0 +1,10 @@
+import { getCurrencyByCountryCode } from '../shared/utils/price.js';
+
+function parseAmount(amount, countryCode) {
+    return {
+        currency: getCurrencyByCountryCode(countryCode),
+        value: Number(amount),
+    };
+}
+
+export { parseAmount };

package/dist/checkout/payment-details.d.ts

@@ -0,0 +1,5 @@
+import { CartModel } from '../shared/api/storefront/model/shop.model';
+export declare function PaymentDetails({ cart, onCartChanged, }: {
+    cart: CartModel;
+    onCartChanged: (cart: CartModel) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/checkout/payment-details.js

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { TextField } from '../forms/text-field/text-field.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
+
+function PaymentDetails({ cart, onCartChanged, }) {
+    const [vatNumber, setVatNumber] = useState(cart.customerVatNumber);
+    const [poNumber, setPONumber] = useState(cart.poNumber);
+    const t = useFormattedMessage();
+    const onCartChangedDebounced = useDebouncedCallback(onCartChanged, 500);
+    useEffect(() => {
+        if (!vatNumber || !poNumber)
+            return;
+        onCartChangedDebounced({ ...cart, customerVatNumber: vatNumber, poNumber });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [vatNumber, poNumber]);
+    return (jsxs(Fragment, { children: [jsx(TextField, { isRequired: true, showLabel: true, label: t('VAT Number'), minLength: 8, onChange: setVatNumber, value: vatNumber }), jsx(TextField, { isRequired: true, showLabel: true, label: t('PO Number'), onChange: setPONumber, value: poNumber })] }));
+}
+
+export { PaymentDetails };

package/dist/checkout/payment.d.ts

@@ -0,0 +1,6 @@
+import { AdyenPaymentModel, CartModel } from '../shared/api/storefront/model/shop.model';
+export declare function Payment({ cart: _cart, onError, onPaymentComplete, }: {
+    cart: CartModel;
+    onError: (error: unknown, result: AdyenPaymentModel) => void;
+    onPaymentComplete: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/checkout/payment.js

@@ -0,0 +1,69 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect, useCallback } from 'react';
+import { Form } from 'react-aria-components';
+import qs from 'query-string';
+import { Button } from '../buttons/button/button.js';
+import { usePatchCart } from '../shared/api/storefront/hooks/cart/use-patch-cart.js';
+import { usePlaceOrder } from '../shared/api/storefront/hooks/cart/use-place-order.js';
+import { currencySymbolToISO } from '../shared/model/currency.js';
+import { AdyenPayment } from './adyen-payment.js';
+import { PaymentDetails } from './payment-details.js';
+
+function Payment({ cart: _cart, onError, onPaymentComplete, }) {
+    const patchCart = usePatchCart();
+    const placeOrder = usePlaceOrder();
+    const dropinRef = useRef(null);
+    const cartRef = useRef(_cart);
+    const cart = cartRef.current;
+    const { redirectResult } = 
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    typeof window === 'undefined' ? {} : qs.parse(window.location.search || '');
+    const allowSubmit = !redirectResult;
+    const countryCode = _cart.billTo?.country?.abbreviation;
+    useEffect(() => {
+        cartRef.current = _cart;
+    }, [_cart]);
+    async function onSubmit() {
+        const cart = cartRef.current;
+        dropinRef.current?.showValidation();
+        if (!cart.customerVatNumber)
+            return;
+        if (dropinRef.current) {
+            if (!dropinRef.current.isValid)
+                return;
+            await patchCart({ cart });
+            dropinRef.current.submit();
+        }
+    }
+    const onComplete = useCallback(async (result) => {
+        const cart = cartRef.current;
+        await placeOrder({
+            cart: {
+                ...cart,
+                paymentMethod: null,
+                paymentOptions: {
+                    ...cart.paymentOptions,
+                    adyenPspReference: result.pspReference,
+                    isAdyenDropIn: true,
+                },
+            },
+        });
+        return onPaymentComplete();
+    }, [onPaymentComplete, placeOrder]);
+    return (jsxs(Fragment, { children: [jsx("h2", { children: "Payment" }), jsxs(Form, { onSubmit: e => {
+                    e.preventDefault();
+                    onSubmit();
+                }, children: [!redirectResult && (jsx(PaymentDetails, { cart: cart, onCartChanged: cart => {
+                            cartRef.current = cart;
+                        } })), cart.paymentMethod?.name === 'PBI' && 'Pay by invoice', cart.paymentMethod?.name !== 'PBI' &&
+                        cart.paymentOptions &&
+                        cart.billTo?.id &&
+                        countryCode && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, billToId: cart.billTo.id, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencySymbolToISO[cart.currencySymbol], dropinRef: dropinRef, environment: "test", locale: "nl-NL", onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, redirectResult: !redirectResult || Array.isArray(redirectResult)
+                            ? undefined
+                            : redirectResult, returnUrl: typeof window === 'undefined'
+                            ? ''
+                            : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+                                `${window.location.pathname}${window.location.search ? `?${window.location.search}` : ''}` })), jsx(Button, { isDisabled: !allowSubmit, type: "submit", children: "Pay" })] })] }));
+}
+
+export { Payment };

package/dist/collapsables/accordion/accordion-item.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type BorderType = 'top' | 'middle' | 'middle-accentuated' | 'bottom';
 export interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    allowToggle?: boolean;
     borderType?: BorderType | BorderType[];
     children: ReactNode;
     className?: string;
@@ -11,4 +12,4 @@ export interface AccordionItemProps {
     size?: 'md' | 'lg';
     title: ReactNode;
 }
-export declare function AccordionItem({ _pseudo, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ _pseudo, allowToggle, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/accordion/accordion-item.js

@@ -7,12 +7,16 @@ import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { ensureArray } from '../../shared/utils/array.js';
 import styles from './accordion.module.css.js';
 
-function AccordionItem({ _pseudo = 'none', borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
+function AccordionItem({ _pseudo = 'none', allowToggle = true, borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
     const { isOpen, toggle } = useDisclosure(initialIsOpen);
     const panelId = `panel-${id}`;
     return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], {
             [styles['is-open']]: isOpen,
-        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
+            [styles['allow-toggle']]: allowToggle,
+        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
+                        if (allowToggle)
+                            toggle();
+                    }, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
 }
 
 export { AccordionItem };

package/dist/collapsables/accordion/accordion.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
+var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","allow-toggle":"accordion-module-QEO2d","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
 
 export { styles as default };

package/dist/config.js

@@ -3,7 +3,7 @@ import main from './shared/utils/merge.js';
 
 const env = (typeof process === 'undefined'
     ? { VITE_SHOP_API_URL: ""}
-    : main(process.env, { VITE_SHOP_API_URL: ""}));
+    : main({ ...process.env }, { VITE_SHOP_API_URL: ""}));
 const validateEnvVariable = (name, value) => {
     if (value)
         return value;

package/dist/exports.d.ts

@@ -55,6 +55,10 @@ export * from './carousel/usp-carousel/product-usp-carousel-slide';
 export * from './carousel/usp-carousel/usp-carousel';
 export * from './cart-totals/cart-totals';
 export * from './cart-totals/cart-totals-summary';
+export * from './checkout/adyen-payment';
+export * from './checkout/parse-amount';
+export * from './checkout/payment';
+export * from './checkout/payment-details';
 export * from './collapsables/accordion/accordion';
 export * from './collapsables/accordion/accordion-item';
 export * from './collapsables/show-all/show-all';
@@ -163,9 +167,11 @@ export * from './shared/api/bff/hooks/use-fetch-announcements';
 export * from './shared/api/bff/hooks/use-fetch-product-details-page-data';
 export * from './shared/api/bff/hooks/use-fetch-product-listing-page-data';
 export * from './shared/api/bff/services/bff-service';
+export * from './shared/api/storefront/hooks/authentication/use-create-guest-account';
 export * from './shared/api/storefront/hooks/authentication/use-fetch-session';
 export * from './shared/api/storefront/hooks/authentication/use-invalidate-session';
 export * from './shared/api/storefront/hooks/authentication/use-is-authenticated';
+export * from './shared/api/storefront/hooks/authentication/use-patch-session';
 export * from './shared/api/storefront/hooks/authentication/use-sign-in';
 export * from './shared/api/storefront/hooks/authentication/use-sign-out';
 export * from './shared/api/storefront/hooks/cart/use-add-product-to-current-cart';
@@ -184,6 +190,12 @@ export * from './shared/api/storefront/hooks/cart/use-patch-cart';
 export * from './shared/api/storefront/hooks/cart/use-place-order';
 export * from './shared/api/storefront/hooks/cart/use-save-cart-for-later';
 export * from './shared/api/storefront/hooks/cart/use-update-cart-line-by-id';
+export * from './shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses';
+export * from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses';
+export * from './shared/api/storefront/hooks/customer/use-update-bill-to-address';
+export * from './shared/api/storefront/hooks/payment/use-create-adyen-session';
+export * from './shared/api/storefront/hooks/payment/use-fetch-adyen-config';
+export * from './shared/api/storefront/hooks/payment/use-invalidate-adyen';
 export * from './shared/api/storefront/hooks/translation/use-fetch-translations';
 export * from './shared/api/storefront/hooks/website/use-fetch-countries';
 export * from './shared/api/storefront/hooks/website/use-fetch-countries-languages';
@@ -198,6 +210,8 @@ export * from './shared/api/storefront/hooks/wishlist/use-fetch-all-wishlists-it
 export * from './shared/api/storefront/hooks/wishlist/use-fetch-wishlists';
 export * from './shared/api/storefront/services/authentication-service';
 export * from './shared/api/storefront/services/cart-service';
+export * from './shared/api/storefront/services/customer-service';
+export * from './shared/api/storefront/services/payment-service';
 export * from './shared/api/storefront/services/translation-service';
 export * from './shared/api/storefront/services/website-service';
 export * from './shared/api/storefront/services/wishlist-service';
@@ -215,8 +229,10 @@ export * from './shared/hooks/use-scroll-lock';
 export * from './shared/hooks/use-scroll-to';
 export * from './shared/hooks/use-session-storage';
 export * from './shared/hooks/use-watch-css-property';
+export * from './shared/model/address';
 export * from './shared/model/announcement';
 export * from './shared/model/category';
+export * from './shared/model/countries';
 export * from './shared/model/countries-languages';
 export * from './shared/model/currency';
 export * from './shared/model/hit';
@@ -238,6 +254,7 @@ export * from './shared/utils/environment';
 export * from './shared/utils/event-emitter';
 export * from './shared/utils/merge';
 export * from './shared/utils/price';
+export * from './shared/utils/random';
 export * from './shared/utils/time';
 export * from './shared/utils/uuid';
 export * from './shared/utils/wait';
@@ -251,4 +268,5 @@ export * from './toast/toast-provider';
 export * from './toast/types';
 export * from './toast/use-toast';
 export * from './tokens/tokens';
+export * from './tooltip/tooltip';
 export * from './typography/heading/heading';

package/dist/forms/field-error/field-error.d.ts

@@ -1,5 +1,18 @@
+import { ReactNode } from 'react';
+export type ValidationError = string | string[];
+export type ValidateFunction<T> = (value: T) => ValidationError | true | null | undefined;
+export interface ValidationResult {
+    /** Whether the input value is invalid. */
+    isInvalid: boolean;
+    /** The native validation details for the input. */
+    validationDetails: ValidityState;
+    /** The current error messages for the input if it is invalid, otherwise an empty array. */
+    validationErrors: string[];
+}
 interface FieldErrorProps {
-    children?: string;
+    children?: ReactNode | ((values: ValidationResult & {
+        defaultChildren: ReactNode;
+    }) => ReactNode);
 }
 export declare function FieldError({ children }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/forms/field-error/field-error.js

@@ -1,10 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { FieldError as FieldError$1 } from 'react-aria-components';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import styles from './field-error.module.css.js';
 
 function FieldError({ children }) {
-    return (jsx(FieldError$1, { className: styles['field-error'], children: children }));
+    const t = useFormattedMessage();
+    return (jsx(FieldError$1, { className: styles['field-error'], children: children ||
+            (result => {
+                if (!result.isInvalid)
+                    return;
+                if (result.validationDetails.customError)
+                    return result.validationErrors[0];
+                const validationErrorType = Object.entries(result.validationDetails)
+                    .filter(([, value]) => value)
+                    .map(([key]) => key)[0];
+                if (validationErrorType)
+                    return t(`validation.${validationErrorType}`);
+                return t('validation.invalid');
+            }) }));
 }
 
 export { FieldError };

package/dist/forms/input/input.d.ts

@@ -3,6 +3,7 @@ import { Input as AriaInput } from 'react-aria-components';
 export interface InputProps extends Omit<ComponentProps<typeof AriaInput>, 'size'> {
     _pseudo?: 'focus' | 'none';
     autoGrow?: boolean;
+    label: string;
     size?: 'md' | 'lg';
     value?: string | number;
 }

package/dist/forms/input/input.js

@@ -10,7 +10,7 @@ import styles from './input.module.css.js';
  * This component is used to create an input that grows as the user types.
  * It uses a shadow input to calculate the width of the input.
  */
-const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputProps }, inputRef) => {
+const Input = forwardRef(({ _pseudo = 'none', autoGrow, label, size = 'lg', ...inputProps }, inputRef) => {
     const [props, ref] = useContextProps(inputProps, inputRef, InputContext);
     const { defaultValue, onChange, value: controlledValue } = props;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -20,7 +20,7 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
         ? onChange?.(event)
         : setUncontrolledValue(event.target.value);
     const { pressProps } = usePress({});
-    return (jsx("div", { className: clsx(styles['input-container'], styles[size], styles[_pseudo]), children: jsxs("div", { className: clsx({ [styles['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
+    return (jsx("div", { className: clsx(styles['input-container'], styles[size], styles[_pseudo]), children: jsxs("div", { className: clsx({ [styles['growing-input']]: autoGrow }), children: [jsx(Input$1, { "aria-label": label, size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
                         e.preventDefault();
                         e.stopPropagation();
                         e.target.focus();

package/dist/forms/number-field/number-field.d.ts

@@ -1,4 +1,5 @@
 import { FormEventHandler, KeyboardEvent } from 'react';
+import { ValidateFunction } from '../field-error/field-error';
 export type NumberFieldSize = 'md' | 'lg';
 interface NumberFieldProps {
     autoFocus?: boolean;
@@ -20,6 +21,7 @@ interface NumberFieldProps {
     placeholder?: string;
     showLabel?: boolean;
     size?: NumberFieldSize;
+    validate?: ValidateFunction<number>;
     value?: number;
     withButtons?: boolean;
 }
@@ -27,5 +29,5 @@ interface NumberFieldProps {
  * This component is used to create a number field.
  * This field can also grow when a user types in text.
  */
-export declare function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel, size, value, withButtons, }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel, size, validate, value, withButtons, }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/forms/number-field/number-field.js

@@ -15,12 +15,12 @@ import styles from './number-field.module.css.js';
  * This component is used to create a number field.
  * This field can also grow when a user types in text.
  */
-function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', value, withButtons, }) {
+function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', validate, value, withButtons, }) {
     const inputRef = useRef(null);
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles['button-input-container'], children: [withButtons && (jsx(Button, { "data-test-selector": "decrement", isDisabled: isDisabled, 
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, validate: validate, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles['button-input-container'], children: [withButtons && (jsx(Button, { "data-test-selector": "decrement", isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
-                        onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button, { "data-test-selector": "increment", isDisabled: isDisabled, 
+                        onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, label: label, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button, { "data-test-selector": "increment", isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
                         onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "increment", children: jsx(StrokeExpandIcon, {}) }))] }), jsx(FieldError, {})] }));

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

@@ -1,4 +1,5 @@
 import { FormEventHandler, KeyboardEvent } from 'react';
+import { ValidateFunction } from '../field-error/field-error';
 interface TextFieldProps {
     autoFocus?: boolean;
     autoGrow?: boolean;
@@ -10,6 +11,7 @@ interface TextFieldProps {
     isRequired?: boolean;
     label: string;
     maxLength?: number;
+    minLength?: number;
     name?: string;
     onChange?: (value: string) => void;
     onInput?: FormEventHandler<HTMLInputElement>;
@@ -18,6 +20,7 @@ interface TextFieldProps {
     rows?: number;
     showLabel?: boolean;
     size?: 'md' | 'lg';
+    validate?: ValidateFunction<string>;
     value?: string;
 }
 /**
@@ -25,5 +28,5 @@ interface TextFieldProps {
  * It can be used as a single line input or as a textarea.
  * This field can also grow when a user types in text.
  */
-export declare function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel, size, value, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, minLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel, size, validate, value, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,10 +13,10 @@ import styles from './text-field.module.css.js';
  * It can be used as a single line input or as a textarea.
  * This field can also grow when a user types in text.
  */
-function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
-    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
+function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, minLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', validate, value, }) {
+    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, minLength: minLength, name: name, onChange: value => {
             onChange?.(value);
-        }, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
+        }, onInput: onInput, onKeyUp: e => onKeyUp?.(e), validate: validate, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, label: label, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, label: label, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
 }
 
 export { TextField };

package/dist/forms/textarea/textarea.d.ts

@@ -2,6 +2,7 @@ import { ComponentProps, FC } from 'react';
 import { TextArea as AriaTextArea } from 'react-aria-components';
 export interface TextAreaProps extends Omit<ComponentProps<typeof AriaTextArea>, 'size'> {
     autoGrow?: boolean;
+    label: string;
     size?: 'md' | 'lg';
 }
 /**