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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +17 -0
  2. package/dist/index.d.mts +73 -28
  3. package/dist/index.d.ts +73 -28
  4. package/dist/index.js +531 -440
  5. package/dist/index.mjs +518 -430
  6. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -517,10 +517,26 @@ function GhostButton({ title, onClick, iconLeft, iconRight, disabled }) {
517
517
  );
518
518
  }
519
519
 
520
+ // src/Button/TabSelectionButton/TabSelectionButton.tsx
521
+ import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
522
+ var TabSelectionButton = ({ title, now, onClickGoto }) => {
523
+ return /* @__PURE__ */ jsxs4("div", { className: "flex subtitle-2", children: [
524
+ title.map((text) => /* @__PURE__ */ jsx4(
525
+ "button",
526
+ {
527
+ onClick: () => onClickGoto(text.path),
528
+ 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"}`,
529
+ children: text.name
530
+ }
531
+ )),
532
+ /* @__PURE__ */ jsx4("div", { className: "border-b-gray-200 border-b-2 w-full" })
533
+ ] });
534
+ };
535
+
520
536
  // src/Loader/Loader/Loader.tsx
521
- import { jsx as jsx4 } from "react/jsx-runtime";
537
+ import { jsx as jsx5 } from "react/jsx-runtime";
522
538
  function Loader({ size = 25, color = "#000000" }) {
523
- return /* @__PURE__ */ jsx4(
539
+ return /* @__PURE__ */ jsx5(
524
540
  "div",
525
541
  {
526
542
  style: {
@@ -538,14 +554,14 @@ function Loader({ size = 25, color = "#000000" }) {
538
554
 
539
555
  // src/Checkbox/Checkbox/Checkbox.tsx
540
556
  import { IconCheck } from "@tabler/icons-react";
541
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
557
+ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
542
558
  function Checkbox({ label, checked, onChange, disabled }) {
543
559
  const handleClick = () => {
544
560
  if (!disabled) {
545
561
  onChange(!checked);
546
562
  }
547
563
  };
548
- return /* @__PURE__ */ jsxs4(
564
+ return /* @__PURE__ */ jsxs5(
549
565
  "div",
550
566
  {
551
567
  className: `flex gap-[10px] items-center
@@ -553,32 +569,32 @@ function Checkbox({ label, checked, onChange, disabled }) {
553
569
  "aria-disabled": disabled,
554
570
  onClick: handleClick,
555
571
  children: [
556
- /* @__PURE__ */ jsx5(
572
+ /* @__PURE__ */ jsx6(
557
573
  "div",
558
574
  {
559
575
  className: `flex justify-center items-center border-[1px] border-black w-[24px] h-[24px] rounded-[8px] transition-colors duration-100
560
576
  ${checked ? "bg-black text-white" : "bg-white text-black"}
561
577
  ${disabled ? "pointer-events-none" : ""}`,
562
- children: /* @__PURE__ */ jsx5(
578
+ children: /* @__PURE__ */ jsx6(
563
579
  "span",
564
580
  {
565
581
  className: `flex justify-center items-center transition-transform duration-150
566
582
  ${checked ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
567
- children: /* @__PURE__ */ jsx5(IconCheck, { size: 20 })
583
+ children: /* @__PURE__ */ jsx6(IconCheck, { size: 20 })
568
584
  }
569
585
  )
570
586
  }
571
587
  ),
572
- label && /* @__PURE__ */ jsx5("p", { className: "body-1 select-none", children: label })
588
+ label && /* @__PURE__ */ jsx6("p", { className: "body-1 select-none", children: label })
573
589
  ]
574
590
  }
575
591
  );
576
592
  }
577
593
 
578
594
  // src/Checkbox/CheckboxGroup/CheckboxGroup.tsx
579
- import { jsx as jsx6 } from "react/jsx-runtime";
595
+ import { jsx as jsx7 } from "react/jsx-runtime";
580
596
  function CheckboxGroup({ options, onChange, alignment = "vertical" }) {
581
- return /* @__PURE__ */ jsx6("div", { className: `flex gap-4 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ jsx6(
597
+ return /* @__PURE__ */ jsx7("div", { className: `flex gap-4 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ jsx7(
582
598
  Checkbox,
583
599
  {
584
600
  checked: opt.checked,
@@ -591,14 +607,14 @@ function CheckboxGroup({ options, onChange, alignment = "vertical" }) {
591
607
  }
592
608
 
593
609
  // src/Radio/Radio/Radio.tsx
594
- import { jsx as jsx7 } from "react/jsx-runtime";
610
+ import { jsx as jsx8 } from "react/jsx-runtime";
595
611
  function Radio({ selected, onChange, disabled }) {
596
612
  const handleClick = () => {
597
613
  if (!disabled) {
598
614
  onChange(!selected);
599
615
  }
600
616
  };
601
- return /* @__PURE__ */ jsx7(
617
+ return /* @__PURE__ */ jsx8(
602
618
  "div",
603
619
  {
604
620
  className: `
@@ -607,31 +623,31 @@ function Radio({ selected, onChange, disabled }) {
607
623
  `,
608
624
  onClick: handleClick,
609
625
  "aria-disabled": disabled,
610
- children: selected && /* @__PURE__ */ jsx7("div", { className: `bg-black w-[10px] h-[10px] rounded-full transition-all duration-300` })
626
+ children: selected && /* @__PURE__ */ jsx8("div", { className: `bg-black w-[10px] h-[10px] rounded-full transition-all duration-300` })
611
627
  }
612
628
  );
613
629
  }
614
630
 
615
631
  // src/Radio/RadioGroup/RadioGroup.tsx
616
- import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
632
+ import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
617
633
  function RadioGroup({ options, value, onChange, alignment = "horizontal" }) {
618
- return /* @__PURE__ */ jsx8("div", { className: `flex gap-2 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2 cursor-pointer", children: [
619
- /* @__PURE__ */ jsx8(Radio, { selected: value === opt.value, onChange: () => onChange(opt.value), disabled: opt.disabled }),
620
- /* @__PURE__ */ jsx8("span", { className: `body-1 ${opt.disabled ? "text-gray-400 cursor-not-allowed" : ""}`, children: opt.label })
634
+ 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: [
635
+ /* @__PURE__ */ jsx9(Radio, { selected: value === opt.value, onChange: () => onChange(opt.value), disabled: opt.disabled }),
636
+ /* @__PURE__ */ jsx9("span", { className: `body-1 ${opt.disabled ? "text-gray-400 cursor-not-allowed" : ""}`, children: opt.label })
621
637
  ] }, opt.value)) });
622
638
  }
623
639
 
624
640
  // src/Switch/Switch/Switch.tsx
625
- import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
641
+ import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
626
642
  function Switch({ label, checked, onChange, disabled }) {
627
643
  const handleClick = () => {
628
644
  if (!disabled) {
629
645
  onChange(!checked);
630
646
  }
631
647
  };
632
- return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[10px]", children: [
633
- label && /* @__PURE__ */ jsx9("p", { className: `body-1 ${disabled ? "opacity-50 select-none" : ""}`, children: label }),
634
- /* @__PURE__ */ jsx9(
648
+ return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-[10px]", children: [
649
+ label && /* @__PURE__ */ jsx10("p", { className: `body-1 ${disabled ? "opacity-50 select-none" : ""}`, children: label }),
650
+ /* @__PURE__ */ jsx10(
635
651
  "button",
636
652
  {
637
653
  type: "button",
@@ -643,7 +659,7 @@ function Switch({ label, checked, onChange, disabled }) {
643
659
  ${checked ? "bg-blue-500" : "bg-gray-300"}
644
660
  ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
645
661
  `,
646
- children: /* @__PURE__ */ jsx9(
662
+ children: /* @__PURE__ */ jsx10(
647
663
  "div",
648
664
  {
649
665
  className: `bg-white w-5 h-5 rounded-full shadow-md transform transition-transform duration-300
@@ -656,22 +672,22 @@ function Switch({ label, checked, onChange, disabled }) {
656
672
  }
657
673
 
658
674
  // src/NavBar/MenuNavBar/MenuNavBar.tsx
659
- import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
675
+ import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
660
676
  function MenuNavBar({ menus, onClick }) {
661
- return /* @__PURE__ */ jsx10("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs7("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
662
- /* @__PURE__ */ jsx10("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
663
- menu?.subMenus.map((subMenu) => /* @__PURE__ */ jsxs7(
677
+ return /* @__PURE__ */ jsx11("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs8("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
678
+ /* @__PURE__ */ jsx11("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
679
+ menu?.subMenus.map((subMenu) => /* @__PURE__ */ jsxs8(
664
680
  "div",
665
681
  {
666
682
  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",
667
683
  onClick: () => onClick(subMenu.path),
668
684
  children: [
669
- /* @__PURE__ */ jsxs7("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: [
670
- subMenu.icon && /* @__PURE__ */ jsx10("span", { className: `block ${subMenu.iconActive ? "group-active:hidden" : ""}`, children: subMenu.icon }),
671
- subMenu.iconActive && /* @__PURE__ */ jsx10("span", { className: "hidden group-active:block", children: subMenu.iconActive })
685
+ /* @__PURE__ */ jsxs8("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: [
686
+ subMenu.icon && /* @__PURE__ */ jsx11("span", { className: `block ${subMenu.iconActive ? "group-active:hidden" : ""}`, children: subMenu.icon }),
687
+ subMenu.iconActive && /* @__PURE__ */ jsx11("span", { className: "hidden group-active:block", children: subMenu.iconActive })
672
688
  ] }),
673
689
  subMenu.title,
674
- /* @__PURE__ */ jsx10("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
690
+ /* @__PURE__ */ jsx11("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
675
691
  ]
676
692
  },
677
693
  `sub_${subMenu.title}`
@@ -682,39 +698,39 @@ function MenuNavBar({ menus, onClick }) {
682
698
  // src/NavBar/MenuNavBar/Sidebar.tsx
683
699
  import { IconChevronLeftPipe, IconChevronRightPipe } from "@tabler/icons-react";
684
700
  import { createContext, useContext, useState } from "react";
685
- import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
701
+ import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
686
702
  var SidebarContext = createContext({ expanded: false });
687
703
  function Sidebar({ children, logo }) {
688
704
  const [expanded, setExpanded] = useState(true);
689
- return /* @__PURE__ */ jsx11("aside", { className: "h-screen", children: /* @__PURE__ */ jsxs8("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
690
- /* @__PURE__ */ jsxs8("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
691
- expanded && logo && /* @__PURE__ */ jsx11("img", { src: logo, width: 120, className: "ml-auto" }),
692
- /* @__PURE__ */ jsx11(
705
+ return /* @__PURE__ */ jsx12("aside", { className: "h-screen", children: /* @__PURE__ */ jsxs9("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
706
+ /* @__PURE__ */ jsxs9("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
707
+ expanded && logo && /* @__PURE__ */ jsx12("img", { src: logo, width: 120, className: "ml-auto" }),
708
+ /* @__PURE__ */ jsx12(
693
709
  "button",
694
710
  {
695
711
  className: "p-1.5 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer ml-auto",
696
712
  onClick: () => setExpanded((curr) => !curr),
697
- children: expanded ? /* @__PURE__ */ jsx11(IconChevronLeftPipe, {}) : /* @__PURE__ */ jsx11(IconChevronRightPipe, {})
713
+ children: expanded ? /* @__PURE__ */ jsx12(IconChevronLeftPipe, {}) : /* @__PURE__ */ jsx12(IconChevronRightPipe, {})
698
714
  }
699
715
  )
700
716
  ] }),
701
- /* @__PURE__ */ jsx11(SidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsx11("ul", { className: "flex-1 px-3", children }) })
717
+ /* @__PURE__ */ jsx12(SidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsx12("ul", { className: "flex-1 px-3", children }) })
702
718
  ] }) });
703
719
  }
704
720
 
705
721
  // src/NavBar/TopNavBar/TopNavBar.tsx
706
722
  import { IconBellRinging } from "@tabler/icons-react";
707
- import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
723
+ import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
708
724
  function TopNavBar({ onClickNoti, logo }) {
709
- return /* @__PURE__ */ jsxs9("div", { className: "w-full h-full flex", children: [
710
- /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
725
+ return /* @__PURE__ */ jsxs10("div", { className: "w-full h-full flex", children: [
726
+ /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
711
727
  logo,
712
- /* @__PURE__ */ jsx12("p", { className: "subtitle-1", children: "Project Management" })
728
+ /* @__PURE__ */ jsx13("p", { className: "subtitle-1", children: "Project Management" })
713
729
  ] }),
714
- /* @__PURE__ */ jsxs9("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [
715
- /* @__PURE__ */ jsx12("div", { children: "Search" }),
716
- /* @__PURE__ */ jsx12("div", { children: /* @__PURE__ */ jsx12(IconBellRinging, { onClick: onClickNoti, className: "cursor-pointer" }) }),
717
- /* @__PURE__ */ jsx12("div", { className: "w-[40px] h-[40px] bg-gray-400 rounded-full cursor-pointer" })
730
+ /* @__PURE__ */ jsxs10("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [
731
+ /* @__PURE__ */ jsx13("div", { children: "Search" }),
732
+ /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(IconBellRinging, { onClick: onClickNoti, className: "cursor-pointer" }) }),
733
+ /* @__PURE__ */ jsx13("div", { className: "w-[40px] h-[40px] bg-gray-400 rounded-full cursor-pointer" })
718
734
  ] })
719
735
  ] });
720
736
  }
@@ -726,7 +742,7 @@ import { useState as useState2 } from "react";
726
742
  // src/Table/Pagination/Pagination.tsx
727
743
  import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
728
744
  import { useMemo } from "react";
729
- import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
745
+ import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
730
746
  function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
731
747
  const totalPages = Math.ceil(totalItems / itemsPerPage);
732
748
  const getPages = useMemo(() => {
@@ -750,21 +766,21 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
750
766
  return pages;
751
767
  }, [totalPages, currentPage]);
752
768
  if (totalPages <= 1) return null;
753
- return /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-center gap-2 mt-4 body-1", children: [
754
- /* @__PURE__ */ jsxs10(
769
+ return /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-center gap-2 mt-4 body-1", children: [
770
+ /* @__PURE__ */ jsxs11(
755
771
  "button",
756
772
  {
757
773
  className: "px-3 py-1 disabled:opacity-50 flex gap-[8px] cursor-pointer",
758
774
  disabled: currentPage === 1,
759
775
  onClick: () => onPageChange(currentPage - 1),
760
776
  children: [
761
- /* @__PURE__ */ jsx13(IconArrowLeft, {}),
777
+ /* @__PURE__ */ jsx14(IconArrowLeft, {}),
762
778
  "\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A"
763
779
  ]
764
780
  }
765
781
  ),
766
782
  getPages.map(
767
- (page, i) => typeof page === "string" ? /* @__PURE__ */ jsx13("span", { className: "px-2", children: page }, i) : /* @__PURE__ */ jsx13(
783
+ (page, i) => typeof page === "string" ? /* @__PURE__ */ jsx14("span", { className: "px-2", children: page }, i) : /* @__PURE__ */ jsx14(
768
784
  "button",
769
785
  {
770
786
  className: `w-[32px] h-[32px] rounded-[8px] px-3 py-1 cursor-pointer
@@ -775,7 +791,7 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
775
791
  i
776
792
  )
777
793
  ),
778
- /* @__PURE__ */ jsxs10(
794
+ /* @__PURE__ */ jsxs11(
779
795
  "button",
780
796
  {
781
797
  className: "px-3 py-1 disabled:opacity-50 flex gap-[8px] cursor-pointer",
@@ -783,7 +799,7 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
783
799
  onClick: () => onPageChange(currentPage + 1),
784
800
  children: [
785
801
  "\u0E16\u0E31\u0E14\u0E44\u0E1B",
786
- /* @__PURE__ */ jsx13(IconArrowRight, {})
802
+ /* @__PURE__ */ jsx14(IconArrowRight, {})
787
803
  ]
788
804
  }
789
805
  )
@@ -791,7 +807,7 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
791
807
  }
792
808
 
793
809
  // src/Table/DataTable/DataTable.tsx
794
- import { Fragment, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
810
+ import { Fragment, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
795
811
  function DataTable({ columns, data, onSort, isLoading }) {
796
812
  const cols = Math.max(1, columns.length);
797
813
  const gridClass = "grid [grid-template-columns:repeat(var(--cols),minmax(0,1fr))]";
@@ -803,14 +819,14 @@ function DataTable({ columns, data, onSort, isLoading }) {
803
819
  onSort();
804
820
  }
805
821
  };
806
- return /* @__PURE__ */ jsxs11("div", { className: "border rounded-md w-full h-full", children: [
807
- /* @__PURE__ */ jsx14("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => {
822
+ return /* @__PURE__ */ jsxs12("div", { className: "border rounded-md w-full h-full", children: [
823
+ /* @__PURE__ */ jsx15("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => {
808
824
  const isActive = sortConfig?.key === col.accessor;
809
825
  const direction = isActive ? sortConfig?.direction : null;
810
- return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-[8px] py-[8px] px-[16px] body-4 truncate", children: [
826
+ return /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-[8px] py-[8px] px-[16px] body-4 truncate", children: [
811
827
  col.header,
812
- col.sortable && /* @__PURE__ */ jsxs11(Fragment, { children: [
813
- direction === null && /* @__PURE__ */ jsx14(
828
+ col.sortable && /* @__PURE__ */ jsxs12(Fragment, { children: [
829
+ direction === null && /* @__PURE__ */ jsx15(
814
830
  IconSelector,
815
831
  {
816
832
  size: 15,
@@ -818,7 +834,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
818
834
  onClick: () => onSorting({ key: col.accessor, direction: "asc" })
819
835
  }
820
836
  ),
821
- direction === "asc" && /* @__PURE__ */ jsx14(
837
+ direction === "asc" && /* @__PURE__ */ jsx15(
822
838
  IconSortAscending,
823
839
  {
824
840
  size: 15,
@@ -826,7 +842,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
826
842
  onClick: () => onSorting({ key: col.accessor, direction: "desc" })
827
843
  }
828
844
  ),
829
- direction === "desc" && /* @__PURE__ */ jsx14(
845
+ direction === "desc" && /* @__PURE__ */ jsx15(
830
846
  IconSortDescending,
831
847
  {
832
848
  size: 15,
@@ -837,23 +853,23 @@ function DataTable({ columns, data, onSort, isLoading }) {
837
853
  ] })
838
854
  ] }, i);
839
855
  }) }),
840
- isLoading ? /* @__PURE__ */ jsx14("div", { className: "flex justify-center items-center w-full h-full", children: /* @__PURE__ */ jsx14(Loader, {}) }) : /* @__PURE__ */ jsx14(Fragment, { children: data.map((row, i) => /* @__PURE__ */ jsx14(
856
+ isLoading ? /* @__PURE__ */ jsx15("div", { className: "flex justify-center items-center w-full h-full", children: /* @__PURE__ */ jsx15(Loader, {}) }) : /* @__PURE__ */ jsx15(Fragment, { children: data.map((row, i) => /* @__PURE__ */ jsx15(
841
857
  "div",
842
858
  {
843
859
  className: `${gridClass} ${data.length - 1 !== i ? "border-b border-gray-200" : ""} items-center`,
844
860
  style: { ["--cols"]: cols },
845
- children: columns.map((col, c) => /* @__PURE__ */ jsx14("div", { className: "py-[8px] px-[16px] body-3 truncate", children: typeof col.accessor === "function" ? col.accessor(row) : String(row[col.accessor]) }, c))
861
+ children: columns.map((col, c) => /* @__PURE__ */ jsx15("div", { className: "py-[8px] px-[16px] body-3 truncate", children: typeof col.accessor === "function" ? col.accessor(row) : String(row[col.accessor]) }, c))
846
862
  },
847
863
  i
848
864
  )) }),
849
- /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(Pagination, { currentPage: page, itemsPerPage: 5, totalItems: 10, onPageChange: setPage }) })
865
+ /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(Pagination, { currentPage: page, itemsPerPage: 5, totalItems: 10, onPageChange: setPage }) })
850
866
  ] });
851
867
  }
852
868
 
853
869
  // src/Table/DataTable/AntDataTable.tsx
854
870
  import { ConfigProvider, Table } from "antd";
855
871
  import { useState as useState3 } from "react";
856
- import { Fragment as Fragment2, jsx as jsx15 } from "react/jsx-runtime";
872
+ import { Fragment as Fragment2, jsx as jsx16 } from "react/jsx-runtime";
857
873
  function AntDataTable({
858
874
  dataSource,
859
875
  columns,
@@ -861,7 +877,8 @@ function AntDataTable({
861
877
  rowCheckbox,
862
878
  onRowSelect,
863
879
  width,
864
- height
880
+ height,
881
+ pagination
865
882
  }) {
866
883
  const [selectedRowKeys, setSelectedRowKeys] = useState3([]);
867
884
  const rowSelection = {
@@ -871,7 +888,7 @@ function AntDataTable({
871
888
  onRowSelect && onRowSelect(newSelectedRowKeys);
872
889
  }
873
890
  };
874
- return /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsx15(
891
+ return /* @__PURE__ */ jsx16(Fragment2, { children: /* @__PURE__ */ jsx16(
875
892
  ConfigProvider,
876
893
  {
877
894
  theme: {
@@ -881,13 +898,13 @@ function AntDataTable({
881
898
  fontSize: 14
882
899
  }
883
900
  },
884
- children: /* @__PURE__ */ jsx15(
901
+ children: /* @__PURE__ */ jsx16(
885
902
  Table,
886
903
  {
887
904
  dataSource,
888
905
  columns,
889
906
  rowSelection: rowCheckbox ? rowSelection : void 0,
890
- pagination: { position: ["bottomCenter"], pageSize },
907
+ pagination: pagination ? { position: ["bottomCenter"], pageSize } : false,
891
908
  style: { width },
892
909
  scroll: { y: height }
893
910
  }
@@ -904,7 +921,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
904
921
  import interactionPlugin from "@fullcalendar/interaction";
905
922
  import thLocale from "@fullcalendar/core/locales/th";
906
923
  import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
907
- import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
924
+ import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
908
925
  function Calendar({ events }) {
909
926
  const calendarRef = useRef(null);
910
927
  const [monthTitle, setMonthTitle] = useState4("");
@@ -923,11 +940,11 @@ function Calendar({ events }) {
923
940
  useEffect(() => {
924
941
  updateTitle();
925
942
  }, []);
926
- return /* @__PURE__ */ jsxs12("div", { className: "fc w-full h-full relative z-10", children: [
927
- /* @__PURE__ */ jsxs12("div", { className: "flex mb-[8px]", children: [
928
- /* @__PURE__ */ jsx16("p", { className: "headline-5", children: monthTitle }),
929
- /* @__PURE__ */ jsxs12("div", { className: "flex gap-[10px] ml-auto", children: [
930
- /* @__PURE__ */ jsx16(
943
+ return /* @__PURE__ */ jsxs13("div", { className: "fc w-full h-full relative z-10", children: [
944
+ /* @__PURE__ */ jsxs13("div", { className: "flex mb-[8px]", children: [
945
+ /* @__PURE__ */ jsx17("p", { className: "headline-5", children: monthTitle }),
946
+ /* @__PURE__ */ jsxs13("div", { className: "flex gap-[10px] ml-auto", children: [
947
+ /* @__PURE__ */ jsx17(
931
948
  "p",
932
949
  {
933
950
  className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -938,7 +955,7 @@ function Calendar({ events }) {
938
955
  children: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49"
939
956
  }
940
957
  ),
941
- /* @__PURE__ */ jsx16(
958
+ /* @__PURE__ */ jsx17(
942
959
  "p",
943
960
  {
944
961
  className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -949,7 +966,7 @@ function Calendar({ events }) {
949
966
  children: "Month"
950
967
  }
951
968
  ),
952
- /* @__PURE__ */ jsx16(
969
+ /* @__PURE__ */ jsx17(
953
970
  "p",
954
971
  {
955
972
  className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -960,7 +977,7 @@ function Calendar({ events }) {
960
977
  children: "Week"
961
978
  }
962
979
  ),
963
- /* @__PURE__ */ jsx16(
980
+ /* @__PURE__ */ jsx17(
964
981
  "p",
965
982
  {
966
983
  className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -971,7 +988,7 @@ function Calendar({ events }) {
971
988
  children: "Day"
972
989
  }
973
990
  ),
974
- /* @__PURE__ */ jsx16(
991
+ /* @__PURE__ */ jsx17(
975
992
  "button",
976
993
  {
977
994
  className: "cursor-pointer",
@@ -979,10 +996,10 @@ function Calendar({ events }) {
979
996
  calendarRef.current?.getApi().prev();
980
997
  updateTitle();
981
998
  },
982
- children: /* @__PURE__ */ jsx16(IconChevronLeft, {})
999
+ children: /* @__PURE__ */ jsx17(IconChevronLeft, {})
983
1000
  }
984
1001
  ),
985
- /* @__PURE__ */ jsx16(
1002
+ /* @__PURE__ */ jsx17(
986
1003
  "button",
987
1004
  {
988
1005
  className: "cursor-pointer",
@@ -990,12 +1007,12 @@ function Calendar({ events }) {
990
1007
  calendarRef.current?.getApi().next();
991
1008
  updateTitle();
992
1009
  },
993
- children: /* @__PURE__ */ jsx16(IconChevronRight, {})
1010
+ children: /* @__PURE__ */ jsx17(IconChevronRight, {})
994
1011
  }
995
1012
  )
996
1013
  ] })
997
1014
  ] }),
998
- /* @__PURE__ */ jsx16("div", { className: "relative z-10", children: /* @__PURE__ */ jsx16(
1015
+ /* @__PURE__ */ jsx17("div", { className: "relative z-10", children: /* @__PURE__ */ jsx17(
999
1016
  FullCalendar,
1000
1017
  {
1001
1018
  ref: calendarRef,
@@ -1024,28 +1041,28 @@ function Calendar({ events }) {
1024
1041
  });
1025
1042
  },
1026
1043
  eventContent: (arg) => {
1027
- return /* @__PURE__ */ jsx16(Fragment3, { children: /* @__PURE__ */ jsx16("div", { className: "flex items-center h-[28px] p-[4px] border-green-500 border-l-[10px] bg-red-400 rounded text-left text-white caption-1", children: arg.event.title }) });
1044
+ return /* @__PURE__ */ jsx17(Fragment3, { children: /* @__PURE__ */ jsx17("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 }) });
1028
1045
  },
1029
1046
  moreLinkContent: (arg) => `+${arg.num} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`
1030
1047
  }
1031
1048
  ) }),
1032
- openPopup && /* @__PURE__ */ jsx16("div", { className: "fixed inset-0 flex justify-center items-center bg-black/50 z-50", children: /* @__PURE__ */ jsx16(EventPopUp, { event: selectedEvent, onClose: () => setOpenPopup(false) }) })
1049
+ openPopup && /* @__PURE__ */ jsx17("div", { className: "fixed inset-0 flex justify-center items-center bg-black/50 z-50", children: /* @__PURE__ */ jsx17(EventPopUp, { event: selectedEvent, onClose: () => setOpenPopup(false) }) })
1033
1050
  ] });
1034
1051
  }
1035
1052
  function EventPopUp({ event, onClose }) {
1036
- return /* @__PURE__ */ jsxs12("div", { className: "w-[500px] h-auto rounded-2xl bg-white relative z-50 shadow-2xl overflow-hidden", children: [
1037
- /* @__PURE__ */ jsx16("button", { className: "absolute top-3 right-3 rounded-full p-1 hover:bg-gray-200 transition", onClick: onClose, children: /* @__PURE__ */ jsx16(IconX, { className: "w-6 h-6 text-gray-600" }) }),
1038
- /* @__PURE__ */ jsx16("div", { className: "bg-red-400 text-left text-white px-6 py-4 headline-5", children: /* @__PURE__ */ jsx16("h2", { className: "text-lg font-semibold", children: event.title }) }),
1039
- /* @__PURE__ */ jsxs12("div", { className: "flex flex-col w-full p-6 gap-3 text-gray-700 body-3", children: [
1040
- /* @__PURE__ */ jsxs12("p", { children: [
1041
- /* @__PURE__ */ jsx16("span", { className: "font-medium", children: "\u0E40\u0E23\u0E34\u0E48\u0E21: " }),
1053
+ return /* @__PURE__ */ jsxs13("div", { className: "w-[500px] h-auto rounded-2xl bg-white relative z-50 shadow-2xl overflow-hidden", children: [
1054
+ /* @__PURE__ */ jsx17("button", { className: "absolute top-3 right-3 rounded-full p-1 hover:bg-gray-200 transition", onClick: onClose, children: /* @__PURE__ */ jsx17(IconX, { className: "w-6 h-6 text-gray-600" }) }),
1055
+ /* @__PURE__ */ jsx17("div", { className: "bg-red-400 text-left text-white px-6 py-4 headline-5", children: /* @__PURE__ */ jsx17("h2", { className: "text-lg font-semibold", children: event.title }) }),
1056
+ /* @__PURE__ */ jsxs13("div", { className: "flex flex-col w-full p-6 gap-3 text-gray-700 body-3", children: [
1057
+ /* @__PURE__ */ jsxs13("p", { children: [
1058
+ /* @__PURE__ */ jsx17("span", { className: "font-medium", children: "\u0E40\u0E23\u0E34\u0E48\u0E21: " }),
1042
1059
  event?.start?.toLocaleString?.() || String(event?.start)
1043
1060
  ] }),
1044
- /* @__PURE__ */ jsxs12("p", { children: [
1045
- /* @__PURE__ */ jsx16("span", { className: "font-medium", children: "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14: " }),
1061
+ /* @__PURE__ */ jsxs13("p", { children: [
1062
+ /* @__PURE__ */ jsx17("span", { className: "font-medium", children: "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14: " }),
1046
1063
  event?.end?.toLocaleString?.() || String(event?.end)
1047
1064
  ] }),
1048
- /* @__PURE__ */ jsx16("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" })
1065
+ /* @__PURE__ */ jsx17("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" })
1049
1066
  ] })
1050
1067
  ] });
1051
1068
  }
@@ -1053,7 +1070,7 @@ function EventPopUp({ event, onClose }) {
1053
1070
  // src/Input/TextInput/TextInput.tsx
1054
1071
  import { IconEye, IconEyeOff } from "@tabler/icons-react";
1055
1072
  import { useState as useState5 } from "react";
1056
- import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
1073
+ import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
1057
1074
  function TextInput({
1058
1075
  label,
1059
1076
  placeholder,
@@ -1070,18 +1087,18 @@ function TextInput({
1070
1087
  setShowPassword(!showPassword);
1071
1088
  };
1072
1089
  const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
1073
- return /* @__PURE__ */ jsxs13("div", { children: [
1074
- label && /* @__PURE__ */ jsxs13("p", { className: "body-1 mb-[8px]", children: [
1090
+ return /* @__PURE__ */ jsxs14("div", { children: [
1091
+ label && /* @__PURE__ */ jsxs14("p", { className: "body-1 mb-[8px]", children: [
1075
1092
  label,
1076
- required && /* @__PURE__ */ jsx17("span", { className: "text-red-600", children: "\xA0*" })
1093
+ required && /* @__PURE__ */ jsx18("span", { className: "text-red-600", children: "\xA0*" })
1077
1094
  ] }),
1078
- /* @__PURE__ */ jsxs13(
1095
+ /* @__PURE__ */ jsxs14(
1079
1096
  "div",
1080
1097
  {
1081
1098
  className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center
1082
1099
  ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-600" : ""}`,
1083
1100
  children: [
1084
- /* @__PURE__ */ jsx17(
1101
+ /* @__PURE__ */ jsx18(
1085
1102
  "input",
1086
1103
  {
1087
1104
  className: `w-full h-full px-[16px] ${disabled ? "cursor-not-allowed" : ""}`,
@@ -1094,75 +1111,18 @@ function TextInput({
1094
1111
  disabled
1095
1112
  }
1096
1113
  ),
1097
- type === "password" && (showPassword ? /* @__PURE__ */ jsx17(IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ jsx17(IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
1114
+ type === "password" && (showPassword ? /* @__PURE__ */ jsx18(IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ jsx18(IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
1098
1115
  ]
1099
1116
  }
1100
1117
  ),
1101
- error && /* @__PURE__ */ jsx17("p", { className: "text-red-600 body-1", children: error })
1118
+ error && /* @__PURE__ */ jsx18("p", { className: "text-red-600 body-1", children: error })
1102
1119
  ] });
1103
1120
  }
1104
1121
 
1105
- // src/InputField/InputField.tsx
1106
- import { ConfigProvider as ConfigProvider2, Input } from "antd";
1107
- import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
1108
- function InputField({
1109
- value,
1110
- onChange,
1111
- placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
1112
- title,
1113
- required,
1114
- bottomText,
1115
- disabled,
1116
- error,
1117
- addonBefore,
1118
- addonAfter,
1119
- defaultValue,
1120
- className,
1121
- onClear
1122
- }) {
1123
- return /* @__PURE__ */ jsx18(
1124
- ConfigProvider2,
1125
- {
1126
- theme: {
1127
- token: {
1128
- fontFamily: "Kanit"
1129
- }
1130
- },
1131
- children: /* @__PURE__ */ jsxs14("div", { className: "container-input", children: [
1132
- /* @__PURE__ */ jsxs14("div", { children: [
1133
- /* @__PURE__ */ jsx18("span", { className: "body-1", children: title }),
1134
- " ",
1135
- required && /* @__PURE__ */ jsx18("span", { className: "text-red-500", children: "*" })
1136
- ] }),
1137
- /* @__PURE__ */ jsx18(
1138
- Input,
1139
- {
1140
- value,
1141
- placeholder,
1142
- disabled,
1143
- className: `body-1 w-full ${className ?? ""}`,
1144
- onChange: (e) => onChange(e.target.value || void 0),
1145
- allowClear: true,
1146
- addonBefore,
1147
- addonAfter,
1148
- defaultValue,
1149
- onClear
1150
- }
1151
- ),
1152
- /* @__PURE__ */ jsxs14("div", { children: [
1153
- /* @__PURE__ */ jsx18("p", { className: "caption-1 text-gray-500", children: bottomText }),
1154
- " ",
1155
- error && /* @__PURE__ */ jsx18("p", { className: "caption-1 text-red-500 ", children: error })
1156
- ] })
1157
- ] })
1158
- }
1159
- );
1160
- }
1161
-
1162
1122
  // src/Input/TextArea/TextArea.tsx
1163
- import { ConfigProvider as ConfigProvider3, Input as Input2 } from "antd";
1123
+ import { ConfigProvider as ConfigProvider2, Input } from "antd";
1164
1124
  import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
1165
- var { TextArea } = Input2;
1125
+ var { TextArea } = Input;
1166
1126
  function TextAreaInput({
1167
1127
  label,
1168
1128
  height = 4,
@@ -1177,7 +1137,7 @@ function TextAreaInput({
1177
1137
  disabled
1178
1138
  }) {
1179
1139
  return /* @__PURE__ */ jsx19(Fragment4, { children: /* @__PURE__ */ jsx19(
1180
- ConfigProvider3,
1140
+ ConfigProvider2,
1181
1141
  {
1182
1142
  theme: {
1183
1143
  components: {},
@@ -1214,29 +1174,30 @@ function TextAreaInput({
1214
1174
  ) });
1215
1175
  }
1216
1176
 
1217
- // src/ColorPicker/ColorPicker.tsx
1218
- import { ConfigProvider as ConfigProvider4, ColorPicker } from "antd";
1177
+ // src/Input/InputField/InputField.tsx
1178
+ import { ConfigProvider as ConfigProvider3, Input as Input2 } from "antd";
1219
1179
  import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
1220
- function ColorPickerBasic({
1180
+ function InputField({
1221
1181
  value,
1222
1182
  onChange,
1223
- required,
1183
+ placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
1224
1184
  title,
1185
+ required,
1225
1186
  bottomText,
1226
- error,
1227
1187
  disabled,
1228
- allowClear,
1229
- defaultFormat,
1188
+ error,
1189
+ addonBefore,
1190
+ addonAfter,
1191
+ defaultValue,
1230
1192
  className,
1231
- placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
1193
+ onClear
1232
1194
  }) {
1233
1195
  return /* @__PURE__ */ jsx20(
1234
- ConfigProvider4,
1196
+ ConfigProvider3,
1235
1197
  {
1236
1198
  theme: {
1237
1199
  token: {
1238
- fontFamily: "Kanit",
1239
- fontSize: 16
1200
+ fontFamily: "Kanit"
1240
1201
  }
1241
1202
  },
1242
1203
  children: /* @__PURE__ */ jsxs16("div", { className: "container-input", children: [
@@ -1246,26 +1207,18 @@ function ColorPickerBasic({
1246
1207
  required && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "*" })
1247
1208
  ] }),
1248
1209
  /* @__PURE__ */ jsx20(
1249
- ColorPicker,
1210
+ Input2,
1250
1211
  {
1251
- defaultFormat,
1252
- className: `body-1 w-full ${className ?? ""}`,
1253
1212
  value,
1254
- defaultValue: "#ffff",
1255
- onChange,
1256
- allowClear,
1257
- showText: (color) => {
1258
- const hex = color.toHexString();
1259
- if (!value) {
1260
- return /* @__PURE__ */ jsx20("span", { children: placeholder });
1261
- }
1262
- return /* @__PURE__ */ jsxs16("span", { children: [
1263
- "(",
1264
- hex,
1265
- ")"
1266
- ] });
1267
- },
1268
- disabled
1213
+ placeholder,
1214
+ disabled,
1215
+ className: `body-1 w-full ${className ?? ""}`,
1216
+ onChange: (e) => onChange(e.target.value || void 0),
1217
+ allowClear: true,
1218
+ addonBefore,
1219
+ addonAfter,
1220
+ defaultValue,
1221
+ onClear
1269
1222
  }
1270
1223
  ),
1271
1224
  /* @__PURE__ */ jsxs16("div", { children: [
@@ -1278,12 +1231,75 @@ function ColorPickerBasic({
1278
1231
  );
1279
1232
  }
1280
1233
 
1234
+ // src/Input/InputFieldNumber/InputFieldNumber.tsx
1235
+ import { ConfigProvider as ConfigProvider4, InputNumber } from "antd";
1236
+ import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
1237
+ function InputFieldNumber({
1238
+ value,
1239
+ onChange,
1240
+ placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
1241
+ title,
1242
+ required,
1243
+ disabled,
1244
+ error,
1245
+ addonBefore,
1246
+ addonAfter,
1247
+ defaultValue,
1248
+ className,
1249
+ max,
1250
+ min,
1251
+ controls,
1252
+ size,
1253
+ changeOnWheel,
1254
+ formatter,
1255
+ parser
1256
+ }) {
1257
+ return /* @__PURE__ */ jsx21(
1258
+ ConfigProvider4,
1259
+ {
1260
+ theme: {
1261
+ token: {
1262
+ fontFamily: "Kanit"
1263
+ }
1264
+ },
1265
+ children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
1266
+ /* @__PURE__ */ jsxs17("div", { children: [
1267
+ /* @__PURE__ */ jsx21("span", { className: "body-1", children: title }),
1268
+ " ",
1269
+ required && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
1270
+ ] }),
1271
+ /* @__PURE__ */ jsx21(
1272
+ InputNumber,
1273
+ {
1274
+ value: value ?? void 0,
1275
+ onChange: (val) => onChange(val),
1276
+ placeholder,
1277
+ disabled,
1278
+ className: `body-1 w-full ${className ?? ""}`,
1279
+ addonBefore,
1280
+ addonAfter,
1281
+ defaultValue,
1282
+ max,
1283
+ min,
1284
+ controls,
1285
+ size,
1286
+ changeOnWheel,
1287
+ formatter,
1288
+ parser
1289
+ }
1290
+ ),
1291
+ error && /* @__PURE__ */ jsx21("p", { className: "text-red-500 caption-1", children: error })
1292
+ ] })
1293
+ }
1294
+ );
1295
+ }
1296
+
1281
1297
  // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
1282
1298
  var import_dayjs = __toESM(require_dayjs_min());
1283
1299
  var import_th2 = __toESM(require_th());
1284
1300
  import { ConfigProvider as ConfigProvider5, DatePicker } from "antd";
1285
1301
  import thTH from "antd/locale/th_TH";
1286
- import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
1302
+ import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
1287
1303
  function DatePickerBasic({
1288
1304
  value,
1289
1305
  onChange,
@@ -1302,7 +1318,7 @@ function DatePickerBasic({
1302
1318
  }) {
1303
1319
  const dateFormat = "DD/MM/YYYY";
1304
1320
  import_dayjs.default.locale("th_TH");
1305
- return /* @__PURE__ */ jsx21(
1321
+ return /* @__PURE__ */ jsx22(
1306
1322
  ConfigProvider5,
1307
1323
  {
1308
1324
  locale: thTH,
@@ -1312,13 +1328,13 @@ function DatePickerBasic({
1312
1328
  fontSize: 16
1313
1329
  }
1314
1330
  },
1315
- children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
1316
- /* @__PURE__ */ jsxs17("div", { children: [
1317
- /* @__PURE__ */ jsx21("span", { className: "body-1", children: title }),
1331
+ children: /* @__PURE__ */ jsxs18("div", { className: "container-input", children: [
1332
+ /* @__PURE__ */ jsxs18("div", { children: [
1333
+ /* @__PURE__ */ jsx22("span", { className: "body-1", children: title }),
1318
1334
  " ",
1319
- required && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
1335
+ required && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
1320
1336
  ] }),
1321
- /* @__PURE__ */ jsx21(
1337
+ /* @__PURE__ */ jsx22(
1322
1338
  DatePicker,
1323
1339
  {
1324
1340
  className: `body-1 w-full ${className ?? ""}`,
@@ -1335,10 +1351,10 @@ function DatePickerBasic({
1335
1351
  size
1336
1352
  }
1337
1353
  ),
1338
- /* @__PURE__ */ jsxs17("div", { children: [
1339
- /* @__PURE__ */ jsx21("p", { className: "caption-1 text-gray-500", children: bottomText }),
1354
+ /* @__PURE__ */ jsxs18("div", { children: [
1355
+ /* @__PURE__ */ jsx22("p", { className: "caption-1 text-gray-500", children: bottomText }),
1340
1356
  " ",
1341
- error && /* @__PURE__ */ jsx21("p", { className: "caption-1 text-red-500 ", children: error })
1357
+ error && /* @__PURE__ */ jsx22("p", { className: "caption-1 text-red-500 ", children: error })
1342
1358
  ] })
1343
1359
  ] })
1344
1360
  }
@@ -1351,7 +1367,7 @@ var import_customParseFormat = __toESM(require_customParseFormat());
1351
1367
  var import_dayjs2 = __toESM(require_dayjs_min());
1352
1368
  import { ConfigProvider as ConfigProvider6, DatePicker as DatePicker2 } from "antd";
1353
1369
  import thTH2 from "antd/locale/th_TH";
1354
- import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
1370
+ import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
1355
1371
  import_dayjs2.default.extend(import_customParseFormat.default);
1356
1372
  function DatePickerRangePicker({
1357
1373
  value,
@@ -1372,7 +1388,7 @@ function DatePickerRangePicker({
1372
1388
  }) {
1373
1389
  const dateFormat = "DD/MM/YYYY";
1374
1390
  import_dayjs2.default.locale("th_TH");
1375
- return /* @__PURE__ */ jsx22(
1391
+ return /* @__PURE__ */ jsx23(
1376
1392
  ConfigProvider6,
1377
1393
  {
1378
1394
  locale: thTH2,
@@ -1382,13 +1398,13 @@ function DatePickerRangePicker({
1382
1398
  fontSize: 16
1383
1399
  }
1384
1400
  },
1385
- children: /* @__PURE__ */ jsxs18("div", { className: "container-input", children: [
1386
- /* @__PURE__ */ jsxs18("div", { children: [
1387
- /* @__PURE__ */ jsx22("span", { className: "body-1", children: title }),
1401
+ children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
1402
+ /* @__PURE__ */ jsxs19("div", { children: [
1403
+ /* @__PURE__ */ jsx23("span", { className: "body-1", children: title }),
1388
1404
  " ",
1389
- required && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
1405
+ required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
1390
1406
  ] }),
1391
- /* @__PURE__ */ jsx22(
1407
+ /* @__PURE__ */ jsx23(
1392
1408
  DatePicker2.RangePicker,
1393
1409
  {
1394
1410
  format: dateFormat,
@@ -1406,10 +1422,10 @@ function DatePickerRangePicker({
1406
1422
  onCalendarChange
1407
1423
  }
1408
1424
  ),
1409
- /* @__PURE__ */ jsxs18("div", { children: [
1410
- /* @__PURE__ */ jsx22("p", { className: "caption-1 text-gray-500", children: bottomText }),
1425
+ /* @__PURE__ */ jsxs19("div", { children: [
1426
+ /* @__PURE__ */ jsx23("p", { className: "caption-1 text-gray-500", children: bottomText }),
1411
1427
  " ",
1412
- error && /* @__PURE__ */ jsx22("p", { className: "caption-1 text-red-500 ", children: error })
1428
+ error && /* @__PURE__ */ jsx23("p", { className: "caption-1 text-red-500 ", children: error })
1413
1429
  ] })
1414
1430
  ] })
1415
1431
  }
@@ -1418,7 +1434,7 @@ function DatePickerRangePicker({
1418
1434
 
1419
1435
  // src/TimePicker/TimePickerBasic/TimePickerBasic.tsx
1420
1436
  import { ConfigProvider as ConfigProvider7, TimePicker } from "antd";
1421
- import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
1437
+ import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
1422
1438
  function TimePickerBasic({
1423
1439
  value,
1424
1440
  onChange,
@@ -1430,7 +1446,7 @@ function TimePickerBasic({
1430
1446
  disabled,
1431
1447
  className
1432
1448
  }) {
1433
- return /* @__PURE__ */ jsx23(
1449
+ return /* @__PURE__ */ jsx24(
1434
1450
  ConfigProvider7,
1435
1451
  {
1436
1452
  theme: {
@@ -1438,13 +1454,13 @@ function TimePickerBasic({
1438
1454
  fontFamily: "Kanit"
1439
1455
  }
1440
1456
  },
1441
- children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
1442
- /* @__PURE__ */ jsxs19("div", { children: [
1443
- /* @__PURE__ */ jsx23("span", { className: "body-1", children: title }),
1457
+ children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
1458
+ /* @__PURE__ */ jsxs20("div", { children: [
1459
+ /* @__PURE__ */ jsx24("span", { className: "body-1", children: title }),
1444
1460
  " ",
1445
- required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
1461
+ required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
1446
1462
  ] }),
1447
- /* @__PURE__ */ jsx23(
1463
+ /* @__PURE__ */ jsx24(
1448
1464
  TimePicker,
1449
1465
  {
1450
1466
  format: "HH:mm",
@@ -1456,10 +1472,10 @@ function TimePickerBasic({
1456
1472
  disabled
1457
1473
  }
1458
1474
  ),
1459
- /* @__PURE__ */ jsxs19("div", { children: [
1460
- /* @__PURE__ */ jsx23("p", { className: "caption-1 text-gray-500", children: bottomText }),
1475
+ /* @__PURE__ */ jsxs20("div", { children: [
1476
+ /* @__PURE__ */ jsx24("p", { className: "caption-1 text-gray-500", children: bottomText }),
1461
1477
  " ",
1462
- error && /* @__PURE__ */ jsx23("p", { className: "caption-1 text-red-500 ", children: error })
1478
+ error && /* @__PURE__ */ jsx24("p", { className: "caption-1 text-red-500 ", children: error })
1463
1479
  ] })
1464
1480
  ] })
1465
1481
  }
@@ -1468,7 +1484,7 @@ function TimePickerBasic({
1468
1484
 
1469
1485
  // src/TimePicker/TimePickerRangePicker/TimerPickerRangePicker.tsx
1470
1486
  import { ConfigProvider as ConfigProvider8, TimePicker as TimePicker2 } from "antd";
1471
- import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
1487
+ import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
1472
1488
  function TimePickerRangePicker({
1473
1489
  value,
1474
1490
  onChange,
@@ -1480,7 +1496,7 @@ function TimePickerRangePicker({
1480
1496
  disabled,
1481
1497
  className
1482
1498
  }) {
1483
- return /* @__PURE__ */ jsx24(
1499
+ return /* @__PURE__ */ jsx25(
1484
1500
  ConfigProvider8,
1485
1501
  {
1486
1502
  theme: {
@@ -1488,13 +1504,13 @@ function TimePickerRangePicker({
1488
1504
  fontFamily: "Kanit"
1489
1505
  }
1490
1506
  },
1491
- children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
1492
- /* @__PURE__ */ jsxs20("div", { children: [
1493
- /* @__PURE__ */ jsx24("span", { className: "body-1", children: title }),
1507
+ children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
1508
+ /* @__PURE__ */ jsxs21("div", { children: [
1509
+ /* @__PURE__ */ jsx25("span", { className: "body-1", children: title }),
1494
1510
  " ",
1495
- required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
1511
+ required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
1496
1512
  ] }),
1497
- /* @__PURE__ */ jsx24(
1513
+ /* @__PURE__ */ jsx25(
1498
1514
  TimePicker2.RangePicker,
1499
1515
  {
1500
1516
  format: "HH:mm",
@@ -1506,18 +1522,82 @@ function TimePickerRangePicker({
1506
1522
  disabled
1507
1523
  }
1508
1524
  ),
1509
- /* @__PURE__ */ jsxs20("div", { children: [
1510
- /* @__PURE__ */ jsx24("p", { className: "caption-1 text-gray-500", children: bottomText }),
1525
+ /* @__PURE__ */ jsxs21("div", { children: [
1526
+ /* @__PURE__ */ jsx25("p", { className: "caption-1 text-gray-500", children: bottomText }),
1511
1527
  " ",
1512
- error && /* @__PURE__ */ jsx24("p", { className: "caption-1 text-red-500 ", children: error })
1528
+ error && /* @__PURE__ */ jsx25("p", { className: "caption-1 text-red-500 ", children: error })
1529
+ ] })
1530
+ ] })
1531
+ }
1532
+ );
1533
+ }
1534
+
1535
+ // src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
1536
+ import { ConfigProvider as ConfigProvider9, ColorPicker } from "antd";
1537
+ import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
1538
+ function ColorPickerBasic({
1539
+ value,
1540
+ onChange,
1541
+ required,
1542
+ title,
1543
+ bottomText,
1544
+ error,
1545
+ disabled,
1546
+ allowClear,
1547
+ defaultFormat,
1548
+ className,
1549
+ placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
1550
+ }) {
1551
+ return /* @__PURE__ */ jsx26(
1552
+ ConfigProvider9,
1553
+ {
1554
+ theme: {
1555
+ token: {
1556
+ fontFamily: "Kanit",
1557
+ fontSize: 16
1558
+ }
1559
+ },
1560
+ children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
1561
+ /* @__PURE__ */ jsxs22("div", { children: [
1562
+ /* @__PURE__ */ jsx26("span", { className: "body-1", children: title }),
1563
+ " ",
1564
+ required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
1565
+ ] }),
1566
+ /* @__PURE__ */ jsx26(
1567
+ ColorPicker,
1568
+ {
1569
+ defaultFormat,
1570
+ className: `body-1 w-full ${className ?? ""}`,
1571
+ value,
1572
+ defaultValue: "#ffff",
1573
+ onChange,
1574
+ allowClear,
1575
+ showText: (color) => {
1576
+ const hex = color.toHexString();
1577
+ if (!value) {
1578
+ return /* @__PURE__ */ jsx26("span", { children: placeholder });
1579
+ }
1580
+ return /* @__PURE__ */ jsxs22("span", { children: [
1581
+ "(",
1582
+ hex,
1583
+ ")"
1584
+ ] });
1585
+ },
1586
+ disabled
1587
+ }
1588
+ ),
1589
+ /* @__PURE__ */ jsxs22("div", { children: [
1590
+ /* @__PURE__ */ jsx26("p", { className: "caption-1 text-gray-500", children: bottomText }),
1591
+ " ",
1592
+ error && /* @__PURE__ */ jsx26("p", { className: "caption-1 text-red-500 ", children: error })
1513
1593
  ] })
1514
1594
  ] })
1515
1595
  }
1516
1596
  );
1517
1597
  }
1518
1598
 
1519
- // src/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
1520
- import { ConfigProvider as ConfigProvider9, ColorPicker as ColorPicker2, theme } from "antd";
1599
+ // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
1600
+ import { ConfigProvider as ConfigProvider10, ColorPicker as ColorPicker2, theme } from "antd";
1521
1601
 
1522
1602
  // node_modules/@babel/runtime/helpers/esm/typeof.js
1523
1603
  function _typeof(o) {
@@ -2218,8 +2298,8 @@ magentaDark.primary = magentaDark[5];
2218
2298
  var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a", "#6a6a6a", "#7b7b7b", "#888888", "#969696"];
2219
2299
  greyDark.primary = greyDark[5];
2220
2300
 
2221
- // src/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
2222
- import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
2301
+ // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
2302
+ import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
2223
2303
  function genPresets(presets = presetPalettes) {
2224
2304
  return Object.entries(presets).map(([label, colors]) => ({
2225
2305
  label,
@@ -2247,8 +2327,8 @@ function ColorPalettePickerBasic({
2247
2327
  red,
2248
2328
  green
2249
2329
  });
2250
- return /* @__PURE__ */ jsx25(
2251
- ConfigProvider9,
2330
+ return /* @__PURE__ */ jsx27(
2331
+ ConfigProvider10,
2252
2332
  {
2253
2333
  theme: {
2254
2334
  token: {
@@ -2256,13 +2336,13 @@ function ColorPalettePickerBasic({
2256
2336
  fontSize: 16
2257
2337
  }
2258
2338
  },
2259
- children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
2260
- /* @__PURE__ */ jsxs21("div", { children: [
2261
- /* @__PURE__ */ jsx25("span", { className: "body-1", children: title }),
2339
+ children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
2340
+ /* @__PURE__ */ jsxs23("div", { children: [
2341
+ /* @__PURE__ */ jsx27("span", { className: "body-1", children: title }),
2262
2342
  " ",
2263
- required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
2343
+ required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
2264
2344
  ] }),
2265
- /* @__PURE__ */ jsx25(
2345
+ /* @__PURE__ */ jsx27(
2266
2346
  ColorPicker2,
2267
2347
  {
2268
2348
  defaultFormat,
@@ -2275,9 +2355,9 @@ function ColorPalettePickerBasic({
2275
2355
  showText: (color) => {
2276
2356
  const hex = color.toHexString();
2277
2357
  if (!value) {
2278
- return /* @__PURE__ */ jsx25("span", { children: placeholder });
2358
+ return /* @__PURE__ */ jsx27("span", { children: placeholder });
2279
2359
  }
2280
- return /* @__PURE__ */ jsxs21("span", { children: [
2360
+ return /* @__PURE__ */ jsxs23("span", { children: [
2281
2361
  "(",
2282
2362
  hex,
2283
2363
  ")"
@@ -2287,10 +2367,10 @@ function ColorPalettePickerBasic({
2287
2367
  onClear
2288
2368
  }
2289
2369
  ),
2290
- /* @__PURE__ */ jsxs21("div", { children: [
2291
- /* @__PURE__ */ jsx25("p", { className: "caption-1 text-gray-500", children: bottomText }),
2370
+ /* @__PURE__ */ jsxs23("div", { children: [
2371
+ /* @__PURE__ */ jsx27("p", { className: "caption-1 text-gray-500", children: bottomText }),
2292
2372
  " ",
2293
- error && /* @__PURE__ */ jsx25("p", { className: "caption-1 text-red-500 ", children: error })
2373
+ error && /* @__PURE__ */ jsx27("p", { className: "caption-1 text-red-500 ", children: error })
2294
2374
  ] })
2295
2375
  ] })
2296
2376
  }
@@ -2298,8 +2378,8 @@ function ColorPalettePickerBasic({
2298
2378
  }
2299
2379
 
2300
2380
  // src/Select/SelectField/SelectField.tsx
2301
- import { Select, ConfigProvider as ConfigProvider10 } from "antd";
2302
- import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
2381
+ import { Select, ConfigProvider as ConfigProvider11 } from "antd";
2382
+ import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
2303
2383
  function SelectField({
2304
2384
  value,
2305
2385
  onChange,
@@ -2318,8 +2398,8 @@ function SelectField({
2318
2398
  className,
2319
2399
  onClear
2320
2400
  }) {
2321
- return /* @__PURE__ */ jsx26(
2322
- ConfigProvider10,
2401
+ return /* @__PURE__ */ jsx28(
2402
+ ConfigProvider11,
2323
2403
  {
2324
2404
  theme: {
2325
2405
  token: {
@@ -2327,13 +2407,13 @@ function SelectField({
2327
2407
  fontSize: 16
2328
2408
  }
2329
2409
  },
2330
- children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
2331
- /* @__PURE__ */ jsxs22("div", { children: [
2332
- /* @__PURE__ */ jsx26("span", { className: "body-1", children: title }),
2410
+ children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
2411
+ /* @__PURE__ */ jsxs24("div", { children: [
2412
+ /* @__PURE__ */ jsx28("span", { className: "body-1", children: title }),
2333
2413
  " ",
2334
- required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
2414
+ required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
2335
2415
  ] }),
2336
- /* @__PURE__ */ jsx26(
2416
+ /* @__PURE__ */ jsx28(
2337
2417
  Select,
2338
2418
  {
2339
2419
  showSearch: true,
@@ -2348,7 +2428,7 @@ function SelectField({
2348
2428
  options,
2349
2429
  mode,
2350
2430
  onSearch: handleSearch,
2351
- prefix: prefix ? /* @__PURE__ */ jsx26(
2431
+ prefix: prefix ? /* @__PURE__ */ jsx28(
2352
2432
  "span",
2353
2433
  {
2354
2434
  style: {
@@ -2365,10 +2445,10 @@ function SelectField({
2365
2445
  onClear
2366
2446
  }
2367
2447
  ),
2368
- /* @__PURE__ */ jsxs22("div", { children: [
2369
- /* @__PURE__ */ jsx26("p", { className: "caption-1 text-gray-500", children: bottomText }),
2448
+ /* @__PURE__ */ jsxs24("div", { children: [
2449
+ /* @__PURE__ */ jsx28("p", { className: "caption-1 text-gray-500", children: bottomText }),
2370
2450
  " ",
2371
- error && /* @__PURE__ */ jsx26("p", { className: "caption-1 text-red-500 ", children: error })
2451
+ error && /* @__PURE__ */ jsx28("p", { className: "caption-1 text-red-500 ", children: error })
2372
2452
  ] })
2373
2453
  ] })
2374
2454
  }
@@ -2376,8 +2456,8 @@ function SelectField({
2376
2456
  }
2377
2457
 
2378
2458
  // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
2379
- import { Select as Select2, ConfigProvider as ConfigProvider11 } from "antd";
2380
- import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
2459
+ import { Select as Select2, ConfigProvider as ConfigProvider12 } from "antd";
2460
+ import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
2381
2461
  function SelectFieldGroup({
2382
2462
  value,
2383
2463
  onChange,
@@ -2395,21 +2475,21 @@ function SelectFieldGroup({
2395
2475
  handleSearch,
2396
2476
  className
2397
2477
  }) {
2398
- return /* @__PURE__ */ jsx27(
2399
- ConfigProvider11,
2478
+ return /* @__PURE__ */ jsx29(
2479
+ ConfigProvider12,
2400
2480
  {
2401
2481
  theme: {
2402
2482
  token: {
2403
2483
  fontFamily: "Kanit"
2404
2484
  }
2405
2485
  },
2406
- children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
2407
- /* @__PURE__ */ jsxs23("div", { children: [
2408
- /* @__PURE__ */ jsx27("span", { className: "body-1", children: title }),
2486
+ children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
2487
+ /* @__PURE__ */ jsxs25("div", { children: [
2488
+ /* @__PURE__ */ jsx29("span", { className: "body-1", children: title }),
2409
2489
  " ",
2410
- required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
2490
+ required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
2411
2491
  ] }),
2412
- /* @__PURE__ */ jsx27(
2492
+ /* @__PURE__ */ jsx29(
2413
2493
  Select2,
2414
2494
  {
2415
2495
  showSearch: true,
@@ -2424,7 +2504,7 @@ function SelectFieldGroup({
2424
2504
  options,
2425
2505
  mode,
2426
2506
  onSearch: handleSearch,
2427
- prefix: prefix ? /* @__PURE__ */ jsx27(
2507
+ prefix: prefix ? /* @__PURE__ */ jsx29(
2428
2508
  "span",
2429
2509
  {
2430
2510
  style: {
@@ -2440,10 +2520,10 @@ function SelectFieldGroup({
2440
2520
  allowClear: true
2441
2521
  }
2442
2522
  ),
2443
- /* @__PURE__ */ jsxs23("div", { children: [
2444
- /* @__PURE__ */ jsx27("p", { className: "caption-1 text-gray-500", children: bottomText }),
2523
+ /* @__PURE__ */ jsxs25("div", { children: [
2524
+ /* @__PURE__ */ jsx29("p", { className: "caption-1 text-gray-500", children: bottomText }),
2445
2525
  " ",
2446
- error && /* @__PURE__ */ jsx27("p", { className: "caption-1 text-red-500 ", children: error })
2526
+ error && /* @__PURE__ */ jsx29("p", { className: "caption-1 text-red-500 ", children: error })
2447
2527
  ] })
2448
2528
  ] })
2449
2529
  }
@@ -2451,7 +2531,7 @@ function SelectFieldGroup({
2451
2531
  }
2452
2532
 
2453
2533
  // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
2454
- import { Select as Select3, ConfigProvider as ConfigProvider12 } from "antd";
2534
+ import { Select as Select3, ConfigProvider as ConfigProvider13 } from "antd";
2455
2535
 
2456
2536
  // src/Select/SelectFieldStatus/StatusMockup.ts
2457
2537
  var status = [
@@ -2464,7 +2544,7 @@ var status = [
2464
2544
 
2465
2545
  // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
2466
2546
  import { DownOutlined } from "@ant-design/icons";
2467
- import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
2547
+ import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
2468
2548
  function SelectFieldStatus({
2469
2549
  value,
2470
2550
  onChange,
@@ -2478,8 +2558,8 @@ function SelectFieldStatus({
2478
2558
  className
2479
2559
  }) {
2480
2560
  const selectedItem = status.find((s) => s.value === value);
2481
- return /* @__PURE__ */ jsx28(
2482
- ConfigProvider12,
2561
+ return /* @__PURE__ */ jsx30(
2562
+ ConfigProvider13,
2483
2563
  {
2484
2564
  theme: {
2485
2565
  components: {
@@ -2494,17 +2574,17 @@ function SelectFieldStatus({
2494
2574
  fontFamily: "Kanit"
2495
2575
  }
2496
2576
  },
2497
- children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
2498
- /* @__PURE__ */ jsxs24("div", { children: [
2499
- /* @__PURE__ */ jsx28("span", { className: "body-1", children: title }),
2577
+ children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
2578
+ /* @__PURE__ */ jsxs26("div", { children: [
2579
+ /* @__PURE__ */ jsx30("span", { className: "body-1", children: title }),
2500
2580
  " ",
2501
- required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
2581
+ required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
2502
2582
  ] }),
2503
- /* @__PURE__ */ jsx28(
2583
+ /* @__PURE__ */ jsx30(
2504
2584
  Select3,
2505
2585
  {
2506
2586
  disabled,
2507
- suffixIcon: /* @__PURE__ */ jsx28(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
2587
+ suffixIcon: /* @__PURE__ */ jsx30(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
2508
2588
  value,
2509
2589
  onChange,
2510
2590
  className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2515,10 +2595,10 @@ function SelectFieldStatus({
2515
2595
  showSearch: true
2516
2596
  }
2517
2597
  ),
2518
- /* @__PURE__ */ jsxs24("div", { children: [
2519
- /* @__PURE__ */ jsx28("p", { className: "caption-1 text-gray-500", children: bottomText }),
2598
+ /* @__PURE__ */ jsxs26("div", { children: [
2599
+ /* @__PURE__ */ jsx30("p", { className: "caption-1 text-gray-500", children: bottomText }),
2520
2600
  " ",
2521
- error && /* @__PURE__ */ jsx28("p", { className: "caption-1 text-red-500 ", children: error })
2601
+ error && /* @__PURE__ */ jsx30("p", { className: "caption-1 text-red-500 ", children: error })
2522
2602
  ] })
2523
2603
  ] })
2524
2604
  }
@@ -2526,7 +2606,7 @@ function SelectFieldStatus({
2526
2606
  }
2527
2607
 
2528
2608
  // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
2529
- import { Select as Select4, ConfigProvider as ConfigProvider13 } from "antd";
2609
+ import { Select as Select4, ConfigProvider as ConfigProvider14 } from "antd";
2530
2610
 
2531
2611
  // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
2532
2612
  var status2 = [
@@ -2536,7 +2616,7 @@ var status2 = [
2536
2616
 
2537
2617
  // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
2538
2618
  import { DownOutlined as DownOutlined2 } from "@ant-design/icons";
2539
- import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
2619
+ import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
2540
2620
  function SelectFieldStatusReport({
2541
2621
  value,
2542
2622
  onChange,
@@ -2550,8 +2630,8 @@ function SelectFieldStatusReport({
2550
2630
  options
2551
2631
  }) {
2552
2632
  const selectedItem = status2.find((s) => s.value === value);
2553
- return /* @__PURE__ */ jsx29(
2554
- ConfigProvider13,
2633
+ return /* @__PURE__ */ jsx31(
2634
+ ConfigProvider14,
2555
2635
  {
2556
2636
  theme: {
2557
2637
  components: {
@@ -2566,17 +2646,17 @@ function SelectFieldStatusReport({
2566
2646
  fontFamily: "Kanit"
2567
2647
  }
2568
2648
  },
2569
- children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
2570
- /* @__PURE__ */ jsxs25("div", { children: [
2571
- /* @__PURE__ */ jsx29("span", { className: "body-1", children: title }),
2649
+ children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
2650
+ /* @__PURE__ */ jsxs27("div", { children: [
2651
+ /* @__PURE__ */ jsx31("span", { className: "body-1", children: title }),
2572
2652
  " ",
2573
- required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
2653
+ required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
2574
2654
  ] }),
2575
- /* @__PURE__ */ jsx29(
2655
+ /* @__PURE__ */ jsx31(
2576
2656
  Select4,
2577
2657
  {
2578
2658
  disabled,
2579
- suffixIcon: /* @__PURE__ */ jsx29(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
2659
+ suffixIcon: /* @__PURE__ */ jsx31(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
2580
2660
  value,
2581
2661
  onChange,
2582
2662
  className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2587,10 +2667,10 @@ function SelectFieldStatusReport({
2587
2667
  showSearch: true
2588
2668
  }
2589
2669
  ),
2590
- /* @__PURE__ */ jsxs25("div", { children: [
2591
- /* @__PURE__ */ jsx29("p", { className: "caption-1 text-gray-500", children: bottomText }),
2670
+ /* @__PURE__ */ jsxs27("div", { children: [
2671
+ /* @__PURE__ */ jsx31("p", { className: "caption-1 text-gray-500", children: bottomText }),
2592
2672
  " ",
2593
- error && /* @__PURE__ */ jsx29("p", { className: "caption-1 text-red-500 ", children: error })
2673
+ error && /* @__PURE__ */ jsx31("p", { className: "caption-1 text-red-500 ", children: error })
2594
2674
  ] })
2595
2675
  ] })
2596
2676
  }
@@ -2598,9 +2678,9 @@ function SelectFieldStatusReport({
2598
2678
  }
2599
2679
 
2600
2680
  // src/Select/SelectFieldTag/SelectFieldTag.tsx
2601
- import { Select as Select5, ConfigProvider as ConfigProvider14 } from "antd";
2681
+ import { Select as Select5, ConfigProvider as ConfigProvider15 } from "antd";
2602
2682
  import { useState as useState6 } from "react";
2603
- import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
2683
+ import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
2604
2684
  function SelectFieldTag({
2605
2685
  title,
2606
2686
  required,
@@ -2634,21 +2714,21 @@ function SelectFieldTag({
2634
2714
  }
2635
2715
  onChange?.([]);
2636
2716
  };
2637
- return /* @__PURE__ */ jsx30(
2638
- ConfigProvider14,
2717
+ return /* @__PURE__ */ jsx32(
2718
+ ConfigProvider15,
2639
2719
  {
2640
2720
  theme: {
2641
2721
  token: {
2642
2722
  fontFamily: "Kanit"
2643
2723
  }
2644
2724
  },
2645
- children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
2646
- /* @__PURE__ */ jsxs26("div", { children: [
2647
- /* @__PURE__ */ jsx30("span", { className: "body-1", children: title }),
2725
+ children: /* @__PURE__ */ jsxs28("div", { className: "container-input", children: [
2726
+ /* @__PURE__ */ jsxs28("div", { children: [
2727
+ /* @__PURE__ */ jsx32("span", { className: "body-1", children: title }),
2648
2728
  " ",
2649
- required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
2729
+ required && /* @__PURE__ */ jsx32("span", { className: "text-red-500", children: "*" })
2650
2730
  ] }),
2651
- /* @__PURE__ */ jsx30(
2731
+ /* @__PURE__ */ jsx32(
2652
2732
  Select5,
2653
2733
  {
2654
2734
  mode: "tags",
@@ -2667,10 +2747,10 @@ function SelectFieldTag({
2667
2747
  onClear
2668
2748
  }
2669
2749
  ),
2670
- /* @__PURE__ */ jsxs26("div", { children: [
2671
- /* @__PURE__ */ jsx30("p", { className: "caption-1 text-gray-500", children: bottomText }),
2750
+ /* @__PURE__ */ jsxs28("div", { children: [
2751
+ /* @__PURE__ */ jsx32("p", { className: "caption-1 text-gray-500", children: bottomText }),
2672
2752
  " ",
2673
- error && /* @__PURE__ */ jsx30("p", { className: "caption-1 text-red-500 ", children: error })
2753
+ error && /* @__PURE__ */ jsx32("p", { className: "caption-1 text-red-500 ", children: error })
2674
2754
  ] })
2675
2755
  ] })
2676
2756
  }
@@ -2679,9 +2759,9 @@ function SelectFieldTag({
2679
2759
 
2680
2760
  // src/Select/SelectCustom/SelectCustom.tsx
2681
2761
  import { IconTrash } from "@tabler/icons-react";
2682
- import { Select as Select6, ConfigProvider as ConfigProvider15 } from "antd";
2762
+ import { Select as Select6, ConfigProvider as ConfigProvider16 } from "antd";
2683
2763
  import { useState as useState7 } from "react";
2684
- import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
2764
+ import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
2685
2765
  function SelectCustom({
2686
2766
  title = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
2687
2767
  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01",
@@ -2711,8 +2791,8 @@ function SelectCustom({
2711
2791
  });
2712
2792
  };
2713
2793
  const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
2714
- return /* @__PURE__ */ jsx31(
2715
- ConfigProvider15,
2794
+ return /* @__PURE__ */ jsx33(
2795
+ ConfigProvider16,
2716
2796
  {
2717
2797
  theme: {
2718
2798
  token: {
@@ -2720,13 +2800,13 @@ function SelectCustom({
2720
2800
  fontSize: 16
2721
2801
  }
2722
2802
  },
2723
- children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
2724
- /* @__PURE__ */ jsxs27("div", { children: [
2725
- /* @__PURE__ */ jsx31("span", { className: "body-1", children: title }),
2803
+ children: /* @__PURE__ */ jsxs29("div", { className: "container-input", children: [
2804
+ /* @__PURE__ */ jsxs29("div", { children: [
2805
+ /* @__PURE__ */ jsx33("span", { className: "body-1", children: title }),
2726
2806
  " ",
2727
- required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
2807
+ required && /* @__PURE__ */ jsx33("span", { className: "text-red-500", children: "*" })
2728
2808
  ] }),
2729
- /* @__PURE__ */ jsx31(
2809
+ /* @__PURE__ */ jsx33(
2730
2810
  Select6,
2731
2811
  {
2732
2812
  value,
@@ -2737,20 +2817,20 @@ function SelectCustom({
2737
2817
  onClear
2738
2818
  }
2739
2819
  ),
2740
- /* @__PURE__ */ jsxs27("div", { children: [
2741
- /* @__PURE__ */ jsx31("p", { className: "caption-1 text-gray-500", children: bottomText }),
2820
+ /* @__PURE__ */ jsxs29("div", { children: [
2821
+ /* @__PURE__ */ jsx33("p", { className: "caption-1 text-gray-500", children: bottomText }),
2742
2822
  " ",
2743
- error && /* @__PURE__ */ jsx31("p", { className: "caption-1 text-red-500 ", children: error })
2823
+ error && /* @__PURE__ */ jsx33("p", { className: "caption-1 text-red-500 ", children: error })
2744
2824
  ] }),
2745
- /* @__PURE__ */ jsx31("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
2746
- /* @__PURE__ */ jsxs27("div", { className: "flex flex-row gap-[8px]", children: [
2747
- /* @__PURE__ */ jsxs27("p", { children: [
2825
+ /* @__PURE__ */ jsx33("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs29("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
2826
+ /* @__PURE__ */ jsxs29("div", { className: "flex flex-row gap-[8px]", children: [
2827
+ /* @__PURE__ */ jsxs29("p", { children: [
2748
2828
  index + 1,
2749
2829
  "."
2750
2830
  ] }),
2751
- /* @__PURE__ */ jsx31("p", { children: v })
2831
+ /* @__PURE__ */ jsx33("p", { children: v })
2752
2832
  ] }),
2753
- /* @__PURE__ */ jsx31(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
2833
+ /* @__PURE__ */ jsx33(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
2754
2834
  ] }, index)) })
2755
2835
  ] })
2756
2836
  }
@@ -2758,7 +2838,7 @@ function SelectCustom({
2758
2838
  }
2759
2839
 
2760
2840
  // src/SortFilter/SortFilter.tsx
2761
- import { ConfigProvider as ConfigProvider16 } from "antd";
2841
+ import { ConfigProvider as ConfigProvider17 } from "antd";
2762
2842
  import { CalendarOutlined } from "@ant-design/icons";
2763
2843
 
2764
2844
  // src/SortFilter/DataMockSortFilter.ts
@@ -2791,7 +2871,7 @@ var quarters = [
2791
2871
  // src/SortFilter/SortFilter.tsx
2792
2872
  import { useState as useState8 } from "react";
2793
2873
  import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
2794
- import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
2874
+ import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
2795
2875
  function SortFilter({
2796
2876
  showYear = true,
2797
2877
  showQuarter = true,
@@ -2802,20 +2882,20 @@ function SortFilter({
2802
2882
  const [yearValue, setYearValue] = useState8();
2803
2883
  const [monthValue, setMonthValue] = useState8();
2804
2884
  const [quarterValue, setQuartersValue] = useState8();
2805
- return /* @__PURE__ */ jsx32(
2806
- ConfigProvider16,
2885
+ return /* @__PURE__ */ jsx34(
2886
+ ConfigProvider17,
2807
2887
  {
2808
2888
  theme: {
2809
2889
  token: {
2810
2890
  fontFamily: "Kanit"
2811
2891
  }
2812
2892
  },
2813
- children: /* @__PURE__ */ jsxs28("div", { className: "w-full flex items-center justify-between", children: [
2814
- /* @__PURE__ */ jsxs28("div", { className: "w-full flex gap-[10px]", children: [
2815
- showYear && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
2893
+ children: /* @__PURE__ */ jsxs30("div", { className: "w-full flex items-center justify-between", children: [
2894
+ /* @__PURE__ */ jsxs30("div", { className: "w-full flex gap-[10px]", children: [
2895
+ showYear && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
2816
2896
  SelectField,
2817
2897
  {
2818
- prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
2898
+ prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
2819
2899
  onChange: setYearValue,
2820
2900
  options: years.map((s) => ({
2821
2901
  value: s.value,
@@ -2825,10 +2905,10 @@ function SortFilter({
2825
2905
  value: yearValue
2826
2906
  }
2827
2907
  ) }),
2828
- showMonth && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
2908
+ showMonth && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
2829
2909
  SelectField,
2830
2910
  {
2831
- prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
2911
+ prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
2832
2912
  onChange: setMonthValue,
2833
2913
  options: months.map((s) => ({
2834
2914
  value: s.value,
@@ -2838,10 +2918,10 @@ function SortFilter({
2838
2918
  placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
2839
2919
  }
2840
2920
  ) }),
2841
- showQuarter && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
2921
+ showQuarter && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
2842
2922
  SelectField,
2843
2923
  {
2844
- prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
2924
+ prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
2845
2925
  onChange: setQuartersValue,
2846
2926
  options: quarters.map((s) => ({
2847
2927
  value: s.value,
@@ -2852,8 +2932,8 @@ function SortFilter({
2852
2932
  }
2853
2933
  ) })
2854
2934
  ] }),
2855
- /* @__PURE__ */ jsxs28("div", { className: "flex gap-[10px]", children: [
2856
- /* @__PURE__ */ jsx32(
2935
+ /* @__PURE__ */ jsxs30("div", { className: "flex gap-[10px]", children: [
2936
+ /* @__PURE__ */ jsx34(
2857
2937
  IconSortDescending2,
2858
2938
  {
2859
2939
  size: 24,
@@ -2861,7 +2941,7 @@ function SortFilter({
2861
2941
  onClick: onSortClick
2862
2942
  }
2863
2943
  ),
2864
- /* @__PURE__ */ jsx32(
2944
+ /* @__PURE__ */ jsx34(
2865
2945
  IconFilter,
2866
2946
  {
2867
2947
  size: 24,
@@ -2878,7 +2958,7 @@ function SortFilter({
2878
2958
  // src/Upload/FileUploader/FileUploader.tsx
2879
2959
  import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
2880
2960
  import { useRef as useRef2, useState as useState9 } from "react";
2881
- import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
2961
+ import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
2882
2962
  function FileUploader({
2883
2963
  onUpload,
2884
2964
  onError,
@@ -2949,10 +3029,10 @@ function FileUploader({
2949
3029
  }
2950
3030
  if (inputRef.current) inputRef.current.value = "";
2951
3031
  };
2952
- return /* @__PURE__ */ jsxs29("div", { className: "w-full", children: [
2953
- label && /* @__PURE__ */ jsx33("p", { className: "body-1", children: label }),
2954
- /* @__PURE__ */ jsxs29("div", { children: [
2955
- mode === "upload" ? /* @__PURE__ */ jsx33(
3032
+ return /* @__PURE__ */ jsxs31("div", { className: "w-full", children: [
3033
+ label && /* @__PURE__ */ jsx35("p", { className: "body-1", children: label }),
3034
+ /* @__PURE__ */ jsxs31("div", { children: [
3035
+ mode === "upload" ? /* @__PURE__ */ jsx35(
2956
3036
  "button",
2957
3037
  {
2958
3038
  type: "button",
@@ -2960,15 +3040,15 @@ function FileUploader({
2960
3040
  className: `h-[34px] flex justify-center items-center gap-2 w-full rounded-[2px] border border-gray-200 body-1
2961
3041
  ${disabled ? "cursor-not-allowed text-gray-400 bg-gray-100" : "cursor-pointer hover:text-primary-400 hover:border-primary-200 duration-300"}`,
2962
3042
  disabled: disabled ? disabled : uploading,
2963
- children: uploading ? /* @__PURE__ */ jsxs29(Fragment5, { children: [
2964
- /* @__PURE__ */ jsx33(Loader, { size: 15 }),
3043
+ children: uploading ? /* @__PURE__ */ jsxs31(Fragment5, { children: [
3044
+ /* @__PURE__ */ jsx35(Loader, { size: 15 }),
2965
3045
  " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
2966
- ] }) : /* @__PURE__ */ jsxs29(Fragment5, { children: [
2967
- /* @__PURE__ */ jsx33(IconUpload, { size: 15, className: "text-gray-400" }),
3046
+ ] }) : /* @__PURE__ */ jsxs31(Fragment5, { children: [
3047
+ /* @__PURE__ */ jsx35(IconUpload, { size: 15, className: "text-gray-400" }),
2968
3048
  " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
2969
3049
  ] })
2970
3050
  }
2971
- ) : /* @__PURE__ */ jsx33(
3051
+ ) : /* @__PURE__ */ jsx35(
2972
3052
  "div",
2973
3053
  {
2974
3054
  className: `min-w-[400px] min-h-[120px] flex justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
@@ -2982,17 +3062,17 @@ function FileUploader({
2982
3062
  },
2983
3063
  onDragLeave: () => setDragActive(false),
2984
3064
  onDrop: handleDrop,
2985
- children: uploading ? /* @__PURE__ */ jsxs29("div", { className: "flex justify-center items-center gap-2", children: [
2986
- /* @__PURE__ */ jsx33(Loader, { size: 15 }),
3065
+ children: uploading ? /* @__PURE__ */ jsxs31("div", { className: "flex justify-center items-center gap-2", children: [
3066
+ /* @__PURE__ */ jsx35(Loader, { size: 15 }),
2987
3067
  " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
2988
- ] }) : /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2", children: [
2989
- /* @__PURE__ */ jsx33(IconUpload, { size: 20 }),
2990
- /* @__PURE__ */ jsx33("span", { className: "body-1", children: "\u0E04\u0E25\u0E34\u0E01\u0E2B\u0E23\u0E37\u0E2D\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E17\u0E35\u0E48\u0E1A\u0E23\u0E34\u0E40\u0E27\u0E13\u0E19\u0E35\u0E49\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14" }),
2991
- /* @__PURE__ */ jsx33("span", { className: "text-gray-400 body-3", children: "\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E1A\u0E1A\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E32\u0E22\u0E44\u0E1F\u0E25\u0E4C" })
3068
+ ] }) : /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center gap-2", children: [
3069
+ /* @__PURE__ */ jsx35(IconUpload, { size: 20 }),
3070
+ /* @__PURE__ */ jsx35("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" }),
3071
+ /* @__PURE__ */ jsx35("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" })
2992
3072
  ] })
2993
3073
  }
2994
3074
  ),
2995
- /* @__PURE__ */ jsx33(
3075
+ /* @__PURE__ */ jsx35(
2996
3076
  "input",
2997
3077
  {
2998
3078
  type: "file",
@@ -3005,13 +3085,13 @@ function FileUploader({
3005
3085
  }
3006
3086
  )
3007
3087
  ] }),
3008
- description && /* @__PURE__ */ jsx33("p", { className: "text-gray-400 body-4", children: description }),
3009
- /* @__PURE__ */ jsx33("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
3010
- /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
3011
- /* @__PURE__ */ jsx33("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx33(IconPaperclip, { size: 15 }) }),
3012
- /* @__PURE__ */ jsx33("span", { className: "truncate", children: file.name })
3088
+ description && /* @__PURE__ */ jsx35("p", { className: "text-gray-400 body-4", children: description }),
3089
+ /* @__PURE__ */ jsx35("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
3090
+ /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
3091
+ /* @__PURE__ */ jsx35("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx35(IconPaperclip, { size: 15 }) }),
3092
+ /* @__PURE__ */ jsx35("span", { className: "truncate", children: file.name })
3013
3093
  ] }),
3014
- /* @__PURE__ */ jsx33(
3094
+ /* @__PURE__ */ jsx35(
3015
3095
  IconTrash2,
3016
3096
  {
3017
3097
  size: 20,
@@ -3045,9 +3125,9 @@ function messageLoading(content, duration) {
3045
3125
  }
3046
3126
 
3047
3127
  // src/Breadcrumb/Breadcrumb.tsx
3048
- import { ConfigProvider as ConfigProvider17 } from "antd";
3128
+ import { ConfigProvider as ConfigProvider18 } from "antd";
3049
3129
  import { Breadcrumb } from "antd";
3050
- import { jsx as jsx34 } from "react/jsx-runtime";
3130
+ import { jsx as jsx36 } from "react/jsx-runtime";
3051
3131
  function Breadcrumbs({
3052
3132
  items,
3053
3133
  separator,
@@ -3055,15 +3135,15 @@ function Breadcrumbs({
3055
3135
  classname,
3056
3136
  params
3057
3137
  }) {
3058
- return /* @__PURE__ */ jsx34(
3059
- ConfigProvider17,
3138
+ return /* @__PURE__ */ jsx36(
3139
+ ConfigProvider18,
3060
3140
  {
3061
3141
  theme: {
3062
3142
  token: {
3063
3143
  fontFamily: "Kanit"
3064
3144
  }
3065
3145
  },
3066
- children: /* @__PURE__ */ jsx34(
3146
+ children: /* @__PURE__ */ jsx36(
3067
3147
  Breadcrumb,
3068
3148
  {
3069
3149
  items,
@@ -3078,8 +3158,8 @@ function Breadcrumbs({
3078
3158
  }
3079
3159
 
3080
3160
  // src/HeadingPage/HeadingPage.tsx
3081
- import { ConfigProvider as ConfigProvider18 } from "antd";
3082
- import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
3161
+ import { ConfigProvider as ConfigProvider19 } from "antd";
3162
+ import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
3083
3163
  function HeadingPage({ Heading }) {
3084
3164
  const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
3085
3165
  weekday: "long",
@@ -3087,17 +3167,17 @@ function HeadingPage({ Heading }) {
3087
3167
  month: "long",
3088
3168
  year: "numeric"
3089
3169
  });
3090
- return /* @__PURE__ */ jsx35(
3091
- ConfigProvider18,
3170
+ return /* @__PURE__ */ jsx37(
3171
+ ConfigProvider19,
3092
3172
  {
3093
3173
  theme: {
3094
3174
  token: {
3095
3175
  fontFamily: "Kanit"
3096
3176
  }
3097
3177
  },
3098
- children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
3099
- /* @__PURE__ */ jsx35("p", { className: "headline-5", children: Heading }),
3100
- /* @__PURE__ */ jsxs30("p", { className: "body-1", children: [
3178
+ children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
3179
+ /* @__PURE__ */ jsx37("p", { className: "headline-5", children: Heading }),
3180
+ /* @__PURE__ */ jsxs32("p", { className: "body-1", children: [
3101
3181
  " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
3102
3182
  today
3103
3183
  ] })
@@ -3107,9 +3187,9 @@ function HeadingPage({ Heading }) {
3107
3187
  }
3108
3188
 
3109
3189
  // src/Progress/ProgressBar.tsx
3110
- import { ConfigProvider as ConfigProvider19, Progress } from "antd";
3190
+ import { ConfigProvider as ConfigProvider20, Progress } from "antd";
3111
3191
  import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
3112
- import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
3192
+ import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
3113
3193
  function ProgressBar({
3114
3194
  percent = 0,
3115
3195
  size = "default",
@@ -3132,9 +3212,7 @@ function ProgressBar({
3132
3212
  strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
3133
3213
  }
3134
3214
  useEffect2(() => {
3135
- const inner = progressRef.current?.querySelector(
3136
- ".ant-progress-inner"
3137
- );
3215
+ const inner = progressRef.current?.querySelector(".ant-progress-inner");
3138
3216
  if (!inner) return;
3139
3217
  const observer = new ResizeObserver(() => {
3140
3218
  setBarWidth(inner.offsetWidth);
@@ -3142,16 +3220,16 @@ function ProgressBar({
3142
3220
  observer.observe(inner);
3143
3221
  return () => observer.disconnect();
3144
3222
  }, []);
3145
- return /* @__PURE__ */ jsx36(
3146
- ConfigProvider19,
3223
+ return /* @__PURE__ */ jsx38(
3224
+ ConfigProvider20,
3147
3225
  {
3148
3226
  theme: {
3149
3227
  token: {
3150
3228
  fontFamily: "Kanit"
3151
3229
  }
3152
3230
  },
3153
- children: /* @__PURE__ */ jsxs31("div", { className: "relative w-full", ref: progressRef, children: [
3154
- /* @__PURE__ */ jsx36(
3231
+ children: /* @__PURE__ */ jsxs33("div", { className: "relative w-full", ref: progressRef, children: [
3232
+ /* @__PURE__ */ jsx38(
3155
3233
  Progress,
3156
3234
  {
3157
3235
  className: "w-full",
@@ -3167,7 +3245,7 @@ function ProgressBar({
3167
3245
  strokeColor
3168
3246
  }
3169
3247
  ),
3170
- barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx36(
3248
+ barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx38(
3171
3249
  "div",
3172
3250
  {
3173
3251
  className: "checkpoint absolute top-0",
@@ -3189,7 +3267,7 @@ function ProgressBar({
3189
3267
  }
3190
3268
 
3191
3269
  // src/KpiSection/KpiSection.tsx
3192
- import { ConfigProvider as ConfigProvider20, message } from "antd";
3270
+ import { ConfigProvider as ConfigProvider21, message } from "antd";
3193
3271
  import { useEffect as useEffect3, useState as useState12 } from "react";
3194
3272
 
3195
3273
  // src/KpiSection/hooks/useGetKpiSection.ts
@@ -3340,7 +3418,7 @@ function useGetKpiSection() {
3340
3418
 
3341
3419
  // src/KpiSection/KpiSection.tsx
3342
3420
  import { IconCheck as IconCheck2, IconCirclePlus, IconPencil, IconTrash as IconTrash3, IconX as IconX2 } from "@tabler/icons-react";
3343
- import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
3421
+ import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
3344
3422
  function KpiSection({ type, onChangeKpiList }) {
3345
3423
  const {
3346
3424
  handleAddKpi,
@@ -3370,8 +3448,8 @@ function KpiSection({ type, onChangeKpiList }) {
3370
3448
  onChangeKpiList(kpiList);
3371
3449
  }
3372
3450
  }, [kpiList]);
3373
- return /* @__PURE__ */ jsx37(
3374
- ConfigProvider20,
3451
+ return /* @__PURE__ */ jsx39(
3452
+ ConfigProvider21,
3375
3453
  {
3376
3454
  theme: {
3377
3455
  token: {
@@ -3379,11 +3457,11 @@ function KpiSection({ type, onChangeKpiList }) {
3379
3457
  fontSize: 16
3380
3458
  }
3381
3459
  },
3382
- children: /* @__PURE__ */ jsxs32("div", { className: "container-input", children: [
3460
+ children: /* @__PURE__ */ jsxs34("div", { className: "container-input", children: [
3383
3461
  messageContainer,
3384
- type === "number" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
3385
- /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
3386
- /* @__PURE__ */ jsx37(
3462
+ type === "number" && /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
3463
+ /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
3464
+ /* @__PURE__ */ jsx39(
3387
3465
  InputField,
3388
3466
  {
3389
3467
  value: nameKpi,
@@ -3395,7 +3473,7 @@ function KpiSection({ type, onChangeKpiList }) {
3395
3473
  error: errors.nameKpi
3396
3474
  }
3397
3475
  ),
3398
- /* @__PURE__ */ jsx37(
3476
+ /* @__PURE__ */ jsx39(
3399
3477
  InputField,
3400
3478
  {
3401
3479
  value: kpiValue,
@@ -3419,7 +3497,7 @@ function KpiSection({ type, onChangeKpiList }) {
3419
3497
  error: errors.kpiValue
3420
3498
  }
3421
3499
  ),
3422
- /* @__PURE__ */ jsx37(
3500
+ /* @__PURE__ */ jsx39(
3423
3501
  InputField,
3424
3502
  {
3425
3503
  value: unitValue,
@@ -3431,7 +3509,7 @@ function KpiSection({ type, onChangeKpiList }) {
3431
3509
  error: errors.unitValue
3432
3510
  }
3433
3511
  ),
3434
- /* @__PURE__ */ jsx37("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx37(
3512
+ /* @__PURE__ */ jsx39("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx39(
3435
3513
  IconCirclePlus,
3436
3514
  {
3437
3515
  className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3440,17 +3518,17 @@ function KpiSection({ type, onChangeKpiList }) {
3440
3518
  }
3441
3519
  ) })
3442
3520
  ] }),
3443
- /* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32(
3521
+ /* @__PURE__ */ jsx39("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs34(
3444
3522
  "div",
3445
3523
  {
3446
3524
  className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
3447
3525
  children: [
3448
- /* @__PURE__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
3526
+ /* @__PURE__ */ jsxs34("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
3449
3527
  index + 1,
3450
3528
  "."
3451
3529
  ] }),
3452
- kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
3453
- /* @__PURE__ */ jsx37(
3530
+ kpi.isEditing ? /* @__PURE__ */ jsxs34(Fragment6, { children: [
3531
+ /* @__PURE__ */ jsx39(
3454
3532
  InputField,
3455
3533
  {
3456
3534
  value: kpi.name,
@@ -3460,7 +3538,7 @@ function KpiSection({ type, onChangeKpiList }) {
3460
3538
  error: itemErrors[kpi.id]?.name
3461
3539
  }
3462
3540
  ),
3463
- /* @__PURE__ */ jsx37(
3541
+ /* @__PURE__ */ jsx39(
3464
3542
  InputField,
3465
3543
  {
3466
3544
  value: kpi.value?.toString(),
@@ -3485,7 +3563,7 @@ function KpiSection({ type, onChangeKpiList }) {
3485
3563
  error: itemErrors[kpi.id]?.value
3486
3564
  }
3487
3565
  ),
3488
- /* @__PURE__ */ jsx37(
3566
+ /* @__PURE__ */ jsx39(
3489
3567
  InputField,
3490
3568
  {
3491
3569
  value: kpi.unit,
@@ -3495,29 +3573,29 @@ function KpiSection({ type, onChangeKpiList }) {
3495
3573
  error: itemErrors[kpi.id]?.unit
3496
3574
  }
3497
3575
  ),
3498
- /* @__PURE__ */ jsxs32(
3576
+ /* @__PURE__ */ jsxs34(
3499
3577
  "div",
3500
3578
  {
3501
3579
  className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
3502
3580
  children: [
3503
- /* @__PURE__ */ jsx37(
3581
+ /* @__PURE__ */ jsx39(
3504
3582
  IconCheck2,
3505
3583
  {
3506
3584
  className: "w-[30px] h-[30px] cursor-pointer",
3507
3585
  onClick: () => handleSave(kpi.id, type)
3508
3586
  }
3509
3587
  ),
3510
- /* @__PURE__ */ jsx37(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
3588
+ /* @__PURE__ */ jsx39(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
3511
3589
  ]
3512
3590
  }
3513
3591
  )
3514
- ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
3515
- /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
3516
- /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.value }),
3517
- /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.unit }),
3518
- /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
3519
- /* @__PURE__ */ jsx37(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
3520
- /* @__PURE__ */ jsx37(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
3592
+ ] }) : /* @__PURE__ */ jsxs34(Fragment6, { children: [
3593
+ /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.name }),
3594
+ /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.value }),
3595
+ /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.unit }),
3596
+ /* @__PURE__ */ jsxs34("div", { className: "flex gap-3 justify-end", children: [
3597
+ /* @__PURE__ */ jsx39(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
3598
+ /* @__PURE__ */ jsx39(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
3521
3599
  ] })
3522
3600
  ] })
3523
3601
  ]
@@ -3525,9 +3603,9 @@ function KpiSection({ type, onChangeKpiList }) {
3525
3603
  kpi.id
3526
3604
  )) })
3527
3605
  ] }),
3528
- type === "text" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
3529
- /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
3530
- /* @__PURE__ */ jsx37(
3606
+ type === "text" && /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
3607
+ /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
3608
+ /* @__PURE__ */ jsx39(
3531
3609
  InputField,
3532
3610
  {
3533
3611
  value: nameKpi,
@@ -3539,7 +3617,7 @@ function KpiSection({ type, onChangeKpiList }) {
3539
3617
  error: errors.nameKpi
3540
3618
  }
3541
3619
  ),
3542
- /* @__PURE__ */ jsx37("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx37(
3620
+ /* @__PURE__ */ jsx39("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx39(
3543
3621
  IconCirclePlus,
3544
3622
  {
3545
3623
  className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3548,13 +3626,13 @@ function KpiSection({ type, onChangeKpiList }) {
3548
3626
  }
3549
3627
  ) })
3550
3628
  ] }),
3551
- /* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
3552
- /* @__PURE__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
3629
+ /* @__PURE__ */ jsx39("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
3630
+ /* @__PURE__ */ jsxs34("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
3553
3631
  index + 1,
3554
3632
  "."
3555
3633
  ] }),
3556
- kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
3557
- /* @__PURE__ */ jsx37(
3634
+ kpi.isEditing ? /* @__PURE__ */ jsxs34(Fragment6, { children: [
3635
+ /* @__PURE__ */ jsx39(
3558
3636
  InputField,
3559
3637
  {
3560
3638
  value: kpi.name,
@@ -3564,27 +3642,27 @@ function KpiSection({ type, onChangeKpiList }) {
3564
3642
  error: itemErrors[kpi.id]?.name
3565
3643
  }
3566
3644
  ),
3567
- /* @__PURE__ */ jsxs32(
3645
+ /* @__PURE__ */ jsxs34(
3568
3646
  "div",
3569
3647
  {
3570
3648
  className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
3571
3649
  children: [
3572
- /* @__PURE__ */ jsx37(
3650
+ /* @__PURE__ */ jsx39(
3573
3651
  IconCheck2,
3574
3652
  {
3575
3653
  className: "w-[30px] h-[30px] cursor-pointer",
3576
3654
  onClick: () => handleSave(kpi.id, type)
3577
3655
  }
3578
3656
  ),
3579
- /* @__PURE__ */ jsx37(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
3657
+ /* @__PURE__ */ jsx39(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
3580
3658
  ]
3581
3659
  }
3582
3660
  )
3583
- ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
3584
- /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
3585
- /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
3586
- /* @__PURE__ */ jsx37(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
3587
- /* @__PURE__ */ jsx37(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
3661
+ ] }) : /* @__PURE__ */ jsxs34(Fragment6, { children: [
3662
+ /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.name }),
3663
+ /* @__PURE__ */ jsxs34("div", { className: "flex gap-3 justify-end", children: [
3664
+ /* @__PURE__ */ jsx39(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
3665
+ /* @__PURE__ */ jsx39(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
3588
3666
  ] })
3589
3667
  ] })
3590
3668
  ] }, kpi.id)) })
@@ -3593,7 +3671,15 @@ function KpiSection({ type, onChangeKpiList }) {
3593
3671
  }
3594
3672
  );
3595
3673
  }
3674
+
3675
+ // src/Modal/Modal/Modal.tsx
3676
+ import { Modal } from "antd";
3677
+ import { jsx as jsx40 } from "react/jsx-runtime";
3678
+ function AntDModal({ children, isOpen, width, onCancel }) {
3679
+ return /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40(Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ jsx40("div", { children }) }) });
3680
+ }
3596
3681
  export {
3682
+ AntDModal,
3597
3683
  AntDataTable,
3598
3684
  Breadcrumbs,
3599
3685
  Calendar,
@@ -3608,6 +3694,7 @@ export {
3608
3694
  GhostButton,
3609
3695
  HeadingPage,
3610
3696
  InputField,
3697
+ InputFieldNumber,
3611
3698
  KpiSection,
3612
3699
  Loader,
3613
3700
  MenuNavBar,
@@ -3625,6 +3712,7 @@ export {
3625
3712
  Sidebar,
3626
3713
  SortFilter,
3627
3714
  Switch,
3715
+ TabSelectionButton,
3628
3716
  TextAreaInput,
3629
3717
  TextInput,
3630
3718
  TimePickerBasic,