@esic-lab/data-core-ui 0.0.18 → 0.0.20

package/dist/index.mjs

@@ -1235,7 +1235,8 @@ function ColorPickerBasic({
     {
       theme: {
         token: {
-          fontFamily: "Kanit"
+          fontFamily: "Kanit",
+          fontSize: 16
         }
       },
       children: /* @__PURE__ */ jsxs16("div", { className: "container-input", children: [
@@ -1508,9 +1509,789 @@ function TimePickerRangePicker({
   );
 }
 
-// src/Select/SelectField/SelectField.tsx
-import { Select, ConfigProvider as ConfigProvider9 } from "antd";
+// src/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
+import { ConfigProvider as ConfigProvider9, ColorPicker as ColorPicker2, theme } from "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/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
 import { jsx as jsx25, jsxs as jsxs21 } from "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 } = theme.useToken();
+  const presets = genPresets({
+    primary: generate(token.colorPrimary),
+    red,
+    green
+  });
+  return /* @__PURE__ */ jsx25(
+    ConfigProvider9,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx25("span", { className: "body-1", children: title }),
+          " ",
+          require2 && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx25(
+          ColorPicker2,
+          {
+            defaultFormat,
+            className: `body-1 w-full ${className ?? ""}`,
+            presets,
+            value,
+            defaultValue: "#ffff",
+            onChange,
+            allowClear,
+            showText: (color) => {
+              const hex = color.toHexString();
+              if (!value) {
+                return /* @__PURE__ */ jsx25("span", { children: placeholder });
+              }
+              return /* @__PURE__ */ jsxs21("span", { children: [
+                "(",
+                hex,
+                ")"
+              ] });
+            },
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx25("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          showError && /* @__PURE__ */ jsx25("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/Select/SelectField/SelectField.tsx
+import { Select, ConfigProvider as ConfigProvider10 } from "antd";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectField({
   value,
   onChange,
@@ -1529,8 +2310,8 @@ function SelectField({
   handleSearch,
   className
 }) {
-  return /* @__PURE__ */ jsx25(
-    ConfigProvider9,
+  return /* @__PURE__ */ jsx26(
+    ConfigProvider10,
     {
       theme: {
         token: {
@@ -1538,13 +2319,13 @@ function SelectField({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx25("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx26("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           Select,
           {
             showSearch: true,
@@ -1559,14 +2340,14 @@ function SelectField({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ jsx25("span", { style: { width: prefixSize, height: prefixSize, display: "flex", alignItems: "center", justifyContent: "center" }, children: prefix }) : void 0,
+            prefix: prefix ? /* @__PURE__ */ jsx26("span", { style: { width: prefixSize, height: prefixSize, display: "flex", alignItems: "center", justifyContent: "center" }, children: prefix }) : void 0,
             allowClear: true
           }
         ),
-        /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx25("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx26("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ jsx25("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ jsx26("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1574,8 +2355,8 @@ function SelectField({
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-import { Select as Select2, ConfigProvider as ConfigProvider10 } from "antd";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Select as Select2, ConfigProvider as ConfigProvider11 } from "antd";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function SelectFieldGroup({
   value,
   onChange,
@@ -1594,21 +2375,21 @@ function SelectFieldGroup({
   handleSearch,
   className
 }) {
-  return /* @__PURE__ */ jsx26(
-    ConfigProvider10,
+  return /* @__PURE__ */ jsx27(
+    ConfigProvider11,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx26("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx27("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           Select2,
           {
             showSearch: true,
@@ -1623,7 +2404,7 @@ function SelectFieldGroup({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ jsx26(
+            prefix: prefix ? /* @__PURE__ */ jsx27(
               "span",
               {
                 style: {
@@ -1639,10 +2420,10 @@ function SelectFieldGroup({
             allowClear: true
           }
         ),
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx26("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx27("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ jsx26("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ jsx27("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1650,7 +2431,7 @@ function SelectFieldGroup({
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-import { Select as Select3, ConfigProvider as ConfigProvider11 } from "antd";
+import { Select as Select3, ConfigProvider as ConfigProvider12 } from "antd";
 
 // src/Select/SelectFieldStatus/StatusMockup.ts
 var status = [
@@ -1663,7 +2444,7 @@ var status = [
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 import { DownOutlined } from "@ant-design/icons";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function SelectFieldStatus({
   value,
   onChange,
@@ -1678,8 +2459,8 @@ function SelectFieldStatus({
   className
 }) {
   const selectedItem = status.find((s) => s.value === value);
-  return /* @__PURE__ */ jsx27(
-    ConfigProvider11,
+  return /* @__PURE__ */ jsx28(
+    ConfigProvider12,
     {
       theme: {
         components: {
@@ -1694,17 +2475,17 @@ function SelectFieldStatus({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs23("div", { children: [
-          /* @__PURE__ */ jsx27("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx28("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           Select3,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ jsx27(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ jsx28(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -1714,10 +2495,10 @@ function SelectFieldStatus({
             options
           }
         ),
-        /* @__PURE__ */ jsxs23("div", { children: [
-          /* @__PURE__ */ jsx27("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx28("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ jsx27("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ jsx28("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1725,7 +2506,7 @@ function SelectFieldStatus({
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-import { Select as Select4, ConfigProvider as ConfigProvider12 } from "antd";
+import { Select as Select4, ConfigProvider as ConfigProvider13 } from "antd";
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status2 = [
@@ -1735,7 +2516,7 @@ var status2 = [
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
 import { DownOutlined as DownOutlined2 } from "@ant-design/icons";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function SelectFieldStatusReport({
   value,
   onChange,
@@ -1749,8 +2530,8 @@ function SelectFieldStatusReport({
   className
 }) {
   const selectedItem = status2.find((s) => s.value === value);
-  return /* @__PURE__ */ jsx28(
-    ConfigProvider12,
+  return /* @__PURE__ */ jsx29(
+    ConfigProvider13,
     {
       theme: {
         components: {
@@ -1765,17 +2546,17 @@ function SelectFieldStatusReport({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs24("div", { children: [
-          /* @__PURE__ */ jsx28("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx29("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           Select4,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ jsx28(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ jsx29(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -1789,10 +2570,10 @@ function SelectFieldStatusReport({
             }))
           }
         ),
-        /* @__PURE__ */ jsxs24("div", { children: [
-          /* @__PURE__ */ jsx28("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx29("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ jsx28("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ jsx29("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1800,9 +2581,9 @@ function SelectFieldStatusReport({
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-import { Select as Select5, ConfigProvider as ConfigProvider13 } from "antd";
+import { Select as Select5, ConfigProvider as ConfigProvider14 } from "antd";
 import { useState as useState6 } from "react";
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectFieldTag({
   title,
   require: require2,
@@ -1836,21 +2617,21 @@ function SelectFieldTag({
     }
     onChange?.([]);
   };
-  return /* @__PURE__ */ jsx29(
-    ConfigProvider13,
+  return /* @__PURE__ */ jsx30(
+    ConfigProvider14,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx29("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs26("div", { children: [
+          /* @__PURE__ */ jsx30("span", { className: "body-1", children: title }),
           " ",
-          require2 && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
+          require2 && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           Select5,
           {
             mode: "tags",
@@ -1868,10 +2649,10 @@ function SelectFieldTag({
             allowClear: true
           }
         ),
-        /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx29("p", { className: "caption-1 text-gray-500", children: bottomText }),
+        /* @__PURE__ */ jsxs26("div", { children: [
+          /* @__PURE__ */ jsx30("p", { className: "caption-1 text-gray-500", children: bottomText }),
           " ",
-          showError && /* @__PURE__ */ jsx29("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+          showError && /* @__PURE__ */ jsx30("p", { className: "caption-1 text-red-500 ", children: errorMessage })
         ] })
       ] })
     }
@@ -1879,7 +2660,7 @@ function SelectFieldTag({
 }
 
 // src/SortFilter/SortFilter.tsx
-import { ConfigProvider as ConfigProvider14 } from "antd";
+import { ConfigProvider as ConfigProvider15 } from "antd";
 import { CalendarOutlined } from "@ant-design/icons";
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -1912,7 +2693,7 @@ var quarters = [
 // src/SortFilter/SortFilter.tsx
 import { useState as useState7 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
-import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function SortFilter({
   showYear = true,
   showQuarter = true,
@@ -1923,20 +2704,20 @@ function SortFilter({
   const [yearValue, setYearValue] = useState7();
   const [monthValue, setMonthValue] = useState7();
   const [quarterValue, setQuartersValue] = useState7();
-  return /* @__PURE__ */ jsx30(
-    ConfigProvider14,
+  return /* @__PURE__ */ jsx31(
+    ConfigProvider15,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs26("div", { className: "w-full flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs26("div", { className: "w-full flex gap-[10px]", children: [
-          showYear && /* @__PURE__ */ jsx30("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsxs27("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "w-full flex gap-[10px]", children: [
+          showYear && /* @__PURE__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx30(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
               onChange: setYearValue,
               options: years.map((s) => ({
                 value: s.value,
@@ -1946,10 +2727,10 @@ function SortFilter({
               value: yearValue
             }
           ) }),
-          showMonth && /* @__PURE__ */ jsx30("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx30(
+          showMonth && /* @__PURE__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx30(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
               onChange: setMonthValue,
               options: months.map((s) => ({
                 value: s.value,
@@ -1959,10 +2740,10 @@ function SortFilter({
               placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
             }
           ) }),
-          showQuarter && /* @__PURE__ */ jsx30("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx30(
+          showQuarter && /* @__PURE__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx30(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
               onChange: setQuartersValue,
               options: quarters.map((s) => ({
                 value: s.value,
@@ -1973,8 +2754,8 @@ function SortFilter({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs26("div", { className: "flex gap-[10px]", children: [
-          /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsxs27("div", { className: "flex gap-[10px]", children: [
+          /* @__PURE__ */ jsx31(
             IconSortDescending2,
             {
               size: 24,
@@ -1982,7 +2763,7 @@ function SortFilter({
               onClick: onSortClick
             }
           ),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             IconFilter,
             {
               size: 24,
@@ -1999,7 +2780,7 @@ function SortFilter({
 // src/Upload/FileUploader/FileUploader.tsx
 import { IconPaperclip, IconUpload, IconTrash } from "@tabler/icons-react";
 import { useRef as useRef2, useState as useState8 } from "react";
-import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
   onError,
@@ -2070,10 +2851,10 @@ function FileUploader({
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  return /* @__PURE__ */ jsxs27("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx31("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ jsxs27("div", { children: [
-      mode === "upload" ? /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs28("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx32("p", { className: "body-1", children: label }),
+    /* @__PURE__ */ jsxs28("div", { children: [
+      mode === "upload" ? /* @__PURE__ */ jsx32(
         "button",
         {
           type: "button",
@@ -2081,15 +2862,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__ */ jsxs27(Fragment5, { children: [
-            /* @__PURE__ */ jsx31(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs28(Fragment5, { children: [
+            /* @__PURE__ */ jsx32(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs27(Fragment5, { children: [
-            /* @__PURE__ */ jsx31(IconUpload, { size: 15, className: "text-gray-400" }),
+          ] }) : /* @__PURE__ */ jsxs28(Fragment5, { children: [
+            /* @__PURE__ */ jsx32(IconUpload, { size: 15, className: "text-gray-400" }),
             " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
           ] })
         }
-      ) : /* @__PURE__ */ jsx31(
+      ) : /* @__PURE__ */ jsx32(
         "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
@@ -2103,17 +2884,17 @@ function FileUploader({
           },
           onDragLeave: () => setDragActive(false),
           onDrop: handleDrop,
-          children: uploading ? /* @__PURE__ */ jsxs27("div", { className: "flex justify-center items-center gap-2", children: [
-            /* @__PURE__ */ jsx31(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs28("div", { className: "flex justify-center items-center gap-2", children: [
+            /* @__PURE__ */ jsx32(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ jsx31(IconUpload, { size: 20 }),
-            /* @__PURE__ */ jsx31("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__ */ jsx31("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__ */ jsxs28("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx32(IconUpload, { size: 20 }),
+            /* @__PURE__ */ jsx32("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__ */ jsx32("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__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         "input",
         {
           type: "file",
@@ -2126,13 +2907,13 @@ function FileUploader({
         }
       )
     ] }),
-    description && /* @__PURE__ */ jsx31("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ jsx31("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
-      /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
-        /* @__PURE__ */ jsx31("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx31(IconPaperclip, { size: 15 }) }),
-        /* @__PURE__ */ jsx31("span", { className: "truncate", children: file.name })
+    description && /* @__PURE__ */ jsx32("p", { className: "text-gray-400 body-4", children: description }),
+    /* @__PURE__ */ jsx32("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
+        /* @__PURE__ */ jsx32("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx32(IconPaperclip, { size: 15 }) }),
+        /* @__PURE__ */ jsx32("span", { className: "truncate", children: file.name })
       ] }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         IconTrash,
         {
           size: 20,
@@ -2166,9 +2947,9 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
-import { ConfigProvider as ConfigProvider15 } from "antd";
+import { ConfigProvider as ConfigProvider16 } from "antd";
 import { Breadcrumb } from "antd";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Breadcrumbs({
   items,
   separator,
@@ -2176,15 +2957,15 @@ function Breadcrumbs({
   classname,
   params
 }) {
-  return /* @__PURE__ */ jsx32(
-    ConfigProvider15,
+  return /* @__PURE__ */ jsx33(
+    ConfigProvider16,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx33(
         Breadcrumb,
         {
           items,
@@ -2199,8 +2980,8 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-import { ConfigProvider as ConfigProvider16 } from "antd";
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider17 } from "antd";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
     weekday: "long",
@@ -2208,17 +2989,17 @@ function HeadingPage({ Heading }) {
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ jsx33(
-    ConfigProvider16,
+  return /* @__PURE__ */ jsx34(
+    ConfigProvider17,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
-        /* @__PURE__ */ jsx33("p", { className: "headline-5", children: Heading }),
-        /* @__PURE__ */ jsxs28("p", { className: "body-1", children: [
+      children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
+        /* @__PURE__ */ jsx34("p", { className: "headline-5", children: Heading }),
+        /* @__PURE__ */ jsxs29("p", { className: "body-1", children: [
           " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
           today
         ] })
@@ -2228,9 +3009,9 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-import { ConfigProvider as ConfigProvider17, Progress } from "antd";
+import { ConfigProvider as ConfigProvider18, Progress } from "antd";
 import { useEffect as useEffect2, useRef as useRef3, useState as useState9 } from "react";
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
   size = "default",
@@ -2263,16 +3044,16 @@ function ProgressBar({
     observer.observe(inner);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx34(
-    ConfigProvider17,
+  return /* @__PURE__ */ jsx35(
+    ConfigProvider18,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs29("div", { className: "relative w-full", ref: progressRef, children: [
-        /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsxs30("div", { className: "relative w-full", ref: progressRef, children: [
+        /* @__PURE__ */ jsx35(
           Progress,
           {
             className: "w-full",
@@ -2288,7 +3069,7 @@ function ProgressBar({
             strokeColor
           }
         ),
-        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx34(
+        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx35(
           "div",
           {
             className: "checkpoint absolute top-0",
@@ -2314,6 +3095,7 @@ export {
   Calendar,
   Checkbox,
   CheckboxGroup,
+  ColorPalettePickerBasic,
   ColorPickerBasic,
   DataTable,
   DatePickerBasic,