@porsche-design-system/components-react 3.23.0 → 3.24.0-rc.1

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTabs } from '../dsr-components/tabs.mjs';
 
 const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
@@ -27,7 +27,6 @@ const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor = 'b
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTagDismissible } from '../dsr-components/tag-dismissible.mjs';
 
 const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-surface', label, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag-dismissible');
     const propsToSync = [aria, color, label, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-su
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTag } from '../dsr-components/tag.mjs';
 
 const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag');
     const propsToSync = [color, compact, icon, iconSource, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact =
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTextFieldWrapper } from '../dsr-components/text-field-wrapper.mjs';
 
 const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', submitButton = true, theme, unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = usePrefix('p-text-field-wrapper');
     const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, submitButton, theme || useTheme(), unit, unitPosition];
@@ -26,7 +26,6 @@ const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTextListItem } from '../dsr-components/text-list-item.mjs';
 
 const PTextListItem = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text-list-item');
     const props = {
         ...rest,
@@ -21,7 +21,6 @@ const PTextListItem = /*#__PURE__*/ forwardRef(({ className, children, ...rest }
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTextList } from '../dsr-components/text-list.mjs';
 
 const PTextList = /*#__PURE__*/ forwardRef(({ listType, orderType, theme, type = 'unordered', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text-list');
     const propsToSync = [listType, orderType, theme || useTheme(), type];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PTextList = /*#__PURE__*/ forwardRef(({ listType, orderType, theme, type =
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRText } from '../dsr-components/text.mjs';
 
 const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text');
     const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme(), weight];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', el
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTextareaWrapper } from '../dsr-components/textarea-wrapper.mjs';
 
 const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-textarea-wrapper');
     const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTextarea } from '../dsr-components/textarea.mjs';
 
 const PTextarea = /*#__PURE__*/ forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
@@ -28,7 +28,6 @@ const PTextarea = /*#__PURE__*/ forwardRef(({ autoComplete = '', description = '
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRToast } from '../dsr-components/toast.mjs';
 
 const PToast = /*#__PURE__*/ forwardRef(({ theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-toast');
     const themeValue = useTheme();
     useBrowserLayoutEffect(() => {
@@ -24,7 +24,6 @@ const PToast = /*#__PURE__*/ forwardRef(({ theme, className, ...rest }, ref) =>
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRWordmark } from '../dsr-components/wordmark.mjs';
 
 const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-wordmark');
     const propsToSync = [aria, href, size, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -24,7 +24,6 @@ const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -41,15 +41,7 @@ class DSRCanvas extends Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasBackground = namedSlotChildren.filter(({ props: { slot } }) => slot === 'background').length > 0;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$13(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("header", { className: "header", tabIndex: -1, children: [jsxs("div", { className: "blur", children: [jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {})] }), jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxs(PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsx("slot", { name: "header-start" })] }), jsx(PCrest, { className: "header__crest" }), jsx(PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsx("div", { className: "header__area header__area--end", children: jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsx("aside", { className: "sidebar sidebar--start", 
-                                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                                            // eslint-disable-next-line
-                                            /* @ts-ignore */
-                                            inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxs("div", { className: "sidebar__scroller", children: [jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxs(PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsx("h2", { children: jsx("slot", { name: "title" }) }))] }), jsx("div", { className: "sidebar__content", children: jsx("slot", { name: "sidebar-start" }) })] }) })), jsx("main", { className: "main", children: jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsx("aside", { className: "sidebar sidebar--end", 
-                                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                                            // eslint-disable-next-line
-                                            /* @ts-ignore */
-                                            inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxs("div", { className: "sidebar__scroller", children: [jsx("div", { className: "sidebar__header sidebar__header--end", children: jsxs(PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }) }), jsx("div", { className: "sidebar__content", children: jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsx("footer", { className: "footer", children: jsx("slot", { name: "footer" }) })), hasBackground && jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxs(PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsx("h2", { slot: "header", children: jsx("slot", { name: "title" }) })), jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsx(PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("header", { className: "header", tabIndex: -1, children: [jsxs("div", { className: "blur", children: [jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {})] }), jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxs(PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsx("slot", { name: "header-start" })] }), jsx(PCrest, { className: "header__crest" }), jsx(PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsx("div", { className: "header__area header__area--end", children: jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsx("aside", { className: "sidebar sidebar--start", inert: !this.props.sidebarStartOpen, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxs("div", { className: "sidebar__scroller", children: [jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxs(PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsx("h2", { children: jsx("slot", { name: "title" }) }))] }), jsx("div", { className: "sidebar__content", children: jsx("slot", { name: "sidebar-start" }) })] }) })), jsx("main", { className: "main", children: jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsx("aside", { className: "sidebar sidebar--end", inert: !this.props.sidebarEndOpen, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxs("div", { className: "sidebar__scroller", children: [jsx("div", { className: "sidebar__header sidebar__header--end", children: jsxs(PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }) }), jsx("div", { className: "sidebar__content", children: jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsx("footer", { className: "footer", children: jsx("slot", { name: "footer" }) })), hasBackground && jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxs(PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsx("h2", { slot: "header", children: jsx("slot", { name: "title" }) })), jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsx(PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -26,6 +26,9 @@ class DSRCarousel extends Component {
     btnNext;
     paginationEl;
     slides = [];
+    get splideSlides() {
+        return this.props.splide.Components.Elements.slides;
+    }
     get hasNavigation() {
         return this.props.slidesPerPage === 'auto' || this.props.amountOfPages > 1;
     }
@@ -57,7 +60,7 @@ class DSRCarousel extends Component {
                                             (this.props.heading ? (jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsx("div", { className: "heading", id: headingId, children: jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasControlsSlot && jsx("slot", { name: "controls" }), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,
                                         ...parseAndGetAriaAttributes(this.props.aria),
-                                    }), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsx("div", { className: "splide__slide", children: jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
+                                    }), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsx("div", { className: "splide__slide", tabIndex: 0, children: jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }
     getPageCount = () => (this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages);
 }

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

@@ -24,13 +24,7 @@ class DSRFlyoutMultilevelItem extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(this.props.primary, this.props.secondary, this.props.cascade, this.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PButtonPure
-                                // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                                /* @ts-ignore */
-                                , { 
-                                    // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                                    /* @ts-ignore */
-                                    inert: this.props.primary || this.props.cascade, className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.props.secondary, aria: { 'aria-expanded': this.props.secondary }, theme: this.theme, children: this.props.label }), jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.theme, hideLabel: { base: true, s: false }, children: this.props.label }), jsx("h2", { children: this.props.label }), jsx("div", { className: "drawer", children: jsx("div", { className: "scroller", children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PButtonPure, { inert: this.props.primary || this.props.cascade, className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.props.secondary, aria: { 'aria-expanded': this.props.secondary }, theme: this.theme, children: this.props.label }), jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.theme, hideLabel: { base: true, s: false }, children: this.props.label }), jsx("h2", { children: this.props.label }), jsx("div", { className: "drawer", children: jsx("div", { className: "scroller", children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -33,10 +33,7 @@ class DSRFlyoutMultilevel extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$T(this.props.open, this.primary, this.isSecondaryDrawerVisible, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
-                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                            /* @ts-ignore */
-                            inert: this.props.open ? null : '', ...parseAndGetAriaAttributes(this.props.aria), children: jsxs("div", { className: "drawer", children: [jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.props.theme, hideLabel: true, children: "Back" }), jsx(PButton, { className: "dismiss-mobile", type: "button", variant: "ghost", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), jsx(PButtonPure, { className: "dismiss-desktop", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }), jsx("div", { className: "scroller", children: jsx("slot", {}) })] }) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: !this.props.open, ...parseAndGetAriaAttributes(this.props.aria), children: jsxs("div", { className: "drawer", children: [jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.props.theme, hideLabel: true, children: "Back" }), jsx(PButton, { className: "dismiss-mobile", type: "button", variant: "ghost", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), jsx(PButtonPure, { className: "dismiss-desktop", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }), jsx("div", { className: "scroller", children: jsx("slot", {}) })] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -34,11 +34,7 @@ class DSRModal extends Component {
         // TODO: why do we validate only when opened?
         if (this.props.open) ;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$E(this.props.open, this.props.backdrop, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
-                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                            // eslint-disable-next-line
-                            /* @ts-ignore */
-                            inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: !this.props.open, tabIndex: -1, ...parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...parseAndGetAriaAttributes(this.props.aria),

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

@@ -16,7 +16,7 @@ class DSRModelSignature extends Component {
         const fetchPriority = this.props.fetchPriority !== 'auto' ? this.props.fetchPriority : null;
         const loading = this.props.lazy === true ? 'lazy' : null;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$D(this.props.model, this.props.safeZone, this.props.size, this.props.color, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx("slot", {}), jsx("img", { fetchpriority: fetchPriority, loading: loading, src: getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx("slot", {}), jsx("img", { fetchPriority: fetchPriority, loading: loading, src: getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/lib/components/accordion.wrapper.d.ts

@@ -42,7 +42,7 @@ export type PAccordionProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */

package/ssr/esm/lib/components/banner.wrapper.d.ts

@@ -43,7 +43,7 @@ export type PBannerProps = BaseProps & {
      */
     width?: BannerWidth;
 };
-export declare const PBanner: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PBanner: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Description of the banner.
      */

package/ssr/esm/lib/components/button-group.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PButtonGroupProps = BaseProps & {
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
-export declare const PButtonGroup: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButtonGroup: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */

package/ssr/esm/lib/components/button-pure.wrapper.d.ts

@@ -67,7 +67,7 @@ export type PButtonPureProps = BaseProps & {
      */
     weight?: ButtonPureWeight;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Display button in active state.
      */

package/ssr/esm/lib/components/button-tile.wrapper.d.ts

@@ -62,7 +62,7 @@ export type PButtonTileProps = BaseProps & {
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-export declare const PButtonTile: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButtonTile: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of button and description.
      */

package/ssr/esm/lib/components/button.wrapper.d.ts

@@ -50,7 +50,7 @@ export type PButtonProps = BaseProps & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButton: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/ssr/esm/lib/components/canvas.wrapper.d.ts

@@ -22,7 +22,7 @@ export type PCanvasProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Emitted when the sidebar end requests to be dismissed.
      */

package/ssr/esm/lib/components/carousel.wrapper.d.ts

@@ -83,7 +83,7 @@ export type PCarouselProps = BaseProps & {
      */
     wrapContent?: boolean;
 };
-export declare const PCarousel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCarousel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */

package/ssr/esm/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -26,7 +26,7 @@ export type PCheckboxWrapperProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */

package/ssr/esm/lib/components/checkbox.wrapper.d.ts

@@ -66,7 +66,7 @@ export type PCheckboxProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PCheckbox: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCheckbox: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Reflects the checkbox current checked state and allows setting the initial checked state.
      */

package/ssr/esm/lib/components/content-wrapper.wrapper.d.ts

@@ -17,7 +17,7 @@ export type PContentWrapperProps = BaseProps & {
     width?: ContentWrapperWidth;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PContentWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PContentWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

package/ssr/esm/lib/components/crest.wrapper.d.ts

@@ -14,7 +14,7 @@ export type PCrestProps = BaseProps & {
      */
     target?: CrestTarget;
 };
-export declare const PCrest: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCrest: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/ssr/esm/lib/components/display.wrapper.d.ts

@@ -26,7 +26,7 @@ export type PDisplayProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PDisplay: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDisplay: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */

package/ssr/esm/lib/components/divider.wrapper.d.ts

@@ -18,7 +18,7 @@ export type PDividerProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PDivider: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDivider: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines color depending on theme.
      */

package/ssr/esm/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -27,7 +27,7 @@ export type PFieldsetWrapperProps = BaseProps & {
     theme?: Theme;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
-export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The label text.
      */

package/ssr/esm/lib/components/fieldset.wrapper.d.ts

@@ -26,7 +26,7 @@ export type PFieldsetProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PFieldset: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFieldset: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The label text.
      */

package/ssr/esm/lib/components/flex-item.wrapper.d.ts

@@ -27,7 +27,7 @@ export type PFlexItemProps = BaseProps & {
     width?: BreakpointCustomizable<FlexItemWidth>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare const PFlexItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlexItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */

package/ssr/esm/lib/components/flex.wrapper.d.ts

@@ -27,7 +27,7 @@ export type PFlexProps = BaseProps & {
     wrap?: BreakpointCustomizable<FlexWrap>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare const PFlex: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlex: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */

package/ssr/esm/lib/components/flyout-multilevel-item.wrapper.d.ts

@@ -21,7 +21,7 @@ export type PFlyoutMultilevelItemProps = BaseProps & {
      */
     secondary?: boolean;
 };
-export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Private property set by the component itself.
      */

package/ssr/esm/lib/components/flyout-multilevel.wrapper.d.ts

@@ -26,7 +26,7 @@ export type PFlyoutMultilevelProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which flyout-multilevel-item to be visualized as opened.
      */

package/ssr/esm/lib/components/flyout.wrapper.d.ts

@@ -38,7 +38,7 @@ export type PFlyoutProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PFlyout: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyout: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/ssr/esm/lib/components/grid-item.wrapper.d.ts

@@ -11,7 +11,7 @@ export type PGridItemProps = BaseProps & {
     size?: BreakpointCustomizable<GridItemSize>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PGridItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PGridItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */

package/ssr/esm/lib/components/grid.wrapper.d.ts

@@ -16,7 +16,7 @@ export type PGridProps = BaseProps & {
     wrap?: BreakpointCustomizable<GridWrap>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PGrid: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PGrid: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */