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