@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/carousel/usp-carousel/product-usp-carousel-slide.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Image } from '../../media/image/image.js';
+import { Heading } from '../../typography/heading/heading.js';
+import styles from './usp-carousel.module.css.js';
+
+function ProductUsp({ usp }) {
+    return (jsxs("div", { className: styles['product-usp'], children: [jsx("div", { className: styles.left, children: jsx(Image, { className: styles.image, fit: "cover", image: usp.image, title: usp.image.altText }) }), jsx("div", { className: styles.right, children: jsxs("div", { "data-content": true, className: styles.content, children: [jsx(Image, { className: styles.icon, image: usp.icon, title: usp.icon.altText }), jsx(Heading, { italic: true, uppercase: true, className: styles.title, size: "xs", children: usp.heading }), jsx("div", { className: styles.text, 
+                            // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
+                            dangerouslySetInnerHTML: { __html: usp.text } })] }) })] }));
+}
+
+export { ProductUsp };

package/dist/carousel/usp-carousel/product-usp-carousel.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ProductUsp } from './product-usp-carousel-slide.js';
+import { USPCarousel } from './usp-carousel.js';
+
+function ProductUSPCarousel({ usps }) {
+    return (jsx(USPCarousel, { slides: usps.map((usp, index) => (jsx(ProductUsp, { usp: usp }, usp.heading + usp.text || index))) }));
+}
+
+export { ProductUSPCarousel };

package/dist/carousel/usp-carousel/usp-carousel.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/swiper-react.js';
+import { CarouselPagination } from '../pagination/pagination.js';
+import styles from './usp-carousel.module.css.js';
+
+const DURATION_IN_MS = 800;
+const CONTENT_TRANSLATE_PX = 40;
+const USPCarousel = ({ slides }) => {
+    const swiperRef = useRef(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const swiperElementRef = useRef(null);
+    let currentTransitionSpeed = 0;
+    function getTransitionSpeed() {
+        const transitionSpeed = currentTransitionSpeed;
+        currentTransitionSpeed = 0;
+        return transitionSpeed;
+    }
+    function setTranslate(_swiper, _wrapperTranslate) {
+        const slides = Object.values(_swiper.slides);
+        const durationInSeconds = getTransitionSpeed() / 1000;
+        slides.map((slide, _index) => {
+            const offset = slide.swiperSlideOffset;
+            const translateX = -offset;
+            const content = slide.querySelector('[data-content]');
+            const opacity = Math.max(1 - Math.abs(slide.progress), 0);
+            const translate = Math.min(Math.abs(slide.progress), 1) * CONTENT_TRANSLATE_PX;
+            content.style.transform = `translateX(${-translate}px)`;
+            content.style.transition = `transform ${durationInSeconds}s ease`;
+            slide.style.transform = `translateX(${translateX}px)`;
+            slide.style.opacity = `${opacity}`;
+            slide.style.transition = `opacity ${durationInSeconds}s ease`;
+            if (slide !== _swiper.slides[_swiper.realIndex]) {
+                slide.style.transitionDelay = `${durationInSeconds / 4}s`;
+            }
+        });
+    }
+    return (jsxs(Swiper, { ref: swiperElementRef, className: styles['usp-carousel'], longSwipes: false, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onSetTransition: (_swiper, transitions) => {
+            currentTransitionSpeed = transitions;
+        }, onSetTranslate: setTranslate, onSwiper: swiper => {
+            swiper.update();
+            swiperRef.current = swiper;
+        }, speed: DURATION_IN_MS, virtualTranslate: true, watchSlidesProgress: true, children: [slides.map((slide, index) => (
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsx(SwiperSlide, { children: slide }, index))), jsx("div", { className: styles.pagination, id: "pagination" }), jsx("div", { className: styles.pagination, children: jsx(CarouselPagination, { currentPage: currentIndex + 1, numberOfPages: slides.length, onChange: pageNumber => swiperRef.current?.slideTo(pageNumber - 1) }) })] }));
+};
+
+export { USPCarousel };

package/dist/carousel/usp-carousel/usp-carousel.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"usp-carousel":"usp-carousel-module-UCbpX","pagination":"usp-carousel-module-msaeJ","product-usp":"usp-carousel-module-rtIrb","left":"usp-carousel-module--Vdc3","image":"usp-carousel-module-F-WAS","right":"usp-carousel-module-2fygw","content":"usp-carousel-module-AOJJg","icon":"usp-carousel-module-Diy2d","title":"usp-carousel-module--xcF2","text":"usp-carousel-module-tq8R8"};
+
+export { styles as default };

