@hexure/ui 1.13.37 → 1.13.38

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 (10) hide show
  1. package/dist/cjs/index.js +1529 -1520
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +1481 -1472
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/index.d.ts +81 -81
  6. package/package.json +1 -1
  7. /package/dist/cjs/types/components/{MultiSelect → Multiselect}/MultiSelect.d.ts +0 -0
  8. /package/dist/cjs/types/components/{MultiSelect → Multiselect}/index.d.ts +0 -0
  9. /package/dist/esm/types/components/{MultiSelect → Multiselect}/MultiSelect.d.ts +0 -0
  10. /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,35 +85,44 @@ const FontSizes = {
85
85
  };
86
86
  const EditableTheme = {
87
87
  PRIMARY_COLOR: Colors.PRIMARY,
88
- };
89
-
90
- //function to generate unique ids
88
+ };
89
+
91
90
  const generateUniqueId = (() => {
92
- let counter = 0;
93
91
  return (prefix = 'id') => {
92
+ const counterKey = `${prefix}-counter`;
93
+ const idKey = `${prefix}-id`;
94
+ const existingId = localStorage.getItem(idKey);
95
+ if (existingId) {
96
+ return existingId;
97
+ }
98
+ let counter = parseInt(localStorage.getItem(counterKey) || '0', 10);
94
99
  counter += 1;
95
- return `${prefix}-${counter}`;
100
+ localStorage.setItem(counterKey, counter.toString());
101
+ const counterString = counter.toString().padStart(4, '0');
102
+ const uniqueId = `${prefix}-${counterString}`;
103
+ localStorage.setItem(idKey, uniqueId);
104
+ return uniqueId;
96
105
  };
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;
106
+ })();
107
+
108
+ const Header$3 = styled.div `
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: space-between;
112
+ box-sizing: border-box;
113
+ background: #f5f5f5;
114
+ border: 1px solid #e5e5e5;
115
+ padding: 14px 20px;
116
+ height: 50px;
117
+ cursor: pointer;
118
+ `;
119
+ const Title$2 = styled.div `
120
+ font-size: ${FontSizes.DEFAULT};
121
+ font-weight: 400;
122
+ color: ${Colors.BLACK.Hex};
123
+ line-height: 1.6em;
124
+ font-family: ${FontStyles.DEFAULT};
125
+ box-sizing: border-box;
117
126
  `;
118
127
  const Accordion = (_a) => {
119
128
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -123,21 +132,21 @@ const Accordion = (_a) => {
123
132
  React.createElement(Title$2, { id: `${id}-title` }, title),
124
133
  React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
125
134
  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;
135
+ };
136
+
137
+ const StyledComponent = styled.p `
138
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
139
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
140
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
141
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
142
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
143
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
144
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
145
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
146
+ margin: ${props => props.$margin || '0px'};
147
+ padding: ${props => props.$padding || '0px'};
148
+ text-align: ${props => props.$align || 'left'};
149
+ box-sizing: border-box;
141
150
  `;
142
151
  const Copy = (_a) => {
143
152
  var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK' } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color"]);
@@ -146,19 +155,19 @@ const Copy = (_a) => {
146
155
  };
147
156
  Copy.defaultProps = {
148
157
  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;
158
+ };
159
+
160
+ const Wrapper$h = styled.div `
161
+ display: inline-block;
162
+ position: relative;
163
+ height: 16px;
164
+ `;
165
+ const StyledIcon$6 = styled(Icon) `
166
+ width: 16px;
167
+ height: 16px;
168
+ margin: 0px 6px;
169
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
170
+ cursor: pointer;
162
171
  `;
163
172
  StyledIcon$6.defaultProps = { theme: EditableTheme };
164
173
  const positions = {
@@ -197,13 +206,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
197
206
  return (React.createElement(Wrapper$h, { id: `${id}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
198
207
  trigger || React.createElement(StyledIcon$6, { id: `${id}-icon`, path: js.mdiInformationOutline }),
199
208
  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'};
209
+ };
210
+
211
+ const StyledButton = styled.button `
212
+ height: ${props => (props.$small ? '30px' : '40px')};
213
+ line-height: 1em;
214
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
215
+ margin: ${props => props.$margin || '0px'};
207
216
  padding: ${props => {
208
217
  if (props.$hasChildren) {
209
218
  if (props.$small) {
@@ -214,9 +223,9 @@ const StyledButton = styled.button `
214
223
  }
215
224
  }
216
225
  return '0px';
217
- }};
218
- outline: none;
219
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
226
+ }};
227
+ outline: none;
228
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
220
229
  width: ${props => {
221
230
  if (props.$hasChildren) {
222
231
  return 'auto';
@@ -225,55 +234,55 @@ const StyledButton = styled.button `
225
234
  return '30px';
226
235
  }
227
236
  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')};
237
+ }};
238
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
239
+ display: flex;
240
+ align-items: center;
241
+ justify-content: center;
242
+ gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
243
+ flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
244
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
245
+ border-width: 1px;
246
+ border-style: solid;
247
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
248
+ box-sizing: border-box;
249
+
250
+ &:active,
251
+ &:focus,
252
+ &:hover {
253
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
254
+ }
255
+ `;
256
+ const Label$5 = styled.span `
257
+ color: ${props => props.$content_color || '#fff'};
258
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
259
+ font-family: ${FontStyles.DEFAULT};
260
+ font-weight: 500;
261
+ line-height: 1;
262
+ `;
263
+ const StyledIcon$5 = styled.span `
264
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
265
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
266
+ display: flex;
267
+ align-items: center;
268
+ box-sizing: border-box;
269
+ `;
270
+ const Badge$1 = styled.span `
271
+ width: ${props => (props.$small ? '20px' : '24px')};
272
+ height: ${props => (props.$small ? '20px' : '24px')};
273
+ line-height: 1;
274
+ display: flex;
275
+ align-items: center;
276
+ justify-content: center;
277
+ border-radius: 100%;
278
+ background-color: ${props => props.$bg_color || '#fff'};
279
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
280
+ font-size: ${props => (props.$small ? '10px' : '12px')};
281
+ font-weight: 600;
282
+ font-family: ${FontStyles.DEFAULT};
283
+ letter-spacing: -1px;
284
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
285
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
277
286
  `;
278
287
  const Button = (_a) => {
279
288
  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 +329,37 @@ const Button = (_a) => {
320
329
  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
330
  }
322
331
  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;
332
+ };
333
+
334
+ const H1 = styled.h1 `
335
+ color: ${Colors.BLACK.Hex};
336
+ font-size: 30px;
337
+ font-weight: ${props => (props.$bold ? '500' : '400')};
338
+ line-height: 1.4em;
339
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
340
+ margin: ${props => props.$margin || '0px'};
341
+ padding: ${props => props.$padding || '0px'};
342
+ box-sizing: border-box;
343
+ `;
344
+ const H2 = styled.h2 `
345
+ color: ${Colors.BLACK.Hex};
346
+ font-size: 24px;
347
+ font-weight: ${props => (props.$bold ? '500' : '400')};
348
+ line-height: 1.33em;
349
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
350
+ margin: ${props => props.$margin || '0px'};
351
+ padding: ${props => props.$padding || '0px'};
352
+ box-sizing: border-box;
353
+ `;
354
+ const H3 = styled.h3 `
355
+ color: ${Colors.BLACK.Hex};
356
+ font-size: 18px;
357
+ font-weight: ${props => (props.$bold ? '500' : '400')};
358
+ line-height: 1.33em;
359
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
360
+ margin: ${props => props.$margin || '0px'};
361
+ padding: ${props => props.$padding || '0px'};
362
+ box-sizing: border-box;
354
363
  `;
355
364
  const Heading = (_a) => {
356
365
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -370,29 +379,29 @@ const Heading = (_a) => {
370
379
  Heading.defaultProps = {
371
380
  bold: false,
372
381
  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;
382
+ };
383
+
384
+ const Wrapper$g = styled.div `
385
+ position: fixed;
386
+ top: 0;
387
+ right: 0;
388
+ bottom: 0;
389
+ left: 0;
390
+ z-index: 9999;
391
+ background: rgba(0, 0, 0, 0.8);
392
+ display: flex;
393
+ align-items: center;
394
+ justify-content: center;
395
+ box-sizing: border-box;
387
396
  `;
388
397
  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;
398
+ const Buttons$1 = styled.div `
399
+ display: flex;
400
+ gap: 10px;
401
+ align-items: center;
402
+ justify-content: center;
403
+ margin-top: 30px;
404
+ box-sizing: border-box;
396
405
  `;
397
406
  const ActionDialog = (_a) => {
398
407
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
@@ -405,29 +414,29 @@ const ActionDialog = (_a) => {
405
414
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
406
415
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
407
416
  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;
417
+ };
418
+
419
+ const Wrapper$f = styled.div `
420
+ border: 1px solid #f1f1f1;
421
+ border-radius: 4px;
422
+ border-left-width: 4px;
423
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
424
+ display: flex;
425
+ align-items: flex-start;
426
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
427
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
428
+ box-sizing: border-box;
429
+ `;
430
+ const StyledIcon$4 = styled(Icon) `
431
+ flex-shrink: 0;
432
+ `;
433
+ const Action$1 = styled.div `
434
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
435
+ font-size: ${FontSizes.DEFAULT};
436
+ font-family: ${FontStyles.DEFAULT};
437
+ font-weight: 500;
438
+ cursor: pointer;
439
+ margin-top: 6px;
431
440
  `;
432
441
  Action$1.defaultProps = { theme: EditableTheme };
433
442
  const Alert = (_a) => {
@@ -458,8 +467,8 @@ const Alert = (_a) => {
458
467
  title && !small ? (React.createElement(Heading, { bold: true, id: `${id}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
459
468
  description ? (React.createElement(Copy, { id: `${id}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
460
469
  action && !small ? (React.createElement(Action$1, { id: `${id}-action`, onClick: action.onClick }, action.label)) : null)));
461
- };
462
-
470
+ };
471
+
463
472
  const colorMapping = {
464
473
  black: {
465
474
  fill_1: '#000000',
@@ -501,62 +510,62 @@ const Logo = (_a) => {
501
510
  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
511
  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
512
  }
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;
513
+ };
514
+
515
+ const Container$3 = styled.header `
516
+ width: 100%;
517
+ display: flex;
518
+ padding: 20px;
519
+ box-sizing: border-box;
520
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
521
+ background: '#fff';
522
+ justify-content: space-between;
523
+ `;
524
+ const LogoWrapper = styled.div `
525
+ display: flex;
526
+ align-items: center;
527
+ `;
528
+ const Image = styled.img `
529
+ height: 30px !important;
530
+ width: auto !important;
531
+ `;
532
+ const Buttons = styled.div `
533
+ display: flex;
534
+ flex-direction: row;
535
+ column-gap: 10px;
536
+ flex-direction: reverse;
528
537
  `;
529
538
  const AppHeader = ({ logoUrl, buttons = [] }) => {
530
539
  const id = generateUniqueId('app-header');
531
540
  return (React.createElement(Container$3, { id: `${id}-container` },
532
541
  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
542
  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;
543
+ };
544
+
545
+ const Wrapper$e = styled.div `
546
+ display: inline-block;
547
+ border-radius: 4px;
548
+ padding: 4px 6px;
549
+ background: ${props => Colors[props.$color].Hex};
550
+ color: #ffffff;
551
+ box-sizing: border-box;
552
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
553
+ `;
554
+ const Content$2 = styled.div `
555
+ display: flex;
556
+ align-items: center;
557
+ `;
558
+ const Label$4 = styled.div `
559
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
560
+ font-size: ${FontSizes.SMALL};
561
+ font-weight: 500;
562
+ font-family: ${FontStyles.DEFAULT};
563
+ line-height: 1.2em;
564
+ `;
565
+ const Remove$1 = styled.div `
566
+ margin-left: 10px;
567
+ display: flex;
568
+ align-items: center;
560
569
  `;
561
570
  const Tag = (_a) => {
562
571
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -566,94 +575,94 @@ const Tag = (_a) => {
566
575
  React.createElement(Label$4, { "$color": color, id: `${id}-label` }, children),
567
576
  removable ? (React.createElement(Remove$1, { id: `${id}-remove` },
568
577
  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;
578
+ };
579
+
580
+ const SidebarContainer = styled.div `
581
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
582
+ display: flex;
583
+ flex-direction: column;
584
+ height: 100%;
585
+ padding: 12px 0px;
586
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
587
+ `;
588
+ const MenuWrapper$1 = styled.button `
589
+ display: flex;
590
+ align-items: center;
591
+ border: 0px;
592
+ background-color: transparent;
593
+ padding-left: 0px;
594
+ border-left-width: 4px;
595
+ border-left-style: solid;
596
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
597
+ cursor: pointer;
598
+ height: 40px;
599
+
600
+ &:hover > div {
601
+ color: ${props => props.$color.Hex};
602
+ }
603
+
604
+ &:hover > svg > path {
605
+ fill: ${Colors.BLACK.Hex} !important;
606
+ }
607
+ `;
608
+ const MenuIcon = styled(Icon) `
609
+ width: 20px;
610
+ height: 20px;
611
+ margin: 0px 16px;
612
+ flex-shrink: 0;
613
+
614
+ > path {
615
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
616
+ }
617
+ `;
618
+ const MenuLabel = styled.div `
619
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
620
+ flex: 1;
621
+ font-size: 12px;
622
+ font-style: normal;
623
+ font-weight: 600;
624
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
625
+ line-height: 16px;
626
+ padding: 12px 0px;
627
+ letter-spacing: 1px;
628
+ `;
629
+ const SubMenu = styled.div `
630
+ overflow-y: auto;
631
+ padding-left: 44px;
632
+ padding-right: 20px;
633
+ padding-bottom: 10px;
634
+ `;
635
+ const SubMenuItem = styled.a `
636
+ display: block;
637
+ padding: 8px 12px;
638
+ border-radius: 8px;
639
+ font-size: 13px;
640
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
641
+ line-height: 20px;
642
+ text-decoration: none;
643
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
644
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
645
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
646
+ cursor: pointer;
647
+
648
+ &:hover {
649
+ color: ${props => props.$color.Hex};
650
+ font-weight: 500;
651
+ }
652
+ `;
653
+ const Footer = styled.div `
654
+ padding: 20px 14px 0px;
655
+ display: flex;
656
+ align-items: center;
657
+ `;
658
+ const FooterInfo = styled.div `
659
+ display: flex;
660
+ flex-direction: column;
661
+ flex: 1;
662
+ align-items: flex-start;
663
+ `;
664
+ const SidebarMenuContainer = styled.div `
665
+ flex-grow: 1;
657
666
  `;
658
667
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
659
668
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -682,75 +691,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
682
691
  e.preventDefault();
683
692
  toggleCollapse(!collapsed);
684
693
  }, 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;
694
+ };
695
+
696
+ const Wrapper$d = styled.div `
697
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
698
+ border-radius: 8px;
699
+ box-sizing: border-box;
700
+ display: flex;
701
+ align-items: center;
702
+ justify-content: space-between;
703
+ padding: 16px 20px;
695
704
  `;
696
705
  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;
706
+ const Left = styled.div `
707
+ box-sizing: border-box;
708
+ display: flex;
709
+ align-items: center;
710
+ justify-content: space-between;
711
+ flex-shrink: 0;
712
+ `;
713
+ const Info$1 = styled.div `
714
+ box-sizing: border-box;
715
+ display: flex;
716
+ align-items: center;
717
+ margin-right: 30px;
718
+ `;
719
+ const Selected = styled.span `
720
+ font-size: 14px;
721
+ font-weight: 400;
722
+ font-family: ${FontStyles.DEFAULT};
723
+ color: ${Colors.BLACK.Hex};
724
+ line-height: 1;
725
+ `;
726
+ const Clear = styled.span `
727
+ font-size: 14px;
728
+ font-weight: 400;
729
+ font-family: ${FontStyles.DEFAULT};
730
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
731
+ line-height: 1;
732
+ cursor: pointer;
733
+ padding-left: 10px;
734
+ margin-left: 10px;
735
+ border-left: 1px solid #ccc;
727
736
  `;
728
737
  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;
738
+ const Actions$1 = styled.div `
739
+ box-sizing: border-box;
740
+ display: flex;
741
+ align-items: center;
742
+ column-gap: 10px;
743
+ `;
744
+ const Error$1 = styled.div `
745
+ box-sizing: border-box;
746
+ display: flex;
747
+ align-items: center;
748
+ background: rgba(${Colors.RED.Rgb}, 0.1);
749
+ border-radius: 4px;
750
+ padding: 6px 8px;
751
+ text-overflow: ellipsis;
752
+ white-space: nowrap;
753
+ overflow: hidden;
754
+ margin-left: 30px;
755
+ `;
756
+ const ErrorMsg = styled.span `
757
+ font-size: 14px;
758
+ font-weight: 500;
759
+ font-family: ${FontStyles.DEFAULT};
760
+ line-height: 1em;
761
+ color: ${Colors.RED.Hex};
762
+ margin-left: 8px;
754
763
  `;
755
764
  const BulkActionBar = (_a) => {
756
765
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -766,48 +775,48 @@ const BulkActionBar = (_a) => {
766
775
  errorMsg ? (React.createElement(Error$1, { id: `${id}-error` },
767
776
  React.createElement(Icon, { color: Colors.RED.Hex, id: `${id}-error-icon`, path: js.mdiInformationOutline, size: '20px' }),
768
777
  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
- }
778
+ };
779
+
780
+ const Wrapper$c = styled.div `
781
+ background: #fff;
782
+ border-radius: 8px;
783
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
784
+ display: flex;
785
+ flex-direction: column;
786
+ gap: 4px;
787
+ max-height: ${props => props.$maxHeight || '312px'};
788
+ padding: 10px;
789
+ width: 200px;
790
+ `;
791
+ const MenuItem = styled.div `
792
+ align-items: center;
793
+ border-radius: 8px;
794
+ border: 1px solid transparent;
795
+ display: flex;
796
+ gap: 8px;
797
+ height: 38px;
798
+ padding: 8px;
799
+ &:hover {
800
+ background: rgba(1, 147, 215, 0.1);
801
+ cursor: pointer;
802
+
803
+ svg,
804
+ path {
805
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
806
+ }
807
+ }
799
808
  `;
800
809
  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')};
810
+ const Title$1 = styled.span `
811
+ font-family: Roboto;
812
+ font-size: 14px;
813
+ font-weight: 400;
814
+ height: auto;
815
+ letter-spacing: 0px;
816
+ line-height: 22px;
817
+ text-align: left;
818
+ color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
819
+ pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
811
820
  `;
812
821
  Title$1.defaultProps = {
813
822
  disabled: false,
@@ -822,19 +831,19 @@ const MoreMenu = (_a) => {
822
831
  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
832
  React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, id: `${itemId}-title` }, item.label)));
824
833
  })));
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;
834
+ };
835
+
836
+ const MenuWrapper = styled.div `
837
+ position: relative;
838
+ display: inline-block;
839
+ `;
840
+ const StyledMoreMenu = styled(MoreMenu) `
841
+ position: absolute;
842
+ top: ${props => props.$top};
843
+ left: ${props => props.$left};
844
+ width: ${props => props.$menuWidth};
845
+ max-height: ${props => props.maxHeight};
846
+ z-index: 10;
838
847
  `;
839
848
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, }) => {
840
849
  const [showMenu, toggleMenu] = React.useState(false);
@@ -909,85 +918,85 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
909
918
  return (React.createElement(MenuWrapper, { id: `${id}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
910
919
  React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, id: `${id}-button`, small: small }, label),
911
920
  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
- }
921
+ };
922
+
923
+ const Wrapper$b = styled.label `
924
+ border-radius: 4px;
925
+ padding: 4px 0px 4px 6px;
926
+ margin-left: -6px;
927
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
928
+ display: flex;
929
+ align-items: center;
930
+ font-size: ${FontSizes.DEFAULT};
931
+ line-height: 1.6em;
932
+ box-sizing: border-box;
933
+ position: relative;
934
+
935
+ &:focus-within {
936
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
937
+ }
929
938
  `;
930
939
  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;
940
+ const Input$2 = styled.input `
941
+ font-size: 20px;
942
+ margin: 0px;
943
+ line-height: 1.1em;
944
+ box-sizing: border-box;
945
+ position: absolute;
946
+ opacity: 0;
947
+ cursor: pointer;
948
+ height: 0;
949
+ width: 0;
950
+ &:checked + span {
951
+ background-color: ${Colors.PRIMARY.Hex};
952
+ border-color: ${Colors.PRIMARY.Hex};
953
+ }
954
+ &:checked:disabled + span {
955
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
956
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
957
+ }
958
+ &:disabled + span {
959
+ background-color: #d3d3d3;
960
+ border-color: #d3d3d3;
961
+ }
962
+ &:checked + span:after {
963
+ display: block;
964
+ }
965
+ `;
966
+ const Check$1 = styled.span `
967
+ height: 17px;
968
+ width: 17px;
969
+ min-width: 17px;
970
+ background-color: #fff;
971
+ border-width: 2px;
972
+ border-style: solid;
973
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
974
+ box-sizing: border-box;
975
+ position: relative;
976
+ &:after {
977
+ content: '';
978
+ position: absolute;
979
+ left: 3px;
980
+ top: 0px;
981
+ width: 7px;
982
+ height: 12px;
983
+ border: solid white;
984
+ border-width: 0 3px 3px 0;
985
+ -webkit-transform: rotate(45deg);
986
+ -ms-transform: rotate(45deg);
987
+ transform: rotate(45deg);
988
+ box-sizing: border-box;
989
+ display: none;
990
+ }
991
+ `;
992
+ const Label$3 = styled.span `
993
+ font-family: ${FontStyles.DEFAULT};
994
+ font-size: ${FontSizes.DEFAULT};
995
+ font-weight: 400;
996
+ line-height: 1.6em;
997
+ color: ${props => props.color || Colors.BLACK.Hex};
998
+ margin-left: 6px;
999
+ box-sizing: border-box;
991
1000
  `;
992
1001
  const Checkbox = (_a) => {
993
1002
  var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex"]);
@@ -998,16 +1007,16 @@ const Checkbox = (_a) => {
998
1007
  children ? (React.createElement(Label$3, { color: color, id: `${id}-label` },
999
1008
  children,
1000
1009
  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;
1010
+ };
1011
+
1012
+ const SelectAll = styled.div `
1013
+ padding: 8px 12px;
1014
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1015
+ box-sizing: border-box;
1007
1016
  `;
1008
- const Options$1 = styled.div `
1009
- padding: 12px;
1010
- box-sizing: border-box;
1017
+ const Options$1 = styled.div `
1018
+ padding: 12px;
1019
+ box-sizing: border-box;
1011
1020
  `;
1012
1021
  const Checklist = (_a) => {
1013
1022
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -1046,70 +1055,70 @@ const Checklist = (_a) => {
1046
1055
  const optionId = generateUniqueId('option');
1047
1056
  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
1057
  }))));
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
- }
1058
+ };
1059
+
1060
+ const Wrapper$a = styled.div `
1061
+ border-radius: 4px;
1062
+ height: 40px;
1063
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1064
+ position: relative;
1065
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1066
+ border-width: 1px;
1067
+ border-style: solid;
1068
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1069
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1070
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1071
+ box-sizing: border-box;
1072
+ padding: 10px 0px;
1073
+ display: flex;
1074
+ align-items: center;
1075
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1076
+
1077
+ &:focus-within {
1078
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1079
+ }
1071
1080
  `;
1072
1081
  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;
1082
+ const Trigger$1 = styled.select `
1083
+ appearance: none;
1084
+ box-shadow: none;
1085
+ outline: none;
1086
+ border: none;
1087
+ color: ${Colors.BLACK.Hex};
1088
+ font-size: ${FontSizes.DEFAULT};
1089
+ font-weight: 400;
1090
+ font-family: ${FontStyles.DEFAULT};
1091
+ line-height: 3.1em;
1092
+ background-color: transparent;
1093
+ background-image: none;
1094
+ width: 100%;
1095
+ box-sizing: border-box;
1096
+ padding: 0px 30px 0px 10px;
1097
+ box-sizing: border-box;
1098
+ position: relative;
1099
+ z-index: 2;
1100
+ `;
1101
+ const IconWrapper$2 = styled(Icon) `
1102
+ position: absolute;
1103
+ right: 9px;
1104
+ z-index: 1;
1105
+ `;
1106
+ const SearchInput$1 = styled.input `
1107
+ position: absolute;
1108
+ left: 2px;
1109
+ top: 2px;
1110
+ z-index: 999;
1111
+ width: 90%;
1112
+ height: 30px;
1113
+ border: none;
1114
+ outline: none;
1115
+ color: ${Colors.BLACK.Hex};
1116
+ font-family: ${FontStyles.DEFAULT};
1117
+ font-size: ${FontSizes.DEFAULT};
1118
+ font-weight: 400;
1119
+ line-height: 2.9em;
1120
+ overflow: hidden;
1121
+ white-space: nowrap;
1113
1122
  `;
1114
1123
  const Select = (_a) => {
1115
1124
  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 +1153,15 @@ const Select = (_a) => {
1144
1153
  filteredOptions &&
1145
1154
  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
1155
  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'};
1156
+ };
1157
+
1158
+ const DatePickerWrapper = styled.div `
1159
+ display: flex;
1160
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1152
1161
  `;
1153
- const Middle = styled.div `
1154
- margin: 0px -1px;
1155
- flex-grow: 1;
1162
+ const Middle = styled.div `
1163
+ margin: 0px -1px;
1164
+ flex-grow: 1;
1156
1165
  `;
1157
1166
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date,
1158
1167
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1240,66 +1249,66 @@ onChange = () => { }, style, }) => {
1240
1249
  React.createElement(Middle, { id: `${id}-middle` },
1241
1250
  React.createElement(Select, { id: `${id}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1242
1251
  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 }))));
1243
- };
1244
-
1245
- const Scrim$1 = styled.div `
1246
- position: ${({ $position }) => $position};
1247
- top: 0;
1248
- right: 0;
1249
- bottom: 0;
1250
- left: 0;
1251
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1252
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1253
- `;
1254
- const Container$2 = styled.div `
1255
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1256
- min-width: 400px;
1257
- width: ${({ $width }) => $width || '400px'};
1258
- overflow: hidden;
1259
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1260
- outline: none;
1261
- border: none;
1262
- position: ${({ $position }) => $position};
1263
- top: 0;
1264
- right: 0;
1265
- bottom: 0;
1266
- padding: 0px;
1267
- display: flex;
1268
- flex-direction: column;
1269
- box-sizing: border-box;
1270
- background: #fff;
1271
- `;
1272
- const Header$2 = styled.div `
1273
- padding: 30px 20px;
1274
- display: flex;
1275
- align-items: flex-start;
1276
- box-sizing: border-box;
1277
- flex-shrink: 0;
1278
- background: #fff;
1279
- `;
1280
- const Close$1 = styled.div `
1281
- margin-left: auto;
1282
- display: flex;
1283
- align-items: center;
1284
- padding-left: 20px;
1285
- cursor: pointer;
1286
- `;
1287
- const ContentWrapper$1 = styled.div `
1288
- overflow-x: hidden;
1289
- overflow-y: auto;
1290
- box-sizing: border-box;
1291
- flex: 1;
1292
- background: #fff;
1293
- `;
1294
- const ButtonBar$1 = styled.div `
1295
- padding: 20px;
1296
- display: flex;
1297
- align-items: center;
1298
- justify-content: flex-end;
1299
- box-sizing: border-box;
1300
- gap: 10px;
1301
- flex-shrink: 0;
1302
- background: #fff;
1252
+ };
1253
+
1254
+ const Scrim$1 = styled.div `
1255
+ position: ${({ $position }) => $position};
1256
+ top: 0;
1257
+ right: 0;
1258
+ bottom: 0;
1259
+ left: 0;
1260
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1261
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1262
+ `;
1263
+ const Container$2 = styled.div `
1264
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1265
+ min-width: 400px;
1266
+ width: ${({ $width }) => $width || '400px'};
1267
+ overflow: hidden;
1268
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1269
+ outline: none;
1270
+ border: none;
1271
+ position: ${({ $position }) => $position};
1272
+ top: 0;
1273
+ right: 0;
1274
+ bottom: 0;
1275
+ padding: 0px;
1276
+ display: flex;
1277
+ flex-direction: column;
1278
+ box-sizing: border-box;
1279
+ background: #fff;
1280
+ `;
1281
+ const Header$2 = styled.div `
1282
+ padding: 30px 20px;
1283
+ display: flex;
1284
+ align-items: flex-start;
1285
+ box-sizing: border-box;
1286
+ flex-shrink: 0;
1287
+ background: #fff;
1288
+ `;
1289
+ const Close$1 = styled.div `
1290
+ margin-left: auto;
1291
+ display: flex;
1292
+ align-items: center;
1293
+ padding-left: 20px;
1294
+ cursor: pointer;
1295
+ `;
1296
+ const ContentWrapper$1 = styled.div `
1297
+ overflow-x: hidden;
1298
+ overflow-y: auto;
1299
+ box-sizing: border-box;
1300
+ flex: 1;
1301
+ background: #fff;
1302
+ `;
1303
+ const ButtonBar$1 = styled.div `
1304
+ padding: 20px;
1305
+ display: flex;
1306
+ align-items: center;
1307
+ justify-content: flex-end;
1308
+ box-sizing: border-box;
1309
+ gap: 10px;
1310
+ flex-shrink: 0;
1311
+ background: #fff;
1303
1312
  `;
1304
1313
  const Drawer = (_a) => {
1305
1314
  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"]);
@@ -1328,55 +1337,55 @@ const Drawer = (_a) => {
1328
1337
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
1329
1338
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null),
1330
1339
  scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${id}-scrim`, onClick: onClose })) : null));
1331
- };
1332
-
1340
+ };
1341
+
1333
1342
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1334
- const LabelRow = styled.div `
1335
- display: flex;
1336
- align-items: center;
1337
- justify-content: space-between;
1338
- margin: 0 0 4px 0;
1339
- box-sizing: border-box;
1340
- `;
1341
- const Label$2 = styled.label `
1342
- font-size: ${FontSizes.DEFAULT};
1343
- font-weight: 500;
1344
- line-height: 1.3em;
1345
- font-family: ${FontStyles.DEFAULT};
1346
- color: ${Colors.BLACK.Hex};
1347
- display: flex;
1348
- align-items: center;
1349
- `;
1350
- const Required = styled.span `
1351
- color: ${Colors.RED.Hex};
1352
- margin-left: 4px;
1353
- `;
1354
- const Action = styled.span `
1355
- font-size: ${FontSizes.DEFAULT};
1356
- font-weight: 500;
1357
- line-height: 1em;
1358
- font-family: ${FontStyles.DEFAULT};
1359
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1360
- cursor: pointer;
1343
+ const LabelRow = styled.div `
1344
+ display: flex;
1345
+ align-items: center;
1346
+ justify-content: space-between;
1347
+ margin: 0 0 4px 0;
1348
+ box-sizing: border-box;
1349
+ `;
1350
+ const Label$2 = styled.label `
1351
+ font-size: ${FontSizes.DEFAULT};
1352
+ font-weight: 500;
1353
+ line-height: 1.3em;
1354
+ font-family: ${FontStyles.DEFAULT};
1355
+ color: ${Colors.BLACK.Hex};
1356
+ display: flex;
1357
+ align-items: center;
1358
+ `;
1359
+ const Required = styled.span `
1360
+ color: ${Colors.RED.Hex};
1361
+ margin-left: 4px;
1362
+ `;
1363
+ const Action = styled.span `
1364
+ font-size: ${FontSizes.DEFAULT};
1365
+ font-weight: 500;
1366
+ line-height: 1em;
1367
+ font-family: ${FontStyles.DEFAULT};
1368
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1369
+ cursor: pointer;
1361
1370
  `;
1362
1371
  Action.defaultProps = { theme: EditableTheme };
1363
- const Description = styled.div `
1364
- font-size: ${FontSizes.SMALL};
1365
- font-weight: 400;
1366
- line-height: 1.3em;
1367
- font-family: ${FontStyles.DEFAULT};
1368
- color: ${Colors.BLACK.Hex};
1369
- margin: 0 0 8px 0;
1370
- box-sizing: border-box;
1371
- `;
1372
- const Validation = styled.div `
1373
- font-size: ${FontSizes.SMALL};
1374
- font-weight: 400;
1375
- line-height: 1.3em;
1376
- font-family: ${FontStyles.DEFAULT};
1377
- color: ${Colors.RED.Hex};
1378
- margin: 4px 0 0 0;
1379
- box-sizing: border-box;
1372
+ const Description = styled.div `
1373
+ font-size: ${FontSizes.SMALL};
1374
+ font-weight: 400;
1375
+ line-height: 1.3em;
1376
+ font-family: ${FontStyles.DEFAULT};
1377
+ color: ${Colors.BLACK.Hex};
1378
+ margin: 0 0 8px 0;
1379
+ box-sizing: border-box;
1380
+ `;
1381
+ const Validation = styled.div `
1382
+ font-size: ${FontSizes.SMALL};
1383
+ font-weight: 400;
1384
+ line-height: 1.3em;
1385
+ font-family: ${FontStyles.DEFAULT};
1386
+ color: ${Colors.RED.Hex};
1387
+ margin: 4px 0 0 0;
1388
+ box-sizing: border-box;
1380
1389
  `;
1381
1390
  const Field = (_a) => {
1382
1391
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1391,114 +1400,114 @@ const Field = (_a) => {
1391
1400
  description ? React.createElement(Description, { id: `${id}-description` }, description) : null,
1392
1401
  React.createElement("div", { id: `${id}-children` }, children),
1393
1402
  validationText ? React.createElement(Validation, { id: `${id}-validation` }, validationText) : null));
1394
- };
1395
-
1396
- const Wrapper$8 = styled.fieldset `
1397
- margin-inline-start: 0px;
1398
- margin-inline-end: 0px;
1399
- padding-block-start: 0px;
1400
- padding-inline-start: 0px;
1401
- padding-inline-end: 0px;
1402
- padding-block-end: 0px;
1403
- min-inline-size: min-content;
1404
- border-width: 0px;
1405
- border-style: none;
1406
- border-color: transparent;
1407
- border-image: none;
1408
- `;
1409
- const Label$1 = styled.legend `
1410
- padding-inline-start: 0px;
1411
- padding-inline-end: 0px;
1412
-
1413
- color: ${Colors.BLACK.Hex};
1414
- font-family: ${FontStyles.DEFAULT};
1415
- font-size: ${FontSizes.DEFAULT};
1416
- font-weight: 500;
1417
- line-height: 22px;
1418
- margin-bottom: 6px;
1419
- `;
1420
- const Content$1 = styled.div `
1421
- padding: 20px;
1422
- border-radius: 8px;
1423
- background: #fcfcfc;
1403
+ };
1404
+
1405
+ const Wrapper$8 = styled.fieldset `
1406
+ margin-inline-start: 0px;
1407
+ margin-inline-end: 0px;
1408
+ padding-block-start: 0px;
1409
+ padding-inline-start: 0px;
1410
+ padding-inline-end: 0px;
1411
+ padding-block-end: 0px;
1412
+ min-inline-size: min-content;
1413
+ border-width: 0px;
1414
+ border-style: none;
1415
+ border-color: transparent;
1416
+ border-image: none;
1417
+ `;
1418
+ const Label$1 = styled.legend `
1419
+ padding-inline-start: 0px;
1420
+ padding-inline-end: 0px;
1421
+
1422
+ color: ${Colors.BLACK.Hex};
1423
+ font-family: ${FontStyles.DEFAULT};
1424
+ font-size: ${FontSizes.DEFAULT};
1425
+ font-weight: 500;
1426
+ line-height: 22px;
1427
+ margin-bottom: 6px;
1428
+ `;
1429
+ const Content$1 = styled.div `
1430
+ padding: 20px;
1431
+ border-radius: 8px;
1432
+ background: #fcfcfc;
1424
1433
  `;
1425
1434
  const FieldGroup = ({ children, label }) => {
1426
1435
  const id = generateUniqueId('field-group');
1427
1436
  return (React.createElement(Wrapper$8, { id: `${id}-wrapper` },
1428
1437
  React.createElement(Label$1, { id: `${id}-label` }, label),
1429
1438
  React.createElement(Content$1, { id: `${id}-content` }, children)));
1430
- };
1431
-
1432
- const Dropzone = styled.div `
1433
- border-radius: 8px;
1434
- border-width: 1px;
1435
- border-style: dashed;
1436
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1437
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1438
- cursor: copy;
1439
+ };
1440
+
1441
+ const Dropzone = styled.div `
1442
+ border-radius: 8px;
1443
+ border-width: 1px;
1444
+ border-style: dashed;
1445
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1446
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1447
+ cursor: copy;
1439
1448
  `;
1440
1449
  Dropzone.defaultProps = { theme: EditableTheme };
1441
- const IconWrapper$1 = styled.div `
1442
- width: 80px;
1443
- height: 80px;
1444
- border-radius: 40px;
1445
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1446
- display: flex;
1447
- align-items: center;
1448
- justify-content: center;
1449
- `;
1450
- const StyledIcon$3 = styled(Icon) `
1451
- width: 40px !important;
1452
- height: 40px !important;
1453
-
1454
- > path {
1455
- fill: ${Colors.GRAY.Hex} !important;
1456
- }
1457
- `;
1458
- const ClickZone = styled.div `
1459
- margin: 40px 20px;
1460
- display: flex;
1461
- flex-direction: column;
1462
- align-items: center;
1463
- gap: 16px;
1464
- `;
1465
- const Content = styled.div `
1466
- display: flex;
1467
- flex-direction: column;
1468
- align-items: center;
1469
- z-index: 99999;
1470
- gap: 2px;
1471
- `;
1472
- const Files = styled.div `
1473
- display: flex;
1474
- flex-direction: column;
1475
- align-self: stretch;
1476
- gap: 10px;
1477
- margin: 20px;
1478
- `;
1479
- const MessageDiv = styled.div `
1480
- display: flex;
1481
- align-items: center;
1482
- justify-content: center;
1483
- `;
1484
- const File = styled.div `
1485
- display: flex;
1486
- padding: 10px;
1487
- align-items: center;
1488
- justify-content: space-between;
1489
- gap: 10px;
1490
- border-radius: 4px;
1491
- border: 1px solid #cccccc;
1492
- background: #ffffff;
1493
- `;
1494
- const Remove = styled(Icon) `
1495
- width: 24px;
1496
- height: 24px;
1497
- cursor: pointer;
1498
-
1499
- > path {
1500
- fill: ${Colors.RED.Hex} !important;
1501
- }
1450
+ const IconWrapper$1 = styled.div `
1451
+ width: 80px;
1452
+ height: 80px;
1453
+ border-radius: 40px;
1454
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1455
+ display: flex;
1456
+ align-items: center;
1457
+ justify-content: center;
1458
+ `;
1459
+ const StyledIcon$3 = styled(Icon) `
1460
+ width: 40px !important;
1461
+ height: 40px !important;
1462
+
1463
+ > path {
1464
+ fill: ${Colors.GRAY.Hex} !important;
1465
+ }
1466
+ `;
1467
+ const ClickZone = styled.div `
1468
+ margin: 40px 20px;
1469
+ display: flex;
1470
+ flex-direction: column;
1471
+ align-items: center;
1472
+ gap: 16px;
1473
+ `;
1474
+ const Content = styled.div `
1475
+ display: flex;
1476
+ flex-direction: column;
1477
+ align-items: center;
1478
+ z-index: 99999;
1479
+ gap: 2px;
1480
+ `;
1481
+ const Files = styled.div `
1482
+ display: flex;
1483
+ flex-direction: column;
1484
+ align-self: stretch;
1485
+ gap: 10px;
1486
+ margin: 20px;
1487
+ `;
1488
+ const MessageDiv = styled.div `
1489
+ display: flex;
1490
+ align-items: center;
1491
+ justify-content: center;
1492
+ `;
1493
+ const File = styled.div `
1494
+ display: flex;
1495
+ padding: 10px;
1496
+ align-items: center;
1497
+ justify-content: space-between;
1498
+ gap: 10px;
1499
+ border-radius: 4px;
1500
+ border: 1px solid #cccccc;
1501
+ background: #ffffff;
1502
+ `;
1503
+ const Remove = styled(Icon) `
1504
+ width: 24px;
1505
+ height: 24px;
1506
+ cursor: pointer;
1507
+
1508
+ > path {
1509
+ fill: ${Colors.RED.Hex} !important;
1510
+ }
1502
1511
  `;
1503
1512
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
1504
1513
  const inputRef = React.useRef(null);
@@ -1618,8 +1627,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1618
1627
  React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${id}-message` }, message),
1619
1628
  tooltipInfo && (React.createElement("span", { id: `${id}-tooltip` },
1620
1629
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1621
- };
1622
-
1630
+ };
1631
+
1623
1632
  const getAgesFromDob = (dob) => {
1624
1633
  let calculated_current_age = null;
1625
1634
  let calculated_nearest_age = null;
@@ -1692,149 +1701,149 @@ const formatAsSsn = (number) => {
1692
1701
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1693
1702
  }
1694
1703
  return formatted_value;
1695
- };
1696
-
1697
- const StyledInput = styled.input `
1698
- border: none !important;
1699
- background: none !important;
1700
- font-size: ${FontSizes.DEFAULT};
1701
- font-weight: 400;
1702
- font-family: ${FontStyles.DEFAULT};
1703
- line-height: 1.28em;
1704
+ };
1705
+
1706
+ const StyledInput = styled.input `
1707
+ border: none !important;
1708
+ background: none !important;
1709
+ font-size: ${FontSizes.DEFAULT};
1710
+ font-weight: 400;
1711
+ font-family: ${FontStyles.DEFAULT};
1712
+ line-height: 1.28em;
1704
1713
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1705
1714
  ? Colors.RED.Hex
1706
- : Colors.BLACK.Hex};
1707
- position: relative;
1708
- height: ${props => props.$height || 'auto'};
1709
- padding: 10px;
1710
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1711
- box-shadow: none;
1712
- outline: none;
1713
- margin: 0px;
1714
- text-indent: 0px;
1715
- --webkit-appearance: none;
1716
- box-sizing: border-box;
1717
- display: block;
1718
- width: 100%;
1719
- `;
1720
- const StyledTextArea = styled.textarea `
1721
- border: none !important;
1722
- background: none !important;
1723
- overflow-y: scroll !important;
1724
- font-size: 14px;
1725
- font-weight: 400;
1726
- height: ${props => props.$height || 'auto'};
1727
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1728
- line-height: 1.28em;
1715
+ : Colors.BLACK.Hex};
1716
+ position: relative;
1717
+ height: ${props => props.$height || 'auto'};
1718
+ padding: 10px;
1719
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1720
+ box-shadow: none;
1721
+ outline: none;
1722
+ margin: 0px;
1723
+ text-indent: 0px;
1724
+ --webkit-appearance: none;
1725
+ box-sizing: border-box;
1726
+ display: block;
1727
+ width: 100%;
1728
+ `;
1729
+ const StyledTextArea = styled.textarea `
1730
+ border: none !important;
1731
+ background: none !important;
1732
+ overflow-y: scroll !important;
1733
+ font-size: 14px;
1734
+ font-weight: 400;
1735
+ height: ${props => props.$height || 'auto'};
1736
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1737
+ line-height: 1.28em;
1729
1738
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1730
1739
  ? Colors.RED.Hex
1731
- : Colors.BLACK.Hex};
1732
- position: relative;
1733
- padding: 10px;
1734
- opacity: 1;
1735
- box-shadow: none;
1736
- outline: none;
1737
- margin: 0px;
1738
- text-indent: 0px;
1739
- --webkit-appearance: none;
1740
- overflow-wrap: break-word;
1741
- box-sizing: border-box;
1742
- display: block;
1743
- width: 100%;
1740
+ : Colors.BLACK.Hex};
1741
+ position: relative;
1742
+ padding: 10px;
1743
+ opacity: 1;
1744
+ box-shadow: none;
1745
+ outline: none;
1746
+ margin: 0px;
1747
+ text-indent: 0px;
1748
+ --webkit-appearance: none;
1749
+ overflow-wrap: break-word;
1750
+ box-sizing: border-box;
1751
+ display: block;
1752
+ width: 100%;
1744
1753
  ${({ $readOnly }) => $readOnly &&
1745
- `
1746
- background-color: #f0f0f0;
1747
- color: #999999;
1748
- overflow-y: scroll;
1749
- `}
1750
- `;
1751
- const StyledSuffix = styled.div `
1752
- box-sizing: border-box;
1753
- border-radius: 0px 4px 4px 0px;
1754
- display: flex;
1755
- justify-content: center;
1756
- align-items: center;
1757
- padding: 10px;
1758
- height: auto;
1759
- background: #f5f5f5;
1760
- border-width: 0px 0px 0px 1px;
1761
- border-style: solid;
1762
- border-color: #cccccc;
1763
- font-family: ${FontStyles.DEFAULT};
1764
- font-style: normal;
1765
- font-weight: 400;
1766
- font-size: ${FontSizes.DEFAULT};
1767
- color: ${Colors.BLACK.Hex};
1768
- `;
1769
- const StyledWrapper = styled.div `
1770
- display: flex;
1771
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1772
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1773
- position: relative;
1774
- border-width: 1px;
1775
- border-style: solid;
1776
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1777
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1778
-
1779
- &:focus-within {
1780
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1781
- }
1754
+ `
1755
+ background-color: #f0f0f0;
1756
+ color: #999999;
1757
+ overflow-y: scroll;
1758
+ `}
1759
+ `;
1760
+ const StyledSuffix = styled.div `
1761
+ box-sizing: border-box;
1762
+ border-radius: 0px 4px 4px 0px;
1763
+ display: flex;
1764
+ justify-content: center;
1765
+ align-items: center;
1766
+ padding: 10px;
1767
+ height: auto;
1768
+ background: #f5f5f5;
1769
+ border-width: 0px 0px 0px 1px;
1770
+ border-style: solid;
1771
+ border-color: #cccccc;
1772
+ font-family: ${FontStyles.DEFAULT};
1773
+ font-style: normal;
1774
+ font-weight: 400;
1775
+ font-size: ${FontSizes.DEFAULT};
1776
+ color: ${Colors.BLACK.Hex};
1777
+ `;
1778
+ const StyledWrapper = styled.div `
1779
+ display: flex;
1780
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1781
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1782
+ position: relative;
1783
+ border-width: 1px;
1784
+ border-style: solid;
1785
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1786
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1787
+
1788
+ &:focus-within {
1789
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1790
+ }
1782
1791
  `;
1783
1792
  StyledWrapper.defaultProps = { theme: EditableTheme };
1784
- const SuggestedValues = styled.div `
1785
- background: #fff;
1786
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1787
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1788
- border-radius: 0px 0px 4px 4px;
1789
- border-style: solid;
1790
- border-top: none;
1791
- border-width: 1px;
1792
- left: -1px;
1793
- position: absolute;
1794
- right: -1px;
1795
- top: 39px;
1796
- z-index: 9999;
1797
- max-height: 220px;
1798
- overflow: auto;
1793
+ const SuggestedValues = styled.div `
1794
+ background: #fff;
1795
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1796
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1797
+ border-radius: 0px 0px 4px 4px;
1798
+ border-style: solid;
1799
+ border-top: none;
1800
+ border-width: 1px;
1801
+ left: -1px;
1802
+ position: absolute;
1803
+ right: -1px;
1804
+ top: 39px;
1805
+ z-index: 9999;
1806
+ max-height: 220px;
1807
+ overflow: auto;
1799
1808
  `;
1800
1809
  SuggestedValues.defaultProps = { theme: EditableTheme };
1801
- const SuggestedSummary = styled.div `
1802
- color: ${Colors.MEDIUM_GRAY.Hex};
1803
- font-size: 12px;
1804
- font-family: ${FontStyles.DEFAULT};
1805
- font-weight: 500;
1806
- line-height: 18px;
1807
- padding: 10px 12px;
1808
- border-bottom: 1px solid #e5e5e5;
1809
- background: #fff;
1810
- z-index: 1;
1811
- position: sticky;
1812
- top: 0px;
1813
- `;
1814
- const SuggestedValue = styled.div `
1815
- cursor: pointer;
1816
- padding: 8px 12px;
1817
- font-size: ${FontSizes.DEFAULT};
1818
- font-family: ${FontStyles.DEFAULT};
1819
- font-weight: 400;
1820
- line-height: 1.6em;
1821
- color: ${Colors.BLACK.Hex};
1822
-
1823
- &:hover {
1824
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1825
- }
1810
+ const SuggestedSummary = styled.div `
1811
+ color: ${Colors.MEDIUM_GRAY.Hex};
1812
+ font-size: 12px;
1813
+ font-family: ${FontStyles.DEFAULT};
1814
+ font-weight: 500;
1815
+ line-height: 18px;
1816
+ padding: 10px 12px;
1817
+ border-bottom: 1px solid #e5e5e5;
1818
+ background: #fff;
1819
+ z-index: 1;
1820
+ position: sticky;
1821
+ top: 0px;
1822
+ `;
1823
+ const SuggestedValue = styled.div `
1824
+ cursor: pointer;
1825
+ padding: 8px 12px;
1826
+ font-size: ${FontSizes.DEFAULT};
1827
+ font-family: ${FontStyles.DEFAULT};
1828
+ font-weight: 400;
1829
+ line-height: 1.6em;
1830
+ color: ${Colors.BLACK.Hex};
1831
+
1832
+ &:hover {
1833
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1834
+ }
1826
1835
  `;
1827
1836
  SuggestedValue.defaultProps = { theme: EditableTheme };
1828
- const CharacterCount = styled.div `
1829
- font-family: ${FontStyles.DEFAULT};
1830
- font-size: ${FontSizes.SMALL};
1831
- color: ${Colors.MEDIUM_GRAY.Hex};
1832
- padding: 10px;
1837
+ const CharacterCount = styled.div `
1838
+ font-family: ${FontStyles.DEFAULT};
1839
+ font-size: ${FontSizes.SMALL};
1840
+ color: ${Colors.MEDIUM_GRAY.Hex};
1841
+ padding: 10px;
1833
1842
  `;
1834
- const Loader$1 = styled.div `
1835
- padding: 0px 10px;
1836
- display: flex;
1837
- align-items: center;
1843
+ const Loader$1 = styled.div `
1844
+ padding: 0px 10px;
1845
+ display: flex;
1846
+ align-items: center;
1838
1847
  `;
1839
1848
  const Input$1 = (_a) => {
1840
1849
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown,
@@ -1967,112 +1976,112 @@ const Input$1 = (_a) => {
1967
1976
  onSuggestedSelect();
1968
1977
  setShowOptions(false);
1969
1978
  } }, suggestedValue))))) : null));
1970
- };
1971
-
1972
- const Wrapper$7 = styled.a `
1973
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1974
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1975
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1976
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1977
- font-weight: 500;
1978
- font-style: normal;
1979
- text-decoration: 'none';
1980
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1981
- margin: 0px;
1982
- padding: 0px;
1983
- box-sizing: border-box;
1984
- cursor: pointer;
1979
+ };
1980
+
1981
+ const Wrapper$7 = styled.a `
1982
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1983
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1984
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1985
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1986
+ font-weight: 500;
1987
+ font-style: normal;
1988
+ text-decoration: 'none';
1989
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1990
+ margin: 0px;
1991
+ padding: 0px;
1992
+ box-sizing: border-box;
1993
+ cursor: pointer;
1985
1994
  `;
1986
1995
  Wrapper$7.defaultProps = { theme: EditableTheme };
1987
1996
  const Link = (_a) => {
1988
1997
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1989
1998
  const id = generateUniqueId('link');
1990
1999
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${id}-wrapper` }), children));
1991
- };
1992
-
1993
- const dash = styled.keyframes `
1994
- 0% {
1995
- stroke-dasharray: 1, 160;
1996
- stroke-dashoffset: 0;
1997
- }
1998
- 50% {
1999
- stroke-dasharray: 80, 160;
2000
- stroke-dashoffset: -32;
2001
- }
2002
- 100% {
2003
- stroke-dasharray: 80, 160;
2004
- stroke-dashoffset: -124;
2005
- }
2006
- `;
2007
- const Spinner = styled.svg `
2008
- z-index: 2;
2009
- position: absolute;
2010
- top: 50%;
2011
- left: 50%;
2012
- transform: translate(-50%, -50%);
2013
- margin: 0 auto;
2014
- width: 40px;
2015
- height: 40px;
2016
- `;
2017
- const Path = styled.path `
2018
- stroke: #0193d7;
2019
- stroke-linecap: round;
2020
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2021
- animation: ${dash} 1.1s ease-in-out infinite;
2000
+ };
2001
+
2002
+ const dash = styled.keyframes `
2003
+ 0% {
2004
+ stroke-dasharray: 1, 160;
2005
+ stroke-dashoffset: 0;
2006
+ }
2007
+ 50% {
2008
+ stroke-dasharray: 80, 160;
2009
+ stroke-dashoffset: -32;
2010
+ }
2011
+ 100% {
2012
+ stroke-dasharray: 80, 160;
2013
+ stroke-dashoffset: -124;
2014
+ }
2015
+ `;
2016
+ const Spinner = styled.svg `
2017
+ z-index: 2;
2018
+ position: absolute;
2019
+ top: 50%;
2020
+ left: 50%;
2021
+ transform: translate(-50%, -50%);
2022
+ margin: 0 auto;
2023
+ width: 40px;
2024
+ height: 40px;
2025
+ `;
2026
+ const Path = styled.path `
2027
+ stroke: #0193d7;
2028
+ stroke-linecap: round;
2029
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2030
+ animation: ${dash} 1.1s ease-in-out infinite;
2022
2031
  `;
2023
2032
  const Loader = () => {
2024
2033
  const id = generateUniqueId('loader');
2025
2034
  return (React.createElement(Spinner, { id: `${id}-spinner`, viewBox: '0 0 16 18' },
2026
2035
  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' })));
2027
- };
2028
-
2029
- const Steps = styled.div `
2030
- padding: 20px;
2031
- border-bottom: 1px solid #e7e6e6;
2032
- background: #f5f5f5;
2033
- display: flex;
2034
- gap: 30px;
2035
- align-items: center;
2036
- `;
2037
- const Step = styled.div `
2038
- display: flex;
2039
- align-items: center;
2040
- gap: 8px;
2041
- `;
2042
- const StyledIcon$2 = styled(Icon) `
2043
- > path {
2044
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2045
- }
2036
+ };
2037
+
2038
+ const Steps = styled.div `
2039
+ padding: 20px;
2040
+ border-bottom: 1px solid #e7e6e6;
2041
+ background: #f5f5f5;
2042
+ display: flex;
2043
+ gap: 30px;
2044
+ align-items: center;
2045
+ `;
2046
+ const Step = styled.div `
2047
+ display: flex;
2048
+ align-items: center;
2049
+ gap: 8px;
2050
+ `;
2051
+ const StyledIcon$2 = styled(Icon) `
2052
+ > path {
2053
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2054
+ }
2046
2055
  `;
2047
2056
  StyledIcon$2.defaultProps = { theme: EditableTheme };
2048
- const StepIndicator = styled.div `
2049
- width: 30px;
2050
- height: 30px;
2051
- border-radius: 15px;
2052
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2053
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2054
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2055
- font-size: 14px;
2056
- font-weight: 500;
2057
- line-height: 1;
2058
- display: flex;
2059
- align-items: center;
2060
- justify-content: center;
2061
- flex-shrink: 0;
2057
+ const StepIndicator = styled.div `
2058
+ width: 30px;
2059
+ height: 30px;
2060
+ border-radius: 15px;
2061
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2062
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2063
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2064
+ font-size: 14px;
2065
+ font-weight: 500;
2066
+ line-height: 1;
2067
+ display: flex;
2068
+ align-items: center;
2069
+ justify-content: center;
2070
+ flex-shrink: 0;
2062
2071
  `;
2063
2072
  StepIndicator.defaultProps = { theme: EditableTheme };
2064
- const StepLabel = styled.div `
2065
- color: #000;
2066
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2067
- font-size: 14px;
2068
- font-weight: 500;
2069
- line-height: 1;
2070
- `;
2071
- const StepLine = styled.div `
2072
- height: 2px;
2073
- flex-grow: 1;
2074
- background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2075
- transition: background-color 0.5s ease-in-out;
2073
+ const StepLabel = styled.div `
2074
+ color: #000;
2075
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2076
+ font-size: 14px;
2077
+ font-weight: 500;
2078
+ line-height: 1;
2079
+ `;
2080
+ const StepLine = styled.div `
2081
+ height: 2px;
2082
+ flex-grow: 1;
2083
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2084
+ transition: background-color 0.5s ease-in-out;
2076
2085
  `;
2077
2086
  const ProgressBar = ({ steps, showStepLine = false }) => {
2078
2087
  const id = generateUniqueId('progress-bar');
@@ -2084,78 +2093,78 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
2084
2093
  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)),
2085
2094
  React.createElement(StepLabel, { id: `${stepId}-label` }, step.label))));
2086
2095
  })));
2087
- };
2088
-
2089
- const Wrapper$6 = styled.div `
2090
- position: fixed;
2091
- top: 0;
2092
- right: 0;
2093
- bottom: 0;
2094
- left: 0;
2095
- z-index: 9999;
2096
- background: rgba(0, 0, 0, 0.8);
2097
- display: flex;
2098
- align-items: center;
2099
- justify-content: center;
2100
- `;
2101
- const Container$1 = styled.dialog `
2102
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2103
- max-width: calc(100vw - 80px);
2104
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2105
- max-height: calc(100vh - 80px);
2106
- border-radius: 8px;
2107
- overflow: hidden;
2108
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2109
- outline: none;
2110
- border: none;
2111
- position: relative;
2112
- padding: 0px;
2113
- box-sizing: border-box;
2114
- display: flex;
2115
- flex-direction: column;
2116
- `;
2117
- const Header$1 = styled.div `
2118
- flex-shrink: 0;
2119
- padding: 20px;
2120
- border-bottom: 1px solid #e7e6e6;
2121
- display: flex;
2122
- align-items: center;
2123
- background: #ffffff;
2124
- box-sizing: border-box;
2125
- `;
2126
- const Close = styled.div `
2127
- margin-left: auto;
2128
- display: flex;
2129
- align-items: center;
2130
- padding-left: 20px;
2131
- cursor: pointer;
2132
- `;
2133
- const CloseMsg = styled.span `
2134
- font-size: ${FontSizes.SMALL};
2135
- font-weight: 400;
2136
- font-family: ${FontStyles.DEFAULT};
2137
- line-height: 1em;
2138
- color: ${Colors.MEDIUM_GRAY.Hex};
2139
- `;
2140
- const ContentWrapper = styled.div `
2141
- overflow-x: hidden;
2142
- overflow-y: auto;
2143
- background: #ffffff;
2144
- flex: 1;
2145
- box-sizing: border-box;
2146
- `;
2147
- const ButtonBar = styled.div `
2148
- flex-shrink: 0;
2149
- background: #ffffff;
2150
- padding: 20px;
2151
- border-top: 1px solid #e7e6e6;
2152
- display: flex;
2153
- align-items: center;
2154
- justify-self: flex-end;
2155
- box-sizing: border-box;
2156
- `;
2157
- const ButtonContainer = styled.div `
2158
- margin: 0 10px;
2096
+ };
2097
+
2098
+ const Wrapper$6 = styled.div `
2099
+ position: fixed;
2100
+ top: 0;
2101
+ right: 0;
2102
+ bottom: 0;
2103
+ left: 0;
2104
+ z-index: 9999;
2105
+ background: rgba(0, 0, 0, 0.8);
2106
+ display: flex;
2107
+ align-items: center;
2108
+ justify-content: center;
2109
+ `;
2110
+ const Container$1 = styled.dialog `
2111
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2112
+ max-width: calc(100vw - 80px);
2113
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2114
+ max-height: calc(100vh - 80px);
2115
+ border-radius: 8px;
2116
+ overflow: hidden;
2117
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2118
+ outline: none;
2119
+ border: none;
2120
+ position: relative;
2121
+ padding: 0px;
2122
+ box-sizing: border-box;
2123
+ display: flex;
2124
+ flex-direction: column;
2125
+ `;
2126
+ const Header$1 = styled.div `
2127
+ flex-shrink: 0;
2128
+ padding: 20px;
2129
+ border-bottom: 1px solid #e7e6e6;
2130
+ display: flex;
2131
+ align-items: center;
2132
+ background: #ffffff;
2133
+ box-sizing: border-box;
2134
+ `;
2135
+ const Close = styled.div `
2136
+ margin-left: auto;
2137
+ display: flex;
2138
+ align-items: center;
2139
+ padding-left: 20px;
2140
+ cursor: pointer;
2141
+ `;
2142
+ const CloseMsg = styled.span `
2143
+ font-size: ${FontSizes.SMALL};
2144
+ font-weight: 400;
2145
+ font-family: ${FontStyles.DEFAULT};
2146
+ line-height: 1em;
2147
+ color: ${Colors.MEDIUM_GRAY.Hex};
2148
+ `;
2149
+ const ContentWrapper = styled.div `
2150
+ overflow-x: hidden;
2151
+ overflow-y: auto;
2152
+ background: #ffffff;
2153
+ flex: 1;
2154
+ box-sizing: border-box;
2155
+ `;
2156
+ const ButtonBar = styled.div `
2157
+ flex-shrink: 0;
2158
+ background: #ffffff;
2159
+ padding: 20px;
2160
+ border-top: 1px solid #e7e6e6;
2161
+ display: flex;
2162
+ align-items: center;
2163
+ justify-self: flex-end;
2164
+ box-sizing: border-box;
2165
+ `;
2166
+ const ButtonContainer = styled.div `
2167
+ margin: 0 10px;
2159
2168
  `;
2160
2169
  const Modal = (_a) => {
2161
2170
  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"]);
@@ -2198,21 +2207,21 @@ const Modal = (_a) => {
2198
2207
  secondaryButton ? (React.createElement(ButtonContainer, { id: `${id}-secondary-button-container` },
2199
2208
  React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` })))) : null,
2200
2209
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)) : null)));
2201
- };
2202
-
2203
- const Wrapper$5 = styled.div `
2204
- position: relative;
2205
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2206
- `;
2207
- const Trigger = styled.div `
2208
- box-sizing: border-box;
2209
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2210
- height: 40px;
2211
- padding: 0 10px;
2212
- position: relative;
2213
- cursor: pointer;
2214
- border-width: 1px;
2215
- border-style: solid;
2210
+ };
2211
+
2212
+ const Wrapper$5 = styled.div `
2213
+ position: relative;
2214
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2215
+ `;
2216
+ const Trigger = styled.div `
2217
+ box-sizing: border-box;
2218
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2219
+ height: 40px;
2220
+ padding: 0 10px;
2221
+ position: relative;
2222
+ cursor: pointer;
2223
+ border-width: 1px;
2224
+ border-style: solid;
2216
2225
  border-color: ${props => {
2217
2226
  if (props.$invalid) {
2218
2227
  return Colors.RED.Hex;
@@ -2223,67 +2232,67 @@ const Trigger = styled.div `
2223
2232
  else {
2224
2233
  return '#cccccc';
2225
2234
  }
2226
- }};
2227
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2228
- background-image: none;
2229
- display: flex;
2230
- width: 100%;
2231
- align-items: center;
2232
- justify-content: space-between;
2233
- z-index: 1;
2235
+ }};
2236
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2237
+ background-image: none;
2238
+ display: flex;
2239
+ width: 100%;
2240
+ align-items: center;
2241
+ justify-content: space-between;
2242
+ z-index: 1;
2234
2243
  `;
2235
2244
  Trigger.defaultProps = { theme: EditableTheme };
2236
- const Value = styled.div `
2237
- color: ${Colors.BLACK.Hex};
2238
- font-family: ${FontStyles.DEFAULT};
2239
- font-size: ${FontSizes.DEFAULT};
2240
- font-weight: 400;
2241
- line-height: 2.9em;
2242
- overflow: hidden;
2243
- text-overflow: ellipsis;
2244
- white-space: nowrap;
2245
- width: 100%;
2246
- `;
2247
- const Options = styled.div `
2248
- background: #fff;
2249
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2250
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2251
- border-radius: 0px 0px 4px 4px;
2252
- border-style: solid;
2253
- border-top: none;
2254
- border-width: 1px;
2255
- left: 0;
2256
- position: absolute;
2257
- right: 0;
2258
- z-index: 10;
2259
- max-height: 220px;
2260
- overflow: auto;
2245
+ const Value = styled.div `
2246
+ color: ${Colors.BLACK.Hex};
2247
+ font-family: ${FontStyles.DEFAULT};
2248
+ font-size: ${FontSizes.DEFAULT};
2249
+ font-weight: 400;
2250
+ line-height: 2.9em;
2251
+ overflow: hidden;
2252
+ text-overflow: ellipsis;
2253
+ white-space: nowrap;
2254
+ width: 100%;
2255
+ `;
2256
+ const Options = styled.div `
2257
+ background: #fff;
2258
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2259
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2260
+ border-radius: 0px 0px 4px 4px;
2261
+ border-style: solid;
2262
+ border-top: none;
2263
+ border-width: 1px;
2264
+ left: 0;
2265
+ position: absolute;
2266
+ right: 0;
2267
+ z-index: 10;
2268
+ max-height: 220px;
2269
+ overflow: auto;
2261
2270
  `;
2262
2271
  Options.defaultProps = { theme: EditableTheme };
2263
- const Scrim = styled.div `
2264
- bottom: 0;
2265
- left: 0;
2266
- position: fixed;
2267
- right: 0;
2268
- top: 0;
2269
- z-index: 9;
2270
- `;
2271
- const SearchInput = styled.input `
2272
- position: absolute;
2273
- left: 2px;
2274
- top: 2px;
2275
- z-index: 999;
2276
- width: 90%;
2277
- height: 30px;
2278
- border: none;
2279
- outline: none;
2280
- color: ${Colors.BLACK.Hex};
2281
- font-family: ${FontStyles.DEFAULT};
2282
- font-size: ${FontSizes.DEFAULT};
2283
- font-weight: 400;
2284
- line-height: 2.9em;
2285
- overflow: hidden;
2286
- white-space: nowrap;
2272
+ const Scrim = styled.div `
2273
+ bottom: 0;
2274
+ left: 0;
2275
+ position: fixed;
2276
+ right: 0;
2277
+ top: 0;
2278
+ z-index: 9;
2279
+ `;
2280
+ const SearchInput = styled.input `
2281
+ position: absolute;
2282
+ left: 2px;
2283
+ top: 2px;
2284
+ z-index: 999;
2285
+ width: 90%;
2286
+ height: 30px;
2287
+ border: none;
2288
+ outline: none;
2289
+ color: ${Colors.BLACK.Hex};
2290
+ font-family: ${FontStyles.DEFAULT};
2291
+ font-size: ${FontSizes.DEFAULT};
2292
+ font-weight: 400;
2293
+ line-height: 2.9em;
2294
+ overflow: hidden;
2295
+ white-space: nowrap;
2287
2296
  `;
2288
2297
  const MultiSelect = (_a) => {
2289
2298
  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"]);
@@ -2303,37 +2312,37 @@ const MultiSelect = (_a) => {
2303
2312
  showOptions ? (React.createElement(Options, { id: `${id}-options` },
2304
2313
  React.createElement(Checklist, { id: `${id}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2305
2314
  showOptions ? (React.createElement(Scrim, { id: `${id}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
2306
- };
2307
-
2308
- const Wrapper$4 = styled.div `
2309
- display: flex;
2310
- padding: 16px 30px;
2311
- align-items: center;
2312
- gap: 20px;
2313
- align-self: stretch;
2314
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2315
- `;
2316
- const Title = styled.div `
2317
- display: flex;
2318
- align-items: center;
2319
- gap: 20px;
2320
- `;
2321
- const Info = styled.div `
2322
- display: flex;
2323
- flex-direction: column;
2324
- align-items: flex-start;
2325
- gap: 4px;
2326
- flex: 1 0 0;
2327
- `;
2328
- const Breadcrumbs = styled.div `
2329
- display: flex;
2330
- align-items: center;
2331
- gap: 4px;
2332
- `;
2333
- const Actions = styled.div `
2334
- display: flex;
2335
- align-items: center;
2336
- gap: 8px;
2315
+ };
2316
+
2317
+ const Wrapper$4 = styled.div `
2318
+ display: flex;
2319
+ padding: 16px 30px;
2320
+ align-items: center;
2321
+ gap: 20px;
2322
+ align-self: stretch;
2323
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2324
+ `;
2325
+ const Title = styled.div `
2326
+ display: flex;
2327
+ align-items: center;
2328
+ gap: 20px;
2329
+ `;
2330
+ const Info = styled.div `
2331
+ display: flex;
2332
+ flex-direction: column;
2333
+ align-items: flex-start;
2334
+ gap: 4px;
2335
+ flex: 1 0 0;
2336
+ `;
2337
+ const Breadcrumbs = styled.div `
2338
+ display: flex;
2339
+ align-items: center;
2340
+ gap: 4px;
2341
+ `;
2342
+ const Actions = styled.div `
2343
+ display: flex;
2344
+ align-items: center;
2345
+ gap: 8px;
2337
2346
  `;
2338
2347
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2339
2348
  const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, } = buttonMenu || {};
@@ -2356,13 +2365,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2356
2365
  return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
2357
2366
  }),
2358
2367
  menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
2359
- };
2360
-
2361
- const Wrapper$3 = styled.nav `
2362
- box-sizing: border-box;
2363
- display: flex;
2364
- align-items: center;
2365
- column-gap: 10px;
2368
+ };
2369
+
2370
+ const Wrapper$3 = styled.nav `
2371
+ box-sizing: border-box;
2372
+ display: flex;
2373
+ align-items: center;
2374
+ column-gap: 10px;
2366
2375
  `;
2367
2376
  const Pagination = (_a) => {
2368
2377
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2392,82 +2401,82 @@ const Pagination = (_a) => {
2392
2401
  value: `${p}`,
2393
2402
  })), value: `${currentPage}` }),
2394
2403
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, id: `${id}-next-button`, onClick: handleNextClick, small: true })));
2395
- };
2396
-
2397
- const Wrapper$2 = styled.label `
2398
- border-radius: 4px;
2399
- padding: 4px 0px 4px 6px;
2400
- margin-left: -6px;
2401
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2402
- display: flex;
2403
- align-items: center;
2404
- font-size: ${FontSizes.DEFAULT};
2405
- line-height: 1.6em;
2406
- box-sizing: border-box;
2407
- position: relative;
2408
-
2409
- &:focus-within {
2410
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2411
- }
2404
+ };
2405
+
2406
+ const Wrapper$2 = styled.label `
2407
+ border-radius: 4px;
2408
+ padding: 4px 0px 4px 6px;
2409
+ margin-left: -6px;
2410
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2411
+ display: flex;
2412
+ align-items: center;
2413
+ font-size: ${FontSizes.DEFAULT};
2414
+ line-height: 1.6em;
2415
+ box-sizing: border-box;
2416
+ position: relative;
2417
+
2418
+ &:focus-within {
2419
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2420
+ }
2412
2421
  `;
2413
2422
  Wrapper$2.defaultProps = { theme: EditableTheme };
2414
- const Input = styled.input `
2415
- font-size: 20px;
2416
- margin: 0px;
2417
- line-height: 1.6em;
2418
- box-sizing: border-box;
2419
- position: absolute;
2420
- opacity: 0;
2421
- cursor: pointer;
2422
- height: 0;
2423
- width: 0;
2424
- &:checked + span {
2425
- border-color: ${Colors.PRIMARY.Hex};
2426
- }
2427
- &:checked + span:after {
2428
- background-color: ${Colors.PRIMARY.Hex};
2429
- display: block;
2430
- }
2431
- &:disabled + span {
2432
- background-color: #d3d3d3;
2433
- border-color: #d3d3d3;
2434
- }
2435
- &:disabled + span:after {
2436
- background-color: #fff;
2437
- }
2438
- &:checked:disabled + span:after {
2439
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2440
- }
2441
- `;
2442
- const Check = styled.span `
2443
- height: 17px;
2444
- width: 17px;
2445
- border-radius: 50%;
2446
- background-color: #fff;
2447
- border-width: 2px;
2448
- border-style: solid;
2449
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2450
- box-sizing: border-box;
2451
- position: relative;
2452
- &:after {
2453
- content: '';
2454
- position: absolute;
2455
- top: 2px;
2456
- left: 2px;
2457
- width: 9px;
2458
- height: 9px;
2459
- border-radius: 50%;
2460
- box-sizing: border-box;
2461
- display: none;
2462
- }
2463
- `;
2464
- const Label = styled.span `
2465
- font-family: ${FontStyles.DEFAULT};
2466
- font-size: ${FontSizes.DEFAULT};
2467
- font-weight: 400;
2468
- color: ${Colors.BLACK.Hex};
2469
- line-height: 1.6em;
2470
- margin-left: 6px;
2423
+ const Input = styled.input `
2424
+ font-size: 20px;
2425
+ margin: 0px;
2426
+ line-height: 1.6em;
2427
+ box-sizing: border-box;
2428
+ position: absolute;
2429
+ opacity: 0;
2430
+ cursor: pointer;
2431
+ height: 0;
2432
+ width: 0;
2433
+ &:checked + span {
2434
+ border-color: ${Colors.PRIMARY.Hex};
2435
+ }
2436
+ &:checked + span:after {
2437
+ background-color: ${Colors.PRIMARY.Hex};
2438
+ display: block;
2439
+ }
2440
+ &:disabled + span {
2441
+ background-color: #d3d3d3;
2442
+ border-color: #d3d3d3;
2443
+ }
2444
+ &:disabled + span:after {
2445
+ background-color: #fff;
2446
+ }
2447
+ &:checked:disabled + span:after {
2448
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2449
+ }
2450
+ `;
2451
+ const Check = styled.span `
2452
+ height: 17px;
2453
+ width: 17px;
2454
+ border-radius: 50%;
2455
+ background-color: #fff;
2456
+ border-width: 2px;
2457
+ border-style: solid;
2458
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2459
+ box-sizing: border-box;
2460
+ position: relative;
2461
+ &:after {
2462
+ content: '';
2463
+ position: absolute;
2464
+ top: 2px;
2465
+ left: 2px;
2466
+ width: 9px;
2467
+ height: 9px;
2468
+ border-radius: 50%;
2469
+ box-sizing: border-box;
2470
+ display: none;
2471
+ }
2472
+ `;
2473
+ const Label = styled.span `
2474
+ font-family: ${FontStyles.DEFAULT};
2475
+ font-size: ${FontSizes.DEFAULT};
2476
+ font-weight: 400;
2477
+ color: ${Colors.BLACK.Hex};
2478
+ line-height: 1.6em;
2479
+ margin-left: 6px;
2471
2480
  `;
2472
2481
  const Radio = (_a) => {
2473
2482
  var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex"]);
@@ -2478,77 +2487,77 @@ const Radio = (_a) => {
2478
2487
  React.createElement(Label, { id: `${id}-label` },
2479
2488
  children,
2480
2489
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2481
- };
2482
-
2490
+ };
2491
+
2483
2492
  const RadioList = (_a) => {
2484
2493
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2485
2494
  return (React.createElement(React.Fragment, null, options.map((option) => {
2486
2495
  const label = option.label || option.value;
2487
2496
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2488
2497
  })));
2489
- };
2490
-
2491
- const StyledTable = styled.table `
2492
- width: 100%;
2493
- margin-top: 1px;
2494
- table-layout: ${props => props.$tableLayout || 'auto'};
2495
- border-collapse: collapse;
2496
- text-indent: 0px;
2497
- border-spacing: 0px;
2498
- border-color: none;
2499
- box-sizing: border-box;
2500
- `;
2501
- const Header = styled.th `
2502
- padding: 12px !important;
2503
- text-align: left;
2504
- font-weight: 500;
2505
- border-bottom: 1px solid #e5e5e5;
2506
- border-top: 1px solid #e5e5e5;
2507
- text-transform: uppercase;
2508
- font-size: 12px;
2509
- font-family: ${FontStyles.DEFAULT};
2510
- letter-spacing: 1px;
2511
- white-space: nowrap;
2512
- line-height: 1;
2513
- position: relative;
2514
- box-sizing: border-box;
2515
- width: ${props => props.$width || 'auto'};
2516
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2517
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2498
+ };
2499
+
2500
+ const StyledTable = styled.table `
2501
+ width: 100%;
2502
+ margin-top: 1px;
2503
+ table-layout: ${props => props.$tableLayout || 'auto'};
2504
+ border-collapse: collapse;
2505
+ text-indent: 0px;
2506
+ border-spacing: 0px;
2507
+ border-color: none;
2508
+ box-sizing: border-box;
2509
+ `;
2510
+ const Header = styled.th `
2511
+ padding: 12px !important;
2512
+ text-align: left;
2513
+ font-weight: 500;
2514
+ border-bottom: 1px solid #e5e5e5;
2515
+ border-top: 1px solid #e5e5e5;
2516
+ text-transform: uppercase;
2517
+ font-size: 12px;
2518
+ font-family: ${FontStyles.DEFAULT};
2519
+ letter-spacing: 1px;
2520
+ white-space: nowrap;
2521
+ line-height: 1;
2522
+ position: relative;
2523
+ box-sizing: border-box;
2524
+ width: ${props => props.$width || 'auto'};
2525
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2526
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2518
2527
  `;
2519
2528
  Header.defaultProps = { theme: EditableTheme };
2520
- const Row = styled.tr `
2521
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2522
- transition: all 0.2s;
2523
- background-color: ${props => props.$bgColor};
2524
- box-sizing: border-box;
2525
- &:hover {
2526
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2527
- }
2529
+ const Row = styled.tr `
2530
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2531
+ transition: all 0.2s;
2532
+ background-color: ${props => props.$bgColor};
2533
+ box-sizing: border-box;
2534
+ &:hover {
2535
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2536
+ }
2528
2537
  `;
2529
2538
  Row.defaultProps = { theme: EditableTheme };
2530
- const Column = styled.td `
2531
- padding: 16px 12px !important;
2532
- font-size: ${FontSizes.DEFAULT} !important;
2533
- font-weight: 400 !important;
2534
- font-family: ${FontStyles.DEFAULT};
2535
- border: none !important;
2536
- word-break: break-word;
2537
- line-height: 1.4em;
2538
- box-sizing: border-box;
2539
- text-align: ${props => props.$align || 'left'};
2540
- width: ${props => props.$width || 'auto'};
2541
- `;
2542
- const IconWrapper = styled.span `
2543
- position: absolute;
2544
- top: 50%;
2545
- transform: translateY(-50%);
2546
- margin-left: 2px;
2547
- `;
2548
- const StyledIcon$1 = styled(Icon) `
2549
- > path {
2550
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2551
- }
2539
+ const Column = styled.td `
2540
+ padding: 16px 12px !important;
2541
+ font-size: ${FontSizes.DEFAULT} !important;
2542
+ font-weight: 400 !important;
2543
+ font-family: ${FontStyles.DEFAULT};
2544
+ border: none !important;
2545
+ word-break: break-word;
2546
+ line-height: 1.4em;
2547
+ box-sizing: border-box;
2548
+ text-align: ${props => props.$align || 'left'};
2549
+ width: ${props => props.$width || 'auto'};
2550
+ `;
2551
+ const IconWrapper = styled.span `
2552
+ position: absolute;
2553
+ top: 50%;
2554
+ transform: translateY(-50%);
2555
+ margin-left: 2px;
2556
+ `;
2557
+ const StyledIcon$1 = styled(Icon) `
2558
+ > path {
2559
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2560
+ }
2552
2561
  `;
2553
2562
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2554
2563
  const Table = (_a) => {
@@ -2570,55 +2579,55 @@ const Table = (_a) => {
2570
2579
  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'));
2571
2580
  })));
2572
2581
  }))) : null));
2573
- };
2574
-
2575
- const Wrapper$1 = styled.div `
2576
- display: flex;
2577
- box-sizing: border-box;
2578
- align-items: flex-end;
2579
- border-top: 1px solid #e5e5e5;
2580
- border-bottom: 1px solid #e5e5e5;
2581
- flex-shrink: 0;
2582
- align-self: stretch;
2583
- padding: 0;
2584
- margin: 0;
2585
- `;
2586
- const Tab = styled.div `
2587
- display: flex;
2588
- align-items: center;
2589
- gap: 6px;
2590
- font-size: ${FontSizes.DEFAULT};
2591
- font-family: ${FontStyles.DEFAULT};
2592
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2593
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2594
- line-height: 1em;
2595
- padding: 16px 30px 12px;
2596
- margin: 0 0 -1px 0;
2597
- border-bottom-width: 4px;
2598
- border-bottom-style: solid;
2599
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2600
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2601
- box-sizing: border-box;
2602
- &:hover {
2603
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2604
- font-weight: 500;
2605
- }
2582
+ };
2583
+
2584
+ const Wrapper$1 = styled.div `
2585
+ display: flex;
2586
+ box-sizing: border-box;
2587
+ align-items: flex-end;
2588
+ border-top: 1px solid #e5e5e5;
2589
+ border-bottom: 1px solid #e5e5e5;
2590
+ flex-shrink: 0;
2591
+ align-self: stretch;
2592
+ padding: 0;
2593
+ margin: 0;
2594
+ `;
2595
+ const Tab = styled.div `
2596
+ display: flex;
2597
+ align-items: center;
2598
+ gap: 6px;
2599
+ font-size: ${FontSizes.DEFAULT};
2600
+ font-family: ${FontStyles.DEFAULT};
2601
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2602
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2603
+ line-height: 1em;
2604
+ padding: 16px 30px 12px;
2605
+ margin: 0 0 -1px 0;
2606
+ border-bottom-width: 4px;
2607
+ border-bottom-style: solid;
2608
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2609
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2610
+ box-sizing: border-box;
2611
+ &:hover {
2612
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2613
+ font-weight: 500;
2614
+ }
2606
2615
  `;
2607
2616
  Tab.defaultProps = { theme: EditableTheme };
2608
- const Badge = styled.div `
2609
- display: flex;
2610
- width: 18px;
2611
- height: 18px;
2612
- justify-content: center;
2613
- align-items: center;
2614
- border-radius: 9px;
2615
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2616
- color: #fff;
2617
- font-family: ${FontStyles.DEFAULT};
2618
- font-size: 12px;
2619
- font-weight: 500;
2620
- line-height: 1;
2621
- letter-spacing: 1px;
2617
+ const Badge = styled.div `
2618
+ display: flex;
2619
+ width: 18px;
2620
+ height: 18px;
2621
+ justify-content: center;
2622
+ align-items: center;
2623
+ border-radius: 9px;
2624
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2625
+ color: #fff;
2626
+ font-family: ${FontStyles.DEFAULT};
2627
+ font-size: 12px;
2628
+ font-weight: 500;
2629
+ line-height: 1;
2630
+ letter-spacing: 1px;
2622
2631
  `;
2623
2632
  Badge.defaultProps = { theme: EditableTheme };
2624
2633
  const Tabs = (_a) => {
@@ -2632,29 +2641,29 @@ const Tabs = (_a) => {
2632
2641
  label));
2633
2642
  })));
2634
2643
  };
2635
- Tabs.defaultProps = {};
2636
-
2637
- const Track = styled.div `
2638
- height: 24px;
2639
- border-radius: 12px;
2640
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2641
- display: flex;
2642
- align-items: center;
2643
- cursor: pointer;
2644
- width: 40px;
2645
- padding: 2px;
2646
- box-sizing: border-box;
2647
- `;
2648
- const Handle = styled.div `
2649
- width: 20px;
2650
- height: 20px;
2651
- border-radius: 10px;
2652
- background: #ffffff;
2653
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2654
- display: flex;
2655
- align-items: center;
2656
- justify-content: center;
2657
- box-sizing: border-box;
2644
+ Tabs.defaultProps = {};
2645
+
2646
+ const Track = styled.div `
2647
+ height: 24px;
2648
+ border-radius: 12px;
2649
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2650
+ display: flex;
2651
+ align-items: center;
2652
+ cursor: pointer;
2653
+ width: 40px;
2654
+ padding: 2px;
2655
+ box-sizing: border-box;
2656
+ `;
2657
+ const Handle = styled.div `
2658
+ width: 20px;
2659
+ height: 20px;
2660
+ border-radius: 10px;
2661
+ background: #ffffff;
2662
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2663
+ display: flex;
2664
+ align-items: center;
2665
+ justify-content: center;
2666
+ box-sizing: border-box;
2658
2667
  `;
2659
2668
  const Toggle = (_a) => {
2660
2669
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2664,32 +2673,32 @@ const Toggle = (_a) => {
2664
2673
  React.createElement(Handle, { "$on": on, id: `${id}-handle` },
2665
2674
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${id}-icon`, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2666
2675
  };
2667
- Toggle.defaultProps = {};
2668
-
2669
- const Container = styled.div `
2670
- width: 100%;
2671
- padding: 40px auto;
2672
- gap: 20px;
2673
- display: flex;
2674
- flex-direction: column;
2675
- justify-items: center;
2676
- align-items: center;
2677
- `;
2678
- const Wrapper = styled.div `
2679
- gap: 10px;
2680
- display: flex;
2681
- flex-direction: column;
2682
- justify-items: center;
2683
- align-items: center;
2684
- `;
2685
- const StyledIcon = styled.div `
2686
- display: flex;
2687
- align-items: center;
2688
- justify-content: center;
2689
- width: 80px;
2690
- height: 80px;
2691
- border-radius: 40px;
2692
- background: #f5f5f5;
2676
+ Toggle.defaultProps = {};
2677
+
2678
+ const Container = styled.div `
2679
+ width: 100%;
2680
+ padding: 40px auto;
2681
+ gap: 20px;
2682
+ display: flex;
2683
+ flex-direction: column;
2684
+ justify-items: center;
2685
+ align-items: center;
2686
+ `;
2687
+ const Wrapper = styled.div `
2688
+ gap: 10px;
2689
+ display: flex;
2690
+ flex-direction: column;
2691
+ justify-items: center;
2692
+ align-items: center;
2693
+ `;
2694
+ const StyledIcon = styled.div `
2695
+ display: flex;
2696
+ align-items: center;
2697
+ justify-content: center;
2698
+ width: 80px;
2699
+ height: 80px;
2700
+ border-radius: 40px;
2701
+ background: #f5f5f5;
2693
2702
  `;
2694
2703
  const ZeroState = (_a) => {
2695
2704
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2701,53 +2710,53 @@ const ZeroState = (_a) => {
2701
2710
  React.createElement(Heading, { children: title, id: `${id}-heading`, type: 'tertiary' }),
2702
2711
  description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${id}-description`, type: 'default' }))),
2703
2712
  action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${id}-button`, onClick: action.onClick }))));
2704
- };
2705
-
2706
- exports.Accordion = Accordion;
2707
- exports.ActionDialog = ActionDialog;
2708
- exports.Alert = Alert;
2709
- exports.AppHeader = AppHeader;
2710
- exports.AppMenu = AppMenu;
2711
- exports.BulkActionBar = BulkActionBar;
2712
- exports.Button = Button;
2713
- exports.ButtonMenu = ButtonMenu;
2714
- exports.Checkbox = Checkbox;
2715
- exports.Checklist = Checklist;
2716
- exports.Colors = Colors;
2717
- exports.Copy = Copy;
2718
- exports.DatePicker = DatePicker;
2719
- exports.Drawer = Drawer;
2720
- exports.EditableTheme = EditableTheme;
2721
- exports.Field = Field;
2722
- exports.FieldGroup = FieldGroup;
2723
- exports.FileUpload = FileUpload;
2724
- exports.FontSizes = FontSizes;
2725
- exports.FontStyles = FontStyles;
2726
- exports.Heading = Heading;
2727
- exports.Input = Input$1;
2728
- exports.Link = Link;
2729
- exports.Loader = Loader;
2730
- exports.Logo = Logo;
2731
- exports.Modal = Modal;
2732
- exports.MoreMenu = MoreMenu;
2733
- exports.MultiSelect = MultiSelect;
2734
- exports.PageHeader = PageHeader;
2735
- exports.Pagination = Pagination;
2736
- exports.ProgressBar = ProgressBar;
2737
- exports.Radio = Radio;
2738
- exports.RadioList = RadioList;
2739
- exports.Select = Select;
2740
- exports.Table = Table;
2741
- exports.Tabs = Tabs;
2742
- exports.Tag = Tag;
2743
- exports.Toggle = Toggle;
2744
- exports.Tooltip = Tooltip;
2745
- exports.ZeroState = ZeroState;
2746
- exports.formatAsPhone = formatAsPhone;
2747
- exports.formatAsSsn = formatAsSsn;
2748
- exports.getAgesFromDob = getAgesFromDob;
2749
- exports.getDaysForMonth = getDaysForMonth;
2750
- exports.getYears = getYears;
2751
- exports.validateEmail = validateEmail;
2752
- exports.validatePhone = validatePhone;
2753
- //# sourceMappingURL=index.js.map
2713
+ };
2714
+
2715
+ exports.Accordion = Accordion;
2716
+ exports.ActionDialog = ActionDialog;
2717
+ exports.Alert = Alert;
2718
+ exports.AppHeader = AppHeader;
2719
+ exports.AppMenu = AppMenu;
2720
+ exports.BulkActionBar = BulkActionBar;
2721
+ exports.Button = Button;
2722
+ exports.ButtonMenu = ButtonMenu;
2723
+ exports.Checkbox = Checkbox;
2724
+ exports.Checklist = Checklist;
2725
+ exports.Colors = Colors;
2726
+ exports.Copy = Copy;
2727
+ exports.DatePicker = DatePicker;
2728
+ exports.Drawer = Drawer;
2729
+ exports.EditableTheme = EditableTheme;
2730
+ exports.Field = Field;
2731
+ exports.FieldGroup = FieldGroup;
2732
+ exports.FileUpload = FileUpload;
2733
+ exports.FontSizes = FontSizes;
2734
+ exports.FontStyles = FontStyles;
2735
+ exports.Heading = Heading;
2736
+ exports.Input = Input$1;
2737
+ exports.Link = Link;
2738
+ exports.Loader = Loader;
2739
+ exports.Logo = Logo;
2740
+ exports.Modal = Modal;
2741
+ exports.MoreMenu = MoreMenu;
2742
+ exports.MultiSelect = MultiSelect;
2743
+ exports.PageHeader = PageHeader;
2744
+ exports.Pagination = Pagination;
2745
+ exports.ProgressBar = ProgressBar;
2746
+ exports.Radio = Radio;
2747
+ exports.RadioList = RadioList;
2748
+ exports.Select = Select;
2749
+ exports.Table = Table;
2750
+ exports.Tabs = Tabs;
2751
+ exports.Tag = Tag;
2752
+ exports.Toggle = Toggle;
2753
+ exports.Tooltip = Tooltip;
2754
+ exports.ZeroState = ZeroState;
2755
+ exports.formatAsPhone = formatAsPhone;
2756
+ exports.formatAsSsn = formatAsSsn;
2757
+ exports.getAgesFromDob = getAgesFromDob;
2758
+ exports.getDaysForMonth = getDaysForMonth;
2759
+ exports.getYears = getYears;
2760
+ exports.validateEmail = validateEmail;
2761
+ exports.validatePhone = validatePhone;
2762
+ //# sourceMappingURL=index.js.map