@hexure/ui 1.13.40 → 1.13.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/index.js +1516 -1516
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +1468 -1468
  4. package/dist/esm/index.js.map +1 -1
  5. package/package.json +1 -1
  6. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  7. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
  8. /package/dist/esm/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  9. /package/dist/esm/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
package/dist/esm/index.js CHANGED
@@ -1,11 +1,11 @@
1
- import React, { useState, useContext, useRef, useEffect } from 'react';
2
- import styled, { ThemeContext, keyframes } from 'styled-components';
3
- import Icon, { Icon as Icon$1 } from '@mdi/react';
4
- import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
- import dayjs from 'dayjs';
6
- import Numeral from 'numeral';
7
- import Moment from 'moment';
8
-
1
+ import React, { useState, useContext, useRef, useEffect } from 'react';
2
+ import styled, { ThemeContext, keyframes } from 'styled-components';
3
+ import Icon, { Icon as Icon$1 } from '@mdi/react';
4
+ import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
+ import dayjs from 'dayjs';
6
+ import Numeral from 'numeral';
7
+ import Moment from 'moment';
8
+
9
9
  /******************************************************************************
10
10
  Copyright (c) Microsoft Corporation.
11
11
 
@@ -19,22 +19,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
19
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
20
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
21
  PERFORMANCE OF THIS SOFTWARE.
22
- ***************************************************************************** */
23
- /* global Reflect, Promise, SuppressedError, Symbol */
24
-
25
- function __rest(s, e) {
26
- var t = {};
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
- }
31
- return t;
32
- }
33
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
34
- var e = new Error(message);
35
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
36
- };
37
-
22
+ ***************************************************************************** */
23
+ /* global Reflect, Promise, SuppressedError, Symbol */
24
+
25
+ function __rest(s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
+ }
31
+ return t;
32
+ }
33
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
34
+ var e = new Error(message);
35
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
36
+ };
37
+
38
38
  const Colors = {
39
39
  PRIMARY: {
40
40
  Hex: '#0193D7',
@@ -83,26 +83,26 @@ const FontSizes = {
83
83
  };
84
84
  const EditableTheme = {
85
85
  PRIMARY_COLOR: Colors.PRIMARY,
86
- };
87
-
88
- const Header$3 = styled.div `
89
- display: flex;
90
- align-items: center;
91
- justify-content: space-between;
92
- box-sizing: border-box;
93
- background: #f5f5f5;
94
- border: 1px solid #e5e5e5;
95
- padding: 14px 20px;
96
- height: 50px;
97
- cursor: pointer;
98
- `;
99
- const Title$2 = styled.div `
100
- font-size: ${FontSizes.DEFAULT};
101
- font-weight: 400;
102
- color: ${Colors.BLACK.Hex};
103
- line-height: 1.6em;
104
- font-family: ${FontStyles.DEFAULT};
105
- box-sizing: border-box;
86
+ };
87
+
88
+ const Header$3 = styled.div `
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: space-between;
92
+ box-sizing: border-box;
93
+ background: #f5f5f5;
94
+ border: 1px solid #e5e5e5;
95
+ padding: 14px 20px;
96
+ height: 50px;
97
+ cursor: pointer;
98
+ `;
99
+ const Title$2 = styled.div `
100
+ font-size: ${FontSizes.DEFAULT};
101
+ font-weight: 400;
102
+ color: ${Colors.BLACK.Hex};
103
+ line-height: 1.6em;
104
+ font-family: ${FontStyles.DEFAULT};
105
+ box-sizing: border-box;
106
106
  `;
107
107
  const Accordion = (_a) => {
108
108
  var { id, title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["id", "title", "children", "open", "onClick"]);
@@ -112,21 +112,21 @@ const Accordion = (_a) => {
112
112
  React.createElement(Title$2, { id: `${baseId}-title` }, title),
113
113
  React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${baseId}-icon`, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
114
114
  open ? React.createElement("div", { id: `${baseId}-content` }, children) : null));
115
- };
116
-
117
- const StyledComponent = styled.p `
118
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
119
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
120
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
121
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
122
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
123
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
124
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
125
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
126
- margin: ${props => props.$margin || '0px'};
127
- padding: ${props => props.$padding || '0px'};
128
- text-align: ${props => props.$align || 'left'};
129
- box-sizing: border-box;
115
+ };
116
+
117
+ const StyledComponent = styled.p `
118
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
119
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
120
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
121
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
122
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
123
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
124
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
125
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
126
+ margin: ${props => props.$margin || '0px'};
127
+ padding: ${props => props.$padding || '0px'};
128
+ text-align: ${props => props.$align || 'left'};
129
+ box-sizing: border-box;
130
130
  `;
131
131
  const Copy = (_a) => {
132
132
  var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', id } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color", "id"]);
@@ -135,19 +135,19 @@ const Copy = (_a) => {
135
135
  };
136
136
  Copy.defaultProps = {
137
137
  type: 'default',
138
- };
139
-
140
- const Wrapper$h = styled.div `
141
- display: inline-block;
142
- position: relative;
143
- height: 16px;
144
- `;
145
- const StyledIcon$6 = styled(Icon) `
146
- width: 16px;
147
- height: 16px;
148
- margin: 0px 6px;
149
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
150
- cursor: pointer;
138
+ };
139
+
140
+ const Wrapper$h = styled.div `
141
+ display: inline-block;
142
+ position: relative;
143
+ height: 16px;
144
+ `;
145
+ const StyledIcon$6 = styled(Icon) `
146
+ width: 16px;
147
+ height: 16px;
148
+ margin: 0px 6px;
149
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
150
+ cursor: pointer;
151
151
  `;
152
152
  StyledIcon$6.defaultProps = { theme: EditableTheme };
153
153
  const positions = {
@@ -186,13 +186,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, i
186
186
  return (React.createElement(Wrapper$h, { id: `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
187
187
  trigger || React.createElement(StyledIcon$6, { id: `${baseId}-icon`, path: mdiInformationOutline }),
188
188
  show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, id: `${baseId}-content` }, children && (React.createElement(Copy, { id: `${baseId}-copy`, type: 'small' }, children)))) : null));
189
- };
190
-
191
- const StyledButton = styled.button `
192
- height: ${props => (props.$small ? '30px' : '40px')};
193
- line-height: 1em;
194
- border-radius: ${props => (props.$small ? '15px' : '20px')};
195
- margin: ${props => props.$margin || '0px'};
189
+ };
190
+
191
+ const StyledButton = styled.button `
192
+ height: ${props => (props.$small ? '30px' : '40px')};
193
+ line-height: 1em;
194
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
195
+ margin: ${props => props.$margin || '0px'};
196
196
  padding: ${props => {
197
197
  if (props.$hasChildren) {
198
198
  if (props.$small) {
@@ -203,9 +203,9 @@ const StyledButton = styled.button `
203
203
  }
204
204
  }
205
205
  return '0px';
206
- }};
207
- outline: none;
208
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
206
+ }};
207
+ outline: none;
208
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
209
209
  width: ${props => {
210
210
  if (props.$hasChildren) {
211
211
  return 'auto';
@@ -214,55 +214,55 @@ const StyledButton = styled.button `
214
214
  return '30px';
215
215
  }
216
216
  return '40px';
217
- }};
218
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
219
- display: flex;
220
- align-items: center;
221
- justify-content: center;
222
- gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
223
- flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
224
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
225
- border-width: 1px;
226
- border-style: solid;
227
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
228
- box-sizing: border-box;
229
-
230
- &:active,
231
- &:focus,
232
- &:hover {
233
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
234
- }
235
- `;
236
- const Label$5 = styled.span `
237
- color: ${props => props.$content_color || '#fff'};
238
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
239
- font-family: ${FontStyles.DEFAULT};
240
- font-weight: 500;
241
- line-height: 1;
242
- `;
243
- const StyledIcon$5 = styled.span `
244
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
245
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
246
- display: flex;
247
- align-items: center;
248
- box-sizing: border-box;
249
- `;
250
- const Badge$1 = styled.span `
251
- width: ${props => (props.$small ? '20px' : '24px')};
252
- height: ${props => (props.$small ? '20px' : '24px')};
253
- line-height: 1;
254
- display: flex;
255
- align-items: center;
256
- justify-content: center;
257
- border-radius: 100%;
258
- background-color: ${props => props.$bg_color || '#fff'};
259
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
260
- font-size: ${props => (props.$small ? '10px' : '12px')};
261
- font-weight: 600;
262
- font-family: ${FontStyles.DEFAULT};
263
- letter-spacing: -1px;
264
- margin-left: ${props => (props.$small ? '5px' : '10px')};
265
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
217
+ }};
218
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
219
+ display: flex;
220
+ align-items: center;
221
+ justify-content: center;
222
+ gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
223
+ flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
224
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
225
+ border-width: 1px;
226
+ border-style: solid;
227
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
228
+ box-sizing: border-box;
229
+
230
+ &:active,
231
+ &:focus,
232
+ &:hover {
233
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
234
+ }
235
+ `;
236
+ const Label$5 = styled.span `
237
+ color: ${props => props.$content_color || '#fff'};
238
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
239
+ font-family: ${FontStyles.DEFAULT};
240
+ font-weight: 500;
241
+ line-height: 1;
242
+ `;
243
+ const StyledIcon$5 = styled.span `
244
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
245
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
246
+ display: flex;
247
+ align-items: center;
248
+ box-sizing: border-box;
249
+ `;
250
+ const Badge$1 = styled.span `
251
+ width: ${props => (props.$small ? '20px' : '24px')};
252
+ height: ${props => (props.$small ? '20px' : '24px')};
253
+ line-height: 1;
254
+ display: flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ border-radius: 100%;
258
+ background-color: ${props => props.$bg_color || '#fff'};
259
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
260
+ font-size: ${props => (props.$small ? '10px' : '12px')};
261
+ font-weight: 600;
262
+ font-family: ${FontStyles.DEFAULT};
263
+ letter-spacing: -1px;
264
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
265
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
266
266
  `;
267
267
  const Button = (_a) => {
268
268
  var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', iconPosition = 'after', toolTip, title = '', id } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title", "id"]);
@@ -309,37 +309,37 @@ const Button = (_a) => {
309
309
  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));
310
310
  }
311
311
  return button_view;
312
- };
313
-
314
- const H1 = styled.h1 `
315
- color: ${Colors.BLACK.Hex};
316
- font-size: 30px;
317
- font-weight: ${props => (props.$bold ? '500' : '400')};
318
- line-height: 1.4em;
319
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
320
- margin: ${props => props.$margin || '0px'};
321
- padding: ${props => props.$padding || '0px'};
322
- box-sizing: border-box;
323
- `;
324
- const H2 = styled.h2 `
325
- color: ${Colors.BLACK.Hex};
326
- font-size: 24px;
327
- font-weight: ${props => (props.$bold ? '500' : '400')};
328
- line-height: 1.33em;
329
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
330
- margin: ${props => props.$margin || '0px'};
331
- padding: ${props => props.$padding || '0px'};
332
- box-sizing: border-box;
333
- `;
334
- const H3 = styled.h3 `
335
- color: ${Colors.BLACK.Hex};
336
- font-size: 18px;
337
- font-weight: ${props => (props.$bold ? '500' : '400')};
338
- line-height: 1.33em;
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;
312
+ };
313
+
314
+ const H1 = styled.h1 `
315
+ color: ${Colors.BLACK.Hex};
316
+ font-size: 30px;
317
+ font-weight: ${props => (props.$bold ? '500' : '400')};
318
+ line-height: 1.4em;
319
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
320
+ margin: ${props => props.$margin || '0px'};
321
+ padding: ${props => props.$padding || '0px'};
322
+ box-sizing: border-box;
323
+ `;
324
+ const H2 = styled.h2 `
325
+ color: ${Colors.BLACK.Hex};
326
+ font-size: 24px;
327
+ font-weight: ${props => (props.$bold ? '500' : '400')};
328
+ line-height: 1.33em;
329
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
330
+ margin: ${props => props.$margin || '0px'};
331
+ padding: ${props => props.$padding || '0px'};
332
+ box-sizing: border-box;
333
+ `;
334
+ const H3 = styled.h3 `
335
+ color: ${Colors.BLACK.Hex};
336
+ font-size: 18px;
337
+ font-weight: ${props => (props.$bold ? '500' : '400')};
338
+ line-height: 1.33em;
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
343
  `;
344
344
  const Heading = (_a) => {
345
345
  var { bold, children, margin, padding, type, id } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type", "id"]);
@@ -359,29 +359,29 @@ const Heading = (_a) => {
359
359
  Heading.defaultProps = {
360
360
  bold: false,
361
361
  type: 'primary',
362
- };
363
-
364
- const Wrapper$g = styled.div `
365
- position: fixed;
366
- top: 0;
367
- right: 0;
368
- bottom: 0;
369
- left: 0;
370
- z-index: 9999;
371
- background: rgba(0, 0, 0, 0.8);
372
- display: flex;
373
- align-items: center;
374
- justify-content: center;
375
- box-sizing: border-box;
362
+ };
363
+
364
+ const Wrapper$g = styled.div `
365
+ position: fixed;
366
+ top: 0;
367
+ right: 0;
368
+ bottom: 0;
369
+ left: 0;
370
+ z-index: 9999;
371
+ background: rgba(0, 0, 0, 0.8);
372
+ display: flex;
373
+ align-items: center;
374
+ justify-content: center;
375
+ box-sizing: border-box;
376
376
  `;
377
377
  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)));
378
- const Buttons$1 = styled.div `
379
- display: flex;
380
- gap: 10px;
381
- align-items: center;
382
- justify-content: center;
383
- margin-top: 30px;
384
- box-sizing: border-box;
378
+ const Buttons$1 = styled.div `
379
+ display: flex;
380
+ gap: 10px;
381
+ align-items: center;
382
+ justify-content: center;
383
+ margin-top: 30px;
384
+ box-sizing: border-box;
385
385
  `;
386
386
  const ActionDialog = (_a) => {
387
387
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {}, id } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style", "id"]);
@@ -394,29 +394,29 @@ const ActionDialog = (_a) => {
394
394
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${baseId}-tertiary-button` }))) : null,
395
395
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${baseId}-secondary-button` }))) : null,
396
396
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${baseId}-primary-button` }))) : null)) : null)));
397
- };
398
-
399
- const Wrapper$f = styled.div `
400
- border: 1px solid #f1f1f1;
401
- border-radius: 4px;
402
- border-left-width: 4px;
403
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
404
- display: flex;
405
- align-items: flex-start;
406
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
407
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
408
- box-sizing: border-box;
409
- `;
410
- const StyledIcon$4 = styled(Icon) `
411
- flex-shrink: 0;
412
- `;
413
- const Action$1 = styled.div `
414
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
415
- font-size: ${FontSizes.DEFAULT};
416
- font-family: ${FontStyles.DEFAULT};
417
- font-weight: 500;
418
- cursor: pointer;
419
- margin-top: 6px;
397
+ };
398
+
399
+ const Wrapper$f = styled.div `
400
+ border: 1px solid #f1f1f1;
401
+ border-radius: 4px;
402
+ border-left-width: 4px;
403
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
404
+ display: flex;
405
+ align-items: flex-start;
406
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
407
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
408
+ box-sizing: border-box;
409
+ `;
410
+ const StyledIcon$4 = styled(Icon) `
411
+ flex-shrink: 0;
412
+ `;
413
+ const Action$1 = styled.div `
414
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
415
+ font-size: ${FontSizes.DEFAULT};
416
+ font-family: ${FontStyles.DEFAULT};
417
+ font-weight: 500;
418
+ cursor: pointer;
419
+ margin-top: 6px;
420
420
  `;
421
421
  Action$1.defaultProps = { theme: EditableTheme };
422
422
  const Alert = (_a) => {
@@ -447,8 +447,8 @@ const Alert = (_a) => {
447
447
  title && !small ? (React.createElement(Heading, { bold: true, id: `${baseId}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
448
448
  description ? (React.createElement(Copy, { id: `${baseId}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
449
449
  action && !small ? (React.createElement(Action$1, { id: `${baseId}-action`, onClick: action.onClick }, action.label)) : null)));
450
- };
451
-
450
+ };
451
+
452
452
  const colorMapping = {
453
453
  black: {
454
454
  fill_1: '#000000',
@@ -490,62 +490,62 @@ const Logo = (_a) => {
490
490
  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: `${baseId}-path-7` }),
491
491
  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: `${baseId}-path-8` })));
492
492
  }
493
- };
494
-
495
- const Container$3 = styled.header `
496
- width: 100%;
497
- display: flex;
498
- padding: 20px;
499
- box-sizing: border-box;
500
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
501
- background: '#fff';
502
- justify-content: space-between;
503
- `;
504
- const LogoWrapper = styled.div `
505
- display: flex;
506
- align-items: center;
507
- `;
508
- const Image = styled.img `
509
- height: 30px !important;
510
- width: auto !important;
511
- `;
512
- const Buttons = styled.div `
513
- display: flex;
514
- flex-direction: row;
515
- column-gap: 10px;
516
- flex-direction: reverse;
493
+ };
494
+
495
+ const Container$3 = styled.header `
496
+ width: 100%;
497
+ display: flex;
498
+ padding: 20px;
499
+ box-sizing: border-box;
500
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
501
+ background: '#fff';
502
+ justify-content: space-between;
503
+ `;
504
+ const LogoWrapper = styled.div `
505
+ display: flex;
506
+ align-items: center;
507
+ `;
508
+ const Image = styled.img `
509
+ height: 30px !important;
510
+ width: auto !important;
511
+ `;
512
+ const Buttons = styled.div `
513
+ display: flex;
514
+ flex-direction: row;
515
+ column-gap: 10px;
516
+ flex-direction: reverse;
517
517
  `;
518
518
  const AppHeader = ({ logoUrl, buttons = [], id }) => {
519
519
  const baseId = id || 'app-header';
520
520
  return (React.createElement(Container$3, { id: `${baseId}-container` },
521
521
  React.createElement(LogoWrapper, { id: `${baseId}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { id: `${baseId}-logo`, src: logoUrl })) : (React.createElement(Logo, { height: '30px', id: `${baseId}-default-logo` }))),
522
522
  React.createElement(Buttons, { id: `${baseId}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { id: `${baseId}-button-${i}` })))))));
523
- };
524
-
525
- const Wrapper$e = styled.div `
526
- display: inline-block;
527
- border-radius: 4px;
528
- padding: 4px 6px;
529
- background: ${props => Colors[props.$color].Hex};
530
- color: #ffffff;
531
- box-sizing: border-box;
532
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
533
- `;
534
- const Content$2 = styled.div `
535
- display: flex;
536
- align-items: center;
537
- `;
538
- const Label$4 = styled.div `
539
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
540
- font-size: ${FontSizes.SMALL};
541
- font-weight: 500;
542
- font-family: ${FontStyles.DEFAULT};
543
- line-height: 1.2em;
544
- `;
545
- const Remove$1 = styled.div `
546
- margin-left: 10px;
547
- display: flex;
548
- align-items: center;
523
+ };
524
+
525
+ const Wrapper$e = styled.div `
526
+ display: inline-block;
527
+ border-radius: 4px;
528
+ padding: 4px 6px;
529
+ background: ${props => Colors[props.$color].Hex};
530
+ color: #ffffff;
531
+ box-sizing: border-box;
532
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
533
+ `;
534
+ const Content$2 = styled.div `
535
+ display: flex;
536
+ align-items: center;
537
+ `;
538
+ const Label$4 = styled.div `
539
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
540
+ font-size: ${FontSizes.SMALL};
541
+ font-weight: 500;
542
+ font-family: ${FontStyles.DEFAULT};
543
+ line-height: 1.2em;
544
+ `;
545
+ const Remove$1 = styled.div `
546
+ margin-left: 10px;
547
+ display: flex;
548
+ align-items: center;
549
549
  `;
550
550
  const Tag = (_a) => {
551
551
  var { children, color = 'PRIMARY', removable, onClick, id } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick", "id"]);
@@ -555,94 +555,94 @@ const Tag = (_a) => {
555
555
  React.createElement(Label$4, { "$color": color, id: `${baseId}-label` }, children),
556
556
  removable ? (React.createElement(Remove$1, { id: `${baseId}-remove` },
557
557
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', id: `${baseId}-icon`, path: mdiClose, size: '15px' }))) : null)));
558
- };
559
-
560
- const SidebarContainer = styled.div `
561
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
562
- display: flex;
563
- flex-direction: column;
564
- height: 100%;
565
- padding: 12px 0px;
566
- width: ${props => (props.$isOpen ? props.$width : '60px')};
567
- `;
568
- const MenuWrapper$1 = styled.button `
569
- display: flex;
570
- align-items: center;
571
- border: 0px;
572
- background-color: transparent;
573
- padding-left: 0px;
574
- border-left-width: 4px;
575
- border-left-style: solid;
576
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
577
- cursor: pointer;
578
- height: 40px;
579
-
580
- &:hover > div {
581
- color: ${props => props.$color.Hex};
582
- }
583
-
584
- &:hover > svg > path {
585
- fill: ${Colors.BLACK.Hex} !important;
586
- }
587
- `;
588
- const MenuIcon = styled(Icon) `
589
- width: 20px;
590
- height: 20px;
591
- margin: 0px 16px;
592
- flex-shrink: 0;
593
-
594
- > path {
595
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
596
- }
597
- `;
598
- const MenuLabel = styled.div `
599
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
600
- flex: 1;
601
- font-size: 12px;
602
- font-style: normal;
603
- font-weight: 600;
604
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
605
- line-height: 16px;
606
- padding: 12px 0px;
607
- letter-spacing: 1px;
608
- `;
609
- const SubMenu = styled.div `
610
- overflow-y: auto;
611
- padding-left: 44px;
612
- padding-right: 20px;
613
- padding-bottom: 10px;
614
- `;
615
- const SubMenuItem = styled.a `
616
- display: block;
617
- padding: 8px 12px;
618
- border-radius: 8px;
619
- font-size: 13px;
620
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
621
- line-height: 20px;
622
- text-decoration: none;
623
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
624
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
625
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
626
- cursor: pointer;
627
-
628
- &:hover {
629
- color: ${props => props.$color.Hex};
630
- font-weight: 500;
631
- }
632
- `;
633
- const Footer = styled.div `
634
- padding: 20px 14px 0px;
635
- display: flex;
636
- align-items: center;
637
- `;
638
- const FooterInfo = styled.div `
639
- display: flex;
640
- flex-direction: column;
641
- flex: 1;
642
- align-items: flex-start;
643
- `;
644
- const SidebarMenuContainer = styled.div `
645
- flex-grow: 1;
558
+ };
559
+
560
+ const SidebarContainer = styled.div `
561
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
562
+ display: flex;
563
+ flex-direction: column;
564
+ height: 100%;
565
+ padding: 12px 0px;
566
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
567
+ `;
568
+ const MenuWrapper$1 = styled.button `
569
+ display: flex;
570
+ align-items: center;
571
+ border: 0px;
572
+ background-color: transparent;
573
+ padding-left: 0px;
574
+ border-left-width: 4px;
575
+ border-left-style: solid;
576
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
577
+ cursor: pointer;
578
+ height: 40px;
579
+
580
+ &:hover > div {
581
+ color: ${props => props.$color.Hex};
582
+ }
583
+
584
+ &:hover > svg > path {
585
+ fill: ${Colors.BLACK.Hex} !important;
586
+ }
587
+ `;
588
+ const MenuIcon = styled(Icon) `
589
+ width: 20px;
590
+ height: 20px;
591
+ margin: 0px 16px;
592
+ flex-shrink: 0;
593
+
594
+ > path {
595
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
596
+ }
597
+ `;
598
+ const MenuLabel = styled.div `
599
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
600
+ flex: 1;
601
+ font-size: 12px;
602
+ font-style: normal;
603
+ font-weight: 600;
604
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
605
+ line-height: 16px;
606
+ padding: 12px 0px;
607
+ letter-spacing: 1px;
608
+ `;
609
+ const SubMenu = styled.div `
610
+ overflow-y: auto;
611
+ padding-left: 44px;
612
+ padding-right: 20px;
613
+ padding-bottom: 10px;
614
+ `;
615
+ const SubMenuItem = styled.a `
616
+ display: block;
617
+ padding: 8px 12px;
618
+ border-radius: 8px;
619
+ font-size: 13px;
620
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
621
+ line-height: 20px;
622
+ text-decoration: none;
623
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
624
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
625
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
626
+ cursor: pointer;
627
+
628
+ &:hover {
629
+ color: ${props => props.$color.Hex};
630
+ font-weight: 500;
631
+ }
632
+ `;
633
+ const Footer = styled.div `
634
+ padding: 20px 14px 0px;
635
+ display: flex;
636
+ align-items: center;
637
+ `;
638
+ const FooterInfo = styled.div `
639
+ display: flex;
640
+ flex-direction: column;
641
+ flex: 1;
642
+ align-items: flex-start;
643
+ `;
644
+ const SidebarMenuContainer = styled.div `
645
+ flex-grow: 1;
646
646
  `;
647
647
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', id, }) => {
648
648
  const theme = useContext(ThemeContext) || EditableTheme;
@@ -671,75 +671,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', id, })
671
671
  e.preventDefault();
672
672
  toggleCollapse(!collapsed);
673
673
  }, small: true }))));
674
- };
675
-
676
- const Wrapper$d = styled.div `
677
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
678
- border-radius: 8px;
679
- box-sizing: border-box;
680
- display: flex;
681
- align-items: center;
682
- justify-content: space-between;
683
- padding: 16px 20px;
674
+ };
675
+
676
+ const Wrapper$d = styled.div `
677
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
678
+ border-radius: 8px;
679
+ box-sizing: border-box;
680
+ display: flex;
681
+ align-items: center;
682
+ justify-content: space-between;
683
+ padding: 16px 20px;
684
684
  `;
685
685
  Wrapper$d.defaultProps = { theme: EditableTheme };
686
- const Left = styled.div `
687
- box-sizing: border-box;
688
- display: flex;
689
- align-items: center;
690
- justify-content: space-between;
691
- flex-shrink: 0;
692
- `;
693
- const Info$1 = styled.div `
694
- box-sizing: border-box;
695
- display: flex;
696
- align-items: center;
697
- margin-right: 30px;
698
- `;
699
- const Selected = styled.span `
700
- font-size: 14px;
701
- font-weight: 400;
702
- font-family: ${FontStyles.DEFAULT};
703
- color: ${Colors.BLACK.Hex};
704
- line-height: 1;
705
- `;
706
- const Clear = styled.span `
707
- font-size: 14px;
708
- font-weight: 400;
709
- font-family: ${FontStyles.DEFAULT};
710
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
711
- line-height: 1;
712
- cursor: pointer;
713
- padding-left: 10px;
714
- margin-left: 10px;
715
- border-left: 1px solid #ccc;
686
+ const Left = styled.div `
687
+ box-sizing: border-box;
688
+ display: flex;
689
+ align-items: center;
690
+ justify-content: space-between;
691
+ flex-shrink: 0;
692
+ `;
693
+ const Info$1 = styled.div `
694
+ box-sizing: border-box;
695
+ display: flex;
696
+ align-items: center;
697
+ margin-right: 30px;
698
+ `;
699
+ const Selected = styled.span `
700
+ font-size: 14px;
701
+ font-weight: 400;
702
+ font-family: ${FontStyles.DEFAULT};
703
+ color: ${Colors.BLACK.Hex};
704
+ line-height: 1;
705
+ `;
706
+ const Clear = styled.span `
707
+ font-size: 14px;
708
+ font-weight: 400;
709
+ font-family: ${FontStyles.DEFAULT};
710
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
711
+ line-height: 1;
712
+ cursor: pointer;
713
+ padding-left: 10px;
714
+ margin-left: 10px;
715
+ border-left: 1px solid #ccc;
716
716
  `;
717
717
  Clear.defaultProps = { theme: EditableTheme };
718
- const Actions$1 = styled.div `
719
- box-sizing: border-box;
720
- display: flex;
721
- align-items: center;
722
- column-gap: 10px;
723
- `;
724
- const Error$1 = styled.div `
725
- box-sizing: border-box;
726
- display: flex;
727
- align-items: center;
728
- background: rgba(${Colors.RED.Rgb}, 0.1);
729
- border-radius: 4px;
730
- padding: 6px 8px;
731
- text-overflow: ellipsis;
732
- white-space: nowrap;
733
- overflow: hidden;
734
- margin-left: 30px;
735
- `;
736
- const ErrorMsg = styled.span `
737
- font-size: 14px;
738
- font-weight: 500;
739
- font-family: ${FontStyles.DEFAULT};
740
- line-height: 1em;
741
- color: ${Colors.RED.Hex};
742
- margin-left: 8px;
718
+ const Actions$1 = styled.div `
719
+ box-sizing: border-box;
720
+ display: flex;
721
+ align-items: center;
722
+ column-gap: 10px;
723
+ `;
724
+ const Error$1 = styled.div `
725
+ box-sizing: border-box;
726
+ display: flex;
727
+ align-items: center;
728
+ background: rgba(${Colors.RED.Rgb}, 0.1);
729
+ border-radius: 4px;
730
+ padding: 6px 8px;
731
+ text-overflow: ellipsis;
732
+ white-space: nowrap;
733
+ overflow: hidden;
734
+ margin-left: 30px;
735
+ `;
736
+ const ErrorMsg = styled.span `
737
+ font-size: 14px;
738
+ font-weight: 500;
739
+ font-family: ${FontStyles.DEFAULT};
740
+ line-height: 1em;
741
+ color: ${Colors.RED.Hex};
742
+ margin-left: 8px;
743
743
  `;
744
744
  const BulkActionBar = (_a) => {
745
745
  var { actions = [], errorMsg, onClear, selectedCount = 0, id } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount", "id"]);
@@ -755,48 +755,48 @@ const BulkActionBar = (_a) => {
755
755
  errorMsg ? (React.createElement(Error$1, { id: `${baseId}-error` },
756
756
  React.createElement(Icon, { color: Colors.RED.Hex, id: `${baseId}-error-icon`, path: mdiInformationOutline, size: '20px' }),
757
757
  React.createElement(ErrorMsg, { id: `${baseId}-error-msg` }, errorMsg))) : null));
758
- };
759
-
760
- const Wrapper$c = styled.div `
761
- background: #fff;
762
- border-radius: 8px;
763
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
764
- display: flex;
765
- flex-direction: column;
766
- gap: 4px;
767
- max-height: ${props => props.$maxHeight || '312px'};
768
- padding: 10px;
769
- width: 200px;
770
- `;
771
- const MenuItem = styled.div `
772
- align-items: center;
773
- border-radius: 8px;
774
- border: 1px solid transparent;
775
- display: flex;
776
- gap: 8px;
777
- height: 38px;
778
- padding: 8px;
779
- &:hover {
780
- background: rgba(1, 147, 215, 0.1);
781
- cursor: pointer;
782
-
783
- svg,
784
- path {
785
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
786
- }
787
- }
758
+ };
759
+
760
+ const Wrapper$c = styled.div `
761
+ background: #fff;
762
+ border-radius: 8px;
763
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
764
+ display: flex;
765
+ flex-direction: column;
766
+ gap: 4px;
767
+ max-height: ${props => props.$maxHeight || '312px'};
768
+ padding: 10px;
769
+ width: 200px;
770
+ `;
771
+ const MenuItem = styled.div `
772
+ align-items: center;
773
+ border-radius: 8px;
774
+ border: 1px solid transparent;
775
+ display: flex;
776
+ gap: 8px;
777
+ height: 38px;
778
+ padding: 8px;
779
+ &:hover {
780
+ background: rgba(1, 147, 215, 0.1);
781
+ cursor: pointer;
782
+
783
+ svg,
784
+ path {
785
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
786
+ }
787
+ }
788
788
  `;
789
789
  MenuItem.defaultProps = { theme: EditableTheme };
790
- const Title$1 = styled.span `
791
- font-family: Roboto;
792
- font-size: 14px;
793
- font-weight: 400;
794
- height: auto;
795
- letter-spacing: 0px;
796
- line-height: 22px;
797
- text-align: left;
798
- color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
799
- pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
790
+ const Title$1 = styled.span `
791
+ font-family: Roboto;
792
+ font-size: 14px;
793
+ font-weight: 400;
794
+ height: auto;
795
+ letter-spacing: 0px;
796
+ line-height: 22px;
797
+ text-align: left;
798
+ color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
799
+ pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
800
800
  `;
801
801
  Title$1.defaultProps = {
802
802
  disabled: false,
@@ -811,19 +811,19 @@ const MoreMenu = (_a) => {
811
811
  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,
812
812
  React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, id: `${itemId}-title` }, item.label)));
813
813
  })));
814
- };
815
-
816
- const MenuWrapper = styled.div `
817
- position: relative;
818
- display: inline-block;
819
- `;
820
- const StyledMoreMenu = styled(MoreMenu) `
821
- position: absolute;
822
- top: ${props => props.$top};
823
- left: ${props => props.$left};
824
- width: ${props => props.$menuWidth};
825
- max-height: ${props => props.maxHeight};
826
- z-index: 10;
814
+ };
815
+
816
+ const MenuWrapper = styled.div `
817
+ position: relative;
818
+ display: inline-block;
819
+ `;
820
+ const StyledMoreMenu = styled(MoreMenu) `
821
+ position: absolute;
822
+ top: ${props => props.$top};
823
+ left: ${props => props.$left};
824
+ width: ${props => props.$menuWidth};
825
+ max-height: ${props => props.maxHeight};
826
+ z-index: 10;
827
827
  `;
828
828
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, id, }) => {
829
829
  const [showMenu, toggleMenu] = useState(false);
@@ -898,85 +898,85 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
898
898
  return (React.createElement(MenuWrapper, { id: `${baseId}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
899
899
  React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, id: `${baseId}-button`, small: small }, label),
900
900
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, id: `${baseId}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
901
- };
902
-
903
- const Wrapper$b = styled.label `
904
- border-radius: 4px;
905
- padding: 4px 0px 4px 6px;
906
- margin-left: -6px;
907
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
908
- display: flex;
909
- align-items: center;
910
- font-size: ${FontSizes.DEFAULT};
911
- line-height: 1.6em;
912
- box-sizing: border-box;
913
- position: relative;
914
-
915
- &:focus-within {
916
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
917
- }
901
+ };
902
+
903
+ const Wrapper$b = styled.label `
904
+ border-radius: 4px;
905
+ padding: 4px 0px 4px 6px;
906
+ margin-left: -6px;
907
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
908
+ display: flex;
909
+ align-items: center;
910
+ font-size: ${FontSizes.DEFAULT};
911
+ line-height: 1.6em;
912
+ box-sizing: border-box;
913
+ position: relative;
914
+
915
+ &:focus-within {
916
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
917
+ }
918
918
  `;
919
919
  Wrapper$b.defaultProps = { theme: EditableTheme };
920
- const Input$2 = styled.input `
921
- font-size: 20px;
922
- margin: 0px;
923
- line-height: 1.1em;
924
- box-sizing: border-box;
925
- position: absolute;
926
- opacity: 0;
927
- cursor: pointer;
928
- height: 0;
929
- width: 0;
930
- &:checked + span {
931
- background-color: ${Colors.PRIMARY.Hex};
932
- border-color: ${Colors.PRIMARY.Hex};
933
- }
934
- &:checked:disabled + span {
935
- background-color: ${Colors.MEDIUM_GRAY.Hex};
936
- border-color: ${Colors.MEDIUM_GRAY.Hex};
937
- }
938
- &:disabled + span {
939
- background-color: #d3d3d3;
940
- border-color: #d3d3d3;
941
- }
942
- &:checked + span:after {
943
- display: block;
944
- }
945
- `;
946
- const Check$1 = styled.span `
947
- height: 17px;
948
- width: 17px;
949
- min-width: 17px;
950
- background-color: #fff;
951
- border-width: 2px;
952
- border-style: solid;
953
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
954
- box-sizing: border-box;
955
- position: relative;
956
- &:after {
957
- content: '';
958
- position: absolute;
959
- left: 3px;
960
- top: 0px;
961
- width: 7px;
962
- height: 12px;
963
- border: solid white;
964
- border-width: 0 3px 3px 0;
965
- -webkit-transform: rotate(45deg);
966
- -ms-transform: rotate(45deg);
967
- transform: rotate(45deg);
968
- box-sizing: border-box;
969
- display: none;
970
- }
971
- `;
972
- const Label$3 = styled.span `
973
- font-family: ${FontStyles.DEFAULT};
974
- font-size: ${FontSizes.DEFAULT};
975
- font-weight: 400;
976
- line-height: 1.6em;
977
- color: ${props => props.color || Colors.BLACK.Hex};
978
- margin-left: 6px;
979
- box-sizing: border-box;
920
+ const Input$2 = styled.input `
921
+ font-size: 20px;
922
+ margin: 0px;
923
+ line-height: 1.1em;
924
+ box-sizing: border-box;
925
+ position: absolute;
926
+ opacity: 0;
927
+ cursor: pointer;
928
+ height: 0;
929
+ width: 0;
930
+ &:checked + span {
931
+ background-color: ${Colors.PRIMARY.Hex};
932
+ border-color: ${Colors.PRIMARY.Hex};
933
+ }
934
+ &:checked:disabled + span {
935
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
936
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
937
+ }
938
+ &:disabled + span {
939
+ background-color: #d3d3d3;
940
+ border-color: #d3d3d3;
941
+ }
942
+ &:checked + span:after {
943
+ display: block;
944
+ }
945
+ `;
946
+ const Check$1 = styled.span `
947
+ height: 17px;
948
+ width: 17px;
949
+ min-width: 17px;
950
+ background-color: #fff;
951
+ border-width: 2px;
952
+ border-style: solid;
953
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
954
+ box-sizing: border-box;
955
+ position: relative;
956
+ &:after {
957
+ content: '';
958
+ position: absolute;
959
+ left: 3px;
960
+ top: 0px;
961
+ width: 7px;
962
+ height: 12px;
963
+ border: solid white;
964
+ border-width: 0 3px 3px 0;
965
+ -webkit-transform: rotate(45deg);
966
+ -ms-transform: rotate(45deg);
967
+ transform: rotate(45deg);
968
+ box-sizing: border-box;
969
+ display: none;
970
+ }
971
+ `;
972
+ const Label$3 = styled.span `
973
+ font-family: ${FontStyles.DEFAULT};
974
+ font-size: ${FontSizes.DEFAULT};
975
+ font-weight: 400;
976
+ line-height: 1.6em;
977
+ color: ${props => props.color || Colors.BLACK.Hex};
978
+ margin-left: 6px;
979
+ box-sizing: border-box;
980
980
  `;
981
981
  const Checkbox = (_a) => {
982
982
  var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, id } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "id"]);
@@ -987,16 +987,16 @@ const Checkbox = (_a) => {
987
987
  children ? (React.createElement(Label$3, { color: color, id: `${baseId}-label` },
988
988
  children,
989
989
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
990
- };
991
-
992
- const SelectAll = styled.div `
993
- padding: 8px 12px;
994
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
995
- box-sizing: border-box;
990
+ };
991
+
992
+ const SelectAll = styled.div `
993
+ padding: 8px 12px;
994
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
995
+ box-sizing: border-box;
996
996
  `;
997
- const Options$1 = styled.div `
998
- padding: 12px;
999
- box-sizing: border-box;
997
+ const Options$1 = styled.div `
998
+ padding: 12px;
999
+ box-sizing: border-box;
1000
1000
  `;
1001
1001
  const Checklist = (_a) => {
1002
1002
  var { disabled, onChange, options, selected = [], showSelectAll, id } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll", "id"]);
@@ -1035,70 +1035,70 @@ const Checklist = (_a) => {
1035
1035
  const optionId = `${baseId}-option-${i}`;
1036
1036
  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));
1037
1037
  }))));
1038
- };
1039
-
1040
- const Wrapper$a = styled.div `
1041
- border-radius: 4px;
1042
- height: 40px;
1043
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1044
- position: relative;
1045
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1046
- border-width: 1px;
1047
- border-style: solid;
1048
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1049
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1050
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1051
- box-sizing: border-box;
1052
- padding: 10px 0px;
1053
- display: flex;
1054
- align-items: center;
1055
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1056
-
1057
- &:focus-within {
1058
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1059
- }
1038
+ };
1039
+
1040
+ const Wrapper$a = styled.div `
1041
+ border-radius: 4px;
1042
+ height: 40px;
1043
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1044
+ position: relative;
1045
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1046
+ border-width: 1px;
1047
+ border-style: solid;
1048
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1049
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1050
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1051
+ box-sizing: border-box;
1052
+ padding: 10px 0px;
1053
+ display: flex;
1054
+ align-items: center;
1055
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1056
+
1057
+ &:focus-within {
1058
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1059
+ }
1060
1060
  `;
1061
1061
  Wrapper$a.defaultProps = { theme: EditableTheme };
1062
- const Trigger$1 = styled.select `
1063
- appearance: none;
1064
- box-shadow: none;
1065
- outline: none;
1066
- border: none;
1067
- color: ${Colors.BLACK.Hex};
1068
- font-size: ${FontSizes.DEFAULT};
1069
- font-weight: 400;
1070
- font-family: ${FontStyles.DEFAULT};
1071
- line-height: 3.1em;
1072
- background-color: transparent;
1073
- background-image: none;
1074
- width: 100%;
1075
- box-sizing: border-box;
1076
- padding: 0px 30px 0px 10px;
1077
- box-sizing: border-box;
1078
- position: relative;
1079
- z-index: 2;
1080
- `;
1081
- const IconWrapper$2 = styled(Icon) `
1082
- position: absolute;
1083
- right: 9px;
1084
- z-index: 1;
1085
- `;
1086
- const SearchInput$1 = styled.input `
1087
- position: absolute;
1088
- left: 2px;
1089
- top: 2px;
1090
- z-index: 999;
1091
- width: 90%;
1092
- height: 30px;
1093
- border: none;
1094
- outline: none;
1095
- color: ${Colors.BLACK.Hex};
1096
- font-family: ${FontStyles.DEFAULT};
1097
- font-size: ${FontSizes.DEFAULT};
1098
- font-weight: 400;
1099
- line-height: 2.9em;
1100
- overflow: hidden;
1101
- white-space: nowrap;
1062
+ const Trigger$1 = styled.select `
1063
+ appearance: none;
1064
+ box-shadow: none;
1065
+ outline: none;
1066
+ border: none;
1067
+ color: ${Colors.BLACK.Hex};
1068
+ font-size: ${FontSizes.DEFAULT};
1069
+ font-weight: 400;
1070
+ font-family: ${FontStyles.DEFAULT};
1071
+ line-height: 3.1em;
1072
+ background-color: transparent;
1073
+ background-image: none;
1074
+ width: 100%;
1075
+ box-sizing: border-box;
1076
+ padding: 0px 30px 0px 10px;
1077
+ box-sizing: border-box;
1078
+ position: relative;
1079
+ z-index: 2;
1080
+ `;
1081
+ const IconWrapper$2 = styled(Icon) `
1082
+ position: absolute;
1083
+ right: 9px;
1084
+ z-index: 1;
1085
+ `;
1086
+ const SearchInput$1 = styled.input `
1087
+ position: absolute;
1088
+ left: 2px;
1089
+ top: 2px;
1090
+ z-index: 999;
1091
+ width: 90%;
1092
+ height: 30px;
1093
+ border: none;
1094
+ outline: none;
1095
+ color: ${Colors.BLACK.Hex};
1096
+ font-family: ${FontStyles.DEFAULT};
1097
+ font-size: ${FontSizes.DEFAULT};
1098
+ font-weight: 400;
1099
+ line-height: 2.9em;
1100
+ overflow: hidden;
1101
+ white-space: nowrap;
1102
1102
  `;
1103
1103
  const Select = (_a) => {
1104
1104
  var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, id } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "id"]);
@@ -1133,15 +1133,15 @@ const Select = (_a) => {
1133
1133
  filteredOptions &&
1134
1134
  filteredOptions.map((option, i) => (React.createElement("option", { id: `${baseId}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
1135
1135
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, id: `${baseId}-icon`, path: mdiChevronDown, size: '22px' })));
1136
- };
1137
-
1138
- const DatePickerWrapper = styled.div `
1139
- display: flex;
1140
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1136
+ };
1137
+
1138
+ const DatePickerWrapper = styled.div `
1139
+ display: flex;
1140
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1141
1141
  `;
1142
- const Middle = styled.div `
1143
- margin: 0px -1px;
1144
- flex-grow: 1;
1142
+ const Middle = styled.div `
1143
+ margin: 0px -1px;
1144
+ flex-grow: 1;
1145
1145
  `;
1146
1146
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date,
1147
1147
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1229,66 +1229,66 @@ onChange = () => { }, style, id, }) => {
1229
1229
  React.createElement(Middle, { id: `${baseId}-middle` },
1230
1230
  React.createElement(Select, { id: `${baseId}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1231
1231
  React.createElement(Select, { id: `${baseId}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1232
- };
1233
-
1234
- const Scrim$1 = styled.div `
1235
- position: ${({ $position }) => $position};
1236
- top: 0;
1237
- right: 0;
1238
- bottom: 0;
1239
- left: 0;
1240
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1241
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1242
- `;
1243
- const Container$2 = styled.div `
1244
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1245
- min-width: 400px;
1246
- width: ${({ $width }) => $width || '400px'};
1247
- overflow: hidden;
1248
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1249
- outline: none;
1250
- border: none;
1251
- position: ${({ $position }) => $position};
1252
- top: 0;
1253
- right: 0;
1254
- bottom: 0;
1255
- padding: 0px;
1256
- display: flex;
1257
- flex-direction: column;
1258
- box-sizing: border-box;
1259
- background: #fff;
1260
- `;
1261
- const Header$2 = styled.div `
1262
- padding: 30px 20px;
1263
- display: flex;
1264
- align-items: flex-start;
1265
- box-sizing: border-box;
1266
- flex-shrink: 0;
1267
- background: #fff;
1268
- `;
1269
- const Close$1 = styled.div `
1270
- margin-left: auto;
1271
- display: flex;
1272
- align-items: center;
1273
- padding-left: 20px;
1274
- cursor: pointer;
1275
- `;
1276
- const ContentWrapper$1 = styled.div `
1277
- overflow-x: hidden;
1278
- overflow-y: auto;
1279
- box-sizing: border-box;
1280
- flex: 1;
1281
- background: #fff;
1282
- `;
1283
- const ButtonBar$1 = styled.div `
1284
- padding: 20px;
1285
- display: flex;
1286
- align-items: center;
1287
- justify-content: flex-end;
1288
- box-sizing: border-box;
1289
- gap: 10px;
1290
- flex-shrink: 0;
1291
- background: #fff;
1232
+ };
1233
+
1234
+ const Scrim$1 = styled.div `
1235
+ position: ${({ $position }) => $position};
1236
+ top: 0;
1237
+ right: 0;
1238
+ bottom: 0;
1239
+ left: 0;
1240
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1241
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1242
+ `;
1243
+ const Container$2 = styled.div `
1244
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1245
+ min-width: 400px;
1246
+ width: ${({ $width }) => $width || '400px'};
1247
+ overflow: hidden;
1248
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1249
+ outline: none;
1250
+ border: none;
1251
+ position: ${({ $position }) => $position};
1252
+ top: 0;
1253
+ right: 0;
1254
+ bottom: 0;
1255
+ padding: 0px;
1256
+ display: flex;
1257
+ flex-direction: column;
1258
+ box-sizing: border-box;
1259
+ background: #fff;
1260
+ `;
1261
+ const Header$2 = styled.div `
1262
+ padding: 30px 20px;
1263
+ display: flex;
1264
+ align-items: flex-start;
1265
+ box-sizing: border-box;
1266
+ flex-shrink: 0;
1267
+ background: #fff;
1268
+ `;
1269
+ const Close$1 = styled.div `
1270
+ margin-left: auto;
1271
+ display: flex;
1272
+ align-items: center;
1273
+ padding-left: 20px;
1274
+ cursor: pointer;
1275
+ `;
1276
+ const ContentWrapper$1 = styled.div `
1277
+ overflow-x: hidden;
1278
+ overflow-y: auto;
1279
+ box-sizing: border-box;
1280
+ flex: 1;
1281
+ background: #fff;
1282
+ `;
1283
+ const ButtonBar$1 = styled.div `
1284
+ padding: 20px;
1285
+ display: flex;
1286
+ align-items: center;
1287
+ justify-content: flex-end;
1288
+ box-sizing: border-box;
1289
+ gap: 10px;
1290
+ flex-shrink: 0;
1291
+ background: #fff;
1292
1292
  `;
1293
1293
  const Drawer = (_a) => {
1294
1294
  var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width, id } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width", "id"]);
@@ -1317,55 +1317,55 @@ const Drawer = (_a) => {
1317
1317
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${baseId}-secondary-button` }))) : null,
1318
1318
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${baseId}-primary-button` }))) : null)) : null),
1319
1319
  scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${baseId}-scrim`, onClick: onClose })) : null));
1320
- };
1321
-
1320
+ };
1321
+
1322
1322
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1323
- const LabelRow = styled.div `
1324
- display: flex;
1325
- align-items: center;
1326
- justify-content: space-between;
1327
- margin: 0 0 4px 0;
1328
- box-sizing: border-box;
1329
- `;
1330
- const Label$2 = styled.label `
1331
- font-size: ${FontSizes.DEFAULT};
1332
- font-weight: 500;
1333
- line-height: 1.3em;
1334
- font-family: ${FontStyles.DEFAULT};
1335
- color: ${Colors.BLACK.Hex};
1336
- display: flex;
1337
- align-items: center;
1338
- `;
1339
- const Required = styled.span `
1340
- color: ${Colors.RED.Hex};
1341
- margin-left: 4px;
1342
- `;
1343
- const Action = styled.span `
1344
- font-size: ${FontSizes.DEFAULT};
1345
- font-weight: 500;
1346
- line-height: 1em;
1347
- font-family: ${FontStyles.DEFAULT};
1348
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1349
- cursor: pointer;
1323
+ const LabelRow = styled.div `
1324
+ display: flex;
1325
+ align-items: center;
1326
+ justify-content: space-between;
1327
+ margin: 0 0 4px 0;
1328
+ box-sizing: border-box;
1329
+ `;
1330
+ const Label$2 = styled.label `
1331
+ font-size: ${FontSizes.DEFAULT};
1332
+ font-weight: 500;
1333
+ line-height: 1.3em;
1334
+ font-family: ${FontStyles.DEFAULT};
1335
+ color: ${Colors.BLACK.Hex};
1336
+ display: flex;
1337
+ align-items: center;
1338
+ `;
1339
+ const Required = styled.span `
1340
+ color: ${Colors.RED.Hex};
1341
+ margin-left: 4px;
1342
+ `;
1343
+ const Action = styled.span `
1344
+ font-size: ${FontSizes.DEFAULT};
1345
+ font-weight: 500;
1346
+ line-height: 1em;
1347
+ font-family: ${FontStyles.DEFAULT};
1348
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1349
+ cursor: pointer;
1350
1350
  `;
1351
1351
  Action.defaultProps = { theme: EditableTheme };
1352
- const Description = styled.div `
1353
- font-size: ${FontSizes.SMALL};
1354
- font-weight: 400;
1355
- line-height: 1.3em;
1356
- font-family: ${FontStyles.DEFAULT};
1357
- color: ${Colors.BLACK.Hex};
1358
- margin: 0 0 8px 0;
1359
- box-sizing: border-box;
1360
- `;
1361
- const Validation = styled.div `
1362
- font-size: ${FontSizes.SMALL};
1363
- font-weight: 400;
1364
- line-height: 1.3em;
1365
- font-family: ${FontStyles.DEFAULT};
1366
- color: ${Colors.RED.Hex};
1367
- margin: 4px 0 0 0;
1368
- box-sizing: border-box;
1352
+ const Description = styled.div `
1353
+ font-size: ${FontSizes.SMALL};
1354
+ font-weight: 400;
1355
+ line-height: 1.3em;
1356
+ font-family: ${FontStyles.DEFAULT};
1357
+ color: ${Colors.BLACK.Hex};
1358
+ margin: 0 0 8px 0;
1359
+ box-sizing: border-box;
1360
+ `;
1361
+ const Validation = styled.div `
1362
+ font-size: ${FontSizes.SMALL};
1363
+ font-weight: 400;
1364
+ line-height: 1.3em;
1365
+ font-family: ${FontStyles.DEFAULT};
1366
+ color: ${Colors.RED.Hex};
1367
+ margin: 4px 0 0 0;
1368
+ box-sizing: border-box;
1369
1369
  `;
1370
1370
  const Field = (_a) => {
1371
1371
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip, id } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip", "id"]);
@@ -1379,115 +1379,115 @@ const Field = (_a) => {
1379
1379
  action ? (React.createElement(Action, { id: action.id || `${baseId}-action`, onClick: action.onClick }, action.label)) : null),
1380
1380
  description ? React.createElement(Description, { id: `${baseId}-description` }, description) : null,
1381
1381
  React.createElement("div", { id: `${baseId}-children` }, children),
1382
- validationText ? (React.createElement(Validation, { id: `${baseId}-validation` }, validationText)) : null));
1383
- };
1384
-
1385
- const Wrapper$8 = styled.fieldset `
1386
- margin-inline-start: 0px;
1387
- margin-inline-end: 0px;
1388
- padding-block-start: 0px;
1389
- padding-inline-start: 0px;
1390
- padding-inline-end: 0px;
1391
- padding-block-end: 0px;
1392
- min-inline-size: min-content;
1393
- border-width: 0px;
1394
- border-style: none;
1395
- border-color: transparent;
1396
- border-image: none;
1397
- `;
1398
- const Label$1 = styled.legend `
1399
- padding-inline-start: 0px;
1400
- padding-inline-end: 0px;
1401
-
1402
- color: ${Colors.BLACK.Hex};
1403
- font-family: ${FontStyles.DEFAULT};
1404
- font-size: ${FontSizes.DEFAULT};
1405
- font-weight: 500;
1406
- line-height: 22px;
1407
- margin-bottom: 6px;
1408
- `;
1409
- const Content$1 = styled.div `
1410
- padding: 20px;
1411
- border-radius: 8px;
1412
- background: #fcfcfc;
1382
+ React.createElement(Validation, { className: 'field-validation-wrapper', id: `${baseId}-validation`, title: validationText }, validationText ? validationText : '\u00A0')));
1383
+ };
1384
+
1385
+ const Wrapper$8 = styled.fieldset `
1386
+ margin-inline-start: 0px;
1387
+ margin-inline-end: 0px;
1388
+ padding-block-start: 0px;
1389
+ padding-inline-start: 0px;
1390
+ padding-inline-end: 0px;
1391
+ padding-block-end: 0px;
1392
+ min-inline-size: min-content;
1393
+ border-width: 0px;
1394
+ border-style: none;
1395
+ border-color: transparent;
1396
+ border-image: none;
1397
+ `;
1398
+ const Label$1 = styled.legend `
1399
+ padding-inline-start: 0px;
1400
+ padding-inline-end: 0px;
1401
+
1402
+ color: ${Colors.BLACK.Hex};
1403
+ font-family: ${FontStyles.DEFAULT};
1404
+ font-size: ${FontSizes.DEFAULT};
1405
+ font-weight: 500;
1406
+ line-height: 22px;
1407
+ margin-bottom: 6px;
1408
+ `;
1409
+ const Content$1 = styled.div `
1410
+ padding: 20px;
1411
+ border-radius: 8px;
1412
+ background: #fcfcfc;
1413
1413
  `;
1414
1414
  const FieldGroup = ({ children, label, id }) => {
1415
1415
  const baseId = id || 'field-group';
1416
1416
  return (React.createElement(Wrapper$8, { id: `${baseId}-wrapper` },
1417
1417
  React.createElement(Label$1, { id: `${baseId}-label` }, label),
1418
1418
  React.createElement(Content$1, { id: `${baseId}-content` }, children)));
1419
- };
1420
-
1421
- const Dropzone = styled.div `
1422
- border-radius: 8px;
1423
- border-width: 1px;
1424
- border-style: dashed;
1425
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1426
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1427
- cursor: copy;
1419
+ };
1420
+
1421
+ const Dropzone = styled.div `
1422
+ border-radius: 8px;
1423
+ border-width: 1px;
1424
+ border-style: dashed;
1425
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1426
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1427
+ cursor: copy;
1428
1428
  `;
1429
1429
  Dropzone.defaultProps = { theme: EditableTheme };
1430
- const IconWrapper$1 = styled.div `
1431
- width: 80px;
1432
- height: 80px;
1433
- border-radius: 40px;
1434
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1435
- display: flex;
1436
- align-items: center;
1437
- justify-content: center;
1438
- `;
1439
- const StyledIcon$3 = styled(Icon) `
1440
- width: 40px !important;
1441
- height: 40px !important;
1442
-
1443
- > path {
1444
- fill: ${Colors.GRAY.Hex} !important;
1445
- }
1446
- `;
1447
- const ClickZone = styled.div `
1448
- margin: 40px 20px;
1449
- display: flex;
1450
- flex-direction: column;
1451
- align-items: center;
1452
- gap: 16px;
1453
- `;
1454
- const Content = styled.div `
1455
- display: flex;
1456
- flex-direction: column;
1457
- align-items: center;
1458
- z-index: 99999;
1459
- gap: 2px;
1460
- `;
1461
- const Files = styled.div `
1462
- display: flex;
1463
- flex-direction: column;
1464
- align-self: stretch;
1465
- gap: 10px;
1466
- margin: 20px;
1467
- `;
1468
- const MessageDiv = styled.div `
1469
- display: flex;
1470
- align-items: center;
1471
- justify-content: center;
1472
- `;
1473
- const File = styled.div `
1474
- display: flex;
1475
- padding: 10px;
1476
- align-items: center;
1477
- justify-content: space-between;
1478
- gap: 10px;
1479
- border-radius: 4px;
1480
- border: 1px solid #cccccc;
1481
- background: #ffffff;
1482
- `;
1483
- const Remove = styled(Icon) `
1484
- width: 24px;
1485
- height: 24px;
1486
- cursor: pointer;
1487
-
1488
- > path {
1489
- fill: ${Colors.RED.Hex} !important;
1490
- }
1430
+ const IconWrapper$1 = styled.div `
1431
+ width: 80px;
1432
+ height: 80px;
1433
+ border-radius: 40px;
1434
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1435
+ display: flex;
1436
+ align-items: center;
1437
+ justify-content: center;
1438
+ `;
1439
+ const StyledIcon$3 = styled(Icon) `
1440
+ width: 40px !important;
1441
+ height: 40px !important;
1442
+
1443
+ > path {
1444
+ fill: ${Colors.GRAY.Hex} !important;
1445
+ }
1446
+ `;
1447
+ const ClickZone = styled.div `
1448
+ margin: 40px 20px;
1449
+ display: flex;
1450
+ flex-direction: column;
1451
+ align-items: center;
1452
+ gap: 16px;
1453
+ `;
1454
+ const Content = styled.div `
1455
+ display: flex;
1456
+ flex-direction: column;
1457
+ align-items: center;
1458
+ z-index: 99999;
1459
+ gap: 2px;
1460
+ `;
1461
+ const Files = styled.div `
1462
+ display: flex;
1463
+ flex-direction: column;
1464
+ align-self: stretch;
1465
+ gap: 10px;
1466
+ margin: 20px;
1467
+ `;
1468
+ const MessageDiv = styled.div `
1469
+ display: flex;
1470
+ align-items: center;
1471
+ justify-content: center;
1472
+ `;
1473
+ const File = styled.div `
1474
+ display: flex;
1475
+ padding: 10px;
1476
+ align-items: center;
1477
+ justify-content: space-between;
1478
+ gap: 10px;
1479
+ border-radius: 4px;
1480
+ border: 1px solid #cccccc;
1481
+ background: #ffffff;
1482
+ `;
1483
+ const Remove = styled(Icon) `
1484
+ width: 24px;
1485
+ height: 24px;
1486
+ cursor: pointer;
1487
+
1488
+ > path {
1489
+ fill: ${Colors.RED.Hex} !important;
1490
+ }
1491
1491
  `;
1492
1492
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, id, }) => {
1493
1493
  const inputRef = useRef(null);
@@ -1607,8 +1607,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1607
1607
  React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${baseId}-message` }, message),
1608
1608
  tooltipInfo && (React.createElement("span", { id: `${baseId}-tooltip` },
1609
1609
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1610
- };
1611
-
1610
+ };
1611
+
1612
1612
  const getAgesFromDob = (dob) => {
1613
1613
  let calculated_current_age = null;
1614
1614
  let calculated_nearest_age = null;
@@ -1681,149 +1681,149 @@ const formatAsSsn = (number) => {
1681
1681
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1682
1682
  }
1683
1683
  return formatted_value;
1684
- };
1685
-
1686
- const StyledInput = styled.input `
1687
- border: none !important;
1688
- background: none !important;
1689
- font-size: ${FontSizes.DEFAULT};
1690
- font-weight: 400;
1691
- font-family: ${FontStyles.DEFAULT};
1692
- line-height: 1.28em;
1684
+ };
1685
+
1686
+ const StyledInput = styled.input `
1687
+ border: none !important;
1688
+ background: none !important;
1689
+ font-size: ${FontSizes.DEFAULT};
1690
+ font-weight: 400;
1691
+ font-family: ${FontStyles.DEFAULT};
1692
+ line-height: 1.28em;
1693
1693
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1694
1694
  ? Colors.RED.Hex
1695
- : Colors.BLACK.Hex};
1696
- position: relative;
1697
- height: ${props => props.$height || 'auto'};
1698
- padding: 10px;
1699
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1700
- box-shadow: none;
1701
- outline: none;
1702
- margin: 0px;
1703
- text-indent: 0px;
1704
- --webkit-appearance: none;
1705
- box-sizing: border-box;
1706
- display: block;
1707
- width: 100%;
1708
- `;
1709
- const StyledTextArea = styled.textarea `
1710
- border: none !important;
1711
- background: none !important;
1712
- overflow-y: scroll !important;
1713
- font-size: 14px;
1714
- font-weight: 400;
1715
- height: ${props => props.$height || 'auto'};
1716
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1717
- line-height: 1.28em;
1695
+ : Colors.BLACK.Hex};
1696
+ position: relative;
1697
+ height: ${props => props.$height || 'auto'};
1698
+ padding: 10px;
1699
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1700
+ box-shadow: none;
1701
+ outline: none;
1702
+ margin: 0px;
1703
+ text-indent: 0px;
1704
+ --webkit-appearance: none;
1705
+ box-sizing: border-box;
1706
+ display: block;
1707
+ width: 100%;
1708
+ `;
1709
+ const StyledTextArea = styled.textarea `
1710
+ border: none !important;
1711
+ background: none !important;
1712
+ overflow-y: scroll !important;
1713
+ font-size: 14px;
1714
+ font-weight: 400;
1715
+ height: ${props => props.$height || 'auto'};
1716
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1717
+ line-height: 1.28em;
1718
1718
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1719
1719
  ? Colors.RED.Hex
1720
- : Colors.BLACK.Hex};
1721
- position: relative;
1722
- padding: 10px;
1723
- opacity: 1;
1724
- box-shadow: none;
1725
- outline: none;
1726
- margin: 0px;
1727
- text-indent: 0px;
1728
- --webkit-appearance: none;
1729
- overflow-wrap: break-word;
1730
- box-sizing: border-box;
1731
- display: block;
1732
- width: 100%;
1720
+ : Colors.BLACK.Hex};
1721
+ position: relative;
1722
+ padding: 10px;
1723
+ opacity: 1;
1724
+ box-shadow: none;
1725
+ outline: none;
1726
+ margin: 0px;
1727
+ text-indent: 0px;
1728
+ --webkit-appearance: none;
1729
+ overflow-wrap: break-word;
1730
+ box-sizing: border-box;
1731
+ display: block;
1732
+ width: 100%;
1733
1733
  ${({ $readOnly }) => $readOnly &&
1734
- `
1735
- background-color: #f0f0f0;
1736
- color: #999999;
1737
- overflow-y: scroll;
1738
- `}
1739
- `;
1740
- const StyledSuffix = styled.div `
1741
- box-sizing: border-box;
1742
- border-radius: 0px 4px 4px 0px;
1743
- display: flex;
1744
- justify-content: center;
1745
- align-items: center;
1746
- padding: 10px;
1747
- height: auto;
1748
- background: #f5f5f5;
1749
- border-width: 0px 0px 0px 1px;
1750
- border-style: solid;
1751
- border-color: #cccccc;
1752
- font-family: ${FontStyles.DEFAULT};
1753
- font-style: normal;
1754
- font-weight: 400;
1755
- font-size: ${FontSizes.DEFAULT};
1756
- color: ${Colors.BLACK.Hex};
1757
- `;
1758
- const StyledWrapper = styled.div `
1759
- display: flex;
1760
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1761
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1762
- position: relative;
1763
- border-width: 1px;
1764
- border-style: solid;
1765
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1766
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1767
-
1768
- &:focus-within {
1769
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1770
- }
1734
+ `
1735
+ background-color: #f0f0f0;
1736
+ color: #999999;
1737
+ overflow-y: scroll;
1738
+ `}
1739
+ `;
1740
+ const StyledSuffix = styled.div `
1741
+ box-sizing: border-box;
1742
+ border-radius: 0px 4px 4px 0px;
1743
+ display: flex;
1744
+ justify-content: center;
1745
+ align-items: center;
1746
+ padding: 10px;
1747
+ height: auto;
1748
+ background: #f5f5f5;
1749
+ border-width: 0px 0px 0px 1px;
1750
+ border-style: solid;
1751
+ border-color: #cccccc;
1752
+ font-family: ${FontStyles.DEFAULT};
1753
+ font-style: normal;
1754
+ font-weight: 400;
1755
+ font-size: ${FontSizes.DEFAULT};
1756
+ color: ${Colors.BLACK.Hex};
1757
+ `;
1758
+ const StyledWrapper = styled.div `
1759
+ display: flex;
1760
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1761
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1762
+ position: relative;
1763
+ border-width: 1px;
1764
+ border-style: solid;
1765
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1766
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1767
+
1768
+ &:focus-within {
1769
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1770
+ }
1771
1771
  `;
1772
1772
  StyledWrapper.defaultProps = { theme: EditableTheme };
1773
- const SuggestedValues = styled.div `
1774
- background: #fff;
1775
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1776
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1777
- border-radius: 0px 0px 4px 4px;
1778
- border-style: solid;
1779
- border-top: none;
1780
- border-width: 1px;
1781
- left: -1px;
1782
- position: absolute;
1783
- right: -1px;
1784
- top: 39px;
1785
- z-index: 9999;
1786
- max-height: 220px;
1787
- overflow: auto;
1773
+ const SuggestedValues = styled.div `
1774
+ background: #fff;
1775
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1776
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1777
+ border-radius: 0px 0px 4px 4px;
1778
+ border-style: solid;
1779
+ border-top: none;
1780
+ border-width: 1px;
1781
+ left: -1px;
1782
+ position: absolute;
1783
+ right: -1px;
1784
+ top: 39px;
1785
+ z-index: 9999;
1786
+ max-height: 220px;
1787
+ overflow: auto;
1788
1788
  `;
1789
1789
  SuggestedValues.defaultProps = { theme: EditableTheme };
1790
- const SuggestedSummary = styled.div `
1791
- color: ${Colors.MEDIUM_GRAY.Hex};
1792
- font-size: 12px;
1793
- font-family: ${FontStyles.DEFAULT};
1794
- font-weight: 500;
1795
- line-height: 18px;
1796
- padding: 10px 12px;
1797
- border-bottom: 1px solid #e5e5e5;
1798
- background: #fff;
1799
- z-index: 1;
1800
- position: sticky;
1801
- top: 0px;
1802
- `;
1803
- const SuggestedValue = styled.div `
1804
- cursor: pointer;
1805
- padding: 8px 12px;
1806
- font-size: ${FontSizes.DEFAULT};
1807
- font-family: ${FontStyles.DEFAULT};
1808
- font-weight: 400;
1809
- line-height: 1.6em;
1810
- color: ${Colors.BLACK.Hex};
1811
-
1812
- &:hover {
1813
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1814
- }
1790
+ const SuggestedSummary = styled.div `
1791
+ color: ${Colors.MEDIUM_GRAY.Hex};
1792
+ font-size: 12px;
1793
+ font-family: ${FontStyles.DEFAULT};
1794
+ font-weight: 500;
1795
+ line-height: 18px;
1796
+ padding: 10px 12px;
1797
+ border-bottom: 1px solid #e5e5e5;
1798
+ background: #fff;
1799
+ z-index: 1;
1800
+ position: sticky;
1801
+ top: 0px;
1802
+ `;
1803
+ const SuggestedValue = styled.div `
1804
+ cursor: pointer;
1805
+ padding: 8px 12px;
1806
+ font-size: ${FontSizes.DEFAULT};
1807
+ font-family: ${FontStyles.DEFAULT};
1808
+ font-weight: 400;
1809
+ line-height: 1.6em;
1810
+ color: ${Colors.BLACK.Hex};
1811
+
1812
+ &:hover {
1813
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1814
+ }
1815
1815
  `;
1816
1816
  SuggestedValue.defaultProps = { theme: EditableTheme };
1817
- const CharacterCount = styled.div `
1818
- font-family: ${FontStyles.DEFAULT};
1819
- font-size: ${FontSizes.SMALL};
1820
- color: ${Colors.MEDIUM_GRAY.Hex};
1821
- padding: 10px;
1817
+ const CharacterCount = styled.div `
1818
+ font-family: ${FontStyles.DEFAULT};
1819
+ font-size: ${FontSizes.SMALL};
1820
+ color: ${Colors.MEDIUM_GRAY.Hex};
1821
+ padding: 10px;
1822
1822
  `;
1823
- const Loader$1 = styled.div `
1824
- padding: 0px 10px;
1825
- display: flex;
1826
- align-items: center;
1823
+ const Loader$1 = styled.div `
1824
+ padding: 0px 10px;
1825
+ display: flex;
1826
+ align-items: center;
1827
1827
  `;
1828
1828
  const Input$1 = (_a) => {
1829
1829
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown,
@@ -1956,112 +1956,112 @@ const Input$1 = (_a) => {
1956
1956
  onSuggestedSelect();
1957
1957
  setShowOptions(false);
1958
1958
  } }, suggestedValue))))) : null));
1959
- };
1960
-
1961
- const Wrapper$7 = styled.a `
1962
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1963
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1964
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1965
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1966
- font-weight: 500;
1967
- font-style: normal;
1968
- text-decoration: none;
1969
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1970
- margin: 0px;
1971
- padding: 0px;
1972
- box-sizing: border-box;
1973
- cursor: pointer;
1959
+ };
1960
+
1961
+ const Wrapper$7 = styled.a `
1962
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1963
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1964
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1965
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1966
+ font-weight: 500;
1967
+ font-style: normal;
1968
+ text-decoration: none;
1969
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1970
+ margin: 0px;
1971
+ padding: 0px;
1972
+ box-sizing: border-box;
1973
+ cursor: pointer;
1974
1974
  `;
1975
1975
  Wrapper$7.defaultProps = { theme: EditableTheme };
1976
1976
  const Link = (_a) => {
1977
1977
  var { children, onClick, small, id } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small", "id"]);
1978
1978
  const baseId = id || 'link';
1979
1979
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${baseId}-wrapper` }), children));
1980
- };
1981
-
1982
- const dash = keyframes `
1983
- 0% {
1984
- stroke-dasharray: 1, 160;
1985
- stroke-dashoffset: 0;
1986
- }
1987
- 50% {
1988
- stroke-dasharray: 80, 160;
1989
- stroke-dashoffset: -32;
1990
- }
1991
- 100% {
1992
- stroke-dasharray: 80, 160;
1993
- stroke-dashoffset: -124;
1994
- }
1995
- `;
1996
- const Spinner = styled.svg `
1997
- z-index: 2;
1998
- position: absolute;
1999
- top: 50%;
2000
- left: 50%;
2001
- transform: translate(-50%, -50%);
2002
- margin: 0 auto;
2003
- width: 40px;
2004
- height: 40px;
2005
- `;
2006
- const Path = styled.path `
2007
- stroke: #0193d7;
2008
- stroke-linecap: round;
2009
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2010
- animation: ${dash} 1.1s ease-in-out infinite;
1980
+ };
1981
+
1982
+ const dash = keyframes `
1983
+ 0% {
1984
+ stroke-dasharray: 1, 160;
1985
+ stroke-dashoffset: 0;
1986
+ }
1987
+ 50% {
1988
+ stroke-dasharray: 80, 160;
1989
+ stroke-dashoffset: -32;
1990
+ }
1991
+ 100% {
1992
+ stroke-dasharray: 80, 160;
1993
+ stroke-dashoffset: -124;
1994
+ }
1995
+ `;
1996
+ const Spinner = styled.svg `
1997
+ z-index: 2;
1998
+ position: absolute;
1999
+ top: 50%;
2000
+ left: 50%;
2001
+ transform: translate(-50%, -50%);
2002
+ margin: 0 auto;
2003
+ width: 40px;
2004
+ height: 40px;
2005
+ `;
2006
+ const Path = styled.path `
2007
+ stroke: #0193d7;
2008
+ stroke-linecap: round;
2009
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2010
+ animation: ${dash} 1.1s ease-in-out infinite;
2011
2011
  `;
2012
2012
  const Loader = ({ id }) => {
2013
2013
  const baseId = id || 'loader';
2014
2014
  return (React.createElement(Spinner, { id: `${baseId}-spinner`, viewBox: '0 0 16 18' },
2015
2015
  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: `${baseId}-path`, strokeWidth: '2' })));
2016
- };
2017
-
2018
- const Steps = styled.div `
2019
- padding: 20px;
2020
- border-bottom: 1px solid #e7e6e6;
2021
- background: #f5f5f5;
2022
- display: flex;
2023
- gap: 30px;
2024
- align-items: center;
2025
- `;
2026
- const Step = styled.div `
2027
- display: flex;
2028
- align-items: center;
2029
- gap: 8px;
2030
- `;
2031
- const StyledIcon$2 = styled(Icon) `
2032
- > path {
2033
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2034
- }
2016
+ };
2017
+
2018
+ const Steps = styled.div `
2019
+ padding: 20px;
2020
+ border-bottom: 1px solid #e7e6e6;
2021
+ background: #f5f5f5;
2022
+ display: flex;
2023
+ gap: 30px;
2024
+ align-items: center;
2025
+ `;
2026
+ const Step = styled.div `
2027
+ display: flex;
2028
+ align-items: center;
2029
+ gap: 8px;
2030
+ `;
2031
+ const StyledIcon$2 = styled(Icon) `
2032
+ > path {
2033
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2034
+ }
2035
2035
  `;
2036
2036
  StyledIcon$2.defaultProps = { theme: EditableTheme };
2037
- const StepIndicator = styled.div `
2038
- width: 30px;
2039
- height: 30px;
2040
- border-radius: 15px;
2041
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2042
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2043
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2044
- font-size: 14px;
2045
- font-weight: 500;
2046
- line-height: 1;
2047
- display: flex;
2048
- align-items: center;
2049
- justify-content: center;
2050
- flex-shrink: 0;
2037
+ const StepIndicator = styled.div `
2038
+ width: 30px;
2039
+ height: 30px;
2040
+ border-radius: 15px;
2041
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2042
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2043
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2044
+ font-size: 14px;
2045
+ font-weight: 500;
2046
+ line-height: 1;
2047
+ display: flex;
2048
+ align-items: center;
2049
+ justify-content: center;
2050
+ flex-shrink: 0;
2051
2051
  `;
2052
2052
  StepIndicator.defaultProps = { theme: EditableTheme };
2053
- const StepLabel = styled.div `
2054
- color: #000;
2055
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2056
- font-size: 14px;
2057
- font-weight: 500;
2058
- line-height: 1;
2059
- `;
2060
- const StepLine = styled.div `
2061
- height: 2px;
2062
- flex-grow: 1;
2063
- background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2064
- transition: background-color 0.5s ease-in-out;
2053
+ const StepLabel = styled.div `
2054
+ color: #000;
2055
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2056
+ font-size: 14px;
2057
+ font-weight: 500;
2058
+ line-height: 1;
2059
+ `;
2060
+ const StepLine = styled.div `
2061
+ height: 2px;
2062
+ flex-grow: 1;
2063
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2064
+ transition: background-color 0.5s ease-in-out;
2065
2065
  `;
2066
2066
  const ProgressBar = ({ steps, showStepLine = false, id }) => {
2067
2067
  const baseId = id || 'progress-bar';
@@ -2073,78 +2073,78 @@ const ProgressBar = ({ steps, showStepLine = false, id }) => {
2073
2073
  step.complete ? (React.createElement(StyledIcon$2, { id: `${stepId}-icon`, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, id: `${stepId}-indicator` }, i + 1)),
2074
2074
  React.createElement(StepLabel, { id: `${stepId}-label` }, step.label))));
2075
2075
  })));
2076
- };
2077
-
2078
- const Wrapper$6 = styled.div `
2079
- position: fixed;
2080
- top: 0;
2081
- right: 0;
2082
- bottom: 0;
2083
- left: 0;
2084
- z-index: 9999;
2085
- background: rgba(0, 0, 0, 0.8);
2086
- display: flex;
2087
- align-items: center;
2088
- justify-content: center;
2089
- `;
2090
- const Container$1 = styled.dialog `
2091
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2092
- max-width: calc(100vw - 80px);
2093
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2094
- max-height: calc(100vh - 80px);
2095
- border-radius: 8px;
2096
- overflow: hidden;
2097
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2098
- outline: none;
2099
- border: none;
2100
- position: relative;
2101
- padding: 0px;
2102
- box-sizing: border-box;
2103
- display: flex;
2104
- flex-direction: column;
2105
- `;
2106
- const Header$1 = styled.div `
2107
- flex-shrink: 0;
2108
- padding: 20px;
2109
- border-bottom: 1px solid #e7e6e6;
2110
- display: flex;
2111
- align-items: center;
2112
- background: #ffffff;
2113
- box-sizing: border-box;
2114
- `;
2115
- const Close = styled.div `
2116
- margin-left: auto;
2117
- display: flex;
2118
- align-items: center;
2119
- padding-left: 20px;
2120
- cursor: pointer;
2121
- `;
2122
- const CloseMsg = styled.span `
2123
- font-size: ${FontSizes.SMALL};
2124
- font-weight: 400;
2125
- font-family: ${FontStyles.DEFAULT};
2126
- line-height: 1em;
2127
- color: ${Colors.MEDIUM_GRAY.Hex};
2128
- `;
2129
- const ContentWrapper = styled.div `
2130
- overflow-x: hidden;
2131
- overflow-y: auto;
2132
- background: #ffffff;
2133
- flex: 1;
2134
- box-sizing: border-box;
2135
- `;
2136
- const ButtonBar = styled.div `
2137
- flex-shrink: 0;
2138
- background: #ffffff;
2139
- padding: 20px;
2140
- border-top: 1px solid #e7e6e6;
2141
- display: flex;
2142
- align-items: center;
2143
- justify-self: flex-end;
2144
- box-sizing: border-box;
2145
- `;
2146
- const ButtonContainer = styled.div `
2147
- margin: 0 10px;
2076
+ };
2077
+
2078
+ const Wrapper$6 = styled.div `
2079
+ position: fixed;
2080
+ top: 0;
2081
+ right: 0;
2082
+ bottom: 0;
2083
+ left: 0;
2084
+ z-index: 9999;
2085
+ background: rgba(0, 0, 0, 0.8);
2086
+ display: flex;
2087
+ align-items: center;
2088
+ justify-content: center;
2089
+ `;
2090
+ const Container$1 = styled.dialog `
2091
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2092
+ max-width: calc(100vw - 80px);
2093
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2094
+ max-height: calc(100vh - 80px);
2095
+ border-radius: 8px;
2096
+ overflow: hidden;
2097
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2098
+ outline: none;
2099
+ border: none;
2100
+ position: relative;
2101
+ padding: 0px;
2102
+ box-sizing: border-box;
2103
+ display: flex;
2104
+ flex-direction: column;
2105
+ `;
2106
+ const Header$1 = styled.div `
2107
+ flex-shrink: 0;
2108
+ padding: 20px;
2109
+ border-bottom: 1px solid #e7e6e6;
2110
+ display: flex;
2111
+ align-items: center;
2112
+ background: #ffffff;
2113
+ box-sizing: border-box;
2114
+ `;
2115
+ const Close = styled.div `
2116
+ margin-left: auto;
2117
+ display: flex;
2118
+ align-items: center;
2119
+ padding-left: 20px;
2120
+ cursor: pointer;
2121
+ `;
2122
+ const CloseMsg = styled.span `
2123
+ font-size: ${FontSizes.SMALL};
2124
+ font-weight: 400;
2125
+ font-family: ${FontStyles.DEFAULT};
2126
+ line-height: 1em;
2127
+ color: ${Colors.MEDIUM_GRAY.Hex};
2128
+ `;
2129
+ const ContentWrapper = styled.div `
2130
+ overflow-x: hidden;
2131
+ overflow-y: auto;
2132
+ background: #ffffff;
2133
+ flex: 1;
2134
+ box-sizing: border-box;
2135
+ `;
2136
+ const ButtonBar = styled.div `
2137
+ flex-shrink: 0;
2138
+ background: #ffffff;
2139
+ padding: 20px;
2140
+ border-top: 1px solid #e7e6e6;
2141
+ display: flex;
2142
+ align-items: center;
2143
+ justify-self: flex-end;
2144
+ box-sizing: border-box;
2145
+ `;
2146
+ const ButtonContainer = styled.div `
2147
+ margin: 0 10px;
2148
2148
  `;
2149
2149
  const Modal = (_a) => {
2150
2150
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton, id } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton", "id"]);
@@ -2187,21 +2187,21 @@ const Modal = (_a) => {
2187
2187
  secondaryButton ? (React.createElement(ButtonContainer, { id: `${baseId}-secondary-button-container` },
2188
2188
  React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${baseId}-secondary-button` })))) : null,
2189
2189
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${baseId}-primary-button` }))) : null)) : null)) : null)));
2190
- };
2191
-
2192
- const Wrapper$5 = styled.div `
2193
- position: relative;
2194
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2195
- `;
2196
- const Trigger = styled.div `
2197
- box-sizing: border-box;
2198
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2199
- height: 40px;
2200
- padding: 0 10px;
2201
- position: relative;
2202
- cursor: pointer;
2203
- border-width: 1px;
2204
- border-style: solid;
2190
+ };
2191
+
2192
+ const Wrapper$5 = styled.div `
2193
+ position: relative;
2194
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2195
+ `;
2196
+ const Trigger = styled.div `
2197
+ box-sizing: border-box;
2198
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2199
+ height: 40px;
2200
+ padding: 0 10px;
2201
+ position: relative;
2202
+ cursor: pointer;
2203
+ border-width: 1px;
2204
+ border-style: solid;
2205
2205
  border-color: ${props => {
2206
2206
  if (props.$invalid) {
2207
2207
  return Colors.RED.Hex;
@@ -2212,67 +2212,67 @@ const Trigger = styled.div `
2212
2212
  else {
2213
2213
  return '#cccccc';
2214
2214
  }
2215
- }};
2216
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2217
- background-image: none;
2218
- display: flex;
2219
- width: 100%;
2220
- align-items: center;
2221
- justify-content: space-between;
2222
- z-index: 1;
2215
+ }};
2216
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2217
+ background-image: none;
2218
+ display: flex;
2219
+ width: 100%;
2220
+ align-items: center;
2221
+ justify-content: space-between;
2222
+ z-index: 1;
2223
2223
  `;
2224
2224
  Trigger.defaultProps = { theme: EditableTheme };
2225
- const Value = styled.div `
2226
- color: ${Colors.BLACK.Hex};
2227
- font-family: ${FontStyles.DEFAULT};
2228
- font-size: ${FontSizes.DEFAULT};
2229
- font-weight: 400;
2230
- line-height: 2.9em;
2231
- overflow: hidden;
2232
- text-overflow: ellipsis;
2233
- white-space: nowrap;
2234
- width: 100%;
2235
- `;
2236
- const Options = styled.div `
2237
- background: #fff;
2238
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2239
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2240
- border-radius: 0px 0px 4px 4px;
2241
- border-style: solid;
2242
- border-top: none;
2243
- border-width: 1px;
2244
- left: 0;
2245
- position: absolute;
2246
- right: 0;
2247
- z-index: 10;
2248
- max-height: 220px;
2249
- overflow: auto;
2225
+ const Value = styled.div `
2226
+ color: ${Colors.BLACK.Hex};
2227
+ font-family: ${FontStyles.DEFAULT};
2228
+ font-size: ${FontSizes.DEFAULT};
2229
+ font-weight: 400;
2230
+ line-height: 2.9em;
2231
+ overflow: hidden;
2232
+ text-overflow: ellipsis;
2233
+ white-space: nowrap;
2234
+ width: 100%;
2235
+ `;
2236
+ const Options = styled.div `
2237
+ background: #fff;
2238
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2239
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2240
+ border-radius: 0px 0px 4px 4px;
2241
+ border-style: solid;
2242
+ border-top: none;
2243
+ border-width: 1px;
2244
+ left: 0;
2245
+ position: absolute;
2246
+ right: 0;
2247
+ z-index: 10;
2248
+ max-height: 220px;
2249
+ overflow: auto;
2250
2250
  `;
2251
2251
  Options.defaultProps = { theme: EditableTheme };
2252
- const Scrim = styled.div `
2253
- bottom: 0;
2254
- left: 0;
2255
- position: fixed;
2256
- right: 0;
2257
- top: 0;
2258
- z-index: 9;
2259
- `;
2260
- const SearchInput = styled.input `
2261
- position: absolute;
2262
- left: 2px;
2263
- top: 2px;
2264
- z-index: 999;
2265
- width: 90%;
2266
- height: 30px;
2267
- border: none;
2268
- outline: none;
2269
- color: ${Colors.BLACK.Hex};
2270
- font-family: ${FontStyles.DEFAULT};
2271
- font-size: ${FontSizes.DEFAULT};
2272
- font-weight: 400;
2273
- line-height: 2.9em;
2274
- overflow: hidden;
2275
- white-space: nowrap;
2252
+ const Scrim = styled.div `
2253
+ bottom: 0;
2254
+ left: 0;
2255
+ position: fixed;
2256
+ right: 0;
2257
+ top: 0;
2258
+ z-index: 9;
2259
+ `;
2260
+ const SearchInput = styled.input `
2261
+ position: absolute;
2262
+ left: 2px;
2263
+ top: 2px;
2264
+ z-index: 999;
2265
+ width: 90%;
2266
+ height: 30px;
2267
+ border: none;
2268
+ outline: none;
2269
+ color: ${Colors.BLACK.Hex};
2270
+ font-family: ${FontStyles.DEFAULT};
2271
+ font-size: ${FontSizes.DEFAULT};
2272
+ font-weight: 400;
2273
+ line-height: 2.9em;
2274
+ overflow: hidden;
2275
+ white-space: nowrap;
2276
2276
  `;
2277
2277
  const MultiSelect = (_a) => {
2278
2278
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style, id } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style", "id"]);
@@ -2292,37 +2292,37 @@ const MultiSelect = (_a) => {
2292
2292
  showOptions ? (React.createElement(Options, { id: `${baseId}-options` },
2293
2293
  React.createElement(Checklist, { id: `${baseId}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2294
2294
  showOptions ? (React.createElement(Scrim, { id: `${baseId}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
2295
- };
2296
-
2297
- const Wrapper$4 = styled.div `
2298
- display: flex;
2299
- padding: 16px 30px;
2300
- align-items: center;
2301
- gap: 20px;
2302
- align-self: stretch;
2303
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2304
- `;
2305
- const Title = styled.div `
2306
- display: flex;
2307
- align-items: center;
2308
- gap: 20px;
2309
- `;
2310
- const Info = styled.div `
2311
- display: flex;
2312
- flex-direction: column;
2313
- align-items: flex-start;
2314
- gap: 4px;
2315
- flex: 1 0 0;
2316
- `;
2317
- const Breadcrumbs = styled.div `
2318
- display: flex;
2319
- align-items: center;
2320
- gap: 4px;
2321
- `;
2322
- const Actions = styled.div `
2323
- display: flex;
2324
- align-items: center;
2325
- gap: 8px;
2295
+ };
2296
+
2297
+ const Wrapper$4 = styled.div `
2298
+ display: flex;
2299
+ padding: 16px 30px;
2300
+ align-items: center;
2301
+ gap: 20px;
2302
+ align-self: stretch;
2303
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2304
+ `;
2305
+ const Title = styled.div `
2306
+ display: flex;
2307
+ align-items: center;
2308
+ gap: 20px;
2309
+ `;
2310
+ const Info = styled.div `
2311
+ display: flex;
2312
+ flex-direction: column;
2313
+ align-items: flex-start;
2314
+ gap: 4px;
2315
+ flex: 1 0 0;
2316
+ `;
2317
+ const Breadcrumbs = styled.div `
2318
+ display: flex;
2319
+ align-items: center;
2320
+ gap: 4px;
2321
+ `;
2322
+ const Actions = styled.div `
2323
+ display: flex;
2324
+ align-items: center;
2325
+ gap: 8px;
2326
2326
  `;
2327
2327
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag, id, }) => {
2328
2328
  const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, } = buttonMenu || {};
@@ -2345,13 +2345,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag, id, })
2345
2345
  return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
2346
2346
  }),
2347
2347
  menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, id: `${baseId}-button-menu`, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
2348
- };
2349
-
2350
- const Wrapper$3 = styled.nav `
2351
- box-sizing: border-box;
2352
- display: flex;
2353
- align-items: center;
2354
- column-gap: 10px;
2348
+ };
2349
+
2350
+ const Wrapper$3 = styled.nav `
2351
+ box-sizing: border-box;
2352
+ display: flex;
2353
+ align-items: center;
2354
+ column-gap: 10px;
2355
2355
  `;
2356
2356
  const Pagination = (_a) => {
2357
2357
  var { currentPage = 1, onClick, pageCount = 0, id } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount", "id"]);
@@ -2381,82 +2381,82 @@ const Pagination = (_a) => {
2381
2381
  value: `${p}`,
2382
2382
  })), value: `${currentPage}` }),
2383
2383
  React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, id: `${baseId}-next-button`, onClick: handleNextClick, small: true })));
2384
- };
2385
-
2386
- const Wrapper$2 = styled.label `
2387
- border-radius: 4px;
2388
- padding: 4px 0px 4px 6px;
2389
- margin-left: -6px;
2390
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2391
- display: flex;
2392
- align-items: center;
2393
- font-size: ${FontSizes.DEFAULT};
2394
- line-height: 1.6em;
2395
- box-sizing: border-box;
2396
- position: relative;
2397
-
2398
- &:focus-within {
2399
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2400
- }
2384
+ };
2385
+
2386
+ const Wrapper$2 = styled.label `
2387
+ border-radius: 4px;
2388
+ padding: 4px 0px 4px 6px;
2389
+ margin-left: -6px;
2390
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2391
+ display: flex;
2392
+ align-items: center;
2393
+ font-size: ${FontSizes.DEFAULT};
2394
+ line-height: 1.6em;
2395
+ box-sizing: border-box;
2396
+ position: relative;
2397
+
2398
+ &:focus-within {
2399
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2400
+ }
2401
2401
  `;
2402
2402
  Wrapper$2.defaultProps = { theme: EditableTheme };
2403
- const Input = styled.input `
2404
- font-size: 20px;
2405
- margin: 0px;
2406
- line-height: 1.6em;
2407
- box-sizing: border-box;
2408
- position: absolute;
2409
- opacity: 0;
2410
- cursor: pointer;
2411
- height: 0;
2412
- width: 0;
2413
- &:checked + span {
2414
- border-color: ${Colors.PRIMARY.Hex};
2415
- }
2416
- &:checked + span:after {
2417
- background-color: ${Colors.PRIMARY.Hex};
2418
- display: block;
2419
- }
2420
- &:disabled + span {
2421
- background-color: #d3d3d3;
2422
- border-color: #d3d3d3;
2423
- }
2424
- &:disabled + span:after {
2425
- background-color: #fff;
2426
- }
2427
- &:checked:disabled + span:after {
2428
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2429
- }
2430
- `;
2431
- const Check = styled.span `
2432
- height: 17px;
2433
- width: 17px;
2434
- border-radius: 50%;
2435
- background-color: #fff;
2436
- border-width: 2px;
2437
- border-style: solid;
2438
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2439
- box-sizing: border-box;
2440
- position: relative;
2441
- &:after {
2442
- content: '';
2443
- position: absolute;
2444
- top: 2px;
2445
- left: 2px;
2446
- width: 9px;
2447
- height: 9px;
2448
- border-radius: 50%;
2449
- box-sizing: border-box;
2450
- display: none;
2451
- }
2452
- `;
2453
- const Label = styled.span `
2454
- font-family: ${FontStyles.DEFAULT};
2455
- font-size: ${FontSizes.DEFAULT};
2456
- font-weight: 400;
2457
- color: ${Colors.BLACK.Hex};
2458
- line-height: 1.6em;
2459
- margin-left: 6px;
2403
+ const Input = styled.input `
2404
+ font-size: 20px;
2405
+ margin: 0px;
2406
+ line-height: 1.6em;
2407
+ box-sizing: border-box;
2408
+ position: absolute;
2409
+ opacity: 0;
2410
+ cursor: pointer;
2411
+ height: 0;
2412
+ width: 0;
2413
+ &:checked + span {
2414
+ border-color: ${Colors.PRIMARY.Hex};
2415
+ }
2416
+ &:checked + span:after {
2417
+ background-color: ${Colors.PRIMARY.Hex};
2418
+ display: block;
2419
+ }
2420
+ &:disabled + span {
2421
+ background-color: #d3d3d3;
2422
+ border-color: #d3d3d3;
2423
+ }
2424
+ &:disabled + span:after {
2425
+ background-color: #fff;
2426
+ }
2427
+ &:checked:disabled + span:after {
2428
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2429
+ }
2430
+ `;
2431
+ const Check = styled.span `
2432
+ height: 17px;
2433
+ width: 17px;
2434
+ border-radius: 50%;
2435
+ background-color: #fff;
2436
+ border-width: 2px;
2437
+ border-style: solid;
2438
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2439
+ box-sizing: border-box;
2440
+ position: relative;
2441
+ &:after {
2442
+ content: '';
2443
+ position: absolute;
2444
+ top: 2px;
2445
+ left: 2px;
2446
+ width: 9px;
2447
+ height: 9px;
2448
+ border-radius: 50%;
2449
+ box-sizing: border-box;
2450
+ display: none;
2451
+ }
2452
+ `;
2453
+ const Label = styled.span `
2454
+ font-family: ${FontStyles.DEFAULT};
2455
+ font-size: ${FontSizes.DEFAULT};
2456
+ font-weight: 400;
2457
+ color: ${Colors.BLACK.Hex};
2458
+ line-height: 1.6em;
2459
+ margin-left: 6px;
2460
2460
  `;
2461
2461
  const Radio = (_a) => {
2462
2462
  var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, id } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "id"]);
@@ -2467,8 +2467,8 @@ const Radio = (_a) => {
2467
2467
  React.createElement(Label, { id: `${baseId}-label` },
2468
2468
  children,
2469
2469
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2470
- };
2471
-
2470
+ };
2471
+
2472
2472
  const RadioList = (_a) => {
2473
2473
  var { disabled, onChange, options, value, id } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value", "id"]);
2474
2474
  const baseId = id || 'radio-list';
@@ -2477,69 +2477,69 @@ const RadioList = (_a) => {
2477
2477
  const optionId = `${baseId}-option-${index}`;
2478
2478
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, id: optionId, key: option.value, onChange: onChange, value: option.value }, accessibleProps), label));
2479
2479
  })));
2480
- };
2481
-
2482
- const StyledTable = styled.table `
2483
- width: 100%;
2484
- margin-top: 1px;
2485
- table-layout: ${props => props.$tableLayout || 'auto'};
2486
- border-collapse: collapse;
2487
- text-indent: 0px;
2488
- border-spacing: 0px;
2489
- border-color: none;
2490
- box-sizing: border-box;
2491
- `;
2492
- const Header = styled.th `
2493
- padding: 12px !important;
2494
- text-align: left;
2495
- font-weight: 500;
2496
- border-bottom: 1px solid #e5e5e5;
2497
- border-top: 1px solid #e5e5e5;
2498
- text-transform: uppercase;
2499
- font-size: 12px;
2500
- font-family: ${FontStyles.DEFAULT};
2501
- letter-spacing: 1px;
2502
- white-space: nowrap;
2503
- line-height: 1;
2504
- position: relative;
2505
- box-sizing: border-box;
2506
- width: ${props => props.$width || 'auto'};
2507
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2508
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2480
+ };
2481
+
2482
+ const StyledTable = styled.table `
2483
+ width: 100%;
2484
+ margin-top: 1px;
2485
+ table-layout: ${props => props.$tableLayout || 'auto'};
2486
+ border-collapse: collapse;
2487
+ text-indent: 0px;
2488
+ border-spacing: 0px;
2489
+ border-color: none;
2490
+ box-sizing: border-box;
2491
+ `;
2492
+ const Header = styled.th `
2493
+ padding: 12px !important;
2494
+ text-align: left;
2495
+ font-weight: 500;
2496
+ border-bottom: 1px solid #e5e5e5;
2497
+ border-top: 1px solid #e5e5e5;
2498
+ text-transform: uppercase;
2499
+ font-size: 12px;
2500
+ font-family: ${FontStyles.DEFAULT};
2501
+ letter-spacing: 1px;
2502
+ white-space: nowrap;
2503
+ line-height: 1;
2504
+ position: relative;
2505
+ box-sizing: border-box;
2506
+ width: ${props => props.$width || 'auto'};
2507
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2508
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2509
2509
  `;
2510
2510
  Header.defaultProps = { theme: EditableTheme };
2511
- const Row = styled.tr `
2512
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2513
- transition: all 0.2s;
2514
- background-color: ${props => props.$bgColor};
2515
- box-sizing: border-box;
2516
- &:hover {
2517
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2518
- }
2511
+ const Row = styled.tr `
2512
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2513
+ transition: all 0.2s;
2514
+ background-color: ${props => props.$bgColor};
2515
+ box-sizing: border-box;
2516
+ &:hover {
2517
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2518
+ }
2519
2519
  `;
2520
2520
  Row.defaultProps = { theme: EditableTheme };
2521
- const Column = styled.td `
2522
- padding: 16px 12px !important;
2523
- font-size: ${FontSizes.DEFAULT} !important;
2524
- font-weight: 400 !important;
2525
- font-family: ${FontStyles.DEFAULT};
2526
- border: none !important;
2527
- word-break: break-word;
2528
- line-height: 1.4em;
2529
- box-sizing: border-box;
2530
- text-align: ${props => props.$align || 'left'};
2531
- width: ${props => props.$width || 'auto'};
2532
- `;
2533
- const IconWrapper = styled.span `
2534
- position: absolute;
2535
- top: 50%;
2536
- transform: translateY(-50%);
2537
- margin-left: 2px;
2538
- `;
2539
- const StyledIcon$1 = styled(Icon) `
2540
- > path {
2541
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2542
- }
2521
+ const Column = styled.td `
2522
+ padding: 16px 12px !important;
2523
+ font-size: ${FontSizes.DEFAULT} !important;
2524
+ font-weight: 400 !important;
2525
+ font-family: ${FontStyles.DEFAULT};
2526
+ border: none !important;
2527
+ word-break: break-word;
2528
+ line-height: 1.4em;
2529
+ box-sizing: border-box;
2530
+ text-align: ${props => props.$align || 'left'};
2531
+ width: ${props => props.$width || 'auto'};
2532
+ `;
2533
+ const IconWrapper = styled.span `
2534
+ position: absolute;
2535
+ top: 50%;
2536
+ transform: translateY(-50%);
2537
+ margin-left: 2px;
2538
+ `;
2539
+ const StyledIcon$1 = styled(Icon) `
2540
+ > path {
2541
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2542
+ }
2543
2543
  `;
2544
2544
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2545
2545
  const Table = (_a) => {
@@ -2561,55 +2561,55 @@ const Table = (_a) => {
2561
2561
  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'));
2562
2562
  })));
2563
2563
  }))) : null));
2564
- };
2565
-
2566
- const Wrapper$1 = styled.div `
2567
- display: flex;
2568
- box-sizing: border-box;
2569
- align-items: flex-end;
2570
- border-top: 1px solid #e5e5e5;
2571
- border-bottom: 1px solid #e5e5e5;
2572
- flex-shrink: 0;
2573
- align-self: stretch;
2574
- padding: 0;
2575
- margin: 0;
2576
- `;
2577
- const Tab = styled.div `
2578
- display: flex;
2579
- align-items: center;
2580
- gap: 6px;
2581
- font-size: ${FontSizes.DEFAULT};
2582
- font-family: ${FontStyles.DEFAULT};
2583
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2584
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2585
- line-height: 1em;
2586
- padding: 16px 30px 12px;
2587
- margin: 0 0 -1px 0;
2588
- border-bottom-width: 4px;
2589
- border-bottom-style: solid;
2590
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2591
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2592
- box-sizing: border-box;
2593
- &:hover {
2594
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2595
- font-weight: 500;
2596
- }
2564
+ };
2565
+
2566
+ const Wrapper$1 = styled.div `
2567
+ display: flex;
2568
+ box-sizing: border-box;
2569
+ align-items: flex-end;
2570
+ border-top: 1px solid #e5e5e5;
2571
+ border-bottom: 1px solid #e5e5e5;
2572
+ flex-shrink: 0;
2573
+ align-self: stretch;
2574
+ padding: 0;
2575
+ margin: 0;
2576
+ `;
2577
+ const Tab = styled.div `
2578
+ display: flex;
2579
+ align-items: center;
2580
+ gap: 6px;
2581
+ font-size: ${FontSizes.DEFAULT};
2582
+ font-family: ${FontStyles.DEFAULT};
2583
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2584
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2585
+ line-height: 1em;
2586
+ padding: 16px 30px 12px;
2587
+ margin: 0 0 -1px 0;
2588
+ border-bottom-width: 4px;
2589
+ border-bottom-style: solid;
2590
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2591
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2592
+ box-sizing: border-box;
2593
+ &:hover {
2594
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2595
+ font-weight: 500;
2596
+ }
2597
2597
  `;
2598
2598
  Tab.defaultProps = { theme: EditableTheme };
2599
- const Badge = styled.div `
2600
- display: flex;
2601
- width: 18px;
2602
- height: 18px;
2603
- justify-content: center;
2604
- align-items: center;
2605
- border-radius: 9px;
2606
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2607
- color: #fff;
2608
- font-family: ${FontStyles.DEFAULT};
2609
- font-size: 12px;
2610
- font-weight: 500;
2611
- line-height: 1;
2612
- letter-spacing: 1px;
2599
+ const Badge = styled.div `
2600
+ display: flex;
2601
+ width: 18px;
2602
+ height: 18px;
2603
+ justify-content: center;
2604
+ align-items: center;
2605
+ border-radius: 9px;
2606
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2607
+ color: #fff;
2608
+ font-family: ${FontStyles.DEFAULT};
2609
+ font-size: 12px;
2610
+ font-weight: 500;
2611
+ line-height: 1;
2612
+ letter-spacing: 1px;
2613
2613
  `;
2614
2614
  Badge.defaultProps = { theme: EditableTheme };
2615
2615
  const Tabs = (_a) => {
@@ -2623,29 +2623,29 @@ const Tabs = (_a) => {
2623
2623
  label));
2624
2624
  })));
2625
2625
  };
2626
- Tabs.defaultProps = {};
2627
-
2628
- const Track = styled.div `
2629
- height: 24px;
2630
- border-radius: 12px;
2631
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2632
- display: flex;
2633
- align-items: center;
2634
- cursor: pointer;
2635
- width: 40px;
2636
- padding: 2px;
2637
- box-sizing: border-box;
2638
- `;
2639
- const Handle = styled.div `
2640
- width: 20px;
2641
- height: 20px;
2642
- border-radius: 10px;
2643
- background: #ffffff;
2644
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2645
- display: flex;
2646
- align-items: center;
2647
- justify-content: center;
2648
- box-sizing: border-box;
2626
+ Tabs.defaultProps = {};
2627
+
2628
+ const Track = styled.div `
2629
+ height: 24px;
2630
+ border-radius: 12px;
2631
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2632
+ display: flex;
2633
+ align-items: center;
2634
+ cursor: pointer;
2635
+ width: 40px;
2636
+ padding: 2px;
2637
+ box-sizing: border-box;
2638
+ `;
2639
+ const Handle = styled.div `
2640
+ width: 20px;
2641
+ height: 20px;
2642
+ border-radius: 10px;
2643
+ background: #ffffff;
2644
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2645
+ display: flex;
2646
+ align-items: center;
2647
+ justify-content: center;
2648
+ box-sizing: border-box;
2649
2649
  `;
2650
2650
  const Toggle = (_a) => {
2651
2651
  var { onClick, on, id } = _a, accessibleProps = __rest(_a, ["onClick", "on", "id"]);
@@ -2655,32 +2655,32 @@ const Toggle = (_a) => {
2655
2655
  React.createElement(Handle, { "$on": on, id: `${baseId}-handle` },
2656
2656
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${baseId}-icon`, path: on ? mdiCheck : mdiClose, size: '16px' }))));
2657
2657
  };
2658
- Toggle.defaultProps = {};
2659
-
2660
- const Container = styled.div `
2661
- width: 100%;
2662
- padding: 40px auto;
2663
- gap: 20px;
2664
- display: flex;
2665
- flex-direction: column;
2666
- justify-items: center;
2667
- align-items: center;
2668
- `;
2669
- const Wrapper = styled.div `
2670
- gap: 10px;
2671
- display: flex;
2672
- flex-direction: column;
2673
- justify-items: center;
2674
- align-items: center;
2675
- `;
2676
- const StyledIcon = styled.div `
2677
- display: flex;
2678
- align-items: center;
2679
- justify-content: center;
2680
- width: 80px;
2681
- height: 80px;
2682
- border-radius: 40px;
2683
- background: #f5f5f5;
2658
+ Toggle.defaultProps = {};
2659
+
2660
+ const Container = styled.div `
2661
+ width: 100%;
2662
+ padding: 40px auto;
2663
+ gap: 20px;
2664
+ display: flex;
2665
+ flex-direction: column;
2666
+ justify-items: center;
2667
+ align-items: center;
2668
+ `;
2669
+ const Wrapper = styled.div `
2670
+ gap: 10px;
2671
+ display: flex;
2672
+ flex-direction: column;
2673
+ justify-items: center;
2674
+ align-items: center;
2675
+ `;
2676
+ const StyledIcon = styled.div `
2677
+ display: flex;
2678
+ align-items: center;
2679
+ justify-content: center;
2680
+ width: 80px;
2681
+ height: 80px;
2682
+ border-radius: 40px;
2683
+ background: #f5f5f5;
2684
2684
  `;
2685
2685
  const ZeroState = (_a) => {
2686
2686
  var { icon, title, description, action, id } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action", "id"]);
@@ -2692,7 +2692,7 @@ const ZeroState = (_a) => {
2692
2692
  React.createElement(Heading, { children: title, id: `${baseId}-heading`, type: 'tertiary' }),
2693
2693
  description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${baseId}-description`, type: 'default' }))),
2694
2694
  action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${baseId}-button`, onClick: action.onClick }))));
2695
- };
2696
-
2697
- export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
2698
- //# sourceMappingURL=index.js.map
2695
+ };
2696
+
2697
+ export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
2698
+ //# sourceMappingURL=index.js.map