@ctlyst.id/internal-ui 1.0.2-canary.4 → 1.0.2-canary.5

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.
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
6
 
7
7
  var react = require('@chakra-ui/react');
8
- var React$1 = require('react');
9
- var React$1__default = _interopDefault(React$1);
8
+ var React = require('react');
9
+ var React__default = _interopDefault(React);
10
10
  var fi = require('react-icons/fi');
11
11
  var icons = require('@chakra-ui/icons');
12
12
  var react$1 = require('@emotion/react');
@@ -16,8 +16,8 @@ var ReactDatePicker = _interopDefault(require('react-datepicker'));
16
16
  var system = require('@chakra-ui/system');
17
17
  var ReactSelect = _interopDefault(require('react-select'));
18
18
  var reactSelectAsyncPaginate = require('react-select-async-paginate');
19
- var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
20
19
  var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-creatable'));
20
+ var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
21
21
  var reactDropzone = require('react-dropzone');
22
22
  var themeTools = require('@chakra-ui/theme-tools');
23
23
  var anatomy = require('@chakra-ui/anatomy');
@@ -35,27 +35,27 @@ const BreadCrumb = props => {
35
35
  spacing = 2
36
36
  } = props;
37
37
  const [neutral7, dark5] = react.useToken('colors', ['neutral.700', 'dark.500']);
38
- return /*#__PURE__*/React$1.createElement(react.Box, {
38
+ return /*#__PURE__*/React.createElement(react.Box, {
39
39
  "data-test-id": "CT_component_breadcrumb_breadcrumb",
40
40
  className: className,
41
41
  display: "flex",
42
42
  justifyContent: "space-between",
43
43
  alignItems: "center",
44
44
  paddingY: 2
45
- }, /*#__PURE__*/React$1.createElement(react.Box, {
45
+ }, /*#__PURE__*/React.createElement(react.Box, {
46
46
  display: "flex",
47
47
  alignItems: "center"
48
- }, /*#__PURE__*/React$1.createElement(react.Text, {
48
+ }, /*#__PURE__*/React.createElement(react.Text, {
49
49
  pr: 2,
50
50
  fontWeight: 500,
51
51
  textStyle: "heading.3",
52
52
  color: react.useColorModeValue('neutral.700', 'white')
53
- }, title), /*#__PURE__*/React$1.createElement(react.Box, {
53
+ }, title), /*#__PURE__*/React.createElement(react.Box, {
54
54
  h: "22px",
55
55
  borderLeft: "1px solid",
56
56
  borderColor: react.useColorModeValue('neutral.700', 'white')
57
- }), /*#__PURE__*/React$1.createElement(react.Breadcrumb, {
58
- separator: /*#__PURE__*/React$1.createElement(fi.FiChevronsRight, {
57
+ }), /*#__PURE__*/React.createElement(react.Breadcrumb, {
58
+ separator: /*#__PURE__*/React.createElement(fi.FiChevronsRight, {
59
59
  color: react.useColorModeValue(neutral7, dark5),
60
60
  size: 14
61
61
  }),
@@ -71,20 +71,20 @@ const BreadCrumb = props => {
71
71
  display: "flex",
72
72
  alignItems: "center",
73
73
  className: "breadcrumb-wrapper"
74
- }, /*#__PURE__*/React$1.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React$1.createElement(react.BreadcrumbLink, {
74
+ }, /*#__PURE__*/React.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
75
75
  href: !disableHome ? '/' : undefined,
76
76
  style: {
77
77
  ...(disableHome && {
78
78
  cursor: 'default'
79
79
  })
80
80
  }
81
- }, /*#__PURE__*/React$1.createElement(fi.FiHome, {
81
+ }, /*#__PURE__*/React.createElement(fi.FiHome, {
82
82
  className: "align-top",
83
83
  size: 16,
84
84
  color: react.useColorModeValue('#12784A', '#ffffff')
85
- }))), parents === null || parents === void 0 ? void 0 : parents.map(val => /*#__PURE__*/React$1.createElement(react.BreadcrumbItem, {
85
+ }))), parents === null || parents === void 0 ? void 0 : parents.map(val => /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
86
86
  key: val.name
87
- }, /*#__PURE__*/React$1.createElement(react.BreadcrumbLink, {
87
+ }, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
88
88
  "data-test-id": "iadKcMAul3QAdvmfIQjRE",
89
89
  href: !val.disable ? val.link : undefined,
90
90
  onClick: val.onClick,
@@ -96,20 +96,20 @@ const BreadCrumb = props => {
96
96
  _hover: {
97
97
  textDecoration: 'none'
98
98
  }
99
- }, /*#__PURE__*/React$1.createElement(react.Text, {
99
+ }, /*#__PURE__*/React.createElement(react.Text, {
100
100
  color: val.disable ? 'dark.600' : react.useColorModeValue('primary.500', 'white'),
101
101
  fontSize: "text.sm",
102
102
  fontWeight: 400
103
- }, val.name)))), /*#__PURE__*/React$1.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React$1.createElement(react.BreadcrumbLink, {
103
+ }, val.name)))), /*#__PURE__*/React.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
104
104
  _hover: {
105
105
  textDecor: 'none',
106
106
  cursor: 'default'
107
107
  }
108
- }, /*#__PURE__*/React$1.createElement(react.Text, {
108
+ }, /*#__PURE__*/React.createElement(react.Text, {
109
109
  color: react.useColorModeValue('dark.700', 'white'),
110
110
  fontSize: "text.sm",
111
111
  fontWeight: 400
112
- }, title))))), children && /*#__PURE__*/React$1.createElement(react.Box, null, children));
112
+ }, title))))), children && /*#__PURE__*/React.createElement(react.Box, null, children));
113
113
  };
114
114
  BreadCrumb.defaultProps = {
115
115
  children: undefined,
@@ -123,15 +123,15 @@ const IndeterminateCheckbox = ({
123
123
  indeterminate = false,
124
124
  ...rest
125
125
  }) => {
126
- const ref = React$1.useRef(null);
127
- React$1.useEffect(() => {
126
+ const ref = React.useRef(null);
127
+ React.useEffect(() => {
128
128
  if (ref.current && typeof indeterminate === 'boolean') {
129
129
  ref.current.indeterminate = !rest.checked && indeterminate;
130
130
  }
131
131
  }, [ref, indeterminate]);
132
- return /*#__PURE__*/React$1.createElement(react.Flex, {
132
+ return /*#__PURE__*/React.createElement(react.Flex, {
133
133
  align: "center"
134
- }, /*#__PURE__*/React$1.createElement("input", Object.assign({
134
+ }, /*#__PURE__*/React.createElement("input", Object.assign({
135
135
  type: "checkbox",
136
136
  ref: ref
137
137
  }, rest)));
@@ -150,21 +150,21 @@ const DataTable = ({
150
150
  styles,
151
151
  ...props
152
152
  }) => {
153
- const [sorting, setSorting] = React$1.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
154
- const [rowSelection, onRowSelectionChange] = React$1.useState({});
155
- const dataColumns = React$1.useMemo(() => columns, [columns]);
156
- const checkboxColumn = React$1.useMemo(() => [{
153
+ const [sorting, setSorting] = React.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
154
+ const [rowSelection, onRowSelectionChange] = React.useState({});
155
+ const dataColumns = React.useMemo(() => columns, [columns]);
156
+ const checkboxColumn = React.useMemo(() => [{
157
157
  id: 'select',
158
158
  header: ({
159
159
  table
160
- }) => /*#__PURE__*/React$1.createElement(IndeterminateCheckbox, Object.assign({}, {
160
+ }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({}, {
161
161
  checked: table.getIsAllRowsSelected(),
162
162
  indeterminate: table.getIsSomeRowsSelected(),
163
163
  onChange: table.getToggleAllRowsSelectedHandler()
164
164
  })),
165
165
  cell: ({
166
166
  row
167
- }) => /*#__PURE__*/React$1.createElement(IndeterminateCheckbox, Object.assign({}, {
167
+ }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({}, {
168
168
  checked: row.getIsSelected(),
169
169
  indeterminate: row.getIsSomeSelected(),
170
170
  onChange: row.getToggleSelectedHandler()
@@ -200,13 +200,13 @@ const DataTable = ({
200
200
  const {
201
201
  flatRows
202
202
  } = table.getSelectedRowModel();
203
- React$1.useEffect(() => {
203
+ React.useEffect(() => {
204
204
  const rowData = flatRows.map(row => row.original);
205
205
  if (onSelectedRow) {
206
206
  onSelectedRow(rowData);
207
207
  }
208
208
  }, [flatRows]);
209
- return /*#__PURE__*/React$1.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React$1.createElement(react.Flex, {
209
+ return /*#__PURE__*/React.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React.createElement(react.Flex, {
210
210
  w: "100%",
211
211
  h: "100%",
212
212
  pos: "absolute",
@@ -214,19 +214,19 @@ const DataTable = ({
214
214
  align: "center",
215
215
  justify: "center",
216
216
  zIndex: 2
217
- }, /*#__PURE__*/React$1.createElement(react.Spinner, {
217
+ }, /*#__PURE__*/React.createElement(react.Spinner, {
218
218
  color: "primary.500",
219
219
  thickness: "4px",
220
220
  size: "lg"
221
- })), /*#__PURE__*/React$1.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React$1.createElement(react.Thead, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableHead), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React$1.createElement(react.Tr, Object.assign({
221
+ })), /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableHead), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
222
222
  key: headerGroup.id,
223
223
  bg: react.useColorModeValue('initial', 'ebony-clay.700')
224
224
  }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map(header => {
225
225
  var _ref;
226
- return /*#__PURE__*/React$1.createElement(react.Th, Object.assign({
226
+ return /*#__PURE__*/React.createElement(react.Th, Object.assign({
227
227
  key: header.id,
228
228
  colSpan: header.colSpan
229
- }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/React$1.createElement(react.Flex, {
229
+ }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/React.createElement(react.Flex, {
230
230
  "data-test-id": `CT_Container_TableHeader_${header.id}`,
231
231
  textTransform: "capitalize",
232
232
  userSelect: "none",
@@ -234,22 +234,22 @@ const DataTable = ({
234
234
  justifyContent: "space-between",
235
235
  onClick: header.column.getToggleSortingHandler(),
236
236
  cursor: header.column.getCanSort() ? 'pointer' : 'default'
237
- }, /*#__PURE__*/React$1.createElement(react.Text, {
237
+ }, /*#__PURE__*/React.createElement(react.Text, {
238
238
  fontSize: "text.sm",
239
239
  fontWeight: 400,
240
240
  lineHeight: "18px",
241
241
  color: react.useColorModeValue('neutral.900', 'white')
242
- }, reactTable.flexRender(header.column.columnDef.header, header.getContext())), /*#__PURE__*/React$1.createElement(react.Box, {
242
+ }, reactTable.flexRender(header.column.columnDef.header, header.getContext())), /*#__PURE__*/React.createElement(react.Box, {
243
243
  as: "span",
244
244
  pl: "2",
245
245
  "data-test-id": `CT_Container_SortingIcon_${header.id}`
246
246
  }, (_ref = header.column.getCanSort() && {
247
- asc: /*#__PURE__*/React$1.createElement(icons.ChevronUpIcon, null),
248
- desc: /*#__PURE__*/React$1.createElement(icons.ChevronDownIcon, null)
249
- }[header.column.getIsSorted()]) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/React$1.createElement(icons.UpDownIcon, {
247
+ asc: /*#__PURE__*/React.createElement(icons.ChevronUpIcon, null),
248
+ desc: /*#__PURE__*/React.createElement(icons.ChevronDownIcon, null)
249
+ }[header.column.getIsSorted()]) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/React.createElement(icons.UpDownIcon, {
250
250
  h: 2
251
251
  }))));
252
- })))), /*#__PURE__*/React$1.createElement(react.Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => /*#__PURE__*/React$1.createElement(react.Tr, Object.assign({
252
+ })))), /*#__PURE__*/React.createElement(react.Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
253
253
  key: row.id
254
254
  }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
255
255
  css: react$1.css`
@@ -259,7 +259,7 @@ const DataTable = ({
259
259
  }
260
260
  }
261
261
  `
262
- }), row.getVisibleCells().map(cell => /*#__PURE__*/React$1.createElement(react.Td, Object.assign({
262
+ }), row.getVisibleCells().map(cell => /*#__PURE__*/React.createElement(react.Td, Object.assign({
263
263
  key: cell.id,
264
264
  fontSize: "text.sm",
265
265
  color: react.useColorModeValue('dark.800', 'dark.300')
@@ -285,7 +285,7 @@ const Styles = () => {
285
285
  const {
286
286
  colorMode
287
287
  } = system.useColorMode();
288
- return React.createElement(react$1.Global, {
288
+ return /*#__PURE__*/React__default.createElement(react$1.Global, {
289
289
  styles: `
290
290
  @charset "UTF-8";
291
291
  .react-datepicker__year-read-view--down-arrow,
@@ -1093,33 +1093,33 @@ const TimeInput = ({
1093
1093
  label,
1094
1094
  rightAddon
1095
1095
  }) => {
1096
- const [time, setTime] = React$1__default.useState(value || '00:00');
1096
+ const [time, setTime] = React__default.useState(value || '00:00');
1097
1097
  const handleChange = e => {
1098
1098
  var _e$target;
1099
1099
  setTime(((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '00:00');
1100
1100
  };
1101
- React$1__default.useEffect(() => {
1101
+ React__default.useEffect(() => {
1102
1102
  if (onChange) {
1103
1103
  onChange(time);
1104
1104
  }
1105
1105
  }, [time]);
1106
- return /*#__PURE__*/React$1__default.createElement(react.Flex, {
1106
+ return /*#__PURE__*/React__default.createElement(react.Flex, {
1107
1107
  flexDir: "column",
1108
1108
  alignItems: "center",
1109
1109
  justifyContent: "center",
1110
1110
  p: 4,
1111
1111
  pt: 0
1112
- }, /*#__PURE__*/React$1__default.createElement(react.Text, {
1112
+ }, /*#__PURE__*/React__default.createElement(react.Text, {
1113
1113
  mb: 2
1114
- }, label), /*#__PURE__*/React$1__default.createElement(react.InputGroup, {
1114
+ }, label), /*#__PURE__*/React__default.createElement(react.InputGroup, {
1115
1115
  alignItems: "center",
1116
1116
  justifyContent: "center"
1117
- }, /*#__PURE__*/React$1__default.createElement(react.Input, {
1117
+ }, /*#__PURE__*/React__default.createElement(react.Input, {
1118
1118
  onChange: handleChange,
1119
1119
  type: "time",
1120
1120
  value: time,
1121
1121
  "data-test-id": "CT_Component_datepicker_input_time"
1122
- }), rightAddon && /*#__PURE__*/React$1__default.createElement(react.InputRightAddon, null, rightAddon)));
1122
+ }), rightAddon && /*#__PURE__*/React__default.createElement(react.InputRightAddon, null, rightAddon)));
1123
1123
  };
1124
1124
  TimeInput.displayName = 'DatepickerTimeInput';
1125
1125
  TimeInput.defaultProps = {
@@ -1152,14 +1152,14 @@ const Datepicker = ({
1152
1152
  return {
1153
1153
  timeInputLabel: '',
1154
1154
  showTimeInput: true,
1155
- customTimeInput: /*#__PURE__*/React$1__default.createElement(TimeInput, null)
1155
+ customTimeInput: /*#__PURE__*/React__default.createElement(TimeInput, null)
1156
1156
  };
1157
1157
  };
1158
- const component = /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement(Styles, null), /*#__PURE__*/React$1__default.createElement(ReactDatePicker, Object.assign({
1158
+ const component = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Styles, null), /*#__PURE__*/React__default.createElement(ReactDatePicker, Object.assign({
1159
1159
  id: id,
1160
1160
  name: name,
1161
1161
  selected: selected,
1162
- customInput: /*#__PURE__*/React$1__default.createElement(react.Input, {
1162
+ customInput: /*#__PURE__*/React__default.createElement(react.Input, {
1163
1163
  autoComplete: "off"
1164
1164
  }),
1165
1165
  dateFormat: dateFormat,
@@ -1173,16 +1173,16 @@ const Datepicker = ({
1173
1173
  if (props.inline) {
1174
1174
  return component;
1175
1175
  }
1176
- return /*#__PURE__*/React$1__default.createElement(react.FormControl, {
1176
+ return /*#__PURE__*/React__default.createElement(react.FormControl, {
1177
1177
  isRequired: isRequired,
1178
1178
  "data-test-id": "CT_Component_datepicker_wrapper"
1179
- }, label && /*#__PURE__*/React$1__default.createElement(react.FormLabel, {
1179
+ }, label && /*#__PURE__*/React__default.createElement(react.FormLabel, {
1180
1180
  fontSize: "text.sm"
1181
- }, label), /*#__PURE__*/React$1__default.createElement(react.InputGroup, null, component, /*#__PURE__*/React$1__default.createElement(react.InputRightElement, null, !value && /*#__PURE__*/React$1__default.createElement(fi.FiCalendar, null), value && /*#__PURE__*/React$1__default.createElement(fi.FiX, {
1181
+ }, label), /*#__PURE__*/React__default.createElement(react.InputGroup, null, component, /*#__PURE__*/React__default.createElement(react.InputRightElement, null, !value && /*#__PURE__*/React__default.createElement(fi.FiCalendar, null), value && /*#__PURE__*/React__default.createElement(fi.FiX, {
1182
1182
  "data-test-id": "bcpJJyCP0z_RIAGZXDU6s",
1183
1183
  onClick: onClear,
1184
1184
  cursor: "pointer"
1185
- }))), !isError ? /*#__PURE__*/React$1__default.createElement(react.FormHelperText, null, helperText) : /*#__PURE__*/React$1__default.createElement(react.FormErrorMessage, null, error));
1185
+ }))), !isError ? /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText) : /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, error));
1186
1186
  };
1187
1187
  Datepicker.defaultProps = {
1188
1188
  id: undefined,
@@ -1208,19 +1208,19 @@ const Field = props => {
1208
1208
  isRequired,
1209
1209
  children
1210
1210
  } = props;
1211
- return React.createElement(react.FormControl, {
1211
+ return /*#__PURE__*/React__default.createElement(react.FormControl, {
1212
1212
  isInvalid: isError
1213
- }, label && (typeof label === 'string' ? React.createElement(react.FormLabel, {
1213
+ }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
1214
1214
  fontSize: "field.sm",
1215
1215
  requiredIndicator: undefined
1216
- }, isRequired && React.createElement(react.Box, {
1216
+ }, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
1217
1217
  as: "span",
1218
1218
  color: "red.500",
1219
1219
  ml: 0,
1220
1220
  mr: 1
1221
- }, "*"), label) : label), children, !isError ? helperText && React.createElement(react.FormHelperText, {
1221
+ }, "*"), label) : label), children, !isError ? helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
1222
1222
  fontSize: "field.sm"
1223
- }, helperText) : typeof error === 'string' ? React.createElement(react.FormErrorMessage, {
1223
+ }, helperText) : typeof error === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
1224
1224
  textStyle: "field.sm",
1225
1225
  fontSize: "field.sm",
1226
1226
  mt: 1,
@@ -1235,7 +1235,7 @@ Field.defaultProps = {
1235
1235
  isRequired: false
1236
1236
  };
1237
1237
 
1238
- const InputField = /*#__PURE__*/React$1__default.forwardRef((props, ref) => {
1238
+ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
1239
1239
  const {
1240
1240
  value,
1241
1241
  type,
@@ -1251,19 +1251,19 @@ const InputField = /*#__PURE__*/React$1__default.forwardRef((props, ref) => {
1251
1251
  helperText,
1252
1252
  ...inputProps
1253
1253
  } = props;
1254
- return /*#__PURE__*/React$1__default.createElement(Field, {
1254
+ return /*#__PURE__*/React__default.createElement(Field, {
1255
1255
  label: label,
1256
1256
  isError: isError,
1257
1257
  error: error,
1258
1258
  helperText: helperText,
1259
1259
  isRequired: isRequired
1260
- }, /*#__PURE__*/React$1__default.createElement(react.InputGroup, {
1260
+ }, /*#__PURE__*/React__default.createElement(react.InputGroup, {
1261
1261
  size: size
1262
- }, addOnLeft && /*#__PURE__*/React$1__default.createElement(react.InputLeftAddon, null, addOnLeft), elementLeft && /*#__PURE__*/React$1__default.createElement(react.InputLeftElement, null, elementLeft), /*#__PURE__*/React$1__default.createElement(react.Input, Object.assign({
1262
+ }, addOnLeft && /*#__PURE__*/React__default.createElement(react.InputLeftAddon, null, addOnLeft), elementLeft && /*#__PURE__*/React__default.createElement(react.InputLeftElement, null, elementLeft), /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
1263
1263
  ref: ref,
1264
1264
  type: type,
1265
1265
  value: value
1266
- }, inputProps)), addOnRight && /*#__PURE__*/React$1__default.createElement(react.InputRightAddon, null, addOnRight), elementRight && /*#__PURE__*/React$1__default.createElement(react.InputRightElement, null, elementRight)));
1266
+ }, inputProps)), addOnRight && /*#__PURE__*/React__default.createElement(react.InputRightAddon, null, addOnRight), elementRight && /*#__PURE__*/React__default.createElement(react.InputRightElement, null, elementRight)));
1267
1267
  });
1268
1268
  InputField.defaultProps = {
1269
1269
  addOnLeft: undefined,
@@ -1272,12 +1272,12 @@ InputField.defaultProps = {
1272
1272
  elementRight: undefined
1273
1273
  };
1274
1274
 
1275
- const TextareaField = /*#__PURE__*/React$1__default.forwardRef((props, ref) => {
1275
+ const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
1276
1276
  const {
1277
1277
  value,
1278
1278
  ...inputProps
1279
1279
  } = props;
1280
- return /*#__PURE__*/React$1__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React$1__default.createElement(react.Textarea, Object.assign({
1280
+ return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
1281
1281
  ref: ref,
1282
1282
  value: value
1283
1283
  }, inputProps)));
@@ -1289,11 +1289,11 @@ TextareaField.defaultProps = {
1289
1289
  elementRight: undefined
1290
1290
  };
1291
1291
 
1292
- const XMSLogo = () => React.createElement(react.Image, {
1292
+ const XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
1293
1293
  height: 8,
1294
1294
  src: react.useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
1295
1295
  });
1296
- const VoilaLogo = () => React.createElement(react.Image, {
1296
+ const VoilaLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
1297
1297
  src: "https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",
1298
1298
  filter: react.useColorModeValue('none', 'invert(1)'),
1299
1299
  maxW: 24
@@ -1309,11 +1309,11 @@ const Profile = ({
1309
1309
  onToggle,
1310
1310
  onClose
1311
1311
  } = react.useDisclosure();
1312
- return /*#__PURE__*/React$1.createElement(react.Popover, {
1312
+ return /*#__PURE__*/React.createElement(react.Popover, {
1313
1313
  placement: "bottom-end",
1314
1314
  isOpen: isOpen,
1315
1315
  onClose: onClose
1316
- }, /*#__PURE__*/React$1.createElement(react.Box, {
1316
+ }, /*#__PURE__*/React.createElement(react.Box, {
1317
1317
  "data-test-id": "WE0UYbA93LOZy6S09IhDO",
1318
1318
  as: "button",
1319
1319
  cursor: 'pointer',
@@ -1323,38 +1323,38 @@ const Profile = ({
1323
1323
  },
1324
1324
  m: 0,
1325
1325
  onClick: onToggle
1326
- }, /*#__PURE__*/React$1.createElement(react.HStack, null, /*#__PURE__*/React$1.createElement(react.VStack, {
1326
+ }, /*#__PURE__*/React.createElement(react.HStack, null, /*#__PURE__*/React.createElement(react.VStack, {
1327
1327
  alignItems: "flex-end",
1328
1328
  spacing: -0.5,
1329
1329
  ml: "2"
1330
- }, /*#__PURE__*/React$1.createElement(react.Text, {
1330
+ }, /*#__PURE__*/React.createElement(react.Text, {
1331
1331
  fontSize: "text.xs",
1332
1332
  mb: 1,
1333
1333
  fontWeight: 400,
1334
1334
  lineHeight: "14px",
1335
1335
  color: react.useColorModeValue('neutral.800', 'white')
1336
- }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React$1.createElement(react.Text, {
1336
+ }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React.createElement(react.Text, {
1337
1337
  fontSize: "text.xs",
1338
1338
  fontWeight: 400,
1339
1339
  lineHeight: "14px",
1340
1340
  color: react.useColorModeValue('primary.500', 'success.400')
1341
- }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/React$1.createElement(react.Text, {
1341
+ }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/React.createElement(react.Text, {
1342
1342
  color: "neutral.700",
1343
1343
  display: "inline-block",
1344
1344
  mr: 0.5
1345
- }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/React$1.createElement(react.PopoverTrigger, null, /*#__PURE__*/React$1.createElement(react.Avatar, {
1345
+ }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.Avatar, {
1346
1346
  size: 'sm',
1347
1347
  bg: "primary.500",
1348
1348
  color: "white",
1349
1349
  name: (_data$name = data === null || data === void 0 ? void 0 : data.name) !== null && _data$name !== void 0 ? _data$name : data === null || data === void 0 ? void 0 : data.email
1350
- })))), /*#__PURE__*/React$1.createElement(react.PopoverContent, {
1350
+ })))), /*#__PURE__*/React.createElement(react.PopoverContent, {
1351
1351
  bg: react.useColorModeValue('white', 'mirage.900'),
1352
1352
  maxW: 200
1353
- }, /*#__PURE__*/React$1.createElement(react.PopoverArrow, {
1353
+ }, /*#__PURE__*/React.createElement(react.PopoverArrow, {
1354
1354
  bg: react.useColorModeValue('white', 'mirage.900')
1355
- }), /*#__PURE__*/React$1.createElement(react.PopoverBody, {
1355
+ }), /*#__PURE__*/React.createElement(react.PopoverBody, {
1356
1356
  p: 1
1357
- }, /*#__PURE__*/React$1.createElement(react.Flex, {
1357
+ }, /*#__PURE__*/React.createElement(react.Flex, {
1358
1358
  "data-test-id": "gA7F9pucPX_Q3_dkgXIYZ",
1359
1359
  alignItems: "center",
1360
1360
  px: 3,
@@ -1367,7 +1367,7 @@ const Profile = ({
1367
1367
  },
1368
1368
  onClick: onLogout,
1369
1369
  fontSize: "text.xs"
1370
- }, /*#__PURE__*/React$1.createElement(fi.FiPower, null), /*#__PURE__*/React$1.createElement(react.Text, {
1370
+ }, /*#__PURE__*/React.createElement(fi.FiPower, null), /*#__PURE__*/React.createElement(react.Text, {
1371
1371
  ml: 2
1372
1372
  }, "Logout")))));
1373
1373
  };
@@ -1381,13 +1381,14 @@ const SwitchMode = () => {
1381
1381
  colorMode,
1382
1382
  toggleColorMode
1383
1383
  } = react.useColorMode();
1384
- return /*#__PURE__*/React$1.createElement(react.Box, {
1384
+ return /*#__PURE__*/React.createElement(react.Box, {
1385
+ "data-test-id": "rhYuTDCiWkFqr96upiEEh",
1385
1386
  mx: 5,
1386
1387
  onClick: toggleColorMode,
1387
1388
  cursor: "pointer"
1388
- }, colorMode === 'light' ? /*#__PURE__*/React$1.createElement(fi.FiMoon, {
1389
+ }, colorMode === 'light' ? /*#__PURE__*/React.createElement(fi.FiMoon, {
1389
1390
  size: 20
1390
- }) : /*#__PURE__*/React$1.createElement(fi.FiSun, {
1391
+ }) : /*#__PURE__*/React.createElement(fi.FiSun, {
1391
1392
  size: 20
1392
1393
  }));
1393
1394
  };
@@ -1409,7 +1410,7 @@ const Version = ({
1409
1410
  version,
1410
1411
  environment,
1411
1412
  onOpenModalRelease
1412
- }) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, version && /*#__PURE__*/React$1.createElement(react.Badge, {
1413
+ }) => /*#__PURE__*/React.createElement(React.Fragment, null, version && /*#__PURE__*/React.createElement(react.Badge, {
1413
1414
  "data-test-id": "dzl3esjhCphobaaIXpiUE",
1414
1415
  bg: react.useColorModeValue('primary.500', 'rgba(124, 124, 124, 0.12)'),
1415
1416
  color: react.useColorModeValue('white', 'secondary.400'),
@@ -1421,7 +1422,7 @@ const Version = ({
1421
1422
  borderRadius: "md",
1422
1423
  onClick: onOpenModalRelease,
1423
1424
  cursor: onOpenModalRelease ? 'pointer' : 'auto'
1424
- }, version), /*#__PURE__*/React$1.createElement(react.Box, {
1425
+ }, version), /*#__PURE__*/React.createElement(react.Box, {
1425
1426
  background: "primary.50",
1426
1427
  color: "primary.500",
1427
1428
  fontSize: "text.xs",
@@ -1441,26 +1442,26 @@ const Header = ({
1441
1442
  onLogout,
1442
1443
  onOpenModalRelease,
1443
1444
  ...props
1444
- }) => /*#__PURE__*/React$1.createElement(react.Box, Object.assign({
1445
+ }) => /*#__PURE__*/React.createElement(react.Box, Object.assign({
1445
1446
  minH: 14,
1446
1447
  bg: react.useColorModeValue('white', 'ebony-clay.800'),
1447
1448
  boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
1448
1449
  px: 4,
1449
1450
  py: 1
1450
- }, props), /*#__PURE__*/React$1.createElement(react.Flex, {
1451
+ }, props), /*#__PURE__*/React.createElement(react.Flex, {
1451
1452
  h: 14,
1452
1453
  alignItems: "center",
1453
1454
  justifyContent: "space-between"
1454
- }, /*#__PURE__*/React$1.createElement(XMSLogo, null), /*#__PURE__*/React$1.createElement(react.HStack, {
1455
+ }, /*#__PURE__*/React.createElement(XMSLogo, null), /*#__PURE__*/React.createElement(react.HStack, {
1455
1456
  spacing: 2,
1456
1457
  alignItems: "center"
1457
- }, /*#__PURE__*/React$1.createElement(VoilaLogo, null), /*#__PURE__*/React$1.createElement(Version, {
1458
+ }, /*#__PURE__*/React.createElement(VoilaLogo, null), /*#__PURE__*/React.createElement(Version, {
1458
1459
  version: data === null || data === void 0 ? void 0 : data.version,
1459
1460
  environment: data === null || data === void 0 ? void 0 : data.environment,
1460
1461
  onOpenModalRelease: onOpenModalRelease
1461
- })), /*#__PURE__*/React$1.createElement(react.Flex, {
1462
+ })), /*#__PURE__*/React.createElement(react.Flex, {
1462
1463
  alignItems: "center"
1463
- }, /*#__PURE__*/React$1.createElement(SwitchMode, null), /*#__PURE__*/React$1.createElement(Profile, {
1464
+ }, /*#__PURE__*/React.createElement(SwitchMode, null), /*#__PURE__*/React.createElement(Profile, {
1464
1465
  data: data,
1465
1466
  onLogout: onLogout
1466
1467
  }))));
@@ -1470,8 +1471,8 @@ Header.defaultProps = {
1470
1471
  onOpenModalRelease: undefined
1471
1472
  };
1472
1473
 
1473
- const ModalCloseButton = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1474
- return React.createElement(react.ModalCloseButton, Object.assign({
1474
+ const ModalCloseButton = /*#__PURE__*/React.forwardRef((props, ref) => {
1475
+ return /*#__PURE__*/React__default.createElement(react.ModalCloseButton, Object.assign({
1475
1476
  ref: ref,
1476
1477
  top: 4,
1477
1478
  right: 4,
@@ -1480,22 +1481,22 @@ const ModalCloseButton = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1480
1481
  }, props));
1481
1482
  });
1482
1483
 
1483
- const ModalFooter = /*#__PURE__*/React$1.forwardRef(({
1484
+ const ModalFooter = /*#__PURE__*/React.forwardRef(({
1484
1485
  children,
1485
1486
  ...rest
1486
1487
  }, ref) => {
1487
- return React.createElement(react.ModalFooter, Object.assign({
1488
+ return /*#__PURE__*/React__default.createElement(react.ModalFooter, Object.assign({
1488
1489
  ref: ref,
1489
1490
  background: react.useColorModeValue('neutral.200', 'mirage.900'),
1490
1491
  borderBottomRadius: "md"
1491
1492
  }, rest), children);
1492
1493
  });
1493
1494
 
1494
- const ModalHeader = /*#__PURE__*/React$1.forwardRef(({
1495
+ const ModalHeader = /*#__PURE__*/React.forwardRef(({
1495
1496
  children,
1496
1497
  ...rest
1497
1498
  }, ref) => {
1498
- return React.createElement(react.ModalHeader, Object.assign({
1499
+ return /*#__PURE__*/React__default.createElement(react.ModalHeader, Object.assign({
1499
1500
  ref: ref,
1500
1501
  background: react.useColorModeValue('neutral.200', 'mirage.900'),
1501
1502
  borderTopRadius: 'md',
@@ -1510,26 +1511,26 @@ const Navigation = ({
1510
1511
  as,
1511
1512
  ...props
1512
1513
  }) => {
1513
- return /*#__PURE__*/React$1.createElement(react.Box, Object.assign({
1514
+ return /*#__PURE__*/React.createElement(react.Box, Object.assign({
1514
1515
  bg: react.useColorModeValue('white', 'ebony-clay.800'),
1515
1516
  boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
1516
1517
  borderRadius: "md",
1517
1518
  overflowX: "auto"
1518
- }, props), /*#__PURE__*/React$1.createElement(react.Flex, {
1519
+ }, props), /*#__PURE__*/React.createElement(react.Flex, {
1519
1520
  alignItems: "center",
1520
1521
  p: 2
1521
- }, /*#__PURE__*/React$1.createElement(react.HStack, {
1522
+ }, /*#__PURE__*/React.createElement(react.HStack, {
1522
1523
  spacing: 2
1523
1524
  }, navigations === null || navigations === void 0 ? void 0 : navigations.map(navigation => {
1524
1525
  const isActive = activePath.startsWith(navigation.navLink || '');
1525
1526
  const activeBg = isActive ? 'primary.500' : undefined;
1526
- return /*#__PURE__*/React$1.createElement(react.Popover, {
1527
+ return /*#__PURE__*/React.createElement(react.Popover, {
1527
1528
  key: navigation.title,
1528
1529
  trigger: "hover",
1529
1530
  placement: "bottom-start"
1530
1531
  }, ({
1531
1532
  isOpen
1532
- }) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(react.PopoverTrigger, null, /*#__PURE__*/React$1.createElement(react.Box, {
1533
+ }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.Box, {
1533
1534
  display: "flex",
1534
1535
  alignItems: "center",
1535
1536
  borderRadius: "md",
@@ -1540,18 +1541,18 @@ const Navigation = ({
1540
1541
  backgroundColor: isOpen && !isActive ? react.useColorModeValue('dove-gray.50', 'transparent') : activeBg,
1541
1542
  color: isActive ? 'white' : 'inherit',
1542
1543
  p: 2
1543
- }, /*#__PURE__*/React$1.createElement(react.Icon, {
1544
+ }, /*#__PURE__*/React.createElement(react.Icon, {
1544
1545
  as: navigation.icon,
1545
1546
  mr: 2
1546
- }), /*#__PURE__*/React$1.createElement(react.Text, {
1547
+ }), /*#__PURE__*/React.createElement(react.Text, {
1547
1548
  whiteSpace: "nowrap",
1548
1549
  fontSize: "text.sm",
1549
1550
  fontWeight: 400
1550
- }, navigation.title), /*#__PURE__*/React$1.createElement(icons.ChevronDownIcon, {
1551
+ }, navigation.title), /*#__PURE__*/React.createElement(icons.ChevronDownIcon, {
1551
1552
  ml: 2
1552
- }))), navigation.children && /*#__PURE__*/React$1.createElement(react.Portal, null, /*#__PURE__*/React$1.createElement(react.Box, {
1553
+ }))), navigation.children && /*#__PURE__*/React.createElement(react.Portal, null, /*#__PURE__*/React.createElement(react.Box, {
1553
1554
  zIndex: "popover"
1554
- }, /*#__PURE__*/React$1.createElement(react.PopoverContent, {
1555
+ }, /*#__PURE__*/React.createElement(react.PopoverContent, {
1555
1556
  key: navigation.title,
1556
1557
  bg: react.useColorModeValue('white', 'ebony-clay.800'),
1557
1558
  maxW: 250,
@@ -1566,7 +1567,7 @@ const Navigation = ({
1566
1567
  }) => {
1567
1568
  const link = navHost ? `${navHost}${navLink}` : navLink;
1568
1569
  const isActiveSub = activePath === navLink;
1569
- return /*#__PURE__*/React$1.createElement(react.Link, {
1570
+ return /*#__PURE__*/React.createElement(react.Link, {
1570
1571
  as: as,
1571
1572
  key: title,
1572
1573
  display: "flex",
@@ -1592,12 +1593,12 @@ const Navigation = ({
1592
1593
  css: react$1.css`
1593
1594
  border-spacing: 4px;
1594
1595
  `
1595
- }, /*#__PURE__*/React$1.createElement(react.Icon, {
1596
+ }, /*#__PURE__*/React.createElement(react.Icon, {
1596
1597
  as: icon,
1597
1598
  mr: 3
1598
- }), /*#__PURE__*/React$1.createElement(react.Text, {
1599
+ }), /*#__PURE__*/React.createElement(react.Text, {
1599
1600
  fontSize: "text.sm"
1600
- }, title), isActiveSub && /*#__PURE__*/React$1.createElement(react.Box, {
1601
+ }, title), isActiveSub && /*#__PURE__*/React.createElement(react.Box, {
1601
1602
  width: 0.5,
1602
1603
  height: 8,
1603
1604
  position: "absolute",
@@ -1624,7 +1625,7 @@ const PaginationButton = /*#__PURE__*/react.forwardRef(({
1624
1625
  const btnColor = react.useColorModeValue('black.high', 'primary.300');
1625
1626
  const btnNotActiveBg = react.useColorModeValue('secondary.50', 'primary.500');
1626
1627
  const btnNotActiveColor = react.useColorModeValue('primary.500', 'white');
1627
- return React.createElement(react.Button, Object.assign({
1628
+ return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
1628
1629
  "data-test-id": "Pagination-Button",
1629
1630
  ref: ref,
1630
1631
  className: className,
@@ -1660,12 +1661,12 @@ const PaginationButtonTrigger = ({
1660
1661
  onClick,
1661
1662
  visuallyHidden,
1662
1663
  icon
1663
- }) => /*#__PURE__*/React$1.createElement(PaginationButton, {
1664
+ }) => /*#__PURE__*/React.createElement(PaginationButton, {
1664
1665
  "data-test-id": "DLVCc_fBK35spHm5WxjcJ",
1665
1666
  color: color,
1666
1667
  isDisabled: isDisabled,
1667
1668
  onClick: onClick
1668
- }, /*#__PURE__*/React$1.createElement(react.VisuallyHidden, null, visuallyHidden), icon);
1669
+ }, /*#__PURE__*/React.createElement(react.VisuallyHidden, null, visuallyHidden), icon);
1669
1670
  PaginationButtonTrigger.defaultProps = {
1670
1671
  color: undefined,
1671
1672
  isDisabled: undefined,
@@ -1709,59 +1710,59 @@ const Pagination = ({
1709
1710
  }
1710
1711
  return pageButtons;
1711
1712
  };
1712
- return /*#__PURE__*/React$1.createElement(react.Box, {
1713
+ return /*#__PURE__*/React.createElement(react.Box, {
1713
1714
  className: className,
1714
1715
  display: "inline-flex",
1715
1716
  alignItems: "center"
1716
- }, /*#__PURE__*/React$1.createElement(react.Box, {
1717
+ }, /*#__PURE__*/React.createElement(react.Box, {
1717
1718
  mr: 1
1718
- }, /*#__PURE__*/React$1.createElement(PaginationButtonTrigger, {
1719
+ }, /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
1719
1720
  "data-test-id": "Pagination-Button",
1720
1721
  color: previousButtonColor,
1721
1722
  isDisabled: disabledPrevious,
1722
1723
  onClick: () => handleSelectPage(1),
1723
1724
  visuallyHidden: "First Page",
1724
- icon: /*#__PURE__*/React$1.createElement(icons.ArrowLeftIcon, {
1725
+ icon: /*#__PURE__*/React.createElement(icons.ArrowLeftIcon, {
1725
1726
  width: 2
1726
1727
  })
1727
- })), /*#__PURE__*/React$1.createElement(react.Box, {
1728
+ })), /*#__PURE__*/React.createElement(react.Box, {
1728
1729
  backgroundColor: react.useColorModeValue('neutral.300', 'mirage.900'),
1729
1730
  borderRadius: 50
1730
- }, /*#__PURE__*/React$1.createElement(PaginationButtonTrigger, {
1731
+ }, /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
1731
1732
  "data-test-id": "Pagination-Button",
1732
1733
  color: previousButtonColor,
1733
1734
  isDisabled: disabledPrevious,
1734
1735
  onClick: () => handleSelectPage(current - 1),
1735
1736
  visuallyHidden: "Previous Page",
1736
- icon: /*#__PURE__*/React$1.createElement(icons.ChevronLeftIcon, null)
1737
+ icon: /*#__PURE__*/React.createElement(icons.ChevronLeftIcon, null)
1737
1738
  }), generatePages().map(page => {
1738
- return /*#__PURE__*/React$1.createElement(PaginationButton, {
1739
+ return /*#__PURE__*/React.createElement(PaginationButton, {
1739
1740
  "data-test-id": "Pagination-Button",
1740
1741
  key: page,
1741
1742
  isActive: page === current,
1742
1743
  onClick: () => typeof page === 'number' ? handleSelectPage(page) : null
1743
- }, /*#__PURE__*/React$1.createElement(react.Text, {
1744
+ }, /*#__PURE__*/React.createElement(react.Text, {
1744
1745
  scale: 300,
1745
1746
  fontSize: "text.sm",
1746
1747
  lineHeight: 18,
1747
1748
  fontWeight: 500
1748
1749
  }, page));
1749
- }), /*#__PURE__*/React$1.createElement(PaginationButtonTrigger, {
1750
+ }), /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
1750
1751
  "data-test-id": "Pagination-Button",
1751
1752
  color: nextButtonColor,
1752
1753
  isDisabled: disabledNext,
1753
1754
  onClick: () => handleSelectPage(current + 1),
1754
1755
  visuallyHidden: "Next Page",
1755
- icon: /*#__PURE__*/React$1.createElement(icons.ChevronRightIcon, null)
1756
- })), /*#__PURE__*/React$1.createElement(react.Box, {
1756
+ icon: /*#__PURE__*/React.createElement(icons.ChevronRightIcon, null)
1757
+ })), /*#__PURE__*/React.createElement(react.Box, {
1757
1758
  ml: 1
1758
- }, /*#__PURE__*/React$1.createElement(PaginationButtonTrigger, {
1759
+ }, /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
1759
1760
  "data-test-id": "Pagination-Button",
1760
1761
  color: nextButtonColor,
1761
1762
  isDisabled: disabledNext,
1762
1763
  onClick: () => handleSelectPage(total),
1763
1764
  visuallyHidden: "Last Page",
1764
- icon: /*#__PURE__*/React$1.createElement(icons.ArrowRightIcon, {
1765
+ icon: /*#__PURE__*/React.createElement(icons.ArrowRightIcon, {
1765
1766
  width: 2
1766
1767
  })
1767
1768
  })));
@@ -1781,7 +1782,7 @@ const PaginationDetail = ({
1781
1782
  lineHeight = 18,
1782
1783
  ...rest
1783
1784
  }) => {
1784
- return /*#__PURE__*/React$1.createElement(react.Text, Object.assign({
1785
+ return /*#__PURE__*/React.createElement(react.Text, Object.assign({
1785
1786
  scale: scale,
1786
1787
  fontSize: fontSize,
1787
1788
  lineHeight: lineHeight
@@ -1795,23 +1796,23 @@ const PaginationFilter = ({
1795
1796
  onChange,
1796
1797
  ...rest
1797
1798
  }) => {
1798
- const [value, setValue] = React$1.useState(limit);
1799
- return /*#__PURE__*/React$1.createElement(react.Box, {
1799
+ const [value, setValue] = React.useState(limit);
1800
+ return /*#__PURE__*/React.createElement(react.Box, {
1800
1801
  display: "flex",
1801
1802
  flexDirection: "row",
1802
1803
  alignItems: "center"
1803
- }, /*#__PURE__*/React$1.createElement(react.Text, Object.assign({
1804
+ }, /*#__PURE__*/React.createElement(react.Text, Object.assign({
1804
1805
  fontSize: "text.sm",
1805
1806
  lineHeight: 18,
1806
1807
  color: react.useColorModeValue('neutral.900', 'white')
1807
- }, rest), label), /*#__PURE__*/React$1.createElement(react.Select, {
1808
+ }, rest), label), /*#__PURE__*/React.createElement(react.Select, {
1808
1809
  textAlign: "center",
1809
1810
  size: "xs",
1810
1811
  outline: "none",
1811
1812
  border: "none",
1812
1813
  boxShadow: "none",
1813
1814
  width: 18,
1814
- icon: /*#__PURE__*/React$1.createElement(fi.FiChevronDown, null),
1815
+ icon: /*#__PURE__*/React.createElement(fi.FiChevronDown, null),
1815
1816
  _focusVisible: {
1816
1817
  boxShadow: 'none'
1817
1818
  },
@@ -1822,7 +1823,7 @@ const PaginationFilter = ({
1822
1823
  },
1823
1824
  value: value
1824
1825
  }, items.map(item => {
1825
- return /*#__PURE__*/React$1.createElement("option", {
1826
+ return /*#__PURE__*/React.createElement("option", {
1826
1827
  key: item,
1827
1828
  value: item
1828
1829
  }, item);
@@ -2318,7 +2319,7 @@ function Select({
2318
2319
  const {
2319
2320
  colorMode
2320
2321
  } = system.useColorMode();
2321
- return React.createElement(ReactSelect, Object.assign({}, rest, {
2322
+ return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, rest, {
2322
2323
  styles: {
2323
2324
  ...selectStyles(colorMode),
2324
2325
  ...styles
@@ -2334,7 +2335,7 @@ function SelectAsync({
2334
2335
  const {
2335
2336
  colorMode
2336
2337
  } = system.useColorMode();
2337
- return React.createElement(reactSelectAsyncPaginate.AsyncPaginate, Object.assign({}, rest, {
2338
+ return /*#__PURE__*/React__default.createElement(reactSelectAsyncPaginate.AsyncPaginate, Object.assign({}, rest, {
2338
2339
  styles: {
2339
2340
  ...selectStyles(colorMode),
2340
2341
  ...styles
@@ -2343,14 +2344,14 @@ function SelectAsync({
2343
2344
  }));
2344
2345
  }
2345
2346
 
2346
- function SelectCreatable({
2347
+ function SelectAsyncCreatable({
2347
2348
  styles,
2348
2349
  ...rest
2349
2350
  }) {
2350
2351
  const {
2351
2352
  colorMode
2352
2353
  } = system.useColorMode();
2353
- return React.createElement(ReactSelectCreatable, Object.assign({}, rest, {
2354
+ return /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
2354
2355
  styles: {
2355
2356
  ...selectStyles(colorMode),
2356
2357
  ...styles
@@ -2359,14 +2360,14 @@ function SelectCreatable({
2359
2360
  }));
2360
2361
  }
2361
2362
 
2362
- function SelectAsyncCreatable({
2363
+ function SelectCreatable({
2363
2364
  styles,
2364
2365
  ...rest
2365
2366
  }) {
2366
2367
  const {
2367
2368
  colorMode
2368
2369
  } = system.useColorMode();
2369
- return React.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
2370
+ return /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({}, rest, {
2370
2371
  styles: {
2371
2372
  ...selectStyles(colorMode),
2372
2373
  ...styles
@@ -2383,7 +2384,7 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
2383
2384
  });
2384
2385
  const isSelected = !!tabProps['aria-selected'];
2385
2386
  const styles = react.useMultiStyleConfig('Tabs', tabProps);
2386
- return /*#__PURE__*/React$1.createElement(react.Button, Object.assign({
2387
+ return /*#__PURE__*/React.createElement(react.Button, Object.assign({
2387
2388
  p: 3,
2388
2389
  fontSize: "text.md",
2389
2390
  _selected: {
@@ -2396,20 +2397,20 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
2396
2397
  bg: 'none'
2397
2398
  },
2398
2399
  __css: styles.tab
2399
- }, tabProps), /*#__PURE__*/React$1.createElement(react.Flex, null, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
2400
+ }, tabProps), /*#__PURE__*/React.createElement(react.Flex, null, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
2400
2401
  isSelected
2401
2402
  }), tabProps.children, (_props$rightAddon = props.rightAddon) === null || _props$rightAddon === void 0 ? void 0 : _props$rightAddon.call(props, {
2402
2403
  isSelected
2403
2404
  })));
2404
2405
  });
2405
2406
 
2406
- const TabList = /*#__PURE__*/react.forwardRef((props, ref) => React.createElement(react.TabList, {
2407
+ const TabList = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(react.TabList, {
2407
2408
  borderBottom: "1px solid",
2408
2409
  borderColor: react.useColorModeValue('gray.200', 'bright-gray.800'),
2409
2410
  ref: ref
2410
2411
  }, props.children));
2411
2412
 
2412
- const TabPanel = /*#__PURE__*/react.forwardRef((props, ref) => React.createElement(react.TabPanel, {
2413
+ const TabPanel = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(react.TabPanel, {
2413
2414
  px: 0,
2414
2415
  ref: ref
2415
2416
  }, props.children));
@@ -2433,9 +2434,9 @@ const Uploader = ({
2433
2434
  validator,
2434
2435
  ...props
2435
2436
  }) => {
2436
- const [selectedFirstFile, setSelectedFirstFile] = React$1.useState();
2437
- const [isSelected, setIsSelected] = React$1.useState(selected || false);
2438
- const onDrop = React$1.useCallback(acceptedFiles => {
2437
+ const [selectedFirstFile, setSelectedFirstFile] = React.useState();
2438
+ const [isSelected, setIsSelected] = React.useState(selected || false);
2439
+ const onDrop = React.useCallback(acceptedFiles => {
2439
2440
  if (acceptedFiles.length > 0) {
2440
2441
  onHandleUploadFile === null || onHandleUploadFile === void 0 ? void 0 : onHandleUploadFile(acceptedFiles);
2441
2442
  if (!multiple) {
@@ -2456,46 +2457,46 @@ const Uploader = ({
2456
2457
  multiple,
2457
2458
  validator
2458
2459
  });
2459
- React$1.useEffect(() => {
2460
+ React.useEffect(() => {
2460
2461
  if (fileRejections.length > 0 && onHandleRejections) {
2461
2462
  onHandleRejections(fileRejections);
2462
2463
  }
2463
2464
  }, [fileRejections, onHandleRejections]);
2464
- const isError = React$1.useMemo(() => {
2465
+ const isError = React.useMemo(() => {
2465
2466
  const error = fileRejections.length > 0;
2466
2467
  if (error) {
2467
2468
  setIsSelected(false);
2468
2469
  }
2469
2470
  return error;
2470
2471
  }, [fileRejections]);
2471
- React$1.useEffect(() => {
2472
+ React.useEffect(() => {
2472
2473
  setIsSelected(selected !== null && selected !== void 0 ? selected : false);
2473
2474
  }, [selected]);
2474
- return /*#__PURE__*/React$1.createElement(react.Stack, {
2475
+ return /*#__PURE__*/React.createElement(react.Stack, {
2475
2476
  direction: "column"
2476
- }, /*#__PURE__*/React$1.createElement(react.Flex, Object.assign({
2477
+ }, /*#__PURE__*/React.createElement(react.Flex, Object.assign({
2477
2478
  minH: 200,
2478
2479
  border: "1px dashed",
2479
2480
  borderColor: isError ? 'danger.500' : 'primary.500',
2480
2481
  alignItems: "center",
2481
2482
  justifyContent: "center",
2482
2483
  cursor: "pointer"
2483
- }, props, getRootProps()), /*#__PURE__*/React$1.createElement("input", Object.assign({}, getInputProps())), isDragActive ? /*#__PURE__*/React$1.createElement(react.Text, null, messages.dragActive) : /*#__PURE__*/React$1.createElement(react.Flex, {
2484
+ }, props, getRootProps()), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps())), isDragActive ? /*#__PURE__*/React.createElement(react.Text, null, messages.dragActive) : /*#__PURE__*/React.createElement(react.Flex, {
2484
2485
  flexDirection: "column",
2485
2486
  alignItems: "center",
2486
2487
  color: isError ? 'danger.500' : 'primary.500'
2487
- }, !multiple && isSelected && /*#__PURE__*/React$1.createElement(react.Heading, {
2488
+ }, !multiple && isSelected && /*#__PURE__*/React.createElement(react.Heading, {
2488
2489
  fontWeight: 400,
2489
2490
  fontSize: "18px",
2490
2491
  lineHeight: 28,
2491
2492
  color: "black.high",
2492
2493
  mb: 2
2493
- }, selectedFirstFile === null || selectedFirstFile === void 0 ? void 0 : selectedFirstFile.name), !isSelected && /*#__PURE__*/React$1.createElement(react.Heading, {
2494
+ }, selectedFirstFile === null || selectedFirstFile === void 0 ? void 0 : selectedFirstFile.name), !isSelected && /*#__PURE__*/React.createElement(react.Heading, {
2494
2495
  fontWeight: 400,
2495
2496
  fontSize: "18px",
2496
2497
  lineHeight: 28,
2497
2498
  mb: 2
2498
- }, messages.uploadFile), isSelected ? /*#__PURE__*/React$1.createElement(react.Text, null, messages.dragReplace) : /*#__PURE__*/React$1.createElement(react.Text, null, messages.dragInActive))), renderError === null || renderError === void 0 ? void 0 : renderError(fileRejections));
2499
+ }, messages.uploadFile), isSelected ? /*#__PURE__*/React.createElement(react.Text, null, messages.dragReplace) : /*#__PURE__*/React.createElement(react.Text, null, messages.dragInActive))), renderError === null || renderError === void 0 ? void 0 : renderError(fileRejections));
2499
2500
  };
2500
2501
  Uploader.defaultProps = {
2501
2502
  onHandleUploadFile: undefined,
@@ -2975,13 +2976,13 @@ const theme = /*#__PURE__*/react.extendTheme({
2975
2976
  config
2976
2977
  });
2977
2978
 
2978
- const ProviderContext = /*#__PURE__*/React$1.createContext({
2979
+ const ProviderContext = /*#__PURE__*/React.createContext({
2979
2980
  instance: undefined
2980
2981
  });
2981
2982
  const useInternalUI = () => {
2982
2983
  const {
2983
2984
  instance
2984
- } = React$1.useContext(ProviderContext);
2985
+ } = React.useContext(ProviderContext);
2985
2986
  return {
2986
2987
  instance
2987
2988
  };
@@ -2992,8 +2993,8 @@ const Provider = ({
2992
2993
  requestInterceptors,
2993
2994
  responseInterceptors
2994
2995
  }) => {
2995
- const instanceRef = React$1.useRef(axios.create(config));
2996
- React$1.useEffect(() => {
2996
+ const instanceRef = React.useRef(axios.create(config));
2997
+ React.useEffect(() => {
2997
2998
  requestInterceptors === null || requestInterceptors === void 0 ? void 0 : requestInterceptors.forEach(interceptor => {
2998
2999
  instanceRef.current.interceptors.request.use(interceptor);
2999
3000
  });
@@ -3001,10 +3002,10 @@ const Provider = ({
3001
3002
  instanceRef.current.interceptors.response.use(interceptor);
3002
3003
  });
3003
3004
  }, [requestInterceptors, responseInterceptors]);
3004
- const provider = React$1.useMemo(() => ({
3005
+ const provider = React.useMemo(() => ({
3005
3006
  instance: instanceRef.current
3006
3007
  }), []);
3007
- return React.createElement(ProviderContext.Provider, {
3008
+ return /*#__PURE__*/React__default.createElement(ProviderContext.Provider, {
3008
3009
  value: provider
3009
3010
  }, children);
3010
3011
  };