@sonic-equipment/ui 130.0.0 → 131.0.0

package/dist/checkout/payment.js

@@ -159,7 +159,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                                     setAsSoonAsPossible(checked);
                                     if (checked)
                                         setDeliveryDate('');
-                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(Tooltip, { text: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, defaultSelectedOption: cart.properties.industry, isDisabled: hasReturnedFromAdyen, label: t('Industry'), name: "industry", options: {
+                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(Tooltip, { text: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: hasReturnedFromAdyen, label: t('Industry'), name: "industry", options: {
                     /* eslint-disable sort-keys-fix/sort-keys-fix */
                     PP: 'Private User',
                     AU: 'Automotive',
@@ -171,7 +171,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                     MA: 'Maritime',
                     OT: 'Other',
                     /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: hasReturnedFromAdyen || isProcessing, label: t('VAT Number'), name: "vatNumber", onInput: e => debouncedValidator(e.target.value), validate: () => validationErrors.vatNumber ?? true }), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: hasReturnedFromAdyen || isProcessing, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && (jsx(Select, { defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: (hasReturnedFromAdyen ||
+                }, variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: hasReturnedFromAdyen || isProcessing, label: t('VAT Number'), name: "vatNumber", onInput: e => debouncedValidator(e.target.value), validate: () => validationErrors.vatNumber ?? true }), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: hasReturnedFromAdyen || isProcessing, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: (hasReturnedFromAdyen ||
                     (cart.paymentOptions?.paymentMethods &&
                         cart.paymentOptions.paymentMethods.length <= 1)) ??
                     true, label: t('Payment method'), name: "paymentMethod", options: paymentMethodOptions, variant: "solid" })), cart.paymentMethod?.name !== 'PBI' &&

package/dist/exports.d.ts

@@ -84,6 +84,7 @@ export * from './forms/input/input';
 export * from './forms/label/label';
 export * from './forms/number-field/number-field';
 export * from './forms/select/select';
+export * from './forms/switch/switch';
 export * from './forms/text-field/text-field';
 export * from './forms/textarea/textarea';
 export * from './global-search/categories-grid/categories-grid';

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 export interface CheckboxProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children: ReactNode;
+    children?: ReactNode;
     className?: string;
     'data-test-selector'?: string;
     isDisabled?: boolean;

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface SwitchProps {
+    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    children?: ReactNode;
+    className?: string;
+    'data-test-selector'?: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onChange?: (isSelected: boolean) => void;
+    value?: string;
+}
+export declare function Switch({ _pseudo, children, className, 'data-test-selector': dataTestSelector, isDisabled, isSelected, onChange, value, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/switch/switch.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+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, isDisabled, isSelected, onChange, value, }) {
+    return (jsxs(Switch$1, { className: clsx(className, styles.switch, styles[_pseudo]), "data-test-selector": dataTestSelector, isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.indicator }), children] }));
+}
+
+export { Switch };

package/dist/forms/switch/switch.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"switch":"switch-module-ywpXc","indicator":"switch-module-2e1rG","focus":"switch-module-rRUh4","active":"switch-module-hSbOs"};
+
+export { styles as default };

package/dist/index.js

@@ -89,6 +89,7 @@ export { Input } from './forms/input/input.js';
 export { Label } from './forms/label/label.js';
 export { NumberField } from './forms/number-field/number-field.js';
 export { Select } from './forms/select/select.js';
+export { Switch } from './forms/switch/switch.js';
 export { TextField } from './forms/text-field/text-field.js';
 export { TextArea } from './forms/textarea/textarea.js';
 export { CategoriesGrid } from './global-search/categories-grid/categories-grid.js';

package/dist/pages/checkout/shipping-page/components/edit-address.js

@@ -41,7 +41,7 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
                                 },
                                 notes: formData.get('notes')?.toString() || '',
                             });
-                        }, children: [jsx(TextField, { isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, name: "country" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
+                        }, children: [jsx(TextField, { isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", name: "countrySelect" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
                                         if (!value)
                                             return value;
                                         return (validatePhone(value) || 'Vul een geldig telefoonnummer in');
@@ -49,7 +49,7 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
                                         if (!value)
                                             return value;
                                         return validateEmail(value) || 'Vul een geldig emailadres in';
-                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(Tooltip, { text: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
+                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(Tooltip, { text: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
 }
 
 export { EDIT_ADDRESS_FORM_ID, EditAddresses };

package/dist/pages/checkout/shipping-page/components/readonly-address.js

@@ -22,7 +22,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
             onSubmit({
                 notes: formData.get('notes')?.toString() || '',
             });
-        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address1: billTo.address1, address2: billTo.address2, address3: billTo.address3, city: billTo.city, companyName: billTo.companyName, country: billTo.country?.name, email: billTo.email, firstName: billTo.firstName, lastName: billTo.lastName, phone: billTo.phone, postalCode: billTo.postalCode })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address1: shipTo.address1, address2: shipTo.address2, address3: shipTo.address3, city: shipTo.city, companyName: shipTo.companyName, country: shipTo.country?.name, email: shipTo.email, firstName: shipTo.firstName, lastName: shipTo.lastName, phone: shipTo.phone, postalCode: shipTo.postalCode }))] })) })] })] }));
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address1: billTo.address1, address2: billTo.address2, address3: billTo.address3, city: billTo.city, companyName: billTo.companyName, country: billTo.country?.name, email: billTo.email, firstName: billTo.firstName, lastName: billTo.lastName, phone: billTo.phone, postalCode: billTo.postalCode })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address1: shipTo.address1, address2: shipTo.address2, address3: shipTo.address3, city: shipTo.city, companyName: shipTo.companyName, country: shipTo.country?.name, email: shipTo.email, firstName: shipTo.firstName, lastName: shipTo.lastName, phone: shipTo.phone, postalCode: shipTo.postalCode }))] })) })] })] }));
 }
 
 export { ReadOnlyAddresses };

