@porsche-design-system/components-react 3.0.0-rc.1 → 3.0.0-rc.2

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

@@ -3226,6 +3226,10 @@ function jssNested() {
   };
 }
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function getAugmentedNamespace(n) {
   if (n.__esModule) return n;
   var f = n.default;
@@ -3287,7 +3291,7 @@ var _tslib$1 = {};
 				return t;
 			};
 		return exports.__assign.apply(this, arguments);
-	};
+	}; 
 } (_tslib$1));
 
 var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
@@ -3647,6 +3651,8 @@ function jssCombineAndSortMQ(options) {
 
 var dist = jssCombineAndSortMQ;
 
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+
 /* Auto Generated Start */
 const themeLight = {
     primaryColor: '#010205',
@@ -3790,36 +3796,20 @@ const focusPseudoJssStyle = {
         outline: 0,
     },
 };
-const getTextHiddenJssStyle = (isHidden) => isHidden
-    ? getScreenReaderOnlyJssStyle()
-    : {
-        position: 'static',
-        width: 'auto',
-        height: 'auto',
-        margin: 0,
-        overflow: 'visible',
-        clip: 'auto',
-        clipPath: 'none',
-        whiteSpace: 'normal',
-    };
-const getFormTextHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'fit-content' }));
-const getFormCheckboxRadioHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'auto', padding: `2px 0 0 ${spacingStaticSmall}` }));
 /**
- * Screen reader only styles to hide (text-)contents visually in the browser but grant access for screen readers
+ * Returns a JSS style object that can be used to visually hide text in the browser, while still allowing it to be accessed by screen readers.
+ * @param {boolean} isHidden - A boolean value indicating whether the text should be hidden or not. Defaults to true.
+ * @param {JssStyle} isShownJssStyle - Additional styles applied when isHidden = false
+ * @returns {JssStyle} - A JSS style object containing styles depending on the value of isHidden and isShownJssStyle.
  */
-const getScreenReaderOnlyJssStyle = () => {
-    return {
+const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => isHidden
+    ? {
         position: 'absolute',
+        width: 0,
         height: '1px',
-        width: '1px',
-        border: '0',
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(1px,1px,1px,1px)',
-        clipPath: 'inset(50%)',
-        whiteSpace: 'nowrap',
-    };
-};
+        textIndent: '-999999px',
+    }
+    : Object.assign({ position: 'static', width: 'auto', height: 'auto', textIndent: 0 }, isShownJssStyle);
 const getBackfaceVisibilityJssStyle = () => ({
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
@@ -3854,7 +3844,7 @@ const jss = createJss({
         jssGlobal(),
         jssNested(),
         camelCase(),
-        dist({ combineMediaQueries: true }),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
     ],
 });
 const getCss = (jssStyles) => jss
@@ -4081,7 +4071,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             fontSize: getFontSizeText(sizeValue),
         })))), { '&::before': Object.assign(Object.assign(Object.assign({ content: '""', position: 'absolute', top: offsetVertical, bottom: offsetVertical }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                 right: hideLabelValue ? offsetVertical : offsetHorizontal,
-                left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
+                left: hideLabelValue ? offsetVertical : offsetHorizontal,
             }))), { borderRadius: borderRadiusSmall, transition: getTransition('background-color') }), (active && Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }))) }), (!isDisabledOrLoading &&
             hoverMediaQuery({
                 '&:hover::before': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
@@ -4100,6 +4090,12 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             flexShrink: '0',
             width: fontLineHeight,
             height: fontLineHeight,
+            // workaround for Safari to optimize vertical alignment of icons
+            // TODO: check if this is still needed after optimized icons are included
+            '@supports (width: round(down, 1px, 1px))': {
+                width: `round(down, ${fontLineHeight}, 1px)`,
+                height: `round(down, ${fontLineHeight}, 1px)`,
+            },
         },
         label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
             order: alignLabelValue === 'left' ? -1 : 0,
@@ -4277,17 +4273,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
         })), (!isDisabledOrLoading &&
             hoverMediaQuery({
                 '&:hover': Object.assign({ backgroundColor: backgroundColorHover, borderColor: isHighContrastMode ? focusColor : borderColorHover }, (!isPrimary && frostedGlassStyle)),
-            }))), label: Object.assign({}, buildResponsiveStyles(hideLabel, (hideLabelValue) => hideLabelValue
-            ? {
-                width: 0,
-                height: '1px',
-                textIndent: '-999999px',
-            }
-            : {
-                width: 'auto',
-                height: 'auto',
-                textIndent: 0,
-            })) }, (hasIcon && {
+            }))), label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle) }, (hasIcon && {
         icon: {
             width: fontLineHeight,
             height: fontLineHeight,
@@ -4364,22 +4350,18 @@ const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
                 [mediaQueryS]: isHeaderAlignCenter
                     ? {
                         gridColumn: 2,
-                        textAlign: 'center', // relevant when text becomes multiline
                     }
                     : {
                         gridColumn: '1 / 3',
                     },
             }),
-        }, header: {
-            display: 'grid',
-            padding: `0 ${spacingMap[width].base}`,
-            [mediaQueryS]: Object.assign(Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
+        }, header: Object.assign(Object.assign({ display: 'grid', padding: `0 ${spacingMap[width].base}` }, (isHeaderAlignCenter && {
+            textAlign: 'center',
+        })), { [mediaQueryS]: Object.assign(Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
                 justifyItems: 'center', // relevant when max-width of heading or description is reached
-            })), { padding: `0 ${spacingMap[width].s}` }),
-            [mediaQueryXXL]: {
+            })), { padding: `0 ${spacingMap[width].s}` }), [mediaQueryXXL]: {
                 padding: `0 ${spacingMap[width].xxl}`,
-            },
-        }, nav: {
+            } }), nav: {
             display: 'none',
             [mediaQueryS]: {
                 display: 'flex',
@@ -4410,7 +4392,7 @@ const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
                 } }),
             '&__list': Object.assign({ display: 'flex', height: '100%' }, getBackfaceVisibilityJssStyle()),
             '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)' }),
-            '&__sr': getScreenReaderOnlyJssStyle(), // appears in the DOM when sliding
+            '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
         } }, (hasPagination && {
         pagination: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
             display: hasPaginationValue ? 'flex' : 'none',
@@ -4509,7 +4491,7 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
                 display: 'flex',
                 alignItems: 'flex-start',
             },
-        }, text: Object.assign(Object.assign(Object.assign({ order: 1, cursor: disabledOrLoading ? 'default' : 'pointer' }, textSmallStyle), { color: disabledOrLoading ? disabledColor : primaryColor, transition: getTransition('color') }), buildResponsiveStyles(hideLabel, getFormCheckboxRadioHiddenJssStyle)) }, getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state));
+        }, text: Object.assign(Object.assign(Object.assign({ order: 1, cursor: disabledOrLoading ? 'default' : 'pointer' }, textSmallStyle), { color: disabledOrLoading ? disabledColor : primaryColor, transition: getTransition('color') }), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { padding: `2px 0 0 ${spacingStaticSmall}` }))) }, getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state));
 };
 
 const getInlineSVGBackgroundImage = (path) => {
@@ -4927,7 +4909,7 @@ const getComponentCss$E = (color, size, theme) => {
                     filter: filter.light[color],
                 }, {
                     filter: filter.dark[color],
-                }))), { WebkitAnimation: `${isDark ? keyFramesDark : keyFramesLight} 1ms` }))), (isSizeInherit
+                }))), { WebkitAnimation: `${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`} 1ms` }))), (isSizeInherit
                 ? {
                     width: size,
                     height: size,
@@ -4937,7 +4919,7 @@ const getComponentCss$E = (color, size, theme) => {
                     height: fontLineHeight,
                     font: `${sizeMap$2[size]} ${fontFamily}`,
                 })) }, (!isColorInherit && {
-            [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
+            [`@keyframes ${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`}`]: forceRerenderAnimationStyle,
         })),
     });
 };
@@ -5000,7 +4982,6 @@ const getComponentCss$D = (state, hasAction, hasClose, theme) => {
 
 const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
-    const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), Object.assign(Object.assign({}, (hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
@@ -5010,7 +4991,7 @@ const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, a
                 // (https://bugs.webkit.org/show_bug.cgi?id=178237)
                 '&(a)::before': Object.assign({ content: '""', position: 'fixed', top: offsetVertical, bottom: offsetVertical, borderRadius: borderRadiusSmall }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                     right: hideLabelValue ? offsetVertical : offsetHorizontal,
-                    left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
+                    left: hideLabelValue ? offsetVertical : offsetHorizontal,
                 }))),
                 '&(a:focus)::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
@@ -5053,6 +5034,7 @@ const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAncho
         }) })))));
 };
 
+// array is redefined instead of using the one from in model-signature
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getComponentCss$A = (aspectRatio, weight, direction, hasDescription) => {
@@ -5104,7 +5086,7 @@ const getComponentCss$y = (size) => {
 
 const mediaQueryXl = getMediaQueryMin('xl');
 const { backgroundColor, primaryColor: lightThemePrimaryColor } = getThemedColors('light');
-const { primaryColor: darkThemePrimaryColor } = getThemedColors('dark');
+const { primaryColor: darkThemePrimaryColor, contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
 const transitionTimingFunction = 'cubic-bezier(.16,1,.3,1)';
 const stretchToFullModalWidthClassName = 'stretch-to-full-modal-width';
 const getFullscreenJssStyles = (fullscreen) => {
@@ -5202,8 +5184,8 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) =>
     })), (hasDismissButton && {
         dismiss: Object.assign({ position: 'absolute', top: '8px', right: '8px', border: `2px solid ${backgroundColor}`, borderRadius: '4px', background: backgroundColor }, hoverMediaQuery({
             '&:hover': {
-                background: 'transparent',
-                borderColor: 'transparent',
+                background: darkThemeContrastHighColor,
+                borderColor: darkThemeContrastHighColor,
             },
         })),
     })));
@@ -5381,7 +5363,7 @@ const getComponentCss$u = (direction, theme) => {
                     borderColor: 'transparent',
                 } }),
         },
-        label: getTextHiddenJssStyle(true),
+        label: getHiddenTextJssStyle(),
         icon: {
             display: 'inline-block',
             transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
@@ -5586,6 +5568,7 @@ const getComponentCss$q = (maxWidth) => {
         },
     });
 };
+
 const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -5619,7 +5602,7 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
             flexDirection: 'column',
             gap: spacingStaticXSmall,
             position: 'relative',
-            '&__text': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(hideLabel, getFormTextHiddenJssStyle)), textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), '&+&': Object.assign({ marginTop: `-${spacingStaticXSmall}`, fontSize: fontSizeTextXSmall }, (!isDisabled && {
+            '&__text': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { width: 'fit-content' }))), textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), '&+&': Object.assign({ marginTop: `-${spacingStaticXSmall}`, fontSize: fontSizeTextXSmall }, (!isDisabled && {
                     color: contrastHighColor,
                 })) }), hoverMediaQuery({
                 '&:hover': {
@@ -5636,14 +5619,10 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
         })),
     }));
 };
-const ICON_SPACE = `${24 + 13 * 2 + 2}px`; // 24px = icon width, 13px * 2 = padding, 2px = border
-const getComponentCss$p = (isDisabled, 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, {
-            position: 'static',
-            zIndex: 0,
-            cursor: 'pointer',
-            padding: `8px ${ICON_SPACE} 8px ${spacingStaticMedium}`,
-        }))), root: {
+
+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: {
             display: 'block',
             position: 'relative',
         } }, getLabelStyles('select', isDisabled, hideLabel, state, theme, {
@@ -5660,6 +5639,129 @@ const getComponentCss$p = (isDisabled, hideLabel, state, theme) => {
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)));
 };
 
