@sonic-equipment/ui 0.0.118 → 1.0.0

package/dist/lists/icon-list/icon-list.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface IconListProps {
+    children: ReactNode;
+}
+export declare function IconList({ children }: IconListProps): import("react/jsx-runtime").JSX.Element;
+export interface IconListItemProps {
+    icon?: ReactNode;
+    text: ReactNode;
+    theme?: 'default' | 'included' | 'excluded';
+}
+export declare function IconListItem({ icon, text, theme }: IconListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/icon-list/icon-list.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './icon-list.module.css.js';
+
+function IconList({ children }) {
+    return jsx("ul", { className: styles['icon-list'], children: children });
+}
+function IconListItem({ icon, text, theme }) {
+    return (jsxs("li", { className: clsx(styles['icon-list-item'], theme && styles[`theme-${theme}`]), children: [icon && jsx("span", { className: styles.icon, children: icon }), text] }));
+}
+
+export { IconList, IconListItem };

package/dist/lists/icon-list/icon-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"icon-list":"icon-list-module-tWkJY","icon-list-item":"icon-list-module-3BzE4","theme-included":"icon-list-module-OHLcC","theme-excluded":"icon-list-module-dLR8O","icon":"icon-list-module-9-620"};
+
+export { styles as default };

package/dist/lists/menu-list/menu-list-back-button.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface MenuListBackButtonProps {
+    children: ReactNode;
+    'data-test-selector'?: string;
+    onClick: VoidFunction;
+}
+export declare function MenuListBackButton({ children, 'data-test-selector': dataTestSelector, onClick, }: MenuListBackButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lists/menu-list/menu-list-back-button.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../../icon/icon.js';
+import styles from './menu-list.module.css.js';
+
+function MenuListBackButton({ children, 'data-test-selector': dataTestSelector, onClick, }) {
+    return (jsxs("button", { className: styles['menu-list-back-button'], "data-test-selector": dataTestSelector, onClick: onClick, type: "button", children: [jsx(Icon, { className: styles['icon'], name: "ArrowLeft", size: "xxs" }), children] }));
+}
+
+export { MenuListBackButton };

package/dist/lists/menu-list/menu-list-header.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface MenuListHeaderProps {
+    children: ReactNode;
+    'data-test-selector'?: string;
+    href?: string | null;
+}
+export declare function MenuListHeader({ children, 'data-test-selector': dataTestSelector, href, }: MenuListHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lists/menu-list/menu-list-header.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Link } from '../../buttons/link/link.js';
+import { Icon } from '../../icon/icon.js';
+import styles from './menu-list.module.css.js';
+
+function MenuListHeader({ children, 'data-test-selector': dataTestSelector, href, }) {
+    return (jsxs("h2", { className: styles['menu-list-header'], "data-test-selector": dataTestSelector, children: [href && (jsxs(Link, { href: href, children: [children, jsx(Icon, { className: styles['icon'], name: "ArrowRightThick", size: "xxs" })] })), !href && children] }));
+}
+
+export { MenuListHeader };

package/dist/lists/menu-list/menu-list-item.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ImageType } from '../../shared/model/image';
+export interface MenuListItemProps {
+    'aria-controls'?: string;
+    badge?: ReactNode;
+    children: ReactNode | string;
+    className?: string;
+    'data-test-selector'?: string;
+    hasChildren?: boolean;
+    href?: string | null;
+    image?: ImageType | null;
+    isSelected?: boolean;
+    onClick?: VoidFunction;
+    openInNewTab?: boolean;
+}
+export declare function MenuListItem({ 'aria-controls': ariaControls, badge, children, className, 'data-test-selector': dataTestSelector, hasChildren, href, image, isSelected, onClick, openInNewTab, ...rest }: MenuListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/menu-list/menu-list-item.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Link } from '../../buttons/link/link.js';
+import { Icon } from '../../icon/icon.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Image } from '../../media/image/image.js';
+import { useMenuListItem } from './use-menu-list-item.js';
+import styles from './menu-list.module.css.js';
+
+function MenuListItem({ 'aria-controls': ariaControls, badge, children, className, 'data-test-selector': dataTestSelector, hasChildren, href, image, isSelected, onClick, openInNewTab, ...rest }) {
+    const t = useFormattedMessage();
+    useMenuListItem({ canCollapse: Boolean(badge) });
+    return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children'], className), "data-test-selector": dataTestSelector, ...rest, children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(Link, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href || undefined, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, target: openInNewTab ? '_blank' : undefined, children: jsx("span", { children: children }) }), hasChildren && (jsx(Icon, { className: styles['icon'], label: t('Submenu'), name: "ArrowRight", size: "xxs" }))] }));
+}
+
+export { MenuListItem };

package/dist/lists/menu-list/menu-list-provider.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface MenuListContextValue {
+    canCollapse: boolean;
+    registerCanCollapse: (canCollapse: boolean) => () => void;
+}
+export declare const MenuListContext: React.Context<MenuListContextValue | undefined>;
+export declare function MenuListProvider({ children, }: {
+    children: ReactNode | ((args: {
+        canCollapse: boolean;
+    }) => ReactNode);
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lists/menu-list/menu-list-provider.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useCallback, useMemo } from 'react';
+import { createUUID } from '../../shared/utils/uuid.js';
+
+const MenuListContext = createContext(undefined);
+function MenuListProvider({ children, }) {
+    const [menuListItems, setMenuListItems] = useState({});
+    const registerCanCollapse = useCallback((canCollapse) => {
+        const id = createUUID();
+        setMenuListItems(prev => ({ ...prev, [id]: canCollapse }));
+        return () => {
+            setMenuListItems(prev => {
+                const newItems = { ...prev };
+                delete newItems[id];
+                return newItems;
+            });
+        };
+    }, []);
+    const canCollapse = useMemo(() => Object.values(menuListItems).every(Boolean), [menuListItems]);
+    const value = useMemo(() => {
+        return {
+            canCollapse,
+            registerCanCollapse,
+        };
+    }, [registerCanCollapse, canCollapse]);
+    return (jsx(MenuListContext.Provider, { value: value, children: children instanceof Function ? children({ canCollapse }) : children }));
+}
+
+export { MenuListContext, MenuListProvider };

package/dist/lists/menu-list/menu-list.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export type MenuListVariant = 'default' | 'primary';
+export interface MenuHeader {
+    header?: string;
+    href?: string | null;
+    label: string;
+}
+export interface MenuListProps {
+    back?: {
+        onClick: () => void;
+        title: string;
+    };
+    children: ReactNode;
+    className?: string;
+    collapsible?: boolean;
+    header?: MenuHeader;
+    scrollable?: boolean;
+    variant?: MenuListVariant;
+}
+export declare function MenuList({ back, children, className, collapsible, header, scrollable, variant, }: MenuListProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/menu-list/menu-list.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { MenuListBackButton } from './menu-list-back-button.js';
+import { MenuListHeader } from './menu-list-header.js';
+import { MenuListProvider } from './menu-list-provider.js';
+import styles from './menu-list.module.css.js';
+
+function MenuList({ back, children, className, collapsible, header, scrollable = true, variant = 'default', }) {
+    const headerTitle = header?.header || header?.label;
+    const headerHref = header?.href;
+    return (jsx(MenuListProvider, { children: ({ canCollapse }) => (jsxs("section", { className: clsx(styles['menu-list'], styles[variant], scrollable && styles['scrollable'], canCollapse && collapsible && styles['collapsible'], className), role: "menu", children: [back && (jsx(MenuListBackButton, { "data-test-selector": "menuListBackButton", onClick: back.onClick, children: back.title })), jsxs("div", { className: styles['scroll-area'], "data-test-selector": "menuListScrollArea", children: [headerTitle && (jsx(MenuListHeader, { "data-test-selector": "menuListHeader", href: headerHref, children: headerTitle })), jsx("ul", { className: styles['list'], children: children })] })] })) }));
+}
+
+export { MenuList };

package/dist/lists/menu-list/menu-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"menu-list":"menu-list-module-TloB9","scrollable":"menu-list-module-AiDgG","scroll-area":"menu-list-module-x3D-V","list":"menu-list-module-m3rpo","primary":"menu-list-module-xUg6i","collapsible":"menu-list-module-vd14x","menu-list-item":"menu-list-module-4QhF4","label":"menu-list-module-xFYyo","badge":"menu-list-module-4PbP-","has-children":"menu-list-module-61uJb","icon":"menu-list-module-syyw9","menu-list-back-button":"menu-list-module-eKDL9","menu-list-header":"menu-list-module-S08LI","image":"menu-list-module-ELekn","selected":"menu-list-module-hiMca"};
+
+export { styles as default };

package/dist/lists/menu-list/use-menu-list-item.d.ts

@@ -0,0 +1,5 @@
+export declare function useMenuListItem({ canCollapse }: {
+    canCollapse: boolean;
+}): {
+    canCollapse: boolean;
+};

package/dist/lists/menu-list/use-menu-list-item.js

@@ -0,0 +1,13 @@
+"use client";
+import { useEffect } from 'react';
+import { useMenuList } from './use-menu-list.js';
+
+function useMenuListItem({ canCollapse }) {
+    const { registerCanCollapse } = useMenuList();
+    useEffect(() => {
+        return registerCanCollapse(canCollapse);
+    }, [registerCanCollapse, canCollapse]);
+    return { canCollapse };
+}
+
+export { useMenuListItem };

package/dist/lists/menu-list/use-menu-list.d.ts

@@ -0,0 +1 @@
+export declare function useMenuList(): import("./menu-list-provider").MenuListContextValue;

package/dist/lists/menu-list/use-menu-list.js

@@ -0,0 +1,12 @@
+"use client";
+import { useContext } from 'react';
+import { MenuListContext } from './menu-list-provider.js';
+
+function useMenuList() {
+    const context = useContext(MenuListContext);
+    if (!context)
+        throw new Error('useMenuList must be used within a MenuListProvider');
+    return context;
+}
+
+export { useMenuList };

package/dist/lists/orderline-list/orderline-list.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 interface OrderLineListProps {
     children?: ReactNode;
-    onRemoveAll?: () => void;
+    onRemoveAll?: VoidFunction;
 }
 export declare function OrderLineList({ children, onRemoveAll }: OrderLineListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lists/orderline-list/orderline-list.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { Children } from 'react';
+import { Link } from '../../buttons/link/link.js';
+import { Icon } from '../../icon/icon.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { ConfirmationDialog } from '../../modals/confirmation/confirmation-dialog.js';
+import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
+import styles from './orderline-list.module.css.js';
+
+function OrderLineList({ children, onRemoveAll }) {
+    const t = useFormattedMessage();
+    const { close, isOpen, open } = useDisclosure();
+    // eslint-disable-next-line @eslint-react/no-children-count
+    const count = React.Children.count(children);
+    function handleRemoveAll() {
+        if (!onRemoveAll)
+            return;
+        open();
+    }
+    return (jsxs(Fragment, { children: [jsxs("section", { "aria-labelledby": "orderline-list-count", className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsxs("p", { className: styles.count, id: "orderline-list-count", children: [jsx("span", { "data-test-selector": "orderLineListCount", children: count }), ` ${t.pluralize('product', count)}`] }), onRemoveAll && (jsxs(Link, { className: styles['remove-all'], color: "primary", "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(Icon, { name: "Trash", size: "xs" }), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("ul", { className: styles.items, children: 
+                        // eslint-disable-next-line @eslint-react/no-children-map
+                        Children.map(children, (child, index) => (
+                        // eslint-disable-next-line @eslint-react/no-array-index-key
+                        jsx("li", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: () => {
+                    close();
+                    onRemoveAll();
+                }, title: t('Are you sure you want to remove all items from your cart?') }))] }));
+}
+
+export { OrderLineList };

package/dist/lists/orderline-list/orderline-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"orderline-list":"orderline-list-module-v-FqO","header":"orderline-list-module-JTZK3","count":"orderline-list-module-SMPUR","items":"orderline-list-module-5COK6","item":"orderline-list-module-2p-Jd"};
+
+export { styles as default };

package/dist/lists/product-overview-grid/product-overview-grid.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Children } from 'react';
+import { ProgressCircle } from '../../loading/progress-circle.js';
+import styles from './product-overview-grid.module.css.js';
+
+function ProductOverviewGrid({ children, isLoading, }) {
+    return (jsxs("div", { className: styles['product-grid'], children: [
+            // eslint-disable-next-line @eslint-react/no-children-map
+            Children.map(children, (child, index) => (
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsx("div", { className: styles['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles['loading-panel'], children: jsx(ProgressCircle, { className: styles['progress-circle'], variant: "gray" }) }))] }));
+}
+
+export { ProductOverviewGrid };

package/dist/lists/product-overview-grid/product-overview-grid.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","progress-circle":"product-overview-grid-module-DWnnI","grid-item":"product-overview-grid-module-MlUVA"};
+
+export { styles as default };

package/dist/lists/widget-grid/widget-grid.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface WidgetGridProps {
+    children?: ReactNode;
+}
+export declare function WidgetGrid({ children }: WidgetGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/widget-grid/widget-grid.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import styles from './widget-grid.module.css.js';
+
+function WidgetGrid({ children }) {
+    return jsx("div", { className: styles['widget-grid'], children: children });
+}
+
+export { WidgetGrid };

package/dist/lists/widget-grid/widget-grid.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"widget-grid":"widget-grid-module-GdtqD","widget":"widget-grid-module-y2wM2","size-full":"widget-grid-module-Pladu"};
+
+export { styles as default };

package/dist/lists/widget-grid/widget.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface WidgetProps {
+    children?: ReactNode;
+    size?: 'default' | 'full';
+}
+export declare function Widget({ children, size }: WidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/widget-grid/widget.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './widget-grid.module.css.js';
+
+function Widget({ children, size = 'default' }) {
+    return (jsx("div", { className: clsx(styles['widget'], styles[`size-${size}`]), children: children }));
+}
+
+export { Widget };

package/dist/loading/blank-page-spacer.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import styles from './blank-page-spacer.module.css.js';
+
+function BlankPageSpacer({ children }) {
+    return jsx("div", { className: styles['blank-page-spacer'], children: children });
+}
+
+export { BlankPageSpacer };

package/dist/loading/blank-page-spacer.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"blank-page-spacer":"blank-page-spacer-module-lXxle"};
+
+export { styles as default };

package/dist/loading/dynamic-loading-overlay.d.ts

@@ -0,0 +1,5 @@
+export declare function DynamicLoadingOverlay({ children, className, isLoading, }: {
+    children?: React.ReactNode;
+    className?: string;
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/loading/dynamic-loading-overlay.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { useIntersectionObserver } from '../shared/hooks/use-intersection-observer.js';
+import { ProgressCircle } from './progress-circle.js';
+import styles from './dynamic-loading-overlay.module.css.js';
+
+const thresholdEntries = 1000;
+const threshold = Array.from({ length: thresholdEntries }, (_, i) => i / thresholdEntries);
+function DynamicLoadingOverlay({ children, className, isLoading, }) {
+    const [intersectedHeight, setIntersectedHeight] = useState(0);
+    const container = useRef(null);
+    useIntersectionObserver({
+        isDisabled: !isLoading,
+        observables: [{ ref: container }],
+        onCallback: entries => {
+            entries.forEach(entry => {
+                setIntersectedHeight(entry.intersectionRect.height);
+            });
+        },
+        threshold,
+    });
+    useEffect(() => {
+        if (!isLoading) {
+            // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+            setIntersectedHeight(0);
+        }
+    }, [isLoading]);
+    return (jsxs("div", { ref: container, className: clsx(styles['dynamic-loading-overlay'], isLoading && styles['is-loading'], className), style: { '--intersected-height': `${intersectedHeight}px` }, children: [jsx("div", { className: styles['content'], children: children }), jsx("div", { className: styles['loading-indicator'], children: jsx(ProgressCircle, { className: styles['spinner'], variant: "gray" }) })] }));
+}
+
+export { DynamicLoadingOverlay };

package/dist/loading/dynamic-loading-overlay.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"dynamic-loading-overlay":"dynamic-loading-overlay-module-CAecM","content":"dynamic-loading-overlay-module-XeFAb","loading-indicator":"dynamic-loading-overlay-module-lhL5i","spinner":"dynamic-loading-overlay-module-cpo4H","is-loading":"dynamic-loading-overlay-module-3bed-"};
+
+export { styles as default };

package/dist/loading/loading-overlay.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ProgressCircle } from './progress-circle.js';
+import styles from './loading-overlay.module.css.js';
+
+function LoadingOverlay() {
+    return (jsx("div", { className: styles['loading-overlay'], children: jsx(ProgressCircle, { variant: "gray" }) }));
+}
+
+export { LoadingOverlay };

package/dist/loading/loading-overlay.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"loading-overlay":"loading-overlay-module-L67Gy"};
+
+export { styles as default };

package/dist/loading/progress-circle.d.ts

@@ -1,4 +1,6 @@
 export interface ProgressCircleProps {
     className?: string;
+    size?: 'sm' | 'lg';
+    variant?: 'white' | 'gray';
 }
-export declare function ProgressCircle({ className }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressCircle({ className, size, variant, }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;

package/dist/loading/progress-circle.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './progress-circle.module.css.js';
+
+function ProgressCircle({ className, size = 'lg', variant = 'white', }) {
+    return (jsx("span", { className: clsx(styles['progress-circle'], styles[variant], styles[size], className) }));
+}
+
+export { ProgressCircle };

package/dist/loading/progress-circle.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K","white":"progress-circle-module-SHNFy","gray":"progress-circle-module-TRZWO","sm":"progress-circle-module--Gspu","md":"progress-circle-module-4tRZd"};
+
+export { styles as default };

package/dist/logging/logger.d.ts

@@ -0,0 +1,11 @@
+export interface Logger {
+    debug(message: unknown, ...args: unknown[]): void;
+    error(message: unknown, error: unknown): void;
+    error(message: unknown, error: unknown, ...args: unknown[]): void;
+    error(error: unknown): void;
+    info(message: unknown, ...args: unknown[]): void;
+    warn(message: unknown, ...args: unknown[]): void;
+}
+export declare const consoleLogger: Logger;
+export declare let logger: Logger;
+export declare function initLogger(replacementLogger: Logger): Logger;

package/dist/logging/logger.js

@@ -0,0 +1,22 @@
+const consoleLogger = {
+    debug(...args) {
+        // eslint-disable-next-line no-console
+        return console.debug('⚡️', ...args);
+    },
+    error(...args) {
+        return console.error('❌', ...args);
+    },
+    info(...args) {
+        // eslint-disable-next-line no-console
+        return console.log('✅', ...args);
+    },
+    warn(...args) {
+        return console.warn('⚠️', ...args);
+    },
+};
+let logger = consoleLogger;
+function initLogger(replacementLogger) {
+    return (logger = replacementLogger);
+}
+
+export { consoleLogger, initLogger, logger };

package/dist/logging/use-log-error.d.ts

@@ -0,0 +1 @@
+export declare function useLogError(error?: unknown): void;

package/dist/logging/use-log-error.js

@@ -0,0 +1,13 @@
+"use client";
+import { useEffect } from 'react';
+import { logger } from './logger.js';
+
+function useLogError(error) {
+    return useEffect(() => {
+        if (!error)
+            return;
+        logger.error(error);
+    }, [error]);
+}
+
+export { useLogError };

package/dist/media/image/image.d.ts

@@ -1,14 +1,15 @@
 import { type ImageType, ResponsiveImageType } from '../../shared/model/image';
 interface ImageProps {
     className?: string;
+    'data-test-selector'?: string;
     fallbackSrc?: string;
     fit?: 'contain' | 'cover';
     height?: number;
     image: ImageType | ResponsiveImageType | undefined;
     loading?: 'lazy' | 'eager';
-    onError?: () => void;
+    onError?: VoidFunction;
     title: string;
     width?: number;
 }
-export declare function Image({ className, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Image({ className, 'data-test-selector': dataTestSelector, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/media/image/image.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { isResponsiveImage } from '../../shared/model/image.js';
+import styles from './image.module.css.js';
+
+function Image({ className, 'data-test-selector': dataTestSelector, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
+    const [hasError, setHasError] = useState(false);
+    const handleError = () => {
+        setHasError(true);
+    };
+    const props = {
+        className,
+        fallbackSrc,
+        fit,
+        height,
+        loading,
+        onError: handleError,
+        title,
+        width,
+    };
+    if (isResponsiveImage(image)) {
+        return (jsx(PictureComponent, { ...props, "data-test-selector": dataTestSelector, hasError: hasError, image: image }));
+    }
+    return (jsx(ImageComponent, { ...props, "data-test-selector": dataTestSelector, hasError: hasError, image: image }));
+}
+function createSrcSet(image) {
+    return ([
+        image[1] && `${encodeURI(decodeURI(image[1]))} 1x`,
+        image[2] && `${encodeURI(decodeURI(image[2]))} 2x`,
+        image[3] && `${encodeURI(decodeURI(image[3]))} 3x`,
+    ]
+        .filter(Boolean)
+        .join(', ') || undefined);
+}
+function getPrimarySrc(image) {
+    if (image === undefined)
+        return undefined;
+    if (isResponsiveImage(image)) {
+        return (getPrimarySrc(image.sm) ||
+            getPrimarySrc(image.md) ||
+            getPrimarySrc(image.lg));
+    }
+    return image[3] || image[2] || image[1];
+}
+function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
+    if (!image || (!image[1] && !image[2] && !image[3]))
+        return (jsx("img", { alt: "Missing", className: clsx(styles.image, className, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }));
+    const srcSet = hasError ? undefined : createSrcSet(image);
+    return (jsx("img", { alt: image.altText, className: clsx(styles.image, className, styles[fit], {
+            [styles['has-error']]: hasError,
+        }), src: hasError ? fallbackSrc : getPrimarySrc(image), srcSet: srcSet, ...rest }));
+}
+function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
+    if (!image || (!image.sm && !image.md && !image.lg))
+        return (jsx("picture", { className: clsx(styles.picture, className), children: jsx("img", { alt: "Missing", className: clsx(styles.image, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }) }));
+    return (jsxs("picture", { className: clsx(styles.picture, className), children: [image.sm && (jsx("source", { media: "(max-width: 768px)", srcSet: createSrcSet(image.sm) })), image.md && (jsx("source", { media: "(max-width: 1439px)", srcSet: createSrcSet(image.md) })), image.lg && (jsx("source", { media: "(min-width: 1440px)", srcSet: createSrcSet(image.lg) })), jsx("img", { alt: image.altText, className: clsx(styles.image, styles[fit], {
+                    [styles['has-error']]: hasError,
+                }), src: encodeURI(decodeURI((hasError ? fallbackSrc : getPrimarySrc(image)) || '')), ...rest })] }));
+}
+
+export { Image };

package/dist/media/image/image.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
+
+export { styles as default };

package/dist/media/image-grid/images-grid.d.ts

@@ -1,7 +1,8 @@
 import { ImageType } from '../../shared/model/image';
 interface ImagesGridProps {
+    className?: string;
     images: ImageType[];
     onSelectImage?: (image: ImageType, index: number) => void;
 }
-export declare function ImagesGrid({ images, onSelectImage }: ImagesGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImagesGrid({ className, images, onSelectImage, }: ImagesGridProps): import("react/jsx-runtime").JSX.Element;
 export {};