@sonic-equipment/ui 133.0.0 → 134.0.0

package/dist/algolia/{algolia-intialization.js → algolia-initialization.js}

@@ -2,6 +2,7 @@
 import { config } from '../config.js';
 import Cookies from 'js-cookie';
 import aa from 'search-insights';
+import { request } from '../shared/fetch/request.js';
 import { createUUID } from '../shared/utils/uuid.js';
 
 let userToken = generateUserToken();
@@ -19,6 +20,12 @@ aa('getUserToken', {}, (err, value) => {
 aa('onUserTokenChange', value => {
     userToken = value === undefined ? generateUserToken() : String(value);
 });
+request.after(({ body, options: { url } }) => {
+    if (url.toLocaleLowerCase().includes('/api/v1/sessions/current')) {
+        const userToken = body?.userProfileId || generateUserToken();
+        aa('setUserToken', userToken);
+    }
+});
 function generateUserToken() {
     return `anonymous-${createUUID()}`;
 }

package/dist/algolia/algolia-insights-provider.js

@@ -1,13 +1,20 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext } from 'react';
+import { useCultureCode } from '../intl/use-culture-code.js';
+import { getLanguageCodeFromCultureCode } from '../intl/utils.js';
+import { environment } from '../shared/utils/environment.js';
+import { getAlgoliaIndex } from './algolia-index-config.js';
 import { useAlgoliaInsightsGlobalState } from './use-algolia-insights-provider-global-state.js';
 
 const AlgoliaInsightsProviderContext = createContext({});
 function AlgoliaInsightsProvider({ children, value, }) {
+    const cultureCode = useCultureCode();
+    const algoliaIndex = getAlgoliaIndex(environment, getLanguageCodeFromCultureCode(cultureCode));
     const [globalState] = useAlgoliaInsightsGlobalState();
     const context = useContext(AlgoliaInsightsProviderContext);
     const combinedValue = {
+        index: algoliaIndex.default,
         ...globalState,
         ...context,
         ...value,

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

@@ -11,6 +11,7 @@ import { querySuggestionsPlugin } from '../global-search/plugins/query-suggestio
 import { quickAccessPlugin } from '../global-search/plugins/quick-access-plugin.js';
 import { recentSearchesPlugin } from '../global-search/plugins/recent-searches-plugin.js';
 import { useLanguageCode } from '../intl/use-language-code.js';
+import { useDataLayer } from '../shared/ga/use-data-layer.js';
 import { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
 import { environment } from '../shared/utils/environment.js';
 import { getAlgoliaIndex } from './algolia-index-config.js';
@@ -19,6 +20,7 @@ import { createSonicSearchClient } from './algolia-sonic-searchclient.js';
 
 const GlobalSearchContext = createContext(null);
 function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
+    const { dataLayer } = useDataLayer();
     const [state, setState] = useState({
         activeItemId: null,
         collections: [],
@@ -42,6 +44,9 @@ function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
         return [
             {
                 getItems() {
+                    if (!query) {
+                        return [];
+                    }
                     return getAlgoliaResults({
                         queries: [
                             {
@@ -53,6 +58,20 @@ function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
                             },
                         ],
                         searchClient,
+                        transformResponse({ hits, results }) {
+                            dataLayer.push({
+                                brands_numSearchResults: null,
+                                categories_numSearchResults: null,
+                                content_numSearchResults: null,
+                                correctedQuery: undefined,
+                                event: 'searchResults',
+                                numSearchResults: results[0].nbHits,
+                                product_numSearchResults: null,
+                                searchQuery: query,
+                                searchTerm: null,
+                            });
+                            return hits;
+                        },
                     });
                 },
                 sourceId: 'productsPlugin',

package/dist/algolia/use-algolia-insights.d.ts

@@ -1,19 +1,23 @@
-import { CartLineModel } from '../shared/api/storefront/model/storefront.model';
+import { CartLineModel, CartModel } from '../shared/api/storefront/model/storefront.model';
 import { AlgoliaInsightsProviderGlobalState } from './use-algolia-insights-provider-global-state';
 export interface UseAlgoliaEventResult {
     context: Readonly<AlgoliaInsightsProviderGlobalState>;
-    sendAddToCartFromProductListPageEvent({ cartLine, objectId, }: {
+    sendAddToCartFromProductDetailsPageEvent({ cartLine, }: {
         cartLine: CartLineModel;
-        objectId: string;
     }): void;
-    sendAddToCartFromSearchEvent({ cartLine, objectId, queryId, }: {
+    sendAddToCartFromProductListPageEvent({ cartLine, }: {
+        cartLine: CartLineModel;
+    }): void;
+    sendAddToCartFromSearchEvent({ cartLine, queryId, }: {
         cartLine: CartLineModel;
-        objectId: string;
         queryId: string;
     }): void;
-    sendAddToCartFromSearchResultPageEvent({ cartLine, objectId, }: {
+    sendAddToCartFromSearchResultPageEvent({ cartLine, }: {
         cartLine: CartLineModel;
+    }): void;
+    sendAddToWishListFromProductDetailsPageEvent({ objectId, position, }: {
         objectId: string;
+        position?: number;
     }): void;
     sendAddToWishListFromProductListPageEvent({ objectId, position, }: {
         objectId: string;
@@ -41,5 +45,8 @@ export interface UseAlgoliaEventResult {
         objectId: string;
         position: number;
     }): void;
+    sendPurchaseEventFromPaymentPage({ cart }: {
+        cart: CartModel;
+    }): void;
 }
 export declare function useAlgoliaInsights(): UseAlgoliaEventResult;

package/dist/algolia/use-algolia-insights.js

@@ -1,10 +1,10 @@
 "use client";
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import aa from 'search-insights';
 import { currencySymbolToISO } from '../shared/model/currency.js';
 import { ensureArray } from '../shared/utils/array.js';
+import { userToken } from './algolia-initialization.js';
 import { AlgoliaInsightsProviderContext } from './algolia-insights-provider.js';
-import { userToken } from './algolia-intialization.js';
 import { useAlgoliaInsightsGlobalState } from './use-algolia-insights-provider-global-state.js';
 
 function getCurrencyFromPriceString(priceString) {
@@ -14,9 +14,46 @@ function getCurrencyFromPriceString(priceString) {
 function useAlgoliaInsights() {
     const context = useContext(AlgoliaInsightsProviderContext);
     const [, setGlobalState] = useAlgoliaInsightsGlobalState();
-    return {
+    const result = useMemo(() => ({
         context,
-        sendAddToCartFromProductListPageEvent({ cartLine, objectId }) {
+        sendAddToCartFromProductDetailsPageEvent({ cartLine }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (context.queryId) {
+                aa('addedToCartObjectIDsAfterSearch', {
+                    currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
+                    eventName: 'PDP: AddToCart Clicked',
+                    index: context.index,
+                    objectData: [
+                        {
+                            price: cartLine.pricing?.actualPrice || undefined,
+                            quantity: cartLine.qtyOrdered || undefined,
+                            queryID: context.queryId,
+                        },
+                    ],
+                    objectIDs: [cartLine.erpNumber],
+                    queryID: context.queryId,
+                    userToken,
+                });
+            }
+            else {
+                aa('addedToCartObjectIDs', {
+                    currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
+                    eventName: 'PDP: AddToCart Clicked',
+                    index: context.index,
+                    objectData: [
+                        {
+                            price: cartLine.pricing?.actualPrice || undefined,
+                            quantity: cartLine.qtyOrdered || undefined,
+                            queryID: context.queryId,
+                        },
+                    ],
+                    objectIDs: [cartLine.erpNumber],
+                    userToken,
+                });
+            }
+        },
+        sendAddToCartFromProductListPageEvent({ cartLine }) {
             if (!context.index)
                 return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
@@ -32,12 +69,12 @@ function useAlgoliaInsights() {
                         queryID: context.queryId,
                     },
                 ],
-                objectIDs: [objectId],
+                objectIDs: [cartLine.erpNumber],
                 queryID: context.queryId,
                 userToken,
             });
         },
-        sendAddToCartFromSearchEvent({ cartLine, objectId, queryId }) {
+        sendAddToCartFromSearchEvent({ cartLine, queryId }) {
             if (!context.index)
                 return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             aa('addedToCartObjectIDsAfterSearch', {
@@ -51,12 +88,12 @@ function useAlgoliaInsights() {
                         queryID: context.queryId,
                     },
                 ],
-                objectIDs: [objectId],
+                objectIDs: [cartLine.erpNumber],
                 queryID: queryId,
                 userToken,
             });
         },
-        sendAddToCartFromSearchResultPageEvent({ cartLine, objectId }) {
+        sendAddToCartFromSearchResultPageEvent({ cartLine }) {
             if (!context.index)
                 return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
@@ -72,11 +109,35 @@ function useAlgoliaInsights() {
                         queryID: context.queryId,
                     },
                 ],
-                objectIDs: [objectId],
+                objectIDs: [cartLine.erpNumber],
                 queryID: context.queryId,
                 userToken,
             });
         },
+        sendAddToWishListFromProductDetailsPageEvent({ objectId, position }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (context.queryId) {
+                if (!position)
+                    return console.warn('Unable to send clickedObjectIDsAfterSearch event, no position', context, objectId);
+                aa('clickedObjectIDsAfterSearch', {
+                    eventName: 'PDP: Product Added to Wishlist',
+                    index: context.index,
+                    objectIDs: [objectId],
+                    positions: [position],
+                    queryID: context.queryId,
+                    userToken,
+                });
+            }
+            else {
+                aa('clickedObjectIDs', {
+                    eventName: 'PDP: Product Added to Wishlist',
+                    index: context.index,
+                    objectIDs: [objectId],
+                    userToken,
+                });
+            }
+        },
         sendAddToWishListFromProductListPageEvent({ objectId, position }) {
             if (!context.index)
                 return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
@@ -175,7 +236,29 @@ function useAlgoliaInsights() {
                 queryId: context.queryId,
             });
         },
-    };
+        sendPurchaseEventFromPaymentPage({ cart }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!cart.cartLines || cart.cartLines.length === 0)
+                return console.warn('Unable to send purchasedObjectIDs event, no cartLines', cart);
+            aa('purchasedObjectIDs', {
+                currency: currencySymbolToISO[cart.currencySymbol],
+                eventName: 'Purchase Successful',
+                index: context.index,
+                objectData: cart.cartLines.map(cartLine => ({
+                    price: cartLine.pricing?.actualPrice || undefined,
+                    quantity: cartLine.qtyOrdered || undefined,
+                    queryID: context.queryId,
+                })),
+                objectIDs: cart.cartLines
+                    .map(cartLine => cartLine.erpNumber)
+                    .slice(0, 20),
+                userToken,
+                value: cart.orderSubTotal,
+            });
+        },
+    }), [context, setGlobalState]);
+    return result;
 }
 
 export { useAlgoliaInsights };

package/dist/buttons/button/button.d.ts

@@ -11,10 +11,13 @@ export interface ButtonProps {
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
     isLoading?: string | ReactNode | boolean;
+    isValidating?: boolean;
+    name?: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
+    value?: string;
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, 'data-test-selector': dataTestSelector, form, icon, iconPosition, isDisabled, isLoading, onClick: _onClick, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children, className, color, condensed, 'data-test-selector': dataTestSelector, form, icon, iconPosition, isDisabled, isLoading, isValidating, name, onClick: _onClick, size, type, value, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.js

@@ -6,7 +6,7 @@ import { ProgressCircle } from '../../loading/progress-circle.js';
 import { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
 import buttonStyles from './button.module.css.js';
 
-function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, form, icon, iconPosition = 'left', isDisabled, isLoading = false, onClick: _onClick, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, form, icon, iconPosition = 'left', isDisabled, isLoading = false, isValidating = true, name, onClick: _onClick, size = 'lg', type = 'button', value, variant = 'solid', withArrow = false, }) {
     const showIconOnLeft = icon && iconPosition === 'left';
     const showIconOnRight = icon && iconPosition === 'right';
     const iconElement = icon && jsx("span", { className: buttonStyles.icon, children: icon });
@@ -21,7 +21,7 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
     return (jsx("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, { [buttonStyles['loading-uninformative']]: isLoading === true }, {
             [buttonStyles['loading-informative']]: isLoading &&
                 (typeof isLoading === 'string' || isValidElement(isLoading)),
-        }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, form: form, onClick: onClick, type: type, children: jsxs(Fragment, { children: [showIconOnLeft && iconElement, jsx("span", { className: buttonStyles.children, children: isLoading ? (isLoading === true ? children : isLoading) : children }), withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && iconElement, isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }) }));
+        }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, form: form, formNoValidate: isValidating ? undefined : true, name: name, onClick: onClick, type: type, value: value, children: jsxs(Fragment, { children: [showIconOnLeft && iconElement, jsx("span", { className: buttonStyles.children, children: isLoading ? (isLoading === true ? children : isLoading) : children }), withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && iconElement, isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }) }));
 }
 
 export { Button };

package/dist/country-selector/country-select/country-select.d.ts

@@ -3,6 +3,7 @@ import { Country } from '../../shared/model/countries-languages';
 interface CountrySelectProps<T extends Country | CountryModel> {
     countries: T[];
     'data-test-selector'?: string;
+    isDisabled?: boolean;
     isRequired?: boolean;
     name?: string;
     showLabel?: boolean;

package/dist/country-selector/country-select/country-select.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { Select } from '../../forms/select/select.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 
-function CountrySelect({ countries, 'data-test-selector': dataTestSelector, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
+function CountrySelect({ countries, 'data-test-selector': dataTestSelector, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
     const t = useFormattedMessage();
     const countryOptions = useMemo(() => countries.reduce((acc, country) => ({
         ...acc,
@@ -11,7 +11,7 @@ function CountrySelect({ countries, 'data-test-selector': dataTestSelector, isRe
     }), {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [countries]);
-    return (jsx(Select, { "data-test-selector": dataTestSelector, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
+    return (jsx(Select, { "data-test-selector": dataTestSelector, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
 }
 
 export { CountrySelect };

package/dist/delivery-time/delivery-time.js

@@ -13,7 +13,7 @@ function DeliveryTime({ className, deliveryDate }) {
     return (jsxs("div", { className: clsx(styles['delivery-time'], className), children: [jsx("p", { children: jsx(FormattedMessage, { id: "Delivery expected in {0} {1}", replacementValues: {
                         '0': number.toString(),
                         '1': t.pluralize('unit', unit, number),
-                    } }) }), jsx(Tooltip, { text: t('The expected delivery is an indication based on the product availability and the shipping location.') })] }));
+                    } }) }), jsx(Tooltip, { children: jsx(FormattedMessage, { id: "The expected delivery is an indication based on the product availability and the shipping location." }) })] }));
 }
 
 export { DeliveryTime };

package/dist/exports.d.ts

@@ -7,10 +7,10 @@ export * from './algolia/algolia-filter-panel';
 export * from './algolia/algolia-hit-type';
 export * from './algolia/algolia-hits-provider';
 export * from './algolia/algolia-index-config';
+export * from './algolia/algolia-initialization';
 export * from './algolia/algolia-insight-instant-search-provider';
 export * from './algolia/algolia-insights-provider';
 export * from './algolia/algolia-instant-search-state-provider';
-export * from './algolia/algolia-intialization';
 export * from './algolia/algolia-multi-select-filter-section';
 export * from './algolia/algolia-pagination';
 export * from './algolia/algolia-provider';
@@ -108,6 +108,7 @@ export * from './global-search/search-section/search-list-item';
 export * from './global-search/search-section/search-section';
 export * from './global-search/types';
 export * from './header/cart-icon/connected-cart-icon';
+export * from './info-icon-tooltip/info-icon-tooltip';
 export * from './intl/formatted-message';
 export * from './intl/intl-context';
 export * from './intl/intl-provider';
@@ -149,17 +150,20 @@ export * from './pages/checkout/layouts/checkout-page-layout/components/checkout
 export * from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-header';
 export * from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-link';
 export * from './pages/checkout/order-confirmation-page/order-confirmation-page';
+export * from './pages/checkout/order-confirmation-page/order-confirmation-page-content';
 export * from './pages/checkout/payment-page/components/adyen-payment';
 export * from './pages/checkout/payment-page/components/payment';
 export * from './pages/checkout/payment-page/hooks/use-get-adyen-redirect-result';
 export * from './pages/checkout/payment-page/hooks/use-has-returned-from-adyen';
 export * from './pages/checkout/payment-page/payment-page';
+export * from './pages/checkout/payment-page/payment-page-content';
 export * from './pages/checkout/payment-page/utils/parse-amount';
 export * from './pages/checkout/shipping-page/components/edit-address';
 export * from './pages/checkout/shipping-page/components/readonly-address';
 export * from './pages/checkout/shipping-page/components/sonic-address';
 export * from './pages/checkout/shipping-page/hooks/use-patch-shipping-details';
 export * from './pages/checkout/shipping-page/shipping-page';
+export * from './pages/checkout/shipping-page/shipping-page-content';
 export * from './pages/components/page-container/page-container';
 export * from './pages/components/page-meta-data/page-meta-data';
 export * from './pages/components/page/page';
@@ -287,17 +291,18 @@ 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/promise';
 export * from './shared/utils/random';
 export * from './shared/utils/string';
 export * from './shared/utils/time';
 export * from './shared/utils/types';
 export * from './shared/utils/uuid';
-export * from './shared/utils/wait';
 export * from './sidebar/sidebar';
 export * from './sidebar/sidebar-provider';
 export * from './sidebar/toggle-sidebar-button';
 export * from './sidebar/types';
 export * from './sidebar/use-sidebar';
+export * from './sign-in-form/sign-in-form';
 export * from './toast/toast';
 export * from './toast/toast-provider';
 export * from './toast/types';

package/dist/forms/checkbox/checkbox.d.ts

@@ -4,9 +4,10 @@ export interface CheckboxProps {
     children?: ReactNode;
     className?: string;
     'data-test-selector'?: string;
+    defaultSelected?: boolean;
     isDisabled?: boolean;
     isSelected?: boolean;
     onChange?: (isSelected: boolean) => void;
     value?: string;
 }
-export declare function Checkbox({ _pseudo, children, className, 'data-test-selector': dataTestSelector, isDisabled, isSelected, onChange, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ _pseudo, children, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isSelected, onChange, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/checkbox/checkbox.js

@@ -4,8 +4,8 @@ import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import styles from './checkbox.module.css.js';
 
-function Checkbox({ _pseudo = 'none', children, className, 'data-test-selector': dataTestSelector, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles.checkbox, styles[_pseudo]), "data-test-selector": dataTestSelector, isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+function Checkbox({ _pseudo = 'none', children, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isSelected, onChange, value, }) {
+    return (jsxs(Checkbox$1, { className: clsx(className, styles.checkbox, styles[_pseudo]), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 10 7", children: jsx("path", { d: "m1 2.845 3 3L8.845 1" }) }) }), children] }));
 }
 
 export { Checkbox };

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

@@ -13,6 +13,7 @@ interface FieldErrorProps {
     children?: ReactNode | ((values: ValidationResult & {
         defaultChildren: ReactNode;
     }) => ReactNode);
+    className?: string;
 }
-export declare function FieldError({ children }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldError({ children, className }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,12 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { FieldError as FieldError$1 } from 'react-aria-components';
+import clsx from 'clsx';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import styles from './field-error.module.css.js';
 
-function FieldError({ children }) {
+function FieldError({ children, className }) {
     const t = useFormattedMessage();
-    return (jsx(FieldError$1, { className: styles['field-error'], children: children ||
+    return (jsx(FieldError$1, { className: clsx(className, styles['field-error']), children: children ||
             (result => {
                 if (!result.isInvalid)
                     return;

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;
+    className?: string;
     inlineElement?: React.ReactNode;
     label: string;
     size?: 'md' | 'lg';

package/dist/forms/input/input.js

@@ -9,7 +9,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, inlineElement, label, size = 'lg', ...inputProps }, inputRef) => {
+const Input = forwardRef(({ _pseudo = 'none', autoGrow, className, inlineElement, label, size = 'lg', ...inputProps }, inputRef) => {
     const [props, ref] = useContextProps(inputProps, inputRef, InputContext);
     const { defaultValue, onChange, value: controlledValue } = props;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -18,7 +18,7 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, inlineElement, label, si
     const handleChange = (event) => isControlled
         ? onChange?.(event)
         : setUncontrolledValue(event.target.value);
-    return (jsx("div", { className: clsx(styles['input-container'], styles[size], styles[_pseudo]), children: jsxs("div", { className: clsx(styles.input, {
+    return (jsx("div", { className: clsx(className, styles['input-container'], styles[size], styles[_pseudo]), children: jsxs("div", { className: clsx(styles.input, {
                 [styles['growing-input']]: autoGrow,
             }), children: [jsx(Input$1, { "aria-label": label, size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange, onClick: e => {
                         e.preventDefault();

package/dist/forms/label/label.d.ts

@@ -1,6 +1,8 @@
 interface LabelProps {
     children: string | React.ReactNode;
+    className?: string;
+    'data-test-selector'?: string;
     isRequired?: boolean;
 }
-export declare function Label({ children, isRequired }: LabelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Label({ children, className, 'data-test-selector': dataTestSelector, isRequired, }: LabelProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/forms/label/label.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Label as Label$1 } from 'react-aria-components';
+import clsx from 'clsx';
 import styles from './label.module.css.js';
 
-function Label({ children, isRequired }) {
+function Label({ children, className, 'data-test-selector': dataTestSelector, isRequired, }) {
     if (!children)
         return null;
-    return (jsxs(Label$1, { className: styles.label, children: [children, isRequired && jsx("span", { className: styles.required, children: "*" })] }));
+    return (jsxs(Label$1, { className: clsx(className, styles.label), "data-test-selector": dataTestSelector, children: [children, isRequired && jsx("span", { className: styles.required, children: "*" })] }));
 }
 
 export { Label };

package/dist/forms/switch/switch.d.ts

@@ -7,7 +7,8 @@ export interface SwitchProps {
     defaultSelected?: boolean;
     isDisabled?: boolean;
     isSelected?: boolean;
+    name?: string;
     onChange?: (isSelected: boolean) => void;
     value?: string;
 }
-export declare function Switch({ _pseudo, children, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isSelected, onChange, value, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ _pseudo, children, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isSelected, name, onChange, value, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/switch/switch.js

@@ -4,8 +4,8 @@ import { Switch as Switch$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import styles from './switch.module.css.js';
 
-function Switch({ _pseudo = 'none', children, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Switch$1, { className: clsx(className, styles.switch, styles[_pseudo]), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.indicator }), children] }));
+function Switch({ _pseudo = 'none', children, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isSelected, name, onChange, value, }) {
+    return (jsxs(Switch$1, { className: clsx(className, styles.switch, styles[_pseudo]), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isSelected: isSelected, name: name, onChange: onChange, value: value, children: [jsx("div", { className: styles.indicator }), children] }));
 }
 
 export { Switch };

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

@@ -3,7 +3,9 @@ import { type ValidateFunction } from '../field-error/field-error';
 interface TextFieldProps {
     autoFocus?: boolean;
     autoGrow?: boolean;
+    'data-test-selector'?: string;
     defaultValue?: string;
+    info?: string;
     isDisabled?: boolean;
     isInvalid?: boolean;
     isMultiline?: boolean;
@@ -29,5 +31,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, minLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel, size, type: defaultType, validate, value, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextField({ autoFocus, autoGrow, 'data-test-selector': dataTestSelector, defaultValue, info, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, minLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel, size, type: defaultType, validate, value, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 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 '../field-error/field-error.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
@@ -15,15 +16,15 @@ 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, minLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', type: defaultType = 'text', validate, value, }) {
+function TextField({ autoFocus, autoGrow, 'data-test-selector': dataTestSelector, defaultValue, info, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, minLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', type: defaultType = 'text', validate, value, }) {
     const [type, setType] = useState(defaultType);
     const isPasswordInput = type === 'password';
     const togglePasswordType = useCallback(() => {
         setType(isPasswordInput ? 'text' : 'password');
     }, [isPasswordInput]);
-    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 => {
+    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), "data-info": info ? true : undefined, 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), 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, inlineElement: defaultType === 'password' && (jsx(PasswordRevealToggle, { onChange: togglePasswordType, showPassword: !isPasswordInput })), label: label, placeholder: placeholder, size: size, type: type })), jsx(FieldError, {}, Math.random())] }));
+        }, onInput: onInput, onKeyUp: e => onKeyUp?.(e), validate: validate, value: value, children: [showLabel && (jsx(Label, { className: styles['label'], "data-test-selector": dataTestSelector ? `${dataTestSelector}-label` : undefined, isRequired: isRequired, children: label })), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, className: styles['input'], "data-test-selector": dataTestSelector, label: label, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, className: styles['input'], "data-test-selector": dataTestSelector, inlineElement: defaultType === 'password' && (jsx(PasswordRevealToggle, { onChange: togglePasswordType, showPassword: !isPasswordInput })), label: label, placeholder: placeholder, size: size, type: type })), info && (jsx(InfoIconTooltip, { className: styles['info'], children: info })), jsx(FieldError, { className: styles['error'] }, Math.random())] }));
 }
 
 export { TextField };

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

@@ -1,3 +1,3 @@
-var styles = {"field":"text-field-module-JeaK0"};
+var styles = {"field":"text-field-module-JeaK0","label":"text-field-module-hFl0f","input":"text-field-module-nHYDe","info":"text-field-module-kHn5y","error":"text-field-module-8XbgH"};
 
 export { styles as default };

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;
+    className?: string;
     label: string;
     size?: 'md' | 'lg';
 }