@porsche-design-system/components-react 3.2.0 → 3.3.0-rc.0

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

@@ -16,7 +16,7 @@ hasWindow &&
             .filter((mutation) => mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
             // remove duplicates so we execute callback only once per node
             .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-            .forEach((mutation) => { var _a; return (_a = attributeMutationMap.get(mutation.target)) === null || _a === void 0 ? void 0 : _a(); });
+            .forEach((mutation) => attributeMutationMap.get(mutation.target)?.());
     });
 
 const parseJSON = (prop) => {
@@ -28,7 +28,7 @@ const parseJSON = (prop) => {
                 .replace(/[\s"]?([a-z]+)[\s"]?:([^//])/g, '"$1":$2') // wrap keys in double quotes if they don't have them but ignore potential urls
             );
         }
-        catch (_a) {
+        catch {
             // prop is string, e.g. "block" or "inline"
             return prop;
         }
@@ -308,7 +308,7 @@ const textLargeStyle = {
 const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
 hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
-Object.entries(breakpoint).reduce((result, [key, val]) => (Object.assign(Object.assign({}, result), { [`${val}px`]: key })), {});
+Object.entries(breakpoint).reduce((result, [key, val]) => ({ ...result, [`${val}px`]: key }), {});
 
 const hasVisibleIcon = (iconName, iconSource) => {
     return iconName !== 'none' || !!iconSource;
@@ -324,7 +324,7 @@ hasWindow &&
                 // remove duplicates so we execute callback only once per node
                 .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
                 // find node in map that contains the mutated element to find and invoke its callback
-                .forEach((mutation) => { var _a; return (_a = childrenMutationMap.get(mapKeys.find((node) => node.contains(mutation.target)))) === null || _a === void 0 ? void 0 : _a(); });
+                .forEach((mutation) => childrenMutationMap.get(mapKeys.find((node) => node.contains(mutation.target)))?.());
         }
     });
 
@@ -3751,7 +3751,7 @@ const schemeHighContrast = {
     linkColor: 'LinkText',
 };
 const getThemedColors = (theme) => {
-    return isHighContrastMode ? Object.assign(Object.assign({}, themes[theme]), schemeHighContrastMerged) : themes[theme];
+    return isHighContrastMode ? { ...themes[theme], ...schemeHighContrastMerged } : themes[theme];
 };
 const getHighContrastColors = () => {
     return schemeHighContrast;
@@ -3796,7 +3796,14 @@ const getResetInitialStylesForSlottedAnchor = {
 };
 const focusPseudoJssStyle = {
     outline: 0,
-    '&:focus::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { borderRadius: '1px', outline: `${borderWidthBase} solid ${themeLightStateFocus}`, outlineOffset: '2px' }),
+    '&:focus::before': {
+        content: '""',
+        position: 'absolute',
+        ...getInsetJssStyle(),
+        borderRadius: '1px',
+        outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
+        outlineOffset: '2px',
+    },
     '&:focus:not(:focus-visible)::before': {
         outline: 0,
     },
@@ -3814,7 +3821,13 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => isHidden
         height: '1px',
         textIndent: '-999999px',
     }
-    : Object.assign({ position: 'static', width: 'auto', height: 'auto', textIndent: 0 }, isShownJssStyle);
+    : {
+        position: 'static',
+        width: 'auto',
+        height: 'auto',
+        textIndent: 0,
+        ...isShownJssStyle,
+    };
 const getBackfaceVisibilityJssStyle = () => ({
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
@@ -3829,12 +3842,24 @@ const getBackfaceVisibilityJssStyle = () => ({
 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}` }),
+        '&::before': {
+            content: '""',
+            position: 'fixed',
+            ...getInsetJssStyle(),
+            background: themeDarkBackgroundShading,
+            pointerEvents: 'none',
+            ...(isVisible
+                ? {
+                    opacity: 1,
+                    ...frostedGlassStyle,
+                }
+                : {
+                    opacity: 0,
+                    backdropFilter: 'blur(0px)',
+                    WebkitBackdropFilter: 'blur(0px)',
+                }),
+            transition: `opacity ${duration} ${timingFn}, backdrop-filter ${duration} ${timingFn}, --webkit-backdrop-filter ${duration} ${timingFn}`,
+        },
     };
 };
 
@@ -3879,7 +3904,7 @@ const supportsConstructableStylesheets = () => {
     try {
         return typeof new CSSStyleSheet().replaceSync === 'function';
     }
-    catch (_a) {
+    catch {
         return false;
     }
 };
@@ -3893,9 +3918,11 @@ const buildResponsiveStyles = (rawValue, getJssStyle) => {
             // base styles are applied on root object, responsive styles are nested within
             // hence it is used as the initial object within reduce function
             .filter((key) => key !== 'base')
-            .reduce((result, breakpointValue) => (Object.assign(Object.assign({}, result), { 
+            .reduce((result, breakpointValue) => ({
+            ...result,
             // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            [getMediaQueryMin(breakpointValue)]: getJssStyle(value[breakpointValue]) })), getJssStyle(value.base))
+            [getMediaQueryMin(breakpointValue)]: getJssStyle(value[breakpointValue]),
+        }), getJssStyle(value.base))
         : getJssStyle(value);
 };
 const isObject = (obj) => typeof obj === 'object' && !Array.isArray(obj);
@@ -3932,7 +3959,7 @@ const formatObjectOutput = (value) => {
         .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
 };
 'value, ' +
-    formatObjectOutput(breakpoints.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
+    formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
@@ -3940,34 +3967,65 @@ const getComponentCss$Z = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'block' }, (!compact && {
-                borderBottom: `1px solid ${contrastLowColor}`,
-            })), hostHiddenStyles)),
-            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeightSemiBold }), buildResponsiveStyles(size, (s) => ({
-                fontSize: s === 'medium' ? fontSizeTextMedium : fontSizeTextSmall,
-                padding: `${compact ? '4px' : s === 'medium' ? '20px' : '15px'} 0`,
-            }))), mergeDeep({
-                '&::before': Object.assign({ content: '""', position: 'absolute', borderRadius: borderRadiusSmall, left: '-4px', right: '-4px' }, (compact
-                    ? {
-                        top: '2px',
-                        bottom: '2px',
-                    }
-                    : {
-                        top: '6px',
-                        bottom: '6px',
-                    })),
-            }, hoverMediaQuery({
-                '&::before': {
-                    transition: getTransition('background-color'),
-                },
-                '&:hover::before': {
-                    background: hoverColor,
-                },
-            }))), { '&:focus::before': {
+            ':host': addImportantToEachRule({
+                display: 'block',
+                ...(!compact && {
+                    borderBottom: `1px solid ${contrastLowColor}`,
+                }),
+                ...hostHiddenStyles,
+            }),
+            button: {
+                display: 'flex',
+                position: 'relative',
+                justifyContent: 'space-between',
+                width: '100%',
+                textDecoration: 'none',
+                border: 0,
+                outline: 0,
+                gap: '24px',
+                background: 'transparent',
+                cursor: 'pointer',
+                textAlign: 'left',
+                color: primaryColor,
+                ...textSmallStyle,
+                fontWeight: fontWeightSemiBold,
+                ...buildResponsiveStyles(size, (s) => ({
+                    fontSize: s === 'medium' ? fontSizeTextMedium : fontSizeTextSmall,
+                    padding: `${compact ? '4px' : s === 'medium' ? '20px' : '15px'} 0`,
+                })),
+                // mergeDeep needed because of hoverMediaQuery in certain modes not wrapping keys and therefore overriding "&::before" key
+                ...mergeDeep({
+                    '&::before': {
+                        content: '""',
+                        position: 'absolute',
+                        borderRadius: borderRadiusSmall,
+                        left: '-4px',
+                        right: '-4px',
+                        ...(compact
+                            ? {
+                                top: '2px',
+                                bottom: '2px',
+                            }
+                            : {
+                                top: '6px',
+                                bottom: '6px',
+                            }),
+                    },
+                }, hoverMediaQuery({
+                    '&::before': {
+                        transition: getTransition('background-color'),
+                    },
+                    '&:hover::before': {
+                        background: hoverColor,
+                    },
+                })),
+                '&:focus::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
-                }, '&:not(:focus-visible)::before': {
+                },
+                '&:not(:focus-visible)::before': {
                     border: 0,
-                } }),
+                },
+            },
         },
         heading: {
             margin: 0,
@@ -3984,23 +4042,26 @@ const getComponentCss$Z = (size, compact, open, theme) => {
             transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
             transition: getTransition('transform'),
         },
-        collapsible: Object.assign({ color: primaryColor, overflow: 'hidden' }, (open
-            ? {
-                height: 'auto',
-                paddingBottom: compact ? spacingStaticSmall : '24px',
-                visibility: 'visible',
-                transition: getTransition('height') + ',' + getTransition('padding-bottom'),
-                animation: `$open 0s ${transitionDuration} forwards`, // delay overflow change and have `overflow: visible` after transition
-            }
-            : {
-                height: 0,
-                visibility: 'hidden',
-                transition: getTransition('height') + `,visibility 0s linear ${transitionDuration}`,
-            })),
-        // TODO: this doesn't get shortened and results in `keyframes-open` for some unknown reason
-        '@keyframes open': {
-            to: {
-                overflow: 'visible',
+        collapsible: {
+            color: primaryColor,
+            display: 'grid',
+            ...(open
+                ? {
+                    gridTemplateRows: '1fr',
+                    visibility: 'visible',
+                    transition: `grid-template-rows ${transitionDuration} ease-out`,
+                    paddingBottom: compact ? spacingStaticSmall : '24px',
+                }
+                : {
+                    gridTemplateRows: '0fr',
+                    visibility: 'hidden',
+                    transition: `grid-template-rows ${transitionDuration} ease-out, visibility 0s linear ${transitionDuration}`,
+                }),
+            '& div': {
+                overflow: 'hidden',
+                // Necessary to make focus outlines fully visible
+                padding: '4px',
+                margin: '-4px',
             },
         },
     });
@@ -4024,24 +4085,47 @@ const topBottomFallback = '56px';
 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
-                ? {
-                    opacity: 1,
-                    visibility: 'inherit',
-                    transform: 'translate3d(0,0,0)',
-                    transition: `opacity ${duration$1} ${easeInQuad$1},transform ${duration$1} ${easeInQuad$1}`,
-                }
-                : {
-                    opacity: 0,
-                    visibility: 'hidden',
-                    transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
-                    '&(.hydrated),&(.ssr)': {
-                        transition: `visibility 0s linear ${duration$1},opacity ${duration$1} ${easeOutQuad$1},transform ${duration$1} ${easeOutQuad$1}`,
-                    },
-                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop},${topBottomFallback})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` })), [getMediaQueryMin('xxl')]: {
+            ':host': addImportantToEachRule({
+                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
+                    ? {
+                        opacity: 1,
+                        visibility: 'inherit',
+                        transform: 'translate3d(0,0,0)',
+                        transition: `opacity ${duration$1} ${easeInQuad$1},transform ${duration$1} ${easeInQuad$1}`,
+                    }
+                    : {
+                        opacity: 0,
+                        visibility: 'hidden',
+                        transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
+                        '&(.hydrated),&(.ssr)': {
+                            transition: `visibility 0s linear ${duration$1},opacity ${duration$1} ${easeOutQuad$1},transform ${duration$1} ${easeOutQuad$1}`,
+                        },
+                    }),
+                [getMediaQueryMin('s')]: {
+                    top: `var(${cssVariableTop},${topBottomFallback})`,
+                    bottom: 'auto',
+                    left: gridExtendedOffsetS,
+                    right: gridExtendedOffsetS,
+                    // space before and after "-" is crucial)
+                    ...(!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` }),
+                },
+                [getMediaQueryMin('xxl')]: {
                     left: gridExtendedOffsetXXL,
                     right: gridExtendedOffsetXXL,
-                } }), hostHiddenStyles)),
+                },
+                ...hostHiddenStyles,
+            }),
         },
     });
 };
@@ -4063,8 +4147,15 @@ const getGroupDirectionJssStyles = (direction) => {
 const getComponentCss$X = (direction) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            div: Object.assign({ display: 'flex', gap: spacingFluidSmall }, buildResponsiveStyles(direction, getGroupDirectionJssStyles)),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
+            div: {
+                display: 'flex',
+                gap: spacingFluidSmall,
+                ...buildResponsiveStyles(direction, getGroupDirectionJssStyles),
+            },
         },
     });
 };
@@ -4085,75 +4176,134 @@ const getFontSizeText = (size) => {
 // Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
 const getVisibilityJssStyle = (hideLabel) => {
     return hideLabel
-        ? Object.assign(Object.assign({ position: 'absolute' }, getInsetJssStyle()), { whiteSpace: 'nowrap', textIndent: '-999999px' }) : Object.assign(Object.assign({ position: 'relative' }, getInsetJssStyle('auto')), { whiteSpace: 'inherit', textIndent: 0 });
+        ? {
+            position: 'absolute',
+            ...getInsetJssStyle(),
+            whiteSpace: 'nowrap',
+            textIndent: '-999999px',
+        }
+        : {
+            position: 'relative',
+            ...getInsetJssStyle('auto'),
+            whiteSpace: 'inherit',
+            textIndent: 0,
+            zIndex: 1, // fix Firefox bug on :hover (#2583)
+        };
 };
 const offsetVertical = '-2px';
 const offsetHorizontal = '-4px';
 const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme) => {
     const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource);
-    return Object.assign({ '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ transform: 'translate3d(0,0,0)', outline: 0 }, hostHiddenStyles))), buildResponsiveStyles(stretch, (responsiveStretch) => (Object.assign({ display: responsiveStretch ? 'block' : 'inline-block', width: responsiveStretch ? '100%' : 'auto' }, (!responsiveStretch && { verticalAlign: 'top' }))))),
-        }, root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', gap: spacingStaticXSmall, width: '100%', margin: 0, padding: 0, color: isDisabledOrLoading ? disabledColor : primaryColor, outline: 0 }, textSmallStyle), mergeDeep(buildResponsiveStyles(stretch, (stretchValue) => ({
-            justifyContent: stretchValue ? 'space-between' : 'flex-start',
-            alignItems: stretchValue ? 'center' : 'flex-start',
-        })), buildResponsiveStyles(size, (sizeValue) => ({
-            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 ? 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 }),
-            }))), (!hasSlottedAnchor && {
-            '&:focus::before': {
-                border: `${borderWidthBase} solid ${focusColor}`,
+    return {
+        '@global': {
+            ':host': {
+                ...addImportantToEachRule({
+                    transform: 'translate3d(0,0,0)',
+                    outline: 0,
+                    ...hostHiddenStyles,
+                }),
+                ...buildResponsiveStyles(stretch, (responsiveStretch) => ({
+                    display: responsiveStretch ? 'block' : 'inline-block',
+                    width: responsiveStretch ? '100%' : 'auto',
+                    ...(!responsiveStretch && { verticalAlign: 'top' }),
+                })),
             },
-            '&:not(:focus-visible)::before': {
-                border: 0,
+        },
+        root: {
+            display: 'flex',
+            gap: spacingStaticXSmall,
+            width: '100%',
+            margin: 0,
+            padding: 0,
+            color: isDisabledOrLoading ? disabledColor : primaryColor,
+            outline: 0,
+            ...textSmallStyle,
+            ...mergeDeep(buildResponsiveStyles(stretch, (stretchValue) => ({
+                justifyContent: stretchValue ? 'space-between' : 'flex-start',
+                alignItems: stretchValue ? 'center' : 'flex-start',
+            })), buildResponsiveStyles(size, (sizeValue) => ({
+                fontSize: getFontSizeText(sizeValue),
+            }))),
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                top: offsetVertical,
+                bottom: offsetVertical,
+                ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                    right: hideLabelValue ? offsetVertical : offsetHorizontal,
+                    left: hideLabelValue ? offsetVertical : offsetHorizontal,
+                })),
+                borderRadius: borderRadiusSmall,
+                transition: getTransition('background-color'),
+                ...(active && {
+                    ...frostedGlassStyle,
+                    backgroundColor: hoverColor,
+                }),
             },
-        })), label: {
+            ...(!isDisabledOrLoading &&
+                hoverMediaQuery({
+                    '&:hover::before': {
+                        ...frostedGlassStyle,
+                        backgroundColor: hoverColor,
+                    },
+                })),
+            ...(!hasSlottedAnchor && {
+                '&:focus::before': {
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                },
+                '&:not(:focus-visible)::before': {
+                    border: 0,
+                },
+            }),
+        },
+        label: {
             position: 'relative', // needed for hover state when icon="none" is set
-        } }, (hasIcon && {
-        icon: {
-            position: 'relative',
-            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,
-        }))),
-    }));
+        ...(hasIcon && {
+            icon: {
+                position: 'relative',
+                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,
+            }))),
+        }),
+    };
 };
 
 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: {
+    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
+        root: {
             appearance: 'none',
             background: 'transparent',
             textAlign: 'left',
             border: 0,
             cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
-        } }, (!hasIcon &&
-        isLoading && {
-        label: {
-            visibility: 'hidden',
-        },
-        icon: {
-            position: 'absolute',
-            top: 0,
-            left: `calc(50% - ${fontLineHeight} / 2)`,
-            width: fontLineHeight,
-            height: fontLineHeight,
         },
-    }))));
+        ...(!hasIcon &&
+            isLoading && {
+            label: {
+                visibility: 'hidden',
+            },
+            icon: {
+                position: 'absolute',
+                top: 0,
+                left: `calc(50% - ${fontLineHeight} / 2)`,
+                width: fontLineHeight,
+                height: fontLineHeight,
+            },
+        }),
+    }));
 };
 
 const fontWeightMap = {
@@ -4192,25 +4342,46 @@ const aspectRatioPaddingMap = {
 };
 const getTileBaseStyles = (aspectRatio, isDisabled) => {
     return {
-        '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)) }, addImportantToEachRule({
-            '::slotted': {
-                '&(picture)': Object.assign({ position: 'absolute' }, getInsetJssStyle()),
-                '&(img)': {
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'cover',
-                },
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
             },
-        })),
-        root: Object.assign(Object.assign({ position: 'relative', overflow: 'hidden', transform: 'translate3d(0,0,0)', borderRadius: borderRadiusLarge, color: getThemedTypographyColor('dark', 'primary') }, buildResponsiveStyles(aspectRatio, (ratio) => ({
-            paddingTop: aspectRatioPaddingMap[ratio],
-        }))), (!isDisabled &&
-            hoverMediaQuery({
-                '&:hover .image-container': {
-                    transform: 'scale3d(1.05,1.05,1.05)',
+            ...addImportantToEachRule({
+                '::slotted': {
+                    '&(picture)': {
+                        position: 'absolute',
+                        ...getInsetJssStyle(),
+                    },
+                    '&(img)': {
+                        height: '100%',
+                        width: '100%',
+                        objectFit: 'cover',
+                    },
                 },
-            }))),
-        'image-container': Object.assign({ position: 'absolute', transition: getTransition('transform') }, getInsetJssStyle()),
+            }),
+        },
+        root: {
+            position: 'relative',
+            overflow: 'hidden',
+            transform: 'translate3d(0,0,0)',
+            borderRadius: borderRadiusLarge,
+            color: getThemedTypographyColor('dark', 'primary'),
+            ...buildResponsiveStyles(aspectRatio, (ratio) => ({
+                paddingTop: aspectRatioPaddingMap[ratio],
+            })),
+            ...(!isDisabled &&
+                hoverMediaQuery({
+                    '&:hover .image-container': {
+                        transform: 'scale3d(1.05,1.05,1.05)',
+                    },
+                })),
+        },
+        'image-container': {
+            position: 'absolute',
+            transition: getTransition('transform'),
+            ...getInsetJssStyle(),
+        },
         content: {
             position: 'absolute',
             left: 0,
@@ -4233,32 +4404,59 @@ const sizeMap$5 = {
 const getButtonLinkTileStyles = (aspectRatio, size, weight, // to get deprecated semibold typed
 align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
-    return Object.assign({}, mergeDeep(getTileBaseStyles(aspectRatio, isDisabled), {
-        '@global': {
-            p: Object.assign(Object.assign({ maxWidth: pxToRemWithUnit(550), margin: 0 }, textLargeStyle), mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$5[s]), buildResponsiveStyles(weight, (w) => ({
-                fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w), // mapping of the deprecated weight semibold
-            })))),
-        },
-        content: Object.assign(Object.assign(Object.assign({ display: 'grid' }, (isTopAligned ? { top: 0 } : { bottom: 0 })), { padding: isTopAligned
-                ? `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`
-                : `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}` }), mergeDeep(hasGradient &&
-            buildResponsiveStyles(compact, (isCompact) => isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle), buildResponsiveStyles(compact, (isCompact) => isCompact // TODO: use flex
-            ? Object.assign({ alignItems: 'center', gridTemplateColumns: 'auto 24px', gridTemplateRows: 'auto' }, (isTopAligned ? { top: 0 } : { bottom: 0 })) : {
-            gridTemplateRows: 'auto auto',
-            gridTemplateColumns: 'auto',
-        }))),
-        'link-or-button-pure': buildResponsiveStyles(compact, (isCompact) => ({
-            display: isCompact ? 'inline-block' : 'none',
-        })),
-        'link-or-button': Object.assign({ minHeight: '54px' }, buildResponsiveStyles(compact, (isCompact) => ({
-            display: isCompact ? 'none' : 'inline-block',
-        }))),
-    }));
+    return {
+        ...mergeDeep(getTileBaseStyles(aspectRatio, isDisabled), {
+            '@global': {
+                p: {
+                    maxWidth: pxToRemWithUnit(550),
+                    margin: 0,
+                    ...textLargeStyle,
+                    ...mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$5[s]), buildResponsiveStyles(weight, (w) => ({
+                        fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w), // mapping of the deprecated weight semibold
+                    }))),
+                },
+            },
+            content: {
+                display: 'grid',
+                ...(isTopAligned ? { top: 0 } : { bottom: 0 }),
+                padding: isTopAligned
+                    ? `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`
+                    : `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`,
+                ...mergeDeep(hasGradient &&
+                    buildResponsiveStyles(compact, (isCompact) => isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle), buildResponsiveStyles(compact, (isCompact) => isCompact // TODO: use flex
+                    ? {
+                        alignItems: 'center',
+                        gridTemplateColumns: 'auto 24px',
+                        gridTemplateRows: 'auto',
+                        ...(isTopAligned ? { top: 0 } : { bottom: 0 }),
+                    }
+                    : {
+                        gridTemplateRows: 'auto auto',
+                        gridTemplateColumns: 'auto',
+                    })),
+            },
+            'link-or-button-pure': buildResponsiveStyles(compact, (isCompact) => ({
+                display: isCompact ? 'inline-block' : 'none',
+            })),
+            'link-or-button': {
+                minHeight: '54px',
+                ...buildResponsiveStyles(compact, (isCompact) => ({
+                    display: isCompact ? 'none' : 'inline-block',
+                })),
+            },
+        }),
+    };
 };
 
 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' }) }));
+    return getCss({
+        ...buttonLinkTileStyles,
+        root: {
+            ...buttonLinkTileStyles.root,
+            cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
+        },
+    });
 };
 
 const { primaryColor: darkThemePrimaryColor$1 } = getThemedColors('dark');
@@ -4289,26 +4487,69 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
     const { textColor, borderColor, borderColorHover, backgroundColor, backgroundColorHover } = getVariantColors(variant, theme);
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
-    return Object.assign({ '@global': {
-            ':host': Object.assign({ display: 'inline-block' }, addImportantToEachRule(Object.assign({ verticalAlign: 'top', outline: 0 }, hostHiddenStyles))),
-        }, root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-start', justifyContent: 'center', width: '100%', minWidth: '54px', minHeight: '54px', boxSizing: 'border-box', outline: 0, textAlign: 'left', appearance: 'none', textDecoration: 'none', border: `2px solid ${borderColor}`, borderRadius: borderRadiusSmall, transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
-            backgroundColor, color: textColor }, textSmallStyle), { transition: ['background-color', 'border-color', 'color'].map(getTransition).join() }), buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-            padding: hideLabelValue ? '13px' : hasIcon ? '13px 26px 13px 18px' : '13px 26px',
-            gap: hideLabelValue ? 0 : spacingStaticSmall,
-        }))), (!hasSlottedAnchor && {
-            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusMedium }, getInsetJssStyle(-6)),
-            '&:not(:focus-visible)::before': {
-                border: 0,
+    return {
+        '@global': {
+            ':host': {
+                display: 'inline-block',
+                ...addImportantToEachRule({
+                    verticalAlign: 'top',
+                    outline: 0,
+                    ...hostHiddenStyles,
+                }),
             },
-        })), (!isDisabledOrLoading &&
-            hoverMediaQuery({
-                '&:hover': Object.assign({ backgroundColor: backgroundColorHover, borderColor: isHighContrastMode ? focusColor : borderColorHover }, (!isPrimary && frostedGlassStyle)),
-            }))), label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle) }, (hasIcon && {
-        icon: {
-            width: fontLineHeight,
-            height: fontLineHeight,
         },
-    }));
+        root: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            width: '100%',
+            minWidth: '54px',
+            minHeight: '54px',
+            boxSizing: 'border-box',
+            outline: 0,
+            textAlign: 'left',
+            appearance: 'none',
+            textDecoration: 'none',
+            border: `2px solid ${borderColor}`,
+            borderRadius: borderRadiusSmall,
+            transform: 'translate3d(0,0,0)',
+            backgroundColor,
+            color: textColor,
+            ...textSmallStyle,
+            transition: ['background-color', 'border-color', 'color'].map(getTransition).join(),
+            ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                padding: hideLabelValue ? '13px' : hasIcon ? '13px 26px 13px 18px' : '13px 26px',
+                gap: hideLabelValue ? 0 : spacingStaticSmall,
+            })),
+            ...(!hasSlottedAnchor && {
+                '&:focus::before': {
+                    content: '""',
+                    position: 'fixed',
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                    borderRadius: borderRadiusMedium,
+                    ...getInsetJssStyle(-6),
+                },
+                '&:not(:focus-visible)::before': {
+                    border: 0,
+                },
+            }),
+            ...(!isDisabledOrLoading &&
+                hoverMediaQuery({
+                    '&:hover': {
+                        backgroundColor: backgroundColorHover,
+                        borderColor: isHighContrastMode ? focusColor : borderColorHover,
+                        ...(!isPrimary && frostedGlassStyle),
+                    },
+                })),
+        },
+        label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle),
+        ...(hasIcon && {
+            icon: {
+                width: fontLineHeight,
+                height: fontLineHeight,
+            },
+        }),
+    };
 };
 
 const getDisabledColors = (variant, loading, theme) => {
@@ -4332,25 +4573,40 @@ const getComponentCss$U = (icon, iconSource, variant, hideLabel, disabled, loadi
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, theme), Object.assign(Object.assign({ root: Object.assign(Object.assign({ cursor: disabledOrLoading ? 'not-allowed' : 'pointer' }, (disabledOrLoading && {
-            backgroundColor,
-            borderColor,
-            color: textColor,
-        })), (loading && !isPrimary && frostedGlassStyle)) }, (loading && {
-        spinner: {
-            width: fontLineHeight,
-            height: fontLineHeight,
-            pointerEvents: 'none',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, theme), {
+        root: {
+            cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
+            ...(disabledOrLoading && {
+                backgroundColor,
+                borderColor,
+                color: textColor,
+            }),
+            ...(loading && !isPrimary && frostedGlassStyle),
+        },
+        ...(loading && {
+            spinner: {
+                width: fontLineHeight,
+                height: fontLineHeight,
+                pointerEvents: 'none',
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+            },
+        }),
+        label: {
+            transition: getTransition('opacity'),
+            ...(loading && {
+                opacity: 0, // use opacity for smooth transition between states
+            }),
+        },
+        icon: {
+            transition: getTransition('opacity'),
+            ...(loading && {
+                opacity: 0, // use opacity for smooth transition between states
+            }),
         },
-    })), { label: Object.assign({ transition: getTransition('opacity') }, (loading && {
-            opacity: 0, // use opacity for smooth transition between states
-        })), icon: Object.assign({ transition: getTransition('opacity') }, (loading && {
-            opacity: 0, // use opacity for smooth transition between states
-        })) })));
+    }));
 };
 
 const carouselTransitionDuration = 400;
@@ -4376,10 +4632,32 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
     const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
-    return getCss(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'flex', gap: spacingFluidMedium, flexDirection: 'column', boxSizing: 'content-box' }, hostHiddenStyles)),
-            [selectorHeading]: addImportantToEachRule(Object.assign(Object.assign({}, headingXLargeStyle), { maxWidth: '56.25rem', margin: 0 })),
-            [selectorDescription]: addImportantToEachRule(Object.assign(Object.assign({}, textSmallStyle), { maxWidth: '34.375rem', margin: `${spacingFluidXSmall} 0 0` })),
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                display: 'flex',
+                gap: spacingFluidMedium,
+                flexDirection: 'column',
+                boxSizing: 'content-box',
+                ...hostHiddenStyles,
+            }),
+            '::slotted(*)': {
+                borderRadius: addImportantToRule(`var(--p-carousel-border-radius, ${borderRadiusLarge})`),
+            },
+            '::slotted(*:focus-visible)': addImportantToEachRule({
+                outline: `${borderWidthBase} solid ${focusColor}`,
+                outlineOffset: '2px',
+            }),
+            [selectorHeading]: addImportantToEachRule({
+                ...headingXLargeStyle,
+                maxWidth: '56.25rem',
+                margin: 0,
+            }),
+            [selectorDescription]: addImportantToEachRule({
+                ...textSmallStyle,
+                maxWidth: '34.375rem',
+                margin: `${spacingFluidXSmall} 0 0`,
+            }),
             [`${selectorHeading},${selectorDescription}`]: addImportantToEachRule({
                 color: primaryColor,
                 [mediaQueryS]: isHeaderAlignCenter
@@ -4390,13 +4668,28 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
                         gridColumn: '1 / 3',
                     },
             }),
-        }, 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]: {
+        },
+        header: {
+            display: 'grid',
+            padding: `0 ${spacingMap[width].base}`,
+            ...(isHeaderAlignCenter && {
+                textAlign: 'center',
+            }),
+            [mediaQueryS]: {
+                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].xxl}`,
-            } }), nav: {
+            },
+        },
+        nav: {
             display: 'none',
             [mediaQueryS]: {
                 display: 'flex',
@@ -4406,88 +4699,128 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
                 justifyContent: 'end',
                 justifySelf: 'end',
             },
-        }, btn: {
+        },
+        btn: {
             padding: spacingStaticSmall,
-        }, 'skip-link': {
+        },
+        'skip-link': {
             opacity: 0,
             pointerEvents: 'none',
             '&:focus': {
                 opacity: 1,
                 pointerEvents: 'all',
             },
-        }, splide: {
+        },
+        splide: {
             overflow: 'hidden',
-            // visibility: 'hidden',
             padding: '4px 0',
             margin: '-4px 0',
-            '&__track': Object.assign(Object.assign({ cursor: 'grab' }, addImportantToEachRule({
-                padding: `0 ${spacingMap[width].base}`,
-                [getMediaQueryMax('xs')]: {
-                    paddingRight: `calc(${gridBasicOffsetBase} + ${gridGap})`, // we need to give cut off slides a bit more space on mobile views
-                },
-                [mediaQueryS]: {
-                    padding: `0 ${spacingMap[width].s}`,
-                },
-                [mediaQueryXXL]: {
-                    padding: `0 ${spacingMap[width].xxl}`,
-                },
-            })), { '&--draggable': {
+            '&__track': {
+                cursor: 'grab',
+                // !important is necessary to override inline styles set by splide library
+                ...addImportantToEachRule({
+                    padding: `0 ${spacingMap[width].base}`,
+                    [getMediaQueryMax('xs')]: {
+                        paddingRight: `calc(${gridBasicOffsetBase} + ${gridGap})`, // we need to give cut off slides a bit more space on mobile views
+                    },
+                    [mediaQueryS]: {
+                        padding: `0 ${spacingMap[width].s}`,
+                    },
+                    [mediaQueryXXL]: {
+                        padding: `0 ${spacingMap[width].xxl}`,
+                    },
+                }),
+                '&--draggable': {
                     userSelect: 'none',
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
-                } }),
-            '&__list': Object.assign({ display: 'flex' }, getBackfaceVisibilityJssStyle()),
-            '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)', borderRadius: borderRadiusLarge, overflow: 'hidden', '&:focus-visible': {
-                    outline: `${borderWidthBase} solid ${focusColor}`,
-                    outlineOffset: '2px',
-                } }),
-            '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
-        } }, (hasPagination && Object.assign(Object.assign({ ['pagination-container']: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
-            display: hasPaginationValue ? 'flex' : 'none',
-        }))), { position: 'relative', justifyContent: isInfinitePagination ? 'flex-start' : 'center', width: `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * 4 + ${spacingStaticSmall} * 4)`, left: 'calc(50% - 42px)', overflowX: 'hidden' }), pagination: {
-            display: 'flex',
-            alignItems: 'center',
-            width: 'fit-content',
-            height: paginationBulletSize,
-            gap: spacingStaticSmall,
-            transition: `transform ${carouselTransitionDuration}ms`,
-        }, bullet: Object.assign({ borderRadius: borderRadiusSmall, background: isHighContrastMode ? canvasTextColor : contrastMediumColor }, (isInfinitePagination
-            ? {
-                width: '0px',
-                height: '0px',
-                transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms, height ${carouselTransitionDuration}ms`,
-            }
-            : {
-                width: paginationBulletSize,
-                height: paginationBulletSize,
-                transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
-            })) }, (isInfinitePagination && {
-        [`${paginationInfiniteStartCaseClass}`]: {
-            ['& > .bullet:nth-child(-n+4)']: {
-                width: paginationBulletSize,
-                height: paginationBulletSize,
+                },
+            },
+            '&__list': {
+                display: 'flex',
+                ...getBackfaceVisibilityJssStyle(),
             },
+            '&__slide': {
+                flexShrink: 0,
+                ...getBackfaceVisibilityJssStyle(),
+                transform: 'translateZ(0)', // fixes mobile safari flickering, https://github.com/nolimits4web/swiper/issues/3527#issuecomment-609088939
+            },
+            '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
         },
-        [`${bulletInfiniteClass}`]: Object.assign(Object.assign({}, addImportantToEachRule({
-            width: paginationInfiniteBulletSize,
-            height: paginationInfiniteBulletSize,
-        })), { '& ~ span': {
-                width: paginationBulletSize,
-                height: paginationBulletSize,
-            }, [`& ~ .${bulletInfiniteClass} ~ span`]: {
-                width: '0px',
-                height: '0px',
-            } }),
-    })), { [`${bulletActiveClass}`]: Object.assign({ background: isHighContrastMode ? canvasTextColor : primaryColor, height: paginationBulletSize, width: addImportantToRule(paginationActiveBulletSize) }, (isInfinitePagination && {
-            '& ~ span': {
-                width: paginationBulletSize,
+        ...(hasPagination && {
+            ['pagination-container']: {
+                ...buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
+                    display: hasPaginationValue ? 'flex' : 'none',
+                })),
+                position: 'relative',
+                justifyContent: isInfinitePagination ? 'flex-start' : 'center',
+                width: `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * 4 + ${spacingStaticSmall} * 4)`,
+                left: 'calc(50% - 42px)',
+                overflowX: 'hidden',
+            },
+            pagination: {
+                display: 'flex',
+                alignItems: 'center',
+                width: 'fit-content',
                 height: paginationBulletSize,
+                gap: spacingStaticSmall,
+                transition: `transform ${carouselTransitionDuration}ms`,
+            },
+            bullet: {
+                borderRadius: borderRadiusSmall,
+                background: isHighContrastMode ? canvasTextColor : contrastMediumColor,
+                ...(isInfinitePagination
+                    ? {
+                        width: '0px',
+                        height: '0px',
+                        transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms, height ${carouselTransitionDuration}ms`,
+                    }
+                    : {
+                        width: paginationBulletSize,
+                        height: paginationBulletSize,
+                        transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
+                    }),
             },
-            [`& ~ .${bulletInfiniteClass} ~ span`]: {
-                width: '0px',
-                height: '0px',
+            ...(isInfinitePagination && {
+                [`${paginationInfiniteStartCaseClass}`]: {
+                    ['& > .bullet:nth-child(-n+4)']: {
+                        width: paginationBulletSize,
+                        height: paginationBulletSize,
+                    },
+                },
+                [`${bulletInfiniteClass}`]: {
+                    // Necessary to override the bulletActiveClass sibling selector
+                    ...addImportantToEachRule({
+                        width: paginationInfiniteBulletSize,
+                        height: paginationInfiniteBulletSize,
+                    }),
+                    '& ~ span': {
+                        width: paginationBulletSize,
+                        height: paginationBulletSize,
+                    },
+                    [`& ~ .${bulletInfiniteClass} ~ span`]: {
+                        width: '0px',
+                        height: '0px',
+                    },
+                },
+            }),
+            [`${bulletActiveClass}`]: {
+                background: isHighContrastMode ? canvasTextColor : primaryColor,
+                height: paginationBulletSize,
+                width: addImportantToRule(paginationActiveBulletSize),
+                ...(isInfinitePagination && {
+                    '& ~ span': {
+                        width: paginationBulletSize,
+                        height: paginationBulletSize,
+                    },
+                    [`& ~ .${bulletInfiniteClass} ~ span`]: {
+                        width: '0px',
+                        height: '0px',
+                    },
+                }),
             },
-        })) }))));
+        }),
+    });
 };
 
 const getThemedFormStateColors = (theme, state) => {
@@ -4508,7 +4841,14 @@ const getFunctionalComponentRequiredStyles = () => {
 
 const getFunctionalComponentStateMessageStyles = (theme, state) => {
     return {
-        message: Object.assign(Object.assign({ display: 'flex', gap: spacingStaticXSmall, marginTop: spacingStaticXSmall }, textSmallStyle), { color: getThemedFormStateColors(theme, state).formStateColor, transition: getTransition('color') }),
+        message: {
+            display: 'flex',
+            gap: spacingStaticXSmall,
+            marginTop: spacingStaticXSmall,
+            ...textSmallStyle,
+            color: getThemedFormStateColors(theme, state).formStateColor,
+            transition: getTransition('color'),
+        },
     };
 };
 
@@ -4525,9 +4865,14 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
             ? disabledColor
             : formStateColor || primaryColor;
     const checkedHoverColor = formStateHoverColor || contrastHighColor;
-    return Object.assign(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({}, hostHiddenStyles), { display: 'block' })),
-            '::slotted': addImportantToEachRule(Object.assign({ '&(input)': {
+    return {
+        '@global': {
+            ':host': addImportantToEachRule({
+                ...hostHiddenStyles,
+                display: 'block',
+            }),
+            '::slotted': addImportantToEachRule({
+                '&(input)': {
                     position: 'relative',
                     width: fontLineHeight,
                     height: fontLineHeight,
@@ -4545,31 +4890,53 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
                     border: `2px solid ${uncheckedColor}`,
                     outline: 0,
                     cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
-                }, '&(input:checked)': {
+                },
+                '&(input:checked)': {
                     // background-image is merged in later
                     borderColor: checkedColor,
                     backgroundColor: checkedColor,
-                } }, (!disabledOrLoading && Object.assign(Object.assign({}, (!isHighContrastMode &&
-                hoverMediaQuery({
-                    '&(input:hover), .text:hover ~ &(input)': {
-                        borderColor: uncheckedHoverColor,
-                    },
-                    '&(input:checked:hover), .text:hover ~ &(input:checked)': {
-                        borderColor: checkedHoverColor,
-                        backgroundColor: checkedHoverColor,
-                    },
-                }))), (!isDisabled && {
-                '&(input:focus)::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-6)), { border: `${borderWidthBase} solid ${focusColor}` }),
-                '&(input:focus:not(:focus-visible))::before': {
-                    borderColor: 'transparent',
                 },
-            }))))),
+                ...(!disabledOrLoading && {
+                    ...(!isHighContrastMode &&
+                        hoverMediaQuery({
+                            '&(input:hover), .text:hover ~ &(input)': {
+                                borderColor: uncheckedHoverColor,
+                            },
+                            '&(input:checked:hover), .text:hover ~ &(input:checked)': {
+                                borderColor: checkedHoverColor,
+                                backgroundColor: checkedHoverColor,
+                            },
+                        })),
+                    ...(!isDisabled && {
+                        '&(input:focus)::before': {
+                            content: '""',
+                            position: 'absolute',
+                            ...getInsetJssStyle(-6),
+                            border: `${borderWidthBase} solid ${focusColor}`,
+                        },
+                        '&(input:focus:not(:focus-visible))::before': {
+                            borderColor: 'transparent',
+                        },
+                    }),
+                }),
+            }),
             label: {
                 position: 'relative',
                 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, (isHidden) => getHiddenTextJssStyle(isHidden, { padding: `2px 0 0 ${spacingStaticSmall}` }))) }, getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state));
+        },
+        text: {
+            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) => {
@@ -4584,33 +4951,41 @@ const getComponentCss$S = (hideLabel, state, isDisabled, isLoading, theme) => {
     const indeterminateIconColor = isHighContrastMode
         ? canvasColor
         : getThemedColors(theme).primaryColor.replace(/#/g, '%23');
-    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, isLoading, theme), Object.assign({ '@global': {
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign(Object.assign({ '&(input)': {
+    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, isLoading, theme), {
+        '@global': {
+            '::slotted': addImportantToEachRule({
+                '&(input)': {
                     borderRadius: borderRadiusSmall,
-                } }, (!isLoading && {
-                '&(input:checked)': {
-                    backgroundImage: getInlineSVGBackgroundImage(`<path fill="${checkedIconColor}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`),
                 },
-            })), { '&(input:indeterminate)': {
+                ...(!isLoading && {
+                    '&(input:checked)': {
+                        backgroundImage: getInlineSVGBackgroundImage(`<path fill="${checkedIconColor}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`),
+                    },
+                }),
+                '&(input:indeterminate)': {
                     backgroundImage: getInlineSVGBackgroundImage(`<path fill="${indeterminateIconColor}" d="m20,11v2H4v-2h16Z"/>`),
-                } }), (!isDisabled && {
-                '&(input:focus)::before': {
-                    borderRadius: borderRadiusMedium,
                 },
-            }))),
-        } }, (isLoading && {
-        spinner: {
-            position: 'absolute',
-            top: `calc(${fontLineHeight}/2 + 2px)`,
-            left: `calc(${fontLineHeight}/2 + 2px)`,
-            transform: 'translate(-50%, -50%)',
-            height: fontLineHeight,
-            width: fontLineHeight,
-            fontFamily,
-            fontSize: '1rem',
-            cursor: 'not-allowed',
+                ...(!isDisabled && {
+                    '&(input:focus)::before': {
+                        borderRadius: borderRadiusMedium,
+                    },
+                }),
+            }),
         },
-    }))));
+        ...(isLoading && {
+            spinner: {
+                position: 'absolute',
+                top: `calc(${fontLineHeight}/2 + 2px)`,
+                left: `calc(${fontLineHeight}/2 + 2px)`,
+                transform: 'translate(-50%, -50%)',
+                height: fontLineHeight,
+                width: fontLineHeight,
+                fontFamily,
+                fontSize: '1rem',
+                cursor: 'not-allowed',
+            },
+        }),
+    }));
 };
 
 const widthMap = {
@@ -4621,21 +4996,27 @@ const widthMap = {
 const getComponentCss$R = (width) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
+        },
+        root: {
+            minWidth: 0,
+            ...(['full', 'fluid'].includes(width)
+                ? {
+                    padding: `0 ${gridFullOffset}`,
+                }
+                : {
+                    padding: `0 ${widthMap[width].base}`,
+                    [getMediaQueryMin('s')]: {
+                        padding: `0 ${widthMap[width].s}`,
+                    },
+                    [getMediaQueryMin('xxl')]: {
+                        padding: `0 ${widthMap[width].xxl}`,
+                    },
+                }),
         },
-        root: Object.assign({ minWidth: 0 }, (['full', 'fluid'].includes(width)
-            ? {
-                padding: `0 ${gridFullOffset}`,
-            }
-            : {
-                padding: `0 ${widthMap[width].base}`,
-                [getMediaQueryMin('s')]: {
-                    padding: `0 ${widthMap[width].s}`,
-                },
-                [getMediaQueryMin('xxl')]: {
-                    padding: `0 ${widthMap[width].xxl}`,
-                },
-            })),
     });
 };
 
@@ -4654,8 +5035,23 @@ const getDimensionStyle = {
 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))),
-            a: Object.assign(Object.assign({ display: 'block', textDecoration: 'none' }, getDimensionStyle), focusPseudoJssStyle),
+            ':host': {
+                position: 'relative',
+                display: 'inline-block',
+                verticalAlign: 'top',
+                ...addImportantToEachRule({
+                    outline: 0,
+                    boxSizing: 'content-box',
+                    ...getDimensionStyle,
+                    ...hostHiddenStyles,
+                }),
+            },
+            a: {
+                display: 'block',
+                textDecoration: 'none',
+                ...getDimensionStyle,
+                ...focusPseudoJssStyle,
+            },
             picture: {
                 display: 'block',
                 width: `min(${width}px, 100%)`,
@@ -4675,12 +5071,23 @@ const getComponentCss$Q = () => {
 const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getTypographyRootJssStyle = (baseTextStyle, responsiveStyle, align, color, ellipsis, theme) => {
-    return Object.assign(Object.assign(Object.assign(Object.assign({ margin: 0, padding: 0 }, baseTextStyle), { color: getThemedTypographyColor(theme, color), textAlign: align, letterSpacing: 'normal', listStyleType: 'none', whiteSpace: 'inherit' }), (ellipsis && {
-        maxWidth: '100%',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-    })), responsiveStyle);
+    return {
+        margin: 0,
+        padding: 0,
+        ...baseTextStyle,
+        color: getThemedTypographyColor(theme, color),
+        textAlign: align,
+        letterSpacing: 'normal',
+        listStyleType: 'none',
+        whiteSpace: 'inherit',
+        ...(ellipsis && {
+            maxWidth: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        }),
+        ...responsiveStyle,
+    };
 };
 const getTypographySlottedJssStyle = () => {
     return {
@@ -4710,7 +5117,10 @@ const sizeMap$4 = {
 const getComponentCss$P = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
             '::slotted': {
                 [DISPLAY_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
             },
@@ -4730,38 +5140,80 @@ const getComponentCss$O = (color, orientation, theme) => {
     };
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            hr: Object.assign({ margin: 0, padding: 0, border: 'none', textAlign: 'left', background: isHighContrastMode ? getHighContrastColors().canvasTextColor : colorMap[color] }, buildResponsiveStyles(orientation, (o) => o === 'horizontal' ? { height: '1px', width: '100%' } : { height: '100%', width: '1px' })),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
+            hr: {
+                margin: 0,
+                padding: 0,
+                border: 'none',
+                textAlign: 'left',
+                background: isHighContrastMode ? getHighContrastColors().canvasTextColor : colorMap[color],
+                ...buildResponsiveStyles(orientation, (o) => o === 'horizontal' ? { height: '1px', width: '100%' } : { height: '100%', width: '1px' }),
+            },
         },
     });
 };
 
 const getComponentCss$N = (state, labelSize, hasLabel, theme) => {
-    return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                display: 'block',
+                ...hostHiddenStyles,
+            }),
+            fieldset: {
                 margin: 0,
                 padding: 0,
                 border: 'none',
-            } }, (hasLabel && {
-            legend: Object.assign({ margin: `0 0 ${spacingStaticMedium}`, padding: 0, color: getThemedColors(theme).primaryColor }, (labelSize === 'small' ? headingSmallStyle : headingMediumStyle)),
-        })) }, getFunctionalComponentRequiredStyles()), mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
-        message: {
-            marginTop: spacingStaticMedium,
+            },
+            ...(hasLabel && {
+                legend: {
+                    margin: `0 0 ${spacingStaticMedium}`,
+                    padding: 0,
+                    color: getThemedColors(theme).primaryColor,
+                    ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
+                },
+            }),
         },
-    })));
+        ...getFunctionalComponentRequiredStyles(),
+        ...mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
+            message: {
+                marginTop: spacingStaticMedium,
+            },
+        }),
+    });
 };
 
 const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
-    return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                display: 'block',
+                ...hostHiddenStyles,
+            }),
+            fieldset: {
                 margin: 0,
                 padding: 0,
                 border: 'none',
-            } }, (hasLabel && {
-            legend: Object.assign({ margin: `0 0 ${spacingStaticMedium}`, padding: 0, color: getThemedColors(theme).primaryColor }, (labelSize === 'small' ? headingSmallStyle : headingMediumStyle)),
-        })) }, getFunctionalComponentRequiredStyles()), mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
-        message: {
-            marginTop: spacingStaticMedium,
+            },
+            ...(hasLabel && {
+                legend: {
+                    margin: `0 0 ${spacingStaticMedium}`,
+                    padding: 0,
+                    color: getThemedColors(theme).primaryColor,
+                    ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
+                },
+            }),
         },
-    })));
+        ...getFunctionalComponentRequiredStyles(),
+        ...mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
+            message: {
+                marginTop: spacingStaticMedium,
+            },
+        }),
+    });
 };
 
 const flexItemWidths = {
@@ -4777,17 +5229,21 @@ const flexItemWidths = {
 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) => ({
-                width: `${flexItemWidths[widthResponsive]}%`,
-            })), buildResponsiveStyles(offset, (offsetResponsive) => ({
-                marginLeft: `${flexItemWidths[offsetResponsive]}%`,
-            })), buildResponsiveStyles(alignSelf, (alignSelfResponsive) => ({
-                alignSelf: alignSelfResponsive,
-            })), flex !== 'initial' // flex shorthand conflicts with grow and shrink, which means even default grow or shrink props would override flex
-                ? buildResponsiveStyles(flex, (flexResponsive) => ({
-                    flex: flexResponsive === 'equal' ? '1 1 0' : flexResponsive,
-                }))
-                : mergeDeep(buildResponsiveStyles(grow, (flexGrow) => ({ flexGrow })), buildResponsiveStyles(shrink, (flexShrink) => ({ flexShrink })))))),
+            ':host': addImportantToEachRule({
+                boxSizing: 'border-box',
+                ...hostHiddenStyles,
+                ...mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
+                    width: `${flexItemWidths[widthResponsive]}%`,
+                })), buildResponsiveStyles(offset, (offsetResponsive) => ({
+                    marginLeft: `${flexItemWidths[offsetResponsive]}%`,
+                })), buildResponsiveStyles(alignSelf, (alignSelfResponsive) => ({
+                    alignSelf: alignSelfResponsive,
+                })), flex !== 'initial' // flex shorthand conflicts with grow and shrink, which means even default grow or shrink props would override flex
+                    ? buildResponsiveStyles(flex, (flexResponsive) => ({
+                        flex: flexResponsive === 'equal' ? '1 1 0' : flexResponsive,
+                    }))
+                    : mergeDeep(buildResponsiveStyles(grow, (flexGrow) => ({ flexGrow })), buildResponsiveStyles(shrink, (flexShrink) => ({ flexShrink })))),
+            }),
         },
     });
 };
@@ -4826,56 +5282,108 @@ const getComponentCss$J = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
     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: {
+    return getCss({
+        '@global': addImportantToEachRule({
+            ':host': {
+                display: 'flex',
+                position: 'fixed',
+                zIndex: FLYOUT_Z_INDEX,
+                ...(isOpen
+                    ? {
+                        visibility: 'inherit',
+                    }
+                    : {
+                        visibility: 'hidden',
+                        transition: `visibility 0s linear ${flyoutTransitionDuration}`,
+                    }),
+                ...getInsetJssStyle(),
+                ...getFrostedGlassBackgroundJssStyles(isOpen, flyoutTransitionDuration),
+                ...hostHiddenStyles,
+            },
+        }),
+        header: {
+            display: 'flex',
+            ...(hasHeader && {
+                flexDirection: 'row-reverse',
+            }),
+            justifyContent: 'flex-end',
             background: backgroundColor,
-            padding: contentPadding,
             position: 'sticky',
-            bottom: 0,
+            top: 0,
+        },
+        [`${headerShadowClass}`]: {
+            boxShadow: `${isThemeDark(theme) ? flyoutBoxShadowColorDark : flyoutBoxShadowColor} 0px 5px 10px`,
+        },
+        ...(hasHeader && {
+            'header-content': {
+                flex: 'auto',
+                padding: `${spacingStaticMedium} 0 ${spacingStaticMedium} ${spacingFluidLarge}`,
+            },
+        }),
+        dismiss: {
+            margin: spacingStaticMedium,
+            height: 'fit-content',
+            border: `2px solid ${backgroundColor}`,
+            borderRadius: '4px',
+            background: backgroundColor,
+            ...hoverMediaQuery({
+                '&:hover': {
+                    background: darkThemeContrastHighColor,
+                    borderColor: darkThemeContrastHighColor,
+                },
+            }),
         },
-        [`${footerShadowClass}`]: {
-            boxShadow: `${isThemeDark(theme) ? flyoutBoxShadowColorDark : flyoutBoxShadowColor} 0px -5px 10px`,
+        root: {
+            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)`,
         },
-    })), (hasSubFooter && {
-        ['sub-footer']: {
+        content: {
             padding: contentPadding,
+            // If sub-footer is used scroll shadows have to be done via JS
+            ...(!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)`;
@@ -4885,12 +5393,18 @@ const gridItemWidths = [
 const getComponentCss$I = (size, offset) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ paddingLeft: gutter$1, paddingRight: gutter$1, boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(size, (sizeResponsive) => ({
-                width: `${gridItemWidths[sizeResponsive]}%`,
-                minWidth: `${gridItemWidths[sizeResponsive]}%`,
-            })), buildResponsiveStyles(offset, (offsetResponsive) => ({
-                marginLeft: `${gridItemWidths[offsetResponsive]}%`,
-            }))))),
+            ':host': addImportantToEachRule({
+                paddingLeft: gutter$1,
+                paddingRight: gutter$1,
+                boxSizing: 'border-box',
+                ...hostHiddenStyles,
+                ...mergeDeep(buildResponsiveStyles(size, (sizeResponsive) => ({
+                    width: `${gridItemWidths[sizeResponsive]}%`,
+                    minWidth: `${gridItemWidths[sizeResponsive]}%`,
+                })), buildResponsiveStyles(offset, (offsetResponsive) => ({
+                    marginLeft: `${gridItemWidths[offsetResponsive]}%`,
+                }))),
+            }),
         },
     });
 };
@@ -4899,7 +5413,15 @@ const gutter = `calc(${gridGap} / -2)`;
 const getComponentCss$H = (direction, wrap) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'flex', flex: 'auto', width: 'auto', marginLeft: gutter, marginRight: gutter }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap }))))),
+            ':host': addImportantToEachRule({
+                display: 'flex',
+                flex: 'auto',
+                width: 'auto',
+                marginLeft: gutter,
+                marginRight: gutter,
+                ...hostHiddenStyles,
+                ...mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap }))),
+            }),
         },
     });
 };
@@ -4914,7 +5436,10 @@ const sizeMap$3 = {
 const getComponentCss$G = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
             '::slotted': {
                 [HEADING_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
             },
@@ -4946,11 +5471,13 @@ const headlineSizeMap = {
     'headline-5': fontSizeHeadingSmall,
 };
 const getHeadlineVariantJssStyle = (variant) => {
-    return Object.assign({}, (variant === 'large-title'
-        ? displayMediumStyle
-        : {
-            fontSize: headlineSizeMap[variant],
-        }));
+    return {
+        ...(variant === 'large-title'
+            ? displayMediumStyle
+            : {
+                fontSize: headlineSizeMap[variant],
+            }),
+    };
 };
 const textSizeMap = {
     'xx-small': fontSizeTextXXSmall,
@@ -4968,7 +5495,10 @@ const getTextSizeJssStyle = (textSize) => {
 const getComponentCss$F = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
             '::slotted': {
                 [HEADLINE_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
             },
@@ -5050,23 +5580,42 @@ const getComponentCss$E = (color, size, theme) => {
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0, pointerEvents: 'none' }, (!isColorInherit && Object.assign(Object.assign({ filter: filter[theme][color] }, (isHighContrastMode &&
-                getSchemedHighContrastMediaQuery({
-                    filter: filter.light[color],
-                }, {
-                    filter: filter.dark[color],
-                }))), { WebkitAnimation: `${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`} 1ms` }))), (isSizeInherit
-                ? {
-                    width: size,
-                    height: size,
-                }
-                : {
-                    width: fontLineHeight,
-                    height: fontLineHeight,
-                    font: `${sizeMap$2[size]} ${fontFamily}`,
-                })) }, (!isColorInherit && {
-            [`@keyframes ${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`}`]: forceRerenderAnimationStyle,
-        })),
+        '@global': {
+            ':host': {
+                display: 'inline-block',
+                verticalAlign: 'top',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
+            img: {
+                display: 'block',
+                margin: 0,
+                padding: 0,
+                pointerEvents: 'none',
+                ...(!isColorInherit && {
+                    filter: filter[theme][color],
+                    ...(isHighContrastMode &&
+                        getSchemedHighContrastMediaQuery({
+                            filter: filter.light[color],
+                        }, {
+                            filter: filter.dark[color],
+                        })),
+                    WebkitAnimation: `${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically.
+                }),
+                ...(isSizeInherit
+                    ? {
+                        width: size,
+                        height: size,
+                    }
+                    : {
+                        width: fontLineHeight,
+                        height: fontLineHeight,
+                        font: `${sizeMap$2[size]} ${fontFamily}`,
+                    }),
+            },
+            ...(!isColorInherit && {
+                [`@keyframes ${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`}`]: forceRerenderAnimationStyle,
+            }),
+        },
     });
 };
 
@@ -5084,14 +5633,23 @@ const getBackgroundColor = (state, theme) => {
     return colorMap[state];
 };
 const getNotificationRootJssStyle = (state, hasAction, hasClose, theme) => {
-    return Object.assign(Object.assign({ display: 'grid', 
+    return {
+        display: 'grid',
         // 2 columns for content and optional close button
-        gridTemplateColumns: `minmax(auto, 1fr)${hasClose ? ' auto' : ''}`, gap: spacingStaticMedium, placeItems: 'start', padding: spacingStaticMedium, background: getBackgroundColor(state, theme), borderRadius: borderRadiusSmall }, (isHighContrastMode && {
-        outline: '1px solid transparent',
-    })), { [mediaQueryMinS$1]: {
+        gridTemplateColumns: `minmax(auto, 1fr)${hasClose ? ' auto' : ''}`,
+        gap: spacingStaticMedium,
+        placeItems: 'start',
+        padding: spacingStaticMedium,
+        background: getBackgroundColor(state, theme),
+        borderRadius: borderRadiusSmall,
+        ...(isHighContrastMode && {
+            outline: '1px solid transparent',
+        }),
+        [mediaQueryMinS$1]: {
             // 4 columns are for icon, content, optional action button and optional close button
             gridTemplateColumns: `auto minmax(auto, 1fr)${hasAction ? ' auto' : ''}${hasClose ? ' auto' : ''}`,
-        } });
+        },
+    };
 };
 const getNotificationIconJssStyle = () => ({
     [mediaQueryMaxS$1]: {
@@ -5109,36 +5667,60 @@ const getNotificationContentJssStyle = () => ({
 
 const mediaQueryMaxS = getMediaQueryMax('s');
 const getComponentCss$D = (state, hasAction, hasClose, theme) => {
-    return getCss(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({}, getNotificationRootJssStyle(state, hasAction, hasClose, theme)), hostHiddenStyles)),
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                ...getNotificationRootJssStyle(state, hasAction, hasClose, theme),
+                ...hostHiddenStyles,
+            }),
             h5: headingSmallStyle,
             p: textSmallStyle,
             'h5,p': {
                 margin: 0,
                 color: getThemedColors(theme).primaryColor,
             },
-        }, icon: getNotificationIconJssStyle(), content: getNotificationContentJssStyle() }, (hasAction && {
-        action: {
-            [mediaQueryMaxS]: {
-                gridRowStart: 2,
-            },
         },
-    })));
+        icon: getNotificationIconJssStyle(),
+        content: getNotificationContentJssStyle(),
+        ...(hasAction && {
+            action: {
+                [mediaQueryMaxS]: {
+                    gridRowStart: 2,
+                },
+            },
+        }),
+    });
 };
 
 const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
-    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), Object.assign(Object.assign({}, (hasSlottedAnchor && {
+    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
+        root: {
+            textDecoration: underline ? 'underline' : 'none',
+        },
+    }, hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
-                '&(a)': Object.assign(Object.assign({}, getResetInitialStylesForSlottedAnchor), { outline: 0, textDecoration: underline ? 'underline' : 'none', font: 'inherit', color: 'inherit' }),
+                '&(a)': {
+                    ...getResetInitialStylesForSlottedAnchor,
+                    textDecoration: underline ? 'underline' : 'none',
+                    font: 'inherit',
+                    color: 'inherit',
+                },
                 // The clickable area for Safari < ~15 (<= release date: 2021-10-28) is reduced to the slotted anchor itself,
                 // since Safari prior to this major release does not support pseudo-elements in the slotted context
                 // (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 ? offsetVertical : offsetHorizontal,
-                }))),
+                '&(a)::before': {
+                    content: '""',
+                    position: 'fixed',
+                    top: offsetVertical,
+                    bottom: offsetVertical,
+                    borderRadius: borderRadiusSmall,
+                    ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                        right: hideLabelValue ? offsetVertical : offsetHorizontal,
+                        left: hideLabelValue ? offsetVertical : offsetHorizontal,
+                    })),
+                },
                 '&(a:focus)::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
                 },
@@ -5147,25 +5729,35 @@ const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, a
                 },
             },
         }),
-    })), { root: {
-            textDecoration: underline ? 'underline' : 'none',
-        } })));
+    }));
 };
 
 const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { linkColor } = getHighContrastColors();
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), Object.assign({}, (hasSlottedAnchor && Object.assign(Object.assign({}, (isHighContrastMode && {
-        root: {
-            borderColor: linkColor,
-        },
-    })), { '@global': addImportantToEachRule({
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), hasSlottedAnchor && {
+        ...(isHighContrastMode && {
+            root: {
+                borderColor: linkColor,
+            },
+        }),
+        '@global': addImportantToEachRule({
             '::slotted': {
-                '&(a)': Object.assign(Object.assign({}, getResetInitialStylesForSlottedAnchor), { outline: 0, textDecoration: 'none', font: 'inherit', color: 'inherit' }),
+                '&(a)': {
+                    ...getResetInitialStylesForSlottedAnchor,
+                    textDecoration: 'none',
+                    font: 'inherit',
+                    color: 'inherit',
+                },
                 // The clickable area for Safari < ~15 (<= release date: 2021-10-28) is reduced to the slotted anchor itself,
                 // since Safari prior to this major release does not support pseudo-elements in the slotted context
                 // (https://bugs.webkit.org/show_bug.cgi?id=178237)
-                '&(a)::before': Object.assign({ content: '""', position: 'fixed', borderRadius: borderRadiusMedium }, getInsetJssStyle(-6)),
+                '&(a)::before': {
+                    content: '""',
+                    position: 'fixed',
+                    borderRadius: borderRadiusMedium,
+                    ...getInsetJssStyle(-6),
+                },
                 // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
                 '&(a::-moz-focus-inner)': {
                     border: 0,
@@ -5177,7 +5769,8 @@ const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAncho
                     border: 0,
                 },
             },
-        }) })))));
+        }),
+    }));
 };
 
 // array is redefined instead of using the one from in model-signature
@@ -5186,23 +5779,60 @@ const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getComponentCss$A = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
-    return getCss(Object.assign(Object.assign(Object.assign(Object.assign({}, tileBaseStyles), { '@global': Object.assign(Object.assign({}, tileBaseStyles['@global']), { [LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS.join(',')]: {
+    return getCss({
+        ...tileBaseStyles,
+        '@global': {
+            ...tileBaseStyles['@global'],
+            [LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS.join(',')]: {
                 margin: addImportantToRule(0),
-            } }), content: Object.assign(Object.assign(Object.assign({}, tileBaseStyles.content), { flexDirection: 'column', bottom: 0, padding: `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}` }), gradientToTopStyle), model: {
+            },
+        },
+        content: {
+            ...tileBaseStyles.content,
+            flexDirection: 'column',
+            bottom: 0,
+            padding: `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`,
+            ...gradientToTopStyle,
+        },
+        model: {
             position: 'absolute',
             top: spacingFluidMedium,
             left: spacingFluidMedium,
-        }, heading: Object.assign(Object.assign({ margin: 0 }, textLargeStyle), buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) }))) }), (hasDescription && {
-        description: Object.assign({ margin: '-12px 0 0 ' }, textSmallStyle),
-    })), { 'link-group': Object.assign({ display: 'flex', width: '100%', gap: spacingFluidSmall }, buildResponsiveStyles(direction, getGroupDirectionJssStyles)), 'link-overlay': Object.assign({ 
-            // covers entire tile, used for expanded click-area only
-            position: 'fixed' }, getInsetJssStyle()) }));
-};
-
+        },
+        heading: {
+            margin: 0,
+            ...textLargeStyle,
+            ...buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) })),
+        },
+        ...(hasDescription && {
+            description: {
+                margin: '-12px 0 0 ',
+                ...textSmallStyle,
+            },
+        }),
+        'link-group': {
+            display: 'flex',
+            width: '100%',
+            gap: spacingFluidSmall,
+            ...buildResponsiveStyles(direction, getGroupDirectionJssStyles),
+        },
+        'link-overlay': {
+            // covers entire tile, used for expanded click-area only
+            position: 'fixed',
+            ...getInsetJssStyle(),
+        },
+    });
+};
+
 const getComponentCss$z = (...args) => {
-    return getCss(Object.assign(Object.assign({}, getButtonLinkTileStyles(...args)), { 'link-overlay': Object.assign({ 
+    return getCss({
+        ...getButtonLinkTileStyles(...args),
+        'link-overlay': {
             // covers entire tile, used for expanded click-area only
-            position: 'fixed' }, getInsetJssStyle()) }));
+            position: 'fixed',
+            ...getInsetJssStyle(),
+        },
+    });
 };
 
 const baseSizes = {
@@ -5218,10 +5848,29 @@ const baseSizes = {
 const getComponentCss$y = (size) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ position: 'relative', display: 'inline-flex', verticalAlign: 'top' }, addImportantToEachRule(Object.assign({ outline: 0 }, hostHiddenStyles))),
-            a: Object.assign({ display: 'block', textDecoration: 'none' }, focusPseudoJssStyle),
-            picture: Object.assign({ display: 'block' }, (size === 'responsive'
-                ? Object.assign(Object.assign({}, baseSizes.small), { [getMediaQueryMin('l')]: baseSizes.medium }) : baseSizes[size])),
+            ':host': {
+                position: 'relative',
+                display: 'inline-flex',
+                verticalAlign: 'top',
+                ...addImportantToEachRule({
+                    outline: 0,
+                    ...hostHiddenStyles,
+                }),
+            },
+            a: {
+                display: 'block',
+                textDecoration: 'none',
+                ...focusPseudoJssStyle,
+            },
+            picture: {
+                display: 'block',
+                ...(size === 'responsive'
+                    ? {
+                        ...baseSizes.small,
+                        [getMediaQueryMin('l')]: baseSizes.medium,
+                    }
+                    : baseSizes[size]),
+            },
             img: {
                 display: 'block',
                 width: '100%',
@@ -5267,41 +5916,67 @@ const isFullscreenForXl = (fullscreen) => {
 };
 const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
     const marginPx = `${-marginValue}px`;
-    return Object.assign(Object.assign({ [`&(.${stretchToFullModalWidthClassName})`]: {
+    return {
+        [`&(.${stretchToFullModalWidthClassName})`]: {
             width: `calc(100% + ${marginValue * 2}px)`,
             margin: `0 ${marginPx}`,
-        } }, (!hasHeader && {
-        [`&(.${stretchToFullModalWidthClassName}:first-child)`]: {
-            marginTop: hasDismissButton ? pxToRemWithUnit(-marginValue) : marginPx,
         },
-    })), { [`&(.${stretchToFullModalWidthClassName}:last-child)`]: {
+        ...(!hasHeader && {
+            [`&(.${stretchToFullModalWidthClassName}:first-child)`]: {
+                marginTop: hasDismissButton ? pxToRemWithUnit(-marginValue) : marginPx,
+            },
+        }),
+        [`&(.${stretchToFullModalWidthClassName}:last-child)`]: {
             marginBottom: marginPx,
-        } });
+        },
+    };
 };
 const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) => {
     const isFullscreenForXlAndXxl = isFullscreenForXl(isFullscreen);
     const duration = isOpen ? '.6s' : '.2s';
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle()), { zIndex: MODAL_Z_INDEX, display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }), (isOpen
-                ? {
-                    visibility: 'inherit',
-                }
-                : {
-                    visibility: 'hidden',
-                    transition: 'visibility 0s linear .2s',
-                })), hostHiddenStyles), getFrostedGlassBackgroundJssStyles(isOpen, duration)))), { overflowY: 'auto' }),
-            '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
-                [`&(.${stretchToFullModalWidthClassName}`]: {
-                    '&:first-child)': {
-                        borderRadius: fullscreenValue ? 0 : '8px 8px 0 0',
-                    },
-                    '&:last-child)': {
-                        borderRadius: fullscreenValue ? 0 : '0 0 8px 8px',
+    return getCss({
+        '@global': {
+            ':host': {
+                ...addImportantToEachRule({
+                    position: 'fixed',
+                    ...getInsetJssStyle(),
+                    zIndex: MODAL_Z_INDEX,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexWrap: 'wrap',
+                    ...(isOpen
+                        ? {
+                            visibility: 'inherit',
+                        }
+                        : {
+                            visibility: 'hidden',
+                            transition: 'visibility 0s linear .2s',
+                        }),
+                    ...hostHiddenStyles,
+                    ...getFrostedGlassBackgroundJssStyles(isOpen, duration),
+                }),
+                overflowY: 'auto', // overrideable
+            },
+            '::slotted': addImportantToEachRule({
+                ...mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
+                    [`&(.${stretchToFullModalWidthClassName}`]: {
+                        '&:first-child)': {
+                            borderRadius: fullscreenValue ? 0 : '8px 8px 0 0',
+                        },
+                        '&:last-child)': {
+                            borderRadius: fullscreenValue ? 0 : '0 0 8px 8px',
+                        },
                     },
-                },
-            }))))),
-            h2: Object.assign(Object.assign({}, headingLargeStyle), { margin: 0, color: lightThemePrimaryColor }),
-        }, root: mergeDeep({
+                }))),
+            }),
+            h2: {
+                ...headingLargeStyle,
+                margin: 0,
+                color: lightThemePrimaryColor,
+            },
+        },
+        root: mergeDeep({
             position: 'relative',
             boxSizing: 'border-box',
             transform: isOpen ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)',
@@ -5310,25 +5985,46 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) =>
             padding: hasDismissButton ? `${pxToRemWithUnit(32)} 32px 32px 32px` : '32px',
             background: backgroundColor,
             outline: isHighContrastMode ? '1px solid transparent' : 0,
-            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid`, pointerEvents: 'none' }, buildResponsiveStyles(isFullscreen, (fullscreenValue) => (Object.assign({ borderRadius: fullscreenValue ? 0 : '12px', borderColor: fullscreenValue ? lightThemePrimaryColor : darkThemePrimaryColor }, getInsetJssStyle(fullscreenValue ? 0 : -4))))),
+            '&:focus::before': {
+                content: '""',
+                position: 'fixed',
+                border: `${borderWidthBase} solid`,
+                pointerEvents: 'none',
+                ...buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
+                    borderRadius: fullscreenValue ? 0 : '12px',
+                    borderColor: fullscreenValue ? lightThemePrimaryColor : darkThemePrimaryColor,
+                    ...getInsetJssStyle(fullscreenValue ? 0 : -4),
+                })),
+            },
             '&:not(:focus-visible)::before': {
                 border: 0,
             },
             [mediaQueryXl]: {
                 margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridExtendedOffsetBase}`,
             },
-        }, buildResponsiveStyles(isFullscreen, getFullscreenJssStyles)) }, (hasHeader && {
-        header: {
-            padding: '0 0 8px',
-        },
-    })), (hasDismissButton && {
-        dismiss: Object.assign({ position: 'absolute', top: '8px', right: '8px', border: `2px solid ${backgroundColor}`, borderRadius: '4px', background: backgroundColor }, hoverMediaQuery({
-            '&:hover': {
-                background: darkThemeContrastHighColor,
-                borderColor: darkThemeContrastHighColor,
+        }, buildResponsiveStyles(isFullscreen, getFullscreenJssStyles)),
+        ...(hasHeader && {
+            header: {
+                padding: '0 0 8px',
+            },
+        }),
+        ...(hasDismissButton && {
+            dismiss: {
+                position: 'absolute',
+                top: '8px',
+                right: '8px',
+                border: `2px solid ${backgroundColor}`,
+                borderRadius: '4px',
+                background: backgroundColor,
+                ...hoverMediaQuery({
+                    '&:hover': {
+                        background: darkThemeContrastHighColor,
+                        borderColor: darkThemeContrastHighColor,
+                    },
+                }),
             },
-        })),
-    })));
+        }),
+    });
 };
 
 const modelSignatureHeight = 36;
@@ -5352,18 +6048,37 @@ const getComponentCss$w = (size, color, theme) => {
     const isColorInherit = color === 'inherit';
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ maxWidth: '100%', maxHeight: '100%' }, (!isSizeInherit && {
-                width: 'inherit',
-                height: 'inherit',
-                // TODO: we need a width map of all signatures to ensure same fluid behavior like implemented fro crest + wordmark
-                maxHeight: `${modelSignatureHeight}px`,
-            })), hostHiddenStyles))),
-            img: Object.assign(Object.assign({ display: 'block', maxWidth: '100%', maxHeight: '100%', pointerEvents: 'none' }, (!isColorInherit && Object.assign({ filter: colorToFilterMap[theme][color] }, (isHighContrastMode &&
-                getSchemedHighContrastMediaQuery({
-                    filter: colorToFilterMap.light[color],
-                }, {
-                    filter: colorToFilterMap.dark[color],
-                }))))), (isSizeInherit && { height: size })),
+            ':host': {
+                display: 'inline-block',
+                verticalAlign: 'top',
+                ...addImportantToEachRule({
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    ...(!isSizeInherit && {
+                        width: 'inherit',
+                        height: 'inherit',
+                        // TODO: we need a width map of all signatures to ensure same fluid behavior like implemented fro crest + wordmark
+                        maxHeight: `${modelSignatureHeight}px`,
+                    }),
+                    ...hostHiddenStyles,
+                }),
+            },
+            img: {
+                display: 'block',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                pointerEvents: 'none',
+                ...(!isColorInherit && {
+                    filter: colorToFilterMap[theme][color],
+                    ...(isHighContrastMode &&
+                        getSchemedHighContrastMediaQuery({
+                            filter: colorToFilterMap.light[color],
+                        }, {
+                            filter: colorToFilterMap.dark[color],
+                        })),
+                }),
+                ...(isSizeInherit && { height: size }),
+            },
         },
     });
 };
@@ -5380,10 +6095,18 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
     const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            nav: Object.assign({ display: 'flex', justifyContent: 'center', userSelect: 'none' }, buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
-                counterReset: `size ${n}`,
-            }))),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
+            nav: {
+                display: 'flex',
+                justifyContent: 'center',
+                userSelect: 'none',
+                ...buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
+                    counterReset: `size ${n}`,
+                })),
+            },
             ul: {
                 display: 'flex',
                 gap: spacingStaticXSmall,
@@ -5404,13 +6127,53 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
                     },
                 },
             },
-            span: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', transition: ['color', 'border-color', 'background-color'].map(getTransition).join(), position: 'relative', width: buttonSize, height: buttonSize, boxSizing: 'border-box' }, textSmallStyle), { whiteSpace: 'nowrap', cursor: 'pointer', color: primaryColor, outline: 0, borderRadius: borderRadiusSmall, borderColor: 'transparent' }), hoverMediaQuery({
-                '&:not([aria-disabled]):not(.ellipsis):hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
-            })), { '&:not(.ellipsis):focus:focus-visible::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusMedium }), '&[aria-current]': Object.assign(Object.assign({}, disabledCursorStyle), { color: primaryColor, border: `${borderWidthBase} solid ${primaryColor}`, '&:not(.ellipsis):focus::before': getInsetJssStyle(-6) }), '&[aria-disabled]': Object.assign(Object.assign({}, disabledCursorStyle), { color: disabledColor }) }),
+            span: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
+                position: 'relative',
+                width: buttonSize,
+                height: buttonSize,
+                boxSizing: 'border-box',
+                ...textSmallStyle,
+                whiteSpace: 'nowrap',
+                cursor: 'pointer',
+                color: primaryColor,
+                outline: 0,
+                borderRadius: borderRadiusSmall,
+                borderColor: 'transparent',
+                ...hoverMediaQuery({
+                    '&:not([aria-disabled]):not(.ellipsis):hover': {
+                        ...frostedGlassStyle,
+                        background: hoverColor,
+                    },
+                }),
+                '&:not(.ellipsis):focus:focus-visible::before': {
+                    content: '""',
+                    position: 'absolute',
+                    ...getInsetJssStyle(-4),
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                    borderRadius: borderRadiusMedium,
+                },
+                '&[aria-current]': {
+                    ...disabledCursorStyle,
+                    color: primaryColor,
+                    border: `${borderWidthBase} solid ${primaryColor}`,
+                    '&:not(.ellipsis):focus::before': getInsetJssStyle(-6),
+                },
+                '&[aria-disabled]': {
+                    ...disabledCursorStyle,
+                    color: disabledColor,
+                },
+            },
         },
-        ellipsis: Object.assign(Object.assign({}, disabledCursorStyle), { '&::after': {
+        ellipsis: {
+            ...disabledCursorStyle,
+            '&::after': {
                 content: '"…"',
-            } }),
+            },
+        },
     });
 };
 
@@ -5484,16 +6247,52 @@ const getComponentCss$u = (direction, theme) => {
     const { hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ position: 'relative', display: 'inline-block' }, hostHiddenStyles))), { verticalAlign: 'top' }),
-            p: Object.assign(Object.assign({}, textSmallStyle), { margin: 0 }),
-            button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block', position: 'relative', appearance: 'none', background: 'transparent', border: 0, padding: 0, outline: 0, cursor: 'pointer' }, textSmallStyle), { width: fontLineHeight, height: fontLineHeight, borderRadius: '50%' }), hoverMediaQuery({
-                transition: getTransition('background-color'),
-                '&:hover': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
-            })), { '&::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-2)), { border: `${borderWidthBase} solid transparent`, borderRadius: '50%' }), '&:focus::before': {
+            ':host': {
+                ...addImportantToEachRule({
+                    position: 'relative',
+                    display: 'inline-block',
+                    ...hostHiddenStyles,
+                }),
+                verticalAlign: 'top',
+            },
+            p: {
+                ...textSmallStyle,
+                margin: 0,
+            },
+            button: {
+                display: 'block',
+                position: 'relative',
+                appearance: 'none',
+                background: 'transparent',
+                border: 0,
+                padding: 0,
+                outline: 0,
+                cursor: 'pointer',
+                ...textSmallStyle,
+                width: fontLineHeight,
+                height: fontLineHeight,
+                borderRadius: '50%',
+                ...hoverMediaQuery({
+                    transition: getTransition('background-color'),
+                    '&:hover': {
+                        ...frostedGlassStyle,
+                        backgroundColor: hoverColor,
+                    },
+                }),
+                '&::before': {
+                    content: '""',
+                    position: 'absolute',
+                    ...getInsetJssStyle(-2),
+                    border: `${borderWidthBase} solid transparent`,
+                    borderRadius: '50%',
+                },
+                '&:focus::before': {
                     borderColor: focusColor,
-                }, '&:focus:not(:focus-visible)::before': {
+                },
+                '&:focus:not(:focus-visible)::before': {
                     borderColor: 'transparent',
-                } }),
+                },
+            },
         },
         label: getHiddenTextJssStyle(),
         icon: {
@@ -5512,11 +6311,31 @@ const getComponentCss$u = (direction, theme) => {
             pointerEvents: 'none',
             animation: '240ms $fadeIn ease forwards'
                 ,
-            '&::before': Object.assign({ content: '""', position: 'absolute', borderStyle: 'solid' }, directionArrowMap[direction]),
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                borderStyle: 'solid',
+                ...directionArrowMap[direction],
+            },
+        },
+        popover: {
+            position: 'absolute',
+            maxWidth: 'min(90vw, 27rem)',
+            width: 'max-content',
+            boxSizing: 'border-box',
+            background: backgroundColorThemeLight,
+            padding: '8px 16px',
+            pointerEvents: 'auto',
+            ...directionPositionMap[direction],
+            ...textSmallStyle,
+            listStyleType: 'none',
+            color: primaryColorThemeLight,
+            whiteSpace: 'inherit',
+            borderRadius: borderRadiusSmall,
+            ...(isHighContrastMode && {
+                outline: `1px solid ${canvasTextColor}`,
+            }),
         },
-        popover: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'absolute', maxWidth: 'min(90vw, 27rem)', width: 'max-content', boxSizing: 'border-box', background: backgroundColorThemeLight, padding: '8px 16px', pointerEvents: 'auto' }, directionPositionMap[direction]), textSmallStyle), { listStyleType: 'none', color: primaryColorThemeLight, whiteSpace: 'inherit', borderRadius: borderRadiusSmall }), (isHighContrastMode && {
-            outline: `1px solid ${canvasTextColor}`,
-        })),
         '@keyframes fadeIn': {
             from: {
                 opacity: 0,
@@ -5534,15 +6353,19 @@ const getComponentCss$t = (hideLabel, state, isDisabled, theme) => {
         : getInvertedThemedColors(theme).primaryColor.replace(/#/g, '%23');
     return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, false, theme), {
         '@global': {
-            '::slotted': addImportantToEachRule(Object.assign({ '&(input)': {
+            '::slotted': addImportantToEachRule({
+                '&(input)': {
                     borderRadius: '50%',
-                }, '&(input:checked)': {
+                },
+                '&(input:checked)': {
                     backgroundImage: getInlineSVGBackgroundImage(`<circle fill="${checkedIconColor}" cx="12" cy="12" r="6"/>`),
-                } }, (!isDisabled && {
-                '&(input:focus)::before': {
-                    borderRadius: '50%',
                 },
-            }))),
+                ...(!isDisabled && {
+                    '&(input:focus)::before': {
+                        borderRadius: '50%',
+                    },
+                }),
+            }),
         },
     }));
 };
@@ -5586,11 +6409,35 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
     };
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'block', height: 'inherit' }, hostHiddenStyles)),
-            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', pointerEvents: 'auto', alignItems: 'center', justifyContent: 'center' }, textSmallStyle), { height: `calc(${fontLineHeight} + 4px)`, width: `calc(${fontLineHeight} + 4px)`, border: 0, outline: 0, cursor: 'pointer', background: backgroundColorMap[theme][gradientColor], borderRadius: borderRadiusSmall }), frostedGlassStyle), { visibility: 'hidden' }), (!isDarkTheme && dropShadowLowStyle)), hoverMediaQuery({
-                transition: getTransition('background-color'),
-                '&:hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
-            })),
+            ':host': addImportantToEachRule({
+                display: 'block',
+                height: 'inherit',
+                ...hostHiddenStyles,
+            }),
+            button: {
+                display: 'flex',
+                pointerEvents: 'auto',
+                alignItems: 'center',
+                justifyContent: 'center',
+                ...textSmallStyle,
+                height: `calc(${fontLineHeight} + 4px)`,
+                width: `calc(${fontLineHeight} + 4px)`,
+                border: 0,
+                outline: 0,
+                cursor: 'pointer',
+                background: backgroundColorMap[theme][gradientColor],
+                borderRadius: borderRadiusSmall,
+                ...frostedGlassStyle,
+                visibility: 'hidden',
+                ...(!isDarkTheme && dropShadowLowStyle),
+                ...hoverMediaQuery({
+                    transition: getTransition('background-color'),
+                    '&:hover': {
+                        ...frostedGlassStyle,
+                        background: hoverColor,
+                    },
+                }),
+            },
         },
         root: {
             display: 'grid',
@@ -5598,14 +6445,19 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             margin: '0 -4px',
             height: 'inherit',
         },
-        'scroll-area': Object.assign({ gridArea: '1 / 1 / 1 / -1', padding: '4px', overflow: 'auto hidden' }, (!hasScrollbar && {
-            // If scrollbar is disabled - hide scrollbar
-            msOverflowStyle: 'none' /* IE and Edge */,
-            scrollbarWidth: 'none' /* Firefox */,
-            '&::-webkit-scrollbar': {
-                display: 'none',
-            },
-        })),
+        'scroll-area': {
+            gridArea: '1 / 1 / 1 / -1',
+            padding: '4px',
+            overflow: 'auto hidden',
+            ...(!hasScrollbar && {
+                // If scrollbar is disabled - hide scrollbar
+                msOverflowStyle: 'none' /* IE and Edge */,
+                scrollbarWidth: 'none' /* Firefox */,
+                '&::-webkit-scrollbar': {
+                    display: 'none',
+                },
+            }),
+        },
         // Extra wrapper needed to compensate different offset parent calculation depending on browser.
         // Needed for position of status bar.
         'scroll-wrapper': {
@@ -5615,7 +6467,14 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             minWidth: '100%',
             verticalAlign: 'top',
             outline: 0,
-            '&::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid transparent`, borderRadius: borderRadiusSmall, pointerEvents: 'none' }),
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                ...getInsetJssStyle(-4),
+                border: `${borderWidthBase} solid transparent`,
+                borderRadius: borderRadiusSmall,
+                pointerEvents: 'none', // Needed to enable clicks inside of slot
+            },
             '&:focus::before': {
                 borderColor: focusColor,
             },
@@ -5636,12 +6495,36 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
                 right: 0,
             },
         },
-        'action-prev': Object.assign(Object.assign({}, actionPrevNextStyles), { marginLeft: '-1px', gridArea: '1 / 1 / 1 / 1', justifyContent: 'flex-start', background: `linear-gradient(to right, ${getGradient(theme, gradientColor)} 100%)`, visibility: isPrevHidden ? 'hidden' : 'visible', '& button': Object.assign({ marginLeft: '8px' }, hoverMediaQuery({
-                visibility: isPrevHidden ? 'hidden' : 'visible',
-            })) }),
-        'action-next': Object.assign(Object.assign({}, actionPrevNextStyles), { marginRight: '-1px', gridArea: '1 / 3 / 1 / 3', justifyContent: 'flex-end', background: `linear-gradient(to left, ${getGradient(theme, gradientColor)} 100%)`, visibility: isNextHidden ? 'hidden' : 'visible', '& button': Object.assign({ marginRight: '8px' }, hoverMediaQuery({
-                visibility: isNextHidden ? 'hidden' : 'visible',
-            })) }),
+        'action-prev': {
+            ...actionPrevNextStyles,
+            marginLeft: '-1px',
+            gridArea: '1 / 1 / 1 / 1',
+            justifyContent: 'flex-start',
+            background: `linear-gradient(to right, ${getGradient(theme, gradientColor)} 100%)`,
+            visibility: isPrevHidden ? 'hidden' : 'visible',
+            '& button': {
+                marginLeft: '8px',
+                // hide buttons on mobile (actually devices not supporting hover)
+                ...hoverMediaQuery({
+                    visibility: isPrevHidden ? 'hidden' : 'visible',
+                }),
+            },
+        },
+        'action-next': {
+            ...actionPrevNextStyles,
+            marginRight: '-1px',
+            gridArea: '1 / 3 / 1 / 3',
+            justifyContent: 'flex-end',
+            background: `linear-gradient(to left, ${getGradient(theme, gradientColor)} 100%)`,
+            visibility: isNextHidden ? 'hidden' : 'visible',
+            '& button': {
+                marginRight: '8px',
+                // hide buttons on mobile (actually devices not supporting hover)
+                ...hoverMediaQuery({
+                    visibility: isNextHidden ? 'hidden' : 'visible',
+                }),
+            },
+        },
     });
 };
 
@@ -5658,35 +6541,77 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
         hoverBorderColor: primaryColor,
     };
 };
-const getComponentCss$r = (isDisabled, isSelected, hasIcon, theme) => {
+const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
+const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'block', outline: 0 }, hostHiddenStyles)),
-            button: Object.assign(Object.assign(Object.assign({ display: 'block', height: '100%', width: '100%', padding: hasIcon ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`, margin: 0, border: `${borderWidthBase} solid ${borderColor}`, borderRadius: borderRadiusSmall, outline: 0, background: 'transparent', color: buttonColor }, textSmallStyle), { overflowWrap: 'normal', position: 'relative', '&::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-5)), { border: `${borderWidthBase} solid transparent`, borderRadius: '7px' }), '&:focus::before': {
+            ':host': addImportantToEachRule({
+                display: 'block',
+                outline: 0,
+                ...hostHiddenStyles,
+            }),
+            // All width relevant styling has to be kept in sync with the tempDiv of the p-segmented-control utils
+            button: {
+                display: 'block',
+                height: '100%',
+                width: '100%',
+                padding: getItemPadding(hasIcon && hasSlottedContent),
+                margin: 0,
+                border: `${borderWidthBase} solid ${borderColor}`,
+                borderRadius: borderRadiusSmall,
+                outline: 0,
+                background: 'transparent',
+                color: buttonColor,
+                ...textSmallStyle,
+                overflowWrap: 'normal',
+                position: 'relative',
+                '&::before': {
+                    content: '""',
+                    position: 'absolute',
+                    ...getInsetJssStyle(-5),
+                    border: `${borderWidthBase} solid transparent`,
+                    borderRadius: '7px',
+                },
+                '&:focus::before': {
                     borderColor: focusColor,
-                }, '&:focus:not(:focus-visible)::before': {
+                },
+                '&:focus:not(:focus-visible)::before': {
                     borderColor: 'transparent',
-                } }), (isDisabled
-                ? {
-                    cursor: 'not-allowed',
-                }
-                : Object.assign({ cursor: 'pointer' }, (!isSelected &&
-                    hoverMediaQuery({
-                        transition: getTransition('border-color'),
-                        '&:hover': {
-                            borderColor: hoverBorderColor,
-                        },
-                    }))))),
+                },
+                ...(isDisabled
+                    ? {
+                        cursor: 'not-allowed',
+                    }
+                    : {
+                        cursor: 'pointer',
+                        ...(!isSelected &&
+                            hoverMediaQuery({
+                                transition: getTransition('border-color'),
+                                '&:hover': {
+                                    borderColor: hoverBorderColor,
+                                },
+                            })),
+                    }),
+            },
             // label
-            span: Object.assign(Object.assign({ display: 'block' }, textXSmallStyle), { overflowWrap: 'normal', color: labelColor }),
-        },
-        icon: {
-            height: ICON_SIZE,
-            width: ICON_SIZE,
-            marginRight: ICON_MARGIN,
+            span: {
+                display: 'block',
+                ...textXSmallStyle,
+                overflowWrap: 'normal',
+                color: labelColor,
+            },
         },
+        ...(hasIcon && {
+            icon: {
+                height: ICON_SIZE,
+                width: ICON_SIZE,
+                ...(hasSlottedContent && {
+                    marginRight: ICON_MARGIN,
+                }),
+            },
+        }),
     });
 };
 
@@ -5696,7 +6621,13 @@ const getComponentCss$q = (maxWidth) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'grid', gridAutoRows: '1fr', gridTemplateColumns: `repeat(auto-fit, ${maxWidth}px)`, gap: '6px' }, hostHiddenStyles)),
+            ':host': addImportantToEachRule({
+                display: 'grid',
+                gridAutoRows: '1fr',
+                gridTemplateColumns: `repeat(auto-fit, ${maxWidth}px)`,
+                gap: '6px',
+                ...hostHiddenStyles,
+            }),
         },
     });
 };
@@ -5704,71 +6635,131 @@ const getComponentCss$q = (maxWidth) => {
 const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    return Object.assign(Object.assign(Object.assign({ [`::slotted(${child})`]: Object.assign({ display: 'block', width: '100%', height: child !== 'textarea'
+    return {
+        [`::slotted(${child})`]: {
+            display: 'block',
+            width: '100%',
+            height: child !== 'textarea'
                 ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
-                : 'auto', margin: 0, outline: 0, WebkitAppearance: 'none', appearance: 'none', boxSizing: 'border-box', border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`, borderRadius: borderRadiusSmall, background: 'transparent', font: textSmallStyle.font.replace('ex', 'ex + 6px'), textIndent: 0, color: primaryColor, transition: ['color', 'border-color', 'background-color'].map(getTransition).join() }, additionalDefaultJssStyle) }, hoverMediaQuery({
-        // with the media query the selector has higher priority and overrides disabled styles
-        [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)`]: {
-            borderColor: formStateHoverColor || primaryColor,
+                : 'auto',
+            margin: 0,
+            outline: 0,
+            WebkitAppearance: 'none',
+            appearance: 'none',
+            boxSizing: 'border-box',
+            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            background: 'transparent',
+            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
+            textIndent: 0,
+            color: primaryColor,
+            transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
+            ...additionalDefaultJssStyle,
         },
-    })), { [`::slotted(${child}:focus)`]: {
+        ...hoverMediaQuery({
+            // with the media query the selector has higher priority and overrides disabled styles
+            [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)`]: {
+                borderColor: formStateHoverColor || primaryColor,
+            },
+        }),
+        [`::slotted(${child}:focus)`]: {
             borderColor: primaryColor,
-        }, [`::slotted(${child}:disabled)`]: {
+        },
+        [`::slotted(${child}:disabled)`]: {
             cursor: 'not-allowed',
             color: disabledColor,
             borderColor: disabledColor,
             WebkitTextFillColor: disabledColor,
-        } }), (child !== 'select' && {
-        [`::slotted(${child}[readonly])`]: {
-            borderColor: contrastLowColor,
-            background: contrastLowColor,
         },
-    }));
+        ...(child !== 'select' && {
+            [`::slotted(${child}[readonly])`]: {
+                borderColor: contrastLowColor,
+                background: contrastLowColor,
+            },
+        }),
+    };
 };
 const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUnitOrIconStyles) => {
     const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
     const { formStateHoverColor } = getThemedFormStateColors(theme, state);
     const counterOrUnitOrIconStylesKey = counterOrUnitOrIconStyles && Object.keys(counterOrUnitOrIconStyles)[0];
-    return Object.assign({ label: {
+    return {
+        label: {
             display: 'flex',
             flexDirection: 'column',
             gap: spacingStaticXSmall,
             position: 'relative',
-            '&__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': {
-                    [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))` +
-                        (formStateHoverColor ? `,::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)` : '')]: {
-                        borderColor: addImportantToRule(formStateHoverColor || primaryColor),
-                    },
+            '&__text': {
+                display: 'block',
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { width: 'fit-content' })),
+                ...textSmallStyle,
+                color: isDisabled ? disabledColor : primaryColor,
+                transition: getTransition('color'),
+                '&+&': {
+                    marginTop: `-${spacingStaticXSmall}`,
+                    fontSize: fontSizeTextXSmall,
+                    ...(!isDisabled && {
+                        color: contrastHighColor,
+                    }),
                 },
-            })),
-        } }, (counterOrUnitOrIconStyles && {
-        [counterOrUnitOrIconStylesKey]: Object.assign(Object.assign(Object.assign({}, counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey]), { pointerEvents: 'none' }), (isDisabled && {
-            color: disabledColor,
-            cursor: 'not-allowed',
-        })),
-    }));
+                ...hoverMediaQuery({
+                    '&:hover': {
+                        [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))` +
+                            (formStateHoverColor ? `,::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)` : '')]: {
+                            borderColor: addImportantToRule(formStateHoverColor || primaryColor),
+                        },
+                    },
+                }),
+            },
+        },
+        ...(counterOrUnitOrIconStyles && {
+            [counterOrUnitOrIconStylesKey]: {
+                ...counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey],
+                pointerEvents: 'none',
+                ...(isDisabled && {
+                    color: disabledColor,
+                    cursor: 'not-allowed',
+                }),
+            },
+        }),
+    };
 };
 
 const OPTION_HEIGHT = 40; // optgroups are higher and ignored
 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: {
+    return getCss({
+        '@global': addImportantToEachRule({
+            ':host': {
+                display: 'block',
+                ...hostHiddenStyles,
+            },
+            ...getBaseChildStyles('select', state, theme, {
+                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, {
-        icon: {
-            position: 'absolute',
-            bottom: '13px',
-            right: '15px',
-            transform: 'rotate3d(0,0,1,0.0001deg)',
-            transition: getTransition('transform'),
-            '&--open': {
-                transform: 'rotate3d(0,0,1,180deg)',
-            },
         },
-    })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)));
+        ...getLabelStyles('select', isDisabled, hideLabel, state, theme, {
+            icon: {
+                position: 'absolute',
+                bottom: '13px',
+                right: '15px',
+                transform: 'rotate3d(0,0,1,0.0001deg)',
+                transition: getTransition('transform'),
+                '&--open': {
+                    transform: 'rotate3d(0,0,1,180deg)',
+                },
+            },
+        }),
+        ...getFunctionalComponentRequiredStyles(),
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
 };
 
 const dropdownPositionVar = '--p-internal-dropdown-position';
@@ -5778,19 +6769,36 @@ const getButtonStyles = (direction, isOpen, state, theme) => {
     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': {
+            button: {
+                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': {
+                ...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,
-            })),
+                },
+                ...(isOpen && {
+                    [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                    [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+                }),
+            },
         },
     };
 };
@@ -5804,28 +6812,63 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
     };
     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': {
+            input: {
+                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': {
+                },
+                ...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({ 
+                }),
+                '&+span': {
                     // 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,
-                })) }),
+                    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,
+                    }),
+                },
+            },
         },
     };
 };
@@ -5835,29 +6878,74 @@ const getListStyles = (direction, 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,
+            ul: {
+                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) => ({ ...result, [curr]: borderRadiusSmall }), {}),
+                scrollbarWidth: 'thin',
+                scrollbarColor: 'auto',
+                transition: getTransition('border-color'),
+                transform: 'translate3d(0,0,0)', // fix iOS bug if less than 5 items are displayed
             },
-        })), { '&--highlighted, &--selected': {
+        },
+        option: {
+            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': {
+            },
+            '&--selected': {
                 cursor: 'default',
                 pointerEvents: 'none',
-            }, '&--disabled': {
+            },
+            '&--disabled': {
                 cursor: 'not-allowed',
                 color: disabledColor,
-            }, '&--hidden': {
+            },
+            '&--hidden': {
                 display: 'none',
-            } }),
+            },
+        },
         optgroup: {
             display: 'block',
             padding: '3px 14px',
@@ -5878,13 +6966,24 @@ const getComponentCss$o = (direction, isOpen, state, disabled, filter, theme) =>
     // 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,
-                    },
-                }))),
+            ':host': {
+                [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',
@@ -5910,7 +7009,11 @@ const getComponentCss$n = (size, theme) => {
     const { canvasColor, canvasTextColor } = getHighContrastColors();
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'inline-flex', verticalAlign: 'top' }, hostHiddenStyles)),
+            ':host': addImportantToEachRule({
+                display: 'inline-flex',
+                verticalAlign: 'top',
+                ...hostHiddenStyles,
+            }),
             svg: {
                 display: 'block',
                 position: 'relative',
@@ -5955,14 +7058,21 @@ 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 }),
+        root: {
+            display: 'block',
+            ...buildResponsiveStyles(size, (s) => sizeMap$1[s]),
+            margin: 0,
+            padding: 0,
+            boxSizing: 'border-box',
+            strokeWidth: 1.5,
+        },
         'sr-only': getHiddenTextJssStyle(),
     });
 };
 
 const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
     // # of the hexcolor starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
-    numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => (Object.assign(Object.assign({}, result), { [key]: value.replace(/#/g, '%23') })), {});
+    numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => ({ ...result, [key]: value.replace(/#/g, '%23') }), {});
     const { disabledColor, invertedBaseColor, primaryColor } = numberedCircleColors;
     const fillColor = isStateCurrent ? invertedBaseColor : disabledColor;
     const svgCirclePath = `<circle fill="${isStateCurrent ? primaryColor : 'none'}"${isStateCurrent ? '' : ` stroke="${fillColor}"`} stroke-width="1px" cx="12" cy="12" r="9"/>`;
@@ -5987,47 +7097,98 @@ const getComponentCss$m = (state, disabled, theme) => {
     const isStateCurrent = state === 'current';
     const isStateCurrentOrUndefined = !state || isStateCurrent;
     const isDisabled = !state || disabled;
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': Object.assign(Object.assign({}, (isStateCurrentOrUndefined &&
-                Array.from(Array(9)).reduce((result, _, i) => (Object.assign(Object.assign({}, result), { [`&(:nth-of-type(${i + 1})) $button::before`]: {
-                        backgroundImage: getInlineSVGBackgroundImage(getSVGPath(i, {
-                            primaryColor,
-                            invertedBaseColor: getInvertedThemedColors(theme).primaryColor,
-                            disabledColor,
-                        }, isStateCurrent)),
-                    } })), {}))), addImportantToEachRule(Object.assign(Object.assign({ fontSize: 'inherit' }, hostHiddenStyles), { '&(:not(:last-of-type))': {
-                    margin: `0 ${spacingFluidXSmall} 0 0`,
-                } }))),
-            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', gap: '3px', color: isDisabled ? disabledColor : primaryColor, padding: '4px 10px 4px 6px', background: 0, border: 0, outline: 0 }, textSmallStyle), { fontSize: 'inherit', width: 'max-content', cursor: isDisabled ? 'not-allowed' : 'pointer', borderRadius: borderRadiusSmall }), (isStateCurrent && Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }))), (!isDisabled &&
-                hoverMediaQuery({
-                    transition: getTransition('background-color'),
-                    '&:hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
-                }))), (isStateCurrentOrUndefined && {
-                // counter
-                // Pseudo element is needed to center the counter to the text, as it is not working optimal directly on the button
-                '&::before': {
+    return getCss({
+        '@global': {
+            ':host': {
+                ...(isStateCurrentOrUndefined &&
+                    Array.from(Array(9)).reduce((result, _, i) => ({
+                        ...result,
+                        [`&(:nth-of-type(${i + 1})) $button::before`]: {
+                            backgroundImage: getInlineSVGBackgroundImage(getSVGPath(i, {
+                                primaryColor,
+                                invertedBaseColor: getInvertedThemedColors(theme).primaryColor,
+                                disabledColor,
+                            }, isStateCurrent)),
+                        },
+                    }), {})),
+                ...addImportantToEachRule({
+                    fontSize: 'inherit',
+                    ...hostHiddenStyles,
+                    '&(:not(:last-of-type))': {
+                        margin: `0 ${spacingFluidXSmall} 0 0`,
+                    },
+                }),
+            },
+            button: {
+                display: 'flex',
+                position: 'relative',
+                gap: '3px',
+                color: isDisabled ? disabledColor : primaryColor,
+                padding: '4px 10px 4px 6px',
+                background: 0,
+                border: 0,
+                outline: 0,
+                ...textSmallStyle,
+                fontSize: 'inherit',
+                width: 'max-content',
+                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                borderRadius: borderRadiusSmall,
+                ...(isStateCurrent && {
+                    ...frostedGlassStyle,
+                    background: hoverColor,
+                }),
+                ...(!isDisabled &&
+                    hoverMediaQuery({
+                        transition: getTransition('background-color'),
+                        '&:hover': {
+                            ...frostedGlassStyle,
+                            background: hoverColor,
+                        },
+                    })),
+                ...(isStateCurrentOrUndefined && {
+                    // counter
+                    // Pseudo element is needed to center the counter to the text, as it is not working optimal directly on the button
+                    '&::before': {
+                        content: '""',
+                        height: fontLineHeight,
+                        width: fontLineHeight,
+                    },
+                }),
+                '&:focus::after': {
                     content: '""',
-                    height: fontLineHeight,
-                    width: fontLineHeight,
+                    position: 'absolute',
+                    ...getInsetJssStyle(),
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                    borderRadius: borderRadiusSmall,
                 },
-            })), { '&:focus::after': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }), '&:focus:not(:focus-visible)::after': {
+                '&:focus:not(:focus-visible)::after': {
                     borderColor: 'transparent',
-                } }),
-        } }, (!isStateCurrentOrUndefined && {
-        // complete / warning icons via icon component
-        icon: {
-            height: fontLineHeight,
-            width: fontLineHeight,
+                },
+            },
         },
-    })), { 'sr-only': getHiddenTextJssStyle() }));
+        ...(!isStateCurrentOrUndefined && {
+            // complete / warning icons via icon component
+            icon: {
+                height: fontLineHeight,
+                width: fontLineHeight,
+            },
+        }),
+        'sr-only': getHiddenTextJssStyle(),
+    });
 };
 
 const getComponentCss$l = (size) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
+        },
+        scroller: {
+            ...textSmallStyle,
+            ...buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] })),
         },
-        scroller: Object.assign(Object.assign({}, textSmallStyle), buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] }))),
     });
 };
 
@@ -6062,22 +7223,55 @@ const getColors$1 = (checked, disabled, loading, theme) => {
 const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, disabled, loading, theme);
     const { focusColor } = getThemedColors(theme);
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ outline: 0 }, hostHiddenStyles), buildResponsiveStyles(stretch, (stretchValue) => (Object.assign({ display: stretchValue ? 'block' : 'inline-block', width: stretchValue ? '100%' : 'auto' }, (!stretchValue && { verticalAlign: 'top' })))))),
-        }, root: Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-start', gap: spacingStaticSmall, width: '100%', padding: 0, outline: 0, border: 0, textAlign: 'left', background: 'transparent', appearance: 'none', cursor: isDisabledOrLoading(disabled, loading) ? 'auto' : 'pointer' }, buildResponsiveStyles(stretch, (stretchValue) => ({
-            justifyContent: stretchValue ? 'space-between' : 'flex-start',
-        }))), (!isDisabledOrLoading(disabled, loading) &&
-            hoverMediaQuery({
-                '&:hover .switch': {
-                    borderColor: buttonBorderColorHover,
-                    backgroundColor: buttonBackgroundColorHover,
-                    '& .toggle': {
-                        backgroundColor: toggleBackgroundColorHover,
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                outline: 0,
+                ...hostHiddenStyles,
+                ...buildResponsiveStyles(stretch, (stretchValue) => ({
+                    display: stretchValue ? 'block' : 'inline-block',
+                    width: stretchValue ? '100%' : 'auto',
+                    ...(!stretchValue && { verticalAlign: 'top' }),
+                })),
+            }),
+        },
+        root: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: spacingStaticSmall,
+            width: '100%',
+            padding: 0,
+            outline: 0,
+            border: 0,
+            textAlign: 'left',
+            background: 'transparent',
+            appearance: 'none',
+            cursor: isDisabledOrLoading(disabled, loading) ? 'auto' : 'pointer',
+            ...buildResponsiveStyles(stretch, (stretchValue) => ({
+                justifyContent: stretchValue ? 'space-between' : 'flex-start',
+            })),
+            ...(!isDisabledOrLoading(disabled, loading) &&
+                hoverMediaQuery({
+                    '&:hover .switch': {
+                        borderColor: buttonBorderColorHover,
+                        backgroundColor: buttonBackgroundColorHover,
+                        '& .toggle': {
+                            backgroundColor: toggleBackgroundColorHover,
+                        },
                     },
-                },
-            }))), { '&:focus .switch::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-6)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: '18px' }), '&:not(:focus-visible) .switch::before': {
+                })),
+            '&:focus .switch::before': {
+                content: '""',
+                position: 'absolute',
+                ...getInsetJssStyle(-6),
+                border: `${borderWidthBase} solid ${focusColor}`,
+                borderRadius: '18px',
+            },
+            '&:not(:focus-visible) .switch::before': {
                 borderColor: 'transparent',
-            } }), switch: {
+            },
+        },
+        switch: {
             position: 'relative',
             width: '48px',
             height: '28px',
@@ -6088,7 +7282,8 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
             backgroundColor: buttonBackgroundColor,
             cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
             transition: `${getTransition('background-color')},${getTransition('border-color')},${getTransition('color')}`,
-        }, toggle: {
+        },
+        toggle: {
             position: 'absolute',
             top: '2px',
             left: '2px',
@@ -6099,23 +7294,36 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
             backgroundColor: toggleBackgroundColor,
             transform: `translate3d(${checked ? '20px' : '0'}, 0, 0)`,
             transition: `${getTransition('background-color')},${getTransition('transform')}`,
-        } }, (loading && {
-        spinner: {
-            position: 'absolute',
-            top: '-4px',
-            left: '-4px',
-            width: '28px',
-            height: '28px',
         },
-    })), { 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, getHiddenTextJssStyle))) }));
+        ...(loading && {
+            spinner: {
+                position: 'absolute',
+                top: '-4px',
+                left: '-4px',
+                width: '28px',
+                height: '28px',
+            },
+        }),
+        label: {
+            ...textSmallStyle,
+            paddingTop: '2px',
+            minWidth: 0,
+            minHeight: 0,
+            color: textColor,
+            ...mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+                order: alignLabelValue === 'left' ? -1 : 0,
+            })), buildResponsiveStyles(hideLabel, getHiddenTextJssStyle)),
+        },
+    });
 };
 
 const getComponentCss$j = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'table-row-group' }, hostHiddenStyles)),
+            ':host': addImportantToEachRule({
+                display: 'table-row-group',
+                ...hostHiddenStyles,
+            }),
         },
     });
 };
@@ -6123,7 +7331,16 @@ const getComponentCss$j = () => {
 const getComponentCss$i = (multiline) => {
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ display: 'table-cell', padding: spacingFluidSmall, margin: 0, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles))), { verticalAlign: 'middle' }),
+            ':host': {
+                ...addImportantToEachRule({
+                    display: 'table-cell',
+                    padding: spacingFluidSmall,
+                    margin: 0,
+                    whiteSpace: multiline ? 'normal' : 'nowrap',
+                    ...hostHiddenStyles,
+                }),
+                verticalAlign: 'middle',
+            },
         },
     });
 };
@@ -6140,13 +7357,24 @@ const getComponentCss$h = (theme) => {
     const { primaryColor, hoverColor, contrastLowColor } = doGetThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign({ display: 'block' }, textSmallStyle), { color: primaryColor, textAlign: 'left' }), hostHiddenStyles)),
-            '::slotted(*)': addImportantToEachRule(Object.assign({ [cssVariableTableHoverColor]: hoverColor, [cssVariableTableBorderColor]: contrastLowColor, [cssVariableTableHeadCellIconFilter]: isThemeDark(theme) ? 'invert(100%)' : 'none' }, (isHighContrastMode &&
-                getSchemedHighContrastMediaQuery({
-                    [cssVariableTableHeadCellIconFilter]: 'none',
-                }, {
-                    [cssVariableTableHeadCellIconFilter]: 'invert(100%)',
-                })))),
+            ':host': addImportantToEachRule({
+                display: 'block',
+                ...textSmallStyle,
+                color: primaryColor,
+                textAlign: 'left',
+                ...hostHiddenStyles,
+            }),
+            '::slotted(*)': addImportantToEachRule({
+                [cssVariableTableHoverColor]: hoverColor,
+                [cssVariableTableBorderColor]: contrastLowColor,
+                [cssVariableTableHeadCellIconFilter]: isThemeDark(theme) ? 'invert(100%)' : 'none',
+                ...(isHighContrastMode &&
+                    getSchemedHighContrastMediaQuery({
+                        [cssVariableTableHeadCellIconFilter]: 'none',
+                    }, {
+                        [cssVariableTableHeadCellIconFilter]: 'invert(100%)',
+                    })),
+            }),
         },
         caption: {
             marginBottom: spacingFluidMedium,
@@ -6165,48 +7393,91 @@ const buttonBeforeOffsetVertical = '-2px';
 const buttonBeforeOffsetHorizontal = '-4px';
 const getComponentCss$g = (active, direction, hideLabel, multiline) => {
     const sortable = isSortable(active, direction);
-    return getCss(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'table-cell', padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`, verticalAlign: 'bottom', whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles)) }, (sortable
-            ? {
-                button: Object.assign(Object.assign({ position: 'relative', display: 'flex', gap: spacingStaticXSmall, width: 'auto', margin: 0, padding: 0, font: 'inherit', color: 'inherit', outline: 0, alignItems: 'flex-end', appearance: 'none', background: 'transparent', textAlign: 'left', border: 0, zIndex: 0, cursor: 'pointer', '&::before': {
-                        content: '""',
-                        position: 'absolute',
-                        top: buttonBeforeOffsetVertical,
-                        bottom: buttonBeforeOffsetVertical,
-                        right: buttonBeforeOffsetHorizontal,
-                        left: buttonBeforeOffsetHorizontal,
-                        borderRadius: borderRadiusSmall,
-                        zIndex: -1,
-                        transition: getTransition('background-color'),
-                    } }, hoverMediaQuery({
-                    '&:hover, &:focus': {
-                        '& .icon': {
-                            opacity: 1,
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                display: 'table-cell',
+                padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`,
+                verticalAlign: 'bottom',
+                whiteSpace: multiline ? 'normal' : 'nowrap',
+                ...hostHiddenStyles,
+            }),
+            ...(sortable
+                ? {
+                    button: {
+                        position: 'relative',
+                        display: 'flex',
+                        gap: spacingStaticXSmall,
+                        width: 'auto',
+                        margin: 0,
+                        padding: 0,
+                        font: 'inherit',
+                        color: 'inherit',
+                        outline: 0,
+                        alignItems: 'flex-end',
+                        appearance: 'none',
+                        background: 'transparent',
+                        textAlign: 'left',
+                        border: 0,
+                        zIndex: 0,
+                        cursor: 'pointer',
+                        '&::before': {
+                            content: '""',
+                            position: 'absolute',
+                            top: buttonBeforeOffsetVertical,
+                            bottom: buttonBeforeOffsetVertical,
+                            right: buttonBeforeOffsetHorizontal,
+                            left: buttonBeforeOffsetHorizontal,
+                            borderRadius: borderRadiusSmall,
+                            zIndex: -1,
+                            transition: getTransition('background-color'),
+                        },
+                        ...hoverMediaQuery({
+                            '&:hover, &:focus': {
+                                '& .icon': {
+                                    opacity: 1,
+                                },
+                            },
+                            '&:hover::before': {
+                                ...frostedGlassStyle,
+                                backgroundColor: hoverColor,
+                            },
+                        }),
+                        '&:focus::before': {
+                            border: `${borderWidthBase} solid ${focusColor}`,
+                        },
+                        '&:not(:focus-visible)::before': {
+                            border: 0,
                         },
                     },
-                    '&:hover::before': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
-                })), { '&:focus::before': {
-                        border: `${borderWidthBase} solid ${focusColor}`,
-                    }, '&:not(:focus-visible)::before': {
+                }
+                : hideLabel && {
+                    span: {
+                        ...getHiddenTextJssStyle(),
+                        display: 'block',
                         border: 0,
-                    } }),
-            }
-            : hideLabel && {
-                span: Object.assign(Object.assign({}, getHiddenTextJssStyle()), { display: 'block', border: 0 }),
-            })) }, (sortable && {
-        icon: {
-            transition: getTransition('opacity'),
-            opacity: active ? 1 : 0,
-            transform: `rotate3d(0,0,1,${isDirectionAsc(direction) ? 0 : 180}deg)`,
-            transformOrigin: '50% 50%',
-            filter: `var(${cssVariableTableHeadCellIconFilter})`,
+                    },
+                }),
         },
-    })));
+        ...(sortable && {
+            icon: {
+                transition: getTransition('opacity'),
+                opacity: active ? 1 : 0,
+                transform: `rotate3d(0,0,1,${isDirectionAsc(direction) ? 0 : 180}deg)`,
+                transformOrigin: '50% 50%',
+                filter: `var(${cssVariableTableHeadCellIconFilter})`,
+            },
+        }),
+    });
 };
 
 const getComponentCss$f = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'table-row' }, hostHiddenStyles)),
+            ':host': addImportantToEachRule({
+                display: 'table-row',
+                ...hostHiddenStyles,
+            }),
         },
     });
 };
@@ -6214,7 +7485,13 @@ const getComponentCss$f = () => {
 const getComponentCss$e = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'table-header-group', fontSize: fontSizeTextXSmall, lineHeight: fontLineHeight, fontWeight: fontWeightSemiBold }, hostHiddenStyles)),
+            ':host': addImportantToEachRule({
+                display: 'table-header-group',
+                fontSize: fontSizeTextXSmall,
+                lineHeight: fontLineHeight,
+                fontWeight: fontWeightSemiBold,
+                ...hostHiddenStyles,
+            }),
         },
     });
 };
@@ -6222,52 +7499,132 @@ const getComponentCss$e = () => {
 const getComponentCss$d = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'table-row', borderTop: `1px solid var(${cssVariableTableBorderColor})`, borderBottom: `1px solid var(${cssVariableTableBorderColor})`, transition: getTransition('background') }, hostHiddenStyles), hoverMediaQuery({
-                '&(:hover)': {
-                    // ...frostedGlassStyle, // will result in not smooth transition when applied
-                    background: `var(${cssVariableTableHoverColor})`,
-                },
-            }))),
+            ':host': addImportantToEachRule({
+                display: 'table-row',
+                borderTop: `1px solid var(${cssVariableTableBorderColor})`,
+                borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
+                transition: getTransition('background'),
+                ...hostHiddenStyles,
+                ...hoverMediaQuery({
+                    '&(:hover)': {
+                        // ...frostedGlassStyle, // will result in not smooth transition when applied
+                        background: `var(${cssVariableTableHoverColor})`,
+                    },
+                }),
+            }),
         },
     });
 };
 
-const tabsTransitionDuration = '.4s';
-const transformSelector = (selector) => ['a', 'button'].map((tag) => selector.replace(/\[role]/g, tag)).join();
+const barTransitionDuration = '.4s';
+const scrollerAnimatedCssClass = 'scroller--animated';
+const targetSelectors = ['a', 'button'];
+const transformSelector = (selector) => targetSelectors.map((tag) => selector.replace(/\[role]/g, tag)).join();
 const getComponentCss$c = (size, weight, theme) => {
     const { primaryColor, hoverColor, focusColor } = getThemedColors(theme);
+    const barJssStyle = {
+        position: 'absolute',
+        height: '2px',
+        left: 0,
+        background: isHighContrastMode ? getHighContrastColors().canvasTextColor : primaryColor,
+    };
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ position: 'relative', 
-                // TODO: probably not needed because there is no style with position: fixed
-                transform: 'translate3d(0,0,0)' }, hostHiddenStyles))) }, addImportantToEachRule(Object.assign(Object.assign({ 
-            // would be nice to use shared selector like '::slotted([role])'
-            // but this doesn't work reliably when rendering in browser
-            [transformSelector('::slotted([role])')]: Object.assign(Object.assign({}, getResetInitialStylesForSlottedAnchor), { display: 'inline-block', position: 'relative', margin: '0 0 4px 0', padding: 0, verticalAlign: 'top', fontFamily: 'inherit', fontStyle: 'inherit', fontVariant: 'inherit', fontWeight: 'inherit', fontSize: 'inherit', lineHeight: 'inherit', whiteSpace: 'nowrap', boxSizing: 'border-box', WebkitAppearance: 'none', appearance: 'none', outline: 0, outlineOffset: '1px', textDecoration: 'none', textAlign: 'left', border: 0, background: 'transparent', color: primaryColor, cursor: 'pointer', borderRadius: borderRadiusSmall, '&::before': Object.assign({ content: '""', position: 'absolute', top: '-2px', bottom: '-2px', left: '-4px', right: '-4px', borderRadius: borderRadiusSmall, zIndex: '-1' }, hoverMediaQuery({
-                    transition: getTransition('background'),
-                })) }) }, hoverMediaQuery({
-            [transformSelector('::slotted([role]:hover)::before')]: Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
-        })), { 
-            // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
-            [transformSelector('::slotted([role]:focus)::before')]: {
-                border: `${borderWidthBase} solid ${focusColor}`,
-                borderRadius: borderRadiusSmall,
-            }, [transformSelector('::slotted([role]:focus:not(:focus-visible))::before')]: {
-                borderColor: 'transparent',
-            }, [transformSelector('::slotted([role]:not(:last-child))')]: {
-                marginRight: '16px', // No token for this spacing exists yet
-            } }))),
-        scroller: Object.assign(Object.assign(Object.assign({}, textSmallStyle), { fontWeight: getFontWeight(weight) }), buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] }))),
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    position: 'relative',
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...addImportantToEachRule({
+                // would be nice to use shared selector like '::slotted([role])'
+                // but this doesn't work reliably when rendering in browser
+                [transformSelector('::slotted([role])')]: {
+                    ...getResetInitialStylesForSlottedAnchor,
+                    display: 'inline-block',
+                    position: 'relative',
+                    margin: '0 0 4px 0',
+                    verticalAlign: 'top',
+                    fontFamily: 'inherit',
+                    fontStyle: 'inherit',
+                    fontVariant: 'inherit',
+                    fontWeight: 'inherit',
+                    fontSize: 'inherit',
+                    lineHeight: 'inherit',
+                    whiteSpace: 'nowrap',
+                    boxSizing: 'border-box',
+                    WebkitAppearance: 'none',
+                    appearance: 'none',
+                    outlineOffset: '1px',
+                    textDecoration: 'none',
+                    textAlign: 'left',
+                    border: 0,
+                    color: primaryColor,
+                    cursor: 'pointer',
+                    borderRadius: borderRadiusSmall,
+                    zIndex: 0,
+                    ...hoverMediaQuery({
+                        '&::before': {
+                            content: '""',
+                            position: 'absolute',
+                            inset: '-2px -4px',
+                            borderRadius: borderRadiusSmall,
+                            zIndex: -1,
+                            transition: getTransition('background-color'),
+                        },
+                    }),
+                },
+                ...hoverMediaQuery({
+                    [transformSelector('::slotted([role]:hover)::before')]: {
+                        ...frostedGlassStyle,
+                        background: hoverColor,
+                    },
+                }),
+                // basic invisible bar, that will be delayed via transition: visibility
+                [transformSelector('::slotted([role])::after')]: {
+                    content: '""',
+                    visibility: 'hidden',
+                },
+                // visible bar for selected tab
+                [transformSelector('::slotted([role][aria-selected="true"])::after')]: {
+                    ...barJssStyle,
+                    right: '0px',
+                    bottom: isHighContrastMode ? '-4px' : '-6px',
+                    visibility: 'visible',
+                },
+                // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
+                [transformSelector('::slotted([role]:focus:focus-visible)::before')]: {
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                },
+                [transformSelector('::slotted([role]:not(:last-child))')]: {
+                    marginRight: spacingStaticMedium,
+                },
+            }),
+        },
+        scroller: {
+            ...textSmallStyle,
+            fontWeight: getFontWeight(weight),
+            ...buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] })),
+        },
+        // conditionally applied and removed based on if activeTabIndex exists
+        [scrollerAnimatedCssClass]: {
+            ['& ' + transformSelector('::slotted([role][aria-selected="true"])::after')]: {
+                transition: addImportantToRule(`visibility 0s linear ${barTransitionDuration}`), // bar appears after transition
+            },
+        },
+        // moving bar
         bar: {
-            display: 'block',
-            position: 'absolute',
+            ...barJssStyle,
             width: 0,
-            height: '2px',
-            left: 0,
             bottom: isHighContrastMode ? '0' : '-2px',
-            background: isHighContrastMode ? getHighContrastColors().canvasTextColor : primaryColor,
-            '&--enable-transition': {
-                willChange: 'width',
-                transition: `transform ${tabsTransitionDuration},width ${tabsTransitionDuration}`,
+            visibility: 'visible',
+            transition: `transform ${barTransitionDuration},width ${barTransitionDuration}`,
+            animation: '$hide 0s .5s forwards', // auto hide bar after transition, needs to be a little longer in Safari
+        },
+        '@keyframes hide': {
+            to: {
+                visibility: 'hidden',
             },
         },
     });
@@ -6277,7 +7634,20 @@ 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, '&(:focus:focus-visible)::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }) })),
+            ':host': addImportantToEachRule({
+                display: 'block',
+                position: 'relative',
+                color: primaryColor,
+                ...hostHiddenStyles,
+                outline: 0,
+                '&(:focus:focus-visible)::before': {
+                    content: '""',
+                    position: 'absolute',
+                    ...getInsetJssStyle(-4),
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                    borderRadius: borderRadiusSmall,
+                },
+            }),
         },
     });
 };
@@ -6285,7 +7655,10 @@ const getComponentCss$b = (theme) => {
 const getComponentCss$a = () => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
         },
         root: {
             marginBottom: '8px',
@@ -6295,7 +7668,13 @@ const getComponentCss$a = () => {
 
 const getTagFocusJssStyle = (themedColors) => {
     return {
-        '&:focus::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${themedColors.focusColor}`, borderRadius: borderRadiusMedium }),
+        '&:focus::before': {
+            content: '""',
+            position: 'absolute',
+            ...getInsetJssStyle(-4),
+            border: `${borderWidthBase} solid ${themedColors.focusColor}`,
+            borderRadius: borderRadiusMedium,
+        },
         '&:focus:not(:focus-visible)::before': {
             borderColor: 'transparent',
         },
@@ -6318,26 +7697,53 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
     const themedColors = getThemedColors(theme);
     const { primaryColor, hoverColor, contrastHighColor } = themedColors;
     const backgroundColor = getThemedBackgroundColor(color, themedColors);
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'inline-block', verticalAlign: 'top', outline: 0 }, hostHiddenStyles)),
-            button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', alignItems: 'center', gap: '12px', minHeight: '54px', padding: '4px 0 4px 12px', borderRadius: borderRadiusSmall, border: 0, cursor: 'pointer', background: backgroundColor, color: primaryColor, textAlign: 'left' }, textSmallStyle), { outline: isHighContrastMode ? '1px solid transparent' : 0 }), getTagFocusJssStyle(themedColors)), hoverMediaQuery({
-                '&:hover > .icon': {
-                    backgroundColor: hoverColor,
-                },
-            })),
-        } }, (hasLabel && {
-        label: {
-            display: 'block',
-            marginBottom: '-4px',
-            color: contrastHighColor,
-            fontSize: fontSizeTextXSmall,
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                display: 'inline-block',
+                verticalAlign: 'top',
+                outline: 0,
+                ...hostHiddenStyles,
+            }),
+            button: {
+                display: 'flex',
+                position: 'relative',
+                alignItems: 'center',
+                gap: '12px',
+                minHeight: '54px',
+                padding: '4px 0 4px 12px',
+                borderRadius: borderRadiusSmall,
+                border: 0,
+                cursor: 'pointer',
+                background: backgroundColor,
+                color: primaryColor,
+                textAlign: 'left',
+                ...textSmallStyle,
+                outline: isHighContrastMode ? '1px solid transparent' : 0,
+                ...getTagFocusJssStyle(themedColors),
+                ...hoverMediaQuery({
+                    '&:hover > .icon': {
+                        backgroundColor: hoverColor,
+                    },
+                }),
+            },
         },
-    })), { icon: {
+        ...(hasLabel && {
+            label: {
+                display: 'block',
+                marginBottom: '-4px',
+                color: contrastHighColor,
+                fontSize: fontSizeTextXSmall,
+            },
+        }),
+        icon: {
             padding: '4px',
             marginRight: '10px',
             transition: getTransition('background-color'),
             borderRadius: borderRadiusSmall,
-        }, 'sr-only': getHiddenTextJssStyle() }));
+        },
+        'sr-only': getHiddenTextJssStyle(),
+    });
 };
 
 const getThemedBackgroundHoverColor = (tagColor, themedColors, theme) => {
@@ -6369,25 +7775,59 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
     const { primaryColor, backgroundColor, backgroundHoverColor } = getColors(themedColors, tagColor, theme);
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'inline-flex', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)),
-            span: Object.assign(Object.assign({ display: 'flex', gap: '2px', alignItems: 'center', position: 'relative', padding: '4px 9px', borderRadius: borderRadiusSmall, background: backgroundColor, color: primaryColor, font: textXSmallStyle.font, whiteSpace: 'nowrap' }, (isHighContrastMode && {
-                outline: '1px solid transparent',
-            })), (isFocusable &&
-                hoverMediaQuery({
-                    transition: getTransition('background-color'),
-                    '&:hover': {
-                        background: backgroundHoverColor,
-                    },
-                }))),
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign({ '&(a),&(button)': Object.assign(Object.assign({}, getResetInitialStylesForSlottedAnchor), { display: 'inline', position: 'static', textDecoration: 'underline', cursor: 'pointer', font: 'inherit', outline: 0, color: 'inherit', appearance: 'none', margin: 0, padding: 0, background: 0, border: 0, textAlign: 'left' }) }, Object.entries(getTagFocusJssStyle(themedColors)).reduce((result, [key, value]) => {
-                result[key.replace(/^&([a-z:\-()]*)(::[a-z\-]+)$/, '&(a$1)$2, &(button$1)$2')] = value;
-                return result;
-            }, {})), { '&(br)': {
+            ':host': {
+                display: 'inline-flex',
+                verticalAlign: 'top',
+                whiteSpace: 'nowrap',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
+            span: {
+                display: 'flex',
+                gap: '2px',
+                alignItems: 'center',
+                position: 'relative',
+                padding: '4px 9px',
+                borderRadius: borderRadiusSmall,
+                background: backgroundColor,
+                color: primaryColor,
+                font: textXSmallStyle.font,
+                ...(isHighContrastMode && {
+                    outline: '1px solid transparent',
+                }),
+                ...(isFocusable &&
+                    hoverMediaQuery({
+                        transition: getTransition('background-color'),
+                        '&:hover': {
+                            background: backgroundHoverColor,
+                        },
+                    })),
+            },
+            '::slotted': addImportantToEachRule({
+                '&(a),&(button)': {
+                    ...getResetInitialStylesForSlottedAnchor,
+                    display: 'inline',
+                    position: 'static',
+                    textDecoration: 'underline',
+                    cursor: 'pointer',
+                    font: 'inherit',
+                    color: 'inherit',
+                    appearance: 'none',
+                    border: 0,
+                    textAlign: 'left',
+                },
+                // Transform selectors of getTagFocusJssStyle() to fit the ::slotted syntax
+                ...Object.entries(getTagFocusJssStyle(themedColors)).reduce((result, [key, value]) => {
+                    result[key.replace(/^&([a-z:\-()]*)(::[a-z\-]+)$/, '&(a$1)$2, &(button$1)$2')] = value;
+                    return result;
+                }, {}),
+                '&(br)': {
                     display: 'none',
-                } })),
+                },
+            }),
         },
         icon: {
-            marginLeft: '-2px', // optimize visual alignment
+            marginLeft: '-2px',
+            alignSelf: 'flex-start',
         },
     });
 };
@@ -6434,38 +7874,72 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
     const isSearchWithoutForm = isSearch && !isWithinForm;
     const isSearchWithForm = isSearch && isWithinForm;
     const isCalendarOrTimeWithCustomIndicator = showCustomCalendarOrTimeIndicator(isCalendar, isTime);
-    return getCss(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ [cssVariableInputPaddingLeft]: isSearchWithoutForm ? getInputPaddingHorizontal(1) : spacingStaticMedium, [cssVariableInputPaddingRight]: isSearchOrPassword || isCalendarOrTimeWithCustomIndicator
-                    ? getInputPaddingHorizontal(isSearchWithForm ? 2 : 1)
-                    : spacingStaticMedium }, hostHiddenStyles))) }, addImportantToEachRule(Object.assign(Object.assign({}, getBaseChildStyles('input', state, theme, Object.assign({ padding: `${spacingStaticSmall} var(${cssVariableInputPaddingRight}) ${spacingStaticSmall} var(${cssVariableInputPaddingLeft})` }, (isNumber && {
-            MozAppearance: 'textfield', // hides up/down spin button for Firefox
-        })))), { '::slotted': {
-                '&(input:-internal-autofill-selected),&(input:-internal-autofill-previewed),&(input:-webkit-autofill),&(input:-webkit-autofill:focus)': {
-                    WebkitBackgroundClip: 'padding-box', // reset webkit autofill styles
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    [cssVariableInputPaddingLeft]: isSearchWithoutForm ? getInputPaddingHorizontal(1) : spacingStaticMedium,
+                    [cssVariableInputPaddingRight]: isSearchOrPassword || isCalendarOrTimeWithCustomIndicator
+                        ? getInputPaddingHorizontal(isSearchWithForm ? 2 : 1)
+                        : spacingStaticMedium,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...addImportantToEachRule({
+                ...getBaseChildStyles('input', state, theme, {
+                    padding: `${spacingStaticSmall} var(${cssVariableInputPaddingRight}) ${spacingStaticSmall} var(${cssVariableInputPaddingLeft})`,
+                    ...(isNumber && {
+                        MozAppearance: 'textfield', // hides up/down spin button for Firefox
+                    }),
+                }),
+                '::slotted': {
+                    '&(input:-internal-autofill-selected),&(input:-internal-autofill-previewed),&(input:-webkit-autofill),&(input:-webkit-autofill:focus)': {
+                        WebkitBackgroundClip: 'padding-box', // reset webkit autofill styles
+                    },
                 },
-            } }))) }, ((isSearchOrPassword || isCalendarOrTimeWithCustomIndicator) && {
-        button: Object.assign(Object.assign({}, baseButtonOrIconStyles), { right: getButtonOrIconOffsetHorizontal(1), 
-            // TODO: maybe we should render hidden button conditionally, needs to be checked if a11y compliant
-            '&:not([hidden]) ~ .button': {
-                right: getButtonOrIconOffsetHorizontal(2),
-            } }),
-    })), (isSearchWithoutForm && {
-        icon: Object.assign(Object.assign({}, baseButtonOrIconStyles), { left: getButtonOrIconOffsetHorizontal(1), pointerEvents: 'none' }),
-    })), { root: {
+            }),
+        },
+        ...((isSearchOrPassword || isCalendarOrTimeWithCustomIndicator) && {
+            button: {
+                ...baseButtonOrIconStyles,
+                right: getButtonOrIconOffsetHorizontal(1),
+                // TODO: maybe we should render hidden button conditionally, needs to be checked if a11y compliant
+                '&:not([hidden]) ~ .button': {
+                    right: getButtonOrIconOffsetHorizontal(2),
+                },
+            },
+        }),
+        ...(isSearchWithoutForm && {
+            icon: {
+                ...baseButtonOrIconStyles,
+                left: getButtonOrIconOffsetHorizontal(1),
+                pointerEvents: 'none',
+            },
+        }),
+        root: {
             display: 'block',
             position: 'relative',
-        } }), getLabelStyles('input', isDisabled, hideLabel, state, theme, hasUnitOrVisibleCounter && {
-        unit: {
-            position: 'absolute',
-            bottom: '15px',
-            [unitPosition === 'suffix' ? 'right' : 'left']: 0,
-            zIndex: 1,
-            padding: unitPosition === 'suffix' ? `0 ${spacingStaticMedium} 0 10px` : `0 10px 0 ${spacingStaticMedium}`,
-            font: textSmallStyle.font,
-            color: contrastMediumColor,
-        },
-    })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), { 
+        },
+        ...getLabelStyles('input', isDisabled, hideLabel, state, theme, hasUnitOrVisibleCounter && {
+            unit: {
+                position: 'absolute',
+                bottom: '15px',
+                [unitPosition === 'suffix' ? 'right' : 'left']: 0,
+                zIndex: 1,
+                padding: unitPosition === 'suffix' ? `0 ${spacingStaticMedium} 0 10px` : `0 10px 0 ${spacingStaticMedium}`,
+                font: textSmallStyle.font,
+                color: contrastMediumColor,
+            },
+        }),
+        ...getFunctionalComponentRequiredStyles(),
+        ...getFunctionalComponentStateMessageStyles(theme, state),
         // TODO: could be made conditional if we had hasUnit
-        'sr-only': Object.assign(Object.assign({}, getHiddenTextJssStyle()), { padding: 0 }) }));
+        'sr-only': {
+            ...getHiddenTextJssStyle(),
+            padding: 0,
+        },
+    });
 };
 
 /** @deprecated */
@@ -6483,24 +7957,42 @@ const getComponentCss$6 = (type, theme) => {
     const isOrderedList = isListTypeOrdered(type);
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ counterReset: counter }, hostHiddenStyles))),
-            'ol,ul': Object.assign(Object.assign({}, textSmallStyle), { color: getThemedColors(theme).primaryColor, margin: 0, padding: `var(${cssVariablePaddingTop},0) 0 var(${cssVariablePaddingBottom},0) ${isOrderedList
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    counterReset: counter,
+                    ...hostHiddenStyles,
+                }),
+            },
+            'ol,ul': {
+                ...textSmallStyle,
+                color: getThemedColors(theme).primaryColor,
+                margin: 0,
+                padding: `var(${cssVariablePaddingTop},0) 0 var(${cssVariablePaddingBottom},0) ${isOrderedList
                     ? `var(${cssVariableOrderedPaddingLeft},1.5rem)` // reserves space for ::before (root ordered list)
                     : `var(${cssVariableUnorderedPaddingLeft},.375rem)` // reserves space for ::marker "•" (root unordered list)
-                }`, listStyleType: isOrderedList ? 'none' : `var(${cssVariableListStyleType},'•')` }),
+                }`,
+                listStyleType: isOrderedList ? 'none' : `var(${cssVariableListStyleType},'•')`, // custom ::marker char for root unordered list
+            },
             // css selector for text-list-item
-            '::slotted(*)': addImportantToEachRule(Object.assign({ [cssVariablePaddingTop]: spacingStaticXSmall, 
+            '::slotted(*)': addImportantToEachRule({
+                [cssVariablePaddingTop]: spacingStaticXSmall,
                 // TODO: in case it's last root list item with a nested list it would result in outer spacing which is not desired
-                [cssVariablePaddingBottom]: spacingStaticMedium, [cssVariableOrderedPaddingLeft]: '2rem', [cssVariableUnorderedPaddingLeft]: '.625rem', [cssVariableListStyleType]: '"–"' }, (isOrderedList && {
-                '&::before': {
-                    content: `counters(${counter},'.',${isListTypeNumbered(type) ? 'decimal' : 'lower-latin'}) var(${cssVariablePseudoSuffix},'.')`,
-                    counterIncrement: counter,
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    transform: 'translate(-100%,0)',
-                },
-            }))),
+                [cssVariablePaddingBottom]: spacingStaticMedium,
+                [cssVariableOrderedPaddingLeft]: '2rem',
+                [cssVariableUnorderedPaddingLeft]: '.625rem',
+                [cssVariableListStyleType]: '"–"',
+                ...(isOrderedList && {
+                    '&::before': {
+                        content: `counters(${counter},'.',${isListTypeNumbered(type) ? 'decimal' : 'lower-latin'}) var(${cssVariablePseudoSuffix},'.')`,
+                        counterIncrement: counter,
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        transform: 'translate(-100%,0)',
+                    },
+                }),
+            }),
         },
     });
 };
@@ -6508,7 +8000,15 @@ const getComponentCss$6 = (type, theme) => {
 const getComponentCss$5 = () => {
     return getCss({
         '@global': addImportantToEachRule({
-            ':host': Object.assign({ display: 'list-item', position: 'relative', font: 'inherit', color: 'inherit', listStyleType: 'inherit', paddingLeft: spacingStaticMedium }, hostHiddenStyles),
+            ':host': {
+                display: 'list-item',
+                position: 'relative',
+                font: 'inherit',
+                color: 'inherit',
+                listStyleType: 'inherit',
+                paddingLeft: spacingStaticMedium,
+                ...hostHiddenStyles,
+            },
             '::slotted(*)': {
                 [cssVariablePseudoSuffix]: '""', // don't show suffix "." for nested ordered list
             },
@@ -6529,7 +8029,10 @@ const sizeMap = {
 const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
             '::slotted': {
                 [TEXT_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
             },
@@ -6543,27 +8046,42 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
 
 const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
-    return getCss(Object.assign(Object.assign(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)) }, mergeDeep(addImportantToEachRule(getBaseChildStyles('textarea', state, theme, {
-            font: textSmallStyle.font,
-            padding: hasCounter ? `12px ${spacingStaticMedium} ${spacingStaticLarge}` : `12px ${spacingStaticMedium}`,
-        })), {
-            '::slotted(textarea)': {
-                height: 'auto',
-                minHeight: '200px',
-                resize: 'vertical', // overridable, too
-            },
-        })) }, getLabelStyles('textarea', isDisabled, hideLabel, state, theme, hasCounter && {
-        counter: {
-            position: 'absolute',
-            bottom: '6px',
-            right: '12px',
-            zIndex: 1,
-            font: textSmallStyle.font,
-            color: contrastMediumColor,
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                display: 'block',
+                ...hostHiddenStyles,
+            }),
+            ...mergeDeep(addImportantToEachRule(getBaseChildStyles('textarea', state, theme, {
+                font: textSmallStyle.font,
+                padding: hasCounter ? `12px ${spacingStaticMedium} ${spacingStaticLarge}` : `12px ${spacingStaticMedium}`,
+            })), {
+                '::slotted(textarea)': {
+                    height: 'auto',
+                    minHeight: '200px',
+                    resize: 'vertical', // overridable, too
+                },
+            }),
         },
-    })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), (hasCounter && {
-        'sr-only': Object.assign(Object.assign({}, getHiddenTextJssStyle()), { padding: 0 }),
-    })));
+        ...getLabelStyles('textarea', isDisabled, hideLabel, state, theme, hasCounter && {
+            counter: {
+                position: 'absolute',
+                bottom: '6px',
+                right: '12px',
+                zIndex: 1,
+                font: textSmallStyle.font,
+                color: contrastMediumColor,
+            },
+        }),
+        ...getFunctionalComponentRequiredStyles(),
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+        ...(hasCounter && {
+            'sr-only': {
+                ...getHiddenTextJssStyle(),
+                padding: 0,
+            },
+        }),
+    });
 };
 
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
@@ -6592,15 +8110,24 @@ const toastCloseClassName = 'close';
 const getComponentCss$1 = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ position: 'fixed', left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, 
+            ':host': addImportantToEachRule({
+                position: 'fixed',
+                left: gridExtendedOffsetBase,
+                right: gridExtendedOffsetBase,
                 // Needs a not overridable internal css variable to cover default position depending on viewport size and to handle animation properly.
                 // In addition, a public css variable can be passed to overwrite the default position.
-                [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 56px)`, bottom: `var(${cssVariablePositionBottomInternal})`, maxWidth: '42rem', zIndex: TOAST_Z_INDEX, [getMediaQueryMin('s')]: {
+                [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 56px)`,
+                bottom: `var(${cssVariablePositionBottomInternal})`,
+                maxWidth: '42rem',
+                zIndex: TOAST_Z_INDEX,
+                [getMediaQueryMin('s')]: {
                     left: '64px',
                     right: 'auto',
                     [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 64px)`,
                     bottom: `var(${cssVariablePositionBottomInternal})`,
-                } }, hostHiddenStyles)),
+                },
+                ...hostHiddenStyles,
+            }),
             '@keyframes in': getKeyframesMobile('in', cssVariablePositionBottomInternal),
             '@keyframes out': getKeyframesMobile('out', cssVariablePositionBottomInternal),
         },
@@ -6616,20 +8143,35 @@ const getComponentCss$1 = () => {
 const getComponentCss = (size, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, maxWidth: '100%', maxHeight: '100%', boxSizing: 'content-box' }, (size !== 'inherit' && {
-                height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)',
-                // workaround for Safari to optimize image rendering
-                '@supports (height: round(down, 1px, 1px))': {
-                    height: 'round(down, clamp(0.63rem, 0.42vw + 0.5rem, 1rem), 1px)',
-                },
-            })), hostHiddenStyles))),
+            ':host': {
+                position: 'relative',
+                display: 'inline-block',
+                verticalAlign: 'top',
+                ...addImportantToEachRule({
+                    outline: 0,
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    boxSizing: 'content-box',
+                    ...(size !== 'inherit' && {
+                        height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)',
+                        // workaround for Safari to optimize image rendering
+                        '@supports (height: round(down, 1px, 1px))': {
+                            height: 'round(down, clamp(0.63rem, 0.42vw + 0.5rem, 1rem), 1px)',
+                        },
+                    }),
+                    ...hostHiddenStyles,
+                }),
+            },
             'a, svg': {
                 display: 'block',
                 maxWidth: '100%',
                 maxHeight: '100%',
                 height: 'inherit',
             },
-            a: Object.assign({ textDecoration: 'none' }, focusPseudoJssStyle),
+            a: {
+                textDecoration: 'none',
+                ...focusPseudoJssStyle,
+            },
             svg: {
                 fill: isHighContrastMode ? getHighContrastColors().canvasTextColor : getThemedColors(theme).primaryColor,
             },