@porsche-design-system/components-react 3.1.0-rc.0 → 3.1.0-rc.2

package/ssr/components/dist/styles/esm/styles-entry.js

@@ -3816,6 +3816,24 @@ const getBackfaceVisibilityJssStyle = () => ({
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
 });
+/**
+ * Generates JSS styles for a frosted glass background.
+ * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
+ * @param {string} duration - The duration of the transition animation.
+ * @param {string} timingFn - The timing function of the transition animation. (default: 'cubic-bezier(.16,1,.3,1)')
+ * @returns {JssStyle} - The JSS styles for the frosted glass background.
+ */
+const getFrostedGlassBackgroundJssStyles = (isVisible, duration, timingFn = 'cubic-bezier(.16,1,.3,1)') => {
+    return {
+        // workaround via pseudo element to fix stacking (black) background in safari
+        '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading, pointerEvents: 'none' }), (isVisible
+            ? Object.assign({ opacity: 1 }, frostedGlassStyle) : {
+            opacity: 0,
+            backdropFilter: 'blur(0px)',
+            WebkitBackdropFilter: 'blur(0px)',
+        })), { transition: `opacity ${duration} ${timingFn}, backdrop-filter ${duration} ${timingFn}, --webkit-backdrop-filter ${duration} ${timingFn}` }),
+    };
+};
 
 const hostHiddenStyles = {
     '&([hidden])': {
@@ -3915,7 +3933,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$Y = (size, compact, open, theme) => {
+const getComponentCss$Z = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -3987,6 +4005,7 @@ const getComponentCss$Y = (size, compact, open, theme) => {
 
 const TOAST_Z_INDEX = 999999;
 const MODAL_Z_INDEX = 99999;
+const FLYOUT_Z_INDEX = 99998;
 const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 
@@ -3999,7 +4018,7 @@ const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}m
 const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
 const topBottomFallback = '56px';
-const getComponentCss$X = (isOpen) => {
+const getComponentCss$Y = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed', bottom: `var(${cssVariableBottom},${topBottomFallback})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), { borderRadius: borderRadiusSmall }), (isOpen
@@ -4038,7 +4057,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$W = (direction) => {
+const getComponentCss$X = (direction) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4111,7 +4130,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     }));
 };
 
-const getComponentCss$V = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$W = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), Object.assign({ root: {
             appearance: 'none',
@@ -4234,7 +4253,7 @@ align, compact, hasGradient, isDisabled) => {
     }));
 };
 
-const getComponentCss$U = (isDisabledOrLoading, ...args) => {
+const getComponentCss$V = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss(Object.assign(Object.assign({}, buttonLinkTileStyles), { root: Object.assign(Object.assign({}, buttonLinkTileStyles.root), { cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer' }) }));
 };
@@ -4306,7 +4325,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$T = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$U = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
@@ -4345,7 +4364,7 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
+const getComponentCss$T = (width, hasPagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
@@ -4506,7 +4525,7 @@ const getInlineSVGBackgroundImage = (path) => {
     return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
 };
 
-const getComponentCss$R = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$S = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -4548,7 +4567,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$Q = (width) => {
+const getComponentCss$R = (width) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4581,7 +4600,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$P = () => {
+const getComponentCss$Q = () => {
     return getCss({
         '@global': {
             ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, boxSizing: 'content-box' }, getDimensionStyle), hostHiddenStyles))),
@@ -4637,7 +4656,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$O = (size, align, color, ellipsis, theme) => {
+const getComponentCss$P = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4651,7 +4670,7 @@ const getComponentCss$O = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$N = (color, orientation, theme) => {
+const getComponentCss$O = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const colorMap = {
         'contrast-low': contrastLowColor,
@@ -4666,7 +4685,7 @@ const getComponentCss$N = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$N = (state, labelSize, hasLabel, theme) => {
     return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
                 margin: 0,
                 padding: 0,
@@ -4680,7 +4699,7 @@ const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
     })));
 };
 
-const getComponentCss$L = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
     return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
                 margin: 0,
                 padding: 0,
@@ -4704,7 +4723,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$K = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$L = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
@@ -4722,7 +4741,7 @@ const getComponentCss$K = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$J = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$K = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
@@ -4740,6 +4759,74 @@ const getComponentCss$J = (inline, wrap, direction, justifyContent, alignItems,
     });
 };
 
+const flyoutBoxShadowColor = 'rgba(204, 204, 204, 0.35)';
+const flyoutBoxShadowColorDark = 'rgba(0, 0, 0, 0.6)';
+const headerShadowClass = 'header--shadow';
+const footerShadowClass = 'footer--shadow';
+const flyoutTransitionDuration = '0.5s';
+const flyoutTransitionTimingFunction = 'cubic-bezier(0.77, 0, 0.175, 1)';
+const cssVariableMaxWidth = '--p-flyout-max-width';
+const maxWidthDefault = '1180px';
+const minWidthDefault = '320px';
+const getComponentCss$J = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+    const { primaryColor, backgroundColor } = getThemedColors(theme);
+    const { contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
+    const isPositionLeft = position === 'left';
+    const contentPadding = `${spacingStaticMedium} ${spacingFluidLarge} ${spacingStaticMedium} ${spacingFluidLarge}`;
+    const shadowColor = isThemeDark(theme) ? flyoutBoxShadowColorDark : flyoutBoxShadowColor;
+    const transparentColor = isThemeDark(theme) ? 'rgba(14, 14, 18, 0)' : 'rgba(255, 255, 255, 0)';
+    return getCss(Object.assign(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule({
+            ':host': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'fixed', zIndex: FLYOUT_Z_INDEX }, (isOpen
+                ? {
+                    visibility: 'inherit',
+                }
+                : {
+                    visibility: 'hidden',
+                    transition: `visibility 0s linear ${flyoutTransitionDuration}`,
+                })), getInsetJssStyle()), getFrostedGlassBackgroundJssStyles(isOpen, flyoutTransitionDuration)), hostHiddenStyles),
+        }), header: Object.assign(Object.assign({ display: 'flex' }, (hasHeader && {
+            flexDirection: 'row-reverse',
+        })), { justifyContent: 'flex-end', background: backgroundColor, position: 'sticky', top: 0 }), [`${headerShadowClass}`]: {
+            boxShadow: `${isThemeDark(theme) ? flyoutBoxShadowColorDark : flyoutBoxShadowColor} 0px 5px 10px`,
+        } }, (hasHeader && {
+        'header-content': {
+            flex: 'auto',
+            padding: `${spacingStaticMedium} 0 ${spacingStaticMedium} ${spacingFluidLarge}`,
+        },
+    })), { dismiss: Object.assign({ margin: spacingStaticMedium, height: 'fit-content', border: `2px solid ${backgroundColor}`, borderRadius: '4px', background: backgroundColor }, hoverMediaQuery({
+            '&:hover': {
+                background: darkThemeContrastHighColor,
+                borderColor: darkThemeContrastHighColor,
+            },
+        })), root: Object.assign(Object.assign({ color: primaryColor, display: 'flex', flexDirection: 'column', position: 'relative', [isPositionLeft ? 'marginRight' : 'marginLeft']: 'auto', boxSizing: 'border-box' }, (hasSubFooter && {
+            overflowY: 'auto',
+            overscrollBehaviorY: 'none',
+        })), { height: '100%', minWidth: minWidthDefault, maxWidth: `var(${cssVariableMaxWidth}, ${maxWidthDefault})`, background: backgroundColor, opacity: isOpen ? 1 : 0, transform: isOpen ? 'initial' : `translate3d(${isPositionLeft ? '-100%' : '100%'}, 0, 0)`, transition: `opacity ${flyoutTransitionDuration} ${flyoutTransitionTimingFunction} ${isOpen ? '0s' : flyoutTransitionDuration}, transform ${flyoutTransitionDuration} ${flyoutTransitionTimingFunction}`, boxShadow: `${isPositionLeft ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)` }), content: Object.assign({ padding: contentPadding }, (!hasSubFooter && {
+            overflowY: 'auto',
+            WebkitOverflowScrolling: 'touch',
+            backgroundImage: `linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${shadowColor}, ${transparentColor}), linear-gradient(to bottom, ${shadowColor}, ${transparentColor})`,
+            backgroundPosition: 'bottom center, top center, bottom center, top center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 20px, 100% 20px, 100% 10px, 100% 10px',
+            backgroundAttachment: 'local, local, scroll, scroll',
+            overscrollBehaviorY: 'none',
+        })) }), (hasFooter && {
+        footer: {
+            background: backgroundColor,
+            padding: contentPadding,
+            position: 'sticky',
+            bottom: 0,
+        },
+        [`${footerShadowClass}`]: {
+            boxShadow: `${isThemeDark(theme) ? flyoutBoxShadowColorDark : flyoutBoxShadowColor} 0px -5px 10px`,
+        },
+    })), (hasSubFooter && {
+        ['sub-footer']: {
+            padding: contentPadding,
+        },
+    })));
+};
+
 const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
