@esic-lab/data-core-ui 0.0.36 → 0.0.37

package/dist/index.mjs

@@ -0,0 +1,3258 @@
+// src/Button/PrimaryButton/PrimaryButton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PrimaryButton({
+  title,
+  onClick,
+  iconLeft,
+  iconRight,
+  bgColor = "bg-primary-500",
+  textColor = "black",
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] body-1 transition 
+      ${disabled ? "text-gray-400 bg-gray-100 cursor-not-allowed" : `${bgColor} text-${textColor} cursor-pointer 
+             hover:brightness-95 active:brightness-90`}`,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-[10px]", children: [
+        iconLeft && /* @__PURE__ */ jsx("div", { children: iconLeft }),
+        title,
+        iconRight && /* @__PURE__ */ jsx("div", { children: iconRight })
+      ] })
+    }
+  );
+}
+
+// src/Button/SecondaryButton/SecondaryButton.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SecondaryButton({ title, onClick, iconLeft, iconRight, disabled }) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] body-1 transition ${disabled ? "text-gray-400 border-gray-400 bg-gray-100 cursor-not-allowed" : "cursor-pointer bg-white border-black text-black hover:bg-gray-100 active:bg-gray-200"}`,
+      children: /* @__PURE__ */ jsxs2("div", { className: "flex justify-center items-center gap-[10px]", children: [
+        iconLeft && /* @__PURE__ */ jsx2("div", { children: iconLeft }),
+        title,
+        iconRight && /* @__PURE__ */ jsx2("div", { children: iconRight })
+      ] })
+    }
+  );
+}
+
+// src/Button/GhostButton/GhostButton.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function GhostButton({ title, onClick, iconLeft, iconRight, disabled }) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] body-1 transition
+      ${disabled ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "bg-[#E9E9E9] cursor-pointer hover:bg-[#d6d6d6] active:bg-[#c4c4c4]"}`,
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex justify-center items-center gap-[10px]", children: [
+        iconLeft && /* @__PURE__ */ jsx3("div", { children: iconLeft }),
+        title,
+        iconRight && /* @__PURE__ */ jsx3("div", { children: iconRight })
+      ] })
+    }
+  );
+}
+
+// src/Button/TabSelectionButton/TabSelectionButton.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var TabSelectionButton = ({ title, now, onClickGoto }) => {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex subtitle-2", children: [
+    title.map((text) => /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: () => onClickGoto(text.path),
+        className: `text-nowrap px-2 cursor-pointer  ${now === text.path ? "border-b-primary-700 text-primary-700 border-b-2" : "border-b-gray-200 border-b-2"}`,
+        children: text.name
+      }
+    )),
+    /* @__PURE__ */ jsx4("div", { className: "border-b-gray-200 border-b-2 w-full" })
+  ] });
+};
+
+// src/Loader/Loader/Loader.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Loader({ size = 25, color = "#000000" }) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        borderWidth: 4,
+        borderStyle: "solid",
+        borderColor: color,
+        borderTopColor: "transparent"
+      },
+      className: "rounded-full animate-spin"
+    }
+  );
+}
+
+// src/Checkbox/Checkbox/Checkbox.tsx
+import { IconCheck } from "@tabler/icons-react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Checkbox({ label, checked, onChange, disabled }) {
+  const handleClick = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `flex gap-[10px] items-center 
+        ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: `flex justify-center items-center border-[1px] border-black w-[24px] h-[24px] rounded-[8px] transition-colors duration-100
+          ${checked ? "bg-black text-white" : "bg-white text-black"} 
+          ${disabled ? "pointer-events-none" : ""}`,
+            children: /* @__PURE__ */ jsx6(
+              "span",
+              {
+                className: `flex justify-center items-center transition-transform duration-150 
+            ${checked ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
+                children: /* @__PURE__ */ jsx6(IconCheck, { size: 20 })
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx6("p", { className: "body-1 select-none", children: label })
+      ]
+    }
+  );
+}
+
+// src/Checkbox/CheckboxGroup/CheckboxGroup.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function CheckboxGroup({ options, onChange, alignment = "vertical" }) {
+  return /* @__PURE__ */ jsx7("div", { className: `flex gap-4 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ jsx7(
+    Checkbox,
+    {
+      checked: opt.checked,
+      label: opt.label,
+      onChange: () => onChange(opt.label),
+      disabled: opt.disabled
+    },
+    opt.label
+  )) });
+}
+
+// src/Radio/Radio/Radio.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Radio({ selected, onChange, disabled }) {
+  const handleClick = () => {
+    if (!disabled) {
+      onChange(!selected);
+    }
+  };
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: `
+        flex justify-center items-center w-[16px] h-[16px] border-[1px] border-black rounded-full
+        ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+      `,
+      onClick: handleClick,
+      "aria-disabled": disabled,
+      children: selected && /* @__PURE__ */ jsx8("div", { className: `bg-black w-[10px] h-[10px] rounded-full transition-all duration-300` })
+    }
+  );
+}
+
+// src/Radio/RadioGroup/RadioGroup.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function RadioGroup({ options, value, onChange, alignment = "horizontal" }) {
+  return /* @__PURE__ */ jsx9("div", { className: `flex gap-2 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+    /* @__PURE__ */ jsx9(Radio, { selected: value === opt.value, onChange: () => onChange(opt.value), disabled: opt.disabled }),
+    /* @__PURE__ */ jsx9("span", { className: `body-1 ${opt.disabled ? "text-gray-400 cursor-not-allowed" : ""}`, children: opt.label })
+  ] }, opt.value)) });
+}
+
+// src/Switch/Switch/Switch.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function Switch({ label, checked, onChange, disabled }) {
+  const handleClick = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-[10px]", children: [
+    label && /* @__PURE__ */ jsx10("p", { className: `body-1 ${disabled ? "opacity-50 select-none" : ""}`, children: label }),
+    /* @__PURE__ */ jsx10(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled,
+        "aria-disabled": disabled,
+        className: `
+          w-13 h-7 flex items-center rounded-full p-1 transition-colors duration-300
+          ${checked ? "bg-blue-500" : "bg-gray-300"}
+          ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+        `,
+        children: /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: `bg-white w-5 h-5 rounded-full shadow-md transform transition-transform duration-300 
+            ${checked ? "translate-x-6" : "translate-x-0"}`
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/Switch/SwitchSelect/SwitchSelect.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function SwitchSelect({
+  option,
+  onClick,
+  value,
+  label,
+  required,
+  color
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col container-input", children: [
+    label && /* @__PURE__ */ jsxs8("p", { className: `body-1`, children: [
+      label,
+      " ",
+      required && /* @__PURE__ */ jsx11("span", { className: "text-red-500", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: "flex", children: option.map((item, index) => /* @__PURE__ */ jsx11(
+      "button",
+      {
+        onClick: () => onClick(item.value),
+        className: `
+            body-1 border-y-1 border-primary-500 cursor-pointer h-[32px] px-2
+        ${item.value === value ? `${color ? `bg-[${color}]` : `bg-primary-500`} text-white` : "bg-white text-primary-500"}
+        ${index === 0 ? "border-l-1 rounded-l-lg" : index === option.length - 1 ? "border-r-1 rounded-r-lg" : "border-x-1"}
+        `,
+        children: item.label
+      },
+      item.value
+    )) })
+  ] });
+}
+
+// src/NavBar/MenuNavBar/MenuNavBar.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function MenuNavBar({ menus, onClick }) {
+  return /* @__PURE__ */ jsx12("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs9("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
+    /* @__PURE__ */ jsx12("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
+    menu?.subMenus.map((subMenu) => /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: "group flex justify-center items-center gap-[10px] p-[10px] w-[202px] h-[47px] rounded-[6px] subtitle-2 cursor-pointer hover:bg-red-100 active:bg-primary-500 hover:text-white active:text-white",
+        onClick: () => onClick(subMenu.path),
+        children: [
+          /* @__PURE__ */ jsxs9("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: [
+            subMenu.icon && /* @__PURE__ */ jsx12("span", { className: `block ${subMenu.iconActive ? "group-active:hidden" : ""}`, children: subMenu.icon }),
+            subMenu.iconActive && /* @__PURE__ */ jsx12("span", { className: "hidden group-active:block", children: subMenu.iconActive })
+          ] }),
+          subMenu.title,
+          /* @__PURE__ */ jsx12("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
+        ]
+      },
+      `sub_${subMenu.title}`
+    ))
+  ] }, `menu_${menu.title}`)) });
+}
+
+// src/NavBar/MenuNavBar/Sidebar.tsx
+import { IconChevronLeftPipe, IconChevronRightPipe } from "@tabler/icons-react";
+import { createContext, useContext, useState } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var SidebarContext = createContext({ expanded: false });
+function Sidebar({ children, logo }) {
+  const [expanded, setExpanded] = useState(true);
+  return /* @__PURE__ */ jsx13("aside", { className: "h-screen", children: /* @__PURE__ */ jsxs10("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
+    /* @__PURE__ */ jsxs10("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
+      expanded && logo && /* @__PURE__ */ jsx13("img", { src: logo, width: 120, className: "ml-auto" }),
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          className: "p-1.5 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer ml-auto",
+          onClick: () => setExpanded((curr) => !curr),
+          children: expanded ? /* @__PURE__ */ jsx13(IconChevronLeftPipe, {}) : /* @__PURE__ */ jsx13(IconChevronRightPipe, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx13(SidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsx13("ul", { className: "flex-1 px-3", children }) })
+  ] }) });
+}
+
+// src/NavBar/TopNavBar/TopNavBar.tsx
+import { IconBellRinging } from "@tabler/icons-react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function TopNavBar({ onClickNoti, logo }) {
+  return /* @__PURE__ */ jsxs11("div", { className: "w-full h-full flex", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
+      logo,
+      /* @__PURE__ */ jsx14("p", { className: "subtitle-1", children: "Project Management" })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [
+      /* @__PURE__ */ jsx14("div", { children: "Search" }),
+      /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(IconBellRinging, { onClick: onClickNoti, className: "cursor-pointer" }) }),
+      /* @__PURE__ */ jsx14("div", { className: "w-[40px] h-[40px] bg-gray-400 rounded-full cursor-pointer" })
+    ] })
+  ] });
+}
+
+// src/Table/DataTable/DataTable.tsx
+import { IconSelector, IconSortAscending, IconSortDescending } from "@tabler/icons-react";
+import { useState as useState2 } from "react";
+
+// src/Table/Pagination/Pagination.tsx
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
+import { useMemo } from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const getPages = useMemo(() => {
+    if (totalPages <= 7) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const pages = [];
+    pages.push(1);
+    if (currentPage > 3) {
+      pages.push("...");
+    }
+    const start = Math.max(2, currentPage - 1);
+    const end = Math.min(totalPages - 1, currentPage + 1);
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    if (currentPage < totalPages - 2) {
+      pages.push("...");
+    }
+    pages.push(totalPages);
+    return pages;
+  }, [totalPages, currentPage]);
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-center gap-2 mt-4 body-1", children: [
+    /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        className: "px-3 py-1 disabled:opacity-50 flex gap-[8px] cursor-pointer",
+        disabled: currentPage === 1,
+        onClick: () => onPageChange(currentPage - 1),
+        children: [
+          /* @__PURE__ */ jsx15(IconArrowLeft, {}),
+          "\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A"
+        ]
+      }
+    ),
+    getPages.map(
+      (page, i) => typeof page === "string" ? /* @__PURE__ */ jsx15("span", { className: "px-2", children: page }, i) : /* @__PURE__ */ jsx15(
+        "button",
+        {
+          className: `w-[32px] h-[32px] rounded-[8px] px-3 py-1 cursor-pointer 
+            ${currentPage === page ? "bg-black text-white" : "hover:bg-gray-100"}`,
+          onClick: () => onPageChange(page),
+          children: page
+        },
+        i
+      )
+    ),
+    /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        className: "px-3 py-1 disabled:opacity-50 flex gap-[8px] cursor-pointer",
+        disabled: currentPage === totalPages,
+        onClick: () => onPageChange(currentPage + 1),
+        children: [
+          "\u0E16\u0E31\u0E14\u0E44\u0E1B",
+          /* @__PURE__ */ jsx15(IconArrowRight, {})
+        ]
+      }
+    )
+  ] });
+}
+
+// src/Table/DataTable/DataTable.tsx
+import { Fragment, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function DataTable({ columns, data, onSort, isLoading }) {
+  const cols = Math.max(1, columns.length);
+  const gridClass = "grid [grid-template-columns:repeat(var(--cols),minmax(0,1fr))]";
+  const [sortConfig, setSortConfig] = useState2(null);
+  const [page, setPage] = useState2(1);
+  const onSorting = (config) => {
+    if (config) {
+      setSortConfig({ key: config?.key, direction: config?.direction });
+      onSort();
+    }
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "border rounded-md w-full h-full", children: [
+    /* @__PURE__ */ jsx16("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => {
+      const isActive = sortConfig?.key === col.accessor;
+      const direction = isActive ? sortConfig?.direction : null;
+      return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-[8px] py-[8px] px-[16px] body-4 truncate", children: [
+        col.header,
+        col.sortable && /* @__PURE__ */ jsxs13(Fragment, { children: [
+          direction === null && /* @__PURE__ */ jsx16(
+            IconSelector,
+            {
+              size: 15,
+              className: "hover:text-red-400 cursor-pointer",
+              onClick: () => onSorting({ key: col.accessor, direction: "asc" })
+            }
+          ),
+          direction === "asc" && /* @__PURE__ */ jsx16(
+            IconSortAscending,
+            {
+              size: 15,
+              className: "cursor-pointer text-red-500",
+              onClick: () => onSorting({ key: col.accessor, direction: "desc" })
+            }
+          ),
+          direction === "desc" && /* @__PURE__ */ jsx16(
+            IconSortDescending,
+            {
+              size: 15,
+              className: "cursor-pointer text-red-500",
+              onClick: () => onSorting({ key: col.accessor, direction: null })
+            }
+          )
+        ] })
+      ] }, i);
+    }) }),
+    isLoading ? /* @__PURE__ */ jsx16("div", { className: "flex justify-center items-center w-full h-full", children: /* @__PURE__ */ jsx16(Loader, {}) }) : /* @__PURE__ */ jsx16(Fragment, { children: data.map((row, i) => /* @__PURE__ */ jsx16(
+      "div",
+      {
+        className: `${gridClass} ${data.length - 1 !== i ? "border-b border-gray-200" : ""} items-center`,
+        style: { ["--cols"]: cols },
+        children: columns.map((col, c) => /* @__PURE__ */ jsx16("div", { className: "py-[8px] px-[16px] body-3 truncate", children: typeof col.accessor === "function" ? col.accessor(row) : String(row[col.accessor]) }, c))
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(Pagination, { currentPage: page, itemsPerPage: 5, totalItems: 10, onPageChange: setPage }) })
+  ] });
+}
+
+// src/Table/DataTable/AntDataTable.tsx
+import { ConfigProvider, Table } from "antd";
+import { useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
+function AntDataTable({
+  dataSource,
+  columns,
+  pageSize = 10,
+  rowCheckbox,
+  onRowSelect,
+  // onFilteredDataChange,
+  onFilter,
+  onChange,
+  width,
+  height,
+  pagination
+}) {
+  const [selectedRowKeys, setSelectedRowKeys] = useState3([]);
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (newSelectedRowKeys) => {
+      setSelectedRowKeys(newSelectedRowKeys);
+      onRowSelect && onRowSelect(newSelectedRowKeys);
+    }
+  };
+  const handleChange = (paginationArgs, filters, sorter, extra) => {
+    onChange?.(paginationArgs, filters, sorter, extra);
+    onFilter(filters);
+  };
+  return /* @__PURE__ */ jsx17(Fragment2, { children: /* @__PURE__ */ jsx17(
+    ConfigProvider,
+    {
+      theme: {
+        components: {},
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 14
+        }
+      },
+      children: /* @__PURE__ */ jsx17(
+        Table,
+        {
+          dataSource,
+          columns,
+          rowSelection: rowCheckbox ? rowSelection : void 0,
+          onChange: handleChange,
+          pagination: pagination ? { position: ["bottomCenter"], pageSize } : false,
+          style: { width },
+          scroll: { y: height }
+        }
+      )
+    }
+  ) });
+}
+
+// src/Calendar/Calendar/Calendar.tsx
+import { useEffect, useRef, useState as useState4 } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+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 Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function Calendar({ events }) {
+  const calendarRef = useRef(null);
+  const [monthTitle, setMonthTitle] = useState4("");
+  const [openPopup, setOpenPopup] = useState4(false);
+  const [selectedEvent, setSelectedEvent] = useState4(null);
+  const updateTitle = () => {
+    const calendarApi = calendarRef.current?.getApi();
+    if (calendarApi) {
+      setMonthTitle(calendarApi.view.title);
+    }
+  };
+  const changeView = (viewName) => {
+    const calendarApi = calendarRef.current?.getApi();
+    calendarApi?.changeView(viewName);
+  };
+  useEffect(() => {
+    updateTitle();
+  }, []);
+  return /* @__PURE__ */ jsxs14("div", { className: "fc w-full h-full relative z-10", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex mb-[8px]", children: [
+      /* @__PURE__ */ jsx18("p", { className: "headline-5", children: monthTitle }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex gap-[10px] ml-auto", children: [
+        /* @__PURE__ */ jsx18(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              calendarRef.current.getApi().today();
+              updateTitle();
+            },
+            children: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("dayGridMonth");
+              updateTitle();
+            },
+            children: "Month"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("timeGridWeek");
+              updateTitle();
+            },
+            children: "Week"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("timeGridDay");
+              updateTitle();
+            },
+            children: "Day"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            className: "cursor-pointer",
+            onClick: () => {
+              calendarRef.current?.getApi().prev();
+              updateTitle();
+            },
+            children: /* @__PURE__ */ jsx18(IconChevronLeft, {})
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            className: "cursor-pointer",
+            onClick: () => {
+              calendarRef.current?.getApi().next();
+              updateTitle();
+            },
+            children: /* @__PURE__ */ jsx18(IconChevronRight, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx18("div", { className: "relative z-10", children: /* @__PURE__ */ jsx18(
+      FullCalendar,
+      {
+        ref: calendarRef,
+        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
+        events,
+        locale: thLocale,
+        slotLabelFormat: {
+          hour: "numeric",
+          minute: "2-digit"
+        },
+        firstDay: 0,
+        fixedWeekCount: false,
+        headerToolbar: false,
+        initialView: "dayGridMonth",
+        dayMaxEventRows: 4,
+        editable: true,
+        eventDrop: (info) => {
+          console.log("Event \u0E02\u0E2D\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48:", info.event.startStr);
+        },
+        eventClick: (info) => {
+          setOpenPopup(true);
+          setSelectedEvent({
+            title: info.event.title,
+            start: info.event._instance?.range.start.toISOString(),
+            end: info.event._instance?.range.end.toISOString()
+          });
+        },
+        eventContent: (arg) => {
+          return /* @__PURE__ */ jsx18(Fragment3, { children: /* @__PURE__ */ jsx18("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`
+      }
+    ) }),
+    openPopup && /* @__PURE__ */ jsx18("div", { className: "fixed inset-0 flex justify-center items-center bg-black/50 z-50", children: /* @__PURE__ */ jsx18(EventPopUp, { event: selectedEvent, onClose: () => setOpenPopup(false) }) })
+  ] });
+}
+function EventPopUp({ event, onClose }) {
+  return /* @__PURE__ */ jsxs14("div", { className: "w-[500px] h-auto rounded-2xl bg-white relative z-50 shadow-2xl overflow-hidden", children: [
+    /* @__PURE__ */ jsx18("button", { className: "absolute top-3 right-3 rounded-full p-1 hover:bg-gray-200 transition", onClick: onClose, children: /* @__PURE__ */ jsx18(IconX, { className: "w-6 h-6 text-gray-600" }) }),
+    /* @__PURE__ */ jsx18("div", { className: "bg-red-400 text-left text-white px-6 py-4 headline-5", children: /* @__PURE__ */ jsx18("h2", { className: "text-lg font-semibold", children: event.title }) }),
+    /* @__PURE__ */ jsxs14("div", { className: "flex flex-col w-full p-6 gap-3 text-gray-700 body-3", children: [
+      /* @__PURE__ */ jsxs14("p", { children: [
+        /* @__PURE__ */ jsx18("span", { className: "font-medium", children: "\u0E40\u0E23\u0E34\u0E48\u0E21: " }),
+        event?.start?.toLocaleString?.() || String(event?.start)
+      ] }),
+      /* @__PURE__ */ jsxs14("p", { children: [
+        /* @__PURE__ */ jsx18("span", { className: "font-medium", children: "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14: " }),
+        event?.end?.toLocaleString?.() || String(event?.end)
+      ] }),
+      /* @__PURE__ */ jsx18("h3", { className: "text-sm font-semibold text-gray-500 uppercase mb-2 hover:underline cursor-pointer", children: "\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21" })
+    ] })
+  ] });
+}
+
+// src/Input/TextInput/TextInput.tsx
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import { useState as useState5 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function TextInput({
+  label,
+  placeholder,
+  type = "text",
+  maxLength,
+  required,
+  error,
+  value,
+  onChange,
+  disabled
+}) {
+  const [showPassword, setShowPassword] = useState5(false);
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+  const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
+  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__ */ jsxs15(
+      "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" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx19(
+            "input",
+            {
+              className: `w-full h-full px-[16px] ${disabled ? "cursor-not-allowed" : ""}`,
+              style: { outline: "none" },
+              placeholder,
+              type: inputType,
+              maxLength,
+              value,
+              onChange: (e) => onChange(e.target.value),
+              disabled
+            }
+          ),
+          type === "password" && (showPassword ? /* @__PURE__ */ jsx19(IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ jsx19(IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx19("p", { className: "text-red-500 body-1", children: error })
+  ] });
+}
+
+// src/Input/TextArea/TextArea.tsx
+import { ConfigProvider as ConfigProvider2, Input } from "antd";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var { TextArea } = Input;
+function TextAreaInput({
+  label,
+  height = 4,
+  placeholder,
+  onChange,
+  value,
+  maxLength,
+  resizable,
+  showCount,
+  required,
+  error,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx20(Fragment4, { children: /* @__PURE__ */ jsx20(
+    ConfigProvider2,
+    {
+      theme: {
+        components: {},
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs16("div", { children: [
+        label && /* @__PURE__ */ jsxs16("p", { className: "body-1 mb-[8px]", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "\xA0*" })
+        ] }),
+        /* @__PURE__ */ jsx20(
+          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__ */ jsx20("p", { className: "text-red-500 body-1", children: error })
+      ] })
+    }
+  ) });
+}
+
+// src/Input/InputField/InputField.tsx
+import { ConfigProvider as ConfigProvider3, Input as Input2, Space } from "antd";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+function InputField({
+  value,
+  onChange,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+  label,
+  required,
+  disabled,
+  error,
+  addonBefore,
+  addonAfter,
+  defaultValue,
+  className,
+  onClear,
+  statickey
+}) {
+  return /* @__PURE__ */ jsx21(
+    ConfigProvider3,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx21("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs17(Space.Compact, { children: [
+          statickey && /* @__PURE__ */ jsx21("span", { className: "items-center flex px-2 bg-gray-300 rounded-l-md body-1", children: statickey }),
+          /* @__PURE__ */ jsx21(
+            Input2,
+            {
+              value,
+              placeholder,
+              disabled,
+              className: `body-1 w-full ${className ?? ""}`,
+              onChange: (e) => onChange(e.target.value || void 0),
+              allowClear: true,
+              addonBefore,
+              addonAfter,
+              defaultValue,
+              onClear
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx21("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/Input/InputFieldNumber/InputFieldNumber.tsx
+import { ConfigProvider as ConfigProvider4, InputNumber } from "antd";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+function InputFieldNumber({
+  value,
+  onChange,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+  label,
+  required,
+  disabled,
+  error,
+  addonBefore,
+  addonAfter,
+  defaultValue,
+  className,
+  max,
+  min,
+  controls,
+  size,
+  changeOnWheel,
+  formatter,
+  parser
+}) {
+  return /* @__PURE__ */ jsx22(
+    ConfigProvider4,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      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: "*" })
+        ] }),
+        /* @__PURE__ */ jsx22(
+          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__ */ jsx22("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
+import { ConfigProvider as ConfigProvider5, ColorPicker } from "antd";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+function ColorPickerBasic({
+  value,
+  onChange,
+  required,
+  label,
+  error,
+  disabled,
+  allowClear,
+  defaultFormat,
+  className,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
+}) {
+  return /* @__PURE__ */ jsx23(
+    ConfigProvider5,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs19("div", { children: [
+          /* @__PURE__ */ jsx23("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx23(
+          ColorPicker,
+          {
+            defaultFormat,
+            className: `body-1 w-full ${className ?? ""}`,
+            value,
+            defaultValue: "#ffff",
+            onChange,
+            allowClear,
+            showText: (color) => {
+              const hex = color.toHexString();
+              if (!value) {
+                return /* @__PURE__ */ jsx23("span", { children: placeholder });
+              }
+              return /* @__PURE__ */ jsxs19("span", { children: [
+                "(",
+                hex,
+                ")"
+              ] });
+            },
+            disabled
+          }
+        ),
+        error && /* @__PURE__ */ jsx23("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
+import { ConfigProvider as ConfigProvider6, ColorPicker as ColorPicker2, theme } from "antd";
+
+// node_modules/@babel/runtime/helpers/esm/typeof.js
+function _typeof(o) {
+  "@babel/helpers - typeof";
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
+    return typeof o2;
+  } : function(o2) {
+    return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
+  }, _typeof(o);
+}
+
+// node_modules/@babel/runtime/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+// node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+
+// node_modules/@babel/runtime/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+
+// node_modules/@ant-design/fast-color/es/FastColor.js
+var round = Math.round;
+function splitColorStr(str, parseNum) {
+  const match = str.replace(/^[^(]*\((.*)/, "$1").replace(/\).*/, "").match(/\d*\.?\d+%?/g) || [];
+  const numList = match.map((item) => parseFloat(item));
+  for (let i = 0; i < 3; i += 1) {
+    numList[i] = parseNum(numList[i] || 0, match[i] || "", i);
+  }
+  if (match[3]) {
+    numList[3] = match[3].includes("%") ? numList[3] / 100 : numList[3];
+  } else {
+    numList[3] = 1;
+  }
+  return numList;
+}
+var parseHSVorHSL = (num, _, index) => index === 0 ? num : num / 100;
+function limitRange(value, max) {
+  const mergedMax = max || 255;
+  if (value > mergedMax) {
+    return mergedMax;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  return value;
+}
+var FastColor = class _FastColor {
+  constructor(input) {
+    _defineProperty(this, "isValid", true);
+    _defineProperty(this, "r", 0);
+    _defineProperty(this, "g", 0);
+    _defineProperty(this, "b", 0);
+    _defineProperty(this, "a", 1);
+    _defineProperty(this, "_h", void 0);
+    _defineProperty(this, "_s", void 0);
+    _defineProperty(this, "_l", void 0);
+    _defineProperty(this, "_v", void 0);
+    _defineProperty(this, "_max", void 0);
+    _defineProperty(this, "_min", void 0);
+    _defineProperty(this, "_brightness", void 0);
+    function matchFormat(str) {
+      return str[0] in input && str[1] in input && str[2] in input;
+    }
+    if (!input) {
+    } else if (typeof input === "string") {
+      let matchPrefix2 = function(prefix) {
+        return trimStr.startsWith(prefix);
+      };
+      var matchPrefix = matchPrefix2;
+      const trimStr = input.trim();
+      if (/^#?[A-F\d]{3,8}$/i.test(trimStr)) {
+        this.fromHexString(trimStr);
+      } else if (matchPrefix2("rgb")) {
+        this.fromRgbString(trimStr);
+      } else if (matchPrefix2("hsl")) {
+        this.fromHslString(trimStr);
+      } else if (matchPrefix2("hsv") || matchPrefix2("hsb")) {
+        this.fromHsvString(trimStr);
+      }
+    } else if (input instanceof _FastColor) {
+      this.r = input.r;
+      this.g = input.g;
+      this.b = input.b;
+      this.a = input.a;
+      this._h = input._h;
+      this._s = input._s;
+      this._l = input._l;
+      this._v = input._v;
+    } else if (matchFormat("rgb")) {
+      this.r = limitRange(input.r);
+      this.g = limitRange(input.g);
+      this.b = limitRange(input.b);
+      this.a = typeof input.a === "number" ? limitRange(input.a, 1) : 1;
+    } else if (matchFormat("hsl")) {
+      this.fromHsl(input);
+    } else if (matchFormat("hsv")) {
+      this.fromHsv(input);
+    } else {
+      throw new Error("@ant-design/fast-color: unsupported input " + JSON.stringify(input));
+    }
+  }
+  // ======================= Setter =======================
+  setR(value) {
+    return this._sc("r", value);
+  }
+  setG(value) {
+    return this._sc("g", value);
+  }
+  setB(value) {
+    return this._sc("b", value);
+  }
+  setA(value) {
+    return this._sc("a", value, 1);
+  }
+  setHue(value) {
+    const hsv = this.toHsv();
+    hsv.h = value;
+    return this._c(hsv);
+  }
+  // ======================= Getter =======================
+  /**
+   * Returns the perceived luminance of a color, from 0-1.
+   * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+   */
+  getLuminance() {
+    function adjustGamma(raw) {
+      const val = raw / 255;
+      return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+    }
+    const R = adjustGamma(this.r);
+    const G = adjustGamma(this.g);
+    const B = adjustGamma(this.b);
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  }
+  getHue() {
+    if (typeof this._h === "undefined") {
+      const delta = this.getMax() - this.getMin();
+      if (delta === 0) {
+        this._h = 0;
+      } else {
+        this._h = round(60 * (this.r === this.getMax() ? (this.g - this.b) / delta + (this.g < this.b ? 6 : 0) : this.g === this.getMax() ? (this.b - this.r) / delta + 2 : (this.r - this.g) / delta + 4));
+      }
+    }
+    return this._h;
+  }
+  getSaturation() {
+    if (typeof this._s === "undefined") {
+      const delta = this.getMax() - this.getMin();
+      if (delta === 0) {
+        this._s = 0;
+      } else {
+        this._s = delta / this.getMax();
+      }
+    }
+    return this._s;
+  }
+  getLightness() {
+    if (typeof this._l === "undefined") {
+      this._l = (this.getMax() + this.getMin()) / 510;
+    }
+    return this._l;
+  }
+  getValue() {
+    if (typeof this._v === "undefined") {
+      this._v = this.getMax() / 255;
+    }
+    return this._v;
+  }
+  /**
+   * Returns the perceived brightness of the color, from 0-255.
+   * Note: this is not the b of HSB
+   * @see http://www.w3.org/TR/AERT#color-contrast
+   */
+  getBrightness() {
+    if (typeof this._brightness === "undefined") {
+      this._brightness = (this.r * 299 + this.g * 587 + this.b * 114) / 1e3;
+    }
+    return this._brightness;
+  }
+  // ======================== Func ========================
+  darken(amount = 10) {
+    const h = this.getHue();
+    const s = this.getSaturation();
+    let l = this.getLightness() - amount / 100;
+    if (l < 0) {
+      l = 0;
+    }
+    return this._c({
+      h,
+      s,
+      l,
+      a: this.a
+    });
+  }
+  lighten(amount = 10) {
+    const h = this.getHue();
+    const s = this.getSaturation();
+    let l = this.getLightness() + amount / 100;
+    if (l > 1) {
+      l = 1;
+    }
+    return this._c({
+      h,
+      s,
+      l,
+      a: this.a
+    });
+  }
+  /**
+   * Mix the current color a given amount with another color, from 0 to 100.
+   * 0 means no mixing (return current color).
+   */
+  mix(input, amount = 50) {
+    const color = this._c(input);
+    const p = amount / 100;
+    const calc = (key) => (color[key] - this[key]) * p + this[key];
+    const rgba = {
+      r: round(calc("r")),
+      g: round(calc("g")),
+      b: round(calc("b")),
+      a: round(calc("a") * 100) / 100
+    };
+    return this._c(rgba);
+  }
+  /**
+   * Mix the color with pure white, from 0 to 100.
+   * Providing 0 will do nothing, providing 100 will always return white.
+   */
+  tint(amount = 10) {
+    return this.mix({
+      r: 255,
+      g: 255,
+      b: 255,
+      a: 1
+    }, amount);
+  }
+  /**
+   * Mix the color with pure black, from 0 to 100.
+   * Providing 0 will do nothing, providing 100 will always return black.
+   */
+  shade(amount = 10) {
+    return this.mix({
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 1
+    }, amount);
+  }
+  onBackground(background) {
+    const bg = this._c(background);
+    const alpha = this.a + bg.a * (1 - this.a);
+    const calc = (key) => {
+      return round((this[key] * this.a + bg[key] * bg.a * (1 - this.a)) / alpha);
+    };
+    return this._c({
+      r: calc("r"),
+      g: calc("g"),
+      b: calc("b"),
+      a: alpha
+    });
+  }
+  // ======================= Status =======================
+  isDark() {
+    return this.getBrightness() < 128;
+  }
+  isLight() {
+    return this.getBrightness() >= 128;
+  }
+  // ======================== MISC ========================
+  equals(other) {
+    return this.r === other.r && this.g === other.g && this.b === other.b && this.a === other.a;
+  }
+  clone() {
+    return this._c(this);
+  }
+  // ======================= Format =======================
+  toHexString() {
+    let hex = "#";
+    const rHex = (this.r || 0).toString(16);
+    hex += rHex.length === 2 ? rHex : "0" + rHex;
+    const gHex = (this.g || 0).toString(16);
+    hex += gHex.length === 2 ? gHex : "0" + gHex;
+    const bHex = (this.b || 0).toString(16);
+    hex += bHex.length === 2 ? bHex : "0" + bHex;
+    if (typeof this.a === "number" && this.a >= 0 && this.a < 1) {
+      const aHex = round(this.a * 255).toString(16);
+      hex += aHex.length === 2 ? aHex : "0" + aHex;
+    }
+    return hex;
+  }
+  /** CSS support color pattern */
+  toHsl() {
+    return {
+      h: this.getHue(),
+      s: this.getSaturation(),
+      l: this.getLightness(),
+      a: this.a
+    };
+  }
+  /** CSS support color pattern */
+  toHslString() {
+    const h = this.getHue();
+    const s = round(this.getSaturation() * 100);
+    const l = round(this.getLightness() * 100);
+    return this.a !== 1 ? `hsla(${h},${s}%,${l}%,${this.a})` : `hsl(${h},${s}%,${l}%)`;
+  }
+  /** Same as toHsb */
+  toHsv() {
+    return {
+      h: this.getHue(),
+      s: this.getSaturation(),
+      v: this.getValue(),
+      a: this.a
+    };
+  }
+  toRgb() {
+    return {
+      r: this.r,
+      g: this.g,
+      b: this.b,
+      a: this.a
+    };
+  }
+  toRgbString() {
+    return this.a !== 1 ? `rgba(${this.r},${this.g},${this.b},${this.a})` : `rgb(${this.r},${this.g},${this.b})`;
+  }
+  toString() {
+    return this.toRgbString();
+  }
+  // ====================== Privates ======================
+  /** Return a new FastColor object with one channel changed */
+  _sc(rgb, value, max) {
+    const clone = this.clone();
+    clone[rgb] = limitRange(value, max);
+    return clone;
+  }
+  _c(input) {
+    return new this.constructor(input);
+  }
+  getMax() {
+    if (typeof this._max === "undefined") {
+      this._max = Math.max(this.r, this.g, this.b);
+    }
+    return this._max;
+  }
+  getMin() {
+    if (typeof this._min === "undefined") {
+      this._min = Math.min(this.r, this.g, this.b);
+    }
+    return this._min;
+  }
+  fromHexString(trimStr) {
+    const withoutPrefix = trimStr.replace("#", "");
+    function connectNum(index1, index2) {
+      return parseInt(withoutPrefix[index1] + withoutPrefix[index2 || index1], 16);
+    }
+    if (withoutPrefix.length < 6) {
+      this.r = connectNum(0);
+      this.g = connectNum(1);
+      this.b = connectNum(2);
+      this.a = withoutPrefix[3] ? connectNum(3) / 255 : 1;
+    } else {
+      this.r = connectNum(0, 1);
+      this.g = connectNum(2, 3);
+      this.b = connectNum(4, 5);
+      this.a = withoutPrefix[6] ? connectNum(6, 7) / 255 : 1;
+    }
+  }
+  fromHsl({
+    h,
+    s,
+    l,
+    a
+  }) {
+    this._h = h % 360;
+    this._s = s;
+    this._l = l;
+    this.a = typeof a === "number" ? a : 1;
+    if (s <= 0) {
+      const rgb = round(l * 255);
+      this.r = rgb;
+      this.g = rgb;
+      this.b = rgb;
+    }
+    let r = 0, g = 0, b = 0;
+    const huePrime = h / 60;
+    const chroma = (1 - Math.abs(2 * l - 1)) * s;
+    const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+    if (huePrime >= 0 && huePrime < 1) {
+      r = chroma;
+      g = secondComponent;
+    } else if (huePrime >= 1 && huePrime < 2) {
+      r = secondComponent;
+      g = chroma;
+    } else if (huePrime >= 2 && huePrime < 3) {
+      g = chroma;
+      b = secondComponent;
+    } else if (huePrime >= 3 && huePrime < 4) {
+      g = secondComponent;
+      b = chroma;
+    } else if (huePrime >= 4 && huePrime < 5) {
+      r = secondComponent;
+      b = chroma;
+    } else if (huePrime >= 5 && huePrime < 6) {
+      r = chroma;
+      b = secondComponent;
+    }
+    const lightnessModification = l - chroma / 2;
+    this.r = round((r + lightnessModification) * 255);
+    this.g = round((g + lightnessModification) * 255);
+    this.b = round((b + lightnessModification) * 255);
+  }
+  fromHsv({
+    h,
+    s,
+    v,
+    a
+  }) {
+    this._h = h % 360;
+    this._s = s;
+    this._v = v;
+    this.a = typeof a === "number" ? a : 1;
+    const vv = round(v * 255);
+    this.r = vv;
+    this.g = vv;
+    this.b = vv;
+    if (s <= 0) {
+      return;
+    }
+    const hh = h / 60;
+    const i = Math.floor(hh);
+    const ff = hh - i;
+    const p = round(v * (1 - s) * 255);
+    const q = round(v * (1 - s * ff) * 255);
+    const t = round(v * (1 - s * (1 - ff)) * 255);
+    switch (i) {
+      case 0:
+        this.g = t;
+        this.b = p;
+        break;
+      case 1:
+        this.r = q;
+        this.b = p;
+        break;
+      case 2:
+        this.r = p;
+        this.b = t;
+        break;
+      case 3:
+        this.r = p;
+        this.g = q;
+        break;
+      case 4:
+        this.r = t;
+        this.g = p;
+        break;
+      case 5:
+      default:
+        this.g = p;
+        this.b = q;
+        break;
+    }
+  }
+  fromHsvString(trimStr) {
+    const cells = splitColorStr(trimStr, parseHSVorHSL);
+    this.fromHsv({
+      h: cells[0],
+      s: cells[1],
+      v: cells[2],
+      a: cells[3]
+    });
+  }
+  fromHslString(trimStr) {
+    const cells = splitColorStr(trimStr, parseHSVorHSL);
+    this.fromHsl({
+      h: cells[0],
+      s: cells[1],
+      l: cells[2],
+      a: cells[3]
+    });
+  }
+  fromRgbString(trimStr) {
+    const cells = splitColorStr(trimStr, (num, txt) => (
+      // Convert percentage to number. e.g. 50% -> 128
+      txt.includes("%") ? round(num / 100 * 255) : num
+    ));
+    this.r = cells[0];
+    this.g = cells[1];
+    this.b = cells[2];
+    this.a = cells[3];
+  }
+};
+
+// node_modules/@ant-design/colors/es/generate.js
+var hueStep = 2;
+var saturationStep = 0.16;
+var saturationStep2 = 0.05;
+var brightnessStep1 = 0.05;
+var brightnessStep2 = 0.15;
+var lightColorCount = 5;
+var darkColorCount = 4;
+var darkColorMap = [{
+  index: 7,
+  amount: 15
+}, {
+  index: 6,
+  amount: 25
+}, {
+  index: 5,
+  amount: 30
+}, {
+  index: 5,
+  amount: 45
+}, {
+  index: 5,
+  amount: 65
+}, {
+  index: 5,
+  amount: 85
+}, {
+  index: 4,
+  amount: 90
+}, {
+  index: 3,
+  amount: 95
+}, {
+  index: 2,
+  amount: 97
+}, {
+  index: 1,
+  amount: 98
+}];
+function getHue(hsv, i, light) {
+  var hue;
+  if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
+    hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
+  } else {
+    hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
+  }
+  if (hue < 0) {
+    hue += 360;
+  } else if (hue >= 360) {
+    hue -= 360;
+  }
+  return hue;
+}
+function getSaturation(hsv, i, light) {
+  if (hsv.h === 0 && hsv.s === 0) {
+    return hsv.s;
+  }
+  var saturation;
+  if (light) {
+    saturation = hsv.s - saturationStep * i;
+  } else if (i === darkColorCount) {
+    saturation = hsv.s + saturationStep;
+  } else {
+    saturation = hsv.s + saturationStep2 * i;
+  }
+  if (saturation > 1) {
+    saturation = 1;
+  }
+  if (light && i === lightColorCount && saturation > 0.1) {
+    saturation = 0.1;
+  }
+  if (saturation < 0.06) {
+    saturation = 0.06;
+  }
+  return Math.round(saturation * 100) / 100;
+}
+function getValue(hsv, i, light) {
+  var value;
+  if (light) {
+    value = hsv.v + brightnessStep1 * i;
+  } else {
+    value = hsv.v - brightnessStep2 * i;
+  }
+  value = Math.max(0, Math.min(1, value));
+  return Math.round(value * 100) / 100;
+}
+function generate(color) {
+  var opts = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  var patterns = [];
+  var pColor = new FastColor(color);
+  var hsv = pColor.toHsv();
+  for (var i = lightColorCount; i > 0; i -= 1) {
+    var c = new FastColor({
+      h: getHue(hsv, i, true),
+      s: getSaturation(hsv, i, true),
+      v: getValue(hsv, i, true)
+    });
+    patterns.push(c);
+  }
+  patterns.push(pColor);
+  for (var _i = 1; _i <= darkColorCount; _i += 1) {
+    var _c = new FastColor({
+      h: getHue(hsv, _i),
+      s: getSaturation(hsv, _i),
+      v: getValue(hsv, _i)
+    });
+    patterns.push(_c);
+  }
+  if (opts.theme === "dark") {
+    return darkColorMap.map(function(_ref) {
+      var index = _ref.index, amount = _ref.amount;
+      return new FastColor(opts.backgroundColor || "#141414").mix(patterns[index], amount).toHexString();
+    });
+  }
+  return patterns.map(function(c2) {
+    return c2.toHexString();
+  });
+}
+
+// node_modules/@ant-design/colors/es/presets.js
+var red = ["#fff1f0", "#ffccc7", "#ffa39e", "#ff7875", "#ff4d4f", "#f5222d", "#cf1322", "#a8071a", "#820014", "#5c0011"];
+red.primary = red[5];
+var volcano = ["#fff2e8", "#ffd8bf", "#ffbb96", "#ff9c6e", "#ff7a45", "#fa541c", "#d4380d", "#ad2102", "#871400", "#610b00"];
+volcano.primary = volcano[5];
+var orange = ["#fff7e6", "#ffe7ba", "#ffd591", "#ffc069", "#ffa940", "#fa8c16", "#d46b08", "#ad4e00", "#873800", "#612500"];
+orange.primary = orange[5];
+var gold = ["#fffbe6", "#fff1b8", "#ffe58f", "#ffd666", "#ffc53d", "#faad14", "#d48806", "#ad6800", "#874d00", "#613400"];
+gold.primary = gold[5];
+var yellow = ["#feffe6", "#ffffb8", "#fffb8f", "#fff566", "#ffec3d", "#fadb14", "#d4b106", "#ad8b00", "#876800", "#614700"];
+yellow.primary = yellow[5];
+var lime = ["#fcffe6", "#f4ffb8", "#eaff8f", "#d3f261", "#bae637", "#a0d911", "#7cb305", "#5b8c00", "#3f6600", "#254000"];
+lime.primary = lime[5];
+var green = ["#f6ffed", "#d9f7be", "#b7eb8f", "#95de64", "#73d13d", "#52c41a", "#389e0d", "#237804", "#135200", "#092b00"];
+green.primary = green[5];
+var cyan = ["#e6fffb", "#b5f5ec", "#87e8de", "#5cdbd3", "#36cfc9", "#13c2c2", "#08979c", "#006d75", "#00474f", "#002329"];
+cyan.primary = cyan[5];
+var blue = ["#e6f4ff", "#bae0ff", "#91caff", "#69b1ff", "#4096ff", "#1677ff", "#0958d9", "#003eb3", "#002c8c", "#001d66"];
+blue.primary = blue[5];
+var geekblue = ["#f0f5ff", "#d6e4ff", "#adc6ff", "#85a5ff", "#597ef7", "#2f54eb", "#1d39c4", "#10239e", "#061178", "#030852"];
+geekblue.primary = geekblue[5];
+var purple = ["#f9f0ff", "#efdbff", "#d3adf7", "#b37feb", "#9254de", "#722ed1", "#531dab", "#391085", "#22075e", "#120338"];
+purple.primary = purple[5];
+var magenta = ["#fff0f6", "#ffd6e7", "#ffadd2", "#ff85c0", "#f759ab", "#eb2f96", "#c41d7f", "#9e1068", "#780650", "#520339"];
+magenta.primary = magenta[5];
+var grey = ["#a6a6a6", "#999999", "#8c8c8c", "#808080", "#737373", "#666666", "#404040", "#1a1a1a", "#000000", "#000000"];
+grey.primary = grey[5];
+var presetPalettes = {
+  red,
+  volcano,
+  orange,
+  gold,
+  yellow,
+  lime,
+  green,
+  cyan,
+  blue,
+  geekblue,
+  purple,
+  magenta,
+  grey
+};
+var redDark = ["#2a1215", "#431418", "#58181c", "#791a1f", "#a61d24", "#d32029", "#e84749", "#f37370", "#f89f9a", "#fac8c3"];
+redDark.primary = redDark[5];
+var volcanoDark = ["#2b1611", "#441d12", "#592716", "#7c3118", "#aa3e19", "#d84a1b", "#e87040", "#f3956a", "#f8b692", "#fad4bc"];
+volcanoDark.primary = volcanoDark[5];
+var orangeDark = ["#2b1d11", "#442a11", "#593815", "#7c4a15", "#aa6215", "#d87a16", "#e89a3c", "#f3b765", "#f8cf8d", "#fae3b7"];
+orangeDark.primary = orangeDark[5];
+var goldDark = ["#2b2111", "#443111", "#594214", "#7c5914", "#aa7714", "#d89614", "#e8b339", "#f3cc62", "#f8df8b", "#faedb5"];
+goldDark.primary = goldDark[5];
+var yellowDark = ["#2b2611", "#443b11", "#595014", "#7c6e14", "#aa9514", "#d8bd14", "#e8d639", "#f3ea62", "#f8f48b", "#fafab5"];
+yellowDark.primary = yellowDark[5];
+var limeDark = ["#1f2611", "#2e3c10", "#3e4f13", "#536d13", "#6f9412", "#8bbb11", "#a9d134", "#c9e75d", "#e4f88b", "#f0fab5"];
+limeDark.primary = limeDark[5];
+var greenDark = ["#162312", "#1d3712", "#274916", "#306317", "#3c8618", "#49aa19", "#6abe39", "#8fd460", "#b2e58b", "#d5f2bb"];
+greenDark.primary = greenDark[5];
+var cyanDark = ["#112123", "#113536", "#144848", "#146262", "#138585", "#13a8a8", "#33bcb7", "#58d1c9", "#84e2d8", "#b2f1e8"];
+cyanDark.primary = cyanDark[5];
+var blueDark = ["#111a2c", "#112545", "#15325b", "#15417e", "#1554ad", "#1668dc", "#3c89e8", "#65a9f3", "#8dc5f8", "#b7dcfa"];
+blueDark.primary = blueDark[5];
+var geekblueDark = ["#131629", "#161d40", "#1c2755", "#203175", "#263ea0", "#2b4acb", "#5273e0", "#7f9ef3", "#a8c1f8", "#d2e0fa"];
+geekblueDark.primary = geekblueDark[5];
+var purpleDark = ["#1a1325", "#24163a", "#301c4d", "#3e2069", "#51258f", "#642ab5", "#854eca", "#ab7ae0", "#cda8f0", "#ebd7fa"];
+purpleDark.primary = purpleDark[5];
+var magentaDark = ["#291321", "#40162f", "#551c3b", "#75204f", "#a02669", "#cb2b83", "#e0529c", "#f37fb7", "#f8a8cc", "#fad2e3"];
+magentaDark.primary = magentaDark[5];
+var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a", "#6a6a6a", "#7b7b7b", "#888888", "#969696"];
+greyDark.primary = greyDark[5];
+
+// src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+function genPresets(presets = presetPalettes) {
+  return Object.entries(presets).map(([label, colors]) => ({
+    label,
+    colors,
+    key: label
+  }));
+}
+function ColorPalettePickerBasic({
+  value,
+  onChange,
+  required,
+  label,
+  error,
+  disabled,
+  allowClear,
+  defaultFormat,
+  className,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35",
+  onClear
+}) {
+  const { token } = theme.useToken();
+  const presets = genPresets({
+    primary: generate(token.colorPrimary),
+    red,
+    green
+  });
+  return /* @__PURE__ */ jsx24(
+    ConfigProvider6,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx24("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx24(
+          ColorPicker2,
+          {
+            defaultFormat,
+            className: `body-1 w-full ${className ?? ""}`,
+            presets,
+            value,
+            defaultValue: "#ffff",
+            onChange,
+            allowClear,
+            showText: (color) => {
+              const hex = color.toHexString();
+              if (!value) {
+                return /* @__PURE__ */ jsx24("span", { children: placeholder });
+              }
+              return /* @__PURE__ */ jsxs20("span", { children: [
+                "(",
+                hex,
+                ")"
+              ] });
+            },
+            disabled,
+            onClear
+          }
+        ),
+        error && /* @__PURE__ */ jsx24("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/Select/SelectField/SelectField.tsx
+import { Select, ConfigProvider as ConfigProvider7 } from "antd";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+function SelectField({
+  value,
+  onChange,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+  label,
+  required,
+  error,
+  disabled,
+  defaultValue,
+  options,
+  mode,
+  prefix,
+  prefixSize = 20,
+  handleSearch,
+  className,
+  onClear
+}) {
+  return /* @__PURE__ */ jsx25(
+    ConfigProvider7,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx25("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx25(
+          Select,
+          {
+            showSearch: true,
+            value,
+            defaultValue,
+            onChange,
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
+            placeholder,
+            optionFilterProp: "label",
+            filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
+            disabled,
+            options,
+            mode,
+            onSearch: handleSearch,
+            prefix: prefix ? /* @__PURE__ */ jsx25(
+              "span",
+              {
+                style: {
+                  width: prefixSize,
+                  height: prefixSize,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: prefix
+              }
+            ) : void 0,
+            allowClear: true,
+            onClear
+          }
+        ),
+        error && /* @__PURE__ */ jsx25("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/Select/SelectFieldGroup/SelectFieldGroup.tsx
+import { Select as Select2, ConfigProvider as ConfigProvider8 } from "antd";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+function SelectFieldGroup({
+  value,
+  onChange,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+  label,
+  required,
+  error,
+  disabled,
+  defaultValue,
+  options,
+  mode,
+  prefix,
+  prefixSize = 20,
+  handleSearch,
+  className
+}) {
+  return /* @__PURE__ */ jsx26(
+    ConfigProvider8,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx26("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx26(
+          Select2,
+          {
+            showSearch: true,
+            value,
+            defaultValue,
+            onChange,
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
+            placeholder,
+            optionFilterProp: "label",
+            filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
+            disabled,
+            options,
+            mode,
+            onSearch: handleSearch,
+            prefix: prefix ? /* @__PURE__ */ jsx26(
+              "span",
+              {
+                style: {
+                  width: prefixSize,
+                  height: prefixSize,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: prefix
+              }
+            ) : void 0,
+            allowClear: true
+          }
+        ),
+        error && /* @__PURE__ */ jsx26("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/Select/SelectFieldStatus/SelectFieldStatus.tsx
+import { Select as Select3, ConfigProvider as ConfigProvider9 } from "antd";
+
+// src/Select/SelectFieldStatus/StatusMockup.ts
+var status = [
+  { value: "1", label: "\u0E40\u0E1B\u0E34\u0E14", color: "var(--color-gray-500)" },
+  { value: "2", label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23", color: "var(--color-yellow-400)" },
+  { value: "3", label: "\u0E23\u0E2D\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A", color: "var(--color-red-400)" },
+  { value: "4", label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-green-400)" },
+  { value: "5", label: "\u0E16\u0E39\u0E01\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01", color: "var(--color-gray-300)" }
+];
+
+// src/Select/SelectFieldStatus/SelectFieldStatus.tsx
+import { DownOutlined } from "@ant-design/icons";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+function SelectFieldStatus({
+  value,
+  onChange,
+  placeholder,
+  label,
+  required,
+  disabled,
+  error,
+  options,
+  className
+}) {
+  const selectedItem = status.find((s) => s.value === value);
+  return /* @__PURE__ */ jsx27(
+    ConfigProvider9,
+    {
+      theme: {
+        components: {
+          Select: {
+            selectorBg: selectedItem?.color || "#ffff",
+            hoverBorderColor: "#D9D9D9",
+            activeBorderColor: "#D9D9D9",
+            activeOutlineColor: "#D9D9D9"
+          }
+        },
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx27("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx27(
+          Select3,
+          {
+            disabled,
+            suffixIcon: /* @__PURE__ */ jsx27(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            value,
+            onChange,
+            className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
+            placeholder,
+            optionFilterProp: "label",
+            filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
+            options,
+            showSearch: true
+          }
+        ),
+        error && /* @__PURE__ */ jsx27("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
+import { Select as Select4, ConfigProvider as ConfigProvider10 } from "antd";
+
+// src/Select/SelectFieldStatusReport/StatusReportMockup.ts
+var status2 = [
+  { value: "1", label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-green-400)" },
+  { value: "2", label: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-red-500)" }
+];
+
+// src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
+import { DownOutlined as DownOutlined2 } from "@ant-design/icons";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+function SelectFieldStatusReport({
+  value,
+  onChange,
+  placeholder,
+  label,
+  required,
+  disabled,
+  error,
+  className,
+  options
+}) {
+  const selectedItem = status2.find((s) => s.value === value);
+  return /* @__PURE__ */ jsx28(
+    ConfigProvider10,
+    {
+      theme: {
+        components: {
+          Select: {
+            selectorBg: selectedItem?.color || "#ffff",
+            hoverBorderColor: "#D9D9D9",
+            activeBorderColor: "#D9D9D9",
+            activeOutlineColor: "#D9D9D9"
+          }
+        },
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx28("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx28(
+          Select4,
+          {
+            disabled,
+            suffixIcon: /* @__PURE__ */ jsx28(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            value,
+            onChange,
+            className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
+            placeholder,
+            optionFilterProp: "label",
+            filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
+            options,
+            showSearch: true
+          }
+        ),
+        error && /* @__PURE__ */ jsx28("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/Select/SelectFieldTag/SelectFieldTag.tsx
+import { Select as Select5, ConfigProvider as ConfigProvider11 } from "antd";
+import { useState as useState6 } from "react";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+function SelectFieldTag({
+  label,
+  required,
+  placeholder,
+  options,
+  error,
+  value: controlledValue,
+  className,
+  onChange,
+  onClear
+}) {
+  const [internalValue, setInternalValue] = useState6([]);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const [searchWord, setSearchWord] = useState6("");
+  const handleChange = (val) => {
+    const trimValue = val.map((v) => v.trim());
+    const filtered = trimValue.filter((v) => v.trim() !== "");
+    const latest = filtered.slice(-1);
+    if (!isControlled) {
+      setInternalValue(latest);
+    }
+    setSearchWord("");
+    onChange?.(latest);
+  };
+  const handleSearch = (text) => {
+    setSearchWord(text.trimStart());
+    if (!isControlled) {
+      setInternalValue([]);
+    }
+    onChange?.([]);
+  };
+  return /* @__PURE__ */ jsx29(
+    ConfigProvider11,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx29("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx29(
+          Select5,
+          {
+            mode: "tags",
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
+            placeholder,
+            value,
+            onChange: handleChange,
+            onSearch: handleSearch,
+            filterOption: (input, option) => {
+              if (!input.trim()) return true;
+              return (option?.label).toLowerCase().includes(input.toLowerCase());
+            },
+            searchValue: searchWord,
+            options,
+            allowClear: true,
+            onClear
+          }
+        ),
+        error && /* @__PURE__ */ jsx29("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/Select/SelectCustom/SelectCustom.tsx
+import { IconTrash } from "@tabler/icons-react";
+import { Select as Select6, ConfigProvider as ConfigProvider12 } from "antd";
+import { useState as useState7 } from "react";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+function SelectCustom({
+  label = "\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,
+  error,
+  onClear
+}) {
+  const [value, setValue] = useState7([]);
+  const [valueList, setValueList] = useState7([]);
+  const handleChange = (selectedValues) => {
+    const newValues = selectedValues.filter((v) => !valueList.includes(v));
+    setValueList((prev) => {
+      const updated = [...prev, ...newValues];
+      onChange && onChange(updated);
+      return updated;
+    });
+    setValue([]);
+  };
+  const handleDelete = (val) => {
+    setValueList((prev) => {
+      const updated = prev.filter((v) => v !== val);
+      onChange && onChange(updated);
+      return updated;
+    });
+  };
+  const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
+  return /* @__PURE__ */ jsx30(
+    ConfigProvider12,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs26("div", { children: [
+          /* @__PURE__ */ jsx30("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx30(
+          Select6,
+          {
+            value,
+            onChange: handleChange,
+            placeholder,
+            options: filteredOptions,
+            mode: "tags",
+            onClear
+          }
+        ),
+        error && /* @__PURE__ */ jsx30("p", { className: "text-red-500 caption-1", children: error }),
+        /* @__PURE__ */ jsx30("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs26("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
+          /* @__PURE__ */ jsxs26("div", { className: "flex flex-row gap-[8px]", children: [
+            /* @__PURE__ */ jsxs26("p", { children: [
+              index + 1,
+              "."
+            ] }),
+            /* @__PURE__ */ jsx30("p", { children: v })
+          ] }),
+          /* @__PURE__ */ jsx30(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
+        ] }, index)) })
+      ] })
+    }
+  );
+}
+
+// src/SortFilter/SortFilter.tsx
+import { ConfigProvider as ConfigProvider13 } from "antd";
+import { CalendarOutlined } from "@ant-design/icons";
+
+// src/SortFilter/DataMockSortFilter.ts
+var years = [
+  { value: "\u0E1B\u0E35 2566", label: "\u0E1B\u0E35 2566" },
+  { value: "\u0E1B\u0E35 2567", label: "\u0E1B\u0E35 2567" },
+  { value: "\u0E1B\u0E35 2568", label: "\u0E1B\u0E35 2568" }
+];
+var months = [
+  { value: "\u0E21\u0E01\u0E23\u0E32\u0E04\u0E21", label: "\u0E21\u0E01\u0E23\u0E32\u0E04\u0E21" },
+  { value: "\u0E01\u0E38\u0E21\u0E20\u0E32\u0E1E\u0E31\u0E19\u0E18\u0E4C", label: "\u0E01\u0E38\u0E21\u0E20\u0E32\u0E1E\u0E31\u0E19\u0E18\u0E4C" },
+  { value: "\u0E21\u0E35\u0E19\u0E32\u0E04\u0E21", label: "\u0E21\u0E35\u0E19\u0E32\u0E04\u0E21" },
+  { value: "\u0E40\u0E21\u0E29\u0E32\u0E22\u0E19", label: "\u0E40\u0E21\u0E29\u0E32\u0E22\u0E19" },
+  { value: "\u0E1E\u0E24\u0E29\u0E20\u0E32\u0E04\u0E21", label: "\u0E1E\u0E24\u0E29\u0E20\u0E32\u0E04\u0E21" },
+  { value: "\u0E21\u0E34\u0E16\u0E38\u0E19\u0E32\u0E22\u0E19", label: "\u0E21\u0E34\u0E16\u0E38\u0E19\u0E32\u0E22\u0E19" },
+  { value: "\u0E01\u0E23\u0E01\u0E0E\u0E32\u0E04\u0E21", label: "\u0E01\u0E23\u0E01\u0E0E\u0E32\u0E04\u0E21" },
+  { value: "\u0E2A\u0E34\u0E07\u0E2B\u0E32\u0E04\u0E21", label: "\u0E2A\u0E34\u0E07\u0E2B\u0E32\u0E04\u0E21" },
+  { value: "\u0E01\u0E31\u0E19\u0E22\u0E32\u0E22\u0E19", label: "\u0E01\u0E31\u0E19\u0E22\u0E32\u0E22\u0E19" },
+  { value: "\u0E15\u0E38\u0E25\u0E32\u0E04\u0E21", label: "\u0E15\u0E38\u0E25\u0E32\u0E04\u0E21" },
+  { value: "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19", label: "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19" },
+  { value: "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21", label: "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21" }
+];
+var quarters = [
+  { value: "\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A 1", label: "\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A 1" },
+  { value: "\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A 2", label: "\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A 2" },
+  { value: "\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A 3", label: "\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A 3" },
+  { value: "\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A 4", label: "\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A 4" }
+];
+
+// src/SortFilter/SortFilter.tsx
+import { useState as useState8 } from "react";
+import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+function SortFilter({
+  showYear = true,
+  showQuarter = true,
+  showMonth = true,
+  onSortClick,
+  onFilterClick
+}) {
+  const [yearValue, setYearValue] = useState8();
+  const [monthValue, setMonthValue] = useState8();
+  const [quarterValue, setQuartersValue] = useState8();
+  return /* @__PURE__ */ jsx31(
+    ConfigProvider13,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs27("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "w-full flex gap-[10px]", children: [
+          showYear && /* @__PURE__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
+            SelectField,
+            {
+              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
+              onChange: setYearValue,
+              options: years.map((s) => ({
+                value: s.value,
+                label: s.label
+              })),
+              placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E1B\u0E35",
+              value: yearValue
+            }
+          ) }),
+          showMonth && /* @__PURE__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
+            SelectField,
+            {
+              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
+              onChange: setMonthValue,
+              options: months.map((s) => ({
+                value: s.value,
+                label: s.label
+              })),
+              value: monthValue,
+              placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
+            }
+          ) }),
+          showQuarter && /* @__PURE__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
+            SelectField,
+            {
+              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
+              onChange: setQuartersValue,
+              options: quarters.map((s) => ({
+                value: s.value,
+                label: s.label
+              })),
+              value: quarterValue,
+              placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs27("div", { className: "flex gap-[10px]", children: [
+          /* @__PURE__ */ jsx31(
+            IconSortDescending2,
+            {
+              size: 24,
+              className: "cursor-pointer",
+              onClick: onSortClick
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            IconFilter,
+            {
+              size: 24,
+              className: "cursor-pointer",
+              onClick: onFilterClick
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+// 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 jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+function FileUploader({
+  onUpload,
+  onError,
+  onRemove,
+  accept,
+  maxSize,
+  disabled,
+  mode = "drop",
+  description,
+  label
+}) {
+  const [fileList, setFileList] = useState9([]);
+  const [uploading, setUploading] = useState9(false);
+  const [dragActive, setDragActive] = useState9(false);
+  const inputRef = useRef2(null);
+  const validateFile = (file) => {
+    if (accept && !accept.includes(file.type)) {
+      onError?.(`Invalid file type. file: ${file.name}`);
+      throw new Error("Invalid file type");
+    }
+    if (maxSize && file.size > maxSize * 1024 * 1024) {
+      onError?.(`Invalid file size. file: ${file.name}`);
+      throw new Error("Invalid file size");
+    }
+    return true;
+  };
+  const handleUploadClick = () => {
+    inputRef.current?.click();
+  };
+  const handleRemoveFile = async (index) => {
+    try {
+      if (onRemove) {
+        await onRemove(index);
+      }
+      const updatedList = [...fileList];
+      updatedList.splice(index, 1);
+      setFileList(updatedList);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const handleUpload = (event) => {
+    handleFileChange(event.target.files);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setDragActive(false);
+    if (disabled) return;
+    handleFileChange(event.dataTransfer.files);
+  };
+  const handleFileChange = async (files) => {
+    if (!files) return;
+    const fileArray = Array.from(files);
+    for (const file of fileArray) {
+      if (!validateFile(file)) continue;
+      setUploading(true);
+      try {
+        if (onUpload) {
+          await onUpload(file);
+        }
+        setFileList((prev) => [...prev, file]);
+      } catch (err) {
+        console.log("catch");
+        console.error(err);
+      } finally {
+        setUploading(false);
+      }
+    }
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  return /* @__PURE__ */ jsxs28("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx32("p", { className: "body-1", children: label }),
+    /* @__PURE__ */ jsxs28("div", { children: [
+      mode === "upload" ? /* @__PURE__ */ jsx32(
+        "button",
+        {
+          type: "button",
+          onClick: handleUploadClick,
+          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__ */ jsxs28(Fragment5, { children: [
+            /* @__PURE__ */ jsx32(Loader, { size: 15 }),
+            " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
+          ] }) : /* @__PURE__ */ jsxs28(Fragment5, { children: [
+            /* @__PURE__ */ jsx32(IconUpload, { size: 15, className: "text-gray-400" }),
+            " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
+          ] })
+        }
+      ) : /* @__PURE__ */ jsx32(
+        "div",
+        {
+          className: `min-w-[400px] min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
+        ${dragActive ? "border-primary-500 bg-primary-50" : "border-gray-300 bg-white"}
+        ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+      `,
+          onClick: handleUploadClick,
+          onDragOver: (e) => {
+            e.preventDefault();
+            if (!disabled) setDragActive(true);
+          },
+          onDragLeave: () => setDragActive(false),
+          onDrop: handleDrop,
+          children: uploading ? /* @__PURE__ */ jsxs28("div", { className: "flex justify-center items-center gap-2", children: [
+            /* @__PURE__ */ jsx32(Loader, { size: 15 }),
+            " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
+          ] }) : /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx32(IconUpload, { size: 20 }),
+            /* @__PURE__ */ jsx32("span", { className: "body-1", children: "\u0E04\u0E25\u0E34\u0E01\u0E2B\u0E23\u0E37\u0E2D\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E17\u0E35\u0E48\u0E1A\u0E23\u0E34\u0E40\u0E27\u0E13\u0E19\u0E35\u0E49\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14" }),
+            /* @__PURE__ */ jsx32("span", { className: "text-gray-400 body-3", children: "\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E1A\u0E1A\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E32\u0E22\u0E44\u0E1F\u0E25\u0E4C" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx32(
+        "input",
+        {
+          type: "file",
+          multiple: true,
+          ref: inputRef,
+          onChange: handleUpload,
+          style: { display: "none" },
+          accept: accept?.join(","),
+          disabled
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsx32("p", { className: "text-gray-400 body-4", children: description }),
+    /* @__PURE__ */ jsx32("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
+        /* @__PURE__ */ jsx32("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx32(IconPaperclip, { size: 15 }) }),
+        /* @__PURE__ */ jsx32("span", { className: "truncate", children: file.name })
+      ] }),
+      /* @__PURE__ */ jsx32(
+        IconTrash2,
+        {
+          size: 20,
+          className: "ml-auto hover:text-red-500 cursor-pointer",
+          onClick: () => handleRemoveFile(index)
+        }
+      )
+    ] }, index)) })
+  ] });
+}
+
+// src/Message/Message/Message.tsx
+var messageApi = null;
+function setMessageApi(api) {
+  messageApi = api;
+}
+function messageSuccess(content) {
+  messageApi?.success({ content, className: "message message-success" });
+}
+function messageError(content) {
+  messageApi?.error({ content, className: "message message-error" });
+}
+function messageWarning(content) {
+  messageApi?.warning({ content, className: "message message-warning" });
+}
+function messageInfo(content) {
+  messageApi?.info({ content, className: "message message-info" });
+}
+function messageLoading(content, duration) {
+  messageApi?.loading({ content, duration, className: "message message-loading" });
+}
+
+// src/Breadcrumb/Breadcrumb.tsx
+import { ConfigProvider as ConfigProvider14 } from "antd";
+import { Breadcrumb } from "antd";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function Breadcrumbs({
+  items,
+  separator,
+  itemRender,
+  classname,
+  params
+}) {
+  return /* @__PURE__ */ jsx33(
+    ConfigProvider14,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsx33(
+        Breadcrumb,
+        {
+          items,
+          separator,
+          itemRender,
+          className: classname,
+          params
+        }
+      )
+    }
+  );
+}
+
+// src/HeadingPage/HeadingPage.tsx
+import { ConfigProvider as ConfigProvider15 } from "antd";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+function HeadingPage({ Heading }) {
+  const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  });
+  return /* @__PURE__ */ jsx34(
+    ConfigProvider15,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
+        /* @__PURE__ */ jsx34("p", { className: "headline-5", children: Heading }),
+        /* @__PURE__ */ jsxs29("p", { className: "body-1", children: [
+          " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
+          today
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/Progress/ProgressBar.tsx
+import { ConfigProvider as ConfigProvider16, Progress } from "antd";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+function ProgressBar({
+  percent = 0,
+  size = "default",
+  checkpoints = [],
+  showInfo,
+  trailColor = "#DBE0E5",
+  type,
+  strokeLinecap,
+  strokeWidth,
+  steps,
+  isCheckPoints
+}) {
+  const [barWidth, setBarWidth] = useState10(0);
+  const progressRef = useRef3(null);
+  let strokeColor = "--color-green-500";
+  const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
+  const defaultSize = type === "circle" ? 43 : size;
+  if (percent < 100 && checkpoints.length > 0) {
+    const minCheckpoint = Math.min(...checkpoints);
+    strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
+  }
+  useEffect2(() => {
+    const inner = progressRef.current?.querySelector(".ant-progress-inner");
+    if (!inner) return;
+    const observer = new ResizeObserver(() => {
+      setBarWidth(inner.offsetWidth);
+    });
+    observer.observe(inner);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx35(
+    ConfigProvider16,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs30("div", { className: "relative w-full", ref: progressRef, children: [
+        /* @__PURE__ */ jsx35(
+          Progress,
+          {
+            className: "w-full",
+            percent,
+            size: defaultSize,
+            type,
+            showInfo,
+            trailColor,
+            format: (percent2) => `${percent2}%`,
+            strokeLinecap,
+            strokeWidth: defaultStrokeWidth,
+            steps,
+            strokeColor
+          }
+        ),
+        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx35(
+          "div",
+          {
+            className: "checkpoint absolute top-0",
+            style: {
+              left: `${cp / 100 * barWidth}px`,
+              width: 0,
+              height: 0,
+              borderLeft: "6px solid transparent",
+              borderRight: "6px solid transparent",
+              borderTop: "10px solid red",
+              transform: "translateX(-50%)"
+            }
+          },
+          cp
+        ))
+      ] })
+    }
+  );
+}
+
+// src/KpiSection/KpiSection.tsx
+import { ConfigProvider as ConfigProvider17, message } from "antd";
+import { useEffect as useEffect3, useState as useState12 } from "react";
+
+// src/KpiSection/hooks/useGetKpiSection.ts
+import { useState as useState11 } from "react";
+import cuid from "cuid";
+function useGetKpiSection() {
+  const [nameKpi, setNameKpi] = useState11("");
+  const [kpiValue, setKpiValue] = useState11("");
+  const [unitValue, setUnitValue] = useState11("");
+  const [kpiList, setKpiList] = useState11([]);
+  const [editingBackup, setEditingBackup] = useState11({});
+  const [selected, setSelected] = useState11("2");
+  const [errors, setErrors] = useState11({
+    nameKpi: "",
+    kpiValue: "",
+    unitValue: ""
+  });
+  const [itemErrors, setItemErrors] = useState11({});
+  const options = [
+    { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
+    { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
+  ];
+  const handleAddKpi = (type) => {
+    let newErrors = { nameKpi: "", kpiValue: "", unitValue: "" };
+    let hasError = false;
+    if (!nameKpi) {
+      newErrors.nameKpi = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+      hasError = true;
+    }
+    if (type === "number") {
+      if (!kpiValue) {
+        newErrors.kpiValue = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+        hasError = true;
+      }
+      if (!unitValue) {
+        newErrors.unitValue = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+        hasError = true;
+      }
+    }
+    setErrors(newErrors);
+    if (hasError) return;
+    const newKpi = {
+      id: cuid(),
+      name: nameKpi,
+      value: kpiValue,
+      unit: unitValue,
+      isEditing: false
+    };
+    setKpiList([...kpiList, newKpi]);
+    setNameKpi("");
+    setKpiValue("");
+    setUnitValue("");
+    setErrors({ nameKpi: "", kpiValue: "", unitValue: "" });
+  };
+  const handleEdit = (id) => {
+    const current = kpiList.find((kpi) => kpi.id === id);
+    if (current) {
+      setEditingBackup((prev) => ({ ...prev, [id]: { ...current } }));
+    }
+    setKpiList(
+      (prev) => prev.map((item) => item.id === id ? { ...item, isEditing: true } : item)
+    );
+  };
+  const handleSave = (id, type) => {
+    setKpiList((prev) => {
+      return prev.map((item) => {
+        if (item.id === id) {
+          let hasError = false;
+          const errorsForItem = {};
+          if (!item.name) {
+            errorsForItem.name = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+            hasError = true;
+          }
+          if (type === "number") {
+            if (!item.value) {
+              errorsForItem.value = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+              hasError = true;
+            }
+            if (!item.unit) {
+              errorsForItem.unit = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+              hasError = true;
+            }
+          }
+          if (hasError) {
+            setItemErrors((prev2) => ({ ...prev2, [id]: errorsForItem }));
+            return item;
+          }
+          setItemErrors((prev2) => {
+            const copy = { ...prev2 };
+            delete copy[id];
+            return copy;
+          });
+          return { ...item, isEditing: false };
+        }
+        return item;
+      });
+    });
+  };
+  const handleCancel = (id) => {
+    const backup = editingBackup[id];
+    if (backup) {
+      setKpiList(
+        (prev) => prev.map(
+          (item) => item.id === id ? { ...backup, isEditing: false } : item
+        )
+      );
+      setEditingBackup((prev) => {
+        const copy = { ...prev };
+        delete copy[id];
+        return copy;
+      });
+    } else {
+      setKpiList(
+        (prev) => prev.map(
+          (item) => item.id === id ? { ...item, isEditing: false } : item
+        )
+      );
+    }
+  };
+  const handleDelete = (id) => {
+    setKpiList((prev) => prev.filter((item) => item.id !== id));
+  };
+  return {
+    handleAddKpi,
+    handleEdit,
+    handleSave,
+    handleCancel,
+    handleDelete,
+    nameKpi,
+    setNameKpi,
+    kpiValue,
+    setKpiValue,
+    unitValue,
+    setUnitValue,
+    kpiList,
+    setKpiList,
+    editingBackup,
+    setEditingBackup,
+    options,
+    selected,
+    setSelected,
+    errors,
+    setErrors,
+    itemErrors,
+    setItemErrors
+  };
+}
+
+// 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 jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+function KpiSection({ type, onChangeKpiList }) {
+  const {
+    handleAddKpi,
+    handleEdit,
+    handleSave,
+    handleCancel,
+    handleDelete,
+    nameKpi,
+    setNameKpi,
+    kpiValue,
+    setKpiValue,
+    unitValue,
+    setUnitValue,
+    kpiList,
+    setKpiList,
+    errors,
+    itemErrors,
+    setItemErrors
+  } = useGetKpiSection();
+  const [messageApi2, messageContainer] = message.useMessage();
+  const [hasShownError, setHasShownError] = useState12(false);
+  useEffect3(() => {
+    setMessageApi(messageApi2);
+  }, [messageApi2]);
+  useEffect3(() => {
+    if (onChangeKpiList) {
+      onChangeKpiList(kpiList);
+    }
+  }, [kpiList]);
+  return /* @__PURE__ */ jsx36(
+    ConfigProvider17,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs31("div", { className: "container-input", children: [
+        messageContainer,
+        type === "number" && /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx36(
+              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)",
+                placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                required: true,
+                onChange: (value) => setNameKpi(value ?? ""),
+                className: "h-[32px]",
+                error: errors.nameKpi
+              }
+            ),
+            /* @__PURE__ */ jsx36(
+              InputField,
+              {
+                value: kpiValue,
+                label: "\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("");
+                    setHasShownError(false);
+                  } else if (/^\d*\.?\d*$/.test(value)) {
+                    setKpiValue(value);
+                    setHasShownError(false);
+                  } else {
+                    if (!hasShownError) {
+                      messageError("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02\u0E40\u0E17\u0E48\u0E32\u0E19\u0E31\u0E49\u0E19");
+                      setHasShownError(true);
+                    }
+                  }
+                },
+                error: errors.kpiValue
+              }
+            ),
+            /* @__PURE__ */ jsx36(
+              InputField,
+              {
+                value: unitValue,
+                label: "\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__ */ jsx36("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx36(
+              IconCirclePlus,
+              {
+                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                stroke: 1,
+                onClick: () => handleAddKpi(type)
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx36("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs31(
+            "div",
+            {
+              className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
+              children: [
+                /* @__PURE__ */ jsxs31("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                  index + 1,
+                  "."
+                ] }),
+                kpi.isEditing ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
+                  /* @__PURE__ */ jsx36(
+                    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__ */ jsx36(
+                    InputField,
+                    {
+                      value: kpi.value?.toString(),
+                      onChange: (value) => {
+                        if (value === void 0 || value === "") {
+                          setKpiList(
+                            (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)
+                          );
+                          setHasShownError(false);
+                        } else {
+                          if (!hasShownError) {
+                            messageError("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02\u0E40\u0E17\u0E48\u0E32\u0E19\u0E31\u0E49\u0E19");
+                            setHasShownError(true);
+                          }
+                        }
+                      },
+                      error: itemErrors[kpi.id]?.value
+                    }
+                  ),
+                  /* @__PURE__ */ jsx36(
+                    InputField,
+                    {
+                      value: kpi.unit,
+                      onChange: (value) => setKpiList(
+                        (prev) => prev.map((item) => item.id === kpi.id ? { ...item, unit: value ?? "" } : item)
+                      ),
+                      error: itemErrors[kpi.id]?.unit
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs31(
+                    "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__ */ jsx36(
+                          IconCheck2,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleSave(kpi.id, type)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx36(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
+                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.value }),
+                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.unit }),
+                  /* @__PURE__ */ jsxs31("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ jsx36(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                    /* @__PURE__ */ jsx36(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
+                  ] })
+                ] })
+              ]
+            },
+            kpi.id
+          )) })
+        ] }),
+        type === "text" && /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx36(
+              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)",
+                placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                required: true,
+                onChange: (value) => setNameKpi(value ?? ""),
+                className: "h-[32px]",
+                error: errors.nameKpi
+              }
+            ),
+            /* @__PURE__ */ jsx36("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx36(
+              IconCirclePlus,
+              {
+                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                stroke: 1,
+                onClick: () => handleAddKpi(type)
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx36("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
+            /* @__PURE__ */ jsxs31("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+              index + 1,
+              "."
+            ] }),
+            kpi.isEditing ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
+              /* @__PURE__ */ jsx36(
+                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__ */ jsxs31(
+                "div",
+                {
+                  className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx36(
+                      IconCheck2,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleSave(kpi.id, type)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx36(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
+              /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.name }),
+              /* @__PURE__ */ jsxs31("div", { className: "flex gap-3 justify-end", children: [
+                /* @__PURE__ */ jsx36(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                /* @__PURE__ */ jsx36(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
+              ] })
+            ] })
+          ] }, kpi.id)) })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/Modal/Modal/Modal.tsx
+import { Modal } from "antd";
+import { jsx as jsx37 } from "react/jsx-runtime";
+function AntDModal({ children, isOpen, width, onCancel }) {
+  return /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsx37(Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ jsx37("div", { children }) }) });
+}
+
+// src/Indicator/Indicator/Indicator.tsx
+import { IconCheck as IconCheck3, IconCirclePlus as IconCirclePlus2, IconPencil as IconPencil2, IconTrash as IconTrash4, IconX as IconX3 } from "@tabler/icons-react";
+import { useState as useState13 } from "react";
+import { Input as Input4 } from "antd";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+function Indicator({
+  option = [
+    { value: "TEXT", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
+    { value: "NUMBER", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
+  ],
+  type,
+  arrayData,
+  setArrayData
+}) {
+  const [valueSwitch, setValueSwitch] = useState13("TEXT");
+  const [cacheData, setCacheData] = useState13({
+    indicatorType: type,
+    inputType: valueSwitch,
+    textValue: "",
+    numberValue: "",
+    unit: ""
+  });
+  const [cacheEditData, setCacheEditData] = useState13({
+    indicatorType: type,
+    inputType: valueSwitch,
+    textValue: "",
+    numberValue: "",
+    unit: ""
+  });
+  const [editIndex, setEditIndex] = useState13(null);
+  const handleAddIndicator = () => {
+    if (cacheData.textValue.trim() === "") return;
+    setArrayData([
+      ...arrayData,
+      valueSwitch === "TEXT" ? {
+        indicatorType: type,
+        inputType: "TEXT",
+        textValue: cacheData.textValue
+      } : cacheData
+    ]);
+    setCacheData({
+      indicatorType: type,
+      inputType: valueSwitch,
+      textValue: "",
+      numberValue: "",
+      unit: ""
+    });
+  };
+  const handleChangeCashData = (key, value) => {
+    setCacheData((prev) => ({
+      ...prev,
+      [key]: value
+    }));
+    console.log(cacheData);
+  };
+  const handleClick = (active) => {
+    handleChangeCashData("inputType", active);
+    setValueSwitch(active);
+  };
+  const handleDeleteIndicator = (index) => {
+    const newData = arrayData.filter((_, i) => i !== index);
+    setArrayData(newData);
+    setEditIndex(null);
+  };
+  const handleEditIndicator = (index) => {
+    setCacheEditData(arrayData[index]);
+    setEditIndex(index);
+  };
+  const handleCancelEditIndicator = () => {
+    setEditIndex(null);
+  };
+  const handleConfirmEditIndicator = (index) => {
+    if (cacheEditData.textValue.trim() === "") return;
+    const newData = [...arrayData];
+    newData[index] = cacheEditData;
+    setArrayData(newData);
+    setEditIndex(null);
+  };
+  const handleChangeEditCashData = (e) => {
+    const { name, value } = e.target;
+    setCacheEditData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+    console.log(cacheEditData);
+  };
+  return /* @__PURE__ */ jsxs32("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs32(
+      "div",
+      {
+        className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
+        children: [
+          /* @__PURE__ */ jsx38(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
+          /* @__PURE__ */ jsx38(
+            InputField,
+            {
+              label: `\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+              value: cacheData.textValue,
+              className: "h-[32px]",
+              onChange: (e) => handleChangeCashData("textValue", String(e)),
+              placeholder: `\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+              required: true
+            }
+          ),
+          valueSwitch === "NUMBER" && /* @__PURE__ */ jsxs32(Fragment7, { children: [
+            /* @__PURE__ */ jsx38(
+              InputFieldNumber,
+              {
+                label: `\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+                value: cacheData.numberValue ?? "",
+                className: "h-[32px]",
+                onChange: (e) => handleChangeCashData("numberValue", String(e)),
+                placeholder: `\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx38(
+              InputField,
+              {
+                label: `\u0E2B\u0E19\u0E48\u0E27\u0E22`,
+                value: cacheData.unit ?? "",
+                className: "h-[32px]",
+                onChange: (e) => handleChangeCashData("unit", String(e)),
+                placeholder: "\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx38(IconCirclePlus2, { onClick: handleAddIndicator, className: "mt-7 cursor-pointer", size: 32 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx38(Fragment7, { children: arrayData.map((item, index) => /* @__PURE__ */ jsxs32(
+      "div",
+      {
+        className: `space-y-4 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
+        children: [
+          /* @__PURE__ */ jsx38("div", { className: "body-1 mt-2", children: item.inputType === "TEXT" ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" : "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }),
+          index === editIndex ? /* @__PURE__ */ jsx38(
+            Input4,
+            {
+              className: "body-1 mt-2",
+              variant: "underlined",
+              value: cacheEditData.textValue,
+              name: "textValue",
+              onChange: (e) => handleChangeEditCashData(e)
+            }
+          ) : /* @__PURE__ */ jsx38("div", { className: "body-1 mt-2", children: item.textValue }),
+          item.inputType === "NUMBER" && /* @__PURE__ */ jsxs32(Fragment7, { children: [
+            index === editIndex ? /* @__PURE__ */ jsx38(
+              Input4,
+              {
+                className: "body-1 mt-2",
+                variant: "underlined",
+                value: cacheEditData.numberValue,
+                name: "numberValue",
+                onChange: (e) => handleChangeEditCashData(e)
+              }
+            ) : /* @__PURE__ */ jsx38("div", { className: "body-1 mt-2", children: item.numberValue }),
+            index === editIndex ? /* @__PURE__ */ jsx38(
+              Input4,
+              {
+                className: "body-1 mt-2",
+                variant: "underlined",
+                value: cacheEditData.unit,
+                name: "unit",
+                onChange: (e) => handleChangeEditCashData(e)
+              }
+            ) : /* @__PURE__ */ jsx38("div", { className: "body-1 mt-2", children: item.unit })
+          ] }),
+          /* @__PURE__ */ jsx38("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ jsxs32("div", { className: "flex", children: [
+            /* @__PURE__ */ jsx38(
+              IconCheck3,
+              {
+                className: "cursor-pointer text-green-600",
+                onClick: () => handleConfirmEditIndicator(index)
+              }
+            ),
+            /* @__PURE__ */ jsx38(IconX3, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
+          ] }) : void 0 : /* @__PURE__ */ jsx38(IconPencil2, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
+          /* @__PURE__ */ jsx38("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ jsx38(IconTrash4, { onClick: () => handleDeleteIndicator(index) }) })
+        ]
+      }
+    )) })
+  ] });
+}
+
+// src/FilterPopUp/FilterPopUp.tsx
+import { IconCheck as IconCheck4, IconFilter as IconFilter2, IconTrash as IconTrash5 } from "@tabler/icons-react";
+import { useState as useState14 } from "react";
+import { jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
+var FilterPopUp = (filter) => {
+  const [isAction, setIsAction] = useState14(true);
+  const [filterArray, setFilterArray] = useState14([""]);
+  const handleClearFilter = () => {
+    setFilterArray([]);
+  };
+  const handleSubmitFilter = () => {
+    filter.handleSearch(filterArray);
+  };
+  return /* @__PURE__ */ jsxs33("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs33("button", { className: "flex px-2 py-1 rounded-lg border-1", onClick: () => setIsAction(!isAction), children: [
+      /* @__PURE__ */ jsx39(IconFilter2, {}),
+      "filter"
+    ] }),
+    isAction ? /* @__PURE__ */ jsxs33("div", { className: "absolute bg-white p-5 rounded-lg shadow-2xl w-[600px]", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "flex justify-end", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex justify-end text-nowrap gap-2", children: [
+          /* @__PURE__ */ jsx39(GhostButton, { title: "\u0E43\u0E0A\u0E49\u0E1F\u0E34\u0E25\u0E40\u0E15\u0E2D\u0E23\u0E4C", onClick: handleSubmitFilter, iconLeft: /* @__PURE__ */ jsx39(IconCheck4, {}) }),
+          /* @__PURE__ */ jsx39(GhostButton, { title: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", onClick: handleClearFilter, iconLeft: /* @__PURE__ */ jsx39(IconTrash5, {}) })
+        ] }),
+        ""
+      ] }),
+      /* @__PURE__ */ jsx39(
+        SelectCustom,
+        {
+          options: filter.selectionFilter,
+          onChange: (list) => setFilterArray(list),
+          label: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01"
+        }
+      )
+    ] }) : void 0
+  ] });
+};
+export {
+  AntDModal,
+  AntDataTable,
+  Breadcrumbs,
+  Calendar,
+  Checkbox,
+  CheckboxGroup,
+  ColorPalettePickerBasic,
+  ColorPickerBasic,
+  DataTable,
+  FileUploader,
+  FilterPopUp,
+  GhostButton,
+  HeadingPage,
+  Indicator,
+  InputField,
+  InputFieldNumber,
+  KpiSection,
+  Loader,
+  MenuNavBar,
+  PrimaryButton,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  SecondaryButton,
+  SelectCustom,
+  SelectField,
+  SelectFieldGroup,
+  SelectFieldStatus,
+  SelectFieldStatusReport,
+  SelectFieldTag,
+  Sidebar,
+  SortFilter,
+  Switch,
+  SwitchSelect,
+  TabSelectionButton,
+  TextAreaInput,
+  TextInput,
+  TopNavBar,
+  messageError,
+  messageInfo,
+  messageLoading,
+  messageSuccess,
+  messageWarning,
+  setMessageApi
+};