@hexure/ui 1.11.13 → 1.12.0

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 +1438 -1353
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +1390 -1305
  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
@@ -1,11 +1,11 @@
1
- import React, { useContext, useState, useEffect, useRef } from 'react';
2
- import styled, { ThemeContext, keyframes } from 'styled-components';
3
- import Icon, { Icon as Icon$1 } from '@mdi/react';
4
- import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
- import dayjs from 'dayjs';
6
- import Numeral from 'numeral';
7
- import Moment from 'moment';
8
-
1
+ import React, { useContext, useState, useEffect, useRef } from 'react';
2
+ import styled, { ThemeContext, keyframes } from 'styled-components';
3
+ import Icon, { Icon as Icon$1 } from '@mdi/react';
4
+ import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
+ import dayjs from 'dayjs';
6
+ import Numeral from 'numeral';
7
+ import Moment from 'moment';
8
+
9
9
  /******************************************************************************
10
10
  Copyright (c) Microsoft Corporation.
11
11
 
@@ -19,18 +19,18 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
19
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
20
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
21
  PERFORMANCE OF THIS SOFTWARE.
22
- ***************************************************************************** */
23
- /* global Reflect, Promise */
24
-
25
- function __rest(s, e) {
26
- var t = {};
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
- }
31
- return t;
32
- }
33
-
22
+ ***************************************************************************** */
23
+ /* global Reflect, Promise */
24
+
25
+ function __rest(s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
+ }
31
+ return t;
32
+ }
33
+
34
34
  const Colors = {
35
35
  PRIMARY: {
36
36
  Hex: '#0193D7',
@@ -79,26 +79,26 @@ const FontSizes = {
79
79
  };
80
80
  const EditableTheme = {
81
81
  PRIMARY_COLOR: Colors.PRIMARY,
82
- };
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;
82
+ };
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;
102
102
  `;
103
103
  const Accordion = (_a) => {
104
104
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -107,13 +107,13 @@ const Accordion = (_a) => {
107
107
  React.createElement(Title$2, null, title),
108
108
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
109
109
  open ? children : null));
110
- };
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'};
110
+ };
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'};
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"]);
@@ -223,58 +223,58 @@ const Button = (_a) => {
223
223
  icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
224
224
  React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
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
- };
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;
226
+ };
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;
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));
244
244
  };
245
245
  Copy.defaultProps = {
246
246
  type: 'default',
247
- };
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;
247
+ };
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;
278
278
  `;
279
279
  const Heading = (_a) => {
280
280
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -293,41 +293,41 @@ const Heading = (_a) => {
293
293
  Heading.defaultProps = {
294
294
  bold: false,
295
295
  type: 'primary',
296
- };
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;
296
+ };
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;
331
331
  `;
332
332
  const ActionDialog = (_a) => {
333
333
  var { description, title, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
@@ -339,29 +339,29 @@ const ActionDialog = (_a) => {
339
339
  tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
340
340
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
341
341
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
342
- };
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;
342
+ };
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;
365
365
  `;
366
366
  Action$1.defaultProps = { theme: EditableTheme };
367
367
  const Alert = (_a) => {
@@ -391,8 +391,8 @@ const Alert = (_a) => {
391
391
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
392
392
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
393
393
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
394
- };
395
-
394
+ };
395
+
396
396
  const colorMapping = {
397
397
  black: {
398
398
  fill_1: '#000000',
@@ -433,61 +433,61 @@ const Logo = (_a) => {
433
433
  React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
434
434
  React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
435
435
  }
436
- };
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;
436
+ };
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;
460
460
  `;
461
461
  const AppHeader = ({ logoUrl, buttons = [] }) => {
462
462
  return (React.createElement(Container$3, null,
463
463
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
464
464
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
465
- };
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;
465
+ };
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;
491
491
  `;
492
492
  const Tag = (_a) => {
493
493
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -496,91 +496,91 @@ const Tag = (_a) => {
496
496
  React.createElement(Label$4, { "$color": color }, children),
497
497
  removable ? (React.createElement(Remove$1, null,
498
498
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
499
- };
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
- }
570
- `;
571
- const Footer = styled.div `
572
- padding: 20px 14px 0px;
573
- display: flex;
574
- align-items: center;
575
- `;
576
- const FooterInfo = styled.div `
577
- display: flex;
578
- flex-direction: column;
579
- flex: 1;
580
- align-items: flex-start;
581
- `;
582
- const SidebarMenuContainer = styled.div `
583
- flex-grow: 1;
499
+ };
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
+ }
570
+ `;
571
+ const Footer = styled.div `
572
+ padding: 20px 14px 0px;
573
+ display: flex;
574
+ align-items: center;
575
+ `;
576
+ const FooterInfo = styled.div `
577
+ display: flex;
578
+ flex-direction: column;
579
+ flex: 1;
580
+ align-items: flex-start;
581
+ `;
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;
@@ -604,75 +604,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
604
604
  e.preventDefault();
605
605
  toggleCollapse(!collapsed);
606
606
  }, small: true }))));
607
- };
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;
607
+ };
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;
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"]);
@@ -687,46 +687,46 @@ const BulkActionBar = (_a) => {
687
687
  errorMsg ? (React.createElement(Error, null,
688
688
  React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
689
689
  React.createElement(ErrorMsg, null, errorMsg))) : null));
690
- };
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
- }
690
+ };
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
+ }
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"]);
@@ -735,38 +735,38 @@ const MoreMenu = (_a) => {
735
735
  item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
736
736
  React.createElement(Title$1, null, item.label)));
737
737
  })));
738
- };
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;
738
+ };
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;
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);
754
754
  return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
755
755
  React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
756
756
  show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
757
- };
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;
757
+ };
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;
770
770
  `;
771
771
  StyledIcon$4.defaultProps = { theme: EditableTheme };
772
772
  const positions = {
@@ -804,57 +804,100 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
804
804
  return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
805
805
  trigger || React.createElement(StyledIcon$4, { path: mdiInformationOutline }),
806
806
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
807
- };
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
- }
807
+ };
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
+ 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: 15px;
854
+ width: 15px;
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
+ &:after {
860
+ content: "";
861
+ position: absolute;
862
+ left: 11px;
863
+ top: 8px;
864
+ width: 5px;
865
+ height: 9px;
866
+ border: solid white;
867
+ border-width: 0 3px 3px 0;
868
+ -webkit-transform: rotate(45deg);
869
+ -ms-transform: rotate(45deg);
870
+ transform: rotate(45deg);
871
+ display: none;
872
+ }
873
+ `;
874
+ const Label$3 = styled.span `
875
+ font-family: ${FontStyles.DEFAULT};
876
+ font-size: ${FontSizes.DEFAULT};
877
+ font-weight: 400;
878
+ line-height: 1.6em;
879
+ color: ${Colors.BLACK.Hex};
880
+ margin-left: 6px;
881
+ box-sizing: border-box;
840
882
  `;
841
883
  const Checkbox = (_a) => {
842
884
  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),
885
+ return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps),
844
886
  React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
887
+ React.createElement(Check$1, { "$invalid": invalid }),
845
888
  children ? (React.createElement(Label$3, null,
846
889
  children,
847
890
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
848
- };
849
-
850
- const SelectAll = styled.div `
851
- padding: 8px 12px;
852
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
853
- box-sizing: border-box;
891
+ };
892
+
893
+ const SelectAll = styled.div `
894
+ padding: 8px 12px;
895
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
896
+ box-sizing: border-box;
854
897
  `;
855
- const Options$1 = styled.div `
856
- padding: 12px;
857
- box-sizing: border-box;
898
+ const Options$1 = styled.div `
899
+ padding: 12px;
900
+ box-sizing: border-box;
858
901
  `;
859
902
  const Checklist = (_a) => {
860
903
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -891,53 +934,53 @@ const Checklist = (_a) => {
891
934
  const checked = selected.includes(option.value);
892
935
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
893
936
  }))));
894
- };
895
-
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
- }
937
+ };
938
+
939
+ const Wrapper$a = styled.div `
940
+ border-radius: 4px;
941
+ height: 40px;
942
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
943
+ position: relative;
944
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
945
+ border-width: 1px;
946
+ border-style: solid;
947
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
948
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
949
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
950
+ box-sizing: border-box;
951
+ padding: 10px 0px;
952
+ display: flex;
953
+ align-items: center;
954
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
955
+
956
+ &:focus-within {
957
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
958
+ }
916
959
  `;
917
960
  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;
961
+ const Trigger$1 = styled.select `
962
+ appearance: none;
963
+ box-shadow: none;
964
+ outline: none;
965
+ border: none;
966
+ color: ${Colors.BLACK.Hex};
967
+ font-size: ${FontSizes.DEFAULT};
968
+ font-weight: 400;
969
+ font-family: ${FontStyles.DEFAULT};
970
+ line-height: 2.9em;
971
+ background-color: transparent;
972
+ background-image: none;
973
+ width: 100%;
974
+ box-sizing: border-box;
975
+ padding: 0px 30px 0px 10px;
976
+ box-sizing: border-box;
977
+ position: relative;
978
+ z-index: 2;
979
+ `;
980
+ const IconWrapper$2 = styled(Icon) `
981
+ position: absolute;
982
+ right: 9px;
983
+ z-index: 1;
941
984
  `;
942
985
  const Select = (_a) => {
943
986
  var { options, optionGroups, placeholder, readOnly, invalid, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
@@ -955,15 +998,15 @@ const Select = (_a) => {
955
998
  return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
956
999
  })),
957
1000
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
958
- };
959
-
960
- const DatePickerWrapper = styled.div `
961
- display: flex;
962
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1001
+ };
1002
+
1003
+ const DatePickerWrapper = styled.div `
1004
+ display: flex;
1005
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
963
1006
  `;
964
- const Middle = styled.div `
965
- margin: 0px -1px;
966
- flex-grow: 1;
1007
+ const Middle = styled.div `
1008
+ margin: 0px -1px;
1009
+ flex-grow: 1;
967
1010
  `;
968
1011
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, onChange, style, }) => {
969
1012
  const dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
@@ -1025,66 +1068,66 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1025
1068
  React.createElement(Middle, null,
1026
1069
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
1027
1070
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
1028
- };
1029
-
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;
1071
+ };
1072
+
1073
+ const Scrim$1 = styled.div `
1074
+ position: ${({ $position }) => $position};
1075
+ top: 0;
1076
+ right: 0;
1077
+ bottom: 0;
1078
+ left: 0;
1079
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1080
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1081
+ `;
1082
+ const Container$2 = styled.div `
1083
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1084
+ min-width: 400px;
1085
+ width: ${({ $width }) => $width || '400px'};
1086
+ overflow: hidden;
1087
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1088
+ outline: none;
1089
+ border: none;
1090
+ position: ${({ $position }) => $position};
1091
+ top: 0;
1092
+ right: 0;
1093
+ bottom: 0;
1094
+ padding: 0px;
1095
+ display: flex;
1096
+ flex-direction: column;
1097
+ box-sizing: border-box;
1098
+ background: #fff;
1099
+ `;
1100
+ const Header$2 = styled.div `
1101
+ padding: 30px 20px;
1102
+ display: flex;
1103
+ align-items: flex-start;
1104
+ box-sizing: border-box;
1105
+ flex-shrink: 0;
1106
+ background: #fff;
1107
+ `;
1108
+ const Close$1 = styled.div `
1109
+ margin-left: auto;
1110
+ display: flex;
1111
+ align-items: center;
1112
+ padding-left: 20px;
1113
+ cursor: pointer;
1114
+ `;
1115
+ const ContentWrapper$1 = styled.div `
1116
+ overflow-x: hidden;
1117
+ overflow-y: auto;
1118
+ box-sizing: border-box;
1119
+ flex: 1;
1120
+ background: #fff;
1121
+ `;
1122
+ const ButtonBar$1 = styled.div `
1123
+ padding: 20px;
1124
+ display: flex;
1125
+ align-items: center;
1126
+ justify-content: flex-end;
1127
+ box-sizing: border-box;
1128
+ gap: 10px;
1129
+ flex-shrink: 0;
1130
+ background: #fff;
1088
1131
  `;
1089
1132
  const Drawer = (_a) => {
1090
1133
  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"]);
@@ -1112,55 +1155,55 @@ const Drawer = (_a) => {
1112
1155
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1113
1156
  primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
1114
1157
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1115
- };
1116
-
1158
+ };
1159
+
1117
1160
  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;
1161
+ const LabelRow = styled.div `
1162
+ display: flex;
1163
+ align-items: center;
1164
+ justify-content: space-between;
1165
+ margin: 0 0 4px 0;
1166
+ box-sizing: border-box;
1167
+ `;
1168
+ const Label$2 = styled.label `
1169
+ font-size: ${FontSizes.DEFAULT};
1170
+ font-weight: 500;
1171
+ line-height: 1.3em;
1172
+ font-family: ${FontStyles.DEFAULT};
1173
+ color: ${Colors.BLACK.Hex};
1174
+ display: flex;
1175
+ align-items: center;
1176
+ `;
1177
+ const Required = styled.span `
1178
+ color: ${Colors.RED.Hex};
1179
+ margin-left: 4px;
1180
+ `;
1181
+ const Action = styled.span `
1182
+ font-size: ${FontSizes.DEFAULT};
1183
+ font-weight: 500;
1184
+ line-height: 1em;
1185
+ font-family: ${FontStyles.DEFAULT};
1186
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1187
+ cursor: pointer;
1145
1188
  `;
1146
1189
  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;
1190
+ const Description = styled.div `
1191
+ font-size: ${FontSizes.SMALL};
1192
+ font-weight: 400;
1193
+ line-height: 1.3em;
1194
+ font-family: ${FontStyles.DEFAULT};
1195
+ color: ${Colors.BLACK.Hex};
1196
+ margin: 0 0 8px 0;
1197
+ box-sizing: border-box;
1198
+ `;
1199
+ const Validation = styled.div `
1200
+ font-size: ${FontSizes.SMALL};
1201
+ font-weight: 400;
1202
+ line-height: 1.3em;
1203
+ font-family: ${FontStyles.DEFAULT};
1204
+ color: ${Colors.RED.Hex};
1205
+ margin: 4px 0 0 0;
1206
+ box-sizing: border-box;
1164
1207
  `;
1165
1208
  const Field = (_a) => {
1166
1209
  var { action, children, validationText, label, description, required, htmlFor, style, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1174,107 +1217,107 @@ const Field = (_a) => {
1174
1217
  description ? React.createElement(Description, null, description) : null,
1175
1218
  children,
1176
1219
  validationText ? React.createElement(Validation, null, validationText) : null));
1177
- };
1178
-
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;
1220
+ };
1221
+
1222
+ const Wrapper$8 = styled.fieldset `
1223
+ margin-inline-start: 0px;
1224
+ margin-inline-end: 0px;
1225
+ padding-block-start: 0px;
1226
+ padding-inline-start: 0px;
1227
+ padding-inline-end: 0px;
1228
+ padding-block-end: 0px;
1229
+ min-inline-size: min-content;
1230
+ border-width: 0px;
1231
+ border-style: none;
1232
+ border-color: transparent;
1233
+ border-image: none;
1234
+ `;
1235
+ const Label$1 = styled.legend `
1236
+ padding-inline-start: 0px;
1237
+ padding-inline-end: 0px;
1238
+
1239
+ color: ${Colors.BLACK.Hex};
1240
+ font-family: ${FontStyles.DEFAULT};
1241
+ font-size: ${FontSizes.DEFAULT};
1242
+ font-weight: 500;
1243
+ line-height: 22px;
1244
+ margin-bottom: 6px;
1245
+ `;
1246
+ const Content$1 = styled.div `
1247
+ padding: 20px;
1248
+ border-radius: 8px;
1249
+ background: #fcfcfc;
1207
1250
  `;
1208
1251
  const FieldGroup = ({ children, label }) => {
1209
1252
  return (React.createElement(Wrapper$8, null,
1210
1253
  React.createElement(Label$1, null, label),
1211
1254
  React.createElement(Content$1, null, children)));
1212
- };
1213
-
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;
1255
+ };
1256
+
1257
+ const Dropzone = styled.div `
1258
+ border-radius: 8px;
1259
+ border-width: 1px;
1260
+ border-style: dashed;
1261
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1262
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1263
+ cursor: copy;
1221
1264
  `;
1222
1265
  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
- }
1266
+ const IconWrapper$1 = styled.div `
1267
+ width: 80px;
1268
+ height: 80px;
1269
+ border-radius: 40px;
1270
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1271
+ display: flex;
1272
+ align-items: center;
1273
+ justify-content: center;
1274
+ `;
1275
+ const StyledIcon$3 = styled(Icon) `
1276
+ width: 40px !important;
1277
+ height: 40px !important;
1278
+
1279
+ > path {
1280
+ fill: ${Colors.GRAY.Hex} !important;
1281
+ }
1282
+ `;
1283
+ const ClickZone = styled.div `
1284
+ margin: 40px 20px;
1285
+ display: flex;
1286
+ flex-direction: column;
1287
+ align-items: center;
1288
+ gap: 16px;
1289
+ `;
1290
+ const Content = styled.div `
1291
+ display: flex;
1292
+ flex-direction: column;
1293
+ align-items: center;
1294
+ gap: 2px;
1295
+ `;
1296
+ const Files = styled.div `
1297
+ display: flex;
1298
+ flex-direction: column;
1299
+ align-self: stretch;
1300
+ gap: 10px;
1301
+ margin: 20px;
1302
+ `;
1303
+ const File = styled.div `
1304
+ display: flex;
1305
+ padding: 10px;
1306
+ align-items: center;
1307
+ justify-content: space-between;
1308
+ gap: 10px;
1309
+ border-radius: 4px;
1310
+ border: 1px solid #cccccc;
1311
+ background: #ffffff;
1312
+ `;
1313
+ const Remove = styled(Icon) `
1314
+ width: 24px;
1315
+ height: 24px;
1316
+ cursor: pointer;
1317
+
1318
+ > path {
1319
+ fill: ${Colors.RED.Hex} !important;
1320
+ }
1278
1321
  `;
1279
1322
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, message, validateFile, }) => {
1280
1323
  const inputRef = useRef(null);
@@ -1385,8 +1428,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
1385
1428
  React.createElement(Content, null,
1386
1429
  React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
1387
1430
  message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
1388
- };
1389
-
1431
+ };
1432
+
1390
1433
  const getAgesFromDob = (dob) => {
1391
1434
  let calculated_current_age = null;
1392
1435
  let calculated_nearest_age = null;
@@ -1459,116 +1502,116 @@ const formatAsSsn = (number) => {
1459
1502
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1460
1503
  }
1461
1504
  return formatted_value;
1462
- };
1463
-
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
- }
1505
+ };
1506
+
1507
+ const StyledInput = styled.input `
1508
+ border: none !important;
1509
+ background: none !important;
1510
+ font-size: ${FontSizes.DEFAULT};
1511
+ font-weight: 400;
1512
+ font-family: ${FontStyles.DEFAULT};
1513
+ line-height: 1.28em;
1514
+ color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
1515
+ position: relative;
1516
+ height: ${props => props.$height || 'auto'};
1517
+ padding: 10px;
1518
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1519
+ box-shadow: none;
1520
+ outline: none;
1521
+ margin: 0px;
1522
+ text-indent: 0px;
1523
+ --webkit-appearance: none;
1524
+ box-sizing: border-box;
1525
+ display: block;
1526
+ width: 100%;
1527
+ `;
1528
+ const StyledSuffix = styled.div `
1529
+ box-sizing: border-box;
1530
+ border-radius: 0px 4px 4px 0px;
1531
+ display: flex;
1532
+ justify-content: center;
1533
+ align-items: center;
1534
+ padding: 10px;
1535
+ height: auto;
1536
+ background: #f5f5f5;
1537
+ border-width: 0px 0px 0px 1px;
1538
+ border-style: solid;
1539
+ border-color: #cccccc;
1540
+ font-family: ${FontStyles.DEFAULT};
1541
+ font-style: normal;
1542
+ font-weight: 400;
1543
+ font-size: ${FontSizes.DEFAULT};
1544
+ color: Colors.BLACK.Hex;
1545
+ `;
1546
+ const StyledWrapper = styled.div `
1547
+ display: flex;
1548
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1549
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1550
+ position: relative;
1551
+ border-width: 1px;
1552
+ border-style: solid;
1553
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1554
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1555
+
1556
+ &:focus-within {
1557
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1558
+ }
1516
1559
  `;
1517
1560
  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;
1561
+ const SuggestedValues = styled.div `
1562
+ background: #fff;
1563
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1564
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1565
+ border-radius: 0px 0px 4px 4px;
1566
+ border-style: solid;
1567
+ border-top: none;
1568
+ border-width: 1px;
1569
+ left: -1px;
1570
+ position: absolute;
1571
+ right: -1px;
1572
+ top: 39px;
1573
+ z-index: 10;
1574
+ max-height: 220px;
1575
+ overflow: auto;
1533
1576
  `;
1534
1577
  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
- }
1578
+ const SuggestedSummary = styled.div `
1579
+ color: ${Colors.MEDIUM_GRAY.Hex};
1580
+ font-size: 12px;
1581
+ font-family: ${FontStyles.DEFAULT};
1582
+ font-weight: 500;
1583
+ line-height: 18px;
1584
+ padding: 10px 12px;
1585
+ border-bottom: 1px solid #e5e5e5;
1586
+ background: #fff;
1587
+ z-index: 1;
1588
+ position: sticky;
1589
+ top: 0px;
1590
+ `;
1591
+ const SuggestedValue = styled.div `
1592
+ cursor: pointer;
1593
+ padding: 8px 12px;
1594
+ font-size: ${FontSizes.DEFAULT};
1595
+ font-family: ${FontStyles.DEFAULT};
1596
+ font-weight: 400;
1597
+ line-height: 1.6em;
1598
+ color: ${Colors.BLACK.Hex};
1599
+
1600
+ &:hover {
1601
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1602
+ }
1560
1603
  `;
1561
1604
  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;
1605
+ const CharacterCount = styled.div `
1606
+ font-family: ${FontStyles.DEFAULT};
1607
+ font-size: ${FontSizes.SMALL};
1608
+ color: ${Colors.MEDIUM_GRAY.Hex};
1609
+ padding: 10px;
1567
1610
  `;
1568
- const Loader$1 = styled.div `
1569
- padding: 0px 10px;
1570
- display: flex;
1571
- align-items: center;
1611
+ const Loader$1 = styled.div `
1612
+ padding: 0px 10px;
1613
+ display: flex;
1614
+ align-items: center;
1572
1615
  `;
1573
1616
  const Input$1 = (_a) => {
1574
1617
  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"]);
@@ -1645,104 +1688,104 @@ const Input$1 = (_a) => {
1645
1688
  setShowOptions(false);
1646
1689
  } }, s_value));
1647
1690
  }))) : null));
1648
- };
1649
-
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;
1691
+ };
1692
+
1693
+ const Wrapper$7 = styled.a `
1694
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1695
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1696
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1697
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1698
+ font-weight: 500;
1699
+ font-style: normal;
1700
+ text-decoration: 'none';
1701
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1702
+ margin: 0px;
1703
+ padding: 0px;
1704
+ box-sizing: border-box;
1705
+ cursor: pointer;
1663
1706
  `;
1664
1707
  Wrapper$7.defaultProps = { theme: EditableTheme };
1665
1708
  const Link = (_a) => {
1666
1709
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1667
1710
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1668
- };
1669
-
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;
1711
+ };
1712
+
1713
+ const dash = keyframes `
1714
+ 0% {
1715
+ stroke-dasharray: 1, 160;
1716
+ stroke-dashoffset: 0;
1717
+ }
1718
+ 50% {
1719
+ stroke-dasharray: 80, 160;
1720
+ stroke-dashoffset: -32;
1721
+ }
1722
+ 100% {
1723
+ stroke-dasharray: 80, 160;
1724
+ stroke-dashoffset: -124;
1725
+ }
1726
+ `;
1727
+ const Spinner = styled.svg `
1728
+ z-index: 2;
1729
+ position: absolute;
1730
+ top: 50%;
1731
+ left: 50%;
1732
+ transform: translate(-50%, -50%);
1733
+ margin: 0 auto;
1734
+ width: 40px;
1735
+ height: 40px;
1736
+ `;
1737
+ const Path = styled.path `
1738
+ stroke: #0193d7;
1739
+ stroke-linecap: round;
1740
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1741
+ animation: ${dash} 1.1s ease-in-out infinite;
1699
1742
  `;
1700
1743
  const Loader = () => {
1701
1744
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1702
1745
  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
- };
1704
-
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
- }
1746
+ };
1747
+
1748
+ const Steps = styled.div `
1749
+ padding: 20px;
1750
+ border-bottom: 1px solid #e7e6e6;
1751
+ background: #f5f5f5;
1752
+ display: flex;
1753
+ gap: 30px;
1754
+ align-items: center;
1755
+ `;
1756
+ const Step = styled.div `
1757
+ display: flex;
1758
+ align-items: center;
1759
+ gap: 8px;
1760
+ `;
1761
+ const StyledIcon$2 = styled(Icon) `
1762
+ > path {
1763
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1764
+ }
1722
1765
  `;
1723
1766
  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;
1767
+ const StepIndicator = styled.div `
1768
+ width: 30px;
1769
+ height: 30px;
1770
+ border-radius: 15px;
1771
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1772
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1773
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1774
+ font-size: 14px;
1775
+ font-weight: 500;
1776
+ line-height: 1;
1777
+ display: flex;
1778
+ align-items: center;
1779
+ justify-content: center;
1780
+ flex-shrink: 0;
1738
1781
  `;
1739
1782
  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;
1783
+ const StepLabel = styled.div `
1784
+ color: #000;
1785
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1786
+ font-size: 14px;
1787
+ font-weight: 500;
1788
+ line-height: 1;
1746
1789
  `;
1747
1790
  const ProgressBar = ({ steps }) => {
1748
1791
  return (React.createElement(Steps, null, steps.map((step, i) => {
@@ -1750,75 +1793,75 @@ const ProgressBar = ({ steps }) => {
1750
1793
  step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
1751
1794
  React.createElement(StepLabel, null, step.label)));
1752
1795
  })));
1753
- };
1754
-
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;
1796
+ };
1797
+
1798
+ const Wrapper$6 = styled.div `
1799
+ position: fixed;
1800
+ top: 0;
1801
+ right: 0;
1802
+ bottom: 0;
1803
+ left: 0;
1804
+ z-index: 9999;
1805
+ background: rgba(0, 0, 0, 0.8);
1806
+ display: flex;
1807
+ align-items: center;
1808
+ justify-content: center;
1809
+ `;
1810
+ const Container$1 = styled.dialog `
1811
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
1812
+ max-width: calc(100vw - 80px);
1813
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
1814
+ max-height: calc(100vh - 80px);
1815
+ border-radius: 8px;
1816
+ overflow: hidden;
1817
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1818
+ outline: none;
1819
+ border: none;
1820
+ position: relative;
1821
+ padding: 0px;
1822
+ box-sizing: border-box;
1823
+ display: flex;
1824
+ flex-direction: column;
1825
+ `;
1826
+ const Header$1 = styled.div `
1827
+ flex-shrink: 0;
1828
+ padding: 20px;
1829
+ border-bottom: 1px solid #e7e6e6;
1830
+ display: flex;
1831
+ align-items: center;
1832
+ background: #ffffff;
1833
+ box-sizing: border-box;
1834
+ `;
1835
+ const Close = styled.div `
1836
+ margin-left: auto;
1837
+ display: flex;
1838
+ align-items: center;
1839
+ padding-left: 20px;
1840
+ cursor: pointer;
1841
+ `;
1842
+ const CloseMsg = styled.span `
1843
+ font-size: ${FontSizes.SMALL};
1844
+ font-weight: 400;
1845
+ font-family: ${FontStyles.DEFAULT};
1846
+ line-height: 1em;
1847
+ color: ${Colors.MEDIUM_GRAY.Hex};
1848
+ `;
1849
+ const ContentWrapper = styled.div `
1850
+ overflow-x: hidden;
1851
+ overflow-y: auto;
1852
+ background: #ffffff;
1853
+ flex: 1;
1854
+ box-sizing: border-box;
1855
+ `;
1856
+ const ButtonBar = styled.div `
1857
+ flex-shrink: 0;
1858
+ background: #ffffff;
1859
+ padding: 20px;
1860
+ border-top: 1px solid #e7e6e6;
1861
+ display: flex;
1862
+ align-items: center;
1863
+ justify-self: flex-end;
1864
+ box-sizing: border-box;
1822
1865
  `;
1823
1866
  const Modal = (_a) => {
1824
1867
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
@@ -1851,21 +1894,21 @@ const Modal = (_a) => {
1851
1894
  } },
1852
1895
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1853
1896
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
1854
- };
1855
-
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;
1897
+ };
1898
+
1899
+ const Wrapper$5 = styled.div `
1900
+ position: relative;
1901
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1902
+ `;
1903
+ const Trigger = styled.div `
1904
+ box-sizing: border-box;
1905
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
1906
+ height: 40px;
1907
+ padding: 0 10px;
1908
+ position: relative;
1909
+ cursor: pointer;
1910
+ border-width: 1px;
1911
+ border-style: solid;
1869
1912
  border-color: ${props => {
1870
1913
  if (props.$invalid) {
1871
1914
  return Colors.RED.Hex;
@@ -1876,50 +1919,50 @@ const Trigger = styled.div `
1876
1919
  else {
1877
1920
  return '#cccccc';
1878
1921
  }
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;
1922
+ }};
1923
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1924
+ background-image: none;
1925
+ display: flex;
1926
+ width: 100%;
1927
+ align-items: center;
1928
+ justify-content: space-between;
1929
+ z-index: 1;
1887
1930
  `;
1888
1931
  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;
1932
+ const Value = styled.div `
1933
+ color: ${Colors.BLACK.Hex};
1934
+ font-family: ${FontStyles.DEFAULT};
1935
+ font-size: ${FontSizes.DEFAULT};
1936
+ font-weight: 400;
1937
+ line-height: 2.9em;
1938
+ overflow: hidden;
1939
+ text-overflow: ellipsis;
1940
+ white-space: nowrap;
1941
+ width: 100%;
1942
+ `;
1943
+ const Options = styled.div `
1944
+ background: #fff;
1945
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1946
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1947
+ border-radius: 0px 0px 4px 4px;
1948
+ border-style: solid;
1949
+ border-top: none;
1950
+ border-width: 1px;
1951
+ left: 0;
1952
+ position: absolute;
1953
+ right: 0;
1954
+ z-index: 10;
1955
+ max-height: 220px;
1956
+ overflow: auto;
1914
1957
  `;
1915
1958
  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;
1959
+ const Scrim = styled.div `
1960
+ bottom: 0;
1961
+ left: 0;
1962
+ position: fixed;
1963
+ right: 0;
1964
+ top: 0;
1965
+ z-index: 9;
1923
1966
  `;
1924
1967
  const MultiSelect = (_a) => {
1925
1968
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
@@ -1934,37 +1977,37 @@ const MultiSelect = (_a) => {
1934
1977
  showOptions ? (React.createElement(Options, null,
1935
1978
  React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
1936
1979
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
1937
- };
1938
-
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;
1980
+ };
1981
+
1982
+ const Wrapper$4 = styled.div `
1983
+ display: flex;
1984
+ padding: 16px 30px;
1985
+ align-items: center;
1986
+ gap: 20px;
1987
+ align-self: stretch;
1988
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1989
+ `;
1990
+ const Title = styled.div `
1991
+ display: flex;
1992
+ align-items: center;
1993
+ gap: 20px;
1994
+ `;
1995
+ const Info = styled.div `
1996
+ display: flex;
1997
+ flex-direction: column;
1998
+ align-items: flex-start;
1999
+ gap: 4px;
2000
+ flex: 1 0 0;
2001
+ `;
2002
+ const Breadcrumbs = styled.div `
2003
+ display: flex;
2004
+ align-items: center;
2005
+ gap: 4px;
2006
+ `;
2007
+ const Actions = styled.div `
2008
+ display: flex;
2009
+ align-items: center;
2010
+ gap: 8px;
1968
2011
  `;
1969
2012
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
1970
2013
  const { format = 'primary', menuItems = [], label = '', } = buttonMenu || {};
@@ -1984,13 +2027,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
1984
2027
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
1985
2028
  }),
1986
2029
  menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
1987
- };
1988
-
1989
- const Wrapper$3 = styled.nav `
1990
- box-sizing: border-box;
1991
- display: flex;
1992
- align-items: center;
1993
- column-gap: 10px;
2030
+ };
2031
+
2032
+ const Wrapper$3 = styled.nav `
2033
+ box-sizing: border-box;
2034
+ display: flex;
2035
+ align-items: center;
2036
+ column-gap: 10px;
1994
2037
  `;
1995
2038
  const Pagination = (_a) => {
1996
2039
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2019,117 +2062,159 @@ const Pagination = (_a) => {
2019
2062
  value: `${p}`,
2020
2063
  })), value: `${currentPage}` }),
2021
2064
  React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
2022
- };
2023
-
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
- }
2065
+ };
2066
+
2067
+ const Wrapper$2 = styled.label `
2068
+ border-radius: 4px;
2069
+ padding: 4px 0px 4px 6px;
2070
+ margin-left: -6px;
2071
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2072
+ display: flex;
2073
+ align-items: center;
2074
+ font-size: ${FontSizes.DEFAULT};
2075
+ line-height: 1.6em;
2076
+ box-sizing: border-box;
2077
+ position: relative;
2078
+
2079
+ &:focus-within {
2080
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2081
+ }
2039
2082
  `;
2040
2083
  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;
2084
+ const Input = styled.input `
2085
+ font-size: 20px;
2086
+ margin: 0px;
2087
+ line-height: 1.6em;
2088
+ box-sizing: border-box;
2089
+ position: absolute;
2090
+ opacity: 0;
2091
+ cursor: pointer;
2092
+ height: 0;
2093
+ width: 0;
2094
+ &:checked + span {
2095
+ border-color: ${Colors.PRIMARY.Hex};
2096
+ }
2097
+ &:checked + span:after {
2098
+ background-color: ${Colors.PRIMARY.Hex};
2099
+ display: block;
2100
+ }
2101
+ &:disabled + span {
2102
+ background-color: #fff;
2103
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
2104
+ }
2105
+ &:disabled + span:after {
2106
+ background-color: #fff;
2107
+ }
2108
+ &:checked:disabled + span:after {
2109
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2110
+ }
2111
+ `;
2112
+ const Check = styled.span `
2113
+ height: 15px;
2114
+ width: 15px;
2115
+ border-radius: 50%;
2116
+ background-color: #fff;
2117
+ border-width: 2px;
2118
+ border-style: solid;
2119
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2120
+ &:after {
2121
+ content: "";
2122
+ position: absolute;
2123
+ top: 10px;
2124
+ left: 10px;
2125
+ width: 10px;
2126
+ height: 10px;
2127
+ border-radius: 50%;
2128
+ display: none;
2129
+ }
2130
+ `;
2131
+ const Label = styled.span `
2132
+ font-family: ${FontStyles.DEFAULT};
2133
+ font-size: ${FontSizes.DEFAULT};
2134
+ font-weight: 400;
2135
+ color: ${Colors.BLACK.Hex};
2136
+ line-height: 1.6em;
2137
+ margin-left: 6px;
2054
2138
  `;
2055
2139
  const Radio = (_a) => {
2056
2140
  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),
2141
+ return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps),
2058
2142
  React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
2143
+ React.createElement(Check, { "$invalid": invalid }),
2059
2144
  React.createElement(Label, null,
2060
2145
  children,
2061
2146
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2062
- };
2063
-
2147
+ };
2148
+
2064
2149
  const RadioList = (_a) => {
2065
2150
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2066
2151
  return (React.createElement(React.Fragment, null, options.map((option) => {
2067
2152
  const label = option.label || option.value;
2068
2153
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2069
2154
  })));
2070
- };
2071
-
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)};
2155
+ };
2156
+
2157
+ const StyledTable = styled.table `
2158
+ width: 100%;
2159
+ margin-top: 1px;
2160
+ table-layout: ${props => props.$tableLayout || 'auto'};
2161
+ border-collapse: collapse;
2162
+ text-indent: 0px;
2163
+ border-spacing: 0px;
2164
+ border-color: none;
2165
+ box-sizing: border-box;
2166
+ `;
2167
+ const Header = styled.th `
2168
+ padding: 12px !important;
2169
+ text-align: left;
2170
+ font-weight: 500;
2171
+ border-bottom: 1px solid #e5e5e5;
2172
+ border-top: 1px solid #e5e5e5;
2173
+ text-transform: uppercase;
2174
+ font-size: 12px;
2175
+ font-family: ${FontStyles.DEFAULT};
2176
+ letter-spacing: 1px;
2177
+ white-space: nowrap;
2178
+ line-height: 1;
2179
+ position: relative;
2180
+ box-sizing: border-box;
2181
+ width: ${props => props.$width || 'auto'};
2182
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2183
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2099
2184
  `;
2100
2185
  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
- }
2186
+ const Row = styled.tr `
2187
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2188
+ transition: all 0.2s;
2189
+ background-color: ${props => props.$bgColor};
2190
+ box-sizing: border-box;
2191
+ &:hover {
2192
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2193
+ }
2109
2194
  `;
2110
2195
  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
- }
2196
+ const Column = styled.td `
2197
+ padding: 16px 12px !important;
2198
+ font-size: ${FontSizes.DEFAULT} !important;
2199
+ font-weight: 400 !important;
2200
+ font-family: ${FontStyles.DEFAULT};
2201
+ border: none !important;
2202
+ word-break: break-word;
2203
+ line-height: 1.4em;
2204
+ box-sizing: border-box;
2205
+ text-align: ${props => props.$align || 'left'};
2206
+ width: ${props => props.$width || 'auto'};
2207
+ `;
2208
+ const IconWrapper = styled.span `
2209
+ position: absolute;
2210
+ top: 50%;
2211
+ transform: translateY(-50%);
2212
+ margin-left: 2px;
2213
+ `;
2214
+ const StyledIcon$1 = styled(Icon) `
2215
+ > path {
2216
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2217
+ }
2133
2218
  `;
2134
2219
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2135
2220
  const Table = (_a) => {
@@ -2147,55 +2232,55 @@ const Table = (_a) => {
2147
2232
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2148
2233
  })));
2149
2234
  }))) : null));
2150
- };
2151
-
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
- }
2235
+ };
2236
+
2237
+ const Wrapper$1 = styled.div `
2238
+ display: flex;
2239
+ box-sizing: border-box;
2240
+ align-items: flex-end;
2241
+ border-top: 1px solid #e5e5e5;
2242
+ border-bottom: 1px solid #e5e5e5;
2243
+ flex-shrink: 0;
2244
+ align-self: stretch;
2245
+ padding: 0;
2246
+ margin: 0;
2247
+ `;
2248
+ const Tab = styled.div `
2249
+ display: flex;
2250
+ align-items: center;
2251
+ gap: 6px;
2252
+ font-size: ${FontSizes.DEFAULT};
2253
+ font-family: ${FontStyles.DEFAULT};
2254
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2255
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2256
+ line-height: 1em;
2257
+ padding: 16px 30px 12px;
2258
+ margin: 0 0 -1px 0;
2259
+ border-bottom-width: 4px;
2260
+ border-bottom-style: solid;
2261
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2262
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2263
+ box-sizing: border-box;
2264
+ &:hover {
2265
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2266
+ font-weight: 500;
2267
+ }
2183
2268
  `;
2184
2269
  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;
2270
+ const Badge = styled.div `
2271
+ display: flex;
2272
+ width: 18px;
2273
+ height: 18px;
2274
+ justify-content: center;
2275
+ align-items: center;
2276
+ border-radius: 9px;
2277
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2278
+ color: #fff;
2279
+ font-family: ${FontStyles.DEFAULT};
2280
+ font-size: 12px;
2281
+ font-weight: 500;
2282
+ line-height: 1;
2283
+ letter-spacing: 1px;
2199
2284
  `;
2200
2285
  Badge.defaultProps = { theme: EditableTheme };
2201
2286
  const Tabs = (_a) => {
@@ -2207,29 +2292,29 @@ const Tabs = (_a) => {
2207
2292
  label));
2208
2293
  })));
2209
2294
  };
2210
- Tabs.defaultProps = {};
2211
-
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;
2295
+ Tabs.defaultProps = {};
2296
+
2297
+ const Track = styled.div `
2298
+ height: 24px;
2299
+ border-radius: 12px;
2300
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2301
+ display: flex;
2302
+ align-items: center;
2303
+ cursor: pointer;
2304
+ width: 40px;
2305
+ padding: 2px;
2306
+ box-sizing: border-box;
2307
+ `;
2308
+ const Handle = styled.div `
2309
+ width: 20px;
2310
+ height: 20px;
2311
+ border-radius: 10px;
2312
+ background: #ffffff;
2313
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2314
+ display: flex;
2315
+ align-items: center;
2316
+ justify-content: center;
2317
+ box-sizing: border-box;
2233
2318
  `;
2234
2319
  const Toggle = (_a) => {
2235
2320
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2238,32 +2323,32 @@ const Toggle = (_a) => {
2238
2323
  React.createElement(Handle, { "$on": on },
2239
2324
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? mdiCheck : mdiClose, size: '16px' }))));
2240
2325
  };
2241
- Toggle.defaultProps = {};
2242
-
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;
2326
+ Toggle.defaultProps = {};
2327
+
2328
+ const Container = styled.div `
2329
+ width: 100%;
2330
+ padding: 40px auto;
2331
+ gap: 20px;
2332
+ display: flex;
2333
+ flex-direction: column;
2334
+ justify-items: center;
2335
+ align-items: center;
2336
+ `;
2337
+ const Wrapper = styled.div `
2338
+ gap: 10px;
2339
+ display: flex;
2340
+ flex-direction: column;
2341
+ justify-items: center;
2342
+ align-items: center;
2343
+ `;
2344
+ const StyledIcon = styled.div `
2345
+ display: flex;
2346
+ align-items: center;
2347
+ justify-content: center;
2348
+ width: 80px;
2349
+ height: 80px;
2350
+ border-radius: 40px;
2351
+ background: #f5f5f5;
2267
2352
  `;
2268
2353
  const ZeroState = (_a) => {
2269
2354
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2274,7 +2359,7 @@ const ZeroState = (_a) => {
2274
2359
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2275
2360
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2276
2361
  action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
2277
- };
2278
-
2279
- export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
2280
- //# sourceMappingURL=index.js.map
2362
+ };
2363
+
2364
+ export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
2365
+ //# sourceMappingURL=index.js.map