@sonic-equipment/ui 259.0.2 → 260.0.0

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

@@ -3,9 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useEffect } from 'react';
 import { NumberField as NumberField$1, Button } from 'react-aria-components';
 import clsx from 'clsx';
-import { StrokeMinusIcon } from '../../../icons/stroke/stroke-minus-icon.js';
-import { StrokePlusIcon } from '../../../icons/stroke/stroke-plus-icon.js';
-import { StrokeTrashIcon } from '../../../icons/stroke/stroke-trash-icon.js';
+import { Icon } from '../../../icon/icon.js';
 import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { multiRef } from '../../../shared/utils/refs.js';
@@ -22,7 +20,7 @@ const defaultFormatOptions = {
     // TODO: this should be hard set options, not free to tweak
 };
 function NumberFieldControls({ active, children, isDisabled, showReset, }) {
-    return (jsxs("div", { className: styles['controls'], children: [active && (jsx(Button, { className: styles['control'], "data-test-selector": "decrement", isDisabled: isDisabled, slot: "decrement", children: showReset ? jsx(StrokeTrashIcon, {}) : jsx(StrokeMinusIcon, {}) })), children, active && (jsx(Button, { className: styles['control'], "data-test-selector": "increment", isDisabled: isDisabled, slot: "increment", children: jsx(StrokePlusIcon, {}) }))] }));
+    return (jsxs("div", { className: styles['controls'], children: [active && (jsx(Button, { className: styles['control'], "data-test-selector": "decrement", isDisabled: isDisabled, slot: "decrement", children: showReset ? (jsx(Icon, { name: "Trash", size: "xs" })) : (jsx(Icon, { name: "Minus", size: "xs" })) })), children, active && (jsx(Button, { className: styles['control'], "data-test-selector": "increment", isDisabled: isDisabled, slot: "increment", children: jsx(Icon, { name: "Plus", size: "xs" }) }))] }));
 }
 let debouncedChange;
 let debouncedKeyup;

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
+import { Icon } from '../../../icon/icon.js';
 import { ProgressCircle } from '../../../loading/progress-circle.js';
 import { useDebouncedCallback } from '../../../shared/hooks/use-debounced-callback.js';
 import { TextField } from '../text-field/text-field.js';
@@ -9,7 +9,7 @@ import { TextField } from '../text-field/text-field.js';
 function SearchField({ isDebounced = false, isLoading = false, onChange, value: _value, ...props }) {
     const [inputValue, setInputValue] = useState(_value);
     const onChangeDebounced = useDebouncedCallback((...args) => onChange?.(...args), 300);
-    return (jsx(TextField, { ...props, inlineElement: isLoading ? (jsx(ProgressCircle, { size: "sm", variant: "gray" })) : (jsx(StrokeSearchIcon, {})), isMultiline: false, onChange: isDebounced
+    return (jsx(TextField, { ...props, inlineElement: isLoading ? (jsx(ProgressCircle, { size: "sm", variant: "gray" })) : (jsx(Icon, { name: "Search", size: "sm" })), isMultiline: false, onChange: isDebounced
             ? (...args) => {
                 onChangeDebounced(...args);
                 setInputValue(...args);

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

@@ -1,4 +1,10 @@
 import { ValidateFunction } from '../../elements/field-error/field-error';
+export interface SelectFieldOptionGroup<K> {
+    key: string;
+    label: string;
+    options: Array<K>;
+    reactNode?: React.ReactNode;
+}
 interface SelectFieldPropsBase {
     'data-test-selector'?: string;
     label: string;
@@ -16,6 +22,7 @@ interface SelectFieldProps<T> extends SelectFieldPropsBase {
     isRequired?: boolean;
     name?: string;
     onChange?: (value: keyof T) => void;
+    optionGroups?: SelectFieldOptionGroup<keyof T>[];
     options: T;
     selectedOption?: keyof T;
     showLabel?: boolean;
@@ -23,5 +30,5 @@ interface SelectFieldProps<T> extends SelectFieldPropsBase {
     validate?: ValidateFunction<string>;
     variant?: 'outline' | 'solid';
 }
-export declare function SelectField<T extends Record<string, string>>({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, info, isDisabled, isInvalid, isLoading, isRequired, label, name, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectField<T extends Record<string, string | React.ReactNode>>({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, info, isDisabled, isInvalid, isLoading, isRequired, label, name, onChange, optionGroups, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

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

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

@@ -1,8 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Checkbox } from 'react-aria-components';
-import { StrokeDehashedIcon } from '../../../../icons/stroke/stroke-dehashed-icon.js';
-import { StrokeHashedIcon } from '../../../../icons/stroke/stroke-hashed-icon.js';
+import { Icon } from '../../../../icon/icon.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import styles from './password-reveal-toggle.module.css.js';
 
@@ -13,7 +12,7 @@ import styles from './password-reveal-toggle.module.css.js';
 function PasswordRevealToggle({ onChange, showPassword, }) {
     const t = useFormattedMessage();
     const helpText = showPassword ? t('Conceal value') : t('Reveal value');
-    return (jsx(Checkbox, { "aria-label": helpText, className: styles['password-reveal-toggle'], onChange: onChange, children: jsx("span", { title: helpText, children: showPassword ? jsx(StrokeHashedIcon, {}) : jsx(StrokeDehashedIcon, {}) }) }));
+    return (jsx(Checkbox, { "aria-label": helpText, className: styles['password-reveal-toggle'], onChange: onChange, children: jsx("span", { title: helpText, children: showPassword ? jsx(Icon, { name: "Invisible" }) : jsx(Icon, { name: "Visible" }) }) }));
 }
 
 export { PasswordRevealToggle };

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

@@ -22,7 +22,7 @@ function Form({ autoComplete = false, children, className, errorMessage, footer,
             scrollToTop();
         }
     }, [errorMessage]);
-    return (jsxs(Form$1, { "aria-label": title, autoComplete: autoComplete ? 'on' : 'off', className: clsx(styles['form'], className), onSubmit: handleSubmit, validationBehavior: "native", validationErrors: validationErrors, children: [header && jsx("header", { className: styles['form-header'], children: header }), errorMessage && (jsx("section", { className: styles['error-messages'], children: jsx(Message, { type: "danger", children: errorMessage }) })), children, jsx("footer", { className: styles['form-footer'], children: footer })] }));
+    return (jsxs(Form$1, { "aria-label": title, autoComplete: autoComplete ? 'on' : 'off', className: clsx(styles['form'], className), onSubmit: handleSubmit, validationBehavior: "native", validationErrors: validationErrors, children: [header && jsx("header", { className: styles['form-header'], children: header }), errorMessage && (jsx("section", { className: styles['error-messages'], children: jsx(Message, { type: "danger", children: errorMessage }) })), children, footer && jsx("footer", { className: styles['form-footer'], children: footer })] }));
 }
 
 export { Form };

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

@@ -2,11 +2,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { IconButton } from '../../buttons/icon-button/icon-button.js';
-import { SolidCloseIcon } from '../../icons/solid/solid-close-icon.js';
-import { StrokeSearchIcon } from '../../icons/stroke/stroke-search-icon.js';
+import { Icon } from '../../icon/icon.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import styles from './search-input.module.css.js';
 
 function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, placeholder, }) {
+    const t = useFormattedMessage();
     const formProps = autocomplete?.getFormProps({
         inputElement: inputRef.current,
     });
@@ -20,10 +21,10 @@ function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, plac
         formProps?.onSubmit(e);
         onSubmit?.();
     }
-    return (jsx("form", { ref: formRef, className: styles.form, ...formProps, onSubmit: handleSubmit, children: jsxs("div", { className: styles['input-container'], children: [jsx("label", { className: styles.label, htmlFor: "search", ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles['icon-search'], styles.icon) }) }), jsx("input", { ref: inputRef, name: "search", onKeyUp: e => {
+    return (jsx("form", { ref: formRef, className: styles.form, ...formProps, onSubmit: handleSubmit, children: jsxs("div", { className: styles['input-container'], children: [jsx("label", { className: styles.label, htmlFor: "search", ...labelProps, children: jsx(Icon, { className: clsx(styles['icon-search'], styles.icon), label: t('Search'), name: "Search" }) }), jsx("input", { ref: inputRef, name: "search", onKeyUp: e => {
                         if (e.key === 'Escape')
                             onCancel?.();
-                    }, ...inputProps, className: styles.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { className: styles['reset-btn'], color: "secondary", onClick: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
+                    }, ...inputProps, className: styles.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { round: true, className: styles['reset-btn'], icon: "CloseSolid", label: t('Reset'), onClick: () => formRef.current?.reset(), theme: "secondary", type: "reset" }))] }) }));
 }
 
 export { SearchInput };

package/dist/global-search/search-result-panel/sections/no-search.js

@@ -3,8 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
 import { Link } from '../../../buttons/link/link.js';
 import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
-import { StrokeRecentIcon } from '../../../icons/stroke/stroke-recent-icon.js';
-import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
+import { Icon } from '../../../icon/icon.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { PromoCard } from '../../../promos/promo-card/promo-card.js';
@@ -31,7 +30,7 @@ function PopularSearchesSection() {
             }), children: items.slice(0, 4).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
                     item,
                     source: source,
-                }), icon: jsx(StrokeSearchIcon, { role: "presentation" }), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) }) }));
+                }), icon: jsx(Icon, { name: "Search", size: "sm" }), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) }) }));
 }
 function RecentSearchesSection() {
     const { autocomplete, recentSearches: collection } = useAlgoliaSearch();
@@ -43,7 +42,7 @@ function RecentSearchesSection() {
     return (jsx(SearchSection, { button: jsx(Link, { hasUnderline: true, onClick: () => items.forEach(item => source.onRemove(item.id)), children: jsx(FormattedMessage, { id: "Clear" }) }), title: t('Recent searches'), children: jsx(SearchList, { ...autocomplete.getListProps({ source }), children: items.map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
                     item,
                     source: source,
-                }), icon: jsx(StrokeRecentIcon, { role: "presentation" }), isRemovable: true, onRemove: () => source.onRemove(item.id), text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) }) }));
+                }), icon: jsx(Icon, { name: "Refresh", size: "sm" }), isRemovable: true, onRemove: () => source.onRemove(item.id), text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) }) }));
 }
 function QuickAccessSection() {
     const { quickAccess: collection } = useAlgoliaSearch();

package/dist/global-search/search-result-panel/sections/with-results.js

@@ -6,7 +6,7 @@ import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
 import { Button } from '../../../buttons/button/button.js';
 import { ConnectedProductCard } from '../../../cards/product-card/connected-product-card.js';
 import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
-import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
+import { Icon } from '../../../icon/icon.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { PromoCard } from '../../../promos/promo-card/promo-card.js';
@@ -34,14 +34,14 @@ function SuggestionsSection() {
                 }), children: recentSearches.items.slice(0, 3).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
                         item,
                         source: recentSearches.source,
