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

package/cjs/lib/components/marque.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-wordmark" instead. */
 const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-marque');
     const propsToSync = [aria, href, size, target, trademark, variant];
     hooks.useBrowserLayoutEffect(() => {
@@ -17,7 +17,6 @@ const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/modal.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PModal = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'close', onClose);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
@@ -20,7 +20,6 @@ const PModal = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', disabl
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PModelSignature = /*#__PURE__*/ react.forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-model-signature');
     const propsToSync = [color, fetchPriority, lazy, model, safeZone, size, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PModelSignature = /*#__PURE__*/ react.forwardRef(({ color = 'primary', fet
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/multi-select-option.wrapper.cjs

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

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PMultiSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-multi-select');
     const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
@@ -17,7 +17,6 @@ const PMultiSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disable
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/optgroup.wrapper.cjs

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

package/cjs/lib/components/pagination.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PPagination = /*#__PURE__*/ react.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 = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pagination');
@@ -18,7 +18,6 @@ const PPagination = /*#__PURE__*/ react.forwardRef(({ activePage = 1, allyLabel,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pin-code');
     const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
@@ -17,7 +17,6 @@ const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled =
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

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

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PRadioButtonWrapper = /*#__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-radio-button-wrapper');
     const propsToSync = [hideLabel, label, loading, message, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PRadioButtonWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-scroller');
     const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'cent
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef(({ aria, disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-segmented-control-item');
     const propsToSync = [aria, disabled, icon, iconSource, label, value];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef(({ aria, disabled =
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', disabled = false, form, name, onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
@@ -18,7 +18,6 @@ const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, col
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PSelectOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-select-option');
     const propsToSync = [disabled, value];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PSelectOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, value,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

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

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-select');
     const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
@@ -17,7 +17,6 @@ const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = f
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

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

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal-item');
     const propsToSync = [disabled, state];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = fals
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');
@@ -18,7 +18,6 @@ const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, onUpd
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-switch');
@@ -18,7 +18,6 @@ const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked =
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,11 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTableBody = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-body');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,14 +7,13 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTableCell = /*#__PURE__*/ react.forwardRef(({ multiline = false, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-cell');
     hooks.useBrowserLayoutEffect(() => {
         elementRef.current.multiline = multiline;
     }, [multiline]);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/table-head-cell.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTableHeadCell = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, multiline = false, sort, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-head-cell');
     const propsToSync = [hideLabel, multiline, sort];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PTableHeadCell = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, mult
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/table-head-row.wrapper.cjs

@@ -7,11 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTableHeadRow = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-head-row');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,11 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTableHead = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-head');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,11 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTableRow = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-row');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTable = /*#__PURE__*/ react.forwardRef(({ caption, onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
@@ -18,7 +18,6 @@ const PTable = /*#__PURE__*/ react.forwardRef(({ caption, onSortingChange, onUpd
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
@@ -18,7 +18,6 @@ const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColor
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

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

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
@@ -18,7 +18,6 @@ const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColo
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'background-surface', label, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag-dismissible');
     const propsToSync = [aria, color, label, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'backgro
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag');
     const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', com
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTextFieldWrapper = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', submitButton = true, theme, unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = hooks.usePrefix('p-text-field-wrapper');
     const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, submitButton, theme || hooks.useTheme(), unit, unitPosition];
@@ -17,7 +17,6 @@ const PTextFieldWrapper = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLo
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,11 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTextListItem = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-text-list-item');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 const PTextList = /*#__PURE__*/ react.forwardRef(({ listType, orderType, theme, type = 'unordered', className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-text-list');
     const propsToSync = [listType, orderType, theme || hooks.useTheme(), type];
     hooks.useBrowserLayoutEffect(() => {
@@ -16,7 +16,6 @@ const PTextList = /*#__PURE__*/ react.forwardRef(({ listType, orderType, theme,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

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