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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.js

@@ -0,0 +1,34 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import '../../provider.js';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTableCss as getComponentCss$c } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { PButtonPure } from '../components/button-pure.wrapper.js';
+
+class DSRTable extends Component {
+    constructor() {
+        super(...arguments);
+        this.isScrollIndicatorVisible = false;
+        this.isScrollable = false;
+    }
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        const namedSlottedChildren = children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const hasSlottedCaption = namedSlottedChildren.filter(({ props: { slot } }) => slot === 'caption').length > 0;
+        const captionId = 'caption';
+        const tableAttr = this.props.caption
+            ? { 'aria-label': this.props.caption }
+            : hasSlottedCaption && { 'aria-labelledby': captionId };
+        const scrollAreaAttr = this.props.isScrollable && { ...tableAttr, role: 'region', tabindex: '0' };
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$c()));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedCaption && (jsx("div", { id: captionId, className: "caption", children: jsx("slot", { name: "caption" }) })), jsxs("div", { className: "root", children: [jsx("div", { className: "scroll-area", ...scrollAreaAttr, children: jsxs("div", { className: "table", role: "table", ...tableAttr, children: [jsx("slot", {}), jsx("span", { className: "scroll-trigger" })] }) }), this.props.isScrollIndicatorVisible && (jsx("div", { className: "scroll-indicator", children: jsx(PButtonPure, { className: "scroll-button", "aria-hidden": "true", type: "button", tabIndex: -1, hideLabel: true, size: "inherit", icon: "arrow-head-right", children: "Next" }) }))] })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTable };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.js

@@ -0,0 +1,28 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import '../../provider.js';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTabsBarCss as getComponentCss$b } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { PScroller } from '../components/scroller.wrapper.js';
+
+class DSRTabsBar extends Component {
+    constructor() {
+        super(...arguments);
+        this.tabElements = [];
+        this.direction = 'next';
+    }
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$b(this.props.size, this.props.weight, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PScroller, { className: "scroller", role: "tablist", theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, scrollIndicatorPosition: "top", children: [jsx("slot", {}), jsx("span", { className: "bar" })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTabsBar };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-item.js

@@ -0,0 +1,22 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTabsItemCss as getComponentCss$a } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRTabsItem extends Component {
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$a(this.props.theme || 'light' // default as fallback
+        )));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), this.props.children] }));
+    }
+}
+
+export { DSRTabsItem };

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

@@ -0,0 +1,30 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import '../../provider.js';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTabsCss as getComponentCss$9 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { PTabsBar } from '../components/tabs-bar.wrapper.js';
+
+class DSRTabs extends Component {
+    constructor() {
+        super(...arguments);
+        this.tabsItemElements = [];
+    }
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const manipulatedChildren = children.map((child, i) => typeof child === 'object' && defaultChildren.includes(child)
+            ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
+            : child);
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$9()));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, activeTabIndex: this.props.activeTabIndex, children: defaultChildren.map((tab, index) => (jsx("button", { type: "button", children: tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
+    }
+}
+
+export { DSRTabs };

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

@@ -0,0 +1,24 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import '../../provider.js';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTagDismissibleCss as getComponentCss$7 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+import { PIcon } from '../components/icon.wrapper.js';
+
+class DSRTagDismissible extends Component {
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(this.props.color, !!this.props.label)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "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:" }), this.props.label && jsx("span", { className: "label", children: this.props.label }), jsx("slot", {}), jsx(PIcon, { className: "icon", name: "close", color: "inherit", "aria-hidden": "true" })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTagDismissible };

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

@@ -0,0 +1,24 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import '../../provider.js';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTagCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getDirectChildHTMLElement } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+import { PIcon } from '../components/icon.wrapper.js';
+
+class DSRTag extends Component {
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8(this.props.color, !!getDirectChildHTMLElement(null, 'a,button'), this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "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: "inherit", theme: this.props.theme, "aria-hidden": "true" })), jsx("div", { children: jsx("slot", {}) })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTag };

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

@@ -0,0 +1,52 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import '../../provider.js';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTextFieldWrapperCss as getComponentCss$6 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { isType, isWithinForm, hasLocateAction } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+import { StateMessage } from './state-message.js';
+import { PIcon } from '../components/icon.wrapper.js';
+import { PSpinner } from '../components/spinner.wrapper.js';
+
+class DSRTextFieldWrapper extends Component {
+    constructor() {
+        super(...arguments);
+        this.showPassword = false;
+        this.isClearable = false;
+    }
+    render() {
+        var _a, _b;
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        const namedSlottedChildren = children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const { readOnly, disabled, type } = ((_a = defaultChildren[0]) === null || _a === void 0 ? void 0 : _a.props) || {};
+        const disabledOrReadOnly = disabled || readOnly;
+        const labelProps = {};
+        const iconProps = {
+            color: 'inherit',
+            'aria-hidden': 'true',
+        };
+        const isSearch = isType(type, 'search');
+        const isPassword = isType(type, 'password');
+        isWithinForm(this.props.host);
+        const hasAction = hasLocateAction(this.props.actionIcon);
+        const hasCounter = false; // hasCounterAndIsTypeText(defaultChildren[0]?.props);
+        const isCounterVisible = this.props.showCharacterCount && hasCounter;
+        const isClearable = !!((_b = defaultChildren[0]) === null || _b === void 0 ? void 0 : _b.props.value);
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$6(disabled, this.props.hideLabel, this.props.state, isCounterVisible, isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.isWithinForm, hasAction, hasAction && this.props.actionLoading)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), (isCounterVisible) && (jsx("span", { className: "unit", ...labelProps, "aria-hidden": "true", children: this.props.unit })), jsx("slot", {}), hasCounter ] }), isPassword ? (jsxs("button", { type: "button", disabled: disabled, "aria-pressed": this.props.showPassword ? 'true' : 'false', children: [jsx("span", { className: "sr-only", children: "Toggle password visibility" }), jsx(PIcon, { name: this.props.showPassword ? 'view-off' : 'view', ...iconProps })] })) : (isSearch && [
+                                            jsx("button", { type: "button", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly, children: jsx(PIcon, { name: "close", ...iconProps }) }, "btn-clear"),
+                                            hasAction && (jsxs("button", { type: "button", hidden: isClearable, disabled: disabledOrReadOnly, children: [jsx("span", { className: "sr-only", children: "Locate me" }), this.props.actionLoading ? (jsx(PSpinner, { size: "inherit" })) : (
+                                                    // hardcoded locate icon
+                                                    jsx(PIcon, { name: "locate", ...iconProps }))] }, "btn-action")),
+                                            this.props.isWithinForm ? (jsxs("button", { type: "submit", disabled: disabledOrReadOnly, children: [jsx("span", { className: "sr-only", children: "Search" }), jsx(PIcon, { name: "search", ...iconProps })] }, "btn-submit")) : (jsx(PIcon, { className: "icon", name: "search", ...iconProps }, "icon")),
+                                        ])] }), (this.props.message || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTextFieldWrapper };

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

