@hexure/ui 1.11.13 → 1.12.1

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 (9) hide show
  1. package/dist/cjs/index.js +1295 -1204
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +1295 -1204
  4. package/dist/esm/index.js.map +1 -1
  5. package/package.json +1 -1
  6. /package/dist/cjs/types/components/{MultiSelect → Multiselect}/MultiSelect.d.ts +0 -0
  7. /package/dist/cjs/types/components/{MultiSelect → Multiselect}/index.d.ts +0 -0
  8. /package/dist/esm/types/components/{MultiSelect → Multiselect}/MultiSelect.d.ts +0 -0
  9. /package/dist/esm/types/components/{MultiSelect → Multiselect}/index.d.ts +0 -0
package/dist/cjs/index.js CHANGED
@@ -83,24 +83,24 @@ const EditableTheme = {
83
83
  PRIMARY_COLOR: Colors.PRIMARY,
84
84
  };
85
85
 
86
- const Header$3 = styled.div `
87
- display: flex;
88
- align-items: center;
89
- justify-content: space-between;
90
- box-sizing: border-box;
91
- background: #f5f5f5;
92
- border: 1px solid #e5e5e5;
93
- padding: 14px 20px;
94
- height: 50px;
95
- cursor: pointer;
96
- `;
97
- const Title$2 = styled.div `
98
- font-size: ${FontSizes.DEFAULT};
99
- font-weight: 400;
100
- color: ${Colors.BLACK.Hex};
101
- line-height: 1.6em;
102
- font-family: ${FontStyles.DEFAULT};
103
- box-sizing: border-box;
86
+ const Header$3 = styled.div `
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: space-between;
90
+ box-sizing: border-box;
91
+ background: #f5f5f5;
92
+ border: 1px solid #e5e5e5;
93
+ padding: 14px 20px;
94
+ height: 50px;
95
+ cursor: pointer;
96
+ `;
97
+ const Title$2 = styled.div `
98
+ font-size: ${FontSizes.DEFAULT};
99
+ font-weight: 400;
100
+ color: ${Colors.BLACK.Hex};
101
+ line-height: 1.6em;
102
+ font-family: ${FontStyles.DEFAULT};
103
+ box-sizing: border-box;
104
104
  `;
105
105
  const Accordion = (_a) => {
106
106
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -111,11 +111,11 @@ const Accordion = (_a) => {
111
111
  open ? children : null));
112
112
  };
113
113
 
114
- const StyledButton = styled.button `
115
- height: ${props => (props.$small ? '30px' : '40px')};
116
- line-height: 1em;
117
- border-radius: ${props => (props.$small ? '15px' : '20px')};
118
- margin: ${props => props.$margin || '0px'};
114
+ const StyledButton = styled.button `
115
+ height: ${props => (props.$small ? '30px' : '40px')};
116
+ line-height: 1em;
117
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
118
+ margin: ${props => props.$margin || '0px'};
119
119
  padding: ${props => {
120
120
  if (props.$hasChildren) {
121
121
  if (props.$small) {
@@ -126,9 +126,9 @@ const StyledButton = styled.button `
126
126
  }
127
127
  }
128
128
  return '0px';
129
- }};
130
- outline: none;
131
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
129
+ }};
130
+ outline: none;
131
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
132
132
  width: ${props => {
133
133
  if (props.$hasChildren) {
134
134
  return 'auto';
@@ -137,53 +137,53 @@ const StyledButton = styled.button `
137
137
  return '30px';
138
138
  }
139
139
  return '40px';
140
- }};
141
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
142
- display: flex;
143
- align-items: center;
144
- justify-content: center;
145
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
146
- border-width: 1px;
147
- border-style: solid;
148
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
149
- box-sizing: border-box;
150
-
151
- &:active,
152
- &:focus,
153
- &:hover {
154
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
155
- }
156
- `;
157
- const Label$5 = styled.span `
158
- color: ${props => props.$content_color || '#fff'};
159
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
160
- font-family: ${FontStyles.DEFAULT};
161
- font-weight: 500;
162
- line-height: 1;
163
- `;
164
- const StyledIcon$6 = styled.span `
165
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
166
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
167
- display: flex;
168
- align-items: center;
169
- box-sizing: border-box;
170
- `;
171
- const Badge$1 = styled.span `
172
- width: ${props => (props.$small ? '20px' : '24px')};
173
- height: ${props => (props.$small ? '20px' : '24px')};
174
- line-height: 1;
175
- display: flex;
176
- align-items: center;
177
- justify-content: center;
178
- border-radius: 100%;
179
- background-color: ${props => props.$bg_color || '#fff'};
180
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
181
- font-size: ${props => (props.$small ? '10px' : '12px')};
182
- font-weight: 600;
183
- font-family: ${FontStyles.DEFAULT};
184
- letter-spacing: -1px;
185
- margin-left: ${props => (props.$small ? '5px' : '10px')};
186
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
140
+ }};
141
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
142
+ display: flex;
143
+ align-items: center;
144
+ justify-content: center;
145
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
146
+ border-width: 1px;
147
+ border-style: solid;
148
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
149
+ box-sizing: border-box;
150
+
151
+ &:active,
152
+ &:focus,
153
+ &:hover {
154
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
155
+ }
156
+ `;
157
+ const Label$5 = styled.span `
158
+ color: ${props => props.$content_color || '#fff'};
159
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
160
+ font-family: ${FontStyles.DEFAULT};
161
+ font-weight: 500;
162
+ line-height: 1;
163
+ `;
164
+ const StyledIcon$6 = styled.span `
165
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
166
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
167
+ display: flex;
168
+ align-items: center;
169
+ box-sizing: border-box;
170
+ `;
171
+ const Badge$1 = styled.span `
172
+ width: ${props => (props.$small ? '20px' : '24px')};
173
+ height: ${props => (props.$small ? '20px' : '24px')};
174
+ line-height: 1;
175
+ display: flex;
176
+ align-items: center;
177
+ justify-content: center;
178
+ border-radius: 100%;
179
+ background-color: ${props => props.$bg_color || '#fff'};
180
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
181
+ font-size: ${props => (props.$small ? '10px' : '12px')};
182
+ font-weight: 600;
183
+ font-family: ${FontStyles.DEFAULT};
184
+ letter-spacing: -1px;
185
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
186
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
187
187
  `;
188
188
  const Button = (_a) => {
189
189
  var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
@@ -227,19 +227,19 @@ const Button = (_a) => {
227
227
  badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
228
228
  };
229
229
 
230
- const StyledComponent = styled.p `
231
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
232
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
233
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
234
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
235
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
236
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
237
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
238
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
239
- margin: ${props => props.$margin || '0px'};
240
- padding: ${props => props.$padding || '0px'};
241
- text-align: ${props => props.$align || 'left'};
242
- box-sizing: border-box;
230
+ const StyledComponent = styled.p `
231
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
232
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
233
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
234
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
235
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
236
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
237
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
238
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
239
+ margin: ${props => props.$margin || '0px'};
240
+ padding: ${props => props.$padding || '0px'};
241
+ text-align: ${props => props.$align || 'left'};
242
+ box-sizing: border-box;
243
243
  `;
244
244
  const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
245
245
  return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
@@ -248,35 +248,35 @@ Copy.defaultProps = {
248
248
  type: 'default',
249
249
  };
250
250
 
251
- const H1 = styled.h1 `
252
- color: ${Colors.BLACK.Hex};
253
- font-size: 30px;
254
- font-weight: ${props => (props.$bold ? '500' : '400')};
255
- line-height: 1.4em;
256
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
257
- margin: ${props => props.$margin || '0px'};
258
- padding: ${props => props.$padding || '0px'};
259
- box-sizing: border-box;
260
- `;
261
- const H2 = styled.h2 `
262
- color: ${Colors.BLACK.Hex};
263
- font-size: 24px;
264
- font-weight: ${props => (props.$bold ? '500' : '400')};
265
- line-height: 1.33em;
266
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
267
- margin: ${props => props.$margin || '0px'};
268
- padding: ${props => props.$padding || '0px'};
269
- box-sizing: border-box;
270
- `;
271
- const H3 = styled.h3 `
272
- color: ${Colors.BLACK.Hex};
273
- font-size: 18px;
274
- font-weight: ${props => (props.$bold ? '500' : '400')};
275
- line-height: 1.33em;
276
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
277
- margin: ${props => props.$margin || '0px'};
278
- padding: ${props => props.$padding || '0px'};
279
- box-sizing: border-box;
251
+ const H1 = styled.h1 `
252
+ color: ${Colors.BLACK.Hex};
253
+ font-size: 30px;
254
+ font-weight: ${props => (props.$bold ? '500' : '400')};
255
+ line-height: 1.4em;
256
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
257
+ margin: ${props => props.$margin || '0px'};
258
+ padding: ${props => props.$padding || '0px'};
259
+ box-sizing: border-box;
260
+ `;
261
+ const H2 = styled.h2 `
262
+ color: ${Colors.BLACK.Hex};
263
+ font-size: 24px;
264
+ font-weight: ${props => (props.$bold ? '500' : '400')};
265
+ line-height: 1.33em;
266
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
267
+ margin: ${props => props.$margin || '0px'};
268
+ padding: ${props => props.$padding || '0px'};
269
+ box-sizing: border-box;
270
+ `;
271
+ const H3 = styled.h3 `
272
+ color: ${Colors.BLACK.Hex};
273
+ font-size: 18px;
274
+ font-weight: ${props => (props.$bold ? '500' : '400')};
275
+ line-height: 1.33em;
276
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
277
+ margin: ${props => props.$margin || '0px'};
278
+ padding: ${props => props.$padding || '0px'};
279
+ box-sizing: border-box;
280
280
  `;
281
281
  const Heading = (_a) => {
282
282
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -297,39 +297,39 @@ Heading.defaultProps = {
297
297
  type: 'primary',
298
298
  };
299
299
 
300
- const Wrapper$i = styled.div `
301
- position: fixed;
302
- top: 0;
303
- right: 0;
304
- bottom: 0;
305
- left: 0;
306
- z-index: 9999;
307
- background: rgba(0, 0, 0, 0.8);
308
- display: flex;
309
- align-items: center;
310
- justify-content: center;
311
- box-sizing: border-box;
312
- `;
313
- const Container$4 = styled.dialog `
314
- max-width: 600px;
315
- width: auto;
316
- border-radius: 8px;
317
- overflow: hidden;
318
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
319
- outline: none;
320
- border: none;
321
- position: relative;
322
- padding: 40px;
323
- text-align: center;
324
- box-sizing: border-box;
325
- `;
326
- const Buttons$1 = styled.div `
327
- display: flex;
328
- gap: 10px;
329
- align-items: center;
330
- justify-content: center;
331
- margin-top: 30px;
332
- box-sizing: border-box;
300
+ const Wrapper$i = styled.div `
301
+ position: fixed;
302
+ top: 0;
303
+ right: 0;
304
+ bottom: 0;
305
+ left: 0;
306
+ z-index: 9999;
307
+ background: rgba(0, 0, 0, 0.8);
308
+ display: flex;
309
+ align-items: center;
310
+ justify-content: center;
311
+ box-sizing: border-box;
312
+ `;
313
+ const Container$4 = styled.dialog `
314
+ max-width: 600px;
315
+ width: auto;
316
+ border-radius: 8px;
317
+ overflow: hidden;
318
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
319
+ outline: none;
320
+ border: none;
321
+ position: relative;
322
+ padding: 40px;
323
+ text-align: center;
324
+ box-sizing: border-box;
325
+ `;
326
+ const Buttons$1 = styled.div `
327
+ display: flex;
328
+ gap: 10px;
329
+ align-items: center;
330
+ justify-content: center;
331
+ margin-top: 30px;
332
+ box-sizing: border-box;
333
333
  `;
334
334
  const ActionDialog = (_a) => {
335
335
  var { description, title, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
@@ -343,27 +343,27 @@ const ActionDialog = (_a) => {
343
343
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
344
344
  };
345
345
 
346
- const Wrapper$h = styled.div `
347
- border: 1px solid #f1f1f1;
348
- border-radius: 4px;
349
- border-left-width: 4px;
350
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
351
- display: flex;
352
- align-items: flex-start;
353
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
354
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
355
- box-sizing: border-box;
356
- `;
357
- const StyledIcon$5 = styled(Icon) `
358
- flex-shrink: 0;
359
- `;
360
- const Action$1 = styled.div `
361
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
362
- font-size: ${FontSizes.DEFAULT};
363
- font-family: ${FontStyles.DEFAULT};
364
- font-weight: 500;
365
- cursor: pointer;
366
- margin-top: 6px;
346
+ const Wrapper$h = styled.div `
347
+ border: 1px solid #f1f1f1;
348
+ border-radius: 4px;
349
+ border-left-width: 4px;
350
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
351
+ display: flex;
352
+ align-items: flex-start;
353
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
354
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
355
+ box-sizing: border-box;
356
+ `;
357
+ const StyledIcon$5 = styled(Icon) `
358
+ flex-shrink: 0;
359
+ `;
360
+ const Action$1 = styled.div `
361
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
362
+ font-size: ${FontSizes.DEFAULT};
363
+ font-family: ${FontStyles.DEFAULT};
364
+ font-weight: 500;
365
+ cursor: pointer;
366
+ margin-top: 6px;
367
367
  `;
368
368
  Action$1.defaultProps = { theme: EditableTheme };
369
369
  const Alert = (_a) => {
@@ -437,28 +437,28 @@ const Logo = (_a) => {
437
437
  }
438
438
  };
439
439
 
440
- const Container$3 = styled.header `
441
- width: 100%;
442
- display: flex;
443
- padding: 20px;
444
- box-sizing: border-box;
445
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
446
- background: '#fff';
447
- justify-content: space-between;
448
- `;
449
- const LogoWrapper = styled.div `
450
- display: flex;
451
- align-items: center;
452
- `;
453
- const Image = styled.img `
454
- height: 30px !important;
455
- width: auto !important;
456
- `;
457
- const Buttons = styled.div `
458
- display: flex;
459
- flex-direction: row;
460
- column-gap: 10px;
461
- flex-direction: reverse;
440
+ const Container$3 = styled.header `
441
+ width: 100%;
442
+ display: flex;
443
+ padding: 20px;
444
+ box-sizing: border-box;
445
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
446
+ background: '#fff';
447
+ justify-content: space-between;
448
+ `;
449
+ const LogoWrapper = styled.div `
450
+ display: flex;
451
+ align-items: center;
452
+ `;
453
+ const Image = styled.img `
454
+ height: 30px !important;
455
+ width: auto !important;
456
+ `;
457
+ const Buttons = styled.div `
458
+ display: flex;
459
+ flex-direction: row;
460
+ column-gap: 10px;
461
+ flex-direction: reverse;
462
462
  `;
463
463
  const AppHeader = ({ logoUrl, buttons = [] }) => {
464
464
  return (React.createElement(Container$3, null,
@@ -466,30 +466,30 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
466
466
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
467
467
  };
468
468
 
469
- const Wrapper$g = styled.div `
470
- display: inline-block;
471
- border-radius: 4px;
472
- padding: 4px 6px;
473
- background: ${props => Colors[props.$color].Hex};
474
- color: #ffffff;
475
- box-sizing: border-box;
476
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
477
- `;
478
- const Content$3 = styled.div `
479
- display: flex;
480
- align-items: center;
481
- `;
482
- const Label$4 = styled.div `
483
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
484
- font-size: ${FontSizes.SMALL};
485
- font-weight: 500;
486
- font-family: ${FontStyles.DEFAULT};
487
- line-height: 1.2em;
488
- `;
489
- const Remove$1 = styled.div `
490
- margin-left: 10px;
491
- display: flex;
492
- align-items: center;
469
+ const Wrapper$g = styled.div `
470
+ display: inline-block;
471
+ border-radius: 4px;
472
+ padding: 4px 6px;
473
+ background: ${props => Colors[props.$color].Hex};
474
+ color: #ffffff;
475
+ box-sizing: border-box;
476
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
477
+ `;
478
+ const Content$3 = styled.div `
479
+ display: flex;
480
+ align-items: center;
481
+ `;
482
+ const Label$4 = styled.div `
483
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
484
+ font-size: ${FontSizes.SMALL};
485
+ font-weight: 500;
486
+ font-family: ${FontStyles.DEFAULT};
487
+ line-height: 1.2em;
488
+ `;
489
+ const Remove$1 = styled.div `
490
+ margin-left: 10px;
491
+ display: flex;
492
+ align-items: center;
493
493
  `;
494
494
  const Tag = (_a) => {
495
495
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -500,89 +500,89 @@ const Tag = (_a) => {
500
500
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
501
501
  };
502
502
 
503
- const SidebarContainer = styled.div `
504
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
505
- display: flex;
506
- flex-direction: column;
507
- height: 100%;
508
- padding: 12px 0px;
509
- width: ${props => (props.$isOpen ? props.$width : '60px')};
510
- `;
511
- const MenuWrapper = styled.div `
512
- display: flex;
513
- align-items: center;
514
- border-left-width: 4px;
515
- border-left-style: solid;
516
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
517
- cursor: pointer;
518
- height: 40px;
519
-
520
- &:hover > div {
521
- color: ${props => props.$color.Hex};
522
- }
523
-
524
- &:hover > svg > path {
525
- fill: ${Colors.BLACK.Hex} !important;
526
- }
527
- `;
528
- const MenuIcon = styled(Icon) `
529
- width: 20px;
530
- height: 20px;
531
- margin: 0px 16px;
532
- flex-shrink: 0;
533
-
534
- > path {
535
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
536
- }
537
- `;
538
- const MenuLabel = styled.div `
539
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
540
- flex: 1;
541
- font-size: 12px;
542
- font-style: normal;
543
- font-weight: 600;
544
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
545
- line-height: 16px;
546
- padding: 12px 0px;
547
- letter-spacing: 1px;
548
- `;
549
- const SubMenu = styled.div `
550
- overflow-y: auto;
551
- padding-left: 44px;
552
- padding-right: 20px;
553
- padding-bottom: 10px;
554
- `;
555
- const SubMenuItem = styled.a `
556
- display: block;
557
- padding: 8px 12px;
558
- border-radius: 8px;
559
- font-size: 13px;
560
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
561
- line-height: 20px;
562
- text-decoration: none;
563
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
564
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
565
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
566
- cursor: pointer;
567
-
568
- &:hover {
569
- color: ${props => props.$color.Hex};
570
- font-weight: 500;
571
- }
503
+ const SidebarContainer = styled.div `
504
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
505
+ display: flex;
506
+ flex-direction: column;
507
+ height: 100%;
508
+ padding: 12px 0px;
509
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
510
+ `;
511
+ const MenuWrapper = styled.div `
512
+ display: flex;
513
+ align-items: center;
514
+ border-left-width: 4px;
515
+ border-left-style: solid;
516
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
517
+ cursor: pointer;
518
+ height: 40px;
519
+
520
+ &:hover > div {
521
+ color: ${props => props.$color.Hex};
522
+ }
523
+
524
+ &:hover > svg > path {
525
+ fill: ${Colors.BLACK.Hex} !important;
526
+ }
527
+ `;
528
+ const MenuIcon = styled(Icon) `
529
+ width: 20px;
530
+ height: 20px;
531
+ margin: 0px 16px;
532
+ flex-shrink: 0;
533
+
534
+ > path {
535
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
536
+ }
537
+ `;
538
+ const MenuLabel = styled.div `
539
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
540
+ flex: 1;
541
+ font-size: 12px;
542
+ font-style: normal;
543
+ font-weight: 600;
544
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
545
+ line-height: 16px;
546
+ padding: 12px 0px;
547
+ letter-spacing: 1px;
548
+ `;
549
+ const SubMenu = styled.div `
550
+ overflow-y: auto;
551
+ padding-left: 44px;
552
+ padding-right: 20px;
553
+ padding-bottom: 10px;
554
+ `;
555
+ const SubMenuItem = styled.a `
556
+ display: block;
557
+ padding: 8px 12px;
558
+ border-radius: 8px;
559
+ font-size: 13px;
560
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
561
+ line-height: 20px;
562
+ text-decoration: none;
563
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
564
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
565
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
566
+ cursor: pointer;
567
+
568
+ &:hover {
569
+ color: ${props => props.$color.Hex};
570
+ font-weight: 500;
571
+ }
572
572
  `;
573
- const Footer = styled.div `
574
- padding: 20px 14px 0px;
575
- display: flex;
576
- align-items: center;
573
+ const Footer = styled.div `
574
+ padding: 20px 14px 0px;
575
+ display: flex;
576
+ align-items: center;
577
577
  `;
578
- const FooterInfo = styled.div `
579
- display: flex;
580
- flex-direction: column;
581
- flex: 1;
582
- align-items: flex-start;
578
+ const FooterInfo = styled.div `
579
+ display: flex;
580
+ flex-direction: column;
581
+ flex: 1;
582
+ align-items: flex-start;
583
583
  `;
584
- const SidebarMenuContainer = styled.div `
585
- flex-grow: 1;
584
+ const SidebarMenuContainer = styled.div `
585
+ flex-grow: 1;
586
586
  `;
587
587
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
588
588
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -608,73 +608,73 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
608
608
  }, small: true }))));
609
609
  };
610
610
 
611
- const Wrapper$f = styled.div `
612
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
613
- border-radius: 8px;
614
- box-sizing: border-box;
615
- display: flex;
616
- align-items: center;
617
- justify-content: space-between;
618
- padding: 16px 20px;
611
+ const Wrapper$f = styled.div `
612
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
613
+ border-radius: 8px;
614
+ box-sizing: border-box;
615
+ display: flex;
616
+ align-items: center;
617
+ justify-content: space-between;
618
+ padding: 16px 20px;
619
619
  `;
620
620
  Wrapper$f.defaultProps = { theme: EditableTheme };
621
- const Left = styled.div `
622
- box-sizing: border-box;
623
- display: flex;
624
- align-items: center;
625
- justify-content: space-between;
626
- flex-shrink: 0;
627
- `;
628
- const Info$1 = styled.div `
629
- box-sizing: border-box;
630
- display: flex;
631
- align-items: center;
632
- margin-right: 30px;
633
- `;
634
- const Selected = styled.span `
635
- font-size: 14px;
636
- font-weight: 400;
637
- font-family: ${FontStyles.DEFAULT};
638
- color: ${Colors.BLACK.Hex};
639
- line-height: 1;
640
- `;
641
- const Clear = styled.span `
642
- font-size: 14px;
643
- font-weight: 400;
644
- font-family: ${FontStyles.DEFAULT};
645
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
646
- line-height: 1;
647
- cursor: pointer;
648
- padding-left: 10px;
649
- margin-left: 10px;
650
- border-left: 1px solid #ccc;
621
+ const Left = styled.div `
622
+ box-sizing: border-box;
623
+ display: flex;
624
+ align-items: center;
625
+ justify-content: space-between;
626
+ flex-shrink: 0;
627
+ `;
628
+ const Info$1 = styled.div `
629
+ box-sizing: border-box;
630
+ display: flex;
631
+ align-items: center;
632
+ margin-right: 30px;
633
+ `;
634
+ const Selected = styled.span `
635
+ font-size: 14px;
636
+ font-weight: 400;
637
+ font-family: ${FontStyles.DEFAULT};
638
+ color: ${Colors.BLACK.Hex};
639
+ line-height: 1;
640
+ `;
641
+ const Clear = styled.span `
642
+ font-size: 14px;
643
+ font-weight: 400;
644
+ font-family: ${FontStyles.DEFAULT};
645
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
646
+ line-height: 1;
647
+ cursor: pointer;
648
+ padding-left: 10px;
649
+ margin-left: 10px;
650
+ border-left: 1px solid #ccc;
651
651
  `;
652
652
  Clear.defaultProps = { theme: EditableTheme };
653
- const Actions$1 = styled.div `
654
- box-sizing: border-box;
655
- display: flex;
656
- align-items: center;
657
- column-gap: 10px;
658
- `;
659
- const Error = styled.div `
660
- box-sizing: border-box;
661
- display: flex;
662
- align-items: center;
663
- background: rgba(${Colors.RED.Rgb}, 0.1);
664
- border-radius: 4px;
665
- padding: 6px 8px;
666
- text-overflow: ellipsis;
667
- white-space: nowrap;
668
- overflow: hidden;
669
- margin-left: 30px;
670
- `;
671
- const ErrorMsg = styled.span `
672
- font-size: 14px;
673
- font-weight: 500;
674
- font-family: ${FontStyles.DEFAULT};
675
- line-height: 1em;
676
- color: ${Colors.RED.Hex};
677
- margin-left: 8px;
653
+ const Actions$1 = styled.div `
654
+ box-sizing: border-box;
655
+ display: flex;
656
+ align-items: center;
657
+ column-gap: 10px;
658
+ `;
659
+ const Error = styled.div `
660
+ box-sizing: border-box;
661
+ display: flex;
662
+ align-items: center;
663
+ background: rgba(${Colors.RED.Rgb}, 0.1);
664
+ border-radius: 4px;
665
+ padding: 6px 8px;
666
+ text-overflow: ellipsis;
667
+ white-space: nowrap;
668
+ overflow: hidden;
669
+ margin-left: 30px;
670
+ `;
671
+ const ErrorMsg = styled.span `
672
+ font-size: 14px;
673
+ font-weight: 500;
674
+ font-family: ${FontStyles.DEFAULT};
675
+ line-height: 1em;
676
+ color: ${Colors.RED.Hex};
677
+ margin-left: 8px;
678
678
  `;
679
679
  const BulkActionBar = (_a) => {
680
680
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -691,44 +691,44 @@ const BulkActionBar = (_a) => {
691
691
  React.createElement(ErrorMsg, null, errorMsg))) : null));
692
692
  };
693
693
 
694
- const Wrapper$e = styled.div `
695
- background: #fff;
696
- border-radius: 8px;
697
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
698
- display: flex;
699
- flex-direction: column;
700
- gap: 4px;
701
- max-height: ${props => props.$maxHeight || '312px'};
702
- padding: 10px;
703
- width: 200px;
704
- `;
705
- const MenuItem = styled.div `
706
- align-items: center;
707
- border-radius: 8px;
708
- border: 1px solid transparent;
709
- display: flex;
710
- gap: 8px;
711
- height: 38px;
712
- padding: 8px;
713
- &:hover {
714
- background: rgba(1, 147, 215, 0.1);
715
- cursor: pointer;
716
-
717
- svg,
718
- path {
719
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
720
- }
721
- }
694
+ const Wrapper$e = styled.div `
695
+ background: #fff;
696
+ border-radius: 8px;
697
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
698
+ display: flex;
699
+ flex-direction: column;
700
+ gap: 4px;
701
+ max-height: ${props => props.$maxHeight || '312px'};
702
+ padding: 10px;
703
+ width: 200px;
704
+ `;
705
+ const MenuItem = styled.div `
706
+ align-items: center;
707
+ border-radius: 8px;
708
+ border: 1px solid transparent;
709
+ display: flex;
710
+ gap: 8px;
711
+ height: 38px;
712
+ padding: 8px;
713
+ &:hover {
714
+ background: rgba(1, 147, 215, 0.1);
715
+ cursor: pointer;
716
+
717
+ svg,
718
+ path {
719
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
720
+ }
721
+ }
722
722
  `;
723
723
  MenuItem.defaultProps = { theme: EditableTheme };
724
- const Title$1 = styled.span `
725
- font-family: Roboto;
726
- font-size: 14px;
727
- font-weight: 400;
728
- height: auto;
729
- letter-spacing: 0px;
730
- line-height: 22px;
731
- text-align: left;
724
+ const Title$1 = styled.span `
725
+ font-family: Roboto;
726
+ font-size: 14px;
727
+ font-weight: 400;
728
+ height: auto;
729
+ letter-spacing: 0px;
730
+ line-height: 22px;
731
+ text-align: left;
732
732
  `;
733
733
  const MoreMenu = (_a) => {
734
734
  var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
@@ -739,17 +739,17 @@ const MoreMenu = (_a) => {
739
739
  })));
740
740
  };
741
741
 
742
- const Wrapper$d = styled.div `
743
- position: relative;
744
- display: inline-block;
745
- `;
746
- const StyledMoreMenu = styled(MoreMenu) `
747
- position: absolute;
748
- right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
749
- left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
750
- top: ${props => (props.$small ? '30px' : '40px')};
751
- width: ${props => props.$menuWidth};
752
- z-index: 10;
742
+ const Wrapper$d = styled.div `
743
+ position: relative;
744
+ display: inline-block;
745
+ `;
746
+ const StyledMoreMenu = styled(MoreMenu) `
747
+ position: absolute;
748
+ right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
749
+ left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
750
+ top: ${props => (props.$small ? '30px' : '40px')};
751
+ width: ${props => props.$menuWidth};
752
+ z-index: 10;
753
753
  `;
754
754
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', menuWidth = '200px', }) => {
755
755
  const [show_menu, toggleMenu] = React.useState(false);
@@ -758,17 +758,17 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
758
758
  show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
759
759
  };
760
760
 
761
- const Wrapper$c = styled.div `
762
- display: inline-block;
763
- position: relative;
764
- height: 16px;
765
- `;
766
- const StyledIcon$4 = styled(Icon) `
767
- width: 16px;
768
- height: 16px;
769
- margin: 0px 6px;
770
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
771
- cursor: pointer;
761
+ const Wrapper$c = styled.div `
762
+ display: inline-block;
763
+ position: relative;
764
+ height: 16px;
765
+ `;
766
+ const StyledIcon$4 = styled(Icon) `
767
+ width: 16px;
768
+ height: 16px;
769
+ margin: 0px 6px;
770
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
771
+ cursor: pointer;
772
772
  `;
773
773
  StyledIcon$4.defaultProps = { theme: EditableTheme };
774
774
  const positions = {
@@ -808,55 +808,101 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
808
808
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
809
809
  };
810
810
 
811
- const Wrapper$b = styled.label `
812
- border-radius: 4px;
813
- padding: 4px 0px 4px 6px;
814
- margin-left: -6px;
815
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
816
- display: flex;
817
- align-items: center;
818
- font-size: ${FontSizes.DEFAULT};
819
- line-height: 1.6em;
820
- box-sizing: border-box;
821
- background: ${props => (props.$invalid ? `rgba(${Colors.RED.Rgb}, 0.05)` : 'transparent')};
822
-
823
- &:focus-within {
824
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
825
- }
811
+ const Wrapper$b = styled.label `
812
+ border-radius: 4px;
813
+ padding: 4px 0px 4px 6px;
814
+ margin-left: -6px;
815
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
816
+ display: flex;
817
+ align-items: center;
818
+ font-size: ${FontSizes.DEFAULT};
819
+ line-height: 1.6em;
820
+ box-sizing: border-box;
821
+ position: relative;
822
+
823
+ &:focus-within {
824
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
825
+ }
826
826
  `;
827
827
  Wrapper$b.defaultProps = { theme: EditableTheme };
828
- const Input$2 = styled.input `
829
- font-size: 20px;
830
- margin: 0px;
831
- line-height: 1.1em;
832
- box-sizing: border-box;
833
- `;
834
- const Label$3 = styled.span `
835
- font-family: ${FontStyles.DEFAULT};
836
- font-size: ${FontSizes.DEFAULT};
837
- font-weight: 400;
838
- line-height: 1.6em;
839
- color: ${Colors.BLACK.Hex};
840
- margin-left: 6px;
841
- box-sizing: border-box;
828
+ const Input$2 = styled.input `
829
+ font-size: 20px;
830
+ margin: 0px;
831
+ line-height: 1.1em;
832
+ box-sizing: border-box;
833
+ position: absolute;
834
+ opacity: 0;
835
+ cursor: pointer;
836
+ height: 0;
837
+ width: 0;
838
+ &:checked + span {
839
+ background-color: ${Colors.PRIMARY.Hex};
840
+ border-color: ${Colors.PRIMARY.Hex};
841
+ }
842
+ &:checked:disabled + span {
843
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
844
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
845
+ }
846
+ &:disabled + span {
847
+ background-color: #fff;
848
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
849
+ }
850
+ &:checked + span:after {
851
+ display: block;
852
+ }
853
+ `;
854
+ const Check$1 = styled.span `
855
+ height: 17px;
856
+ width: 17px;
857
+ background-color: #fff;
858
+ border-width: 2px;
859
+ border-style: solid;
860
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
861
+ box-sizing: border-box;
862
+ position: relative;
863
+ &:after {
864
+ content: "";
865
+ position: absolute;
866
+ left: 3px;
867
+ top: 0px;
868
+ width: 7px;
869
+ height: 12px;
870
+ border: solid white;
871
+ border-width: 0 3px 3px 0;
872
+ -webkit-transform: rotate(45deg);
873
+ -ms-transform: rotate(45deg);
874
+ transform: rotate(45deg);
875
+ box-sizing: border-box;
876
+ display: none;
877
+ }
878
+ `;
879
+ const Label$3 = styled.span `
880
+ font-family: ${FontStyles.DEFAULT};
881
+ font-size: ${FontSizes.DEFAULT};
882
+ font-weight: 400;
883
+ line-height: 1.6em;
884
+ color: ${Colors.BLACK.Hex};
885
+ margin-left: 6px;
886
+ box-sizing: border-box;
842
887
  `;
843
888
  const Checkbox = (_a) => {
844
889
  var { children, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "invalid", "tooltip"]);
845
- return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled, "$invalid": invalid }, accessibleProps),
890
+ return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps),
846
891
  React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
892
+ React.createElement(Check$1, { "$invalid": invalid }),
847
893
  children ? (React.createElement(Label$3, null,
848
894
  children,
849
895
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
850
896
  };
851
897
 
852
- const SelectAll = styled.div `
853
- padding: 8px 12px;
854
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
855
- box-sizing: border-box;
898
+ const SelectAll = styled.div `
899
+ padding: 8px 12px;
900
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
901
+ box-sizing: border-box;
856
902
  `;
857
- const Options$1 = styled.div `
858
- padding: 12px;
859
- box-sizing: border-box;
903
+ const Options$1 = styled.div `
904
+ padding: 12px;
905
+ box-sizing: border-box;
860
906
  `;
861
907
  const Checklist = (_a) => {
862
908
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -895,51 +941,51 @@ const Checklist = (_a) => {
895
941
  }))));
896
942
  };
897
943
 
898
- const Wrapper$a = styled.div `
899
- border-radius: 4px;
900
- height: 40px;
901
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
902
- position: relative;
903
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
904
- border-width: 1px;
905
- border-style: solid;
906
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
907
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
908
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
909
- box-sizing: border-box;
910
- padding: 10px 0px;
911
- display: flex;
912
- align-items: center;
913
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
914
-
915
- &:focus-within {
916
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
917
- }
944
+ const Wrapper$a = styled.div `
945
+ border-radius: 4px;
946
+ height: 40px;
947
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
948
+ position: relative;
949
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
950
+ border-width: 1px;
951
+ border-style: solid;
952
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
953
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
954
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
955
+ box-sizing: border-box;
956
+ padding: 10px 0px;
957
+ display: flex;
958
+ align-items: center;
959
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
960
+
961
+ &:focus-within {
962
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
963
+ }
918
964
  `;
919
965
  Wrapper$a.defaultProps = { theme: EditableTheme };
920
- const Trigger$1 = styled.select `
921
- appearance: none;
922
- box-shadow: none;
923
- outline: none;
924
- border: none;
925
- color: ${Colors.BLACK.Hex};
926
- font-size: ${FontSizes.DEFAULT};
927
- font-weight: 400;
928
- font-family: ${FontStyles.DEFAULT};
929
- line-height: 2.9em;
930
- background-color: transparent;
931
- background-image: none;
932
- width: 100%;
933
- box-sizing: border-box;
934
- padding: 0px 30px 0px 10px;
935
- box-sizing: border-box;
936
- position: relative;
937
- z-index: 2;
938
- `;
939
- const IconWrapper$2 = styled(Icon) `
940
- position: absolute;
941
- right: 9px;
942
- z-index: 1;
966
+ const Trigger$1 = styled.select `
967
+ appearance: none;
968
+ box-shadow: none;
969
+ outline: none;
970
+ border: none;
971
+ color: ${Colors.BLACK.Hex};
972
+ font-size: ${FontSizes.DEFAULT};
973
+ font-weight: 400;
974
+ font-family: ${FontStyles.DEFAULT};
975
+ line-height: 2.9em;
976
+ background-color: transparent;
977
+ background-image: none;
978
+ width: 100%;
979
+ box-sizing: border-box;
980
+ padding: 0px 30px 0px 10px;
981
+ box-sizing: border-box;
982
+ position: relative;
983
+ z-index: 2;
984
+ `;
985
+ const IconWrapper$2 = styled(Icon) `
986
+ position: absolute;
987
+ right: 9px;
988
+ z-index: 1;
943
989
  `;
944
990
  const Select = (_a) => {
945
991
  var { options, optionGroups, placeholder, readOnly, invalid, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
@@ -959,13 +1005,13 @@ const Select = (_a) => {
959
1005
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
960
1006
  };
961
1007
 
962
- const DatePickerWrapper = styled.div `
963
- display: flex;
964
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1008
+ const DatePickerWrapper = styled.div `
1009
+ display: flex;
1010
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
965
1011
  `;
966
- const Middle = styled.div `
967
- margin: 0px -1px;
968
- flex-grow: 1;
1012
+ const Middle = styled.div `
1013
+ margin: 0px -1px;
1014
+ flex-grow: 1;
969
1015
  `;
970
1016
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, onChange, style, }) => {
971
1017
  const dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
@@ -1029,64 +1075,64 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1029
1075
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
1030
1076
  };
1031
1077
 
1032
- const Scrim$1 = styled.div `
1033
- position: ${({ $position }) => $position};
1034
- top: 0;
1035
- right: 0;
1036
- bottom: 0;
1037
- left: 0;
1038
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1039
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1040
- `;
1041
- const Container$2 = styled.div `
1042
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1043
- min-width: 400px;
1044
- width: ${({ $width }) => $width || '400px'};
1045
- overflow: hidden;
1046
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1047
- outline: none;
1048
- border: none;
1049
- position: ${({ $position }) => $position};
1050
- top: 0;
1051
- right: 0;
1052
- bottom: 0;
1053
- padding: 0px;
1054
- display: flex;
1055
- flex-direction: column;
1056
- box-sizing: border-box;
1057
- background: #fff;
1058
- `;
1059
- const Header$2 = styled.div `
1060
- padding: 30px 20px;
1061
- display: flex;
1062
- align-items: flex-start;
1063
- box-sizing: border-box;
1064
- flex-shrink: 0;
1065
- background: #fff;
1066
- `;
1067
- const Close$1 = styled.div `
1068
- margin-left: auto;
1069
- display: flex;
1070
- align-items: center;
1071
- padding-left: 20px;
1072
- cursor: pointer;
1073
- `;
1074
- const ContentWrapper$1 = styled.div `
1075
- overflow-x: hidden;
1076
- overflow-y: auto;
1077
- box-sizing: border-box;
1078
- flex: 1;
1079
- background: #fff;
1080
- `;
1081
- const ButtonBar$1 = styled.div `
1082
- padding: 20px;
1083
- display: flex;
1084
- align-items: center;
1085
- justify-content: flex-end;
1086
- box-sizing: border-box;
1087
- gap: 10px;
1088
- flex-shrink: 0;
1089
- background: #fff;
1078
+ const Scrim$1 = styled.div `
1079
+ position: ${({ $position }) => $position};
1080
+ top: 0;
1081
+ right: 0;
1082
+ bottom: 0;
1083
+ left: 0;
1084
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1085
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1086
+ `;
1087
+ const Container$2 = styled.div `
1088
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1089
+ min-width: 400px;
1090
+ width: ${({ $width }) => $width || '400px'};
1091
+ overflow: hidden;
1092
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1093
+ outline: none;
1094
+ border: none;
1095
+ position: ${({ $position }) => $position};
1096
+ top: 0;
1097
+ right: 0;
1098
+ bottom: 0;
1099
+ padding: 0px;
1100
+ display: flex;
1101
+ flex-direction: column;
1102
+ box-sizing: border-box;
1103
+ background: #fff;
1104
+ `;
1105
+ const Header$2 = styled.div `
1106
+ padding: 30px 20px;
1107
+ display: flex;
1108
+ align-items: flex-start;
1109
+ box-sizing: border-box;
1110
+ flex-shrink: 0;
1111
+ background: #fff;
1112
+ `;
1113
+ const Close$1 = styled.div `
1114
+ margin-left: auto;
1115
+ display: flex;
1116
+ align-items: center;
1117
+ padding-left: 20px;
1118
+ cursor: pointer;
1119
+ `;
1120
+ const ContentWrapper$1 = styled.div `
1121
+ overflow-x: hidden;
1122
+ overflow-y: auto;
1123
+ box-sizing: border-box;
1124
+ flex: 1;
1125
+ background: #fff;
1126
+ `;
1127
+ const ButtonBar$1 = styled.div `
1128
+ padding: 20px;
1129
+ display: flex;
1130
+ align-items: center;
1131
+ justify-content: flex-end;
1132
+ box-sizing: border-box;
1133
+ gap: 10px;
1134
+ flex-shrink: 0;
1135
+ background: #fff;
1090
1136
  `;
1091
1137
  const Drawer = (_a) => {
1092
1138
  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"]);
@@ -1117,52 +1163,52 @@ const Drawer = (_a) => {
1117
1163
  };
1118
1164
 
1119
1165
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
1120
- const LabelRow = styled.div `
1121
- display: flex;
1122
- align-items: center;
1123
- justify-content: space-between;
1124
- margin: 0 0 4px 0;
1125
- box-sizing: border-box;
1126
- `;
1127
- const Label$2 = styled.label `
1128
- font-size: ${FontSizes.DEFAULT};
1129
- font-weight: 500;
1130
- line-height: 1.3em;
1131
- font-family: ${FontStyles.DEFAULT};
1132
- color: ${Colors.BLACK.Hex};
1133
- display: flex;
1134
- align-items: center;
1135
- `;
1136
- const Required = styled.span `
1137
- color: ${Colors.RED.Hex};
1138
- margin-left: 4px;
1139
- `;
1140
- const Action = styled.span `
1141
- font-size: ${FontSizes.DEFAULT};
1142
- font-weight: 500;
1143
- line-height: 1em;
1144
- font-family: ${FontStyles.DEFAULT};
1145
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1146
- cursor: pointer;
1166
+ const LabelRow = styled.div `
1167
+ display: flex;
1168
+ align-items: center;
1169
+ justify-content: space-between;
1170
+ margin: 0 0 4px 0;
1171
+ box-sizing: border-box;
1172
+ `;
1173
+ const Label$2 = styled.label `
1174
+ font-size: ${FontSizes.DEFAULT};
1175
+ font-weight: 500;
1176
+ line-height: 1.3em;
1177
+ font-family: ${FontStyles.DEFAULT};
1178
+ color: ${Colors.BLACK.Hex};
1179
+ display: flex;
1180
+ align-items: center;
1181
+ `;
1182
+ const Required = styled.span `
1183
+ color: ${Colors.RED.Hex};
1184
+ margin-left: 4px;
1185
+ `;
1186
+ const Action = styled.span `
1187
+ font-size: ${FontSizes.DEFAULT};
1188
+ font-weight: 500;
1189
+ line-height: 1em;
1190
+ font-family: ${FontStyles.DEFAULT};
1191
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1192
+ cursor: pointer;
1147
1193
  `;
1148
1194
  Action.defaultProps = { theme: EditableTheme };
1149
- const Description = styled.div `
1150
- font-size: ${FontSizes.SMALL};
1151
- font-weight: 400;
1152
- line-height: 1.3em;
1153
- font-family: ${FontStyles.DEFAULT};
1154
- color: ${Colors.BLACK.Hex};
1155
- margin: 0 0 8px 0;
1156
- box-sizing: border-box;
1157
- `;
1158
- const Validation = styled.div `
1159
- font-size: ${FontSizes.SMALL};
1160
- font-weight: 400;
1161
- line-height: 1.3em;
1162
- font-family: ${FontStyles.DEFAULT};
1163
- color: ${Colors.RED.Hex};
1164
- margin: 4px 0 0 0;
1165
- box-sizing: border-box;
1195
+ const Description = styled.div `
1196
+ font-size: ${FontSizes.SMALL};
1197
+ font-weight: 400;
1198
+ line-height: 1.3em;
1199
+ font-family: ${FontStyles.DEFAULT};
1200
+ color: ${Colors.BLACK.Hex};
1201
+ margin: 0 0 8px 0;
1202
+ box-sizing: border-box;
1203
+ `;
1204
+ const Validation = styled.div `
1205
+ font-size: ${FontSizes.SMALL};
1206
+ font-weight: 400;
1207
+ line-height: 1.3em;
1208
+ font-family: ${FontStyles.DEFAULT};
1209
+ color: ${Colors.RED.Hex};
1210
+ margin: 4px 0 0 0;
1211
+ box-sizing: border-box;
1166
1212
  `;
1167
1213
  const Field = (_a) => {
1168
1214
  var { action, children, validationText, label, description, required, htmlFor, style, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1178,34 +1224,34 @@ const Field = (_a) => {
1178
1224
  validationText ? React.createElement(Validation, null, validationText) : null));
1179
1225
  };
1180
1226
 
1181
- const Wrapper$8 = styled.fieldset `
1182
- margin-inline-start: 0px;
1183
- margin-inline-end: 0px;
1184
- padding-block-start: 0px;
1185
- padding-inline-start: 0px;
1186
- padding-inline-end: 0px;
1187
- padding-block-end: 0px;
1188
- min-inline-size: min-content;
1189
- border-width: 0px;
1190
- border-style: none;
1191
- border-color: transparent;
1192
- border-image: none;
1193
- `;
1194
- const Label$1 = styled.legend `
1195
- padding-inline-start: 0px;
1196
- padding-inline-end: 0px;
1197
-
1198
- color: ${Colors.BLACK.Hex};
1199
- font-family: ${FontStyles.DEFAULT};
1200
- font-size: ${FontSizes.DEFAULT};
1201
- font-weight: 500;
1202
- line-height: 22px;
1203
- margin-bottom: 6px;
1204
- `;
1205
- const Content$1 = styled.div `
1206
- padding: 20px;
1207
- border-radius: 8px;
1208
- background: #fcfcfc;
1227
+ const Wrapper$8 = styled.fieldset `
1228
+ margin-inline-start: 0px;
1229
+ margin-inline-end: 0px;
1230
+ padding-block-start: 0px;
1231
+ padding-inline-start: 0px;
1232
+ padding-inline-end: 0px;
1233
+ padding-block-end: 0px;
1234
+ min-inline-size: min-content;
1235
+ border-width: 0px;
1236
+ border-style: none;
1237
+ border-color: transparent;
1238
+ border-image: none;
1239
+ `;
1240
+ const Label$1 = styled.legend `
1241
+ padding-inline-start: 0px;
1242
+ padding-inline-end: 0px;
1243
+
1244
+ color: ${Colors.BLACK.Hex};
1245
+ font-family: ${FontStyles.DEFAULT};
1246
+ font-size: ${FontSizes.DEFAULT};
1247
+ font-weight: 500;
1248
+ line-height: 22px;
1249
+ margin-bottom: 6px;
1250
+ `;
1251
+ const Content$1 = styled.div `
1252
+ padding: 20px;
1253
+ border-radius: 8px;
1254
+ background: #fcfcfc;
1209
1255
  `;
1210
1256
  const FieldGroup = ({ children, label }) => {
1211
1257
  return (React.createElement(Wrapper$8, null,
@@ -1213,70 +1259,70 @@ const FieldGroup = ({ children, label }) => {
1213
1259
  React.createElement(Content$1, null, children)));
1214
1260
  };
1215
1261
 
1216
- const Dropzone = styled.div `
1217
- border-radius: 8px;
1218
- border-width: 1px;
1219
- border-style: dashed;
1220
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1221
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1222
- cursor: copy;
1262
+ const Dropzone = styled.div `
1263
+ border-radius: 8px;
1264
+ border-width: 1px;
1265
+ border-style: dashed;
1266
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1267
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1268
+ cursor: copy;
1223
1269
  `;
1224
1270
  Dropzone.defaultProps = { theme: EditableTheme };
1225
- const IconWrapper$1 = styled.div `
1226
- width: 80px;
1227
- height: 80px;
1228
- border-radius: 40px;
1229
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1230
- display: flex;
1231
- align-items: center;
1232
- justify-content: center;
1233
- `;
1234
- const StyledIcon$3 = styled(Icon) `
1235
- width: 40px !important;
1236
- height: 40px !important;
1237
-
1238
- > path {
1239
- fill: ${Colors.GRAY.Hex} !important;
1240
- }
1241
- `;
1242
- const ClickZone = styled.div `
1243
- margin: 40px 20px;
1244
- display: flex;
1245
- flex-direction: column;
1246
- align-items: center;
1247
- gap: 16px;
1248
- `;
1249
- const Content = styled.div `
1250
- display: flex;
1251
- flex-direction: column;
1252
- align-items: center;
1253
- gap: 2px;
1254
- `;
1255
- const Files = styled.div `
1256
- display: flex;
1257
- flex-direction: column;
1258
- align-self: stretch;
1259
- gap: 10px;
1260
- margin: 20px;
1261
- `;
1262
- const File = styled.div `
1263
- display: flex;
1264
- padding: 10px;
1265
- align-items: center;
1266
- justify-content: space-between;
1267
- gap: 10px;
1268
- border-radius: 4px;
1269
- border: 1px solid #cccccc;
1270
- background: #ffffff;
1271
- `;
1272
- const Remove = styled(Icon) `
1273
- width: 24px;
1274
- height: 24px;
1275
- cursor: pointer;
1276
-
1277
- > path {
1278
- fill: ${Colors.RED.Hex} !important;
1279
- }
1271
+ const IconWrapper$1 = styled.div `
1272
+ width: 80px;
1273
+ height: 80px;
1274
+ border-radius: 40px;
1275
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1276
+ display: flex;
1277
+ align-items: center;
1278
+ justify-content: center;
1279
+ `;
1280
+ const StyledIcon$3 = styled(Icon) `
1281
+ width: 40px !important;
1282
+ height: 40px !important;
1283
+
1284
+ > path {
1285
+ fill: ${Colors.GRAY.Hex} !important;
1286
+ }
1287
+ `;
1288
+ const ClickZone = styled.div `
1289
+ margin: 40px 20px;
1290
+ display: flex;
1291
+ flex-direction: column;
1292
+ align-items: center;
1293
+ gap: 16px;
1294
+ `;
1295
+ const Content = styled.div `
1296
+ display: flex;
1297
+ flex-direction: column;
1298
+ align-items: center;
1299
+ gap: 2px;
1300
+ `;
1301
+ const Files = styled.div `
1302
+ display: flex;
1303
+ flex-direction: column;
1304
+ align-self: stretch;
1305
+ gap: 10px;
1306
+ margin: 20px;
1307
+ `;
1308
+ const File = styled.div `
1309
+ display: flex;
1310
+ padding: 10px;
1311
+ align-items: center;
1312
+ justify-content: space-between;
1313
+ gap: 10px;
1314
+ border-radius: 4px;
1315
+ border: 1px solid #cccccc;
1316
+ background: #ffffff;
1317
+ `;
1318
+ const Remove = styled(Icon) `
1319
+ width: 24px;
1320
+ height: 24px;
1321
+ cursor: pointer;
1322
+
1323
+ > path {
1324
+ fill: ${Colors.RED.Hex} !important;
1325
+ }
1280
1326
  `;
1281
1327
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, message, validateFile, }) => {
1282
1328
  const inputRef = React.useRef(null);
@@ -1463,114 +1509,114 @@ const formatAsSsn = (number) => {
1463
1509
  return formatted_value;
1464
1510
  };
1465
1511
 
1466
- const StyledInput = styled.input `
1467
- border: none !important;
1468
- background: none !important;
1469
- font-size: ${FontSizes.DEFAULT};
1470
- font-weight: 400;
1471
- font-family: ${FontStyles.DEFAULT};
1472
- line-height: 1.28em;
1473
- color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
1474
- position: relative;
1475
- height: ${props => props.$height || 'auto'};
1476
- padding: 10px;
1477
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1478
- box-shadow: none;
1479
- outline: none;
1480
- margin: 0px;
1481
- text-indent: 0px;
1482
- --webkit-appearance: none;
1483
- box-sizing: border-box;
1484
- display: block;
1485
- width: 100%;
1486
- `;
1487
- const StyledSuffix = styled.div `
1488
- box-sizing: border-box;
1489
- border-radius: 0px 4px 4px 0px;
1490
- display: flex;
1491
- justify-content: center;
1492
- align-items: center;
1493
- padding: 10px;
1494
- height: auto;
1495
- background: #f5f5f5;
1496
- border-width: 0px 0px 0px 1px;
1497
- border-style: solid;
1498
- border-color: #cccccc;
1499
- font-family: ${FontStyles.DEFAULT};
1500
- font-style: normal;
1501
- font-weight: 400;
1502
- font-size: ${FontSizes.DEFAULT};
1503
- color: Colors.BLACK.Hex;
1504
- `;
1505
- const StyledWrapper = styled.div `
1506
- display: flex;
1507
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1508
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1509
- position: relative;
1510
- border-width: 1px;
1511
- border-style: solid;
1512
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1513
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1514
-
1515
- &:focus-within {
1516
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1517
- }
1512
+ const StyledInput = styled.input `
1513
+ border: none !important;
1514
+ background: none !important;
1515
+ font-size: ${FontSizes.DEFAULT};
1516
+ font-weight: 400;
1517
+ font-family: ${FontStyles.DEFAULT};
1518
+ line-height: 1.28em;
1519
+ color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
1520
+ position: relative;
1521
+ height: ${props => props.$height || 'auto'};
1522
+ padding: 10px;
1523
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1524
+ box-shadow: none;
1525
+ outline: none;
1526
+ margin: 0px;
1527
+ text-indent: 0px;
1528
+ --webkit-appearance: none;
1529
+ box-sizing: border-box;
1530
+ display: block;
1531
+ width: 100%;
1532
+ `;
1533
+ const StyledSuffix = styled.div `
1534
+ box-sizing: border-box;
1535
+ border-radius: 0px 4px 4px 0px;
1536
+ display: flex;
1537
+ justify-content: center;
1538
+ align-items: center;
1539
+ padding: 10px;
1540
+ height: auto;
1541
+ background: #f5f5f5;
1542
+ border-width: 0px 0px 0px 1px;
1543
+ border-style: solid;
1544
+ border-color: #cccccc;
1545
+ font-family: ${FontStyles.DEFAULT};
1546
+ font-style: normal;
1547
+ font-weight: 400;
1548
+ font-size: ${FontSizes.DEFAULT};
1549
+ color: Colors.BLACK.Hex;
1550
+ `;
1551
+ const StyledWrapper = styled.div `
1552
+ display: flex;
1553
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1554
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1555
+ position: relative;
1556
+ border-width: 1px;
1557
+ border-style: solid;
1558
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1559
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1560
+
1561
+ &:focus-within {
1562
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1563
+ }
1518
1564
  `;
1519
1565
  StyledWrapper.defaultProps = { theme: EditableTheme };
1520
- const SuggestedValues = styled.div `
1521
- background: #fff;
1522
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1523
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1524
- border-radius: 0px 0px 4px 4px;
1525
- border-style: solid;
1526
- border-top: none;
1527
- border-width: 1px;
1528
- left: -1px;
1529
- position: absolute;
1530
- right: -1px;
1531
- top: 39px;
1532
- z-index: 10;
1533
- max-height: 220px;
1534
- overflow: auto;
1566
+ const SuggestedValues = styled.div `
1567
+ background: #fff;
1568
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1569
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1570
+ border-radius: 0px 0px 4px 4px;
1571
+ border-style: solid;
1572
+ border-top: none;
1573
+ border-width: 1px;
1574
+ left: -1px;
1575
+ position: absolute;
1576
+ right: -1px;
1577
+ top: 39px;
1578
+ z-index: 10;
1579
+ max-height: 220px;
1580
+ overflow: auto;
1535
1581
  `;
1536
1582
  SuggestedValues.defaultProps = { theme: EditableTheme };
1537
- const SuggestedSummary = styled.div `
1538
- color: ${Colors.MEDIUM_GRAY.Hex};
1539
- font-size: 12px;
1540
- font-family: ${FontStyles.DEFAULT};
1541
- font-weight: 500;
1542
- line-height: 18px;
1543
- padding: 10px 12px;
1544
- border-bottom: 1px solid #e5e5e5;
1545
- background: #fff;
1546
- z-index: 1;
1547
- position: sticky;
1548
- top: 0px;
1549
- `;
1550
- const SuggestedValue = styled.div `
1551
- cursor: pointer;
1552
- padding: 8px 12px;
1553
- font-size: ${FontSizes.DEFAULT};
1554
- font-family: ${FontStyles.DEFAULT};
1555
- font-weight: 400;
1556
- line-height: 1.6em;
1557
- color: ${Colors.BLACK.Hex};
1558
-
1559
- &:hover {
1560
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1561
- }
1583
+ const SuggestedSummary = styled.div `
1584
+ color: ${Colors.MEDIUM_GRAY.Hex};
1585
+ font-size: 12px;
1586
+ font-family: ${FontStyles.DEFAULT};
1587
+ font-weight: 500;
1588
+ line-height: 18px;
1589
+ padding: 10px 12px;
1590
+ border-bottom: 1px solid #e5e5e5;
1591
+ background: #fff;
1592
+ z-index: 1;
1593
+ position: sticky;
1594
+ top: 0px;
1595
+ `;
1596
+ const SuggestedValue = styled.div `
1597
+ cursor: pointer;
1598
+ padding: 8px 12px;
1599
+ font-size: ${FontSizes.DEFAULT};
1600
+ font-family: ${FontStyles.DEFAULT};
1601
+ font-weight: 400;
1602
+ line-height: 1.6em;
1603
+ color: ${Colors.BLACK.Hex};
1604
+
1605
+ &:hover {
1606
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1607
+ }
1562
1608
  `;
1563
1609
  SuggestedValue.defaultProps = { theme: EditableTheme };
1564
- const CharacterCount = styled.div `
1565
- font-family: ${FontStyles.DEFAULT};
1566
- font-size: ${FontSizes.SMALL};
1567
- color: ${Colors.MEDIUM_GRAY.Hex};
1568
- padding: 10px;
1610
+ const CharacterCount = styled.div `
1611
+ font-family: ${FontStyles.DEFAULT};
1612
+ font-size: ${FontSizes.SMALL};
1613
+ color: ${Colors.MEDIUM_GRAY.Hex};
1614
+ padding: 10px;
1569
1615
  `;
1570
- const Loader$1 = styled.div `
1571
- padding: 0px 10px;
1572
- display: flex;
1573
- align-items: center;
1616
+ const Loader$1 = styled.div `
1617
+ padding: 0px 10px;
1618
+ display: flex;
1619
+ align-items: center;
1574
1620
  `;
1575
1621
  const Input$1 = (_a) => {
1576
1622
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, onSuggestedSelect, placeholder, readOnly, showCharCount, step, style, suggestedValues, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "type", "value"]);
@@ -1649,19 +1695,19 @@ const Input$1 = (_a) => {
1649
1695
  }))) : null));
1650
1696
  };
1651
1697
 
1652
- const Wrapper$7 = styled.a `
1653
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1654
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1655
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1656
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1657
- font-weight: 500;
1658
- font-style: normal;
1659
- text-decoration: 'none';
1660
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1661
- margin: 0px;
1662
- padding: 0px;
1663
- box-sizing: border-box;
1664
- cursor: pointer;
1698
+ const Wrapper$7 = styled.a `
1699
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1700
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1701
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1702
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1703
+ font-weight: 500;
1704
+ font-style: normal;
1705
+ text-decoration: 'none';
1706
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1707
+ margin: 0px;
1708
+ padding: 0px;
1709
+ box-sizing: border-box;
1710
+ cursor: pointer;
1665
1711
  `;
1666
1712
  Wrapper$7.defaultProps = { theme: EditableTheme };
1667
1713
  const Link = (_a) => {
@@ -1669,82 +1715,82 @@ const Link = (_a) => {
1669
1715
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1670
1716
  };
1671
1717
 
1672
- const dash = styled.keyframes `
1673
- 0% {
1674
- stroke-dasharray: 1, 160;
1675
- stroke-dashoffset: 0;
1676
- }
1677
- 50% {
1678
- stroke-dasharray: 80, 160;
1679
- stroke-dashoffset: -32;
1680
- }
1681
- 100% {
1682
- stroke-dasharray: 80, 160;
1683
- stroke-dashoffset: -124;
1684
- }
1685
- `;
1686
- const Spinner = styled.svg `
1687
- z-index: 2;
1688
- position: absolute;
1689
- top: 50%;
1690
- left: 50%;
1691
- transform: translate(-50%, -50%);
1692
- margin: 0 auto;
1693
- width: 40px;
1694
- height: 40px;
1695
- `;
1696
- const Path = styled.path `
1697
- stroke: #0193d7;
1698
- stroke-linecap: round;
1699
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1700
- animation: ${dash} 1.1s ease-in-out infinite;
1718
+ const dash = styled.keyframes `
1719
+ 0% {
1720
+ stroke-dasharray: 1, 160;
1721
+ stroke-dashoffset: 0;
1722
+ }
1723
+ 50% {
1724
+ stroke-dasharray: 80, 160;
1725
+ stroke-dashoffset: -32;
1726
+ }
1727
+ 100% {
1728
+ stroke-dasharray: 80, 160;
1729
+ stroke-dashoffset: -124;
1730
+ }
1731
+ `;
1732
+ const Spinner = styled.svg `
1733
+ z-index: 2;
1734
+ position: absolute;
1735
+ top: 50%;
1736
+ left: 50%;
1737
+ transform: translate(-50%, -50%);
1738
+ margin: 0 auto;
1739
+ width: 40px;
1740
+ height: 40px;
1741
+ `;
1742
+ const Path = styled.path `
1743
+ stroke: #0193d7;
1744
+ stroke-linecap: round;
1745
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1746
+ animation: ${dash} 1.1s ease-in-out infinite;
1701
1747
  `;
1702
1748
  const Loader = () => {
1703
1749
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1704
1750
  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', strokeWidth: '2' })));
1705
1751
  };
1706
1752
 
1707
- const Steps = styled.div `
1708
- padding: 20px;
1709
- border-bottom: 1px solid #e7e6e6;
1710
- background: #f5f5f5;
1711
- display: flex;
1712
- gap: 30px;
1713
- align-items: center;
1714
- `;
1715
- const Step = styled.div `
1716
- display: flex;
1717
- align-items: center;
1718
- gap: 8px;
1719
- `;
1720
- const StyledIcon$2 = styled(Icon) `
1721
- > path {
1722
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1723
- }
1753
+ const Steps = styled.div `
1754
+ padding: 20px;
1755
+ border-bottom: 1px solid #e7e6e6;
1756
+ background: #f5f5f5;
1757
+ display: flex;
1758
+ gap: 30px;
1759
+ align-items: center;
1760
+ `;
1761
+ const Step = styled.div `
1762
+ display: flex;
1763
+ align-items: center;
1764
+ gap: 8px;
1765
+ `;
1766
+ const StyledIcon$2 = styled(Icon) `
1767
+ > path {
1768
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1769
+ }
1724
1770
  `;
1725
1771
  StyledIcon$2.defaultProps = { theme: EditableTheme };
1726
- const StepIndicator = styled.div `
1727
- width: 30px;
1728
- height: 30px;
1729
- border-radius: 15px;
1730
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1731
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1732
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1733
- font-size: 14px;
1734
- font-weight: 500;
1735
- line-height: 1;
1736
- display: flex;
1737
- align-items: center;
1738
- justify-content: center;
1739
- flex-shrink: 0;
1772
+ const StepIndicator = styled.div `
1773
+ width: 30px;
1774
+ height: 30px;
1775
+ border-radius: 15px;
1776
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1777
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1778
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1779
+ font-size: 14px;
1780
+ font-weight: 500;
1781
+ line-height: 1;
1782
+ display: flex;
1783
+ align-items: center;
1784
+ justify-content: center;
1785
+ flex-shrink: 0;
1740
1786
  `;
1741
1787
  StepIndicator.defaultProps = { theme: EditableTheme };
1742
- const StepLabel = styled.div `
1743
- color: #000;
1744
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1745
- font-size: 14px;
1746
- font-weight: 500;
1747
- line-height: 1;
1788
+ const StepLabel = styled.div `
1789
+ color: #000;
1790
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1791
+ font-size: 14px;
1792
+ font-weight: 500;
1793
+ line-height: 1;
1748
1794
  `;
1749
1795
  const ProgressBar = ({ steps }) => {
1750
1796
  return (React.createElement(Steps, null, steps.map((step, i) => {
@@ -1754,73 +1800,73 @@ const ProgressBar = ({ steps }) => {
1754
1800
  })));
1755
1801
  };
1756
1802
 
1757
- const Wrapper$6 = styled.div `
1758
- position: fixed;
1759
- top: 0;
1760
- right: 0;
1761
- bottom: 0;
1762
- left: 0;
1763
- z-index: 9999;
1764
- background: rgba(0, 0, 0, 0.8);
1765
- display: flex;
1766
- align-items: center;
1767
- justify-content: center;
1768
- `;
1769
- const Container$1 = styled.dialog `
1770
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
1771
- max-width: calc(100vw - 80px);
1772
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
1773
- max-height: calc(100vh - 80px);
1774
- border-radius: 8px;
1775
- overflow: hidden;
1776
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1777
- outline: none;
1778
- border: none;
1779
- position: relative;
1780
- padding: 0px;
1781
- box-sizing: border-box;
1782
- display: flex;
1783
- flex-direction: column;
1784
- `;
1785
- const Header$1 = styled.div `
1786
- flex-shrink: 0;
1787
- padding: 20px;
1788
- border-bottom: 1px solid #e7e6e6;
1789
- display: flex;
1790
- align-items: center;
1791
- background: #ffffff;
1792
- box-sizing: border-box;
1793
- `;
1794
- const Close = styled.div `
1795
- margin-left: auto;
1796
- display: flex;
1797
- align-items: center;
1798
- padding-left: 20px;
1799
- cursor: pointer;
1800
- `;
1801
- const CloseMsg = styled.span `
1802
- font-size: ${FontSizes.SMALL};
1803
- font-weight: 400;
1804
- font-family: ${FontStyles.DEFAULT};
1805
- line-height: 1em;
1806
- color: ${Colors.MEDIUM_GRAY.Hex};
1807
- `;
1808
- const ContentWrapper = styled.div `
1809
- overflow-x: hidden;
1810
- overflow-y: auto;
1811
- background: #ffffff;
1812
- flex: 1;
1813
- box-sizing: border-box;
1814
- `;
1815
- const ButtonBar = styled.div `
1816
- flex-shrink: 0;
1817
- background: #ffffff;
1818
- padding: 20px;
1819
- border-top: 1px solid #e7e6e6;
1820
- display: flex;
1821
- align-items: center;
1822
- justify-self: flex-end;
1823
- box-sizing: border-box;
1803
+ const Wrapper$6 = styled.div `
1804
+ position: fixed;
1805
+ top: 0;
1806
+ right: 0;
1807
+ bottom: 0;
1808
+ left: 0;
1809
+ z-index: 9999;
1810
+ background: rgba(0, 0, 0, 0.8);
1811
+ display: flex;
1812
+ align-items: center;
1813
+ justify-content: center;
1814
+ `;
1815
+ const Container$1 = styled.dialog `
1816
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
1817
+ max-width: calc(100vw - 80px);
1818
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
1819
+ max-height: calc(100vh - 80px);
1820
+ border-radius: 8px;
1821
+ overflow: hidden;
1822
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1823
+ outline: none;
1824
+ border: none;
1825
+ position: relative;
1826
+ padding: 0px;
1827
+ box-sizing: border-box;
1828
+ display: flex;
1829
+ flex-direction: column;
1830
+ `;
1831
+ const Header$1 = styled.div `
1832
+ flex-shrink: 0;
1833
+ padding: 20px;
1834
+ border-bottom: 1px solid #e7e6e6;
1835
+ display: flex;
1836
+ align-items: center;
1837
+ background: #ffffff;
1838
+ box-sizing: border-box;
1839
+ `;
1840
+ const Close = styled.div `
1841
+ margin-left: auto;
1842
+ display: flex;
1843
+ align-items: center;
1844
+ padding-left: 20px;
1845
+ cursor: pointer;
1846
+ `;
1847
+ const CloseMsg = styled.span `
1848
+ font-size: ${FontSizes.SMALL};
1849
+ font-weight: 400;
1850
+ font-family: ${FontStyles.DEFAULT};
1851
+ line-height: 1em;
1852
+ color: ${Colors.MEDIUM_GRAY.Hex};
1853
+ `;
1854
+ const ContentWrapper = styled.div `
1855
+ overflow-x: hidden;
1856
+ overflow-y: auto;
1857
+ background: #ffffff;
1858
+ flex: 1;
1859
+ box-sizing: border-box;
1860
+ `;
1861
+ const ButtonBar = styled.div `
1862
+ flex-shrink: 0;
1863
+ background: #ffffff;
1864
+ padding: 20px;
1865
+ border-top: 1px solid #e7e6e6;
1866
+ display: flex;
1867
+ align-items: center;
1868
+ justify-self: flex-end;
1869
+ box-sizing: border-box;
1824
1870
  `;
1825
1871
  const Modal = (_a) => {
1826
1872
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
@@ -1855,19 +1901,19 @@ const Modal = (_a) => {
1855
1901
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
1856
1902
  };
1857
1903
 
1858
- const Wrapper$5 = styled.div `
1859
- position: relative;
1860
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1861
- `;
1862
- const Trigger = styled.div `
1863
- box-sizing: border-box;
1864
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
1865
- height: 40px;
1866
- padding: 0 10px;
1867
- position: relative;
1868
- cursor: pointer;
1869
- border-width: 1px;
1870
- border-style: solid;
1904
+ const Wrapper$5 = styled.div `
1905
+ position: relative;
1906
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1907
+ `;
1908
+ const Trigger = styled.div `
1909
+ box-sizing: border-box;
1910
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
1911
+ height: 40px;
1912
+ padding: 0 10px;
1913
+ position: relative;
1914
+ cursor: pointer;
1915
+ border-width: 1px;
1916
+ border-style: solid;
1871
1917
  border-color: ${props => {
1872
1918
  if (props.$invalid) {
1873
1919
  return Colors.RED.Hex;
@@ -1878,50 +1924,50 @@ const Trigger = styled.div `
1878
1924
  else {
1879
1925
  return '#cccccc';
1880
1926
  }
1881
- }};
1882
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1883
- background-image: none;
1884
- display: flex;
1885
- width: 100%;
1886
- align-items: center;
1887
- justify-content: space-between;
1888
- z-index: 1;
1927
+ }};
1928
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1929
+ background-image: none;
1930
+ display: flex;
1931
+ width: 100%;
1932
+ align-items: center;
1933
+ justify-content: space-between;
1934
+ z-index: 1;
1889
1935
  `;
1890
1936
  Trigger.defaultProps = { theme: EditableTheme };
1891
- const Value = styled.div `
1892
- color: ${Colors.BLACK.Hex};
1893
- font-family: ${FontStyles.DEFAULT};
1894
- font-size: ${FontSizes.DEFAULT};
1895
- font-weight: 400;
1896
- line-height: 2.9em;
1897
- overflow: hidden;
1898
- text-overflow: ellipsis;
1899
- white-space: nowrap;
1900
- width: 100%;
1901
- `;
1902
- const Options = styled.div `
1903
- background: #fff;
1904
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1905
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1906
- border-radius: 0px 0px 4px 4px;
1907
- border-style: solid;
1908
- border-top: none;
1909
- border-width: 1px;
1910
- left: 0;
1911
- position: absolute;
1912
- right: 0;
1913
- z-index: 10;
1914
- max-height: 220px;
1915
- overflow: auto;
1937
+ const Value = styled.div `
1938
+ color: ${Colors.BLACK.Hex};
1939
+ font-family: ${FontStyles.DEFAULT};
1940
+ font-size: ${FontSizes.DEFAULT};
1941
+ font-weight: 400;
1942
+ line-height: 2.9em;
1943
+ overflow: hidden;
1944
+ text-overflow: ellipsis;
1945
+ white-space: nowrap;
1946
+ width: 100%;
1947
+ `;
1948
+ const Options = styled.div `
1949
+ background: #fff;
1950
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1951
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1952
+ border-radius: 0px 0px 4px 4px;
1953
+ border-style: solid;
1954
+ border-top: none;
1955
+ border-width: 1px;
1956
+ left: 0;
1957
+ position: absolute;
1958
+ right: 0;
1959
+ z-index: 10;
1960
+ max-height: 220px;
1961
+ overflow: auto;
1916
1962
  `;
1917
1963
  Options.defaultProps = { theme: EditableTheme };
1918
- const Scrim = styled.div `
1919
- bottom: 0;
1920
- left: 0;
1921
- position: fixed;
1922
- right: 0;
1923
- top: 0;
1924
- z-index: 9;
1964
+ const Scrim = styled.div `
1965
+ bottom: 0;
1966
+ left: 0;
1967
+ position: fixed;
1968
+ right: 0;
1969
+ top: 0;
1970
+ z-index: 9;
1925
1971
  `;
1926
1972
  const MultiSelect = (_a) => {
1927
1973
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
@@ -1938,35 +1984,35 @@ const MultiSelect = (_a) => {
1938
1984
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
1939
1985
  };
1940
1986
 
1941
- const Wrapper$4 = styled.div `
1942
- display: flex;
1943
- padding: 16px 30px;
1944
- align-items: center;
1945
- gap: 20px;
1946
- align-self: stretch;
1947
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1948
- `;
1949
- const Title = styled.div `
1950
- display: flex;
1951
- align-items: center;
1952
- gap: 20px;
1953
- `;
1954
- const Info = styled.div `
1955
- display: flex;
1956
- flex-direction: column;
1957
- align-items: flex-start;
1958
- gap: 4px;
1959
- flex: 1 0 0;
1960
- `;
1961
- const Breadcrumbs = styled.div `
1962
- display: flex;
1963
- align-items: center;
1964
- gap: 4px;
1965
- `;
1966
- const Actions = styled.div `
1967
- display: flex;
1968
- align-items: center;
1969
- gap: 8px;
1987
+ const Wrapper$4 = styled.div `
1988
+ display: flex;
1989
+ padding: 16px 30px;
1990
+ align-items: center;
1991
+ gap: 20px;
1992
+ align-self: stretch;
1993
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1994
+ `;
1995
+ const Title = styled.div `
1996
+ display: flex;
1997
+ align-items: center;
1998
+ gap: 20px;
1999
+ `;
2000
+ const Info = styled.div `
2001
+ display: flex;
2002
+ flex-direction: column;
2003
+ align-items: flex-start;
2004
+ gap: 4px;
2005
+ flex: 1 0 0;
2006
+ `;
2007
+ const Breadcrumbs = styled.div `
2008
+ display: flex;
2009
+ align-items: center;
2010
+ gap: 4px;
2011
+ `;
2012
+ const Actions = styled.div `
2013
+ display: flex;
2014
+ align-items: center;
2015
+ gap: 8px;
1970
2016
  `;
1971
2017
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
1972
2018
  const { format = 'primary', menuItems = [], label = '', } = buttonMenu || {};
@@ -1988,11 +2034,11 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
1988
2034
  menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
1989
2035
  };
1990
2036
 
1991
- const Wrapper$3 = styled.nav `
1992
- box-sizing: border-box;
1993
- display: flex;
1994
- align-items: center;
1995
- column-gap: 10px;
2037
+ const Wrapper$3 = styled.nav `
2038
+ box-sizing: border-box;
2039
+ display: flex;
2040
+ align-items: center;
2041
+ column-gap: 10px;
1996
2042
  `;
1997
2043
  const Pagination = (_a) => {
1998
2044
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2023,41 +2069,86 @@ const Pagination = (_a) => {
2023
2069
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
2024
2070
  };
2025
2071
 
2026
- const Wrapper$2 = styled.label `
2027
- border-radius: 4px;
2028
- padding: 4px 0px 4px 6px;
2029
- margin-left: -6px;
2030
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2031
- display: flex;
2032
- align-items: center;
2033
- font-size: ${FontSizes.DEFAULT};
2034
- line-height: 1.6em;
2035
- box-sizing: border-box;
2036
- background: ${props => (props.$invalid ? `rgba(${Colors.RED.Rgb}, 0.05)` : 'transparent')};
2037
-
2038
- &:focus-within {
2039
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2040
- }
2072
+ const Wrapper$2 = styled.label `
2073
+ border-radius: 4px;
2074
+ padding: 4px 0px 4px 6px;
2075
+ margin-left: -6px;
2076
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2077
+ display: flex;
2078
+ align-items: center;
2079
+ font-size: ${FontSizes.DEFAULT};
2080
+ line-height: 1.6em;
2081
+ box-sizing: border-box;
2082
+ position: relative;
2083
+
2084
+ &:focus-within {
2085
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2086
+ }
2041
2087
  `;
2042
2088
  Wrapper$2.defaultProps = { theme: EditableTheme };
2043
- const Input = styled.input `
2044
- font-size: 20px;
2045
- margin: 0px;
2046
- line-height: 1.6em;
2047
- box-sizing: border-box;
2048
- `;
2049
- const Label = styled.span `
2050
- font-family: ${FontStyles.DEFAULT};
2051
- font-size: ${FontSizes.DEFAULT};
2052
- font-weight: 400;
2053
- color: ${Colors.BLACK.Hex};
2054
- line-height: 1.6em;
2055
- margin-left: 6px;
2089
+ const Input = styled.input `
2090
+ font-size: 20px;
2091
+ margin: 0px;
2092
+ line-height: 1.6em;
2093
+ box-sizing: border-box;
2094
+ position: absolute;
2095
+ opacity: 0;
2096
+ cursor: pointer;
2097
+ height: 0;
2098
+ width: 0;
2099
+ &:checked + span {
2100
+ border-color: ${Colors.PRIMARY.Hex};
2101
+ }
2102
+ &:checked + span:after {
2103
+ background-color: ${Colors.PRIMARY.Hex};
2104
+ display: block;
2105
+ }
2106
+ &:disabled + span {
2107
+ background-color: #fff;
2108
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
2109
+ }
2110
+ &:disabled + span:after {
2111
+ background-color: #fff;
2112
+ }
2113
+ &:checked:disabled + span:after {
2114
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2115
+ }
2116
+ `;
2117
+ const Check = styled.span `
2118
+ height: 17px;
2119
+ width: 17px;
2120
+ border-radius: 50%;
2121
+ background-color: #fff;
2122
+ border-width: 2px;
2123
+ border-style: solid;
2124
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2125
+ box-sizing: border-box;
2126
+ position: relative;
2127
+ &:after {
2128
+ content: "";
2129
+ position: absolute;
2130
+ top: 2px;
2131
+ left: 2px;
2132
+ width: 9px;
2133
+ height: 9px;
2134
+ border-radius: 50%;
2135
+ box-sizing: border-box;
2136
+ display: none;
2137
+ }
2138
+ `;
2139
+ const Label = styled.span `
2140
+ font-family: ${FontStyles.DEFAULT};
2141
+ font-size: ${FontSizes.DEFAULT};
2142
+ font-weight: 400;
2143
+ color: ${Colors.BLACK.Hex};
2144
+ line-height: 1.6em;
2145
+ margin-left: 6px;
2056
2146
  `;
2057
2147
  const Radio = (_a) => {
2058
2148
  var { children, disabled, checked, onChange, value, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip"]);
2059
- return (React.createElement(Wrapper$2, Object.assign({ "$disabled": disabled, "$invalid": invalid }, accessibleProps),
2149
+ return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps),
2060
2150
  React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
2151
+ React.createElement(Check, { "$invalid": invalid }),
2061
2152
  React.createElement(Label, null,
2062
2153
  children,
2063
2154
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
@@ -2071,67 +2162,67 @@ const RadioList = (_a) => {
2071
2162
  })));
2072
2163
  };
2073
2164
 
2074
- const StyledTable = styled.table `
2075
- width: 100%;
2076
- margin-top: 1px;
2077
- table-layout: ${props => props.$tableLayout || 'auto'};
2078
- border-collapse: collapse;
2079
- text-indent: 0px;
2080
- border-spacing: 0px;
2081
- border-color: none;
2082
- box-sizing: border-box;
2083
- `;
2084
- const Header = styled.th `
2085
- padding: 12px !important;
2086
- text-align: left;
2087
- font-weight: 500;
2088
- border-bottom: 1px solid #e5e5e5;
2089
- border-top: 1px solid #e5e5e5;
2090
- text-transform: uppercase;
2091
- font-size: 12px;
2092
- font-family: ${FontStyles.DEFAULT};
2093
- letter-spacing: 1px;
2094
- white-space: nowrap;
2095
- line-height: 1;
2096
- position: relative;
2097
- box-sizing: border-box;
2098
- width: ${props => props.$width || 'auto'};
2099
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2100
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2165
+ const StyledTable = styled.table `
2166
+ width: 100%;
2167
+ margin-top: 1px;
2168
+ table-layout: ${props => props.$tableLayout || 'auto'};
2169
+ border-collapse: collapse;
2170
+ text-indent: 0px;
2171
+ border-spacing: 0px;
2172
+ border-color: none;
2173
+ box-sizing: border-box;
2174
+ `;
2175
+ const Header = styled.th `
2176
+ padding: 12px !important;
2177
+ text-align: left;
2178
+ font-weight: 500;
2179
+ border-bottom: 1px solid #e5e5e5;
2180
+ border-top: 1px solid #e5e5e5;
2181
+ text-transform: uppercase;
2182
+ font-size: 12px;
2183
+ font-family: ${FontStyles.DEFAULT};
2184
+ letter-spacing: 1px;
2185
+ white-space: nowrap;
2186
+ line-height: 1;
2187
+ position: relative;
2188
+ box-sizing: border-box;
2189
+ width: ${props => props.$width || 'auto'};
2190
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2191
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2101
2192
  `;
2102
2193
  Header.defaultProps = { theme: EditableTheme };
2103
- const Row = styled.tr `
2104
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2105
- transition: all 0.2s;
2106
- background-color: ${props => props.$bgColor};
2107
- box-sizing: border-box;
2108
- &:hover {
2109
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2110
- }
2194
+ const Row = styled.tr `
2195
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2196
+ transition: all 0.2s;
2197
+ background-color: ${props => props.$bgColor};
2198
+ box-sizing: border-box;
2199
+ &:hover {
2200
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2201
+ }
2111
2202
  `;
2112
2203
  Row.defaultProps = { theme: EditableTheme };
2113
- const Column = styled.td `
2114
- padding: 16px 12px !important;
2115
- font-size: ${FontSizes.DEFAULT} !important;
2116
- font-weight: 400 !important;
2117
- font-family: ${FontStyles.DEFAULT};
2118
- border: none !important;
2119
- word-break: break-word;
2120
- line-height: 1.4em;
2121
- box-sizing: border-box;
2122
- text-align: ${props => props.$align || 'left'};
2123
- width: ${props => props.$width || 'auto'};
2124
- `;
2125
- const IconWrapper = styled.span `
2126
- position: absolute;
2127
- top: 50%;
2128
- transform: translateY(-50%);
2129
- margin-left: 2px;
2130
- `;
2131
- const StyledIcon$1 = styled(Icon) `
2132
- > path {
2133
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2134
- }
2204
+ const Column = styled.td `
2205
+ padding: 16px 12px !important;
2206
+ font-size: ${FontSizes.DEFAULT} !important;
2207
+ font-weight: 400 !important;
2208
+ font-family: ${FontStyles.DEFAULT};
2209
+ border: none !important;
2210
+ word-break: break-word;
2211
+ line-height: 1.4em;
2212
+ box-sizing: border-box;
2213
+ text-align: ${props => props.$align || 'left'};
2214
+ width: ${props => props.$width || 'auto'};
2215
+ `;
2216
+ const IconWrapper = styled.span `
2217
+ position: absolute;
2218
+ top: 50%;
2219
+ transform: translateY(-50%);
2220
+ margin-left: 2px;
2221
+ `;
2222
+ const StyledIcon$1 = styled(Icon) `
2223
+ > path {
2224
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2225
+ }
2135
2226
  `;
2136
2227
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2137
2228
  const Table = (_a) => {
@@ -2151,53 +2242,53 @@ const Table = (_a) => {
2151
2242
  }))) : null));
2152
2243
  };
2153
2244
 
2154
- const Wrapper$1 = styled.div `
2155
- display: flex;
2156
- box-sizing: border-box;
2157
- align-items: flex-end;
2158
- border-top: 1px solid #e5e5e5;
2159
- border-bottom: 1px solid #e5e5e5;
2160
- flex-shrink: 0;
2161
- align-self: stretch;
2162
- padding: 0;
2163
- margin: 0;
2164
- `;
2165
- const Tab = styled.div `
2166
- display: flex;
2167
- align-items: center;
2168
- gap: 6px;
2169
- font-size: ${FontSizes.DEFAULT};
2170
- font-family: ${FontStyles.DEFAULT};
2171
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2172
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2173
- line-height: 1em;
2174
- padding: 16px 30px 12px;
2175
- margin: 0 0 -1px 0;
2176
- border-bottom-width: 4px;
2177
- border-bottom-style: solid;
2178
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2179
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2180
- box-sizing: border-box;
2181
- &:hover {
2182
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2183
- font-weight: 500;
2184
- }
2245
+ const Wrapper$1 = styled.div `
2246
+ display: flex;
2247
+ box-sizing: border-box;
2248
+ align-items: flex-end;
2249
+ border-top: 1px solid #e5e5e5;
2250
+ border-bottom: 1px solid #e5e5e5;
2251
+ flex-shrink: 0;
2252
+ align-self: stretch;
2253
+ padding: 0;
2254
+ margin: 0;
2255
+ `;
2256
+ const Tab = styled.div `
2257
+ display: flex;
2258
+ align-items: center;
2259
+ gap: 6px;
2260
+ font-size: ${FontSizes.DEFAULT};
2261
+ font-family: ${FontStyles.DEFAULT};
2262
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2263
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2264
+ line-height: 1em;
2265
+ padding: 16px 30px 12px;
2266
+ margin: 0 0 -1px 0;
2267
+ border-bottom-width: 4px;
2268
+ border-bottom-style: solid;
2269
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2270
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2271
+ box-sizing: border-box;
2272
+ &:hover {
2273
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2274
+ font-weight: 500;
2275
+ }
2185
2276
  `;
2186
2277
  Tab.defaultProps = { theme: EditableTheme };
2187
- const Badge = styled.div `
2188
- display: flex;
2189
- width: 18px;
2190
- height: 18px;
2191
- justify-content: center;
2192
- align-items: center;
2193
- border-radius: 9px;
2194
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2195
- color: #fff;
2196
- font-family: ${FontStyles.DEFAULT};
2197
- font-size: 12px;
2198
- font-weight: 500;
2199
- line-height: 1;
2200
- letter-spacing: 1px;
2278
+ const Badge = styled.div `
2279
+ display: flex;
2280
+ width: 18px;
2281
+ height: 18px;
2282
+ justify-content: center;
2283
+ align-items: center;
2284
+ border-radius: 9px;
2285
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2286
+ color: #fff;
2287
+ font-family: ${FontStyles.DEFAULT};
2288
+ font-size: 12px;
2289
+ font-weight: 500;
2290
+ line-height: 1;
2291
+ letter-spacing: 1px;
2201
2292
  `;
2202
2293
  Badge.defaultProps = { theme: EditableTheme };
2203
2294
  const Tabs = (_a) => {
@@ -2211,27 +2302,27 @@ const Tabs = (_a) => {
2211
2302
  };
2212
2303
  Tabs.defaultProps = {};
2213
2304
 
2214
- const Track = styled.div `
2215
- height: 24px;
2216
- border-radius: 12px;
2217
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2218
- display: flex;
2219
- align-items: center;
2220
- cursor: pointer;
2221
- width: 40px;
2222
- padding: 2px;
2223
- box-sizing: border-box;
2224
- `;
2225
- const Handle = styled.div `
2226
- width: 20px;
2227
- height: 20px;
2228
- border-radius: 10px;
2229
- background: #ffffff;
2230
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2231
- display: flex;
2232
- align-items: center;
2233
- justify-content: center;
2234
- box-sizing: border-box;
2305
+ const Track = styled.div `
2306
+ height: 24px;
2307
+ border-radius: 12px;
2308
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2309
+ display: flex;
2310
+ align-items: center;
2311
+ cursor: pointer;
2312
+ width: 40px;
2313
+ padding: 2px;
2314
+ box-sizing: border-box;
2315
+ `;
2316
+ const Handle = styled.div `
2317
+ width: 20px;
2318
+ height: 20px;
2319
+ border-radius: 10px;
2320
+ background: #ffffff;
2321
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2322
+ display: flex;
2323
+ align-items: center;
2324
+ justify-content: center;
2325
+ box-sizing: border-box;
2235
2326
  `;
2236
2327
  const Toggle = (_a) => {
2237
2328
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2242,30 +2333,30 @@ const Toggle = (_a) => {
2242
2333
  };
2243
2334
  Toggle.defaultProps = {};
2244
2335
 
2245
- const Container = styled.div `
2246
- width: 100%;
2247
- padding: 40px auto;
2248
- gap: 20px;
2249
- display: flex;
2250
- flex-direction: column;
2251
- justify-items: center;
2252
- align-items: center;
2253
- `;
2254
- const Wrapper = styled.div `
2255
- gap: 10px;
2256
- display: flex;
2257
- flex-direction: column;
2258
- justify-items: center;
2259
- align-items: center;
2260
- `;
2261
- const StyledIcon = styled.div `
2262
- display: flex;
2263
- align-items: center;
2264
- justify-content: center;
2265
- width: 80px;
2266
- height: 80px;
2267
- border-radius: 40px;
2268
- background: #f5f5f5;
2336
+ const Container = styled.div `
2337
+ width: 100%;
2338
+ padding: 40px auto;
2339
+ gap: 20px;
2340
+ display: flex;
2341
+ flex-direction: column;
2342
+ justify-items: center;
2343
+ align-items: center;
2344
+ `;
2345
+ const Wrapper = styled.div `
2346
+ gap: 10px;
2347
+ display: flex;
2348
+ flex-direction: column;
2349
+ justify-items: center;
2350
+ align-items: center;
2351
+ `;
2352
+ const StyledIcon = styled.div `
2353
+ display: flex;
2354
+ align-items: center;
2355
+ justify-content: center;
2356
+ width: 80px;
2357
+ height: 80px;
2358
+ border-radius: 40px;
2359
+ background: #f5f5f5;
2269
2360
  `;
2270
2361
  const ZeroState = (_a) => {
2271
2362
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);