@carbon/themes 10.32.0 → 10.34.0

package/umd/index.js

@@ -8,29 +8,18 @@
 
   var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
-
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
 
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
+
+      if (enumerableOnly) {
+        symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+
       keys.push.apply(keys, symbols);
     }
 
@@ -57,6 +46,21 @@
     return target;
   }
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   /**
    * Adjust a given token's lightness by a specified percentage
    * Example: token = hsl(10, 10, 10);
@@ -74,6 +78,378 @@
     })).round().hex().toLowerCase();
   }
 
+  /**
+   * 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 interactive01$5 = colors$1.blue60;
+  var interactive02$5 = colors$1.gray80;
+  var interactive03$5 = colors$1.blue60;
+  var interactive04$5 = colors$1.blue60;
+  var uiBackground$5 = colors$1.white;
+  var ui01$5 = colors$1.gray10;
+  var ui02$5 = colors$1.white;
+  var ui03$5 = colors$1.gray20;
+  var ui04$5 = colors$1.gray50;
+  var ui05$5 = colors$1.gray100;
+  var text01$5 = colors$1.gray100;
+  var text02$5 = colors$1.gray70;
+  var text03$5 = colors$1.gray40;
+  var text04$5 = colors$1.white;
+  var text05$5 = colors$1.gray60;
+  var textError$5 = colors$1.red60;
+  var icon01$5 = colors$1.gray100;
+  var icon02$5 = colors$1.gray70;
+  var icon03$5 = colors$1.white;
+  var link01$5 = colors$1.blue60;
+  var link02$5 = colors$1.blue70;
+  var inverseLink$5 = colors$1.blue40;
+  var field01$5 = colors$1.gray10;
+  var field02$5 = colors$1.white;
+  var inverse01$5 = colors$1.white;
+  var inverse02$5 = colors$1.gray80;
+  var support01$5 = colors$1.red60;
+  var support02$5 = colors$1.green60;
+  var support03$5 = colors$1.yellow;
+  var support04$5 = colors$1.blue70;
+  var inverseSupport01$5 = colors$1.red50;
+  var inverseSupport02$5 = colors$1.green40;
+  var inverseSupport03$5 = colors$1.yellow;
+  var inverseSupport04$5 = colors$1.blue50;
+  var overlay01$5 = colors$1.rgba(colors$1.gray100, 0.5);
+  var danger01$5 = colors$1.red60;
+  var danger02$5 = colors$1.red60; // Interaction states
+
+  var focus$5 = colors$1.blue60;
+  var inverseFocusUi$5 = colors$1.white;
+  var hoverPrimary$5 = '#0353e9';
+  var activePrimary$5 = colors$1.blue80;
+  var hoverPrimaryText$5 = colors$1.blue70;
+  var hoverSecondary$5 = '#4c4c4c';
+  var activeSecondary$5 = colors$1.gray60;
+  var hoverTertiary$5 = '#0353e9';
+  var activeTertiary$5 = colors$1.blue80;
+  var hoverUI$5 = '#e5e5e5';
+  var hoverLightUI$5 = '#e5e5e5';
+  var activeUI$5 = colors$1.gray30;
+  var activeLightUI$5 = colors$1.gray30;
+  var selectedUI$5 = colors$1.gray20;
+  var selectedLightUI$5 = colors$1.gray20;
+  var inverseHoverUI$5 = '#4c4c4c';
+  var hoverSelectedUI$5 = '#cacaca';
+  var hoverDanger$5 = adjustLightness(danger01$5, -8);
+  var activeDanger$5 = colors$1.red80;
+  var hoverRow$5 = '#e5e5e5';
+  var visitedLink$5 = colors$1.purple60;
+  var disabled01$5 = colors$1.gray10;
+  var disabled02$5 = colors$1.gray30;
+  var disabled03$5 = colors$1.gray50;
+  var highlight$5 = colors$1.blue20;
+  var decorative01$5 = colors$1.gray20;
+  var buttonSeparator$5 = '#e0e0e0';
+  var skeleton01$5 = '#e5e5e5';
+  var skeleton02$5 = colors$1.gray30; // New color tokens
+  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+
+  var background$5 = uiBackground$5;
+  var layer$5 = ui01$5;
+  var layerAccent$5 = ui03$5;
+  var field$5 = field01$5;
+  var backgroundInverse$5 = inverse02$5;
+  var backgroundBrand$5 = interactive01$5;
+  var interactive$5 = interactive04$5;
+  var borderSubtle$5 = ui03$5;
+  var borderStrong$5 = ui04$5;
+  var borderInverse$5 = ui05$5;
+  var borderInteractive$5 = interactive04$5;
+  var textPrimary$5 = text01$5;
+  var textSecondary$5 = text02$5;
+  var textPlaceholder$5 = text03$5;
+  var textHelper$5 = text05$5;
+  var textOnColor$5 = text04$5;
+  var textInverse$5 = inverse01$5;
+  var linkPrimary$5 = link01$5;
+  var linkSecondary$5 = link02$5;
+  var linkVisited$5 = visitedLink$5;
+  var linkInverse$5 = inverseLink$5;
+  var iconPrimary$5 = icon01$5;
+  var iconSecondary$5 = icon02$5;
+  var iconOnColor$5 = icon03$5;
+  var iconInverse$5 = inverse01$5;
+  var supportError$5 = support01$5;
+  var supportSuccess$5 = support02$5;
+  var supportWarning$5 = support03$5;
+  var supportInfo$5 = support04$5;
+  var supportErrorInverse$5 = inverseSupport01$5;
+  var supportSuccessInverse$5 = inverseSupport02$5;
+  var supportWarningInverse$5 = inverseSupport03$5;
+  var supportInfoInverse$5 = inverseSupport04$5;
+  var overlay$5 = overlay01$5;
+  var toggleOff$5 = ui04$5;
+  var buttonPrimary$5 = interactive01$5;
+  var buttonSecondary$5 = interactive02$5;
+  var buttonTertiary$5 = interactive03$5;
+  var buttonDangerPrimary$5 = danger01$5;
+  var buttonDangerSecondary$5 = danger02$5;
+  var backgroundActive$5 = activeUI$5;
+  var layerActive$5 = activeUI$5;
+  var buttonDangerActive$5 = activeDanger$5;
+  var buttonPrimaryActive$5 = activePrimary$5;
+  var buttonSecondaryActive$5 = activeSecondary$5;
+  var buttonTertiaryActive$5 = activeTertiary$5;
+  var focusInset$5 = inverse01$5;
+  var focusInverse$5 = inverseFocusUi$5;
+  var backgroundHover$5 = hoverUI$5;
+  var layerHover$5 = hoverUI$5;
+  var fieldHover$5 = hoverUI$5;
+  var backgroundInverseHover$5 = inverseHoverUI$5;
+  var linkPrimaryHover$5 = hoverPrimaryText$5;
+  var buttonDangerHover$5 = hoverDanger$5;
+  var buttonPrimaryHover$5 = hoverPrimary$5;
+  var buttonSecondaryHover$5 = hoverSecondary$5;
+  var buttonTertiaryHover$5 = hoverTertiary$5;
+  var backgroundSelected$5 = selectedUI$5;
+  var backgroundSelectedHover$5 = hoverSelectedUI$5;
+  var layerSelected$5 = selectedUI$5;
+  var layerSelectedHover$5 = hoverSelectedUI$5;
+  var layerSelectedInverse$5 = ui05$5;
+  var borderSubtleSelected$5 = activeUI$5;
+  var layerDisabled$5 = disabled01$5;
+  var fieldDisabled$5 = disabled01$5;
+  var borderDisabled$5 = disabled01$5;
+  var textDisabled$5 = disabled02$5;
+  var buttonDisabled$5 = disabled02$5;
+  var iconDisabled$5 = disabled02$5;
+  var textOnColorDisabled$5 = disabled03$5;
+  var iconOnColorDisabled$5 = disabled03$5;
+  var layerSelectedDisabled$5 = disabled03$5;
+  var skeletonBackground$5 = skeleton01$5;
+  var skeletonElement$5 = skeleton02$5; // Type
+
+  var brand01$5 = interactive01$5;
+  var brand02$5 = interactive02$5;
+  var brand03$5 = interactive03$5;
+  var active01$5 = activeUI$5;
+  var hoverField$5 = hoverUI$5;
+  var danger$5 = danger01$5;
+
+  var white = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    interactive01: interactive01$5,
+    interactive02: interactive02$5,
+    interactive03: interactive03$5,
+    interactive04: interactive04$5,
+    uiBackground: uiBackground$5,
+    ui01: ui01$5,
+    ui02: ui02$5,
+    ui03: ui03$5,
+    ui04: ui04$5,
+    ui05: ui05$5,
+    text01: text01$5,
+    text02: text02$5,
+    text03: text03$5,
+    text04: text04$5,
+    text05: text05$5,
+    textError: textError$5,
+    icon01: icon01$5,
+    icon02: icon02$5,
+    icon03: icon03$5,
+    link01: link01$5,
+    link02: link02$5,
+    inverseLink: inverseLink$5,
+    field01: field01$5,
+    field02: field02$5,
+    inverse01: inverse01$5,
+    inverse02: inverse02$5,
+    support01: support01$5,
+    support02: support02$5,
+    support03: support03$5,
+    support04: support04$5,
+    inverseSupport01: inverseSupport01$5,
+    inverseSupport02: inverseSupport02$5,
+    inverseSupport03: inverseSupport03$5,
+    inverseSupport04: inverseSupport04$5,
+    overlay01: overlay01$5,
+    danger01: danger01$5,
+    danger02: danger02$5,
+    focus: focus$5,
+    inverseFocusUi: inverseFocusUi$5,
+    hoverPrimary: hoverPrimary$5,
+    activePrimary: activePrimary$5,
+    hoverPrimaryText: hoverPrimaryText$5,
+    hoverSecondary: hoverSecondary$5,
+    activeSecondary: activeSecondary$5,
+    hoverTertiary: hoverTertiary$5,
+    activeTertiary: activeTertiary$5,
+    hoverUI: hoverUI$5,
+    hoverLightUI: hoverLightUI$5,
+    activeUI: activeUI$5,
+    activeLightUI: activeLightUI$5,
+    selectedUI: selectedUI$5,
+    selectedLightUI: selectedLightUI$5,
+    inverseHoverUI: inverseHoverUI$5,
+    hoverSelectedUI: hoverSelectedUI$5,
+    hoverDanger: hoverDanger$5,
+    activeDanger: activeDanger$5,
+    hoverRow: hoverRow$5,
+    visitedLink: visitedLink$5,
+    disabled01: disabled01$5,
+    disabled02: disabled02$5,
+    disabled03: disabled03$5,
+    highlight: highlight$5,
+    decorative01: decorative01$5,
+    buttonSeparator: buttonSeparator$5,
+    skeleton01: skeleton01$5,
+    skeleton02: skeleton02$5,
+    background: background$5,
+    layer: layer$5,
+    layerAccent: layerAccent$5,
+    field: field$5,
+    backgroundInverse: backgroundInverse$5,
+    backgroundBrand: backgroundBrand$5,
+    interactive: interactive$5,
+    borderSubtle: borderSubtle$5,
+    borderStrong: borderStrong$5,
+    borderInverse: borderInverse$5,
+    borderInteractive: borderInteractive$5,
+    textPrimary: textPrimary$5,
+    textSecondary: textSecondary$5,
+    textPlaceholder: textPlaceholder$5,
+    textHelper: textHelper$5,
+    textOnColor: textOnColor$5,
+    textInverse: textInverse$5,
+    linkPrimary: linkPrimary$5,
+    linkSecondary: linkSecondary$5,
+    linkVisited: linkVisited$5,
+    linkInverse: linkInverse$5,
+    iconPrimary: iconPrimary$5,
+    iconSecondary: iconSecondary$5,
+    iconOnColor: iconOnColor$5,
+    iconInverse: iconInverse$5,
+    supportError: supportError$5,
+    supportSuccess: supportSuccess$5,
+    supportWarning: supportWarning$5,
+    supportInfo: supportInfo$5,
+    supportErrorInverse: supportErrorInverse$5,
+    supportSuccessInverse: supportSuccessInverse$5,
+    supportWarningInverse: supportWarningInverse$5,
+    supportInfoInverse: supportInfoInverse$5,
+    overlay: overlay$5,
+    toggleOff: toggleOff$5,
+    buttonPrimary: buttonPrimary$5,
+    buttonSecondary: buttonSecondary$5,
+    buttonTertiary: buttonTertiary$5,
+    buttonDangerPrimary: buttonDangerPrimary$5,
+    buttonDangerSecondary: buttonDangerSecondary$5,
+    backgroundActive: backgroundActive$5,
+    layerActive: layerActive$5,
+    buttonDangerActive: buttonDangerActive$5,
+    buttonPrimaryActive: buttonPrimaryActive$5,
+    buttonSecondaryActive: buttonSecondaryActive$5,
+    buttonTertiaryActive: buttonTertiaryActive$5,
+    focusInset: focusInset$5,
+    focusInverse: focusInverse$5,
+    backgroundHover: backgroundHover$5,
+    layerHover: layerHover$5,
+    fieldHover: fieldHover$5,
+    backgroundInverseHover: backgroundInverseHover$5,
+    linkPrimaryHover: linkPrimaryHover$5,
+    buttonDangerHover: buttonDangerHover$5,
+    buttonPrimaryHover: buttonPrimaryHover$5,
+    buttonSecondaryHover: buttonSecondaryHover$5,
+    buttonTertiaryHover: buttonTertiaryHover$5,
+    backgroundSelected: backgroundSelected$5,
+    backgroundSelectedHover: backgroundSelectedHover$5,
+    layerSelected: layerSelected$5,
+    layerSelectedHover: layerSelectedHover$5,
+    layerSelectedInverse: layerSelectedInverse$5,
+    borderSubtleSelected: borderSubtleSelected$5,
+    layerDisabled: layerDisabled$5,
+    fieldDisabled: fieldDisabled$5,
+    borderDisabled: borderDisabled$5,
+    textDisabled: textDisabled$5,
+    buttonDisabled: buttonDisabled$5,
+    iconDisabled: iconDisabled$5,
+    textOnColorDisabled: textOnColorDisabled$5,
+    iconOnColorDisabled: iconOnColorDisabled$5,
+    layerSelectedDisabled: layerSelectedDisabled$5,
+    skeletonBackground: skeletonBackground$5,
+    skeletonElement: skeletonElement$5,
+    brand01: brand01$5,
+    brand02: brand02$5,
+    brand03: brand03$5,
+    active01: active01$5,
+    hoverField: hoverField$5,
+    danger: danger$5,
+    caption01: type.caption01,
+    caption02: type.caption02,
+    label01: type.label01,
+    label02: type.label02,
+    helperText01: type.helperText01,
+    helperText02: type.helperText02,
+    bodyShort01: type.bodyShort01,
+    bodyLong01: type.bodyLong01,
+    bodyShort02: type.bodyShort02,
+    bodyLong02: type.bodyLong02,
+    code01: type.code01,
+    code02: type.code02,
+    heading01: type.heading01,
+    productiveHeading01: type.productiveHeading01,
+    heading02: type.heading02,
+    productiveHeading02: type.productiveHeading02,
+    productiveHeading03: type.productiveHeading03,
+    productiveHeading04: type.productiveHeading04,
+    productiveHeading05: type.productiveHeading05,
+    productiveHeading06: type.productiveHeading06,
+    productiveHeading07: type.productiveHeading07,
+    expressiveHeading01: type.expressiveHeading01,
+    expressiveHeading02: type.expressiveHeading02,
+    expressiveHeading03: type.expressiveHeading03,
+    expressiveHeading04: type.expressiveHeading04,
+    expressiveHeading05: type.expressiveHeading05,
+    expressiveHeading06: type.expressiveHeading06,
+    expressiveParagraph01: type.expressiveParagraph01,
+    quotation01: type.quotation01,
+    quotation02: type.quotation02,
+    display01: type.display01,
+    display02: type.display02,
+    display03: type.display03,
+    display04: type.display04,
+    spacing01: layout.spacing01,
+    spacing02: layout.spacing02,
+    spacing03: layout.spacing03,
+    spacing04: layout.spacing04,
+    spacing05: layout.spacing05,
+    spacing06: layout.spacing06,
+    spacing07: layout.spacing07,
+    spacing08: layout.spacing08,
+    spacing09: layout.spacing09,
+    spacing10: layout.spacing10,
+    spacing11: layout.spacing11,
+    spacing12: layout.spacing12,
+    spacing13: layout.spacing13,
+    fluidSpacing01: layout.fluidSpacing01,
+    fluidSpacing02: layout.fluidSpacing02,
+    fluidSpacing03: layout.fluidSpacing03,
+    fluidSpacing04: layout.fluidSpacing04,
+    layout01: layout.layout01,
+    layout02: layout.layout02,
+    layout03: layout.layout03,
+    layout04: layout.layout04,
+    layout05: layout.layout05,
+    layout06: layout.layout06,
+    layout07: layout.layout07,
+    container01: layout.container01,
+    container02: layout.container02,
+    container03: layout.container03,
+    container04: layout.container04,
+    container05: layout.container05,
+    iconSize01: layout.iconSize01,
+    iconSize02: layout.iconSize02
+  });
+
   /**
    * Copyright IBM Corp. 2018, 2018
    *
@@ -84,9 +460,9 @@
   var interactive02$4 = colors$1.gray80;
   var interactive03$4 = colors$1.blue60;
   var interactive04$4 = colors$1.blue60;
-  var uiBackground$4 = colors$1.white;
-  var ui01$4 = colors$1.gray10;
-  var ui02$4 = colors$1.white;
+  var uiBackground$4 = colors$1.gray10;
+  var ui01$4 = colors$1.white;
+  var ui02$4 = colors$1.gray10;
   var ui03$4 = colors$1.gray20;
   var ui04$4 = colors$1.gray50;
   var ui05$4 = colors$1.gray100;
@@ -102,12 +478,12 @@
   var link01$4 = colors$1.blue60;
   var link02$4 = colors$1.blue70;
   var inverseLink$4 = colors$1.blue40;
-  var field01$4 = colors$1.gray10;
-  var field02$4 = colors$1.white;
+  var field01$4 = colors$1.white;
+  var field02$4 = colors$1.gray10;
   var inverse01$4 = colors$1.white;
   var inverse02$4 = colors$1.gray80;
   var support01$4 = colors$1.red60;
-  var support02$4 = colors$1.green50;
+  var support02$4 = colors$1.green60;
   var support03$4 = colors$1.yellow;
   var support04$4 = colors$1.blue70;
   var inverseSupport01$4 = colors$1.red50;
@@ -139,7 +515,7 @@
   var activeDanger$4 = colors$1.red80;
   var hoverRow$4 = '#e5e5e5';
   var visitedLink$4 = colors$1.purple60;
-  var disabled01$4 = colors$1.gray10;
+  var disabled01$4 = colors$1.white;
   var disabled02$4 = colors$1.gray30;
   var disabled03$4 = colors$1.gray50;
   var highlight$4 = colors$1.blue20;
@@ -222,7 +598,7 @@
   var iconOnColorDisabled$4 = disabled03$4;
   var layerSelectedDisabled$4 = disabled03$4;
   var skeletonBackground$4 = skeleton01$4;
-  var skeletonElement$4 = skeleton02$4; // Type
+  var skeletonElement$4 = skeleton02$4;
 
   var brand01$4 = interactive01$4;
   var brand02$4 = interactive02$4;
@@ -231,7 +607,7 @@
   var hoverField$4 = hoverUI$4;
   var danger$4 = danger01$4;
 
-  var white = /*#__PURE__*/Object.freeze({
+  var g10 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     interactive01: interactive01$4,
     interactive02: interactive02$4,
@@ -380,8 +756,11 @@
     hoverField: hoverField$4,
     danger: danger$4,
     caption01: type.caption01,
+    caption02: type.caption02,
     label01: type.label01,
+    label02: type.label02,
     helperText01: type.helperText01,
+    helperText02: type.helperText02,
     bodyShort01: type.bodyShort01,
     bodyLong01: type.bodyLong01,
     bodyShort02: type.bodyShort02,
@@ -450,72 +829,72 @@
    * LICENSE file in the root directory of this source tree.
    */
   var interactive01$3 = colors$1.blue60;
-  var interactive02$3 = colors$1.gray80;
-  var interactive03$3 = colors$1.blue60;
-  var interactive04$3 = colors$1.blue60;
-  var uiBackground$3 = colors$1.gray10;
-  var ui01$3 = colors$1.white;
-  var ui02$3 = colors$1.gray10;
-  var ui03$3 = colors$1.gray20;
-  var ui04$3 = colors$1.gray50;
-  var ui05$3 = colors$1.gray100;
-  var text01$3 = colors$1.gray100;
-  var text02$3 = colors$1.gray70;
-  var text03$3 = colors$1.gray40;
+  var interactive02$3 = colors$1.gray60;
+  var interactive03$3 = colors$1.white;
+  var interactive04$3 = colors$1.blue50;
+  var uiBackground$3 = colors$1.gray100;
+  var ui01$3 = colors$1.gray90;
+  var ui02$3 = colors$1.gray80;
+  var ui03$3 = colors$1.gray80;
+  var ui04$3 = colors$1.gray60;
+  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.gray60;
-  var textError$3 = colors$1.red60;
-  var icon01$3 = colors$1.gray100;
-  var icon02$3 = colors$1.gray70;
+  var text05$3 = colors$1.gray50;
+  var textError$3 = colors$1.red40;
+  var icon01$3 = colors$1.gray10;
+  var icon02$3 = colors$1.gray30;
   var icon03$3 = colors$1.white;
-  var link01$3 = colors$1.blue60;
-  var link02$3 = colors$1.blue70;
-  var inverseLink$3 = colors$1.blue40;
-  var field01$3 = colors$1.white;
-  var field02$3 = colors$1.gray10;
-  var inverse01$3 = colors$1.white;
-  var inverse02$3 = colors$1.gray80;
-  var support01$3 = colors$1.red60;
-  var support02$3 = colors$1.green50;
+  var link01$3 = colors$1.blue40;
+  var link02$3 = colors$1.blue30;
+  var inverseLink$3 = colors$1.blue60;
+  var field01$3 = colors$1.gray90;
+  var field02$3 = colors$1.gray80;
+  var inverse01$3 = colors$1.gray100;
+  var inverse02$3 = colors$1.gray10;
+  var support01$3 = colors$1.red50;
+  var support02$3 = colors$1.green40;
   var support03$3 = colors$1.yellow;
-  var support04$3 = colors$1.blue70;
-  var inverseSupport01$3 = colors$1.red50;
-  var inverseSupport02$3 = colors$1.green40;
+  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.blue50;
-  var overlay01$3 = colors$1.rgba(colors$1.gray100, 0.5);
+  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.red60; // Interaction states
+  var danger02$3 = colors$1.red50; // Interaction states
 
-  var focus$3 = colors$1.blue60;
-  var inverseFocusUi$3 = colors$1.white;
+  var focus$3 = colors$1.white;
+  var inverseFocusUi$3 = colors$1.blue60;
   var hoverPrimary$3 = '#0353e9';
   var activePrimary$3 = colors$1.blue80;
-  var hoverPrimaryText$3 = colors$1.blue70;
-  var hoverSecondary$3 = '#4c4c4c';
-  var activeSecondary$3 = colors$1.gray60;
-  var hoverTertiary$3 = '#0353e9';
-  var activeTertiary$3 = colors$1.blue80;
-  var hoverUI$3 = '#e5e5e5';
-  var hoverLightUI$3 = '#e5e5e5';
-  var activeUI$3 = colors$1.gray30;
-  var activeLightUI$3 = colors$1.gray30;
-  var selectedUI$3 = colors$1.gray20;
-  var selectedLightUI$3 = colors$1.gray20;
-  var inverseHoverUI$3 = '#4c4c4c';
-  var hoverSelectedUI$3 = '#cacaca';
+  var hoverPrimaryText$3 = colors$1.blue30;
+  var hoverSecondary$3 = '#606060';
+  var activeSecondary$3 = colors$1.gray80;
+  var hoverTertiary$3 = colors$1.gray10;
+  var activeTertiary$3 = colors$1.gray30;
+  var hoverUI$3 = '#353535';
+  var hoverLightUI$3 = '#4c4c4c';
+  var activeUI$3 = colors$1.gray70;
+  var activeLightUI$3 = colors$1.gray60;
+  var selectedUI$3 = colors$1.gray80;
+  var selectedLightUI$3 = colors$1.gray70;
+  var inverseHoverUI$3 = '#e5e5e5';
+  var hoverSelectedUI$3 = '#4c4c4c';
   var hoverDanger$3 = adjustLightness(danger01$3, -8);
   var activeDanger$3 = colors$1.red80;
-  var hoverRow$3 = '#e5e5e5';
-  var visitedLink$3 = colors$1.purple60;
-  var disabled01$3 = colors$1.white;
-  var disabled02$3 = colors$1.gray30;
+  var hoverRow$3 = '#353535';
+  var visitedLink$3 = colors$1.purple40;
+  var disabled01$3 = colors$1.gray90;
+  var disabled02$3 = colors$1.gray70;
   var disabled03$3 = colors$1.gray50;
-  var highlight$3 = colors$1.blue20;
-  var decorative01$3 = colors$1.gray20;
-  var buttonSeparator$3 = '#e0e0e0';
-  var skeleton01$3 = '#e5e5e5';
-  var skeleton02$3 = colors$1.gray30; // New color tokens
+  var highlight$3 = colors$1.blue80;
+  var decorative01$3 = colors$1.gray70;
+  var buttonSeparator$3 = '#161616';
+  var skeleton01$3 = '#353535';
+  var skeleton02$3 = colors$1.gray70; // New color tokens
   // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
 
   var background$3 = uiBackground$3;
@@ -600,7 +979,7 @@
   var hoverField$3 = hoverUI$3;
   var danger$3 = danger01$3;
 
-  var g10 = /*#__PURE__*/Object.freeze({
+  var g100 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     interactive01: interactive01$3,
     interactive02: interactive02$3,
@@ -749,8 +1128,11 @@
     hoverField: hoverField$3,
     danger: danger$3,
     caption01: type.caption01,
+    caption02: type.caption02,
     label01: type.label01,
+    label02: type.label02,
     helperText01: type.helperText01,
+    helperText02: type.helperText02,
     bodyShort01: type.bodyShort01,
     bodyLong01: type.bodyLong01,
     bodyShort02: type.bodyShort02,
@@ -818,149 +1200,152 @@
    * 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$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 link02$2 = colors$1.blue30;
-  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
+  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
 
+  var background$2 = colors$1.gray80;
+  var layer$2 = colors$1.gray70;
+  var layerAccent$2 = colors$1.gray60;
+  var field$2 = colors$1.gray70;
+  var backgroundInverse$2 = colors$1.gray10;
+  var backgroundBrand$2 = colors$1.blue60;
+  var interactive$2 = colors$1.blue40;
+  var borderSubtle$2 = colors$1.gray60;
+  var borderStrong$2 = colors$1.gray40;
+  var borderInverse$2 = colors$1.gray10;
+  var borderInteractive$2 = colors$1.blue50;
+  var textPrimary$2 = colors$1.gray10;
+  var textSecondary$2 = colors$1.gray30;
+  var textPlaceholder$2 = colors$1.gray60;
+  var textHelper$2 = colors$1.gray40;
+  var textError$2 = colors$1.red30;
+  var textOnColor$2 = colors$1.white;
+  var textInverse$2 = colors$1.gray100;
+  var linkPrimary$2 = colors$1.blue40;
+  var linkSecondary$2 = colors$1.blue30;
+  var linkVisited$2 = colors$1.purple40;
+  var linkInverse$2 = colors$1.blue60;
+  var iconPrimary$2 = colors$1.gray10;
+  var iconSecondary$2 = colors$1.gray30;
+  var iconOnColor$2 = colors$1.white;
+  var iconInverse$2 = colors$1.gray100;
+  var supportError$2 = colors$1.red40;
+  var supportSuccess$2 = colors$1.green40;
+  var supportWarning$2 = colors$1.yellow30;
+  var supportInfo$2 = colors$1.blue50;
+  var supportErrorInverse$2 = colors$1.red60;
+  var supportSuccessInverse$2 = colors$1.green50;
+  var supportWarningInverse$2 = colors$1.yellow30;
+  var supportInfoInverse$2 = colors$1.blue60;
+  var overlay$2 = colors$1.rgba(colors$1.gray100, 0.7);
+  var toggleOff$2 = colors$1.gray50;
+  var buttonPrimary$2 = colors$1.blue60;
+  var buttonSecondary$2 = colors$1.gray60;
+  var buttonTertiary$2 = colors$1.white;
+  var buttonDangerPrimary$2 = colors$1.red60;
+  var buttonDangerSecondary$2 = colors$1.red40;
+  var buttonSeparator$2 = colors$1.gray100;
+  var backgroundActive$2 = colors$1.gray70;
+  var layerActive$2 = colors$1.gray60;
+  var buttonDangerActive$2 = colors$1.red80;
+  var buttonPrimaryActive$2 = colors$1.blue80;
+  var buttonSecondaryActive$2 = colors$1.gray70;
+  var buttonTertiaryActive$2 = colors$1.gray30;
   var focus$2 = colors$1.white;
-  var inverseFocusUi$2 = colors$1.blue60;
-  var hoverPrimary$2 = '#0353e9';
-  var activePrimary$2 = colors$1.blue80;
-  var hoverPrimaryText$2 = colors$1.blue30;
-  var hoverSecondary$2 = '#606060';
-  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$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$1.red80;
-  var hoverRow$2 = '#353535';
-  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$1.gray70; // New color tokens
-  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+  var focusInset$2 = colors$1.gray100;
+  var focusInverse$2 = colors$1.blue60;
+  var highlight$2 = colors$1.blue70;
+  var backgroundHover$2 = adjustLightness(background$2, +6);
+  var layerHover$2 = adjustLightness(layer$2, +7);
+  var fieldHover$2 = adjustLightness(field$2, +7);
+  var backgroundInverseHover$2 = adjustLightness(backgroundInverse$2, -5);
+  var linkPrimaryHover$2 = colors$1.blue30;
+  var buttonDangerHover$2 = adjustLightness(buttonDangerPrimary$2, -8);
+  var buttonPrimaryHover$2 = adjustLightness(buttonPrimary$2, -8);
+  var buttonSecondaryHover$2 = adjustLightness(buttonSecondary$2, -7);
+  var buttonTertiaryHover$2 = colors$1.white;
+  var backgroundSelected$2 = colors$1.gray70;
+  var backgroundSelectedHover$2 = adjustLightness(backgroundSelected$2, +7);
+  var layerSelected$2 = colors$1.gray60;
+  var layerSelectedHover$2 = adjustLightness(layerSelected$2, -6);
+  var layerSelectedInverse$2 = colors$1.gray10;
+  var borderSubtleSelected$2 = colors$1.gray50;
+  var layerDisabled$2 = colors$1.gray70;
+  var fieldDisabled$2 = colors$1.gray70;
+  var borderDisabled$2 = colors$1.gray70;
+  var textDisabled$2 = colors$1.gray50;
+  var buttonDisabled$2 = colors$1.gray50;
+  var iconDisabled$2 = colors$1.gray50;
+  var textOnColorDisabled$2 = colors$1.gray30;
+  var iconOnColorDisabled$2 = colors$1.gray30;
+  var layerSelectedDisabled$2 = colors$1.gray30;
+  var skeletonBackground$2 = adjustLightness(background$2, +6);
+  var skeletonElement$2 = colors$1.gray60; //////////////////////////////////////
+  // Old tokens needed to pass tests  //
+  //////////////////////////////////////
 
-  var background$2 = uiBackground$2;
-  var layer$2 = ui01$2;
-  var layerAccent$2 = ui03$2;
-  var field$2 = field01$2;
-  var backgroundInverse$2 = inverse02$2;
-  var backgroundBrand$2 = interactive01$2;
-  var interactive$2 = interactive04$2;
-  var borderSubtle$2 = ui03$2;
-  var borderStrong$2 = ui04$2;
-  var borderInverse$2 = ui05$2;
-  var borderInteractive$2 = interactive04$2;
-  var textPrimary$2 = text01$2;
-  var textSecondary$2 = text02$2;
-  var textPlaceholder$2 = text03$2;
-  var textHelper$2 = text05$2;
-  var textOnColor$2 = text04$2;
-  var textInverse$2 = inverse01$2;
-  var linkPrimary$2 = link01$2;
-  var linkSecondary$2 = link02$2;
-  var linkVisited$2 = visitedLink$2;
-  var linkInverse$2 = inverseLink$2;
-  var iconPrimary$2 = icon01$2;
-  var iconSecondary$2 = icon02$2;
-  var iconOnColor$2 = icon03$2;
-  var iconInverse$2 = inverse01$2;
-  var supportError$2 = support01$2;
-  var supportSuccess$2 = support02$2;
-  var supportWarning$2 = support03$2;
-  var supportInfo$2 = support04$2;
-  var supportErrorInverse$2 = inverseSupport01$2;
-  var supportSuccessInverse$2 = inverseSupport02$2;
-  var supportWarningInverse$2 = inverseSupport03$2;
-  var supportInfoInverse$2 = inverseSupport04$2;
-  var overlay$2 = overlay01$2;
-  var toggleOff$2 = ui04$2;
-  var buttonPrimary$2 = interactive01$2;
-  var buttonSecondary$2 = interactive02$2;
-  var buttonTertiary$2 = interactive03$2;
-  var buttonDangerPrimary$2 = danger01$2;
-  var buttonDangerSecondary$2 = danger02$2;
-  var backgroundActive$2 = activeUI$2;
-  var layerActive$2 = activeUI$2;
-  var buttonDangerActive$2 = activeDanger$2;
-  var buttonPrimaryActive$2 = activePrimary$2;
-  var buttonSecondaryActive$2 = activeSecondary$2;
-  var buttonTertiaryActive$2 = activeTertiary$2;
-  var focusInset$2 = inverse01$2;
-  var focusInverse$2 = inverseFocusUi$2;
-  var backgroundHover$2 = hoverUI$2;
-  var layerHover$2 = hoverUI$2;
-  var fieldHover$2 = hoverUI$2;
-  var backgroundInverseHover$2 = inverseHoverUI$2;
-  var linkPrimaryHover$2 = hoverPrimaryText$2;
-  var buttonDangerHover$2 = hoverDanger$2;
-  var buttonPrimaryHover$2 = hoverPrimary$2;
-  var buttonSecondaryHover$2 = hoverSecondary$2;
-  var buttonTertiaryHover$2 = hoverTertiary$2;
-  var backgroundSelected$2 = selectedUI$2;
-  var backgroundSelectedHover$2 = hoverSelectedUI$2;
-  var layerSelected$2 = selectedUI$2;
-  var layerSelectedHover$2 = hoverSelectedUI$2;
-  var layerSelectedInverse$2 = ui05$2;
-  var borderSubtleSelected$2 = activeUI$2;
-  var layerDisabled$2 = disabled01$2;
-  var fieldDisabled$2 = disabled01$2;
-  var borderDisabled$2 = disabled01$2;
-  var textDisabled$2 = disabled02$2;
-  var buttonDisabled$2 = disabled02$2;
-  var iconDisabled$2 = disabled02$2;
-  var textOnColorDisabled$2 = disabled03$2;
-  var iconOnColorDisabled$2 = disabled03$2;
-  var layerSelectedDisabled$2 = disabled03$2;
-  var skeletonBackground$2 = skeleton01$2;
-  var skeletonElement$2 = skeleton02$2;
+  var interactive01$2 = backgroundBrand$2;
+  var interactive02$2 = buttonSecondary$2;
+  var interactive03$2 = buttonTertiary$2;
+  var interactive04$2 = interactive$2;
+  var uiBackground$2 = background$2;
+  var ui01$2 = layer$2;
+  var ui02$2 = colors$1.gray70;
+  var ui03$2 = layerAccent$2;
+  var ui04$2 = borderStrong$2;
+  var ui05$2 = borderInverse$2;
+  var text01$2 = textPrimary$2;
+  var text02$2 = textSecondary$2;
+  var text03$2 = textPlaceholder$2;
+  var text04$2 = textOnColor$2;
+  var text05$2 = textHelper$2;
+  var icon01$2 = iconPrimary$2;
+  var icon02$2 = iconSecondary$2;
+  var icon03$2 = iconOnColor$2;
+  var link01$2 = linkPrimary$2;
+  var link02$2 = linkSecondary$2;
+  var inverseLink$2 = linkInverse$2;
+  var field01$2 = field$2;
+  var field02$2 = colors$1.gray60;
+  var inverse01$2 = textInverse$2;
+  var inverse02$2 = backgroundInverse$2;
+  var support01$2 = supportError$2;
+  var support02$2 = supportSuccess$2;
+  var support03$2 = supportWarning$2;
+  var support04$2 = supportInfo$2;
+  var inverseSupport01$2 = supportErrorInverse$2;
+  var inverseSupport02$2 = supportSuccessInverse$2;
+  var inverseSupport03$2 = supportWarningInverse$2;
+  var inverseSupport04$2 = supportInfoInverse$2;
+  var overlay01$2 = overlay$2;
+  var danger01$2 = buttonDangerPrimary$2;
+  var danger02$2 = buttonDangerSecondary$2; // Interaction states
+
+  var inverseFocusUi$2 = focusInverse$2;
+  var hoverPrimary$2 = buttonPrimaryHover$2;
+  var activePrimary$2 = buttonPrimaryActive$2;
+  var hoverPrimaryText$2 = linkPrimaryHover$2;
+  var hoverSecondary$2 = buttonSecondaryHover$2;
+  var activeSecondary$2 = buttonSecondaryActive$2;
+  var hoverTertiary$2 = buttonTertiaryHover$2;
+  var activeTertiary$2 = buttonTertiaryActive$2;
+  var hoverUI$2 = backgroundHover$2;
+  var hoverLightUI$2 = '#5E5E5E';
+  var activeUI$2 = backgroundActive$2;
+  var activeLightUI$2 = colors$1.gray50;
+  var selectedUI$2 = backgroundSelected$2;
+  var selectedLightUI$2 = colors$1.gray50;
+  var inverseHoverUI$2 = backgroundInverseHover$2;
+  var hoverSelectedUI$2 = layerSelectedHover$2;
+  var hoverDanger$2 = buttonDangerHover$2;
+  var activeDanger$2 = buttonDangerActive$2;
+  var hoverRow$2 = layerHover$2;
+  var visitedLink$2 = linkVisited$2;
+  var disabled01$2 = layerDisabled$2;
+  var disabled02$2 = textDisabled$2;
+  var disabled03$2 = textOnColorDisabled$2;
+  var decorative01$2 = colors$1.gray60;
+  var skeleton01$2 = skeletonBackground$2;
+  var skeleton02$2 = skeletonElement$2;
 
   var brand01$2 = interactive01$2;
   var brand02$2 = interactive02$2;
@@ -969,74 +1354,8 @@
   var hoverField$2 = hoverUI$2;
   var danger$2 = danger01$2;
 
-  var g100 = /*#__PURE__*/Object.freeze({
+  var g80 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    interactive01: interactive01$2,
-    interactive02: interactive02$2,
-    interactive03: interactive03$2,
-    interactive04: interactive04$2,
-    uiBackground: uiBackground$2,
-    ui01: ui01$2,
-    ui02: ui02$2,
-    ui03: ui03$2,
-    ui04: ui04$2,
-    ui05: ui05$2,
-    text01: text01$2,
-    text02: text02$2,
-    text03: text03$2,
-    text04: text04$2,
-    text05: text05$2,
-    textError: textError$2,
-    icon01: icon01$2,
-    icon02: icon02$2,
-    icon03: icon03$2,
-    link01: link01$2,
-    link02: link02$2,
-    inverseLink: inverseLink$2,
-    field01: field01$2,
-    field02: field02$2,
-    inverse01: inverse01$2,
-    inverse02: inverse02$2,
-    support01: support01$2,
-    support02: support02$2,
-    support03: support03$2,
-    support04: support04$2,
-    inverseSupport01: inverseSupport01$2,
-    inverseSupport02: inverseSupport02$2,
-    inverseSupport03: inverseSupport03$2,
-    inverseSupport04: inverseSupport04$2,
-    overlay01: overlay01$2,
-    danger01: danger01$2,
-    danger02: danger02$2,
-    focus: focus$2,
-    inverseFocusUi: inverseFocusUi$2,
-    hoverPrimary: hoverPrimary$2,
-    activePrimary: activePrimary$2,
-    hoverPrimaryText: hoverPrimaryText$2,
-    hoverSecondary: hoverSecondary$2,
-    activeSecondary: activeSecondary$2,
-    hoverTertiary: hoverTertiary$2,
-    activeTertiary: activeTertiary$2,
-    hoverUI: hoverUI$2,
-    hoverLightUI: hoverLightUI$2,
-    activeUI: activeUI$2,
-    activeLightUI: activeLightUI$2,
-    selectedUI: selectedUI$2,
-    selectedLightUI: selectedLightUI$2,
-    inverseHoverUI: inverseHoverUI$2,
-    hoverSelectedUI: hoverSelectedUI$2,
-    hoverDanger: hoverDanger$2,
-    activeDanger: activeDanger$2,
-    hoverRow: hoverRow$2,
-    visitedLink: visitedLink$2,
-    disabled01: disabled01$2,
-    disabled02: disabled02$2,
-    disabled03: disabled03$2,
-    highlight: highlight$2,
-    decorative01: decorative01$2,
-    buttonSeparator: buttonSeparator$2,
-    skeleton01: skeleton01$2,
-    skeleton02: skeleton02$2,
     background: background$2,
     layer: layer$2,
     layerAccent: layerAccent$2,
@@ -1052,6 +1371,7 @@
     textSecondary: textSecondary$2,
     textPlaceholder: textPlaceholder$2,
     textHelper: textHelper$2,
+    textError: textError$2,
     textOnColor: textOnColor$2,
     textInverse: textInverse$2,
     linkPrimary: linkPrimary$2,
@@ -1077,14 +1397,17 @@
     buttonTertiary: buttonTertiary$2,
     buttonDangerPrimary: buttonDangerPrimary$2,
     buttonDangerSecondary: buttonDangerSecondary$2,
+    buttonSeparator: buttonSeparator$2,
     backgroundActive: backgroundActive$2,
     layerActive: layerActive$2,
     buttonDangerActive: buttonDangerActive$2,
     buttonPrimaryActive: buttonPrimaryActive$2,
     buttonSecondaryActive: buttonSecondaryActive$2,
     buttonTertiaryActive: buttonTertiaryActive$2,
+    focus: focus$2,
     focusInset: focusInset$2,
     focusInverse: focusInverse$2,
+    highlight: highlight$2,
     backgroundHover: backgroundHover$2,
     layerHover: layerHover$2,
     fieldHover: fieldHover$2,
@@ -1111,6 +1434,68 @@
     layerSelectedDisabled: layerSelectedDisabled$2,
     skeletonBackground: skeletonBackground$2,
     skeletonElement: skeletonElement$2,
+    interactive01: interactive01$2,
+    interactive02: interactive02$2,
+    interactive03: interactive03$2,
+    interactive04: interactive04$2,
+    uiBackground: uiBackground$2,
+    ui01: ui01$2,
+    ui02: ui02$2,
+    ui03: ui03$2,
+    ui04: ui04$2,
+    ui05: ui05$2,
+    text01: text01$2,
+    text02: text02$2,
+    text03: text03$2,
+    text04: text04$2,
+    text05: text05$2,
+    icon01: icon01$2,
+    icon02: icon02$2,
+    icon03: icon03$2,
+    link01: link01$2,
+    link02: link02$2,
+    inverseLink: inverseLink$2,
+    field01: field01$2,
+    field02: field02$2,
+    inverse01: inverse01$2,
+    inverse02: inverse02$2,
+    support01: support01$2,
+    support02: support02$2,
+    support03: support03$2,
+    support04: support04$2,
+    inverseSupport01: inverseSupport01$2,
+    inverseSupport02: inverseSupport02$2,
+    inverseSupport03: inverseSupport03$2,
+    inverseSupport04: inverseSupport04$2,
+    overlay01: overlay01$2,
+    danger01: danger01$2,
+    danger02: danger02$2,
+    inverseFocusUi: inverseFocusUi$2,
+    hoverPrimary: hoverPrimary$2,
+    activePrimary: activePrimary$2,
+    hoverPrimaryText: hoverPrimaryText$2,
+    hoverSecondary: hoverSecondary$2,
+    activeSecondary: activeSecondary$2,
+    hoverTertiary: hoverTertiary$2,
+    activeTertiary: activeTertiary$2,
+    hoverUI: hoverUI$2,
+    hoverLightUI: hoverLightUI$2,
+    activeUI: activeUI$2,
+    activeLightUI: activeLightUI$2,
+    selectedUI: selectedUI$2,
+    selectedLightUI: selectedLightUI$2,
+    inverseHoverUI: inverseHoverUI$2,
+    hoverSelectedUI: hoverSelectedUI$2,
+    hoverDanger: hoverDanger$2,
+    activeDanger: activeDanger$2,
+    hoverRow: hoverRow$2,
+    visitedLink: visitedLink$2,
+    disabled01: disabled01$2,
+    disabled02: disabled02$2,
+    disabled03: disabled03$2,
+    decorative01: decorative01$2,
+    skeleton01: skeleton01$2,
+    skeleton02: skeleton02$2,
     brand01: brand01$2,
     brand02: brand02$2,
     brand03: brand03$2,
@@ -1118,8 +1503,11 @@
     hoverField: hoverField$2,
     danger: danger$2,
     caption01: type.caption01,
+    caption02: type.caption02,
     label01: type.label01,
+    label02: type.label02,
     helperText01: type.helperText01,
+    helperText02: type.helperText02,
     bodyShort01: type.bodyShort01,
     bodyLong01: type.bodyLong01,
     bodyShort02: type.bodyShort02,
@@ -1487,8 +1875,11 @@
     hoverField: hoverField$1,
     danger: danger$1,
     caption01: type.caption01,
+    caption02: type.caption02,
     label01: type.label01,
+    label02: type.label02,
     helperText01: type.helperText01,
+    helperText02: type.helperText02,
     bodyShort01: type.bodyShort01,
     bodyLong01: type.bodyLong01,
     bodyShort02: type.bodyShort02,
@@ -1856,8 +2247,11 @@
     hoverField: hoverField,
     danger: danger,
     caption01: type.caption01,
+    caption02: type.caption02,
     label01: type.label01,
+    label02: type.label02,
     helperText01: type.helperText01,
+    helperText02: type.helperText02,
     bodyShort01: type.bodyShort01,
     bodyLong01: type.bodyLong01,
     bodyShort02: type.bodyShort02,
@@ -1999,6 +2393,7 @@
   var themes = {
     white: white,
     g10: g10,
+    g80: g80,
     g90: g90,
     g100: g100,
     v9: v9
@@ -2034,6 +2429,12 @@
       return type.caption01;
     }
   });
+  Object.defineProperty(exports, 'caption02', {
+    enumerable: true,
+    get: function () {
+      return type.caption02;
+    }
+  });
   Object.defineProperty(exports, 'code01', {
     enumerable: true,
     get: function () {
@@ -2130,12 +2531,24 @@
       return type.helperText01;
     }
   });
+  Object.defineProperty(exports, 'helperText02', {
+    enumerable: true,
+    get: function () {
+      return type.helperText02;
+    }
+  });
   Object.defineProperty(exports, 'label01', {
     enumerable: true,
     get: function () {
       return type.label01;
     }
   });
+  Object.defineProperty(exports, 'label02', {
+    enumerable: true,
+    get: function () {
+      return type.label02;
+    }
+  });
   Object.defineProperty(exports, 'productiveHeading01', {
     enumerable: true,
     get: function () {
@@ -2376,160 +2789,161 @@
       return layout.spacing13;
     }
   });
-  exports.active01 = active01$4;
-  exports.activeDanger = activeDanger$4;
-  exports.activeLightUI = activeLightUI$4;
-  exports.activePrimary = activePrimary$4;
-  exports.activeSecondary = activeSecondary$4;
-  exports.activeTertiary = activeTertiary$4;
-  exports.activeUI = activeUI$4;
-  exports.background = background$4;
-  exports.backgroundActive = backgroundActive$4;
-  exports.backgroundBrand = backgroundBrand$4;
-  exports.backgroundHover = backgroundHover$4;
-  exports.backgroundInverse = backgroundInverse$4;
-  exports.backgroundInverseHover = backgroundInverseHover$4;
-  exports.backgroundSelected = backgroundSelected$4;
-  exports.backgroundSelectedHover = backgroundSelectedHover$4;
-  exports.borderDisabled = borderDisabled$4;
-  exports.borderInteractive = borderInteractive$4;
-  exports.borderInverse = borderInverse$4;
-  exports.borderStrong = borderStrong$4;
-  exports.borderSubtle = borderSubtle$4;
-  exports.borderSubtleSelected = borderSubtleSelected$4;
-  exports.brand01 = brand01$4;
-  exports.brand02 = brand02$4;
-  exports.brand03 = brand03$4;
-  exports.buttonDangerActive = buttonDangerActive$4;
-  exports.buttonDangerHover = buttonDangerHover$4;
-  exports.buttonDangerPrimary = buttonDangerPrimary$4;
-  exports.buttonDangerSecondary = buttonDangerSecondary$4;
-  exports.buttonDisabled = buttonDisabled$4;
-  exports.buttonPrimary = buttonPrimary$4;
-  exports.buttonPrimaryActive = buttonPrimaryActive$4;
-  exports.buttonPrimaryHover = buttonPrimaryHover$4;
-  exports.buttonSecondary = buttonSecondary$4;
-  exports.buttonSecondaryActive = buttonSecondaryActive$4;
-  exports.buttonSecondaryHover = buttonSecondaryHover$4;
-  exports.buttonSeparator = buttonSeparator$4;
-  exports.buttonTertiary = buttonTertiary$4;
-  exports.buttonTertiaryActive = buttonTertiaryActive$4;
-  exports.buttonTertiaryHover = buttonTertiaryHover$4;
-  exports.danger = danger$4;
-  exports.danger01 = danger01$4;
-  exports.danger02 = danger02$4;
-  exports.decorative01 = decorative01$4;
-  exports.disabled01 = disabled01$4;
-  exports.disabled02 = disabled02$4;
-  exports.disabled03 = disabled03$4;
-  exports.field = field$4;
-  exports.field01 = field01$4;
-  exports.field02 = field02$4;
-  exports.fieldDisabled = fieldDisabled$4;
-  exports.fieldHover = fieldHover$4;
-  exports.focus = focus$4;
-  exports.focusInset = focusInset$4;
-  exports.focusInverse = focusInverse$4;
+  exports.active01 = active01$5;
+  exports.activeDanger = activeDanger$5;
+  exports.activeLightUI = activeLightUI$5;
+  exports.activePrimary = activePrimary$5;
+  exports.activeSecondary = activeSecondary$5;
+  exports.activeTertiary = activeTertiary$5;
+  exports.activeUI = activeUI$5;
+  exports.background = background$5;
+  exports.backgroundActive = backgroundActive$5;
+  exports.backgroundBrand = backgroundBrand$5;
+  exports.backgroundHover = backgroundHover$5;
+  exports.backgroundInverse = backgroundInverse$5;
+  exports.backgroundInverseHover = backgroundInverseHover$5;
+  exports.backgroundSelected = backgroundSelected$5;
+  exports.backgroundSelectedHover = backgroundSelectedHover$5;
+  exports.borderDisabled = borderDisabled$5;
+  exports.borderInteractive = borderInteractive$5;
+  exports.borderInverse = borderInverse$5;
+  exports.borderStrong = borderStrong$5;
+  exports.borderSubtle = borderSubtle$5;
+  exports.borderSubtleSelected = borderSubtleSelected$5;
+  exports.brand01 = brand01$5;
+  exports.brand02 = brand02$5;
+  exports.brand03 = brand03$5;
+  exports.buttonDangerActive = buttonDangerActive$5;
+  exports.buttonDangerHover = buttonDangerHover$5;
+  exports.buttonDangerPrimary = buttonDangerPrimary$5;
+  exports.buttonDangerSecondary = buttonDangerSecondary$5;
+  exports.buttonDisabled = buttonDisabled$5;
+  exports.buttonPrimary = buttonPrimary$5;
+  exports.buttonPrimaryActive = buttonPrimaryActive$5;
+  exports.buttonPrimaryHover = buttonPrimaryHover$5;
+  exports.buttonSecondary = buttonSecondary$5;
+  exports.buttonSecondaryActive = buttonSecondaryActive$5;
+  exports.buttonSecondaryHover = buttonSecondaryHover$5;
+  exports.buttonSeparator = buttonSeparator$5;
+  exports.buttonTertiary = buttonTertiary$5;
+  exports.buttonTertiaryActive = buttonTertiaryActive$5;
+  exports.buttonTertiaryHover = buttonTertiaryHover$5;
+  exports.danger = danger$5;
+  exports.danger01 = danger01$5;
+  exports.danger02 = danger02$5;
+  exports.decorative01 = decorative01$5;
+  exports.disabled01 = disabled01$5;
+  exports.disabled02 = disabled02$5;
+  exports.disabled03 = disabled03$5;
+  exports.field = field$5;
+  exports.field01 = field01$5;
+  exports.field02 = field02$5;
+  exports.fieldDisabled = fieldDisabled$5;
+  exports.fieldHover = fieldHover$5;
+  exports.focus = focus$5;
+  exports.focusInset = focusInset$5;
+  exports.focusInverse = focusInverse$5;
   exports.formatTokenName = formatTokenName;
   exports.g10 = g10;
   exports.g100 = g100;
+  exports.g80 = g80;
   exports.g90 = g90;
-  exports.highlight = highlight$4;
-  exports.hoverDanger = hoverDanger$4;
-  exports.hoverField = hoverField$4;
-  exports.hoverLightUI = hoverLightUI$4;
-  exports.hoverPrimary = hoverPrimary$4;
-  exports.hoverPrimaryText = hoverPrimaryText$4;
-  exports.hoverRow = hoverRow$4;
-  exports.hoverSecondary = hoverSecondary$4;
-  exports.hoverSelectedUI = hoverSelectedUI$4;
-  exports.hoverTertiary = hoverTertiary$4;
-  exports.hoverUI = hoverUI$4;
-  exports.icon01 = icon01$4;
-  exports.icon02 = icon02$4;
-  exports.icon03 = icon03$4;
-  exports.iconDisabled = iconDisabled$4;
-  exports.iconInverse = iconInverse$4;
-  exports.iconOnColor = iconOnColor$4;
-  exports.iconOnColorDisabled = iconOnColorDisabled$4;
-  exports.iconPrimary = iconPrimary$4;
-  exports.iconSecondary = iconSecondary$4;
-  exports.interactive = interactive$4;
-  exports.interactive01 = interactive01$4;
-  exports.interactive02 = interactive02$4;
-  exports.interactive03 = interactive03$4;
-  exports.interactive04 = interactive04$4;
-  exports.inverse01 = inverse01$4;
-  exports.inverse02 = inverse02$4;
-  exports.inverseFocusUi = inverseFocusUi$4;
-  exports.inverseHoverUI = inverseHoverUI$4;
-  exports.inverseLink = inverseLink$4;
-  exports.inverseSupport01 = inverseSupport01$4;
-  exports.inverseSupport02 = inverseSupport02$4;
-  exports.inverseSupport03 = inverseSupport03$4;
-  exports.inverseSupport04 = inverseSupport04$4;
-  exports.layer = layer$4;
-  exports.layerAccent = layerAccent$4;
-  exports.layerActive = layerActive$4;
-  exports.layerDisabled = layerDisabled$4;
-  exports.layerHover = layerHover$4;
-  exports.layerSelected = layerSelected$4;
-  exports.layerSelectedDisabled = layerSelectedDisabled$4;
-  exports.layerSelectedHover = layerSelectedHover$4;
-  exports.layerSelectedInverse = layerSelectedInverse$4;
-  exports.link01 = link01$4;
-  exports.link02 = link02$4;
-  exports.linkInverse = linkInverse$4;
-  exports.linkPrimary = linkPrimary$4;
-  exports.linkPrimaryHover = linkPrimaryHover$4;
-  exports.linkSecondary = linkSecondary$4;
-  exports.linkVisited = linkVisited$4;
-  exports.overlay = overlay$4;
-  exports.overlay01 = overlay01$4;
-  exports.selectedLightUI = selectedLightUI$4;
-  exports.selectedUI = selectedUI$4;
-  exports.skeleton01 = skeleton01$4;
-  exports.skeleton02 = skeleton02$4;
-  exports.skeletonBackground = skeletonBackground$4;
-  exports.skeletonElement = skeletonElement$4;
-  exports.support01 = support01$4;
-  exports.support02 = support02$4;
-  exports.support03 = support03$4;
-  exports.support04 = support04$4;
-  exports.supportError = supportError$4;
-  exports.supportErrorInverse = supportErrorInverse$4;
-  exports.supportInfo = supportInfo$4;
-  exports.supportInfoInverse = supportInfoInverse$4;
-  exports.supportSuccess = supportSuccess$4;
-  exports.supportSuccessInverse = supportSuccessInverse$4;
-  exports.supportWarning = supportWarning$4;
-  exports.supportWarningInverse = supportWarningInverse$4;
-  exports.text01 = text01$4;
-  exports.text02 = text02$4;
-  exports.text03 = text03$4;
-  exports.text04 = text04$4;
-  exports.text05 = text05$4;
-  exports.textDisabled = textDisabled$4;
-  exports.textError = textError$4;
-  exports.textHelper = textHelper$4;
-  exports.textInverse = textInverse$4;
-  exports.textOnColor = textOnColor$4;
-  exports.textOnColorDisabled = textOnColorDisabled$4;
-  exports.textPlaceholder = textPlaceholder$4;
-  exports.textPrimary = textPrimary$4;
-  exports.textSecondary = textSecondary$4;
+  exports.highlight = highlight$5;
+  exports.hoverDanger = hoverDanger$5;
+  exports.hoverField = hoverField$5;
+  exports.hoverLightUI = hoverLightUI$5;
+  exports.hoverPrimary = hoverPrimary$5;
+  exports.hoverPrimaryText = hoverPrimaryText$5;
+  exports.hoverRow = hoverRow$5;
+  exports.hoverSecondary = hoverSecondary$5;
+  exports.hoverSelectedUI = hoverSelectedUI$5;
+  exports.hoverTertiary = hoverTertiary$5;
+  exports.hoverUI = hoverUI$5;
+  exports.icon01 = icon01$5;
+  exports.icon02 = icon02$5;
+  exports.icon03 = icon03$5;
+  exports.iconDisabled = iconDisabled$5;
+  exports.iconInverse = iconInverse$5;
+  exports.iconOnColor = iconOnColor$5;
+  exports.iconOnColorDisabled = iconOnColorDisabled$5;
+  exports.iconPrimary = iconPrimary$5;
+  exports.iconSecondary = iconSecondary$5;
+  exports.interactive = interactive$5;
+  exports.interactive01 = interactive01$5;
+  exports.interactive02 = interactive02$5;
+  exports.interactive03 = interactive03$5;
+  exports.interactive04 = interactive04$5;
+  exports.inverse01 = inverse01$5;
+  exports.inverse02 = inverse02$5;
+  exports.inverseFocusUi = inverseFocusUi$5;
+  exports.inverseHoverUI = inverseHoverUI$5;
+  exports.inverseLink = inverseLink$5;
+  exports.inverseSupport01 = inverseSupport01$5;
+  exports.inverseSupport02 = inverseSupport02$5;
+  exports.inverseSupport03 = inverseSupport03$5;
+  exports.inverseSupport04 = inverseSupport04$5;
+  exports.layer = layer$5;
+  exports.layerAccent = layerAccent$5;
+  exports.layerActive = layerActive$5;
+  exports.layerDisabled = layerDisabled$5;
+  exports.layerHover = layerHover$5;
+  exports.layerSelected = layerSelected$5;
+  exports.layerSelectedDisabled = layerSelectedDisabled$5;
+  exports.layerSelectedHover = layerSelectedHover$5;
+  exports.layerSelectedInverse = layerSelectedInverse$5;
+  exports.link01 = link01$5;
+  exports.link02 = link02$5;
+  exports.linkInverse = linkInverse$5;
+  exports.linkPrimary = linkPrimary$5;
+  exports.linkPrimaryHover = linkPrimaryHover$5;
+  exports.linkSecondary = linkSecondary$5;
+  exports.linkVisited = linkVisited$5;
+  exports.overlay = overlay$5;
+  exports.overlay01 = overlay01$5;
+  exports.selectedLightUI = selectedLightUI$5;
+  exports.selectedUI = selectedUI$5;
+  exports.skeleton01 = skeleton01$5;
+  exports.skeleton02 = skeleton02$5;
+  exports.skeletonBackground = skeletonBackground$5;
+  exports.skeletonElement = skeletonElement$5;
+  exports.support01 = support01$5;
+  exports.support02 = support02$5;
+  exports.support03 = support03$5;
+  exports.support04 = support04$5;
+  exports.supportError = supportError$5;
+  exports.supportErrorInverse = supportErrorInverse$5;
+  exports.supportInfo = supportInfo$5;
+  exports.supportInfoInverse = supportInfoInverse$5;
+  exports.supportSuccess = supportSuccess$5;
+  exports.supportSuccessInverse = supportSuccessInverse$5;
+  exports.supportWarning = supportWarning$5;
+  exports.supportWarningInverse = supportWarningInverse$5;
+  exports.text01 = text01$5;
+  exports.text02 = text02$5;
+  exports.text03 = text03$5;
+  exports.text04 = text04$5;
+  exports.text05 = text05$5;
+  exports.textDisabled = textDisabled$5;
+  exports.textError = textError$5;
+  exports.textHelper = textHelper$5;
+  exports.textInverse = textInverse$5;
+  exports.textOnColor = textOnColor$5;
+  exports.textOnColorDisabled = textOnColorDisabled$5;
+  exports.textPlaceholder = textPlaceholder$5;
+  exports.textPrimary = textPrimary$5;
+  exports.textSecondary = textSecondary$5;
   exports.themes = themes;
-  exports.toggleOff = toggleOff$4;
+  exports.toggleOff = toggleOff$5;
   exports.tokens = tokens;
-  exports.ui01 = ui01$4;
-  exports.ui02 = ui02$4;
-  exports.ui03 = ui03$4;
-  exports.ui04 = ui04$4;
-  exports.ui05 = ui05$4;
-  exports.uiBackground = uiBackground$4;
+  exports.ui01 = ui01$5;
+  exports.ui02 = ui02$5;
+  exports.ui03 = ui03$5;
+  exports.ui04 = ui04$5;
+  exports.ui05 = ui05$5;
+  exports.uiBackground = uiBackground$5;
   exports.unstable__meta = unstable__meta;
   exports.v9 = v9;
-  exports.visitedLink = visitedLink$4;
+  exports.visitedLink = visitedLink$5;
   exports.white = white;
 
   Object.defineProperty(exports, '__esModule', { value: true });