-                    }), icon: jsx(StrokeSearchIcon, { role: "presentation" }), isRemovable: true, onRemove: () => {
+                    }), icon: jsx(Icon, { name: "Search", size: "sm" }), isRemovable: true, onRemove: () => {
                         recentSearches.source.onRemove(item.id);
                     }, text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) })), querySuggestions && (jsx(SearchList, { ...autocomplete.getListProps({
                     source: querySuggestions.source,
                 }), children: querySuggestions.items.slice(0, 3).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
                         item,
                         source: querySuggestions.source,
-                    }), icon: jsx(StrokeSearchIcon, { role: "presentation" }), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) })), categories && (jsx(SearchList, { ...autocomplete.getListProps({
+                    }), icon: jsx(Icon, { name: "Search", size: "sm" }), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) })), categories && (jsx(SearchList, { ...autocomplete.getListProps({
                     source: categories.source,
                 }), children: categories.items
                     .slice(0, 3)
@@ -49,7 +49,7 @@ function SuggestionsSection() {
                     .map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
                         item,
                         source: categories.source,
-                    }), icon: jsx(StrokeSearchIcon, { role: "presentation" }), text: jsxs("span", { children: [jsx("span", { children: item.listCategories.at(-1) }), jsx("span", { children: item.listCategories.slice(0, -1).join(' > ') })] }) }, item.objectID))) }))] }));
+                    }), icon: jsx(Icon, { name: "Search", size: "sm" }), text: jsxs("span", { children: [jsx("span", { children: item.listCategories.at(-1) }), jsx("span", { children: item.listCategories.slice(0, -1).join(' > ') })] }) }, item.objectID))) }))] }));
 }
 function ProductHitCard({ autocomplete, hit, index, source, }) {
     // TODO: re-enable addToCart and addToFavorites when authentication problems are solved (or we got rid of the split domains)

package/dist/global-search/search-section/search-list-item.js

@@ -2,14 +2,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { IconButton } from '../../buttons/icon-button/icon-button.js';
 import { Link } from '../../buttons/link/link.js';
-import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Truncated } from '../../text/truncated/truncated.js';
 import styles from './search-list-item.module.css.js';
 
 function SearchListItem({ icon, id, isRemovable = false, onClick, onRemove, text, }) {
     const t = useFormattedMessage();
-    return (jsxs("li", { className: styles['search-list-item'], children: [jsxs(Link, { className: styles['content'], id: id, onClick: onClick, children: [icon && icon, text && jsx(Truncated, { className: styles.text, children: text })] }), isRemovable && (jsx(IconButton, { "aria-describedby": id, className: styles['clear-filter'], color: "secondary", onClick: onRemove, children: jsx(StrokeCloseboxIcon, { "aria-label": t('Remove') }) }))] }));
+    return (jsxs("li", { className: styles['search-list-item'], children: [jsxs(Link, { className: styles['content'], id: id, onClick: onClick, children: [icon && icon, text && jsx(Truncated, { className: styles.text, children: text })] }), isRemovable && (jsx(IconButton, { "aria-describedby": id, className: styles['clear-filter'], icon: "Close", label: t('Remove'), onClick: onRemove, theme: "secondary" }))] }));
 }
 
 export { SearchListItem };

package/dist/header/buttons/account/connected-account-button.js

@@ -4,7 +4,6 @@ import { useRef } from 'react';
 import { Popover } from 'react-aria-components';
 import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { AccountIcon } from '../../../navigation/account-icon/account-icon.js';
 import { QuickAccessMenu } from '../../../navigation/quick-access-menu/quick-access-menu.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { useSignOut } from '../../../shared/api/storefront/hooks/authentication/use-sign-out.js';
@@ -23,7 +22,7 @@ function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelec
     const lastName = data?.lastName ? data.lastName.trim() : undefined;
     const customerName = firstName ? [firstName, lastName].join(' ') : undefined;
     const customerCompany = data?.billTo?.companyName;
-    return (jsxs(Fragment, { children: [jsx(IconButton, { ref: triggerRef, className: className, "data-authenticated": data?.isAuthenticated ? true : false, "data-test-selector": dataTestSelector, isDisabled: isLoadingSession, onClick: toggle, children: jsx(AccountIcon, { "aria-label": t('My Sonic'), isAuthenticated: data?.isAuthenticated }) }), jsx(Popover, { className: styles['popover'], isOpen: isOpen, onOpenChange: state => (state ? open() : close()), placement: "bottom", triggerRef: triggerRef, children: jsx(QuickAccessMenu, { className: styles['quick-access-menu'], customerCompany: customerCompany, customerName: customerName, isAuthenticated: data?.isAuthenticated, isGuest: data?.isGuest, onSignOut: () => signOut(typeof window === 'undefined'
+    return (jsxs(Fragment, { children: [jsx(IconButton, { ref: triggerRef, badgeLabel: data?.isAuthenticated ? t('Signed in') : t('Signed out'), badgeStatus: data?.isAuthenticated ? 'on' : 'off', className: className, "data-authenticated": data?.isAuthenticated ? true : false, "data-test-selector": dataTestSelector, icon: "UserSolid", isDisabled: isLoadingSession, label: t('My Sonic'), onClick: toggle }), jsx(Popover, { className: styles['popover'], isOpen: isOpen, onOpenChange: state => (state ? open() : close()), placement: "bottom", triggerRef: triggerRef, children: jsx(QuickAccessMenu, { className: styles['quick-access-menu'], customerCompany: customerCompany, customerName: customerName, isAuthenticated: data?.isAuthenticated, isGuest: data?.isGuest, onSignOut: () => signOut(typeof window === 'undefined'
                         ? undefined
                         : { returnUrl: window.location.href }) }) })] }));
 }

package/dist/header/buttons/cart/connected-cart-button.js

@@ -2,13 +2,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { CartIcon } from '../../../navigation/cart-icon/cart-icon.js';
 import { useFetchCurrentCartCount } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js';
 
 function ConnectedCartButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
     const count = useFetchCurrentCartCount();
     const t = useFormattedMessage();
-    return (jsx(IconButton, { className: className, "data-count": count, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(CartIcon, { "aria-label": t('Shopping cart'), count: count }) }));
+    return (jsx(IconButton, { badgeCount: count, className: className, "data-count": count, "data-test-selector": dataTestSelector, href: href, icon: "CartSolid", label: t('Shopping cart'), onClick: onClick }));
 }
 
 export { ConnectedCartButton };

package/dist/header/buttons/favorites/connected-favorites-button.js

@@ -2,12 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { FavoriteIcon } from '../../../navigation/favorite-icon/favorite-icon.js';
 
 function ConnectedFavoritesButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
     const t = useFormattedMessage();
-    // TODO: add a count of total favorites
-    return (jsx(IconButton, { className: className, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(FavoriteIcon, { "aria-label": t('Favorites') }) }));
+    return (jsx(IconButton, { className: className, "data-test-selector": dataTestSelector, href: href, icon: "FavoriteSolid", label: t('Favorites'), onClick: onClick }));
 }
 
 export { ConnectedFavoritesButton };

package/dist/header/buttons/hamburger/hamburger-button.js

@@ -7,7 +7,7 @@ import styles from './hamburger-button.module.css.js';
 
 function HamburgerButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }) {
     const t = useFormattedMessage();
-    return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": isActive, "aria-label": t('Navigation'), className: clsx(styles['hamburger-button'], isActive && styles['active']), "data-test-selector": dataTestSelector, onClick: () => onActiveChange(!isActive), title: t('Toggle navigation menu'), type: "button", children: jsxs("div", { className: styles['icon'], role: "presentation", children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" })] }) }));
+    return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": isActive, className: clsx(styles['hamburger-button'], isActive && styles['active']), "data-test-selector": dataTestSelector, label: t('Toggle navigation menu'), onClick: () => onActiveChange(!isActive), children: jsxs("div", { className: styles['hamburger'], role: "presentation", children: [jsx("span", {}), jsx("span", {}), jsx("span", {})] }) }));
 }
 
 export { HamburgerButton };

