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

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

@@ -15,10 +15,6 @@ const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface',
         const { current } = elementRef;
         ['aria', 'color', 'label', '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 PTagDismissible = react.forwardRef(({ aria, color = 'background-surface',
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -15,10 +15,6 @@ const PTag = react.forwardRef(({ color = 'background-surface', compact = false,
         const { current } = elementRef;
         ['color', 'compact', 'icon', 'iconSource', '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 PTag = react.forwardRef(({ color = 'background-surface', compact = false,
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,10 +16,6 @@ const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false,
         const { current } = elementRef;
         ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'submitButton', 'theme', 'unit', 'unitPosition'].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 PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false,
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -10,10 +10,6 @@ var textListItem = require('../dsr-components/text-list-item.cjs');
 const PTextListItem = react.forwardRef(({ className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text-list-item');
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -26,6 +22,7 @@ const PTextListItem = react.forwardRef(({ className, children, ...rest }, ref) =
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -15,10 +15,6 @@ const PTextList = react.forwardRef(({ listType, orderType, theme, type = 'unorde
         const { current } = elementRef;
         ['listType', 'orderType', 'theme', 'type'].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 PTextList = react.forwardRef(({ listType, orderType, theme, type = 'unorde
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -15,10 +15,6 @@ const PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis =
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].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 PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis =
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -15,10 +15,6 @@ const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false
         const { current } = elementRef;
         ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', '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 PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false
                 children,
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var textarea = require('../dsr-components/textarea.cjs');
+
+const PTextarea = react.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, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.usePrefix('p-textarea');
+    const propsToSync = [autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme || hooks.useTheme(), value, wrap];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'resize', 'rows', 'showCounter', 'spellCheck', 'state', 'theme', 'value', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(textarea.DSRTextarea, { autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme: theme || hooks.useTheme(), value, wrap })),
+            }
+            : {
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PTextarea = PTextarea;

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

@@ -14,10 +14,6 @@ const PToast = react.forwardRef(({ theme, className, ...rest }, ref) => {
     hooks.useBrowserLayoutEffect(() => {
         elementRef.current.theme = theme || themeValue;
     }, [theme, themeValue]);
-    // @ts-ignore
-    if (!process.browser) {
-        className = className ? `${className} ssr` : 'ssr';
-    }
     const props = {
         ...rest,
         // @ts-ignore
@@ -29,6 +25,7 @@ const PToast = react.forwardRef(({ theme, className, ...rest }, ref) => {
             : {
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -15,10 +15,6 @@ const PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_sel
         const { current } = elementRef;
         ['aria', 'href', 'size', '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 PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_sel
             : {
                 suppressHydrationWarning: true,
             }),
+        'data-ssr': '',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-tile.cjs

@@ -70,6 +70,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');
@@ -121,7 +122,8 @@ class DSRCarousel extends react.Component {
             ? typeof this.props.disablePagination === 'object'
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
-            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length))));
+            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
+            this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length))));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.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) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox-wrapper.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout.cjs

@@ -3,9 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../components/accordion.wrapper.cjs');
 require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
-var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');
@@ -114,7 +115,7 @@ class DSRFlyout extends react.Component {
                                 'aria-modal': true,
                                 'aria-hidden': !this.props.open,
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "flyout", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" }), hasSubFooter && jsxRuntime.jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
+                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "flyout", children: [jsxRuntime.jsx(button_wrapper.PButton, { variant: "ghost", className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" }), hasSubFooter && jsxRuntime.jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/inline-notification.cjs

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../components/accordion.wrapper.cjs');
 require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');
@@ -96,7 +97,7 @@ class DSRInlineNotification extends react.Component {
         const Heading = this.props.headingTag;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getInlineNotificationCss(this.props.state, !!this.props.actionLabel, this.hasDismissButton, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getInlineNotificationIconName(this.props.state), color: `notification-${this.props.state}`, theme: this.props.theme, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { id: bannerId, className: "content", ...utilsEntry.getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) &&
-                                            (this.props.heading ? (jsxRuntime.jsx(Heading, { id: labelId, className: "heading", children: this.props.heading })) : (jsxRuntime.jsx("slot", { name: "heading" }))), jsxRuntime.jsx("p", { id: descriptionId, className: "description", children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.hasDismissButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", type: "button", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
+                                            (this.props.heading ? (jsxRuntime.jsx(Heading, { id: labelId, className: "heading", children: this.props.heading })) : (jsxRuntime.jsx("slot", { name: "heading" }))), jsxRuntime.jsx("p", { id: descriptionId, className: "description", children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.hasDismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { className: "close", type: "button", variant: "ghost", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-pure.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-social.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-model-signature.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-product.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile.cjs

@@ -70,6 +70,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -3,9 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../components/accordion.wrapper.cjs');
 require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
-var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');
@@ -106,7 +107,7 @@ class DSRModal extends react.Component {
                                 'aria-label': this.props.heading,
                                 'aria-hidden': !this.props.open,
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "modal", children: [hasDismissButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" })), hasHeader &&
+                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "modal", children: [hasDismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { variant: "ghost", className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" })), hasHeader &&
                                             (this.props.heading ? (jsxRuntime.jsx("h2", { children: this.props.heading })) : namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsxRuntime.jsx("slot", { name: "heading" })) : (jsxRuntime.jsx("slot", { name: "header" }))), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" })] }) }) })] }), this.props.children] }));
     }
 }

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select-option.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');
@@ -115,7 +116,7 @@ class DSRMultiSelect extends react.Component {
         const dropdownId = 'list';
         const inputId = 'filter';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',
                                                 className: 'popover',
                                                 ...(this.props.popoverElement?.matches(':popover-open') && {

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/popover.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-button-wrapper.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.cjs

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../components/accordion.wrapper.cjs');
 require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
@@ -25,7 +25,7 @@ require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
 require('../components/headline.wrapper.cjs');
-var icon_wrapper = require('../components/icon.wrapper.cjs');
+require('../components/icon.wrapper.cjs');
 require('../components/inline-notification.wrapper.cjs');
 require('../components/link.wrapper.cjs');
 require('../components/link-pure.wrapper.cjs');
@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');
@@ -95,8 +96,8 @@ class DSRScroller extends react.Component {
             surface: 'background-surface',
         };
         const renderPrevNextButton = (direction) => {
-            // TODO: why not use p-button?
-            return (jsxRuntime.jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsxRuntime.jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", "aria-label": direction, children: jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', theme: this.props.theme }) }) }, direction));
+            return (jsxRuntime.jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsxRuntime.jsx(button_wrapper.PButton, { className: "action-button", variant: "ghost", "hide-label": "true", icon: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', type: "button", tabIndex: -1, theme: this.props.theme, dir: "ltr" // Otherwise icon will be flipped which doesn't make sense in this use case
+                    , children: direction }) }, direction));
         };
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getScrollerCss(deprecationMap[this.props.gradientColorScheme] || this.props.gradientColor, this.isNextHidden, this.isPrevHidden, this.props.scrollIndicatorPosition || this.props.alignScrollIndicator, this.props.scrollbar, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: utilsEntry.scrollAreaClass, children: jsxRuntime.jsxs("div", { className: "scroll-wrapper", role: utilsEntry.parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: utilsEntry.isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("div", { className: "trigger" }), jsxRuntime.jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-option.cjs

@@ -69,6 +69,7 @@ require('../components/text.wrapper.cjs');
 require('../components/text-field-wrapper.wrapper.cjs');
 require('../components/text-list.wrapper.cjs');
 require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');