sag_components 2.0.0-beta100 → 2.0.0-beta101

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 (70) hide show
  1. package/dist/index.d.ts +22 -157
  2. package/dist/index.esm.js +579 -1990
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +579 -2002
  5. package/dist/index.js.map +1 -1
  6. package/dist/types/components/AutocompleteField/AutocompleteField.d.ts +15 -0
  7. package/dist/types/components/AutocompleteField/AutocompleteField.stories.d.ts +13 -0
  8. package/dist/types/components/AutocompleteField/AutocompleteField.style.d.ts +5 -0
  9. package/dist/types/components/BubbleChart/BubbleChart.style.d.ts +2 -0
  10. package/dist/types/components/Button/Button.d.ts +21 -1
  11. package/dist/types/components/Button/Button.stories.d.ts +35 -93
  12. package/dist/types/components/CampaignTool/CampaignDemoReport.stories.d.ts +46 -0
  13. package/dist/types/components/{ContainerTable/ContainerTable.stories.d.ts → CampaignTool/Card.stories.d.ts} +33 -37
  14. package/dist/types/components/CampaignTool/MultipleCard.stories.d.ts +28 -0
  15. package/dist/types/components/CampaignTool/PageFilterBar.stories.d.ts +17 -0
  16. package/dist/types/components/CampaignTool/Popup.stories.d.ts +101 -0
  17. package/dist/types/components/CampaignTool/Table.stories.d.ts +108 -0
  18. package/dist/types/components/DropdownNew/DropdownNew.d.ts +80 -1
  19. package/dist/types/components/Input/Input.stories.d.ts +76 -84
  20. package/dist/types/components/SearchInput/SearchInput.d.ts +22 -0
  21. package/dist/types/components/SearchInput/SearchInput.stories.d.ts +5 -59
  22. package/dist/types/components/SearchInput/SearchInput.style.d.ts +0 -1
  23. package/dist/types/components/TabMenu/TabMenu.style.d.ts +17 -1
  24. package/dist/types/index.d.ts +0 -12
  25. package/package.json +1 -1
  26. package/dist/types/components/ContainerTable/ContainerTable.d.ts +0 -2
  27. package/dist/types/components/ContainerTable/ContainerTable.style.d.ts +0 -7
  28. package/dist/types/components/EventsTable/ColumnFilter.d.ts +0 -7
  29. package/dist/types/components/EventsTable/DeleteEventModal.d.ts +0 -5
  30. package/dist/types/components/EventsTable/EventTable.d.ts +0 -7
  31. package/dist/types/components/EventsTable/EventsHeader.d.ts +0 -6
  32. package/dist/types/components/EventsTable/EventsPage.d.ts +0 -1
  33. package/dist/types/components/EventsTable/EventsPage.stories.d.ts +0 -8
  34. package/dist/types/components/EventsTable/SendButton.d.ts +0 -3
  35. package/dist/types/components/EventsTable/mockEvents.d.ts +0 -15
  36. package/dist/types/components/ItemManagerPanel/ItemManagerPanel.d.ts +0 -6
  37. package/dist/types/components/ItemManagerPanel/ItemManagerPanel.stories.d.ts +0 -24
  38. package/dist/types/components/ItemManagerPanel/ItemManagerPanel.style.d.ts +0 -18
  39. package/dist/types/components/ItemManagerPanel/NewItemList/NewItemList.d.ts +0 -6
  40. package/dist/types/components/ItemManagerPanel/NewItemList/NewItemList.style.d.ts +0 -13
  41. package/dist/types/components/MenuRoute/MenuIcons/Build.d.ts +0 -6
  42. package/dist/types/components/MenuRoute/MenuIcons/Execute.d.ts +0 -6
  43. package/dist/types/components/MenuRoute/MenuIcons/Track.d.ts +0 -6
  44. package/dist/types/components/MenuRoute/MenuRoute.d.ts +0 -2
  45. package/dist/types/components/MenuRoute/MenuRoute.stories.d.ts +0 -52
  46. package/dist/types/components/MenuRoute/MenuRoute.style.d.ts +0 -3
  47. package/dist/types/components/ModalWithOverlay/ModalWithOverlay.d.ts +0 -2
  48. package/dist/types/components/ModalWithOverlay/ModalWithOverlay.stories.d.ts +0 -112
  49. package/dist/types/components/ModalWithOverlay/ModalWithOverlay.style.d.ts +0 -7
  50. package/dist/types/components/OverlayDropdown/OverlayDropdown.d.ts +0 -24
  51. package/dist/types/components/OverlayDropdown/OverlayDropdown.stories.d.ts +0 -11
  52. package/dist/types/components/OverlayDropdown/OverlayDropdown.style.d.ts +0 -9
  53. package/dist/types/components/OverlayDropdown/OverlayTemplateDialog.d.ts +0 -21
  54. package/dist/types/components/OverlayDropdown/OverlayTemplateDialog.style.d.ts +0 -10
  55. package/dist/types/components/Table/NoEvents.d.ts +0 -5
  56. package/dist/types/components/Table/Table.d.ts +0 -2
  57. package/dist/types/components/Table/Table.stories.d.ts +0 -138
  58. package/dist/types/components/Table/Table.style.d.ts +0 -14
  59. package/dist/types/components/ToggleSwitch/ToggleSwitch.d.ts +0 -21
  60. package/dist/types/components/ToggleSwitch/ToggleSwitch.stories.d.ts +0 -15
  61. package/dist/types/components/ToggleSwitch/ToggleSwitch.style.d.ts +0 -3
  62. package/dist/types/components/WeeksPicker/WeeksCalendar.d.ts +0 -28
  63. package/dist/types/components/WeeksPicker/WeeksCalendar.styles.d.ts +0 -5
  64. package/dist/types/components/WeeksPicker/WeeksPicker.d.ts +0 -27
  65. package/dist/types/components/WeeksPicker/WeeksPicker.stories.d.ts +0 -9
  66. package/dist/types/components/WeeksPicker/WeeksPicker.style.d.ts +0 -8
  67. package/dist/types/icons/ArrowLeftIcon.d.ts +0 -7
  68. package/dist/types/icons/Plus.d.ts +0 -6
  69. package/dist/types/icons/PlusIcon.d.ts +0 -6
  70. package/dist/types/icons/index.d.ts +0 -15
package/dist/index.esm.js CHANGED
@@ -4,16 +4,6 @@ import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tool
4
4
  import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
5
5
  import { motion, AnimatePresence } from 'framer-motion';
6
6
 
7
- function _extends$1() {
8
- return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
9
- for (var e = 1; e < arguments.length; e++) {
10
- var t = arguments[e];
11
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
12
- }
13
- return n;
14
- }, _extends$1.apply(null, arguments);
15
- }
16
-
17
7
  const ButtonContainer$1 = styled.div`
18
8
  //position: relative;
19
9
  display: flex;
@@ -34,7 +24,7 @@ const ButtonItem = styled.div`
34
24
  height: ${props => props.height};
35
25
  color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
36
26
  border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
37
- border-radius: ${props => props.borderRadius};
27
+ border-radius: 12px;
38
28
  background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
39
29
  box-sizing: border-box;
40
30
  gap: 8px;
@@ -53,7 +43,7 @@ const ButtonItem = styled.div`
53
43
  transition: background-color 0.3s, color 0.3s;
54
44
  }
55
45
  `;
56
- const Label$8 = styled.label`
46
+ const Label$7 = styled.label`
57
47
  font-family: "Poppins";
58
48
  font-size: 14px;
59
49
  font-weight: 400;
@@ -61,7 +51,7 @@ const Label$8 = styled.label`
61
51
  pointer-events: none;
62
52
  user-select: none;
63
53
  `;
64
- const IconWrapper$4 = styled.div`
54
+ const IconWrapper$1 = styled.div`
65
55
  display: flex;
66
56
  align-items: center;
67
57
  justify-content: center;
@@ -70,13 +60,14 @@ const IconWrapper$4 = styled.div`
70
60
  const InputCommit = styled.input`
71
61
  font-family: "Poppins", sans-serif;
72
62
  border: ${props => `0px solid ${props.disabled ? props.disabled_border_color : props.hover_border_color}`};
63
+ border-radius: 8px;
73
64
  font-weight: 400;
74
65
  font-size: 14px;
75
66
  width: ${props => props.width};
76
67
  height: ${props => props.height};
77
68
  color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
78
69
  border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
79
- border-radius: ${props => props.borderRadius};
70
+ border-radius: 12px;
80
71
  background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
81
72
  cursor: pointer;
82
73
  padding: ${props => props.padding};
@@ -96,24 +87,6 @@ const InputCommit = styled.input`
96
87
  }
97
88
  `;
98
89
 
99
- const DownloadIcon = _ref => {
100
- let {
101
- width = '8',
102
- height = '9',
103
- color = '#212121'
104
- } = _ref;
105
- return /*#__PURE__*/React$1.createElement("svg", {
106
- width: width,
107
- height: height,
108
- viewBox: "0 0 20 20",
109
- fill: "none",
110
- xmlns: "http://www.w3.org/2000/svg"
111
- }, /*#__PURE__*/React$1.createElement("path", {
112
- d: "M9.57031 14.8438L3.94531 9.84375C3.67188 9.64844 3.67188 9.21875 3.90625 8.98438C4.10156 8.71094 4.53125 8.71094 4.76562 8.90625L9.375 13.0078V0.625C9.375 0.3125 9.64844 0 10 0C10.3125 0 10.625 0.3125 10.625 0.625V13.0078L15.1953 8.94531C15.4297 8.71094 15.8594 8.71094 16.0547 8.98438C16.2891 9.21875 16.2891 9.64844 16.0156 9.84375L10.3906 14.8438C10.2734 14.9609 10.1172 15 10 15C9.84375 15 9.6875 14.9609 9.57031 14.8438ZM17.5 12.5C18.8672 12.5 20 13.6328 20 15V17.5C20 18.9062 18.8672 20 17.5 20H2.5C1.09375 20 0 18.9062 0 17.5V15C0 13.6328 1.09375 12.5 2.5 12.5H4.375C4.6875 12.5 5 12.8125 5 13.125C5 13.4766 4.6875 13.75 4.375 13.75H2.5C1.79688 13.75 1.25 14.3359 1.25 15V17.5C1.25 18.2031 1.79688 18.75 2.5 18.75H17.5C18.1641 18.75 18.75 18.2031 18.75 17.5V15C18.75 14.3359 18.1641 13.75 17.5 13.75H15.625C15.2734 13.75 15 13.4766 15 13.125C15 12.8125 15.2734 12.5 15.625 12.5H17.5ZM17.1875 16.25C17.1875 16.7969 16.7578 17.1875 16.25 17.1875C15.7031 17.1875 15.3125 16.7969 15.3125 16.25C15.3125 15.7422 15.7031 15.3125 16.25 15.3125C16.7578 15.3125 17.1875 15.7422 17.1875 16.25Z",
113
- fill: color
114
- }));
115
- };
116
-
117
90
  const FilterIcon = _ref => {
118
91
  let {
119
92
  width = '17',
@@ -159,6 +132,24 @@ const OptionsIcon = _ref => {
159
132
  }));
160
133
  };
161
134
 
135
+ const DownloadIcon = _ref => {
136
+ let {
137
+ width = '8',
138
+ height = '9',
139
+ color = '#212121'
140
+ } = _ref;
141
+ return /*#__PURE__*/React$1.createElement("svg", {
142
+ width: width,
143
+ height: height,
144
+ viewBox: "0 0 20 20",
145
+ fill: "none",
146
+ xmlns: "http://www.w3.org/2000/svg"
147
+ }, /*#__PURE__*/React$1.createElement("path", {
148
+ d: "M9.57031 14.8438L3.94531 9.84375C3.67188 9.64844 3.67188 9.21875 3.90625 8.98438C4.10156 8.71094 4.53125 8.71094 4.76562 8.90625L9.375 13.0078V0.625C9.375 0.3125 9.64844 0 10 0C10.3125 0 10.625 0.3125 10.625 0.625V13.0078L15.1953 8.94531C15.4297 8.71094 15.8594 8.71094 16.0547 8.98438C16.2891 9.21875 16.2891 9.64844 16.0156 9.84375L10.3906 14.8438C10.2734 14.9609 10.1172 15 10 15C9.84375 15 9.6875 14.9609 9.57031 14.8438ZM17.5 12.5C18.8672 12.5 20 13.6328 20 15V17.5C20 18.9062 18.8672 20 17.5 20H2.5C1.09375 20 0 18.9062 0 17.5V15C0 13.6328 1.09375 12.5 2.5 12.5H4.375C4.6875 12.5 5 12.8125 5 13.125C5 13.4766 4.6875 13.75 4.375 13.75H2.5C1.79688 13.75 1.25 14.3359 1.25 15V17.5C1.25 18.2031 1.79688 18.75 2.5 18.75H17.5C18.1641 18.75 18.75 18.2031 18.75 17.5V15C18.75 14.3359 18.1641 13.75 17.5 13.75H15.625C15.2734 13.75 15 13.4766 15 13.125C15 12.8125 15.2734 12.5 15.625 12.5H17.5ZM17.1875 16.25C17.1875 16.7969 16.7578 17.1875 16.25 17.1875C15.7031 17.1875 15.3125 16.7969 15.3125 16.25C15.3125 15.7422 15.7031 15.3125 16.25 15.3125C16.7578 15.3125 17.1875 15.7422 17.1875 16.25Z",
149
+ fill: color
150
+ }));
151
+ };
152
+
162
153
  const DocumentIcon = _ref => {
163
154
  let {
164
155
  width = '19',
@@ -291,174 +282,42 @@ const EyeIcon = _ref => {
291
282
  }));
292
283
  };
293
284
 
294
- const ButtonArrowRight = ({
295
- width = '16',
296
- height = '17'
297
- }) => /*#__PURE__*/React$1.createElement("svg", {
298
- width: width,
299
- height: height,
300
- viewBox: "0 0 16 17",
301
- fill: "none",
302
- xmlns: "http://www.w3.org/2000/svg"
303
- }, /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("path", {
304
- id: "icon",
305
- d: "M14.5 8.48438C14.5 6.17188 13.25 4.04688 11.25 2.85938C9.21875 1.70312 6.75 1.70312 4.75 2.85938C2.71875 4.04688 1.5 6.17188 1.5 8.48438C1.5 10.8282 2.71875 12.9532 4.75 14.1406C6.75 15.2969 9.21875 15.2969 11.25 14.1406C13.25 12.9532 14.5 10.8282 14.5 8.48438ZM0 8.48438C0 5.64062 1.5 3.01562 4 1.57812C6.46875 0.140625 9.5 0.140625 12 1.57812C14.4688 3.01562 16 5.64062 16 8.48438C16 11.3594 14.4688 13.9844 12 15.4219C9.5 16.8594 6.46875 16.8594 4 15.4219C1.5 13.9844 0 11.3594 0 8.48438ZM9.03125 11.7656C8.71875 12.0782 8.25 12.0782 7.96875 11.7656C7.65625 11.4844 7.65625 11.0156 7.96875 10.7032L9.4375 9.23438H4.75C4.3125 9.23438 4 8.92188 4 8.48438C4 8.07812 4.3125 7.73438 4.75 7.73438H9.4375L7.96875 6.26562C7.65625 5.98438 7.65625 5.51562 7.96875 5.23438C8.25 4.92188 8.71875 4.92188 9.03125 5.23438L11.7812 7.98438C12.0625 8.26562 12.0625 8.73438 11.7812 9.01562L9.03125 11.7656Z",
306
- fill: "white"
307
- })));
308
-
309
- const ReselectIcon = ({
310
- width = '16',
311
- height = '16',
312
- color = '#212121'
313
- }) => /*#__PURE__*/React$1.createElement("svg", {
314
- width: width,
315
- height: height,
316
- viewBox: "0 0 16 16",
317
- fill: "none",
318
- xmlns: "http://www.w3.org/2000/svg"
319
- }, /*#__PURE__*/React$1.createElement("path", {
320
- d: "M4.21875 15.5312L1.21875 12.5312C0.90625 12.25 0.90625 11.7812 1.21875 11.4688L4.21875 8.5C4.5 8.1875 4.96875 8.1875 5.25 8.5C5.5625 8.78125 5.5625 9.25 5.25 9.53125L3.53125 11.25H14.25C14.6562 11.25 15 11.5938 15 12C15 12.4375 14.6562 12.75 14.25 12.75L3.53125 12.7812L5.25 14.5C5.5625 14.7812 5.5625 15.25 5.25 15.5312C4.96875 15.8438 4.5 15.8438 4.21875 15.5312ZM14.7812 4.53125L11.7812 7.53125C11.4688 7.84375 11 7.84375 10.7188 7.53125C10.4062 7.25 10.4062 6.78125 10.7188 6.46875L12.4375 4.75H1.75C1.3125 4.75 1 4.4375 1 4C1 3.59375 1.3125 3.25 1.75 3.25H12.4375L10.7188 1.53125C10.4062 1.25 10.4062 0.78125 10.7188 0.46875C11 0.1875 11.4688 0.1875 11.7812 0.46875L14.7812 3.5C15.0625 3.78125 15.0625 4.25 14.7812 4.53125Z",
321
- fill: color
322
- }));
285
+ const ButtonArrowRight = _ref => {
286
+ let {
287
+ width = '16',
288
+ height = '17'
289
+ } = _ref;
290
+ return /*#__PURE__*/React$1.createElement("svg", {
291
+ width: width,
292
+ height: height,
293
+ viewBox: "0 0 16 17",
294
+ fill: "none",
295
+ xmlns: "http://www.w3.org/2000/svg"
296
+ }, /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("path", {
297
+ id: "icon",
298
+ d: "M14.5 8.48438C14.5 6.17188 13.25 4.04688 11.25 2.85938C9.21875 1.70312 6.75 1.70312 4.75 2.85938C2.71875 4.04688 1.5 6.17188 1.5 8.48438C1.5 10.8282 2.71875 12.9532 4.75 14.1406C6.75 15.2969 9.21875 15.2969 11.25 14.1406C13.25 12.9532 14.5 10.8282 14.5 8.48438ZM0 8.48438C0 5.64062 1.5 3.01562 4 1.57812C6.46875 0.140625 9.5 0.140625 12 1.57812C14.4688 3.01562 16 5.64062 16 8.48438C16 11.3594 14.4688 13.9844 12 15.4219C9.5 16.8594 6.46875 16.8594 4 15.4219C1.5 13.9844 0 11.3594 0 8.48438ZM9.03125 11.7656C8.71875 12.0782 8.25 12.0782 7.96875 11.7656C7.65625 11.4844 7.65625 11.0156 7.96875 10.7032L9.4375 9.23438H4.75C4.3125 9.23438 4 8.92188 4 8.48438C4 8.07812 4.3125 7.73438 4.75 7.73438H9.4375L7.96875 6.26562C7.65625 5.98438 7.65625 5.51562 7.96875 5.23438C8.25 4.92188 8.71875 4.92188 9.03125 5.23438L11.7812 7.98438C12.0625 8.26562 12.0625 8.73438 11.7812 9.01562L9.03125 11.7656Z",
299
+ fill: "white"
300
+ })));
301
+ };
323
302
 
324
- const SearchIcon = _ref => {
303
+ const ReselectIcon = _ref => {
325
304
  let {
326
- width = '13',
327
- height = '13',
305
+ width = '16',
306
+ height = '16',
328
307
  color = '#212121'
329
308
  } = _ref;
330
309
  return /*#__PURE__*/React$1.createElement("svg", {
331
310
  width: width,
332
311
  height: height,
333
- viewBox: "0 0 13 13",
312
+ viewBox: "0 0 16 16",
334
313
  fill: "none",
335
314
  xmlns: "http://www.w3.org/2000/svg"
336
315
  }, /*#__PURE__*/React$1.createElement("path", {
337
- d: "M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z",
316
+ d: "M4.21875 15.5312L1.21875 12.5312C0.90625 12.25 0.90625 11.7812 1.21875 11.4688L4.21875 8.5C4.5 8.1875 4.96875 8.1875 5.25 8.5C5.5625 8.78125 5.5625 9.25 5.25 9.53125L3.53125 11.25H14.25C14.6562 11.25 15 11.5938 15 12C15 12.4375 14.6562 12.75 14.25 12.75L3.53125 12.7812L5.25 14.5C5.5625 14.7812 5.5625 15.25 5.25 15.5312C4.96875 15.8438 4.5 15.8438 4.21875 15.5312ZM14.7812 4.53125L11.7812 7.53125C11.4688 7.84375 11 7.84375 10.7188 7.53125C10.4062 7.25 10.4062 6.78125 10.7188 6.46875L12.4375 4.75H1.75C1.3125 4.75 1 4.4375 1 4C1 3.59375 1.3125 3.25 1.75 3.25H12.4375L10.7188 1.53125C10.4062 1.25 10.4062 0.78125 10.7188 0.46875C11 0.1875 11.4688 0.1875 11.7812 0.46875L14.7812 3.5C15.0625 3.78125 15.0625 4.25 14.7812 4.53125Z",
338
317
  fill: color
339
318
  }));
340
319
  };
341
320
 
342
- const PlusIcon = ({
343
- width = '17',
344
- height = '17',
345
- color = '#212121'
346
- }) => /*#__PURE__*/React$1.createElement("svg", {
347
- xmlns: "http://www.w3.org/2000/svg",
348
- width: "16",
349
- height: "17",
350
- viewBox: "0 0 16 17",
351
- fill: "none"
352
- }, /*#__PURE__*/React$1.createElement("path", {
353
- d: "M8.71875 2.28125V7.90625H14.3438C14.8008 7.90625 15.1875 8.29297 15.1875 8.75C15.1875 9.24219 14.8008 9.59375 14.3438 9.59375H8.71875V15.2188C8.71875 15.7109 8.33203 16.0625 7.875 16.0625C7.38281 16.0625 7.03125 15.7109 7.03125 15.2188V9.59375H1.40625C0.914062 9.59375 0.5625 9.24219 0.5625 8.75C0.5625 8.29297 0.914062 7.90625 1.40625 7.90625H7.03125V2.28125C7.03125 1.82422 7.38281 1.4375 7.875 1.4375C8.33203 1.4375 8.71875 1.82422 8.71875 2.28125Z",
354
- fill: "#066768"
355
- }));
356
-
357
- const Plus = ({
358
- width = 17,
359
- height = 17,
360
- fill = 'white'
361
- }) => /*#__PURE__*/React$1.createElement("svg", {
362
- width: width,
363
- height: height,
364
- viewBox: "0 0 17 17",
365
- fill: "none",
366
- xmlns: "http://www.w3.org/2000/svg"
367
- }, /*#__PURE__*/React$1.createElement("path", {
368
- d: "M9.34619 2.03369V7.65869H14.9712C15.4282 7.65869 15.8149 8.04541 15.8149 8.50244C15.8149 8.99463 15.4282 9.34619 14.9712 9.34619H9.34619V14.9712C9.34619 15.4634 8.95947 15.8149 8.50244 15.8149C8.01025 15.8149 7.65869 15.4634 7.65869 14.9712V9.34619H2.03369C1.5415 9.34619 1.18994 8.99463 1.18994 8.50244C1.18994 8.04541 1.5415 7.65869 2.03369 7.65869H7.65869V2.03369C7.65869 1.57666 8.01025 1.18994 8.50244 1.18994C8.95947 1.18994 9.34619 1.57666 9.34619 2.03369Z",
369
- fill: fill
370
- }));
371
-
372
- const Button$1 = props => {
373
- const {
374
- text = "",
375
- type = "primary",
376
- size = "small",
377
- height = "",
378
- width = "",
379
- disabled = false,
380
- textColor = "",
381
- backgroundColor = "",
382
- borderColor = "",
383
- borderRadius = "12px",
384
- hoverTextColor = "",
385
- hoverBackgroundColor = "",
386
- hoverBorderColor = "",
387
- disabledTextColor = "",
388
- disabledBackgroundColor = "",
389
- disabledBorderColor = "",
390
- onClick = () => {},
391
- leftIcon = null,
392
- rightIcon = null,
393
- isSubmitButton = false
394
- } = props;
395
- const [clicked, setClicked] = useState(false);
396
- const [hover, setHover] = useState(false);
397
- const handleClick = event => {
398
- setClicked(prev => !prev);
399
- onClick(event);
400
- setTimeout(() => setClicked(prev => !prev), 300);
401
- };
402
- const iconMap = {
403
- arrow: ButtonArrowRight,
404
- filter: FilterIcon,
405
- options: OptionsIcon,
406
- download: DownloadIcon,
407
- document: DocumentIcon,
408
- fly: FlyIcon,
409
- bell: BellIcon,
410
- maintenance: MaintenanceIcon,
411
- exit: ExitIcon,
412
- eye: EyeIcon,
413
- reselect: ReselectIcon,
414
- plus: Plus
415
- };
416
- const getIcon = icon => {
417
- if (!icon || icon === "none") return null;
418
- const IconComponent = iconMap[icon.toLowerCase()];
419
- const iconProps = {
420
- height: "16px",
421
- width: "16px",
422
- color: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff")
423
- };
424
- return /*#__PURE__*/React$1.createElement(IconWrapper$4, null, /*#__PURE__*/React$1.createElement(IconComponent, iconProps));
425
- };
426
- const commonProps = {
427
- width: width || null,
428
- height: height || (size === "small" ? "33px" : "45px"),
429
- disabled,
430
- text_color: textColor || (type === "secondary" ? "#212121" : "#ffffff"),
431
- background_color: backgroundColor || (type === "secondary" ? "#ffffff" : "#229E38"),
432
- border_color: borderColor || (type === "secondary" ? "#B1B1B1" : "#229E38"),
433
- hover_text_color: hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff"),
434
- hover_background_color: hoverBackgroundColor || (type === "secondary" ? "#E8F5EB" : "#92CF17"),
435
- hover_border_color: hoverBorderColor || (type === "secondary" ? "#229E38" : "#92CF17"),
436
- disabled_text_color: disabledTextColor || "#B1B1B1",
437
- disabled_background_color: disabledBackgroundColor || (type === "secondary" ? "#ffffff" : "#E3E4E5"),
438
- disabled_border_color: disabledBorderColor || "#E3E4E5",
439
- padding: size === "small" ? "0 16px" : "0 20px",
440
- onClick: !disabled ? handleClick : null
441
- };
442
- return /*#__PURE__*/React$1.createElement(ButtonContainer$1, {
443
- className: "ButtonContainer",
444
- width: commonProps.width,
445
- height: commonProps.height
446
- }, isSubmitButton ? /*#__PURE__*/React$1.createElement(InputCommit, _extends$1({
447
- className: clicked ? "InputCommit-clicked" : "InputCommit",
448
- value: text,
449
- type: "submit",
450
- borderRadius: borderRadius
451
- }, commonProps)) : /*#__PURE__*/React$1.createElement(ButtonItem, _extends$1({
452
- className: clicked ? "ButtonItem-clicked" : "ButtonItem",
453
- onMouseEnter: () => setHover(true),
454
- onMouseLeave: () => setHover(false),
455
- borderRadius: borderRadius
456
- }, commonProps), getIcon(leftIcon), /*#__PURE__*/React$1.createElement(Label$8, {
457
- className: "Label",
458
- disabled: disabled
459
- }, text), getIcon(rightIcon)));
460
- };
461
-
462
321
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
463
322
 
464
323
  function getDefaultExportFromCjs (x) {
@@ -1612,6 +1471,199 @@ if (process.env.NODE_ENV !== 'production') {
1612
1471
  var propTypesExports = propTypes.exports;
1613
1472
  var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
1614
1473
 
1474
+ const Button = _ref => {
1475
+ let {
1476
+ text = '',
1477
+ type = 'primary',
1478
+ size = 'small',
1479
+ height = '',
1480
+ width = '',
1481
+ disabled = false,
1482
+ textColor = '',
1483
+ backgroundColor = '',
1484
+ borderColor = '',
1485
+ hoverTextColor = '',
1486
+ hoverBackgroundColor = '',
1487
+ hoverBorderColor = '',
1488
+ disabledTextColor = '',
1489
+ disabledBackgroundColor = '',
1490
+ disabledBorderColor = '',
1491
+ onClick = () => {},
1492
+ leftIcon = 'none',
1493
+ rightIcon = 'none',
1494
+ isSubmitButton = false
1495
+ } = _ref;
1496
+ const [clicked, setClicked] = useState(false);
1497
+ const [hover, setHover] = useState(false);
1498
+ const handleSubmitButtonOnClick = () => {
1499
+ setClicked(true);
1500
+ onClick(`SubmitButtonOnClick: ${text}`);
1501
+ setTimeout(() => {
1502
+ setClicked(false);
1503
+ }, 300);
1504
+ };
1505
+ const handleButtonClick = event => {
1506
+ setClicked(true);
1507
+ onClick(event);
1508
+ setTimeout(() => {
1509
+ setClicked(false);
1510
+ }, 300);
1511
+ };
1512
+ const getIcon = icon => {
1513
+ const iconHeight = '16px';
1514
+ const iconWidth = '16px';
1515
+ const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#ffffff');
1516
+ const newHoverTextColor = hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff');
1517
+ const newDisabledTextColor = disabledTextColor || '#B1B1B1';
1518
+ const newEnabledTextColor = hover ? newHoverTextColor : newTextColor;
1519
+ const color = disabled ? newDisabledTextColor : newEnabledTextColor;
1520
+ switch (icon.toLowerCase()) {
1521
+ case 'arrow':
1522
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1523
+ className: "ArrowRightIcon"
1524
+ }, /*#__PURE__*/React$1.createElement(ButtonArrowRight, {
1525
+ height: iconHeight,
1526
+ width: iconWidth,
1527
+ color: color
1528
+ }));
1529
+ case 'filter':
1530
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1531
+ className: "FilterIcon"
1532
+ }, /*#__PURE__*/React$1.createElement(FilterIcon, {
1533
+ height: "150px",
1534
+ width: iconWidth,
1535
+ color: color
1536
+ }));
1537
+ case 'options':
1538
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1539
+ className: "OptionsIcon"
1540
+ }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
1541
+ height: iconHeight,
1542
+ width: iconWidth,
1543
+ color: color
1544
+ }));
1545
+ case 'download':
1546
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1547
+ className: "DownloadIcon"
1548
+ }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
1549
+ height: iconHeight,
1550
+ width: iconWidth,
1551
+ color: color
1552
+ }));
1553
+ case 'document':
1554
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1555
+ className: "DocumentIcon"
1556
+ }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
1557
+ height: iconHeight,
1558
+ width: iconWidth,
1559
+ color: color
1560
+ }));
1561
+ case 'fly':
1562
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1563
+ className: "FlyIcon"
1564
+ }, /*#__PURE__*/React$1.createElement(FlyIcon, {
1565
+ height: iconHeight,
1566
+ width: iconWidth,
1567
+ color: color
1568
+ }));
1569
+ case 'bell':
1570
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1571
+ className: "BellIcon"
1572
+ }, /*#__PURE__*/React$1.createElement(BellIcon, {
1573
+ height: iconHeight,
1574
+ width: iconWidth,
1575
+ color: color
1576
+ }));
1577
+ case 'maintenance':
1578
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1579
+ className: "MaintenanceIcon"
1580
+ }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
1581
+ height: iconHeight,
1582
+ width: iconWidth,
1583
+ color: color
1584
+ }));
1585
+ case 'exit':
1586
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1587
+ className: "ExitIcon"
1588
+ }, /*#__PURE__*/React$1.createElement(ExitIcon, {
1589
+ height: iconHeight,
1590
+ width: iconWidth,
1591
+ color: color
1592
+ }));
1593
+ case 'eye':
1594
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1595
+ className: "EyeIcon"
1596
+ }, /*#__PURE__*/React$1.createElement(EyeIcon, {
1597
+ height: iconHeight,
1598
+ width: iconWidth,
1599
+ color: color
1600
+ }));
1601
+ case 'reselect':
1602
+ return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
1603
+ className: "ReselectIcon"
1604
+ }, /*#__PURE__*/React$1.createElement(ReselectIcon, {
1605
+ height: iconHeight,
1606
+ width: iconWidth,
1607
+ color: color
1608
+ }));
1609
+ default:
1610
+ return '';
1611
+ }
1612
+ };
1613
+ const getLeftIcon = () => {
1614
+ if (!leftIcon || leftIcon === 'none') return '';
1615
+ return getIcon(leftIcon);
1616
+ };
1617
+ const getRightIcon = () => {
1618
+ if (!rightIcon || rightIcon === 'none') return '';
1619
+ return getIcon(rightIcon);
1620
+ };
1621
+ return /*#__PURE__*/React$1.createElement(ButtonContainer$1, {
1622
+ className: "ButtonContainer",
1623
+ width: width || null,
1624
+ height: height || (size === 'small' ? '33px' : '45px')
1625
+ }, isSubmitButton ? /*#__PURE__*/React$1.createElement(InputCommit, {
1626
+ className: clicked ? 'InputCommit-clicked' : 'InputCommit',
1627
+ value: text,
1628
+ type: "submit",
1629
+ width: width || null,
1630
+ height: height || (size === 'small' ? '33px' : '45px'),
1631
+ disabled: disabled,
1632
+ text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
1633
+ background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
1634
+ border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
1635
+ hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
1636
+ hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
1637
+ hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
1638
+ disabled_text_color: disabledTextColor || '#B1B1B1',
1639
+ disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
1640
+ disabled_border_color: disabledBorderColor || '#E3E4E5',
1641
+ padding: size === 'small' ? '0 16px' : '0 20px',
1642
+ onClick: !disabled ? handleSubmitButtonOnClick : null
1643
+ }) : /*#__PURE__*/React$1.createElement(ButtonItem, {
1644
+ className: clicked ? 'ButtonItem-clicked' : 'ButtonItem',
1645
+ onMouseEnter: () => setHover(true),
1646
+ onMouseLeave: () => setHover(false),
1647
+ onClick: event => !disabled ? handleButtonClick(event) : null,
1648
+ width: width || null,
1649
+ height: height || (size === 'small' ? '33px' : '45px'),
1650
+ disabled: disabled,
1651
+ text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
1652
+ background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
1653
+ border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
1654
+ hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
1655
+ hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
1656
+ hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
1657
+ disabled_text_color: disabledTextColor || '#B1B1B1',
1658
+ disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
1659
+ disabled_border_color: disabledBorderColor || '#E3E4E5',
1660
+ padding: size === 'small' ? '0 16px' : '0 20px'
1661
+ }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$7, {
1662
+ className: "Label",
1663
+ disabled: disabled
1664
+ }, text), getRightIcon()));
1665
+ };
1666
+
1615
1667
  /* eslint-disable no-restricted-globals */
1616
1668
  /* eslint-disable no-shadow */
1617
1669
  const getCurrencySign = (currencyTypeToConvert, value) => {
@@ -1887,7 +1939,7 @@ const TitleAndValueContainer$4 = styled.div`
1887
1939
  flex-direction: column;
1888
1940
  padding: 0 20px;
1889
1941
  `;
1890
- const Title$k = styled.h4`
1942
+ const Title$j = styled.h4`
1891
1943
  font-weight: 400;
1892
1944
  font-size: 18px;
1893
1945
  margin: 0 0 8px;
@@ -2363,7 +2415,7 @@ const PieChart = props => {
2363
2415
  width: width
2364
2416
  }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$4, {
2365
2417
  className: "TitleAndValueContainer"
2366
- }, /*#__PURE__*/React$1.createElement(Title$k, {
2418
+ }, /*#__PURE__*/React$1.createElement(Title$j, {
2367
2419
  className: "Title"
2368
2420
  }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$2, {
2369
2421
  className: "CurrencySignAndFormattedValueContainer"
@@ -2443,7 +2495,7 @@ PieChart.defaultProps = {
2443
2495
  noDataText: 'No Data'
2444
2496
  };
2445
2497
 
2446
- const MainContainer$8 = styled.div`
2498
+ const MainContainer$7 = styled.div`
2447
2499
  position: relative;
2448
2500
  font-family: "Poppins", sans-serif;
2449
2501
  background-color: white;
@@ -2650,7 +2702,7 @@ const HannafordNewIcon = _ref => {
2650
2702
  })));
2651
2703
  };
2652
2704
 
2653
- const MainContainer$7 = styled.div`
2705
+ const MainContainer$6 = styled.div`
2654
2706
  position: relative;
2655
2707
  font-family: "Poppins", sans-serif;
2656
2708
  background-color: white;
@@ -2824,7 +2876,7 @@ const BannersDropdown = props => {
2824
2876
  setBannerButtonArrow('#757575');
2825
2877
  }
2826
2878
  }, [processedBanners]);
2827
- return /*#__PURE__*/React.createElement(MainContainer$7, null, /*#__PURE__*/React.createElement(ToggleBannersWrapper, null, /*#__PURE__*/React.createElement(ToggleBanners, {
2879
+ return /*#__PURE__*/React.createElement(MainContainer$6, null, /*#__PURE__*/React.createElement(ToggleBannersWrapper, null, /*#__PURE__*/React.createElement(ToggleBanners, {
2828
2880
  className: bannerButtonText === 'Partial' ? 'partial' : '',
2829
2881
  onClick: () => setToggled(!toggled)
2830
2882
  }, /*#__PURE__*/React.createElement("span", null, bannerButtonText), /*#__PURE__*/React.createElement(ArrowWrap, {
@@ -2900,11 +2952,11 @@ const LinkButtonItem = styled.div`
2900
2952
  transition: background-color 0.3s, color 0.3s;
2901
2953
  }
2902
2954
  `;
2903
- const Label$7 = styled.label`
2955
+ const Label$6 = styled.label`
2904
2956
  user-select: none;
2905
2957
  pointer-events: none;
2906
2958
  `;
2907
- const IconWrapper$3 = styled.div`
2959
+ const IconWrapper = styled.div`
2908
2960
  display: flex;
2909
2961
  align-items: center;
2910
2962
  justify-content: center;
@@ -3028,23 +3080,15 @@ const LinkButton = _ref => {
3028
3080
  const color = disabled ? '#B1B1B1' : newTextColor;
3029
3081
  switch (icon.toLowerCase()) {
3030
3082
  case 'filter':
3031
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3083
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3032
3084
  className: "FilterIcon"
3033
3085
  }, /*#__PURE__*/React$1.createElement(FilterIcon, {
3034
3086
  height: iconHeight,
3035
3087
  width: iconWidth,
3036
3088
  color: color
3037
3089
  }));
3038
- case 'plus':
3039
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3040
- className: "PlusIcon"
3041
- }, /*#__PURE__*/React$1.createElement(PlusIcon, {
3042
- height: iconHeight,
3043
- width: iconWidth,
3044
- color: color
3045
- }));
3046
3090
  case 'options':
3047
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3091
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3048
3092
  className: "OptionsIcon"
3049
3093
  }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
3050
3094
  height: iconHeight,
@@ -3052,7 +3096,7 @@ const LinkButton = _ref => {
3052
3096
  color: color
3053
3097
  }));
3054
3098
  case 'download':
3055
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3099
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3056
3100
  className: "DownloadIcon"
3057
3101
  }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
3058
3102
  height: iconHeight,
@@ -3060,7 +3104,7 @@ const LinkButton = _ref => {
3060
3104
  color: color
3061
3105
  }));
3062
3106
  case 'document':
3063
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3107
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3064
3108
  className: "DocumentIcon"
3065
3109
  }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
3066
3110
  height: iconHeight,
@@ -3068,7 +3112,7 @@ const LinkButton = _ref => {
3068
3112
  color: color
3069
3113
  }));
3070
3114
  case 'fly':
3071
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3115
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3072
3116
  className: "FlyIcon"
3073
3117
  }, /*#__PURE__*/React$1.createElement(FlyIcon, {
3074
3118
  height: iconHeight,
@@ -3076,7 +3120,7 @@ const LinkButton = _ref => {
3076
3120
  color: color
3077
3121
  }));
3078
3122
  case 'bell':
3079
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3123
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3080
3124
  className: "BellIcon"
3081
3125
  }, /*#__PURE__*/React$1.createElement(BellIcon, {
3082
3126
  height: iconHeight,
@@ -3084,7 +3128,7 @@ const LinkButton = _ref => {
3084
3128
  color: color
3085
3129
  }));
3086
3130
  case 'maintenance':
3087
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3131
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3088
3132
  className: "MaintenanceIcon"
3089
3133
  }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
3090
3134
  height: iconHeight,
@@ -3092,7 +3136,7 @@ const LinkButton = _ref => {
3092
3136
  color: color
3093
3137
  }));
3094
3138
  case 'exit':
3095
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3139
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3096
3140
  className: "ExitIcon"
3097
3141
  }, /*#__PURE__*/React$1.createElement(ExitIcon, {
3098
3142
  height: iconHeight,
@@ -3100,7 +3144,7 @@ const LinkButton = _ref => {
3100
3144
  color: color
3101
3145
  }));
3102
3146
  case 'eye':
3103
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3147
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3104
3148
  className: "EyeIcon"
3105
3149
  }, /*#__PURE__*/React$1.createElement(EyeIcon, {
3106
3150
  height: iconHeight,
@@ -3108,7 +3152,7 @@ const LinkButton = _ref => {
3108
3152
  color: color
3109
3153
  }));
3110
3154
  case 'arrowdown':
3111
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3155
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3112
3156
  className: "ArrowDownIcon"
3113
3157
  }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
3114
3158
  height: iconHeight,
@@ -3116,7 +3160,7 @@ const LinkButton = _ref => {
3116
3160
  color: color
3117
3161
  }));
3118
3162
  case 'arrowright':
3119
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3163
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3120
3164
  className: "ArrowRightIcon"
3121
3165
  }, /*#__PURE__*/React$1.createElement(MenuItemRightIcon, {
3122
3166
  height: iconHeight,
@@ -3124,7 +3168,7 @@ const LinkButton = _ref => {
3124
3168
  color: color
3125
3169
  }));
3126
3170
  case 'select':
3127
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3171
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3128
3172
  className: "SelectRightIcon"
3129
3173
  }, /*#__PURE__*/React$1.createElement(ArrowSelectIcon, {
3130
3174
  height: "16px",
@@ -3132,7 +3176,7 @@ const LinkButton = _ref => {
3132
3176
  color: color
3133
3177
  }));
3134
3178
  case 'info':
3135
- return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
3179
+ return /*#__PURE__*/React$1.createElement(IconWrapper, {
3136
3180
  className: "InfoIcon"
3137
3181
  }, /*#__PURE__*/React$1.createElement(InfoIcon, {
3138
3182
  height: iconHeight,
@@ -3163,7 +3207,7 @@ const LinkButton = _ref => {
3163
3207
  disabled: disabled,
3164
3208
  text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
3165
3209
  font_size: size === 'small' ? '14px' : '16px'
3166
- }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$7, {
3210
+ }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$6, {
3167
3211
  className: "Label",
3168
3212
  disabled: disabled,
3169
3213
  font_size: size === 'small' ? '14px' : '16px'
@@ -3242,7 +3286,7 @@ const EventDetailsCard = props => {
3242
3286
  const viewButtonClick = e => {
3243
3287
  onViewButtonClick(e);
3244
3288
  };
3245
- return /*#__PURE__*/React.createElement(MainContainer$8, {
3289
+ return /*#__PURE__*/React.createElement(MainContainer$7, {
3246
3290
  className: className,
3247
3291
  height: height,
3248
3292
  width: width
@@ -3320,6 +3364,16 @@ EventDetailsCard.defaultProps = {
3320
3364
  disableViewDetailsButton: false
3321
3365
  };
3322
3366
 
3367
+ function _extends() {
3368
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
3369
+ for (var e = 1; e < arguments.length; e++) {
3370
+ var t = arguments[e];
3371
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
3372
+ }
3373
+ return n;
3374
+ }, _extends.apply(null, arguments);
3375
+ }
3376
+
3323
3377
  const LinnerContainer$1 = styled.div.attrs(props => ({
3324
3378
  style: {
3325
3379
  backgroundColor: props.$backgroundColor,
@@ -3393,7 +3447,7 @@ const LinnerDataBox = props => {
3393
3447
  backgroundColor = "#FFFFFF",
3394
3448
  customDataFormat = false
3395
3449
  } = props;
3396
- return /*#__PURE__*/React$1.createElement(LinnerContainer$1, _extends$1({
3450
+ return /*#__PURE__*/React$1.createElement(LinnerContainer$1, _extends({
3397
3451
  className: className,
3398
3452
  $backgroundColor: backgroundColor || "white",
3399
3453
  $width: width || "100%",
@@ -3421,14 +3475,13 @@ const LinnerDataBox = props => {
3421
3475
  const TextFieldContainer = styled.div`
3422
3476
  position: relative;
3423
3477
  width: ${props => props.width};
3424
- `;
3425
- const IconWrapper$2 = styled.div`
3426
- position: absolute;
3427
- top: 50%;
3428
- transform: translateY(-50%);
3429
- left: ${props => props.position === 'left' ? '10px' : 'unset'};
3430
- right: ${props => props.position === 'right' ? '10px' : 'unset'};
3431
- cursor: pointer;
3478
+ > svg {
3479
+ position: absolute;
3480
+ top: 50%;
3481
+ transform: translateY(-50%);
3482
+ left: 10px;
3483
+
3484
+ }
3432
3485
  `;
3433
3486
  const TextFieldInput = styled.input`
3434
3487
  width: 100%;
@@ -3439,7 +3492,7 @@ const TextFieldInput = styled.input`
3439
3492
  border-radius: 8px;
3440
3493
  border: 1px solid #B1B1B1;
3441
3494
  background: transparent;
3442
- text-indent: ${props => props.position === 'left' ? '14px' : '0'};
3495
+ text-indent: 14px;
3443
3496
  &:hover,
3444
3497
  &:focus {
3445
3498
  border: 1px solid #212121;
@@ -3449,14 +3502,27 @@ const TextFieldInput = styled.input`
3449
3502
  }
3450
3503
  `;
3451
3504
 
3505
+ const SearchIcon = ({
3506
+ width = '13',
3507
+ height = '13',
3508
+ color = '#212121'
3509
+ }) => /*#__PURE__*/React$1.createElement("svg", {
3510
+ width: width,
3511
+ height: height,
3512
+ viewBox: "0 0 13 13",
3513
+ fill: "none",
3514
+ xmlns: "http://www.w3.org/2000/svg"
3515
+ }, /*#__PURE__*/React$1.createElement("path", {
3516
+ d: "M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z",
3517
+ fill: color
3518
+ }));
3519
+
3452
3520
  const SearchInput = props => {
3453
3521
  const {
3454
- placeholder = 'Search',
3522
+ placeholder,
3455
3523
  onTyping,
3456
- width = '100%',
3457
- height = '40px',
3458
- position = 'left',
3459
- iconColor = '#212121',
3524
+ width,
3525
+ height,
3460
3526
  className
3461
3527
  } = props;
3462
3528
  const handleInputChange = e => {
@@ -3465,18 +3531,26 @@ const SearchInput = props => {
3465
3531
  return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
3466
3532
  className: className,
3467
3533
  width: width
3468
- }, /*#__PURE__*/React$1.createElement(IconWrapper$2, {
3469
- position: position
3470
- }, /*#__PURE__*/React$1.createElement(SearchIcon, {
3471
- color: iconColor
3472
- })), /*#__PURE__*/React$1.createElement(TextFieldInput, {
3534
+ }, /*#__PURE__*/React$1.createElement(TextFieldInput, {
3473
3535
  type: "search",
3474
- id: "search-input",
3475
3536
  height: height,
3476
3537
  placeholder: placeholder,
3477
- onChange: handleInputChange,
3478
- position: position
3479
- }));
3538
+ onChange: handleInputChange
3539
+ }), /*#__PURE__*/React$1.createElement(SearchIcon, null));
3540
+ };
3541
+ SearchInput.propTypes = {
3542
+ placeholder: PropTypes.string,
3543
+ width: PropTypes.string,
3544
+ height: PropTypes.string,
3545
+ onTyping: PropTypes.func,
3546
+ className: PropTypes.string
3547
+ };
3548
+ SearchInput.defaultProps = {
3549
+ placeholder: 'Search',
3550
+ width: '100%',
3551
+ height: '40px',
3552
+ onTyping: () => {},
3553
+ className: ''
3480
3554
  };
3481
3555
 
3482
3556
  const scrollableStyles$c = `
@@ -3571,7 +3645,7 @@ const Body = styled.div`
3571
3645
  border-radius: ${props => props.setBackground ? '12px' : '0'};
3572
3646
  box-shadow: ${props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset'};
3573
3647
  `;
3574
- const Label$6 = styled.div`
3648
+ const Label$5 = styled.div`
3575
3649
  font-size: 12px;
3576
3650
  font-weight: 400;
3577
3651
  padding: 8px;
@@ -3810,7 +3884,7 @@ const TabMenu = props => {
3810
3884
  color: color,
3811
3885
  width: `${100 / tabs.length}%`,
3812
3886
  role: "presentation"
3813
- }))), headlineContent && /*#__PURE__*/React$1.createElement(TabActionLine, null, headlineContent), setTopRightButton && /*#__PURE__*/React$1.createElement(Button$1, {
3887
+ }))), headlineContent && /*#__PURE__*/React$1.createElement(TabActionLine, null, headlineContent), setTopRightButton && /*#__PURE__*/React$1.createElement(Button, {
3814
3888
  text: rightButtonText,
3815
3889
  rightIcon: rightButtonIcon,
3816
3890
  size: "small",
@@ -3822,7 +3896,7 @@ const TabMenu = props => {
3822
3896
  hoverBorderColor: buttonHoverColor
3823
3897
  })), showActions && /*#__PURE__*/React$1.createElement(ActionsWrapper, {
3824
3898
  className: "ActionsWrapper"
3825
- }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$6, {
3899
+ }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$5, {
3826
3900
  className: "Label"
3827
3901
  }, /*#__PURE__*/React$1.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/React$1.createElement("span", {
3828
3902
  className: "separator"
@@ -8443,7 +8517,7 @@ const DropdownWrapper$2 = styled.div`
8443
8517
  font-size: 14px;
8444
8518
  border-radius: 10px;
8445
8519
  `;
8446
- const Label$5 = styled.label`
8520
+ const Label$4 = styled.label`
8447
8521
  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
8448
8522
  font-weight: 400;
8449
8523
  padding-inline-end: 5px;
@@ -8466,7 +8540,7 @@ const Label$5 = styled.label`
8466
8540
  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
8467
8541
  }
8468
8542
  `;
8469
- const InputContainer$8 = styled.div`
8543
+ const InputContainer$6 = styled.div`
8470
8544
  display: flex;
8471
8545
  flex-direction: row;
8472
8546
  flex-wrap: nowrap;
@@ -8498,7 +8572,7 @@ const InputContainer$8 = styled.div`
8498
8572
  }
8499
8573
 
8500
8574
  `;
8501
- const InputSubContainer$4 = styled.div`
8575
+ const InputSubContainer$3 = styled.div`
8502
8576
  display: flex;
8503
8577
  flex-direction: column;
8504
8578
  flex-wrap: nowrap;
@@ -8517,7 +8591,7 @@ const InputSubContainer$4 = styled.div`
8517
8591
  outline: none;
8518
8592
  color: ${props => props.disabled ? '#888' : '#212121'};
8519
8593
  `;
8520
- const StyledInput$8 = styled.input`
8594
+ const StyledInput$6 = styled.input`
8521
8595
  width: calc(100% - 10px);
8522
8596
  height: 20px;
8523
8597
  font-family: Poppins;
@@ -8528,7 +8602,7 @@ const StyledInput$8 = styled.input`
8528
8602
  color: ${props => props.disabled ? '#888' : '#212121'};
8529
8603
  border: none;
8530
8604
  `;
8531
- const OptionsContainer$7 = styled.div`
8605
+ const OptionsContainer$6 = styled.div`
8532
8606
  margin: 0;
8533
8607
  top: 100%;
8534
8608
  left: 0;
@@ -8576,7 +8650,7 @@ const OptionItem$3 = styled.li`
8576
8650
  background-color: #EDF6FF;
8577
8651
  }
8578
8652
  `;
8579
- const ErrorMessage$4 = styled.div`
8653
+ const ErrorMessage$3 = styled.div`
8580
8654
  font-size: 12px;
8581
8655
  color: red;
8582
8656
  margin-top: 5px;
@@ -8732,20 +8806,20 @@ const DropdownSingleNew = ({
8732
8806
  width: width,
8733
8807
  onMouseEnter: () => setHoverInputContainer(true),
8734
8808
  onMouseLeave: () => setHoverInputContainer(false)
8735
- }, /*#__PURE__*/React$1.createElement(InputContainer$8, {
8809
+ }, /*#__PURE__*/React$1.createElement(InputContainer$6, {
8736
8810
  className: "InputContainer",
8737
8811
  labelColor: labelColor,
8738
8812
  disabled: disabled,
8739
8813
  error: error,
8740
8814
  isFocused: isFocused
8741
- }, /*#__PURE__*/React$1.createElement(InputSubContainer$4, {
8815
+ }, /*#__PURE__*/React$1.createElement(InputSubContainer$3, {
8742
8816
  className: "InputSubContainer",
8743
8817
  ref: containerRef,
8744
8818
  labelColor: labelColor,
8745
8819
  disabled: disabled,
8746
8820
  error: error,
8747
8821
  onClick: handleLabelClick
8748
- }, /*#__PURE__*/React$1.createElement(Label$5, {
8822
+ }, /*#__PURE__*/React$1.createElement(Label$4, {
8749
8823
  className: "Label",
8750
8824
  isFocused: isFocused,
8751
8825
  labelColor: labelColor,
@@ -8755,7 +8829,7 @@ const DropdownSingleNew = ({
8755
8829
  errorMessage: errorMessage,
8756
8830
  onClick: handleLabelClick,
8757
8831
  showLabelOnTop: showLabelOnTop
8758
- }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(StyledInput$8, {
8832
+ }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(StyledInput$6, {
8759
8833
  className: "StyledInput",
8760
8834
  ref: inputRef,
8761
8835
  value: selectedOptions && selectedOptions?.length > 0 ? selectedOptions[0].label : inputValue && inputValue?.length > 0 ? inputValue[0].label : "",
@@ -8783,7 +8857,7 @@ const DropdownSingleNew = ({
8783
8857
  width: "12px",
8784
8858
  height: "12px",
8785
8859
  color: "#B1B1B1"
8786
- }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$4, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$7, {
8860
+ }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$3, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$6, {
8787
8861
  className: "OptionsContainer",
8788
8862
  onMouseEnter: () => setHoverOptionsContainer(true),
8789
8863
  onMouseLeave: () => setHoverOptionsContainer(false),
@@ -8910,7 +8984,7 @@ const DropdownWrapper$1 = styled.div`
8910
8984
  font-size: 14px;
8911
8985
  border-radius: 10px;
8912
8986
  `;
8913
- const Label$4 = styled.label`
8987
+ const Label$3 = styled.label`
8914
8988
  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
8915
8989
  font-weight: 400;
8916
8990
  padding-inline-end: 5px;
@@ -8933,7 +9007,7 @@ const Label$4 = styled.label`
8933
9007
  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
8934
9008
  }
8935
9009
  `;
8936
- const InputContainer$7 = styled.div`
9010
+ const InputContainer$5 = styled.div`
8937
9011
  display: flex;
8938
9012
  flex-direction: row;
8939
9013
  flex-wrap: nowrap;
@@ -8964,7 +9038,7 @@ const InputContainer$7 = styled.div`
8964
9038
  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
8965
9039
  }
8966
9040
  `;
8967
- const InputSubContainer$3 = styled.div`
9041
+ const InputSubContainer$2 = styled.div`
8968
9042
 
8969
9043
  display: flex;
8970
9044
  flex-direction: column;
@@ -8984,7 +9058,7 @@ const InputSubContainer$3 = styled.div`
8984
9058
  outline: none;
8985
9059
  color: ${props => props.disabled ? '#888' : '#212121'};
8986
9060
  `;
8987
- const StyledInput$7 = styled.input`
9061
+ const StyledInput$5 = styled.input`
8988
9062
  width: calc(100% - 20px);
8989
9063
  height: 25px;
8990
9064
  font-family: Poppins;
@@ -8995,7 +9069,7 @@ const StyledInput$7 = styled.input`
8995
9069
  color: ${props => props.disabled ? '#888' : '#212121'};
8996
9070
  border: none;
8997
9071
  `;
8998
- const OptionsContainer$6 = styled.div`
9072
+ const OptionsContainer$5 = styled.div`
8999
9073
  margin: 0;
9000
9074
  top: 100%;
9001
9075
  left: 0;
@@ -9042,7 +9116,7 @@ const OptionItem$2 = styled.li`
9042
9116
  background-color: #EDF6FF;
9043
9117
  }
9044
9118
  `;
9045
- const ErrorMessage$3 = styled.div`
9119
+ const ErrorMessage$2 = styled.div`
9046
9120
  font-size: 12px;
9047
9121
  color: red;
9048
9122
  margin-top: 5px;
@@ -9249,20 +9323,20 @@ const DropdownMultiNew = ({
9249
9323
  width: width,
9250
9324
  onMouseEnter: () => setHoverInputContainer(true),
9251
9325
  onMouseLeave: () => setHoverInputContainer(false)
9252
- }, /*#__PURE__*/React$1.createElement(InputContainer$7, {
9326
+ }, /*#__PURE__*/React$1.createElement(InputContainer$5, {
9253
9327
  className: "InputContainer",
9254
9328
  labelColor: labelColor,
9255
9329
  disabled: disabled,
9256
9330
  error: error,
9257
9331
  isFocused: isFocused
9258
- }, /*#__PURE__*/React$1.createElement(InputSubContainer$3, {
9332
+ }, /*#__PURE__*/React$1.createElement(InputSubContainer$2, {
9259
9333
  className: "InputSubContainer",
9260
9334
  ref: containerRef,
9261
9335
  labelColor: labelColor,
9262
9336
  disabled: disabled,
9263
9337
  error: error,
9264
9338
  onClick: handleLabelClick
9265
- }, /*#__PURE__*/React$1.createElement(Label$4, {
9339
+ }, /*#__PURE__*/React$1.createElement(Label$3, {
9266
9340
  className: "Label",
9267
9341
  isFocused: isFocused,
9268
9342
  labelColor: labelColor,
@@ -9272,7 +9346,7 @@ const DropdownMultiNew = ({
9272
9346
  errorMessage: errorMessage,
9273
9347
  onClick: handleLabelClick,
9274
9348
  showLabelOnTop: showLabelOnTop
9275
- }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput$7, {
9349
+ }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput$5, {
9276
9350
  className: "StyledInput",
9277
9351
  ref: inputRef,
9278
9352
  value: inputValue,
@@ -9302,7 +9376,7 @@ const DropdownMultiNew = ({
9302
9376
  width: "12px",
9303
9377
  height: "12px",
9304
9378
  color: "#B1B1B1"
9305
- }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$3, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$6, {
9379
+ }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$2, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$5, {
9306
9380
  className: "OptionsContainer",
9307
9381
  onMouseEnter: () => setHoverOptionsContainer(true),
9308
9382
  onMouseLeave: () => setHoverOptionsContainer(false),
@@ -9389,34 +9463,27 @@ const DropdownMain = styled.div`
9389
9463
  `;
9390
9464
 
9391
9465
  /* eslint-disable react/prop-types */
9392
- const DropdownNew = props => {
9393
- const {
9394
- isMulti = false,
9395
- label = "",
9396
- labelEmptyValue = "",
9397
- options = [],
9398
- selectedValue = null,
9399
- placeHolder = "",
9400
- onChange = () => {},
9401
- handleChange = () => {},
9402
- required = false,
9403
- disabled = false,
9404
- width = "300px",
9405
- error = false,
9406
- showLabelOnTop = true,
9407
- orderBy = "",
9408
- elementType = "dropdown",
9409
- errorMessage = "",
9410
- labelColor = "#066768",
9411
- checkBoxColor = "#229E38",
9412
- xIconShow = true
9413
- } = props;
9414
- const handleOnChange = event => {
9415
- if (event && event.newValue && event.newValue[0]) {
9416
- onChange && onChange(event);
9417
- handleChange && handleChange(event.newValue[0].value);
9418
- }
9419
- };
9466
+ const DropdownNew = _ref => {
9467
+ let {
9468
+ isMulti,
9469
+ label,
9470
+ labelEmptyValue,
9471
+ options,
9472
+ selectedValue,
9473
+ placeHolder,
9474
+ onChange,
9475
+ required,
9476
+ disabled,
9477
+ width,
9478
+ error,
9479
+ errorMessage,
9480
+ labelColor,
9481
+ checkBoxColor,
9482
+ xIconShow,
9483
+ showLabelOnTop,
9484
+ orderBy,
9485
+ elementType
9486
+ } = _ref;
9420
9487
  return /*#__PURE__*/React$1.createElement(DropdownMain, {
9421
9488
  className: "DropdownMain",
9422
9489
  width: width
@@ -9435,7 +9502,7 @@ const DropdownNew = props => {
9435
9502
  errorMessage: errorMessage,
9436
9503
  selectedValue: selectedValue,
9437
9504
  xIconShow: xIconShow,
9438
- onChange: handleOnChange,
9505
+ onChange: onChange,
9439
9506
  showLabelOnTop: showLabelOnTop,
9440
9507
  orderBy: orderBy,
9441
9508
  elementType: elementType
@@ -9454,12 +9521,54 @@ const DropdownNew = props => {
9454
9521
  errorMessage: errorMessage,
9455
9522
  selectedValue: selectedValue,
9456
9523
  xIconShow: xIconShow,
9457
- onChange: handleOnChange,
9524
+ onChange: onChange,
9458
9525
  showLabelOnTop: showLabelOnTop,
9459
9526
  orderBy: orderBy,
9460
9527
  elementType: elementType
9461
9528
  }));
9462
9529
  };
9530
+ DropdownNew.propTypes = {
9531
+ placeHolder: PropTypes.string,
9532
+ label: PropTypes.string,
9533
+ labelEmptyValue: PropTypes.string,
9534
+ labelColor: PropTypes.string,
9535
+ checkBoxColor: PropTypes.string,
9536
+ required: PropTypes.bool,
9537
+ width: PropTypes.string,
9538
+ disabled: PropTypes.bool,
9539
+ error: PropTypes.bool,
9540
+ errorMessage: PropTypes.string,
9541
+ options: PropTypes.arrayOf(PropTypes.shape({
9542
+ id: PropTypes.string,
9543
+ label: PropTypes.string
9544
+ })),
9545
+ selectedValue: PropTypes.arrayOf(PropTypes.shape({
9546
+ id: PropTypes.string,
9547
+ label: PropTypes.string
9548
+ })),
9549
+ xIconShow: PropTypes.bool,
9550
+ onChange: PropTypes.func,
9551
+ showLabelOnTop: PropTypes.bool
9552
+ };
9553
+ DropdownNew.defaultProps = {
9554
+ placeHolder: "Type...",
9555
+ label: "Label",
9556
+ labelEmptyValue: "All Labels",
9557
+ labelColor: "#066768",
9558
+ checkBoxColor: "#229E38",
9559
+ required: true,
9560
+ width: "300px",
9561
+ disabled: false,
9562
+ error: false,
9563
+ errorMessage: "",
9564
+ options: [],
9565
+ selectedValue: [],
9566
+ xIconShow: true,
9567
+ onChange: () => {},
9568
+ showLabelOnTop: true,
9569
+ orderBy: "asc",
9570
+ elementType: "number"
9571
+ };
9463
9572
 
9464
9573
  const Calendar = () => /*#__PURE__*/React$1.createElement("svg", {
9465
9574
  width: "11",
@@ -9496,7 +9605,7 @@ const RangePickerContainer = styled.div`
9496
9605
  width: ${props => props.width || '100%'};
9497
9606
  height: ${props => props.height || '60px'};
9498
9607
  `;
9499
- const CalendarDiv$3 = styled.div`
9608
+ const CalendarDiv$2 = styled.div`
9500
9609
  position: absolute;
9501
9610
  width: 11px;
9502
9611
  height: 11px;
@@ -9508,7 +9617,7 @@ const CalendarDiv$3 = styled.div`
9508
9617
  }
9509
9618
 
9510
9619
  `;
9511
- const InputContainer$6 = styled.div`
9620
+ const InputContainer$4 = styled.div`
9512
9621
  display: flex;
9513
9622
  flex-direction: row;
9514
9623
  flex-wrap: nowrap;
@@ -9538,7 +9647,7 @@ const InputContainer$6 = styled.div`
9538
9647
  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'};
9539
9648
  }
9540
9649
  `;
9541
- const StyledInput$6 = styled.input`
9650
+ const StyledInput$4 = styled.input`
9542
9651
  padding: 20px;
9543
9652
  font-size: 14px;
9544
9653
  border-radius: ${props => props.borderRadius || '4px'};
@@ -9555,7 +9664,7 @@ const StyledInput$6 = styled.input`
9555
9664
  color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
9556
9665
  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
9557
9666
  `;
9558
- const StyledLabel$3 = styled.label`
9667
+ const StyledLabel$2 = styled.label`
9559
9668
  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
9560
9669
  padding-inline-end: 5px;
9561
9670
  padding-inline-start: 5px;
@@ -9575,7 +9684,7 @@ const StyledLabel$3 = styled.label`
9575
9684
  box-sizing: border-box;
9576
9685
  cursor: pointer;
9577
9686
  `;
9578
- const RequiredIndicator$3 = styled.span`
9687
+ const RequiredIndicator$2 = styled.span`
9579
9688
  color: red;
9580
9689
  margin-left: 5px;
9581
9690
  `;
@@ -9584,7 +9693,7 @@ styled.div`
9584
9693
  color: red;
9585
9694
  margin-top: 5px;
9586
9695
  `;
9587
- const OptionsContainer$5 = styled.div`
9696
+ const OptionsContainer$4 = styled.div`
9588
9697
  display: block;
9589
9698
  margin: 0;
9590
9699
  padding-top: 8px;
@@ -9935,7 +10044,7 @@ const RangePicker = _ref => {
9935
10044
  onClick: handleFocus,
9936
10045
  width: width,
9937
10046
  height: height
9938
- }, /*#__PURE__*/React$1.createElement(InputContainer$6, {
10047
+ }, /*#__PURE__*/React$1.createElement(InputContainer$4, {
9939
10048
  className: "InputContainer",
9940
10049
  isFocused: isFocused,
9941
10050
  hasValue: value,
@@ -9945,7 +10054,7 @@ const RangePicker = _ref => {
9945
10054
  borderColorFocus: borderColorFocus,
9946
10055
  onMouseEnter: () => setHoverInputContainer(true),
9947
10056
  onMouseLeave: () => setHoverInputContainer(false)
9948
- }, /*#__PURE__*/React$1.createElement(StyledLabel$3, {
10057
+ }, /*#__PURE__*/React$1.createElement(StyledLabel$2, {
9949
10058
  className: "StyledLabel",
9950
10059
  onClick: handleFocus,
9951
10060
  isFocused: isFocused,
@@ -9954,7 +10063,7 @@ const RangePicker = _ref => {
9954
10063
  textColor: textColor,
9955
10064
  borderColor: borderColor,
9956
10065
  borderColorFocus: borderColorFocus
9957
- }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$3, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$6, {
10066
+ }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$2, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$4, {
9958
10067
  className: "StyledInput",
9959
10068
  ref: inputRef,
9960
10069
  value: value,
@@ -9970,14 +10079,14 @@ const RangePicker = _ref => {
9970
10079
  textColor: textColor,
9971
10080
  borderColor: borderColor,
9972
10081
  borderColorFocus: borderColorFocus
9973
- }), /*#__PURE__*/React$1.createElement(CalendarDiv$3, {
10082
+ }), /*#__PURE__*/React$1.createElement(CalendarDiv$2, {
9974
10083
  className: "CalendarDiv",
9975
10084
  onClick: toggleDatePicker
9976
10085
  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, {
9977
10086
  className: "CalendarInOpen"
9978
10087
  }) : /*#__PURE__*/React$1.createElement(Calendar, {
9979
10088
  className: "Calendar"
9980
- }))), /*#__PURE__*/React$1.createElement(OptionsContainer$5, {
10089
+ }))), /*#__PURE__*/React$1.createElement(OptionsContainer$4, {
9981
10090
  className: "OptionsContainer",
9982
10091
  onMouseEnter: () => setHoverOptionsContainer(true),
9983
10092
  onMouseLeave: () => setHoverOptionsContainer(false)
@@ -10030,14 +10139,14 @@ const QuarterPickerContainer = styled.div`
10030
10139
  width: ${props => props.width || '100%'};
10031
10140
  height: ${props => props.height || '60px'};
10032
10141
  `;
10033
- const CalendarDiv$2 = styled.div`
10142
+ const CalendarDiv$1 = styled.div`
10034
10143
  position: absolute;
10035
10144
  width: 11px;
10036
10145
  height: 11px;
10037
10146
  top: ${props => parseInt(props.height, 10) / 2 || '20px'};
10038
10147
  right: 25px;
10039
10148
  `;
10040
- const InputContainer$5 = styled.div`
10149
+ const InputContainer$3 = styled.div`
10041
10150
  display: flex;
10042
10151
  flex-direction: row;
10043
10152
  flex-wrap: nowrap;
@@ -10067,7 +10176,7 @@ const InputContainer$5 = styled.div`
10067
10176
  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'};
10068
10177
  }
10069
10178
  `;
10070
- const StyledInput$5 = styled.input`
10179
+ const StyledInput$3 = styled.input`
10071
10180
  padding: 20px;
10072
10181
  font-size: 14px;
10073
10182
  border-radius: ${props => props.borderRadius || '4px'};
@@ -10084,7 +10193,7 @@ const StyledInput$5 = styled.input`
10084
10193
  color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
10085
10194
  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
10086
10195
  `;
10087
- const StyledLabel$2 = styled.label`
10196
+ const StyledLabel$1 = styled.label`
10088
10197
  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
10089
10198
  padding-inline-end: 5px;
10090
10199
  padding-inline-start: 5px;
@@ -10104,7 +10213,7 @@ const StyledLabel$2 = styled.label`
10104
10213
  box-sizing: border-box;
10105
10214
  cursor: pointer;
10106
10215
  `;
10107
- const RequiredIndicator$2 = styled.span`
10216
+ const RequiredIndicator$1 = styled.span`
10108
10217
  color: red;
10109
10218
  margin-left: 5px;
10110
10219
  `;
@@ -10113,7 +10222,7 @@ styled.div`
10113
10222
  color: red;
10114
10223
  margin-top: 5px;
10115
10224
  `;
10116
- const OptionsContainer$4 = styled.div`
10225
+ const OptionsContainer$3 = styled.div`
10117
10226
  display: block;
10118
10227
  margin: 0;
10119
10228
  padding-top: 8px;
@@ -10368,7 +10477,7 @@ const QuarterPicker = _ref => {
10368
10477
  onClick: handleFocus,
10369
10478
  width: width,
10370
10479
  height: height
10371
- }, /*#__PURE__*/React$1.createElement(InputContainer$5, {
10480
+ }, /*#__PURE__*/React$1.createElement(InputContainer$3, {
10372
10481
  className: "InputContainer",
10373
10482
  isFocused: isFocused,
10374
10483
  hasValue: value,
@@ -10378,7 +10487,7 @@ const QuarterPicker = _ref => {
10378
10487
  borderColorFocus: borderColorFocus,
10379
10488
  onMouseEnter: () => setHoverInputContainer(true),
10380
10489
  onMouseLeave: () => setHoverInputContainer(false)
10381
- }, /*#__PURE__*/React$1.createElement(StyledLabel$2, {
10490
+ }, /*#__PURE__*/React$1.createElement(StyledLabel$1, {
10382
10491
  className: "StyledLabel",
10383
10492
  onClick: handleFocus,
10384
10493
  isFocused: isFocused,
@@ -10387,7 +10496,7 @@ const QuarterPicker = _ref => {
10387
10496
  textColor: textColor,
10388
10497
  borderColor: borderColor,
10389
10498
  borderColorFocus: borderColorFocus
10390
- }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$2, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$5, {
10499
+ }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$1, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$3, {
10391
10500
  className: "StyledInput",
10392
10501
  ref: inputRef,
10393
10502
  value: value,
@@ -10403,11 +10512,11 @@ const QuarterPicker = _ref => {
10403
10512
  disabled: disabled,
10404
10513
  borderColor: borderColor,
10405
10514
  textColor: textColor
10406
- }), /*#__PURE__*/React$1.createElement(CalendarDiv$2, {
10515
+ }), /*#__PURE__*/React$1.createElement(CalendarDiv$1, {
10407
10516
  className: "CalendarDiv",
10408
10517
  width: width,
10409
10518
  onClick: toggleDatePicker
10410
- }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$4, {
10519
+ }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$3, {
10411
10520
  className: "OptionsContainer",
10412
10521
  onMouseEnter: () => setHoverOptionsContainer(true),
10413
10522
  onMouseLeave: () => setHoverOptionsContainer(false)
@@ -10456,14 +10565,14 @@ const MonthPickerContainer = styled.div`
10456
10565
  width: ${props => props.width || '100%'};
10457
10566
  height: ${props => props.height || '60px'};
10458
10567
  `;
10459
- const CalendarDiv$1 = styled.div`
10568
+ const CalendarDiv = styled.div`
10460
10569
  position: absolute;
10461
10570
  width: 11px;
10462
10571
  height: 11px;
10463
10572
  top: ${props => parseInt(props.height, 10) / 2 || '20px'};
10464
10573
  right: 25px;
10465
10574
  `;
10466
- const InputContainer$4 = styled.div`
10575
+ const InputContainer$2 = styled.div`
10467
10576
  display: flex;
10468
10577
  flex-direction: row;
10469
10578
  flex-wrap: nowrap;
@@ -10493,7 +10602,7 @@ const InputContainer$4 = styled.div`
10493
10602
  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'};
10494
10603
  }
10495
10604
  `;
10496
- const StyledInput$4 = styled.input`
10605
+ const StyledInput$2 = styled.input`
10497
10606
  padding: 20px;
10498
10607
  font-size: 14px;
10499
10608
  border-radius: ${props => props.borderRadius || '4px'};
@@ -10511,7 +10620,7 @@ const StyledInput$4 = styled.input`
10511
10620
  color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
10512
10621
  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
10513
10622
  `;
10514
- const StyledLabel$1 = styled.label`
10623
+ const StyledLabel = styled.label`
10515
10624
  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
10516
10625
  padding-inline-end: 5px;
10517
10626
  padding-inline-start: 5px;
@@ -10531,7 +10640,7 @@ const StyledLabel$1 = styled.label`
10531
10640
  box-sizing: border-box;
10532
10641
  cursor: pointer;
10533
10642
  `;
10534
- const RequiredIndicator$1 = styled.span`
10643
+ const RequiredIndicator = styled.span`
10535
10644
  color: red;
10536
10645
  margin-left: 5px;
10537
10646
  `;
@@ -10540,7 +10649,7 @@ styled.div`
10540
10649
  color: red;
10541
10650
  margin-top: 5px;
10542
10651
  `;
10543
- const OptionsContainer$3 = styled.div`
10652
+ const OptionsContainer$2 = styled.div`
10544
10653
  display: block;
10545
10654
  margin: 0;
10546
10655
  padding-top: 8px;
@@ -10825,7 +10934,7 @@ const MonthPicker = _ref => {
10825
10934
  onClick: handleFocus,
10826
10935
  width: width,
10827
10936
  height: height
10828
- }, /*#__PURE__*/React$1.createElement(InputContainer$4, {
10937
+ }, /*#__PURE__*/React$1.createElement(InputContainer$2, {
10829
10938
  className: "InputContainer",
10830
10939
  isFocused: isFocused,
10831
10940
  hasValue: value,
@@ -10835,7 +10944,7 @@ const MonthPicker = _ref => {
10835
10944
  borderColorFocus: borderColorFocus,
10836
10945
  onMouseEnter: () => setHoverInputContainer(true),
10837
10946
  onMouseLeave: () => setHoverInputContainer(false)
10838
- }, /*#__PURE__*/React$1.createElement(StyledLabel$1, {
10947
+ }, /*#__PURE__*/React$1.createElement(StyledLabel, {
10839
10948
  className: "StyledLabel",
10840
10949
  onClick: handleFocus,
10841
10950
  isFocused: isFocused,
@@ -10844,7 +10953,7 @@ const MonthPicker = _ref => {
10844
10953
  textColor: textColor,
10845
10954
  borderColor: borderColor,
10846
10955
  borderColorFocus: borderColorFocus
10847
- }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$1, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$4, {
10956
+ }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$2, {
10848
10957
  className: "StyledInput",
10849
10958
  ref: inputRef,
10850
10959
  value: value,
@@ -10860,11 +10969,11 @@ const MonthPicker = _ref => {
10860
10969
  disabled: disabled,
10861
10970
  borderColor: borderColor,
10862
10971
  textColor: textColor
10863
- }), /*#__PURE__*/React$1.createElement(CalendarDiv$1, {
10972
+ }), /*#__PURE__*/React$1.createElement(CalendarDiv, {
10864
10973
  className: "CalendarDiv",
10865
10974
  width: width,
10866
10975
  onClick: toggleDatePicker
10867
- }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$3, {
10976
+ }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$2, {
10868
10977
  className: "OptionsContainer",
10869
10978
  onMouseEnter: () => setHoverOptionsContainer(true),
10870
10979
  onMouseLeave: () => setHoverOptionsContainer(false)
@@ -11506,7 +11615,7 @@ const FilterPanel = props => {
11506
11615
  content: getTooltipTextGoButton(),
11507
11616
  direction: "top",
11508
11617
  topFactor: -0.9
11509
- }, /*#__PURE__*/React$1.createElement(Button$1, {
11618
+ }, /*#__PURE__*/React$1.createElement(Button, {
11510
11619
  text: "Go",
11511
11620
  type: "primary",
11512
11621
  size: "medium",
@@ -11534,7 +11643,7 @@ const FilterPanel = props => {
11534
11643
  })
11535
11644
  }));
11536
11645
  } else {
11537
- content = /*#__PURE__*/React$1.createElement(Button$1, {
11646
+ content = /*#__PURE__*/React$1.createElement(Button, {
11538
11647
  text: "Go",
11539
11648
  type: "primary",
11540
11649
  size: "medium",
@@ -11574,7 +11683,7 @@ const FilterPanel = props => {
11574
11683
  ref: AllFieldsContainerRef
11575
11684
  }, displayFields(FieldsDataState)), /*#__PURE__*/React$1.createElement(ButtonsContainer, {
11576
11685
  className: "ButtonsContainer"
11577
- }, displayGoButton(), /*#__PURE__*/React$1.createElement(Button$1, {
11686
+ }, displayGoButton(), /*#__PURE__*/React$1.createElement(Button, {
11578
11687
  text: "Reset",
11579
11688
  size: "medium",
11580
11689
  type: "secondary",
@@ -11912,7 +12021,7 @@ const Loader$1 = styled.span`
11912
12021
  animation: ${rotation$1} 1.5s infinite ease;
11913
12022
  transform: translateZ(0);
11914
12023
  `;
11915
- const TableWrapper$3 = styled.div`
12024
+ const TableWrapper$1 = styled.div`
11916
12025
  position: relative;
11917
12026
  width: ${props => `${props.width}`};
11918
12027
  height: ${props => `${props.height}`};
@@ -11922,7 +12031,7 @@ const TableWrapper$3 = styled.div`
11922
12031
  overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
11923
12032
  ${scrollableStyles$9}
11924
12033
  `;
11925
- const Table$3 = styled.table`
12034
+ const Table$1 = styled.table`
11926
12035
  font-family: "Poppins", sans-serif;
11927
12036
  width: ${props => `${props.tableWidthSize}%`};
11928
12037
  table-layout: fixed;
@@ -12227,13 +12336,13 @@ const ReportTable = props => {
12227
12336
  return newState;
12228
12337
  });
12229
12338
  };
12230
- return /*#__PURE__*/React$1.createElement(ReportTableWrapper, null, /*#__PURE__*/React$1.createElement(TableWrapper$3, {
12339
+ return /*#__PURE__*/React$1.createElement(ReportTableWrapper, null, /*#__PURE__*/React$1.createElement(TableWrapper$1, {
12231
12340
  width: width,
12232
12341
  height: height,
12233
12342
  className: className,
12234
12343
  maxColumnsNumber: getMaxColnumber(),
12235
12344
  columnsNumber: columnsNumber
12236
- }, /*#__PURE__*/React$1.createElement(Table$3, {
12345
+ }, /*#__PURE__*/React$1.createElement(Table$1, {
12237
12346
  tableWidthSize: tableWidthSize
12238
12347
  }, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement(Tr, null, tableData.columnsHeadings.map((headline, index) => /*#__PURE__*/React$1.createElement(Th$1, {
12239
12348
  key: index
@@ -12511,7 +12620,7 @@ EventListItem.defaultProps = {
12511
12620
  onClick: () => {}
12512
12621
  };
12513
12622
 
12514
- const MainContainer$6 = styled.div`
12623
+ const MainContainer$5 = styled.div`
12515
12624
  /* display: flex; */
12516
12625
  position: relative;
12517
12626
  font-family: "Poppins", sans-serif;
@@ -12574,7 +12683,7 @@ const EventList = props => {
12574
12683
  };
12575
12684
 
12576
12685
  //= ======================================== MAIN RETURN ====================================
12577
- return /*#__PURE__*/React$1.createElement(MainContainer$6, {
12686
+ return /*#__PURE__*/React$1.createElement(MainContainer$5, {
12578
12687
  id: "MainContainer",
12579
12688
  height: height,
12580
12689
  width: width
@@ -12770,7 +12879,7 @@ const CollapseMenuItemContentContainer = styled.div`
12770
12879
  font-size: 12px;
12771
12880
  }
12772
12881
  `;
12773
- const MainContainer$5 = styled.div`
12882
+ const MainContainer$4 = styled.div`
12774
12883
  width: ${props => props.width};
12775
12884
  height: ${props => props.height};
12776
12885
  display: flex;
@@ -12785,7 +12894,7 @@ const DraftTag$1 = styled.div`
12785
12894
  height: fit-content;
12786
12895
  `;
12787
12896
 
12788
- const MainContainer$4 = styled.div`
12897
+ const MainContainer$3 = styled.div`
12789
12898
  width: ${props => props.width};
12790
12899
  height: ${props => props.height};
12791
12900
  font-family: 'Poppins', sans-serif;
@@ -12902,10 +13011,10 @@ const BannerEventBox = props => {
12902
13011
  const onInfoClickHandler = event => {
12903
13012
  onInfoClick(event);
12904
13013
  };
12905
- return /*#__PURE__*/React$1.createElement(MainContainer$4, {
13014
+ return /*#__PURE__*/React$1.createElement(MainContainer$3, {
12906
13015
  height: height,
12907
13016
  width: width
12908
- }, /*#__PURE__*/React$1.createElement(TitleWrapper, null, formatedBanners().icon, "|", /*#__PURE__*/React$1.createElement(CardTitle, null, formatedBanners().name)), /*#__PURE__*/React$1.createElement(Block, null, /*#__PURE__*/React$1.createElement(Headline, null, "Event Description"), /*#__PURE__*/React$1.createElement(Text, null, description)), /*#__PURE__*/React$1.createElement(Block, null, /*#__PURE__*/React$1.createElement(Headline, null, "Event Dates:"), /*#__PURE__*/React$1.createElement(Text, null, dates.join(" - "))), /*#__PURE__*/React$1.createElement(ButtonWrap, null, /*#__PURE__*/React$1.createElement(Button$1, {
13017
+ }, /*#__PURE__*/React$1.createElement(TitleWrapper, null, formatedBanners().icon, "|", /*#__PURE__*/React$1.createElement(CardTitle, null, formatedBanners().name)), /*#__PURE__*/React$1.createElement(Block, null, /*#__PURE__*/React$1.createElement(Headline, null, "Event Description"), /*#__PURE__*/React$1.createElement(Text, null, description)), /*#__PURE__*/React$1.createElement(Block, null, /*#__PURE__*/React$1.createElement(Headline, null, "Event Dates:"), /*#__PURE__*/React$1.createElement(Text, null, dates.join(" - "))), /*#__PURE__*/React$1.createElement(ButtonWrap, null, /*#__PURE__*/React$1.createElement(Button, {
12909
13018
  leftIcon: "Eye",
12910
13019
  onClick: () => onInfoClickHandler(banner),
12911
13020
  text: buttonText,
@@ -12980,7 +13089,7 @@ const BannerEventBoxList = props => {
12980
13089
  color: toggleColor
12981
13090
  }))), IsItemOpen && /*#__PURE__*/React$1.createElement(CollapseMenuItemContentContainer, {
12982
13091
  id: "CollapseMenuItemContentContainer"
12983
- }, cardsContent ? /*#__PURE__*/React$1.createElement(MainContainer$5, {
13092
+ }, cardsContent ? /*#__PURE__*/React$1.createElement(MainContainer$4, {
12984
13093
  width: width,
12985
13094
  height: height
12986
13095
  }, data.map(item => /*#__PURE__*/React$1.createElement(BannerEventBox, {
@@ -13014,7 +13123,7 @@ const scrollableStyles$8 = `
13014
13123
  border-radius: 5px;
13015
13124
  }
13016
13125
  `;
13017
- const ModalWrapper$1 = styled.dialog`
13126
+ const ModalWrapper = styled.dialog`
13018
13127
  width: 100vw;
13019
13128
  height: 100vh;
13020
13129
  padding: 20px;
@@ -13030,23 +13139,23 @@ const ModalWrapper$1 = styled.dialog`
13030
13139
  align-content: center;
13031
13140
  }
13032
13141
  `;
13033
- const Modal$1 = styled.div`
13142
+ const Modal = styled.div`
13034
13143
  width: 79%;
13035
13144
  max-width: 1500px;
13036
13145
  margin: 0 auto;
13037
13146
  ${scrollableStyles$8}
13038
13147
  `;
13039
- const ModalHeader$1 = styled.div`
13148
+ const ModalHeader = styled.div`
13040
13149
  display: flex;
13041
13150
  align-items: center;
13042
13151
  justify-content: space-between;
13043
13152
  margin-bottom: 32px;
13044
13153
  `;
13045
- const ModalBody$1 = styled.div`
13154
+ const ModalBody = styled.div`
13046
13155
  ${scrollableStyles$8}
13047
13156
  max-height: 80vh;
13048
13157
  `;
13049
- const ModalTitle$1 = styled.h5`
13158
+ const ModalTitle = styled.h5`
13050
13159
  font-family: 'Poppins', sans-serif;
13051
13160
  font-size: 32px;
13052
13161
  font-weight: 500;
@@ -13076,14 +13185,14 @@ const DialogOverlay = props => {
13076
13185
  modal.close();
13077
13186
  onDialogClose();
13078
13187
  };
13079
- return /*#__PURE__*/React.createElement(ModalWrapper$1, {
13188
+ return /*#__PURE__*/React.createElement(ModalWrapper, {
13080
13189
  className: className
13081
- }, /*#__PURE__*/React.createElement(Modal$1, null, /*#__PURE__*/React.createElement(ModalHeader$1, null, /*#__PURE__*/React.createElement(ModalTitle$1, null, title), /*#__PURE__*/React.createElement(ModalClose, {
13190
+ }, /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, title), /*#__PURE__*/React.createElement(ModalClose, {
13082
13191
  type: "button",
13083
13192
  onClick: closeModal
13084
13193
  }, /*#__PURE__*/React.createElement(CloseXIcon, {
13085
13194
  fill: "white"
13086
- }))), /*#__PURE__*/React.createElement(ModalBody$1, {
13195
+ }))), /*#__PURE__*/React.createElement(ModalBody, {
13087
13196
  id: "modalBody"
13088
13197
  }, children)));
13089
13198
  };
@@ -23298,7 +23407,7 @@ const TheGiantCompanyIcon = _ref => {
23298
23407
  })));
23299
23408
  };
23300
23409
 
23301
- const MainContainer$3 = styled.div`
23410
+ const MainContainer$2 = styled.div`
23302
23411
  display: flex;
23303
23412
  position: relative;
23304
23413
  font-family: "Poppins", sans-serif;
@@ -23591,7 +23700,7 @@ const CollapseHeader = props => {
23591
23700
  } = viewCreativeContainerRef.current;
23592
23701
  return (offsetTop + 33).toString().concat("", "px");
23593
23702
  };
23594
- return /*#__PURE__*/React$1.createElement(MainContainer$3, {
23703
+ return /*#__PURE__*/React$1.createElement(MainContainer$2, {
23595
23704
  id: "CollapseHeader",
23596
23705
  className: className,
23597
23706
  height: height,
@@ -23605,7 +23714,7 @@ const CollapseHeader = props => {
23605
23714
  id: "EventNameViewCreativeSubContainer"
23606
23715
  }, /*#__PURE__*/React$1.createElement(ViewCreativeButtonAndListBoxContainer, {
23607
23716
  id: "ViewCreativeButtonAndListBoxContainer"
23608
- }, showViewCreativeButton && /*#__PURE__*/React$1.createElement(Button$1, {
23717
+ }, showViewCreativeButton && /*#__PURE__*/React$1.createElement(Button, {
23609
23718
  leftIcon: "Eye",
23610
23719
  onClick: viewCreativeOnClickHandler,
23611
23720
  text: buttonText,
@@ -23759,13 +23868,13 @@ const QuickFilterInput = styled.div`
23759
23868
  font-size: 14px;
23760
23869
  border-radius: 8px;
23761
23870
  `;
23762
- const Label$3 = styled.label`
23871
+ const Label$2 = styled.label`
23763
23872
  font-size: 14px;
23764
23873
  font-weight: 500;
23765
23874
  color: ${props => props.disabled ? '#D0D0D0' : '212121'};
23766
23875
  white-space: nowrap;
23767
23876
  `;
23768
- const InputContainer$3 = styled.div`
23877
+ const InputContainer$1 = styled.div`
23769
23878
  display: flex;
23770
23879
  justify-content: space-between;
23771
23880
  align-content: center;
@@ -23795,12 +23904,12 @@ const InputContainer$3 = styled.div`
23795
23904
  ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
23796
23905
  }
23797
23906
  `;
23798
- const InputSubContainer$2 = styled.div`
23907
+ const InputSubContainer$1 = styled.div`
23799
23908
  display: flex;
23800
23909
  color: ${props => props.disabled ? '#888' : '#212121'};
23801
23910
  gap: 8px;
23802
23911
  `;
23803
- const StyledInput$3 = styled.input`
23912
+ const StyledInput$1 = styled.input`
23804
23913
  width: 100%;
23805
23914
  height: 20px;
23806
23915
  font-family: "Poppins";
@@ -23814,7 +23923,7 @@ const StyledInput$3 = styled.input`
23814
23923
  color: ${props => props.disabled ? '#D0D0D0' : '#b1b1b1'};
23815
23924
  }
23816
23925
  `;
23817
- const OptionsContainer$2 = styled.div`
23926
+ const OptionsContainer$1 = styled.div`
23818
23927
  margin: 0;
23819
23928
  top: 100%;
23820
23929
  left: 0;
@@ -23855,7 +23964,7 @@ const OptionItem$1 = styled.li`
23855
23964
  color: #229e38;
23856
23965
  }
23857
23966
  `;
23858
- const ErrorMessage$2 = styled.div`
23967
+ const ErrorMessage$1 = styled.div`
23859
23968
  font-size: 12px;
23860
23969
  color: red;
23861
23970
  margin-top: 5px;
@@ -23993,21 +24102,21 @@ const QuickFilterDropdownSingle = _ref => {
23993
24102
  width: width,
23994
24103
  onMouseEnter: () => setHoverInputContainer(true),
23995
24104
  onMouseLeave: () => setHoverInputContainer(false)
23996
- }, /*#__PURE__*/React$1.createElement(InputContainer$3, {
24105
+ }, /*#__PURE__*/React$1.createElement(InputContainer$1, {
23997
24106
  className: "InputContainer",
23998
24107
  labelColor: labelColor,
23999
24108
  hoverColor: hoverColor,
24000
24109
  disabled: disabled,
24001
24110
  error: error,
24002
24111
  isFocused: isFocused
24003
- }, /*#__PURE__*/React$1.createElement(InputSubContainer$2, {
24112
+ }, /*#__PURE__*/React$1.createElement(InputSubContainer$1, {
24004
24113
  className: "InputSubContainer",
24005
24114
  ref: containerRef,
24006
24115
  labelColor: labelColor,
24007
24116
  disabled: disabled,
24008
24117
  error: error,
24009
24118
  onClick: handleLabelClick
24010
- }, /*#__PURE__*/React$1.createElement(Label$3, {
24119
+ }, /*#__PURE__*/React$1.createElement(Label$2, {
24011
24120
  className: "Label",
24012
24121
  isFocused: isFocused,
24013
24122
  labelColor: labelColor,
@@ -24017,7 +24126,7 @@ const QuickFilterDropdownSingle = _ref => {
24017
24126
  errorMessage: errorMessage,
24018
24127
  onClick: handleLabelClick,
24019
24128
  showLabelOnTop: showLabelOnTop
24020
- }, label), /*#__PURE__*/React$1.createElement(StyledInput$3, {
24129
+ }, label), /*#__PURE__*/React$1.createElement(StyledInput$1, {
24021
24130
  className: "StyledInput",
24022
24131
  ref: inputRef,
24023
24132
  value: selectedOptions && selectedOptions?.length > 0 ? selectedOptions[0].label : inputValue && inputValue?.length > 0 ? inputValue[0].label : "",
@@ -24045,7 +24154,7 @@ const QuickFilterDropdownSingle = _ref => {
24045
24154
  width: "12px",
24046
24155
  height: "12px",
24047
24156
  color: "#B1B1B1"
24048
- }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$2, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$2, {
24157
+ }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$1, {
24049
24158
  className: "OptionsContainer",
24050
24159
  onMouseEnter: () => setHoverOptionsContainer(true),
24051
24160
  onMouseLeave: () => setHoverOptionsContainer(false),
@@ -24114,7 +24223,7 @@ const DropdownWrapper = styled.div`
24114
24223
  font-size: 14px;
24115
24224
  border-radius: 10px;
24116
24225
  `;
24117
- const Label$2 = styled.label`
24226
+ const Label$1 = styled.label`
24118
24227
  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
24119
24228
  font-weight: 400;
24120
24229
  padding-inline-end: 5px;
@@ -24137,7 +24246,7 @@ const Label$2 = styled.label`
24137
24246
  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
24138
24247
  }
24139
24248
  `;
24140
- const InputContainer$2 = styled.div`
24249
+ const InputContainer = styled.div`
24141
24250
  display: flex;
24142
24251
  flex-direction: row;
24143
24252
  flex-wrap: nowrap;
@@ -24168,7 +24277,7 @@ const InputContainer$2 = styled.div`
24168
24277
  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
24169
24278
  }
24170
24279
  `;
24171
- const InputSubContainer$1 = styled.div`
24280
+ const InputSubContainer = styled.div`
24172
24281
  display: flex;
24173
24282
  flex-direction: column;
24174
24283
  flex-wrap: nowrap;
@@ -24187,7 +24296,7 @@ const InputSubContainer$1 = styled.div`
24187
24296
  outline: none;
24188
24297
  color: ${props => props.disabled ? '#888' : '#212121'};
24189
24298
  `;
24190
- const StyledInput$2 = styled.input`
24299
+ const StyledInput = styled.input`
24191
24300
  width: calc(100% - 20px);
24192
24301
  height: 25px;
24193
24302
  font-family: Poppins;
@@ -24198,7 +24307,7 @@ const StyledInput$2 = styled.input`
24198
24307
  color: ${props => props.disabled ? '#888' : '#212121'};
24199
24308
  border: none;
24200
24309
  `;
24201
- const OptionsContainer$1 = styled.div`
24310
+ const OptionsContainer = styled.div`
24202
24311
  margin: 0;
24203
24312
  top: 100%;
24204
24313
  left: 0;
@@ -24241,7 +24350,7 @@ const OptionItem = styled.li`
24241
24350
  background-color: #EDF6FF;
24242
24351
  }
24243
24352
  `;
24244
- const ErrorMessage$1 = styled.div`
24353
+ const ErrorMessage = styled.div`
24245
24354
  font-size: 12px;
24246
24355
  color: red;
24247
24356
  margin-top: 5px;
@@ -24459,20 +24568,20 @@ const QuickFilterDropdownMultiSelection = _ref => {
24459
24568
  width: width,
24460
24569
  onMouseEnter: () => setHoverInputContainer(true),
24461
24570
  onMouseLeave: () => setHoverInputContainer(false)
24462
- }, /*#__PURE__*/React$1.createElement(InputContainer$2, {
24571
+ }, /*#__PURE__*/React$1.createElement(InputContainer, {
24463
24572
  className: "InputContainer",
24464
24573
  labelColor: labelColor,
24465
24574
  disabled: disabled,
24466
24575
  error: error,
24467
24576
  isFocused: isFocused
24468
- }, /*#__PURE__*/React$1.createElement(InputSubContainer$1, {
24577
+ }, /*#__PURE__*/React$1.createElement(InputSubContainer, {
24469
24578
  className: "InputSubContainer",
24470
24579
  ref: containerRef,
24471
24580
  labelColor: labelColor,
24472
24581
  disabled: disabled,
24473
24582
  error: error,
24474
24583
  onClick: handleLabelClick
24475
- }, /*#__PURE__*/React$1.createElement(Label$2, {
24584
+ }, /*#__PURE__*/React$1.createElement(Label$1, {
24476
24585
  className: "Label",
24477
24586
  isFocused: isFocused,
24478
24587
  labelColor: labelColor,
@@ -24482,7 +24591,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
24482
24591
  errorMessage: errorMessage,
24483
24592
  onClick: handleLabelClick,
24484
24593
  showLabelOnTop: showLabelOnTop
24485
- }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput$2, {
24594
+ }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput, {
24486
24595
  className: "StyledInput",
24487
24596
  ref: inputRef,
24488
24597
  value: inputValue,
@@ -24512,7 +24621,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
24512
24621
  width: "12px",
24513
24622
  height: "12px",
24514
24623
  color: "#B1B1B1"
24515
- }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$1, {
24624
+ }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer, {
24516
24625
  className: "OptionsContainer",
24517
24626
  onMouseEnter: () => setHoverOptionsContainer(true),
24518
24627
  onMouseLeave: () => setHoverOptionsContainer(false),
@@ -25122,7 +25231,7 @@ const TitleAndValueContainer$3 = styled.div`
25122
25231
  display: flex;
25123
25232
  flex-direction: column;
25124
25233
  `;
25125
- const Title$j = styled.h4`
25234
+ const Title$i = styled.h4`
25126
25235
  font-weight: 400;
25127
25236
  font-size: 20px;
25128
25237
  margin: 0;
@@ -25185,7 +25294,7 @@ const FormattedValue$3 = props => {
25185
25294
  width: width
25186
25295
  }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer$3, {
25187
25296
  className: "TitleAndValueContainer"
25188
- }, title ? /*#__PURE__*/React$1.createElement(Title$j, {
25297
+ }, title ? /*#__PURE__*/React$1.createElement(Title$i, {
25189
25298
  className: "Title",
25190
25299
  width: width
25191
25300
  }, title) : '', showTopValue && /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$1, {
@@ -25197,7 +25306,7 @@ const FormattedValue$3 = props => {
25197
25306
  className: "CurrencySignOrPercent"
25198
25307
  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '', /*#__PURE__*/React$1.createElement(CurrencySignOrPercent, {
25199
25308
  className: "CurrencySignOrPercent"
25200
- }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$j, {
25309
+ }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$i, {
25201
25310
  className: "Title",
25202
25311
  width: width
25203
25312
  }, subtitle) : '')));
@@ -25267,7 +25376,7 @@ const TooltipTitle$8 = styled.div`
25267
25376
  const TitleAndValueContainer$2 = styled.div`
25268
25377
  padding: 0 1rem;
25269
25378
  `;
25270
- const Title$i = styled.h5`
25379
+ const Title$h = styled.h5`
25271
25380
  font-weight: 500;
25272
25381
  font-size: 18px;
25273
25382
  line-height: 20px;
@@ -25396,7 +25505,7 @@ const TitleAndIconContainer = styled.div`
25396
25505
  display: flex;
25397
25506
  align-items: center;
25398
25507
  `;
25399
- const Title$h = styled.h4`
25508
+ const Title$g = styled.h4`
25400
25509
  font-weight: 400;
25401
25510
  font-size: 14px;
25402
25511
  line-height: 27px;
@@ -25450,7 +25559,7 @@ const PerformanceAnalyticsLegend = props => {
25450
25559
  color: item.iconColor
25451
25560
  }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$3 ? /*#__PURE__*/React$1.createElement(LegendLineIcon, {
25452
25561
  color: item.iconColor
25453
- }) : '', /*#__PURE__*/React$1.createElement(Title$h, {
25562
+ }) : '', /*#__PURE__*/React$1.createElement(Title$g, {
25454
25563
  id: "Title",
25455
25564
  width: width
25456
25565
  }, item.title))))) : '');
@@ -25605,7 +25714,7 @@ const BarChartsByWeeks = props => {
25605
25714
  ref: controlsContainerRef
25606
25715
  }, /*#__PURE__*/React$1.createElement(Controls$a, {
25607
25716
  height: getControlsHeight()
25608
- }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$i, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
25717
+ }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$h, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
25609
25718
  title: headerValueTopTitle,
25610
25719
  subtitle: headerValueBottomTitle,
25611
25720
  showTopValue: showHeaderTopValue,
@@ -25838,7 +25947,7 @@ const TitleAndValueContainer$1 = styled.div`
25838
25947
  flex-direction: column;
25839
25948
  padding: 0 1.25em; /* 20px → 1.25em */
25840
25949
  `;
25841
- const Title$g = styled.h4`
25950
+ const Title$f = styled.h4`
25842
25951
  font-weight: 500;
25843
25952
  font-size: ${props => props.titleFontSize || '1.125em'}; /* Default: 18px → 1.125em */
25844
25953
  margin: 0;
@@ -26041,7 +26150,7 @@ const TotalDoughnutChart = props => {
26041
26150
  width: width
26042
26151
  }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$1, {
26043
26152
  className: "TitleAndValueContainer"
26044
- }, /*#__PURE__*/React$1.createElement(Title$g, {
26153
+ }, /*#__PURE__*/React$1.createElement(Title$f, {
26045
26154
  className: "Title",
26046
26155
  fontSize: titleFontSize
26047
26156
  }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer, {
@@ -26363,7 +26472,7 @@ const TotalValue = styled.div`
26363
26472
  font-size: 20px;
26364
26473
  }
26365
26474
  `;
26366
- const Title$f = styled.h4`
26475
+ const Title$e = styled.h4`
26367
26476
  font-size: 18px;
26368
26477
  font-weight: 400;
26369
26478
  line-height: 1;
@@ -26520,7 +26629,7 @@ const TotalHorizontalCharts = props => {
26520
26629
  }, chartsData?.length > 0 ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React$1.createElement(CardHeader, {
26521
26630
  ref: topHeader,
26522
26631
  className: "CardHeader"
26523
- }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$f, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
26632
+ }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$e, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
26524
26633
  className: "TotalValue"
26525
26634
  }, currencySign && /*#__PURE__*/React$1.createElement(CurrencySign, {
26526
26635
  className: "CurrencySign"
@@ -26667,7 +26776,7 @@ const scrollableStyles$5 = `
26667
26776
  border-radius: 5px;
26668
26777
  }
26669
26778
  `;
26670
- const MainContainer$2 = styled.div`
26779
+ const MainContainer$1 = styled.div`
26671
26780
  display: flex;
26672
26781
  flex-direction: row;
26673
26782
  position: relative;
@@ -26935,7 +27044,7 @@ const MarketShareDescription = props => {
26935
27044
  })) : '')));
26936
27045
  return content;
26937
27046
  };
26938
- return /*#__PURE__*/React$1.createElement(MainContainer$2, {
27047
+ return /*#__PURE__*/React$1.createElement(MainContainer$1, {
26939
27048
  className: "MainContainer",
26940
27049
  height: height,
26941
27050
  width: width
@@ -26993,7 +27102,7 @@ const ItemContainer = styled.div`
26993
27102
  flex-direction: column;
26994
27103
  flex-wrap: wrap;
26995
27104
  `;
26996
- const Title$e = styled.h4`
27105
+ const Title$d = styled.h4`
26997
27106
  font-size: 18px;
26998
27107
  font-weight: 500;
26999
27108
  margin: 0;
@@ -27109,7 +27218,7 @@ const SalesAndROI = props => {
27109
27218
  showBorderShadow: showBorderShadow
27110
27219
  }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer, {
27111
27220
  id: "TitleAndValueContainer"
27112
- }, /*#__PURE__*/React$1.createElement(Title$e, {
27221
+ }, /*#__PURE__*/React$1.createElement(Title$d, {
27113
27222
  id: "Title"
27114
27223
  }, title), showBanner && /*#__PURE__*/React$1.createElement(OutBanner, {
27115
27224
  id: "OutBanner",
@@ -27175,7 +27284,7 @@ const scrollableStyles$4 = `
27175
27284
  border-radius: 5px;
27176
27285
  }
27177
27286
  `;
27178
- const MainContainer$1 = styled.div``;
27287
+ const MainContainer = styled.div``;
27179
27288
  const ModalOverlay = styled.div`
27180
27289
  position: fixed;
27181
27290
  z-index: 100;
@@ -27208,7 +27317,7 @@ const TitleContainer$1 = styled.div`
27208
27317
  margin: 0;
27209
27318
  border-bottom: 1px solid #b1b1b1;
27210
27319
  `;
27211
- const Title$d = styled.p`
27320
+ const Title$c = styled.p`
27212
27321
  font-weight: 400;
27213
27322
  font-size: 24px;
27214
27323
  margin: 0;
@@ -27416,7 +27525,7 @@ const PopupCharts = props => {
27416
27525
  }, item.title)), /*#__PURE__*/React$1.createElement(ChartContentContainer, {
27417
27526
  id: "ChartContentContainer"
27418
27527
  }, displayChart(item)));
27419
- return /*#__PURE__*/React$1.createElement(MainContainer$1, {
27528
+ return /*#__PURE__*/React$1.createElement(MainContainer, {
27420
27529
  id: "MainContainer"
27421
27530
  }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay, {
27422
27531
  id: "ModalOverlay",
@@ -27428,7 +27537,7 @@ const PopupCharts = props => {
27428
27537
  height: height,
27429
27538
  width: width,
27430
27539
  onClick: e => e.stopPropagation()
27431
- }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$d, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
27540
+ }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$c, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
27432
27541
  onClick: e => closePopupCharts(e)
27433
27542
  }, /*#__PURE__*/React$1.createElement(CloseXIcon, null))), /*#__PURE__*/React$1.createElement(ChartsContainer, {
27434
27543
  id: "ChartsContainer",
@@ -27526,7 +27635,7 @@ const TopToggleListMainContainer = styled.div`
27526
27635
  padding: 0 24px;
27527
27636
  width: ${props => props.width};
27528
27637
  `;
27529
- const Title$c = styled.h4`
27638
+ const Title$b = styled.h4`
27530
27639
  font-size: 14px;
27531
27640
  font-weight: 600;
27532
27641
  margin: 20px 0 12px;
@@ -27556,7 +27665,7 @@ const TopToggleList = props => {
27556
27665
  } = props;
27557
27666
  return /*#__PURE__*/React$1.createElement(TopToggleListMainContainer, {
27558
27667
  width: width
27559
- }, /*#__PURE__*/React$1.createElement(Title$c, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
27668
+ }, /*#__PURE__*/React$1.createElement(Title$b, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
27560
27669
  height: height
27561
27670
  }, list.map(item => /*#__PURE__*/React$1.createElement(ListItem, {
27562
27671
  key: item.value
@@ -27618,7 +27727,7 @@ const TitleContainer = styled.div`
27618
27727
  justify-content: flex-start;
27619
27728
  margin: 0 0 10px 0;
27620
27729
  `;
27621
- const Title$b = styled.h3`
27730
+ const Title$a = styled.h3`
27622
27731
  user-select: none;
27623
27732
  text-align: left;
27624
27733
  margin: 0;
@@ -27893,7 +28002,7 @@ const Heatmap = props => {
27893
28002
  className: "HeatmapWrapper"
27894
28003
  }, /*#__PURE__*/React$1.createElement(TitleContainer, {
27895
28004
  className: "TitleContainer"
27896
- }, /*#__PURE__*/React$1.createElement(Title$b, {
28005
+ }, /*#__PURE__*/React$1.createElement(Title$a, {
27897
28006
  className: "Title"
27898
28007
  }, title)), refreshRequired && renderBars(), !refreshRequired && renderBars(), renderLegend()));
27899
28008
  };
@@ -28312,7 +28421,7 @@ const TooltipTitle$7 = styled.div`
28312
28421
  font-size: 14px;
28313
28422
  font-weight: 600;
28314
28423
  `;
28315
- const Title$a = styled.h5`
28424
+ const Title$9 = styled.h5`
28316
28425
  font-weight: 500;
28317
28426
  font-size: 18px;
28318
28427
  line-height: 20px;
@@ -28473,7 +28582,7 @@ const BarChart = props => {
28473
28582
  height: height,
28474
28583
  width: width,
28475
28584
  ref: controlsContainerRef
28476
- }, /*#__PURE__*/React$1.createElement(Controls$7, null, /*#__PURE__*/React$1.createElement(Title$a, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
28585
+ }, /*#__PURE__*/React$1.createElement(Controls$7, null, /*#__PURE__*/React$1.createElement(Title$9, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
28477
28586
  width: "100%",
28478
28587
  height: "100%"
28479
28588
  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -28646,7 +28755,7 @@ const Controls$6 = styled.div`
28646
28755
  flex-direction: column;
28647
28756
  background-color: white;
28648
28757
  `;
28649
- const Title$9 = styled.h5`
28758
+ const Title$8 = styled.h5`
28650
28759
  font-size: 18px;
28651
28760
  font-weight: 400;
28652
28761
  margin: 0 0 30px;
@@ -28912,9 +29021,9 @@ const DoubleBarSingleLine = props => {
28912
29021
  noDataText: noDataText
28913
29022
  }) : /*#__PURE__*/React$1.createElement(Controls$6, {
28914
29023
  className: "Controls"
28915
- }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$9, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
29024
+ }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$8, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
28916
29025
  width: dynamicWidth //{hasScroll ? `${data.length * 178}px` : 'auto'}
28917
- }, /*#__PURE__*/React$1.createElement(LineChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(LineChart, _extends$1({
29026
+ }, /*#__PURE__*/React$1.createElement(LineChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(LineChart, _extends({
28918
29027
  data: transformedData
28919
29028
  }, syncCharts, {
28920
29029
  margin: {
@@ -28953,7 +29062,7 @@ const DoubleBarSingleLine = props => {
28953
29062
  }, /*#__PURE__*/React$1.createElement(LabelList, {
28954
29063
  content: CustomLabelLine,
28955
29064
  position: "top"
28956
- })))))), /*#__PURE__*/React$1.createElement(BarChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(BarChart$1, _extends$1({
29065
+ })))))), /*#__PURE__*/React$1.createElement(BarChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(BarChart$1, _extends({
28957
29066
  data: data,
28958
29067
  barGap: 13,
28959
29068
  barCategoryGap: data.length >= limitViewableItems ? 178 : 50,
@@ -29016,7 +29125,7 @@ const CheckboxGroupContainer = styled.div`
29016
29125
  height: 21px;
29017
29126
  gap: 20px;
29018
29127
  `;
29019
- const Title$8 = styled.h5`
29128
+ const Title$7 = styled.h5`
29020
29129
  font-weight: 500;
29021
29130
  font-size: 18px;
29022
29131
  line-height: 20px;
@@ -29068,7 +29177,7 @@ const Controls$5 = styled.div`
29068
29177
  display: flex;
29069
29178
  align-items: center;
29070
29179
  `;
29071
- const Label$1 = styled.div`
29180
+ const Label = styled.div`
29072
29181
  display: flex;
29073
29182
  padding: 0 10px 0 10px;
29074
29183
  white-space: nowrap;
@@ -29148,7 +29257,7 @@ const CheckBox = props => {
29148
29257
  width: iconSize,
29149
29258
  height: iconSize,
29150
29259
  color: disabled ? colorDisabled : colorUnchecked
29151
- })), /*#__PURE__*/React$1.createElement(Label$1, {
29260
+ })), /*#__PURE__*/React$1.createElement(Label, {
29152
29261
  className: "Label",
29153
29262
  "data-testid": "label"
29154
29263
  }, label)));
@@ -29344,7 +29453,7 @@ const AreaChart = props => {
29344
29453
  height: height
29345
29454
  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$2, {
29346
29455
  "data-testid": "header-container"
29347
- }, /*#__PURE__*/React$1.createElement(Title$8, {
29456
+ }, /*#__PURE__*/React$1.createElement(Title$7, {
29348
29457
  "data-testid": "title"
29349
29458
  }, title), /*#__PURE__*/React$1.createElement(CheckboxGroupContainer, {
29350
29459
  "data-testid": "checkbox-group-container"
@@ -29843,7 +29952,7 @@ const HeaderContainer$1 = styled.div`
29843
29952
  align-items: center;
29844
29953
  padding-bottom: 8px;
29845
29954
  `;
29846
- const Title$7 = styled.h3`
29955
+ const Title$6 = styled.h3`
29847
29956
  font-size: 18px;
29848
29957
  font-weight: 400;
29849
29958
  margin: 0;
@@ -29907,7 +30016,7 @@ const BreakdownPanel = props => {
29907
30016
  height: height
29908
30017
  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$1, {
29909
30018
  "data-testid": "header-container"
29910
- }, /*#__PURE__*/React$1.createElement(Title$7, {
30019
+ }, /*#__PURE__*/React$1.createElement(Title$6, {
29911
30020
  "data-testid": "title"
29912
30021
  }, title)), /*#__PURE__*/React$1.createElement(CategorySalesMainContainer, {
29913
30022
  "data-testid": "category-sales-main-container"
@@ -30072,6 +30181,7 @@ const ZoomControlsContainer = styled.div`
30072
30181
  font-family: "Poppins", sans-serif;
30073
30182
  backdrop-filter: blur(8px);
30074
30183
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
30184
+ flex-direction: column;
30075
30185
  `;
30076
30186
  const ZoomPercentage = styled.span`
30077
30187
  font-size: 18px;
@@ -30118,6 +30228,7 @@ const ZoomResetButton = styled.button`
30118
30228
  background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(245, 245, 245, 0.92));
30119
30229
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
30120
30230
  transition: all 0.2s ease-in-out;
30231
+ margin-left: 80px;
30121
30232
 
30122
30233
  &:hover {
30123
30234
  background: linear-gradient(to right, #f0f0f0, #eaeaea);
@@ -30136,6 +30247,21 @@ const ZoomResetButton = styled.button`
30136
30247
  box-shadow: 0 0 0 3px rgba(100, 150, 250, 0.4);
30137
30248
  }
30138
30249
  `;
30250
+ const ZoomTitle = styled.span`
30251
+ color: var(--Text-secondary, #484A4C);
30252
+ font-feature-settings: 'liga' off;
30253
+ font-family: Poppins;
30254
+ font-size: 14px;
30255
+ font-style: normal;
30256
+ font-weight: 400;
30257
+ line-height: normal;
30258
+ `;
30259
+ const ZoomInnerContainer = styled.div`
30260
+ display: flex;
30261
+ align-items: center;
30262
+ align-self: flex-start;
30263
+ margin-left: 12px;
30264
+ `;
30139
30265
 
30140
30266
  // Enhanced color palette with bubble-like transparency and gradients
30141
30267
  const defaultColorPalette = [
@@ -30903,7 +31029,7 @@ const BubbleChart = _ref => {
30903
31029
  }
30904
31030
  })))), /*#__PURE__*/React$1.createElement(ZoomControlsContainer, {
30905
31031
  "data-testid": "zoom-controls-container"
30906
- }, /*#__PURE__*/React$1.createElement(ZoomPercentage, {
31032
+ }, /*#__PURE__*/React$1.createElement(ZoomTitle, null, "* Press Ctrl + scroll to zoom the chart"), /*#__PURE__*/React$1.createElement(ZoomInnerContainer, null, /*#__PURE__*/React$1.createElement(ZoomPercentage, {
30907
31033
  "data-testid": "zoom-percentage"
30908
31034
  }, zoomLevel, "%"), /*#__PURE__*/React$1.createElement(ZoomButton, {
30909
31035
  onClick: handleZoomOut,
@@ -30916,7 +31042,7 @@ const BubbleChart = _ref => {
30916
31042
  }, "+"), /*#__PURE__*/React$1.createElement(ZoomResetButton, {
30917
31043
  onClick: handleReset,
30918
31044
  "data-testid": "zoom-reset-button"
30919
- }, "Reset"))));
31045
+ }, "Reset")))));
30920
31046
  };
30921
31047
 
30922
31048
  const BatteryChartContainer = styled.div`
@@ -31423,7 +31549,7 @@ const ChartContainer = styled.div`
31423
31549
  width: 100%;
31424
31550
  height: calc(100% - 70px);
31425
31551
  `;
31426
- const Title$6 = styled.h2`
31552
+ const Title$5 = styled.h2`
31427
31553
  color: #212121;
31428
31554
  font-family: "Poppins";
31429
31555
  font-size: 18px;
@@ -31570,6 +31696,12 @@ const BarLine = props => {
31570
31696
  // Calculate the number of visible bars like InnerBar component
31571
31697
  const visibleBarsCount = brushRange.endIndex - brushRange.startIndex + 1;
31572
31698
  const shouldShowLabels = visibleBarsCount <= 8;
31699
+ useEffect(() => {
31700
+ setBrushRange({
31701
+ startIndex: 0,
31702
+ endIndex: Math.min(6, brushAreaBarData.length - 1)
31703
+ });
31704
+ }, [brushAreaBarData]);
31573
31705
  return /*#__PURE__*/React$1.createElement("div", {
31574
31706
  style: {
31575
31707
  width: "100%",
@@ -31681,7 +31813,8 @@ const BarLine = props => {
31681
31813
  startIndex: brushRange.startIndex,
31682
31814
  endIndex: brushRange.endIndex,
31683
31815
  className: "custom-brush",
31684
- onChange: handleBrushChange
31816
+ onChange: handleBrushChange,
31817
+ tickFormatter: value => value + 1
31685
31818
  })))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
31686
31819
  width: "100%",
31687
31820
  height: "40px",
@@ -31788,6 +31921,12 @@ const SingleChart = props => {
31788
31921
  // Calculate the number of visible bars
31789
31922
  const visibleBarsCount = brushRange.endIndex - brushRange.startIndex + 1;
31790
31923
  const shouldShowLabels = visibleBarsCount <= 8;
31924
+ useEffect(() => {
31925
+ setBrushRange({
31926
+ startIndex: 0,
31927
+ endIndex: Math.min(6, barData.length - 1)
31928
+ });
31929
+ }, [barData]);
31791
31930
  return /*#__PURE__*/React$1.createElement("div", {
31792
31931
  style: {
31793
31932
  width: "100%",
@@ -31844,7 +31983,8 @@ const SingleChart = props => {
31844
31983
  startIndex: brushRange.startIndex,
31845
31984
  endIndex: brushRange.endIndex,
31846
31985
  className: "custom-brush",
31847
- onChange: handleBrushChange
31986
+ onChange: handleBrushChange,
31987
+ tickFormatter: value => value + 1
31848
31988
  }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
31849
31989
  width: "100%",
31850
31990
  height: "40px",
@@ -31988,6 +32128,12 @@ const InnerBar = props => {
31988
32128
  // Calculate the number of visible bars
31989
32129
  const visibleBarsCount = brushRange.endIndex - brushRange.startIndex + 1;
31990
32130
  const shouldShowLabels = visibleBarsCount <= 8;
32131
+ useEffect(() => {
32132
+ setBrushRange({
32133
+ startIndex: 0,
32134
+ endIndex: Math.min(6, brushInnerBarData.length - 1)
32135
+ });
32136
+ }, [brushInnerBarData]);
31991
32137
  return /*#__PURE__*/React$1.createElement("div", {
31992
32138
  style: {
31993
32139
  width: "100%",
@@ -32031,7 +32177,8 @@ const InnerBar = props => {
32031
32177
  startIndex: brushRange.startIndex,
32032
32178
  endIndex: brushRange.endIndex,
32033
32179
  className: "custom-brush",
32034
- onChange: handleBrushChange
32180
+ onChange: handleBrushChange,
32181
+ tickFormatter: value => value + 1
32035
32182
  }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
32036
32183
  width: "100%",
32037
32184
  height: "40px",
@@ -32069,7 +32216,7 @@ const BrushChart = props => {
32069
32216
  return /*#__PURE__*/React$1.createElement(Container, {
32070
32217
  height: height,
32071
32218
  width: width
32072
- }, /*#__PURE__*/React$1.createElement(Title$6, null, title), /*#__PURE__*/React$1.createElement(SegmentedContainer, {
32219
+ }, /*#__PURE__*/React$1.createElement(Title$5, null, title), /*#__PURE__*/React$1.createElement(SegmentedContainer, {
32073
32220
  gap: "8px",
32074
32221
  options: segmentedbuttonOptions ? segmentedbuttonOptions.map(value => ({
32075
32222
  value
@@ -32133,7 +32280,7 @@ const Controls$3 = styled.div`
32133
32280
  padding: 12px 32px;
32134
32281
  }
32135
32282
  `;
32136
- const Title$5 = styled.span`
32283
+ const Title$4 = styled.span`
32137
32284
  color: #212121;
32138
32285
  display: inline-block;
32139
32286
  font-size: 18px;
@@ -32394,7 +32541,7 @@ const SingleBarLineCharts = _ref => {
32394
32541
  height: height
32395
32542
  }, data?.length > 0 ? /*#__PURE__*/React$1.createElement(Controls$3, {
32396
32543
  className: "Controls"
32397
- }, title !== '' && /*#__PURE__*/React$1.createElement(Title$5, null, title), totalsData.length > 0 && /*#__PURE__*/React$1.createElement(LinnerDataBoxWrap, {
32544
+ }, title !== '' && /*#__PURE__*/React$1.createElement(Title$4, null, title), totalsData.length > 0 && /*#__PURE__*/React$1.createElement(LinnerDataBoxWrap, {
32398
32545
  width: "40%",
32399
32546
  height: "60px",
32400
32547
  data: totalsData
@@ -32686,7 +32833,7 @@ const TooltipTitle$2 = styled.div`
32686
32833
  font-size: 14px;
32687
32834
  font-weight: 600;
32688
32835
  `;
32689
- const Title$4 = styled.h5`
32836
+ const Title$3 = styled.h5`
32690
32837
  font-weight: 500;
32691
32838
  font-size: 18px;
32692
32839
  line-height: 20px;
@@ -32862,7 +33009,7 @@ const BarChartWithAreaChart = props => {
32862
33009
  ref: controlsContainerRef
32863
33010
  }, /*#__PURE__*/React$1.createElement(Controls$2, {
32864
33011
  className: "Controls"
32865
- }, /*#__PURE__*/React$1.createElement(Title$4, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
33012
+ }, /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
32866
33013
  height: barChartHeight
32867
33014
  }, /*#__PURE__*/React$1.createElement(ComposedChart, {
32868
33015
  data: barChartData
@@ -32935,7 +33082,7 @@ const Controls$1 = styled.div`
32935
33082
  padding: 12px 32px;
32936
33083
  }
32937
33084
  `;
32938
- const Title$3 = styled.span`
33085
+ const Title$2 = styled.span`
32939
33086
  color: #212121;
32940
33087
  display: inline-block;
32941
33088
  font-size: 18px;
@@ -33090,7 +33237,7 @@ const BarChartTwoRows = props => {
33090
33237
  ref: controlsContainerRef
33091
33238
  }, /*#__PURE__*/React$1.createElement(Controls$1, {
33092
33239
  className: "Controls"
33093
- }, title !== '' && /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
33240
+ }, title !== '' && /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
33094
33241
  height: barChartHeight
33095
33242
  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
33096
33243
  width: width,
@@ -33169,7 +33316,7 @@ const TooltipTitle = styled.div`
33169
33316
  font-size: 14px;
33170
33317
  font-weight: 600;
33171
33318
  `;
33172
- const Title$2 = styled.h5`
33319
+ const Title$1 = styled.h5`
33173
33320
  font-weight: 500;
33174
33321
  font-size: 18px;
33175
33322
  line-height: 20px;
@@ -33292,7 +33439,7 @@ const TwoBarCharts = props => {
33292
33439
  height: height,
33293
33440
  width: width,
33294
33441
  ref: controlsContainerRef
33295
- }, /*#__PURE__*/React$1.createElement(Controls, null, /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
33442
+ }, /*#__PURE__*/React$1.createElement(Controls, null, /*#__PURE__*/React$1.createElement(Title$1, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
33296
33443
  width: "100%",
33297
33444
  height: "100%"
33298
33445
  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -33472,7 +33619,7 @@ const TitleDiv = styled.div`
33472
33619
  font-size: 10px;
33473
33620
  }
33474
33621
  `;
33475
- const TableWrapper$2 = styled.div`
33622
+ const TableWrapper = styled.div`
33476
33623
  overflow-x: auto;
33477
33624
  margin-bottom: 22px;
33478
33625
  &::-webkit-scrollbar {
@@ -33489,7 +33636,7 @@ const TableWrapper$2 = styled.div`
33489
33636
  border-radius: 5px;
33490
33637
  }
33491
33638
  `;
33492
- const Table$2 = styled.table`
33639
+ const Table = styled.table`
33493
33640
  width: 100%;
33494
33641
  border-collapse: collapse;
33495
33642
  overflow: auto;
@@ -33719,7 +33866,7 @@ const CollapseData = props => {
33719
33866
  }) : /*#__PURE__*/React$1.createElement(ArrowDownIcon, {
33720
33867
  width: "11px",
33721
33868
  height: "12px"
33722
- })), /*#__PURE__*/React$1.createElement(TitleDiv, null, `${parseFloat(section.value.toFixed(1))}${section.valueType}`))), activeIndex === section.key && /*#__PURE__*/React$1.createElement(TableWrapper$2, null, /*#__PURE__*/React$1.createElement(Table$2, null, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/React$1.createElement(Th, {
33869
+ })), /*#__PURE__*/React$1.createElement(TitleDiv, null, `${parseFloat(section.value.toFixed(1))}${section.valueType}`))), activeIndex === section.key && /*#__PURE__*/React$1.createElement(TableWrapper, null, /*#__PURE__*/React$1.createElement(Table, null, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/React$1.createElement(Th, {
33723
33870
  key: `${i + headline}`
33724
33871
  }, headline.title)))), /*#__PURE__*/React$1.createElement("tbody", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((data, i) => {
33725
33872
  if (data.value !== null) {
@@ -33787,7 +33934,7 @@ const ModalContent = styled.div`
33787
33934
  padding: 1rem 0 3rem;
33788
33935
  }
33789
33936
  `;
33790
- const Header$1 = styled.div`
33937
+ const Header = styled.div`
33791
33938
  position: relative;
33792
33939
  display: flex;
33793
33940
  justify-content: space-between;
@@ -33819,7 +33966,7 @@ const CloseButton = styled.button`
33819
33966
  align-self: flex-end;
33820
33967
  }
33821
33968
  `;
33822
- const Title$1 = styled.h2`
33969
+ const Title = styled.h2`
33823
33970
  position: absolute;
33824
33971
  display: flex;
33825
33972
  align-items: center;
@@ -33997,7 +34144,7 @@ const InsightsCarousel = _ref => {
33997
34144
  const nextIndex = (currentIndex + 1) % totalChildren;
33998
34145
  return /*#__PURE__*/React$1.createElement(Overlay, {
33999
34146
  className: className
34000
- }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header$1, null, /*#__PURE__*/React$1.createElement(Title$1, {
34147
+ }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header, null, /*#__PURE__*/React$1.createElement(Title, {
34001
34148
  $titleColor: titleColor
34002
34149
  }, /*#__PURE__*/React$1.cloneElement(icon, {
34003
34150
  fill: iconColor
@@ -34295,1563 +34442,5 @@ DownloadProgress.defaultProps = {
34295
34442
  className: 'DownloadProgressMainContainer'
34296
34443
  };
34297
34444
 
34298
- const ModalWrapper = styled.div`
34299
- font-family: "Poppins", sans-serif;
34300
- position: fixed;
34301
- top: 0;
34302
- left: 0;
34303
- width: 100%;
34304
- height: 100%;
34305
- background-color: rgba(0, 0, 0, 0.5);
34306
- display: flex;
34307
- justify-content: center;
34308
- align-items: center;
34309
- `;
34310
- const Modal = styled.div`
34311
- display: flex;
34312
- gap: 30px;
34313
- padding: 20px;
34314
- flex-direction: column;
34315
- background-color: white;
34316
- border-radius: 12px;
34317
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
34318
- `;
34319
- const ModalHeader = styled.div`
34320
- display: flex;
34321
- justify-content: space-between;
34322
- `;
34323
- const ModalButtons = styled.div`
34324
- display: flex;
34325
- gap: 10px;
34326
- `;
34327
- const ModalTitle = styled.h3`
34328
- margin: 0;
34329
- font-size: 24px;
34330
- `;
34331
- const ModalBody = styled.div`
34332
- flex-grow: 1;
34333
- `;
34334
- styled.div`
34335
- display: flex;
34336
- justify-content: flex-end;
34337
- padding: 20px;
34338
- border-top: 1px solid #ddd;
34339
- `;
34340
-
34341
- const ModalWithOverlay = props => {
34342
- const {
34343
- title = '',
34344
- children = null,
34345
- onOk = () => {},
34346
- onCancel = () => {},
34347
- cancelButtonText = 'Cancel',
34348
- cancelButtonLeftIcon = '',
34349
- cancelButtonRightIcon = '',
34350
- cancelButtonType = 'secondary',
34351
- okButtonText = 'OK',
34352
- okButtonLeftIcon = '',
34353
- okButtonRightIcon = '',
34354
- okButtonType = 'primary',
34355
- width = '400px',
34356
- height = 'auto',
34357
- overlayTransparent = false,
34358
- overlayOpacity = 0.797,
34359
- showCancelButton = true,
34360
- // Added this prop
34361
- showOkButton = true // Added this prop
34362
- } = props;
34363
- const overlayStyle = {
34364
- backgroundColor: overlayTransparent ? "transparent" : `rgba(0, 0, 0, ${overlayOpacity || 0.797})`
34365
- };
34366
- return /*#__PURE__*/React$1.createElement(ModalWrapper, {
34367
- className: "modal-wrapper",
34368
- style: overlayStyle
34369
- }, /*#__PURE__*/React$1.createElement(Modal, {
34370
- style: {
34371
- width,
34372
- height
34373
- }
34374
- }, /*#__PURE__*/React$1.createElement(ModalHeader, {
34375
- className: "modal-header"
34376
- }, /*#__PURE__*/React$1.createElement(ModalTitle, null, title), /*#__PURE__*/React$1.createElement(ModalButtons, {
34377
- className: "modal-buttons"
34378
- }, showCancelButton && /*#__PURE__*/React$1.createElement(Button$1, {
34379
- type: cancelButtonType,
34380
- leftIcon: cancelButtonLeftIcon,
34381
- rightIcon: cancelButtonRightIcon,
34382
- text: cancelButtonText,
34383
- onClick: onCancel
34384
- }), showOkButton && /*#__PURE__*/React$1.createElement(Button$1, {
34385
- type: okButtonType,
34386
- leftIcon: okButtonLeftIcon,
34387
- rightIcon: okButtonRightIcon,
34388
- text: okButtonText,
34389
- onClick: onOk
34390
- }))), /*#__PURE__*/React$1.createElement(ModalBody, {
34391
- className: "modal-body"
34392
- }, children)));
34393
- };
34394
-
34395
- /* ──────────────────────────────────────────
34396
- COLORS – map to your design-system tokens
34397
- Change only here if the palette shifts
34398
- ─────────────────────────────────────────── */
34399
- const c = {
34400
- surface: "#ffffff",
34401
- text: "#212121",
34402
- textSecondary: "#8d9299",
34403
- primary: "#016672",
34404
- // apply / highlight
34405
- primaryLight: "#d1e7ea",
34406
- border: "#e0e0e0"
34407
- };
34408
-
34409
- /* ───────────────────────── wrapper */
34410
- const CalendarWrapper = styled.div`
34411
- width: 240px;
34412
- padding: 16px 16px 12px;
34413
- background: ${c.surface};
34414
- border-radius: 8px;
34415
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
34416
- user-select: none;
34417
- `;
34418
-
34419
- /* ───────────────────────── header */
34420
- const Header = styled.h4`
34421
- margin: 0 0 12px;
34422
- color: ${c.text};
34423
-
34424
- /* Content/P3 Regular */
34425
- font-family: Poppins;
34426
- font-size: 12px;
34427
- font-style: normal;
34428
- font-weight: 400;
34429
- line-height: normal;
34430
- `;
34431
-
34432
- /* ───────────────────────── grid */
34433
- const Grid = styled.div`
34434
- display: grid;
34435
- grid-template-columns: repeat(${({
34436
- columns
34437
- }) => columns}, 1fr);
34438
- gap: 6px 0px;
34439
- margin-bottom: 16px;
34440
- `;
34441
-
34442
- /* individual week cell */
34443
- const WeekCell = styled.div`
34444
- padding: 6px 0;
34445
- font-size: 13px;
34446
- padding-top: 10px;
34447
- padding-bottom: 10px;
34448
- text-align: center;
34449
- cursor: pointer;
34450
- color: ${c.textSecondary};
34451
- transition: background 0.15s ease;
34452
- border-radius: 4px;
34453
-
34454
- ${({
34455
- $selected
34456
- }) => $selected && css`
34457
-
34458
- background: ${c.primary};
34459
- color: #FFFFFF;
34460
- `}
34461
-
34462
- /* highlight range interior lighter */
34463
- ${({
34464
- $isRangeMiddle
34465
- }) => $isRangeMiddle && css`
34466
- background: ${c.primaryLight};
34467
- border-radius: 0px;
34468
- color: ${c.text};
34469
- `}
34470
-
34471
- &:hover {
34472
- background: ${c.primaryLight};
34473
- color: ${c.text};
34474
- }
34475
- text-align: center;
34476
- font-feature-settings: "liga" off;
34477
-
34478
- /* Content/P3 Regular */
34479
- font-family: Poppins;
34480
- font-size: 12px;
34481
- font-style: normal;
34482
- font-weight: 400;
34483
- line-height: normal;
34484
- `;
34485
-
34486
- /* ───────────────────────── footer buttons */
34487
- const Footer = styled.div`
34488
- display: flex;
34489
- justify-content: space-between;
34490
- gap: 8px;
34491
- `;
34492
- css`
34493
- flex: 1 1 0;
34494
- height: 32px;
34495
- font-weight: 600;
34496
- font-size: 12px;
34497
- line-height: 32px;
34498
- text-align: center;
34499
- border-radius: 6px;
34500
- border: 1px solid transparent;
34501
- cursor: pointer;
34502
- transition:
34503
- opacity 0.15s ease,
34504
- background 0.15s ease;
34505
- &:disabled {
34506
- opacity: 0.4;
34507
- cursor: default;
34508
- }
34509
- `;
34510
-
34511
- /**
34512
- * WeeksCalendar
34513
- * -------------
34514
- * Props
34515
- * • year – four-digit year (required)
34516
- * • defaultStartWeek – number | null
34517
- * • defaultEndWeek – number | null
34518
- * • onApply(start,end) – callback, both numbers (inclusive)
34519
- * • onCancel() – callback
34520
- */
34521
- const WeeksCalendar = ({
34522
- year,
34523
- defaultStartWeek = null,
34524
- defaultEndWeek = null,
34525
- onApply,
34526
- onCancel
34527
- }) => {
34528
- // state -------------------------------------------------
34529
- const [startWeek, setStartWeek] = useState(defaultStartWeek);
34530
- const [endWeek, setEndWeek] = useState(defaultEndWeek);
34531
-
34532
- // derived helpers --------------------------------------
34533
- const hasSelection = startWeek !== null;
34534
- const isRange = hasSelection && endWeek !== null && endWeek !== startWeek;
34535
- const weeks = useMemo(() => [...Array(53)].map((_, i) => i + 1), []);
34536
- const handleCellClick = week => {
34537
- // first click → start
34538
-
34539
- if (!hasSelection) {
34540
- setStartWeek(week);
34541
- setEndWeek(null);
34542
- return;
34543
- }
34544
- // second click → decide range or single
34545
- if (hasSelection && endWeek === null) {
34546
- // second click on same cell turns it to single selection
34547
- if (week === startWeek) {
34548
- setEndWeek(null);
34549
- return;
34550
- }
34551
- // ensure ascending order
34552
- setEndWeek(week < startWeek ? startWeek : week);
34553
- setStartWeek(week < startWeek ? week : startWeek);
34554
- return;
34555
- }
34556
- // any later click resets selection and starts over
34557
- setStartWeek(week);
34558
- setEndWeek(null);
34559
- };
34560
- const clearAll = () => {
34561
- setStartWeek(null);
34562
- setEndWeek(null);
34563
- };
34564
-
34565
- // render ------------------------------------------------
34566
- const title = !hasSelection ? "Select Weeks" : !isRange ? `Week ${startWeek}, ${year}` : `Weeks ${startWeek}-${endWeek}, ${year}`;
34567
- return /*#__PURE__*/React$1.createElement(CalendarWrapper, null, /*#__PURE__*/React$1.createElement(Header, null, title), /*#__PURE__*/React$1.createElement(Grid, {
34568
- columns: 6
34569
- }, weeks.map(wk => {
34570
- const selected = wk === startWeek || isRange && wk >= startWeek && wk <= endWeek;
34571
- return /*#__PURE__*/React$1.createElement(WeekCell, {
34572
- key: wk,
34573
- "data-week": wk,
34574
- $selected: selected,
34575
- $isRangeMiddle: selected && wk !== startWeek && wk !== endWeek,
34576
- onClick: () => handleCellClick(wk)
34577
- }, wk);
34578
- })), /*#__PURE__*/React$1.createElement(Footer, null, /*#__PURE__*/React$1.createElement(Button$1, {
34579
- type: "secondary",
34580
- disabled: !hasSelection,
34581
- onClick: clearAll,
34582
- text: "CLEAR"
34583
- }), /*#__PURE__*/React$1.createElement(Button$1, {
34584
- type: "primary",
34585
- disabled: !hasSelection,
34586
- onClick: () => {
34587
- if (hasSelection) onApply(startWeek, endWeek ?? startWeek);
34588
- },
34589
- text: "APPLY"
34590
- }), onCancel && /*#__PURE__*/React$1.createElement("button", {
34591
- style: {
34592
- display: "none"
34593
- },
34594
- type: "button",
34595
- onClick: onCancel
34596
- })));
34597
- };
34598
- WeeksCalendar.propTypes = {
34599
- year: PropTypes.number.isRequired,
34600
- defaultStartWeek: PropTypes.number,
34601
- defaultEndWeek: PropTypes.number,
34602
- onApply: PropTypes.func.isRequired,
34603
- onCancel: PropTypes.func
34604
- };
34605
-
34606
- /* src/components/WeeksPicker/WeeksPicker.style.js */
34607
- const WeeksPickerContainer = styled.div`
34608
- position: relative;
34609
- margin-bottom: 10px;
34610
- width: ${props => props.width || '100%'};
34611
- height: ${props => props.height || '60px'};
34612
- `;
34613
- const StyledInput$1 = styled.input`
34614
- padding: 20px;
34615
- font-size: 14px;
34616
- border-radius: ${props => props.borderRadius || '4px'};
34617
- border: none;
34618
- outline: none;
34619
- width: ${props => props.width || '90%'};
34620
- height: ${props => props.height || '60px'};
34621
- transition: border-color 0.3s ease;
34622
- font-size: 14px;
34623
- font-weight: 400;
34624
- box-sizing: border-box;
34625
- color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
34626
- cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
34627
- `;
34628
- const StyledLabel = styled.label`
34629
- font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
34630
- width: ${props => props.isFocused || props.hasValue ? 'auto' : '150px'};
34631
- color: ${props => props.disabled ? '#888' : (props.isFocused || props.hasValue ? props.borderColorFocus : '#757575') || '#333'};
34632
- position: absolute;
34633
- top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
34634
- left: 15px;
34635
- background-color: ${props => props.isFocused || props.hasValue ? 'white' : 'transparent'};
34636
- transform: translateY(-50%);
34637
- transition: top 0.3s ease, font-size 0.3s ease;
34638
- display: flex;
34639
- font-weight: 400;
34640
- align-items: center;
34641
- box-sizing: border-box;
34642
- cursor: pointer;
34643
- `;
34644
- const RequiredIndicator = styled.span`
34645
- color: red;
34646
- margin-left: 5px;
34647
- `;
34648
- styled.div`
34649
- font-size: 12px;
34650
- color: red;
34651
- margin-top: 5px;
34652
- `;
34653
- const OptionsContainer = styled.div`
34654
- position: relative;
34655
- z-index: 999;
34656
- `;
34657
- const InputContainer$1 = styled.div`
34658
- display: flex;
34659
- flex-wrap: nowrap;
34660
- justify-content: flex-start;
34661
- align-content: center;
34662
- white-space: pre-wrap;
34663
- align-items: center;
34664
- overflow: hidden;
34665
- width: 100%;
34666
- height: 100%;
34667
- box-sizing: border-box;
34668
- background-color: transparent;
34669
- border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
34670
- font-family: "Poppins", sans-serif;
34671
- font-weight: 400;
34672
- font-size: 14px;
34673
- border-radius: 12px;
34674
- outline: none;
34675
- color: ${props => props.disabled ? '#888' : '#212121'};
34676
-
34677
- &:hover {
34678
- border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'};
34679
- cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
34680
- }
34681
-
34682
- &:focus {
34683
- border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'};
34684
- }
34685
- `;
34686
- const CalendarDiv = styled.div`
34687
- position: absolute;
34688
- top: 16px;
34689
- right: 10px;
34690
- `;
34691
-
34692
- // src/components/WeeksPicker/WeeksPicker.jsx
34693
- const WeeksPicker = _ref => {
34694
- let {
34695
- label,
34696
- disabled,
34697
- borderColor,
34698
- borderColorFocus,
34699
- textColor,
34700
- required,
34701
- placeholder,
34702
- borderRadius,
34703
- year,
34704
- width,
34705
- height,
34706
- onChange,
34707
- selectedValue
34708
- } = _ref;
34709
- const [value, setValue] = useState("");
34710
- const inputRef = useRef(null);
34711
- const [isFocused, setIsFocused] = useState(false);
34712
- const [isOpen, setIsOpen] = useState(false);
34713
- const handleToggle = () => {
34714
- setIsOpen(!isOpen);
34715
- };
34716
- const onChangeEvent = e => {
34717
- onChange(e.target.value);
34718
- setValue(e.target.value);
34719
- };
34720
- useEffect(() => {
34721
- if (selectedValue) {
34722
- setValue(selectedValue);
34723
- }
34724
- }, [selectedValue]);
34725
- const handleApply = () => {
34726
- setIsOpen(false);
34727
- };
34728
- const handleCancel = () => {
34729
- setIsOpen(false);
34730
- };
34731
- const handleFocus = () => {
34732
- setIsFocused(true);
34733
- };
34734
- const handleBlur = () => {
34735
- setIsFocused(false);
34736
- };
34737
- return /*#__PURE__*/React$1.createElement(WeeksPickerContainer, {
34738
- width: width,
34739
- height: height
34740
- }, /*#__PURE__*/React$1.createElement(InputContainer$1, {
34741
- onClick: handleToggle,
34742
- className: "InputContainer",
34743
- isFocused: isFocused,
34744
- hasValue: value,
34745
- disabled: disabled,
34746
- textColor: textColor,
34747
- borderColor: borderColor,
34748
- borderColorFocus: borderColorFocus
34749
- }, /*#__PURE__*/React$1.createElement(StyledLabel, {
34750
- className: "StyledLabel",
34751
- onClick: handleFocus,
34752
- isFocused: isFocused,
34753
- hasValue: value,
34754
- disabled: disabled,
34755
- textColor: textColor,
34756
- borderColor: borderColor,
34757
- borderColorFocus: borderColorFocus
34758
- }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$1, {
34759
- className: "StyledInput",
34760
- ref: inputRef,
34761
- value: value,
34762
- onChange: onChangeEvent,
34763
- onFocus: handleFocus,
34764
- onBlur: handleBlur,
34765
- isFocused: isFocused,
34766
- borderColorFocus: borderColorFocus,
34767
- borderRadius: borderRadius,
34768
- width: width,
34769
- height: height,
34770
- placeholder: isFocused ? placeholder : "",
34771
- disabled: disabled,
34772
- borderColor: borderColor,
34773
- textColor: textColor
34774
- }), /*#__PURE__*/React$1.createElement(CalendarDiv, {
34775
- onClick: handleToggle
34776
- }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), isOpen && /*#__PURE__*/React$1.createElement(OptionsContainer, null, /*#__PURE__*/React$1.createElement(WeeksCalendar, {
34777
- year: year,
34778
- onApply: (start, end) => {
34779
- handleApply();
34780
- const tempValue = end === start ? `Week ${start},${year}` : `Weeks ${start} - ${end},${year}`;
34781
- onChange(tempValue);
34782
- setValue(tempValue);
34783
- setIsOpen(!isOpen);
34784
- // close your modal here if needed …
34785
- },
34786
- onCancel: () => handleCancel()
34787
- })));
34788
- };
34789
- WeeksPicker.propTypes = {
34790
- label: PropTypes.string.isRequired,
34791
- year: PropTypes.number.isRequired,
34792
- onChange: PropTypes.func.isRequired,
34793
- defaultValues: PropTypes.arrayOf(PropTypes.number),
34794
- saveStartWeekID: PropTypes.func.isRequired,
34795
- saveEndWeekID: PropTypes.func.isRequired
34796
- };
34797
-
34798
- var DefaultContext = {
34799
- color: undefined,
34800
- size: undefined,
34801
- className: undefined,
34802
- style: undefined,
34803
- attr: undefined
34804
- };
34805
- var IconContext = React$1.createContext && /*#__PURE__*/React$1.createContext(DefaultContext);
34806
-
34807
- var _excluded = ["attr", "size", "title"];
34808
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
34809
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
34810
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
34811
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
34812
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
34813
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
34814
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
34815
- function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
34816
- function Tree2Element(tree) {
34817
- return tree && tree.map((node, i) => /*#__PURE__*/React$1.createElement(node.tag, _objectSpread({
34818
- key: i
34819
- }, node.attr), Tree2Element(node.child)));
34820
- }
34821
- function GenIcon(data) {
34822
- return props => /*#__PURE__*/React$1.createElement(IconBase, _extends({
34823
- attr: _objectSpread({}, data.attr)
34824
- }, props), Tree2Element(data.child));
34825
- }
34826
- function IconBase(props) {
34827
- var elem = conf => {
34828
- var {
34829
- attr,
34830
- size,
34831
- title
34832
- } = props,
34833
- svgProps = _objectWithoutProperties(props, _excluded);
34834
- var computedSize = size || conf.size || "1em";
34835
- var className;
34836
- if (conf.className) className = conf.className;
34837
- if (props.className) className = (className ? className + " " : "") + props.className;
34838
- return /*#__PURE__*/React$1.createElement("svg", _extends({
34839
- stroke: "currentColor",
34840
- fill: "currentColor",
34841
- strokeWidth: "0"
34842
- }, conf.attr, attr, svgProps, {
34843
- className: className,
34844
- style: _objectSpread(_objectSpread({
34845
- color: props.color || conf.color
34846
- }, conf.style), props.style),
34847
- height: computedSize,
34848
- width: computedSize,
34849
- xmlns: "http://www.w3.org/2000/svg"
34850
- }), title && /*#__PURE__*/React$1.createElement("title", null, title), props.children);
34851
- };
34852
- return IconContext !== undefined ? /*#__PURE__*/React$1.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
34853
- }
34854
-
34855
- // THIS FILE IS AUTO GENERATED
34856
- function FaEyeSlash (props) {
34857
- return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 640 512"},"child":[{"tag":"path","attr":{"d":"M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"},"child":[]}]})(props);
34858
- }
34859
-
34860
- const IconWrapper$1 = styled.div`
34861
- display: flex;
34862
- align-items: center;
34863
- justify-content: center;
34864
- align-content: center;
34865
- padding: 2px;
34866
- cursor: ${props => props.disabled ? 'not-allowed' : props.pointer || 'default'};
34867
- `;
34868
-
34869
- // eslint-disable-next-line import/prefer-default-export
34870
- const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBackOnClick) => {
34871
- const newIconHeight = iconHeight || '12px';
34872
- const newIconWidth = iconWidth || '12px';
34873
- const newColor = disabled ? '#D0D0D0' : color || '#212121';
34874
- switch (icon.toLowerCase()) {
34875
- case 'filter':
34876
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34877
- className: "FilterIcon",
34878
- pointer: pointer,
34879
- disabled: disabled,
34880
- onClick: callBackOnClick
34881
- }, /*#__PURE__*/React$1.createElement(FilterIcon, {
34882
- height: newIconHeight,
34883
- width: newIconWidth,
34884
- color: newColor,
34885
- onClick: callBackOnClick
34886
- }));
34887
- case 'options':
34888
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34889
- className: "OptionsIcon",
34890
- pointer: pointer,
34891
- disabled: disabled,
34892
- onClick: callBackOnClick
34893
- }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
34894
- height: newIconHeight,
34895
- width: newIconWidth,
34896
- color: newColor,
34897
- onClick: callBackOnClick
34898
- }));
34899
- case 'download':
34900
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34901
- className: "DownloadIcon",
34902
- pointer: pointer,
34903
- disabled: disabled,
34904
- onClick: callBackOnClick
34905
- }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
34906
- height: newIconHeight,
34907
- width: newIconWidth,
34908
- color: newColor,
34909
- onClick: callBackOnClick
34910
- }));
34911
- case 'document':
34912
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34913
- className: "DocumentIcon",
34914
- pointer: pointer,
34915
- disabled: disabled,
34916
- onClick: callBackOnClick
34917
- }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
34918
- height: newIconHeight,
34919
- width: newIconWidth,
34920
- color: newColor,
34921
- onClick: callBackOnClick
34922
- }));
34923
- case 'fly':
34924
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34925
- className: "FlyIcon",
34926
- pointer: pointer,
34927
- disabled: disabled,
34928
- onClick: callBackOnClick
34929
- }, /*#__PURE__*/React$1.createElement(FlyIcon, {
34930
- height: newIconHeight,
34931
- width: newIconWidth,
34932
- color: newColor,
34933
- onClick: callBackOnClick
34934
- }));
34935
- case 'bell':
34936
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34937
- className: "BellIcon",
34938
- pointer: pointer,
34939
- disabled: disabled,
34940
- onClick: callBackOnClick
34941
- }, /*#__PURE__*/React$1.createElement(BellIcon, {
34942
- height: newIconHeight,
34943
- width: newIconWidth,
34944
- color: newColor,
34945
- onClick: callBackOnClick
34946
- }));
34947
- case 'maintenance':
34948
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34949
- className: "MaintenanceIcon",
34950
- pointer: pointer,
34951
- disabled: disabled,
34952
- onClick: callBackOnClick
34953
- }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
34954
- height: newIconHeight,
34955
- width: newIconWidth,
34956
- color: newColor,
34957
- onClick: callBackOnClick
34958
- }));
34959
- case 'exit':
34960
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34961
- className: "ExitIcon",
34962
- pointer: pointer,
34963
- disabled: disabled,
34964
- onClick: callBackOnClick
34965
- }, /*#__PURE__*/React$1.createElement(ExitIcon, {
34966
- height: newIconHeight,
34967
- width: newIconWidth,
34968
- color: newColor,
34969
- onClick: callBackOnClick
34970
- }));
34971
- case 'eye':
34972
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34973
- className: "EyeIcon",
34974
- pointer: pointer,
34975
- disabled: disabled,
34976
- onClick: callBackOnClick
34977
- }, /*#__PURE__*/React$1.createElement(EyeIcon, {
34978
- height: newIconHeight,
34979
- width: newIconWidth,
34980
- color: newColor,
34981
- onClick: callBackOnClick
34982
- }));
34983
- case 'search':
34984
- return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
34985
- className: "SearchIcon",
34986
- pointer: pointer,
34987
- disabled: disabled,
34988
- onClick: callBackOnClick
34989
- }, /*#__PURE__*/React$1.createElement(SearchIcon, {
34990
- height: newIconHeight,
34991
- width: newIconWidth,
34992
- color: newColor,
34993
- onClick: callBackOnClick
34994
- }));
34995
- default:
34996
- return '';
34997
- }
34998
- };
34999
-
35000
- /* eslint-disable no-nested-ternary */
35001
- const MainContainer = styled.div`
35002
- position: relative;
35003
- display: flex;
35004
- flex-direction: column;
35005
- align-content: center;
35006
- justify-content: center;
35007
- align-items: flex-start;
35008
- width: ${props => props.width || '300px'};
35009
- font-family: "Poppins", sans-serif;
35010
- font-weight: 400;
35011
- font-size: 14px;
35012
- border-radius: ${props => props.size === 'small' ? '8px' : '12px'};
35013
- padding: 0;
35014
- cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
35015
- `;
35016
- const Label = styled.label`
35017
-
35018
- font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
35019
- font-weight: 400;
35020
- padding-inline-end: 5px;
35021
- padding-inline-start: 5px;
35022
- margin-right: 10px;
35023
- z-index: 2;
35024
- color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
35025
- background-color: white;
35026
- position: absolute;
35027
- top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
35028
- left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
35029
- font-family: Poppins;
35030
- transform: translateY(-50%);
35031
- transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
35032
- display: flex;
35033
- align-items: center;
35034
- box-sizing: border-box;
35035
- max-height: 16px;
35036
- gap: 4px;
35037
- &:hover {
35038
- cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
35039
- }
35040
- `;
35041
- const InputContainer = styled.div`
35042
-
35043
- display: flex;
35044
- flex-direction: row;
35045
- flex-wrap: nowrap;
35046
- justify-content: flex-start;
35047
- align-content: center;
35048
- white-space: pre-wrap;
35049
- align-items: center;
35050
- overflow: hidden;
35051
- padding: 0 16px;
35052
- gap: 14px;
35053
- width: 100%;
35054
- height: 100%;
35055
- box-sizing: border-box;
35056
- background-color: #fff;
35057
- border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
35058
- font-family: "Poppins", sans-serif;
35059
- font-weight: 400;
35060
- font-size: 14px;
35061
- border-radius: ${props => props.size === 'small' ? '8px' : '12px'};
35062
- outline: none;
35063
- color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
35064
-
35065
- &:hover {
35066
- border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
35067
- }
35068
-
35069
- &:focus {
35070
- border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
35071
- }
35072
-
35073
- `;
35074
- const InputSubContainer = styled.div`
35075
-
35076
- display: flex;
35077
- flex-direction: column;
35078
- flex-wrap: nowrap;
35079
- align-content: center;
35080
- align-items: flex-start;
35081
- justify-content: center;
35082
- white-space: pre-wrap;
35083
- overflow: hidden;
35084
- padding: 5px 0;
35085
- width: 100%;
35086
- height: 100%;
35087
- min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
35088
- box-sizing: border-box;
35089
- background-color: #fff;
35090
- border-radius: ${props => props.size === 'small' ? '8px' : '12px'};
35091
- outline: none;
35092
- color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
35093
- cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
35094
- `;
35095
- const StyledInput = styled.input`
35096
- width: calc(100% - 10px);
35097
- height: 20px;
35098
- font-weight: 400;
35099
- font-size: 14px;
35100
- outline: none;
35101
- color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
35102
- background-color: #fff;
35103
- border: none;
35104
- cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
35105
- `;
35106
- const ErrorMessage = styled.div`
35107
- font-size: 12px;
35108
- color: red;
35109
- margin-top: 5px;
35110
- max-width: ${props => props.width || '300px'};
35111
- `;
35112
- const IconWrapper = styled.div`
35113
- display: flex;
35114
- align-items: center;
35115
- justify-content: center;
35116
- align-content: center;
35117
- padding: 2px;
35118
- &:hover{
35119
- cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
35120
- }
35121
- `;
35122
-
35123
- /* eslint-disable import/no-extraneous-dependencies */
35124
- const Input = _ref => {
35125
- let {
35126
- label,
35127
- labelEmptyValue,
35128
- size,
35129
- selectedValue,
35130
- placeHolder,
35131
- onChange,
35132
- onBlur,
35133
- required,
35134
- disabled,
35135
- width,
35136
- error,
35137
- errorMessage,
35138
- labelColor,
35139
- leftIcon,
35140
- rightIcon,
35141
- password,
35142
- leftIconOnClick,
35143
- rightIconOnClick
35144
- } = _ref;
35145
- const [isFocused, setIsFocused] = useState(false);
35146
- const [inputValue, setInputValue] = useState('');
35147
- const [showPassword, setShowPassword] = useState(false);
35148
- const inputRef = useRef(null);
35149
- const containerRef = useRef(null);
35150
- useEffect(() => {
35151
- setInputValue(selectedValue);
35152
- }, [selectedValue]);
35153
- const handleLabelClick = () => {
35154
- if (disabled) return;
35155
- setIsFocused(true);
35156
- if (inputRef?.current) {
35157
- inputRef?.current?.focus();
35158
- }
35159
- };
35160
- const handleInputChange = e => {
35161
- setIsFocused(true);
35162
- setInputValue(e.target.value);
35163
- if (inputRef?.current) {
35164
- inputRef?.current?.focus();
35165
- }
35166
- onChange({
35167
- newValue: e.target.value || ''
35168
- });
35169
- };
35170
- const handleFocus = () => {
35171
- setIsFocused(true);
35172
- if (inputRef?.current) {
35173
- inputRef?.current?.focus();
35174
- }
35175
- };
35176
- const handleBlur = () => {
35177
- onBlur();
35178
- setIsFocused(false);
35179
- };
35180
- const leftIconOnClickHandler = () => {
35181
- if (disabled) return;
35182
- leftIconOnClick({
35183
- leftIconOnClick: leftIcon
35184
- });
35185
- };
35186
- const rightIconOnClickHandler = () => {
35187
- if (disabled) return;
35188
- rightIconOnClick({
35189
- rightIconOnClick: rightIcon
35190
- });
35191
- };
35192
- const getLeftIcon = () => {
35193
- if (!leftIcon || leftIcon === 'none') return '';
35194
- return getIcon(leftIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', leftIconOnClickHandler);
35195
- };
35196
- const getRightIcon = () => {
35197
- if (!rightIcon || rightIcon === 'none') return '';
35198
- return getIcon(rightIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', rightIconOnClickHandler);
35199
- };
35200
- const toggleShowPassword = () => {
35201
- setShowPassword(!showPassword);
35202
- };
35203
- const getPasswordIcon = () => {
35204
- if (!password) return '';
35205
- if (showPassword) {
35206
- return /*#__PURE__*/React$1.createElement(IconWrapper, {
35207
- className: "passwordEyeSlash",
35208
- disabled: disabled,
35209
- onClick: toggleShowPassword
35210
- }, /*#__PURE__*/React$1.createElement(FaEyeSlash, {
35211
- onClick: toggleShowPassword,
35212
- color: error ? 'red' : labelColor
35213
- }));
35214
- }
35215
- return getIcon('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
35216
- };
35217
- return /*#__PURE__*/React$1.createElement(MainContainer, {
35218
- className: "MainContainer",
35219
- width: width,
35220
- size: size,
35221
- disabled: disabled
35222
- }, /*#__PURE__*/React$1.createElement(InputContainer, {
35223
- className: "InputContainer",
35224
- labelColor: labelColor,
35225
- disabled: disabled,
35226
- error: error,
35227
- isFocused: isFocused,
35228
- size: size
35229
- }, getLeftIcon(), /*#__PURE__*/React$1.createElement(InputSubContainer, {
35230
- className: "InputSubContainer",
35231
- ref: containerRef,
35232
- labelColor: labelColor,
35233
- disabled: disabled,
35234
- error: error,
35235
- onClick: handleLabelClick,
35236
- size: size
35237
- }, /*#__PURE__*/React$1.createElement(Label, {
35238
- className: "Label",
35239
- isFocused: isFocused,
35240
- labelColor: labelColor,
35241
- hasValue: inputValue,
35242
- leftIcon: leftIcon,
35243
- disabled: disabled,
35244
- error: error,
35245
- errorMessage: errorMessage,
35246
- onClick: handleLabelClick,
35247
- size: size
35248
- }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/React$1.createElement("span", {
35249
- style: {
35250
- color: disabled ? '#D0D0D0' : 'red',
35251
- height: '16px'
35252
- }
35253
- }, "*")), /*#__PURE__*/React$1.createElement(StyledInput, {
35254
- className: "StyledInput",
35255
- ref: inputRef,
35256
- type: password && !showPassword ? 'password' : 'text',
35257
- value: inputValue,
35258
- onChange: handleInputChange,
35259
- onClick: handleLabelClick,
35260
- onFocus: handleFocus,
35261
- onBlur: handleBlur,
35262
- disabled: disabled,
35263
- placeholder: isFocused ? placeHolder : '',
35264
- error: error,
35265
- isFocused: isFocused
35266
- })), password ? getPasswordIcon() : getRightIcon()), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, {
35267
- className: "ErrorMessage",
35268
- width: width
35269
- }, errorMessage));
35270
- };
35271
- Input.propTypes = {
35272
- placeHolder: PropTypes.string,
35273
- label: PropTypes.string,
35274
- labelEmptyValue: PropTypes.string,
35275
- size: PropTypes.string,
35276
- labelColor: PropTypes.string,
35277
- required: PropTypes.bool,
35278
- width: PropTypes.string,
35279
- disabled: PropTypes.bool,
35280
- error: PropTypes.bool,
35281
- errorMessage: PropTypes.string,
35282
- selectedValue: PropTypes.string,
35283
- onChange: PropTypes.func.isRequired,
35284
- leftIconOnClick: PropTypes.func,
35285
- rightIconOnClick: PropTypes.func,
35286
- onBlur: PropTypes.func,
35287
- leftIcon: PropTypes.string,
35288
- rightIcon: PropTypes.string,
35289
- password: PropTypes.bool
35290
- };
35291
- Input.defaultProps = {
35292
- placeHolder: 'Type...',
35293
- label: '',
35294
- labelEmptyValue: '',
35295
- size: 'medium',
35296
- labelColor: '#066768',
35297
- required: true,
35298
- width: '300px',
35299
- disabled: false,
35300
- error: false,
35301
- errorMessage: '',
35302
- selectedValue: '',
35303
- leftIcon: 'none',
35304
- rightIcon: 'none',
35305
- leftIconOnClick: () => {},
35306
- rightIconOnClick: () => {},
35307
- onBlur: () => {},
35308
- password: false
35309
- };
35310
-
35311
- const ToggleSwitchLabel = styled.label`
35312
- display: inline-block;
35313
- position: relative;
35314
- cursor: pointer;
35315
- user-select: none;
35316
- opacity: ${({
35317
- disabled
35318
- }) => disabled ? 0.5 : 1};
35319
- `;
35320
- const ToggleInput = styled.input`
35321
- display: none;
35322
- `;
35323
- const ToggleSlider = styled.span`
35324
- display: block;
35325
- position: relative;
35326
- background: ${({
35327
- checked,
35328
- disabled
35329
- }) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
35330
- border-radius: 999px;
35331
- transition: background 0.2s;
35332
- ${({
35333
- size
35334
- }) => {
35335
- switch (size) {
35336
- case "s":
35337
- return css`width: 40px; height: 20px;`;
35338
- case "l":
35339
- return css`width: 72px; height: 36px;`;
35340
- default:
35341
- return css`width: 56px; height: 28px;`;
35342
- }
35343
- }}
35344
- &:before {
35345
- content: "";
35346
- position: absolute;
35347
- left: 3px;
35348
- top: 50%;
35349
- transform: translateY(-50%);
35350
- background: #fff;
35351
- border-radius: 50%;
35352
- transition: left 0.2s, width 0.2s, height 0.2s;
35353
- ${({
35354
- size
35355
- }) => {
35356
- switch (size) {
35357
- case "s":
35358
- return css`width: 14px; height: 14px;`;
35359
- case "l":
35360
- return css`width: 28px; height: 28px;`;
35361
- default:
35362
- return css`width: 20px; height: 20px;`;
35363
- }
35364
- }}
35365
- left: ${({
35366
- checked,
35367
- size
35368
- }) => {
35369
- if (!checked) return "3px";
35370
- switch (size) {
35371
- case "s":
35372
- return "calc(100% - 17px)";
35373
- case "l":
35374
- return "calc(100% - 31px)";
35375
- default:
35376
- return "calc(100% - 23px)";
35377
- }
35378
- }};
35379
- }
35380
- `;
35381
-
35382
- /**
35383
- * ToggleSwitch component for on/off states.
35384
- * Supports small/large sizes and disabled state.
35385
- */
35386
- function ToggleSwitch(_ref) {
35387
- let {
35388
- checked,
35389
- onChange,
35390
- size = "m",
35391
- disabled = false,
35392
- ...props
35393
- } = _ref;
35394
- return /*#__PURE__*/React$1.createElement(ToggleSwitchLabel, {
35395
- size: size,
35396
- disabled: disabled
35397
- }, /*#__PURE__*/React$1.createElement(ToggleInput, _extends$1({
35398
- type: "checkbox",
35399
- checked: checked,
35400
- onChange: e => onChange?.(e.target.checked),
35401
- disabled: disabled
35402
- }, props)), /*#__PURE__*/React$1.createElement(ToggleSlider, {
35403
- checked: checked,
35404
- size: size,
35405
- disabled: disabled
35406
- }));
35407
- }
35408
- ToggleSwitch.propTypes = {
35409
- checked: PropTypes.bool.isRequired,
35410
- onChange: PropTypes.func,
35411
- size: PropTypes.oneOf(["s", "m", "l"]),
35412
- disabled: PropTypes.bool
35413
- };
35414
-
35415
- const TableWrapper$1 = styled.div`
35416
- width: ${props => props.width};
35417
- height: ${props => props.height};
35418
- padding: 20px;
35419
- background-color: #fff;
35420
- box-sizing: border-box;
35421
- position: relative;
35422
- `;
35423
- const Table$1 = styled.table`
35424
- width: 100%;
35425
- margin-top: 24px;
35426
- border-spacing: unset;
35427
- `;
35428
- const Thead = styled.thead``;
35429
- const HeaderCell = styled.th`
35430
- font-weight: 600;
35431
- width: ${props => props.width};
35432
- padding-right: 8px;
35433
- padding-bottom: 12px;
35434
- `;
35435
- const Tbody = styled.tbody``;
35436
- const BodyCell = styled.td`
35437
- font-weight: 600;
35438
- width: ${props => props.width};
35439
- padding-right: 8px;
35440
- padding-bottom: 12px;
35441
- `;
35442
- const StyledRow = styled.tr`
35443
- border-bottom: 1px solid #C8C8C8;
35444
- `;
35445
-
35446
- const ContainerTable = props => {
35447
- const {
35448
- width = '100%',
35449
- height = '300px',
35450
- columnsWidths = [430, 105, 210, 175, 148, 185, 104, 104, 140, 50, 50],
35451
- standardCellSkeletonHeight = 22,
35452
- isLoading = true,
35453
- children
35454
- } = props;
35455
- const TableWrapperRef = useRef(null);
35456
- const [numberOfRows, setNumberOfRows] = useState(3);
35457
- const calculateRows = () => {
35458
- if (TableWrapperRef.current) {
35459
- const wrapperHeight = TableWrapperRef.current.offsetHeight;
35460
-
35461
- // Calculate available space for rows
35462
- const titleHeight = 32; // First skeleton height
35463
- const subtitleHeight = 22; // Second skeleton height
35464
- const titleMargin = 24; // Margin top for subtitle
35465
- const headerRowHeight = standardCellSkeletonHeight + 22; // Approximate height of header row (22px skeleton + padding)
35466
- const bodyRowHeight = standardCellSkeletonHeight + 22; // Approximate height of body row (22px skeleton + padding)
35467
- const tablePadding = 20; // Approximate padding/margins for the table
35468
-
35469
- const usedHeight = titleHeight + subtitleHeight + titleMargin + headerRowHeight + tablePadding;
35470
- const availableHeight = wrapperHeight - usedHeight;
35471
-
35472
- // Calculate how many rows can fit
35473
- const maxRows = Math.floor(availableHeight / bodyRowHeight);
35474
-
35475
- // Set minimum of 3 rows, maximum based on available space
35476
- setNumberOfRows(Math.max(3, maxRows));
35477
- }
35478
- };
35479
- useEffect(() => {
35480
- calculateRows();
35481
- }, [height]);
35482
- return /*#__PURE__*/React$1.createElement(TableWrapper$1, {
35483
- ref: TableWrapperRef,
35484
- width: width,
35485
- height: height
35486
- }, isLoading ? /*#__PURE__*/React$1.createElement(SkeletonTheme, {
35487
- baseColor: "#EAEAEA",
35488
- highlightColor: "#F5F5F5"
35489
- }, /*#__PURE__*/React$1.createElement(Skeleton, {
35490
- width: 260,
35491
- height: 32
35492
- }), /*#__PURE__*/React$1.createElement(Skeleton, {
35493
- width: 260,
35494
- height: 22,
35495
- style: {
35496
- marginTop: 24
35497
- }
35498
- }), /*#__PURE__*/React$1.createElement(Table$1, null, /*#__PURE__*/React$1.createElement(Thead, null, /*#__PURE__*/React$1.createElement(StyledRow, null, columnsWidths.map((width, index) => /*#__PURE__*/React$1.createElement(HeaderCell, {
35499
- key: `header-cell-${index}`,
35500
- width: `${width}px`
35501
- }, /*#__PURE__*/React$1.createElement(Skeleton, {
35502
- width: '100%',
35503
- height: standardCellSkeletonHeight
35504
- }))))), /*#__PURE__*/React$1.createElement(Tbody, null, Array.from({
35505
- length: numberOfRows
35506
- }).map((_, rowIndex) => /*#__PURE__*/React$1.createElement(StyledRow, {
35507
- key: `row-${rowIndex}`
35508
- }, columnsWidths.map((width, colIndex) => /*#__PURE__*/React$1.createElement(BodyCell, {
35509
- key: `cell-${rowIndex}-${colIndex}`,
35510
- width: `${width}px`
35511
- }, /*#__PURE__*/React$1.createElement(Skeleton, {
35512
- width: '100%',
35513
- height: standardCellSkeletonHeight
35514
- })))))))) : children);
35515
- };
35516
-
35517
- const MenuRouteContainer = styled.div`
35518
- font-family: 'Poppins', sans-serif;
35519
- `;
35520
- const ButtonGroup = styled.div`
35521
- display: flex;
35522
- justify-content: ${props => {
35523
- switch (props.pos) {
35524
- case 'left':
35525
- return 'flex-start';
35526
- case 'center':
35527
- return 'center';
35528
- case 'right':
35529
- return 'flex-end';
35530
- default:
35531
- return 'center';
35532
- }
35533
- }};
35534
- `;
35535
- const Button = styled.button`
35536
- background-color: transparent;
35537
- border: none;
35538
- display: flex;
35539
- gap: 12px;
35540
- align-items: center;
35541
- color: #212121;
35542
- padding: 0 24px 10px;
35543
- font-size: 16px;
35544
- font-weight: 600;
35545
- &.active {
35546
- color: ${props => props.color || '#066768'};
35547
- border-bottom: 3px solid ${props => props.color || '#066768'};
35548
- }
35549
- &:disabled {
35550
- color: #717171;
35551
- cursor: not-allowed;
35552
- }
35553
- `;
35554
-
35555
- const Build = _ref => {
35556
- let {
35557
- width = '24',
35558
- height = '24',
35559
- fill = "#212121"
35560
- } = _ref;
35561
- return /*#__PURE__*/React$1.createElement("svg", {
35562
- width: width,
35563
- height: height,
35564
- viewBox: "0 0 24 24",
35565
- fill: "none",
35566
- xmlns: "http://www.w3.org/2000/svg"
35567
- }, /*#__PURE__*/React$1.createElement("path", {
35568
- d: "M20.7978 14.3728C20.9274 14.2408 21 14.0623 21 13.8758V12.0002C21 11.6122 20.6913 11.2972 20.31 11.2972H18.2399V5.21311L19.4183 4.01058C19.5753 3.85008 19.647 3.62208 19.6106 3.39807L19.1503 0.587512C19.0949 0.248505 18.8068 0 18.4696 0H16.6292C16.2916 0 16.004 0.248505 15.9486 0.587512L15.4882 3.39807C15.4514 3.62158 15.5231 3.84958 15.6806 4.01058L16.8589 5.21311V11.2972H14.7884C14.4071 11.2972 14.0984 11.6122 14.0984 12.0002V13.8753C14.0984 14.0618 14.171 14.2408 14.3006 14.3723L15.0185 15.1038V15.4588L14.3006 16.1903C14.171 16.3223 14.0984 16.5013 14.0984 16.6873V21.8905C14.0984 23.0535 15.0274 24 16.1689 24H18.929C20.0705 24 20.9995 23.0535 20.9995 21.8905V16.6878C20.9995 16.5013 20.9269 16.3228 20.7973 16.1908L20.0793 15.4593V15.1043L20.7978 14.3728ZM17.2137 1.40653H17.8851L18.1909 3.27257L17.5499 3.92658L16.9085 3.27257L17.2137 1.40653ZM19.6195 21.891C19.6195 22.2785 19.3098 22.594 18.9295 22.594H16.1694C15.7891 22.594 15.4794 22.2785 15.4794 21.891V21.1409H19.62L19.6195 21.891ZM19.6195 13.5843L18.9015 14.3158C18.7719 14.4478 18.6993 14.6263 18.6993 14.8128V15.7503C18.6993 15.9363 18.7719 16.1153 18.9015 16.2473L19.6195 16.9789V19.7344H15.4789V16.9789L16.1969 16.2473C16.3264 16.1153 16.3991 15.9363 16.3991 15.7503V14.8128C16.3991 14.6263 16.3264 14.4478 16.1969 14.3158L15.4789 13.5843V12.7038H19.6195V13.5843ZM7.50349 20.3582C6.99555 20.6978 7.15554 21.5158 7.75182 21.6323C8.21559 21.7413 8.67053 21.2783 8.56354 20.8053C8.48011 20.3247 7.89561 20.0777 7.50349 20.3582Z",
35569
- fill: fill
35570
- }), /*#__PURE__*/React$1.createElement("path", {
35571
- d: "M9.44437 0.959887C8.99507 0.803976 8.52368 1.13173 8.52368 1.59994V4.90256L7.83476 5.35485L7.1429 4.90208V1.60043C7.1429 1.13221 6.67101 0.804459 6.22221 0.96037C4.33566 1.61587 3.0413 3.37724 3.00104 5.34326C2.96323 7.1722 4.00716 8.85199 5.64426 9.67402L4.6347 20.5555C4.46333 22.4032 5.94576 24 7.83329 24C9.72082 24 11.2037 22.4032 11.0324 20.5555L10.0233 9.67789C10.7245 9.32793 11.327 8.81579 11.7861 8.17573C12.3621 7.37204 12.6665 6.42692 12.6665 5.44077C12.6665 3.42985 11.3717 1.62939 9.44437 0.959887ZM9.04761 8.61836C8.75643 8.72601 8.57475 9.0108 8.60274 9.31538L9.65649 20.6781C9.75421 21.7337 8.9111 22.6417 7.8328 22.6417C6.75498 22.6417 5.91139 21.7337 6.00959 20.6781L7.06384 9.31297C7.09183 9.00935 6.91113 8.72456 6.62093 8.61643C5.25193 8.10622 4.35187 6.80197 4.38182 5.36981C4.40343 4.31512 4.9303 3.34296 5.76162 2.72608V5.26507C5.76162 5.49193 5.87751 5.70432 6.06999 5.82982L7.45323 6.73488C7.68549 6.88645 7.98747 6.88645 8.21924 6.7344L9.59806 5.82934C9.79005 5.70336 9.90545 5.49193 9.90545 5.26507V2.72511C10.7579 3.35552 11.2862 4.35518 11.2862 5.44029C11.2857 6.84638 10.3862 8.1236 9.04761 8.61836Z",
35572
- fill: fill
35573
- }));
35574
- };
35575
-
35576
- const Track = _ref => {
35577
- let {
35578
- width = '24',
35579
- height = '24',
35580
- fill = "#212121"
35581
- } = _ref;
35582
- return /*#__PURE__*/React$1.createElement("svg", {
35583
- width: width,
35584
- height: height,
35585
- viewBox: "0 0 24 24",
35586
- fill: "none",
35587
- xmlns: "http://www.w3.org/2000/svg"
35588
- }, /*#__PURE__*/React$1.createElement("path", {
35589
- d: "M11.999 19.1706C8.2827 19.1706 5.02706 16.8561 2.95058 14.9152C1.80841 13.8472 1 13.0127 1 11.9967C1 10.9806 1.80741 10.1471 2.94758 9.08017C5.02507 7.13828 8.28271 4.82274 11.999 4.82274C15.7163 4.82274 18.9729 7.13828 21.0494 9.08017C22.1916 10.1482 23 10.9826 23 11.9977C23 13.0117 22.1906 13.8462 21.0474 14.9152C18.9709 16.8561 15.7153 19.1706 11.999 19.1706ZM11.999 6.41694C8.76935 6.41694 5.85246 8.50933 3.97483 10.2654C3.47119 10.7356 2.53487 11.6116 2.53487 11.9967C2.53487 12.3817 3.47319 13.2587 3.97783 13.7299C5.85446 15.485 8.76935 17.5764 11.999 17.5764C15.2286 17.5764 18.1435 15.485 20.0202 13.7299C20.5248 13.2587 21.4651 12.3807 21.4651 11.9977C21.4651 11.6137 20.5268 10.7367 20.0222 10.2655C18.1455 8.50934 15.2297 6.41694 11.999 6.41694Z",
35590
- fill: fill
35591
- }), /*#__PURE__*/React$1.createElement("path", {
35592
- d: "M12.0008 3.55814C11.5297 3.55814 11.1474 3.21439 11.1474 2.7907V1.76744C11.1474 1.34375 11.5297 1 12.0008 1C12.472 1 12.8542 1.34375 12.8542 1.76744V2.7907C12.8542 3.21439 12.472 3.55814 12.0008 3.55814ZM6.31135 5.11001C6.03577 5.11001 5.76463 4.99009 5.60017 4.76826L4.96899 3.91789C4.70786 3.56614 4.81342 3.08949 5.20569 2.85366C5.59906 2.61883 6.12801 2.71476 6.38914 3.06651L7.02032 3.91688C7.28145 4.26863 7.17589 4.74528 6.78362 4.98111C6.63805 5.06805 6.47359 5.11001 6.31135 5.11001ZM17.6869 5.11001C17.5247 5.11001 17.3591 5.06804 17.2136 4.98011C16.8224 4.74528 16.7168 4.26863 16.9791 3.91588L17.6114 3.0655C17.8725 2.71476 18.4015 2.61683 18.7948 2.85466C19.186 3.08949 19.2915 3.56614 19.0293 3.91889L18.397 4.76927C18.2326 4.9901 17.9625 5.11001 17.6869 5.11001ZM12.0008 23C11.5297 23 11.1474 22.6562 11.1474 22.2326V21.2093C11.1474 20.7856 11.5297 20.4419 12.0008 20.4419C12.472 20.4419 12.8542 20.7856 12.8542 21.2093V22.2326C12.8542 22.6562 12.472 23 12.0008 23ZM18.3215 21.2753C18.0459 21.2753 17.7758 21.1553 17.6114 20.9345L16.9791 20.0841C16.7169 19.7314 16.8224 19.2547 17.2136 19.0199C17.6058 18.7821 18.1359 18.88 18.397 19.2307L19.0293 20.0811C19.2916 20.4339 19.186 20.9105 18.7948 21.1453C18.6493 21.2333 18.4837 21.2753 18.3215 21.2753ZM5.67796 21.2753C5.51572 21.2753 5.35126 21.2333 5.20569 21.1463C4.81342 20.9105 4.70786 20.4339 4.96899 20.0821L5.60017 19.2317C5.86131 18.879 6.39026 18.7841 6.78362 19.0189C7.17589 19.2547 7.28145 19.7314 7.02032 20.0831L6.38914 20.9335C6.22468 21.1553 5.95354 21.2753 5.67796 21.2753Z",
35593
- fill: fill
35594
- }), /*#__PURE__*/React$1.createElement("path", {
35595
- d: "M12.1414 14.6391C11.9399 14.6391 11.7472 14.559 11.605 14.4168L10.1185 12.9303L8.63195 14.4168C8.33563 14.7131 7.8556 14.7131 7.55928 14.4168C7.26296 14.1205 7.26296 13.6405 7.55928 13.3441L9.58214 11.3213C9.87846 11.0249 10.3585 11.0249 10.6548 11.3213L12.1414 12.8078L14.4425 10.5441L14.6979 10.2929C14.4826 10.2005 14.3509 10.1836 14.0827 10.1549L13.7044 10.1134C13.2876 10.0679 12.9873 9.69359 13.0327 9.27776C13.0772 8.85995 13.4535 8.54289 13.8684 8.60611L14.1943 8.64167C16.6133 8.90045 16.8839 9.13652 17.4568 11.4498L17.5496 11.8261C17.6494 12.233 17.4005 12.6439 16.9945 12.7447C16.9333 12.7595 16.872 12.7664 16.8118 12.7664C16.471 12.7664 16.1609 12.5353 16.0759 12.1896L15.9959 11.8646C15.9265 11.5838 15.9328 11.5337 15.8065 11.3213L15.5764 11.5489L12.6777 14.4168C12.5355 14.559 12.3429 14.6391 12.1414 14.6391Z",
35596
- fill: fill
35597
- }));
35598
- };
35599
-
35600
- const Execute = _ref => {
35601
- let {
35602
- width = '24',
35603
- height = '24',
35604
- fill = "#212121"
35605
- } = _ref;
35606
- return /*#__PURE__*/React$1.createElement("svg", {
35607
- width: width,
35608
- height: height,
35609
- viewBox: "0 0 24 24",
35610
- fill: "none",
35611
- xmlns: "http://www.w3.org/2000/svg"
35612
- }, /*#__PURE__*/React$1.createElement("path", {
35613
- d: "M1.7579 23C1.61208 23 1.46954 22.9567 1.3483 22.8755C1.22706 22.7944 1.13257 22.6792 1.07677 22.5443C1.02097 22.4094 1.00637 22.261 1.03481 22.1179C1.06325 21.9747 1.13346 21.8432 1.23655 21.74L4.08812 18.8863C4.2272 18.7518 4.41347 18.6774 4.60682 18.6791C4.80016 18.6808 4.98512 18.7584 5.12184 18.8953C5.25856 19.0321 5.33611 19.2173 5.33779 19.4108C5.33947 19.6043 5.26515 19.7908 5.13082 19.93L2.27925 22.7837C2.21089 22.8524 2.12963 22.9069 2.04016 22.944C1.95068 22.9811 1.85476 23.0001 1.7579 23ZM5.14999 23C5.00417 23 4.86163 22.9567 4.74039 22.8755C4.61915 22.7944 4.52466 22.6792 4.46886 22.5443C4.41306 22.4094 4.39846 22.261 4.4269 22.1179C4.45534 21.9747 4.52555 21.8432 4.62864 21.74L6.05406 20.3131C6.12208 20.2426 6.20345 20.1864 6.29342 20.1477C6.38339 20.109 6.48015 20.0887 6.57806 20.0878C6.67598 20.0869 6.77308 20.1056 6.8637 20.1427C6.95433 20.1799 7.03666 20.2347 7.1059 20.304C7.17514 20.3733 7.22989 20.4557 7.26697 20.5464C7.30405 20.6371 7.3227 20.7343 7.32185 20.8323C7.321 20.9303 7.30066 21.0272 7.26201 21.1173C7.22337 21.2073 7.16719 21.2888 7.09676 21.3569L5.67134 22.7837C5.60298 22.8524 5.52172 22.9069 5.43225 22.944C5.34277 22.9811 5.24685 23.0001 5.14999 23ZM1.73652 19.5823C1.59085 19.5822 1.44849 19.5388 1.32741 19.4577C1.20633 19.3767 1.11195 19.2615 1.05618 19.1268C1.00041 18.9921 0.98575 18.8439 1.01404 18.7008C1.04234 18.5578 1.11232 18.4263 1.21517 18.3231L2.64058 16.8962C2.70861 16.8257 2.78998 16.7695 2.87994 16.7308C2.96991 16.6921 3.06667 16.6717 3.16459 16.6709C3.2625 16.67 3.3596 16.6887 3.45023 16.7258C3.54085 16.7629 3.62319 16.8178 3.69242 16.8871C3.76166 16.9564 3.81642 17.0388 3.85349 17.1295C3.89057 17.2202 3.90923 17.3174 3.90838 17.4154C3.90753 17.5134 3.88718 17.6103 3.84854 17.7004C3.80989 17.7904 3.75371 17.8719 3.68328 17.94L2.25787 19.3661C2.18948 19.4347 2.10822 19.4892 2.01875 19.5263C1.92928 19.5634 1.83337 19.5824 1.73652 19.5823Z",
35614
- fill: fill
35615
- }), /*#__PURE__*/React$1.createElement("path", {
35616
- "fill-rule": "evenodd",
35617
- "clip-rule": "evenodd",
35618
- d: "M10.4266 5.23524C14.8319 0.824773 21.9759 0.994548 22.2834 1.00267C22.471 1.00859 22.6492 1.08587 22.7819 1.21877C22.9145 1.35167 22.9915 1.53018 22.9972 1.71794C23.0061 2.02058 23.1749 9.1755 18.7682 13.5867C17.4105 15.0207 15.8334 16.2187 14.1025 17.1391L14.1272 19.3786C14.1297 19.6736 14.0737 19.9661 13.9623 20.2392C13.8509 20.5122 13.6864 20.7604 13.4783 20.9693L11.8317 22.6176C11.6934 22.7561 11.5051 22.8339 11.3096 22.8339C11.1451 22.834 10.9853 22.7789 10.8556 22.6775C10.726 22.5761 10.634 22.4342 10.5943 22.2744L9.85024 19.2946C9.75514 19.3524 9.65558 19.4029 9.55236 19.4458C9.28402 19.5571 8.99555 19.6142 8.70506 19.6135C8.41415 19.6143 8.12597 19.5574 7.85723 19.4459C7.58849 19.3344 7.34454 19.1705 7.13954 18.9639L5.05488 16.8772C4.64047 16.4616 4.40771 15.8984 4.40771 15.3112C4.40771 14.9029 4.52022 14.5063 4.72805 14.1628L1.7461 13.4166C1.61952 13.3849 1.50359 13.3202 1.41015 13.229C1.31671 13.1379 1.24911 13.0235 1.21425 12.8976C1.17938 12.7718 1.17851 12.6389 1.2117 12.5126C1.2449 12.3863 1.31098 12.2711 1.40321 12.1787L3.04985 10.5296C3.25704 10.3198 3.50452 10.1542 3.77737 10.0427C4.05023 9.93116 4.34281 9.8761 4.63749 9.8808L6.87751 9.90562C7.79715 8.17292 8.99396 6.59433 10.4266 5.23524ZM11.251 16.8169L7.19967 12.7622L7.20002 12.7612C8.11342 10.3043 9.57336 8.08756 11.4693 6.27899C12.7276 5.01966 14.2699 4.17681 15.7898 3.61295L20.3926 8.2204C19.8291 9.73967 18.9864 11.2819 17.7269 12.543C15.9202 14.441 13.7057 15.9025 11.251 16.8169ZM4.09328 11.5726C4.23607 11.4366 4.42492 11.3597 4.62201 11.3571L6.18016 11.3744C5.98649 11.8342 5.81139 12.3029 5.65553 12.7792C5.64749 12.8087 5.64132 12.8387 5.63702 12.8688L3.36693 12.3005L4.09328 11.5726ZM12.4356 19.9249L11.71 20.6519L11.1422 18.3806C11.1726 18.3763 11.2027 18.37 11.2326 18.3618C11.708 18.2059 12.1758 18.0308 12.6349 17.8372L12.6517 19.3949C12.6525 19.4931 12.6339 19.5906 12.5968 19.6816C12.5597 19.7725 12.5049 19.8552 12.4356 19.9249ZM6.09684 14.7882L6.61819 14.2663L9.74703 17.3983L9.22568 17.9202C9.08542 18.0545 8.8988 18.1295 8.7047 18.1295C8.51059 18.1295 8.32323 18.0545 8.18298 17.9202L6.09684 15.8327C5.95873 15.694 5.88118 15.5062 5.88118 15.3104C5.88118 15.1146 5.95873 14.9268 6.09684 14.7882ZM17.377 3.11417C19.1023 2.66213 20.6468 2.5293 21.5113 2.49152C21.4749 3.35736 21.3436 4.90377 20.8915 6.63167L17.377 3.11417Z",
35619
- fill: fill
35620
- }), /*#__PURE__*/React$1.createElement("path", {
35621
- "fill-rule": "evenodd",
35622
- "clip-rule": "evenodd",
35623
- d: "M12.5702 11.8494C13.0971 12.2829 13.7579 12.5201 14.4399 12.5206C14.8274 12.5213 15.2105 12.4454 15.5687 12.2972C15.9268 12.1489 16.2522 11.9314 16.526 11.657C17.0085 11.1744 17.3088 10.5393 17.376 9.85989C17.4431 9.18049 17.2728 8.49881 16.8941 7.93099C16.5155 7.36317 15.9519 6.94432 15.2993 6.74582C14.6468 6.54731 13.9456 6.58143 13.3154 6.84234C12.6851 7.10326 12.1647 7.57484 11.8429 8.17675C11.521 8.77865 11.4176 9.47365 11.5502 10.1433C11.6828 10.813 12.0433 11.4159 12.5702 11.8494ZM13.5057 8.42927C13.7692 8.21258 14.0996 8.09405 14.4406 8.09389C14.6343 8.09363 14.8261 8.13164 15.005 8.20574C15.1839 8.27985 15.3465 8.38858 15.4833 8.52571C15.7246 8.76701 15.8748 9.08457 15.9083 9.42428C15.9419 9.764 15.8567 10.1048 15.6673 10.3888C15.478 10.6727 15.1962 10.8821 14.8698 10.9813C14.5435 11.0805 14.193 11.0634 13.8778 10.9329C13.5627 10.8024 13.3025 10.5666 13.1417 10.2656C12.9808 9.96461 12.9291 9.61709 12.9955 9.28225C13.0619 8.9474 13.2422 8.64596 13.5057 8.42927Z",
35624
- fill: fill
35625
- }));
35626
- };
35627
-
35628
- const MenuRoute = props => {
35629
- const {
35630
- tabsPosition,
35631
- items,
35632
- color,
35633
- selecetIndex = 0,
35634
- onTabClick
35635
- } = props;
35636
- const [activeItem, setActiveItem] = useState(items[selecetIndex]?.key || items[0]?.key);
35637
- useEffect(() => {
35638
- if (selecetIndex >= 0 && selecetIndex < items.length) {
35639
- setActiveItem(items[selecetIndex]?.key);
35640
- }
35641
- }, [selecetIndex, items]);
35642
- const handleItemClick = (key, item) => {
35643
- if (item.disabled) return;
35644
- if (item.href) {
35645
- window.open(item.href, item.target || '_self');
35646
- return;
35647
- }
35648
- setActiveItem(key);
35649
- if (onTabClick) {
35650
- onTabClick(key);
35651
- }
35652
- };
35653
- return /*#__PURE__*/React$1.createElement(MenuRouteContainer, null, /*#__PURE__*/React$1.createElement(ButtonGroup, {
35654
- pos: tabsPosition
35655
- }, items.map(item => /*#__PURE__*/React$1.createElement(Button, {
35656
- key: item.key,
35657
- onClick: () => handleItemClick(item.key, item),
35658
- disabled: item.disabled,
35659
- className: activeItem === item.key ? 'active' : '',
35660
- color: color
35661
- }, item.icon && /*#__PURE__*/React$1.cloneElement(item.icon, {
35662
- fill: item.disabled ? '#717171' : activeItem === item.key ? color : item.icon.props.fill
35663
- }), /*#__PURE__*/React$1.isValidElement(item.label) ? item.label : item.label))));
35664
- };
35665
-
35666
- const TableWrapper = styled.div`
35667
- width: ${props => props.width};
35668
- height: ${props => props.height};
35669
- background-color: #fff;
35670
- box-sizing: border-box;
35671
- font-family: 'Poppins', sans-serif;
35672
- `;
35673
- styled.table`
35674
- width: 100%;
35675
- margin-top: 24px;
35676
- border-spacing: unset;
35677
- `;
35678
- styled.thead``;
35679
- styled.th`
35680
- font-weight: 600;
35681
- width: ${props => props.width};
35682
- padding-right: 8px;
35683
- padding-bottom: 12px;
35684
- `;
35685
- styled.tbody``;
35686
- styled.td`
35687
- font-weight: 600;
35688
- width: ${props => props.width};
35689
- padding-right: 8px;
35690
- padding-bottom: 12px;
35691
- `;
35692
- styled.tr`
35693
- border-bottom: 1px solid #C8C8C8;
35694
- `;
35695
- const NoInfoFound = styled.div`
35696
- height: 100%;
35697
- box-sizing: border-box;
35698
- color: #212121;
35699
- position: relative;
35700
- `;
35701
- const TableTop = styled.div`
35702
- display: flex;
35703
- align-items: center;
35704
- justify-content: space-between;
35705
- `;
35706
- const Title = styled.h2`
35707
- font-size: 24px;
35708
- font-weight: 500;
35709
- margin: 0;
35710
- `;
35711
- const SubTitle = styled.span`
35712
- font-size: 14px;
35713
- color: #8B8989;
35714
- `;
35715
- const NoEventsParent = styled.div`
35716
- position: absolute;
35717
- top: 50%;
35718
- left: 50%;
35719
- transform: translate(-50%, -50%);
35720
- `;
35721
- const NoEventsWrapper = styled.div`
35722
- display: flex;
35723
- align-items: center;
35724
- justify-content: center;
35725
- position: relative;
35726
- margin-bottom: 14px;
35727
- `;
35728
- const NoEventsMessage = styled.span`
35729
- font-size: 18px;
35730
- font-weight: 400;
35731
- margin-bottom: 14px;
35732
- text-align: center;
35733
- display: block;
35734
- > strong {
35735
- font-size: 24px;
35736
- font-weight: 500;
35737
- }
35738
- `;
35739
-
35740
- const NoEvents = ({
35741
- width = '251',
35742
- height = '250'
35743
- }) => /*#__PURE__*/React$1.createElement("svg", {
35744
- width: width,
35745
- height: height,
35746
- viewBox: "0 0 251 250",
35747
- fill: "none",
35748
- xmlns: "http://www.w3.org/2000/svg"
35749
- }, /*#__PURE__*/React$1.createElement("rect", {
35750
- x: "0.5",
35751
- width: "250",
35752
- height: "250",
35753
- rx: "125",
35754
- fill: "#F3F7F7"
35755
- }), /*#__PURE__*/React$1.createElement("rect", {
35756
- x: "79.0715",
35757
- y: "82.0254",
35758
- width: "91.9643",
35759
- height: "31.25",
35760
- fill: "#B4D1D2"
35761
- }), /*#__PURE__*/React$1.createElement("path", {
35762
- d: "M201.056 149.717V149.686C201.054 149.691 201.052 149.696 201.052 149.701C201.05 149.696 201.048 149.691 201.047 149.686V149.717C200.635 151.213 199.681 152.283 198.186 152.927C199.681 153.57 200.635 154.64 201.047 156.136V156.167C201.049 156.162 201.051 156.157 201.052 156.152C201.053 156.157 201.055 156.162 201.056 156.167V156.136C201.468 154.64 202.422 153.57 203.917 152.927C202.422 152.283 201.468 151.213 201.056 149.717ZM34.6198 71.7965V71.765C34.618 71.7702 34.6163 71.7755 34.6154 71.7808C34.6136 71.7755 34.6119 71.7702 34.611 71.765V71.7965C34.1985 73.2927 33.2449 74.3625 31.75 75.0059C33.2449 75.6494 34.1985 76.7192 34.611 78.2153V78.2468C34.6127 78.2416 34.6145 78.2363 34.6154 78.2311C34.6171 78.2363 34.6189 78.2416 34.6198 78.2468V78.2153C35.0322 76.7192 35.9859 75.6494 37.4808 75.0059C35.9859 74.3625 35.0322 73.2927 34.6198 71.7965ZM216.389 202.361V202.329C216.387 202.335 216.386 202.34 216.385 202.345C216.383 202.34 216.381 202.335 216.38 202.329V202.361C215.968 203.857 215.014 204.927 213.519 205.57C215.014 206.214 215.968 207.283 216.38 208.78V208.811C216.382 208.806 216.384 208.801 216.385 208.795C216.386 208.801 216.388 208.806 216.389 208.811V208.78C216.801 207.283 217.755 206.214 219.25 205.57C217.755 204.927 216.801 203.857 216.389 202.361ZM182.433 182.494V182.43C182.43 182.442 182.427 182.451 182.424 182.463C182.421 182.451 182.418 182.442 182.415 182.43V182.494C181.59 185.486 179.683 187.626 176.693 188.913C179.683 190.2 181.589 192.34 182.415 195.332V195.396C182.418 195.384 182.421 195.375 182.424 195.363C182.427 195.375 182.43 195.384 182.433 195.396V195.332C183.258 192.34 185.165 190.2 188.155 188.913C185.165 187.626 183.259 185.486 182.433 182.494ZM54.8385 110.651V110.587C54.8359 110.598 54.8324 110.608 54.8298 110.619C54.8271 110.608 54.8236 110.598 54.821 110.587V110.651C53.9961 113.642 52.0887 115.783 49.099 117.07C52.0887 118.357 53.9952 120.497 54.821 123.489V123.552C54.8236 123.541 54.8271 123.531 54.8298 123.52C54.8324 123.531 54.8359 123.541 54.8385 123.552V123.489C55.6635 120.497 57.5708 118.357 60.5605 117.07C57.5708 115.783 55.6643 113.642 54.8385 110.651ZM81.9624 38.3393V38.2754C81.9598 38.2868 81.9563 38.2964 81.9536 38.3078C81.951 38.2964 81.9475 38.2868 81.9449 38.2754V38.3393C81.1199 41.3307 79.2126 43.4712 76.2229 44.7581C79.2126 46.045 81.1191 48.1855 81.9449 51.177V51.2409C81.9475 51.2295 81.951 51.2198 81.9536 51.2085C81.9563 51.2198 81.9598 51.2295 81.9624 51.2409V51.177C82.7873 48.1855 84.6947 46.045 87.6844 44.7581C84.6947 43.4712 82.7882 41.3307 81.9624 38.3393Z",
35763
- fill: "#F2BB91"
35764
- }), /*#__PURE__*/React$1.createElement("path", {
35765
- d: "M49.3076 149.106C49.5096 148.924 49.8322 148.924 50.0342 149.106C50.2444 149.295 50.2443 149.609 50.0342 149.798L41.8711 157.145C41.6691 157.327 41.3465 157.327 41.1445 157.145C40.9344 156.956 40.9342 156.642 41.1445 156.453L49.3076 149.106ZM47.1309 154.494C47.8309 153.864 48.9601 153.864 49.6602 154.494C50.3686 155.131 50.3687 156.171 49.6602 156.809C48.9601 157.439 47.8309 157.439 47.1309 156.809C46.4223 156.171 46.4223 155.131 47.1309 154.494ZM48.9346 155.186C48.6384 154.919 48.1526 154.919 47.8564 155.186C47.5689 155.445 47.5688 155.858 47.8564 156.117C48.1526 156.383 48.6384 156.383 48.9346 156.117C49.2221 155.858 49.222 155.445 48.9346 155.186ZM41.5186 149.442C42.2186 148.812 43.3479 148.812 44.0479 149.442C44.7564 150.08 44.7564 151.121 44.0479 151.758C43.3478 152.388 42.2186 152.388 41.5186 151.758C40.81 151.121 40.81 150.08 41.5186 149.442ZM43.3223 150.134C43.0262 149.868 42.5403 149.868 42.2441 150.134C41.9564 150.393 41.9564 150.807 42.2441 151.066C42.5403 151.332 43.0261 151.332 43.3223 151.066C43.61 150.807 43.61 150.393 43.3223 150.134Z",
35766
- fill: "#9BC2C3",
35767
- stroke: "#9BC2C3",
35768
- "stroke-width": "0.276243"
35769
- }), /*#__PURE__*/React$1.createElement("path", {
35770
- d: "M136.808 199.106C137.01 198.924 137.332 198.924 137.534 199.106C137.744 199.295 137.744 199.609 137.534 199.798L129.371 207.145C129.169 207.327 128.846 207.327 128.645 207.145C128.434 206.956 128.434 206.642 128.645 206.453L136.808 199.106ZM134.631 204.494C135.331 203.864 136.46 203.864 137.16 204.494C137.869 205.131 137.869 206.171 137.16 206.809C136.46 207.439 135.331 207.439 134.631 206.809C133.922 206.171 133.922 205.131 134.631 204.494ZM136.435 205.186C136.138 204.919 135.653 204.919 135.356 205.186C135.069 205.445 135.069 205.858 135.356 206.117C135.653 206.383 136.138 206.383 136.435 206.117C136.722 205.858 136.722 205.445 136.435 205.186ZM129.019 199.442C129.719 198.812 130.848 198.812 131.548 199.442C132.256 200.08 132.256 201.121 131.548 201.758C130.848 202.388 129.719 202.388 129.019 201.758C128.31 201.121 128.31 200.08 129.019 199.442ZM130.822 200.134C130.526 199.868 130.04 199.868 129.744 200.134C129.456 200.393 129.456 200.807 129.744 201.066C130.04 201.332 130.526 201.332 130.822 201.066C131.11 200.807 131.11 200.393 130.822 200.134Z",
35771
- fill: "#9BC2C3",
35772
- stroke: "#9BC2C3",
35773
- "stroke-width": "0.276243"
35774
- }), /*#__PURE__*/React$1.createElement("path", {
35775
- d: "M147.872 44.6279C148.041 44.4584 148.317 44.4584 148.486 44.6279C148.655 44.7974 148.655 45.0717 148.486 45.2412L142.172 51.5557C142.002 51.725 141.728 51.725 141.558 51.5557C141.389 51.3861 141.389 51.1109 141.558 50.9414L147.872 44.6279ZM146.188 49.2578C146.743 48.703 147.642 48.703 148.197 49.2578C148.752 49.8126 148.752 50.7118 148.197 51.2666C147.642 51.8214 146.743 51.8214 146.188 51.2666C145.633 50.7118 145.633 49.8126 146.188 49.2578ZM147.584 49.8711C147.368 49.6553 147.017 49.6553 146.802 49.8711C146.586 50.0868 146.586 50.4376 146.802 50.6533C147.017 50.8691 147.368 50.8691 147.584 50.6533C147.8 50.4376 147.8 50.0868 147.584 49.8711ZM141.847 44.917C142.402 44.3622 143.301 44.3622 143.856 44.917C144.411 45.4718 144.411 46.371 143.856 46.9258C143.301 47.4805 142.402 47.4804 141.847 46.9258C141.293 46.371 141.293 45.4718 141.847 44.917ZM143.242 45.5303C143.026 45.3148 142.676 45.3146 142.461 45.5303C142.245 45.7459 142.245 46.0957 142.461 46.3115C142.676 46.5273 143.026 46.5273 143.242 46.3115C143.458 46.0958 143.458 45.746 143.242 45.5303Z",
35776
- fill: "#9BC2C3",
35777
- stroke: "#9BC2C3",
35778
- "stroke-width": "0.276243"
35779
- }), /*#__PURE__*/React$1.createElement("path", {
35780
- d: "M104.824 204.819V204.853C105.322 206.447 106.47 207.587 108.272 208.272C106.47 208.958 105.321 210.098 104.824 211.691V211.725C104.822 211.719 104.82 211.714 104.819 211.708C104.817 211.714 104.815 211.719 104.813 211.725V211.691C104.316 210.098 103.167 208.958 101.366 208.272C103.167 207.587 104.316 206.447 104.813 204.853V204.819C104.815 204.825 104.817 204.831 104.819 204.837C104.82 204.831 104.822 204.825 104.824 204.819Z",
35781
- fill: "#F2BB91"
35782
- }), /*#__PURE__*/React$1.createElement("path", {
35783
- d: "M170.333 116.525H81.4886V168.301C81.4886 172.916 85.0486 176.335 89.0397 176.335H162.782C166.773 176.335 170.333 172.916 170.333 168.301V116.525ZM143.996 91.7463V83.7126H107.825V91.7463C107.824 93.3501 106.49 94.65 104.842 94.65C103.194 94.65 101.859 93.3501 101.858 91.7463V83.7126H89.0397C85.0486 83.7126 81.4886 87.1311 81.4886 91.7463V110.714H170.333V91.7463C170.333 87.1311 166.773 83.7126 162.782 83.7126H149.963V91.7463C149.962 93.3501 148.628 94.65 146.98 94.65C145.332 94.65 143.997 93.3501 143.996 91.7463ZM176.3 168.301C176.3 175.766 170.427 182.142 162.782 182.142H89.0397C81.3947 182.142 75.5217 175.766 75.5217 168.301V91.7463C75.5217 84.2812 81.3947 77.9018 89.0397 77.9018H101.858V69.8715C101.858 68.2671 103.193 66.9678 104.842 66.9678C106.49 66.9678 107.825 68.2671 107.825 69.8715V77.9018H143.996V69.8715C143.996 68.2671 145.331 66.9678 146.98 66.9678C148.628 66.9678 149.963 68.2671 149.963 69.8715V77.9018H162.782C170.427 77.9018 176.3 84.2812 176.3 91.7463V168.301Z",
35784
- fill: "#519595"
35785
- }), /*#__PURE__*/React$1.createElement("path", {
35786
- "fill-rule": "evenodd",
35787
- "clip-rule": "evenodd",
35788
- d: "M114.622 129.954C116.552 129.954 118.356 130.941 119.55 132.411L120.021 133.068L120.039 133.093L120.049 133.117C121.121 135.065 121.132 137.505 120.039 139.391L120.032 139.405C118.863 141.349 116.806 142.537 114.622 142.537C112.644 142.537 110.817 141.634 109.607 140.101L109.129 139.405L109.118 139.391L109.122 139.388C108.03 137.502 108.039 135.064 109.111 133.117L109.122 133.093L109.139 133.068C110.298 131.237 112.341 129.954 114.622 129.954ZM114.622 139.841C116.534 139.841 118.221 138.278 118.221 136.245C118.221 134.315 116.552 132.65 114.622 132.65C112.59 132.65 111.023 134.334 111.023 136.245C111.023 138.26 112.608 139.841 114.622 139.841Z",
35789
- fill: "#519595"
35790
- }), /*#__PURE__*/React$1.createElement("path", {
35791
- d: "M138.966 130.358C139.839 129.795 141.08 129.89 141.831 130.639C142.581 131.389 142.675 132.628 142.112 133.5L141.831 133.848L112.137 163.503C111.28 164.359 109.782 164.359 108.925 163.503C108.067 162.646 108.067 161.151 108.925 160.294L138.618 130.639L138.966 130.358Z",
35792
- fill: "#519595"
35793
- }), /*#__PURE__*/React$1.createElement("path", {
35794
- "fill-rule": "evenodd",
35795
- "clip-rule": "evenodd",
35796
- d: "M141.145 153.978C139.951 152.508 138.147 151.521 136.217 151.521C133.936 151.521 131.893 152.804 130.734 154.635L130.717 154.66L130.706 154.684C129.635 156.631 129.622 159.073 130.713 160.958L130.724 160.972C131.896 162.923 133.957 164.104 136.217 164.104C138.402 164.104 140.458 162.916 141.627 160.972L141.634 160.958C142.727 159.072 142.717 156.632 141.644 154.684L141.634 154.66L141.616 154.635L141.145 153.978ZM136.217 161.408C138.129 161.408 139.817 159.845 139.817 157.813C139.817 155.882 138.147 154.217 136.217 154.217C134.185 154.217 132.618 155.901 132.618 157.813C132.618 159.827 134.203 161.408 136.217 161.408Z",
35797
- fill: "#519595"
35798
- }), /*#__PURE__*/React$1.createElement("circle", {
35799
- cx: "171.036",
35800
- cy: "176.668",
35801
- r: "22.3214",
35802
- fill: "#F3F7F7",
35803
- stroke: "#519595",
35804
- "stroke-width": "5.35714"
35805
- }), /*#__PURE__*/React$1.createElement("path", {
35806
- d: "M185.4 175.847C185.735 176.182 185.924 176.637 185.924 177.111C185.924 177.585 185.736 178.04 185.4 178.375C185.065 178.711 184.61 178.899 184.136 178.899L173.279 178.897L173.281 189.754C173.273 190.223 173.081 190.67 172.746 190.999C172.412 191.327 171.962 191.511 171.493 191.511C171.024 191.511 170.574 191.327 170.239 190.998C169.905 190.67 169.713 190.223 169.704 189.754L169.703 178.896L158.845 178.894C158.608 178.898 158.372 178.855 158.151 178.767C157.931 178.679 157.73 178.548 157.56 178.381C157.391 178.215 157.256 178.016 157.164 177.797C157.073 177.578 157.025 177.343 157.025 177.106C157.025 176.868 157.072 176.633 157.164 176.414C157.256 176.195 157.39 175.997 157.56 175.83C157.729 175.664 157.93 175.533 158.15 175.445C158.371 175.357 158.607 175.314 158.844 175.318L169.702 175.32L169.7 164.463C169.708 163.994 169.9 163.547 170.234 163.218C170.569 162.89 171.019 162.705 171.488 162.706C171.957 162.706 172.407 162.89 172.741 163.219C173.076 163.547 173.268 163.994 173.276 164.463L173.278 175.321L184.136 175.323C184.61 175.323 185.065 175.511 185.4 175.847Z",
35807
- fill: "#519595"
35808
- }));
35809
-
35810
- const Table = props => {
35811
- const {
35812
- width = '100%',
35813
- height = 'auto',
35814
- tableTitle = 'All Events',
35815
- data = [],
35816
- counter = 0,
35817
- onButtonClick = () => {},
35818
- buttonColor = '#066768',
35819
- buttonHoverColor = '#388586',
35820
- showSideButton = true,
35821
- onSideButtonClick = () => {},
35822
- sideButtonColor = '#066768',
35823
- sideButtonHoverColor = '#388586',
35824
- children = null
35825
- } = props;
35826
- return /*#__PURE__*/React$1.createElement(TableWrapper, {
35827
- width: width,
35828
- height: height
35829
- }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
35830
- height: "45px",
35831
- leftIcon: "Plus",
35832
- text: "New Event",
35833
- borderRadius: "12px",
35834
- backgroundColor: sideButtonColor,
35835
- hoverBackgroundColor: sideButtonHoverColor,
35836
- onClick: onSideButtonClick
35837
- })), children, /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven\u2019t created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let\u2019s get started and create your first one!"), /*#__PURE__*/React$1.createElement(Button$1, {
35838
- height: "45px",
35839
- leftIcon: "Plus",
35840
- text: "New Event",
35841
- borderRadius: "12px",
35842
- backgroundColor: buttonColor,
35843
- hoverBackgroundColor: buttonHoverColor,
35844
- onClick: onButtonClick
35845
- }))) : /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, counter === 0 ? 'No' : counter, " Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
35846
- height: "45px",
35847
- leftIcon: "Plus",
35848
- text: "New Event",
35849
- borderRadius: "12px",
35850
- backgroundColor: sideButtonColor,
35851
- hoverBackgroundColor: sideButtonHoverColor,
35852
- onClick: onSideButtonClick
35853
- })));
35854
- };
35855
-
35856
- export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SearchInput, SingleBarLineCharts, TabMenu, Table, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
34445
+ export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseData, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, TwoBarCharts };
35857
34446
  //# sourceMappingURL=index.esm.js.map