package/dist/header/buttons/hamburger/hamburger-button.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"hamburger-button":"hamburger-button-module-W6FPI","icon":"hamburger-button-module-2h4ML","active":"hamburger-button-module-UXSUP"};
+var styles = {"hamburger-button":"hamburger-button-module-W6FPI","hamburger":"hamburger-button-module-yrZxr","active":"hamburger-button-module-UXSUP"};
 
 export { styles as default };

package/dist/header/buttons/search/search-button.js

@@ -1,12 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { IconButton } from '../../../buttons/icon-button/icon-button.js';
-import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 
 function SearchButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }) {
     const t = useFormattedMessage();
-    return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": typeof isActive === 'boolean' ? isActive : undefined, "aria-label": t('Search'), "data-test-selector": dataTestSelector, onClick: () => onActiveChange(!isActive), children: jsx(StrokeSearchIcon, { role: "presentation" }) }));
+    return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": typeof isActive === 'boolean' ? isActive : undefined, "data-test-selector": dataTestSelector, icon: "Search", label: t('Search'), onClick: () => onActiveChange(!isActive) }));
 }
 
 export { SearchButton };

package/dist/header/header.js

@@ -29,7 +29,7 @@ function Header({ className, headerNavigationSection, sticky, }) {
     const t = useFormattedMessage();
     const isXl = useIsBreakpoint('xl');
     const { ref: headerRef } = useResizeObserver((_, size) => {
-        const height = Math.floor(size.height);
+        const height = size.height;
         document?.documentElement.style.setProperty('--header-height', `${height}px`);
     });
     const { close: closeSearch, groupId: searchGroupId, instanceId: searchInstanceId, isOpen: searchOpen, setIsOpen: setSearchOpen, } = useGlobalSearchDisclosure();

package/dist/header/link-list/navigation-link-list.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Link } from '../../buttons/link/link.js';
-import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
+import { Icon } from '../../icon/icon.js';
 import { logger } from '../../logging/logger.js';
 import { isNavigationLinkGroup, isNavigationLink } from '../../shared/api/bff/model/bff.model.js';
 import styles from './navigation-link-list.module.css.js';
