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

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

@@ -101,19 +101,19 @@ const fontStyleNormal = 'normal';
 
 const fontVariant = 'normal';
 
-const breakpointBase = '0px';
+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,
@@ -126,83 +126,9 @@ 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
-// gridSafeZoneBase: Viewport Width Range = 320 - 1920px / Size Range = 22 - 192px
-const gridSafeZoneBase = 'clamp(22px, 10.625vw - 12px, 192px)';
-
-// fluid sizing calculated by https://fluidtypography.com/#app-get-started
-// gridSafeZoneXXL: Viewport Width Range = 1920 - 2560px / Size Range = 192 - 512px
-const gridSafeZoneXXL = 'clamp(192px, 50vw - 768px, 512px)';
-
-const 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,
-    },
-});
-
 const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
@@ -219,10 +145,10 @@ const textSmallStyle = {
 // 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;
@@ -435,12 +361,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) {
@@ -988,7 +908,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;
@@ -1285,7 +1205,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
@@ -2552,7 +2472,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: {
@@ -2566,8 +2486,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'
       });
     }
@@ -2832,54 +2752,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.
  */
@@ -2888,7 +2778,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];
   }
 
@@ -2903,7 +2793,7 @@ function convertCase(style) {
  */
 
 
-function camelCase() {
+function camelCase$1() {
   function onProcessStyle(style) {
     if (Array.isArray(style)) {
       // Handle rules like @font-face, which can have multiple styles in an array
@@ -2922,7 +2812,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.
@@ -3227,6 +3117,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) {
@@ -3635,10 +3553,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',
@@ -3673,10 +3591,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',
@@ -3712,7 +3630,7 @@ createJss({
     plugins: [
         jssGlobal(),
         jssNested(),
-        camelCase(),
+        camelCase$1(),
         dist({ combineMediaQueries: true }),
     ],
 });
@@ -3727,1934 +3645,108 @@ const supportsConstructableStylesheets = () => {
 // determine it once
 supportsConstructableStylesheets();
 
-[
-    { name: 'Model', id: 'model' },
-    { name: 'Interest', id: 'interest' },
-    { name: 'VIN', id: 'vin' },
-    { name: 'Purchase Intention', id: 'purchaseIntention' },
-    { name: 'Status', id: 'status' },
-    { name: 'Comment', id: 'comment' },
-    { name: 'Lead ID', id: 'leadId' },
-    { name: 'Action', id: 'action', hideLabel: true },
-].map((item, i) => ({
-    ...item,
-    ...(i > 0 &&
-        i < 7 &&
-        i !== 5 && {
-        active: i === 1,
-        direction: 'asc',
-    }),
-}));
-
-[
-    { name: 'Column 1', id: 'col1' },
-    { name: 'Column 2', id: 'col2' },
-    { name: 'Column 3', id: 'col3' },
-].map((item, i) => ({
-    ...item,
-    active: i === 1,
-    direction: 'asc',
-}));
-
-Array.from(Array(4)).map(() => ({
-    imageUrl: 'https://nav.porsche.com/00BC524/series-assets/1366/911@2x.jpg',
-    imageWidth: 80,
-    imageHeight: 48,
-    html: "<a href='#'>link</a>&nbsp;<b>bold</b>&nbsp;<i>italic</i>&nbsp;<strong>strong</strong>&nbsp;<em>emphasized</em>",
-    longText: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
-    shortText: 'Some text',
-}));
-
-var now = Date.now();
-var fnValuesNs = "fnValues" + now;
-var fnRuleNs = "fnStyle" + ++now;
-
-var functionPlugin = function functionPlugin() {
-  return {
-    onCreateRule: function onCreateRule(name, decl, options) {
-      if (typeof decl !== 'function') return null;
-      var rule = createRule(name, {}, options);
-      rule[fnRuleNs] = decl;
-      return rule;
-    },
-    onProcessStyle: function onProcessStyle(style, rule) {
-      // We need to extract function values from the declaration, so that we can keep core unaware of them.
-      // We need to do that only once.
-      // We don't need to extract functions on each style update, since this can happen only once.
-      // We don't support function values inside of function rules.
-      if (fnValuesNs in rule || fnRuleNs in rule) return style;
-      var fnValues = {};
-
-      for (var prop in style) {
-        var value = style[prop];
-        if (typeof value !== 'function') continue;
-        delete style[prop];
-        fnValues[prop] = value;
-      }
-
-      rule[fnValuesNs] = fnValues;
-      return style;
-    },
-    onUpdate: function onUpdate(data, rule, sheet, options) {
-      var styleRule = rule;
-      var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object
-      // will be returned from that function.
-
-      if (fnRule) {
-        // Empty object will remove all currently defined props
-        // in case function rule returns a falsy value.
-        styleRule.style = fnRule(data) || {};
-
-        if (process.env.NODE_ENV === 'development') {
-          for (var prop in styleRule.style) {
-            if (typeof styleRule.style[prop] === 'function') {
-              process.env.NODE_ENV !== "production" ? warning(false, '[JSS] Function values inside function rules are not supported.') : void 0;
-              break;
-            }
-          }
-        }
-      }
-
-      var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.
-
-      if (fnValues) {
-        for (var _prop in fnValues) {
-          styleRule.prop(_prop, fnValues[_prop](data), options);
-        }
-      }
-    }
-  };
+const isThemeDark = (theme) => {
+    return theme === 'dark';
 };
 
-function symbolObservablePonyfill(root) {
-	var result;
-	var Symbol = root.Symbol;
-
-	if (typeof Symbol === 'function') {
-		if (Symbol.observable) {
-			result = Symbol.observable;
-		} else {
-			result = Symbol('observable');
-			Symbol.observable = result;
-		}
-	} else {
-		result = '@@observable';
-	}
-
-	return result;
-}
-
-/* global window */
-
-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 getLinkButtonThemeForIcon = (variant, theme) => variant === 'primary' ? (isThemeDark(theme) ? 'light' : 'dark') : theme;
+const isScrollable = (isPrevHidden, isNextHidden) => {
+    return !(isPrevHidden && isNextHidden);
 };
 
-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);
-          }
-        });
-      };
+const hasDocument = typeof document !== 'undefined';
 
-      for (var prop in style) {
-        var _ret = _loop(prop);
+hasDocument && 'scrollBehavior' in document.documentElement.style;
+const win = typeof window !== 'undefined' ? window : {};
+win.document || { head: {} };
+(win.HTMLElement || class {
+});
 
-        if (_ret === "continue") continue;
-      }
-    }
-  };
+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 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;
-  }
-
-  return style;
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const resizeMap = new Map();
+const isResizeObserverDefined = () => hasWindow && 'ResizeObserver' in window;
+isResizeObserverDefined() &&
+    new ResizeObserver((entries) => {
+        entries.forEach((resizeEntry) => { var _a; return (_a = resizeMap.get(resizeEntry.target)) === null || _a === void 0 ? void 0 : _a(resizeEntry); });
+    });
+const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
+    return Object.assign(Object.assign({}, parseAndGetAriaAttributes(aria)), getButtonBaseAriaAttributes(isDisabled, isLoading));
 };
 
-var onProcessRule = function onProcessRule(rule) {
-  if (typeof rule.style === 'string') {
-    rule.style = parse(rule.style);
-  }
+const getButtonAriaAttributes = (isDisabled, isLoading, aria) => {
+    return Object.assign(Object.assign({}, parseAndGetAriaAttributes(aria)), getButtonBaseAriaAttributes(isDisabled, isLoading));
 };
+getMediaQueryMin('s');
+getMediaQueryMin('xxl');
+typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert');
 
-function templatePlugin() {
-  return {
-    onProcessRule: onProcessRule
-  };
-}
-
-var isObject = function isObject(obj) {
-  return obj && typeof obj === 'object' && !Array.isArray(obj);
+const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const displaySizeToTagMap = {
+    small: 'h3',
+    medium: 'h2',
+    large: 'h1',
+    inherit: 'h1',
 };
-
-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;
+const getDisplayTagType = (host, size, tag) => {
+    if (hasSpecificSlottedTag(host, DISPLAY_TAGS.join())) {
+        return 'div';
     }
-
-    var parent = refRule.options.parent;
-
-    if (parent) {
-      var originalStyle = parent.rules.raw[style.extend];
-      extend(originalStyle, rule, sheet, newStyle);
+    else if (tag) {
+        return tag;
     }
-
-    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);
+    else {
+        return displaySizeToTagMap[size] || 'h1';
     }
-
-    return;
-  } // Extend is a style object.
-
-
-  for (var prop in style.extend) {
-    if (prop === 'extend') {
-      extend(style.extend.extend, rule, sheet, newStyle);
-      continue;
+};
+const headingSizeToTagMap = {
+    small: 'h6',
+    medium: 'h5',
+    large: 'h4',
+    'x-large': 'h3',
+    'xx-large': 'h2',
+    inherit: 'h2',
+};
+const getHeadingTagType = (host, size, tag) => {
+    if (hasSpecificSlottedTag(host, HEADING_TAGS.join())) {
+        return 'div';
     }
-
-    if (isObject(style.extend[prop])) {
-      if (!(prop in newStyle)) newStyle[prop] = {};
-      extend(style.extend[prop], rule, sheet, newStyle[prop]);
-      continue;
+    else if (tag) {
+        return tag;
     }
-
-    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;
+    else {
+        return headingSizeToTagMap[size] || 'h2';
     }
-
-    if (isObject(style[prop])) {
-      newStyle[prop] = extend(style[prop], rule, sheet);
-      continue;
+};
+const HEADLINE_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const variantToTagMap = {
+    'large-title': 'h1',
+    'headline-1': 'h1',
+    'headline-2': 'h2',
+    'headline-3': 'h3',
+    'headline-4': 'h4',
+    'headline-5': 'h5',
+};
+const getHeadlineTagType = (host, variant, tag) => {
+    if (hasSpecificSlottedTag(host, HEADLINE_TAGS.join())) {
+        return 'div';
     }
-
-    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 (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var isInBrowser = _interopDefault(require$$0);
-var _toConsumableArray = _interopDefault(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 isScrollable = (isPrevHidden, isNextHidden) => {
-    return !(isPrevHidden && isNextHidden);
-};
-
-const hasDocument = typeof document !== 'undefined';
-
-hasDocument && 'scrollBehavior' in document.documentElement.style;
-const win = typeof window !== 'undefined' ? window : {};
-win.document || { head: {} };
-(win.HTMLElement || class {
-});
-
-const 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 getLinkButtonThemeForIcon = (variant, theme) => variant === 'primary' ? (theme === 'light' ? 'dark' : 'light') : theme;
-const resizeMap = new Map();
-const isResizeObserverDefined = () => hasWindow && 'ResizeObserver' in window;
-isResizeObserverDefined() &&
-    new ResizeObserver((entries) => {
-        entries.forEach((resizeEntry) => { var _a; return (_a = resizeMap.get(resizeEntry.target)) === null || _a === void 0 ? void 0 : _a(resizeEntry); });
-    });
-const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
-    return Object.assign(Object.assign({}, parseAndGetAriaAttributes(aria)), getButtonBaseAriaAttributes(isDisabled, isLoading));
-};
-
-const getButtonAriaAttributes = (isDisabled, isLoading, aria) => {
-    return Object.assign(Object.assign({}, parseAndGetAriaAttributes(aria)), getButtonBaseAriaAttributes(isDisabled, isLoading));
-};
-getMediaQueryMin('s');
-getMediaQueryMin('xxl');
-typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert');
-
-const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-const displaySizeToTagMap = {
-    medium: 'h2',
-    large: 'h1',
-    inherit: 'h1',
-};
-const getDisplayTagType = (host, size, tag) => {
-    if (hasSpecificSlottedTag(host, DISPLAY_TAGS.join())) {
-        return 'div';
-    }
-    else if (tag) {
-        return tag;
-    }
-    else {
-        return displaySizeToTagMap[size] || 'h1';
-    }
-};
-const headingSizeToTagMap = {
-    small: 'h6',
-    medium: 'h5',
-    large: 'h4',
-    'x-large': 'h3',
-    'xx-large': 'h2',
-    'xxx-large': 'h1',
-    inherit: 'h1',
-};
-const getHeadingTagType = (host, size, tag) => {
-    if (hasSpecificSlottedTag(host, HEADING_TAGS.join())) {
-        return 'div';
-    }
-    else if (tag) {
-        return tag;
-    }
-    else {
-        return headingSizeToTagMap[size] || 'h2';
-    }
-};
-const HEADLINE_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-const variantToTagMap = {
-    'large-title': 'h1',
-    'headline-1': 'h1',
-    'headline-2': 'h2',
-    'headline-3': 'h3',
-    'headline-4': 'h4',
-    'headline-5': 'h5',
-};
-const getHeadlineTagType = (host, variant, tag) => {
-    if (hasSpecificSlottedTag(host, HEADLINE_TAGS.join())) {
-        return 'div';
-    }
-    else if (tag) {
-        return tag;
-    }
-    else {
-        return variantToTagMap[variant] || 'h1';
-    }
-};
+    else if (tag) {
+        return tag;
+    }
+    else {
+        return variantToTagMap[variant] || 'h1';
+    }
+};
 
 const CDN_BASE_URL$2 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/icons';
 const ICONS_MANIFEST = { "360": "360.min.5f2fcac02969bc425484fe8d80e5a1c9.svg", "accessibility": "accessibility.min.295a9d53a11c42212b8cce594982dfd2.svg", "active-cabin-ventilation": "active-cabin-ventilation.min.030c46def7a7397091d920b65bc0da3c.svg", "add": "add.min.8578a2d10c79a78e398e963b506b6cb5.svg", "adjust": "adjust.min.cdb89f5c161a4c82328fe60e72a88c59.svg", "arrow-double-down": "arrow-double-down.min.3b17923187ef2114d1f17da042fc97ca.svg", "arrow-double-left": "arrow-double-left.min.bba22e26f025c439b600bf74f0566465.svg", "arrow-double-right": "arrow-double-right.min.14f743d4adb5467fc0e95ac7f6426e1f.svg", "arrow-double-up": "arrow-double-up.min.8e3b3e31d227366f916c91dcb6e1b466.svg", "arrow-down": "arrow-down.min.84e69acc6554637cc373b8a4f50ba991.svg", "arrow-first": "arrow-first.min.bc51317ecf4953a664870ebab5059775.svg", "arrow-head-down": "arrow-head-down.min.454c189f4914925447670d0ae9bd2043.svg", "arrow-head-left": "arrow-head-left.min.aa2da7b4dbbb8a28c046592290054e94.svg", "arrow-head-right": "arrow-head-right.min.fb602ae5cb51970770570a70287e77e9.svg", "arrow-head-up": "arrow-head-up.min.2c282619214e4f998e1ac64a61b5545b.svg", "arrow-last": "arrow-last.min.72553c4284717d4961f8bcf8d51e0303.svg", "arrow-left": "arrow-left.min.24e8467ef0f8f206f228a3d8d443d70b.svg", "arrow-right": "arrow-right.min.8fb7b42d2d08d60f918602aa28475c0b.svg", "arrow-up": "arrow-up.min.0bc737f7f2cc56ef65c5d33472e014b0.svg", "augmented-reality": "augmented-reality.min.290ff033e35774fd093e1ab8ed07e10f.svg", "battery-empty": "battery-empty.min.8594e37d3e67a95b85eb9935f02e69cf.svg", "battery-full": "battery-full.min.4c75acb5a64a6dd3116ede7b1859a6d6.svg", "bell": "bell.min.d69dc9a220dec323e758ccbff756b5b5.svg", "bookmark": "bookmark.min.0cb177c79674593133f6d3d384c5df4b.svg", "broadcast": "broadcast.min.edbfac03d4afdc964d350f54df79c6f3.svg", "calculator": "calculator.min.2518729352d3709e488e71dcbf449247.svg", "calendar": "calendar.min.588fabe880634ece974291f5adfee50d.svg", "camera": "camera.min.10af3a4fac8c289775390534a50606d0.svg", "car": "car.min.4eeec04c87a14bb5d3d316eeeee0185b.svg", "car-battery": "car-battery.min.2a619bbd456ad531c922bf8f51b70977.svg", "card": "card.min.06394222c7ca5d6c7e783d6f86f030a6.svg", "charging-active": "charging-active.min.915410d626a52a3a76b6bf498491c255.svg", "charging-state": "charging-state.min.c5cb87ef2808f824f352a6ebd9b9d4a9.svg", "charging-station": "charging-station.min.211fcf0f9a9bb50b6e83482ee588dda9.svg", "chart": "chart.min.267e23c07f47784c186c5119b870df76.svg", "chat": "chat.min.a8a52d1b8b463ee0e5a3b0d812c9a40c.svg", "check": "check.min.0cb26d9a5ee1d217e5054f1ad60ae3b4.svg", "city": "city.min.a99b88b51adda8244a2c72953a2f4ab4.svg", "climate": "climate.min.5d52b2880552275d9032afc0fa2b7296.svg", "climate-control": "climate-control.min.152235d2bf2b7ec6e1a3c40e6971c446.svg", "clock": "clock.min.bcea9f182e1fe861ea6e765650f79b38.svg", "close": "close.min.eefab6ef191882058f9ed548bd5a467e.svg", "closed-caption": "closed-caption.min.b93ac43c07223fda14249d2279823f6a.svg", "co2-emission": "co2-emission.min.788590454baa0f6c52dfc99a55fe0b85.svg", "compare": "compare.min.657a924ca48bf93d200d2e6539fa8050.svg", "configurate": "configurate.min.2d137bc6f43ee03587188b571c97aacd.svg", "country-road": "country-road.min.3ee2c1be9d063f5d7c5772fcc7ae2568.svg", "cubic-capacity": "cubic-capacity.min.b5df863671bdf059bce19eddc2990698.svg", "delete": "delete.min.fd9788c3a0842a7bb1d737c6de1969d1.svg", "disable": "disable.min.c3d85d4ed9738c077d19e524775dbd56.svg", "document": "document.min.d2db26d7049ab2180361c7ce40f52d57.svg", "download": "download.min.d7c63bcbadf4dd5b14c3c79a438d93f3.svg", "duration": "duration.min.9405be759f64c8253076f7e55c80c336.svg", "edit": "edit.min.06bde2175fafb58233fa1ce6d3d00f83.svg", "email": "email.min.eb8ff02812a48c5098d3c40614e8d9d7.svg", "error-filled": "error-filled.min.35d7da7cb866bcfd3a25859f8cd2246b.svg", "exclamation": "exclamation.min.6ca46945978bd4eb2a40dc29766b1882.svg", "external": "external.min.b804bef35446f6b3cb379c121de3f13d.svg", "filter": "filter.min.60f168332c7550dfdf714ed0507877b0.svg", "flash": "flash.min.e5a6de1239300a6104076ee67aec42ca.svg", "fuel-station": "fuel-station.min.0155159076984cccdbfe854eb4da3720.svg", "garage": "garage.min.463577e6a1ffac592b5aa7bec9a82d39.svg", "gift": "gift.min.eeb1a5871a4008bcafd9495fe11ec9bc.svg", "globe": "globe.min.50fd2c886a822673902bd106efc73c3f.svg", "grid": "grid.min.c36c5015115005dcb9c948f07af0be80.svg", "highway": "highway.min.ea773dcf33a43fa8e82beae96c1222b7.svg", "home": "home.min.2bdc01bb7c9b39fa5ef5a81c8c3f9f49.svg", "horn": "horn.min.77105eb430a033a3ffdf21f9fecd32de.svg", "image": "image.min.851c64681e1950312a934a723ca04a85.svg", "increase": "increase.min.45bfe421e86192da37c8cca4917c10c2.svg", "information": "information.min.d387e44cc786ca3df3702f429518a1d9.svg", "information-filled": "information-filled.min.1055e842bb7d89c061ff1b5f47ed6169.svg", "key": "key.min.37b5e8ff9fda430f855f4b82bfd03485.svg", "leaf": "leaf.min.ea91b1d04ade4c49640e89ade35c9d90.svg", "leather": "leather.min.ef9e664d2fc3c28171fbd3d93b079503.svg", "light": "light.min.5fa3dd77ee9c63e28614c4c7c4a6d39c.svg", "list": "list.min.ecaeee96ec6cf2f8c9028ea404113a9e.svg", "locate": "locate.min.c28bdf292bbf297eb8109a272e2ffb91.svg", "lock": "lock.min.d258c21c7217cd1342307c45ecd5176e.svg", "lock-open": "lock-open.min.2ef427e273635e3aab7601b0fe92e86e.svg", "logo-baidu": "logo-baidu.min.a8eb57b32e616b21820d86882835fe20.svg", "logo-delicious": "logo-delicious.min.fc2927d4979ffaed1f23160091e0975e.svg", "logo-digg": "logo-digg.min.d7340b3f22cf4a22a8ac3b472c16e0e2.svg", "logo-facebook": "logo-facebook.min.0c2e020d0b61d37e76e6bab67e4d149e.svg", "logo-foursquare": "logo-foursquare.min.b2699d993d9d731892ba01874c0e023d.svg", "logo-gmail": "logo-gmail.min.0c14069d86c2ba0a42c726d96f0cae9c.svg", "logo-google": "logo-google.min.c1f3931d74e40e5cdc875236b7e674a1.svg", "logo-hatena": "logo-hatena.min.021834899da6e6f6a9dd963f4fc3337c.svg", "logo-instagram": "logo-instagram.min.2f8c578e2472dc13b2f0ec8d1b936442.svg", "logo-kaixin": "logo-kaixin.min.8fb995689a3442669df37b5f375922fc.svg", "logo-kakaotalk": "logo-kakaotalk.min.988146b4cd8bced103fd8b5a9be064d8.svg", "logo-linkedin": "logo-linkedin.min.e4848fd4b74404e504fd1a4d5a25b960.svg", "logo-naver": "logo-naver.min.13f97e4c3ad4898d169904caa609f2d0.svg", "logo-pinterest": "logo-pinterest.min.101284bac1d7cf468719fccf416069df.svg", "logo-qq": "logo-qq.min.5d89ab35e4e00e81deadaa2fe0d51a5d.svg", "logo-qq-share": "logo-qq-share.min.01da8f9d6665f4529f349f88b4fb0cfc.svg", "logo-reddit": "logo-reddit.min.40dd42ee1368dbc74611afee4d3c9850.svg", "logo-skyrock": "logo-skyrock.min.9440a0e4a088cdfbfcc99bc91010768a.svg", "logo-sohu": "logo-sohu.min.d7a030336d712a2b44982e65071cd2bc.svg", "logo-tecent": "logo-tecent.min.fd1ec329327f4cbf5706c393df66af9d.svg", "logo-telegram": "logo-telegram.min.624fca36dd6f6c5b64bce6e617372d77.svg", "logo-tiktok": "logo-tiktok.min.9c5ffad4c76353afaa99feca9e4f2f0a.svg", "logo-tumblr": "logo-tumblr.min.9b77d06b659cee9d5f45015c33c23967.svg", "logo-twitter": "logo-twitter.min.ac4d6b189cd2a47e4fac75bedb76b5bd.svg", "logo-viber": "logo-viber.min.330fbae7d2683b7910d828cbe864f738.svg", "logo-vk": "logo-vk.min.727ba204a194c8cf1b7fc389ac1db14b.svg", "logo-wechat": "logo-wechat.min.0392ff30f188aa9f52480e965142474a.svg", "logo-weibo": "logo-weibo.min.3ded49004baea42d85fa6fcb9d79ccb1.svg", "logo-whatsapp": "logo-whatsapp.min.02c83d3cbde89763eee8fc3bcab02257.svg", "logo-xing": "logo-xing.min.6a5f5fde119a841823d0ef05293b3454.svg", "logo-yahoo": "logo-yahoo.min.622e886e777c08cf80c31dc99ca13f1a.svg", "logo-youku": "logo-youku.min.d35a5283c6d3094748f565c729f56d9f.svg", "logo-youtube": "logo-youtube.min.59c939904cbec0c7793289eb5e68cb99.svg", "logout": "logout.min.aa54756e3aec12f347fdec0a2905a232.svg", "map": "map.min.643551801bfc27a93438c30ebe1d1387.svg", "menu-dots-horizontal": "menu-dots-horizontal.min.94e0804e3a5a30a577cab6296ad8d15d.svg", "menu-dots-vertical": "menu-dots-vertical.min.7ec3f5be33dd3459d7a9bed9fdbe22d3.svg", "menu-lines": "menu-lines.min.30ff09f6e2ce846286dd136279636097.svg", "minus": "minus.min.00cca11ec9ce4bd913abba2059c3f10b.svg", "mobile": "mobile.min.71d3c0d7fb4349383562cc233478f7fb.svg", "moon": "moon.min.5c447b4013210e7c7723ca4b6fdbfa9f.svg", "oil-can": "oil-can.min.31978141ee5529f97833027b1e03294a.svg", "parking-brake": "parking-brake.min.f03105e84898f1db02c6fcbdd008bfcf.svg", "parking-light": "parking-light.min.968af68684df1220b15cff6616e8376e.svg", "pause": "pause.min.dd29b256b73311abf1549ed16fe7a47b.svg", "phone": "phone.min.e1a58c454ffe074b30a5bb16c75ff23f.svg", "pin": "pin.min.c6ce5ea394fd9cf9dca80a592e2aeae4.svg", "play": "play.min.703fb2dbebac16ea91a6524914626ae2.svg", "plug": "plug.min.02d79b2702ac5c41020b54bd9eedf523.svg", "plus": "plus.min.dd34f71292a547080b9247a72c1adda2.svg", "preheating": "preheating.min.96ccdd3d24b0634ca820dc894894a34d.svg", "printer": "printer.min.bcd50214772a8fcc1d0f0ae1205610bf.svg", "purchase": "purchase.min.70535cff1a085154ab49ab958fe91aae.svg", "question": "question.min.df469b72598d2dbfb458c46430c0690a.svg", "racing-flag": "racing-flag.min.1aee1d177d44aaaca113a8b7a81db573.svg", "refresh": "refresh.min.36ced59c8e8d06980d6ac20cca8a9057.svg", "replay": "replay.min.d4f212bf3d5f8fe166d78dba57eeacde.svg", "reset": "reset.min.e1ce71f684b6e83b9ed8182389bd407f.svg", "route": "route.min.49f1935d2a563b150bb382eb56a04972.svg", "rss": "rss.min.eaf3873673fcbff72833e7a77f9510f8.svg", "save": "save.min.6506e50ad89aee223e85fe52242c232e.svg", "screen": "screen.min.c17978f44a7bf9f7d80f178fd2b7d116.svg", "search": "search.min.f2755d61c24b6ad037f51d65588be308.svg", "send": "send.min.544f2b90e562b8582808f735846b1351.svg", "share": "share.min.b7b59aa7085cc865735acfd940480234.svg", "shopping-bag": "shopping-bag.min.9d99682e614f5bbb9760c1a0272bd1e0.svg", "shopping-cart": "shopping-cart.min.05a6c651afb21246daba2e941e8366cc.svg", "sidelights": "sidelights.min.996d591ee87247eae32968bf0b588d1e.svg", "snowflake": "snowflake.min.cf85d1b3c62e223ffb80d8c838d4f0b8.svg", "sort": "sort.min.d90a6657569305b9b09b0c6997b5b915.svg", "stack": "stack.min.d36295767f8e2540bbbf60278114ca09.svg", "star": "star.min.d7445429f599f915661e6c57841ae339.svg", "steering-wheel": "steering-wheel.min.c632bf7d06f41d68f0a95d76615f3981.svg", "stopwatch": "stopwatch.min.c90f1fde0961349fe79c0b077f7b0d41.svg", "subtract": "subtract.min.bb9f2dcb0c81ac7f216f6fe2ba916c09.svg", "success": "success.min.4401a4715549bd7dfaaa4f54684b2088.svg", "success-filled": "success-filled.min.c9cb3c66aebf9c4f40b897064f901335.svg", "sun": "sun.min.a68eb6225965558e4498d3d38c33d52a.svg", "switch": "switch.min.ab6c8b55ab119d9bd5170a1893a75ed2.svg", "tablet": "tablet.min.60e7c4ef821bf610d2b2d5b06c7e88b7.svg", "tachometer": "tachometer.min.348f8c5eed7c61993a864ebcffee98bd.svg", "truck": "truck.min.43f91b0320003695d8804cf6a8a86da4.svg", "upload": "upload.min.cf3aaf8fb27e339d26133cbd6a5332ca.svg", "user": "user.min.0f8dcfbe34322e7968b4b23e11d963f0.svg", "user-group": "user-group.min.87f6ca16e7174b9a8d1894283a8ff1d4.svg", "user-manual": "user-manual.min.0b87e500e3d747e67be964c47a3ae312.svg", "video": "video.min.107dfd64c6fd7398dd48b94d61b2fe11.svg", "view": "view.min.cd78cae7309f44d941e9264047e3efa0.svg", "view-off": "view-off.min.e27746517bdb4c2c9ae5f025c7e74991.svg", "volume-off": "volume-off.min.711d24824df04d61c3129bbdcdbfa083.svg", "volume-up": "volume-up.min.0a2ebc984c6b9d2f53c747f9ba2028f1.svg", "warning": "warning.min.04529c502dddce98f0ae2eec0bfb3432.svg", "warning-filled": "warning-filled.min.ee8effcdc653f660043f909b6f0c938b.svg", "weight": "weight.min.47ef0b98ca8ed590dd7d6e6c3f1bcd46.svg", "wifi": "wifi.min.14540859e9241374bd9d0c89eb85667b.svg", "work": "work.min.d17986d8fcff6a5fcd5e9925e838fade.svg", "wrench": "wrench.min.90e402dc170fe83de23e2c11588ba037.svg", "wrenches": "wrenches.min.990b074555825a218e86fd35397fc88c.svg", "zoom-in": "zoom-in.min.22fa9d7ee8748debc801fe910f2d3d01.svg", "zoom-out": "zoom-out.min.9408a4dc5786ed5a783a729e58ab3d6d.svg" };
@@ -5942,12 +4034,23 @@ const isSortable = (active, direction) => {
 };
 
 const getThemeForIcon = (color, theme) => {
-    return ['neutral-contrast-high', 'primary'].includes(color) ? (isThemeDark(theme) ? 'light' : 'dark') : theme;
+    return color === 'neutral-contrast-high' || color === 'primary' ? (isThemeDark(theme) ? 'light' : 'dark') : theme;
 };
 const isType = (inputType, typeToValidate) => inputType === typeToValidate;
 const isWithinForm = (host) => !!getClosestHTMLElement(host, 'form');
 const hasLocateAction = (icon) => icon === 'locate';
-const isListTypeOrdered = (listType) => listType === 'ordered';
+// 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 isListTypeOrdered = (type) => type !== 'unordered';
 
 const TEXT_TAGS = ['p', 'span', 'div', 'address', 'blockquote', 'figcaption', 'cite', 'time', 'legend'];
 const getTextTagType = (host, tag) => {
@@ -5959,4 +4062,4 @@ const getTextTagType = (host, tag) => {
     }
 };
 
-export { BREAKPOINTS, DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, TEXT_TAGS, attributeMutationMap, buildIconUrl, buildSrcSet, cdnBaseUrl, childrenMutationMap, createPaginationModel, createRange, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getClosestHTMLElement, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getLinkButtonThemeForIcon, getRole, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificSlottedTag, hasVisibleIcon, hasWindow, isDisabledOrLoading, isListTypeOrdered, isResizeObserverDefined, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isType, isUrl, isWithinForm, itemTypes, parseAndGetAriaAttributes, parseJSONAttribute, resizeMap, supportsConstructableStylesheets, tempDiv, tempIcon, tempLabel };
+export { BREAKPOINTS, DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, TEXT_TAGS, _hasShowPickerSupport, attributeMutationMap, buildIconUrl, buildSrcSet, cdnBaseUrl, childrenMutationMap, createPaginationModel, createRange, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getClosestHTMLElement, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getLinkButtonThemeForIcon, getRole, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificSlottedTag, hasVisibleIcon, hasWindow, isDisabledOrLoading, isListTypeOrdered, isResizeObserverDefined, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isType, isUrl, isWithinForm, itemTypes, parseAndGetAriaAttributes, parseJSONAttribute, resizeMap, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, tempDiv, tempIcon, tempLabel };