@porsche-design-system/components-react 2.19.0 → 2.19.1-rc.1

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -15,13 +16,7 @@ class DSRButton extends react.Component {
         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); });
+        splitChildren.splitChildren(this.props.children);
         const iconProps = {
             className: 'icon',
             size: 'inherit',

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -15,13 +16,7 @@ class DSRCarousel 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 { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const btnProps = {
             className: 'btn',
             type: 'button',
@@ -30,8 +25,8 @@ class DSRCarousel extends react.Component {
             // '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] }));
+        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 || namedSlotChildren.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 = namedSlotChildren.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: otherChildren.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] }));
     }
 }
 

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -10,15 +11,9 @@ 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] }));
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCheckboxWrapperCss(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && ((_a = otherChildren[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 || namedSlotChildren.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 || namedSlotChildren.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] }));
     }
 }
 

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 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); });
+        splitChildren.splitChildren(this.props.children);
         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] }));
     }

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -10,17 +11,11 @@ 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 { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         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] }));
+        const hasMessageValue = (this.props.message || namedSlotChildren.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 || namedSlotChildren.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 || namedSlotChildren.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] }));
     }
 }
 

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 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); });
+        splitChildren.splitChildren(this.props.children);
         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] }));
     }

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 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); });
+        splitChildren.splitChildren(this.props.children);
         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] }));
     }

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRGridItem 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); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getGridItemCss(this.props.size, this.props.offset, this.props.gutter || { base: 16, s: 24, m: 36 } // default as fallback
         )));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("slot", {})] }), this.props.children] }));

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,14 +9,8 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRGrid 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; });
-        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)
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, gutter: this.props.gutter } }
             : child);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getGridCss(this.props.direction, this.props.wrap, this.props.gutter)));

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -9,13 +10,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 class DSRHeadline 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); });
+        splitChildren.splitChildren(this.props.children);
         const TagName = utilsEntry.getHeadlineTagName(null, this.props.variant, this.props.tag);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getHeadlineCss(this.props.variant, this.props.align, this.props.color, this.props.ellipsis, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TagName, { className: "root", children: jsxRuntime.jsx("slot", {}) }) })] }), this.props.children] }));

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -12,18 +13,12 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRInlineNotification 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 { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const bannerId = 'banner';
         const labelId = 'label';
         const descriptionId = 'description';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getInlineNotificationCss(this.props.state, !!this.props.actionLabel, !this.props.persistent, 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.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getInlineNotificationIconName(this.props.state), color: "inherit", "aria-hidden": "true" }), jsxRuntime.jsxs("div", { id: bannerId, className: "content", ...utilsEntry.getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) && jsxRuntime.jsx("h5", { id: labelId, children: this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }) }), jsxRuntime.jsx("p", { id: descriptionId, children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), !this.props.persistent && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", type: "button", icon: "close", hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getInlineNotificationIconName(this.props.state), color: "inherit", "aria-hidden": "true" }), jsxRuntime.jsxs("div", { id: bannerId, className: "content", ...utilsEntry.getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) && jsxRuntime.jsx("h5", { id: labelId, children: this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }) }), jsxRuntime.jsx("p", { id: descriptionId, children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), !this.props.persistent && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", type: "button", icon: "close", hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -11,16 +12,10 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRLinkPure 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 hasSubline = namedSlottedChildren.filter(({ props: { slot } }) => slot === 'subline').length > 0;
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const hasSubline = namedSlotChildren.filter(({ props: { slot } }) => slot === 'subline').length > 0;
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkPureCss(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)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkPureCss(this.props.icon, this.props.active, this.props.stretch, this.props.size, this.props.weight, this.props.hideLabel, this.props.alignLabel, namedSlotChildren.filter(({ props: { slot } }) => slot === 'subline').length > 0, !this.props.href, 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(TagType, { className: "root", ...(TagType === 'a' && {
                                         href: this.props.href,
                                         target: this.props.target,

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -10,13 +11,7 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRLinkSocial 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); });
+        splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkSocialCss(this.props.icon, this.props.hideLabel, !!this.props.href, 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(TagType, { className: "root", ...(TagType === 'a' && {

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -12,13 +13,7 @@ var linkPure_wrapper = require('../components/link-pure.wrapper.js');
 
 class DSRLinkTile 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); });
+        splitChildren.splitChildren(this.props.children);
         const descriptionId = 'description';
         const linkProps = {
             theme: 'dark',

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -11,13 +12,7 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRLink 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); });
+        splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.variant, this.props.hideLabel, !this.props.href, 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(TagType, { className: "root", ...(TagType === 'a' && {

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -11,15 +12,9 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.js');
 
 class DSRModal 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 { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         if (this.props.open) ;
-        const hasHeader = !!this.props.heading || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;
+        const hasHeader = !!this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getModalCss(this.props.open, this.props.fullscreen, this.props.disableCloseButton, hasHeader)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", role: "dialog", "aria-modal": "true", ...{ 'aria-label': this.props.heading, ...utilsEntry.parseAndGetAriaAttributes(this.props.aria) }, "aria-hidden": !this.props.open ? 'true' : 'false', tabIndex: -1, children: [!this.props.disableCloseButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", type: "button", hideLabel: true, icon: "close", children: "Close modal" })), hasHeader && (jsxRuntime.jsx("div", { className: "header", children: this.props.heading ? jsxRuntime.jsx("h1", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }) })), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
     }

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -15,13 +16,7 @@ class DSRPopover extends react.Component {
         this.open = false;
     }
     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); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPopoverCss(this.props.direction).replace(/(:host {[\S\s]+?})[\S\s]+/, '$1')));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", icon: "information", hideLabel: true, 
                                     // pass string to avoid another update on p-button on each render because of new object reference

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -10,15 +11,9 @@ var stateMessage = require('./state-message.js');
 class DSRRadioButtonWrapper 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.getRadioButtonWrapperCss(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] }));
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getRadioButtonWrapperCss(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && ((_a = otherChildren[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 || namedSlotChildren.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 || namedSlotChildren.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] }));
     }
 }
 

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -17,13 +18,7 @@ class DSRScroller extends react.Component {
     }
     // should only update if scrollable
     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); });
+        splitChildren.splitChildren(this.props.children);
         const renderPrevNextButton = (direction) => {
             return (jsxRuntime.jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", tabIndex: -1, hideLabel: true, size: "inherit", icon: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', theme: this.props.theme, "aria-hidden": "true", children: direction }) }, direction));
         };

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -11,13 +12,7 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRSegmentedControlItem 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); });
+        splitChildren.splitChildren(this.props.children);
         // this additional validation is still needed because undefined is allowed with current propTypes
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSegmentedControlItemCss(this.props.disabled, this.props.selected, this.props.backgroundColor || 'background-default', // default as fallback
         this.props.theme || 'light' // default as fallback

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,16 +9,10 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRSegmentedControl 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; });
-        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => {
             var _a;
-            return typeof child === 'object' && defaultChildren.includes(child)
+            return typeof child === 'object' && 'props' in child && otherChildren.includes(child)
                 ? { ...child, props: { ...child.props, selected: ((_a = child.props) === null || _a === void 0 ? void 0 : _a.value) === this.props.value, backgroundColor: this.props.backgroundColor, theme: this.props.theme } }
                 : child;
         });

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -12,19 +13,13 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 class DSRSelectWrapper 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 { disabled } = ((_a = defaultChildren[0]) === null || _a === void 0 ? void 0 : _a.props) || {};
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && ((_a = otherChildren[0]) === null || _a === void 0 ? void 0 : _a.props) || {};
         const labelProps = disabled
             ? {}
             : {};
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperCss(disabled, this.props.hideLabel, this.props.state, 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: "root", children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", color: "inherit", "aria-hidden": "true" }), jsxRuntime.jsx("slot", {})] }), this.props.hasCustomDropdown && (jsxRuntime.jsx(jsxRuntime.Fragment, {}))] }), (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] }));
+        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: "root", children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", color: "inherit", "aria-hidden": "true" }), jsxRuntime.jsx("slot", {})] }), this.props.hasCustomDropdown && (jsxRuntime.jsx(jsxRuntime.Fragment, {}))] }), (this.props.message || namedSlotChildren.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] }));
     }
 }