@@ -11,7 +11,7 @@ function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector
     return (jsx("ul", { className: styles['navigation-link-list'], "data-test-selector": dataTestSelector, children: items.map(item => {
             if (isNavigationLinkGroup(item)) {
                 if (item.items.length > 0) {
-                    return (jsx("li", { className: activeLink === item ? styles['active'] : undefined, children: jsxs(Link, { "aria-controls": `panels-${item.key}`, "aria-expanded": activeLink === item, className: styles.link, "data-test-selector": `navigationLink-${item.key}`, onClick: () => onSubmenuToggle(item), target: item.openInNewTab ? '_blank' : undefined, children: [item.label, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron, role: "presentation" })] }) }, item.key));
+                    return (jsx("li", { className: activeLink === item ? styles['active'] : undefined, children: jsxs(Link, { "aria-controls": `panels-${item.key}`, "aria-expanded": activeLink === item, className: styles.link, "data-test-selector": `navigationLink-${item.key}`, onClick: () => onSubmenuToggle(item), target: item.openInNewTab ? '_blank' : undefined, children: [item.label, jsx(Icon, { className: styles.icon, name: "ArrowDownBold", size: "xxs" })] }) }, item.key));
                 }
                 else {
                     logger.warn(`Link-group has no items: ${JSON.stringify(item, null, 2)}`);

package/dist/header/link-list/navigation-link-list.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"navigation-link-list":"navigation-link-list-module-Ku9Sa","link":"navigation-link-list-module-kj0Rj","chevron":"navigation-link-list-module-QiKiA","active":"navigation-link-list-module-jDgf0"};
+var styles = {"navigation-link-list":"navigation-link-list-module-Ku9Sa","link":"navigation-link-list-module-kj0Rj","icon":"navigation-link-list-module-jcogX","active":"navigation-link-list-module-jDgf0"};
 
 export { styles as default };

package/dist/header/sonic-logo/sonic-logo.js

@@ -5,9 +5,14 @@ import { Link } from '../../buttons/link/link.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import styles from './sonic-logo.module.css.js';
 
-function SonicLogo({ className, 'data-test-selector': dataTestSelector, href, title, }) {
+function SonicLogoSVG() {
     const t = useFormattedMessage();
-    return (jsx(Link, { className: clsx(styles.wrapper, className), "data-test-selector": dataTestSelector, href: href, title: title, children: jsx("svg", { "aria-label": t('Sonic Equipment'), className: styles['sonic-logo'], viewBox: "0 0 100 24", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { className: styles.letters, d: "M11.87 8.65c1.815 0 3.286 1.482 3.286 3.311 0 6.595-5.325 11.962-11.87 11.962C1.471 23.923 0 22.44 0 20.612c0-1.766 1.372-3.21 3.1-3.307l.186-.005c2.848 0 5.179-2.277 5.293-5.12l.005-.219c0-1.829 1.471-3.311 3.286-3.311zm0-8.65c1.815 0 3.286 1.483 3.286 3.311 0 1.766-1.371 3.21-3.1 3.307l-.186.005c-2.849 0-5.178 2.277-5.293 5.118l-.004.22c0 1.829-1.472 3.311-3.287 3.311C1.472 15.272 0 13.79 0 11.961 0 5.366 5.325 0 11.87 0zm6.155 12.016c0 6.596 5.325 11.963 11.87 11.963 6.545 0 11.87-5.367 11.87-11.963 0-6.595-5.325-11.96-11.87-11.96-6.545 0-11.87 5.365-11.87 11.96zm6.572 0c0-2.943 2.376-5.338 5.298-5.338 2.92 0 5.297 2.395 5.297 5.338 0 2.945-2.376 5.34-5.297 5.34-2.922 0-5.298-2.395-5.298-5.34zM82.251 3.56c-4.628 4.663-4.628 12.251 0 16.915 4.628 4.663 12.158 4.663 16.786 0a3.33 3.33 0 0 0 .001-4.683 3.268 3.268 0 0 0-4.501-.138l-.146.138a5.278 5.278 0 0 1-7.494 0c-2.064-2.081-2.064-5.468.001-7.549a5.275 5.275 0 0 1 7.313-.174l.18.173a3.268 3.268 0 0 0 4.647 0 3.33 3.33 0 0 0 0-4.684c-4.63-4.663-12.16-4.662-16.787.002zm-12.868-.13v17.148c0 1.828 1.47 3.311 3.285 3.311 1.816 0 3.287-1.483 3.287-3.311V3.429c0-1.829-1.471-3.312-3.287-3.312-1.815 0-3.285 1.483-3.285 3.312zM48.063.075c-1.814 0-3.285 1.483-3.285 3.311V20.69c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311V6.698h2.95c2.92 0 5.297 2.394 5.297 5.338v8.653c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311v-8.653C66.17 5.44 60.844.075 54.3.075h-6.235z" }), jsx("path", { className: styles.dot, d: "M35.27 12.017c0 2.991-2.406 5.416-5.375 5.416-2.97 0-5.376-2.425-5.376-5.416 0-2.992 2.407-5.417 5.376-5.417 2.969 0 5.375 2.425 5.375 5.417" })] }) }) }));
+    return (jsx("svg", { "aria-label": t('Sonic Equipment'), className: styles['logo'], viewBox: "0 0 100 24", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { className: styles.letters, d: "M11.87 8.65c1.815 0 3.286 1.482 3.286 3.311 0 6.595-5.325 11.962-11.87 11.962C1.471 23.923 0 22.44 0 20.612c0-1.766 1.372-3.21 3.1-3.307l.186-.005c2.848 0 5.179-2.277 5.293-5.12l.005-.219c0-1.829 1.471-3.311 3.286-3.311zm0-8.65c1.815 0 3.286 1.483 3.286 3.311 0 1.766-1.371 3.21-3.1 3.307l-.186.005c-2.849 0-5.178 2.277-5.293 5.118l-.004.22c0 1.829-1.472 3.311-3.287 3.311C1.472 15.272 0 13.79 0 11.961 0 5.366 5.325 0 11.87 0zm6.155 12.016c0 6.596 5.325 11.963 11.87 11.963 6.545 0 11.87-5.367 11.87-11.963 0-6.595-5.325-11.96-11.87-11.96-6.545 0-11.87 5.365-11.87 11.96zm6.572 0c0-2.943 2.376-5.338 5.298-5.338 2.92 0 5.297 2.395 5.297 5.338 0 2.945-2.376 5.34-5.297 5.34-2.922 0-5.298-2.395-5.298-5.34zM82.251 3.56c-4.628 4.663-4.628 12.251 0 16.915 4.628 4.663 12.158 4.663 16.786 0a3.33 3.33 0 0 0 .001-4.683 3.268 3.268 0 0 0-4.501-.138l-.146.138a5.278 5.278 0 0 1-7.494 0c-2.064-2.081-2.064-5.468.001-7.549a5.275 5.275 0 0 1 7.313-.174l.18.173a3.268 3.268 0 0 0 4.647 0 3.33 3.33 0 0 0 0-4.684c-4.63-4.663-12.16-4.662-16.787.002zm-12.868-.13v17.148c0 1.828 1.47 3.311 3.285 3.311 1.816 0 3.287-1.483 3.287-3.311V3.429c0-1.829-1.471-3.312-3.287-3.312-1.815 0-3.285 1.483-3.285 3.312zM48.063.075c-1.814 0-3.285 1.483-3.285 3.311V20.69c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311V6.698h2.95c2.92 0 5.297 2.394 5.297 5.338v8.653c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311v-8.653C66.17 5.44 60.844.075 54.3.075h-6.235z" }), jsx("path", { className: styles.dot, d: "M35.27 12.017c0 2.991-2.406 5.416-5.375 5.416-2.97 0-5.376-2.425-5.376-5.416 0-2.992 2.407-5.417 5.376-5.417 2.969 0 5.375 2.425 5.375 5.417" })] }) }));
+}
+function SonicLogo({ className, 'data-test-selector': dataTestSelector, href, title, }) {
+    if (href)
+        return (jsx(Link, { className: clsx(styles['sonic-logo'], className), "data-test-selector": dataTestSelector, href: href, title: title, children: jsx(SonicLogoSVG, {}) }));
+    return (jsx("div", { className: clsx(styles['sonic-logo'], className), "data-test-selector": dataTestSelector, children: jsx(SonicLogoSVG, {}) }));
 }
 
 export { SonicLogo };