@@ -5043,6 +5130,7 @@ const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAncho
 };
 
 // array is redefined instead of using the one from in model-signature
+// because it is created via Object.keys(MODEL_SIGNATURES_MANIFEST) would bundle the entire manifest into both chunks
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getComponentCss$A = (aspectRatio, weight, direction, hasDescription) => {
@@ -5150,14 +5238,7 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) =>
                 : {
                     visibility: 'hidden',
                     transition: 'visibility 0s linear .2s',
-                })), hostHiddenStyles), { 
-                // workaround via pseudo element to fix stacking (black) background in safari
-                '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading, pointerEvents: 'none' }), (isOpen
-                    ? Object.assign({ opacity: 1 }, frostedGlassStyle) : {
-                    opacity: 0,
-                    backdropFilter: 'blur(0px)',
-                    WebkitBackdropFilter: 'blur(0px)',
-                })), { transition: `opacity ${duration} ${transitionTimingFunction}, backdrop-filter ${duration} ${transitionTimingFunction},--webkit-backdrop-filter ${duration} ${transitionTimingFunction}` }) }))), { overflowY: 'auto' }),
+                })), hostHiddenStyles), getFrostedGlassBackgroundJssStyles(isOpen, duration)))), { overflowY: 'auto' }),
             '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
                 [`&(.${stretchToFullModalWidthClassName}`]: {
                     '&:first-child)': {
@@ -5629,8 +5710,8 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
 };
 
 const OPTION_HEIGHT = 40; // optgroups are higher and ignored
-const getComponentCss$p = (isDisabled, native, hideLabel, state, theme) => {
-    return getCss(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule(Object.assign({ ':host': Object.assign({ display: 'block' }, hostHiddenStyles) }, getBaseChildStyles('select', state, theme, Object.assign({ position: 'static', zIndex: 0, cursor: 'pointer', padding: `8px calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2) 8px ${spacingStaticMedium}` }, (!native && !isDisabled && { borderColor: 'transparent' }))))), root: {
+const getComponentCss$p = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
+    return getCss(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule(Object.assign({ ':host': Object.assign({ display: 'block' }, hostHiddenStyles) }, getBaseChildStyles('select', state, theme, Object.assign({ position: 'static', zIndex: 0, cursor: 'pointer', padding: `8px calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2) 8px ${spacingStaticMedium}` }, (hasCustomDropdown && !isDisabled && { borderColor: 'transparent' }))))), root: {
             display: 'block',
             position: 'relative',
         } }, getLabelStyles('select', isDisabled, hideLabel, state, theme, {
@@ -6153,12 +6234,7 @@ const getComponentCss$b = (theme) => {
     const { primaryColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'block', position: 'relative', color: primaryColor }, hostHiddenStyles), { outline: 0, '&::before': Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), '&(:focus)::before': {
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    borderRadius: borderRadiusSmall,
-                }, '&(:focus:not(:focus-visible))::before': {
-                    borderColor: 'transparent',
-                } })),
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'block', position: 'relative', color: primaryColor }, hostHiddenStyles), { outline: 0, '&(:focus:focus-visible)::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }) })),
         },
     });
 };
@@ -6304,14 +6380,14 @@ const getButtonOrIconOffsetHorizontal = (buttonOrIconAmount) => {
     const multiplier = buttonOrIconAmount > 1 ? ` + ${buttonOrIconSize} * ${buttonOrIconAmount - 1}` : '';
     return `calc(${buttonOrIconOffset} + ${borderWidthBase}${multiplier})`;
 };
