@carbon/themes 10.25.0-rc.0 → 10.26.0

package/lib/index.js

@@ -2,13 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var Color = _interopDefault(require('color'));
-var colors = require('@carbon/colors');
+var Color = require('color');
+var colors$1 = require('@carbon/colors');
 var type = require('@carbon/type');
 var layout = require('@carbon/layout');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -69,8 +71,8 @@ function _objectSpread2(target) {
  */
 
 function adjustLightness(token, shift) {
-  var original = Color(token).hsl().object();
-  return Color(_objectSpread2(_objectSpread2({}, original), {}, {
+  var original = Color__default['default'](token).hsl().object();
+  return Color__default['default'](_objectSpread2(_objectSpread2({}, original), {}, {
     l: original.l += shift
   })).round().hex().toLowerCase();
 }
@@ -81,72 +83,72 @@ function adjustLightness(token, shift) {
  * 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 interactive01 = colors.blue60;
-var interactive02 = colors.gray80;
-var interactive03 = colors.blue60;
-var interactive04 = colors.blue60;
-var uiBackground = colors.white;
-var ui01 = colors.gray10;
-var ui02 = colors.white;
-var ui03 = colors.gray20;
-var ui04 = colors.gray50;
-var ui05 = colors.gray100;
-var text01 = colors.gray100;
-var text02 = colors.gray70;
-var text03 = colors.gray40;
-var text04 = colors.white;
-var text05 = colors.gray60;
-var textError = colors.red60;
-var icon01 = colors.gray100;
-var icon02 = colors.gray70;
-var icon03 = colors.white;
-var link01 = colors.blue60;
-var inverseLink = colors.blue40;
-var field01 = colors.gray10;
-var field02 = colors.white;
-var inverse01 = colors.white;
-var inverse02 = colors.gray80;
-var support01 = colors.red60;
-var support02 = colors.green50;
-var support03 = colors.yellow;
-var support04 = colors.blue70;
-var inverseSupport01 = colors.red50;
-var inverseSupport02 = colors.green40;
-var inverseSupport03 = colors.yellow;
-var inverseSupport04 = colors.blue50;
-var overlay01 = colors.rgba(colors.gray100, 0.5);
-var danger01 = colors.red60;
-var danger02 = colors.red60; // Interaction states
+var interactive01 = colors$1.blue60;
+var interactive02 = colors$1.gray80;
+var interactive03 = colors$1.blue60;
+var interactive04 = colors$1.blue60;
+var uiBackground = colors$1.white;
+var ui01 = colors$1.gray10;
+var ui02 = colors$1.white;
+var ui03 = colors$1.gray20;
+var ui04 = colors$1.gray50;
+var ui05 = colors$1.gray100;
+var text01 = colors$1.gray100;
+var text02 = colors$1.gray70;
+var text03 = colors$1.gray40;
+var text04 = colors$1.white;
+var text05 = colors$1.gray60;
+var textError = colors$1.red60;
+var icon01 = colors$1.gray100;
+var icon02 = colors$1.gray70;
+var icon03 = colors$1.white;
+var link01 = colors$1.blue60;
+var inverseLink = colors$1.blue40;
+var field01 = colors$1.gray10;
+var field02 = colors$1.white;
+var inverse01 = colors$1.white;
+var inverse02 = colors$1.gray80;
+var support01 = colors$1.red60;
+var support02 = colors$1.green50;
+var support03 = colors$1.yellow;
+var support04 = colors$1.blue70;
+var inverseSupport01 = colors$1.red50;
+var inverseSupport02 = colors$1.green40;
+var inverseSupport03 = colors$1.yellow;
+var inverseSupport04 = colors$1.blue50;
+var overlay01 = colors$1.rgba(colors$1.gray100, 0.5);
+var danger01 = colors$1.red60;
+var danger02 = colors$1.red60; // Interaction states
 
-var focus = colors.blue60;
-var inverseFocusUi = colors.white;
+var focus = colors$1.blue60;
+var inverseFocusUi = colors$1.white;
 var hoverPrimary = '#0353e9';
-var activePrimary = colors.blue80;
-var hoverPrimaryText = colors.blue70;
+var activePrimary = colors$1.blue80;
+var hoverPrimaryText = colors$1.blue70;
 var hoverSecondary = '#4c4c4c';
-var activeSecondary = colors.gray60;
+var activeSecondary = colors$1.gray60;
 var hoverTertiary = '#0353e9';
-var activeTertiary = colors.blue80;
+var activeTertiary = colors$1.blue80;
 var hoverUI = '#e5e5e5';
 var hoverLightUI = '#e5e5e5';
-var activeUI = colors.gray30;
-var activeLightUI = colors.gray30;
-var selectedUI = colors.gray20;
-var selectedLightUI = colors.gray20;
+var activeUI = colors$1.gray30;
+var activeLightUI = colors$1.gray30;
+var selectedUI = colors$1.gray20;
+var selectedLightUI = colors$1.gray20;
 var inverseHoverUI = '#4c4c4c';
 var hoverSelectedUI = '#cacaca';
 var hoverDanger = adjustLightness(danger01, -8);
-var activeDanger = colors.red80;
+var activeDanger = colors$1.red80;
 var hoverRow = '#e5e5e5';
-var visitedLink = colors.purple60;
-var disabled01 = colors.gray10;
-var disabled02 = colors.gray30;
-var disabled03 = colors.gray50;
-var highlight = colors.blue20;
-var decorative01 = colors.gray20;
+var visitedLink = colors$1.purple60;
+var disabled01 = colors$1.gray10;
+var disabled02 = colors$1.gray30;
+var disabled03 = colors$1.gray50;
+var highlight = colors$1.blue20;
+var decorative01 = colors$1.gray20;
 var buttonSeparator = '#e0e0e0';
 var skeleton01 = '#e5e5e5';
-var skeleton02 = colors.gray30; // Type
+var skeleton02 = colors$1.gray30; // Type
 
 var brand01 = interactive01;
 var brand02 = interactive02;
@@ -156,6 +158,7 @@ var hoverField = hoverUI;
 var danger = danger01;
 
 var white = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   interactive01: interactive01,
   interactive02: interactive02,
   interactive03: interactive03,
@@ -296,72 +299,72 @@ var white = /*#__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.
  */
-var interactive01$1 = colors.blue60;
-var interactive02$1 = colors.gray80;
-var interactive03$1 = colors.blue60;
-var interactive04$1 = colors.blue60;
-var uiBackground$1 = colors.gray10;
-var ui01$1 = colors.white;
-var ui02$1 = colors.gray10;
-var ui03$1 = colors.gray20;
-var ui04$1 = colors.gray50;
-var ui05$1 = colors.gray100;
-var text01$1 = colors.gray100;
-var text02$1 = colors.gray70;
-var text03$1 = colors.gray40;
-var text04$1 = colors.white;
-var text05$1 = colors.gray60;
-var textError$1 = colors.red60;
-var icon01$1 = colors.gray100;
-var icon02$1 = colors.gray70;
-var icon03$1 = colors.white;
-var link01$1 = colors.blue60;
-var inverseLink$1 = colors.blue40;
-var field01$1 = colors.white;
-var field02$1 = colors.gray10;
-var inverse01$1 = colors.white;
-var inverse02$1 = colors.gray80;
-var support01$1 = colors.red60;
-var support02$1 = colors.green50;
-var support03$1 = colors.yellow;
-var support04$1 = colors.blue70;
-var inverseSupport01$1 = colors.red50;
-var inverseSupport02$1 = colors.green40;
-var inverseSupport03$1 = colors.yellow;
-var inverseSupport04$1 = colors.blue50;
-var overlay01$1 = colors.rgba(colors.gray100, 0.5);
-var danger01$1 = colors.red60;
-var danger02$1 = colors.red60; // Interaction states
+var interactive01$1 = colors$1.blue60;
+var interactive02$1 = colors$1.gray80;
+var interactive03$1 = colors$1.blue60;
+var interactive04$1 = colors$1.blue60;
+var uiBackground$1 = colors$1.gray10;
+var ui01$1 = colors$1.white;
+var ui02$1 = colors$1.gray10;
+var ui03$1 = colors$1.gray20;
+var ui04$1 = colors$1.gray50;
+var ui05$1 = colors$1.gray100;
+var text01$1 = colors$1.gray100;
+var text02$1 = colors$1.gray70;
+var text03$1 = colors$1.gray40;
+var text04$1 = colors$1.white;
+var text05$1 = colors$1.gray60;
+var textError$1 = colors$1.red60;
+var icon01$1 = colors$1.gray100;
+var icon02$1 = colors$1.gray70;
+var icon03$1 = colors$1.white;
+var link01$1 = colors$1.blue60;
+var inverseLink$1 = colors$1.blue40;
+var field01$1 = colors$1.white;
+var field02$1 = colors$1.gray10;
+var inverse01$1 = colors$1.white;
+var inverse02$1 = colors$1.gray80;
+var support01$1 = colors$1.red60;
+var support02$1 = colors$1.green50;
+var support03$1 = colors$1.yellow;
+var support04$1 = colors$1.blue70;
+var inverseSupport01$1 = colors$1.red50;
+var inverseSupport02$1 = colors$1.green40;
+var inverseSupport03$1 = colors$1.yellow;
+var inverseSupport04$1 = colors$1.blue50;
+var overlay01$1 = colors$1.rgba(colors$1.gray100, 0.5);
+var danger01$1 = colors$1.red60;
+var danger02$1 = colors$1.red60; // Interaction states
 
-var focus$1 = colors.blue60;
-var inverseFocusUi$1 = colors.white;
+var focus$1 = colors$1.blue60;
+var inverseFocusUi$1 = colors$1.white;
 var hoverPrimary$1 = '#0353e9';
-var activePrimary$1 = colors.blue80;
-var hoverPrimaryText$1 = colors.blue70;
+var activePrimary$1 = colors$1.blue80;
+var hoverPrimaryText$1 = colors$1.blue70;
 var hoverSecondary$1 = '#4c4c4c';
-var activeSecondary$1 = colors.gray60;
+var activeSecondary$1 = colors$1.gray60;
 var hoverTertiary$1 = '#0353e9';
-var activeTertiary$1 = colors.blue80;
+var activeTertiary$1 = colors$1.blue80;
 var hoverUI$1 = '#e5e5e5';
 var hoverLightUI$1 = '#e5e5e5';
-var activeUI$1 = colors.gray30;
-var activeLightUI$1 = colors.gray30;
-var selectedUI$1 = colors.gray20;
-var selectedLightUI$1 = colors.gray20;
+var activeUI$1 = colors$1.gray30;
+var activeLightUI$1 = colors$1.gray30;
+var selectedUI$1 = colors$1.gray20;
+var selectedLightUI$1 = colors$1.gray20;
 var inverseHoverUI$1 = '#4c4c4c';
 var hoverSelectedUI$1 = '#cacaca';
 var hoverDanger$1 = adjustLightness(danger01$1, -8);
-var activeDanger$1 = colors.red80;
+var activeDanger$1 = colors$1.red80;
 var hoverRow$1 = '#e5e5e5';
-var visitedLink$1 = colors.purple60;
-var disabled01$1 = colors.white;
-var disabled02$1 = colors.gray30;
-var disabled03$1 = colors.gray50;
-var highlight$1 = colors.blue10;
-var decorative01$1 = colors.gray20;
+var visitedLink$1 = colors$1.purple60;
+var disabled01$1 = colors$1.white;
+var disabled02$1 = colors$1.gray30;
+var disabled03$1 = colors$1.gray50;
+var highlight$1 = colors$1.blue10;
+var decorative01$1 = colors$1.gray20;
 var buttonSeparator$1 = '#e0e0e0';
 var skeleton01$1 = '#e5e5e5';
-var skeleton02$1 = colors.gray30;
+var skeleton02$1 = colors$1.gray30;
 
 var brand01$1 = interactive01$1;
 var brand02$1 = interactive02$1;
@@ -371,6 +374,7 @@ var hoverField$1 = hoverUI$1;
 var danger$1 = danger01$1;
 
 var g10 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   interactive01: interactive01$1,
   interactive02: interactive02$1,
   interactive03: interactive03$1,
@@ -511,72 +515,72 @@ var g10 = /*#__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.
  */
-var interactive01$2 = colors.blue60;
-var interactive02$2 = colors.gray60;
-var interactive03$2 = colors.white;
-var interactive04$2 = colors.blue50;
-var uiBackground$2 = colors.gray100;
-var ui01$2 = colors.gray90;
-var ui02$2 = colors.gray80;
-var ui03$2 = colors.gray80;
-var ui04$2 = colors.gray60;
-var ui05$2 = colors.gray10;
-var text01$2 = colors.gray10;
-var text02$2 = colors.gray30;
-var text03$2 = colors.gray60;
-var text04$2 = colors.white;
-var text05$2 = colors.gray50;
-var textError$2 = colors.red40;
-var icon01$2 = colors.gray10;
-var icon02$2 = colors.gray30;
-var icon03$2 = colors.white;
-var link01$2 = colors.blue40;
-var inverseLink$2 = colors.blue60;
-var field01$2 = colors.gray90;
-var field02$2 = colors.gray80;
-var inverse01$2 = colors.gray100;
-var inverse02$2 = colors.gray10;
-var support01$2 = colors.red50;
-var support02$2 = colors.green40;
-var support03$2 = colors.yellow;
-var support04$2 = colors.blue50;
-var inverseSupport01$2 = colors.red60;
-var inverseSupport02$2 = colors.green50;
-var inverseSupport03$2 = colors.yellow;
-var inverseSupport04$2 = colors.blue60;
-var overlay01$2 = colors.rgba(colors.gray100, 0.7);
-var danger01$2 = colors.red60;
-var danger02$2 = colors.red50; // Interaction states
+var interactive01$2 = colors$1.blue60;
+var interactive02$2 = colors$1.gray60;
+var interactive03$2 = colors$1.white;
+var interactive04$2 = colors$1.blue50;
+var uiBackground$2 = colors$1.gray100;
+var ui01$2 = colors$1.gray90;
+var ui02$2 = colors$1.gray80;
+var ui03$2 = colors$1.gray80;
+var ui04$2 = colors$1.gray60;
+var ui05$2 = colors$1.gray10;
+var text01$2 = colors$1.gray10;
+var text02$2 = colors$1.gray30;
+var text03$2 = colors$1.gray60;
+var text04$2 = colors$1.white;
+var text05$2 = colors$1.gray50;
+var textError$2 = colors$1.red40;
+var icon01$2 = colors$1.gray10;
+var icon02$2 = colors$1.gray30;
+var icon03$2 = colors$1.white;
+var link01$2 = colors$1.blue40;
+var inverseLink$2 = colors$1.blue60;
+var field01$2 = colors$1.gray90;
+var field02$2 = colors$1.gray80;
+var inverse01$2 = colors$1.gray100;
+var inverse02$2 = colors$1.gray10;
+var support01$2 = colors$1.red50;
+var support02$2 = colors$1.green40;
+var support03$2 = colors$1.yellow;
+var support04$2 = colors$1.blue50;
+var inverseSupport01$2 = colors$1.red60;
+var inverseSupport02$2 = colors$1.green50;
+var inverseSupport03$2 = colors$1.yellow;
+var inverseSupport04$2 = colors$1.blue60;
+var overlay01$2 = colors$1.rgba(colors$1.gray100, 0.7);
+var danger01$2 = colors$1.red60;
+var danger02$2 = colors$1.red50; // Interaction states
 
-var focus$2 = colors.white;
-var inverseFocusUi$2 = colors.blue60;
+var focus$2 = colors$1.white;
+var inverseFocusUi$2 = colors$1.blue60;
 var hoverPrimary$2 = '#0353e9';
-var activePrimary$2 = colors.blue80;
-var hoverPrimaryText$2 = colors.blue30;
+var activePrimary$2 = colors$1.blue80;
+var hoverPrimaryText$2 = colors$1.blue30;
 var hoverSecondary$2 = '#606060';
-var activeSecondary$2 = colors.gray80;
-var hoverTertiary$2 = colors.gray10;
-var activeTertiary$2 = colors.gray30;
+var activeSecondary$2 = colors$1.gray80;
+var hoverTertiary$2 = colors$1.gray10;
+var activeTertiary$2 = colors$1.gray30;
 var hoverUI$2 = '#353535';
 var hoverLightUI$2 = '#4c4c4c';
-var activeUI$2 = colors.gray70;
-var activeLightUI$2 = colors.gray60;
-var selectedUI$2 = colors.gray80;
-var selectedLightUI$2 = colors.gray70;
+var activeUI$2 = colors$1.gray70;
+var activeLightUI$2 = colors$1.gray60;
+var selectedUI$2 = colors$1.gray80;
+var selectedLightUI$2 = colors$1.gray70;
 var inverseHoverUI$2 = '#e5e5e5';
 var hoverSelectedUI$2 = '#4c4c4c';
 var hoverDanger$2 = adjustLightness(danger01$2, -8);
-var activeDanger$2 = colors.red80;
+var activeDanger$2 = colors$1.red80;
 var hoverRow$2 = '#353535';
-var visitedLink$2 = colors.purple40;
-var disabled01$2 = colors.gray90;
-var disabled02$2 = colors.gray70;
-var disabled03$2 = colors.gray50;
-var highlight$2 = colors.blue80;
-var decorative01$2 = colors.gray70;
+var visitedLink$2 = colors$1.purple40;
+var disabled01$2 = colors$1.gray90;
+var disabled02$2 = colors$1.gray70;
+var disabled03$2 = colors$1.gray50;
+var highlight$2 = colors$1.blue80;
+var decorative01$2 = colors$1.gray70;
 var buttonSeparator$2 = '#161616';
 var skeleton01$2 = '#353535';
-var skeleton02$2 = colors.gray80;
+var skeleton02$2 = colors$1.gray80;
 
 var brand01$2 = interactive01$2;
 var brand02$2 = interactive02$2;
@@ -586,6 +590,7 @@ var hoverField$2 = hoverUI$2;
 var danger$2 = danger01$2;
 
 var g100 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   interactive01: interactive01$2,
   interactive02: interactive02$2,
   interactive03: interactive03$2,
@@ -726,72 +731,72 @@ 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.
  */
-var interactive01$3 = colors.blue60;
-var interactive02$3 = colors.gray60;
-var interactive03$3 = colors.white;
-var interactive04$3 = colors.blue50;
-var uiBackground$3 = colors.gray90;
-var ui01$3 = colors.gray80;
-var ui02$3 = colors.gray70;
-var ui03$3 = colors.gray70;
-var ui04$3 = colors.gray50;
-var ui05$3 = colors.gray10;
-var text01$3 = colors.gray10;
-var text02$3 = colors.gray30;
-var text03$3 = colors.gray60;
-var text04$3 = colors.white;
-var text05$3 = colors.gray50;
-var textError$3 = colors.red30;
-var icon01$3 = colors.gray10;
-var icon02$3 = colors.gray30;
-var icon03$3 = colors.white;
-var link01$3 = colors.blue40;
-var inverseLink$3 = colors.blue60;
-var field01$3 = colors.gray80;
-var field02$3 = colors.gray70;
-var inverse01$3 = colors.gray100;
-var inverse02$3 = colors.gray10;
-var support01$3 = colors.red40;
-var support02$3 = colors.green40;
-var support03$3 = colors.yellow;
-var support04$3 = colors.blue50;
-var inverseSupport01$3 = colors.red60;
-var inverseSupport02$3 = colors.green50;
-var inverseSupport03$3 = colors.yellow;
-var inverseSupport04$3 = colors.blue60;
-var overlay01$3 = colors.rgba(colors.gray100, 0.7);
-var danger01$3 = colors.red60;
-var danger02$3 = colors.red40; // Interaction states
+var interactive01$3 = colors$1.blue60;
+var interactive02$3 = colors$1.gray60;
+var interactive03$3 = colors$1.white;
+var interactive04$3 = colors$1.blue50;
+var uiBackground$3 = colors$1.gray90;
+var ui01$3 = colors$1.gray80;
+var ui02$3 = colors$1.gray70;
+var ui03$3 = colors$1.gray70;
+var ui04$3 = colors$1.gray50;
+var ui05$3 = colors$1.gray10;
+var text01$3 = colors$1.gray10;
+var text02$3 = colors$1.gray30;
+var text03$3 = colors$1.gray60;
+var text04$3 = colors$1.white;
+var text05$3 = colors$1.gray50;
+var textError$3 = colors$1.red30;
+var icon01$3 = colors$1.gray10;
+var icon02$3 = colors$1.gray30;
+var icon03$3 = colors$1.white;
+var link01$3 = colors$1.blue40;
+var inverseLink$3 = colors$1.blue60;
+var field01$3 = colors$1.gray80;
+var field02$3 = colors$1.gray70;
+var inverse01$3 = colors$1.gray100;
+var inverse02$3 = colors$1.gray10;
+var support01$3 = colors$1.red40;
+var support02$3 = colors$1.green40;
+var support03$3 = colors$1.yellow;
+var support04$3 = colors$1.blue50;
+var inverseSupport01$3 = colors$1.red60;
+var inverseSupport02$3 = colors$1.green50;
+var inverseSupport03$3 = colors$1.yellow;
+var inverseSupport04$3 = colors$1.blue60;
+var overlay01$3 = colors$1.rgba(colors$1.gray100, 0.7);
+var danger01$3 = colors$1.red60;
+var danger02$3 = colors$1.red40; // Interaction states
 
-var focus$3 = colors.white;
-var inverseFocusUi$3 = colors.blue60;
+var focus$3 = colors$1.white;
+var inverseFocusUi$3 = colors$1.blue60;
 var hoverPrimary$3 = '#0353e9';
-var activePrimary$3 = colors.blue80;
-var hoverPrimaryText$3 = colors.blue30;
+var activePrimary$3 = colors$1.blue80;
+var hoverPrimaryText$3 = colors$1.blue30;
 var hoverSecondary$3 = '#606060';
-var activeSecondary$3 = colors.gray80;
-var hoverTertiary$3 = colors.gray10;
-var activeTertiary$3 = colors.gray30;
+var activeSecondary$3 = colors$1.gray80;
+var hoverTertiary$3 = colors$1.gray10;
+var activeTertiary$3 = colors$1.gray30;
 var hoverUI$3 = '#4c4c4c';
 var hoverLightUI$3 = '#656565';
-var activeUI$3 = colors.gray60;
-var activeLightUI$3 = colors.gray50;
-var selectedUI$3 = colors.gray70;
-var selectedLightUI$3 = colors.gray60;
+var activeUI$3 = colors$1.gray60;
+var activeLightUI$3 = colors$1.gray50;
+var selectedUI$3 = colors$1.gray70;
+var selectedLightUI$3 = colors$1.gray60;
 var inverseHoverUI$3 = '#e5e5e5';
 var hoverSelectedUI$3 = '#656565';
 var hoverDanger$3 = adjustLightness(danger01$3, -8);
-var activeDanger$3 = colors.red80;
+var activeDanger$3 = colors$1.red80;
 var hoverRow$3 = '#4c4c4c';
-var visitedLink$3 = colors.purple40;
-var disabled01$3 = colors.gray80;
-var disabled02$3 = colors.gray60;
-var disabled03$3 = colors.gray40;
-var highlight$3 = colors.blue70;
-var decorative01$3 = colors.gray60;
+var visitedLink$3 = colors$1.purple40;
+var disabled01$3 = colors$1.gray80;
+var disabled02$3 = colors$1.gray60;
+var disabled03$3 = colors$1.gray40;
+var highlight$3 = colors$1.blue70;
+var decorative01$3 = colors$1.gray60;
 var buttonSeparator$3 = '#161616';
 var skeleton01$3 = '#353535';
-var skeleton02$3 = colors.gray70;
+var skeleton02$3 = colors$1.gray70;
 
 var brand01$3 = interactive01$3;
 var brand02$3 = interactive02$3;
@@ -801,6 +806,7 @@ var hoverField$3 = hoverUI$3;
 var danger$3 = danger01$3;
 
 var g90 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   interactive01: interactive01$3,
   interactive02: interactive02$3,
   interactive03: interactive03$3,
@@ -946,7 +952,7 @@ var interactive02$4 = '#4d5358';
 var interactive03$4 = '#3d70b2';
 var interactive04$4 = '#3d70b2';
 var uiBackground$4 = '#f4f7fb';
-var ui01$4 = colors.white;
+var ui01$4 = colors$1.white;
 var ui02$4 = '#f4f7fb';
 var ui03$4 = '#dfe3e6';
 var ui04$4 = '#8897a2';
@@ -954,17 +960,17 @@ var ui05$4 = '#5a6872';
 var text01$4 = '#152935';
 var text02$4 = '#5a6872';
 var text03$4 = '#cdd1d4';
-var text04$4 = colors.white;
+var text04$4 = colors$1.white;
 var text05$4 = '#5a6872';
 var textError$4 = '#e0182d';
 var icon01$4 = '#3d70b2';
 var icon02$4 = '#5a6872';
-var icon03$4 = colors.white;
+var icon03$4 = colors$1.white;
 var link01$4 = '#3d70b2';
 var inverseLink$4 = '#5596e6';
-var field01$4 = colors.white;
+var field01$4 = colors$1.white;
 var field02$4 = '#f4f7fb';
-var inverse01$4 = colors.white;
+var inverse01$4 = colors$1.white;
 var inverse02$4 = '#272d33';
 var support01$4 = '#e0182d';
 var support02$4 = '#5aa700';
@@ -975,8 +981,8 @@ var inverseSupport02$4 = '#8cd211';
 var inverseSupport03$4 = '#FDD600';
 var inverseSupport04$4 = '#5aaafa';
 var overlay01$4 = 'rgba(223, 227, 230, 0.5)';
-var danger01$4 = colors.red60;
-var danger02$4 = colors.red60; // Interaction states
+var danger01$4 = colors$1.red60;
+var danger02$4 = colors$1.red60; // Interaction states
 
 var focus$4 = '#3d70b2';
 var inverseFocusUi$4 = '#3d70b2';
@@ -1016,6 +1022,7 @@ var hoverField$4 = hoverUI$4;
 var danger$4 = danger01$4;
 
 var v9 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   interactive01: interactive01$4,
   interactive02: interactive02$4,
   interactive03: interactive03$4,
@@ -1158,7 +1165,7 @@ var v9 = /*#__PURE__*/Object.freeze({
  */
 // exported as in JavaScript
 
-var colors$1 = [// Core
+var colors = [// Core
 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', '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', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
@@ -1202,7 +1209,7 @@ function formatTokenName(token) {
   return string;
 }
 var tokens = {
-  colors: colors$1,
+  colors: colors,
   type: type.unstable_tokens,
   layout: layout.unstable_tokens
 };
@@ -1231,144 +1238,449 @@ var themes = {
   v9: v9
 };
 
-exports.caption01 = type.caption01;
-exports.label01 = type.label01;
-exports.helperText01 = type.helperText01;
-exports.bodyShort01 = type.bodyShort01;
-exports.bodyLong01 = type.bodyLong01;
-exports.bodyShort02 = type.bodyShort02;
-exports.bodyLong02 = type.bodyLong02;
-exports.code01 = type.code01;
-exports.code02 = type.code02;
-exports.heading01 = type.heading01;
-exports.productiveHeading01 = type.productiveHeading01;
-exports.heading02 = type.heading02;
-exports.productiveHeading02 = type.productiveHeading02;
-exports.productiveHeading03 = type.productiveHeading03;
-exports.productiveHeading04 = type.productiveHeading04;
-exports.productiveHeading05 = type.productiveHeading05;
-exports.productiveHeading06 = type.productiveHeading06;
-exports.productiveHeading07 = type.productiveHeading07;
-exports.expressiveHeading01 = type.expressiveHeading01;
-exports.expressiveHeading02 = type.expressiveHeading02;
-exports.expressiveHeading03 = type.expressiveHeading03;
-exports.expressiveHeading04 = type.expressiveHeading04;
-exports.expressiveHeading05 = type.expressiveHeading05;
-exports.expressiveHeading06 = type.expressiveHeading06;
-exports.expressiveParagraph01 = type.expressiveParagraph01;
-exports.quotation01 = type.quotation01;
-exports.quotation02 = type.quotation02;
-exports.display01 = type.display01;
-exports.display02 = type.display02;
-exports.display03 = type.display03;
-exports.display04 = type.display04;
-exports.spacing01 = layout.spacing01;
-exports.spacing02 = layout.spacing02;
-exports.spacing03 = layout.spacing03;
-exports.spacing04 = layout.spacing04;
-exports.spacing05 = layout.spacing05;
-exports.spacing06 = layout.spacing06;
-exports.spacing07 = layout.spacing07;
-exports.spacing08 = layout.spacing08;
-exports.spacing09 = layout.spacing09;
-exports.spacing10 = layout.spacing10;
-exports.spacing11 = layout.spacing11;
-exports.spacing12 = layout.spacing12;
-exports.fluidSpacing01 = layout.fluidSpacing01;
-exports.fluidSpacing02 = layout.fluidSpacing02;
-exports.fluidSpacing03 = layout.fluidSpacing03;
-exports.fluidSpacing04 = layout.fluidSpacing04;
-exports.layout01 = layout.layout01;
-exports.layout02 = layout.layout02;
-exports.layout03 = layout.layout03;
-exports.layout04 = layout.layout04;
-exports.layout05 = layout.layout05;
-exports.layout06 = layout.layout06;
-exports.layout07 = layout.layout07;
-exports.container01 = layout.container01;
-exports.container02 = layout.container02;
-exports.container03 = layout.container03;
-exports.container04 = layout.container04;
-exports.container05 = layout.container05;
-exports.iconSize01 = layout.iconSize01;
-exports.iconSize02 = layout.iconSize02;
+Object.defineProperty(exports, 'bodyLong01', {
+  enumerable: true,
+  get: function () {
+    return type.bodyLong01;
+  }
+});
+Object.defineProperty(exports, 'bodyLong02', {
+  enumerable: true,
+  get: function () {
+    return type.bodyLong02;
+  }
+});
+Object.defineProperty(exports, 'bodyShort01', {
+  enumerable: true,
+  get: function () {
+    return type.bodyShort01;
+  }
+});
+Object.defineProperty(exports, 'bodyShort02', {
+  enumerable: true,
+  get: function () {
+    return type.bodyShort02;
+  }
+});
+Object.defineProperty(exports, 'caption01', {
+  enumerable: true,
+  get: function () {
+    return type.caption01;
+  }
+});
+Object.defineProperty(exports, 'code01', {
+  enumerable: true,
+  get: function () {
+    return type.code01;
+  }
+});
+Object.defineProperty(exports, 'code02', {
+  enumerable: true,
+  get: function () {
+    return type.code02;
+  }
+});
+Object.defineProperty(exports, 'display01', {
+  enumerable: true,
+  get: function () {
+    return type.display01;
+  }
+});
+Object.defineProperty(exports, 'display02', {
+  enumerable: true,
+  get: function () {
+    return type.display02;
+  }
+});
+Object.defineProperty(exports, 'display03', {
+  enumerable: true,
+  get: function () {
+    return type.display03;
+  }
+});
+Object.defineProperty(exports, 'display04', {
+  enumerable: true,
+  get: function () {
+    return type.display04;
+  }
+});
+Object.defineProperty(exports, 'expressiveHeading01', {
+  enumerable: true,
+  get: function () {
+    return type.expressiveHeading01;
+  }
+});
+Object.defineProperty(exports, 'expressiveHeading02', {
+  enumerable: true,
+  get: function () {
+    return type.expressiveHeading02;
+  }
+});
+Object.defineProperty(exports, 'expressiveHeading03', {
+  enumerable: true,
+  get: function () {
+    return type.expressiveHeading03;
+  }
+});
+Object.defineProperty(exports, 'expressiveHeading04', {
+  enumerable: true,
+  get: function () {
+    return type.expressiveHeading04;
+  }
+});
+Object.defineProperty(exports, 'expressiveHeading05', {
+  enumerable: true,
+  get: function () {
+    return type.expressiveHeading05;
+  }
+});
+Object.defineProperty(exports, 'expressiveHeading06', {
+  enumerable: true,
+  get: function () {
+    return type.expressiveHeading06;
+  }
+});
+Object.defineProperty(exports, 'expressiveParagraph01', {
+  enumerable: true,
+  get: function () {
+    return type.expressiveParagraph01;
+  }
+});
+Object.defineProperty(exports, 'heading01', {
+  enumerable: true,
+  get: function () {
+    return type.heading01;
+  }
+});
+Object.defineProperty(exports, 'heading02', {
+  enumerable: true,
+  get: function () {
+    return type.heading02;
+  }
+});
+Object.defineProperty(exports, 'helperText01', {
+  enumerable: true,
+  get: function () {
+    return type.helperText01;
+  }
+});
+Object.defineProperty(exports, 'label01', {
+  enumerable: true,
+  get: function () {
+    return type.label01;
+  }
+});
+Object.defineProperty(exports, 'productiveHeading01', {
+  enumerable: true,
+  get: function () {
+    return type.productiveHeading01;
+  }
+});
+Object.defineProperty(exports, 'productiveHeading02', {
+  enumerable: true,
+  get: function () {
+    return type.productiveHeading02;
+  }
+});
+Object.defineProperty(exports, 'productiveHeading03', {
+  enumerable: true,
+  get: function () {
+    return type.productiveHeading03;
+  }
+});
+Object.defineProperty(exports, 'productiveHeading04', {
+  enumerable: true,
+  get: function () {
+    return type.productiveHeading04;
+  }
+});
+Object.defineProperty(exports, 'productiveHeading05', {
+  enumerable: true,
+  get: function () {
+    return type.productiveHeading05;
+  }
+});
+Object.defineProperty(exports, 'productiveHeading06', {
+  enumerable: true,
+  get: function () {
+    return type.productiveHeading06;
+  }
+});
+Object.defineProperty(exports, 'productiveHeading07', {
+  enumerable: true,
+  get: function () {
+    return type.productiveHeading07;
+  }
+});
+Object.defineProperty(exports, 'quotation01', {
+  enumerable: true,
+  get: function () {
+    return type.quotation01;
+  }
+});
+Object.defineProperty(exports, 'quotation02', {
+  enumerable: true,
+  get: function () {
+    return type.quotation02;
+  }
+});
+Object.defineProperty(exports, 'container01', {
+  enumerable: true,
+  get: function () {
+    return layout.container01;
+  }
+});
+Object.defineProperty(exports, 'container02', {
+  enumerable: true,
+  get: function () {
+    return layout.container02;
+  }
+});
+Object.defineProperty(exports, 'container03', {
+  enumerable: true,
+  get: function () {
+    return layout.container03;
+  }
+});
+Object.defineProperty(exports, 'container04', {
+  enumerable: true,
+  get: function () {
+    return layout.container04;
+  }
+});
+Object.defineProperty(exports, 'container05', {
+  enumerable: true,
+  get: function () {
+    return layout.container05;
+  }
+});
+Object.defineProperty(exports, 'fluidSpacing01', {
+  enumerable: true,
+  get: function () {
+    return layout.fluidSpacing01;
+  }
+});
+Object.defineProperty(exports, 'fluidSpacing02', {
+  enumerable: true,
+  get: function () {
+    return layout.fluidSpacing02;
+  }
+});
+Object.defineProperty(exports, 'fluidSpacing03', {
+  enumerable: true,
+  get: function () {
+    return layout.fluidSpacing03;
+  }
+});
+Object.defineProperty(exports, 'fluidSpacing04', {
+  enumerable: true,
+  get: function () {
+    return layout.fluidSpacing04;
+  }
+});
+Object.defineProperty(exports, 'iconSize01', {
+  enumerable: true,
+  get: function () {
+    return layout.iconSize01;
+  }
+});
+Object.defineProperty(exports, 'iconSize02', {
+  enumerable: true,
+  get: function () {
+    return layout.iconSize02;
+  }
+});
+Object.defineProperty(exports, 'layout01', {
+  enumerable: true,
+  get: function () {
+    return layout.layout01;
+  }
+});
+Object.defineProperty(exports, 'layout02', {
+  enumerable: true,
+  get: function () {
+    return layout.layout02;
+  }
+});
+Object.defineProperty(exports, 'layout03', {
+  enumerable: true,
+  get: function () {
+    return layout.layout03;
+  }
+});
+Object.defineProperty(exports, 'layout04', {
+  enumerable: true,
+  get: function () {
+    return layout.layout04;
+  }
+});
+Object.defineProperty(exports, 'layout05', {
+  enumerable: true,
+  get: function () {
+    return layout.layout05;
+  }
+});
+Object.defineProperty(exports, 'layout06', {
+  enumerable: true,
+  get: function () {
+    return layout.layout06;
+  }
+});
+Object.defineProperty(exports, 'layout07', {
+  enumerable: true,
+  get: function () {
+    return layout.layout07;
+  }
+});
+Object.defineProperty(exports, 'spacing01', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing01;
+  }
+});
+Object.defineProperty(exports, 'spacing02', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing02;
+  }
+});
+Object.defineProperty(exports, 'spacing03', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing03;
+  }
+});
+Object.defineProperty(exports, 'spacing04', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing04;
+  }
+});
+Object.defineProperty(exports, 'spacing05', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing05;
+  }
+});
+Object.defineProperty(exports, 'spacing06', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing06;
+  }
+});
+Object.defineProperty(exports, 'spacing07', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing07;
+  }
+});
+Object.defineProperty(exports, 'spacing08', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing08;
+  }
+});
+Object.defineProperty(exports, 'spacing09', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing09;
+  }
+});
+Object.defineProperty(exports, 'spacing10', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing10;
+  }
+});
+Object.defineProperty(exports, 'spacing11', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing11;
+  }
+});
+Object.defineProperty(exports, 'spacing12', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing12;
+  }
+});
+exports.active01 = active01;
+exports.activeDanger = activeDanger;
+exports.activeLightUI = activeLightUI;
+exports.activePrimary = activePrimary;
+exports.activeSecondary = activeSecondary;
+exports.activeTertiary = activeTertiary;
+exports.activeUI = activeUI;
+exports.brand01 = brand01;
+exports.brand02 = brand02;
+exports.brand03 = brand03;
+exports.buttonSeparator = buttonSeparator;
+exports.danger = danger;
+exports.danger01 = danger01;
+exports.danger02 = danger02;
+exports.decorative01 = decorative01;
+exports.disabled01 = disabled01;
+exports.disabled02 = disabled02;
+exports.disabled03 = disabled03;
+exports.field01 = field01;
+exports.field02 = field02;
+exports.focus = focus;
+exports.formatTokenName = formatTokenName;
 exports.g10 = g10;
-exports.g90 = g90;
 exports.g100 = g100;
-exports.white = white;
-exports.v9 = v9;
-exports.tokens = tokens;
-exports.formatTokenName = formatTokenName;
-exports.unstable__meta = unstable__meta;
-exports.themes = themes;
+exports.g90 = g90;
+exports.highlight = highlight;
+exports.hoverDanger = hoverDanger;
+exports.hoverField = hoverField;
+exports.hoverLightUI = hoverLightUI;
+exports.hoverPrimary = hoverPrimary;
+exports.hoverPrimaryText = hoverPrimaryText;
+exports.hoverRow = hoverRow;
+exports.hoverSecondary = hoverSecondary;
+exports.hoverSelectedUI = hoverSelectedUI;
+exports.hoverTertiary = hoverTertiary;
+exports.hoverUI = hoverUI;
+exports.icon01 = icon01;
+exports.icon02 = icon02;
+exports.icon03 = icon03;
 exports.interactive01 = interactive01;
 exports.interactive02 = interactive02;
 exports.interactive03 = interactive03;
 exports.interactive04 = interactive04;
-exports.uiBackground = uiBackground;
-exports.ui01 = ui01;
-exports.ui02 = ui02;
-exports.ui03 = ui03;
-exports.ui04 = ui04;
-exports.ui05 = ui05;
-exports.text01 = text01;
-exports.text02 = text02;
-exports.text03 = text03;
-exports.text04 = text04;
-exports.text05 = text05;
-exports.textError = textError;
-exports.icon01 = icon01;
-exports.icon02 = icon02;
-exports.icon03 = icon03;
-exports.link01 = link01;
-exports.inverseLink = inverseLink;
-exports.field01 = field01;
-exports.field02 = field02;
 exports.inverse01 = inverse01;
 exports.inverse02 = inverse02;
-exports.support01 = support01;
-exports.support02 = support02;
-exports.support03 = support03;
-exports.support04 = support04;
+exports.inverseFocusUi = inverseFocusUi;
+exports.inverseHoverUI = inverseHoverUI;
+exports.inverseLink = inverseLink;
 exports.inverseSupport01 = inverseSupport01;
 exports.inverseSupport02 = inverseSupport02;
 exports.inverseSupport03 = inverseSupport03;
 exports.inverseSupport04 = inverseSupport04;
+exports.link01 = link01;
 exports.overlay01 = overlay01;
-exports.danger01 = danger01;
-exports.danger02 = danger02;
-exports.focus = focus;
-exports.inverseFocusUi = inverseFocusUi;
-exports.hoverPrimary = hoverPrimary;
-exports.activePrimary = activePrimary;
-exports.hoverPrimaryText = hoverPrimaryText;
-exports.hoverSecondary = hoverSecondary;
-exports.activeSecondary = activeSecondary;
-exports.hoverTertiary = hoverTertiary;
-exports.activeTertiary = activeTertiary;
-exports.hoverUI = hoverUI;
-exports.hoverLightUI = hoverLightUI;
-exports.activeUI = activeUI;
-exports.activeLightUI = activeLightUI;
-exports.selectedUI = selectedUI;
 exports.selectedLightUI = selectedLightUI;
-exports.inverseHoverUI = inverseHoverUI;
-exports.hoverSelectedUI = hoverSelectedUI;
-exports.hoverDanger = hoverDanger;
-exports.activeDanger = activeDanger;
-exports.hoverRow = hoverRow;
-exports.visitedLink = visitedLink;
-exports.disabled01 = disabled01;
-exports.disabled02 = disabled02;
-exports.disabled03 = disabled03;
-exports.highlight = highlight;
-exports.decorative01 = decorative01;
-exports.buttonSeparator = buttonSeparator;
+exports.selectedUI = selectedUI;
 exports.skeleton01 = skeleton01;
 exports.skeleton02 = skeleton02;
-exports.brand01 = brand01;
-exports.brand02 = brand02;
-exports.brand03 = brand03;
-exports.active01 = active01;
-exports.hoverField = hoverField;
-exports.danger = danger;
+exports.support01 = support01;
+exports.support02 = support02;
+exports.support03 = support03;
+exports.support04 = support04;
+exports.text01 = text01;
+exports.text02 = text02;
+exports.text03 = text03;
+exports.text04 = text04;
+exports.text05 = text05;
+exports.textError = textError;
+exports.themes = themes;
+exports.tokens = tokens;
+exports.ui01 = ui01;
+exports.ui02 = ui02;
+exports.ui03 = ui03;
+exports.ui04 = ui04;
+exports.ui05 = ui05;
+exports.uiBackground = uiBackground;
+exports.unstable__meta = unstable__meta;
+exports.v9 = v9;
+exports.visitedLink = visitedLink;
+exports.white = white;