package/dist/cart-totals/cart-totals-summary.d.ts

@@ -1,5 +1,7 @@
+import { CurrencyCode } from '../intl/types';
 export interface StickyTotalCostsProps {
     className?: string;
-    totalAmount: string;
+    currencyCode: CurrencyCode;
+    totalAmount: number;
 }
-export declare function CartTotalsSummary({ className, totalAmount, }: StickyTotalCostsProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartTotalsSummary({ className, currencyCode, totalAmount, }: StickyTotalCostsProps): import("react/jsx-runtime").JSX.Element;

package/dist/cart-totals/cart-totals-summary.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Price } from '../display/price/price.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { Heading } from '../typography/heading/heading.js';
+import styles from './cart-totals-summary.module.css.js';
+
+function CartTotalsSummary({ className, currencyCode, totalAmount, }) {
+    return (jsx("div", { className: clsx(styles['cart-totals-summary'], className), children: jsxs(Heading, { bold: true, size: "xxxs", children: [jsx(FormattedMessage, { id: "Total amount is" }), jsx("br", {}), jsx(Price, { currencyCode: currencyCode, price: totalAmount })] }) }));
+}
+
+export { CartTotalsSummary };

package/dist/cart-totals/cart-totals-summary.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"cart-totals-summary":"cart-totals-summary-module-iFaoy"};
+
+export { styles as default };

package/dist/cart-totals/cart-totals.d.ts

@@ -1,10 +1,15 @@
+import { CurrencyCode } from '../intl/types';
 export interface CartTotalsProps {
+    currencyCode: CurrencyCode;
+    deliveryDate?: string;
     fulfillmentMethod?: string;
+    isPayByInvoice?: boolean;
     orderNumber?: string;
-    shippingCost: string;
-    subtotal: string;
-    tax: string;
-    total: string;
-    vatPercentage: number;
+    shippingCost: number;
+    subtotal: number;
+    tax: number;
+    total: number;
+    vatPercentage: number | undefined;
 }
-export declare function CartTotals({ fulfillmentMethod, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;
+export declare const formatDisplayPriceToSymbolSpaceValue: (displayPrice: string) => string;
+export declare function CartTotals({ currencyCode, deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;

package/dist/cart-totals/cart-totals.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Price } from '../display/price/price.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { Heading } from '../typography/heading/heading.js';
+import styles from './cart-totals.module.css.js';
+
+const formatDisplayPriceToSymbolSpaceValue = (displayPrice) => displayPrice.replace(/^(\D)([\d,.]*$)/, (_, symbol, value) => `${symbol} ${value}`);
+function CartTotals({ currencyCode, deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
+    const t = useFormattedMessage();
+    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: jsx(FormattedMessage, { noTranslationId: true, id: `fulfillmentmethod.${fulfillmentMethod}` }) }) }) })] })), isPayByInvoice && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Payment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "paymentMethod", children: jsx(FormattedMessage, { id: "Pay by invoice" }) }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), " (", jsx(FormattedMessage, { id: "Excl. VAT" }), ")"] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_subTotal", price: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "shippingCost", price: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "vatAmount", price: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_orderGrandTotalDisplay", price: total })] }) })] }));
+}
+
+export { CartTotals, formatDisplayPriceToSymbolSpaceValue };

package/dist/cart-totals/cart-totals.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"cart-totals":"cart-totals-module-Bk9zi","line":"cart-totals-module-VJ51p","label":"cart-totals-module-ciNsz","value":"cart-totals-module-KaxpH","section":"cart-totals-module-vhhxp","section-header":"cart-totals-module-AeSnX","totals":"cart-totals-module-2RLLQ"};
+
+export { styles as default };

package/dist/collapsables/accordion/accordion-item.d.ts

@@ -2,13 +2,16 @@ import { ReactNode } from 'react';
 export type BorderType = 'top' | 'middle' | 'middle-accentuated' | 'bottom';
 export interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    allowCollapse?: boolean;
+    allowToggle?: boolean;
     borderType?: BorderType | BorderType[];
     children: ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     id: string;
     initialIsOpen?: boolean;
     isDisabled?: boolean;
     size?: 'md' | 'lg';
     title: ReactNode;
 }
-export declare function AccordionItem({ _pseudo, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ _pseudo, allowCollapse, allowToggle, borderType, children, className, 'data-test-selector': dataTestSelector, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/accordion/accordion-item.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../../icon/icon.js';
+import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
+import { useInert } from '../../shared/hooks/use-inert.js';
+import { ensureArray } from '../../shared/utils/array.js';
+import { Heading } from '../../typography/heading/heading.js';
+import styles from './accordion.module.css.js';
+
+function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = true, borderType = 'bottom', children, className, 'data-test-selector': dataTestSelector, id, initialIsOpen = false, isDisabled = false, size, title, }) {
+    const { close, isOpen, open, toggle } = useDisclosure(initialIsOpen);
+    const { ref: panelRef } = useInert(isOpen);
+    useEffect(() => {
+        if (initialIsOpen) {
+            open();
+        }
+        else {
+            close();
+        }
+    }, [close, initialIsOpen, open]);
+    const panelId = `panel-${id}`;
+    return (jsxs("div", { suppressHydrationWarning: true, className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], isDisabled && styles.disabled, {
+            [styles['is-open']]: isOpen,
+            [styles['is-closed']]: !isOpen,
+            [styles['allow-toggle']]: allowCollapse && allowToggle,
+        }), "data-test-selector": dataTestSelector, children: [jsx(Heading, { className: styles.heading, tag: "h3", children: jsxs("button", { suppressHydrationWarning: true, "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo], {
+                        [styles['disable-collapse']]: !allowCollapse,
+                    }), disabled: isDisabled, id: id, onClick: () => {
+                        if (allowToggle && allowCollapse)
+                            toggle();
+                    }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, size === 'lg' ? (jsx(Icon, { className: styles.icon, name: "ArrowDownBold", size: "xs" })) : (jsx(Icon, { className: styles.icon, name: "ArrowDown", size: "xs" }))] }) }), jsx("div", { ref: panelRef, "aria-hidden": !isOpen.toString(), "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: children })] }));
+}
+
+export { AccordionItem };

package/dist/collapsables/accordion/accordion.d.ts

@@ -1,12 +1,21 @@
 import { ReactElement } from 'react';
 import { AccordionItemProps, BorderType } from './accordion-item';
 interface AccordionProps {
-    borderType?: BorderType | BorderType[];
     children?: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[] | false | undefined | null | (false | undefined | null | ReactElement<AccordionItemProps>)[];
+    variant?: 'standard' | 'select';
+}
+interface AccordionStandardProps extends AccordionProps {
+    borderType?: BorderType | BorderType[];
+    className?: string;
     color?: 'white' | 'black';
     hasLineSeparator?: boolean;
     indented?: boolean;
     size?: 'md' | 'lg';
+    variant?: 'standard';
+}
+interface AccordionDropDownProps extends AccordionProps {
+    variant: 'select';
 }
-export declare function Accordion({ borderType, children, color, hasLineSeparator, indented, size, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+type Props = AccordionStandardProps | AccordionDropDownProps;
+export declare function Accordion({ variant, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/collapsables/accordion/accordion.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Children, cloneElement } from 'react';
+import clsx from 'clsx';
+import styles from './accordion.module.css.js';
+
+function Accordion({ variant = 'standard', ...rest }) {
+    /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+    if (variant === 'standard') {
+        return jsx(StandardAccordion, { variant: variant, ...rest });
+    }
+    if (variant === 'select') {
+        return jsx(DropDownAccordion, { variant: variant, ...rest });
+    }
+    throw new Error(`Invalid variant ${variant}`);
+    /* eslint-enable @typescript-eslint/no-unnecessary-condition */
+}
+function StandardAccordion({ borderType = 'bottom', children, className, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
+    return (jsx("div", { className: clsx({ [styles.indented]: indented }, styles.accordion, styles[color], styles[size], hasLineSeparator && styles['with-seperators'], className), children: Boolean(children) &&
+            Children.map(children, child => {
+                if (!child)
+                    return null;
+                return cloneElement(child, { borderType, size });
+            }) }));
+}
+function DropDownAccordion({ children, variant }) {
+    return (jsx("div", { className: clsx(styles.accordion, styles[variant]), children: Boolean(children) &&
+            Children.map(children, child => {
+                if (!child)
+                    return null;
+                return cloneElement(child);
+            }) }));
+}
+
+export { Accordion };

package/dist/collapsables/accordion/accordion.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","heading":"accordion-module-d-B4T","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","allow-toggle":"accordion-module-QEO2d","panel":"accordion-module-KZjMo","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a","is-closed":"accordion-module-kYmoe","disable-collapse":"accordion-module-RnNRT","select":"accordion-module-SAbiG","disabled":"accordion-module-ogvYX"};
+
+export { styles as default };

package/dist/collapsables/cascading-component/cascading-component-container-context.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContainerContextType } from './types';
+export declare const CascadingComponentContainerContext: React.Context<CascadingComponentContainerContextType | null>;

package/dist/collapsables/cascading-component/cascading-component-container-context.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const CascadingComponentContainerContext = createContext(null);
+
+export { CascadingComponentContainerContext };

package/dist/collapsables/cascading-component/cascading-component-container-provider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface CascadingComponentContainerProps {
+    children: ReactNode;
+    onClose?: VoidFunction;
+    timeout?: number;
+}
+export declare function CascadingComponentContainerProvider({ children, onClose, timeout, }: CascadingComponentContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/cascading-component/cascading-component-container-provider.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import { voidFunction } from '../../shared/model/defaults.js';
+import { CascadingComponentContainerContext } from './cascading-component-container-context.js';
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function CascadingComponentContainerProvider({ children, onClose, timeout, }) {
+    const parentContext = useCascadingComponentContainer();
+    const [closeChildrenFns, updateCloseChildrenFns] = useState([]);
+    const value = useMemo(() => ({
+        close: onClose || voidFunction,
+        closeChildCascadingComponents: () => closeChildrenFns.forEach(fn => fn()),
+        registerChild: onClose => updateCloseChildrenFns(fns => [...fns, onClose]),
+        timeout,
+        unregisterChild: onClose => updateCloseChildrenFns(fns => fns.filter(fn => fn !== onClose)),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onClose, timeout]);
+    useEffect(() => {
+        if (!parentContext || !onClose)
+            return;
+        parentContext.registerChild(onClose);
+        return () => parentContext.unregisterChild(onClose);
+    }, [onClose, parentContext]);
+    return (jsx(CascadingComponentContainerContext.Provider, { value: value, children: children }));
+}
+
+export { CascadingComponentContainerProvider };

package/dist/collapsables/cascading-component/cascading-component-container.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CascadingComponentProps {
+    children: React.ReactNode;
+    onClose?: VoidFunction;
+    timeout?: number;
+}
+export declare function CascadingComponentContainer({ children, onClose, timeout, }: CascadingComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/collapsables/cascading-component/cascading-component-container.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CascadingComponentContainerProvider } from './cascading-component-container-provider.js';
+
+function CascadingComponentContainer({ children, onClose, timeout, }) {
+    return (jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: children }));
+}
+
+export { CascadingComponentContainer };

package/dist/collapsables/cascading-component/cascading-component.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RefHTMLElement } from '../unmounter/utils';
+import { CascadingComponentContainerProps } from './cascading-component-container-provider';
+interface CascadingComponentProps<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined> {
+    children: React.ReactNode;
+    isVisible?: boolean;
+    nodeRef: React.Ref<RefElement>;
+    onEnter?: VoidFunction;
+    onEntered?: VoidFunction;
+    onExit?: VoidFunction;
+    onExited?: VoidFunction;
+    onUnmounted?: () => void;
+    timeout?: number;
+}
+export declare function CascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible, nodeRef, onClose, onEnter, onEntered, onExit, onExited, onUnmounted, timeout, }: CascadingComponentProps<TElement, RefElement> & CascadingComponentContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalCascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible: _isVisible, nodeRef, onEnter, onEntered, onExit, onExited, onUnmounted, timeout: timeout, }: CascadingComponentProps<TElement, RefElement>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/collapsables/cascading-component/cascading-component.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { Unmounter } from '../unmounter/unmounter.js';
+import { createAddEndListener } from '../unmounter/utils.js';
+import { CascadingComponentContainerProvider } from './cascading-component-container-provider.js';
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function CascadingComponent({ children, isVisible = false, nodeRef, onClose, onEnter, onEntered, onExit, onExited, onUnmounted, timeout, }) {
+    const context = useCascadingComponentContainer();
+    if (!context) {
+        return (jsx(Fragment, { children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, onUnmounted: onUnmounted, timeout: timeout, children: children }) }) }));
+    }
+    return (jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, onUnmounted: onUnmounted, timeout: timeout || context.timeout, children: children }));
+}
+function InternalCascadingComponent({ children, isVisible: _isVisible = false, nodeRef, onEnter, onEntered, onExit, onExited, onUnmounted, timeout: timeout, }) {
+    const [isVisible, setIsVisible] = useState(_isVisible);
+    const [unmount, setUnmount] = useState(false);
+    useEffect(() => {
+        if (_isVisible) {
+            setIsVisible(_isVisible);
+            setUnmount(false);
+        }
+        else {
+            setUnmount(true);
+        }
+    }, [_isVisible]);
+    useEffect(() => {
+        if (isVisible) {
+            setUnmount(false);
+        }
+    }, [isVisible]);
+    const onUnmountReady = useCallback(() => {
+        setIsVisible(false);
+    }, []);
+    const onClose = useCallback(() => {
+        setUnmount(true);
+    }, []);
+    return (jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, ...(timeout === undefined
+            ? { addEndListener: createAddEndListener(nodeRef) }
+            : { timeout }), in: isVisible, nodeRef: nodeRef, children: jsx(Unmounter, { onUnmounted: onUnmounted, onUnmountReady: onUnmountReady, unmount: unmount, children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: children }) }) }));
+}
+
+export { CascadingComponent, InternalCascadingComponent };

package/dist/collapsables/cascading-component/types.d.ts

@@ -0,0 +1,11 @@
+export interface CascadingComponentContainerContextType {
+    close: VoidFunction;
+    closeChildCascadingComponents: VoidFunction;
+    registerChild: (closeFn: VoidFunction) => void;
+    timeout?: number;
+    unregisterChild: (closeFn: VoidFunction) => void;
+}
+export interface CascadingComponentContextType {
+    close: VoidFunction;
+    closeChildCascadingComponents: VoidFunction;
+}

package/dist/collapsables/cascading-component/use-cascading-component-container.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContainerContextType } from './types';
+export declare function useCascadingComponentContainer(): CascadingComponentContainerContextType | null;

package/dist/collapsables/cascading-component/use-cascading-component-container.js

@@ -0,0 +1,9 @@
+"use client";
+import { useContext } from 'react';
+import { CascadingComponentContainerContext } from './cascading-component-container-context.js';
+
+function useCascadingComponentContainer() {
+    return useContext(CascadingComponentContainerContext);
+}
+
+export { useCascadingComponentContainer };

package/dist/collapsables/cascading-component/use-cascading-component.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContextType } from './types';
+export declare function useCascadingComponent(): CascadingComponentContextType;

package/dist/collapsables/cascading-component/use-cascading-component.js