-const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, isWithinForm, theme) => {
+const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
     const isNumber = isType(inputType, 'number');
     const isCalendar = isType(inputType, 'date') || isType(inputType, 'week') || isType(inputType, 'month');
     const isTime = isType(inputType, 'time');
-    const isSearchOrPassword = isSearch || isPassword;
+    const isSearchOrPassword = isSearch || (isPassword && showPasswordToggle);
     const isSearchWithoutForm = isSearch && !isWithinForm;
     const isSearchWithForm = isSearch && isWithinForm;
     const isCalendarOrTimeWithCustomIndicator = showCustomCalendarOrTimeIndicator(isCalendar, isTime);
@@ -6518,22 +6594,23 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$Y;
-exports.getBannerCss = getComponentCss$X;
-exports.getButtonCss = getComponentCss$T;
-exports.getButtonGroupCss = getComponentCss$W;
-exports.getButtonPureCss = getComponentCss$V;
-exports.getButtonTileCss = getComponentCss$U;
-exports.getCarouselCss = getComponentCss$S;
-exports.getCheckboxWrapperCss = getComponentCss$R;
-exports.getContentWrapperCss = getComponentCss$Q;
-exports.getCrestCss = getComponentCss$P;
-exports.getDisplayCss = getComponentCss$O;
-exports.getDividerCss = getComponentCss$N;
-exports.getFieldsetCss = getComponentCss$L;
-exports.getFieldsetWrapperCss = getComponentCss$M;
-exports.getFlexCss = getComponentCss$J;
-exports.getFlexItemCss = getComponentCss$K;
+exports.getAccordionCss = getComponentCss$Z;
+exports.getBannerCss = getComponentCss$Y;
+exports.getButtonCss = getComponentCss$U;
+exports.getButtonGroupCss = getComponentCss$X;
+exports.getButtonPureCss = getComponentCss$W;
+exports.getButtonTileCss = getComponentCss$V;
+exports.getCarouselCss = getComponentCss$T;
+exports.getCheckboxWrapperCss = getComponentCss$S;
+exports.getContentWrapperCss = getComponentCss$R;
+exports.getCrestCss = getComponentCss$Q;
+exports.getDisplayCss = getComponentCss$P;
+exports.getDividerCss = getComponentCss$O;
+exports.getFieldsetCss = getComponentCss$M;
+exports.getFieldsetWrapperCss = getComponentCss$N;
+exports.getFlexCss = getComponentCss$K;
+exports.getFlexItemCss = getComponentCss$L;
+exports.getFlyoutCss = getComponentCss$J;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
 exports.getGridCss = getComponentCss$H;

package/ssr/components/dist/utils/esm/utils-entry.js

@@ -3686,7 +3686,7 @@ getMediaQueryMin('xxl');
 typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert');
 
 const CDN_BASE_URL$3 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/crest';
-const CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.min.c7a5c86ffd55b1d0d332c94a795b1928@1x.png", "webp": "porsche-crest.min.99bed7254e46aa46a8391f715158a5fc@1x.webp" }, "2x": { "png": "porsche-crest.min.ac5bd967d27623d356c7864f697bf01a@2x.png", "webp": "porsche-crest.min.3abd4612f0e0d8dc7e56d8f236a7b338@2x.webp" }, "3x": { "png": "porsche-crest.min.3c189f2d4ba0c1a579ef61b309de4825@3x.png", "webp": "porsche-crest.min.01315546293a6bce3814304a1c8ad162@3x.webp" } } };
+const CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.min.d76137cf8cf94822b7aedb534ba88418@1x.png", "webp": "porsche-crest.min.0d0cc89ae5ee57c4c15bd0dbbcbfe5d0@1x.webp" }, "2x": { "png": "porsche-crest.min.8a292fbd35a5155789ddd011585e05c4@2x.png", "webp": "porsche-crest.min.2245c45e99be5a46b4b56e73c43d5c63@2x.webp" }, "3x": { "png": "porsche-crest.min.18d6f02003b0829bac939fade88fd4e6@3x.png", "webp": "porsche-crest.min.19b429278b158b5cb5aa6ce80751e3fe@3x.webp" } } };
 const crestCdnBaseUrl = CDN_BASE_URL$3 ;
 const crestInnerManifest = CRESTS_MANIFEST.porscheCrest;
 const buildCrestSrcSet = (format) => {
@@ -3758,7 +3758,7 @@ const getHeadlineTagType = (host, variant, tag) => {
 };
 
 const CDN_BASE_URL$2 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/icons';
-const ICONS_MANIFEST = { "360": "360.min.5f2fcac02969bc425484fe8d80e5a1c9.svg", "accessibility": "accessibility.min.295a9d53a11c42212b8cce594982dfd2.svg", "active-cabin-ventilation": "active-cabin-ventilation.min.030c46def7a7397091d920b65bc0da3c.svg", "add": "add.min.8578a2d10c79a78e398e963b506b6cb5.svg", "adjust": "adjust.min.cdb89f5c161a4c82328fe60e72a88c59.svg", "arrow-double-down": "arrow-double-down.min.3b17923187ef2114d1f17da042fc97ca.svg", "arrow-double-left": "arrow-double-left.min.bba22e26f025c439b600bf74f0566465.svg", "arrow-double-right": "arrow-double-right.min.14f743d4adb5467fc0e95ac7f6426e1f.svg", "arrow-double-up": "arrow-double-up.min.8e3b3e31d227366f916c91dcb6e1b466.svg", "arrow-down": "arrow-down.min.84e69acc6554637cc373b8a4f50ba991.svg", "arrow-first": "arrow-first.min.bc51317ecf4953a664870ebab5059775.svg", "arrow-head-down": "arrow-head-down.min.454c189f4914925447670d0ae9bd2043.svg", "arrow-head-left": "arrow-head-left.min.aa2da7b4dbbb8a28c046592290054e94.svg", "arrow-head-right": "arrow-head-right.min.fb602ae5cb51970770570a70287e77e9.svg", "arrow-head-up": "arrow-head-up.min.2c282619214e4f998e1ac64a61b5545b.svg", "arrow-last": "arrow-last.min.72553c4284717d4961f8bcf8d51e0303.svg", "arrow-left": "arrow-left.min.24e8467ef0f8f206f228a3d8d443d70b.svg", "arrow-right": "arrow-right.min.8fb7b42d2d08d60f918602aa28475c0b.svg", "arrow-up": "arrow-up.min.0bc737f7f2cc56ef65c5d33472e014b0.svg", "augmented-reality": "augmented-reality.min.290ff033e35774fd093e1ab8ed07e10f.svg", "battery-empty": "battery-empty.min.8594e37d3e67a95b85eb9935f02e69cf.svg", "battery-full": "battery-full.min.4c75acb5a64a6dd3116ede7b1859a6d6.svg", "bell": "bell.min.d69dc9a220dec323e758ccbff756b5b5.svg", "bookmark": "bookmark.min.0cb177c79674593133f6d3d384c5df4b.svg", "broadcast": "broadcast.min.edbfac03d4afdc964d350f54df79c6f3.svg", "calculator": "calculator.min.2518729352d3709e488e71dcbf449247.svg", "calendar": "calendar.min.588fabe880634ece974291f5adfee50d.svg", "camera": "camera.min.10af3a4fac8c289775390534a50606d0.svg", "car": "car.min.4eeec04c87a14bb5d3d316eeeee0185b.svg", "car-battery": "car-battery.min.2a619bbd456ad531c922bf8f51b70977.svg", "card": "card.min.06394222c7ca5d6c7e783d6f86f030a6.svg", "charging-active": "charging-active.min.915410d626a52a3a76b6bf498491c255.svg", "charging-state": "charging-state.min.c5cb87ef2808f824f352a6ebd9b9d4a9.svg", "charging-station": "charging-station.min.211fcf0f9a9bb50b6e83482ee588dda9.svg", "chart": "chart.min.267e23c07f47784c186c5119b870df76.svg", "chat": "chat.min.a8a52d1b8b463ee0e5a3b0d812c9a40c.svg", "check": "check.min.0cb26d9a5ee1d217e5054f1ad60ae3b4.svg", "city": "city.min.a99b88b51adda8244a2c72953a2f4ab4.svg", "climate": "climate.min.5d52b2880552275d9032afc0fa2b7296.svg", "climate-control": "climate-control.min.152235d2bf2b7ec6e1a3c40e6971c446.svg", "clock": "clock.min.bcea9f182e1fe861ea6e765650f79b38.svg", "close": "close.min.eefab6ef191882058f9ed548bd5a467e.svg", "closed-caption": "closed-caption.min.b93ac43c07223fda14249d2279823f6a.svg", "co2-emission": "co2-emission.min.788590454baa0f6c52dfc99a55fe0b85.svg", "compare": "compare.min.657a924ca48bf93d200d2e6539fa8050.svg", "configurate": "configurate.min.2d137bc6f43ee03587188b571c97aacd.svg", "country-road": "country-road.min.3ee2c1be9d063f5d7c5772fcc7ae2568.svg", "cubic-capacity": "cubic-capacity.min.b5df863671bdf059bce19eddc2990698.svg", "delete": "delete.min.fd9788c3a0842a7bb1d737c6de1969d1.svg", "disable": "disable.min.c3d85d4ed9738c077d19e524775dbd56.svg", "document": "document.min.d2db26d7049ab2180361c7ce40f52d57.svg", "download": "download.min.d7c63bcbadf4dd5b14c3c79a438d93f3.svg", "duration": "duration.min.9405be759f64c8253076f7e55c80c336.svg", "edit": "edit.min.06bde2175fafb58233fa1ce6d3d00f83.svg", "email": "email.min.eb8ff02812a48c5098d3c40614e8d9d7.svg", "error-filled": "error-filled.min.35d7da7cb866bcfd3a25859f8cd2246b.svg", "exclamation": "exclamation.min.6ca46945978bd4eb2a40dc29766b1882.svg", "external": "external.min.b804bef35446f6b3cb379c121de3f13d.svg", "filter": "filter.min.60f168332c7550dfdf714ed0507877b0.svg", "flash": "flash.min.e5a6de1239300a6104076ee67aec42ca.svg", "fuel-station": "fuel-station.min.0155159076984cccdbfe854eb4da3720.svg", "garage": "garage.min.463577e6a1ffac592b5aa7bec9a82d39.svg", "gift": "gift.min.eeb1a5871a4008bcafd9495fe11ec9bc.svg", "globe": "globe.min.50fd2c886a822673902bd106efc73c3f.svg", "grid": "grid.min.c36c5015115005dcb9c948f07af0be80.svg", "highway": "highway.min.ea773dcf33a43fa8e82beae96c1222b7.svg", "home": "home.min.2bdc01bb7c9b39fa5ef5a81c8c3f9f49.svg", "horn": "horn.min.77105eb430a033a3ffdf21f9fecd32de.svg", "image": "image.min.851c64681e1950312a934a723ca04a85.svg", "increase": "increase.min.45bfe421e86192da37c8cca4917c10c2.svg", "information": "information.min.d387e44cc786ca3df3702f429518a1d9.svg", "information-filled": "information-filled.min.1055e842bb7d89c061ff1b5f47ed6169.svg", "key": "key.min.37b5e8ff9fda430f855f4b82bfd03485.svg", "leaf": "leaf.min.ea91b1d04ade4c49640e89ade35c9d90.svg", "leather": "leather.min.ef9e664d2fc3c28171fbd3d93b079503.svg", "light": "light.min.5fa3dd77ee9c63e28614c4c7c4a6d39c.svg", "list": "list.min.ecaeee96ec6cf2f8c9028ea404113a9e.svg", "locate": "locate.min.c28bdf292bbf297eb8109a272e2ffb91.svg", "lock": "lock.min.d258c21c7217cd1342307c45ecd5176e.svg", "lock-open": "lock-open.min.2ef427e273635e3aab7601b0fe92e86e.svg", "logo-apple-podcast": "logo-apple-podcast.min.af7a1f162ae9d6dba90fe155d8688b9c.svg", "logo-baidu": "logo-baidu.min.a8eb57b32e616b21820d86882835fe20.svg", "logo-delicious": "logo-delicious.min.fc2927d4979ffaed1f23160091e0975e.svg", "logo-digg": "logo-digg.min.d7340b3f22cf4a22a8ac3b472c16e0e2.svg", "logo-facebook": "logo-facebook.min.0c2e020d0b61d37e76e6bab67e4d149e.svg", "logo-foursquare": "logo-foursquare.min.b2699d993d9d731892ba01874c0e023d.svg", "logo-gmail": "logo-gmail.min.0c14069d86c2ba0a42c726d96f0cae9c.svg", "logo-google": "logo-google.min.c1f3931d74e40e5cdc875236b7e674a1.svg", "logo-hatena": "logo-hatena.min.021834899da6e6f6a9dd963f4fc3337c.svg", "logo-instagram": "logo-instagram.min.2f8c578e2472dc13b2f0ec8d1b936442.svg", "logo-kaixin": "logo-kaixin.min.8fb995689a3442669df37b5f375922fc.svg", "logo-kakaotalk": "logo-kakaotalk.min.988146b4cd8bced103fd8b5a9be064d8.svg", "logo-linkedin": "logo-linkedin.min.e4848fd4b74404e504fd1a4d5a25b960.svg", "logo-naver": "logo-naver.min.13f97e4c3ad4898d169904caa609f2d0.svg", "logo-pinterest": "logo-pinterest.min.101284bac1d7cf468719fccf416069df.svg", "logo-qq": "logo-qq.min.5d89ab35e4e00e81deadaa2fe0d51a5d.svg", "logo-qq-share": "logo-qq-share.min.01da8f9d6665f4529f349f88b4fb0cfc.svg", "logo-reddit": "logo-reddit.min.40dd42ee1368dbc74611afee4d3c9850.svg", "logo-skyrock": "logo-skyrock.min.9440a0e4a088cdfbfcc99bc91010768a.svg", "logo-sohu": "logo-sohu.min.d7a030336d712a2b44982e65071cd2bc.svg", "logo-spotify": "logo-spotify.min.48fb45730d66998420f8760b6d2f7fcc.svg", "logo-tecent": "logo-tecent.min.fd1ec329327f4cbf5706c393df66af9d.svg", "logo-telegram": "logo-telegram.min.624fca36dd6f6c5b64bce6e617372d77.svg", "logo-tiktok": "logo-tiktok.min.9c5ffad4c76353afaa99feca9e4f2f0a.svg", "logo-tumblr": "logo-tumblr.min.9b77d06b659cee9d5f45015c33c23967.svg", "logo-twitter": "logo-twitter.min.ac4d6b189cd2a47e4fac75bedb76b5bd.svg", "logo-viber": "logo-viber.min.330fbae7d2683b7910d828cbe864f738.svg", "logo-vk": "logo-vk.min.727ba204a194c8cf1b7fc389ac1db14b.svg", "logo-wechat": "logo-wechat.min.0392ff30f188aa9f52480e965142474a.svg", "logo-weibo": "logo-weibo.min.3ded49004baea42d85fa6fcb9d79ccb1.svg", "logo-whatsapp": "logo-whatsapp.min.02c83d3cbde89763eee8fc3bcab02257.svg", "logo-xing": "logo-xing.min.6a5f5fde119a841823d0ef05293b3454.svg", "logo-yahoo": "logo-yahoo.min.622e886e777c08cf80c31dc99ca13f1a.svg", "logo-youku": "logo-youku.min.d35a5283c6d3094748f565c729f56d9f.svg", "logo-youtube": "logo-youtube.min.59c939904cbec0c7793289eb5e68cb99.svg", "logout": "logout.min.aa54756e3aec12f347fdec0a2905a232.svg", "map": "map.min.643551801bfc27a93438c30ebe1d1387.svg", "menu-dots-horizontal": "menu-dots-horizontal.min.94e0804e3a5a30a577cab6296ad8d15d.svg", "menu-dots-vertical": "menu-dots-vertical.min.7ec3f5be33dd3459d7a9bed9fdbe22d3.svg", "menu-lines": "menu-lines.min.30ff09f6e2ce846286dd136279636097.svg", "minus": "minus.min.00cca11ec9ce4bd913abba2059c3f10b.svg", "mobile": "mobile.min.71d3c0d7fb4349383562cc233478f7fb.svg", "moon": "moon.min.5c447b4013210e7c7723ca4b6fdbfa9f.svg", "oil-can": "oil-can.min.31978141ee5529f97833027b1e03294a.svg", "parking-brake": "parking-brake.min.f03105e84898f1db02c6fcbdd008bfcf.svg", "parking-light": "parking-light.min.968af68684df1220b15cff6616e8376e.svg", "pause": "pause.min.dd29b256b73311abf1549ed16fe7a47b.svg", "phone": "phone.min.e1a58c454ffe074b30a5bb16c75ff23f.svg", "pin": "pin.min.c6ce5ea394fd9cf9dca80a592e2aeae4.svg", "pin-filled": "pin-filled.min.e47cf748ce9a27ced935c6b6cf4c59f1.svg", "play": "play.min.703fb2dbebac16ea91a6524914626ae2.svg", "plug": "plug.min.02d79b2702ac5c41020b54bd9eedf523.svg", "plus": "plus.min.dd34f71292a547080b9247a72c1adda2.svg", "preheating": "preheating.min.96ccdd3d24b0634ca820dc894894a34d.svg", "printer": "printer.min.bcd50214772a8fcc1d0f0ae1205610bf.svg", "purchase": "purchase.min.70535cff1a085154ab49ab958fe91aae.svg", "push-pin": "push-pin.min.7cec1084d78eb838957424d8ed62ecf5.svg", "push-pin-off": "push-pin-off.min.de81e394f6d02de580d4408070986097.svg", "qr": "qr.min.1facfc2c9b70057552904fe123674746.svg", "question": "question.min.df469b72598d2dbfb458c46430c0690a.svg", "racing-flag": "racing-flag.min.1aee1d177d44aaaca113a8b7a81db573.svg", "refresh": "refresh.min.36ced59c8e8d06980d6ac20cca8a9057.svg", "replay": "replay.min.d4f212bf3d5f8fe166d78dba57eeacde.svg", "reset": "reset.min.e1ce71f684b6e83b9ed8182389bd407f.svg", "route": "route.min.49f1935d2a563b150bb382eb56a04972.svg", "rss": "rss.min.eaf3873673fcbff72833e7a77f9510f8.svg", "save": "save.min.6506e50ad89aee223e85fe52242c232e.svg", "screen": "screen.min.c17978f44a7bf9f7d80f178fd2b7d116.svg", "search": "search.min.f2755d61c24b6ad037f51d65588be308.svg", "send": "send.min.544f2b90e562b8582808f735846b1351.svg", "share": "share.min.b7b59aa7085cc865735acfd940480234.svg", "shopping-bag": "shopping-bag.min.9d99682e614f5bbb9760c1a0272bd1e0.svg", "shopping-bag-filled": "shopping-bag-filled.min.566efdc835446512c426a9ef5e3badb0.svg", "shopping-cart": "shopping-cart.min.05a6c651afb21246daba2e941e8366cc.svg", "shopping-cart-filled": "shopping-cart-filled.min.c166601be618e0aadd596b54785f18f2.svg", "sidelights": "sidelights.min.996d591ee87247eae32968bf0b588d1e.svg", "snowflake": "snowflake.min.cf85d1b3c62e223ffb80d8c838d4f0b8.svg", "sort": "sort.min.d90a6657569305b9b09b0c6997b5b915.svg", "stack": "stack.min.d36295767f8e2540bbbf60278114ca09.svg", "star": "star.min.d7445429f599f915661e6c57841ae339.svg", "steering-wheel": "steering-wheel.min.c632bf7d06f41d68f0a95d76615f3981.svg", "stopwatch": "stopwatch.min.c90f1fde0961349fe79c0b077f7b0d41.svg", "subtract": "subtract.min.bb9f2dcb0c81ac7f216f6fe2ba916c09.svg", "success": "success.min.4401a4715549bd7dfaaa4f54684b2088.svg", "success-filled": "success-filled.min.c9cb3c66aebf9c4f40b897064f901335.svg", "sun": "sun.min.a68eb6225965558e4498d3d38c33d52a.svg", "switch": "switch.min.ab6c8b55ab119d9bd5170a1893a75ed2.svg", "tablet": "tablet.min.60e7c4ef821bf610d2b2d5b06c7e88b7.svg", "tachometer": "tachometer.min.348f8c5eed7c61993a864ebcffee98bd.svg", "truck": "truck.min.43f91b0320003695d8804cf6a8a86da4.svg", "upload": "upload.min.cf3aaf8fb27e339d26133cbd6a5332ca.svg", "user": "user.min.0f8dcfbe34322e7968b4b23e11d963f0.svg", "user-filled": "user-filled.min.aa7b4c61ce78e08ba35fb513ff9e19dd.svg", "user-group": "user-group.min.87f6ca16e7174b9a8d1894283a8ff1d4.svg", "user-manual": "user-manual.min.0b87e500e3d747e67be964c47a3ae312.svg", "video": "video.min.107dfd64c6fd7398dd48b94d61b2fe11.svg", "view": "view.min.cd78cae7309f44d941e9264047e3efa0.svg", "view-off": "view-off.min.e27746517bdb4c2c9ae5f025c7e74991.svg", "volume-off": "volume-off.min.711d24824df04d61c3129bbdcdbfa083.svg", "volume-up": "volume-up.min.0a2ebc984c6b9d2f53c747f9ba2028f1.svg", "warning": "warning.min.04529c502dddce98f0ae2eec0bfb3432.svg", "warning-filled": "warning-filled.min.ee8effcdc653f660043f909b6f0c938b.svg", "weight": "weight.min.47ef0b98ca8ed590dd7d6e6c3f1bcd46.svg", "wifi": "wifi.min.14540859e9241374bd9d0c89eb85667b.svg", "work": "work.min.d17986d8fcff6a5fcd5e9925e838fade.svg", "wrench": "wrench.min.90e402dc170fe83de23e2c11588ba037.svg", "wrenches": "wrenches.min.990b074555825a218e86fd35397fc88c.svg", "zoom-in": "zoom-in.min.22fa9d7ee8748debc801fe910f2d3d01.svg", "zoom-out": "zoom-out.min.9408a4dc5786ed5a783a729e58ab3d6d.svg" };
+const ICONS_MANIFEST = { "360": "360.min.5f2fcac02969bc425484fe8d80e5a1c9.svg", "accessibility": "accessibility.min.295a9d53a11c42212b8cce594982dfd2.svg", "active-cabin-ventilation": "active-cabin-ventilation.min.030c46def7a7397091d920b65bc0da3c.svg", "add": "add.min.8578a2d10c79a78e398e963b506b6cb5.svg", "adjust": "adjust.min.cdb89f5c161a4c82328fe60e72a88c59.svg", "arrow-double-down": "arrow-double-down.min.3b17923187ef2114d1f17da042fc97ca.svg", "arrow-double-left": "arrow-double-left.min.bba22e26f025c439b600bf74f0566465.svg", "arrow-double-right": "arrow-double-right.min.14f743d4adb5467fc0e95ac7f6426e1f.svg", "arrow-double-up": "arrow-double-up.min.8e3b3e31d227366f916c91dcb6e1b466.svg", "arrow-down": "arrow-down.min.84e69acc6554637cc373b8a4f50ba991.svg", "arrow-first": "arrow-first.min.bc51317ecf4953a664870ebab5059775.svg", "arrow-head-down": "arrow-head-down.min.454c189f4914925447670d0ae9bd2043.svg", "arrow-head-left": "arrow-head-left.min.aa2da7b4dbbb8a28c046592290054e94.svg", "arrow-head-right": "arrow-head-right.min.fb602ae5cb51970770570a70287e77e9.svg", "arrow-head-up": "arrow-head-up.min.2c282619214e4f998e1ac64a61b5545b.svg", "arrow-last": "arrow-last.min.72553c4284717d4961f8bcf8d51e0303.svg", "arrow-left": "arrow-left.min.24e8467ef0f8f206f228a3d8d443d70b.svg", "arrow-right": "arrow-right.min.8fb7b42d2d08d60f918602aa28475c0b.svg", "arrow-up": "arrow-up.min.0bc737f7f2cc56ef65c5d33472e014b0.svg", "augmented-reality": "augmented-reality.min.290ff033e35774fd093e1ab8ed07e10f.svg", "battery-empty": "battery-empty.min.8594e37d3e67a95b85eb9935f02e69cf.svg", "battery-full": "battery-full.min.4c75acb5a64a6dd3116ede7b1859a6d6.svg", "bell": "bell.min.d69dc9a220dec323e758ccbff756b5b5.svg", "bookmark": "bookmark.min.0cb177c79674593133f6d3d384c5df4b.svg", "broadcast": "broadcast.min.edbfac03d4afdc964d350f54df79c6f3.svg", "calculator": "calculator.min.2518729352d3709e488e71dcbf449247.svg", "calendar": "calendar.min.588fabe880634ece974291f5adfee50d.svg", "camera": "camera.min.10af3a4fac8c289775390534a50606d0.svg", "car": "car.min.4eeec04c87a14bb5d3d316eeeee0185b.svg", "car-battery": "car-battery.min.2a619bbd456ad531c922bf8f51b70977.svg", "card": "card.min.06394222c7ca5d6c7e783d6f86f030a6.svg", "charging-active": "charging-active.min.915410d626a52a3a76b6bf498491c255.svg", "charging-state": "charging-state.min.c5cb87ef2808f824f352a6ebd9b9d4a9.svg", "charging-station": "charging-station.min.211fcf0f9a9bb50b6e83482ee588dda9.svg", "chart": "chart.min.267e23c07f47784c186c5119b870df76.svg", "chat": "chat.min.a8a52d1b8b463ee0e5a3b0d812c9a40c.svg", "check": "check.min.0cb26d9a5ee1d217e5054f1ad60ae3b4.svg", "city": "city.min.a99b88b51adda8244a2c72953a2f4ab4.svg", "climate": "climate.min.5d52b2880552275d9032afc0fa2b7296.svg", "climate-control": "climate-control.min.152235d2bf2b7ec6e1a3c40e6971c446.svg", "clock": "clock.min.bcea9f182e1fe861ea6e765650f79b38.svg", "close": "close.min.eefab6ef191882058f9ed548bd5a467e.svg", "closed-caption": "closed-caption.min.b93ac43c07223fda14249d2279823f6a.svg", "co2-emission": "co2-emission.min.788590454baa0f6c52dfc99a55fe0b85.svg", "compare": "compare.min.657a924ca48bf93d200d2e6539fa8050.svg", "configurate": "configurate.min.2d137bc6f43ee03587188b571c97aacd.svg", "copy": "copy.min.b47f2ffbfefd05782509bb83951c6577.svg", "country-road": "country-road.min.3ee2c1be9d063f5d7c5772fcc7ae2568.svg", "cubic-capacity": "cubic-capacity.min.b5df863671bdf059bce19eddc2990698.svg", "delete": "delete.min.fd9788c3a0842a7bb1d737c6de1969d1.svg", "disable": "disable.min.c3d85d4ed9738c077d19e524775dbd56.svg", "document": "document.min.d2db26d7049ab2180361c7ce40f52d57.svg", "download": "download.min.d7c63bcbadf4dd5b14c3c79a438d93f3.svg", "duration": "duration.min.9405be759f64c8253076f7e55c80c336.svg", "edit": "edit.min.06bde2175fafb58233fa1ce6d3d00f83.svg", "email": "email.min.eb8ff02812a48c5098d3c40614e8d9d7.svg", "error-filled": "error-filled.min.35d7da7cb866bcfd3a25859f8cd2246b.svg", "exclamation": "exclamation.min.6ca46945978bd4eb2a40dc29766b1882.svg", "external": "external.min.b804bef35446f6b3cb379c121de3f13d.svg", "filter": "filter.min.60f168332c7550dfdf714ed0507877b0.svg", "fingerprint": "fingerprint.min.edc52a4b691f8495ef0ca66184f62544.svg", "flash": "flash.min.e5a6de1239300a6104076ee67aec42ca.svg", "fuel-station": "fuel-station.min.0155159076984cccdbfe854eb4da3720.svg", "garage": "garage.min.463577e6a1ffac592b5aa7bec9a82d39.svg", "gift": "gift.min.eeb1a5871a4008bcafd9495fe11ec9bc.svg", "globe": "globe.min.50fd2c886a822673902bd106efc73c3f.svg", "grid": "grid.min.c36c5015115005dcb9c948f07af0be80.svg", "heart": "heart.min.132eca7a5d16b091f23340b3ae359294.svg", "heart-filled": "heart-filled.min.4d48b6bb07a6a2159e765d0c621543a0.svg", "highway": "highway.min.ea773dcf33a43fa8e82beae96c1222b7.svg", "home": "home.min.2bdc01bb7c9b39fa5ef5a81c8c3f9f49.svg", "horn": "horn.min.77105eb430a033a3ffdf21f9fecd32de.svg", "image": "image.min.851c64681e1950312a934a723ca04a85.svg", "increase": "increase.min.45bfe421e86192da37c8cca4917c10c2.svg", "information": "information.min.d387e44cc786ca3df3702f429518a1d9.svg", "information-filled": "information-filled.min.1055e842bb7d89c061ff1b5f47ed6169.svg", "key": "key.min.37b5e8ff9fda430f855f4b82bfd03485.svg", "leaf": "leaf.min.ea91b1d04ade4c49640e89ade35c9d90.svg", "leather": "leather.min.ef9e664d2fc3c28171fbd3d93b079503.svg", "light": "light.min.5fa3dd77ee9c63e28614c4c7c4a6d39c.svg", "list": "list.min.ecaeee96ec6cf2f8c9028ea404113a9e.svg", "locate": "locate.min.c28bdf292bbf297eb8109a272e2ffb91.svg", "lock": "lock.min.d258c21c7217cd1342307c45ecd5176e.svg", "lock-open": "lock-open.min.2ef427e273635e3aab7601b0fe92e86e.svg", "logo-apple-podcast": "logo-apple-podcast.min.af7a1f162ae9d6dba90fe155d8688b9c.svg", "logo-baidu": "logo-baidu.min.a8eb57b32e616b21820d86882835fe20.svg", "logo-delicious": "logo-delicious.min.fc2927d4979ffaed1f23160091e0975e.svg", "logo-digg": "logo-digg.min.d7340b3f22cf4a22a8ac3b472c16e0e2.svg", "logo-facebook": "logo-facebook.min.0c2e020d0b61d37e76e6bab67e4d149e.svg", "logo-foursquare": "logo-foursquare.min.b2699d993d9d731892ba01874c0e023d.svg", "logo-gmail": "logo-gmail.min.0c14069d86c2ba0a42c726d96f0cae9c.svg", "logo-google": "logo-google.min.c1f3931d74e40e5cdc875236b7e674a1.svg", "logo-hatena": "logo-hatena.min.021834899da6e6f6a9dd963f4fc3337c.svg", "logo-instagram": "logo-instagram.min.2f8c578e2472dc13b2f0ec8d1b936442.svg", "logo-kaixin": "logo-kaixin.min.8fb995689a3442669df37b5f375922fc.svg", "logo-kakaotalk": "logo-kakaotalk.min.988146b4cd8bced103fd8b5a9be064d8.svg", "logo-linkedin": "logo-linkedin.min.e4848fd4b74404e504fd1a4d5a25b960.svg", "logo-naver": "logo-naver.min.13f97e4c3ad4898d169904caa609f2d0.svg", "logo-pinterest": "logo-pinterest.min.101284bac1d7cf468719fccf416069df.svg", "logo-qq": "logo-qq.min.5d89ab35e4e00e81deadaa2fe0d51a5d.svg", "logo-qq-share": "logo-qq-share.min.01da8f9d6665f4529f349f88b4fb0cfc.svg", "logo-reddit": "logo-reddit.min.40dd42ee1368dbc74611afee4d3c9850.svg", "logo-skyrock": "logo-skyrock.min.9440a0e4a088cdfbfcc99bc91010768a.svg", "logo-sohu": "logo-sohu.min.d7a030336d712a2b44982e65071cd2bc.svg", "logo-spotify": "logo-spotify.min.48fb45730d66998420f8760b6d2f7fcc.svg", "logo-tecent": "logo-tecent.min.fd1ec329327f4cbf5706c393df66af9d.svg", "logo-telegram": "logo-telegram.min.624fca36dd6f6c5b64bce6e617372d77.svg", "logo-tiktok": "logo-tiktok.min.9c5ffad4c76353afaa99feca9e4f2f0a.svg", "logo-tumblr": "logo-tumblr.min.9b77d06b659cee9d5f45015c33c23967.svg", "logo-twitter": "logo-twitter.min.ac4d6b189cd2a47e4fac75bedb76b5bd.svg", "logo-viber": "logo-viber.min.330fbae7d2683b7910d828cbe864f738.svg", "logo-vk": "logo-vk.min.727ba204a194c8cf1b7fc389ac1db14b.svg", "logo-wechat": "logo-wechat.min.0392ff30f188aa9f52480e965142474a.svg", "logo-weibo": "logo-weibo.min.3ded49004baea42d85fa6fcb9d79ccb1.svg", "logo-whatsapp": "logo-whatsapp.min.02c83d3cbde89763eee8fc3bcab02257.svg", "logo-xing": "logo-xing.min.6a5f5fde119a841823d0ef05293b3454.svg", "logo-yahoo": "logo-yahoo.min.622e886e777c08cf80c31dc99ca13f1a.svg", "logo-youku": "logo-youku.min.d35a5283c6d3094748f565c729f56d9f.svg", "logo-youtube": "logo-youtube.min.59c939904cbec0c7793289eb5e68cb99.svg", "logout": "logout.min.aa54756e3aec12f347fdec0a2905a232.svg", "map": "map.min.643551801bfc27a93438c30ebe1d1387.svg", "menu-dots-horizontal": "menu-dots-horizontal.min.94e0804e3a5a30a577cab6296ad8d15d.svg", "menu-dots-vertical": "menu-dots-vertical.min.7ec3f5be33dd3459d7a9bed9fdbe22d3.svg", "menu-lines": "menu-lines.min.30ff09f6e2ce846286dd136279636097.svg", "minus": "minus.min.00cca11ec9ce4bd913abba2059c3f10b.svg", "mobile": "mobile.min.71d3c0d7fb4349383562cc233478f7fb.svg", "moon": "moon.min.5c447b4013210e7c7723ca4b6fdbfa9f.svg", "oil-can": "oil-can.min.31978141ee5529f97833027b1e03294a.svg", "parking-brake": "parking-brake.min.f03105e84898f1db02c6fcbdd008bfcf.svg", "parking-light": "parking-light.min.968af68684df1220b15cff6616e8376e.svg", "pause": "pause.min.dd29b256b73311abf1549ed16fe7a47b.svg", "phone": "phone.min.e1a58c454ffe074b30a5bb16c75ff23f.svg", "pin": "pin.min.c6ce5ea394fd9cf9dca80a592e2aeae4.svg", "pin-filled": "pin-filled.min.e47cf748ce9a27ced935c6b6cf4c59f1.svg", "play": "play.min.703fb2dbebac16ea91a6524914626ae2.svg", "plug": "plug.min.02d79b2702ac5c41020b54bd9eedf523.svg", "plus": "plus.min.dd34f71292a547080b9247a72c1adda2.svg", "preheating": "preheating.min.96ccdd3d24b0634ca820dc894894a34d.svg", "printer": "printer.min.bcd50214772a8fcc1d0f0ae1205610bf.svg", "purchase": "purchase.min.70535cff1a085154ab49ab958fe91aae.svg", "push-pin": "push-pin.min.7cec1084d78eb838957424d8ed62ecf5.svg", "push-pin-off": "push-pin-off.min.de81e394f6d02de580d4408070986097.svg", "qr": "qr.min.1facfc2c9b70057552904fe123674746.svg", "question": "question.min.df469b72598d2dbfb458c46430c0690a.svg", "racing-flag": "racing-flag.min.1aee1d177d44aaaca113a8b7a81db573.svg", "refresh": "refresh.min.36ced59c8e8d06980d6ac20cca8a9057.svg", "replay": "replay.min.d4f212bf3d5f8fe166d78dba57eeacde.svg", "reset": "reset.min.e1ce71f684b6e83b9ed8182389bd407f.svg", "roof-closed": "roof-closed.min.99006124d26ea3014b9169900bc266e1.svg", "roof-open": "roof-open.min.c0322e148f7071f2cb8f6b5d8ef15337.svg", "route": "route.min.49f1935d2a563b150bb382eb56a04972.svg", "rss": "rss.min.eaf3873673fcbff72833e7a77f9510f8.svg", "save": "save.min.6506e50ad89aee223e85fe52242c232e.svg", "screen": "screen.min.c17978f44a7bf9f7d80f178fd2b7d116.svg", "search": "search.min.f2755d61c24b6ad037f51d65588be308.svg", "send": "send.min.544f2b90e562b8582808f735846b1351.svg", "share": "share.min.b7b59aa7085cc865735acfd940480234.svg", "shopping-bag": "shopping-bag.min.9d99682e614f5bbb9760c1a0272bd1e0.svg", "shopping-bag-filled": "shopping-bag-filled.min.566efdc835446512c426a9ef5e3badb0.svg", "shopping-cart": "shopping-cart.min.05a6c651afb21246daba2e941e8366cc.svg", "shopping-cart-filled": "shopping-cart-filled.min.c166601be618e0aadd596b54785f18f2.svg", "sidelights": "sidelights.min.996d591ee87247eae32968bf0b588d1e.svg", "snowflake": "snowflake.min.cf85d1b3c62e223ffb80d8c838d4f0b8.svg", "sort": "sort.min.d90a6657569305b9b09b0c6997b5b915.svg", "stack": "stack.min.d36295767f8e2540bbbf60278114ca09.svg", "star": "star.min.d7445429f599f915661e6c57841ae339.svg", "steering-wheel": "steering-wheel.min.c632bf7d06f41d68f0a95d76615f3981.svg", "stopwatch": "stopwatch.min.c90f1fde0961349fe79c0b077f7b0d41.svg", "subtract": "subtract.min.bb9f2dcb0c81ac7f216f6fe2ba916c09.svg", "success": "success.min.4401a4715549bd7dfaaa4f54684b2088.svg", "success-filled": "success-filled.min.c9cb3c66aebf9c4f40b897064f901335.svg", "sun": "sun.min.a68eb6225965558e4498d3d38c33d52a.svg", "switch": "switch.min.ab6c8b55ab119d9bd5170a1893a75ed2.svg", "tablet": "tablet.min.60e7c4ef821bf610d2b2d5b06c7e88b7.svg", "tachometer": "tachometer.min.348f8c5eed7c61993a864ebcffee98bd.svg", "tire": "tire.min.2094760dbaee1d169fa86f2113a5ca40.svg", "truck": "truck.min.43f91b0320003695d8804cf6a8a86da4.svg", "upload": "upload.min.cf3aaf8fb27e339d26133cbd6a5332ca.svg", "user": "user.min.0f8dcfbe34322e7968b4b23e11d963f0.svg", "user-filled": "user-filled.min.aa7b4c61ce78e08ba35fb513ff9e19dd.svg", "user-group": "user-group.min.87f6ca16e7174b9a8d1894283a8ff1d4.svg", "user-manual": "user-manual.min.0b87e500e3d747e67be964c47a3ae312.svg", "video": "video.min.107dfd64c6fd7398dd48b94d61b2fe11.svg", "view": "view.min.cd78cae7309f44d941e9264047e3efa0.svg", "view-off": "view-off.min.e27746517bdb4c2c9ae5f025c7e74991.svg", "volume-off": "volume-off.min.711d24824df04d61c3129bbdcdbfa083.svg", "volume-up": "volume-up.min.0a2ebc984c6b9d2f53c747f9ba2028f1.svg", "warning": "warning.min.04529c502dddce98f0ae2eec0bfb3432.svg", "warning-filled": "warning-filled.min.ee8effcdc653f660043f909b6f0c938b.svg", "weight": "weight.min.47ef0b98ca8ed590dd7d6e6c3f1bcd46.svg", "wifi": "wifi.min.14540859e9241374bd9d0c89eb85667b.svg", "work": "work.min.d17986d8fcff6a5fcd5e9925e838fade.svg", "wrench": "wrench.min.90e402dc170fe83de23e2c11588ba037.svg", "wrenches": "wrenches.min.990b074555825a218e86fd35397fc88c.svg", "zoom-in": "zoom-in.min.22fa9d7ee8748debc801fe910f2d3d01.svg", "zoom-out": "zoom-out.min.9408a4dc5786ed5a783a729e58ab3d6d.svg" };
 const isUrl = (str) => (str === null || str === void 0 ? void 0 : str.length) > 0 && /(\/)/.test(str);
 const DEFAULT_ICON_NAME = 'arrow-right';
 const buildIconUrl = (iconNameOrSource = DEFAULT_ICON_NAME) => {

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/flyout.wrapper.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+var flyout = require('../dsr-components/flyout.js');
+
+const PFlyout = react.forwardRef(({ aria, onDismiss, open = false, position = 'right', theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
+    const WebComponentTag = hooks.usePrefix('p-flyout');
+    const propsToSync = [aria, open, position, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(flyout.DSRFlyout, { ...{ aria, open, position, theme, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PFlyout = PFlyout;

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/text-field-wrapper.wrapper.js

@@ -6,14 +6,14 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var textFieldWrapper = require('../dsr-components/text-field-wrapper.js');
 
-const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
+const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = hooks.usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textFieldWrapper.DSRTextFieldWrapper, { ...{ actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, unit, unitPosition, children } })),
+                children: (jsxRuntime.jsx(textFieldWrapper.DSRTextFieldWrapper, { ...{ actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition, children } })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-tile.js

@@ -18,6 +18,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');
@@ -72,7 +73,6 @@ class DSRCarousel extends react.Component {
         super(...arguments);
         this.slides = [];
     }
-    // we need to prevent splide reinitialization via splide.refresh() when activeSlideIndex is changed from outside
     render() {
         var _a;
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox-wrapper.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');