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

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

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+var textFieldWrapper = require('../dsr-components/text-field-wrapper.js');
+
+const PTextFieldWrapper = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'action', onAction);
+    const WebComponentTag = hooks.usePrefix('p-text-field-wrapper');
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(textFieldWrapper.DSRTextFieldWrapper, { ...{ actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PTextFieldWrapper = PTextFieldWrapper;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+var textListItem = require('../dsr-components/text-list-item.js');
+
+const PTextListItem = /*#__PURE__*/ react.forwardRef((
+// @ts-ignore
+{ className, children, listType = 'unordered', orderType = 'numbered', ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-text-list-item');
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                ...{ "role": "listitem" },
+                children: (jsxRuntime.jsx(textListItem.DSRTextListItem, { ...{ listType, orderType, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PTextListItem = PTextListItem;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+var textList = require('../dsr-components/text-list.js');
+
+const PTextList = /*#__PURE__*/ react.forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-text-list');
+    const propsToSync = [listType, orderType, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['listType', 'orderType', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(textList.DSRTextList, { ...{ listType, orderType, theme, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PTextList = PTextList;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+var text = require('../dsr-components/text.js');
+
+const PText = /*#__PURE__*/ react.forwardRef(({ align = 'left', color = 'default', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-text');
+    const propsToSync = [align, color, ellipsis, size, tag, theme, weight];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(text.DSRText, { ...{ align, color, ellipsis, size, tag, theme, weight, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PText = PText;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+var textareaWrapper = require('../dsr-components/textarea-wrapper.js');
+
+const PTextareaWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-textarea-wrapper');
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(textareaWrapper.DSRTextareaWrapper, { ...{ description, hideLabel, label, message, showCharacterCount, state, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PTextareaWrapper = PTextareaWrapper;

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

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

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.js');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var icon_wrapper = require('../components/icon.wrapper.js');
+
+class DSRAccordion extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getAccordionCss(this.props.size, this.props.compact, this.props.open, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(Heading, { className: "heading", children: jsxRuntime.jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", color: "inherit", name: "arrow-head-down", theme: this.props.theme, size: "inherit", "aria-hidden": "true" })] }) }), jsxRuntime.jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRAccordion = DSRAccordion;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.js');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var contentWrapper_wrapper = require('../components/content-wrapper.wrapper.js');
+var inlineNotification_wrapper = require('../components/inline-notification.wrapper.js');
+
+class DSRBanner extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getBannerCss()));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(contentWrapper_wrapper.PContentWrapper, { width: this.props.width, children: jsxRuntime.jsxs(inlineNotification_wrapper.PInlineNotification, { className: "root", state: this.props.state, persistent: this.props.persistent, theme: this.props.theme, children: [namedSlottedChildren.filter(({ props: { slot } }) => slot === 'title').length > 0 && jsxRuntime.jsx("slot", { name: "title", slot: "heading" }), namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRBanner = DSRBanner;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+
+class DSRButtonGroup extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonGroupCss(this.props.direction)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("div", { role: "group", children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRButtonGroup = DSRButtonGroup;

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

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.js');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
+var icon_wrapper = require('../components/icon.wrapper.js');
+var spinner_wrapper = require('../components/spinner.wrapper.js');
+
+class DSRButtonPure extends react.Component {
+    get isDisabledOrLoading() {
+        return utilsEntry.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 = utilsEntry.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonPureCss(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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.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 ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (jsxRuntime.jsx(icon_wrapper.PIcon, { ...iconProps, color: "inherit", name: this.props.icon, source: this.props.iconSource, "aria-hidden": "true" }))), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), hasSubline && (jsxRuntime.jsx("div", { id: "subline", className: "subline", children: jsxRuntime.jsx("slot", { name: "subline" }) }))] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRButtonPure = DSRButtonPure;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.js');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
+var icon_wrapper = require('../components/icon.wrapper.js');
+var spinner_wrapper = require('../components/spinner.wrapper.js');
+
+class DSRButton extends react.Component {
+    get isDisabledOrLoading() {
+        return utilsEntry.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonCss(this.props.variant, this.props.hideLabel, this.isDisabledOrLoading, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { ...utilsEntry.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 ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { ...iconProps, theme: this.props.variant === 'tertiary' ? this.props.theme : 'dark', aria: { 'aria-label': 'Loading state' } })) : (jsxRuntime.jsx(icon_wrapper.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" })), jsxRuntime.jsx("span", { children: jsxRuntime.jsx("slot", {}) })] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRButton = DSRButton;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.js');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.js');
+
+class DSRCarousel extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCarouselCss(this.props.wrapContent, this.props.disablePagination, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
+                                            ((this.props.description && jsxRuntime.jsx("p", { children: this.props.description })) || jsxRuntime.jsx("slot", { name: "description" })), jsxRuntime.jsxs("div", { className: "nav", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsxRuntime.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: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: defaultChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), this.props.disablePagination !== true && jsxRuntime.jsx("div", { className: "pagination" })] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRCarousel = DSRCarousel;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var stateMessage = require('./state-message.js');
+
+class DSRCheckboxWrapper extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCheckboxWrapperCss(this.props.hideLabel, this.props.state, (_a = defaultChildren[0]) === null || _a === void 0 ? void 0 : _a.props.disabled)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label", children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), jsxRuntime.jsx("slot", {})] }), (this.props.message || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRCheckboxWrapper = DSRCheckboxWrapper;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+
+class DSRContentWrapper extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getContentWrapperCss(this.props.width, this.props.backgroundColor, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("div", { className: "root", children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRContentWrapper = DSRContentWrapper;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+
+class DSRDivider extends react.Component {
+    render() {
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getDividerCss(this.props.color, this.props.orientation, this.props.theme)));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("hr", {})] }) }));
+    }
+}
+
+exports.DSRDivider = DSRDivider;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var stateMessage = require('./state-message.js');
+var required = require('./required.js');
+
+class DSRFieldsetWrapper extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFieldsetWrapperCss(this.props.state, this.props.labelSize, (this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0))));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsxs("legend", { children: [this.props.label || jsxRuntime.jsx("slot", { name: "label" }), this.props.required && jsxRuntime.jsx(required.Required, {})] })), jsxRuntime.jsx("slot", {}), hasMessageValue && jsxRuntime.jsx(stateMessage.StateMessage, { id: messageId, state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRFieldsetWrapper = DSRFieldsetWrapper;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+
+class DSRFlexItem extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlexItemCss(this.props.width, this.props.offset, this.props.alignSelf, this.props.grow, this.props.shrink, this.props.flex)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("slot", {})] }), this.props.children] }));
+    }
+}
+
+exports.DSRFlexItem = DSRFlexItem;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+
+class DSRFlex extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlexCss(this.props.inline, this.props.wrap, this.props.direction, this.props.justifyContent, this.props.alignItems, this.props.alignContent)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("slot", {})] }), this.props.children] }));
+    }
+}
+
+exports.DSRFlex = DSRFlex;