package/dist/header/sonic-logo/sonic-logo.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"wrapper":"sonic-logo-module-5zzhF","sonic-logo":"sonic-logo-module-9Mpdq","letters":"sonic-logo-module-Pa7pF","dot":"sonic-logo-module-vTCO3"};
+var styles = {"sonic-logo":"sonic-logo-module-9Mpdq","logo":"sonic-logo-module-PfC3z","letters":"sonic-logo-module-Pa7pF","dot":"sonic-logo-module-vTCO3"};
 
 export { styles as default };

package/dist/icon/icon.d.ts

@@ -0,0 +1,10 @@
+import { IconName } from '../icons';
+export type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+export interface IconProps {
+    className?: string;
+    'data-test-selector'?: string;
+    label?: string;
+    name: IconName;
+    size?: IconSize;
+}
+export declare function Icon({ className, 'data-test-selector': dataTestSelector, label, name, size, }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/icon/icon.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { icons } from '../icons/index.js';
+import styles from './icon.module.css.js';
+
+function Icon({ className, 'data-test-selector': dataTestSelector, label, name, size = 'md', }) {
+    const Icon = icons[name];
+    return (jsx(Icon, { "aria-label": label, className: clsx(styles['icon'], clsx(styles[`size-${size}`], className)), "data-test-selector": dataTestSelector, role: label ? undefined : 'presentation' }));
+}
+
+export { Icon };

package/dist/icon/icon.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"icon":"icon-module-H50Sa","size-xxs":"icon-module-VRfRB","size-xs":"icon-module-qOoul","size-sm":"icon-module-s7OuZ","size-lg":"icon-module-Z76Ae"};
+
+export { styles as default };

