@carbon/themes 11.4.0-rc.0 → 11.5.0

package/es/index.js

@@ -31,6 +31,376 @@ function _objectSpread2(target) {
   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";
+
+  function define(obj, key, value) {
+    return Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), obj[key];
+  }
+
+  try {
+    define({}, "");
+  } catch (err) {
+    define = function (obj, key, value) {
+      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;
+  }
+
+  function tryCatch(fn, obj, arg) {
+    try {
+      return {
+        type: "normal",
+        arg: fn.call(obj, arg)
+      };
+    } catch (err) {
+      return {
+        type: "throw",
+        arg: err
+      };
+    }
+  }
+
+  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 && 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) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+
+  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;
+        return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
+          invoke("next", value, resolve, reject);
+        }, function (err) {
+          invoke("throw", err, resolve, reject);
+        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
+          result.value = unwrapped, resolve(result);
+        }, function (error) {
+          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);
+        });
+      }
+
+      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 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;
+        };
+
+        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) {
+    var ctor = "function" == typeof genFun && genFun.constructor;
+    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
+  }, exports.mark = function (genFun) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
+  }, exports.awrap = function (arg) {
+    return {
+      __await: arg
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    void 0 === PromiseImpl && (PromiseImpl = Promise);
+    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
+      return result.done ? result.value : iter.next();
+    });
+  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+    return this;
+  }), define(Gp, "toString", function () {
+    return "[object Generator]";
+  }), exports.keys = function (object) {
+    var 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 = {
+    constructor: Context,
+    reset: function (skipTempReset) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+    },
+    stop: function () {
+      this.done = !0;
+      var rootRecord = this.tryEntries[0].completion;
+      if ("throw" === rootRecord.type) throw rootRecord.arg;
+      return this.rval;
+    },
+    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;
+        if ("root" === entry.tryLoc) return handle("end");
+
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc"),
+              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);
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+          } else {
+            if (!hasFinally) throw new Error("try statement without catch or finally");
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          }
+        }
+      }
+    },
+    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);
+    },
+    complete: function (record, afterLoc) {
+      if ("throw" === record.type) throw record.arg;
+      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+    },
+    finish: function (finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+      }
+    },
+    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) {
+      return this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+    }
+  }, 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);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -46,6 +416,96 @@ function _defineProperty(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);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(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 () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        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;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
+
 /**
  * Adjust a given token's lightness by a specified percentage
  * Example: token = hsl(10, 10, 10);
@@ -82,7 +542,7 @@ function adjustAlpha(token, alpha) {
  * LICENSE file in the root directory of this source tree.
  */
 
-var background$7 = white$2;
+var background$8 = white$2;
 var backgroundInverse$7 = gray80;
 var backgroundBrand$7 = blue60;
 var backgroundActive$7 = adjustAlpha(gray50, 0.5);
@@ -194,7 +654,7 @@ var supportCautionMinor$3 = yellow30;
 var supportCautionMajor$3 = orange40;
 var supportCautionUndefined$3 = purple60; // Focus
 
-var focus$7 = blue60;
+var focus$8 = blue60;
 var focusInset$7 = white$2;
 var focusInverse$7 = white$2; // Skeleton
 
@@ -209,7 +669,7 @@ var shadow$7 = 'rgba(0, 0, 0, 0.3)'; // Type
 
 var white$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  background: background$7,
+  background: background$8,
   backgroundInverse: backgroundInverse$7,
   backgroundBrand: backgroundBrand$7,
   backgroundActive: backgroundActive$7,
@@ -295,7 +755,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   supportCautionMinor: supportCautionMinor$3,
   supportCautionMajor: supportCautionMajor$3,
   supportCautionUndefined: supportCautionUndefined$3,
-  focus: focus$7,
+  focus: focus$8,
   focusInset: focusInset$7,
   focusInverse: focusInverse$7,
   skeletonBackground: skeletonBackground$7,
@@ -378,7 +838,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
  * LICENSE file in the root directory of this source tree.
  */
 
-var background$6 = gray10;
+var background$7 = gray10;
 var backgroundInverse$6 = gray80;
 var backgroundBrand$6 = blue60;
 var backgroundActive$6 = adjustAlpha(gray50, 0.5);
@@ -490,7 +950,7 @@ var supportCautionMinor$2 = yellow30;
 var supportCautionMajor$2 = orange40;
 var supportCautionUndefined$2 = purple60; // Focus
 
-var focus$6 = blue60;
+var focus$7 = blue60;
 var focusInset$6 = white$2;
 var focusInverse$6 = white$2; // Skeleton
 
@@ -505,7 +965,7 @@ var shadow$6 = 'rgba(0, 0, 0, 0.3)';
 
 var g10$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  background: background$6,
+  background: background$7,
   backgroundInverse: backgroundInverse$6,
   backgroundBrand: backgroundBrand$6,
   backgroundActive: backgroundActive$6,
@@ -591,7 +1051,7 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   supportCautionMinor: supportCautionMinor$2,
   supportCautionMajor: supportCautionMajor$2,
   supportCautionUndefined: supportCautionUndefined$2,
-  focus: focus$6,
+  focus: focus$7,
   focusInset: focusInset$6,
   focusInverse: focusInverse$6,
   skeletonBackground: skeletonBackground$6,
@@ -674,7 +1134,7 @@ var g10$1 = /*#__PURE__*/Object.freeze({
  * LICENSE file in the root directory of this source tree.
  */
 
-var background$5 = gray90;
+var background$6 = gray90;
 var backgroundInverse$5 = gray10;
 var backgroundBrand$5 = blue60;
 var backgroundActive$5 = adjustAlpha(gray50, 0.4);
@@ -786,7 +1246,7 @@ var supportCautionMinor$1 = yellow30;
 var supportCautionMajor$1 = orange40;
 var supportCautionUndefined$1 = purple50; // Focus
 
-var focus$5 = white$2;
+var focus$6 = white$2;
 var focusInset$5 = gray100;
 var focusInverse$5 = blue60; // Skeleton
 
@@ -801,7 +1261,7 @@ var shadow$5 = rgba(black, 0.8);
 
 var g90$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  background: background$5,
+  background: background$6,
   backgroundInverse: backgroundInverse$5,
   backgroundBrand: backgroundBrand$5,
   backgroundActive: backgroundActive$5,
@@ -887,7 +1347,7 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   supportCautionMinor: supportCautionMinor$1,
   supportCautionMajor: supportCautionMajor$1,
   supportCautionUndefined: supportCautionUndefined$1,
-  focus: focus$5,
+  focus: focus$6,
   focusInset: focusInset$5,
   focusInverse: focusInverse$5,
   skeletonBackground: skeletonBackground$5,
@@ -970,7 +1430,7 @@ var g90$1 = /*#__PURE__*/Object.freeze({
  * LICENSE file in the root directory of this source tree.
  */
 
-var background$4 = gray100;
+var background$5 = gray100;
 var backgroundInverse$4 = gray10;
 var backgroundBrand$4 = blue60;
 var backgroundActive$4 = adjustAlpha(gray50, 0.4);
@@ -1082,11 +1542,11 @@ var supportCautionMinor = yellow30;
 var supportCautionMajor = orange40;
 var supportCautionUndefined = purple50; // Focus
 
-var focus$4 = white$2;
+var focus$5 = white$2;
 var focusInset$4 = gray100;
 var focusInverse$4 = blue60; // Skeleton
 
-var skeletonBackground$4 = adjustLightness(background$4, 7);
+var skeletonBackground$4 = adjustLightness(background$5, 7);
 var skeletonElement$4 = gray80; // Misc
 
 var interactive$4 = blue50;
@@ -1097,7 +1557,7 @@ var shadow$4 = rgba(black, 0.8);
 
 var g100$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  background: background$4,
+  background: background$5,
   backgroundInverse: backgroundInverse$4,
   backgroundBrand: backgroundBrand$4,
   backgroundActive: backgroundActive$4,
@@ -1183,7 +1643,7 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   supportCautionMinor: supportCautionMinor,
   supportCautionMajor: supportCautionMajor,
   supportCautionUndefined: supportCautionUndefined,
-  focus: focus$4,
+  focus: focus$5,
   focusInset: focusInset$4,
   focusInverse: focusInverse$4,
   skeletonBackground: skeletonBackground$4,
@@ -1303,7 +1763,7 @@ var overlay01$3 = rgba(gray100, 0.5);
 var danger01$3 = red60;
 var danger02$3 = red60; // Interaction states
 
-var focus$3 = blue60;
+var focus$4 = blue60;
 var inverseFocusUi$3 = white$2;
 var hoverPrimary$3 = '#0353e9';
 var activePrimary$3 = blue80;
@@ -1334,12 +1794,12 @@ 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 background$3 = uiBackground$3;
-var layer$3 = ui01$3;
+var background$4 = uiBackground$3;
+var layer$4 = ui01$3;
 var layerAccent$3 = ui03$3;
 var layerAccentActive$3 = gray40;
 var layerAccentHover$3 = adjustLightness(layerAccent$3, -6);
-var field$3 = field01$3;
+var field$4 = field01$3;
 var backgroundInverse$3 = inverse02$3;
 var backgroundBrand$3 = interactive01$3;
 var interactive$3 = interactive04$3;
@@ -1456,7 +1916,7 @@ var white = /*#__PURE__*/Object.freeze({
   overlay01: overlay01$3,
   danger01: danger01$3,
   danger02: danger02$3,
-  focus: focus$3,
+  focus: focus$4,
   inverseFocusUi: inverseFocusUi$3,
   hoverPrimary: hoverPrimary$3,
   activePrimary: activePrimary$3,
@@ -1485,12 +1945,12 @@ var white = /*#__PURE__*/Object.freeze({
   buttonSeparator: buttonSeparator$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
-  background: background$3,
-  layer: layer$3,
+  background: background$4,
+  layer: layer$4,
   layerAccent: layerAccent$3,
   layerAccentActive: layerAccentActive$3,
   layerAccentHover: layerAccentHover$3,
-  field: field$3,
+  field: field$4,
   backgroundInverse: backgroundInverse$3,
   backgroundBrand: backgroundBrand$3,
   interactive: interactive$3,
@@ -1700,7 +2160,7 @@ var overlay01$2 = rgba(gray100, 0.5);
 var danger01$2 = red60;
 var danger02$2 = red60; // Interaction states
 
-var focus$2 = blue60;
+var focus$3 = blue60;
 var inverseFocusUi$2 = white$2;
 var hoverPrimary$2 = '#0353e9';
 var activePrimary$2 = blue80;
@@ -1731,12 +2191,12 @@ 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 background$2 = uiBackground$2;
-var layer$2 = ui01$2;
+var background$3 = uiBackground$2;
+var layer$3 = ui01$2;
 var layerAccent$2 = ui03$2;
 var layerAccentActive$2 = gray40;
 var layerAccentHover$2 = adjustLightness(layerAccent$2, -6);
-var field$2 = field01$2;
+var field$3 = field01$2;
 var backgroundInverse$2 = inverse02$2;
 var backgroundBrand$2 = interactive01$2;
 var interactive$2 = interactive04$2;
@@ -1853,7 +2313,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   overlay01: overlay01$2,
   danger01: danger01$2,
   danger02: danger02$2,
-  focus: focus$2,
+  focus: focus$3,
   inverseFocusUi: inverseFocusUi$2,
   hoverPrimary: hoverPrimary$2,
   activePrimary: activePrimary$2,
@@ -1882,12 +2342,12 @@ var g10 = /*#__PURE__*/Object.freeze({
   buttonSeparator: buttonSeparator$2,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
-  background: background$2,
-  layer: layer$2,
+  background: background$3,
+  layer: layer$3,
   layerAccent: layerAccent$2,
   layerAccentActive: layerAccentActive$2,
   layerAccentHover: layerAccentHover$2,
-  field: field$2,
+  field: field$3,
   backgroundInverse: backgroundInverse$2,
   backgroundBrand: backgroundBrand$2,
   interactive: interactive$2,
@@ -2097,7 +2557,7 @@ var overlay01$1 = rgba(black, 0.65);
 var danger01$1 = red60;
 var danger02$1 = red40; // Interaction states
 
-var focus$1 = white$2;
+var focus$2 = white$2;
 var inverseFocusUi$1 = blue60;
 var hoverPrimary$1 = '#0353e9';
 var activePrimary$1 = blue80;
@@ -2128,12 +2588,12 @@ 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 background$1 = uiBackground$1;
-var layer$1 = ui01$1;
+var background$2 = uiBackground$1;
+var layer$2 = ui01$1;
 var layerAccent$1 = ui03$1;
 var layerAccentActive$1 = gray50;
 var layerAccentHover$1 = adjustLightness(layerAccent$1, +7);
-var field$1 = field01$1;
+var field$2 = field01$1;
 var backgroundInverse$1 = inverse02$1;
 var backgroundBrand$1 = interactive01$1;
 var interactive$1 = interactive04$1;
@@ -2250,7 +2710,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   overlay01: overlay01$1,
   danger01: danger01$1,
   danger02: danger02$1,
-  focus: focus$1,
+  focus: focus$2,
   inverseFocusUi: inverseFocusUi$1,
   hoverPrimary: hoverPrimary$1,
   activePrimary: activePrimary$1,
@@ -2279,12 +2739,12 @@ var g90 = /*#__PURE__*/Object.freeze({
   buttonSeparator: buttonSeparator$1,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
-  background: background$1,
-  layer: layer$1,
+  background: background$2,
+  layer: layer$2,
   layerAccent: layerAccent$1,
   layerAccentActive: layerAccentActive$1,
   layerAccentHover: layerAccentHover$1,
-  field: field$1,
+  field: field$2,
   backgroundInverse: backgroundInverse$1,
   backgroundBrand: backgroundBrand$1,
   interactive: interactive$1,
@@ -2494,7 +2954,7 @@ var overlay01 = rgba(black, 0.65);
 var danger01 = red60;
 var danger02 = red50; // Interaction states
 
-var focus = white$2;
+var focus$1 = white$2;
 var inverseFocusUi = blue60;
 var hoverPrimary = '#0353e9';
 var activePrimary = blue80;
@@ -2525,12 +2985,12 @@ 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 background = uiBackground;
-var layer = ui01;
+var background$1 = uiBackground;
+var layer$1 = ui01;
 var layerAccent = ui03;
 var layerAccentActive = gray60;
 var layerAccentHover = adjustLightness(layerAccent, +6);
-var field = field01;
+var field$1 = field01;
 var backgroundInverse = inverse02;
 var backgroundBrand = interactive01;
 var interactive = interactive04;
@@ -2647,7 +3107,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   overlay01: overlay01,
   danger01: danger01,
   danger02: danger02,
-  focus: focus,
+  focus: focus$1,
   inverseFocusUi: inverseFocusUi,
   hoverPrimary: hoverPrimary,
   activePrimary: activePrimary,
@@ -2676,12 +3136,12 @@ var g100 = /*#__PURE__*/Object.freeze({
   buttonSeparator: buttonSeparator,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
-  background: background,
-  layer: layer,
+  background: background$1,
+  layer: layer$1,
   layerAccent: layerAccent,
   layerAccentActive: layerAccentActive,
   layerAccentHover: layerAccentHover,
-  field: field,
+  field: field$1,
   backgroundInverse: backgroundInverse,
   backgroundBrand: backgroundBrand,
   interactive: interactive,
@@ -3013,7 +3473,7 @@ var index = /*#__PURE__*/Object.freeze({
   overlay01: overlay01$3,
   danger01: danger01$3,
   danger02: danger02$3,
-  focus: focus$3,
+  focus: focus$4,
   inverseFocusUi: inverseFocusUi$3,
   hoverPrimary: hoverPrimary$3,
   activePrimary: activePrimary$3,
@@ -3042,12 +3502,12 @@ var index = /*#__PURE__*/Object.freeze({
   buttonSeparator: buttonSeparator$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
-  background: background$3,
-  layer: layer$3,
+  background: background$4,
+  layer: layer$4,
   layerAccent: layerAccent$3,
   layerAccentActive: layerAccentActive$3,
   layerAccentHover: layerAccentHover$3,
-  field: field$3,
+  field: field$4,
   backgroundInverse: backgroundInverse$3,
   backgroundBrand: backgroundBrand$3,
   interactive: interactive$3,
@@ -3125,6 +3585,679 @@ var index = /*#__PURE__*/Object.freeze({
   danger: danger$3
 });
 
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A Token is the simplest unit in our theme. It can have a name, properties
+ * that it applies to like border or background, along with a state if the
+ * token should only be used for specific states like hover or focus.
+ */
+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;
+}();
+
+/**
+ * A TokenGroup allows us to group up a collection of tokens and nested token
+ * groups. A group allows us to colocate related tokens and write information
+ * once that applies to the entire collection of tokens. For example, if all the
+ * tokens apply to the `border` color property then we can specify this property
+ * at the group level
+ *
+ * A TokenGroup allows us to colocate all this information while also providing
+ * 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();
+          }
+        }
+      }, value, this, [[3, 15, 18, 21]]);
+    })
+    /**
+     * Get all the tokens available in every Token Group in this TokenGroup,
+     * 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;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var child = _step2.value;
+
+          if (child.kind === 'TokenGroup') {
+            continue;
+          }
+
+          if (child.name === name) {
+            return child;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } 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;
+
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var child = _step3.value;
+
+          if (child.kind !== 'TokenGroup') {
+            continue;
+          }
+
+          set.add(child);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } 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;
+
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var child = _step4.value;
+
+          if (!Array.isArray(child.properties)) {
+            continue;
+          }
+
+          var _iterator5 = _createForOfIteratorHelper(child.properties),
+              _step5;
+
+          try {
+            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+              var property = _step5.value;
+              set.add(property);
+            }
+          } catch (err) {
+            _iterator5.e(err);
+          } finally {
+            _iterator5.f();
+          }
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } 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;
+
+      try {
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          var child = _step6.value;
+
+          if (child.kind !== 'Token') {
+            continue;
+          }
+
+          if (child.state) {
+            set.add(child.state);
+          }
+        }
+      } catch (err) {
+        _iterator6.e(err);
+      } 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;
+      return new TokenGroup(name, tokens, properties);
+    }
+  }]);
+
+  return TokenGroup;
+}(Symbol.iterator);
+
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var background = TokenGroup.create({
+  name: 'Background',
+  properties: ['background'],
+  tokens: ['background', {
+    name: 'background-active',
+    state: 'active'
+  }, {
+    name: 'background-selected',
+    state: 'selected'
+  }, {
+    name: 'background-selected-hover',
+    state: 'hover'
+  }, {
+    name: 'background-hover',
+    state: 'hover'
+  }, 'background-brand', 'background-inverse', {
+    state: 'hover',
+    name: 'background-inverse-hover'
+  }]
+});
+var layer = TokenGroup.create({
+  name: 'Layer',
+  properties: ['background'],
+  tokens: [{
+    name: 'layer-01'
+  }, {
+    state: 'active',
+    name: 'layer-active-01'
+  }, {
+    state: 'hover',
+    name: 'layer-hover-01'
+  }, {
+    state: 'selected',
+    name: 'layer-selected-01'
+  }, {
+    state: 'hover',
+    name: 'layer-selected-hover-01'
+  }, {
+    name: 'layer-02'
+  }, {
+    state: 'active',
+    name: 'layer-active-02'
+  }, {
+    state: 'hover',
+    name: 'layer-hover-02'
+  }, {
+    state: 'selected',
+    name: 'layer-selected-02'
+  }, {
+    state: 'hover',
+    name: 'layer-selected-hover-02'
+  }, {
+    name: 'layer-03'
+  }, {
+    state: 'active',
+    name: 'layer-active-03'
+  }, {
+    state: 'hover',
+    name: 'layer-hover-03'
+  }, {
+    state: 'selected',
+    name: 'layer-selected-03'
+  }, {
+    state: 'hover',
+    name: 'layer-selected-hover-03'
+  }, {
+    name: 'layer-selected-inverse'
+  }, {
+    state: 'disabled',
+    name: 'layer-selected-disabled'
+  }, {
+    name: 'layer-accent-01'
+  }, {
+    state: 'active',
+    name: 'layer-accent-active-01'
+  }, {
+    state: 'hover',
+    name: 'layer-accent-hover-01'
+  }, {
+    name: 'layer-accent-02'
+  }, {
+    state: 'active',
+    name: 'layer-accent-active-02'
+  }, {
+    state: 'hover',
+    name: 'layer-accent-hover-02'
+  }, {
+    name: 'layer-accent-03'
+  }, {
+    state: 'active',
+    name: 'layer-accent-active-03'
+  }, {
+    state: 'hover',
+    name: 'layer-accent-hover-03'
+  }]
+});
+var field = TokenGroup.create({
+  name: 'Field',
+  properties: ['background'],
+  tokens: [{
+    name: 'field-01'
+  }, {
+    state: 'hover',
+    name: 'field-hover-01'
+  }, {
+    name: 'field-02'
+  }, {
+    state: 'hover',
+    name: 'field-hover-02'
+  }, {
+    name: 'field-03'
+  }, {
+    state: 'hover',
+    name: 'field-hover-03'
+  }]
+});
+var border = TokenGroup.create({
+  name: 'Borders',
+  properties: ['border'],
+  tokens: [{
+    name: 'border-subtle-00'
+  }, {
+    name: 'border-subtle-01'
+  }, {
+    state: 'selected',
+    name: 'border-subtle-selected-01'
+  }, {
+    name: 'border-subtle-02'
+  }, {
+    state: 'selected',
+    name: 'border-subtle-selected-02'
+  }, {
+    name: 'border-subtle-03'
+  }, {
+    state: 'selected',
+    name: 'border-subtle-selected-03'
+  }, // Border strong
+  'border-strong-01', 'border-strong-02', 'border-strong-03', // Border inverse
+  'border-inverse', // Border interactive
+  'border-interactive', {
+    state: 'disabled',
+    name: 'border-disabled'
+  }]
+});
+var text = TokenGroup.create({
+  name: 'Text',
+  properties: ['text'],
+  tokens: ['text-primary', 'text-secondary', 'text-placeholder', 'text-helper', 'text-error', 'text-inverse', {
+    name: 'text-on-color'
+  }, {
+    state: 'disabled',
+    name: 'text-on-color-disabled'
+  }, {
+    state: 'disabled',
+    name: 'text-disabled'
+  }]
+});
+var link = TokenGroup.create({
+  name: 'Link',
+  properties: ['text'],
+  tokens: [{
+    name: 'link-primary'
+  }, {
+    state: 'hover',
+    name: 'link-primary-hover'
+  }, 'link-secondary', {
+    state: 'visited',
+    name: 'link-visited'
+  }, 'link-inverse', 'link-inverse-active', 'link-inverse-hover']
+});
+var icon = TokenGroup.create({
+  name: 'Icons',
+  properties: ['background', 'fill', 'stroke'],
+  tokens: ['icon-primary', 'icon-secondary', 'icon-inverse', {
+    name: 'icon-on-color'
+  }, {
+    state: 'disabled',
+    name: 'icon-on-color-disabled'
+  }, {
+    state: 'disabled',
+    name: 'icon-disabled'
+  }]
+});
+var support = TokenGroup.create({
+  name: 'Support',
+  properties: ['background', 'fill', 'stroke'],
+  tokens: ['support-error', 'support-success', 'support-warning', 'support-info', 'support-error-inverse', 'support-success-inverse', 'support-warning-inverse', 'support-info-inverse', 'support-caution-major', 'support-caution-minor', 'support-caution-undefined']
+});
+var focus = TokenGroup.create({
+  name: 'Focus',
+  properties: ['border'],
+  tokens: ['focus', 'focus-inset', 'focus-inverse']
+});
+var skeleton = TokenGroup.create({
+  name: 'Skeleton',
+  properties: ['background'],
+  tokens: ['skeleton-background', 'skeleton-element']
+});
+var contextual = TokenGroup.create({
+  name: 'Contextual',
+  properties: [],
+  tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong']
+});
+var group = TokenGroup.create({
+  name: 'All',
+  tokens: [background, layer, field, // Interactive
+  {
+    name: 'interactive',
+    properties: ['background', 'text']
+  }, border, text, link, icon, support, // Misc
+  {
+    name: 'highlight'
+  }, {
+    name: 'overlay',
+    properties: ['background']
+  }, {
+    name: 'toggle-off'
+  }, {
+    name: 'shadow'
+  }, focus, skeleton]
+});
+
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var button = TokenGroup.create({
+  name: 'Button',
+  properties: [],
+  tokens: ['button-separator', 'button-primary', 'button-secondary', 'button-tertiary', 'button-danger-primary', 'button-danger-secondary', 'button-danger-active', 'button-primary-active', 'button-secondary-active', 'button-tertiary-active', 'button-danger-hover', 'button-primary-hover', 'button-secondary-hover', 'button-tertiary-hover', 'button-disabled']
+});
+var notification = TokenGroup.create({
+  name: 'Notification',
+  properties: [],
+  tokens: ['notification-background-error', 'notification-background-success', 'notification-background-info', 'notification-background-warning', 'notification-action-hover', 'notification-action-tertiary-inverse', 'notification-action-tertiary-inverse-active', 'notification-action-tertiary-inverse-hover', 'notification-action-tertiary-inverse-text', 'notification-action-tertiary-inverse-text-on-color-disabled']
+});
+var tag = TokenGroup.create({
+  name: 'Tag',
+  properties: [],
+  tokens: ['tag-background-red', 'tag-color-red', 'tag-hover-red', 'tag-background-magenta', 'tag-color-magenta', 'tag-hover-magenta', 'tag-background-purple', 'tag-color-purple', 'tag-hover-purple', 'tag-background-blue', 'tag-color-blue', 'tag-hover-blue', 'tag-background-cyan', 'tag-color-cyan', 'tag-hover-cyan', 'tag-background-teal', 'tag-color-teal', 'tag-hover-teal', 'tag-background-green', 'tag-color-green', 'tag-hover-green', 'tag-background-gray', 'tag-color-gray', 'tag-hover-gray', 'tag-background-cool-gray', 'tag-color-cool-gray', 'tag-hover-cool-gray', 'tag-background-warm-gray', 'tag-color-warm-gray', 'tag-hover-warm-gray']
+});
+
+var components = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  button: button,
+  notification: notification,
+  tag: tag
+});
+
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var type$1 = TokenGroup.create({
+  name: 'Type',
+  properties: [],
+  tokens: ['caption-01', 'caption-02', 'label-01', 'label-02', 'helper-text-01', 'helper-text-02', 'body-short-01', 'body-long-01', 'body-short-02', 'body-long-02', 'code-01', 'code-02', 'heading-01', 'productive-heading-01', 'heading-02', 'productive-Heading-02', 'productive-heading-03', 'productive-heading-04', 'productive-heading-05', 'productive-heading-06', 'productive-heading-07', 'expressive-heading-01', 'expressive-heading-02', 'expressive-heading-03', 'expressive-heading-04', 'expressive-heading-05', 'expressive-heading-06', 'expressive-paragraph-01', 'quotation-01', 'quotation-02', 'display-01', 'display-02', 'display-03', 'display-04']
+});
+
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var layout$1 = TokenGroup.create({
+  name: 'Layout',
+  properties: [],
+  tokens: ['spacing-01', 'spacing-02', 'spacing-03', 'spacing-04', 'spacing-05', 'spacing-06', 'spacing-07', 'spacing-08', 'spacing-09', 'spacing-10', 'spacing-11', 'spacing-12', 'spacing-13', 'fluid-spacing-01', 'fluid-spacing-02', 'fluid-spacing-03', 'fluid-spacing-04', 'container-01', 'container-02', 'container-03', 'container-04', 'container-05', 'icon-size-01', 'icon-size-02']
+});
+
+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
+  'brand-01', 'brand-02', 'brand-03', 'active-01', 'hover-field', 'danger']
+});
+var type = TokenGroup.create({
+  name: 'Type',
+  properties: [],
+  tokens: ['caption-01', 'caption-02', 'label-01', 'label-02', 'helper-text-01', 'helper-text-02', 'body-short-01', 'body-long-01', 'body-short-02', 'body-long-02', 'code-01', 'code-02', 'heading-01', 'productive-heading-01', 'heading-02', 'productive-Heading-02', 'productive-heading-03', 'productive-heading-04', 'productive-heading-05', 'productive-heading-06', 'productive-heading-07', 'expressive-heading-01', 'expressive-heading-02', 'expressive-heading-03', 'expressive-heading-04', 'expressive-heading-05', 'expressive-heading-06', 'expressive-paragraph-01', 'quotation-01', 'quotation-02', 'display-01', 'display-02', 'display-03', 'display-04']
+});
+var layout = TokenGroup.create({
+  name: 'Layout',
+  properties: [],
+  tokens: ['spacing-01', 'spacing-02', 'spacing-03', 'spacing-04', 'spacing-05', 'spacing-06', 'spacing-07', 'spacing-08', 'spacing-09', 'spacing-10', 'spacing-11', 'spacing-12', 'spacing-13', 'layout-01', 'layout-02', 'layout-03', 'layout-04', 'layout-05', 'layout-06', 'layout-07', 'fluid-spacing-01', 'fluid-spacing-02', 'fluid-spacing-03', 'fluid-spacing-04', 'container-01', 'container-02', 'container-03', 'container-04', 'container-05', 'icon-size-01', 'icon-size-02']
+});
+var v10 = [].concat(_toConsumableArray(color.getTokens().map(function (token) {
+  return {
+    name: token.name,
+    type: 'color'
+  };
+})), _toConsumableArray(type.getTokens().map(function (token) {
+  return {
+    name: token.name,
+    type: 'type'
+  };
+})), _toConsumableArray(layout.getTokens().map(function (token) {
+  return {
+    name: token.name,
+    type: 'layout'
+  };
+})));
+
+var v11 = [].concat(_toConsumableArray(group.getTokens().map(function (token) {
+  return {
+    name: token.name,
+    type: 'color'
+  };
+})), _toConsumableArray(contextual.getTokens().map(function (token) {
+  return {
+    name: token.name,
+    type: 'color'
+  };
+})), _toConsumableArray(Object.values(components).flatMap(function (group) {
+  return group.getTokens().map(function (token) {
+    return {
+      name: token.name,
+      type: 'color'
+    };
+  });
+})), _toConsumableArray(type$1.getTokens().map(function (token) {
+  return {
+    name: token.name,
+    type: 'type'
+  };
+})), _toConsumableArray(layout$1.getTokens().map(function (token) {
+  return {
+    name: token.name,
+    type: 'layout'
+  };
+})));
+var unstable_metadata = {
+  v11: v11,
+  v10: v10
+};
+
 /**
  * Copyright IBM Corp. 2018, 2018
  *
@@ -3138,4 +4271,4 @@ var themes = {
   g100: g100$1
 };
 
-export { background$7 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$7 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, index as v10, white$1 as white };
+export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index as v10, white$1 as white };