@porsche-design-system/components-react 3.23.0-rc.0 → 3.24.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.24.0-rc.0] - 2025-01-07
+
+#### Added
+
+- Styles: support for `vanilla-extract` available under
+  `import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';`
+  ([#3666](https://github.com/porsche-design-system/porsche-design-system/pull/3666))
+
+#### Changed
+
+- React: updated peer dependency to `>=19.0.0 <20.0.0`
+
+### [3.23.0] - 2024-12-12
+
 ### [3.23.0-rc.0] - 2024-12-12
 
 #### Changed

package/cjs/hooks.cjs

@@ -44,7 +44,7 @@ const useEventCallback = (ref, eventName, eventHandler) => {
     }, [eventHandler]); // eslint-disable-line react-hooks/exhaustive-deps
 };
 const useMergedClass = (ref, className) => {
-    const prevComponentClassName = react.useRef();
+    const prevComponentClassName = react.useRef(undefined);
     return react.useMemo(() => {
         if (!className) {
             return undefined;

package/cjs/lib/components/accordion.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-accordion');
@@ -18,7 +18,6 @@ const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTa
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/banner.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
     const propsToSync = [description, dismissButton, heading, headingTag, open, persistent, state, theme || hooks.useTheme(), width];
@@ -17,7 +17,6 @@ const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButto
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,14 +7,13 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-group');
     hooks.useBrowserLayoutEffect(() => {
         elementRef.current.direction = direction;
     }, [direction]);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/button-pure.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-pure');
     const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/button-tile.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PButtonTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'medium', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PButtonTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, as
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/button.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button');
     const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disable
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/canvas.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
     hooks.useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = hooks.usePrefix('p-canvas');
@@ -18,7 +18,6 @@ const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebar
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/carousel.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
@@ -18,7 +18,6 @@ const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignH
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/checkbox-wrapper.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PCheckboxWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-checkbox-wrapper');
     const propsToSync = [hideLabel, label, loading, message, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PCheckboxWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, la
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/checkbox.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PCheckbox = /*#__PURE__*/ react.forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-checkbox');
@@ -18,7 +18,6 @@ const PCheckbox = /*#__PURE__*/ react.forwardRef(({ checked = false, compact = f
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/content-wrapper.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PContentWrapper = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-content-wrapper');
     const propsToSync = [backgroundColor, theme || hooks.useTheme(), width];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PContentWrapper = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'tra
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/crest.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PCrest = /*#__PURE__*/ react.forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-crest');
     const propsToSync = [aria, href, target];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PCrest = /*#__PURE__*/ react.forwardRef(({ aria, href, target = '_self', c
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/display.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PDisplay = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-display');
     const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PDisplay = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'pri
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/divider.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-divider');
     const propsToSync = [color, direction, orientation, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'contrast-low', direc
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/fieldset-wrapper.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
 const PFieldsetWrapper = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-fieldset-wrapper');
     const propsToSync = [label, labelSize, message, required, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PFieldsetWrapper = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/fieldset.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PFieldset = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-fieldset');
     const propsToSync = [label, labelSize, message, required, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PFieldset = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize = 'med
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/flex-item.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlexItem = /*#__PURE__*/ react.forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-flex-item');
     const propsToSync = [alignSelf, flex, grow, offset, shrink, width];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PFlexItem = /*#__PURE__*/ react.forwardRef(({ alignSelf = 'auto', flex = '
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/flex.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlex = /*#__PURE__*/ react.forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-flex');
     const propsToSync = [alignContent, alignItems, direction, inline, justifyContent, wrap];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PFlex = /*#__PURE__*/ react.forwardRef(({ alignContent = 'stretch', alignI
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/flyout-multilevel-item.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PFlyoutMultilevelItem = /*#__PURE__*/ react.forwardRef(({ cascade = false, identifier, label, primary = false, secondary = false, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-flyout-multilevel-item');
     const propsToSync = [cascade, identifier, label, primary, secondary];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PFlyoutMultilevelItem = /*#__PURE__*/ react.forwardRef(({ cascade = false,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/flyout-multilevel.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PFlyoutMultilevel = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-flyout-multilevel');
@@ -18,7 +18,6 @@ const PFlyoutMultilevel = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, ar
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/flyout.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
@@ -19,7 +19,6 @@ const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = f
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/grid-item.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGridItem = /*#__PURE__*/ react.forwardRef(({ offset = 0, size = 1, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-grid-item');
     const propsToSync = [offset, size];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PGridItem = /*#__PURE__*/ react.forwardRef(({ offset = 0, size = 1, classN
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/grid.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGrid = /*#__PURE__*/ react.forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-grid');
     const propsToSync = [direction, gutter, wrap];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PGrid = /*#__PURE__*/ react.forwardRef(({ direction = 'row', gutter = { ba
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/heading.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-heading');
     const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'pri
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/headline.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 const PHeadline = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme, variant = 'headline-1', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-headline');
     const propsToSync = [align, color, ellipsis, tag, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PHeadline = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'pr
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/icon.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', lazy, n
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/inline-notification.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-inline-notification');
@@ -18,7 +18,6 @@ const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arro
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/link-pure.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PLinkPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme, underline = false, weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-link-pure');
     const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme || hooks.useTheme(), underline, weight];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PLinkPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel =
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/link-social.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
 const PLinkSocial = /*#__PURE__*/ react.forwardRef(({ compact = false, hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-link-social');
     const propsToSync = [compact, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PLinkSocial = /*#__PURE__*/ react.forwardRef(({ compact = false, hideLabel
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/link-tile-model-signature.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PLinkTileModelSignature = /*#__PURE__*/ react.forwardRef(({ aspectRatio = '3/4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row', }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-link-tile-model-signature');
     const propsToSync = [aspectRatio, description, heading, headingTag, linkDirection, model, weight];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PLinkTileModelSignature = /*#__PURE__*/ react.forwardRef(({ aspectRatio =
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/link-tile-product.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PLinkTileProduct = /*#__PURE__*/ react.forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = hooks.usePrefix('p-link-tile-product');
     const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || hooks.useTheme()];
@@ -17,7 +17,6 @@ const PLinkTileProduct = /*#__PURE__*/ react.forwardRef(({ aspectRatio = '3:4',
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/link-tile.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PLinkTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-link-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PLinkTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, aspe
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/link.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PLink = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-link');
     const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PLink = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, download,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };