@carbon/themes 11.18.0 → 11.19.0

package/es/index.js

@@ -2,22 +2,19 @@ import { white as white$2, gray80, blue60, gray80Hover, gray10, gray30, gray10Ho
 import Color from 'color';
 import { caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, unstable_tokens } from '@carbon/type';
 export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, caption02, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, heading01, heading02, helperText01, helperText02, label01, label02, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
-import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, container01, container02, container03, container04, container05, sizeXSmall, sizeSmall, sizeMedium, sizeLarge, sizeXLarge, size2XLarge, iconSize01, iconSize02, unstable_tokens as unstable_tokens$1 } from '@carbon/layout';
-export { container01, container02, container03, container04, container05, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize01, iconSize02, size2XLarge, sizeLarge, sizeMedium, sizeSmall, sizeXLarge, sizeXSmall, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13 } from '@carbon/layout';
+import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, container01, container02, container03, container04, container05, sizeXSmall, sizeSmall, sizeMedium, sizeLarge, sizeXLarge, size2XLarge, iconSize01, iconSize02, layout01, layout02, layout03, layout04, layout05, layout06, layout07, unstable_tokens as unstable_tokens$1 } from '@carbon/layout';
+export { container01, container02, container03, container04, container05, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize01, iconSize02, layout01, layout02, layout03, layout04, layout05, layout06, layout07, size2XLarge, sizeLarge, sizeMedium, sizeSmall, sizeXLarge, sizeXSmall, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13 } from '@carbon/layout';
 
 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] : {};
@@ -27,25 +24,22 @@ function _objectSpread2(target) {
       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,
@@ -54,7 +48,6 @@ function _regeneratorRuntime() {
       writable: !0
     }), obj[key];
   }
-
   try {
     define({}, "");
   } catch (err) {
@@ -62,54 +55,14 @@ function _regeneratorRuntime() {
       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 {
@@ -123,25 +76,19 @@ function _regeneratorRuntime() {
       };
     }
   }
-
   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) {
@@ -149,14 +96,12 @@ function _regeneratorRuntime() {
       });
     });
   }
-
   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) {
@@ -167,90 +112,109 @@ function _regeneratorRuntime() {
           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) {
@@ -271,17 +235,15 @@ function _regeneratorRuntime() {
     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 = {
@@ -298,20 +260,16 @@ function _regeneratorRuntime() {
     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);
@@ -327,13 +285,11 @@ function _regeneratorRuntime() {
     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);
@@ -351,19 +307,15 @@ function _regeneratorRuntime() {
     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) {
@@ -375,23 +327,20 @@ function _regeneratorRuntime() {
     }
   }, 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);
@@ -400,8 +349,8 @@ function _createClass(Constructor, protoProps, staticProps) {
   });
   return Constructor;
 }
-
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -412,22 +361,17 @@ function _defineProperty(obj, key, value) {
   } 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);
@@ -436,29 +380,21 @@ function _unsupportedIterableToArray(o, minLen) {
   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 () {
@@ -476,13 +412,11 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
         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);
@@ -505,6 +439,20 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
     }
   };
 }
+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
@@ -515,13 +463,13 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
  * @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(token).hsl().object();
   return Color(_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);
@@ -530,47 +478,44 @@ function adjustLightness(token, shift) {
  * @param {float} alpha
  * @returns {string}
  */
-
 function adjustAlpha(token, alpha) {
   return Color(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;
 }
 
@@ -581,6 +526,7 @@ function formatTokenName(token) {
  * LICENSE file in the root directory of this source tree.
  */
 
+// Background
 var background$8 = white$2;
 var backgroundInverse$7 = gray80;
 var backgroundBrand$7 = blue60;
@@ -588,78 +534,98 @@ var backgroundActive$7 = adjustAlpha(gray50, 0.5);
 var backgroundHover$7 = adjustAlpha(gray50, 0.12);
 var backgroundInverseHover$7 = gray80Hover;
 var backgroundSelected$7 = adjustAlpha(gray50, 0.2);
-var backgroundSelectedHover$7 = adjustAlpha(gray50, 0.32); // Layer
-// layer-01
+var backgroundSelectedHover$7 = adjustAlpha(gray50, 0.32);
 
+// Layer
+// layer-01
 var layer01$3 = gray10;
 var layerActive01$3 = gray30;
 var layerHover01$3 = gray10Hover;
 var layerSelected01$3 = gray20;
-var layerSelectedHover01$3 = gray20Hover; // layer-02
+var layerSelectedHover01$3 = gray20Hover;
 
+// layer-02
 var layer02$3 = white$2;
 var layerActive02$3 = gray30;
 var layerHover02$3 = whiteHover;
 var layerSelected02$3 = gray20;
-var layerSelectedHover02$3 = gray20Hover; // layer-03
+var layerSelectedHover02$3 = gray20Hover;
 
+// layer-03
 var layer03$3 = gray10;
 var layerActive03$3 = gray30;
 var layerHover03$3 = gray10Hover;
 var layerSelected03$3 = gray20;
-var layerSelectedHover03$3 = gray20Hover; // layer
+var layerSelectedHover03$3 = gray20Hover;
 
+// layer
 var layerSelectedInverse$7 = gray100;
-var layerSelectedDisabled$7 = gray50; // layer-accent-01
+var layerSelectedDisabled$7 = gray50;
 
+// layer-accent-01
 var layerAccent01$3 = gray20;
 var layerAccentActive01$3 = gray40;
-var layerAccentHover01$3 = gray20Hover; // layer-accent-02
+var layerAccentHover01$3 = gray20Hover;
 
+// layer-accent-02
 var layerAccent02$3 = gray20;
 var layerAccentActive02$3 = gray40;
-var layerAccentHover02$3 = gray20Hover; // layer-accent-03
+var layerAccentHover02$3 = gray20Hover;
 
+// layer-accent-03
 var layerAccent03$3 = gray20;
 var layerAccentActive03$3 = gray40;
-var layerAccentHover03$3 = gray20Hover; // Field
-// field-01
+var layerAccentHover03$3 = gray20Hover;
 
+// Field
+// field-01
 var field01$7 = gray10;
-var fieldHover01$3 = gray10Hover; // field-02
+var fieldHover01$3 = gray10Hover;
 
+// field-02
 var field02$7 = white$2;
-var fieldHover02$3 = whiteHover; // field-03
+var fieldHover02$3 = whiteHover;
 
+// field-03
 var field03$3 = gray10;
-var fieldHover03$3 = gray10Hover; // Border
-// border-subtle-00
+var fieldHover03$3 = gray10Hover;
 
-var borderSubtle00$3 = gray20; // border-subtle-01
+// Border
+// border-subtle-00
+var borderSubtle00$3 = gray20;
 
+// border-subtle-01
 var borderSubtle01$3 = gray30;
-var borderSubtleSelected01$3 = gray30; // border-subtle-02
+var borderSubtleSelected01$3 = gray30;
 
+// border-subtle-02
 var borderSubtle02$3 = gray20;
-var borderSubtleSelected02$3 = gray30; // border-subtle-03
+var borderSubtleSelected02$3 = gray30;
 
+// border-subtle-03
 var borderSubtle03$3 = gray30;
-var borderSubtleSelected03$3 = gray30; // border-strong
+var borderSubtleSelected03$3 = gray30;
 
+// border-strong
 var borderStrong01$3 = gray50;
 var borderStrong02$3 = gray50;
-var borderStrong03$3 = gray50; // border-tile
+var borderStrong03$3 = gray50;
 
+// border-tile
 var borderTile01$3 = gray30;
 var borderTile02$3 = gray40;
-var borderTile03$3 = gray30; // border-inverse
+var borderTile03$3 = gray30;
 
-var borderInverse$7 = gray100; // border-interactive
+// border-inverse
+var borderInverse$7 = gray100;
 
-var borderInteractive$7 = blue60; // border
+// border-interactive
+var borderInteractive$7 = blue60;
 
-var borderDisabled$7 = gray30; // Text
+// border
+var borderDisabled$7 = gray30;
 
+// Text
 var textPrimary$7 = gray100;
 var textSecondary$7 = gray70;
 var textPlaceholder$7 = adjustAlpha(textPrimary$7, 0.4);
@@ -668,24 +634,27 @@ var textError$7 = red60;
 var textInverse$7 = white$2;
 var textOnColor$7 = white$2;
 var textOnColorDisabled$7 = gray50;
-var textDisabled$7 = adjustAlpha(textPrimary$7, 0.25); // Link
+var textDisabled$7 = adjustAlpha(textPrimary$7, 0.25);
 
+// Link
 var linkPrimary$7 = blue60;
 var linkPrimaryHover$7 = blue70;
 var linkSecondary$7 = blue70;
 var linkInverse$7 = blue40;
 var linkVisited$7 = purple60;
 var linkInverseActive$3 = gray10;
-var linkInverseHover$3 = blue30; // Icon
+var linkInverseHover$3 = blue30;
 
+// Icon
 var iconPrimary$7 = gray100;
 var iconSecondary$7 = gray70;
 var iconInverse$7 = white$2;
 var iconOnColor$7 = white$2;
 var iconOnColorDisabled$7 = gray50;
 var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25);
-var iconInteractive$3 = blue60; // Support
+var iconInteractive$3 = blue60;
 
+// Support
 var supportError$7 = red60;
 var supportSuccess$7 = green50;
 var supportWarning$7 = yellow30;
@@ -696,20 +665,23 @@ var supportWarningInverse$7 = yellow30;
 var supportInfoInverse$7 = blue50;
 var supportCautionMinor$3 = yellow30;
 var supportCautionMajor$3 = orange40;
-var supportCautionUndefined$3 = purple60; // Focus
+var supportCautionUndefined$3 = purple60;
 
+// Focus
 var focus$8 = blue60;
 var focusInset$7 = white$2;
-var focusInverse$7 = white$2; // Skeleton
+var focusInverse$7 = white$2;
 
+// Skeleton
 var skeletonBackground$7 = whiteHover;
-var skeletonElement$7 = gray30; // Misc
+var skeletonElement$7 = gray30;
 
+// Misc
 var interactive$7 = blue60;
 var highlight$7 = blue20;
 var overlay$7 = 'rgba(22, 22, 22, 0.5)';
 var toggleOff$7 = 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,
@@ -876,7 +848,14 @@ var white$1 = /*#__PURE__*/Object.freeze({
   sizeXLarge: sizeXLarge,
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
-  iconSize02: iconSize02
+  iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07
 });
 
 /**
@@ -886,6 +865,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
  * LICENSE file in the root directory of this source tree.
  */
 
+// Background
 var background$7 = gray10;
 var backgroundInverse$6 = gray80;
 var backgroundBrand$6 = blue60;
@@ -893,78 +873,98 @@ var backgroundActive$6 = adjustAlpha(gray50, 0.5);
 var backgroundHover$6 = adjustAlpha(gray50, 0.12);
 var backgroundInverseHover$6 = gray80Hover;
 var backgroundSelected$6 = adjustAlpha(gray50, 0.2);
-var backgroundSelectedHover$6 = adjustAlpha(gray50, 0.32); // Layer
-// layer-01
+var backgroundSelectedHover$6 = adjustAlpha(gray50, 0.32);
 
+// Layer
+// layer-01
 var layer01$2 = white$2;
 var layerActive01$2 = gray30;
 var layerHover01$2 = whiteHover;
 var layerSelected01$2 = gray20;
-var layerSelectedHover01$2 = gray20Hover; // layer-02
+var layerSelectedHover01$2 = gray20Hover;
 
+// layer-02
 var layer02$2 = gray10;
 var layerActive02$2 = gray30;
 var layerHover02$2 = gray10Hover;
 var layerSelected02$2 = gray20;
-var layerSelectedHover02$2 = gray20Hover; // layer-03
+var layerSelectedHover02$2 = gray20Hover;
 
+// layer-03
 var layer03$2 = white$2;
 var layerActive03$2 = gray30;
 var layerHover03$2 = whiteHover;
 var layerSelected03$2 = gray20;
-var layerSelectedHover03$2 = gray20Hover; // layer
+var layerSelectedHover03$2 = gray20Hover;
 
+// layer
 var layerSelectedInverse$6 = gray100;
-var layerSelectedDisabled$6 = gray50; // layer-accent-01
+var layerSelectedDisabled$6 = gray50;
 
+// layer-accent-01
 var layerAccent01$2 = gray20;
 var layerAccentActive01$2 = gray40;
-var layerAccentHover01$2 = gray20Hover; // layer-accent-02
+var layerAccentHover01$2 = gray20Hover;
 
+// layer-accent-02
 var layerAccent02$2 = gray20;
 var layerAccentActive02$2 = gray40;
-var layerAccentHover02$2 = gray20Hover; // layer-accent-03
+var layerAccentHover02$2 = gray20Hover;
 
+// layer-accent-03
 var layerAccent03$2 = gray20;
 var layerAccentActive03$2 = gray40;
-var layerAccentHover03$2 = gray20Hover; // Field
-// field-01
+var layerAccentHover03$2 = gray20Hover;
 
+// Field
+// field-01
 var field01$6 = white$2;
-var fieldHover01$2 = whiteHover; // field-02
+var fieldHover01$2 = whiteHover;
 
+// field-02
 var field02$6 = gray10;
-var fieldHover02$2 = gray10Hover; // field-03
+var fieldHover02$2 = gray10Hover;
 
+// field-03
 var field03$2 = white$2;
-var fieldHover03$2 = whiteHover; // Border
-// border-subtle-00
+var fieldHover03$2 = whiteHover;
 
-var borderSubtle00$2 = gray30; // border-subtle-01
+// Border
+// border-subtle-00
+var borderSubtle00$2 = gray30;
 
+// border-subtle-01
 var borderSubtle01$2 = gray20;
-var borderSubtleSelected01$2 = gray30; // border-subtle-02
+var borderSubtleSelected01$2 = gray30;
 
+// border-subtle-02
 var borderSubtle02$2 = gray30;
-var borderSubtleSelected02$2 = gray30; // border-subtle-03
+var borderSubtleSelected02$2 = gray30;
 
+// border-subtle-03
 var borderSubtle03$2 = gray20;
-var borderSubtleSelected03$2 = gray30; // border-strong
+var borderSubtleSelected03$2 = gray30;
 
+// border-strong
 var borderStrong01$2 = gray50;
 var borderStrong02$2 = gray50;
-var borderStrong03$2 = gray50; // border-tile
+var borderStrong03$2 = gray50;
 
+// border-tile
 var borderTile01$2 = gray40;
 var borderTile02$2 = gray30;
-var borderTile03$2 = gray40; // border-inverse
+var borderTile03$2 = gray40;
 
-var borderInverse$6 = gray100; // border-interactive
+// border-inverse
+var borderInverse$6 = gray100;
 
-var borderInteractive$6 = blue60; // border
+// border-interactive
+var borderInteractive$6 = blue60;
 
-var borderDisabled$6 = gray30; // Text
+// border
+var borderDisabled$6 = gray30;
 
+// Text
 var textPrimary$6 = gray100;
 var textSecondary$6 = gray70;
 var textPlaceholder$6 = adjustAlpha(textPrimary$6, 0.4);
@@ -973,24 +973,27 @@ var textError$6 = red60;
 var textInverse$6 = white$2;
 var textOnColor$6 = white$2;
 var textOnColorDisabled$6 = gray50;
-var textDisabled$6 = adjustAlpha(textPrimary$6, 0.25); // Link
+var textDisabled$6 = adjustAlpha(textPrimary$6, 0.25);
 
+// Link
 var linkPrimary$6 = blue60;
 var linkPrimaryHover$6 = blue70;
 var linkSecondary$6 = blue70;
 var linkInverse$6 = blue40;
 var linkVisited$6 = purple60;
 var linkInverseActive$2 = gray10;
-var linkInverseHover$2 = blue30; // Icon
+var linkInverseHover$2 = blue30;
 
+// Icon
 var iconPrimary$6 = gray100;
 var iconSecondary$6 = gray70;
 var iconInverse$6 = white$2;
 var iconOnColor$6 = white$2;
 var iconOnColorDisabled$6 = gray50;
 var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25);
-var iconInteractive$2 = blue60; // Support
+var iconInteractive$2 = blue60;
 
+// Support
 var supportError$6 = red60;
 var supportSuccess$6 = green50;
 var supportWarning$6 = yellow30;
@@ -1001,15 +1004,18 @@ var supportWarningInverse$6 = yellow30;
 var supportInfoInverse$6 = blue50;
 var supportCautionMinor$2 = yellow30;
 var supportCautionMajor$2 = orange40;
-var supportCautionUndefined$2 = purple60; // Focus
+var supportCautionUndefined$2 = purple60;
 
+// Focus
 var focus$7 = blue60;
 var focusInset$6 = white$2;
-var focusInverse$6 = white$2; // Skeleton
+var focusInverse$6 = white$2;
 
+// Skeleton
 var skeletonBackground$6 = gray10Hover;
-var skeletonElement$6 = gray30; // Misc
+var skeletonElement$6 = gray30;
 
+// Misc
 var interactive$6 = blue60;
 var highlight$6 = blue20;
 var overlay$6 = 'rgba(22, 22, 22, 0.5)';
@@ -1181,7 +1187,14 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   sizeXLarge: sizeXLarge,
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
-  iconSize02: iconSize02
+  iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07
 });
 
 /**
@@ -1191,6 +1204,7 @@ var g10$1 = /*#__PURE__*/Object.freeze({
  * LICENSE file in the root directory of this source tree.
  */
 
+// Background
 var background$6 = gray90;
 var backgroundInverse$5 = gray10;
 var backgroundBrand$5 = blue60;
@@ -1198,78 +1212,98 @@ var backgroundActive$5 = adjustAlpha(gray50, 0.4);
 var backgroundHover$5 = adjustAlpha(gray50, 0.16);
 var backgroundInverseHover$5 = gray10Hover;
 var backgroundSelected$5 = adjustAlpha(gray50, 0.24);
-var backgroundSelectedHover$5 = adjustAlpha(gray50, 0.32); // Layer
-// layer-01
+var backgroundSelectedHover$5 = adjustAlpha(gray50, 0.32);
 
+// Layer
+// layer-01
 var layer01$1 = gray80;
 var layerActive01$1 = gray60;
 var layerHover01$1 = gray80Hover;
 var layerSelected01$1 = gray70;
-var layerSelectedHover01$1 = gray70Hover; // layer-02
+var layerSelectedHover01$1 = gray70Hover;
 
+// layer-02
 var layer02$1 = gray70;
 var layerActive02$1 = gray50;
 var layerHover02$1 = gray70Hover;
 var layerSelected02$1 = gray60;
-var layerSelectedHover02$1 = gray60Hover; // layer-03
+var layerSelectedHover02$1 = gray60Hover;
 
+// layer-03
 var layer03$1 = gray60;
 var layerActive03$1 = gray80;
 var layerHover03$1 = gray60Hover;
 var layerSelected03$1 = gray70;
-var layerSelectedHover03$1 = gray70Hover; // layer
+var layerSelectedHover03$1 = gray70Hover;
 
+// layer
 var layerSelectedInverse$5 = gray10;
-var layerSelectedDisabled$5 = gray40; // layer-accent-01
+var layerSelectedDisabled$5 = gray40;
 
+// layer-accent-01
 var layerAccent01$1 = gray70;
 var layerAccentActive01$1 = gray50;
-var layerAccentHover01$1 = gray70Hover; // layer-accent-02
+var layerAccentHover01$1 = gray70Hover;
 
+// layer-accent-02
 var layerAccent02$1 = gray60;
 var layerAccentActive02$1 = gray80;
-var layerAccentHover02$1 = gray60Hover; // layer-accent-03
+var layerAccentHover02$1 = gray60Hover;
 
+// layer-accent-03
 var layerAccent03$1 = gray50;
 var layerAccentActive03$1 = gray70;
-var layerAccentHover03$1 = gray50Hover; // Field
-// field-01
+var layerAccentHover03$1 = gray50Hover;
 
+// Field
+// field-01
 var field01$5 = gray80;
-var fieldHover01$1 = gray80Hover; // field-02
+var fieldHover01$1 = gray80Hover;
 
+// field-02
 var field02$5 = gray70;
-var fieldHover02$1 = gray70Hover; // field-03
+var fieldHover02$1 = gray70Hover;
 
+// field-03
 var field03$1 = gray60;
-var fieldHover03$1 = gray60Hover; // Border
-// border-subtle-00
+var fieldHover03$1 = gray60Hover;
 
-var borderSubtle00$1 = gray70; // border-subtle-01
+// Border
+// border-subtle-00
+var borderSubtle00$1 = gray70;
 
+// border-subtle-01
 var borderSubtle01$1 = gray70;
-var borderSubtleSelected01$1 = gray60; // border-subtle-02
+var borderSubtleSelected01$1 = gray60;
 
+// border-subtle-02
 var borderSubtle02$1 = gray60;
-var borderSubtleSelected02$1 = gray50; // border-subtle-03
+var borderSubtleSelected02$1 = gray50;
 
+// border-subtle-03
 var borderSubtle03$1 = gray50;
-var borderSubtleSelected03$1 = gray40; // border-strong
+var borderSubtleSelected03$1 = gray40;
 
+// border-strong
 var borderStrong01$1 = gray50;
 var borderStrong02$1 = gray40;
-var borderStrong03$1 = gray30; // border-tile
+var borderStrong03$1 = gray30;
 
+// border-tile
 var borderTile01$1 = gray60;
 var borderTile02$1 = gray50;
-var borderTile03$1 = gray40; // border-inverse
+var borderTile03$1 = gray40;
 
-var borderInverse$5 = gray10; // border-interactive
+// border-inverse
+var borderInverse$5 = gray10;
 
-var borderInteractive$5 = blue50; // border
+// border-interactive
+var borderInteractive$5 = blue50;
 
-var borderDisabled$5 = adjustAlpha(gray50, 0.5); // Text
+// border
+var borderDisabled$5 = adjustAlpha(gray50, 0.5);
 
+// Text
 var textPrimary$5 = gray10;
 var textSecondary$5 = gray30;
 var textPlaceholder$5 = adjustAlpha(textPrimary$5, 0.4);
@@ -1278,24 +1312,27 @@ var textError$5 = red30;
 var textInverse$5 = gray100;
 var textOnColor$5 = white$2;
 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 = blue40;
 var linkPrimaryHover$5 = blue30;
 var linkSecondary$5 = blue30;
 var linkInverse$5 = blue60;
 var linkVisited$5 = purple40;
 var linkInverseActive$1 = gray100;
-var linkInverseHover$1 = blue70; // Icon
+var linkInverseHover$1 = blue70;
 
+// Icon
 var iconPrimary$5 = gray10;
 var iconSecondary$5 = gray30;
 var iconInverse$5 = gray100;
 var iconOnColor$5 = white$2;
 var iconOnColorDisabled$5 = adjustAlpha(iconOnColor$5, 0.25);
 var iconDisabled$5 = adjustAlpha(iconPrimary$5, 0.25);
-var iconInteractive$1 = white$2; // Support
+var iconInteractive$1 = white$2;
 
+// Support
 var supportError$5 = red40;
 var supportSuccess$5 = green40;
 var supportWarning$5 = yellow30;
@@ -1306,15 +1343,18 @@ var supportWarningInverse$5 = yellow30;
 var supportInfoInverse$5 = blue70;
 var supportCautionMinor$1 = yellow30;
 var supportCautionMajor$1 = orange40;
-var supportCautionUndefined$1 = purple50; // Focus
+var supportCautionUndefined$1 = purple50;
 
+// Focus
 var focus$6 = white$2;
 var focusInset$5 = gray100;
-var focusInverse$5 = blue60; // Skeleton
+var focusInverse$5 = blue60;
 
+// Skeleton
 var skeletonBackground$5 = gray90Hover;
-var skeletonElement$5 = gray70; // Misc
+var skeletonElement$5 = gray70;
 
+// Misc
 var interactive$5 = blue50;
 var highlight$5 = blue70;
 var overlay$5 = rgba(black, 0.65);
@@ -1486,7 +1526,14 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   sizeXLarge: sizeXLarge,
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
-  iconSize02: iconSize02
+  iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07
 });
 
 /**
@@ -1496,6 +1543,7 @@ var g90$1 = /*#__PURE__*/Object.freeze({
  * LICENSE file in the root directory of this source tree.
  */
 
+// Background
 var background$5 = gray100;
 var backgroundInverse$4 = gray10;
 var backgroundBrand$4 = blue60;
@@ -1503,78 +1551,98 @@ var backgroundActive$4 = adjustAlpha(gray50, 0.4);
 var backgroundHover$4 = adjustAlpha(gray50, 0.16);
 var backgroundInverseHover$4 = gray10Hover;
 var backgroundSelected$4 = adjustAlpha(gray50, 0.24);
-var backgroundSelectedHover$4 = adjustAlpha(gray50, 0.32); // Layer
-// layer-01
+var backgroundSelectedHover$4 = adjustAlpha(gray50, 0.32);
 
+// Layer
+// layer-01
 var layer01 = gray90;
 var layerActive01 = gray70;
 var layerHover01 = gray90Hover;
 var layerSelected01 = gray80;
-var layerSelectedHover01 = gray80Hover; // layer-02
+var layerSelectedHover01 = gray80Hover;
 
+// layer-02
 var layer02 = gray80;
 var layerActive02 = gray60;
 var layerHover02 = gray80Hover;
 var layerSelected02 = gray70;
-var layerSelectedHover02 = gray70Hover; // layer-03
+var layerSelectedHover02 = gray70Hover;
 
+// layer-03
 var layer03 = gray70;
 var layerActive03 = gray50;
 var layerHover03 = gray70Hover;
 var layerSelected03 = gray60;
-var layerSelectedHover03 = gray60Hover; // layer
+var layerSelectedHover03 = gray60Hover;
 
+// layer
 var layerSelectedInverse$4 = gray10;
-var layerSelectedDisabled$4 = gray40; // layer-accent-01
+var layerSelectedDisabled$4 = gray40;
 
+// layer-accent-01
 var layerAccent01 = gray80;
 var layerAccentActive01 = gray60;
-var layerAccentHover01 = gray80Hover; // layer-accent-02
+var layerAccentHover01 = gray80Hover;
 
+// layer-accent-02
 var layerAccent02 = gray70;
 var layerAccentActive02 = gray50;
-var layerAccentHover02 = gray70Hover; // layer-accent-03
+var layerAccentHover02 = gray70Hover;
 
+// layer-accent-03
 var layerAccent03 = gray60;
 var layerAccentActive03 = gray80;
-var layerAccentHover03 = gray60Hover; // Field
-// field-01
+var layerAccentHover03 = gray60Hover;
 
+// Field
+// field-01
 var field01$4 = gray90;
-var fieldHover01 = gray90Hover; // field-02
+var fieldHover01 = gray90Hover;
 
+// field-02
 var field02$4 = gray80;
-var fieldHover02 = gray80Hover; // field-03
+var fieldHover02 = gray80Hover;
 
+// field-03
 var field03 = gray70;
-var fieldHover03 = gray70Hover; // Border
-// border-subtle-00
+var fieldHover03 = gray70Hover;
 
-var borderSubtle00 = gray80; // border-subtle-01
+// Border
+// border-subtle-00
+var borderSubtle00 = gray80;
 
+// border-subtle-01
 var borderSubtle01 = gray80;
-var borderSubtleSelected01 = gray70; // border-subtle-02
+var borderSubtleSelected01 = gray70;
 
+// border-subtle-02
 var borderSubtle02 = gray70;
-var borderSubtleSelected02 = gray60; // border-subtle-03
+var borderSubtleSelected02 = gray60;
 
+// border-subtle-03
 var borderSubtle03 = gray60;
-var borderSubtleSelected03 = gray50; // border-strong
+var borderSubtleSelected03 = gray50;
 
+// border-strong
 var borderStrong01 = gray60;
 var borderStrong02 = gray50;
-var borderStrong03 = gray40; // border-tile
+var borderStrong03 = gray40;
 
+// border-tile
 var borderTile01 = gray70;
 var borderTile02 = gray60;
-var borderTile03 = gray50; // border-inverse
+var borderTile03 = gray50;
 
-var borderInverse$4 = gray10; // border-interactive
+// border-inverse
+var borderInverse$4 = gray10;
 
-var borderInteractive$4 = blue50; // border
+// border-interactive
+var borderInteractive$4 = blue50;
 
-var borderDisabled$4 = adjustAlpha(gray50, 0.5); // Text
+// border
+var borderDisabled$4 = adjustAlpha(gray50, 0.5);
 
+// Text
 var textPrimary$4 = gray10;
 var textSecondary$4 = gray30;
 var textPlaceholder$4 = adjustAlpha(textPrimary$4, 0.4);
@@ -1583,24 +1651,27 @@ var textError$4 = red40;
 var textInverse$4 = gray100;
 var textOnColor$4 = white$2;
 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 = blue40;
 var linkPrimaryHover$4 = blue30;
 var linkSecondary$4 = blue30;
 var linkInverse$4 = blue60;
 var linkVisited$4 = purple40;
 var linkInverseActive = gray100;
-var linkInverseHover = blue70; // Icon
+var linkInverseHover = blue70;
 
+// Icon
 var iconPrimary$4 = gray10;
 var iconSecondary$4 = gray30;
 var iconInverse$4 = gray100;
 var iconOnColor$4 = white$2;
 var iconOnColorDisabled$4 = adjustAlpha(iconOnColor$4, 0.25);
 var iconDisabled$4 = adjustAlpha(iconPrimary$4, 0.25);
-var iconInteractive = white$2; // Support
+var iconInteractive = white$2;
 
+// Support
 var supportError$4 = red50;
 var supportSuccess$4 = green40;
 var supportWarning$4 = yellow30;
@@ -1611,15 +1682,18 @@ var supportWarningInverse$4 = yellow30;
 var supportInfoInverse$4 = blue70;
 var supportCautionMinor = yellow30;
 var supportCautionMajor = orange40;
-var supportCautionUndefined = purple50; // Focus
+var supportCautionUndefined = purple50;
 
+// Focus
 var focus$5 = white$2;
 var focusInset$4 = gray100;
-var focusInverse$4 = blue60; // Skeleton
+var focusInverse$4 = blue60;
 
+// Skeleton
 var skeletonBackground$4 = adjustLightness(background$5, 7);
-var skeletonElement$4 = gray80; // Misc
+var skeletonElement$4 = gray80;
 
+// Misc
 var interactive$4 = blue50;
 var highlight$4 = blue80;
 var overlay$4 = rgba(black, 0.65);
@@ -1791,7 +1865,14 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   sizeXLarge: sizeXLarge,
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
-  iconSize02: iconSize02
+  iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07
 });
 
 /**
@@ -1836,8 +1917,9 @@ var inverseSupport03$3 = yellow30;
 var inverseSupport04$3 = blue50;
 var overlay01$3 = rgba(gray100, 0.5);
 var danger01$3 = red60;
-var danger02$3 = red60; // Interaction states
+var danger02$3 = red60;
 
+// Interaction states
 var focus$4 = blue60;
 var inverseFocusUi$3 = white$2;
 var hoverPrimary$3 = '#0353e9';
@@ -1866,9 +1948,10 @@ var highlight$3 = blue20;
 var decorative01$3 = gray20;
 var buttonSeparator$4 = '#e0e0e0';
 var skeleton01$3 = '#e5e5e5';
-var skeleton02$3 = gray30; // New color tokens
-// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+var skeleton02$3 = 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;
@@ -1943,8 +2026,9 @@ var textOnColorDisabled$3 = disabled03$3;
 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;
@@ -2188,7 +2272,14 @@ var white = /*#__PURE__*/Object.freeze({
   sizeXLarge: sizeXLarge,
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
-  iconSize02: iconSize02
+  iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07
 });
 
 /**
@@ -2233,8 +2324,9 @@ var inverseSupport03$2 = yellow30;
 var inverseSupport04$2 = blue50;
 var overlay01$2 = rgba(gray100, 0.5);
 var danger01$2 = red60;
-var danger02$2 = red60; // Interaction states
+var danger02$2 = red60;
 
+// Interaction states
 var focus$3 = blue60;
 var inverseFocusUi$2 = white$2;
 var hoverPrimary$2 = '#0353e9';
@@ -2263,9 +2355,10 @@ var highlight$2 = blue20;
 var decorative01$2 = gray20;
 var buttonSeparator$3 = '#e0e0e0';
 var skeleton01$2 = '#e5e5e5';
-var skeleton02$2 = gray30; // New color tokens
-// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+var skeleton02$2 = 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;
@@ -2342,6 +2435,7 @@ var layerSelectedDisabled$2 = disabled03$2;
 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;
@@ -2585,7 +2679,14 @@ var g10 = /*#__PURE__*/Object.freeze({
   sizeXLarge: sizeXLarge,
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
-  iconSize02: iconSize02
+  iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07
 });
 
 /**
@@ -2630,8 +2731,9 @@ var inverseSupport03$1 = yellow30;
 var inverseSupport04$1 = blue60;
 var overlay01$1 = rgba(black, 0.65);
 var danger01$1 = red60;
-var danger02$1 = red40; // Interaction states
+var danger02$1 = red40;
 
+// Interaction states
 var focus$2 = white$2;
 var inverseFocusUi$1 = blue60;
 var hoverPrimary$1 = '#0353e9';
@@ -2660,9 +2762,10 @@ var highlight$1 = blue70;
 var decorative01$1 = gray60;
 var buttonSeparator$2 = '#161616';
 var skeleton01$1 = '#353535';
-var skeleton02$1 = gray70; // New color tokens
-// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+var skeleton02$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;
@@ -2739,6 +2842,7 @@ var layerSelectedDisabled$1 = disabled03$1;
 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;
@@ -2982,7 +3086,14 @@ var g90 = /*#__PURE__*/Object.freeze({
   sizeXLarge: sizeXLarge,
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
-  iconSize02: iconSize02
+  iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07
 });
 
 /**
@@ -3027,8 +3138,9 @@ var inverseSupport03 = yellow30;
 var inverseSupport04 = blue60;
 var overlay01 = rgba(black, 0.65);
 var danger01 = red60;
-var danger02 = red50; // Interaction states
+var danger02 = red50;
 
+// Interaction states
 var focus$1 = white$2;
 var inverseFocusUi = blue60;
 var hoverPrimary = '#0353e9';
@@ -3057,9 +3169,10 @@ var highlight = blue80;
 var decorative01 = gray70;
 var buttonSeparator$1 = '#161616';
 var skeleton01 = '#353535';
-var skeleton02 = gray70; // New color tokens
-// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+var skeleton02 = 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;
@@ -3136,6 +3249,7 @@ var layerSelectedDisabled = disabled03;
 var skeletonBackground = skeleton01;
 var skeletonElement = skeleton02;
 
+// Deprecated ☠️
 var brand01 = interactive01;
 var brand02 = interactive02;
 var brand03 = interactive03;
@@ -3379,7 +3493,14 @@ var g100 = /*#__PURE__*/Object.freeze({
   sizeXLarge: sizeXLarge,
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
-  iconSize02: iconSize02
+  iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07
 });
 
 /**
@@ -3388,13 +3509,18 @@ var g100 = /*#__PURE__*/Object.freeze({
  * 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,
@@ -3511,6 +3637,13 @@ var index$3 = /*#__PURE__*/Object.freeze({
   size2XLarge: size2XLarge,
   iconSize01: iconSize01,
   iconSize02: iconSize02,
+  layout01: layout01,
+  layout02: layout02,
+  layout03: layout03,
+  layout04: layout04,
+  layout05: layout05,
+  layout06: layout06,
+  layout07: layout07,
   interactive01: interactive01$3,
   interactive02: interactive02$3,
   interactive03: interactive03$3,
@@ -4094,30 +4227,24 @@ var index = /*#__PURE__*/Object.freeze({
 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;
 }();
 
@@ -4132,84 +4259,63 @@ var Token = /*#__PURE__*/function () {
  * 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();
@@ -4222,56 +4328,46 @@ var TokenGroup = /*#__PURE__*/function (_Symbol$iterator) {
      * 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;
           }
@@ -4281,30 +4377,25 @@ var TokenGroup = /*#__PURE__*/function (_Symbol$iterator) {
       } 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) {
@@ -4312,33 +4403,27 @@ var TokenGroup = /*#__PURE__*/function (_Symbol$iterator) {
       } 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;
@@ -4355,30 +4440,25 @@ var TokenGroup = /*#__PURE__*/function (_Symbol$iterator) {
       } 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);
           }
@@ -4388,20 +4468,18 @@ var TokenGroup = /*#__PURE__*/function (_Symbol$iterator) {
       } 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);
 
@@ -4547,10 +4625,14 @@ var border = TokenGroup.create({
   }, {
     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'
@@ -4617,11 +4699,13 @@ var contextual = TokenGroup.create({
 });
 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'
   }, {
@@ -4690,7 +4774,8 @@ var layout$1 = TokenGroup.create({
 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({