@porsche-design-system/components-react 3.17.0 → 3.18.0

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3213,6 +3213,7 @@ const parseAndGetAriaAttributes = (rawAttributes) => {
             typeof val === 'boolean' ? `${val}` : val,
         ]));
     }
+    return undefined;
 };
 hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
 
@@ -3395,10 +3396,20 @@ hasWindow &&
 
 const isTouchDevice = () => {
     if (!hasWindow) {
-        return;
+        return undefined;
     }
     return !!('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
 };
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+function debounce(fn, ms = 800) {
+    let timeoutId;
+    return function (...args) {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => fn.apply(this, args), ms);
+    };
+}
 
 const getRole = (state) => {
     return state === 'error' ? 'alert' : state === 'success' ? 'status' : null;
@@ -3865,4 +3876,4 @@ const getTextTagType = (host, tag) => {
     }
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, INTERNAL_MULTI_SELECT_SLOT, INTERNAL_SELECT_SLOT, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, INTERNAL_MULTI_SELECT_SLOT, INTERNAL_SELECT_SLOT, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/hooks.mjs

@@ -32,6 +32,7 @@ const useTheme = () => {
     }
 };
 const useEventCallback = (ref, eventName, eventHandler) => {
+    // @ts-expect-error
     useEffect(() => {
         const { current } = ref;
         if (current && eventHandler) {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/accordion.wrapper.mjs

@@ -15,10 +15,6 @@ const PAccordion = forwardRef(({ compact, heading, headingTag = 'h2', onAccordio
         const { current } = elementRef;
         ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -30,6 +26,7 @@ const PAccordion = forwardRef(({ compact, heading, headingTag = 'h2', onAccordio
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/banner.wrapper.mjs

@@ -14,10 +14,6 @@ const PBanner = forwardRef(({ description = '', dismissButton = true, heading =
         const { current } = elementRef;
         ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -30,6 +26,7 @@ const PBanner = forwardRef(({ description = '', dismissButton = true, heading =
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-group.wrapper.mjs

@@ -11,10 +11,6 @@ const PButtonGroup = forwardRef(({ direction = { base: 'column', xs: 'row' }, cl
     useBrowserLayoutEffect(() => {
         elementRef.current.direction = direction;
     }, [direction]);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -26,6 +22,7 @@ const PButtonGroup = forwardRef(({ direction = { base: 'column', xs: 'row' }, cl
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-pure.wrapper.mjs

@@ -13,10 +13,6 @@ const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disa
         const { current } = elementRef;
         ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disa
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-tile.wrapper.mjs

@@ -13,10 +13,6 @@ const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', b
         const { current } = elementRef;
         ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', b
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button.wrapper.mjs

@@ -13,10 +13,6 @@ const PButton = forwardRef(({ aria, compact = false, disabled = false, hideLabel
         const { current } = elementRef;
         ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PButton = forwardRef(({ aria, compact = false, disabled = false, hideLabel
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.mjs

@@ -15,10 +15,6 @@ const PCanvas = forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sideba
         const { current } = elementRef;
         ['sidebarEndOpen', 'sidebarEndWidth', 'sidebarStartOpen', 'sidebarStartWidth'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -30,6 +26,7 @@ const PCanvas = forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sideba
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.mjs

@@ -15,10 +15,6 @@ const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', ari
         const { current } = elementRef;
         ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -30,6 +26,7 @@ const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', ari
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox-wrapper.wrapper.mjs

@@ -13,10 +13,6 @@ const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', loading =
         const { current } = elementRef;
         ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', loading =
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/content-wrapper.wrapper.mjs

@@ -13,10 +13,6 @@ const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme, wi
         const { current } = elementRef;
         ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme, wi
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/crest.wrapper.mjs

@@ -13,10 +13,6 @@ const PCrest = forwardRef(({ aria, href, target = '_self', className, ...rest },
         const { current } = elementRef;
         ['aria', 'href', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -27,6 +23,7 @@ const PCrest = forwardRef(({ aria, href, target = '_self', className, ...rest },
             : {
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/display.wrapper.mjs

@@ -13,10 +13,6 @@ const PDisplay = forwardRef(({ align = 'start', color = 'primary', ellipsis = fa
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PDisplay = forwardRef(({ align = 'start', color = 'primary', ellipsis = fa
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/divider.wrapper.mjs

@@ -13,10 +13,6 @@ const PDivider = forwardRef(({ color = 'contrast-low', direction = 'horizontal',
         const { current } = elementRef;
         ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -27,6 +23,7 @@ const PDivider = forwardRef(({ color = 'contrast-low', direction = 'horizontal',
             : {
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/fieldset-wrapper.wrapper.mjs

@@ -13,10 +13,6 @@ const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message
         const { current } = elementRef;
         ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/fieldset.wrapper.mjs

@@ -13,10 +13,6 @@ const PFieldset = forwardRef(({ label = '', labelSize = 'medium', message = '',
         const { current } = elementRef;
         ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PFieldset = forwardRef(({ label = '', labelSize = 'medium', message = '',
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/flex-item.wrapper.mjs

@@ -13,10 +13,6 @@ const PFlexItem = forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0,
         const { current } = elementRef;
         ['alignSelf', 'flex', 'grow', 'offset', 'shrink', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PFlexItem = forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0,
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/flex.wrapper.mjs

@@ -13,10 +13,6 @@ const PFlex = forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', di
         const { current } = elementRef;
         ['alignContent', 'alignItems', 'direction', 'inline', 'justifyContent', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PFlex = forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', di
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/flyout-multilevel-item.wrapper.mjs

@@ -13,10 +13,6 @@ const PFlyoutMultilevelItem = forwardRef(({ identifier, label, className, childr
         const { current } = elementRef;
         ['identifier', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PFlyoutMultilevelItem = forwardRef(({ identifier, label, className, childr
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/flyout-multilevel.wrapper.mjs

@@ -15,10 +15,6 @@ const PFlyoutMultilevel = forwardRef(({ activeIdentifier, aria, onDismiss, onUpd
         const { current } = elementRef;
         ['activeIdentifier', 'aria', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -30,6 +26,7 @@ const PFlyoutMultilevel = forwardRef(({ activeIdentifier, aria, onDismiss, onUpd
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/flyout.wrapper.mjs

@@ -16,10 +16,6 @@ const PFlyout = forwardRef(({ aria, disableBackdropClick = false, onDismiss, onM
         const { current } = elementRef;
         ['aria', 'disableBackdropClick', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -31,6 +27,7 @@ const PFlyout = forwardRef(({ aria, disableBackdropClick = false, onDismiss, onM
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/grid-item.wrapper.mjs

@@ -13,10 +13,6 @@ const PGridItem = forwardRef(({ offset = 0, size = 1, className, children, ...re
         const { current } = elementRef;
         ['offset', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PGridItem = forwardRef(({ offset = 0, size = 1, className, children, ...re
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/grid.wrapper.mjs

@@ -13,10 +13,6 @@ const PGrid = forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36
         const { current } = elementRef;
         ['direction', 'gutter', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PGrid = forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/heading.wrapper.mjs

@@ -13,10 +13,6 @@ const PHeading = forwardRef(({ align = 'start', color = 'primary', ellipsis = fa
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PHeading = forwardRef(({ align = 'start', color = 'primary', ellipsis = fa
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/headline.wrapper.mjs

@@ -13,10 +13,6 @@ const PHeadline = forwardRef(({ align = 'start', color = 'primary', ellipsis = f
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'tag', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PHeadline = forwardRef(({ align = 'start', color = 'primary', ellipsis = f
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/icon.wrapper.mjs

@@ -13,10 +13,6 @@ const PIcon = forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right',
         const { current } = elementRef;
         ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -27,6 +23,7 @@ const PIcon = forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right',
             : {
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/inline-notification.wrapper.mjs

@@ -15,10 +15,6 @@ const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabe
         const { current } = elementRef;
         ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -30,6 +26,7 @@ const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabe
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-pure.wrapper.mjs

@@ -13,10 +13,6 @@ const PLinkPure = forwardRef(({ active = false, alignLabel = 'end', aria, downlo
         const { current } = elementRef;
         ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'underline', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PLinkPure = forwardRef(({ active = false, alignLabel = 'end', aria, downlo
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-social.wrapper.mjs

@@ -13,10 +13,6 @@ const PLinkSocial = forwardRef(({ compact = false, hideLabel = false, href, icon
         const { current } = elementRef;
         ['compact', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PLinkSocial = forwardRef(({ compact = false, hideLabel = false, href, icon
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-model-signature.wrapper.mjs

@@ -13,10 +13,6 @@ const PLinkTileModelSignature = forwardRef(({ aspectRatio = '3/4', description,
         const { current } = elementRef;
         ['aspectRatio', 'description', 'heading', 'headingTag', 'linkDirection', 'model', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -28,6 +24,7 @@ const PLinkTileModelSignature = forwardRef(({ aspectRatio = '3/4', description,
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.wrapper.mjs

@@ -14,10 +14,6 @@ const PLinkTileProduct = forwardRef(({ aspectRatio = '3:4', description, heading
         const { current } = elementRef;
         ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -29,6 +25,7 @@ const PLinkTileProduct = forwardRef(({ aspectRatio = '3:4', description, heading
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };