@porsche-design-system/components-react 3.5.0-rc.0 → 3.6.0-rc.0

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

@@ -0,0 +1,4126 @@
+'use strict';
+
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+function getClosestHTMLElement(element, selector) {
+    return element?.closest(selector);
+}
+
+function getHTMLElement(element, selector) {
+    return element?.querySelector(selector);
+}
+
+const transformSelectorToDirectChildSelector = (selector) => selector
+    .split(',')
+    .map((part) => ':scope>' + part)
+    .join();
+
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+function getDirectChildHTMLElement(element, selector) {
+    // querySelector(All) doesn't work with :scope pseudo class and comma separator in jsdom, yet
+    // https://github.com/jsdom/jsdom/issues/3141
+    // therefore we got a workaround so it works nicely when consumed from jsdom-polyfill package
+    return (transformSelectorToDirectChildSelector(selector)
+        .split(',')
+        .map((sel) => getHTMLElement(element, sel))
+        .filter((x) => x)[0] || null // comma separated selector might return null, so we have to filter
+    );
+}
+
+// TODO: unit test is missing
+const hasSpecificSlottedTag = (host, tags) => {
+    // TODO: needs to be direct and only child
+    const el = getHTMLElement(host, ':first-child');
+    return el?.matches(tags);
+};
+
+const isDisabledOrLoading = (disabled, loading) => {
+    return disabled || loading;
+};
+
+const parseJSONAttribute = (attribute) => {
+    return typeof attribute === 'string'
+        ? // input is potentially JSON parsable string, e.g. "{ aria-label: 'Some label' }"
+            JSON.parse(attribute
+                .replace(/'/g, '"') // convert single quotes to double quotes
+                .replace(/[\s"]?([\w-]+)[\s"]?:/g, '"$1":') // wrap keys in double quotes
+            )
+        : // input is object, e.g. { aria-label: 'Some label' }
+            attribute;
+};
+
+const hasWindow = typeof window !== 'undefined';
+const parseAndGetAriaAttributes = (rawAttributes) => {
+    if (rawAttributes) {
+        const attributes = parseJSONAttribute(rawAttributes);
+        const attributeKeys = Object.keys(attributes);
+        // convert booleans to strings so that values are properly set and not just result in attributes without a value when true in jsx
+        for (const key of attributeKeys) {
+            if (typeof attributes[key] === 'boolean') {
+                attributes[key] = `${attributes[key]}`;
+            }
+        }
+        return attributes;
+    }
+};
+const isHighContrastMode = hasWindow && window.matchMedia && matchMedia('(forced-colors: active)').matches;
+
+const getButtonBaseAriaAttributes = (isDisabled, isLoading) => {
+    return {
+        'aria-disabled': isDisabledOrLoading(isDisabled, isLoading) ? 'true' : null,
+        'aria-busy': isLoading ? 'true' : null,
+    };
+};
+
+const attributeMutationMap = new Map();
+hasWindow &&
+    new MutationObserver((mutations) => {
+        mutations
+            // reduce array to only entries that have really a changed value
+            .filter((mutation) => mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
+            // remove duplicates so we execute callback only once per node
+            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
+            .forEach((mutation) => attributeMutationMap.get(mutation.target)?.());
+    });
+
+const borderWidthBase = '2px';
+
+const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
+
+const fontHyphenationStyle = {
+    overflowWrap: 'break-word',
+    hyphens: 'auto',
+};
+
+const fontLineHeight = 'calc(6px + 2.125ex)';
+
+const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
+
+const fontSizeTextSmall = '1rem';
+
+const fontWeightRegular = 400;
+
+const fontStyleNormal = 'normal';
+
+const fontVariant = 'normal';
+
+const breakpointBase = 0;
+
+const breakpointXS = 480;
+
+const breakpointS = 760;
+
+const breakpointM = 1000;
+
+const breakpointL = 1300;
+
+const breakpointXL = 1760;
+
+const breakpointXXL = 1920;
+
+const breakpoint = {
+    base: breakpointBase,
+    xs: breakpointXS,
+    s: breakpointS,
+    m: breakpointM,
+    l: breakpointL,
+    xl: breakpointXL,
+    xxl: breakpointXXL,
+};
+
+const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
+const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
+const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
+
+const textXSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
+const textSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
+const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
+hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
+
+Object.entries(breakpoint).reduce((result, [key, val]) => ({ ...result, [`${val}px`]: key }), {});
+
+const hasVisibleIcon = (iconName, iconSource) => {
+    return iconName !== 'none' || !!iconSource;
+};
+
+/**
+ * Map of observed nodes and their corresponding callback functions.
+ */
+const observedNodesMap = new Map();
+/**
+ * Mutation observer for observing changes in the children of observed nodes.
+ */
+hasWindow &&
+    new MutationObserver((mutations) => {
+        // there may be race conditions in jsdom-polyfill tests  where the map is already empty when a mutation happens
+        if (observedNodesMap.size) {
+            const observedNodes = Array.from(observedNodesMap.keys());
+            mutations
+                // remove duplicates so we execute callback only once per node
+                .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
+                // find all observing parent nodes of mutated node and invoke their callbacks
+                .forEach((mutation) => {
+                observedNodes
+                    .filter((node) => node.contains(mutation.target))
+                    .forEach((node) => observedNodesMap.get(node)?.());
+            });
+        }
+    });
+
+const isTouchDevice = () => {
+    if (!hasWindow) {
+        return;
+    }
+    return !!('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
+};
+
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
+
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
+ *                                            are most useful.
+ * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
+ *                                            as-is, to `callback` when the throttled-function is executed.
+ * @param {object} [options] -              An object to configure options.
+ * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
+ *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
+ *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
+ *                                            `delay` milliseconds, the internal counter is reset).
+ * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
+ *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
+ *                                            callback will never executed if both noLeading = true and noTrailing = true.
+ * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
+ *                                            false (at end), schedule `callback` to execute after `delay` ms.
+ *
+ * @returns {Function} A new, throttled, function.
+ */
+function throttle (delay, callback, options) {
+  var _ref = options || {},
+      _ref$noTrailing = _ref.noTrailing,
+      noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
+      _ref$noLeading = _ref.noLeading,
+      noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
+      _ref$debounceMode = _ref.debounceMode,
+      debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
+  /*
+   * After wrapper has stopped being called, this timeout ensures that
+   * `callback` is executed at the proper times in `throttle` and `end`
+   * debounce modes.
+   */
+
+
+  var timeoutID;
+  var cancelled = false; // Keep track of the last time `callback` was executed.
+
+  var lastExec = 0; // Function to clear existing timeout
+
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  } // Function to cancel next exec
+
+
+  function cancel(options) {
+    var _ref2 = options || {},
+        _ref2$upcomingOnly = _ref2.upcomingOnly,
+        upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
+
+    clearExistingTimeout();
+    cancelled = !upcomingOnly;
+  }
+  /*
+   * The `wrapper` function encapsulates all of the throttling / debouncing
+   * functionality and when executed will limit the rate at which `callback`
+   * is executed.
+   */
+
+
+  function wrapper() {
+    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
+      arguments_[_key] = arguments[_key];
+    }
+
+    var self = this;
+    var elapsed = Date.now() - lastExec;
+
+    if (cancelled) {
+      return;
+    } // Execute `callback` and update the `lastExec` timestamp.
+
+
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, arguments_);
+    }
+    /*
+     * If `debounceMode` is true (at begin) this is used to clear the flag
+     * to allow future `callback` executions.
+     */
+
+
+    function clear() {
+      timeoutID = undefined;
+    }
+
+    if (!noLeading && debounceMode && !timeoutID) {
+      /*
+       * Since `wrapper` is being called for the first time and
+       * `debounceMode` is true (at begin), execute `callback`
+       * and noLeading != true.
+       */
+      exec();
+    }
+
+    clearExistingTimeout();
+
+    if (debounceMode === undefined && elapsed > delay) {
+      if (noLeading) {
+        /*
+         * In throttle mode with noLeading, if `delay` time has
+         * been exceeded, update `lastExec` and schedule `callback`
+         * to execute after `delay` ms.
+         */
+        lastExec = Date.now();
+
+        if (!noTrailing) {
+          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
+        }
+      } else {
+        /*
+         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
+         * `callback`.
+         */
+        exec();
+      }
+    } else if (noTrailing !== true) {
+      /*
+       * In trailing throttle mode, since `delay` time has not been
+       * exceeded, schedule `callback` to execute `delay` ms after most
+       * recent execution.
+       *
+       * If `debounceMode` is true (at begin), schedule `clear` to execute
+       * after `delay` ms.
+       *
+       * If `debounceMode` is false (at end), schedule `callback` to
+       * execute after `delay` ms.
+       */
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+    }
+  }
+
+  wrapper.cancel = cancel; // Return the wrapper function.
+
+  return wrapper;
+}
+
+/* eslint-disable no-undefined */
+/**
+ * Debounce execution of a function. Debouncing, unlike throttling,
+ * guarantees that a function is only executed a single time, either at the
+ * very beginning of a series of calls, or at the very end.
+ *
+ * @param {number} delay -               A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+ * @param {Function} callback -          A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
+ *                                        to `callback` when the debounced-function is executed.
+ * @param {object} [options] -           An object to configure options.
+ * @param {boolean} [options.atBegin] -  Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
+ *                                        after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
+ *                                        (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
+ *
+ * @returns {Function} A new, debounced function.
+ */
+
+function debounce (delay, callback, options) {
+  var _ref = options || {},
+      _ref$atBegin = _ref.atBegin,
+      atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
+
+  return throttle(delay, callback, {
+    debounceMode: atBegin !== false
+  });
+}
+debounce(800, (el, ariaElement) => {
+    ariaElement.innerText = `You have ${el.maxLength - el.value.length} out of ${el.maxLength} characters left`;
+});
+
+const getRole = (state) => {
+    return state === 'error' ? 'alert' : state === 'success' ? 'status' : null;
+};
+
+const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+var plainObjectConstrurctor = {}.constructor;
+function cloneStyle(style) {
+  if (style == null || typeof style !== 'object') return style;
+  if (Array.isArray(style)) return style.map(cloneStyle);
+  if (style.constructor !== plainObjectConstrurctor) return style;
+  var newStyle = {};
+
+  for (var name in style) {
+    newStyle[name] = cloneStyle(style[name]);
+  }
+
+  return newStyle;
+}
+
+/**
+ * Create a rule instance.
+ */
+
+function createRule(name, decl, options) {
+  if (name === void 0) {
+    name = 'unnamed';
+  }
+
+  var jss = options.jss;
+  var declCopy = cloneStyle(decl);
+  var rule = jss.plugins.onCreateRule(name, declCopy, options);
+  if (rule) return rule; // It is an at-rule and it has no instance.
+
+  if (name[0] === '@') ;
+
+  return null;
+}
+
+var join$1 = function join(value, by) {
+  var result = '';
+
+  for (var i = 0; i < value.length; i++) {
+    // Remove !important from the value, it will be readded later.
+    if (value[i] === '!important') break;
+    if (result) result += by;
+    result += value[i];
+  }
+
+  return result;
+};
+/**
+ * Converts JSS array value to a CSS string.
+ *
+ * `margin: [['5px', '10px']]` > `margin: 5px 10px;`
+ * `border: ['1px', '2px']` > `border: 1px, 2px;`
+ * `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`
+ * `color: ['red', !important]` > `color: red !important;`
+ */
+
+
+var toCssValue = function toCssValue(value) {
+  if (!Array.isArray(value)) return value;
+  var cssValue = ''; // Support space separated values via `[['5px', '10px']]`.
+
+  if (Array.isArray(value[0])) {
+    for (var i = 0; i < value.length; i++) {
+      if (value[i] === '!important') break;
+      if (cssValue) cssValue += ', ';
+      cssValue += join$1(value[i], ' ');
+    }
+  } else cssValue = join$1(value, ', '); // Add !important, because it was ignored.
+
+
+  if (value[value.length - 1] === '!important') {
+    cssValue += ' !important';
+  }
+
+  return cssValue;
+};
+
+function getWhitespaceSymbols(options) {
+  if (options && options.format === false) {
+    return {
+      linebreak: '',
+      space: ''
+    };
+  }
+
+  return {
+    linebreak: '\n',
+    space: ' '
+  };
+}
+
+/**
+ * Indent a string.
+ * http://jsperf.com/array-join-vs-for
+ */
+
+function indentStr(str, indent) {
+  var result = '';
+
+  for (var index = 0; index < indent; index++) {
+    result += '  ';
+  }
+
+  return result + str;
+}
+/**
+ * Converts a Rule to CSS string.
+ */
+
+
+function toCss(selector, style, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var result = '';
+  if (!style) return result;
+  var _options = options,
+      _options$indent = _options.indent,
+      indent = _options$indent === void 0 ? 0 : _options$indent;
+  var fallbacks = style.fallbacks;
+
+  if (options.format === false) {
+    indent = -Infinity;
+  }
+
+  var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+      linebreak = _getWhitespaceSymbols.linebreak,
+      space = _getWhitespaceSymbols.space;
+
+  if (selector) indent++; // Apply fallbacks first.
+
+  if (fallbacks) {
+    // Array syntax {fallbacks: [{prop: value}]}
+    if (Array.isArray(fallbacks)) {
+      for (var index = 0; index < fallbacks.length; index++) {
+        var fallback = fallbacks[index];
+
+        for (var prop in fallback) {
+          var value = fallback[prop];
+
+          if (value != null) {
+            if (result) result += linebreak;
+            result += indentStr(prop + ":" + space + toCssValue(value) + ";", indent);
+          }
+        }
+      }
+    } else {
+      // Object syntax {fallbacks: {prop: value}}
+      for (var _prop in fallbacks) {
+        var _value = fallbacks[_prop];
+
+        if (_value != null) {
+          if (result) result += linebreak;
+          result += indentStr(_prop + ":" + space + toCssValue(_value) + ";", indent);
+        }
+      }
+    }
+  }
+
+  for (var _prop2 in style) {
+    var _value2 = style[_prop2];
+
+    if (_value2 != null && _prop2 !== 'fallbacks') {
+      if (result) result += linebreak;
+      result += indentStr(_prop2 + ":" + space + toCssValue(_value2) + ";", indent);
+    }
+  } // Allow empty style in this case, because properties will be added dynamically.
+
+
+  if (!result && !options.allowEmpty) return result; // When rule is being stringified before selector was defined.
+
+  if (!selector) return result;
+  indent--;
+  if (result) result = "" + linebreak + result + linebreak;
+  return indentStr("" + selector + space + "{" + result, indent) + indentStr('}', indent);
+}
+
+var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
+var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
+var escape = (function (str) {
+  return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
+});
+
+var BaseStyleRule =
+/*#__PURE__*/
+function () {
+  function BaseStyleRule(key, style, options) {
+    this.type = 'style';
+    this.isProcessed = false;
+    var sheet = options.sheet,
+        Renderer = options.Renderer;
+    this.key = key;
+    this.options = options;
+    this.style = style;
+    if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();
+  }
+  /**
+   * Get or set a style property.
+   */
+
+
+  var _proto = BaseStyleRule.prototype;
+
+  _proto.prop = function prop(name, value, options) {
+    // It's a getter.
+    if (value === undefined) return this.style[name]; // Don't do anything if the value has not changed.
+
+    var force = options ? options.force : false;
+    if (!force && this.style[name] === value) return this;
+    var newValue = value;
+
+    if (!options || options.process !== false) {
+      newValue = this.options.jss.plugins.onChangeValue(value, name, this);
+    }
+
+    var isEmpty = newValue == null || newValue === false;
+    var isDefined = name in this.style; // Value is empty and wasn't defined before.
+
+    if (isEmpty && !isDefined && !force) return this; // We are going to remove this value.
+
+    var remove = isEmpty && isDefined;
+    if (remove) delete this.style[name];else this.style[name] = newValue; // Renderable is defined if StyleSheet option `link` is true.
+
+    if (this.renderable && this.renderer) {
+      if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
+      return this;
+    }
+
+    var sheet = this.options.sheet;
+
+    if (sheet && sheet.attached) ;
+
+    return this;
+  };
+
+  return BaseStyleRule;
+}();
+var StyleRule =
+/*#__PURE__*/
+function (_BaseStyleRule) {
+  _inheritsLoose(StyleRule, _BaseStyleRule);
+
+  function StyleRule(key, style, options) {
+    var _this;
+
+    _this = _BaseStyleRule.call(this, key, style, options) || this;
+    var selector = options.selector,
+        scoped = options.scoped,
+        sheet = options.sheet,
+        generateId = options.generateId;
+
+    if (selector) {
+      _this.selectorText = selector;
+    } else if (scoped !== false) {
+      _this.id = generateId(_assertThisInitialized(_assertThisInitialized(_this)), sheet);
+      _this.selectorText = "." + escape(_this.id);
+    }
+
+    return _this;
+  }
+  /**
+   * Set selector string.
+   * Attention: use this with caution. Most browsers didn't implement
+   * selectorText setter, so this may result in rerendering of entire Style Sheet.
+   */
+
+
+  var _proto2 = StyleRule.prototype;
+
+  /**
+   * Apply rule to an element inline.
+   */
+  _proto2.applyTo = function applyTo(renderable) {
+    var renderer = this.renderer;
+
+    if (renderer) {
+      var json = this.toJSON();
+
+      for (var prop in json) {
+        renderer.setProperty(renderable, prop, json[prop]);
+      }
+    }
+
+    return this;
+  }
+  /**
+   * Returns JSON representation of the rule.
+   * Fallbacks are not supported.
+   * Useful for inline styles.
+   */
+  ;
+
+  _proto2.toJSON = function toJSON() {
+    var json = {};
+
+    for (var prop in this.style) {
+      var value = this.style[prop];
+      if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
+    }
+
+    return json;
+  }
+  /**
+   * Generates a CSS string.
+   */
+  ;
+
+  _proto2.toString = function toString(options) {
+    var sheet = this.options.sheet;
+    var link = sheet ? sheet.options.link : false;
+    var opts = link ? _extends({}, options, {
+      allowEmpty: true
+    }) : options;
+    return toCss(this.selectorText, this.style, opts);
+  };
+
+  _createClass(StyleRule, [{
+    key: "selector",
+    set: function set(selector) {
+      if (selector === this.selectorText) return;
+      this.selectorText = selector;
+      var renderer = this.renderer,
+          renderable = this.renderable;
+      if (!renderable || !renderer) return;
+      var hasChanged = renderer.setSelector(renderable, selector); // If selector setter is not implemented, rerender the rule.
+
+      if (!hasChanged) {
+        renderer.replaceRule(renderable, this);
+      }
+    }
+    /**
+     * Get selector string.
+     */
+    ,
+    get: function get() {
+      return this.selectorText;
+    }
+  }]);
+
+  return StyleRule;
+}(BaseStyleRule);
+var pluginStyleRule = {
+  onCreateRule: function onCreateRule(key, style, options) {
+    if (key[0] === '@' || options.parent && options.parent.type === 'keyframes') {
+      return null;
+    }
+
+    return new StyleRule(key, style, options);
+  }
+};
+
+var defaultToStringOptions = {
+  indent: 1,
+  children: true
+};
+var atRegExp = /@([\w-]+)/;
+/**
+ * Conditional rule for @media, @supports
+ */
+
+var ConditionalRule =
+/*#__PURE__*/
+function () {
+  function ConditionalRule(key, styles, options) {
+    this.type = 'conditional';
+    this.isProcessed = false;
+    this.key = key;
+    var atMatch = key.match(atRegExp);
+    this.at = atMatch ? atMatch[1] : 'unknown'; // Key might contain a unique suffix in case the `name` passed by user was duplicate.
+
+    this.query = options.name || "@" + this.at;
+    this.options = options;
+    this.rules = new RuleList(_extends({}, options, {
+      parent: this
+    }));
+
+    for (var name in styles) {
+      this.rules.add(name, styles[name]);
+    }
+
+    this.rules.process();
+  }
+  /**
+   * Get a rule.
+   */
+
+
+  var _proto = ConditionalRule.prototype;
+
+  _proto.getRule = function getRule(name) {
+    return this.rules.get(name);
+  }
+  /**
+   * Get index of a rule.
+   */
+  ;
+
+  _proto.indexOf = function indexOf(rule) {
+    return this.rules.indexOf(rule);
+  }
+  /**
+   * Create and register rule, run plugins.
+   */
+  ;
+
+  _proto.addRule = function addRule(name, style, options) {
+    var rule = this.rules.add(name, style, options);
+    if (!rule) return null;
+    this.options.jss.plugins.onProcessRule(rule);
+    return rule;
+  }
+  /**
+   * Replace rule, run plugins.
+   */
+  ;
+
+  _proto.replaceRule = function replaceRule(name, style, options) {
+    var newRule = this.rules.replace(name, style, options);
+    if (newRule) this.options.jss.plugins.onProcessRule(newRule);
+    return newRule;
+  }
+  /**
+   * Generates a CSS string.
+   */
+  ;
+
+  _proto.toString = function toString(options) {
+    if (options === void 0) {
+      options = defaultToStringOptions;
+    }
+
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
+    if (options.indent == null) options.indent = defaultToStringOptions.indent;
+    if (options.children == null) options.children = defaultToStringOptions.children;
+
+    if (options.children === false) {
+      return this.query + " {}";
+    }
+
+    var children = this.rules.toString(options);
+    return children ? this.query + " {" + linebreak + children + linebreak + "}" : '';
+  };
+
+  return ConditionalRule;
+}();
+var keyRegExp = /@container|@media|@supports\s+/;
+var pluginConditionalRule = {
+  onCreateRule: function onCreateRule(key, styles, options) {
+    return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;
+  }
+};
+
+var defaultToStringOptions$1 = {
+  indent: 1,
+  children: true
+};
+var nameRegExp = /@keyframes\s+([\w-]+)/;
+/**
+ * Rule for @keyframes
+ */
+
+var KeyframesRule =
+/*#__PURE__*/
+function () {
+  function KeyframesRule(key, frames, options) {
+    this.type = 'keyframes';
+    this.at = '@keyframes';
+    this.isProcessed = false;
+    var nameMatch = key.match(nameRegExp);
+
+    if (nameMatch && nameMatch[1]) {
+      this.name = nameMatch[1];
+    } else {
+      this.name = 'noname';
+    }
+
+    this.key = this.type + "-" + this.name;
+    this.options = options;
+    var scoped = options.scoped,
+        sheet = options.sheet,
+        generateId = options.generateId;
+    this.id = scoped === false ? this.name : escape(generateId(this, sheet));
+    this.rules = new RuleList(_extends({}, options, {
+      parent: this
+    }));
+
+    for (var name in frames) {
+      this.rules.add(name, frames[name], _extends({}, options, {
+        parent: this
+      }));
+    }
+
+    this.rules.process();
+  }
+  /**
+   * Generates a CSS string.
+   */
+
+
+  var _proto = KeyframesRule.prototype;
+
+  _proto.toString = function toString(options) {
+    if (options === void 0) {
+      options = defaultToStringOptions$1;
+    }
+
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
+    if (options.indent == null) options.indent = defaultToStringOptions$1.indent;
+    if (options.children == null) options.children = defaultToStringOptions$1.children;
+
+    if (options.children === false) {
+      return this.at + " " + this.id + " {}";
+    }
+
+    var children = this.rules.toString(options);
+    if (children) children = "" + linebreak + children + linebreak;
+    return this.at + " " + this.id + " {" + children + "}";
+  };
+
+  return KeyframesRule;
+}();
+var keyRegExp$1 = /@keyframes\s+/;
+var refRegExp$1 = /\$([\w-]+)/g;
+
+var findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {
+  if (typeof val === 'string') {
+    return val.replace(refRegExp$1, function (match, name) {
+      if (name in keyframes) {
+        return keyframes[name];
+      }
+      return match;
+    });
+  }
+
+  return val;
+};
+/**
+ * Replace the reference for a animation name.
+ */
+
+
+var replaceRef = function replaceRef(style, prop, keyframes) {
+  var value = style[prop];
+  var refKeyframe = findReferencedKeyframe(value, keyframes);
+
+  if (refKeyframe !== value) {
+    style[prop] = refKeyframe;
+  }
+};
+
+var pluginKeyframesRule = {
+  onCreateRule: function onCreateRule(key, frames, options) {
+    return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
+  },
+  // Animation name ref replacer.
+  onProcessStyle: function onProcessStyle(style, rule, sheet) {
+    if (rule.type !== 'style' || !sheet) return style;
+    if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes);
+    if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes);
+    return style;
+  },
+  onChangeValue: function onChangeValue(val, prop, rule) {
+    var sheet = rule.options.sheet;
+
+    if (!sheet) {
+      return val;
+    }
+
+    switch (prop) {
+      case 'animation':
+        return findReferencedKeyframe(val, sheet.keyframes);
+
+      case 'animation-name':
+        return findReferencedKeyframe(val, sheet.keyframes);
+
+      default:
+        return val;
+    }
+  }
+};
+
+var KeyframeRule =
+/*#__PURE__*/
+function (_BaseStyleRule) {
+  _inheritsLoose(KeyframeRule, _BaseStyleRule);
+
+  function KeyframeRule() {
+    return _BaseStyleRule.apply(this, arguments) || this;
+  }
+
+  var _proto = KeyframeRule.prototype;
+
+  /**
+   * Generates a CSS string.
+   */
+  _proto.toString = function toString(options) {
+    var sheet = this.options.sheet;
+    var link = sheet ? sheet.options.link : false;
+    var opts = link ? _extends({}, options, {
+      allowEmpty: true
+    }) : options;
+    return toCss(this.key, this.style, opts);
+  };
+
+  return KeyframeRule;
+}(BaseStyleRule);
+var pluginKeyframeRule = {
+  onCreateRule: function onCreateRule(key, style, options) {
+    if (options.parent && options.parent.type === 'keyframes') {
+      return new KeyframeRule(key, style, options);
+    }
+
+    return null;
+  }
+};
+
+var FontFaceRule =
+/*#__PURE__*/
+function () {
+  function FontFaceRule(key, style, options) {
+    this.type = 'font-face';
+    this.at = '@font-face';
+    this.isProcessed = false;
+    this.key = key;
+    this.style = style;
+    this.options = options;
+  }
+  /**
+   * Generates a CSS string.
+   */
+
+
+  var _proto = FontFaceRule.prototype;
+
+  _proto.toString = function toString(options) {
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
+    if (Array.isArray(this.style)) {
+      var str = '';
+
+      for (var index = 0; index < this.style.length; index++) {
+        str += toCss(this.at, this.style[index]);
+        if (this.style[index + 1]) str += linebreak;
+      }
+
+      return str;
+    }
+
+    return toCss(this.at, this.style, options);
+  };
+
+  return FontFaceRule;
+}();
+var keyRegExp$2 = /@font-face/;
+var pluginFontFaceRule = {
+  onCreateRule: function onCreateRule(key, style, options) {
+    return keyRegExp$2.test(key) ? new FontFaceRule(key, style, options) : null;
+  }
+};
+
+var ViewportRule =
+/*#__PURE__*/
+function () {
+  function ViewportRule(key, style, options) {
+    this.type = 'viewport';
+    this.at = '@viewport';
+    this.isProcessed = false;
+    this.key = key;
+    this.style = style;
+    this.options = options;
+  }
+  /**
+   * Generates a CSS string.
+   */
+
+
+  var _proto = ViewportRule.prototype;
+
+  _proto.toString = function toString(options) {
+    return toCss(this.key, this.style, options);
+  };
+
+  return ViewportRule;
+}();
+var pluginViewportRule = {
+  onCreateRule: function onCreateRule(key, style, options) {
+    return key === '@viewport' || key === '@-ms-viewport' ? new ViewportRule(key, style, options) : null;
+  }
+};
+
+var SimpleRule =
+/*#__PURE__*/
+function () {
+  function SimpleRule(key, value, options) {
+    this.type = 'simple';
+    this.isProcessed = false;
+    this.key = key;
+    this.value = value;
+    this.options = options;
+  }
+  /**
+   * Generates a CSS string.
+   */
+  // eslint-disable-next-line no-unused-vars
+
+
+  var _proto = SimpleRule.prototype;
+
+  _proto.toString = function toString(options) {
+    if (Array.isArray(this.value)) {
+      var str = '';
+
+      for (var index = 0; index < this.value.length; index++) {
+        str += this.key + " " + this.value[index] + ";";
+        if (this.value[index + 1]) str += '\n';
+      }
+
+      return str;
+    }
+
+    return this.key + " " + this.value + ";";
+  };
+
+  return SimpleRule;
+}();
+var keysMap = {
+  '@charset': true,
+  '@import': true,
+  '@namespace': true
+};
+var pluginSimpleRule = {
+  onCreateRule: function onCreateRule(key, value, options) {
+    return key in keysMap ? new SimpleRule(key, value, options) : null;
+  }
+};
+
+var plugins = [pluginStyleRule, pluginConditionalRule, pluginKeyframesRule, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
+
+var defaultUpdateOptions = {
+  process: true
+};
+var forceUpdateOptions = {
+  force: true,
+  process: true
+  /**
+   * Contains rules objects and allows adding/removing etc.
+   * Is used for e.g. by `StyleSheet` or `ConditionalRule`.
+   */
+
+};
+
+var RuleList =
+/*#__PURE__*/
+function () {
+  // Rules registry for access by .get() method.
+  // It contains the same rule registered by name and by selector.
+  // Original styles object.
+  // Used to ensure correct rules order.
+  function RuleList(options) {
+    this.map = {};
+    this.raw = {};
+    this.index = [];
+    this.counter = 0;
+    this.options = options;
+    this.classes = options.classes;
+    this.keyframes = options.keyframes;
+  }
+  /**
+   * Create and register rule.
+   *
+   * Will not render after Style Sheet was rendered the first time.
+   */
+
+
+  var _proto = RuleList.prototype;
+
+  _proto.add = function add(name, decl, ruleOptions) {
+    var _this$options = this.options,
+        parent = _this$options.parent,
+        sheet = _this$options.sheet,
+        jss = _this$options.jss,
+        Renderer = _this$options.Renderer,
+        generateId = _this$options.generateId,
+        scoped = _this$options.scoped;
+
+    var options = _extends({
+      classes: this.classes,
+      parent: parent,
+      sheet: sheet,
+      jss: jss,
+      Renderer: Renderer,
+      generateId: generateId,
+      scoped: scoped,
+      name: name,
+      keyframes: this.keyframes,
+      selector: undefined
+    }, ruleOptions); // When user uses .createStyleSheet(), duplicate names are not possible, but
+    // `sheet.addRule()` opens the door for any duplicate rule name. When this happens
+    // we need to make the key unique within this RuleList instance scope.
+
+
+    var key = name;
+
+    if (name in this.raw) {
+      key = name + "-d" + this.counter++;
+    } // We need to save the original decl before creating the rule
+    // because cache plugin needs to use it as a key to return a cached rule.
+
+
+    this.raw[key] = decl;
+
+    if (key in this.classes) {
+      // E.g. rules inside of @media container
+      options.selector = "." + escape(this.classes[key]);
+    }
+
+    var rule = createRule(key, decl, options);
+    if (!rule) return null;
+    this.register(rule);
+    var index = options.index === undefined ? this.index.length : options.index;
+    this.index.splice(index, 0, rule);
+    return rule;
+  }
+  /**
+   * Replace rule.
+   * Create a new rule and remove old one instead of overwriting
+   * because we want to invoke onCreateRule hook to make plugins work.
+   */
+  ;
+
+  _proto.replace = function replace(name, decl, ruleOptions) {
+    var oldRule = this.get(name);
+    var oldIndex = this.index.indexOf(oldRule);
+
+    if (oldRule) {
+      this.remove(oldRule);
+    }
+
+    var options = ruleOptions;
+    if (oldIndex !== -1) options = _extends({}, ruleOptions, {
+      index: oldIndex
+    });
+    return this.add(name, decl, options);
+  }
+  /**
+   * Get a rule by name or selector.
+   */
+  ;
+
+  _proto.get = function get(nameOrSelector) {
+    return this.map[nameOrSelector];
+  }
+  /**
+   * Delete a rule.
+   */
+  ;
+
+  _proto.remove = function remove(rule) {
+    this.unregister(rule);
+    delete this.raw[rule.key];
+    this.index.splice(this.index.indexOf(rule), 1);
+  }
+  /**
+   * Get index of a rule.
+   */
+  ;
+
+  _proto.indexOf = function indexOf(rule) {
+    return this.index.indexOf(rule);
+  }
+  /**
+   * Run `onProcessRule()` plugins on every rule.
+   */
+  ;
+
+  _proto.process = function process() {
+    var plugins = this.options.jss.plugins; // We need to clone array because if we modify the index somewhere else during a loop
+    // we end up with very hard-to-track-down side effects.
+
+    this.index.slice(0).forEach(plugins.onProcessRule, plugins);
+  }
+  /**
+   * Register a rule in `.map`, `.classes` and `.keyframes` maps.
+   */
+  ;
+
+  _proto.register = function register(rule) {
+    this.map[rule.key] = rule;
+
+    if (rule instanceof StyleRule) {
+      this.map[rule.selector] = rule;
+      if (rule.id) this.classes[rule.key] = rule.id;
+    } else if (rule instanceof KeyframesRule && this.keyframes) {
+      this.keyframes[rule.name] = rule.id;
+    }
+  }
+  /**
+   * Unregister a rule.
+   */
+  ;
+
+  _proto.unregister = function unregister(rule) {
+    delete this.map[rule.key];
+
+    if (rule instanceof StyleRule) {
+      delete this.map[rule.selector];
+      delete this.classes[rule.key];
+    } else if (rule instanceof KeyframesRule) {
+      delete this.keyframes[rule.name];
+    }
+  }
+  /**
+   * Update the function values with a new data.
+   */
+  ;
+
+  _proto.update = function update() {
+    var name;
+    var data;
+    var options;
+
+    if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
+      name = arguments.length <= 0 ? undefined : arguments[0];
+      data = arguments.length <= 1 ? undefined : arguments[1];
+      options = arguments.length <= 2 ? undefined : arguments[2];
+    } else {
+      data = arguments.length <= 0 ? undefined : arguments[0];
+      options = arguments.length <= 1 ? undefined : arguments[1];
+      name = null;
+    }
+
+    if (name) {
+      this.updateOne(this.get(name), data, options);
+    } else {
+      for (var index = 0; index < this.index.length; index++) {
+        this.updateOne(this.index[index], data, options);
+      }
+    }
+  }
+  /**
+   * Execute plugins, update rule props.
+   */
+  ;
+
+  _proto.updateOne = function updateOne(rule, data, options) {
+    if (options === void 0) {
+      options = defaultUpdateOptions;
+    }
+
+    var _this$options2 = this.options,
+        plugins = _this$options2.jss.plugins,
+        sheet = _this$options2.sheet; // It is a rules container like for e.g. ConditionalRule.
+
+    if (rule.rules instanceof RuleList) {
+      rule.rules.update(data, options);
+      return;
+    }
+
+    var style = rule.style;
+    plugins.onUpdate(data, rule, sheet, options); // We rely on a new `style` ref in case it was mutated during onUpdate hook.
+
+    if (options.process && style && style !== rule.style) {
+      // We need to run the plugins in case new `style` relies on syntax plugins.
+      plugins.onProcessStyle(rule.style, rule, sheet); // Update and add props.
+
+      for (var prop in rule.style) {
+        var nextValue = rule.style[prop];
+        var prevValue = style[prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
+        // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
+
+        if (nextValue !== prevValue) {
+          rule.prop(prop, nextValue, forceUpdateOptions);
+        }
+      } // Remove props.
+
+
+      for (var _prop in style) {
+        var _nextValue = rule.style[_prop];
+        var _prevValue = style[_prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
+        // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
+
+        if (_nextValue == null && _nextValue !== _prevValue) {
+          rule.prop(_prop, null, forceUpdateOptions);
+        }
+      }
+    }
+  }
+  /**
+   * Convert rules to a CSS string.
+   */
+  ;
+
+  _proto.toString = function toString(options) {
+    var str = '';
+    var sheet = this.options.sheet;
+    var link = sheet ? sheet.options.link : false;
+
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
+    for (var index = 0; index < this.index.length; index++) {
+      var rule = this.index[index];
+      var css = rule.toString(options); // No need to render an empty rule.
+
+      if (!css && !link) continue;
+      if (str) str += linebreak;
+      str += css;
+    }
+
+    return str;
+  };
+
+  return RuleList;
+}();
+
+var StyleSheet =
+/*#__PURE__*/
+function () {
+  function StyleSheet(styles, options) {
+    this.attached = false;
+    this.deployed = false;
+    this.classes = {};
+    this.keyframes = {};
+    this.options = _extends({}, options, {
+      sheet: this,
+      parent: this,
+      classes: this.classes,
+      keyframes: this.keyframes
+    });
+
+    if (options.Renderer) {
+      this.renderer = new options.Renderer(this);
+    }
+
+    this.rules = new RuleList(this.options);
+
+    for (var name in styles) {
+      this.rules.add(name, styles[name]);
+    }
+
+    this.rules.process();
+  }
+  /**
+   * Attach renderable to the render tree.
+   */
+
+
+  var _proto = StyleSheet.prototype;
+
+  _proto.attach = function attach() {
+    if (this.attached) return this;
+    if (this.renderer) this.renderer.attach();
+    this.attached = true; // Order is important, because we can't use insertRule API if style element is not attached.
+
+    if (!this.deployed) this.deploy();
+    return this;
+  }
+  /**
+   * Remove renderable from render tree.
+   */
+  ;
+
+  _proto.detach = function detach() {
+    if (!this.attached) return this;
+    if (this.renderer) this.renderer.detach();
+    this.attached = false;
+    return this;
+  }
+  /**
+   * Add a rule to the current stylesheet.
+   * Will insert a rule also after the stylesheet has been rendered first time.
+   */
+  ;
+
+  _proto.addRule = function addRule(name, decl, options) {
+    var queue = this.queue; // Plugins can create rules.
+    // In order to preserve the right order, we need to queue all `.addRule` calls,
+    // which happen after the first `rules.add()` call.
+
+    if (this.attached && !queue) this.queue = [];
+    var rule = this.rules.add(name, decl, options);
+    if (!rule) return null;
+    this.options.jss.plugins.onProcessRule(rule);
+
+    if (this.attached) {
+      if (!this.deployed) return rule; // Don't insert rule directly if there is no stringified version yet.
+      // It will be inserted all together when .attach is called.
+
+      if (queue) queue.push(rule);else {
+        this.insertRule(rule);
+
+        if (this.queue) {
+          this.queue.forEach(this.insertRule, this);
+          this.queue = undefined;
+        }
+      }
+      return rule;
+    } // We can't add rules to a detached style node.
+    // We will redeploy the sheet once user will attach it.
+
+
+    this.deployed = false;
+    return rule;
+  }
+  /**
+   * Replace a rule in the current stylesheet.
+   */
+  ;
+
+  _proto.replaceRule = function replaceRule(nameOrSelector, decl, options) {
+    var oldRule = this.rules.get(nameOrSelector);
+    if (!oldRule) return this.addRule(nameOrSelector, decl, options);
+    var newRule = this.rules.replace(nameOrSelector, decl, options);
+
+    if (newRule) {
+      this.options.jss.plugins.onProcessRule(newRule);
+    }
+
+    if (this.attached) {
+      if (!this.deployed) return newRule; // Don't replace / delete rule directly if there is no stringified version yet.
+      // It will be inserted all together when .attach is called.
+
+      if (this.renderer) {
+        if (!newRule) {
+          this.renderer.deleteRule(oldRule);
+        } else if (oldRule.renderable) {
+          this.renderer.replaceRule(oldRule.renderable, newRule);
+        }
+      }
+
+      return newRule;
+    } // We can't replace rules to a detached style node.
+    // We will redeploy the sheet once user will attach it.
+
+
+    this.deployed = false;
+    return newRule;
+  }
+  /**
+   * Insert rule into the StyleSheet
+   */
+  ;
+
+  _proto.insertRule = function insertRule(rule) {
+    if (this.renderer) {
+      this.renderer.insertRule(rule);
+    }
+  }
+  /**
+   * Create and add rules.
+   * Will render also after Style Sheet was rendered the first time.
+   */
+  ;
+
+  _proto.addRules = function addRules(styles, options) {
+    var added = [];
+
+    for (var name in styles) {
+      var rule = this.addRule(name, styles[name], options);
+      if (rule) added.push(rule);
+    }
+
+    return added;
+  }
+  /**
+   * Get a rule by name or selector.
+   */
+  ;
+
+  _proto.getRule = function getRule(nameOrSelector) {
+    return this.rules.get(nameOrSelector);
+  }
+  /**
+   * Delete a rule by name.
+   * Returns `true`: if rule has been deleted from the DOM.
+   */
+  ;
+
+  _proto.deleteRule = function deleteRule(name) {
+    var rule = typeof name === 'object' ? name : this.rules.get(name);
+
+    if (!rule || // Style sheet was created without link: true and attached, in this case we
+    // won't be able to remove the CSS rule from the DOM.
+    this.attached && !rule.renderable) {
+      return false;
+    }
+
+    this.rules.remove(rule);
+
+    if (this.attached && rule.renderable && this.renderer) {
+      return this.renderer.deleteRule(rule.renderable);
+    }
+
+    return true;
+  }
+  /**
+   * Get index of a rule.
+   */
+  ;
+
+  _proto.indexOf = function indexOf(rule) {
+    return this.rules.indexOf(rule);
+  }
+  /**
+   * Deploy pure CSS string to a renderable.
+   */
+  ;
+
+  _proto.deploy = function deploy() {
+    if (this.renderer) this.renderer.deploy();
+    this.deployed = true;
+    return this;
+  }
+  /**
+   * Update the function values with a new data.
+   */
+  ;
+
+  _proto.update = function update() {
+    var _this$rules;
+
+    (_this$rules = this.rules).update.apply(_this$rules, arguments);
+
+    return this;
+  }
+  /**
+   * Updates a single rule.
+   */
+  ;
+
+  _proto.updateOne = function updateOne(rule, data, options) {
+    this.rules.updateOne(rule, data, options);
+    return this;
+  }
+  /**
+   * Convert rules to a CSS string.
+   */
+  ;
+
+  _proto.toString = function toString(options) {
+    return this.rules.toString(options);
+  };
+
+  return StyleSheet;
+}();
+
+var PluginsRegistry =
+/*#__PURE__*/
+function () {
+  function PluginsRegistry() {
+    this.plugins = {
+      internal: [],
+      external: []
+    };
+    this.registry = {};
+  }
+
+  var _proto = PluginsRegistry.prototype;
+
+  /**
+   * Call `onCreateRule` hooks and return an object if returned by a hook.
+   */
+  _proto.onCreateRule = function onCreateRule(name, decl, options) {
+    for (var i = 0; i < this.registry.onCreateRule.length; i++) {
+      var rule = this.registry.onCreateRule[i](name, decl, options);
+      if (rule) return rule;
+    }
+
+    return null;
+  }
+  /**
+   * Call `onProcessRule` hooks.
+   */
+  ;
+
+  _proto.onProcessRule = function onProcessRule(rule) {
+    if (rule.isProcessed) return;
+    var sheet = rule.options.sheet;
+
+    for (var i = 0; i < this.registry.onProcessRule.length; i++) {
+      this.registry.onProcessRule[i](rule, sheet);
+    }
+
+    if (rule.style) this.onProcessStyle(rule.style, rule, sheet);
+    rule.isProcessed = true;
+  }
+  /**
+   * Call `onProcessStyle` hooks.
+   */
+  ;
+
+  _proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {
+    for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
+      rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
+    }
+  }
+  /**
+   * Call `onProcessSheet` hooks.
+   */
+  ;
+
+  _proto.onProcessSheet = function onProcessSheet(sheet) {
+    for (var i = 0; i < this.registry.onProcessSheet.length; i++) {
+      this.registry.onProcessSheet[i](sheet);
+    }
+  }
+  /**
+   * Call `onUpdate` hooks.
+   */
+  ;
+
+  _proto.onUpdate = function onUpdate(data, rule, sheet, options) {
+    for (var i = 0; i < this.registry.onUpdate.length; i++) {
+      this.registry.onUpdate[i](data, rule, sheet, options);
+    }
+  }
+  /**
+   * Call `onChangeValue` hooks.
+   */
+  ;
+
+  _proto.onChangeValue = function onChangeValue(value, prop, rule) {
+    var processedValue = value;
+
+    for (var i = 0; i < this.registry.onChangeValue.length; i++) {
+      processedValue = this.registry.onChangeValue[i](processedValue, prop, rule);
+    }
+
+    return processedValue;
+  }
+  /**
+   * Register a plugin.
+   */
+  ;
+
+  _proto.use = function use(newPlugin, options) {
+    if (options === void 0) {
+      options = {
+        queue: 'external'
+      };
+    }
+
+    var plugins = this.plugins[options.queue]; // Avoids applying same plugin twice, at least based on ref.
+
+    if (plugins.indexOf(newPlugin) !== -1) {
+      return;
+    }
+
+    plugins.push(newPlugin);
+    this.registry = [].concat(this.plugins.external, this.plugins.internal).reduce(function (registry, plugin) {
+      for (var name in plugin) {
+        if (name in registry) {
+          registry[name].push(plugin[name]);
+        }
+      }
+
+      return registry;
+    }, {
+      onCreateRule: [],
+      onProcessRule: [],
+      onProcessStyle: [],
+      onProcessSheet: [],
+      onChangeValue: [],
+      onUpdate: []
+    });
+  };
+
+  return PluginsRegistry;
+}();
+
+/**
+ * Sheets registry to access all instances in one place.
+ */
+
+var SheetsRegistry =
+/*#__PURE__*/
+function () {
+  function SheetsRegistry() {
+    this.registry = [];
+  }
+
+  var _proto = SheetsRegistry.prototype;
+
+  /**
+   * Register a Style Sheet.
+   */
+  _proto.add = function add(sheet) {
+    var registry = this.registry;
+    var index = sheet.options.index;
+    if (registry.indexOf(sheet) !== -1) return;
+
+    if (registry.length === 0 || index >= this.index) {
+      registry.push(sheet);
+      return;
+    } // Find a position.
+
+
+    for (var i = 0; i < registry.length; i++) {
+      if (registry[i].options.index > index) {
+        registry.splice(i, 0, sheet);
+        return;
+      }
+    }
+  }
+  /**
+   * Reset the registry.
+   */
+  ;
+
+  _proto.reset = function reset() {
+    this.registry = [];
+  }
+  /**
+   * Remove a Style Sheet.
+   */
+  ;
+
+  _proto.remove = function remove(sheet) {
+    var index = this.registry.indexOf(sheet);
+    this.registry.splice(index, 1);
+  }
+  /**
+   * Convert all attached sheets to a CSS string.
+   */
+  ;
+
+  _proto.toString = function toString(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+        attached = _ref.attached,
+        options = _objectWithoutPropertiesLoose(_ref, ["attached"]);
+
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
+    var css = '';
+
+    for (var i = 0; i < this.registry.length; i++) {
+      var sheet = this.registry[i];
+
+      if (attached != null && sheet.attached !== attached) {
+        continue;
+      }
+
+      if (css) css += linebreak;
+      css += sheet.toString(options);
+    }
+
+    return css;
+  };
+
+  _createClass(SheetsRegistry, [{
+    key: "index",
+
+    /**
+     * Current highest index number.
+     */
+    get: function get() {
+      return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;
+    }
+  }]);
+
+  return SheetsRegistry;
+}();
+
+/**
+ * This is a global sheets registry. Only DomRenderer will add sheets to it.
+ * On the server one should use an own SheetsRegistry instance and add the
+ * sheets to it, because you need to make sure to create a new registry for
+ * each request in order to not leak sheets across requests.
+ */
+
+var sheets = new SheetsRegistry();
+
+/* eslint-disable */
+
+/**
+ * Now that `globalThis` is available on most platforms
+ * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis#browser_compatibility)
+ * we check for `globalThis` first. `globalThis` is necessary for jss
+ * to run in Agoric's secure version of JavaScript (SES). Under SES,
+ * `globalThis` exists, but `window`, `self`, and `Function('return
+ * this')()` are all undefined for security reasons.
+ *
+ * https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
+ */
+var globalThis$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' && window.Math === Math ? window : typeof self !== 'undefined' && self.Math === Math ? self : Function('return this')();
+
+var ns = '2f1acc6c3a606b082e5eef5e54414ffb';
+if (globalThis$1[ns] == null) globalThis$1[ns] = 0; // Bundle may contain multiple JSS versions at the same time. In order to identify
+// the current version with just one short number and use it for classes generation
+// we use a counter. Also it is more accurate, because user can manually reevaluate
+// the module.
+
+var moduleId = globalThis$1[ns]++;
+/**
+ * Returns a function which generates unique class names based on counters.
+ * When new generator function is created, rule counter is reseted.
+ * We need to reset the rule counter for SSR for each request.
+ */
+
+var createGenerateId = function createGenerateId(options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var ruleCounter = 0;
+
+  var generateId = function generateId(rule, sheet) {
+    ruleCounter += 1;
+
+    var jssId = '';
+    var prefix = '';
+
+    if (sheet) {
+      if (sheet.options.classNamePrefix) {
+        prefix = sheet.options.classNamePrefix;
+      }
+
+      if (sheet.options.jss.id != null) {
+        jssId = String(sheet.options.jss.id);
+      }
+    }
+
+    if (options.minify) {
+      // Using "c" because a number can't be the first char in a class name.
+      return "" + (prefix || 'c') + moduleId + jssId + ruleCounter;
+    }
+
+    return prefix + rule.key + "-" + moduleId + (jssId ? "-" + jssId : '') + "-" + ruleCounter;
+  };
+
+  return generateId;
+};
+
+/**
+ * Cache the value from the first time a function is called.
+ */
+
+var memoize = function memoize(fn) {
+  var value;
+  return function () {
+    if (!value) value = fn();
+    return value;
+  };
+};
+/**
+ * Get a style property value.
+ */
+
+
+var getPropertyValue = function getPropertyValue(cssRule, prop) {
+  try {
+    // Support CSSTOM.
+    if (cssRule.attributeStyleMap) {
+      return cssRule.attributeStyleMap.get(prop);
+    }
+
+    return cssRule.style.getPropertyValue(prop);
+  } catch (err) {
+    // IE may throw if property is unknown.
+    return '';
+  }
+};
+/**
+ * Set a style property.
+ */
+
+
+var setProperty = function setProperty(cssRule, prop, value) {
+  try {
+    var cssValue = value;
+
+    if (Array.isArray(value)) {
+      cssValue = toCssValue(value);
+    } // Support CSSTOM.
+
+
+    if (cssRule.attributeStyleMap) {
+      cssRule.attributeStyleMap.set(prop, cssValue);
+    } else {
+      var indexOfImportantFlag = cssValue ? cssValue.indexOf('!important') : -1;
+      var cssValueWithoutImportantFlag = indexOfImportantFlag > -1 ? cssValue.substr(0, indexOfImportantFlag - 1) : cssValue;
+      cssRule.style.setProperty(prop, cssValueWithoutImportantFlag, indexOfImportantFlag > -1 ? 'important' : '');
+    }
+  } catch (err) {
+    // IE may throw if property is unknown.
+    return false;
+  }
+
+  return true;
+};
+/**
+ * Remove a style property.
+ */
+
+
+var removeProperty = function removeProperty(cssRule, prop) {
+  try {
+    // Support CSSTOM.
+    if (cssRule.attributeStyleMap) {
+      cssRule.attributeStyleMap.delete(prop);
+    } else {
+      cssRule.style.removeProperty(prop);
+    }
+  } catch (err) {
+  }
+};
+/**
+ * Set the selector.
+ */
+
+
+var setSelector = function setSelector(cssRule, selectorText) {
+  cssRule.selectorText = selectorText; // Return false if setter was not successful.
+  // Currently works in chrome only.
+
+  return cssRule.selectorText === selectorText;
+};
+/**
+ * Gets the `head` element upon the first call and caches it.
+ * We assume it can't be null.
+ */
+
+
+var getHead = memoize(function () {
+  return document.querySelector('head');
+});
+/**
+ * Find attached sheet with an index higher than the passed one.
+ */
+
+function findHigherSheet(registry, options) {
+  for (var i = 0; i < registry.length; i++) {
+    var sheet = registry[i];
+
+    if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {
+      return sheet;
+    }
+  }
+
+  return null;
+}
+/**
+ * Find attached sheet with the highest index.
+ */
+
+
+function findHighestSheet(registry, options) {
+  for (var i = registry.length - 1; i >= 0; i--) {
+    var sheet = registry[i];
+
+    if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {
+      return sheet;
+    }
+  }
+
+  return null;
+}
+/**
+ * Find a comment with "jss" inside.
+ */
+
+
+function findCommentNode(text) {
+  var head = getHead();
+
+  for (var i = 0; i < head.childNodes.length; i++) {
+    var node = head.childNodes[i];
+
+    if (node.nodeType === 8 && node.nodeValue.trim() === text) {
+      return node;
+    }
+  }
+
+  return null;
+}
+/**
+ * Find a node before which we can insert the sheet.
+ */
+
+
+function findPrevNode(options) {
+  var registry = sheets.registry;
+
+  if (registry.length > 0) {
+    // Try to insert before the next higher sheet.
+    var sheet = findHigherSheet(registry, options);
+
+    if (sheet && sheet.renderer) {
+      return {
+        parent: sheet.renderer.element.parentNode,
+        node: sheet.renderer.element
+      };
+    } // Otherwise insert after the last attached.
+
+
+    sheet = findHighestSheet(registry, options);
+
+    if (sheet && sheet.renderer) {
+      return {
+        parent: sheet.renderer.element.parentNode,
+        node: sheet.renderer.element.nextSibling
+      };
+    }
+  } // Try to find a comment placeholder if registry is empty.
+
+
+  var insertionPoint = options.insertionPoint;
+
+  if (insertionPoint && typeof insertionPoint === 'string') {
+    var comment = findCommentNode(insertionPoint);
+
+    if (comment) {
+      return {
+        parent: comment.parentNode,
+        node: comment.nextSibling
+      };
+    } // If user specifies an insertion point and it can't be found in the document -
+  }
+
+  return false;
+}
+/**
+ * Insert style element into the DOM.
+ */
+
+
+function insertStyle(style, options) {
+  var insertionPoint = options.insertionPoint;
+  var nextNode = findPrevNode(options);
+
+  if (nextNode !== false && nextNode.parent) {
+    nextNode.parent.insertBefore(style, nextNode.node);
+    return;
+  } // Works with iframes and any node types.
+
+
+  if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
+    var insertionPointElement = insertionPoint;
+    var parentNode = insertionPointElement.parentNode;
+    if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);
+    return;
+  }
+
+  getHead().appendChild(style);
+}
+/**
+ * Read jss nonce setting from the page if the user has set it.
+ */
+
+
+var getNonce = memoize(function () {
+  var node = document.querySelector('meta[property="csp-nonce"]');
+  return node ? node.getAttribute('content') : null;
+});
+
+var _insertRule = function insertRule(container, rule, index) {
+  try {
+    if ('insertRule' in container) {
+      container.insertRule(rule, index);
+    } // Keyframes rule.
+    else if ('appendRule' in container) {
+        container.appendRule(rule);
+      }
+  } catch (err) {
+    return false;
+  }
+
+  return container.cssRules[index];
+};
+
+var getValidRuleInsertionIndex = function getValidRuleInsertionIndex(container, index) {
+  var maxIndex = container.cssRules.length; // In case previous insertion fails, passed index might be wrong
+
+  if (index === undefined || index > maxIndex) {
+    // eslint-disable-next-line no-param-reassign
+    return maxIndex;
+  }
+
+  return index;
+};
+
+var createStyle = function createStyle() {
+  var el = document.createElement('style'); // Without it, IE will have a broken source order specificity if we
+  // insert rules after we insert the style tag.
+  // It seems to kick-off the source order specificity algorithm.
+
+  el.textContent = '\n';
+  return el;
+};
+
+var DomRenderer =
+/*#__PURE__*/
+function () {
+  // Will be empty if link: true option is not set, because
+  // it is only for use together with insertRule API.
+  function DomRenderer(sheet) {
+    this.getPropertyValue = getPropertyValue;
+    this.setProperty = setProperty;
+    this.removeProperty = removeProperty;
+    this.setSelector = setSelector;
+    this.hasInsertedRules = false;
+    this.cssRules = [];
+    // There is no sheet when the renderer is used from a standalone StyleRule.
+    if (sheet) sheets.add(sheet);
+    this.sheet = sheet;
+
+    var _ref = this.sheet ? this.sheet.options : {},
+        media = _ref.media,
+        meta = _ref.meta,
+        element = _ref.element;
+
+    this.element = element || createStyle();
+    this.element.setAttribute('data-jss', '');
+    if (media) this.element.setAttribute('media', media);
+    if (meta) this.element.setAttribute('data-meta', meta);
+    var nonce = getNonce();
+    if (nonce) this.element.setAttribute('nonce', nonce);
+  }
+  /**
+   * Insert style element into render tree.
+   */
+
+
+  var _proto = DomRenderer.prototype;
+
+  _proto.attach = function attach() {
+    // In the case the element node is external and it is already in the DOM.
+    if (this.element.parentNode || !this.sheet) return;
+    insertStyle(this.element, this.sheet.options); // When rules are inserted using `insertRule` API, after `sheet.detach().attach()`
+    // most browsers create a new CSSStyleSheet, except of all IEs.
+
+    var deployed = Boolean(this.sheet && this.sheet.deployed);
+
+    if (this.hasInsertedRules && deployed) {
+      this.hasInsertedRules = false;
+      this.deploy();
+    }
+  }
+  /**
+   * Remove style element from render tree.
+   */
+  ;
+
+  _proto.detach = function detach() {
+    if (!this.sheet) return;
+    var parentNode = this.element.parentNode;
+    if (parentNode) parentNode.removeChild(this.element); // In the most browsers, rules inserted using insertRule() API will be lost when style element is removed.
+    // Though IE will keep them and we need a consistent behavior.
+
+    if (this.sheet.options.link) {
+      this.cssRules = [];
+      this.element.textContent = '\n';
+    }
+  }
+  /**
+   * Inject CSS string into element.
+   */
+  ;
+
+  _proto.deploy = function deploy() {
+    var sheet = this.sheet;
+    if (!sheet) return;
+
+    if (sheet.options.link) {
+      this.insertRules(sheet.rules);
+      return;
+    }
+
+    this.element.textContent = "\n" + sheet.toString() + "\n";
+  }
+  /**
+   * Insert RuleList into an element.
+   */
+  ;
+
+  _proto.insertRules = function insertRules(rules, nativeParent) {
+    for (var i = 0; i < rules.index.length; i++) {
+      this.insertRule(rules.index[i], i, nativeParent);
+    }
+  }
+  /**
+   * Insert a rule into element.
+   */
+  ;
+
+  _proto.insertRule = function insertRule(rule, index, nativeParent) {
+    if (nativeParent === void 0) {
+      nativeParent = this.element.sheet;
+    }
+
+    if (rule.rules) {
+      var parent = rule;
+      var latestNativeParent = nativeParent;
+
+      if (rule.type === 'conditional' || rule.type === 'keyframes') {
+        var _insertionIndex = getValidRuleInsertionIndex(nativeParent, index); // We need to render the container without children first.
+
+
+        latestNativeParent = _insertRule(nativeParent, parent.toString({
+          children: false
+        }), _insertionIndex);
+
+        if (latestNativeParent === false) {
+          return false;
+        }
+
+        this.refCssRule(rule, _insertionIndex, latestNativeParent);
+      }
+
+      this.insertRules(parent.rules, latestNativeParent);
+      return latestNativeParent;
+    }
+
+    var ruleStr = rule.toString();
+    if (!ruleStr) return false;
+    var insertionIndex = getValidRuleInsertionIndex(nativeParent, index);
+
+    var nativeRule = _insertRule(nativeParent, ruleStr, insertionIndex);
+
+    if (nativeRule === false) {
+      return false;
+    }
+
+    this.hasInsertedRules = true;
+    this.refCssRule(rule, insertionIndex, nativeRule);
+    return nativeRule;
+  };
+
+  _proto.refCssRule = function refCssRule(rule, index, cssRule) {
+    rule.renderable = cssRule; // We only want to reference the top level rules, deleteRule API doesn't support removing nested rules
+    // like rules inside media queries or keyframes
+
+    if (rule.options.parent instanceof StyleSheet) {
+      this.cssRules.splice(index, 0, cssRule);
+    }
+  }
+  /**
+   * Delete a rule.
+   */
+  ;
+
+  _proto.deleteRule = function deleteRule(cssRule) {
+    var sheet = this.element.sheet;
+    var index = this.indexOf(cssRule);
+    if (index === -1) return false;
+    sheet.deleteRule(index);
+    this.cssRules.splice(index, 1);
+    return true;
+  }
+  /**
+   * Get index of a CSS Rule.
+   */
+  ;
+
+  _proto.indexOf = function indexOf(cssRule) {
+    return this.cssRules.indexOf(cssRule);
+  }
+  /**
+   * Generate a new CSS rule and replace the existing one.
+   */
+  ;
+
+  _proto.replaceRule = function replaceRule(cssRule, rule) {
+    var index = this.indexOf(cssRule);
+    if (index === -1) return false;
+    this.element.sheet.deleteRule(index);
+    this.cssRules.splice(index, 1);
+    return this.insertRule(rule, index);
+  }
+  /**
+   * Get all rules elements.
+   */
+  ;
+
+  _proto.getRules = function getRules() {
+    return this.element.sheet.cssRules;
+  };
+
+  return DomRenderer;
+}();
+
+var instanceCounter = 0;
+
+var Jss =
+/*#__PURE__*/
+function () {
+  function Jss(options) {
+    this.id = instanceCounter++;
+    this.version = "10.10.0";
+    this.plugins = new PluginsRegistry();
+    this.options = {
+      id: {
+        minify: false
+      },
+      createGenerateId: createGenerateId,
+      Renderer: isBrowser ? DomRenderer : null,
+      plugins: []
+    };
+    this.generateId = createGenerateId({
+      minify: false
+    });
+
+    for (var i = 0; i < plugins.length; i++) {
+      this.plugins.use(plugins[i], {
+        queue: 'internal'
+      });
+    }
+
+    this.setup(options);
+  }
+  /**
+   * Prepares various options, applies plugins.
+   * Should not be used twice on the same instance, because there is no plugins
+   * deduplication logic.
+   */
+
+
+  var _proto = Jss.prototype;
+
+  _proto.setup = function setup(options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    if (options.createGenerateId) {
+      this.options.createGenerateId = options.createGenerateId;
+    }
+
+    if (options.id) {
+      this.options.id = _extends({}, this.options.id, options.id);
+    }
+
+    if (options.createGenerateId || options.id) {
+      this.generateId = this.options.createGenerateId(this.options.id);
+    }
+
+    if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;
+
+    if ('Renderer' in options) {
+      this.options.Renderer = options.Renderer;
+    } // eslint-disable-next-line prefer-spread
+
+
+    if (options.plugins) this.use.apply(this, options.plugins);
+    return this;
+  }
+  /**
+   * Create a Style Sheet.
+   */
+  ;
+
+  _proto.createStyleSheet = function createStyleSheet(styles, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    var _options = options,
+        index = _options.index;
+
+    if (typeof index !== 'number') {
+      index = sheets.index === 0 ? 0 : sheets.index + 1;
+    }
+
+    var sheet = new StyleSheet(styles, _extends({}, options, {
+      jss: this,
+      generateId: options.generateId || this.generateId,
+      insertionPoint: this.options.insertionPoint,
+      Renderer: this.options.Renderer,
+      index: index
+    }));
+    this.plugins.onProcessSheet(sheet);
+    return sheet;
+  }
+  /**
+   * Detach the Style Sheet and remove it from the registry.
+   */
+  ;
+
+  _proto.removeStyleSheet = function removeStyleSheet(sheet) {
+    sheet.detach();
+    sheets.remove(sheet);
+    return this;
+  }
+  /**
+   * Create a rule without a Style Sheet.
+   * [Deprecated] will be removed in the next major version.
+   */
+  ;
+
+  _proto.createRule = function createRule$1(name, style, options) {
+    if (style === void 0) {
+      style = {};
+    }
+
+    if (options === void 0) {
+      options = {};
+    }
+
+    // Enable rule without name for inline styles.
+    if (typeof name === 'object') {
+      return this.createRule(undefined, name, style);
+    }
+
+    var ruleOptions = _extends({}, options, {
+      name: name,
+      jss: this,
+      Renderer: this.options.Renderer
+    });
+
+    if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId;
+    if (!ruleOptions.classes) ruleOptions.classes = {};
+    if (!ruleOptions.keyframes) ruleOptions.keyframes = {};
+
+    var rule = createRule(name, style, ruleOptions);
+
+    if (rule) this.plugins.onProcessRule(rule);
+    return rule;
+  }
+  /**
+   * Register plugin. Passed function will be invoked with a rule instance.
+   */
+  ;
+
+  _proto.use = function use() {
+    var _this = this;
+
+    for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
+      plugins[_key] = arguments[_key];
+    }
+
+    plugins.forEach(function (plugin) {
+      _this.plugins.use(plugin);
+    });
+    return this;
+  };
+
+  return Jss;
+}();
+
+var createJss = function createJss(options) {
+  return new Jss(options);
+};
+
+/**
+ * SheetsManager is like a WeakMap which is designed to count StyleSheet
+ * instances and attach/detach automatically.
+ * Used in react-jss.
+ */
+
+var SheetsManager =
+/*#__PURE__*/
+function () {
+  function SheetsManager() {
+    this.length = 0;
+    this.sheets = new WeakMap();
+  }
+
+  var _proto = SheetsManager.prototype;
+
+  _proto.get = function get(key) {
+    var entry = this.sheets.get(key);
+    return entry && entry.sheet;
+  };
+
+  _proto.add = function add(key, sheet) {
+    if (this.sheets.has(key)) return;
+    this.length++;
+    this.sheets.set(key, {
+      sheet: sheet,
+      refs: 0
+    });
+  };
+
+  _proto.manage = function manage(key) {
+    var entry = this.sheets.get(key);
+
+    if (entry) {
+      if (entry.refs === 0) {
+        entry.sheet.attach();
+      }
+
+      entry.refs++;
+      return entry.sheet;
+    }
+    return undefined;
+  };
+
+  _proto.unmanage = function unmanage(key) {
+    var entry = this.sheets.get(key);
+
+    if (entry) {
+      if (entry.refs > 0) {
+        entry.refs--;
+        if (entry.refs === 0) entry.sheet.detach();
+      }
+    }
+  };
+
+  _createClass(SheetsManager, [{
+    key: "size",
+    get: function get() {
+      return this.length;
+    }
+  }]);
+
+  return SheetsManager;
+}();
+
+/**
+* Export a constant indicating if this browser has CSSTOM support.
+* https://developers.google.com/web/updates/2018/03/cssom
+*/
+var hasCSSTOMSupport = typeof CSS === 'object' && CSS != null && 'number' in CSS;
+
+/**
+ * Extracts a styles object with only props that contain function values.
+ */
+function getDynamicStyles(styles) {
+  var to = null;
+
+  for (var key in styles) {
+    var value = styles[key];
+    var type = typeof value;
+
+    if (type === 'function') {
+      if (!to) to = {};
+      to[key] = value;
+    } else if (type === 'object' && value !== null && !Array.isArray(value)) {
+      var extracted = getDynamicStyles(value);
+
+      if (extracted) {
+        if (!to) to = {};
+        to[key] = extracted;
+      }
+    }
+  }
+
+  return to;
+}
+
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+var index = createJss();
+
+var jss_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    RuleList: RuleList,
+    SheetsManager: SheetsManager,
+    SheetsRegistry: SheetsRegistry,
+    create: createJss,
+    createGenerateId: createGenerateId,
+    createRule: createRule,
+    default: index,
+    getDynamicStyles: getDynamicStyles,
+    hasCSSTOMSupport: hasCSSTOMSupport,
+    sheets: sheets,
+    toCssValue: toCssValue
+});
+
+/* eslint-disable no-var, prefer-template */
+var uppercasePattern = /[A-Z]/g;
+var msPattern = /^ms-/;
+var cache = {};
+
+function toHyphenLower(match) {
+  return '-' + match.toLowerCase()
+}
+
+function hyphenateStyleName(name) {
+  if (cache.hasOwnProperty(name)) {
+    return cache[name]
+  }
+
+  var hName = name.replace(uppercasePattern, toHyphenLower);
+  return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)
+}
+
+/**
+ * Convert camel cased property names to dash separated.
+ */
+
+function convertCase(style) {
+  var converted = {};
+
+  for (var prop in style) {
+    var key = prop.indexOf('--') === 0 ? prop : hyphenateStyleName(prop);
+    converted[key] = style[prop];
+  }
+
+  if (style.fallbacks) {
+    if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
+  }
+
+  return converted;
+}
+/**
+ * Allow camel cased property names by converting them back to dasherized.
+ */
+
+
+function camelCase() {
+  function onProcessStyle(style) {
+    if (Array.isArray(style)) {
+      // Handle rules like @font-face, which can have multiple styles in an array
+      for (var index = 0; index < style.length; index++) {
+        style[index] = convertCase(style[index]);
+      }
+
+      return style;
+    }
+
+    return convertCase(style);
+  }
+
+  function onChangeValue(value, prop, rule) {
+    if (prop.indexOf('--') === 0) {
+      return value;
+    }
+
+    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.
+
+    return null;
+  }
+
+  return {
+    onProcessStyle: onProcessStyle,
+    onChangeValue: onChangeValue
+  };
+}
+
+var at = '@global';
+var atPrefix = '@global ';
+
+var GlobalContainerRule =
+/*#__PURE__*/
+function () {
+  function GlobalContainerRule(key, styles, options) {
+    this.type = 'global';
+    this.at = at;
+    this.isProcessed = false;
+    this.key = key;
+    this.options = options;
+    this.rules = new RuleList(_extends({}, options, {
+      parent: this
+    }));
+
+    for (var selector in styles) {
+      this.rules.add(selector, styles[selector]);
+    }
+
+    this.rules.process();
+  }
+  /**
+   * Get a rule.
+   */
+
+
+  var _proto = GlobalContainerRule.prototype;
+
+  _proto.getRule = function getRule(name) {
+    return this.rules.get(name);
+  }
+  /**
+   * Create and register rule, run plugins.
+   */
+  ;
+
+  _proto.addRule = function addRule(name, style, options) {
+    var rule = this.rules.add(name, style, options);
+    if (rule) this.options.jss.plugins.onProcessRule(rule);
+    return rule;
+  }
+  /**
+   * Replace rule, run plugins.
+   */
+  ;
+
+  _proto.replaceRule = function replaceRule(name, style, options) {
+    var newRule = this.rules.replace(name, style, options);
+    if (newRule) this.options.jss.plugins.onProcessRule(newRule);
+    return newRule;
+  }
+  /**
+   * Get index of a rule.
+   */
+  ;
+
+  _proto.indexOf = function indexOf(rule) {
+    return this.rules.indexOf(rule);
+  }
+  /**
+   * Generates a CSS string.
+   */
+  ;
+
+  _proto.toString = function toString(options) {
+    return this.rules.toString(options);
+  };
+
+  return GlobalContainerRule;
+}();
+
+var GlobalPrefixedRule =
+/*#__PURE__*/
+function () {
+  function GlobalPrefixedRule(key, style, options) {
+    this.type = 'global';
+    this.at = at;
+    this.isProcessed = false;
+    this.key = key;
+    this.options = options;
+    var selector = key.substr(atPrefix.length);
+    this.rule = options.jss.createRule(selector, style, _extends({}, options, {
+      parent: this
+    }));
+  }
+
+  var _proto2 = GlobalPrefixedRule.prototype;
+
+  _proto2.toString = function toString(options) {
+    return this.rule ? this.rule.toString(options) : '';
+  };
+
+  return GlobalPrefixedRule;
+}();
+
+var separatorRegExp$1 = /\s*,\s*/g;
+
+function addScope(selector, scope) {
+  var parts = selector.split(separatorRegExp$1);
+  var scoped = '';
+
+  for (var i = 0; i < parts.length; i++) {
+    scoped += scope + " " + parts[i].trim();
+    if (parts[i + 1]) scoped += ', ';
+  }
+
+  return scoped;
+}
+
+function handleNestedGlobalContainerRule(rule, sheet) {
+  var options = rule.options,
+      style = rule.style;
+  var rules = style ? style[at] : null;
+  if (!rules) return;
+
+  for (var name in rules) {
+    sheet.addRule(name, rules[name], _extends({}, options, {
+      selector: addScope(name, rule.selector)
+    }));
+  }
+
+  delete style[at];
+}
+
+function handlePrefixedGlobalRule(rule, sheet) {
+  var options = rule.options,
+      style = rule.style;
+
+  for (var prop in style) {
+    if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;
+    var selector = addScope(prop.substr(at.length), rule.selector);
+    sheet.addRule(selector, style[prop], _extends({}, options, {
+      selector: selector
+    }));
+    delete style[prop];
+  }
+}
+/**
+ * Convert nested rules to separate, remove them from original styles.
+ */
+
+
+function jssGlobal() {
+  function onCreateRule(name, styles, options) {
+    if (!name) return null;
+
+    if (name === at) {
+      return new GlobalContainerRule(name, styles, options);
+    }
+
+    if (name[0] === '@' && name.substr(0, atPrefix.length) === atPrefix) {
+      return new GlobalPrefixedRule(name, styles, options);
+    }
+
+    var parent = options.parent;
+
+    if (parent) {
+      if (parent.type === 'global' || parent.options.parent && parent.options.parent.type === 'global') {
+        options.scoped = false;
+      }
+    }
+
+    if (!options.selector && options.scoped === false) {
+      options.selector = name;
+    }
+
+    return null;
+  }
+
+  function onProcessRule(rule, sheet) {
+    if (rule.type !== 'style' || !sheet) return;
+    handleNestedGlobalContainerRule(rule, sheet);
+    handlePrefixedGlobalRule(rule, sheet);
+  }
+
+  return {
+    onCreateRule: onCreateRule,
+    onProcessRule: onProcessRule
+  };
+}
+
+var separatorRegExp = /\s*,\s*/g;
+var parentRegExp = /&/g;
+var refRegExp = /\$([\w-]+)/g;
+/**
+ * Convert nested rules to separate, remove them from original styles.
+ */
+
+function jssNested() {
+  // Get a function to be used for $ref replacement.
+  function getReplaceRef(container, sheet) {
+    return function (match, key) {
+      var rule = container.getRule(key) || sheet && sheet.getRule(key);
+
+      if (rule) {
+        return rule.selector;
+      }
+      return key;
+    };
+  }
+
+  function replaceParentRefs(nestedProp, parentProp) {
+    var parentSelectors = parentProp.split(separatorRegExp);
+    var nestedSelectors = nestedProp.split(separatorRegExp);
+    var result = '';
+
+    for (var i = 0; i < parentSelectors.length; i++) {
+      var parent = parentSelectors[i];
+
+      for (var j = 0; j < nestedSelectors.length; j++) {
+        var nested = nestedSelectors[j];
+        if (result) result += ', '; // Replace all & by the parent or prefix & with the parent.
+
+        result += nested.indexOf('&') !== -1 ? nested.replace(parentRegExp, parent) : parent + " " + nested;
+      }
+    }
+
+    return result;
+  }
+
+  function getOptions(rule, container, prevOptions) {
+    // Options has been already created, now we only increase index.
+    if (prevOptions) return _extends({}, prevOptions, {
+      index: prevOptions.index + 1
+    });
+    var nestingLevel = rule.options.nestingLevel;
+    nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
+
+    var options = _extends({}, rule.options, {
+      nestingLevel: nestingLevel,
+      index: container.indexOf(rule) + 1 // We don't need the parent name to be set options for chlid.
+
+    });
+
+    delete options.name;
+    return options;
+  }
+
+  function onProcessStyle(style, rule, sheet) {
+    if (rule.type !== 'style') return style;
+    var styleRule = rule;
+    var container = styleRule.options.parent;
+    var options;
+    var replaceRef;
+
+    for (var prop in style) {
+      var isNested = prop.indexOf('&') !== -1;
+      var isNestedConditional = prop[0] === '@';
+      if (!isNested && !isNestedConditional) continue;
+      options = getOptions(styleRule, container, options);
+
+      if (isNested) {
+        var selector = replaceParentRefs(prop, styleRule.selector); // Lazily create the ref replacer function just once for
+        // all nested rules within the sheet.
+
+        if (!replaceRef) replaceRef = getReplaceRef(container, sheet); // Replace all $refs.
+
+        selector = selector.replace(refRegExp, replaceRef);
+        var name = styleRule.key + "-" + prop;
+
+        if ('replaceRule' in container) {
+          // for backward compatibility
+          container.replaceRule(name, style[prop], _extends({}, options, {
+            selector: selector
+          }));
+        } else {
+          container.addRule(name, style[prop], _extends({}, options, {
+            selector: selector
+          }));
+        }
+      } else if (isNestedConditional) {
+        // Place conditional right after the parent rule to ensure right ordering.
+        container.addRule(prop, {}, options).addRule(styleRule.key, style[prop], {
+          selector: styleRule.selector
+        });
+      }
+
+      delete style[prop];
+    }
+
+    return style;
+  }
+
+  return {
+    onProcessStyle: onProcessStyle
+  };
+}
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			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) {
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+	/*! *****************************************************************************
+	Copyright (c) Microsoft Corporation.
+
+	Permission to use, copy, modify, and/or distribute this software for any
+	purpose with or without fee is hereby granted.
+
+	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+	PERFORMANCE OF THIS SOFTWARE.
+	***************************************************************************** */
+
+	exports.__assign = function () {
+		exports.__assign =
+			Object.assign ||
+			function __assign(t) {
+				for (var s, i = 1, n = arguments.length; i < n; i++) {
+					s = arguments[i];
+					for (var p in s)
+						if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+				}
+				return t;
+			};
+		return exports.__assign.apply(this, arguments);
+	}; 
+} (_tslib$1));
+
+var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
+
+/**
+ * The custom `sort` method for
+ * for the [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) or
+ * [`pleeease`](https://www.npmjs.com/package/pleeease) which using `css-mqpacker`
+ * or, perhaps, something else ))
+ *
+ * @module sort-css-media-queries
+ * @author Oleg Dutchenko <dutchenko.o.wezom@gmail.com>
+ * @version 1.5.0
+ */
+
+// ----------------------------------------
+// Private
+// ----------------------------------------
+
+const minMaxWidth = /(!?\(\s*min(-device-)?-width)(.|\n)+\(\s*max(-device)?-width/i;
+const minWidth = /\(\s*min(-device)?-width/i;
+const maxMinWidth = /(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width/i;
+const maxWidth = /\(\s*max(-device)?-width/i;
+
+const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
+const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
+
+const minMaxHeight = /(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height/i;
+const minHeight = /\(\s*min(-device)?-height/i;
+const maxMinHeight = /(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height/i;
+const maxHeight = /\(\s*max(-device)?-height/i;
+
+const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
+const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
+
+const isPrint = /print/i;
+const isPrintOnly = /^print$/i;
+
+const maxValue = Number.MAX_VALUE;
+
+/**
+ * Obtain the length of the media request in pixels.
+ * Copy from original source `function inspectLength (length)`
+ * {@link https://github.com/hail2u/node-css-mqpacker/blob/master/index.js#L58}
+ * @private
+ * @param {string} length
+ * @return {number}
+ */
+function _getQueryLength (length) {
+  length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(length);
+
+  if (length === null) {
+    return maxValue
+  }
+
+  let number = length[1];
+  const unit = length[2];
+
+  switch (unit) {
+    case 'ch':
+      number = parseFloat(number) * 8.8984375;
+      break
+
+    case 'em':
+    case 'rem':
+      number = parseFloat(number) * 16;
+      break
+
+    case 'ex':
+      number = parseFloat(number) * 8.296875;
+      break
+
+    case 'px':
+      number = parseFloat(number);
+      break
+  }
+
+  return +number
+}
+
+/**
+ * Wrapper for creating test functions
+ * @private
+ * @param {RegExp} doubleTestTrue
+ * @param {RegExp} doubleTestFalse
+ * @param {RegExp} singleTest
+ * @return {Function}
+ */
+function _testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
+  /**
+   * @param {string} query
+   * @return {boolean}
+   */
+  return function (query) {
+    if (doubleTestTrue.test(query)) {
+      return true
+    } else if (doubleTestFalse.test(query)) {
+      return false
+    }
+    return singleTest.test(query)
+  }
+}
+
+/**
+ * @private
+ * @param {string} a
+ * @param {string} b
+ * @return {number|null}
+ */
+function _testIsPrint (a, b) {
+  const isPrintA = isPrint.test(a);
+  const isPrintOnlyA = isPrintOnly.test(a);
+
+  const isPrintB = isPrint.test(b);
+  const isPrintOnlyB = isPrintOnly.test(b);
+
+  if (isPrintA && isPrintB) {
+    if (!isPrintOnlyA && isPrintOnlyB) {
+      return 1
+    }
+    if (isPrintOnlyA && !isPrintOnlyB) {
+      return -1
+    }
+    return a.localeCompare(b)
+  }
+  if (isPrintA) {
+    return 1
+  }
+  if (isPrintB) {
+    return -1
+  }
+
+  return null
+}
+
+// ----------------------------------------
+// Public
+// ----------------------------------------
+
+/**
+ * Sorting an array with media queries
+ * according to the mobile-first methodology.
+ * @param {string} a
+ * @param {string} b
+ * @return {number} 1 / 0 / -1
+ */
+function sortCSSmq$1 (a, b) {
+  const testIsPrint = _testIsPrint(a, b);
+  if (testIsPrint !== null) {
+    return testIsPrint
+  }
+
+  const minA = isMinWidth(a) || isMinHeight(a);
+  const maxA = isMaxWidth(a) || isMaxHeight(a);
+
+  const minB = isMinWidth(b) || isMinHeight(b);
+  const maxB = isMaxWidth(b) || isMaxHeight(b);
+
+  if (minA && maxB) {
+    return -1
+  }
+  if (maxA && minB) {
+    return 1
+  }
+
+  let lengthA = _getQueryLength(a);
+  let lengthB = _getQueryLength(b);
+
+  if (lengthA === maxValue && lengthB === maxValue) {
+    return a.localeCompare(b)
+  } else if (lengthA === maxValue) {
+    return 1
+  } else if (lengthB === maxValue) {
+    return -1
+  }
+
+  if (lengthA > lengthB) {
+    if (maxA) {
+      return -1
+    }
+    return 1
+  }
+
+  if (lengthA < lengthB) {
+    if (maxA) {
+      return 1
+    }
+    return -1
+  }
+
+  return a.localeCompare(b)
+}
+
+/**
+ * Sorting an array with media queries
+ * according to the desktop-first methodology.
+ * @param {string} a
+ * @param {string} b
+ * @return {number} 1 / 0 / -1
+ */
+sortCSSmq$1.desktopFirst = function (a, b) {
+  const testIsPrint = _testIsPrint(a, b);
+  if (testIsPrint !== null) {
+    return testIsPrint
+  }
+
+  const minA = isMinWidth(a) || isMinHeight(a);
+  const maxA = isMaxWidth(a) || isMaxHeight(a);
+
+  const minB = isMinWidth(b) || isMinHeight(b);
+  const maxB = isMaxWidth(b) || isMaxHeight(b);
+
+  if (minA && maxB) {
+    return 1
+  }
+  if (maxA && minB) {
+    return -1
+  }
+
+  const lengthA = _getQueryLength(a);
+  const lengthB = _getQueryLength(b);
+
+  if (lengthA === maxValue && lengthB === maxValue) {
+    return a.localeCompare(b)
+  } else if (lengthA === maxValue) {
+    return 1
+  } else if (lengthB === maxValue) {
+    return -1
+  }
+
+  if (lengthA > lengthB) {
+    if (maxA) {
+      return -1
+    }
+    return 1
+  }
+
+  if (lengthA < lengthB) {
+    if (maxA) {
+      return 1
+    }
+    return -1
+  }
+
+  return -(a.localeCompare(b))
+};
+
+// ----------------------------------------
+// Exports
+// ----------------------------------------
+
+var sortCssMediaQueries = sortCSSmq$1;
+
+var _tslib = _tslib$1;
+var jss$1 = require$$1;
+var sortCSSmq = sortCssMediaQueries;
+
+function _interopDefaultLegacy(e) {
+	return e && typeof e === 'object' && 'default' in e ? e : { default: e };
+}
+
+var sortCSSmq__default = /*#__PURE__*/ _interopDefaultLegacy(sortCSSmq);
+
+function isPlainObject(sample) {
+	return (
+		sample !== null && typeof sample === 'object' && Array.isArray(sample) === false
+	);
+}
+var UN_QUERIED = '__UN_QUERIED';
+function recursiveInnerAndGetQueries(pluginOptions, rules) {
+	var queries = {
+		groups: {},
+		groupsSortNames: []
+	};
+	for (var index = 0; index < rules.length; index++) {
+		var rule = rules[index];
+		var query =
+			rule.type === 'conditional' && typeof rule.query === 'string'
+				? rule.query
+				: UN_QUERIED;
+		if (!queries.groups.hasOwnProperty(query)) {
+			queries.groupsSortNames.push(query);
+			queries.groups[query] = [];
+		}
+		queries.groups[query].push(index);
+		// eslint-disable-next-line @typescript-eslint/no-use-before-define
+		recursive(pluginOptions, rule);
+	}
+	queries.groupsSortNames.sort(function (a, b) {
+		var aWeight = a === UN_QUERIED ? 0 : a.length;
+		var bWeight = b === UN_QUERIED ? 0 : b.length;
+		if (aWeight > 0 && bWeight > 0) {
+			if (pluginOptions.desktopFirst) {
+				return sortCSSmq__default['default'].desktopFirst(a, b);
+			} else {
+				return sortCSSmq__default['default'](a, b);
+			}
+		} else {
+			return aWeight - bWeight;
+		}
+	});
+	return queries;
+}
+function recursive(pluginOptions, data) {
+	if (isPlainObject(data) && data.rules instanceof jss$1.RuleList) {
+		data.rules.toString = function (options) {
+			if (options === void 0) {
+				options = {};
+			}
+			var str = '';
+			var sheet = this.options.sheet;
+			var link = sheet ? sheet.options.link : false;
+			var _a = recursiveInnerAndGetQueries(pluginOptions, this.index),
+				groups = _a.groups,
+				groupsSortNames = _a.groupsSortNames;
+			for (var i = 0; i < groupsSortNames.length; i++) {
+				var groupName = groupsSortNames[i];
+				var group = groups[groupsSortNames[i]];
+				if (groupName !== UN_QUERIED && pluginOptions.combineMediaQueries) {
+					str += '\n' + groupName + ' {';
+					for (var i_1 = 0; i_1 < group.length; i_1++) {
+						var rule = this.index[group[i_1]];
+						var css = rule.rules.toString(
+							_tslib.__assign(_tslib.__assign({}, options), {
+								indent: (options.indent || 0) + 1
+							})
+						);
+						if (!css && !link) continue;
+						if (str) str += '\n';
+						str += css;
+					}
+					str += '\n}\n';
+				} else {
+					for (var i_2 = 0; i_2 < group.length; i_2++) {
+						var rule = this.index[group[i_2]];
+						var css = rule.toString(options);
+						if (!css && !link) continue;
+						if (str) str += '\n';
+						str += css;
+					}
+				}
+			}
+			return str;
+		};
+	}
+}
+function jssCombineAndSortMQ(options) {
+	if (options === void 0) {
+		options = {};
+	}
+	return {
+		onProcessSheet: function (sheet) {
+			recursive(options, sheet);
+		}
+	};
+}
+
+var dist = jssCombineAndSortMQ;
+
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+
+/* Auto Generated Start */
+const themeLight = {
+    primaryColor: '#010205',
+    primaryColorDarken: '#000000',
+    backgroundColor: '#FFF',
+    backgroundColorDarken: '#E0E0E0',
+    backgroundColorLighten: '#FFFFFF',
+    backgroundSurfaceColor: '#EEEFF2',
+    backgroundSurfaceColorDarken: '#CBCED7',
+    backgroundSurfaceColorLighten: '#FFFFFF',
+    contrastLowColor: '#D8D8DB',
+    contrastMediumColor: '#6B6D70',
+    contrastHighColor: '#535457',
+    contrastHighColorDarken: '#353638',
+    contrastHighColorLighten: '#717276',
+    hoverColor: 'rgba(148, 149, 152, .18)',
+    hoverColorDarken: '#75767A',
+    activeColor: 'rgba(148, 149, 152, 0.20)',
+    focusColor: '#1A44EA',
+    disabledColor: '#949598',
+    errorColor: '#CC1922',
+    errorColorDarken: '#951219',
+    errorSoftColor: '#FFE2E4',
+    errorSoftColorDarken: '#F4CED1',
+    errorSoftColorLighten: '#FFFFFF',
+    successColor: '#197E10',
+    successColorDarken: '#0E4809',
+    successSoftColor: '#E4FFEC',
+    successSoftColorDarken: '#D0F4DB',
+    successSoftColorLighten: '#FFFFFF',
+    warningColor: '#F3BE00',
+    warningSoftColor: '#FFF4D2',
+    warningSoftColorDarken: '#F1E5C1',
+    warningSoftColorLighten: '#FCFAF3',
+    infoColor: '#2762EC',
+    infoSoftColor: '#D3E1FF',
+    infoSoftColorDarken: '#C2D1F1',
+    infoSoftColorLighten: '#F4F7FD'
+};
+const themeDark = {
+    primaryColor: '#FBFCFF',
+    primaryColorDarken: '#BECEFF',
+    backgroundColor: '#0E0E12',
+    backgroundColorDarken: '#000000',
+    backgroundColorLighten: '#292934',
+    backgroundSurfaceColor: '#212225',
+    backgroundSurfaceColorDarken: '#040405',
+    backgroundSurfaceColorLighten: '#3E4045',
+    contrastLowColor: '#404044',
+    contrastMediumColor: '#88898C',
+    contrastHighColor: '#AFB0B3',
+    contrastHighColorDarken: '#909195',
+    contrastHighColorLighten: '#CECFD1',
+    hoverColor: 'rgba(148, 149, 152, .18)',
+    hoverColorDarken: '#75767A',
+    activeColor: 'rgba(126, 127, 130, 0.20)',
+    focusColor: '#1A44EA',
+    disabledColor: '#7E7F82',
+    errorColor: '#FC4040',
+    errorColorDarken: '#FB0404',
+    errorSoftColor: '#3A0F0F',
+    errorSoftColorDarken: '#1A1111',
+    errorSoftColorLighten: '#3F2828',
+    successColor: '#09D087',
+    successColorDarken: '#069561',
+    successSoftColor: '#003320',
+    successSoftColorDarken: '#04110C',
+    successSoftColorLighten: '#0F432F',
+    warningColor: '#F7CB47',
+    warningSoftColor: '#362B0A',
+    warningSoftColorDarken: '#16130B',
+    warningSoftColorLighten: '#3E3720',
+    infoColor: '#178BFF',
+    infoSoftColor: '#04294E',
+    infoSoftColorDarken: '#0C1A27',
+    infoSoftColorLighten: '#1A3856'
+};
+const themes = {
+    'light': themeLight,
+    'dark': themeDark
+};
+/* Auto Generated End */
+const schemeHighContrastMerged = {
+    disabledColor: 'GrayText',
+    focusColor: 'Highlight',
+};
+const schemeHighContrast = {
+    canvasColor: 'Canvas',
+    canvasTextColor: 'CanvasText',
+    highlightColor: 'Highlight',
+    linkColor: 'LinkText',
+};
+const getThemedColors = (theme) => {
+    return isHighContrastMode ? { ...themes[theme], ...schemeHighContrastMerged } : themes[theme];
+};
+const getHighContrastColors = () => {
+    return schemeHighContrast;
+};
+const pxToRemWithUnit = (px) => `${px / 16}rem`;
+
+// NOTE: handpicked selection of plugins from jss-preset-default
+createJss({
+    plugins: [
+        jssGlobal(),
+        jssNested(),
+        camelCase(),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
+    ],
+});
+const supportsConstructableStylesheets = () => {
+    try {
+        return typeof new CSSStyleSheet().replaceSync === 'function';
+    }
+    catch {
+        return false;
+    }
+};
+// determine it once
+supportsConstructableStylesheets();
+
+const isThemeDark = (theme) => {
+    return theme === 'dark';
+};
+
+// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
+const getLinkButtonThemeForIcon = (variant, theme) => variant === 'primary' ? (isThemeDark(theme) ? 'light' : 'dark') : theme;
+const isScrollable = (isPrevHidden, isNextHidden) => {
+    return !(isPrevHidden && isNextHidden);
+};
+
+const hasDocument = typeof document !== 'undefined';
+
+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) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
+
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
+    return {
+        ...parseAndGetAriaAttributes(aria),
+        ...getButtonBaseAriaAttributes(isDisabled, isLoading),
+    };
+};
+
+const getButtonAriaAttributes = (isDisabled, isLoading, aria) => {
+    return {
+        ...parseAndGetAriaAttributes(aria),
+        ...getButtonBaseAriaAttributes(isDisabled, isLoading),
+    };
+};
+// Infinite bullets will be shown if the total number of bullets is greater than this value
+const INFINITE_BULLET_THRESHOLD = 5;
+const isInfinitePagination = (amountOfPages) => {
+    return amountOfPages > INFINITE_BULLET_THRESHOLD;
+};
+
+const CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.min.d76137cf8cf94822b7aedb534ba88418@1x.png", "webp": "porsche-crest.min.0d0cc89ae5ee57c4c15bd0dbbcbfe5d0@1x.webp" }, "2x": { "png": "porsche-crest.min.8a292fbd35a5155789ddd011585e05c4@2x.png", "webp": "porsche-crest.min.2245c45e99be5a46b4b56e73c43d5c63@2x.webp" }, "3x": { "png": "porsche-crest.min.18d6f02003b0829bac939fade88fd4e6@3x.png", "webp": "porsche-crest.min.19b429278b158b5cb5aa6ce80751e3fe@3x.webp" } } };
+
+const buildCrestSrcSet = (format) => {
+    return Object.entries(CRESTS_MANIFEST.porscheCrest)
+        .map(([resolution, fileName]) => `${getCDNBaseURL()}/crest/${fileName[format]} ${resolution}`)
+        .join();
+};
+const buildCrestImgSrc = () => {
+    return `${getCDNBaseURL()}/crest/${CRESTS_MANIFEST.porscheCrest['2x'].png}`;
+};
+const crestSize = {
+    width: 30,
+    height: 40,
+};
+
+const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const displaySizeToTagMap = {
+    small: 'h3',
+    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',
+    inherit: 'h2',
+};
+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';
+    }
+};
+
+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", "copy": "copy.min.b47f2ffbfefd05782509bb83951c6577.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", "fingerprint": "fingerprint.min.edc52a4b691f8495ef0ca66184f62544.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", "heart": "heart.min.132eca7a5d16b091f23340b3ae359294.svg", "heart-filled": "heart-filled.min.4d48b6bb07a6a2159e765d0c621543a0.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-apple-podcast": "logo-apple-podcast.min.af7a1f162ae9d6dba90fe155d8688b9c.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-spotify": "logo-spotify.min.48fb45730d66998420f8760b6d2f7fcc.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.a6a1098cf290c07051a53f14a4efe1b0.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", "pin-filled": "pin-filled.min.e47cf748ce9a27ced935c6b6cf4c59f1.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", "push-pin": "push-pin.min.7cec1084d78eb838957424d8ed62ecf5.svg", "push-pin-off": "push-pin-off.min.de81e394f6d02de580d4408070986097.svg", "qr": "qr.min.1facfc2c9b70057552904fe123674746.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", "roof-closed": "roof-closed.min.99006124d26ea3014b9169900bc266e1.svg", "roof-open": "roof-open.min.c0322e148f7071f2cb8f6b5d8ef15337.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-bag-filled": "shopping-bag-filled.min.566efdc835446512c426a9ef5e3badb0.svg", "shopping-cart": "shopping-cart.min.05a6c651afb21246daba2e941e8366cc.svg", "shopping-cart-filled": "shopping-cart-filled.min.c166601be618e0aadd596b54785f18f2.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", "tire": "tire.min.2094760dbaee1d169fa86f2113a5ca40.svg", "truck": "truck.min.43f91b0320003695d8804cf6a8a86da4.svg", "upload": "upload.min.cf3aaf8fb27e339d26133cbd6a5332ca.svg", "user": "user.min.0f8dcfbe34322e7968b4b23e11d963f0.svg", "user-filled": "user-filled.min.aa7b4c61ce78e08ba35fb513ff9e19dd.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" };
+const isUrl = (str) => str?.length > 0 && /(\/)/.test(str);
+const DEFAULT_ICON_NAME = 'arrow-right';
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+const buildIconUrl = (iconNameOrSource = DEFAULT_ICON_NAME) => {
+    if (iconNameOrSource === null) {
+        return buildIconUrl(DEFAULT_ICON_NAME);
+    }
+    else if (isUrl(iconNameOrSource)) {
+        return iconNameOrSource;
+    }
+    else if (ICONS_MANIFEST[iconNameOrSource]) {
+        return `${getCDNBaseURL()}/icons/${ICONS_MANIFEST[iconNameOrSource]}`;
+    }
+    return buildIconUrl(DEFAULT_ICON_NAME);
+};
+const getInlineNotificationIconName = (state) => {
+    const stateToIconMap = {
+        neutral: 'information-filled',
+        info: 'information-filled',
+        warning: 'warning-filled',
+        success: 'success-filled',
+        error: 'error-filled',
+    };
+    return stateToIconMap[state];
+};
+const getContentAriaAttributes = (state, labelId, descriptionId) => {
+    const isAlert = state === 'warning' || state === 'error';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        'aria-live': isAlert ? 'assertive' : 'polite',
+        'aria-labelledby': labelId,
+        'aria-describedby': descriptionId,
+    };
+};
+
+const MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.min.da075315857e239ff46bf4c150648ff0@1x.png", "webp": "porsche-marque-trademark.medium.min.5c6af9aa7946fea34f60c8f8c95d0188@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.min.aa801f42028b1c385a5e26ae115da598@2x.png", "webp": "porsche-marque-trademark.medium.min.fff6e9b91481cc5b1fc6c9b62987ccaf@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.min.824818d15eaf445f50e0a2391613f214@3x.png", "webp": "porsche-marque-trademark.medium.min.f67092ff6b5f4ecb4add73d6ae153db0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.min.020244b41a29323e2a7932a264514cdf@1x.png", "webp": "porsche-marque-trademark.small.min.783639706bead66b2d56e3b8b64bd61f@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.min.92184fae44511ceda8320443c17110b1@2x.png", "webp": "porsche-marque-trademark.small.min.760a57efa93d4e7e16e26128ec7ead46@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.min.fd545cea4298f5d797246d5805711646@3x.png", "webp": "porsche-marque-trademark.small.min.1726036a7829347e1e24d1eb54fc0d64@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.min.a98627440b05154565f9f9dfc1ad6187@1x.png", "webp": "porsche-marque.medium.min.fa908e4dfdc5536b0e933e1670d20e1f@1x.webp" }, "2x": { "png": "porsche-marque.medium.min.089d6dd560fff7a2bf613ae6d528990e@2x.png", "webp": "porsche-marque.medium.min.7f0893dc57f2607a2cb0b817d96cb985@2x.webp" }, "3x": { "png": "porsche-marque.medium.min.2cb874345ef290831c929f6caabfeef8@3x.png", "webp": "porsche-marque.medium.min.3534cf066b4e2e737dca62de495f9616@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.min.ac2042736af5512cf547c89fa7924c4f@1x.png", "webp": "porsche-marque.small.min.005debed5bf72cf0a9a791b1521f5e1d@1x.webp" }, "2x": { "png": "porsche-marque.small.min.22f1e9dc90399d9a5287eda689b60dba@2x.png", "webp": "porsche-marque.small.min.df4317325d04ffef28c7839aa6d499a0@2x.webp" }, "3x": { "png": "porsche-marque.small.min.49209245f04eadef8817b9bbae80d3e1@3x.png", "webp": "porsche-marque.small.min.cfd6149aaa3bc5b3b522538e5f650890@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.min.0a02e2256062de963f2fef2c02d20200@1x.png", "webp": "porsche-marque75.medium.min.99b2d657558f0531d639782974e8fd06@1x.webp" }, "2x": { "png": "porsche-marque75.medium.min.1d41ecfb8f5277d3f4bd65d25d22eea3@2x.png", "webp": "porsche-marque75.medium.min.e32580cd1ac179e354ed8fcb31694168@2x.webp" }, "3x": { "png": "porsche-marque75.medium.min.373bcb5f89d31c8b6084e66e902b9f4c@3x.png", "webp": "porsche-marque75.medium.min.4a003d1e5e81db062bf92d52ba797087@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.min.f5b37fe12cd4487432ff77fdd8469f7d@1x.png", "webp": "porsche-marque75.small.min.146b06cffe2b11c07f3113a51f337b98@1x.webp" }, "2x": { "png": "porsche-marque75.small.min.20d86908f2190640a6f24fce1ee49035@2x.png", "webp": "porsche-marque75.small.min.025770f8db54857874c130999b370ed8@2x.webp" }, "3x": { "png": "porsche-marque75.small.min.e89b13e14a088a273107bf1057f7f67d@3x.png", "webp": "porsche-marque75.small.min.a725d2ec7bd07be17afd8feb2589b156@3x.webp" } } } };
+const getInnerManifest = (variant, trademark) => MARQUES_MANIFEST[variant === '75-years' ? 'porscheMarque75' : `porscheMarque${trademark ? 'Trademark' : ''}`];
+const buildSrcSet = (innerManifest, size, format) => 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+Object.entries(innerManifest[size])
+    .map(([resolution, fileName]) => `${getCDNBaseURL()}/marque/${fileName[format]} ${resolution}`)
+    .join();
+const buildImgSrc = (innerManifest) => `${getCDNBaseURL()}/marque/${innerManifest.medium['2x'].png}`;
+
+const MODEL_SIGNATURES_MANIFEST = { "718": "718.min.d92dc0fe91e67bd51120d91c5cd1eb2f.svg", "911": "911.min.5c462658f9d472e90a139173414e8fdd.svg", "boxster": "boxster.min.5e7b22a1fa25004a4f97807d57f32b21.svg", "cayenne": "cayenne.min.4026ba6b335cc98e10592f900cf731e1.svg", "cayman": "cayman.min.c634f6f3de1d67610b2e4230e60337fb.svg", "macan": "macan.min.e38fbf34ed4f00066620901babd99af0.svg", "panamera": "panamera.min.d35913b252657f7c5cfcae74cfd61b26.svg", "taycan": "taycan.min.ba4e7c3cb86a78d626d4463b81be0f23.svg", "turbo-s": "turbo-s.min.8201d60c1b5e00daf9e23784fd199111.svg", "turbo": "turbo.min.cfde5de85fdc84be597dfad4402c5f6f.svg" };
+const getSvgUrl = (model) => {
+    return `${getCDNBaseURL()}/model-signatures/${MODEL_SIGNATURES_MANIFEST[model]}`;
+};
+const modelSignatureHeight = 36;
+exports.ItemType = void 0;
+(function (ItemType) {
+    ItemType[ItemType["PAGE"] = 0] = "PAGE";
+    ItemType[ItemType["ELLIPSIS"] = 1] = "ELLIPSIS";
+    ItemType[ItemType["PREVIOUS"] = 2] = "PREVIOUS";
+    ItemType[ItemType["NEXT"] = 3] = "NEXT";
+})(exports.ItemType || (exports.ItemType = {}));
+const ellipsisItem = {
+    type: exports.ItemType.ELLIPSIS,
+    isActive: false,
+};
+const createPreviousPageLink = (options) => {
+    const { activePage } = options;
+    return {
+        type: exports.ItemType.PREVIOUS,
+        value: Math.max(1, activePage - 1),
+        isActive: activePage > 1,
+    };
+};
+const createNextPageLink = (options) => {
+    const { activePage, pageTotal } = options;
+    return {
+        type: exports.ItemType.NEXT,
+        value: Math.min(pageTotal, activePage + 1),
+        isActive: activePage < pageTotal,
+    };
+};
+const createPageFunctionFactory = (options) => {
+    return (pageNumber) => ({
+        type: exports.ItemType.PAGE,
+        value: pageNumber,
+        isActive: pageNumber === options.activePage,
+    });
+};
+const createRange = (start, end) => Array.from(Array(end - start + 1)).map((_, i) => i + start);
+const createPaginationModel = (options) => {
+    const { pageTotal, activePage, pageRange, showLastPage } = options;
+    const boundaryPagesRange = 1;
+    const ellipsisSize = 1;
+    const paginationModel = [createPreviousPageLink(options)];
+    const createPage = createPageFunctionFactory(options);
+    // Simplify generation of pages if number of available items is equal or greater than total pages to show
+    if (1 + 2 * ellipsisSize + 2 * pageRange + 2 * boundaryPagesRange >= pageTotal) {
+        const allPages = createRange(1, pageTotal).map(createPage);
+        paginationModel.push(...allPages);
+    }
+    else {
+        // Add first page
+        paginationModel.push(createPage(1));
+        // Calculate group of middle pages
+        const middlePagesStart = Math.min(Math.max(activePage - pageRange, 2 + ellipsisSize), pageTotal - ellipsisSize - 2 * pageRange - (showLastPage ? 1 : 0));
+        const middlePagesEnd = middlePagesStart + 2 * pageRange;
+        const middlePages = createRange(middlePagesStart, middlePagesEnd).map(createPage);
+        // Calculate and add ellipsis before group of middle pages
+        const firstEllipsisPageNumber = middlePagesStart - 1;
+        const showPageInsteadOfFirstEllipsis = firstEllipsisPageNumber === 2;
+        const firstEllipsisOrPage = showPageInsteadOfFirstEllipsis ? createPage(firstEllipsisPageNumber) : ellipsisItem;
+        paginationModel.push(firstEllipsisOrPage);
+        // Add group of middle pages
+        paginationModel.push(...middlePages);
+        // Calculate and add ellipsis after group of middle pages
+        const lastEllipsisPageNumber = middlePagesEnd + 1;
+        const showPageInsteadOfLastEllipsis = lastEllipsisPageNumber === pageTotal - (showLastPage ? 1 : 0);
+        const lastEllipsisOrPage = showPageInsteadOfLastEllipsis ? createPage(lastEllipsisPageNumber) : ellipsisItem;
+        paginationModel.push(lastEllipsisOrPage);
+        // Add last page
+        if (showLastPage) {
+            paginationModel.push(createPage(pageTotal));
+        }
+    }
+    paginationModel.push(createNextPageLink(options));
+    return paginationModel;
+};
+const getCurrentActivePage = (activePage, totalPages) => {
+    // Obviously we can't be on a negative or 0 page.
+    if (activePage < 1) {
+        activePage = 1;
+    }
+    // If the user has done something like /page/99999 we want to clamp that back down.
+    if (activePage > totalPages) {
+        activePage = totalPages;
+    }
+    return activePage;
+};
+const getTotalPages = (totalItemsCount, itemsPerPage) => {
+    if (totalItemsCount < 1) {
+        totalItemsCount = 1;
+    }
+    if (itemsPerPage < 1) {
+        itemsPerPage = 1;
+    }
+    return Math.ceil(totalItemsCount / itemsPerPage);
+};
+
+const { backgroundColor: backgroundColorThemeLight, primaryColor: primaryColorThemeLight } = getThemedColors('light');
+const { canvasColor, canvasTextColor } = getHighContrastColors();
+const borderWidth = '12px';
+const transparentColor = 'transparent';
+const join = (...arr) => arr.join(' ');
+({
+    top: {
+        top: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        borderWidth: join(borderWidth, borderWidth, 0),
+        borderColor: isHighContrastMode
+            ? join(canvasTextColor, canvasColor, canvasColor)
+            : join(backgroundColorThemeLight, transparentColor, transparentColor),
+    },
+    right: {
+        top: '50%',
+        right: 0,
+        transform: 'translateY(-50%)',
+        borderWidth: join(borderWidth, borderWidth, borderWidth, 0),
+        borderColor: isHighContrastMode
+            ? join(canvasColor, canvasTextColor, canvasColor, canvasColor)
+            : join(transparentColor, backgroundColorThemeLight, transparentColor, transparentColor),
+    },
+    bottom: {
+        bottom: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        borderWidth: join(0, borderWidth, borderWidth),
+        borderColor: isHighContrastMode
+            ? join(canvasColor, canvasColor, canvasTextColor)
+            : join(transparentColor, transparentColor, backgroundColorThemeLight),
+    },
+    left: {
+        top: '50%',
+        left: 0,
+        transform: 'translateY(-50%)',
+        borderWidth: join(borderWidth, 0, borderWidth, borderWidth),
+        borderColor: isHighContrastMode
+            ? join(canvasColor, canvasColor, canvasColor, canvasTextColor)
+            : join(transparentColor, transparentColor, transparentColor, backgroundColorThemeLight),
+    },
+});
+
+const getButtonAttributes = (isSelected, isDisabled) => ({
+    ...getButtonBaseAriaAttributes(isDisabled, false),
+    ...parseAndGetAriaAttributes({ 'aria-pressed': isSelected }),
+});
+const getIconColor = (isDisabled) => {
+    return !isDisabled ? 'primary' : 'contrast-medium';
+};
+
+const ITEM_PADDING = '17px';
+const { font: BUTTON_FONT } = textSmallStyle;
+const { font: LABEL_FONT } = textXSmallStyle;
+const ICON_SIZE = pxToRemWithUnit(24);
+const ICON_MARGIN = pxToRemWithUnit(4);
+['auto', ...Array.from({ length: 25 }, (_, i) => i + 1)];
+// Expect Porsche Next to be available and use sans-serif (wide font for safety buffer) as fallback
+const tempFont = 'Porsche Next, sans-serif';
+// temporary dom node to measure max-width of children content
+// All width relevant styling has to be kept in sync with the button of the p-segmented-control-item
+const tempDiv = hasDocument ? document.createElement('div') : undefined;
+if (tempDiv) {
+    tempDiv.style.position = 'absolute';
+    tempDiv.style.visibility = 'hidden';
+    tempDiv.style.padding = `0 ${ITEM_PADDING}`; // Uses the largest possible padding of the item
+    tempDiv.style.border = `${borderWidthBase} solid`;
+    tempDiv.style.boxSizing = 'border-box';
+    tempDiv.style.font = BUTTON_FONT.replace(fontFamily, tempFont);
+}
+const tempLabel = hasDocument ? document.createElement('div') : undefined;
+if (tempLabel) {
+    tempLabel.style.font = LABEL_FONT.replace(fontFamily, tempFont);
+}
+const tempIcon = hasDocument ? document.createElement('div') : undefined;
+if (tempIcon) {
+    tempIcon.style.display = 'inline-block';
+    tempIcon.style.width = ICON_SIZE;
+    tempIcon.style.marginRight = ICON_MARGIN;
+}
+const getSelectWrapperDropdownButtonAriaAttributes = (isOpen, labelId, descriptionId, dropdownId, activeDescendantId) => {
+    return {
+        'aria-labelledby': labelId,
+        'aria-describedby': descriptionId || null,
+        'aria-haspopup': 'listbox',
+        'aria-expanded': isOpen ? 'true' : 'false',
+        'aria-controls': dropdownId,
+        ...(isOpen && {
+            'aria-activedescendant': `option-${activeDescendantId}`,
+        }),
+    };
+};
+const getFilterInputAriaAttributes = (isOpen, isRequired, labelId, descriptionId, dropdownId, activeDescendantId) => {
+    return {
+        ...getSelectWrapperDropdownButtonAriaAttributes(isOpen, labelId, descriptionId, dropdownId, activeDescendantId),
+        'aria-autocomplete': 'list',
+        ...(isRequired && {
+            'aria-required': 'true',
+        }),
+    };
+};
+const getHighlightedOptionMapIndex = (arr) => arr.findIndex((item) => item.highlighted);
+const getSelectedOptionMap = (arr) => arr.find((item) => item.selected);
+const isCustomDropdown = (filter, native) => {
+    if (filter) {
+        return true;
+    }
+    else if (native) {
+        return false;
+    }
+    else {
+        return !isTouchDevice();
+    }
+};
+const isStateCompleteOrWarning = (state) => {
+    return state === 'complete' || state === 'warning';
+};
+const getStepperHorizontalIconName = (state) => {
+    return state === 'complete' ? 'success' : 'warning';
+};
+
+const getSwitchButtonAriaAttributes = (isDisabled, isLoading, isChecked) => {
+    return {
+        ...getButtonBaseAriaAttributes(isDisabled, isLoading),
+        'aria-checked': isChecked ? 'true' : 'false',
+    };
+};
+const isSortable = (active, direction) => {
+    return active !== undefined && direction !== undefined;
+};
+
+const getThemeForIcon = (color, 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';
+// 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) => {
+    if (hasSpecificSlottedTag(host, TEXT_TAGS.join())) {
+        return 'div';
+    }
+    else {
+        return tag;
+    }
+};
+
+exports.DISPLAY_TAGS = DISPLAY_TAGS;
+exports.HEADING_TAGS = HEADING_TAGS;
+exports.HEADLINE_TAGS = HEADLINE_TAGS;
+exports.TEXT_TAGS = TEXT_TAGS;
+exports._hasShowPickerSupport = _hasShowPickerSupport;
+exports.attributeMutationMap = attributeMutationMap;
+exports.buildCrestImgSrc = buildCrestImgSrc;
+exports.buildCrestSrcSet = buildCrestSrcSet;
+exports.buildIconUrl = buildIconUrl;
+exports.buildImgSrc = buildImgSrc;
+exports.buildSrcSet = buildSrcSet;
+exports.createPaginationModel = createPaginationModel;
+exports.createRange = createRange;
+exports.crestSize = crestSize;
+exports.displaySizeToTagMap = displaySizeToTagMap;
+exports.getButtonAriaAttributes = getButtonAriaAttributes;
+exports.getButtonAttributes = getButtonAttributes;
+exports.getButtonBaseAriaAttributes = getButtonBaseAriaAttributes;
+exports.getButtonPureAriaAttributes = getButtonPureAriaAttributes;
+exports.getCDNBaseURL = getCDNBaseURL;
+exports.getClosestHTMLElement = getClosestHTMLElement;
+exports.getContentAriaAttributes = getContentAriaAttributes;
+exports.getCurrentActivePage = getCurrentActivePage;
+exports.getDirectChildHTMLElement = getDirectChildHTMLElement;
+exports.getDisplayTagType = getDisplayTagType;
+exports.getFilterInputAriaAttributes = getFilterInputAriaAttributes;
+exports.getHTMLElement = getHTMLElement;
+exports.getHeadingTagType = getHeadingTagType;
+exports.getHeadlineTagType = getHeadlineTagType;
+exports.getHighlightedOptionMapIndex = getHighlightedOptionMapIndex;
+exports.getIconColor = getIconColor;
+exports.getInlineNotificationIconName = getInlineNotificationIconName;
+exports.getInnerManifest = getInnerManifest;
+exports.getLinkButtonThemeForIcon = getLinkButtonThemeForIcon;
+exports.getRole = getRole;
+exports.getSelectWrapperDropdownButtonAriaAttributes = getSelectWrapperDropdownButtonAriaAttributes;
+exports.getSelectedOptionMap = getSelectedOptionMap;
+exports.getStepperHorizontalIconName = getStepperHorizontalIconName;
+exports.getSvgUrl = getSvgUrl;
+exports.getSwitchButtonAriaAttributes = getSwitchButtonAriaAttributes;
+exports.getTextTagType = getTextTagType;
+exports.getThemeForIcon = getThemeForIcon;
+exports.getTotalPages = getTotalPages;
+exports.hasDocument = hasDocument;
+exports.hasLocateAction = hasLocateAction;
+exports.hasSpecificSlottedTag = hasSpecificSlottedTag;
+exports.hasVisibleIcon = hasVisibleIcon;
+exports.hasWindow = hasWindow;
+exports.isCustomDropdown = isCustomDropdown;
+exports.isDisabledOrLoading = isDisabledOrLoading;
+exports.isHighContrastMode = isHighContrastMode;
+exports.isInfinitePagination = isInfinitePagination;
+exports.isListTypeOrdered = isListTypeOrdered;
+exports.isScrollable = isScrollable;
+exports.isSortable = isSortable;
+exports.isStateCompleteOrWarning = isStateCompleteOrWarning;
+exports.isThemeDark = isThemeDark;
+exports.isTouchDevice = isTouchDevice;
+exports.isType = isType;
+exports.isUrl = isUrl;
+exports.isWithinForm = isWithinForm;
+exports.modelSignatureHeight = modelSignatureHeight;
+exports.observedNodesMap = observedNodesMap;
+exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
+exports.parseJSONAttribute = parseJSONAttribute;
+exports.showCustomCalendarOrTimeIndicator = showCustomCalendarOrTimeIndicator;
+exports.supportsConstructableStylesheets = supportsConstructableStylesheets;
+exports.tempDiv = tempDiv;
+exports.tempIcon = tempIcon;
+exports.tempLabel = tempLabel;