@sonic-equipment/ui 0.0.19 → 0.0.20

package/dist/index.js

@@ -1,27 +1,27 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect, createContext, useContext, Children, cloneElement, useRef, useCallback } from 'react';
-import { Button as Button$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
+import { Button as Button$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Link, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
 import clsx from 'clsx';
 
 function RightArrowFilledIcon(props) {
     return (jsx("svg", { height: "11", viewBox: "0 0 6 11", width: "6", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M.267 11a.263.263 0 0 1-.226-.402l3.463-5.467a1.2 1.2 0 0 0-.103-1.43L.602.432A.262.262 0 0 1 .805 0h2.181c.078 0 .153.034.203.093l2.081 2.43a3 3 0 0 1 .259 3.575L2.5 10.877a.267.267 0 0 1-.225.123H.266z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$i = {"button":"button-module-V4meK","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
+var styles$n = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
 
-function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, isDisabled, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
     if (children && icon)
         console.warn('Button should not have both children and icon. Icon has precedence.');
-    return (jsx(Button$1, { className: clsx(className, styles$i.button, styles$i[variant], styles$i[size], styles$i[color], { [styles$i.condensed]: condensed }, { [styles$i.icon]: icon }, styles$i[_pseudo]), isDisabled: isDisabled, onPress: onPress, type: type, children: icon ? (icon) : (jsxs(Fragment, { children: [children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$i['right-arrow-icon'] }))] })) }));
+    return (jsxs(Button$1, { className: clsx(className, styles$n.button, styles$n[variant], styles$n[size], styles$n[color], { [styles$n.condensed]: condensed }, { [styles$n.icon]: icon }, styles$n[_pseudo]), isDisabled: isDisabled, onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$n.icon, children: icon })), children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$n['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$n.icon, children: icon }))] }));
 }
 
-var styles$h = {"field-error":"field-error-module-FXnIg"};
+var styles$m = {"field-error":"field-error-module-FXnIg"};
 
 function FieldError({ children }) {
-    return (jsx(FieldError$1, { className: styles$h['field-error'], children: children }));
+    return (jsx(FieldError$1, { className: styles$m['field-error'], children: children }));
 }
 
-var styles$g = {"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"};
+var styles$l = {"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"};
 
 /**
  * This component is used to create an input that grows as the user types.
@@ -36,33 +36,33 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
     const handleChange = (event) => isControlled
         ? onChange?.(event)
         : setUncontrolledValue(event.target.value);
-    return (jsx("div", { className: clsx(styles$g['input-container'], styles$g[size], styles$g[_pseudo]), children: jsxs("div", { className: clsx({ [styles$g['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange }), autoGrow && jsx("span", { className: styles$g['shadow-input'], children: value })] }) }));
+    return (jsx("div", { className: clsx(styles$l['input-container'], styles$l[size], styles$l[_pseudo]), children: jsxs("div", { className: clsx({ [styles$l['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange }), autoGrow && jsx("span", { className: styles$l['shadow-input'], children: value })] }) }));
 });
 Input.displayName = 'Input';
 
-var styles$f = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
+var styles$k = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
 
 function Label({ children, isRequired }) {
     if (!children)
         return null;
-    return (jsxs(Label$1, { className: styles$f.label, children: [children, isRequired && jsx("span", { className: styles$f.required, children: "*" })] }));
+    return (jsxs(Label$1, { className: styles$k.label, children: [children, isRequired && jsx("span", { className: styles$k.required, children: "*" })] }));
 }
 
-var styles$e = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh"};
+var styles$j = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh"};
 
 /**
  * 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 = true, size = 'lg', value, withButtons, }) {
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$e.field, styles$e[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$e['button-input-container'], children: [withButtons && jsx(Button$1, { slot: "decrement", children: "-" }), jsx(Input, { autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && jsx(Button$1, { slot: "increment", children: "+" })] }), jsx(FieldError, {})] }));
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$j.field, styles$j[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$j['button-input-container'], children: [withButtons && jsx(Button$1, { slot: "decrement", children: "-" }), jsx(Input, { autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && jsx(Button$1, { slot: "increment", children: "+" })] }), jsx(FieldError, {})] }));
 }
 
 function CartFilledIcon(props) {
     return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M7.896 16.666a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zm8.925 0a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zM7.896 18.1c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zm8.925 0c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zM4.589 3c.016 0 .032.004.048.005a.714.714 0 0 1 .146.025l.05.016a.7.7 0 0 1 .083.037l.04.021a.712.712 0 0 1 .076.053l.035.03a.699.699 0 0 1 .168.223.703.703 0 0 1 .061.209c.002.014.007.027.008.042l.207 2.646h15.776c.027.001.05.006.073.008.026.003.052.004.077.01.022.004.036.011.05.016.03.008.058.016.085.028.02.009.037.02.056.03.022.012.044.024.065.038.019.013.035.029.053.044.017.015.036.029.052.046.015.016.028.034.042.051.015.019.03.037.044.057.011.018.02.038.03.057.012.021.024.042.033.065.009.022.014.044.021.067.006.022.014.043.018.066.006.027.007.054.009.081.001.018.005.035.005.053-.001.031-.005.054-.008.077-.003.026-.004.052-.01.077l-1.39 6.054-.004.017a.698.698 0 0 1-.033.1l-.008.024a.716.716 0 0 1-.06.11l-.024.03a.707.707 0 0 1-.057.07l-.035.033a.695.695 0 0 1-.175.117l-.048.022a.723.723 0 0 1-.083.026c-.014.003-.027.008-.041.01a.707.707 0 0 1-.134.014H6.096l.112 1.427H19.41a.717.717 0 0 1 0 1.434H5.544a.714.714 0 0 1-.14-.015c-.015-.003-.03-.008-.044-.012-.03-.008-.06-.016-.087-.027-.018-.008-.034-.017-.05-.026-.024-.012-.048-.023-.07-.037-.016-.011-.03-.024-.046-.036-.02-.016-.04-.03-.058-.048-.015-.014-.027-.03-.04-.044-.017-.02-.033-.038-.048-.058-.012-.017-.021-.034-.032-.052a.678.678 0 0 1-.035-.065c-.009-.02-.016-.04-.023-.06a.715.715 0 0 1-.033-.136l-.008-.045-.904-11.571H2.717a.717.717 0 1 1 0-1.434z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$d = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
+var styles$i = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
 
 function AddToCartButton({ initialState = 'initial', onChange, quantity, }) {
     const [currentState, setState] = useState(initialState);
@@ -124,17 +124,17 @@ function ManualInputState({ onCancel, onConfirm, quantity, }) {
         e.key === 'Enter' && onConfirm(updatedQuantity);
         e.key === 'Escape' && onCancel();
     };
-    return (jsxs("div", { className: styles$d['manual-input-container'], children: [jsx("div", { className: styles$d['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity, formatOptions: {
+    return (jsxs("div", { className: styles$i['manual-input-container'], children: [jsx("div", { className: styles$i['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity, formatOptions: {
                     maximumFractionDigits: 0,
                     style: 'decimal',
                     useGrouping: false,
                 }, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: setQuantity, onKeyUp: onKeyUp, showLabel: false, size: "md" }), jsx(Button, { condensed: true, onPress: () => onConfirm(updatedQuantity), size: "md", children: "OK" })] }));
 }
 
-var styles$c = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
+var styles$h = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
 
 function IconButton({ children, className, color = 'primary', onPress, size = 'md', }) {
-    return (jsx(Button$1, { className: clsx(styles$c['icon-button'], styles$c[size], styles$c[color], className), onPress: onPress, children: children }));
+    return (jsx(Button$1, { className: clsx(styles$h['icon-button'], styles$h[size], styles$h[color], className), onPress: onPress, children: children }));
 }
 
 function FavoriteFilledIcon(props) {
@@ -145,20 +145,29 @@ function FavoriteOutlinedIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M7.333 3.33c-2.206 0-4 1.793-4 3.997 0 .857.316 1.71.967 2.604L12 20.223l7.705-10.299c.646-.888.962-1.74.962-2.597a4.003 4.003 0 0 0-4-3.996c-1.813 0-3.545 1.232-4.028 2.865a.666.666 0 0 1-1.278 0C10.878 4.563 9.146 3.33 7.333 3.33M12 22c-.21 0-.408-.1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.245 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$b = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
+var styles$g = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
 
 function FavoriteButton({ isFavorite, onPress }) {
-    return (jsx(IconButton, { className: clsx(styles$b['favorite-button'], {
-            [styles$b['is-favorite']]: isFavorite,
+    return (jsx(IconButton, { className: clsx(styles$g['favorite-button'], {
+            [styles$g['is-favorite']]: isFavorite,
         }), color: "secondary", onPress: onPress, children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
 }
 
-var styles$a = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
+var styles$f = {"link-button":"link-button-module-6i75g"};
+
+function LinkButton({ children, className, href, isDisabled, onPress, target, }) {
+    if (href) {
+        return (jsx(Link, { className: clsx(styles$f['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, target: target, children: children }));
+    }
+    return (jsx(Button$1, { className: clsx(styles$f['link-button'], className), isDisabled: isDisabled, onPress: onPress, type: "button", children: children }));
+}
+
+var styles$e = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
 
 function Tag({ children }) {
     if (!children)
         return null;
-    return (jsxs("div", { className: styles$a.tag, children: [jsx("div", { className: styles$a.body, children: children }), jsx("svg", { className: styles$a.shape, height: "16", viewBox: "0 0 8 16", width: "8", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M.925 0H0v16h5.412l2.463-8.429c.362-1.238-.08-2.576-1.094-3.315L.925 0z", fill: "currentColor", fillRule: "nonzero" }) })] }));
+    return (jsxs("div", { className: styles$e.tag, children: [jsx("div", { className: styles$e.body, children: children }), jsx("svg", { className: styles$e.shape, height: "16", viewBox: "0 0 8 16", width: "8", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M.925 0H0v16h5.412l2.463-8.429c.362-1.238-.08-2.576-1.094-3.315L.925 0z", fill: "currentColor", fillRule: "nonzero" }) })] }));
 }
 
 const IntlContext = createContext({
@@ -184,7 +193,7 @@ const useFormattedMessage = () => {
 
 const FormattedMessage = ({ id, replacementValues, }) => useFormattedMessage()(id, replacementValues);
 
-var styles$9 = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","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","vat":"product-price-module-96DoG"};
+var styles$d = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","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","vat":"product-price-module-96DoG"};
 
 const formatPrice = (price) => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 2,
@@ -196,16 +205,16 @@ function ProductPrice({ className, current, includeVat, original, }) {
     const originalPriceCurrency = original ? formatPrice(original) : null;
     const currentPriceCurrency = formatPrice(current);
     const [wholes, decimals] = currentPriceCurrency.split('.');
-    return (jsxs("div", { className: clsx(className, styles$9['product-price']), children: [!!original && (jsx("span", { className: styles$9['original-price'], children: originalPriceCurrency })), jsxs("div", { className: styles$9['current-price-wrapper'], children: [jsxs("div", { className: styles$9['current-price'], children: [jsx("span", { className: styles$9.wholes, children: wholes }), jsx("span", { className: styles$9.dot, children: "." }), jsx("span", { className: styles$9.decimals, children: decimals })] }), jsx("span", { className: styles$9.vat, children: includeVat ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
+    return (jsxs("div", { className: clsx(className, styles$d['product-price']), children: [!!original && (jsx("span", { className: styles$d['original-price'], children: originalPriceCurrency })), jsxs("div", { className: styles$d['current-price-wrapper'], children: [jsxs("div", { className: styles$d['current-price'], children: [jsx("span", { className: styles$d.wholes, children: wholes }), jsx("span", { className: styles$d.dot, children: "." }), jsx("span", { className: styles$d.decimals, children: decimals })] }), jsx("span", { className: styles$d.vat, children: includeVat ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
 }
 
-var styles$8 = {"product-sku":"product-sku-module-ITb8x"};
+var styles$c = {"product-sku":"product-sku-module-ITb8x"};
 
 function ProductSku({ sku }) {
-    return jsx("p", { className: styles$8['product-sku'], children: sku });
+    return jsx("p", { className: styles$c['product-sku'], children: sku });
 }
 
-var styles$7 = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe"};
+var styles$b = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe"};
 
 const breakpointToWidth = {
     lg: 1440,
@@ -230,47 +239,71 @@ function Image({ alt, className, fallbackSrc = '/images/fallback.svg', fit = 'co
     const handleError = () => {
         setCurrentSrc(fallbackSrc);
     };
-    return (jsx("img", { alt: alt, className: clsx(styles$7.image, styles$7[fit], className), height: height, loading: loading, onError: handleError, sizes: sizes, src: currentSrc, srcSet: srcSet, title: title, width: width }));
+    return (jsx("img", { alt: alt, className: clsx(styles$b.image, styles$b[fit], className), height: height, loading: loading, onError: handleError, sizes: sizes, src: currentSrc, srcSet: srcSet, title: title, width: width }));
 }
 
-var styles$6 = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
+var styles$a = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
 
 function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }) {
-    return (jsxs("div", { className: styles$6['product-card'], onClick: onClick, children: [jsx("div", { className: styles$6.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$6['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$6.content, children: [jsxs("div", { className: styles$6.top, children: [jsx("div", { className: styles$6.tag, children: tag && jsx(Tag, { children: tag }) }), jsx("h2", { className: styles$6.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$6.bottom, children: [jsx("div", { className: styles$6.price, children: jsx(ProductPrice, { current: price.current, includeVat: price.includeVat, original: price.original }) }), jsx("div", { className: styles$6['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+    return (jsxs("div", { className: styles$a['product-card'], onClick: onClick, children: [jsx("div", { className: styles$a.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$a['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$a.content, children: [jsxs("div", { className: styles$a.top, children: [jsx("div", { className: styles$a.tag, children: tag && jsx(Tag, { children: tag }) }), jsx("h2", { className: styles$a.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$a.bottom, children: [jsx("div", { className: styles$a.price, children: jsx(ProductPrice, { current: price.current, includeVat: price.includeVat, original: price.original }) }), jsx("div", { className: styles$a['add-to-cart-button'], children: AddToCartButton })] })] })] }));
 }
 
-var styles$5 = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","is-open":"accordion-module-W0F1z"};
+var styles$9 = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","is-open":"accordion-module-W0F1z"};
 
 function Accordion({ children, color = 'black', hasLineSeparator = true, size = 'md', }) {
-    return (jsx("div", { className: clsx(styles$5.accordion, styles$5[color], styles$5[size], hasLineSeparator && styles$5['with-seperators']), children: children &&
+    return (jsx("div", { className: clsx(styles$9.accordion, styles$9[color], styles$9[size], hasLineSeparator && styles$9['with-seperators']), children: children &&
             Children.map(children, child => {
                 return cloneElement(child, { size });
             }) }));
 }
 
-var styles$4 = {"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"};
+function ChevronDownSlim(props) {
+    return (jsx("svg", { viewBox: "0 0 16 17", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m8 12.648-6.667-6.7a3.11 3.11 0 0 1 .466-.75c.202-.245.444-.477.726-.698l5.459 5.546L13.328 4.5c.288.226.543.459.764.699.222.24.413.489.575.75L8 12.648z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+var styles$8 = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI"};
+
+const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen, onToggle, }) => {
+    const showAllRef = useRef(null);
+    useEffect(() => {
+        if (!showAllRef.current)
+            return;
+        showAllRef.current.style.setProperty('--initital-height', `${initialHeight}px`);
+    }, [initialHeight]);
+    return (jsxs("div", { ref: showAllRef, className: clsx(styles$8['show-all'], {
+            [styles$8['is-open']]: isOpen,
+        }), children: [jsx("div", { className: styles$8.panel, children: jsx("div", { className: clsx(styles$8.content, {
+                        [styles$8['has-transparency']]: hasTransparency,
+                    }), children: children }) }), jsxs(LinkButton, { className: styles$8.button, onPress: () => onToggle(!isOpen), children: [jsx(ChevronDownSlim, { className: styles$8.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
+};
+
+var styles$7 = {"multi-select":"multi-select-module-DC7Ix","filter-items":"multi-select-module-cwVFb","hidden":"multi-select-module-o7yHU","filter-item":"multi-select-module-OW-NK"};
+
+function MultiSelect({ amountShown = 3, isOpen = false, onChange, onToggleOpen, options, render, }) {
+    const shownOptions = options.slice(0, amountShown);
+    const hiddenOptions = options.slice(amountShown);
+    return (jsxs("div", { className: styles$7['multi-select'], children: [jsx("div", { className: styles$7['filter-items'], children: shownOptions.map(option => (jsxs("div", { className: styles$7['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: onToggleOpen, children: jsx("div", { className: clsx(styles$7['filter-items'], styles$7['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$7['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
+}
+
+var styles$6 = {"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"};
 
 function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles$4.checkbox, styles$4[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$4.box, children: jsx("svg", { "aria-hidden": "true", className: styles$4.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$6.checkbox, styles$6[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$6.box, children: jsx("svg", { "aria-hidden": "true", className: styles$6.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
 }
 
 function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles$4.checkbox, styles$4['color-checkbox'], styles$4[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$6.checkbox, styles$6['color-checkbox'], styles$6[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
             '--selected-color': color,
-        }, value: value, children: [jsx("div", { className: styles$4.box }), children] }));
-}
-
-function ChevronDownSlim(props) {
-    return (jsx("svg", { viewBox: "0 0 16 17", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m8 12.648-6.667-6.7a3.11 3.11 0 0 1 .466-.75c.202-.245.444-.477.726-.698l5.459 5.546L13.328 4.5c.288.226.543.459.764.699.222.24.413.489.575.75L8 12.648z", fill: "currentColor", fillRule: "evenodd" }) }));
+        }, value: value, children: [jsx("div", { className: styles$6.box }), children] }));
 }
 
 function CheckmarkFilledIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M10.864 17c-.2 0-.378-.045-.534-.135a1.588 1.588 0 0 1-.446-.407L6.278 12.22c-.185-.233-.278-.474-.278-.722 0-.264.087-.488.262-.672a.86.86 0 0 1 .651-.276c.156 0 .299.033.429.101s.258.188.384.361l3.094 3.71 5.42-8.19c.216-.354.483-.531.802-.531.245 0 .466.08.663.243A.785.785 0 0 1 18 6.88c0 .12-.028.243-.084.367a2.53 2.53 0 0 1-.194.356l-5.934 8.844c-.23.369-.538.553-.924.553z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$3 = {"select":"select-module-ui-Wc","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","item":"select-module-LgEJO","check":"select-module-lQFw3"};
+var styles$5 = {"select":"select-module-ui-Wc","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","item":"select-module-LgEJO","check":"select-module-lQFw3"};
 
-const Select = ({ disabled = false, label, onChange, options, selectedOption, showLabel = true, }) => {
+function Select({ disabled = false, label, onChange, options, selectedOption, showLabel = true, }) {
     const selectRef = useRef(null);
     useEffect(() => {
         const updateWidth = () => {
@@ -283,10 +316,10 @@ const Select = ({ disabled = false, label, onChange, options, selectedOption, sh
         window.addEventListener('resize', updateWidth);
         return () => window.removeEventListener('resize', updateWidth);
     }, []);
-    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: styles$3.select, isDisabled: disabled, onSelectionChange: selected => onChange(String(selected)), selectedKey: selectedOption, children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$3.button, children: [jsx(SelectValue, {}), jsx(ChevronDownSlim, { "aria-hidden": "true", className: styles$3.chevron })] }), jsx(Popover, { className: styles$3.popover, placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$3.listbox, children: Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$3.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(CheckmarkFilledIcon, { className: styles$3.check }) })), jsx("span", { slot: "label", children: value })] }, key))) }) })] }));
-};
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: styles$5.select, isDisabled: disabled, onSelectionChange: selected => onChange(selected), selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$5.button, children: [jsx(SelectValue, {}), jsx(ChevronDownSlim, { "aria-hidden": "true", className: styles$5.chevron })] }), jsx(Popover, { className: styles$5.popover, placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$5.listbox, children: Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$5.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(CheckmarkFilledIcon, { className: styles$5.check }) })), jsx("span", { slot: "label", children: value })] }, key))) }) })] }));
+}
 
-var styles$2 = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
+var styles$4 = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
 
 /**
  * This component is used to create a textarea that can grow as the user types.
@@ -321,7 +354,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
         }
         updateHeight();
     }, [ref, autoGrow, updateHeight, size]);
-    return (jsx("div", { className: styles$2['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
+    return (jsx("div", { className: styles$4['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
                 ref.current =
                     node;
                 textAreaRef.current = node;
@@ -332,7 +365,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
 });
 TextArea.displayName = 'TextArea';
 
-var styles$1 = {"field":"text-field-module-JeaK0"};
+var styles$3 = {"field":"text-field-module-JeaK0"};
 
 /**
  * This component is used to create a text field.
@@ -340,7 +373,7 @@ var styles$1 = {"field":"text-field-module-JeaK0"};
  * This field can also grow when a user types in text.
  */
 function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, onChange, onInput, onKeyUp, placeholder, rows, showLabel = true, size = 'lg', value, }) {
-    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$1.field, styles$1[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, onChange: value => {
+    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$3.field, styles$3[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, 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, {})] }));
 }
@@ -361,12 +394,45 @@ function IntlProvider({ children, formatMessage }) {
     return (jsx(IntlContext.Provider, { value: { formatMessage }, children: children }));
 }
 
-var styles = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
+var styles$2 = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
 
 function ProductOverviewGrid({ children }) {
-    return (jsx("div", { className: styles['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles['grid-item'], children: child }, index))) }));
+    return (jsx("div", { className: styles$2['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles$2['grid-item'], children: child }, index))) }));
+}
+
+function CloseFilledIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 32 33", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m10.667 11.14 10.666 10.58m0-10.58L10.667 21.72", fill: "none", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.867" }) }));
 }
 
+const SidebarContext = createContext({
+    isOpen: false,
+    toggle: () => { },
+});
+
+const useSidebar = () => {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider');
+    }
+    return context;
+};
+
+var styles$1 = {"sidebar":"sidebar-module-fSa9Q","close":"sidebar-module-2puGC","is-open":"sidebar-module-lV7wp"};
+
+function Sidebar({ children }) {
+    const { isOpen, toggle } = useSidebar();
+    return (jsxs("aside", { className: clsx(styles$1.sidebar, { [styles$1['is-open']]: isOpen }), children: [jsx("div", { className: styles$1.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(CloseFilledIcon, {}) }) }), jsx("div", { children: children })] }));
+}
+
+function FilterOutlinedIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M9.323 12.59c1.427 0 2.623 1.01 2.976 2.388h6.888c.46 0 .813.368.813.833 0 .465-.353.85-.813.85h-6.903C11.916 18.005 10.734 19 9.324 19c-1.412 0-2.593-.994-2.962-2.34h-1.58c-.43 0-.782-.384-.782-.85 0-.464.353-.832.782-.832h1.565c.353-1.379 1.55-2.388 2.976-2.388zm0 1.41c-.951 0-1.703.77-1.703 1.779 0 1.01.752 1.795 1.703 1.795.951 0 1.703-.786 1.703-1.795 0-1.01-.752-1.779-1.703-1.779zm5.37-8c1.41 0 2.607 1.026 2.96 2.404h1.58c.414 0 .767.368.767.833 0 .465-.353.834-.767.834h-1.595c-.353 1.362-1.55 2.355-2.946 2.355-1.411 0-2.592-.993-2.96-2.355H4.813A.814.814 0 0 1 4 9.237c0-.465.353-.833.813-.833h6.903C12.07 7.026 13.266 6 14.692 6zm0 1.426c-.967 0-1.704.77-1.704 1.78 0 1.009.737 1.794 1.703 1.794.951 0 1.703-.785 1.703-1.795 0-1.01-.752-1.779-1.703-1.779z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+const ToggleSidebarButton = () => {
+    const { toggle } = useSidebar();
+    return (jsx(Button, { color: "secondary", icon: jsx(FilterOutlinedIcon, {}), onPress: toggle, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Show filters" }) }));
+};
+
 function Filter({ children, title }) {
     return (jsxs("div", { children: [jsx("div", { children: jsx("h3", { children: title }) }), jsx("div", { children: children })] }));
 }
@@ -377,8 +443,18 @@ function ColorFilter({ onChange, options, value }) {
                         : value.filter(v => v !== option.value)), value: option.value, children: option.label }) }, option.value))) }) }));
 }
 
+var styles = {"product-listing":"product-listing-module-EmEFw","action-bar":"product-listing-module-rFNcR","count":"product-listing-module-1seez","product-grid-container":"product-listing-module-hZuKD"};
+
+const sortOptions = {
+    new: 'New',
+    popular: 'Popular',
+    price_asc: 'Price: Low - High',
+    price_desc: 'Price: High - Low',
+    recommended: 'Recommended',
+};
 function ProductListing({ activeFilters, filters, isLoading = false, onFilterChange, onSortChange, productCard: ProductCard, products, }) {
-    return (jsxs("div", { children: [jsx("h1", { children: "Product listing" }), jsxs("aside", { children: [jsx("h2", { children: "Filter" }), jsx("div", { children: jsx(ColorFilter, { onChange: colors => onFilterChange({ colors }), options: filters.color.options, value: activeFilters.colors }) })] }), jsx("main", { children: jsxs("select", { onChange: e => onSortChange({ by: e.target.value, direction: 'asc' }), children: [jsx("option", { value: "", children: "Sort By" }), jsx("option", { value: "price", children: "Price" }), jsx("option", { value: "title", children: "Title" })] }) }), isLoading ? (jsx("p", { children: "Loading..." })) : (jsx("ul", { children: products.map(product => (jsx("li", { children: jsx(ProductCard, {}) }, product.id))) }))] }));
+    const t = useFormattedMessage();
+    return (jsxs("div", { className: styles['product-listing'], children: [jsx("h1", { children: "Product listing" }), jsxs("section", { className: styles['action-bar'], children: [jsx(ToggleSidebarButton, {}), jsx("span", { className: styles.count, children: "124 articles" }), jsx(Select, { label: t('Sort'), onChange: key => onSortChange(key), options: sortOptions, selectedOption: "new", showLabel: false })] }), jsx("section", { children: isLoading ? (jsx("p", { children: "Loading..." })) : (jsxs("div", { className: styles['product-grid-container'], children: [jsx(Sidebar, { children: jsxs("div", { children: [jsx("h2", { children: "Filter" }), jsx(ColorFilter, { onChange: colors => onFilterChange({ colors }), options: filters.color.options, value: activeFilters.colors })] }) }), jsx(ProductOverviewGrid, { children: products.map(product => (jsx(ProductCard, {}, product.id))) })] })) })] }));
 }
 
 function createProductListingSearchParams(state) {
@@ -400,4 +476,4 @@ function parseProductListingSearchParams(params) {
     };
 }
 
-export { Accordion, AddToCartButton, Button, CartFilledIcon, CartOutlinedIcon, Checkbox, ColorCheckbox, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FormattedMessage, HashedOutlinedIcon, IconButton, Image, IntlProvider, NumberField, ProductCard, ProductListing, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, TextField, createProductListingSearchParams, parseProductListingSearchParams, useFormattedMessage };
+export { Accordion, AddToCartButton, Button, CartFilledIcon, CartOutlinedIcon, Checkbox, ColorCheckbox, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FormattedMessage, HashedOutlinedIcon, IconButton, Image, IntlProvider, LinkButton, MultiSelect, NumberField, ProductCard, ProductListing, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, TextField, createProductListingSearchParams, parseProductListingSearchParams, useFormattedMessage };

package/dist/intl/translation-id.d.ts

@@ -1,5 +1 @@
-export interface Translations {
-    'Excl. VAT': string;
-    'Incl. VAT': string;
-}
-export type TranslationId = keyof Translations;
+export type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Incl. VAT' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article';

package/dist/product-listing/product-listing.d.ts

@@ -8,28 +8,30 @@ export interface Filters {
         }[];
     };
 }
+declare const sortOptions: {
+    readonly new: "New";
+    readonly popular: "Popular";
+    readonly price_asc: "Price: Low - High";
+    readonly price_desc: "Price: High - Low";
+    readonly recommended: "Recommended";
+};
+type SortKey = keyof typeof sortOptions;
 export type ActiveFilters = {
     colors: string[];
 };
-export type Sort = {
-    by: string;
-    direction: string;
-};
 export type ProductListingProps = {
     activeFilters: ActiveFilters;
     filters: Filters;
     isLoading?: boolean;
     onFilterChange: (filters: ActiveFilters) => void;
-    onSortChange: (sort: Sort) => void;
-    productCard: ComponentType<any>;
+    onSortChange: (sort: SortKey) => void;
+    productCard: ComponentType;
     products: {
         id: string;
         title: string;
     }[];
-    sort: {
-        by: string;
-        direction: string;
-    };
+    sort: SortKey;
     total: number;
 };
 export declare function ProductListing({ activeFilters, filters, isLoading, onFilterChange, onSortChange, productCard: ProductCard, products, }: ProductListingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/product-listing/product-listing.stories.d.ts

@@ -3,7 +3,7 @@ import { ProductListing } from './product-listing';
 declare const meta: {
     args: {
         onFilterChange: import("@vitest/spy").Mock<[filters: import("./product-listing").ActiveFilters], void>;
-        onSortChange: import("@vitest/spy").Mock<[sort: import("./product-listing").Sort], void>;
+        onSortChange: import("@vitest/spy").Mock<[sort: "new" | "popular" | "price_asc" | "price_desc" | "recommended"], void>;
     };
     component: typeof ProductListing;
     tags: string[];

package/dist/shared/hooks/use-device.d.ts

@@ -0,0 +1,5 @@
+export declare const useDevice: () => {
+    isDesktop: boolean;
+    isMobile: boolean;
+    isTablet: boolean;
+};

package/dist/shared/hooks/use-disclosure.d.ts

@@ -0,0 +1,9 @@
+interface UseDisclosureReturnType {
+    close: () => void;
+    isClosed: boolean;
+    isOpen: boolean;
+    open: () => void;
+    toggle: () => void;
+}
+export declare const useDisclosure: () => UseDisclosureReturnType;
+export {};

package/dist/shared/hooks/use-scroll-lock.d.ts

@@ -0,0 +1 @@
+export declare const useScrollLock: (lock: boolean) => void;

package/dist/sidebar/sidebar-context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SidebarContextType {
+    isOpen: boolean;
+    toggle: () => void;
+}
+export declare const SidebarContext: React.Context<SidebarContextType>;

package/dist/sidebar/sidebar-provider.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+interface SidebarProviderProps {
+    children: ReactElement;
+}
+export declare function SidebarProvider({ children }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/sidebar/sidebar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface SidebarProps {
+    children: React.ReactNode;
+}
+export declare function Sidebar({ children }: SidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/sidebar/sidebar.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SidebarProvider } from './sidebar-provider';
+declare const meta: Meta<typeof SidebarProvider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SmallViewport: Story;
+export declare const MediumViewport: Story;
+export declare const LargeViewport: Story;

package/dist/sidebar/toggle-sidebar-button.d.ts

@@ -0,0 +1 @@
+export declare const ToggleSidebarButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/sidebar/use-sidebar.d.ts

@@ -0,0 +1,2 @@
+import { SidebarContextType } from './sidebar-context';
+export declare const useSidebar: () => SidebarContextType;