@@ -0,0 +1,15 @@
+"use client";
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function useCascadingComponent() {
+    const context = useCascadingComponentContainer();
+    if (!context) {
+        throw new Error('useCascadingComponent must be used within a CascadingComponentProvider');
+    }
+    return {
+        close: context.close,
+        closeChildCascadingComponents: context.closeChildCascadingComponents,
+    };
+}
+
+export { useCascadingComponent };

package/dist/collapsables/cascading-component/use-has-cascading-component-container.d.ts

@@ -0,0 +1 @@
+export declare function useHasCascadingComponentContainer(): boolean;

package/dist/collapsables/cascading-component/use-has-cascading-component-container.js

@@ -0,0 +1,8 @@
+"use client";
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function useHasCascadingComponentContainer() {
+    return Boolean(useCascadingComponentContainer());
+}
+
+export { useHasCascadingComponentContainer };

package/dist/collapsables/show-all/show-all.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import clsx from 'clsx';
+import { Link } from '../../buttons/link/link.js';
+import { Icon } from '../../icon/icon.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
+import { useInert } from '../../shared/hooks/use-inert.js';
+import { useResizeObserver } from '../../shared/hooks/use-resize-observer.js';
+import styles from './show-all.module.css.js';
+
+function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialIsOpen = false, isOpen: isControlledOpen, onToggle, }) {
+    const isControlled = isControlledOpen !== undefined && onToggle !== undefined;
+    const { isOpen, toggle } = useDisclosure(initialIsOpen);
+    const showAllRef = useRef(null);
+    const isReallyOpen = isControlled ? isControlledOpen : isOpen;
+    const { ref: panelRef } = useInert(isReallyOpen);
+    const [contentFits, setContentFits] = useState(false);
+    const { ref } = useResizeObserver((_target, size) => {
+        setContentFits((size.height || 0) <= initialHeight);
+    });
+    return (jsxs("div", { ref: showAllRef, className: clsx(styles['show-all'], {
+            [styles['content-fits']]: contentFits,
+            [styles['is-open']]: isReallyOpen,
+        }), style: contentFits ? undefined : { '--initial-height': `${initialHeight}px` }, children: [jsx("div", { className: styles.panel, children: jsx("div", { ref: panelRef, className: clsx(styles.content, {
+                        [styles['has-transparency']]: !contentFits && hasTransparency,
+                    }), children: jsx("div", { ref: ref, "aria-hidden": !isReallyOpen.toString(), children: children }) }) }), !contentFits && (jsxs(Link, { className: styles.button, color: "secondary", onClick: () => {
+                    if (isControlled)
+                        return onToggle(!isControlled);
+                    toggle();
+                }, children: [jsx(Icon, { className: styles.icon, name: "ArrowDown", size: "xxs" }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
+}
+
+export { ShowAll };

package/dist/collapsables/show-all/show-all.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"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","content-fits":"show-all-module-OhPfm"};
+
+export { styles as default };

package/dist/collapsables/unmounter/unmounter.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface UnmounterContextType {
+    registerChild: () => void;
+    unmount: boolean;
+    unregisterChild: () => void;
+}
+export declare const UnmounterContext: React.Context<UnmounterContextType | null>;
+export declare function useUnmount(): UnmounterContextType | null;
+export declare function Unmounter({ children: children, onUnmounted, onUnmountReady, unmount: _unmount, }: {
+    children: ReactNode;
+    onUnmountReady?: () => void;
+    onUnmounted?: () => void;
+    unmount?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/unmounter/unmounter.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useMemo, useContext } from 'react';
+
+const UnmounterContext = createContext(null);
+function useUnmount() {
+    const context = useContext(UnmounterContext);
+    return context;
+}
+function Unmounter({ children: children, onUnmounted, onUnmountReady, unmount: _unmount = false, }) {
+    const parentContext = useUnmount();
+    const [hadChildren, setHadChildren] = useState(false);
+    const [childCount, updateChildCount] = useState(0);
+    const unmount = Boolean(_unmount || parentContext?.unmount);
+    useEffect(() => {
+        return onUnmounted;
+    }, [onUnmounted]);
+    useEffect(() => {
+        if (!parentContext)
+            return;
+        parentContext.registerChild();
+        return () => {
+            parentContext.unregisterChild();
+        };
+    }, [parentContext]);
+    useEffect(() => {
+        if (!unmount || (hadChildren && childCount > 0))
+            return;
+        onUnmountReady?.();
+    }, [unmount, childCount, hadChildren, onUnmountReady]);
+    const value = useMemo(() => {
+        return {
+            registerChild: () => {
+                setHadChildren(true);
+                updateChildCount(count => count + 1);
+            },
+            unmount,
+            unregisterChild: () => updateChildCount(count => count - 1),
+        };
+    }, [unmount]);
+    return (jsx(UnmounterContext.Provider, { value: value, children: children }));
+}
+
+export { Unmounter, UnmounterContext, useUnmount };

package/dist/collapsables/unmounter/utils.d.ts

@@ -0,0 +1,2 @@
+export type RefHTMLElement<TElement extends HTMLElement> = TElement | undefined;
+export declare function createAddEndListener<TElement extends HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>(nodeRef: React.Ref<RefElement>): (doneOrNode: VoidFunction | HTMLElement, done?: VoidFunction) => void;

package/dist/collapsables/unmounter/utils.js

@@ -0,0 +1,21 @@
+function createAddEndListener(nodeRef) {
+    return function addEndListener(doneOrNode, done) {
+        if (done === undefined) {
+            if (typeof doneOrNode === 'function') {
+                if (nodeRef && 'current' in nodeRef && nodeRef.current) {
+                    return nodeRef.current.addEventListener('transitionend', event => {
+                        if (event.target === nodeRef.current)
+                            doneOrNode();
+                    }, false);
+                }
+                throw new Error('Unsupported CSSTransition addEndListener function call');
+            }
+        }
+        else if (typeof doneOrNode !== 'function') {
+            return doneOrNode.addEventListener('transitionend', done, false);
+        }
+        throw new Error('Unsupported CSSTransition addEndListener function call');
+    };
+}
+
+export { createAddEndListener };