@bunnyapp/components 1.0.0 → 1.0.2

package/dist/cjs/index.js

@@ -10,6 +10,7 @@ var styled = require('styled-components');
 var common = require('@bunnyapp/common');
 var reactQuery = require('@tanstack/react-query');
 var recoil = require('recoil');
+var theme = require('antd/lib/theme');
 var reactStripeJs = require('@stripe/react-stripe-js');
 var pure = require('@stripe/stripe-js/pure');
 var lodash = require('lodash');
@@ -40,6 +41,7 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var theme__default = /*#__PURE__*/_interopDefaultLegacy(theme);
 var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
 
 /******************************************************************************
@@ -79,8 +81,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
 }
 
 function __generator(thisArg, body) {
-  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-  return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+  return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
   function verb(n) { return function (v) { return step([n, v]); }; }
   function step(op) {
       if (f) throw new TypeError("Generator is already executing.");
@@ -320,563 +322,535 @@ var classnames = {exports: {}};
 
 var classNames = classnames.exports;
 
+const round = Math.round;
+
 /**
- * Take input from [0, n] and return it as [0, 1]
- * @hidden
- */
-function bound01(n, max) {
-    if (isOnePointZero(n)) {
-        n = '100%';
-    }
-    var isPercent = isPercentage(n);
-    n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
-    // Automatically convert percentage into number
-    if (isPercent) {
-        n = parseInt(String(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
-    if (max === 360) {
-        // If n is a hue given in degrees,
-        // wrap around out-of-range values into [0, 360] range
-        // then convert into [0, 1].
-        n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
-    }
-    else {
-        // If n not a hue given in degrees
-        // Convert into [0, 1] range if it isn't already.
-        n = (n % max) / parseFloat(String(max));
-    }
-    return n;
-}
-/**
- * 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>
- * @hidden
- */
-function isOnePointZero(n) {
-    return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
-}
-/**
- * Check to see if string passed in is a percentage
- * @hidden
- */
-function isPercentage(n) {
-    return typeof n === 'string' && n.indexOf('%') !== -1;
-}
-/**
- * Return a valid alpha value [0,1] with all invalid values being set to 1
- * @hidden
- */
-function boundAlpha(a) {
-    a = parseFloat(a);
-    if (isNaN(a) || a < 0 || a > 1) {
-        a = 1;
-    }
-    return a;
-}
-/**
- * Replace a decimal with it's percentage value
- * @hidden
- */
-function convertToPercentage(n) {
-    if (n <= 1) {
-        return "".concat(Number(n) * 100, "%");
-    }
-    return n;
-}
-/**
- * Force a hex value to have 2 characters
- * @hidden
+ * Support format, alpha unit will check the % mark:
+ * - rgba(102, 204, 255, .5)      -> [102, 204, 255, 0.5]
+ * - rgb(102 204 255 / .5)        -> [102, 204, 255, 0.5]
+ * - rgb(100%, 50%, 0% / 50%)     -> [255, 128, 0, 0.5]
+ * - hsl(270, 60, 40, .5)         -> [270, 60, 40, 0.5]
+ * - hsl(270deg 60% 40% / 50%)   -> [270, 60, 40, 0.5]
+ *
+ * When `base` is provided, the percentage value will be divided by `base`.
  */
-function pad2(c) {
-    return c.length === 1 ? '0' + c : String(c);
+function splitColorStr(str, parseNum) {
+  const match = str
+  // Remove str before `(`
+  .replace(/^[^(]*\((.*)/, '$1')
+  // Remove str after `)`
+  .replace(/\).*/, '').match(/\d*\.?\d+%?/g) || [];
+  const numList = match.map(item => parseFloat(item));
+  for (let i = 0; i < 3; i += 1) {
+    numList[i] = parseNum(numList[i] || 0, match[i] || '', i);
+  }
+
+  // For alpha. 50% should be 0.5
+  if (match[3]) {
+    numList[3] = match[3].includes('%') ? numList[3] / 100 : numList[3];
+  } else {
+    // By default, alpha is 1
+    numList[3] = 1;
+  }
+  return numList;
 }
+const parseHSVorHSL = (num, _, index) => index === 0 ? num : num / 100;
 
-// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
-// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
-/**
- * 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,
-    };
+/** round and limit number to integer between 0-255 */
+function limitRange(value, max) {
+  const mergedMax = max || 255;
+  if (value > mergedMax) {
+    return mergedMax;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  return value;
 }
-function hue2rgb(p, q, t) {
-    if (t < 0) {
-        t += 1;
+class FastColor {
+  constructor(input) {
+    /**
+     * All FastColor objects are valid. So isValid is always true. This property is kept to be compatible with TinyColor.
+     */
+    _defineProperty(this, "isValid", true);
+    /**
+     * Red, R in RGB
+     */
+    _defineProperty(this, "r", 0);
+    /**
+     * Green, G in RGB
+     */
+    _defineProperty(this, "g", 0);
+    /**
+     * Blue, B in RGB
+     */
+    _defineProperty(this, "b", 0);
+    /**
+     * Alpha/Opacity, A in RGBA/HSLA
+     */
+    _defineProperty(this, "a", 1);
+    // HSV privates
+    _defineProperty(this, "_h", void 0);
+    _defineProperty(this, "_s", void 0);
+    _defineProperty(this, "_l", void 0);
+    _defineProperty(this, "_v", void 0);
+    // intermediate variables to calculate HSL/HSV
+    _defineProperty(this, "_max", void 0);
+    _defineProperty(this, "_min", void 0);
+    _defineProperty(this, "_brightness", void 0);
+    /**
+     * Always check 3 char in the object to determine the format.
+     * We not use function in check to save bundle size.
+     * e.g. 'rgb' -> { r: 0, g: 0, b: 0 }.
+     */
+    function matchFormat(str) {
+      return str[0] in input && str[1] in input && str[2] in input;
     }
-    if (t > 1) {
-        t -= 1;
+    if (!input) ; else if (typeof input === 'string') {
+      const trimStr = input.trim();
+      function matchPrefix(prefix) {
+        return trimStr.startsWith(prefix);
+      }
+      if (/^#?[A-F\d]{3,8}$/i.test(trimStr)) {
+        this.fromHexString(trimStr);
+      } else if (matchPrefix('rgb')) {
+        this.fromRgbString(trimStr);
+      } else if (matchPrefix('hsl')) {
+        this.fromHslString(trimStr);
+      } else if (matchPrefix('hsv') || matchPrefix('hsb')) {
+        this.fromHsvString(trimStr);
+      }
+    } else if (input instanceof FastColor) {
+      this.r = input.r;
+      this.g = input.g;
+      this.b = input.b;
+      this.a = input.a;
+      this._h = input._h;
+      this._s = input._s;
+      this._l = input._l;
+      this._v = input._v;
+    } else if (matchFormat('rgb')) {
+      this.r = limitRange(input.r);
+      this.g = limitRange(input.g);
+      this.b = limitRange(input.b);
+      this.a = typeof input.a === 'number' ? limitRange(input.a, 1) : 1;
+    } else if (matchFormat('hsl')) {
+      this.fromHsl(input);
+    } else if (matchFormat('hsv')) {
+      this.fromHsv(input);
+    } else {
+      throw new Error('@ant-design/fast-color: unsupported input ' + JSON.stringify(input));
     }
-    if (t < 1 / 6) {
-        return p + (q - p) * (6 * t);
+  }
+
+  // ======================= Setter =======================
+
+  setR(value) {
+    return this._sc('r', value);
+  }
+  setG(value) {
+    return this._sc('g', value);
+  }
+  setB(value) {
+    return this._sc('b', value);
+  }
+  setA(value) {
+    return this._sc('a', value, 1);
+  }
+  setHue(value) {
+    const hsv = this.toHsv();
+    hsv.h = value;
+    return this._c(hsv);
+  }
+
+  // ======================= Getter =======================
+  /**
+   * Returns the perceived luminance of a color, from 0-1.
+   * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+   */
+  getLuminance() {
+    function adjustGamma(raw) {
+      const val = raw / 255;
+      return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
     }
-    if (t < 1 / 2) {
-        return q;
+    const R = adjustGamma(this.r);
+    const G = adjustGamma(this.g);
+    const B = adjustGamma(this.b);
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  }
+  getHue() {
+    if (typeof this._h === 'undefined') {
+      const delta = this.getMax() - this.getMin();
+      if (delta === 0) {
+        this._h = 0;
+      } else {
+        this._h = round(60 * (this.r === this.getMax() ? (this.g - this.b) / delta + (this.g < this.b ? 6 : 0) : this.g === this.getMax() ? (this.b - this.r) / delta + 2 : (this.r - this.g) / delta + 4));
+      }
     }
-    if (t < 2 / 3) {
-        return p + (q - p) * (2 / 3 - t) * 6;
+    return this._h;
+  }
+  getSaturation() {
+    if (typeof this._s === 'undefined') {
+      const delta = this.getMax() - this.getMin();
+      if (delta === 0) {
+        this._s = 0;
+      } else {
+        this._s = delta / this.getMax();
+      }
     }
-    return p;
-}
-/**
- * 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;
-    var g;
-    var b;
-    h = bound01(h, 360);
-    s = bound01(s, 100);
-    l = bound01(l, 100);
-    if (s === 0) {
-        // achromatic
-        g = l;
-        b = l;
-        r = l;
+    return this._s;
+  }
+  getLightness() {
+    if (typeof this._l === 'undefined') {
+      this._l = (this.getMax() + this.getMin()) / 510;
     }
-    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 this._l;
+  }
+  getValue() {
+    if (typeof this._v === 'undefined') {
+      this._v = this.getMax() / 255;
     }
-    return { r: r * 255, g: g * 255, b: b * 255 };
-}
-/**
- * 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);
-    var min = Math.min(r, g, b);
-    var h = 0;
-    var v = max;
-    var d = max - min;
-    var s = max === 0 ? 0 : d / max;
-    if (max === min) {
-        h = 0; // achromatic
+    return this._v;
+  }
+
+  /**
+   * Returns the perceived brightness of the color, from 0-255.
+   * Note: this is not the b of HSB
+   * @see http://www.w3.org/TR/AERT#color-contrast
+   */
+  getBrightness() {
+    if (typeof this._brightness === 'undefined') {
+      this._brightness = (this.r * 299 + this.g * 587 + this.b * 114) / 1000;
     }
-    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 this._brightness;
+  }
+
+  // ======================== Func ========================
+
+  darken(amount = 10) {
+    const h = this.getHue();
+    const s = this.getSaturation();
+    let l = this.getLightness() - amount / 100;
+    if (l < 0) {
+      l = 0;
     }
-    return { h: h, s: s, v: v };
-}
-/**
- * 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);
-    var f = h - i;
-    var p = v * (1 - s);
-    var q = v * (1 - f * s);
-    var t = v * (1 - (1 - f) * s);
-    var mod = i % 6;
-    var r = [v, q, p, p, t, v][mod];
-    var g = [t, v, v, q, p, p][mod];
-    var b = [p, p, t, v, v, q][mod];
-    return { r: r * 255, g: g * 255, b: b * 255 };
-}
-/**
- * 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].startsWith(hex[0].charAt(1)) &&
-        hex[1].startsWith(hex[1].charAt(1)) &&
-        hex[2].startsWith(hex[2].charAt(1))) {
-        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+    return this._c({
+      h,
+      s,
+      l,
+      a: this.a
+    });
+  }
+  lighten(amount = 10) {
+    const h = this.getHue();
+    const s = this.getSaturation();
+    let l = this.getLightness() + amount / 100;
+    if (l > 1) {
+      l = 1;
     }
-    return hex.join('');
-}
-/** Converts a hex value to a decimal */
-function convertHexToDecimal(h) {
-    return parseIntFromHex(h) / 255;
-}
-/** Parse a base-16 hex value into a base-10 integer */
-function parseIntFromHex(val) {
-    return parseInt(val, 16);
-}
+    return this._c({
+      h,
+      s,
+      l,
+      a: this.a
+    });
+  }
 
-// https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
-/**
- * @hidden
- */
-var names = {
-    aliceblue: '#f0f8ff',
-    antiquewhite: '#faebd7',
-    aqua: '#00ffff',
-    aquamarine: '#7fffd4',
-    azure: '#f0ffff',
-    beige: '#f5f5dc',
-    bisque: '#ffe4c4',
-    black: '#000000',
-    blanchedalmond: '#ffebcd',
-    blue: '#0000ff',
-    blueviolet: '#8a2be2',
-    brown: '#a52a2a',
-    burlywood: '#deb887',
-    cadetblue: '#5f9ea0',
-    chartreuse: '#7fff00',
-    chocolate: '#d2691e',
-    coral: '#ff7f50',
-    cornflowerblue: '#6495ed',
-    cornsilk: '#fff8dc',
-    crimson: '#dc143c',
-    cyan: '#00ffff',
-    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: '#ff00ff',
-    gainsboro: '#dcdcdc',
-    ghostwhite: '#f8f8ff',
-    goldenrod: '#daa520',
-    gold: '#ffd700',
-    gray: '#808080',
-    green: '#008000',
-    greenyellow: '#adff2f',
-    grey: '#808080',
-    honeydew: '#f0fff0',
-    hotpink: '#ff69b4',
-    indianred: '#cd5c5c',
-    indigo: '#4b0082',
-    ivory: '#fffff0',
-    khaki: '#f0e68c',
-    lavenderblush: '#fff0f5',
-    lavender: '#e6e6fa',
-    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: '#778899',
-    lightslategrey: '#778899',
-    lightsteelblue: '#b0c4de',
-    lightyellow: '#ffffe0',
-    lime: '#00ff00',
-    limegreen: '#32cd32',
-    linen: '#faf0e6',
-    magenta: '#ff00ff',
-    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: '#ff0000',
-    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: '#ffffff',
-    whitesmoke: '#f5f5f5',
-    yellow: '#ffff00',
-    yellowgreen: '#9acd32',
-};
-
-/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
-/**
- * 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 (Object.prototype.hasOwnProperty.call(color, 'a')) {
-            a = color.a;
-        }
+  /**
+   * Mix the current color a given amount with another color, from 0 to 100.
+   * 0 means no mixing (return current color).
+   */
+  mix(input, amount = 50) {
+    const color = this._c(input);
+    const p = amount / 100;
+    const calc = key => (color[key] - this[key]) * p + this[key];
+    const rgba = {
+      r: round(calc('r')),
+      g: round(calc('g')),
+      b: round(calc('b')),
+      a: round(calc('a') * 100) / 100
+    };
+    return this._c(rgba);
+  }
+
+  /**
+   * Mix the color with pure white, from 0 to 100.
+   * Providing 0 will do nothing, providing 100 will always return white.
+   */
+  tint(amount = 10) {
+    return this.mix({
+      r: 255,
+      g: 255,
+      b: 255,
+      a: 1
+    }, amount);
+  }
+
+  /**
+   * Mix the color with pure black, from 0 to 100.
+   * Providing 0 will do nothing, providing 100 will always return black.
+   */
+  shade(amount = 10) {
+    return this.mix({
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 1
+    }, amount);
+  }
+  onBackground(background) {
+    const bg = this._c(background);
+    const alpha = this.a + bg.a * (1 - this.a);
+    const calc = key => {
+      return round((this[key] * this.a + bg[key] * bg.a * (1 - this.a)) / alpha);
+    };
+    return this._c({
+      r: calc('r'),
+      g: calc('g'),
+      b: calc('b'),
+      a: alpha
+    });
+  }
+
+  // ======================= Status =======================
+  isDark() {
+    return this.getBrightness() < 128;
+  }
+  isLight() {
+    return this.getBrightness() >= 128;
+  }
+
+  // ======================== MISC ========================
+  equals(other) {
+    return this.r === other.r && this.g === other.g && this.b === other.b && this.a === other.a;
+  }
+  clone() {
+    return this._c(this);
+  }
+
+  // ======================= Format =======================
+  toHexString() {
+    let hex = '#';
+    const rHex = (this.r || 0).toString(16);
+    hex += rHex.length === 2 ? rHex : '0' + rHex;
+    const gHex = (this.g || 0).toString(16);
+    hex += gHex.length === 2 ? gHex : '0' + gHex;
+    const bHex = (this.b || 0).toString(16);
+    hex += bHex.length === 2 ? bHex : '0' + bHex;
+    if (typeof this.a === 'number' && this.a >= 0 && this.a < 1) {
+      const aHex = round(this.a * 255).toString(16);
+      hex += aHex.length === 2 ? aHex : '0' + aHex;
     }
-    a = boundAlpha(a);
+    return hex;
+  }
+
+  /** CSS support color pattern */
+  toHsl() {
     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,
+      h: this.getHue(),
+      s: this.getSaturation(),
+      l: this.getLightness(),
+      a: this.a
     };
-}
-// <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 = "(?:".concat(CSS_NUMBER, ")|(?:").concat(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|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
-var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
-var matchers = {
-    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})$/,
-};
-/**
- * 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.trim().toLowerCase();
-    if (color.length === 0) {
-        return false;
-    }
-    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 = matchers.rgb.exec(color);
-    if (match) {
-        return { r: match[1], g: match[2], b: match[3] };
-    }
-    match = matchers.rgba.exec(color);
-    if (match) {
-        return { r: match[1], g: match[2], b: match[3], a: match[4] };
-    }
-    match = matchers.hsl.exec(color);
-    if (match) {
-        return { h: match[1], s: match[2], l: match[3] };
+  }
+
+  /** CSS support color pattern */
+  toHslString() {
+    const h = this.getHue();
+    const s = round(this.getSaturation() * 100);
+    const l = round(this.getLightness() * 100);
+    return this.a !== 1 ? `hsla(${h},${s}%,${l}%,${this.a})` : `hsl(${h},${s}%,${l}%)`;
+  }
+
+  /** Same as toHsb */
+  toHsv() {
+    return {
+      h: this.getHue(),
+      s: this.getSaturation(),
+      v: this.getValue(),
+      a: this.a
+    };
+  }
+  toRgb() {
+    return {
+      r: this.r,
+      g: this.g,
+      b: this.b,
+      a: this.a
+    };
+  }
+  toRgbString() {
+    return this.a !== 1 ? `rgba(${this.r},${this.g},${this.b},${this.a})` : `rgb(${this.r},${this.g},${this.b})`;
+  }
+  toString() {
+    return this.toRgbString();
+  }
+
+  // ====================== Privates ======================
+  /** Return a new FastColor object with one channel changed */
+  _sc(rgb, value, max) {
+    const clone = this.clone();
+    clone[rgb] = limitRange(value, max);
+    return clone;
+  }
+  _c(input) {
+    return new this.constructor(input);
+  }
+  getMax() {
+    if (typeof this._max === 'undefined') {
+      this._max = Math.max(this.r, this.g, this.b);
     }
-    match = matchers.hsla.exec(color);
-    if (match) {
-        return { h: match[1], s: match[2], l: match[3], a: match[4] };
+    return this._max;
+  }
+  getMin() {
+    if (typeof this._min === 'undefined') {
+      this._min = Math.min(this.r, this.g, this.b);
     }
-    match = matchers.hsv.exec(color);
-    if (match) {
-        return { h: match[1], s: match[2], v: match[3] };
+    return this._min;
+  }
+  fromHexString(trimStr) {
+    const withoutPrefix = trimStr.replace('#', '');
+    function connectNum(index1, index2) {
+      return parseInt(withoutPrefix[index1] + withoutPrefix[index2 || index1], 16);
     }
-    match = matchers.hsva.exec(color);
-    if (match) {
-        return { h: match[1], s: match[2], v: match[3], a: match[4] };
+    if (withoutPrefix.length < 6) {
+      // #rgb or #rgba
+      this.r = connectNum(0);
+      this.g = connectNum(1);
+      this.b = connectNum(2);
+      this.a = withoutPrefix[3] ? connectNum(3) / 255 : 1;
+    } else {
+      // #rrggbb or #rrggbbaa
+      this.r = connectNum(0, 1);
+      this.g = connectNum(2, 3);
+      this.b = connectNum(4, 5);
+      this.a = withoutPrefix[6] ? connectNum(6, 7) / 255 : 1;
     }
-    match = matchers.hex8.exec(color);
-    if (match) {
-        return {
-            r: parseIntFromHex(match[1]),
-            g: parseIntFromHex(match[2]),
-            b: parseIntFromHex(match[3]),
-            a: convertHexToDecimal(match[4]),
-            format: named ? 'name' : 'hex8',
-        };
+  }
+  fromHsl({
+    h,
+    s,
+    l,
+    a
+  }) {
+    this._h = h % 360;
+    this._s = s;
+    this._l = l;
+    this.a = typeof a === 'number' ? a : 1;
+    if (s <= 0) {
+      const rgb = round(l * 255);
+      this.r = rgb;
+      this.g = rgb;
+      this.b = rgb;
     }
-    match = matchers.hex6.exec(color);
-    if (match) {
-        return {
-            r: parseIntFromHex(match[1]),
-            g: parseIntFromHex(match[2]),
-            b: parseIntFromHex(match[3]),
-            format: named ? 'name' : 'hex',
-        };
+    let r = 0,
+      g = 0,
+      b = 0;
+    const huePrime = h / 60;
+    const chroma = (1 - Math.abs(2 * l - 1)) * s;
+    const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+    if (huePrime >= 0 && huePrime < 1) {
+      r = chroma;
+      g = secondComponent;
+    } else if (huePrime >= 1 && huePrime < 2) {
+      r = secondComponent;
+      g = chroma;
+    } else if (huePrime >= 2 && huePrime < 3) {
+      g = chroma;
+      b = secondComponent;
+    } else if (huePrime >= 3 && huePrime < 4) {
+      g = secondComponent;
+      b = chroma;
+    } else if (huePrime >= 4 && huePrime < 5) {
+      r = secondComponent;
+      b = chroma;
+    } else if (huePrime >= 5 && huePrime < 6) {
+      r = chroma;
+      b = secondComponent;
     }
-    match = matchers.hex4.exec(color);
-    if (match) {
-        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',
-        };
+    const lightnessModification = l - chroma / 2;
+    this.r = round((r + lightnessModification) * 255);
+    this.g = round((g + lightnessModification) * 255);
+    this.b = round((b + lightnessModification) * 255);
+  }
+  fromHsv({
+    h,
+    s,
+    v,
+    a
+  }) {
+    this._h = h % 360;
+    this._s = s;
+    this._v = v;
+    this.a = typeof a === 'number' ? a : 1;
+    const vv = round(v * 255);
+    this.r = vv;
+    this.g = vv;
+    this.b = vv;
+    if (s <= 0) {
+      return;
     }
-    match = matchers.hex3.exec(color);
-    if (match) {
-        return {
-            r: parseIntFromHex(match[1] + match[1]),
-            g: parseIntFromHex(match[2] + match[2]),
-            b: parseIntFromHex(match[3] + match[3]),
-            format: named ? 'name' : 'hex',
-        };
+    const hh = h / 60;
+    const i = Math.floor(hh);
+    const ff = hh - i;
+    const p = round(v * (1.0 - s) * 255);
+    const q = round(v * (1.0 - s * ff) * 255);
+    const t = round(v * (1.0 - s * (1.0 - ff)) * 255);
+    switch (i) {
+      case 0:
+        this.g = t;
+        this.b = p;
+        break;
+      case 1:
+        this.r = q;
+        this.b = p;
+        break;
+      case 2:
+        this.r = p;
+        this.b = t;
+        break;
+      case 3:
+        this.r = p;
+        this.g = q;
+        break;
+      case 4:
+        this.r = t;
+        this.g = p;
+        break;
+      case 5:
+      default:
+        this.g = p;
+        this.b = q;
+        break;
     }
-    return false;
-}
-/**
- * Check to see if it looks like a CSS unit
- * (see `matchers` above for definition).
- */
-function isValidCSSUnit(color) {
-    return Boolean(matchers.CSS_UNIT.exec(String(color)));
+  }
+  fromHsvString(trimStr) {
+    const cells = splitColorStr(trimStr, parseHSVorHSL);
+    this.fromHsv({
+      h: cells[0],
+      s: cells[1],
+      v: cells[2],
+      a: cells[3]
+    });
+  }
+  fromHslString(trimStr) {
+    const cells = splitColorStr(trimStr, parseHSVorHSL);
+    this.fromHsl({
+      h: cells[0],
+      s: cells[1],
+      l: cells[2],
+      a: cells[3]
+    });
+  }
+  fromRgbString(trimStr) {
+    const cells = splitColorStr(trimStr, (num, txt) =>
+    // Convert percentage to number. e.g. 50% -> 128
+    txt.includes('%') ? round(num / 100 * 255) : num);
+    this.r = cells[0];
+    this.g = cells[1];
+    this.b = cells[2];
+    this.a = cells[3];
+  }
 }
 
 var hueStep = 2; // 色相阶梯
@@ -886,73 +860,39 @@ var brightnessStep1 = 0.05; // 亮度阶梯，浅色部分
 var brightnessStep2 = 0.15; // 亮度阶梯，深色部分
 var lightColorCount = 5; // 浅色数量，主色上
 var darkColorCount = 4; // 深色数量，主色下
+
 // 暗色主题颜色映射关系表
 var darkColorMap = [{
   index: 7,
-  opacity: 0.15
+  amount: 15
 }, {
   index: 6,
-  opacity: 0.25
+  amount: 25
 }, {
   index: 5,
-  opacity: 0.3
+  amount: 30
 }, {
   index: 5,
-  opacity: 0.45
+  amount: 45
 }, {
   index: 5,
-  opacity: 0.65
+  amount: 65
 }, {
   index: 5,
-  opacity: 0.85
+  amount: 85
 }, {
   index: 4,
-  opacity: 0.9
+  amount: 90
 }, {
   index: 3,
-  opacity: 0.95
+  amount: 95
 }, {
   index: 2,
-  opacity: 0.97
+  amount: 97
 }, {
   index: 1,
-  opacity: 0.98
+  amount: 98
 }];
-// Wrapper function ported from TinyColor.prototype.toHsv
-// Keep it here because of `hsv.h * 360`
-function toHsv(_ref) {
-  var r = _ref.r,
-    g = _ref.g,
-    b = _ref.b;
-  var hsv = rgbToHsv(r, g, b);
-  return {
-    h: hsv.h * 360,
-    s: hsv.s,
-    v: hsv.v
-  };
-}
-
-// Wrapper function ported from TinyColor.prototype.toHexString
-// Keep it here because of the prefix `#`
-function toHex(_ref2) {
-  var r = _ref2.r,
-    g = _ref2.g,
-    b = _ref2.b;
-  return "#".concat(rgbToHex(r, g, b, false));
-}
-
-// Wrapper function ported from TinyColor.prototype.mix, not treeshakable.
-// Amount in range [0, 1]
-// Assume color1 & color2 has no alpha, since the following src code did so.
-function mix(rgb1, rgb2, amount) {
-  var p = amount / 100;
-  var rgb = {
-    r: (rgb2.r - rgb1.r) * p + rgb1.r,
-    g: (rgb2.g - rgb1.g) * p + rgb1.g,
-    b: (rgb2.b - rgb1.b) * p + rgb1.b
-  };
-  return rgb;
-}
 function getHue(hsv, i, light) {
   var hue;
   // 根据色相不同，色相转向不同
@@ -992,7 +932,7 @@ function getSaturation(hsv, i, light) {
   if (saturation < 0.06) {
     saturation = 0.06;
   }
-  return Number(saturation.toFixed(2));
+  return Math.round(saturation * 100) / 100;
 }
 function getValue(hsv, i, light) {
   var value;
@@ -1001,45 +941,44 @@ function getValue(hsv, i, light) {
   } else {
     value = hsv.v - brightnessStep2 * i;
   }
-  if (value > 1) {
-    value = 1;
-  }
-  return Number(value.toFixed(2));
+  // Clamp value between 0 and 1
+  value = Math.max(0, Math.min(1, value));
+  return Math.round(value * 100) / 100;
 }
 function generate$1(color) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var patterns = [];
-  var pColor = inputToRGB(color);
+  var pColor = new FastColor(color);
+  var hsv = pColor.toHsv();
   for (var i = lightColorCount; i > 0; i -= 1) {
-    var hsv = toHsv(pColor);
-    var colorString = toHex(inputToRGB({
+    var c = new FastColor({
       h: getHue(hsv, i, true),
       s: getSaturation(hsv, i, true),
       v: getValue(hsv, i, true)
-    }));
-    patterns.push(colorString);
+    });
+    patterns.push(c);
   }
-  patterns.push(toHex(pColor));
+  patterns.push(pColor);
   for (var _i = 1; _i <= darkColorCount; _i += 1) {
-    var _hsv = toHsv(pColor);
-    var _colorString = toHex(inputToRGB({
-      h: getHue(_hsv, _i),
-      s: getSaturation(_hsv, _i),
-      v: getValue(_hsv, _i)
-    }));
-    patterns.push(_colorString);
+    var _c = new FastColor({
+      h: getHue(hsv, _i),
+      s: getSaturation(hsv, _i),
+      v: getValue(hsv, _i)
+    });
+    patterns.push(_c);
   }
 
   // dark theme patterns
   if (opts.theme === 'dark') {
-    return darkColorMap.map(function (_ref3) {
-      var index = _ref3.index,
-        opacity = _ref3.opacity;
-      var darkColorString = toHex(mix(inputToRGB(opts.backgroundColor || '#141414'), inputToRGB(patterns[index]), opacity * 100));
-      return darkColorString;
+    return darkColorMap.map(function (_ref) {
+      var index = _ref.index,
+        amount = _ref.amount;
+      return new FastColor(opts.backgroundColor || '#141414').mix(patterns[index], amount).toHexString();
     });
   }
-  return patterns;
+  return patterns.map(function (c) {
+    return c.toHexString();
+  });
 }
 
 // Generated by script. Do NOT modify!
@@ -1526,11 +1465,29 @@ var BankOutlined = function BankOutlined(props, ref) {
 };
 
 /**![bank](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg5NCA0NjJjMzAuOSAwIDQzLjgtMzkuNyAxOC43LTU4TDUzMC44IDEyNi4yYTMxLjgxIDMxLjgxIDAgMDAtMzcuNiAwTDExMS4zIDQwNGMtMjUuMSAxOC4yLTEyLjIgNTggMTguOCA1OEgxOTJ2Mzc0aC03MmMtNC40IDAtOCAzLjYtOCA4djUyYzAgNC40IDMuNiA4IDggOGg3ODRjNC40IDAgOC0zLjYgOC04di01MmMwLTQuNC0zLjYtOC04LThoLTcyVjQ2Mmg2MnpNNTEyIDE5Ni43bDI3MS4xIDE5Ny4ySDI0MC45TDUxMiAxOTYuN3pNMjY0IDQ2MmgxMTd2Mzc0SDI2NFY0NjJ6bTE4OSAwaDExN3YzNzRINDUzVjQ2MnptMzA3IDM3NEg2NDJWNDYyaDExOHYzNzR6IiAvPjwvc3ZnPg==) */
-var RefIcon$3 = /*#__PURE__*/React__namespace.forwardRef(BankOutlined);
+var RefIcon$4 = /*#__PURE__*/React__namespace.forwardRef(BankOutlined);
+if (process.env.NODE_ENV !== 'production') {
+  RefIcon$4.displayName = 'BankOutlined';
+}
+var BankOutlined$1 = RefIcon$4;
+
+// This icon file is generated automatically.
+var CheckCircleFilled$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" } }] }, "name": "check-circle", "theme": "filled" };
+var CheckCircleFilledSvg = CheckCircleFilled$2;
+
+var CheckCircleFilled = function CheckCircleFilled(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(AntdIcon, _extends({}, props, {
+    ref: ref,
+    icon: CheckCircleFilledSvg
+  }));
+};
+
+/**![check-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0xOTMuNSAzMDEuN2wtMjEwLjYgMjkyYTMxLjggMzEuOCAwIDAxLTUxLjcgMEwzMTguNSA0ODQuOWMtMy44LTUuMyAwLTEyLjcgNi41LTEyLjdoNDYuOWMxMC4yIDAgMTkuOSA0LjkgMjUuOSAxMy4zbDcxLjIgOTguOCAxNTcuMi0yMThjNi04LjMgMTUuNi0xMy4zIDI1LjktMTMuM0g2OTljNi41IDAgMTAuMyA3LjQgNi41IDEyLjd6IiAvPjwvc3ZnPg==) */
+var RefIcon$3 = /*#__PURE__*/React__namespace.forwardRef(CheckCircleFilled);
 if (process.env.NODE_ENV !== 'production') {
-  RefIcon$3.displayName = 'BankOutlined';
+  RefIcon$3.displayName = 'CheckCircleFilled';
 }
-var BankOutlined$1 = RefIcon$3;
+var CheckCircleFilled$1 = RefIcon$3;
 
 // This icon file is generated automatically.
 var CloseOutlined$2 = { "icon": { "tag": "svg", "attrs": { "fill-rule": "evenodd", "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" } }] }, "name": "close", "theme": "outlined" };
@@ -1593,14 +1550,14 @@ var BrandContext = React.createContext({
     topNavImageUrl: common.DEFAULT_TOP_NAV_IMAGE_URL,
 });
 
-var MUTATION$4 = "{\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }";
+var MUTATION$8 = "{\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }";
 var getBranding = function (_a) {
     var token = _a.token, subdomain = _a.subdomain;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({ query: MUTATION$4, token: token, subdomain: subdomain })];
+                case 0: return [4 /*yield*/, common.gqlRequest({ query: MUTATION$8, token: token, subdomain: subdomain })];
                 case 1:
                     response = _b.sent();
                     return [2 /*return*/, response === null || response === void 0 ? void 0 : response.entityBranding];
@@ -1678,10 +1635,10 @@ var BunnyContext = React.createContext({});
 var queryClient$1 = new reactQuery.QueryClient();
 // Every component shares similar props and functionality, which this wrapper handles.
 function BunnyProvider(_a) {
-    var children = _a.children, token = _a.token, subdomain = _a.subdomain, window = _a.window, accountId = _a.accountId;
+    var children = _a.children, token = _a.token, subdomain = _a.subdomain, window = _a.window, accountId = _a.accountId, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b;
     var graphQLClient = common.createGraphQLClient(subdomain || "", window, token);
     var isMobile = useIsMobile(window);
-    var _b = React.useState(undefined), branding = _b[0], setBranding = _b[1];
+    var _c = React.useState(undefined), branding = _c[0], setBranding = _c[1];
     // ====== START - Copied straight from PageContainer.tsx ========
     var entityBranding = React.useMemo(function () {
         var _a;
@@ -1711,16 +1668,36 @@ function BunnyProvider(_a) {
             document.getElementsByTagName("head")[0].removeChild(script);
         };
     }, []);
-    return (jsxRuntime.jsx(BunnyContext.Provider, __assign({ value: { subdomain: subdomain, graphQLClient: graphQLClient, window: window, token: token, accountId: accountId } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient$1 }, { children: jsxRuntime.jsx(recoil.RecoilRoot, { children: jsxRuntime.jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsxRuntime.jsx(antd.ConfigProvider, __assign({ theme: {
+    return (jsxRuntime.jsx(BunnyContext.Provider, __assign({ value: {
+            subdomain: subdomain,
+            graphQLClient: graphQLClient,
+            window: window,
+            token: token,
+            accountId: accountId,
+            darkMode: darkMode,
+        } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient$1 }, { children: jsxRuntime.jsx(recoil.RecoilRoot, { children: jsxRuntime.jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsxRuntime.jsx(antd.ConfigProvider, __assign({ theme: {
+                            algorithm: darkMode
+                                ? theme__default["default"].darkAlgorithm
+                                : theme__default["default"].defaultAlgorithm,
                             token: {
                                 borderRadius: 4,
                                 colorPrimary: entityBranding.brandColor,
                                 colorLink: entityBranding.brandColor,
                                 colorLinkActive: entityBranding.brandColor,
                                 colorLinkHover: entityBranding.brandColor,
-                                fontFamily: common.MARK_PRO,
+                                fontFamily: "Inter",
                                 colorBorder: common.INPUT_BORDER_COLOR,
                             },
+                            components: {
+                                Drawer: {
+                                    colorBgElevated: darkMode
+                                        ? "var(--row-background-dark)"
+                                        : common.SLATE_50,
+                                },
+                                Divider: {
+                                    colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
+                                },
+                            },
                         } }, { children: jsxRuntime.jsx(SecondaryWrapper, __assign({ setBranding: setBranding }, { children: children })) })) })) }) })) })));
 }
 function SecondaryWrapper(_a) {
@@ -1730,10 +1707,10 @@ function SecondaryWrapper(_a) {
         queryKey: common.QueryKeyFactory.default.brandingKey,
         queryFn: function () { return getBranding({ token: token, subdomain: subdomain }); },
     }).data;
-    reactQuery.useQuery({
+    var _c = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.currentUserKey,
-        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
-    });
+        queryFn: function () { return getCurrentUserData({ token: token }); },
+    }); _c.data; _c.isLoading;
     React.useEffect(function () {
         if (brandingData) {
             setBranding(brandingData);
@@ -1748,11 +1725,11 @@ var InvoiceQuoteView = function (_a) {
     var downloadFile = common.useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
     var secondaryColor = React.useContext(BrandContext).secondaryColor;
     var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full grow ".concat(isMobile ? "overflow-hidden" : "") }, { children: [formattedInvoice && (jsxRuntime.jsxs("div", __assign({ className: "flex justify-between items-center pb-4 ".concat(isMobile ? "shadow-padding-x" : ""), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick && (jsxRuntime.jsx(antd.Button, __assign({ className: "text-xs pl-0", onClick: onBackButtonClick, style: {
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full grow ".concat(isMobile ? "overflow-hidden" : "") }, { children: [formattedInvoice ? (jsxRuntime.jsxs("div", __assign({ className: "flex justify-between items-center pb-4 ".concat(isMobile ? "shadow-padding-x" : ""), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "text-xs pl-0", onClick: onBackButtonClick, style: {
                                 color: secondaryColor,
-                            }, type: "link" }, { children: backButtonName || "Back" }))) }), jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(DownloadOutlined$1, {}), onClick: function () {
+                            }, type: "link" }, { children: backButtonName || "Back" }))) : null }), jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(DownloadOutlined$1, {}), onClick: function () {
                             return downloadFile(subdomain + "/api/pdf/invoice/" + formattedInvoice.id, token);
-                        } }, { children: "Download" }))] }))), isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 grow w-full shadow-padding-xb overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 p-2 w-full bg-white shadow-md rounded-md", style: {
+                        } }, { children: "Download" }))] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 grow w-full shadow-padding-xb overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 p-2 w-full bg-white shadow-md rounded-md", style: {
                     minWidth: "750px",
                 } }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
 };
@@ -1785,7 +1762,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.ant-btn {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-size: 0.875rem;\n  font-weight: normal;\n}\n.ant-btn > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-lg {\n  height: 44px !important;\n}\n.ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.ant-btn-link {\n  border: none !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link:disabled {\n  background-color: transparent !important;\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-input,\n.ant-picker,\n.ant-select,\n.ant-input-affix-wrapper {\n  font-size: 0.875rem;\n  color: #232323;\n  background: white;\n  box-shadow: none !important;\n  border: 1px solid #e2e8f0;\n}\n.ant-input:not(:focus) {\n  border-color: #e2e8f0 !important;\n}\n.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-focused) .ant-input-prefix {\n  color: rgba(0, 0, 0, 0.25) !important;\n}\n.ant-input-affix-wrapper .ant-input-prefix {\n  transition: color 0.3s;\n}\n.ant-select-selector {\n  box-shadow: none !important;\n  background-color: transparent !important;\n  border: none !important;\n}\n.ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.ant-form-item {\n  margin-bottom: 0;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-divider {\n  margin: 0;\n  border-block-color: #e2e8f0 !important;\n  border-inline-color: #e2e8f0 !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n.ant-drawer-body {\n  background-color: #f8fafc !important;\n}\n.ant-drawer-header {\n  padding-right: 1rem !important;\n  padding-left: 1rem !important;\n}\n.ant-drawer-title {\n  font-weight: 400 !important;\n}\n.ant-drawer-header-title {\n  flex-direction: row-reverse !important;\n  align-items: start !important ;\n}\n.ant-drawer-close {\n  margin-inline-end: 0 !important;\n}\n@media (min-width: 768px) {\n  .ant-input,\n  .ant-picker,\n  .ant-select,\n  .ant-input-affix-wrapper {\n    font-size: 1rem !important;\n  }\n  .ant-drawer-header {\n    padding-right: 1.5rem !important;\n    padding-left: 1.5rem !important;\n  }\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.fixed {\n  position: fixed;\n}\n.top-0 {\n  top: 0;\n}\n.right-0 {\n  right: 0;\n}\n.bottom-0 {\n  bottom: 0;\n}\n.left-0 {\n  left: 0;\n}\n.overflow-hidden {\n  overflow: hidden !important;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.z-50 {\n  z-index: 50;\n}\n.-top-1\\/10 {\n  top: -10%;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-tr {\n  border-top-right-radius: 0.25rem;\n}\n.rounded-br {\n  border-bottom-right-radius: 0.25rem;\n}\n.rounded-bl {\n  border-bottom-left-radius: 0.25rem;\n}\n.rounded-tl {\n  border-top-left-radius: 0.25rem;\n}\n.rounded-t {\n  border-top-right-radius: 0.25rem;\n  border-top-left-radius: 0.25rem;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.grow {\n  flex-grow: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.basis-0 {\n  flex-basis: 0;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.items-center {\n  align-items: center;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-start {\n  align-items: flex-start;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.underline {\n  text-decoration: underline;\n}\n.no-underline {\n  text-decoration: none;\n}\n.text-nowrap {\n  white-space: nowrap;\n}\n.text-white {\n  color: white;\n}\n.text-xxs {\n  font-size: 0.625rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n}\n.text-base {\n  font-size: 1rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n}\n.text-3xl {\n  font-size: 2rem;\n}\n.text-4xl {\n  font-size: 2.5rem;\n}\n.text-5xl {\n  font-size: 3rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.text-gray {\n  color: #808080 !important;\n}\n.text-blue-gray {\n  color: #717d94;\n}\n.text-primary {\n  color: #ff6e1c;\n}\n.text-secondary {\n  color: #4956dc;\n}\n.capitalize {\n  text-transform: capitalize !important;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  background-color: white;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.border-t-solid {\n  border-top-style: solid;\n}\n.border-b-solid {\n  border-bottom-style: solid;\n}\n.border-t-1 {\n  border-top-width: 1px;\n}\n.border-b-1 {\n  border-bottom-width: 1px;\n}\n.gap-0 {\n  gap: 0 !important;\n}\n.gap-0\\.5 {\n  gap: 0.125rem;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem !important;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.gap-6 {\n  gap: 1.5rem !important;\n}\n.gap-8 {\n  gap: 2rem !important;\n}\n.gap-12 {\n  gap: 3rem !important;\n}\n/* Padding Utilities */\n.p-0 {\n  padding: 0;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-5 {\n  padding: 1.25rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n/* Padding X Utilities */\n.px-0 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.px-1 {\n  padding-right: 0.25rem;\n  padding-left: 0.25rem;\n}\n.px-2 {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n.px-3 {\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n}\n.px-4 {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.px-5 {\n  padding-right: 1.25rem;\n  padding-left: 1.25rem;\n}\n.px-6 {\n  padding-right: 1.5rem;\n  padding-left: 1.5rem;\n}\n.px-8 {\n  padding-right: 2rem;\n  padding-left: 2rem;\n}\n.px-12 {\n  padding-right: 3rem;\n  padding-left: 3rem;\n}\n/* Padding Y Utilities */\n.py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n/* Padding Top Utilities */\n.pt-0 {\n  padding-top: 0;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-3 {\n  padding-top: 0.75rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n/* Padding Right Utilities */\n.pr-0 {\n  padding-right: 0;\n}\n.pr-4 {\n  padding-right: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n/* Padding Bottom Utilities */\n.pb-0 {\n  padding-bottom: 0;\n}\n.pb-1 {\n  padding-bottom: 0.25rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-3 {\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-5 {\n  padding-bottom: 1.25rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n/* Padding Left Utilities */\n.pl-0 {\n  padding-left: 0;\n}\n.pl-1 {\n  padding-left: 0.25rem;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pl-8 {\n  padding-left: 2rem;\n}\n/* Margin Utilities */\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-6 {\n  margin-left: 1.5rem;\n}\n.ml-8 {\n  margin-left: 2rem;\n}\n.mb-0 {\n  margin-bottom: 0;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-6 {\n  margin-right: 1.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-5 {\n  margin-top: 1.25rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.w-full {\n  width: 100%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-14 {\n  width: 3.5rem;\n  /* 56px */\n}\n.w-20 {\n  width: 5rem;\n  /* 80px */\n}\n.h-full {\n  height: 100%;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-14 {\n  height: 3.5rem;\n  /* 56px */\n}\n.h-80 {\n  height: 20rem;\n}\n.h-96 {\n  height: 24rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n  grid-template-columns: repeat(4, minMax(0, 1fr));\n}\n.col-span-2 {\n  grid-column: span 2 / span 2;\n}\n.col-span-3 {\n  grid-column: span 3 / span 3;\n}\n.col-span-4 {\n  grid-column: span 4 / span 4;\n}\n.col-span-full {\n  grid-column: 1 / -1;\n}\n/* Background colors */\n.bg-black {\n  background-color: #000000;\n}\n.bg-slate-50 {\n  background-color: #f8fafc;\n}\n.bg-slate-100 {\n  background-color: #f1f5f9;\n}\n.bg-slate-200 {\n  background-color: #e2e8f0;\n}\n.bg-slate-300 {\n  background-color: #cbd5e1;\n}\n.bg-slate-400 {\n  background-color: #94a3b8;\n}\n.bg-slate-500 {\n  background-color: #64748b;\n}\n.bg-slate-600 {\n  background-color: #475569;\n}\n.bg-slate-700 {\n  background-color: #334155;\n}\n.bg-slate-800 {\n  background-color: #1e293b;\n}\n.bg-slate-900 {\n  background-color: #0f172a;\n}\n.bg-slate-950 {\n  background-color: #020617;\n}\n.bg-gray-50 {\n  background-color: #f9fafb;\n}\n.bg-gray-100 {\n  background-color: #f3f4f6;\n}\n.bg-gray-200 {\n  background-color: #e5e7eb;\n}\n.bg-gray-300 {\n  background-color: #d1d5db;\n}\n.bg-gray-400 {\n  background-color: #9ca3af;\n}\n.bg-gray-500 {\n  background-color: #6b7280;\n}\n.bg-gray-600 {\n  background-color: #4b5563;\n}\n.bg-gray-700 {\n  background-color: #374151;\n}\n.bg-gray-800 {\n  background-color: #1f2937;\n}\n.bg-gray-900 {\n  background-color: #111827;\n}\n.bg-gray-950 {\n  background-color: #030712;\n}\n.bg-green-200 {\n  background-color: #a7f3d0;\n}\n.bg-blue-50 {\n  background-color: #eff6ff;\n}\n.bg-blue-100 {\n  background-color: #dbeafe;\n}\n.bg-blue-200 {\n  background-color: #bfdbfe;\n}\n.bg-blue-300 {\n  background-color: #93c5fd;\n}\n.bg-blue-400 {\n  background-color: #60a5fa;\n}\n.bg-blue-500 {\n  background-color: #3b82f6;\n}\n.bg-blue-600 {\n  background-color: #2563eb;\n}\n.bg-blue-700 {\n  background-color: #1d4ed8;\n}\n.bg-blue-800 {\n  background-color: #1e40af;\n}\n.bg-blue-900 {\n  background-color: #1e3a8a;\n}\n.bg-blue-950 {\n  background-color: #172554;\n}\n.bg-orange-50 {\n  background-color: #fff7ed;\n}\n.bg-orange-100 {\n  background-color: #ffedd5;\n}\n.bg-orange-200 {\n  background-color: #fed7aa;\n}\n.bg-orange-300 {\n  background-color: #fdba74;\n}\n.bg-orange-400 {\n  background-color: #fb923c;\n}\n.bg-orange-500 {\n  background-color: #f97316;\n}\n.bg-orange-600 {\n  background-color: #ea580c;\n}\n.bg-orange-700 {\n  background-color: #c2410c;\n}\n.bg-orange-800 {\n  background-color: #9a3412;\n}\n.bg-orange-900 {\n  background-color: #7c2d12;\n}\n.bg-orange-950 {\n  background-color: #431407;\n}\n.bg-yellow-200 {\n  background-color: #fde68a;\n}\n.bg-red-200 {\n  background-color: #fecaca;\n}\n/* Text colors */\n.text-black {\n  color: #000000;\n}\n.text-white {\n  color: #ffffff;\n}\n.text-slate-50 {\n  color: #f8fafc;\n}\n.text-slate-100 {\n  color: #f1f5f9;\n}\n.text-slate-200 {\n  color: #e2e8f0;\n}\n.text-slate-300 {\n  color: #cbd5e1;\n}\n.text-slate-400 {\n  color: #94a3b8;\n}\n.text-slate-500 {\n  color: #64748b;\n}\n.text-slate-600 {\n  color: #475569;\n}\n.text-slate-700 {\n  color: #334155;\n}\n.text-slate-800 {\n  color: #1e293b;\n}\n.text-slate-900 {\n  color: #0f172a;\n}\n.text-slate-950 {\n  color: #020617;\n}\n.text-gray-50 {\n  color: #f9fafb;\n}\n.text-gray-100 {\n  color: #f3f4f6;\n}\n.text-gray-200 {\n  color: #e5e7eb;\n}\n.text-gray-300 {\n  color: #d1d5db;\n}\n.text-gray-400 {\n  color: #9ca3af;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.text-gray-600 {\n  color: #4b5563;\n}\n.text-gray-700 {\n  color: #374151;\n}\n.text-gray-800 {\n  color: #1f2937;\n}\n.text-gray-900 {\n  color: #111827;\n}\n.text-gray-950 {\n  color: #030712;\n}\n.text-green-600 {\n  color: #059669;\n}\n.text-green-700 {\n  color: #047857;\n}\n.text-blue-50 {\n  color: #eff6ff;\n}\n.text-blue-100 {\n  color: #dbeafe;\n}\n.text-blue-200 {\n  color: #bfdbfe;\n}\n.text-blue-300 {\n  color: #93c5fd;\n}\n.text-blue-400 {\n  color: #60a5fa;\n}\n.text-blue-500 {\n  color: #3b82f6;\n}\n.text-blue-600 {\n  color: #2563eb;\n}\n.text-blue-700 {\n  color: #1d4ed8;\n}\n.text-blue-800 {\n  color: #1e40af;\n}\n.text-blue-900 {\n  color: #1e3a8a;\n}\n.text-blue-950 {\n  color: #172554;\n}\n.text-orange-50 {\n  color: #fff7ed;\n}\n.text-orange-100 {\n  color: #ffedd5;\n}\n.text-orange-200 {\n  color: #fed7aa;\n}\n.text-orange-300 {\n  color: #fdba74;\n}\n.text-orange-400 {\n  color: #fb923c;\n}\n.text-orange-500 {\n  color: #f97316;\n}\n.text-orange-600 {\n  color: #ea580c;\n}\n.text-orange-700 {\n  color: #c2410c;\n}\n.text-orange-800 {\n  color: #9a3412;\n}\n.text-orange-900 {\n  color: #7c2d12;\n}\n.text-orange-950 {\n  color: #431407;\n}\n.text-yellow-500 {\n  color: #f59e0b;\n}\n.text-yellow-700 {\n  color: #b45309;\n}\n.text-red-500 {\n  color: #ef4444;\n}\n.text-red-700 {\n  color: #b91c1c;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-dashed {\n  border-style: dashed;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-slate-50 {\n  border-color: #f8fafc;\n}\n.border-slate-100 {\n  border-color: #f1f5f9;\n}\n.border-slate-200 {\n  border-color: #e2e8f0;\n}\n.border-slate-300 {\n  border-color: #cbd5e1;\n}\n.border-slate-400 {\n  border-color: #94a3b8;\n}\n.border-slate-500 {\n  border-color: #64748b;\n}\n.border-slate-600 {\n  border-color: #475569;\n}\n.border-slate-700 {\n  border-color: #334155;\n}\n.border-slate-800 {\n  border-color: #1e293b;\n}\n.border-slate-900 {\n  border-color: #0f172a;\n}\n.border-slate-950 {\n  border-color: #020617;\n}\n.origin-center {\n  transform-origin: center;\n}\n.rotate-45 {\n  transform: rotate(45deg);\n}\n.translate-x-2\\/4 {\n  transform: translateX(50%);\n}\n.-translate-x-2\\/4 {\n  transform: translateX(-50%);\n}\n.translate-y-2\\/4 {\n  transform: translateY(50%);\n}\n.translate-y-full {\n  transform: translateY(100%);\n}\n.-translate-y-full {\n  transform: translateY(-100%);\n}\n.shadow-sm {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow {\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.shadow-md {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n}\n.shadow-lg {\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n.shadow-xl {\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n}\n.shadow-2xl {\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n.shadow-inner {\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow-none {\n  box-shadow: 0 0 #0000;\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z = "@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');\n}\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype');\n}\n.ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.ant-btn {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-size: 0.875rem;\n  font-weight: normal;\n}\n.ant-btn > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-lg {\n  height: 44px !important;\n}\n.ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.ant-btn-link {\n  border: none !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link:disabled {\n  background-color: transparent !important;\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-input-affix-wrapper .ant-input-prefix {\n  transition: color 0.3s;\n}\n.ant-select-selector {\n  box-shadow: none !important;\n  background-color: transparent !important;\n  border: none !important;\n}\n.ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.ant-form-item {\n  margin-bottom: 0;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-divider {\n  margin: 0;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n.ant-drawer-title {\n  font-weight: 400 !important;\n}\n.ant-drawer-header-title {\n  flex-direction: row-reverse !important;\n  align-items: start !important ;\n}\n.ant-drawer-close {\n  margin-inline-end: 0 !important;\n}\n@media (min-width: 768px) {\n  .ant-input,\n  .ant-picker,\n  .ant-select,\n  .ant-input-affix-wrapper {\n    font-size: 1rem !important;\n  }\n  .ant-drawer-header {\n    padding-right: 1.5rem !important;\n    padding-left: 1.5rem !important;\n  }\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.fixed {\n  position: fixed;\n}\n.top-0 {\n  top: 0;\n}\n.right-0 {\n  right: 0;\n}\n.bottom-0 {\n  bottom: 0;\n}\n.left-0 {\n  left: 0;\n}\n.overflow-hidden {\n  overflow: hidden !important;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.z-50 {\n  z-index: 50;\n}\n.-top-1\\/10 {\n  top: -10%;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-tr {\n  border-top-right-radius: 0.25rem;\n}\n.rounded-br {\n  border-bottom-right-radius: 0.25rem;\n}\n.rounded-bl {\n  border-bottom-left-radius: 0.25rem;\n}\n.rounded-tl {\n  border-top-left-radius: 0.25rem;\n}\n.rounded-t {\n  border-top-right-radius: 0.25rem;\n  border-top-left-radius: 0.25rem;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.grow {\n  flex-grow: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.basis-0 {\n  flex-basis: 0;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.items-center {\n  align-items: center;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-start {\n  align-items: flex-start;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.underline {\n  text-decoration: underline;\n}\n.no-underline {\n  text-decoration: none;\n}\n.text-nowrap {\n  white-space: nowrap;\n}\n.text-white {\n  color: white;\n}\n.text-xxs {\n  font-size: 0.625rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n}\n.text-base {\n  font-size: 1rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n}\n.text-3xl {\n  font-size: 2rem;\n}\n.text-4xl {\n  font-size: 2.5rem;\n}\n.text-5xl {\n  font-size: 3rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.text-gray {\n  color: #808080 !important;\n}\n.text-gray-400 {\n  color: #9ca3af !important;\n}\n.text-gray-500 {\n  color: #6b7280 !important;\n}\n.text-blue-gray {\n  color: #717d94;\n}\n.text-primary {\n  color: #ff6e1c;\n}\n.text-secondary {\n  color: #4956dc;\n}\n.capitalize {\n  text-transform: capitalize !important;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  background-color: white;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.border-t-solid {\n  border-top-style: solid;\n}\n.border-b-solid {\n  border-bottom-style: solid;\n}\n.border-t-1 {\n  border-top-width: 1px;\n}\n.border-b-1 {\n  border-bottom-width: 1px;\n}\n.gap-0 {\n  gap: 0 !important;\n}\n.gap-0\\.5 {\n  gap: 0.125rem;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem !important;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.gap-6 {\n  gap: 1.5rem !important;\n}\n.gap-8 {\n  gap: 2rem !important;\n}\n.gap-12 {\n  gap: 3rem !important;\n}\n/* Padding Utilities */\n.p-0 {\n  padding: 0;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-5 {\n  padding: 1.25rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n/* Padding X Utilities */\n.px-0 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.px-1 {\n  padding-right: 0.25rem;\n  padding-left: 0.25rem;\n}\n.px-2 {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n.px-3 {\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n}\n.px-4 {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.px-5 {\n  padding-right: 1.25rem;\n  padding-left: 1.25rem;\n}\n.px-6 {\n  padding-right: 1.5rem;\n  padding-left: 1.5rem;\n}\n.px-8 {\n  padding-right: 2rem;\n  padding-left: 2rem;\n}\n.px-12 {\n  padding-right: 3rem;\n  padding-left: 3rem;\n}\n/* Padding Y Utilities */\n.py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n/* Padding Top Utilities */\n.pt-0 {\n  padding-top: 0;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-3 {\n  padding-top: 0.75rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n/* Padding Right Utilities */\n.pr-0 {\n  padding-right: 0;\n}\n.pr-4 {\n  padding-right: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n/* Padding Bottom Utilities */\n.pb-0 {\n  padding-bottom: 0;\n}\n.pb-1 {\n  padding-bottom: 0.25rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-3 {\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-5 {\n  padding-bottom: 1.25rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n/* Padding Left Utilities */\n.pl-0 {\n  padding-left: 0;\n}\n.pl-1 {\n  padding-left: 0.25rem;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pl-8 {\n  padding-left: 2rem;\n}\n/* Space Utilities */\n.space-y-2 {\n  gap: 0.5rem;\n}\n.space-y-4 {\n  gap: 1rem;\n}\n.space-y-8 {\n  gap: 2rem;\n}\n/* Margin Utilities */\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-6 {\n  margin-left: 1.5rem;\n}\n.ml-8 {\n  margin-left: 2rem;\n}\n.mb-0 {\n  margin-bottom: 0;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-6 {\n  margin-right: 1.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-0 {\n  margin-top: 0;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-5 {\n  margin-top: 1.25rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.my-8 {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.mx-8 {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-14 {\n  width: 3.5rem;\n  /* 56px */\n}\n.w-20 {\n  width: 5rem;\n  /* 80px */\n}\n.h-full {\n  height: 100%;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-14 {\n  height: 3.5rem;\n  /* 56px */\n}\n.h-80 {\n  height: 20rem;\n}\n.h-96 {\n  height: 24rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n  grid-template-columns: repeat(4, minMax(0, 1fr));\n}\n.col-span-2 {\n  grid-column: span 2 / span 2;\n}\n.col-span-3 {\n  grid-column: span 3 / span 3;\n}\n.col-span-4 {\n  grid-column: span 4 / span 4;\n}\n.col-span-full {\n  grid-column: 1 / -1;\n}\n/* Background colors */\n.bg-black {\n  background-color: #000000;\n}\n.bg-slate-50 {\n  background-color: #f8fafc;\n}\n.bg-slate-100 {\n  background-color: #f1f5f9;\n}\n.bg-slate-200 {\n  background-color: #e2e8f0;\n}\n.bg-slate-300 {\n  background-color: #cbd5e1;\n}\n.bg-slate-400 {\n  background-color: #94a3b8;\n}\n.bg-slate-500 {\n  background-color: #64748b;\n}\n.bg-slate-600 {\n  background-color: #475569;\n}\n.bg-slate-700 {\n  background-color: #334155;\n}\n.bg-slate-800 {\n  background-color: #1e293b;\n}\n.bg-slate-900 {\n  background-color: #0f172a;\n}\n.bg-slate-950 {\n  background-color: #020617;\n}\n.bg-gray-50 {\n  background-color: #f9fafb;\n}\n.bg-gray-100 {\n  background-color: #f3f4f6;\n}\n.bg-gray-200 {\n  background-color: #e5e7eb;\n}\n.bg-gray-300 {\n  background-color: #d1d5db;\n}\n.bg-gray-400 {\n  background-color: #9ca3af;\n}\n.bg-gray-500 {\n  background-color: #6b7280;\n}\n.bg-gray-600 {\n  background-color: #4b5563;\n}\n.bg-gray-700 {\n  background-color: #374151;\n}\n.bg-gray-800 {\n  background-color: #1f2937;\n}\n.bg-gray-900 {\n  background-color: #111827;\n}\n.bg-gray-950 {\n  background-color: #030712;\n}\n.bg-green-200 {\n  background-color: #a7f3d0;\n}\n.bg-green-500 {\n  background-color: #10b981;\n}\n.bg-blue-50 {\n  background-color: #eff6ff;\n}\n.bg-blue-100 {\n  background-color: #dbeafe;\n}\n.bg-blue-200 {\n  background-color: #bfdbfe;\n}\n.bg-blue-300 {\n  background-color: #93c5fd;\n}\n.bg-blue-400 {\n  background-color: #60a5fa;\n}\n.bg-blue-500 {\n  background-color: #3b82f6;\n}\n.bg-blue-600 {\n  background-color: #2563eb;\n}\n.bg-blue-700 {\n  background-color: #1d4ed8;\n}\n.bg-blue-800 {\n  background-color: #1e40af;\n}\n.bg-blue-900 {\n  background-color: #1e3a8a;\n}\n.bg-blue-950 {\n  background-color: #172554;\n}\n.bg-orange-50 {\n  background-color: #fff7ed;\n}\n.bg-orange-100 {\n  background-color: #ffedd5;\n}\n.bg-orange-200 {\n  background-color: #fed7aa;\n}\n.bg-orange-300 {\n  background-color: #fdba74;\n}\n.bg-orange-400 {\n  background-color: #fb923c;\n}\n.bg-orange-500 {\n  background-color: #f97316;\n}\n.bg-orange-600 {\n  background-color: #ea580c;\n}\n.bg-orange-700 {\n  background-color: #c2410c;\n}\n.bg-orange-800 {\n  background-color: #9a3412;\n}\n.bg-orange-900 {\n  background-color: #7c2d12;\n}\n.bg-orange-950 {\n  background-color: #431407;\n}\n.bg-yellow-200 {\n  background-color: #fde68a;\n}\n.bg-red-200 {\n  background-color: #fecaca;\n}\n/* Text colors */\n.text-black {\n  color: #000000;\n}\n.text-white {\n  color: #ffffff;\n}\n.text-slate-50 {\n  color: #f8fafc;\n}\n.text-slate-100 {\n  color: #f1f5f9;\n}\n.text-slate-200 {\n  color: #e2e8f0;\n}\n.text-slate-300 {\n  color: #cbd5e1;\n}\n.text-slate-400 {\n  color: #94a3b8;\n}\n.text-slate-500 {\n  color: #64748b;\n}\n.text-slate-600 {\n  color: #475569;\n}\n.text-slate-700 {\n  color: #334155;\n}\n.text-slate-800 {\n  color: #1e293b;\n}\n.text-slate-900 {\n  color: #0f172a;\n}\n.text-slate-950 {\n  color: #020617;\n}\n.text-gray-50 {\n  color: #f9fafb;\n}\n.text-gray-100 {\n  color: #f3f4f6;\n}\n.text-gray-200 {\n  color: #e5e7eb;\n}\n.text-gray-300 {\n  color: #d1d5db;\n}\n.text-gray-400 {\n  color: #9ca3af;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.text-gray-600 {\n  color: #4b5563;\n}\n.text-gray-700 {\n  color: #374151;\n}\n.text-gray-800 {\n  color: #1f2937;\n}\n.text-gray-900 {\n  color: #111827;\n}\n.text-gray-950 {\n  color: #030712;\n}\n.text-green-600 {\n  color: #059669;\n}\n.text-green-700 {\n  color: #047857;\n}\n.text-blue-50 {\n  color: #eff6ff;\n}\n.text-blue-100 {\n  color: #dbeafe;\n}\n.text-blue-200 {\n  color: #bfdbfe;\n}\n.text-blue-300 {\n  color: #93c5fd;\n}\n.text-blue-400 {\n  color: #60a5fa;\n}\n.text-blue-500 {\n  color: #3b82f6;\n}\n.text-blue-600 {\n  color: #2563eb;\n}\n.text-blue-700 {\n  color: #1d4ed8;\n}\n.text-blue-800 {\n  color: #1e40af;\n}\n.text-blue-900 {\n  color: #1e3a8a;\n}\n.text-blue-950 {\n  color: #172554;\n}\n.text-orange-50 {\n  color: #fff7ed;\n}\n.text-orange-100 {\n  color: #ffedd5;\n}\n.text-orange-200 {\n  color: #fed7aa;\n}\n.text-orange-300 {\n  color: #fdba74;\n}\n.text-orange-400 {\n  color: #fb923c;\n}\n.text-orange-500 {\n  color: #f97316;\n}\n.text-orange-600 {\n  color: #ea580c;\n}\n.text-orange-700 {\n  color: #c2410c;\n}\n.text-orange-800 {\n  color: #9a3412;\n}\n.text-orange-900 {\n  color: #7c2d12;\n}\n.text-orange-950 {\n  color: #431407;\n}\n.text-yellow-500 {\n  color: #f59e0b;\n}\n.text-yellow-700 {\n  color: #b45309;\n}\n.text-red-500 {\n  color: #ef4444;\n}\n.text-red-700 {\n  color: #b91c1c;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-dashed {\n  border-style: dashed;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-slate-50 {\n  border-color: #f8fafc;\n}\n.border-slate-100 {\n  border-color: #f1f5f9;\n}\n.border-slate-200 {\n  border-color: #e2e8f0;\n}\n.border-slate-300 {\n  border-color: #cbd5e1;\n}\n.border-slate-400 {\n  border-color: #94a3b8;\n}\n.border-slate-500 {\n  border-color: #64748b;\n}\n.border-slate-600 {\n  border-color: #475569;\n}\n.border-slate-700 {\n  border-color: #334155;\n}\n.border-slate-800 {\n  border-color: #1e293b;\n}\n.border-slate-900 {\n  border-color: #0f172a;\n}\n.border-slate-950 {\n  border-color: #020617;\n}\n.border-gray-400 {\n  border-color: #9ca3af;\n}\n.border-gray-500 {\n  border-color: #6b7280;\n}\n.origin-center {\n  transform-origin: center;\n}\n.rotate-45 {\n  transform: rotate(45deg);\n}\n.translate-x-2\\/4 {\n  transform: translateX(50%);\n}\n.-translate-x-2\\/4 {\n  transform: translateX(-50%);\n}\n.translate-y-2\\/4 {\n  transform: translateY(50%);\n}\n.translate-y-full {\n  transform: translateY(100%);\n}\n.-translate-y-full {\n  transform: translateY(-100%);\n}\n.shadow-sm {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow {\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.shadow-md {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n}\n.shadow-lg {\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n.shadow-xl {\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n}\n.shadow-2xl {\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n.shadow-inner {\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow-none {\n  box-shadow: 0 0 #0000;\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z);
 
 var paymentMethodsQuery = "query paymentMethods ($filter: String, $first: Int, $sort: String) {\n  paymentMethods (filter: $filter, first: $first, sort: $sort) {\n    nodes {\n      id\n      disabled\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n      }\n    }\n  }\n}";
@@ -1813,12 +1790,16 @@ var CardIcon = function () {
     return (jsxRuntime.jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
+var Text$d = antd.Typography.Text;
 var PaymentOption = function (_a) {
     var selected = _a.selected, paymentOption = _a.paymentOption, onClick = _a.onClick, name = _a.name;
     var brandColor = React.useContext(BrandContext).brandColor;
+    var darkMode = React.useContext(BunnyContext).darkMode;
     var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("ach");
     var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
-    return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "flex justify-between items-center w-full cursor-pointer py-2 px-4 rounded border-solid border-slate-200 bg-slate-50 border", onClick: function () { return onClick(paymentOption); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected }), jsxRuntime.jsx("div", __assign({ className: "text-gray-900" }, { children: name }))] })), isAch ? (jsxRuntime.jsx(BankOutlined$1, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
+    return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "flex justify-between items-center w-full cursor-pointer py-2 px-4 rounded border-solid ".concat(darkMode
+            ? "var(--row-background-dark) border-gray-500"
+            : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentOption); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$d, { children: name })] })), isAch ? (jsxRuntime.jsx(BankOutlined$1, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
 };
 var PaymentOptionContainer = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -1935,16 +1916,28 @@ var useStripePlugin = function (plugin, token, subdomain, accountId) {
     return stripe;
 };
 
+var PaymentContext = React.createContext({});
+
 var CheckoutFooter = function (_a) {
     var amountDue = _a.amountDue, currencyId = _a.currencyId, isSaving = _a.isSaving, onPaymentSubmit = _a.onPaymentSubmit, onlySavePaymentMethod = _a.onlySavePaymentMethod, noPadding = _a.noPadding;
     var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isSaving, onClick: onPaymentSubmit, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(onlySavePaymentMethod
-                ? isSaving
-                    ? "Saving"
-                    : "Save"
-                : isSaving
-                    ? "Paying"
-                    : "Pay").concat(amountDue && currencyId
+    var invoice = React.useContext(InvoiceCheckoutContext).invoice;
+    var displayPayButtonNameAnyways = React.useContext(PaymentContext).displayPayButtonNameAnyways;
+    var buttonName = function () {
+        return onlySavePaymentMethod && !displayPayButtonNameAnyways
+            ? isSaving
+                ? "Saving"
+                : "Save"
+            : isSaving
+                ? "Paying"
+                : "Pay";
+    };
+    React.useEffect(function () {
+        if (invoice) {
+            onPaymentSubmit();
+        }
+    }, [invoice]);
+    return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isSaving, onClick: onPaymentSubmit, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(buttonName()).concat(amountDue && currencyId
                 ? " ".concat(common.Misc.formatCurrency(amountDue, currencyId))
                 : "") })) })));
 };
@@ -2036,10 +2029,11 @@ var PaymentMethodForm$1 = function (_a) {
     // Hooks
     var elements = reactStripeJs.useElements();
     var stripe = reactStripeJs.useStripe();
-    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, accountId = _b.accountId;
+    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var accountId = React.useContext(PaymentContext).accountId;
     // Handlers
     var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var submitError, response, clientSecret, intentResponse, paymentMethodId, error_1;
+        var submitError, response, clientSecret, intentResponse, paymentMethodId, paymentMethodResponse, error_1;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -2087,8 +2081,17 @@ var PaymentMethodForm$1 = function (_a) {
                             accountId: accountId,
                         })];
                 case 4:
-                    _c.sent();
-                    onPaymentSuccess({});
+                    paymentMethodResponse = _c.sent();
+                    onPaymentSuccess({
+                        pluginPaymentResponse: {
+                            savePaymentMethod: true,
+                            plugin: plugin,
+                            token: paymentMethodResponse.token,
+                        },
+                        savedPaymentMethodResponse: {
+                            paymentMethodId: paymentMethodResponse.payload[0].id,
+                        },
+                    });
                     return [3 /*break*/, 6];
                 case 5:
                     error_1 = _c.sent();
@@ -2104,7 +2107,8 @@ var PaymentMethodForm$1 = function (_a) {
 // This is just a wrapper to fetch the stripe object and pass it to the form
 var StripeForm = function (_a) {
     var payable = _a.payable, plugin = _a.plugin, isSaving = _a.isSaving, setIsSaving = _a.setIsSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess;
-    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, accountId = _b.accountId;
+    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var accountId = React.useContext(PaymentContext).accountId;
     var stripe = useStripePlugin(plugin, token, subdomain, accountId);
     var onlySavePaymentMethod = !payable;
     if (!stripe)
@@ -2132,6 +2136,10 @@ var StripeForm = function (_a) {
     }
 };
 
+var getQuoteAmountDue = function (quote) {
+    return quote.amountDue;
+};
+
 // Simulated payment creation and confirmation
 var confirmPayment = function (_a) {
     var amount = _a.amount, currency = _a.currency, cardDetails = _a.cardDetails;
@@ -2198,34 +2206,34 @@ var storePayment = function (options, plugin, accountId, subdomain) { return __a
     });
 }); };
 
-var CARD_NUMBER_MAX_LENGTH = 19; // Why 19 instead of 16? Because we add spaces
-var formatCardNumber = function (cardNumber) {
-    return cardNumber.replace(/(\d{4})(?=\d)/g, "$1 ");
-};
-var DemoPayCardNumber = function (_a) {
+var DemoPayCardCvc = function (_a) {
     var autoFocus = _a.autoFocus, onChange = _a.onChange, placeholder = _a.placeholder, value = _a.value;
     var onKeyPress = function (event) {
         if (!isDigit(event.key) && !isValidKey(event.keyCode))
             event.preventDefault();
     };
     var onNumberChange = function (event) {
-        var number = event.target.value.replace(/\s/g, "");
-        onChange(number);
+        var cvc = event.target.value.replace(/\D/g, "");
+        onChange(cvc);
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: autoFocus, maxLength: CARD_NUMBER_MAX_LENGTH, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, placeholder: placeholder || "Card Number", value: formatCardNumber(value) }) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: value, maxLength: 3, placeholder: placeholder || "CVC" }) })));
 };
 
-var DemoPayCardCvc = function (_a) {
+var CARD_NUMBER_MAX_LENGTH = 19; // Why 19 instead of 16? Because we add spaces
+var formatCardNumber = function (cardNumber) {
+    return cardNumber.replace(/(\d{4})(?=\d)/g, "$1 ");
+};
+var DemoPayCardNumber = function (_a) {
     var autoFocus = _a.autoFocus, onChange = _a.onChange, placeholder = _a.placeholder, value = _a.value;
     var onKeyPress = function (event) {
         if (!isDigit(event.key) && !isValidKey(event.keyCode))
             event.preventDefault();
     };
     var onNumberChange = function (event) {
-        var cvc = event.target.value.replace(/\D/g, "");
-        onChange(cvc);
+        var number = event.target.value.replace(/\s/g, "");
+        onChange(number);
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: value, maxLength: 3, placeholder: placeholder || "CVC" }) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: autoFocus, maxLength: CARD_NUMBER_MAX_LENGTH, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, placeholder: placeholder || "Card Number", value: formatCardNumber(value) }) })));
 };
 
 var DemoPayExpiry = function (_a) {
@@ -2241,15 +2249,13 @@ var DemoPayExpiry = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) })));
 };
 
-var getQuoteAmountDue = function (quote) {
-    return quote.amountDue;
-};
-
+var Text$c = antd.Typography.Text;
 var TEST_CARD = "4242424242424242";
 var DemoPayForm = function (_a) {
     var isSaving = _a.isSaving, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
     // Context
-    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, accountId = _b.accountId;
+    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
+    var accountId = React.useContext(PaymentContext).accountId;
     // Local state
     var _c = React.useState(false), savePaymentMethod = _c[0], setSavePaymentMethod = _c[1];
     var _d = React.useState({
@@ -2261,12 +2267,14 @@ var DemoPayForm = function (_a) {
     var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
     var onlySavePaymentMethod = !quote && !invoice;
     var onPaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var response, response, error_1;
+        var response, paymentMethodId, response, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     _a.trys.push([0, 6, , 7]);
+                    validateCardDetails();
                     if (!onlySavePaymentMethod) return [3 /*break*/, 2];
+                    setIsSaving(true);
                     return [4 /*yield*/, storePayment({
                             testCreditCardNumber: unformatCardNumber(cardDetails.number),
                             testCreditCardCvc: cardDetails.cvc.toString(),
@@ -2275,21 +2283,23 @@ var DemoPayForm = function (_a) {
                         }, plugin, accountId, subdomain)];
                 case 1:
                     response = _a.sent();
+                    paymentMethodId = response.payload[0].id;
                     if (response.status !== "success")
                         throw new Error(response === null || response === void 0 ? void 0 : response.message);
-                    onPaymentSuccess({});
-                    return [3 /*break*/, 5];
-                case 2:
-                    if (!(amountDue !== undefined && currencyId)) return [3 /*break*/, 4];
+                    onPaymentSuccess({
+                        pluginPaymentResponse: {
+                            plugin: plugin,
+                            token: response.token,
+                            savePaymentMethod: savePaymentMethod,
+                        },
+                        savedPaymentMethodResponse: {
+                            paymentMethodId: paymentMethodId,
+                        },
+                    });
+                    return [3 /*break*/, 5];
+                case 2:
+                    if (!(amountDue !== undefined && currencyId)) return [3 /*break*/, 4];
                     setIsSaving(true);
-                    if (cardDetails.number !== TEST_CARD)
-                        throw new Error("Only the card number 4242 4242 4242 4242 will be accepted.");
-                    if (!isValidExpiry(cardDetails.expiry))
-                        throw new Error("Invalid expiry date");
-                    if (isCardExpired(cardDetails.expiry))
-                        throw new Error("Card is expired");
-                    if (cardDetails.cvc.length !== 3)
-                        throw new Error("Invalid CVC");
                     return [4 /*yield*/, confirmPayment({
                             amount: amountDue,
                             currency: currencyId,
@@ -2304,6 +2314,7 @@ var DemoPayForm = function (_a) {
                             savePaymentMethod: savePaymentMethod,
                         },
                     });
+                    setIsSaving(false);
                     return [3 /*break*/, 5];
                 case 4:
                     onFail(new Error("No amount or currencyId"));
@@ -2317,6 +2328,16 @@ var DemoPayForm = function (_a) {
             }
         });
     }); };
+    function validateCardDetails() {
+        if (cardDetails.number !== TEST_CARD)
+            throw new Error("Only the card number 4242 4242 4242 4242 will be accepted.");
+        if (!isValidExpiry(cardDetails.expiry))
+            throw new Error("Invalid expiry date");
+        if (isCardExpired(cardDetails.expiry))
+            throw new Error("Card is expired");
+        if (cardDetails.cvc.length !== 3)
+            throw new Error("Invalid CVC");
+    }
     var onCardNumberChange = function (number) {
         setCardDetails(__assign(__assign({}, cardDetails), { number: number }));
     };
@@ -2326,9 +2347,15 @@ var DemoPayForm = function (_a) {
     var onCardCvcChange = function (cvc) {
         setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx("div", __assign({ className: "text-xs text-gray-700" }, { children: "DemoPay is for testing only." })), !onlySavePaymentMethod && (jsxRuntime.jsx(antd.Checkbox, __assign({ className: "mt-2", onChange: function (e) { return setSavePaymentMethod(e.target.checked); } }, { children: "Save as primary payment method" }))), jsxRuntime.jsx(CheckoutFooter, { amountDue: amountDue, currencyId: currencyId, isSaving: isSaving, onPaymentSubmit: onPaymentSubmit, onlySavePaymentMethod: onlySavePaymentMethod })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$c, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), !onlySavePaymentMethod && (jsxRuntime.jsx(antd.Checkbox, __assign({ className: "mt-2", onChange: function (e) { return setSavePaymentMethod(e.target.checked); } }, { children: "Save as primary payment method" }))), jsxRuntime.jsx(CheckoutFooter, { amountDue: amountDue, currencyId: currencyId, isSaving: isSaving, onPaymentSubmit: onPaymentSubmit, onlySavePaymentMethod: onlySavePaymentMethod })] })));
 };
-var StyledInputs = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  .ant-input {\n    background-color: white !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: white !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), common.GRAY_200);
+var StyledInputs = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
+    var darkMode = _a.darkMode;
+    return darkMode ? "var(--row-background-dark)" : "white";
+}, function (_a) {
+    var darkMode = _a.darkMode;
+    return darkMode ? common.GRAY_500 : common.GRAY_200;
+});
 var templateObject_1$7;
 
 var finixStyles = function (isMobile) { return ({
@@ -2419,7 +2446,8 @@ var formatFinixError = function (response) {
 var FinixCardPaymentForm = function (_a) {
     var finixConfig = _a.formData, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
     // Context
-    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, accountId = _b.accountId;
+    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var accountId = React.useContext(PaymentContext).accountId;
     var isMobile = common.useIsMobile();
     // Local state
     var _c = React.useState(false), savePaymentMethod = _c[0], setSavePaymentMethod = _c[1];
@@ -2761,7 +2789,7 @@ var PaymentForm = function (_a) {
     return (jsxRuntime.jsx(ActualPaymentForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
 };
 
-var MUTATION$3 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var MUTATION$7 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
 var checkout = function (_a) {
     var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, subdomain = _a.subdomain;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -2778,7 +2806,7 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$3,
+                            query: MUTATION$7,
                             token: token,
                             vars: mutationVars,
                             subdomain: subdomain,
@@ -2796,8 +2824,9 @@ var checkout = function (_a) {
     });
 };
 
+var InvoiceCheckoutContext = React.createContext({});
 var InvoiceCheckout = function (_a) {
-    var isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, setIsSaving = _a.setIsSaving;
+    var isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, setIsSaving = _a.setIsSaving, preCheckout = _a.preCheckout, setIsPreCheckoutLoading = _a.setIsPreCheckoutLoading, isPreCheckoutLoading = _a.isPreCheckoutLoading, payImmediatelyGivenInvoice = _a.payImmediatelyGivenInvoice, checkoutButtonName = _a.checkoutButtonName;
     var _b = React.useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
     var checkoutMutation = reactQuery.useMutation({
         mutationFn: function (_a) {
@@ -2805,7 +2834,7 @@ var InvoiceCheckout = function (_a) {
             if (savedPaymentMethod) {
                 var paymentMethodId = savedPaymentMethod.paymentMethodId;
                 return checkout({
-                    invoiceId: invoice.id,
+                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
                     paymentMethodId: paymentMethodId,
                     token: token,
                     subdomain: subdomain,
@@ -2815,7 +2844,7 @@ var InvoiceCheckout = function (_a) {
                 var plugin = pluginPaymentMethod.plugin, savePaymentMethod = pluginPaymentMethod.savePaymentMethod, metadata = pluginPaymentMethod.metadata;
                 var paymentToken = pluginPaymentMethod.token;
                 return checkout({
-                    invoiceId: invoice.id,
+                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
                     paymentMethodData: {
                         metadata: metadata,
                         pluginGuid: plugin.guid,
@@ -2861,7 +2890,14 @@ var InvoiceCheckout = function (_a) {
             });
         });
     };
-    return (jsxRuntime.jsx(PaymentForm, { isSaving: isSaving, onPaymentSuccess: handleCheckout, onFail: onFail, invoice: invoice, setIsSaving: setIsSaving }));
+    return (jsxRuntime.jsx(InvoiceCheckoutContext.Provider, __assign({ value: {
+            preCheckout: preCheckout,
+            payImmediatelyGivenInvoice: payImmediatelyGivenInvoice,
+            checkoutButtonName: checkoutButtonName,
+            invoice: invoice,
+            setIsPreCheckoutLoading: setIsPreCheckoutLoading,
+            isPreCheckoutLoading: isPreCheckoutLoading,
+        } }, { children: jsxRuntime.jsx(PaymentForm, { isSaving: isSaving, onPaymentSuccess: handleCheckout, onFail: onFail, invoice: invoice, setIsSaving: setIsSaving }) })));
 };
 
 var fetchPDF = function (window, apiEndpoint, invoiceUuid) { return __awaiter(void 0, void 0, void 0, function () {
@@ -2907,7 +2943,7 @@ function InvoicePDF(_a) {
         }, title: "Invoice PDF", width: "100%" }));
 }
 
-var MUTATION$2 = "\nquery FormattedInvoice($id: ID) {\n  formattedInvoice(id: $id) {\n    amount\n    amountDue\n    amountPaid\n    billingCity\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    createdAt\n    credits\n    currency\n    currencyId\n    currencySymbol\n    customerBillingCity\n    customerBillingContact\n    customerBillingCountry\n    customerBillingState\n    customerBillingStreet\n    customerBillingZip\n    customerName\n    dueAt\n    html\n    id\n    isLegacy\n    netPaymentDays\n    number\n    payableId\n    poNumber\n    printedState\n    smallUnitAmountDue\n    state\n    subscriptionEndDate\n    subscriptionStartDate\n    subtotal\n    taxAmount\n    taxNumber\n    uuid\n    vendorName\n    formattedLines {\n      amount\n      billingPeriodEnd\n      billingPeriodStart\n      chargeType\n      discount\n      frequency\n      lineText\n      position\n      price\n      priceDecimals\n      priceListChargeId\n      priceListChargeName\n      priceListName\n      prorationRate\n      quantity\n      unitOfMeasure\n      priceTiers {\n        price\n        starts\n      }\n    }\n  }\n}";
+var MUTATION$6 = "\nquery FormattedInvoice($id: ID) {\n  formattedInvoice(id: $id) {\n    amount\n    amountDue\n    amountPaid\n    billingCity\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    createdAt\n    credits\n    currency\n    currencyId\n    currencySymbol\n    customerBillingCity\n    customerBillingContact\n    customerBillingCountry\n    customerBillingState\n    customerBillingStreet\n    customerBillingZip\n    customerName\n    dueAt\n    html\n    id\n    isLegacy\n    netPaymentDays\n    number\n    payableId\n    poNumber\n    printedState\n    smallUnitAmountDue\n    state\n    subscriptionEndDate\n    subscriptionStartDate\n    subtotal\n    taxAmount\n    taxNumber\n    uuid\n    vendorName\n    formattedLines {\n      amount\n      billingPeriodEnd\n      billingPeriodStart\n      chargeType\n      discount\n      frequency\n      lineText\n      position\n      price\n      priceDecimals\n      priceListChargeId\n      priceListChargeName\n      priceListName\n      prorationRate\n      quantity\n      unitOfMeasure\n      priceTiers {\n        price\n        starts\n      }\n    }\n  }\n}";
 var getFormattedInvoice = function (_a) {
     var id = _a.id, token = _a.token, subdomain = _a.subdomain;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -2917,7 +2953,7 @@ var getFormattedInvoice = function (_a) {
                 case 0:
                     vars = { id: id };
                     return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$2,
+                            query: MUTATION$6,
                             token: token,
                             vars: vars,
                             subdomain: subdomain,
@@ -2973,7 +3009,7 @@ function ActualInvoice(_a) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(reactHelmetAsync.Helmet, { children: [jsxRuntime.jsxs("title", { children: [formattedInvoice.vendorName, " ", common.DOCUMENT_NAME.INVOICE] }), jsxRuntime.jsx("meta", { name: "description", content: common.QuoteInvoiceUtils.quoteMetaDescription(formattedInvoice.vendorName) }), jsxRuntime.jsx("meta", { property: "og:type", content: "website" }), jsxRuntime.jsx("meta", { property: "og:title", content: common.QuoteInvoiceUtils.quoteMetaTitle({
                             vendorName: formattedInvoice.vendorName,
                             documentName: common.DOCUMENT_NAME.INVOICE,
-                        }) }), jsxRuntime.jsx("meta", { property: "og:description", content: common.QuoteInvoiceUtils.quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full bg-red-500" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, subdomain: subdomain }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, isMobile: isMobile, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), !isMobile && isInvoicePayable && (jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" })), isInvoicePayable && (jsxRuntime.jsx(InvoiceCheckout, { invoice: formattedInvoice, isSaving: isSaving, onFail: function (error) {
+                        }) }), jsxRuntime.jsx("meta", { property: "og:description", content: common.QuoteInvoiceUtils.quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, subdomain: subdomain }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, isMobile: isMobile, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), !isMobile && isInvoicePayable && (jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" })), isInvoicePayable && (jsxRuntime.jsx(InvoiceCheckout, { invoice: formattedInvoice, isSaving: isSaving, onFail: function (error) {
                             onFail(error);
                             setIsSaving(false);
                         }, onSuccess: onSuccess, setIsSaving: setIsSaving }))] }))] }));
@@ -2983,8 +3019,6 @@ function Invoice(_a) {
     return (jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(ActualInvoice, { id: id, invoiceQuoteViewComponent: invoiceQuoteViewComponent, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick, onPaymentSuccess: onPaymentSuccess }) }));
 }
 
-var QuoteContext = React.createContext({});
-
 var DOCUMENT_NAME;
 (function (DOCUMENT_NAME) {
     DOCUMENT_NAME["INVOICE"] = "invoice";
@@ -3110,7 +3144,7 @@ var useSigningComplete = function (_a) {
     var queryClient = reactQuery.useQueryClient();
     var searchParams = React.useContext(NavigationContext).searchParams;
     // Check for return param from docusign and show cosmetic quote acceptance
-    var eventParam = searchParams.get("event");
+    var eventParam = searchParams ? searchParams.get("event") : null;
     React.useEffect(function () {
         if (data && eventParam === "signing_complete") {
             data.state = "ACCEPTED";
@@ -3194,8 +3228,6 @@ var PandadocPollingModal = function (_a) {
                     handleAllErrorFormats(rsp.errors);
                 else if (rsp.data.quotePollSigningUrl.status === "document.sent") {
                     setVisible(false);
-                    console.log("rsp", rsp);
-                    console.log("rsp.data.quotePollSigningUrl.redirectUri", rsp.data.quotePollSigningUrl.redirectUri);
                     window.location.href = rsp.data.quotePollSigningUrl.redirectUri;
                 }
                 setInfoMessage(rsp.data.quotePollSigningUrl.infoMessage || "");
@@ -3215,55 +3247,42 @@ var PandadocPollingModal = function (_a) {
     return (jsxRuntime.jsxs(antd.Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxRuntime.jsxs("div", __assign({ className: "py-4 text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsxRuntime.jsx("div", __assign({ className: "text-center" }, { children: infoMessage }))] })));
 };
 
-var formattedQuoteMutation = function () { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
-var getFormattedQuote = function (token, apiEndpoint, id) { return __awaiter(void 0, void 0, void 0, function () {
-    var response, _a, data, errors, formattedLines, decimals;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
-            case 0: return [4 /*yield*/, fetch(apiEndpoint + "/graphql", {
-                    method: "POST",
-                    headers: {
-                        "Content-type": "application/json; charset=utf-8",
-                        Authorization: "Bearer ".concat(token),
-                    },
-                    body: JSON.stringify({
-                        query: formattedQuoteMutation(),
-                        variables: {
-                            id: id,
-                        },
-                    }),
-                })];
-            case 1:
-                response = _b.sent();
-                return [4 /*yield*/, response.json()];
-            case 2:
-                _a = _b.sent(), data = _a.data, errors = _a.errors;
-                if (errors) {
-                    throw new Error(errors[0].message);
-                }
-                formattedLines = data.formattedQuote.formattedLines;
-                decimals = Math.max.apply(Math, formattedLines.map(function (x) { return x.priceDecimals; }));
-                formattedLines.forEach(function (line) {
-                    line.priceDecimals = decimals;
-                });
-                return [2 /*return*/, data === null || data === void 0 ? void 0 : data.formattedQuote];
-        }
+var MUTATION$5 = "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }";
+var getFormattedQuote = function (_a) {
+    var id = _a.id, token = _a.token, subdomain = _a.subdomain;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    vars = { id: id };
+                    return [4 /*yield*/, common.gqlRequest({
+                            query: MUTATION$5,
+                            token: token,
+                            vars: vars,
+                            subdomain: subdomain,
+                        })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
+            }
+        });
     });
-}); };
+};
 
 var documentName = DOCUMENT_NAME.QUOTE;
-function ActualQuote() {
-    var _a, _b;
-    var id = React.useContext(QuoteContext).id;
-    var _c = React.useContext(BunnyContext), token = _c.token, subdomain = _c.subdomain;
+function ActualQuote(_a) {
+    var _b, _c;
+    var id = _a.id;
+    var _d = React.useContext(BunnyContext), token = _d.token, subdomain = _d.subdomain;
     var entityBranding = React.useContext(BrandContext);
     var isMobile = common.useIsMobile();
     // Queries
-    var data = reactQuery.useQuery({
+    var _e = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createQuoteKey(token),
-        queryFn: function () { return getFormattedQuote(token, subdomain, id); },
+        queryFn: function () { return getFormattedQuote({ token: token, subdomain: subdomain, id: id }); },
         placeholderData: reactQuery.keepPreviousData,
-    }).data;
+    }), data = _e.data; _e.isLoading; _e.isError; _e.error;
     reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.currentUserKey,
         queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
@@ -3272,7 +3291,7 @@ function ActualQuote() {
     // Hooks
     var downloadFile = common.useDownloadFile(id);
     var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
-    var _d = useSendAcceptQuote(token, subdomain, id), acceptBoxVisible = _d.acceptBoxVisible, isAccepting = _d.isAccepting, sendAccept = _d.sendAccept, setAcceptBoxVisible = _d.setAcceptBoxVisible, setIsAccepting = _d.setIsAccepting, startAcceptance = _d.startAcceptance, pandadocPollingModalVisible = _d.pandadocPollingModalVisible, setPandadocPollingModalVisible = _d.setPandadocPollingModalVisible;
+    var _f = useSendAcceptQuote(token, subdomain, id), acceptBoxVisible = _f.acceptBoxVisible, isAccepting = _f.isAccepting, sendAccept = _f.sendAccept, setAcceptBoxVisible = _f.setAcceptBoxVisible, setIsAccepting = _f.setIsAccepting, startAcceptance = _f.startAcceptance, pandadocPollingModalVisible = _f.pandadocPollingModalVisible, setPandadocPollingModalVisible = _f.setPandadocPollingModalVisible;
     useSigningComplete({ data: formattedQuote, token: token });
     if (!formattedQuote) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -3282,25 +3301,30 @@ function ActualQuote() {
                             documentName: documentName,
                         }) }), jsxRuntime.jsx("meta", { property: "og:description", content: common.QuoteInvoiceUtils.quoteMetaDescription(formattedQuote.vendorName) })] }), jsxRuntime.jsxs("div", __assign({ className: "flex shadow-padding-x ".concat(isMobile ? "flex-col gap-1" : "items-center gap-2", " justify-end pb-4"), id: "acceptance", style: {
                     color: entityBranding.secondaryColor,
-                } }, { children: [(formattedQuote.state === "ACCEPTED" ||
-                        formattedQuote.state === "APPLIED") && (jsxRuntime.jsxs("div", { children: [formattedQuote.state === "ACCEPTED" &&
+                } }, { children: [formattedQuote.state === "ACCEPTED" ||
+                        formattedQuote.state === "APPLIED" ? (jsxRuntime.jsxs("div", { children: [formattedQuote.state === "ACCEPTED" &&
                                 formattedQuote.acceptedAt &&
                                 "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.Misc.formatDate(formattedQuote.acceptedAt)), formattedQuote.state === "APPLIED" &&
                                 formattedQuote.acceptedAt &&
-                                "Quote is now applied. Accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.Misc.formatDate(formattedQuote.acceptedAt))] })), jsxRuntime.jsxs("div", __assign({ className: isMobile
+                                "Quote is now applied. Accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.Misc.formatDate(formattedQuote.acceptedAt))] })) : null, jsxRuntime.jsxs("div", __assign({ className: isMobile
                             ? "flex w-full justify-between gap-2"
-                            : "flex items-center justify-end gap-2" }, { children: [!isMobile && (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(DownloadOutlined$1, {}), onClick: function () { return downloadFile(subdomain + "/api/pdf/quote", token); } }, { children: "Download" }))), formattedQuote.state !== "ACCEPTED" &&
-                                formattedQuote.state !== "APPLIED" && (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" })))] }))] })), jsxRuntime.jsx("div", __assign({ className: "flex ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, isMobile: isMobile }, { children: ((_b = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.length) > 0 && (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+                            : "flex items-center justify-end gap-2" }, { children: [!isMobile ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(DownloadOutlined$1, {}), onClick: function () { return downloadFile(subdomain + "/api/pdf/quote", token); } }, { children: "Download" }))) : null, formattedQuote.state !== "ACCEPTED" &&
+                                formattedQuote.state !== "APPLIED" ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] }))] })), jsxRuntime.jsx("div", __assign({ className: "flex ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, isMobile: isMobile }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
                             return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
-                        }) }))) })) })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
+                        }) }))) : null })) })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
 styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
     var id = _a.id;
-    return (jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(QuoteContext.Provider, __assign({ value: { id: id } }, { children: jsxRuntime.jsx(ActualQuote, {}) })) }));
+    return (jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(ActualQuote, { id: id }) }));
 }
 var templateObject_1$5;
 
+var DrawerHeader = function (_a) {
+    var description = _a.description, onClose = _a.onClose, title = _a.title;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-xl" }, { children: title })), jsxRuntime.jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsxRuntime.jsx(CloseOutlined$1, {}) }))] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+};
+
 var LargeCardIcon = function () {
     return (jsxRuntime.jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
 };
@@ -3312,11 +3336,15 @@ var PlusIcon = function (_a) {
 
 var PaymentMethodContext = React.createContext({});
 
-// TODO: remove this eventually
-var Card$1 = function (_a) {
-    var children = _a.children, className = _a.className;
-    return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col bg-white rounded-md shadow-md ".concat(className) }, { children: children })));
+var Card = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style;
+    var darkMode = React.useContext(BunnyContext).darkMode;
+    return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col rounded-md shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
+                ? "var(--row-background-dark)"
+                : "var(--row-background)" }) }, { children: children })));
 };
+
+var Text$b = antd.Typography.Text;
 var CreditCard = function (_a) {
     var _b, _c, _d;
     var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData;
@@ -3327,11 +3355,11 @@ var CreditCard = function (_a) {
     };
     var isMobile = common.useIsMobile();
     var processPublicUrl = React.useContext(PaymentMethodContext).processPublicUrl;
-    return (jsxRuntime.jsxs(Card$1, __assign({ className: "shadow-md m-0" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [getCardImage((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) && (jsxRuntime.jsx("img", { alt: "Card", width: "24px", src: "".concat(processPublicUrl, "/").concat(getCardImage((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.issuer)) })), jsxRuntime.jsx("div", { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
+    return (jsxRuntime.jsxs(Card, __assign({ className: "shadow-md m-0" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [getCardImage((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) && (jsxRuntime.jsx("img", { alt: "Card", width: "24px", src: "".concat(processPublicUrl, "/").concat(getCardImage((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.issuer)) })), jsxRuntime.jsx(Text$b, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
 };
 var CardAttribute = function (_a) {
     var title = _a.title, value = _a.value;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx("div", { children: value })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$b, { children: value })] })));
 };
 var CardActions = function (_a) {
     var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
@@ -3350,14 +3378,9 @@ var getCardImage = function (issuer) {
         return "mc_symbol_opt_73_3x.png";
 };
 
-var DrawerHeader = function (_a) {
-    var description = _a.description, onClose = _a.onClose, title = _a.title;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-xl" }, { children: title })), jsxRuntime.jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsxRuntime.jsx(CloseOutlined$1, {}) }))] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
-};
-
 var ActualPaymentMethod = function () {
-    var _a = React.useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain, graphQLClient = _a.graphQLClient, accountId = _a.accountId;
-    var footer = React.useContext(PaymentMethodContext).footer;
+    var _a = React.useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain, graphQLClient = _a.graphQLClient;
+    var accountId = React.useContext(PaymentContext).accountId;
     // Hooks
     var queryClient = reactQuery.useQueryClient();
     var paymentPlugins = common.usePaymentPlugins({ subdomain: subdomain, token: token }).paymentPlugins;
@@ -3407,7 +3430,7 @@ var ActualPaymentMethod = function () {
     };
     if (data === undefined)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [data ? (jsxRuntime.jsx(CreditCard, { onClickRemove: onClickRemove, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data })) : (jsxRuntime.jsx(EmptyCard, { onClick: function () { return setShowModal(true); } })), footer, jsxRuntime.jsx(antd.Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [data ? (jsxRuntime.jsx(CreditCard, { onClickRemove: onClickRemove, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data })) : (jsxRuntime.jsx(EmptyCard, { onClick: function () { return setShowModal(true); } })), jsxRuntime.jsx(antd.Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
                     body: isMobile
                         ? {
                             padding: "1rem 0 0",
@@ -3427,7 +3450,7 @@ function PaymentMethod(_a) {
     return (jsxRuntime.jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsxRuntime.jsx(ActualPaymentMethod, {}) })));
 }
 
-var MUTATION$1 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account { id }\n        errors\n      }\n  }\n";
+var MUTATION$4 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account { id }\n        errors\n      }\n  }\n";
 var accountUpdate = function (_a) {
     var accountId = _a.accountId, attributes = _a.attributes, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -3437,7 +3460,7 @@ var accountUpdate = function (_a) {
             switch (_c.label) {
                 case 0:
                     vars = { id: accountId, attributes: attributes };
-                    return [4 /*yield*/, common.gqlRequest({ query: MUTATION$1, token: token, vars: vars })];
+                    return [4 /*yield*/, common.gqlRequest({ query: MUTATION$4, token: token, vars: vars })];
                 case 1:
                     response = _c.sent();
                     errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
@@ -3501,6 +3524,8 @@ var QuoteCheckout = function (_a) {
     var checkoutMutation = reactQuery.useMutation({
         mutationFn: function (_a) {
             var pluginPaymentMethod = _a.pluginPaymentMethod, savedPaymentMethod = _a.storedPaymentMethod;
+            if (!quote)
+                throw new Error("Quote is required");
             if (!paymentRequired)
                 return checkout({ quoteId: quote.id, token: token, subdomain: subdomain });
             if (savedPaymentMethod) {
@@ -3703,6 +3728,280 @@ var Checkout = function (_a) {
                             }, setIsSaving: setIsSaving }))] }))] })) })));
 };
 
+var MUTATION$3 = function () { return "\nmutation AccountSignup (\n  $entityId: ID!,\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!\n) {\n  accountSignup(\n    entityId: $entityId,\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
+var accountSignup = function (_a) {
+    var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = {
+                        entityId: entityId,
+                        accountId: accountId,
+                        quoteId: quoteId,
+                        paymentToken: paymentToken,
+                        pluginId: pluginId,
+                        paymentMethodId: paymentMethodId,
+                        priceListCode: priceListCode,
+                    };
+                    return [4 /*yield*/, common.gqlRequest({
+                            query: MUTATION$3(),
+                            token: token,
+                            vars: vars,
+                            subdomain: subdomain,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountSignup) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.accountSignup];
+            }
+        });
+    });
+};
+
+var MUTATION$2 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $entityId: ID!,\n  $priceListCode: String!\n) {\n  quoteAccountSignup(\n    entityId: $entityId,\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact\n  ) {\n    account {\n      id\n    }\n    amount\n    currencyId\n    quoteId\n    errors\n  }\n}"; };
+var quoteAccountSignup = function (_a) {
+    var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = {
+                        entityId: entityId,
+                        priceListCode: priceListCode,
+                        accountName: accountName,
+                        billingContact: billingContact,
+                    };
+                    return [4 /*yield*/, common.gqlRequest({
+                            query: MUTATION$2(),
+                            token: token,
+                            vars: vars,
+                            subdomain: subdomain,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccountSignup) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quoteAccountSignup];
+            }
+        });
+    });
+};
+
+var MUTATION$1 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
+var getPriceList = function (_a) {
+    var token = _a.token, code = _a.code, subdomain = _a.subdomain;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, common.gqlRequest({
+                        query: MUTATION$1(),
+                        token: token,
+                        vars: { code: code },
+                        subdomain: subdomain,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.priceList];
+            }
+        });
+    });
+};
+
+function PaymentForms(_a) {
+    var quote = _a.quote, paying = _a.paying, setIsPaying = _a.setIsPaying, handlePaymentSaveSuccess = _a.handlePaymentSaveSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: accountId && (jsxRuntime.jsx(PaymentContext.Provider, __assign({ value: { accountId: accountId, displayPayButtonNameAnyways: true } }, { children: jsxRuntime.jsx(PaymentForm, { isSaving: paying, setIsSaving: setIsPaying, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess }) }))) })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+}
+function InitialSignupForm(_a) {
+    var onSubmit = _a.onSubmit, submitting = _a.submitting;
+    var _b = React.useState({
+        firstName: "",
+        lastName: "",
+        email: "",
+        accountName: "",
+    }), formData = _b[0], setFormData = _b[1];
+    var handleInputChange = function (e) {
+        var _a;
+        var _b = e.target, name = _b.name, value = _b.value;
+        setFormData(__assign(__assign({}, formData), (_a = {}, _a[name] = value, _a)));
+    };
+    return (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex w-1/2 flex-col justify-between h-full", onFinish: function () { return onSubmit(formData); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [{ required: true, message: "Please input your first name!" }], initialValue: formData.firstName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name", value: formData.firstName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { firstName: e.target.value }));
+                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [{ required: true, message: "Please input your last name!" }], initialValue: formData.lastName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name", value: formData.lastName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { lastName: e.target.value }));
+                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [
+                            { required: true, message: "Please input your email!" },
+                            { type: "email", message: "Please enter a valid email!" },
+                        ], initialValue: formData.email }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email", value: formData.email, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { email: e.target.value }));
+                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [
+                            { required: true, message: "Please input your account name!" },
+                        ], initialValue: formData.accountName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Account name", value: formData.accountName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { accountName: e.target.value }));
+                            } }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
+}
+
+var Title = antd.Typography.Title, Text$a = antd.Typography.Text;
+function PaymentSuccessDisplay(_a) {
+    var className = _a.className, amountPaid = _a.amountPaid, style = _a.style, returnUrl = _a.returnUrl;
+    var window = React.useContext(BunnyContext).window;
+    var companyName = common.useCurrentUserData().companyName;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.Misc.formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$a, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+}
+
+var Text$9 = antd.Typography.Text;
+function PriceListDisplay(_a) {
+    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
+    if (!priceListData)
+        return null;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$9, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$9, __assign({ className: "font-bold text-xl" }, { children: [common.Misc.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$9, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$9, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))] })) })) }));
+}
+
+var BunnyFooterIcon = function (_a) {
+    var color = _a.color;
+    return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.jsx("path", { className: "icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
+};
+
+var Footer = function (_a) {
+    var className = _a.className;
+    var _b = common.useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
+    var window = React.useContext(BunnyContext).window;
+    var isMobile = useIsMobile(window);
+    var quotePreviewData = recoil.useRecoilValue(planPickerQuoteDataState);
+    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
+    if (selectedPriceList && isMobile)
+        return null;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(className, " ").concat(isMobile ? "flex-col gap-2 grow" : "") }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
+};
+var BunnyMarketingLink = function () {
+    var _a = React.useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var window = React.useContext(BunnyContext).window;
+    var isMobile = useIsMobile(window);
+    return (jsxRuntime.jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsxRuntime.jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
+};
+var StyedLink = styled__default["default"].a(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"])), common.SLATE_400, common.SLATE_500);
+var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), common.PRIMARY_COLOR);
+var templateObject_1$4, templateObject_2;
+
+var showErrorNotification = common.NotificationUtils.useErrorNotification();
+function Signup(_a) {
+    var priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
+    // Hooks
+    var _b = React.useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token, window = _b.window;
+    reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.currentUserKey,
+        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
+    });
+    var isMobile = useIsMobile(window);
+    var topNavImageUrl = React.useContext(BrandContext).topNavImageUrl;
+    var entityId = common.useCurrentUserData().entityId;
+    var _c = React.useState(undefined), quote = _c[0], setQuote = _c[1];
+    var _d = React.useState(undefined), accountId = _d[0], setAccountId = _d[1];
+    var _e = React.useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
+    var _f = React.useState(undefined), formData = _f[0], setFormData = _f[1];
+    var _g = React.useState(false), proceedingToPayment = _g[0], setProceedingToPayment = _g[1];
+    var _h = React.useState(false), paying = _h[0], setIsPaying = _h[1];
+    var _j = React.useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
+    // Queries
+    var priceListData = reactQuery.useQuery({
+        queryKey: ["priceList", priceListCode],
+        queryFn: function () { return getPriceList({ token: token, subdomain: subdomain, code: priceListCode }); },
+    }).data;
+    function handleSubmit(formData) {
+        return __awaiter(this, void 0, void 0, function () {
+            var data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setProceedingToPayment(true);
+                        setFormData(formData);
+                        return [4 /*yield*/, quoteAccountSignup({
+                                token: token,
+                                subdomain: subdomain,
+                                entityId: entityId,
+                                priceListCode: priceListCode,
+                                accountName: formData.accountName,
+                                billingContact: {
+                                    firstName: formData.firstName,
+                                    lastName: formData.lastName,
+                                    email: formData.email,
+                                },
+                            })];
+                    case 1:
+                        data = _a.sent();
+                        setAccountId(data.account.id);
+                        setQuoteId(data.quoteId);
+                        setProceedingToPayment(false);
+                        setQuote({
+                            amountDue: data.amount,
+                            currencyId: data.currencyId,
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function handlePaymentSaveSuccess(paymentSuccess) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var response, plugin;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!formData) {
+                            throw new Error("Form data is required");
+                        }
+                        response = paymentSuccess.pluginPaymentResponse;
+                        plugin = response === null || response === void 0 ? void 0 : response.plugin;
+                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                            throw new Error("Plugin ID is required");
+                        }
+                        if (!accountId) {
+                            throw new Error("Account ID is required");
+                        }
+                        return [4 /*yield*/, accountSignup({
+                                token: token,
+                                subdomain: subdomain,
+                                entityId: entityId,
+                                quoteId: quoteId,
+                                paymentMethodId: (_a = paymentSuccess.savedPaymentMethodResponse) === null || _a === void 0 ? void 0 : _a.paymentMethodId.toString(),
+                                pluginId: plugin.id.toString(),
+                                priceListCode: priceListCode,
+                                accountId: accountId,
+                            })];
+                    case 1:
+                        _b.sent();
+                        setIsPaying(false);
+                        setPurchaseSucceeded(true);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function handlePaymentFail(error) {
+        showErrorNotification(error.message);
+        setIsPaying(false);
+    }
+    if (isMobile) {
+        return (jsxRuntime.jsx(Card, __assign({ className: "p-4 flex flex-col" }, { children: purchaseSucceeded ? (jsxRuntime.jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center" }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "mx-8" }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full" }) })), jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center my-12" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })));
+    }
+    else {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Card, __assign({ className: "p-4 flex flex-col w-screen h-screen" }, { children: purchaseSucceeded ? (jsxRuntime.jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col w-1/2 items-center" }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "my-4" }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex w-1/2 items-center justify-center my-12" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })), jsxRuntime.jsx(Footer, {})] }));
+    }
+}
+
 var StateTag = function (_a) {
     var state = _a.state;
     return jsxRuntime.jsx(antd.Tag, __assign({ color: getColor(state) }, { children: lodash.capitalize(lodash.startCase(state)) }));
@@ -3737,12 +4036,13 @@ var TransactionGridCell = styled__default["default"].div.withConfig({
     shouldForwardProp: function (prop) {
         return !["gridColumn", "padding", "right"].includes(prop);
     },
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) { return (props.right ? "flex-end" : "flex-start"); }, function (props) { return (props.right ? "right" : "left"); }, common.SLATE_600);
-var templateObject_1$4;
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) { return (props.right ? "flex-end" : "flex-start"); }, function (props) { return (props.right ? "right" : "left"); }, common.SLATE_600);
+var templateObject_1$3;
 
+var Text$8 = antd.Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsxRuntime.jsx("div", { children: common.Misc.formatDate(date) });
+    return jsxRuntime.jsx(Text$8, __assign({ className: "text-sm" }, { children: common.Misc.formatDate(date) }));
 };
 
 var isInvoice = function (transaction) {
@@ -3757,8 +4057,15 @@ var TransactionRowTitle = function (_a) {
     return (jsxRuntime.jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: invoice.number })));
 };
 
+// TODO: delete
+var ArrowDownToLine = function (_a) {
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? common.SLATE_600 : _b;
+    return (jsxRuntime.jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+};
+
 var TransactionDownload = function (_a) {
     var transaction = _a.transaction, token = _a.token, subdomain = _a.subdomain;
+    var darkMode = React.useContext(BunnyContext).darkMode;
     var downloadFile = common.useDownloadFile();
     var isMobile = common.useIsMobile();
     var isClickable = transaction.kind === "INVOICE";
@@ -3767,11 +4074,12 @@ var TransactionDownload = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ onClick: function (e) {
             e.stopPropagation();
             downloadFile("".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId), token);
-        } }, { children: jsxRuntime.jsx(common.ArrowDownToLine, { className: isMobile ? "" : "show-on-hover" }) })));
+        } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
 };
 
+var Text$7 = antd.Typography.Text;
 var TransactionsEmptyState = function () {
-    return (jsxRuntime.jsx("div", __assign({ className: "flex justify-center p-4 text-base" }, { children: "There are no invoices" })));
+    return (jsxRuntime.jsx(Text$7, __assign({ className: "flex justify-center p-4 text-base" }, { children: "There are no invoices" })));
 };
 
 var TransactionsListContext = React.createContext({});
@@ -3835,10 +4143,11 @@ var useGraphQLRequest = function () { return function (query, token, variables)
     });
 }); }; };
 
+var Text$6 = antd.Typography.Text;
 var TransactionsListDesktop = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var columns = React.useContext(TransactionsListContext).columns;
-    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
     var showAmount = columns.includes("amount");
     var showDateAndTitle = columns.includes("date-and-title");
     var showDownload = columns.includes("download");
@@ -3850,15 +4159,18 @@ var TransactionsListDesktop = function (_a) {
         return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
                 onTransactionClick(transaction);
             }, style: {
-                backgroundColor: index % 2 === 0 ? "white" : "rgba(100, 116, 139, 0.04)",
-            } }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt }) })), jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx("div", { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: common.Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) })))] }), index));
+                backgroundColor: index % 2 === 0
+                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+            } }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt }) })), jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$6, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$6, { children: common.Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }) })))] }), index));
     });
 };
 
+var Text$5 = antd.Typography.Text;
 var TransactionsListMobile = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var columns = React.useContext(TransactionsListContext).columns;
-    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
     var showAmount = columns.includes("amount");
     var showDateAndTitle = columns.includes("date-and-title");
     var showDownload = columns.includes("download");
@@ -3870,8 +4182,10 @@ var TransactionsListMobile = function (_a) {
         return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
                 onTransactionClick(transaction);
             }, style: {
-                backgroundColor: index % 2 === 0 ? "white" : "rgba(100, 116, 139, 0.04)",
-            } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsxRuntime.jsx("div", { children: "\u00B7" }), showAmount && (jsxRuntime.jsx("div", { children: common.Misc.formatCurrency(transaction.transactionable.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
+                backgroundColor: index % 2 === 0
+                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+            } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$5, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsxRuntime.jsx(Text$5, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$5, { children: common.Misc.formatCurrency(transaction.transactionable.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
     });
 };
 
@@ -3893,6 +4207,7 @@ var getTransactions = function (filter, token, subdomain, kindsToShow) { return
                 })];
             case 1:
                 response = _d.sent();
+                console.log("response", response);
                 return [4 /*yield*/, response.json()];
             case 2:
                 _a = _d.sent(), data = _a.data, errors = _a.errors;
@@ -3920,6 +4235,7 @@ var PageContent = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
 };
 
+var Text$4 = antd.Typography.Text;
 var PageHeaderWithActions = function (_a) {
     var children = _a.children, title = _a.title;
     var isMobile = common.useIsMobile();
@@ -3928,11 +4244,12 @@ var PageHeaderWithActions = function (_a) {
 var PageSubTitle = function (_a) {
     var title = _a.title;
     var secondaryColor = React.useContext(BrandContext).secondaryColor;
-    return (jsxRuntime.jsx("div", __assign({ className: "shrink-0 font-medium", style: { color: secondaryColor } }, { children: title })));
+    var darkMode = React.useContext(BunnyContext).darkMode;
+    return (jsxRuntime.jsx(Text$4, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
 };
 
 function ActualTransactions() {
-    var _a = React.useContext(TransactionsListContext), showSearchBar = _a.showSearchBar, showTitle = _a.showTitle, transactionComponent = _a.transactionComponent, useModal = _a.useModal, onTransactionClick = _a.onTransactionClick, suppressTransactionDisplay = _a.suppressTransactionDisplay, kindsToShow = _a.kindsToShow, className = _a.className, shadow = _a.shadow, searchBarClassName = _a.searchBarClassName;
+    var _a = React.useContext(TransactionsListContext), showSearchBar = _a.showSearchBar, showTitle = _a.showTitle, transactionComponent = _a.transactionComponent, useModal = _a.useModal, onTransactionClick = _a.onTransactionClick, suppressTransactionDisplay = _a.suppressTransactionDisplay, kindsToShow = _a.kindsToShow, className = _a.className, shadow = _a.shadow; _a.searchBarClassName; var style = _a.style;
     // Context
     var columns = React.useContext(TransactionsListContext).columns;
     var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
@@ -3993,16 +4310,26 @@ function ActualTransactions() {
         }
         return templateColumns.join(" ");
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: showTitle ? "Past transactions" : undefined }, { children: showSearchBar && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
-                            ? searchBarClassName
-                            : "bg-white border border-slate-200", onChange: function (e) {
+    return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: showTitle ? "Past transactions" : undefined }, { children: showSearchBar && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Input
+                    // className={
+                    //   searchBarClassName
+                    //     ? searchBarClassName
+                    //     : "border border-slate-200"
+                    // }
+                    , { 
+                        // className={
+                        //   searchBarClassName
+                        //     ? searchBarClassName
+                        //     : "border border-slate-200"
+                        // }
+                        onChange: function (e) {
                             if (isNaN(Number(e.target.value))) {
                                 return;
                             }
                             setSearch(e.target.value);
                         }, prefix: jsxRuntime.jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
                             minWidth: "300px",
-                        }, value: search }) })) })), jsxRuntime.jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsxRuntime.jsx("div", __assign({ className: "grid w-full bg-white rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
+                        }, value: search }) })) })), jsxRuntime.jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsxRuntime.jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
                         gridTemplateColumns: gridTemplateColumns(),
                     } }, { children: isMobile ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListMobile({
                             transactions: transactions,
@@ -4010,7 +4337,7 @@ function ActualTransactions() {
                         }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListDesktop({
                             transactions: transactions,
                             onTransactionClick: handleTransactionClick,
-                        }) })) })) })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: "Invoice", onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsx("div", { children: "Not an invoice, or no transaction selected" })) })))] }));
+                        }) })) })) })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: "Invoice", onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsx("div", { children: "Not an invoice, or no transaction selected" })) })))] })));
 }
 // Create a client
 var queryClient = new reactQuery.QueryClient();
@@ -4020,7 +4347,7 @@ function Transactions(_a) {
         common.TransactionKind.PAYMENT,
         common.TransactionKind.REFUND,
         common.TransactionKind.WRITE_OFF,
-    ] : _h;
+    ] : _h, style = _a.style;
     var contextValues = {
         showSearchBar: showSearchBar,
         showTitle: showTitle,
@@ -4033,6 +4360,7 @@ function Transactions(_a) {
         onTransactionClick: onTransactionClick,
         suppressTransactionDisplay: suppressTransactionDisplay,
         kindsToShow: kindsToShow,
+        style: style,
     };
     return (jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient }, { children: jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(ActualTransactions, {}) })) })));
 }
@@ -4498,29 +4826,7 @@ var ErrorView = function (_a) {
     return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
 };
 
-var BunnyFooterIcon = function (_a) {
-    var color = _a.color;
-    return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.jsx("path", { className: "icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
-};
-
-var Footer = function () {
-    var _a = common.useCurrentUserData(), privacyUrl = _a.privacyUrl, termsUrl = _a.termsUrl;
-    var isMobile = common.useIsMobile();
-    var quotePreviewData = recoil.useRecoilValue(planPickerQuoteDataState);
-    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
-    if (selectedPriceList && isMobile)
-        return null;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(isMobile ? "flex-col gap-2 grow" : "px-12") }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
-};
-var BunnyMarketingLink = function () {
-    var _a = React.useState(false), isHovered = _a[0], setIsHovered = _a[1];
-    var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsxRuntime.jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
-};
-var StyedLink = styled__default["default"].a(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"])), common.SLATE_400, common.SLATE_500);
-var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), common.PRIMARY_COLOR);
-var templateObject_1$3, templateObject_2;
-
+var Text$3 = antd.Typography.Text;
 var HideExpiredToggle = function (_a) {
     var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, subscriptions = _a.subscriptions;
     var isMobile = common.useIsMobile();
@@ -4534,16 +4840,11 @@ var HideExpiredToggle = function (_a) {
         return null;
     return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 pl-4" }, { children: [!isMobile && jsxRuntime.jsx(antd.Divider, { className: "h-5", type: "vertical" }), jsxRuntime.jsx(StyledCheckbox, { children: jsxRuntime.jsx(antd.Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
                         color: secondaryColor,
-                    } }, { children: isMobile ? "Hide inactive" : "Hide inactive subscriptions" })) })] })));
+                    } }, { children: jsxRuntime.jsx(Text$3, { children: isMobile ? "Hide inactive" : "Hide inactive subscriptions" }) })) })] })));
 };
 var StyledCheckbox = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .ant-checkbox-wrapper span {\n    padding-inline-end: 0 !important;\n  }\n"], ["\n  .ant-checkbox-wrapper span {\n    padding-inline-end: 0 !important;\n  }\n"])));
 var templateObject_1$2;
 
-var SubscriptionsListCell = function (_a) {
-    var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
-    return (jsxRuntime.jsx("div", __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
-};
-
 var SubscriptionState;
 (function (SubscriptionState) {
     SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -4554,195 +4855,20 @@ var SubscriptionState;
 })(SubscriptionState || (SubscriptionState = {}));
 var SubscriptionState$1 = SubscriptionState;
 
-var Card = function (_a) {
-    var children = _a.children, className = _a.className;
-    return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col bg-white rounded-md shadow-md ".concat(className) }, { children: children })));
-};
-
-var MUTATION = "\nmutation quoteSubscriptionReinstate($ids: [ID!]!) {\n  quoteSubscriptionReinstate(ids: $ids) {\n    quote {\n      id\n      uuid\n      accountId\n      dealId\n      name\n      amount\n      taxAmount\n      discount\n      netPaymentDays\n      acceptedByName\n      acceptedByTitle\n      state\n      billingDay\n      evergreen\n      requiresApproval\n      isPendingApprovalRequest\n      poNumber\n      kind\n      currencyId\n      ownerId\n      contactId\n      quoteChanges {\n        id\n        priceListId\n        charges {\n          id\n          pricingModel\n          chargeType\n          billingPeriod\n          price\n          priceDecimals\n          tieredAveragePrice\n          quantity\n          quantityMin\n          quantityMax\n          discount\n          amount\n          prorationRate\n          name\n          invoiceLineText\n          createdAt\n          updatedAt\n          startDate\n          endDate\n          billingPeriodAmounts { id amount prorationRate }\n          currencyId\n          couponId\n          feature { id name code isUnit unitName }\n          priceTiers { starts price }\n        }\n      }\n      expiresAt\n      createdAt\n      updatedAt\n      startDate\n      endDate\n      invoiceUntil\n      applicationDate\n      applied\n      endDateOptions {\n        endDate\n        label\n      }\n      invoiceUntilOptions {\n        endDate\n        label\n      }\n      notes\n      message\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      subtotal\n      credits\n      discountValue\n    }\n  }\n}\n";
-var getGuoteSubscriptionReinstate = function (_a) {
-    var ids = _a.ids, token = _a.token, subdomain = _a.subdomain;
+var FEATURE_USAGE_MUTATION = "\nquery GetFeatureUsage($id: ID!) {\n  featureUsageHistogram(subscriptionChargeId: $id) {\n    subscriptionCharge { \n      id\n      name\n      amount\n      currentPeriodPriceByTiers { \n        tier { starts price } \n        quantity\n        amount\n      }\n    }\n    feature { id name }\n    periodRange\n    dataInterval\n    data {\n      periodStart\n      periodEnd\n      intervals {\n        intervalStart\n        intervalUsage\n      }\n      intervalsTotal\n    }\n  }\n}\n";
+var getFeatureUsage = function (_a) {
+    var subscriptionChargeId = _a.subscriptionChargeId; _a.startDate; _a.endDate; _a.dataInterval; var token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, _b, errors, quote;
+        var vars, response;
+        var _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
-                    vars = { ids: ids };
+                    vars = {
+                        id: subscriptionChargeId,
+                    };
                     return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION,
-                            token: token,
-                            vars: vars,
-                            subdomain: subdomain,
-                        })];
-                case 1:
-                    response = _c.sent();
-                    _b = response === null || response === void 0 ? void 0 : response.quoteSubscriptionReinstate, errors = _b.errors, quote = _b.quote;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, quote];
-            }
-        });
-    });
-};
-
-var useCancelSubscription = function () {
-    var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionIds, token) { return __awaiter(void 0, void 0, void 0, function () {
-        var data;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n      subscriptionCancel(ids: $subscriptionIds) {\n        subscriptions {\n          accountId\n          state\n        }\n      }\n    }", token, { subscriptionIds: subscriptionIds })];
-                case 1:
-                    data = _b.sent();
-                    return [2 /*return*/, (_a = data === null || data === void 0 ? void 0 : data.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes];
-            }
-        });
-    }); };
-};
-
-var SubscriptionCardActions = function (_a) {
-    var _b, _c;
-    var planChangeOptions = _a.planChangeOptions, subscription = _a.subscription, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible;
-    // Context
-    var _d = React.useContext(BunnyContext), token = _d.token, subdomain = _d.subdomain;
-    var _e = React.useContext(SubscriptionsContext), onChangePlanClick = _e.onChangePlanClick, onClickUpgrade = _e.onClickUpgrade, isTempViewOnly = _e.isTempViewOnly;
-    // Hooks
-    var showSuccessNotification = common.NotificationUtils.useSuccessNotification();
-    var cancelSubscription = useCancelSubscription();
-    var queryClient = reactQuery.useQueryClient();
-    // const navigate = usePortalNavigate();
-    // const handleUpgradingSubscriptionChange =
-    //   useHandleUpgradingSubscriptionChange();
-    // Derived state
-    var canShowCancelButton = subscription.plan.selfServiceCancel;
-    var productPlans = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.filter(function (plan) { var _a; return ((_a = plan.priceLists) === null || _a === void 0 ? void 0 : _a.length) > 0 && plan.productId === subscription.product.id; });
-    var canShowChangePlanButton = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
-    // Mutations
-    var subscriptionCancel = reactQuery.useMutation({
-        mutationFn: function () { return cancelSubscription([subscription.id], token); },
-        onSuccess: function () {
-            queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.createTableKey("subscriptions"),
-            });
-            showSuccessNotification("Subscription canceled");
-        },
-    });
-    reactQuery.useMutation({
-        mutationFn: function () {
-            return getGuoteSubscriptionReinstate({
-                ids: [subscription.id],
-                token: token,
-                subdomain: subdomain,
-            });
-        },
-        onSuccess: function (quote) {
-            setEditingQuoteData({ id: quote.id, isTrial: false });
-            setPayModalVisible(true);
-        },
-    });
-    // Handlers
-    var handleChangePlanClick = function () {
-        // handleUpgradingSubscriptionChange({
-        //   subscription,
-        // });
-        console.log("handleChangePlanClick handleUpgradingSubscriptionChange not implemented");
-        // navigate("plan-manager", {
-        //   subscriptionUpgradeId: subscription.id,
-        // });
-        onChangePlanClick();
-    };
-    return (canShowChangePlanButton || canShowCancelButton) &&
-        canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isTempViewOnly && canShowCancelButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return subscriptionCancel.mutate(); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), !isTempViewOnly && canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return handleChangePlanClick(); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isTempViewOnly && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
-                // handleUpgradingSubscriptionChange({
-                //   subscription,
-                // });
-                console.log("onClickUpgrade handleUpgradingSubscriptionChange not implemented");
-                // navigate("plan-manager", {
-                //   subscriptionUpgradeId: subscription.id,
-                // });
-                onClickUpgrade();
-            }, type: "primary" }, { children: "Upgrade" }))) })) : null;
-};
-
-var getSubscriptionStatusText = function (subscription) {
-    var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
-    if (cancellationDate &&
-        (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.CANCELED &&
-        (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.EXPIRED) {
-        return (jsxRuntime.jsxs(antd.Tag, __assign({ color: "red" }, { children: ["Canceled - ends on ", common.Misc.formatDate(cancellationDate)] })));
-    }
-    if (evergreen) {
-        return "Renews on ".concat(common.Misc.formatDate(endDate));
-    }
-    if ((state === null || state === void 0 ? void 0 : state.toUpperCase()) === common.SubscriptionState.CANCELED ||
-        (state === null || state === void 0 ? void 0 : state.toUpperCase()) === common.SubscriptionState.EXPIRED) {
-        return "Ended on ".concat(common.Misc.formatDate(endDate));
-    }
-    return "Ends on ".concat(common.Misc.formatDate(endDate));
-};
-var SubscriptionCardHeader = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscription = _a.subscription;
-    var isMobile = common.useIsMobile();
-    // Derived state
-    var trialDaysLeft = dayjs(subscription.trialEndDate).diff(dayjs(), "days");
-    var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx("div", __assign({ className: "font-medium text-orange-500", style: { fontSize: "11px" } }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx("span", __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(antd.Tag, __assign({ className: "ant-tag-".concat(common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodash.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx("div", __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && (jsxRuntime.jsx(SubscriptionCardActions, { planChangeOptions: planChangeOptions, subscription: subscription, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible }))] }))] })));
-};
-
-var SubscriptionCardColumnHeaders = function (_a) {
-    var columns = _a.columns;
-    return columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx("div", __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); });
-};
-
-var BillingPeriodConverter;
-(function (BillingPeriodConverter) {
-    BillingPeriodConverter["ONCE"] = "once";
-    BillingPeriodConverter["MONTHLY"] = "monthly";
-    BillingPeriodConverter["ANNUAL"] = "annually";
-    BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
-    BillingPeriodConverter["QUARTERLY"] = "quarterly";
-})(BillingPeriodConverter || (BillingPeriodConverter = {}));
-var SubscriptionChargeTotal = function (_a) {
-    var charge = _a.charge, subscription = _a.subscription;
-    var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: [jsxRuntime.jsx("div", { children: common.Misc.formatCurrency(Number(charge.periodPrice), subscription.currencyId) }), charge.billingPeriod && (jsxRuntime.jsx("div", { children: BillingPeriodConverter[charge.billingPeriod] }))] })));
-};
-
-var SubscriptionChargeUnitPrice = function (_a) {
-    var _b, _c;
-    var charge = _a.charge, subscription = _a.subscription;
-    var _d = React.useState(false), showPriceTiers = _d[0], setShowPriceTiers = _d[1];
-    if ((_c = (_b = charge.priceListCharge) === null || _b === void 0 ? void 0 : _b.priceListChargeTiers) === null || _c === void 0 ? void 0 : _c.length) {
-        return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
-                var _a, _b;
-                return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col rounded border border-solid border-slate-200 bg-white p-2" }, { children: jsxRuntime.jsx("div", __assign({ className: "grid grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b.map(function (tier, index) {
-                            var _a, _b, _c, _d, _e;
-                            var ends = ((_c = (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b[index + 1]) === null || _c === void 0 ? void 0 : _c.starts)
-                                ? ((_e = (_d = charge.priceListCharge) === null || _d === void 0 ? void 0 : _d.priceListChargeTiers[index + 1]) === null || _e === void 0 ? void 0 : _e.starts) - 1
-                                : "∞";
-                            return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " ", ":"] })), jsxRuntime.jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: common.Misc.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
-                        }) })) })));
-            }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "hide details" : "show details" })) })));
-    }
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.Misc.formatCurrency(charge.discountedPrice, subscription.currencyId) }));
-};
-
-var FEATURE_USAGE_MUTATION = "\nquery GetFeatureUsage($id: ID!) {\n  featureUsageHistogram(subscriptionChargeId: $id) {\n    subscriptionCharge { \n      id\n      name\n      amount\n      currentPeriodPriceByTiers { \n        tier { starts price } \n        quantity\n        amount\n      }\n    }\n    feature { id name }\n    periodRange\n    dataInterval\n    data {\n      periodStart\n      periodEnd\n      intervals {\n        intervalStart\n        intervalUsage\n      }\n      intervalsTotal\n    }\n  }\n}\n";
-var getFeatureUsage = function (_a) {
-    var subscriptionChargeId = _a.subscriptionChargeId; _a.startDate; _a.endDate; _a.dataInterval; var token = _a.token;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = {
-                        id: subscriptionChargeId,
-                    };
-                    return [4 /*yield*/, common.gqlRequest({
-                            query: FEATURE_USAGE_MUTATION,
+                            query: FEATURE_USAGE_MUTATION,
                             token: token,
                             vars: vars,
                         })];
@@ -4913,6 +5039,191 @@ var FeatureBarChart = function (_a) {
 var StyledBarChart = styled__default["default"](recharts.BarChart)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
 var templateObject_1;
 
+var MUTATION = "\nmutation quoteSubscriptionReinstate($ids: [ID!]!) {\n  quoteSubscriptionReinstate(ids: $ids) {\n    quote {\n      id\n      uuid\n      accountId\n      dealId\n      name\n      amount\n      taxAmount\n      discount\n      netPaymentDays\n      acceptedByName\n      acceptedByTitle\n      state\n      billingDay\n      evergreen\n      requiresApproval\n      isPendingApprovalRequest\n      poNumber\n      kind\n      currencyId\n      ownerId\n      contactId\n      quoteChanges {\n        id\n        priceListId\n        charges {\n          id\n          pricingModel\n          chargeType\n          billingPeriod\n          price\n          priceDecimals\n          tieredAveragePrice\n          quantity\n          quantityMin\n          quantityMax\n          discount\n          amount\n          prorationRate\n          name\n          invoiceLineText\n          createdAt\n          updatedAt\n          startDate\n          endDate\n          billingPeriodAmounts { id amount prorationRate }\n          currencyId\n          couponId\n          feature { id name code isUnit unitName }\n          priceTiers { starts price }\n        }\n      }\n      expiresAt\n      createdAt\n      updatedAt\n      startDate\n      endDate\n      invoiceUntil\n      applicationDate\n      applied\n      endDateOptions {\n        endDate\n        label\n      }\n      invoiceUntilOptions {\n        endDate\n        label\n      }\n      notes\n      message\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      subtotal\n      credits\n      discountValue\n    }\n  }\n}\n";
+var getGuoteSubscriptionReinstate = function (_a) {
+    var ids = _a.ids, token = _a.token, subdomain = _a.subdomain;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, _b, errors, quote;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = { ids: ids };
+                    return [4 /*yield*/, common.gqlRequest({
+                            query: MUTATION,
+                            token: token,
+                            vars: vars,
+                            subdomain: subdomain,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    _b = response === null || response === void 0 ? void 0 : response.quoteSubscriptionReinstate, errors = _b.errors, quote = _b.quote;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, quote];
+            }
+        });
+    });
+};
+
+var useCancelSubscription = function () {
+    var graphQLRequest = useGraphQLRequest();
+    return function (subscriptionIds, token) { return __awaiter(void 0, void 0, void 0, function () {
+        var data;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n      subscriptionCancel(ids: $subscriptionIds) {\n        subscriptions {\n          accountId\n          state\n        }\n      }\n    }", token, { subscriptionIds: subscriptionIds })];
+                case 1:
+                    data = _b.sent();
+                    return [2 /*return*/, (_a = data === null || data === void 0 ? void 0 : data.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes];
+            }
+        });
+    }); };
+};
+
+var SubscriptionCardActions = function (_a) {
+    var _b, _c;
+    var planChangeOptions = _a.planChangeOptions, subscription = _a.subscription, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible;
+    // Context
+    var _d = React.useContext(BunnyContext), token = _d.token, subdomain = _d.subdomain;
+    var _e = React.useContext(SubscriptionsContext), onChangePlanClick = _e.onChangePlanClick, onClickUpgrade = _e.onClickUpgrade, isTempViewOnly = _e.isTempViewOnly;
+    // Hooks
+    var showSuccessNotification = common.NotificationUtils.useSuccessNotification();
+    var cancelSubscription = useCancelSubscription();
+    var queryClient = reactQuery.useQueryClient();
+    // const navigate = usePortalNavigate();
+    // const handleUpgradingSubscriptionChange =
+    //   useHandleUpgradingSubscriptionChange();
+    // Derived state
+    var canShowCancelButton = subscription.plan.selfServiceCancel;
+    var productPlans = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.filter(function (plan) { var _a; return ((_a = plan.priceLists) === null || _a === void 0 ? void 0 : _a.length) > 0 && plan.productId === subscription.product.id; });
+    var canShowChangePlanButton = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
+    // Mutations
+    var subscriptionCancel = reactQuery.useMutation({
+        mutationFn: function () { return cancelSubscription([subscription.id], token); },
+        onSuccess: function () {
+            queryClient.invalidateQueries({
+                queryKey: common.QueryKeyFactory.default.createTableKey("subscriptions"),
+            });
+            showSuccessNotification("Subscription canceled");
+        },
+    });
+    reactQuery.useMutation({
+        mutationFn: function () {
+            return getGuoteSubscriptionReinstate({
+                ids: [subscription.id],
+                token: token,
+                subdomain: subdomain,
+            });
+        },
+        onSuccess: function (quote) {
+            setEditingQuoteData({ id: quote.id, isTrial: false });
+            setPayModalVisible(true);
+        },
+    });
+    // Handlers
+    var handleChangePlanClick = function () {
+        // handleUpgradingSubscriptionChange({
+        //   subscription,
+        // });
+        console.log("handleChangePlanClick handleUpgradingSubscriptionChange not implemented");
+        // navigate("plan-manager", {
+        //   subscriptionUpgradeId: subscription.id,
+        // });
+        onChangePlanClick();
+    };
+    return (canShowChangePlanButton || canShowCancelButton) &&
+        canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isTempViewOnly && canShowCancelButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return subscriptionCancel.mutate(); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), !isTempViewOnly && canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return handleChangePlanClick(); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isTempViewOnly && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
+                // handleUpgradingSubscriptionChange({
+                //   subscription,
+                // });
+                console.log("onClickUpgrade handleUpgradingSubscriptionChange not implemented");
+                // navigate("plan-manager", {
+                //   subscriptionUpgradeId: subscription.id,
+                // });
+                onClickUpgrade();
+            }, type: "primary" }, { children: "Upgrade" }))) })) : null;
+};
+
+var Text$2 = antd.Typography.Text;
+var getSubscriptionStatusText = function (subscription) {
+    var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
+    if (cancellationDate &&
+        (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.CANCELED &&
+        (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.EXPIRED) {
+        return (jsxRuntime.jsxs(antd.Tag, __assign({ color: "red" }, { children: ["Canceled - ends on ", common.Misc.formatDate(cancellationDate)] })));
+    }
+    if (evergreen) {
+        return "Renews on ".concat(common.Misc.formatDate(endDate));
+    }
+    if ((state === null || state === void 0 ? void 0 : state.toUpperCase()) === common.SubscriptionState.CANCELED ||
+        (state === null || state === void 0 ? void 0 : state.toUpperCase()) === common.SubscriptionState.EXPIRED) {
+        return "Ended on ".concat(common.Misc.formatDate(endDate));
+    }
+    return "Ends on ".concat(common.Misc.formatDate(endDate));
+};
+var SubscriptionCardHeader = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscription = _a.subscription;
+    var darkMode = React.useContext(BunnyContext).darkMode;
+    var isMobile = common.useIsMobile();
+    // Derived state
+    var trialDaysLeft = dayjs(subscription.trialEndDate).diff(dayjs(), "days");
+    var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between", style: {
+            backgroundColor: darkMode ? "var(--row-background-dark)" : "",
+        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx("div", __assign({ className: "font-medium text-orange-500", style: { fontSize: "11px" } }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$2, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(antd.Tag, __assign({ className: "ant-tag-".concat(common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodash.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && (jsxRuntime.jsx(SubscriptionCardActions, { planChangeOptions: planChangeOptions, subscription: subscription, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible }))] }))] })));
+};
+
+var BillingPeriodConverter;
+(function (BillingPeriodConverter) {
+    BillingPeriodConverter["ONCE"] = "once";
+    BillingPeriodConverter["MONTHLY"] = "monthly";
+    BillingPeriodConverter["ANNUAL"] = "annually";
+    BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
+    BillingPeriodConverter["QUARTERLY"] = "quarterly";
+})(BillingPeriodConverter || (BillingPeriodConverter = {}));
+var SubscriptionChargeTotal = function (_a) {
+    var charge = _a.charge, subscription = _a.subscription;
+    var isMobile = common.useIsMobile();
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: [jsxRuntime.jsx("div", { children: common.Misc.formatCurrency(Number(charge.periodPrice), subscription.currencyId) }), charge.billingPeriod && (jsxRuntime.jsx("div", { children: BillingPeriodConverter[charge.billingPeriod] }))] })));
+};
+
+var SubscriptionChargeUnitPrice = function (_a) {
+    var _b, _c;
+    var charge = _a.charge, subscription = _a.subscription;
+    var darkMode = React.useContext(BunnyContext).darkMode;
+    var _d = React.useState(false), showPriceTiers = _d[0], setShowPriceTiers = _d[1];
+    if ((_c = (_b = charge.priceListCharge) === null || _b === void 0 ? void 0 : _b.priceListChargeTiers) === null || _c === void 0 ? void 0 : _c.length) {
+        return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
+                var _a, _b;
+                return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col rounded border border-solid border-slate-200 p-2", style: {
+                        backgroundColor: darkMode
+                            ? "var(--row-background-dark)"
+                            : "var(--row-background)",
+                    } }, { children: jsxRuntime.jsx("div", __assign({ className: "grid grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b.map(function (tier, index) {
+                            var _a, _b, _c, _d, _e;
+                            var ends = ((_c = (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b[index + 1]) === null || _c === void 0 ? void 0 : _c.starts)
+                                ? ((_e = (_d = charge.priceListCharge) === null || _d === void 0 ? void 0 : _d.priceListChargeTiers[index + 1]) === null || _e === void 0 ? void 0 : _e.starts) - 1
+                                : "∞";
+                            return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " ", ":"] })), jsxRuntime.jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: common.Misc.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
+                        }) })) })));
+            }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "hide details" : "show details" })) })));
+    }
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.Misc.formatCurrency(charge.discountedPrice, subscription.currencyId) }));
+};
+
+var SubscriptionCardColumnHeaders = function (_a) {
+    var columns = _a.columns;
+    return columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx("div", __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); });
+};
+
+var Text$1 = antd.Typography.Text;
+var SubscriptionsListCell = function (_a) {
+    var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
+    return (jsxRuntime.jsx(Text$1, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
+};
+
 var createCardColumns = function () { return [
     {
         title: "CHARGE",
@@ -4991,9 +5302,10 @@ var SubscriptionCardDesktopRow = function (_a) {
                     : charge.quantity })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
 
+var Text = antd.Typography.Text;
 var SubscriptionCardCellMobile = function (_a) {
     var children = _a.children, className = _a.className, style = _a.style;
-    return (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
+    return (jsxRuntime.jsx(Text, __assign({ className: className, style: style }, { children: children })));
 };
 
 var CHARGE_COLUMNS = [
@@ -5016,8 +5328,12 @@ var CHARGE_COLUMNS = [
 var SubscriptionCard = function (_a) {
     var _b;
     var planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscription = _a.subscription;
+    var darkMode = React.useContext(BunnyContext).darkMode;
     // Derived state
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
+    var backgroundColor = darkMode
+        ? "var(--row-background-dark)"
+        : "var(--row-background)";
     return (jsxRuntime.jsx(Card, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
                         gridColumn: "1 / -1",
                         width: "calc(100% + 32px)",
@@ -5026,6 +5342,7 @@ var SubscriptionCard = function (_a) {
                         columnGap: "0.5rem",
                         gridTemplateColumns: "1fr auto auto auto",
                         rowGap: "0.75rem",
+                        backgroundColor: backgroundColor,
                     } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
                             if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                                 return null;
@@ -5173,6 +5490,7 @@ exports.Checkout = Checkout;
 exports.Invoice = Invoice;
 exports.PaymentMethod = PaymentMethod;
 exports.Quote = Quote;
+exports.Signup = Signup;
 exports.Subscriptions = Subscriptions;
 exports.Transactions = Transactions;
 exports.getQuoteAmountDue = getQuoteAmountDue;