@esic-lab/data-core-ui 0.0.26 → 0.0.28

package/dist/index.mjs

@@ -305,28 +305,6 @@ var require_dayjs_min = __commonJS({
   }
 });
 
-// node_modules/dayjs/plugin/buddhistEra.js
-var require_buddhistEra = __commonJS({
-  "node_modules/dayjs/plugin/buddhistEra.js"(exports, module) {
-    "use strict";
-    !(function(t, e) {
-      "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).dayjs_plugin_buddhistEra = e();
-    })(exports, (function() {
-      "use strict";
-      return function(t, e) {
-        var n = e.prototype, i = n.format;
-        n.format = function(t2) {
-          var e2 = this, n2 = (t2 || "YYYY-MM-DDTHH:mm:ssZ").replace(/(\[[^\]]+])|BBBB|BB/g, (function(t3, n3) {
-            var i2, o = String(e2.$y + 543), f = "BB" === t3 ? [o.slice(-2), 2] : [o, 4];
-            return n3 || (i2 = e2.$utils()).s.apply(i2, f.concat(["0"]));
-          }));
-          return i.bind(this)(n2);
-        };
-      };
-    }));
-  }
-});
-
 // node_modules/dayjs/locale/th.js
 var require_th = __commonJS({
   "node_modules/dayjs/locale/th.js"(exports, module) {
@@ -346,6 +324,134 @@ var require_th = __commonJS({
   }
 });
 
+// node_modules/dayjs/plugin/customParseFormat.js
+var require_customParseFormat = __commonJS({
+  "node_modules/dayjs/plugin/customParseFormat.js"(exports, module) {
+    "use strict";
+    !(function(e, t) {
+      "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e = "undefined" != typeof globalThis ? globalThis : e || self).dayjs_plugin_customParseFormat = t();
+    })(exports, (function() {
+      "use strict";
+      var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, t = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, n = /\d/, r = /\d\d/, i = /\d\d?/, o = /\d*[^-_:/,()\s\d]+/, s = {}, a = function(e2) {
+        return (e2 = +e2) + (e2 > 68 ? 1900 : 2e3);
+      };
+      var f = function(e2) {
+        return function(t2) {
+          this[e2] = +t2;
+        };
+      }, h = [/[+-]\d\d:?(\d\d)?|Z/, function(e2) {
+        (this.zone || (this.zone = {})).offset = (function(e3) {
+          if (!e3) return 0;
+          if ("Z" === e3) return 0;
+          var t2 = e3.match(/([+-]|\d\d)/g), n2 = 60 * t2[1] + (+t2[2] || 0);
+          return 0 === n2 ? 0 : "+" === t2[0] ? -n2 : n2;
+        })(e2);
+      }], u = function(e2) {
+        var t2 = s[e2];
+        return t2 && (t2.indexOf ? t2 : t2.s.concat(t2.f));
+      }, d = function(e2, t2) {
+        var n2, r2 = s.meridiem;
+        if (r2) {
+          for (var i2 = 1; i2 <= 24; i2 += 1) if (e2.indexOf(r2(i2, 0, t2)) > -1) {
+            n2 = i2 > 12;
+            break;
+          }
+        } else n2 = e2 === (t2 ? "pm" : "PM");
+        return n2;
+      }, c = { A: [o, function(e2) {
+        this.afternoon = d(e2, false);
+      }], a: [o, function(e2) {
+        this.afternoon = d(e2, true);
+      }], Q: [n, function(e2) {
+        this.month = 3 * (e2 - 1) + 1;
+      }], S: [n, function(e2) {
+        this.milliseconds = 100 * +e2;
+      }], SS: [r, function(e2) {
+        this.milliseconds = 10 * +e2;
+      }], SSS: [/\d{3}/, function(e2) {
+        this.milliseconds = +e2;
+      }], s: [i, f("seconds")], ss: [i, f("seconds")], m: [i, f("minutes")], mm: [i, f("minutes")], H: [i, f("hours")], h: [i, f("hours")], HH: [i, f("hours")], hh: [i, f("hours")], D: [i, f("day")], DD: [r, f("day")], Do: [o, function(e2) {
+        var t2 = s.ordinal, n2 = e2.match(/\d+/);
+        if (this.day = n2[0], t2) for (var r2 = 1; r2 <= 31; r2 += 1) t2(r2).replace(/\[|\]/g, "") === e2 && (this.day = r2);
+      }], w: [i, f("week")], ww: [r, f("week")], M: [i, f("month")], MM: [r, f("month")], MMM: [o, function(e2) {
+        var t2 = u("months"), n2 = (u("monthsShort") || t2.map((function(e3) {
+          return e3.slice(0, 3);
+        }))).indexOf(e2) + 1;
+        if (n2 < 1) throw new Error();
+        this.month = n2 % 12 || n2;
+      }], MMMM: [o, function(e2) {
+        var t2 = u("months").indexOf(e2) + 1;
+        if (t2 < 1) throw new Error();
+        this.month = t2 % 12 || t2;
+      }], Y: [/[+-]?\d+/, f("year")], YY: [r, function(e2) {
+        this.year = a(e2);
+      }], YYYY: [/\d{4}/, f("year")], Z: h, ZZ: h };
+      function l(n2) {
+        var r2, i2;
+        r2 = n2, i2 = s && s.formats;
+        for (var o2 = (n2 = r2.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (function(t2, n3, r3) {
+          var o3 = r3 && r3.toUpperCase();
+          return n3 || i2[r3] || e[r3] || i2[o3].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (function(e2, t3, n4) {
+            return t3 || n4.slice(1);
+          }));
+        }))).match(t), a2 = o2.length, f2 = 0; f2 < a2; f2 += 1) {
+          var h2 = o2[f2], u2 = c[h2], d2 = u2 && u2[0], l2 = u2 && u2[1];
+          o2[f2] = l2 ? { regex: d2, parser: l2 } : h2.replace(/^\[|\]$/g, "");
+        }
+        return function(e2) {
+          for (var t2 = {}, n3 = 0, r3 = 0; n3 < a2; n3 += 1) {
+            var i3 = o2[n3];
+            if ("string" == typeof i3) r3 += i3.length;
+            else {
+              var s2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r3), u3 = s2.exec(h3)[0];
+              f3.call(t2, u3), e2 = e2.replace(u3, "");
+            }
+          }
+          return (function(e3) {
+            var t3 = e3.afternoon;
+            if (void 0 !== t3) {
+              var n4 = e3.hours;
+              t3 ? n4 < 12 && (e3.hours += 12) : 12 === n4 && (e3.hours = 0), delete e3.afternoon;
+            }
+          })(t2), t2;
+        };
+      }
+      return function(e2, t2, n2) {
+        n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (a = e2.parseTwoDigitYear);
+        var r2 = t2.prototype, i2 = r2.parse;
+        r2.parse = function(e3) {
+          var t3 = e3.date, r3 = e3.utc, o2 = e3.args;
+          this.$u = r3;
+          var a2 = o2[1];
+          if ("string" == typeof a2) {
+            var f2 = true === o2[2], h2 = true === o2[3], u2 = f2 || h2, d2 = o2[2];
+            h2 && (d2 = o2[2]), s = this.$locale(), !f2 && d2 && (s = n2.Ls[d2]), this.$d = (function(e4, t4, n3, r4) {
+              try {
+                if (["x", "X"].indexOf(t4) > -1) return new Date(("X" === t4 ? 1e3 : 1) * e4);
+                var i3 = l(t4)(e4), o3 = i3.year, s2 = i3.month, a3 = i3.day, f3 = i3.hours, h3 = i3.minutes, u3 = i3.seconds, d3 = i3.milliseconds, c3 = i3.zone, m2 = i3.week, M2 = /* @__PURE__ */ new Date(), Y = a3 || (o3 || s2 ? 1 : M2.getDate()), p = o3 || M2.getFullYear(), v = 0;
+                o3 && !s2 || (v = s2 > 0 ? s2 - 1 : M2.getMonth());
+                var D, w = f3 || 0, g = h3 || 0, y = u3 || 0, L = d3 || 0;
+                return c3 ? new Date(Date.UTC(p, v, Y, w, g, y, L + 60 * c3.offset * 1e3)) : n3 ? new Date(Date.UTC(p, v, Y, w, g, y, L)) : (D = new Date(p, v, Y, w, g, y, L), m2 && (D = r4(D).week(m2).toDate()), D);
+              } catch (e5) {
+                return /* @__PURE__ */ new Date("");
+              }
+            })(t3, a2, r3, n2), this.init(), d2 && true !== d2 && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = /* @__PURE__ */ new Date("")), s = {};
+          } else if (a2 instanceof Array) for (var c2 = a2.length, m = 1; m <= c2; m += 1) {
+            o2[1] = a2[m - 1];
+            var M = n2.apply(this, o2);
+            if (M.isValid()) {
+              this.$d = M.$d, this.$L = M.$L, this.init();
+              break;
+            }
+            m === c2 && (this.$d = /* @__PURE__ */ new Date(""));
+          }
+          else i2.call(this, e3);
+        };
+      };
+    }));
+  }
+});
+
 // src/Button/PrimaryButton/PrimaryButton.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function PrimaryButton({
