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

package/dist/index.mjs

@@ -629,7 +629,7 @@ function Switch({ label, checked, onChange, disabled }) {
       onChange(!checked);
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-[10px]", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[10px]", children: [
     label && /* @__PURE__ */ jsx9("p", { className: `body-1 ${disabled ? "opacity-50 select-none" : ""}`, children: label }),
     /* @__PURE__ */ jsx9(
       "button",
@@ -851,9 +851,9 @@ function DataTable({ columns, data, onSort, isLoading }) {
 }
 
 // src/Table/DataTable/AntDataTable.tsx
-import { Table } from "antd";
+import { ConfigProvider, Table } from "antd";
 import { useState as useState3 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15 } from "react/jsx-runtime";
 function AntDataTable({
   dataSource,
   columns,
@@ -871,17 +871,28 @@ function AntDataTable({
       onRowSelect && onRowSelect(newSelectedRowKeys);
     }
   };
-  return /* @__PURE__ */ jsx15(
-    Table,
+  return /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsx15(
+    ConfigProvider,
     {
-      dataSource,
-      columns,
-      rowSelection: rowCheckbox ? rowSelection : void 0,
-      pagination: { position: ["bottomCenter"], pageSize },
-      style: { width },
-      scroll: { y: height }
+      theme: {
+        components: {},
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsx15(
+        Table,
+        {
+          dataSource,
+          columns,
+          rowSelection: rowCheckbox ? rowSelection : void 0,
+          pagination: { position: ["bottomCenter"], pageSize },
+          style: { width },
+          scroll: { y: height }
+        }
+      )
     }
-  );
+  ) });
 }
 
 // src/Calendar/Calendar/Calendar.tsx
@@ -892,7 +903,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import thLocale from "@fullcalendar/core/locales/th";
 import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function Calendar({ events }) {
   const calendarRef = useRef(null);
   const [monthTitle, setMonthTitle] = useState4("");
@@ -1012,7 +1023,7 @@ function Calendar({ events }) {
           });
         },
         eventContent: (arg) => {
-          return /* @__PURE__ */ jsx16(Fragment2, { children: /* @__PURE__ */ jsx16("div", { className: "flex items-center h-[28px] p-[4px] border-green-500 border-l-[10px] bg-red-400 rounded text-left text-white caption-1", children: arg.event.title }) });
+          return /* @__PURE__ */ jsx16(Fragment3, { children: /* @__PURE__ */ jsx16("div", { className: "flex items-center h-[28px] p-[4px] border-green-500 border-l-[10px] bg-red-400 rounded text-left text-white caption-1", children: arg.event.title }) });
         },
         moreLinkContent: (arg) => `+${arg.num} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`
       }
@@ -1091,12 +1102,12 @@ function TextInput({
 }
 
 // src/InputField/InputField.tsx
-import { ConfigProvider, Input } from "antd";
+import { ConfigProvider as ConfigProvider2, Input } from "antd";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function InputField({
   value,
   onChange,
-  placeholder,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
   title,
   require: require2,
   bottomText,
@@ -1105,19 +1116,20 @@ function InputField({
   errorMessage,
   addonBefore,
   addonAfter,
-  defaultValue
+  defaultValue,
+  className
 }) {
   return /* @__PURE__ */ jsx18(
-    ConfigProvider,
+    ConfigProvider2,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs14("div", { children: [
+      children: /* @__PURE__ */ jsxs14("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs14("div", { children: [
-          /* @__PURE__ */ jsx18("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx18("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx18("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1127,6 +1139,7 @@ function InputField({
             value,
             placeholder,
             disabled,
+            className: `body-1 w-full ${className ?? ""}`,
             onChange: (e) => onChange(e.target.value || void 0),
             allowClear: true,
             addonBefore,
@@ -1145,8 +1158,8 @@ function InputField({
 }
 
 // src/Input/TextArea/TextArea.tsx
-import { Input as Input2 } from "antd";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider3, Input as Input2 } from "antd";
+import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var { TextArea } = Input2;
 function TextAreaInput({
   label,
@@ -1161,34 +1174,45 @@ function TextAreaInput({
   error,
   disabled
 }) {
-  return /* @__PURE__ */ jsxs15("div", { children: [
-    label && /* @__PURE__ */ jsxs15("p", { className: "body-1 mb-[8px]", children: [
-      label,
-      " ",
-      required && /* @__PURE__ */ jsx19("span", { className: "text-red-500", children: "\xA0*" })
-    ] }),
-    /* @__PURE__ */ jsx19(
-      TextArea,
-      {
-        value,
-        rows: height,
-        style: {
-          ...error && resizable ? { borderColor: "red" } : {},
-          ...disabled || !resizable ? { resize: "none" } : {}
-        },
-        placeholder,
-        maxLength,
-        showCount,
-        onChange: (e) => onChange(e.target.value),
-        disabled
-      }
-    ),
-    error && /* @__PURE__ */ jsx19("p", { className: "text-red-600 body-1", children: error })
-  ] });
+  return /* @__PURE__ */ jsx19(Fragment4, { children: /* @__PURE__ */ jsx19(
+    ConfigProvider3,
+    {
+      theme: {
+        components: {},
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs15("div", { children: [
+        label && /* @__PURE__ */ jsxs15("p", { className: "body-1 mb-[8px]", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx19("span", { className: "text-red-500", children: "\xA0*" })
+        ] }),
+        /* @__PURE__ */ jsx19(
+          TextArea,
+          {
+            value,
+            rows: height,
+            style: {
+              ...error && resizable ? { borderColor: "red" } : {},
+              ...disabled || !resizable ? { resize: "none" } : {}
+            },
+            placeholder,
+            maxLength,
+            showCount,
+            onChange: (e) => onChange(e.target.value),
+            disabled
+          }
+        ),
+        error && /* @__PURE__ */ jsx19("p", { className: "text-red-600 body-1", children: error })
+      ] })
+    }
+  ) });
 }
 
 // src/ColorPicker/ColorPicker.tsx
-import { ConfigProvider as ConfigProvider2, ColorPicker } from "antd";
+import { ConfigProvider as ConfigProvider4, ColorPicker } from "antd";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function ColorPickerBasic({
   value,
@@ -1205,16 +1229,16 @@ function ColorPickerBasic({
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
 }) {
   return /* @__PURE__ */ jsx20(
-    ConfigProvider2,
+    ConfigProvider4,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs16("div", { children: [
+      children: /* @__PURE__ */ jsxs16("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx20("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx20("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1222,7 +1246,7 @@ function ColorPickerBasic({
           ColorPicker,
           {
             defaultFormat,
-            className,
+            className: `body-1 w-full ${className ?? ""}`,
             value,
             defaultValue: "#ffff",
             onChange,
@@ -1254,7 +1278,7 @@ function ColorPickerBasic({
 // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
-import { ConfigProvider as ConfigProvider3, DatePicker } from "antd";
+import { ConfigProvider as ConfigProvider5, DatePicker } from "antd";
 import thTH from "antd/locale/th_TH";
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function DatePickerBasic({
@@ -1265,7 +1289,7 @@ function DatePickerBasic({
   bottomText,
   showError,
   errorMessage,
-  placeholder,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   disabled,
   defaultValue,
   minDate,
@@ -1277,7 +1301,7 @@ function DatePickerBasic({
   const dateFormat = "DD/MM/YYYY";
   import_dayjs.default.locale("th_TH");
   return /* @__PURE__ */ jsx21(
-    ConfigProvider3,
+    ConfigProvider5,
     {
       locale: thTH,
       theme: {
@@ -1285,16 +1309,16 @@ function DatePickerBasic({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs17("div", { children: [
+      children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs17("div", { children: [
-          /* @__PURE__ */ jsx21("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx21("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ jsx21(
           DatePicker,
           {
-            className: `body-1 ${className ?? ""}`,
+            className: `body-1 w-full ${className ?? ""}`,
             value,
             placeholder,
             onChange,
@@ -1322,7 +1346,7 @@ function DatePickerBasic({
 var import_th3 = __toESM(require_th());
 var import_customParseFormat = __toESM(require_customParseFormat());
 var import_dayjs2 = __toESM(require_dayjs_min());
-import { ConfigProvider as ConfigProvider4, DatePicker as DatePicker2 } from "antd";
+import { ConfigProvider as ConfigProvider6, DatePicker as DatePicker2 } from "antd";
 import thTH2 from "antd/locale/th_TH";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 import_dayjs2.default.extend(import_customParseFormat.default);
@@ -1347,7 +1371,7 @@ function DatePickerRangePicker({
   const dateFormat = "DD/MM/YYYY";
   import_dayjs2.default.locale("th_TH");
   return /* @__PURE__ */ jsx22(
-    ConfigProvider4,
+    ConfigProvider6,
     {
       locale: thTH2,
       theme: {
@@ -1355,9 +1379,9 @@ function DatePickerRangePicker({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs18("div", { children: [
+      children: /* @__PURE__ */ jsxs18("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs18("div", { children: [
-          /* @__PURE__ */ jsx22("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx22("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1367,7 +1391,7 @@ function DatePickerRangePicker({
             format: dateFormat,
             value,
             placeholder,
-            className: `body-1 ${className ?? ""}`,
+            className: `body-1 w-full ${className ?? ""}`,
             onChange,
             allowClear: true,
             disabled,
@@ -1390,30 +1414,20 @@ function DatePickerRangePicker({
 }
 
 // src/TimePicker/TimePickerBasic/TimePickerBasic.tsx
-import { ConfigProvider as ConfigProvider5, TimePicker } from "antd";
+import { ConfigProvider as ConfigProvider7, TimePicker } from "antd";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
-function TimePickerBasic({
-  value,
-  onChange,
-  require: require2,
-  title,
-  bottomText,
-  showError,
-  errorMessage,
-  placeholder,
-  disabled
-}) {
+function TimePickerBasic({ value, onChange, require: require2, title, bottomText, showError, errorMessage, placeholder, disabled, className }) {
   return /* @__PURE__ */ jsx23(
-    ConfigProvider5,
+    ConfigProvider7,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs19("div", { children: [
+      children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs19("div", { children: [
-          /* @__PURE__ */ jsx23("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx23("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1421,7 +1435,7 @@ function TimePickerBasic({
           TimePicker,
           {
             format: "HH:mm",
-            className: "body-1",
+            className: `body-1 w-full ${className ?? ""}`,
             value,
             placeholder,
             onChange,
@@ -1440,7 +1454,7 @@ function TimePickerBasic({
 }
 
 // src/TimePicker/TimePickerRangePicker/TimerPickerRangePicker.tsx
-import { ConfigProvider as ConfigProvider6, TimePicker as TimePicker2 } from "antd";
+import { ConfigProvider as ConfigProvider8, TimePicker as TimePicker2 } from "antd";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function TimePickerRangePicker({
   value,
@@ -1451,19 +1465,20 @@ function TimePickerRangePicker({
   bottomText,
   showError,
   errorMessage,
-  disabled
+  disabled,
+  className
 }) {
   return /* @__PURE__ */ jsx24(
-    ConfigProvider6,
+    ConfigProvider8,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs20("div", { children: [
+      children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsx24("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx24("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1473,7 +1488,7 @@ function TimePickerRangePicker({
             format: "HH:mm",
             value,
             placeholder,
-            className: "body-1",
+            className: `body-1 w-full ${className ?? ""}`,
             onChange,
             allowClear: true,
             disabled
@@ -1490,12 +1505,12 @@ function TimePickerRangePicker({
 }
 
 // src/Select/SelectField/SelectField.tsx
-import { Select, ConfigProvider as ConfigProvider7 } from "antd";
+import { Select, ConfigProvider as ConfigProvider9 } from "antd";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function SelectField({
   value,
   onChange,
-  placeholder,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
   title,
   require: require2,
   bottomText,
@@ -1507,26 +1522,20 @@ function SelectField({
   mode,
   prefix,
   prefixSize = 20,
-  handleSearch
+  handleSearch,
+  className
 }) {
   return /* @__PURE__ */ jsx25(
-    ConfigProvider7,
+    ConfigProvider9,
     {
       theme: {
-        components: {
-          Select: {
-            hoverBorderColor: "#D9D9D9",
-            activeBorderColor: "#D9D9D9",
-            activeOutlineColor: "#D9D9D9"
-          }
-        },
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs21("div", { children: [
+      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx25("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx25("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1537,7 +1546,7 @@ function SelectField({
             value,
             defaultValue,
             onChange,
-            className: "body-3 flex justify-center w-full",
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
             filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
@@ -1560,12 +1569,12 @@ function SelectField({
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-import { Select as Select2, ConfigProvider as ConfigProvider8 } from "antd";
+import { Select as Select2, ConfigProvider as ConfigProvider10 } from "antd";
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectFieldGroup({
   value,
   onChange,
-  placeholder,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
   title,
   require: require2,
   bottomText,
@@ -1577,26 +1586,20 @@ function SelectFieldGroup({
   mode,
   prefix,
   prefixSize = 20,
-  handleSearch
+  handleSearch,
+  className
 }) {
   return /* @__PURE__ */ jsx26(
-    ConfigProvider8,
+    ConfigProvider10,
     {
       theme: {
-        components: {
-          Select: {
-            hoverBorderColor: "#D9D9D9",
-            activeBorderColor: "#D9D9D9",
-            activeOutlineColor: "#D9D9D9"
-          }
-        },
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs22("div", { children: [
+      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx26("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx26("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1607,7 +1610,7 @@ function SelectFieldGroup({
             value,
             defaultValue,
             onChange,
-            className: "body-3 flex justify-center w-full",
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
             filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
@@ -1642,7 +1645,7 @@ function SelectFieldGroup({
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-import { Select as Select3, ConfigProvider as ConfigProvider9 } from "antd";
+import { Select as Select3, ConfigProvider as ConfigProvider11 } from "antd";
 
 // src/Select/SelectFieldStatus/StatusMockup.ts
 var status = [
@@ -1665,11 +1668,13 @@ function SelectFieldStatus({
   bottomText,
   disabled,
   showError,
-  errorMessage
+  errorMessage,
+  options,
+  className
 }) {
   const selectedItem = status.find((s) => s.value === value);
   return /* @__PURE__ */ jsx27(
-    ConfigProvider9,
+    ConfigProvider11,
     {
       theme: {
         components: {
@@ -1684,9 +1689,9 @@ function SelectFieldStatus({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs23("div", { children: [
+      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs23("div", { children: [
-          /* @__PURE__ */ jsx27("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx27("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1697,15 +1702,11 @@ function SelectFieldStatus({
             suffixIcon: /* @__PURE__ */ jsx27(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
-            className: "body-3 custom-select flex justify-center w-full",
+            className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
-            filterSort: (optionA, optionB) => (optionA?.label ?? "").toLowerCase().localeCompare((optionB?.label ?? "").toLowerCase()),
-            options: status.map((s) => ({
-              value: s.value,
-              label: s.label,
-              color: s.color
-            }))
+            filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
+            options
           }
         ),
         /* @__PURE__ */ jsxs23("div", { children: [
@@ -1719,7 +1720,7 @@ function SelectFieldStatus({
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-import { Select as Select4, ConfigProvider as ConfigProvider10 } from "antd";
+import { Select as Select4, ConfigProvider as ConfigProvider12 } from "antd";
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status2 = [
@@ -1739,11 +1740,12 @@ function SelectFieldStatusReport({
   bottomText,
   disabled,
   showError,
-  errorMessage
+  errorMessage,
+  className
 }) {
   const selectedItem = status2.find((s) => s.value === value);
   return /* @__PURE__ */ jsx28(
-    ConfigProvider10,
+    ConfigProvider12,
     {
       theme: {
         components: {
@@ -1758,9 +1760,9 @@ function SelectFieldStatusReport({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs24("div", { children: [
+      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs24("div", { children: [
-          /* @__PURE__ */ jsx28("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx28("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1771,7 +1773,7 @@ function SelectFieldStatusReport({
             suffixIcon: /* @__PURE__ */ jsx28(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
-            className: "body-3 custom-select flex justify-center w-full",
+            className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
             filterSort: (optionA, optionB) => (optionA?.label ?? "").toLowerCase().localeCompare((optionB?.label ?? "").toLowerCase()),
@@ -1793,7 +1795,7 @@ function SelectFieldStatusReport({
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-import { Select as Select5, ConfigProvider as ConfigProvider11 } from "antd";
+import { Select as Select5, ConfigProvider as ConfigProvider13 } from "antd";
 import { useState as useState6 } from "react";
 import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function SelectFieldTag({
@@ -1805,6 +1807,7 @@ function SelectFieldTag({
   showError,
   errorMessage,
   value: controlledValue,
+  className,
   onChange
 }) {
   const [internalValue, setInternalValue] = useState6([]);
@@ -1829,23 +1832,16 @@ function SelectFieldTag({
     onChange?.([]);
   };
   return /* @__PURE__ */ jsx29(
-    ConfigProvider11,
+    ConfigProvider13,
     {
       theme: {
-        components: {
-          Select: {
-            hoverBorderColor: "#D9D9D9",
-            activeBorderColor: "#D9D9D9",
-            activeOutlineColor: "#D9D9D9"
-          }
-        },
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs25("div", { children: [
+      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
         /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx29("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ jsx29("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1853,7 +1849,7 @@ function SelectFieldTag({
           Select5,
           {
             mode: "tags",
-            className: "flex justify-center w-full",
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
             placeholder,
             value,
             onChange: handleChange,
@@ -1878,7 +1874,7 @@ function SelectFieldTag({
 }
 
 // src/SortFilter/SortFilter.tsx
-import { ConfigProvider as ConfigProvider12 } from "antd";
+import { ConfigProvider as ConfigProvider14 } from "antd";
 import { CalendarOutlined } from "@ant-design/icons";
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -1923,7 +1919,7 @@ function SortFilter({
   const [monthValue, setMonthValue] = useState7();
   const [quarterValue, setQuartersValue] = useState7();
   return /* @__PURE__ */ jsx30(
-    ConfigProvider12,
+    ConfigProvider14,
     {
       theme: {
         token: {
@@ -1998,7 +1994,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 Fragment3, jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
   onError,
@@ -2080,10 +2076,10 @@ 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(Fragment3, { children: [
+          children: uploading ? /* @__PURE__ */ jsxs27(Fragment5, { children: [
             /* @__PURE__ */ jsx31(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs27(Fragment3, { children: [
+          ] }) : /* @__PURE__ */ jsxs27(Fragment5, { children: [
             /* @__PURE__ */ jsx31(IconUpload, { size: 15, className: "text-gray-400" }),
             " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
           ] })
@@ -2165,7 +2161,7 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
-import { ConfigProvider as ConfigProvider13 } from "antd";
+import { ConfigProvider as ConfigProvider15 } from "antd";
 import { Breadcrumb } from "antd";
 import { jsx as jsx32 } from "react/jsx-runtime";
 function Breadcrumbs({
@@ -2176,7 +2172,7 @@ function Breadcrumbs({
   params
 }) {
   return /* @__PURE__ */ jsx32(
-    ConfigProvider13,
+    ConfigProvider15,
     {
       theme: {
         token: {
@@ -2198,7 +2194,7 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-import { ConfigProvider as ConfigProvider14 } from "antd";
+import { ConfigProvider as ConfigProvider16 } from "antd";
 import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
@@ -2208,7 +2204,7 @@ function HeadingPage({ Heading }) {
     year: "numeric"
   });
   return /* @__PURE__ */ jsx33(
-    ConfigProvider14,
+    ConfigProvider16,
     {
       theme: {
         token: {
@@ -2227,7 +2223,7 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-import { ConfigProvider as ConfigProvider15, Progress } from "antd";
+import { ConfigProvider as ConfigProvider17, 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";
 function ProgressBar({
@@ -2263,7 +2259,7 @@ function ProgressBar({
     return () => observer.disconnect();
   }, []);
   return /* @__PURE__ */ jsx34(
-    ConfigProvider15,
+    ConfigProvider17,
     {
       theme: {
         token: {