@sonic-equipment/ui 0.0.119 → 120.0.0

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import { Button } from '../../buttons/button/button.js';
+import { Select } from '../../forms/select/select.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Dialog } from '../../modals/dialog/dialog.js';
+import styles from './country-selector-dialog.module.css.js';
+
+function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange, onSubmit, selectedCountry, selectedLanguage, showCountry = true, }) {
+    const t = useFormattedMessage();
+    const [currentCountry, setCurrentCountry] = useState(selectedCountry);
+    const [currentLanguage, setCurrentLanguage] = useState(selectedLanguage);
+    const countryOptions = useMemo(() => countries.reduce((acc, country) => ({
+        ...acc,
+        [country.id]: t(`clSelector.${country.abbreviation}`),
+    }), {}), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [countries]);
+    const languageOptions = useMemo(() => currentCountry.languages.reduce((acc, language) => ({ ...acc, [language.id]: language.description }), {}), [currentCountry]);
+    useEffect(() => {
+        if (currentCountry.languages.some(language => language.id === currentLanguage.id))
+            return;
+        const fallbackLanguage = currentCountry.languages[0];
+        if (!fallbackLanguage)
+            throw new Error(`Country ${currentCountry.name} has no languages to select`);
+        setCurrentLanguage(fallbackLanguage);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentCountry]);
+    return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: {
+            dialog: styles['country-selector-dialog'],
+            modal: styles.modal,
+        }, footer: jsx(Button, { withArrow: true, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: e => {
+            onSubmit({ country: currentCountry, language: currentLanguage });
+            e.preventDefault();
+            e.stopPropagation();
+        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(Select, { label: t('Country'), onChange: value => setCurrentCountry(countries.find(country => country.id === value) ||
+                                currentCountry), options: countryOptions, selectedOption: currentCountry.id, showPlaceholder: false, variant: "solid" })), jsx(Select, { label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
+}
+
+export { CountrySelectorDialog };

package/dist/country-selector/country-selector-dialog/country-selector-dialog.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"country-selector-dialog":"country-selector-dialog-module-mMJS0","content":"country-selector-dialog-module-z-ZqY","logo":"country-selector-dialog-module-7VjsF","intro":"country-selector-dialog-module-IdVDt","selects":"country-selector-dialog-module-Nvikf"};
+
+export { styles as default };

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Image } from '../../media/image/image.js';
+import styles from './country-selector-trigger.module.css.js';
+
+function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, showCountry = true, }) {
+    const t = useFormattedMessage();
+    if (!selectedCountry || !selectedLanguage)
+        return;
+    const abbreviation = selectedCountry.abbreviation.toLowerCase();
+    const flagSrc = `https://res.cloudinary.com/dkz9eknwh/image/upload/v1729678637/images/flags/${abbreviation}.svg`;
+    return (jsxs("button", { "aria-label": "Open country selector dialog", className: styles['country-selector-trigger'], onClick: onClick, type: "button", children: [jsx(Image, { className: styles.flag, height: 24, image: { 1: flagSrc, 2: flagSrc, 3: flagSrc, altText: abbreviation }, title: abbreviation, width: 24 }), jsxs("div", { className: styles.text, children: [showCountry && (jsxs(Fragment, { children: [jsx("span", { children: t(`clSelector.${selectedCountry.abbreviation}`) }), jsx("span", { className: styles.divider, children: "-" })] })), jsx("span", { children: selectedLanguage.description })] })] }));
+}
+
+export { CountrySelectorTrigger };

package/dist/country-selector/country-selector-trigger/country-selector-trigger.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"country-selector-trigger":"country-selector-trigger-module-aioDu","flag":"country-selector-trigger-module-zOSJK","text":"country-selector-trigger-module-TE8tl","divider":"country-selector-trigger-module-GNRDD"};
+
+export { styles as default };

package/dist/country-selector/use-countries-languages.js

@@ -0,0 +1,72 @@
+"use client";
+import { useEffect } from 'react';
+import { config } from '../config.js';
+import { useFetchCountriesWithLanguages } from '../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
+import { updateLocale } from '../shared/api/storefront/services/website-service.js';
+import { useCookie } from '../shared/hooks/use-cookie.js';
+import { useSessionStorage } from '../shared/hooks/use-session-storage.js';
+
+const cookieOptions = {
+    domain: config.COOKIE_DOMAIN,
+    expires: 365,
+    path: '/',
+    sameSite: 'None',
+    secure: true,
+};
+function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
+    const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
+    const [currentCountryId] = useCookie('CurrentCountryId', cookieOptions);
+    const [currentLanguageId] = useCookie('CurrentLanguageId', cookieOptions);
+    const [contextLanguageCode] = useCookie('SetContextLanguageCode', cookieOptions);
+    const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
+        enabled: !sessionCountries,
+    });
+    const countries = sessionCountries ?? apiCountries;
+    useEffect(() => {
+        if (sessionCountries)
+            return;
+        setSessionCountries(apiCountries);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apiCountries]);
+    async function updateCountryLanguage({ country, language, }) {
+        await updateLocale({ countryId: country.id, languageId: language.id });
+    }
+    if (error)
+        throw error;
+    if (isFetching) {
+        return {
+            countries: undefined,
+            defaultCountry: undefined,
+            defaultLanguage: undefined,
+            isFetching,
+            selectedCountry: undefined,
+            selectedLanguage: undefined,
+            updateCountryLanguage,
+        };
+    }
+    if (!countries?.length)
+        throw new Error('No countries found');
+    const defaultCountry = countries.find(country => country.abbreviation.toUpperCase() === defaultCountryCode.toUpperCase()) || countries[0];
+    if (!defaultCountry)
+        throw new Error(`Unable to find the default country ${defaultCountryCode}`);
+    const defaultLanguage = defaultCountry.languages.find(language => language.languageCode.toUpperCase() ===
+        defaultLanguageCode.toUpperCase()) || defaultCountry.languages[0];
+    if (!defaultLanguage)
+        throw new Error(`Unable to find the default language ${defaultLanguageCode} for country ${defaultCountry.name}`);
+    const selectedCountry = countries.find(country => country.id === currentCountryId);
+    const selectedLanguage = selectedCountry &&
+        (selectedCountry.languages.find(language => language.id === currentLanguageId) ||
+            selectedCountry.languages.find(language => language.languageCode.toUpperCase() ===
+                contextLanguageCode?.toUpperCase()));
+    return {
+        countries,
+        defaultCountry,
+        defaultLanguage,
+        isFetching,
+        selectedCountry,
+        selectedLanguage,
+        updateCountryLanguage,
+    };
+}
+
+export { useCountriesLanguages };

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { getDateUnitObject } from '../shared/utils/date.js';
+import styles from './delivery-time.module.css.js';
+
+function DeliveryTime({ className, deliveryDate }) {
+    const t = useFormattedMessage();
+    const { number, unit } = getDateUnitObject(deliveryDate);
+    return (jsx("p", { className: clsx(styles['delivery-time'], className), children: jsx(FormattedMessage, { id: "Delivery expected in {0} {1}", replacementValues: {
+                '0': number.toString(),
+                '1': t.pluralize('unit', unit, number),
+            } }) }));
+}
+
+export { DeliveryTime };

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

@@ -0,0 +1,3 @@
+var styles = {"delivery-time":"delivery-time-module-fEWEl"};
+
+export { styles as default };

package/dist/display/product-price/product-price.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { formatPrice } from '../../shared/utils/price.js';
+import styles from './product-price.module.css.js';
+
+function ProductPrice({ className, isVatIncluded = false, originalPrice, price, }) {
+    if (Number.isNaN(price))
+        return;
+    const originalPriceWithCurrency = formatPrice(Number.isNaN(originalPrice) ? price : originalPrice);
+    const priceWithCurrency = formatPrice(price);
+    const [wholes, decimals] = priceWithCurrency.split('.');
+    const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
+    return (jsxs("div", { className: clsx(className, styles['product-price']), children: [jsx("span", { className: clsx(styles['original-price'], {
+                    [styles['is-hidden']]: !showOriginalPrice,
+                }), children: originalPriceWithCurrency }), jsxs("div", { className: styles['current-price-wrapper'], children: [jsxs("div", { className: styles['current-price'], children: [jsx("span", { className: styles.wholes, children: wholes }), jsx("span", { className: styles.dot, children: "." }), jsx("span", { className: styles.decimals, children: decimals })] }), isVatIncluded !== null && (jsx("span", { className: styles.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) }))] })] }));
+}
+
+export { ProductPrice };

package/dist/display/product-price/product-price.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","price-per-unit":"product-price-module-syhum","vat":"product-price-module-96DoG"};
+
+export { styles as default };

package/dist/display/product-price/product-total-price.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { formatPrice } from '../../shared/utils/price.js';
+import { ProductPrice } from './product-price.js';
+import styles from './product-total-price.module.css.js';
+
+function ProductTotalPrice({ className, originalTotalPrice: originalPrice, pricePerUnit, totalPrice, }) {
+    const t = useFormattedMessage();
+    if (Number.isNaN(totalPrice))
+        return;
+    return (jsxs("div", { className: clsx(styles['product-total-price'], className), children: [jsx(ProductPrice, { isVatIncluded: null, originalPrice: originalPrice, price: totalPrice }), jsx("span", { className: styles['price-per-unit'], children: `${formatPrice(pricePerUnit ?? 0)}/${t('pc')}` })] }));
+}
+
+export { ProductTotalPrice };

package/dist/display/product-price/product-total-price.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-total-price":"product-total-price-module-w3CRH","price-per-unit":"product-total-price-module-MKCnH"};
+
+export { styles as default };

package/dist/display/product-sku/product-sku.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './product-sku.module.css.js';
+
+function ProductSku({ sku }) {
+    return (jsx("p", { className: styles['product-sku'], "data-test-selector": "productNumber", children: sku }));
+}
+
+export { ProductSku };

package/dist/display/product-sku/product-sku.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-sku":"product-sku-module-ITb8x"};
+
+export { styles as default };

package/dist/exports.d.ts

@@ -142,14 +142,16 @@ export * from './pages/page-container/page-container';
 export * from './pages/page/page';
 export * from './pages/product-details-page/components/product-details-images/product-detail-images';
 export * from './pages/product-details-page/components/product-details-panel/product-details-panel';
+export * from './pages/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed';
+export * from './pages/product-details-page/product-details';
 export * from './pages/product-details-page/product-details-page';
 export * from './pages/product-listing-page/no-results/no-results';
+export * from './pages/product-listing-page/product-listing';
 export * from './pages/product-listing-page/product-listing-page';
 export * from './pages/product-listing-page/product-listing-page-category-carousel/product-listing-page-category-carousel';
 export * from './pages/product-listing-page/product-listing-page-data-types';
 export * from './pages/product-listing-page/product-listing-page-provider/product-listing-page-context';
 export * from './pages/product-listing-page/product-listing-page-provider/product-listing-page-provider';
-export * from './pages/product-listing-page/product-listing-page-provider/use-subcategories';
 export * from './pages/product-listing-page/product-listing-product-overview/product-listing-product-overview';
 export * from './pages/search-result-page/search-result-product-overview/search-result-product-overview';
 export * from './pages/search-result-page/search-results-page';
@@ -160,8 +162,6 @@ export * from './promos/promo-card/promo-card';
 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/model/announcement.model';
-export * from './shared/api/bff/model/bff.model';
 export * from './shared/api/bff/services/bff-service';
 export * from './shared/api/storefront/hooks/authentication/use-fetch-session';
 export * from './shared/api/storefront/hooks/authentication/use-invalidate-session';
@@ -196,7 +196,6 @@ export * from './shared/api/storefront/hooks/wishlist/use-create-wishlist';
 export * from './shared/api/storefront/hooks/wishlist/use-delete-wishlist-item-from-wishlist';
 export * from './shared/api/storefront/hooks/wishlist/use-fetch-all-wishlists-items';
 export * from './shared/api/storefront/hooks/wishlist/use-fetch-wishlists';
-export * from './shared/api/storefront/model/shop.model';
 export * from './shared/api/storefront/services/authentication-service';
 export * from './shared/api/storefront/services/cart-service';
 export * from './shared/api/storefront/services/translation-service';
@@ -215,6 +214,7 @@ export * from './shared/hooks/use-resize-observer';
 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/announcement';
 export * from './shared/model/category';
 export * from './shared/model/countries-languages';

package/dist/filters/active-filters/active-filters.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { FilterSection } from '../../algolia/filter-section.js';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import filterSectionStyles from '../../algolia/filter-section.module.css.js';
+import styles from './active-filters.module.css.js';
+
+const ActiveFilters = ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }) => {
+    const t = useFormattedMessage();
+    if (selectedFilterCategories.length === 0)
+        return null;
+    return (jsx(FilterSection, { button: jsx(RouteLink, { onClick: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map(category => category.filters.map(filter => (jsxs("div", { className: clsx(filterSectionStyles['filter-section-item'], styles['active-filter-item']), children: [jsxs("span", { children: [jsxs("span", { children: [jsx(FormattedMessage, { id: `facet.${category.label.toLowerCase()}` }), jsx("span", { children: ": " })] }), jsx("span", { className: styles['active-filter-value'], children: filter.label })] }), jsx(IconButton, { className: styles['clear-filter-button'], color: "secondary", onClick: () => onClearFilter(category.label, filter), children: jsx(StrokeCloseboxIcon, {}) })] }, `${category.label}-${filter.value}`)))) }));
+};
+
+export { ActiveFilters };

package/dist/filters/active-filters/active-filters.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"active-filter-item":"active-filters-module-Rrmhy","active-filter-value":"active-filters-module-CIuPU","clear-filter-button":"active-filters-module-Ud9kZ"};
+
+export { styles as default };

package/dist/filters/multi-select/multi-select.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { ShowAll } from '../../collapsables/show-all/show-all.js';
+import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
+import styles from './multi-select.module.css.js';
+
+function MultiSelect({ amountShown = 3, onChange, options, render, }) {
+    const shownOptions = options.slice(0, amountShown);
+    const hiddenOptions = options.slice(amountShown);
+    const hiddenSelectedOptions = hiddenOptions.filter(option => option.isSelected);
+    const { isOpen, toggle } = useDisclosure();
+    if (options.length < 2 &&
+        options.filter(option => option.isSelected).length === 0) {
+        return null;
+    }
+    return (jsxs("div", { className: styles['multi-select'], children: [jsx("div", { className: styles['filter-items'], children: [...shownOptions, ...(isOpen ? [] : hiddenSelectedOptions)].map(option => (jsxs("div", { className: styles['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: toggle, children: jsx("div", { className: clsx(styles['filter-items'], styles['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
+}
+
+export { MultiSelect };

package/dist/filters/multi-select/multi-select.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"multi-select":"multi-select-module-DC7Ix","filter-item":"multi-select-module-OW-NK"};
+
+export { styles as default };

package/dist/filters/pagination/pagination.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { NumberField } from '../../forms/number-field/number-field.js';
+import { GlyphsChevronsSlimLeftIcon } from '../../icons/glyph/glyphs-chevrons-slim-left-icon.js';
+import { GlyphsChevronsSlimRightIcon } from '../../icons/glyph/glyphs-chevrons-slim-right-icon.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import styles from './pagination.module.css.js';
+
+function Pagination({ currentPage, onChange, totalPages, }) {
+    return (jsxs("div", { className: styles.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onClick: () => onChange(currentPage - 1), children: jsx(GlyphsChevronsSlimLeftIcon, {}) }), jsxs("div", { className: styles['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onClick: () => onChange(currentPage + 1), children: jsx(GlyphsChevronsSlimRightIcon, {}) })] }));
+}
+
+export { Pagination };

package/dist/filters/pagination/pagination.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
+
+export { styles as default };

package/dist/forms/checkbox/checkbox.js

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

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

@@ -0,0 +1,3 @@
+var styles = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
+
+export { styles as default };

package/dist/forms/color-checkbox/color-checkbox.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox } from 'react-aria-components';
+import clsx from 'clsx';
+import styles from '../checkbox/checkbox.module.css.js';
+
+function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
+    return (jsxs(Checkbox, { className: clsx(className, styles.checkbox, styles['color-checkbox'], styles[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
+            '--selected-color': color,
+        }, value: value, children: [jsx("div", { className: styles.box }), children] }));
+}
+
+export { ColorCheckbox };

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { FieldError as FieldError$1 } from 'react-aria-components';
+import styles from './field-error.module.css.js';
+
+function FieldError({ children }) {
+    return (jsx(FieldError$1, { className: styles['field-error'], children: children }));
+}
+
+export { FieldError };

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

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

package/dist/forms/input/input.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { usePress } from 'react-aria';
+import { useContextProps, InputContext, Input as Input$1 } from 'react-aria-components';
+import clsx from 'clsx';
+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 [props, ref] = useContextProps(inputProps, inputRef, InputContext);
+    const { defaultValue, onChange, value: controlledValue } = props;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = (event) => isControlled
+        ? 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 => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        e.target.focus();
+                    } }), autoGrow && jsx("span", { className: styles['shadow-input'], children: value })] }) }));
+});
+Input.displayName = 'Input';
+
+export { Input };

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

@@ -0,0 +1,3 @@
+var styles = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
+
+export { styles as default };

package/dist/forms/label/label.js

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

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

@@ -0,0 +1,3 @@
+var styles = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
+
+export { styles as default };

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { NumberField as NumberField$1, Button } from 'react-aria-components';
+import clsx from 'clsx';
+import { StrokeCollapseIcon } from '../../icons/stroke/stroke-collapse-icon.js';
+import { StrokeExpandIcon } from '../../icons/stroke/stroke-expand-icon.js';
+import { StrokeTrashIcon } from '../../icons/stroke/stroke-trash-icon.js';
+import { FieldError } from '../field-error/field-error.js';
+import { Input } from '../input/input.js';
+import { Label } from '../label/label.js';
+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, }) {
+    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, { 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, { 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, {})] }));
+}
+
+export { NumberField };

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

@@ -0,0 +1,3 @@
+var styles = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
+
+export { styles as default };

package/dist/forms/select/select.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Select as Select$1, Button, SelectValue, Popover, ListBox, Section, Header, ListBoxItem } from 'react-aria-components';
+import clsx from 'clsx';
+import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
+import { StrokeCheckmarkIcon } from '../../icons/stroke/stroke-checkmark-icon.js';
+import { Label } from '../label/label.js';
+import styles from './select.module.css.js';
+
+function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
+    const selectRef = useRef(null);
+    useEffect(() => {
+        const updateWidth = () => {
+            if (!selectRef.current)
+                return;
+            const width = selectRef.current.getBoundingClientRect().width;
+            selectRef.current.style.setProperty('--trigger-width', `${width}px`);
+        };
+        updateWidth();
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('resize', updateWidth);
+        return () => window?.removeEventListener('resize', updateWidth);
+    }, []);
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron })] }), jsx(Popover, { ref: ref => 
+                // Workaround for react/react-aria #1513
+                ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles.popover, styles[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles.listbox, children: jsxs(Section, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
+}
+
+export { Select };

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

@@ -0,0 +1,3 @@
+var styles = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","solid":"select-module-IRd4F","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
+
+export { styles as default };

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TextField as TextField$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { FieldError } from '../field-error/field-error.js';
+import { Input } from '../input/input.js';
+import { Label } from '../label/label.js';
+import { TextArea } from '../textarea/textarea.js';
+import styles from './text-field.module.css.js';
+
+/**
+ * This component is used to create a text field.
+ * 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 => {
+            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, {})] }));
+}
+
+export { TextField };

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

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