@galaxy-ds/core 1.1.44 → 1.1.48

package/dist/index.esm.js

@@ -3769,15 +3769,16 @@ var join = function join(value, by) {
 
   return result;
 };
-
 /**
- * Converts array values to string.
+ * Converts JSS array value to a CSS string.
  *
  * `margin: [['5px', '10px']]` > `margin: 5px 10px;`
  * `border: ['1px', '2px']` > `border: 1px, 2px;`
  * `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`
  * `color: ['red', !important]` > `color: red !important;`
  */
+
+
 var toCssValue = function toCssValue(value, ignoreImportant) {
   if (ignoreImportant === void 0) {
     ignoreImportant = false;
@@ -3802,10 +3803,25 @@ var toCssValue = function toCssValue(value, ignoreImportant) {
   return cssValue;
 };
 
+function getWhitespaceSymbols(options) {
+  if (options && options.format === false) {
+    return {
+      linebreak: '',
+      space: ''
+    };
+  }
+
+  return {
+    linebreak: '\n',
+    space: ' '
+  };
+}
+
 /**
  * Indent a string.
  * http://jsperf.com/array-join-vs-for
  */
+
 function indentStr(str, indent) {
   var result = '';
 
@@ -3831,6 +3847,15 @@ function toCss(selector, style, options) {
       _options$indent = _options.indent,
       indent = _options$indent === void 0 ? 0 : _options$indent;
   var fallbacks = style.fallbacks;
+
+  if (options.format === false) {
+    indent = -Infinity;
+  }
+
+  var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+      linebreak = _getWhitespaceSymbols.linebreak,
+      space = _getWhitespaceSymbols.space;
+
   if (selector) indent++; // Apply fallbacks first.
 
   if (fallbacks) {
@@ -3843,8 +3868,8 @@ function toCss(selector, style, options) {
           var value = fallback[prop];
 
           if (value != null) {
-            if (result) result += '\n';
-            result += indentStr(prop + ": " + toCssValue(value) + ";", indent);
+            if (result) result += linebreak;
+            result += indentStr(prop + ":" + space + toCssValue(value) + ";", indent);
           }
         }
       }
@@ -3854,8 +3879,8 @@ function toCss(selector, style, options) {
         var _value = fallbacks[_prop];
 
         if (_value != null) {
-          if (result) result += '\n';
-          result += indentStr(_prop + ": " + toCssValue(_value) + ";", indent);
+          if (result) result += linebreak;
+          result += indentStr(_prop + ":" + space + toCssValue(_value) + ";", indent);
         }
       }
     }
@@ -3865,8 +3890,8 @@ function toCss(selector, style, options) {
     var _value2 = style[_prop2];
 
     if (_value2 != null && _prop2 !== 'fallbacks') {
-      if (result) result += '\n';
-      result += indentStr(_prop2 + ": " + toCssValue(_value2) + ";", indent);
+      if (result) result += linebreak;
+      result += indentStr(_prop2 + ":" + space + toCssValue(_value2) + ";", indent);
     }
   } // Allow empty style in this case, because properties will be added dynamically.
 
@@ -3875,8 +3900,8 @@ function toCss(selector, style, options) {
 
   if (!selector) return result;
   indent--;
-  if (result) result = "\n" + result + "\n";
-  return indentStr(selector + " {" + result, indent) + indentStr('}', indent);
+  if (result) result = "" + linebreak + result + linebreak;
+  return indentStr("" + selector + space + "{" + result, indent) + indentStr('}', indent);
 }
 
 var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
@@ -3890,12 +3915,7 @@ var BaseStyleRule =
 function () {
   function BaseStyleRule(key, style, options) {
     this.type = 'style';
-    this.key = void 0;
     this.isProcessed = false;
-    this.style = void 0;
-    this.renderer = void 0;
-    this.renderable = void 0;
-    this.options = void 0;
     var sheet = options.sheet,
         Renderer = options.Renderer;
     this.key = key;
@@ -3955,9 +3975,6 @@ function (_BaseStyleRule) {
     var _this;
 
     _this = _BaseStyleRule.call(this, key, style, options) || this;
-    _this.selectorText = void 0;
-    _this.id = void 0;
-    _this.renderable = void 0;
     var selector = options.selector,
         scoped = options.scoped,
         sheet = options.sheet,
@@ -4054,12 +4071,12 @@ function (_BaseStyleRule) {
   return StyleRule;
 }(BaseStyleRule);
 var pluginStyleRule = {
-  onCreateRule: function onCreateRule(name, style, options) {
-    if (name[0] === '@' || options.parent && options.parent.type === 'keyframes') {
+  onCreateRule: function onCreateRule(key, style, options) {
+    if (key[0] === '@' || options.parent && options.parent.type === 'keyframes') {
       return null;
     }
 
-    return new StyleRule(name, style, options);
+    return new StyleRule(key, style, options);
   }
 };
 
@@ -4077,13 +4094,7 @@ var ConditionalRule =
 function () {
   function ConditionalRule(key, styles, options) {
     this.type = 'conditional';
-    this.at = void 0;
-    this.key = void 0;
-    this.query = void 0;
-    this.rules = void 0;
-    this.options = void 0;
     this.isProcessed = false;
-    this.renderable = void 0;
     this.key = key;
     var atMatch = key.match(atRegExp);
     this.at = atMatch ? atMatch[1] : 'unknown'; // Key might contain a unique suffix in case the `name` passed by user was duplicate.
@@ -4139,6 +4150,9 @@ function () {
       options = defaultToStringOptions;
     }
 
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
     if (options.indent == null) options.indent = defaultToStringOptions.indent;
     if (options.children == null) options.children = defaultToStringOptions.children;
 
@@ -4147,7 +4161,7 @@ function () {
     }
 
     var children = this.rules.toString(options);
-    return children ? this.query + " {\n" + children + "\n}" : '';
+    return children ? this.query + " {" + linebreak + children + linebreak + "}" : '';
   };
 
   return ConditionalRule;
@@ -4174,13 +4188,7 @@ function () {
   function KeyframesRule(key, frames, options) {
     this.type = 'keyframes';
     this.at = '@keyframes';
-    this.key = void 0;
-    this.name = void 0;
-    this.id = void 0;
-    this.rules = void 0;
-    this.options = void 0;
     this.isProcessed = false;
-    this.renderable = void 0;
     var nameMatch = key.match(nameRegExp);
 
     if (nameMatch && nameMatch[1]) {
@@ -4220,6 +4228,9 @@ function () {
       options = defaultToStringOptions$1;
     }
 
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
     if (options.indent == null) options.indent = defaultToStringOptions$1.indent;
     if (options.children == null) options.children = defaultToStringOptions$1.children;
 
@@ -4228,7 +4239,7 @@ function () {
     }
 
     var children = this.rules.toString(options);
-    if (children) children = "\n" + children + "\n";
+    if (children) children = "" + linebreak + children + linebreak;
     return this.at + " " + this.id + " {" + children + "}";
   };
 
@@ -4265,7 +4276,7 @@ var replaceRef = function replaceRef(style, prop, keyframes) {
   }
 };
 
-var plugin = {
+var pluginKeyframesRule = {
   onCreateRule: function onCreateRule(key, frames, options) {
     return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
   },
@@ -4302,15 +4313,7 @@ function (_BaseStyleRule) {
   _inheritsLoose(KeyframeRule, _BaseStyleRule);
 
   function KeyframeRule() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _BaseStyleRule.call.apply(_BaseStyleRule, [this].concat(args)) || this;
-    _this.renderable = void 0;
-    return _this;
+    return _BaseStyleRule.apply(this, arguments) || this;
   }
 
   var _proto = KeyframeRule.prototype;
@@ -4345,11 +4348,7 @@ function () {
   function FontFaceRule(key, style, options) {
     this.type = 'font-face';
     this.at = '@font-face';
-    this.key = void 0;
-    this.style = void 0;
-    this.options = void 0;
     this.isProcessed = false;
-    this.renderable = void 0;
     this.key = key;
     this.style = style;
     this.options = options;
@@ -4362,12 +4361,15 @@ function () {
   var _proto = FontFaceRule.prototype;
 
   _proto.toString = function toString(options) {
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
     if (Array.isArray(this.style)) {
       var str = '';
 
       for (var index = 0; index < this.style.length; index++) {
         str += toCss(this.at, this.style[index]);
-        if (this.style[index + 1]) str += '\n';
+        if (this.style[index + 1]) str += linebreak;
       }
 
       return str;
@@ -4391,11 +4393,7 @@ function () {
   function ViewportRule(key, style, options) {
     this.type = 'viewport';
     this.at = '@viewport';
-    this.key = void 0;
-    this.style = void 0;
-    this.options = void 0;
     this.isProcessed = false;
-    this.renderable = void 0;
     this.key = key;
     this.style = style;
     this.options = options;
@@ -4424,11 +4422,7 @@ var SimpleRule =
 function () {
   function SimpleRule(key, value, options) {
     this.type = 'simple';
-    this.key = void 0;
-    this.value = void 0;
-    this.options = void 0;
     this.isProcessed = false;
-    this.renderable = void 0;
     this.key = key;
     this.value = value;
     this.options = options;
@@ -4469,7 +4463,7 @@ var pluginSimpleRule = {
   }
 };
 
-var plugins$1 = [pluginStyleRule, pluginConditionalRule, plugin, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
+var plugins$1 = [pluginStyleRule, pluginConditionalRule, pluginKeyframesRule, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
 
 var defaultUpdateOptions = {
   process: true
@@ -4496,9 +4490,6 @@ function () {
     this.raw = {};
     this.index = [];
     this.counter = 0;
-    this.options = void 0;
-    this.classes = void 0;
-    this.keyframes = void 0;
     this.options = options;
     this.classes = options.classes;
     this.keyframes = options.keyframes;
@@ -4637,14 +4628,11 @@ function () {
     var options;
 
     if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
-      name = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]
-
-      data = arguments.length <= 1 ? undefined : arguments[1]; // $FlowFixMe[invalid-tuple-index]
-
+      name = arguments.length <= 0 ? undefined : arguments[0];
+      data = arguments.length <= 1 ? undefined : arguments[1];
       options = arguments.length <= 2 ? undefined : arguments[2];
     } else {
-      data = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]
-
+      data = arguments.length <= 0 ? undefined : arguments[0];
       options = arguments.length <= 1 ? undefined : arguments[1];
       name = null;
     }
@@ -4676,32 +4664,31 @@ function () {
       return;
     }
 
-    var styleRule = rule;
-    var style = styleRule.style;
+    var style = rule.style;
     plugins.onUpdate(data, rule, sheet, options); // We rely on a new `style` ref in case it was mutated during onUpdate hook.
 
-    if (options.process && style && style !== styleRule.style) {
+    if (options.process && style && style !== rule.style) {
       // We need to run the plugins in case new `style` relies on syntax plugins.
-      plugins.onProcessStyle(styleRule.style, styleRule, sheet); // Update and add props.
+      plugins.onProcessStyle(rule.style, rule, sheet); // Update and add props.
 
-      for (var prop in styleRule.style) {
-        var nextValue = styleRule.style[prop];
+      for (var prop in rule.style) {
+        var nextValue = rule.style[prop];
         var prevValue = style[prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
         // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
 
         if (nextValue !== prevValue) {
-          styleRule.prop(prop, nextValue, forceUpdateOptions);
+          rule.prop(prop, nextValue, forceUpdateOptions);
         }
       } // Remove props.
 
 
       for (var _prop in style) {
-        var _nextValue = styleRule.style[_prop];
+        var _nextValue = rule.style[_prop];
         var _prevValue = style[_prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
         // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
 
         if (_nextValue == null && _nextValue !== _prevValue) {
-          styleRule.prop(_prop, null, forceUpdateOptions);
+          rule.prop(_prop, null, forceUpdateOptions);
         }
       }
     }
@@ -4716,12 +4703,15 @@ function () {
     var sheet = this.options.sheet;
     var link = sheet ? sheet.options.link : false;
 
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
     for (var index = 0; index < this.index.length; index++) {
       var rule = this.index[index];
       var css = rule.toString(options); // No need to render an empty rule.
 
       if (!css && !link) continue;
-      if (str) str += '\n';
+      if (str) str += linebreak;
       str += css;
     }
 
@@ -4735,14 +4725,6 @@ var StyleSheet =
 /*#__PURE__*/
 function () {
   function StyleSheet(styles, options) {
-    this.options = void 0;
-    this.deployed = void 0;
-    this.attached = void 0;
-    this.rules = void 0;
-    this.renderer = void 0;
-    this.classes = void 0;
-    this.keyframes = void 0;
-    this.queue = void 0;
     this.attached = false;
     this.deployed = false;
     this.classes = {};
@@ -4944,7 +4926,7 @@ function () {
       internal: [],
       external: []
     };
-    this.registry = void 0;
+    this.registry = {};
   }
 
   var _proto = PluginsRegistry.prototype;
@@ -4983,7 +4965,6 @@ function () {
 
   _proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {
     for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
-      // $FlowFixMe[prop-missing]
       rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
     }
   }
@@ -5064,8 +5045,9 @@ function () {
 }();
 
 /**
- * Sheets registry to access them all at one place.
+ * Sheets registry to access all instances in one place.
  */
+
 var SheetsRegistry =
 /*#__PURE__*/
 function () {
@@ -5123,6 +5105,9 @@ function () {
         attached = _ref.attached,
         options = _objectWithoutPropertiesLoose(_ref, ["attached"]);
 
+    var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+        linebreak = _getWhitespaceSymbols.linebreak;
+
     var css = '';
 
     for (var i = 0; i < this.registry.length; i++) {
@@ -5132,7 +5117,7 @@ function () {
         continue;
       }
 
-      if (css) css += '\n';
+      if (css) css += linebreak;
       css += sheet.toString(options);
     }
 
@@ -5160,7 +5145,7 @@ function () {
  * each request in order to not leak sheets across requests.
  */
 
-var registry = new SheetsRegistry();
+var sheets = new SheetsRegistry();
 
 /* eslint-disable */
 
@@ -5185,12 +5170,12 @@ if (globalThis$1[ns] == null) globalThis$1[ns] = 0; // Bundle may contain multip
 var moduleId = globalThis$1[ns]++;
 
 var maxRules = 1e10;
-
 /**
  * Returns a function which generates unique class names based on counters.
  * When new generator function is created, rule counter is reseted.
  * We need to reset the rule counter for SSR for each request.
  */
+
 var createGenerateId = function createGenerateId(options) {
   if (options === void 0) {
     options = {};
@@ -5232,6 +5217,7 @@ var createGenerateId = function createGenerateId(options) {
 /**
  * Cache the value from the first time a function is called.
  */
+
 var memoize = function memoize(fn) {
   var value;
   return function () {
@@ -5239,10 +5225,11 @@ var memoize = function memoize(fn) {
     return value;
   };
 };
-
 /**
  * Get a style property value.
  */
+
+
 var getPropertyValue = function getPropertyValue(cssRule, prop) {
   try {
     // Support CSSTOM.
@@ -5256,10 +5243,11 @@ var getPropertyValue = function getPropertyValue(cssRule, prop) {
     return '';
   }
 };
-
 /**
  * Set a style property.
  */
+
+
 var setProperty = function setProperty(cssRule, prop, value) {
   try {
     var cssValue = value;
@@ -5286,10 +5274,11 @@ var setProperty = function setProperty(cssRule, prop, value) {
 
   return true;
 };
-
 /**
  * Remove a style property.
  */
+
+
 var removeProperty = function removeProperty(cssRule, prop) {
   try {
     // Support CSSTOM.
@@ -5302,10 +5291,11 @@ var removeProperty = function removeProperty(cssRule, prop) {
     process.env.NODE_ENV !== "production" ? warning(false, "[JSS] DOMException \"" + err.message + "\" was thrown. Tried to remove property \"" + prop + "\".") : void 0;
   }
 };
-
 /**
  * Set the selector.
  */
+
+
 var setSelector = function setSelector(cssRule, selectorText) {
   cssRule.selectorText = selectorText; // Return false if setter was not successful.
   // Currently works in chrome only.
@@ -5370,16 +5360,17 @@ function findCommentNode(text) {
 
   return null;
 }
-
 /**
  * Find a node before which we can insert the sheet.
  */
+
+
 function findPrevNode(options) {
-  var registry$1 = registry.registry;
+  var registry = sheets.registry;
 
-  if (registry$1.length > 0) {
+  if (registry.length > 0) {
     // Try to insert before the next higher sheet.
-    var sheet = findHigherSheet(registry$1, options);
+    var sheet = findHigherSheet(registry, options);
 
     if (sheet && sheet.renderer) {
       return {
@@ -5389,7 +5380,7 @@ function findPrevNode(options) {
     } // Otherwise insert after the last attached.
 
 
-    sheet = findHighestSheet(registry$1, options);
+    sheet = findHighestSheet(registry, options);
 
     if (sheet && sheet.renderer) {
       return {
@@ -5435,7 +5426,6 @@ function insertStyle(style, options) {
 
 
   if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
-    // https://stackoverflow.com/questions/41328728/force-casting-in-flow
     var insertionPointElement = insertionPoint;
     var parentNode = insertionPointElement.parentNode;
     if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);else process.env.NODE_ENV !== "production" ? warning(false, '[JSS] Insertion point is not in the DOM.') : void 0;
@@ -5457,13 +5447,10 @@ var getNonce = memoize(function () {
 var _insertRule = function insertRule(container, rule, index) {
   try {
     if ('insertRule' in container) {
-      var c = container;
-      c.insertRule(rule, index);
+      container.insertRule(rule, index);
     } // Keyframes rule.
     else if ('appendRule' in container) {
-        var _c = container;
-
-        _c.appendRule(rule);
+        container.appendRule(rule);
       }
   } catch (err) {
     process.env.NODE_ENV !== "production" ? warning(false, "[JSS] " + err.message) : void 0;
@@ -5496,7 +5483,6 @@ var createStyle = function createStyle() {
 var DomRenderer =
 /*#__PURE__*/
 function () {
-  // HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
   // Will be empty if link: true option is not set, because
   // it is only for use together with insertRule API.
   function DomRenderer(sheet) {
@@ -5504,12 +5490,10 @@ function () {
     this.setProperty = setProperty;
     this.removeProperty = removeProperty;
     this.setSelector = setSelector;
-    this.element = void 0;
-    this.sheet = void 0;
     this.hasInsertedRules = false;
     this.cssRules = [];
     // There is no sheet when the renderer is used from a standalone StyleRule.
-    if (sheet) registry.add(sheet);
+    if (sheet) sheets.add(sheet);
     this.sheet = sheet;
 
     var _ref = this.sheet ? this.sheet.options : {},
@@ -5696,7 +5680,7 @@ var Jss =
 function () {
   function Jss(options) {
     this.id = instanceCounter++;
-    this.version = "10.7.1";
+    this.version = "10.8.2";
     this.plugins = new PluginsRegistry();
     this.options = {
       id: {
@@ -5768,7 +5752,7 @@ function () {
         index = _options.index;
 
     if (typeof index !== 'number') {
-      index = registry.index === 0 ? 0 : registry.index + 1;
+      index = sheets.index === 0 ? 0 : sheets.index + 1;
     }
 
     var sheet = new StyleSheet(styles, _extends$1({}, options, {
@@ -5788,7 +5772,7 @@ function () {
 
   _proto.removeStyleSheet = function removeStyleSheet(sheet) {
     sheet.detach();
-    registry.remove(sheet);
+    sheets.remove(sheet);
     return this;
   }
   /**
@@ -5808,10 +5792,8 @@ function () {
 
     // Enable rule without name for inline styles.
     if (typeof name === 'object') {
-      // $FlowFixMe[incompatible-call]
       return this.createRule(undefined, name, style);
-    } // $FlowFixMe[incompatible-type]
-
+    }
 
     var ruleOptions = _extends$1({}, options, {
       name: name,
@@ -5849,6 +5831,16 @@ function () {
   return Jss;
 }();
 
+var createJss = function createJss(options) {
+  return new Jss(options);
+};
+
+/**
+* Export a constant indicating if this browser has CSSTOM support.
+* https://developers.google.com/web/updates/2018/03/cssom
+*/
+var hasCSSTOMSupport = typeof CSS === 'object' && CSS != null && 'number' in CSS;
+
 /**
  * Extracts a styles object with only props that contain function values.
  */
@@ -5882,24 +5874,7 @@ function getDynamicStyles(styles) {
  * @website https://github.com/cssinjs/jss
  * @license MIT
  */
-
-/**
- * Export a constant indicating if this browser has CSSTOM support.
- * https://developers.google.com/web/updates/2018/03/cssom
- */
-var hasCSSTOMSupport = typeof CSS === 'object' && CSS != null && 'number' in CSS;
-/**
- * Creates a new instance of Jss.
- */
-
-var create = function create(options) {
-  return new Jss(options);
-};
-/**
- * A global Jss instance.
- */
-
-create();
+createJss();
 
 var now = Date.now();
 var fnValuesNs = "fnValues" + now;
@@ -5926,15 +5901,13 @@ var functionPlugin = function functionPlugin() {
         if (typeof value !== 'function') continue;
         delete style[prop];
         fnValues[prop] = value;
-      } // $FlowFixMe[prop-missing]
-
+      }
 
       rule[fnValuesNs] = fnValues;
       return style;
     },
     onUpdate: function onUpdate(data, rule, sheet, options) {
-      var styleRule = rule; // $FlowFixMe[prop-missing]
-
+      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.
 
@@ -5951,8 +5924,7 @@ var functionPlugin = function functionPlugin() {
             }
           }
         }
-      } // $FlowFixMe[prop-missing]
-
+      }
 
       var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.
 
@@ -5976,9 +5948,6 @@ function () {
   function GlobalContainerRule(key, styles, options) {
     this.type = 'global';
     this.at = at;
-    this.rules = void 0;
-    this.options = void 0;
-    this.key = void 0;
     this.isProcessed = false;
     this.key = key;
     this.options = options;
@@ -6038,10 +6007,7 @@ function () {
   function GlobalPrefixedRule(key, style, options) {
     this.type = 'global';
     this.at = at;
-    this.options = void 0;
-    this.rule = void 0;
     this.isProcessed = false;
-    this.key = void 0;
     this.key = key;
     this.options = options;
     var selector = key.substr(atPrefix.length);
@@ -6103,9 +6069,6 @@ function handlePrefixedGlobalRule(rule, sheet) {
 }
 /**
  * Convert nested rules to separate, remove them from original styles.
- *
- * @param {Rule} rule
- * @api public
  */
 
 
@@ -6153,9 +6116,6 @@ var parentRegExp = /&/g;
 var refRegExp = /\$([\w-]+)/g;
 /**
  * Convert nested rules to separate, remove them from original styles.
- *
- * @param {Rule} rule
- * @api public
  */
 
 function jssNested() {
@@ -6165,7 +6125,6 @@ function jssNested() {
       var rule = container.getRule(key) || sheet && sheet.getRule(key);
 
       if (rule) {
-        rule = rule;
         return rule.selector;
       }
 
@@ -6196,8 +6155,7 @@ function jssNested() {
   function getOptions(rule, container, prevOptions) {
     // Options has been already created, now we only increase index.
     if (prevOptions) return _extends$1({}, prevOptions, {
-      index: prevOptions.index + 1 // $FlowFixMe[prop-missing]
-
+      index: prevOptions.index + 1
     });
     var nestingLevel = rule.options.nestingLevel;
     nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
@@ -6237,11 +6195,7 @@ function jssNested() {
         }));
       } else if (isNestedConditional) {
         // Place conditional right after the parent rule to ensure right ordering.
-        container.addRule(prop, {}, options) // Flow expects more options but they aren't required
-        // And flow doesn't know this will always be a StyleRule which has the addRule method
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
-        .addRule(styleRule.key, style[prop], {
+        container.addRule(prop, {}, options).addRule(styleRule.key, style[prop], {
           selector: styleRule.selector
         });
       }
@@ -6277,9 +6231,6 @@ function hyphenateStyleName(name) {
 
 /**
  * Convert camel cased property names to dash separated.
- *
- * @param {Object} style
- * @return {Object}
  */
 
 function convertCase(style) {
@@ -6298,8 +6249,6 @@ function convertCase(style) {
 }
 /**
  * Allow camel cased property names by converting them back to dasherized.
- *
- * @param {Rule} rule
  */
 
 
@@ -6341,8 +6290,6 @@ var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
 var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
 /**
  * Generated jss-plugin-default-unit CSS property units
- *
- * @type object
  */
 
 var defaultUnits = {
@@ -6501,6 +6448,7 @@ var defaultUnits = {
 /**
  * Clones the object and adds a camel cased property version.
  */
+
 function addCamelCasedVersion(obj) {
   var regExp = /(-[a-z])/g;
 
@@ -6510,9 +6458,9 @@ function addCamelCasedVersion(obj) {
 
   var newObj = {};
 
-  for (var _key in obj) {
-    newObj[_key] = obj[_key];
-    newObj[_key.replace(regExp, replace)] = obj[_key];
+  for (var key in obj) {
+    newObj[key] = obj[key];
+    newObj[key.replace(regExp, replace)] = obj[key];
   }
 
   return newObj;
@@ -7156,8 +7104,6 @@ function supportedValue(property, value) {
 
 /**
  * Add vendor prefix to a property name when needed.
- *
- * @api public
  */
 
 function jssVendorPrefixer() {
@@ -7324,7 +7270,7 @@ function useTheme$1() {
   return theme;
 }
 
-var jss = create(jssPreset()); // Use a singleton or the provided one by the context.
+var jss = createJss(jssPreset()); // Use a singleton or the provided one by the context.
 //
 // The counter-based approach doesn't tolerate any mistake.
 // It's much safer to use the same counter everywhere.
@@ -7386,7 +7332,7 @@ function StylesProvider(props) {
       head.insertBefore(injectFirstNode, head.firstChild);
     }
 
-    context.jss = create({
+    context.jss = createJss({
       plugins: jssPreset().plugins,
       insertionPoint: injectFirstNode
     });
@@ -30949,7 +30895,7 @@ function ChevronDownIcon(props) {
         React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.00001 6.08008L3.20001 6.88008L8.00001 11.6801L12.8 6.88008L12 6.08008L8.00001 10.0801L4.00001 6.08008Z", fill: "currentColor" })));
 }
 
-var useStyles$y = makeStyles(function (theme) {
+var useStyles$z = makeStyles(function (theme) {
     return createStyles({
         root: function (props) { return ({
             backgroundColor: props.bgColor || theme.palette.grey[200]
@@ -30957,7 +30903,7 @@ var useStyles$y = makeStyles(function (theme) {
     });
 });
 var AccordionSummary = function (props) {
-    var classes = useStyles$y({ bgColor: props.bgColor });
+    var classes = useStyles$z({ bgColor: props.bgColor });
     return (React__default.createElement(MuiAccordionSummary, __assign$1({ className: classes.root }, props, { expandIcon: React__default.createElement(ChevronDownIcon, { fontSize: 'small' }) })));
 };
 
@@ -33201,7 +33147,7 @@ var common = {
     opacity: opacity
 };
 
-var useStyles$x = makeStyles({
+var useStyles$y = makeStyles({
     root: {
         "&.gds-text-primary": {
             color: common.brand.primary.main,
@@ -33234,7 +33180,7 @@ var useStyles$x = makeStyles({
 });
 var Typography = React__default.forwardRef(function (props, ref) {
     var color = props.color, upperCase = props.upperCase, rest = __rest(props, ["color", "upperCase"]);
-    var classes = useStyles$x(props);
+    var classes = useStyles$y(props);
     var colorProp;
     switch (color) {
         case 'primary':
@@ -33267,7 +33213,7 @@ var Typography = React__default.forwardRef(function (props, ref) {
     return (React__default.createElement(Typography$2, __assign$1({ ref: ref }, rest, { className: clsx(classes.root, colorProp, upperCase ? 'gds-text-uppercase' : '') })));
 });
 
-var useStyles$w = makeStyles({
+var useStyles$x = makeStyles({
     root: {
         '&.gds-divider': {
             marginTop: 2,
@@ -33285,7 +33231,7 @@ var useStyles$w = makeStyles({
 });
 var Divider = function (props) {
     var orientation = props.orientation, rest = __rest(props, ["orientation"]);
-    var classes = useStyles$w();
+    var classes = useStyles$x();
     var variantProp;
     switch (orientation) {
         case 'horizontal':
@@ -33300,7 +33246,7 @@ var Divider = function (props) {
     return (React__default.createElement(Divider$2, __assign$1({}, rest, { className: clsx(classes.root, 'gds-divider', variantProp) })));
 };
 
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$w = makeStyles(function (theme) {
     return createStyles({
         inputRoot: {
             '& > *': {
@@ -33387,7 +33333,7 @@ var useStyles$v = makeStyles(function (theme) {
 });
 var Autocomplete = function (_a) {
     var label = _a.label, placeholder = _a.placeholder, _b = _a.platform, platform = _b === void 0 ? 'desktop' : _b, actionLabel = _a.actionLabel, actionClick = _a.actionClick, onChange = _a.onChange, bottomButtonHeight = _a.bottomButtonHeight, rest = __rest(_a, ["label", "placeholder", "platform", "actionLabel", "actionClick", "onChange", "bottomButtonHeight"]);
-    var classes = useStyles$v({ platform: platform, bottomButtonHeight: bottomButtonHeight });
+    var classes = useStyles$w({ platform: platform, bottomButtonHeight: bottomButtonHeight });
     var _c = useState(placeholder), inputPlaceholder = _c[0], setInputPlaceholder = _c[1];
     var root = useRef(null);
     var onKeyDownHandler = function (event) {
@@ -33420,7 +33366,7 @@ var Autocomplete = function (_a) {
             }, onKeyDown: onKeyDownHandler, ref: root }, rest))));
 };
 
-var useStyles$u = makeStyles(function () {
+var useStyles$v = makeStyles(function () {
     return createStyles({
         sizeSmall: {
             width: 18,
@@ -33451,7 +33397,7 @@ var useStyles$u = makeStyles(function () {
 var Avatar = function (props) {
     var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, rest = __rest(props, ["tooltip", "tooltipPlacement"]);
     var placement = tooltipPlacement !== undefined ? tooltipPlacement : "top";
-    var classes = useStyles$u(props);
+    var classes = useStyles$v(props);
     var sizeProp;
     var colorProp;
     switch (rest.size) {
@@ -33686,7 +33632,7 @@ var pallette$1 = {
 };
 var pallettes$1 = __assign$1({ pallette: pallette$1 }, common);
 
-var useStyles$t = makeStyles(createStyles({
+var useStyles$u = makeStyles(createStyles({
     root: {
         "&.gds-drawer-menu-item": {
             borderRadius: '0.5rem',
@@ -33759,7 +33705,7 @@ var useStyles$t = makeStyles(createStyles({
 }));
 var DrawerMenu = React__default.forwardRef(function (props, ref) {
     var children = props.children, startAdornment = props.startAdornment, submenu = props.submenu, _a = props.variant, variant = _a === void 0 ? 'light' : _a, value = props.value, open = props.open, expand = props.expand, rest = __rest(props, ["children", "startAdornment", "submenu", "variant", "value", "open", "expand"]);
-    var classes = useStyles$t();
+    var classes = useStyles$u();
     var variantProp;
     switch (variant) {
         case 'light':
@@ -33876,7 +33822,7 @@ var typography$1 = {
 };
 
 // import Tooltip from '../Tooltip/Tooltip';
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$t = makeStyles(function (theme) {
     return createStyles({
         avatarBorder: {
             '& .MuiAvatar-root, & .MuiAvatarGroup-avatar': {
@@ -33941,7 +33887,7 @@ var useStyles$s = makeStyles(function (theme) {
     });
 });
 var AvatarsGroup = function (props) {
-    var classes = useStyles$s(props);
+    var classes = useStyles$t(props);
     props.color; var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, defaultProps = __rest(props, ["color", "tooltip", "tooltipPlacement"]);
     var colorProp;
     switch (props.color) {
@@ -33990,7 +33936,7 @@ var Box = function (props) {
     return (React__default.createElement(Box$2, __assign$1({}, props)));
 };
 
-var useStyles$r = makeStyles(function (theme) {
+var useStyles$s = makeStyles(function (theme) {
     return createStyles({
         root: {
             "&.gds-button--danger": {}
@@ -33998,7 +33944,7 @@ var useStyles$r = makeStyles(function (theme) {
     });
 });
 var Button = function (props) {
-    var classes = useStyles$r(props);
+    var classes = useStyles$s(props);
     var isLoading = props.isLoading, isDanger = props.isDanger, defaultProps = __rest(props, ["isLoading", "isDanger"]);
     return (React__default.createElement(Button$2, __assign$1({ disableElevation: true, disableRipple: true }, defaultProps, { onClick: defaultProps.onClick, ref: defaultProps.refprop, className: clsx(classes.root, isDanger ? ' gds-button--danger' : '') }), !isLoading ? defaultProps.children : React__default.createElement(CircularProgress$1, { size: 16, color: "inherit" })));
 };
@@ -34016,7 +33962,7 @@ function CrossIcon(props) {
         React__default.createElement("path", { stroke: "currentColor", d: "M8.012 15.875L15.887 8M15.887 15.976L8.012 8.101" })));
 }
 
-var useStyles$q = makeStyles({
+var useStyles$r = makeStyles({
     root: {
         '&.gds-chip-rounded': {
             borderRadius: 50,
@@ -34028,7 +33974,7 @@ var useStyles$q = makeStyles({
     },
 });
 var Chip = function (props) {
-    var classes = useStyles$q();
+    var classes = useStyles$r();
     var variant = props.variant, transparent = props.transparent, rounded = props.rounded, defaultProps = __rest(props, ["variant", "transparent", "rounded"]);
     var variantProp;
     switch (variant) {
@@ -34056,7 +34002,7 @@ var Chip = function (props) {
     return (React__default.createElement(MuiChip, __assign$1({}, defaultProps, { size: "small", onDelete: defaultProps.onDelete, deleteIcon: React__default.createElement(CrossIcon, null), className: clsx(variantProp, classes.root, transparent ? 'gds-chip-transparent' : '', rounded ? 'gds-chip-rounded' : '') })));
 };
 
-var useStyles$p = makeStyles({
+var useStyles$q = makeStyles({
     root: {
         "&.gds-card": {
             cursor: 'pointer'
@@ -34064,7 +34010,7 @@ var useStyles$p = makeStyles({
     },
 });
 var Card = function (props) {
-    var classes = useStyles$p();
+    var classes = useStyles$q();
     var active = props.active, children = props.children; __rest(props, ["active", "children"]);
     return (React__default.createElement(MuiCard, { elevation: 0, className: clsx(classes.root, 'gds-card', active ? 'gds-card--active' : '') }, children));
 };
@@ -34090,7 +34036,7 @@ var Input = function (_a) {
         helperText && React__default.createElement(FormHelperText$1, { error: error }, helperText)));
 };
 
-var useStyles$o = makeStyles(function () { return createStyles({
+var useStyles$p = makeStyles(function () { return createStyles({
     root: {
         width: function (props) { return props.width ? props.width : ''; }
     },
@@ -34101,7 +34047,7 @@ var useStyles$o = makeStyles(function () { return createStyles({
 }); });
 var Dropdown = function (_a) {
     var children = _a.children, _b = _a.elevation, elevation = _b === void 0 ? 3 : _b, _c = _a.align, align = _c === void 0 ? 'right' : _c, label = _a.label, width = _a.width, _d = _a.size, size = _d === void 0 ? 'medium' : _d, disabled = _a.disabled, _e = _a.variant, variant = _e === void 0 ? 'dropdown' : _e, fullWidth = _a.fullWidth, rest = __rest(_a, ["children", "elevation", "align", "label", "width", "size", "disabled", "variant", "fullWidth"]);
-    var classes = useStyles$o({ width: width });
+    var classes = useStyles$p({ width: width });
     var isDefinedWidth = function (definedWidth) {
         return typeof definedWidth !== 'undefined' ? 'MuiInputBase-definedWidth' : '';
     };
@@ -34145,7 +34091,7 @@ var EmptyState = function (_a) {
             React__default.createElement(Typography$2, { color: 'textSecondary', variant: 'body1' }, description))));
 };
 
-var useStyles$n = makeStyles(function (theme) { return ({
+var useStyles$o = makeStyles(function (theme) { return ({
     root: {
         "&.gds-formgroup": {
             width: '100%'
@@ -34161,11 +34107,11 @@ var useStyles$n = makeStyles(function (theme) { return ({
 }); });
 var FormGroup = function (_a) {
     var children = _a.children, _b = _a.spacing, spacing = _b === void 0 ? 0 : _b, _c = _a.alignItems, alignItems = _c === void 0 ? 'flex-start' : _c, _d = _a.margin, margin = _d === void 0 ? false : _d, props = __rest(_a, ["children", "spacing", "alignItems", "margin"]);
-    var classes = useStyles$n({ spacing: spacing, alignItems: alignItems });
+    var classes = useStyles$o({ spacing: spacing, alignItems: alignItems });
     return (React__default.createElement(MuiFormGroup, __assign$1({ className: clsx(classes.root, 'gds-formgroup', margin ? 'formGroupMargin' : '') }, props), children));
 };
 
-var useStyles$m = makeStyles({
+var useStyles$n = makeStyles({
     root: {
         "&.form-container": {
             display: "grid",
@@ -34177,11 +34123,11 @@ var useStyles$m = makeStyles({
     },
 });
 var FormContainer = function (props) {
-    var classes = useStyles$m(props);
+    var classes = useStyles$n(props);
     return (React__default.createElement("form", { onSubmit: props.onSubmit, className: clsx(classes.root, "form-container") }, props.children));
 };
 
-var useStyles$l = makeStyles({
+var useStyles$m = makeStyles({
     root: {
         "&.form-body": {
             display: 'flex',
@@ -34202,7 +34148,7 @@ var useStyles$l = makeStyles({
 });
 var FormBody = function (props) {
     var children = props.children;
-    var classes = useStyles$l(props);
+    var classes = useStyles$m(props);
     return (React__default.createElement("div", { className: clsx(classes.root, "form-body") }, children));
 };
 
@@ -34221,12 +34167,16 @@ var IconButton = React__default.forwardRef(function (props, ref) {
     return (React__default.createElement(MuiIconButton, __assign$1({}, defaultProps, { ref: ref }), children));
 });
 
+var Icon = function (props) {
+    return (React__default.createElement(SvgIcon$1, __assign$1({}, props)));
+};
+
 function LawconnectIcon(props) {
     return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", width: props.size + "px", viewBox: "0 0 141 140" },
         React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.163 119.104a69.739 69.739 0 0049.313 20.426h.133a69.68 69.68 0 0064.35-43.067 69.663 69.663 0 005.281-26.673h-33.528v.042a36.23 36.23 0 01-22.382 33.464 36.236 36.236 0 11-13.853-69.718V.05a69.74 69.74 0 00-49.314 119.054zm119.049-95.585c0 12.962-10.507 23.47-23.469 23.47-12.962 0-23.47-10.508-23.47-23.47S103.782.049 116.744.049s23.469 10.508 23.469 23.47z", fill: "#ecedef" })));
 }
 
-var useStyles$k = makeStyles({
+var useStyles$l = makeStyles({
     root: {
         '&.gds-header': {
             overflow: "hidden",
@@ -34291,21 +34241,21 @@ var useStyles$k = makeStyles({
     },
 });
 var FormHeader = React__default.forwardRef(function (props, ref) {
-    var classes = useStyles$k();
+    var classes = useStyles$l();
     return (React__default.createElement(Box$2, { className: clsx(classes.root, 'gds-header', props.fixed ? 'gds-header-fixed' : '') },
         React__default.createElement("div", { className: clsx(classes.root, 'gds-header_accent') },
             React__default.createElement(LawconnectIcon, { size: "260" })),
         React__default.createElement(Box$2, { className: clsx(classes.root, 'gds-header_detail') },
             React__default.createElement(Grid$2, { item: true, xs: 5 }, props.platformWeb ? (React__default.createElement(Typography, { color: "default", variant: "body2", upperCase: true }, props.title)) : (React__default.createElement(Typography, { color: "primaryLight", variant: "h2", upperCase: true }, props.title))),
             React__default.createElement(Grid$2, { item: true, xs: 7 },
-                React__default.createElement(Grid$2, { container: true, alignItems: "center", justify: "flex-end", className: clsx(classes.root, 'gds-header_info') },
+                React__default.createElement(Grid$2, { container: true, alignItems: "center", justifyContent: "flex-end", className: clsx(classes.root, 'gds-header_info') },
                     props.from ? (React__default.createElement(Typography, { align: "right", variant: "body2" }, props.from)) : null,
                     props.from && props.onClick ? React__default.createElement(Divider, { orientation: "vertical" }) : null,
                     props.onClick ? (React__default.createElement(Button, { color: "primary", variant: "text", onClick: props.onClick }, "Change")) : null))),
         React__default.createElement("div", { className: clsx(classes.root, 'gds-header_content') }, props.children)));
 });
 
-var useStyles$j = makeStyles(function (theme) {
+var useStyles$k = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiListSubheader-root': {
@@ -34325,13 +34275,13 @@ var useStyles$j = makeStyles(function (theme) {
 });
 var MenuHeader = function (props) {
     var children = props.children, rest = __rest(props, ["children"]);
-    var classes = useStyles$j();
+    var classes = useStyles$k();
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement(ListSubheader$2, __assign$1({}, rest), children),
         React__default.createElement(Divider, null)));
 };
 
-var useStyles$i = makeStyles(function (theme) {
+var useStyles$j = makeStyles(function (theme) {
     return createStyles({
         root: {
             color: common.brand.utility.border,
@@ -34347,7 +34297,7 @@ var useStyles$i = makeStyles(function (theme) {
 });
 var MenuContext = function (_a) {
     var title = _a.title, children = _a.children, props = __rest(_a, ["title", "children"]);
-    var classes = useStyles$i();
+    var classes = useStyles$j();
     return (React__default.createElement(MuiMenu, __assign$1({ PopoverClasses: { paper: classes.root } }, props, { elevation: 0 }),
         title ? React__default.createElement(MenuHeader, null, title) : '',
         children));
@@ -34362,7 +34312,7 @@ function TickIcon(props) {
         React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.415 5.744l-.79.79 2.828 2.83 6.01-6.011-.79-.79-5.22 5.22-2.038-2.039z", fill: "currentColor" })));
 }
 
-var useStyles$h = makeStyles(function (theme) {
+var useStyles$i = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDivider-root': {
@@ -34402,7 +34352,7 @@ var useStyles$h = makeStyles(function (theme) {
     });
 });
 var MenuItemSystem = React__default.forwardRef(function (props, ref) {
-    var classes = useStyles$h();
+    var classes = useStyles$i();
     var children = props.children, prependIcon = props.prependIcon, border = props.border, rest = __rest(props, ["children", "prependIcon", "border"]);
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement(MuiMenuItem, __assign$1({ className: classes.MenuItem, ref: ref }, rest),
@@ -34430,7 +34380,7 @@ var ListItemAvatar = function (props) {
     return (React__default.createElement(MuiListItemAvatar, __assign$1({}, props)));
 };
 
-var useStyles$g = makeStyles(function () {
+var useStyles$h = makeStyles(function () {
     return createStyles({
         root: {
             position: 'relative',
@@ -34470,7 +34420,7 @@ var ListItemHoverContent = function (_a) {
         var width2 = contentRef2.current.clientWidth;
         setWidth(width1 > width2 ? width1 : width2);
     }, []);
-    var classes = useStyles$g({ width: width });
+    var classes = useStyles$h({ width: width });
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement("div", { ref: contentRef1, className: classes.hideOnHover }, hideOnHover),
         React__default.createElement("div", { ref: contentRef2, className: classes.showOnHover }, showOnHover)));
@@ -34485,7 +34435,7 @@ var ListSubheader = function (props) {
     return (React__default.createElement(ListSubheader$2, __assign$1({}, rest), children));
 };
 
-var useStyles$f = makeStyles(function (theme) { return createStyles({
+var useStyles$g = makeStyles(function (theme) { return createStyles({
     root: {
         color: common.grey[600],
         '&::after': {
@@ -34524,36 +34474,36 @@ var useStyles$f = makeStyles(function (theme) { return createStyles({
     selected: {}
 }); });
 var Tab = function (props) {
-    var classes = useStyles$f();
+    var classes = useStyles$g();
     return (React__default.createElement(MuiTab, __assign$1({ className: classes.root, component: 'div' }, props)));
 };
 
-var useStyles$e = makeStyles(createStyles({
+var useStyles$f = makeStyles(createStyles({
     root: {
         flexGrow: 1,
         backgroundColor: common.brand.background.tabs,
-        '& .Mui-selected': {
+        "& .Mui-selected": {
         // backgroundColor: common.brand.primary.contrastText,
         },
     },
     tabsRoot: {
         borderBottom: "1px solid " + common.brand.utility.border,
-        '&.MuiTabs-vertical': {
-            borderBottom: 'none',
+        "&.MuiTabs-vertical": {
+            borderBottom: "none",
         },
     },
     indicator: {
-        display: 'none',
+        display: "none",
     },
 }));
 var Tabs = function (_a) {
-    var children = _a.children, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, props = __rest(_a, ["children", "orientation"]);
-    var classes = useStyles$e();
+    var children = _a.children, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, props = __rest(_a, ["children", "orientation"]);
+    var classes = useStyles$f();
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement(MuiTabs, __assign$1({ orientation: orientation }, props, { classes: { root: classes.tabsRoot, indicator: classes.indicator }, indicatorColor: "secondary" }), children)));
 };
 
-var useStyles$d = makeStyles(function (theme) { return createStyles({
+var useStyles$e = makeStyles(function (theme) { return createStyles({
     root: {
         backgroundColor: 'transparent',
         textTransform: 'none',
@@ -34623,7 +34573,7 @@ var TabListItem = function (_a) {
         var width2 = contentRef2.current.clientWidth;
         setWidth(width1 > width2 ? width1 : width2);
     }, []);
-    var classes = useStyles$d({ width: width });
+    var classes = useStyles$e({ width: width });
     return (React__default.createElement(MuiListItem, __assign$1({ className: classes.root, button: true, disableGutters: true }, props),
         React__default.createElement(React__default.Fragment, null,
             children,
@@ -34693,7 +34643,7 @@ var RadioGroup = function (props) {
         React__default.createElement(MuiRadioGroup, __assign$1({}, defaultProps, { "aria-label": props.label, name: props.name, value: radioValue, onChange: handleChange }), props.children)));
 };
 
-var useStyles$c = makeStyles(createStyles({
+var useStyles$d = makeStyles(createStyles({
     container: {
         height: '100%',
         overflow: 'hidden',
@@ -34714,7 +34664,7 @@ var Sidebar = function () { return null; };
 var Main = function () { return null; };
 var SidebarLayout = function (_a) {
     var children = _a.children, _b = _a.sidebarWidth, sidebarWidth = _b === void 0 ? 260 : _b, _c = _a.sidebarBgColor, sidebarBgColor = _c === void 0 ? '#f3f3f3' : _c; __rest(_a, ["children", "sidebarWidth", "sidebarBgColor"]);
-    var classes = useStyles$c();
+    var classes = useStyles$d();
     var sidebar = children.find(function (el) { return el.type === Sidebar; });
     var main = children.find(function (el) { return el.type === Main; });
     return (React__default.createElement(Box$2, { display: "flex", className: classes.container },
@@ -34725,18 +34675,19 @@ SidebarLayout.Sidebar = Sidebar;
 SidebarLayout.Main = Main;
 
 // Generated with util/create-component.js
-var useStyles$b = makeStyles({
+var useStyles$c = makeStyles({
     root: {},
 });
 var Toolbar = function (props) {
-    var classes = useStyles$b();
+    var classes = useStyles$c();
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement(Toolbar$2, null, props.children)));
 };
 
-var Tooltip = function (props) {
-    return (React__default.createElement(Tooltip$2, __assign$1({ arrow: true, TransitionProps: { timeout: 0 } }, props)));
-};
+var Tooltip = React__default.forwardRef(function (props, ref) {
+    var children = props.children, TransitionProps = props.TransitionProps, defaultProps = __rest(props, ["children", "TransitionProps"]);
+    return (React__default.createElement(Tooltip$2, __assign$1({ arrow: true, TransitionProps: __assign$1(__assign$1({}, TransitionProps), { timeout: 0 }), ref: ref }, defaultProps), children));
+});
 
 function DocTypeAppointment$2(props) {
     return (React__default.createElement(SvgIcon$1, __assign$1({}, props, { viewBox: "0 0 48 48" }),
@@ -35563,7 +35514,7 @@ function CrossIcon16(props) {
         React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.27831 7.98596L3.1391 12.1252L3.84621 12.8323L7.98541 8.69307L12.1391 12.8468L12.8462 12.1396L8.69252 7.98596L12.8462 3.83227L12.1391 3.12517L7.98541 7.27885L3.84621 3.13965L3.1391 3.84675L7.27831 7.98596Z" })));
 }
 
-var useStyles$a = makeStyles({
+var useStyles$b = makeStyles({
     root: {
         '&.gds-modal': {
             display: 'flex',
@@ -35680,7 +35631,7 @@ var useStyles$a = makeStyles({
     }
 });
 var Dialog = function (props) {
-    var classes = useStyles$a();
+    var classes = useStyles$b();
     var platform = props.platform, title = props.title, message = props.message, children = props.children; __rest(props, ["platform", "title", "message", "children"]);
     var variantIcon;
     switch (props.variant) {
@@ -35707,15 +35658,46 @@ var Dialog = function (props) {
                 React__default.createElement(DialogActions$1, null, children)))));
 };
 
+// Use theme.shape.borderRadius to detect if it's Desktop or not
+var useStyles$a = makeStyles(function (theme) {
+    return createStyles({
+        bgWrapper: function (props) { return ({
+            background: "url(" + props.bgImageURL + ") no-repeat",
+            backgroundSize: props.bgSize,
+            backgroundPosition: props.bgPosition + " center",
+            backgroundColor: props.bgColor ? props.bgColor + " !important" : '',
+        }); },
+        titleVis: function (props) { return ({
+            display: props.titleVisibility === undefined
+                ? theme.shape.borderRadius === 0
+                    ? ''
+                    : 'none'
+                : props.titleVisibility
+                    ? ''
+                    : 'none',
+        }); },
+        containerDivider: function (props) { return ({
+            borderLeft: props.divider === undefined
+                ? theme.shape.borderRadius === 0
+                    ? "1px solid " + common.brand.utility.border
+                    : 'none'
+                : props.divider
+                    ? "1px solid " + common.brand.utility.border
+                    : 'none',
+        }); },
+    });
+});
 var HeaderToolbar = function (_a) {
-    var title = _a.title, left = _a.left, right = _a.right; __rest(_a, ["title", "left", "right"]);
-    return (React__default.createElement(Toolbar$2, { className: 'gds-header-toolbar' },
-        React__default.createElement(Box$2, { display: 'flex', justifyContent: 'space-between', style: { width: '100%' } },
-            React__default.createElement(Box$2, { display: 'flex', flexDirection: 'column', justifyContent: 'stretch' },
-                title && React__default.createElement(Box$2, { className: 'gds-header-toolbar-title', mb: 3 },
-                    React__default.createElement(Typography, { variant: 'h1', color: 'primary' }, title)),
+    var _b;
+    var title = _a.title, titleVisibility = _a.titleVisibility, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _c = _a.bgPosition, bgPosition = _c === void 0 ? 'center' : _c, bgSize = _a.bgSize, divider = _a.divider; __rest(_a, ["title", "titleVisibility", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize", "divider"]);
+    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, bgPosition: bgPosition, bgSize: bgSize, titleVisibility: titleVisibility, divider: divider });
+    return (React__default.createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper, (_b = {}, _b['with-title'] = titleVisibility, _b)) },
+        React__default.createElement(Box$2, { display: "flex", justifyContent: "space-between", alignItems: "flex-end", style: { width: '100%' } },
+            React__default.createElement(Box$2, { display: "flex", flexDirection: "column", justifyContent: "stretch" },
+                title && (React__default.createElement(Box$2, { className: clsx("gds-header-toolbar-title", classes.titleVis), mb: 3 },
+                    React__default.createElement(Typography, { variant: "h1", color: "primary" }, title))),
                 left),
-            right && React__default.createElement(Box$2, { className: 'gds-buttons-w-divider', borderLeft: "1px solid " + common.brand.utility.border }, right))));
+            right && (React__default.createElement(Box$2, { className: clsx("gds-buttons-w-divider", classes.containerDivider) }, right)))));
 };
 
 function LoaderIcon(props) {
@@ -35728,6 +35710,28 @@ function LoaderIcon(props) {
             React__default.createElement("animate", { attributeName: "opacity", values: "1;.2; 1", begin: ".6", dur: "1.2s", calcMode: "paced", repeatCount: "indefinite" }))));
 }
 
+function SpinnerIcon(props) {
+    return (React__default.createElement(SvgIcon$1, __assign$1({}, props, { viewBox: "0 0 120 120" }),
+        React__default.createElement("g", { transform: "rotate(-90 43 -17)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "b", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "0;a.end" }))),
+        React__default.createElement("g", { transform: "rotate(-30 124.962 -145.406)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "c", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "b.end" }))),
+        React__default.createElement("g", { transform: "rotate(30 -98.962 205.406)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "d", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "c.end" }))),
+        React__default.createElement("g", { transform: "rotate(90 -17 77)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "e", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "d.end-0.02s" }))),
+        React__default.createElement("g", { transform: "rotate(150 4.962 42.594)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "f", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "e.end" }))),
+        React__default.createElement("g", { transform: "rotate(-150 21.038 17.406)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "a", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "f.end" })))));
+}
+
 var useStyles$9 = makeStyles(function (theme) { return ({
     root: {
         zIndex: theme.zIndex.drawer + 1,
@@ -35738,7 +35742,7 @@ var useStyles$9 = makeStyles(function (theme) { return ({
     }
 }); });
 var Loader = function (props) {
-    var background = props.background, transparent = props.transparent, _a = props.position, position = _a === void 0 ? 'fixed' : _a, rest = __rest(props, ["background", "transparent", "position"]);
+    var background = props.background, transparent = props.transparent, spinner = props.spinner, _a = props.position, position = _a === void 0 ? 'fixed' : _a, rest = __rest(props, ["background", "transparent", "spinner", "position"]);
     var classes = useStyles$9({ position: position });
     var variantProp;
     if (transparent) {
@@ -35765,8 +35769,7 @@ var Loader = function (props) {
                 variantProp = "customBackdropLight";
         }
     }
-    return (React__default.createElement(Backdrop$1, __assign$1({}, rest, { className: clsx(variantProp, classes.root), open: props.open }),
-        React__default.createElement(LoaderIcon, { color: "inherit" })));
+    return (React__default.createElement(Backdrop$1, __assign$1({}, rest, { className: clsx(variantProp, classes.root), open: props.open }), spinner ? (React__default.createElement(SpinnerIcon, { color: "inherit" })) : (React__default.createElement(LoaderIcon, { color: "inherit" }))));
 };
 
 var Grid = function (_a) {
@@ -36449,6 +36452,48 @@ var isSameDay$1 = /*#__PURE__*/Object.freeze({
     'default': isSameDay
 });
 
+/**
+ * @name isDate
+ * @category Common Helpers
+ * @summary Is the given value a date?
+ *
+ * @description
+ * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {*} value - the value to check
+ * @returns {boolean} true if the given value is a date
+ * @throws {TypeError} 1 arguments required
+ *
+ * @example
+ * // For a valid date:
+ * const result = isDate(new Date())
+ * //=> true
+ *
+ * @example
+ * // For an invalid date:
+ * const result = isDate(new Date(NaN))
+ * //=> true
+ *
+ * @example
+ * // For some value:
+ * const result = isDate('2014-02-31')
+ * //=> false
+ *
+ * @example
+ * // For an object:
+ * const result = isDate({})
+ * //=> false
+ */
+
+function isDate(value) {
+  requiredArgs(1, arguments);
+  return value instanceof Date || typeof value === 'object' && Object.prototype.toString.call(value) === '[object Date]';
+}
+
 /**
  * @name isValid
  * @category Common Helpers
@@ -36493,24 +36538,29 @@ var isSameDay$1 = /*#__PURE__*/Object.freeze({
  *
  * @example
  * // For the valid date:
- * var result = isValid(new Date(2014, 1, 31))
+ * const result = isValid(new Date(2014, 1, 31))
  * //=> true
  *
  * @example
  * // For the value, convertable into a date:
- * var result = isValid(1393804800000)
+ * const result = isValid(1393804800000)
  * //=> true
  *
  * @example
  * // For the invalid date:
- * var result = isValid(new Date(''))
+ * const result = isValid(new Date(''))
  * //=> false
  */
 
 function isValid(dirtyDate) {
   requiredArgs(1, arguments);
+
+  if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
+    return false;
+  }
+
   var date = toDate(dirtyDate);
-  return !isNaN(date);
+  return !isNaN(Number(date));
 }
 
 var isValid$1 = /*#__PURE__*/Object.freeze({
@@ -36581,20 +36631,21 @@ var formatDistanceLocale = {
     other: 'almost {{count}} years'
   }
 };
-function formatDistance(token, count, options) {
-  options = options || {};
+
+var formatDistance = function (token, count, options) {
   var result;
+  var tokenValue = formatDistanceLocale[token];
 
-  if (typeof formatDistanceLocale[token] === 'string') {
-    result = formatDistanceLocale[token];
+  if (typeof tokenValue === 'string') {
+    result = tokenValue;
   } else if (count === 1) {
-    result = formatDistanceLocale[token].one;
+    result = tokenValue.one;
   } else {
-    result = formatDistanceLocale[token].other.replace('{{count}}', count);
+    result = tokenValue.other.replace('{{count}}', count.toString());
   }
 
-  if (options.addSuffix) {
-    if (options.comparison > 0) {
+  if (options !== null && options !== void 0 && options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
       return 'in ' + result;
     } else {
       return result + ' ago';
@@ -36602,7 +36653,9 @@ function formatDistance(token, count, options) {
   }
 
   return result;
-}
+};
+
+var formatDistance$1 = formatDistance;
 
 function buildFormatLongFn(args) {
   return function () {
@@ -36656,9 +36709,12 @@ var formatRelativeLocale = {
   nextWeek: "eeee 'at' p",
   other: 'P'
 };
-function formatRelative(token, _date, _baseDate, _options) {
+
+var formatRelative = function (token, _date, _baseDate, _options) {
   return formatRelativeLocale[token];
-}
+};
+
+var formatRelative$1 = formatRelative;
 
 function buildLocalizeFn(args) {
   return function (dirtyIndex, dirtyOptions) {
@@ -36774,16 +36830,13 @@ var formattingDayPeriodValues = {
   }
 };
 
-function ordinalNumber(dirtyNumber, _dirtyOptions) {
+var ordinalNumber = function (dirtyNumber, _options) {
   var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example,
   // if they are different for different grammatical genders,
-  // use `options.unit`:
-  //
-  //   var options = dirtyOptions || {}
-  //   var unit = String(options.unit)
+  // use `options.unit`.
   //
-  // where `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
-  // 'day', 'hour', 'minute', 'second'
+  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
+  // 'day', 'hour', 'minute', 'second'.
 
   var rem100 = number % 100;
 
@@ -36801,7 +36854,7 @@ function ordinalNumber(dirtyNumber, _dirtyOptions) {
   }
 
   return number + 'th';
-}
+};
 
 var localize = {
   ordinalNumber: ordinalNumber,
@@ -36813,7 +36866,7 @@ var localize = {
     values: quarterValues,
     defaultWidth: 'wide',
     argumentCallback: function (quarter) {
-      return Number(quarter) - 1;
+      return quarter - 1;
     }
   }),
   month: buildLocalizeFn({
@@ -36833,24 +36886,6 @@ var localize = {
 };
 var localize$1 = localize;
 
-function buildMatchPatternFn(args) {
-  return function (string) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var matchResult = string.match(args.matchPattern);
-    if (!matchResult) return null;
-    var matchedString = matchResult[0];
-    var parseResult = string.match(args.parsePattern);
-    if (!parseResult) return null;
-    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string.slice(matchedString.length);
-    return {
-      value: value,
-      rest: rest
-    };
-  };
-}
-
 function buildMatchFn(args) {
   return function (string) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -36900,6 +36935,24 @@ function findIndex(array, predicate) {
   return undefined;
 }
 
+function buildMatchPatternFn(args) {
+  return function (string) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    var matchedString = matchResult[0];
+    var parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    var rest = string.slice(matchedString.length);
+    return {
+      value: value,
+      rest: rest
+    };
+  };
+}
+
 var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
 var parseOrdinalNumberPattern = /\d+/i;
 var matchEraPatterns = {
@@ -37006,12 +37059,11 @@ var match$1 = match;
  * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
  * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
  */
-
 var locale = {
   code: 'en-US',
-  formatDistance: formatDistance,
+  formatDistance: formatDistance$1,
   formatLong: formatLong$1,
-  formatRelative: formatRelative,
+  formatRelative: formatRelative$1,
   localize: localize$1,
   match: match$1,
   options: {
@@ -38458,28 +38510,28 @@ var unescapedLatinCharacterRegExp$1 = /[a-zA-Z]/;
  * | Day of week (formatting)        | E..EEE  | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 | EEEE    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 | EEEEE   | M, T, W, T, F, S, S               |       |
- * |                                 | EEEEEE  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 | EEEEEE  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | ISO day of week (formatting)    | i       | 1, 2, 3, ..., 7                   | 7     |
  * |                                 | io      | 1st, 2nd, ..., 7th                | 7     |
  * |                                 | ii      | 01, 02, ..., 07                   | 7     |
  * |                                 | iii     | Mon, Tue, Wed, ..., Sun           | 7     |
  * |                                 | iiii    | Monday, Tuesday, ..., Sunday      | 2,7   |
  * |                                 | iiiii   | M, T, W, T, F, S, S               | 7     |
- * |                                 | iiiiii  | Mo, Tu, We, Th, Fr, Su, Sa        | 7     |
+ * |                                 | iiiiii  | Mo, Tu, We, Th, Fr, Sa, Su        | 7     |
  * | Local day of week (formatting)  | e       | 2, 3, 4, ..., 1                   |       |
  * |                                 | eo      | 2nd, 3rd, ..., 1st                | 7     |
  * |                                 | ee      | 02, 03, ..., 01                   |       |
  * |                                 | eee     | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 | eeee    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 | eeeee   | M, T, W, T, F, S, S               |       |
- * |                                 | eeeeee  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 | eeeeee  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | Local day of week (stand-alone) | c       | 2, 3, 4, ..., 1                   |       |
  * |                                 | co      | 2nd, 3rd, ..., 1st                | 7     |
  * |                                 | cc      | 02, 03, ..., 01                   |       |
  * |                                 | ccc     | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 | cccc    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 | ccccc   | M, T, W, T, F, S, S               |       |
- * |                                 | cccccc  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 | cccccc  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | AM, PM                          | a..aa   | AM, PM                            |       |
  * |                                 | aaa     | am, pm                            |       |
  * |                                 | aaaa    | a.m., p.m.                        | 2     |
@@ -41737,28 +41789,28 @@ var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
  * | Day of week (formatting)        |  90 | E..EEE  | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 |     | EEEE    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 |     | EEEEE   | M, T, W, T, F, S, S               |       |
- * |                                 |     | EEEEEE  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 |     | EEEEEE  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | ISO day of week (formatting)    |  90 | i       | 1, 2, 3, ..., 7                   | 5     |
  * |                                 |     | io      | 1st, 2nd, ..., 7th                | 5     |
  * |                                 |     | ii      | 01, 02, ..., 07                   | 5     |
  * |                                 |     | iii     | Mon, Tue, Wed, ..., Sun           | 5     |
  * |                                 |     | iiii    | Monday, Tuesday, ..., Sunday      | 2,5   |
  * |                                 |     | iiiii   | M, T, W, T, F, S, S               | 5     |
- * |                                 |     | iiiiii  | Mo, Tu, We, Th, Fr, Su, Sa        | 5     |
+ * |                                 |     | iiiiii  | Mo, Tu, We, Th, Fr, Sa, Su        | 5     |
  * | Local day of week (formatting)  |  90 | e       | 2, 3, 4, ..., 1                   |       |
  * |                                 |     | eo      | 2nd, 3rd, ..., 1st                | 5     |
  * |                                 |     | ee      | 02, 03, ..., 01                   |       |
  * |                                 |     | eee     | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 |     | eeee    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 |     | eeeee   | M, T, W, T, F, S, S               |       |
- * |                                 |     | eeeeee  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 |     | eeeeee  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | Local day of week (stand-alone) |  90 | c       | 2, 3, 4, ..., 1                   |       |
  * |                                 |     | co      | 2nd, 3rd, ..., 1st                | 5     |
  * |                                 |     | cc      | 02, 03, ..., 01                   |       |
  * |                                 |     | ccc     | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 |     | cccc    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 |     | ccccc   | M, T, W, T, F, S, S               |       |
- * |                                 |     | cccccc  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 |     | cccccc  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | AM, PM                          |  80 | a..aaa  | AM, PM                            |       |
  * |                                 |     | aaaa    | a.m., p.m.                        | 2     |
  * |                                 |     | aaaaa   | a, p                              |       |
@@ -43655,6 +43707,40 @@ var addYears$1 = /*#__PURE__*/Object.freeze({
     'default': addYears
 });
 
+/**
+ * @name subMonths
+ * @category Month Helpers
+ * @summary Subtract the specified number of months from the given date.
+ *
+ * @description
+ * Subtract the specified number of months from the given date.
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the months subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract 5 months from 1 February 2015:
+ * const result = subMonths(new Date(2015, 1, 1), 5)
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+
+function subMonths(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  return addMonths(dirtyDate, -amount);
+}
+
+var subMonths$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': subMonths
+});
+
 var styles = createCommonjsModule(function (module, exports) {
 
 Object.defineProperty(exports, "__esModule", {
@@ -43758,9 +43844,11 @@ var require$$15 = /*@__PURE__*/getAugmentedNamespace(setYear$1);
 
 var require$$16 = /*@__PURE__*/getAugmentedNamespace(addYears$1);
 
+var require$$22 = /*@__PURE__*/getAugmentedNamespace(subMonths$1);
+
 var require$$4 = /*@__PURE__*/getAugmentedNamespace(addMonths$1);
 
-var require$$23 = /*@__PURE__*/getAugmentedNamespace(enUS);
+var require$$24 = /*@__PURE__*/getAugmentedNamespace(enUS);
 
 var Calendar_1 = createCommonjsModule(function (module, exports) {
 
@@ -43821,9 +43909,11 @@ var _eachDayOfInterval = _interopRequireDefault(require$$20);
 
 var _format = _interopRequireDefault(require$$21);
 
+var _subMonths = _interopRequireDefault(require$$22);
+
 var _addMonths = _interopRequireDefault(require$$4);
 
-var _enUS = _interopRequireDefault(require$$23);
+var _enUS = _interopRequireDefault(require$$24);
 
 var _styles = _interopRequireDefault(styles);
 
@@ -43892,6 +43982,16 @@ var Calendar = /*#__PURE__*/function (_PureComponent) {
       var preventUnnecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
 
       if (!props.scroll.enabled) {
+        if (preventUnnecessary && props.preventSnapRefocus) {
+          var focusedDateDiff = (0, _differenceInCalendarMonths.default)(date, _this.state.focusedDate);
+          var isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0;
+          var isAllowedBackward = props.calendarFocus === 'backwards' && focusedDateDiff <= 0;
+
+          if ((isAllowedForward || isAllowedBackward) && Math.abs(focusedDateDiff) < props.months) {
+            return;
+          }
+        }
+
         _this.setState({
           focusedDate: date
         });
@@ -44456,6 +44556,11 @@ var Calendar = /*#__PURE__*/function (_PureComponent) {
         className: (0, _classnames3.default)(this.styles.months, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal)
       }, new Array(this.props.months).fill(null).map(function (_, i) {
         var monthStep = (0, _addMonths.default)(_this5.state.focusedDate, i);
+
+        if (_this5.props.calendarFocus === 'backwards') {
+          monthStep = (0, _subMonths.default)(_this5.state.focusedDate, _this5.props.months - 1 - i);
+        }
+
         return /*#__PURE__*/_react.default.createElement(_Month.default, _extends({}, _this5.props, {
           onPreviewChange: onPreviewChange || _this5.updatePreview,
           preview: preview || _this5.state.preview,
@@ -44513,6 +44618,8 @@ Calendar.defaultProps = {
   editableDateInputs: false,
   dragSelectionEnabled: true,
   fixedHeight: false,
+  calendarFocus: 'forwards',
+  preventSnapRefocus: false,
   ariaLabels: {}
 };
 Calendar.propTypes = {
@@ -44566,6 +44673,8 @@ Calendar.propTypes = {
   editableDateInputs: _propTypes.default.bool,
   dragSelectionEnabled: _propTypes.default.bool,
   fixedHeight: _propTypes.default.bool,
+  calendarFocus: _propTypes.default.string,
+  preventSnapRefocus: _propTypes.default.bool,
   ariaLabels: accessibility.ariaLabelsShape
 };
 var _default = Calendar;
@@ -46570,6 +46679,43 @@ var themeWeb = createTheme({
                 borderRight: 0,
             },
         },
+        MuiAccordion: {
+            root: {
+                '&.MuiPaper-root': {
+                    backgroundColor: 'white',
+                },
+                '&:before': {
+                    backgroundColor: "" + pallettes$1.brand.utility.border,
+                },
+                '&$expanded': {
+                    margin: 0,
+                },
+            },
+        },
+        MuiAccordionSummary: {
+            root: {
+                padding: '0 16px',
+                minHeight: 48,
+                '$expanded &': {
+                    minHeight: 48,
+                },
+            },
+            content: {
+                margin: '4px 0',
+                '$expanded &': {
+                    margin: '4px 0',
+                },
+            },
+            expandIcon: {
+                padding: '6px 12px',
+                transition: 'all 0.3s ease-out',
+            },
+        },
+        MuiAccordionDetails: {
+            root: {
+                padding: 0,
+            },
+        },
         MuiAppBar: {
             root: {
                 color: common.brand.neutral.white,
@@ -47654,15 +47800,15 @@ var themeWeb = createTheme({
                     minHeight: 50,
                     paddingLeft: 16,
                     paddingRight: 16,
-                    '& .gds-header-toolbar-title': {
-                        display: 'none',
-                    },
                     '& .gds-buttons-w-divider': {
-                        borderLeft: 'none',
+                        paddingLeft: 16,
                     },
                     '& .MuiInputBase-root, & .MuiButtonBase-root': {
                         maxHeight: 32,
                     },
+                    '&.with-title': {
+                        padding: 16,
+                    }
                 },
             },
         },
@@ -47826,13 +47972,18 @@ var themeDesktop = createTheme({
                 '&.MuiPaper-root': {
                     backgroundColor: 'white',
                 },
+                '&:before': {
+                    backgroundColor: "" + pallettes.brand.utility.border,
+                },
+                '&$expanded': {
+                    margin: 0,
+                }
             },
         },
         MuiAccordionSummary: {
             root: {
                 padding: '0 10px',
                 minHeight: 32,
-                borderBottom: "1px solid " + common.brand.utility.border,
                 '$expanded &': {
                     minHeight: 32,
                 },
@@ -49004,5 +49155,5 @@ function ReportingIcon(props) {
         React__default.createElement("path", { fillRule: "evenodd", fill: "currentColor", d: "M84.032 23.49l-12.807-5.123a4 4 0 01-6.827-.627l-12.404 2.481a4 4 0 11-7.962-.731l-12.807-5.123A3.994 3.994 0 0128 16c-.9 0-1.731-.297-2.4-.8L11.65 26.36A4 4 0 1110.4 24.8l13.95-11.16a4 4 0 117.618-1.13l12.807 5.124a4 4 0 016.827.627l12.404-2.481a4 4 0 117.962.731l12.807 5.123a4 4 0 11-.743 1.857zM0 88v-8h96v8H0zm4-40h8v24H4V48zm20-16h8v40h-8V32zm20 8h8v32h-8V40zm20-4h8v36h-8V36zm20 8h8v28h-8V44z" })));
 }
 
-export { AccessIcon, Accordion, AccordionDetails, AccordionPanel, AccordionSummary, AccountingIcon, ActivityLog, AppBar, AppointmentCalendar, AssignCurvedIcon, AttachmentIcon, Autocomplete, Avatar, AvatarBusinessIcon, AvatarCompanyIcon, AvatarGovernmentIcon, AvatarPeopleIcon, AvatarPersonIcon, AvatarTrustIcon, AvatarsGroup, BottomListButton, Box, BrowseIcon, Button, ButtonCaretIcon, ButtonFilterIcon, CalendarIcon, Card, Checkbox, ChevronDownIcon, Chip, CrossIcon, CssBaseline, DatePicker, DateRangePicker, Dialog, Divider, DocTypeEmailDraft$2 as DocTypeEmailDraft, DocTypeEmailRecieved, DocTypeEmailSent, Drawer, DrawerMenu, Dropdown, EmailSentIcon, EmptyState, FooterActions, FormBody, FormContainer, FormGroup, FormHeader, Grid, HeaderToolbar, HomeIcon, IconButton, InfoCircleIcon, Input, InputLabel, InsertLinkIcon, LawconnectIcon, LeapLogo, List, ListItem, ListItemAvatar, ListItemHoverContent, ListItemIcon, ListItemText, ListSubheader, Loader, LoaderIcon, Menu, MenuContext, MenuHeader, MenuItem, MenuItemSystem, Modal, ModalActions, ModalContent, ModalTitle, MoreVerticalIcon, NewAppointmentIcon as NewAppoinmentIcon, PoweredByLawconnectLogo, PreviewIcon, Radio, RadioGroup, ReportingIcon, ResponseIcon, RevokeAccessIcon, SearchIcon, SelectFilterEmptyIcon, SelectFilterFilledIcon, SidebarLayout, Switch, Tab, TabListItem, Table, TableBody, TableCell, TableCellIcon, TableContainer, TableFooter, TableHead, TableRow, Tabs, Tag, ThemeProvider, TickIcon, Toolbar, ToolbarButton, Tooltip, TwoColumnLayout, Typography, UserLinkIcon, UserLockIcon, UsersIcon, WarningIcon, baseline, createFilterOptions, themeDesktop, themeWeb };
+export { AccessIcon, Accordion, AccordionDetails, AccordionPanel, AccordionSummary, AccountingIcon, ActivityLog, AppBar, AppointmentCalendar, AssignCurvedIcon, AttachmentIcon, Autocomplete, Avatar, AvatarBusinessIcon, AvatarCompanyIcon, AvatarGovernmentIcon, AvatarPeopleIcon, AvatarPersonIcon, AvatarTrustIcon, AvatarsGroup, BottomListButton, Box, BrowseIcon, Button, ButtonCaretIcon, ButtonFilterIcon, CalendarIcon, Card, Checkbox, ChevronDownIcon, Chip, CrossIcon, CssBaseline, DatePicker, DateRangePicker, Dialog, Divider, DocTypeEmailDraft$2 as DocTypeEmailDraft, DocTypeEmailRecieved, DocTypeEmailSent, Drawer, DrawerMenu, Dropdown, EmailSentIcon, EmptyState, FooterActions, FormBody, FormContainer, FormGroup, FormHeader, Grid, HeaderToolbar, HomeIcon, Icon, IconButton, InfoCircleIcon, Input, InputLabel, InsertLinkIcon, LawconnectIcon, LeapLogo, List, ListItem, ListItemAvatar, ListItemHoverContent, ListItemIcon, ListItemText, ListSubheader, Loader, LoaderIcon, Menu, MenuContext, MenuHeader, MenuItem, MenuItemSystem, Modal, ModalActions, ModalContent, ModalTitle, MoreVerticalIcon, NewAppointmentIcon as NewAppoinmentIcon, PoweredByLawconnectLogo, PreviewIcon, Radio, RadioGroup, ReportingIcon, ResponseIcon, RevokeAccessIcon, SearchIcon, SelectFilterEmptyIcon, SelectFilterFilledIcon, SidebarLayout, Switch, Tab, TabListItem, Table, TableBody, TableCell, TableCellIcon, TableContainer, TableFooter, TableHead, TableRow, Tabs, Tag, ThemeProvider, TickIcon, Toolbar, ToolbarButton, Tooltip, TwoColumnLayout, Typography, UserLinkIcon, UserLockIcon, UsersIcon, WarningIcon, baseline, createFilterOptions, themeDesktop, themeWeb };
 //# sourceMappingURL=index.esm.js.map