@porsche-design-system/components-react 3.31.0 → 4.0.0-alpha.0

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/stepper-horizontal-item.wrapper.cjs

@@ -7,9 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var stepperHorizontalItem = require('../dsr-components/stepper-horizontal-item.cjs');
 
-const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef((
-// @ts-ignore
-{ disabled = false, state, className, children, theme = 'light', ...rest }, ref) => {
+const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, state, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal-item');
     const propsToSync = [disabled, state];
@@ -23,7 +21,7 @@ const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef((
         ...(!process.browser
             ? {
                 ...{ "role": "listitem" },
-                children: (jsxRuntime.jsx(stepperHorizontalItem.DSRStepperHorizontalItem, { disabled, state, theme, children })),
+                children: (jsxRuntime.jsx(stepperHorizontalItem.DSRStepperHorizontalItem, { disabled, state, children })),
             }
             : {
                 children,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/stepper-horizontal.wrapper.cjs

@@ -7,22 +7,19 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var stepperHorizontal = require('../dsr-components/stepper-horizontal.cjs');
 
-const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, children, ...rest }, ref) => {
+const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onUpdate, size = 'small', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');
-    const propsToSync = [size, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
+        elementRef.current.size = size;
+    }, [size]);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(stepperHorizontal.DSRStepperHorizontal, { size, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(stepperHorizontal.DSRStepperHorizontal, { size, children })),
             }
             : {
                 children,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/switch.wrapper.cjs

@@ -7,22 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var _switch = require('../dsr-components/switch.cjs');
 
-const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked = false, compact = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, children, ...rest }, ref) => {
+const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked = false, compact = false, disabled = false, hideLabel = false, loading = false, onUpdate, stretch = false, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, compact, disabled, hideLabel, loading, stretch, theme || hooks.useTheme()];
+    const propsToSync = [alignLabel, checked, compact, disabled, hideLabel, loading, stretch];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignLabel', 'checked', 'compact', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignLabel', 'checked', 'compact', 'disabled', 'hideLabel', 'loading', 'stretch'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(_switch.DSRSwitch, { alignLabel, checked, compact, disabled, hideLabel, loading, stretch, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(_switch.DSRSwitch, { alignLabel, checked, compact, disabled, hideLabel, loading, stretch, children })),
             }
             : {
                 children,

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

@@ -7,22 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var table = require('../dsr-components/table.cjs');
 
-const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onSortingChange, onUpdate, theme, className, children, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
-    const propsToSync = [caption, compact, layout, theme || hooks.useTheme()];
+    const propsToSync = [caption, compact, layout];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['caption', 'compact', 'layout', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['caption', 'compact', 'layout'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(table.DSRTable, { caption, compact, layout, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(table.DSRTable, { caption, compact, layout, children })),
             }
             : {
                 children,

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

@@ -7,22 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabsBar = require('../dsr-components/tabs-bar.cjs');
 
-const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || hooks.useTheme(), weight];
+    const propsToSync = [activeTabIndex, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, gradientColor, gradientColorScheme, size, theme: theme || hooks.useTheme(), weight, children })),
+                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, size, weight, children })),
             }
             : {
                 children,

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

@@ -7,9 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabsItem = require('../dsr-components/tabs-item.cjs');
 
-const PTabsItem = /*#__PURE__*/ react.forwardRef((
-// @ts-ignore
-{ label, className, children, theme = 'light', ...rest }, ref) => {
+const PTabsItem = /*#__PURE__*/ react.forwardRef(({ label, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tabs-item');
     hooks.useBrowserLayoutEffect(() => {
@@ -20,7 +18,7 @@ const PTabsItem = /*#__PURE__*/ react.forwardRef((
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabsItem.DSRTabsItem, { label, theme, children })),
+                children: (jsxRuntime.jsx(tabsItem.DSRTabsItem, { label, children })),
             }
             : {
                 children,

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

@@ -7,22 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabs = require('../dsr-components/tabs.cjs');
 
-const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || hooks.useTheme(), weight];
+    const propsToSync = [activeTabIndex, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, gradientColor, gradientColorScheme, size, theme: theme || hooks.useTheme(), weight, children })),
+                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, size, weight, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tagDismissible = require('../dsr-components/tag-dismissible.cjs');
 
-const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'background-surface', label, theme, className, children, ...rest }, ref) => {
+const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, label, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label, theme || hooks.useTheme()];
+    const propsToSync = [aria, compact, label];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'color', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tagDismissible.DSRTagDismissible, { aria, color, label, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(tagDismissible.DSRTagDismissible, { aria, compact, label, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tag = require('../dsr-components/tag.cjs');
 
-const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, children, ...rest }, ref) => {
+const PTag = /*#__PURE__*/ react.forwardRef(({ compact = false, icon = 'none', iconSource, variant = 'secondary', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag');
-    const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme()];
+    const propsToSync = [compact, icon, iconSource, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'compact', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'icon', 'iconSource', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tag.DSRTag, { color, compact, icon, iconSource, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(tag.DSRTag, { compact, icon, iconSource, variant, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,18 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var textList = require('../dsr-components/text-list.cjs');
 
-const PTextList = /*#__PURE__*/ react.forwardRef(({ listType, orderType, theme, type = 'unordered', className, children, ...rest }, ref) => {
+const PTextList = /*#__PURE__*/ react.forwardRef(({ type = 'unordered', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme || hooks.useTheme(), type];
     hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['listType', 'orderType', 'theme', 'type'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
+        elementRef.current.type = type;
+    }, [type]);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textList.DSRTextList, { listType, orderType, theme: theme || hooks.useTheme(), type, children })),
+                children: (jsxRuntime.jsx(textList.DSRTextList, { type, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var text = require('../dsr-components/text.cjs');
 
-const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, children, ...rest }, ref) => {
+const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-text');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme(), weight];
+    const propsToSync = [align, color, ellipsis, size, tag, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(text.DSRText, { align, color, ellipsis, size, tag, theme: theme || hooks.useTheme(), weight, children })),
+                children: (jsxRuntime.jsx(text.DSRText, { align, color, ellipsis, size, tag, weight, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var textarea = require('../dsr-components/textarea.cjs');
 
-const PTextarea = /*#__PURE__*/ react.forwardRef(({ autoComplete, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, children, ...rest }, ref) => {
+const PTextarea = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, spellCheck, state = 'none', value = '', wrap = 'soft', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.usePrefix('p-textarea');
-    const propsToSync = [autoComplete, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, theme || hooks.useTheme(), value, wrap];
+    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, value, wrap];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'resize', 'rows', 'spellCheck', 'state', 'theme', 'value', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'resize', 'rows', 'spellCheck', 'state', 'value', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textarea.DSRTextarea, { autoComplete, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, theme: theme || hooks.useTheme(), value, wrap, children })),
+                children: (jsxRuntime.jsx(textarea.DSRTextarea, { autoComplete, compact, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, value, wrap, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,16 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var toast = require('../dsr-components/toast.cjs');
 
-const PToast = /*#__PURE__*/ react.forwardRef(({ theme, className, ...rest }, ref) => {
+const PToast = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-toast');
-    const themeValue = hooks.useTheme();
-    hooks.useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme || themeValue;
-    }, [theme, themeValue]);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
                 ...{ "role": "status" },
-                children: (jsxRuntime.jsx(toast.DSRToast, { theme: theme || hooks.useTheme() })),
+                children: (jsxRuntime.jsx(toast.DSRToast, {})),
             }
             : {
                 suppressHydrationWarning: true,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/wordmark.wrapper.cjs

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var wordmark = require('../dsr-components/wordmark.cjs');
 
-const PWordmark = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
+const PWordmark = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'small', target = '_self', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-wordmark');
-    const propsToSync = [aria, href, size, target, theme || hooks.useTheme()];
+    const propsToSync = [aria, href, size, target];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'href', 'size', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'href', 'size', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(wordmark.DSRWordmark, { aria, href, size, target, theme: theme || hooks.useTheme() })),
+                children: (jsxRuntime.jsx(wordmark.DSRWordmark, { aria, href, size, target })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -20,9 +20,9 @@ class DSRAccordion extends react.Component {
         splitChildren.splitChildren(this.props.children);
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
-        const Heading = this.props.tag || this.props.headingTag;
-        const style = minifyCss.minifyCss(stylesEntry.getAccordionCss(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, { className: "heading", children: jsxRuntime.jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }), jsxRuntime.jsx("span", { className: "icon-container", children: jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsxRuntime.jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+        const Heading = this.props.headingTag;
+        const style = minifyCss.minifyCss(stylesEntry.getAccordionCss(this.props.size, this.props.compact, this.props.open, this.props.sticky));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, { className: "heading", children: jsxRuntime.jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }), jsxRuntime.jsx("span", { className: "icon-container", children: jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', size: "xx-small", "aria-hidden": "true" }) })] }) }), jsxRuntime.jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -10,7 +10,6 @@ var inlineNotification_wrapper = require('../components/inline-notification.wrap
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
- * @slot {"name": "title", "description": "Please use the heading prop or slot=\"heading\" instead.", "hasAltProp": true, "isDeprecated": true }
  * @slot {"name": "description", "description": "Defines the description used in the banner. Can be used alternatively to the description prop. Can be used for rich content.", "hasAltProp": true }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}
@@ -19,14 +18,10 @@ class DSRBanner extends react.Component {
     host;
     inlineNotificationElement;
     closeBtn;
-    get hasDismissButton() {
-        return this.props.persistent ? false : this.props.dismissButton;
-    }
     render() {
         const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
-        const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
         const style = minifyCss.minifyCss(stylesEntry.getBannerCss(this.props.open));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(inlineNotification_wrapper.PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": this.props.open ? 'false' : 'true', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsxRuntime.jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsxRuntime.jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(inlineNotification_wrapper.PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.props.dismissButton, "aria-hidden": this.props.open ? 'false' : 'true', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 && jsxRuntime.jsx("slot", { name: "heading", slot: "heading" }), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -29,10 +29,9 @@ class DSRButtonPure extends react.Component {
         const iconProps = {
             className: 'icon',
             size: 'inherit',
-            theme: this.props.theme,
         };
-        const style = minifyCss.minifyCss(stylesEntry.getButtonPureCss(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.underline, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getButtonPureCss(this.props.icon, this.props.iconSource, this.props.active, this.props.disabled, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: "inherit", "aria-hidden": "true" }))), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -21,7 +21,6 @@ class DSRButtonTile extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const buttonProps = {
-            theme: this.props.background,
             variant: 'secondary',
             iconSource: this.props.iconSource,
             type: this.props.type,
@@ -31,7 +30,7 @@ class DSRButtonTile extends react.Component {
         };
         const button = (react.createElement(button_wrapper.PButton, { ...buttonProps, icon: this.props.icon, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const buttonPure = (react.createElement(buttonPure_wrapper.PButtonPure, { ...buttonProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: this.props.icon === 'none' ? 'arrow-right' : this.props.icon }, this.props.label));
-        const style = minifyCss.minifyCss(stylesEntry.getButtonTileCss(utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.background, this.props.align, this.props.compact, this.props.gradient, this.props.hasFooterSlot, this.props.disabled));
+        const style = minifyCss.minifyCss(stylesEntry.getButtonTileCss(utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.align, this.props.compact, this.props.gradient, this.props.hasFooterSlot, this.props.disabled));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("div", { className: "media", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "footer", children: [jsxRuntime.jsx("p", { children: this.props.description }), jsxRuntime.jsx("slot", { name: "footer" }), typeof this.props.compact === 'boolean' ? (this.props.compact ? buttonPure : button) : [buttonPure, button]] })] })] }), this.props.children] }));
     }
 }

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

@@ -21,8 +21,8 @@ class DSRButton extends react.Component {
     initialLoading = false;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" })), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: this.props.disabled ? (this.props.variant === 'primary' ? 'contrast-high' : 'state-disabled') : 'primary', theme: this.props.theme, "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" }), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: "inherit", "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.cjs

@@ -46,8 +46,8 @@ class DSRCanvas extends react.Component {
         const hasSidebarEndHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end-header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasBackground = namedSlotChildren.filter(({ props: { slot } }) => slot === 'background').length > 0;
-        const style = minifyCss.minifyCss(stylesEntry.getCanvasCss(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("header", { className: "header", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "blur", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "header__crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsx("div", { className: "header__area header__area--end", children: jsxRuntime.jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--start", inert: !this.props.sidebarStartOpen, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), jsxRuntime.jsx("main", { className: "main", children: jsxRuntime.jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--end", inert: !this.props.sidebarEndOpen, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--end", children: [jsxRuntime.jsx("slot", { name: "sidebar-end-header" }), jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] })] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsxRuntime.jsx("footer", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: [hasSidebarEndHeader && jsxRuntime.jsx("slot", { slot: "header", name: "sidebar-end-header" }), jsxRuntime.jsx("slot", { name: "sidebar-end" })] }))] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getCanvasCss(this.props.sidebarStartOpen, this.props.sidebarEndOpen));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("header", { className: "header", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "blur", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.PButton, { icon: "sidebar", variant: "secondary", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "header__crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "header__wordmark", size: "inherit" }), jsxRuntime.jsx("div", { className: "header__area header__area--end", children: jsxRuntime.jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--start", inert: !this.props.sidebarStartOpen, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { icon: "sidebar", variant: "secondary", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), jsxRuntime.jsx("main", { className: "main", children: jsxRuntime.jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--end", inert: !this.props.sidebarEndOpen, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--end", children: [jsxRuntime.jsx("slot", { name: "sidebar-end-header" }), jsxRuntime.jsxs(button_wrapper.PButton, { icon: "close", variant: "secondary", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] })] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsxRuntime.jsx("footer", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-end", open: this.props.sidebarEndOpen, position: "end", children: [hasSidebarEndHeader && jsxRuntime.jsx("slot", { slot: "header", name: "sidebar-end-header" }), jsxRuntime.jsx("slot", { name: "sidebar-end" })] }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -35,9 +35,6 @@ class DSRCarousel extends react.Component {
     }
     render() {
         const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const alignHeaderDeprecationMap = {
-            left: 'start',
-        };
         const hasHeadingPropOrSlot = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
         const hasDescriptionPropOrSlot = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0);
         const hasControlsSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'controls').length > 0;
@@ -45,24 +42,15 @@ class DSRCarousel extends react.Component {
             className: 'btn',
             type: 'button',
             hideLabel: true,
-            theme: this.props.theme,
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
         const headingId = 'heading';
-        const style = minifyCss.minifyCss(stylesEntry.getCarouselCss(this.props.gradientColor, hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
-        // flip boolean values of disablePagination since it is the inverse of pagination
-        this.props.disablePagination
-            ? typeof this.props.disablePagination === 'object'
-                ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
-                : !this.props.disablePagination
-            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
-            this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length), this.props.alignControls));
+        const style = minifyCss.minifyCss(stylesEntry.getCarouselCss(this.props.gradient, hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, this.props.pagination, utilsEntry.isInfinitePagination(this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages), this.props.alignHeader, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length), this.props.alignControls));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
-                                            (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
+                                            (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,
                                         ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                    }), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", tabIndex: 0, children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) &&
-                                    (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.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", tabIndex: 0, children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), this.props.pagination && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }
     getPageCount = () => (this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages);
 }

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

@@ -20,10 +20,6 @@ class DSRCheckbox extends react.Component {
     host;
     // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
     // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
-    /**
-     * Emitted when checkbox checked property is changed.
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
-     */
     internals;
     initialLoading = false;
     defaultChecked;
@@ -32,14 +28,15 @@ class DSRCheckbox extends react.Component {
         this.props.internals?.setFormValue(this.props.defaultChecked ? this.props.value : undefined);
     }
     formDisabledCallback() {
+        // Called when a parent fieldset is disabled or enabled
     }
     formStateRestoreCallback() {
     }
     render() {
         const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
-        const id = 'checkbox';
-        const style = minifyCss.minifyCss(stylesEntry.getCheckboxCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.compact, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { type: "checkbox", id: id, "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        const id = 'x';
+        const style = minifyCss.minifyCss(stylesEntry.getCheckboxCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.compact));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { type: "checkbox", id: id, "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }