@carbon/themes 11.18.0 → 11.19.0

package/umd/index.js

@@ -10,17 +10,14 @@
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
-
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
       enumerableOnly && (symbols = symbols.filter(function (sym) {
         return Object.getOwnPropertyDescriptor(object, sym).enumerable;
       })), keys.push.apply(keys, symbols);
     }
-
     return keys;
   }
-
   function _objectSpread2(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = null != arguments[i] ? arguments[i] : {};
@@ -30,25 +27,22 @@
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
-
     return target;
   }
-
   function _regeneratorRuntime() {
-    /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
-
     _regeneratorRuntime = function () {
       return exports;
     };
-
     var exports = {},
-        Op = Object.prototype,
-        hasOwn = Op.hasOwnProperty,
-        $Symbol = "function" == typeof Symbol ? Symbol : {},
-        iteratorSymbol = $Symbol.iterator || "@@iterator",
-        asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
-        toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-
+      Op = Object.prototype,
+      hasOwn = Op.hasOwnProperty,
+      defineProperty = Object.defineProperty || function (obj, key, desc) {
+        obj[key] = desc.value;
+      },
+      $Symbol = "function" == typeof Symbol ? Symbol : {},
+      iteratorSymbol = $Symbol.iterator || "@@iterator",
+      asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+      toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
     function define(obj, key, value) {
       return Object.defineProperty(obj, key, {
         value: value,
@@ -57,7 +51,6 @@
         writable: !0
       }), obj[key];
     }
-
     try {
       define({}, "");
     } catch (err) {
@@ -65,54 +58,14 @@
         return obj[key] = value;
       };
     }
-
     function wrap(innerFn, outerFn, self, tryLocsList) {
       var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
-          generator = Object.create(protoGenerator.prototype),
-          context = new Context(tryLocsList || []);
-      return generator._invoke = function (innerFn, self, context) {
-        var state = "suspendedStart";
-        return function (method, arg) {
-          if ("executing" === state) throw new Error("Generator is already running");
-
-          if ("completed" === state) {
-            if ("throw" === method) throw arg;
-            return doneResult();
-          }
-
-          for (context.method = method, context.arg = arg;;) {
-            var delegate = context.delegate;
-
-            if (delegate) {
-              var delegateResult = maybeInvokeDelegate(delegate, context);
-
-              if (delegateResult) {
-                if (delegateResult === ContinueSentinel) continue;
-                return delegateResult;
-              }
-            }
-
-            if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
-              if ("suspendedStart" === state) throw state = "completed", context.arg;
-              context.dispatchException(context.arg);
-            } else "return" === context.method && context.abrupt("return", context.arg);
-            state = "executing";
-            var record = tryCatch(innerFn, self, context);
-
-            if ("normal" === record.type) {
-              if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
-              return {
-                value: record.arg,
-                done: context.done
-              };
-            }
-
-            "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
-          }
-        };
-      }(innerFn, self, context), generator;
+        generator = Object.create(protoGenerator.prototype),
+        context = new Context(tryLocsList || []);
+      return defineProperty(generator, "_invoke", {
+        value: makeInvokeMethod(innerFn, self, context)
+      }), generator;
     }
-
     function tryCatch(fn, obj, arg) {
       try {
         return {
@@ -126,25 +79,19 @@
         };
       }
     }
-
     exports.wrap = wrap;
     var ContinueSentinel = {};
-
     function Generator() {}
-
     function GeneratorFunction() {}
-
     function GeneratorFunctionPrototype() {}
-
     var IteratorPrototype = {};
     define(IteratorPrototype, iteratorSymbol, function () {
       return this;
     });
     var getProto = Object.getPrototypeOf,
-        NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+      NativeIteratorPrototype = getProto && getProto(getProto(values([])));
     NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
     var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-
     function defineIteratorMethods(prototype) {
       ["next", "throw", "return"].forEach(function (method) {
         define(prototype, method, function (arg) {
@@ -152,14 +99,12 @@
         });
       });
     }
-
     function AsyncIterator(generator, PromiseImpl) {
       function invoke(method, arg, resolve, reject) {
         var record = tryCatch(generator[method], generator, arg);
-
         if ("throw" !== record.type) {
           var result = record.arg,
-              value = result.value;
+            value = result.value;
           return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
             invoke("next", value, resolve, reject);
           }, function (err) {
@@ -170,90 +115,109 @@
             return invoke("throw", error, resolve, reject);
           });
         }
-
         reject(record.arg);
       }
-
       var previousPromise;
-
-      this._invoke = function (method, arg) {
-        function callInvokeWithMethodAndArg() {
-          return new PromiseImpl(function (resolve, reject) {
-            invoke(method, arg, resolve, reject);
-          });
+      defineProperty(this, "_invoke", {
+        value: function (method, arg) {
+          function callInvokeWithMethodAndArg() {
+            return new PromiseImpl(function (resolve, reject) {
+              invoke(method, arg, resolve, reject);
+            });
+          }
+          return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+        }
+      });
+    }
+    function makeInvokeMethod(innerFn, self, context) {
+      var state = "suspendedStart";
+      return function (method, arg) {
+        if ("executing" === state) throw new Error("Generator is already running");
+        if ("completed" === state) {
+          if ("throw" === method) throw arg;
+          return doneResult();
+        }
+        for (context.method = method, context.arg = arg;;) {
+          var delegate = context.delegate;
+          if (delegate) {
+            var delegateResult = maybeInvokeDelegate(delegate, context);
+            if (delegateResult) {
+              if (delegateResult === ContinueSentinel) continue;
+              return delegateResult;
+            }
+          }
+          if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+            if ("suspendedStart" === state) throw state = "completed", context.arg;
+            context.dispatchException(context.arg);
+          } else "return" === context.method && context.abrupt("return", context.arg);
+          state = "executing";
+          var record = tryCatch(innerFn, self, context);
+          if ("normal" === record.type) {
+            if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+            return {
+              value: record.arg,
+              done: context.done
+            };
+          }
+          "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
         }
-
-        return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
       };
     }
-
     function maybeInvokeDelegate(delegate, context) {
-      var method = delegate.iterator[context.method];
-
-      if (undefined === method) {
-        if (context.delegate = null, "throw" === context.method) {
-          if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
-          context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
-        }
-
-        return ContinueSentinel;
-      }
-
+      var methodName = context.method,
+        method = delegate.iterator[methodName];
+      if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
       var record = tryCatch(method, delegate.iterator, context.arg);
       if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
       var info = record.arg;
       return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
     }
-
     function pushTryEntry(locs) {
       var entry = {
         tryLoc: locs[0]
       };
       1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
     }
-
     function resetTryEntry(entry) {
       var record = entry.completion || {};
       record.type = "normal", delete record.arg, entry.completion = record;
     }
-
     function Context(tryLocsList) {
       this.tryEntries = [{
         tryLoc: "root"
       }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
     }
-
     function values(iterable) {
       if (iterable) {
         var iteratorMethod = iterable[iteratorSymbol];
         if (iteratorMethod) return iteratorMethod.call(iterable);
         if ("function" == typeof iterable.next) return iterable;
-
         if (!isNaN(iterable.length)) {
           var i = -1,
-              next = function next() {
-            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
-
-            return next.value = undefined, next.done = !0, next;
-          };
-
+            next = function next() {
+              for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
+              return next.value = undefined, next.done = !0, next;
+            };
           return next.next = next;
         }
       }
-
       return {
         next: doneResult
       };
     }
-
     function doneResult() {
       return {
         value: undefined,
         done: !0
       };
     }
-
-    return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+    return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
+      value: GeneratorFunctionPrototype,
+      configurable: !0
+    }), defineProperty(GeneratorFunctionPrototype, "constructor", {
+      value: GeneratorFunction,
+      configurable: !0
+    }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
       var ctor = "function" == typeof genFun && genFun.constructor;
       return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
     }, exports.mark = function (genFun) {
@@ -274,17 +238,15 @@
       return this;
     }), define(Gp, "toString", function () {
       return "[object Generator]";
-    }), exports.keys = function (object) {
-      var keys = [];
-
+    }), exports.keys = function (val) {
+      var object = Object(val),
+        keys = [];
       for (var key in object) keys.push(key);
-
       return keys.reverse(), function next() {
         for (; keys.length;) {
           var key = keys.pop();
           if (key in object) return next.value = key, next.done = !1, next;
         }
-
         return next.done = !0, next;
       };
     }, exports.values = values, Context.prototype = {
@@ -301,20 +263,16 @@
       dispatchException: function (exception) {
         if (this.done) throw exception;
         var context = this;
-
         function handle(loc, caught) {
           return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
         }
-
         for (var i = this.tryEntries.length - 1; i >= 0; --i) {
           var entry = this.tryEntries[i],
-              record = entry.completion;
+            record = entry.completion;
           if ("root" === entry.tryLoc) return handle("end");
-
           if (entry.tryLoc <= this.prev) {
             var hasCatch = hasOwn.call(entry, "catchLoc"),
-                hasFinally = hasOwn.call(entry, "finallyLoc");
-
+              hasFinally = hasOwn.call(entry, "finallyLoc");
             if (hasCatch && hasFinally) {
               if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
               if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
@@ -330,13 +288,11 @@
       abrupt: function (type, arg) {
         for (var i = this.tryEntries.length - 1; i >= 0; --i) {
           var entry = this.tryEntries[i];
-
           if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
             var finallyEntry = entry;
             break;
           }
         }
-
         finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
         var record = finallyEntry ? finallyEntry.completion : {};
         return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
@@ -354,19 +310,15 @@
       catch: function (tryLoc) {
         for (var i = this.tryEntries.length - 1; i >= 0; --i) {
           var entry = this.tryEntries[i];
-
           if (entry.tryLoc === tryLoc) {
             var record = entry.completion;
-
             if ("throw" === record.type) {
               var thrown = record.arg;
               resetTryEntry(entry);
             }
-
             return thrown;
           }
         }
-
         throw new Error("illegal catch attempt");
       },
       delegateYield: function (iterable, resultName, nextLoc) {
@@ -378,23 +330,20 @@
       }
     }, exports;
   }
-
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
     }
   }
-
   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);
@@ -403,8 +352,8 @@
     });
     return Constructor;
   }
-
   function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value: value,
@@ -415,22 +364,17 @@
     } else {
       obj[key] = value;
     }
-
     return obj;
   }
-
   function _toConsumableArray(arr) {
     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
-
   function _arrayWithoutHoles(arr) {
     if (Array.isArray(arr)) return _arrayLikeToArray(arr);
   }
-
   function _iterableToArray(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
-
   function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -439,29 +383,21 @@
     if (n === "Map" || n === "Set") return Array.from(o);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
   }
-
   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;
   }
-
   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.");
   }
-
   function _createForOfIteratorHelper(o, allowArrayLike) {
     var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-
     if (!it) {
       if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
         if (it) o = it;
         var i = 0;
-
         var F = function () {};
-
         return {
           s: F,
           n: function () {
@@ -479,13 +415,11 @@
           f: F
         };
       }
-
       throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-
     var normalCompletion = true,
-        didErr = false,
-        err;
+      didErr = false,
+      err;
     return {
       s: function () {
         it = it.call(o);
@@ -508,6 +442,20 @@
       }
     };
   }
+  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);
+  }
 
   /**
    * Adjust a given token's lightness by a specified percentage
@@ -518,13 +466,13 @@
    * @param {integer} shift The number of percentage points (positive or negative) by which to shift the lightness of a token.
    * @returns {string}
    */
-
   function adjustLightness(token, shift) {
     var original = Color__default["default"](token).hsl().object();
     return Color__default["default"](_objectSpread2(_objectSpread2({}, original), {}, {
       l: original.l += shift
     })).round().hex().toLowerCase();
   }
+
   /**
    * Adjust a given token's alpha by a specified amount
    * Example: token = rgba(10, 10, 10, 1.0);
@@ -533,47 +481,44 @@
    * @param {float} alpha
    * @returns {string}
    */
-
   function adjustAlpha(token, alpha) {
     return Color__default["default"](token).rgb().alpha(alpha).string();
   }
   var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
   /**
    * Format a given token into the format expected in CSS/SCSS-based projects.
    * @param {string} token
    * @returns {string}
    */
-
   function formatTokenName(token) {
     var string = '';
-
     for (var i = 0; i < token.length; i++) {
       // If we run into a number, we hit the scale step at the end of a token name
       // and can safely truncate the rest of the token
       if (numbers.indexOf(token[i]) !== -1) {
         string += '-' + token.slice(i);
         break;
-      } // When encountering an uppercase name, we will want to start adding `-`
-      // between words
-
+      }
 
+      // When encountering an uppercase name, we will want to start adding `-`
+      // between words
       if (token[i] === token[i].toUpperCase()) {
         // Check backwards to see if previous letter was also capitalized, if so
         // we are in a special case like UI where each piece should be connected
         if (token[i - 1] && token[i - 1] === token[i - 1].toUpperCase()) {
           string += token[i].toLowerCase();
           continue;
-        } // Otherwise, just concatenate this new part on to the existing string
-
+        }
 
+        // Otherwise, just concatenate this new part on to the existing string
         string += '-' + token[i].toLowerCase();
         continue;
-      } // By default, we add the current character to the output string
-
+      }
 
+      // By default, we add the current character to the output string
       string += token[i];
     }
-
     return string;
   }
 
@@ -584,6 +529,7 @@
    * LICENSE file in the root directory of this source tree.
    */
 
+  // Background
   var background$8 = colors$1.white;
   var backgroundInverse$7 = colors$1.gray80;
   var backgroundBrand$7 = colors$1.blue60;
@@ -591,78 +537,98 @@
   var backgroundHover$7 = adjustAlpha(colors$1.gray50, 0.12);
   var backgroundInverseHover$7 = colors$1.gray80Hover;
   var backgroundSelected$7 = adjustAlpha(colors$1.gray50, 0.2);
-  var backgroundSelectedHover$7 = adjustAlpha(colors$1.gray50, 0.32); // Layer
-  // layer-01
+  var backgroundSelectedHover$7 = adjustAlpha(colors$1.gray50, 0.32);
 
+  // Layer
+  // layer-01
   var layer01$3 = colors$1.gray10;
   var layerActive01$3 = colors$1.gray30;
   var layerHover01$3 = colors$1.gray10Hover;
   var layerSelected01$3 = colors$1.gray20;
-  var layerSelectedHover01$3 = colors$1.gray20Hover; // layer-02
+  var layerSelectedHover01$3 = colors$1.gray20Hover;
 
+  // layer-02
   var layer02$3 = colors$1.white;
   var layerActive02$3 = colors$1.gray30;
   var layerHover02$3 = colors$1.whiteHover;
   var layerSelected02$3 = colors$1.gray20;
-  var layerSelectedHover02$3 = colors$1.gray20Hover; // layer-03
+  var layerSelectedHover02$3 = colors$1.gray20Hover;
 
+  // layer-03
   var layer03$3 = colors$1.gray10;
   var layerActive03$3 = colors$1.gray30;
   var layerHover03$3 = colors$1.gray10Hover;
   var layerSelected03$3 = colors$1.gray20;
-  var layerSelectedHover03$3 = colors$1.gray20Hover; // layer
+  var layerSelectedHover03$3 = colors$1.gray20Hover;
 
+  // layer
   var layerSelectedInverse$7 = colors$1.gray100;
-  var layerSelectedDisabled$7 = colors$1.gray50; // layer-accent-01
+  var layerSelectedDisabled$7 = colors$1.gray50;
 
+  // layer-accent-01
   var layerAccent01$3 = colors$1.gray20;
   var layerAccentActive01$3 = colors$1.gray40;
-  var layerAccentHover01$3 = colors$1.gray20Hover; // layer-accent-02
+  var layerAccentHover01$3 = colors$1.gray20Hover;
 
+  // layer-accent-02
   var layerAccent02$3 = colors$1.gray20;
   var layerAccentActive02$3 = colors$1.gray40;
-  var layerAccentHover02$3 = colors$1.gray20Hover; // layer-accent-03
+  var layerAccentHover02$3 = colors$1.gray20Hover;
 
+  // layer-accent-03
   var layerAccent03$3 = colors$1.gray20;
   var layerAccentActive03$3 = colors$1.gray40;
-  var layerAccentHover03$3 = colors$1.gray20Hover; // Field
-  // field-01
+  var layerAccentHover03$3 = colors$1.gray20Hover;
 
+  // Field
+  // field-01
   var field01$7 = colors$1.gray10;
-  var fieldHover01$3 = colors$1.gray10Hover; // field-02
+  var fieldHover01$3 = colors$1.gray10Hover;
 
+  // field-02
   var field02$7 = colors$1.white;
-  var fieldHover02$3 = colors$1.whiteHover; // field-03
+  var fieldHover02$3 = colors$1.whiteHover;
 
+  // field-03
   var field03$3 = colors$1.gray10;
-  var fieldHover03$3 = colors$1.gray10Hover; // Border
-  // border-subtle-00
+  var fieldHover03$3 = colors$1.gray10Hover;
 
-  var borderSubtle00$3 = colors$1.gray20; // border-subtle-01
+  // Border
+  // border-subtle-00
+  var borderSubtle00$3 = colors$1.gray20;
 
+  // border-subtle-01
   var borderSubtle01$3 = colors$1.gray30;
-  var borderSubtleSelected01$3 = colors$1.gray30; // border-subtle-02
+  var borderSubtleSelected01$3 = colors$1.gray30;
 
+  // border-subtle-02
   var borderSubtle02$3 = colors$1.gray20;
-  var borderSubtleSelected02$3 = colors$1.gray30; // border-subtle-03
+  var borderSubtleSelected02$3 = colors$1.gray30;
 
+  // border-subtle-03
   var borderSubtle03$3 = colors$1.gray30;
-  var borderSubtleSelected03$3 = colors$1.gray30; // border-strong
+  var borderSubtleSelected03$3 = colors$1.gray30;
 
+  // border-strong
   var borderStrong01$3 = colors$1.gray50;
   var borderStrong02$3 = colors$1.gray50;
-  var borderStrong03$3 = colors$1.gray50; // border-tile
+  var borderStrong03$3 = colors$1.gray50;
 
+  // border-tile
   var borderTile01$3 = colors$1.gray30;
   var borderTile02$3 = colors$1.gray40;
-  var borderTile03$3 = colors$1.gray30; // border-inverse
+  var borderTile03$3 = colors$1.gray30;
 
-  var borderInverse$7 = colors$1.gray100; // border-interactive
+  // border-inverse
+  var borderInverse$7 = colors$1.gray100;
 
-  var borderInteractive$7 = colors$1.blue60; // border
+  // border-interactive
+  var borderInteractive$7 = colors$1.blue60;
 
-  var borderDisabled$7 = colors$1.gray30; // Text
+  // border
+  var borderDisabled$7 = colors$1.gray30;
 
+  // Text
   var textPrimary$7 = colors$1.gray100;
   var textSecondary$7 = colors$1.gray70;
   var textPlaceholder$7 = adjustAlpha(textPrimary$7, 0.4);
@@ -671,24 +637,27 @@
   var textInverse$7 = colors$1.white;
   var textOnColor$7 = colors$1.white;
   var textOnColorDisabled$7 = colors$1.gray50;
-  var textDisabled$7 = adjustAlpha(textPrimary$7, 0.25); // Link
+  var textDisabled$7 = adjustAlpha(textPrimary$7, 0.25);
 
+  // Link
   var linkPrimary$7 = colors$1.blue60;
   var linkPrimaryHover$7 = colors$1.blue70;
   var linkSecondary$7 = colors$1.blue70;
   var linkInverse$7 = colors$1.blue40;
   var linkVisited$7 = colors$1.purple60;
   var linkInverseActive$3 = colors$1.gray10;
-  var linkInverseHover$3 = colors$1.blue30; // Icon
+  var linkInverseHover$3 = colors$1.blue30;
 
+  // Icon
   var iconPrimary$7 = colors$1.gray100;
   var iconSecondary$7 = colors$1.gray70;
   var iconInverse$7 = colors$1.white;
   var iconOnColor$7 = colors$1.white;
   var iconOnColorDisabled$7 = colors$1.gray50;
   var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25);
-  var iconInteractive$3 = colors$1.blue60; // Support
+  var iconInteractive$3 = colors$1.blue60;
 
+  // Support
   var supportError$7 = colors$1.red60;
   var supportSuccess$7 = colors$1.green50;
   var supportWarning$7 = colors$1.yellow30;
@@ -699,20 +668,23 @@
   var supportInfoInverse$7 = colors$1.blue50;
   var supportCautionMinor$3 = colors$1.yellow30;
   var supportCautionMajor$3 = colors$1.orange40;
-  var supportCautionUndefined$3 = colors$1.purple60; // Focus
+  var supportCautionUndefined$3 = colors$1.purple60;
 
+  // Focus
   var focus$8 = colors$1.blue60;
   var focusInset$7 = colors$1.white;
-  var focusInverse$7 = colors$1.white; // Skeleton
+  var focusInverse$7 = colors$1.white;
 
+  // Skeleton
   var skeletonBackground$7 = colors$1.whiteHover;
-  var skeletonElement$7 = colors$1.gray30; // Misc
+  var skeletonElement$7 = colors$1.gray30;
 
+  // Misc
   var interactive$7 = colors$1.blue60;
   var highlight$7 = colors$1.blue20;
   var overlay$7 = 'rgba(22, 22, 22, 0.5)';
   var toggleOff$7 = colors$1.gray50;
-  var shadow$7 = 'rgba(0, 0, 0, 0.3)'; // Type
+  var shadow$7 = 'rgba(0, 0, 0, 0.3)';
 
   var white$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -879,7 +851,14 @@
     sizeXLarge: layout$2.sizeXLarge,
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
-    iconSize02: layout$2.iconSize02
+    iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07
   });
 
   /**
@@ -889,6 +868,7 @@
    * LICENSE file in the root directory of this source tree.
    */
 
+  // Background
   var background$7 = colors$1.gray10;
   var backgroundInverse$6 = colors$1.gray80;
   var backgroundBrand$6 = colors$1.blue60;
@@ -896,78 +876,98 @@
   var backgroundHover$6 = adjustAlpha(colors$1.gray50, 0.12);
   var backgroundInverseHover$6 = colors$1.gray80Hover;
   var backgroundSelected$6 = adjustAlpha(colors$1.gray50, 0.2);
-  var backgroundSelectedHover$6 = adjustAlpha(colors$1.gray50, 0.32); // Layer
-  // layer-01
+  var backgroundSelectedHover$6 = adjustAlpha(colors$1.gray50, 0.32);
 
+  // Layer
+  // layer-01
   var layer01$2 = colors$1.white;
   var layerActive01$2 = colors$1.gray30;
   var layerHover01$2 = colors$1.whiteHover;
   var layerSelected01$2 = colors$1.gray20;
-  var layerSelectedHover01$2 = colors$1.gray20Hover; // layer-02
+  var layerSelectedHover01$2 = colors$1.gray20Hover;
 
+  // layer-02
   var layer02$2 = colors$1.gray10;
   var layerActive02$2 = colors$1.gray30;
   var layerHover02$2 = colors$1.gray10Hover;
   var layerSelected02$2 = colors$1.gray20;
-  var layerSelectedHover02$2 = colors$1.gray20Hover; // layer-03
+  var layerSelectedHover02$2 = colors$1.gray20Hover;
 
+  // layer-03
   var layer03$2 = colors$1.white;
   var layerActive03$2 = colors$1.gray30;
   var layerHover03$2 = colors$1.whiteHover;
   var layerSelected03$2 = colors$1.gray20;
-  var layerSelectedHover03$2 = colors$1.gray20Hover; // layer
+  var layerSelectedHover03$2 = colors$1.gray20Hover;
 
+  // layer
   var layerSelectedInverse$6 = colors$1.gray100;
-  var layerSelectedDisabled$6 = colors$1.gray50; // layer-accent-01
+  var layerSelectedDisabled$6 = colors$1.gray50;
 
+  // layer-accent-01
   var layerAccent01$2 = colors$1.gray20;
   var layerAccentActive01$2 = colors$1.gray40;
-  var layerAccentHover01$2 = colors$1.gray20Hover; // layer-accent-02
+  var layerAccentHover01$2 = colors$1.gray20Hover;
 
+  // layer-accent-02
   var layerAccent02$2 = colors$1.gray20;
   var layerAccentActive02$2 = colors$1.gray40;
-  var layerAccentHover02$2 = colors$1.gray20Hover; // layer-accent-03
+  var layerAccentHover02$2 = colors$1.gray20Hover;
 
+  // layer-accent-03
   var layerAccent03$2 = colors$1.gray20;
   var layerAccentActive03$2 = colors$1.gray40;
-  var layerAccentHover03$2 = colors$1.gray20Hover; // Field
-  // field-01
+  var layerAccentHover03$2 = colors$1.gray20Hover;
 
+  // Field
+  // field-01
   var field01$6 = colors$1.white;
-  var fieldHover01$2 = colors$1.whiteHover; // field-02
+  var fieldHover01$2 = colors$1.whiteHover;
 
+  // field-02
   var field02$6 = colors$1.gray10;
-  var fieldHover02$2 = colors$1.gray10Hover; // field-03
+  var fieldHover02$2 = colors$1.gray10Hover;
 
+  // field-03
   var field03$2 = colors$1.white;
-  var fieldHover03$2 = colors$1.whiteHover; // Border
-  // border-subtle-00
+  var fieldHover03$2 = colors$1.whiteHover;
 
-  var borderSubtle00$2 = colors$1.gray30; // border-subtle-01
+  // Border
+  // border-subtle-00
+  var borderSubtle00$2 = colors$1.gray30;
 
+  // border-subtle-01
   var borderSubtle01$2 = colors$1.gray20;
-  var borderSubtleSelected01$2 = colors$1.gray30; // border-subtle-02
+  var borderSubtleSelected01$2 = colors$1.gray30;
 
+  // border-subtle-02
   var borderSubtle02$2 = colors$1.gray30;
-  var borderSubtleSelected02$2 = colors$1.gray30; // border-subtle-03
+  var borderSubtleSelected02$2 = colors$1.gray30;
 
+  // border-subtle-03
   var borderSubtle03$2 = colors$1.gray20;
-  var borderSubtleSelected03$2 = colors$1.gray30; // border-strong
+  var borderSubtleSelected03$2 = colors$1.gray30;
 
+  // border-strong
   var borderStrong01$2 = colors$1.gray50;
   var borderStrong02$2 = colors$1.gray50;
-  var borderStrong03$2 = colors$1.gray50; // border-tile
+  var borderStrong03$2 = colors$1.gray50;
 
+  // border-tile
   var borderTile01$2 = colors$1.gray40;
   var borderTile02$2 = colors$1.gray30;
-  var borderTile03$2 = colors$1.gray40; // border-inverse
+  var borderTile03$2 = colors$1.gray40;
 
-  var borderInverse$6 = colors$1.gray100; // border-interactive
+  // border-inverse
+  var borderInverse$6 = colors$1.gray100;
 
-  var borderInteractive$6 = colors$1.blue60; // border
+  // border-interactive
+  var borderInteractive$6 = colors$1.blue60;
 
-  var borderDisabled$6 = colors$1.gray30; // Text
+  // border
+  var borderDisabled$6 = colors$1.gray30;
 
+  // Text
   var textPrimary$6 = colors$1.gray100;
   var textSecondary$6 = colors$1.gray70;
   var textPlaceholder$6 = adjustAlpha(textPrimary$6, 0.4);
@@ -976,24 +976,27 @@
   var textInverse$6 = colors$1.white;
   var textOnColor$6 = colors$1.white;
   var textOnColorDisabled$6 = colors$1.gray50;
-  var textDisabled$6 = adjustAlpha(textPrimary$6, 0.25); // Link
+  var textDisabled$6 = adjustAlpha(textPrimary$6, 0.25);
 
+  // Link
   var linkPrimary$6 = colors$1.blue60;
   var linkPrimaryHover$6 = colors$1.blue70;
   var linkSecondary$6 = colors$1.blue70;
   var linkInverse$6 = colors$1.blue40;
   var linkVisited$6 = colors$1.purple60;
   var linkInverseActive$2 = colors$1.gray10;
-  var linkInverseHover$2 = colors$1.blue30; // Icon
+  var linkInverseHover$2 = colors$1.blue30;
 
+  // Icon
   var iconPrimary$6 = colors$1.gray100;
   var iconSecondary$6 = colors$1.gray70;
   var iconInverse$6 = colors$1.white;
   var iconOnColor$6 = colors$1.white;
   var iconOnColorDisabled$6 = colors$1.gray50;
   var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25);
-  var iconInteractive$2 = colors$1.blue60; // Support
+  var iconInteractive$2 = colors$1.blue60;
 
+  // Support
   var supportError$6 = colors$1.red60;
   var supportSuccess$6 = colors$1.green50;
   var supportWarning$6 = colors$1.yellow30;
@@ -1004,15 +1007,18 @@
   var supportInfoInverse$6 = colors$1.blue50;
   var supportCautionMinor$2 = colors$1.yellow30;
   var supportCautionMajor$2 = colors$1.orange40;
-  var supportCautionUndefined$2 = colors$1.purple60; // Focus
+  var supportCautionUndefined$2 = colors$1.purple60;
 
+  // Focus
   var focus$7 = colors$1.blue60;
   var focusInset$6 = colors$1.white;
-  var focusInverse$6 = colors$1.white; // Skeleton
+  var focusInverse$6 = colors$1.white;
 
+  // Skeleton
   var skeletonBackground$6 = colors$1.gray10Hover;
-  var skeletonElement$6 = colors$1.gray30; // Misc
+  var skeletonElement$6 = colors$1.gray30;
 
+  // Misc
   var interactive$6 = colors$1.blue60;
   var highlight$6 = colors$1.blue20;
   var overlay$6 = 'rgba(22, 22, 22, 0.5)';
@@ -1184,7 +1190,14 @@
     sizeXLarge: layout$2.sizeXLarge,
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
-    iconSize02: layout$2.iconSize02
+    iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07
   });
 
   /**
@@ -1194,6 +1207,7 @@
    * LICENSE file in the root directory of this source tree.
    */
 
+  // Background
   var background$6 = colors$1.gray90;
   var backgroundInverse$5 = colors$1.gray10;
   var backgroundBrand$5 = colors$1.blue60;
@@ -1201,78 +1215,98 @@
   var backgroundHover$5 = adjustAlpha(colors$1.gray50, 0.16);
   var backgroundInverseHover$5 = colors$1.gray10Hover;
   var backgroundSelected$5 = adjustAlpha(colors$1.gray50, 0.24);
-  var backgroundSelectedHover$5 = adjustAlpha(colors$1.gray50, 0.32); // Layer
-  // layer-01
+  var backgroundSelectedHover$5 = adjustAlpha(colors$1.gray50, 0.32);
 
+  // Layer
+  // layer-01
   var layer01$1 = colors$1.gray80;
   var layerActive01$1 = colors$1.gray60;
   var layerHover01$1 = colors$1.gray80Hover;
   var layerSelected01$1 = colors$1.gray70;
-  var layerSelectedHover01$1 = colors$1.gray70Hover; // layer-02
+  var layerSelectedHover01$1 = colors$1.gray70Hover;
 
+  // layer-02
   var layer02$1 = colors$1.gray70;
   var layerActive02$1 = colors$1.gray50;
   var layerHover02$1 = colors$1.gray70Hover;
   var layerSelected02$1 = colors$1.gray60;
-  var layerSelectedHover02$1 = colors$1.gray60Hover; // layer-03
+  var layerSelectedHover02$1 = colors$1.gray60Hover;
 
+  // layer-03
   var layer03$1 = colors$1.gray60;
   var layerActive03$1 = colors$1.gray80;
   var layerHover03$1 = colors$1.gray60Hover;
   var layerSelected03$1 = colors$1.gray70;
-  var layerSelectedHover03$1 = colors$1.gray70Hover; // layer
+  var layerSelectedHover03$1 = colors$1.gray70Hover;
 
+  // layer
   var layerSelectedInverse$5 = colors$1.gray10;
-  var layerSelectedDisabled$5 = colors$1.gray40; // layer-accent-01
+  var layerSelectedDisabled$5 = colors$1.gray40;
 
+  // layer-accent-01
   var layerAccent01$1 = colors$1.gray70;
   var layerAccentActive01$1 = colors$1.gray50;
-  var layerAccentHover01$1 = colors$1.gray70Hover; // layer-accent-02
+  var layerAccentHover01$1 = colors$1.gray70Hover;
 
+  // layer-accent-02
   var layerAccent02$1 = colors$1.gray60;
   var layerAccentActive02$1 = colors$1.gray80;
-  var layerAccentHover02$1 = colors$1.gray60Hover; // layer-accent-03
+  var layerAccentHover02$1 = colors$1.gray60Hover;
 
+  // layer-accent-03
   var layerAccent03$1 = colors$1.gray50;
   var layerAccentActive03$1 = colors$1.gray70;
-  var layerAccentHover03$1 = colors$1.gray50Hover; // Field
-  // field-01
+  var layerAccentHover03$1 = colors$1.gray50Hover;
 
+  // Field
+  // field-01
   var field01$5 = colors$1.gray80;
-  var fieldHover01$1 = colors$1.gray80Hover; // field-02
+  var fieldHover01$1 = colors$1.gray80Hover;
 
+  // field-02
   var field02$5 = colors$1.gray70;
-  var fieldHover02$1 = colors$1.gray70Hover; // field-03
+  var fieldHover02$1 = colors$1.gray70Hover;
 
+  // field-03
   var field03$1 = colors$1.gray60;
-  var fieldHover03$1 = colors$1.gray60Hover; // Border
-  // border-subtle-00
+  var fieldHover03$1 = colors$1.gray60Hover;
 
-  var borderSubtle00$1 = colors$1.gray70; // border-subtle-01
+  // Border
+  // border-subtle-00
+  var borderSubtle00$1 = colors$1.gray70;
 
+  // border-subtle-01
   var borderSubtle01$1 = colors$1.gray70;
-  var borderSubtleSelected01$1 = colors$1.gray60; // border-subtle-02
+  var borderSubtleSelected01$1 = colors$1.gray60;
 
+  // border-subtle-02
   var borderSubtle02$1 = colors$1.gray60;
-  var borderSubtleSelected02$1 = colors$1.gray50; // border-subtle-03
+  var borderSubtleSelected02$1 = colors$1.gray50;
 
+  // border-subtle-03
   var borderSubtle03$1 = colors$1.gray50;
-  var borderSubtleSelected03$1 = colors$1.gray40; // border-strong
+  var borderSubtleSelected03$1 = colors$1.gray40;
 
+  // border-strong
   var borderStrong01$1 = colors$1.gray50;
   var borderStrong02$1 = colors$1.gray40;
-  var borderStrong03$1 = colors$1.gray30; // border-tile
+  var borderStrong03$1 = colors$1.gray30;
 
+  // border-tile
   var borderTile01$1 = colors$1.gray60;
   var borderTile02$1 = colors$1.gray50;
-  var borderTile03$1 = colors$1.gray40; // border-inverse
+  var borderTile03$1 = colors$1.gray40;
 
-  var borderInverse$5 = colors$1.gray10; // border-interactive
+  // border-inverse
+  var borderInverse$5 = colors$1.gray10;
 
-  var borderInteractive$5 = colors$1.blue50; // border
+  // border-interactive
+  var borderInteractive$5 = colors$1.blue50;
 
-  var borderDisabled$5 = adjustAlpha(colors$1.gray50, 0.5); // Text
+  // border
+  var borderDisabled$5 = adjustAlpha(colors$1.gray50, 0.5);
 
+  // Text
   var textPrimary$5 = colors$1.gray10;
   var textSecondary$5 = colors$1.gray30;
   var textPlaceholder$5 = adjustAlpha(textPrimary$5, 0.4);
@@ -1281,24 +1315,27 @@
   var textInverse$5 = colors$1.gray100;
   var textOnColor$5 = colors$1.white;
   var textOnColorDisabled$5 = adjustAlpha(textOnColor$5, 0.25);
-  var textDisabled$5 = adjustAlpha(textPrimary$5, 0.25); // Link
+  var textDisabled$5 = adjustAlpha(textPrimary$5, 0.25);
 
+  // Link
   var linkPrimary$5 = colors$1.blue40;
   var linkPrimaryHover$5 = colors$1.blue30;
   var linkSecondary$5 = colors$1.blue30;
   var linkInverse$5 = colors$1.blue60;
   var linkVisited$5 = colors$1.purple40;
   var linkInverseActive$1 = colors$1.gray100;
-  var linkInverseHover$1 = colors$1.blue70; // Icon
+  var linkInverseHover$1 = colors$1.blue70;
 
+  // Icon
   var iconPrimary$5 = colors$1.gray10;
   var iconSecondary$5 = colors$1.gray30;
   var iconInverse$5 = colors$1.gray100;
   var iconOnColor$5 = colors$1.white;
   var iconOnColorDisabled$5 = adjustAlpha(iconOnColor$5, 0.25);
   var iconDisabled$5 = adjustAlpha(iconPrimary$5, 0.25);
-  var iconInteractive$1 = colors$1.white; // Support
+  var iconInteractive$1 = colors$1.white;
 
+  // Support
   var supportError$5 = colors$1.red40;
   var supportSuccess$5 = colors$1.green40;
   var supportWarning$5 = colors$1.yellow30;
@@ -1309,15 +1346,18 @@
   var supportInfoInverse$5 = colors$1.blue70;
   var supportCautionMinor$1 = colors$1.yellow30;
   var supportCautionMajor$1 = colors$1.orange40;
-  var supportCautionUndefined$1 = colors$1.purple50; // Focus
+  var supportCautionUndefined$1 = colors$1.purple50;
 
+  // Focus
   var focus$6 = colors$1.white;
   var focusInset$5 = colors$1.gray100;
-  var focusInverse$5 = colors$1.blue60; // Skeleton
+  var focusInverse$5 = colors$1.blue60;
 
+  // Skeleton
   var skeletonBackground$5 = colors$1.gray90Hover;
-  var skeletonElement$5 = colors$1.gray70; // Misc
+  var skeletonElement$5 = colors$1.gray70;
 
+  // Misc
   var interactive$5 = colors$1.blue50;
   var highlight$5 = colors$1.blue70;
   var overlay$5 = colors$1.rgba(colors$1.black, 0.65);
@@ -1489,7 +1529,14 @@
     sizeXLarge: layout$2.sizeXLarge,
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
-    iconSize02: layout$2.iconSize02
+    iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07
   });
 
   /**
@@ -1499,6 +1546,7 @@
    * LICENSE file in the root directory of this source tree.
    */
 
+  // Background
   var background$5 = colors$1.gray100;
   var backgroundInverse$4 = colors$1.gray10;
   var backgroundBrand$4 = colors$1.blue60;
@@ -1506,78 +1554,98 @@
   var backgroundHover$4 = adjustAlpha(colors$1.gray50, 0.16);
   var backgroundInverseHover$4 = colors$1.gray10Hover;
   var backgroundSelected$4 = adjustAlpha(colors$1.gray50, 0.24);
-  var backgroundSelectedHover$4 = adjustAlpha(colors$1.gray50, 0.32); // Layer
-  // layer-01
+  var backgroundSelectedHover$4 = adjustAlpha(colors$1.gray50, 0.32);
 
+  // Layer
+  // layer-01
   var layer01 = colors$1.gray90;
   var layerActive01 = colors$1.gray70;
   var layerHover01 = colors$1.gray90Hover;
   var layerSelected01 = colors$1.gray80;
-  var layerSelectedHover01 = colors$1.gray80Hover; // layer-02
+  var layerSelectedHover01 = colors$1.gray80Hover;
 
+  // layer-02
   var layer02 = colors$1.gray80;
   var layerActive02 = colors$1.gray60;
   var layerHover02 = colors$1.gray80Hover;
   var layerSelected02 = colors$1.gray70;
-  var layerSelectedHover02 = colors$1.gray70Hover; // layer-03
+  var layerSelectedHover02 = colors$1.gray70Hover;
 
+  // layer-03
   var layer03 = colors$1.gray70;
   var layerActive03 = colors$1.gray50;
   var layerHover03 = colors$1.gray70Hover;
   var layerSelected03 = colors$1.gray60;
-  var layerSelectedHover03 = colors$1.gray60Hover; // layer
+  var layerSelectedHover03 = colors$1.gray60Hover;
 
+  // layer
   var layerSelectedInverse$4 = colors$1.gray10;
-  var layerSelectedDisabled$4 = colors$1.gray40; // layer-accent-01
+  var layerSelectedDisabled$4 = colors$1.gray40;
 
+  // layer-accent-01
   var layerAccent01 = colors$1.gray80;
   var layerAccentActive01 = colors$1.gray60;
-  var layerAccentHover01 = colors$1.gray80Hover; // layer-accent-02
+  var layerAccentHover01 = colors$1.gray80Hover;
 
+  // layer-accent-02
   var layerAccent02 = colors$1.gray70;
   var layerAccentActive02 = colors$1.gray50;
-  var layerAccentHover02 = colors$1.gray70Hover; // layer-accent-03
+  var layerAccentHover02 = colors$1.gray70Hover;
 
+  // layer-accent-03
   var layerAccent03 = colors$1.gray60;
   var layerAccentActive03 = colors$1.gray80;
-  var layerAccentHover03 = colors$1.gray60Hover; // Field
-  // field-01
+  var layerAccentHover03 = colors$1.gray60Hover;
 
+  // Field
+  // field-01
   var field01$4 = colors$1.gray90;
-  var fieldHover01 = colors$1.gray90Hover; // field-02
+  var fieldHover01 = colors$1.gray90Hover;
 
+  // field-02
   var field02$4 = colors$1.gray80;
-  var fieldHover02 = colors$1.gray80Hover; // field-03
+  var fieldHover02 = colors$1.gray80Hover;
 
+  // field-03
   var field03 = colors$1.gray70;
-  var fieldHover03 = colors$1.gray70Hover; // Border
-  // border-subtle-00
+  var fieldHover03 = colors$1.gray70Hover;
 
-  var borderSubtle00 = colors$1.gray80; // border-subtle-01
+  // Border
+  // border-subtle-00
+  var borderSubtle00 = colors$1.gray80;
 
+  // border-subtle-01
   var borderSubtle01 = colors$1.gray80;
-  var borderSubtleSelected01 = colors$1.gray70; // border-subtle-02
+  var borderSubtleSelected01 = colors$1.gray70;
 
+  // border-subtle-02
   var borderSubtle02 = colors$1.gray70;
-  var borderSubtleSelected02 = colors$1.gray60; // border-subtle-03
+  var borderSubtleSelected02 = colors$1.gray60;
 
+  // border-subtle-03
   var borderSubtle03 = colors$1.gray60;
-  var borderSubtleSelected03 = colors$1.gray50; // border-strong
+  var borderSubtleSelected03 = colors$1.gray50;
 
+  // border-strong
   var borderStrong01 = colors$1.gray60;
   var borderStrong02 = colors$1.gray50;
-  var borderStrong03 = colors$1.gray40; // border-tile
+  var borderStrong03 = colors$1.gray40;
 
+  // border-tile
   var borderTile01 = colors$1.gray70;
   var borderTile02 = colors$1.gray60;
-  var borderTile03 = colors$1.gray50; // border-inverse
+  var borderTile03 = colors$1.gray50;
 
-  var borderInverse$4 = colors$1.gray10; // border-interactive
+  // border-inverse
+  var borderInverse$4 = colors$1.gray10;
 
-  var borderInteractive$4 = colors$1.blue50; // border
+  // border-interactive
+  var borderInteractive$4 = colors$1.blue50;
 
-  var borderDisabled$4 = adjustAlpha(colors$1.gray50, 0.5); // Text
+  // border
+  var borderDisabled$4 = adjustAlpha(colors$1.gray50, 0.5);
 
+  // Text
   var textPrimary$4 = colors$1.gray10;
   var textSecondary$4 = colors$1.gray30;
   var textPlaceholder$4 = adjustAlpha(textPrimary$4, 0.4);
@@ -1586,24 +1654,27 @@
   var textInverse$4 = colors$1.gray100;
   var textOnColor$4 = colors$1.white;
   var textOnColorDisabled$4 = adjustAlpha(textOnColor$4, 0.25);
-  var textDisabled$4 = adjustAlpha(textPrimary$4, 0.25); // Link
+  var textDisabled$4 = adjustAlpha(textPrimary$4, 0.25);
 
+  // Link
   var linkPrimary$4 = colors$1.blue40;
   var linkPrimaryHover$4 = colors$1.blue30;
   var linkSecondary$4 = colors$1.blue30;
   var linkInverse$4 = colors$1.blue60;
   var linkVisited$4 = colors$1.purple40;
   var linkInverseActive = colors$1.gray100;
-  var linkInverseHover = colors$1.blue70; // Icon
+  var linkInverseHover = colors$1.blue70;
 
+  // Icon
   var iconPrimary$4 = colors$1.gray10;
   var iconSecondary$4 = colors$1.gray30;
   var iconInverse$4 = colors$1.gray100;
   var iconOnColor$4 = colors$1.white;
   var iconOnColorDisabled$4 = adjustAlpha(iconOnColor$4, 0.25);
   var iconDisabled$4 = adjustAlpha(iconPrimary$4, 0.25);
-  var iconInteractive = colors$1.white; // Support
+  var iconInteractive = colors$1.white;
 
+  // Support
   var supportError$4 = colors$1.red50;
   var supportSuccess$4 = colors$1.green40;
   var supportWarning$4 = colors$1.yellow30;
@@ -1614,15 +1685,18 @@
   var supportInfoInverse$4 = colors$1.blue70;
   var supportCautionMinor = colors$1.yellow30;
   var supportCautionMajor = colors$1.orange40;
-  var supportCautionUndefined = colors$1.purple50; // Focus
+  var supportCautionUndefined = colors$1.purple50;
 
+  // Focus
   var focus$5 = colors$1.white;
   var focusInset$4 = colors$1.gray100;
-  var focusInverse$4 = colors$1.blue60; // Skeleton
+  var focusInverse$4 = colors$1.blue60;
 
+  // Skeleton
   var skeletonBackground$4 = adjustLightness(background$5, 7);
-  var skeletonElement$4 = colors$1.gray80; // Misc
+  var skeletonElement$4 = colors$1.gray80;
 
+  // Misc
   var interactive$4 = colors$1.blue50;
   var highlight$4 = colors$1.blue80;
   var overlay$4 = colors$1.rgba(colors$1.black, 0.65);
@@ -1794,7 +1868,14 @@
     sizeXLarge: layout$2.sizeXLarge,
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
-    iconSize02: layout$2.iconSize02
+    iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07
   });
 
   /**
@@ -1839,8 +1920,9 @@
   var inverseSupport04$3 = colors$1.blue50;
   var overlay01$3 = colors$1.rgba(colors$1.gray100, 0.5);
   var danger01$3 = colors$1.red60;
-  var danger02$3 = colors$1.red60; // Interaction states
+  var danger02$3 = colors$1.red60;
 
+  // Interaction states
   var focus$4 = colors$1.blue60;
   var inverseFocusUi$3 = colors$1.white;
   var hoverPrimary$3 = '#0353e9';
@@ -1869,9 +1951,10 @@
   var decorative01$3 = colors$1.gray20;
   var buttonSeparator$4 = '#e0e0e0';
   var skeleton01$3 = '#e5e5e5';
-  var skeleton02$3 = colors$1.gray30; // New color tokens
-  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+  var skeleton02$3 = colors$1.gray30;
 
+  // New color tokens
+  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
   var background$4 = uiBackground$3;
   var layer$4 = ui01$3;
   var layerAccent$3 = ui03$3;
@@ -1946,8 +2029,9 @@
   var iconOnColorDisabled$3 = disabled03$3;
   var layerSelectedDisabled$3 = disabled03$3;
   var skeletonBackground$3 = skeleton01$3;
-  var skeletonElement$3 = skeleton02$3; // Type
+  var skeletonElement$3 = skeleton02$3;
 
+  // Deprecated ☠️
   var brand01$3 = interactive01$3;
   var brand02$3 = interactive02$3;
   var brand03$3 = interactive03$3;
@@ -2191,7 +2275,14 @@
     sizeXLarge: layout$2.sizeXLarge,
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
-    iconSize02: layout$2.iconSize02
+    iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07
   });
 
   /**
@@ -2236,8 +2327,9 @@
   var inverseSupport04$2 = colors$1.blue50;
   var overlay01$2 = colors$1.rgba(colors$1.gray100, 0.5);
   var danger01$2 = colors$1.red60;
-  var danger02$2 = colors$1.red60; // Interaction states
+  var danger02$2 = colors$1.red60;
 
+  // Interaction states
   var focus$3 = colors$1.blue60;
   var inverseFocusUi$2 = colors$1.white;
   var hoverPrimary$2 = '#0353e9';
@@ -2266,9 +2358,10 @@
   var decorative01$2 = colors$1.gray20;
   var buttonSeparator$3 = '#e0e0e0';
   var skeleton01$2 = '#e5e5e5';
-  var skeleton02$2 = colors$1.gray30; // New color tokens
-  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+  var skeleton02$2 = colors$1.gray30;
 
+  // New color tokens
+  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
   var background$3 = uiBackground$2;
   var layer$3 = ui01$2;
   var layerAccent$2 = ui03$2;
@@ -2345,6 +2438,7 @@
   var skeletonBackground$2 = skeleton01$2;
   var skeletonElement$2 = skeleton02$2;
 
+  // Deprecated ☠️
   var brand01$2 = interactive01$2;
   var brand02$2 = interactive02$2;
   var brand03$2 = interactive03$2;
@@ -2588,7 +2682,14 @@
     sizeXLarge: layout$2.sizeXLarge,
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
-    iconSize02: layout$2.iconSize02
+    iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07
   });
 
   /**
@@ -2633,8 +2734,9 @@
   var inverseSupport04$1 = colors$1.blue60;
   var overlay01$1 = colors$1.rgba(colors$1.black, 0.65);
   var danger01$1 = colors$1.red60;
-  var danger02$1 = colors$1.red40; // Interaction states
+  var danger02$1 = colors$1.red40;
 
+  // Interaction states
   var focus$2 = colors$1.white;
   var inverseFocusUi$1 = colors$1.blue60;
   var hoverPrimary$1 = '#0353e9';
@@ -2663,9 +2765,10 @@
   var decorative01$1 = colors$1.gray60;
   var buttonSeparator$2 = '#161616';
   var skeleton01$1 = '#353535';
-  var skeleton02$1 = colors$1.gray70; // New color tokens
-  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+  var skeleton02$1 = colors$1.gray70;
 
+  // New color tokens
+  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
   var background$2 = uiBackground$1;
   var layer$2 = ui01$1;
   var layerAccent$1 = ui03$1;
@@ -2742,6 +2845,7 @@
   var skeletonBackground$1 = skeleton01$1;
   var skeletonElement$1 = skeleton02$1;
 
+  // Deprecated ☠️
   var brand01$1 = interactive01$1;
   var brand02$1 = interactive02$1;
   var brand03$1 = interactive03$1;
@@ -2985,7 +3089,14 @@
     sizeXLarge: layout$2.sizeXLarge,
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
-    iconSize02: layout$2.iconSize02
+    iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07
   });
 
   /**
@@ -3030,8 +3141,9 @@
   var inverseSupport04 = colors$1.blue60;
   var overlay01 = colors$1.rgba(colors$1.black, 0.65);
   var danger01 = colors$1.red60;
-  var danger02 = colors$1.red50; // Interaction states
+  var danger02 = colors$1.red50;
 
+  // Interaction states
   var focus$1 = colors$1.white;
   var inverseFocusUi = colors$1.blue60;
   var hoverPrimary = '#0353e9';
@@ -3060,9 +3172,10 @@
   var decorative01 = colors$1.gray70;
   var buttonSeparator$1 = '#161616';
   var skeleton01 = '#353535';
-  var skeleton02 = colors$1.gray70; // New color tokens
-  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+  var skeleton02 = colors$1.gray70;
 
+  // New color tokens
+  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
   var background$1 = uiBackground;
   var layer$1 = ui01;
   var layerAccent = ui03;
@@ -3139,6 +3252,7 @@
   var skeletonBackground = skeleton01;
   var skeletonElement = skeleton02;
 
+  // Deprecated ☠️
   var brand01 = interactive01;
   var brand02 = interactive02;
   var brand03 = interactive03;
@@ -3382,7 +3496,14 @@
     sizeXLarge: layout$2.sizeXLarge,
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
-    iconSize02: layout$2.iconSize02
+    iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07
   });
 
   /**
@@ -3391,13 +3512,18 @@
    * This source code is licensed under the Apache-2.0 license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  // exported as in JavaScript
 
-  var colors = [// Core
-  'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
-  'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // New color tokens
+  // The color token names for a Carbon theme, value corresponds to what they're
+  // exported as in JavaScript
+  var colors = [
+  // Core
+  'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02',
+  // Interactive states
+  'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02',
+  // New color tokens
   // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
-  'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
+  'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement',
+  // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
   var tokens$3 = {
     colors: colors,
@@ -3514,6 +3640,13 @@
     size2XLarge: layout$2.size2XLarge,
     iconSize01: layout$2.iconSize01,
     iconSize02: layout$2.iconSize02,
+    layout01: layout$2.layout01,
+    layout02: layout$2.layout02,
+    layout03: layout$2.layout03,
+    layout04: layout$2.layout04,
+    layout05: layout$2.layout05,
+    layout06: layout$2.layout06,
+    layout07: layout$2.layout07,
     interactive01: interactive01$3,
     interactive02: interactive02$3,
     interactive03: interactive03$3,
@@ -4097,30 +4230,24 @@
   var Token = /*#__PURE__*/function () {
     function Token(name, properties, state) {
       _classCallCheck(this, Token);
-
       this.kind = 'Token';
       this.name = name;
-
       if (properties) {
         this.properties = properties;
       }
-
       if (state) {
         this.state = state;
       }
     }
-
     _createClass(Token, null, [{
       key: "create",
       value: function create(token) {
         if (typeof token === 'string') {
           return new Token(token);
         }
-
         return new Token(token.name, token.properties, token.state);
       }
     }]);
-
     return Token;
   }();
 
@@ -4135,84 +4262,63 @@
    * ways to get information about the entire group, including properties and
    * states
    */
-
   var TokenGroup = /*#__PURE__*/function (_Symbol$iterator) {
     function TokenGroup(name, tokens, properties) {
       _classCallCheck(this, TokenGroup);
-
       this.kind = 'TokenGroup';
       this.name = name;
-
       if (properties) {
         this.properties = properties;
       }
-
       this.children = tokens.map(function (child) {
         if (child.kind === 'TokenGroup') {
           return child;
         }
-
         return Token.create(child);
       });
     }
-
     _createClass(TokenGroup, [{
       key: _Symbol$iterator,
       value: /*#__PURE__*/_regeneratorRuntime().mark(function value() {
         var _iterator, _step, child;
-
         return _regeneratorRuntime().wrap(function value$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.next = 2;
                 return this;
-
               case 2:
                 _iterator = _createForOfIteratorHelper(this.children);
                 _context.prev = 3;
-
                 _iterator.s();
-
               case 5:
                 if ((_step = _iterator.n()).done) {
                   _context.next = 13;
                   break;
                 }
-
                 child = _step.value;
                 _context.next = 9;
                 return child;
-
               case 9:
                 if (!(child.kind === 'TokenGroup')) {
                   _context.next = 11;
                   break;
                 }
-
                 return _context.delegateYield(child, "t0", 11);
-
               case 11:
                 _context.next = 5;
                 break;
-
               case 13:
                 _context.next = 18;
                 break;
-
               case 15:
                 _context.prev = 15;
                 _context.t1 = _context["catch"](3);
-
                 _iterator.e(_context.t1);
-
               case 18:
                 _context.prev = 18;
-
                 _iterator.f();
-
                 return _context.finish(18);
-
               case 21:
               case "end":
                 return _context.stop();
@@ -4225,56 +4331,46 @@
        * including itself.
        * @returns {Array<Token>}
        */
-
     }, {
       key: "getTokens",
       value: function getTokens() {
         var parentContext = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
         var context = _objectSpread2(_objectSpread2({}, parentContext), {}, {
           groups: parentContext.groups ? parentContext.groups.concat(this) : [this],
           properties: this.properties || parentContext.properties
         });
-
         return this.children.flatMap(function (child) {
           if (child.kind === 'TokenGroup') {
             return child.getTokens(context);
           }
-
           var token = _objectSpread2(_objectSpread2({}, context), {}, {
             name: child.name,
             properties: child.properties || context.properties
           });
-
           if (child.state) {
             token.state = child.state;
           }
-
           return token;
         });
       }
+
       /**
        * Get a specific token from the TokenGroup, or form one of its nested
        * TokenGroups
        * @returns {Token}
        */
-
     }, {
       key: "getToken",
       value: function getToken(tokenOrName) {
         var name = typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
-
         var _iterator2 = _createForOfIteratorHelper(this),
-            _step2;
-
+          _step2;
         try {
           for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
             var child = _step2.value;
-
             if (child.kind === 'TokenGroup') {
               continue;
             }
-
             if (child.name === name) {
               return child;
             }
@@ -4284,30 +4380,25 @@
         } finally {
           _iterator2.f();
         }
-
         return null;
       }
+
       /**
        * Get all the unique groups in the token group, including this group
        * @returns {Array<TokenGroup>}
        */
-
     }, {
       key: "getTokenGroups",
       value: function getTokenGroups() {
         var set = new Set();
-
         var _iterator3 = _createForOfIteratorHelper(this),
-            _step3;
-
+          _step3;
         try {
           for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             var child = _step3.value;
-
             if (child.kind !== 'TokenGroup') {
               continue;
             }
-
             set.add(child);
           }
         } catch (err) {
@@ -4315,33 +4406,27 @@
         } finally {
           _iterator3.f();
         }
-
         return Array.from(set);
       }
+
       /**
        * Get all the unique properties in the token group, including this group
        * @returns {Array<string>}
        */
-
     }, {
       key: "getTokenProperties",
       value: function getTokenProperties() {
         var set = new Set();
-
         var _iterator4 = _createForOfIteratorHelper(this),
-            _step4;
-
+          _step4;
         try {
           for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
             var child = _step4.value;
-
             if (!Array.isArray(child.properties)) {
               continue;
             }
-
             var _iterator5 = _createForOfIteratorHelper(child.properties),
-                _step5;
-
+              _step5;
             try {
               for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
                 var property = _step5.value;
@@ -4358,30 +4443,25 @@
         } finally {
           _iterator4.f();
         }
-
         return Array.from(set);
       }
+
       /**
        * Get all the unique states in the token group, including this group
        * @returns {Array<string>}
        */
-
     }, {
       key: "getTokenStates",
       value: function getTokenStates() {
         var set = new Set();
-
         var _iterator6 = _createForOfIteratorHelper(this),
-            _step6;
-
+          _step6;
         try {
           for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
             var child = _step6.value;
-
             if (child.kind !== 'Token') {
               continue;
             }
-
             if (child.state) {
               set.add(child.state);
             }
@@ -4391,20 +4471,18 @@
         } finally {
           _iterator6.f();
         }
-
         return Array.from(set);
       }
     }], [{
       key: "create",
       value: function create(_ref) {
         var name = _ref.name,
-            properties = _ref.properties,
-            _ref$tokens = _ref.tokens,
-            tokens = _ref$tokens === void 0 ? [] : _ref$tokens;
+          properties = _ref.properties,
+          _ref$tokens = _ref.tokens,
+          tokens = _ref$tokens === void 0 ? [] : _ref$tokens;
         return new TokenGroup(name, tokens, properties);
       }
     }]);
-
     return TokenGroup;
   }(Symbol.iterator);
 
@@ -4550,10 +4628,14 @@
     }, {
       state: 'selected',
       name: 'border-subtle-selected-03'
-    }, // Border strong
-    'border-strong-01', 'border-strong-02', 'border-strong-03', // Border tile
-    'border-tile-01', 'border-tile-02', 'border-tile-03', // Border inverse
-    'border-inverse', // Border interactive
+    },
+    // Border strong
+    'border-strong-01', 'border-strong-02', 'border-strong-03',
+    // Border tile
+    'border-tile-01', 'border-tile-02', 'border-tile-03',
+    // Border inverse
+    'border-inverse',
+    // Border interactive
     'border-interactive', {
       state: 'disabled',
       name: 'border-disabled'
@@ -4620,11 +4702,13 @@
   });
   var group = TokenGroup.create({
     name: 'All',
-    tokens: [background, layer, field, // Interactive
+    tokens: [background, layer, field,
+    // Interactive
     {
       name: 'interactive',
       properties: ['background', 'text']
-    }, border, text, link, icon, support, // Misc
+    }, border, text, link, icon, support,
+    // Misc
     {
       name: 'highlight'
     }, {
@@ -4693,7 +4777,8 @@
   var color = TokenGroup.create({
     name: 'Color',
     properties: [],
-    tokens: ['interactive-01', 'interactive-02', 'interactive-03', 'interactive-04', 'ui-background', 'ui-01', 'ui-02', 'ui-03', 'ui-04', 'ui-05', 'text-01', 'text-02', 'text-03', 'text-04', 'text-05', 'text-error', 'icon-01', 'icon-02', 'icon-03', 'link-01', 'link-02', 'inverse-link', 'field-01', 'field-02', 'inverse-01', 'inverse-02', 'support-01', 'support-02', 'support-03', 'support-04', 'inverse-support-01', 'inverse-support-02', 'inverse-support-03', 'inverse-support-04', 'overlay-01', 'danger-01', 'danger-02', 'focus', 'inverse-focus-ui', 'hover-primary', 'active-primary', 'hover-primary-text', 'hover-secondary', 'active-secondary', 'hover-tertiary', 'active-tertiary', 'hover-ui', 'hover-light-ui', 'hover-selected-ui', 'active-ui', 'active-light-ui', 'selected-ui', 'selected-light-ui', 'inverse-hover-ui', 'hover-danger', 'active-danger', 'hover-row', 'visited-link', 'disabled-01', 'disabled-02', 'disabled-03', 'highlight', 'decorative-01', 'button-separator', 'skeleton-01', 'skeleton-02', // deprecated
+    tokens: ['interactive-01', 'interactive-02', 'interactive-03', 'interactive-04', 'ui-background', 'ui-01', 'ui-02', 'ui-03', 'ui-04', 'ui-05', 'text-01', 'text-02', 'text-03', 'text-04', 'text-05', 'text-error', 'icon-01', 'icon-02', 'icon-03', 'link-01', 'link-02', 'inverse-link', 'field-01', 'field-02', 'inverse-01', 'inverse-02', 'support-01', 'support-02', 'support-03', 'support-04', 'inverse-support-01', 'inverse-support-02', 'inverse-support-03', 'inverse-support-04', 'overlay-01', 'danger-01', 'danger-02', 'focus', 'inverse-focus-ui', 'hover-primary', 'active-primary', 'hover-primary-text', 'hover-secondary', 'active-secondary', 'hover-tertiary', 'active-tertiary', 'hover-ui', 'hover-light-ui', 'hover-selected-ui', 'active-ui', 'active-light-ui', 'selected-ui', 'selected-light-ui', 'inverse-hover-ui', 'hover-danger', 'active-danger', 'hover-row', 'visited-link', 'disabled-01', 'disabled-02', 'disabled-03', 'highlight', 'decorative-01', 'button-separator', 'skeleton-01', 'skeleton-02',
+    // deprecated
     'brand-01', 'brand-02', 'brand-03', 'active-01', 'hover-field', 'danger']
   });
   var type = TokenGroup.create({
@@ -4949,6 +5034,34 @@
     enumerable: true,
     get: function () { return layout$2.iconSize02; }
   });
+  Object.defineProperty(exports, 'layout01', {
+    enumerable: true,
+    get: function () { return layout$2.layout01; }
+  });
+  Object.defineProperty(exports, 'layout02', {
+    enumerable: true,
+    get: function () { return layout$2.layout02; }
+  });
+  Object.defineProperty(exports, 'layout03', {
+    enumerable: true,
+    get: function () { return layout$2.layout03; }
+  });
+  Object.defineProperty(exports, 'layout04', {
+    enumerable: true,
+    get: function () { return layout$2.layout04; }
+  });
+  Object.defineProperty(exports, 'layout05', {
+    enumerable: true,
+    get: function () { return layout$2.layout05; }
+  });
+  Object.defineProperty(exports, 'layout06', {
+    enumerable: true,
+    get: function () { return layout$2.layout06; }
+  });
+  Object.defineProperty(exports, 'layout07', {
+    enumerable: true,
+    get: function () { return layout$2.layout07; }
+  });
   Object.defineProperty(exports, 'size2XLarge', {
     enumerable: true,
     get: function () { return layout$2.size2XLarge; }