@porsche-design-system/components-react 2.20.0 → 3.0.0-alpha.1

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

@@ -4,7 +4,7 @@ import { usePrefix, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 import { DSRTableBody } from '../dsr-components/table-body.js';
 
-const PTableBody = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
+const PTableBody = forwardRef(({ className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-table-body');
     // @ts-ignore

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

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRTableCell } from '../dsr-components/table-cell.js';
 
-const PTableCell = /*#__PURE__*/ forwardRef(({ multiline = false, className, children, ...rest }, ref) => {
+const PTableCell = forwardRef(({ multiline = false, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-table-cell');
     useBrowserLayoutEffect(() => {

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

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRTableHeadCell } from '../dsr-components/table-head-cell.js';
 
-const PTableHeadCell = /*#__PURE__*/ forwardRef(({ hideLabel = false, multiline = false, sort, className, children, ...rest }, ref) => {
+const PTableHeadCell = forwardRef(({ hideLabel = false, multiline = false, sort, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-table-head-cell');
     const propsToSync = [hideLabel, multiline, sort];

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

@@ -4,7 +4,7 @@ import { usePrefix, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 import { DSRTableHeadRow } from '../dsr-components/table-head-row.js';
 
-const PTableHeadRow = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
+const PTableHeadRow = forwardRef(({ className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-table-head-row');
     // @ts-ignore

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

@@ -4,7 +4,7 @@ import { usePrefix, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 import { DSRTableHead } from '../dsr-components/table-head.js';
 
-const PTableHead = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
+const PTableHead = forwardRef(({ className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-table-head');
     // @ts-ignore

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

@@ -4,7 +4,7 @@ import { usePrefix, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 import { DSRTableRow } from '../dsr-components/table-row.js';
 
-const PTableRow = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
+const PTableRow = forwardRef(({ className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-table-row');
     // @ts-ignore

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

@@ -4,7 +4,7 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.js';
 import { DSRTable } from '../dsr-components/table.js';
 
-const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, className, children, ...rest }, ref) => {
+const PTable = forwardRef(({ caption, onSortingChange, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'sortingChange', onSortingChange);
     const WebComponentTag = usePrefix('p-table');

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

@@ -4,7 +4,7 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.js';
 import { DSRTabsBar } from '../dsr-components/tabs-bar.js';
 
-const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = forwardRef(({ activeTabIndex, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'tabChange', onTabChange);
     const WebComponentTag = usePrefix('p-tabs-bar');

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

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRTabsItem } from '../dsr-components/tabs-item.js';
 
-const PTabsItem = /*#__PURE__*/ forwardRef((
+const PTabsItem = forwardRef((
 // @ts-ignore
 { label, className, children, theme = 'light', ...rest }, ref) => {
     const elementRef = useRef();

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

@@ -4,7 +4,7 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.js';
 import { DSRTabs } from '../dsr-components/tabs.js';
 
-const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = forwardRef(({ activeTabIndex = 0, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'tabChange', onTabChange);
     const WebComponentTag = usePrefix('p-tabs');

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

@@ -4,13 +4,13 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRTagDismissible } from '../dsr-components/tag-dismissible.js';
 
-const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-surface', label, className, children, ...rest }, ref) => {
+const PTagDismissible = forwardRef(({ aria, color = 'background-surface', label, theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label];
+    const propsToSync = [aria, color, label, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'color', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'color', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -21,7 +21,7 @@ const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-su
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTagDismissible, { ...{ aria, color, label, children } })),
+                children: (jsx(DSRTagDismissible, { ...{ aria, color, label, theme, children } })),
             }
             : {
                 children,

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

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRTag } from '../dsr-components/tag.js';
 
-const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, children, ...rest }, ref) => {
+const PTag = forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-tag');
     const propsToSync = [color, icon, iconSource, theme];

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

@@ -4,14 +4,14 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.js';
 import { DSRTextFieldWrapper } from '../dsr-components/text-field-wrapper.js';
 
-const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
+const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, theme, unit, unitPosition];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTextFieldWrapper, { ...{ actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition, children } })),
+                children: (jsx(DSRTextFieldWrapper, { ...{ actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, theme, unit, unitPosition, children } })),
             }
             : {
                 children,

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

@@ -4,7 +4,7 @@ import { usePrefix, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 import { DSRTextListItem } from '../dsr-components/text-list-item.js';
 
-const PTextListItem = /*#__PURE__*/ forwardRef((
+const PTextListItem = forwardRef((
 // @ts-ignore
 { className, children, listType = 'unordered', orderType = 'numbered', ...rest }, ref) => {
     const elementRef = useRef();

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

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRTextList } from '../dsr-components/text-list.js';
 
-const PTextList = /*#__PURE__*/ forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, children, ...rest }, ref) => {
+const PTextList = forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text-list');
     const propsToSync = [listType, orderType, theme];

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

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRText } from '../dsr-components/text.js';
 
-const PText = /*#__PURE__*/ forwardRef(({ align = 'left', color = 'default', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PText = forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text');
     const propsToSync = [align, color, ellipsis, size, tag, theme, weight];

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

@@ -4,13 +4,13 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRTextareaWrapper } from '../dsr-components/textarea-wrapper.js';
 
-const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', className, children, ...rest }, ref) => {
+const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state];
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -21,7 +21,7 @@ const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTextareaWrapper, { ...{ description, hideLabel, label, message, showCharacterCount, state, children } })),
+                children: (jsx(DSRTextareaWrapper, { ...{ description, hideLabel, label, message, showCharacterCount, state, theme, children } })),
             }
             : {
                 children,

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

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRToast } from '../dsr-components/toast.js';
 
-const PToast = /*#__PURE__*/ forwardRef(({ theme = 'light', className, ...rest }, ref) => {
+const PToast = forwardRef(({ theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-toast');
     useBrowserLayoutEffect(() => {

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

@@ -1,11 +1,63 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.js';
+import '../components/accordion.wrapper.js';
+import '../components/banner.wrapper.js';
+import '../components/button.wrapper.js';
+import '../components/button-group.wrapper.js';
+import '../components/button-pure.wrapper.js';
+import '../components/carousel.wrapper.js';
+import '../components/checkbox-wrapper.wrapper.js';
+import '../components/content-wrapper.wrapper.js';
+import '../components/display.wrapper.js';
+import '../components/divider.wrapper.js';
+import '../components/fieldset-wrapper.wrapper.js';
+import '../components/flex.wrapper.js';
+import '../components/flex-item.wrapper.js';
+import '../components/grid.wrapper.js';
+import '../components/grid-item.wrapper.js';
+import '../components/heading.wrapper.js';
+import '../components/headline.wrapper.js';
+import { PIcon } from '../components/icon.wrapper.js';
+import '../components/inline-notification.wrapper.js';
+import '../components/link.wrapper.js';
+import '../components/link-pure.wrapper.js';
+import '../components/link-social.wrapper.js';
+import '../components/link-tile.wrapper.js';
+import '../components/marque.wrapper.js';
+import '../components/modal.wrapper.js';
+import '../components/pagination.wrapper.js';
+import '../components/popover.wrapper.js';
+import '../components/radio-button-wrapper.wrapper.js';
+import '../components/scroller.wrapper.js';
+import '../components/segmented-control.wrapper.js';
+import '../components/segmented-control-item.wrapper.js';
+import '../components/select-wrapper.wrapper.js';
+import '../components/spinner.wrapper.js';
+import '../components/stepper-horizontal.wrapper.js';
+import '../components/stepper-horizontal-item.wrapper.js';
+import '../components/switch.wrapper.js';
+import '../components/table.wrapper.js';
+import '../components/table-body.wrapper.js';
+import '../components/table-cell.wrapper.js';
+import '../components/table-head.wrapper.js';
+import '../components/table-head-cell.wrapper.js';
+import '../components/table-head-row.wrapper.js';
+import '../components/table-row.wrapper.js';
+import '../components/tabs.wrapper.js';
+import '../components/tabs-bar.wrapper.js';
+import '../components/tabs-item.wrapper.js';
+import '../components/tag.wrapper.js';
+import '../components/tag-dismissible.wrapper.js';
+import '../components/text.wrapper.js';
+import '../components/text-field-wrapper.wrapper.js';
+import '../components/text-list.wrapper.js';
+import '../components/text-list-item.wrapper.js';
+import '../components/textarea-wrapper.wrapper.js';
+import '../components/toast.wrapper.js';
 import { splitChildren } from '../../splitChildren.js';
+import { Component } from 'react';
 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';
+import { getAccordionCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 
 class DSRAccordion extends Component {
     render() {
@@ -13,8 +65,9 @@ class DSRAccordion extends Component {
         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] }));
+        // TODO: why .root div for a condition border-bottom style? could be applied on :host directly
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(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", name: this.props.open ? 'minus' : 'plus', 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] }));
     }
 }
 

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

@@ -1,18 +1,69 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.js';
+import '../components/accordion.wrapper.js';
+import '../components/banner.wrapper.js';
+import '../components/button.wrapper.js';
+import '../components/button-group.wrapper.js';
+import '../components/button-pure.wrapper.js';
+import '../components/carousel.wrapper.js';
+import '../components/checkbox-wrapper.wrapper.js';
+import '../components/content-wrapper.wrapper.js';
+import '../components/display.wrapper.js';
+import '../components/divider.wrapper.js';
+import '../components/fieldset-wrapper.wrapper.js';
+import '../components/flex.wrapper.js';
+import '../components/flex-item.wrapper.js';
+import '../components/grid.wrapper.js';
+import '../components/grid-item.wrapper.js';
+import '../components/heading.wrapper.js';
+import '../components/headline.wrapper.js';
+import '../components/icon.wrapper.js';
+import { PInlineNotification } from '../components/inline-notification.wrapper.js';
+import '../components/link.wrapper.js';
+import '../components/link-pure.wrapper.js';
+import '../components/link-social.wrapper.js';
+import '../components/link-tile.wrapper.js';
+import '../components/marque.wrapper.js';
+import '../components/modal.wrapper.js';
+import '../components/pagination.wrapper.js';
+import '../components/popover.wrapper.js';
+import '../components/radio-button-wrapper.wrapper.js';
+import '../components/scroller.wrapper.js';
+import '../components/segmented-control.wrapper.js';
+import '../components/segmented-control-item.wrapper.js';
+import '../components/select-wrapper.wrapper.js';
+import '../components/spinner.wrapper.js';
+import '../components/stepper-horizontal.wrapper.js';
+import '../components/stepper-horizontal-item.wrapper.js';
+import '../components/switch.wrapper.js';
+import '../components/table.wrapper.js';
+import '../components/table-body.wrapper.js';
+import '../components/table-cell.wrapper.js';
+import '../components/table-head.wrapper.js';
+import '../components/table-head-cell.wrapper.js';
+import '../components/table-head-row.wrapper.js';
+import '../components/table-row.wrapper.js';
+import '../components/tabs.wrapper.js';
+import '../components/tabs-bar.wrapper.js';
+import '../components/tabs-item.wrapper.js';
+import '../components/tag.wrapper.js';
+import '../components/tag-dismissible.wrapper.js';
+import '../components/text.wrapper.js';
+import '../components/text-field-wrapper.wrapper.js';
+import '../components/text-list.wrapper.js';
+import '../components/text-list-item.wrapper.js';
+import '../components/textarea-wrapper.wrapper.js';
+import '../components/toast.wrapper.js';
 import { splitChildren } from '../../splitChildren.js';
+import { Component } from 'react';
 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';
+import { getBannerCss as getComponentCss$R } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 
 class DSRBanner extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        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: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0 && jsx("slot", { name: "title", slot: "heading" }), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.width)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PInlineNotification, { className: "root", state: this.props.state, persistent: this.props.persistent, theme: this.props.theme, children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0 && jsx("slot", { name: "title", slot: "heading" }), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] })] }), this.props.children] }));
     }
 }
 

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

@@ -3,12 +3,12 @@ import { splitChildren } from '../../splitChildren.js';
 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';
+import { getButtonGroupCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 
 class DSRButtonGroup extends Component {
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.direction)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(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] }));
     }
 }

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

@@ -1,13 +1,64 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.js';
+import '../components/accordion.wrapper.js';
+import '../components/banner.wrapper.js';
+import '../components/button.wrapper.js';
+import '../components/button-group.wrapper.js';
+import '../components/button-pure.wrapper.js';
+import '../components/carousel.wrapper.js';
+import '../components/checkbox-wrapper.wrapper.js';
+import '../components/content-wrapper.wrapper.js';
+import '../components/display.wrapper.js';
+import '../components/divider.wrapper.js';
+import '../components/fieldset-wrapper.wrapper.js';
+import '../components/flex.wrapper.js';
+import '../components/flex-item.wrapper.js';
+import '../components/grid.wrapper.js';
+import '../components/grid-item.wrapper.js';
+import '../components/heading.wrapper.js';
+import '../components/headline.wrapper.js';
+import { PIcon } from '../components/icon.wrapper.js';
+import '../components/inline-notification.wrapper.js';
+import '../components/link.wrapper.js';
+import '../components/link-pure.wrapper.js';
+import '../components/link-social.wrapper.js';
+import '../components/link-tile.wrapper.js';
+import '../components/marque.wrapper.js';
+import '../components/modal.wrapper.js';
+import '../components/pagination.wrapper.js';
+import '../components/popover.wrapper.js';
+import '../components/radio-button-wrapper.wrapper.js';
+import '../components/scroller.wrapper.js';
+import '../components/segmented-control.wrapper.js';
+import '../components/segmented-control-item.wrapper.js';
+import '../components/select-wrapper.wrapper.js';
+import { PSpinner } from '../components/spinner.wrapper.js';
+import '../components/stepper-horizontal.wrapper.js';
+import '../components/stepper-horizontal-item.wrapper.js';
+import '../components/switch.wrapper.js';
+import '../components/table.wrapper.js';
+import '../components/table-body.wrapper.js';
+import '../components/table-cell.wrapper.js';
+import '../components/table-head.wrapper.js';
+import '../components/table-head-cell.wrapper.js';
+import '../components/table-head-row.wrapper.js';
+import '../components/table-row.wrapper.js';
+import '../components/tabs.wrapper.js';
+import '../components/tabs-bar.wrapper.js';
+import '../components/tabs-item.wrapper.js';
+import '../components/tag.wrapper.js';
+import '../components/tag-dismissible.wrapper.js';
+import '../components/text.wrapper.js';
+import '../components/text-field-wrapper.wrapper.js';
+import '../components/text-list.wrapper.js';
+import '../components/text-list-item.wrapper.js';
+import '../components/textarea-wrapper.wrapper.js';
+import '../components/toast.wrapper.js';
 import { splitChildren } from '../../splitChildren.js';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getButtonPureCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getButtonPureCss as getComponentCss$P } 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() {
@@ -15,17 +66,15 @@ class DSRButtonPure extends Component {
     }
     // this stops click events when button is disabled
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const hasIcon = hasVisibleIcon(this.props.icon);
-        const hasSubline = namedSlotChildren.filter(({ props: { slot } }) => slot === 'subline').length > 0;
+        splitChildren(this.props.children);
+        const hasIcon = hasVisibleIcon(this.props.icon, this.props.iconSource);
         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, namedSlotChildren.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] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,30 +1,70 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.js';
+import '../components/accordion.wrapper.js';
+import '../components/banner.wrapper.js';
+import '../components/button.wrapper.js';
+import '../components/button-group.wrapper.js';
+import '../components/button-pure.wrapper.js';
+import '../components/carousel.wrapper.js';
+import '../components/checkbox-wrapper.wrapper.js';
+import '../components/content-wrapper.wrapper.js';
+import '../components/display.wrapper.js';
+import '../components/divider.wrapper.js';
+import '../components/fieldset-wrapper.wrapper.js';
+import '../components/flex.wrapper.js';
+import '../components/flex-item.wrapper.js';
+import '../components/grid.wrapper.js';
+import '../components/grid-item.wrapper.js';
+import '../components/heading.wrapper.js';
+import '../components/headline.wrapper.js';
+import { PIcon } from '../components/icon.wrapper.js';
+import '../components/inline-notification.wrapper.js';
+import '../components/link.wrapper.js';
+import '../components/link-pure.wrapper.js';
+import '../components/link-social.wrapper.js';
+import '../components/link-tile.wrapper.js';
+import '../components/marque.wrapper.js';
+import '../components/modal.wrapper.js';
+import '../components/pagination.wrapper.js';
+import '../components/popover.wrapper.js';
+import '../components/radio-button-wrapper.wrapper.js';
+import '../components/scroller.wrapper.js';
+import '../components/segmented-control.wrapper.js';
+import '../components/segmented-control-item.wrapper.js';
+import '../components/select-wrapper.wrapper.js';
+import { PSpinner } from '../components/spinner.wrapper.js';
+import '../components/stepper-horizontal.wrapper.js';
+import '../components/stepper-horizontal-item.wrapper.js';
+import '../components/switch.wrapper.js';
+import '../components/table.wrapper.js';
+import '../components/table-body.wrapper.js';
+import '../components/table-cell.wrapper.js';
+import '../components/table-head.wrapper.js';
+import '../components/table-head-cell.wrapper.js';
+import '../components/table-head-row.wrapper.js';
+import '../components/table-row.wrapper.js';
+import '../components/tabs.wrapper.js';
+import '../components/tabs-bar.wrapper.js';
+import '../components/tabs-item.wrapper.js';
+import '../components/tag.wrapper.js';
+import '../components/tag-dismissible.wrapper.js';
+import '../components/text.wrapper.js';
+import '../components/text-field-wrapper.wrapper.js';
+import '../components/text-list.wrapper.js';
+import '../components/text-list-item.wrapper.js';
+import '../components/textarea-wrapper.wrapper.js';
+import '../components/toast.wrapper.js';
 import { splitChildren } from '../../splitChildren.js';
+import { Component } from 'react';
 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';
+import { getButtonCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getButtonAriaAttributes, getLinkButtonThemeForIcon, hasVisibleIcon, isDisabledOrLoading } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRButton extends Component {
-    get isDisabledOrLoading() {
-        return isDisabledOrLoading(this.props.disabled, this.props.loading);
-    }
     render() {
         splitChildren(this.props.children);
-        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] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$O(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, 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, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: isDisabledOrLoading(this.props.disabled, this.props.loading) ? 'disabled' : 'primary', theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
     }
 }