@porsche-design-system/components-react 2.18.0-rc.1 → 2.18.0

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 function getClosestHTMLElement(element, selector) {
     return element === null || element === void 0 ? void 0 : element.closest(selector);
@@ -120,6 +118,8 @@ const fontHyphenation = {
     hyphens: 'auto',
 };
 
+const fontLineHeight = 'calc(6px + 2.125ex)'; // float px values may render differently on different browsers
+
 const fontWeight = {
     thin: 100,
     regular: 400,
@@ -132,13 +132,13 @@ const fontStyle = 'normal';
 const fontVariant = 'normal';
 
 const textXSmall = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 0.75rem/1.6666666667 ${fontFamily}`,
+    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 0.75rem/${fontLineHeight} ${fontFamily}`,
     ...fontBehavior,
     ...fontHyphenation,
 };
 
 const textSmall = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 1rem/1.5 ${fontFamily}`,
+    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 1rem/${fontLineHeight} ${fontFamily}`,
     ...fontBehavior,
     ...fontHyphenation,
 };
@@ -247,73 +247,206 @@ hasWindow &&
             .forEach((node) => childrenMutationMap.get(node)());
     });
 
-const getRole = (state) => {
-    return state === 'error' ? 'alert' : state === 'success' ? 'status' : null;
-};
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
-[
-    { name: 'Model', id: 'model' },
-    { name: 'Interest', id: 'interest' },
-    { name: 'VIN', id: 'vin' },
-    { name: 'Purchase Intention', id: 'purchaseIntention' },
-    { name: 'Status', id: 'status' },
-    { name: 'Comment', id: 'comment' },
-    { name: 'Lead ID', id: 'leadId' },
-    { name: 'Action', id: 'action', hideLabel: true },
-].map((item, i) => ({
-    ...item,
-    ...(i > 0 &&
-        i < 7 &&
-        i !== 5 && {
-        active: i === 1,
-        direction: 'asc',
-    }),
-}));
+/**
+ * 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.
+   */
 
-[
-    { name: 'Column 1', id: 'col1' },
-    { name: 'Column 2', id: 'col2' },
-    { name: 'Column 3', id: 'col3' },
-].map((item, i) => ({
-    ...item,
-    active: i === 1,
-    direction: 'asc',
-}));
 
-Array.from(Array(4)).map(() => ({
-    imageUrl: 'https://nav.porsche.com/00BC524/series-assets/1366/911@2x.jpg',
-    imageWidth: 80,
-    imageHeight: 48,
-    html: "<a href='#'>link</a>&nbsp;<b>bold</b>&nbsp;<i>italic</i>&nbsp;<strong>strong</strong>&nbsp;<em>emphasized</em>",
-    longText: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
-    shortText: 'Some text',
-}));
+  var 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;
+};
 
 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 = 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 _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(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' && document.nodeType === 9;
+var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
 
 var module$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     isBrowser: isBrowser,
-    'default': isBrowser
+    default: isBrowser
 });
 
 var isProduction = process.env.NODE_ENV === 'production';
@@ -335,16 +468,41 @@ function warning(condition, message) {
   }
 }
 
+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, descriptor.key, descriptor);
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
   }
 }
-
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
@@ -372,7 +530,6 @@ function _assertThisInitialized(self) {
   if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
-
   return self;
 }
 
@@ -381,13 +538,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   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;
 }
 
@@ -2672,7 +2827,7 @@ var index = createJss();
 
 var jss_esm = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    'default': index,
+    default: index,
     RuleList: RuleList,
     SheetsManager: SheetsManager,
     SheetsRegistry: SheetsRegistry,
@@ -2685,187 +2840,106 @@ var jss_esm = /*#__PURE__*/Object.freeze({
     toCssValue: toCssValue
 });
 
-var now = Date.now();
-var fnValuesNs = "fnValues" + now;
-var fnRuleNs = "fnStyle" + ++now;
+function getAugmentedNamespace(n) {
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+				var args = [null];
+				args.push.apply(args, arguments);
+				var Ctor = Function.bind.apply(f, args);
+				return new Ctor();
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
 
-var functionPlugin = function functionPlugin() {
-  return {
-    onCreateRule: function onCreateRule(name, decl, options) {
-      if (typeof decl !== 'function') return null;
-      var rule = createRule(name, {}, options);
-      rule[fnRuleNs] = decl;
-      return rule;
-    },
-    onProcessStyle: function onProcessStyle(style, rule) {
-      // We need to extract function values from the declaration, so that we can keep core unaware of them.
-      // We need to do that only once.
-      // We don't need to extract functions on each style update, since this can happen only once.
-      // We don't support function values inside of function rules.
-      if (fnValuesNs in rule || fnRuleNs in rule) return style;
-      var fnValues = {};
+/* eslint-disable no-var, prefer-template */
+var uppercasePattern = /[A-Z]/g;
+var msPattern = /^ms-/;
+var cache$2 = {};
 
-      for (var prop in style) {
-        var value = style[prop];
-        if (typeof value !== 'function') continue;
-        delete style[prop];
-        fnValues[prop] = value;
-      }
+function toHyphenLower(match) {
+  return '-' + match.toLowerCase()
+}
 
-      rule[fnValuesNs] = fnValues;
-      return style;
-    },
-    onUpdate: function onUpdate(data, rule, sheet, options) {
-      var styleRule = rule;
-      var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object
-      // will be returned from that function.
+function hyphenateStyleName(name) {
+  if (cache$2.hasOwnProperty(name)) {
+    return cache$2[name]
+  }
 
-      if (fnRule) {
-        // Empty object will remove all currently defined props
-        // in case function rule returns a falsy value.
-        styleRule.style = fnRule(data) || {};
+  var hName = name.replace(uppercasePattern, toHyphenLower);
+  return (cache$2[name] = msPattern.test(hName) ? '-' + hName : hName)
+}
 
-        if (process.env.NODE_ENV === 'development') {
-          for (var prop in styleRule.style) {
-            if (typeof styleRule.style[prop] === 'function') {
-              process.env.NODE_ENV !== "production" ? warning(false, '[JSS] Function values inside function rules are not supported.') : void 0;
-              break;
-            }
-          }
-        }
-      }
+var index_cjs = hyphenateStyleName;
 
-      var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.
+/**
+ * Convert camel cased property names to dash separated.
+ */
 
-      if (fnValues) {
-        for (var _prop in fnValues) {
-          styleRule.prop(_prop, fnValues[_prop](data), options);
-        }
-      }
-    }
-  };
-};
+function convertCase(style) {
+  var converted = {};
 
-function symbolObservablePonyfill(root) {
-	var result;
-	var Symbol = root.Symbol;
+  for (var prop in style) {
+    var key = prop.indexOf('--') === 0 ? prop : index_cjs(prop);
+    converted[key] = style[prop];
+  }
 
-	if (typeof Symbol === 'function') {
-		if (Symbol.observable) {
-			result = Symbol.observable;
-		} else {
-			result = Symbol('observable');
-			Symbol.observable = result;
-		}
-	} else {
-		result = '@@observable';
-	}
+  if (style.fallbacks) {
+    if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
+  }
 
-	return result;
+  return converted;
 }
+/**
+ * Allow camel cased property names by converting them back to dasherized.
+ */
 
-/* global window */
 
-var root;
+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]);
+      }
 
-if (typeof self !== 'undefined') {
-  root = self;
-} else if (typeof window !== 'undefined') {
-  root = window;
-} else if (typeof global !== 'undefined') {
-  root = global;
-} else if (typeof module !== 'undefined') {
-  root = module;
-} else {
-  root = Function('return this')();
-}
+      return style;
+    }
 
-var result = symbolObservablePonyfill(root);
+    return convertCase(style);
+  }
 
-var isObservable = function isObservable(value) {
-  return value && value[result] && value === value[result]();
-};
+  function onChangeValue(value, prop, rule) {
+    if (prop.indexOf('--') === 0) {
+      return value;
+    }
 
-var observablePlugin = function observablePlugin(updateOptions) {
-  return {
-    onCreateRule: function onCreateRule(name, decl, options) {
-      if (!isObservable(decl)) return null;
-      var style$ = decl;
-      var rule = createRule(name, {}, options); // TODO
-      // Call `stream.subscribe()` returns a subscription, which should be explicitly
-      // unsubscribed from when we know this sheet is no longer needed.
-
-      style$.subscribe(function (style) {
-        for (var prop in style) {
-          rule.prop(prop, style[prop], updateOptions);
-        }
-      });
-      return rule;
-    },
-    onProcessRule: function onProcessRule(rule) {
-      if (rule && rule.type !== 'style') return;
-      var styleRule = rule;
-      var style = styleRule.style;
-
-      var _loop = function _loop(prop) {
-        var value = style[prop];
-        if (!isObservable(value)) return "continue";
-        delete style[prop];
-        value.subscribe({
-          next: function next(nextValue) {
-            styleRule.prop(prop, nextValue, updateOptions);
-          }
-        });
-      };
-
-      for (var prop in style) {
-        var _ret = _loop(prop);
-
-        if (_ret === "continue") continue;
-      }
-    }
-  };
-};
-
-var semiWithNl = /;\n/;
-/**
- * Naive CSS parser.
- * - Supports only rule body (no selectors)
- * - Requires semicolon and new line after the value (except of last line)
- * - No nested rules support
- */
-
-var parse = function parse(cssText) {
-  var style = {};
-  var split = cssText.split(semiWithNl);
-
-  for (var i = 0; i < split.length; i++) {
-    var decl = (split[i] || '').trim();
-    if (!decl) continue;
-    var colonIndex = decl.indexOf(':');
-
-    if (colonIndex === -1) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Malformed CSS string \"" + decl + "\"") : void 0;
-      continue;
-    }
-
-    var prop = decl.substr(0, colonIndex).trim();
-    var value = decl.substr(colonIndex + 1).trim();
-    style[prop] = value;
-  }
+    var hyphenatedProp = index_cjs(prop); // There was no camel case in place
 
-  return style;
-};
+    if (prop === hyphenatedProp) return value;
+    rule.prop(hyphenatedProp, value); // Core will ignore that property value we set the proper one above.
 
-var onProcessRule = function onProcessRule(rule) {
-  if (typeof rule.style === 'string') {
-    rule.style = parse(rule.style);
+    return null;
   }
-};
 
-function templatePlugin() {
   return {
-    onProcessRule: onProcessRule
+    onProcessStyle: onProcessStyle,
+    onChangeValue: onChangeValue
   };
 }
 
@@ -3051,138 +3125,6 @@ function jssGlobal() {
   };
 }
 
-var isObject$1 = function isObject(obj) {
-  return obj && typeof obj === 'object' && !Array.isArray(obj);
-};
-
-var valueNs = "extendCurrValue" + Date.now();
-
-function mergeExtend(style, rule, sheet, newStyle) {
-  var extendType = typeof style.extend; // Extend using a rule name.
-
-  if (extendType === 'string') {
-    if (!sheet) return;
-    var refRule = sheet.getRule(style.extend);
-    if (!refRule) return;
-
-    if (refRule === rule) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] A rule tries to extend itself \n" + rule.toString()) : void 0;
-      return;
-    }
-
-    var parent = refRule.options.parent;
-
-    if (parent) {
-      var originalStyle = parent.rules.raw[style.extend];
-      extend(originalStyle, rule, sheet, newStyle);
-    }
-
-    return;
-  } // Extend using an array.
-
-
-  if (Array.isArray(style.extend)) {
-    for (var index = 0; index < style.extend.length; index++) {
-      var singleExtend = style.extend[index];
-      var singleStyle = typeof singleExtend === 'string' ? _extends({}, style, {
-        extend: singleExtend
-      }) : style.extend[index];
-      extend(singleStyle, rule, sheet, newStyle);
-    }
-
-    return;
-  } // Extend is a style object.
-
-
-  for (var prop in style.extend) {
-    if (prop === 'extend') {
-      extend(style.extend.extend, rule, sheet, newStyle);
-      continue;
-    }
-
-    if (isObject$1(style.extend[prop])) {
-      if (!(prop in newStyle)) newStyle[prop] = {};
-      extend(style.extend[prop], rule, sheet, newStyle[prop]);
-      continue;
-    }
-
-    newStyle[prop] = style.extend[prop];
-  }
-}
-
-function mergeRest(style, rule, sheet, newStyle) {
-  // Copy base style.
-  for (var prop in style) {
-    if (prop === 'extend') continue;
-
-    if (isObject$1(newStyle[prop]) && isObject$1(style[prop])) {
-      extend(style[prop], rule, sheet, newStyle[prop]);
-      continue;
-    }
-
-    if (isObject$1(style[prop])) {
-      newStyle[prop] = extend(style[prop], rule, sheet);
-      continue;
-    }
-
-    newStyle[prop] = style[prop];
-  }
-}
-/**
- * Recursively extend styles.
- */
-
-
-function extend(style, rule, sheet, newStyle) {
-  if (newStyle === void 0) {
-    newStyle = {};
-  }
-
-  mergeExtend(style, rule, sheet, newStyle);
-  mergeRest(style, rule, sheet, newStyle);
-  return newStyle;
-}
-/**
- * Handle `extend` property.
- */
-
-
-function jssExtend() {
-  function onProcessStyle(style, rule, sheet) {
-    if ('extend' in style) return extend(style, rule, sheet);
-    return style;
-  }
-
-  function onChangeValue(value, prop, rule) {
-    if (prop !== 'extend') return value; // Value is empty, remove properties set previously.
-
-    if (value == null || value === false) {
-      for (var key in rule[valueNs]) {
-        rule.prop(key, null);
-      }
-
-      rule[valueNs] = null;
-      return null;
-    }
-
-    if (typeof value === 'object') {
-      for (var _key in value) {
-        rule.prop(_key, value[_key]);
-      }
-
-      rule[valueNs] = value;
-    } // Make sure we don't set the value in the core.
-
-
-    return null;
-  }
-
-  return {
-    onProcessStyle: onProcessStyle,
-    onChangeValue: onChangeValue
-  };
-}
-
 var separatorRegExp = /\s*,\s*/g;
 var parentRegExp = /&/g;
 var refRegExp = /\$([\w-]+)/g;
@@ -3292,1953 +3234,2299 @@ function jssNested() {
   };
 }
 
-/**
- * Set selector.
- *
- * @param original rule
- * @param className class string
- * @return flag indicating function was successfull or not
- */
-
-function registerClass(rule, className) {
-  // Skip falsy values
-  if (!className) return true; // Support array of class names `{composes: ['foo', 'bar']}`
-
-  if (Array.isArray(className)) {
-    for (var index = 0; index < className.length; index++) {
-      var isSetted = registerClass(rule, className[index]);
-      if (!isSetted) return false;
-    }
-
-    return true;
-  } // Support space separated class names `{composes: 'foo bar'}`
+var _tslib$1 = {};
 
+(function (exports) {
 
-  if (className.indexOf(' ') > -1) {
-    return registerClass(rule, className.split(' '));
-  }
+	Object.defineProperty(exports, '__esModule', { value: true });
 
-  var parent = rule.options.parent; // It is a ref to a local rule.
+	/*! *****************************************************************************
+	Copyright (c) Microsoft Corporation.
 
-  if (className[0] === '$') {
-    var refRule = parent.getRule(className.substr(1));
+	Permission to use, copy, modify, and/or distribute this software for any
+	purpose with or without fee is hereby granted.
 
-    if (!refRule) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Referenced rule is not defined. \n" + rule.toString()) : void 0;
-      return false;
-    }
+	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.
+	***************************************************************************** */
 
-    if (refRule === rule) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Cyclic composition detected. \n" + rule.toString()) : void 0;
-      return false;
-    }
+	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));
 
-    parent.classes[rule.key] += " " + parent.classes[refRule.key];
-    return true;
-  }
+var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
 
-  parent.classes[rule.key] += " " + className;
-  return true;
-}
 /**
- * Convert compose property to additional class, remove property from original styles.
+ * 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
+// ----------------------------------------
 
-function jssCompose() {
-  function onProcessStyle(style, rule) {
-    if (!('composes' in style)) return style;
-    registerClass(rule, style.composes); // Remove composes property to prevent infinite loop.
+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;
 
-    delete style.composes;
-    return style;
+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
   }
 
-  return {
-    onProcessStyle: onProcessStyle
-  };
-}
+  let number = length[1];
+  const unit = length[2];
 
-function getAugmentedNamespace(n) {
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function () {
-			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;
-}
+  switch (unit) {
+    case 'ch':
+      number = parseFloat(number) * 8.8984375;
+      break
 
-/* eslint-disable no-var, prefer-template */
-var uppercasePattern = /[A-Z]/g;
-var msPattern = /^ms-/;
-var cache$2 = {};
+    case 'em':
+    case 'rem':
+      number = parseFloat(number) * 16;
+      break
 
-function toHyphenLower(match) {
-  return '-' + match.toLowerCase()
-}
+    case 'ex':
+      number = parseFloat(number) * 8.296875;
+      break
 
-function hyphenateStyleName(name) {
-  if (cache$2.hasOwnProperty(name)) {
-    return cache$2[name]
+    case 'px':
+      number = parseFloat(number);
+      break
   }
 
-  var hName = name.replace(uppercasePattern, toHyphenLower);
-  return (cache$2[name] = msPattern.test(hName) ? '-' + hName : hName)
+  return +number
 }
 
-var index_cjs = hyphenateStyleName;
+/**
+ * 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)
+  }
+}
 
 /**
- * Convert camel cased property names to dash separated.
+ * @private
+ * @param {string} a
+ * @param {string} b
+ * @return {number|null}
  */
+function _testIsPrint (a, b) {
+  const isPrintA = isPrint.test(a);
+  const isPrintOnlyA = isPrintOnly.test(a);
 
-function convertCase(style) {
-  var converted = {};
+  const isPrintB = isPrint.test(b);
+  const isPrintOnlyB = isPrintOnly.test(b);
 
-  for (var prop in style) {
-    var key = prop.indexOf('--') === 0 ? prop : index_cjs(prop);
-    converted[key] = style[prop];
+  if (isPrintA && isPrintB) {
+    if (!isPrintOnlyA && isPrintOnlyB) {
+      return 1
+    }
+    if (isPrintOnlyA && !isPrintOnlyB) {
+      return -1
+    }
+    return a.localeCompare(b)
   }
-
-  if (style.fallbacks) {
-    if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
+  if (isPrintA) {
+    return 1
+  }
+  if (isPrintB) {
+    return -1
   }
 
-  return converted;
+  return null
 }
+
+// ----------------------------------------
+// Public
+// ----------------------------------------
+
 /**
- * Allow camel cased property names by converting them back to dasherized.
+ * 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);
 
-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;
-    }
+  const minB = isMinWidth(b) || isMinHeight(b);
+  const maxB = isMaxWidth(b) || isMaxHeight(b);
 
-    return convertCase(style);
+  if (minA && maxB) {
+    return -1
+  }
+  if (maxA && minB) {
+    return 1
   }
 
-  function onChangeValue(value, prop, rule) {
-    if (prop.indexOf('--') === 0) {
-      return value;
-    }
+  let lengthA = _getQueryLength(a);
+  let lengthB = _getQueryLength(b);
 
-    var hyphenatedProp = index_cjs(prop); // There was no camel case in place
+  if (lengthA === maxValue && lengthB === maxValue) {
+    return a.localeCompare(b)
+  } else if (lengthA === maxValue) {
+    return 1
+  } else if (lengthB === maxValue) {
+    return -1
+  }
 
-    if (prop === hyphenatedProp) return value;
-    rule.prop(hyphenatedProp, value); // Core will ignore that property value we set the proper one above.
+  if (lengthA > lengthB) {
+    if (maxA) {
+      return -1
+    }
+    return 1
+  }
 
-    return null;
+  if (lengthA < lengthB) {
+    if (maxA) {
+      return 1
+    }
+    return -1
   }
 
-  return {
-    onProcessStyle: onProcessStyle,
-    onChangeValue: onChangeValue
-  };
+  return a.localeCompare(b)
 }
 
-var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
-var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
-var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
 /**
- * Generated jss-plugin-default-unit CSS property units
- */
-
-var defaultUnits = {
-  // Animation properties
-  'animation-delay': ms,
-  'animation-duration': ms,
-  // Background properties
-  'background-position': px,
-  'background-position-x': px,
-  'background-position-y': px,
-  'background-size': px,
-  // Border Properties
-  border: px,
-  'border-bottom': px,
-  'border-bottom-left-radius': px,
-  'border-bottom-right-radius': px,
-  'border-bottom-width': px,
-  'border-left': px,
-  'border-left-width': px,
-  'border-radius': px,
-  'border-right': px,
-  'border-right-width': px,
-  'border-top': px,
-  'border-top-left-radius': px,
-  'border-top-right-radius': px,
-  'border-top-width': px,
-  'border-width': px,
-  'border-block': px,
-  'border-block-end': px,
-  'border-block-end-width': px,
-  'border-block-start': px,
-  'border-block-start-width': px,
-  'border-block-width': px,
-  'border-inline': px,
-  'border-inline-end': px,
-  'border-inline-end-width': px,
-  'border-inline-start': px,
-  'border-inline-start-width': px,
-  'border-inline-width': px,
-  'border-start-start-radius': px,
-  'border-start-end-radius': px,
-  'border-end-start-radius': px,
-  'border-end-end-radius': px,
-  // Margin properties
-  margin: px,
-  'margin-bottom': px,
-  'margin-left': px,
-  'margin-right': px,
-  'margin-top': px,
-  'margin-block': px,
-  'margin-block-end': px,
-  'margin-block-start': px,
-  'margin-inline': px,
-  'margin-inline-end': px,
-  'margin-inline-start': px,
-  // Padding properties
-  padding: px,
-  'padding-bottom': px,
-  'padding-left': px,
-  'padding-right': px,
-  'padding-top': px,
-  'padding-block': px,
-  'padding-block-end': px,
-  'padding-block-start': px,
-  'padding-inline': px,
-  'padding-inline-end': px,
-  'padding-inline-start': px,
-  // Mask properties
-  'mask-position-x': px,
-  'mask-position-y': px,
-  'mask-size': px,
-  // Width and height properties
-  height: px,
-  width: px,
-  'min-height': px,
-  'max-height': px,
-  'min-width': px,
-  'max-width': px,
-  // Position properties
-  bottom: px,
-  left: px,
-  top: px,
-  right: px,
-  inset: px,
-  'inset-block': px,
-  'inset-block-end': px,
-  'inset-block-start': px,
-  'inset-inline': px,
-  'inset-inline-end': px,
-  'inset-inline-start': px,
-  // Shadow properties
-  'box-shadow': px,
-  'text-shadow': px,
-  // Column properties
-  'column-gap': px,
-  'column-rule': px,
-  'column-rule-width': px,
-  'column-width': px,
-  // Font and text properties
-  'font-size': px,
-  'font-size-delta': px,
-  'letter-spacing': px,
-  'text-decoration-thickness': px,
-  'text-indent': px,
-  'text-stroke': px,
-  'text-stroke-width': px,
-  'word-spacing': px,
-  // Motion properties
-  motion: px,
-  'motion-offset': px,
-  // Outline properties
-  outline: px,
-  'outline-offset': px,
-  'outline-width': px,
-  // Perspective properties
-  perspective: px,
-  'perspective-origin-x': percent,
-  'perspective-origin-y': percent,
-  // Transform properties
-  'transform-origin': percent,
-  'transform-origin-x': percent,
-  'transform-origin-y': percent,
-  'transform-origin-z': percent,
-  // Transition properties
-  'transition-delay': ms,
-  'transition-duration': ms,
-  // Alignment properties
-  'vertical-align': px,
-  'flex-basis': px,
-  // Some random properties
-  'shape-margin': px,
-  size: px,
-  gap: px,
-  // Grid properties
-  grid: px,
-  'grid-gap': px,
-  'row-gap': px,
-  'grid-row-gap': px,
-  'grid-column-gap': px,
-  'grid-template-rows': px,
-  'grid-template-columns': px,
-  'grid-auto-rows': px,
-  'grid-auto-columns': px,
-  // Not existing properties.
-  // Used to avoid issues with jss-plugin-expand integration.
-  'box-shadow-x': px,
-  'box-shadow-y': px,
-  'box-shadow-blur': px,
-  'box-shadow-spread': px,
-  'font-line-height': px,
-  'text-shadow-x': px,
-  'text-shadow-y': px,
-  'text-shadow-blur': px
-};
-
-/**
- * Clones the object and adds a camel cased property version.
+ * 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
+  }
 
-function addCamelCasedVersion(obj) {
-  var regExp = /(-[a-z])/g;
-
-  var replace = function replace(str) {
-    return str[1].toUpperCase();
-  };
+  const minA = isMinWidth(a) || isMinHeight(a);
+  const maxA = isMaxWidth(a) || isMaxHeight(a);
 
-  var newObj = {};
+  const minB = isMinWidth(b) || isMinHeight(b);
+  const maxB = isMaxWidth(b) || isMaxHeight(b);
 
-  for (var key in obj) {
-    newObj[key] = obj[key];
-    newObj[key.replace(regExp, replace)] = obj[key];
+  if (minA && maxB) {
+    return 1
+  }
+  if (maxA && minB) {
+    return -1
   }
 
-  return newObj;
-}
-
-var units = addCamelCasedVersion(defaultUnits);
-/**
- * Recursive deep style passing function
- */
+  const lengthA = _getQueryLength(a);
+  const lengthB = _getQueryLength(b);
 
-function iterate(prop, value, options) {
-  if (value == null) return value;
+  if (lengthA === maxValue && lengthB === maxValue) {
+    return a.localeCompare(b)
+  } else if (lengthA === maxValue) {
+    return 1
+  } else if (lengthB === maxValue) {
+    return -1
+  }
 
-  if (Array.isArray(value)) {
-    for (var i = 0; i < value.length; i++) {
-      value[i] = iterate(prop, value[i], options);
+  if (lengthA > lengthB) {
+    if (maxA) {
+      return -1
     }
-  } else if (typeof value === 'object') {
-    if (prop === 'fallbacks') {
-      for (var innerProp in value) {
-        value[innerProp] = iterate(innerProp, value[innerProp], options);
-      }
-    } else {
-      for (var _innerProp in value) {
-        value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
-      }
-    } // eslint-disable-next-line no-restricted-globals
-
-  } else if (typeof value === 'number' && isNaN(value) === false) {
-    var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.
+    return 1
+  }
 
-    if (unit && !(value === 0 && unit === px)) {
-      return typeof unit === 'function' ? unit(value).toString() : "" + value + unit;
+  if (lengthA < lengthB) {
+    if (maxA) {
+      return 1
     }
-
-    return value.toString();
+    return -1
   }
 
-  return value;
-}
-/**
- * Add unit to numeric values.
- */
+  return -(a.localeCompare(b))
+};
 
+// ----------------------------------------
+// Exports
+// ----------------------------------------
 
-function defaultUnit(options) {
-  if (options === void 0) {
-    options = {};
-  }
+var sortCssMediaQueries = sortCSSmq$1;
 
-  var camelCasedOptions = addCamelCasedVersion(options);
+var _tslib = _tslib$1;
+var jss$1 = require$$1;
+var sortCSSmq = sortCssMediaQueries;
 
-  function onProcessStyle(style, rule) {
-    if (rule.type !== 'style') return style;
+function _interopDefaultLegacy(e) {
+	return e && typeof e === 'object' && 'default' in e ? e : { default: e };
+}
 
-    for (var prop in style) {
-      style[prop] = iterate(prop, style[prop], camelCasedOptions);
+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;
+
+/* Auto Generated Start */
+const themeLight = {
+    baseColor: '#000',
+    baseColorDarken: '#000000',
+    brandColor: '#d5001c',
+    backgroundColor: '#fff',
+    backgroundSurfaceColor: '#f2f2f2',
+    contrastLowColor: '#e3e4e5',
+    contrastMediumColor: '#626669',
+    contrastHighColor: '#323639',
+    contrastHighColorDarken: '#151718',
+    hoverColor: '#d5001c',
+    hoverColorDarken: '#980014',
+    activeColor: '#d5001c',
+    focusColor: 'currentColor',
+    disabledColor: '#96989a',
+    errorColor: '#e00000',
+    errorColorDarken: '#a30000',
+    errorSoftColor: '#fae6e6',
+    successColor: '#018a16',
+    successColorDarken: '#014d0c',
+    successSoftColor: '#e5f3e7',
+    warningColor: '#ff9b00',
+    warningSoftColor: '#fff5e5',
+    neutralColor: '#0061bd',
+    neutralSoftColor: '#e5eff8'
+};
+const themeDark = {
+    baseColor: '#fff',
+    baseColorDarken: '#e0e0e0',
+    brandColor: '#d5001c',
+    backgroundColor: '#0e1418',
+    backgroundSurfaceColor: '#262b2e',
+    contrastLowColor: '#4a4e51',
+    contrastMediumColor: '#b0b1b2',
+    contrastHighColor: '#e3e4e5',
+    contrastHighColorDarken: '#c3c5c8',
+    hoverColor: '#ff0223',
+    hoverColorDarken: '#c4001a',
+    activeColor: '#ff0223',
+    focusColor: 'currentColor',
+    disabledColor: '#7c7f81',
+    errorColor: '#fc1717',
+    errorColorDarken: '#d30303',
+    errorSoftColor: '#fec5c5',
+    successColor: '#01ba1d',
+    successColorDarken: '#017d14',
+    successSoftColor: '#bfeec6',
+    warningColor: '#ff9b00',
+    warningSoftColor: '#ffe6bf',
+    neutralColor: '#2193ff',
+    neutralSoftColor: '#c7e4ff'
+};
+const themeLightElectric = Object.assign(Object.assign({}, themeLight), { brandColor: '#00b0f4', hoverColor: '#00b0f4', hoverColorDarken: '#0084b7', activeColor: '#00b0f4' });
+const themeDarkElectric = Object.assign(Object.assign({}, themeDark), { brandColor: '#00b0f4', hoverColor: '#00b0f4', hoverColorDarken: '#0084b7', activeColor: '#00b0f4' });
+const themes = {
+    'light': themeLight,
+    'dark': themeDark,
+    'light-electric': themeLightElectric,
+    'dark-electric': themeDarkElectric
+};
+/* Auto Generated End */
+const getThemedColors = (theme) => {
+    return themes[theme];
+};
+
+const pxToRemWithUnit = (px) => `${px / 16}rem`;
+
+// NOTE: handpicked selection of plugins from jss-preset-default
+createJss({
+    plugins: [
+        jssGlobal(),
+        jssNested(),
+        camelCase(),
+        dist({ combineMediaQueries: true }),
+    ],
+});
+const supportsConstructableStylesheets = () => {
+    try {
+        return typeof new CSSStyleSheet().replaceSync === 'function';
     }
+    catch (_a) {
+        return false;
+    }
+};
+// determine it once
+supportsConstructableStylesheets();
 
-    return style;
+const paramCaseToCamelCase = (str) => {
+    return str.replace(/-(\w)/g, (_, group) => group.toUpperCase());
+};
+const isScrollable = (isPrevHidden, isNextHidden) => {
+    return !(isPrevHidden && isNextHidden);
+};
+
+const hasDocument = typeof document !== 'undefined';
+
+hasDocument && 'scrollBehavior' in document.documentElement.style;
+const win = typeof window !== 'undefined' ? window : {};
+win.document || { head: {} };
+(win.HTMLElement || class {
+});
+
+[
+    { name: 'Model', id: 'model' },
+    { name: 'Interest', id: 'interest' },
+    { name: 'VIN', id: 'vin' },
+    { name: 'Purchase Intention', id: 'purchaseIntention' },
+    { name: 'Status', id: 'status' },
+    { name: 'Comment', id: 'comment' },
+    { name: 'Lead ID', id: 'leadId' },
+    { name: 'Action', id: 'action', hideLabel: true },
+].map((item, i) => ({
+    ...item,
+    ...(i > 0 &&
+        i < 7 &&
+        i !== 5 && {
+        active: i === 1,
+        direction: 'asc',
+    }),
+}));
+
+[
+    { name: 'Column 1', id: 'col1' },
+    { name: 'Column 2', id: 'col2' },
+    { name: 'Column 3', id: 'col3' },
+].map((item, i) => ({
+    ...item,
+    active: i === 1,
+    direction: 'asc',
+}));
+
+Array.from(Array(4)).map(() => ({
+    imageUrl: 'https://nav.porsche.com/00BC524/series-assets/1366/911@2x.jpg',
+    imageWidth: 80,
+    imageHeight: 48,
+    html: "<a href='#'>link</a>&nbsp;<b>bold</b>&nbsp;<i>italic</i>&nbsp;<strong>strong</strong>&nbsp;<em>emphasized</em>",
+    longText: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
+    shortText: 'Some text',
+}));
+
+var now = Date.now();
+var fnValuesNs = "fnValues" + now;
+var fnRuleNs = "fnStyle" + ++now;
+
+var functionPlugin = function functionPlugin() {
+  return {
+    onCreateRule: function onCreateRule(name, decl, options) {
+      if (typeof decl !== 'function') return null;
+      var rule = createRule(name, {}, options);
+      rule[fnRuleNs] = decl;
+      return rule;
+    },
+    onProcessStyle: function onProcessStyle(style, rule) {
+      // We need to extract function values from the declaration, so that we can keep core unaware of them.
+      // We need to do that only once.
+      // We don't need to extract functions on each style update, since this can happen only once.
+      // We don't support function values inside of function rules.
+      if (fnValuesNs in rule || fnRuleNs in rule) return style;
+      var fnValues = {};
+
+      for (var prop in style) {
+        var value = style[prop];
+        if (typeof value !== 'function') continue;
+        delete style[prop];
+        fnValues[prop] = value;
+      }
+
+      rule[fnValuesNs] = fnValues;
+      return style;
+    },
+    onUpdate: function onUpdate(data, rule, sheet, options) {
+      var styleRule = rule;
+      var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object
+      // will be returned from that function.
+
+      if (fnRule) {
+        // Empty object will remove all currently defined props
+        // in case function rule returns a falsy value.
+        styleRule.style = fnRule(data) || {};
+
+        if (process.env.NODE_ENV === 'development') {
+          for (var prop in styleRule.style) {
+            if (typeof styleRule.style[prop] === 'function') {
+              process.env.NODE_ENV !== "production" ? warning(false, '[JSS] Function values inside function rules are not supported.') : void 0;
+              break;
+            }
+          }
+        }
+      }
+
+      var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.
+
+      if (fnValues) {
+        for (var _prop in fnValues) {
+          styleRule.prop(_prop, fnValues[_prop](data), options);
+        }
+      }
+    }
+  };
+};
+
+function symbolObservablePonyfill(root) {
+	var result;
+	var Symbol = root.Symbol;
+
+	if (typeof Symbol === 'function') {
+		if (Symbol.observable) {
+			result = Symbol.observable;
+		} else {
+			result = Symbol('observable');
+			Symbol.observable = result;
+		}
+	} else {
+		result = '@@observable';
+	}
+
+	return result;
+}
+
+/* global window */
+
+var root;
+
+if (typeof self !== 'undefined') {
+  root = self;
+} else if (typeof window !== 'undefined') {
+  root = window;
+} else if (typeof global !== 'undefined') {
+  root = global;
+} else if (typeof module !== 'undefined') {
+  root = module;
+} else {
+  root = Function('return this')();
+}
+
+var result = symbolObservablePonyfill(root);
+
+var isObservable = function isObservable(value) {
+  return value && value[result] && value === value[result]();
+};
+
+var observablePlugin = function observablePlugin(updateOptions) {
+  return {
+    onCreateRule: function onCreateRule(name, decl, options) {
+      if (!isObservable(decl)) return null;
+      var style$ = decl;
+      var rule = createRule(name, {}, options); // TODO
+      // Call `stream.subscribe()` returns a subscription, which should be explicitly
+      // unsubscribed from when we know this sheet is no longer needed.
+
+      style$.subscribe(function (style) {
+        for (var prop in style) {
+          rule.prop(prop, style[prop], updateOptions);
+        }
+      });
+      return rule;
+    },
+    onProcessRule: function onProcessRule(rule) {
+      if (rule && rule.type !== 'style') return;
+      var styleRule = rule;
+      var style = styleRule.style;
+
+      var _loop = function _loop(prop) {
+        var value = style[prop];
+        if (!isObservable(value)) return "continue";
+        delete style[prop];
+        value.subscribe({
+          next: function next(nextValue) {
+            styleRule.prop(prop, nextValue, updateOptions);
+          }
+        });
+      };
+
+      for (var prop in style) {
+        var _ret = _loop(prop);
+
+        if (_ret === "continue") continue;
+      }
+    }
+  };
+};
+
+var semiWithNl = /;\n/;
+/**
+ * Naive CSS parser.
+ * - Supports only rule body (no selectors)
+ * - Requires semicolon and new line after the value (except of last line)
+ * - No nested rules support
+ */
+
+var parse = function parse(cssText) {
+  var style = {};
+  var split = cssText.split(semiWithNl);
+
+  for (var i = 0; i < split.length; i++) {
+    var decl = (split[i] || '').trim();
+    if (!decl) continue;
+    var colonIndex = decl.indexOf(':');
+
+    if (colonIndex === -1) {
+      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Malformed CSS string \"" + decl + "\"") : void 0;
+      continue;
+    }
+
+    var prop = decl.substr(0, colonIndex).trim();
+    var value = decl.substr(colonIndex + 1).trim();
+    style[prop] = value;
+  }
+
+  return style;
+};
+
+var onProcessRule = function onProcessRule(rule) {
+  if (typeof rule.style === 'string') {
+    rule.style = parse(rule.style);
+  }
+};
+
+function templatePlugin() {
+  return {
+    onProcessRule: onProcessRule
+  };
+}
+
+var isObject = function isObject(obj) {
+  return obj && typeof obj === 'object' && !Array.isArray(obj);
+};
+
+var valueNs = "extendCurrValue" + Date.now();
+
+function mergeExtend(style, rule, sheet, newStyle) {
+  var extendType = typeof style.extend; // Extend using a rule name.
+
+  if (extendType === 'string') {
+    if (!sheet) return;
+    var refRule = sheet.getRule(style.extend);
+    if (!refRule) return;
+
+    if (refRule === rule) {
+      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] A rule tries to extend itself \n" + rule.toString()) : void 0;
+      return;
+    }
+
+    var parent = refRule.options.parent;
+
+    if (parent) {
+      var originalStyle = parent.rules.raw[style.extend];
+      extend(originalStyle, rule, sheet, newStyle);
+    }
+
+    return;
+  } // Extend using an array.
+
+
+  if (Array.isArray(style.extend)) {
+    for (var index = 0; index < style.extend.length; index++) {
+      var singleExtend = style.extend[index];
+      var singleStyle = typeof singleExtend === 'string' ? _extends({}, style, {
+        extend: singleExtend
+      }) : style.extend[index];
+      extend(singleStyle, rule, sheet, newStyle);
+    }
+
+    return;
+  } // Extend is a style object.
+
+
+  for (var prop in style.extend) {
+    if (prop === 'extend') {
+      extend(style.extend.extend, rule, sheet, newStyle);
+      continue;
+    }
+
+    if (isObject(style.extend[prop])) {
+      if (!(prop in newStyle)) newStyle[prop] = {};
+      extend(style.extend[prop], rule, sheet, newStyle[prop]);
+      continue;
+    }
+
+    newStyle[prop] = style.extend[prop];
   }
+}
+
+function mergeRest(style, rule, sheet, newStyle) {
+  // Copy base style.
+  for (var prop in style) {
+    if (prop === 'extend') continue;
+
+    if (isObject(newStyle[prop]) && isObject(style[prop])) {
+      extend(style[prop], rule, sheet, newStyle[prop]);
+      continue;
+    }
+
+    if (isObject(style[prop])) {
+      newStyle[prop] = extend(style[prop], rule, sheet);
+      continue;
+    }
+
+    newStyle[prop] = style[prop];
+  }
+}
+/**
+ * Recursively extend styles.
+ */
 
-  function onChangeValue(value, prop) {
-    return iterate(prop, value, camelCasedOptions);
+
+function extend(style, rule, sheet, newStyle) {
+  if (newStyle === void 0) {
+    newStyle = {};
   }
 
-  return {
-    onProcessStyle: onProcessStyle,
-    onChangeValue: onChangeValue
-  };
+  mergeExtend(style, rule, sheet, newStyle);
+  mergeRest(style, rule, sheet, newStyle);
+  return newStyle;
 }
-
 /**
- * A scheme for converting properties from array to regular style.
- * All properties listed below will be transformed to a string separated by space.
+ * Handle `extend` property.
  */
-var propArray = {
-  'background-size': true,
-  'background-position': true,
-  border: true,
-  'border-bottom': true,
-  'border-left': true,
-  'border-top': true,
-  'border-right': true,
-  'border-radius': true,
-  'border-image': true,
-  'border-width': true,
-  'border-style': true,
-  'border-color': true,
-  'box-shadow': true,
-  flex: true,
-  margin: true,
-  padding: true,
-  outline: true,
-  'transform-origin': true,
-  transform: true,
-  transition: true
-  /**
-   * A scheme for converting arrays to regular styles inside of objects.
-   * For e.g.: "{position: [0, 0]}" => "background-position: 0 0;".
-   */
 
-};
-var propArrayInObj = {
-  position: true,
-  // background-position
-  size: true // background-size
 
-  /**
-   * A scheme for parsing and building correct styles from passed objects.
-   */
+function jssExtend() {
+  function onProcessStyle(style, rule, sheet) {
+    if ('extend' in style) return extend(style, rule, sheet);
+    return style;
+  }
 
-};
-var propObj = {
-  padding: {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
-  margin: {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
-  background: {
-    attachment: null,
-    color: null,
-    image: null,
-    position: null,
-    repeat: null
-  },
-  border: {
-    width: null,
-    style: null,
-    color: null
-  },
-  'border-top': {
-    width: null,
-    style: null,
-    color: null
-  },
-  'border-right': {
-    width: null,
-    style: null,
-    color: null
-  },
-  'border-bottom': {
-    width: null,
-    style: null,
-    color: null
-  },
-  'border-left': {
-    width: null,
-    style: null,
-    color: null
-  },
-  outline: {
-    width: null,
-    style: null,
-    color: null
-  },
-  'list-style': {
-    type: null,
-    position: null,
-    image: null
-  },
-  transition: {
-    property: null,
-    duration: null,
-    'timing-function': null,
-    timingFunction: null,
-    // Needed for avoiding comilation issues with jss-plugin-camel-case
-    delay: null
-  },
-  animation: {
-    name: null,
-    duration: null,
-    'timing-function': null,
-    timingFunction: null,
-    // Needed to avoid compilation issues with jss-plugin-camel-case
-    delay: null,
-    'iteration-count': null,
-    iterationCount: null,
-    // Needed to avoid compilation issues with jss-plugin-camel-case
-    direction: null,
-    'fill-mode': null,
-    fillMode: null,
-    // Needed to avoid compilation issues with jss-plugin-camel-case
-    'play-state': null,
-    playState: null // Needed to avoid compilation issues with jss-plugin-camel-case
+  function onChangeValue(value, prop, rule) {
+    if (prop !== 'extend') return value; // Value is empty, remove properties set previously.
 
-  },
-  'box-shadow': {
-    x: 0,
-    y: 0,
-    blur: 0,
-    spread: 0,
-    color: null,
-    inset: null
-  },
-  'text-shadow': {
-    x: 0,
-    y: 0,
-    blur: null,
-    color: null
-  }
-  /**
-   * A scheme for converting non-standart properties inside object.
-   * For e.g.: include 'border-radius' property inside 'border' object.
-   */
+    if (value == null || value === false) {
+      for (var key in rule[valueNs]) {
+        rule.prop(key, null);
+      }
 
-};
-var customPropObj = {
-  border: {
-    radius: 'border-radius',
-    image: 'border-image',
-    width: 'border-width',
-    style: 'border-style',
-    color: 'border-color'
-  },
-  'border-bottom': {
-    width: 'border-bottom-width',
-    style: 'border-bottom-style',
-    color: 'border-bottom-color'
-  },
-  'border-top': {
-    width: 'border-top-width',
-    style: 'border-top-style',
-    color: 'border-top-color'
-  },
-  'border-left': {
-    width: 'border-left-width',
-    style: 'border-left-style',
-    color: 'border-left-color'
-  },
-  'border-right': {
-    width: 'border-right-width',
-    style: 'border-right-style',
-    color: 'border-right-color'
-  },
-  background: {
-    size: 'background-size',
-    image: 'background-image'
-  },
-  font: {
-    style: 'font-style',
-    variant: 'font-variant',
-    weight: 'font-weight',
-    stretch: 'font-stretch',
-    size: 'font-size',
-    family: 'font-family',
-    lineHeight: 'line-height',
-    // Needed to avoid compilation issues with jss-plugin-camel-case
-    'line-height': 'line-height'
-  },
-  flex: {
-    grow: 'flex-grow',
-    basis: 'flex-basis',
-    direction: 'flex-direction',
-    wrap: 'flex-wrap',
-    flow: 'flex-flow',
-    shrink: 'flex-shrink'
-  },
-  align: {
-    self: 'align-self',
-    items: 'align-items',
-    content: 'align-content'
-  },
-  grid: {
-    'template-columns': 'grid-template-columns',
-    templateColumns: 'grid-template-columns',
-    'template-rows': 'grid-template-rows',
-    templateRows: 'grid-template-rows',
-    'template-areas': 'grid-template-areas',
-    templateAreas: 'grid-template-areas',
-    template: 'grid-template',
-    'auto-columns': 'grid-auto-columns',
-    autoColumns: 'grid-auto-columns',
-    'auto-rows': 'grid-auto-rows',
-    autoRows: 'grid-auto-rows',
-    'auto-flow': 'grid-auto-flow',
-    autoFlow: 'grid-auto-flow',
-    row: 'grid-row',
-    column: 'grid-column',
-    'row-start': 'grid-row-start',
-    rowStart: 'grid-row-start',
-    'row-end': 'grid-row-end',
-    rowEnd: 'grid-row-end',
-    'column-start': 'grid-column-start',
-    columnStart: 'grid-column-start',
-    'column-end': 'grid-column-end',
-    columnEnd: 'grid-column-end',
-    area: 'grid-area',
-    gap: 'grid-gap',
-    'row-gap': 'grid-row-gap',
-    rowGap: 'grid-row-gap',
-    'column-gap': 'grid-column-gap',
-    columnGap: 'grid-column-gap'
+      rule[valueNs] = null;
+      return null;
+    }
+
+    if (typeof value === 'object') {
+      for (var _key in value) {
+        rule.prop(_key, value[_key]);
+      }
+
+      rule[valueNs] = value;
+    } // Make sure we don't set the value in the core.
+
+
+    return null;
   }
-};
 
-/* eslint-disable no-use-before-define */
+  return {
+    onProcessStyle: onProcessStyle,
+    onChangeValue: onChangeValue
+  };
+}
+
 /**
- * Map values by given prop.
+ * Set selector.
  *
- * @param {Array} array of values
- * @param {String} original property
- * @param {String} original rule
- * @return {String} mapped values
+ * @param original rule
+ * @param className class string
+ * @return flag indicating function was successfull or not
  */
 
-function mapValuesByProp(value, prop, rule) {
-  return value.map(function (item) {
-    return objectToArray(item, prop, rule, false, true);
-  });
-}
-/**
- * Convert array to nested array, if needed
- */
+function registerClass(rule, className) {
+  // Skip falsy values
+  if (!className) return true; // Support array of class names `{composes: ['foo', 'bar']}`
 
+  if (Array.isArray(className)) {
+    for (var index = 0; index < className.length; index++) {
+      var isSetted = registerClass(rule, className[index]);
+      if (!isSetted) return false;
+    }
 
-function processArray(value, prop, scheme, rule) {
-  if (scheme[prop] == null) return value;
-  if (value.length === 0) return [];
-  if (Array.isArray(value[0])) return processArray(value[0], prop, scheme, rule);
+    return true;
+  } // Support space separated class names `{composes: 'foo bar'}`
 
-  if (typeof value[0] === 'object') {
-    return mapValuesByProp(value, prop, rule);
+
+  if (className.indexOf(' ') > -1) {
+    return registerClass(rule, className.split(' '));
   }
 
-  return [value];
-}
-/**
- * Convert object to array.
- */
+  var parent = rule.options.parent; // It is a ref to a local rule.
 
+  if (className[0] === '$') {
+    var refRule = parent.getRule(className.substr(1));
 
-function objectToArray(value, prop, rule, isFallback, isInArray) {
-  if (!(propObj[prop] || customPropObj[prop])) return [];
-  var result = []; // Check if exists any non-standard property
+    if (!refRule) {
+      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Referenced rule is not defined. \n" + rule.toString()) : void 0;
+      return false;
+    }
 
-  if (customPropObj[prop]) {
-    // eslint-disable-next-line no-param-reassign
-    value = customPropsToStyle(value, rule, customPropObj[prop], isFallback);
-  } // Pass throught all standart props
+    if (refRule === rule) {
+      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Cyclic composition detected. \n" + rule.toString()) : void 0;
+      return false;
+    }
 
+    parent.classes[rule.key] += " " + parent.classes[refRule.key];
+    return true;
+  }
 
-  if (Object.keys(value).length) {
-    for (var baseProp in propObj[prop]) {
-      if (value[baseProp]) {
-        if (Array.isArray(value[baseProp])) {
-          result.push(propArrayInObj[baseProp] === null ? value[baseProp] : value[baseProp].join(' '));
-        } else result.push(value[baseProp]);
+  parent.classes[rule.key] += " " + className;
+  return true;
+}
+/**
+ * Convert compose property to additional class, remove property from original styles.
+ */
 
-        continue;
-      } // Add default value from props config.
 
+function jssCompose() {
+  function onProcessStyle(style, rule) {
+    if (!('composes' in style)) return style;
+    registerClass(rule, style.composes); // Remove composes property to prevent infinite loop.
 
-      if (propObj[prop][baseProp] != null) {
-        result.push(propObj[prop][baseProp]);
-      }
-    }
+    delete style.composes;
+    return style;
   }
 
-  if (!result.length || isInArray) return result;
-  return [result];
-}
+  return {
+    onProcessStyle: onProcessStyle
+  };
+}
+
+var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
+var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
+var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
+/**
+ * Generated jss-plugin-default-unit CSS property units
+ */
+
+var defaultUnits = {
+  // Animation properties
+  'animation-delay': ms,
+  'animation-duration': ms,
+  // Background properties
+  'background-position': px,
+  'background-position-x': px,
+  'background-position-y': px,
+  'background-size': px,
+  // Border Properties
+  border: px,
+  'border-bottom': px,
+  'border-bottom-left-radius': px,
+  'border-bottom-right-radius': px,
+  'border-bottom-width': px,
+  'border-left': px,
+  'border-left-width': px,
+  'border-radius': px,
+  'border-right': px,
+  'border-right-width': px,
+  'border-top': px,
+  'border-top-left-radius': px,
+  'border-top-right-radius': px,
+  'border-top-width': px,
+  'border-width': px,
+  'border-block': px,
+  'border-block-end': px,
+  'border-block-end-width': px,
+  'border-block-start': px,
+  'border-block-start-width': px,
+  'border-block-width': px,
+  'border-inline': px,
+  'border-inline-end': px,
+  'border-inline-end-width': px,
+  'border-inline-start': px,
+  'border-inline-start-width': px,
+  'border-inline-width': px,
+  'border-start-start-radius': px,
+  'border-start-end-radius': px,
+  'border-end-start-radius': px,
+  'border-end-end-radius': px,
+  // Margin properties
+  margin: px,
+  'margin-bottom': px,
+  'margin-left': px,
+  'margin-right': px,
+  'margin-top': px,
+  'margin-block': px,
+  'margin-block-end': px,
+  'margin-block-start': px,
+  'margin-inline': px,
+  'margin-inline-end': px,
+  'margin-inline-start': px,
+  // Padding properties
+  padding: px,
+  'padding-bottom': px,
+  'padding-left': px,
+  'padding-right': px,
+  'padding-top': px,
+  'padding-block': px,
+  'padding-block-end': px,
+  'padding-block-start': px,
+  'padding-inline': px,
+  'padding-inline-end': px,
+  'padding-inline-start': px,
+  // Mask properties
+  'mask-position-x': px,
+  'mask-position-y': px,
+  'mask-size': px,
+  // Width and height properties
+  height: px,
+  width: px,
+  'min-height': px,
+  'max-height': px,
+  'min-width': px,
+  'max-width': px,
+  // Position properties
+  bottom: px,
+  left: px,
+  top: px,
+  right: px,
+  inset: px,
+  'inset-block': px,
+  'inset-block-end': px,
+  'inset-block-start': px,
+  'inset-inline': px,
+  'inset-inline-end': px,
+  'inset-inline-start': px,
+  // Shadow properties
+  'box-shadow': px,
+  'text-shadow': px,
+  // Column properties
+  'column-gap': px,
+  'column-rule': px,
+  'column-rule-width': px,
+  'column-width': px,
+  // Font and text properties
+  'font-size': px,
+  'font-size-delta': px,
+  'letter-spacing': px,
+  'text-decoration-thickness': px,
+  'text-indent': px,
+  'text-stroke': px,
+  'text-stroke-width': px,
+  'word-spacing': px,
+  // Motion properties
+  motion: px,
+  'motion-offset': px,
+  // Outline properties
+  outline: px,
+  'outline-offset': px,
+  'outline-width': px,
+  // Perspective properties
+  perspective: px,
+  'perspective-origin-x': percent,
+  'perspective-origin-y': percent,
+  // Transform properties
+  'transform-origin': percent,
+  'transform-origin-x': percent,
+  'transform-origin-y': percent,
+  'transform-origin-z': percent,
+  // Transition properties
+  'transition-delay': ms,
+  'transition-duration': ms,
+  // Alignment properties
+  'vertical-align': px,
+  'flex-basis': px,
+  // Some random properties
+  'shape-margin': px,
+  size: px,
+  gap: px,
+  // Grid properties
+  grid: px,
+  'grid-gap': px,
+  'row-gap': px,
+  'grid-row-gap': px,
+  'grid-column-gap': px,
+  'grid-template-rows': px,
+  'grid-template-columns': px,
+  'grid-auto-rows': px,
+  'grid-auto-columns': px,
+  // Not existing properties.
+  // Used to avoid issues with jss-plugin-expand integration.
+  'box-shadow-x': px,
+  'box-shadow-y': px,
+  'box-shadow-blur': px,
+  'box-shadow-spread': px,
+  'font-line-height': px,
+  'text-shadow-x': px,
+  'text-shadow-y': px,
+  'text-shadow-blur': px
+};
+
 /**
- * Convert custom properties values to styles adding them to rule directly
+ * Clones the object and adds a camel cased property version.
  */
 
+function addCamelCasedVersion(obj) {
+  var regExp = /(-[a-z])/g;
 
-function customPropsToStyle(value, rule, customProps, isFallback) {
-  for (var prop in customProps) {
-    var propName = customProps[prop]; // If current property doesn't exist already in rule - add new one
-
-    if (typeof value[prop] !== 'undefined' && (isFallback || !rule.prop(propName))) {
-      var _styleDetector;
-
-      var appendedValue = styleDetector((_styleDetector = {}, _styleDetector[propName] = value[prop], _styleDetector), rule)[propName]; // Add style directly in rule
-
-      if (isFallback) rule.style.fallbacks[propName] = appendedValue;else rule.style[propName] = appendedValue;
-    } // Delete converted property to avoid double converting
+  var replace = function replace(str) {
+    return str[1].toUpperCase();
+  };
 
+  var newObj = {};
 
-    delete value[prop];
+  for (var key in obj) {
+    newObj[key] = obj[key];
+    newObj[key.replace(regExp, replace)] = obj[key];
   }
 
-  return value;
+  return newObj;
 }
+
+var units = addCamelCasedVersion(defaultUnits);
 /**
- * Detect if a style needs to be converted.
+ * Recursive deep style passing function
  */
 
+function iterate(prop, value, options) {
+  if (value == null) return value;
 
-function styleDetector(style, rule, isFallback) {
-  for (var prop in style) {
-    var value = style[prop];
-
-    if (Array.isArray(value)) {
-      // Check double arrays to avoid recursion.
-      if (!Array.isArray(value[0])) {
-        if (prop === 'fallbacks') {
-          for (var index = 0; index < style.fallbacks.length; index++) {
-            style.fallbacks[index] = styleDetector(style.fallbacks[index], rule, true);
-          }
-
-          continue;
-        }
-
-        style[prop] = processArray(value, prop, propArray, rule); // Avoid creating properties with empty values
-
-        if (!style[prop].length) delete style[prop];
+  if (Array.isArray(value)) {
+    for (var i = 0; i < value.length; i++) {
+      value[i] = iterate(prop, value[i], options);
+    }
+  } else if (typeof value === 'object') {
+    if (prop === 'fallbacks') {
+      for (var innerProp in value) {
+        value[innerProp] = iterate(innerProp, value[innerProp], options);
       }
-    } else if (typeof value === 'object') {
-      if (prop === 'fallbacks') {
-        style.fallbacks = styleDetector(style.fallbacks, rule, true);
-        continue;
+    } else {
+      for (var _innerProp in value) {
+        value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
       }
+    } // eslint-disable-next-line no-restricted-globals
 
-      style[prop] = objectToArray(value, prop, rule, isFallback); // Avoid creating properties with empty values
+  } else if (typeof value === 'number' && isNaN(value) === false) {
+    var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.
 
-      if (!style[prop].length) delete style[prop];
-    } // Maybe a computed value resulting in an empty string
-    else if (style[prop] === '') delete style[prop];
+    if (unit && !(value === 0 && unit === px)) {
+      return typeof unit === 'function' ? unit(value).toString() : "" + value + unit;
+    }
+
+    return value.toString();
   }
 
-  return style;
+  return value;
 }
 /**
- * Adds possibility to write expanded styles.
+ * Add unit to numeric values.
  */
 
 
-function jssExpand() {
-  function onProcessStyle(style, rule) {
-    if (!style || rule.type !== 'style') return style;
-
-    if (Array.isArray(style)) {
-      // Pass rules one by one and reformat them
-      for (var index = 0; index < style.length; index++) {
-        style[index] = styleDetector(style[index], rule);
-      }
-
-      return style;
-    }
-
-    return styleDetector(style, rule);
+function defaultUnit(options) {
+  if (options === void 0) {
+    options = {};
   }
 
-  return {
-    onProcessStyle: onProcessStyle
-  };
-}
-
-var cssVendor_cjs = {};
-
-var require$$0 = /*@__PURE__*/getAugmentedNamespace(module$1);
-
-var toConsumableArray = {exports: {}};
-
-var arrayWithoutHoles = {exports: {}};
-
-var arrayLikeToArray = {exports: {}};
-
-(function (module) {
-	function _arrayLikeToArray(arr, len) {
-	  if (len == null || len > arr.length) len = arr.length;
-
-	  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-	    arr2[i] = arr[i];
-	  }
-
-	  return arr2;
-	}
-
-	module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (arrayLikeToArray));
-
-(function (module) {
-	var arrayLikeToArray$1 = arrayLikeToArray.exports;
-
-	function _arrayWithoutHoles(arr) {
-	  if (Array.isArray(arr)) return arrayLikeToArray$1(arr);
-	}
-
-	module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (arrayWithoutHoles));
-
-var iterableToArray = {exports: {}};
-
-(function (module) {
-	function _iterableToArray(iter) {
-	  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-	}
-
-	module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (iterableToArray));
-
-var unsupportedIterableToArray = {exports: {}};
-
-(function (module) {
-	var arrayLikeToArray$1 = arrayLikeToArray.exports;
-
-	function _unsupportedIterableToArray(o, minLen) {
-	  if (!o) return;
-	  if (typeof o === "string") return arrayLikeToArray$1(o, minLen);
-	  var n = Object.prototype.toString.call(o).slice(8, -1);
-	  if (n === "Object" && o.constructor) n = o.constructor.name;
-	  if (n === "Map" || n === "Set") return Array.from(o);
-	  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray$1(o, minLen);
-	}
-
-	module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (unsupportedIterableToArray));
-
-var nonIterableSpread = {exports: {}};
-
-(function (module) {
-	function _nonIterableSpread() {
-	  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-	}
-
-	module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (nonIterableSpread));
-
-(function (module) {
-	var arrayWithoutHoles$1 = arrayWithoutHoles.exports;
-
-	var iterableToArray$1 = iterableToArray.exports;
-
-	var unsupportedIterableToArray$1 = unsupportedIterableToArray.exports;
-
-	var nonIterableSpread$1 = nonIterableSpread.exports;
-
-	function _toConsumableArray(arr) {
-	  return arrayWithoutHoles$1(arr) || iterableToArray$1(arr) || unsupportedIterableToArray$1(arr) || nonIterableSpread$1();
-	}
-
-	module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-} (toConsumableArray));
-
-Object.defineProperty(cssVendor_cjs, '__esModule', { value: true });
-
-function _interopDefault$1 (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var isInBrowser = _interopDefault$1(require$$0);
-var _toConsumableArray = _interopDefault$1(toConsumableArray.exports);
-
-// Export javascript style and css style vendor prefixes.
-var js = '';
-var css = '';
-var vendor = '';
-var browser = '';
-var isTouch = isInBrowser && 'ontouchstart' in document.documentElement; // We should not do anything if required serverside.
-
-if (isInBrowser) {
-  // Order matters. We need to check Webkit the last one because
-  // other vendors use to add Webkit prefixes to some properties
-  var jsCssMap = {
-    Moz: '-moz-',
-    ms: '-ms-',
-    O: '-o-',
-    Webkit: '-webkit-'
-  };
-
-  var _document$createEleme = document.createElement('p'),
-      style = _document$createEleme.style;
-
-  var testProp = 'Transform';
-
-  for (var key in jsCssMap) {
-    if (key + testProp in style) {
-      js = key;
-      css = jsCssMap[key];
-      break;
-    }
-  } // Correctly detect the Edge browser.
-
-
-  if (js === 'Webkit' && 'msHyphens' in style) {
-    js = 'ms';
-    css = jsCssMap.ms;
-    browser = 'edge';
-  } // Correctly detect the Safari browser.
+  var camelCasedOptions = addCamelCasedVersion(options);
 
+  function onProcessStyle(style, rule) {
+    if (rule.type !== 'style') return style;
 
-  if (js === 'Webkit' && '-apple-trailing-word' in style) {
-    vendor = 'apple';
-  }
-}
-/**
- * Vendor prefix string for the current browser.
- *
- * @type {{js: String, css: String, vendor: String, browser: String}}
- * @api public
- */
+    for (var prop in style) {
+      style[prop] = iterate(prop, style[prop], camelCasedOptions);
+    }
 
+    return style;
+  }
 
-var prefix = {
-  js: js,
-  css: css,
-  vendor: vendor,
-  browser: browser,
-  isTouch: isTouch
-};
+  function onChangeValue(value, prop) {
+    return iterate(prop, value, camelCasedOptions);
+  }
+
+  return {
+    onProcessStyle: onProcessStyle,
+    onChangeValue: onChangeValue
+  };
+}
 
 /**
- * Test if a keyframe at-rule should be prefixed or not
- *
- * @param {String} vendor prefix string for the current browser.
- * @return {String}
- * @api public
+ * A scheme for converting properties from array to regular style.
+ * All properties listed below will be transformed to a string separated by space.
  */
+var propArray = {
+  'background-size': true,
+  'background-position': true,
+  border: true,
+  'border-bottom': true,
+  'border-left': true,
+  'border-top': true,
+  'border-right': true,
+  'border-radius': true,
+  'border-image': true,
+  'border-width': true,
+  'border-style': true,
+  'border-color': true,
+  'box-shadow': true,
+  flex: true,
+  margin: true,
+  padding: true,
+  outline: true,
+  'transform-origin': true,
+  transform: true,
+  transition: true
+  /**
+   * A scheme for converting arrays to regular styles inside of objects.
+   * For e.g.: "{position: [0, 0]}" => "background-position: 0 0;".
+   */
 
-function supportedKeyframes(key) {
-  // Keyframes is already prefixed. e.g. key = '@-webkit-keyframes a'
-  if (key[1] === '-') return key; // No need to prefix IE/Edge. Older browsers will ignore unsupported rules.
-  // https://caniuse.com/#search=keyframes
-
-  if (prefix.js === 'ms') return key;
-  return "@" + prefix.css + "keyframes" + key.substr(10);
-}
+};
+var propArrayInObj = {
+  position: true,
+  // background-position
+  size: true // background-size
 
-// https://caniuse.com/#search=appearance
+  /**
+   * A scheme for parsing and building correct styles from passed objects.
+   */
 
-var appearence = {
-  noPrefill: ['appearance'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'appearance') return false;
-    if (prefix.js === 'ms') return "-webkit-" + prop;
-    return prefix.css + prop;
-  }
 };
+var propObj = {
+  padding: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  margin: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  background: {
+    attachment: null,
+    color: null,
+    image: null,
+    position: null,
+    repeat: null
+  },
+  border: {
+    width: null,
+    style: null,
+    color: null
+  },
+  'border-top': {
+    width: null,
+    style: null,
+    color: null
+  },
+  'border-right': {
+    width: null,
+    style: null,
+    color: null
+  },
+  'border-bottom': {
+    width: null,
+    style: null,
+    color: null
+  },
+  'border-left': {
+    width: null,
+    style: null,
+    color: null
+  },
+  outline: {
+    width: null,
+    style: null,
+    color: null
+  },
+  'list-style': {
+    type: null,
+    position: null,
+    image: null
+  },
+  transition: {
+    property: null,
+    duration: null,
+    'timing-function': null,
+    timingFunction: null,
+    // Needed for avoiding comilation issues with jss-plugin-camel-case
+    delay: null
+  },
+  animation: {
+    name: null,
+    duration: null,
+    'timing-function': null,
+    timingFunction: null,
+    // Needed to avoid compilation issues with jss-plugin-camel-case
+    delay: null,
+    'iteration-count': null,
+    iterationCount: null,
+    // Needed to avoid compilation issues with jss-plugin-camel-case
+    direction: null,
+    'fill-mode': null,
+    fillMode: null,
+    // Needed to avoid compilation issues with jss-plugin-camel-case
+    'play-state': null,
+    playState: null // Needed to avoid compilation issues with jss-plugin-camel-case
 
-// https://caniuse.com/#search=color-adjust
+  },
+  'box-shadow': {
+    x: 0,
+    y: 0,
+    blur: 0,
+    spread: 0,
+    color: null,
+    inset: null
+  },
+  'text-shadow': {
+    x: 0,
+    y: 0,
+    blur: null,
+    color: null
+  }
+  /**
+   * A scheme for converting non-standart properties inside object.
+   * For e.g.: include 'border-radius' property inside 'border' object.
+   */
 
-var colorAdjust = {
-  noPrefill: ['color-adjust'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'color-adjust') return false;
-    if (prefix.js === 'Webkit') return prefix.css + "print-" + prop;
-    return prop;
+};
+var customPropObj = {
+  border: {
+    radius: 'border-radius',
+    image: 'border-image',
+    width: 'border-width',
+    style: 'border-style',
+    color: 'border-color'
+  },
+  'border-bottom': {
+    width: 'border-bottom-width',
+    style: 'border-bottom-style',
+    color: 'border-bottom-color'
+  },
+  'border-top': {
+    width: 'border-top-width',
+    style: 'border-top-style',
+    color: 'border-top-color'
+  },
+  'border-left': {
+    width: 'border-left-width',
+    style: 'border-left-style',
+    color: 'border-left-color'
+  },
+  'border-right': {
+    width: 'border-right-width',
+    style: 'border-right-style',
+    color: 'border-right-color'
+  },
+  background: {
+    size: 'background-size',
+    image: 'background-image'
+  },
+  font: {
+    style: 'font-style',
+    variant: 'font-variant',
+    weight: 'font-weight',
+    stretch: 'font-stretch',
+    size: 'font-size',
+    family: 'font-family',
+    lineHeight: 'line-height',
+    // Needed to avoid compilation issues with jss-plugin-camel-case
+    'line-height': 'line-height'
+  },
+  flex: {
+    grow: 'flex-grow',
+    basis: 'flex-basis',
+    direction: 'flex-direction',
+    wrap: 'flex-wrap',
+    flow: 'flex-flow',
+    shrink: 'flex-shrink'
+  },
+  align: {
+    self: 'align-self',
+    items: 'align-items',
+    content: 'align-content'
+  },
+  grid: {
+    'template-columns': 'grid-template-columns',
+    templateColumns: 'grid-template-columns',
+    'template-rows': 'grid-template-rows',
+    templateRows: 'grid-template-rows',
+    'template-areas': 'grid-template-areas',
+    templateAreas: 'grid-template-areas',
+    template: 'grid-template',
+    'auto-columns': 'grid-auto-columns',
+    autoColumns: 'grid-auto-columns',
+    'auto-rows': 'grid-auto-rows',
+    autoRows: 'grid-auto-rows',
+    'auto-flow': 'grid-auto-flow',
+    autoFlow: 'grid-auto-flow',
+    row: 'grid-row',
+    column: 'grid-column',
+    'row-start': 'grid-row-start',
+    rowStart: 'grid-row-start',
+    'row-end': 'grid-row-end',
+    rowEnd: 'grid-row-end',
+    'column-start': 'grid-column-start',
+    columnStart: 'grid-column-start',
+    'column-end': 'grid-column-end',
+    columnEnd: 'grid-column-end',
+    area: 'grid-area',
+    gap: 'grid-gap',
+    'row-gap': 'grid-row-gap',
+    rowGap: 'grid-row-gap',
+    'column-gap': 'grid-column-gap',
+    columnGap: 'grid-column-gap'
   }
 };
 
-var regExp = /[-\s]+(.)?/g;
+/* eslint-disable no-use-before-define */
 /**
- * Replaces the letter with the capital letter
+ * Map values by given prop.
  *
- * @param {String} match
- * @param {String} c
- * @return {String}
- * @api private
+ * @param {Array} array of values
+ * @param {String} original property
+ * @param {String} original rule
+ * @return {String} mapped values
  */
 
-function toUpper(match, c) {
-  return c ? c.toUpperCase() : '';
+function mapValuesByProp(value, prop, rule) {
+  return value.map(function (item) {
+    return objectToArray(item, prop, rule, false, true);
+  });
 }
 /**
- * Convert dash separated strings to camel-cased.
- *
- * @param {String} str
- * @return {String}
- * @api private
+ * Convert array to nested array, if needed
  */
 
 
-function camelize(str) {
-  return str.replace(regExp, toUpper);
-}
+function processArray(value, prop, scheme, rule) {
+  if (scheme[prop] == null) return value;
+  if (value.length === 0) return [];
+  if (Array.isArray(value[0])) return processArray(value[0], prop, scheme, rule);
+
+  if (typeof value[0] === 'object') {
+    return mapValuesByProp(value, prop, rule);
+  }
 
+  return [value];
+}
 /**
- * Convert dash separated strings to pascal cased.
- *
- * @param {String} str
- * @return {String}
- * @api private
+ * Convert object to array.
  */
 
-function pascalize(str) {
-  return camelize("-" + str);
-}
 
-// but we can use a longhand property instead.
-// https://caniuse.com/#search=mask
+function objectToArray(value, prop, rule, isFallback, isInArray) {
+  if (!(propObj[prop] || customPropObj[prop])) return [];
+  var result = []; // Check if exists any non-standard property
 
-var mask = {
-  noPrefill: ['mask'],
-  supportedProperty: function supportedProperty(prop, style) {
-    if (!/^mask/.test(prop)) return false;
+  if (customPropObj[prop]) {
+    // eslint-disable-next-line no-param-reassign
+    value = customPropsToStyle(value, rule, customPropObj[prop], isFallback);
+  } // Pass throught all standart props
 
-    if (prefix.js === 'Webkit') {
-      var longhand = 'mask-image';
 
-      if (camelize(longhand) in style) {
-        return prop;
-      }
+  if (Object.keys(value).length) {
+    for (var baseProp in propObj[prop]) {
+      if (value[baseProp]) {
+        if (Array.isArray(value[baseProp])) {
+          result.push(propArrayInObj[baseProp] === null ? value[baseProp] : value[baseProp].join(' '));
+        } else result.push(value[baseProp]);
 
-      if (prefix.js + pascalize(longhand) in style) {
-        return prefix.css + prop;
+        continue;
+      } // Add default value from props config.
+
+
+      if (propObj[prop][baseProp] != null) {
+        result.push(propObj[prop][baseProp]);
       }
     }
-
-    return prop;
   }
-};
 
-// https://caniuse.com/#search=text-orientation
+  if (!result.length || isInArray) return result;
+  return [result];
+}
+/**
+ * Convert custom properties values to styles adding them to rule directly
+ */
 
-var textOrientation = {
-  noPrefill: ['text-orientation'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'text-orientation') return false;
 
-    if (prefix.vendor === 'apple' && !prefix.isTouch) {
-      return prefix.css + prop;
-    }
+function customPropsToStyle(value, rule, customProps, isFallback) {
+  for (var prop in customProps) {
+    var propName = customProps[prop]; // If current property doesn't exist already in rule - add new one
 
-    return prop;
-  }
-};
+    if (typeof value[prop] !== 'undefined' && (isFallback || !rule.prop(propName))) {
+      var _styleDetector;
 
-// https://caniuse.com/#search=transform
+      var appendedValue = styleDetector((_styleDetector = {}, _styleDetector[propName] = value[prop], _styleDetector), rule)[propName]; // Add style directly in rule
 
-var transform = {
-  noPrefill: ['transform'],
-  supportedProperty: function supportedProperty(prop, style, options) {
-    if (prop !== 'transform') return false;
+      if (isFallback) rule.style.fallbacks[propName] = appendedValue;else rule.style[propName] = appendedValue;
+    } // Delete converted property to avoid double converting
 
-    if (options.transform) {
-      return prop;
-    }
 
-    return prefix.css + prop;
+    delete value[prop];
   }
-};
 
-// https://caniuse.com/#search=transition
+  return value;
+}
+/**
+ * Detect if a style needs to be converted.
+ */
 
-var transition = {
-  noPrefill: ['transition'],
-  supportedProperty: function supportedProperty(prop, style, options) {
-    if (prop !== 'transition') return false;
 
-    if (options.transition) {
-      return prop;
-    }
+function styleDetector(style, rule, isFallback) {
+  for (var prop in style) {
+    var value = style[prop];
 
-    return prefix.css + prop;
-  }
-};
+    if (Array.isArray(value)) {
+      // Check double arrays to avoid recursion.
+      if (!Array.isArray(value[0])) {
+        if (prop === 'fallbacks') {
+          for (var index = 0; index < style.fallbacks.length; index++) {
+            style.fallbacks[index] = styleDetector(style.fallbacks[index], rule, true);
+          }
 
-// https://caniuse.com/#search=writing-mode
+          continue;
+        }
 
-var writingMode = {
-  noPrefill: ['writing-mode'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'writing-mode') return false;
+        style[prop] = processArray(value, prop, propArray, rule); // Avoid creating properties with empty values
 
-    if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {
-      return prefix.css + prop;
-    }
+        if (!style[prop].length) delete style[prop];
+      }
+    } else if (typeof value === 'object') {
+      if (prop === 'fallbacks') {
+        style.fallbacks = styleDetector(style.fallbacks, rule, true);
+        continue;
+      }
 
-    return prop;
+      style[prop] = objectToArray(value, prop, rule, isFallback); // Avoid creating properties with empty values
+
+      if (!style[prop].length) delete style[prop];
+    } // Maybe a computed value resulting in an empty string
+    else if (style[prop] === '') delete style[prop];
   }
-};
 
-// https://caniuse.com/#search=user-select
+  return style;
+}
+/**
+ * Adds possibility to write expanded styles.
+ */
 
-var userSelect = {
-  noPrefill: ['user-select'],
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'user-select') return false;
 
-    if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {
-      return prefix.css + prop;
+function jssExpand() {
+  function onProcessStyle(style, rule) {
+    if (!style || rule.type !== 'style') return style;
+
+    if (Array.isArray(style)) {
+      // Pass rules one by one and reformat them
+      for (var index = 0; index < style.length; index++) {
+        style[index] = styleDetector(style[index], rule);
+      }
+
+      return style;
     }
 
-    return prop;
+    return styleDetector(style, rule);
   }
-};
-
-// https://caniuse.com/#search=multicolumn
-// https://github.com/postcss/autoprefixer/issues/491
-// https://github.com/postcss/autoprefixer/issues/177
 
-var breakPropsOld = {
-  supportedProperty: function supportedProperty(prop, style) {
-    if (!/^break-/.test(prop)) return false;
+  return {
+    onProcessStyle: onProcessStyle
+  };
+}
 
-    if (prefix.js === 'Webkit') {
-      var jsProp = "WebkitColumn" + pascalize(prop);
-      return jsProp in style ? prefix.css + "column-" + prop : false;
-    }
+var cssVendor_cjs = {};
 
-    if (prefix.js === 'Moz') {
-      var _jsProp = "page" + pascalize(prop);
+var require$$0 = /*@__PURE__*/getAugmentedNamespace(module$1);
 
-      return _jsProp in style ? "page-" + prop : false;
-    }
+var toConsumableArray = {exports: {}};
 
-    return false;
-  }
-};
+var arrayWithoutHoles = {exports: {}};
 
-// See https://github.com/postcss/autoprefixer/issues/324.
+var arrayLikeToArray = {exports: {}};
 
-var inlineLogicalOld = {
-  supportedProperty: function supportedProperty(prop, style) {
-    if (!/^(border|margin|padding)-inline/.test(prop)) return false;
-    if (prefix.js === 'Moz') return prop;
-    var newProp = prop.replace('-inline', '');
-    return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
-  }
-};
+(function (module) {
+	function _arrayLikeToArray(arr, len) {
+	  if (len == null || len > arr.length) len = arr.length;
+	  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+	    arr2[i] = arr[i];
+	  }
+	  return arr2;
+	}
+	module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+} (arrayLikeToArray));
 
-// Camelization is required because we can't test using.
-// CSS syntax for e.g. in FF.
+(function (module) {
+	var arrayLikeToArray$1 = arrayLikeToArray.exports;
+	function _arrayWithoutHoles(arr) {
+	  if (Array.isArray(arr)) return arrayLikeToArray$1(arr);
+	}
+	module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
+} (arrayWithoutHoles));
 
-var unprefixed = {
-  supportedProperty: function supportedProperty(prop, style) {
-    return camelize(prop) in style ? prop : false;
-  }
-};
+var iterableToArray = {exports: {}};
 
-var prefixed = {
-  supportedProperty: function supportedProperty(prop, style) {
-    var pascalized = pascalize(prop); // Return custom CSS variable without prefixing.
+(function (module) {
+	function _iterableToArray(iter) {
+	  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+	}
+	module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+} (iterableToArray));
 
-    if (prop[0] === '-') return prop; // Return already prefixed value without prefixing.
+var unsupportedIterableToArray = {exports: {}};
 
-    if (prop[0] === '-' && prop[1] === '-') return prop;
-    if (prefix.js + pascalized in style) return prefix.css + prop; // Try webkit fallback.
+(function (module) {
+	var arrayLikeToArray$1 = arrayLikeToArray.exports;
+	function _unsupportedIterableToArray(o, minLen) {
+	  if (!o) return;
+	  if (typeof o === "string") return arrayLikeToArray$1(o, minLen);
+	  var n = Object.prototype.toString.call(o).slice(8, -1);
+	  if (n === "Object" && o.constructor) n = o.constructor.name;
+	  if (n === "Map" || n === "Set") return Array.from(o);
+	  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray$1(o, minLen);
+	}
+	module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+} (unsupportedIterableToArray));
 
-    if (prefix.js !== 'Webkit' && "Webkit" + pascalized in style) return "-webkit-" + prop;
-    return false;
-  }
-};
+var nonIterableSpread = {exports: {}};
 
-// https://caniuse.com/#search=scroll-snap
+(function (module) {
+	function _nonIterableSpread() {
+	  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+	}
+	module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
+} (nonIterableSpread));
 
-var scrollSnap = {
-  supportedProperty: function supportedProperty(prop) {
-    if (prop.substring(0, 11) !== 'scroll-snap') return false;
+(function (module) {
+	var arrayWithoutHoles$1 = arrayWithoutHoles.exports;
+	var iterableToArray$1 = iterableToArray.exports;
+	var unsupportedIterableToArray$1 = unsupportedIterableToArray.exports;
+	var nonIterableSpread$1 = nonIterableSpread.exports;
+	function _toConsumableArray(arr) {
+	  return arrayWithoutHoles$1(arr) || iterableToArray$1(arr) || unsupportedIterableToArray$1(arr) || nonIterableSpread$1();
+	}
+	module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+} (toConsumableArray));
 
-    if (prefix.js === 'ms') {
-      return "" + prefix.css + prop;
-    }
+Object.defineProperty(cssVendor_cjs, '__esModule', { value: true });
 
-    return prop;
-  }
-};
+function _interopDefault$1 (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-// https://caniuse.com/#search=overscroll-behavior
+var isInBrowser = _interopDefault$1(require$$0);
+var _toConsumableArray = _interopDefault$1(toConsumableArray.exports);
 
-var overscrollBehavior = {
-  supportedProperty: function supportedProperty(prop) {
-    if (prop !== 'overscroll-behavior') return false;
+// Export javascript style and css style vendor prefixes.
+var js = '';
+var css = '';
+var vendor = '';
+var browser = '';
+var isTouch = isInBrowser && 'ontouchstart' in document.documentElement; // We should not do anything if required serverside.
 
-    if (prefix.js === 'ms') {
-      return prefix.css + "scroll-chaining";
-    }
+if (isInBrowser) {
+  // Order matters. We need to check Webkit the last one because
+  // other vendors use to add Webkit prefixes to some properties
+  var jsCssMap = {
+    Moz: '-moz-',
+    ms: '-ms-',
+    O: '-o-',
+    Webkit: '-webkit-'
+  };
 
-    return prop;
-  }
-};
+  var _document$createEleme = document.createElement('p'),
+      style = _document$createEleme.style;
 
-var propMap = {
-  'flex-grow': 'flex-positive',
-  'flex-shrink': 'flex-negative',
-  'flex-basis': 'flex-preferred-size',
-  'justify-content': 'flex-pack',
-  order: 'flex-order',
-  'align-items': 'flex-align',
-  'align-content': 'flex-line-pack' // 'align-self' is handled by 'align-self' plugin.
+  var testProp = 'Transform';
 
-}; // Support old flex spec from 2012.
+  for (var key in jsCssMap) {
+    if (key + testProp in style) {
+      js = key;
+      css = jsCssMap[key];
+      break;
+    }
+  } // Correctly detect the Edge browser.
 
-var flex2012 = {
-  supportedProperty: function supportedProperty(prop, style) {
-    var newProp = propMap[prop];
-    if (!newProp) return false;
-    return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
-  }
-};
 
-var propMap$1 = {
-  flex: 'box-flex',
-  'flex-grow': 'box-flex',
-  'flex-direction': ['box-orient', 'box-direction'],
-  order: 'box-ordinal-group',
-  'align-items': 'box-align',
-  'flex-flow': ['box-orient', 'box-direction'],
-  'justify-content': 'box-pack'
-};
-var propKeys = Object.keys(propMap$1);
+  if (js === 'Webkit' && 'msHyphens' in style) {
+    js = 'ms';
+    css = jsCssMap.ms;
+    browser = 'edge';
+  } // Correctly detect the Safari browser.
 
-var prefixCss = function prefixCss(p) {
-  return prefix.css + p;
-}; // Support old flex spec from 2009.
 
+  if (js === 'Webkit' && '-apple-trailing-word' in style) {
+    vendor = 'apple';
+  }
+}
+/**
+ * Vendor prefix string for the current browser.
+ *
+ * @type {{js: String, css: String, vendor: String, browser: String}}
+ * @api public
+ */
 
-var flex2009 = {
-  supportedProperty: function supportedProperty(prop, style, _ref) {
-    var multiple = _ref.multiple;
 
-    if (propKeys.indexOf(prop) > -1) {
-      var newProp = propMap$1[prop];
+var prefix = {
+  js: js,
+  css: css,
+  vendor: vendor,
+  browser: browser,
+  isTouch: isTouch
+};
 
-      if (!Array.isArray(newProp)) {
-        return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
-      }
+/**
+ * Test if a keyframe at-rule should be prefixed or not
+ *
+ * @param {String} vendor prefix string for the current browser.
+ * @return {String}
+ * @api public
+ */
 
-      if (!multiple) return false;
+function supportedKeyframes(key) {
+  // Keyframes is already prefixed. e.g. key = '@-webkit-keyframes a'
+  if (key[1] === '-') return key; // No need to prefix IE/Edge. Older browsers will ignore unsupported rules.
+  // https://caniuse.com/#search=keyframes
 
-      for (var i = 0; i < newProp.length; i++) {
-        if (!(prefix.js + pascalize(newProp[0]) in style)) {
-          return false;
-        }
-      }
+  if (prefix.js === 'ms') return key;
+  return "@" + prefix.css + "keyframes" + key.substr(10);
+}
 
-      return newProp.map(prefixCss);
-    }
+// https://caniuse.com/#search=appearance
 
-    return false;
+var appearence = {
+  noPrefill: ['appearance'],
+  supportedProperty: function supportedProperty(prop) {
+    if (prop !== 'appearance') return false;
+    if (prefix.js === 'ms') return "-webkit-" + prop;
+    return prefix.css + prop;
   }
 };
 
-// plugins = [
-//   ...plugins,
-//    breakPropsOld,
-//    inlineLogicalOld,
-//    unprefixed,
-//    prefixed,
-//    scrollSnap,
-//    flex2012,
-//    flex2009
-// ]
-// Plugins without 'noPrefill' value, going last.
-// 'flex-*' plugins should be at the bottom.
-// 'flex2009' going after 'flex2012'.
-// 'prefixed' going after 'unprefixed'
-
-var plugins = [appearence, colorAdjust, mask, textOrientation, transform, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];
-var propertyDetectors = plugins.filter(function (p) {
-  return p.supportedProperty;
-}).map(function (p) {
-  return p.supportedProperty;
-});
-var noPrefill = plugins.filter(function (p) {
-  return p.noPrefill;
-}).reduce(function (a, p) {
-  a.push.apply(a, _toConsumableArray(p.noPrefill));
-  return a;
-}, []);
-
-var el;
-var cache = {};
-
-if (isInBrowser) {
-  el = document.createElement('p'); // We test every property on vendor prefix requirement.
-  // Once tested, result is cached. It gives us up to 70% perf boost.
-  // http://jsperf.com/element-style-object-access-vs-plain-object
-  //
-  // Prefill cache with known css properties to reduce amount of
-  // properties we need to feature test at runtime.
-  // http://davidwalsh.name/vendor-prefix
+// https://caniuse.com/#search=color-adjust
 
-  var computed = window.getComputedStyle(document.documentElement, '');
+var colorAdjust = {
+  noPrefill: ['color-adjust'],
+  supportedProperty: function supportedProperty(prop) {
+    if (prop !== 'color-adjust') return false;
+    if (prefix.js === 'Webkit') return prefix.css + "print-" + prop;
+    return prop;
+  }
+};
 
-  for (var key$1 in computed) {
-    // eslint-disable-next-line no-restricted-globals
-    if (!isNaN(key$1)) cache[computed[key$1]] = computed[key$1];
-  } // Properties that cannot be correctly detected using the
-  // cache prefill method.
+var regExp = /[-\s]+(.)?/g;
+/**
+ * Replaces the letter with the capital letter
+ *
+ * @param {String} match
+ * @param {String} c
+ * @return {String}
+ * @api private
+ */
 
+function toUpper(match, c) {
+  return c ? c.toUpperCase() : '';
+}
+/**
+ * Convert dash separated strings to camel-cased.
+ *
+ * @param {String} str
+ * @return {String}
+ * @api private
+ */
 
-  noPrefill.forEach(function (x) {
-    return delete cache[x];
-  });
+
+function camelize(str) {
+  return str.replace(regExp, toUpper);
 }
+
 /**
- * Test if a property is supported, returns supported property with vendor
- * prefix if required. Returns `false` if not supported.
+ * Convert dash separated strings to pascal cased.
  *
- * @param {String} prop dash separated
- * @param {Object} [options]
- * @return {String|Boolean}
- * @api public
+ * @param {String} str
+ * @return {String}
+ * @api private
  */
 
+function pascalize(str) {
+  return camelize("-" + str);
+}
+
+// but we can use a longhand property instead.
+// https://caniuse.com/#search=mask
 
-function supportedProperty(prop, options) {
-  if (options === void 0) {
-    options = {};
+var mask = {
+  noPrefill: ['mask'],
+  supportedProperty: function supportedProperty(prop, style) {
+    if (!/^mask/.test(prop)) return false;
+
+    if (prefix.js === 'Webkit') {
+      var longhand = 'mask-image';
+
+      if (camelize(longhand) in style) {
+        return prop;
+      }
+
+      if (prefix.js + pascalize(longhand) in style) {
+        return prefix.css + prop;
+      }
+    }
+
+    return prop;
   }
+};
 
-  // For server-side rendering.
-  if (!el) return prop; // Remove cache for benchmark tests or return property from the cache.
+// https://caniuse.com/#search=text-orientation
 
-  if (process.env.NODE_ENV !== 'benchmark' && cache[prop] != null) {
-    return cache[prop];
-  } // Check if 'transition' or 'transform' natively supported in browser.
+var textOrientation = {
+  noPrefill: ['text-orientation'],
+  supportedProperty: function supportedProperty(prop) {
+    if (prop !== 'text-orientation') return false;
 
+    if (prefix.vendor === 'apple' && !prefix.isTouch) {
+      return prefix.css + prop;
+    }
 
-  if (prop === 'transition' || prop === 'transform') {
-    options[prop] = prop in el.style;
-  } // Find a plugin for current prefix property.
+    return prop;
+  }
+};
 
+// https://caniuse.com/#search=transform
 
-  for (var i = 0; i < propertyDetectors.length; i++) {
-    cache[prop] = propertyDetectors[i](prop, el.style, options); // Break loop, if value found.
+var transform = {
+  noPrefill: ['transform'],
+  supportedProperty: function supportedProperty(prop, style, options) {
+    if (prop !== 'transform') return false;
 
-    if (cache[prop]) break;
-  } // Reset styles for current property.
-  // Firefox can even throw an error for invalid properties, e.g., "0".
+    if (options.transform) {
+      return prop;
+    }
 
+    return prefix.css + prop;
+  }
+};
 
-  try {
-    el.style[prop] = '';
-  } catch (err) {
-    return false;
+// https://caniuse.com/#search=transition
+
+var transition = {
+  noPrefill: ['transition'],
+  supportedProperty: function supportedProperty(prop, style, options) {
+    if (prop !== 'transition') return false;
+
+    if (options.transition) {
+      return prop;
+    }
+
+    return prefix.css + prop;
   }
+};
 
-  return cache[prop];
-}
+// https://caniuse.com/#search=writing-mode
 
-var cache$1 = {};
-var transitionProperties = {
-  transition: 1,
-  'transition-property': 1,
-  '-webkit-transition': 1,
-  '-webkit-transition-property': 1
+var writingMode = {
+  noPrefill: ['writing-mode'],
+  supportedProperty: function supportedProperty(prop) {
+    if (prop !== 'writing-mode') return false;
+
+    if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {
+      return prefix.css + prop;
+    }
+
+    return prop;
+  }
 };
-var transPropsRegExp = /(^\s*[\w-]+)|, (\s*[\w-]+)(?![^()]*\))/g;
-var el$1;
-/**
- * Returns prefixed value transition/transform if needed.
- *
- * @param {String} match
- * @param {String} p1
- * @param {String} p2
- * @return {String}
- * @api private
- */
 
-function prefixTransitionCallback(match, p1, p2) {
-  if (p1 === 'var') return 'var';
-  if (p1 === 'all') return 'all';
-  if (p2 === 'all') return ', all';
-  var prefixedValue = p1 ? supportedProperty(p1) : ", " + supportedProperty(p2);
-  if (!prefixedValue) return p1 || p2;
-  return prefixedValue;
-}
+// https://caniuse.com/#search=user-select
 
-if (isInBrowser) el$1 = document.createElement('p');
-/**
- * Returns prefixed value if needed. Returns `false` if value is not supported.
- *
- * @param {String} property
- * @param {String} value
- * @return {String|Boolean}
- * @api public
- */
+var userSelect = {
+  noPrefill: ['user-select'],
+  supportedProperty: function supportedProperty(prop) {
+    if (prop !== 'user-select') return false;
 
-function supportedValue(property, value) {
-  // For server-side rendering.
-  var prefixedValue = value;
-  if (!el$1 || property === 'content') return value; // It is a string or a number as a string like '1'.
-  // We want only prefixable values here.
-  // eslint-disable-next-line no-restricted-globals
+    if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {
+      return prefix.css + prop;
+    }
 
-  if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {
-    return prefixedValue;
-  } // Create cache key for current value.
+    return prop;
+  }
+};
 
+// https://caniuse.com/#search=multicolumn
+// https://github.com/postcss/autoprefixer/issues/491
+// https://github.com/postcss/autoprefixer/issues/177
 
-  var cacheKey = property + prefixedValue; // Remove cache for benchmark tests or return value from cache.
+var breakPropsOld = {
+  supportedProperty: function supportedProperty(prop, style) {
+    if (!/^break-/.test(prop)) return false;
 
-  if (process.env.NODE_ENV !== 'benchmark' && cache$1[cacheKey] != null) {
-    return cache$1[cacheKey];
-  } // IE can even throw an error in some cases, for e.g. style.content = 'bar'.
+    if (prefix.js === 'Webkit') {
+      var jsProp = "WebkitColumn" + pascalize(prop);
+      return jsProp in style ? prefix.css + "column-" + prop : false;
+    }
 
+    if (prefix.js === 'Moz') {
+      var _jsProp = "page" + pascalize(prop);
+
+      return _jsProp in style ? "page-" + prop : false;
+    }
 
-  try {
-    // Test value as it is.
-    el$1.style[property] = prefixedValue;
-  } catch (err) {
-    // Return false if value not supported.
-    cache$1[cacheKey] = false;
     return false;
-  } // If 'transition' or 'transition-property' property.
+  }
+};
 
+// See https://github.com/postcss/autoprefixer/issues/324.
 
-  if (transitionProperties[property]) {
-    prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);
-  } else if (el$1.style[property] === '') {
-    // Value with a vendor prefix.
-    prefixedValue = prefix.css + prefixedValue; // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.
+var inlineLogicalOld = {
+  supportedProperty: function supportedProperty(prop, style) {
+    if (!/^(border|margin|padding)-inline/.test(prop)) return false;
+    if (prefix.js === 'Moz') return prop;
+    var newProp = prop.replace('-inline', '');
+    return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
+  }
+};
 
-    if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox'; // Test prefixed value.
+// Camelization is required because we can't test using.
+// CSS syntax for e.g. in FF.
 
-    el$1.style[property] = prefixedValue; // Return false if value not supported.
+var unprefixed = {
+  supportedProperty: function supportedProperty(prop, style) {
+    return camelize(prop) in style ? prop : false;
+  }
+};
 
-    if (el$1.style[property] === '') {
-      cache$1[cacheKey] = false;
-      return false;
-    }
-  } // Reset styles for current property.
+var prefixed = {
+  supportedProperty: function supportedProperty(prop, style) {
+    var pascalized = pascalize(prop); // Return custom CSS variable without prefixing.
 
+    if (prop[0] === '-') return prop; // Return already prefixed value without prefixing.
 
-  el$1.style[property] = ''; // Write current value to cache.
+    if (prop[0] === '-' && prop[1] === '-') return prop;
+    if (prefix.js + pascalized in style) return prefix.css + prop; // Try webkit fallback.
 
-  cache$1[cacheKey] = prefixedValue;
-  return cache$1[cacheKey];
-}
+    if (prefix.js !== 'Webkit' && "Webkit" + pascalized in style) return "-webkit-" + prop;
+    return false;
+  }
+};
 
-cssVendor_cjs.prefix = prefix;
-var supportedKeyframes_1 = cssVendor_cjs.supportedKeyframes = supportedKeyframes;
-var supportedProperty_1 = cssVendor_cjs.supportedProperty = supportedProperty;
-var supportedValue_1 = cssVendor_cjs.supportedValue = supportedValue;
+// https://caniuse.com/#search=scroll-snap
 
-/**
- * Add vendor prefix to a property name when needed.
- */
+var scrollSnap = {
+  supportedProperty: function supportedProperty(prop) {
+    if (prop.substring(0, 11) !== 'scroll-snap') return false;
 
-function jssVendorPrefixer() {
-  function onProcessRule(rule) {
-    if (rule.type === 'keyframes') {
-      var atRule = rule;
-      atRule.at = supportedKeyframes_1(atRule.at);
+    if (prefix.js === 'ms') {
+      return "" + prefix.css + prop;
     }
-  }
 
-  function prefixStyle(style) {
-    for (var prop in style) {
-      var value = style[prop];
+    return prop;
+  }
+};
 
-      if (prop === 'fallbacks' && Array.isArray(value)) {
-        style[prop] = value.map(prefixStyle);
-        continue;
-      }
+// https://caniuse.com/#search=overscroll-behavior
 
-      var changeProp = false;
-      var supportedProp = supportedProperty_1(prop);
-      if (supportedProp && supportedProp !== prop) changeProp = true;
-      var changeValue = false;
-      var supportedValue$1 = supportedValue_1(supportedProp, toCssValue(value));
-      if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;
+var overscrollBehavior = {
+  supportedProperty: function supportedProperty(prop) {
+    if (prop !== 'overscroll-behavior') return false;
 
-      if (changeProp || changeValue) {
-        if (changeProp) delete style[prop];
-        style[supportedProp || prop] = supportedValue$1 || value;
-      }
+    if (prefix.js === 'ms') {
+      return prefix.css + "scroll-chaining";
     }
 
-    return style;
+    return prop;
   }
+};
 
-  function onProcessStyle(style, rule) {
-    if (rule.type !== 'style') return style;
-    return prefixStyle(style);
-  }
+var propMap = {
+  'flex-grow': 'flex-positive',
+  'flex-shrink': 'flex-negative',
+  'flex-basis': 'flex-preferred-size',
+  'justify-content': 'flex-pack',
+  order: 'flex-order',
+  'align-items': 'flex-align',
+  'align-content': 'flex-line-pack' // 'align-self' is handled by 'align-self' plugin.
 
-  function onChangeValue(value, prop) {
-    return supportedValue_1(prop, toCssValue(value)) || value;
+}; // Support old flex spec from 2012.
+
+var flex2012 = {
+  supportedProperty: function supportedProperty(prop, style) {
+    var newProp = propMap[prop];
+    if (!newProp) return false;
+    return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
   }
+};
 
-  return {
-    onProcessRule: onProcessRule,
-    onProcessStyle: onProcessStyle,
-    onChangeValue: onChangeValue
-  };
-}
+var propMap$1 = {
+  flex: 'box-flex',
+  'flex-grow': 'box-flex',
+  'flex-direction': ['box-orient', 'box-direction'],
+  order: 'box-ordinal-group',
+  'align-items': 'box-align',
+  'flex-flow': ['box-orient', 'box-direction'],
+  'justify-content': 'box-pack'
+};
+var propKeys = Object.keys(propMap$1);
 
-/**
- * Sort props by length.
- */
-function jssPropsSort() {
-  var sort = function sort(prop0, prop1) {
-    if (prop0.length === prop1.length) {
-      return prop0 > prop1 ? 1 : -1;
-    }
+var prefixCss = function prefixCss(p) {
+  return prefix.css + p;
+}; // Support old flex spec from 2009.
 
-    return prop0.length - prop1.length;
-  };
 
-  return {
-    onProcessStyle: function onProcessStyle(style, rule) {
-      if (rule.type !== 'style') return style;
-      var newStyle = {};
-      var props = Object.keys(style).sort(sort);
+var flex2009 = {
+  supportedProperty: function supportedProperty(prop, style, _ref) {
+    var multiple = _ref.multiple;
 
-      for (var i = 0; i < props.length; i++) {
-        newStyle[props[i]] = style[props[i]];
+    if (propKeys.indexOf(prop) > -1) {
+      var newProp = propMap$1[prop];
+
+      if (!Array.isArray(newProp)) {
+        return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
       }
 
-      return newStyle;
+      if (!multiple) return false;
+
+      for (var i = 0; i < newProp.length; i++) {
+        if (!(prefix.js + pascalize(newProp[0]) in style)) {
+          return false;
+        }
+      }
+
+      return newProp.map(prefixCss);
     }
-  };
-}
 
-var create = function create(options) {
-  if (options === void 0) {
-    options = {};
+    return false;
   }
-
-  return {
-    plugins: [functionPlugin(), observablePlugin(options.observable), templatePlugin(), jssGlobal(), jssExtend(), jssNested(), jssCompose(), camelCase(), defaultUnit(options.defaultUnit), jssExpand(), jssVendorPrefixer(), jssPropsSort()]
-  };
 };
 
-var _tslib$1 = {};
-
-(function (exports) {
+// plugins = [
+//   ...plugins,
+//    breakPropsOld,
+//    inlineLogicalOld,
+//    unprefixed,
+//    prefixed,
+//    scrollSnap,
+//    flex2012,
+//    flex2009
+// ]
+// Plugins without 'noPrefill' value, going last.
+// 'flex-*' plugins should be at the bottom.
+// 'flex2009' going after 'flex2012'.
+// 'prefixed' going after 'unprefixed'
 
-	Object.defineProperty(exports, '__esModule', { value: true });
+var plugins = [appearence, colorAdjust, mask, textOrientation, transform, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];
+var propertyDetectors = plugins.filter(function (p) {
+  return p.supportedProperty;
+}).map(function (p) {
+  return p.supportedProperty;
+});
+var noPrefill = plugins.filter(function (p) {
+  return p.noPrefill;
+}).reduce(function (a, p) {
+  a.push.apply(a, _toConsumableArray(p.noPrefill));
+  return a;
+}, []);
 
-	/*! *****************************************************************************
-	Copyright (c) Microsoft Corporation.
+var el;
+var cache = {};
 
-	Permission to use, copy, modify, and/or distribute this software for any
-	purpose with or without fee is hereby granted.
+if (isInBrowser) {
+  el = document.createElement('p'); // We test every property on vendor prefix requirement.
+  // Once tested, result is cached. It gives us up to 70% perf boost.
+  // http://jsperf.com/element-style-object-access-vs-plain-object
+  //
+  // Prefill cache with known css properties to reduce amount of
+  // properties we need to feature test at runtime.
+  // http://davidwalsh.name/vendor-prefix
 
-	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.
-	***************************************************************************** */
+  var computed = window.getComputedStyle(document.documentElement, '');
 
-	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));
+  for (var key$1 in computed) {
+    // eslint-disable-next-line no-restricted-globals
+    if (!isNaN(key$1)) cache[computed[key$1]] = computed[key$1];
+  } // Properties that cannot be correctly detected using the
+  // cache prefill method.
 
-var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
 
+  noPrefill.forEach(function (x) {
+    return delete cache[x];
+  });
+}
 /**
- * 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 ))
+ * Test if a property is supported, returns supported property with vendor
+ * prefix if required. Returns `false` if not supported.
  *
- * @module sort-css-media-queries
- * @author Oleg Dutchenko <dutchenko.o.wezom@gmail.com>
- * @version 1.5.0
+ * @param {String} prop dash separated
+ * @param {Object} [options]
+ * @return {String|Boolean}
+ * @api public
  */
 
-// ----------------------------------------
-// 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);
+function supportedProperty(prop, options) {
+  if (options === void 0) {
+    options = {};
+  }
 
-const isPrint = /print/i;
-const isPrintOnly = /^print$/i;
+  // For server-side rendering.
+  if (!el) return prop; // Remove cache for benchmark tests or return property from the cache.
 
-const maxValue = Number.MAX_VALUE;
+  if (process.env.NODE_ENV !== 'benchmark' && cache[prop] != null) {
+    return cache[prop];
+  } // Check if 'transition' or 'transform' natively supported in browser.
 
-/**
- * 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
-  }
+  if (prop === 'transition' || prop === 'transform') {
+    options[prop] = prop in el.style;
+  } // Find a plugin for current prefix property.
 
-  let number = length[1];
-  const unit = length[2];
 
-  switch (unit) {
-    case 'ch':
-      number = parseFloat(number) * 8.8984375;
-      break
+  for (var i = 0; i < propertyDetectors.length; i++) {
+    cache[prop] = propertyDetectors[i](prop, el.style, options); // Break loop, if value found.
 
-    case 'em':
-    case 'rem':
-      number = parseFloat(number) * 16;
-      break
+    if (cache[prop]) break;
+  } // Reset styles for current property.
+  // Firefox can even throw an error for invalid properties, e.g., "0".
 
-    case 'ex':
-      number = parseFloat(number) * 8.296875;
-      break
 
-    case 'px':
-      number = parseFloat(number);
-      break
+  try {
+    el.style[prop] = '';
+  } catch (err) {
+    return false;
   }
 
-  return +number
+  return cache[prop];
 }
 
+var cache$1 = {};
+var transitionProperties = {
+  transition: 1,
+  'transition-property': 1,
+  '-webkit-transition': 1,
+  '-webkit-transition-property': 1
+};
+var transPropsRegExp = /(^\s*[\w-]+)|, (\s*[\w-]+)(?![^()]*\))/g;
+var el$1;
 /**
- * Wrapper for creating test functions
- * @private
- * @param {RegExp} doubleTestTrue
- * @param {RegExp} doubleTestFalse
- * @param {RegExp} singleTest
- * @return {Function}
+ * Returns prefixed value transition/transform if needed.
+ *
+ * @param {String} match
+ * @param {String} p1
+ * @param {String} p2
+ * @return {String}
+ * @api private
  */
-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)
-  }
+
+function prefixTransitionCallback(match, p1, p2) {
+  if (p1 === 'var') return 'var';
+  if (p1 === 'all') return 'all';
+  if (p2 === 'all') return ', all';
+  var prefixedValue = p1 ? supportedProperty(p1) : ", " + supportedProperty(p2);
+  if (!prefixedValue) return p1 || p2;
+  return prefixedValue;
 }
 
+if (isInBrowser) el$1 = document.createElement('p');
 /**
- * @private
- * @param {string} a
- * @param {string} b
- * @return {number|null}
+ * Returns prefixed value if needed. Returns `false` if value is not supported.
+ *
+ * @param {String} property
+ * @param {String} value
+ * @return {String|Boolean}
+ * @api public
  */
-function _testIsPrint (a, b) {
-  const isPrintA = isPrint.test(a);
-  const isPrintOnlyA = isPrintOnly.test(a);
 
-  const isPrintB = isPrint.test(b);
-  const isPrintOnlyB = isPrintOnly.test(b);
+function supportedValue(property, value) {
+  // For server-side rendering.
+  var prefixedValue = value;
+  if (!el$1 || property === 'content') return value; // It is a string or a number as a string like '1'.
+  // We want only prefixable values here.
+  // eslint-disable-next-line no-restricted-globals
 
-  if (isPrintA && isPrintB) {
-    if (!isPrintOnlyA && isPrintOnlyB) {
-      return 1
-    }
-    if (isPrintOnlyA && !isPrintOnlyB) {
-      return -1
-    }
-    return a.localeCompare(b)
-  }
-  if (isPrintA) {
-    return 1
-  }
-  if (isPrintB) {
-    return -1
-  }
+  if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {
+    return prefixedValue;
+  } // Create cache key for current value.
 
-  return null
-}
 
-// ----------------------------------------
-// Public
-// ----------------------------------------
+  var cacheKey = property + prefixedValue; // Remove cache for benchmark tests or return value from cache.
 
-/**
- * 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
-  }
+  if (process.env.NODE_ENV !== 'benchmark' && cache$1[cacheKey] != null) {
+    return cache$1[cacheKey];
+  } // IE can even throw an error in some cases, for e.g. style.content = 'bar'.
 
-  const minA = isMinWidth(a) || isMinHeight(a);
-  const maxA = isMaxWidth(a) || isMaxHeight(a);
 
-  const minB = isMinWidth(b) || isMinHeight(b);
-  const maxB = isMaxWidth(b) || isMaxHeight(b);
+  try {
+    // Test value as it is.
+    el$1.style[property] = prefixedValue;
+  } catch (err) {
+    // Return false if value not supported.
+    cache$1[cacheKey] = false;
+    return false;
+  } // If 'transition' or 'transition-property' property.
 
-  if (minA && maxB) {
-    return -1
-  }
-  if (maxA && minB) {
-    return 1
-  }
 
-  let lengthA = _getQueryLength(a);
-  let lengthB = _getQueryLength(b);
+  if (transitionProperties[property]) {
+    prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);
+  } else if (el$1.style[property] === '') {
+    // Value with a vendor prefix.
+    prefixedValue = prefix.css + prefixedValue; // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.
 
-  if (lengthA === maxValue && lengthB === maxValue) {
-    return a.localeCompare(b)
-  } else if (lengthA === maxValue) {
-    return 1
-  } else if (lengthB === maxValue) {
-    return -1
-  }
+    if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox'; // Test prefixed value.
 
-  if (lengthA > lengthB) {
-    if (maxA) {
-      return -1
-    }
-    return 1
-  }
+    el$1.style[property] = prefixedValue; // Return false if value not supported.
 
-  if (lengthA < lengthB) {
-    if (maxA) {
-      return 1
+    if (el$1.style[property] === '') {
+      cache$1[cacheKey] = false;
+      return false;
     }
-    return -1
-  }
+  } // Reset styles for current property.
 
-  return a.localeCompare(b)
+
+  el$1.style[property] = ''; // Write current value to cache.
+
+  cache$1[cacheKey] = prefixedValue;
+  return cache$1[cacheKey];
 }
 
+cssVendor_cjs.prefix = prefix;
+var supportedKeyframes_1 = cssVendor_cjs.supportedKeyframes = supportedKeyframes;
+var supportedProperty_1 = cssVendor_cjs.supportedProperty = supportedProperty;
+var supportedValue_1 = cssVendor_cjs.supportedValue = supportedValue;
+
 /**
- * Sorting an array with media queries
- * according to the desktop-first methodology.
- * @param {string} a
- * @param {string} b
- * @return {number} 1 / 0 / -1
+ * Add vendor prefix to a property name when needed.
  */
-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
+function jssVendorPrefixer() {
+  function onProcessRule(rule) {
+    if (rule.type === 'keyframes') {
+      var atRule = rule;
+      atRule.at = supportedKeyframes_1(atRule.at);
+    }
   }
 
-  const lengthA = _getQueryLength(a);
-  const lengthB = _getQueryLength(b);
+  function prefixStyle(style) {
+    for (var prop in style) {
+      var value = style[prop];
 
-  if (lengthA === maxValue && lengthB === maxValue) {
-    return a.localeCompare(b)
-  } else if (lengthA === maxValue) {
-    return 1
-  } else if (lengthB === maxValue) {
-    return -1
-  }
+      if (prop === 'fallbacks' && Array.isArray(value)) {
+        style[prop] = value.map(prefixStyle);
+        continue;
+      }
 
-  if (lengthA > lengthB) {
-    if (maxA) {
-      return -1
+      var changeProp = false;
+      var supportedProp = supportedProperty_1(prop);
+      if (supportedProp && supportedProp !== prop) changeProp = true;
+      var changeValue = false;
+      var supportedValue$1 = supportedValue_1(supportedProp, toCssValue(value));
+      if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;
+
+      if (changeProp || changeValue) {
+        if (changeProp) delete style[prop];
+        style[supportedProp || prop] = supportedValue$1 || value;
+      }
     }
-    return 1
+
+    return style;
   }
 
-  if (lengthA < lengthB) {
-    if (maxA) {
-      return 1
-    }
-    return -1
+  function onProcessStyle(style, rule) {
+    if (rule.type !== 'style') return style;
+    return prefixStyle(style);
   }
 
-  return -(a.localeCompare(b))
-};
+  function onChangeValue(value, prop) {
+    return supportedValue_1(prop, toCssValue(value)) || value;
+  }
 
-// ----------------------------------------
-// Exports
-// ----------------------------------------
+  return {
+    onProcessRule: onProcessRule,
+    onProcessStyle: onProcessStyle,
+    onChangeValue: onChangeValue
+  };
+}
 
-var sortCssMediaQueries = sortCSSmq$1;
+/**
+ * Sort props by length.
+ */
+function jssPropsSort() {
+  var sort = function sort(prop0, prop1) {
+    if (prop0.length === prop1.length) {
+      return prop0 > prop1 ? 1 : -1;
+    }
 
-var _tslib = _tslib$1;
-var jss$1 = require$$1;
-var sortCSSmq = sortCssMediaQueries;
+    return prop0.length - prop1.length;
+  };
 
-function _interopDefaultLegacy$1(e) {
-	return e && typeof e === 'object' && 'default' in e ? e : { default: e };
-}
+  return {
+    onProcessStyle: function onProcessStyle(style, rule) {
+      if (rule.type !== 'style') return style;
+      var newStyle = {};
+      var props = Object.keys(style).sort(sort);
 
-var sortCSSmq__default = /*#__PURE__*/ _interopDefaultLegacy$1(sortCSSmq);
+      for (var i = 0; i < props.length; i++) {
+        newStyle[props[i]] = style[props[i]];
+      }
 
-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);
-		}
-	};
+      return newStyle;
+    }
+  };
 }
 
-var dist = jssCombineAndSortMQ;
+var create = function create(options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  return {
+    plugins: [functionPlugin(), observablePlugin(options.observable), templatePlugin(), jssGlobal(), jssExtend(), jssNested(), jssCompose(), camelCase(), defaultUnit(options.defaultUnit), jssExpand(), jssVendorPrefixer(), jssPropsSort()]
+  };
+};
 
 index.setup({
     ...create(),
@@ -5246,109 +5534,6 @@ index.setup({
     plugins: [...create().plugins, dist({ combineMediaQueries: true })],
 });
 
-/* Auto Generated Start */
-const themeLight = {
-    baseColor: '#000',
-    baseColorDarken: '#000000',
-    brandColor: '#d5001c',
-    backgroundColor: '#fff',
-    backgroundSurfaceColor: '#f2f2f2',
-    contrastLowColor: '#e3e4e5',
-    contrastMediumColor: '#626669',
-    contrastHighColor: '#323639',
-    contrastHighColorDarken: '#151718',
-    hoverColor: '#d5001c',
-    hoverColorDarken: '#980014',
-    activeColor: '#d5001c',
-    focusColor: 'currentColor',
-    disabledColor: '#96989a',
-    errorColor: '#e00000',
-    errorColorDarken: '#a30000',
-    errorSoftColor: '#fae6e6',
-    successColor: '#018a16',
-    successColorDarken: '#014d0c',
-    successSoftColor: '#e5f3e7',
-    warningColor: '#ff9b00',
-    warningSoftColor: '#fff5e5',
-    neutralColor: '#0061bd',
-    neutralSoftColor: '#e5eff8'
-};
-const themeDark = {
-    baseColor: '#fff',
-    baseColorDarken: '#e0e0e0',
-    brandColor: '#d5001c',
-    backgroundColor: '#0e1418',
-    backgroundSurfaceColor: '#262b2e',
-    contrastLowColor: '#4a4e51',
-    contrastMediumColor: '#b0b1b2',
-    contrastHighColor: '#e3e4e5',
-    contrastHighColorDarken: '#c3c5c8',
-    hoverColor: '#ff0223',
-    hoverColorDarken: '#c4001a',
-    activeColor: '#ff0223',
-    focusColor: 'currentColor',
-    disabledColor: '#7c7f81',
-    errorColor: '#fc1717',
-    errorColorDarken: '#d30303',
-    errorSoftColor: '#fec5c5',
-    successColor: '#01ba1d',
-    successColorDarken: '#017d14',
-    successSoftColor: '#bfeec6',
-    warningColor: '#ff9b00',
-    warningSoftColor: '#ffe6bf',
-    neutralColor: '#2193ff',
-    neutralSoftColor: '#c7e4ff'
-};
-const themeLightElectric = Object.assign(Object.assign({}, themeLight), { brandColor: '#00b0f4', hoverColor: '#00b0f4', hoverColorDarken: '#0084b7', activeColor: '#00b0f4' });
-const themeDarkElectric = Object.assign(Object.assign({}, themeDark), { brandColor: '#00b0f4', hoverColor: '#00b0f4', hoverColorDarken: '#0084b7', activeColor: '#00b0f4' });
-const themes = {
-    'light': themeLight,
-    'dark': themeDark,
-    'light-electric': themeLightElectric,
-    'dark-electric': themeDarkElectric
-};
-/* Auto Generated End */
-const getThemedColors = (theme) => {
-    return themes[theme];
-};
-
-const pxToRemWithUnit = (px) => `${px / 16}rem`;
-
-// NOTE: handpicked selection of plugins from jss-preset-default
-createJss({
-    plugins: [
-        jssGlobal(),
-        jssNested(),
-        camelCase(),
-        dist({ combineMediaQueries: true }),
-    ],
-});
-const supportsConstructableStylesheets = () => {
-    try {
-        return typeof new CSSStyleSheet().replaceSync === 'function';
-    }
-    catch (_a) {
-        return false;
-    }
-};
-// determine it once
-supportsConstructableStylesheets();
-
-const paramCaseToCamelCase = (str) => {
-    return str.replace(/-(\w)/g, (_, group) => group.toUpperCase());
-};
-const isScrollable = (isPrevHidden, isNextHidden) => {
-    return !(isPrevHidden && isNextHidden);
-};
-
-const hasDocument = typeof document !== 'undefined';
-
-hasDocument && 'scrollBehavior' in document.documentElement.style;
-const win = typeof window !== 'undefined' ? window : {};
-win.document || { head: {} };
-(win.HTMLElement || class {
-});
-
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
         .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys