@porsche-design-system/components-react 3.0.0-alpha.2 → 3.0.0-alpha.4

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

@@ -51,6 +51,10 @@ const dropShadowLowStyle = {
     filter: `drop-shadow(0px 3px 8px ${_dropShadowBackgroundColor})`,
 };
 
+const dropShadowHighStyle = {
+    filter: `drop-shadow(0px 8px 40px ${_dropShadowBackgroundColor})`,
+};
+
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 const fontHyphenationStyle = {
@@ -60,6 +64,8 @@ const fontHyphenationStyle = {
 
 const fontLineHeight = 'calc(6px + 2.125ex)';
 
+const fontSizeTextXXSmall = '.75rem';
+
 const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
 
 const fontSizeTextSmall = '1rem';
@@ -71,6 +77,7 @@ const fontSizeTextLarge = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
 const fontSizeTextXLarge = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
 
 const fontSizeText = {
+    xxSmall: fontSizeTextXXSmall,
     xSmall: fontSizeTextXSmall,
     small: fontSizeTextSmall,
     medium: fontSizeTextMedium,
@@ -88,7 +95,7 @@ const fontSizeHeadingXLarge = fontSizeTextXLarge;
 
 const fontSizeHeadingXXLarge = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
 
-const fontSizeHeadingXXXLarge = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
+const fontSizeDisplaySmall = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
 
 const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
 
@@ -96,20 +103,18 @@ 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,
 };
 
 const fontStyleNormal = 'normal';
 
-const fontStyleItalic = 'italic';
-
 const fontVariant = 'normal';
 
 const backdropFilter = 'blur(32px)';
@@ -118,19 +123,42 @@ const frostedGlassStyle = {
     backdropFilter,
 };
 
-const breakpointBase = '0px';
+const _gradient = 'rgba(31,31,31,0.9) 0%,' +
+    'rgba(31,31,31,0.9) 20%,' +
+    'rgba(31,31,31,0.852589) 26.67%,' +
+    'rgba(32,32,32,0.768225) 33.33%,' +
+    'rgba(33,33,33,0.668116) 40%,' +
+    'rgba(34,34,34,0.557309) 46.67%,' +
+    'rgba(35,35,35,0.442691) 53.33%,' +
+    'rgba(36,36,36,0.331884) 60%,' +
+    'rgba(37,37,37,0.231775) 66.67%,' +
+    'rgba(38,38,38,0.147411) 73.33%,' +
+    'rgba(39,39,39,0.0816599) 80%,' +
+    'rgba(39,39,39,0.03551) 86.67%,' +
+    'rgba(39,39,39,0.0086472) 93.33%,' +
+    'rgba(39,39,39,0)';
+
+const gradientToBottomStyle = {
+    background: `linear-gradient(to bottom, ${_gradient} 100%);`,
+};
+
+const gradientToTopStyle = {
+    background: `linear-gradient(to top, ${_gradient} 100%);`,
+};
+
+const breakpointBase = 0;
 
-const breakpointXS = '480px';
+const breakpointXS = 480;
 
-const breakpointS = '760px';
+const breakpointS = 760;
 
-const breakpointM = '1000px';
+const breakpointM = 1000;
 
-const breakpointL = '1300px';
+const breakpointL = 1300;
 
-const breakpointXL = '1760px';
+const breakpointXL = 1760;
 
-const breakpointXXL = '1920px';
+const breakpointXXL = 1920;
 
 const breakpoint = {
     base: breakpointBase,
@@ -143,89 +171,74 @@ const breakpoint = {
 };
 
 function getMediaQueryMin(min) {
-    return `@media(min-width:${breakpoint[min]})`;
+    return `@media(min-width:${breakpoint[min]}px)`;
 }
 
 const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
 
 const gridGap = spacingFluidMedium;
 
-const gridWidthMin = '320px';
+const _gridWidthMax = '2560px';
+// fluid sizing calculated by https://fluidtypography.com/#app-get-started
+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
 
-const gridWidthMax = '2560px';
+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]})`;
 
-// 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 gridFullOffset = _gridPadding;
 
-// 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 gridExtendedOffsetBase = _gridSafeZoneBase;
 
-const gridFullColumnStart = 'full-start';
+const gridExtendedOffsetS = _getGridOffsetS('extended');
 
-const gridExtendedColumnStart = 'extended-start';
+const gridExtendedOffsetXXL = _getGridOffsetXXL('extended');
 
-const gridBasicColumnStart = 'basic-start';
+const gridExtendedOffset = {
+    base: gridExtendedOffsetBase,
+    s: gridExtendedOffsetS,
+    xxl: gridExtendedOffsetXXL,
+};
 
-const gridNarrowColumnStart = 'narrow-start';
+const gridBasicOffsetBase = _gridSafeZoneBase;
 
-const gridNarrowColumnEnd = 'narrow-end';
+const gridBasicOffsetS = _getGridOffsetS('basic');
 
-const gridBasicColumnEnd = 'basic-end';
+const gridBasicOffsetXXL = _getGridOffsetXXL('basic');
 
-const gridExtendedColumnEnd = 'extended-end';
+const gridBasicOffset = {
+    base: gridBasicOffsetBase,
+    s: gridBasicOffsetS,
+    xxl: gridBasicOffsetXXL,
+};
 
-const gridFullColumnEnd = 'full-end';
+const gridNarrowOffsetBase = _gridSafeZoneBase;
 
-const _cssVariableGridExtendedSpanOneHalf = '--pds-grid-extended-span-one-half';
-const _cssVariableGridBasicSpanOneHalf = '--pds-grid-basic-span-one-half';
-const _cssVariableGridBasicSpanOneThird = '--pds-grid-basic-span-one-third';
-const _cssVariableGridBasicSpanTwoThirds = '--pds-grid-basic-span-two-thirds';
-const _cssVariableGridNarrowSpanOneHalf = '--pds-grid-narrow-span-one-half';
-const _cssVariableGridSafeZone = '--pds-internal-grid-safe-zone';
+const gridNarrowOffsetS = _getGridOffsetS('narrow');
 
-const outerColumn = `minmax(0, calc(var(${_cssVariableGridSafeZone}) - ${gridGap}))`;
-const column = 'minmax(0, 1fr)';
-const getColumns = (repeat) => (repeat > 1 ? `repeat(${repeat}, ${column})` : column);
-const getColumnSpan = (span) => `span ${span}`;
-const getGridTemplateColumns = (layout) => layout === 'mobile'
-    ? `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`
-    : `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`;
-({
-    [_cssVariableGridSafeZone]: gridSafeZoneBase,
-    [_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(3),
-    [_cssVariableGridBasicSpanOneHalf]: getColumnSpan(3),
-    [_cssVariableGridBasicSpanOneThird]: getColumnSpan(2),
-    [_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(4),
-    [_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(3),
-    display: 'grid',
-    gridGap,
-    gridTemplateColumns: getGridTemplateColumns('mobile'),
-    minWidth: gridWidthMin,
-    maxWidth: gridWidthMax,
-    margin: 0,
-    padding: `0 calc(50% - ${gridWidthMax} / 2)`,
-    boxSizing: 'content-box',
-    [getMediaQueryMin('s')]: {
-        [_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(7),
-        [_cssVariableGridBasicSpanOneHalf]: getColumnSpan(6),
-        [_cssVariableGridBasicSpanOneThird]: getColumnSpan(4),
-        [_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(8),
-        [_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(4),
-        gridTemplateColumns: getGridTemplateColumns('desktop'),
-    },
-    [getMediaQueryMin('xxl')]: {
-        [_cssVariableGridSafeZone]: gridSafeZoneXXL,
-    },
-});
+const gridNarrowOffsetXXL = _getGridOffsetXXL('narrow');
+
+const gridNarrowOffset = {
+    base: gridNarrowOffsetBase,
+    s: gridNarrowOffsetS,
+    xxl: gridNarrowOffsetXXL,
+};
 
 function getMediaQueryMax(max) {
-    return `@media(max-width:${breakpoint[max].slice(0, -2) - 1}px)`;
+    return `@media(max-width:${breakpoint[max] - 1}px)`;
 }
 
 function getMediaQueryMinMax(min, max) {
-    return `@media(min-width:${breakpoint[min]}) and (max-width:${breakpoint[max].slice(0, -2) - 1}px)`;
+    return `@media(min-width:${breakpoint[min]}px) and (max-width:${breakpoint[max] - 1}px)`;
 }
 
 const spacingStaticXSmall = '4px';
@@ -240,9 +253,11 @@ const spacingFluidXSmall = 'clamp(4px, 0.25vw + 3px, 8px)';
 
 const spacingFluidSmall = 'clamp(8px, 0.5vw + 6px, 16px)';
 
+const spacingFluidLarge = 'clamp(32px, 2.75vw + 23px, 76px)';
+
 const themeDarkBackgroundShading = 'rgba(1, 2, 5, 0.67)';
 
-const _displayFontPartA = `${fontStyleItalic} ${fontVariant} ${fontWeightSemiBold$1} `;
+const _displayFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _displayFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
 const displayMediumStyle = {
@@ -253,7 +268,7 @@ const displayLargeStyle = {
     font: `${_displayFontPartA}${fontSizeDisplayLarge}${_displayFontPartB}`,
 };
 
-const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold$1} `;
+const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold} `;
 const _headingFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
 const headingSmallStyle = {
@@ -289,13 +304,18 @@ const textSmallStyle = {
     ...fontHyphenationStyle,
 };
 
+const textLargeStyle = {
+    font: `${_textFontPartA}${fontSizeTextLarge}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
 // TODO: we shouldn't exclude xxl breakpoint
 const mediaQueries = Object.entries(breakpoint)
     .filter(([key]) => key !== 'xxl')
-    .map(([, val]) => `(min-width:${val})`);
+    .map(([, val]) => `(min-width:${val}px)`);
 hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
-Object.entries(breakpoint).reduce((result, [key, val]) => (Object.assign(Object.assign({}, result), { [val]: key })), {});
+Object.entries(breakpoint).reduce((result, [key, val]) => (Object.assign(Object.assign({}, result), { [`${val}px`]: key })), {});
 
 const hasVisibleIcon = (iconName, iconSource) => {
     return iconName !== 'none' || !!iconSource;
@@ -505,12 +525,6 @@ var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symb
 
 var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
 
-var module$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: isBrowser,
-    isBrowser: isBrowser
-});
-
 var isProduction = process.env.NODE_ENV === 'production';
 function warning(condition, message) {
   if (!isProduction) {
@@ -1058,7 +1072,7 @@ function () {
 
   return ConditionalRule;
 }();
-var keyRegExp = /@media|@supports\s+/;
+var keyRegExp = /@container|@media|@supports\s+/;
 var pluginConditionalRule = {
   onCreateRule: function onCreateRule(key, styles, options) {
     return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;
@@ -1355,7 +1369,7 @@ var pluginSimpleRule = {
   }
 };
 
-var plugins$1 = [pluginStyleRule, pluginConditionalRule, pluginKeyframesRule, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
+var plugins = [pluginStyleRule, pluginConditionalRule, pluginKeyframesRule, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
 
 var defaultUpdateOptions = {
   process: true
@@ -2622,7 +2636,7 @@ var Jss =
 function () {
   function Jss(options) {
     this.id = instanceCounter++;
-    this.version = "10.9.2";
+    this.version = "10.10.0";
     this.plugins = new PluginsRegistry();
     this.options = {
       id: {
@@ -2636,8 +2650,8 @@ function () {
       minify: false
     });
 
-    for (var i = 0; i < plugins$1.length; i++) {
-      this.plugins.use(plugins$1[i], {
+    for (var i = 0; i < plugins.length; i++) {
+      this.plugins.use(plugins[i], {
         queue: 'internal'
       });
     }
@@ -2902,54 +2916,24 @@ var jss_esm = /*#__PURE__*/Object.freeze({
     toCssValue: toCssValue
 });
 
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			if (this instanceof a) {
-				var args = [null];
-				args.push.apply(args, arguments);
-				var Ctor = Function.bind.apply(f, args);
-				return new Ctor();
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 /* eslint-disable no-var, prefer-template */
 var uppercasePattern = /[A-Z]/g;
 var msPattern = /^ms-/;
-var cache$2 = {};
+var cache = {};
 
 function toHyphenLower(match) {
   return '-' + match.toLowerCase()
 }
 
 function hyphenateStyleName(name) {
-  if (cache$2.hasOwnProperty(name)) {
-    return cache$2[name]
+  if (cache.hasOwnProperty(name)) {
+    return cache[name]
   }
 
   var hName = name.replace(uppercasePattern, toHyphenLower);
-  return (cache$2[name] = msPattern.test(hName) ? '-' + hName : hName)
+  return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)
 }
 
-var index_cjs = hyphenateStyleName;
-
 /**
  * Convert camel cased property names to dash separated.
  */
@@ -2958,7 +2942,7 @@ function convertCase(style) {
   var converted = {};
 
   for (var prop in style) {
-    var key = prop.indexOf('--') === 0 ? prop : index_cjs(prop);
+    var key = prop.indexOf('--') === 0 ? prop : hyphenateStyleName(prop);
     converted[key] = style[prop];
   }
 
@@ -2992,7 +2976,7 @@ function camelCase() {
       return value;
     }
 
-    var hyphenatedProp = index_cjs(prop); // There was no camel case in place
+    var hyphenatedProp = hyphenateStyleName(prop); // There was no camel case in place
 
     if (prop === hyphenatedProp) return value;
     rule.prop(hyphenatedProp, value); // Core will ignore that property value we set the proper one above.
@@ -3297,6 +3281,34 @@ function jssNested() {
   };
 }
 
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+				var args = [null];
+				args.push.apply(args, arguments);
+				var Ctor = Function.bind.apply(f, args);
+				return new Ctor();
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
 var _tslib$1 = {};
 
 (function (exports) {
@@ -3705,10 +3717,10 @@ const themeLight = {
     contrastHighColor: '#535457',
     contrastHighColorDarken: '#353638',
     contrastHighColorLighten: '#717276',
-    hoverColor: 'rgba(148, 149, 152, 0.20)',
+    hoverColor: 'rgba(148, 149, 152, .18)',
     hoverColorDarken: '#75767A',
     activeColor: 'rgba(148, 149, 152, 0.20)',
-    focusColor: '#0A0AFF',
+    focusColor: '#1A44EA',
     disabledColor: '#949598',
     errorColor: '#E7323B',
     errorColorDarken: '#C51720',
@@ -3743,10 +3755,10 @@ const themeDark = {
     contrastHighColor: '#AFB0B3',
     contrastHighColorDarken: '#909195',
     contrastHighColorLighten: '#CECFD1',
-    hoverColor: 'rgba(126, 127, 130, 0.20)',
-    hoverColorDarken: '#606163',
+    hoverColor: 'rgba(148, 149, 152, .18)',
+    hoverColorDarken: '#75767A',
     activeColor: 'rgba(126, 127, 130, 0.20)',
-    focusColor: '#1E5BEB',
+    focusColor: '#1A44EA',
     disabledColor: '#7E7F82',
     errorColor: '#CB3333',
     errorColorDarken: '#9A2727',
@@ -3791,13 +3803,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`;
@@ -3808,6 +3817,14 @@ const getInsetJssStyle = (value = 0) => {
         bottom: value,
     };
 };
+// reset initial styles, e.g. in case link-pure is used with slotted anchor and nested within e.g. an accordion
+const getResetInitialStylesForSlottedAnchor = {
+    margin: 0,
+    padding: 0,
+    outline: 0,
+    borderRadius: 0,
+    background: 'transparent',
+};
 const getFocusJssStyle = (opts) => {
     const { pseudo, offset: outlineOffset, color: outlineColor, } = Object.assign({ color: 'currentColor', offset: 2 }, opts);
     return pseudo
@@ -3926,14 +3943,14 @@ const buildResponsiveStyles = (rawValue, getJssStyle) => {
             [getMediaQueryMin(breakpointValue)]: getJssStyle(value[breakpointValue]) })), getJssStyle(value.base))
         : getJssStyle(value);
 };
-const isObject$1 = (obj) => typeof obj === 'object' && !Array.isArray(obj);
+const isObject = (obj) => typeof obj === 'object' && !Array.isArray(obj);
 // NOTE: taken from https://stackoverflow.com/a/48218209
 const mergeDeep = (...objects) => {
     return objects.reduce((prev, obj) => {
         Object.keys(obj).forEach((key) => {
             const pVal = prev[key];
             const oVal = obj[key];
-            if (isObject$1(pVal) && isObject$1(oVal)) {
+            if (isObject(pVal) && isObject(oVal)) {
                 prev[key] = mergeDeep(pVal, oVal);
             }
             else {
@@ -3944,2063 +3961,191 @@ const mergeDeep = (...objects) => {
     }, {});
 };
 
-[
-    { name: 'Model', id: 'model' },
-    { name: 'Interest', id: 'interest' },
-    { name: 'VIN', id: 'vin' },
-    { name: 'Purchase Intention', id: 'purchaseIntention' },
-    { name: 'Status', id: 'status' },
-    { name: 'Comment', id: 'comment' },
-    { name: 'Lead ID', id: 'leadId' },
-    { name: 'Action', id: 'action', hideLabel: true },
-].map((item, i) => ({
-    ...item,
-    ...(i > 0 &&
-        i < 7 &&
-        i !== 5 && {
-        active: i === 1,
-        direction: 'asc',
-    }),
-}));
-
-[
-    { name: 'Column 1', id: 'col1' },
-    { name: 'Column 2', id: 'col2' },
-    { name: 'Column 3', id: 'col3' },
-].map((item, i) => ({
-    ...item,
-    active: i === 1,
-    direction: 'asc',
-}));
-
-Array.from(Array(4)).map(() => ({
-    imageUrl: 'https://nav.porsche.com/00BC524/series-assets/1366/911@2x.jpg',
-    imageWidth: 80,
-    imageHeight: 48,
-    html: "<a href='#'>link</a>&nbsp;<b>bold</b>&nbsp;<i>italic</i>&nbsp;<strong>strong</strong>&nbsp;<em>emphasized</em>",
-    longText: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
-    shortText: 'Some text',
-}));
-
-var now = Date.now();
-var fnValuesNs = "fnValues" + now;
-var fnRuleNs = "fnStyle" + ++now;
-
-var functionPlugin = function functionPlugin() {
-  return {
-    onCreateRule: function onCreateRule(name, decl, options) {
-      if (typeof decl !== 'function') return null;
-      var rule = createRule(name, {}, options);
-      rule[fnRuleNs] = decl;
-      return rule;
-    },
-    onProcessStyle: function onProcessStyle(style, rule) {
-      // We need to extract function values from the declaration, so that we can keep core unaware of them.
-      // We need to do that only once.
-      // We don't need to extract functions on each style update, since this can happen only once.
-      // We don't support function values inside of function rules.
-      if (fnValuesNs in rule || fnRuleNs in rule) return style;
-      var fnValues = {};
-
-      for (var prop in style) {
-        var value = style[prop];
-        if (typeof value !== 'function') continue;
-        delete style[prop];
-        fnValues[prop] = value;
-      }
-
-      rule[fnValuesNs] = fnValues;
-      return style;
-    },
-    onUpdate: function onUpdate(data, rule, sheet, options) {
-      var styleRule = rule;
-      var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object
-      // will be returned from that function.
-
-      if (fnRule) {
-        // Empty object will remove all currently defined props
-        // in case function rule returns a falsy value.
-        styleRule.style = fnRule(data) || {};
-
-        if (process.env.NODE_ENV === 'development') {
-          for (var prop in styleRule.style) {
-            if (typeof styleRule.style[prop] === 'function') {
-              process.env.NODE_ENV !== "production" ? warning(false, '[JSS] Function values inside function rules are not supported.') : void 0;
-              break;
-            }
-          }
-        }
-      }
-
-      var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.
-
-      if (fnValues) {
-        for (var _prop in fnValues) {
-          styleRule.prop(_prop, fnValues[_prop](data), options);
-        }
-      }
-    }
-  };
+const isThemeDark = (theme) => {
+    return theme === 'dark';
 };
 
-function symbolObservablePonyfill(root) {
-	var result;
-	var Symbol = root.Symbol;
-
-	if (typeof Symbol === 'function') {
-		if (Symbol.observable) {
-			result = Symbol.observable;
-		} else {
-			result = Symbol('observable');
-			Symbol.observable = result;
-		}
-	} else {
-		result = '@@observable';
-	}
-
-	return result;
-}
-
-/* global window */
+const hasDocument = typeof document !== 'undefined';
 
-var root;
+hasDocument && 'scrollBehavior' in document.documentElement.style;
 
-if (typeof self !== 'undefined') {
-  root = self;
-} else if (typeof window !== 'undefined') {
-  root = window;
-} else if (typeof global !== 'undefined') {
-  root = global;
-} else if (typeof module !== 'undefined') {
-  root = module;
-} else {
-  root = Function('return this')();
-}
+const formatObjectOutput = (value) => {
+    return JSON.stringify(value)
+        .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
+        .replace(/([,:{])/g, '$1 ') // add space after following: ,:{
+        .replace(/(})/g, ' $1') // add space before following: }
+        .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
+};
+'value, ' +
+    formatObjectOutput(BREAKPOINTS.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
 
-var result = symbolObservablePonyfill(root);
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-var isObservable = function isObservable(value) {
-  return value && value[result] && value === value[result]();
+const getComponentCss$W = (size, compact, open, theme) => {
+    const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
+    const border = `1px solid ${contrastLowColor}`;
+    return getCss(Object.assign(Object.assign({ '@global': {
+            ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)),
+            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', margin: '2px 0', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeight.semiBold }), buildResponsiveStyles(size, (s) => ({
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                fontSize: fontSizeText[s],
+                padding: compact ? '4px 0' : `${s === 'medium' ? '20px' : '12px'} 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': {
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                }, '&:not(:focus-visible)::before': {
+                    border: 0,
+                } }),
+        } }, (!compact && {
+        root: {
+            borderBottom: border,
+        },
+    })), { heading: {
+            margin: 0,
+            padding: 0,
+        }, icon: {
+            width: fontLineHeight,
+            height: fontLineHeight,
+            transformOrigin: '50% 50%',
+            transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
+            transition: getTransition('transform'),
+        }, collapsible: Object.assign({ color: primaryColor, padding: 0, overflow: 'hidden' }, (open
+            ? {
+                height: 'auto',
+                paddingBottom: compact ? spacingStaticSmall : '24px',
+                visibility: 'visible',
+                transition: getTransition('height') + `,visibility ${transitionDuration}`,
+                animation: `$open ${transitionDuration} ease forwards`,
+            }
+            : {
+                height: 0,
+                visibility: 'hidden',
+                transition: getTransition('height') + `,visibility ${transitionDuration} linear ${transitionDuration}`,
+            })), 
+        // TODO: this doesn't get shortened and results in `keyframes-open` for some unknown reason
+        '@keyframes open': {
+            '0%,99%': {
+                overflow: 'hidden',
+            },
+            '100%': {
+                overflow: 'visible',
+            },
+        } }));
 };
 
-var observablePlugin = function observablePlugin(updateOptions) {
-  return {
-    onCreateRule: function onCreateRule(name, decl, options) {
-      if (!isObservable(decl)) return null;
-      var style$ = decl;
-      var rule = createRule(name, {}, options); // TODO
-      // Call `stream.subscribe()` returns a subscription, which should be explicitly
-      // unsubscribed from when we know this sheet is no longer needed.
-
-      style$.subscribe(function (style) {
-        for (var prop in style) {
-          rule.prop(prop, style[prop], updateOptions);
+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 getAnimationIn = (keyframesName, durationVar) => {
+    const duration = durationVar ? `var(${durationVar},${ANIMATION_DURATION}ms)` : `${ANIMATION_DURATION}ms`;
+    return {
+        animation: `${duration} $${keyframesName} ${easeInQuad} forwards`,
+    };
+};
+const getAnimationOut = (keyframesName) => ({
+    animation: addImportantToRule(`${ANIMATION_DURATION}ms $${keyframesName} ${easeOutQuad} forwards`),
+});
+const getKeyframes = (direction, outsideStyle) => {
+    const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
+    return direction === 'in'
+        ? {
+            from: outsideStyle,
+            to: insideStyle,
         }
-      });
-      return rule;
-    },
-    onProcessRule: function onProcessRule(rule) {
-      if (rule && rule.type !== 'style') return;
-      var styleRule = rule;
-      var style = styleRule.style;
-
-      var _loop = function _loop(prop) {
-        var value = style[prop];
-        if (!isObservable(value)) return "continue";
-        delete style[prop];
-        value.subscribe({
-          next: function next(nextValue) {
-            styleRule.prop(prop, nextValue, updateOptions);
-          }
-        });
-      };
+        : {
+            from: insideStyle,
+            to: outsideStyle,
+        };
+};
+const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
+    opacity: 0,
+    transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
+});
 
-      for (var prop in style) {
-        var _ret = _loop(prop);
+const TOAST_Z_INDEX = 999999;
+const MODAL_Z_INDEX = 99999;
+const POPOVER_Z_INDEX = 9999;
+const BANNER_Z_INDEX = 99;
 
-        if (_ret === "continue") continue;
-      }
-    }
-  };
+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 getComponentCss$V = () => {
+    return getCss({
+        '@global': {
+            ':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)': {
+                    [mediaQueryBaseToS]: getAnimationOut('mobileOut'),
+                    [mediaQueryS$1]: getAnimationOut('desktopOut'),
+                } }),
+            '@keyframes mobileIn': getKeyframesMobile('in', cssVariableBottom),
+            '@keyframes mobileOut': getKeyframesMobile('out', cssVariableBottom),
+            '@keyframes desktopIn': getKeyframesDesktop('in', cssVariableTop),
+            '@keyframes desktopOut': getKeyframesDesktop('out', cssVariableTop),
+        },
+    });
 };
 
-var semiWithNl = /;\n/;
-/**
- * Naive CSS parser.
- * - Supports only rule body (no selectors)
- * - Requires semicolon and new line after the value (except of last line)
- * - No nested rules support
- */
+const groupDirectionJssStyles = {
+    column: {
+        flexFlow: 'column nowrap',
+        alignItems: 'stretch',
+    },
+    row: {
+        flexFlow: 'row wrap',
+        alignItems: 'center',
+    },
+};
+const getGroupDirectionJssStyles = (direction) => {
+    return groupDirectionJssStyles[direction];
+};
 
-var parse = function parse(cssText) {
-  var style = {};
-  var split = cssText.split(semiWithNl);
-
-  for (var i = 0; i < split.length; i++) {
-    var decl = (split[i] || '').trim();
-    if (!decl) continue;
-    var colonIndex = decl.indexOf(':');
-
-    if (colonIndex === -1) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Malformed CSS string \"" + decl + "\"") : void 0;
-      continue;
-    }
-
-    var prop = decl.substr(0, colonIndex).trim();
-    var value = decl.substr(colonIndex + 1).trim();
-    style[prop] = value;
-  }
-
-  return style;
-};
-
-var onProcessRule = function onProcessRule(rule) {
-  if (typeof rule.style === 'string') {
-    rule.style = parse(rule.style);
-  }
-};
-
-function templatePlugin() {
-  return {
-    onProcessRule: onProcessRule
-  };
-}
-
-var isObject = function isObject(obj) {
-  return obj && typeof obj === 'object' && !Array.isArray(obj);
-};
-
-var valueNs = "extendCurrValue" + Date.now();
-
-function mergeExtend(style, rule, sheet, newStyle) {
-  var extendType = typeof style.extend; // Extend using a rule name.
-
-  if (extendType === 'string') {
-    if (!sheet) return;
-    var refRule = sheet.getRule(style.extend);
-    if (!refRule) return;
-
-    if (refRule === rule) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] A rule tries to extend itself \n" + rule.toString()) : void 0;
-      return;
-    }
-
-    var parent = refRule.options.parent;
-
-    if (parent) {
-      var originalStyle = parent.rules.raw[style.extend];
-      extend(originalStyle, rule, sheet, newStyle);
-    }
-
-    return;
-  } // Extend using an array.
-
-
-  if (Array.isArray(style.extend)) {
-    for (var index = 0; index < style.extend.length; index++) {
-      var singleExtend = style.extend[index];
-      var singleStyle = typeof singleExtend === 'string' ? _extends({}, style, {
-        extend: singleExtend
-      }) : style.extend[index];
-      extend(singleStyle, rule, sheet, newStyle);
-    }
-
-    return;
-  } // Extend is a style object.
-
-
-  for (var prop in style.extend) {
-    if (prop === 'extend') {
-      extend(style.extend.extend, rule, sheet, newStyle);
-      continue;
-    }
-
-    if (isObject(style.extend[prop])) {
-      if (!(prop in newStyle)) newStyle[prop] = {};
-      extend(style.extend[prop], rule, sheet, newStyle[prop]);
-      continue;
-    }
-
-    newStyle[prop] = style.extend[prop];
-  }
-}
-
-function mergeRest(style, rule, sheet, newStyle) {
-  // Copy base style.
-  for (var prop in style) {
-    if (prop === 'extend') continue;
-
-    if (isObject(newStyle[prop]) && isObject(style[prop])) {
-      extend(style[prop], rule, sheet, newStyle[prop]);
-      continue;
-    }
-
-    if (isObject(style[prop])) {
-      newStyle[prop] = extend(style[prop], rule, sheet);
-      continue;
-    }
-
-    newStyle[prop] = style[prop];
-  }
-}
-/**
- * Recursively extend styles.
- */
-
-
-function extend(style, rule, sheet, newStyle) {
-  if (newStyle === void 0) {
-    newStyle = {};
-  }
-
-  mergeExtend(style, rule, sheet, newStyle);
-  mergeRest(style, rule, sheet, newStyle);
-  return newStyle;
-}
-/**
- * Handle `extend` property.
- */
-
-
-function jssExtend() {
-  function onProcessStyle(style, rule, sheet) {
-    if ('extend' in style) return extend(style, rule, sheet);
-    return style;
-  }
-
-  function onChangeValue(value, prop, rule) {
-    if (prop !== 'extend') return value; // Value is empty, remove properties set previously.
-
-    if (value == null || value === false) {
-      for (var key in rule[valueNs]) {
-        rule.prop(key, null);
-      }
-
-      rule[valueNs] = null;
-      return null;
-    }
-
-    if (typeof value === 'object') {
-      for (var _key in value) {
-        rule.prop(_key, value[_key]);
-      }
-
-      rule[valueNs] = value;
-    } // Make sure we don't set the value in the core.
-
-
-    return null;
-  }
-
-  return {
-    onProcessStyle: onProcessStyle,
-    onChangeValue: onChangeValue
-  };
-}
-
-/**
- * Set selector.
- *
- * @param original rule
- * @param className class string
- * @return flag indicating function was successfull or not
- */
-
-function registerClass(rule, className) {
-  // Skip falsy values
-  if (!className) return true; // Support array of class names `{composes: ['foo', 'bar']}`
-
-  if (Array.isArray(className)) {
-    for (var index = 0; index < className.length; index++) {
-      var isSetted = registerClass(rule, className[index]);
-      if (!isSetted) return false;
-    }
-
-    return true;
-  } // Support space separated class names `{composes: 'foo bar'}`
-
-
-  if (className.indexOf(' ') > -1) {
-    return registerClass(rule, className.split(' '));
-  }
-
-  var parent = rule.options.parent; // It is a ref to a local rule.
-
-  if (className[0] === '$') {
-    var refRule = parent.getRule(className.substr(1));
-
-    if (!refRule) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Referenced rule is not defined. \n" + rule.toString()) : void 0;
-      return false;
-    }
-
-    if (refRule === rule) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Cyclic composition detected. \n" + rule.toString()) : void 0;
-      return false;
-    }
-
-    parent.classes[rule.key] += " " + parent.classes[refRule.key];
-    return true;
-  }
-
-  parent.classes[rule.key] += " " + className;
-  return true;
-}
-/**
- * Convert compose property to additional class, remove property from original styles.
- */
-
-
-function jssCompose() {
-  function onProcessStyle(style, rule) {
-    if (!('composes' in style)) return style;
-    registerClass(rule, style.composes); // Remove composes property to prevent infinite loop.
-
-    delete style.composes;
-    return style;
-  }
-
-  return {
-    onProcessStyle: onProcessStyle
-  };
-}
-
-var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
-var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
-var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
-/**
- * Generated jss-plugin-default-unit CSS property units
- */
-
-var defaultUnits = {
-  // Animation properties
-  'animation-delay': ms,
-  'animation-duration': ms,
-  // Background properties
-  'background-position': px,
-  'background-position-x': px,
-  'background-position-y': px,
-  'background-size': px,
-  // Border Properties
-  border: px,
-  'border-bottom': px,
-  'border-bottom-left-radius': px,
-  'border-bottom-right-radius': px,
-  'border-bottom-width': px,
-  'border-left': px,
-  'border-left-width': px,
-  'border-radius': px,
-  'border-right': px,
-  'border-right-width': px,
-  'border-top': px,
-  'border-top-left-radius': px,
-  'border-top-right-radius': px,
-  'border-top-width': px,
-  'border-width': px,
-  'border-block': px,
-  'border-block-end': px,
-  'border-block-end-width': px,
-  'border-block-start': px,
-  'border-block-start-width': px,
-  'border-block-width': px,
-  'border-inline': px,
-  'border-inline-end': px,
-  'border-inline-end-width': px,
-  'border-inline-start': px,
-  'border-inline-start-width': px,
-  'border-inline-width': px,
-  'border-start-start-radius': px,
-  'border-start-end-radius': px,
-  'border-end-start-radius': px,
-  'border-end-end-radius': px,
-  // Margin properties
-  margin: px,
-  'margin-bottom': px,
-  'margin-left': px,
-  'margin-right': px,
-  'margin-top': px,
-  'margin-block': px,
-  'margin-block-end': px,
-  'margin-block-start': px,
-  'margin-inline': px,
-  'margin-inline-end': px,
-  'margin-inline-start': px,
-  // Padding properties
-  padding: px,
-  'padding-bottom': px,
-  'padding-left': px,
-  'padding-right': px,
-  'padding-top': px,
-  'padding-block': px,
-  'padding-block-end': px,
-  'padding-block-start': px,
-  'padding-inline': px,
-  'padding-inline-end': px,
-  'padding-inline-start': px,
-  // Mask properties
-  'mask-position-x': px,
-  'mask-position-y': px,
-  'mask-size': px,
-  // Width and height properties
-  height: px,
-  width: px,
-  'min-height': px,
-  'max-height': px,
-  'min-width': px,
-  'max-width': px,
-  // Position properties
-  bottom: px,
-  left: px,
-  top: px,
-  right: px,
-  inset: px,
-  'inset-block': px,
-  'inset-block-end': px,
-  'inset-block-start': px,
-  'inset-inline': px,
-  'inset-inline-end': px,
-  'inset-inline-start': px,
-  // Shadow properties
-  'box-shadow': px,
-  'text-shadow': px,
-  // Column properties
-  'column-gap': px,
-  'column-rule': px,
-  'column-rule-width': px,
-  'column-width': px,
-  // Font and text properties
-  'font-size': px,
-  'font-size-delta': px,
-  'letter-spacing': px,
-  'text-decoration-thickness': px,
-  'text-indent': px,
-  'text-stroke': px,
-  'text-stroke-width': px,
-  'word-spacing': px,
-  // Motion properties
-  motion: px,
-  'motion-offset': px,
-  // Outline properties
-  outline: px,
-  'outline-offset': px,
-  'outline-width': px,
-  // Perspective properties
-  perspective: px,
-  'perspective-origin-x': percent,
-  'perspective-origin-y': percent,
-  // Transform properties
-  'transform-origin': percent,
-  'transform-origin-x': percent,
-  'transform-origin-y': percent,
-  'transform-origin-z': percent,
-  // Transition properties
-  'transition-delay': ms,
-  'transition-duration': ms,
-  // Alignment properties
-  'vertical-align': px,
-  'flex-basis': px,
-  // Some random properties
-  'shape-margin': px,
-  size: px,
-  gap: px,
-  // Grid properties
-  grid: px,
-  'grid-gap': px,
-  'row-gap': px,
-  'grid-row-gap': px,
-  'grid-column-gap': px,
-  'grid-template-rows': px,
-  'grid-template-columns': px,
-  'grid-auto-rows': px,
-  'grid-auto-columns': px,
-  // Not existing properties.
-  // Used to avoid issues with jss-plugin-expand integration.
-  'box-shadow-x': px,
-  'box-shadow-y': px,
-  'box-shadow-blur': px,
-  'box-shadow-spread': px,
-  'font-line-height': px,
-  'text-shadow-x': px,
-  'text-shadow-y': px,
-  'text-shadow-blur': px
-};
-
-/**
- * Clones the object and adds a camel cased property version.
- */
-
-function addCamelCasedVersion(obj) {
-  var regExp = /(-[a-z])/g;
-
-  var replace = function replace(str) {
-    return str[1].toUpperCase();
-  };
-
-  var newObj = {};
-
-  for (var key in obj) {
-    newObj[key] = obj[key];
-    newObj[key.replace(regExp, replace)] = obj[key];
-  }
-
-  return newObj;
-}
-
-var units = addCamelCasedVersion(defaultUnits);
-/**
- * Recursive deep style passing function
- */
-
-function iterate(prop, value, options) {
-  if (value == null) return value;
-
-  if (Array.isArray(value)) {
-    for (var i = 0; i < value.length; i++) {
-      value[i] = iterate(prop, value[i], options);
-    }
-  } else if (typeof value === 'object') {
-    if (prop === 'fallbacks') {
-      for (var innerProp in value) {
-        value[innerProp] = iterate(innerProp, value[innerProp], options);
-      }
-    } else {
-      for (var _innerProp in value) {
-        value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
-      }
-    } // eslint-disable-next-line no-restricted-globals
-
-  } else if (typeof value === 'number' && isNaN(value) === false) {
-    var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.
-
-    if (unit && !(value === 0 && unit === px)) {
-      return typeof unit === 'function' ? unit(value).toString() : "" + value + unit;
-    }
-
-    return value.toString();
-  }
-
-  return value;
-}
-/**
- * Add unit to numeric values.
- */
-
-
-function defaultUnit(options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var camelCasedOptions = addCamelCasedVersion(options);
-
-  function onProcessStyle(style, rule) {
-    if (rule.type !== 'style') return style;
-
-    for (var prop in style) {
-      style[prop] = iterate(prop, style[prop], camelCasedOptions);
-    }
-
-    return style;
-  }
-
-  function onChangeValue(value, prop) {
-    return iterate(prop, value, camelCasedOptions);
-  }
-
-  return {
-    onProcessStyle: onProcessStyle,
-    onChangeValue: onChangeValue
-  };
-}
-
-/**
- * A scheme for converting properties from array to regular style.
- * All properties listed below will be transformed to a string separated by space.
- */
-var propArray = {
-  'background-size': true,
-  'background-position': true,
-  border: true,
-  'border-bottom': true,
-  'border-left': true,
-  'border-top': true,
-  'border-right': true,
-  'border-radius': true,
-  'border-image': true,
-  'border-width': true,
-  'border-style': true,
-  'border-color': true,
-  'box-shadow': true,
-  flex: true,
-  margin: true,
-  padding: true,
-  outline: true,
-  'transform-origin': true,
-  transform: true,
-  transition: true
-  /**
-   * A scheme for converting arrays to regular styles inside of objects.
-   * For e.g.: "{position: [0, 0]}" => "background-position: 0 0;".
-   */
-
-};
-var propArrayInObj = {
-  position: true,
-  // background-position
-  size: true // background-size
-
-  /**
-   * A scheme for parsing and building correct styles from passed objects.
-   */
-
-};
-var propObj = {
-  padding: {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
-  margin: {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
-  background: {
-    attachment: null,
-    color: null,
-    image: null,
-    position: null,
-    repeat: null
-  },
-  border: {
-    width: null,
-    style: null,
-    color: null
-  },
-  'border-top': {
-    width: null,
-    style: null,
-    color: null
-  },
-  'border-right': {
-    width: null,
-    style: null,
-    color: null
-  },
-  'border-bottom': {
-    width: null,
-    style: null,
-    color: null
-  },
-  'border-left': {
-    width: null,
-    style: null,
-    color: null
-  },
-  outline: {
-    width: null,
-    style: null,
-    color: null
-  },
-  'list-style': {
-    type: null,
-    position: null,
-    image: null
-  },
-  transition: {
-    property: null,
-    duration: null,
-    'timing-function': null,
-    timingFunction: null,
-    // Needed for avoiding comilation issues with jss-plugin-camel-case
-    delay: null
-  },
-  animation: {
-    name: null,
-    duration: null,
-    'timing-function': null,
-    timingFunction: null,
-    // Needed to avoid compilation issues with jss-plugin-camel-case
-    delay: null,
-    'iteration-count': null,
-    iterationCount: null,
-    // Needed to avoid compilation issues with jss-plugin-camel-case
-    direction: null,
-    'fill-mode': null,
-    fillMode: null,
-    // Needed to avoid compilation issues with jss-plugin-camel-case
-    'play-state': null,
-    playState: null // Needed to avoid compilation issues with jss-plugin-camel-case
-
-  },
-  'box-shadow': {
-    x: 0,
-    y: 0,
-    blur: 0,
-    spread: 0,
-    color: null,
-    inset: null
-  },
-  'text-shadow': {
-    x: 0,
-    y: 0,
-    blur: null,
-    color: null
-  }
-  /**
-   * A scheme for converting non-standart properties inside object.
-   * For e.g.: include 'border-radius' property inside 'border' object.
-   */
-
-};
-var customPropObj = {
-  border: {
-    radius: 'border-radius',
-    image: 'border-image',
-    width: 'border-width',
-    style: 'border-style',
-    color: 'border-color'
-  },
-  'border-bottom': {
-    width: 'border-bottom-width',
-    style: 'border-bottom-style',
-    color: 'border-bottom-color'
-  },
-  'border-top': {
-    width: 'border-top-width',
-    style: 'border-top-style',
-    color: 'border-top-color'
-  },
-  'border-left': {
-    width: 'border-left-width',
-    style: 'border-left-style',
-    color: 'border-left-color'
-  },
-  'border-right': {
-    width: 'border-right-width',
-    style: 'border-right-style',
-    color: 'border-right-color'
-  },
-  background: {
-    size: 'background-size',
-    image: 'background-image'
-  },
-  font: {
-    style: 'font-style',
-    variant: 'font-variant',
-    weight: 'font-weight',
-    stretch: 'font-stretch',
-    size: 'font-size',
-    family: 'font-family',
-    lineHeight: 'line-height',
-    // Needed to avoid compilation issues with jss-plugin-camel-case
-    'line-height': 'line-height'
-  },
-  flex: {
-    grow: 'flex-grow',
-    basis: 'flex-basis',
-    direction: 'flex-direction',
-    wrap: 'flex-wrap',
-    flow: 'flex-flow',
-    shrink: 'flex-shrink'
-  },
-  align: {
-    self: 'align-self',
-    items: 'align-items',
-    content: 'align-content'
-  },
-  grid: {
-    'template-columns': 'grid-template-columns',
-    templateColumns: 'grid-template-columns',
-    'template-rows': 'grid-template-rows',
-    templateRows: 'grid-template-rows',
-    'template-areas': 'grid-template-areas',
-    templateAreas: 'grid-template-areas',
-    template: 'grid-template',
-    'auto-columns': 'grid-auto-columns',
-    autoColumns: 'grid-auto-columns',
-    'auto-rows': 'grid-auto-rows',
-    autoRows: 'grid-auto-rows',
-    'auto-flow': 'grid-auto-flow',
-    autoFlow: 'grid-auto-flow',
-    row: 'grid-row',
-    column: 'grid-column',
-    'row-start': 'grid-row-start',
-    rowStart: 'grid-row-start',
-    'row-end': 'grid-row-end',
-    rowEnd: 'grid-row-end',
-    'column-start': 'grid-column-start',
-    columnStart: 'grid-column-start',
-    'column-end': 'grid-column-end',
-    columnEnd: 'grid-column-end',
-    area: 'grid-area',
-    gap: 'grid-gap',
-    'row-gap': 'grid-row-gap',
-    rowGap: 'grid-row-gap',
-    'column-gap': 'grid-column-gap',
-    columnGap: 'grid-column-gap'
-  }
-};
-
-/* eslint-disable no-use-before-define */
-/**
- * Map values by given prop.
- *
- * @param {Array} array of values
- * @param {String} original property
- * @param {String} original rule
- * @return {String} mapped values
- */
-
-function mapValuesByProp(value, prop, rule) {
-  return value.map(function (item) {
-    return objectToArray(item, prop, rule, false, true);
-  });
-}
-/**
- * Convert array to nested array, if needed
- */
-
-
-function processArray(value, prop, scheme, rule) {
-  if (scheme[prop] == null) return value;
-  if (value.length === 0) return [];
-  if (Array.isArray(value[0])) return processArray(value[0], prop, scheme, rule);
-
-  if (typeof value[0] === 'object') {
-    return mapValuesByProp(value, prop, rule);
-  }
-
-  return [value];
-}
-/**
- * Convert object to array.
- */
-
-
-function objectToArray(value, prop, rule, isFallback, isInArray) {
-  if (!(propObj[prop] || customPropObj[prop])) return [];
-  var result = []; // Check if exists any non-standard property
-
-  if (customPropObj[prop]) {
-    // eslint-disable-next-line no-param-reassign
-    value = customPropsToStyle(value, rule, customPropObj[prop], isFallback);
-  } // Pass throught all standart props
-
-
-  if (Object.keys(value).length) {
-    for (var baseProp in propObj[prop]) {
-      if (value[baseProp]) {
-        if (Array.isArray(value[baseProp])) {
-          result.push(propArrayInObj[baseProp] === null ? value[baseProp] : value[baseProp].join(' '));
-        } else result.push(value[baseProp]);
-
-        continue;
-      } // Add default value from props config.
-
-
-      if (propObj[prop][baseProp] != null) {
-        result.push(propObj[prop][baseProp]);
-      }
-    }
-  }
-
-  if (!result.length || isInArray) return result;
-  return [result];
-}
-/**
- * Convert custom properties values to styles adding them to rule directly
- */
-
-
-function customPropsToStyle(value, rule, customProps, isFallback) {
-  for (var prop in customProps) {
-    var propName = customProps[prop]; // If current property doesn't exist already in rule - add new one
-
-    if (typeof value[prop] !== 'undefined' && (isFallback || !rule.prop(propName))) {
-      var _styleDetector;
-
-      var appendedValue = styleDetector((_styleDetector = {}, _styleDetector[propName] = value[prop], _styleDetector), rule)[propName]; // Add style directly in rule
-
-      if (isFallback) rule.style.fallbacks[propName] = appendedValue;else rule.style[propName] = appendedValue;
-    } // Delete converted property to avoid double converting
-
-
-    delete value[prop];
-  }
-
-  return value;
-}
-/**
- * Detect if a style needs to be converted.
- */
-
-
-function styleDetector(style, rule, isFallback) {
-  for (var prop in style) {
-    var value = style[prop];
-
-    if (Array.isArray(value)) {
-      // Check double arrays to avoid recursion.
-      if (!Array.isArray(value[0])) {
-        if (prop === 'fallbacks') {
-          for (var index = 0; index < style.fallbacks.length; index++) {
-            style.fallbacks[index] = styleDetector(style.fallbacks[index], rule, true);
-          }
-
-          continue;
-        }
-
-        style[prop] = processArray(value, prop, propArray, rule); // Avoid creating properties with empty values
-
-        if (!style[prop].length) delete style[prop];
-      }
-    } else if (typeof value === 'object') {
-      if (prop === 'fallbacks') {
-        style.fallbacks = styleDetector(style.fallbacks, rule, true);
-        continue;
-      }
-
-      style[prop] = objectToArray(value, prop, rule, isFallback); // Avoid creating properties with empty values
-
-      if (!style[prop].length) delete style[prop];
-    } // Maybe a computed value resulting in an empty string
-    else if (style[prop] === '') delete style[prop];
-  }
-
-  return style;
-}
-/**
- * Adds possibility to write expanded styles.
- */
-
-
-function jssExpand() {
-  function onProcessStyle(style, rule) {
-    if (!style || rule.type !== 'style') return style;
-
-    if (Array.isArray(style)) {
-      // Pass rules one by one and reformat them
-      for (var index = 0; index < style.length; index++) {
-        style[index] = styleDetector(style[index], rule);
-      }
-
-      return style;
-    }
-
-    return styleDetector(style, rule);
-  }
-
-  return {
-    onProcessStyle: onProcessStyle
-  };
-}
-
-var cssVendor_cjs = {};
-
-var require$$0 = /*@__PURE__*/getAugmentedNamespace(module$1);
-
-var toConsumableArrayExports = {};
-var toConsumableArray = {
-  get exports(){ return toConsumableArrayExports; },
-  set exports(v){ toConsumableArrayExports = v; },
-};
-
-var arrayWithoutHolesExports = {};
-var arrayWithoutHoles = {
-  get exports(){ return arrayWithoutHolesExports; },
-  set exports(v){ arrayWithoutHolesExports = v; },
-};
-
-var arrayLikeToArrayExports = {};
-var arrayLikeToArray = {
-  get exports(){ return arrayLikeToArrayExports; },
-  set exports(v){ arrayLikeToArrayExports = v; },
-};
-
-(function (module) {
-	function _arrayLikeToArray(arr, len) {
-	  if (len == null || len > arr.length) len = arr.length;
-	  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-	  return arr2;
-	}
-	module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (arrayLikeToArray));
-
-(function (module) {
-	var arrayLikeToArray = arrayLikeToArrayExports;
-	function _arrayWithoutHoles(arr) {
-	  if (Array.isArray(arr)) return arrayLikeToArray(arr);
-	}
-	module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (arrayWithoutHoles));
-
-var iterableToArrayExports = {};
-var iterableToArray = {
-  get exports(){ return iterableToArrayExports; },
-  set exports(v){ iterableToArrayExports = v; },
-};
-
-(function (module) {
-	function _iterableToArray(iter) {
-	  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-	}
-	module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (iterableToArray));
-
-var unsupportedIterableToArrayExports = {};
-var unsupportedIterableToArray = {
-  get exports(){ return unsupportedIterableToArrayExports; },
-  set exports(v){ unsupportedIterableToArrayExports = v; },
-};
-
-(function (module) {
-	var arrayLikeToArray = arrayLikeToArrayExports;
-	function _unsupportedIterableToArray(o, minLen) {
-	  if (!o) return;
-	  if (typeof o === "string") return arrayLikeToArray(o, minLen);
-	  var n = Object.prototype.toString.call(o).slice(8, -1);
-	  if (n === "Object" && o.constructor) n = o.constructor.name;
-	  if (n === "Map" || n === "Set") return Array.from(o);
-	  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
-	}
-	module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (unsupportedIterableToArray));
-
-var nonIterableSpreadExports = {};
-var nonIterableSpread = {
-  get exports(){ return nonIterableSpreadExports; },
-  set exports(v){ nonIterableSpreadExports = v; },
-};
-
-(function (module) {
-	function _nonIterableSpread() {
-	  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-	}
-	module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (nonIterableSpread));
-
-(function (module) {
-	var arrayWithoutHoles = arrayWithoutHolesExports;
-	var iterableToArray = iterableToArrayExports;
-	var unsupportedIterableToArray = unsupportedIterableToArrayExports;
-	var nonIterableSpread = nonIterableSpreadExports;
-	function _toConsumableArray(arr) {
-	  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
-	}
-	module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (toConsumableArray));
-
-Object.defineProperty(cssVendor_cjs, '__esModule', { value: true });
-
-function _interopDefault$1 (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var isInBrowser = _interopDefault$1(require$$0);
-var _toConsumableArray = _interopDefault$1(toConsumableArrayExports);
-
-// Export javascript style and css style vendor prefixes.
-var js = '';
-var css = '';
-var vendor = '';
-var browser = '';
-var isTouch = isInBrowser && 'ontouchstart' in document.documentElement; // We should not do anything if required serverside.
-
-if (isInBrowser) {
-  // Order matters. We need to check Webkit the last one because
-  // other vendors use to add Webkit prefixes to some properties
-  var jsCssMap = {
-    Moz: '-moz-',
-    ms: '-ms-',
-    O: '-o-',
-    Webkit: '-webkit-'
-  };
-
-  var _document$createEleme = document.createElement('p'),
-      style = _document$createEleme.style;
-
-  var testProp = 'Transform';
-
-  for (var key in jsCssMap) {
-    if (key + testProp in style) {
-      js = key;
-      css = jsCssMap[key];
-      break;
-    }
-  } // Correctly detect the Edge browser.
-
-
-  if (js === 'Webkit' && 'msHyphens' in style) {
-    js = 'ms';
-    css = jsCssMap.ms;
-    browser = 'edge';
-  } // Correctly detect the Safari browser.
-
-
-  if (js === 'Webkit' && '-apple-trailing-word' in style) {
-    vendor = 'apple';
-  }
-}
-/**
- * Vendor prefix string for the current browser.
- *
- * @type {{js: String, css: String, vendor: String, browser: String}}
- * @api public
- */
-
-
-var prefix = {
-  js: js,
-  css: css,
-  vendor: vendor,
-  browser: browser,
-  isTouch: isTouch
-};
-
-/**
- * Test if a keyframe at-rule should be prefixed or not
- *
- * @param {String} vendor prefix string for the current browser.
- * @return {String}
- * @api public
- */
-
-function supportedKeyframes(key) {
-  // Keyframes is already prefixed. e.g. key = '@-webkit-keyframes a'
-  if (key[1] === '-') return key; // No need to prefix IE/Edge. Older browsers will ignore unsupported rules.
-  // https://caniuse.com/#search=keyframes
-
-  if (prefix.js === 'ms') return key;
-  return "@" + prefix.css + "keyframes" + key.substr(10);
-}
-
-// https://caniuse.com/#search=appearance
-
-var appearence = {
-  noPrefill: ['appearance'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'appearance') return false;
-    if (prefix.js === 'ms') return "-webkit-" + prop;
-    return prefix.css + prop;
-  }
-};
-
-// https://caniuse.com/#search=color-adjust
-
-var colorAdjust = {
-  noPrefill: ['color-adjust'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'color-adjust') return false;
-    if (prefix.js === 'Webkit') return prefix.css + "print-" + prop;
-    return prop;
-  }
-};
-
-var regExp = /[-\s]+(.)?/g;
-/**
- * Replaces the letter with the capital letter
- *
- * @param {String} match
- * @param {String} c
- * @return {String}
- * @api private
- */
-
-function toUpper(match, c) {
-  return c ? c.toUpperCase() : '';
-}
-/**
- * Convert dash separated strings to camel-cased.
- *
- * @param {String} str
- * @return {String}
- * @api private
- */
-
-
-function camelize(str) {
-  return str.replace(regExp, toUpper);
-}
-
-/**
- * Convert dash separated strings to pascal cased.
- *
- * @param {String} str
- * @return {String}
- * @api private
- */
-
-function pascalize(str) {
-  return camelize("-" + str);
-}
-
-// but we can use a longhand property instead.
-// https://caniuse.com/#search=mask
-
-var mask = {
-  noPrefill: ['mask'],
-  supportedProperty: function supportedProperty(prop, style) {
-    if (!/^mask/.test(prop)) return false;
-
-    if (prefix.js === 'Webkit') {
-      var longhand = 'mask-image';
-
-      if (camelize(longhand) in style) {
-        return prop;
-      }
-
-      if (prefix.js + pascalize(longhand) in style) {
-        return prefix.css + prop;
-      }
-    }
-
-    return prop;
-  }
-};
-
-// https://caniuse.com/#search=text-orientation
-
-var textOrientation = {
-  noPrefill: ['text-orientation'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'text-orientation') return false;
-
-    if (prefix.vendor === 'apple' && !prefix.isTouch) {
-      return prefix.css + prop;
-    }
-
-    return prop;
-  }
-};
-
-// https://caniuse.com/#search=transform
-
-var transform = {
-  noPrefill: ['transform'],
-  supportedProperty: function supportedProperty(prop, style, options) {
-    if (prop !== 'transform') return false;
-
-    if (options.transform) {
-      return prop;
-    }
-
-    return prefix.css + prop;
-  }
-};
-
-// https://caniuse.com/#search=transition
-
-var transition = {
-  noPrefill: ['transition'],
-  supportedProperty: function supportedProperty(prop, style, options) {
-    if (prop !== 'transition') return false;
-
-    if (options.transition) {
-      return prop;
-    }
-
-    return prefix.css + prop;
-  }
-};
-
-// https://caniuse.com/#search=writing-mode
-
-var writingMode = {
-  noPrefill: ['writing-mode'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'writing-mode') return false;
-
-    if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {
-      return prefix.css + prop;
-    }
-
-    return prop;
-  }
-};
-
-// https://caniuse.com/#search=user-select
-
-var userSelect = {
-  noPrefill: ['user-select'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'user-select') return false;
-
-    if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {
-      return prefix.css + prop;
-    }
-
-    return prop;
-  }
-};
-
-// https://caniuse.com/#search=multicolumn
-// https://github.com/postcss/autoprefixer/issues/491
-// https://github.com/postcss/autoprefixer/issues/177
-
-var breakPropsOld = {
-  supportedProperty: function supportedProperty(prop, style) {
-    if (!/^break-/.test(prop)) return false;
-
-    if (prefix.js === 'Webkit') {
-      var jsProp = "WebkitColumn" + pascalize(prop);
-      return jsProp in style ? prefix.css + "column-" + prop : false;
-    }
-
-    if (prefix.js === 'Moz') {
-      var _jsProp = "page" + pascalize(prop);
-
-      return _jsProp in style ? "page-" + prop : false;
-    }
-
-    return false;
-  }
-};
-
-// See https://github.com/postcss/autoprefixer/issues/324.
-
-var inlineLogicalOld = {
-  supportedProperty: function supportedProperty(prop, style) {
-    if (!/^(border|margin|padding)-inline/.test(prop)) return false;
-    if (prefix.js === 'Moz') return prop;
-    var newProp = prop.replace('-inline', '');
-    return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
-  }
-};
-
-// Camelization is required because we can't test using.
-// CSS syntax for e.g. in FF.
-
-var unprefixed = {
-  supportedProperty: function supportedProperty(prop, style) {
-    return camelize(prop) in style ? prop : false;
-  }
-};
-
-var prefixed = {
-  supportedProperty: function supportedProperty(prop, style) {
-    var pascalized = pascalize(prop); // Return custom CSS variable without prefixing.
-
-    if (prop[0] === '-') return prop; // Return already prefixed value without prefixing.
-
-    if (prop[0] === '-' && prop[1] === '-') return prop;
-    if (prefix.js + pascalized in style) return prefix.css + prop; // Try webkit fallback.
-
-    if (prefix.js !== 'Webkit' && "Webkit" + pascalized in style) return "-webkit-" + prop;
-    return false;
-  }
-};
-
-// https://caniuse.com/#search=scroll-snap
-
-var scrollSnap = {
-  supportedProperty: function supportedProperty(prop) {
-    if (prop.substring(0, 11) !== 'scroll-snap') return false;
-
-    if (prefix.js === 'ms') {
-      return "" + prefix.css + prop;
-    }
-
-    return prop;
-  }
-};
-
-// https://caniuse.com/#search=overscroll-behavior
-
-var overscrollBehavior = {
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'overscroll-behavior') return false;
-
-    if (prefix.js === 'ms') {
-      return prefix.css + "scroll-chaining";
-    }
-
-    return prop;
-  }
-};
-
-var propMap = {
-  'flex-grow': 'flex-positive',
-  'flex-shrink': 'flex-negative',
-  'flex-basis': 'flex-preferred-size',
-  'justify-content': 'flex-pack',
-  order: 'flex-order',
-  'align-items': 'flex-align',
-  'align-content': 'flex-line-pack' // 'align-self' is handled by 'align-self' plugin.
-
-}; // Support old flex spec from 2012.
-
-var flex2012 = {
-  supportedProperty: function supportedProperty(prop, style) {
-    var newProp = propMap[prop];
-    if (!newProp) return false;
-    return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
-  }
-};
-
-var propMap$1 = {
-  flex: 'box-flex',
-  'flex-grow': 'box-flex',
-  'flex-direction': ['box-orient', 'box-direction'],
-  order: 'box-ordinal-group',
-  'align-items': 'box-align',
-  'flex-flow': ['box-orient', 'box-direction'],
-  'justify-content': 'box-pack'
-};
-var propKeys = Object.keys(propMap$1);
-
-var prefixCss = function prefixCss(p) {
-  return prefix.css + p;
-}; // Support old flex spec from 2009.
-
-
-var flex2009 = {
-  supportedProperty: function supportedProperty(prop, style, _ref) {
-    var multiple = _ref.multiple;
-
-    if (propKeys.indexOf(prop) > -1) {
-      var newProp = propMap$1[prop];
-
-      if (!Array.isArray(newProp)) {
-        return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
-      }
-
-      if (!multiple) return false;
-
-      for (var i = 0; i < newProp.length; i++) {
-        if (!(prefix.js + pascalize(newProp[0]) in style)) {
-          return false;
-        }
-      }
-
-      return newProp.map(prefixCss);
-    }
-
-    return false;
-  }
-};
-
-// plugins = [
-//   ...plugins,
-//    breakPropsOld,
-//    inlineLogicalOld,
-//    unprefixed,
-//    prefixed,
-//    scrollSnap,
-//    flex2012,
-//    flex2009
-// ]
-// Plugins without 'noPrefill' value, going last.
-// 'flex-*' plugins should be at the bottom.
-// 'flex2009' going after 'flex2012'.
-// 'prefixed' going after 'unprefixed'
-
-var plugins = [appearence, colorAdjust, mask, textOrientation, transform, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];
-var propertyDetectors = plugins.filter(function (p) {
-  return p.supportedProperty;
-}).map(function (p) {
-  return p.supportedProperty;
-});
-var noPrefill = plugins.filter(function (p) {
-  return p.noPrefill;
-}).reduce(function (a, p) {
-  a.push.apply(a, _toConsumableArray(p.noPrefill));
-  return a;
-}, []);
-
-var el;
-var cache = {};
-
-if (isInBrowser) {
-  el = document.createElement('p'); // We test every property on vendor prefix requirement.
-  // Once tested, result is cached. It gives us up to 70% perf boost.
-  // http://jsperf.com/element-style-object-access-vs-plain-object
-  //
-  // Prefill cache with known css properties to reduce amount of
-  // properties we need to feature test at runtime.
-  // http://davidwalsh.name/vendor-prefix
-
-  var computed = window.getComputedStyle(document.documentElement, '');
-
-  for (var key$1 in computed) {
-    // eslint-disable-next-line no-restricted-globals
-    if (!isNaN(key$1)) cache[computed[key$1]] = computed[key$1];
-  } // Properties that cannot be correctly detected using the
-  // cache prefill method.
-
-
-  noPrefill.forEach(function (x) {
-    return delete cache[x];
-  });
-}
-/**
- * Test if a property is supported, returns supported property with vendor
- * prefix if required. Returns `false` if not supported.
- *
- * @param {String} prop dash separated
- * @param {Object} [options]
- * @return {String|Boolean}
- * @api public
- */
-
-
-function supportedProperty(prop, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  // For server-side rendering.
-  if (!el) return prop; // Remove cache for benchmark tests or return property from the cache.
-
-  if (process.env.NODE_ENV !== 'benchmark' && cache[prop] != null) {
-    return cache[prop];
-  } // Check if 'transition' or 'transform' natively supported in browser.
-
-
-  if (prop === 'transition' || prop === 'transform') {
-    options[prop] = prop in el.style;
-  } // Find a plugin for current prefix property.
-
-
-  for (var i = 0; i < propertyDetectors.length; i++) {
-    cache[prop] = propertyDetectors[i](prop, el.style, options); // Break loop, if value found.
-
-    if (cache[prop]) break;
-  } // Reset styles for current property.
-  // Firefox can even throw an error for invalid properties, e.g., "0".
-
-
-  try {
-    el.style[prop] = '';
-  } catch (err) {
-    return false;
-  }
-
-  return cache[prop];
-}
-
-var cache$1 = {};
-var transitionProperties = {
-  transition: 1,
-  'transition-property': 1,
-  '-webkit-transition': 1,
-  '-webkit-transition-property': 1
-};
-var transPropsRegExp = /(^\s*[\w-]+)|, (\s*[\w-]+)(?![^()]*\))/g;
-var el$1;
-/**
- * Returns prefixed value transition/transform if needed.
- *
- * @param {String} match
- * @param {String} p1
- * @param {String} p2
- * @return {String}
- * @api private
- */
-
-function prefixTransitionCallback(match, p1, p2) {
-  if (p1 === 'var') return 'var';
-  if (p1 === 'all') return 'all';
-  if (p2 === 'all') return ', all';
-  var prefixedValue = p1 ? supportedProperty(p1) : ", " + supportedProperty(p2);
-  if (!prefixedValue) return p1 || p2;
-  return prefixedValue;
-}
-
-if (isInBrowser) el$1 = document.createElement('p');
-/**
- * Returns prefixed value if needed. Returns `false` if value is not supported.
- *
- * @param {String} property
- * @param {String} value
- * @return {String|Boolean}
- * @api public
- */
-
-function supportedValue(property, value) {
-  // For server-side rendering.
-  var prefixedValue = value;
-  if (!el$1 || property === 'content') return value; // It is a string or a number as a string like '1'.
-  // We want only prefixable values here.
-  // eslint-disable-next-line no-restricted-globals
-
-  if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {
-    return prefixedValue;
-  } // Create cache key for current value.
-
-
-  var cacheKey = property + prefixedValue; // Remove cache for benchmark tests or return value from cache.
-
-  if (process.env.NODE_ENV !== 'benchmark' && cache$1[cacheKey] != null) {
-    return cache$1[cacheKey];
-  } // IE can even throw an error in some cases, for e.g. style.content = 'bar'.
-
-
-  try {
-    // Test value as it is.
-    el$1.style[property] = prefixedValue;
-  } catch (err) {
-    // Return false if value not supported.
-    cache$1[cacheKey] = false;
-    return false;
-  } // If 'transition' or 'transition-property' property.
-
-
-  if (transitionProperties[property]) {
-    prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);
-  } else if (el$1.style[property] === '') {
-    // Value with a vendor prefix.
-    prefixedValue = prefix.css + prefixedValue; // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.
-
-    if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox'; // Test prefixed value.
-
-    el$1.style[property] = prefixedValue; // Return false if value not supported.
-
-    if (el$1.style[property] === '') {
-      cache$1[cacheKey] = false;
-      return false;
-    }
-  } // Reset styles for current property.
-
-
-  el$1.style[property] = ''; // Write current value to cache.
-
-  cache$1[cacheKey] = prefixedValue;
-  return cache$1[cacheKey];
-}
-
-cssVendor_cjs.prefix = prefix;
-var supportedKeyframes_1 = cssVendor_cjs.supportedKeyframes = supportedKeyframes;
-var supportedProperty_1 = cssVendor_cjs.supportedProperty = supportedProperty;
-var supportedValue_1 = cssVendor_cjs.supportedValue = supportedValue;
-
-/**
- * Add vendor prefix to a property name when needed.
- */
-
-function jssVendorPrefixer() {
-  function onProcessRule(rule) {
-    if (rule.type === 'keyframes') {
-      var atRule = rule;
-      atRule.at = supportedKeyframes_1(atRule.at);
-    }
-  }
-
-  function prefixStyle(style) {
-    for (var prop in style) {
-      var value = style[prop];
-
-      if (prop === 'fallbacks' && Array.isArray(value)) {
-        style[prop] = value.map(prefixStyle);
-        continue;
-      }
-
-      var changeProp = false;
-      var supportedProp = supportedProperty_1(prop);
-      if (supportedProp && supportedProp !== prop) changeProp = true;
-      var changeValue = false;
-      var supportedValue$1 = supportedValue_1(supportedProp, toCssValue(value));
-      if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;
-
-      if (changeProp || changeValue) {
-        if (changeProp) delete style[prop];
-        style[supportedProp || prop] = supportedValue$1 || value;
-      }
-    }
-
-    return style;
-  }
-
-  function onProcessStyle(style, rule) {
-    if (rule.type !== 'style') return style;
-    return prefixStyle(style);
-  }
-
-  function onChangeValue(value, prop) {
-    return supportedValue_1(prop, toCssValue(value)) || value;
-  }
-
-  return {
-    onProcessRule: onProcessRule,
-    onProcessStyle: onProcessStyle,
-    onChangeValue: onChangeValue
-  };
-}
-
-/**
- * Sort props by length.
- */
-function jssPropsSort() {
-  var sort = function sort(prop0, prop1) {
-    if (prop0.length === prop1.length) {
-      return prop0 > prop1 ? 1 : -1;
-    }
-
-    return prop0.length - prop1.length;
-  };
-
-  return {
-    onProcessStyle: function onProcessStyle(style, rule) {
-      if (rule.type !== 'style') return style;
-      var newStyle = {};
-      var props = Object.keys(style).sort(sort);
-
-      for (var i = 0; i < props.length; i++) {
-        newStyle[props[i]] = style[props[i]];
-      }
-
-      return newStyle;
-    }
-  };
-}
-
-var create = function create(options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  return {
-    plugins: [functionPlugin(), observablePlugin(options.observable), templatePlugin(), jssGlobal(), jssExtend(), jssNested(), jssCompose(), camelCase(), defaultUnit(options.defaultUnit), jssExpand(), jssVendorPrefixer(), jssPropsSort()]
-  };
-};
-
-index.setup({
-    ...create(),
-    createGenerateId: () => (rule) => rule.key,
-    plugins: [...create().plugins, dist({ combineMediaQueries: true })],
-});
-
-const hasDocument = typeof document !== 'undefined';
-
-hasDocument && 'scrollBehavior' in document.documentElement.style;
-const win = typeof window !== 'undefined' ? window : {};
-win.document || { head: {} };
-(win.HTMLElement || class {
-});
-
-const isThemeDark = (theme) => {
-    return theme === 'dark';
-};
-
-const formatObjectOutput = (value) => {
-    return JSON.stringify(value)
-        .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
-        .replace(/([,:{])/g, '$1 ') // add space after following: ,:{
-        .replace(/(})/g, ' $1') // add space before following: }
-        .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
-};
-'value, ' +
-    formatObjectOutput(BREAKPOINTS.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
-
-const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-const getComponentCss$T = (size, compact, open, theme) => {
-    const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
-    const border = `1px solid ${contrastLowColor}`;
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)),
-            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', margin: '2px 0', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeight.semiBold }), buildResponsiveStyles(size, (s) => ({
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                fontSize: fontSizeText[s],
-                padding: compact ? '4px 0' : `${s === 'medium' ? '20px' : '12px'} 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': {
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                }, '&:not(:focus-visible)::before': {
-                    border: 0,
-                } }),
-        } }, (!compact && {
-        root: {
-            borderBottom: border,
-        },
-    })), { heading: {
-            margin: 0,
-            padding: 0,
-        }, icon: {
-            width: fontLineHeight,
-            height: fontLineHeight,
-            transformOrigin: '50% 50%',
-            transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
-            transition: getTransition('transform'),
-        }, collapsible: Object.assign({ padding: 0, overflow: 'hidden' }, (open
-            ? {
-                height: 'auto',
-                paddingBottom: compact ? spacingStaticSmall : '24px',
-                visibility: 'visible',
-                transition: getTransition('height') + `,visibility ${transitionDuration}`,
-                animation: `$open ${transitionDuration} ease forwards`,
-            }
-            : {
-                height: 0,
-                visibility: 'hidden',
-                transition: getTransition('height') + `,visibility ${transitionDuration} linear ${transitionDuration}`,
-            })), 
-        // TODO: this doesn't get shortened and results in `keyframes-open` for some unknown reason
-        '@keyframes open': {
-            '0%,99%': {
-                overflow: 'hidden',
-            },
-            '100%': {
-                overflow: 'visible',
-            },
-        } }));
-};
-
-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 {
-        animation: `${duration} $${keyframesName} ${easeInQuad} forwards`,
-    };
-};
-const getAnimationOut = (keyframesName) => ({
-    animation: addImportantToRule(`${ANIMATION_DURATION}ms $${keyframesName} ${easeOutQuad} forwards`),
-});
-const getKeyframes = (direction, outsideStyle) => {
-    const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
-    return direction === 'in'
-        ? {
-            from: outsideStyle,
-            to: insideStyle,
-        }
-        : {
-            from: insideStyle,
-            to: outsideStyle,
-        };
-};
-const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
-    opacity: 0,
-    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 mediaQueryS$1 = getMediaQueryMin('s');
-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) => {
-    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),
-                }, '&(.banner--close)': {
-                    [mediaQueryBase]: 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),
-        },
-        root: getBoxShadow(),
-    });
-};
-
-const getDirectionJssStyle = (direction) => {
-    const style = {
-        column: {
-            flexFlow: 'column nowrap',
-            alignItems: 'stretch',
-        },
-        row: {
-            flexFlow: 'row wrap',
-            alignItems: 'center',
-        },
-    };
-    return style[direction];
-};
-const getComponentCss$R = (direction) => {
+const getComponentCss$U = (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)),
         },
     });
 };
 
 const fontSizeTextMap = {
+    'xx-small': fontSizeTextXXSmall,
     'x-small': fontSizeTextXSmall,
     small: fontSizeTextSmall,
     medium: fontSizeTextMedium,
@@ -6015,7 +4160,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';
@@ -6023,7 +4168,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     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' }, (!responsiveStretch && { verticalAlign: 'top' }))))),
+            ':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',
@@ -6042,42 +4187,147 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             '&: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,
+        })), label: {
+            position: 'relative', // needed for hover state when icon="none" is set
+        } }, (hasIcon && {
+        icon: {
+            position: 'relative',
+            flexShrink: '0',
+            width: fontLineHeight,
+            height: fontLineHeight,
+        },
+        label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+            order: alignLabelValue === 'left' ? -1 : 0,
+        }))),
+    }));
+};
+
+const getComponentCss$T = (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',
+            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,
+        },
+    }))));
+};
+
+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)',
+            },
         },
-        label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
-            order: alignLabelValue === 'left' ? -1 : 0,
+    };
+};
+
+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$Q = (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',
-            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,
-        },
-    }))));
+const getComponentCss$S = (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');
@@ -6108,7 +4358,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
     return Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'inline-block', verticalAlign: 'top', outline: 0 }, hostHiddenStyles)),
+            ':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',
@@ -6155,7 +4405,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$P = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$R = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
@@ -6190,33 +4440,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, disablePagination, alignHeader, theme) => {
+const getComponentCss$Q = (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({
@@ -6230,11 +4462,16 @@ const getComponentCss$O = (width, disablePagination, 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',
@@ -6247,9 +4484,18 @@ const getComponentCss$O = (width, disablePagination, 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',
@@ -6257,9 +4503,9 @@ const getComponentCss$O = (width, disablePagination, alignHeader, theme) => {
             '&__list': Object.assign({ display: 'flex', height: '100%' }, getBackfaceVisibilityJssStyle()),
             '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)' }),
             '&__sr': getScreenReaderOnlyJssStyle(), // appears in the DOM when sliding
-        } }, (!disablePagination && {
-        pagination: Object.assign(Object.assign({}, buildResponsiveStyles(disablePagination, (disablePaginationValue) => ({
-            display: disablePaginationValue ? 'none' : 'flex',
+        } }, (hasPagination && {
+        pagination: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
+            display: hasPaginationValue ? 'flex' : 'none',
         }))), { justifyContent: 'center', gap: spacingStaticSmall }),
         bullet: {
             borderRadius: borderRadiusSmall,
@@ -6352,7 +4598,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$P = (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), {
@@ -6372,39 +4618,34 @@ const getComponentCss$N = (hideLabel, state, isDisabled, theme) => {
     }));
 };
 
-const getComponentCss$M = (width) => {
+const widthMap = {
+    narrow: gridNarrowOffset,
+    basic: gridBasicOffset,
+    extended: gridExtendedOffset,
+};
+const getComponentCss$O = (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,
-        brand: primaryColor,
-        default: primaryColor,
-        'contrast-low': contrastLowColor,
-        'neutral-contrast-low': contrastLowColor,
-        'contrast-medium': contrastMediumColor,
-        'neutral-contrast-medium': contrastMediumColor,
-        'contrast-high': contrastHighColor,
-        'neutral-contrast-high': contrastHighColor,
-        'notification-success': successColor,
-        'notification-warning': warningColor,
-        'notification-error': errorColor,
-        'notification-info': infoColor,
-        'notification-neutral': infoColor,
-        inherit: 'currentColor',
-    };
-    return colorMap[textColor];
-};
-
 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%',
@@ -6433,11 +4674,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$N = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6446,17 +4688,14 @@ 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$M = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const colorMap = {
-        'neutral-contrast-low': contrastLowColor,
-        'neutral-contrast-medium': contrastMediumColor,
-        'neutral-contrast-high': contrastHighColor,
         'contrast-low': contrastLowColor,
         'contrast-medium': contrastMediumColor,
         'contrast-high': contrastHighColor,
@@ -6469,7 +4708,21 @@ const getComponentCss$K = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$J = (state, labelSize, hasLabel, theme) => {
+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,
+                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$K = (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,
@@ -6493,7 +4746,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$I = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$J = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
@@ -6511,7 +4764,7 @@ const getComponentCss$I = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$H = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$I = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
@@ -6533,7 +4786,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$H = (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) => ({
@@ -6547,7 +4800,7 @@ const getComponentCss$G = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$F = (direction, wrap) => {
+const getComponentCss$G = (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 }))))),
@@ -6555,15 +4808,14 @@ const getComponentCss$F = (direction, wrap) => {
     });
 };
 
-const sizeMap$4 = {
+const sizeMap$3 = {
     small: fontSizeHeadingSmall,
     medium: fontSizeHeadingMedium,
     large: fontSizeHeadingLarge,
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
-    'xxx-large': fontSizeHeadingXXXLarge,
 };
-const getComponentCss$E = (size, align, color, ellipsis, theme) => {
+const getComponentCss$F = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6572,7 +4824,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),
     });
 };
@@ -6605,6 +4857,7 @@ const getHeadlineVariantJssStyle = (variant) => {
         }));
 };
 const textSizeMap = {
+    'xx-small': fontSizeTextXXSmall,
     'x-small': fontSizeTextXSmall,
     small: fontSizeTextSmall,
     medium: fontSizeTextMedium,
@@ -6616,7 +4869,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$D = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$E = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6630,64 +4883,57 @@ const getComponentCss$D = (variant, align, color, ellipsis, theme) => {
     });
 };
 
-const sizeMap$3 = {
+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 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 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([44, 100, 492, 195, 86, 221]);
+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([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 sizeMap$2 = {
+    'xx-small': fontSizeTextXXSmall,
     'x-small': fontSizeTextXSmall,
     small: fontSizeTextSmall,
     medium: fontSizeTextMedium,
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-// TODO, use Tuple to reduce chunk size
-const filterLightPrimary$1 = 'invert(3%) sepia(7%) saturate(2930%) hue-rotate(188deg) brightness(91%) contrast(103%)';
-const filterLightContrastLow$1 = 'invert(93%) sepia(11%) saturate(36%) hue-rotate(201deg) brightness(89%) contrast(102%)';
-const filterLightContrastMedium$1 = 'invert(65%) sepia(6%) saturate(119%) hue-rotate(187deg) brightness(90%) contrast(92%)';
-const filterLightContrastHigh$1 = 'invert(40%) sepia(2%) saturate(686%) hue-rotate(187deg) brightness(80%) contrast(94%)';
-const filterLightNotificationSuccess = 'invert(62%) sepia(61%) saturate(551%) hue-rotate(86deg) brightness(86%) contrast(80%)';
-const filterLightNotificationWarning = 'invert(74%) sepia(91%) saturate(343%) hue-rotate(348deg) brightness(92%) contrast(86%)';
-const filterLightNotificationError = 'invert(25%) sepia(62%) saturate(2003%) hue-rotate(335deg) brightness(100%) contrast(97%)';
-const filterLightNotificationInfo = 'invert(31%) sepia(32%) saturate(5493%) hue-rotate(216deg) brightness(90%) contrast(107%)';
-const filterDarkPrimary$1 = 'invert(97%) sepia(55%) saturate(2840%) hue-rotate(180deg) brightness(114%) contrast(103%)';
-const filterDarkContrastLow$1 = 'invert(20%) sepia(7%) saturate(421%) hue-rotate(202deg) brightness(97%) contrast(82%)';
-const filterDarkContrastMedium$1 = 'invert(54%) sepia(4%) saturate(229%) hue-rotate(187deg) brightness(91%) contrast(84%)';
-const filterDarkContrastHigh$1 = 'invert(68%) sepia(6%) saturate(108%) hue-rotate(187deg) brightness(104%) contrast(88%)';
-const filterDarkNotificationSuccess = 'invert(59%) sepia(22%) saturate(1342%) hue-rotate(86deg) brightness(96%) contrast(88%)';
-const filterDarkNotificationWarning = 'invert(72%) sepia(94%) saturate(303%) hue-rotate(354deg) brightness(89%) contrast(94%)';
-const filterDarkNotificationError = 'invert(28%) sepia(34%) saturate(3133%) hue-rotate(333deg) brightness(95%) contrast(100%)';
-const filterDarkNotificationInfo = 'invert(31%) sepia(32%) saturate(5493%) hue-rotate(216deg) brightness(90%) contrast(107%)';
 const filter = {
     light: {
-        primary: filterLightPrimary$1,
-        brand: filterLightPrimary$1,
-        default: filterLightPrimary$1,
-        disabled: filterLightContrastMedium$1,
-        'contrast-low': filterLightContrastLow$1,
-        'neutral-contrast-low': filterLightContrastLow$1,
-        'contrast-medium': filterLightContrastMedium$1,
-        'neutral-contrast-medium': filterLightContrastMedium$1,
-        'contrast-high': filterLightContrastHigh$1,
-        'neutral-contrast-high': filterLightContrastHigh$1,
+        primary: filterLightPrimary,
+        'state-disabled': filterLightContrastMedium,
+        'contrast-low': filterLightContrastLow,
+        'contrast-medium': filterLightContrastMedium,
+        'contrast-high': filterLightContrastHigh,
         'notification-success': filterLightNotificationSuccess,
         'notification-warning': filterLightNotificationWarning,
         'notification-error': filterLightNotificationError,
         'notification-info': filterLightNotificationInfo,
-        'notification-neutral': filterLightNotificationInfo, // deprecated
     },
     dark: {
-        primary: filterDarkPrimary$1,
-        brand: filterDarkPrimary$1,
-        default: filterDarkPrimary$1,
-        disabled: filterDarkContrastMedium$1,
-        'contrast-low': filterDarkContrastLow$1,
-        'neutral-contrast-low': filterDarkContrastLow$1,
-        'contrast-medium': filterDarkContrastMedium$1,
-        'neutral-contrast-medium': filterDarkContrastMedium$1,
-        'contrast-high': filterDarkContrastHigh$1,
-        'neutral-contrast-high': filterDarkContrastHigh$1,
+        primary: filterDarkPrimary,
+        'state-disabled': filterDarkContrastMedium,
+        'contrast-low': filterDarkContrastLow,
+        'contrast-medium': filterDarkContrastMedium,
+        'contrast-high': filterDarkContrastHigh,
         'notification-success': filterDarkNotificationSuccess,
         'notification-warning': filterDarkNotificationWarning,
         'notification-error': filterDarkNotificationError,
         'notification-info': filterDarkNotificationInfo,
-        'notification-neutral': filterDarkNotificationInfo, // deprecated
     },
 };
 const forceRerenderAnimationStyle = {
@@ -6700,13 +4946,14 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$C = (color, size, theme) => {
+const getComponentCss$D = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     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 }, (!isColorInherit && {
                 filter: filter[theme][color],
-                WebkitAnimation: `${theme === 'light' ? keyFramesLight : keyFramesDark} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically.
+                WebkitAnimation: `${isDark ? keyFramesDark : keyFramesLight} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically.
             })), (isSizeInherit
                 ? {
                     width: size,
@@ -6715,9 +4962,9 @@ const getComponentCss$C = (color, size, theme) => {
                 : {
                     width: fontLineHeight,
                     height: fontLineHeight,
-                    font: `${sizeMap$3[size]} ${fontFamily}`,
+                    font: `${sizeMap$2[size]} ${fontFamily}`,
                 })) }, (!isColorInherit && {
-            [`@keyframes ${isThemeDark(theme) ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
+            [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
         })),
     });
 };
@@ -6766,7 +5013,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$B = (state, hasAction, hasClose, theme) => {
+const getComponentCss$C = (state, hasAction, hasClose, theme) => {
     return getCss(Object.assign({ '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({}, getNotificationRootJssStyle(state, hasAction, hasClose, theme)), hostHiddenStyles)),
             h5: headingSmallStyle,
@@ -6784,18 +5031,13 @@ const getComponentCss$B = (state, hasAction, hasClose, theme) => {
     })));
 };
 
-const getComponentCss$A = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$B = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), Object.assign(Object.assign({}, (hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
-                '&(a)': {
-                    outline: 0,
-                    textDecoration: underline ? 'underline' : 'none',
-                    font: 'inherit',
-                    color: 'inherit',
-                },
+                '&(a)': Object.assign(Object.assign({}, getResetInitialStylesForSlottedAnchor), { outline: 0, 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)
@@ -6816,17 +5058,12 @@ const getComponentCss$A = (icon, iconSource, active, stretch, size, hideLabel, a
         } })));
 };
 
-const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$A = (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({
             '::slotted': {
-                '&(a)': {
-                    outline: 0,
-                    textDecoration: 'none',
-                    font: 'inherit',
-                    color: 'inherit',
-                },
+                '&(a)': Object.assign(Object.assign({}, getResetInitialStylesForSlottedAnchor), { outline: 0, 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)
@@ -6846,91 +5083,27 @@ const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }))));
 };
 
-const fontWeightMap = {
-    thin: fontWeightRegular,
-    regular: fontWeightRegular,
-    semibold: fontWeightSemiBold$1,
-    '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) => {
-    const gradient = 'rgba(31,31,31,0.9) 0%,' +
-        'rgba(31,31,31,0.9) 20%,' +
-        'rgba(31,31,31,0.852589) 26.67%,' +
-        'rgba(32,32,32,0.768225) 33.33%,' +
-        'rgba(33,33,33,0.668116) 40%,' +
-        'rgba(34,34,34,0.557309) 46.67%,' +
-        'rgba(35,35,35,0.442691) 53.33%,' +
-        'rgba(36,36,36,0.331884) 60%,' +
-        'rgba(37,37,37,0.231775) 66.67%,' +
-        'rgba(38,38,38,0.147411) 73.33%,' +
-        'rgba(39,39,39,0.0816599) 80%,' +
-        'rgba(39,39,39,0.03551) 86.67%,' +
-        'rgba(39,39,39,0.0086472) 93.33%,' +
-        'rgba(39,39,39,0)';
-    return isCompact && isTopAligned
-        ? `linear-gradient(${gradient} 100%);`
-        : `linear-gradient(to top, ${gradient} 100%);`;
-};
-const sizeMap$2 = {
-    inherit: {
-        fontSize: 'inherit',
-    },
-    default: { fontSize: '1.25rem' },
+const getComponentCss$z = (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';
-    const paddingSizeXS = pxToRemWithUnit(24);
-    const gradientPadding = pxToRemWithUnit(72);
-    return getCss({
-        '@global': Object.assign(Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ height: 'fit-content' }, hostHiddenStyles))) }, addImportantToEachRule({
-            '::slotted(picture),::slotted(img)': Object.assign({ transition: getTransition('transform') }, getBackfaceVisibilityJssStyle()),
-            '::slotted(picture)': Object.assign({ position: 'absolute' }, getInsetJssStyle()),
-            '::slotted(img)': {
-                height: '100%',
-                width: '100%',
-                objectFit: 'cover',
-            },
-        })), { p: Object.assign(Object.assign(Object.assign({ color: getThemedTypographyColor('dark', 'primary') }, textSmallStyle), { maxWidth: pxToRemWithUnit(550), margin: 0 }), mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$2[s]), buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(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(Object.assign({ position: 'absolute' }, getInsetJssStyle()), { overflow: 'hidden' }),
-        content: Object.assign(Object.assign(Object.assign({ position: 'absolute' }, (isTopAligned ? { top: 0 } : { bottom: 0 })), { left: 0, right: 0, display: 'grid', justifyItems: 'start', padding: align === 'bottom'
-                ? `${gradientPadding} ${paddingSizeXS} ${paddingSizeXS}`
-                : `${paddingSizeXS} ${paddingSizeXS} ${gradientPadding}`, gap: pxToRemWithUnit(24) }), mergeDeep({
-            [getMediaQueryMin('s')]: Object.assign({ paddingLeft: pxToRemWithUnit(32), paddingRight: pxToRemWithUnit(32) }, (align === 'bottom' ? { paddingBottom: pxToRemWithUnit(32) } : { paddingTop: pxToRemWithUnit(32) })),
-        }, hasGradient &&
-            buildResponsiveStyles(compact, (isCompact) => ({
-                background: getGradientBackground(isCompact, isTopAligned),
-            })), buildResponsiveStyles(compact, (isCompact) => isCompact
-            ? Object.assign({ alignItems: 'center', gridTemplateColumns: `auto ${pxToRemWithUnit(24)}`, gridTemplateRows: 'auto' }, (isTopAligned ? { top: 0 } : { bottom: 0 })) : { gridTemplateRows: 'auto auto', gridTemplateColumns: 'auto' }))),
-        'link-pure': buildResponsiveStyles(compact, (isCompact) => ({
-            display: isCompact ? 'inline-block' : 'none',
-        })),
-        link: Object.assign({ minHeight: '3rem' }, buildResponsiveStyles(compact, (isCompact) => ({ display: isCompact ? 'none' : 'inline-flex' }))),
-        // Due to position absolut on .content, position fixed is used to expand the clickable area of the anchor onto the whole link-tile
-        anchor: {
-            '&::after': Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()),
-        },
-    });
+
+const getComponentCss$y = (...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 = {
@@ -6978,10 +5151,10 @@ const getFullscreenJssStyles = (fullscreen) => {
             borderRadius: 0,
         }
         : {
-            minWidth: pxToRemWithUnit(275.2),
-            maxWidth: pxToRemWithUnit(1536),
+            minWidth: '276px',
+            maxWidth: '1535.5px',
             minHeight: 'auto',
-            margin: `max(16px, 7vh) ${gridSafeZoneBase}`,
+            margin: `clamp(16px, 7vh, 192px) ${gridExtendedOffsetBase}`,
             borderRadius: borderRadiusMedium,
         };
 };
@@ -6997,7 +5170,7 @@ const isFullscreenForXl = (fullscreen) => {
         return BREAKPOINTS.indexOf(lastTrueBreakpoint) > BREAKPOINTS.indexOf(lastFalseBreakpoint);
     }
 };
-const getSlottedJssStyle = (marginValue, hasHeader, disableCloseButton) => {
+const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
     const marginPx = `${-marginValue}px`;
     const marginRem = pxToRemWithUnit(-marginValue);
     return Object.assign(Object.assign({ [`&(.${stretchToFullModalWidthClassName})`]: {
@@ -7005,13 +5178,13 @@ const getSlottedJssStyle = (marginValue, hasHeader, disableCloseButton) => {
             margin: `0 ${marginPx}`,
         } }, (!hasHeader && {
         [`&(.${stretchToFullModalWidthClassName}:first-child)`]: {
-            marginTop: !disableCloseButton ? marginRem : marginPx,
+            marginTop: hasDismissButton ? marginRem : marginPx,
         },
     })), { [`&(.${stretchToFullModalWidthClassName}:last-child)`]: {
             marginBottom: marginPx,
         } });
 };
-const getComponentCss$w = (open, fullscreen, disableCloseButton, hasHeader) => {
+const getComponentCss$w = (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
@@ -7024,8 +5197,8 @@ const getComponentCss$w = (open, fullscreen, disableCloseButton, hasHeader) => {
                     visibility: 'hidden',
                 })), hostHiddenStyles), { 
                 // workaround via pseudo element to fix stacking (black) background in safari
-                '&::before': Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading }), frostedGlassStyle) }))), { overflowY: 'auto' }),
-            '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, disableCloseButton), buildResponsiveStyles(fullscreen, (fullscreenValue) => ({
+                '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading }), frostedGlassStyle), { pointerEvents: 'none' }) }))), { overflowY: 'auto' }),
+            '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(fullscreen, (fullscreenValue) => ({
                 [`&(.${stretchToFullModalWidthClassName}`]: {
                     '&:first-child)': {
                         borderRadius: fullscreenValue ? 0 : '8px 8px 0 0',
@@ -7041,44 +5214,30 @@ const getComponentCss$w = (open, fullscreen, disableCloseButton, hasHeader) => {
             boxSizing: 'border-box',
             transition: `transform .6s ${transitionTimingFunction}`,
             transform: open ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)',
-            padding: !disableCloseButton ? `${pxToRemWithUnit(32)} 32px 32px 32px` : '32px',
-            backgroundColor,
+            padding: hasDismissButton ? `${pxToRemWithUnit(32)} 32px 32px 32px` : '32px',
+            background: backgroundColor,
             outline: 0,
-            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid` }, buildResponsiveStyles(fullscreen, (fullscreenValue) => (Object.assign({ borderRadius: fullscreenValue ? 0 : '12px', borderColor: fullscreenValue ? lightThemePrimaryColor : darkThemePrimaryColor }, getInsetJssStyle(fullscreenValue ? 0 : -4))))),
+            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid`, pointerEvents: 'none' }, buildResponsiveStyles(fullscreen, (fullscreenValue) => (Object.assign({ 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) ${gridSafeZoneBase}`,
+                margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridExtendedOffsetBase}`,
             },
         }, buildResponsiveStyles(fullscreen, getFullscreenJssStyles)) }, (hasHeader && {
         header: {
             padding: '0 0 8px',
         },
-    })), { close: {
-            position: 'absolute',
-            top: '8px',
-            right: '8px',
-            border: `2px solid ${backgroundColor}`,
-            borderRadius: '4px',
-            backgroundColor,
+    })), (hasDismissButton && {
+        dismiss: Object.assign({ position: 'absolute', top: '8px', right: '8px', border: `2px solid ${backgroundColor}`, borderRadius: '4px', background: backgroundColor }, hoverMediaQuery({
             '&:hover': {
-                backgroundColor: 'transparent',
+                background: 'transparent',
                 borderColor: 'transparent',
             },
-        } }));
+        })),
+    })));
 };
 
-const toFilter = (values) => `invert(${values[0]}%) sepia(${values[1]}%) saturate(${values[2]}%) hue-rotate(${values[3]}deg) brightness(${values[4]}%) contrast(${values[5]}%)`;
-// copied from icon-styles
-const filterLightPrimary = toFilter([3, 7, 2930, 188, 91, 103]);
-const filterLightContrastLow = toFilter([93, 11, 36, 201, 89, 102]);
-const filterLightContrastMedium = toFilter([65, 6, 119, 187, 90, 92]);
-const filterLightContrastHigh = toFilter([40, 2, 686, 187, 80, 94]);
-const filterDarkPrimary = toFilter([97, 55, 2840, 180, 114, 103]);
-const filterDarkContrastLow = toFilter([20, 7, 421, 202, 97, 82]);
-const filterDarkContrastMedium = toFilter([54, 4, 229, 187, 91, 84]);
-const filterDarkContrastHigh = toFilter([68, 6, 108, 187, 104, 88]);
 const colorToFilterMap = {
     light: {
         primary: filterLightPrimary,
@@ -7297,12 +5456,12 @@ const getComponentCss$s = (hideLabel, state, isDisabled, theme) => {
 
 const gradientColorMap = {
     light: {
-        default: '255,255,255',
-        surface: '238,239,242',
+        'background-base': '255,255,255',
+        'background-surface': '238,239,242',
     },
     dark: {
-        default: '14,14,18',
-        surface: '33,34,37',
+        'background-base': '14,14,18',
+        'background-surface': '33,34,37',
     },
 };
 const getGradient = (theme, gradientColorTheme) => {
@@ -7312,17 +5471,17 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrollIndicatorPosition, theme) => {
+const getComponentCss$r = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const { backgroundColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
     const isDarkTheme = isThemeDark(theme);
     const backgroundColorMap = {
         dark: {
-            default: backgroundSurfaceColor,
-            surface: backgroundColor,
+            'background-base': backgroundSurfaceColor,
+            'background-surface': backgroundColor,
         },
         light: {
-            default: backgroundColor,
-            surface: backgroundSurfaceColor,
+            'background-base': backgroundColor,
+            'background-surface': backgroundSurfaceColor,
         },
     };
     const actionPrevNextStyles = {
@@ -7335,7 +5494,7 @@ const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrol
     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][gradientColorTheme], borderRadius: borderRadiusSmall }), frostedGlassStyle), { visibility: 'hidden' }), (!isDarkTheme && dropShadowLowStyle)), hoverMediaQuery({
+            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 }),
             })),
@@ -7346,16 +5505,14 @@ const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrol
             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': {
@@ -7386,10 +5543,10 @@ const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrol
                 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, gradientColorTheme)} 100%)`, visibility: isPrevHidden ? 'hidden' : 'visible', '& button': Object.assign({ marginLeft: '8px' }, hoverMediaQuery({
+        '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, gradientColorTheme)} 100%)`, visibility: isNextHidden ? 'hidden' : 'visible', '& button': Object.assign({ marginRight: '8px' }, hoverMediaQuery({
+        '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',
             })) }),
     });
@@ -7452,7 +5609,9 @@ const getComponentCss$p = (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: '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 + 10px'), textIndent: 0, color: primaryColor, transition: ['color', 'border-color', 'background-color'].map(getTransition).join() }, additionalDefaultJssStyle) }, hoverMediaQuery({
+    return Object.assign(Object.assign(Object.assign({ [`::slotted(${child})`]: Object.assign({ 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,
@@ -7594,6 +5753,7 @@ const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
     const svgCirclePath = `<circle fill="${isStateCurrent ? primaryColor : 'none'}"${isStateCurrent ? '' : ` stroke="${fillColor}"`} stroke-width="1px" cx="12" cy="12" r="9"/>`;
     // Full SVG is provided by design (./numbers_raw.svg), created with illustrator and optimized with ImageOptim.
     // The optimized file can be found in ./numbers_optim.svg.
+    // TODO: could certainly be optimized size wise by exporting icons larger and having less decimals
     const svgNumberedCirclePaths = [
         `${svgCirclePath}<path fill="${fillColor}" d="m12.33 8.67-2.43.91v-.94l2.6-1.03h.85v8.78h-1.02z"/>`,
         `${svgCirclePath}<path fill="${fillColor}" d="m9.46 15.58c0-1.35.73-2.07 1.7-2.72l.95-.63c.78-.52 1.57-1.05 1.57-2.24 0-1.12-.62-1.58-1.7-1.58s-1.68.48-1.78 1.97h-.96c.06-1.82.78-2.91 2.74-2.91s2.72.92 2.72 2.52-.92 2.23-1.79 2.8l-.95.63c-1.11.75-1.52 1.18-1.52 2.01v.16h4.17v.81h-5.15v-.81z"/>`,
@@ -7635,7 +5795,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 && {
@@ -7677,7 +5837,7 @@ const getComponentCss$j = (alignLabel, hideLabel, stretch, checked, disabled, lo
     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' }, (!stretchValue && { verticalAlign: 'top' })))))),
+            ':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) &&
@@ -7737,7 +5897,7 @@ const getComponentCss$i = () => {
 const getComponentCss$h = (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' }),
         },
     });
 };
@@ -7747,31 +5907,76 @@ const isSortable = (active, direction) => {
     return active !== undefined && direction !== undefined;
 };
 
-const { contrastMediumColor, primaryColor: primaryColor$1 } = getThemedColors('light');
-const { semiBold: fontWeightSemiBold } = fontWeight;
-const getComponentCss$g = (active, direction, hideLabel, multiline) => {
+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$g = (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$f = (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})`,
         },
     })));
 };
 
-const getComponentCss$f = () => {
+const getComponentCss$e = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'table-row' }, hostHiddenStyles)),
@@ -7779,79 +5984,27 @@ const getComponentCss$f = () => {
     });
 };
 
-const getComponentCss$e = () => {
+const getComponentCss$d = () => {
     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)),
         },
     });
 };
 
-const getComponentCss$d = () => {
+const getComponentCss$c = () => {
     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) => {
@@ -7862,35 +6015,9 @@ const getComponentCss$b = (size, weight, theme) => {
                 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])')]: {
-                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({
+            [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({
+                })) }) }, 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
@@ -7907,7 +6034,7 @@ const getComponentCss$b = (size, weight, theme) => {
             display: 'block',
             position: 'absolute',
             width: 0,
-            height: weight === 'semibold' ? '2px' : '1.5px',
+            height: weight === 'semi-bold' ? '2px' : '1.5px',
             left: 0,
             bottom: '-4px',
             background: primaryColor,
@@ -7920,10 +6047,10 @@ const getComponentCss$b = (size, weight, theme) => {
 };
 
 const getComponentCss$a = (theme) => {
-    const { focusColor } = getThemedColors(theme);
+    const { primaryColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'block', position: 'relative' }, hostHiddenStyles), { outline: 0, '&::before': Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), '&(:focus)::before': {
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'block', position: 'relative', color: primaryColor }, hostHiddenStyles), { outline: 0, '&::before': Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), '&(:focus)::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
                     borderRadius: borderRadiusSmall,
                 }, '&(:focus:not(:focus-visible))::before': {
@@ -7954,16 +6081,13 @@ const getTagFocusJssStyle = (themedColors) => {
 };
 const getThemedBackgroundColor = (tagColor, themedColors) => {
     const colorMap = {
-        'background-default': themedColors.backgroundColor,
         'background-base': themedColors.backgroundColor,
         'background-surface': themedColors.backgroundSurfaceColor,
-        'neutral-contrast-high': themedColors.primaryColor,
         primary: themedColors.primaryColor,
-        'notification-neutral': themedColors.infoSoftColor,
-        'notification-info': themedColors.infoSoftColor,
-        'notification-success': themedColors.successSoftColor,
-        'notification-error': themedColors.errorSoftColor,
-        'notification-warning': themedColors.warningSoftColor,
+        'notification-info-soft': themedColors.infoSoftColor,
+        'notification-warning-soft': themedColors.warningSoftColor,
+        'notification-success-soft': themedColors.successSoftColor,
+        'notification-error-soft': themedColors.errorSoftColor,
     };
     return colorMap[tagColor];
 };
@@ -7994,45 +6118,26 @@ const getComponentCss$8 = (color, hasLabel, theme) => {
         }, 'sr-only': getScreenReaderOnlyJssStyle() }));
 };
 
-const hasInvertedThemeColor = (tagColor, theme) => {
-    const isDark = isThemeDark(theme);
-    return ((!isDark && (tagColor === 'neutral-contrast-high' || tagColor === 'primary')) || // 'neutral-contrast-high' is deprecated (replaced with 'primary')
-        (isDark &&
-            tagColor !== 'background-surface' &&
-            tagColor !== 'background-default' && // 'background-default' is deprecated (replaced with 'background-base')
-            tagColor !== 'background-base' &&
-            tagColor !== 'notification-neutral' && // 'notification-neutral' is deprecated (replaced with 'notification-info')
-            tagColor !== 'notification-info' &&
-            tagColor !== 'notification-warning' &&
-            tagColor !== 'notification-success' &&
-            tagColor !== 'notification-error'));
-};
 const getThemedBackgroundHoverColor = (tagColor, themedColors, theme) => {
     const isDark = isThemeDark(theme);
-    const keySuffix = isDark ? 'ColorLighten' : 'ColorDarken';
-    const primaryColor = isDark ? themedColors.contrastHighColorLighten : themedColors.contrastHighColor;
+    const keySuffix = isDark ? 'Lighten' : 'Darken';
     const colorMap = {
-        'background-default': themedColors[`background${keySuffix}`],
-        'background-base': themedColors[`background${keySuffix}`],
-        'background-surface': themedColors[`backgroundSurface${keySuffix}`],
-        'neutral-contrast-high': primaryColor,
-        primary: primaryColor,
-        'notification-neutral': themedColors[`infoSoft${keySuffix}`],
-        'notification-info': themedColors[`infoSoft${keySuffix}`],
-        'notification-success': themedColors[`successSoft${keySuffix}`],
-        'notification-error': themedColors[`errorSoft${keySuffix}`],
-        'notification-warning': themedColors[`warningSoft${keySuffix}`],
+        'background-base': themedColors[`backgroundColor${keySuffix}`],
+        'background-surface': themedColors[`backgroundSurfaceColor${keySuffix}`],
+        primary: isDark ? themedColors.contrastHighColorLighten : themedColors.contrastHighColor,
+        'notification-info-soft': themedColors[`infoSoftColor${keySuffix}`],
+        'notification-success-soft': themedColors[`successSoftColor${keySuffix}`],
+        'notification-error-soft': themedColors[`errorSoftColor${keySuffix}`],
+        'notification-warning-soft': themedColors[`warningSoftColor${keySuffix}`],
     };
     return colorMap[tagColor];
 };
 
 const getColors = (themedColors, tagColor, theme) => {
-    const hasInvertedTheme = hasInvertedThemeColor(tagColor, theme);
-    const { primaryColor } = hasInvertedTheme ? getInvertedThemedColors(theme) : themedColors;
-    const { focusColor } = themedColors;
+    const { primaryColor } = tagColor === 'primary' ? getInvertedThemedColors(theme) : themedColors;
     return {
         primaryColor,
-        focusColor,
+        focusColor: themedColors.focusColor,
         backgroundColor: getThemedBackgroundColor(tagColor, themedColors),
         backgroundHoverColor: getThemedBackgroundHoverColor(tagColor, themedColors, theme),
     };
@@ -8043,27 +6148,14 @@ const getComponentCss$7 = (tagColor, isFocusable, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'inline-flex', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)),
-            span: Object.assign({ display: 'flex', gap: '2px', alignItems: 'center', position: 'relative', padding: '4px 9px', borderRadius: borderRadiusSmall, background: backgroundColor, color: primaryColor, font: textXSmallStyle.font, whiteSpace: 'nowrap' }, (isFocusable && Object.assign({}, hoverMediaQuery({
-                transition: getTransition('background-color'),
-                '&:hover': {
-                    background: backgroundHoverColor,
-                },
-            })))),
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign({ '&(a),&(button)': {
-                    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]) => {
+            span: Object.assign({ display: 'flex', gap: '2px', alignItems: 'center', position: 'relative', padding: '4px 9px', borderRadius: borderRadiusSmall, background: backgroundColor, color: primaryColor, font: textXSmallStyle.font, whiteSpace: 'nowrap' }, (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)': {
@@ -8077,6 +6169,17 @@ const getComponentCss$7 = (tagColor, isFocusable, theme) => {
 };
 
 const isType = (inputType, typeToValidate) => inputType === typeToValidate;
+// eslint-disable-next-line no-underscore-dangle
+const _hasShowPickerSupport = () => {
+    return (hasDocument &&
+        'showPicker' in HTMLInputElement.prototype &&
+        // TODO: it would be better to determinate support by checking for existence of "calendar-picker-indicator"
+        !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i));
+};
+const hasShowPickerSupport = _hasShowPickerSupport();
+const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
+    return hasShowPickerSupport && (isCalendar || isTime);
+};
 
 const cssVariableInputPaddingLeft = '--p-internal-text-field-input-padding-left';
 const cssVariableInputPaddingRight = '--p-internal-text-field-input-padding-right';
@@ -8101,18 +6204,21 @@ const getComponentCss$6 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
     const isNumber = isType(inputType, 'number');
+    const isCalendar = isType(inputType, 'date') || isType(inputType, 'week') || isType(inputType, 'month');
+    const isTime = isType(inputType, 'time');
     const isSearchOrPassword = isSearch || isPassword;
     const isSearchWithoutForm = isSearch && !isWithinForm;
     const isSearchWithForm = isSearch && isWithinForm;
-    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
+    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: `8px var(${cssVariableInputPaddingRight}) 8px var(${cssVariableInputPaddingLeft})` }, (isNumber && {
+                    : 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
                 },
-            } }))) }, (isSearchOrPassword && {
+            } }))) }, ((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': {
@@ -8138,8 +6244,9 @@ const getComponentCss$6 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
         'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }) }));
 };
 
-const isListTypeOrdered = (listType) => listType === 'ordered';
-const isOrderTypeNumbered = (orderType) => orderType === 'numbered';
+/** @deprecated */
+const isListTypeOrdered = (type) => type !== 'unordered';
+const isListTypeNumbered = (type) => type === 'numbered';
 
 const cssVariablePseudoSuffix = '--p-internal-text-list-pseudo-suffix';
 const cssVariablePaddingTop = '--p-internal-text-list-padding-top';
@@ -8148,8 +6255,8 @@ 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 = (listType, orderType, theme) => {
-    const isOrderedList = isListTypeOrdered(listType);
+const getComponentCss$5 = (type, theme) => {
+    const isOrderedList = isListTypeOrdered(type);
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ counterReset: counter }, hostHiddenStyles))),
@@ -8162,7 +6269,7 @@ const getComponentCss$5 = (listType, orderType, theme) => {
                 // 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},'.',${isOrderTypeNumbered(orderType) ? 'decimal' : 'lower-latin'}) var(${cssVariablePseudoSuffix},'.')`,
+                    content: `counters(${counter},'.',${isListTypeNumbered(type) ? 'decimal' : 'lower-latin'}) var(${cssVariablePseudoSuffix},'.')`,
                     counterIncrement: counter,
                     position: 'absolute',
                     top: 0,
@@ -8188,6 +6295,7 @@ const getComponentCss$4 = () => {
 const TEXT_TAGS = ['p', 'span', 'div', 'address', 'blockquote', 'figcaption', 'cite', 'time', 'legend'];
 
 const sizeMap = {
+    'xx-small': fontSizeTextXXSmall,
     'x-small': fontSizeTextXSmall,
     small: fontSizeTextSmall,
     medium: fontSizeTextMedium,
@@ -8234,54 +6342,57 @@ 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 = () => {
     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;
+exports.getAccordionCss = getComponentCss$W;
+exports.getBannerCss = getComponentCss$V;
+exports.getButtonCss = getComponentCss$R;
+exports.getButtonGroupCss = getComponentCss$U;
+exports.getButtonPureCss = getComponentCss$T;
+exports.getButtonTileCss = getComponentCss$S;
+exports.getCarouselCss = getComponentCss$Q;
+exports.getCheckboxWrapperCss = getComponentCss$P;
+exports.getContentWrapperCss = getComponentCss$O;
+exports.getDisplayCss = getComponentCss$N;
+exports.getDividerCss = getComponentCss$M;
+exports.getFieldsetCss = getComponentCss$K;
+exports.getFieldsetWrapperCss = getComponentCss$L;
+exports.getFlexCss = getComponentCss$I;
+exports.getFlexItemCss = getComponentCss$J;
 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.getGridCss = getComponentCss$G;
+exports.getGridItemCss = getComponentCss$H;
+exports.getHeadingCss = getComponentCss$F;
+exports.getHeadlineCss = getComponentCss$E;
+exports.getIconCss = getComponentCss$D;
+exports.getInlineNotificationCss = getComponentCss$C;
+exports.getLinkCss = getComponentCss$A;
+exports.getLinkPureCss = getComponentCss$B;
+exports.getLinkSocialCss = getComponentCss$A;
 exports.getLinkTileCss = getComponentCss$y;
+exports.getLinkTileModelSignatureCss = getComponentCss$z;
 exports.getMarqueCss = getComponentCss$x;
 exports.getModalCss = getComponentCss$w;
 exports.getModelSignatureCss = getComponentCss$v;
@@ -8298,11 +6409,11 @@ exports.getStepperHorizontalItemCss = getComponentCss$l;
 exports.getSwitchCss = getComponentCss$j;
 exports.getTableBodyCss = getComponentCss$i;
 exports.getTableCellCss = getComponentCss$h;
-exports.getTableCss = getComponentCss$c;
-exports.getTableHeadCellCss = getComponentCss$g;
-exports.getTableHeadCss = getComponentCss$e;
-exports.getTableHeadRowCss = getComponentCss$f;
-exports.getTableRowCss = getComponentCss$d;
+exports.getTableCss = getComponentCss$g;
+exports.getTableHeadCellCss = getComponentCss$f;
+exports.getTableHeadCss = getComponentCss$d;
+exports.getTableHeadRowCss = getComponentCss$e;
+exports.getTableRowCss = getComponentCss$c;
 exports.getTabsBarCss = getComponentCss$b;
 exports.getTabsCss = getComponentCss$9;
 exports.getTabsItemCss = getComponentCss$a;