@porsche-design-system/components-react 3.32.0 → 4.0.0-beta.0

package/cjs/lib/components/pin-code.wrapper.cjs

@@ -6,16 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPinCode = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onBlur, onChange, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
+const PPinCode = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onBlur, onChange, required = false, state = 'none', type = 'number', value = '', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
-    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pin-code');
-    const propsToSync = [compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
+    const propsToSync = [compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, type, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/popover.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction = 'bottom', theme, className, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction = 'bottom', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-popover');
-    const propsToSync = [aria, description, direction, theme || hooks.useTheme()];
+    const propsToSync = [aria, description, direction];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/radio-group.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PRadioGroup = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', direction = 'column', disabled = false, form, hideLabel = false, label = '', loading = false, message = '', name, onBlur, onChange, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+const PRadioGroup = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', direction = 'column', disabled = false, form, hideLabel = false, label = '', loading = false, message = '', name, onBlur, onChange, required = false, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = hooks.usePrefix('p-radio-group');
-    const propsToSync = [compact, description, direction, disabled, form, hideLabel, label, loading, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [compact, description, direction, disabled, form, hideLabel, label, loading, message, name, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'direction', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'direction', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/scroller.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
+const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'center', aria, scrollToPosition, scrollbar = false, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || hooks.useTheme()];
+    const propsToSync = [alignScrollIndicator, aria, scrollToPosition, scrollbar];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'scrollToPosition', 'scrollbar'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/segmented-control.wrapper.cjs

@@ -6,17 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, required = false, state = 'none', value, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
-    hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
-    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', '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,

package/cjs/lib/components/select.wrapper.cjs

@@ -6,17 +6,16 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSelect = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onToggle, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ react.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, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'toggle', onToggle);
-    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-select');
-    const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, value];
     hooks.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,

package/cjs/lib/components/sheet.wrapper.cjs

@@ -6,16 +6,16 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSheet = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
+const PSheet = /*#__PURE__*/ react.forwardRef(({ aria, background = 'canvas', disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-sheet');
-    const propsToSync = [aria, disableBackdropClick, dismissButton, open, theme || hooks.useTheme()];
+    const propsToSync = [aria, background, disableBackdropClick, dismissButton, open];
     hooks.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,

package/cjs/lib/components/spinner.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
+const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-spinner');
-    const propsToSync = [aria, size, theme || hooks.useTheme()];
+    const propsToSync = [aria, size];
     hooks.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,

package/cjs/lib/components/stepper-horizontal.wrapper.cjs

@@ -6,16 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, ...rest }, ref) => {
+const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onUpdate, size = 'small', className, ...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,
         class: hooks.useMergedClass(elementRef, className),

package/cjs/lib/components/switch.wrapper.cjs

@@ -6,15 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked = false, compact = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, ...rest }, ref) => {
+const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked = false, compact = false, disabled = false, hideLabel = false, loading = false, onUpdate, stretch = false, className, ...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,

package/cjs/lib/components/table.wrapper.cjs

@@ -6,15 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, className, ...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,

package/cjs/lib/components/tabs-bar.wrapper.cjs

@@ -6,15 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, ...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,

package/cjs/lib/components/tabs.wrapper.cjs

@@ -6,15 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, ...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,

package/cjs/lib/components/tag-dismissible.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'background-surface', compact = false, label, theme, className, ...rest }, ref) => {
+const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, label, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, compact, label, theme || hooks.useTheme()];
+    const propsToSync = [aria, compact, label];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'color', 'compact', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/tag.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, ...rest }, ref) => {
+const PTag = /*#__PURE__*/ react.forwardRef(({ compact = false, icon = 'none', iconSource, variant = 'secondary', className, ...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,

package/cjs/lib/components/text-list.wrapper.cjs

@@ -6,14 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTextList = /*#__PURE__*/ react.forwardRef(({ listType, orderType, theme, type = 'unordered', className, ...rest }, ref) => {
+const PTextList = /*#__PURE__*/ react.forwardRef(({ type = 'unordered', className, ...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,
         class: hooks.useMergedClass(elementRef, className),

package/cjs/lib/components/text.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, ...rest }, ref) => {
+const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', weight = 'regular', className, ...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,

package/cjs/lib/components/textarea.wrapper.cjs

@@ -6,16 +6,16 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-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', theme, value = '', wrap = 'soft', className, ...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, ...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, compact, 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', 'compact', '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,

package/cjs/lib/components/toast.wrapper.cjs

@@ -6,13 +6,9 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.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,
         class: hooks.useMergedClass(elementRef, className),

package/cjs/lib/components/wordmark.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.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,

package/cjs/provider.cjs

@@ -2,19 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var componentsJs = require('@porsche-design-system/components-js');
+var react = require('react');
 
 // to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
 const PorscheDesignSystemContext = react.createContext({
     prefix: undefined,
-    theme: 'light',
 });
-const PorscheDesignSystemProvider = ({ prefix = '', cdn, theme = 'light', ...props }) => {
+const PorscheDesignSystemProvider = ({ prefix = '', cdn, ...props }) => {
     react.useEffect(() => {
         componentsJs.load({ prefix, cdn });
     }, []); // runtime prefix or cdn change is not supported
-    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix, theme }, ...props });
+    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
 };
 
 exports.PorscheDesignSystemContext = PorscheDesignSystemContext;

package/cjs/public-api.cjs

@@ -1,17 +1,15 @@
 'use strict';
 
 var componentsJs = require('@porsche-design-system/components-js');
+var hooks = require('./hooks.cjs');
 var accordion_wrapper = require('./lib/components/accordion.wrapper.cjs');
 var banner_wrapper = require('./lib/components/banner.wrapper.cjs');
 var button_wrapper = require('./lib/components/button.wrapper.cjs');
-var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.cjs');
 var buttonTile_wrapper = require('./lib/components/button-tile.wrapper.cjs');
 var canvas_wrapper = require('./lib/components/canvas.wrapper.cjs');
 var carousel_wrapper = require('./lib/components/carousel.wrapper.cjs');
 var checkbox_wrapper = require('./lib/components/checkbox.wrapper.cjs');
-var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.cjs');
-var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.cjs');
 var crest_wrapper = require('./lib/components/crest.wrapper.cjs');
 var display_wrapper = require('./lib/components/display.wrapper.cjs');
 var divider_wrapper = require('./lib/components/divider.wrapper.cjs');
@@ -19,15 +17,9 @@ var drilldown_wrapper = require('./lib/components/drilldown.wrapper.cjs');
 var drilldownItem_wrapper = require('./lib/components/drilldown-item.wrapper.cjs');
 var drilldownLink_wrapper = require('./lib/components/drilldown-link.wrapper.cjs');
 var fieldset_wrapper = require('./lib/components/fieldset.wrapper.cjs');
-var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper.cjs');
 var flag_wrapper = require('./lib/components/flag.wrapper.cjs');
-var flex_wrapper = require('./lib/components/flex.wrapper.cjs');
-var flexItem_wrapper = require('./lib/components/flex-item.wrapper.cjs');
 var flyout_wrapper = require('./lib/components/flyout.wrapper.cjs');
-var grid_wrapper = require('./lib/components/grid.wrapper.cjs');
-var gridItem_wrapper = require('./lib/components/grid-item.wrapper.cjs');
 var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
-var headline_wrapper = require('./lib/components/headline.wrapper.cjs');
 var icon_wrapper = require('./lib/components/icon.wrapper.cjs');
 var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.cjs');
 var inputDate_wrapper = require('./lib/components/input-date.wrapper.cjs');
@@ -43,11 +35,8 @@ var inputUrl_wrapper = require('./lib/components/input-url.wrapper.cjs');
 var inputWeek_wrapper = require('./lib/components/input-week.wrapper.cjs');
 var link_wrapper = require('./lib/components/link.wrapper.cjs');
 var linkPure_wrapper = require('./lib/components/link-pure.wrapper.cjs');
-var linkSocial_wrapper = require('./lib/components/link-social.wrapper.cjs');
 var linkTile_wrapper = require('./lib/components/link-tile.wrapper.cjs');
-var linkTileModelSignature_wrapper = require('./lib/components/link-tile-model-signature.wrapper.cjs');
 var linkTileProduct_wrapper = require('./lib/components/link-tile-product.wrapper.cjs');
-var marque_wrapper = require('./lib/components/marque.wrapper.cjs');
 var modal_wrapper = require('./lib/components/modal.wrapper.cjs');
 var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.cjs');
 var multiSelect_wrapper = require('./lib/components/multi-select.wrapper.cjs');
@@ -56,7 +45,6 @@ var optgroup_wrapper = require('./lib/components/optgroup.wrapper.cjs');
 var pagination_wrapper = require('./lib/components/pagination.wrapper.cjs');
 var pinCode_wrapper = require('./lib/components/pin-code.wrapper.cjs');
 var popover_wrapper = require('./lib/components/popover.wrapper.cjs');
-var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.cjs');
 var radioGroup_wrapper = require('./lib/components/radio-group.wrapper.cjs');
 var radioGroupOption_wrapper = require('./lib/components/radio-group-option.wrapper.cjs');
 var scroller_wrapper = require('./lib/components/scroller.wrapper.cjs');
@@ -64,7 +52,6 @@ var segmentedControl_wrapper = require('./lib/components/segmented-control.wrapp
 var segmentedControlItem_wrapper = require('./lib/components/segmented-control-item.wrapper.cjs');
 var select_wrapper = require('./lib/components/select.wrapper.cjs');
 var selectOption_wrapper = require('./lib/components/select-option.wrapper.cjs');
-var selectWrapper_wrapper = require('./lib/components/select-wrapper.wrapper.cjs');
 var sheet_wrapper = require('./lib/components/sheet.wrapper.cjs');
 var spinner_wrapper = require('./lib/components/spinner.wrapper.cjs');
 var stepperHorizontal_wrapper = require('./lib/components/stepper-horizontal.wrapper.cjs');
@@ -83,15 +70,12 @@ var tabsItem_wrapper = require('./lib/components/tabs-item.wrapper.cjs');
 var tag_wrapper = require('./lib/components/tag.wrapper.cjs');
 var tagDismissible_wrapper = require('./lib/components/tag-dismissible.wrapper.cjs');
 var text_wrapper = require('./lib/components/text.wrapper.cjs');
-var textFieldWrapper_wrapper = require('./lib/components/text-field-wrapper.wrapper.cjs');
 var textList_wrapper = require('./lib/components/text-list.wrapper.cjs');
 var textListItem_wrapper = require('./lib/components/text-list-item.wrapper.cjs');
 var textarea_wrapper = require('./lib/components/textarea.wrapper.cjs');
-var textareaWrapper_wrapper = require('./lib/components/textarea-wrapper.wrapper.cjs');
 var toast_wrapper = require('./lib/components/toast.wrapper.cjs');
 var wordmark_wrapper = require('./lib/components/wordmark.wrapper.cjs');
 var provider = require('./provider.cjs');
-var hooks = require('./hooks.cjs');
 var utils = require('./utils.cjs');
 
 
@@ -100,17 +84,16 @@ Object.defineProperty(exports, "componentsReady", {
 	enumerable: true,
 	get: function () { return componentsJs.componentsReady; }
 });
+exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
+exports.useToastManager = hooks.useToastManager;
 exports.PAccordion = accordion_wrapper.PAccordion;
 exports.PBanner = banner_wrapper.PBanner;
 exports.PButton = button_wrapper.PButton;
-exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
 exports.PButtonPure = buttonPure_wrapper.PButtonPure;
 exports.PButtonTile = buttonTile_wrapper.PButtonTile;
 exports.PCanvas = canvas_wrapper.PCanvas;
 exports.PCarousel = carousel_wrapper.PCarousel;
 exports.PCheckbox = checkbox_wrapper.PCheckbox;
-exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
-exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
 exports.PCrest = crest_wrapper.PCrest;
 exports.PDisplay = display_wrapper.PDisplay;
 exports.PDivider = divider_wrapper.PDivider;
@@ -118,15 +101,9 @@ exports.PDrilldown = drilldown_wrapper.PDrilldown;
 exports.PDrilldownItem = drilldownItem_wrapper.PDrilldownItem;
 exports.PDrilldownLink = drilldownLink_wrapper.PDrilldownLink;
 exports.PFieldset = fieldset_wrapper.PFieldset;
-exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlag = flag_wrapper.PFlag;
-exports.PFlex = flex_wrapper.PFlex;
-exports.PFlexItem = flexItem_wrapper.PFlexItem;
 exports.PFlyout = flyout_wrapper.PFlyout;
-exports.PGrid = grid_wrapper.PGrid;
-exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;
-exports.PHeadline = headline_wrapper.PHeadline;
 exports.PIcon = icon_wrapper.PIcon;
 exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
 exports.PInputDate = inputDate_wrapper.PInputDate;
@@ -142,11 +119,8 @@ exports.PInputUrl = inputUrl_wrapper.PInputUrl;
 exports.PInputWeek = inputWeek_wrapper.PInputWeek;
 exports.PLink = link_wrapper.PLink;
 exports.PLinkPure = linkPure_wrapper.PLinkPure;
-exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
 exports.PLinkTile = linkTile_wrapper.PLinkTile;
-exports.PLinkTileModelSignature = linkTileModelSignature_wrapper.PLinkTileModelSignature;
 exports.PLinkTileProduct = linkTileProduct_wrapper.PLinkTileProduct;
-exports.PMarque = marque_wrapper.PMarque;
 exports.PModal = modal_wrapper.PModal;
 exports.PModelSignature = modelSignature_wrapper.PModelSignature;
 exports.PMultiSelect = multiSelect_wrapper.PMultiSelect;
@@ -155,7 +129,6 @@ exports.POptgroup = optgroup_wrapper.POptgroup;
 exports.PPagination = pagination_wrapper.PPagination;
 exports.PPinCode = pinCode_wrapper.PPinCode;
 exports.PPopover = popover_wrapper.PPopover;
-exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;
 exports.PRadioGroup = radioGroup_wrapper.PRadioGroup;
 exports.PRadioGroupOption = radioGroupOption_wrapper.PRadioGroupOption;
 exports.PScroller = scroller_wrapper.PScroller;
@@ -163,7 +136,6 @@ exports.PSegmentedControl = segmentedControl_wrapper.PSegmentedControl;
 exports.PSegmentedControlItem = segmentedControlItem_wrapper.PSegmentedControlItem;
 exports.PSelect = select_wrapper.PSelect;
 exports.PSelectOption = selectOption_wrapper.PSelectOption;
-exports.PSelectWrapper = selectWrapper_wrapper.PSelectWrapper;
 exports.PSheet = sheet_wrapper.PSheet;
 exports.PSpinner = spinner_wrapper.PSpinner;
 exports.PStepperHorizontal = stepperHorizontal_wrapper.PStepperHorizontal;
@@ -182,15 +154,11 @@ exports.PTabsItem = tabsItem_wrapper.PTabsItem;
 exports.PTag = tag_wrapper.PTag;
 exports.PTagDismissible = tagDismissible_wrapper.PTagDismissible;
 exports.PText = text_wrapper.PText;
-exports.PTextFieldWrapper = textFieldWrapper_wrapper.PTextFieldWrapper;
 exports.PTextList = textList_wrapper.PTextList;
 exports.PTextListItem = textListItem_wrapper.PTextListItem;
 exports.PTextarea = textarea_wrapper.PTextarea;
-exports.PTextareaWrapper = textareaWrapper_wrapper.PTextareaWrapper;
 exports.PToast = toast_wrapper.PToast;
 exports.PWordmark = wordmark_wrapper.PWordmark;
 exports.PorscheDesignSystemContext = provider.PorscheDesignSystemContext;
 exports.PorscheDesignSystemProvider = provider.PorscheDesignSystemProvider;
-exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
-exports.useToastManager = hooks.useToastManager;
 exports.skipPorscheDesignSystemCDNRequestsDuringTests = utils.skipPorscheDesignSystemCDNRequestsDuringTests;

package/emotion/cjs/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var emotion = require('@porsche-design-system/components-js/emotion');
+
+
+
+Object.keys(emotion).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return emotion[k]; }
+	});
+});

package/emotion/esm/index.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/emotion';

package/emotion/esm/index.mjs

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/emotion';