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

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

@@ -7,7 +7,7 @@ import { DSRLinkSocial } from '../dsr-components/link-social.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
 const PLinkSocial = /*#__PURE__*/ forwardRef(({ compact = false, hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-social');
     const propsToSync = [compact, hideLabel, href, icon, iconSource, rel, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ const PLinkSocial = /*#__PURE__*/ forwardRef(({ compact = false, hideLabel = fal
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-model-signature.wrapper.mjs

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRLinkTileModelSignature } from '../dsr-components/link-tile-model-signature.mjs';
 
 const PLinkTileModelSignature = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row', }, model = '911', weight = 'semi-bold', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-tile-model-signature');
     const propsToSync = [aspectRatio, description, heading, headingTag, linkDirection, model, weight];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PLinkTileModelSignature = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4',
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.wrapper.mjs

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRLinkTileProduct } from '../dsr-components/link-tile-product.mjs';
 
 const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = usePrefix('p-link-tile-product');
     const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || useTheme()];
@@ -26,7 +26,6 @@ const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', descri
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRLinkTile } from '../dsr-components/link-tile.mjs';
 
 const PLinkTile = /*#__PURE__*/ 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, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRati
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRLink } from '../dsr-components/link.mjs';
 
 const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link');
     const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || useTheme(), variant];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideL
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ import { DSRMarque } from '../dsr-components/marque.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
 const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-marque');
     const propsToSync = [aria, href, size, target, trademark, variant];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', tar
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRModal } from '../dsr-components/modal.mjs';
 
 const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
@@ -29,7 +29,6 @@ const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackd
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRModelSignature } from '../dsr-components/model-signature.mjs';
 
 const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-model-signature');
     const propsToSync = [color, fetchPriority, lazy, model, safeZone, size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPrio
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRMultiSelectOption } from '../dsr-components/multi-select-option.mjs';
 
 const PMultiSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-multi-select-option');
     const propsToSync = [disabled, value];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PMultiSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRMultiSelect } from '../dsr-components/multi-select.mjs';
 
 const PMultiSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-multi-select');
     const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
@@ -26,7 +26,6 @@ const PMultiSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = fa
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSROptgroup } from '../dsr-components/optgroup.mjs';
 
 const POptgroup = /*#__PURE__*/ forwardRef(({ disabled = false, label, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-optgroup');
     const propsToSync = [disabled, label];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const POptgroup = /*#__PURE__*/ forwardRef(({ disabled = false, label, className
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRPagination } from '../dsr-components/pagination.mjs';
 
 const PPagination = /*#__PURE__*/ forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'pageChange', onPageChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pagination');
@@ -26,7 +26,6 @@ const PPagination = /*#__PURE__*/ forwardRef(({ activePage = 1, allyLabel, allyL
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRPinCode } from '../dsr-components/pin-code.mjs';
 
 const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pin-code');
     const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), type, value];
@@ -26,7 +26,6 @@ const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRPopover } from '../dsr-components/popover.mjs';
 
 const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-popover');
     const propsToSync = [aria, description, direction, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bot
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRRadioButtonWrapper } from '../dsr-components/radio-button-wrapper.mjs';
 
 const PRadioButtonWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-radio-button-wrapper');
     const propsToSync = [hideLabel, label, loading, message, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PRadioButtonWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRScroller } from '../dsr-components/scroller.mjs';
 
 const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-scroller');
     const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', a
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ import { DSRSegmentedControlItem } from '../dsr-components/segmented-control-ite
 const PSegmentedControlItem = /*#__PURE__*/ forwardRef((
 // @ts-ignore
 { aria, disabled = false, icon, iconSource, label, value, className, children, selected, theme = 'light', ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-segmented-control-item');
     const propsToSync = [aria, disabled, icon, iconSource, label, value];
     useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PSegmentedControlItem = /*#__PURE__*/ forwardRef((
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRSegmentedControl } from '../dsr-components/segmented-control.mjs';
 
 const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', disabled = false, form, name, onSegmentedControlChange, onUpdate, theme, value, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
@@ -28,7 +28,6 @@ const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns =
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRSelectOption } from '../dsr-components/select-option.mjs';
 
 const PSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-select-option');
     const propsToSync = [disabled, value];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value, class
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRSelectWrapperDropdown } from '../dsr-components/select-wrapper-dropdown.mjs';
 
 const PSelectWrapperDropdown = /*#__PURE__*/ forwardRef(({ description, direction = 'auto', disabled = false, filter = false, isOpenOverride = false, label, message, onOpenChange, required = false, selectRef, state, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'openChange', onOpenChange);
     const WebComponentTag = usePrefix('p-select-wrapper-dropdown');
     const propsToSync = [description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme || useTheme()];
@@ -25,7 +25,6 @@ const PSelectWrapperDropdown = /*#__PURE__*/ forwardRef(({ description, directio
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRSelectWrapper } from '../dsr-components/select-wrapper.mjs';
 
 const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-select-wrapper');
     const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDir
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRSelect } from '../dsr-components/select.mjs';
 
 const PSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-select');
     const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
@@ -26,7 +26,6 @@ const PSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRSpinner } from '../dsr-components/spinner.mjs';
 
 const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-spinner');
     const propsToSync = [aria, size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -24,7 +24,6 @@ const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme, classN
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ import { DSRStepperHorizontalItem } from '../dsr-components/stepper-horizontal-i
 const PStepperHorizontalItem = /*#__PURE__*/ forwardRef((
 // @ts-ignore
 { disabled = false, state, className, children, theme = 'light', ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-stepper-horizontal-item');
     const propsToSync = [disabled, state];
     useBrowserLayoutEffect(() => {
@@ -28,7 +28,6 @@ const PStepperHorizontalItem = /*#__PURE__*/ forwardRef((
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRStepperHorizontal } from '../dsr-components/stepper-horizontal.mjs';
 
 const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'stepChange', onStepChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-stepper-horizontal');
@@ -27,7 +27,6 @@ const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, onUpdate, s
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRSwitch } from '../dsr-components/switch.mjs';
 
 const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-switch');
@@ -27,7 +27,6 @@ const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'end', checked = false,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTableBody } from '../dsr-components/table-body.mjs';
 
 const PTableBody = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-body');
     const props = {
         ...rest,
@@ -21,7 +21,6 @@ const PTableBody = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, r
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTableCell } from '../dsr-components/table-cell.mjs';
 
 const PTableCell = /*#__PURE__*/ forwardRef(({ multiline = false, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-cell');
     useBrowserLayoutEffect(() => {
         elementRef.current.multiline = multiline;
@@ -24,7 +24,6 @@ const PTableCell = /*#__PURE__*/ forwardRef(({ multiline = false, className, chi
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTableHeadCell } from '../dsr-components/table-head-cell.mjs';
 
 const PTableHeadCell = /*#__PURE__*/ forwardRef(({ hideLabel = false, multiline = false, sort, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-head-cell');
     const propsToSync = [hideLabel, multiline, sort];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ const PTableHeadCell = /*#__PURE__*/ forwardRef(({ hideLabel = false, multiline
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTableHeadRow } from '../dsr-components/table-head-row.mjs';
 
 const PTableHeadRow = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-head-row');
     const props = {
         ...rest,
@@ -21,7 +21,6 @@ const PTableHeadRow = /*#__PURE__*/ forwardRef(({ className, children, ...rest }
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTableHead } from '../dsr-components/table-head.mjs';
 
 const PTableHead = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-head');
     const props = {
         ...rest,
@@ -21,7 +21,6 @@ const PTableHead = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, r
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTableRow } from '../dsr-components/table-row.mjs';
 
 const PTableRow = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-row');
     const props = {
         ...rest,
@@ -21,7 +21,6 @@ const PTableRow = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, re
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTable } from '../dsr-components/table.mjs';
 
 const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, onUpdate, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'sortingChange', onSortingChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-table');
@@ -27,7 +27,6 @@ const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, onUpdate, t
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRTabsBar } from '../dsr-components/tabs-bar.mjs';
 
 const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
@@ -27,7 +27,6 @@ const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor = 'ba
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ import { DSRTabsItem } from '../dsr-components/tabs-item.mjs';
 const PTabsItem = /*#__PURE__*/ forwardRef((
 // @ts-ignore
 { label, className, children, theme = 'light', ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tabs-item');
     useBrowserLayoutEffect(() => {
         elementRef.current.label = label;
@@ -25,7 +25,6 @@ const PTabsItem = /*#__PURE__*/ forwardRef((
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };