@hexure/ui 1.13.32 → 1.13.34

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 (7) hide show
  1. package/dist/cjs/index.js +1518 -1518
  2. package/dist/esm/index.js +1470 -1470
  3. package/package.json +1 -1
  4. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  5. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
  6. /package/dist/esm/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  7. /package/dist/esm/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
package/dist/esm/index.js CHANGED
@@ -1,11 +1,11 @@
1
- import React, { useState, useContext, useRef, useEffect } from 'react';
2
- import styled, { ThemeContext, keyframes } from 'styled-components';
3
- import Icon, { Icon as Icon$1 } from '@mdi/react';
4
- import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
- import dayjs from 'dayjs';
6
- import Numeral from 'numeral';
7
- import Moment from 'moment';
8
-
1
+ import React, { useState, useContext, useRef, useEffect } from 'react';
2
+ import styled, { ThemeContext, keyframes } from 'styled-components';
3
+ import Icon, { Icon as Icon$1 } from '@mdi/react';
4
+ import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
+ import dayjs from 'dayjs';
6
+ import Numeral from 'numeral';
7
+ import Moment from 'moment';
8
+
9
9
  /******************************************************************************
10
10
  Copyright (c) Microsoft Corporation.
11
11
 
@@ -19,22 +19,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
19
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
20
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
21
  PERFORMANCE OF THIS SOFTWARE.
22
- ***************************************************************************** */
23
- /* global Reflect, Promise, SuppressedError, Symbol */
24
-
25
- function __rest(s, e) {
26
- var t = {};
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
- }
31
- return t;
32
- }
33
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
34
- var e = new Error(message);
35
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
36
- };
37
-
22
+ ***************************************************************************** */
23
+ /* global Reflect, Promise, SuppressedError, Symbol */
24
+
25
+ function __rest(s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
+ }
31
+ return t;
32
+ }
33
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
34
+ var e = new Error(message);
35
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
36
+ };
37
+
38
38
  const Colors = {
39
39
  PRIMARY: {
40
40
  Hex: '#0193D7',
@@ -83,8 +83,8 @@ const FontSizes = {
83
83
  };
84
84
  const EditableTheme = {
85
85
  PRIMARY_COLOR: Colors.PRIMARY,
86
- };
87
-
86
+ };
87
+
88
88
  //function to generate unique ids
89
89
  const generateUniqueId = (() => {
90
90
  let counter = 0;
@@ -92,26 +92,26 @@ const generateUniqueId = (() => {
92
92
  counter += 1;
93
93
  return `${prefix}-${counter}`;
94
94
  };
95
- })();
96
-
97
- const Header$3 = styled.div `
98
- display: flex;
99
- align-items: center;
100
- justify-content: space-between;
101
- box-sizing: border-box;
102
- background: #f5f5f5;
103
- border: 1px solid #e5e5e5;
104
- padding: 14px 20px;
105
- height: 50px;
106
- cursor: pointer;
107
- `;
108
- const Title$2 = styled.div `
109
- font-size: ${FontSizes.DEFAULT};
110
- font-weight: 400;
111
- color: ${Colors.BLACK.Hex};
112
- line-height: 1.6em;
113
- font-family: ${FontStyles.DEFAULT};
114
- box-sizing: border-box;
95
+ })();
96
+
97
+ const Header$3 = styled.div `
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: space-between;
101
+ box-sizing: border-box;
102
+ background: #f5f5f5;
103
+ border: 1px solid #e5e5e5;
104
+ padding: 14px 20px;
105
+ height: 50px;
106
+ cursor: pointer;
107
+ `;
108
+ const Title$2 = styled.div `
109
+ font-size: ${FontSizes.DEFAULT};
110
+ font-weight: 400;
111
+ color: ${Colors.BLACK.Hex};
112
+ line-height: 1.6em;
113
+ font-family: ${FontStyles.DEFAULT};
114
+ box-sizing: border-box;
115
115
  `;
116
116
  const Accordion = (_a) => {
117
117
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -121,21 +121,21 @@ const Accordion = (_a) => {
121
121
  React.createElement(Title$2, { id: `${id}-title` }, title),
122
122
  React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
123
123
  open ? React.createElement("div", { id: `${id}-content` }, children) : null));
124
- };
125
-
126
- const StyledComponent = styled.p `
127
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
128
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
129
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
130
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
131
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
132
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
133
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
134
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
135
- margin: ${props => props.$margin || '0px'};
136
- padding: ${props => props.$padding || '0px'};
137
- text-align: ${props => props.$align || 'left'};
138
- box-sizing: border-box;
124
+ };
125
+
126
+ const StyledComponent = styled.p `
127
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
128
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
129
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
130
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
131
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
132
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
133
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
134
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
135
+ margin: ${props => props.$margin || '0px'};
136
+ padding: ${props => props.$padding || '0px'};
137
+ text-align: ${props => props.$align || 'left'};
138
+ box-sizing: border-box;
139
139
  `;
140
140
  const Copy = (_a) => {
141
141
  var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK' } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color"]);
@@ -144,19 +144,19 @@ const Copy = (_a) => {
144
144
  };
145
145
  Copy.defaultProps = {
146
146
  type: 'default',
147
- };
148
-
149
- const Wrapper$h = styled.div `
150
- display: inline-block;
151
- position: relative;
152
- height: 16px;
153
- `;
154
- const StyledIcon$6 = styled(Icon) `
155
- width: 16px;
156
- height: 16px;
157
- margin: 0px 6px;
158
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
159
- cursor: pointer;
147
+ };
148
+
149
+ const Wrapper$h = styled.div `
150
+ display: inline-block;
151
+ position: relative;
152
+ height: 16px;
153
+ `;
154
+ const StyledIcon$6 = styled(Icon) `
155
+ width: 16px;
156
+ height: 16px;
157
+ margin: 0px 6px;
158
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
159
+ cursor: pointer;
160
160
  `;
161
161
  StyledIcon$6.defaultProps = { theme: EditableTheme };
162
162
  const positions = {
@@ -195,13 +195,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
195
195
  return (React.createElement(Wrapper$h, { id: `${id}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
196
196
  trigger || React.createElement(StyledIcon$6, { id: `${id}-icon`, path: mdiInformationOutline }),
197
197
  show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, id: `${id}-content` }, children && (React.createElement(Copy, { id: `${id}-copy`, type: 'small' }, children)))) : null));
198
- };
199
-
200
- const StyledButton = styled.button `
201
- height: ${props => (props.$small ? '30px' : '40px')};
202
- line-height: 1em;
203
- border-radius: ${props => (props.$small ? '15px' : '20px')};
204
- margin: ${props => props.$margin || '0px'};
198
+ };
199
+
200
+ const StyledButton = styled.button `
201
+ height: ${props => (props.$small ? '30px' : '40px')};
202
+ line-height: 1em;
203
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
204
+ margin: ${props => props.$margin || '0px'};
205
205
  padding: ${props => {
206
206
  if (props.$hasChildren) {
207
207
  if (props.$small) {
@@ -212,9 +212,9 @@ const StyledButton = styled.button `
212
212
  }
213
213
  }
214
214
  return '0px';
215
- }};
216
- outline: none;
217
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
215
+ }};
216
+ outline: none;
217
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
218
218
  width: ${props => {
219
219
  if (props.$hasChildren) {
220
220
  return 'auto';
@@ -223,55 +223,55 @@ const StyledButton = styled.button `
223
223
  return '30px';
224
224
  }
225
225
  return '40px';
226
- }};
227
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
228
- display: flex;
229
- align-items: center;
230
- justify-content: center;
231
- gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
232
- flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
233
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
234
- border-width: 1px;
235
- border-style: solid;
236
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
237
- box-sizing: border-box;
238
-
239
- &:active,
240
- &:focus,
241
- &:hover {
242
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
243
- }
244
- `;
245
- const Label$5 = styled.span `
246
- color: ${props => props.$content_color || '#fff'};
247
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
248
- font-family: ${FontStyles.DEFAULT};
249
- font-weight: 500;
250
- line-height: 1;
251
- `;
252
- const StyledIcon$5 = styled.span `
253
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
254
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
255
- display: flex;
256
- align-items: center;
257
- box-sizing: border-box;
258
- `;
259
- const Badge$1 = styled.span `
260
- width: ${props => (props.$small ? '20px' : '24px')};
261
- height: ${props => (props.$small ? '20px' : '24px')};
262
- line-height: 1;
263
- display: flex;
264
- align-items: center;
265
- justify-content: center;
266
- border-radius: 100%;
267
- background-color: ${props => props.$bg_color || '#fff'};
268
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
269
- font-size: ${props => (props.$small ? '10px' : '12px')};
270
- font-weight: 600;
271
- font-family: ${FontStyles.DEFAULT};
272
- letter-spacing: -1px;
273
- margin-left: ${props => (props.$small ? '5px' : '10px')};
274
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
226
+ }};
227
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: center;
231
+ gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
232
+ flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
233
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
234
+ border-width: 1px;
235
+ border-style: solid;
236
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
237
+ box-sizing: border-box;
238
+
239
+ &:active,
240
+ &:focus,
241
+ &:hover {
242
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
243
+ }
244
+ `;
245
+ const Label$5 = styled.span `
246
+ color: ${props => props.$content_color || '#fff'};
247
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
248
+ font-family: ${FontStyles.DEFAULT};
249
+ font-weight: 500;
250
+ line-height: 1;
251
+ `;
252
+ const StyledIcon$5 = styled.span `
253
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
254
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
255
+ display: flex;
256
+ align-items: center;
257
+ box-sizing: border-box;
258
+ `;
259
+ const Badge$1 = styled.span `
260
+ width: ${props => (props.$small ? '20px' : '24px')};
261
+ height: ${props => (props.$small ? '20px' : '24px')};
262
+ line-height: 1;
263
+ display: flex;
264
+ align-items: center;
265
+ justify-content: center;
266
+ border-radius: 100%;
267
+ background-color: ${props => props.$bg_color || '#fff'};
268
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
269
+ font-size: ${props => (props.$small ? '10px' : '12px')};
270
+ font-weight: 600;
271
+ font-family: ${FontStyles.DEFAULT};
272
+ letter-spacing: -1px;
273
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
274
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
275
275
  `;
276
276
  const Button = (_a) => {
277
277
  var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', iconPosition = 'after', toolTip, title = '' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title"]);
@@ -318,37 +318,37 @@ const Button = (_a) => {
318
318
  return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
319
319
  }
320
320
  return button_view;
321
- };
322
-
323
- const H1 = styled.h1 `
324
- color: ${Colors.BLACK.Hex};
325
- font-size: 30px;
326
- font-weight: ${props => (props.$bold ? '500' : '400')};
327
- line-height: 1.4em;
328
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
329
- margin: ${props => props.$margin || '0px'};
330
- padding: ${props => props.$padding || '0px'};
331
- box-sizing: border-box;
332
- `;
333
- const H2 = styled.h2 `
334
- color: ${Colors.BLACK.Hex};
335
- font-size: 24px;
336
- font-weight: ${props => (props.$bold ? '500' : '400')};
337
- line-height: 1.33em;
338
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
339
- margin: ${props => props.$margin || '0px'};
340
- padding: ${props => props.$padding || '0px'};
341
- box-sizing: border-box;
342
- `;
343
- const H3 = styled.h3 `
344
- color: ${Colors.BLACK.Hex};
345
- font-size: 18px;
346
- font-weight: ${props => (props.$bold ? '500' : '400')};
347
- line-height: 1.33em;
348
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
349
- margin: ${props => props.$margin || '0px'};
350
- padding: ${props => props.$padding || '0px'};
351
- box-sizing: border-box;
321
+ };
322
+
323
+ const H1 = styled.h1 `
324
+ color: ${Colors.BLACK.Hex};
325
+ font-size: 30px;
326
+ font-weight: ${props => (props.$bold ? '500' : '400')};
327
+ line-height: 1.4em;
328
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
329
+ margin: ${props => props.$margin || '0px'};
330
+ padding: ${props => props.$padding || '0px'};
331
+ box-sizing: border-box;
332
+ `;
333
+ const H2 = styled.h2 `
334
+ color: ${Colors.BLACK.Hex};
335
+ font-size: 24px;
336
+ font-weight: ${props => (props.$bold ? '500' : '400')};
337
+ line-height: 1.33em;
338
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
339
+ margin: ${props => props.$margin || '0px'};
340
+ padding: ${props => props.$padding || '0px'};
341
+ box-sizing: border-box;
342
+ `;
343
+ const H3 = styled.h3 `
344
+ color: ${Colors.BLACK.Hex};
345
+ font-size: 18px;
346
+ font-weight: ${props => (props.$bold ? '500' : '400')};
347
+ line-height: 1.33em;
348
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
349
+ margin: ${props => props.$margin || '0px'};
350
+ padding: ${props => props.$padding || '0px'};
351
+ box-sizing: border-box;
352
352
  `;
353
353
  const Heading = (_a) => {
354
354
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -368,29 +368,29 @@ const Heading = (_a) => {
368
368
  Heading.defaultProps = {
369
369
  bold: false,
370
370
  type: 'primary',
371
- };
372
-
373
- const Wrapper$g = styled.div `
374
- position: fixed;
375
- top: 0;
376
- right: 0;
377
- bottom: 0;
378
- left: 0;
379
- z-index: 9999;
380
- background: rgba(0, 0, 0, 0.8);
381
- display: flex;
382
- align-items: center;
383
- justify-content: center;
384
- box-sizing: border-box;
371
+ };
372
+
373
+ const Wrapper$g = styled.div `
374
+ position: fixed;
375
+ top: 0;
376
+ right: 0;
377
+ bottom: 0;
378
+ left: 0;
379
+ z-index: 9999;
380
+ background: rgba(0, 0, 0, 0.8);
381
+ display: flex;
382
+ align-items: center;
383
+ justify-content: center;
384
+ box-sizing: border-box;
385
385
  `;
386
386
  const Container$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
387
- const Buttons$1 = styled.div `
388
- display: flex;
389
- gap: 10px;
390
- align-items: center;
391
- justify-content: center;
392
- margin-top: 30px;
393
- box-sizing: border-box;
387
+ const Buttons$1 = styled.div `
388
+ display: flex;
389
+ gap: 10px;
390
+ align-items: center;
391
+ justify-content: center;
392
+ margin-top: 30px;
393
+ box-sizing: border-box;
394
394
  `;
395
395
  const ActionDialog = (_a) => {
396
396
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
@@ -403,29 +403,29 @@ const ActionDialog = (_a) => {
403
403
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
404
404
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
405
405
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)));
406
- };
407
-
408
- const Wrapper$f = styled.div `
409
- border: 1px solid #f1f1f1;
410
- border-radius: 4px;
411
- border-left-width: 4px;
412
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
413
- display: flex;
414
- align-items: flex-start;
415
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
416
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
417
- box-sizing: border-box;
418
- `;
419
- const StyledIcon$4 = styled(Icon) `
420
- flex-shrink: 0;
421
- `;
422
- const Action$1 = styled.div `
423
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
424
- font-size: ${FontSizes.DEFAULT};
425
- font-family: ${FontStyles.DEFAULT};
426
- font-weight: 500;
427
- cursor: pointer;
428
- margin-top: 6px;
406
+ };
407
+
408
+ const Wrapper$f = styled.div `
409
+ border: 1px solid #f1f1f1;
410
+ border-radius: 4px;
411
+ border-left-width: 4px;
412
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
413
+ display: flex;
414
+ align-items: flex-start;
415
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
416
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
417
+ box-sizing: border-box;
418
+ `;
419
+ const StyledIcon$4 = styled(Icon) `
420
+ flex-shrink: 0;
421
+ `;
422
+ const Action$1 = styled.div `
423
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
424
+ font-size: ${FontSizes.DEFAULT};
425
+ font-family: ${FontStyles.DEFAULT};
426
+ font-weight: 500;
427
+ cursor: pointer;
428
+ margin-top: 6px;
429
429
  `;
430
430
  Action$1.defaultProps = { theme: EditableTheme };
431
431
  const Alert = (_a) => {
@@ -456,8 +456,8 @@ const Alert = (_a) => {
456
456
  title && !small ? (React.createElement(Heading, { bold: true, id: `${id}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
457
457
  description ? (React.createElement(Copy, { id: `${id}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
458
458
  action && !small ? (React.createElement(Action$1, { id: `${id}-action`, onClick: action.onClick }, action.label)) : null)));
459
- };
460
-
459
+ };
460
+
461
461
  const colorMapping = {
462
462
  black: {
463
463
  fill_1: '#000000',
@@ -499,62 +499,62 @@ const Logo = (_a) => {
499
499
  React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1, id: `${id}-path-7` }),
500
500
  React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1, id: `${id}-path-8` })));
501
501
  }
502
- };
503
-
504
- const Container$3 = styled.header `
505
- width: 100%;
506
- display: flex;
507
- padding: 20px;
508
- box-sizing: border-box;
509
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
510
- background: '#fff';
511
- justify-content: space-between;
512
- `;
513
- const LogoWrapper = styled.div `
514
- display: flex;
515
- align-items: center;
516
- `;
517
- const Image = styled.img `
518
- height: 30px !important;
519
- width: auto !important;
520
- `;
521
- const Buttons = styled.div `
522
- display: flex;
523
- flex-direction: row;
524
- column-gap: 10px;
525
- flex-direction: reverse;
502
+ };
503
+
504
+ const Container$3 = styled.header `
505
+ width: 100%;
506
+ display: flex;
507
+ padding: 20px;
508
+ box-sizing: border-box;
509
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
510
+ background: '#fff';
511
+ justify-content: space-between;
512
+ `;
513
+ const LogoWrapper = styled.div `
514
+ display: flex;
515
+ align-items: center;
516
+ `;
517
+ const Image = styled.img `
518
+ height: 30px !important;
519
+ width: auto !important;
520
+ `;
521
+ const Buttons = styled.div `
522
+ display: flex;
523
+ flex-direction: row;
524
+ column-gap: 10px;
525
+ flex-direction: reverse;
526
526
  `;
527
527
  const AppHeader = ({ logoUrl, buttons = [] }) => {
528
528
  const id = generateUniqueId('app-header');
529
529
  return (React.createElement(Container$3, { id: `${id}-container` },
530
530
  React.createElement(LogoWrapper, { id: `${id}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { id: `${id}-logo`, src: logoUrl })) : (React.createElement(Logo, { height: '30px', id: `${id}-default-logo` }))),
531
531
  React.createElement(Buttons, { id: `${id}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { id: `${id}-button-${i}` })))))));
532
- };
533
-
534
- const Wrapper$e = styled.div `
535
- display: inline-block;
536
- border-radius: 4px;
537
- padding: 4px 6px;
538
- background: ${props => Colors[props.$color].Hex};
539
- color: #ffffff;
540
- box-sizing: border-box;
541
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
542
- `;
543
- const Content$2 = styled.div `
544
- display: flex;
545
- align-items: center;
546
- `;
547
- const Label$4 = styled.div `
548
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
549
- font-size: ${FontSizes.SMALL};
550
- font-weight: 500;
551
- font-family: ${FontStyles.DEFAULT};
552
- line-height: 1.2em;
553
- `;
554
- const Remove$1 = styled.div `
555
- margin-left: 10px;
556
- display: flex;
557
- align-items: center;
532
+ };
533
+
534
+ const Wrapper$e = styled.div `
535
+ display: inline-block;
536
+ border-radius: 4px;
537
+ padding: 4px 6px;
538
+ background: ${props => Colors[props.$color].Hex};
539
+ color: #ffffff;
540
+ box-sizing: border-box;
541
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
542
+ `;
543
+ const Content$2 = styled.div `
544
+ display: flex;
545
+ align-items: center;
546
+ `;
547
+ const Label$4 = styled.div `
548
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
549
+ font-size: ${FontSizes.SMALL};
550
+ font-weight: 500;
551
+ font-family: ${FontStyles.DEFAULT};
552
+ line-height: 1.2em;
553
+ `;
554
+ const Remove$1 = styled.div `
555
+ margin-left: 10px;
556
+ display: flex;
557
+ align-items: center;
558
558
  `;
559
559
  const Tag = (_a) => {
560
560
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -564,94 +564,94 @@ const Tag = (_a) => {
564
564
  React.createElement(Label$4, { "$color": color, id: `${id}-label` }, children),
565
565
  removable ? (React.createElement(Remove$1, { id: `${id}-remove` },
566
566
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', id: `${id}-icon`, path: mdiClose, size: '15px' }))) : null)));
567
- };
568
-
569
- const SidebarContainer = styled.div `
570
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
571
- display: flex;
572
- flex-direction: column;
573
- height: 100%;
574
- padding: 12px 0px;
575
- width: ${props => (props.$isOpen ? props.$width : '60px')};
576
- `;
577
- const MenuWrapper$1 = styled.button `
578
- display: flex;
579
- align-items: center;
580
- border: 0px;
581
- background-color: transparent;
582
- padding-left: 0px;
583
- border-left-width: 4px;
584
- border-left-style: solid;
585
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
586
- cursor: pointer;
587
- height: 40px;
588
-
589
- &:hover > div {
590
- color: ${props => props.$color.Hex};
591
- }
592
-
593
- &:hover > svg > path {
594
- fill: ${Colors.BLACK.Hex} !important;
595
- }
596
- `;
597
- const MenuIcon = styled(Icon) `
598
- width: 20px;
599
- height: 20px;
600
- margin: 0px 16px;
601
- flex-shrink: 0;
602
-
603
- > path {
604
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
605
- }
606
- `;
607
- const MenuLabel = styled.div `
608
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
609
- flex: 1;
610
- font-size: 12px;
611
- font-style: normal;
612
- font-weight: 600;
613
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
614
- line-height: 16px;
615
- padding: 12px 0px;
616
- letter-spacing: 1px;
617
- `;
618
- const SubMenu = styled.div `
619
- overflow-y: auto;
620
- padding-left: 44px;
621
- padding-right: 20px;
622
- padding-bottom: 10px;
623
- `;
624
- const SubMenuItem = styled.a `
625
- display: block;
626
- padding: 8px 12px;
627
- border-radius: 8px;
628
- font-size: 13px;
629
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
630
- line-height: 20px;
631
- text-decoration: none;
632
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
633
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
634
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
635
- cursor: pointer;
636
-
637
- &:hover {
638
- color: ${props => props.$color.Hex};
639
- font-weight: 500;
640
- }
641
- `;
642
- const Footer = styled.div `
643
- padding: 20px 14px 0px;
644
- display: flex;
645
- align-items: center;
646
- `;
647
- const FooterInfo = styled.div `
648
- display: flex;
649
- flex-direction: column;
650
- flex: 1;
651
- align-items: flex-start;
652
- `;
653
- const SidebarMenuContainer = styled.div `
654
- flex-grow: 1;
567
+ };
568
+
569
+ const SidebarContainer = styled.div `
570
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
571
+ display: flex;
572
+ flex-direction: column;
573
+ height: 100%;
574
+ padding: 12px 0px;
575
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
576
+ `;
577
+ const MenuWrapper$1 = styled.button `
578
+ display: flex;
579
+ align-items: center;
580
+ border: 0px;
581
+ background-color: transparent;
582
+ padding-left: 0px;
583
+ border-left-width: 4px;
584
+ border-left-style: solid;
585
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
586
+ cursor: pointer;
587
+ height: 40px;
588
+
589
+ &:hover > div {
590
+ color: ${props => props.$color.Hex};
591
+ }
592
+
593
+ &:hover > svg > path {
594
+ fill: ${Colors.BLACK.Hex} !important;
595
+ }
596
+ `;
597
+ const MenuIcon = styled(Icon) `
598
+ width: 20px;
599
+ height: 20px;
600
+ margin: 0px 16px;
601
+ flex-shrink: 0;
602
+
603
+ > path {
604
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
605
+ }
606
+ `;
607
+ const MenuLabel = styled.div `
608
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
609
+ flex: 1;
610
+ font-size: 12px;
611
+ font-style: normal;
612
+ font-weight: 600;
613
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
614
+ line-height: 16px;
615
+ padding: 12px 0px;
616
+ letter-spacing: 1px;
617
+ `;
618
+ const SubMenu = styled.div `
619
+ overflow-y: auto;
620
+ padding-left: 44px;
621
+ padding-right: 20px;
622
+ padding-bottom: 10px;
623
+ `;
624
+ const SubMenuItem = styled.a `
625
+ display: block;
626
+ padding: 8px 12px;
627
+ border-radius: 8px;
628
+ font-size: 13px;
629
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
630
+ line-height: 20px;
631
+ text-decoration: none;
632
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
633
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
634
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
635
+ cursor: pointer;
636
+
637
+ &:hover {
638
+ color: ${props => props.$color.Hex};
639
+ font-weight: 500;
640
+ }
641
+ `;
642
+ const Footer = styled.div `
643
+ padding: 20px 14px 0px;
644
+ display: flex;
645
+ align-items: center;
646
+ `;
647
+ const FooterInfo = styled.div `
648
+ display: flex;
649
+ flex-direction: column;
650
+ flex: 1;
651
+ align-items: flex-start;
652
+ `;
653
+ const SidebarMenuContainer = styled.div `
654
+ flex-grow: 1;
655
655
  `;
656
656
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
657
657
  const theme = useContext(ThemeContext) || EditableTheme;
@@ -680,75 +680,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
680
680
  e.preventDefault();
681
681
  toggleCollapse(!collapsed);
682
682
  }, small: true }))));
683
- };
684
-
685
- const Wrapper$d = styled.div `
686
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
687
- border-radius: 8px;
688
- box-sizing: border-box;
689
- display: flex;
690
- align-items: center;
691
- justify-content: space-between;
692
- padding: 16px 20px;
683
+ };
684
+
685
+ const Wrapper$d = styled.div `
686
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
687
+ border-radius: 8px;
688
+ box-sizing: border-box;
689
+ display: flex;
690
+ align-items: center;
691
+ justify-content: space-between;
692
+ padding: 16px 20px;
693
693
  `;
694
694
  Wrapper$d.defaultProps = { theme: EditableTheme };
695
- const Left = styled.div `
696
- box-sizing: border-box;
697
- display: flex;
698
- align-items: center;
699
- justify-content: space-between;
700
- flex-shrink: 0;
701
- `;
702
- const Info$1 = styled.div `
703
- box-sizing: border-box;
704
- display: flex;
705
- align-items: center;
706
- margin-right: 30px;
707
- `;
708
- const Selected = styled.span `
709
- font-size: 14px;
710
- font-weight: 400;
711
- font-family: ${FontStyles.DEFAULT};
712
- color: ${Colors.BLACK.Hex};
713
- line-height: 1;
714
- `;
715
- const Clear = styled.span `
716
- font-size: 14px;
717
- font-weight: 400;
718
- font-family: ${FontStyles.DEFAULT};
719
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
720
- line-height: 1;
721
- cursor: pointer;
722
- padding-left: 10px;
723
- margin-left: 10px;
724
- border-left: 1px solid #ccc;
695
+ const Left = styled.div `
696
+ box-sizing: border-box;
697
+ display: flex;
698
+ align-items: center;
699
+ justify-content: space-between;
700
+ flex-shrink: 0;
701
+ `;
702
+ const Info$1 = styled.div `
703
+ box-sizing: border-box;
704
+ display: flex;
705
+ align-items: center;
706
+ margin-right: 30px;
707
+ `;
708
+ const Selected = styled.span `
709
+ font-size: 14px;
710
+ font-weight: 400;
711
+ font-family: ${FontStyles.DEFAULT};
712
+ color: ${Colors.BLACK.Hex};
713
+ line-height: 1;
714
+ `;
715
+ const Clear = styled.span `
716
+ font-size: 14px;
717
+ font-weight: 400;
718
+ font-family: ${FontStyles.DEFAULT};
719
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
720
+ line-height: 1;
721
+ cursor: pointer;
722
+ padding-left: 10px;
723
+ margin-left: 10px;
724
+ border-left: 1px solid #ccc;
725
725
  `;
726
726
  Clear.defaultProps = { theme: EditableTheme };
727
- const Actions$1 = styled.div `
728
- box-sizing: border-box;
729
- display: flex;
730
- align-items: center;
731
- column-gap: 10px;
732
- `;
733
- const Error$1 = styled.div `
734
- box-sizing: border-box;
735
- display: flex;
736
- align-items: center;
737
- background: rgba(${Colors.RED.Rgb}, 0.1);
738
- border-radius: 4px;
739
- padding: 6px 8px;
740
- text-overflow: ellipsis;
741
- white-space: nowrap;
742
- overflow: hidden;
743
- margin-left: 30px;
744
- `;
745
- const ErrorMsg = styled.span `
746
- font-size: 14px;
747
- font-weight: 500;
748
- font-family: ${FontStyles.DEFAULT};
749
- line-height: 1em;
750
- color: ${Colors.RED.Hex};
751
- margin-left: 8px;
727
+ const Actions$1 = styled.div `
728
+ box-sizing: border-box;
729
+ display: flex;
730
+ align-items: center;
731
+ column-gap: 10px;
732
+ `;
733
+ const Error$1 = styled.div `
734
+ box-sizing: border-box;
735
+ display: flex;
736
+ align-items: center;
737
+ background: rgba(${Colors.RED.Rgb}, 0.1);
738
+ border-radius: 4px;
739
+ padding: 6px 8px;
740
+ text-overflow: ellipsis;
741
+ white-space: nowrap;
742
+ overflow: hidden;
743
+ margin-left: 30px;
744
+ `;
745
+ const ErrorMsg = styled.span `
746
+ font-size: 14px;
747
+ font-weight: 500;
748
+ font-family: ${FontStyles.DEFAULT};
749
+ line-height: 1em;
750
+ color: ${Colors.RED.Hex};
751
+ margin-left: 8px;
752
752
  `;
753
753
  const BulkActionBar = (_a) => {
754
754
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -764,48 +764,48 @@ const BulkActionBar = (_a) => {
764
764
  errorMsg ? (React.createElement(Error$1, { id: `${id}-error` },
765
765
  React.createElement(Icon, { color: Colors.RED.Hex, id: `${id}-error-icon`, path: mdiInformationOutline, size: '20px' }),
766
766
  React.createElement(ErrorMsg, { id: `${id}-error-msg` }, errorMsg))) : null));
767
- };
768
-
769
- const Wrapper$c = styled.div `
770
- background: #fff;
771
- border-radius: 8px;
772
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
773
- display: flex;
774
- flex-direction: column;
775
- gap: 4px;
776
- max-height: ${props => props.$maxHeight || '312px'};
777
- padding: 10px;
778
- width: 200px;
779
- `;
780
- const MenuItem = styled.div `
781
- align-items: center;
782
- border-radius: 8px;
783
- border: 1px solid transparent;
784
- display: flex;
785
- gap: 8px;
786
- height: 38px;
787
- padding: 8px;
788
- &:hover {
789
- background: rgba(1, 147, 215, 0.1);
790
- cursor: pointer;
791
-
792
- svg,
793
- path {
794
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
795
- }
796
- }
767
+ };
768
+
769
+ const Wrapper$c = styled.div `
770
+ background: #fff;
771
+ border-radius: 8px;
772
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
773
+ display: flex;
774
+ flex-direction: column;
775
+ gap: 4px;
776
+ max-height: ${props => props.$maxHeight || '312px'};
777
+ padding: 10px;
778
+ width: 200px;
779
+ `;
780
+ const MenuItem = styled.div `
781
+ align-items: center;
782
+ border-radius: 8px;
783
+ border: 1px solid transparent;
784
+ display: flex;
785
+ gap: 8px;
786
+ height: 38px;
787
+ padding: 8px;
788
+ &:hover {
789
+ background: rgba(1, 147, 215, 0.1);
790
+ cursor: pointer;
791
+
792
+ svg,
793
+ path {
794
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
795
+ }
796
+ }
797
797
  `;
798
798
  MenuItem.defaultProps = { theme: EditableTheme };
799
- const Title$1 = styled.span `
800
- font-family: Roboto;
801
- font-size: 14px;
802
- font-weight: 400;
803
- height: auto;
804
- letter-spacing: 0px;
805
- line-height: 22px;
806
- text-align: left;
807
- color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
808
- pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
799
+ const Title$1 = styled.span `
800
+ font-family: Roboto;
801
+ font-size: 14px;
802
+ font-weight: 400;
803
+ height: auto;
804
+ letter-spacing: 0px;
805
+ line-height: 22px;
806
+ text-align: left;
807
+ color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
808
+ pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
809
809
  `;
810
810
  Title$1.defaultProps = {
811
811
  disabled: false,
@@ -820,19 +820,19 @@ const MoreMenu = (_a) => {
820
820
  item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, id: `${itemId}-icon`, path: item.icon, size: '20px' })) : null,
821
821
  React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, id: `${itemId}-title` }, item.label)));
822
822
  })));
823
- };
824
-
825
- const MenuWrapper = styled.div `
826
- position: relative;
827
- display: inline-block;
828
- `;
829
- const StyledMoreMenu = styled(MoreMenu) `
830
- position: absolute;
831
- top: ${props => props.$top};
832
- left: ${props => props.$left};
833
- width: ${props => props.$menuWidth};
834
- max-height: ${props => props.maxHeight};
835
- z-index: 10;
823
+ };
824
+
825
+ const MenuWrapper = styled.div `
826
+ position: relative;
827
+ display: inline-block;
828
+ `;
829
+ const StyledMoreMenu = styled(MoreMenu) `
830
+ position: absolute;
831
+ top: ${props => props.$top};
832
+ left: ${props => props.$left};
833
+ width: ${props => props.$menuWidth};
834
+ max-height: ${props => props.maxHeight};
835
+ z-index: 10;
836
836
  `;
837
837
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, }) => {
838
838
  const [showMenu, toggleMenu] = useState(false);
@@ -907,85 +907,85 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
907
907
  return (React.createElement(MenuWrapper, { id: `${id}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
908
908
  React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, id: `${id}-button`, small: small }, label),
909
909
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, id: `${id}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
910
- };
911
-
912
- const Wrapper$b = styled.label `
913
- border-radius: 4px;
914
- padding: 4px 0px 4px 6px;
915
- margin-left: -6px;
916
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
917
- display: flex;
918
- align-items: center;
919
- font-size: ${FontSizes.DEFAULT};
920
- line-height: 1.6em;
921
- box-sizing: border-box;
922
- position: relative;
923
-
924
- &:focus-within {
925
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
926
- }
910
+ };
911
+
912
+ const Wrapper$b = styled.label `
913
+ border-radius: 4px;
914
+ padding: 4px 0px 4px 6px;
915
+ margin-left: -6px;
916
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
917
+ display: flex;
918
+ align-items: center;
919
+ font-size: ${FontSizes.DEFAULT};
920
+ line-height: 1.6em;
921
+ box-sizing: border-box;
922
+ position: relative;
923
+
924
+ &:focus-within {
925
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
926
+ }
927
927
  `;
928
928
  Wrapper$b.defaultProps = { theme: EditableTheme };
929
- const Input$2 = styled.input `
930
- font-size: 20px;
931
- margin: 0px;
932
- line-height: 1.1em;
933
- box-sizing: border-box;
934
- position: absolute;
935
- opacity: 0;
936
- cursor: pointer;
937
- height: 0;
938
- width: 0;
939
- &:checked + span {
940
- background-color: ${Colors.PRIMARY.Hex};
941
- border-color: ${Colors.PRIMARY.Hex};
942
- }
943
- &:checked:disabled + span {
944
- background-color: ${Colors.MEDIUM_GRAY.Hex};
945
- border-color: ${Colors.MEDIUM_GRAY.Hex};
946
- }
947
- &:disabled + span {
948
- background-color: #d3d3d3;
949
- border-color: #d3d3d3;
950
- }
951
- &:checked + span:after {
952
- display: block;
953
- }
954
- `;
955
- const Check$1 = styled.span `
956
- height: 17px;
957
- width: 17px;
958
- min-width: 17px;
959
- background-color: #fff;
960
- border-width: 2px;
961
- border-style: solid;
962
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
963
- box-sizing: border-box;
964
- position: relative;
965
- &:after {
966
- content: '';
967
- position: absolute;
968
- left: 3px;
969
- top: 0px;
970
- width: 7px;
971
- height: 12px;
972
- border: solid white;
973
- border-width: 0 3px 3px 0;
974
- -webkit-transform: rotate(45deg);
975
- -ms-transform: rotate(45deg);
976
- transform: rotate(45deg);
977
- box-sizing: border-box;
978
- display: none;
979
- }
980
- `;
981
- const Label$3 = styled.span `
982
- font-family: ${FontStyles.DEFAULT};
983
- font-size: ${FontSizes.DEFAULT};
984
- font-weight: 400;
985
- line-height: 1.6em;
986
- color: ${props => props.color || Colors.BLACK.Hex};
987
- margin-left: 6px;
988
- box-sizing: border-box;
929
+ const Input$2 = styled.input `
930
+ font-size: 20px;
931
+ margin: 0px;
932
+ line-height: 1.1em;
933
+ box-sizing: border-box;
934
+ position: absolute;
935
+ opacity: 0;
936
+ cursor: pointer;
937
+ height: 0;
938
+ width: 0;
939
+ &:checked + span {
940
+ background-color: ${Colors.PRIMARY.Hex};
941
+ border-color: ${Colors.PRIMARY.Hex};
942
+ }
943
+ &:checked:disabled + span {
944
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
945
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
946
+ }
947
+ &:disabled + span {
948
+ background-color: #d3d3d3;
949
+ border-color: #d3d3d3;
950
+ }
951
+ &:checked + span:after {
952
+ display: block;
953
+ }
954
+ `;
955
+ const Check$1 = styled.span `
956
+ height: 17px;
957
+ width: 17px;
958
+ min-width: 17px;
959
+ background-color: #fff;
960
+ border-width: 2px;
961
+ border-style: solid;
962
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
963
+ box-sizing: border-box;
964
+ position: relative;
965
+ &:after {
966
+ content: '';
967
+ position: absolute;
968
+ left: 3px;
969
+ top: 0px;
970
+ width: 7px;
971
+ height: 12px;
972
+ border: solid white;
973
+ border-width: 0 3px 3px 0;
974
+ -webkit-transform: rotate(45deg);
975
+ -ms-transform: rotate(45deg);
976
+ transform: rotate(45deg);
977
+ box-sizing: border-box;
978
+ display: none;
979
+ }
980
+ `;
981
+ const Label$3 = styled.span `
982
+ font-family: ${FontStyles.DEFAULT};
983
+ font-size: ${FontSizes.DEFAULT};
984
+ font-weight: 400;
985
+ line-height: 1.6em;
986
+ color: ${props => props.color || Colors.BLACK.Hex};
987
+ margin-left: 6px;
988
+ box-sizing: border-box;
989
989
  `;
990
990
  const Checkbox = (_a) => {
991
991
  var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex"]);
@@ -996,16 +996,16 @@ const Checkbox = (_a) => {
996
996
  children ? (React.createElement(Label$3, { color: color, id: `${id}-label` },
997
997
  children,
998
998
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
999
- };
1000
-
1001
- const SelectAll = styled.div `
1002
- padding: 8px 12px;
1003
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1004
- box-sizing: border-box;
999
+ };
1000
+
1001
+ const SelectAll = styled.div `
1002
+ padding: 8px 12px;
1003
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1004
+ box-sizing: border-box;
1005
1005
  `;
1006
- const Options$1 = styled.div `
1007
- padding: 12px;
1008
- box-sizing: border-box;
1006
+ const Options$1 = styled.div `
1007
+ padding: 12px;
1008
+ box-sizing: border-box;
1009
1009
  `;
1010
1010
  const Checklist = (_a) => {
1011
1011
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -1044,70 +1044,70 @@ const Checklist = (_a) => {
1044
1044
  const optionId = generateUniqueId('option');
1045
1045
  return (React.createElement(Checkbox, Object.assign({ id: `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
1046
1046
  }))));
1047
- };
1048
-
1049
- const Wrapper$a = styled.div `
1050
- border-radius: 4px;
1051
- height: 40px;
1052
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1053
- position: relative;
1054
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1055
- border-width: 1px;
1056
- border-style: solid;
1057
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1058
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1059
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1060
- box-sizing: border-box;
1061
- padding: 10px 0px;
1062
- display: flex;
1063
- align-items: center;
1064
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1065
-
1066
- &:focus-within {
1067
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1068
- }
1047
+ };
1048
+
1049
+ const Wrapper$a = styled.div `
1050
+ border-radius: 4px;
1051
+ height: 40px;
1052
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1053
+ position: relative;
1054
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1055
+ border-width: 1px;
1056
+ border-style: solid;
1057
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1058
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1059
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1060
+ box-sizing: border-box;
1061
+ padding: 10px 0px;
1062
+ display: flex;
1063
+ align-items: center;
1064
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1065
+
1066
+ &:focus-within {
1067
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1068
+ }
1069
1069
  `;
1070
1070
  Wrapper$a.defaultProps = { theme: EditableTheme };
1071
- const Trigger$1 = styled.select `
1072
- appearance: none;
1073
- box-shadow: none;
1074
- outline: none;
1075
- border: none;
1076
- color: ${Colors.BLACK.Hex};
1077
- font-size: ${FontSizes.DEFAULT};
1078
- font-weight: 400;
1079
- font-family: ${FontStyles.DEFAULT};
1080
- line-height: 3.1em;
1081
- background-color: transparent;
1082
- background-image: none;
1083
- width: 100%;
1084
- box-sizing: border-box;
1085
- padding: 0px 30px 0px 10px;
1086
- box-sizing: border-box;
1087
- position: relative;
1088
- z-index: 2;
1089
- `;
1090
- const IconWrapper$2 = styled(Icon) `
1091
- position: absolute;
1092
- right: 9px;
1093
- z-index: 1;
1094
- `;
1095
- const SearchInput$1 = styled.input `
1096
- position: absolute;
1097
- left: 2px;
1098
- top: 2px;
1099
- z-index: 999;
1100
- width: 90%;
1101
- height: 30px;
1102
- border: none;
1103
- outline: none;
1104
- color: ${Colors.BLACK.Hex};
1105
- font-family: ${FontStyles.DEFAULT};
1106
- font-size: ${FontSizes.DEFAULT};
1107
- font-weight: 400;
1108
- line-height: 2.9em;
1109
- overflow: hidden;
1110
- white-space: nowrap;
1071
+ const Trigger$1 = styled.select `
1072
+ appearance: none;
1073
+ box-shadow: none;
1074
+ outline: none;
1075
+ border: none;
1076
+ color: ${Colors.BLACK.Hex};
1077
+ font-size: ${FontSizes.DEFAULT};
1078
+ font-weight: 400;
1079
+ font-family: ${FontStyles.DEFAULT};
1080
+ line-height: 3.1em;
1081
+ background-color: transparent;
1082
+ background-image: none;
1083
+ width: 100%;
1084
+ box-sizing: border-box;
1085
+ padding: 0px 30px 0px 10px;
1086
+ box-sizing: border-box;
1087
+ position: relative;
1088
+ z-index: 2;
1089
+ `;
1090
+ const IconWrapper$2 = styled(Icon) `
1091
+ position: absolute;
1092
+ right: 9px;
1093
+ z-index: 1;
1094
+ `;
1095
+ const SearchInput$1 = styled.input `
1096
+ position: absolute;
1097
+ left: 2px;
1098
+ top: 2px;
1099
+ z-index: 999;
1100
+ width: 90%;
1101
+ height: 30px;
1102
+ border: none;
1103
+ outline: none;
1104
+ color: ${Colors.BLACK.Hex};
1105
+ font-family: ${FontStyles.DEFAULT};
1106
+ font-size: ${FontSizes.DEFAULT};
1107
+ font-weight: 400;
1108
+ line-height: 2.9em;
1109
+ overflow: hidden;
1110
+ white-space: nowrap;
1111
1111
  `;
1112
1112
  const Select = (_a) => {
1113
1113
  var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex"]);
@@ -1142,15 +1142,15 @@ const Select = (_a) => {
1142
1142
  filteredOptions &&
1143
1143
  filteredOptions.map((option, i) => (React.createElement("option", { id: `${id}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
1144
1144
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: mdiChevronDown, size: '22px' })));
1145
- };
1146
-
1147
- const DatePickerWrapper = styled.div `
1148
- display: flex;
1149
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1145
+ };
1146
+
1147
+ const DatePickerWrapper = styled.div `
1148
+ display: flex;
1149
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1150
1150
  `;
1151
- const Middle = styled.div `
1152
- margin: 0px -1px;
1153
- flex-grow: 1;
1151
+ const Middle = styled.div `
1152
+ margin: 0px -1px;
1153
+ flex-grow: 1;
1154
1154
  `;
1155
1155
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date,
1156
1156
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1232,66 +1232,66 @@ onChange = () => { }, style, }) => {
1232
1232
  React.createElement(Middle, { id: `${id}-middle` },
1233
1233
  React.createElement(Select, { id: `${id}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1234
1234
  React.createElement(Select, { id: `${id}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1235
- };
1236
-
1237
- const Scrim$1 = styled.div `
1238
- position: ${({ $position }) => $position};
1239
- top: 0;
1240
- right: 0;
1241
- bottom: 0;
1242
- left: 0;
1243
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1244
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1245
- `;
1246
- const Container$2 = styled.div `
1247
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1248
- min-width: 400px;
1249
- width: ${({ $width }) => $width || '400px'};
1250
- overflow: hidden;
1251
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1252
- outline: none;
1253
- border: none;
1254
- position: ${({ $position }) => $position};
1255
- top: 0;
1256
- right: 0;
1257
- bottom: 0;
1258
- padding: 0px;
1259
- display: flex;
1260
- flex-direction: column;
1261
- box-sizing: border-box;
1262
- background: #fff;
1263
- `;
1264
- const Header$2 = styled.div `
1265
- padding: 30px 20px;
1266
- display: flex;
1267
- align-items: flex-start;
1268
- box-sizing: border-box;
1269
- flex-shrink: 0;
1270
- background: #fff;
1271
- `;
1272
- const Close$1 = styled.div `
1273
- margin-left: auto;
1274
- display: flex;
1275
- align-items: center;
1276
- padding-left: 20px;
1277
- cursor: pointer;
1278
- `;
1279
- const ContentWrapper$1 = styled.div `
1280
- overflow-x: hidden;
1281
- overflow-y: auto;
1282
- box-sizing: border-box;
1283
- flex: 1;
1284
- background: #fff;
1285
- `;
1286
- const ButtonBar$1 = styled.div `
1287
- padding: 20px;
1288
- display: flex;
1289
- align-items: center;
1290
- justify-content: flex-end;
1291
- box-sizing: border-box;
1292
- gap: 10px;
1293
- flex-shrink: 0;
1294
- background: #fff;
1235
+ };
1236
+
1237
+ const Scrim$1 = styled.div `
1238
+ position: ${({ $position }) => $position};
1239
+ top: 0;
1240
+ right: 0;
1241
+ bottom: 0;
1242
+ left: 0;
1243
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1244
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1245
+ `;
1246
+ const Container$2 = styled.div `
1247
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1248
+ min-width: 400px;
1249
+ width: ${({ $width }) => $width || '400px'};
1250
+ overflow: hidden;
1251
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1252
+ outline: none;
1253
+ border: none;
1254
+ position: ${({ $position }) => $position};
1255
+ top: 0;
1256
+ right: 0;
1257
+ bottom: 0;
1258
+ padding: 0px;
1259
+ display: flex;
1260
+ flex-direction: column;
1261
+ box-sizing: border-box;
1262
+ background: #fff;
1263
+ `;
1264
+ const Header$2 = styled.div `
1265
+ padding: 30px 20px;
1266
+ display: flex;
1267
+ align-items: flex-start;
1268
+ box-sizing: border-box;
1269
+ flex-shrink: 0;
1270
+ background: #fff;
1271
+ `;
1272
+ const Close$1 = styled.div `
1273
+ margin-left: auto;
1274
+ display: flex;
1275
+ align-items: center;
1276
+ padding-left: 20px;
1277
+ cursor: pointer;
1278
+ `;
1279
+ const ContentWrapper$1 = styled.div `
1280
+ overflow-x: hidden;
1281
+ overflow-y: auto;
1282
+ box-sizing: border-box;
1283
+ flex: 1;
1284
+ background: #fff;
1285
+ `;
1286
+ const ButtonBar$1 = styled.div `
1287
+ padding: 20px;
1288
+ display: flex;
1289
+ align-items: center;
1290
+ justify-content: flex-end;
1291
+ box-sizing: border-box;
1292
+ gap: 10px;
1293
+ flex-shrink: 0;
1294
+ background: #fff;
1295
1295
  `;
1296
1296
  const Drawer = (_a) => {
1297
1297
  var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width"]);
@@ -1320,55 +1320,55 @@ const Drawer = (_a) => {
1320
1320
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
1321
1321
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null),
1322
1322
  scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${id}-scrim`, onClick: onClose })) : null));
1323
- };
1324
-
1323
+ };
1324
+
1325
1325
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1326
- const LabelRow = styled.div `
1327
- display: flex;
1328
- align-items: center;
1329
- justify-content: space-between;
1330
- margin: 0 0 4px 0;
1331
- box-sizing: border-box;
1332
- `;
1333
- const Label$2 = styled.label `
1334
- font-size: ${FontSizes.DEFAULT};
1335
- font-weight: 500;
1336
- line-height: 1.3em;
1337
- font-family: ${FontStyles.DEFAULT};
1338
- color: ${Colors.BLACK.Hex};
1339
- display: flex;
1340
- align-items: center;
1341
- `;
1342
- const Required = styled.span `
1343
- color: ${Colors.RED.Hex};
1344
- margin-left: 4px;
1345
- `;
1346
- const Action = styled.span `
1347
- font-size: ${FontSizes.DEFAULT};
1348
- font-weight: 500;
1349
- line-height: 1em;
1350
- font-family: ${FontStyles.DEFAULT};
1351
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1352
- cursor: pointer;
1326
+ const LabelRow = styled.div `
1327
+ display: flex;
1328
+ align-items: center;
1329
+ justify-content: space-between;
1330
+ margin: 0 0 4px 0;
1331
+ box-sizing: border-box;
1332
+ `;
1333
+ const Label$2 = styled.label `
1334
+ font-size: ${FontSizes.DEFAULT};
1335
+ font-weight: 500;
1336
+ line-height: 1.3em;
1337
+ font-family: ${FontStyles.DEFAULT};
1338
+ color: ${Colors.BLACK.Hex};
1339
+ display: flex;
1340
+ align-items: center;
1341
+ `;
1342
+ const Required = styled.span `
1343
+ color: ${Colors.RED.Hex};
1344
+ margin-left: 4px;
1345
+ `;
1346
+ const Action = styled.span `
1347
+ font-size: ${FontSizes.DEFAULT};
1348
+ font-weight: 500;
1349
+ line-height: 1em;
1350
+ font-family: ${FontStyles.DEFAULT};
1351
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1352
+ cursor: pointer;
1353
1353
  `;
1354
1354
  Action.defaultProps = { theme: EditableTheme };
1355
- const Description = styled.div `
1356
- font-size: ${FontSizes.SMALL};
1357
- font-weight: 400;
1358
- line-height: 1.3em;
1359
- font-family: ${FontStyles.DEFAULT};
1360
- color: ${Colors.BLACK.Hex};
1361
- margin: 0 0 8px 0;
1362
- box-sizing: border-box;
1363
- `;
1364
- const Validation = styled.div `
1365
- font-size: ${FontSizes.SMALL};
1366
- font-weight: 400;
1367
- line-height: 1.3em;
1368
- font-family: ${FontStyles.DEFAULT};
1369
- color: ${Colors.RED.Hex};
1370
- margin: 4px 0 0 0;
1371
- box-sizing: border-box;
1355
+ const Description = styled.div `
1356
+ font-size: ${FontSizes.SMALL};
1357
+ font-weight: 400;
1358
+ line-height: 1.3em;
1359
+ font-family: ${FontStyles.DEFAULT};
1360
+ color: ${Colors.BLACK.Hex};
1361
+ margin: 0 0 8px 0;
1362
+ box-sizing: border-box;
1363
+ `;
1364
+ const Validation = styled.div `
1365
+ font-size: ${FontSizes.SMALL};
1366
+ font-weight: 400;
1367
+ line-height: 1.3em;
1368
+ font-family: ${FontStyles.DEFAULT};
1369
+ color: ${Colors.RED.Hex};
1370
+ margin: 4px 0 0 0;
1371
+ box-sizing: border-box;
1372
1372
  `;
1373
1373
  const Field = (_a) => {
1374
1374
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1383,114 +1383,114 @@ const Field = (_a) => {
1383
1383
  description ? React.createElement(Description, { id: `${id}-description` }, description) : null,
1384
1384
  React.createElement("div", { id: `${id}-children` }, children),
1385
1385
  validationText ? React.createElement(Validation, { id: `${id}-validation` }, validationText) : null));
1386
- };
1387
-
1388
- const Wrapper$8 = styled.fieldset `
1389
- margin-inline-start: 0px;
1390
- margin-inline-end: 0px;
1391
- padding-block-start: 0px;
1392
- padding-inline-start: 0px;
1393
- padding-inline-end: 0px;
1394
- padding-block-end: 0px;
1395
- min-inline-size: min-content;
1396
- border-width: 0px;
1397
- border-style: none;
1398
- border-color: transparent;
1399
- border-image: none;
1400
- `;
1401
- const Label$1 = styled.legend `
1402
- padding-inline-start: 0px;
1403
- padding-inline-end: 0px;
1404
-
1405
- color: ${Colors.BLACK.Hex};
1406
- font-family: ${FontStyles.DEFAULT};
1407
- font-size: ${FontSizes.DEFAULT};
1408
- font-weight: 500;
1409
- line-height: 22px;
1410
- margin-bottom: 6px;
1411
- `;
1412
- const Content$1 = styled.div `
1413
- padding: 20px;
1414
- border-radius: 8px;
1415
- background: #fcfcfc;
1386
+ };
1387
+
1388
+ const Wrapper$8 = styled.fieldset `
1389
+ margin-inline-start: 0px;
1390
+ margin-inline-end: 0px;
1391
+ padding-block-start: 0px;
1392
+ padding-inline-start: 0px;
1393
+ padding-inline-end: 0px;
1394
+ padding-block-end: 0px;
1395
+ min-inline-size: min-content;
1396
+ border-width: 0px;
1397
+ border-style: none;
1398
+ border-color: transparent;
1399
+ border-image: none;
1400
+ `;
1401
+ const Label$1 = styled.legend `
1402
+ padding-inline-start: 0px;
1403
+ padding-inline-end: 0px;
1404
+
1405
+ color: ${Colors.BLACK.Hex};
1406
+ font-family: ${FontStyles.DEFAULT};
1407
+ font-size: ${FontSizes.DEFAULT};
1408
+ font-weight: 500;
1409
+ line-height: 22px;
1410
+ margin-bottom: 6px;
1411
+ `;
1412
+ const Content$1 = styled.div `
1413
+ padding: 20px;
1414
+ border-radius: 8px;
1415
+ background: #fcfcfc;
1416
1416
  `;
1417
1417
  const FieldGroup = ({ children, label }) => {
1418
1418
  const id = generateUniqueId('field-group');
1419
1419
  return (React.createElement(Wrapper$8, { id: `${id}-wrapper` },
1420
1420
  React.createElement(Label$1, { id: `${id}-label` }, label),
1421
1421
  React.createElement(Content$1, { id: `${id}-content` }, children)));
1422
- };
1423
-
1424
- const Dropzone = styled.div `
1425
- border-radius: 8px;
1426
- border-width: 1px;
1427
- border-style: dashed;
1428
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1429
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1430
- cursor: copy;
1422
+ };
1423
+
1424
+ const Dropzone = styled.div `
1425
+ border-radius: 8px;
1426
+ border-width: 1px;
1427
+ border-style: dashed;
1428
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1429
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1430
+ cursor: copy;
1431
1431
  `;
1432
1432
  Dropzone.defaultProps = { theme: EditableTheme };
1433
- const IconWrapper$1 = styled.div `
1434
- width: 80px;
1435
- height: 80px;
1436
- border-radius: 40px;
1437
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1438
- display: flex;
1439
- align-items: center;
1440
- justify-content: center;
1441
- `;
1442
- const StyledIcon$3 = styled(Icon) `
1443
- width: 40px !important;
1444
- height: 40px !important;
1445
-
1446
- > path {
1447
- fill: ${Colors.GRAY.Hex} !important;
1448
- }
1449
- `;
1450
- const ClickZone = styled.div `
1451
- margin: 40px 20px;
1452
- display: flex;
1453
- flex-direction: column;
1454
- align-items: center;
1455
- gap: 16px;
1456
- `;
1457
- const Content = styled.div `
1458
- display: flex;
1459
- flex-direction: column;
1460
- align-items: center;
1461
- z-index: 99999;
1462
- gap: 2px;
1463
- `;
1464
- const Files = styled.div `
1465
- display: flex;
1466
- flex-direction: column;
1467
- align-self: stretch;
1468
- gap: 10px;
1469
- margin: 20px;
1470
- `;
1471
- const MessageDiv = styled.div `
1472
- display: flex;
1473
- align-items: center;
1474
- justify-content: center;
1475
- `;
1476
- const File = styled.div `
1477
- display: flex;
1478
- padding: 10px;
1479
- align-items: center;
1480
- justify-content: space-between;
1481
- gap: 10px;
1482
- border-radius: 4px;
1483
- border: 1px solid #cccccc;
1484
- background: #ffffff;
1485
- `;
1486
- const Remove = styled(Icon) `
1487
- width: 24px;
1488
- height: 24px;
1489
- cursor: pointer;
1490
-
1491
- > path {
1492
- fill: ${Colors.RED.Hex} !important;
1493
- }
1433
+ const IconWrapper$1 = styled.div `
1434
+ width: 80px;
1435
+ height: 80px;
1436
+ border-radius: 40px;
1437
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1438
+ display: flex;
1439
+ align-items: center;
1440
+ justify-content: center;
1441
+ `;
1442
+ const StyledIcon$3 = styled(Icon) `
1443
+ width: 40px !important;
1444
+ height: 40px !important;
1445
+
1446
+ > path {
1447
+ fill: ${Colors.GRAY.Hex} !important;
1448
+ }
1449
+ `;
1450
+ const ClickZone = styled.div `
1451
+ margin: 40px 20px;
1452
+ display: flex;
1453
+ flex-direction: column;
1454
+ align-items: center;
1455
+ gap: 16px;
1456
+ `;
1457
+ const Content = styled.div `
1458
+ display: flex;
1459
+ flex-direction: column;
1460
+ align-items: center;
1461
+ z-index: 99999;
1462
+ gap: 2px;
1463
+ `;
1464
+ const Files = styled.div `
1465
+ display: flex;
1466
+ flex-direction: column;
1467
+ align-self: stretch;
1468
+ gap: 10px;
1469
+ margin: 20px;
1470
+ `;
1471
+ const MessageDiv = styled.div `
1472
+ display: flex;
1473
+ align-items: center;
1474
+ justify-content: center;
1475
+ `;
1476
+ const File = styled.div `
1477
+ display: flex;
1478
+ padding: 10px;
1479
+ align-items: center;
1480
+ justify-content: space-between;
1481
+ gap: 10px;
1482
+ border-radius: 4px;
1483
+ border: 1px solid #cccccc;
1484
+ background: #ffffff;
1485
+ `;
1486
+ const Remove = styled(Icon) `
1487
+ width: 24px;
1488
+ height: 24px;
1489
+ cursor: pointer;
1490
+
1491
+ > path {
1492
+ fill: ${Colors.RED.Hex} !important;
1493
+ }
1494
1494
  `;
1495
1495
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
1496
1496
  const inputRef = useRef(null);
@@ -1610,8 +1610,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1610
1610
  React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${id}-message` }, message),
1611
1611
  tooltipInfo && (React.createElement("span", { id: `${id}-tooltip` },
1612
1612
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1613
- };
1614
-
1613
+ };
1614
+
1615
1615
  const getAgesFromDob = (dob) => {
1616
1616
  let calculated_current_age = null;
1617
1617
  let calculated_nearest_age = null;
@@ -1684,149 +1684,149 @@ const formatAsSsn = (number) => {
1684
1684
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1685
1685
  }
1686
1686
  return formatted_value;
1687
- };
1688
-
1689
- const StyledInput = styled.input `
1690
- border: none !important;
1691
- background: none !important;
1692
- font-size: ${FontSizes.DEFAULT};
1693
- font-weight: 400;
1694
- font-family: ${FontStyles.DEFAULT};
1695
- line-height: 1.28em;
1687
+ };
1688
+
1689
+ const StyledInput = styled.input `
1690
+ border: none !important;
1691
+ background: none !important;
1692
+ font-size: ${FontSizes.DEFAULT};
1693
+ font-weight: 400;
1694
+ font-family: ${FontStyles.DEFAULT};
1695
+ line-height: 1.28em;
1696
1696
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1697
1697
  ? Colors.RED.Hex
1698
- : Colors.BLACK.Hex};
1699
- position: relative;
1700
- height: ${props => props.$height || 'auto'};
1701
- padding: 10px;
1702
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1703
- box-shadow: none;
1704
- outline: none;
1705
- margin: 0px;
1706
- text-indent: 0px;
1707
- --webkit-appearance: none;
1708
- box-sizing: border-box;
1709
- display: block;
1710
- width: 100%;
1711
- `;
1712
- const StyledTextArea = styled.textarea `
1713
- border: none !important;
1714
- background: none !important;
1715
- overflow-y: scroll !important;
1716
- font-size: 14px;
1717
- font-weight: 400;
1718
- height: ${props => props.$height || 'auto'};
1719
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1720
- line-height: 1.28em;
1698
+ : Colors.BLACK.Hex};
1699
+ position: relative;
1700
+ height: ${props => props.$height || 'auto'};
1701
+ padding: 10px;
1702
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1703
+ box-shadow: none;
1704
+ outline: none;
1705
+ margin: 0px;
1706
+ text-indent: 0px;
1707
+ --webkit-appearance: none;
1708
+ box-sizing: border-box;
1709
+ display: block;
1710
+ width: 100%;
1711
+ `;
1712
+ const StyledTextArea = styled.textarea `
1713
+ border: none !important;
1714
+ background: none !important;
1715
+ overflow-y: scroll !important;
1716
+ font-size: 14px;
1717
+ font-weight: 400;
1718
+ height: ${props => props.$height || 'auto'};
1719
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1720
+ line-height: 1.28em;
1721
1721
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1722
1722
  ? Colors.RED.Hex
1723
- : Colors.BLACK.Hex};
1724
- position: relative;
1725
- padding: 10px;
1726
- opacity: 1;
1727
- box-shadow: none;
1728
- outline: none;
1729
- margin: 0px;
1730
- text-indent: 0px;
1731
- --webkit-appearance: none;
1732
- overflow-wrap: break-word;
1733
- box-sizing: border-box;
1734
- display: block;
1735
- width: 100%;
1723
+ : Colors.BLACK.Hex};
1724
+ position: relative;
1725
+ padding: 10px;
1726
+ opacity: 1;
1727
+ box-shadow: none;
1728
+ outline: none;
1729
+ margin: 0px;
1730
+ text-indent: 0px;
1731
+ --webkit-appearance: none;
1732
+ overflow-wrap: break-word;
1733
+ box-sizing: border-box;
1734
+ display: block;
1735
+ width: 100%;
1736
1736
  ${({ $readOnly }) => $readOnly &&
1737
- `
1738
- background-color: #f0f0f0;
1739
- color: #999999;
1740
- overflow-y: scroll;
1741
- `}
1742
- `;
1743
- const StyledSuffix = styled.div `
1744
- box-sizing: border-box;
1745
- border-radius: 0px 4px 4px 0px;
1746
- display: flex;
1747
- justify-content: center;
1748
- align-items: center;
1749
- padding: 10px;
1750
- height: auto;
1751
- background: #f5f5f5;
1752
- border-width: 0px 0px 0px 1px;
1753
- border-style: solid;
1754
- border-color: #cccccc;
1755
- font-family: ${FontStyles.DEFAULT};
1756
- font-style: normal;
1757
- font-weight: 400;
1758
- font-size: ${FontSizes.DEFAULT};
1759
- color: ${Colors.BLACK.Hex};
1760
- `;
1761
- const StyledWrapper = styled.div `
1762
- display: flex;
1763
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1764
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1765
- position: relative;
1766
- border-width: 1px;
1767
- border-style: solid;
1768
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1769
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1770
-
1771
- &:focus-within {
1772
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1773
- }
1737
+ `
1738
+ background-color: #f0f0f0;
1739
+ color: #999999;
1740
+ overflow-y: scroll;
1741
+ `}
1742
+ `;
1743
+ const StyledSuffix = styled.div `
1744
+ box-sizing: border-box;
1745
+ border-radius: 0px 4px 4px 0px;
1746
+ display: flex;
1747
+ justify-content: center;
1748
+ align-items: center;
1749
+ padding: 10px;
1750
+ height: auto;
1751
+ background: #f5f5f5;
1752
+ border-width: 0px 0px 0px 1px;
1753
+ border-style: solid;
1754
+ border-color: #cccccc;
1755
+ font-family: ${FontStyles.DEFAULT};
1756
+ font-style: normal;
1757
+ font-weight: 400;
1758
+ font-size: ${FontSizes.DEFAULT};
1759
+ color: ${Colors.BLACK.Hex};
1760
+ `;
1761
+ const StyledWrapper = styled.div `
1762
+ display: flex;
1763
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1764
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1765
+ position: relative;
1766
+ border-width: 1px;
1767
+ border-style: solid;
1768
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1769
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1770
+
1771
+ &:focus-within {
1772
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1773
+ }
1774
1774
  `;
1775
1775
  StyledWrapper.defaultProps = { theme: EditableTheme };
1776
- const SuggestedValues = styled.div `
1777
- background: #fff;
1778
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1779
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1780
- border-radius: 0px 0px 4px 4px;
1781
- border-style: solid;
1782
- border-top: none;
1783
- border-width: 1px;
1784
- left: -1px;
1785
- position: absolute;
1786
- right: -1px;
1787
- top: 39px;
1788
- z-index: 9999;
1789
- max-height: 220px;
1790
- overflow: auto;
1776
+ const SuggestedValues = styled.div `
1777
+ background: #fff;
1778
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1779
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1780
+ border-radius: 0px 0px 4px 4px;
1781
+ border-style: solid;
1782
+ border-top: none;
1783
+ border-width: 1px;
1784
+ left: -1px;
1785
+ position: absolute;
1786
+ right: -1px;
1787
+ top: 39px;
1788
+ z-index: 9999;
1789
+ max-height: 220px;
1790
+ overflow: auto;
1791
1791
  `;
1792
1792
  SuggestedValues.defaultProps = { theme: EditableTheme };
1793
- const SuggestedSummary = styled.div `
1794
- color: ${Colors.MEDIUM_GRAY.Hex};
1795
- font-size: 12px;
1796
- font-family: ${FontStyles.DEFAULT};
1797
- font-weight: 500;
1798
- line-height: 18px;
1799
- padding: 10px 12px;
1800
- border-bottom: 1px solid #e5e5e5;
1801
- background: #fff;
1802
- z-index: 1;
1803
- position: sticky;
1804
- top: 0px;
1805
- `;
1806
- const SuggestedValue = styled.div `
1807
- cursor: pointer;
1808
- padding: 8px 12px;
1809
- font-size: ${FontSizes.DEFAULT};
1810
- font-family: ${FontStyles.DEFAULT};
1811
- font-weight: 400;
1812
- line-height: 1.6em;
1813
- color: ${Colors.BLACK.Hex};
1814
-
1815
- &:hover {
1816
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1817
- }
1793
+ const SuggestedSummary = styled.div `
1794
+ color: ${Colors.MEDIUM_GRAY.Hex};
1795
+ font-size: 12px;
1796
+ font-family: ${FontStyles.DEFAULT};
1797
+ font-weight: 500;
1798
+ line-height: 18px;
1799
+ padding: 10px 12px;
1800
+ border-bottom: 1px solid #e5e5e5;
1801
+ background: #fff;
1802
+ z-index: 1;
1803
+ position: sticky;
1804
+ top: 0px;
1805
+ `;
1806
+ const SuggestedValue = styled.div `
1807
+ cursor: pointer;
1808
+ padding: 8px 12px;
1809
+ font-size: ${FontSizes.DEFAULT};
1810
+ font-family: ${FontStyles.DEFAULT};
1811
+ font-weight: 400;
1812
+ line-height: 1.6em;
1813
+ color: ${Colors.BLACK.Hex};
1814
+
1815
+ &:hover {
1816
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1817
+ }
1818
1818
  `;
1819
1819
  SuggestedValue.defaultProps = { theme: EditableTheme };
1820
- const CharacterCount = styled.div `
1821
- font-family: ${FontStyles.DEFAULT};
1822
- font-size: ${FontSizes.SMALL};
1823
- color: ${Colors.MEDIUM_GRAY.Hex};
1824
- padding: 10px;
1820
+ const CharacterCount = styled.div `
1821
+ font-family: ${FontStyles.DEFAULT};
1822
+ font-size: ${FontSizes.SMALL};
1823
+ color: ${Colors.MEDIUM_GRAY.Hex};
1824
+ padding: 10px;
1825
1825
  `;
1826
- const Loader$1 = styled.div `
1827
- padding: 0px 10px;
1828
- display: flex;
1829
- align-items: center;
1826
+ const Loader$1 = styled.div `
1827
+ padding: 0px 10px;
1828
+ display: flex;
1829
+ align-items: center;
1830
1830
  `;
1831
1831
  const Input$1 = (_a) => {
1832
1832
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown,
@@ -1926,7 +1926,7 @@ const Input$1 = (_a) => {
1926
1926
  onBlur(e);
1927
1927
  setTimeout(() => {
1928
1928
  setShowOptions(false);
1929
- }, 200);
1929
+ }, 500);
1930
1930
  }, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
1931
1931
  ? e => e.preventDefault()
1932
1932
  : e => {
@@ -1951,112 +1951,112 @@ const Input$1 = (_a) => {
1951
1951
  onSuggestedSelect();
1952
1952
  setShowOptions(false);
1953
1953
  } }, suggestedValue))))) : null));
1954
- };
1955
-
1956
- const Wrapper$7 = styled.a `
1957
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1958
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1959
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1960
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1961
- font-weight: 500;
1962
- font-style: normal;
1963
- text-decoration: 'none';
1964
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1965
- margin: 0px;
1966
- padding: 0px;
1967
- box-sizing: border-box;
1968
- cursor: pointer;
1954
+ };
1955
+
1956
+ const Wrapper$7 = styled.a `
1957
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1958
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1959
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1960
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1961
+ font-weight: 500;
1962
+ font-style: normal;
1963
+ text-decoration: 'none';
1964
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1965
+ margin: 0px;
1966
+ padding: 0px;
1967
+ box-sizing: border-box;
1968
+ cursor: pointer;
1969
1969
  `;
1970
1970
  Wrapper$7.defaultProps = { theme: EditableTheme };
1971
1971
  const Link = (_a) => {
1972
1972
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1973
1973
  const id = generateUniqueId('link');
1974
1974
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${id}-wrapper` }), children));
1975
- };
1976
-
1977
- const dash = keyframes `
1978
- 0% {
1979
- stroke-dasharray: 1, 160;
1980
- stroke-dashoffset: 0;
1981
- }
1982
- 50% {
1983
- stroke-dasharray: 80, 160;
1984
- stroke-dashoffset: -32;
1985
- }
1986
- 100% {
1987
- stroke-dasharray: 80, 160;
1988
- stroke-dashoffset: -124;
1989
- }
1990
- `;
1991
- const Spinner = styled.svg `
1992
- z-index: 2;
1993
- position: absolute;
1994
- top: 50%;
1995
- left: 50%;
1996
- transform: translate(-50%, -50%);
1997
- margin: 0 auto;
1998
- width: 40px;
1999
- height: 40px;
2000
- `;
2001
- const Path = styled.path `
2002
- stroke: #0193d7;
2003
- stroke-linecap: round;
2004
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2005
- animation: ${dash} 1.1s ease-in-out infinite;
1975
+ };
1976
+
1977
+ const dash = keyframes `
1978
+ 0% {
1979
+ stroke-dasharray: 1, 160;
1980
+ stroke-dashoffset: 0;
1981
+ }
1982
+ 50% {
1983
+ stroke-dasharray: 80, 160;
1984
+ stroke-dashoffset: -32;
1985
+ }
1986
+ 100% {
1987
+ stroke-dasharray: 80, 160;
1988
+ stroke-dashoffset: -124;
1989
+ }
1990
+ `;
1991
+ const Spinner = styled.svg `
1992
+ z-index: 2;
1993
+ position: absolute;
1994
+ top: 50%;
1995
+ left: 50%;
1996
+ transform: translate(-50%, -50%);
1997
+ margin: 0 auto;
1998
+ width: 40px;
1999
+ height: 40px;
2000
+ `;
2001
+ const Path = styled.path `
2002
+ stroke: #0193d7;
2003
+ stroke-linecap: round;
2004
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2005
+ animation: ${dash} 1.1s ease-in-out infinite;
2006
2006
  `;
2007
2007
  const Loader = () => {
2008
2008
  const id = generateUniqueId('loader');
2009
2009
  return (React.createElement(Spinner, { id: `${id}-spinner`, viewBox: '0 0 16 18' },
2010
2010
  React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', id: `${id}-path`, strokeWidth: '2' })));
2011
- };
2012
-
2013
- const Steps = styled.div `
2014
- padding: 20px;
2015
- border-bottom: 1px solid #e7e6e6;
2016
- background: #f5f5f5;
2017
- display: flex;
2018
- gap: 30px;
2019
- align-items: center;
2020
- `;
2021
- const Step = styled.div `
2022
- display: flex;
2023
- align-items: center;
2024
- gap: 8px;
2025
- `;
2026
- const StyledIcon$2 = styled(Icon) `
2027
- > path {
2028
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2029
- }
2011
+ };
2012
+
2013
+ const Steps = styled.div `
2014
+ padding: 20px;
2015
+ border-bottom: 1px solid #e7e6e6;
2016
+ background: #f5f5f5;
2017
+ display: flex;
2018
+ gap: 30px;
2019
+ align-items: center;
2020
+ `;
2021
+ const Step = styled.div `
2022
+ display: flex;
2023
+ align-items: center;
2024
+ gap: 8px;
2025
+ `;
2026
+ const StyledIcon$2 = styled(Icon) `
2027
+ > path {
2028
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2029
+ }
2030
2030
  `;
2031
2031
  StyledIcon$2.defaultProps = { theme: EditableTheme };
2032
- const StepIndicator = styled.div `
2033
- width: 30px;
2034
- height: 30px;
2035
- border-radius: 15px;
2036
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2037
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2038
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2039
- font-size: 14px;
2040
- font-weight: 500;
2041
- line-height: 1;
2042
- display: flex;
2043
- align-items: center;
2044
- justify-content: center;
2045
- flex-shrink: 0;
2032
+ const StepIndicator = styled.div `
2033
+ width: 30px;
2034
+ height: 30px;
2035
+ border-radius: 15px;
2036
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2037
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2038
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2039
+ font-size: 14px;
2040
+ font-weight: 500;
2041
+ line-height: 1;
2042
+ display: flex;
2043
+ align-items: center;
2044
+ justify-content: center;
2045
+ flex-shrink: 0;
2046
2046
  `;
2047
2047
  StepIndicator.defaultProps = { theme: EditableTheme };
2048
- const StepLabel = styled.div `
2049
- color: #000;
2050
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2051
- font-size: 14px;
2052
- font-weight: 500;
2053
- line-height: 1;
2054
- `;
2055
- const StepLine = styled.div `
2056
- height: 2px;
2057
- flex-grow: 1;
2058
- background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2059
- transition: background-color 0.5s ease-in-out;
2048
+ const StepLabel = styled.div `
2049
+ color: #000;
2050
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2051
+ font-size: 14px;
2052
+ font-weight: 500;
2053
+ line-height: 1;
2054
+ `;
2055
+ const StepLine = styled.div `
2056
+ height: 2px;
2057
+ flex-grow: 1;
2058
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2059
+ transition: background-color 0.5s ease-in-out;
2060
2060
  `;
2061
2061
  const ProgressBar = ({ steps, showStepLine = false }) => {
2062
2062
  const id = generateUniqueId('progress-bar');
@@ -2068,78 +2068,78 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
2068
2068
  step.complete ? (React.createElement(StyledIcon$2, { id: `${stepId}-icon`, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, id: `${stepId}-indicator` }, i + 1)),
2069
2069
  React.createElement(StepLabel, { id: `${stepId}-label` }, step.label))));
2070
2070
  })));
2071
- };
2072
-
2073
- const Wrapper$6 = styled.div `
2074
- position: fixed;
2075
- top: 0;
2076
- right: 0;
2077
- bottom: 0;
2078
- left: 0;
2079
- z-index: 9999;
2080
- background: rgba(0, 0, 0, 0.8);
2081
- display: flex;
2082
- align-items: center;
2083
- justify-content: center;
2084
- `;
2085
- const Container$1 = styled.dialog `
2086
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2087
- max-width: calc(100vw - 80px);
2088
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2089
- max-height: calc(100vh - 80px);
2090
- border-radius: 8px;
2091
- overflow: hidden;
2092
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2093
- outline: none;
2094
- border: none;
2095
- position: relative;
2096
- padding: 0px;
2097
- box-sizing: border-box;
2098
- display: flex;
2099
- flex-direction: column;
2100
- `;
2101
- const Header$1 = styled.div `
2102
- flex-shrink: 0;
2103
- padding: 20px;
2104
- border-bottom: 1px solid #e7e6e6;
2105
- display: flex;
2106
- align-items: center;
2107
- background: #ffffff;
2108
- box-sizing: border-box;
2109
- `;
2110
- const Close = styled.div `
2111
- margin-left: auto;
2112
- display: flex;
2113
- align-items: center;
2114
- padding-left: 20px;
2115
- cursor: pointer;
2116
- `;
2117
- const CloseMsg = styled.span `
2118
- font-size: ${FontSizes.SMALL};
2119
- font-weight: 400;
2120
- font-family: ${FontStyles.DEFAULT};
2121
- line-height: 1em;
2122
- color: ${Colors.MEDIUM_GRAY.Hex};
2123
- `;
2124
- const ContentWrapper = styled.div `
2125
- overflow-x: hidden;
2126
- overflow-y: auto;
2127
- background: #ffffff;
2128
- flex: 1;
2129
- box-sizing: border-box;
2130
- `;
2131
- const ButtonBar = styled.div `
2132
- flex-shrink: 0;
2133
- background: #ffffff;
2134
- padding: 20px;
2135
- border-top: 1px solid #e7e6e6;
2136
- display: flex;
2137
- align-items: center;
2138
- justify-self: flex-end;
2139
- box-sizing: border-box;
2140
- `;
2141
- const ButtonContainer = styled.div `
2142
- margin: 0 10px;
2071
+ };
2072
+
2073
+ const Wrapper$6 = styled.div `
2074
+ position: fixed;
2075
+ top: 0;
2076
+ right: 0;
2077
+ bottom: 0;
2078
+ left: 0;
2079
+ z-index: 9999;
2080
+ background: rgba(0, 0, 0, 0.8);
2081
+ display: flex;
2082
+ align-items: center;
2083
+ justify-content: center;
2084
+ `;
2085
+ const Container$1 = styled.dialog `
2086
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2087
+ max-width: calc(100vw - 80px);
2088
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2089
+ max-height: calc(100vh - 80px);
2090
+ border-radius: 8px;
2091
+ overflow: hidden;
2092
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2093
+ outline: none;
2094
+ border: none;
2095
+ position: relative;
2096
+ padding: 0px;
2097
+ box-sizing: border-box;
2098
+ display: flex;
2099
+ flex-direction: column;
2100
+ `;
2101
+ const Header$1 = styled.div `
2102
+ flex-shrink: 0;
2103
+ padding: 20px;
2104
+ border-bottom: 1px solid #e7e6e6;
2105
+ display: flex;
2106
+ align-items: center;
2107
+ background: #ffffff;
2108
+ box-sizing: border-box;
2109
+ `;
2110
+ const Close = styled.div `
2111
+ margin-left: auto;
2112
+ display: flex;
2113
+ align-items: center;
2114
+ padding-left: 20px;
2115
+ cursor: pointer;
2116
+ `;
2117
+ const CloseMsg = styled.span `
2118
+ font-size: ${FontSizes.SMALL};
2119
+ font-weight: 400;
2120
+ font-family: ${FontStyles.DEFAULT};
2121
+ line-height: 1em;
2122
+ color: ${Colors.MEDIUM_GRAY.Hex};
2123
+ `;
2124
+ const ContentWrapper = styled.div `
2125
+ overflow-x: hidden;
2126
+ overflow-y: auto;
2127
+ background: #ffffff;
2128
+ flex: 1;
2129
+ box-sizing: border-box;
2130
+ `;
2131
+ const ButtonBar = styled.div `
2132
+ flex-shrink: 0;
2133
+ background: #ffffff;
2134
+ padding: 20px;
2135
+ border-top: 1px solid #e7e6e6;
2136
+ display: flex;
2137
+ align-items: center;
2138
+ justify-self: flex-end;
2139
+ box-sizing: border-box;
2140
+ `;
2141
+ const ButtonContainer = styled.div `
2142
+ margin: 0 10px;
2143
2143
  `;
2144
2144
  const Modal = (_a) => {
2145
2145
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton"]);
@@ -2182,21 +2182,21 @@ const Modal = (_a) => {
2182
2182
  secondaryButton ? (React.createElement(ButtonContainer, { id: `${id}-secondary-button-container` },
2183
2183
  React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` })))) : null,
2184
2184
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)) : null)));
2185
- };
2186
-
2187
- const Wrapper$5 = styled.div `
2188
- position: relative;
2189
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2190
- `;
2191
- const Trigger = styled.div `
2192
- box-sizing: border-box;
2193
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2194
- height: 40px;
2195
- padding: 0 10px;
2196
- position: relative;
2197
- cursor: pointer;
2198
- border-width: 1px;
2199
- border-style: solid;
2185
+ };
2186
+
2187
+ const Wrapper$5 = styled.div `
2188
+ position: relative;
2189
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2190
+ `;
2191
+ const Trigger = styled.div `
2192
+ box-sizing: border-box;
2193
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2194
+ height: 40px;
2195
+ padding: 0 10px;
2196
+ position: relative;
2197
+ cursor: pointer;
2198
+ border-width: 1px;
2199
+ border-style: solid;
2200
2200
  border-color: ${props => {
2201
2201
  if (props.$invalid) {
2202
2202
  return Colors.RED.Hex;
@@ -2207,67 +2207,67 @@ const Trigger = styled.div `
2207
2207
  else {
2208
2208
  return '#cccccc';
2209
2209
  }
2210
- }};
2211
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2212
- background-image: none;
2213
- display: flex;
2214
- width: 100%;
2215
- align-items: center;
2216
- justify-content: space-between;
2217
- z-index: 1;
2210
+ }};
2211
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2212
+ background-image: none;
2213
+ display: flex;
2214
+ width: 100%;
2215
+ align-items: center;
2216
+ justify-content: space-between;
2217
+ z-index: 1;
2218
2218
  `;
2219
2219
  Trigger.defaultProps = { theme: EditableTheme };
2220
- const Value = styled.div `
2221
- color: ${Colors.BLACK.Hex};
2222
- font-family: ${FontStyles.DEFAULT};
2223
- font-size: ${FontSizes.DEFAULT};
2224
- font-weight: 400;
2225
- line-height: 2.9em;
2226
- overflow: hidden;
2227
- text-overflow: ellipsis;
2228
- white-space: nowrap;
2229
- width: 100%;
2230
- `;
2231
- const Options = styled.div `
2232
- background: #fff;
2233
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2234
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2235
- border-radius: 0px 0px 4px 4px;
2236
- border-style: solid;
2237
- border-top: none;
2238
- border-width: 1px;
2239
- left: 0;
2240
- position: absolute;
2241
- right: 0;
2242
- z-index: 10;
2243
- max-height: 220px;
2244
- overflow: auto;
2220
+ const Value = styled.div `
2221
+ color: ${Colors.BLACK.Hex};
2222
+ font-family: ${FontStyles.DEFAULT};
2223
+ font-size: ${FontSizes.DEFAULT};
2224
+ font-weight: 400;
2225
+ line-height: 2.9em;
2226
+ overflow: hidden;
2227
+ text-overflow: ellipsis;
2228
+ white-space: nowrap;
2229
+ width: 100%;
2230
+ `;
2231
+ const Options = styled.div `
2232
+ background: #fff;
2233
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2234
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2235
+ border-radius: 0px 0px 4px 4px;
2236
+ border-style: solid;
2237
+ border-top: none;
2238
+ border-width: 1px;
2239
+ left: 0;
2240
+ position: absolute;
2241
+ right: 0;
2242
+ z-index: 10;
2243
+ max-height: 220px;
2244
+ overflow: auto;
2245
2245
  `;
2246
2246
  Options.defaultProps = { theme: EditableTheme };
2247
- const Scrim = styled.div `
2248
- bottom: 0;
2249
- left: 0;
2250
- position: fixed;
2251
- right: 0;
2252
- top: 0;
2253
- z-index: 9;
2254
- `;
2255
- const SearchInput = styled.input `
2256
- position: absolute;
2257
- left: 2px;
2258
- top: 2px;
2259
- z-index: 999;
2260
- width: 90%;
2261
- height: 30px;
2262
- border: none;
2263
- outline: none;
2264
- color: ${Colors.BLACK.Hex};
2265
- font-family: ${FontStyles.DEFAULT};
2266
- font-size: ${FontSizes.DEFAULT};
2267
- font-weight: 400;
2268
- line-height: 2.9em;
2269
- overflow: hidden;
2270
- white-space: nowrap;
2247
+ const Scrim = styled.div `
2248
+ bottom: 0;
2249
+ left: 0;
2250
+ position: fixed;
2251
+ right: 0;
2252
+ top: 0;
2253
+ z-index: 9;
2254
+ `;
2255
+ const SearchInput = styled.input `
2256
+ position: absolute;
2257
+ left: 2px;
2258
+ top: 2px;
2259
+ z-index: 999;
2260
+ width: 90%;
2261
+ height: 30px;
2262
+ border: none;
2263
+ outline: none;
2264
+ color: ${Colors.BLACK.Hex};
2265
+ font-family: ${FontStyles.DEFAULT};
2266
+ font-size: ${FontSizes.DEFAULT};
2267
+ font-weight: 400;
2268
+ line-height: 2.9em;
2269
+ overflow: hidden;
2270
+ white-space: nowrap;
2271
2271
  `;
2272
2272
  const MultiSelect = (_a) => {
2273
2273
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style"]);
@@ -2287,37 +2287,37 @@ const MultiSelect = (_a) => {
2287
2287
  showOptions ? (React.createElement(Options, { id: `${id}-options` },
2288
2288
  React.createElement(Checklist, { id: `${id}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2289
2289
  showOptions ? (React.createElement(Scrim, { id: `${id}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
2290
- };
2291
-
2292
- const Wrapper$4 = styled.div `
2293
- display: flex;
2294
- padding: 16px 30px;
2295
- align-items: center;
2296
- gap: 20px;
2297
- align-self: stretch;
2298
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2299
- `;
2300
- const Title = styled.div `
2301
- display: flex;
2302
- align-items: center;
2303
- gap: 20px;
2304
- `;
2305
- const Info = styled.div `
2306
- display: flex;
2307
- flex-direction: column;
2308
- align-items: flex-start;
2309
- gap: 4px;
2310
- flex: 1 0 0;
2311
- `;
2312
- const Breadcrumbs = styled.div `
2313
- display: flex;
2314
- align-items: center;
2315
- gap: 4px;
2316
- `;
2317
- const Actions = styled.div `
2318
- display: flex;
2319
- align-items: center;
2320
- gap: 8px;
2290
+ };
2291
+
2292
+ const Wrapper$4 = styled.div `
2293
+ display: flex;
2294
+ padding: 16px 30px;
2295
+ align-items: center;
2296
+ gap: 20px;
2297
+ align-self: stretch;
2298
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2299
+ `;
2300
+ const Title = styled.div `
2301
+ display: flex;
2302
+ align-items: center;
2303
+ gap: 20px;
2304
+ `;
2305
+ const Info = styled.div `
2306
+ display: flex;
2307
+ flex-direction: column;
2308
+ align-items: flex-start;
2309
+ gap: 4px;
2310
+ flex: 1 0 0;
2311
+ `;
2312
+ const Breadcrumbs = styled.div `
2313
+ display: flex;
2314
+ align-items: center;
2315
+ gap: 4px;
2316
+ `;
2317
+ const Actions = styled.div `
2318
+ display: flex;
2319
+ align-items: center;
2320
+ gap: 8px;
2321
2321
  `;
2322
2322
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2323
2323
  const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, } = buttonMenu || {};
@@ -2340,13 +2340,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2340
2340
  return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
2341
2341
  }),
2342
2342
  menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
2343
- };
2344
-
2345
- const Wrapper$3 = styled.nav `
2346
- box-sizing: border-box;
2347
- display: flex;
2348
- align-items: center;
2349
- column-gap: 10px;
2343
+ };
2344
+
2345
+ const Wrapper$3 = styled.nav `
2346
+ box-sizing: border-box;
2347
+ display: flex;
2348
+ align-items: center;
2349
+ column-gap: 10px;
2350
2350
  `;
2351
2351
  const Pagination = (_a) => {
2352
2352
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2376,82 +2376,82 @@ const Pagination = (_a) => {
2376
2376
  value: `${p}`,
2377
2377
  })), value: `${currentPage}` }),
2378
2378
  React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, id: `${id}-next-button`, onClick: handleNextClick, small: true })));
2379
- };
2380
-
2381
- const Wrapper$2 = styled.label `
2382
- border-radius: 4px;
2383
- padding: 4px 0px 4px 6px;
2384
- margin-left: -6px;
2385
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2386
- display: flex;
2387
- align-items: center;
2388
- font-size: ${FontSizes.DEFAULT};
2389
- line-height: 1.6em;
2390
- box-sizing: border-box;
2391
- position: relative;
2392
-
2393
- &:focus-within {
2394
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2395
- }
2379
+ };
2380
+
2381
+ const Wrapper$2 = styled.label `
2382
+ border-radius: 4px;
2383
+ padding: 4px 0px 4px 6px;
2384
+ margin-left: -6px;
2385
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2386
+ display: flex;
2387
+ align-items: center;
2388
+ font-size: ${FontSizes.DEFAULT};
2389
+ line-height: 1.6em;
2390
+ box-sizing: border-box;
2391
+ position: relative;
2392
+
2393
+ &:focus-within {
2394
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2395
+ }
2396
2396
  `;
2397
2397
  Wrapper$2.defaultProps = { theme: EditableTheme };
2398
- const Input = styled.input `
2399
- font-size: 20px;
2400
- margin: 0px;
2401
- line-height: 1.6em;
2402
- box-sizing: border-box;
2403
- position: absolute;
2404
- opacity: 0;
2405
- cursor: pointer;
2406
- height: 0;
2407
- width: 0;
2408
- &:checked + span {
2409
- border-color: ${Colors.PRIMARY.Hex};
2410
- }
2411
- &:checked + span:after {
2412
- background-color: ${Colors.PRIMARY.Hex};
2413
- display: block;
2414
- }
2415
- &:disabled + span {
2416
- background-color: #d3d3d3;
2417
- border-color: #d3d3d3;
2418
- }
2419
- &:disabled + span:after {
2420
- background-color: #fff;
2421
- }
2422
- &:checked:disabled + span:after {
2423
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2424
- }
2425
- `;
2426
- const Check = styled.span `
2427
- height: 17px;
2428
- width: 17px;
2429
- border-radius: 50%;
2430
- background-color: #fff;
2431
- border-width: 2px;
2432
- border-style: solid;
2433
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2434
- box-sizing: border-box;
2435
- position: relative;
2436
- &:after {
2437
- content: '';
2438
- position: absolute;
2439
- top: 2px;
2440
- left: 2px;
2441
- width: 9px;
2442
- height: 9px;
2443
- border-radius: 50%;
2444
- box-sizing: border-box;
2445
- display: none;
2446
- }
2447
- `;
2448
- const Label = styled.span `
2449
- font-family: ${FontStyles.DEFAULT};
2450
- font-size: ${FontSizes.DEFAULT};
2451
- font-weight: 400;
2452
- color: ${Colors.BLACK.Hex};
2453
- line-height: 1.6em;
2454
- margin-left: 6px;
2398
+ const Input = styled.input `
2399
+ font-size: 20px;
2400
+ margin: 0px;
2401
+ line-height: 1.6em;
2402
+ box-sizing: border-box;
2403
+ position: absolute;
2404
+ opacity: 0;
2405
+ cursor: pointer;
2406
+ height: 0;
2407
+ width: 0;
2408
+ &:checked + span {
2409
+ border-color: ${Colors.PRIMARY.Hex};
2410
+ }
2411
+ &:checked + span:after {
2412
+ background-color: ${Colors.PRIMARY.Hex};
2413
+ display: block;
2414
+ }
2415
+ &:disabled + span {
2416
+ background-color: #d3d3d3;
2417
+ border-color: #d3d3d3;
2418
+ }
2419
+ &:disabled + span:after {
2420
+ background-color: #fff;
2421
+ }
2422
+ &:checked:disabled + span:after {
2423
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2424
+ }
2425
+ `;
2426
+ const Check = styled.span `
2427
+ height: 17px;
2428
+ width: 17px;
2429
+ border-radius: 50%;
2430
+ background-color: #fff;
2431
+ border-width: 2px;
2432
+ border-style: solid;
2433
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2434
+ box-sizing: border-box;
2435
+ position: relative;
2436
+ &:after {
2437
+ content: '';
2438
+ position: absolute;
2439
+ top: 2px;
2440
+ left: 2px;
2441
+ width: 9px;
2442
+ height: 9px;
2443
+ border-radius: 50%;
2444
+ box-sizing: border-box;
2445
+ display: none;
2446
+ }
2447
+ `;
2448
+ const Label = styled.span `
2449
+ font-family: ${FontStyles.DEFAULT};
2450
+ font-size: ${FontSizes.DEFAULT};
2451
+ font-weight: 400;
2452
+ color: ${Colors.BLACK.Hex};
2453
+ line-height: 1.6em;
2454
+ margin-left: 6px;
2455
2455
  `;
2456
2456
  const Radio = (_a) => {
2457
2457
  var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex"]);
@@ -2462,77 +2462,77 @@ const Radio = (_a) => {
2462
2462
  React.createElement(Label, { id: `${id}-label` },
2463
2463
  children,
2464
2464
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2465
- };
2466
-
2465
+ };
2466
+
2467
2467
  const RadioList = (_a) => {
2468
2468
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2469
2469
  return (React.createElement(React.Fragment, null, options.map((option) => {
2470
2470
  const label = option.label || option.value;
2471
2471
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2472
2472
  })));
2473
- };
2474
-
2475
- const StyledTable = styled.table `
2476
- width: 100%;
2477
- margin-top: 1px;
2478
- table-layout: ${props => props.$tableLayout || 'auto'};
2479
- border-collapse: collapse;
2480
- text-indent: 0px;
2481
- border-spacing: 0px;
2482
- border-color: none;
2483
- box-sizing: border-box;
2484
- `;
2485
- const Header = styled.th `
2486
- padding: 12px !important;
2487
- text-align: left;
2488
- font-weight: 500;
2489
- border-bottom: 1px solid #e5e5e5;
2490
- border-top: 1px solid #e5e5e5;
2491
- text-transform: uppercase;
2492
- font-size: 12px;
2493
- font-family: ${FontStyles.DEFAULT};
2494
- letter-spacing: 1px;
2495
- white-space: nowrap;
2496
- line-height: 1;
2497
- position: relative;
2498
- box-sizing: border-box;
2499
- width: ${props => props.$width || 'auto'};
2500
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2501
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2473
+ };
2474
+
2475
+ const StyledTable = styled.table `
2476
+ width: 100%;
2477
+ margin-top: 1px;
2478
+ table-layout: ${props => props.$tableLayout || 'auto'};
2479
+ border-collapse: collapse;
2480
+ text-indent: 0px;
2481
+ border-spacing: 0px;
2482
+ border-color: none;
2483
+ box-sizing: border-box;
2484
+ `;
2485
+ const Header = styled.th `
2486
+ padding: 12px !important;
2487
+ text-align: left;
2488
+ font-weight: 500;
2489
+ border-bottom: 1px solid #e5e5e5;
2490
+ border-top: 1px solid #e5e5e5;
2491
+ text-transform: uppercase;
2492
+ font-size: 12px;
2493
+ font-family: ${FontStyles.DEFAULT};
2494
+ letter-spacing: 1px;
2495
+ white-space: nowrap;
2496
+ line-height: 1;
2497
+ position: relative;
2498
+ box-sizing: border-box;
2499
+ width: ${props => props.$width || 'auto'};
2500
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2501
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2502
2502
  `;
2503
2503
  Header.defaultProps = { theme: EditableTheme };
2504
- const Row = styled.tr `
2505
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2506
- transition: all 0.2s;
2507
- background-color: ${props => props.$bgColor};
2508
- box-sizing: border-box;
2509
- &:hover {
2510
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2511
- }
2504
+ const Row = styled.tr `
2505
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2506
+ transition: all 0.2s;
2507
+ background-color: ${props => props.$bgColor};
2508
+ box-sizing: border-box;
2509
+ &:hover {
2510
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2511
+ }
2512
2512
  `;
2513
2513
  Row.defaultProps = { theme: EditableTheme };
2514
- const Column = styled.td `
2515
- padding: 16px 12px !important;
2516
- font-size: ${FontSizes.DEFAULT} !important;
2517
- font-weight: 400 !important;
2518
- font-family: ${FontStyles.DEFAULT};
2519
- border: none !important;
2520
- word-break: break-word;
2521
- line-height: 1.4em;
2522
- box-sizing: border-box;
2523
- text-align: ${props => props.$align || 'left'};
2524
- width: ${props => props.$width || 'auto'};
2525
- `;
2526
- const IconWrapper = styled.span `
2527
- position: absolute;
2528
- top: 50%;
2529
- transform: translateY(-50%);
2530
- margin-left: 2px;
2531
- `;
2532
- const StyledIcon$1 = styled(Icon) `
2533
- > path {
2534
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2535
- }
2514
+ const Column = styled.td `
2515
+ padding: 16px 12px !important;
2516
+ font-size: ${FontSizes.DEFAULT} !important;
2517
+ font-weight: 400 !important;
2518
+ font-family: ${FontStyles.DEFAULT};
2519
+ border: none !important;
2520
+ word-break: break-word;
2521
+ line-height: 1.4em;
2522
+ box-sizing: border-box;
2523
+ text-align: ${props => props.$align || 'left'};
2524
+ width: ${props => props.$width || 'auto'};
2525
+ `;
2526
+ const IconWrapper = styled.span `
2527
+ position: absolute;
2528
+ top: 50%;
2529
+ transform: translateY(-50%);
2530
+ margin-left: 2px;
2531
+ `;
2532
+ const StyledIcon$1 = styled(Icon) `
2533
+ > path {
2534
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2535
+ }
2536
2536
  `;
2537
2537
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2538
2538
  const Table = (_a) => {
@@ -2554,55 +2554,55 @@ const Table = (_a) => {
2554
2554
  return (React.createElement(Column, { "$align": columns[j].align, "$width": columns[j].width, id: `${columnId}-column`, key: j }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2555
2555
  })));
2556
2556
  }))) : null));
2557
- };
2558
-
2559
- const Wrapper$1 = styled.div `
2560
- display: flex;
2561
- box-sizing: border-box;
2562
- align-items: flex-end;
2563
- border-top: 1px solid #e5e5e5;
2564
- border-bottom: 1px solid #e5e5e5;
2565
- flex-shrink: 0;
2566
- align-self: stretch;
2567
- padding: 0;
2568
- margin: 0;
2569
- `;
2570
- const Tab = styled.div `
2571
- display: flex;
2572
- align-items: center;
2573
- gap: 6px;
2574
- font-size: ${FontSizes.DEFAULT};
2575
- font-family: ${FontStyles.DEFAULT};
2576
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2577
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2578
- line-height: 1em;
2579
- padding: 16px 30px 12px;
2580
- margin: 0 0 -1px 0;
2581
- border-bottom-width: 4px;
2582
- border-bottom-style: solid;
2583
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2584
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2585
- box-sizing: border-box;
2586
- &:hover {
2587
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2588
- font-weight: 500;
2589
- }
2557
+ };
2558
+
2559
+ const Wrapper$1 = styled.div `
2560
+ display: flex;
2561
+ box-sizing: border-box;
2562
+ align-items: flex-end;
2563
+ border-top: 1px solid #e5e5e5;
2564
+ border-bottom: 1px solid #e5e5e5;
2565
+ flex-shrink: 0;
2566
+ align-self: stretch;
2567
+ padding: 0;
2568
+ margin: 0;
2569
+ `;
2570
+ const Tab = styled.div `
2571
+ display: flex;
2572
+ align-items: center;
2573
+ gap: 6px;
2574
+ font-size: ${FontSizes.DEFAULT};
2575
+ font-family: ${FontStyles.DEFAULT};
2576
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2577
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2578
+ line-height: 1em;
2579
+ padding: 16px 30px 12px;
2580
+ margin: 0 0 -1px 0;
2581
+ border-bottom-width: 4px;
2582
+ border-bottom-style: solid;
2583
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2584
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2585
+ box-sizing: border-box;
2586
+ &:hover {
2587
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2588
+ font-weight: 500;
2589
+ }
2590
2590
  `;
2591
2591
  Tab.defaultProps = { theme: EditableTheme };
2592
- const Badge = styled.div `
2593
- display: flex;
2594
- width: 18px;
2595
- height: 18px;
2596
- justify-content: center;
2597
- align-items: center;
2598
- border-radius: 9px;
2599
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2600
- color: #fff;
2601
- font-family: ${FontStyles.DEFAULT};
2602
- font-size: 12px;
2603
- font-weight: 500;
2604
- line-height: 1;
2605
- letter-spacing: 1px;
2592
+ const Badge = styled.div `
2593
+ display: flex;
2594
+ width: 18px;
2595
+ height: 18px;
2596
+ justify-content: center;
2597
+ align-items: center;
2598
+ border-radius: 9px;
2599
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2600
+ color: #fff;
2601
+ font-family: ${FontStyles.DEFAULT};
2602
+ font-size: 12px;
2603
+ font-weight: 500;
2604
+ line-height: 1;
2605
+ letter-spacing: 1px;
2606
2606
  `;
2607
2607
  Badge.defaultProps = { theme: EditableTheme };
2608
2608
  const Tabs = (_a) => {
@@ -2616,29 +2616,29 @@ const Tabs = (_a) => {
2616
2616
  label));
2617
2617
  })));
2618
2618
  };
2619
- Tabs.defaultProps = {};
2620
-
2621
- const Track = styled.div `
2622
- height: 24px;
2623
- border-radius: 12px;
2624
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2625
- display: flex;
2626
- align-items: center;
2627
- cursor: pointer;
2628
- width: 40px;
2629
- padding: 2px;
2630
- box-sizing: border-box;
2631
- `;
2632
- const Handle = styled.div `
2633
- width: 20px;
2634
- height: 20px;
2635
- border-radius: 10px;
2636
- background: #ffffff;
2637
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2638
- display: flex;
2639
- align-items: center;
2640
- justify-content: center;
2641
- box-sizing: border-box;
2619
+ Tabs.defaultProps = {};
2620
+
2621
+ const Track = styled.div `
2622
+ height: 24px;
2623
+ border-radius: 12px;
2624
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2625
+ display: flex;
2626
+ align-items: center;
2627
+ cursor: pointer;
2628
+ width: 40px;
2629
+ padding: 2px;
2630
+ box-sizing: border-box;
2631
+ `;
2632
+ const Handle = styled.div `
2633
+ width: 20px;
2634
+ height: 20px;
2635
+ border-radius: 10px;
2636
+ background: #ffffff;
2637
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2638
+ display: flex;
2639
+ align-items: center;
2640
+ justify-content: center;
2641
+ box-sizing: border-box;
2642
2642
  `;
2643
2643
  const Toggle = (_a) => {
2644
2644
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2648,32 +2648,32 @@ const Toggle = (_a) => {
2648
2648
  React.createElement(Handle, { "$on": on, id: `${id}-handle` },
2649
2649
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${id}-icon`, path: on ? mdiCheck : mdiClose, size: '16px' }))));
2650
2650
  };
2651
- Toggle.defaultProps = {};
2652
-
2653
- const Container = styled.div `
2654
- width: 100%;
2655
- padding: 40px auto;
2656
- gap: 20px;
2657
- display: flex;
2658
- flex-direction: column;
2659
- justify-items: center;
2660
- align-items: center;
2661
- `;
2662
- const Wrapper = styled.div `
2663
- gap: 10px;
2664
- display: flex;
2665
- flex-direction: column;
2666
- justify-items: center;
2667
- align-items: center;
2668
- `;
2669
- const StyledIcon = styled.div `
2670
- display: flex;
2671
- align-items: center;
2672
- justify-content: center;
2673
- width: 80px;
2674
- height: 80px;
2675
- border-radius: 40px;
2676
- background: #f5f5f5;
2651
+ Toggle.defaultProps = {};
2652
+
2653
+ const Container = styled.div `
2654
+ width: 100%;
2655
+ padding: 40px auto;
2656
+ gap: 20px;
2657
+ display: flex;
2658
+ flex-direction: column;
2659
+ justify-items: center;
2660
+ align-items: center;
2661
+ `;
2662
+ const Wrapper = styled.div `
2663
+ gap: 10px;
2664
+ display: flex;
2665
+ flex-direction: column;
2666
+ justify-items: center;
2667
+ align-items: center;
2668
+ `;
2669
+ const StyledIcon = styled.div `
2670
+ display: flex;
2671
+ align-items: center;
2672
+ justify-content: center;
2673
+ width: 80px;
2674
+ height: 80px;
2675
+ border-radius: 40px;
2676
+ background: #f5f5f5;
2677
2677
  `;
2678
2678
  const ZeroState = (_a) => {
2679
2679
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2685,7 +2685,7 @@ const ZeroState = (_a) => {
2685
2685
  React.createElement(Heading, { children: title, id: `${id}-heading`, type: 'tertiary' }),
2686
2686
  description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${id}-description`, type: 'default' }))),
2687
2687
  action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${id}-button`, onClick: action.onClick }))));
2688
- };
2689
-
2690
- export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
2691
- //# sourceMappingURL=index.js.map
2688
+ };
2689
+
2690
+ export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
2691
+ //# sourceMappingURL=index.js.map