package/dist/styles.css

@@ -3882,11 +3882,10 @@ button.swiper-pagination-bullet {
     margin-bottom: var(--space-32);
     margin-left: calc(-1 * var(--breakout));
     background-color: var(--color-brand-light-gray);
-    font-weight: var(--font-weight-bold);
   }
   .cart-totals-module-Bk9zi .cart-totals-module-2RLLQ .cart-totals-module-ciNsz,
     .cart-totals-module-Bk9zi .cart-totals-module-2RLLQ .cart-totals-module-KaxpH {
-      font-weight: inherit;
+      font-weight: var(--font-weight-bold);
     }
 
 .cart-totals-summary-module-iFaoy {
@@ -4194,6 +4193,87 @@ button.swiper-pagination-bullet {
       margin-inline: var(--space-4);
     }
 
+.switch-module-ywpXc {
+  --pin-color: var(--color-white);
+  --box-color: var(--color-brand-light-gray);
+  --box-color-pressed: var(--color-brand-medium-gray);
+  --selected-box-color: var(--color-brand-red);
+  --selected-box-color-pressed: var(--color-brand-dark-red);
+  --disabled-box-color: var(--color-brand-medium-gray);
+  --disabled-selected-box-color: var(--color-brand-dark-gray);
+
+  display: flex;
+  align-items: center;
+  color: var(--color-brand-black);
+  cursor: pointer;
+  font-size: var(--font-size-14);
+  forced-color-adjust: none;
+  gap: 6px;
+}
+
+  .switch-module-ywpXc .switch-module-2e1rG {
+    width: 44px;
+    height: 24px;
+    box-sizing: border-box;
+    border-radius: 12px;
+    background: var(--box-color);
+    transition: all 200ms;
+  }
+
+  .switch-module-ywpXc .switch-module-2e1rG::before {
+      display: block;
+      width: 20px;
+      height: 20px;
+      box-sizing: border-box;
+      border: solid 0.5px rgb(0 0 0 / 4%);
+      border-radius: 50%;
+      margin: var(--space-2);
+      background: var(--pin-color);
+      box-shadow: 0 3px 1px 0 rgb(0 0 0 / 6%), 0 3px 8px 0 rgb(0 0 0 / 15%);
+      content: '';
+      transition: all 200ms;
+    }
+
+  .switch-module-ywpXc[data-pressed] .switch-module-2e1rG {
+    background: var(--box-color-pressed);
+  }
+
+  .switch-module-ywpXc[data-disabled] {
+    cursor: default;
+    opacity: 0.4;
+  }
+
+  .switch-module-ywpXc[data-disabled] .switch-module-2e1rG {
+      background: var(--disabled-box-color);
+    }
+
+  .switch-module-ywpXc[data-disabled] .switch-module-2e1rG::before {
+        box-shadow: none;
+        opacity: 0.4;
+      }
+
+  .switch-module-ywpXc.switch-module-rRUh4 .switch-module-2e1rG, .switch-module-ywpXc.switch-module-hSbOs .switch-module-2e1rG, .switch-module-ywpXc[data-focus-visible] .switch-module-2e1rG {
+      box-shadow: var(--shadow-focus-outline-padded);
+      outline: 2px solid var(--color-brand-white);
+      outline-offset: 0;
+    }
+
+  .switch-module-ywpXc[data-selected] .switch-module-2e1rG {
+      background: var(--selected-box-color);
+    }
+
+  .switch-module-ywpXc[data-selected] .switch-module-2e1rG::before {
+        transform: translateX(100%);
+      }
+
+  .switch-module-ywpXc[data-selected][data-pressed] .switch-module-2e1rG {
+      background: var(--selected-box-color-pressed);
+    }
+
+  .switch-module-ywpXc[data-selected][data-disabled] .switch-module-2e1rG {
+      background: var(--disabled-selected-box-color);
+    }
+
 .categories-grid-module-C751R {
   --amount-of-columns: 2;
   --border: 1px solid var(--color-brand-light-gray);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "130.0.0",
+  "version": "131.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -19,7 +19,8 @@
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "pnpm generate:exports:save && rollup --config",
+    "build": "rollup --config",
+    "build:export": "pnpm generate:exports:save && rollup --config",
     "rebuild": "rm -rf dist && pnpm run build",
     "build-storybook": "storybook build",
     "check-updates": "npx npm-check-updates",