@porsche-design-system/components-react 2.17.0 → 2.18.0-rc.0

package/esm/public-api.js

@@ -1,912 +1,56 @@
-import { load } from '@porsche-design-system/components-js';
 export { componentsReady } from '@porsche-design-system/components-js';
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useEffect, useContext, useRef, useMemo, useLayoutEffect, forwardRef } from 'react';
-
-// to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
-const PorscheDesignSystemContext = createContext({
-    prefix: undefined,
-});
-const PorscheDesignSystemProvider = ({ prefix = '', ...props }) => {
-    useEffect(() => {
-        load({ prefix });
-    }, [prefix]);
-    return jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
-};
-
-const splitToArray =  (str) => str.split(' ').filter((str) => str);
-const getMergedClassName =  (domClassName, oldClassName = '', newClassName = '') => {
-    // classes previously set by component
-    const prevComponentClassNames = splitToArray(oldClassName);
-    // all classes not set by component -> to keep hydrated class and other classes set on host element
-    // (usually dom-manipulated class additions would be lost on rerender)
-    let domClasses = splitToArray(domClassName);
-    if (prevComponentClassNames.length) {
-        domClasses = domClasses.filter((x) => !prevComponentClassNames.includes(x));
-    }
-    // all classes set by component
-    const componentClasses = splitToArray(newClassName);
-    return componentClasses.concat(domClasses).join(' ');
-};
-const syncRef =  (elementRef, ref) => (el) => {
-    elementRef.current = el;
-    if (typeof ref === 'function') {
-        ref(el);
-    }
-    else if (ref !== null) {
-        ref.current = el;
-    }
-};
-const skipPorscheDesignSystemCDNRequestsDuringTests = () => {
-    window.PDS_SKIP_FETCH = true;
-};
-
-let skipCheck = false;
-/**
- * sets a flag that skips the need for `PorscheDesignSystemProvider` during testing
- * when `process.env.NODE_ENV === 'test'`
- */
-const skipCheckForPorscheDesignSystemProviderDuringTests = () => {
-    skipCheck = true;
-};
-const usePrefix =  (tagName) => {
-    if (process.env.NODE_ENV === 'test' && skipCheck) {
-        return tagName;
-    }
-    else {
-        const { prefix } = useContext(PorscheDesignSystemContext); // eslint-disable-line react-hooks/rules-of-hooks
-        if (prefix === undefined) {
-            throw new Error('It appears the <PorscheDesignSystemProvider /> is missing. Make sure to wrap your App in it.');
-        }
-        return prefix ? prefix + '-' + tagName : tagName;
-    }
-};
-const useEventCallback =  (ref, eventName, eventHandler) => {
-    useEffect(() => {
-        const { current } = ref;
-        if (current && eventHandler) {
-            current.addEventListener(eventName, eventHandler);
-            return () => current === null || current === void 0 ? void 0 : current.removeEventListener(eventName, eventHandler);
-        }
-    }, [eventHandler]); // eslint-disable-line react-hooks/exhaustive-deps
-};
-const useMergedClass =  (ref, className) => {
-    const prevComponentClassName = useRef();
-    return useMemo(() => {
-        if (!className) {
-            return undefined;
-        }
-        const { current } = ref;
-        let newClassName = className;
-        if (current) {
-            newClassName = getMergedClassName(current.className, prevComponentClassName.current, className);
-            // the jsx does not override className when the attribute changes
-            current.className = newClassName;
-        }
-        prevComponentClassName.current = className;
-        return newClassName;
-    }, [className]); // eslint-disable-line react-hooks/exhaustive-deps
-};
-const useBrowserLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-const useToastManager = () => {
-    const tagName = usePrefix('p-toast');
-    return {
-        addMessage: (message) => {
-            const toast = document.querySelector(tagName);
-            customElements.whenDefined(tagName).then(() => toast.addMessage(message));
-        },
-    };
-};
-
-const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, onAccordionChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'accordionChange', onAccordionChange);
-    const Tag = usePrefix('p-accordion');
-    const propsToSync = [compact, heading, open, size, tag, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['compact', 'heading', 'open', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PBanner = /*#__PURE__*/ forwardRef(({ onDismiss, persistent = false, state = 'neutral', theme = 'light', width = 'basic', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'dismiss', onDismiss);
-    const Tag = usePrefix('p-banner');
-    const propsToSync = [persistent, state, theme, width];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PButton = /*#__PURE__*/ forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'arrow-head-right', iconSource, loading = false, tabbable = true, theme = 'light', type = 'submit', variant = 'secondary', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, tabbable, theme, type, variant];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'tabbable', 'theme', 'type', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-button-group');
-    useBrowserLayoutEffect(() => {
-        elementRef.current.direction = direction;
-    }, [direction]);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'right', aria, disabled = false, hideLabel = false, icon = 'arrow-head-right', iconSource, loading = false, size = 'small', stretch = false, tabbable = true, theme = 'light', type = 'submit', weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, tabbable, theme, type, weight];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'size', 'stretch', 'tabbable', 'theme', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PCarousel = /*#__PURE__*/ forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'carouselChange', onCarouselChange);
-    const Tag = usePrefix('p-carousel');
-    const propsToSync = [description, disablePagination, heading, intl, slidesPerPage, theme, wrapContent];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['description', 'disablePagination', 'heading', 'intl', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PCheckboxWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, message, state];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PContentWrapper = /*#__PURE__*/ forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-content-wrapper');
-    const propsToSync = [backgroundColor, theme, width];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PDivider = /*#__PURE__*/ forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-divider');
-    const propsToSync = [color, orientation, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['color', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PFieldsetWrapper = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-fieldset-wrapper');
-    const propsToSync = [label, labelSize, message, required, state];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['label', 'labelSize', 'message', 'required', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PFlex = /*#__PURE__*/ forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-flex');
-    const propsToSync = [alignContent, alignItems, direction, inline, justifyContent, wrap];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['alignContent', 'alignItems', 'direction', 'inline', 'justifyContent', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PFlexItem = /*#__PURE__*/ forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-flex-item');
-    const propsToSync = [alignSelf, flex, grow, offset, shrink, width];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['alignSelf', 'flex', 'grow', 'offset', 'shrink', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PGrid = /*#__PURE__*/ forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-grid');
-    const propsToSync = [direction, gutter, wrap];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['direction', 'gutter', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PGridItem = /*#__PURE__*/ forwardRef(({ offset = 0, size = 1, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-grid-item');
-    const propsToSync = [offset, size];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['offset', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PHeadline = /*#__PURE__*/ forwardRef(({ align = 'left', color = 'default', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-headline');
-    const propsToSync = [align, color, ellipsis, tag, theme, variant];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'tag', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'default', lazy = false, name = 'arrow-head-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-icon');
-    const propsToSync = [aria, color, lazy, name, size, source, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PInlineNotification = /*#__PURE__*/ forwardRef(({ actionIcon = 'arrow-head-right', actionLabel, actionLoading = false, description = '', heading = '', onAction, onDismiss, persistent = false, state = 'neutral', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'action', onAction);
-    useEventCallback(elementRef, 'dismiss', onDismiss);
-    const Tag = usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, heading, persistent, state, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PLink = /*#__PURE__*/ forwardRef(({ aria, download, hideLabel = false, href, icon = 'arrow-head-right', iconSource, rel, target = '_self', theme = 'light', variant = 'secondary', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-link');
-    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme, variant];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'right', aria, download, hideLabel = false, href, icon = 'arrow-head-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-link-pure');
-    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, weight];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PLinkSocial = /*#__PURE__*/ forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semibold', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-link-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-marque');
-    const propsToSync = [aria, href, size, target, trademark];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['aria', 'href', 'size', 'target', 'trademark'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PModal = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, disableCloseButton = false, fullscreen = false, heading, onClose, open = false, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'close', onClose);
-    const Tag = usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, fullscreen, heading, open];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'disableCloseButton', 'fullscreen', 'heading', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PPagination = /*#__PURE__*/ forwardRef(({ activePage = 1, allyLabel = 'Pagination', allyLabelNext = 'Next page', allyLabelPage = 'Page', allyLabelPrev = 'Previous page', itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'pageChange', onPageChange);
-    const Tag = usePrefix('p-pagination');
-    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'itemsPerPage', 'maxNumberOfPageLinks', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-popover');
-    const propsToSync = [aria, description, direction];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PRadioButtonWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-radio-button-wrapper');
-    const propsToSync = [hideLabel, label, message, state];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PScroller = /*#__PURE__*/ forwardRef(({ gradientColorScheme = 'default', scrollIndicatorPosition = 'center', scrollToPosition, theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-scroller');
-    const propsToSync = [gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor = 'background-default', onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
-    const Tag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, theme, value];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['backgroundColor', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PSegmentedControlItem = /*#__PURE__*/ forwardRef(({ disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-segmented-control-item');
-    const propsToSync = [disabled, icon, iconSource, label, value];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['disabled', 'icon', 'iconSource', 'label', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-select-wrapper');
-    const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['description', 'dropdownDirection', 'filter', 'hideLabel', 'label', 'message', 'native', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-spinner');
-    const propsToSync = [aria, size, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['aria', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'stepChange', onStepChange);
-    const Tag = usePrefix('p-stepper-horizontal');
-    const propsToSync = [size, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PStepperHorizontalItem = /*#__PURE__*/ forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-stepper-horizontal-item');
-    const propsToSync = [disabled, state];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['disabled', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, stretch = false, tabbable = true, theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'switchChange', onSwitchChange);
-    const Tag = usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, tabbable, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'tabbable', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'sortingChange', onSortingChange);
-    const Tag = usePrefix('p-table');
-    useBrowserLayoutEffect(() => {
-        elementRef.current.caption = caption;
-    }, [caption]);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTableBody = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-table-body');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTableCell = /*#__PURE__*/ forwardRef(({ multiline = false, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-table-cell');
-    useBrowserLayoutEffect(() => {
-        elementRef.current.multiline = multiline;
-    }, [multiline]);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTableHead = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-table-head');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTableHeadCell = /*#__PURE__*/ forwardRef(({ hideLabel = false, multiline = false, sort, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-table-head-cell');
-    const propsToSync = [hideLabel, multiline, sort];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['hideLabel', 'multiline', 'sort'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTableHeadRow = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-table-head-row');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTableRow = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-table-row');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'tabChange', onTabChange);
-    const Tag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColorScheme, size, theme, weight];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['activeTabIndex', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'tabChange', onTabChange);
-    const Tag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColorScheme, size, theme, weight];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['activeTabIndex', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTabsItem = /*#__PURE__*/ forwardRef(({ label, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-tabs-item');
-    useBrowserLayoutEffect(() => {
-        elementRef.current.label = label;
-    }, [label]);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-tag');
-    const propsToSync = [color, icon, iconSource, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['color', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-surface', label, className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['aria', 'color', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PText = /*#__PURE__*/ forwardRef(({ align = 'left', color = 'default', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-text');
-    const propsToSync = [align, color, ellipsis, size, tag, theme, weight];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    useEventCallback(elementRef, 'action', onAction);
-    const Tag = usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTextList = /*#__PURE__*/ forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['listType', 'orderType', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTextListItem = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-text-list-item');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-const PToast = /*#__PURE__*/ forwardRef(({ theme = 'light', className, ...rest }, ref) => {
-    const elementRef = useRef();
-    const Tag = usePrefix('p-toast');
-    useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme;
-    }, [theme]);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsx(Tag, { ...props });
-});
-
-export { PAccordion, PBanner, PButton, PButtonGroup, PButtonPure, PCarousel, PCheckboxWrapper, PContentWrapper, PDivider, PFieldsetWrapper, PFlex, PFlexItem, PGrid, PGridItem, PHeadline, PIcon, PInlineNotification, PLink, PLinkPure, PLinkSocial, PLinkTile, PMarque, PModal, PPagination, PPopover, PRadioButtonWrapper, PScroller, PSegmentedControl, PSegmentedControlItem, PSelectWrapper, PSpinner, PStepperHorizontal, PStepperHorizontalItem, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextFieldWrapper, PTextList, PTextListItem, PTextareaWrapper, PToast, PorscheDesignSystemProvider, skipCheckForPorscheDesignSystemProviderDuringTests, skipPorscheDesignSystemCDNRequestsDuringTests, useToastManager };
+export { PAccordion } from './lib/components/accordion.wrapper.js';
+export { PBanner } from './lib/components/banner.wrapper.js';
+export { PButton } from './lib/components/button.wrapper.js';
+export { PButtonGroup } from './lib/components/button-group.wrapper.js';
+export { PButtonPure } from './lib/components/button-pure.wrapper.js';
+export { PCarousel } from './lib/components/carousel.wrapper.js';
+export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.js';
+export { PContentWrapper } from './lib/components/content-wrapper.wrapper.js';
+export { PDivider } from './lib/components/divider.wrapper.js';
+export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.js';
+export { PFlex } from './lib/components/flex.wrapper.js';
+export { PFlexItem } from './lib/components/flex-item.wrapper.js';
+export { PGrid } from './lib/components/grid.wrapper.js';
+export { PGridItem } from './lib/components/grid-item.wrapper.js';
+export { PHeadline } from './lib/components/headline.wrapper.js';
+export { PIcon } from './lib/components/icon.wrapper.js';
+export { PInlineNotification } from './lib/components/inline-notification.wrapper.js';
+export { PLink } from './lib/components/link.wrapper.js';
+export { PLinkPure } from './lib/components/link-pure.wrapper.js';
+export { PLinkSocial } from './lib/components/link-social.wrapper.js';
+export { PLinkTile } from './lib/components/link-tile.wrapper.js';
+export { PMarque } from './lib/components/marque.wrapper.js';
+export { PModal } from './lib/components/modal.wrapper.js';
+export { PPagination } from './lib/components/pagination.wrapper.js';
+export { PPopover } from './lib/components/popover.wrapper.js';
+export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.js';
+export { PScroller } from './lib/components/scroller.wrapper.js';
+export { PSegmentedControl } from './lib/components/segmented-control.wrapper.js';
+export { PSegmentedControlItem } from './lib/components/segmented-control-item.wrapper.js';
+export { PSelectWrapper } from './lib/components/select-wrapper.wrapper.js';
+export { PSpinner } from './lib/components/spinner.wrapper.js';
+export { PStepperHorizontal } from './lib/components/stepper-horizontal.wrapper.js';
+export { PStepperHorizontalItem } from './lib/components/stepper-horizontal-item.wrapper.js';
+export { PSwitch } from './lib/components/switch.wrapper.js';
+export { PTable } from './lib/components/table.wrapper.js';
+export { PTableBody } from './lib/components/table-body.wrapper.js';
+export { PTableCell } from './lib/components/table-cell.wrapper.js';
+export { PTableHead } from './lib/components/table-head.wrapper.js';
+export { PTableHeadCell } from './lib/components/table-head-cell.wrapper.js';
+export { PTableHeadRow } from './lib/components/table-head-row.wrapper.js';
+export { PTableRow } from './lib/components/table-row.wrapper.js';
+export { PTabs } from './lib/components/tabs.wrapper.js';
+export { PTabsBar } from './lib/components/tabs-bar.wrapper.js';
+export { PTabsItem } from './lib/components/tabs-item.wrapper.js';
+export { PTag } from './lib/components/tag.wrapper.js';
+export { PTagDismissible } from './lib/components/tag-dismissible.wrapper.js';
+export { PText } from './lib/components/text.wrapper.js';
+export { PTextFieldWrapper } from './lib/components/text-field-wrapper.wrapper.js';
+export { PTextList } from './lib/components/text-list.wrapper.js';
+export { PTextListItem } from './lib/components/text-list-item.wrapper.js';
+export { PTextareaWrapper } from './lib/components/textarea-wrapper.wrapper.js';
+export { PToast } from './lib/components/toast.wrapper.js';
+export { PorscheDesignSystemProvider } from './provider.js';
+export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks.js';
+export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils.js';