@globalpayments/vega 2.46.0 → 2.47.1

package/dist/esm/{content-state-8b844253.js → content-state-7437e069.js}

@@ -1,3027 +1,10 @@
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-factory-e8898f61.js';
-import { V as VegaInternalRichTextEditorFlushChanges, a as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-d7113cf7.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-f77cf9cc.js';
+import { a as VegaInternalRichTextEditorFlushChanges, b as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-7d1ff289.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
 import { i as isNonNullable } from './type-guard-158f6d7a.js';
-import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer, g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
-import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
-import { D as DARK_MODE_CHANGE } from './static-subject-title-97eb1f19.js';
-
-var tinycolor = createCommonjsModule(function (module, exports) {
-// This file is autogenerated. It's used to publish CJS to npm.
-(function (global, factory) {
-  module.exports = factory() ;
-})(commonjsGlobal, (function () {
-  // https://github.com/bgrins/TinyColor
-  // Brian Grinstead, MIT License
-
-  const trimLeft = /^\s+/;
-  const trimRight = /\s+$/;
-
-  function tinycolor(color, opts) {
-    color = color ? color : "";
-    opts = opts || {};
-
-    // If input is already a tinycolor, return itself
-    if (color instanceof tinycolor) {
-      return color;
-    }
-    // If we are called as a function, call using new instead
-    if (!(this instanceof tinycolor)) {
-      return new tinycolor(color, opts);
-    }
-
-    var rgb = inputToRGB(color);
-    (this._originalInput = color),
-      (this._r = rgb.r),
-      (this._g = rgb.g),
-      (this._b = rgb.b),
-      (this._a = rgb.a),
-      (this._roundA = Math.round(100 * this._a) / 100),
-      (this._format = opts.format || rgb.format);
-    this._gradientType = opts.gradientType;
-
-    // Don't let the range of [0,255] come back in [0,1].
-    // Potentially lose a little bit of precision here, but will fix issues where
-    // .5 gets interpreted as half of the total, instead of half of 1
-    // If it was supposed to be 128, this was already taken care of by `inputToRgb`
-    if (this._r < 1) this._r = Math.round(this._r);
-    if (this._g < 1) this._g = Math.round(this._g);
-    if (this._b < 1) this._b = Math.round(this._b);
-
-    this._ok = rgb.ok;
-  }
-
-  tinycolor.prototype = {
-    isDark: function () {
-      return this.getBrightness() < 128;
-    },
-    isLight: function () {
-      return !this.isDark();
-    },
-    isValid: function () {
-      return this._ok;
-    },
-    getOriginalInput: function () {
-      return this._originalInput;
-    },
-    getFormat: function () {
-      return this._format;
-    },
-    getAlpha: function () {
-      return this._a;
-    },
-    getBrightness: function () {
-      //http://www.w3.org/TR/AERT#color-contrast
-      var rgb = this.toRgb();
-      return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
-    },
-    getLuminance: function () {
-      //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-      var rgb = this.toRgb();
-      var RsRGB, GsRGB, BsRGB, R, G, B;
-      RsRGB = rgb.r / 255;
-      GsRGB = rgb.g / 255;
-      BsRGB = rgb.b / 255;
-
-      if (RsRGB <= 0.03928) R = RsRGB / 12.92;
-      else R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
-      if (GsRGB <= 0.03928) G = GsRGB / 12.92;
-      else G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
-      if (BsRGB <= 0.03928) B = BsRGB / 12.92;
-      else B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
-      return 0.2126 * R + 0.7152 * G + 0.0722 * B;
-    },
-    setAlpha: function (value) {
-      this._a = boundAlpha(value);
-      this._roundA = Math.round(100 * this._a) / 100;
-      return this;
-    },
-    toHsv: function () {
-      var hsv = rgbToHsv(this._r, this._g, this._b);
-      return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
-    },
-    toHsvString: function () {
-      var hsv = rgbToHsv(this._r, this._g, this._b);
-      var h = Math.round(hsv.h * 360),
-        s = Math.round(hsv.s * 100),
-        v = Math.round(hsv.v * 100);
-      return this._a == 1
-        ? "hsv(" + h + ", " + s + "%, " + v + "%)"
-        : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
-    },
-    toHsl: function () {
-      var hsl = rgbToHsl(this._r, this._g, this._b);
-      return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
-    },
-    toHslString: function () {
-      var hsl = rgbToHsl(this._r, this._g, this._b);
-      var h = Math.round(hsl.h * 360),
-        s = Math.round(hsl.s * 100),
-        l = Math.round(hsl.l * 100);
-      return this._a == 1
-        ? "hsl(" + h + ", " + s + "%, " + l + "%)"
-        : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
-    },
-    toHex: function (allow3Char) {
-      return rgbToHex(this._r, this._g, this._b, allow3Char);
-    },
-    toHexString: function (allow3Char) {
-      return "#" + this.toHex(allow3Char);
-    },
-    toHex8: function (allow4Char) {
-      return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
-    },
-    toHex8String: function (allow4Char) {
-      return "#" + this.toHex8(allow4Char);
-    },
-    toRgb: function () {
-      return {
-        r: Math.round(this._r),
-        g: Math.round(this._g),
-        b: Math.round(this._b),
-        a: this._a,
-      };
-    },
-    toRgbString: function () {
-      return this._a == 1
-        ? "rgb(" +
-            Math.round(this._r) +
-            ", " +
-            Math.round(this._g) +
-            ", " +
-            Math.round(this._b) +
-            ")"
-        : "rgba(" +
-            Math.round(this._r) +
-            ", " +
-            Math.round(this._g) +
-            ", " +
-            Math.round(this._b) +
-            ", " +
-            this._roundA +
-            ")";
-    },
-    toPercentageRgb: function () {
-      return {
-        r: Math.round(bound01(this._r, 255) * 100) + "%",
-        g: Math.round(bound01(this._g, 255) * 100) + "%",
-        b: Math.round(bound01(this._b, 255) * 100) + "%",
-        a: this._a,
-      };
-    },
-    toPercentageRgbString: function () {
-      return this._a == 1
-        ? "rgb(" +
-            Math.round(bound01(this._r, 255) * 100) +
-            "%, " +
-            Math.round(bound01(this._g, 255) * 100) +
-            "%, " +
-            Math.round(bound01(this._b, 255) * 100) +
-            "%)"
-        : "rgba(" +
-            Math.round(bound01(this._r, 255) * 100) +
-            "%, " +
-            Math.round(bound01(this._g, 255) * 100) +
-            "%, " +
-            Math.round(bound01(this._b, 255) * 100) +
-            "%, " +
-            this._roundA +
-            ")";
-    },
-    toName: function () {
-      if (this._a === 0) {
-        return "transparent";
-      }
-
-      if (this._a < 1) {
-        return false;
-      }
-
-      return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
-    },
-    toFilter: function (secondColor) {
-      var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a);
-      var secondHex8String = hex8String;
-      var gradientType = this._gradientType ? "GradientType = 1, " : "";
-
-      if (secondColor) {
-        var s = tinycolor(secondColor);
-        secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
-      }
-
-      return (
-        "progid:DXImageTransform.Microsoft.gradient(" +
-        gradientType +
-        "startColorstr=" +
-        hex8String +
-        ",endColorstr=" +
-        secondHex8String +
-        ")"
-      );
-    },
-    toString: function (format) {
-      var formatSet = !!format;
-      format = format || this._format;
-
-      var formattedString = false;
-      var hasAlpha = this._a < 1 && this._a >= 0;
-      var needsAlphaFormat =
-        !formatSet &&
-        hasAlpha &&
-        (format === "hex" ||
-          format === "hex6" ||
-          format === "hex3" ||
-          format === "hex4" ||
-          format === "hex8" ||
-          format === "name");
-
-      if (needsAlphaFormat) {
-        // Special case for "transparent", all other non-alpha formats
-        // will return rgba when there is transparency.
-        if (format === "name" && this._a === 0) {
-          return this.toName();
-        }
-        return this.toRgbString();
-      }
-      if (format === "rgb") {
-        formattedString = this.toRgbString();
-      }
-      if (format === "prgb") {
-        formattedString = this.toPercentageRgbString();
-      }
-      if (format === "hex" || format === "hex6") {
-        formattedString = this.toHexString();
-      }
-      if (format === "hex3") {
-        formattedString = this.toHexString(true);
-      }
-      if (format === "hex4") {
-        formattedString = this.toHex8String(true);
-      }
-      if (format === "hex8") {
-        formattedString = this.toHex8String();
-      }
-      if (format === "name") {
-        formattedString = this.toName();
-      }
-      if (format === "hsl") {
-        formattedString = this.toHslString();
-      }
-      if (format === "hsv") {
-        formattedString = this.toHsvString();
-      }
-
-      return formattedString || this.toHexString();
-    },
-    clone: function () {
-      return tinycolor(this.toString());
-    },
-
-    _applyModification: function (fn, args) {
-      var color = fn.apply(null, [this].concat([].slice.call(args)));
-      this._r = color._r;
-      this._g = color._g;
-      this._b = color._b;
-      this.setAlpha(color._a);
-      return this;
-    },
-    lighten: function () {
-      return this._applyModification(lighten, arguments);
-    },
-    brighten: function () {
-      return this._applyModification(brighten, arguments);
-    },
-    darken: function () {
-      return this._applyModification(darken, arguments);
-    },
-    desaturate: function () {
-      return this._applyModification(desaturate, arguments);
-    },
-    saturate: function () {
-      return this._applyModification(saturate, arguments);
-    },
-    greyscale: function () {
-      return this._applyModification(greyscale, arguments);
-    },
-    spin: function () {
-      return this._applyModification(spin, arguments);
-    },
-
-    _applyCombination: function (fn, args) {
-      return fn.apply(null, [this].concat([].slice.call(args)));
-    },
-    analogous: function () {
-      return this._applyCombination(analogous, arguments);
-    },
-    complement: function () {
-      return this._applyCombination(complement, arguments);
-    },
-    monochromatic: function () {
-      return this._applyCombination(monochromatic, arguments);
-    },
-    splitcomplement: function () {
-      return this._applyCombination(splitcomplement, arguments);
-    },
-    // Disabled until https://github.com/bgrins/TinyColor/issues/254
-    // polyad: function (number) {
-    //   return this._applyCombination(polyad, [number]);
-    // },
-    triad: function () {
-      return this._applyCombination(polyad, [3]);
-    },
-    tetrad: function () {
-      return this._applyCombination(polyad, [4]);
-    },
-  };
-
-  // If input is an object, force 1 into "1.0" to handle ratios properly
-  // String input requires "1.0" as input, so 1 will be treated as 1
-  tinycolor.fromRatio = function (color, opts) {
-    if (typeof color == "object") {
-      var newColor = {};
-      for (var i in color) {
-        if (color.hasOwnProperty(i)) {
-          if (i === "a") {
-            newColor[i] = color[i];
-          } else {
-            newColor[i] = convertToPercentage(color[i]);
-          }
-        }
-      }
-      color = newColor;
-    }
-
-    return tinycolor(color, opts);
-  };
-
-  // Given a string or object, convert that input to RGB
-  // Possible string inputs:
-  //
-  //     "red"
-  //     "#f00" or "f00"
-  //     "#ff0000" or "ff0000"
-  //     "#ff000000" or "ff000000"
-  //     "rgb 255 0 0" or "rgb (255, 0, 0)"
-  //     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
-  //     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
-  //     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
-  //     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
-  //     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
-  //     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
-  //
-  function inputToRGB(color) {
-    var rgb = { r: 0, g: 0, b: 0 };
-    var a = 1;
-    var s = null;
-    var v = null;
-    var l = null;
-    var ok = false;
-    var format = false;
-
-    if (typeof color == "string") {
-      color = stringInputToObject(color);
-    }
-
-    if (typeof color == "object") {
-      if (
-        isValidCSSUnit(color.r) &&
-        isValidCSSUnit(color.g) &&
-        isValidCSSUnit(color.b)
-      ) {
-        rgb = rgbToRgb(color.r, color.g, color.b);
-        ok = true;
-        format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
-      } else if (
-        isValidCSSUnit(color.h) &&
-        isValidCSSUnit(color.s) &&
-        isValidCSSUnit(color.v)
-      ) {
-        s = convertToPercentage(color.s);
-        v = convertToPercentage(color.v);
-        rgb = hsvToRgb(color.h, s, v);
-        ok = true;
-        format = "hsv";
-      } else if (
-        isValidCSSUnit(color.h) &&
-        isValidCSSUnit(color.s) &&
-        isValidCSSUnit(color.l)
-      ) {
-        s = convertToPercentage(color.s);
-        l = convertToPercentage(color.l);
-        rgb = hslToRgb(color.h, s, l);
-        ok = true;
-        format = "hsl";
-      }
-
-      if (color.hasOwnProperty("a")) {
-        a = color.a;
-      }
-    }
-
-    a = boundAlpha(a);
-
-    return {
-      ok: ok,
-      format: color.format || format,
-      r: Math.min(255, Math.max(rgb.r, 0)),
-      g: Math.min(255, Math.max(rgb.g, 0)),
-      b: Math.min(255, Math.max(rgb.b, 0)),
-      a: a,
-    };
-  }
-
-  // Conversion Functions
-  // --------------------
-
-  // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
-  // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
-
-  // `rgbToRgb`
-  // Handle bounds / percentage checking to conform to CSS color spec
-  // <http://www.w3.org/TR/css3-color/>
-  // *Assumes:* r, g, b in [0, 255] or [0, 1]
-  // *Returns:* { r, g, b } in [0, 255]
-  function rgbToRgb(r, g, b) {
-    return {
-      r: bound01(r, 255) * 255,
-      g: bound01(g, 255) * 255,
-      b: bound01(b, 255) * 255,
-    };
-  }
-
-  // `rgbToHsl`
-  // Converts an RGB color value to HSL.
-  // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
-  // *Returns:* { h, s, l } in [0,1]
-  function rgbToHsl(r, g, b) {
-    r = bound01(r, 255);
-    g = bound01(g, 255);
-    b = bound01(b, 255);
-
-    var max = Math.max(r, g, b),
-      min = Math.min(r, g, b);
-    var h,
-      s,
-      l = (max + min) / 2;
-
-    if (max == min) {
-      h = s = 0; // achromatic
-    } else {
-      var d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
-
-      h /= 6;
-    }
-
-    return { h: h, s: s, l: l };
-  }
-
-  // `hslToRgb`
-  // Converts an HSL color value to RGB.
-  // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
-  // *Returns:* { r, g, b } in the set [0, 255]
-  function hslToRgb(h, s, l) {
-    var r, g, b;
-
-    h = bound01(h, 360);
-    s = bound01(s, 100);
-    l = bound01(l, 100);
-
-    function hue2rgb(p, q, t) {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    }
-
-    if (s === 0) {
-      r = g = b = l; // achromatic
-    } else {
-      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      var p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1 / 3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
-    }
-
-    return { r: r * 255, g: g * 255, b: b * 255 };
-  }
-
-  // `rgbToHsv`
-  // Converts an RGB color value to HSV
-  // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
-  // *Returns:* { h, s, v } in [0,1]
-  function rgbToHsv(r, g, b) {
-    r = bound01(r, 255);
-    g = bound01(g, 255);
-    b = bound01(b, 255);
-
-    var max = Math.max(r, g, b),
-      min = Math.min(r, g, b);
-    var h,
-      s,
-      v = max;
-
-    var d = max - min;
-    s = max === 0 ? 0 : d / max;
-
-    if (max == min) {
-      h = 0; // achromatic
-    } else {
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
-      h /= 6;
-    }
-    return { h: h, s: s, v: v };
-  }
-
-  // `hsvToRgb`
-  // Converts an HSV color value to RGB.
-  // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
-  // *Returns:* { r, g, b } in the set [0, 255]
-  function hsvToRgb(h, s, v) {
-    h = bound01(h, 360) * 6;
-    s = bound01(s, 100);
-    v = bound01(v, 100);
-
-    var i = Math.floor(h),
-      f = h - i,
-      p = v * (1 - s),
-      q = v * (1 - f * s),
-      t = v * (1 - (1 - f) * s),
-      mod = i % 6,
-      r = [v, q, p, p, t, v][mod],
-      g = [t, v, v, q, p, p][mod],
-      b = [p, p, t, v, v, q][mod];
-
-    return { r: r * 255, g: g * 255, b: b * 255 };
-  }
-
-  // `rgbToHex`
-  // Converts an RGB color to hex
-  // Assumes r, g, and b are contained in the set [0, 255]
-  // Returns a 3 or 6 character hex
-  function rgbToHex(r, g, b, allow3Char) {
-    var hex = [
-      pad2(Math.round(r).toString(16)),
-      pad2(Math.round(g).toString(16)),
-      pad2(Math.round(b).toString(16)),
-    ];
-
-    // Return a 3 character hex if possible
-    if (
-      allow3Char &&
-      hex[0].charAt(0) == hex[0].charAt(1) &&
-      hex[1].charAt(0) == hex[1].charAt(1) &&
-      hex[2].charAt(0) == hex[2].charAt(1)
-    ) {
-      return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
-    }
-
-    return hex.join("");
-  }
-
-  // `rgbaToHex`
-  // Converts an RGBA color plus alpha transparency to hex
-  // Assumes r, g, b are contained in the set [0, 255] and
-  // a in [0, 1]. Returns a 4 or 8 character rgba hex
-  function rgbaToHex(r, g, b, a, allow4Char) {
-    var hex = [
-      pad2(Math.round(r).toString(16)),
-      pad2(Math.round(g).toString(16)),
-      pad2(Math.round(b).toString(16)),
-      pad2(convertDecimalToHex(a)),
-    ];
-
-    // Return a 4 character hex if possible
-    if (
-      allow4Char &&
-      hex[0].charAt(0) == hex[0].charAt(1) &&
-      hex[1].charAt(0) == hex[1].charAt(1) &&
-      hex[2].charAt(0) == hex[2].charAt(1) &&
-      hex[3].charAt(0) == hex[3].charAt(1)
-    ) {
-      return (
-        hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0)
-      );
-    }
-
-    return hex.join("");
-  }
-
-  // `rgbaToArgbHex`
-  // Converts an RGBA color to an ARGB Hex8 string
-  // Rarely used, but required for "toFilter()"
-  function rgbaToArgbHex(r, g, b, a) {
-    var hex = [
-      pad2(convertDecimalToHex(a)),
-      pad2(Math.round(r).toString(16)),
-      pad2(Math.round(g).toString(16)),
-      pad2(Math.round(b).toString(16)),
-    ];
-
-    return hex.join("");
-  }
-
-  // `equals`
-  // Can be called with any tinycolor input
-  tinycolor.equals = function (color1, color2) {
-    if (!color1 || !color2) return false;
-    return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
-  };
-
-  tinycolor.random = function () {
-    return tinycolor.fromRatio({
-      r: Math.random(),
-      g: Math.random(),
-      b: Math.random(),
-    });
-  };
-
-  // Modification Functions
-  // ----------------------
-  // Thanks to less.js for some of the basics here
-  // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
-
-  function desaturate(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var hsl = tinycolor(color).toHsl();
-    hsl.s -= amount / 100;
-    hsl.s = clamp01(hsl.s);
-    return tinycolor(hsl);
-  }
-
-  function saturate(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var hsl = tinycolor(color).toHsl();
-    hsl.s += amount / 100;
-    hsl.s = clamp01(hsl.s);
-    return tinycolor(hsl);
-  }
-
-  function greyscale(color) {
-    return tinycolor(color).desaturate(100);
-  }
-
-  function lighten(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var hsl = tinycolor(color).toHsl();
-    hsl.l += amount / 100;
-    hsl.l = clamp01(hsl.l);
-    return tinycolor(hsl);
-  }
-
-  function brighten(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var rgb = tinycolor(color).toRgb();
-    rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
-    rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
-    rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
-    return tinycolor(rgb);
-  }
-
-  function darken(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var hsl = tinycolor(color).toHsl();
-    hsl.l -= amount / 100;
-    hsl.l = clamp01(hsl.l);
-    return tinycolor(hsl);
-  }
-
-  // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
-  // Values outside of this range will be wrapped into this range.
-  function spin(color, amount) {
-    var hsl = tinycolor(color).toHsl();
-    var hue = (hsl.h + amount) % 360;
-    hsl.h = hue < 0 ? 360 + hue : hue;
-    return tinycolor(hsl);
-  }
-
-  // Combination Functions
-  // ---------------------
-  // Thanks to jQuery xColor for some of the ideas behind these
-  // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
-
-  function complement(color) {
-    var hsl = tinycolor(color).toHsl();
-    hsl.h = (hsl.h + 180) % 360;
-    return tinycolor(hsl);
-  }
-
-  function polyad(color, number) {
-    if (isNaN(number) || number <= 0) {
-      throw new Error("Argument to polyad must be a positive number");
-    }
-    var hsl = tinycolor(color).toHsl();
-    var result = [tinycolor(color)];
-    var step = 360 / number;
-    for (var i = 1; i < number; i++) {
-      result.push(tinycolor({ h: (hsl.h + i * step) % 360, s: hsl.s, l: hsl.l }));
-    }
-
-    return result;
-  }
-
-  function splitcomplement(color) {
-    var hsl = tinycolor(color).toHsl();
-    var h = hsl.h;
-    return [
-      tinycolor(color),
-      tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
-      tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }),
-    ];
-  }
-
-  function analogous(color, results, slices) {
-    results = results || 6;
-    slices = slices || 30;
-
-    var hsl = tinycolor(color).toHsl();
-    var part = 360 / slices;
-    var ret = [tinycolor(color)];
-
-    for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results; ) {
-      hsl.h = (hsl.h + part) % 360;
-      ret.push(tinycolor(hsl));
-    }
-    return ret;
-  }
-
-  function monochromatic(color, results) {
-    results = results || 6;
-    var hsv = tinycolor(color).toHsv();
-    var h = hsv.h,
-      s = hsv.s,
-      v = hsv.v;
-    var ret = [];
-    var modification = 1 / results;
-
-    while (results--) {
-      ret.push(tinycolor({ h: h, s: s, v: v }));
-      v = (v + modification) % 1;
-    }
-
-    return ret;
-  }
-
-  // Utility Functions
-  // ---------------------
-
-  tinycolor.mix = function (color1, color2, amount) {
-    amount = amount === 0 ? 0 : amount || 50;
-
-    var rgb1 = tinycolor(color1).toRgb();
-    var rgb2 = tinycolor(color2).toRgb();
-
-    var p = amount / 100;
-
-    var rgba = {
-      r: (rgb2.r - rgb1.r) * p + rgb1.r,
-      g: (rgb2.g - rgb1.g) * p + rgb1.g,
-      b: (rgb2.b - rgb1.b) * p + rgb1.b,
-      a: (rgb2.a - rgb1.a) * p + rgb1.a,
-    };
-
-    return tinycolor(rgba);
-  };
-
-  // Readability Functions
-  // ---------------------
-  // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
-
-  // `contrast`
-  // Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
-  tinycolor.readability = function (color1, color2) {
-    var c1 = tinycolor(color1);
-    var c2 = tinycolor(color2);
-    return (
-      (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) /
-      (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05)
-    );
-  };
-
-  // `isReadable`
-  // Ensure that foreground and background color combinations meet WCAG2 guidelines.
-  // The third argument is an optional Object.
-  //      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
-  //      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
-  // If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
-
-  // *Example*
-  //    tinycolor.isReadable("#000", "#111") => false
-  //    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
-  tinycolor.isReadable = function (color1, color2, wcag2) {
-    var readability = tinycolor.readability(color1, color2);
-    var wcag2Parms, out;
-
-    out = false;
-
-    wcag2Parms = validateWCAG2Parms(wcag2);
-    switch (wcag2Parms.level + wcag2Parms.size) {
-      case "AAsmall":
-      case "AAAlarge":
-        out = readability >= 4.5;
-        break;
-      case "AAlarge":
-        out = readability >= 3;
-        break;
-      case "AAAsmall":
-        out = readability >= 7;
-        break;
-    }
-    return out;
-  };
-
-  // `mostReadable`
-  // Given a base color and a list of possible foreground or background
-  // colors for that base, returns the most readable color.
-  // Optionally returns Black or White if the most readable color is unreadable.
-  // *Example*
-  //    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
-  //    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
-  //    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
-  //    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
-  tinycolor.mostReadable = function (baseColor, colorList, args) {
-    var bestColor = null;
-    var bestScore = 0;
-    var readability;
-    var includeFallbackColors, level, size;
-    args = args || {};
-    includeFallbackColors = args.includeFallbackColors;
-    level = args.level;
-    size = args.size;
-
-    for (var i = 0; i < colorList.length; i++) {
-      readability = tinycolor.readability(baseColor, colorList[i]);
-      if (readability > bestScore) {
-        bestScore = readability;
-        bestColor = tinycolor(colorList[i]);
-      }
-    }
-
-    if (
-      tinycolor.isReadable(baseColor, bestColor, {
-        level: level,
-        size: size,
-      }) ||
-      !includeFallbackColors
-    ) {
-      return bestColor;
-    } else {
-      args.includeFallbackColors = false;
-      return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args);
-    }
-  };
-
-  // Big List of Colors
-  // ------------------
-  // <https://www.w3.org/TR/css-color-4/#named-colors>
-  var names = (tinycolor.names = {
-    aliceblue: "f0f8ff",
-    antiquewhite: "faebd7",
-    aqua: "0ff",
-    aquamarine: "7fffd4",
-    azure: "f0ffff",
-    beige: "f5f5dc",
-    bisque: "ffe4c4",
-    black: "000",
-    blanchedalmond: "ffebcd",
-    blue: "00f",
-    blueviolet: "8a2be2",
-    brown: "a52a2a",
-    burlywood: "deb887",
-    burntsienna: "ea7e5d",
-    cadetblue: "5f9ea0",
-    chartreuse: "7fff00",
-    chocolate: "d2691e",
-    coral: "ff7f50",
-    cornflowerblue: "6495ed",
-    cornsilk: "fff8dc",
-    crimson: "dc143c",
-    cyan: "0ff",
-    darkblue: "00008b",
-    darkcyan: "008b8b",
-    darkgoldenrod: "b8860b",
-    darkgray: "a9a9a9",
-    darkgreen: "006400",
-    darkgrey: "a9a9a9",
-    darkkhaki: "bdb76b",
-    darkmagenta: "8b008b",
-    darkolivegreen: "556b2f",
-    darkorange: "ff8c00",
-    darkorchid: "9932cc",
-    darkred: "8b0000",
-    darksalmon: "e9967a",
-    darkseagreen: "8fbc8f",
-    darkslateblue: "483d8b",
-    darkslategray: "2f4f4f",
-    darkslategrey: "2f4f4f",
-    darkturquoise: "00ced1",
-    darkviolet: "9400d3",
-    deeppink: "ff1493",
-    deepskyblue: "00bfff",
-    dimgray: "696969",
-    dimgrey: "696969",
-    dodgerblue: "1e90ff",
-    firebrick: "b22222",
-    floralwhite: "fffaf0",
-    forestgreen: "228b22",
-    fuchsia: "f0f",
-    gainsboro: "dcdcdc",
-    ghostwhite: "f8f8ff",
-    gold: "ffd700",
-    goldenrod: "daa520",
-    gray: "808080",
-    green: "008000",
-    greenyellow: "adff2f",
-    grey: "808080",
-    honeydew: "f0fff0",
-    hotpink: "ff69b4",
-    indianred: "cd5c5c",
-    indigo: "4b0082",
-    ivory: "fffff0",
-    khaki: "f0e68c",
-    lavender: "e6e6fa",
-    lavenderblush: "fff0f5",
-    lawngreen: "7cfc00",
-    lemonchiffon: "fffacd",
-    lightblue: "add8e6",
-    lightcoral: "f08080",
-    lightcyan: "e0ffff",
-    lightgoldenrodyellow: "fafad2",
-    lightgray: "d3d3d3",
-    lightgreen: "90ee90",
-    lightgrey: "d3d3d3",
-    lightpink: "ffb6c1",
-    lightsalmon: "ffa07a",
-    lightseagreen: "20b2aa",
-    lightskyblue: "87cefa",
-    lightslategray: "789",
-    lightslategrey: "789",
-    lightsteelblue: "b0c4de",
-    lightyellow: "ffffe0",
-    lime: "0f0",
-    limegreen: "32cd32",
-    linen: "faf0e6",
-    magenta: "f0f",
-    maroon: "800000",
-    mediumaquamarine: "66cdaa",
-    mediumblue: "0000cd",
-    mediumorchid: "ba55d3",
-    mediumpurple: "9370db",
-    mediumseagreen: "3cb371",
-    mediumslateblue: "7b68ee",
-    mediumspringgreen: "00fa9a",
-    mediumturquoise: "48d1cc",
-    mediumvioletred: "c71585",
-    midnightblue: "191970",
-    mintcream: "f5fffa",
-    mistyrose: "ffe4e1",
-    moccasin: "ffe4b5",
-    navajowhite: "ffdead",
-    navy: "000080",
-    oldlace: "fdf5e6",
-    olive: "808000",
-    olivedrab: "6b8e23",
-    orange: "ffa500",
-    orangered: "ff4500",
-    orchid: "da70d6",
-    palegoldenrod: "eee8aa",
-    palegreen: "98fb98",
-    paleturquoise: "afeeee",
-    palevioletred: "db7093",
-    papayawhip: "ffefd5",
-    peachpuff: "ffdab9",
-    peru: "cd853f",
-    pink: "ffc0cb",
-    plum: "dda0dd",
-    powderblue: "b0e0e6",
-    purple: "800080",
-    rebeccapurple: "663399",
-    red: "f00",
-    rosybrown: "bc8f8f",
-    royalblue: "4169e1",
-    saddlebrown: "8b4513",
-    salmon: "fa8072",
-    sandybrown: "f4a460",
-    seagreen: "2e8b57",
-    seashell: "fff5ee",
-    sienna: "a0522d",
-    silver: "c0c0c0",
-    skyblue: "87ceeb",
-    slateblue: "6a5acd",
-    slategray: "708090",
-    slategrey: "708090",
-    snow: "fffafa",
-    springgreen: "00ff7f",
-    steelblue: "4682b4",
-    tan: "d2b48c",
-    teal: "008080",
-    thistle: "d8bfd8",
-    tomato: "ff6347",
-    turquoise: "40e0d0",
-    violet: "ee82ee",
-    wheat: "f5deb3",
-    white: "fff",
-    whitesmoke: "f5f5f5",
-    yellow: "ff0",
-    yellowgreen: "9acd32",
-  });
-
-  // Make it easy to access colors via `hexNames[hex]`
-  var hexNames = (tinycolor.hexNames = flip(names));
-
-  // Utilities
-  // ---------
-
-  // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
-  function flip(o) {
-    var flipped = {};
-    for (var i in o) {
-      if (o.hasOwnProperty(i)) {
-        flipped[o[i]] = i;
-      }
-    }
-    return flipped;
-  }
-
-  // Return a valid alpha value [0,1] with all invalid values being set to 1
-  function boundAlpha(a) {
-    a = parseFloat(a);
-
-    if (isNaN(a) || a < 0 || a > 1) {
-      a = 1;
-    }
-
-    return a;
-  }
-
-  // Take input from [0, n] and return it as [0, 1]
-  function bound01(n, max) {
-    if (isOnePointZero(n)) n = "100%";
-
-    var processPercent = isPercentage(n);
-    n = Math.min(max, Math.max(0, parseFloat(n)));
-
-    // Automatically convert percentage into number
-    if (processPercent) {
-      n = parseInt(n * max, 10) / 100;
-    }
-
-    // Handle floating point rounding errors
-    if (Math.abs(n - max) < 0.000001) {
-      return 1;
-    }
-
-    // Convert into [0, 1] range if it isn't already
-    return (n % max) / parseFloat(max);
-  }
-
-  // Force a number between 0 and 1
-  function clamp01(val) {
-    return Math.min(1, Math.max(0, val));
-  }
-
-  // Parse a base-16 hex value into a base-10 integer
-  function parseIntFromHex(val) {
-    return parseInt(val, 16);
-  }
-
-  // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
-  // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
-  function isOnePointZero(n) {
-    return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
-  }
-
-  // Check to see if string passed in is a percentage
-  function isPercentage(n) {
-    return typeof n === "string" && n.indexOf("%") != -1;
-  }
-
-  // Force a hex value to have 2 characters
-  function pad2(c) {
-    return c.length == 1 ? "0" + c : "" + c;
-  }
-
-  // Replace a decimal with it's percentage value
-  function convertToPercentage(n) {
-    if (n <= 1) {
-      n = n * 100 + "%";
-    }
-
-    return n;
-  }
-
-  // Converts a decimal to a hex value
-  function convertDecimalToHex(d) {
-    return Math.round(parseFloat(d) * 255).toString(16);
-  }
-  // Converts a hex value to a decimal
-  function convertHexToDecimal(h) {
-    return parseIntFromHex(h) / 255;
-  }
-
-  var matchers = (function () {
-    // <http://www.w3.org/TR/css3-values/#integers>
-    var CSS_INTEGER = "[-\\+]?\\d+%?";
-
-    // <http://www.w3.org/TR/css3-values/#number-value>
-    var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
-
-    // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
-    var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
-
-    // Actual matching.
-    // Parentheses and commas are optional, but not required.
-    // Whitespace can take the place of commas or opening paren
-    var PERMISSIVE_MATCH3 =
-      "[\\s|\\(]+(" +
-      CSS_UNIT +
-      ")[,|\\s]+(" +
-      CSS_UNIT +
-      ")[,|\\s]+(" +
-      CSS_UNIT +
-      ")\\s*\\)?";
-    var PERMISSIVE_MATCH4 =
-      "[\\s|\\(]+(" +
-      CSS_UNIT +
-      ")[,|\\s]+(" +
-      CSS_UNIT +
-      ")[,|\\s]+(" +
-      CSS_UNIT +
-      ")[,|\\s]+(" +
-      CSS_UNIT +
-      ")\\s*\\)?";
-
-    return {
-      CSS_UNIT: new RegExp(CSS_UNIT),
-      rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
-      rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
-      hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
-      hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
-      hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
-      hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
-      hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-      hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-      hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-      hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-    };
-  })();
-
-  // `isValidCSSUnit`
-  // Take in a single string / number and check to see if it looks like a CSS unit
-  // (see `matchers` above for definition).
-  function isValidCSSUnit(color) {
-    return !!matchers.CSS_UNIT.exec(color);
-  }
-
-  // `stringInputToObject`
-  // Permissive string parsing.  Take in a number of formats, and output an object
-  // based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
-  function stringInputToObject(color) {
-    color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
-    var named = false;
-    if (names[color]) {
-      color = names[color];
-      named = true;
-    } else if (color == "transparent") {
-      return { r: 0, g: 0, b: 0, a: 0, format: "name" };
-    }
-
-    // Try to match string input using regular expressions.
-    // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
-    // Just return an object and let the conversion functions handle that.
-    // This way the result will be the same whether the tinycolor is initialized with string or object.
-    var match;
-    if ((match = matchers.rgb.exec(color))) {
-      return { r: match[1], g: match[2], b: match[3] };
-    }
-    if ((match = matchers.rgba.exec(color))) {
-      return { r: match[1], g: match[2], b: match[3], a: match[4] };
-    }
-    if ((match = matchers.hsl.exec(color))) {
-      return { h: match[1], s: match[2], l: match[3] };
-    }
-    if ((match = matchers.hsla.exec(color))) {
-      return { h: match[1], s: match[2], l: match[3], a: match[4] };
-    }
-    if ((match = matchers.hsv.exec(color))) {
-      return { h: match[1], s: match[2], v: match[3] };
-    }
-    if ((match = matchers.hsva.exec(color))) {
-      return { h: match[1], s: match[2], v: match[3], a: match[4] };
-    }
-    if ((match = matchers.hex8.exec(color))) {
-      return {
-        r: parseIntFromHex(match[1]),
-        g: parseIntFromHex(match[2]),
-        b: parseIntFromHex(match[3]),
-        a: convertHexToDecimal(match[4]),
-        format: named ? "name" : "hex8",
-      };
-    }
-    if ((match = matchers.hex6.exec(color))) {
-      return {
-        r: parseIntFromHex(match[1]),
-        g: parseIntFromHex(match[2]),
-        b: parseIntFromHex(match[3]),
-        format: named ? "name" : "hex",
-      };
-    }
-    if ((match = matchers.hex4.exec(color))) {
-      return {
-        r: parseIntFromHex(match[1] + "" + match[1]),
-        g: parseIntFromHex(match[2] + "" + match[2]),
-        b: parseIntFromHex(match[3] + "" + match[3]),
-        a: convertHexToDecimal(match[4] + "" + match[4]),
-        format: named ? "name" : "hex8",
-      };
-    }
-    if ((match = matchers.hex3.exec(color))) {
-      return {
-        r: parseIntFromHex(match[1] + "" + match[1]),
-        g: parseIntFromHex(match[2] + "" + match[2]),
-        b: parseIntFromHex(match[3] + "" + match[3]),
-        format: named ? "name" : "hex",
-      };
-    }
-
-    return false;
-  }
-
-  function validateWCAG2Parms(parms) {
-    // return valid WCAG2 parms for isReadable.
-    // If input parms are invalid, return {"level":"AA", "size":"small"}
-    var level, size;
-    parms = parms || { level: "AA", size: "small" };
-    level = (parms.level || "AA").toUpperCase();
-    size = (parms.size || "small").toLowerCase();
-    if (level !== "AA" && level !== "AAA") {
-      level = "AA";
-    }
-    if (size !== "small" && size !== "large") {
-      size = "small";
-    }
-    return { level: level, size: size };
-  }
-
-  return tinycolor;
-
-}));
-});
-
-const formatValue$2 = (tinyColor) => {
-  if (!tinyColor) {
-    return '';
-  }
-  const { r, g, b, a } = tinyColor.toRgb();
-  return `${r} ${g} ${b} / ${a}`;
-};
-const OverridableColorTokens = [
-  {
-    name: 'bg-action',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-action',
-  },
-  {
-    name: 'bg-action-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-action-hover',
-  },
-  {
-    name: 'bg-action-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-action-focus',
-  },
-  {
-    name: 'bg-action-active',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-action-active',
-  },
-  {
-    name: 'bg-action-secondary-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.15);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-action-secondary-hover',
-  },
-  {
-    name: 'bg-action-secondary-active',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(20);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-20);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.15);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-action-secondary-active',
-  },
-  {
-    name: 'bg-divider',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-divider',
-  },
-  {
-    name: 'bg-keypad-btn-active',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.3);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-keypad-btn-active',
-  },
-  {
-    name: 'bg-selected',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.25);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-selected',
-  },
-  {
-    name: 'bg-sidebar',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['sidebarColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-sidebar',
-  },
-  {
-    name: 'bg-sidebar-item-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['sidebarColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
-      }
-      else {
-        value = tinycolor({ a: 0.86, r: 15, b: 15, g: 15 });
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-sidebar-item-hover',
-  },
-  {
-    name: 'bg-sidebar-item-selected',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.4);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-sidebar-item-selected',
-  },
-  {
-    name: 'bg-table-selected-row',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.2);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-table-selected-row',
-  },
-  {
-    name: 'bg-toggle-switch-selected-disabled',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.5);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-toggle-switch-selected-disabled',
-  },
-  {
-    name: 'bg-date-picker-range',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.15);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-bg-date-picker-range',
-  },
-  {
-    name: 'text-link',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-text-link',
-  },
-  {
-    name: 'text-link-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-text-link-hover',
-  },
-  {
-    name: 'text-link-active',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-text-link-active',
-  },
-  {
-    name: 'text-link-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-text-link-focus',
-  },
-  {
-    name: 'text-link-visited',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(20);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-22);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-text-link-visited',
-  },
-  {
-    name: 'text-sidebar-link',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['sidebarColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = tinycolor({ a: 0.9, b: 255, r: 255, g: 255 });
-      }
-      else {
-        value = tinycolor({ a: 0.86, b: 15, r: 15, g: 15 });
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-text-sidebar-link',
-  },
-  {
-    name: 'text-sidebar-link-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['sidebarColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = tinycolor({ a: 0.86, r: 15, b: 15, g: 15 });
-      }
-      else {
-        value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-text-sidebar-link-hover',
-  },
-  {
-    name: 'text-sidebar-link-selected',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['sidebarColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
-      }
-      else {
-        value = tinycolor({ a: 0.86, b: 15, r: 15, g: 15 });
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-text-sidebar-link-selected',
-  },
-  {
-    name: 'border-color-action',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-action',
-  },
-  {
-    name: 'border-color-action-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-action-hover',
-  },
-  {
-    name: 'border-color-action-active',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-action-active',
-  },
-  {
-    name: 'border-color-divider',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-divider',
-  },
-  {
-    name: 'border-color-divider-secondary',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.4);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-divider-secondary',
-  },
-  {
-    name: 'border-color-input-field',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-input-field',
-  },
-  {
-    name: 'border-color-input-field-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-input-field-hover',
-  },
-  {
-    name: 'border-color-input-field-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-input-field-focus',
-  },
-  {
-    name: 'border-color-input-field-disabled',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = tinycolor({ a: 0.2, r: 15, b: 15, g: 15 });
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-input-field-disabled',
-  },
-  {
-    name: 'border-color-tile-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-tile-focus',
-  },
-  {
-    name: 'border-color-tile-selected-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-tile-selected-focus',
-  },
-  {
-    name: 'border-color-tile-selected',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-tile-selected',
-  },
-  {
-    name: 'border-color-tile-selected-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      return formatValue$2(value);
-    },
-  },
-  {
-    name: 'dark-border-color-tile-selected-hover',
-  },
-];
-
-const formatValue$1 = (tinyColor) => {
-  if (!tinyColor) {
-    return '';
-  }
-  const { r, g, b, a } = tinyColor.toRgb();
-  return `${r} ${g} ${b} / ${a}`;
-};
-const OverridableBorderTokens = [
-  {
-    name: 'border-secondary-btn',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-secondary-btn',
-  },
-  {
-    name: 'border-secondary-btn-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-secondary-btn-hover',
-  },
-  {
-    name: 'border-secondary-btn-active',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-secondary-btn-active',
-  },
-  {
-    name: 'border-input-field',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-input-field',
-  },
-  {
-    name: 'border-input-field-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-input-field-hover',
-  },
-  {
-    name: 'border-input-field-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-input-field-focus',
-  },
-  {
-    name: 'border-input-field-disabled',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = tinycolor({ a: 0.2, r: 15, b: 15, g: 15 });
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-input-field-disabled',
-  },
-  {
-    name: 'border-divider',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-divider',
-  },
-  {
-    name: 'border-divider-secondary',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.4);
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-divider-secondary',
-  },
-  {
-    name: 'border-tile-selected',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-tile-selected',
-  },
-  {
-    name: 'border-tile-selected-hover',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(10);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
-      }
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-tile-selected-hover',
-  },
-  {
-    name: 'border-tile-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-tile-focus',
-  },
-  {
-    name: 'border-tile-selected-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = value === null || value === void 0 ? void 0 : value.lighten(15);
-      }
-      else {
-        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
-      }
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
-      return formatValue$1(value);
-    },
-  },
-  {
-    name: 'dark-border-tile-selected-focus',
-  },
-];
-
-const formatValue = (tinyColor) => {
-  if (!tinyColor) {
-    return '';
-  }
-  const { r, g, b, a } = tinyColor.toRgb();
-  return `${r} ${g} ${b} / ${a}`;
-};
-const OverridableRingTokens = [
-  {
-    name: 'ring-input-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.25);
-      return formatValue(value);
-    },
-  },
-  {
-    name: 'dark-ring-input-focus',
-  },
-  {
-    name: 'ring-action-focus',
-    overrideGetter: (overrideColors, tinycolor) => {
-      const overrideBaseColor = overrideColors['actionColor'];
-      if (!overrideBaseColor) {
-        return '';
-      }
-      const baseColor = overrideBaseColor
-        ? tinycolor(overrideBaseColor)
-        : undefined;
-      let value = baseColor
-        ? baseColor.clone()
-        : undefined;
-      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.25);
-      return formatValue(value);
-    },
-  },
-  {
-    name: 'dark-ring-action-focus',
-  },
-];
-
-/**
- * Vega components color override controller
- */
-class ColorSchemaOverridingController {
-  /**
-   * It takes a color and generates a bunch of other colors based on that color
-   *
-   * @param {VegaThemeOverrideColors} overrideColors - OverrideColors - This is the object that is passed in from the user.
-   * @returns {OverrideColor[]} Parsed action colors
-   */
-  generateOverrideThemes(overrideColors) {
-    return this.getOverridableTokens().map((item) => {
-      return {
-        name: item.name,
-        value: this.parseCssVarValue(item, overrideColors),
-      };
-    });
-  }
-  /**
-   * Set the custom override theme colors to customOverrideThemeStyleContainer
-   *
-   * @param {OverrideColor[]} overrideThemes Parsed custom override colors
-   */
-  applyTheme(overrideThemes) {
-    this.getOverrideThemeContainer().innerHTML = `
-:root {
-\t\t${overrideThemes
-      .filter((item) => {
-      return !!item.value;
-    })
-      .map((item) => `--v-${item.name}: ${item.value};`)
-      .join('\n\t\t')}
-}
-				`;
-  }
-  /**
-   * It creates a customOverrideTheme style tag in the head of the document if it doesn't exist, and returns it
-   *
-   * @returns {Element} The customOverrideThemeStyleContainer is being returned.
-   */
-  getOverrideThemeContainer() {
-    let customOverrideThemeStyleContainer = document.head.querySelector(`#vegaCustomOverrideTheme`);
-    if (!customOverrideThemeStyleContainer) {
-      customOverrideThemeStyleContainer = document.createElement('style');
-      customOverrideThemeStyleContainer.id = 'vegaCustomOverrideTheme';
-      document.head.append(customOverrideThemeStyleContainer);
-    }
-    return customOverrideThemeStyleContainer;
-  }
-  /**
-   * Get the overridable color tokens from design token
-   *
-   * @returns {OverridableToken[]} overridable action color token array
-   */
-  getOverridableTokens() {
-    return [...OverridableColorTokens, ...OverridableBorderTokens, ...OverridableRingTokens];
-  }
-  /**
-   * Calculate and parse color to css var value
-   *
-   * @param {OverridableToken} overrideColorToken The token will be overridden
-   * @param {VegaThemeOverrideColors} overrideColors the payload of override colors
-   * @returns {Nullable<string>} The css var value
-   */
-  parseCssVarValue(overrideColorToken, overrideColors) {
-    var _a;
-    return (_a = overrideColorToken.overrideGetter) === null || _a === void 0 ? void 0 : _a.call(overrideColorToken, overrideColors, tinycolor);
-  }
-}
-const VegaColorSchemaOverridingController = new ColorSchemaOverridingController();
-
-/* This file is generated by vega-design 2.0.77 */
-const DarkModeColorTokens = {
-  'bg-brand': '176, 180, 181, 1',
-  'bg-page': '24, 24, 48, 1',
-  'bg-primary': '4, 4, 28, 1',
-  'bg-secondary': '18, 18, 39, 1',
-  'bg-tertiary': '24, 24, 48, 1',
-  'bg-quaternary': '70, 71, 101, 1',
-  'bg-inverted-primary': '252, 252, 252, 1',
-  'bg-inverted-secondary': '247, 247, 247, 1',
-  'bg-inverted-tertiary': '240, 243, 247, 1',
-  'bg-inverted-quaternary': '241, 248, 251, 1',
-  'bg-action': '0, 187, 255, 1',
-  'bg-action-hover': '0, 204, 255, 1',
-  'bg-action-focus': '0, 187, 255, 1',
-  'bg-action-active': '4, 165, 245, 1',
-  'bg-action-quaternary': '51, 57, 61, 1',
-  'bg-action-quaternary-hover': '89, 96, 99, 1',
-  'bg-action-quaternary-active': '24, 24, 48, 1',
-  'bg-action-secondary': '0, 0, 0, 0',
-  'bg-action-secondary-hover': '0, 204, 255, 0.2',
-  'bg-action-secondary-active': '4, 165, 245, 0.2',
-  'bg-action-tertiary': '0, 0, 0, 0',
-  'bg-action-tertiary-hover': '252, 252, 252, 0.2',
-  'bg-action-tertiary-active': '252, 252, 252, 0.1',
-  'bg-app-header': '24, 24, 48, 0.92',
-  'bg-backdrop-modal': '70, 71, 101, 0.8',
-  'bg-backdrop-popover': '70, 71, 101, 0.56',
-  'bg-backdrop-sidebar': '70, 71, 101, 0.8',
-  'bg-chip': '252, 252, 252, 0.1',
-  'bg-chip-hover': '252, 252, 252, 0.2',
-  'bg-chip-active': '252, 252, 252, 0.06',
-  'bg-danger': '255, 56, 97, 1',
-  'bg-danger-hover': '255, 71, 123, 1',
-  'bg-danger-focus': '255, 56, 97, 1',
-  'bg-danger-active': '230, 50, 87, 1',
-  'bg-danger-tertiary': '0, 0, 0, 0',
-  'bg-danger-tertiary-hover': '255, 71, 123, 0.2',
-  'bg-danger-tertiary-active': '230, 50, 87, 0.2',
-  'bg-disabled': '70, 71, 101, 1',
-  'bg-divider': '32, 54, 69, 1',
-  'bg-divider-secondary': '51, 57, 61, 1',
-  'bg-keypad-btn-active': '45, 76, 97, 1',
-  'bg-loading-progress': '4, 165, 245, 1',
-  'bg-loading-track': '142, 223, 249, 1',
-  'bg-segment-hover': '70, 71, 101, 1',
-  'bg-segment-control': '210, 208, 223, 0.1',
-  'bg-selected': '85, 218, 255, 0.3',
-  'bg-sidebar': '18, 18, 39, 1',
-  'bg-sidebar-icon': '188, 186, 213, 1',
-  'bg-sidebar-icon-hover': '18, 18, 39, 1',
-  'bg-sidebar-icon-selected': '252, 252, 252, 1',
-  'bg-sidebar-item-hover': '252, 252, 252, 1',
-  'bg-sidebar-item-selected': '0, 187, 255, 0.4',
-  'bg-site-footer': '51, 57, 61, 1',
-  'bg-site-footer-action': '171, 198, 216, 1',
-  'bg-site-footer-action-hover': '199, 217, 229, 1',
-  'bg-site-footer-action-active': '143, 179, 203, 1',
-  'bg-site-footer-field': '89, 96, 99, 1',
-  'bg-slider-handle': '252, 252, 252, 1',
-  'bg-status-error': '189, 41, 71, 1',
-  'bg-status-info': '252, 252, 252, 1',
-  'bg-status-success': '123, 242, 151, 1',
-  'bg-status-warning': '255, 212, 105, 1',
-  'bg-tab': '51, 57, 61, 1',
-  'bg-tab-hover': '89, 96, 99, 1',
-  'bg-tab-selected': '240, 243, 247, 1',
-  'bg-table-alt-row': '18, 18, 39, 1',
-  'bg-table-header': '24, 24, 48, 1',
-  'bg-table-row-hover': '70, 71, 101, 1',
-  'bg-table-row-selected-expanded': '32, 54, 69, 1',
-  'bg-table-selected-row': '45, 76, 97, 1',
-  'bg-textarea-count': '252, 252, 252, 0.5',
-  'bg-tile': '4, 4, 28, 1',
-  'bg-tile-hover': '24, 24, 48, 1',
-  'bg-tile-selected': '32, 54, 69, 1',
-  'bg-tile-selected-hover': '45, 76, 97, 1',
-  'bg-toggle-switch': '210, 208, 223, 1',
-  'bg-toggle-switch-hover': '188, 186, 213, 1',
-  'bg-toggle-switch-selected-disabled': '0, 75, 128, 1',
-  'bg-transparent': '0, 0, 0, 0',
-  'bg-accent1-primary': '109, 217, 202, 1',
-  'bg-accent1-secondary': '174, 234, 226, 1',
-  'bg-accent1-tertiary': '223, 247, 243, 1',
-  'bg-accent2-primary': '95, 56, 206, 1',
-  'bg-accent2-secondary': '184, 167, 233, 1',
-  'bg-accent2-tertiary': '219, 211, 244, 1',
-  'bg-accent3-primary': '255, 203, 105, 1',
-  'bg-accent3-secondary': '251, 226, 185, 1',
-  'bg-accent3-tertiary': '255, 243, 222, 1',
-  'bg-accent4-primary': '255, 129, 87, 1',
-  'bg-accent4-secondary': '255, 185, 162, 1',
-  'bg-accent4-tertiary': '255, 227, 218, 1',
-  'bg-accent5-primary': '4, 165, 245, 1',
-  'bg-accent5-secondary': '85, 218, 255, 1',
-  'bg-accent5-tertiary': '227, 247, 253, 1',
-  'bg-accent6-primary': '255, 84, 165, 1',
-  'bg-accent6-secondary': '255, 179, 215, 1',
-  'bg-accent6-tertiary': '255, 217, 235, 1',
-  'bg-accent7-primary': '37, 159, 159, 1',
-  'bg-accent7-secondary': '155, 212, 214, 1',
-  'bg-accent7-tertiary': '208, 239, 239, 1',
-  'bg-accent8-primary': '86, 61, 130, 1',
-  'bg-accent8-secondary': '199, 162, 204, 1',
-  'bg-accent8-tertiary': '230, 214, 234, 1',
-  'bg-accent9-primary': '255, 191, 63, 1',
-  'bg-accent9-secondary': '254, 215, 142, 1',
-  'bg-accent9-tertiary': '251, 226, 185, 1',
-  'bg-accent10-primary': '237, 122, 35, 1',
-  'bg-accent10-secondary': '241, 146, 85, 1',
-  'bg-accent10-tertiary': '245, 187, 148, 1',
-  'bg-date-picker-range': '32, 54, 69, 1',
-  'text-primary': '252, 252, 252, 1',
-  'text-secondary': '188, 186, 213, 1',
-  'text-inverted-primary': '4, 4, 28, 1',
-  'text-inverted-secondary': '107, 116, 125, 1',
-  'text-black': '32, 54, 69, 1',
-  'text-white': '252, 252, 252, 1',
-  'text-brand': '176, 180, 181, 1',
-  'text-danger-link': '255, 56, 97, 1',
-  'text-danger-link-hover': '255, 71, 123, 1',
-  'text-danger-link-active': '230, 50, 87, 1',
-  'text-danger-link-focus': '255, 82, 136, 1',
-  'text-danger-link-visited': '255, 56, 97, 1',
-  'text-disabled': '70, 71, 101, 1',
-  'text-error': '255, 56, 97, 1',
-  'text-input-disabled': '176, 180, 181, 1',
-  'text-input-placeholder': '89, 96, 99, 1',
-  'text-link': '0, 187, 255, 1',
-  'text-link-hover': '0, 204, 255, 1',
-  'text-link-active': '4, 165, 245, 1',
-  'text-link-focus': '0, 204, 255, 1',
-  'text-link-visited': '128, 107, 255, 1',
-  'text-on-action': '4, 4, 28, 1',
-  'text-on-danger': '4, 4, 28, 1',
-  'text-on-disabled': '4, 4, 28, 1',
-  'text-sidebar-link': '188, 186, 213, 1',
-  'text-sidebar-link-hover': '18, 18, 39, 1',
-  'text-sidebar-link-selected': '252, 252, 252, 1',
-  'text-site-footer-link': '171, 198, 216, 1',
-  'text-site-footer-link-hover': '199, 217, 229, 1',
-  'text-site-footer-link-active': '143, 179, 203, 1',
-  'text-success': '89, 217, 119, 1',
-  'text-inverted-success': '1, 128, 31, 1',
-  'text-accent1-primary': '109, 217, 202, 1',
-  'text-accent2-primary': '95, 56, 206, 1',
-  'text-accent3-primary': '255, 203, 105, 1',
-  'text-accent4-primary': '255, 129, 87, 1',
-  'text-accent5-primary': '4, 165, 245, 1',
-  'text-accent6-primary': '255, 71, 123, 1',
-  'text-accent7-primary': '37, 159, 159, 1',
-  'text-accent8-primary': '86, 61, 130, 1',
-  'text-accent9-primary': '255, 191, 63, 1',
-  'text-accent10-primary': '237, 122, 35, 1',
-  'border-color-action': '0, 187, 255, 1',
-  'border-color-action-hover': '0, 204, 255, 1',
-  'border-color-action-active': '4, 165, 245, 1',
-  'border-color-chip': '107, 116, 125, 1',
-  'border-color-danger': '255, 56, 97, 1',
-  'border-color-danger-hover': '255, 71, 123, 1',
-  'border-color-danger-active': '230, 50, 87, 1',
-  'border-color-divider': '32, 54, 69, 1',
-  'border-color-divider-secondary': '51, 57, 61, 1',
-  'border-color-input-field': '32, 54, 69, 1',
-  'border-color-input-field-hover': '58, 98, 125, 1',
-  'border-color-input-field-focus': '0, 187, 255, 1',
-  'border-color-input-field-danger': '255, 56, 97, 1',
-  'border-color-input-field-danger-hover': '255, 71, 123, 1',
-  'border-color-input-field-danger-focus': '255, 56, 97, 1',
-  'border-color-input-field-disabled': '4, 4, 28, 1',
-  'border-color-secondary-btn-disabled': '70, 71, 101, 1',
-  'border-color-sidebar-item-focus': '0, 187, 255, 1',
-  'border-color-slider-handle': '107, 116, 125, 1',
-  'border-color-success': '89, 217, 119, 1',
-  'border-color-table-divider': '32, 54, 69, 1',
-  'border-color-tile': '32, 54, 69, 1',
-  'border-color-tile-hover': '58, 98, 125, 1',
-  'border-color-tile-focus': '0, 187, 255, 1',
-  'border-color-tile-selected-focus': '153, 192, 255, 1',
-  'border-color-tile-selected': '153, 192, 255, 1',
-  'border-color-tile-selected-hover': '178, 208, 255, 1',
-  'border-color-notification-btn': '252, 252, 252, 1',
-  'border-color-notification-btn-dark': '32, 54, 69, 1',
-};
-
-/* This file is generated by vega-design 2.0.77 */
-const DarkModeBorderTokens = {
-  'border-secondary-btn': '0, 187, 255, 1',
-  'border-secondary-btn-hover': '0, 204, 255, 1',
-  'border-secondary-danger-btn': '255, 56, 97, 1',
-  'border-secondary-btn-active': '4, 165, 245, 1',
-  'border-secondary-danger-btn-hover': '255, 71, 123, 1',
-  'border-secondary-danger-btn-active': '230, 50, 87, 1',
-  'border-input-field': '32, 54, 69, 1',
-  'border-input-field-hover': '58, 98, 125, 1',
-  'border-input-field-focus': '0, 187, 255, 1',
-  'border-input-field-danger': '255, 56, 97, 1',
-  'border-input-field-danger-hover': '255, 71, 123, 1',
-  'border-input-field-danger-focus': '255, 56, 97, 1',
-  'border-sidebar-item-focus': '0, 187, 255, 1',
-  'border-input-field-disabled': '4, 4, 28, 1',
-  'border-success': '89, 217, 119, 1',
-  'border-secondary-btn-disabled': '70, 71, 101, 1',
-  'border-chip': '107, 116, 125, 1',
-  'border-divider': '32, 54, 69, 1',
-  'border-divider-secondary': '51, 57, 61, 1',
-  'border-tile-selected': '153, 192, 255, 1',
-  'border-tile-selected-hover': '178, 208, 255, 1',
-  'border-table-divider': '32, 54, 69, 1',
-  'border-slider-handle': '107, 116, 125, 1',
-  'border-tile': '32, 54, 69, 1',
-  'border-tile-hover': '58, 98, 125, 1',
-  'border-tile-focus': '0, 187, 255, 1',
-  'border-tile-selected-focus': '153, 192, 255, 1',
-  'border-notification-btn': '252, 252, 252, 1',
-  'border-notification-btn-black': '32, 54, 69, 1',
-};
-
-/* This file is generated by vega-design 2.0.77 */
-const DarkModeShadowTokens = {
-  'shadow-card': '0px 2px 10px 0px rgba(0, 0, 0, 0.18), 0px 2px 4px 0px rgba(0, 0, 0, 0.1)',
-  'shadow-modal': '0px 6px 40px 0px rgba(2, 2, 15, 0.14), 0px 4px 24px 0px rgba(2, 2, 15, 0.28), 0px 8px 80px 0px rgba(2, 2, 15, 0.26)',
-  'shadow-popover': '0px 0px 88px 0px rgba(2, 2, 15, 0.08), 0px 0px 32px 0px rgba(2, 2, 15, 0.1), 0px 4px 72px 0px rgba(2, 2, 15, 0.16)',
-  'shadow-form-field': '0px 1px 2px 0px rgba(170, 170, 170, 0.06), 0px 1px 3px 0px rgba(170, 170, 170, 0.1)',
-  'shadow-dropdown-menu': '0px 2px 4px -2px rgba(0, 0, 0, 0.14), 0px 4px 6px -1px rgba(0, 0, 0, 0.16)',
-  'shadow-app-header': '0px 1px 0px 0px rgba(188, 186, 213, 0.25)',
-  'shadow-modal-header': '0px 1px 0px 0px rgba(188, 186, 213, 0.25)',
-  'shadow-modal-footer': '0px -2px 8px 0px rgba(188, 186, 213, 0.4), 0px -1px 0px 0px rgba(188, 186, 213, 0.25)',
-  'shadow-modal-footer-no-scroll': '0px -1px 0px 0px rgba(188, 186, 213, 0.25)',
-};
-
-/* This file is generated by vega-design 2.0.77 */
-const DarkModeRingTokens = {
-  'ring-input-focus': '0, 187, 255, 0.25',
-  'ring-input-danger-focus': '255, 56, 97, 0.25',
-  'ring-action-focus': '0, 187, 255, 0.25',
-  'ring-action-danger-focus': '255, 56, 97, 0.25',
-};
-
-// TODO: Remove this after the token add in vega design.
-const CustomDarkModeColorTokens = {
-  'bg-backdrop-loading': '0, 0, 0, 0.5',
-  'text-page-notification-content': DarkModeColorTokens['text-inverted-primary'],
-  'bg-textarea-counter-exceed-max-length': '255, 87, 114',
-  'bg-date-picker-range': '32, 54, 69, 1',
-  'regular-credit-card-bg': '252, 252, 252, 1',
-  'regular-credit-card-top': '4, 4, 28, 1',
-  'regular-credit-card-bottom': '255, 255, 255, 1',
-};
-/**
- * Vega components dark mode style controller
- */
-class DarkModeStyleController {
-  constructor() {
-    this.dynamicCustomDarkModeColor = {};
-    this.darkModeColorAllTokens = {};
-    this.observer = new Observer(this.isAcceptObserver.bind(this), (isDark) => {
-      if (isDark) {
-        this.generateDarkModeStyle();
-      }
-      else {
-        this.removeDarkModeStyleContainer();
-      }
-    });
-    ChangeManager.register(DARK_MODE_CHANGE, this.observer);
-  }
-  /**
-   * This method dynamically registers a custom dark color.
-   *
-   * @param {Record<string, string>} customDarkModeColor - custom dark mode color
-   */
-  registerCustomDarkModeColor(customDarkModeColor) {
-    this.dynamicCustomDarkModeColor = Object.assign(Object.assign({}, this.dynamicCustomDarkModeColor), customDarkModeColor);
-    this.generateDarkModeStyle();
-  }
-  /**
-   * It generates a CSS style for dark mode to override the style.
-   */
-  generateDarkModeStyle() {
-    this.darkModeColorAllTokens = Object.assign(DarkModeColorTokens, DarkModeBorderTokens, DarkModeRingTokens, DarkModeShadowTokens, CustomDarkModeColorTokens, this.dynamicCustomDarkModeColor);
-    const keys = Object.keys(this.darkModeColorAllTokens);
-    this.getDarkModeStyleContainer().innerHTML = `
-html.dark {
-\t\t${keys.map((key) => `--v-${key}: ${this.darkModeColorAllTokens[key]};`).join('\n\t\t')}}`;
-  }
-  /**
-   * It creates a `vegaDarkModeStyle` style tag in the head of the document if it doesn't exist, and returns it.
-   *
-   * @returns {Element} The `vegaDarkModeStyleContainer` is being returned.
-   */
-  getDarkModeStyleContainer() {
-    let vegaDarkModeStyleContainer = document.head.querySelector(`#vegaDarkModeStyle`);
-    if (!vegaDarkModeStyleContainer) {
-      vegaDarkModeStyleContainer = document.createElement('style');
-      vegaDarkModeStyleContainer.id = 'vegaDarkModeStyle';
-      document.head.append(vegaDarkModeStyleContainer);
-    }
-    return vegaDarkModeStyleContainer;
-  }
-  /**
-   * Remove the vegaDarkModeStyle style element.
-   */
-  removeDarkModeStyleContainer() {
-    const vegaDarkModeStyleContainer = document.head.querySelector(`#vegaDarkModeStyle`);
-    if (vegaDarkModeStyleContainer) {
-      vegaDarkModeStyleContainer.remove();
-    }
-  }
-  /**
-   * Determines whether the observer should accept changes.
-   *
-   * @returns {boolean} Always returns true in the current implementation.
-   */
-  isAcceptObserver() {
-    return true;
-  }
-}
-const VegaDarkModeStyleController = new DarkModeStyleController();
-
-const ThemeManagerRuntimeMetricsPayloadDefinition = [
-  {
-    payloadKey: 'IS_OVERRIDECOLORS_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method overrideColors of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'overrideColors',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-  {
-    payloadKey: 'IS_RESET_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method reset of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'reset',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-  {
-    payloadKey: 'IS_TOGGLEDARKMODE_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method toggleDarkMode of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'toggleDarkMode',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-  {
-    payloadKey: 'IS_ISDARKMODE_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method isDarkMode of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'isDarkMode',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-];
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * Vega components theme manager
- */
-class ThemeManager {
-  constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(ThemeManager, ['overrideColors', 'reset', 'toggleDarkMode', 'isDarkMode'], ThemeManagerRuntimeMetricsPayloadDefinition);
-  }
-  /**
-   * It takes the colors you passed in, parses them into the correct format, and then applies them to the theme
-   *
-   * @param {VegaThemeOverrideColors} overrideColors - OverrideColors - This is the object that you pass to the function.
-   * @vegaVersion 1.20.0
-   */
-  async overrideColors(overrideColors) {
-    const overrideThemes = VegaColorSchemaOverridingController.generateOverrideThemes(overrideColors);
-    VegaColorSchemaOverridingController.applyTheme(overrideThemes);
-  }
-  /**
-   * It removes all the custom override theme styles from the DOM
-   *
-   * @vegaVersion 1.20.0
-   */
-  async reset() {
-    VegaColorSchemaOverridingController.getOverrideThemeContainer().innerHTML = '';
-  }
-  /**
-   * This function toggles the dark mode of a webpage by adding or removing a 'dark' class to the HTML element.
-   *
-   * @param {boolean | undefined} darkMode - A boolean or undefined value that determines whether to enable or disable dark mode.
-   * If it is true, dark mode is enabled.
-   * If it is false, dark mode is disabled.
-   * @vegaVersion 1.32.0
-   */
-  toggleDarkMode(darkMode) {
-    if (darkMode) {
-      document.documentElement.classList.add('dark');
-      VegaDarkModeStyleController.generateDarkModeStyle();
-    }
-    else {
-      document.documentElement.classList.remove('dark');
-    }
-    ChangeManager.notify(DARK_MODE_CHANGE, darkMode);
-  }
-  /**
-   * The function checks if the HTML element has a class of "dark" and returns a boolean value accordingly.
-   *
-   * @returns {boolean} A boolean value indicating whether the HTML element has a class of "dark", which is
-   * typically used to indicate that the website is in dark mode.
-   * @vegaVersion 1.32.0
-   */
-  isDarkMode() {
-    return document.documentElement.classList.contains('dark');
-  }
-}
-__decorate([
-  InjectVegaTelemetrySlimmer()
-], ThemeManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
-const VegaThemeManager = new ThemeManager();
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-2ada8e22.js';
 
 var InternalAnnotationTypeEnum;
 (function (InternalAnnotationTypeEnum) {
@@ -4390,7 +1373,7 @@ class TextColorAnnotation extends NodeAnnotation {
    */
   render() {
     return {
-      color: VegaThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
+      color: VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
     };
   }
   /**
@@ -6600,4 +3583,4 @@ class VegaRTEContent {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name, new BlockInsertBlocksAfterStrategy());
 })();
 
-export { AnnotationAction as A, BlockAnnotation as B, ClearFormattingAnnotationAction as C, MergeTwoBlocksNodesAction as D, SplitBlockWithNodeAction as E, BreakSingleBlockAction as F, RemoveChildAction as G, HorizontalAlignmentAnnotation as H, InternalAnnotationTypeEnum as I, ReplaceChildNodesAction as J, InsertBlocksBeforeAction as K, LinkAnnotationAction as L, ModifyContentAction as M, NodeAnnotation as N, InsertBlocksAfterAction as O, RTETextBlock as R, StrikethroughAnnotation as S, TextSplittableAction as T, UnderlineAnnotation as U, VegaThemeManager as V, ZERO_WIDTH_SPACE as Z, VegaRTEContent as a, RTEImageBlock as b, RTEListItemBlock as c, RTEListBlock as d, RTEBlock as e, RTEImageNode as f, RTETextNode as g, RTENode as h, NodeAnnotationTypeEnum as i, ImageAnnotation as j, VegaDarkModeStyleController as k, TextColorAnnotation as l, RTE_TEXT_COLORS as m, BoldAnnotationAction as n, ItalicAnnotation as o, TextStyleAnnotationAction as p, TextStyleAnnotation as q, BoldAnnotation as r, stateEntityRenderingRegistry as s, BlockAnnotationTypeEnum as t, CodeAnnotationAction as u, SelectionRangeAnnotation as v, IndentAnnotation as w, ModifyContentActionType as x, AppendChildNodesAction as y, UpdateTextAction as z };
+export { AnnotationAction as A, BlockAnnotation as B, ClearFormattingAnnotationAction as C, BreakSingleBlockAction as D, RemoveChildAction as E, ReplaceChildNodesAction as F, InsertBlocksBeforeAction as G, HorizontalAlignmentAnnotation as H, InternalAnnotationTypeEnum as I, InsertBlocksAfterAction as J, LinkAnnotationAction as L, ModifyContentAction as M, NodeAnnotation as N, RTETextBlock as R, StrikethroughAnnotation as S, TextSplittableAction as T, UnderlineAnnotation as U, VegaRTEContent as V, ZERO_WIDTH_SPACE as Z, RTEImageBlock as a, RTEListItemBlock as b, RTEListBlock as c, RTEBlock as d, RTEImageNode as e, RTETextNode as f, RTENode as g, NodeAnnotationTypeEnum as h, ImageAnnotation as i, TextColorAnnotation as j, RTE_TEXT_COLORS as k, BoldAnnotationAction as l, ItalicAnnotation as m, TextStyleAnnotationAction as n, TextStyleAnnotation as o, BoldAnnotation as p, BlockAnnotationTypeEnum as q, CodeAnnotationAction as r, stateEntityRenderingRegistry as s, SelectionRangeAnnotation as t, IndentAnnotation as u, ModifyContentActionType as v, AppendChildNodesAction as w, UpdateTextAction as x, MergeTwoBlocksNodesAction as y, SplitBlockWithNodeAction as z };