@esic-lab/data-core-ui 0.0.17 → 0.0.19

package/dist/index.js

@@ -466,6 +466,7 @@ __export(index_exports, {
   Calendar: () => Calendar,
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
+  ColorPalettePickerBasic: () => ColorPalettePickerBasic,
   ColorPickerBasic: () => ColorPickerBasic,
   DataTable: () => DataTable,
   DatePickerBasic: () => DatePickerBasic,
@@ -928,7 +929,8 @@ function AntDataTable({
       theme: {
         components: {},
         token: {
-          fontFamily: "Kanit"
+          fontFamily: "Kanit",
+          fontSize: 14
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -1231,7 +1233,8 @@ function TextAreaInput({
       theme: {
         components: {},
         token: {
-          fontFamily: "Kanit"
+          fontFamily: "Kanit",
+          fontSize: 16
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
@@ -1357,7 +1360,8 @@ function DatePickerBasic({
       locale: import_th_TH.default,
       theme: {
         token: {
-          fontFamily: "Kanit"
+          fontFamily: "Kanit",
+          fontSize: 16
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "container-input", children: [
@@ -1427,7 +1431,8 @@ function DatePickerRangePicker({
       locale: import_th_TH2.default,
       theme: {
         token: {
-          fontFamily: "Kanit"
+          fontFamily: "Kanit",
+          fontSize: 16
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "container-input", children: [
@@ -1555,9 +1560,789 @@ function TimePickerRangePicker({
   );
 }
 
-// src/Select/SelectField/SelectField.tsx
+// src/ColorPalettePicker/ColorPalettePicker.tsx
 var import_antd9 = require("antd");
+
+// node_modules/@babel/runtime/helpers/esm/typeof.js
+function _typeof(o) {
+  "@babel/helpers - typeof";
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
+    return typeof o2;
+  } : function(o2) {
+    return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
+  }, _typeof(o);
+}
+
+// node_modules/@babel/runtime/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+// node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+
+// node_modules/@babel/runtime/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+
+// node_modules/@ant-design/fast-color/es/FastColor.js
+var round = Math.round;
+function splitColorStr(str, parseNum) {
+  const match = str.replace(/^[^(]*\((.*)/, "$1").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);
+  }
+  if (match[3]) {
+    numList[3] = match[3].includes("%") ? numList[3] / 100 : numList[3];
+  } else {
+    numList[3] = 1;
+  }
+  return numList;
+}
+var parseHSVorHSL = (num, _, index) => index === 0 ? num : num / 100;
+function limitRange(value, max) {
+  const mergedMax = max || 255;
+  if (value > mergedMax) {
+    return mergedMax;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  return value;
+}
+var FastColor = class _FastColor {
+  constructor(input) {
+    _defineProperty(this, "isValid", true);
+    _defineProperty(this, "r", 0);
+    _defineProperty(this, "g", 0);
+    _defineProperty(this, "b", 0);
+    _defineProperty(this, "a", 1);
+    _defineProperty(this, "_h", void 0);
+    _defineProperty(this, "_s", void 0);
+    _defineProperty(this, "_l", void 0);
+    _defineProperty(this, "_v", void 0);
+    _defineProperty(this, "_max", void 0);
+    _defineProperty(this, "_min", void 0);
+    _defineProperty(this, "_brightness", void 0);
+    function matchFormat(str) {
+      return str[0] in input && str[1] in input && str[2] in input;
+    }
+    if (!input) {
+    } else if (typeof input === "string") {
+      let matchPrefix2 = function(prefix) {
+        return trimStr.startsWith(prefix);
+      };
+      var matchPrefix = matchPrefix2;
+      const trimStr = input.trim();
+      if (/^#?[A-F\d]{3,8}$/i.test(trimStr)) {
+        this.fromHexString(trimStr);
+      } else if (matchPrefix2("rgb")) {
+        this.fromRgbString(trimStr);
+      } else if (matchPrefix2("hsl")) {
+        this.fromHslString(trimStr);
+      } else if (matchPrefix2("hsv") || matchPrefix2("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));
+    }
+  }
+  // ======================= 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);
+    }
+    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));
+      }
+    }
+    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 this._s;
+  }
+  getLightness() {
+    if (typeof this._l === "undefined") {
+      this._l = (this.getMax() + this.getMin()) / 510;
+    }
+    return this._l;
+  }
+  getValue() {
+    if (typeof this._v === "undefined") {
+      this._v = this.getMax() / 255;
+    }
+    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) / 1e3;
+    }
+    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 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 this._c({
+      h,
+      s,
+      l,
+      a: this.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;
+    }
+    return hex;
+  }
+  /** CSS support color pattern */
+  toHsl() {
+    return {
+      h: this.getHue(),
+      s: this.getSaturation(),
+      l: this.getLightness(),
+      a: this.a
+    };
+  }
+  /** 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);
+    }
+    return this._max;
+  }
+  getMin() {
+    if (typeof this._min === "undefined") {
+      this._min = Math.min(this.r, this.g, this.b);
+    }
+    return this._min;
+  }
+  fromHexString(trimStr) {
+    const withoutPrefix = trimStr.replace("#", "");
+    function connectNum(index1, index2) {
+      return parseInt(withoutPrefix[index1] + withoutPrefix[index2 || index1], 16);
+    }
+    if (withoutPrefix.length < 6) {
+      this.r = connectNum(0);
+      this.g = connectNum(1);
+      this.b = connectNum(2);
+      this.a = withoutPrefix[3] ? connectNum(3) / 255 : 1;
+    } else {
+      this.r = connectNum(0, 1);
+      this.g = connectNum(2, 3);
+      this.b = connectNum(4, 5);
+      this.a = withoutPrefix[6] ? connectNum(6, 7) / 255 : 1;
+    }
+  }
+  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;
+    }
+    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;
+    }
+    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;
+    }
+    const hh = h / 60;
+    const i = Math.floor(hh);
+    const ff = hh - i;
+    const p = round(v * (1 - s) * 255);
+    const q = round(v * (1 - s * ff) * 255);
+    const t = round(v * (1 - s * (1 - 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;
+    }
+  }
+  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];
+  }
+};
+
+// node_modules/@ant-design/colors/es/generate.js
+var hueStep = 2;
+var saturationStep = 0.16;
+var saturationStep2 = 0.05;
+var brightnessStep1 = 0.05;
+var brightnessStep2 = 0.15;
+var lightColorCount = 5;
+var darkColorCount = 4;
+var darkColorMap = [{
+  index: 7,
+  amount: 15
+}, {
+  index: 6,
+  amount: 25
+}, {
+  index: 5,
+  amount: 30
+}, {
+  index: 5,
+  amount: 45
+}, {
+  index: 5,
+  amount: 65
+}, {
+  index: 5,
+  amount: 85
+}, {
+  index: 4,
+  amount: 90
+}, {
+  index: 3,
+  amount: 95
+}, {
+  index: 2,
+  amount: 97
+}, {
+  index: 1,
+  amount: 98
+}];
+function getHue(hsv, i, light) {
+  var hue;
+  if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
+    hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
+  } else {
+    hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
+  }
+  if (hue < 0) {
+    hue += 360;
+  } else if (hue >= 360) {
+    hue -= 360;
+  }
+  return hue;
+}
+function getSaturation(hsv, i, light) {
+  if (hsv.h === 0 && hsv.s === 0) {
+    return hsv.s;
+  }
+  var saturation;
+  if (light) {
+    saturation = hsv.s - saturationStep * i;
+  } else if (i === darkColorCount) {
+    saturation = hsv.s + saturationStep;
+  } else {
+    saturation = hsv.s + saturationStep2 * i;
+  }
+  if (saturation > 1) {
+    saturation = 1;
+  }
+  if (light && i === lightColorCount && saturation > 0.1) {
+    saturation = 0.1;
+  }
+  if (saturation < 0.06) {
+    saturation = 0.06;
+  }
+  return Math.round(saturation * 100) / 100;
+}
+function getValue(hsv, i, light) {
+  var value;
+  if (light) {
+    value = hsv.v + brightnessStep1 * i;
+  } else {
+    value = hsv.v - brightnessStep2 * i;
+  }
+  value = Math.max(0, Math.min(1, value));
+  return Math.round(value * 100) / 100;
+}
+function generate(color) {
+  var opts = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  var patterns = [];
+  var pColor = new FastColor(color);
+  var hsv = pColor.toHsv();
+  for (var i = lightColorCount; i > 0; i -= 1) {
+    var c = new FastColor({
+      h: getHue(hsv, i, true),
+      s: getSaturation(hsv, i, true),
+      v: getValue(hsv, i, true)
+    });
+    patterns.push(c);
+  }
+  patterns.push(pColor);
+  for (var _i = 1; _i <= darkColorCount; _i += 1) {
+    var _c = new FastColor({
+      h: getHue(hsv, _i),
+      s: getSaturation(hsv, _i),
+      v: getValue(hsv, _i)
+    });
+    patterns.push(_c);
+  }
+  if (opts.theme === "dark") {
+    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.map(function(c2) {
+    return c2.toHexString();
+  });
+}
+
+// node_modules/@ant-design/colors/es/presets.js
+var red = ["#fff1f0", "#ffccc7", "#ffa39e", "#ff7875", "#ff4d4f", "#f5222d", "#cf1322", "#a8071a", "#820014", "#5c0011"];
+red.primary = red[5];
+var volcano = ["#fff2e8", "#ffd8bf", "#ffbb96", "#ff9c6e", "#ff7a45", "#fa541c", "#d4380d", "#ad2102", "#871400", "#610b00"];
+volcano.primary = volcano[5];
+var orange = ["#fff7e6", "#ffe7ba", "#ffd591", "#ffc069", "#ffa940", "#fa8c16", "#d46b08", "#ad4e00", "#873800", "#612500"];
+orange.primary = orange[5];
+var gold = ["#fffbe6", "#fff1b8", "#ffe58f", "#ffd666", "#ffc53d", "#faad14", "#d48806", "#ad6800", "#874d00", "#613400"];
+gold.primary = gold[5];
+var yellow = ["#feffe6", "#ffffb8", "#fffb8f", "#fff566", "#ffec3d", "#fadb14", "#d4b106", "#ad8b00", "#876800", "#614700"];
+yellow.primary = yellow[5];
+var lime = ["#fcffe6", "#f4ffb8", "#eaff8f", "#d3f261", "#bae637", "#a0d911", "#7cb305", "#5b8c00", "#3f6600", "#254000"];
+lime.primary = lime[5];
+var green = ["#f6ffed", "#d9f7be", "#b7eb8f", "#95de64", "#73d13d", "#52c41a", "#389e0d", "#237804", "#135200", "#092b00"];
+green.primary = green[5];
+var cyan = ["#e6fffb", "#b5f5ec", "#87e8de", "#5cdbd3", "#36cfc9", "#13c2c2", "#08979c", "#006d75", "#00474f", "#002329"];
+cyan.primary = cyan[5];
+var blue = ["#e6f4ff", "#bae0ff", "#91caff", "#69b1ff", "#4096ff", "#1677ff", "#0958d9", "#003eb3", "#002c8c", "#001d66"];
+blue.primary = blue[5];
+var geekblue = ["#f0f5ff", "#d6e4ff", "#adc6ff", "#85a5ff", "#597ef7", "#2f54eb", "#1d39c4", "#10239e", "#061178", "#030852"];
+geekblue.primary = geekblue[5];
+var purple = ["#f9f0ff", "#efdbff", "#d3adf7", "#b37feb", "#9254de", "#722ed1", "#531dab", "#391085", "#22075e", "#120338"];
+purple.primary = purple[5];
+var magenta = ["#fff0f6", "#ffd6e7", "#ffadd2", "#ff85c0", "#f759ab", "#eb2f96", "#c41d7f", "#9e1068", "#780650", "#520339"];
+magenta.primary = magenta[5];
+var grey = ["#a6a6a6", "#999999", "#8c8c8c", "#808080", "#737373", "#666666", "#404040", "#1a1a1a", "#000000", "#000000"];
+grey.primary = grey[5];
+var presetPalettes = {
+  red,
+  volcano,
+  orange,
+  gold,
+  yellow,
+  lime,
+  green,
+  cyan,
+  blue,
+  geekblue,
+  purple,
+  magenta,
+  grey
+};
+var redDark = ["#2a1215", "#431418", "#58181c", "#791a1f", "#a61d24", "#d32029", "#e84749", "#f37370", "#f89f9a", "#fac8c3"];
+redDark.primary = redDark[5];
+var volcanoDark = ["#2b1611", "#441d12", "#592716", "#7c3118", "#aa3e19", "#d84a1b", "#e87040", "#f3956a", "#f8b692", "#fad4bc"];
+volcanoDark.primary = volcanoDark[5];
+var orangeDark = ["#2b1d11", "#442a11", "#593815", "#7c4a15", "#aa6215", "#d87a16", "#e89a3c", "#f3b765", "#f8cf8d", "#fae3b7"];
+orangeDark.primary = orangeDark[5];
+var goldDark = ["#2b2111", "#443111", "#594214", "#7c5914", "#aa7714", "#d89614", "#e8b339", "#f3cc62", "#f8df8b", "#faedb5"];
+goldDark.primary = goldDark[5];
+var yellowDark = ["#2b2611", "#443b11", "#595014", "#7c6e14", "#aa9514", "#d8bd14", "#e8d639", "#f3ea62", "#f8f48b", "#fafab5"];
+yellowDark.primary = yellowDark[5];
+var limeDark = ["#1f2611", "#2e3c10", "#3e4f13", "#536d13", "#6f9412", "#8bbb11", "#a9d134", "#c9e75d", "#e4f88b", "#f0fab5"];
+limeDark.primary = limeDark[5];
+var greenDark = ["#162312", "#1d3712", "#274916", "#306317", "#3c8618", "#49aa19", "#6abe39", "#8fd460", "#b2e58b", "#d5f2bb"];
+greenDark.primary = greenDark[5];
+var cyanDark = ["#112123", "#113536", "#144848", "#146262", "#138585", "#13a8a8", "#33bcb7", "#58d1c9", "#84e2d8", "#b2f1e8"];
+cyanDark.primary = cyanDark[5];
+var blueDark = ["#111a2c", "#112545", "#15325b", "#15417e", "#1554ad", "#1668dc", "#3c89e8", "#65a9f3", "#8dc5f8", "#b7dcfa"];
+blueDark.primary = blueDark[5];
+var geekblueDark = ["#131629", "#161d40", "#1c2755", "#203175", "#263ea0", "#2b4acb", "#5273e0", "#7f9ef3", "#a8c1f8", "#d2e0fa"];
+geekblueDark.primary = geekblueDark[5];
+var purpleDark = ["#1a1325", "#24163a", "#301c4d", "#3e2069", "#51258f", "#642ab5", "#854eca", "#ab7ae0", "#cda8f0", "#ebd7fa"];
+purpleDark.primary = purpleDark[5];
+var magentaDark = ["#291321", "#40162f", "#551c3b", "#75204f", "#a02669", "#cb2b83", "#e0529c", "#f37fb7", "#f8a8cc", "#fad2e3"];
+magentaDark.primary = magentaDark[5];
+var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a", "#6a6a6a", "#7b7b7b", "#888888", "#969696"];
+greyDark.primary = greyDark[5];
+
+// src/ColorPalettePicker/ColorPalettePicker.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
+function genPresets(presets = presetPalettes) {
+  return Object.entries(presets).map(([label, colors]) => ({
+    label,
+    colors,
+    key: label
+  }));
+}
+function ColorPalettePickerBasic({
+  value,
+  onChange,
+  require: require2,
+  title,
+  bottomText,
+  showError,
+  errorMessage,
+  disabled,
+  allowClear,
+  defaultFormat,
+  className,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
+}) {
+  const { token } = import_antd9.theme.useToken();
+  const presets = genPresets({
+    primary: generate(token.colorPrimary),
+    red,
+    green
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_antd9.ConfigProvider,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "body-1", children: title }),
+          " ",
+          require2 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_antd9.ColorPicker,
+          {
+            defaultFormat,
+            className: `body-1 w-full ${className ?? ""}`,
+            presets,
+            value,
+            defaultValue: "#ffff",
+            onChange,
+            allowClear,
+            showText: (color) => {
+              const hex = color.toHexString();
+              if (!value) {
+                return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: placeholder });
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
+                "(",
+                hex,
+                ")"
+              ] });
+            },
+            disabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          showError && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/Select/SelectField/SelectField.tsx
+var import_antd10 = require("antd");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function SelectField({
   value,
   onChange,
@@ -1576,22 +2361,23 @@ function SelectField({
   handleSearch,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_antd9.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_antd10.ConfigProvider,
     {
       theme: {
         token: {
-          fontFamily: "Kanit"
+          fontFamily: "Kanit",
+          fontSize: 16
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          import_antd9.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_antd10.Select,
           {
             showSearch: true,
             value,
@@ -1605,14 +2391,14 @@ function SelectField({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { width: prefixSize, height: prefixSize, display: "flex", alignItems: "center", justifyContent: "center" }, children: prefix }) : void 0,
+            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { width: prefixSize, height: prefixSize, display: "flex", alignItems: "center", justifyContent: "center" }, children: prefix }) : void 0,
             allowClear: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1620,8 +2406,8 @@ function SelectField({
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-var import_antd10 = require("antd");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_antd11 = require("antd");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function SelectFieldGroup({
   value,
   onChange,
@@ -1640,22 +2426,22 @@ function SelectFieldGroup({
   handleSearch,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_antd10.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_antd11.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          import_antd10.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_antd11.Select,
           {
             showSearch: true,
             value,
@@ -1669,7 +2455,7 @@ function SelectFieldGroup({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "span",
               {
                 style: {
@@ -1685,10 +2471,10 @@ function SelectFieldGroup({
             allowClear: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1696,7 +2482,7 @@ function SelectFieldGroup({
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-var import_antd11 = require("antd");
+var import_antd12 = require("antd");
 
 // src/Select/SelectFieldStatus/StatusMockup.ts
 var status = [
@@ -1709,7 +2495,7 @@ var status = [
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 var import_icons = require("@ant-design/icons");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function SelectFieldStatus({
   value,
   onChange,
@@ -1724,8 +2510,8 @@ function SelectFieldStatus({
   className
 }) {
   const selectedItem = status.find((s) => s.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_antd11.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_antd12.ConfigProvider,
     {
       theme: {
         components: {
@@ -1740,17 +2526,17 @@ function SelectFieldStatus({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_antd11.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_antd12.Select,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -1760,10 +2546,10 @@ function SelectFieldStatus({
             options
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1771,7 +2557,7 @@ function SelectFieldStatus({
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-var import_antd12 = require("antd");
+var import_antd13 = require("antd");
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status2 = [
@@ -1781,7 +2567,7 @@ var status2 = [
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
 var import_icons2 = require("@ant-design/icons");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function SelectFieldStatusReport({
   value,
   onChange,
@@ -1795,8 +2581,8 @@ function SelectFieldStatusReport({
   className
 }) {
   const selectedItem = status2.find((s) => s.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_antd12.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_antd13.ConfigProvider,
     {
       theme: {
         components: {
@@ -1811,17 +2597,17 @@ function SelectFieldStatusReport({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_antd12.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_antd13.Select,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -1835,10 +2621,10 @@ function SelectFieldStatusReport({
             }))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1846,9 +2632,9 @@ function SelectFieldStatusReport({
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-var import_antd13 = require("antd");
+var import_antd14 = require("antd");
 var import_react8 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function SelectFieldTag({
   title,
   require: require2,
@@ -1882,22 +2668,22 @@ function SelectFieldTag({
     }
     onChange?.([]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_antd13.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_antd14.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_antd13.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          import_antd14.Select,
           {
             mode: "tags",
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
@@ -1914,10 +2700,10 @@ function SelectFieldTag({
             allowClear: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1925,7 +2711,7 @@ function SelectFieldTag({
 }
 
 // src/SortFilter/SortFilter.tsx
-var import_antd14 = require("antd");
+var import_antd15 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -1958,7 +2744,7 @@ var quarters = [
 // src/SortFilter/SortFilter.tsx
 var import_react9 = require("react");
 var import_icons_react8 = require("@tabler/icons-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function SortFilter({
   showYear = true,
   showQuarter = true,
@@ -1969,20 +2755,20 @@ function SortFilter({
   const [yearValue, setYearValue] = (0, import_react9.useState)();
   const [monthValue, setMonthValue] = (0, import_react9.useState)();
   const [quarterValue, setQuartersValue] = (0, import_react9.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_antd14.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_antd15.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full flex gap-[10px]", children: [
-          showYear && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-full flex gap-[10px]", children: [
+          showYear && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             SelectField,
             {
-              prefix: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons3.CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons3.CalendarOutlined, {}),
               onChange: setYearValue,
               options: years.map((s) => ({
                 value: s.value,
@@ -1992,10 +2778,10 @@ function SortFilter({
               value: yearValue
             }
           ) }),
-          showMonth && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          showMonth && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             SelectField,
             {
-              prefix: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons3.CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons3.CalendarOutlined, {}),
               onChange: setMonthValue,
               options: months.map((s) => ({
                 value: s.value,
@@ -2005,10 +2791,10 @@ function SortFilter({
               placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
             }
           ) }),
-          showQuarter && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          showQuarter && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             SelectField,
             {
-              prefix: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons3.CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons3.CalendarOutlined, {}),
               onChange: setQuartersValue,
               options: quarters.map((s) => ({
                 value: s.value,
@@ -2019,8 +2805,8 @@ function SortFilter({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-[10px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-[10px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_icons_react8.IconSortDescending,
             {
               size: 24,
@@ -2028,7 +2814,7 @@ function SortFilter({
               onClick: onSortClick
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_icons_react8.IconFilter,
             {
               size: 24,
@@ -2045,7 +2831,7 @@ function SortFilter({
 // src/Upload/FileUploader/FileUploader.tsx
 var import_icons_react9 = require("@tabler/icons-react");
 var import_react10 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function FileUploader({
   onUpload,
   onError,
@@ -2116,10 +2902,10 @@ function FileUploader({
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
-      mode === "upload" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "body-1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+      mode === "upload" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
@@ -2127,15 +2913,15 @@ function FileUploader({
           className: `h-[34px] flex justify-center items-center gap-2 w-full rounded-[2px] border border-gray-200 body-1 
           ${disabled ? "cursor-not-allowed text-gray-400 bg-gray-100" : "cursor-pointer hover:text-primary-400 hover:border-primary-200 duration-300"}`,
           disabled: disabled ? disabled : uploading,
-          children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_react9.IconUpload, { size: 15, className: "text-gray-400" }),
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons_react9.IconUpload, { size: 15, className: "text-gray-400" }),
             " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
           ] })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           className: `min-w-[400px] min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
@@ -2149,17 +2935,17 @@ function FileUploader({
           },
           onDragLeave: () => setDragActive(false),
           onDrop: handleDrop,
-          children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-center items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex justify-center items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_react9.IconUpload, { size: 20 }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "body-1", children: "\u0E04\u0E25\u0E34\u0E01\u0E2B\u0E23\u0E37\u0E2D\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E17\u0E35\u0E48\u0E1A\u0E23\u0E34\u0E40\u0E27\u0E13\u0E19\u0E35\u0E49\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14" }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-gray-400 body-3", children: "\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E1A\u0E1A\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E32\u0E22\u0E44\u0E1F\u0E25\u0E4C" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons_react9.IconUpload, { size: 20 }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "body-1", children: "\u0E04\u0E25\u0E34\u0E01\u0E2B\u0E23\u0E37\u0E2D\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E17\u0E35\u0E48\u0E1A\u0E23\u0E34\u0E40\u0E27\u0E13\u0E19\u0E35\u0E49\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-gray-400 body-3", children: "\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E1A\u0E1A\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E32\u0E22\u0E44\u0E1F\u0E25\u0E4C" })
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "input",
         {
           type: "file",
@@ -2172,13 +2958,13 @@ function FileUploader({
         }
       )
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_react9.IconPaperclip, { size: 15 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate", children: file.name })
+    description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-gray-400 body-4", children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons_react9.IconPaperclip, { size: 15 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate", children: file.name })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         import_icons_react9.IconTrash,
         {
           size: 20,
@@ -2212,9 +2998,9 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
-var import_antd15 = require("antd");
 var import_antd16 = require("antd");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_antd17 = require("antd");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Breadcrumbs({
   items,
   separator,
@@ -2222,16 +3008,16 @@ function Breadcrumbs({
   classname,
   params
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_antd15.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_antd16.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        import_antd16.Breadcrumb,
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        import_antd17.Breadcrumb,
         {
           items,
           separator,
@@ -2245,8 +3031,8 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-var import_antd17 = require("antd");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_antd18 = require("antd");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
     weekday: "long",
@@ -2254,17 +3040,17 @@ function HeadingPage({ Heading }) {
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_antd17.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_antd18.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "headline-5", children: Heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "body-1", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "headline-5", children: Heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "body-1", children: [
           " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
           today
         ] })
@@ -2274,9 +3060,9 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-var import_antd18 = require("antd");
+var import_antd19 = require("antd");
 var import_react11 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function ProgressBar({
   percent = 0,
   size = "default",
@@ -2309,17 +3095,17 @@ function ProgressBar({
     observer.observe(inner);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_antd18.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_antd19.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative w-full", ref: progressRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_antd18.Progress,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative w-full", ref: progressRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_antd19.Progress,
           {
             className: "w-full",
             percent,
@@ -2334,7 +3120,7 @@ function ProgressBar({
             strokeColor
           }
         ),
-        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "div",
           {
             className: "checkpoint absolute top-0",
@@ -2361,6 +3147,7 @@ function ProgressBar({
   Calendar,
   Checkbox,
   CheckboxGroup,
+  ColorPalettePickerBasic,
   ColorPickerBasic,
   DataTable,
   DatePickerBasic,