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

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', 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, 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,

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, 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, 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,

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,19 +17,14 @@ 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');
 var inputEmail_wrapper = require('./lib/components/input-email.wrapper.cjs');
+var inputMonth_wrapper = require('./lib/components/input-month.wrapper.cjs');
 var inputNumber_wrapper = require('./lib/components/input-number.wrapper.cjs');
 var inputPassword_wrapper = require('./lib/components/input-password.wrapper.cjs');
 var inputSearch_wrapper = require('./lib/components/input-search.wrapper.cjs');
@@ -39,13 +32,11 @@ var inputTel_wrapper = require('./lib/components/input-tel.wrapper.cjs');
 var inputText_wrapper = require('./lib/components/input-text.wrapper.cjs');
 var inputTime_wrapper = require('./lib/components/input-time.wrapper.cjs');
 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');
@@ -54,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');
@@ -62,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');
@@ -81,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');
 
 
@@ -98,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;
@@ -116,19 +101,14 @@ 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;
 exports.PInputEmail = inputEmail_wrapper.PInputEmail;
+exports.PInputMonth = inputMonth_wrapper.PInputMonth;
 exports.PInputNumber = inputNumber_wrapper.PInputNumber;
 exports.PInputPassword = inputPassword_wrapper.PInputPassword;
 exports.PInputSearch = inputSearch_wrapper.PInputSearch;
@@ -136,13 +116,11 @@ exports.PInputTel = inputTel_wrapper.PInputTel;
 exports.PInputText = inputText_wrapper.PInputText;
 exports.PInputTime = inputTime_wrapper.PInputTime;
 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;
@@ -151,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;
@@ -159,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;
@@ -178,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/esm/BaseProps.d.ts

@@ -1,2 +1,2 @@
 import type { DOMAttributes, HTMLAttributes } from 'react';
-export type BaseProps = Omit<DOMAttributes<{}>, 'onChange' | 'onInput'> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'inert' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;
+export type BaseProps = Omit<DOMAttributes<{}>, 'onChange' | 'onInput' | 'onToggle'> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'inert' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;

package/esm/hooks.d.ts

@@ -1,16 +1,18 @@
 import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
-import type { Theme, ToastMessage } from './lib/types';
+import type { ToastMessage } from './lib/types';
 /**
  * sets a flag that skips the need for `PorscheDesignSystemProvider` during testing
  * when `process.env.NODE_ENV === 'test'`
  */
 export declare const skipCheckForPorscheDesignSystemProviderDuringTests: () => void;
 export declare const usePrefix: (tagName: string) => string;
-export declare const useTheme: () => Theme;
 export declare const useEventCallback: (ref: MutableRefObject<HTMLElement | undefined>, eventName: string, eventHandler: (e: Event) => void) => void;
 export declare const useMergedClass: (ref: MutableRefObject<HTMLElement | undefined>, className?: string) => string | undefined;
 export declare const useBrowserLayoutEffect: typeof useEffect;
 export declare const useToastManager: () => {
     addMessage: (msg: ToastMessage) => void;
 };
+export declare const internalHooks: {
+    usePrefix: (tagName: string) => string;
+};

package/esm/hooks.mjs

@@ -23,14 +23,6 @@ const usePrefix = (tagName) => {
         return prefix ? prefix + '-' + tagName : tagName;
     }
 };
-const useTheme = () => {
-    if (process.env.NODE_ENV === 'test' && skipCheck) {
-        return 'light';
-    }
-    else {
-        return useContext(PorscheDesignSystemContext).theme; // eslint-disable-line react-hooks/rules-of-hooks
-    }
-};
 const useEventCallback = (ref, eventName, eventHandler) => {
     // @ts-expect-error
     useEffect(() => {
@@ -60,7 +52,7 @@ const useMergedClass = (ref, className) => {
 };
 const useBrowserLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const useToastManager = () => {
-    const tagName = usePrefix('p-toast');
+    const tagName = internalHooks.usePrefix('p-toast');
     return {
         addMessage: (message) => {
             const toast = document.body.querySelector(tagName);
@@ -68,5 +60,8 @@ const useToastManager = () => {
         },
     };
 };
+const internalHooks = {
+    usePrefix,
+};
 
-export { skipCheckForPorscheDesignSystemProviderDuringTests, useBrowserLayoutEffect, useEventCallback, useMergedClass, usePrefix, useTheme, useToastManager };
+export { internalHooks, skipCheckForPorscheDesignSystemProviderDuringTests, useBrowserLayoutEffect, useEventCallback, useMergedClass, usePrefix, useToastManager };

package/esm/lib/components/accordion.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
+import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
 export type PAccordionProps = BaseProps & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -13,10 +13,6 @@ export type PAccordionProps = BaseProps & {
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     headingTag?: AccordionHeadingTag;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when accordion state is changed.
-     */
-    onAccordionChange?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
      * Emitted when accordion state is changed.
      */
@@ -33,16 +29,8 @@ export type PAccordionProps = BaseProps & {
      * @experimental Sticks the Accordion heading at the top, fixed while scrolling
      */
     sticky?: boolean;
-    /**
-     * @deprecated , will be removed with next major release, use `heading-tag` instead. Sets a heading tag, so it fits correctly within the outline of the page.
-     */
-    tag?: AccordionTag;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -55,10 +43,6 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     headingTag?: AccordionHeadingTag;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when accordion state is changed.
-     */
-    onAccordionChange?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
      * Emitted when accordion state is changed.
      */
@@ -75,14 +59,6 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      * @experimental Sticks the Accordion heading at the top, fixed while scrolling
      */
     sticky?: boolean;
-    /**
-     * @deprecated , will be removed with next major release, use `heading-tag` instead. Sets a heading tag, so it fits correctly within the outline of the page.
-     */
-    tag?: AccordionTag;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/accordion.wrapper.mjs

@@ -1,18 +1,17 @@
 "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';
 
-const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-accordion');
-    const propsToSync = [compact, heading, headingTag, open, size, sticky, tag, theme || useTheme()];
+    const propsToSync = [compact, heading, headingTag, open, size, sticky];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,