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

package/esm/lib/components/flyout-multilevel-item.wrapper.d.ts

@@ -21,7 +21,7 @@ export type PFlyoutMultilevelItemProps = BaseProps & {
      */
     secondary?: boolean;
 };
-export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Private property set by the component itself.
      */

package/esm/lib/components/flyout-multilevel-item.wrapper.mjs

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

package/esm/lib/components/flyout-multilevel.wrapper.d.ts

@@ -26,7 +26,7 @@ export type PFlyoutMultilevelProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which flyout-multilevel-item to be visualized as opened.
      */

package/esm/lib/components/flyout-multilevel.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PFlyoutMultilevel = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-flyout-multilevel');
@@ -16,7 +16,6 @@ const PFlyoutMultilevel = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, on
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -38,7 +38,7 @@ export type PFlyoutProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PFlyout: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyout: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PFlyout = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
@@ -17,7 +17,6 @@ const PFlyout = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/grid-item.wrapper.d.ts

@@ -11,7 +11,7 @@ export type PGridItemProps = BaseProps & {
     size?: BreakpointCustomizable<GridItemSize>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PGridItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PGridItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */

package/esm/lib/components/grid-item.wrapper.mjs

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

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

@@ -16,7 +16,7 @@ export type PGridProps = BaseProps & {
     wrap?: BreakpointCustomizable<GridWrap>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PGrid: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PGrid: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */

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

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

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

@@ -26,7 +26,7 @@ export type PHeadingProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PHeading: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PHeading: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */

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

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

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

@@ -27,7 +27,7 @@ export type PHeadlineProps = BaseProps & {
     variant?: HeadlineVariant;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-export declare const PHeadline: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PHeadline: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */

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

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

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

@@ -31,7 +31,7 @@ export type PIconProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PIcon: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PIcon: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

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

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -50,7 +50,7 @@ export type PInlineNotificationProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PInlineNotification: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInlineNotification: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon of the inline-notification.
      */

package/esm/lib/components/inline-notification.wrapper.mjs

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

package/esm/lib/components/link-pure.wrapper.d.ts

@@ -63,7 +63,7 @@ export type PLinkPureProps = BaseProps & {
      */
     weight?: LinkPureWeight;
 };
-export declare const PLinkPure: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkPure: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Display link in active state.
      */

package/esm/lib/components/link-pure.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PLinkPure = /*#__PURE__*/ 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 = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-pure');
     const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme || useTheme(), underline, weight];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end'
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-social.wrapper.d.ts

@@ -35,7 +35,7 @@ export type PLinkSocialProps = BaseProps & {
     theme?: Theme;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-export declare const PLinkSocial: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkSocial: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays as compact version.
      */

package/esm/lib/components/link-social.wrapper.mjs

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.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, ...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(() => {
@@ -15,7 +15,6 @@ const PLinkSocial = /*#__PURE__*/ forwardRef(({ compact = false, hideLabel = fal
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-tile-model-signature.wrapper.d.ts

@@ -30,7 +30,7 @@ export type PLinkTileModelSignatureProps = BaseProps & {
      */
     weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
 };
-export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aspect ratio of the link-tile-model-signature.
      */

package/esm/lib/components/link-tile-model-signature.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const PLinkTileModelSignature = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row', }, model = '911', weight = 'semi-bold', className, ...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(() => {
@@ -14,7 +14,6 @@ const PLinkTileModelSignature = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4',
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-tile-product.wrapper.d.ts

@@ -50,7 +50,7 @@ export type PLinkTileProductProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aspect ratio of the link-tile-product.
      */

package/esm/lib/components/link-tile-product.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, ...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()];
@@ -15,7 +15,6 @@ const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', descri
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-tile.wrapper.d.ts

@@ -58,7 +58,7 @@ export type PLinkTileProps = BaseProps & {
      */
     weight?: BreakpointCustomizable<LinkTileWeight>;
 };
-export declare const PLinkTile: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkTile: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of link and description.
      */

package/esm/lib/components/link-tile.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.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, ...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(() => {
@@ -14,7 +14,6 @@ const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRati
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -46,7 +46,7 @@ export type PLinkProps = BaseProps & {
      */
     variant?: LinkVariant;
 };
-export declare const PLink: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLink: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...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(() => {
@@ -14,7 +14,6 @@ const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideL
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -27,7 +27,7 @@ export type PMarqueProps = BaseProps & {
     variant?: MarqueVariant;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
-export declare const PMarque: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PMarque: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.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(() => {
@@ -15,7 +15,6 @@ const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', tar
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -55,7 +55,7 @@ export type PModalProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PModal: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PModal: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
@@ -18,7 +18,6 @@ const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackd
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/model-signature.wrapper.d.ts

@@ -30,7 +30,7 @@ export type PModelSignatureProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PModelSignature: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PModelSignature: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Adapts the color of the component.
      */

package/esm/lib/components/model-signature.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, ...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(() => {
@@ -14,7 +14,6 @@ const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPrio
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/multi-select-option.wrapper.d.ts

@@ -9,7 +9,7 @@ export type PMultiSelectOptionProps = BaseProps & {
      */
     value: string;
 };
-export declare const PMultiSelectOption: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PMultiSelectOption: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the option.
      */

package/esm/lib/components/multi-select-option.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const PMultiSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-multi-select-option');
     const propsToSync = [disabled, value];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PMultiSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/multi-select.wrapper.d.ts

@@ -54,7 +54,7 @@ export type PMultiSelectProps = BaseProps & {
      */
     value?: string[];
 };
-export declare const PMultiSelect: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PMultiSelect: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.
      */

package/esm/lib/components/multi-select.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PMultiSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...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];
@@ -15,7 +15,6 @@ const PMultiSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = fa
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -9,7 +9,7 @@ export type POptgroupProps = BaseProps & {
      */
     label?: string;
 };
-export declare const POptgroup: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const POptgroup: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the optgroup.
      */