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

package/public-api.js

@@ -3,972 +3,121 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var componentsJs = require('@porsche-design-system/components-js');
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var accordion_wrapper = require('./lib/components/accordion.wrapper.js');
+var banner_wrapper = require('./lib/components/banner.wrapper.js');
+var button_wrapper = require('./lib/components/button.wrapper.js');
+var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.js');
+var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.js');
+var carousel_wrapper = require('./lib/components/carousel.wrapper.js');
+var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.js');
+var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.js');
+var divider_wrapper = require('./lib/components/divider.wrapper.js');
+var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper.js');
+var flex_wrapper = require('./lib/components/flex.wrapper.js');
+var flexItem_wrapper = require('./lib/components/flex-item.wrapper.js');
+var grid_wrapper = require('./lib/components/grid.wrapper.js');
+var gridItem_wrapper = require('./lib/components/grid-item.wrapper.js');
+var headline_wrapper = require('./lib/components/headline.wrapper.js');
+var icon_wrapper = require('./lib/components/icon.wrapper.js');
+var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.js');
+var link_wrapper = require('./lib/components/link.wrapper.js');
+var linkPure_wrapper = require('./lib/components/link-pure.wrapper.js');
+var linkSocial_wrapper = require('./lib/components/link-social.wrapper.js');
+var linkTile_wrapper = require('./lib/components/link-tile.wrapper.js');
+var marque_wrapper = require('./lib/components/marque.wrapper.js');
+var modal_wrapper = require('./lib/components/modal.wrapper.js');
+var pagination_wrapper = require('./lib/components/pagination.wrapper.js');
+var popover_wrapper = require('./lib/components/popover.wrapper.js');
+var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.js');
+var scroller_wrapper = require('./lib/components/scroller.wrapper.js');
+var segmentedControl_wrapper = require('./lib/components/segmented-control.wrapper.js');
+var segmentedControlItem_wrapper = require('./lib/components/segmented-control-item.wrapper.js');
+var selectWrapper_wrapper = require('./lib/components/select-wrapper.wrapper.js');
+var spinner_wrapper = require('./lib/components/spinner.wrapper.js');
+var stepperHorizontal_wrapper = require('./lib/components/stepper-horizontal.wrapper.js');
+var stepperHorizontalItem_wrapper = require('./lib/components/stepper-horizontal-item.wrapper.js');
+var switch_wrapper = require('./lib/components/switch.wrapper.js');
+var table_wrapper = require('./lib/components/table.wrapper.js');
+var tableBody_wrapper = require('./lib/components/table-body.wrapper.js');
+var tableCell_wrapper = require('./lib/components/table-cell.wrapper.js');
+var tableHead_wrapper = require('./lib/components/table-head.wrapper.js');
+var tableHeadCell_wrapper = require('./lib/components/table-head-cell.wrapper.js');
+var tableHeadRow_wrapper = require('./lib/components/table-head-row.wrapper.js');
+var tableRow_wrapper = require('./lib/components/table-row.wrapper.js');
+var tabs_wrapper = require('./lib/components/tabs.wrapper.js');
+var tabsBar_wrapper = require('./lib/components/tabs-bar.wrapper.js');
+var tabsItem_wrapper = require('./lib/components/tabs-item.wrapper.js');
+var tag_wrapper = require('./lib/components/tag.wrapper.js');
+var tagDismissible_wrapper = require('./lib/components/tag-dismissible.wrapper.js');
+var text_wrapper = require('./lib/components/text.wrapper.js');
+var textFieldWrapper_wrapper = require('./lib/components/text-field-wrapper.wrapper.js');
+var textList_wrapper = require('./lib/components/text-list.wrapper.js');
+var textListItem_wrapper = require('./lib/components/text-list-item.wrapper.js');
+var textareaWrapper_wrapper = require('./lib/components/textarea-wrapper.wrapper.js');
+var toast_wrapper = require('./lib/components/toast.wrapper.js');
+var provider = require('./provider.js');
+var hooks = require('./hooks.js');
+var utils = require('./utils.js');
 
-// to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
-const PorscheDesignSystemContext = react.createContext({
-    prefix: undefined,
-});
-const PorscheDesignSystemProvider = ({ prefix = '', ...props }) => {
-    react.useEffect(() => {
-        componentsJs.load({ prefix });
-    }, [prefix]);
-    return jsxRuntime.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 } = react.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) => {
-    react.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 = react.useRef();
-    return react.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' ? react.useLayoutEffect : react.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__*/ react.forwardRef(({ compact, heading, onAccordionChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PBanner = /*#__PURE__*/ react.forwardRef(({ onDismiss, persistent = false, state = 'neutral', theme = 'light', width = 'basic', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PButton = /*#__PURE__*/ react.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 = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PButtonPure = /*#__PURE__*/ react.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 = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PCarousel = /*#__PURE__*/ react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PCheckboxWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PContentWrapper = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PFieldsetWrapper = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PFlex = /*#__PURE__*/ react.forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PFlexItem = /*#__PURE__*/ react.forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
 
-const PGrid = /*#__PURE__*/ react.forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PGridItem = /*#__PURE__*/ react.forwardRef(({ offset = 0, size = 1, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PHeadline = /*#__PURE__*/ react.forwardRef(({ align = 'left', color = 'default', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'default', lazy = false, name = 'arrow-head-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arrow-head-right', actionLabel, actionLoading = false, description = '', heading = '', onAction, onDismiss, persistent = false, state = 'neutral', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PLink = /*#__PURE__*/ react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'arrow-head-right', iconSource, rel, target = '_self', theme = 'light', variant = 'secondary', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PLinkPure = /*#__PURE__*/ react.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 = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PLinkSocial = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PLinkTile = /*#__PURE__*/ react.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 = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PModal = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton = false, fullscreen = false, heading, onClose, open = false, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PPagination = /*#__PURE__*/ react.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 = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction = 'bottom', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PRadioButtonWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PScroller = /*#__PURE__*/ react.forwardRef(({ gradientColorScheme = 'default', scrollIndicatorPosition = 'center', scrollToPosition, theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'background-default', onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PSelectWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, stretch = false, tabbable = true, theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTable = /*#__PURE__*/ react.forwardRef(({ caption, onSortingChange, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTableBody = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
-    const Tag = usePrefix('p-table-body');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTableCell = /*#__PURE__*/ react.forwardRef(({ multiline = false, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTableHead = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
-    const Tag = usePrefix('p-table-head');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTableHeadCell = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, multiline = false, sort, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTableHeadRow = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
-    const Tag = usePrefix('p-table-head-row');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTableRow = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
-    const Tag = usePrefix('p-table-row');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTabsItem = /*#__PURE__*/ react.forwardRef(({ label, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'background-surface', label, className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PText = /*#__PURE__*/ react.forwardRef(({ align = 'left', color = 'default', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTextFieldWrapper = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTextList = /*#__PURE__*/ react.forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTextListItem = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
-    const Tag = usePrefix('p-text-list-item');
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PTextareaWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', className, ...rest }, ref) => {
-    const elementRef = react.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 jsxRuntime.jsx(Tag, { ...props });
-});
-
-const PToast = /*#__PURE__*/ react.forwardRef(({ theme = 'light', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
-    const Tag = usePrefix('p-toast');
-    useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme;
-    }, [theme]);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    return jsxRuntime.jsx(Tag, { ...props });
-});
 
 Object.defineProperty(exports, 'componentsReady', {
-    enumerable: true,
-    get: function () { return componentsJs.componentsReady; }
-});
-exports.PAccordion = PAccordion;
-exports.PBanner = PBanner;
-exports.PButton = PButton;
-exports.PButtonGroup = PButtonGroup;
-exports.PButtonPure = PButtonPure;
-exports.PCarousel = PCarousel;
-exports.PCheckboxWrapper = PCheckboxWrapper;
-exports.PContentWrapper = PContentWrapper;
-exports.PDivider = PDivider;
-exports.PFieldsetWrapper = PFieldsetWrapper;
-exports.PFlex = PFlex;
-exports.PFlexItem = PFlexItem;
-exports.PGrid = PGrid;
-exports.PGridItem = PGridItem;
-exports.PHeadline = PHeadline;
-exports.PIcon = PIcon;
-exports.PInlineNotification = PInlineNotification;
-exports.PLink = PLink;
-exports.PLinkPure = PLinkPure;
-exports.PLinkSocial = PLinkSocial;
-exports.PLinkTile = PLinkTile;
-exports.PMarque = PMarque;
-exports.PModal = PModal;
-exports.PPagination = PPagination;
-exports.PPopover = PPopover;
-exports.PRadioButtonWrapper = PRadioButtonWrapper;
-exports.PScroller = PScroller;
-exports.PSegmentedControl = PSegmentedControl;
-exports.PSegmentedControlItem = PSegmentedControlItem;
-exports.PSelectWrapper = PSelectWrapper;
-exports.PSpinner = PSpinner;
-exports.PStepperHorizontal = PStepperHorizontal;
-exports.PStepperHorizontalItem = PStepperHorizontalItem;
-exports.PSwitch = PSwitch;
-exports.PTable = PTable;
-exports.PTableBody = PTableBody;
-exports.PTableCell = PTableCell;
-exports.PTableHead = PTableHead;
-exports.PTableHeadCell = PTableHeadCell;
-exports.PTableHeadRow = PTableHeadRow;
-exports.PTableRow = PTableRow;
-exports.PTabs = PTabs;
-exports.PTabsBar = PTabsBar;
-exports.PTabsItem = PTabsItem;
-exports.PTag = PTag;
-exports.PTagDismissible = PTagDismissible;
-exports.PText = PText;
-exports.PTextFieldWrapper = PTextFieldWrapper;
-exports.PTextList = PTextList;
-exports.PTextListItem = PTextListItem;
-exports.PTextareaWrapper = PTextareaWrapper;
-exports.PToast = PToast;
-exports.PorscheDesignSystemProvider = PorscheDesignSystemProvider;
-exports.skipCheckForPorscheDesignSystemProviderDuringTests = skipCheckForPorscheDesignSystemProviderDuringTests;
-exports.skipPorscheDesignSystemCDNRequestsDuringTests = skipPorscheDesignSystemCDNRequestsDuringTests;
-exports.useToastManager = useToastManager;
+	enumerable: true,
+	get: function () { return componentsJs.componentsReady; }
+});
+exports.PAccordion = accordion_wrapper.PAccordion;
+exports.PBanner = banner_wrapper.PBanner;
+exports.PButton = button_wrapper.PButton;
+exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
+exports.PButtonPure = buttonPure_wrapper.PButtonPure;
+exports.PCarousel = carousel_wrapper.PCarousel;
+exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
+exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
+exports.PDivider = divider_wrapper.PDivider;
+exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
+exports.PFlex = flex_wrapper.PFlex;
+exports.PFlexItem = flexItem_wrapper.PFlexItem;
+exports.PGrid = grid_wrapper.PGrid;
+exports.PGridItem = gridItem_wrapper.PGridItem;
+exports.PHeadline = headline_wrapper.PHeadline;
+exports.PIcon = icon_wrapper.PIcon;
+exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
+exports.PLink = link_wrapper.PLink;
+exports.PLinkPure = linkPure_wrapper.PLinkPure;
+exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
+exports.PLinkTile = linkTile_wrapper.PLinkTile;
+exports.PMarque = marque_wrapper.PMarque;
+exports.PModal = modal_wrapper.PModal;
+exports.PPagination = pagination_wrapper.PPagination;
+exports.PPopover = popover_wrapper.PPopover;
+exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;
+exports.PScroller = scroller_wrapper.PScroller;
+exports.PSegmentedControl = segmentedControl_wrapper.PSegmentedControl;
+exports.PSegmentedControlItem = segmentedControlItem_wrapper.PSegmentedControlItem;
+exports.PSelectWrapper = selectWrapper_wrapper.PSelectWrapper;
+exports.PSpinner = spinner_wrapper.PSpinner;
+exports.PStepperHorizontal = stepperHorizontal_wrapper.PStepperHorizontal;
+exports.PStepperHorizontalItem = stepperHorizontalItem_wrapper.PStepperHorizontalItem;
+exports.PSwitch = switch_wrapper.PSwitch;
+exports.PTable = table_wrapper.PTable;
+exports.PTableBody = tableBody_wrapper.PTableBody;
+exports.PTableCell = tableCell_wrapper.PTableCell;
+exports.PTableHead = tableHead_wrapper.PTableHead;
+exports.PTableHeadCell = tableHeadCell_wrapper.PTableHeadCell;
+exports.PTableHeadRow = tableHeadRow_wrapper.PTableHeadRow;
+exports.PTableRow = tableRow_wrapper.PTableRow;
+exports.PTabs = tabs_wrapper.PTabs;
+exports.PTabsBar = tabsBar_wrapper.PTabsBar;
+exports.PTabsItem = tabsItem_wrapper.PTabsItem;
+exports.PTag = tag_wrapper.PTag;
+exports.PTagDismissible = tagDismissible_wrapper.PTagDismissible;
+exports.PText = text_wrapper.PText;
+exports.PTextFieldWrapper = textFieldWrapper_wrapper.PTextFieldWrapper;
+exports.PTextList = textList_wrapper.PTextList;
+exports.PTextListItem = textListItem_wrapper.PTextListItem;
+exports.PTextareaWrapper = textareaWrapper_wrapper.PTextareaWrapper;
+exports.PToast = toast_wrapper.PToast;
+exports.PorscheDesignSystemProvider = provider.PorscheDesignSystemProvider;
+exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
+exports.useToastManager = hooks.useToastManager;
+exports.skipPorscheDesignSystemCDNRequestsDuringTests = utils.skipPorscheDesignSystemCDNRequestsDuringTests;