@hexure/ui 1.13.37 → 1.13.39

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