+const dropdownPositionVar = '--p-internal-dropdown-position';
+const getButtonStyles = (direction, isOpen, state, theme) => {
+    const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
+    const isDirectionDown = direction === 'down';
+    return {
+        '@global': {
+            button: Object.assign(Object.assign(Object.assign({ position: 'absolute', top: 0, height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, width: '100%', font: textSmallStyle.font.replace('ex', 'ex + 6px'), padding: 0, background: 'transparent', border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, borderRadius: borderRadiusSmall, outline: '0', cursor: 'pointer', transition: getTransition('border-color'), '&:focus, &:focus ~ ul': {
+                    borderColor: primaryColor,
+                } }, hoverMediaQuery({
+                '&:not(:disabled):not(:focus):hover': {
+                    borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                },
+            })), { '&:disabled': {
+                    cursor: 'not-allowed',
+                    borderColor: disabledColor,
+                } }), (isOpen && {
+                [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+            })),
+        },
+    };
+};
+const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
+    const { primaryColor, backgroundColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
+    const isDirectionDown = direction === 'down';
+    const placeHolderJssStyle = {
+        opacity: 1,
+        color: disabled ? disabledColor : primaryColor,
+    };
+    return {
+        '@global': {
+            input: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block', position: 'absolute', zIndex: 1, bottom: '2px', left: '2px', width: `calc(100% - (${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2))`, height: `calc(${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, font: textSmallStyle.font.replace('ex', 'ex + 6px'), padding: `13px ${spacingStaticMedium}`, outline: '0', appearance: 'none', boxSizing: 'border-box', border: '0', borderRadius: borderRadiusSmall, opacity: 0 }, textSmallStyle), { textIndent: 0, cursor: disabled ? 'not-allowed' : 'text', color: primaryColor, background: backgroundColor, '&::placeholder': placeHolderJssStyle, '&::-webkit-input-placeholder': placeHolderJssStyle, '&::-moz-placeholder': placeHolderJssStyle, '&:not(:disabled):focus': {
+                    opacity: 1,
+                    '&+span, &~ ul': {
+                        borderColor: primaryColor,
+                    },
+                } }), hoverMediaQuery({
+                '&:not(:disabled)': {
+                    '&+span:hover': {
+                        borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                    },
+                    '&:hover': {
+                        '&+span, &~ul': {
+                            borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                        },
+                    },
+                },
+            })), { '&+span': Object.assign(Object.assign(Object.assign({ 
+                    // for focus outline and clicking arrow since input ends left of the icon
+                    position: 'absolute' }, getInsetJssStyle()), { transition: getTransition('border-color'), pointerEvents: 'all', cursor: disabled ? 'not-allowed' : 'pointer', border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, borderRadius: borderRadiusSmall }), (isOpen && {
+                    [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                    [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+                })) }),
+        },
+    };
+};
+const getListStyles = (direction, theme) => {
+    const isDirectionDown = direction === 'down';
+    const { primaryColor, backgroundColor, contrastMediumColor, contrastHighColor, backgroundSurfaceColor, disabledColor, } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
+    return {
+        '@global': {
+            ul: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', gap: spacingStaticSmall, position: `var(${dropdownPositionVar})`, padding: '6px', margin: 0, background: backgroundColor }, textSmallStyle), { zIndex: 10, left: 0, right: 0, [isDirectionDown ? 'top' : 'bottom']: 'calc(100% - 2px)', boxSizing: 'border-box', maxHeight: `${8.5 * (OPTION_HEIGHT + 8) + 6 + 2}px`, overflowY: 'auto', WebkitOverflowScrolling: 'touch', scrollBehavior: 'smooth', border: `2px solid ${primaryColor}`, [isDirectionDown ? 'borderTop' : 'borderBottom']: addImportantToRule(`1px solid ${contrastMediumColor}`) }), (isDirectionDown
+                ? ['borderBottomLeftRadius', 'borderBottomRightRadius']
+                : ['borderTopLeftRadius', 'borderTopRightRadius']).reduce((result, curr) => (Object.assign(Object.assign({}, result), { [curr]: borderRadiusSmall })), {})), { scrollbarWidth: 'thin', scrollbarColor: 'auto', transition: getTransition('border-color'), transform: 'translate3d(0,0,0)' }),
+        },
+        option: Object.assign(Object.assign({ display: 'flex', justifyContent: 'space-between', gap: '12px', padding: `${spacingStaticSmall} 12px`, flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, color: contrastHighColor, cursor: 'pointer', textAlign: 'left', wordBreak: 'break-word', boxSizing: 'border-box', borderRadius: borderRadiusSmall, transition: ['background-color', 'color'].map(getTransition).join(), '&[role=status]': {
+                cursor: 'not-allowed',
+            }, '&__sr': getHiddenTextJssStyle() }, hoverMediaQuery({
+            '&:not([aria-disabled]):not([role=status]):hover': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                background: backgroundSurfaceColor,
+            },
+        })), { '&--highlighted, &--selected': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                background: backgroundSurfaceColor,
+            }, '&--selected': {
+                cursor: 'default',
+                pointerEvents: 'none',
+            }, '&--disabled': {
+                cursor: 'not-allowed',
+                color: disabledColor,
+            }, '&--hidden': {
+                display: 'none',
+            } }),
+        optgroup: {
+            display: 'block',
+            padding: '3px 14px',
+            fontWeight: fontWeightSemiBold,
+            '&:not(:first-child)': {
+                marginTop: spacingStaticSmall,
+            },
+            '&~$option': {
+                paddingLeft: '24px',
+            },
+        },
+    };
+};
+const getComponentCss$o = (direction, isOpen, state, disabled, filter, theme) => {
+    const { primaryColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    return getCss(
+    // merge because of global styles
+    mergeDeep({
+        '@global': {
+            ':host': Object.assign({ [dropdownPositionVar]: 'absolute', display: 'block', position: `var(${dropdownPositionVar})`, font: textSmallStyle.font.replace('ex', 'ex + 6px'), marginTop: `calc(-1 * (${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2))`, paddingTop: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, left: 0, right: 0, color: disabled ? disabledColor : formStateColor || contrastMediumColor }, (!disabled &&
+                !isHighContrastMode &&
+                hoverMediaQuery({
+                    '&(:hover)': {
+                        color: formStateHoverColor || primaryColor,
+                    },
+                }))),
+        },
+        'sr-text': {
+            display: 'none',
+        },
+    }, filter
+        ? getFilterStyles(direction, isOpen, state, disabled, theme)
+        : getButtonStyles(direction, isOpen, state, theme), isOpen && getListStyles(direction, theme)));
+};
+
 const sizeSmall = '48px';
 const sizeMedium = '72px';
 const sizeLarge = '104px';
@@ -5722,7 +5824,7 @@ const getComponentCss$n = (size, theme) => {
             },
         },
         root: Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(size, (s) => sizeMap$1[s])), { margin: 0, padding: 0, boxSizing: 'border-box', strokeWidth: 1.5 }),
-        'sr-only': getScreenReaderOnlyJssStyle(),
+        'sr-only': getHiddenTextJssStyle(),
     });
 };
 
@@ -5785,7 +5887,7 @@ const getComponentCss$m = (state, disabled, theme) => {
             height: fontLineHeight,
             width: fontLineHeight,
         },
-    })), { 'sr-only': getScreenReaderOnlyJssStyle() }));
+    })), { 'sr-only': getHiddenTextJssStyle() }));
 };
 
 const getComponentCss$l = (size) => {
@@ -5875,7 +5977,7 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
         },
     })), { label: Object.assign(Object.assign(Object.assign({}, textSmallStyle), { paddingTop: '2px', minWidth: 0, minHeight: 0, color: textColor }), mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
             order: alignLabelValue === 'left' ? -1 : 0,
-        })), buildResponsiveStyles(hideLabel, getTextHiddenJssStyle))) }));
+        })), buildResponsiveStyles(hideLabel, getHiddenTextJssStyle))) }));
 };
 
 const getComponentCss$j = () => {
@@ -5957,7 +6059,7 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                     } }),
             }
             : hideLabel && {
-                span: Object.assign(Object.assign({}, getTextHiddenJssStyle(true)), { display: 'block', border: 0 }),
+                span: Object.assign(Object.assign({}, getHiddenTextJssStyle()), { display: 'block', border: 0 }),
             })) }, (sortable && {
         icon: {
             transition: getTransition('opacity'),
@@ -6027,9 +6129,9 @@ const getComponentCss$c = (size, weight, theme) => {
             display: 'block',
             position: 'absolute',
             width: 0,
-            height: isHighContrastMode ? '4px' : weight === 'semi-bold' ? '2px' : '1.5px',
+            height: '2px',
             left: 0,
-            bottom: isHighContrastMode ? '-1px' : '-4px',
+            bottom: isHighContrastMode ? '0' : '-2px',
             background: isHighContrastMode ? getHighContrastColors().canvasTextColor : primaryColor,
             '&--enable-transition': {
                 willChange: 'width',
@@ -6108,7 +6210,7 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
             marginRight: '10px',
             transition: getTransition('background-color'),
             borderRadius: borderRadiusSmall,
-        }, 'sr-only': getScreenReaderOnlyJssStyle() }));
+        }, 'sr-only': getHiddenTextJssStyle() }));
 };
 
 const getThemedBackgroundHoverColor = (tagColor, themedColors, theme) => {
@@ -6236,7 +6338,7 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
         },
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), { 
         // TODO: could be made conditional if we had hasUnit
-        'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }) }));
+        'sr-only': Object.assign(Object.assign({}, getHiddenTextJssStyle()), { padding: 0 }) }));
 };
 
 /** @deprecated */
@@ -6333,7 +6435,7 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
             color: contrastMediumColor,
         },
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), (hasCounter && {
-        'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }),
+        'sr-only': Object.assign(Object.assign({}, getHiddenTextJssStyle()), { padding: 0 }),
     })));
 };
 
@@ -6402,4 +6504,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$Y as getAccordionCss, getComponentCss$X as getBannerCss, getComponentCss$T as getButtonCss, getComponentCss$W as getButtonGroupCss, getComponentCss$V as getButtonPureCss, getComponentCss$U as getButtonTileCss, getComponentCss$S as getCarouselCss, getComponentCss$R as getCheckboxWrapperCss, getComponentCss$Q as getContentWrapperCss, getComponentCss$P as getCrestCss, getComponentCss$O as getDisplayCss, getComponentCss$N as getDividerCss, getComponentCss$L as getFieldsetCss, getComponentCss$M as getFieldsetWrapperCss, getComponentCss$J as getFlexCss, getComponentCss$K as getFlexItemCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$H as getGridCss, getComponentCss$I as getGridItemCss, getComponentCss$G as getHeadingCss, getComponentCss$F as getHeadlineCss, getComponentCss$E as getIconCss, getComponentCss$D as getInlineNotificationCss, getComponentCss$B as getLinkCss, getComponentCss$C as getLinkPureCss, getComponentCss$B as getLinkSocialCss, getComponentCss$z as getLinkTileCss, getComponentCss$A as getLinkTileModelSignatureCss, getComponentCss$y as getMarqueCss, getComponentCss$x as getModalCss, getComponentCss$w as getModelSignatureCss, getComponentCss$v as getPaginationCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$p as getSelectWrapperCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$Y as getAccordionCss, getComponentCss$X as getBannerCss, getComponentCss$T as getButtonCss, getComponentCss$W as getButtonGroupCss, getComponentCss$V as getButtonPureCss, getComponentCss$U as getButtonTileCss, getComponentCss$S as getCarouselCss, getComponentCss$R as getCheckboxWrapperCss, getComponentCss$Q as getContentWrapperCss, getComponentCss$P as getCrestCss, getComponentCss$O as getDisplayCss, getComponentCss$N as getDividerCss, getComponentCss$L as getFieldsetCss, getComponentCss$M as getFieldsetWrapperCss, getComponentCss$J as getFlexCss, getComponentCss$K as getFlexItemCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$H as getGridCss, getComponentCss$I as getGridItemCss, getComponentCss$G as getHeadingCss, getComponentCss$F as getHeadlineCss, getComponentCss$E as getIconCss, getComponentCss$D as getInlineNotificationCss, getComponentCss$B as getLinkCss, getComponentCss$C as getLinkPureCss, getComponentCss$B as getLinkSocialCss, getComponentCss$z as getLinkTileCss, getComponentCss$A as getLinkTileModelSignatureCss, getComponentCss$y as getMarqueCss, getComponentCss$x as getModalCss, getComponentCss$w as getModelSignatureCss, getComponentCss$v as getPaginationCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$p as getSelectWrapperCss, getComponentCss$o as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

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

@@ -166,6 +166,13 @@ hasWindow &&
             .forEach((node) => childrenMutationMap.get(node)());
     });
 
+const isTouchDevice = () => {
+    if (!hasWindow) {
+        return;
+    }
+    return !!('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
+};
+
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
 /**
@@ -3072,6 +3079,10 @@ function jssNested() {
   };
 }
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function getAugmentedNamespace(n) {
   if (n.__esModule) return n;
   var f = n.default;
@@ -3133,7 +3144,7 @@ var _tslib$1 = {};
 				return t;
 			};
 		return exports.__assign.apply(this, arguments);
-	};
+	}; 
 } (_tslib$1));
 
 var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
@@ -3493,6 +3504,8 @@ function jssCombineAndSortMQ(options) {
 
 var dist = jssCombineAndSortMQ;
 
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+
 /* Auto Generated Start */
 const themeLight = {
     primaryColor: '#010205',
@@ -3615,7 +3628,7 @@ createJss({
         jssGlobal(),
         jssNested(),
         camelCase$1(),
-        dist({ combineMediaQueries: true }),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
     ],
 });
 const supportsConstructableStylesheets = () => {
@@ -3641,10 +3654,6 @@ const isScrollable = (isPrevHidden, isNextHidden) => {
 const hasDocument = typeof document !== 'undefined';
 
 hasDocument && 'scrollBehavior' in document.documentElement.style;
-const win = typeof window !== 'undefined' ? window : {};
-win.document || { head: {} };
-(win.HTMLElement || class {
-});
 
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
@@ -3795,7 +3804,7 @@ Object.entries(innerManifest[size])
     .join();
 
 const CDN_BASE_URL = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/model-signatures';
-const MODEL_SIGNATURES_MANIFEST = { "718": "718.min.64611f93dc2fc9e234e25b88cca12593.svg", "911": "911.min.5c462658f9d472e90a139173414e8fdd.svg", "boxster": "boxster.min.5e7b22a1fa25004a4f97807d57f32b21.svg", "cayenne": "cayenne.min.4026ba6b335cc98e10592f900cf731e1.svg", "cayman": "cayman.min.c634f6f3de1d67610b2e4230e60337fb.svg", "macan": "macan.min.e38fbf34ed4f00066620901babd99af0.svg", "panamera": "panamera.min.d35913b252657f7c5cfcae74cfd61b26.svg", "taycan": "taycan.min.ba4e7c3cb86a78d626d4463b81be0f23.svg", "turbo-s": "turbo-s.min.8201d60c1b5e00daf9e23784fd199111.svg", "turbo": "turbo.min.cfde5de85fdc84be597dfad4402c5f6f.svg" };
+const MODEL_SIGNATURES_MANIFEST = { "718": "718.min.d92dc0fe91e67bd51120d91c5cd1eb2f.svg", "911": "911.min.5c462658f9d472e90a139173414e8fdd.svg", "boxster": "boxster.min.5e7b22a1fa25004a4f97807d57f32b21.svg", "cayenne": "cayenne.min.4026ba6b335cc98e10592f900cf731e1.svg", "cayman": "cayman.min.c634f6f3de1d67610b2e4230e60337fb.svg", "macan": "macan.min.e38fbf34ed4f00066620901babd99af0.svg", "panamera": "panamera.min.d35913b252657f7c5cfcae74cfd61b26.svg", "taycan": "taycan.min.ba4e7c3cb86a78d626d4463b81be0f23.svg", "turbo-s": "turbo-s.min.8201d60c1b5e00daf9e23784fd199111.svg", "turbo": "turbo.min.cfde5de85fdc84be597dfad4402c5f6f.svg" };
 const getSvgUrl = (model) => {
     const cdnBaseUrl = CDN_BASE_URL
         ;
@@ -4012,6 +4021,29 @@ if (tempIcon) {
     tempIcon.style.width = ICON_SIZE;
     tempIcon.style.marginRight = ICON_MARGIN;
 }
+const getSelectWrapperDropdownButtonAriaAttributes = (isOpen, labelId, descriptionId, dropdownId, activeDescendantId) => {
+    return Object.assign({ 'aria-labelledby': labelId, 'aria-describedby': descriptionId || null, 'aria-haspopup': 'listbox', 'aria-expanded': isOpen ? 'true' : 'false', 'aria-controls': dropdownId }, (isOpen && {
+        'aria-activedescendant': `option-${activeDescendantId}`,
+    }));
+};
+const getFilterInputAriaAttributes = (isOpen, isRequired, labelId, descriptionId, dropdownId, activeDescendantId) => {
+    return Object.assign(Object.assign(Object.assign({}, getSelectWrapperDropdownButtonAriaAttributes(isOpen, labelId, descriptionId, dropdownId, activeDescendantId)), { 'aria-autocomplete': 'list' }), (isRequired && {
+        'aria-required': 'true',
+    }));
+};
+const getHighlightedOptionMapIndex = (arr) => arr.findIndex((item) => item.highlighted);
+const getSelectedOptionMap = (arr) => arr.find((item) => item.selected);
+const isCustomDropdown = (filter, native) => {
+    if (filter) {
+        return true;
+    }
+    else if (native) {
+        return false;
+    }
+    else {
+        return !isTouchDevice();
+    }
+};
 const isStateCompleteOrWarning = (state) => {
     return state === 'complete' || state === 'warning';
 };
@@ -4055,4 +4087,4 @@ const getTextTagType = (host, tag) => {
     }
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, TEXT_TAGS, _hasShowPickerSupport, attributeMutationMap, buildCrestSrcSet, buildIconUrl, buildSrcSet, cdnBaseUrl, childrenMutationMap, createPaginationModel, createRange, crestCdnBaseUrl, crestInnerManifest, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getClosestHTMLElement, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getLinkButtonThemeForIcon, getRole, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificSlottedTag, hasVisibleIcon, hasWindow, isDisabledOrLoading, isHighContrastMode, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isType, isUrl, isWithinForm, itemTypes, modelSignatureHeight, parseAndGetAriaAttributes, parseJSONAttribute, resizeMap, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, tempDiv, tempIcon, tempLabel };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, TEXT_TAGS, _hasShowPickerSupport, attributeMutationMap, buildCrestSrcSet, buildIconUrl, buildSrcSet, cdnBaseUrl, childrenMutationMap, createPaginationModel, createRange, crestCdnBaseUrl, crestInnerManifest, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getClosestHTMLElement, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFilterInputAriaAttributes, getHTMLElement, getHeadingTagType, getHeadlineTagType, getHighlightedOptionMapIndex, getIconColor, getInlineNotificationIconName, getInnerManifest, getLinkButtonThemeForIcon, getRole, getSelectWrapperDropdownButtonAriaAttributes, getSelectedOptionMap, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificSlottedTag, hasVisibleIcon, hasWindow, isCustomDropdown, isDisabledOrLoading, isHighContrastMode, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isTouchDevice, isType, isUrl, isWithinForm, itemTypes, modelSignatureHeight, parseAndGetAriaAttributes, parseJSONAttribute, resizeMap, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, tempDiv, tempIcon, tempLabel };

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

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRIcon } from '../dsr-components/icon.js';
 
-const PIcon = forwardRef(({ aria, color = 'primary', lazy = false, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+const PIcon = forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme];

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

@@ -4,13 +4,13 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRScroller } from '../dsr-components/scroller.js';
 
-const PScroller = forwardRef(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, children, ...rest }, ref) => {
+const PScroller = forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
+    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -21,7 +21,7 @@ const PScroller = forwardRef(({ alignScrollIndicator = 'center', gradientColor =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRScroller, { ...{ alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme, children } })),
+                children: (jsx(DSRScroller, { ...{ alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme, children } })),
             }
             : {
                 children,