@heartlandone/vega-sandbox-pr-1733-a510723b8e32e279525a116f82f2f0bfc62031c7 2.32.0

package/dist/esm/node.abstract-3971a0c6.js

@@ -0,0 +1,3252 @@
+import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
+import './global-slimmer-registry-6887a59f.js';
+import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer } from './create-public-api-runtime-metrics-slimmer-4304af69.js';
+import { C as ChangeManager } from './change-manager-8f5b72c2.js';
+import { D as DARK_MODE_CHANGE } from './static-subject-title-e06a3840.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-9d80a772.js';
+import { V as VegaInternalRichTextEditorFlushChanges } from './vega-internal-event-id-16ceaea7.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 {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 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);
+  }
+  /**
+   * It generates a CSS style for dark mode to override the style.
+   */
+  generateDarkModeStyle() {
+    const tokens = Object.assign(DarkModeColorTokens, DarkModeBorderTokens, DarkModeRingTokens, DarkModeShadowTokens, CustomDarkModeColorTokens, this.dynamicCustomDarkModeColor);
+    const keys = Object.keys(tokens);
+    this.getDarkModeStyleContainer().innerHTML = `
+html.dark {
+\t\t${keys.map((key) => `--v-${key}: ${tokens[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;
+  }
+}
+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$1 = (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$1([
+  InjectVegaTelemetrySlimmer()
+], ThemeManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaThemeManager = new ThemeManager();
+
+const WaitForVegaPayloadDefinition = [
+  {
+    payloadKey: 'IS_WAITFORVEGA_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method waitForVega of public API WaitForVegaHandler 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 === 'WaitForVegaHandler' && methodName === 'handle',
+    /**
+     * The function checks if the method name is waitForVega.
+     *
+     * @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;
+};
+/**
+ * WaitForVegaHandler to check whether the vega component has been loaded.
+ */
+class WaitForVegaHandler {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(WaitForVegaHandler, ['handle'], WaitForVegaPayloadDefinition);
+  }
+  /* istanbul ignore next */
+  /**
+   * Wait for all vega elements to be ready.
+   *
+   * The below method is e2e-test covered in @see{module:wait-for-vega-should-work-as-expected}
+   *
+   * @vegaVersion 2.8.0
+   */
+  async handle() {
+    return await Promise.all(Array.from(document.querySelectorAll('*:not(.hydrated)'))
+      .filter((item) => item.tagName.startsWith('VEGA'))
+      .map((item) => { var _a; return (_a = item.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(item); }));
+  }
+}
+__decorate([
+  InjectVegaTelemetrySlimmer()
+], WaitForVegaHandler.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const WaitForVega = new WaitForVegaHandler();
+
+var InternalAnnotationTypeEnum;
+(function (InternalAnnotationTypeEnum) {
+  InternalAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  InternalAnnotationTypeEnum["CLEAR_FORMATTING"] = "CLEAR_FORMATTING";
+  InternalAnnotationTypeEnum["LINK_GROUP"] = "LINK_GROUP";
+})(InternalAnnotationTypeEnum || (InternalAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class Annotation {
+}
+
+/**
+ * This class is responsible for keeping track of the DOM elements and their corresponding entities.
+ */
+class StateEntityRenderingRegistry {
+  constructor() {
+    this.domToEntity = new WeakMap();
+    this.entityToDOM = new WeakMap();
+  }
+  /**
+   * Registers a DOM element and its corresponding entity.
+   *
+   * @param {HTMLElement} dom The DOM element to register.
+   * @param {RTEBlock | RTENode} entity The entity to register.
+   */
+  register(dom, entity) {
+    this.domToEntity.set(dom, entity);
+    this.entityToDOM.set(entity, dom);
+  }
+  /**
+   * Retrieves the entity corresponding to a DOM element.
+   *
+   * @param {HTMLElement} dom The DOM element to retrieve the entity for.
+   * @returns {Nullable<RTEBlock | RTENode>} The entity corresponding to the DOM element, or null if not found.
+   */
+  getEntityByDOM(dom) {
+    return this.domToEntity.get(dom);
+  }
+  /**
+   * Retrieves the DOM element corresponding to an entity.
+   *
+   * @param {RTEBlock | RTENode} entity The entity to retrieve the DOM element for.
+   * @returns {Nullable<HTMLElement>} The DOM element corresponding to the entity, or null if not found.
+   */
+  getDOMByEntity(entity) {
+    return this.entityToDOM.get(entity);
+  }
+}
+const stateEntityRenderingRegistry = new StateEntityRenderingRegistry();
+
+var ModifyContentActionType;
+(function (ModifyContentActionType) {
+  ModifyContentActionType["DELETE_CHILD"] = "DELETE_CHILD";
+  ModifyContentActionType["DELETE_NEST_LIST"] = "DELETE_NEST_LIST";
+  ModifyContentActionType["UPDATE_TEXT"] = "UPDATE_TEXT";
+  ModifyContentActionType["REPLACE_SELECTED_TEXT"] = "REPLACE_SELECTED_TEXT";
+  ModifyContentActionType["APPEND_CHILD_NODES"] = "APPEND_CHILD_NODES";
+  ModifyContentActionType["CLEAR_CHILD_NODES"] = "CLEAR_CHILD_NODES";
+  ModifyContentActionType["INSERT_BLOCKS_AFTER"] = "INSERT_BLOCKS_AFTER";
+  ModifyContentActionType["INSERT_BLOCKS_BEFORE"] = "INSERT_BLOCKS_BEFORE";
+  ModifyContentActionType["INSERT_NODES_AFTER"] = "INSERT_NODES_AFTER";
+  ModifyContentActionType["INSERT_NODES_BEFORE"] = "INSERT_NODES_BEFORE";
+  ModifyContentActionType["SPLIT_BLOCK_WITH_NODE"] = "SPLIT_BLOCK_WITH_NODE";
+  ModifyContentActionType["REPLACE_CHILD_NODES"] = "REPLACE_CHILD_NODES";
+  ModifyContentActionType["REPLACE_NEST_LIST"] = "REPLACE_NEST_LIST";
+  ModifyContentActionType["MERGE_TWO_BLOCKS_NODES"] = "MERGE_TWO_BLOCKS_NODES";
+  ModifyContentActionType["BREAK_SINGLE_BLOCK"] = "BREAK_SINGLE_BLOCK";
+  ModifyContentActionType["LINE_BREAK_SINGLE_BLOCK"] = "LINE_BREAK_SINGLE_BLOCK";
+  ModifyContentActionType["LINE_BREAK_MULTIPLE_BLOCKS"] = "LINE_BREAK_MULTIPLE_BLOCKS";
+  ModifyContentActionType["TRANSFORM_LIST_BLOCK"] = "TRANSFORM_LIST_BLOCK";
+  ModifyContentActionType["TRANSFORM_PARAGRAPH_BLOCK"] = "TRANSFORM_PARAGRAPH_BLOCK";
+  ModifyContentActionType["DELETE_BLOCK_CONTENT"] = "DELETE_BLOCK_CONTENT";
+  ModifyContentActionType["INSERT_IMAGE_TO_BLOCK"] = "INSERT_IMAGE_TO_BLOCK";
+})(ModifyContentActionType || (ModifyContentActionType = {}));
+/**
+ * Abstract class for update node content, delete node, insert node
+ */
+class ModifyContentAction {
+  constructor() {
+    this.isFlushable = false;
+  }
+}
+
+var NodeAnnotationTypeEnum;
+(function (NodeAnnotationTypeEnum) {
+  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
+  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
+  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
+  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
+  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
+  NodeAnnotationTypeEnum["CODE"] = "CODE";
+  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
+  NodeAnnotationTypeEnum["LINK"] = "LINK";
+})(NodeAnnotationTypeEnum || (NodeAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class NodeAnnotation extends Annotation {
+}
+
+var NodeTypeEnum;
+(function (NodeTypeEnum) {
+  NodeTypeEnum["TEXT"] = "TEXT";
+  NodeTypeEnum["IMAGE"] = "IMAGE";
+})(NodeTypeEnum || (NodeTypeEnum = {}));
+/**
+ * Abstract class for all nodes
+ */
+class RTENode {
+  constructor(id, annotationMap) {
+    this.annotationMap = new Map();
+    this.id = id;
+    if (annotationMap) {
+      this.annotationMap = annotationMap;
+    }
+  }
+  /**
+   * Get annotation by type
+   *
+   * @param {RTENodeAnnotationMapKey} type - Annotation type
+   * @returns {Nullable<RTENodeAnnotationMapValue>} - Annotation
+   */
+  getAnnotationByType(type) {
+    return this.annotationMap.get(type);
+  }
+  /**
+   * Delete annotation by type
+   *
+   * @param {RTENodeAnnotationMapKey} type - Annotation type
+   */
+  deleteAnnotationByType(type) {
+    this.annotationMap.delete(type);
+    this.flushChange();
+  }
+  /**
+   * Apply action to node
+   *
+   * @param {AnnotationAction} action - Annotation action
+   * @returns {this} - Node
+   */
+  apply(action) {
+    this.doApply(action);
+    if (action.isFlushable) {
+      this.flushChange();
+    }
+    return this;
+  }
+  /**
+   * apply annotation action or modify content action
+   *
+   * @param {AnnotationAction | ModifyContentAction} action annotation type action or modify content type action
+   */
+  doApply(action) {
+    if (action instanceof ModifyContentAction) {
+      this.doModifyActionApply(action);
+    }
+    else {
+      this.doAnnotationActionApply(action);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles() {
+    return Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(Boolean)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses() {
+    return Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(Boolean)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+  /**
+   * Flush the value change
+   */
+  flushChange() {
+    const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (domNode) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, {});
+      }
+    }
+  }
+}
+
+export { Annotation as A, InternalAnnotationTypeEnum as I, ModifyContentAction as M, NodeAnnotation as N, RTENode as R, VegaThemeManager as V, WaitForVega as W, NodeAnnotationTypeEnum as a, ModifyContentActionType as b, NodeTypeEnum as c, VegaDarkModeStyleController as d, stateEntityRenderingRegistry as s };