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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/segmented-control.wrapper.mjs

@@ -1,29 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSegmentedControl } from '../dsr-components/segmented-control.mjs';
 
-const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, disabled = false, form, name, onBlur, onChange, onSegmentedControlChange, onUpdate, theme, value, className, children, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, required = false, state = 'none', value, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
-    useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
-    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, disabled, form, name, theme || useTheme(), value];
+    const propsToSync = [columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'disabled', 'form', 'name', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                ...{ "role": "group" },
-                children: (jsx(DSRSegmentedControl, { backgroundColor, columns, compact, disabled, form, name, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRSegmentedControl, { columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, value, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/select.wrapper.mjs

@@ -1,27 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSelect } from '../dsr-components/select.mjs';
 
-const PSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onToggle, required = false, state = 'none', value, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
-    useEventCallback(elementRef, 'update', onUpdate);
+    useEventCallback(elementRef, 'toggle', onToggle);
     const WebComponentTag = usePrefix('p-select');
-    const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'disabled', 'dropdownDirection', 'filter', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'dropdownDirection', 'filter', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSelect, { compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRSelect, { compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, value, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/sheet.wrapper.mjs

@@ -1,27 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSheet } from '../dsr-components/sheet.mjs';
 
-const PSheet = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, children, ...rest }, ref) => {
+const PSheet = /*#__PURE__*/ forwardRef(({ aria, background = 'canvas', disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-sheet');
-    const propsToSync = [aria, disableBackdropClick, dismissButton, open, theme || useTheme()];
+    const propsToSync = [aria, background, disableBackdropClick, dismissButton, open];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'dismissButton', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'background', 'disableBackdropClick', 'dismissButton', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSheet, { aria, disableBackdropClick, dismissButton, open, theme: theme || useTheme(), children })),
+                children: (jsx(DSRSheet, { aria, background, disableBackdropClick, dismissButton, open, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/spinner.wrapper.mjs

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSpinner } from '../dsr-components/spinner.mjs';
 
-const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
+const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-spinner');
-    const propsToSync = [aria, size, theme || useTheme()];
+    const propsToSync = [aria, size];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSpinner, { aria, size, theme: theme || useTheme() })),
+                children: (jsx(DSRSpinner, { aria, size })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -5,9 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRStepperHorizontalItem } from '../dsr-components/stepper-horizontal-item.mjs';
 
-const PStepperHorizontalItem = /*#__PURE__*/ forwardRef((
-// @ts-ignore
-{ disabled = false, state, className, children, theme = 'light', ...rest }, ref) => {
+const PStepperHorizontalItem = /*#__PURE__*/ forwardRef(({ disabled = false, state, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-stepper-horizontal-item');
     const propsToSync = [disabled, state];
@@ -21,7 +19,7 @@ const PStepperHorizontalItem = /*#__PURE__*/ forwardRef((
         ...(!process.browser
             ? {
                 ...{ "role": "listitem" },
-                children: (jsx(DSRStepperHorizontalItem, { disabled, state, theme, children })),
+                children: (jsx(DSRStepperHorizontalItem, { disabled, state, children })),
             }
             : {
                 children,

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

@@ -1,26 +1,23 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRStepperHorizontal } from '../dsr-components/stepper-horizontal.mjs';
 
-const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, children, ...rest }, ref) => {
+const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onUpdate, size = 'small', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'stepChange', onStepChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-stepper-horizontal');
-    const propsToSync = [size, theme || useTheme()];
     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: (jsx(DSRStepperHorizontal, { size, theme: theme || useTheme(), children })),
+                children: (jsx(DSRStepperHorizontal, { size, children })),
             }
             : {
                 children,

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

@@ -1,26 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSwitch } from '../dsr-components/switch.mjs';
 
-const PSwitch = /*#__PURE__*/ 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__*/ forwardRef(({ alignLabel = 'end', checked = false, compact = false, disabled = false, hideLabel = false, loading = false, onUpdate, stretch = false, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'switchChange', onSwitchChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, compact, disabled, hideLabel, loading, stretch, theme || useTheme()];
+    const propsToSync = [alignLabel, checked, compact, disabled, hideLabel, loading, stretch];
     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: (jsx(DSRSwitch, { alignLabel, checked, compact, disabled, hideLabel, loading, stretch, theme: theme || useTheme(), children })),
+                children: (jsx(DSRSwitch, { alignLabel, checked, compact, disabled, hideLabel, loading, stretch, children })),
             }
             : {
                 children,

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

@@ -1,26 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTable } from '../dsr-components/table.mjs';
 
-const PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onSortingChange, onUpdate, theme, className, children, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'sortingChange', onSortingChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-table');
-    const propsToSync = [caption, compact, layout, theme || useTheme()];
+    const propsToSync = [caption, compact, layout];
     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: (jsx(DSRTable, { caption, compact, layout, theme: theme || useTheme(), children })),
+                children: (jsx(DSRTable, { caption, compact, layout, children })),
             }
             : {
                 children,

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

@@ -1,26 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTabsBar } from '../dsr-components/tabs-bar.mjs';
 
-const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || useTheme(), weight];
+    const propsToSync = [activeTabIndex, size, weight];
     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: (jsx(DSRTabsBar, { activeTabIndex, gradientColor, gradientColorScheme, size, theme: theme || useTheme(), weight, children })),
+                children: (jsx(DSRTabsBar, { activeTabIndex, size, weight, children })),
             }
             : {
                 children,

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

@@ -5,9 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRTabsItem } from '../dsr-components/tabs-item.mjs';
 
-const PTabsItem = /*#__PURE__*/ forwardRef((
-// @ts-ignore
-{ label, className, children, theme = 'light', ...rest }, ref) => {
+const PTabsItem = /*#__PURE__*/ forwardRef(({ label, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tabs-item');
     useBrowserLayoutEffect(() => {
@@ -18,7 +16,7 @@ const PTabsItem = /*#__PURE__*/ forwardRef((
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTabsItem, { label, theme, children })),
+                children: (jsx(DSRTabsItem, { label, children })),
             }
             : {
                 children,

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

@@ -1,26 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTabs } from '../dsr-components/tabs.mjs';
 
-const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || useTheme(), weight];
+    const propsToSync = [activeTabIndex, size, weight];
     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: (jsx(DSRTabs, { activeTabIndex, gradientColor, gradientColorScheme, size, theme: theme || useTheme(), weight, children })),
+                children: (jsx(DSRTabs, { activeTabIndex, size, weight, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTagDismissible } from '../dsr-components/tag-dismissible.mjs';
 
-const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-surface', label, theme, className, children, ...rest }, ref) => {
+const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, compact = false, label, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label, theme || useTheme()];
+    const propsToSync = [aria, compact, label];
     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: (jsx(DSRTagDismissible, { aria, color, label, theme: theme || useTheme(), children })),
+                children: (jsx(DSRTagDismissible, { aria, compact, label, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTag } from '../dsr-components/tag.mjs';
 
-const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, children, ...rest }, ref) => {
+const PTag = /*#__PURE__*/ forwardRef(({ compact = false, icon = 'none', iconSource, variant = 'secondary', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag');
-    const propsToSync = [color, compact, icon, iconSource, theme || useTheme()];
+    const propsToSync = [compact, icon, iconSource, variant];
     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: (jsx(DSRTag, { color, compact, icon, iconSource, theme: theme || useTheme(), children })),
+                children: (jsx(DSRTag, { compact, icon, iconSource, variant, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,22 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTextList } from '../dsr-components/text-list.mjs';
 
-const PTextList = /*#__PURE__*/ forwardRef(({ listType, orderType, theme, type = 'unordered', className, children, ...rest }, ref) => {
+const PTextList = /*#__PURE__*/ forwardRef(({ type = 'unordered', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme || useTheme(), type];
     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: (jsx(DSRTextList, { listType, orderType, theme: theme || useTheme(), type, children })),
+                children: (jsx(DSRTextList, { type, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRText } from '../dsr-components/text.mjs';
 
-const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, children, ...rest }, ref) => {
+const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme(), weight];
+    const propsToSync = [align, color, ellipsis, size, tag, weight];
     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: (jsx(DSRText, { align, color, ellipsis, size, tag, theme: theme || useTheme(), weight, children })),
+                children: (jsx(DSRText, { align, color, ellipsis, size, tag, weight, children })),
             }
             : {
                 children,

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

@@ -1,27 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTextarea } from '../dsr-components/textarea.mjs';
 
-const PTextarea = /*#__PURE__*/ 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__*/ 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 = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-textarea');
-    const propsToSync = [autoComplete, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, theme || 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];
     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: (jsx(DSRTextarea, { autoComplete, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, theme: theme || useTheme(), value, wrap, children })),
+                children: (jsx(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/esm/components-react/projects/react-ssr-wrapper/src/lib/components/toast.wrapper.mjs

@@ -1,24 +1,20 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRToast } from '../dsr-components/toast.mjs';
 
-const PToast = /*#__PURE__*/ forwardRef(({ theme, className, ...rest }, ref) => {
+const PToast = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-toast');
-    const themeValue = useTheme();
-    useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme || themeValue;
-    }, [theme, themeValue]);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
                 ...{ "role": "status" },
-                children: (jsx(DSRToast, { theme: theme || useTheme() })),
+                children: (jsx(DSRToast, {})),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRWordmark } from '../dsr-components/wordmark.mjs';
 
-const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
+const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target = '_self', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-wordmark');
-    const propsToSync = [aria, href, size, target, theme || useTheme()];
+    const propsToSync = [aria, href, size, target];
     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: (jsx(DSRWordmark, { aria, href, size, target, theme: theme || useTheme() })),
+                children: (jsx(DSRWordmark, { aria, href, size, target })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getAccordionCss as getComponentCss$1n } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getAccordionCss as getComponentCss$19 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
@@ -18,9 +18,9 @@ class DSRAccordion extends Component {
         splitChildren(this.props.children);
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
-        const Heading = this.props.tag || this.props.headingTag;
-        const style = minifyCss(getComponentCss$1n(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { 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("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        const Heading = this.props.headingTag;
+        const style = minifyCss(getComponentCss$19(this.props.size, this.props.compact, this.props.open, this.props.sticky));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { 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("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }