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

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

@@ -60,6 +60,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 +73,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 +91,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)';
 
@@ -108,8 +111,6 @@ const fontWeight = {
 
 const fontStyleNormal = 'normal';
 
-const fontStyleItalic = 'italic';
-
 const fontVariant = 'normal';
 
 const backdropFilter = 'blur(32px)';
@@ -118,19 +119,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,15 +167,13 @@ 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
@@ -162,70 +184,12 @@ const gridSafeZoneBase = 'clamp(22px, 10.625vw - 12px, 192px)';
 // gridSafeZoneXXL: Viewport Width Range = 1920 - 2560px / Size Range = 192 - 512px
 const gridSafeZoneXXL = 'clamp(192px, 50vw - 768px, 512px)';
 
-const gridFullColumnStart = 'full-start';
-
-const gridExtendedColumnStart = 'extended-start';
-
-const gridBasicColumnStart = 'basic-start';
-
-const gridNarrowColumnStart = 'narrow-start';
-
-const gridNarrowColumnEnd = 'narrow-end';
-
-const gridBasicColumnEnd = 'basic-end';
-
-const gridExtendedColumnEnd = 'extended-end';
-
-const gridFullColumnEnd = 'full-end';
-
-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 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,
-    },
-});
-
 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 +204,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 = {
@@ -289,13 +255,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 +476,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 +1023,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 +1320,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 +2587,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 +2601,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 +2867,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 +2893,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 +2927,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 +3232,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 +3668,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 +3706,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',
@@ -3808,6 +3771,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 +3897,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,1961 +3915,131 @@ 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;
-            }
-          }
-        }
-      }
+const hasDocument = typeof document !== 'undefined';
 
-      var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.
+hasDocument && 'scrollBehavior' in document.documentElement.style;
 
-      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 */
-
-var root;
-
-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')();
-}
-
-var result = symbolObservablePonyfill(root);
-
-var isObservable = function isObservable(value) {
-  return value && value[result] && value === value[result]();
+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 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);
-        }
-      });
-      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);
-          }
-        });
-      };
-
-      for (var prop in style) {
-        var _ret = _loop(prop);
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-        if (_ret === "continue") continue;
-      }
-    }
-  };
+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({ 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 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
- */
-
-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;
-  }
+const TOAST_Z_INDEX = 999999;
+const MODAL_Z_INDEX = 99999;
+const POPOVER_Z_INDEX = 9999;
+const BANNER_Z_INDEX = 99;
 
-  return style;
+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})`,
+        },
+    },
 };
-
-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 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)';
@@ -6001,6 +4142,7 @@ const getComponentCss$R = (direction) => {
 };
 
 const fontSizeTextMap = {
+    'xx-small': fontSizeTextXXSmall,
     'x-small': fontSizeTextXSmall,
     small: fontSizeTextSmall,
     medium: fontSizeTextMedium,
@@ -6023,7 +4165,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',
@@ -6108,7 +4250,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',
@@ -6210,7 +4352,7 @@ const spacingMap = {
         },
     },
 };
-const getComponentCss$O = (width, disablePagination, alignHeader, theme) => {
+const getComponentCss$O = (width, hasPagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss(Object.assign({ '@global': {
@@ -6257,9 +4399,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,
@@ -6387,19 +4529,14 @@ 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];
@@ -6434,6 +4571,7 @@ const getTypographySlottedJssStyle = () => {
 };
 
 const sizeMap$5 = {
+    small: fontSizeDisplaySmall,
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
@@ -6454,9 +4592,6 @@ const getComponentCss$L = (size, align, color, ellipsis, theme) => {
 const getComponentCss$K = (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,
@@ -6561,7 +4696,6 @@ const sizeMap$4 = {
     large: fontSizeHeadingLarge,
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
-    'xxx-large': fontSizeHeadingXXXLarge,
 };
 const getComponentCss$E = (size, align, color, ellipsis, theme) => {
     return getCss({
@@ -6605,6 +4739,7 @@ const getHeadlineVariantJssStyle = (variant) => {
         }));
 };
 const textSizeMap = {
+    'xx-small': fontSizeTextXXSmall,
     'x-small': fontSizeTextXSmall,
     small: fontSizeTextSmall,
     medium: fontSizeTextMedium,
@@ -6630,64 +4765,57 @@ const getComponentCss$D = (variant, align, color, ellipsis, theme) => {
     });
 };
 
+const toFilter = (values) => `invert(${values[0]}%) sepia(${values[1]}%) saturate(${values[2]}%) hue-rotate(${values[3]}deg) brightness(${values[4]}%) contrast(${values[5]}%)`;
+
+const filterLightContrastLow = toFilter([93, 11, 36, 201, 89, 102]);
+const filterLightContrastMedium = toFilter([65, 6, 119, 187, 90, 92]);
+const 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([31, 32, 5493, 216, 90, 107]);
+const filterDarkNotificationSuccess = toFilter([59, 22, 1342, 86, 96, 88]);
+const filterDarkNotificationWarning = toFilter([72, 94, 303, 354, 89, 94]);
+const filterDarkNotificationError = toFilter([28, 34, 3133, 333, 95, 100]);
+const filterDarkNotificationInfo = toFilter([31, 32, 5493, 216, 90, 107]);
+
+const filterLightPrimary = toFilter([3, 7, 2930, 188, 91, 103]);
+const filterDarkPrimary = toFilter([97, 55, 2840, 180, 114, 103]);
+
 const sizeMap$3 = {
+    '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 = {
@@ -6703,10 +4831,11 @@ const keyFramesDark = 'rerender-dark';
 const getComponentCss$C = (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,
@@ -6717,7 +4846,7 @@ const getComponentCss$C = (color, size, theme) => {
                     height: fontLineHeight,
                     font: `${sizeMap$3[size]} ${fontFamily}`,
                 })) }, (!isColorInherit && {
-            [`@keyframes ${isThemeDark(theme) ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
+            [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
         })),
     });
 };
@@ -6790,12 +4919,7 @@ const getComponentCss$A = (icon, iconSource, active, stretch, size, hideLabel, a
     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)
@@ -6821,12 +4945,7 @@ const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     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)
@@ -6847,9 +4966,7 @@ const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAncho
 };
 
 const fontWeightMap = {
-    thin: fontWeightRegular,
     regular: fontWeightRegular,
-    semibold: fontWeightSemiBold$1,
     'semi-bold': fontWeightSemiBold$1,
     bold: fontWeightBold,
 };
@@ -6865,44 +4982,26 @@ const aspectRatioPaddingTop = {
     '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%);`;
+    return isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle;
 };
 const sizeMap$2 = {
-    inherit: {
-        fontSize: 'inherit',
-    },
-    default: { fontSize: '1.25rem' },
+    inherit: { fontSize: 'inherit' },
+    default: { fontSize: fontSizeTextMedium },
 };
 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({
+        '@global': Object.assign(Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)) }, addImportantToEachRule({
             '::slotted(picture),::slotted(img)': Object.assign({ transition: getTransition('transform') }, getBackfaceVisibilityJssStyle()),
-            '::slotted(picture)': Object.assign({ position: 'absolute' }, getInsetJssStyle()),
+            '::slotted(picture)': Object.assign({ position: 'absolute' }, getInsetJssStyle(0)),
             '::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) })))) }),
+        })), { p: Object.assign(Object.assign({ color: getThemedTypographyColor('dark', 'primary'), maxWidth: pxToRemWithUnit(550), margin: 0 }, textLargeStyle), mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$2[s]), buildResponsiveStyles(weight, (w) => ({
+                fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w),
+            })))) }),
         root: Object.assign(Object.assign({ height: 0, position: 'relative', transform: 'translate3d(0,0,0)' }, hoverMediaQuery({
             '&:hover': {
                 '& ::slotted(picture),::slotted(img)': addImportantToEachRule({
@@ -6912,24 +5011,20 @@ const getComponentCss$y = (aspectRatio, size, weight, align, compact, hasGradien
         })), 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' }))),
+        'image-container': Object.assign({ position: 'absolute', overflow: 'hidden', borderRadius: borderRadiusMedium }, getInsetJssStyle(0)),
+        content: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'absolute' }, (isTopAligned ? { top: 0 } : { bottom: 0 })), { left: 0, right: 0, display: 'grid', justifyItems: 'start', borderRadius: borderRadiusMedium, padding: align === 'bottom'
+                ? `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`
+                : `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`, gap: spacingStaticMedium }), mergeDeep(hasGradient &&
+            buildResponsiveStyles(compact, (isCompact) => getGradientBackground(isCompact, isTopAligned)), buildResponsiveStyles(compact, (isCompact) => isCompact
+            ? Object.assign({ alignItems: 'center', gridTemplateColumns: 'auto 24px', gridTemplateRows: 'auto' }, (isTopAligned ? { top: 0 } : { bottom: 0 })) : { gridTemplateRows: 'auto auto', gridTemplateColumns: 'auto' }))), { '@media (forced-colors: active)': {
+                background: 'rgba(0,0,0,0.7)',
+            } }),
         'link-pure': buildResponsiveStyles(compact, (isCompact) => ({
             display: isCompact ? 'inline-block' : 'none',
         })),
-        link: Object.assign({ minHeight: '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()),
-        },
+        link: Object.assign({ minHeight: '54px' }, buildResponsiveStyles(compact, (isCompact) => ({ display: isCompact ? 'none' : 'inline-block' }))),
+        // is used for expanded click-area only
+        'link-overlay': Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle(0)), { outline: 0 }),
     });
 };
 
@@ -6981,7 +5076,7 @@ const getFullscreenJssStyles = (fullscreen) => {
             minWidth: pxToRemWithUnit(275.2),
             maxWidth: pxToRemWithUnit(1536),
             minHeight: 'auto',
-            margin: `max(16px, 7vh) ${gridSafeZoneBase}`,
+            margin: `clamp(16px, 7vh, 192px) ${gridSafeZoneBase}`,
             borderRadius: borderRadiusMedium,
         };
 };
@@ -6997,7 +5092,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 +5100,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 +5119,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,10 +5136,10 @@ 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,
             },
@@ -7055,30 +5150,16 @@ const getComponentCss$w = (open, fullscreen, disableCloseButton, 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 +5378,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 +5393,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, 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 +5416,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 }),
             })),
@@ -7386,10 +5467,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 +5533,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 +5677,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"/>`,
@@ -7677,7 +5761,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) &&
@@ -7862,35 +5946,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 +5965,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 +5978,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 +6012,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 +6049,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 +6079,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 +6100,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 +6135,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 +6175,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 +6186,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 +6200,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 +6226,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,