master-components-react-ts 2.1.6 → 2.1.8

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 (69) hide show
  1. package/dist/index.js +2894 -32
  2. package/dist/style.css +2249 -0
  3. package/package.json +2 -2
  4. package/dist/_virtual/_commonjsHelpers.js +0 -8
  5. package/dist/_virtual/customParseFormat.js +0 -4
  6. package/dist/assets/Icons/IconArrowUp.js +0 -13
  7. package/dist/assets/Icons/IconCalendar.js +0 -32
  8. package/dist/assets/Icons/IconCheck.js +0 -15
  9. package/dist/assets/Icons/IconCheckCircle.js +0 -16
  10. package/dist/assets/Icons/IconCheckmark.js +0 -15
  11. package/dist/assets/Icons/IconCircularLoading.js +0 -36
  12. package/dist/assets/Icons/IconClose.js +0 -31
  13. package/dist/assets/Icons/IconCloseBackground.js +0 -15
  14. package/dist/assets/Icons/IconCloseCircle.js +0 -15
  15. package/dist/assets/Icons/IconErrorDash.js +0 -15
  16. package/dist/assets/Icons/IconExclamation.js +0 -15
  17. package/dist/assets/Icons/IconLeft.js +0 -13
  18. package/dist/assets/Icons/IconLoading.js +0 -22
  19. package/dist/assets/Icons/IconMinus.js +0 -7
  20. package/dist/assets/Icons/IconRadioChecked.js +0 -19
  21. package/dist/assets/Icons/IconRadioCheckedDisabled.js +0 -19
  22. package/dist/assets/Icons/IconRadioUnchecked.js +0 -16
  23. package/dist/assets/Icons/IconRadioUncheckedDisabled.js +0 -16
  24. package/dist/assets/Icons/IconRight.js +0 -13
  25. package/dist/assets/Icons/IconSave.js +0 -16
  26. package/dist/assets/Icons/IconSearch.js +0 -26
  27. package/dist/assets/Icons/IconSuccess.js +0 -15
  28. package/dist/assets/Icons/IconTrash.js +0 -16
  29. package/dist/assets/Inter_24pt-Medium-C1cYvkz2.woff2 +0 -0
  30. package/dist/assets/Inter_24pt-Regular-C7SEt4-L.woff2 +0 -0
  31. package/dist/assets/Inter_24pt-SemiBold-DIQUEucn.woff2 +0 -0
  32. package/dist/assets/style-CXs6Ghy1.css +0 -2249
  33. package/dist/components/ActionDropdown/ActionDropdown.js +0 -74
  34. package/dist/components/ActionDropdown/ActionDropdown.module.scss.js +0 -29
  35. package/dist/components/Checkbox/Checkbox.js +0 -54
  36. package/dist/components/Checkbox/Checkbox.module.scss.js +0 -26
  37. package/dist/components/DatePicker/Calendar.js +0 -437
  38. package/dist/components/DatePicker/Calendar.module.scss.js +0 -83
  39. package/dist/components/DatePicker/DatePicker.js +0 -211
  40. package/dist/components/DatePicker/Datepicker.module.scss.js +0 -17
  41. package/dist/components/Dropdown/Dropdown.js +0 -337
  42. package/dist/components/Dropdown/Dropdown.module.scss.js +0 -74
  43. package/dist/components/FormInput/FormInput.js +0 -151
  44. package/dist/components/FormInput/FormInput.module.scss.js +0 -62
  45. package/dist/components/InlineLoading/InlineLoading.js +0 -24
  46. package/dist/components/InlineLoading/InlineLoading.module.scss.js +0 -11
  47. package/dist/components/MainButton/MainButton.js +0 -72
  48. package/dist/components/MainButton/MainButton.module.scss.js +0 -56
  49. package/dist/components/NotificationToast/NotificationContext.js +0 -57
  50. package/dist/components/NotificationToast/NotificationToast.js +0 -66
  51. package/dist/components/NotificationToast/NotificationToast.module.scss.js +0 -59
  52. package/dist/components/NotificationToast/createNotificationToast.js +0 -10
  53. package/dist/components/Popup/Popup.js +0 -116
  54. package/dist/components/Popup/Popup.module.scss.js +0 -41
  55. package/dist/components/Radio/Radio.js +0 -46
  56. package/dist/components/Radio/Radio.module.scss.js +0 -8
  57. package/dist/components/Skeleton/Skeleton.js +0 -8
  58. package/dist/components/Skeleton/Skeleton.module.scss.js +0 -20
  59. package/dist/components/Textarea/Textarea.js +0 -149
  60. package/dist/components/Textarea/Textarea.module.scss.js +0 -41
  61. package/dist/components/TimePicker/TimePicker.js +0 -172
  62. package/dist/components/TimePicker/TimePicker.module.scss.js +0 -50
  63. package/dist/components/Toggle/Toggle.js +0 -20
  64. package/dist/components/Toggle/Toggle.module.scss.js +0 -29
  65. package/dist/components/Tooltip/Tooltip.js +0 -153
  66. package/dist/components/Tooltip/Tooltip.module.scss.js +0 -35
  67. package/dist/context/NamespaceContext.js +0 -7
  68. package/dist/node_modules/dayjs/plugin/customParseFormat.js +0 -129
  69. package/dist/utils/Helpers.js +0 -15
package/dist/index.js CHANGED
@@ -1,34 +1,2896 @@
1
- import { default as default2 } from "./components/MainButton/MainButton.js";
2
- import { default as default3 } from "./components/FormInput/FormInput.js";
3
- import { default as default4 } from "./components/Textarea/Textarea.js";
4
- import { default as default5 } from "./components/Toggle/Toggle.js";
5
- import { default as default6 } from "./components/Checkbox/Checkbox.js";
6
- import { default as default7 } from "./components/Dropdown/Dropdown.js";
7
- import { default as default8 } from "./components/Radio/Radio.js";
8
- import { default as default9 } from "./components/Tooltip/Tooltip.js";
9
- import { default as default10 } from "./components/Popup/Popup.js";
10
- import { default as default11 } from "./components/NotificationToast/createNotificationToast.js";
11
- import { default as default12 } from "./components/NotificationToast/NotificationContext.js";
12
- import { default as default13 } from "./components/TimePicker/TimePicker.js";
13
- import { default as default14 } from "./components/DatePicker/DatePicker.js";
14
- import { default as default15 } from "./components/Skeleton/Skeleton.js";
15
- import { default as default16 } from "./components/ActionDropdown/ActionDropdown.js";
16
- import { default as default17 } from "./components/InlineLoading/InlineLoading.js";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useState, useRef, useEffect, useContext, createContext, useCallback } from "react";
3
+ import dayjs from "dayjs";
4
+ const CIRCLE_RADIUS = 50 / 2;
5
+ const IconCircularLoading = ({ size = 24, strokeWidth = 5, linecap = "round", duration = 1, stroke = "#2753dd", ...rest }) => {
6
+ const center = CIRCLE_RADIUS;
7
+ return /* @__PURE__ */ jsx("svg", { ...rest, viewBox: `0 0 ${CIRCLE_RADIUS * 2} ${CIRCLE_RADIUS * 2}`, width: size, height: size, children: /* @__PURE__ */ jsxs(
8
+ "circle",
9
+ {
10
+ fill: "none",
11
+ stroke,
12
+ strokeWidth,
13
+ strokeLinecap: linecap,
14
+ cx: CIRCLE_RADIUS,
15
+ cy: CIRCLE_RADIUS,
16
+ r: CIRCLE_RADIUS - strokeWidth,
17
+ children: [
18
+ /* @__PURE__ */ jsx(
19
+ "animateTransform",
20
+ {
21
+ attributeName: "transform",
22
+ attributeType: "XML",
23
+ type: "rotate",
24
+ from: `0 ${center} ${center}`,
25
+ to: `360 ${center} ${center}`,
26
+ dur: `${duration * 4 / 3}s`,
27
+ repeatCount: "indefinite"
28
+ }
29
+ ),
30
+ /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dasharray", values: "1,200; 89,200; 89 200;", dur: `${duration}s`, repeatCount: "indefinite" }),
31
+ /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", values: "0;-35;-124;", dur: `${duration}s`, repeatCount: "indefinite" })
32
+ ]
33
+ }
34
+ ) });
35
+ };
36
+ const IconSearch = ({ size = "15", color = "#717680" }) => {
37
+ return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [
38
+ /* @__PURE__ */ jsx(
39
+ "path",
40
+ {
41
+ fillRule: "evenodd",
42
+ clipRule: "evenodd",
43
+ d: "M2.16602 7.16797C2.16602 4.41047 4.40852 2.16797 7.16602 2.16797C9.92352 2.16797 12.166 4.41047 12.166 7.16797C12.166 9.92547 9.92352 12.168 7.16602 12.168C4.40852 12.168 2.16602 9.92547 2.16602 7.16797ZM15.2558 14.0775L12.4267 11.2475C13.3042 10.1192 13.8333 8.705 13.8333 7.16667C13.8333 3.49083 10.8425 0.5 7.16667 0.5C3.49083 0.5 0.5 3.49083 0.5 7.16667C0.5 10.8425 3.49083 13.8333 7.16667 13.8333C8.705 13.8333 10.1192 13.3042 11.2475 12.4267L14.0775 15.2558C14.24 15.4183 14.4533 15.5 14.6667 15.5C14.88 15.5 15.0933 15.4183 15.2558 15.2558C15.5817 14.93 15.5817 14.4033 15.2558 14.0775Z",
44
+ fill: color
45
+ }
46
+ ),
47
+ /* @__PURE__ */ jsx(
48
+ "path",
49
+ {
50
+ fillRule: "evenodd",
51
+ clipRule: "evenodd",
52
+ d: "M2.16602 7.16797C2.16602 4.41047 4.40852 2.16797 7.16602 2.16797C9.92352 2.16797 12.166 4.41047 12.166 7.16797C12.166 9.92547 9.92352 12.168 7.16602 12.168C4.40852 12.168 2.16602 9.92547 2.16602 7.16797ZM15.2558 14.0775L12.4267 11.2475C13.3042 10.1192 13.8333 8.705 13.8333 7.16667C13.8333 3.49083 10.8425 0.5 7.16667 0.5C3.49083 0.5 0.5 3.49083 0.5 7.16667C0.5 10.8425 3.49083 13.8333 7.16667 13.8333C8.705 13.8333 10.1192 13.3042 11.2475 12.4267L14.0775 15.2558C14.24 15.4183 14.4533 15.5 14.6667 15.5C14.88 15.5 15.0933 15.4183 15.2558 15.2558C15.5817 14.93 15.5817 14.4033 15.2558 14.0775Z",
53
+ fill: color
54
+ }
55
+ )
56
+ ] });
57
+ };
58
+ const IconClose = ({
59
+ width = "14",
60
+ height = "14",
61
+ color = "#A4A7AE",
62
+ xmlns = "http://www.w3.org/2000/svg",
63
+ viewBox = "0 0 14 14",
64
+ fill = "none",
65
+ d = "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5",
66
+ stroke = "#A4A7AE",
67
+ strokeWidth = "1.66667",
68
+ strokeLinecap = "round",
69
+ strokeLinejoin = "round"
70
+ }) => {
71
+ return /* @__PURE__ */ jsx("svg", { xmlns, width, height, viewBox, fill, children: /* @__PURE__ */ jsx("path", { d, stroke, strokeWidth, strokeLinecap, strokeLinejoin }) });
72
+ };
73
+ const IconCloseBlack = ({ color = "#131314" }) => {
74
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", color, children: /* @__PURE__ */ jsx(
75
+ "path",
76
+ {
77
+ fillRule: "evenodd",
78
+ clipRule: "evenodd",
79
+ d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L7.41421 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3166 12.0976 10.6834 12.0976 10.2929 11.7071L6 7.41421L1.70711 11.7071C1.31658 12.0976 0.683417 12.0976 0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929L4.58579 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z",
80
+ fill: color
81
+ }
82
+ ) });
83
+ };
84
+ const IconCloseCircle = ({ width = "20", height = "20", color = "#C1C2C7" }) => {
85
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
86
+ "path",
87
+ {
88
+ fillRule: "evenodd",
89
+ clipRule: "evenodd",
90
+ d: "M9.99996 18.3334C14.6023 18.3334 18.3333 14.6024 18.3333 10C18.3333 5.39765 14.6023 1.66669 9.99996 1.66669C5.39759 1.66669 1.66663 5.39765 1.66663 10C1.66663 14.6024 5.39759 18.3334 9.99996 18.3334ZM8.08922 6.91077C7.76378 6.58533 7.23614 6.58533 6.9107 6.91077C6.58527 7.2362 6.58527 7.76384 6.9107 8.08928L8.82145 10L6.9107 11.9108C6.58527 12.2362 6.58527 12.7638 6.9107 13.0893C7.23614 13.4147 7.76378 13.4147 8.08922 13.0893L9.99996 11.1785L11.9107 13.0893C12.2361 13.4147 12.7638 13.4147 13.0892 13.0893C13.4147 12.7638 13.4147 12.2362 13.0892 11.9108L11.1785 10L13.0892 8.08928C13.4147 7.76384 13.4147 7.2362 13.0892 6.91077C12.7638 6.58533 12.2361 6.58533 11.9107 6.91077L9.99996 8.82151L8.08922 6.91077Z",
91
+ fill: color
92
+ }
93
+ ) });
94
+ };
95
+ const IconCheckmark = ({ width = "8", height = "6", color = "#ffffff" }) => {
96
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 8 6", fill: "none", children: /* @__PURE__ */ jsx(
97
+ "path",
98
+ {
99
+ fillRule: "evenodd",
100
+ clipRule: "evenodd",
101
+ d: "M7.7 0.3C7.3 -0.1 6.7 -0.1 6.3 0.3L3 3.6L1.7 2.3C1.3 1.9 0.7 1.9 0.3 2.3C-0.1 2.7 -0.1 3.3 0.3 3.7L2.3 5.7C2.5 5.9 2.7 6 3 6C3.3 6 3.5 5.9 3.7 5.7L7.7 1.7C8.1 1.3 8.1 0.7 7.7 0.3Z",
102
+ fill: color
103
+ }
104
+ ) });
105
+ };
106
+ const IconMinus = ({ width = "8", height = "2", color = "#ffffff" }) => {
107
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 8 2", fill: "none", children: /* @__PURE__ */ jsx("rect", { width, height, rx: "1", fill: color }) });
108
+ };
109
+ const IconRadioChecked = ({ size = "24", color = "#0058FF" }) => {
110
+ return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: [
111
+ /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_118_485)", children: [
112
+ /* @__PURE__ */ jsx(
113
+ "path",
114
+ {
115
+ d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
116
+ fill: color
117
+ }
118
+ ),
119
+ /* @__PURE__ */ jsx("path", { d: "M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z", fill: color })
120
+ ] }),
121
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_118_485", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
122
+ ] });
123
+ };
124
+ const IconRadioUnchecked = ({ size = "24", color = "#C1C2C7" }) => {
125
+ return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: [
126
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_118_495)", children: /* @__PURE__ */ jsx(
127
+ "path",
128
+ {
129
+ d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
130
+ fill: color
131
+ }
132
+ ) }),
133
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_118_495", children: /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: "white" }) }) })
134
+ ] });
135
+ };
136
+ const IconRadioCheckedDisabled = ({ size = "24", color = "#95969C" }) => {
137
+ return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: [
138
+ /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_118_531)", children: [
139
+ /* @__PURE__ */ jsx(
140
+ "path",
141
+ {
142
+ d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
143
+ fill: color
144
+ }
145
+ ),
146
+ /* @__PURE__ */ jsx("path", { d: "M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z", fill: color })
147
+ ] }),
148
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_118_531", children: /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: "white" }) }) })
149
+ ] });
150
+ };
151
+ const IconRadioUncheckedDisabled = ({ size = "24", color = "#C1C2C7" }) => {
152
+ return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: [
153
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_118_495)", children: /* @__PURE__ */ jsx(
154
+ "path",
155
+ {
156
+ d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
157
+ fill: color
158
+ }
159
+ ) }),
160
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_118_495", children: /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: "white" }) }) })
161
+ ] });
162
+ };
163
+ const IconArrowUp = ({ width = "10", height = "6", color = "#131314" }) => {
164
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: `0 0 ${width} ${height}`, fill: "none", children: /* @__PURE__ */ jsx(
165
+ "path",
166
+ {
167
+ d: "M4.75065 3.75401L8.00065 0.504008C8.15343 0.35123 8.34787 0.274841 8.58398 0.274841C8.8201 0.274841 9.01454 0.35123 9.16732 0.504008C9.3201 0.656786 9.39648 0.85123 9.39648 1.08734C9.39648 1.32345 9.3201 1.5179 9.16732 1.67067L5.33398 5.50401C5.25065 5.58734 5.16037 5.64637 5.06315 5.68109C4.96593 5.71581 4.86176 5.73317 4.75065 5.73317C4.63954 5.73317 4.53537 5.71581 4.43815 5.68109C4.34093 5.64637 4.25065 5.58734 4.16732 5.50401L0.333984 1.67067C0.181207 1.5179 0.104817 1.32345 0.104817 1.08734C0.104817 0.85123 0.181207 0.656785 0.333984 0.504008C0.486762 0.35123 0.681207 0.274841 0.917317 0.274841C1.15343 0.274841 1.34787 0.35123 1.50065 0.504008L4.75065 3.75401Z",
168
+ fill: color
169
+ }
170
+ ) });
171
+ };
172
+ const IconCheckCircle = ({ width = "24", height = "24", color = "#079455" }) => {
173
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
174
+ "path",
175
+ {
176
+ d: "M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
177
+ stroke: color,
178
+ strokeWidth: "2",
179
+ strokeLinecap: "round",
180
+ strokeLinejoin: "round"
181
+ }
182
+ ) });
183
+ };
184
+ const IconSave = ({ size = "24", color = "#DC6803" }) => {
185
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
186
+ "path",
187
+ {
188
+ d: "M7 3V6.4C7 6.96005 7 7.24008 7.10899 7.45399C7.20487 7.64215 7.35785 7.79513 7.54601 7.89101C7.75992 8 8.03995 8 8.6 8H15.4C15.9601 8 16.2401 8 16.454 7.89101C16.6422 7.79513 16.7951 7.64215 16.891 7.45399C17 7.24008 17 6.96005 17 6.4V4M17 21V14.6C17 14.0399 17 13.7599 16.891 13.546C16.7951 13.3578 16.6422 13.2049 16.454 13.109C16.2401 13 15.9601 13 15.4 13H8.6C8.03995 13 7.75992 13 7.54601 13.109C7.35785 13.2049 7.20487 13.3578 7.10899 13.546C7 13.7599 7 14.0399 7 14.6V21M21 9.32548V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H14.6745C15.1637 3 15.4083 3 15.6385 3.05526C15.8425 3.10425 16.0376 3.18506 16.2166 3.29472C16.4184 3.4184 16.5914 3.59135 16.9373 3.93726L20.0627 7.06274C20.4086 7.40865 20.5816 7.5816 20.7053 7.78343C20.8149 7.96237 20.8957 8.15746 20.9447 8.36154C21 8.59171 21 8.8363 21 9.32548Z",
189
+ stroke: color,
190
+ strokeWidth: "2",
191
+ strokeLinecap: "round",
192
+ strokeLinejoin: "round"
193
+ }
194
+ ) });
195
+ };
196
+ const IconTrash = ({ width = "24", color = "#D92D20" }) => {
197
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height: width, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
198
+ "path",
199
+ {
200
+ d: "M16 6V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6",
201
+ stroke: color,
202
+ strokeWidth: "2",
203
+ strokeLinecap: "round",
204
+ strokeLinejoin: "round"
205
+ }
206
+ ) });
207
+ };
208
+ const IconExclamation = ({ color = "#ffffff" }) => {
209
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
210
+ "path",
211
+ {
212
+ fillRule: "evenodd",
213
+ clipRule: "evenodd",
214
+ d: "M1.66699 9.99999C1.66699 5.39762 5.39795 1.66666 10.0003 1.66666C14.6027 1.66666 18.3337 5.39762 18.3337 9.99999C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 9.99999ZM10.0003 5.83332C10.4606 5.83332 10.8337 6.20642 10.8337 6.66666V9.99999C10.8337 10.4602 10.4606 10.8333 10.0003 10.8333C9.54009 10.8333 9.16699 10.4602 9.16699 9.99999V6.66666C9.16699 6.20642 9.54009 5.83332 10.0003 5.83332ZM9.16699 13.3333C9.16699 12.8731 9.54009 12.5 10.0003 12.5C10.4606 12.5 10.8337 12.8731 10.8337 13.3333C10.8337 13.7936 10.4606 14.1667 10.0003 14.1667C9.54009 14.1667 9.16699 13.7936 9.16699 13.3333Z",
215
+ fill: color
216
+ }
217
+ ) });
218
+ };
219
+ const IconCheck = ({ color = "#ffffff" }) => {
220
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
221
+ "path",
222
+ {
223
+ fillRule: "evenodd",
224
+ clipRule: "evenodd",
225
+ d: "M1.66699 10C1.66699 5.39763 5.39795 1.66667 10.0003 1.66667C14.6027 1.66667 18.3337 5.39763 18.3337 10C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 10ZM13.0896 8.92259C13.415 8.59716 13.415 8.06952 13.0896 7.74408C12.7641 7.41865 12.2365 7.41865 11.9111 7.74408L9.16699 10.4882L8.08958 9.41075C7.76414 9.08531 7.23651 9.08531 6.91107 9.41075C6.58563 9.73619 6.58563 10.2638 6.91107 10.5893L8.57774 12.2559C8.90317 12.5814 9.43081 12.5814 9.75625 12.2559L13.0896 8.92259Z",
226
+ fill: color
227
+ }
228
+ ) });
229
+ };
230
+ const IconCalendar = ({ width = "16", height = "16", color = "#C1C2C7" }) => {
231
+ return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 16 16", fill: "none", children: [
232
+ /* @__PURE__ */ jsx("path", { d: "M1.33333 5.5H14.6667V7.16667H1.33333V5.5Z", fill: color }),
233
+ /* @__PURE__ */ jsx(
234
+ "path",
235
+ {
236
+ fillRule: "evenodd",
237
+ clipRule: "evenodd",
238
+ d: "M5.29892 2.16667H10.7011C11.3719 2.16666 11.9255 2.16665 12.3765 2.20349C12.8449 2.24177 13.2755 2.3239 13.68 2.52998C14.3072 2.84956 14.8171 3.35949 15.1367 3.9867C15.3428 4.39114 15.4249 4.82173 15.4632 5.29014C15.5 5.74114 15.5 6.29476 15.5 6.96556V10.7011C15.5 11.3719 15.5 11.9255 15.4632 12.3765C15.4249 12.8449 15.3428 13.2755 15.1367 13.68C14.8171 14.3072 14.3072 14.8171 13.68 15.1367C13.2755 15.3428 12.8449 15.4249 12.3765 15.4632C11.9255 15.5 11.3719 15.5 10.7011 15.5H5.29894C4.62812 15.5 4.07448 15.5 3.62348 15.4632C3.15506 15.4249 2.72448 15.3428 2.32003 15.1367C1.69283 14.8171 1.18289 14.3072 0.863312 13.68C0.657237 13.2755 0.5751 12.8449 0.536829 12.3765C0.499981 11.9255 0.49999 11.3719 0.5 10.7011V6.96558C0.49999 6.29478 0.499981 5.74114 0.536829 5.29014C0.5751 4.82173 0.657237 4.39114 0.863312 3.9867C1.18289 3.35949 1.69283 2.84956 2.32003 2.52998C2.72448 2.3239 3.15506 2.24177 3.62348 2.20349C4.07448 2.16665 4.62811 2.16666 5.29892 2.16667ZM3.7592 3.86463C3.39385 3.89448 3.20702 3.94858 3.07668 4.01499C2.76308 4.17478 2.50811 4.42975 2.34832 4.74335C2.28192 4.87368 2.22781 5.06052 2.19796 5.42586C2.16732 5.80094 2.16667 6.28618 2.16667 7V10.6667C2.16667 11.3805 2.16732 11.8657 2.19796 12.2408C2.22781 12.6061 2.28192 12.793 2.34832 12.9233C2.50811 13.2369 2.76308 13.4919 3.07668 13.6517C3.20702 13.7181 3.39385 13.7722 3.7592 13.802C4.13427 13.8327 4.61952 13.8333 5.33333 13.8333H10.6667C11.3805 13.8333 11.8657 13.8327 12.2408 13.802C12.6061 13.7722 12.793 13.7181 12.9233 13.6517C13.2369 13.4919 13.4919 13.2369 13.6517 12.9233C13.7181 12.793 13.7722 12.6061 13.802 12.2408C13.8327 11.8657 13.8333 11.3805 13.8333 10.6667V7C13.8333 6.28618 13.8327 5.80094 13.802 5.42586C13.7722 5.06052 13.7181 4.87368 13.6517 4.74335C13.4919 4.42975 13.2369 4.17478 12.9233 4.01499C12.793 3.94858 12.6061 3.89448 12.2408 3.86463C11.8657 3.83398 11.3805 3.83333 10.6667 3.83333H5.33333C4.61952 3.83333 4.13427 3.83398 3.7592 3.86463Z",
239
+ fill: color
240
+ }
241
+ ),
242
+ /* @__PURE__ */ jsx(
243
+ "path",
244
+ {
245
+ d: "M5.5 1.33333C5.5 0.873096 5.1269 0.5 4.66667 0.5C4.20643 0.5 3.83333 0.873096 3.83333 1.33333V3C3.83333 3.46024 4.20643 3.83333 4.66667 3.83333C5.1269 3.83333 5.5 3.46024 5.5 3V1.33333Z",
246
+ fill: color
247
+ }
248
+ ),
249
+ /* @__PURE__ */ jsx(
250
+ "path",
251
+ {
252
+ d: "M12.1667 1.33333C12.1667 0.873096 11.7936 0.5 11.3333 0.5C10.8731 0.5 10.5 0.873096 10.5 1.33333V3C10.5 3.46024 10.8731 3.83333 11.3333 3.83333C11.7936 3.83333 12.1667 3.46024 12.1667 3V1.33333Z",
253
+ fill: color
254
+ }
255
+ )
256
+ ] });
257
+ };
258
+ const IconLeft = ({ size = "20", color = "#131314" }) => {
259
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
260
+ "path",
261
+ {
262
+ d: "M9.00081 10.0039L12.2508 13.2539C12.4036 13.4067 12.48 13.6012 12.48 13.8373C12.48 14.0734 12.4036 14.2678 12.2508 14.4206C12.098 14.5734 11.9036 14.6498 11.6675 14.6498C11.4314 14.6498 11.2369 14.5734 11.0841 14.4206L7.25081 10.5873C7.16748 10.5039 7.10845 10.4137 7.07373 10.3164C7.03901 10.2192 7.02165 10.1151 7.02165 10.0039C7.02165 9.89284 7.03901 9.78867 7.07373 9.69145C7.10845 9.59422 7.16748 9.50395 7.25081 9.42061L11.0841 5.58728C11.2369 5.4345 11.4314 5.35811 11.6675 5.35811C11.9036 5.35811 12.098 5.4345 12.2508 5.58728C12.4036 5.74006 12.48 5.9345 12.48 6.17061C12.48 6.40672 12.4036 6.60117 12.2508 6.75395L9.00081 10.0039Z",
263
+ fill: color
264
+ }
265
+ ) });
266
+ };
267
+ const IconRight = ({ size = "20", color = "#131314", style: style2 }) => {
268
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
269
+ "path",
270
+ {
271
+ d: "M10.5007 10.004L7.25065 6.75399C7.09787 6.60121 7.02148 6.40677 7.02148 6.17065C7.02148 5.93454 7.09787 5.7401 7.25065 5.58732C7.40343 5.43454 7.59787 5.35815 7.83398 5.35815C8.0701 5.35815 8.26454 5.43454 8.41732 5.58732L12.2507 9.42065C12.334 9.50399 12.393 9.59427 12.4277 9.69149C12.4625 9.78871 12.4798 9.89288 12.4798 10.004C12.4798 10.1151 12.4625 10.2193 12.4277 10.3165C12.393 10.4137 12.334 10.504 12.2507 10.5873L8.41732 14.4207C8.26454 14.5734 8.0701 14.6498 7.83398 14.6498C7.59787 14.6498 7.40343 14.5734 7.25065 14.4207C7.09787 14.2679 7.02148 14.0734 7.02148 13.8373C7.02148 13.6012 7.09787 13.4068 7.25065 13.254L10.5007 10.004Z",
272
+ fill: color
273
+ }
274
+ ) });
275
+ };
276
+ const IconCloseBackground = ({ size = 20, color = "#C1C2C7" }) => {
277
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
278
+ "path",
279
+ {
280
+ fillRule: "evenodd",
281
+ clipRule: "evenodd",
282
+ d: "M10.0001 18.3332C14.6025 18.3332 18.3334 14.6022 18.3334 9.99984C18.3334 5.39746 14.6025 1.6665 10.0001 1.6665C5.39771 1.6665 1.66675 5.39746 1.66675 9.99984C1.66675 14.6022 5.39771 18.3332 10.0001 18.3332ZM8.08934 6.91058C7.7639 6.58514 7.23626 6.58514 6.91083 6.91058C6.58539 7.23602 6.58539 7.76366 6.91083 8.08909L8.82157 9.99984L6.91083 11.9106C6.58539 12.236 6.58539 12.7637 6.91083 13.0891C7.23626 13.4145 7.7639 13.4145 8.08934 13.0891L10.0001 11.1783L11.9108 13.0891C12.2363 13.4145 12.7639 13.4145 13.0893 13.0891C13.4148 12.7637 13.4148 12.236 13.0893 11.9106L11.1786 9.99984L13.0893 8.08909C13.4148 7.76366 13.4148 7.23602 13.0893 6.91058C12.7639 6.58514 12.2363 6.58514 11.9108 6.91058L10.0001 8.82133L8.08934 6.91058Z",
283
+ fill: color
284
+ }
285
+ ) });
286
+ };
287
+ const mainButton = "MainButton-module__mainButton";
288
+ const sm$2 = "MainButton-module__sm";
289
+ const md$2 = "MainButton-module__md";
290
+ const lg$1 = "MainButton-module__lg";
291
+ const mainButtonContent = "MainButton-module__mainButtonContent";
292
+ const mainButtonLabel = "MainButton-module__mainButtonLabel";
293
+ const primary = "MainButton-module__primary";
294
+ const neutral$1 = "MainButton-module__neutral";
295
+ const loading$1 = "MainButton-module__loading";
296
+ const disabled$5 = "MainButton-module__disabled";
297
+ const focused$4 = "MainButton-module__focused";
298
+ const positive = "MainButton-module__positive";
299
+ const negative = "MainButton-module__negative";
300
+ const secondary = "MainButton-module__secondary";
301
+ const tertiary = "MainButton-module__tertiary";
302
+ const tertiaryV2 = "MainButton-module__tertiaryV2";
303
+ const tertiaryV3 = "MainButton-module__tertiaryV3";
304
+ const style$f = {
305
+ mainButton,
306
+ sm: sm$2,
307
+ md: md$2,
308
+ lg: lg$1,
309
+ mainButtonContent,
310
+ mainButtonLabel,
311
+ primary,
312
+ neutral: neutral$1,
313
+ loading: loading$1,
314
+ disabled: disabled$5,
315
+ focused: focused$4,
316
+ positive,
317
+ negative,
318
+ secondary,
319
+ tertiary,
320
+ tertiaryV2,
321
+ tertiaryV3
322
+ };
323
+ const MainButton = ({
324
+ label,
325
+ size = "md",
326
+ leftSlot,
327
+ rightSlot,
328
+ buttonSlot,
329
+ type = "button",
330
+ colorType = "neutral",
331
+ buttonType = "primary",
332
+ withFocus = false,
333
+ customFocus,
334
+ disabled: disabled2,
335
+ loading: loading2 = false,
336
+ spaceBetween = false,
337
+ buttonStyle,
338
+ mainButtonContentStyle,
339
+ mainButtonLabelStyle,
340
+ leftSlotStyle,
341
+ rightSlotStyle,
342
+ onClick
343
+ }) => {
344
+ const [Focused, setFocused] = useState(customFocus || false);
345
+ const ButtonRef = useRef(null);
346
+ const Click = (e) => {
347
+ if (disabled2 || loading2) return;
348
+ if (withFocus) {
349
+ setFocused((state) => !state);
350
+ }
351
+ onClick?.(e);
352
+ };
353
+ const getLoadingColor = () => {
354
+ let color = "#ffffff";
355
+ if (colorType === "neutral" && buttonType !== "primary") color = "#0058FF";
356
+ if (colorType === "positive" && buttonType !== "primary") color = "#328707";
357
+ if (colorType === "negative" && buttonType !== "primary") color = "#E3292F";
358
+ return color;
359
+ };
360
+ useEffect(() => {
361
+ const ClickHandler = (event) => {
362
+ if (!ButtonRef.current || disabled2) return;
363
+ if (event.composedPath().includes(ButtonRef.current)) return;
364
+ setFocused(false);
365
+ };
366
+ document.addEventListener("click", ClickHandler);
367
+ return () => {
368
+ document.removeEventListener("click", ClickHandler);
369
+ };
370
+ }, []);
371
+ return /* @__PURE__ */ jsx(
372
+ "button",
373
+ {
374
+ ref: ButtonRef,
375
+ style: buttonStyle,
376
+ type,
377
+ disabled: disabled2,
378
+ className: `${style$f.mainButton} ${style$f[size]} ${loading2 ? style$f.loading : ""} ${Focused ? style$f.focused : ""} ${style$f[buttonType]} ${style$f[colorType]} ${disabled2 ? style$f.disabled : ""}`,
379
+ onClick: Click,
380
+ children: loading2 ? /* @__PURE__ */ jsx(IconCircularLoading, { size: 20, stroke: getLoadingColor() }) : buttonSlot || /* @__PURE__ */ jsxs("div", { className: style$f.mainButtonContent, style: { ...mainButtonContentStyle, justifyContent: spaceBetween ? "space-between" : "center" }, children: [
381
+ leftSlot && /* @__PURE__ */ jsx("div", { className: style$f.leftSlot, style: leftSlotStyle, children: leftSlot }),
382
+ /* @__PURE__ */ jsx("p", { className: style$f.mainButtonLabel, style: mainButtonLabelStyle, children: label }),
383
+ rightSlot && /* @__PURE__ */ jsx("div", { className: style$f.rightSlot, style: rightSlotStyle, children: rightSlot })
384
+ ] })
385
+ }
386
+ );
387
+ };
388
+ const inputWrapper = "FormInput-module__inputWrapper";
389
+ const sm$1 = "FormInput-module__sm";
390
+ const formInputWrapper = "FormInput-module__formInputWrapper";
391
+ const md$1 = "FormInput-module__md";
392
+ const disabled$4 = "FormInput-module__disabled";
393
+ const formInputLabel = "FormInput-module__formInputLabel";
394
+ const formInput = "FormInput-module__formInput";
395
+ const formInputHelperText = "FormInput-module__formInputHelperText";
396
+ const formInputLabelWrapper = "FormInput-module__formInputLabelWrapper";
397
+ const formInputRequired = "FormInput-module__formInputRequired";
398
+ const formInputHelperSlot = "FormInput-module__formInputHelperSlot";
399
+ const errorState = "FormInput-module__errorState";
400
+ const focused$3 = "FormInput-module__focused";
401
+ const active$2 = "FormInput-module__active";
402
+ const errorFocused$1 = "FormInput-module__errorFocused";
403
+ const errorActive$1 = "FormInput-module__errorActive";
404
+ const formInputSlot = "FormInput-module__formInputSlot";
405
+ const errorHelperText = "FormInput-module__errorHelperText";
406
+ const successHelperText = "FormInput-module__successHelperText";
407
+ const style$e = {
408
+ inputWrapper,
409
+ sm: sm$1,
410
+ formInputWrapper,
411
+ md: md$1,
412
+ disabled: disabled$4,
413
+ formInputLabel,
414
+ formInput,
415
+ formInputHelperText,
416
+ formInputLabelWrapper,
417
+ formInputRequired,
418
+ formInputHelperSlot,
419
+ errorState,
420
+ focused: focused$3,
421
+ active: active$2,
422
+ errorFocused: errorFocused$1,
423
+ errorActive: errorActive$1,
424
+ formInputSlot,
425
+ errorHelperText,
426
+ successHelperText
427
+ };
428
+ const FormInput = ({
429
+ label,
430
+ placeholder,
431
+ helperText,
432
+ required: required2 = false,
433
+ disabled: disabled2 = false,
434
+ readOnly = false,
435
+ withFocus = true,
436
+ withActive = true,
437
+ searchComponent = false,
438
+ size = "md",
439
+ toggleFocus = false,
440
+ rightSlot,
441
+ leftSlot,
442
+ helperSlot,
443
+ type = "text",
444
+ value,
445
+ maxLength,
446
+ forDropdown = false,
447
+ customFocus = null,
448
+ focus = false,
449
+ inputState = { error: false, success: false, loading: false },
450
+ inputSlot,
451
+ onChange,
452
+ onFocus,
453
+ onBlur,
454
+ onEnter,
455
+ onFocusChange,
456
+ formInputWrapperStyle,
457
+ inputWrapperStyle,
458
+ formInputStyle,
459
+ helperTextStyle,
460
+ labelStyle,
461
+ inputSlotStyle
462
+ }) => {
463
+ const InputRef = useRef(null);
464
+ const [SearchValue, setSearchValue] = useState(value ?? "");
465
+ const [Focused, setFocused] = useState(false);
466
+ const [Active, setActive] = useState(false);
467
+ const Change = (event) => {
468
+ if (searchComponent) {
469
+ setSearchValue(event.target.value);
470
+ }
471
+ onChange?.(event.target.value);
472
+ };
473
+ const Focus = () => {
474
+ onFocus?.();
475
+ if (forDropdown) return;
476
+ setFocused(true);
477
+ };
478
+ const Blur = () => {
479
+ if (!toggleFocus) {
480
+ setFocused(false);
481
+ } else {
482
+ setFocused(customFocus ?? false);
483
+ }
484
+ onBlur?.();
485
+ };
486
+ const handleKeyDown = (event) => {
487
+ const input = event.currentTarget.value;
488
+ const isFirstCharacter = input.length === 0;
489
+ if (type === "number") {
490
+ if (event.keyCode === 69 || !isFirstCharacter && (event.keyCode === 187 || event.keyCode === 107 || event.keyCode === 189 || event.keyCode === 109)) {
491
+ event.preventDefault();
492
+ }
493
+ }
494
+ if (event.key === "Enter" && input && input.length > 0) {
495
+ onEnter?.();
496
+ }
497
+ };
498
+ const getSlot = (slot) => {
499
+ return slot;
500
+ };
501
+ const HandleSearch = () => {
502
+ if (!searchComponent) return;
503
+ setSearchValue("");
504
+ onChange?.("");
505
+ };
506
+ useEffect(() => {
507
+ onFocusChange?.(Focused);
508
+ }, [Focused]);
509
+ useEffect(() => {
510
+ if (customFocus !== void 0 && customFocus !== null) {
511
+ setFocused(customFocus);
512
+ }
513
+ }, [customFocus]);
514
+ return /* @__PURE__ */ jsxs("div", { className: `${style$e.inputWrapper} ${disabled2 ? style$e.disabled : ""} ${style$e[size]}`, style: inputWrapperStyle ?? {}, children: [
515
+ label && /* @__PURE__ */ jsxs("div", { className: style$e.formInputLabelWrapper, children: [
516
+ /* @__PURE__ */ jsxs("label", { style: labelStyle ?? {}, className: style$e.formInputLabel, children: [
517
+ label,
518
+ " ",
519
+ typeof label === "string" && required2 && /* @__PURE__ */ jsx("span", { className: style$e.formInputRequired, children: "*" })
520
+ ] }),
521
+ helperSlot && /* @__PURE__ */ jsx("div", { className: style$e.formInputHelperSlot, children: getSlot(helperSlot) })
522
+ ] }),
523
+ /* @__PURE__ */ jsxs(
524
+ "div",
525
+ {
526
+ className: `${style$e.formInputWrapper} ${inputState.error ? style$e.errorState : ""} ${withFocus && Focused ? !inputState.error ? style$e.focused : style$e.errorFocused : ""} ${withActive && Active ? !inputState.error ? style$e.active : style$e.errorActive : ""} ${inputState.error ? style$e.error : ""} ${inputState.success ? style$e.success : ""}`,
527
+ style: formInputWrapperStyle ?? {},
528
+ onClick: () => toggleFocus && setFocused((state) => !state),
529
+ children: [
530
+ leftSlot && /* @__PURE__ */ jsx("div", { className: style$e.formInputSlot, children: getSlot(leftSlot) }),
531
+ searchComponent && /* @__PURE__ */ jsx("div", { className: style$e.formInputSlot, children: getSlot(/* @__PURE__ */ jsx(IconSearch, {})) }),
532
+ inputSlot ? /* @__PURE__ */ jsx("div", { className: style$e.formInputSlot, style: inputSlotStyle ?? {}, children: getSlot(inputSlot) }) : /* @__PURE__ */ jsx(
533
+ "input",
534
+ {
535
+ className: style$e.formInput,
536
+ ref: InputRef,
537
+ style: formInputStyle ?? {},
538
+ type: type ?? "text",
539
+ value: searchComponent ? SearchValue : value,
540
+ onChange: (event) => Change(event),
541
+ onMouseDown: () => !forDropdown && setActive(true),
542
+ onMouseUp: () => !forDropdown && setActive(false),
543
+ onMouseLeave: () => !forDropdown && setActive(false),
544
+ onFocus: Focus,
545
+ onBlur: Blur,
546
+ disabled: disabled2,
547
+ required: required2,
548
+ onKeyDown: handleKeyDown,
549
+ readOnly,
550
+ spellCheck: false,
551
+ placeholder: placeholder ?? "",
552
+ autoComplete: "off",
553
+ maxLength
554
+ }
555
+ ),
556
+ rightSlot && /* @__PURE__ */ jsx("div", { style: searchComponent ? { cursor: "pointer" } : {}, className: style$e.formInputSlot, children: getSlot(rightSlot) }),
557
+ searchComponent && /* @__PURE__ */ jsx("div", { className: style$e.formInputSlot, children: /* @__PURE__ */ jsx("div", { onClick: HandleSearch, style: searchComponent ? { cursor: "pointer" } : {}, className: style$e.formInputSlot, children: SearchValue?.length > 0 ? getSlot(/* @__PURE__ */ jsx(IconCloseCircle, {})) : null }) })
558
+ ]
559
+ }
560
+ ),
561
+ helperText && /* @__PURE__ */ jsx(
562
+ "p",
563
+ {
564
+ style: helperTextStyle ?? {},
565
+ className: `${style$e.formInputHelperText} ${inputState.error ? style$e.errorHelperText : inputState.success ? style$e.successHelperText : ""}`,
566
+ children: helperText
567
+ }
568
+ )
569
+ ] });
570
+ };
571
+ const textareaContainer = "Textarea-module__textareaContainer";
572
+ const textAreaLabel = "Textarea-module__textAreaLabel";
573
+ const required = "Textarea-module__required";
574
+ const wrap = "Textarea-module__wrap";
575
+ const resize = "Textarea-module__resize";
576
+ const textareaIconClose = "Textarea-module__textareaIconClose";
577
+ const textarea = "Textarea-module__textarea";
578
+ const focused$2 = "Textarea-module__focused";
579
+ const active$1 = "Textarea-module__active";
580
+ const errorFocused = "Textarea-module__errorFocused";
581
+ const errorActive = "Textarea-module__errorActive";
582
+ const textareaFooter = "Textarea-module__textareaFooter";
583
+ const style$d = {
584
+ textareaContainer,
585
+ textAreaLabel,
586
+ required,
587
+ wrap,
588
+ resize,
589
+ textareaIconClose,
590
+ textarea,
591
+ focused: focused$2,
592
+ active: active$1,
593
+ errorFocused,
594
+ errorActive,
595
+ textareaFooter
596
+ };
597
+ const Textarea = ({
598
+ placeholder,
599
+ label,
600
+ cols = 30,
601
+ rows = 5,
602
+ value,
603
+ inputState = { error: false, success: true },
604
+ maxLength = 20,
605
+ withFocus = true,
606
+ withActive = true,
607
+ withResize = true,
608
+ withClose = true,
609
+ onChange,
610
+ onFocus,
611
+ onBlur,
612
+ disabled: disabled2,
613
+ required: required2,
614
+ textareaContainerStyle,
615
+ textareaLabelStyle,
616
+ requiredStyle,
617
+ labelSlot,
618
+ textareaFooterStyle
619
+ }) => {
620
+ const TextareaRef = useRef(null);
621
+ const [Focused, setFocused] = useState(false);
622
+ const [Active, setActive] = useState(false);
623
+ const Change = (e) => {
624
+ let value2 = e.target.value;
625
+ if (onChange && typeof onChange === "function") {
626
+ onChange(value2);
627
+ }
628
+ };
629
+ const iconSlot = (icon2) => {
630
+ return icon2;
631
+ };
632
+ const Focus = (e) => {
633
+ setFocused(true);
634
+ if (onFocus && typeof onFocus === "function") {
635
+ onFocus(e);
636
+ }
637
+ };
638
+ const Blur = (e) => {
639
+ setFocused(false);
640
+ if (onBlur && typeof onBlur === "function") {
641
+ onBlur(e);
642
+ }
643
+ };
644
+ let isManuallyResized = false;
645
+ useEffect(() => {
646
+ if (!TextareaRef.current) return;
647
+ const textarea2 = TextareaRef.current.querySelector("textarea");
648
+ if (!textarea2) return;
649
+ let isUserResizing = false;
650
+ const onMouseDown = (e) => {
651
+ const bounds = textarea2.getBoundingClientRect();
652
+ const isNearBottomRight = e.clientX > bounds.right - 20 && e.clientY > bounds.bottom - 20;
653
+ if (isNearBottomRight) {
654
+ isUserResizing = true;
655
+ }
656
+ };
657
+ const observer = new ResizeObserver(() => {
658
+ if (isUserResizing) {
659
+ isManuallyResized = true;
660
+ isUserResizing = false;
661
+ }
662
+ });
663
+ textarea2.addEventListener("mousedown", onMouseDown);
664
+ observer.observe(textarea2);
665
+ return () => {
666
+ textarea2.removeEventListener("mousedown", onMouseDown);
667
+ observer.disconnect();
668
+ };
669
+ }, []);
670
+ const adjustHeight = () => {
671
+ if (!TextareaRef.current) return;
672
+ const el = TextareaRef.current.querySelector("textarea");
673
+ if (!el || isManuallyResized) return;
674
+ el.style.height = "auto";
675
+ el.style.height = `${el.scrollHeight}px`;
676
+ };
677
+ useEffect(() => {
678
+ if (!TextareaRef.current) return;
679
+ const textarea2 = TextareaRef.current.querySelector("textarea");
680
+ const observer = new ResizeObserver(() => {
681
+ const isShrunk = textarea2.offsetHeight < textarea2.scrollHeight;
682
+ isManuallyResized = isShrunk;
683
+ });
684
+ observer.observe(textarea2);
685
+ return () => observer.disconnect();
686
+ }, []);
687
+ const handleInput = (e) => {
688
+ isManuallyResized = false;
689
+ onChange?.(e.target.value);
690
+ adjustHeight();
691
+ };
692
+ const HandleClose = () => {
693
+ if (onChange && typeof onChange === "function") {
694
+ onChange("");
695
+ }
696
+ };
697
+ return /* @__PURE__ */ jsxs(
698
+ "div",
699
+ {
700
+ style: textareaContainerStyle ?? {},
701
+ className: `${style$d.textareaContainer} ${inputState.error ? style$d.error : ""} ${disabled2 ? style$d.disabled : null}`,
702
+ children: [
703
+ label && /* @__PURE__ */ jsxs("div", { style: textareaLabelStyle, className: style$d.textAreaLabel, children: [
704
+ /* @__PURE__ */ jsx("p", { children: label }),
705
+ /* @__PURE__ */ jsx("span", { style: requiredStyle ?? {}, className: style$d.required, children: required2 && "*" }),
706
+ labelSlot && iconSlot(labelSlot)
707
+ ] }),
708
+ /* @__PURE__ */ jsxs("div", { className: `${style$d.wrap} ${withResize ? style$d.resize : ""}`, ref: TextareaRef, children: [
709
+ /* @__PURE__ */ jsx(
710
+ "textarea",
711
+ {
712
+ className: `${style$d.textarea} ${Focused ? style$d.focused : ""} ${disabled2 ? style$d.disabled : ""} ${withFocus && Focused ? !inputState.error ? style$d.focused : style$d.errorFocused : ""} ${withActive && Active ? !inputState.error ? style$d.active : style$d.errorActive : ""} ${inputState.error ? style$d.error : ""} ${inputState.success ? style$d.success : ""}`,
713
+ value,
714
+ placeholder: placeholder ?? "",
715
+ cols,
716
+ rows,
717
+ maxLength: maxLength ?? void 0,
718
+ onInput: handleInput,
719
+ onFocus: Focus,
720
+ disabled: disabled2,
721
+ onBlur: Blur,
722
+ onChange: Change,
723
+ onMouseDown: () => setActive(true),
724
+ onMouseUp: () => setActive(false),
725
+ onMouseLeave: () => setActive(false)
726
+ }
727
+ ),
728
+ withClose && value && /* @__PURE__ */ jsx("div", { className: style$d.textareaIconClose, onClick: HandleClose, children: /* @__PURE__ */ jsx(IconCloseBackground, {}) })
729
+ ] }),
730
+ /* @__PURE__ */ jsx("div", { style: textareaFooterStyle ?? {}, className: style$d.textareaFooter, children: /* @__PURE__ */ jsxs("p", { children: [
731
+ value?.length,
732
+ "/",
733
+ maxLength
734
+ ] }) })
735
+ ]
736
+ }
737
+ );
738
+ };
739
+ const toggleWrapper = "Toggle-module__toggleWrapper";
740
+ const checked$1 = "Toggle-module__checked";
741
+ const error$2 = "Toggle-module__error";
742
+ const disabled$3 = "Toggle-module__disabled";
743
+ const sm = "Toggle-module__sm";
744
+ const toggleState = "Toggle-module__toggleState";
745
+ const md = "Toggle-module__md";
746
+ const lg = "Toggle-module__lg";
747
+ const style$c = {
748
+ toggleWrapper,
749
+ checked: checked$1,
750
+ error: error$2,
751
+ disabled: disabled$3,
752
+ sm,
753
+ toggleState,
754
+ md,
755
+ lg
756
+ };
757
+ const Toggle = ({ checked: checked2, change, disabled: disabled2 = false, size = "md", toggleType = "default", required: required2 = false }) => {
758
+ const onChange = () => {
759
+ if (!disabled2) {
760
+ change?.(!checked2);
761
+ }
762
+ };
763
+ return /* @__PURE__ */ jsx(
764
+ "div",
765
+ {
766
+ onClick: onChange,
767
+ className: `${style$c.toggleWrapper} ${toggleType === "error" ? style$c.error : ""} ${style$c[size]} ${checked2 ? style$c.checked : ""} ${disabled2 ? style$c.disabled : ""}`,
768
+ children: /* @__PURE__ */ jsx("div", { className: style$c.toggleState, children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked: checked2, readOnly: true, disabled: disabled2 ?? false, hidden: true, required: required2 }) })
769
+ }
770
+ );
771
+ };
772
+ const checkboxWrapper = "Checkbox-module__checkboxWrapper";
773
+ const checkMark = "Checkbox-module__checkMark";
774
+ const error$1 = "Checkbox-module__error";
775
+ const checked = "Checkbox-module__checked";
776
+ const disabled$2 = "Checkbox-module__disabled";
777
+ const namespaceHr = "Checkbox-module__Namespace_Hr";
778
+ const dark$2 = "Checkbox-module__dark";
779
+ const style$b = {
780
+ checkboxWrapper,
781
+ checkMark,
782
+ error: error$1,
783
+ checked,
784
+ disabled: disabled$2,
785
+ namespaceHr,
786
+ dark: dark$2
787
+ };
788
+ const NamespaceContext = createContext("namespaceNebi");
789
+ const useNamespace = () => useContext(NamespaceContext);
790
+ const Checkbox = ({
791
+ checked: checked2,
792
+ change,
793
+ type = "default",
794
+ disabled: disabled2 = false,
795
+ required: required2 = false,
796
+ multipleChecked = false,
797
+ activeStyle,
798
+ checkBoxStyle,
799
+ theme = "light"
800
+ }) => {
801
+ const namespace = useNamespace();
802
+ const CheckboxRef = useRef(null);
803
+ const [isActive, setIsActive] = useState(false);
804
+ const onChange = () => {
805
+ if (disabled2) return;
806
+ if (change && typeof change === "function") {
807
+ change(!checked2);
808
+ }
809
+ };
810
+ const getStyle = () => {
811
+ if (isActive) {
812
+ if (disabled2) {
813
+ return { boxShadow: "none" };
814
+ }
815
+ return activeStyle ?? {};
816
+ }
817
+ return checkBoxStyle ?? {};
818
+ };
819
+ return /* @__PURE__ */ jsxs(
820
+ "div",
821
+ {
822
+ style: getStyle(),
823
+ className: `${theme === "dark" ? style$b.dark : ""} ${style$b[namespace]} ${style$b.checkboxWrapper} ${type === "error" ? style$b.error : ""} ${checked2 ? style$b.checked : style$b.unChecked} ${disabled2 ? style$b.disabled : ""}`,
824
+ onMouseDown: () => setIsActive(true),
825
+ onMouseUp: () => setIsActive(false),
826
+ onMouseLeave: () => setIsActive(false),
827
+ onClick: onChange,
828
+ children: [
829
+ /* @__PURE__ */ jsx("input", { ref: CheckboxRef, type: "checkbox", disabled: disabled2, checked: checked2 ?? false, hidden: true, readOnly: true, required: required2 ?? false }),
830
+ checked2 ? multipleChecked ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(IconCheckmark, {}) : ""
831
+ ]
832
+ }
833
+ );
834
+ };
835
+ const dropdownWrapper = "Dropdown-module__dropdownWrapper";
836
+ const dropdownInputWrapper = "Dropdown-module__dropdownInputWrapper";
837
+ const dropdownInputSlot = "Dropdown-module__dropdownInputSlot";
838
+ const dropdownRightIconArrow$1 = "Dropdown-module__dropdownRightIconArrow";
839
+ const focused$1 = "Dropdown-module__focused";
840
+ const dropdownInputSlotItem = "Dropdown-module__dropdownInputSlotItem";
841
+ const dropdownInputSlotItemLabel = "Dropdown-module__dropdownInputSlotItemLabel";
842
+ const dropdownInputSlotItemClose = "Dropdown-module__dropdownInputSlotItemClose";
843
+ const dropdownInputSlotItemMore = "Dropdown-module__dropdownInputSlotItemMore";
844
+ const dropdownRightIcon$1 = "Dropdown-module__dropdownRightIcon";
845
+ const dropdownRightIconClose$1 = "Dropdown-module__dropdownRightIconClose";
846
+ const dropdownListContainer = "Dropdown-module__dropdownListContainer";
847
+ const dropdownList = "Dropdown-module__dropdownList";
848
+ const dropdownItem = "Dropdown-module__dropdownItem";
849
+ const selected$2 = "Dropdown-module__selected";
850
+ const dropdownItemLabel = "Dropdown-module__dropdownItemLabel";
851
+ const hovered = "Dropdown-module__hovered";
852
+ const disabled$1 = "Dropdown-module__disabled";
853
+ const itemCheckbox = "Dropdown-module__itemCheckbox";
854
+ const dropdownItemLabelInput = "Dropdown-module__dropdownItemLabelInput";
855
+ const countryName = "Dropdown-module__countryName";
856
+ const countryDialCode = "Dropdown-module__countryDialCode";
857
+ const selectAll = "Dropdown-module__selectAll";
858
+ const style$a = {
859
+ dropdownWrapper,
860
+ dropdownInputWrapper,
861
+ dropdownInputSlot,
862
+ dropdownRightIconArrow: dropdownRightIconArrow$1,
863
+ focused: focused$1,
864
+ dropdownInputSlotItem,
865
+ dropdownInputSlotItemLabel,
866
+ dropdownInputSlotItemClose,
867
+ dropdownInputSlotItemMore,
868
+ dropdownRightIcon: dropdownRightIcon$1,
869
+ dropdownRightIconClose: dropdownRightIconClose$1,
870
+ dropdownListContainer,
871
+ dropdownList,
872
+ dropdownItem,
873
+ selected: selected$2,
874
+ dropdownItemLabel,
875
+ hovered,
876
+ disabled: disabled$1,
877
+ itemCheckbox,
878
+ dropdownItemLabelInput,
879
+ countryName,
880
+ countryDialCode,
881
+ selectAll
882
+ };
883
+ location.href.indexOf(".upgaming.dev") > 0 || location.href.indexOf(".upgaming.com") > 0;
884
+ const _filterUnique = (arr, key) => {
885
+ const uniqueKeys = /* @__PURE__ */ new Set();
886
+ return arr.filter((item) => {
887
+ if (uniqueKeys.has(item[key])) {
888
+ return false;
889
+ } else {
890
+ uniqueKeys.add(item[key]);
891
+ return true;
892
+ }
893
+ });
894
+ };
895
+ const Dropdown = ({
896
+ data,
897
+ withFilter = true,
898
+ withClose = true,
899
+ disableAll = false,
900
+ withMultiselect = false,
901
+ selectedOptionID,
902
+ withInput = false,
903
+ dropdownType = "country",
904
+ onSelect,
905
+ onFocus,
906
+ onBlur,
907
+ onValueChange,
908
+ customInputSlot,
909
+ dropdownWrapperStyle,
910
+ dropdownInputWrapperStyle,
911
+ dropdownInputSlotStyle,
912
+ dropdownInputSlotItemStyle,
913
+ dropdownInputSlotItemLabelStyle,
914
+ dropdownInputSlotItemCloseStyle,
915
+ dropdownInputSlotItemMoreStyle,
916
+ dropdownItemStyle,
917
+ dropdownItemLabelStyle,
918
+ itemCheckboxStyle,
919
+ dropdownItemLabelTextStyle,
920
+ dropdownListStyle,
921
+ ...rest
922
+ }) => {
923
+ const [Flag, setFlag] = useState(false);
924
+ const [InputValue, setInputValue] = useState("");
925
+ const [SelectAllKey, setSelectAllKey] = useState(false);
926
+ const [ClickedSelectAll, setClickedSelectAll] = useState(false);
927
+ const [IsFocused, setIsFocused] = useState(false);
928
+ const DropdownRef = useRef(null);
929
+ const ComponentRef = useRef(null);
930
+ const ListRef = useRef(null);
931
+ const ListItemRef = useRef(null);
932
+ const [Data, setData] = useState([]);
933
+ const SelectedData = useRef([]);
934
+ const SelectedDataLength = useRef(0);
935
+ const [SearchValue, setSearchValue] = useState("");
936
+ const [SingleSelectValue, setSingleSelectValue] = useState(null);
937
+ const getFlagIconUrl = (code) => {
938
+ return `https://flagsapi.com/${code}/flat/64.png`;
939
+ };
940
+ const SelectItem = (object) => {
941
+ object.selected = !object.selected;
942
+ if (!withMultiselect) {
943
+ onSelect?.(object);
944
+ return;
945
+ }
946
+ SelectedData.current = [...SelectedData.current, ...Data.filter((el) => el.selected == true), ...Data.filter((el) => el.id === object.id)];
947
+ SelectedData.current = _filterUnique(SelectedData.current, "id").filter((el) => el.selected).filter((el) => el.id !== "SELECT_ALL");
948
+ if (object.id === "SELECT_ALL") {
949
+ setSelectAllKey(object.selected);
950
+ setClickedSelectAll(true);
951
+ } else {
952
+ setSelectAllKey(false);
953
+ onSelect?.(SelectedData.current);
954
+ setClickedSelectAll(false);
955
+ }
956
+ setFlag((state) => !state);
957
+ };
958
+ const SingleSelect = (object) => {
959
+ setSingleSelectValue(object);
960
+ onSelect?.(object);
961
+ setIsFocused(false);
962
+ };
963
+ const Focus = () => {
964
+ onFocus?.();
965
+ };
966
+ const CalculatePos = () => {
967
+ const componentEl = ComponentRef.current;
968
+ const dropdownEl = DropdownRef.current;
969
+ if (!dropdownEl || !componentEl) return;
970
+ const componentRect = componentEl.getBoundingClientRect();
971
+ const windowHeight = window.innerHeight;
972
+ dropdownEl.style.zIndex = "100";
973
+ dropdownEl.style.position = "fixed";
974
+ dropdownEl.style.width = componentRect.width + "px";
975
+ dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
976
+ if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
977
+ dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight + 18}px`;
978
+ dropdownEl.style.bottom = "unset";
979
+ } else {
980
+ dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
981
+ dropdownEl.style.bottom = "unset";
982
+ }
983
+ };
984
+ useEffect(() => {
985
+ CalculatePos();
986
+ }, [DropdownRef, IsFocused]);
987
+ useEffect(() => {
988
+ SelectedData.current = data.filter((el) => el.selected);
989
+ if (!withMultiselect) {
990
+ setData(data);
991
+ return;
992
+ }
993
+ const hasSelected = data.some((el) => "selected" in el);
994
+ const firstItem = { id: "SELECT_ALL", label: "Select All", selected: SelectAllKey };
995
+ if (hasSelected) {
996
+ setData([firstItem, ...data]);
997
+ } else {
998
+ data.forEach((el) => {
999
+ el.selected = false;
1000
+ });
1001
+ setData([firstItem, ...data]);
1002
+ }
1003
+ }, [JSON.stringify(data)]);
1004
+ useEffect(() => {
1005
+ if (!withMultiselect) return;
1006
+ if (!data.every((el) => el.selected)) {
1007
+ setSelectAllKey(false);
1008
+ }
1009
+ }, [SelectedData.current.length]);
1010
+ useEffect(() => {
1011
+ if (!withMultiselect && selectedOptionID) {
1012
+ setSingleSelectValue(data.find((el) => el.id === selectedOptionID));
1013
+ }
1014
+ }, [selectedOptionID]);
1015
+ useEffect(() => {
1016
+ if (!withMultiselect) return;
1017
+ if (Data.length > 0 && ClickedSelectAll) {
1018
+ const updated = Data.map((el) => {
1019
+ if (el.id === "SELECT_ALL") return { ...el, selected: SelectAllKey };
1020
+ if (el.disabled) return el;
1021
+ return { ...el, selected: SelectAllKey };
1022
+ });
1023
+ setData(updated);
1024
+ data.forEach((el) => {
1025
+ if (el.id === "SELECT_ALL") {
1026
+ el.selected = SelectAllKey;
1027
+ } else if (!el.disabled) {
1028
+ el.selected = SelectAllKey;
1029
+ }
1030
+ });
1031
+ SelectedData.current = updated.filter((el) => el.selected && el.id !== "SELECT_ALL");
1032
+ onSelect?.(SelectedData.current);
1033
+ }
1034
+ }, [Flag]);
1035
+ useEffect(() => {
1036
+ const ClickHandler = (event) => {
1037
+ if (!ComponentRef.current) return;
1038
+ if (event.composedPath().includes(ComponentRef.current)) return;
1039
+ setIsFocused(false);
1040
+ };
1041
+ const ScrollHandler = (event) => {
1042
+ if (!ComponentRef.current || !ListRef.current) return;
1043
+ if (ListRef.current.contains(event.target)) return;
1044
+ setIsFocused(false);
1045
+ };
1046
+ document.addEventListener("click", ClickHandler);
1047
+ document.addEventListener("wheel", ScrollHandler);
1048
+ return () => {
1049
+ document.removeEventListener("click", ClickHandler);
1050
+ document.removeEventListener("wheel", ScrollHandler);
1051
+ };
1052
+ }, []);
1053
+ useEffect(() => {
1054
+ if (!withMultiselect) return;
1055
+ const calculateSelectedLength = () => {
1056
+ const rect = ComponentRef.current?.getBoundingClientRect();
1057
+ if (!rect) return;
1058
+ const width = rect.width;
1059
+ if (width <= 150) SelectedDataLength.current = 0;
1060
+ else if (width <= 250) SelectedDataLength.current = 1;
1061
+ else if (width <= 350) SelectedDataLength.current = 2;
1062
+ else if (width <= 450) SelectedDataLength.current = 3;
1063
+ else SelectedDataLength.current = 4;
1064
+ };
1065
+ calculateSelectedLength();
1066
+ window.addEventListener("resize", calculateSelectedLength);
1067
+ return () => window.removeEventListener("resize", calculateSelectedLength);
1068
+ }, []);
1069
+ const isInitialRender = useRef(true);
1070
+ useEffect(() => {
1071
+ if (isInitialRender.current) {
1072
+ isInitialRender.current = false;
1073
+ return;
1074
+ }
1075
+ if (!IsFocused) {
1076
+ onBlur?.();
1077
+ }
1078
+ }, [IsFocused]);
1079
+ return /* @__PURE__ */ jsxs("div", { className: `${style$a.dropdownWrapper}`, style: dropdownWrapperStyle ?? {}, children: [
1080
+ /* @__PURE__ */ jsx(
1081
+ "div",
1082
+ {
1083
+ ref: ComponentRef,
1084
+ className: style$a.dropdownInputWrapper,
1085
+ style: dropdownInputWrapperStyle ?? {},
1086
+ onClick: () => (setIsFocused((state) => !state), CalculatePos()),
1087
+ onFocus: Focus,
1088
+ children: /* @__PURE__ */ jsx(
1089
+ FormInput,
1090
+ {
1091
+ ...rest,
1092
+ onFocusChange: (value) => setIsFocused(value),
1093
+ customFocus: IsFocused,
1094
+ withActive: false,
1095
+ value: withInput ? InputValue : SingleSelectValue?.label ?? "",
1096
+ onChange: (value) => {
1097
+ setInputValue(value);
1098
+ onValueChange?.(value);
1099
+ },
1100
+ toggleFocus: true,
1101
+ formInputStyle: { cursor: withInput ? "text" : "pointer" },
1102
+ leftSlot: withInput && /* @__PURE__ */ jsxs("div", { className: style$a.dropdownInputSlot, children: [
1103
+ dropdownType === "currency" ? /* @__PURE__ */ jsx("p", { children: SingleSelectValue?.label }) : /* @__PURE__ */ jsx("img", { src: getFlagIconUrl(SingleSelectValue?.code), alt: "flag" }),
1104
+ /* @__PURE__ */ jsx("div", { className: `${style$a.dropdownRightIconArrow} ${IsFocused ? style$a.focused : ""}`, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
1105
+ ] }),
1106
+ rightSlot: /* @__PURE__ */ jsxs("div", { className: `${style$a.dropdownRightIcon} ${IsFocused ? style$a.focused : ""}`, children: [
1107
+ (withInput ? InputValue : !withMultiselect && SingleSelectValue) && /* @__PURE__ */ jsx(
1108
+ "div",
1109
+ {
1110
+ onClick: (e) => {
1111
+ e.stopPropagation();
1112
+ if (withInput) {
1113
+ setInputValue("");
1114
+ setIsFocused(false);
1115
+ } else {
1116
+ setSingleSelectValue(null);
1117
+ }
1118
+ },
1119
+ className: style$a.dropdownRightIconClose,
1120
+ children: /* @__PURE__ */ jsx(IconCloseCircle, {})
1121
+ }
1122
+ ),
1123
+ !withInput && /* @__PURE__ */ jsx("div", { className: style$a.dropdownRightIconArrow, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
1124
+ ] }),
1125
+ readOnly: !withInput,
1126
+ forDropdown: true,
1127
+ inputSlotStyle: { width: "100%" },
1128
+ inputSlot: withMultiselect && SelectedData.current.length > 0 ? customInputSlot || /* @__PURE__ */ jsxs("ul", { className: style$a.dropdownInputSlot, style: dropdownInputSlotStyle ?? {}, children: [
1129
+ SelectedData.current.slice(0, SelectedDataLength.current).map((el, index) => {
1130
+ return /* @__PURE__ */ jsxs(
1131
+ "li",
1132
+ {
1133
+ ref: ListItemRef,
1134
+ className: style$a.dropdownInputSlotItem,
1135
+ style: dropdownInputSlotItemStyle ?? {},
1136
+ onClick: (e) => e.stopPropagation(),
1137
+ children: [
1138
+ /* @__PURE__ */ jsx("p", { title: el.label, className: style$a.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: typeof el.customLabel === "function" ? el.customLabel(el) : el.label }),
1139
+ /* @__PURE__ */ jsx(
1140
+ "div",
1141
+ {
1142
+ style: dropdownInputSlotItemCloseStyle ?? {},
1143
+ className: style$a.dropdownInputSlotItemClose,
1144
+ onClick: (e) => {
1145
+ e.stopPropagation();
1146
+ SelectItem(el);
1147
+ },
1148
+ children: /* @__PURE__ */ jsx(IconClose, { width: "16", height: "16", viewBox: "0 0 16 16", stroke: "#95969C" })
1149
+ }
1150
+ )
1151
+ ]
1152
+ },
1153
+ index
1154
+ );
1155
+ }),
1156
+ SelectedData.current.length > SelectedDataLength.current && /* @__PURE__ */ jsx("li", { className: `${style$a.dropdownInputSlotItem} ${style$a.dropdownInputSlotItemMore}`, style: dropdownInputSlotItemMoreStyle ?? {}, children: /* @__PURE__ */ jsx("p", { className: style$a.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: `+${SelectedData.current.length - SelectedDataLength.current}` }) })
1157
+ ] }) : null
1158
+ }
1159
+ )
1160
+ }
1161
+ ),
1162
+ data && data.length > 0 && IsFocused && /* @__PURE__ */ jsxs("div", { ref: DropdownRef, onClick: (e) => e.stopPropagation(), className: style$a.dropdownListContainer, children: [
1163
+ withFilter && /* @__PURE__ */ jsx(
1164
+ FormInput,
1165
+ {
1166
+ placeholder: "Search",
1167
+ searchComponent: true,
1168
+ withFocus: false,
1169
+ withActive: false,
1170
+ value: SearchValue,
1171
+ onChange: (value) => setSearchValue(value)
1172
+ }
1173
+ ),
1174
+ /* @__PURE__ */ jsx("ul", { onClick: (e) => e.stopPropagation(), className: style$a.dropdownList, ref: ListRef, style: dropdownListStyle ?? {}, children: Data.filter((item) => item?.label?.toLowerCase().includes(SearchValue.toLowerCase())).map((item, index) => {
1175
+ return /* @__PURE__ */ jsxs(
1176
+ "li",
1177
+ {
1178
+ style: { ...dropdownItemStyle, cursor: !withMultiselect && item?.disabled ? "not-allowed" : "pointer" },
1179
+ className: `${style$a.dropdownItem} ${!withMultiselect && SingleSelectValue?.id === item.id ? style$a.selected : ""} ${!item?.label || item.label === void 0 || disableAll || item?.disabled ? style$a.disabled : ""} ${!withMultiselect && !item?.disabled ? style$a.hovered : ""}`,
1180
+ onClick: (e) => {
1181
+ e.stopPropagation();
1182
+ if (!withMultiselect && !item?.disabled) {
1183
+ SingleSelect(item);
1184
+ }
1185
+ },
1186
+ children: [
1187
+ withMultiselect && /* @__PURE__ */ jsx("div", { className: style$a.itemCheckbox, style: itemCheckboxStyle ?? {}, children: /* @__PURE__ */ jsx(
1188
+ Checkbox,
1189
+ {
1190
+ multipleChecked: item.id === "SELECT_ALL",
1191
+ disabled: disableAll || item?.disabled,
1192
+ checked: item?.selected,
1193
+ change: () => SelectItem(item)
1194
+ }
1195
+ ) }),
1196
+ /* @__PURE__ */ jsxs("div", { className: style$a.dropdownItemLabel, style: dropdownItemLabelStyle ?? {}, children: [
1197
+ withInput ? /* @__PURE__ */ jsxs("div", { className: style$a.dropdownItemLabelInput, children: [
1198
+ /* @__PURE__ */ jsx("img", { src: getFlagIconUrl(item.code), style: { width: "1.375rem", height: "1.375rem", objectFit: "contain" }, alt: item.name }),
1199
+ /* @__PURE__ */ jsx("span", { title: item.name, className: style$a.countryName, children: item.name || item.label }),
1200
+ /* @__PURE__ */ jsx("span", { className: style$a.countryDialCode, children: dropdownType === "country" ? item.dialCode : item?.label })
1201
+ ] }) : /* @__PURE__ */ jsx(
1202
+ "p",
1203
+ {
1204
+ title: typeof item.label === "string" ? item.label : "",
1205
+ className: `${item.id === "SELECT_ALL" ? style$a.selectAll : ""}`,
1206
+ style: dropdownItemLabelTextStyle ?? {},
1207
+ children: typeof item.customLabel === "function" ? item.customLabel(item) : item.label
1208
+ }
1209
+ ),
1210
+ withMultiselect && /* @__PURE__ */ jsx("p", { children: item.id === "SELECT_ALL" ? `${Data.filter((el) => el.id !== "SELECT_ALL" && el.selected).length}/${data.length}` : "" })
1211
+ ] })
1212
+ ]
1213
+ },
1214
+ index
1215
+ );
1216
+ }) }, Data.length)
1217
+ ] })
1218
+ ] });
1219
+ };
1220
+ const radioWrapper = "Radio-module__radioWrapper";
1221
+ const style$9 = {
1222
+ radioWrapper
1223
+ };
1224
+ const Radio = ({ checked: checked2, change, disabled: disabled2, required: required2, withUncheckState = false, radioType = "default" }) => {
1225
+ useNamespace();
1226
+ useState(false);
1227
+ const onChange = () => {
1228
+ if (!disabled2) {
1229
+ if (withUncheckState) {
1230
+ change?.(!checked2);
1231
+ } else {
1232
+ change?.(true);
1233
+ }
1234
+ }
1235
+ };
1236
+ const RadioIcon = () => {
1237
+ let icon2 = null;
1238
+ let color = disabled2 ? "#95969C" : radioType === "error" ? "#E3292F" : "#0058FF";
1239
+ if (checked2) {
1240
+ if (disabled2) {
1241
+ icon2 = /* @__PURE__ */ jsx(IconRadioCheckedDisabled, { color });
1242
+ } else {
1243
+ icon2 = /* @__PURE__ */ jsx(IconRadioChecked, { color });
1244
+ }
1245
+ } else {
1246
+ if (disabled2) {
1247
+ icon2 = /* @__PURE__ */ jsx(IconRadioUncheckedDisabled, { color });
1248
+ } else {
1249
+ icon2 = /* @__PURE__ */ jsx(IconRadioUnchecked, { color });
1250
+ }
1251
+ }
1252
+ return icon2;
1253
+ };
1254
+ return /* @__PURE__ */ jsxs("div", { className: style$9.radioWrapper, style: { cursor: disabled2 ? "not-allowed" : "pointer" }, onClick: onChange, children: [
1255
+ /* @__PURE__ */ jsx("input", { type: "radio", checked: true, readOnly: true, hidden: true, disabled: disabled2 ?? false, required: required2 }),
1256
+ RadioIcon()
1257
+ ] });
1258
+ };
1259
+ const tooltipContainer = "Tooltip-module__tooltipContainer";
1260
+ const tooltipContent = "Tooltip-module__tooltipContent";
1261
+ const withoutPointer = "Tooltip-module__withoutPointer";
1262
+ const top = "Tooltip-module__top";
1263
+ const right$1 = "Tooltip-module__right";
1264
+ const bottom = "Tooltip-module__bottom";
1265
+ const left$1 = "Tooltip-module__left";
1266
+ const tooltipTitle = "Tooltip-module__tooltipTitle";
1267
+ const tooltipText = "Tooltip-module__tooltipText";
1268
+ const dark$1 = "Tooltip-module__dark";
1269
+ const style$8 = {
1270
+ tooltipContainer,
1271
+ tooltipContent,
1272
+ withoutPointer,
1273
+ top,
1274
+ right: right$1,
1275
+ bottom,
1276
+ left: left$1,
1277
+ tooltipTitle,
1278
+ tooltipText,
1279
+ dark: dark$1
1280
+ };
1281
+ const Tooltip = ({
1282
+ children,
1283
+ tooltipSlot,
1284
+ delay = 400,
1285
+ placement = "top",
1286
+ trigger = "hover",
1287
+ title,
1288
+ text: text2,
1289
+ customText,
1290
+ tooltipContentStyle,
1291
+ tooltipTitlestyle,
1292
+ tooltipTextStyle,
1293
+ tooltipContainerStyle,
1294
+ pointerPosition = "10%",
1295
+ withPointer = false,
1296
+ theme,
1297
+ topCustomOffset = 0,
1298
+ bottomCustomOffset = 0,
1299
+ leftCustomOffset = 0,
1300
+ rightCustomOffset = 0,
1301
+ forceClose = false,
1302
+ onClick
1303
+ }) => {
1304
+ const ComponentRef = useRef(null);
1305
+ const TooltipRef = useRef(null);
1306
+ let timeout;
1307
+ const [Active, setActive] = useState(false);
1308
+ const hasContent = tooltipSlot || title || text2 || customText;
1309
+ const ShowTip = () => {
1310
+ if (trigger === "hover" && hasContent) {
1311
+ timeout = setTimeout(() => {
1312
+ setActive(true);
1313
+ }, delay);
1314
+ }
1315
+ };
1316
+ const HideTip = () => {
1317
+ if (trigger === "hover") {
1318
+ clearTimeout(timeout);
1319
+ setTimeout(() => {
1320
+ setActive(false);
1321
+ }, delay);
1322
+ }
1323
+ };
1324
+ const HandleActive = () => {
1325
+ if (trigger === "click") {
1326
+ onClick?.();
1327
+ setActive((state) => !state);
1328
+ }
1329
+ };
1330
+ const CalculatePos = () => {
1331
+ const componentEl = ComponentRef.current;
1332
+ const tooltipEl = TooltipRef.current;
1333
+ if (!tooltipEl || !componentEl) return;
1334
+ const componentRect = componentEl.getBoundingClientRect();
1335
+ tooltipEl.style.position = "fixed";
1336
+ switch (placement) {
1337
+ case "top":
1338
+ tooltipEl.style.top = `${componentRect.top - tooltipEl.offsetHeight - 8}px`;
1339
+ tooltipEl.style.left = `${componentRect.left + topCustomOffset}px`;
1340
+ break;
1341
+ case "bottom":
1342
+ tooltipEl.style.top = `${componentRect.bottom + 8}px`;
1343
+ tooltipEl.style.left = `${componentRect.left + bottomCustomOffset}px`;
1344
+ break;
1345
+ case "left":
1346
+ tooltipEl.style.top = `${componentRect.top + componentRect.height / 2 - tooltipEl.offsetHeight / 2}px`;
1347
+ tooltipEl.style.left = `${componentRect.left - tooltipEl.offsetWidth - 8 + leftCustomOffset}px`;
1348
+ break;
1349
+ case "right":
1350
+ tooltipEl.style.top = `${componentRect.top + componentRect.height / 2 - tooltipEl.offsetHeight / 2}px`;
1351
+ tooltipEl.style.left = `${componentRect.right + 8 + rightCustomOffset}px`;
1352
+ break;
1353
+ }
1354
+ };
1355
+ useEffect(() => {
1356
+ CalculatePos();
1357
+ }, [ComponentRef, Active, children, placement, tooltipSlot, customText, title, text2]);
1358
+ useEffect(() => {
1359
+ const handleScroll = (e) => {
1360
+ const isInsideTooltip = ComponentRef.current?.contains(e.target);
1361
+ if (!isInsideTooltip) {
1362
+ setActive(false);
1363
+ }
1364
+ };
1365
+ const ClickHandler = (event) => {
1366
+ if (event.composedPath().includes(ComponentRef.current)) return;
1367
+ setActive(false);
1368
+ };
1369
+ document.addEventListener("click", ClickHandler);
1370
+ document.addEventListener("scroll", handleScroll, true);
1371
+ return () => {
1372
+ document.removeEventListener("scroll", handleScroll, true);
1373
+ document.removeEventListener("click", ClickHandler);
1374
+ };
1375
+ }, []);
1376
+ useEffect(() => {
1377
+ if (forceClose) {
1378
+ setActive(false);
1379
+ }
1380
+ }, [forceClose]);
1381
+ useEffect(() => {
1382
+ const element = TooltipRef.current;
1383
+ if (element) {
1384
+ element.style.setProperty("--pointer-position", `${pointerPosition}`);
1385
+ if (!withPointer) {
1386
+ element.classList.add(style$8.withoutPointer);
1387
+ }
1388
+ }
1389
+ }, [Active]);
1390
+ return /* @__PURE__ */ jsxs(
1391
+ "div",
1392
+ {
1393
+ ref: ComponentRef,
1394
+ className: `${theme === "dark" ? style$8.dark : ""} ${style$8.tooltipContainer}`,
1395
+ onClick: HandleActive,
1396
+ onMouseEnter: ShowTip,
1397
+ onMouseLeave: HideTip,
1398
+ style: tooltipContainerStyle ?? {},
1399
+ children: [
1400
+ children,
1401
+ Active && tooltipSlot ? /* @__PURE__ */ jsx(
1402
+ "div",
1403
+ {
1404
+ style: tooltipContentStyle ?? {},
1405
+ onClick: (e) => e.stopPropagation(),
1406
+ ref: TooltipRef,
1407
+ className: `${style$8.tooltipContent} ${placement ? style$8[placement] : style$8.bottom}`,
1408
+ children: tooltipSlot
1409
+ }
1410
+ ) : Active && /* @__PURE__ */ jsxs(
1411
+ "div",
1412
+ {
1413
+ style: tooltipContentStyle ?? {},
1414
+ onClick: (e) => e.stopPropagation(),
1415
+ ref: TooltipRef,
1416
+ className: `${style$8.tooltipContent} ${placement ? style$8[placement] : style$8.bottom}`,
1417
+ children: [
1418
+ customText && typeof customText === "string" && customText,
1419
+ title && title.length > 0 && typeof title === "string" && /* @__PURE__ */ jsx("h2", { className: style$8.tooltipTitle, style: tooltipTitlestyle ?? {}, children: title }),
1420
+ text2 && text2.length > 0 && typeof text2 === "string" && /* @__PURE__ */ jsx("p", { className: style$8.tooltipText, style: tooltipTextStyle ?? {}, children: text2 })
1421
+ ]
1422
+ }
1423
+ )
1424
+ ]
1425
+ }
1426
+ );
1427
+ };
1428
+ const modalOverlay = "Popup-module__modalOverlay";
1429
+ const popupDrawerMode = "Popup-module__popupDrawerMode";
1430
+ const popupContainer = "Popup-module__popupContainer";
1431
+ const closeButton = "Popup-module__closeButton";
1432
+ const withOptions = "Popup-module__withOptions";
1433
+ const horizontal = "Popup-module__horizontal";
1434
+ const popupHeader = "Popup-module__popupHeader";
1435
+ const popupTitle = "Popup-module__popupTitle";
1436
+ const popupDescription = "Popup-module__popupDescription";
1437
+ const typeIcon = "Popup-module__typeIcon";
1438
+ const icon = "Popup-module__icon";
1439
+ const templateWrapper = "Popup-module__templateWrapper";
1440
+ const style$7 = {
1441
+ modalOverlay,
1442
+ popupDrawerMode,
1443
+ popupContainer,
1444
+ closeButton,
1445
+ withOptions,
1446
+ horizontal,
1447
+ popupHeader,
1448
+ popupTitle,
1449
+ popupDescription,
1450
+ typeIcon,
1451
+ icon,
1452
+ templateWrapper
1453
+ };
1454
+ const Popup = ({
1455
+ visible,
1456
+ template,
1457
+ options,
1458
+ children,
1459
+ onClickOutside,
1460
+ onClose,
1461
+ widthType,
1462
+ // "horizontal"
1463
+ modalOverlayStyle,
1464
+ popupContainerStyle,
1465
+ templateWrapperStyle,
1466
+ popupHeaderStyle,
1467
+ popupTitleStyle,
1468
+ closeButtonStyle
1469
+ }) => {
1470
+ const _getType = () => {
1471
+ if (!options || !options?.type) return;
1472
+ switch (String(options?.type)) {
1473
+ case "delete": {
1474
+ return /* @__PURE__ */ jsx(IconTrash, {});
1475
+ }
1476
+ case "unsaved": {
1477
+ return /* @__PURE__ */ jsx(IconSave, {});
1478
+ }
1479
+ case "success": {
1480
+ return /* @__PURE__ */ jsx(IconCheckCircle, {});
1481
+ }
1482
+ }
1483
+ };
1484
+ const ClickClose = () => {
1485
+ if (onClose && typeof onClose === "function") {
1486
+ onClose();
1487
+ }
1488
+ };
1489
+ const componentRef = useRef(null);
1490
+ const handleClick = (event) => {
1491
+ const clickedElement = event.target;
1492
+ if (clickedElement === componentRef.current) {
1493
+ if (onClickOutside && typeof onClickOutside === "function") {
1494
+ onClickOutside();
1495
+ }
1496
+ }
1497
+ };
1498
+ useEffect(() => {
1499
+ document.addEventListener("click", handleClick);
1500
+ return () => {
1501
+ document.removeEventListener("click", handleClick);
1502
+ };
1503
+ }, []);
1504
+ return visible && /* @__PURE__ */ jsx(
1505
+ "div",
1506
+ {
1507
+ ref: componentRef,
1508
+ style: modalOverlayStyle ?? {},
1509
+ className: `
1510
+ ${style$7.modalOverlay}
1511
+ ${options && options?.mode === "drawer" ? style$7.popupDrawerMode : ""}
1512
+ `,
1513
+ children: /* @__PURE__ */ jsxs(
1514
+ "div",
1515
+ {
1516
+ style: popupContainerStyle ?? {},
1517
+ className: `
1518
+ mcPopup_global
1519
+ ${style$7.popupContainer}
1520
+ ${options?.type ? style$7.withOptions : ""}
1521
+ ${widthType === "horizontal" ? style$7.horizontal : ""}
1522
+ `,
1523
+ children: [
1524
+ /* @__PURE__ */ jsx("div", { className: style$7.closeButton, style: closeButtonStyle ?? {}, onClick: ClickClose, children: /* @__PURE__ */ jsx(
1525
+ IconCloseBlack,
1526
+ {
1527
+ color: "#131314"
1528
+ }
1529
+ ) }),
1530
+ (options?.title || options?.description || options?.type) && /* @__PURE__ */ jsxs("div", { className: `${style$7.popupHeader}`, style: popupHeaderStyle ?? {}, children: [
1531
+ _getType() && /* @__PURE__ */ jsx("div", { className: style$7.typeIcon, children: /* @__PURE__ */ jsx(
1532
+ "div",
1533
+ {
1534
+ style: { backgroundColor: options?.type === "success" ? "#DCFAE6" : options?.type === "unsaved" ? "#FEF0C7" : "#FEE4E2" },
1535
+ className: style$7.icon,
1536
+ children: _getType()
1537
+ }
1538
+ ) }),
1539
+ options && options?.title && /* @__PURE__ */ jsx("div", { className: style$7.popupTitle, children: /* @__PURE__ */ jsxs("h2", { style: popupTitleStyle ?? {}, children: [
1540
+ " ",
1541
+ options?.title ?? "",
1542
+ " "
1543
+ ] }) }),
1544
+ options && options?.description && /* @__PURE__ */ jsx("div", { className: style$7.popupDescription, children: /* @__PURE__ */ jsxs("p", { children: [
1545
+ " ",
1546
+ options?.description ?? "",
1547
+ " "
1548
+ ] }) })
1549
+ ] }),
1550
+ /* @__PURE__ */ jsxs("div", { className: style$7.templateWrapper, style: templateWrapperStyle ?? {}, children: [
1551
+ template && template,
1552
+ children && children
1553
+ ] })
1554
+ ]
1555
+ }
1556
+ )
1557
+ }
1558
+ );
1559
+ };
1560
+ const toastContainer = "NotificationToast-module__toastContainer";
1561
+ const notificationToast = "NotificationToast-module__notificationToast";
1562
+ const fadeIn = "NotificationToast-module__fadeIn";
1563
+ const fadeOut = "NotificationToast-module__fadeOut";
1564
+ const neutral = "NotificationToast-module__neutral";
1565
+ const filled = "NotificationToast-module__filled";
1566
+ const notificationToastContentLeftTextTitle = "NotificationToast-module__notificationToastContentLeftTextTitle";
1567
+ const notificationToastContentRightUndoText = "NotificationToast-module__notificationToastContentRightUndoText";
1568
+ const notificationToastContentLeftTextDescription = "NotificationToast-module__notificationToastContentLeftTextDescription";
1569
+ const info = "NotificationToast-module__info";
1570
+ const error = "NotificationToast-module__error";
1571
+ const success = "NotificationToast-module__success";
1572
+ const notificationToastContent = "NotificationToast-module__notificationToastContent";
1573
+ const notificationToastContentLeft = "NotificationToast-module__notificationToastContentLeft";
1574
+ const notificationToastContentInfoIcon = "NotificationToast-module__notificationToastContentInfoIcon";
1575
+ const notificationToastContentLeftText = "NotificationToast-module__notificationToastContentLeftText";
1576
+ const notificationToastContentRight = "NotificationToast-module__notificationToastContentRight";
1577
+ const notificationToastContentRightClose = "NotificationToast-module__notificationToastContentRightClose";
1578
+ const style$6 = {
1579
+ toastContainer,
1580
+ notificationToast,
1581
+ fadeIn,
1582
+ fadeOut,
1583
+ neutral,
1584
+ filled,
1585
+ notificationToastContentLeftTextTitle,
1586
+ notificationToastContentRightUndoText,
1587
+ notificationToastContentLeftTextDescription,
1588
+ info,
1589
+ error,
1590
+ success,
1591
+ notificationToastContent,
1592
+ notificationToastContentLeft,
1593
+ notificationToastContentInfoIcon,
1594
+ notificationToastContentLeftText,
1595
+ notificationToastContentRight,
1596
+ notificationToastContentRightClose
1597
+ };
1598
+ const NotificationToast = ({
1599
+ title,
1600
+ colorType = "neutral",
1601
+ filled: filled2 = false,
1602
+ withClose = false,
1603
+ withUndo = false,
1604
+ withInfoIcon = true,
1605
+ description,
1606
+ customAction,
1607
+ timeout = 4e3,
1608
+ children,
1609
+ onUndo,
1610
+ onClose
1611
+ }) => {
1612
+ const [animationClass, setAnimationClass] = useState("fadeIn");
1613
+ useEffect(() => {
1614
+ const duration = timeout;
1615
+ const fadeDuration = 300;
1616
+ const hideTimeout = setTimeout(() => {
1617
+ setAnimationClass("fadeOut");
1618
+ setTimeout(() => {
1619
+ onClose?.();
1620
+ }, fadeDuration);
1621
+ }, duration);
1622
+ return () => {
1623
+ clearTimeout(hideTimeout);
1624
+ };
1625
+ }, [onClose]);
1626
+ return /* @__PURE__ */ jsx(
1627
+ "div",
1628
+ {
1629
+ className: `${style$6.notificationToast} ${style$6[colorType]} ${filled2 ? style$6.filled : ""} ${style$6[animationClass]}`,
1630
+ style: description ? { padding: "12px" } : {},
1631
+ children: /* @__PURE__ */ jsxs("div", { className: style$6.notificationToastContent, style: description ? { alignItems: "flex-start" } : {}, children: [
1632
+ /* @__PURE__ */ jsxs("div", { className: style$6.notificationToastContentLeft, style: description ? { alignItems: "flex-start" } : {}, children: [
1633
+ withInfoIcon && /* @__PURE__ */ jsx("div", { className: style$6.notificationToastContentInfoIcon, children: colorType === "success" ? /* @__PURE__ */ jsx(IconCheck, { color: filled2 ? "#328707" : "#fff" }) : /* @__PURE__ */ jsx(IconExclamation, { color: filled2 ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : "#0058FF" : "#fff" }) }),
1634
+ /* @__PURE__ */ jsxs("div", { className: style$6.notificationToastContentLeftText, children: [
1635
+ title && /* @__PURE__ */ jsx("p", { className: style$6.notificationToastContentLeftTextTitle, children: title }),
1636
+ description && /* @__PURE__ */ jsx("p", { className: style$6.notificationToastContentLeftTextDescription, children: description }),
1637
+ children && children
1638
+ ] })
1639
+ ] }),
1640
+ /* @__PURE__ */ jsx("div", { className: style$6.notificationToastContentDescription }),
1641
+ /* @__PURE__ */ jsxs("div", { className: style$6.notificationToastContentRight, children: [
1642
+ customAction && customAction,
1643
+ !description && withUndo && /* @__PURE__ */ jsx("p", { className: style$6.notificationToastContentRightUndoText, onClick: () => onUndo?.(), children: "Undo" }),
1644
+ withClose && /* @__PURE__ */ jsx("div", { className: style$6.notificationToastContentRightClose, style: description || !withUndo ? { border: "none" } : {}, onClick: () => onClose?.(), children: /* @__PURE__ */ jsx(
1645
+ IconCloseBlack,
1646
+ {
1647
+ color: filled2 ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : colorType === "info" ? "#0058FF" : "#328707" : "#fff"
1648
+ }
1649
+ ) })
1650
+ ] })
1651
+ ] })
1652
+ }
1653
+ );
1654
+ };
1655
+ const ToastContext = createContext(null);
1656
+ let idCounter = 0;
1657
+ const ToastProvider = ({ children }) => {
1658
+ const [toasts, setToasts] = useState([]);
1659
+ const showToast = (props) => {
1660
+ setToasts((prev) => {
1661
+ const max = props.max ?? Infinity;
1662
+ if (prev.length >= max) return prev;
1663
+ const id = idCounter++;
1664
+ setTimeout(() => {
1665
+ setToasts((prev2) => prev2.filter((t) => t.id !== id));
1666
+ }, props.timeout || 4e3);
1667
+ return [...prev, { id, props }];
1668
+ });
1669
+ };
1670
+ const getPosition = useCallback(() => {
1671
+ if (toasts.length > 0) {
1672
+ switch (toasts[0]?.props?.position) {
1673
+ case "top-left":
1674
+ return { top: "20px", left: "20px" };
1675
+ case "top-right":
1676
+ return { top: "20px", right: "20px" };
1677
+ case "bottom-left":
1678
+ return { bottom: "20px", left: "20px" };
1679
+ case "bottom-right":
1680
+ return { bottom: "20px", right: "20px" };
1681
+ case "top-center":
1682
+ return { top: "20px", left: "50%", transform: "translateX(-50%)" };
1683
+ case "bottom-center":
1684
+ return { bottom: "20px", left: "50%", transform: "translateX(-50%)" };
1685
+ default:
1686
+ return {};
1687
+ }
1688
+ }
1689
+ }, [toasts.length]);
1690
+ return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { showToast }, children: [
1691
+ children,
1692
+ /* @__PURE__ */ jsx("div", { className: style$6.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsx(
1693
+ NotificationToast,
1694
+ {
1695
+ ...props,
1696
+ onClose: () => {
1697
+ setToasts((prev) => prev.filter((t) => t.id !== id));
1698
+ }
1699
+ },
1700
+ id
1701
+ )) })
1702
+ ] });
1703
+ };
1704
+ const createNotificationToast = () => {
1705
+ const context = useContext(ToastContext);
1706
+ if (!context) throw new Error("createNotificationToast must be used within ToastProvider");
1707
+ return context.showToast;
1708
+ };
1709
+ const timepickerWrapper = "TimePicker-module__timepickerWrapper";
1710
+ const timepickerInputWrapper = "TimePicker-module__timepickerInputWrapper";
1711
+ const dropdownRightIcon = "TimePicker-module__dropdownRightIcon";
1712
+ const dropdownRightIconClose = "TimePicker-module__dropdownRightIconClose";
1713
+ const dropdownRightIconArrow = "TimePicker-module__dropdownRightIconArrow";
1714
+ const focused = "TimePicker-module__focused";
1715
+ const timepickerDropdownWrapper = "TimePicker-module__timepickerDropdownWrapper";
1716
+ const timepickerDropdownHeader = "TimePicker-module__timepickerDropdownHeader";
1717
+ const timepickerDropdownHeaderButtons = "TimePicker-module__timepickerDropdownHeaderButtons";
1718
+ const active = "TimePicker-module__active";
1719
+ const timepickerDropdownBody = "TimePicker-module__timepickerDropdownBody";
1720
+ const timepickerDropdownBodyHours = "TimePicker-module__timepickerDropdownBodyHours";
1721
+ const timepickerDropdownBodyMinutes = "TimePicker-module__timepickerDropdownBodyMinutes";
1722
+ const timepickerDropdownBodyAmPm = "TimePicker-module__timepickerDropdownBodyAmPm";
1723
+ const timepickerDropdownFooter = "TimePicker-module__timepickerDropdownFooter";
1724
+ const style$5 = {
1725
+ timepickerWrapper,
1726
+ timepickerInputWrapper,
1727
+ dropdownRightIcon,
1728
+ dropdownRightIconClose,
1729
+ dropdownRightIconArrow,
1730
+ focused,
1731
+ timepickerDropdownWrapper,
1732
+ timepickerDropdownHeader,
1733
+ timepickerDropdownHeaderButtons,
1734
+ active,
1735
+ timepickerDropdownBody,
1736
+ timepickerDropdownBodyHours,
1737
+ timepickerDropdownBodyMinutes,
1738
+ timepickerDropdownBodyAmPm,
1739
+ timepickerDropdownFooter
1740
+ };
1741
+ var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
1742
+ function getDefaultExportFromCjs(x) {
1743
+ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
1744
+ }
1745
+ var customParseFormat$1 = { exports: {} };
1746
+ (function(module, exports) {
1747
+ !function(e, t) {
1748
+ module.exports = t();
1749
+ }(commonjsGlobal, function() {
1750
+ var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, t = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, n = /\d/, r = /\d\d/, i = /\d\d?/, o = /\d*[^-_:/,()\s\d]+/, s = {}, a = function(e2) {
1751
+ return (e2 = +e2) + (e2 > 68 ? 1900 : 2e3);
1752
+ };
1753
+ var f = function(e2) {
1754
+ return function(t2) {
1755
+ this[e2] = +t2;
1756
+ };
1757
+ }, h = [/[+-]\d\d:?(\d\d)?|Z/, function(e2) {
1758
+ (this.zone || (this.zone = {})).offset = function(e3) {
1759
+ if (!e3) return 0;
1760
+ if ("Z" === e3) return 0;
1761
+ var t2 = e3.match(/([+-]|\d\d)/g), n2 = 60 * t2[1] + (+t2[2] || 0);
1762
+ return 0 === n2 ? 0 : "+" === t2[0] ? -n2 : n2;
1763
+ }(e2);
1764
+ }], u = function(e2) {
1765
+ var t2 = s[e2];
1766
+ return t2 && (t2.indexOf ? t2 : t2.s.concat(t2.f));
1767
+ }, d = function(e2, t2) {
1768
+ var n2, r2 = s.meridiem;
1769
+ if (r2) {
1770
+ for (var i2 = 1; i2 <= 24; i2 += 1) if (e2.indexOf(r2(i2, 0, t2)) > -1) {
1771
+ n2 = i2 > 12;
1772
+ break;
1773
+ }
1774
+ } else n2 = e2 === (t2 ? "pm" : "PM");
1775
+ return n2;
1776
+ }, c = { A: [o, function(e2) {
1777
+ this.afternoon = d(e2, false);
1778
+ }], a: [o, function(e2) {
1779
+ this.afternoon = d(e2, true);
1780
+ }], Q: [n, function(e2) {
1781
+ this.month = 3 * (e2 - 1) + 1;
1782
+ }], S: [n, function(e2) {
1783
+ this.milliseconds = 100 * +e2;
1784
+ }], SS: [r, function(e2) {
1785
+ this.milliseconds = 10 * +e2;
1786
+ }], SSS: [/\d{3}/, function(e2) {
1787
+ this.milliseconds = +e2;
1788
+ }], s: [i, f("seconds")], ss: [i, f("seconds")], m: [i, f("minutes")], mm: [i, f("minutes")], H: [i, f("hours")], h: [i, f("hours")], HH: [i, f("hours")], hh: [i, f("hours")], D: [i, f("day")], DD: [r, f("day")], Do: [o, function(e2) {
1789
+ var t2 = s.ordinal, n2 = e2.match(/\d+/);
1790
+ if (this.day = n2[0], t2) for (var r2 = 1; r2 <= 31; r2 += 1) t2(r2).replace(/\[|\]/g, "") === e2 && (this.day = r2);
1791
+ }], w: [i, f("week")], ww: [r, f("week")], M: [i, f("month")], MM: [r, f("month")], MMM: [o, function(e2) {
1792
+ var t2 = u("months"), n2 = (u("monthsShort") || t2.map(function(e3) {
1793
+ return e3.slice(0, 3);
1794
+ })).indexOf(e2) + 1;
1795
+ if (n2 < 1) throw new Error();
1796
+ this.month = n2 % 12 || n2;
1797
+ }], MMMM: [o, function(e2) {
1798
+ var t2 = u("months").indexOf(e2) + 1;
1799
+ if (t2 < 1) throw new Error();
1800
+ this.month = t2 % 12 || t2;
1801
+ }], Y: [/[+-]?\d+/, f("year")], YY: [r, function(e2) {
1802
+ this.year = a(e2);
1803
+ }], YYYY: [/\d{4}/, f("year")], Z: h, ZZ: h };
1804
+ function l(n2) {
1805
+ var r2, i2;
1806
+ r2 = n2, i2 = s && s.formats;
1807
+ for (var o2 = (n2 = r2.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function(t2, n3, r3) {
1808
+ var o3 = r3 && r3.toUpperCase();
1809
+ return n3 || i2[r3] || e[r3] || i2[o3].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(e2, t3, n4) {
1810
+ return t3 || n4.slice(1);
1811
+ });
1812
+ })).match(t), a2 = o2.length, f2 = 0; f2 < a2; f2 += 1) {
1813
+ var h2 = o2[f2], u2 = c[h2], d2 = u2 && u2[0], l2 = u2 && u2[1];
1814
+ o2[f2] = l2 ? { regex: d2, parser: l2 } : h2.replace(/^\[|\]$/g, "");
1815
+ }
1816
+ return function(e2) {
1817
+ for (var t2 = {}, n3 = 0, r3 = 0; n3 < a2; n3 += 1) {
1818
+ var i3 = o2[n3];
1819
+ if ("string" == typeof i3) r3 += i3.length;
1820
+ else {
1821
+ var s2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r3), u3 = s2.exec(h3)[0];
1822
+ f3.call(t2, u3), e2 = e2.replace(u3, "");
1823
+ }
1824
+ }
1825
+ return function(e3) {
1826
+ var t3 = e3.afternoon;
1827
+ if (void 0 !== t3) {
1828
+ var n4 = e3.hours;
1829
+ t3 ? n4 < 12 && (e3.hours += 12) : 12 === n4 && (e3.hours = 0), delete e3.afternoon;
1830
+ }
1831
+ }(t2), t2;
1832
+ };
1833
+ }
1834
+ return function(e2, t2, n2) {
1835
+ n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (a = e2.parseTwoDigitYear);
1836
+ var r2 = t2.prototype, i2 = r2.parse;
1837
+ r2.parse = function(e3) {
1838
+ var t3 = e3.date, r3 = e3.utc, o2 = e3.args;
1839
+ this.$u = r3;
1840
+ var a2 = o2[1];
1841
+ if ("string" == typeof a2) {
1842
+ var f2 = true === o2[2], h2 = true === o2[3], u2 = f2 || h2, d2 = o2[2];
1843
+ h2 && (d2 = o2[2]), s = this.$locale(), !f2 && d2 && (s = n2.Ls[d2]), this.$d = function(e4, t4, n3, r4) {
1844
+ try {
1845
+ if (["x", "X"].indexOf(t4) > -1) return new Date(("X" === t4 ? 1e3 : 1) * e4);
1846
+ var i3 = l(t4)(e4), o3 = i3.year, s2 = i3.month, a3 = i3.day, f3 = i3.hours, h3 = i3.minutes, u3 = i3.seconds, d3 = i3.milliseconds, c3 = i3.zone, m2 = i3.week, M2 = /* @__PURE__ */ new Date(), Y = a3 || (o3 || s2 ? 1 : M2.getDate()), p = o3 || M2.getFullYear(), v = 0;
1847
+ o3 && !s2 || (v = s2 > 0 ? s2 - 1 : M2.getMonth());
1848
+ var D, w = f3 || 0, g = h3 || 0, y = u3 || 0, L = d3 || 0;
1849
+ return c3 ? new Date(Date.UTC(p, v, Y, w, g, y, L + 60 * c3.offset * 1e3)) : n3 ? new Date(Date.UTC(p, v, Y, w, g, y, L)) : (D = new Date(p, v, Y, w, g, y, L), m2 && (D = r4(D).week(m2).toDate()), D);
1850
+ } catch (e5) {
1851
+ return /* @__PURE__ */ new Date("");
1852
+ }
1853
+ }(t3, a2, r3, n2), this.init(), d2 && true !== d2 && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = /* @__PURE__ */ new Date("")), s = {};
1854
+ } else if (a2 instanceof Array) for (var c2 = a2.length, m = 1; m <= c2; m += 1) {
1855
+ o2[1] = a2[m - 1];
1856
+ var M = n2.apply(this, o2);
1857
+ if (M.isValid()) {
1858
+ this.$d = M.$d, this.$L = M.$L, this.init();
1859
+ break;
1860
+ }
1861
+ m === c2 && (this.$d = /* @__PURE__ */ new Date(""));
1862
+ }
1863
+ else i2.call(this, e3);
1864
+ };
1865
+ };
1866
+ });
1867
+ })(customParseFormat$1);
1868
+ var customParseFormatExports = customParseFormat$1.exports;
1869
+ const customParseFormat = /* @__PURE__ */ getDefaultExportFromCjs(customParseFormatExports);
1870
+ dayjs.extend(customParseFormat);
1871
+ const TimePicker = ({
1872
+ value,
1873
+ defaultTimeType = "24",
1874
+ defaultAmPm = "AM",
1875
+ withConfirm = true,
1876
+ mode = "single",
1877
+ onChange,
1878
+ onFocus,
1879
+ onBlur,
1880
+ ...rest
1881
+ }) => {
1882
+ const ComponentRef = useRef(null);
1883
+ const DropdownRef = useRef(null);
1884
+ const [IsFocused, setIsFocused] = useState(false);
1885
+ const [TimeType, setTimeType] = useState(defaultTimeType);
1886
+ const hours12 = Array.from({ length: 12 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
1887
+ const hours24 = Array.from({ length: 24 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
1888
+ const minutes = Array.from({ length: 60 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
1889
+ const [Value, setValue] = useState("");
1890
+ const [Minutes, setMinutes] = useState(null);
1891
+ const [Hours, setHours] = useState(null);
1892
+ const [AmPm, setAmPm] = useState(defaultAmPm);
1893
+ const CalculatePos = () => {
1894
+ const componentEl = ComponentRef.current;
1895
+ const dropdownEl = DropdownRef.current;
1896
+ if (!dropdownEl || !componentEl) return;
1897
+ const componentRect = componentEl.getBoundingClientRect();
1898
+ const windowHeight = window.innerHeight;
1899
+ dropdownEl.style.position = "fixed";
1900
+ dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
1901
+ if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
1902
+ dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight + 18}px`;
1903
+ dropdownEl.style.bottom = "unset";
1904
+ } else {
1905
+ dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
1906
+ dropdownEl.style.bottom = "unset";
1907
+ }
1908
+ };
1909
+ const Focus = () => {
1910
+ onFocus?.();
1911
+ };
1912
+ const Clear = () => {
1913
+ setValue("");
1914
+ setHours(null);
1915
+ setMinutes(null);
1916
+ setAmPm("AM");
1917
+ };
1918
+ useEffect(() => {
1919
+ if (value && value.length > 0) {
1920
+ setValue(value);
1921
+ }
1922
+ }, [value]);
1923
+ useEffect(() => {
1924
+ if (!Hours && !Minutes) return;
1925
+ const hour = parseInt(Hours ?? "0", 10);
1926
+ const minute = parseInt(Minutes ?? "0", 10);
1927
+ const adjustedHour = TimeType === "12" ? AmPm === "PM" && hour < 12 ? hour + 12 : AmPm === "AM" && hour === 12 ? 0 : hour : hour;
1928
+ const formattedTime = dayjs().hour(adjustedHour).minute(minute).format(TimeType === "12" ? "hh:mm A" : "HH:mm");
1929
+ setValue(formattedTime);
1930
+ if (!withConfirm) {
1931
+ onChange?.(formattedTime);
1932
+ }
1933
+ }, [Hours, Minutes, AmPm, TimeType]);
1934
+ const isInitialRender = useRef(true);
1935
+ useEffect(() => {
1936
+ if (isInitialRender.current) {
1937
+ isInitialRender.current = false;
1938
+ return;
1939
+ }
1940
+ if (!IsFocused) {
1941
+ onBlur?.();
1942
+ }
1943
+ }, [IsFocused]);
1944
+ useEffect(() => {
1945
+ CalculatePos();
1946
+ }, [ComponentRef, IsFocused]);
1947
+ useEffect(() => {
1948
+ const ClickHandler = (event) => {
1949
+ if (!ComponentRef.current || !DropdownRef.current) return;
1950
+ if (event.composedPath().includes(ComponentRef.current) || event.composedPath().includes(DropdownRef.current)) return;
1951
+ setIsFocused(false);
1952
+ };
1953
+ const ScrollHandler = (event) => {
1954
+ if (!ComponentRef.current || DropdownRef.current) return;
1955
+ setIsFocused(false);
1956
+ };
1957
+ document.addEventListener("click", ClickHandler);
1958
+ document.addEventListener("wheel", ScrollHandler);
1959
+ return () => {
1960
+ document.removeEventListener("click", ClickHandler);
1961
+ document.removeEventListener("wheel", ScrollHandler);
1962
+ };
1963
+ }, []);
1964
+ return /* @__PURE__ */ jsxs("div", { className: `${style$5.timepickerWrapper} ${IsFocused ? style$5.focused : ""}`, children: [
1965
+ /* @__PURE__ */ jsx("div", { ref: ComponentRef, className: style$5.timepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), onFocus: Focus, children: /* @__PURE__ */ jsx(
1966
+ FormInput,
1967
+ {
1968
+ ...rest,
1969
+ onFocusChange: (value2) => setIsFocused(value2),
1970
+ customFocus: IsFocused,
1971
+ withActive: false,
1972
+ value: Value,
1973
+ toggleFocus: true,
1974
+ formInputStyle: { cursor: "pointer" },
1975
+ rightSlot: /* @__PURE__ */ jsxs("div", { className: `${style$5.dropdownRightIcon} ${IsFocused ? style$5.focused : ""}`, children: [
1976
+ Value && /* @__PURE__ */ jsx(
1977
+ "div",
1978
+ {
1979
+ onClick: (e) => {
1980
+ e.stopPropagation();
1981
+ Clear();
1982
+ },
1983
+ className: style$5.dropdownRightIconClose,
1984
+ children: /* @__PURE__ */ jsx(IconCloseCircle, {})
1985
+ }
1986
+ ),
1987
+ /* @__PURE__ */ jsx("div", { className: style$5.dropdownRightIconArrow, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
1988
+ ] }),
1989
+ readOnly: true,
1990
+ forDropdown: true
1991
+ }
1992
+ ) }),
1993
+ IsFocused && /* @__PURE__ */ jsxs("div", { ref: DropdownRef, className: style$5.timepickerDropdownWrapper, children: [
1994
+ /* @__PURE__ */ jsx("div", { className: style$5.timepickerDropdownHeader, children: /* @__PURE__ */ jsxs("div", { className: style$5.timepickerDropdownHeaderButtons, children: [
1995
+ /* @__PURE__ */ jsx(
1996
+ "p",
1997
+ {
1998
+ className: TimeType === "12" ? style$5.active : "",
1999
+ onClick: () => {
2000
+ Clear();
2001
+ setTimeType("12");
2002
+ },
2003
+ children: "AM -PM"
2004
+ }
2005
+ ),
2006
+ /* @__PURE__ */ jsx(
2007
+ "p",
2008
+ {
2009
+ className: TimeType === "24" ? style$5.active : "",
2010
+ onClick: () => {
2011
+ Clear();
2012
+ setTimeType("24");
2013
+ },
2014
+ children: "24 Hours"
2015
+ }
2016
+ )
2017
+ ] }) }),
2018
+ /* @__PURE__ */ jsxs("div", { className: style$5.timepickerDropdownBody, children: [
2019
+ /* @__PURE__ */ jsx("div", { className: style$5.timepickerDropdownBodyHours, children: (TimeType === "12" ? hours12 : hours24).map((hour) => /* @__PURE__ */ jsx("p", { className: Hours === hour || Value?.split(":")[0] === hour ? style$5.active : "", onClick: () => setHours(hour), children: hour }, hour)) }),
2020
+ /* @__PURE__ */ jsx("div", { className: style$5.timepickerDropdownBodyMinutes, children: minutes.map((minute) => /* @__PURE__ */ jsx("p", { className: Minutes === minute || Value?.split(":")[1] === minute ? style$5.active : "", onClick: () => setMinutes(minute), children: minute }, minute)) }),
2021
+ TimeType === "12" && /* @__PURE__ */ jsxs("div", { className: style$5.timepickerDropdownBodyAmPm, children: [
2022
+ /* @__PURE__ */ jsx("p", { className: AmPm === "AM" ? style$5.active : "", onClick: () => setAmPm("AM"), children: "AM" }, "AM"),
2023
+ /* @__PURE__ */ jsx("p", { className: AmPm === "PM" ? style$5.active : "", onClick: () => setAmPm("PM"), children: "PM" }, "PM")
2024
+ ] })
2025
+ ] }),
2026
+ withConfirm && /* @__PURE__ */ jsx("div", { className: style$5.timepickerDropdownFooter, children: /* @__PURE__ */ jsx(MainButton, { label: "Confirm time", onClick: () => onChange?.(Value) }) })
2027
+ ] })
2028
+ ] });
2029
+ };
2030
+ const datepickerContainer = "Datepicker-module__datepickerContainer";
2031
+ const datepickerInputWrapper = "Datepicker-module__datepickerInputWrapper";
2032
+ const datepickerLeftIcon = "Datepicker-module__datepickerLeftIcon";
2033
+ const datepickerRightIcon = "Datepicker-module__datepickerRightIcon";
2034
+ const style$4 = {
2035
+ datepickerContainer,
2036
+ datepickerInputWrapper,
2037
+ datepickerLeftIcon,
2038
+ datepickerRightIcon
2039
+ };
2040
+ const datePicker = "Calendar-module__datePicker";
2041
+ const dualCalendar = "Calendar-module__dualCalendar";
2042
+ const dualCalendarWithQuick = "Calendar-module__dualCalendarWithQuick";
2043
+ const border = "Calendar-module__border";
2044
+ const calendarWrapper = "Calendar-module__calendarWrapper";
2045
+ const quickPick = "Calendar-module__quickPick";
2046
+ const datePickerHeader = "Calendar-module__datePickerHeader";
2047
+ const div = "Calendar-module__div";
2048
+ const currentDateHeader = "Calendar-module__currentDateHeader";
2049
+ const left = "Calendar-module__left";
2050
+ const right = "Calendar-module__right";
2051
+ const singleIcon = "Calendar-module__singleIcon";
2052
+ const doubleIcon = "Calendar-module__doubleIcon";
2053
+ const spacerRow = "Calendar-module__spacerRow";
2054
+ const day = "Calendar-module__day";
2055
+ const today = "Calendar-module__today";
2056
+ const inRange = "Calendar-module__inRange";
2057
+ const selected$1 = "Calendar-module__selected";
2058
+ const startDate = "Calendar-module__startDate";
2059
+ const endDate = "Calendar-module__endDate";
2060
+ const disabled = "Calendar-module__disabled";
2061
+ const otherMonth = "Calendar-module__otherMonth";
2062
+ const monthsWrapper = "Calendar-module__monthsWrapper";
2063
+ const month = "Calendar-module__month";
2064
+ const pickedMonth = "Calendar-module__pickedMonth";
2065
+ const buttonWrapper = "Calendar-module__buttonWrapper";
2066
+ const style$3 = {
2067
+ datePicker,
2068
+ dualCalendar,
2069
+ dualCalendarWithQuick,
2070
+ border,
2071
+ calendarWrapper,
2072
+ quickPick,
2073
+ datePickerHeader,
2074
+ div,
2075
+ currentDateHeader,
2076
+ left,
2077
+ right,
2078
+ singleIcon,
2079
+ doubleIcon,
2080
+ spacerRow,
2081
+ day,
2082
+ today,
2083
+ inRange,
2084
+ selected: selected$1,
2085
+ startDate,
2086
+ endDate,
2087
+ disabled,
2088
+ otherMonth,
2089
+ monthsWrapper,
2090
+ month,
2091
+ pickedMonth,
2092
+ buttonWrapper
2093
+ };
2094
+ dayjs.extend(customParseFormat);
2095
+ const Calendar = ({
2096
+ valueFormat,
2097
+ quickPick: quickPick2,
2098
+ onChange,
2099
+ CurrentMonth,
2100
+ setCurrentMonth,
2101
+ SelectedDate,
2102
+ namespace,
2103
+ customYears,
2104
+ setSelectedDate,
2105
+ IsFocused,
2106
+ setIsFocused,
2107
+ mode,
2108
+ RangeSelection,
2109
+ setRangeSelection,
2110
+ pickerType,
2111
+ disabledDatesRange,
2112
+ disabledDatesTill,
2113
+ disabledDatesFrom,
2114
+ CalendarRef,
2115
+ defaultValue,
2116
+ selectedStyle,
2117
+ endDateStyle,
2118
+ startDateStyle,
2119
+ inRangeStyle,
2120
+ otherMonthStyle,
2121
+ todayStyle,
2122
+ weekDayStyle,
2123
+ quickPickStyle,
2124
+ monthStyle
2125
+ }) => {
2126
+ const daysOfWeek = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
2127
+ const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
2128
+ dayjs().year();
2129
+ const [PickedMonth, setPickedMonth] = useState("");
2130
+ const QuickPicker = useRef([]);
2131
+ const [ShowMonths, setShowMonths] = useState(false);
2132
+ const getMonthMatrix = (month2) => {
2133
+ if (customYears?.length && !customYears.includes(month2.year().toString())) {
2134
+ return [];
2135
+ }
2136
+ const startDay = (month2.startOf("month").day() + 6) % 7;
2137
+ const endDay = month2.endOf("month").date();
2138
+ const prevMonthEnd = month2.subtract(1, "month").endOf("month").date();
2139
+ const matrix = [];
2140
+ let week = [];
2141
+ let day2 = 1;
2142
+ for (let i = 0; i < startDay; i++) {
2143
+ week.push({
2144
+ date: month2.subtract(1, "month").date(prevMonthEnd - startDay + i + 1),
2145
+ currentMonth: false
2146
+ });
2147
+ }
2148
+ while (day2 <= endDay) {
2149
+ week.push({ date: month2.date(day2++), currentMonth: true });
2150
+ if (week.length === 7) {
2151
+ matrix.push(week);
2152
+ week = [];
2153
+ }
2154
+ }
2155
+ let nextMonthDay = 1;
2156
+ while (matrix.length < 5) {
2157
+ if (week.length === 7) {
2158
+ matrix.push(week);
2159
+ week = [];
2160
+ }
2161
+ week.push({
2162
+ date: month2.add(1, "month").date(nextMonthDay++),
2163
+ currentMonth: false
2164
+ });
2165
+ }
2166
+ if (week.length) {
2167
+ while (week.length < 7) {
2168
+ week.push({
2169
+ date: month2.add(1, "month").date(nextMonthDay++),
2170
+ currentMonth: false
2171
+ });
2172
+ }
2173
+ matrix.push(week);
2174
+ }
2175
+ return matrix;
2176
+ };
2177
+ const currentMonthMatrix = getMonthMatrix(CurrentMonth);
2178
+ const nextMonthMatrix = pickerType === "dual" ? getMonthMatrix(CurrentMonth.add(1, "month")) : null;
2179
+ const getQuickPickers = () => {
2180
+ let array = [];
2181
+ if (quickPick2 && Array.isArray(quickPick2) && quickPick2.length > 0) {
2182
+ quickPick2.forEach((item) => {
2183
+ switch (item) {
2184
+ case "today":
2185
+ QuickPicker.current.push({ name: "Today", key: "Today" });
2186
+ break;
2187
+ case "yesterday":
2188
+ QuickPicker.current.push({ name: "Yesterday", key: "Yesterday" });
2189
+ break;
2190
+ case "thisweek":
2191
+ QuickPicker.current.push({ name: "This week", key: "Thisweek" });
2192
+ break;
2193
+ case "lastweek":
2194
+ QuickPicker.current.push({ name: "Last week", key: "Lastweek" });
2195
+ break;
2196
+ case "thismonth":
2197
+ QuickPicker.current.push({ name: "This month", key: "Thismonth" });
2198
+ break;
2199
+ case "lastmonth":
2200
+ QuickPicker.current.push({ name: "Last month", key: "Lastmonth" });
2201
+ break;
2202
+ case "thisyear":
2203
+ QuickPicker.current.push({ name: "This year", key: "Thisyear" });
2204
+ break;
2205
+ case "lastyear":
2206
+ QuickPicker.current.push({ name: "Last year", key: "Lastyear" });
2207
+ break;
2208
+ case "alltime":
2209
+ QuickPicker.current.push({ name: "All time", key: "Alltime" });
2210
+ break;
2211
+ }
2212
+ });
2213
+ }
2214
+ QuickPicker.current = _filterUnique(QuickPicker.current, "key");
2215
+ array = QuickPicker.current;
2216
+ return array;
2217
+ };
2218
+ const handleQuickPick = (item) => {
2219
+ let obj = { start: "", end: "" };
2220
+ setSelectedDate(null);
2221
+ switch (item.key?.toLowerCase()) {
2222
+ case "today":
2223
+ setRangeSelection({
2224
+ start: dayjs(),
2225
+ end: dayjs()
2226
+ });
2227
+ obj.start = dayjs();
2228
+ break;
2229
+ case "yesterday":
2230
+ setSelectedDate(dayjs().subtract(1, "day"));
2231
+ setRangeSelection({
2232
+ start: dayjs().subtract(1, "day"),
2233
+ end: dayjs().subtract(1, "day")
2234
+ });
2235
+ obj.start = dayjs().subtract(1, "day");
2236
+ break;
2237
+ case "thisweek":
2238
+ setRangeSelection({
2239
+ start: dayjs().startOf("week"),
2240
+ end: dayjs().endOf("week")
2241
+ });
2242
+ obj.start = dayjs().startOf("week");
2243
+ obj.end = dayjs().endOf("week");
2244
+ break;
2245
+ case "lastweek":
2246
+ setRangeSelection({
2247
+ start: dayjs().subtract(1, "week").startOf("week"),
2248
+ end: dayjs().subtract(1, "week").endOf("week")
2249
+ });
2250
+ obj.start = dayjs().subtract(1, "week").startOf("week");
2251
+ obj.end = dayjs().subtract(1, "week").endOf("week");
2252
+ break;
2253
+ case "thismonth":
2254
+ setRangeSelection({
2255
+ start: dayjs().startOf("month"),
2256
+ end: dayjs().endOf("month")
2257
+ });
2258
+ obj.start = dayjs().startOf("month");
2259
+ obj.end = dayjs().endOf("month");
2260
+ break;
2261
+ case "lastmonth":
2262
+ setRangeSelection({
2263
+ start: dayjs().subtract(1, "month").startOf("month"),
2264
+ end: dayjs().subtract(1, "month").endOf("month")
2265
+ });
2266
+ obj.start = dayjs().subtract(1, "month").startOf("month");
2267
+ obj.end = dayjs().subtract(1, "month").endOf("month");
2268
+ break;
2269
+ case "thisyear":
2270
+ setRangeSelection({
2271
+ start: dayjs().startOf("year"),
2272
+ end: dayjs().endOf("year")
2273
+ });
2274
+ obj.start = dayjs().startOf("year");
2275
+ obj.end = dayjs().endOf("year");
2276
+ break;
2277
+ case "lastyear":
2278
+ setRangeSelection({
2279
+ start: dayjs().subtract(1, "year").startOf("year"),
2280
+ end: dayjs().subtract(1, "year").endOf("year")
2281
+ });
2282
+ obj.start = dayjs().subtract(1, "year").startOf("year");
2283
+ obj.end = dayjs().subtract(1, "year").endOf("year");
2284
+ break;
2285
+ case "alltime":
2286
+ setRangeSelection({
2287
+ start: "",
2288
+ end: ""
2289
+ });
2290
+ obj.start = "";
2291
+ obj.end = "";
2292
+ break;
2293
+ default:
2294
+ console.warn("Unsupported quick pick option:", item);
2295
+ break;
2296
+ }
2297
+ if (onChange && typeof onChange === "function") {
2298
+ const range = {
2299
+ start: obj.start ? obj.start : "",
2300
+ end: obj.end ? obj.end : ""
2301
+ };
2302
+ setIsFocused(false);
2303
+ onChange(range.end === "" ? range.start : range);
2304
+ }
2305
+ };
2306
+ const HandleChooseMonth = () => {
2307
+ return;
2308
+ };
2309
+ const handleDayClick = (day2, isCurrentMonth, withDefault = false) => {
2310
+ if (!isCurrentMonth) {
2311
+ setCurrentMonth(day2.startOf("month"));
2312
+ }
2313
+ if (mode === "range") {
2314
+ setRangeSelection((prev) => {
2315
+ if (!prev.start || prev.start && prev.end) {
2316
+ if (onChange && typeof onChange === "function") {
2317
+ onChange({
2318
+ start: day2 ?? "",
2319
+ end: ""
2320
+ });
2321
+ }
2322
+ return { start: day2 ?? "", end: "" };
2323
+ } else if (prev.start && !prev.end) {
2324
+ if (day2.isBefore(prev.start, "day")) {
2325
+ if (onChange && typeof onChange === "function") {
2326
+ onChange({
2327
+ start: day2 ?? "",
2328
+ end: prev?.start ?? ""
2329
+ });
2330
+ }
2331
+ return { start: day2 ?? "", end: prev?.start ?? "" };
2332
+ } else {
2333
+ onChange({
2334
+ ...prev,
2335
+ end: day2 ?? ""
2336
+ });
2337
+ return { ...prev, end: day2 ?? "" };
2338
+ }
2339
+ }
2340
+ return prev;
2341
+ });
2342
+ } else {
2343
+ setRangeSelection({ start: null, end: null });
2344
+ setSelectedDate(day2);
2345
+ if (!withDefault) {
2346
+ setIsFocused(false);
2347
+ if (onChange && typeof onChange === "function") {
2348
+ onChange(day2.format(valueFormat));
2349
+ }
2350
+ }
2351
+ }
2352
+ };
2353
+ const goToNextMonth = () => {
2354
+ setCurrentMonth(CurrentMonth.add(1, "month"));
2355
+ };
2356
+ const goToPreviousMonth = () => {
2357
+ setCurrentMonth(CurrentMonth.subtract(1, "month"));
2358
+ };
2359
+ const goToNextYear = () => {
2360
+ setCurrentMonth(CurrentMonth.add(1, "year"));
2361
+ };
2362
+ const goToPreviousYear = () => {
2363
+ setCurrentMonth(CurrentMonth.subtract(1, "year"));
2364
+ };
2365
+ useEffect(() => {
2366
+ if (defaultValue?.state) {
2367
+ if (Array.isArray(defaultValue?.value)) {
2368
+ setRangeSelection({ start: dayjs(defaultValue?.value[0], valueFormat), end: dayjs(defaultValue?.value[1], valueFormat) });
2369
+ } else {
2370
+ handleDayClick(dayjs(defaultValue.value), false, true);
2371
+ }
2372
+ defaultValue.state = false;
2373
+ }
2374
+ }, []);
2375
+ return /* @__PURE__ */ jsx(
2376
+ "div",
2377
+ {
2378
+ ref: CalendarRef,
2379
+ className: `${namespace === "namespaceHr" ? style$3.namespaceHr : ""} ${style$3.datePicker} ${IsFocused ? style$3.focused : ""} ${pickerType === "dual" ? quickPick2 && Array.isArray(quickPick2) && quickPick2.length > 0 ? style$3.dualCalendarWithQuick : style$3.dualCalendar : ""} `,
2380
+ onClick: (e) => e.stopPropagation(),
2381
+ style: pickerType === "dual" && quickPick2 && Array.isArray(quickPick2) && quickPick2.length > 0 ? { width: "848px" } : {},
2382
+ children: /* @__PURE__ */ jsxs("div", { className: style$3.div, children: [
2383
+ pickerType === "dual" ? /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", justifyContent: "space-between" }, children: [
2384
+ /* @__PURE__ */ jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "80px" }, children: [
2385
+ /* @__PURE__ */ jsxs("div", { className: style$3.left, children: [
2386
+ (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style$3.doubleIcon, onClick: goToPreviousYear, children: [
2387
+ /* @__PURE__ */ jsx(IconLeft, {}),
2388
+ /* @__PURE__ */ jsx(IconLeft, {})
2389
+ ] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
2390
+ !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style$3.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsx(IconLeft, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
2391
+ ] }),
2392
+ /* @__PURE__ */ jsx("div", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") })
2393
+ ] }),
2394
+ /* @__PURE__ */ jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "80px" }, children: [
2395
+ /* @__PURE__ */ jsx("span", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.add(1, "month").format("MMMM") : CurrentMonth.add(1, "month").format("MMMM YYYY") }),
2396
+ /* @__PURE__ */ jsxs("div", { className: style$3.right, children: [
2397
+ !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style$3.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsx(IconRight, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
2398
+ (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style$3.doubleIcon, onClick: goToNextYear, children: [
2399
+ /* @__PURE__ */ jsx(IconRight, {}),
2400
+ /* @__PURE__ */ jsx(IconRight, {})
2401
+ ] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
2402
+ ] })
2403
+ ] })
2404
+ ] }) : /* @__PURE__ */ jsxs("div", { className: style$3.datePickerHeader, children: [
2405
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
2406
+ /* @__PURE__ */ jsxs("div", { className: style$3.left, children: [
2407
+ (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style$3.doubleIcon, onClick: goToPreviousYear, children: [
2408
+ /* @__PURE__ */ jsx(IconLeft, {}),
2409
+ /* @__PURE__ */ jsx(IconLeft, {})
2410
+ ] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
2411
+ !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style$3.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsx(IconLeft, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
2412
+ ] }),
2413
+ /* @__PURE__ */ jsx("div", { className: style$3.currentDateHeader, style: monthStyle ?? {}, onClick: HandleChooseMonth, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") }),
2414
+ /* @__PURE__ */ jsxs("div", { className: style$3.right, children: [
2415
+ !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style$3.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsx(IconRight, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
2416
+ (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style$3.doubleIcon, onClick: goToNextYear, children: [
2417
+ /* @__PURE__ */ jsx(IconRight, {}),
2418
+ /* @__PURE__ */ jsx(IconRight, {})
2419
+ ] }) : /* @__PURE__ */ jsx("div", { className: style$3.doubleIcon })
2420
+ ] })
2421
+ ] }),
2422
+ pickerType === "single" && quickPick2 && Array.isArray(quickPick2) && quickPick2.length > 0 && /* @__PURE__ */ jsx("ul", { className: style$3.quickPick, children: getQuickPickers().slice(0, 3).map((item) => {
2423
+ return /* @__PURE__ */ jsx("li", { style: quickPickStyle ?? {}, onClick: () => handleQuickPick(item), children: item.name }, item.key);
2424
+ }) })
2425
+ ] }),
2426
+ /* @__PURE__ */ jsxs("div", { className: style$3.calendarWrapper, children: [
2427
+ ShowMonths ? /* @__PURE__ */ jsx("ul", { className: style$3.monthsWrapper, children: months.map((month2) => /* @__PURE__ */ jsx("li", { className: `${style$3.month} ${PickedMonth === month2 ? style$3.pickedMonth : ""}`, onClick: () => setPickedMonth(month2), children: /* @__PURE__ */ jsx("div", { className: style$3.monthName, children: month2 }) })) }) : /* @__PURE__ */ jsxs("table", { children: [
2428
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: daysOfWeek.map((day2) => /* @__PURE__ */ jsx("th", { style: weekDayStyle ?? {}, children: day2 }, day2)) }) }),
2429
+ /* @__PURE__ */ jsxs("tbody", { children: [
2430
+ /* @__PURE__ */ jsx("tr", { className: style$3.spacerRow, children: /* @__PURE__ */ jsx("td", {}) }),
2431
+ currentMonthMatrix.map((week, index) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
2432
+ const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
2433
+ const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
2434
+ const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
2435
+ const selected2 = mode === "single" && SelectedDate && date.isSame(SelectedDate, "day");
2436
+ const isDisabledTill = disabledDatesTill && date.isBefore(dayjs(disabledDatesTill), "day");
2437
+ const isDisabledFrom = disabledDatesFrom && date.isAfter(dayjs(disabledDatesFrom), "day");
2438
+ let isInDisabledRange = false;
2439
+ if (disabledDatesRange?.length === 2) {
2440
+ const [start, end] = disabledDatesRange.map((d) => dayjs(d));
2441
+ isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
2442
+ }
2443
+ const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
2444
+ return /* @__PURE__ */ jsx(
2445
+ "td",
2446
+ {
2447
+ style: {
2448
+ ...currentMonth ? {} : otherMonthStyle,
2449
+ ...date.isSame(dayjs(), "day") ? todayStyle : {},
2450
+ ...isInRange ? inRangeStyle : {},
2451
+ ...isStartDate ? startDateStyle : {},
2452
+ ...isEndDate ? endDateStyle : {},
2453
+ ...selected2 ? selectedStyle : {}
2454
+ },
2455
+ className: `${style$3.day}
2456
+ ${currentMonth ? "" : style$3.otherMonth}
2457
+ ${!currentMonth ? "" : date.isSame(dayjs(), "day") ? style$3.today : ""}
2458
+ ${!currentMonth ? "" : isInRange ? style$3.inRange : ""}
2459
+ ${!currentMonth ? "" : isStartDate ? style$3.startDate : ""}
2460
+ ${!currentMonth ? "" : isEndDate ? style$3.endDate : ""}
2461
+ ${!currentMonth && !isInRange && !isEndDate ? "" : selected2 ? style$3.selected : ""}
2462
+ ${isDisabled ? style$3.disabled : ""}`,
2463
+ onClick: () => handleDayClick(date, currentMonth),
2464
+ children: date.date()
2465
+ },
2466
+ idx
2467
+ );
2468
+ }) }, index))
2469
+ ] })
2470
+ ] }),
2471
+ /* @__PURE__ */ jsx("div", { className: style$3.buttonWrapper, children: /* @__PURE__ */ jsx(MainButton, { label: "Current date", onClick: () => handleDayClick(dayjs(), true) }) }),
2472
+ pickerType === "dual" && /* @__PURE__ */ jsx("div", { className: style$3.border }),
2473
+ pickerType === "dual" && /* @__PURE__ */ jsxs("table", { children: [
2474
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: daysOfWeek.map((day2) => /* @__PURE__ */ jsx("th", { style: weekDayStyle ?? {}, children: day2 }, day2)) }) }),
2475
+ /* @__PURE__ */ jsx("tbody", { children: nextMonthMatrix?.map((week, index) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
2476
+ const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
2477
+ const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
2478
+ const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
2479
+ const selected2 = mode === "single" && SelectedDate && date.isSame(SelectedDate, "day");
2480
+ const isDisabledTill = disabledDatesTill && date.isBefore(dayjs(disabledDatesTill), "day");
2481
+ const isDisabledFrom = disabledDatesFrom && date.isAfter(dayjs(disabledDatesFrom), "day");
2482
+ let isInDisabledRange = false;
2483
+ if (disabledDatesRange?.length === 2) {
2484
+ const [start, end] = disabledDatesRange.map((d) => dayjs(d));
2485
+ isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
2486
+ }
2487
+ const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
2488
+ return /* @__PURE__ */ jsx(
2489
+ "td",
2490
+ {
2491
+ style: {
2492
+ ...currentMonth ? {} : otherMonthStyle,
2493
+ ...date.isSame(dayjs(), "day") ? todayStyle : {},
2494
+ ...isInRange ? inRangeStyle : {},
2495
+ ...isStartDate ? startDateStyle : {},
2496
+ ...isEndDate ? endDateStyle : {},
2497
+ ...selected2 ? selectedStyle : {}
2498
+ },
2499
+ className: `${style$3.day}
2500
+ ${currentMonth ? "" : style$3.otherMonth}
2501
+ ${!currentMonth ? "" : date.isSame(dayjs(), "day") ? style$3.today : ""}
2502
+ ${!currentMonth ? "" : isInRange ? style$3.inRange : ""}
2503
+ ${!currentMonth ? "" : isStartDate ? style$3.startDate : ""}
2504
+ ${!currentMonth ? "" : isEndDate ? style$3.endDate : ""}
2505
+ ${!currentMonth && !isInRange && !isEndDate ? "" : selected2 ? style$3.selected : ""}
2506
+ ${isDisabled ? style$3.disabled : ""}`,
2507
+ onClick: () => handleDayClick(date, currentMonth),
2508
+ children: date.date()
2509
+ },
2510
+ idx
2511
+ );
2512
+ }) }, index)) })
2513
+ ] })
2514
+ ] })
2515
+ ] })
2516
+ }
2517
+ );
2518
+ };
2519
+ dayjs.extend(customParseFormat);
2520
+ const DatePicker = ({
2521
+ defaultValue,
2522
+ valueFormat = "DD-MM-YYYY",
2523
+ onChange,
2524
+ onBlur,
2525
+ onFocus,
2526
+ customYears,
2527
+ fixedDropdown = true,
2528
+ disabledDatesFrom,
2529
+ disabledDatesTill,
2530
+ disabledDatesRange,
2531
+ datepickerStyle,
2532
+ datepickerLabelStyle,
2533
+ requiredStyle,
2534
+ datepickerHelperTextStyle,
2535
+ selectedStyle,
2536
+ endDateStyle,
2537
+ startDateStyle,
2538
+ inRangeStyle,
2539
+ otherMonthStyle,
2540
+ todayStyle,
2541
+ weekDayStyle,
2542
+ quickPickStyle,
2543
+ monthStyle,
2544
+ quickPick: quickPick2,
2545
+ mode = "single",
2546
+ pickerType = "single",
2547
+ disabled: disabled2 = false,
2548
+ ...rest
2549
+ }) => {
2550
+ const namespace = useNamespace();
2551
+ const [IsFocused, setIsFocused] = useState(false);
2552
+ const [Value, setValue] = useState("");
2553
+ const DefaultValue = useRef({ state: false, value: "" });
2554
+ const CalendarRef = useRef(null);
2555
+ const [CurrentMonth, setCurrentMonth] = useState(() => {
2556
+ const thisYear = dayjs().year().toString();
2557
+ if (customYears?.length) {
2558
+ return customYears.includes(thisYear) ? dayjs() : dayjs(`${Math.min(...customYears.map(Number))}-01-01`);
2559
+ }
2560
+ return dayjs();
2561
+ });
2562
+ useEffect(() => {
2563
+ const thisYear = dayjs().year().toString();
2564
+ if (customYears?.length) {
2565
+ setCurrentMonth(customYears.includes(thisYear) ? dayjs() : dayjs(`${Math.min(...customYears.map(Number))}-01-01`));
2566
+ }
2567
+ }, [customYears]);
2568
+ const [SelectedDate, setSelectedDate] = useState("");
2569
+ const [RangeSelection, setRangeSelection] = useState({
2570
+ start: null,
2571
+ end: null
2572
+ });
2573
+ const ComponentRef = useRef(null);
2574
+ const Change = (value, singleQuickPick, withDefault) => {
2575
+ let dateValue = "";
2576
+ let objValue = { start: "", end: "" };
2577
+ if (mode === "single" || typeof value === "string") {
2578
+ dateValue = value;
2579
+ setValue(dateValue);
2580
+ }
2581
+ if (mode !== "single" || typeof value !== "string") {
2582
+ dateValue = `${dayjs(value?.start ?? "").format(valueFormat)} / ${value?.end ? dayjs(value?.end).format(valueFormat) : ""}`;
2583
+ objValue.start = dayjs(value?.start ?? "").format(valueFormat);
2584
+ objValue.end = value?.end ? dayjs(value?.end).format(valueFormat) : "";
2585
+ setValue(dateValue);
2586
+ }
2587
+ if (value?.end) {
2588
+ setIsFocused(false);
2589
+ }
2590
+ if (onChange && typeof onChange === "function" && !withDefault) {
2591
+ onChange(objValue.start !== "" ? objValue : dateValue);
2592
+ DefaultValue.current.value = objValue.start !== "" ? objValue : dateValue;
2593
+ }
2594
+ };
2595
+ const Clear = (e) => {
2596
+ e.stopPropagation();
2597
+ setSelectedDate("");
2598
+ DefaultValue.current.value = "";
2599
+ setValue("");
2600
+ setRangeSelection({
2601
+ start: null,
2602
+ end: null
2603
+ });
2604
+ if (onChange && typeof onChange === "function") {
2605
+ onChange("");
2606
+ }
2607
+ };
2608
+ const ClickHandler = (event) => {
2609
+ if (!ComponentRef.current) return;
2610
+ if (event.composedPath().includes(ComponentRef.current)) return;
2611
+ setIsFocused(false);
2612
+ };
2613
+ const ScrollHandler = (event) => {
2614
+ if (!ComponentRef.current || !CalendarRef.current) return;
2615
+ if (event.composedPath().includes(ComponentRef.current) || event.composedPath().includes(CalendarRef.current)) return;
2616
+ setIsFocused(false);
2617
+ };
2618
+ const CalculatePos = () => {
2619
+ if (!ComponentRef.current || !CalendarRef.current) return;
2620
+ const componentEl = ComponentRef.current;
2621
+ const calendarEl = CalendarRef.current;
2622
+ if (!calendarEl || !componentEl) return;
2623
+ const componentRect = componentEl.getBoundingClientRect();
2624
+ const windowHeight = window.innerHeight;
2625
+ const windowWidth = window.innerWidth;
2626
+ calendarEl.style.position = "fixed";
2627
+ if (componentRect.bottom + calendarEl.offsetHeight > windowHeight) {
2628
+ calendarEl.style.top = `${window.scrollY + componentRect.top - calendarEl.offsetHeight - 8}px`;
2629
+ calendarEl.style.bottom = "unset";
2630
+ } else {
2631
+ calendarEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
2632
+ calendarEl.style.bottom = "unset";
2633
+ }
2634
+ if (componentRect.right + componentRect.width > windowWidth - 120) {
2635
+ calendarEl.style.left = `${window.scrollX + componentRect.left + componentRect.width - calendarEl.offsetWidth}px`;
2636
+ } else {
2637
+ calendarEl.style.left = `${window.scrollX + componentRect.left}px`;
2638
+ }
2639
+ };
2640
+ useEffect(() => {
2641
+ if (defaultValue && DefaultValue.current.value === "") {
2642
+ let value = Array.isArray(defaultValue) ? {
2643
+ start: dayjs(defaultValue[0], valueFormat),
2644
+ end: defaultValue.length > 1 ? dayjs(defaultValue[1], valueFormat) : ""
2645
+ } : dayjs(defaultValue, valueFormat).format(valueFormat);
2646
+ DefaultValue.current.value = defaultValue;
2647
+ DefaultValue.current.state = true;
2648
+ if (value) {
2649
+ Change(value, false, true);
2650
+ }
2651
+ }
2652
+ }, []);
2653
+ useEffect(() => {
2654
+ if (IsFocused) {
2655
+ CalculatePos();
2656
+ }
2657
+ }, [CalendarRef, IsFocused]);
2658
+ useEffect(() => {
2659
+ document.addEventListener("click", ClickHandler);
2660
+ document.addEventListener("wheel", ScrollHandler);
2661
+ return () => {
2662
+ document.removeEventListener("click", ClickHandler);
2663
+ document.removeEventListener("wheel", ScrollHandler);
2664
+ };
2665
+ }, []);
2666
+ return /* @__PURE__ */ jsxs("div", { className: `${namespace === "namespaceHr" ? style$4.namespaceHr : ""} ${style$4.datepickerContainer}`, children: [
2667
+ /* @__PURE__ */ jsx("div", { ref: ComponentRef, className: style$4.datepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), children: /* @__PURE__ */ jsx(
2668
+ FormInput,
2669
+ {
2670
+ ...rest,
2671
+ customFocus: IsFocused,
2672
+ withActive: false,
2673
+ value: Value,
2674
+ toggleFocus: true,
2675
+ formInputStyle: { cursor: "pointer" },
2676
+ leftSlot: /* @__PURE__ */ jsx("div", { className: style$4.datepickerLeftIcon, children: /* @__PURE__ */ jsx(IconCalendar, {}) }),
2677
+ rightSlot: /* @__PURE__ */ jsx("div", { className: `${style$4.datepickerRightIcon}`, onClick: Clear, children: Value && /* @__PURE__ */ jsx(IconCloseCircle, {}) }),
2678
+ readOnly: true
2679
+ }
2680
+ ) }),
2681
+ IsFocused && /* @__PURE__ */ jsx(
2682
+ Calendar,
2683
+ {
2684
+ namespace,
2685
+ defaultValue: DefaultValue.current,
2686
+ CalendarRef,
2687
+ disabledDatesFrom,
2688
+ disabledDatesTill,
2689
+ disabledDatesRange,
2690
+ valueFormat,
2691
+ onChange: (value) => Change(value, false, false),
2692
+ customYears,
2693
+ CurrentMonth,
2694
+ setCurrentMonth,
2695
+ SelectedDate,
2696
+ setSelectedDate,
2697
+ IsFocused,
2698
+ setIsFocused,
2699
+ quickPick: quickPick2,
2700
+ mode,
2701
+ RangeSelection,
2702
+ setRangeSelection,
2703
+ pickerType,
2704
+ selectedStyle,
2705
+ endDateStyle,
2706
+ startDateStyle,
2707
+ inRangeStyle,
2708
+ otherMonthStyle,
2709
+ todayStyle,
2710
+ weekDayStyle,
2711
+ quickPickStyle,
2712
+ monthStyle
2713
+ }
2714
+ )
2715
+ ] });
2716
+ };
2717
+ const skeleton = "Skeleton-module__skeleton";
2718
+ const shimmer = "Skeleton-module__shimmer";
2719
+ const text = "Skeleton-module__text";
2720
+ const avatar = "Skeleton-module__avatar";
2721
+ const dark = "Skeleton-module__dark";
2722
+ const style$2 = {
2723
+ skeleton,
2724
+ shimmer,
2725
+ text,
2726
+ avatar,
2727
+ dark
2728
+ };
2729
+ const Skeleton = ({ type = "text", customStyle, children }) => {
2730
+ return /* @__PURE__ */ jsx("div", { style: customStyle ?? {}, className: ` ${style$2.skeleton} ${style$2[type] || ""}`, children });
2731
+ };
2732
+ const actionDropdownContainer = "ActionDropdown-module__actionDropdownContainer";
2733
+ const collapsed = "ActionDropdown-module__collapsed";
2734
+ const actionDropdownIcon = "ActionDropdown-module__actionDropdownIcon";
2735
+ const actionDropdownContent = "ActionDropdown-module__actionDropdownContent";
2736
+ const actionDropdownTitle = "ActionDropdown-module__actionDropdownTitle";
2737
+ const actionDropdownList = "ActionDropdown-module__actionDropdownList";
2738
+ const actionDropdownItem = "ActionDropdown-module__actionDropdownItem";
2739
+ const selected = "ActionDropdown-module__selected";
2740
+ const style$1 = {
2741
+ actionDropdownContainer,
2742
+ collapsed,
2743
+ actionDropdownIcon,
2744
+ actionDropdownContent,
2745
+ actionDropdownTitle,
2746
+ actionDropdownList,
2747
+ actionDropdownItem,
2748
+ selected
2749
+ };
2750
+ const ActionDropdown = ({ title, data, onSelect }) => {
2751
+ const [Collapsed, setCollapsed] = useState(false);
2752
+ const DropdownRef = useRef(null);
2753
+ const ListRef = useRef(null);
2754
+ const [Selected, setSelected] = useState(null);
2755
+ const HandleSelect = (item) => {
2756
+ setSelected(item);
2757
+ onSelect?.(item);
2758
+ setCollapsed(false);
2759
+ };
2760
+ const CalculatePos = () => {
2761
+ const componentEl = DropdownRef.current;
2762
+ const dropdownEl = ListRef.current;
2763
+ if (!dropdownEl || !componentEl) return;
2764
+ const componentRect = componentEl.getBoundingClientRect();
2765
+ const windowHeight = window.innerHeight;
2766
+ dropdownEl.style.position = "fixed";
2767
+ dropdownEl.style.width = componentRect.width + "px";
2768
+ dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
2769
+ if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
2770
+ dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight - 4}px`;
2771
+ dropdownEl.style.bottom = "unset";
2772
+ } else {
2773
+ dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
2774
+ dropdownEl.style.bottom = "unset";
2775
+ }
2776
+ };
2777
+ useEffect(() => {
2778
+ CalculatePos();
2779
+ }, [DropdownRef, Collapsed]);
2780
+ useEffect(() => {
2781
+ const ClickHandler = (event) => {
2782
+ if (!DropdownRef.current) return;
2783
+ if (event.composedPath().includes(DropdownRef.current)) return;
2784
+ setCollapsed(false);
2785
+ };
2786
+ const ScrollHandler = (event) => {
2787
+ if (!DropdownRef.current || !ListRef.current) return;
2788
+ if (ListRef.current.contains(event.target)) return;
2789
+ setCollapsed(false);
2790
+ };
2791
+ document.addEventListener("click", ClickHandler);
2792
+ document.addEventListener("wheel", ScrollHandler);
2793
+ return () => {
2794
+ document.removeEventListener("click", ClickHandler);
2795
+ document.removeEventListener("wheel", ScrollHandler);
2796
+ };
2797
+ }, []);
2798
+ return /* @__PURE__ */ jsxs("div", { className: `${style$1.actionDropdownContainer} ${Collapsed ? style$1.collapsed : ""}`, children: [
2799
+ /* @__PURE__ */ jsxs("div", { ref: DropdownRef, className: style$1.actionDropdownContent, onClick: () => setCollapsed((state) => !state), children: [
2800
+ /* @__PURE__ */ jsx("p", { title, className: style$1.actionDropdownTitle, children: Selected?.label || title }),
2801
+ /* @__PURE__ */ jsx("div", { className: style$1.actionDropdownIcon, children: /* @__PURE__ */ jsx(IconArrowUp, { width: "10", height: "6", color: "#131314" }) })
2802
+ ] }),
2803
+ Collapsed && /* @__PURE__ */ jsx("ul", { ref: ListRef, onClick: (e) => e.stopPropagation(), className: style$1.actionDropdownList, children: data.map((item) => /* @__PURE__ */ jsx(
2804
+ "li",
2805
+ {
2806
+ onClick: (e) => {
2807
+ e.stopPropagation();
2808
+ HandleSelect(item);
2809
+ },
2810
+ className: `${style$1.actionDropdownItem} ${Selected?.id === item.id ? style$1.selected : ""}`,
2811
+ children: item.label
2812
+ },
2813
+ item.id
2814
+ )) }, data.length)
2815
+ ] });
2816
+ };
2817
+ const inlineLoadingWrapper = "InlineLoading-module__inlineLoadingWrapper";
2818
+ const loading = "InlineLoading-module__loading";
2819
+ const style = {
2820
+ inlineLoadingWrapper,
2821
+ loading
2822
+ };
2823
+ const IconErrorDash = ({ size = "16", color = "#DA1A1C" }) => {
2824
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
2825
+ "path",
2826
+ {
2827
+ fillRule: "evenodd",
2828
+ clipRule: "evenodd",
2829
+ d: "M8 1C4.1 1 1 4.1 1 8C1 11.9 4.1 15 8 15C11.9 15 15 11.9 15 8C15 4.1 11.9 1 8 1ZM10.7 11.5L4.5 5.3L5.3 4.5L11.5 10.7L10.7 11.5Z",
2830
+ fill: color
2831
+ }
2832
+ ) });
2833
+ };
2834
+ const IconLoading = ({ color1 = "#BCC1C2", color2 = "#0266EF", size = "16" }) => {
2835
+ return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [
2836
+ /* @__PURE__ */ jsx(
2837
+ "path",
2838
+ {
2839
+ d: "M16 7.99998C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 7.99998C0 3.5817 3.58172 -2.28882e-05 8 -2.28882e-05C12.4183 -2.28882e-05 16 3.5817 16 7.99998ZM2.96 7.99998C2.96 10.7835 5.21649 13.04 8 13.04C10.7835 13.04 13.04 10.7835 13.04 7.99998C13.04 5.21646 10.7835 2.95998 8 2.95998C5.21649 2.95998 2.96 5.21646 2.96 7.99998Z",
2840
+ fill: color1
2841
+ }
2842
+ ),
2843
+ /* @__PURE__ */ jsx(
2844
+ "path",
2845
+ {
2846
+ d: "M8 -2.28882e-05C9.58225 -2.28693e-05 11.129 0.469169 12.4446 1.34822C13.7602 2.22727 14.7855 3.4767 15.391 4.93851C15.9965 6.40032 16.155 8.00885 15.8463 9.5607C15.5376 11.1125 14.7757 12.538 13.6569 13.6568C12.538 14.7757 11.1126 15.5376 9.56072 15.8463C8.00887 16.1549 6.40034 15.9965 4.93853 15.391C3.47672 14.7855 2.22729 13.7601 1.34824 12.4445C0.469192 11.1289 -3.77363e-08 9.58223 0 7.99998L2.96 7.99998C2.96 8.99679 3.25559 9.97123 3.80939 10.8001C4.3632 11.6289 5.15034 12.2749 6.07128 12.6563C6.99222 13.0378 8.00559 13.1376 8.98326 12.9431C9.96092 12.7487 10.859 12.2687 11.5638 11.5638C12.2687 10.8589 12.7487 9.9609 12.9432 8.98323C13.1376 8.00557 13.0378 6.99219 12.6564 6.07125C12.2749 5.15031 11.6289 4.36317 10.8001 3.80937C9.97125 3.25557 8.99682 2.95998 8 2.95998L8 -2.28882e-05Z",
2847
+ fill: color2 ?? "#0266EF"
2848
+ }
2849
+ )
2850
+ ] });
2851
+ };
2852
+ const IconSuccess = ({ size = "16", color = "#138761" }) => {
2853
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
2854
+ "path",
2855
+ {
2856
+ fillRule: "evenodd",
2857
+ clipRule: "evenodd",
2858
+ d: "M8 1C4.1 1 1 4.1 1 8C1 11.9 4.1 15 8 15C11.9 15 15 11.9 15 8C15 4.1 11.9 1 8 1ZM7 11L4.3 8.3L5.2 7.5L7 9.3L11 5.4L11.9 6.2L7 11Z",
2859
+ fill: color
2860
+ }
2861
+ ) });
2862
+ };
2863
+ const InlineLoading = ({ loading: loading2, success: success2, error: error2, msg }) => {
2864
+ return /* @__PURE__ */ jsxs("div", { className: `${style.inlineLoadingWrapper}`, children: [
2865
+ loading2?.state && /* @__PURE__ */ jsxs("div", { className: style.loading, children: [
2866
+ /* @__PURE__ */ jsx(IconLoading, { color1: loading2?.color1 ?? "#BCC1C2", color2: loading2?.color2, size: loading2?.size }),
2867
+ /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
2868
+ ] }),
2869
+ !loading2?.state && success2?.state && /* @__PURE__ */ jsxs("div", { children: [
2870
+ /* @__PURE__ */ jsx(IconSuccess, { size: success2?.size, color: success2?.color }),
2871
+ /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
2872
+ ] }),
2873
+ !loading2?.state && error2?.state && /* @__PURE__ */ jsxs("div", { children: [
2874
+ /* @__PURE__ */ jsx(IconErrorDash, { size: error2?.size, color: error2?.color }),
2875
+ /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
2876
+ ] })
2877
+ ] });
2878
+ };
17
2879
  export {
18
- default16 as ActionDropdown,
19
- default6 as Checkbox,
20
- default14 as DatePicker,
21
- default7 as Dropdown,
22
- default3 as FormInput,
23
- default17 as InlineLoading,
24
- default2 as MainButton,
25
- default10 as Popup,
26
- default8 as Radio,
27
- default15 as Skeleton,
28
- default4 as Textarea,
29
- default13 as TimePicker,
30
- default12 as ToastProvider,
31
- default5 as Toggle,
32
- default9 as Tooltip,
33
- default11 as createNotificationToast
2880
+ ActionDropdown,
2881
+ Checkbox,
2882
+ DatePicker,
2883
+ Dropdown,
2884
+ FormInput,
2885
+ InlineLoading,
2886
+ MainButton,
2887
+ Popup,
2888
+ Radio,
2889
+ Skeleton,
2890
+ Textarea,
2891
+ TimePicker,
2892
+ ToastProvider,
2893
+ Toggle,
2894
+ Tooltip,
2895
+ createNotificationToast
34
2896
  };