@@ -967,13 +1073,13 @@ function TextInput({
   return /* @__PURE__ */ jsxs13("div", { children: [
     label && /* @__PURE__ */ jsxs13("p", { className: "body-1 mb-[8px]", children: [
       label,
-      required && /* @__PURE__ */ jsx17("span", { className: "text-red-500", children: "\xA0*" })
+      required && /* @__PURE__ */ jsx17("span", { className: "text-red-600", children: "\xA0*" })
     ] }),
     /* @__PURE__ */ jsxs13(
       "div",
       {
         className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center 
-        ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-500" : ""}`,
+        ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-600" : ""}`,
         children: [
           /* @__PURE__ */ jsx17(
             "input",
@@ -992,19 +1098,20 @@ function TextInput({
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx17("p", { className: "text-red-500 body-1", children: error })
+    error && /* @__PURE__ */ jsx17("p", { className: "text-red-600 body-1", children: error })
   ] });
 }
 
-// src/Input/InputField/InputField.tsx
+// src/InputField/InputField.tsx
 import { ConfigProvider as ConfigProvider2, Input } from "antd";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function InputField({
   value,
   onChange,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
-  label,
+  title,
   required,
+  bottomText,
   disabled,
   error,
   addonBefore,
@@ -1023,7 +1130,7 @@ function InputField({
       },
       children: /* @__PURE__ */ jsxs14("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs14("div", { children: [
-          /* @__PURE__ */ jsx18("span", { className: "body-1", children: label }),
+          /* @__PURE__ */ jsx18("span", { className: "body-1", children: title }),
           " ",
           required && /* @__PURE__ */ jsx18("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1042,7 +1149,11 @@ function InputField({
             onClear
           }
         ),
-        error && /* @__PURE__ */ jsx18("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx18("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx18("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
@@ -1097,83 +1208,21 @@ function TextAreaInput({
             disabled
           }
         ),
-        error && /* @__PURE__ */ jsx19("p", { className: "text-red-500 body-1", children: error })
+        error && /* @__PURE__ */ jsx19("p", { className: "text-red-600 body-1", children: error })
       ] })
     }
   ) });
 }
 
-// src/Input/InputFieldNumber/InputFieldNumber.tsx
-import { ConfigProvider as ConfigProvider4, InputNumber } from "antd";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-function InputFieldNumber({
-  value,
-  onChange,
-  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
-  title,
-  required,
-  disabled,
-  error,
-  addonBefore,
-  addonAfter,
-  defaultValue,
-  className,
-  max,
-  min,
-  controls,
-  size,
-  changeOnWheel,
-  formatter,
-  parser
-}) {
-  return /* @__PURE__ */ jsx20(
-    ConfigProvider4,
-    {
-      theme: {
-        token: {
-          fontFamily: "Kanit"
-        }
-      },
-      children: /* @__PURE__ */ jsxs16("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx20("span", { className: "body-1", children: title }),
-          " ",
-          required && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsx20(
-          InputNumber,
-          {
-            value: value ?? void 0,
-            onChange: (val) => onChange(val),
-            placeholder,
-            disabled,
-            className: `body-1 w-full ${className ?? ""}`,
-            addonBefore,
-            addonAfter,
-            defaultValue,
-            max,
-            min,
-            controls,
-            size,
-            changeOnWheel,
-            formatter,
-            parser
-          }
-        ),
-        error && /* @__PURE__ */ jsx20("p", { className: "text-red-500 caption-1", children: error })
-      ] })
-    }
-  );
-}
-
 // src/ColorPicker/ColorPicker.tsx
-import { ConfigProvider as ConfigProvider5, ColorPicker } from "antd";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider4, ColorPicker } from "antd";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function ColorPickerBasic({
   value,
   onChange,
   required,
-  label,
+  title,
+  bottomText,
   error,
   disabled,
   allowClear,
@@ -1181,8 +1230,8 @@ function ColorPickerBasic({
   className,
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
 }) {
-  return /* @__PURE__ */ jsx21(
-    ConfigProvider5,
+  return /* @__PURE__ */ jsx20(
+    ConfigProvider4,
     {
       theme: {
         token: {
@@ -1190,13 +1239,13 @@ function ColorPickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs17("div", { children: [
-          /* @__PURE__ */ jsx21("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs16("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx20("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx20(
           ColorPicker,
           {
             defaultFormat,
@@ -1208,9 +1257,9 @@ function ColorPickerBasic({
             showText: (color) => {
               const hex = color.toHexString();
               if (!value) {
-                return /* @__PURE__ */ jsx21("span", { children: placeholder });
+                return /* @__PURE__ */ jsx20("span", { children: placeholder });
               }
-              return /* @__PURE__ */ jsxs17("span", { children: [
+              return /* @__PURE__ */ jsxs16("span", { children: [
                 "(",
                 hex,
                 ")"
@@ -1219,7 +1268,11 @@ function ColorPickerBasic({
             disabled
           }
         ),
-        error && /* @__PURE__ */ jsx21("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx20("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx20("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
@@ -1227,33 +1280,16 @@ function ColorPickerBasic({
 
 // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
 var import_dayjs = __toESM(require_dayjs_min());
-var import_buddhistEra = __toESM(require_buddhistEra());
-import { ConfigProvider as ConfigProvider6, DatePicker } from "antd";
+var import_th2 = __toESM(require_th());
+import { ConfigProvider as ConfigProvider5, DatePicker } from "antd";
 import thTH from "antd/locale/th_TH";
-import { format } from "date-fns";
-import { th as thFns } from "date-fns/locale";
-
-// src/DatePicker/convertToBuddhist.ts
-import th from "antd/es/date-picker/locale/th_TH";
-var buddhistLocale = {
-  ...th,
-  lang: {
-    ...th.lang,
-    fieldDateFormat: "BBBB-MM-DD",
-    fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
-    yearFormat: "BBBB",
-    cellYearFormat: "BBBB"
-  }
-};
-
-// src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
-import_dayjs.default.extend(import_buddhistEra.default);
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function DatePickerBasic({
   value,
   onChange,
   required,
-  label,
+  title,
+  bottomText,
   error,
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   disabled,
@@ -1264,8 +1300,10 @@ function DatePickerBasic({
   className,
   size
 }) {
-  return /* @__PURE__ */ jsx22(
-    ConfigProvider6,
+  const dateFormat = "DD/MM/YYYY";
+  import_dayjs.default.locale("th_TH");
+  return /* @__PURE__ */ jsx21(
+    ConfigProvider5,
     {
       locale: thTH,
       theme: {
@@ -1274,56 +1312,54 @@ function DatePickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs18("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs18("div", { children: [
-          /* @__PURE__ */ jsx22("span", { className: "body-1", children: label }),
-          required && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
+      children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx21("span", { className: "body-1", children: title }),
+          " ",
+          required && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx21(
           DatePicker,
           {
             className: `body-1 w-full ${className ?? ""}`,
-            value: value ? (0, import_dayjs.default)(value) : null,
+            value,
             placeholder,
-            onChange: (date) => {
-              onChange(date ? date.toDate() : null);
-            },
+            onChange,
             allowClear: true,
             disabled,
-            format: (date) => date ? format(date.toDate(), "dd/MM/yyyy", { locale: thFns }).replace(
-              /\d{4}$/,
-              (y) => String(parseInt(y) + 543)
-            ) : "",
-            defaultValue: defaultValue ? (0, import_dayjs.default)(defaultValue) : null,
-            disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
-            minDate: minDate ? (0, import_dayjs.default)(minDate) : void 0,
-            maxDate: maxDate ? (0, import_dayjs.default)(maxDate) : void 0,
-            size,
-            locale: buddhistLocale
+            format: dateFormat,
+            defaultValue,
+            minDate,
+            maxDate,
+            disabledDate,
+            size
           }
         ),
-        error && /* @__PURE__ */ jsx22("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx21("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx21("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/DatePicker/DatePickerRangePicker/DatePickerRangePicker.tsx
-var import_th2 = __toESM(require_th());
+var import_th3 = __toESM(require_th());
+var import_customParseFormat = __toESM(require_customParseFormat());
 var import_dayjs2 = __toESM(require_dayjs_min());
-var import_buddhistEra2 = __toESM(require_buddhistEra());
-import { ConfigProvider as ConfigProvider7, DatePicker as DatePicker2 } from "antd";
+import { ConfigProvider as ConfigProvider6, DatePicker as DatePicker2 } from "antd";
 import thTH2 from "antd/locale/th_TH";
-import { format as format2 } from "date-fns";
-import { th as thFns2 } from "date-fns/locale";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
-import_dayjs2.default.extend(import_buddhistEra2.default);
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import_dayjs2.default.extend(import_customParseFormat.default);
 function DatePickerRangePicker({
   value,
   onChange,
   placeholder = ["\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"],
-  label,
+  title,
   required,
+  bottomText,
   error,
   disabled,
   minDate,
@@ -1334,8 +1370,10 @@ function DatePickerRangePicker({
   onOpenChange,
   onCalendarChange
 }) {
-  return /* @__PURE__ */ jsx23(
-    ConfigProvider7,
+  const dateFormat = "DD/MM/YYYY";
+  import_dayjs2.default.locale("th_TH");
+  return /* @__PURE__ */ jsx22(
+    ConfigProvider6,
     {
       locale: thTH2,
       theme: {
@@ -1344,178 +1382,142 @@ function DatePickerRangePicker({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs19("div", { children: [
-          /* @__PURE__ */ jsx23("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs18("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs18("div", { children: [
+          /* @__PURE__ */ jsx22("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx22(
           DatePicker2.RangePicker,
           {
-            format: (date) => date ? format2(date.toDate(), "dd/MM/yyyy", { locale: thFns2 }).replace(
-              /\d{4}$/,
-              (y) => String(parseInt(y) + 543)
-            ) : "",
-            value: value ? [
-              value[0] ? (0, import_dayjs2.default)(value[0]) : null,
-              value[1] ? (0, import_dayjs2.default)(value[1]) : null
-            ] : null,
+            format: dateFormat,
+            value,
             placeholder,
             className: `body-1 w-full ${className ?? ""}`,
-            onChange: (dates, dateStrings) => {
-              if (!dates) {
-                onChange(null);
-              } else {
-                onChange([
-                  dates[0] ? dates[0].toDate() : null,
-                  dates[1] ? dates[1].toDate() : null
-                ]);
-              }
-            },
+            onChange,
             allowClear: true,
             disabled,
-            disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
-            minDate: minDate ? (0, import_dayjs2.default)(minDate) : void 0,
-            maxDate: maxDate ? (0, import_dayjs2.default)(maxDate) : void 0,
+            minDate,
+            maxDate,
+            disabledDate,
             size,
             onOpenChange,
-            onCalendarChange: (dates, dateStrings, info) => {
-              if (!dates) {
-                onCalendarChange?.([null, null], dateStrings, info);
-              } else {
-                onCalendarChange?.(
-                  [
-                    dates[0] ? dates[0].toDate() : null,
-                    dates[1] ? dates[1].toDate() : null
-                  ],
-                  dateStrings,
-                  info
-                );
-              }
-            },
-            locale: buddhistLocale
+            onCalendarChange
           }
         ),
-        error && /* @__PURE__ */ jsx23("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs18("div", { children: [
+          /* @__PURE__ */ jsx22("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx22("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/TimePicker/TimePickerBasic/TimePickerBasic.tsx
-var import_dayjs3 = __toESM(require_dayjs_min());
-import { ConfigProvider as ConfigProvider8, TimePicker } from "antd";
-import thTH3 from "antd/locale/th_TH";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider7, TimePicker } from "antd";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function TimePickerBasic({
   value,
   onChange,
   required,
-  label,
+  title,
+  bottomText,
   error,
   placeholder,
   disabled,
   className
 }) {
-  return /* @__PURE__ */ jsx24(
-    ConfigProvider8,
+  return /* @__PURE__ */ jsx23(
+    ConfigProvider7,
     {
-      locale: thTH3,
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsx24("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs19("div", { children: [
+          /* @__PURE__ */ jsx23("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx23(
           TimePicker,
           {
             format: "HH:mm",
             className: `body-1 w-full ${className ?? ""}`,
-            value: value ? (0, import_dayjs3.default)(value) : null,
+            value,
             placeholder,
-            onChange: (time) => {
-              onChange(time ? time.toDate() : null);
-            },
+            onChange,
             allowClear: true,
             disabled
           }
         ),
-        error && /* @__PURE__ */ jsx24("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs19("div", { children: [
+          /* @__PURE__ */ jsx23("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx23("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/TimePicker/TimePickerRangePicker/TimerPickerRangePicker.tsx
-var import_dayjs4 = __toESM(require_dayjs_min());
-import { ConfigProvider as ConfigProvider9, TimePicker as TimePicker2 } from "antd";
-import thTH4 from "antd/locale/th_TH";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider8, TimePicker as TimePicker2 } from "antd";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function TimePickerRangePicker({
   value,
   onChange,
   placeholder = ["\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"],
-  label,
+  title,
   required,
+  bottomText,
   error,
   disabled,
   className
 }) {
-  return /* @__PURE__ */ jsx25(
-    ConfigProvider9,
+  return /* @__PURE__ */ jsx24(
+    ConfigProvider8,
     {
-      locale: thTH4,
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx25("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx24("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(
           TimePicker2.RangePicker,
           {
             format: "HH:mm",
-            value: value ? [
-              value[0] ? (0, import_dayjs4.default)(value[0]) : null,
-              value[1] ? (0, import_dayjs4.default)(value[1]) : null
-            ] : null,
+            value,
             placeholder,
             className: `body-1 w-full ${className ?? ""}`,
-            onChange: (dates, dateStrings) => {
-              if (!dates) {
-                onChange(null);
-              } else {
-                onChange([
-                  dates[0] ? dates[0].toDate() : null,
-                  dates[1] ? dates[1].toDate() : null
-                ]);
-              }
-            },
+            onChange,
             allowClear: true,
-            disabled,
-            showNow: true
+            disabled
           }
         ),
-        error && /* @__PURE__ */ jsx25("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx24("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx24("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-import { ConfigProvider as ConfigProvider10, ColorPicker as ColorPicker2, theme } from "antd";
+import { ConfigProvider as ConfigProvider9, ColorPicker as ColorPicker2, theme } from "antd";
 
 // node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -2217,7 +2219,7 @@ var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a"
 greyDark.primary = greyDark[5];
 
 // src/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function genPresets(presets = presetPalettes) {
   return Object.entries(presets).map(([label, colors]) => ({
     label,
@@ -2229,7 +2231,8 @@ function ColorPalettePickerBasic({
   value,
   onChange,
   required,
-  label,
+  title,
+  bottomText,
   error,
   disabled,
   allowClear,
@@ -2244,8 +2247,8 @@ function ColorPalettePickerBasic({
     red,
     green
   });
-  return /* @__PURE__ */ jsx26(
-    ConfigProvider10,
+  return /* @__PURE__ */ jsx25(
+    ConfigProvider9,
     {
       theme: {
         token: {
@@ -2253,13 +2256,13 @@ function ColorPalettePickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx26("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx25("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx25(
           ColorPicker2,
           {
             defaultFormat,
@@ -2272,9 +2275,9 @@ function ColorPalettePickerBasic({
             showText: (color) => {
               const hex = color.toHexString();
               if (!value) {
-                return /* @__PURE__ */ jsx26("span", { children: placeholder });
+                return /* @__PURE__ */ jsx25("span", { children: placeholder });
               }
-              return /* @__PURE__ */ jsxs22("span", { children: [
+              return /* @__PURE__ */ jsxs21("span", { children: [
                 "(",
                 hex,
                 ")"
@@ -2284,21 +2287,26 @@ function ColorPalettePickerBasic({
             onClear
           }
         ),
-        error && /* @__PURE__ */ jsx26("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx25("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx25("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/Select/SelectField/SelectField.tsx
-import { Select, ConfigProvider as ConfigProvider11 } from "antd";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Select, ConfigProvider as ConfigProvider10 } from "antd";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectField({
   value,
   onChange,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
-  label,
+  title,
   required,
+  bottomText,
   error,
   disabled,
   defaultValue,
@@ -2310,8 +2318,8 @@ function SelectField({
   className,
   onClear
 }) {
-  return /* @__PURE__ */ jsx27(
-    ConfigProvider11,
+  return /* @__PURE__ */ jsx26(
+    ConfigProvider10,
     {
       theme: {
         token: {
@@ -2319,13 +2327,13 @@ function SelectField({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs23("div", { children: [
-          /* @__PURE__ */ jsx27("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx26("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26(
           Select,
           {
             showSearch: true,
@@ -2340,26 +2348,43 @@ function SelectField({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ jsx27("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,
             onClear
           }
         ),
-        error && /* @__PURE__ */ jsx27("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx26("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx26("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-import { Select as Select2, ConfigProvider as ConfigProvider12 } from "antd";
-import { jsx as jsx28, jsxs as jsxs24 } 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,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
-  label,
+  title,
   required,
+  bottomText,
   error,
   disabled,
   defaultValue,
@@ -2370,21 +2395,21 @@ function SelectFieldGroup({
   handleSearch,
   className
 }) {
-  return /* @__PURE__ */ jsx28(
-    ConfigProvider12,
+  return /* @__PURE__ */ jsx27(
+    ConfigProvider11,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs24("div", { children: [
-          /* @__PURE__ */ jsx28("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx27("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27(
           Select2,
           {
             showSearch: true,
@@ -2399,7 +2424,7 @@ function SelectFieldGroup({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ jsx28(
+            prefix: prefix ? /* @__PURE__ */ jsx27(
               "span",
               {
                 style: {
@@ -2415,14 +2440,18 @@ function SelectFieldGroup({
             allowClear: true
           }
         ),
-        error && /* @__PURE__ */ jsx28("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx27("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx27("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-import { Select as Select3, ConfigProvider as ConfigProvider13 } from "antd";
+import { Select as Select3, ConfigProvider as ConfigProvider12 } from "antd";
 
 // src/Select/SelectFieldStatus/StatusMockup.ts
 var status = [
@@ -2435,21 +2464,22 @@ var status = [
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 import { DownOutlined } from "@ant-design/icons";
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function SelectFieldStatus({
   value,
   onChange,
   placeholder,
-  label,
+  title,
   required,
+  bottomText,
   disabled,
   error,
   options,
   className
 }) {
   const selectedItem = status.find((s) => s.value === value);
-  return /* @__PURE__ */ jsx29(
-    ConfigProvider13,
+  return /* @__PURE__ */ jsx28(
+    ConfigProvider12,
     {
       theme: {
         components: {
@@ -2464,17 +2494,17 @@ function SelectFieldStatus({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx29("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx28("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx28(
           Select3,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ jsx29(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 ?? ""}`,
@@ -2485,14 +2515,18 @@ function SelectFieldStatus({
             showSearch: true
           }
         ),
-        error && /* @__PURE__ */ jsx29("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx28("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx28("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-import { Select as Select4, ConfigProvider as ConfigProvider14 } from "antd";
+import { Select as Select4, ConfigProvider as ConfigProvider13 } from "antd";
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status2 = [
@@ -2502,21 +2536,22 @@ var status2 = [
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
 import { DownOutlined as DownOutlined2 } from "@ant-design/icons";
-import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function SelectFieldStatusReport({
   value,
   onChange,
   placeholder,
-  label,
+  title,
   required,
+  bottomText,
   disabled,
   error,
   className,
   options
 }) {
   const selectedItem = status2.find((s) => s.value === value);
-  return /* @__PURE__ */ jsx30(
-    ConfigProvider14,
+  return /* @__PURE__ */ jsx29(
+    ConfigProvider13,
     {
       theme: {
         components: {
@@ -2531,17 +2566,17 @@ function SelectFieldStatusReport({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs26("div", { children: [
-          /* @__PURE__ */ jsx30("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx29("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29(
           Select4,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ jsx30(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 ?? ""}`,
@@ -2552,19 +2587,24 @@ function SelectFieldStatusReport({
             showSearch: true
           }
         ),
-        error && /* @__PURE__ */ jsx30("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx29("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx29("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-import { Select as Select5, ConfigProvider as ConfigProvider15 } from "antd";
+import { Select as Select5, ConfigProvider as ConfigProvider14 } from "antd";
 import { useState as useState6 } from "react";
-import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectFieldTag({
-  label,
+  title,
   required,
+  bottomText,
   placeholder,
   options,
   error,
@@ -2594,21 +2634,21 @@ function SelectFieldTag({
     }
     onChange?.([]);
   };
-  return /* @__PURE__ */ jsx31(
-    ConfigProvider15,
+  return /* @__PURE__ */ jsx30(
+    ConfigProvider14,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs27("div", { children: [
-          /* @__PURE__ */ jsx31("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs26("div", { children: [
+          /* @__PURE__ */ jsx30("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx30(
           Select5,
           {
             mode: "tags",
@@ -2627,7 +2667,11 @@ function SelectFieldTag({
             onClear
           }
         ),
-        error && /* @__PURE__ */ jsx31("p", { className: "text-red-500 caption-1", children: error })
+        /* @__PURE__ */ jsxs26("div", { children: [
+          /* @__PURE__ */ jsx30("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx30("p", { className: "caption-1 text-red-500 ", children: error })
+        ] })
       ] })
     }
   );
@@ -2635,15 +2679,16 @@ function SelectFieldTag({
 
 // src/Select/SelectCustom/SelectCustom.tsx
 import { IconTrash } from "@tabler/icons-react";
-import { Select as Select6, ConfigProvider as ConfigProvider16 } from "antd";
+import { Select as Select6, ConfigProvider as ConfigProvider15 } from "antd";
 import { useState as useState7 } from "react";
-import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectCustom({
-  label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
+  title = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01",
   options,
   required = false,
   onChange,
+  bottomText,
   error,
   onClear
 }) {
@@ -2666,8 +2711,8 @@ function SelectCustom({
     });
   };
   const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
-  return /* @__PURE__ */ jsx32(
-    ConfigProvider16,
+  return /* @__PURE__ */ jsx31(
+    ConfigProvider15,
     {
       theme: {
         token: {
@@ -2675,13 +2720,13 @@ function SelectCustom({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs28("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs28("div", { children: [
-          /* @__PURE__ */ jsx32("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs27("div", { children: [
+          /* @__PURE__ */ jsx31("span", { className: "body-1", children: title }),
           " ",
-          required && /* @__PURE__ */ jsx32("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx31(
           Select6,
           {
             value,
@@ -2692,37 +2737,28 @@ function SelectCustom({
             onClear
           }
         ),
-        error && /* @__PURE__ */ jsx32("p", { className: "text-red-500 caption-1", children: error }),
-        /* @__PURE__ */ jsx32("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs28(
-          "div",
-          {
-            className: "flex justify-between items-center py-[2px] body-1",
-            children: [
-              /* @__PURE__ */ jsxs28("div", { className: "flex flex-row gap-[8px]", children: [
-                /* @__PURE__ */ jsxs28("p", { children: [
-                  index + 1,
-                  "."
-                ] }),
-                /* @__PURE__ */ jsx32("p", { children: v })
-              ] }),
-              /* @__PURE__ */ jsx32(
-                IconTrash,
-                {
-                  className: "cursor-pointer",
-                  onClick: () => handleDelete(v)
-                }
-              )
-            ]
-          },
-          index
-        )) })
+        /* @__PURE__ */ jsxs27("div", { children: [
+          /* @__PURE__ */ jsx31("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          error && /* @__PURE__ */ jsx31("p", { className: "caption-1 text-red-500 ", children: error })
+        ] }),
+        /* @__PURE__ */ jsx31("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
+          /* @__PURE__ */ jsxs27("div", { className: "flex flex-row gap-[8px]", children: [
+            /* @__PURE__ */ jsxs27("p", { children: [
+              index + 1,
+              "."
+            ] }),
+            /* @__PURE__ */ jsx31("p", { children: v })
+          ] }),
+          /* @__PURE__ */ jsx31(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
+        ] }, index)) })
       ] })
     }
   );
 }
 
 // src/SortFilter/SortFilter.tsx
-import { ConfigProvider as ConfigProvider17 } from "antd";
+import { ConfigProvider as ConfigProvider16 } from "antd";
 import { CalendarOutlined } from "@ant-design/icons";
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -2755,7 +2791,7 @@ var quarters = [
 // src/SortFilter/SortFilter.tsx
 import { useState as useState8 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
-import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function SortFilter({
   showYear = true,
   showQuarter = true,
@@ -2766,20 +2802,20 @@ function SortFilter({
   const [yearValue, setYearValue] = useState8();
   const [monthValue, setMonthValue] = useState8();
   const [quarterValue, setQuartersValue] = useState8();
-  return /* @__PURE__ */ jsx33(
-    ConfigProvider17,
+  return /* @__PURE__ */ jsx32(
+    ConfigProvider16,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs29("div", { className: "w-full flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs29("div", { className: "w-full flex gap-[10px]", children: [
-          showYear && /* @__PURE__ */ jsx33("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsxs28("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "w-full flex gap-[10px]", children: [
+          showYear && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx33(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
               onChange: setYearValue,
               options: years.map((s) => ({
                 value: s.value,
@@ -2789,10 +2825,10 @@ function SortFilter({
               value: yearValue
             }
           ) }),
-          showMonth && /* @__PURE__ */ jsx33("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx33(
+          showMonth && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx33(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
               onChange: setMonthValue,
               options: months.map((s) => ({
                 value: s.value,
@@ -2802,10 +2838,10 @@ function SortFilter({
               placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
             }
           ) }),
-          showQuarter && /* @__PURE__ */ jsx33("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx33(
+          showQuarter && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx33(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
               onChange: setQuartersValue,
               options: quarters.map((s) => ({
                 value: s.value,
@@ -2816,8 +2852,8 @@ function SortFilter({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs29("div", { className: "flex gap-[10px]", children: [
-          /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs28("div", { className: "flex gap-[10px]", children: [
+          /* @__PURE__ */ jsx32(
             IconSortDescending2,
             {
               size: 24,
@@ -2825,7 +2861,7 @@ function SortFilter({
               onClick: onSortClick
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx32(
             IconFilter,
             {
               size: 24,
@@ -2842,7 +2878,7 @@ function SortFilter({
 // src/Upload/FileUploader/FileUploader.tsx
 import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
 import { useRef as useRef2, useState as useState9 } from "react";
-import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
   onError,
@@ -2875,7 +2911,7 @@ function FileUploader({
   const handleRemoveFile = async (index) => {
     try {
       if (onRemove) {
-        await onRemove(index);
+        await onRemove();
       }
       const updatedList = [...fileList];
       updatedList.splice(index, 1);
@@ -2913,10 +2949,10 @@ function FileUploader({
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  return /* @__PURE__ */ jsxs30("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx34("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ jsxs30("div", { children: [
-      mode === "upload" ? /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs29("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx33("p", { className: "body-1", children: label }),
+    /* @__PURE__ */ jsxs29("div", { children: [
+      mode === "upload" ? /* @__PURE__ */ jsx33(
         "button",
         {
           type: "button",
@@ -2924,15 +2960,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__ */ jsxs30(Fragment5, { children: [
-            /* @__PURE__ */ jsx34(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs29(Fragment5, { children: [
+            /* @__PURE__ */ jsx33(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs30(Fragment5, { children: [
-            /* @__PURE__ */ jsx34(IconUpload, { size: 15, className: "text-gray-400" }),
+          ] }) : /* @__PURE__ */ jsxs29(Fragment5, { children: [
+            /* @__PURE__ */ jsx33(IconUpload, { size: 15, className: "text-gray-400" }),
             " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
           ] })
         }
-      ) : /* @__PURE__ */ jsx34(
+      ) : /* @__PURE__ */ jsx33(
         "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
@@ -2946,17 +2982,17 @@ function FileUploader({
           },
           onDragLeave: () => setDragActive(false),
           onDrop: handleDrop,
-          children: uploading ? /* @__PURE__ */ jsxs30("div", { className: "flex justify-center items-center gap-2", children: [
-            /* @__PURE__ */ jsx34(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs29("div", { className: "flex justify-center items-center gap-2", children: [
+            /* @__PURE__ */ jsx33(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ jsx34(IconUpload, { size: 20 }),
-            /* @__PURE__ */ jsx34("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__ */ jsx34("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__ */ jsxs29("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx33(IconUpload, { size: 20 }),
+            /* @__PURE__ */ jsx33("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__ */ jsx33("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__ */ jsx34(
+      /* @__PURE__ */ jsx33(
         "input",
         {
           type: "file",
@@ -2969,13 +3005,13 @@ function FileUploader({
         }
       )
     ] }),
-    description && /* @__PURE__ */ jsx34("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ jsx34("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
-        /* @__PURE__ */ jsx34("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx34(IconPaperclip, { size: 15 }) }),
-        /* @__PURE__ */ jsx34("span", { className: "truncate", children: file.name })
+    description && /* @__PURE__ */ jsx33("p", { className: "text-gray-400 body-4", children: description }),
+    /* @__PURE__ */ jsx33("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
+        /* @__PURE__ */ jsx33("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx33(IconPaperclip, { size: 15 }) }),
+        /* @__PURE__ */ jsx33("span", { className: "truncate", children: file.name })
       ] }),
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx33(
         IconTrash2,
         {
           size: 20,
@@ -3009,9 +3045,9 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
-import { ConfigProvider as ConfigProvider18 } from "antd";
+import { ConfigProvider as ConfigProvider17 } from "antd";
 import { Breadcrumb } from "antd";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Breadcrumbs({
   items,
   separator,
@@ -3019,15 +3055,15 @@ function Breadcrumbs({
   classname,
   params
 }) {
-  return /* @__PURE__ */ jsx35(
-    ConfigProvider18,
+  return /* @__PURE__ */ jsx34(
+    ConfigProvider17,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx34(
         Breadcrumb,
         {
           items,
@@ -3042,8 +3078,8 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-import { ConfigProvider as ConfigProvider19 } from "antd";
-import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider18 } from "antd";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
     weekday: "long",
@@ -3051,17 +3087,17 @@ function HeadingPage({ Heading }) {
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ jsx36(
-    ConfigProvider19,
+  return /* @__PURE__ */ jsx35(
+    ConfigProvider18,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
-        /* @__PURE__ */ jsx36("p", { className: "headline-5", children: Heading }),
-        /* @__PURE__ */ jsxs31("p", { className: "body-1", children: [
+      children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
+        /* @__PURE__ */ jsx35("p", { className: "headline-5", children: Heading }),
+        /* @__PURE__ */ jsxs30("p", { className: "body-1", children: [
           " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
           today
         ] })
@@ -3071,9 +3107,9 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-import { ConfigProvider as ConfigProvider20, Progress } from "antd";
+import { ConfigProvider as ConfigProvider19, Progress } from "antd";
 import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
-import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
   size = "default",
@@ -3106,16 +3142,16 @@ function ProgressBar({
     observer.observe(inner);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx37(
-    ConfigProvider20,
+  return /* @__PURE__ */ jsx36(
+    ConfigProvider19,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs32("div", { className: "relative w-full", ref: progressRef, children: [
-        /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsxs31("div", { className: "relative w-full", ref: progressRef, children: [
+        /* @__PURE__ */ jsx36(
           Progress,
           {
             className: "w-full",
@@ -3131,7 +3167,7 @@ function ProgressBar({
             strokeColor
           }
         ),
-        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx37(
+        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx36(
           "div",
           {
             className: "checkpoint absolute top-0",
@@ -3153,7 +3189,7 @@ function ProgressBar({
 }
 
 // src/KpiSection/KpiSection.tsx
-import { ConfigProvider as ConfigProvider21, message } from "antd";
+import { ConfigProvider as ConfigProvider20, message } from "antd";
 import { useEffect as useEffect3, useState as useState12 } from "react";
 
 // src/KpiSection/hooks/useGetKpiSection.ts
@@ -3303,14 +3339,8 @@ function useGetKpiSection() {
 }
 
 // src/KpiSection/KpiSection.tsx
-import {
-  IconCheck as IconCheck2,
-  IconCirclePlus,
-  IconPencil,
-  IconTrash as IconTrash3,
-  IconX as IconX2
-} from "@tabler/icons-react";
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { IconCheck as IconCheck2, IconCirclePlus, IconPencil, IconTrash as IconTrash3, IconX as IconX2 } from "@tabler/icons-react";
+import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 function KpiSection({ type, onChangeKpiList }) {
   const {
     handleAddKpi,
@@ -3340,8 +3370,8 @@ function KpiSection({ type, onChangeKpiList }) {
       onChangeKpiList(kpiList);
     }
   }, [kpiList]);
-  return /* @__PURE__ */ jsx38(
-    ConfigProvider21,
+  return /* @__PURE__ */ jsx37(
+    ConfigProvider20,
     {
       theme: {
         token: {
@@ -3349,27 +3379,29 @@ function KpiSection({ type, onChangeKpiList }) {
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs33("div", { className: "container-input", children: [
+      children: /* @__PURE__ */ jsxs32("div", { className: "container-input", children: [
         messageContainer,
-        type === "number" && /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
-            /* @__PURE__ */ jsx38(
+        type === "number" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx37(
               InputField,
               {
                 value: nameKpi,
-                label: "\u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
+                title: "\u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
                 placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                required: true,
                 onChange: (value) => setNameKpi(value ?? ""),
                 className: "h-[32px]",
                 error: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx37(
               InputField,
               {
                 value: kpiValue,
-                label: "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
+                title: "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
                 placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                required: true,
                 onChange: (value) => {
                   if (value === void 0 || value === "") {
                     setKpiValue("");
@@ -3387,71 +3419,60 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.kpiValue
               }
             ),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx37(
               InputField,
               {
                 value: unitValue,
-                label: "\u0E2B\u0E19\u0E48\u0E27\u0E22",
+                title: "\u0E2B\u0E19\u0E48\u0E27\u0E22",
                 placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                required: true,
                 onChange: (value) => setUnitValue(value ?? ""),
                 className: "h-[32px]",
                 error: errors.unitValue
               }
             ),
-            /* @__PURE__ */ jsx38(
-              "div",
+            /* @__PURE__ */ jsx37("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx37(
+              IconCirclePlus,
               {
-                className: `flex justify-end mt-[28px]`,
-                children: /* @__PURE__ */ jsx38(
-                  IconCirclePlus,
-                  {
-                    className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
-                    stroke: 1,
-                    onClick: () => handleAddKpi(type)
-                  }
-                )
+                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                stroke: 1,
+                onClick: () => handleAddKpi(type)
               }
-            )
+            ) })
           ] }),
-          /* @__PURE__ */ jsx38("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs33(
+          /* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32(
             "div",
             {
               className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
               children: [
-                /* @__PURE__ */ jsxs33("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                /* @__PURE__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
                   index + 1,
                   "."
                 ] }),
-                kpi.isEditing ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
-                  /* @__PURE__ */ jsx38(
+                kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
+                  /* @__PURE__ */ jsx37(
                     InputField,
                     {
                       value: kpi.name,
                       onChange: (value) => setKpiList(
-                        (prev) => prev.map(
-                          (item) => item.id === kpi.id ? { ...item, name: value ?? "" } : item
-                        )
+                        (prev) => prev.map((item) => item.id === kpi.id ? { ...item, name: value ?? "" } : item)
                       ),
                       error: itemErrors[kpi.id]?.name
                     }
                   ),
-                  /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx37(
                     InputField,
                     {
                       value: kpi.value?.toString(),
                       onChange: (value) => {
                         if (value === void 0 || value === "") {
                           setKpiList(
-                            (prev) => prev.map(
-                              (item) => item.id === kpi.id ? { ...item, value: "" } : item
-                            )
+                            (prev) => prev.map((item) => item.id === kpi.id ? { ...item, value: "" } : item)
                           );
                           setHasShownError(false);
                         } else if (/^\d*\.?\d*$/.test(value)) {
                           setKpiList(
-                            (prev) => prev.map(
-                              (item) => item.id === kpi.id ? { ...item, value } : item
-                            )
+                            (prev) => prev.map((item) => item.id === kpi.id ? { ...item, value } : item)
                           );
                           setHasShownError(false);
                         } else {
@@ -3464,59 +3485,39 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.value
                     }
                   ),
-                  /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx37(
                     InputField,
                     {
                       value: kpi.unit,
                       onChange: (value) => setKpiList(
-                        (prev) => prev.map(
-                          (item) => item.id === kpi.id ? { ...item, unit: value ?? "" } : item
-                        )
+                        (prev) => prev.map((item) => item.id === kpi.id ? { ...item, unit: value ?? "" } : item)
                       ),
                       error: itemErrors[kpi.id]?.unit
                     }
                   ),
-                  /* @__PURE__ */ jsxs33(
+                  /* @__PURE__ */ jsxs32(
                     "div",
                     {
                       className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
                       children: [
-                        /* @__PURE__ */ jsx38(
+                        /* @__PURE__ */ jsx37(
                           IconCheck2,
                           {
                             className: "w-[30px] h-[30px] cursor-pointer",
                             onClick: () => handleSave(kpi.id, type)
                           }
                         ),
-                        /* @__PURE__ */ jsx38(
-                          IconX2,
-                          {
-                            className: "w-[30px] h-[30px] cursor-pointer",
-                            onClick: () => handleCancel(kpi.id)
-                          }
-                        )
+                        /* @__PURE__ */ jsx37(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
                       ]
                     }
                   )
-                ] }) : /* @__PURE__ */ jsxs33(Fragment6, { children: [
-                  /* @__PURE__ */ jsx38("p", { className: "body-1", children: kpi.name }),
-                  /* @__PURE__ */ jsx38("p", { className: "body-1", children: kpi.value }),
-                  /* @__PURE__ */ jsx38("p", { className: "body-1", children: kpi.unit }),
-                  /* @__PURE__ */ jsxs33("div", { className: "flex gap-3 justify-end", children: [
-                    /* @__PURE__ */ jsx38(
-                      IconPencil,
-                      {
-                        className: "w-[30px] h-[30px] cursor-pointer",
-                        onClick: () => handleEdit(kpi.id)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx38(
-                      IconTrash3,
-                      {
-                        className: "w-[30px] h-[30px] cursor-pointer",
-                        onClick: () => handleDelete(kpi.id)
-                      }
-                    )
+                ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
+                  /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.value }),
+                  /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.unit }),
+                  /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ jsx37(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                    /* @__PURE__ */ jsx37(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
                   ] })
                 ] })
               ]
@@ -3524,101 +3525,69 @@ function KpiSection({ type, onChangeKpiList }) {
             kpi.id
           )) })
         ] }),
-        type === "text" && /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
-            /* @__PURE__ */ jsx38(
+        type === "text" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx37(
               InputField,
               {
                 value: nameKpi,
-                label: "\u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
+                title: "\u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
                 placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                required: true,
                 onChange: (value) => setNameKpi(value ?? ""),
                 className: "h-[32px]",
                 error: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ jsx38(
-              "div",
+            /* @__PURE__ */ jsx37("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx37(
+              IconCirclePlus,
               {
-                className: `flex justify-end mt-[28px]`,
-                children: /* @__PURE__ */ jsx38(
-                  IconCirclePlus,
-                  {
-                    className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
-                    stroke: 1,
-                    onClick: () => handleAddKpi(type)
-                  }
-                )
+                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                stroke: 1,
+                onClick: () => handleAddKpi(type)
               }
-            )
+            ) })
           ] }),
-          /* @__PURE__ */ jsx38("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs33(
-            "div",
-            {
-              className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]",
-              children: [
-                /* @__PURE__ */ jsxs33("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
-                  index + 1,
-                  "."
-                ] }),
-                kpi.isEditing ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
-                  /* @__PURE__ */ jsx38(
-                    InputField,
-                    {
-                      value: kpi.name,
-                      onChange: (value) => setKpiList(
-                        (prev) => prev.map(
-                          (item) => item.id === kpi.id ? { ...item, name: value ?? "" } : item
-                        )
-                      ),
-                      error: itemErrors[kpi.id]?.name
-                    }
+          /* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
+            /* @__PURE__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+              index + 1,
+              "."
+            ] }),
+            kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
+              /* @__PURE__ */ jsx37(
+                InputField,
+                {
+                  value: kpi.name,
+                  onChange: (value) => setKpiList(
+                    (prev) => prev.map((item) => item.id === kpi.id ? { ...item, name: value ?? "" } : item)
                   ),
-                  /* @__PURE__ */ jsxs33(
-                    "div",
-                    {
-                      className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
-                      children: [
-                        /* @__PURE__ */ jsx38(
-                          IconCheck2,
-                          {
-                            className: "w-[30px] h-[30px] cursor-pointer",
-                            onClick: () => handleSave(kpi.id, type)
-                          }
-                        ),
-                        /* @__PURE__ */ jsx38(
-                          IconX2,
-                          {
-                            className: "w-[30px] h-[30px] cursor-pointer",
-                            onClick: () => handleCancel(kpi.id)
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsxs33(Fragment6, { children: [
-                  /* @__PURE__ */ jsx38("p", { className: "body-1", children: kpi.name }),
-                  /* @__PURE__ */ jsxs33("div", { className: "flex gap-3 justify-end", children: [
-                    /* @__PURE__ */ jsx38(
-                      IconPencil,
+                  error: itemErrors[kpi.id]?.name
+                }
+              ),
+              /* @__PURE__ */ jsxs32(
+                "div",
+                {
+                  className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx37(
+                      IconCheck2,
                       {
                         className: "w-[30px] h-[30px] cursor-pointer",
-                        onClick: () => handleEdit(kpi.id)
+                        onClick: () => handleSave(kpi.id, type)
                       }
                     ),
-                    /* @__PURE__ */ jsx38(
-                      IconTrash3,
-                      {
-                        className: "w-[30px] h-[30px] cursor-pointer",
-                        onClick: () => handleDelete(kpi.id)
-                      }
-                    )
-                  ] })
-                ] })
-              ]
-            },
-            kpi.id
-          )) })
+                    /* @__PURE__ */ jsx37(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
+              /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
+              /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
+                /* @__PURE__ */ jsx37(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                /* @__PURE__ */ jsx37(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
+              ] })
+            ] })
+          ] }, kpi.id)) })
         ] })
       ] })
     }
@@ -3639,7 +3608,6 @@ export {
   GhostButton,
   HeadingPage,
   InputField,
-  InputFieldNumber,
   KpiSection,
   Loader,
   MenuNavBar,