@porsche-design-system/components-react 3.0.0-alpha.3 → 3.0.0-alpha.5

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

@@ -51,6 +51,12 @@ const dropShadowLowStyle = {
     filter: `drop-shadow(0px 3px 8px ${_dropShadowBackgroundColor})`,
 };
 
+const dropShadowHighStyle = {
+    filter: `drop-shadow(0px 8px 40px ${_dropShadowBackgroundColor})`,
+};
+
+const themeLightStateFocus = '#1A44EA';
+
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 const fontHyphenationStyle = {
@@ -99,13 +105,13 @@ const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
 
 const fontWeightRegular = 400;
 
-const fontWeightSemiBold$1 = 600;
+const fontWeightSemiBold = 600;
 
 const fontWeightBold = 700;
 
 const fontWeight = {
     regular: fontWeightRegular,
-    semiBold: fontWeightSemiBold$1,
+    semiBold: fontWeightSemiBold,
     bold: fontWeightBold,
 };
 
@@ -174,15 +180,60 @@ const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
 
 const gridGap = spacingFluidMedium;
 
-const gridWidthMax = '2560px';
-
+const _gridWidthMax = '2560px';
 // fluid sizing calculated by https://fluidtypography.com/#app-get-started
-// gridSafeZoneBase: Viewport Width Range = 320 - 1920px / Size Range = 22 - 192px
-const gridSafeZoneBase = 'clamp(22px, 10.625vw - 12px, 192px)';
+const _gridSafeZoneBase = 'max(22px, 10.625vw - 12px)'; // viewport-width range = 320 - 760px / size range = 22 - 68.75px
+const _gridSafeZoneS = 'calc(5vw - 16px)'; // viewport-width range = 760 - 1920px / size range = 22(22.75) - 80(79.71)px
+const _gridSafeZoneXXL = 'min(50vw - 880px, 400px)'; // viewport-width range = 1920 - 2560px / size range = 80(79.71)px - 400(399.71)px
 
-// fluid sizing calculated by https://fluidtypography.com/#app-get-started
-// gridSafeZoneXXL: Viewport Width Range = 1920 - 2560px / Size Range = 192 - 512px
-const gridSafeZoneXXL = 'clamp(192px, 50vw - 768px, 512px)';
+const columnMap = {
+    narrow: 4,
+    basic: 2,
+    extended: 1,
+};
+const gridColumnWidthS = `calc((100vw - ${_gridSafeZoneS} * 2 - ${gridGap} * 15) / 16)`;
+const gridColumnWidthXXL = `calc((min(100vw, ${_gridWidthMax}) - ${_gridSafeZoneXXL} * 2 - ${gridGap} * 15) / 16)`;
+const _gridPadding = `max(0px, 50vw - ${_gridWidthMax} / 2)`;
+const _getGridOffsetS = (width) => `calc(${_gridSafeZoneS} + (${gridGap} + ${gridColumnWidthS}) * ${columnMap[width]})`;
+const _getGridOffsetXXL = (width) => `calc(${_gridPadding} + ${_gridSafeZoneXXL} + (${gridGap} + ${gridColumnWidthXXL}) * ${columnMap[width]})`;
+
+const gridFullOffset = _gridPadding;
+
+const gridExtendedOffsetBase = _gridSafeZoneBase;
+
+const gridExtendedOffsetS = _getGridOffsetS('extended');
+
+const gridExtendedOffsetXXL = _getGridOffsetXXL('extended');
+
+const gridExtendedOffset = {
+    base: gridExtendedOffsetBase,
+    s: gridExtendedOffsetS,
+    xxl: gridExtendedOffsetXXL,
+};
+
+const gridBasicOffsetBase = _gridSafeZoneBase;
+
+const gridBasicOffsetS = _getGridOffsetS('basic');
+
+const gridBasicOffsetXXL = _getGridOffsetXXL('basic');
+
+const gridBasicOffset = {
+    base: gridBasicOffsetBase,
+    s: gridBasicOffsetS,
+    xxl: gridBasicOffsetXXL,
+};
+
+const gridNarrowOffsetBase = _gridSafeZoneBase;
+
+const gridNarrowOffsetS = _getGridOffsetS('narrow');
+
+const gridNarrowOffsetXXL = _getGridOffsetXXL('narrow');
+
+const gridNarrowOffset = {
+    base: gridNarrowOffsetBase,
+    s: gridNarrowOffsetS,
+    xxl: gridNarrowOffsetXXL,
+};
 
 function getMediaQueryMax(max) {
     return `@media(max-width:${breakpoint[max] - 1}px)`;
@@ -219,7 +270,7 @@ const displayLargeStyle = {
     font: `${_displayFontPartA}${fontSizeDisplayLarge}${_displayFontPartB}`,
 };
 
-const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold$1} `;
+const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold} `;
 const _headingFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
 const headingSmallStyle = {
@@ -3664,7 +3715,7 @@ const themeLight = {
     backgroundSurfaceColorDarken: '#CBCED7',
     backgroundSurfaceColorLighten: '#FFFFFF',
     contrastLowColor: '#D8D8DB',
-    contrastMediumColor: '#949598',
+    contrastMediumColor: '#6B6D70',
     contrastHighColor: '#535457',
     contrastHighColorDarken: '#353638',
     contrastHighColorLighten: '#717276',
@@ -3673,24 +3724,24 @@ const themeLight = {
     activeColor: 'rgba(148, 149, 152, 0.20)',
     focusColor: '#1A44EA',
     disabledColor: '#949598',
-    errorColor: '#E7323B',
-    errorColorDarken: '#C51720',
-    errorSoftColor: '#FCE8E9',
-    errorSoftColorDarken: '#EED7D9',
+    errorColor: '#CC1922',
+    errorColorDarken: '#951219',
+    errorSoftColor: '#FFE2E4',
+    errorSoftColorDarken: '#F4CED1',
     errorSoftColorLighten: '#FFFFFF',
-    successColor: '#32B85B',
-    successColorDarken: '#258843',
-    successSoftColor: '#EBFAF0',
-    successSoftColorDarken: '#DDEAE1',
+    successColor: '#197E10',
+    successColorDarken: '#0E4809',
+    successSoftColor: '#E4FFEC',
+    successSoftColorDarken: '#D0F4DB',
     successSoftColorLighten: '#FFFFFF',
-    warningColor: '#FECC1B',
-    warningSoftColor: '#FFF9E6',
-    warningSoftColorDarken: '#F5ECD2',
-    warningSoftColorLighten: '#FFFFFF',
-    infoColor: '#1E5BEB',
-    infoSoftColor: '#E8EEFD',
-    infoSoftColorDarken: '#D6DEF0',
-    infoSoftColorLighten: '#FFFFFF'
+    warningColor: '#F3BE00',
+    warningSoftColor: '#FFF4D2',
+    warningSoftColorDarken: '#F1E5C1',
+    warningSoftColorLighten: '#FCFAF3',
+    infoColor: '#2762EC',
+    infoSoftColor: '#D3E1FF',
+    infoSoftColorDarken: '#C2D1F1',
+    infoSoftColorLighten: '#F4F7FD'
 };
 const themeDark = {
     primaryColor: '#FBFCFF',
@@ -3702,7 +3753,7 @@ const themeDark = {
     backgroundSurfaceColorDarken: '#040405',
     backgroundSurfaceColorLighten: '#3E4045',
     contrastLowColor: '#404044',
-    contrastMediumColor: '#7E7F82',
+    contrastMediumColor: '#88898C',
     contrastHighColor: '#AFB0B3',
     contrastHighColorDarken: '#909195',
     contrastHighColorLighten: '#CECFD1',
@@ -3711,24 +3762,24 @@ const themeDark = {
     activeColor: 'rgba(126, 127, 130, 0.20)',
     focusColor: '#1A44EA',
     disabledColor: '#7E7F82',
-    errorColor: '#CB3333',
-    errorColorDarken: '#9A2727',
-    errorSoftColor: '#290A0A',
-    errorSoftColorDarken: '#0D0808',
-    errorSoftColorLighten: '#331F1F',
-    successColor: '#00C77E',
-    successColorDarken: '#008A57',
+    errorColor: '#FC4040',
+    errorColorDarken: '#FB0404',
+    errorSoftColor: '#3A0F0F',
+    errorSoftColorDarken: '#1A1111',
+    errorSoftColorLighten: '#3F2828',
+    successColor: '#09D087',
+    successColorDarken: '#069561',
     successSoftColor: '#003320',
     successSoftColorDarken: '#04110C',
     successSoftColorLighten: '#0F432F',
-    warningColor: '#DDB84B',
-    warningSoftColor: '#2B2208',
-    warningSoftColorDarken: '#0D0C07',
-    warningSoftColorLighten: '#362F1C',
-    infoColor: '#027FFC',
-    infoSoftColor: '#001A33',
-    infoSoftColorDarken: '#040A11',
-    infoSoftColorLighten: '#0F2943'
+    warningColor: '#F7CB47',
+    warningSoftColor: '#362B0A',
+    warningSoftColorDarken: '#16130B',
+    warningSoftColorLighten: '#3E3720',
+    infoColor: '#178BFF',
+    infoSoftColor: '#04294E',
+    infoSoftColorDarken: '#0C1A27',
+    infoSoftColorLighten: '#1A3856'
 };
 const themes = {
     'light': themeLight,
@@ -3754,13 +3805,10 @@ const addImportantToEachRule = (input) => {
             typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
             result), {});
 };
-const getHoverJssStyle = ({ theme } = { theme: 'light' }) => {
-    return {
-        transition: getTransition('color'),
-        '&:hover': {
-            color: getThemedColors(theme).hoverColor,
-        },
-    };
+// TODO: this is workaround, in order the colors to be bundled in the main bundle, we need to have at least one function here, which is used in project and which calls "getThemedColors"
+// TODO: This mechanism needs to be investigated as part of refactoring
+const doGetThemedColors = (theme = 'light') => {
+    return getThemedColors(theme);
 };
 const getInsetJssStyle = (value = 0) => {
     value = value === 0 || value === 'auto' ? value : `${value}px`;
@@ -3779,35 +3827,12 @@ const getResetInitialStylesForSlottedAnchor = {
     borderRadius: 0,
     background: 'transparent',
 };
-const getFocusJssStyle = (opts) => {
-    const { pseudo, offset: outlineOffset, color: outlineColor, } = Object.assign({ color: 'currentColor', offset: 2 }, opts);
-    return pseudo
-        ? {
-            outline: 0,
-            '&::-moz-focus-inner': {
-                border: 0,
-            },
-            [`&${pseudo}`]: Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { outline: '1px solid transparent', outlineOffset: `${outlineOffset}px` }),
-            [`&:focus${pseudo}`]: {
-                outlineColor,
-            },
-            [`&:focus:not(:focus-visible)${pseudo}`]: {
-                outlineColor: 'transparent',
-            },
-        }
-        : {
-            outline: '1px solid transparent',
-            outlineOffset: `${outlineOffset}px`,
-            '&::-moz-focus-inner': {
-                border: 0,
-            },
-            '&:focus': {
-                outlineColor,
-            },
-            '&:focus:not(:focus-visible)': {
-                outlineColor: 'transparent',
-            },
-        };
+const focusPseudoJssStyle = {
+    outline: 0,
+    '&:focus::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { borderRadius: '1px', outline: `${borderWidthBase} solid ${themeLightStateFocus}`, outlineOffset: '2px' }),
+    '&:focus:not(:focus-visible)::before': {
+        outline: 0,
+    },
 };
 const getTextHiddenJssStyle = (isHidden) => isHidden
     ? getScreenReaderOnlyJssStyle()
@@ -3915,14 +3940,14 @@ const mergeDeep = (...objects) => {
     }, {});
 };
 
-const hasDocument = typeof document !== 'undefined';
-
-hasDocument && 'scrollBehavior' in document.documentElement.style;
-
 const isThemeDark = (theme) => {
     return theme === 'dark';
 };
 
+const hasDocument = typeof document !== 'undefined';
+
+hasDocument && 'scrollBehavior' in document.documentElement.style;
+
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
         .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
@@ -3935,7 +3960,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$T = (size, compact, open, theme) => {
+const getComponentCss$Y = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     const border = `1px solid ${contrastLowColor}`;
     return getCss(Object.assign(Object.assign({ '@global': {
@@ -4004,50 +4029,9 @@ const getComponentCss$T = (size, compact, open, theme) => {
         } }));
 };
 
-const TOAST_Z_INDEX = 999999;
-const MODAL_Z_INDEX = 99999;
-const POPOVER_Z_INDEX = 9999;
-const BANNER_Z_INDEX = 99;
-
-const oneColumnWidthS = `calc((100% - ${gridSafeZoneBase} * 2 - ${gridGap} * 13) / 14)`;
-const oneColumnWidthXXL = `calc((min(100%, ${gridWidthMax}) - ${gridSafeZoneXXL} * 2 - ${gridGap} * 13) / 14)`;
-const offsetHorizontalXXL = `max(0px, (100% - ${gridWidthMax}) / 2)`;
-const widthMap$1 = {
-    narrow: {
-        padding: `0 ${gridSafeZoneBase}`,
-        [getMediaQueryMin('s')]: {
-            padding: `0 calc(${gridSafeZoneBase} + ${gridGap} * 3 + ${oneColumnWidthS} * 3)`,
-        },
-        [getMediaQueryMin('xxl')]: {
-            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL} + ${gridGap} * 3 + ${oneColumnWidthXXL} * 3)`,
-        },
-    },
-    basic: {
-        padding: `0 ${gridSafeZoneBase}`,
-        [getMediaQueryMin('s')]: {
-            padding: `0 calc(${gridSafeZoneBase} + ${gridGap} + ${oneColumnWidthS})`,
-        },
-        [getMediaQueryMin('xxl')]: {
-            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL} + ${gridGap} + ${oneColumnWidthXXL})`,
-        },
-    },
-    extended: {
-        padding: `0 ${gridSafeZoneBase}`,
-        [getMediaQueryMin('xxl')]: {
-            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL})`,
-        },
-    },
-};
-const getContentWrapperStyle = (width) => {
-    return Object.assign({ display: 'block', margin: 0, padding: `0 ${offsetHorizontalXXL}`, width: 'auto', minWidth: 0, maxWidth: gridWidthMax }, widthMap$1[width]);
-};
-
 const easeInQuad = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad = 'cubic-bezier(0.5,1,0.89,1)';
 const ANIMATION_DURATION = 600;
-const getBoxShadow = () => ({
-    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.05),0 15px 20px 0 rgba(0,0,0,0.2)',
-});
 const getAnimationIn = (keyframesName, durationVar) => {
     const duration = durationVar ? `var(${durationVar},${ANIMATION_DURATION}ms)` : `${ANIMATION_DURATION}ms`;
     return {
@@ -4074,69 +4058,67 @@ const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
     transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
 });
 
-const bannerPositionTypeVar = '--p-banner-position-type';
-const bannerPositionTopVar = '--p-banner-position-top';
-const bannerPositionBottomVar = '--p-banner-position-bottom';
-const bannerZIndexVar = '--p-internal-banner-z-index';
-const bannerAnimationDurationVar = '--p-animation-duration';
-const bannerOffset = '56px';
-const mediaQueryBase = getMediaQueryMinMax('base', 's');
+const TOAST_Z_INDEX = 999999;
+const MODAL_Z_INDEX = 99999;
+const POPOVER_Z_INDEX = 9999;
+const BANNER_Z_INDEX = 99;
+
+const cssVariableTop = '--p-banner-position-top';
+const cssVariableBottom = '--p-banner-position-bottom';
+const cssVariableAnimationDuration = '--p-animation-duration';
+const cssVariableZIndex = '--p-internal-banner-z-index';
+const mediaQueryBaseToS = getMediaQueryMinMax('base', 's');
 const mediaQueryS$1 = getMediaQueryMin('s');
+const mediaQueryXXL$1 = getMediaQueryMin('xxl');
 const getKeyframesDesktop = (direction, topVar) => getKeyframes(direction, {
     opacity: 0,
     transform: `translate3d(0,calc(-100% - var(${topVar})),0)`, // space before and after "-" is crucial
 });
-const widthMap = {
-    fluid: 'extended',
-    extended: 'extended',
-    basic: 'basic',
-};
-const getComponentCss$S = (width) => {
+const getComponentCss$X = () => {
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({ 
-                // TODO: Why is nothing set as important here?
-                [bannerPositionTopVar]: bannerOffset, [bannerPositionBottomVar]: bannerOffset, position: `var(${bannerPositionTypeVar},fixed)`, zIndex: `var(${bannerZIndexVar},${BANNER_Z_INDEX})`, opacity: 0, left: 0, right: 0, willChange: 'opacity,transform' }, mergeDeep(addImportantToEachRule(Object.assign(Object.assign({}, getContentWrapperStyle(widthMap[width])), hostHiddenStyles)), {
-                [mediaQueryBase]: {
-                    bottom: `var(${bannerPositionBottomVar})`,
-                },
-                [mediaQueryS$1]: {
-                    top: `var(${bannerPositionTopVar})`,
-                },
-            })), { '&(.hydrated),&(.ssr)': {
-                    [mediaQueryBase]: getAnimationIn('mobileIn', bannerAnimationDurationVar),
-                    [mediaQueryS$1]: getAnimationIn('desktopIn', bannerAnimationDurationVar),
+            ':host': Object.assign(Object.assign({ opacity: 0 }, addImportantToEachRule(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`, willChange: 'opacity,transform' }, dropShadowHighStyle), { [mediaQueryS$1]: {
+                    top: `var(${cssVariableTop})`,
+                    bottom: 'auto',
+                    left: gridExtendedOffsetS,
+                    right: gridExtendedOffsetS,
+                }, [mediaQueryXXL$1]: {
+                    left: gridExtendedOffsetXXL,
+                    right: gridExtendedOffsetXXL,
+                } }), hostHiddenStyles))), { '&(.hydrated),&(.ssr)': {
+                    [mediaQueryBaseToS]: getAnimationIn('mobileIn', cssVariableAnimationDuration),
+                    [mediaQueryS$1]: getAnimationIn('desktopIn', cssVariableAnimationDuration),
                 }, '&(.banner--close)': {
-                    [mediaQueryBase]: getAnimationOut('mobileOut'),
+                    [mediaQueryBaseToS]: getAnimationOut('mobileOut'),
                     [mediaQueryS$1]: getAnimationOut('desktopOut'),
                 } }),
-            '@keyframes mobileIn': getKeyframesMobile('in', bannerPositionBottomVar),
-            '@keyframes mobileOut': getKeyframesMobile('out', bannerPositionBottomVar),
-            '@keyframes desktopIn': getKeyframesDesktop('in', bannerPositionTopVar),
-            '@keyframes desktopOut': getKeyframesDesktop('out', bannerPositionTopVar),
+            '@keyframes mobileIn': getKeyframesMobile('in', cssVariableBottom),
+            '@keyframes mobileOut': getKeyframesMobile('out', cssVariableBottom),
+            '@keyframes desktopIn': getKeyframesDesktop('in', cssVariableTop),
+            '@keyframes desktopOut': getKeyframesDesktop('out', cssVariableTop),
         },
-        root: getBoxShadow(),
     });
 };
 
-const getDirectionJssStyle = (direction) => {
-    const style = {
-        column: {
-            flexFlow: 'column nowrap',
-            alignItems: 'stretch',
-        },
-        row: {
-            flexFlow: 'row wrap',
-            alignItems: 'center',
-        },
-    };
-    return style[direction];
+const groupDirectionJssStyles = {
+    column: {
+        flexFlow: 'column nowrap',
+        alignItems: 'stretch',
+    },
+    row: {
+        flexFlow: 'row wrap',
+        alignItems: 'center',
+    },
 };
-const getComponentCss$R = (direction) => {
+const getGroupDirectionJssStyles = (direction) => {
+    return groupDirectionJssStyles[direction];
+};
+
+const getComponentCss$W = (direction) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            div: Object.assign({ display: 'flex', gap: spacingFluidSmall }, buildResponsiveStyles(direction, getDirectionJssStyle)),
+            div: Object.assign({ display: 'flex', gap: spacingFluidSmall }, buildResponsiveStyles(direction, getGroupDirectionJssStyles)),
         },
     });
 };
@@ -4157,7 +4139,7 @@ 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(0)), { whiteSpace: 'nowrap', textIndent: '-999999px' }) : Object.assign(Object.assign({ position: 'relative' }, getInsetJssStyle('auto')), { whiteSpace: 'inherit', textIndent: 0 });
+        ? Object.assign(Object.assign({ position: 'absolute' }, getInsetJssStyle()), { whiteSpace: 'nowrap', textIndent: '-999999px' }) : Object.assign(Object.assign({ position: 'relative' }, getInsetJssStyle('auto')), { whiteSpace: 'inherit', textIndent: 0 });
 };
 const offsetVertical = '-2px';
 const offsetHorizontal = '-4px';
@@ -4199,7 +4181,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     }));
 };
 
-const getComponentCss$Q = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$V = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), Object.assign({ root: {
             appearance: 'none',
@@ -4222,6 +4204,111 @@ const getComponentCss$Q = (icon, iconSource, active, isLoading, isDisabledOrLoad
     }))));
 };
 
+const fontWeightMap = {
+    regular: fontWeightRegular,
+    'semi-bold': fontWeightSemiBold,
+    bold: fontWeightBold,
+};
+const getFontWeight = (weight) => {
+    return fontWeightMap[weight];
+};
+
+const getThemedTypographyColor = (theme, textColor) => {
+    // TODO: don't destructure for better minification
+    const { primaryColor, contrastHighColor, contrastMediumColor, contrastLowColor, successColor, errorColor, warningColor, infoColor, } = getThemedColors(theme);
+    const colorMap = {
+        primary: primaryColor,
+        default: primaryColor,
+        'contrast-low': contrastLowColor,
+        'contrast-medium': contrastMediumColor,
+        'contrast-high': contrastHighColor,
+        'notification-success': successColor,
+        'notification-warning': warningColor,
+        'notification-error': errorColor,
+        'notification-info': infoColor,
+        inherit: 'currentColor',
+    };
+    return colorMap[textColor];
+};
+
+const aspectRatioPaddingMap = {
+    '1:1': '100%',
+    '4:3': '75%',
+    '3:4': '133.33%',
+    '16:9': '56.25%',
+    '9:16': '177.75%',
+};
+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',
+                },
+            },
+        })),
+        root: Object.assign(Object.assign({ position: 'relative', height: 0, overflow: 'hidden', transform: 'translate3d(0,0,0)', borderRadius: borderRadiusMedium, 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': Object.assign({ position: 'absolute', transition: getTransition('transform') }, getInsetJssStyle()),
+        content: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            display: 'flex',
+            justifyItems: 'start',
+            gap: spacingStaticMedium,
+            borderRadius: borderRadiusMedium,
+            '@media (forced-colors: active)': {
+                background: 'rgba(0,0,0,0.7)',
+            },
+        },
+    };
+};
+
+const sizeMap$5 = {
+    inherit: { fontSize: 'inherit' },
+    default: { fontSize: fontSizeTextMedium },
+};
+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',
+        }))),
+    }));
+};
+
+const getComponentCss$U = (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' }) }));
+};
+
 const { primaryColor: darkThemePrimaryColor$1 } = getThemedColors('dark');
 const { primaryColor: lightThemePrimaryColor$1 } = getThemedColors('light');
 const getVariantColors = (variant, theme) => {
@@ -4297,7 +4384,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$P = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$T = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
@@ -4332,33 +4419,15 @@ const mediaQueryXXL = getMediaQueryMin('xxl');
 const buttonSize$1 = `calc(${spacingStaticSmall} * 2 + ${fontLineHeight})`;
 // + 2px, compensates hover offset of button-pure
 const buttonGroupWidth = `calc(${buttonSize$1} * 2 + ${spacingStaticXSmall} + 2px)`;
-// we don't need to abstract spacing definitions since component content-wrapper is deprecated and will be removed soon
-const gridColumn1FrS = `calc((100% - ${gridSafeZoneBase} * 2 - ${gridGap} * 13) / 14)`;
-const gridColumn1FrXXL = `calc((min(100%, ${gridWidthMax}) - ${gridSafeZoneXXL} * 2 - ${gridGap} * 13) / 14)`;
 const spacingMap = {
-    basic: {
-        padding: `0 ${gridSafeZoneBase}`,
-        [mediaQueryS]: {
-            padding: `0 calc(${gridSafeZoneBase} + ${gridGap} + ${gridColumn1FrS})`,
-        },
-        [mediaQueryXXL]: {
-            padding: `0 calc(${gridSafeZoneXXL} + ${gridGap} + ${gridColumn1FrXXL})`,
-        },
-    },
-    extended: {
-        padding: `0 ${gridSafeZoneBase}`,
-        [mediaQueryXXL]: {
-            padding: `0 ${gridSafeZoneXXL}`,
-        },
-    },
+    basic: gridBasicOffset,
+    extended: gridExtendedOffset,
 };
-const getComponentCss$O = (width, hasPagination, alignHeader, theme) => {
+const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'flex', gap: spacingFluidMedium, flexDirection: 'column', maxWidth: gridWidthMax, 
-                // relevant for viewport width > 2560px
-                paddingLeft: `calc(50% - ${gridWidthMax} / 2)`, paddingRight: `calc(50% - ${gridWidthMax} / 2)`, boxSizing: 'content-box' }, hostHiddenStyles)),
+            ':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` })),
             [`${selectorHeading},${selectorDescription}`]: addImportantToEachRule({
@@ -4372,11 +4441,16 @@ const getComponentCss$O = (width, hasPagination, alignHeader, theme) => {
                         gridColumn: '1 / 3',
                     },
             }),
-        }, header: Object.assign({ display: 'grid' }, mergeDeep(spacingMap[width], {
-            [mediaQueryS]: Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
+        }, header: {
+            display: 'grid',
+            padding: `0 ${spacingMap[width].base}`,
+            [mediaQueryS]: Object.assign(Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
                 justifyItems: 'center', // relevant when max-width of heading or description is reached
-            })),
-        })), nav: {
+            })), { padding: `0 ${spacingMap[width].s}` }),
+            [mediaQueryXXL]: {
+                padding: `0 ${spacingMap[width].xxl}`,
+            },
+        }, nav: {
             display: 'none',
             [mediaQueryS]: {
                 display: 'flex',
@@ -4389,9 +4463,18 @@ const getComponentCss$O = (width, hasPagination, alignHeader, theme) => {
         }, splide: {
             overflow: 'hidden',
             // visibility: 'hidden',
-            '&__track': Object.assign(Object.assign({ cursor: 'grab' }, addImportantToEachRule(Object.assign(Object.assign({}, spacingMap[width]), { [getMediaQueryMax('xs')]: {
-                    paddingRight: `calc(${gridSafeZoneBase} + ${gridGap})`, // we need to give cut off slides a bit more space on mobile views
-                } }))), { '&--draggable': {
+            '&__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': {
                     userSelect: 'none',
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
@@ -4494,7 +4577,7 @@ const getInlineSVGBackgroundImage = (path) => {
     return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
 };
 
-const getComponentCss$N = (hideLabel, state, isDisabled, theme) => {
+const getComponentCss$R = (hideLabel, state, isDisabled, theme) => {
     const checkedIconColor = getThemedColors(theme === 'light' ? 'dark' : 'light').primaryColor.replace(/#/g, '%23');
     const indeterminateIconColor = getThemedColors(theme).primaryColor.replace(/#/g, '%23');
     return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, theme), {
@@ -4514,34 +4597,53 @@ const getComponentCss$N = (hideLabel, state, isDisabled, theme) => {
     }));
 };
 
-const getComponentCss$M = (width) => {
+const widthMap = {
+    narrow: gridNarrowOffset,
+    basic: gridBasicOffset,
+    extended: gridExtendedOffset,
+};
+const getComponentCss$Q = (width) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
         },
-        root: getContentWrapperStyle(width),
+        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}`,
+                },
+            })),
     });
 };
 
-const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-const getThemedTypographyColor = (theme, textColor) => {
-    const { primaryColor, contrastHighColor, contrastMediumColor, contrastLowColor, successColor, errorColor, warningColor, infoColor, } = getThemedColors(theme);
-    const colorMap = {
-        primary: primaryColor,
-        default: primaryColor,
-        'contrast-low': contrastLowColor,
-        'contrast-medium': contrastMediumColor,
-        'contrast-high': contrastHighColor,
-        'notification-success': successColor,
-        'notification-warning': warningColor,
-        'notification-error': errorColor,
-        'notification-info': infoColor,
-        inherit: 'currentColor',
-    };
-    return colorMap[textColor];
+const getComponentCss$P = () => {
+    return getCss({
+        '@global': {
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign({ outline: 0 }, hostHiddenStyles))),
+            a: Object.assign({ display: 'block', textDecoration: 'none' }, focusPseudoJssStyle),
+            picture: {
+                display: 'block',
+                width: '30px',
+                height: '40px',
+            },
+            img: {
+                display: 'block',
+                width: '100%',
+                height: 'auto',
+            },
+        },
+    });
 };
 
+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%',
@@ -4570,12 +4672,12 @@ const getTypographySlottedJssStyle = () => {
     };
 };
 
-const sizeMap$5 = {
+const sizeMap$4 = {
     small: fontSizeDisplaySmall,
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$L = (size, align, color, ellipsis, theme) => {
+const getComponentCss$O = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4584,12 +4686,12 @@ const getComponentCss$L = (size, align, color, ellipsis, theme) => {
             },
         },
         root: getTypographyRootJssStyle(displayLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
-            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$5[sizeValue],
+            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$4[sizeValue],
         })), align, color, ellipsis, theme),
     });
 };
 
-const getComponentCss$K = (color, orientation, theme) => {
+const getComponentCss$N = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const colorMap = {
         'contrast-low': contrastLowColor,
@@ -4604,7 +4706,21 @@ const getComponentCss$K = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$J = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
+    return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
+                margin: 0,
+                padding: 0,
+                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,
+        },
+    })));
+};
+
+const getComponentCss$L = (state, labelSize, hasLabel, theme) => {
     return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
                 margin: 0,
                 padding: 0,
@@ -4628,7 +4744,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$I = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$K = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
@@ -4646,7 +4762,7 @@ const getComponentCss$I = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$H = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$J = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
@@ -4668,7 +4784,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$G = (size, offset) => {
+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) => ({
@@ -4682,7 +4798,7 @@ const getComponentCss$G = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$F = (direction, wrap) => {
+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 }))))),
@@ -4690,14 +4806,14 @@ const getComponentCss$F = (direction, wrap) => {
     });
 };
 
-const sizeMap$4 = {
+const sizeMap$3 = {
     small: fontSizeHeadingSmall,
     medium: fontSizeHeadingMedium,
     large: fontSizeHeadingLarge,
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$E = (size, align, color, ellipsis, theme) => {
+const getComponentCss$G = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4706,7 +4822,7 @@ const getComponentCss$E = (size, align, color, ellipsis, theme) => {
             },
         },
         root: getTypographyRootJssStyle(headingXXLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
-            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$4[sizeValue],
+            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$3[sizeValue],
         })), align, color, ellipsis, theme),
     });
 };
@@ -4751,7 +4867,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$D = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$F = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4768,25 +4884,25 @@ const getComponentCss$D = (variant, align, color, ellipsis, theme) => {
 const toFilter = (values) => `invert(${values[0]}%) sepia(${values[1]}%) saturate(${values[2]}%) hue-rotate(${values[3]}deg) brightness(${values[4]}%) contrast(${values[5]}%)`;
 
 const filterLightContrastLow = toFilter([93, 11, 36, 201, 89, 102]);
-const filterLightContrastMedium = toFilter([65, 6, 119, 187, 90, 92]);
+const filterLightContrastMedium = toFilter([45, 6, 235, 177, 91, 85]);
 const filterLightContrastHigh = toFilter([40, 2, 686, 187, 80, 94]);
 const filterDarkContrastLow = toFilter([20, 7, 421, 202, 97, 82]);
-const filterDarkContrastMedium = toFilter([54, 4, 229, 187, 91, 84]);
+const filterDarkContrastMedium = toFilter([66, 3, 333, 187, 82, 86]);
 const filterDarkContrastHigh = toFilter([68, 6, 108, 187, 104, 88]);
 
-const filterLightNotificationSuccess = toFilter([62, 61, 551, 86, 86, 80]);
-const filterLightNotificationWarning = toFilter([74, 91, 343, 348, 92, 86]);
-const filterLightNotificationError = toFilter([25, 62, 2003, 335, 100, 97]);
-const filterLightNotificationInfo = toFilter([31, 32, 5493, 216, 90, 107]);
-const filterDarkNotificationSuccess = toFilter([59, 22, 1342, 86, 96, 88]);
-const filterDarkNotificationWarning = toFilter([72, 94, 303, 354, 89, 94]);
-const filterDarkNotificationError = toFilter([28, 34, 3133, 333, 95, 100]);
-const filterDarkNotificationInfo = toFilter([31, 32, 5493, 216, 90, 107]);
+const filterLightNotificationSuccess = toFilter([28, 89, 572, 71, 111, 98]);
+const filterLightNotificationWarning = toFilter([58, 53, 820, 12, 112, 103]);
+const filterLightNotificationError = toFilter([14, 75, 4140, 347, 100, 97]);
+const filterLightNotificationInfo = toFilter([44, 100, 492, 195, 86, 221]);
+const filterDarkNotificationSuccess = toFilter([60, 71, 512, 106, 91, 97]);
+const filterDarkNotificationWarning = toFilter([75, 39, 759, 350, 109, 94]);
+const filterDarkNotificationError = toFilter([64, 91, 5857, 336, 98, 102]);
+const filterDarkNotificationInfo = toFilter([56, 77, 4175, 198, 104, 98]);
 
 const filterLightPrimary = toFilter([3, 7, 2930, 188, 91, 103]);
-const filterDarkPrimary = toFilter([97, 55, 2840, 180, 114, 103]);
+const filterDarkPrimary = toFilter([100, 91, 38, 254, 110, 110]);
 
-const sizeMap$3 = {
+const sizeMap$2 = {
     'xx-small': fontSizeTextXXSmall,
     'x-small': fontSizeTextXSmall,
     small: fontSizeTextSmall,
@@ -4828,7 +4944,7 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$C = (color, size, theme) => {
+const getComponentCss$E = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -4844,7 +4960,7 @@ const getComponentCss$C = (color, size, theme) => {
                 : {
                     width: fontLineHeight,
                     height: fontLineHeight,
-                    font: `${sizeMap$3[size]} ${fontFamily}`,
+                    font: `${sizeMap$2[size]} ${fontFamily}`,
                 })) }, (!isColorInherit && {
             [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
         })),
@@ -4895,7 +5011,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$B = (state, hasAction, hasClose, theme) => {
+const getComponentCss$D = (state, hasAction, hasClose, theme) => {
     return getCss(Object.assign({ '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({}, getNotificationRootJssStyle(state, hasAction, hasClose, theme)), hostHiddenStyles)),
             h5: headingSmallStyle,
@@ -4913,7 +5029,7 @@ const getComponentCss$B = (state, hasAction, hasClose, theme) => {
     })));
 };
 
-const getComponentCss$A = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), Object.assign(Object.assign({}, (hasSlottedAnchor && {
@@ -4940,7 +5056,7 @@ const getComponentCss$A = (icon, iconSource, active, stretch, size, hideLabel, a
         } })));
 };
 
-const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), Object.assign({}, (hasSlottedAnchor && {
         '@global': addImportantToEachRule({
@@ -4965,67 +5081,27 @@ const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }))));
 };
 
-const fontWeightMap = {
-    regular: fontWeightRegular,
-    'semi-bold': fontWeightSemiBold$1,
-    bold: fontWeightBold,
-};
-const getFontWeight = (weight) => {
-    return fontWeightMap[weight];
-};
+const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
-const aspectRatioPaddingTop = {
-    '1:1': '100%',
-    '4:3': '75%',
-    '3:4': '133.33%',
-    '16:9': '56.25%',
-    '9:16': '177.75%',
-};
-const getGradientBackground = (isCompact, isTopAligned) => {
-    return isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle;
-};
-const sizeMap$2 = {
-    inherit: { fontSize: 'inherit' },
-    default: { fontSize: fontSizeTextMedium },
+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(',')]: {
+                margin: addImportantToRule(0),
+            } }), content: Object.assign(Object.assign(Object.assign({}, 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()) }));
 };
-const getComponentCss$y = (aspectRatio, size, weight, align, compact, hasGradient) => {
-    const isTopAligned = align === 'top';
-    return getCss({
-        '@global': Object.assign(Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)) }, addImportantToEachRule({
-            '::slotted(picture),::slotted(img)': Object.assign({ transition: getTransition('transform') }, getBackfaceVisibilityJssStyle()),
-            '::slotted(picture)': Object.assign({ position: 'absolute' }, getInsetJssStyle(0)),
-            '::slotted(img)': {
-                height: '100%',
-                width: '100%',
-                objectFit: 'cover',
-            },
-        })), { p: Object.assign(Object.assign({ color: getThemedTypographyColor('dark', 'primary'), maxWidth: pxToRemWithUnit(550), margin: 0 }, textLargeStyle), mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$2[s]), buildResponsiveStyles(weight, (w) => ({
-                fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w),
-            })))) }),
-        root: Object.assign(Object.assign({ height: 0, position: 'relative', transform: 'translate3d(0,0,0)' }, hoverMediaQuery({
-            '&:hover': {
-                '& ::slotted(picture),::slotted(img)': addImportantToEachRule({
-                    transform: 'scale3d(1.05, 1.05, 1.05)',
-                }),
-            },
-        })), buildResponsiveStyles(aspectRatio, (ratio) => ({
-            paddingTop: aspectRatioPaddingTop[ratio],
-        }))),
-        'image-container': Object.assign({ position: 'absolute', overflow: 'hidden', borderRadius: borderRadiusMedium }, getInsetJssStyle(0)),
-        content: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'absolute' }, (isTopAligned ? { top: 0 } : { bottom: 0 })), { left: 0, right: 0, display: 'grid', justifyItems: 'start', borderRadius: borderRadiusMedium, padding: align === 'bottom'
-                ? `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`
-                : `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`, gap: spacingStaticMedium }), mergeDeep(hasGradient &&
-            buildResponsiveStyles(compact, (isCompact) => getGradientBackground(isCompact, isTopAligned)), buildResponsiveStyles(compact, (isCompact) => isCompact
-            ? Object.assign({ alignItems: 'center', gridTemplateColumns: 'auto 24px', gridTemplateRows: 'auto' }, (isTopAligned ? { top: 0 } : { bottom: 0 })) : { gridTemplateRows: 'auto auto', gridTemplateColumns: 'auto' }))), { '@media (forced-colors: active)': {
-                background: 'rgba(0,0,0,0.7)',
-            } }),
-        'link-pure': buildResponsiveStyles(compact, (isCompact) => ({
-            display: isCompact ? 'inline-block' : 'none',
-        })),
-        link: Object.assign({ minHeight: '54px' }, buildResponsiveStyles(compact, (isCompact) => ({ display: isCompact ? 'none' : 'inline-block' }))),
-        // is used for expanded click-area only
-        'link-overlay': Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle(0)), { outline: 0 }),
-    });
+
+const getComponentCss$z = (...args) => {
+    return getCss(Object.assign(Object.assign({}, getButtonLinkTileStyles(...args)), { 'link-overlay': Object.assign({ 
+            // covers entire tile, used for expanded click-area only
+            position: 'fixed' }, getInsetJssStyle()) }));
 };
 
 const baseSizes = {
@@ -5038,15 +5114,11 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$x = (size) => {
+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' }, getFocusJssStyle({
-                color: getThemedColors('light').primaryColor,
-                offset: 0,
-                pseudo: '::before',
-            })),
+            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])),
             img: {
@@ -5073,10 +5145,10 @@ const getFullscreenJssStyles = (fullscreen) => {
             borderRadius: 0,
         }
         : {
-            minWidth: pxToRemWithUnit(275.2),
-            maxWidth: pxToRemWithUnit(1536),
+            minWidth: '276px',
+            maxWidth: '1535.5px',
             minHeight: 'auto',
-            margin: `clamp(16px, 7vh, 192px) ${gridSafeZoneBase}`,
+            margin: `clamp(16px, 7vh, 192px) ${gridExtendedOffsetBase}`,
             borderRadius: borderRadiusMedium,
         };
 };
@@ -5106,7 +5178,7 @@ const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
             marginBottom: marginPx,
         } });
 };
-const getComponentCss$w = (open, fullscreen, hasDismissButton, hasHeader) => {
+const getComponentCss$x = (open, fullscreen, hasDismissButton, hasHeader) => {
     const isFullscreenForXlAndXxl = isFullscreenForXl(fullscreen);
     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' }), (open
@@ -5144,7 +5216,7 @@ const getComponentCss$w = (open, fullscreen, hasDismissButton, hasHeader) => {
                 border: 0,
             },
             [mediaQueryXl]: {
-                margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridSafeZoneBase}`,
+                margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridExtendedOffsetBase}`,
             },
         }, buildResponsiveStyles(fullscreen, getFullscreenJssStyles)) }, (hasHeader && {
         header: {
@@ -5174,7 +5246,7 @@ const colorToFilterMap = {
         'contrast-high': filterDarkContrastHigh,
     },
 };
-const getComponentCss$v = (size, color, theme) => {
+const getComponentCss$w = (size, color, theme) => {
     const isSizeInherit = size === 'inherit';
     const isColorInherit = color === 'inherit';
     return getCss({
@@ -5193,7 +5265,7 @@ const disabledCursorStyle = {
     cursor: 'default',
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
-const getComponentCss$u = (maxNumberOfPageLinks, theme) => {
+const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
     const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -5310,7 +5382,7 @@ const directionArrowMap = {
         },
     },
 };
-const getComponentCss$t = (direction, theme) => {
+const getComponentCss$u = (direction, theme) => {
     const spacerBox = '-16px';
     const { hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
@@ -5359,7 +5431,7 @@ const getComponentCss$t = (direction, theme) => {
     });
 };
 
-const getComponentCss$s = (hideLabel, state, isDisabled, theme) => {
+const getComponentCss$t = (hideLabel, state, isDisabled, theme) => {
     const checkedIconColor = getThemedColors(theme === 'light' ? 'dark' : 'light').primaryColor.replace(/#/g, '%23');
     return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, theme), {
         '@global': {
@@ -5393,7 +5465,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$r = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, theme) => {
+const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const { backgroundColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
     const isDarkTheme = isThemeDark(theme);
     const backgroundColorMap = {
@@ -5427,16 +5499,14 @@ const getComponentCss$r = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             margin: '0 -4px',
             height: 'inherit',
         },
-        'scroll-area': {
-            gridArea: '1 / 1 / 1 / -1',
-            padding: '4px',
-            overflow: 'scroll hidden',
+        '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',
             },
-        },
+        })),
         // Extra wrapper needed to compensate different offset parent calculation depending on browser.
         // Needed for position of status bar.
         'scroll-wrapper': {
@@ -5488,7 +5558,7 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
         hoverBorderColor: primaryColor,
     };
 };
-const getComponentCss$q = (isDisabled, isSelected, hasIcon, theme) => {
+const getComponentCss$r = (isDisabled, isSelected, hasIcon, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     return getCss({
@@ -5522,7 +5592,7 @@ const getComponentCss$q = (isDisabled, isSelected, hasIcon, theme) => {
 
 const MIN_ITEM_WIDTH = 46;
 const MAX_ITEM_WIDTH = 220;
-const getComponentCss$p = (maxWidth) => {
+const getComponentCss$q = (maxWidth) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
@@ -5581,7 +5651,7 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
     }));
 };
 const ICON_SPACE = `${24 + 13 * 2 + 2}px`; // 24px = icon width, 13px * 2 = padding, 2px = border
-const getComponentCss$o = (isDisabled, hideLabel, state, theme) => {
+const getComponentCss$p = (isDisabled, hideLabel, state, theme) => {
     return getCss(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule(Object.assign({ ':host': Object.assign({ display: 'block' }, hostHiddenStyles) }, getBaseChildStyles('select', state, theme, {
             position: 'static',
             zIndex: 0,
@@ -5613,7 +5683,7 @@ const sizeMap$1 = {
     large: { height: sizeLarge, width: sizeLarge },
     inherit: { height: 'inherit', width: 'inherit' },
 };
-const getComponentCss$m = (size, theme) => {
+const getComponentCss$n = (size, theme) => {
     const strokeDasharray = '57'; // C = 2πR
     const animationDuration = 'var(--p-animation-duration, 2s)';
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
@@ -5691,7 +5761,7 @@ const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
     ];
     return svgNumberedCirclePaths[stepCount];
 };
-const getComponentCss$l = (state, disabled, theme) => {
+const getComponentCss$m = (state, disabled, theme) => {
     const { primaryColor, hoverColor, disabledColor, focusColor } = getThemedColors(theme);
     const isStateCurrent = state === 'current';
     const isStateCurrentOrUndefined = !state || isStateCurrent;
@@ -5719,7 +5789,7 @@ const getComponentCss$l = (state, disabled, theme) => {
                     height: fontLineHeight,
                     width: fontLineHeight,
                 },
-            })), { '&:focus::after': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(0)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }), '&:focus:not(:focus-visible)::after': {
+            })), { '&:focus::after': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }), '&:focus:not(:focus-visible)::after': {
                     borderColor: 'transparent',
                 } }),
         } }, (!isStateCurrentOrUndefined && {
@@ -5731,7 +5801,7 @@ const getComponentCss$l = (state, disabled, theme) => {
     })), { 'sr-only': getScreenReaderOnlyJssStyle() }));
 };
 
-const getComponentCss$k = (size) => {
+const getComponentCss$l = (size) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -5757,7 +5827,7 @@ const getColors$1 = (checked, disabled, loading, theme) => {
         textColor: disabledOrLoadingColor || primaryColor,
     };
 };
-const getComponentCss$j = (alignLabel, hideLabel, stretch, 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': {
@@ -5810,7 +5880,7 @@ const getComponentCss$j = (alignLabel, hideLabel, stretch, checked, disabled, lo
         })), buildResponsiveStyles(hideLabel, getTextHiddenJssStyle))) }));
 };
 
-const getComponentCss$i = () => {
+const getComponentCss$j = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'table-row-group' }, hostHiddenStyles)),
@@ -5818,10 +5888,10 @@ const getComponentCss$i = () => {
     });
 };
 
-const getComponentCss$h = (multiline) => {
+const getComponentCss$i = (multiline) => {
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ display: 'table-cell', padding: pxToRemWithUnit(12), margin: 0, borderBottom: `1px solid ${getThemedColors('light').contrastLowColor}`, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles))), { verticalAlign: 'middle' }),
+            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ display: 'table-cell', padding: spacingFluidSmall, margin: 0, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles))), { verticalAlign: 'middle' }),
         },
     });
 };
@@ -5831,26 +5901,71 @@ const isSortable = (active, direction) => {
     return active !== undefined && direction !== undefined;
 };
 
-const { contrastMediumColor, primaryColor: primaryColor$1 } = getThemedColors('light');
-const { semiBold: fontWeightSemiBold } = fontWeight;
+const cssVariableTableHoverColor = '--p-internal-table-hover-color';
+const cssVariableTableBorderColor = '--p-internal-table-border-color';
+const cssVariableTableHeadCellIconFilter = '--p-internal-table-head-cell-icon-filter';
+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({
+                [cssVariableTableHoverColor]: hoverColor,
+                [cssVariableTableBorderColor]: contrastLowColor,
+                [cssVariableTableHeadCellIconFilter]: isThemeDark(theme) ? 'invert(100%)' : 'none',
+            }),
+        },
+        caption: {
+            marginBottom: spacingFluidMedium,
+        },
+        table: {
+            display: 'table',
+            borderCollapse: 'collapse',
+            width: '100%',
+            whiteSpace: 'nowrap', // shouldn't be inherited for caption, that's why it's defined here
+        },
+    });
+};
+
+const { hoverColor, focusColor } = getThemedColors('light'); // hover color and focus color are the same for light and dark
+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: `${pxToRemWithUnit(2)} ${pxToRemWithUnit(12)} ${pxToRemWithUnit(8)}`, borderBottom: `1px solid ${contrastMediumColor}`, verticalAlign: 'bottom', fontWeight: fontWeightSemiBold, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles)) }, (sortable
+    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(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-end', padding: 0, boxSizing: 'border-box', appearance: 'none', border: 'none' }, textSmallStyle), { fontWeight: fontWeightSemiBold, color: primaryColor$1, textDecoration: 'none', textAlign: 'left', background: 'transparent', cursor: 'pointer' }), getFocusJssStyle({ offset: 1 })), hoverMediaQuery(Object.assign(Object.assign({}, getHoverJssStyle()), { '&:hover, &:focus': {
+                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,
                         },
-                    } }))),
+                    },
+                    '&:hover::before': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
+                })), { '&:focus::before': {
+                        border: `${borderWidthBase} solid ${focusColor}`,
+                    }, '&:not(:focus-visible)::before': {
+                        border: 0,
+                    } }),
             }
             : hideLabel && {
                 span: Object.assign(Object.assign({}, getTextHiddenJssStyle(true)), { display: 'block', border: 0 }),
             })) }, (sortable && {
         icon: {
-            marginLeft: spacingStaticXSmall,
+            transition: getTransition('opacity'),
             opacity: active ? 1 : 0,
             transform: `rotate3d(0,0,1,${isDirectionAsc(direction) ? 0 : 180}deg)`,
-            transformOrigin: '50% 50%', // for iOS
+            transformOrigin: '50% 50%',
+            filter: `var(${cssVariableTableHeadCellIconFilter})`,
         },
     })));
 };
@@ -5866,7 +5981,7 @@ const getComponentCss$f = () => {
 const getComponentCss$e = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'table-header-group' }, hostHiddenStyles)),
+            ':host': addImportantToEachRule(Object.assign({ display: 'table-header-group', fontSize: fontSizeTextXSmall, lineHeight: fontLineHeight, fontWeight: fontWeightSemiBold }, hostHiddenStyles)),
         },
     });
 };
@@ -5874,71 +5989,19 @@ const getComponentCss$e = () => {
 const getComponentCss$d = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'table-row' }, hostHiddenStyles), hoverMediaQuery({
-                transition: getTransition('background-color'),
+            ':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)': {
-                    backgroundColor: getThemedColors('light').backgroundSurfaceColor,
+                    // ...frostedGlassStyle, // will result in not smooth transition when applied
+                    background: `var(${cssVariableTableHoverColor})`,
                 },
             }))),
         },
     });
 };
 
-const { primaryColor } = getThemedColors('light');
-const getComponentCss$c = () => {
-    return getCss({
-        '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)),
-        },
-        caption: {
-            marginBottom: spacingStaticSmall,
-            [getMediaQueryMin('m')]: {
-                marginBottom: spacingStaticMedium,
-            },
-        },
-        root: {
-            position: 'relative',
-        },
-        'scroll-area': Object.assign({ overflow: 'auto visible' }, getFocusJssStyle({ offset: -1 })),
-        table: Object.assign(Object.assign({ position: 'relative', width: '100%', display: 'table' }, textSmallStyle), { textAlign: 'left', color: primaryColor, whiteSpace: 'nowrap' }),
-        'scroll-trigger': {
-            position: 'absolute',
-            top: 0,
-            right: '1px',
-            width: '1px',
-            height: '1px',
-            visibility: 'hidden',
-        },
-        'scroll-indicator': {
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            paddingLeft: spacingStaticLarge,
-            pointerEvents: 'none',
-            display: 'flex',
-            alignItems: 'center',
-            background: 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%)',
-            '&::before': {
-                content: '""',
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                bottom: 0,
-                width: pxToRemWithUnit(48),
-                pointerEvents: 'auto',
-            },
-        },
-        'scroll-button': {
-            padding: pxToRemWithUnit(12),
-            pointerEvents: 'auto',
-        },
-    });
-};
-
 const tabsTransitionDuration = '.4s';
 const transformSelector = (selector) => ['a', 'button'].map((tag) => selector.replace(/\[role]/g, tag)).join();
-const getComponentCss$b = (size, weight, theme) => {
+const getComponentCss$c = (size, weight, theme) => {
     const { primaryColor, hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ position: 'relative', 
@@ -5977,7 +6040,7 @@ const getComponentCss$b = (size, weight, theme) => {
     });
 };
 
-const getComponentCss$a = (theme) => {
+const getComponentCss$b = (theme) => {
     const { primaryColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -5991,7 +6054,7 @@ const getComponentCss$a = (theme) => {
     });
 };
 
-const getComponentCss$9 = () => {
+const getComponentCss$a = () => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6023,7 +6086,7 @@ const getThemedBackgroundColor = (tagColor, themedColors) => {
     return colorMap[tagColor];
 };
 
-const getComponentCss$8 = (color, hasLabel, theme) => {
+const getComponentCss$9 = (color, hasLabel, theme) => {
     const themedColors = getThemedColors(theme);
     const { primaryColor, hoverColor, contrastHighColor } = themedColors;
     const backgroundColor = getThemedBackgroundColor(color, themedColors);
@@ -6073,7 +6136,7 @@ const getColors = (themedColors, tagColor, theme) => {
         backgroundHoverColor: getThemedBackgroundHoverColor(tagColor, themedColors, theme),
     };
 };
-const getComponentCss$7 = (tagColor, isFocusable, theme) => {
+const getComponentCss$8 = (tagColor, isFocusable, theme) => {
     const themedColors = getThemedColors(theme);
     const { primaryColor, backgroundColor, backgroundHoverColor } = getColors(themedColors, tagColor, theme);
     return getCss({
@@ -6130,7 +6193,7 @@ const getButtonOrIconOffsetHorizontal = (buttonOrIconAmount) => {
     const multiplier = buttonOrIconAmount > 1 ? ` + ${buttonOrIconSize} * ${buttonOrIconAmount - 1}` : '';
     return `calc(${buttonOrIconOffset} + ${borderWidthBase}${multiplier})`;
 };
-const getComponentCss$6 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, isWithinForm, theme) => {
+const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, isWithinForm, theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
@@ -6186,7 +6249,7 @@ const cssVariableUnorderedPaddingLeft = '--p-internal-text-list-unordered-paddin
 const cssVariableOrderedPaddingLeft = '--p-internal-text-list-ordered-padding-left';
 const cssVariableListStyleType = '--p-internal-text-list-list-style-type';
 const counter = 'p-text-list-counter';
-const getComponentCss$5 = (type, theme) => {
+const getComponentCss$6 = (type, theme) => {
     const isOrderedList = isListTypeOrdered(type);
     return getCss({
         '@global': {
@@ -6212,7 +6275,7 @@ const getComponentCss$5 = (type, theme) => {
     });
 };
 
-const getComponentCss$4 = () => {
+const getComponentCss$5 = () => {
     return getCss({
         '@global': addImportantToEachRule({
             ':host': Object.assign({ display: 'list-item', position: 'relative', font: 'inherit', color: 'inherit', listStyleType: 'inherit', paddingLeft: spacingStaticMedium }, hostHiddenStyles),
@@ -6233,7 +6296,7 @@ const sizeMap = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const getComponentCss$3 = (size, weight, align, color, ellipsis, theme) => {
+const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6248,7 +6311,7 @@ const getComponentCss$3 = (size, weight, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$2 = (isDisabled, hideLabel, state, hasCounter, 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,
@@ -6273,83 +6336,102 @@ const getComponentCss$2 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     })));
 };
 
-const toastPositionBottomVarPublic = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
-const toastPositionBottomVarInternal = '--p-internal-toast-position-bottom';
+const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
+const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
 const toastCloseClassName = 'close';
-const getComponentCss = () => {
+const getComponentCss$1 = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ position: 'fixed', left: gridSafeZoneBase, right: gridSafeZoneBase, 
+            ':host': addImportantToEachRule(Object.assign({ 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.
-                [toastPositionBottomVarInternal]: `var(${toastPositionBottomVarPublic}, 56px)`, bottom: `var(${toastPositionBottomVarInternal})`, 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',
-                    [toastPositionBottomVarInternal]: `var(${toastPositionBottomVarPublic}, 64px)`,
-                    bottom: `var(${toastPositionBottomVarInternal})`,
+                    [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 64px)`,
+                    bottom: `var(${cssVariablePositionBottomInternal})`,
                 } }, hostHiddenStyles)),
-            '@keyframes in': getKeyframesMobile('in', toastPositionBottomVarInternal),
-            '@keyframes out': getKeyframesMobile('out', toastPositionBottomVarInternal),
+            '@keyframes in': getKeyframesMobile('in', cssVariablePositionBottomInternal),
+            '@keyframes out': getKeyframesMobile('out', cssVariablePositionBottomInternal),
         },
         hydrated: getAnimationIn('in', "production" !== 'production'  ),
         [toastCloseClassName]: getAnimationOut('out'),
     });
 };
 
-exports.getAccordionCss = getComponentCss$T;
-exports.getBannerCss = getComponentCss$S;
-exports.getButtonCss = getComponentCss$P;
-exports.getButtonGroupCss = getComponentCss$R;
-exports.getButtonPureCss = getComponentCss$Q;
-exports.getCarouselCss = getComponentCss$O;
-exports.getCheckboxWrapperCss = getComponentCss$N;
-exports.getContentWrapperCss = getComponentCss$M;
-exports.getDisplayCss = getComponentCss$L;
-exports.getDividerCss = getComponentCss$K;
-exports.getFieldsetWrapperCss = getComponentCss$J;
-exports.getFlexCss = getComponentCss$H;
-exports.getFlexItemCss = getComponentCss$I;
+const getComponentCss = (size, theme) => {
+    return getCss({
+        '@global': {
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, boxSizing: 'content-box' }, (!(size === 'inherit') && { height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)' })), hostHiddenStyles))),
+            a: Object.assign({ display: 'block', textDecoration: 'none', height: 'inherit' }, focusPseudoJssStyle),
+            svg: {
+                display: 'block',
+                height: 'inherit',
+                fill: getThemedColors(theme).primaryColor,
+            },
+        },
+    });
+};
+
+exports.getAccordionCss = getComponentCss$Y;
+exports.getBannerCss = getComponentCss$X;
+exports.getButtonCss = getComponentCss$T;
+exports.getButtonGroupCss = getComponentCss$W;
+exports.getButtonPureCss = getComponentCss$V;
+exports.getButtonTileCss = getComponentCss$U;
+exports.getCarouselCss = getComponentCss$S;
+exports.getCheckboxWrapperCss = getComponentCss$R;
+exports.getContentWrapperCss = getComponentCss$Q;
+exports.getCrestCss = getComponentCss$P;
+exports.getDisplayCss = getComponentCss$O;
+exports.getDividerCss = getComponentCss$N;
+exports.getFieldsetCss = getComponentCss$L;
+exports.getFieldsetWrapperCss = getComponentCss$M;
+exports.getFlexCss = getComponentCss$J;
+exports.getFlexItemCss = getComponentCss$K;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$F;
-exports.getGridItemCss = getComponentCss$G;
-exports.getHeadingCss = getComponentCss$E;
-exports.getHeadlineCss = getComponentCss$D;
-exports.getIconCss = getComponentCss$C;
-exports.getInlineNotificationCss = getComponentCss$B;
-exports.getLinkCss = getComponentCss$z;
-exports.getLinkPureCss = getComponentCss$A;
-exports.getLinkSocialCss = getComponentCss$z;
-exports.getLinkTileCss = getComponentCss$y;
-exports.getMarqueCss = getComponentCss$x;
-exports.getModalCss = getComponentCss$w;
-exports.getModelSignatureCss = getComponentCss$v;
-exports.getPaginationCss = getComponentCss$u;
-exports.getPopoverCss = getComponentCss$t;
-exports.getRadioButtonWrapperCss = getComponentCss$s;
-exports.getScrollerCss = getComponentCss$r;
-exports.getSegmentedControlCss = getComponentCss$p;
-exports.getSegmentedControlItemCss = getComponentCss$q;
-exports.getSelectWrapperCss = getComponentCss$o;
-exports.getSpinnerCss = getComponentCss$m;
-exports.getStepperHorizontalCss = getComponentCss$k;
-exports.getStepperHorizontalItemCss = getComponentCss$l;
-exports.getSwitchCss = getComponentCss$j;
-exports.getTableBodyCss = getComponentCss$i;
-exports.getTableCellCss = getComponentCss$h;
-exports.getTableCss = getComponentCss$c;
+exports.getGridCss = getComponentCss$H;
+exports.getGridItemCss = getComponentCss$I;
+exports.getHeadingCss = getComponentCss$G;
+exports.getHeadlineCss = getComponentCss$F;
+exports.getIconCss = getComponentCss$E;
+exports.getInlineNotificationCss = getComponentCss$D;
+exports.getLinkCss = getComponentCss$B;
+exports.getLinkPureCss = getComponentCss$C;
+exports.getLinkSocialCss = getComponentCss$B;
+exports.getLinkTileCss = getComponentCss$z;
+exports.getLinkTileModelSignatureCss = getComponentCss$A;
+exports.getMarqueCss = getComponentCss$y;
+exports.getModalCss = getComponentCss$x;
+exports.getModelSignatureCss = getComponentCss$w;
+exports.getPaginationCss = getComponentCss$v;
+exports.getPopoverCss = getComponentCss$u;
+exports.getRadioButtonWrapperCss = getComponentCss$t;
+exports.getScrollerCss = getComponentCss$s;
+exports.getSegmentedControlCss = getComponentCss$q;
+exports.getSegmentedControlItemCss = getComponentCss$r;
+exports.getSelectWrapperCss = getComponentCss$p;
+exports.getSpinnerCss = getComponentCss$n;
+exports.getStepperHorizontalCss = getComponentCss$l;
+exports.getStepperHorizontalItemCss = getComponentCss$m;
+exports.getSwitchCss = getComponentCss$k;
+exports.getTableBodyCss = getComponentCss$j;
+exports.getTableCellCss = getComponentCss$i;
+exports.getTableCss = getComponentCss$h;
 exports.getTableHeadCellCss = getComponentCss$g;
 exports.getTableHeadCss = getComponentCss$e;
 exports.getTableHeadRowCss = getComponentCss$f;
 exports.getTableRowCss = getComponentCss$d;
-exports.getTabsBarCss = getComponentCss$b;
-exports.getTabsCss = getComponentCss$9;
-exports.getTabsItemCss = getComponentCss$a;
-exports.getTagCss = getComponentCss$7;
-exports.getTagDismissibleCss = getComponentCss$8;
-exports.getTextCss = getComponentCss$3;
-exports.getTextFieldWrapperCss = getComponentCss$6;
-exports.getTextListCss = getComponentCss$5;
-exports.getTextListItemCss = getComponentCss$4;
-exports.getTextareaWrapperCss = getComponentCss$2;
-exports.getToastCss = getComponentCss;
+exports.getTabsBarCss = getComponentCss$c;
+exports.getTabsCss = getComponentCss$a;
+exports.getTabsItemCss = getComponentCss$b;
+exports.getTagCss = getComponentCss$8;
+exports.getTagDismissibleCss = getComponentCss$9;
+exports.getTextCss = getComponentCss$4;
+exports.getTextFieldWrapperCss = getComponentCss$7;
+exports.getTextListCss = getComponentCss$6;
+exports.getTextListItemCss = getComponentCss$5;
+exports.getTextareaWrapperCss = getComponentCss$3;
+exports.getToastCss = getComponentCss$1;
+exports.getWordmarkCss = getComponentCss;