@porsche-design-system/components-react 3.5.0 → 3.6.0-rc.0

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

@@ -0,0 +1,82 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '../components/accordion.wrapper.mjs';
+import '../components/banner.wrapper.mjs';
+import '../components/button.wrapper.mjs';
+import '../components/button-group.wrapper.mjs';
+import '../components/button-pure.wrapper.mjs';
+import '../components/button-tile.wrapper.mjs';
+import '../components/carousel.wrapper.mjs';
+import '../components/checkbox-wrapper.wrapper.mjs';
+import '../components/content-wrapper.wrapper.mjs';
+import '../components/crest.wrapper.mjs';
+import '../components/display.wrapper.mjs';
+import '../components/divider.wrapper.mjs';
+import '../components/fieldset.wrapper.mjs';
+import '../components/fieldset-wrapper.wrapper.mjs';
+import '../components/flex.wrapper.mjs';
+import '../components/flex-item.wrapper.mjs';
+import '../components/flyout.wrapper.mjs';
+import '../components/grid.wrapper.mjs';
+import '../components/grid-item.wrapper.mjs';
+import '../components/heading.wrapper.mjs';
+import '../components/headline.wrapper.mjs';
+import { PIcon } from '../components/icon.wrapper.mjs';
+import '../components/inline-notification.wrapper.mjs';
+import '../components/link.wrapper.mjs';
+import '../components/link-pure.wrapper.mjs';
+import '../components/link-social.wrapper.mjs';
+import '../components/link-tile.wrapper.mjs';
+import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/marque.wrapper.mjs';
+import '../components/modal.wrapper.mjs';
+import '../components/model-signature.wrapper.mjs';
+import '../components/pagination.wrapper.mjs';
+import '../components/popover.wrapper.mjs';
+import '../components/radio-button-wrapper.wrapper.mjs';
+import '../components/scroller.wrapper.mjs';
+import '../components/segmented-control.wrapper.mjs';
+import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select-wrapper.wrapper.mjs';
+import '../components/spinner.wrapper.mjs';
+import '../components/stepper-horizontal.wrapper.mjs';
+import '../components/stepper-horizontal-item.wrapper.mjs';
+import '../components/switch.wrapper.mjs';
+import '../components/table.wrapper.mjs';
+import '../components/table-body.wrapper.mjs';
+import '../components/table-cell.wrapper.mjs';
+import '../components/table-head.wrapper.mjs';
+import '../components/table-head-cell.wrapper.mjs';
+import '../components/table-head-row.wrapper.mjs';
+import '../components/table-row.wrapper.mjs';
+import '../components/tabs.wrapper.mjs';
+import '../components/tabs-bar.wrapper.mjs';
+import '../components/tabs-item.wrapper.mjs';
+import '../components/tag.wrapper.mjs';
+import '../components/tag-dismissible.wrapper.mjs';
+import '../components/text.wrapper.mjs';
+import '../components/text-field-wrapper.wrapper.mjs';
+import '../components/text-list.wrapper.mjs';
+import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea-wrapper.wrapper.mjs';
+import '../components/toast.wrapper.mjs';
+import '../components/wordmark.wrapper.mjs';
+import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getTagDismissibleCss as getComponentCss$9 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+
+class DSRTagDismissible extends Component {
+    host;
+    render() {
+        splitChildren(this.props.children);
+        const deprecationMap = {
+            'background-default': 'background-base',
+        };
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$9((deprecationMap[this.props.color] || this.props.color), !!this.props.label, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { type: "button", ...parseAndGetAriaAttributes(this.props.aria), children: [jsx("span", { className: "sr-only", children: "Remove:" }), jsxs("span", { children: [this.props.label && jsx("span", { className: "label", children: this.props.label }), jsx("slot", {})] }), jsx(PIcon, { className: "icon", name: "close", theme: this.props.theme, "aria-hidden": "true" })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTagDismissible };

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

@@ -0,0 +1,87 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '../components/accordion.wrapper.mjs';
+import '../components/banner.wrapper.mjs';
+import '../components/button.wrapper.mjs';
+import '../components/button-group.wrapper.mjs';
+import '../components/button-pure.wrapper.mjs';
+import '../components/button-tile.wrapper.mjs';
+import '../components/carousel.wrapper.mjs';
+import '../components/checkbox-wrapper.wrapper.mjs';
+import '../components/content-wrapper.wrapper.mjs';
+import '../components/crest.wrapper.mjs';
+import '../components/display.wrapper.mjs';
+import '../components/divider.wrapper.mjs';
+import '../components/fieldset.wrapper.mjs';
+import '../components/fieldset-wrapper.wrapper.mjs';
+import '../components/flex.wrapper.mjs';
+import '../components/flex-item.wrapper.mjs';
+import '../components/flyout.wrapper.mjs';
+import '../components/grid.wrapper.mjs';
+import '../components/grid-item.wrapper.mjs';
+import '../components/heading.wrapper.mjs';
+import '../components/headline.wrapper.mjs';
+import { PIcon } from '../components/icon.wrapper.mjs';
+import '../components/inline-notification.wrapper.mjs';
+import '../components/link.wrapper.mjs';
+import '../components/link-pure.wrapper.mjs';
+import '../components/link-social.wrapper.mjs';
+import '../components/link-tile.wrapper.mjs';
+import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/marque.wrapper.mjs';
+import '../components/modal.wrapper.mjs';
+import '../components/model-signature.wrapper.mjs';
+import '../components/pagination.wrapper.mjs';
+import '../components/popover.wrapper.mjs';
+import '../components/radio-button-wrapper.wrapper.mjs';
+import '../components/scroller.wrapper.mjs';
+import '../components/segmented-control.wrapper.mjs';
+import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select-wrapper.wrapper.mjs';
+import '../components/spinner.wrapper.mjs';
+import '../components/stepper-horizontal.wrapper.mjs';
+import '../components/stepper-horizontal-item.wrapper.mjs';
+import '../components/switch.wrapper.mjs';
+import '../components/table.wrapper.mjs';
+import '../components/table-body.wrapper.mjs';
+import '../components/table-cell.wrapper.mjs';
+import '../components/table-head.wrapper.mjs';
+import '../components/table-head-cell.wrapper.mjs';
+import '../components/table-head-row.wrapper.mjs';
+import '../components/table-row.wrapper.mjs';
+import '../components/tabs.wrapper.mjs';
+import '../components/tabs-bar.wrapper.mjs';
+import '../components/tabs-item.wrapper.mjs';
+import '../components/tag.wrapper.mjs';
+import '../components/tag-dismissible.wrapper.mjs';
+import '../components/text.wrapper.mjs';
+import '../components/text-field-wrapper.wrapper.mjs';
+import '../components/text-list.wrapper.mjs';
+import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea-wrapper.wrapper.mjs';
+import '../components/toast.wrapper.mjs';
+import '../components/wordmark.wrapper.mjs';
+import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getTagCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getDirectChildHTMLElement, getThemeForIcon } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+
+class DSRTag extends Component {
+    host;
+    render() {
+        splitChildren(this.props.children);
+        const deprecationMap = {
+            'background-default': 'background-base',
+            'neutral-contrast-high': 'primary',
+            'notification-neutral': 'notification-info-soft',
+            'notification-warning': 'notification-warning-soft',
+            'notification-success': 'notification-success-soft',
+            'notification-error': 'notification-error-soft',
+        };
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8((deprecationMap[this.props.color] || this.props.color), !!getDirectChildHTMLElement(null, 'a,button'), this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("span", { children: [(this.props.icon || this.props.iconSource) && (jsx(PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "primary", size: "x-small", theme: getThemeForIcon(this.props.color, this.props.theme), "aria-hidden": "true" })), jsx("div", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTag };

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

@@ -0,0 +1,115 @@
+import { Component, createElement } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '../components/accordion.wrapper.mjs';
+import '../components/banner.wrapper.mjs';
+import '../components/button.wrapper.mjs';
+import '../components/button-group.wrapper.mjs';
+import { PButtonPure } from '../components/button-pure.wrapper.mjs';
+import '../components/button-tile.wrapper.mjs';
+import '../components/carousel.wrapper.mjs';
+import '../components/checkbox-wrapper.wrapper.mjs';
+import '../components/content-wrapper.wrapper.mjs';
+import '../components/crest.wrapper.mjs';
+import '../components/display.wrapper.mjs';
+import '../components/divider.wrapper.mjs';
+import '../components/fieldset.wrapper.mjs';
+import '../components/fieldset-wrapper.wrapper.mjs';
+import '../components/flex.wrapper.mjs';
+import '../components/flex-item.wrapper.mjs';
+import '../components/flyout.wrapper.mjs';
+import '../components/grid.wrapper.mjs';
+import '../components/grid-item.wrapper.mjs';
+import '../components/heading.wrapper.mjs';
+import '../components/headline.wrapper.mjs';
+import { PIcon } from '../components/icon.wrapper.mjs';
+import '../components/inline-notification.wrapper.mjs';
+import '../components/link.wrapper.mjs';
+import '../components/link-pure.wrapper.mjs';
+import '../components/link-social.wrapper.mjs';
+import '../components/link-tile.wrapper.mjs';
+import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/marque.wrapper.mjs';
+import '../components/modal.wrapper.mjs';
+import '../components/model-signature.wrapper.mjs';
+import '../components/pagination.wrapper.mjs';
+import '../components/popover.wrapper.mjs';
+import '../components/radio-button-wrapper.wrapper.mjs';
+import '../components/scroller.wrapper.mjs';
+import '../components/segmented-control.wrapper.mjs';
+import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select-wrapper.wrapper.mjs';
+import '../components/spinner.wrapper.mjs';
+import '../components/stepper-horizontal.wrapper.mjs';
+import '../components/stepper-horizontal-item.wrapper.mjs';
+import '../components/switch.wrapper.mjs';
+import '../components/table.wrapper.mjs';
+import '../components/table-body.wrapper.mjs';
+import '../components/table-cell.wrapper.mjs';
+import '../components/table-head.wrapper.mjs';
+import '../components/table-head-cell.wrapper.mjs';
+import '../components/table-head-row.wrapper.mjs';
+import '../components/table-row.wrapper.mjs';
+import '../components/tabs.wrapper.mjs';
+import '../components/tabs-bar.wrapper.mjs';
+import '../components/tabs-item.wrapper.mjs';
+import '../components/tag.wrapper.mjs';
+import '../components/tag-dismissible.wrapper.mjs';
+import '../components/text.wrapper.mjs';
+import '../components/text-field-wrapper.wrapper.mjs';
+import '../components/text-list.wrapper.mjs';
+import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea-wrapper.wrapper.mjs';
+import '../components/toast.wrapper.mjs';
+import '../components/wordmark.wrapper.mjs';
+import { splitChildren } from '../../splitChildren.mjs';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getTextFieldWrapperCss as getComponentCss$7 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { isWithinForm, hasLocateAction, showCustomCalendarOrTimeIndicator, isType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { StateMessage } from './state-message.mjs';
+
+class DSRTextFieldWrapper extends Component {
+    host;
+    showPassword = false;
+    isClearable = false;
+    input;
+    unitOrCounterElement;
+    ariaElement;
+    isSearch;
+    isPassword;
+    isCalendar;
+    isTime;
+    isWithinForm;
+    hasAction;
+    hasCounter;
+    isCounterVisible;
+    hasUnit;
+    render() {
+        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { readOnly, disabled, type } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
+        const disabledOrReadOnly = disabled || readOnly;
+        const labelProps = {};
+        const buttonProps = {
+            hideLabel: true,
+            theme: this.props.theme,
+            className: 'button',
+        };
+        const isSearch = isType(type, 'search');
+        const isPassword = isType(type, 'password');
+        const isCalendar = isType(type, 'date') || isType(type, 'week') || isType(type, 'month');
+        const isTime = isType(type, 'time');
+        isWithinForm(this.props.host);
+        const hasAction = hasLocateAction(this.props.actionIcon);
+        const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
+        const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.theme)));
+        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("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), (this.props.isCounterVisible) && (jsx("span", { className: "unit", "aria-hidden": "true", children: this.props.unit })), jsx("slot", {}), hasCounter ] }), isPassword && this.props.showPasswordToggle ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: `Show ${isCalendar ? 'date' : 'time'} picker` })) : (isSearch && [
+                                            // TODO: create an own component, which would fix SSR support too
+                                            this.props.isWithinForm ? (createElement(PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsx(PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
+                                            createElement(PButtonPure, { ...buttonProps, type: "button", key: "btn-clear", icon: "close", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly }, "Clear field"),
+                                            hasAction && (createElement(PButtonPure, { ...buttonProps, type: "button", key: "btn-action", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, loading: this.props.actionLoading }, "Locate me")),
+                                        ])] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: "light", host: null }))] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTextFieldWrapper };

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

@@ -0,0 +1,17 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getTextListItemCss as getComponentCss$5 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+
+class DSRTextListItem extends Component {
+    host;
+    render() {
+        splitChildren(this.props.children);
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$5()));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("slot", {}) })] }), this.props.children] }));
+    }
+}
+
+export { DSRTextListItem };

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

@@ -0,0 +1,19 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getTextListCss as getComponentCss$6 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { isListTypeOrdered } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+
+class DSRTextList extends Component {
+    host;
+    render() {
+        splitChildren(this.props.children);
+        const TagType = isListTypeOrdered(this.props.listType || this.props.type) ? 'ol' : 'ul';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$6(this.props.listType === 'ordered' ? this.props.orderType || 'numbered' : this.props.type, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { children: jsx("slot", {}) })] }), this.props.children] }));
+    }
+}
+
+export { DSRTextList };

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

@@ -0,0 +1,31 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getTextCss as getComponentCss$4 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTextTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+
+class DSRText extends Component {
+    host;
+    render() {
+        splitChildren(this.props.children);
+        const colorDeprecationMap = {
+            brand: 'primary',
+            default: 'primary',
+            'neutral-contrast-low': 'contrast-low',
+            'neutral-contrast-medium': 'contrast-medium',
+            'neutral-contrast-high': 'contrast-high',
+            'notification-neutral': 'notification-info',
+        };
+        const weightDeprecationMap = {
+            thin: 'regular',
+            semibold: 'semi-bold',
+        };
+        const TagType = getTextTagType(null, this.props.tag);
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(this.props.size, (weightDeprecationMap[this.props.weight] || this.props.weight), this.props.align, (colorDeprecationMap[this.props.color] || this.props.color), this.props.ellipsis, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
+    }
+}
+
+export { DSRText };

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

@@ -0,0 +1,23 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getTextareaWrapperCss as getComponentCss$3 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { StateMessage } from './state-message.mjs';
+
+class DSRTextareaWrapper extends Component {
+    host;
+    textarea;
+    counterElement;
+    ariaElement;
+    hasCounter;
+    render() {
+        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const labelProps = {};
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props.disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: "light", host: null }))] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTextareaWrapper };

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

@@ -0,0 +1,17 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getToastCss as getComponentCss$1 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+
+class DSRToast extends Component {
+    host;
+    toastItemElement;
+    render() {
+        const toast = false;
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$1().replace(/(:host {[\S\s]+?})[\S\s]+/, '$1')));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: toast  })] }) }));
+    }
+}
+
+export { DSRToast };

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

@@ -0,0 +1,18 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getWordmarkCss as getComponentCss } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+
+class DSRWordmark extends Component {
+    host;
+    render() {
+        // optimized with SVGO, see docs in assets folder
+        const svg = (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 4500 300", children: [jsx("title", { children: "Porsche" }), jsx("path", { d: "M502 221c48.1 0 74-25.9 74-74V74c0-48.1-25.9-74-74-74H0v300h68v-79h434zm6-143v65c0 7.8-4.2 12-12 12H68V66h428c7.8 0 12 4.2 12 12zm228 222c-48.1 0-74-25.9-74-74V74c0-48.1 25.9-74 74-74h417c48.1 0 74 25.9 74 74v152c0 48.1-25.9 74-74 74H736zm411-66c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12H742c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h405zm675-36c39.844 16.757 67.853 56.1 68 102h-68c0-54-25-79-79-79h-361v79h-68V0h502c48.1 0 74 25.9 74 74v50.14c0 46.06-23.75 71.76-68 73.86zm-12-43c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12h-428v89h428zm162-81c0-48.1 25.9-74 74-74h492v56h-486c-7.8 0-12 4.2-12 12v42c0 7.8 4.2 12 12 12h422c48.1 0 74 25.9 74 74v30c0 48.1-25.9 74-74 74h-492v-56h486c7.8 0 12-4.2 12-12v-42c0-7.8-4.2-12-12-12h-422c-48.1 0-74-25.9-74-74V74zm661 0c0-48.1 25.9-74 74-74h480v66h-474c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h474v66h-480c-48.1 0-74-25.9-74-74V74zM3817 0v300h-68V183h-407v117h-68V0h68v117h407V0h68zm156 56v66h527v56h-527v66h527v56h-595V0h595v56h-527z" })] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss(this.props.size, this.props.theme)));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.href === undefined ? (svg) : (jsx("a", { href: this.props.href, target: this.props.target, ...parseAndGetAriaAttributes(this.props.aria), children: svg })) })] }) }));
+    }
+}
+
+export { DSRWordmark };

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useEffect } from 'react';
+import { load } from '@porsche-design-system/components-js';
+
+// to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
+const PorscheDesignSystemContext = createContext({
+    prefix: undefined,
+});
+const PorscheDesignSystemProvider = ({ prefix = '', cdn, ...props }) => {
+    // @ts-ignore
+    if (!process.browser) {
+        // for ssr we set the global PORSCHE_DESIGN_SYSTEM_CDN_URL variable that is used in our getCDNBaseURL() util to respect the cdn
+        const tld = cdn === 'cn' ? 'cn' : 'com';
+        // @ts-ignore
+        global.PORSCHE_DESIGN_SYSTEM_CDN_URL = `https://cdn.ui.porsche.${tld}`;
+    }
+    useEffect(() => {
+        load({ prefix, cdn });
+    }, []); // runtime prefix or cdn change is not supported
+    return jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
+};
+
+export { PorscheDesignSystemContext, PorscheDesignSystemProvider };

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

@@ -0,0 +1,65 @@
+export { componentsReady } from '@porsche-design-system/components-js';
+export { PAccordion } from './lib/components/accordion.wrapper.mjs';
+export { PBanner } from './lib/components/banner.wrapper.mjs';
+export { PButton } from './lib/components/button.wrapper.mjs';
+export { PButtonGroup } from './lib/components/button-group.wrapper.mjs';
+export { PButtonPure } from './lib/components/button-pure.wrapper.mjs';
+export { PButtonTile } from './lib/components/button-tile.wrapper.mjs';
+export { PCarousel } from './lib/components/carousel.wrapper.mjs';
+export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.mjs';
+export { PContentWrapper } from './lib/components/content-wrapper.wrapper.mjs';
+export { PCrest } from './lib/components/crest.wrapper.mjs';
+export { PDisplay } from './lib/components/display.wrapper.mjs';
+export { PDivider } from './lib/components/divider.wrapper.mjs';
+export { PFieldset } from './lib/components/fieldset.wrapper.mjs';
+export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.mjs';
+export { PFlex } from './lib/components/flex.wrapper.mjs';
+export { PFlexItem } from './lib/components/flex-item.wrapper.mjs';
+export { PFlyout } from './lib/components/flyout.wrapper.mjs';
+export { PGrid } from './lib/components/grid.wrapper.mjs';
+export { PGridItem } from './lib/components/grid-item.wrapper.mjs';
+export { PHeading } from './lib/components/heading.wrapper.mjs';
+export { PHeadline } from './lib/components/headline.wrapper.mjs';
+export { PIcon } from './lib/components/icon.wrapper.mjs';
+export { PInlineNotification } from './lib/components/inline-notification.wrapper.mjs';
+export { PLink } from './lib/components/link.wrapper.mjs';
+export { PLinkPure } from './lib/components/link-pure.wrapper.mjs';
+export { PLinkSocial } from './lib/components/link-social.wrapper.mjs';
+export { PLinkTile } from './lib/components/link-tile.wrapper.mjs';
+export { PLinkTileModelSignature } from './lib/components/link-tile-model-signature.wrapper.mjs';
+export { PMarque } from './lib/components/marque.wrapper.mjs';
+export { PModal } from './lib/components/modal.wrapper.mjs';
+export { PModelSignature } from './lib/components/model-signature.wrapper.mjs';
+export { PPagination } from './lib/components/pagination.wrapper.mjs';
+export { PPopover } from './lib/components/popover.wrapper.mjs';
+export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.mjs';
+export { PScroller } from './lib/components/scroller.wrapper.mjs';
+export { PSegmentedControl } from './lib/components/segmented-control.wrapper.mjs';
+export { PSegmentedControlItem } from './lib/components/segmented-control-item.wrapper.mjs';
+export { PSelectWrapper } from './lib/components/select-wrapper.wrapper.mjs';
+export { PSpinner } from './lib/components/spinner.wrapper.mjs';
+export { PStepperHorizontal } from './lib/components/stepper-horizontal.wrapper.mjs';
+export { PStepperHorizontalItem } from './lib/components/stepper-horizontal-item.wrapper.mjs';
+export { PSwitch } from './lib/components/switch.wrapper.mjs';
+export { PTable } from './lib/components/table.wrapper.mjs';
+export { PTableBody } from './lib/components/table-body.wrapper.mjs';
+export { PTableCell } from './lib/components/table-cell.wrapper.mjs';
+export { PTableHead } from './lib/components/table-head.wrapper.mjs';
+export { PTableHeadCell } from './lib/components/table-head-cell.wrapper.mjs';
+export { PTableHeadRow } from './lib/components/table-head-row.wrapper.mjs';
+export { PTableRow } from './lib/components/table-row.wrapper.mjs';
+export { PTabs } from './lib/components/tabs.wrapper.mjs';
+export { PTabsBar } from './lib/components/tabs-bar.wrapper.mjs';
+export { PTabsItem } from './lib/components/tabs-item.wrapper.mjs';
+export { PTag } from './lib/components/tag.wrapper.mjs';
+export { PTagDismissible } from './lib/components/tag-dismissible.wrapper.mjs';
+export { PText } from './lib/components/text.wrapper.mjs';
+export { PTextFieldWrapper } from './lib/components/text-field-wrapper.wrapper.mjs';
+export { PTextList } from './lib/components/text-list.wrapper.mjs';
+export { PTextListItem } from './lib/components/text-list-item.wrapper.mjs';
+export { PTextareaWrapper } from './lib/components/textarea-wrapper.wrapper.mjs';
+export { PToast } from './lib/components/toast.wrapper.mjs';
+export { PWordmark } from './lib/components/wordmark.wrapper.mjs';
+export { PorscheDesignSystemProvider } from './provider.mjs';
+export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks.mjs';
+export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils.mjs';

package/ssr/esm/lib/dsr-components/modal.d.ts

@@ -0,0 +1,12 @@
+import { Component } from 'react';
+export declare class DSRModal extends Component<any> {
+    host: HTMLElement;
+    private focusedElBeforeOpen;
+    private dismissBtn;
+    private hasHeader;
+    private hasFooter;
+    private footer;
+    private dialog;
+    private get hasDismissButton();
+    render(): JSX.Element;
+}

package/ssr/esm/lib/dsr-components/tabs-bar.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'react';
+export declare class DSRTabsBar extends Component<any> {
+    host: HTMLElement;
+    private tabElements;
+    private barElement;
+    private scrollerElement;
+    private direction;
+    private hasPTabsParent;
+    private areTabsButtons;
+    render(): JSX.Element;
+}