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

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

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRToast } from '../dsr-components/toast.js';
+
+const PToast = /*#__PURE__*/ forwardRef(({ theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-toast');
+    useBrowserLayoutEffect(() => {
+        elementRef.current.theme = theme;
+    }, [theme]);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRToast, { ...{ theme } })),
+            }
+            : {
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PToast };

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

@@ -0,0 +1,26 @@
+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 { getAccordionCss as getComponentCss$R } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { PIcon } from '../components/icon.wrapper.js';
+
+class DSRAccordion 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 buttonId = 'accordion-control';
+        const contentId = 'accordion-panel';
+        const Heading = this.props.tag;
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.size, this.props.compact, this.props.open, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx(PIcon, { className: "icon", color: "inherit", name: "arrow-head-down", theme: this.props.theme, size: "inherit", "aria-hidden": "true" })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRAccordion };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.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 { getBannerCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { PContentWrapper } from '../components/content-wrapper.wrapper.js';
+import { PInlineNotification } from '../components/inline-notification.wrapper.js';
+
+class DSRBanner extends Component {
+    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 style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q()));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(PContentWrapper, { width: this.props.width, children: jsxs(PInlineNotification, { className: "root", state: this.props.state, persistent: this.props.persistent, theme: this.props.theme, children: [namedSlottedChildren.filter(({ props: { slot } }) => slot === 'title').length > 0 && jsx("slot", { name: "title", slot: "heading" }), namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
+    }
+}
+
+export { DSRBanner };

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

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getButtonGroupCss as getComponentCss$P } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRButtonGroup 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$P(this.props.direction)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { role: "group", children: jsx("slot", {}) })] }), this.props.children] }));
+    }
+}
+
+export { DSRButtonGroup };

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

@@ -0,0 +1,37 @@
+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 { getButtonPureCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { isDisabledOrLoading, hasVisibleIcon, getButtonPureAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+import { PIcon } from '../components/icon.wrapper.js';
+import { PSpinner } from '../components/spinner.wrapper.js';
+
+class DSRButtonPure extends Component {
+    get isDisabledOrLoading() {
+        return isDisabledOrLoading(this.props.disabled, this.props.loading);
+    }
+    // this stops click events when button is disabled
+    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 hasIcon = hasVisibleIcon(this.props.icon);
+        const hasSubline = namedSlottedChildren.filter(({ props: { slot } }) => slot === 'subline').length > 0;
+        const iconProps = {
+            className: 'icon',
+            size: 'inherit',
+            theme: this.props.theme,
+        };
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$O(this.props.icon, this.props.active, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.weight, this.props.hideLabel, this.props.alignLabel, namedSlottedChildren.filter(({ props: { slot } }) => slot === 'subline').length > 0, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, hasSubline, this.props.aria), className: "root", type: this.props.type, tabIndex: this.props.tabbable ? parseInt(null, 10) || null : -1, children: [hasIcon &&
+                                            (this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (jsx(PIcon, { ...iconProps, color: "inherit", name: this.props.icon, source: this.props.iconSource, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] }), hasSubline && (jsx("div", { id: "subline", className: "subline", children: jsx("slot", { name: "subline" }) }))] })] }), this.props.children] }));
+    }
+}
+
+export { DSRButtonPure };

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

@@ -0,0 +1,36 @@
+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 { getButtonCss as getComponentCss$N } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { isDisabledOrLoading, getButtonAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+import { PIcon } from '../components/icon.wrapper.js';
+import { PSpinner } from '../components/spinner.wrapper.js';
+
+class DSRButton extends Component {
+    get isDisabledOrLoading() {
+        return isDisabledOrLoading(this.props.disabled, this.props.loading);
+    }
+    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 iconProps = {
+            className: 'icon',
+            size: 'inherit',
+        };
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$N(this.props.variant, this.props.hideLabel, this.isDisabledOrLoading, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, tabIndex: this.props.tabbable ? parseInt(null, 10) || null : -1, children: [this.props.loading ? (jsx(PSpinner, { ...iconProps, theme: this.props.variant === 'tertiary' ? this.props.theme : 'dark', aria: { 'aria-label': 'Loading state' } })) : (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: "inherit", theme: this.props.variant === 'tertiary'
+                                        ? this.props.theme
+                                        : this.props.variant === 'secondary' && this.props.theme === 'dark'
+                                            ? 'light'
+                                            : 'dark', "aria-hidden": "true" })), jsx("span", { children: jsx("slot", {}) })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRButton };

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

@@ -0,0 +1,36 @@
+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 { getCarouselCss as getComponentCss$M } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { PButtonPure } from '../components/button-pure.wrapper.js';
+
+class DSRCarousel extends Component {
+    constructor() {
+        super(...arguments);
+        this.slides = [];
+    }
+    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 btnProps = {
+            className: 'btn',
+            type: 'button',
+            hideLabel: true,
+            theme: this.props.theme,
+            // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
+        };
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$M(this.props.wrapContent, this.props.disablePagination, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
+                                            ((this.props.description && jsx("p", { children: this.props.description })) || jsx("slot", { name: "description" })), jsxs("div", { className: "nav", children: [jsx(PButtonPure, { ...btnProps, icon: "arrow-left" }), jsx(PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlottedChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: defaultChildren.map((_, i) => (jsx("div", { className: "splide__slide", children: jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), this.props.disablePagination !== true && jsx("div", { className: "pagination" })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRCarousel };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox-wrapper.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 { getCheckboxWrapperCss as getComponentCss$L } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { StateMessage } from './state-message.js';
+
+class DSRCheckboxWrapper 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 style = minifyCss(stripFocusAndHoverStyles(getComponentCss$L(this.props.hideLabel, this.props.state, (_a = defaultChildren[0]) === null || _a === void 0 ? void 0 : _a.props.disabled)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label", children: this.props.label || jsx("slot", { name: "label" }) })), jsx("slot", {})] }), (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 { DSRCheckboxWrapper };

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

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getContentWrapperCss as getComponentCss$K } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRContentWrapper 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$K(this.props.width, this.props.backgroundColor, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
+    }
+}
+
+export { DSRContentWrapper };

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

@@ -0,0 +1,14 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getDividerCss as getComponentCss$J } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRDivider extends Component {
+    render() {
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$J(this.props.color, this.props.orientation, this.props.theme)));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("hr", {})] }) }));
+    }
+}
+
+export { DSRDivider };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fieldset-wrapper.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 { getFieldsetWrapperCss as getComponentCss$I } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { StateMessage } from './state-message.js';
+import { Required } from './required.js';
+
+class DSRFieldsetWrapper extends Component {
+    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 messageId = 'message';
+        const hasMessageValue = (this.props.message || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.state, this.props.labelSize, (this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0))));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), hasMessageValue && jsx(StateMessage, { id: messageId, state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRFieldsetWrapper };

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

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getFlexItemCss as getComponentCss$H } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRFlexItem 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$H(this.props.width, this.props.offset, this.props.alignSelf, this.props.grow, this.props.shrink, this.props.flex)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), this.props.children] }));
+    }
+}
+
+export { DSRFlexItem };

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

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getFlexCss as getComponentCss$G } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRFlex 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$G(this.props.inline, this.props.wrap, this.props.direction, this.props.justifyContent, this.props.alignItems, this.props.alignContent)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), this.props.children] }));
+    }
+}
+
+export { DSRFlex };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/grid-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 { getGridItemCss as getComponentCss$F } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRGridItem 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$F(this.props.size, this.props.offset, this.props.gutter || { base: 16, s: 24, m: 36 } // default as fallback
+        )));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), this.props.children] }));
+    }
+}
+
+export { DSRGridItem };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/grid.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 { getGridCss as getComponentCss$E } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+
+class DSRGrid 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, gutter: this.props.gutter } }
+            : child);
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$E(this.props.direction, this.props.wrap, this.props.gutter)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), manipulatedChildren] }));
+    }
+}
+
+export { DSRGrid };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/headline.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 { getHeadlineCss as getComponentCss$D } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getHeadlineTagName } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+
+class DSRHeadline 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 TagName = getHeadlineTagName(null, this.props.variant, this.props.tag);
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$D(this.props.variant, 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(TagName, { className: "root", children: jsx("slot", {}) }) })] }), this.props.children] }));
+    }
+}
+
+export { DSRHeadline };

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