@@ -0,0 +1,23 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTextListItemCss as getComponentCss$5 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRTextListItem extends Component {
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$5(this.props.listType || 'unordered', // default as fallback
+        this.props.orderType || 'numbered' // default as fallback
+        )));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "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.js

@@ -0,0 +1,25 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTextListCss as getComponentCss$4 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRTextList extends Component {
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const manipulatedChildren = children.map((child, i) => typeof child === 'object' && defaultChildren.includes(child)
+            ? { ...child, props: { ...child.props, listType: this.props.listType, orderType: this.props.orderType } }
+            : child);
+        const TagType = this.props.listType === 'unordered' ? 'ul' : 'ol';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx(TagType, { role: "list", children: jsx("slot", {}) }) })] }), manipulatedChildren] }));
+    }
+}
+
+export { DSRTextList };

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

@@ -0,0 +1,25 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTextCss as getComponentCss$3 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getHTMLElement } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+
+class DSRText extends Component {
+    render() {
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const firstChild = getHTMLElement(null, ':first-child');
+        const hasSlottedTextTag = firstChild === null || firstChild === void 0 ? void 0 : firstChild.matches('p,span,div,address,blockquote,figcaption,cite,time,legend');
+        const TagType = hasSlottedTextTag ? 'div' : this.props.tag;
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(this.props.size, this.props.weight, this.props.align, this.props.color, this.props.ellipsis, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: 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.js

@@ -0,0 +1,24 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getTextareaWrapperCss as getComponentCss$2 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { StateMessage } from './state-message.js';
+
+class DSRTextareaWrapper extends Component {
+    render() {
+        var _a;
+        const children = Array.isArray(this.props.children)
+            ? this.props.children
+            : this.props.children
+                ? [this.props.children]
+                : [];
+        const namedSlottedChildren = children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const labelProps = {};
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$2((_a = defaultChildren[0]) === null || _a === void 0 ? void 0 : _a.props.disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.hasCounter)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), this.props.isCounterVisible && (jsx("span", { className: "counter", ...labelProps, "aria-hidden": "true" })), jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), (this.props.message || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
+    }
+}
+
+export { DSRTextareaWrapper };

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

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/minifyCss.js

@@ -0,0 +1,3 @@
+const minifyCss = (css) => css.replace(/\s\s+|\.\\(?=:)|[\n\\]+| (?={)|;(?=\s+})|(:|media)\s(?=.*;?)/g, '$1');
+
+export { minifyCss };

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

@@ -0,0 +1,16 @@
+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 = '', ...props }) => {
+    useEffect(() => {
+        load({ prefix });
+    }, [prefix]);
+    return jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
+};
+
+export { PorscheDesignSystemContext, PorscheDesignSystemProvider };

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

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/stripFocusAndHoverStyles.js

@@ -0,0 +1,3 @@
+const stripFocusAndHoverStyles = (css) => css.replace(/\n.*(?::focus|hover:hover)[\s\S]+?\n}/g, '');
+
+export { stripFocusAndHoverStyles };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/utils.js

@@ -0,0 +1,28 @@
+const splitToArray =  (str) => str.split(' ').filter((str) => str);
+const getMergedClassName =  (domClassName, oldClassName = '', newClassName = '') => {
+    // classes previously set by component
+    const prevComponentClassNames = splitToArray(oldClassName);
+    // all classes not set by component -> to keep hydrated class and other classes set on host element
+    // (usually dom-manipulated class additions would be lost on rerender)
+    let domClasses = splitToArray(domClassName);
+    if (prevComponentClassNames.length) {
+        domClasses = domClasses.filter((x) => !prevComponentClassNames.includes(x));
+    }
+    // all classes set by component
+    const componentClasses = splitToArray(newClassName);
+    return componentClasses.concat(domClasses).join(' ');
+};
+const syncRef =  (elementRef, ref) => (el) => {
+    elementRef.current = el;
+    if (typeof ref === 'function') {
+        ref(el);
+    }
+    else if (ref !== null) {
+        ref.current = el;
+    }
+};
+const skipPorscheDesignSystemCDNRequestsDuringTests = () => {
+    window.PDS_SKIP_FETCH = true;
+};
+
+export { getMergedClassName, skipPorscheDesignSystemCDNRequestsDuringTests, syncRef };