@esic-lab/data-core-ui 0.0.29 → 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 (5) hide show
  1. package/dist/index.d.mts +71 -27
  2. package/dist/index.d.ts +71 -27
  3. package/dist/index.js +528 -438
  4. package/dist/index.mjs +515 -428
  5. 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,
@@ -872,7 +888,7 @@ function AntDataTable({
872
888
  onRowSelect && onRowSelect(newSelectedRowKeys);
873
889
  }
874
890
  };
875
- return /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsx15(
891
+ return /* @__PURE__ */ jsx16(Fragment2, { children: /* @__PURE__ */ jsx16(
876
892
  ConfigProvider,
877
893
  {
878
894
  theme: {
@@ -882,7 +898,7 @@ function AntDataTable({
882
898
  fontSize: 14
883
899
  }
884
900
  },
885
- children: /* @__PURE__ */ jsx15(
901
+ children: /* @__PURE__ */ jsx16(
886
902
  Table,
887
903
  {
888
904
  dataSource,
@@ -905,7 +921,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
905
921
  import interactionPlugin from "@fullcalendar/interaction";
906
922
  import thLocale from "@fullcalendar/core/locales/th";
907
923
  import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
908
- 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";
909
925
  function Calendar({ events }) {
910
926
  const calendarRef = useRef(null);
911
927
  const [monthTitle, setMonthTitle] = useState4("");
@@ -924,11 +940,11 @@ function Calendar({ events }) {
924
940
  useEffect(() => {
925
941
  updateTitle();
926
942
  }, []);
927
- return /* @__PURE__ */ jsxs12("div", { className: "fc w-full h-full relative z-10", children: [
928
- /* @__PURE__ */ jsxs12("div", { className: "flex mb-[8px]", children: [
929
- /* @__PURE__ */ jsx16("p", { className: "headline-5", children: monthTitle }),
930
- /* @__PURE__ */ jsxs12("div", { className: "flex gap-[10px] ml-auto", children: [
931
- /* @__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(
932
948
  "p",
933
949
  {
934
950
  className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -939,7 +955,7 @@ function Calendar({ events }) {
939
955
  children: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49"
940
956
  }
941
957
  ),
942
- /* @__PURE__ */ jsx16(
958
+ /* @__PURE__ */ jsx17(
943
959
  "p",
944
960
  {
945
961
  className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -950,7 +966,7 @@ function Calendar({ events }) {
950
966
  children: "Month"
951
967
  }
952
968
  ),
953
- /* @__PURE__ */ jsx16(
969
+ /* @__PURE__ */ jsx17(
954
970
  "p",
955
971
  {
956
972
  className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -961,7 +977,7 @@ function Calendar({ events }) {
961
977
  children: "Week"
962
978
  }
963
979
  ),
964
- /* @__PURE__ */ jsx16(
980
+ /* @__PURE__ */ jsx17(
965
981
  "p",
966
982
  {
967
983
  className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -972,7 +988,7 @@ function Calendar({ events }) {
972
988
  children: "Day"
973
989
  }
974
990
  ),
975
- /* @__PURE__ */ jsx16(
991
+ /* @__PURE__ */ jsx17(
976
992
  "button",
977
993
  {
978
994
  className: "cursor-pointer",
@@ -980,10 +996,10 @@ function Calendar({ events }) {
980
996
  calendarRef.current?.getApi().prev();
981
997
  updateTitle();
982
998
  },
983
- children: /* @__PURE__ */ jsx16(IconChevronLeft, {})
999
+ children: /* @__PURE__ */ jsx17(IconChevronLeft, {})
984
1000
  }
985
1001
  ),
986
- /* @__PURE__ */ jsx16(
1002
+ /* @__PURE__ */ jsx17(
987
1003
  "button",
988
1004
  {
989
1005
  className: "cursor-pointer",
@@ -991,12 +1007,12 @@ function Calendar({ events }) {
991
1007
  calendarRef.current?.getApi().next();
992
1008
  updateTitle();
993
1009
  },
994
- children: /* @__PURE__ */ jsx16(IconChevronRight, {})
1010
+ children: /* @__PURE__ */ jsx17(IconChevronRight, {})
995
1011
  }
996
1012
  )
997
1013
  ] })
998
1014
  ] }),
999
- /* @__PURE__ */ jsx16("div", { className: "relative z-10", children: /* @__PURE__ */ jsx16(
1015
+ /* @__PURE__ */ jsx17("div", { className: "relative z-10", children: /* @__PURE__ */ jsx17(
1000
1016
  FullCalendar,
1001
1017
  {
1002
1018
  ref: calendarRef,
@@ -1025,28 +1041,28 @@ function Calendar({ events }) {
1025
1041
  });
1026
1042
  },
1027
1043
  eventContent: (arg) => {
1028
- 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 }) });
1029
1045
  },
1030
1046
  moreLinkContent: (arg) => `+${arg.num} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`
1031
1047
  }
1032
1048
  ) }),
1033
- 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) }) })
1034
1050
  ] });
1035
1051
  }
1036
1052
  function EventPopUp({ event, onClose }) {
1037
- return /* @__PURE__ */ jsxs12("div", { className: "w-[500px] h-auto rounded-2xl bg-white relative z-50 shadow-2xl overflow-hidden", children: [
1038
- /* @__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" }) }),
1039
- /* @__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 }) }),
1040
- /* @__PURE__ */ jsxs12("div", { className: "flex flex-col w-full p-6 gap-3 text-gray-700 body-3", children: [
1041
- /* @__PURE__ */ jsxs12("p", { children: [
1042
- /* @__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: " }),
1043
1059
  event?.start?.toLocaleString?.() || String(event?.start)
1044
1060
  ] }),
1045
- /* @__PURE__ */ jsxs12("p", { children: [
1046
- /* @__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: " }),
1047
1063
  event?.end?.toLocaleString?.() || String(event?.end)
1048
1064
  ] }),
1049
- /* @__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" })
1050
1066
  ] })
1051
1067
  ] });
1052
1068
  }
@@ -1054,7 +1070,7 @@ function EventPopUp({ event, onClose }) {
1054
1070
  // src/Input/TextInput/TextInput.tsx
1055
1071
  import { IconEye, IconEyeOff } from "@tabler/icons-react";
1056
1072
  import { useState as useState5 } from "react";
1057
- import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
1073
+ import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
1058
1074
  function TextInput({
1059
1075
  label,
1060
1076
  placeholder,
@@ -1071,18 +1087,18 @@ function TextInput({
1071
1087
  setShowPassword(!showPassword);
1072
1088
  };
1073
1089
  const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
1074
- return /* @__PURE__ */ jsxs13("div", { children: [
1075
- 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: [
1076
1092
  label,
1077
- required && /* @__PURE__ */ jsx17("span", { className: "text-red-600", children: "\xA0*" })
1093
+ required && /* @__PURE__ */ jsx18("span", { className: "text-red-600", children: "\xA0*" })
1078
1094
  ] }),
1079
- /* @__PURE__ */ jsxs13(
1095
+ /* @__PURE__ */ jsxs14(
1080
1096
  "div",
1081
1097
  {
1082
1098
  className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center
1083
1099
  ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-600" : ""}`,
1084
1100
  children: [
1085
- /* @__PURE__ */ jsx17(
1101
+ /* @__PURE__ */ jsx18(
1086
1102
  "input",
1087
1103
  {
1088
1104
  className: `w-full h-full px-[16px] ${disabled ? "cursor-not-allowed" : ""}`,
@@ -1095,75 +1111,18 @@ function TextInput({
1095
1111
  disabled
1096
1112
  }
1097
1113
  ),
1098
- 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 }))
1099
1115
  ]
1100
1116
  }
1101
1117
  ),
1102
- 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 })
1103
1119
  ] });
1104
1120
  }
1105
1121
 
1106
- // src/InputField/InputField.tsx
1107
- import { ConfigProvider as ConfigProvider2, Input } from "antd";
1108
- import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
1109
- function InputField({
1110
- value,
1111
- onChange,
1112
- placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
1113
- title,
1114
- required,
1115
- bottomText,
1116
- disabled,
1117
- error,
1118
- addonBefore,
1119
- addonAfter,
1120
- defaultValue,
1121
- className,
1122
- onClear
1123
- }) {
1124
- return /* @__PURE__ */ jsx18(
1125
- ConfigProvider2,
1126
- {
1127
- theme: {
1128
- token: {
1129
- fontFamily: "Kanit"
1130
- }
1131
- },
1132
- children: /* @__PURE__ */ jsxs14("div", { className: "container-input", children: [
1133
- /* @__PURE__ */ jsxs14("div", { children: [
1134
- /* @__PURE__ */ jsx18("span", { className: "body-1", children: title }),
1135
- " ",
1136
- required && /* @__PURE__ */ jsx18("span", { className: "text-red-500", children: "*" })
1137
- ] }),
1138
- /* @__PURE__ */ jsx18(
1139
- Input,
1140
- {
1141
- value,
1142
- placeholder,
1143
- disabled,
1144
- className: `body-1 w-full ${className ?? ""}`,
1145
- onChange: (e) => onChange(e.target.value || void 0),
1146
- allowClear: true,
1147
- addonBefore,
1148
- addonAfter,
1149
- defaultValue,
1150
- onClear
1151
- }
1152
- ),
1153
- /* @__PURE__ */ jsxs14("div", { children: [
1154
- /* @__PURE__ */ jsx18("p", { className: "caption-1 text-gray-500", children: bottomText }),
1155
- " ",
1156
- error && /* @__PURE__ */ jsx18("p", { className: "caption-1 text-red-500 ", children: error })
1157
- ] })
1158
- ] })
1159
- }
1160
- );
1161
- }
1162
-
1163
1122
  // src/Input/TextArea/TextArea.tsx
1164
- import { ConfigProvider as ConfigProvider3, Input as Input2 } from "antd";
1123
+ import { ConfigProvider as ConfigProvider2, Input } from "antd";
1165
1124
  import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
1166
- var { TextArea } = Input2;
1125
+ var { TextArea } = Input;
1167
1126
  function TextAreaInput({
1168
1127
  label,
1169
1128
  height = 4,
@@ -1178,7 +1137,7 @@ function TextAreaInput({
1178
1137
  disabled
1179
1138
  }) {
1180
1139
  return /* @__PURE__ */ jsx19(Fragment4, { children: /* @__PURE__ */ jsx19(
1181
- ConfigProvider3,
1140
+ ConfigProvider2,
1182
1141
  {
1183
1142
  theme: {
1184
1143
  components: {},
@@ -1215,29 +1174,30 @@ function TextAreaInput({
1215
1174
  ) });
1216
1175
  }
1217
1176
 
1218
- // src/ColorPicker/ColorPicker.tsx
1219
- import { ConfigProvider as ConfigProvider4, ColorPicker } from "antd";
1177
+ // src/Input/InputField/InputField.tsx
1178
+ import { ConfigProvider as ConfigProvider3, Input as Input2 } from "antd";
1220
1179
  import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
1221
- function ColorPickerBasic({
1180
+ function InputField({
1222
1181
  value,
1223
1182
  onChange,
1224
- required,
1183
+ placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
1225
1184
  title,
1185
+ required,
1226
1186
  bottomText,
1227
- error,
1228
1187
  disabled,
1229
- allowClear,
1230
- defaultFormat,
1188
+ error,
1189
+ addonBefore,
1190
+ addonAfter,
1191
+ defaultValue,
1231
1192
  className,
1232
- placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
1193
+ onClear
1233
1194
  }) {
1234
1195
  return /* @__PURE__ */ jsx20(
1235
- ConfigProvider4,
1196
+ ConfigProvider3,
1236
1197
  {
1237
1198
  theme: {
1238
1199
  token: {
1239
- fontFamily: "Kanit",
1240
- fontSize: 16
1200
+ fontFamily: "Kanit"
1241
1201
  }
1242
1202
  },
1243
1203
  children: /* @__PURE__ */ jsxs16("div", { className: "container-input", children: [
@@ -1247,26 +1207,18 @@ function ColorPickerBasic({
1247
1207
  required && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "*" })
1248
1208
  ] }),
1249
1209
  /* @__PURE__ */ jsx20(
1250
- ColorPicker,
1210
+ Input2,
1251
1211
  {
1252
- defaultFormat,
1253
- className: `body-1 w-full ${className ?? ""}`,
1254
1212
  value,
1255
- defaultValue: "#ffff",
1256
- onChange,
1257
- allowClear,
1258
- showText: (color) => {
1259
- const hex = color.toHexString();
1260
- if (!value) {
1261
- return /* @__PURE__ */ jsx20("span", { children: placeholder });
1262
- }
1263
- return /* @__PURE__ */ jsxs16("span", { children: [
1264
- "(",
1265
- hex,
1266
- ")"
1267
- ] });
1268
- },
1269
- 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
1270
1222
  }
1271
1223
  ),
1272
1224
  /* @__PURE__ */ jsxs16("div", { children: [
@@ -1279,12 +1231,75 @@ function ColorPickerBasic({
1279
1231
  );
1280
1232
  }
1281
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
+
1282
1297
  // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
1283
1298
  var import_dayjs = __toESM(require_dayjs_min());
1284
1299
  var import_th2 = __toESM(require_th());
1285
1300
  import { ConfigProvider as ConfigProvider5, DatePicker } from "antd";
1286
1301
  import thTH from "antd/locale/th_TH";
1287
- import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
1302
+ import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
1288
1303
  function DatePickerBasic({
1289
1304
  value,
1290
1305
  onChange,
@@ -1303,7 +1318,7 @@ function DatePickerBasic({
1303
1318
  }) {
1304
1319
  const dateFormat = "DD/MM/YYYY";
1305
1320
  import_dayjs.default.locale("th_TH");
1306
- return /* @__PURE__ */ jsx21(
1321
+ return /* @__PURE__ */ jsx22(
1307
1322
  ConfigProvider5,
1308
1323
  {
1309
1324
  locale: thTH,
@@ -1313,13 +1328,13 @@ function DatePickerBasic({
1313
1328
  fontSize: 16
1314
1329
  }
1315
1330
  },
1316
- children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
1317
- /* @__PURE__ */ jsxs17("div", { children: [
1318
- /* @__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 }),
1319
1334
  " ",
1320
- required && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
1335
+ required && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
1321
1336
  ] }),
1322
- /* @__PURE__ */ jsx21(
1337
+ /* @__PURE__ */ jsx22(
1323
1338
  DatePicker,
1324
1339
  {
1325
1340
  className: `body-1 w-full ${className ?? ""}`,
@@ -1336,10 +1351,10 @@ function DatePickerBasic({
1336
1351
  size
1337
1352
  }
1338
1353
  ),
1339
- /* @__PURE__ */ jsxs17("div", { children: [
1340
- /* @__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 }),
1341
1356
  " ",
1342
- 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 })
1343
1358
  ] })
1344
1359
  ] })
1345
1360
  }
@@ -1352,7 +1367,7 @@ var import_customParseFormat = __toESM(require_customParseFormat());
1352
1367
  var import_dayjs2 = __toESM(require_dayjs_min());
1353
1368
  import { ConfigProvider as ConfigProvider6, DatePicker as DatePicker2 } from "antd";
1354
1369
  import thTH2 from "antd/locale/th_TH";
1355
- import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
1370
+ import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
1356
1371
  import_dayjs2.default.extend(import_customParseFormat.default);
1357
1372
  function DatePickerRangePicker({
1358
1373
  value,
@@ -1373,7 +1388,7 @@ function DatePickerRangePicker({
1373
1388
  }) {
1374
1389
  const dateFormat = "DD/MM/YYYY";
1375
1390
  import_dayjs2.default.locale("th_TH");
1376
- return /* @__PURE__ */ jsx22(
1391
+ return /* @__PURE__ */ jsx23(
1377
1392
  ConfigProvider6,
1378
1393
  {
1379
1394
  locale: thTH2,
@@ -1383,13 +1398,13 @@ function DatePickerRangePicker({
1383
1398
  fontSize: 16
1384
1399
  }
1385
1400
  },
1386
- children: /* @__PURE__ */ jsxs18("div", { className: "container-input", children: [
1387
- /* @__PURE__ */ jsxs18("div", { children: [
1388
- /* @__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 }),
1389
1404
  " ",
1390
- required && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
1405
+ required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
1391
1406
  ] }),
1392
- /* @__PURE__ */ jsx22(
1407
+ /* @__PURE__ */ jsx23(
1393
1408
  DatePicker2.RangePicker,
1394
1409
  {
1395
1410
  format: dateFormat,
@@ -1407,10 +1422,10 @@ function DatePickerRangePicker({
1407
1422
  onCalendarChange
1408
1423
  }
1409
1424
  ),
1410
- /* @__PURE__ */ jsxs18("div", { children: [
1411
- /* @__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 }),
1412
1427
  " ",
1413
- 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 })
1414
1429
  ] })
1415
1430
  ] })
1416
1431
  }
@@ -1419,7 +1434,7 @@ function DatePickerRangePicker({
1419
1434
 
1420
1435
  // src/TimePicker/TimePickerBasic/TimePickerBasic.tsx
1421
1436
  import { ConfigProvider as ConfigProvider7, TimePicker } from "antd";
1422
- import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
1437
+ import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
1423
1438
  function TimePickerBasic({
1424
1439
  value,
1425
1440
  onChange,
@@ -1431,7 +1446,7 @@ function TimePickerBasic({
1431
1446
  disabled,
1432
1447
  className
1433
1448
  }) {
1434
- return /* @__PURE__ */ jsx23(
1449
+ return /* @__PURE__ */ jsx24(
1435
1450
  ConfigProvider7,
1436
1451
  {
1437
1452
  theme: {
@@ -1439,13 +1454,13 @@ function TimePickerBasic({
1439
1454
  fontFamily: "Kanit"
1440
1455
  }
1441
1456
  },
1442
- children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
1443
- /* @__PURE__ */ jsxs19("div", { children: [
1444
- /* @__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 }),
1445
1460
  " ",
1446
- required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
1461
+ required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
1447
1462
  ] }),
1448
- /* @__PURE__ */ jsx23(
1463
+ /* @__PURE__ */ jsx24(
1449
1464
  TimePicker,
1450
1465
  {
1451
1466
  format: "HH:mm",
@@ -1457,10 +1472,10 @@ function TimePickerBasic({
1457
1472
  disabled
1458
1473
  }
1459
1474
  ),
1460
- /* @__PURE__ */ jsxs19("div", { children: [
1461
- /* @__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 }),
1462
1477
  " ",
1463
- 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 })
1464
1479
  ] })
1465
1480
  ] })
1466
1481
  }
@@ -1469,7 +1484,7 @@ function TimePickerBasic({
1469
1484
 
1470
1485
  // src/TimePicker/TimePickerRangePicker/TimerPickerRangePicker.tsx
1471
1486
  import { ConfigProvider as ConfigProvider8, TimePicker as TimePicker2 } from "antd";
1472
- import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
1487
+ import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
1473
1488
  function TimePickerRangePicker({
1474
1489
  value,
1475
1490
  onChange,
@@ -1481,7 +1496,7 @@ function TimePickerRangePicker({
1481
1496
  disabled,
1482
1497
  className
1483
1498
  }) {
1484
- return /* @__PURE__ */ jsx24(
1499
+ return /* @__PURE__ */ jsx25(
1485
1500
  ConfigProvider8,
1486
1501
  {
1487
1502
  theme: {
@@ -1489,13 +1504,13 @@ function TimePickerRangePicker({
1489
1504
  fontFamily: "Kanit"
1490
1505
  }
1491
1506
  },
1492
- children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
1493
- /* @__PURE__ */ jsxs20("div", { children: [
1494
- /* @__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 }),
1495
1510
  " ",
1496
- required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
1511
+ required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
1497
1512
  ] }),
1498
- /* @__PURE__ */ jsx24(
1513
+ /* @__PURE__ */ jsx25(
1499
1514
  TimePicker2.RangePicker,
1500
1515
  {
1501
1516
  format: "HH:mm",
@@ -1507,18 +1522,82 @@ function TimePickerRangePicker({
1507
1522
  disabled
1508
1523
  }
1509
1524
  ),
1510
- /* @__PURE__ */ jsxs20("div", { children: [
1511
- /* @__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 }),
1512
1527
  " ",
1513
- 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 })
1514
1593
  ] })
1515
1594
  ] })
1516
1595
  }
1517
1596
  );
1518
1597
  }
1519
1598
 
1520
- // src/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
1521
- 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";
1522
1601
 
1523
1602
  // node_modules/@babel/runtime/helpers/esm/typeof.js
1524
1603
  function _typeof(o) {
@@ -2219,8 +2298,8 @@ magentaDark.primary = magentaDark[5];
2219
2298
  var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a", "#6a6a6a", "#7b7b7b", "#888888", "#969696"];
2220
2299
  greyDark.primary = greyDark[5];
2221
2300
 
2222
- // src/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
2223
- 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";
2224
2303
  function genPresets(presets = presetPalettes) {
2225
2304
  return Object.entries(presets).map(([label, colors]) => ({
2226
2305
  label,
@@ -2248,8 +2327,8 @@ function ColorPalettePickerBasic({
2248
2327
  red,
2249
2328
  green
2250
2329
  });
2251
- return /* @__PURE__ */ jsx25(
2252
- ConfigProvider9,
2330
+ return /* @__PURE__ */ jsx27(
2331
+ ConfigProvider10,
2253
2332
  {
2254
2333
  theme: {
2255
2334
  token: {
@@ -2257,13 +2336,13 @@ function ColorPalettePickerBasic({
2257
2336
  fontSize: 16
2258
2337
  }
2259
2338
  },
2260
- children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
2261
- /* @__PURE__ */ jsxs21("div", { children: [
2262
- /* @__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 }),
2263
2342
  " ",
2264
- required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
2343
+ required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
2265
2344
  ] }),
2266
- /* @__PURE__ */ jsx25(
2345
+ /* @__PURE__ */ jsx27(
2267
2346
  ColorPicker2,
2268
2347
  {
2269
2348
  defaultFormat,
@@ -2276,9 +2355,9 @@ function ColorPalettePickerBasic({
2276
2355
  showText: (color) => {
2277
2356
  const hex = color.toHexString();
2278
2357
  if (!value) {
2279
- return /* @__PURE__ */ jsx25("span", { children: placeholder });
2358
+ return /* @__PURE__ */ jsx27("span", { children: placeholder });
2280
2359
  }
2281
- return /* @__PURE__ */ jsxs21("span", { children: [
2360
+ return /* @__PURE__ */ jsxs23("span", { children: [
2282
2361
  "(",
2283
2362
  hex,
2284
2363
  ")"
@@ -2288,10 +2367,10 @@ function ColorPalettePickerBasic({
2288
2367
  onClear
2289
2368
  }
2290
2369
  ),
2291
- /* @__PURE__ */ jsxs21("div", { children: [
2292
- /* @__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 }),
2293
2372
  " ",
2294
- 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 })
2295
2374
  ] })
2296
2375
  ] })
2297
2376
  }
@@ -2299,8 +2378,8 @@ function ColorPalettePickerBasic({
2299
2378
  }
2300
2379
 
2301
2380
  // src/Select/SelectField/SelectField.tsx
2302
- import { Select, ConfigProvider as ConfigProvider10 } from "antd";
2303
- 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";
2304
2383
  function SelectField({
2305
2384
  value,
2306
2385
  onChange,
@@ -2319,8 +2398,8 @@ function SelectField({
2319
2398
  className,
2320
2399
  onClear
2321
2400
  }) {
2322
- return /* @__PURE__ */ jsx26(
2323
- ConfigProvider10,
2401
+ return /* @__PURE__ */ jsx28(
2402
+ ConfigProvider11,
2324
2403
  {
2325
2404
  theme: {
2326
2405
  token: {
@@ -2328,13 +2407,13 @@ function SelectField({
2328
2407
  fontSize: 16
2329
2408
  }
2330
2409
  },
2331
- children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
2332
- /* @__PURE__ */ jsxs22("div", { children: [
2333
- /* @__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 }),
2334
2413
  " ",
2335
- required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
2414
+ required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
2336
2415
  ] }),
2337
- /* @__PURE__ */ jsx26(
2416
+ /* @__PURE__ */ jsx28(
2338
2417
  Select,
2339
2418
  {
2340
2419
  showSearch: true,
@@ -2349,7 +2428,7 @@ function SelectField({
2349
2428
  options,
2350
2429
  mode,
2351
2430
  onSearch: handleSearch,
2352
- prefix: prefix ? /* @__PURE__ */ jsx26(
2431
+ prefix: prefix ? /* @__PURE__ */ jsx28(
2353
2432
  "span",
2354
2433
  {
2355
2434
  style: {
@@ -2366,10 +2445,10 @@ function SelectField({
2366
2445
  onClear
2367
2446
  }
2368
2447
  ),
2369
- /* @__PURE__ */ jsxs22("div", { children: [
2370
- /* @__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 }),
2371
2450
  " ",
2372
- 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 })
2373
2452
  ] })
2374
2453
  ] })
2375
2454
  }
@@ -2377,8 +2456,8 @@ function SelectField({
2377
2456
  }
2378
2457
 
2379
2458
  // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
2380
- import { Select as Select2, ConfigProvider as ConfigProvider11 } from "antd";
2381
- 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";
2382
2461
  function SelectFieldGroup({
2383
2462
  value,
2384
2463
  onChange,
@@ -2396,21 +2475,21 @@ function SelectFieldGroup({
2396
2475
  handleSearch,
2397
2476
  className
2398
2477
  }) {
2399
- return /* @__PURE__ */ jsx27(
2400
- ConfigProvider11,
2478
+ return /* @__PURE__ */ jsx29(
2479
+ ConfigProvider12,
2401
2480
  {
2402
2481
  theme: {
2403
2482
  token: {
2404
2483
  fontFamily: "Kanit"
2405
2484
  }
2406
2485
  },
2407
- children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
2408
- /* @__PURE__ */ jsxs23("div", { children: [
2409
- /* @__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 }),
2410
2489
  " ",
2411
- required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
2490
+ required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
2412
2491
  ] }),
2413
- /* @__PURE__ */ jsx27(
2492
+ /* @__PURE__ */ jsx29(
2414
2493
  Select2,
2415
2494
  {
2416
2495
  showSearch: true,
@@ -2425,7 +2504,7 @@ function SelectFieldGroup({
2425
2504
  options,
2426
2505
  mode,
2427
2506
  onSearch: handleSearch,
2428
- prefix: prefix ? /* @__PURE__ */ jsx27(
2507
+ prefix: prefix ? /* @__PURE__ */ jsx29(
2429
2508
  "span",
2430
2509
  {
2431
2510
  style: {
@@ -2441,10 +2520,10 @@ function SelectFieldGroup({
2441
2520
  allowClear: true
2442
2521
  }
2443
2522
  ),
2444
- /* @__PURE__ */ jsxs23("div", { children: [
2445
- /* @__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 }),
2446
2525
  " ",
2447
- 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 })
2448
2527
  ] })
2449
2528
  ] })
2450
2529
  }
@@ -2452,7 +2531,7 @@ function SelectFieldGroup({
2452
2531
  }
2453
2532
 
2454
2533
  // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
2455
- import { Select as Select3, ConfigProvider as ConfigProvider12 } from "antd";
2534
+ import { Select as Select3, ConfigProvider as ConfigProvider13 } from "antd";
2456
2535
 
2457
2536
  // src/Select/SelectFieldStatus/StatusMockup.ts
2458
2537
  var status = [
@@ -2465,7 +2544,7 @@ var status = [
2465
2544
 
2466
2545
  // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
2467
2546
  import { DownOutlined } from "@ant-design/icons";
2468
- import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
2547
+ import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
2469
2548
  function SelectFieldStatus({
2470
2549
  value,
2471
2550
  onChange,
@@ -2479,8 +2558,8 @@ function SelectFieldStatus({
2479
2558
  className
2480
2559
  }) {
2481
2560
  const selectedItem = status.find((s) => s.value === value);
2482
- return /* @__PURE__ */ jsx28(
2483
- ConfigProvider12,
2561
+ return /* @__PURE__ */ jsx30(
2562
+ ConfigProvider13,
2484
2563
  {
2485
2564
  theme: {
2486
2565
  components: {
@@ -2495,17 +2574,17 @@ function SelectFieldStatus({
2495
2574
  fontFamily: "Kanit"
2496
2575
  }
2497
2576
  },
2498
- children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
2499
- /* @__PURE__ */ jsxs24("div", { children: [
2500
- /* @__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 }),
2501
2580
  " ",
2502
- required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
2581
+ required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
2503
2582
  ] }),
2504
- /* @__PURE__ */ jsx28(
2583
+ /* @__PURE__ */ jsx30(
2505
2584
  Select3,
2506
2585
  {
2507
2586
  disabled,
2508
- suffixIcon: /* @__PURE__ */ jsx28(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
2587
+ suffixIcon: /* @__PURE__ */ jsx30(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
2509
2588
  value,
2510
2589
  onChange,
2511
2590
  className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2516,10 +2595,10 @@ function SelectFieldStatus({
2516
2595
  showSearch: true
2517
2596
  }
2518
2597
  ),
2519
- /* @__PURE__ */ jsxs24("div", { children: [
2520
- /* @__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 }),
2521
2600
  " ",
2522
- 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 })
2523
2602
  ] })
2524
2603
  ] })
2525
2604
  }
@@ -2527,7 +2606,7 @@ function SelectFieldStatus({
2527
2606
  }
2528
2607
 
2529
2608
  // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
2530
- import { Select as Select4, ConfigProvider as ConfigProvider13 } from "antd";
2609
+ import { Select as Select4, ConfigProvider as ConfigProvider14 } from "antd";
2531
2610
 
2532
2611
  // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
2533
2612
  var status2 = [
@@ -2537,7 +2616,7 @@ var status2 = [
2537
2616
 
2538
2617
  // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
2539
2618
  import { DownOutlined as DownOutlined2 } from "@ant-design/icons";
2540
- import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
2619
+ import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
2541
2620
  function SelectFieldStatusReport({
2542
2621
  value,
2543
2622
  onChange,
@@ -2551,8 +2630,8 @@ function SelectFieldStatusReport({
2551
2630
  options
2552
2631
  }) {
2553
2632
  const selectedItem = status2.find((s) => s.value === value);
2554
- return /* @__PURE__ */ jsx29(
2555
- ConfigProvider13,
2633
+ return /* @__PURE__ */ jsx31(
2634
+ ConfigProvider14,
2556
2635
  {
2557
2636
  theme: {
2558
2637
  components: {
@@ -2567,17 +2646,17 @@ function SelectFieldStatusReport({
2567
2646
  fontFamily: "Kanit"
2568
2647
  }
2569
2648
  },
2570
- children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
2571
- /* @__PURE__ */ jsxs25("div", { children: [
2572
- /* @__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 }),
2573
2652
  " ",
2574
- required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
2653
+ required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
2575
2654
  ] }),
2576
- /* @__PURE__ */ jsx29(
2655
+ /* @__PURE__ */ jsx31(
2577
2656
  Select4,
2578
2657
  {
2579
2658
  disabled,
2580
- suffixIcon: /* @__PURE__ */ jsx29(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
2659
+ suffixIcon: /* @__PURE__ */ jsx31(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
2581
2660
  value,
2582
2661
  onChange,
2583
2662
  className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2588,10 +2667,10 @@ function SelectFieldStatusReport({
2588
2667
  showSearch: true
2589
2668
  }
2590
2669
  ),
2591
- /* @__PURE__ */ jsxs25("div", { children: [
2592
- /* @__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 }),
2593
2672
  " ",
2594
- 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 })
2595
2674
  ] })
2596
2675
  ] })
2597
2676
  }
@@ -2599,9 +2678,9 @@ function SelectFieldStatusReport({
2599
2678
  }
2600
2679
 
2601
2680
  // src/Select/SelectFieldTag/SelectFieldTag.tsx
2602
- import { Select as Select5, ConfigProvider as ConfigProvider14 } from "antd";
2681
+ import { Select as Select5, ConfigProvider as ConfigProvider15 } from "antd";
2603
2682
  import { useState as useState6 } from "react";
2604
- import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
2683
+ import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
2605
2684
  function SelectFieldTag({
2606
2685
  title,
2607
2686
  required,
@@ -2635,21 +2714,21 @@ function SelectFieldTag({
2635
2714
  }
2636
2715
  onChange?.([]);
2637
2716
  };
2638
- return /* @__PURE__ */ jsx30(
2639
- ConfigProvider14,
2717
+ return /* @__PURE__ */ jsx32(
2718
+ ConfigProvider15,
2640
2719
  {
2641
2720
  theme: {
2642
2721
  token: {
2643
2722
  fontFamily: "Kanit"
2644
2723
  }
2645
2724
  },
2646
- children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
2647
- /* @__PURE__ */ jsxs26("div", { children: [
2648
- /* @__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 }),
2649
2728
  " ",
2650
- required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
2729
+ required && /* @__PURE__ */ jsx32("span", { className: "text-red-500", children: "*" })
2651
2730
  ] }),
2652
- /* @__PURE__ */ jsx30(
2731
+ /* @__PURE__ */ jsx32(
2653
2732
  Select5,
2654
2733
  {
2655
2734
  mode: "tags",
@@ -2668,10 +2747,10 @@ function SelectFieldTag({
2668
2747
  onClear
2669
2748
  }
2670
2749
  ),
2671
- /* @__PURE__ */ jsxs26("div", { children: [
2672
- /* @__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 }),
2673
2752
  " ",
2674
- 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 })
2675
2754
  ] })
2676
2755
  ] })
2677
2756
  }
@@ -2680,9 +2759,9 @@ function SelectFieldTag({
2680
2759
 
2681
2760
  // src/Select/SelectCustom/SelectCustom.tsx
2682
2761
  import { IconTrash } from "@tabler/icons-react";
2683
- import { Select as Select6, ConfigProvider as ConfigProvider15 } from "antd";
2762
+ import { Select as Select6, ConfigProvider as ConfigProvider16 } from "antd";
2684
2763
  import { useState as useState7 } from "react";
2685
- import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
2764
+ import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
2686
2765
  function SelectCustom({
2687
2766
  title = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
2688
2767
  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01",
@@ -2712,8 +2791,8 @@ function SelectCustom({
2712
2791
  });
2713
2792
  };
2714
2793
  const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
2715
- return /* @__PURE__ */ jsx31(
2716
- ConfigProvider15,
2794
+ return /* @__PURE__ */ jsx33(
2795
+ ConfigProvider16,
2717
2796
  {
2718
2797
  theme: {
2719
2798
  token: {
@@ -2721,13 +2800,13 @@ function SelectCustom({
2721
2800
  fontSize: 16
2722
2801
  }
2723
2802
  },
2724
- children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
2725
- /* @__PURE__ */ jsxs27("div", { children: [
2726
- /* @__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 }),
2727
2806
  " ",
2728
- required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
2807
+ required && /* @__PURE__ */ jsx33("span", { className: "text-red-500", children: "*" })
2729
2808
  ] }),
2730
- /* @__PURE__ */ jsx31(
2809
+ /* @__PURE__ */ jsx33(
2731
2810
  Select6,
2732
2811
  {
2733
2812
  value,
@@ -2738,20 +2817,20 @@ function SelectCustom({
2738
2817
  onClear
2739
2818
  }
2740
2819
  ),
2741
- /* @__PURE__ */ jsxs27("div", { children: [
2742
- /* @__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 }),
2743
2822
  " ",
2744
- 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 })
2745
2824
  ] }),
2746
- /* @__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: [
2747
- /* @__PURE__ */ jsxs27("div", { className: "flex flex-row gap-[8px]", children: [
2748
- /* @__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: [
2749
2828
  index + 1,
2750
2829
  "."
2751
2830
  ] }),
2752
- /* @__PURE__ */ jsx31("p", { children: v })
2831
+ /* @__PURE__ */ jsx33("p", { children: v })
2753
2832
  ] }),
2754
- /* @__PURE__ */ jsx31(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
2833
+ /* @__PURE__ */ jsx33(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
2755
2834
  ] }, index)) })
2756
2835
  ] })
2757
2836
  }
@@ -2759,7 +2838,7 @@ function SelectCustom({
2759
2838
  }
2760
2839
 
2761
2840
  // src/SortFilter/SortFilter.tsx
2762
- import { ConfigProvider as ConfigProvider16 } from "antd";
2841
+ import { ConfigProvider as ConfigProvider17 } from "antd";
2763
2842
  import { CalendarOutlined } from "@ant-design/icons";
2764
2843
 
2765
2844
  // src/SortFilter/DataMockSortFilter.ts
@@ -2792,7 +2871,7 @@ var quarters = [
2792
2871
  // src/SortFilter/SortFilter.tsx
2793
2872
  import { useState as useState8 } from "react";
2794
2873
  import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
2795
- import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
2874
+ import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
2796
2875
  function SortFilter({
2797
2876
  showYear = true,
2798
2877
  showQuarter = true,
@@ -2803,20 +2882,20 @@ function SortFilter({
2803
2882
  const [yearValue, setYearValue] = useState8();
2804
2883
  const [monthValue, setMonthValue] = useState8();
2805
2884
  const [quarterValue, setQuartersValue] = useState8();
2806
- return /* @__PURE__ */ jsx32(
2807
- ConfigProvider16,
2885
+ return /* @__PURE__ */ jsx34(
2886
+ ConfigProvider17,
2808
2887
  {
2809
2888
  theme: {
2810
2889
  token: {
2811
2890
  fontFamily: "Kanit"
2812
2891
  }
2813
2892
  },
2814
- children: /* @__PURE__ */ jsxs28("div", { className: "w-full flex items-center justify-between", children: [
2815
- /* @__PURE__ */ jsxs28("div", { className: "w-full flex gap-[10px]", children: [
2816
- 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(
2817
2896
  SelectField,
2818
2897
  {
2819
- prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
2898
+ prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
2820
2899
  onChange: setYearValue,
2821
2900
  options: years.map((s) => ({
2822
2901
  value: s.value,
@@ -2826,10 +2905,10 @@ function SortFilter({
2826
2905
  value: yearValue
2827
2906
  }
2828
2907
  ) }),
2829
- showMonth && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
2908
+ showMonth && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
2830
2909
  SelectField,
2831
2910
  {
2832
- prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
2911
+ prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
2833
2912
  onChange: setMonthValue,
2834
2913
  options: months.map((s) => ({
2835
2914
  value: s.value,
@@ -2839,10 +2918,10 @@ function SortFilter({
2839
2918
  placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
2840
2919
  }
2841
2920
  ) }),
2842
- showQuarter && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
2921
+ showQuarter && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
2843
2922
  SelectField,
2844
2923
  {
2845
- prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
2924
+ prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
2846
2925
  onChange: setQuartersValue,
2847
2926
  options: quarters.map((s) => ({
2848
2927
  value: s.value,
@@ -2853,8 +2932,8 @@ function SortFilter({
2853
2932
  }
2854
2933
  ) })
2855
2934
  ] }),
2856
- /* @__PURE__ */ jsxs28("div", { className: "flex gap-[10px]", children: [
2857
- /* @__PURE__ */ jsx32(
2935
+ /* @__PURE__ */ jsxs30("div", { className: "flex gap-[10px]", children: [
2936
+ /* @__PURE__ */ jsx34(
2858
2937
  IconSortDescending2,
2859
2938
  {
2860
2939
  size: 24,
@@ -2862,7 +2941,7 @@ function SortFilter({
2862
2941
  onClick: onSortClick
2863
2942
  }
2864
2943
  ),
2865
- /* @__PURE__ */ jsx32(
2944
+ /* @__PURE__ */ jsx34(
2866
2945
  IconFilter,
2867
2946
  {
2868
2947
  size: 24,
@@ -2879,7 +2958,7 @@ function SortFilter({
2879
2958
  // src/Upload/FileUploader/FileUploader.tsx
2880
2959
  import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
2881
2960
  import { useRef as useRef2, useState as useState9 } from "react";
2882
- 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";
2883
2962
  function FileUploader({
2884
2963
  onUpload,
2885
2964
  onError,
@@ -2950,10 +3029,10 @@ function FileUploader({
2950
3029
  }
2951
3030
  if (inputRef.current) inputRef.current.value = "";
2952
3031
  };
2953
- return /* @__PURE__ */ jsxs29("div", { className: "w-full", children: [
2954
- label && /* @__PURE__ */ jsx33("p", { className: "body-1", children: label }),
2955
- /* @__PURE__ */ jsxs29("div", { children: [
2956
- 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(
2957
3036
  "button",
2958
3037
  {
2959
3038
  type: "button",
@@ -2961,15 +3040,15 @@ function FileUploader({
2961
3040
  className: `h-[34px] flex justify-center items-center gap-2 w-full rounded-[2px] border border-gray-200 body-1
2962
3041
  ${disabled ? "cursor-not-allowed text-gray-400 bg-gray-100" : "cursor-pointer hover:text-primary-400 hover:border-primary-200 duration-300"}`,
2963
3042
  disabled: disabled ? disabled : uploading,
2964
- children: uploading ? /* @__PURE__ */ jsxs29(Fragment5, { children: [
2965
- /* @__PURE__ */ jsx33(Loader, { size: 15 }),
3043
+ children: uploading ? /* @__PURE__ */ jsxs31(Fragment5, { children: [
3044
+ /* @__PURE__ */ jsx35(Loader, { size: 15 }),
2966
3045
  " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
2967
- ] }) : /* @__PURE__ */ jsxs29(Fragment5, { children: [
2968
- /* @__PURE__ */ jsx33(IconUpload, { size: 15, className: "text-gray-400" }),
3046
+ ] }) : /* @__PURE__ */ jsxs31(Fragment5, { children: [
3047
+ /* @__PURE__ */ jsx35(IconUpload, { size: 15, className: "text-gray-400" }),
2969
3048
  " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
2970
3049
  ] })
2971
3050
  }
2972
- ) : /* @__PURE__ */ jsx33(
3051
+ ) : /* @__PURE__ */ jsx35(
2973
3052
  "div",
2974
3053
  {
2975
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
@@ -2983,17 +3062,17 @@ function FileUploader({
2983
3062
  },
2984
3063
  onDragLeave: () => setDragActive(false),
2985
3064
  onDrop: handleDrop,
2986
- children: uploading ? /* @__PURE__ */ jsxs29("div", { className: "flex justify-center items-center gap-2", children: [
2987
- /* @__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 }),
2988
3067
  " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
2989
- ] }) : /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2", children: [
2990
- /* @__PURE__ */ jsx33(IconUpload, { size: 20 }),
2991
- /* @__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" }),
2992
- /* @__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" })
2993
3072
  ] })
2994
3073
  }
2995
3074
  ),
2996
- /* @__PURE__ */ jsx33(
3075
+ /* @__PURE__ */ jsx35(
2997
3076
  "input",
2998
3077
  {
2999
3078
  type: "file",
@@ -3006,13 +3085,13 @@ function FileUploader({
3006
3085
  }
3007
3086
  )
3008
3087
  ] }),
3009
- description && /* @__PURE__ */ jsx33("p", { className: "text-gray-400 body-4", children: description }),
3010
- /* @__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: [
3011
- /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
3012
- /* @__PURE__ */ jsx33("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx33(IconPaperclip, { size: 15 }) }),
3013
- /* @__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 })
3014
3093
  ] }),
3015
- /* @__PURE__ */ jsx33(
3094
+ /* @__PURE__ */ jsx35(
3016
3095
  IconTrash2,
3017
3096
  {
3018
3097
  size: 20,
@@ -3046,9 +3125,9 @@ function messageLoading(content, duration) {
3046
3125
  }
3047
3126
 
3048
3127
  // src/Breadcrumb/Breadcrumb.tsx
3049
- import { ConfigProvider as ConfigProvider17 } from "antd";
3128
+ import { ConfigProvider as ConfigProvider18 } from "antd";
3050
3129
  import { Breadcrumb } from "antd";
3051
- import { jsx as jsx34 } from "react/jsx-runtime";
3130
+ import { jsx as jsx36 } from "react/jsx-runtime";
3052
3131
  function Breadcrumbs({
3053
3132
  items,
3054
3133
  separator,
@@ -3056,15 +3135,15 @@ function Breadcrumbs({
3056
3135
  classname,
3057
3136
  params
3058
3137
  }) {
3059
- return /* @__PURE__ */ jsx34(
3060
- ConfigProvider17,
3138
+ return /* @__PURE__ */ jsx36(
3139
+ ConfigProvider18,
3061
3140
  {
3062
3141
  theme: {
3063
3142
  token: {
3064
3143
  fontFamily: "Kanit"
3065
3144
  }
3066
3145
  },
3067
- children: /* @__PURE__ */ jsx34(
3146
+ children: /* @__PURE__ */ jsx36(
3068
3147
  Breadcrumb,
3069
3148
  {
3070
3149
  items,
@@ -3079,8 +3158,8 @@ function Breadcrumbs({
3079
3158
  }
3080
3159
 
3081
3160
  // src/HeadingPage/HeadingPage.tsx
3082
- import { ConfigProvider as ConfigProvider18 } from "antd";
3083
- 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";
3084
3163
  function HeadingPage({ Heading }) {
3085
3164
  const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
3086
3165
  weekday: "long",
@@ -3088,17 +3167,17 @@ function HeadingPage({ Heading }) {
3088
3167
  month: "long",
3089
3168
  year: "numeric"
3090
3169
  });
3091
- return /* @__PURE__ */ jsx35(
3092
- ConfigProvider18,
3170
+ return /* @__PURE__ */ jsx37(
3171
+ ConfigProvider19,
3093
3172
  {
3094
3173
  theme: {
3095
3174
  token: {
3096
3175
  fontFamily: "Kanit"
3097
3176
  }
3098
3177
  },
3099
- children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
3100
- /* @__PURE__ */ jsx35("p", { className: "headline-5", children: Heading }),
3101
- /* @__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: [
3102
3181
  " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
3103
3182
  today
3104
3183
  ] })
@@ -3108,9 +3187,9 @@ function HeadingPage({ Heading }) {
3108
3187
  }
3109
3188
 
3110
3189
  // src/Progress/ProgressBar.tsx
3111
- import { ConfigProvider as ConfigProvider19, Progress } from "antd";
3190
+ import { ConfigProvider as ConfigProvider20, Progress } from "antd";
3112
3191
  import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
3113
- import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
3192
+ import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
3114
3193
  function ProgressBar({
3115
3194
  percent = 0,
3116
3195
  size = "default",
@@ -3133,9 +3212,7 @@ function ProgressBar({
3133
3212
  strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
3134
3213
  }
3135
3214
  useEffect2(() => {
3136
- const inner = progressRef.current?.querySelector(
3137
- ".ant-progress-inner"
3138
- );
3215
+ const inner = progressRef.current?.querySelector(".ant-progress-inner");
3139
3216
  if (!inner) return;
3140
3217
  const observer = new ResizeObserver(() => {
3141
3218
  setBarWidth(inner.offsetWidth);
@@ -3143,16 +3220,16 @@ function ProgressBar({
3143
3220
  observer.observe(inner);
3144
3221
  return () => observer.disconnect();
3145
3222
  }, []);
3146
- return /* @__PURE__ */ jsx36(
3147
- ConfigProvider19,
3223
+ return /* @__PURE__ */ jsx38(
3224
+ ConfigProvider20,
3148
3225
  {
3149
3226
  theme: {
3150
3227
  token: {
3151
3228
  fontFamily: "Kanit"
3152
3229
  }
3153
3230
  },
3154
- children: /* @__PURE__ */ jsxs31("div", { className: "relative w-full", ref: progressRef, children: [
3155
- /* @__PURE__ */ jsx36(
3231
+ children: /* @__PURE__ */ jsxs33("div", { className: "relative w-full", ref: progressRef, children: [
3232
+ /* @__PURE__ */ jsx38(
3156
3233
  Progress,
3157
3234
  {
3158
3235
  className: "w-full",
@@ -3168,7 +3245,7 @@ function ProgressBar({
3168
3245
  strokeColor
3169
3246
  }
3170
3247
  ),
3171
- barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx36(
3248
+ barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx38(
3172
3249
  "div",
3173
3250
  {
3174
3251
  className: "checkpoint absolute top-0",
@@ -3190,7 +3267,7 @@ function ProgressBar({
3190
3267
  }
3191
3268
 
3192
3269
  // src/KpiSection/KpiSection.tsx
3193
- import { ConfigProvider as ConfigProvider20, message } from "antd";
3270
+ import { ConfigProvider as ConfigProvider21, message } from "antd";
3194
3271
  import { useEffect as useEffect3, useState as useState12 } from "react";
3195
3272
 
3196
3273
  // src/KpiSection/hooks/useGetKpiSection.ts
@@ -3341,7 +3418,7 @@ function useGetKpiSection() {
3341
3418
 
3342
3419
  // src/KpiSection/KpiSection.tsx
3343
3420
  import { IconCheck as IconCheck2, IconCirclePlus, IconPencil, IconTrash as IconTrash3, IconX as IconX2 } from "@tabler/icons-react";
3344
- 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";
3345
3422
  function KpiSection({ type, onChangeKpiList }) {
3346
3423
  const {
3347
3424
  handleAddKpi,
@@ -3371,8 +3448,8 @@ function KpiSection({ type, onChangeKpiList }) {
3371
3448
  onChangeKpiList(kpiList);
3372
3449
  }
3373
3450
  }, [kpiList]);
3374
- return /* @__PURE__ */ jsx37(
3375
- ConfigProvider20,
3451
+ return /* @__PURE__ */ jsx39(
3452
+ ConfigProvider21,
3376
3453
  {
3377
3454
  theme: {
3378
3455
  token: {
@@ -3380,11 +3457,11 @@ function KpiSection({ type, onChangeKpiList }) {
3380
3457
  fontSize: 16
3381
3458
  }
3382
3459
  },
3383
- children: /* @__PURE__ */ jsxs32("div", { className: "container-input", children: [
3460
+ children: /* @__PURE__ */ jsxs34("div", { className: "container-input", children: [
3384
3461
  messageContainer,
3385
- type === "number" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
3386
- /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
3387
- /* @__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(
3388
3465
  InputField,
3389
3466
  {
3390
3467
  value: nameKpi,
@@ -3396,7 +3473,7 @@ function KpiSection({ type, onChangeKpiList }) {
3396
3473
  error: errors.nameKpi
3397
3474
  }
3398
3475
  ),
3399
- /* @__PURE__ */ jsx37(
3476
+ /* @__PURE__ */ jsx39(
3400
3477
  InputField,
3401
3478
  {
3402
3479
  value: kpiValue,
@@ -3420,7 +3497,7 @@ function KpiSection({ type, onChangeKpiList }) {
3420
3497
  error: errors.kpiValue
3421
3498
  }
3422
3499
  ),
3423
- /* @__PURE__ */ jsx37(
3500
+ /* @__PURE__ */ jsx39(
3424
3501
  InputField,
3425
3502
  {
3426
3503
  value: unitValue,
@@ -3432,7 +3509,7 @@ function KpiSection({ type, onChangeKpiList }) {
3432
3509
  error: errors.unitValue
3433
3510
  }
3434
3511
  ),
3435
- /* @__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(
3436
3513
  IconCirclePlus,
3437
3514
  {
3438
3515
  className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3441,17 +3518,17 @@ function KpiSection({ type, onChangeKpiList }) {
3441
3518
  }
3442
3519
  ) })
3443
3520
  ] }),
3444
- /* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32(
3521
+ /* @__PURE__ */ jsx39("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs34(
3445
3522
  "div",
3446
3523
  {
3447
3524
  className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
3448
3525
  children: [
3449
- /* @__PURE__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
3526
+ /* @__PURE__ */ jsxs34("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
3450
3527
  index + 1,
3451
3528
  "."
3452
3529
  ] }),
3453
- kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
3454
- /* @__PURE__ */ jsx37(
3530
+ kpi.isEditing ? /* @__PURE__ */ jsxs34(Fragment6, { children: [
3531
+ /* @__PURE__ */ jsx39(
3455
3532
  InputField,
3456
3533
  {
3457
3534
  value: kpi.name,
@@ -3461,7 +3538,7 @@ function KpiSection({ type, onChangeKpiList }) {
3461
3538
  error: itemErrors[kpi.id]?.name
3462
3539
  }
3463
3540
  ),
3464
- /* @__PURE__ */ jsx37(
3541
+ /* @__PURE__ */ jsx39(
3465
3542
  InputField,
3466
3543
  {
3467
3544
  value: kpi.value?.toString(),
@@ -3486,7 +3563,7 @@ function KpiSection({ type, onChangeKpiList }) {
3486
3563
  error: itemErrors[kpi.id]?.value
3487
3564
  }
3488
3565
  ),
3489
- /* @__PURE__ */ jsx37(
3566
+ /* @__PURE__ */ jsx39(
3490
3567
  InputField,
3491
3568
  {
3492
3569
  value: kpi.unit,
@@ -3496,29 +3573,29 @@ function KpiSection({ type, onChangeKpiList }) {
3496
3573
  error: itemErrors[kpi.id]?.unit
3497
3574
  }
3498
3575
  ),
3499
- /* @__PURE__ */ jsxs32(
3576
+ /* @__PURE__ */ jsxs34(
3500
3577
  "div",
3501
3578
  {
3502
3579
  className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
3503
3580
  children: [
3504
- /* @__PURE__ */ jsx37(
3581
+ /* @__PURE__ */ jsx39(
3505
3582
  IconCheck2,
3506
3583
  {
3507
3584
  className: "w-[30px] h-[30px] cursor-pointer",
3508
3585
  onClick: () => handleSave(kpi.id, type)
3509
3586
  }
3510
3587
  ),
3511
- /* @__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) })
3512
3589
  ]
3513
3590
  }
3514
3591
  )
3515
- ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
3516
- /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
3517
- /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.value }),
3518
- /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.unit }),
3519
- /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
3520
- /* @__PURE__ */ jsx37(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
3521
- /* @__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) })
3522
3599
  ] })
3523
3600
  ] })
3524
3601
  ]
@@ -3526,9 +3603,9 @@ function KpiSection({ type, onChangeKpiList }) {
3526
3603
  kpi.id
3527
3604
  )) })
3528
3605
  ] }),
3529
- type === "text" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
3530
- /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
3531
- /* @__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(
3532
3609
  InputField,
3533
3610
  {
3534
3611
  value: nameKpi,
@@ -3540,7 +3617,7 @@ function KpiSection({ type, onChangeKpiList }) {
3540
3617
  error: errors.nameKpi
3541
3618
  }
3542
3619
  ),
3543
- /* @__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(
3544
3621
  IconCirclePlus,
3545
3622
  {
3546
3623
  className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3549,13 +3626,13 @@ function KpiSection({ type, onChangeKpiList }) {
3549
3626
  }
3550
3627
  ) })
3551
3628
  ] }),
3552
- /* @__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: [
3553
- /* @__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: [
3554
3631
  index + 1,
3555
3632
  "."
3556
3633
  ] }),
3557
- kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
3558
- /* @__PURE__ */ jsx37(
3634
+ kpi.isEditing ? /* @__PURE__ */ jsxs34(Fragment6, { children: [
3635
+ /* @__PURE__ */ jsx39(
3559
3636
  InputField,
3560
3637
  {
3561
3638
  value: kpi.name,
@@ -3565,27 +3642,27 @@ function KpiSection({ type, onChangeKpiList }) {
3565
3642
  error: itemErrors[kpi.id]?.name
3566
3643
  }
3567
3644
  ),
3568
- /* @__PURE__ */ jsxs32(
3645
+ /* @__PURE__ */ jsxs34(
3569
3646
  "div",
3570
3647
  {
3571
3648
  className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
3572
3649
  children: [
3573
- /* @__PURE__ */ jsx37(
3650
+ /* @__PURE__ */ jsx39(
3574
3651
  IconCheck2,
3575
3652
  {
3576
3653
  className: "w-[30px] h-[30px] cursor-pointer",
3577
3654
  onClick: () => handleSave(kpi.id, type)
3578
3655
  }
3579
3656
  ),
3580
- /* @__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) })
3581
3658
  ]
3582
3659
  }
3583
3660
  )
3584
- ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
3585
- /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
3586
- /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
3587
- /* @__PURE__ */ jsx37(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
3588
- /* @__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) })
3589
3666
  ] })
3590
3667
  ] })
3591
3668
  ] }, kpi.id)) })
@@ -3594,7 +3671,15 @@ function KpiSection({ type, onChangeKpiList }) {
3594
3671
  }
3595
3672
  );
3596
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
+ }
3597
3681
  export {
3682
+ AntDModal,
3598
3683
  AntDataTable,
3599
3684
  Breadcrumbs,
3600
3685
  Calendar,
@@ -3609,6 +3694,7 @@ export {
3609
3694
  GhostButton,
3610
3695
  HeadingPage,
3611
3696
  InputField,
3697
+ InputFieldNumber,
3612
3698
  KpiSection,
3613
3699
  Loader,
3614
3700
  MenuNavBar,
@@ -3626,6 +3712,7 @@ export {
3626
3712
  Sidebar,
3627
3713
  SortFilter,
3628
3714
  Switch,
3715
+ TabSelectionButton,
3629
3716
  TextAreaInput,
3630
3717
  TextInput,
3631
3718
  TimePickerBasic,