@hexure/ui 1.13.29 → 1.13.30

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 (8) hide show
  1. package/dist/cjs/index.js +1516 -1516
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/Input/Input.d.ts +2 -0
  4. package/dist/esm/index.js +1468 -1468
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/types/components/Input/Input.d.ts +2 -0
  7. package/dist/index.d.ts +2 -0
  8. package/package.json +1 -1
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,22 +21,22 @@ 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, SuppressedError, Symbol */
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
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
36
- var e = new Error(message);
37
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
38
- };
39
-
24
+ ***************************************************************************** */
25
+ /* global Reflect, Promise, SuppressedError, Symbol */
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
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
36
+ var e = new Error(message);
37
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
38
+ };
39
+
40
40
  const Colors = {
41
41
  PRIMARY: {
42
42
  Hex: '#0193D7',
@@ -85,26 +85,26 @@ const FontSizes = {
85
85
  };
86
86
  const EditableTheme = {
87
87
  PRIMARY_COLOR: Colors.PRIMARY,
88
- };
89
-
90
- const Header$3 = styled.div `
91
- display: flex;
92
- align-items: center;
93
- justify-content: space-between;
94
- box-sizing: border-box;
95
- background: #f5f5f5;
96
- border: 1px solid #e5e5e5;
97
- padding: 14px 20px;
98
- height: 50px;
99
- cursor: pointer;
100
- `;
101
- const Title$2 = styled.div `
102
- font-size: ${FontSizes.DEFAULT};
103
- font-weight: 400;
104
- color: ${Colors.BLACK.Hex};
105
- line-height: 1.6em;
106
- font-family: ${FontStyles.DEFAULT};
107
- box-sizing: border-box;
88
+ };
89
+
90
+ const Header$3 = styled.div `
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: space-between;
94
+ box-sizing: border-box;
95
+ background: #f5f5f5;
96
+ border: 1px solid #e5e5e5;
97
+ padding: 14px 20px;
98
+ height: 50px;
99
+ cursor: pointer;
100
+ `;
101
+ const Title$2 = styled.div `
102
+ font-size: ${FontSizes.DEFAULT};
103
+ font-weight: 400;
104
+ color: ${Colors.BLACK.Hex};
105
+ line-height: 1.6em;
106
+ font-family: ${FontStyles.DEFAULT};
107
+ box-sizing: border-box;
108
108
  `;
109
109
  const Accordion = (_a) => {
110
110
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -113,40 +113,40 @@ const Accordion = (_a) => {
113
113
  React.createElement(Title$2, null, title),
114
114
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
115
115
  open ? children : null));
116
- };
117
-
118
- const StyledComponent = styled.p `
119
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
120
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
121
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
122
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
123
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
124
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
125
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
126
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
127
- margin: ${props => props.$margin || '0px'};
128
- padding: ${props => props.$padding || '0px'};
129
- text-align: ${props => props.$align || 'left'};
130
- box-sizing: border-box;
116
+ };
117
+
118
+ const StyledComponent = styled.p `
119
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
120
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
121
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
122
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
123
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
124
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
125
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
126
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
127
+ margin: ${props => props.$margin || '0px'};
128
+ padding: ${props => props.$padding || '0px'};
129
+ text-align: ${props => props.$align || 'left'};
130
+ box-sizing: border-box;
131
131
  `;
132
132
  const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
133
133
  return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
134
134
  };
135
135
  Copy.defaultProps = {
136
136
  type: 'default',
137
- };
138
-
139
- const Wrapper$h = styled.div `
140
- display: inline-block;
141
- position: relative;
142
- height: 16px;
143
- `;
144
- const StyledIcon$6 = styled(Icon) `
145
- width: 16px;
146
- height: 16px;
147
- margin: 0px 6px;
148
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
149
- cursor: pointer;
137
+ };
138
+
139
+ const Wrapper$h = styled.div `
140
+ display: inline-block;
141
+ position: relative;
142
+ height: 16px;
143
+ `;
144
+ const StyledIcon$6 = styled(Icon) `
145
+ width: 16px;
146
+ height: 16px;
147
+ margin: 0px 6px;
148
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
149
+ cursor: pointer;
150
150
  `;
151
151
  StyledIcon$6.defaultProps = { theme: EditableTheme };
152
152
  const positions = {
@@ -184,13 +184,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
184
184
  return (React.createElement(Wrapper$h, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
185
185
  trigger || React.createElement(StyledIcon$6, { path: js.mdiInformationOutline }),
186
186
  show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
187
- };
188
-
189
- const StyledButton = styled.button `
190
- height: ${props => (props.$small ? '30px' : '40px')};
191
- line-height: 1em;
192
- border-radius: ${props => (props.$small ? '15px' : '20px')};
193
- margin: ${props => props.$margin || '0px'};
187
+ };
188
+
189
+ const StyledButton = styled.button `
190
+ height: ${props => (props.$small ? '30px' : '40px')};
191
+ line-height: 1em;
192
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
193
+ margin: ${props => props.$margin || '0px'};
194
194
  padding: ${props => {
195
195
  if (props.$hasChildren) {
196
196
  if (props.$small) {
@@ -201,9 +201,9 @@ const StyledButton = styled.button `
201
201
  }
202
202
  }
203
203
  return '0px';
204
- }};
205
- outline: none;
206
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
204
+ }};
205
+ outline: none;
206
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
207
207
  width: ${props => {
208
208
  if (props.$hasChildren) {
209
209
  return 'auto';
@@ -212,53 +212,53 @@ const StyledButton = styled.button `
212
212
  return '30px';
213
213
  }
214
214
  return '40px';
215
- }};
216
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
217
- display: flex;
218
- align-items: center;
219
- justify-content: center;
220
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
221
- border-width: 1px;
222
- border-style: solid;
223
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
224
- box-sizing: border-box;
225
-
226
- &:active,
227
- &:focus,
228
- &:hover {
229
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
230
- }
231
- `;
232
- const Label$5 = styled.span `
233
- color: ${props => props.$content_color || '#fff'};
234
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
235
- font-family: ${FontStyles.DEFAULT};
236
- font-weight: 500;
237
- line-height: 1;
238
- `;
239
- const StyledIcon$5 = styled.span `
240
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
241
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
242
- display: flex;
243
- align-items: center;
244
- box-sizing: border-box;
245
- `;
246
- const Badge$1 = styled.span `
247
- width: ${props => (props.$small ? '20px' : '24px')};
248
- height: ${props => (props.$small ? '20px' : '24px')};
249
- line-height: 1;
250
- display: flex;
251
- align-items: center;
252
- justify-content: center;
253
- border-radius: 100%;
254
- background-color: ${props => props.$bg_color || '#fff'};
255
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
256
- font-size: ${props => (props.$small ? '10px' : '12px')};
257
- font-weight: 600;
258
- font-family: ${FontStyles.DEFAULT};
259
- letter-spacing: -1px;
260
- margin-left: ${props => (props.$small ? '5px' : '10px')};
261
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
215
+ }};
216
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
217
+ display: flex;
218
+ align-items: center;
219
+ justify-content: center;
220
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
221
+ border-width: 1px;
222
+ border-style: solid;
223
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
224
+ box-sizing: border-box;
225
+
226
+ &:active,
227
+ &:focus,
228
+ &:hover {
229
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
230
+ }
231
+ `;
232
+ const Label$5 = styled.span `
233
+ color: ${props => props.$content_color || '#fff'};
234
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
235
+ font-family: ${FontStyles.DEFAULT};
236
+ font-weight: 500;
237
+ line-height: 1;
238
+ `;
239
+ const StyledIcon$5 = styled.span `
240
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
241
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
242
+ display: flex;
243
+ align-items: center;
244
+ box-sizing: border-box;
245
+ `;
246
+ const Badge$1 = styled.span `
247
+ width: ${props => (props.$small ? '20px' : '24px')};
248
+ height: ${props => (props.$small ? '20px' : '24px')};
249
+ line-height: 1;
250
+ display: flex;
251
+ align-items: center;
252
+ justify-content: center;
253
+ border-radius: 100%;
254
+ background-color: ${props => props.$bg_color || '#fff'};
255
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
256
+ font-size: ${props => (props.$small ? '10px' : '12px')};
257
+ font-weight: 600;
258
+ font-family: ${FontStyles.DEFAULT};
259
+ letter-spacing: -1px;
260
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
261
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
262
262
  `;
263
263
  const Button = (_a) => {
264
264
  var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', toolTip, title = '' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "toolTip", "title"]);
@@ -304,37 +304,37 @@ const Button = (_a) => {
304
304
  return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
305
305
  }
306
306
  return button_view;
307
- };
308
-
309
- const H1 = styled.h1 `
310
- color: ${Colors.BLACK.Hex};
311
- font-size: 30px;
312
- font-weight: ${props => (props.$bold ? '500' : '400')};
313
- line-height: 1.4em;
314
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
315
- margin: ${props => props.$margin || '0px'};
316
- padding: ${props => props.$padding || '0px'};
317
- box-sizing: border-box;
318
- `;
319
- const H2 = styled.h2 `
320
- color: ${Colors.BLACK.Hex};
321
- font-size: 24px;
322
- font-weight: ${props => (props.$bold ? '500' : '400')};
323
- line-height: 1.33em;
324
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
325
- margin: ${props => props.$margin || '0px'};
326
- padding: ${props => props.$padding || '0px'};
327
- box-sizing: border-box;
328
- `;
329
- const H3 = styled.h3 `
330
- color: ${Colors.BLACK.Hex};
331
- font-size: 18px;
332
- font-weight: ${props => (props.$bold ? '500' : '400')};
333
- line-height: 1.33em;
334
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
335
- margin: ${props => props.$margin || '0px'};
336
- padding: ${props => props.$padding || '0px'};
337
- box-sizing: border-box;
307
+ };
308
+
309
+ const H1 = styled.h1 `
310
+ color: ${Colors.BLACK.Hex};
311
+ font-size: 30px;
312
+ font-weight: ${props => (props.$bold ? '500' : '400')};
313
+ line-height: 1.4em;
314
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
315
+ margin: ${props => props.$margin || '0px'};
316
+ padding: ${props => props.$padding || '0px'};
317
+ box-sizing: border-box;
318
+ `;
319
+ const H2 = styled.h2 `
320
+ color: ${Colors.BLACK.Hex};
321
+ font-size: 24px;
322
+ font-weight: ${props => (props.$bold ? '500' : '400')};
323
+ line-height: 1.33em;
324
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
325
+ margin: ${props => props.$margin || '0px'};
326
+ padding: ${props => props.$padding || '0px'};
327
+ box-sizing: border-box;
328
+ `;
329
+ const H3 = styled.h3 `
330
+ color: ${Colors.BLACK.Hex};
331
+ font-size: 18px;
332
+ font-weight: ${props => (props.$bold ? '500' : '400')};
333
+ line-height: 1.33em;
334
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
335
+ margin: ${props => props.$margin || '0px'};
336
+ padding: ${props => props.$padding || '0px'};
337
+ box-sizing: border-box;
338
338
  `;
339
339
  const Heading = (_a) => {
340
340
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -353,29 +353,29 @@ const Heading = (_a) => {
353
353
  Heading.defaultProps = {
354
354
  bold: false,
355
355
  type: 'primary',
356
- };
357
-
358
- const Wrapper$g = styled.div `
359
- position: fixed;
360
- top: 0;
361
- right: 0;
362
- bottom: 0;
363
- left: 0;
364
- z-index: 9999;
365
- background: rgba(0, 0, 0, 0.8);
366
- display: flex;
367
- align-items: center;
368
- justify-content: center;
369
- box-sizing: border-box;
356
+ };
357
+
358
+ const Wrapper$g = styled.div `
359
+ position: fixed;
360
+ top: 0;
361
+ right: 0;
362
+ bottom: 0;
363
+ left: 0;
364
+ z-index: 9999;
365
+ background: rgba(0, 0, 0, 0.8);
366
+ display: flex;
367
+ align-items: center;
368
+ justify-content: center;
369
+ box-sizing: border-box;
370
370
  `;
371
371
  const Container$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
372
- const Buttons$1 = styled.div `
373
- display: flex;
374
- gap: 10px;
375
- align-items: center;
376
- justify-content: center;
377
- margin-top: 30px;
378
- box-sizing: border-box;
372
+ const Buttons$1 = styled.div `
373
+ display: flex;
374
+ gap: 10px;
375
+ align-items: center;
376
+ justify-content: center;
377
+ margin-top: 30px;
378
+ box-sizing: border-box;
379
379
  `;
380
380
  const ActionDialog = (_a) => {
381
381
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
@@ -387,29 +387,29 @@ const ActionDialog = (_a) => {
387
387
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
388
388
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
389
389
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)));
390
- };
391
-
392
- const Wrapper$f = styled.div `
393
- border: 1px solid #f1f1f1;
394
- border-radius: 4px;
395
- border-left-width: 4px;
396
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
397
- display: flex;
398
- align-items: flex-start;
399
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
400
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
401
- box-sizing: border-box;
402
- `;
403
- const StyledIcon$4 = styled(Icon) `
404
- flex-shrink: 0;
405
- `;
406
- const Action$1 = styled.div `
407
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
408
- font-size: ${FontSizes.DEFAULT};
409
- font-family: ${FontStyles.DEFAULT};
410
- font-weight: 500;
411
- cursor: pointer;
412
- margin-top: 6px;
390
+ };
391
+
392
+ const Wrapper$f = styled.div `
393
+ border: 1px solid #f1f1f1;
394
+ border-radius: 4px;
395
+ border-left-width: 4px;
396
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
397
+ display: flex;
398
+ align-items: flex-start;
399
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
400
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
401
+ box-sizing: border-box;
402
+ `;
403
+ const StyledIcon$4 = styled(Icon) `
404
+ flex-shrink: 0;
405
+ `;
406
+ const Action$1 = styled.div `
407
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
408
+ font-size: ${FontSizes.DEFAULT};
409
+ font-family: ${FontStyles.DEFAULT};
410
+ font-weight: 500;
411
+ cursor: pointer;
412
+ margin-top: 6px;
413
413
  `;
414
414
  Action$1.defaultProps = { theme: EditableTheme };
415
415
  const Alert = (_a) => {
@@ -439,8 +439,8 @@ const Alert = (_a) => {
439
439
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
440
440
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
441
441
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
442
- };
443
-
442
+ };
443
+
444
444
  const colorMapping = {
445
445
  black: {
446
446
  fill_1: '#000000',
@@ -481,61 +481,61 @@ const Logo = (_a) => {
481
481
  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 }),
482
482
  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 })));
483
483
  }
484
- };
485
-
486
- const Container$3 = styled.header `
487
- width: 100%;
488
- display: flex;
489
- padding: 20px;
490
- box-sizing: border-box;
491
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
492
- background: '#fff';
493
- justify-content: space-between;
494
- `;
495
- const LogoWrapper = styled.div `
496
- display: flex;
497
- align-items: center;
498
- `;
499
- const Image = styled.img `
500
- height: 30px !important;
501
- width: auto !important;
502
- `;
503
- const Buttons = styled.div `
504
- display: flex;
505
- flex-direction: row;
506
- column-gap: 10px;
507
- flex-direction: reverse;
484
+ };
485
+
486
+ const Container$3 = styled.header `
487
+ width: 100%;
488
+ display: flex;
489
+ padding: 20px;
490
+ box-sizing: border-box;
491
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
492
+ background: '#fff';
493
+ justify-content: space-between;
494
+ `;
495
+ const LogoWrapper = styled.div `
496
+ display: flex;
497
+ align-items: center;
498
+ `;
499
+ const Image = styled.img `
500
+ height: 30px !important;
501
+ width: auto !important;
502
+ `;
503
+ const Buttons = styled.div `
504
+ display: flex;
505
+ flex-direction: row;
506
+ column-gap: 10px;
507
+ flex-direction: reverse;
508
508
  `;
509
509
  const AppHeader = ({ logoUrl, buttons = [] }) => {
510
510
  return (React.createElement(Container$3, null,
511
511
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
512
512
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
513
- };
514
-
515
- const Wrapper$e = styled.div `
516
- display: inline-block;
517
- border-radius: 4px;
518
- padding: 4px 6px;
519
- background: ${props => Colors[props.$color].Hex};
520
- color: #ffffff;
521
- box-sizing: border-box;
522
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
523
- `;
524
- const Content$2 = styled.div `
525
- display: flex;
526
- align-items: center;
527
- `;
528
- const Label$4 = styled.div `
529
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
530
- font-size: ${FontSizes.SMALL};
531
- font-weight: 500;
532
- font-family: ${FontStyles.DEFAULT};
533
- line-height: 1.2em;
534
- `;
535
- const Remove$1 = styled.div `
536
- margin-left: 10px;
537
- display: flex;
538
- align-items: center;
513
+ };
514
+
515
+ const Wrapper$e = styled.div `
516
+ display: inline-block;
517
+ border-radius: 4px;
518
+ padding: 4px 6px;
519
+ background: ${props => Colors[props.$color].Hex};
520
+ color: #ffffff;
521
+ box-sizing: border-box;
522
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
523
+ `;
524
+ const Content$2 = styled.div `
525
+ display: flex;
526
+ align-items: center;
527
+ `;
528
+ const Label$4 = styled.div `
529
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
530
+ font-size: ${FontSizes.SMALL};
531
+ font-weight: 500;
532
+ font-family: ${FontStyles.DEFAULT};
533
+ line-height: 1.2em;
534
+ `;
535
+ const Remove$1 = styled.div `
536
+ margin-left: 10px;
537
+ display: flex;
538
+ align-items: center;
539
539
  `;
540
540
  const Tag = (_a) => {
541
541
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -544,94 +544,94 @@ const Tag = (_a) => {
544
544
  React.createElement(Label$4, { "$color": color }, children),
545
545
  removable ? (React.createElement(Remove$1, null,
546
546
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
547
- };
548
-
549
- const SidebarContainer = styled.div `
550
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
551
- display: flex;
552
- flex-direction: column;
553
- height: 100%;
554
- padding: 12px 0px;
555
- width: ${props => (props.$isOpen ? props.$width : '60px')};
556
- `;
557
- const MenuWrapper$1 = styled.button `
558
- display: flex;
559
- align-items: center;
560
- border: 0px;
561
- background-color: transparent;
562
- padding-left: 0px;
563
- border-left-width: 4px;
564
- border-left-style: solid;
565
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
566
- cursor: pointer;
567
- height: 40px;
568
-
569
- &:hover > div {
570
- color: ${props => props.$color.Hex};
571
- }
572
-
573
- &:hover > svg > path {
574
- fill: ${Colors.BLACK.Hex} !important;
575
- }
576
- `;
577
- const MenuIcon = styled(Icon) `
578
- width: 20px;
579
- height: 20px;
580
- margin: 0px 16px;
581
- flex-shrink: 0;
582
-
583
- > path {
584
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
585
- }
586
- `;
587
- const MenuLabel = styled.div `
588
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
589
- flex: 1;
590
- font-size: 12px;
591
- font-style: normal;
592
- font-weight: 600;
593
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
594
- line-height: 16px;
595
- padding: 12px 0px;
596
- letter-spacing: 1px;
597
- `;
598
- const SubMenu = styled.div `
599
- overflow-y: auto;
600
- padding-left: 44px;
601
- padding-right: 20px;
602
- padding-bottom: 10px;
603
- `;
604
- const SubMenuItem = styled.a `
605
- display: block;
606
- padding: 8px 12px;
607
- border-radius: 8px;
608
- font-size: 13px;
609
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
610
- line-height: 20px;
611
- text-decoration: none;
612
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
613
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
614
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
615
- cursor: pointer;
616
-
617
- &:hover {
618
- color: ${props => props.$color.Hex};
619
- font-weight: 500;
620
- }
621
- `;
622
- const Footer = styled.div `
623
- padding: 20px 14px 0px;
624
- display: flex;
625
- align-items: center;
626
- `;
627
- const FooterInfo = styled.div `
628
- display: flex;
629
- flex-direction: column;
630
- flex: 1;
631
- align-items: flex-start;
632
- `;
633
- const SidebarMenuContainer = styled.div `
634
- flex-grow: 1;
547
+ };
548
+
549
+ const SidebarContainer = styled.div `
550
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
551
+ display: flex;
552
+ flex-direction: column;
553
+ height: 100%;
554
+ padding: 12px 0px;
555
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
556
+ `;
557
+ const MenuWrapper$1 = styled.button `
558
+ display: flex;
559
+ align-items: center;
560
+ border: 0px;
561
+ background-color: transparent;
562
+ padding-left: 0px;
563
+ border-left-width: 4px;
564
+ border-left-style: solid;
565
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
566
+ cursor: pointer;
567
+ height: 40px;
568
+
569
+ &:hover > div {
570
+ color: ${props => props.$color.Hex};
571
+ }
572
+
573
+ &:hover > svg > path {
574
+ fill: ${Colors.BLACK.Hex} !important;
575
+ }
576
+ `;
577
+ const MenuIcon = styled(Icon) `
578
+ width: 20px;
579
+ height: 20px;
580
+ margin: 0px 16px;
581
+ flex-shrink: 0;
582
+
583
+ > path {
584
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
585
+ }
586
+ `;
587
+ const MenuLabel = styled.div `
588
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
589
+ flex: 1;
590
+ font-size: 12px;
591
+ font-style: normal;
592
+ font-weight: 600;
593
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
594
+ line-height: 16px;
595
+ padding: 12px 0px;
596
+ letter-spacing: 1px;
597
+ `;
598
+ const SubMenu = styled.div `
599
+ overflow-y: auto;
600
+ padding-left: 44px;
601
+ padding-right: 20px;
602
+ padding-bottom: 10px;
603
+ `;
604
+ const SubMenuItem = styled.a `
605
+ display: block;
606
+ padding: 8px 12px;
607
+ border-radius: 8px;
608
+ font-size: 13px;
609
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
610
+ line-height: 20px;
611
+ text-decoration: none;
612
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
613
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
614
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
615
+ cursor: pointer;
616
+
617
+ &:hover {
618
+ color: ${props => props.$color.Hex};
619
+ font-weight: 500;
620
+ }
621
+ `;
622
+ const Footer = styled.div `
623
+ padding: 20px 14px 0px;
624
+ display: flex;
625
+ align-items: center;
626
+ `;
627
+ const FooterInfo = styled.div `
628
+ display: flex;
629
+ flex-direction: column;
630
+ flex: 1;
631
+ align-items: flex-start;
632
+ `;
633
+ const SidebarMenuContainer = styled.div `
634
+ flex-grow: 1;
635
635
  `;
636
636
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
637
637
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -655,75 +655,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
655
655
  e.preventDefault();
656
656
  toggleCollapse(!collapsed);
657
657
  }, small: true }))));
658
- };
659
-
660
- const Wrapper$d = styled.div `
661
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
662
- border-radius: 8px;
663
- box-sizing: border-box;
664
- display: flex;
665
- align-items: center;
666
- justify-content: space-between;
667
- padding: 16px 20px;
658
+ };
659
+
660
+ const Wrapper$d = styled.div `
661
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
662
+ border-radius: 8px;
663
+ box-sizing: border-box;
664
+ display: flex;
665
+ align-items: center;
666
+ justify-content: space-between;
667
+ padding: 16px 20px;
668
668
  `;
669
669
  Wrapper$d.defaultProps = { theme: EditableTheme };
670
- const Left = styled.div `
671
- box-sizing: border-box;
672
- display: flex;
673
- align-items: center;
674
- justify-content: space-between;
675
- flex-shrink: 0;
676
- `;
677
- const Info$1 = styled.div `
678
- box-sizing: border-box;
679
- display: flex;
680
- align-items: center;
681
- margin-right: 30px;
682
- `;
683
- const Selected = styled.span `
684
- font-size: 14px;
685
- font-weight: 400;
686
- font-family: ${FontStyles.DEFAULT};
687
- color: ${Colors.BLACK.Hex};
688
- line-height: 1;
689
- `;
690
- const Clear = styled.span `
691
- font-size: 14px;
692
- font-weight: 400;
693
- font-family: ${FontStyles.DEFAULT};
694
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
695
- line-height: 1;
696
- cursor: pointer;
697
- padding-left: 10px;
698
- margin-left: 10px;
699
- border-left: 1px solid #ccc;
670
+ const Left = styled.div `
671
+ box-sizing: border-box;
672
+ display: flex;
673
+ align-items: center;
674
+ justify-content: space-between;
675
+ flex-shrink: 0;
676
+ `;
677
+ const Info$1 = styled.div `
678
+ box-sizing: border-box;
679
+ display: flex;
680
+ align-items: center;
681
+ margin-right: 30px;
682
+ `;
683
+ const Selected = styled.span `
684
+ font-size: 14px;
685
+ font-weight: 400;
686
+ font-family: ${FontStyles.DEFAULT};
687
+ color: ${Colors.BLACK.Hex};
688
+ line-height: 1;
689
+ `;
690
+ const Clear = styled.span `
691
+ font-size: 14px;
692
+ font-weight: 400;
693
+ font-family: ${FontStyles.DEFAULT};
694
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
695
+ line-height: 1;
696
+ cursor: pointer;
697
+ padding-left: 10px;
698
+ margin-left: 10px;
699
+ border-left: 1px solid #ccc;
700
700
  `;
701
701
  Clear.defaultProps = { theme: EditableTheme };
702
- const Actions$1 = styled.div `
703
- box-sizing: border-box;
704
- display: flex;
705
- align-items: center;
706
- column-gap: 10px;
707
- `;
708
- const Error$1 = styled.div `
709
- box-sizing: border-box;
710
- display: flex;
711
- align-items: center;
712
- background: rgba(${Colors.RED.Rgb}, 0.1);
713
- border-radius: 4px;
714
- padding: 6px 8px;
715
- text-overflow: ellipsis;
716
- white-space: nowrap;
717
- overflow: hidden;
718
- margin-left: 30px;
719
- `;
720
- const ErrorMsg = styled.span `
721
- font-size: 14px;
722
- font-weight: 500;
723
- font-family: ${FontStyles.DEFAULT};
724
- line-height: 1em;
725
- color: ${Colors.RED.Hex};
726
- margin-left: 8px;
702
+ const Actions$1 = styled.div `
703
+ box-sizing: border-box;
704
+ display: flex;
705
+ align-items: center;
706
+ column-gap: 10px;
707
+ `;
708
+ const Error$1 = styled.div `
709
+ box-sizing: border-box;
710
+ display: flex;
711
+ align-items: center;
712
+ background: rgba(${Colors.RED.Rgb}, 0.1);
713
+ border-radius: 4px;
714
+ padding: 6px 8px;
715
+ text-overflow: ellipsis;
716
+ white-space: nowrap;
717
+ overflow: hidden;
718
+ margin-left: 30px;
719
+ `;
720
+ const ErrorMsg = styled.span `
721
+ font-size: 14px;
722
+ font-weight: 500;
723
+ font-family: ${FontStyles.DEFAULT};
724
+ line-height: 1em;
725
+ color: ${Colors.RED.Hex};
726
+ margin-left: 8px;
727
727
  `;
728
728
  const BulkActionBar = (_a) => {
729
729
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -738,48 +738,48 @@ const BulkActionBar = (_a) => {
738
738
  errorMsg ? (React.createElement(Error$1, null,
739
739
  React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
740
740
  React.createElement(ErrorMsg, null, errorMsg))) : null));
741
- };
742
-
743
- const Wrapper$c = styled.div `
744
- background: #fff;
745
- border-radius: 8px;
746
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
747
- display: flex;
748
- flex-direction: column;
749
- gap: 4px;
750
- max-height: ${props => props.$maxHeight || '312px'};
751
- padding: 10px;
752
- width: 200px;
753
- `;
754
- const MenuItem = styled.div `
755
- align-items: center;
756
- border-radius: 8px;
757
- border: 1px solid transparent;
758
- display: flex;
759
- gap: 8px;
760
- height: 38px;
761
- padding: 8px;
762
- &:hover {
763
- background: rgba(1, 147, 215, 0.1);
764
- cursor: pointer;
765
-
766
- svg,
767
- path {
768
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
769
- }
770
- }
741
+ };
742
+
743
+ const Wrapper$c = styled.div `
744
+ background: #fff;
745
+ border-radius: 8px;
746
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
747
+ display: flex;
748
+ flex-direction: column;
749
+ gap: 4px;
750
+ max-height: ${props => props.$maxHeight || '312px'};
751
+ padding: 10px;
752
+ width: 200px;
753
+ `;
754
+ const MenuItem = styled.div `
755
+ align-items: center;
756
+ border-radius: 8px;
757
+ border: 1px solid transparent;
758
+ display: flex;
759
+ gap: 8px;
760
+ height: 38px;
761
+ padding: 8px;
762
+ &:hover {
763
+ background: rgba(1, 147, 215, 0.1);
764
+ cursor: pointer;
765
+
766
+ svg,
767
+ path {
768
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
769
+ }
770
+ }
771
771
  `;
772
772
  MenuItem.defaultProps = { theme: EditableTheme };
773
- const Title$1 = styled.span `
774
- font-family: Roboto;
775
- font-size: 14px;
776
- font-weight: 400;
777
- height: auto;
778
- letter-spacing: 0px;
779
- line-height: 22px;
780
- text-align: left;
781
- color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
782
- pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
773
+ const Title$1 = styled.span `
774
+ font-family: Roboto;
775
+ font-size: 14px;
776
+ font-weight: 400;
777
+ height: auto;
778
+ letter-spacing: 0px;
779
+ line-height: 22px;
780
+ text-align: left;
781
+ color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
782
+ pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
783
783
  `;
784
784
  Title$1.defaultProps = {
785
785
  disabled: false,
@@ -792,19 +792,19 @@ const MoreMenu = (_a) => {
792
792
  item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
793
793
  React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label)));
794
794
  })));
795
- };
796
-
797
- const MenuWrapper = styled.div `
798
- position: relative; // Ensure this is relative
799
- display: inline-block;
800
- `;
801
- const StyledMoreMenu = styled(MoreMenu) `
802
- position: absolute; // Changed from fixed to absolute
803
- top: ${props => props.$top};
804
- left: ${props => props.$left};
805
- width: ${props => props.$menuWidth};
806
- max-height: ${props => props.maxHeight};
807
- z-index: 10;
795
+ };
796
+
797
+ const MenuWrapper = styled.div `
798
+ position: relative; // Ensure this is relative
799
+ display: inline-block;
800
+ `;
801
+ const StyledMoreMenu = styled(MoreMenu) `
802
+ position: absolute; // Changed from fixed to absolute
803
+ top: ${props => props.$top};
804
+ left: ${props => props.$left};
805
+ width: ${props => props.$menuWidth};
806
+ max-height: ${props => props.maxHeight};
807
+ z-index: 10;
808
808
  `;
809
809
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, }) => {
810
810
  const [showMenu, toggleMenu] = React.useState(false);
@@ -878,85 +878,85 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
878
878
  return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
879
879
  React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
880
880
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
881
- };
882
-
883
- const Wrapper$b = styled.label `
884
- border-radius: 4px;
885
- padding: 4px 0px 4px 6px;
886
- margin-left: -6px;
887
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
888
- display: flex;
889
- align-items: center;
890
- font-size: ${FontSizes.DEFAULT};
891
- line-height: 1.6em;
892
- box-sizing: border-box;
893
- position: relative;
894
-
895
- &:focus-within {
896
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
897
- }
881
+ };
882
+
883
+ const Wrapper$b = styled.label `
884
+ border-radius: 4px;
885
+ padding: 4px 0px 4px 6px;
886
+ margin-left: -6px;
887
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
888
+ display: flex;
889
+ align-items: center;
890
+ font-size: ${FontSizes.DEFAULT};
891
+ line-height: 1.6em;
892
+ box-sizing: border-box;
893
+ position: relative;
894
+
895
+ &:focus-within {
896
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
897
+ }
898
898
  `;
899
899
  Wrapper$b.defaultProps = { theme: EditableTheme };
900
- const Input$2 = styled.input `
901
- font-size: 20px;
902
- margin: 0px;
903
- line-height: 1.1em;
904
- box-sizing: border-box;
905
- position: absolute;
906
- opacity: 0;
907
- cursor: pointer;
908
- height: 0;
909
- width: 0;
910
- &:checked + span {
911
- background-color: ${Colors.PRIMARY.Hex};
912
- border-color: ${Colors.PRIMARY.Hex};
913
- }
914
- &:checked:disabled + span {
915
- background-color: ${Colors.MEDIUM_GRAY.Hex};
916
- border-color: ${Colors.MEDIUM_GRAY.Hex};
917
- }
918
- &:disabled + span {
919
- background-color: #d3d3d3;
920
- border-color: #d3d3d3;
921
- }
922
- &:checked + span:after {
923
- display: block;
924
- }
925
- `;
926
- const Check$1 = styled.span `
927
- height: 17px;
928
- width: 17px;
929
- min-width: 17px;
930
- background-color: #fff;
931
- border-width: 2px;
932
- border-style: solid;
933
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
934
- box-sizing: border-box;
935
- position: relative;
936
- &:after {
937
- content: '';
938
- position: absolute;
939
- left: 3px;
940
- top: 0px;
941
- width: 7px;
942
- height: 12px;
943
- border: solid white;
944
- border-width: 0 3px 3px 0;
945
- -webkit-transform: rotate(45deg);
946
- -ms-transform: rotate(45deg);
947
- transform: rotate(45deg);
948
- box-sizing: border-box;
949
- display: none;
950
- }
951
- `;
952
- const Label$3 = styled.span `
953
- font-family: ${FontStyles.DEFAULT};
954
- font-size: ${FontSizes.DEFAULT};
955
- font-weight: 400;
956
- line-height: 1.6em;
957
- color: ${props => props.color || Colors.BLACK.Hex};
958
- margin-left: 6px;
959
- box-sizing: border-box;
900
+ const Input$2 = styled.input `
901
+ font-size: 20px;
902
+ margin: 0px;
903
+ line-height: 1.1em;
904
+ box-sizing: border-box;
905
+ position: absolute;
906
+ opacity: 0;
907
+ cursor: pointer;
908
+ height: 0;
909
+ width: 0;
910
+ &:checked + span {
911
+ background-color: ${Colors.PRIMARY.Hex};
912
+ border-color: ${Colors.PRIMARY.Hex};
913
+ }
914
+ &:checked:disabled + span {
915
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
916
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
917
+ }
918
+ &:disabled + span {
919
+ background-color: #d3d3d3;
920
+ border-color: #d3d3d3;
921
+ }
922
+ &:checked + span:after {
923
+ display: block;
924
+ }
925
+ `;
926
+ const Check$1 = styled.span `
927
+ height: 17px;
928
+ width: 17px;
929
+ min-width: 17px;
930
+ background-color: #fff;
931
+ border-width: 2px;
932
+ border-style: solid;
933
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
934
+ box-sizing: border-box;
935
+ position: relative;
936
+ &:after {
937
+ content: '';
938
+ position: absolute;
939
+ left: 3px;
940
+ top: 0px;
941
+ width: 7px;
942
+ height: 12px;
943
+ border: solid white;
944
+ border-width: 0 3px 3px 0;
945
+ -webkit-transform: rotate(45deg);
946
+ -ms-transform: rotate(45deg);
947
+ transform: rotate(45deg);
948
+ box-sizing: border-box;
949
+ display: none;
950
+ }
951
+ `;
952
+ const Label$3 = styled.span `
953
+ font-family: ${FontStyles.DEFAULT};
954
+ font-size: ${FontSizes.DEFAULT};
955
+ font-weight: 400;
956
+ line-height: 1.6em;
957
+ color: ${props => props.color || Colors.BLACK.Hex};
958
+ margin-left: 6px;
959
+ box-sizing: border-box;
960
960
  `;
961
961
  const Checkbox = (_a) => {
962
962
  var { children, color, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip"]);
@@ -966,16 +966,16 @@ const Checkbox = (_a) => {
966
966
  children ? (React.createElement(Label$3, { color: color },
967
967
  children,
968
968
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
969
- };
970
-
971
- const SelectAll = styled.div `
972
- padding: 8px 12px;
973
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
974
- box-sizing: border-box;
969
+ };
970
+
971
+ const SelectAll = styled.div `
972
+ padding: 8px 12px;
973
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
974
+ box-sizing: border-box;
975
975
  `;
976
- const Options$1 = styled.div `
977
- padding: 12px;
978
- box-sizing: border-box;
976
+ const Options$1 = styled.div `
977
+ padding: 12px;
978
+ box-sizing: border-box;
979
979
  `;
980
980
  const Checklist = (_a) => {
981
981
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -1012,70 +1012,70 @@ const Checklist = (_a) => {
1012
1012
  const checked = selected.includes(option.value);
1013
1013
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
1014
1014
  }))));
1015
- };
1016
-
1017
- const Wrapper$a = styled.div `
1018
- border-radius: 4px;
1019
- height: 40px;
1020
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1021
- position: relative;
1022
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1023
- border-width: 1px;
1024
- border-style: solid;
1025
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1026
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1027
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1028
- box-sizing: border-box;
1029
- padding: 10px 0px;
1030
- display: flex;
1031
- align-items: center;
1032
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1033
-
1034
- &:focus-within {
1035
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1036
- }
1015
+ };
1016
+
1017
+ const Wrapper$a = styled.div `
1018
+ border-radius: 4px;
1019
+ height: 40px;
1020
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1021
+ position: relative;
1022
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1023
+ border-width: 1px;
1024
+ border-style: solid;
1025
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1026
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1027
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1028
+ box-sizing: border-box;
1029
+ padding: 10px 0px;
1030
+ display: flex;
1031
+ align-items: center;
1032
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1033
+
1034
+ &:focus-within {
1035
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1036
+ }
1037
1037
  `;
1038
1038
  Wrapper$a.defaultProps = { theme: EditableTheme };
1039
- const Trigger$1 = styled.select `
1040
- appearance: none;
1041
- box-shadow: none;
1042
- outline: none;
1043
- border: none;
1044
- color: ${Colors.BLACK.Hex};
1045
- font-size: ${FontSizes.DEFAULT};
1046
- font-weight: 400;
1047
- font-family: ${FontStyles.DEFAULT};
1048
- line-height: 2.9em;
1049
- background-color: transparent;
1050
- background-image: none;
1051
- width: 100%;
1052
- box-sizing: border-box;
1053
- padding: 0px 30px 0px 10px;
1054
- box-sizing: border-box;
1055
- position: relative;
1056
- z-index: 2;
1057
- `;
1058
- const IconWrapper$2 = styled(Icon) `
1059
- position: absolute;
1060
- right: 9px;
1061
- z-index: 1;
1062
- `;
1063
- const SearchInput$1 = styled.input `
1064
- position: absolute;
1065
- left: 2px;
1066
- top: 2px;
1067
- z-index: 999;
1068
- width: 90%;
1069
- height: 30px;
1070
- border: none;
1071
- outline: none;
1072
- color: ${Colors.BLACK.Hex};
1073
- font-family: ${FontStyles.DEFAULT};
1074
- font-size: ${FontSizes.DEFAULT};
1075
- font-weight: 400;
1076
- line-height: 2.9em;
1077
- overflow: hidden;
1078
- white-space: nowrap;
1039
+ const Trigger$1 = styled.select `
1040
+ appearance: none;
1041
+ box-shadow: none;
1042
+ outline: none;
1043
+ border: none;
1044
+ color: ${Colors.BLACK.Hex};
1045
+ font-size: ${FontSizes.DEFAULT};
1046
+ font-weight: 400;
1047
+ font-family: ${FontStyles.DEFAULT};
1048
+ line-height: 2.9em;
1049
+ background-color: transparent;
1050
+ background-image: none;
1051
+ width: 100%;
1052
+ box-sizing: border-box;
1053
+ padding: 0px 30px 0px 10px;
1054
+ box-sizing: border-box;
1055
+ position: relative;
1056
+ z-index: 2;
1057
+ `;
1058
+ const IconWrapper$2 = styled(Icon) `
1059
+ position: absolute;
1060
+ right: 9px;
1061
+ z-index: 1;
1062
+ `;
1063
+ const SearchInput$1 = styled.input `
1064
+ position: absolute;
1065
+ left: 2px;
1066
+ top: 2px;
1067
+ z-index: 999;
1068
+ width: 90%;
1069
+ height: 30px;
1070
+ border: none;
1071
+ outline: none;
1072
+ color: ${Colors.BLACK.Hex};
1073
+ font-family: ${FontStyles.DEFAULT};
1074
+ font-size: ${FontSizes.DEFAULT};
1075
+ font-weight: 400;
1076
+ line-height: 2.9em;
1077
+ overflow: hidden;
1078
+ white-space: nowrap;
1079
1079
  `;
1080
1080
  const Select = (_a) => {
1081
1081
  var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
@@ -1109,15 +1109,15 @@ const Select = (_a) => {
1109
1109
  filteredOptions &&
1110
1110
  filteredOptions.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
1111
1111
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
1112
- };
1113
-
1114
- const DatePickerWrapper = styled.div `
1115
- display: flex;
1116
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1112
+ };
1113
+
1114
+ const DatePickerWrapper = styled.div `
1115
+ display: flex;
1116
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1117
1117
  `;
1118
- const Middle = styled.div `
1119
- margin: 0px -1px;
1120
- flex-grow: 1;
1118
+ const Middle = styled.div `
1119
+ margin: 0px -1px;
1120
+ flex-grow: 1;
1121
1121
  `;
1122
1122
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date,
1123
1123
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1198,66 +1198,66 @@ onChange = () => { }, style, }) => {
1198
1198
  React.createElement(Middle, null,
1199
1199
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1200
1200
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1201
- };
1202
-
1203
- const Scrim$1 = styled.div `
1204
- position: ${({ $position }) => $position};
1205
- top: 0;
1206
- right: 0;
1207
- bottom: 0;
1208
- left: 0;
1209
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1210
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1211
- `;
1212
- const Container$2 = styled.div `
1213
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1214
- min-width: 400px;
1215
- width: ${({ $width }) => $width || '400px'};
1216
- overflow: hidden;
1217
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1218
- outline: none;
1219
- border: none;
1220
- position: ${({ $position }) => $position};
1221
- top: 0;
1222
- right: 0;
1223
- bottom: 0;
1224
- padding: 0px;
1225
- display: flex;
1226
- flex-direction: column;
1227
- box-sizing: border-box;
1228
- background: #fff;
1229
- `;
1230
- const Header$2 = styled.div `
1231
- padding: 30px 20px;
1232
- display: flex;
1233
- align-items: flex-start;
1234
- box-sizing: border-box;
1235
- flex-shrink: 0;
1236
- background: #fff;
1237
- `;
1238
- const Close$1 = styled.div `
1239
- margin-left: auto;
1240
- display: flex;
1241
- align-items: center;
1242
- padding-left: 20px;
1243
- cursor: pointer;
1244
- `;
1245
- const ContentWrapper$1 = styled.div `
1246
- overflow-x: hidden;
1247
- overflow-y: auto;
1248
- box-sizing: border-box;
1249
- flex: 1;
1250
- background: #fff;
1251
- `;
1252
- const ButtonBar$1 = styled.div `
1253
- padding: 20px;
1254
- display: flex;
1255
- align-items: center;
1256
- justify-content: flex-end;
1257
- box-sizing: border-box;
1258
- gap: 10px;
1259
- flex-shrink: 0;
1260
- background: #fff;
1201
+ };
1202
+
1203
+ const Scrim$1 = styled.div `
1204
+ position: ${({ $position }) => $position};
1205
+ top: 0;
1206
+ right: 0;
1207
+ bottom: 0;
1208
+ left: 0;
1209
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1210
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1211
+ `;
1212
+ const Container$2 = styled.div `
1213
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1214
+ min-width: 400px;
1215
+ width: ${({ $width }) => $width || '400px'};
1216
+ overflow: hidden;
1217
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1218
+ outline: none;
1219
+ border: none;
1220
+ position: ${({ $position }) => $position};
1221
+ top: 0;
1222
+ right: 0;
1223
+ bottom: 0;
1224
+ padding: 0px;
1225
+ display: flex;
1226
+ flex-direction: column;
1227
+ box-sizing: border-box;
1228
+ background: #fff;
1229
+ `;
1230
+ const Header$2 = styled.div `
1231
+ padding: 30px 20px;
1232
+ display: flex;
1233
+ align-items: flex-start;
1234
+ box-sizing: border-box;
1235
+ flex-shrink: 0;
1236
+ background: #fff;
1237
+ `;
1238
+ const Close$1 = styled.div `
1239
+ margin-left: auto;
1240
+ display: flex;
1241
+ align-items: center;
1242
+ padding-left: 20px;
1243
+ cursor: pointer;
1244
+ `;
1245
+ const ContentWrapper$1 = styled.div `
1246
+ overflow-x: hidden;
1247
+ overflow-y: auto;
1248
+ box-sizing: border-box;
1249
+ flex: 1;
1250
+ background: #fff;
1251
+ `;
1252
+ const ButtonBar$1 = styled.div `
1253
+ padding: 20px;
1254
+ display: flex;
1255
+ align-items: center;
1256
+ justify-content: flex-end;
1257
+ box-sizing: border-box;
1258
+ gap: 10px;
1259
+ flex-shrink: 0;
1260
+ background: #fff;
1261
1261
  `;
1262
1262
  const Drawer = (_a) => {
1263
1263
  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"]);
@@ -1285,55 +1285,55 @@ const Drawer = (_a) => {
1285
1285
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
1286
1286
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null),
1287
1287
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1288
- };
1289
-
1288
+ };
1289
+
1290
1290
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1291
- const LabelRow = styled.div `
1292
- display: flex;
1293
- align-items: center;
1294
- justify-content: space-between;
1295
- margin: 0 0 4px 0;
1296
- box-sizing: border-box;
1297
- `;
1298
- const Label$2 = styled.label `
1299
- font-size: ${FontSizes.DEFAULT};
1300
- font-weight: 500;
1301
- line-height: 1.3em;
1302
- font-family: ${FontStyles.DEFAULT};
1303
- color: ${Colors.BLACK.Hex};
1304
- display: flex;
1305
- align-items: center;
1306
- `;
1307
- const Required = styled.span `
1308
- color: ${Colors.RED.Hex};
1309
- margin-left: 4px;
1310
- `;
1311
- const Action = styled.span `
1312
- font-size: ${FontSizes.DEFAULT};
1313
- font-weight: 500;
1314
- line-height: 1em;
1315
- font-family: ${FontStyles.DEFAULT};
1316
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1317
- cursor: pointer;
1291
+ const LabelRow = styled.div `
1292
+ display: flex;
1293
+ align-items: center;
1294
+ justify-content: space-between;
1295
+ margin: 0 0 4px 0;
1296
+ box-sizing: border-box;
1297
+ `;
1298
+ const Label$2 = styled.label `
1299
+ font-size: ${FontSizes.DEFAULT};
1300
+ font-weight: 500;
1301
+ line-height: 1.3em;
1302
+ font-family: ${FontStyles.DEFAULT};
1303
+ color: ${Colors.BLACK.Hex};
1304
+ display: flex;
1305
+ align-items: center;
1306
+ `;
1307
+ const Required = styled.span `
1308
+ color: ${Colors.RED.Hex};
1309
+ margin-left: 4px;
1310
+ `;
1311
+ const Action = styled.span `
1312
+ font-size: ${FontSizes.DEFAULT};
1313
+ font-weight: 500;
1314
+ line-height: 1em;
1315
+ font-family: ${FontStyles.DEFAULT};
1316
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1317
+ cursor: pointer;
1318
1318
  `;
1319
1319
  Action.defaultProps = { theme: EditableTheme };
1320
- const Description = styled.div `
1321
- font-size: ${FontSizes.SMALL};
1322
- font-weight: 400;
1323
- line-height: 1.3em;
1324
- font-family: ${FontStyles.DEFAULT};
1325
- color: ${Colors.BLACK.Hex};
1326
- margin: 0 0 8px 0;
1327
- box-sizing: border-box;
1328
- `;
1329
- const Validation = styled.div `
1330
- font-size: ${FontSizes.SMALL};
1331
- font-weight: 400;
1332
- line-height: 1.3em;
1333
- font-family: ${FontStyles.DEFAULT};
1334
- color: ${Colors.RED.Hex};
1335
- margin: 4px 0 0 0;
1336
- box-sizing: border-box;
1320
+ const Description = styled.div `
1321
+ font-size: ${FontSizes.SMALL};
1322
+ font-weight: 400;
1323
+ line-height: 1.3em;
1324
+ font-family: ${FontStyles.DEFAULT};
1325
+ color: ${Colors.BLACK.Hex};
1326
+ margin: 0 0 8px 0;
1327
+ box-sizing: border-box;
1328
+ `;
1329
+ const Validation = styled.div `
1330
+ font-size: ${FontSizes.SMALL};
1331
+ font-weight: 400;
1332
+ line-height: 1.3em;
1333
+ font-family: ${FontStyles.DEFAULT};
1334
+ color: ${Colors.RED.Hex};
1335
+ margin: 4px 0 0 0;
1336
+ box-sizing: border-box;
1337
1337
  `;
1338
1338
  const Field = (_a) => {
1339
1339
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1347,113 +1347,113 @@ const Field = (_a) => {
1347
1347
  description ? React.createElement(Description, null, description) : null,
1348
1348
  children,
1349
1349
  validationText ? React.createElement(Validation, null, validationText) : null));
1350
- };
1351
-
1352
- const Wrapper$8 = styled.fieldset `
1353
- margin-inline-start: 0px;
1354
- margin-inline-end: 0px;
1355
- padding-block-start: 0px;
1356
- padding-inline-start: 0px;
1357
- padding-inline-end: 0px;
1358
- padding-block-end: 0px;
1359
- min-inline-size: min-content;
1360
- border-width: 0px;
1361
- border-style: none;
1362
- border-color: transparent;
1363
- border-image: none;
1364
- `;
1365
- const Label$1 = styled.legend `
1366
- padding-inline-start: 0px;
1367
- padding-inline-end: 0px;
1368
-
1369
- color: ${Colors.BLACK.Hex};
1370
- font-family: ${FontStyles.DEFAULT};
1371
- font-size: ${FontSizes.DEFAULT};
1372
- font-weight: 500;
1373
- line-height: 22px;
1374
- margin-bottom: 6px;
1375
- `;
1376
- const Content$1 = styled.div `
1377
- padding: 20px;
1378
- border-radius: 8px;
1379
- background: #fcfcfc;
1350
+ };
1351
+
1352
+ const Wrapper$8 = styled.fieldset `
1353
+ margin-inline-start: 0px;
1354
+ margin-inline-end: 0px;
1355
+ padding-block-start: 0px;
1356
+ padding-inline-start: 0px;
1357
+ padding-inline-end: 0px;
1358
+ padding-block-end: 0px;
1359
+ min-inline-size: min-content;
1360
+ border-width: 0px;
1361
+ border-style: none;
1362
+ border-color: transparent;
1363
+ border-image: none;
1364
+ `;
1365
+ const Label$1 = styled.legend `
1366
+ padding-inline-start: 0px;
1367
+ padding-inline-end: 0px;
1368
+
1369
+ color: ${Colors.BLACK.Hex};
1370
+ font-family: ${FontStyles.DEFAULT};
1371
+ font-size: ${FontSizes.DEFAULT};
1372
+ font-weight: 500;
1373
+ line-height: 22px;
1374
+ margin-bottom: 6px;
1375
+ `;
1376
+ const Content$1 = styled.div `
1377
+ padding: 20px;
1378
+ border-radius: 8px;
1379
+ background: #fcfcfc;
1380
1380
  `;
1381
1381
  const FieldGroup = ({ children, label }) => {
1382
1382
  return (React.createElement(Wrapper$8, null,
1383
1383
  React.createElement(Label$1, null, label),
1384
1384
  React.createElement(Content$1, null, children)));
1385
- };
1386
-
1387
- const Dropzone = styled.div `
1388
- border-radius: 8px;
1389
- border-width: 1px;
1390
- border-style: dashed;
1391
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1392
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1393
- cursor: copy;
1385
+ };
1386
+
1387
+ const Dropzone = styled.div `
1388
+ border-radius: 8px;
1389
+ border-width: 1px;
1390
+ border-style: dashed;
1391
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1392
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1393
+ cursor: copy;
1394
1394
  `;
1395
1395
  Dropzone.defaultProps = { theme: EditableTheme };
1396
- const IconWrapper$1 = styled.div `
1397
- width: 80px;
1398
- height: 80px;
1399
- border-radius: 40px;
1400
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1401
- display: flex;
1402
- align-items: center;
1403
- justify-content: center;
1404
- `;
1405
- const StyledIcon$3 = styled(Icon) `
1406
- width: 40px !important;
1407
- height: 40px !important;
1408
-
1409
- > path {
1410
- fill: ${Colors.GRAY.Hex} !important;
1411
- }
1412
- `;
1413
- const ClickZone = styled.div `
1414
- margin: 40px 20px;
1415
- display: flex;
1416
- flex-direction: column;
1417
- align-items: center;
1418
- gap: 16px;
1419
- `;
1420
- const Content = styled.div `
1421
- display: flex;
1422
- flex-direction: column;
1423
- align-items: center;
1424
- z-index: 99999;
1425
- gap: 2px;
1426
- `;
1427
- const Files = styled.div `
1428
- display: flex;
1429
- flex-direction: column;
1430
- align-self: stretch;
1431
- gap: 10px;
1432
- margin: 20px;
1433
- `;
1434
- const MessageDiv = styled.div `
1435
- display: flex;
1436
- align-items: center;
1437
- justify-content: center;
1438
- `;
1439
- const File = styled.div `
1440
- display: flex;
1441
- padding: 10px;
1442
- align-items: center;
1443
- justify-content: space-between;
1444
- gap: 10px;
1445
- border-radius: 4px;
1446
- border: 1px solid #cccccc;
1447
- background: #ffffff;
1448
- `;
1449
- const Remove = styled(Icon) `
1450
- width: 24px;
1451
- height: 24px;
1452
- cursor: pointer;
1453
-
1454
- > path {
1455
- fill: ${Colors.RED.Hex} !important;
1456
- }
1396
+ const IconWrapper$1 = styled.div `
1397
+ width: 80px;
1398
+ height: 80px;
1399
+ border-radius: 40px;
1400
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1401
+ display: flex;
1402
+ align-items: center;
1403
+ justify-content: center;
1404
+ `;
1405
+ const StyledIcon$3 = styled(Icon) `
1406
+ width: 40px !important;
1407
+ height: 40px !important;
1408
+
1409
+ > path {
1410
+ fill: ${Colors.GRAY.Hex} !important;
1411
+ }
1412
+ `;
1413
+ const ClickZone = styled.div `
1414
+ margin: 40px 20px;
1415
+ display: flex;
1416
+ flex-direction: column;
1417
+ align-items: center;
1418
+ gap: 16px;
1419
+ `;
1420
+ const Content = styled.div `
1421
+ display: flex;
1422
+ flex-direction: column;
1423
+ align-items: center;
1424
+ z-index: 99999;
1425
+ gap: 2px;
1426
+ `;
1427
+ const Files = styled.div `
1428
+ display: flex;
1429
+ flex-direction: column;
1430
+ align-self: stretch;
1431
+ gap: 10px;
1432
+ margin: 20px;
1433
+ `;
1434
+ const MessageDiv = styled.div `
1435
+ display: flex;
1436
+ align-items: center;
1437
+ justify-content: center;
1438
+ `;
1439
+ const File = styled.div `
1440
+ display: flex;
1441
+ padding: 10px;
1442
+ align-items: center;
1443
+ justify-content: space-between;
1444
+ gap: 10px;
1445
+ border-radius: 4px;
1446
+ border: 1px solid #cccccc;
1447
+ background: #ffffff;
1448
+ `;
1449
+ const Remove = styled(Icon) `
1450
+ width: 24px;
1451
+ height: 24px;
1452
+ cursor: pointer;
1453
+
1454
+ > path {
1455
+ fill: ${Colors.RED.Hex} !important;
1456
+ }
1457
1457
  `;
1458
1458
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
1459
1459
  const inputRef = React.useRef(null);
@@ -1571,8 +1571,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1571
1571
  React.createElement(Copy, { align: 'center', color: 'GRAY' }, message),
1572
1572
  tooltipInfo && (React.createElement("span", null,
1573
1573
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1574
- };
1575
-
1574
+ };
1575
+
1576
1576
  const getAgesFromDob = (dob) => {
1577
1577
  let calculated_current_age = null;
1578
1578
  let calculated_nearest_age = null;
@@ -1645,154 +1645,154 @@ const formatAsSsn = (number) => {
1645
1645
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1646
1646
  }
1647
1647
  return formatted_value;
1648
- };
1649
-
1650
- const StyledInput = styled.input `
1651
- border: none !important;
1652
- background: none !important;
1653
- font-size: ${FontSizes.DEFAULT};
1654
- font-weight: 400;
1655
- font-family: ${FontStyles.DEFAULT};
1656
- line-height: 1.28em;
1648
+ };
1649
+
1650
+ const StyledInput = styled.input `
1651
+ border: none !important;
1652
+ background: none !important;
1653
+ font-size: ${FontSizes.DEFAULT};
1654
+ font-weight: 400;
1655
+ font-family: ${FontStyles.DEFAULT};
1656
+ line-height: 1.28em;
1657
1657
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1658
1658
  ? Colors.RED.Hex
1659
- : Colors.BLACK.Hex};
1660
- position: relative;
1661
- height: ${props => props.$height || 'auto'};
1662
- padding: 10px;
1663
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1664
- box-shadow: none;
1665
- outline: none;
1666
- margin: 0px;
1667
- text-indent: 0px;
1668
- --webkit-appearance: none;
1669
- box-sizing: border-box;
1670
- display: block;
1671
- width: 100%;
1672
- `;
1673
- const StyledTextArea = styled.textarea `
1674
- border: none !important;
1675
- background: none !important;
1676
- overflow-y: scroll !important;
1677
- font-size: 14px;
1678
- font-weight: 400;
1679
- height: ${props => props.$height || 'auto'};
1680
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1681
- line-height: 1.28em;
1659
+ : Colors.BLACK.Hex};
1660
+ position: relative;
1661
+ height: ${props => props.$height || 'auto'};
1662
+ padding: 10px;
1663
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1664
+ box-shadow: none;
1665
+ outline: none;
1666
+ margin: 0px;
1667
+ text-indent: 0px;
1668
+ --webkit-appearance: none;
1669
+ box-sizing: border-box;
1670
+ display: block;
1671
+ width: 100%;
1672
+ `;
1673
+ const StyledTextArea = styled.textarea `
1674
+ border: none !important;
1675
+ background: none !important;
1676
+ overflow-y: scroll !important;
1677
+ font-size: 14px;
1678
+ font-weight: 400;
1679
+ height: ${props => props.$height || 'auto'};
1680
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1681
+ line-height: 1.28em;
1682
1682
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1683
1683
  ? Colors.RED.Hex
1684
- : Colors.BLACK.Hex};
1685
- position: relative;
1686
- padding: 10px;
1687
- opacity: 1;
1688
- box-shadow: none;
1689
- outline: none;
1690
- margin: 0px;
1691
- text-indent: 0px;
1692
- --webkit-appearance: none;
1693
- overflow-wrap: break-word;
1694
- box-sizing: border-box;
1695
- display: block;
1696
- width: 100%;
1684
+ : Colors.BLACK.Hex};
1685
+ position: relative;
1686
+ padding: 10px;
1687
+ opacity: 1;
1688
+ box-shadow: none;
1689
+ outline: none;
1690
+ margin: 0px;
1691
+ text-indent: 0px;
1692
+ --webkit-appearance: none;
1693
+ overflow-wrap: break-word;
1694
+ box-sizing: border-box;
1695
+ display: block;
1696
+ width: 100%;
1697
1697
  ${({ $readOnly }) => $readOnly &&
1698
- `
1699
- background-color: #f0f0f0;
1700
- color: #999999;
1701
- overflow-y: scroll;
1702
- `}
1703
- `;
1704
- const StyledSuffix = styled.div `
1705
- box-sizing: border-box;
1706
- border-radius: 0px 4px 4px 0px;
1707
- display: flex;
1708
- justify-content: center;
1709
- align-items: center;
1710
- padding: 10px;
1711
- height: auto;
1712
- background: #f5f5f5;
1713
- border-width: 0px 0px 0px 1px;
1714
- border-style: solid;
1715
- border-color: #cccccc;
1716
- font-family: ${FontStyles.DEFAULT};
1717
- font-style: normal;
1718
- font-weight: 400;
1719
- font-size: ${FontSizes.DEFAULT};
1720
- color: ${Colors.BLACK.Hex};
1721
- `;
1722
- const StyledWrapper = styled.div `
1723
- display: flex;
1724
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1725
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1726
- position: relative;
1727
- border-width: 1px;
1728
- border-style: solid;
1729
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1730
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1731
-
1732
- &:focus-within {
1733
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1734
- }
1698
+ `
1699
+ background-color: #f0f0f0;
1700
+ color: #999999;
1701
+ overflow-y: scroll;
1702
+ `}
1703
+ `;
1704
+ const StyledSuffix = styled.div `
1705
+ box-sizing: border-box;
1706
+ border-radius: 0px 4px 4px 0px;
1707
+ display: flex;
1708
+ justify-content: center;
1709
+ align-items: center;
1710
+ padding: 10px;
1711
+ height: auto;
1712
+ background: #f5f5f5;
1713
+ border-width: 0px 0px 0px 1px;
1714
+ border-style: solid;
1715
+ border-color: #cccccc;
1716
+ font-family: ${FontStyles.DEFAULT};
1717
+ font-style: normal;
1718
+ font-weight: 400;
1719
+ font-size: ${FontSizes.DEFAULT};
1720
+ color: ${Colors.BLACK.Hex};
1721
+ `;
1722
+ const StyledWrapper = styled.div `
1723
+ display: flex;
1724
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1725
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1726
+ position: relative;
1727
+ border-width: 1px;
1728
+ border-style: solid;
1729
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1730
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1731
+
1732
+ &:focus-within {
1733
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1734
+ }
1735
1735
  `;
1736
1736
  StyledWrapper.defaultProps = { theme: EditableTheme };
1737
- const SuggestedValues = styled.div `
1738
- background: #fff;
1739
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1740
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1741
- border-radius: 0px 0px 4px 4px;
1742
- border-style: solid;
1743
- border-top: none;
1744
- border-width: 1px;
1745
- left: -1px;
1746
- position: absolute;
1747
- right: -1px;
1748
- top: 39px;
1749
- z-index: 9999;
1750
- max-height: 220px;
1751
- overflow: auto;
1737
+ const SuggestedValues = styled.div `
1738
+ background: #fff;
1739
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1740
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1741
+ border-radius: 0px 0px 4px 4px;
1742
+ border-style: solid;
1743
+ border-top: none;
1744
+ border-width: 1px;
1745
+ left: -1px;
1746
+ position: absolute;
1747
+ right: -1px;
1748
+ top: 39px;
1749
+ z-index: 9999;
1750
+ max-height: 220px;
1751
+ overflow: auto;
1752
1752
  `;
1753
1753
  SuggestedValues.defaultProps = { theme: EditableTheme };
1754
- const SuggestedSummary = styled.div `
1755
- color: ${Colors.MEDIUM_GRAY.Hex};
1756
- font-size: 12px;
1757
- font-family: ${FontStyles.DEFAULT};
1758
- font-weight: 500;
1759
- line-height: 18px;
1760
- padding: 10px 12px;
1761
- border-bottom: 1px solid #e5e5e5;
1762
- background: #fff;
1763
- z-index: 1;
1764
- position: sticky;
1765
- top: 0px;
1766
- `;
1767
- const SuggestedValue = styled.div `
1768
- cursor: pointer;
1769
- padding: 8px 12px;
1770
- font-size: ${FontSizes.DEFAULT};
1771
- font-family: ${FontStyles.DEFAULT};
1772
- font-weight: 400;
1773
- line-height: 1.6em;
1774
- color: ${Colors.BLACK.Hex};
1775
-
1776
- &:hover {
1777
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1778
- }
1754
+ const SuggestedSummary = styled.div `
1755
+ color: ${Colors.MEDIUM_GRAY.Hex};
1756
+ font-size: 12px;
1757
+ font-family: ${FontStyles.DEFAULT};
1758
+ font-weight: 500;
1759
+ line-height: 18px;
1760
+ padding: 10px 12px;
1761
+ border-bottom: 1px solid #e5e5e5;
1762
+ background: #fff;
1763
+ z-index: 1;
1764
+ position: sticky;
1765
+ top: 0px;
1766
+ `;
1767
+ const SuggestedValue = styled.div `
1768
+ cursor: pointer;
1769
+ padding: 8px 12px;
1770
+ font-size: ${FontSizes.DEFAULT};
1771
+ font-family: ${FontStyles.DEFAULT};
1772
+ font-weight: 400;
1773
+ line-height: 1.6em;
1774
+ color: ${Colors.BLACK.Hex};
1775
+
1776
+ &:hover {
1777
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1778
+ }
1779
1779
  `;
1780
1780
  SuggestedValue.defaultProps = { theme: EditableTheme };
1781
- const CharacterCount = styled.div `
1782
- font-family: ${FontStyles.DEFAULT};
1783
- font-size: ${FontSizes.SMALL};
1784
- color: ${Colors.MEDIUM_GRAY.Hex};
1785
- padding: 10px;
1781
+ const CharacterCount = styled.div `
1782
+ font-family: ${FontStyles.DEFAULT};
1783
+ font-size: ${FontSizes.SMALL};
1784
+ color: ${Colors.MEDIUM_GRAY.Hex};
1785
+ padding: 10px;
1786
1786
  `;
1787
- const Loader$1 = styled.div `
1788
- padding: 0px 10px;
1789
- display: flex;
1790
- align-items: center;
1787
+ const Loader$1 = styled.div `
1788
+ padding: 0px 10px;
1789
+ display: flex;
1790
+ align-items: center;
1791
1791
  `;
1792
1792
  const Input$1 = (_a) => {
1793
1793
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown,
1794
1794
  // eslint-disable-next-line @typescript-eslint/no-empty-function
1795
- onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, 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", "showErrorTextColor", "type", "value"]);
1795
+ onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef"]);
1796
1796
  const [show_options, setShowOptions] = React.useState(false);
1797
1797
  const [internalValue, setInternalValue] = React.useState(value);
1798
1798
  const [internalSuggestedValues, setInternalSuggestedValues] = React.useState(suggestedValues || []);
@@ -1873,7 +1873,7 @@ const Input$1 = (_a) => {
1873
1873
  setShowOptions(true);
1874
1874
  if (onFocus)
1875
1875
  onFocus(e);
1876
- }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, value: formatted_value }, accessibleProps)),
1876
+ }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, ref: innerRef, value: formatted_value }, accessibleProps)),
1877
1877
  loading ? (React.createElement(Loader$1, null,
1878
1878
  React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
1879
1879
  showCharCount ? (React.createElement(CharacterCount, null,
@@ -1893,7 +1893,7 @@ const Input$1 = (_a) => {
1893
1893
  setShowOptions(true);
1894
1894
  if (onFocus)
1895
1895
  onFocus(e);
1896
- }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, step: step, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps)),
1896
+ }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, ref: innerRef, step: step, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps)),
1897
1897
  loading ? (React.createElement(Loader$1, null,
1898
1898
  React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
1899
1899
  showCharCount ? (React.createElement(CharacterCount, null,
@@ -1911,110 +1911,110 @@ const Input$1 = (_a) => {
1911
1911
  onSuggestedSelect();
1912
1912
  setShowOptions(false);
1913
1913
  } }, suggestedValue))))) : null));
1914
- };
1915
-
1916
- const Wrapper$7 = styled.a `
1917
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1918
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1919
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1920
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1921
- font-weight: 500;
1922
- font-style: normal;
1923
- text-decoration: 'none';
1924
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1925
- margin: 0px;
1926
- padding: 0px;
1927
- box-sizing: border-box;
1928
- cursor: pointer;
1914
+ };
1915
+
1916
+ const Wrapper$7 = styled.a `
1917
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1918
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1919
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1920
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1921
+ font-weight: 500;
1922
+ font-style: normal;
1923
+ text-decoration: 'none';
1924
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1925
+ margin: 0px;
1926
+ padding: 0px;
1927
+ box-sizing: border-box;
1928
+ cursor: pointer;
1929
1929
  `;
1930
1930
  Wrapper$7.defaultProps = { theme: EditableTheme };
1931
1931
  const Link = (_a) => {
1932
1932
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1933
1933
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1934
- };
1935
-
1936
- const dash = styled.keyframes `
1937
- 0% {
1938
- stroke-dasharray: 1, 160;
1939
- stroke-dashoffset: 0;
1940
- }
1941
- 50% {
1942
- stroke-dasharray: 80, 160;
1943
- stroke-dashoffset: -32;
1944
- }
1945
- 100% {
1946
- stroke-dasharray: 80, 160;
1947
- stroke-dashoffset: -124;
1948
- }
1949
- `;
1950
- const Spinner = styled.svg `
1951
- z-index: 2;
1952
- position: absolute;
1953
- top: 50%;
1954
- left: 50%;
1955
- transform: translate(-50%, -50%);
1956
- margin: 0 auto;
1957
- width: 40px;
1958
- height: 40px;
1959
- `;
1960
- const Path = styled.path `
1961
- stroke: #0193d7;
1962
- stroke-linecap: round;
1963
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1964
- animation: ${dash} 1.1s ease-in-out infinite;
1934
+ };
1935
+
1936
+ const dash = styled.keyframes `
1937
+ 0% {
1938
+ stroke-dasharray: 1, 160;
1939
+ stroke-dashoffset: 0;
1940
+ }
1941
+ 50% {
1942
+ stroke-dasharray: 80, 160;
1943
+ stroke-dashoffset: -32;
1944
+ }
1945
+ 100% {
1946
+ stroke-dasharray: 80, 160;
1947
+ stroke-dashoffset: -124;
1948
+ }
1949
+ `;
1950
+ const Spinner = styled.svg `
1951
+ z-index: 2;
1952
+ position: absolute;
1953
+ top: 50%;
1954
+ left: 50%;
1955
+ transform: translate(-50%, -50%);
1956
+ margin: 0 auto;
1957
+ width: 40px;
1958
+ height: 40px;
1959
+ `;
1960
+ const Path = styled.path `
1961
+ stroke: #0193d7;
1962
+ stroke-linecap: round;
1963
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1964
+ animation: ${dash} 1.1s ease-in-out infinite;
1965
1965
  `;
1966
1966
  const Loader = () => {
1967
1967
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1968
1968
  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' })));
1969
- };
1970
-
1971
- const Steps = styled.div `
1972
- padding: 20px;
1973
- border-bottom: 1px solid #e7e6e6;
1974
- background: #f5f5f5;
1975
- display: flex;
1976
- gap: 30px;
1977
- align-items: center;
1978
- `;
1979
- const Step = styled.div `
1980
- display: flex;
1981
- align-items: center;
1982
- gap: 8px;
1983
- `;
1984
- const StyledIcon$2 = styled(Icon) `
1985
- > path {
1986
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1987
- }
1969
+ };
1970
+
1971
+ const Steps = styled.div `
1972
+ padding: 20px;
1973
+ border-bottom: 1px solid #e7e6e6;
1974
+ background: #f5f5f5;
1975
+ display: flex;
1976
+ gap: 30px;
1977
+ align-items: center;
1978
+ `;
1979
+ const Step = styled.div `
1980
+ display: flex;
1981
+ align-items: center;
1982
+ gap: 8px;
1983
+ `;
1984
+ const StyledIcon$2 = styled(Icon) `
1985
+ > path {
1986
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1987
+ }
1988
1988
  `;
1989
1989
  StyledIcon$2.defaultProps = { theme: EditableTheme };
1990
- const StepIndicator = styled.div `
1991
- width: 30px;
1992
- height: 30px;
1993
- border-radius: 15px;
1994
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1995
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1996
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1997
- font-size: 14px;
1998
- font-weight: 500;
1999
- line-height: 1;
2000
- display: flex;
2001
- align-items: center;
2002
- justify-content: center;
2003
- flex-shrink: 0;
1990
+ const StepIndicator = styled.div `
1991
+ width: 30px;
1992
+ height: 30px;
1993
+ border-radius: 15px;
1994
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1995
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1996
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1997
+ font-size: 14px;
1998
+ font-weight: 500;
1999
+ line-height: 1;
2000
+ display: flex;
2001
+ align-items: center;
2002
+ justify-content: center;
2003
+ flex-shrink: 0;
2004
2004
  `;
2005
2005
  StepIndicator.defaultProps = { theme: EditableTheme };
2006
- const StepLabel = styled.div `
2007
- color: #000;
2008
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2009
- font-size: 14px;
2010
- font-weight: 500;
2011
- line-height: 1;
2012
- `;
2013
- const StepLine = styled.div `
2014
- height: 2px;
2015
- flex-grow: 1;
2016
- background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2017
- transition: background-color 0.5s ease-in-out;
2006
+ const StepLabel = styled.div `
2007
+ color: #000;
2008
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2009
+ font-size: 14px;
2010
+ font-weight: 500;
2011
+ line-height: 1;
2012
+ `;
2013
+ const StepLine = styled.div `
2014
+ height: 2px;
2015
+ flex-grow: 1;
2016
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2017
+ transition: background-color 0.5s ease-in-out;
2018
2018
  `;
2019
2019
  const ProgressBar = ({ steps, showStepLine = false }) => {
2020
2020
  return (React.createElement(Steps, null, steps.map((step, i) => {
@@ -2024,78 +2024,78 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
2024
2024
  step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
2025
2025
  React.createElement(StepLabel, null, step.label))));
2026
2026
  })));
2027
- };
2028
-
2029
- const Wrapper$6 = styled.div `
2030
- position: fixed;
2031
- top: 0;
2032
- right: 0;
2033
- bottom: 0;
2034
- left: 0;
2035
- z-index: 9999;
2036
- background: rgba(0, 0, 0, 0.8);
2037
- display: flex;
2038
- align-items: center;
2039
- justify-content: center;
2040
- `;
2041
- const Container$1 = styled.dialog `
2042
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2043
- max-width: calc(100vw - 80px);
2044
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2045
- max-height: calc(100vh - 80px);
2046
- border-radius: 8px;
2047
- overflow: hidden;
2048
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2049
- outline: none;
2050
- border: none;
2051
- position: relative;
2052
- padding: 0px;
2053
- box-sizing: border-box;
2054
- display: flex;
2055
- flex-direction: column;
2056
- `;
2057
- const Header$1 = styled.div `
2058
- flex-shrink: 0;
2059
- padding: 20px;
2060
- border-bottom: 1px solid #e7e6e6;
2061
- display: flex;
2062
- align-items: center;
2063
- background: #ffffff;
2064
- box-sizing: border-box;
2065
- `;
2066
- const Close = styled.div `
2067
- margin-left: auto;
2068
- display: flex;
2069
- align-items: center;
2070
- padding-left: 20px;
2071
- cursor: pointer;
2072
- `;
2073
- const CloseMsg = styled.span `
2074
- font-size: ${FontSizes.SMALL};
2075
- font-weight: 400;
2076
- font-family: ${FontStyles.DEFAULT};
2077
- line-height: 1em;
2078
- color: ${Colors.MEDIUM_GRAY.Hex};
2079
- `;
2080
- const ContentWrapper = styled.div `
2081
- overflow-x: hidden;
2082
- overflow-y: auto;
2083
- background: #ffffff;
2084
- flex: 1;
2085
- box-sizing: border-box;
2086
- `;
2087
- const ButtonBar = styled.div `
2088
- flex-shrink: 0;
2089
- background: #ffffff;
2090
- padding: 20px;
2091
- border-top: 1px solid #e7e6e6;
2092
- display: flex;
2093
- align-items: center;
2094
- justify-self: flex-end;
2095
- box-sizing: border-box;
2096
- `;
2097
- const ButtonContainer = styled.div `
2098
- margin: 0 10px;
2027
+ };
2028
+
2029
+ const Wrapper$6 = styled.div `
2030
+ position: fixed;
2031
+ top: 0;
2032
+ right: 0;
2033
+ bottom: 0;
2034
+ left: 0;
2035
+ z-index: 9999;
2036
+ background: rgba(0, 0, 0, 0.8);
2037
+ display: flex;
2038
+ align-items: center;
2039
+ justify-content: center;
2040
+ `;
2041
+ const Container$1 = styled.dialog `
2042
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2043
+ max-width: calc(100vw - 80px);
2044
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2045
+ max-height: calc(100vh - 80px);
2046
+ border-radius: 8px;
2047
+ overflow: hidden;
2048
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2049
+ outline: none;
2050
+ border: none;
2051
+ position: relative;
2052
+ padding: 0px;
2053
+ box-sizing: border-box;
2054
+ display: flex;
2055
+ flex-direction: column;
2056
+ `;
2057
+ const Header$1 = styled.div `
2058
+ flex-shrink: 0;
2059
+ padding: 20px;
2060
+ border-bottom: 1px solid #e7e6e6;
2061
+ display: flex;
2062
+ align-items: center;
2063
+ background: #ffffff;
2064
+ box-sizing: border-box;
2065
+ `;
2066
+ const Close = styled.div `
2067
+ margin-left: auto;
2068
+ display: flex;
2069
+ align-items: center;
2070
+ padding-left: 20px;
2071
+ cursor: pointer;
2072
+ `;
2073
+ const CloseMsg = styled.span `
2074
+ font-size: ${FontSizes.SMALL};
2075
+ font-weight: 400;
2076
+ font-family: ${FontStyles.DEFAULT};
2077
+ line-height: 1em;
2078
+ color: ${Colors.MEDIUM_GRAY.Hex};
2079
+ `;
2080
+ const ContentWrapper = styled.div `
2081
+ overflow-x: hidden;
2082
+ overflow-y: auto;
2083
+ background: #ffffff;
2084
+ flex: 1;
2085
+ box-sizing: border-box;
2086
+ `;
2087
+ const ButtonBar = styled.div `
2088
+ flex-shrink: 0;
2089
+ background: #ffffff;
2090
+ padding: 20px;
2091
+ border-top: 1px solid #e7e6e6;
2092
+ display: flex;
2093
+ align-items: center;
2094
+ justify-self: flex-end;
2095
+ box-sizing: border-box;
2096
+ `;
2097
+ const ButtonContainer = styled.div `
2098
+ margin: 0 10px;
2099
2099
  `;
2100
2100
  const Modal = (_a) => {
2101
2101
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton"]);
@@ -2137,21 +2137,21 @@ const Modal = (_a) => {
2137
2137
  secondaryButton ? (React.createElement(ButtonContainer, null,
2138
2138
  React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' })))) : null,
2139
2139
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
2140
- };
2141
-
2142
- const Wrapper$5 = styled.div `
2143
- position: relative;
2144
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2145
- `;
2146
- const Trigger = styled.div `
2147
- box-sizing: border-box;
2148
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2149
- height: 40px;
2150
- padding: 0 10px;
2151
- position: relative;
2152
- cursor: pointer;
2153
- border-width: 1px;
2154
- border-style: solid;
2140
+ };
2141
+
2142
+ const Wrapper$5 = styled.div `
2143
+ position: relative;
2144
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2145
+ `;
2146
+ const Trigger = styled.div `
2147
+ box-sizing: border-box;
2148
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2149
+ height: 40px;
2150
+ padding: 0 10px;
2151
+ position: relative;
2152
+ cursor: pointer;
2153
+ border-width: 1px;
2154
+ border-style: solid;
2155
2155
  border-color: ${props => {
2156
2156
  if (props.$invalid) {
2157
2157
  return Colors.RED.Hex;
@@ -2162,67 +2162,67 @@ const Trigger = styled.div `
2162
2162
  else {
2163
2163
  return '#cccccc';
2164
2164
  }
2165
- }};
2166
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2167
- background-image: none;
2168
- display: flex;
2169
- width: 100%;
2170
- align-items: center;
2171
- justify-content: space-between;
2172
- z-index: 1;
2165
+ }};
2166
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2167
+ background-image: none;
2168
+ display: flex;
2169
+ width: 100%;
2170
+ align-items: center;
2171
+ justify-content: space-between;
2172
+ z-index: 1;
2173
2173
  `;
2174
2174
  Trigger.defaultProps = { theme: EditableTheme };
2175
- const Value = styled.div `
2176
- color: ${Colors.BLACK.Hex};
2177
- font-family: ${FontStyles.DEFAULT};
2178
- font-size: ${FontSizes.DEFAULT};
2179
- font-weight: 400;
2180
- line-height: 2.9em;
2181
- overflow: hidden;
2182
- text-overflow: ellipsis;
2183
- white-space: nowrap;
2184
- width: 100%;
2185
- `;
2186
- const Options = styled.div `
2187
- background: #fff;
2188
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2189
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2190
- border-radius: 0px 0px 4px 4px;
2191
- border-style: solid;
2192
- border-top: none;
2193
- border-width: 1px;
2194
- left: 0;
2195
- position: relative;
2196
- right: 0;
2197
- z-index: 10;
2198
- max-height: 220px;
2199
- overflow: auto;
2175
+ const Value = styled.div `
2176
+ color: ${Colors.BLACK.Hex};
2177
+ font-family: ${FontStyles.DEFAULT};
2178
+ font-size: ${FontSizes.DEFAULT};
2179
+ font-weight: 400;
2180
+ line-height: 2.9em;
2181
+ overflow: hidden;
2182
+ text-overflow: ellipsis;
2183
+ white-space: nowrap;
2184
+ width: 100%;
2185
+ `;
2186
+ const Options = styled.div `
2187
+ background: #fff;
2188
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2189
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2190
+ border-radius: 0px 0px 4px 4px;
2191
+ border-style: solid;
2192
+ border-top: none;
2193
+ border-width: 1px;
2194
+ left: 0;
2195
+ position: relative;
2196
+ right: 0;
2197
+ z-index: 10;
2198
+ max-height: 220px;
2199
+ overflow: auto;
2200
2200
  `;
2201
2201
  Options.defaultProps = { theme: EditableTheme };
2202
- const Scrim = styled.div `
2203
- bottom: 0;
2204
- left: 0;
2205
- position: fixed;
2206
- right: 0;
2207
- top: 0;
2208
- z-index: 9;
2209
- `;
2210
- const SearchInput = styled.input `
2211
- position: absolute;
2212
- left: 2px;
2213
- top: 2px;
2214
- z-index: 999;
2215
- width: 90%;
2216
- height: 30px;
2217
- border: none;
2218
- outline: none;
2219
- color: ${Colors.BLACK.Hex};
2220
- font-family: ${FontStyles.DEFAULT};
2221
- font-size: ${FontSizes.DEFAULT};
2222
- font-weight: 400;
2223
- line-height: 2.9em;
2224
- overflow: hidden;
2225
- white-space: nowrap;
2202
+ const Scrim = styled.div `
2203
+ bottom: 0;
2204
+ left: 0;
2205
+ position: fixed;
2206
+ right: 0;
2207
+ top: 0;
2208
+ z-index: 9;
2209
+ `;
2210
+ const SearchInput = styled.input `
2211
+ position: absolute;
2212
+ left: 2px;
2213
+ top: 2px;
2214
+ z-index: 999;
2215
+ width: 90%;
2216
+ height: 30px;
2217
+ border: none;
2218
+ outline: none;
2219
+ color: ${Colors.BLACK.Hex};
2220
+ font-family: ${FontStyles.DEFAULT};
2221
+ font-size: ${FontSizes.DEFAULT};
2222
+ font-weight: 400;
2223
+ line-height: 2.9em;
2224
+ overflow: hidden;
2225
+ white-space: nowrap;
2226
2226
  `;
2227
2227
  const MultiSelect = (_a) => {
2228
2228
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style"]);
@@ -2241,37 +2241,37 @@ const MultiSelect = (_a) => {
2241
2241
  showOptions ? (React.createElement(Options, null,
2242
2242
  React.createElement(Checklist, { onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2243
2243
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
2244
- };
2245
-
2246
- const Wrapper$4 = styled.div `
2247
- display: flex;
2248
- padding: 16px 30px;
2249
- align-items: center;
2250
- gap: 20px;
2251
- align-self: stretch;
2252
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2253
- `;
2254
- const Title = styled.div `
2255
- display: flex;
2256
- align-items: center;
2257
- gap: 20px;
2258
- `;
2259
- const Info = styled.div `
2260
- display: flex;
2261
- flex-direction: column;
2262
- align-items: flex-start;
2263
- gap: 4px;
2264
- flex: 1 0 0;
2265
- `;
2266
- const Breadcrumbs = styled.div `
2267
- display: flex;
2268
- align-items: center;
2269
- gap: 4px;
2270
- `;
2271
- const Actions = styled.div `
2272
- display: flex;
2273
- align-items: center;
2274
- gap: 8px;
2244
+ };
2245
+
2246
+ const Wrapper$4 = styled.div `
2247
+ display: flex;
2248
+ padding: 16px 30px;
2249
+ align-items: center;
2250
+ gap: 20px;
2251
+ align-self: stretch;
2252
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2253
+ `;
2254
+ const Title = styled.div `
2255
+ display: flex;
2256
+ align-items: center;
2257
+ gap: 20px;
2258
+ `;
2259
+ const Info = styled.div `
2260
+ display: flex;
2261
+ flex-direction: column;
2262
+ align-items: flex-start;
2263
+ gap: 4px;
2264
+ flex: 1 0 0;
2265
+ `;
2266
+ const Breadcrumbs = styled.div `
2267
+ display: flex;
2268
+ align-items: center;
2269
+ gap: 4px;
2270
+ `;
2271
+ const Actions = styled.div `
2272
+ display: flex;
2273
+ align-items: center;
2274
+ gap: 8px;
2275
2275
  `;
2276
2276
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2277
2277
  const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, } = buttonMenu || {};
@@ -2291,13 +2291,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2291
2291
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2292
2292
  }),
2293
2293
  menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
2294
- };
2295
-
2296
- const Wrapper$3 = styled.nav `
2297
- box-sizing: border-box;
2298
- display: flex;
2299
- align-items: center;
2300
- column-gap: 10px;
2294
+ };
2295
+
2296
+ const Wrapper$3 = styled.nav `
2297
+ box-sizing: border-box;
2298
+ display: flex;
2299
+ align-items: center;
2300
+ column-gap: 10px;
2301
2301
  `;
2302
2302
  const Pagination = (_a) => {
2303
2303
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2326,82 +2326,82 @@ const Pagination = (_a) => {
2326
2326
  value: `${p}`,
2327
2327
  })), value: `${currentPage}` }),
2328
2328
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
2329
- };
2330
-
2331
- const Wrapper$2 = styled.label `
2332
- border-radius: 4px;
2333
- padding: 4px 0px 4px 6px;
2334
- margin-left: -6px;
2335
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2336
- display: flex;
2337
- align-items: center;
2338
- font-size: ${FontSizes.DEFAULT};
2339
- line-height: 1.6em;
2340
- box-sizing: border-box;
2341
- position: relative;
2342
-
2343
- &:focus-within {
2344
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2345
- }
2329
+ };
2330
+
2331
+ const Wrapper$2 = styled.label `
2332
+ border-radius: 4px;
2333
+ padding: 4px 0px 4px 6px;
2334
+ margin-left: -6px;
2335
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2336
+ display: flex;
2337
+ align-items: center;
2338
+ font-size: ${FontSizes.DEFAULT};
2339
+ line-height: 1.6em;
2340
+ box-sizing: border-box;
2341
+ position: relative;
2342
+
2343
+ &:focus-within {
2344
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2345
+ }
2346
2346
  `;
2347
2347
  Wrapper$2.defaultProps = { theme: EditableTheme };
2348
- const Input = styled.input `
2349
- font-size: 20px;
2350
- margin: 0px;
2351
- line-height: 1.6em;
2352
- box-sizing: border-box;
2353
- position: absolute;
2354
- opacity: 0;
2355
- cursor: pointer;
2356
- height: 0;
2357
- width: 0;
2358
- &:checked + span {
2359
- border-color: ${Colors.PRIMARY.Hex};
2360
- }
2361
- &:checked + span:after {
2362
- background-color: ${Colors.PRIMARY.Hex};
2363
- display: block;
2364
- }
2365
- &:disabled + span {
2366
- background-color: #d3d3d3;
2367
- border-color: #d3d3d3;
2368
- }
2369
- &:disabled + span:after {
2370
- background-color: #fff;
2371
- }
2372
- &:checked:disabled + span:after {
2373
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2374
- }
2375
- `;
2376
- const Check = styled.span `
2377
- height: 17px;
2378
- width: 17px;
2379
- border-radius: 50%;
2380
- background-color: #fff;
2381
- border-width: 2px;
2382
- border-style: solid;
2383
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2384
- box-sizing: border-box;
2385
- position: relative;
2386
- &:after {
2387
- content: '';
2388
- position: absolute;
2389
- top: 2px;
2390
- left: 2px;
2391
- width: 9px;
2392
- height: 9px;
2393
- border-radius: 50%;
2394
- box-sizing: border-box;
2395
- display: none;
2396
- }
2397
- `;
2398
- const Label = styled.span `
2399
- font-family: ${FontStyles.DEFAULT};
2400
- font-size: ${FontSizes.DEFAULT};
2401
- font-weight: 400;
2402
- color: ${Colors.BLACK.Hex};
2403
- line-height: 1.6em;
2404
- margin-left: 6px;
2348
+ const Input = styled.input `
2349
+ font-size: 20px;
2350
+ margin: 0px;
2351
+ line-height: 1.6em;
2352
+ box-sizing: border-box;
2353
+ position: absolute;
2354
+ opacity: 0;
2355
+ cursor: pointer;
2356
+ height: 0;
2357
+ width: 0;
2358
+ &:checked + span {
2359
+ border-color: ${Colors.PRIMARY.Hex};
2360
+ }
2361
+ &:checked + span:after {
2362
+ background-color: ${Colors.PRIMARY.Hex};
2363
+ display: block;
2364
+ }
2365
+ &:disabled + span {
2366
+ background-color: #d3d3d3;
2367
+ border-color: #d3d3d3;
2368
+ }
2369
+ &:disabled + span:after {
2370
+ background-color: #fff;
2371
+ }
2372
+ &:checked:disabled + span:after {
2373
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2374
+ }
2375
+ `;
2376
+ const Check = styled.span `
2377
+ height: 17px;
2378
+ width: 17px;
2379
+ border-radius: 50%;
2380
+ background-color: #fff;
2381
+ border-width: 2px;
2382
+ border-style: solid;
2383
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2384
+ box-sizing: border-box;
2385
+ position: relative;
2386
+ &:after {
2387
+ content: '';
2388
+ position: absolute;
2389
+ top: 2px;
2390
+ left: 2px;
2391
+ width: 9px;
2392
+ height: 9px;
2393
+ border-radius: 50%;
2394
+ box-sizing: border-box;
2395
+ display: none;
2396
+ }
2397
+ `;
2398
+ const Label = styled.span `
2399
+ font-family: ${FontStyles.DEFAULT};
2400
+ font-size: ${FontSizes.DEFAULT};
2401
+ font-weight: 400;
2402
+ color: ${Colors.BLACK.Hex};
2403
+ line-height: 1.6em;
2404
+ margin-left: 6px;
2405
2405
  `;
2406
2406
  const Radio = (_a) => {
2407
2407
  var { children, disabled, checked, onChange, value, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip"]);
@@ -2411,77 +2411,77 @@ const Radio = (_a) => {
2411
2411
  React.createElement(Label, null,
2412
2412
  children,
2413
2413
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2414
- };
2415
-
2414
+ };
2415
+
2416
2416
  const RadioList = (_a) => {
2417
2417
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2418
2418
  return (React.createElement(React.Fragment, null, options.map((option) => {
2419
2419
  const label = option.label || option.value;
2420
2420
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2421
2421
  })));
2422
- };
2423
-
2424
- const StyledTable = styled.table `
2425
- width: 100%;
2426
- margin-top: 1px;
2427
- table-layout: ${props => props.$tableLayout || 'auto'};
2428
- border-collapse: collapse;
2429
- text-indent: 0px;
2430
- border-spacing: 0px;
2431
- border-color: none;
2432
- box-sizing: border-box;
2433
- `;
2434
- const Header = styled.th `
2435
- padding: 12px !important;
2436
- text-align: left;
2437
- font-weight: 500;
2438
- border-bottom: 1px solid #e5e5e5;
2439
- border-top: 1px solid #e5e5e5;
2440
- text-transform: uppercase;
2441
- font-size: 12px;
2442
- font-family: ${FontStyles.DEFAULT};
2443
- letter-spacing: 1px;
2444
- white-space: nowrap;
2445
- line-height: 1;
2446
- position: relative;
2447
- box-sizing: border-box;
2448
- width: ${props => props.$width || 'auto'};
2449
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2450
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2422
+ };
2423
+
2424
+ const StyledTable = styled.table `
2425
+ width: 100%;
2426
+ margin-top: 1px;
2427
+ table-layout: ${props => props.$tableLayout || 'auto'};
2428
+ border-collapse: collapse;
2429
+ text-indent: 0px;
2430
+ border-spacing: 0px;
2431
+ border-color: none;
2432
+ box-sizing: border-box;
2433
+ `;
2434
+ const Header = styled.th `
2435
+ padding: 12px !important;
2436
+ text-align: left;
2437
+ font-weight: 500;
2438
+ border-bottom: 1px solid #e5e5e5;
2439
+ border-top: 1px solid #e5e5e5;
2440
+ text-transform: uppercase;
2441
+ font-size: 12px;
2442
+ font-family: ${FontStyles.DEFAULT};
2443
+ letter-spacing: 1px;
2444
+ white-space: nowrap;
2445
+ line-height: 1;
2446
+ position: relative;
2447
+ box-sizing: border-box;
2448
+ width: ${props => props.$width || 'auto'};
2449
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2450
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2451
2451
  `;
2452
2452
  Header.defaultProps = { theme: EditableTheme };
2453
- const Row = styled.tr `
2454
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2455
- transition: all 0.2s;
2456
- background-color: ${props => props.$bgColor};
2457
- box-sizing: border-box;
2458
- &:hover {
2459
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2460
- }
2453
+ const Row = styled.tr `
2454
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2455
+ transition: all 0.2s;
2456
+ background-color: ${props => props.$bgColor};
2457
+ box-sizing: border-box;
2458
+ &:hover {
2459
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2460
+ }
2461
2461
  `;
2462
2462
  Row.defaultProps = { theme: EditableTheme };
2463
- const Column = styled.td `
2464
- padding: 16px 12px !important;
2465
- font-size: ${FontSizes.DEFAULT} !important;
2466
- font-weight: 400 !important;
2467
- font-family: ${FontStyles.DEFAULT};
2468
- border: none !important;
2469
- word-break: break-word;
2470
- line-height: 1.4em;
2471
- box-sizing: border-box;
2472
- text-align: ${props => props.$align || 'left'};
2473
- width: ${props => props.$width || 'auto'};
2474
- `;
2475
- const IconWrapper = styled.span `
2476
- position: absolute;
2477
- top: 50%;
2478
- transform: translateY(-50%);
2479
- margin-left: 2px;
2480
- `;
2481
- const StyledIcon$1 = styled(Icon) `
2482
- > path {
2483
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2484
- }
2463
+ const Column = styled.td `
2464
+ padding: 16px 12px !important;
2465
+ font-size: ${FontSizes.DEFAULT} !important;
2466
+ font-weight: 400 !important;
2467
+ font-family: ${FontStyles.DEFAULT};
2468
+ border: none !important;
2469
+ word-break: break-word;
2470
+ line-height: 1.4em;
2471
+ box-sizing: border-box;
2472
+ text-align: ${props => props.$align || 'left'};
2473
+ width: ${props => props.$width || 'auto'};
2474
+ `;
2475
+ const IconWrapper = styled.span `
2476
+ position: absolute;
2477
+ top: 50%;
2478
+ transform: translateY(-50%);
2479
+ margin-left: 2px;
2480
+ `;
2481
+ const StyledIcon$1 = styled(Icon) `
2482
+ > path {
2483
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2484
+ }
2485
2485
  `;
2486
2486
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2487
2487
  const Table = (_a) => {
@@ -2499,55 +2499,55 @@ const Table = (_a) => {
2499
2499
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2500
2500
  })));
2501
2501
  }))) : null));
2502
- };
2503
-
2504
- const Wrapper$1 = styled.div `
2505
- display: flex;
2506
- box-sizing: border-box;
2507
- align-items: flex-end;
2508
- border-top: 1px solid #e5e5e5;
2509
- border-bottom: 1px solid #e5e5e5;
2510
- flex-shrink: 0;
2511
- align-self: stretch;
2512
- padding: 0;
2513
- margin: 0;
2514
- `;
2515
- const Tab = styled.div `
2516
- display: flex;
2517
- align-items: center;
2518
- gap: 6px;
2519
- font-size: ${FontSizes.DEFAULT};
2520
- font-family: ${FontStyles.DEFAULT};
2521
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2522
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2523
- line-height: 1em;
2524
- padding: 16px 30px 12px;
2525
- margin: 0 0 -1px 0;
2526
- border-bottom-width: 4px;
2527
- border-bottom-style: solid;
2528
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2529
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2530
- box-sizing: border-box;
2531
- &:hover {
2532
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2533
- font-weight: 500;
2534
- }
2502
+ };
2503
+
2504
+ const Wrapper$1 = styled.div `
2505
+ display: flex;
2506
+ box-sizing: border-box;
2507
+ align-items: flex-end;
2508
+ border-top: 1px solid #e5e5e5;
2509
+ border-bottom: 1px solid #e5e5e5;
2510
+ flex-shrink: 0;
2511
+ align-self: stretch;
2512
+ padding: 0;
2513
+ margin: 0;
2514
+ `;
2515
+ const Tab = styled.div `
2516
+ display: flex;
2517
+ align-items: center;
2518
+ gap: 6px;
2519
+ font-size: ${FontSizes.DEFAULT};
2520
+ font-family: ${FontStyles.DEFAULT};
2521
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2522
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2523
+ line-height: 1em;
2524
+ padding: 16px 30px 12px;
2525
+ margin: 0 0 -1px 0;
2526
+ border-bottom-width: 4px;
2527
+ border-bottom-style: solid;
2528
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2529
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2530
+ box-sizing: border-box;
2531
+ &:hover {
2532
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2533
+ font-weight: 500;
2534
+ }
2535
2535
  `;
2536
2536
  Tab.defaultProps = { theme: EditableTheme };
2537
- const Badge = styled.div `
2538
- display: flex;
2539
- width: 18px;
2540
- height: 18px;
2541
- justify-content: center;
2542
- align-items: center;
2543
- border-radius: 9px;
2544
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2545
- color: #fff;
2546
- font-family: ${FontStyles.DEFAULT};
2547
- font-size: 12px;
2548
- font-weight: 500;
2549
- line-height: 1;
2550
- letter-spacing: 1px;
2537
+ const Badge = styled.div `
2538
+ display: flex;
2539
+ width: 18px;
2540
+ height: 18px;
2541
+ justify-content: center;
2542
+ align-items: center;
2543
+ border-radius: 9px;
2544
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2545
+ color: #fff;
2546
+ font-family: ${FontStyles.DEFAULT};
2547
+ font-size: 12px;
2548
+ font-weight: 500;
2549
+ line-height: 1;
2550
+ letter-spacing: 1px;
2551
2551
  `;
2552
2552
  Badge.defaultProps = { theme: EditableTheme };
2553
2553
  const Tabs = (_a) => {
@@ -2559,29 +2559,29 @@ const Tabs = (_a) => {
2559
2559
  label));
2560
2560
  })));
2561
2561
  };
2562
- Tabs.defaultProps = {};
2563
-
2564
- const Track = styled.div `
2565
- height: 24px;
2566
- border-radius: 12px;
2567
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2568
- display: flex;
2569
- align-items: center;
2570
- cursor: pointer;
2571
- width: 40px;
2572
- padding: 2px;
2573
- box-sizing: border-box;
2574
- `;
2575
- const Handle = styled.div `
2576
- width: 20px;
2577
- height: 20px;
2578
- border-radius: 10px;
2579
- background: #ffffff;
2580
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2581
- display: flex;
2582
- align-items: center;
2583
- justify-content: center;
2584
- box-sizing: border-box;
2562
+ Tabs.defaultProps = {};
2563
+
2564
+ const Track = styled.div `
2565
+ height: 24px;
2566
+ border-radius: 12px;
2567
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2568
+ display: flex;
2569
+ align-items: center;
2570
+ cursor: pointer;
2571
+ width: 40px;
2572
+ padding: 2px;
2573
+ box-sizing: border-box;
2574
+ `;
2575
+ const Handle = styled.div `
2576
+ width: 20px;
2577
+ height: 20px;
2578
+ border-radius: 10px;
2579
+ background: #ffffff;
2580
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2581
+ display: flex;
2582
+ align-items: center;
2583
+ justify-content: center;
2584
+ box-sizing: border-box;
2585
2585
  `;
2586
2586
  const Toggle = (_a) => {
2587
2587
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2590,32 +2590,32 @@ const Toggle = (_a) => {
2590
2590
  React.createElement(Handle, { "$on": on },
2591
2591
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2592
2592
  };
2593
- Toggle.defaultProps = {};
2594
-
2595
- const Container = styled.div `
2596
- width: 100%;
2597
- padding: 40px auto;
2598
- gap: 20px;
2599
- display: flex;
2600
- flex-direction: column;
2601
- justify-items: center;
2602
- align-items: center;
2603
- `;
2604
- const Wrapper = styled.div `
2605
- gap: 10px;
2606
- display: flex;
2607
- flex-direction: column;
2608
- justify-items: center;
2609
- align-items: center;
2610
- `;
2611
- const StyledIcon = styled.div `
2612
- display: flex;
2613
- align-items: center;
2614
- justify-content: center;
2615
- width: 80px;
2616
- height: 80px;
2617
- border-radius: 40px;
2618
- background: #f5f5f5;
2593
+ Toggle.defaultProps = {};
2594
+
2595
+ const Container = styled.div `
2596
+ width: 100%;
2597
+ padding: 40px auto;
2598
+ gap: 20px;
2599
+ display: flex;
2600
+ flex-direction: column;
2601
+ justify-items: center;
2602
+ align-items: center;
2603
+ `;
2604
+ const Wrapper = styled.div `
2605
+ gap: 10px;
2606
+ display: flex;
2607
+ flex-direction: column;
2608
+ justify-items: center;
2609
+ align-items: center;
2610
+ `;
2611
+ const StyledIcon = styled.div `
2612
+ display: flex;
2613
+ align-items: center;
2614
+ justify-content: center;
2615
+ width: 80px;
2616
+ height: 80px;
2617
+ border-radius: 40px;
2618
+ background: #f5f5f5;
2619
2619
  `;
2620
2620
  const ZeroState = (_a) => {
2621
2621
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2626,53 +2626,53 @@ const ZeroState = (_a) => {
2626
2626
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2627
2627
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2628
2628
  action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, onClick: action.onClick }))));
2629
- };
2630
-
2631
- exports.Accordion = Accordion;
2632
- exports.ActionDialog = ActionDialog;
2633
- exports.Alert = Alert;
2634
- exports.AppHeader = AppHeader;
2635
- exports.AppMenu = AppMenu;
2636
- exports.BulkActionBar = BulkActionBar;
2637
- exports.Button = Button;
2638
- exports.ButtonMenu = ButtonMenu;
2639
- exports.Checkbox = Checkbox;
2640
- exports.Checklist = Checklist;
2641
- exports.Colors = Colors;
2642
- exports.Copy = Copy;
2643
- exports.DatePicker = DatePicker;
2644
- exports.Drawer = Drawer;
2645
- exports.EditableTheme = EditableTheme;
2646
- exports.Field = Field;
2647
- exports.FieldGroup = FieldGroup;
2648
- exports.FileUpload = FileUpload;
2649
- exports.FontSizes = FontSizes;
2650
- exports.FontStyles = FontStyles;
2651
- exports.Heading = Heading;
2652
- exports.Input = Input$1;
2653
- exports.Link = Link;
2654
- exports.Loader = Loader;
2655
- exports.Logo = Logo;
2656
- exports.Modal = Modal;
2657
- exports.MoreMenu = MoreMenu;
2658
- exports.MultiSelect = MultiSelect;
2659
- exports.PageHeader = PageHeader;
2660
- exports.Pagination = Pagination;
2661
- exports.ProgressBar = ProgressBar;
2662
- exports.Radio = Radio;
2663
- exports.RadioList = RadioList;
2664
- exports.Select = Select;
2665
- exports.Table = Table;
2666
- exports.Tabs = Tabs;
2667
- exports.Tag = Tag;
2668
- exports.Toggle = Toggle;
2669
- exports.Tooltip = Tooltip;
2670
- exports.ZeroState = ZeroState;
2671
- exports.formatAsPhone = formatAsPhone;
2672
- exports.formatAsSsn = formatAsSsn;
2673
- exports.getAgesFromDob = getAgesFromDob;
2674
- exports.getDaysForMonth = getDaysForMonth;
2675
- exports.getYears = getYears;
2676
- exports.validateEmail = validateEmail;
2677
- exports.validatePhone = validatePhone;
2678
- //# sourceMappingURL=index.js.map
2629
+ };
2630
+
2631
+ exports.Accordion = Accordion;
2632
+ exports.ActionDialog = ActionDialog;
2633
+ exports.Alert = Alert;
2634
+ exports.AppHeader = AppHeader;
2635
+ exports.AppMenu = AppMenu;
2636
+ exports.BulkActionBar = BulkActionBar;
2637
+ exports.Button = Button;
2638
+ exports.ButtonMenu = ButtonMenu;
2639
+ exports.Checkbox = Checkbox;
2640
+ exports.Checklist = Checklist;
2641
+ exports.Colors = Colors;
2642
+ exports.Copy = Copy;
2643
+ exports.DatePicker = DatePicker;
2644
+ exports.Drawer = Drawer;
2645
+ exports.EditableTheme = EditableTheme;
2646
+ exports.Field = Field;
2647
+ exports.FieldGroup = FieldGroup;
2648
+ exports.FileUpload = FileUpload;
2649
+ exports.FontSizes = FontSizes;
2650
+ exports.FontStyles = FontStyles;
2651
+ exports.Heading = Heading;
2652
+ exports.Input = Input$1;
2653
+ exports.Link = Link;
2654
+ exports.Loader = Loader;
2655
+ exports.Logo = Logo;
2656
+ exports.Modal = Modal;
2657
+ exports.MoreMenu = MoreMenu;
2658
+ exports.MultiSelect = MultiSelect;
2659
+ exports.PageHeader = PageHeader;
2660
+ exports.Pagination = Pagination;
2661
+ exports.ProgressBar = ProgressBar;
2662
+ exports.Radio = Radio;
2663
+ exports.RadioList = RadioList;
2664
+ exports.Select = Select;
2665
+ exports.Table = Table;
2666
+ exports.Tabs = Tabs;
2667
+ exports.Tag = Tag;
2668
+ exports.Toggle = Toggle;
2669
+ exports.Tooltip = Tooltip;
2670
+ exports.ZeroState = ZeroState;
2671
+ exports.formatAsPhone = formatAsPhone;
2672
+ exports.formatAsSsn = formatAsSsn;
2673
+ exports.getAgesFromDob = getAgesFromDob;
2674
+ exports.getDaysForMonth = getDaysForMonth;
2675
+ exports.getYears = getYears;
2676
+ exports.validateEmail = validateEmail;
2677
+ exports.validatePhone = validatePhone;
2678
+ //# sourceMappingURL=index.js.map