@@ -0,0 +1,21 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { ICONS_MAP } from '../../../../../../icons/dist/module/index.js';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getIconCss as getComponentCss$C } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { isUrl, paramCaseToCamelCase } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+
+class DSRIcon extends Component {
+    constructor() {
+        super(...arguments);
+        this.key = 0; // use unique random key to trick stencil cache
+        this.svgContent = '';
+    }
+    render() {
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$C(this.props.color, this.props.size, this.props.theme)));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("i", { className: "root", dangerouslySetInnerHTML: { __html: isUrl(this.props.source) ? '<img src="' + this.props.source + '" alt="" />' : ICONS_MAP[paramCaseToCamelCase(this.props.name)] || '' } }, this.key++)] }) }));
+    }
+}
+
+export { DSRIcon };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/inline-notification.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 { getInlineNotificationCss as getComponentCss$B } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getInlineNotificationIconName, getContentAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+import { PButtonPure } from '../components/button-pure.wrapper.js';
+import { PIcon } from '../components/icon.wrapper.js';
+
+class DSRInlineNotification extends Component {
+    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 bannerId = 'banner';
+        const labelId = 'label';
+        const descriptionId = 'description';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$B(this.props.state, !!this.props.actionLabel, !this.props.persistent, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PIcon, { className: "icon", name: getInlineNotificationIconName(this.props.state), color: "inherit", "aria-hidden": "true" }), jsxs("div", { id: bannerId, className: "content", ...getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) && jsx("h5", { id: labelId, children: this.props.heading || jsx("slot", { name: "heading" }) }), jsx("p", { id: descriptionId, children: this.props.description || jsx("slot", {}) })] }), this.props.actionLabel && (jsx(PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), !this.props.persistent && (jsx(PButtonPure, { className: "close", type: "button", icon: "close", hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
+    }
+}
+
+export { DSRInlineNotification };

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

@@ -0,0 +1,33 @@
+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 { getLinkPureCss as getComponentCss$A } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { parseAndGetAriaAttributes, hasVisibleIcon } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+import { PIcon } from '../components/icon.wrapper.js';
+
+class DSRLinkPure extends Component {
+    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 hasSubline = namedSlottedChildren.filter(({ props: { slot } }) => slot === 'subline').length > 0;
+        const TagType = this.props.href === undefined ? 'span' : 'a';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$A(this.props.icon, this.props.active, this.props.stretch, this.props.size, this.props.weight, this.props.hideLabel, this.props.alignLabel, namedSlottedChildren.filter(({ props: { slot } }) => slot === 'subline').length > 0, !this.props.href, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs(TagType, { className: "root", ...(TagType === 'a' && {
+                                        href: this.props.href,
+                                        target: this.props.target,
+                                        download: this.props.download,
+                                        rel: this.props.rel,
+                                        ...(hasSubline && { 'aria-describedby': 'subline' }),
+                                        ...parseAndGetAriaAttributes(this.props.aria),
+                                    }), children: [hasVisibleIcon(this.props.icon) && (jsx(PIcon, { className: "icon", color: "inherit", theme: this.props.theme, size: "inherit", name: this.props.icon, source: this.props.iconSource, "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] }), hasSubline && (jsx("div", { id: "subline", className: "subline", children: jsx("slot", { name: "subline" }) }))] })] }), this.props.children] }));
+    }
+}
+
+export { DSRLinkPure };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-social.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 { getLinkSocialCss as getComponentCss$z } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { PIcon } from '../components/icon.wrapper.js';
+
+class DSRLinkSocial 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 TagType = this.props.href === undefined ? 'span' : 'a';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$z(this.props.icon, this.props.hideLabel, !!this.props.href, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
+                                href: this.props.href,
+                                target: this.props.target,
+                                rel: this.props.rel,
+                            }), children: [jsx(PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, color: "inherit", theme: this.props.theme === 'light' ? 'dark' : 'light', "aria-hidden": "true" }), jsx("span", { children: jsx("slot", {}) })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRLinkSocial };

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

@@ -0,0 +1,42 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Component, createElement } from 'react';
+import '../../provider.js';
+import { minifyCss } from '../../minifyCss.js';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
+import { getLinkTileCss as getComponentCss$y } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
+import { PLink } from '../components/link.wrapper.js';
+import { PLinkPure } from '../components/link-pure.wrapper.js';
+
+class DSRLinkTile 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 descriptionId = 'description';
+        const linkProps = {
+            theme: 'dark',
+        };
+        const anchorProps = {
+            className: 'anchor',
+            href: this.props.href,
+            target: this.props.target,
+            download: this.props.download,
+            'aria-describedby': descriptionId,
+            rel: this.props.rel,
+            ...parseAndGetAriaAttributes(this.props.aria),
+        };
+        const link = (createElement(PLink, { ...linkProps, key: "link", className: "link", variant: "tertiary" },
+            jsx("a", { ...anchorProps, children: this.props.label })));
+        const linkPure = (createElement(PLinkPure, { ...linkProps, key: "link-pure", className: "link-pure", hideLabel: true, icon: "arrow-right" },
+            jsx("a", { ...anchorProps, children: this.props.label })));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$y(this.props.aspectRatio, this.props.size, this.props.weight, this.props.align, this.props.compact, this.props.gradient)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: "image-container", children: jsx("slot", {}) }), jsxs("div", { className: "content", children: [jsx("p", { id: descriptionId, children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? linkPure : link) : [linkPure, link]] })] })] }), this.props.children] }));
+    }
+}
+
+export { DSRLinkTile };