@hexure/ui 1.13.32 → 1.13.34

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 (7) hide show
  1. package/dist/cjs/index.js +1518 -1518
  2. package/dist/esm/index.js +1470 -1470
  3. package/package.json +1 -1
  4. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  5. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
  6. /package/dist/esm/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  7. /package/dist/esm/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
package/dist/cjs/index.js CHANGED
@@ -1,13 +1,13 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var styled = require('styled-components');
5
- var Icon = require('@mdi/react');
6
- var js = require('@mdi/js');
7
- var dayjs = require('dayjs');
8
- var Numeral = require('numeral');
9
- var Moment = require('moment');
10
-
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var styled = require('styled-components');
5
+ var Icon = require('@mdi/react');
6
+ var js = require('@mdi/js');
7
+ var dayjs = require('dayjs');
8
+ var Numeral = require('numeral');
9
+ var Moment = require('moment');
10
+
11
11
  /******************************************************************************
12
12
  Copyright (c) Microsoft Corporation.
13
13
 
@@ -21,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,8 +85,8 @@ const FontSizes = {
85
85
  };
86
86
  const EditableTheme = {
87
87
  PRIMARY_COLOR: Colors.PRIMARY,
88
- };
89
-
88
+ };
89
+
90
90
  //function to generate unique ids
91
91
  const generateUniqueId = (() => {
92
92
  let counter = 0;
@@ -94,26 +94,26 @@ const generateUniqueId = (() => {
94
94
  counter += 1;
95
95
  return `${prefix}-${counter}`;
96
96
  };
97
- })();
98
-
99
- const Header$3 = styled.div `
100
- display: flex;
101
- align-items: center;
102
- justify-content: space-between;
103
- box-sizing: border-box;
104
- background: #f5f5f5;
105
- border: 1px solid #e5e5e5;
106
- padding: 14px 20px;
107
- height: 50px;
108
- cursor: pointer;
109
- `;
110
- const Title$2 = styled.div `
111
- font-size: ${FontSizes.DEFAULT};
112
- font-weight: 400;
113
- color: ${Colors.BLACK.Hex};
114
- line-height: 1.6em;
115
- font-family: ${FontStyles.DEFAULT};
116
- box-sizing: border-box;
97
+ })();
98
+
99
+ const Header$3 = styled.div `
100
+ display: flex;
101
+ align-items: center;
102
+ justify-content: space-between;
103
+ box-sizing: border-box;
104
+ background: #f5f5f5;
105
+ border: 1px solid #e5e5e5;
106
+ padding: 14px 20px;
107
+ height: 50px;
108
+ cursor: pointer;
109
+ `;
110
+ const Title$2 = styled.div `
111
+ font-size: ${FontSizes.DEFAULT};
112
+ font-weight: 400;
113
+ color: ${Colors.BLACK.Hex};
114
+ line-height: 1.6em;
115
+ font-family: ${FontStyles.DEFAULT};
116
+ box-sizing: border-box;
117
117
  `;
118
118
  const Accordion = (_a) => {
119
119
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -123,21 +123,21 @@ const Accordion = (_a) => {
123
123
  React.createElement(Title$2, { id: `${id}-title` }, title),
124
124
  React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
125
125
  open ? React.createElement("div", { id: `${id}-content` }, children) : null));
126
- };
127
-
128
- const StyledComponent = styled.p `
129
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
130
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
131
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
132
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
133
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
134
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
135
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
136
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
137
- margin: ${props => props.$margin || '0px'};
138
- padding: ${props => props.$padding || '0px'};
139
- text-align: ${props => props.$align || 'left'};
140
- box-sizing: border-box;
126
+ };
127
+
128
+ const StyledComponent = styled.p `
129
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
130
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
131
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
132
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
133
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
134
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
135
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
136
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
137
+ margin: ${props => props.$margin || '0px'};
138
+ padding: ${props => props.$padding || '0px'};
139
+ text-align: ${props => props.$align || 'left'};
140
+ box-sizing: border-box;
141
141
  `;
142
142
  const Copy = (_a) => {
143
143
  var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK' } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color"]);
@@ -146,19 +146,19 @@ const Copy = (_a) => {
146
146
  };
147
147
  Copy.defaultProps = {
148
148
  type: 'default',
149
- };
150
-
151
- const Wrapper$h = styled.div `
152
- display: inline-block;
153
- position: relative;
154
- height: 16px;
155
- `;
156
- const StyledIcon$6 = styled(Icon) `
157
- width: 16px;
158
- height: 16px;
159
- margin: 0px 6px;
160
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
161
- cursor: pointer;
149
+ };
150
+
151
+ const Wrapper$h = styled.div `
152
+ display: inline-block;
153
+ position: relative;
154
+ height: 16px;
155
+ `;
156
+ const StyledIcon$6 = styled(Icon) `
157
+ width: 16px;
158
+ height: 16px;
159
+ margin: 0px 6px;
160
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
161
+ cursor: pointer;
162
162
  `;
163
163
  StyledIcon$6.defaultProps = { theme: EditableTheme };
164
164
  const positions = {
@@ -197,13 +197,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
197
197
  return (React.createElement(Wrapper$h, { id: `${id}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
198
198
  trigger || React.createElement(StyledIcon$6, { id: `${id}-icon`, path: js.mdiInformationOutline }),
199
199
  show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, id: `${id}-content` }, children && (React.createElement(Copy, { id: `${id}-copy`, type: 'small' }, children)))) : null));
200
- };
201
-
202
- const StyledButton = styled.button `
203
- height: ${props => (props.$small ? '30px' : '40px')};
204
- line-height: 1em;
205
- border-radius: ${props => (props.$small ? '15px' : '20px')};
206
- margin: ${props => props.$margin || '0px'};
200
+ };
201
+
202
+ const StyledButton = styled.button `
203
+ height: ${props => (props.$small ? '30px' : '40px')};
204
+ line-height: 1em;
205
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
206
+ margin: ${props => props.$margin || '0px'};
207
207
  padding: ${props => {
208
208
  if (props.$hasChildren) {
209
209
  if (props.$small) {
@@ -214,9 +214,9 @@ const StyledButton = styled.button `
214
214
  }
215
215
  }
216
216
  return '0px';
217
- }};
218
- outline: none;
219
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
217
+ }};
218
+ outline: none;
219
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
220
220
  width: ${props => {
221
221
  if (props.$hasChildren) {
222
222
  return 'auto';
@@ -225,55 +225,55 @@ const StyledButton = styled.button `
225
225
  return '30px';
226
226
  }
227
227
  return '40px';
228
- }};
229
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
230
- display: flex;
231
- align-items: center;
232
- justify-content: center;
233
- gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
234
- flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
235
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
236
- border-width: 1px;
237
- border-style: solid;
238
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
239
- box-sizing: border-box;
240
-
241
- &:active,
242
- &:focus,
243
- &:hover {
244
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
245
- }
246
- `;
247
- const Label$5 = styled.span `
248
- color: ${props => props.$content_color || '#fff'};
249
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
250
- font-family: ${FontStyles.DEFAULT};
251
- font-weight: 500;
252
- line-height: 1;
253
- `;
254
- const StyledIcon$5 = styled.span `
255
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
256
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
257
- display: flex;
258
- align-items: center;
259
- box-sizing: border-box;
260
- `;
261
- const Badge$1 = styled.span `
262
- width: ${props => (props.$small ? '20px' : '24px')};
263
- height: ${props => (props.$small ? '20px' : '24px')};
264
- line-height: 1;
265
- display: flex;
266
- align-items: center;
267
- justify-content: center;
268
- border-radius: 100%;
269
- background-color: ${props => props.$bg_color || '#fff'};
270
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
271
- font-size: ${props => (props.$small ? '10px' : '12px')};
272
- font-weight: 600;
273
- font-family: ${FontStyles.DEFAULT};
274
- letter-spacing: -1px;
275
- margin-left: ${props => (props.$small ? '5px' : '10px')};
276
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
228
+ }};
229
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
230
+ display: flex;
231
+ align-items: center;
232
+ justify-content: center;
233
+ gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
234
+ flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
235
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
236
+ border-width: 1px;
237
+ border-style: solid;
238
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
239
+ box-sizing: border-box;
240
+
241
+ &:active,
242
+ &:focus,
243
+ &:hover {
244
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
245
+ }
246
+ `;
247
+ const Label$5 = styled.span `
248
+ color: ${props => props.$content_color || '#fff'};
249
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
250
+ font-family: ${FontStyles.DEFAULT};
251
+ font-weight: 500;
252
+ line-height: 1;
253
+ `;
254
+ const StyledIcon$5 = styled.span `
255
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
256
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
257
+ display: flex;
258
+ align-items: center;
259
+ box-sizing: border-box;
260
+ `;
261
+ const Badge$1 = styled.span `
262
+ width: ${props => (props.$small ? '20px' : '24px')};
263
+ height: ${props => (props.$small ? '20px' : '24px')};
264
+ line-height: 1;
265
+ display: flex;
266
+ align-items: center;
267
+ justify-content: center;
268
+ border-radius: 100%;
269
+ background-color: ${props => props.$bg_color || '#fff'};
270
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
271
+ font-size: ${props => (props.$small ? '10px' : '12px')};
272
+ font-weight: 600;
273
+ font-family: ${FontStyles.DEFAULT};
274
+ letter-spacing: -1px;
275
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
276
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
277
277
  `;
278
278
  const Button = (_a) => {
279
279
  var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', iconPosition = 'after', toolTip, title = '' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title"]);
@@ -320,37 +320,37 @@ const Button = (_a) => {
320
320
  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));
321
321
  }
322
322
  return button_view;
323
- };
324
-
325
- const H1 = styled.h1 `
326
- color: ${Colors.BLACK.Hex};
327
- font-size: 30px;
328
- font-weight: ${props => (props.$bold ? '500' : '400')};
329
- line-height: 1.4em;
330
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
331
- margin: ${props => props.$margin || '0px'};
332
- padding: ${props => props.$padding || '0px'};
333
- box-sizing: border-box;
334
- `;
335
- const H2 = styled.h2 `
336
- color: ${Colors.BLACK.Hex};
337
- font-size: 24px;
338
- font-weight: ${props => (props.$bold ? '500' : '400')};
339
- line-height: 1.33em;
340
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
341
- margin: ${props => props.$margin || '0px'};
342
- padding: ${props => props.$padding || '0px'};
343
- box-sizing: border-box;
344
- `;
345
- const H3 = styled.h3 `
346
- color: ${Colors.BLACK.Hex};
347
- font-size: 18px;
348
- font-weight: ${props => (props.$bold ? '500' : '400')};
349
- line-height: 1.33em;
350
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
351
- margin: ${props => props.$margin || '0px'};
352
- padding: ${props => props.$padding || '0px'};
353
- box-sizing: border-box;
323
+ };
324
+
325
+ const H1 = styled.h1 `
326
+ color: ${Colors.BLACK.Hex};
327
+ font-size: 30px;
328
+ font-weight: ${props => (props.$bold ? '500' : '400')};
329
+ line-height: 1.4em;
330
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
331
+ margin: ${props => props.$margin || '0px'};
332
+ padding: ${props => props.$padding || '0px'};
333
+ box-sizing: border-box;
334
+ `;
335
+ const H2 = styled.h2 `
336
+ color: ${Colors.BLACK.Hex};
337
+ font-size: 24px;
338
+ font-weight: ${props => (props.$bold ? '500' : '400')};
339
+ line-height: 1.33em;
340
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
341
+ margin: ${props => props.$margin || '0px'};
342
+ padding: ${props => props.$padding || '0px'};
343
+ box-sizing: border-box;
344
+ `;
345
+ const H3 = styled.h3 `
346
+ color: ${Colors.BLACK.Hex};
347
+ font-size: 18px;
348
+ font-weight: ${props => (props.$bold ? '500' : '400')};
349
+ line-height: 1.33em;
350
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
351
+ margin: ${props => props.$margin || '0px'};
352
+ padding: ${props => props.$padding || '0px'};
353
+ box-sizing: border-box;
354
354
  `;
355
355
  const Heading = (_a) => {
356
356
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -370,29 +370,29 @@ const Heading = (_a) => {
370
370
  Heading.defaultProps = {
371
371
  bold: false,
372
372
  type: 'primary',
373
- };
374
-
375
- const Wrapper$g = styled.div `
376
- position: fixed;
377
- top: 0;
378
- right: 0;
379
- bottom: 0;
380
- left: 0;
381
- z-index: 9999;
382
- background: rgba(0, 0, 0, 0.8);
383
- display: flex;
384
- align-items: center;
385
- justify-content: center;
386
- box-sizing: border-box;
373
+ };
374
+
375
+ const Wrapper$g = styled.div `
376
+ position: fixed;
377
+ top: 0;
378
+ right: 0;
379
+ bottom: 0;
380
+ left: 0;
381
+ z-index: 9999;
382
+ background: rgba(0, 0, 0, 0.8);
383
+ display: flex;
384
+ align-items: center;
385
+ justify-content: center;
386
+ box-sizing: border-box;
387
387
  `;
388
388
  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)));
389
- const Buttons$1 = styled.div `
390
- display: flex;
391
- gap: 10px;
392
- align-items: center;
393
- justify-content: center;
394
- margin-top: 30px;
395
- box-sizing: border-box;
389
+ const Buttons$1 = styled.div `
390
+ display: flex;
391
+ gap: 10px;
392
+ align-items: center;
393
+ justify-content: center;
394
+ margin-top: 30px;
395
+ box-sizing: border-box;
396
396
  `;
397
397
  const ActionDialog = (_a) => {
398
398
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
@@ -405,29 +405,29 @@ const ActionDialog = (_a) => {
405
405
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
406
406
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
407
407
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)));
408
- };
409
-
410
- const Wrapper$f = styled.div `
411
- border: 1px solid #f1f1f1;
412
- border-radius: 4px;
413
- border-left-width: 4px;
414
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
415
- display: flex;
416
- align-items: flex-start;
417
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
418
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
419
- box-sizing: border-box;
420
- `;
421
- const StyledIcon$4 = styled(Icon) `
422
- flex-shrink: 0;
423
- `;
424
- const Action$1 = styled.div `
425
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
426
- font-size: ${FontSizes.DEFAULT};
427
- font-family: ${FontStyles.DEFAULT};
428
- font-weight: 500;
429
- cursor: pointer;
430
- margin-top: 6px;
408
+ };
409
+
410
+ const Wrapper$f = styled.div `
411
+ border: 1px solid #f1f1f1;
412
+ border-radius: 4px;
413
+ border-left-width: 4px;
414
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
415
+ display: flex;
416
+ align-items: flex-start;
417
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
418
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
419
+ box-sizing: border-box;
420
+ `;
421
+ const StyledIcon$4 = styled(Icon) `
422
+ flex-shrink: 0;
423
+ `;
424
+ const Action$1 = styled.div `
425
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
426
+ font-size: ${FontSizes.DEFAULT};
427
+ font-family: ${FontStyles.DEFAULT};
428
+ font-weight: 500;
429
+ cursor: pointer;
430
+ margin-top: 6px;
431
431
  `;
432
432
  Action$1.defaultProps = { theme: EditableTheme };
433
433
  const Alert = (_a) => {
@@ -458,8 +458,8 @@ const Alert = (_a) => {
458
458
  title && !small ? (React.createElement(Heading, { bold: true, id: `${id}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
459
459
  description ? (React.createElement(Copy, { id: `${id}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
460
460
  action && !small ? (React.createElement(Action$1, { id: `${id}-action`, onClick: action.onClick }, action.label)) : null)));
461
- };
462
-
461
+ };
462
+
463
463
  const colorMapping = {
464
464
  black: {
465
465
  fill_1: '#000000',
@@ -501,62 +501,62 @@ const Logo = (_a) => {
501
501
  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, id: `${id}-path-7` }),
502
502
  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, id: `${id}-path-8` })));
503
503
  }
504
- };
505
-
506
- const Container$3 = styled.header `
507
- width: 100%;
508
- display: flex;
509
- padding: 20px;
510
- box-sizing: border-box;
511
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
512
- background: '#fff';
513
- justify-content: space-between;
514
- `;
515
- const LogoWrapper = styled.div `
516
- display: flex;
517
- align-items: center;
518
- `;
519
- const Image = styled.img `
520
- height: 30px !important;
521
- width: auto !important;
522
- `;
523
- const Buttons = styled.div `
524
- display: flex;
525
- flex-direction: row;
526
- column-gap: 10px;
527
- flex-direction: reverse;
504
+ };
505
+
506
+ const Container$3 = styled.header `
507
+ width: 100%;
508
+ display: flex;
509
+ padding: 20px;
510
+ box-sizing: border-box;
511
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
512
+ background: '#fff';
513
+ justify-content: space-between;
514
+ `;
515
+ const LogoWrapper = styled.div `
516
+ display: flex;
517
+ align-items: center;
518
+ `;
519
+ const Image = styled.img `
520
+ height: 30px !important;
521
+ width: auto !important;
522
+ `;
523
+ const Buttons = styled.div `
524
+ display: flex;
525
+ flex-direction: row;
526
+ column-gap: 10px;
527
+ flex-direction: reverse;
528
528
  `;
529
529
  const AppHeader = ({ logoUrl, buttons = [] }) => {
530
530
  const id = generateUniqueId('app-header');
531
531
  return (React.createElement(Container$3, { id: `${id}-container` },
532
532
  React.createElement(LogoWrapper, { id: `${id}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { id: `${id}-logo`, src: logoUrl })) : (React.createElement(Logo, { height: '30px', id: `${id}-default-logo` }))),
533
533
  React.createElement(Buttons, { id: `${id}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { id: `${id}-button-${i}` })))))));
534
- };
535
-
536
- const Wrapper$e = styled.div `
537
- display: inline-block;
538
- border-radius: 4px;
539
- padding: 4px 6px;
540
- background: ${props => Colors[props.$color].Hex};
541
- color: #ffffff;
542
- box-sizing: border-box;
543
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
544
- `;
545
- const Content$2 = styled.div `
546
- display: flex;
547
- align-items: center;
548
- `;
549
- const Label$4 = styled.div `
550
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
551
- font-size: ${FontSizes.SMALL};
552
- font-weight: 500;
553
- font-family: ${FontStyles.DEFAULT};
554
- line-height: 1.2em;
555
- `;
556
- const Remove$1 = styled.div `
557
- margin-left: 10px;
558
- display: flex;
559
- align-items: center;
534
+ };
535
+
536
+ const Wrapper$e = styled.div `
537
+ display: inline-block;
538
+ border-radius: 4px;
539
+ padding: 4px 6px;
540
+ background: ${props => Colors[props.$color].Hex};
541
+ color: #ffffff;
542
+ box-sizing: border-box;
543
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
544
+ `;
545
+ const Content$2 = styled.div `
546
+ display: flex;
547
+ align-items: center;
548
+ `;
549
+ const Label$4 = styled.div `
550
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
551
+ font-size: ${FontSizes.SMALL};
552
+ font-weight: 500;
553
+ font-family: ${FontStyles.DEFAULT};
554
+ line-height: 1.2em;
555
+ `;
556
+ const Remove$1 = styled.div `
557
+ margin-left: 10px;
558
+ display: flex;
559
+ align-items: center;
560
560
  `;
561
561
  const Tag = (_a) => {
562
562
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -566,94 +566,94 @@ const Tag = (_a) => {
566
566
  React.createElement(Label$4, { "$color": color, id: `${id}-label` }, children),
567
567
  removable ? (React.createElement(Remove$1, { id: `${id}-remove` },
568
568
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', id: `${id}-icon`, path: js.mdiClose, size: '15px' }))) : null)));
569
- };
570
-
571
- const SidebarContainer = styled.div `
572
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
573
- display: flex;
574
- flex-direction: column;
575
- height: 100%;
576
- padding: 12px 0px;
577
- width: ${props => (props.$isOpen ? props.$width : '60px')};
578
- `;
579
- const MenuWrapper$1 = styled.button `
580
- display: flex;
581
- align-items: center;
582
- border: 0px;
583
- background-color: transparent;
584
- padding-left: 0px;
585
- border-left-width: 4px;
586
- border-left-style: solid;
587
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
588
- cursor: pointer;
589
- height: 40px;
590
-
591
- &:hover > div {
592
- color: ${props => props.$color.Hex};
593
- }
594
-
595
- &:hover > svg > path {
596
- fill: ${Colors.BLACK.Hex} !important;
597
- }
598
- `;
599
- const MenuIcon = styled(Icon) `
600
- width: 20px;
601
- height: 20px;
602
- margin: 0px 16px;
603
- flex-shrink: 0;
604
-
605
- > path {
606
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
607
- }
608
- `;
609
- const MenuLabel = styled.div `
610
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
611
- flex: 1;
612
- font-size: 12px;
613
- font-style: normal;
614
- font-weight: 600;
615
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
616
- line-height: 16px;
617
- padding: 12px 0px;
618
- letter-spacing: 1px;
619
- `;
620
- const SubMenu = styled.div `
621
- overflow-y: auto;
622
- padding-left: 44px;
623
- padding-right: 20px;
624
- padding-bottom: 10px;
625
- `;
626
- const SubMenuItem = styled.a `
627
- display: block;
628
- padding: 8px 12px;
629
- border-radius: 8px;
630
- font-size: 13px;
631
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
632
- line-height: 20px;
633
- text-decoration: none;
634
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
635
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
636
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
637
- cursor: pointer;
638
-
639
- &:hover {
640
- color: ${props => props.$color.Hex};
641
- font-weight: 500;
642
- }
643
- `;
644
- const Footer = styled.div `
645
- padding: 20px 14px 0px;
646
- display: flex;
647
- align-items: center;
648
- `;
649
- const FooterInfo = styled.div `
650
- display: flex;
651
- flex-direction: column;
652
- flex: 1;
653
- align-items: flex-start;
654
- `;
655
- const SidebarMenuContainer = styled.div `
656
- flex-grow: 1;
569
+ };
570
+
571
+ const SidebarContainer = styled.div `
572
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
573
+ display: flex;
574
+ flex-direction: column;
575
+ height: 100%;
576
+ padding: 12px 0px;
577
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
578
+ `;
579
+ const MenuWrapper$1 = styled.button `
580
+ display: flex;
581
+ align-items: center;
582
+ border: 0px;
583
+ background-color: transparent;
584
+ padding-left: 0px;
585
+ border-left-width: 4px;
586
+ border-left-style: solid;
587
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
588
+ cursor: pointer;
589
+ height: 40px;
590
+
591
+ &:hover > div {
592
+ color: ${props => props.$color.Hex};
593
+ }
594
+
595
+ &:hover > svg > path {
596
+ fill: ${Colors.BLACK.Hex} !important;
597
+ }
598
+ `;
599
+ const MenuIcon = styled(Icon) `
600
+ width: 20px;
601
+ height: 20px;
602
+ margin: 0px 16px;
603
+ flex-shrink: 0;
604
+
605
+ > path {
606
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
607
+ }
608
+ `;
609
+ const MenuLabel = styled.div `
610
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
611
+ flex: 1;
612
+ font-size: 12px;
613
+ font-style: normal;
614
+ font-weight: 600;
615
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
616
+ line-height: 16px;
617
+ padding: 12px 0px;
618
+ letter-spacing: 1px;
619
+ `;
620
+ const SubMenu = styled.div `
621
+ overflow-y: auto;
622
+ padding-left: 44px;
623
+ padding-right: 20px;
624
+ padding-bottom: 10px;
625
+ `;
626
+ const SubMenuItem = styled.a `
627
+ display: block;
628
+ padding: 8px 12px;
629
+ border-radius: 8px;
630
+ font-size: 13px;
631
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
632
+ line-height: 20px;
633
+ text-decoration: none;
634
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
635
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
636
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
637
+ cursor: pointer;
638
+
639
+ &:hover {
640
+ color: ${props => props.$color.Hex};
641
+ font-weight: 500;
642
+ }
643
+ `;
644
+ const Footer = styled.div `
645
+ padding: 20px 14px 0px;
646
+ display: flex;
647
+ align-items: center;
648
+ `;
649
+ const FooterInfo = styled.div `
650
+ display: flex;
651
+ flex-direction: column;
652
+ flex: 1;
653
+ align-items: flex-start;
654
+ `;
655
+ const SidebarMenuContainer = styled.div `
656
+ flex-grow: 1;
657
657
  `;
658
658
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
659
659
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -682,75 +682,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
682
682
  e.preventDefault();
683
683
  toggleCollapse(!collapsed);
684
684
  }, small: true }))));
685
- };
686
-
687
- const Wrapper$d = styled.div `
688
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
689
- border-radius: 8px;
690
- box-sizing: border-box;
691
- display: flex;
692
- align-items: center;
693
- justify-content: space-between;
694
- padding: 16px 20px;
685
+ };
686
+
687
+ const Wrapper$d = styled.div `
688
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
689
+ border-radius: 8px;
690
+ box-sizing: border-box;
691
+ display: flex;
692
+ align-items: center;
693
+ justify-content: space-between;
694
+ padding: 16px 20px;
695
695
  `;
696
696
  Wrapper$d.defaultProps = { theme: EditableTheme };
697
- const Left = styled.div `
698
- box-sizing: border-box;
699
- display: flex;
700
- align-items: center;
701
- justify-content: space-between;
702
- flex-shrink: 0;
703
- `;
704
- const Info$1 = styled.div `
705
- box-sizing: border-box;
706
- display: flex;
707
- align-items: center;
708
- margin-right: 30px;
709
- `;
710
- const Selected = styled.span `
711
- font-size: 14px;
712
- font-weight: 400;
713
- font-family: ${FontStyles.DEFAULT};
714
- color: ${Colors.BLACK.Hex};
715
- line-height: 1;
716
- `;
717
- const Clear = styled.span `
718
- font-size: 14px;
719
- font-weight: 400;
720
- font-family: ${FontStyles.DEFAULT};
721
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
722
- line-height: 1;
723
- cursor: pointer;
724
- padding-left: 10px;
725
- margin-left: 10px;
726
- border-left: 1px solid #ccc;
697
+ const Left = styled.div `
698
+ box-sizing: border-box;
699
+ display: flex;
700
+ align-items: center;
701
+ justify-content: space-between;
702
+ flex-shrink: 0;
703
+ `;
704
+ const Info$1 = styled.div `
705
+ box-sizing: border-box;
706
+ display: flex;
707
+ align-items: center;
708
+ margin-right: 30px;
709
+ `;
710
+ const Selected = styled.span `
711
+ font-size: 14px;
712
+ font-weight: 400;
713
+ font-family: ${FontStyles.DEFAULT};
714
+ color: ${Colors.BLACK.Hex};
715
+ line-height: 1;
716
+ `;
717
+ const Clear = styled.span `
718
+ font-size: 14px;
719
+ font-weight: 400;
720
+ font-family: ${FontStyles.DEFAULT};
721
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
722
+ line-height: 1;
723
+ cursor: pointer;
724
+ padding-left: 10px;
725
+ margin-left: 10px;
726
+ border-left: 1px solid #ccc;
727
727
  `;
728
728
  Clear.defaultProps = { theme: EditableTheme };
729
- const Actions$1 = styled.div `
730
- box-sizing: border-box;
731
- display: flex;
732
- align-items: center;
733
- column-gap: 10px;
734
- `;
735
- const Error$1 = styled.div `
736
- box-sizing: border-box;
737
- display: flex;
738
- align-items: center;
739
- background: rgba(${Colors.RED.Rgb}, 0.1);
740
- border-radius: 4px;
741
- padding: 6px 8px;
742
- text-overflow: ellipsis;
743
- white-space: nowrap;
744
- overflow: hidden;
745
- margin-left: 30px;
746
- `;
747
- const ErrorMsg = styled.span `
748
- font-size: 14px;
749
- font-weight: 500;
750
- font-family: ${FontStyles.DEFAULT};
751
- line-height: 1em;
752
- color: ${Colors.RED.Hex};
753
- margin-left: 8px;
729
+ const Actions$1 = styled.div `
730
+ box-sizing: border-box;
731
+ display: flex;
732
+ align-items: center;
733
+ column-gap: 10px;
734
+ `;
735
+ const Error$1 = styled.div `
736
+ box-sizing: border-box;
737
+ display: flex;
738
+ align-items: center;
739
+ background: rgba(${Colors.RED.Rgb}, 0.1);
740
+ border-radius: 4px;
741
+ padding: 6px 8px;
742
+ text-overflow: ellipsis;
743
+ white-space: nowrap;
744
+ overflow: hidden;
745
+ margin-left: 30px;
746
+ `;
747
+ const ErrorMsg = styled.span `
748
+ font-size: 14px;
749
+ font-weight: 500;
750
+ font-family: ${FontStyles.DEFAULT};
751
+ line-height: 1em;
752
+ color: ${Colors.RED.Hex};
753
+ margin-left: 8px;
754
754
  `;
755
755
  const BulkActionBar = (_a) => {
756
756
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -766,48 +766,48 @@ const BulkActionBar = (_a) => {
766
766
  errorMsg ? (React.createElement(Error$1, { id: `${id}-error` },
767
767
  React.createElement(Icon, { color: Colors.RED.Hex, id: `${id}-error-icon`, path: js.mdiInformationOutline, size: '20px' }),
768
768
  React.createElement(ErrorMsg, { id: `${id}-error-msg` }, errorMsg))) : null));
769
- };
770
-
771
- const Wrapper$c = styled.div `
772
- background: #fff;
773
- border-radius: 8px;
774
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
775
- display: flex;
776
- flex-direction: column;
777
- gap: 4px;
778
- max-height: ${props => props.$maxHeight || '312px'};
779
- padding: 10px;
780
- width: 200px;
781
- `;
782
- const MenuItem = styled.div `
783
- align-items: center;
784
- border-radius: 8px;
785
- border: 1px solid transparent;
786
- display: flex;
787
- gap: 8px;
788
- height: 38px;
789
- padding: 8px;
790
- &:hover {
791
- background: rgba(1, 147, 215, 0.1);
792
- cursor: pointer;
793
-
794
- svg,
795
- path {
796
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
797
- }
798
- }
769
+ };
770
+
771
+ const Wrapper$c = styled.div `
772
+ background: #fff;
773
+ border-radius: 8px;
774
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
775
+ display: flex;
776
+ flex-direction: column;
777
+ gap: 4px;
778
+ max-height: ${props => props.$maxHeight || '312px'};
779
+ padding: 10px;
780
+ width: 200px;
781
+ `;
782
+ const MenuItem = styled.div `
783
+ align-items: center;
784
+ border-radius: 8px;
785
+ border: 1px solid transparent;
786
+ display: flex;
787
+ gap: 8px;
788
+ height: 38px;
789
+ padding: 8px;
790
+ &:hover {
791
+ background: rgba(1, 147, 215, 0.1);
792
+ cursor: pointer;
793
+
794
+ svg,
795
+ path {
796
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
797
+ }
798
+ }
799
799
  `;
800
800
  MenuItem.defaultProps = { theme: EditableTheme };
801
- const Title$1 = styled.span `
802
- font-family: Roboto;
803
- font-size: 14px;
804
- font-weight: 400;
805
- height: auto;
806
- letter-spacing: 0px;
807
- line-height: 22px;
808
- text-align: left;
809
- color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
810
- pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
801
+ const Title$1 = styled.span `
802
+ font-family: Roboto;
803
+ font-size: 14px;
804
+ font-weight: 400;
805
+ height: auto;
806
+ letter-spacing: 0px;
807
+ line-height: 22px;
808
+ text-align: left;
809
+ color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
810
+ pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
811
811
  `;
812
812
  Title$1.defaultProps = {
813
813
  disabled: false,
@@ -822,19 +822,19 @@ const MoreMenu = (_a) => {
822
822
  item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, id: `${itemId}-icon`, path: item.icon, size: '20px' })) : null,
823
823
  React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, id: `${itemId}-title` }, item.label)));
824
824
  })));
825
- };
826
-
827
- const MenuWrapper = styled.div `
828
- position: relative;
829
- display: inline-block;
830
- `;
831
- const StyledMoreMenu = styled(MoreMenu) `
832
- position: absolute;
833
- top: ${props => props.$top};
834
- left: ${props => props.$left};
835
- width: ${props => props.$menuWidth};
836
- max-height: ${props => props.maxHeight};
837
- z-index: 10;
825
+ };
826
+
827
+ const MenuWrapper = styled.div `
828
+ position: relative;
829
+ display: inline-block;
830
+ `;
831
+ const StyledMoreMenu = styled(MoreMenu) `
832
+ position: absolute;
833
+ top: ${props => props.$top};
834
+ left: ${props => props.$left};
835
+ width: ${props => props.$menuWidth};
836
+ max-height: ${props => props.maxHeight};
837
+ z-index: 10;
838
838
  `;
839
839
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, }) => {
840
840
  const [showMenu, toggleMenu] = React.useState(false);
@@ -909,85 +909,85 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
909
909
  return (React.createElement(MenuWrapper, { id: `${id}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
910
910
  React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, id: `${id}-button`, small: small }, label),
911
911
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, id: `${id}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
912
- };
913
-
914
- const Wrapper$b = styled.label `
915
- border-radius: 4px;
916
- padding: 4px 0px 4px 6px;
917
- margin-left: -6px;
918
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
919
- display: flex;
920
- align-items: center;
921
- font-size: ${FontSizes.DEFAULT};
922
- line-height: 1.6em;
923
- box-sizing: border-box;
924
- position: relative;
925
-
926
- &:focus-within {
927
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
928
- }
912
+ };
913
+
914
+ const Wrapper$b = styled.label `
915
+ border-radius: 4px;
916
+ padding: 4px 0px 4px 6px;
917
+ margin-left: -6px;
918
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
919
+ display: flex;
920
+ align-items: center;
921
+ font-size: ${FontSizes.DEFAULT};
922
+ line-height: 1.6em;
923
+ box-sizing: border-box;
924
+ position: relative;
925
+
926
+ &:focus-within {
927
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
928
+ }
929
929
  `;
930
930
  Wrapper$b.defaultProps = { theme: EditableTheme };
931
- const Input$2 = styled.input `
932
- font-size: 20px;
933
- margin: 0px;
934
- line-height: 1.1em;
935
- box-sizing: border-box;
936
- position: absolute;
937
- opacity: 0;
938
- cursor: pointer;
939
- height: 0;
940
- width: 0;
941
- &:checked + span {
942
- background-color: ${Colors.PRIMARY.Hex};
943
- border-color: ${Colors.PRIMARY.Hex};
944
- }
945
- &:checked:disabled + span {
946
- background-color: ${Colors.MEDIUM_GRAY.Hex};
947
- border-color: ${Colors.MEDIUM_GRAY.Hex};
948
- }
949
- &:disabled + span {
950
- background-color: #d3d3d3;
951
- border-color: #d3d3d3;
952
- }
953
- &:checked + span:after {
954
- display: block;
955
- }
956
- `;
957
- const Check$1 = styled.span `
958
- height: 17px;
959
- width: 17px;
960
- min-width: 17px;
961
- background-color: #fff;
962
- border-width: 2px;
963
- border-style: solid;
964
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
965
- box-sizing: border-box;
966
- position: relative;
967
- &:after {
968
- content: '';
969
- position: absolute;
970
- left: 3px;
971
- top: 0px;
972
- width: 7px;
973
- height: 12px;
974
- border: solid white;
975
- border-width: 0 3px 3px 0;
976
- -webkit-transform: rotate(45deg);
977
- -ms-transform: rotate(45deg);
978
- transform: rotate(45deg);
979
- box-sizing: border-box;
980
- display: none;
981
- }
982
- `;
983
- const Label$3 = styled.span `
984
- font-family: ${FontStyles.DEFAULT};
985
- font-size: ${FontSizes.DEFAULT};
986
- font-weight: 400;
987
- line-height: 1.6em;
988
- color: ${props => props.color || Colors.BLACK.Hex};
989
- margin-left: 6px;
990
- box-sizing: border-box;
931
+ const Input$2 = styled.input `
932
+ font-size: 20px;
933
+ margin: 0px;
934
+ line-height: 1.1em;
935
+ box-sizing: border-box;
936
+ position: absolute;
937
+ opacity: 0;
938
+ cursor: pointer;
939
+ height: 0;
940
+ width: 0;
941
+ &:checked + span {
942
+ background-color: ${Colors.PRIMARY.Hex};
943
+ border-color: ${Colors.PRIMARY.Hex};
944
+ }
945
+ &:checked:disabled + span {
946
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
947
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
948
+ }
949
+ &:disabled + span {
950
+ background-color: #d3d3d3;
951
+ border-color: #d3d3d3;
952
+ }
953
+ &:checked + span:after {
954
+ display: block;
955
+ }
956
+ `;
957
+ const Check$1 = styled.span `
958
+ height: 17px;
959
+ width: 17px;
960
+ min-width: 17px;
961
+ background-color: #fff;
962
+ border-width: 2px;
963
+ border-style: solid;
964
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
965
+ box-sizing: border-box;
966
+ position: relative;
967
+ &:after {
968
+ content: '';
969
+ position: absolute;
970
+ left: 3px;
971
+ top: 0px;
972
+ width: 7px;
973
+ height: 12px;
974
+ border: solid white;
975
+ border-width: 0 3px 3px 0;
976
+ -webkit-transform: rotate(45deg);
977
+ -ms-transform: rotate(45deg);
978
+ transform: rotate(45deg);
979
+ box-sizing: border-box;
980
+ display: none;
981
+ }
982
+ `;
983
+ const Label$3 = styled.span `
984
+ font-family: ${FontStyles.DEFAULT};
985
+ font-size: ${FontSizes.DEFAULT};
986
+ font-weight: 400;
987
+ line-height: 1.6em;
988
+ color: ${props => props.color || Colors.BLACK.Hex};
989
+ margin-left: 6px;
990
+ box-sizing: border-box;
991
991
  `;
992
992
  const Checkbox = (_a) => {
993
993
  var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex"]);
@@ -998,16 +998,16 @@ const Checkbox = (_a) => {
998
998
  children ? (React.createElement(Label$3, { color: color, id: `${id}-label` },
999
999
  children,
1000
1000
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
1001
- };
1002
-
1003
- const SelectAll = styled.div `
1004
- padding: 8px 12px;
1005
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1006
- box-sizing: border-box;
1001
+ };
1002
+
1003
+ const SelectAll = styled.div `
1004
+ padding: 8px 12px;
1005
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1006
+ box-sizing: border-box;
1007
1007
  `;
1008
- const Options$1 = styled.div `
1009
- padding: 12px;
1010
- box-sizing: border-box;
1008
+ const Options$1 = styled.div `
1009
+ padding: 12px;
1010
+ box-sizing: border-box;
1011
1011
  `;
1012
1012
  const Checklist = (_a) => {
1013
1013
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -1046,70 +1046,70 @@ const Checklist = (_a) => {
1046
1046
  const optionId = generateUniqueId('option');
1047
1047
  return (React.createElement(Checkbox, Object.assign({ id: `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
1048
1048
  }))));
1049
- };
1050
-
1051
- const Wrapper$a = styled.div `
1052
- border-radius: 4px;
1053
- height: 40px;
1054
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1055
- position: relative;
1056
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1057
- border-width: 1px;
1058
- border-style: solid;
1059
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1060
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1061
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1062
- box-sizing: border-box;
1063
- padding: 10px 0px;
1064
- display: flex;
1065
- align-items: center;
1066
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1067
-
1068
- &:focus-within {
1069
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1070
- }
1049
+ };
1050
+
1051
+ const Wrapper$a = styled.div `
1052
+ border-radius: 4px;
1053
+ height: 40px;
1054
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1055
+ position: relative;
1056
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1057
+ border-width: 1px;
1058
+ border-style: solid;
1059
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1060
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1061
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1062
+ box-sizing: border-box;
1063
+ padding: 10px 0px;
1064
+ display: flex;
1065
+ align-items: center;
1066
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1067
+
1068
+ &:focus-within {
1069
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1070
+ }
1071
1071
  `;
1072
1072
  Wrapper$a.defaultProps = { theme: EditableTheme };
1073
- const Trigger$1 = styled.select `
1074
- appearance: none;
1075
- box-shadow: none;
1076
- outline: none;
1077
- border: none;
1078
- color: ${Colors.BLACK.Hex};
1079
- font-size: ${FontSizes.DEFAULT};
1080
- font-weight: 400;
1081
- font-family: ${FontStyles.DEFAULT};
1082
- line-height: 3.1em;
1083
- background-color: transparent;
1084
- background-image: none;
1085
- width: 100%;
1086
- box-sizing: border-box;
1087
- padding: 0px 30px 0px 10px;
1088
- box-sizing: border-box;
1089
- position: relative;
1090
- z-index: 2;
1091
- `;
1092
- const IconWrapper$2 = styled(Icon) `
1093
- position: absolute;
1094
- right: 9px;
1095
- z-index: 1;
1096
- `;
1097
- const SearchInput$1 = styled.input `
1098
- position: absolute;
1099
- left: 2px;
1100
- top: 2px;
1101
- z-index: 999;
1102
- width: 90%;
1103
- height: 30px;
1104
- border: none;
1105
- outline: none;
1106
- color: ${Colors.BLACK.Hex};
1107
- font-family: ${FontStyles.DEFAULT};
1108
- font-size: ${FontSizes.DEFAULT};
1109
- font-weight: 400;
1110
- line-height: 2.9em;
1111
- overflow: hidden;
1112
- white-space: nowrap;
1073
+ const Trigger$1 = styled.select `
1074
+ appearance: none;
1075
+ box-shadow: none;
1076
+ outline: none;
1077
+ border: none;
1078
+ color: ${Colors.BLACK.Hex};
1079
+ font-size: ${FontSizes.DEFAULT};
1080
+ font-weight: 400;
1081
+ font-family: ${FontStyles.DEFAULT};
1082
+ line-height: 3.1em;
1083
+ background-color: transparent;
1084
+ background-image: none;
1085
+ width: 100%;
1086
+ box-sizing: border-box;
1087
+ padding: 0px 30px 0px 10px;
1088
+ box-sizing: border-box;
1089
+ position: relative;
1090
+ z-index: 2;
1091
+ `;
1092
+ const IconWrapper$2 = styled(Icon) `
1093
+ position: absolute;
1094
+ right: 9px;
1095
+ z-index: 1;
1096
+ `;
1097
+ const SearchInput$1 = styled.input `
1098
+ position: absolute;
1099
+ left: 2px;
1100
+ top: 2px;
1101
+ z-index: 999;
1102
+ width: 90%;
1103
+ height: 30px;
1104
+ border: none;
1105
+ outline: none;
1106
+ color: ${Colors.BLACK.Hex};
1107
+ font-family: ${FontStyles.DEFAULT};
1108
+ font-size: ${FontSizes.DEFAULT};
1109
+ font-weight: 400;
1110
+ line-height: 2.9em;
1111
+ overflow: hidden;
1112
+ white-space: nowrap;
1113
1113
  `;
1114
1114
  const Select = (_a) => {
1115
1115
  var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex"]);
@@ -1144,15 +1144,15 @@ const Select = (_a) => {
1144
1144
  filteredOptions &&
1145
1145
  filteredOptions.map((option, i) => (React.createElement("option", { id: `${id}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
1146
1146
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: js.mdiChevronDown, size: '22px' })));
1147
- };
1148
-
1149
- const DatePickerWrapper = styled.div `
1150
- display: flex;
1151
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1147
+ };
1148
+
1149
+ const DatePickerWrapper = styled.div `
1150
+ display: flex;
1151
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1152
1152
  `;
1153
- const Middle = styled.div `
1154
- margin: 0px -1px;
1155
- flex-grow: 1;
1153
+ const Middle = styled.div `
1154
+ margin: 0px -1px;
1155
+ flex-grow: 1;
1156
1156
  `;
1157
1157
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date,
1158
1158
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1234,66 +1234,66 @@ onChange = () => { }, style, }) => {
1234
1234
  React.createElement(Middle, { id: `${id}-middle` },
1235
1235
  React.createElement(Select, { id: `${id}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1236
1236
  React.createElement(Select, { id: `${id}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1237
- };
1238
-
1239
- const Scrim$1 = styled.div `
1240
- position: ${({ $position }) => $position};
1241
- top: 0;
1242
- right: 0;
1243
- bottom: 0;
1244
- left: 0;
1245
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1246
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1247
- `;
1248
- const Container$2 = styled.div `
1249
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1250
- min-width: 400px;
1251
- width: ${({ $width }) => $width || '400px'};
1252
- overflow: hidden;
1253
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1254
- outline: none;
1255
- border: none;
1256
- position: ${({ $position }) => $position};
1257
- top: 0;
1258
- right: 0;
1259
- bottom: 0;
1260
- padding: 0px;
1261
- display: flex;
1262
- flex-direction: column;
1263
- box-sizing: border-box;
1264
- background: #fff;
1265
- `;
1266
- const Header$2 = styled.div `
1267
- padding: 30px 20px;
1268
- display: flex;
1269
- align-items: flex-start;
1270
- box-sizing: border-box;
1271
- flex-shrink: 0;
1272
- background: #fff;
1273
- `;
1274
- const Close$1 = styled.div `
1275
- margin-left: auto;
1276
- display: flex;
1277
- align-items: center;
1278
- padding-left: 20px;
1279
- cursor: pointer;
1280
- `;
1281
- const ContentWrapper$1 = styled.div `
1282
- overflow-x: hidden;
1283
- overflow-y: auto;
1284
- box-sizing: border-box;
1285
- flex: 1;
1286
- background: #fff;
1287
- `;
1288
- const ButtonBar$1 = styled.div `
1289
- padding: 20px;
1290
- display: flex;
1291
- align-items: center;
1292
- justify-content: flex-end;
1293
- box-sizing: border-box;
1294
- gap: 10px;
1295
- flex-shrink: 0;
1296
- background: #fff;
1237
+ };
1238
+
1239
+ const Scrim$1 = styled.div `
1240
+ position: ${({ $position }) => $position};
1241
+ top: 0;
1242
+ right: 0;
1243
+ bottom: 0;
1244
+ left: 0;
1245
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1246
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1247
+ `;
1248
+ const Container$2 = styled.div `
1249
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1250
+ min-width: 400px;
1251
+ width: ${({ $width }) => $width || '400px'};
1252
+ overflow: hidden;
1253
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1254
+ outline: none;
1255
+ border: none;
1256
+ position: ${({ $position }) => $position};
1257
+ top: 0;
1258
+ right: 0;
1259
+ bottom: 0;
1260
+ padding: 0px;
1261
+ display: flex;
1262
+ flex-direction: column;
1263
+ box-sizing: border-box;
1264
+ background: #fff;
1265
+ `;
1266
+ const Header$2 = styled.div `
1267
+ padding: 30px 20px;
1268
+ display: flex;
1269
+ align-items: flex-start;
1270
+ box-sizing: border-box;
1271
+ flex-shrink: 0;
1272
+ background: #fff;
1273
+ `;
1274
+ const Close$1 = styled.div `
1275
+ margin-left: auto;
1276
+ display: flex;
1277
+ align-items: center;
1278
+ padding-left: 20px;
1279
+ cursor: pointer;
1280
+ `;
1281
+ const ContentWrapper$1 = styled.div `
1282
+ overflow-x: hidden;
1283
+ overflow-y: auto;
1284
+ box-sizing: border-box;
1285
+ flex: 1;
1286
+ background: #fff;
1287
+ `;
1288
+ const ButtonBar$1 = styled.div `
1289
+ padding: 20px;
1290
+ display: flex;
1291
+ align-items: center;
1292
+ justify-content: flex-end;
1293
+ box-sizing: border-box;
1294
+ gap: 10px;
1295
+ flex-shrink: 0;
1296
+ background: #fff;
1297
1297
  `;
1298
1298
  const Drawer = (_a) => {
1299
1299
  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"]);
@@ -1322,55 +1322,55 @@ const Drawer = (_a) => {
1322
1322
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
1323
1323
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null),
1324
1324
  scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${id}-scrim`, onClick: onClose })) : null));
1325
- };
1326
-
1325
+ };
1326
+
1327
1327
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1328
- const LabelRow = styled.div `
1329
- display: flex;
1330
- align-items: center;
1331
- justify-content: space-between;
1332
- margin: 0 0 4px 0;
1333
- box-sizing: border-box;
1334
- `;
1335
- const Label$2 = styled.label `
1336
- font-size: ${FontSizes.DEFAULT};
1337
- font-weight: 500;
1338
- line-height: 1.3em;
1339
- font-family: ${FontStyles.DEFAULT};
1340
- color: ${Colors.BLACK.Hex};
1341
- display: flex;
1342
- align-items: center;
1343
- `;
1344
- const Required = styled.span `
1345
- color: ${Colors.RED.Hex};
1346
- margin-left: 4px;
1347
- `;
1348
- const Action = styled.span `
1349
- font-size: ${FontSizes.DEFAULT};
1350
- font-weight: 500;
1351
- line-height: 1em;
1352
- font-family: ${FontStyles.DEFAULT};
1353
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1354
- cursor: pointer;
1328
+ const LabelRow = styled.div `
1329
+ display: flex;
1330
+ align-items: center;
1331
+ justify-content: space-between;
1332
+ margin: 0 0 4px 0;
1333
+ box-sizing: border-box;
1334
+ `;
1335
+ const Label$2 = styled.label `
1336
+ font-size: ${FontSizes.DEFAULT};
1337
+ font-weight: 500;
1338
+ line-height: 1.3em;
1339
+ font-family: ${FontStyles.DEFAULT};
1340
+ color: ${Colors.BLACK.Hex};
1341
+ display: flex;
1342
+ align-items: center;
1343
+ `;
1344
+ const Required = styled.span `
1345
+ color: ${Colors.RED.Hex};
1346
+ margin-left: 4px;
1347
+ `;
1348
+ const Action = styled.span `
1349
+ font-size: ${FontSizes.DEFAULT};
1350
+ font-weight: 500;
1351
+ line-height: 1em;
1352
+ font-family: ${FontStyles.DEFAULT};
1353
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1354
+ cursor: pointer;
1355
1355
  `;
1356
1356
  Action.defaultProps = { theme: EditableTheme };
1357
- const Description = styled.div `
1358
- font-size: ${FontSizes.SMALL};
1359
- font-weight: 400;
1360
- line-height: 1.3em;
1361
- font-family: ${FontStyles.DEFAULT};
1362
- color: ${Colors.BLACK.Hex};
1363
- margin: 0 0 8px 0;
1364
- box-sizing: border-box;
1365
- `;
1366
- const Validation = styled.div `
1367
- font-size: ${FontSizes.SMALL};
1368
- font-weight: 400;
1369
- line-height: 1.3em;
1370
- font-family: ${FontStyles.DEFAULT};
1371
- color: ${Colors.RED.Hex};
1372
- margin: 4px 0 0 0;
1373
- box-sizing: border-box;
1357
+ const Description = styled.div `
1358
+ font-size: ${FontSizes.SMALL};
1359
+ font-weight: 400;
1360
+ line-height: 1.3em;
1361
+ font-family: ${FontStyles.DEFAULT};
1362
+ color: ${Colors.BLACK.Hex};
1363
+ margin: 0 0 8px 0;
1364
+ box-sizing: border-box;
1365
+ `;
1366
+ const Validation = styled.div `
1367
+ font-size: ${FontSizes.SMALL};
1368
+ font-weight: 400;
1369
+ line-height: 1.3em;
1370
+ font-family: ${FontStyles.DEFAULT};
1371
+ color: ${Colors.RED.Hex};
1372
+ margin: 4px 0 0 0;
1373
+ box-sizing: border-box;
1374
1374
  `;
1375
1375
  const Field = (_a) => {
1376
1376
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1385,114 +1385,114 @@ const Field = (_a) => {
1385
1385
  description ? React.createElement(Description, { id: `${id}-description` }, description) : null,
1386
1386
  React.createElement("div", { id: `${id}-children` }, children),
1387
1387
  validationText ? React.createElement(Validation, { id: `${id}-validation` }, validationText) : null));
1388
- };
1389
-
1390
- const Wrapper$8 = styled.fieldset `
1391
- margin-inline-start: 0px;
1392
- margin-inline-end: 0px;
1393
- padding-block-start: 0px;
1394
- padding-inline-start: 0px;
1395
- padding-inline-end: 0px;
1396
- padding-block-end: 0px;
1397
- min-inline-size: min-content;
1398
- border-width: 0px;
1399
- border-style: none;
1400
- border-color: transparent;
1401
- border-image: none;
1402
- `;
1403
- const Label$1 = styled.legend `
1404
- padding-inline-start: 0px;
1405
- padding-inline-end: 0px;
1406
-
1407
- color: ${Colors.BLACK.Hex};
1408
- font-family: ${FontStyles.DEFAULT};
1409
- font-size: ${FontSizes.DEFAULT};
1410
- font-weight: 500;
1411
- line-height: 22px;
1412
- margin-bottom: 6px;
1413
- `;
1414
- const Content$1 = styled.div `
1415
- padding: 20px;
1416
- border-radius: 8px;
1417
- background: #fcfcfc;
1388
+ };
1389
+
1390
+ const Wrapper$8 = styled.fieldset `
1391
+ margin-inline-start: 0px;
1392
+ margin-inline-end: 0px;
1393
+ padding-block-start: 0px;
1394
+ padding-inline-start: 0px;
1395
+ padding-inline-end: 0px;
1396
+ padding-block-end: 0px;
1397
+ min-inline-size: min-content;
1398
+ border-width: 0px;
1399
+ border-style: none;
1400
+ border-color: transparent;
1401
+ border-image: none;
1402
+ `;
1403
+ const Label$1 = styled.legend `
1404
+ padding-inline-start: 0px;
1405
+ padding-inline-end: 0px;
1406
+
1407
+ color: ${Colors.BLACK.Hex};
1408
+ font-family: ${FontStyles.DEFAULT};
1409
+ font-size: ${FontSizes.DEFAULT};
1410
+ font-weight: 500;
1411
+ line-height: 22px;
1412
+ margin-bottom: 6px;
1413
+ `;
1414
+ const Content$1 = styled.div `
1415
+ padding: 20px;
1416
+ border-radius: 8px;
1417
+ background: #fcfcfc;
1418
1418
  `;
1419
1419
  const FieldGroup = ({ children, label }) => {
1420
1420
  const id = generateUniqueId('field-group');
1421
1421
  return (React.createElement(Wrapper$8, { id: `${id}-wrapper` },
1422
1422
  React.createElement(Label$1, { id: `${id}-label` }, label),
1423
1423
  React.createElement(Content$1, { id: `${id}-content` }, children)));
1424
- };
1425
-
1426
- const Dropzone = styled.div `
1427
- border-radius: 8px;
1428
- border-width: 1px;
1429
- border-style: dashed;
1430
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1431
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1432
- cursor: copy;
1424
+ };
1425
+
1426
+ const Dropzone = styled.div `
1427
+ border-radius: 8px;
1428
+ border-width: 1px;
1429
+ border-style: dashed;
1430
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1431
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1432
+ cursor: copy;
1433
1433
  `;
1434
1434
  Dropzone.defaultProps = { theme: EditableTheme };
1435
- const IconWrapper$1 = styled.div `
1436
- width: 80px;
1437
- height: 80px;
1438
- border-radius: 40px;
1439
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1440
- display: flex;
1441
- align-items: center;
1442
- justify-content: center;
1443
- `;
1444
- const StyledIcon$3 = styled(Icon) `
1445
- width: 40px !important;
1446
- height: 40px !important;
1447
-
1448
- > path {
1449
- fill: ${Colors.GRAY.Hex} !important;
1450
- }
1451
- `;
1452
- const ClickZone = styled.div `
1453
- margin: 40px 20px;
1454
- display: flex;
1455
- flex-direction: column;
1456
- align-items: center;
1457
- gap: 16px;
1458
- `;
1459
- const Content = styled.div `
1460
- display: flex;
1461
- flex-direction: column;
1462
- align-items: center;
1463
- z-index: 99999;
1464
- gap: 2px;
1465
- `;
1466
- const Files = styled.div `
1467
- display: flex;
1468
- flex-direction: column;
1469
- align-self: stretch;
1470
- gap: 10px;
1471
- margin: 20px;
1472
- `;
1473
- const MessageDiv = styled.div `
1474
- display: flex;
1475
- align-items: center;
1476
- justify-content: center;
1477
- `;
1478
- const File = styled.div `
1479
- display: flex;
1480
- padding: 10px;
1481
- align-items: center;
1482
- justify-content: space-between;
1483
- gap: 10px;
1484
- border-radius: 4px;
1485
- border: 1px solid #cccccc;
1486
- background: #ffffff;
1487
- `;
1488
- const Remove = styled(Icon) `
1489
- width: 24px;
1490
- height: 24px;
1491
- cursor: pointer;
1492
-
1493
- > path {
1494
- fill: ${Colors.RED.Hex} !important;
1495
- }
1435
+ const IconWrapper$1 = styled.div `
1436
+ width: 80px;
1437
+ height: 80px;
1438
+ border-radius: 40px;
1439
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1440
+ display: flex;
1441
+ align-items: center;
1442
+ justify-content: center;
1443
+ `;
1444
+ const StyledIcon$3 = styled(Icon) `
1445
+ width: 40px !important;
1446
+ height: 40px !important;
1447
+
1448
+ > path {
1449
+ fill: ${Colors.GRAY.Hex} !important;
1450
+ }
1451
+ `;
1452
+ const ClickZone = styled.div `
1453
+ margin: 40px 20px;
1454
+ display: flex;
1455
+ flex-direction: column;
1456
+ align-items: center;
1457
+ gap: 16px;
1458
+ `;
1459
+ const Content = styled.div `
1460
+ display: flex;
1461
+ flex-direction: column;
1462
+ align-items: center;
1463
+ z-index: 99999;
1464
+ gap: 2px;
1465
+ `;
1466
+ const Files = styled.div `
1467
+ display: flex;
1468
+ flex-direction: column;
1469
+ align-self: stretch;
1470
+ gap: 10px;
1471
+ margin: 20px;
1472
+ `;
1473
+ const MessageDiv = styled.div `
1474
+ display: flex;
1475
+ align-items: center;
1476
+ justify-content: center;
1477
+ `;
1478
+ const File = styled.div `
1479
+ display: flex;
1480
+ padding: 10px;
1481
+ align-items: center;
1482
+ justify-content: space-between;
1483
+ gap: 10px;
1484
+ border-radius: 4px;
1485
+ border: 1px solid #cccccc;
1486
+ background: #ffffff;
1487
+ `;
1488
+ const Remove = styled(Icon) `
1489
+ width: 24px;
1490
+ height: 24px;
1491
+ cursor: pointer;
1492
+
1493
+ > path {
1494
+ fill: ${Colors.RED.Hex} !important;
1495
+ }
1496
1496
  `;
1497
1497
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
1498
1498
  const inputRef = React.useRef(null);
@@ -1612,8 +1612,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1612
1612
  React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${id}-message` }, message),
1613
1613
  tooltipInfo && (React.createElement("span", { id: `${id}-tooltip` },
1614
1614
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1615
- };
1616
-
1615
+ };
1616
+
1617
1617
  const getAgesFromDob = (dob) => {
1618
1618
  let calculated_current_age = null;
1619
1619
  let calculated_nearest_age = null;
@@ -1686,149 +1686,149 @@ const formatAsSsn = (number) => {
1686
1686
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1687
1687
  }
1688
1688
  return formatted_value;
1689
- };
1690
-
1691
- const StyledInput = styled.input `
1692
- border: none !important;
1693
- background: none !important;
1694
- font-size: ${FontSizes.DEFAULT};
1695
- font-weight: 400;
1696
- font-family: ${FontStyles.DEFAULT};
1697
- line-height: 1.28em;
1689
+ };
1690
+
1691
+ const StyledInput = styled.input `
1692
+ border: none !important;
1693
+ background: none !important;
1694
+ font-size: ${FontSizes.DEFAULT};
1695
+ font-weight: 400;
1696
+ font-family: ${FontStyles.DEFAULT};
1697
+ line-height: 1.28em;
1698
1698
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1699
1699
  ? Colors.RED.Hex
1700
- : Colors.BLACK.Hex};
1701
- position: relative;
1702
- height: ${props => props.$height || 'auto'};
1703
- padding: 10px;
1704
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1705
- box-shadow: none;
1706
- outline: none;
1707
- margin: 0px;
1708
- text-indent: 0px;
1709
- --webkit-appearance: none;
1710
- box-sizing: border-box;
1711
- display: block;
1712
- width: 100%;
1713
- `;
1714
- const StyledTextArea = styled.textarea `
1715
- border: none !important;
1716
- background: none !important;
1717
- overflow-y: scroll !important;
1718
- font-size: 14px;
1719
- font-weight: 400;
1720
- height: ${props => props.$height || 'auto'};
1721
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1722
- line-height: 1.28em;
1700
+ : Colors.BLACK.Hex};
1701
+ position: relative;
1702
+ height: ${props => props.$height || 'auto'};
1703
+ padding: 10px;
1704
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1705
+ box-shadow: none;
1706
+ outline: none;
1707
+ margin: 0px;
1708
+ text-indent: 0px;
1709
+ --webkit-appearance: none;
1710
+ box-sizing: border-box;
1711
+ display: block;
1712
+ width: 100%;
1713
+ `;
1714
+ const StyledTextArea = styled.textarea `
1715
+ border: none !important;
1716
+ background: none !important;
1717
+ overflow-y: scroll !important;
1718
+ font-size: 14px;
1719
+ font-weight: 400;
1720
+ height: ${props => props.$height || 'auto'};
1721
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1722
+ line-height: 1.28em;
1723
1723
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1724
1724
  ? Colors.RED.Hex
1725
- : Colors.BLACK.Hex};
1726
- position: relative;
1727
- padding: 10px;
1728
- opacity: 1;
1729
- box-shadow: none;
1730
- outline: none;
1731
- margin: 0px;
1732
- text-indent: 0px;
1733
- --webkit-appearance: none;
1734
- overflow-wrap: break-word;
1735
- box-sizing: border-box;
1736
- display: block;
1737
- width: 100%;
1725
+ : Colors.BLACK.Hex};
1726
+ position: relative;
1727
+ padding: 10px;
1728
+ opacity: 1;
1729
+ box-shadow: none;
1730
+ outline: none;
1731
+ margin: 0px;
1732
+ text-indent: 0px;
1733
+ --webkit-appearance: none;
1734
+ overflow-wrap: break-word;
1735
+ box-sizing: border-box;
1736
+ display: block;
1737
+ width: 100%;
1738
1738
  ${({ $readOnly }) => $readOnly &&
1739
- `
1740
- background-color: #f0f0f0;
1741
- color: #999999;
1742
- overflow-y: scroll;
1743
- `}
1744
- `;
1745
- const StyledSuffix = styled.div `
1746
- box-sizing: border-box;
1747
- border-radius: 0px 4px 4px 0px;
1748
- display: flex;
1749
- justify-content: center;
1750
- align-items: center;
1751
- padding: 10px;
1752
- height: auto;
1753
- background: #f5f5f5;
1754
- border-width: 0px 0px 0px 1px;
1755
- border-style: solid;
1756
- border-color: #cccccc;
1757
- font-family: ${FontStyles.DEFAULT};
1758
- font-style: normal;
1759
- font-weight: 400;
1760
- font-size: ${FontSizes.DEFAULT};
1761
- color: ${Colors.BLACK.Hex};
1762
- `;
1763
- const StyledWrapper = styled.div `
1764
- display: flex;
1765
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1766
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1767
- position: relative;
1768
- border-width: 1px;
1769
- border-style: solid;
1770
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1771
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1772
-
1773
- &:focus-within {
1774
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1775
- }
1739
+ `
1740
+ background-color: #f0f0f0;
1741
+ color: #999999;
1742
+ overflow-y: scroll;
1743
+ `}
1744
+ `;
1745
+ const StyledSuffix = styled.div `
1746
+ box-sizing: border-box;
1747
+ border-radius: 0px 4px 4px 0px;
1748
+ display: flex;
1749
+ justify-content: center;
1750
+ align-items: center;
1751
+ padding: 10px;
1752
+ height: auto;
1753
+ background: #f5f5f5;
1754
+ border-width: 0px 0px 0px 1px;
1755
+ border-style: solid;
1756
+ border-color: #cccccc;
1757
+ font-family: ${FontStyles.DEFAULT};
1758
+ font-style: normal;
1759
+ font-weight: 400;
1760
+ font-size: ${FontSizes.DEFAULT};
1761
+ color: ${Colors.BLACK.Hex};
1762
+ `;
1763
+ const StyledWrapper = styled.div `
1764
+ display: flex;
1765
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1766
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1767
+ position: relative;
1768
+ border-width: 1px;
1769
+ border-style: solid;
1770
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1771
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1772
+
1773
+ &:focus-within {
1774
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1775
+ }
1776
1776
  `;
1777
1777
  StyledWrapper.defaultProps = { theme: EditableTheme };
1778
- const SuggestedValues = styled.div `
1779
- background: #fff;
1780
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1781
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1782
- border-radius: 0px 0px 4px 4px;
1783
- border-style: solid;
1784
- border-top: none;
1785
- border-width: 1px;
1786
- left: -1px;
1787
- position: absolute;
1788
- right: -1px;
1789
- top: 39px;
1790
- z-index: 9999;
1791
- max-height: 220px;
1792
- overflow: auto;
1778
+ const SuggestedValues = styled.div `
1779
+ background: #fff;
1780
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1781
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1782
+ border-radius: 0px 0px 4px 4px;
1783
+ border-style: solid;
1784
+ border-top: none;
1785
+ border-width: 1px;
1786
+ left: -1px;
1787
+ position: absolute;
1788
+ right: -1px;
1789
+ top: 39px;
1790
+ z-index: 9999;
1791
+ max-height: 220px;
1792
+ overflow: auto;
1793
1793
  `;
1794
1794
  SuggestedValues.defaultProps = { theme: EditableTheme };
1795
- const SuggestedSummary = styled.div `
1796
- color: ${Colors.MEDIUM_GRAY.Hex};
1797
- font-size: 12px;
1798
- font-family: ${FontStyles.DEFAULT};
1799
- font-weight: 500;
1800
- line-height: 18px;
1801
- padding: 10px 12px;
1802
- border-bottom: 1px solid #e5e5e5;
1803
- background: #fff;
1804
- z-index: 1;
1805
- position: sticky;
1806
- top: 0px;
1807
- `;
1808
- const SuggestedValue = styled.div `
1809
- cursor: pointer;
1810
- padding: 8px 12px;
1811
- font-size: ${FontSizes.DEFAULT};
1812
- font-family: ${FontStyles.DEFAULT};
1813
- font-weight: 400;
1814
- line-height: 1.6em;
1815
- color: ${Colors.BLACK.Hex};
1816
-
1817
- &:hover {
1818
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1819
- }
1795
+ const SuggestedSummary = styled.div `
1796
+ color: ${Colors.MEDIUM_GRAY.Hex};
1797
+ font-size: 12px;
1798
+ font-family: ${FontStyles.DEFAULT};
1799
+ font-weight: 500;
1800
+ line-height: 18px;
1801
+ padding: 10px 12px;
1802
+ border-bottom: 1px solid #e5e5e5;
1803
+ background: #fff;
1804
+ z-index: 1;
1805
+ position: sticky;
1806
+ top: 0px;
1807
+ `;
1808
+ const SuggestedValue = styled.div `
1809
+ cursor: pointer;
1810
+ padding: 8px 12px;
1811
+ font-size: ${FontSizes.DEFAULT};
1812
+ font-family: ${FontStyles.DEFAULT};
1813
+ font-weight: 400;
1814
+ line-height: 1.6em;
1815
+ color: ${Colors.BLACK.Hex};
1816
+
1817
+ &:hover {
1818
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1819
+ }
1820
1820
  `;
1821
1821
  SuggestedValue.defaultProps = { theme: EditableTheme };
1822
- const CharacterCount = styled.div `
1823
- font-family: ${FontStyles.DEFAULT};
1824
- font-size: ${FontSizes.SMALL};
1825
- color: ${Colors.MEDIUM_GRAY.Hex};
1826
- padding: 10px;
1822
+ const CharacterCount = styled.div `
1823
+ font-family: ${FontStyles.DEFAULT};
1824
+ font-size: ${FontSizes.SMALL};
1825
+ color: ${Colors.MEDIUM_GRAY.Hex};
1826
+ padding: 10px;
1827
1827
  `;
1828
- const Loader$1 = styled.div `
1829
- padding: 0px 10px;
1830
- display: flex;
1831
- align-items: center;
1828
+ const Loader$1 = styled.div `
1829
+ padding: 0px 10px;
1830
+ display: flex;
1831
+ align-items: center;
1832
1832
  `;
1833
1833
  const Input$1 = (_a) => {
1834
1834
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown,
@@ -1928,7 +1928,7 @@ const Input$1 = (_a) => {
1928
1928
  onBlur(e);
1929
1929
  setTimeout(() => {
1930
1930
  setShowOptions(false);
1931
- }, 200);
1931
+ }, 500);
1932
1932
  }, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
1933
1933
  ? e => e.preventDefault()
1934
1934
  : e => {
@@ -1953,112 +1953,112 @@ const Input$1 = (_a) => {
1953
1953
  onSuggestedSelect();
1954
1954
  setShowOptions(false);
1955
1955
  } }, suggestedValue))))) : null));
1956
- };
1957
-
1958
- const Wrapper$7 = styled.a `
1959
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1960
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1961
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1962
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1963
- font-weight: 500;
1964
- font-style: normal;
1965
- text-decoration: 'none';
1966
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1967
- margin: 0px;
1968
- padding: 0px;
1969
- box-sizing: border-box;
1970
- cursor: pointer;
1956
+ };
1957
+
1958
+ const Wrapper$7 = styled.a `
1959
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1960
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1961
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1962
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1963
+ font-weight: 500;
1964
+ font-style: normal;
1965
+ text-decoration: 'none';
1966
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1967
+ margin: 0px;
1968
+ padding: 0px;
1969
+ box-sizing: border-box;
1970
+ cursor: pointer;
1971
1971
  `;
1972
1972
  Wrapper$7.defaultProps = { theme: EditableTheme };
1973
1973
  const Link = (_a) => {
1974
1974
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1975
1975
  const id = generateUniqueId('link');
1976
1976
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${id}-wrapper` }), children));
1977
- };
1978
-
1979
- const dash = styled.keyframes `
1980
- 0% {
1981
- stroke-dasharray: 1, 160;
1982
- stroke-dashoffset: 0;
1983
- }
1984
- 50% {
1985
- stroke-dasharray: 80, 160;
1986
- stroke-dashoffset: -32;
1987
- }
1988
- 100% {
1989
- stroke-dasharray: 80, 160;
1990
- stroke-dashoffset: -124;
1991
- }
1992
- `;
1993
- const Spinner = styled.svg `
1994
- z-index: 2;
1995
- position: absolute;
1996
- top: 50%;
1997
- left: 50%;
1998
- transform: translate(-50%, -50%);
1999
- margin: 0 auto;
2000
- width: 40px;
2001
- height: 40px;
2002
- `;
2003
- const Path = styled.path `
2004
- stroke: #0193d7;
2005
- stroke-linecap: round;
2006
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2007
- animation: ${dash} 1.1s ease-in-out infinite;
1977
+ };
1978
+
1979
+ const dash = styled.keyframes `
1980
+ 0% {
1981
+ stroke-dasharray: 1, 160;
1982
+ stroke-dashoffset: 0;
1983
+ }
1984
+ 50% {
1985
+ stroke-dasharray: 80, 160;
1986
+ stroke-dashoffset: -32;
1987
+ }
1988
+ 100% {
1989
+ stroke-dasharray: 80, 160;
1990
+ stroke-dashoffset: -124;
1991
+ }
1992
+ `;
1993
+ const Spinner = styled.svg `
1994
+ z-index: 2;
1995
+ position: absolute;
1996
+ top: 50%;
1997
+ left: 50%;
1998
+ transform: translate(-50%, -50%);
1999
+ margin: 0 auto;
2000
+ width: 40px;
2001
+ height: 40px;
2002
+ `;
2003
+ const Path = styled.path `
2004
+ stroke: #0193d7;
2005
+ stroke-linecap: round;
2006
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2007
+ animation: ${dash} 1.1s ease-in-out infinite;
2008
2008
  `;
2009
2009
  const Loader = () => {
2010
2010
  const id = generateUniqueId('loader');
2011
2011
  return (React.createElement(Spinner, { id: `${id}-spinner`, viewBox: '0 0 16 18' },
2012
2012
  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', id: `${id}-path`, strokeWidth: '2' })));
2013
- };
2014
-
2015
- const Steps = styled.div `
2016
- padding: 20px;
2017
- border-bottom: 1px solid #e7e6e6;
2018
- background: #f5f5f5;
2019
- display: flex;
2020
- gap: 30px;
2021
- align-items: center;
2022
- `;
2023
- const Step = styled.div `
2024
- display: flex;
2025
- align-items: center;
2026
- gap: 8px;
2027
- `;
2028
- const StyledIcon$2 = styled(Icon) `
2029
- > path {
2030
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2031
- }
2013
+ };
2014
+
2015
+ const Steps = styled.div `
2016
+ padding: 20px;
2017
+ border-bottom: 1px solid #e7e6e6;
2018
+ background: #f5f5f5;
2019
+ display: flex;
2020
+ gap: 30px;
2021
+ align-items: center;
2022
+ `;
2023
+ const Step = styled.div `
2024
+ display: flex;
2025
+ align-items: center;
2026
+ gap: 8px;
2027
+ `;
2028
+ const StyledIcon$2 = styled(Icon) `
2029
+ > path {
2030
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2031
+ }
2032
2032
  `;
2033
2033
  StyledIcon$2.defaultProps = { theme: EditableTheme };
2034
- const StepIndicator = styled.div `
2035
- width: 30px;
2036
- height: 30px;
2037
- border-radius: 15px;
2038
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2039
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2040
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2041
- font-size: 14px;
2042
- font-weight: 500;
2043
- line-height: 1;
2044
- display: flex;
2045
- align-items: center;
2046
- justify-content: center;
2047
- flex-shrink: 0;
2034
+ const StepIndicator = styled.div `
2035
+ width: 30px;
2036
+ height: 30px;
2037
+ border-radius: 15px;
2038
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2039
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2040
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2041
+ font-size: 14px;
2042
+ font-weight: 500;
2043
+ line-height: 1;
2044
+ display: flex;
2045
+ align-items: center;
2046
+ justify-content: center;
2047
+ flex-shrink: 0;
2048
2048
  `;
2049
2049
  StepIndicator.defaultProps = { theme: EditableTheme };
2050
- const StepLabel = styled.div `
2051
- color: #000;
2052
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2053
- font-size: 14px;
2054
- font-weight: 500;
2055
- line-height: 1;
2056
- `;
2057
- const StepLine = styled.div `
2058
- height: 2px;
2059
- flex-grow: 1;
2060
- background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2061
- transition: background-color 0.5s ease-in-out;
2050
+ const StepLabel = styled.div `
2051
+ color: #000;
2052
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2053
+ font-size: 14px;
2054
+ font-weight: 500;
2055
+ line-height: 1;
2056
+ `;
2057
+ const StepLine = styled.div `
2058
+ height: 2px;
2059
+ flex-grow: 1;
2060
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2061
+ transition: background-color 0.5s ease-in-out;
2062
2062
  `;
2063
2063
  const ProgressBar = ({ steps, showStepLine = false }) => {
2064
2064
  const id = generateUniqueId('progress-bar');
@@ -2070,78 +2070,78 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
2070
2070
  step.complete ? (React.createElement(StyledIcon$2, { id: `${stepId}-icon`, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, id: `${stepId}-indicator` }, i + 1)),
2071
2071
  React.createElement(StepLabel, { id: `${stepId}-label` }, step.label))));
2072
2072
  })));
2073
- };
2074
-
2075
- const Wrapper$6 = styled.div `
2076
- position: fixed;
2077
- top: 0;
2078
- right: 0;
2079
- bottom: 0;
2080
- left: 0;
2081
- z-index: 9999;
2082
- background: rgba(0, 0, 0, 0.8);
2083
- display: flex;
2084
- align-items: center;
2085
- justify-content: center;
2086
- `;
2087
- const Container$1 = styled.dialog `
2088
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2089
- max-width: calc(100vw - 80px);
2090
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2091
- max-height: calc(100vh - 80px);
2092
- border-radius: 8px;
2093
- overflow: hidden;
2094
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2095
- outline: none;
2096
- border: none;
2097
- position: relative;
2098
- padding: 0px;
2099
- box-sizing: border-box;
2100
- display: flex;
2101
- flex-direction: column;
2102
- `;
2103
- const Header$1 = styled.div `
2104
- flex-shrink: 0;
2105
- padding: 20px;
2106
- border-bottom: 1px solid #e7e6e6;
2107
- display: flex;
2108
- align-items: center;
2109
- background: #ffffff;
2110
- box-sizing: border-box;
2111
- `;
2112
- const Close = styled.div `
2113
- margin-left: auto;
2114
- display: flex;
2115
- align-items: center;
2116
- padding-left: 20px;
2117
- cursor: pointer;
2118
- `;
2119
- const CloseMsg = styled.span `
2120
- font-size: ${FontSizes.SMALL};
2121
- font-weight: 400;
2122
- font-family: ${FontStyles.DEFAULT};
2123
- line-height: 1em;
2124
- color: ${Colors.MEDIUM_GRAY.Hex};
2125
- `;
2126
- const ContentWrapper = styled.div `
2127
- overflow-x: hidden;
2128
- overflow-y: auto;
2129
- background: #ffffff;
2130
- flex: 1;
2131
- box-sizing: border-box;
2132
- `;
2133
- const ButtonBar = styled.div `
2134
- flex-shrink: 0;
2135
- background: #ffffff;
2136
- padding: 20px;
2137
- border-top: 1px solid #e7e6e6;
2138
- display: flex;
2139
- align-items: center;
2140
- justify-self: flex-end;
2141
- box-sizing: border-box;
2142
- `;
2143
- const ButtonContainer = styled.div `
2144
- margin: 0 10px;
2073
+ };
2074
+
2075
+ const Wrapper$6 = styled.div `
2076
+ position: fixed;
2077
+ top: 0;
2078
+ right: 0;
2079
+ bottom: 0;
2080
+ left: 0;
2081
+ z-index: 9999;
2082
+ background: rgba(0, 0, 0, 0.8);
2083
+ display: flex;
2084
+ align-items: center;
2085
+ justify-content: center;
2086
+ `;
2087
+ const Container$1 = styled.dialog `
2088
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2089
+ max-width: calc(100vw - 80px);
2090
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2091
+ max-height: calc(100vh - 80px);
2092
+ border-radius: 8px;
2093
+ overflow: hidden;
2094
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2095
+ outline: none;
2096
+ border: none;
2097
+ position: relative;
2098
+ padding: 0px;
2099
+ box-sizing: border-box;
2100
+ display: flex;
2101
+ flex-direction: column;
2102
+ `;
2103
+ const Header$1 = styled.div `
2104
+ flex-shrink: 0;
2105
+ padding: 20px;
2106
+ border-bottom: 1px solid #e7e6e6;
2107
+ display: flex;
2108
+ align-items: center;
2109
+ background: #ffffff;
2110
+ box-sizing: border-box;
2111
+ `;
2112
+ const Close = styled.div `
2113
+ margin-left: auto;
2114
+ display: flex;
2115
+ align-items: center;
2116
+ padding-left: 20px;
2117
+ cursor: pointer;
2118
+ `;
2119
+ const CloseMsg = styled.span `
2120
+ font-size: ${FontSizes.SMALL};
2121
+ font-weight: 400;
2122
+ font-family: ${FontStyles.DEFAULT};
2123
+ line-height: 1em;
2124
+ color: ${Colors.MEDIUM_GRAY.Hex};
2125
+ `;
2126
+ const ContentWrapper = styled.div `
2127
+ overflow-x: hidden;
2128
+ overflow-y: auto;
2129
+ background: #ffffff;
2130
+ flex: 1;
2131
+ box-sizing: border-box;
2132
+ `;
2133
+ const ButtonBar = styled.div `
2134
+ flex-shrink: 0;
2135
+ background: #ffffff;
2136
+ padding: 20px;
2137
+ border-top: 1px solid #e7e6e6;
2138
+ display: flex;
2139
+ align-items: center;
2140
+ justify-self: flex-end;
2141
+ box-sizing: border-box;
2142
+ `;
2143
+ const ButtonContainer = styled.div `
2144
+ margin: 0 10px;
2145
2145
  `;
2146
2146
  const Modal = (_a) => {
2147
2147
  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"]);
@@ -2184,21 +2184,21 @@ const Modal = (_a) => {
2184
2184
  secondaryButton ? (React.createElement(ButtonContainer, { id: `${id}-secondary-button-container` },
2185
2185
  React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` })))) : null,
2186
2186
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)) : null)));
2187
- };
2188
-
2189
- const Wrapper$5 = styled.div `
2190
- position: relative;
2191
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2192
- `;
2193
- const Trigger = styled.div `
2194
- box-sizing: border-box;
2195
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2196
- height: 40px;
2197
- padding: 0 10px;
2198
- position: relative;
2199
- cursor: pointer;
2200
- border-width: 1px;
2201
- border-style: solid;
2187
+ };
2188
+
2189
+ const Wrapper$5 = styled.div `
2190
+ position: relative;
2191
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2192
+ `;
2193
+ const Trigger = styled.div `
2194
+ box-sizing: border-box;
2195
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2196
+ height: 40px;
2197
+ padding: 0 10px;
2198
+ position: relative;
2199
+ cursor: pointer;
2200
+ border-width: 1px;
2201
+ border-style: solid;
2202
2202
  border-color: ${props => {
2203
2203
  if (props.$invalid) {
2204
2204
  return Colors.RED.Hex;
@@ -2209,67 +2209,67 @@ const Trigger = styled.div `
2209
2209
  else {
2210
2210
  return '#cccccc';
2211
2211
  }
2212
- }};
2213
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2214
- background-image: none;
2215
- display: flex;
2216
- width: 100%;
2217
- align-items: center;
2218
- justify-content: space-between;
2219
- z-index: 1;
2212
+ }};
2213
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2214
+ background-image: none;
2215
+ display: flex;
2216
+ width: 100%;
2217
+ align-items: center;
2218
+ justify-content: space-between;
2219
+ z-index: 1;
2220
2220
  `;
2221
2221
  Trigger.defaultProps = { theme: EditableTheme };
2222
- const Value = styled.div `
2223
- color: ${Colors.BLACK.Hex};
2224
- font-family: ${FontStyles.DEFAULT};
2225
- font-size: ${FontSizes.DEFAULT};
2226
- font-weight: 400;
2227
- line-height: 2.9em;
2228
- overflow: hidden;
2229
- text-overflow: ellipsis;
2230
- white-space: nowrap;
2231
- width: 100%;
2232
- `;
2233
- const Options = styled.div `
2234
- background: #fff;
2235
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2236
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2237
- border-radius: 0px 0px 4px 4px;
2238
- border-style: solid;
2239
- border-top: none;
2240
- border-width: 1px;
2241
- left: 0;
2242
- position: absolute;
2243
- right: 0;
2244
- z-index: 10;
2245
- max-height: 220px;
2246
- overflow: auto;
2222
+ const Value = styled.div `
2223
+ color: ${Colors.BLACK.Hex};
2224
+ font-family: ${FontStyles.DEFAULT};
2225
+ font-size: ${FontSizes.DEFAULT};
2226
+ font-weight: 400;
2227
+ line-height: 2.9em;
2228
+ overflow: hidden;
2229
+ text-overflow: ellipsis;
2230
+ white-space: nowrap;
2231
+ width: 100%;
2232
+ `;
2233
+ const Options = styled.div `
2234
+ background: #fff;
2235
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2236
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2237
+ border-radius: 0px 0px 4px 4px;
2238
+ border-style: solid;
2239
+ border-top: none;
2240
+ border-width: 1px;
2241
+ left: 0;
2242
+ position: absolute;
2243
+ right: 0;
2244
+ z-index: 10;
2245
+ max-height: 220px;
2246
+ overflow: auto;
2247
2247
  `;
2248
2248
  Options.defaultProps = { theme: EditableTheme };
2249
- const Scrim = styled.div `
2250
- bottom: 0;
2251
- left: 0;
2252
- position: fixed;
2253
- right: 0;
2254
- top: 0;
2255
- z-index: 9;
2256
- `;
2257
- const SearchInput = styled.input `
2258
- position: absolute;
2259
- left: 2px;
2260
- top: 2px;
2261
- z-index: 999;
2262
- width: 90%;
2263
- height: 30px;
2264
- border: none;
2265
- outline: none;
2266
- color: ${Colors.BLACK.Hex};
2267
- font-family: ${FontStyles.DEFAULT};
2268
- font-size: ${FontSizes.DEFAULT};
2269
- font-weight: 400;
2270
- line-height: 2.9em;
2271
- overflow: hidden;
2272
- white-space: nowrap;
2249
+ const Scrim = styled.div `
2250
+ bottom: 0;
2251
+ left: 0;
2252
+ position: fixed;
2253
+ right: 0;
2254
+ top: 0;
2255
+ z-index: 9;
2256
+ `;
2257
+ const SearchInput = styled.input `
2258
+ position: absolute;
2259
+ left: 2px;
2260
+ top: 2px;
2261
+ z-index: 999;
2262
+ width: 90%;
2263
+ height: 30px;
2264
+ border: none;
2265
+ outline: none;
2266
+ color: ${Colors.BLACK.Hex};
2267
+ font-family: ${FontStyles.DEFAULT};
2268
+ font-size: ${FontSizes.DEFAULT};
2269
+ font-weight: 400;
2270
+ line-height: 2.9em;
2271
+ overflow: hidden;
2272
+ white-space: nowrap;
2273
2273
  `;
2274
2274
  const MultiSelect = (_a) => {
2275
2275
  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"]);
@@ -2289,37 +2289,37 @@ const MultiSelect = (_a) => {
2289
2289
  showOptions ? (React.createElement(Options, { id: `${id}-options` },
2290
2290
  React.createElement(Checklist, { id: `${id}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2291
2291
  showOptions ? (React.createElement(Scrim, { id: `${id}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
2292
- };
2293
-
2294
- const Wrapper$4 = styled.div `
2295
- display: flex;
2296
- padding: 16px 30px;
2297
- align-items: center;
2298
- gap: 20px;
2299
- align-self: stretch;
2300
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2301
- `;
2302
- const Title = styled.div `
2303
- display: flex;
2304
- align-items: center;
2305
- gap: 20px;
2306
- `;
2307
- const Info = styled.div `
2308
- display: flex;
2309
- flex-direction: column;
2310
- align-items: flex-start;
2311
- gap: 4px;
2312
- flex: 1 0 0;
2313
- `;
2314
- const Breadcrumbs = styled.div `
2315
- display: flex;
2316
- align-items: center;
2317
- gap: 4px;
2318
- `;
2319
- const Actions = styled.div `
2320
- display: flex;
2321
- align-items: center;
2322
- gap: 8px;
2292
+ };
2293
+
2294
+ const Wrapper$4 = styled.div `
2295
+ display: flex;
2296
+ padding: 16px 30px;
2297
+ align-items: center;
2298
+ gap: 20px;
2299
+ align-self: stretch;
2300
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2301
+ `;
2302
+ const Title = styled.div `
2303
+ display: flex;
2304
+ align-items: center;
2305
+ gap: 20px;
2306
+ `;
2307
+ const Info = styled.div `
2308
+ display: flex;
2309
+ flex-direction: column;
2310
+ align-items: flex-start;
2311
+ gap: 4px;
2312
+ flex: 1 0 0;
2313
+ `;
2314
+ const Breadcrumbs = styled.div `
2315
+ display: flex;
2316
+ align-items: center;
2317
+ gap: 4px;
2318
+ `;
2319
+ const Actions = styled.div `
2320
+ display: flex;
2321
+ align-items: center;
2322
+ gap: 8px;
2323
2323
  `;
2324
2324
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2325
2325
  const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, } = buttonMenu || {};
@@ -2342,13 +2342,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2342
2342
  return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
2343
2343
  }),
2344
2344
  menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
2345
- };
2346
-
2347
- const Wrapper$3 = styled.nav `
2348
- box-sizing: border-box;
2349
- display: flex;
2350
- align-items: center;
2351
- column-gap: 10px;
2345
+ };
2346
+
2347
+ const Wrapper$3 = styled.nav `
2348
+ box-sizing: border-box;
2349
+ display: flex;
2350
+ align-items: center;
2351
+ column-gap: 10px;
2352
2352
  `;
2353
2353
  const Pagination = (_a) => {
2354
2354
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2378,82 +2378,82 @@ const Pagination = (_a) => {
2378
2378
  value: `${p}`,
2379
2379
  })), value: `${currentPage}` }),
2380
2380
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, id: `${id}-next-button`, onClick: handleNextClick, small: true })));
2381
- };
2382
-
2383
- const Wrapper$2 = styled.label `
2384
- border-radius: 4px;
2385
- padding: 4px 0px 4px 6px;
2386
- margin-left: -6px;
2387
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2388
- display: flex;
2389
- align-items: center;
2390
- font-size: ${FontSizes.DEFAULT};
2391
- line-height: 1.6em;
2392
- box-sizing: border-box;
2393
- position: relative;
2394
-
2395
- &:focus-within {
2396
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2397
- }
2381
+ };
2382
+
2383
+ const Wrapper$2 = styled.label `
2384
+ border-radius: 4px;
2385
+ padding: 4px 0px 4px 6px;
2386
+ margin-left: -6px;
2387
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2388
+ display: flex;
2389
+ align-items: center;
2390
+ font-size: ${FontSizes.DEFAULT};
2391
+ line-height: 1.6em;
2392
+ box-sizing: border-box;
2393
+ position: relative;
2394
+
2395
+ &:focus-within {
2396
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2397
+ }
2398
2398
  `;
2399
2399
  Wrapper$2.defaultProps = { theme: EditableTheme };
2400
- const Input = styled.input `
2401
- font-size: 20px;
2402
- margin: 0px;
2403
- line-height: 1.6em;
2404
- box-sizing: border-box;
2405
- position: absolute;
2406
- opacity: 0;
2407
- cursor: pointer;
2408
- height: 0;
2409
- width: 0;
2410
- &:checked + span {
2411
- border-color: ${Colors.PRIMARY.Hex};
2412
- }
2413
- &:checked + span:after {
2414
- background-color: ${Colors.PRIMARY.Hex};
2415
- display: block;
2416
- }
2417
- &:disabled + span {
2418
- background-color: #d3d3d3;
2419
- border-color: #d3d3d3;
2420
- }
2421
- &:disabled + span:after {
2422
- background-color: #fff;
2423
- }
2424
- &:checked:disabled + span:after {
2425
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2426
- }
2427
- `;
2428
- const Check = styled.span `
2429
- height: 17px;
2430
- width: 17px;
2431
- border-radius: 50%;
2432
- background-color: #fff;
2433
- border-width: 2px;
2434
- border-style: solid;
2435
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2436
- box-sizing: border-box;
2437
- position: relative;
2438
- &:after {
2439
- content: '';
2440
- position: absolute;
2441
- top: 2px;
2442
- left: 2px;
2443
- width: 9px;
2444
- height: 9px;
2445
- border-radius: 50%;
2446
- box-sizing: border-box;
2447
- display: none;
2448
- }
2449
- `;
2450
- const Label = styled.span `
2451
- font-family: ${FontStyles.DEFAULT};
2452
- font-size: ${FontSizes.DEFAULT};
2453
- font-weight: 400;
2454
- color: ${Colors.BLACK.Hex};
2455
- line-height: 1.6em;
2456
- margin-left: 6px;
2400
+ const Input = styled.input `
2401
+ font-size: 20px;
2402
+ margin: 0px;
2403
+ line-height: 1.6em;
2404
+ box-sizing: border-box;
2405
+ position: absolute;
2406
+ opacity: 0;
2407
+ cursor: pointer;
2408
+ height: 0;
2409
+ width: 0;
2410
+ &:checked + span {
2411
+ border-color: ${Colors.PRIMARY.Hex};
2412
+ }
2413
+ &:checked + span:after {
2414
+ background-color: ${Colors.PRIMARY.Hex};
2415
+ display: block;
2416
+ }
2417
+ &:disabled + span {
2418
+ background-color: #d3d3d3;
2419
+ border-color: #d3d3d3;
2420
+ }
2421
+ &:disabled + span:after {
2422
+ background-color: #fff;
2423
+ }
2424
+ &:checked:disabled + span:after {
2425
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2426
+ }
2427
+ `;
2428
+ const Check = styled.span `
2429
+ height: 17px;
2430
+ width: 17px;
2431
+ border-radius: 50%;
2432
+ background-color: #fff;
2433
+ border-width: 2px;
2434
+ border-style: solid;
2435
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2436
+ box-sizing: border-box;
2437
+ position: relative;
2438
+ &:after {
2439
+ content: '';
2440
+ position: absolute;
2441
+ top: 2px;
2442
+ left: 2px;
2443
+ width: 9px;
2444
+ height: 9px;
2445
+ border-radius: 50%;
2446
+ box-sizing: border-box;
2447
+ display: none;
2448
+ }
2449
+ `;
2450
+ const Label = styled.span `
2451
+ font-family: ${FontStyles.DEFAULT};
2452
+ font-size: ${FontSizes.DEFAULT};
2453
+ font-weight: 400;
2454
+ color: ${Colors.BLACK.Hex};
2455
+ line-height: 1.6em;
2456
+ margin-left: 6px;
2457
2457
  `;
2458
2458
  const Radio = (_a) => {
2459
2459
  var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex"]);
@@ -2464,77 +2464,77 @@ const Radio = (_a) => {
2464
2464
  React.createElement(Label, { id: `${id}-label` },
2465
2465
  children,
2466
2466
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2467
- };
2468
-
2467
+ };
2468
+
2469
2469
  const RadioList = (_a) => {
2470
2470
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2471
2471
  return (React.createElement(React.Fragment, null, options.map((option) => {
2472
2472
  const label = option.label || option.value;
2473
2473
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2474
2474
  })));
2475
- };
2476
-
2477
- const StyledTable = styled.table `
2478
- width: 100%;
2479
- margin-top: 1px;
2480
- table-layout: ${props => props.$tableLayout || 'auto'};
2481
- border-collapse: collapse;
2482
- text-indent: 0px;
2483
- border-spacing: 0px;
2484
- border-color: none;
2485
- box-sizing: border-box;
2486
- `;
2487
- const Header = styled.th `
2488
- padding: 12px !important;
2489
- text-align: left;
2490
- font-weight: 500;
2491
- border-bottom: 1px solid #e5e5e5;
2492
- border-top: 1px solid #e5e5e5;
2493
- text-transform: uppercase;
2494
- font-size: 12px;
2495
- font-family: ${FontStyles.DEFAULT};
2496
- letter-spacing: 1px;
2497
- white-space: nowrap;
2498
- line-height: 1;
2499
- position: relative;
2500
- box-sizing: border-box;
2501
- width: ${props => props.$width || 'auto'};
2502
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2503
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2475
+ };
2476
+
2477
+ const StyledTable = styled.table `
2478
+ width: 100%;
2479
+ margin-top: 1px;
2480
+ table-layout: ${props => props.$tableLayout || 'auto'};
2481
+ border-collapse: collapse;
2482
+ text-indent: 0px;
2483
+ border-spacing: 0px;
2484
+ border-color: none;
2485
+ box-sizing: border-box;
2486
+ `;
2487
+ const Header = styled.th `
2488
+ padding: 12px !important;
2489
+ text-align: left;
2490
+ font-weight: 500;
2491
+ border-bottom: 1px solid #e5e5e5;
2492
+ border-top: 1px solid #e5e5e5;
2493
+ text-transform: uppercase;
2494
+ font-size: 12px;
2495
+ font-family: ${FontStyles.DEFAULT};
2496
+ letter-spacing: 1px;
2497
+ white-space: nowrap;
2498
+ line-height: 1;
2499
+ position: relative;
2500
+ box-sizing: border-box;
2501
+ width: ${props => props.$width || 'auto'};
2502
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2503
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2504
2504
  `;
2505
2505
  Header.defaultProps = { theme: EditableTheme };
2506
- const Row = styled.tr `
2507
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2508
- transition: all 0.2s;
2509
- background-color: ${props => props.$bgColor};
2510
- box-sizing: border-box;
2511
- &:hover {
2512
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2513
- }
2506
+ const Row = styled.tr `
2507
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2508
+ transition: all 0.2s;
2509
+ background-color: ${props => props.$bgColor};
2510
+ box-sizing: border-box;
2511
+ &:hover {
2512
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2513
+ }
2514
2514
  `;
2515
2515
  Row.defaultProps = { theme: EditableTheme };
2516
- const Column = styled.td `
2517
- padding: 16px 12px !important;
2518
- font-size: ${FontSizes.DEFAULT} !important;
2519
- font-weight: 400 !important;
2520
- font-family: ${FontStyles.DEFAULT};
2521
- border: none !important;
2522
- word-break: break-word;
2523
- line-height: 1.4em;
2524
- box-sizing: border-box;
2525
- text-align: ${props => props.$align || 'left'};
2526
- width: ${props => props.$width || 'auto'};
2527
- `;
2528
- const IconWrapper = styled.span `
2529
- position: absolute;
2530
- top: 50%;
2531
- transform: translateY(-50%);
2532
- margin-left: 2px;
2533
- `;
2534
- const StyledIcon$1 = styled(Icon) `
2535
- > path {
2536
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2537
- }
2516
+ const Column = styled.td `
2517
+ padding: 16px 12px !important;
2518
+ font-size: ${FontSizes.DEFAULT} !important;
2519
+ font-weight: 400 !important;
2520
+ font-family: ${FontStyles.DEFAULT};
2521
+ border: none !important;
2522
+ word-break: break-word;
2523
+ line-height: 1.4em;
2524
+ box-sizing: border-box;
2525
+ text-align: ${props => props.$align || 'left'};
2526
+ width: ${props => props.$width || 'auto'};
2527
+ `;
2528
+ const IconWrapper = styled.span `
2529
+ position: absolute;
2530
+ top: 50%;
2531
+ transform: translateY(-50%);
2532
+ margin-left: 2px;
2533
+ `;
2534
+ const StyledIcon$1 = styled(Icon) `
2535
+ > path {
2536
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2537
+ }
2538
2538
  `;
2539
2539
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2540
2540
  const Table = (_a) => {
@@ -2556,55 +2556,55 @@ const Table = (_a) => {
2556
2556
  return (React.createElement(Column, { "$align": columns[j].align, "$width": columns[j].width, id: `${columnId}-column`, key: j }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2557
2557
  })));
2558
2558
  }))) : null));
2559
- };
2560
-
2561
- const Wrapper$1 = styled.div `
2562
- display: flex;
2563
- box-sizing: border-box;
2564
- align-items: flex-end;
2565
- border-top: 1px solid #e5e5e5;
2566
- border-bottom: 1px solid #e5e5e5;
2567
- flex-shrink: 0;
2568
- align-self: stretch;
2569
- padding: 0;
2570
- margin: 0;
2571
- `;
2572
- const Tab = styled.div `
2573
- display: flex;
2574
- align-items: center;
2575
- gap: 6px;
2576
- font-size: ${FontSizes.DEFAULT};
2577
- font-family: ${FontStyles.DEFAULT};
2578
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2579
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2580
- line-height: 1em;
2581
- padding: 16px 30px 12px;
2582
- margin: 0 0 -1px 0;
2583
- border-bottom-width: 4px;
2584
- border-bottom-style: solid;
2585
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2586
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2587
- box-sizing: border-box;
2588
- &:hover {
2589
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2590
- font-weight: 500;
2591
- }
2559
+ };
2560
+
2561
+ const Wrapper$1 = styled.div `
2562
+ display: flex;
2563
+ box-sizing: border-box;
2564
+ align-items: flex-end;
2565
+ border-top: 1px solid #e5e5e5;
2566
+ border-bottom: 1px solid #e5e5e5;
2567
+ flex-shrink: 0;
2568
+ align-self: stretch;
2569
+ padding: 0;
2570
+ margin: 0;
2571
+ `;
2572
+ const Tab = styled.div `
2573
+ display: flex;
2574
+ align-items: center;
2575
+ gap: 6px;
2576
+ font-size: ${FontSizes.DEFAULT};
2577
+ font-family: ${FontStyles.DEFAULT};
2578
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2579
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2580
+ line-height: 1em;
2581
+ padding: 16px 30px 12px;
2582
+ margin: 0 0 -1px 0;
2583
+ border-bottom-width: 4px;
2584
+ border-bottom-style: solid;
2585
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2586
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2587
+ box-sizing: border-box;
2588
+ &:hover {
2589
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2590
+ font-weight: 500;
2591
+ }
2592
2592
  `;
2593
2593
  Tab.defaultProps = { theme: EditableTheme };
2594
- const Badge = styled.div `
2595
- display: flex;
2596
- width: 18px;
2597
- height: 18px;
2598
- justify-content: center;
2599
- align-items: center;
2600
- border-radius: 9px;
2601
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2602
- color: #fff;
2603
- font-family: ${FontStyles.DEFAULT};
2604
- font-size: 12px;
2605
- font-weight: 500;
2606
- line-height: 1;
2607
- letter-spacing: 1px;
2594
+ const Badge = styled.div `
2595
+ display: flex;
2596
+ width: 18px;
2597
+ height: 18px;
2598
+ justify-content: center;
2599
+ align-items: center;
2600
+ border-radius: 9px;
2601
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2602
+ color: #fff;
2603
+ font-family: ${FontStyles.DEFAULT};
2604
+ font-size: 12px;
2605
+ font-weight: 500;
2606
+ line-height: 1;
2607
+ letter-spacing: 1px;
2608
2608
  `;
2609
2609
  Badge.defaultProps = { theme: EditableTheme };
2610
2610
  const Tabs = (_a) => {
@@ -2618,29 +2618,29 @@ const Tabs = (_a) => {
2618
2618
  label));
2619
2619
  })));
2620
2620
  };
2621
- Tabs.defaultProps = {};
2622
-
2623
- const Track = styled.div `
2624
- height: 24px;
2625
- border-radius: 12px;
2626
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2627
- display: flex;
2628
- align-items: center;
2629
- cursor: pointer;
2630
- width: 40px;
2631
- padding: 2px;
2632
- box-sizing: border-box;
2633
- `;
2634
- const Handle = styled.div `
2635
- width: 20px;
2636
- height: 20px;
2637
- border-radius: 10px;
2638
- background: #ffffff;
2639
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2640
- display: flex;
2641
- align-items: center;
2642
- justify-content: center;
2643
- box-sizing: border-box;
2621
+ Tabs.defaultProps = {};
2622
+
2623
+ const Track = styled.div `
2624
+ height: 24px;
2625
+ border-radius: 12px;
2626
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2627
+ display: flex;
2628
+ align-items: center;
2629
+ cursor: pointer;
2630
+ width: 40px;
2631
+ padding: 2px;
2632
+ box-sizing: border-box;
2633
+ `;
2634
+ const Handle = styled.div `
2635
+ width: 20px;
2636
+ height: 20px;
2637
+ border-radius: 10px;
2638
+ background: #ffffff;
2639
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2640
+ display: flex;
2641
+ align-items: center;
2642
+ justify-content: center;
2643
+ box-sizing: border-box;
2644
2644
  `;
2645
2645
  const Toggle = (_a) => {
2646
2646
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2650,32 +2650,32 @@ const Toggle = (_a) => {
2650
2650
  React.createElement(Handle, { "$on": on, id: `${id}-handle` },
2651
2651
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${id}-icon`, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2652
2652
  };
2653
- Toggle.defaultProps = {};
2654
-
2655
- const Container = styled.div `
2656
- width: 100%;
2657
- padding: 40px auto;
2658
- gap: 20px;
2659
- display: flex;
2660
- flex-direction: column;
2661
- justify-items: center;
2662
- align-items: center;
2663
- `;
2664
- const Wrapper = styled.div `
2665
- gap: 10px;
2666
- display: flex;
2667
- flex-direction: column;
2668
- justify-items: center;
2669
- align-items: center;
2670
- `;
2671
- const StyledIcon = styled.div `
2672
- display: flex;
2673
- align-items: center;
2674
- justify-content: center;
2675
- width: 80px;
2676
- height: 80px;
2677
- border-radius: 40px;
2678
- background: #f5f5f5;
2653
+ Toggle.defaultProps = {};
2654
+
2655
+ const Container = styled.div `
2656
+ width: 100%;
2657
+ padding: 40px auto;
2658
+ gap: 20px;
2659
+ display: flex;
2660
+ flex-direction: column;
2661
+ justify-items: center;
2662
+ align-items: center;
2663
+ `;
2664
+ const Wrapper = styled.div `
2665
+ gap: 10px;
2666
+ display: flex;
2667
+ flex-direction: column;
2668
+ justify-items: center;
2669
+ align-items: center;
2670
+ `;
2671
+ const StyledIcon = styled.div `
2672
+ display: flex;
2673
+ align-items: center;
2674
+ justify-content: center;
2675
+ width: 80px;
2676
+ height: 80px;
2677
+ border-radius: 40px;
2678
+ background: #f5f5f5;
2679
2679
  `;
2680
2680
  const ZeroState = (_a) => {
2681
2681
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2687,53 +2687,53 @@ const ZeroState = (_a) => {
2687
2687
  React.createElement(Heading, { children: title, id: `${id}-heading`, type: 'tertiary' }),
2688
2688
  description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${id}-description`, type: 'default' }))),
2689
2689
  action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${id}-button`, onClick: action.onClick }))));
2690
- };
2691
-
2692
- exports.Accordion = Accordion;
2693
- exports.ActionDialog = ActionDialog;
2694
- exports.Alert = Alert;
2695
- exports.AppHeader = AppHeader;
2696
- exports.AppMenu = AppMenu;
2697
- exports.BulkActionBar = BulkActionBar;
2698
- exports.Button = Button;
2699
- exports.ButtonMenu = ButtonMenu;
2700
- exports.Checkbox = Checkbox;
2701
- exports.Checklist = Checklist;
2702
- exports.Colors = Colors;
2703
- exports.Copy = Copy;
2704
- exports.DatePicker = DatePicker;
2705
- exports.Drawer = Drawer;
2706
- exports.EditableTheme = EditableTheme;
2707
- exports.Field = Field;
2708
- exports.FieldGroup = FieldGroup;
2709
- exports.FileUpload = FileUpload;
2710
- exports.FontSizes = FontSizes;
2711
- exports.FontStyles = FontStyles;
2712
- exports.Heading = Heading;
2713
- exports.Input = Input$1;
2714
- exports.Link = Link;
2715
- exports.Loader = Loader;
2716
- exports.Logo = Logo;
2717
- exports.Modal = Modal;
2718
- exports.MoreMenu = MoreMenu;
2719
- exports.MultiSelect = MultiSelect;
2720
- exports.PageHeader = PageHeader;
2721
- exports.Pagination = Pagination;
2722
- exports.ProgressBar = ProgressBar;
2723
- exports.Radio = Radio;
2724
- exports.RadioList = RadioList;
2725
- exports.Select = Select;
2726
- exports.Table = Table;
2727
- exports.Tabs = Tabs;
2728
- exports.Tag = Tag;
2729
- exports.Toggle = Toggle;
2730
- exports.Tooltip = Tooltip;
2731
- exports.ZeroState = ZeroState;
2732
- exports.formatAsPhone = formatAsPhone;
2733
- exports.formatAsSsn = formatAsSsn;
2734
- exports.getAgesFromDob = getAgesFromDob;
2735
- exports.getDaysForMonth = getDaysForMonth;
2736
- exports.getYears = getYears;
2737
- exports.validateEmail = validateEmail;
2738
- exports.validatePhone = validatePhone;
2739
- //# sourceMappingURL=index.js.map
2690
+ };
2691
+
2692
+ exports.Accordion = Accordion;
2693
+ exports.ActionDialog = ActionDialog;
2694
+ exports.Alert = Alert;
2695
+ exports.AppHeader = AppHeader;
2696
+ exports.AppMenu = AppMenu;
2697
+ exports.BulkActionBar = BulkActionBar;
2698
+ exports.Button = Button;
2699
+ exports.ButtonMenu = ButtonMenu;
2700
+ exports.Checkbox = Checkbox;
2701
+ exports.Checklist = Checklist;
2702
+ exports.Colors = Colors;
2703
+ exports.Copy = Copy;
2704
+ exports.DatePicker = DatePicker;
2705
+ exports.Drawer = Drawer;
2706
+ exports.EditableTheme = EditableTheme;
2707
+ exports.Field = Field;
2708
+ exports.FieldGroup = FieldGroup;
2709
+ exports.FileUpload = FileUpload;
2710
+ exports.FontSizes = FontSizes;
2711
+ exports.FontStyles = FontStyles;
2712
+ exports.Heading = Heading;
2713
+ exports.Input = Input$1;
2714
+ exports.Link = Link;
2715
+ exports.Loader = Loader;
2716
+ exports.Logo = Logo;
2717
+ exports.Modal = Modal;
2718
+ exports.MoreMenu = MoreMenu;
2719
+ exports.MultiSelect = MultiSelect;
2720
+ exports.PageHeader = PageHeader;
2721
+ exports.Pagination = Pagination;
2722
+ exports.ProgressBar = ProgressBar;
2723
+ exports.Radio = Radio;
2724
+ exports.RadioList = RadioList;
2725
+ exports.Select = Select;
2726
+ exports.Table = Table;
2727
+ exports.Tabs = Tabs;
2728
+ exports.Tag = Tag;
2729
+ exports.Toggle = Toggle;
2730
+ exports.Tooltip = Tooltip;
2731
+ exports.ZeroState = ZeroState;
2732
+ exports.formatAsPhone = formatAsPhone;
2733
+ exports.formatAsSsn = formatAsSsn;
2734
+ exports.getAgesFromDob = getAgesFromDob;
2735
+ exports.getDaysForMonth = getDaysForMonth;
2736
+ exports.getYears = getYears;
2737
+ exports.validateEmail = validateEmail;
2738
+ exports.validatePhone = validatePhone;
2739
+ //# sourceMappingURL=index.js.map