@porsche-design-system/components-react 3.20.0-rc.0 → 3.20.0-rc.1

package/CHANGELOG.md

@@ -14,11 +14,31 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.20.0-rc.1] - 2024-10-24
+
+#### Added
+
+- React: better tree-shaking for `@porsche-design-system/components-react`
+  ([#3554](https://github.com/porsche-design-system/porsche-design-system/pull/3554))
+- `Icon`: `sidebar`
+  ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))
+
+#### Changed
+
+- `Canvas`: Improve UI and UX behaviour in Safari
+  ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))
+
+#### Fixed
+
+- `Flyout`: transition animation in Chrome Browser if `Flyout` has scrollable content
+  ([#3550](https://github.com/porsche-design-system/porsche-design-system/pull/3550))
+
 ### [3.20.0-rc.0] - 2024-10-18
 
 #### Added
 
 - `Icon`: `attachment`, `dislike`, `dislike-filled`, `like`, `like-filled`, `new-chat`
+  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))
 
 #### Changed
 

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PAccordion = react.forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
+const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButtonGroup = react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
+const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button-group');
     hooks.useBrowserLayoutEffect(() => {

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

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

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

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

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

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

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

@@ -6,13 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCanvas = react.forwardRef(({ sidebarEndIcon = 'menu-lines', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
+const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
+    hooks.useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = hooks.usePrefix('p-canvas');
-    const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || hooks.useTheme()];
+    const propsToSync = [sidebarEndOpen, sidebarStartOpen, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndIcon', 'sidebarEndOpen', 'sidebarStartIcon', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['sidebarEndOpen', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

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

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

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

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCheckbox = react.forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, ...rest }, ref) => {
+const PCheckbox = /*#__PURE__*/ react.forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

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

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

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCrest = react.forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
+const PCrest = /*#__PURE__*/ react.forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-crest');
     const propsToSync = [aria, href, target];

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutMultilevelItem = react.forwardRef(({ identifier, label, className, ...rest }, ref) => {
+const PFlyoutMultilevelItem = /*#__PURE__*/ react.forwardRef(({ identifier, label, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-flyout-multilevel-item');
     const propsToSync = [identifier, label];

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutMultilevel = react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PFlyoutMultilevel = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyout = react.forwardRef(({ aria, disableBackdropClick = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);

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

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

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

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

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

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

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

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

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

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

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, ...rest }, ref) => {
+const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);

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

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

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

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

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

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

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

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

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

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

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

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

package/cjs/lib/components/marque.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
-const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
+const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-marque');
     const propsToSync = [aria, href, size, target, trademark, variant];

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PModal = react.forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
+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();
     hooks.useEventCallback(elementRef, 'close', onClose);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PModelSignature = react.forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, ...rest }, ref) => {
+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 WebComponentTag = hooks.usePrefix('p-model-signature');
     const propsToSync = [color, fetchPriority, lazy, model, safeZone, size, theme || hooks.useTheme()];

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PMultiSelectOption = react.forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
+const PMultiSelectOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-multi-select-option');
     const propsToSync = [disabled, value];

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PMultiSelect = react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
+const PMultiSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-multi-select');

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const POptgroup = react.forwardRef(({ disabled = false, label, className, ...rest }, ref) => {
+const POptgroup = /*#__PURE__*/ react.forwardRef(({ disabled = false, label, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-optgroup');
     const propsToSync = [disabled, label];

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPagination = 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 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();
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPinCode = react.forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
+const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, 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();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pin-code');

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

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

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, ...rest }, ref) => {
+const PRadioButtonWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-radio-button-wrapper');
     const propsToSync = [hideLabel, label, loading, message, state, theme || hooks.useTheme()];

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
+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 WebComponentTag = hooks.usePrefix('p-scroller');
     const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || hooks.useTheme()];

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

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

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

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

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

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSelectWrapper = react.forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, ...rest }, ref) => {
+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 WebComponentTag = hooks.usePrefix('p-select-wrapper');
     const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme || hooks.useTheme()];

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSelect = react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-select');

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

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

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

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PStepperHorizontalItem = react.forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
+const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal-item');
     const propsToSync = [disabled, state];