package/dist/icons/glyph/glyphs-arrow-boldcaps-left-icon.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsArrowBoldCapsLeftIcon(props) {

package/dist/icons/glyph/glyphs-arrow-boldcaps-right-icon.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsArrowBoldCapsRightIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-bold-down-icon.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsBoldDownIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-bold-left-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsChevronsBoldLeftIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M2,5.98800959 L7.02068966,1 C7.34252874,1.17585931 7.7045977,1.4636291 8.10689655,1.86330935 C8.28390805,2.03916867 8.44482759,2.21502798 8.58965517,2.39088729 L8.74027586,2.58273381 C8.804,2.66906475 8.85034483,2.74100719 8.87931034,2.79856115 L8.97586207,2.94244604 L5.91034483,5.98800959 L9,9.05755396 C8.80689655,9.39328537 8.51724138,9.7529976 8.13103448,10.1366906 C7.95402299,10.31255 7.77701149,10.4724221 7.6,10.616307 L7.32482759,10.8321343 L7.18965517,10.9280576 L7.04482759,11 L2,5.98800959 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsChevronsBoldLeftIcon };

package/dist/icons/glyph/glyphs-chevrons-bold-right-icon.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsBoldRightIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-bold-up-icon.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsBoldUpIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-slim-down-icon.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsSlimDownIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-slim-left-icon.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsSlimLeftIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-slim-right-icon.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsSlimRightIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-slim-up-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsChevronsSlimUpIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M6,3 L1,7.93354971 C1.08169007,8.12109594 1.19817561,8.30512588 1.34945663,8.48563954 C1.50073764,8.6661532 1.68216803,8.83760669 1.89374779,9 L5.98800959,4.91652188 L9.9960307,9 C10.2121071,8.83350762 10.4031847,8.66205413 10.5692635,8.48563954 C10.7353424,8.30922495 10.8789212,8.12519501 11,7.93354971 L6,3 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsChevronsSlimUpIcon };