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