@hexure/ui 1.13.13 → 1.13.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/index.js +1277 -1266
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/components/Input/Input.d.ts +2 -23
  5. package/dist/esm/index.js +1230 -1218
  6. package/dist/esm/index.js.map +1 -1
  7. package/dist/esm/types/components/Input/Input.d.ts +2 -23
  8. package/dist/index.d.ts +2 -23
  9. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -1,11 +1,11 @@
1
- import React, { useContext, useState, 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, mdiLoading, mdiInformationOutline, 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, { useContext, useState, 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, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
+ import dayjs from 'dayjs';
6
+ import Numeral from 'numeral';
7
+ import Moment from 'moment';
8
+
9
9
  /******************************************************************************
10
10
  Copyright (c) Microsoft Corporation.
11
11
 
@@ -19,22 +19,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
19
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
20
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
21
  PERFORMANCE OF THIS SOFTWARE.
22
- ***************************************************************************** */
23
- /* global Reflect, Promise, SuppressedError, Symbol */
24
-
25
- function __rest(s, e) {
26
- var t = {};
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
- }
31
- return t;
32
- }
33
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
34
- var e = new Error(message);
35
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
36
- };
37
-
22
+ ***************************************************************************** */
23
+ /* global Reflect, Promise, SuppressedError, Symbol */
24
+
25
+ function __rest(s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
+ }
31
+ return t;
32
+ }
33
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
34
+ var e = new Error(message);
35
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
36
+ };
37
+
38
38
  const Colors = {
39
39
  PRIMARY: {
40
40
  Hex: '#0193D7',
@@ -83,26 +83,26 @@ const FontSizes = {
83
83
  };
84
84
  const EditableTheme = {
85
85
  PRIMARY_COLOR: Colors.PRIMARY,
86
- };
87
-
88
- const Header$3 = styled.div `
89
- display: flex;
90
- align-items: center;
91
- justify-content: space-between;
92
- box-sizing: border-box;
93
- background: #f5f5f5;
94
- border: 1px solid #e5e5e5;
95
- padding: 14px 20px;
96
- height: 50px;
97
- cursor: pointer;
98
- `;
99
- const Title$2 = styled.div `
100
- font-size: ${FontSizes.DEFAULT};
101
- font-weight: 400;
102
- color: ${Colors.BLACK.Hex};
103
- line-height: 1.6em;
104
- font-family: ${FontStyles.DEFAULT};
105
- box-sizing: border-box;
86
+ };
87
+
88
+ const Header$3 = styled.div `
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: space-between;
92
+ box-sizing: border-box;
93
+ background: #f5f5f5;
94
+ border: 1px solid #e5e5e5;
95
+ padding: 14px 20px;
96
+ height: 50px;
97
+ cursor: pointer;
98
+ `;
99
+ const Title$2 = styled.div `
100
+ font-size: ${FontSizes.DEFAULT};
101
+ font-weight: 400;
102
+ color: ${Colors.BLACK.Hex};
103
+ line-height: 1.6em;
104
+ font-family: ${FontStyles.DEFAULT};
105
+ box-sizing: border-box;
106
106
  `;
107
107
  const Accordion = (_a) => {
108
108
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -111,13 +111,13 @@ const Accordion = (_a) => {
111
111
  React.createElement(Title$2, null, title),
112
112
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
113
113
  open ? children : null));
114
- };
115
-
116
- const StyledButton = styled.button `
117
- height: ${props => (props.$small ? '30px' : '40px')};
118
- line-height: 1em;
119
- border-radius: ${props => (props.$small ? '15px' : '20px')};
120
- margin: ${props => props.$margin || '0px'};
114
+ };
115
+
116
+ const StyledButton = styled.button `
117
+ height: ${props => (props.$small ? '30px' : '40px')};
118
+ line-height: 1em;
119
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
120
+ margin: ${props => props.$margin || '0px'};
121
121
  padding: ${props => {
122
122
  if (props.$hasChildren) {
123
123
  if (props.$small) {
@@ -128,9 +128,9 @@ const StyledButton = styled.button `
128
128
  }
129
129
  }
130
130
  return '0px';
131
- }};
132
- outline: none;
133
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
131
+ }};
132
+ outline: none;
133
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
134
134
  width: ${props => {
135
135
  if (props.$hasChildren) {
136
136
  return 'auto';
@@ -139,53 +139,53 @@ const StyledButton = styled.button `
139
139
  return '30px';
140
140
  }
141
141
  return '40px';
142
- }};
143
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
144
- display: flex;
145
- align-items: center;
146
- justify-content: center;
147
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
148
- border-width: 1px;
149
- border-style: solid;
150
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
151
- box-sizing: border-box;
152
-
153
- &:active,
154
- &:focus,
155
- &:hover {
156
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
157
- }
158
- `;
159
- const Label$5 = styled.span `
160
- color: ${props => props.$content_color || '#fff'};
161
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
162
- font-family: ${FontStyles.DEFAULT};
163
- font-weight: 500;
164
- line-height: 1;
165
- `;
166
- const StyledIcon$6 = styled.span `
167
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
168
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
169
- display: flex;
170
- align-items: center;
171
- box-sizing: border-box;
172
- `;
173
- const Badge$1 = styled.span `
174
- width: ${props => (props.$small ? '20px' : '24px')};
175
- height: ${props => (props.$small ? '20px' : '24px')};
176
- line-height: 1;
177
- display: flex;
178
- align-items: center;
179
- justify-content: center;
180
- border-radius: 100%;
181
- background-color: ${props => props.$bg_color || '#fff'};
182
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
183
- font-size: ${props => (props.$small ? '10px' : '12px')};
184
- font-weight: 600;
185
- font-family: ${FontStyles.DEFAULT};
186
- letter-spacing: -1px;
187
- margin-left: ${props => (props.$small ? '5px' : '10px')};
188
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
142
+ }};
143
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
144
+ display: flex;
145
+ align-items: center;
146
+ justify-content: center;
147
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
148
+ border-width: 1px;
149
+ border-style: solid;
150
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
151
+ box-sizing: border-box;
152
+
153
+ &:active,
154
+ &:focus,
155
+ &:hover {
156
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
157
+ }
158
+ `;
159
+ const Label$5 = styled.span `
160
+ color: ${props => props.$content_color || '#fff'};
161
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
162
+ font-family: ${FontStyles.DEFAULT};
163
+ font-weight: 500;
164
+ line-height: 1;
165
+ `;
166
+ const StyledIcon$6 = styled.span `
167
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
168
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
169
+ display: flex;
170
+ align-items: center;
171
+ box-sizing: border-box;
172
+ `;
173
+ const Badge$1 = styled.span `
174
+ width: ${props => (props.$small ? '20px' : '24px')};
175
+ height: ${props => (props.$small ? '20px' : '24px')};
176
+ line-height: 1;
177
+ display: flex;
178
+ align-items: center;
179
+ justify-content: center;
180
+ border-radius: 100%;
181
+ background-color: ${props => props.$bg_color || '#fff'};
182
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
183
+ font-size: ${props => (props.$small ? '10px' : '12px')};
184
+ font-weight: 600;
185
+ font-family: ${FontStyles.DEFAULT};
186
+ letter-spacing: -1px;
187
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
188
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
189
189
  `;
190
190
  const Button = (_a) => {
191
191
  var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
@@ -227,58 +227,58 @@ const Button = (_a) => {
227
227
  icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
228
228
  React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
229
229
  badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
230
- };
231
-
232
- const StyledComponent = styled.p `
233
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
234
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
235
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
236
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
237
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
238
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
239
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
240
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
241
- margin: ${props => props.$margin || '0px'};
242
- padding: ${props => props.$padding || '0px'};
243
- text-align: ${props => props.$align || 'left'};
244
- box-sizing: border-box;
230
+ };
231
+
232
+ const StyledComponent = styled.p `
233
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
234
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
235
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
236
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
237
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
238
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
239
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
240
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
241
+ margin: ${props => props.$margin || '0px'};
242
+ padding: ${props => props.$padding || '0px'};
243
+ text-align: ${props => props.$align || 'left'};
244
+ box-sizing: border-box;
245
245
  `;
246
246
  const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
247
247
  return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
248
248
  };
249
249
  Copy.defaultProps = {
250
250
  type: 'default',
251
- };
252
-
253
- const H1 = styled.h1 `
254
- color: ${Colors.BLACK.Hex};
255
- font-size: 30px;
256
- font-weight: ${props => (props.$bold ? '500' : '400')};
257
- line-height: 1.4em;
258
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
259
- margin: ${props => props.$margin || '0px'};
260
- padding: ${props => props.$padding || '0px'};
261
- box-sizing: border-box;
262
- `;
263
- const H2 = styled.h2 `
264
- color: ${Colors.BLACK.Hex};
265
- font-size: 24px;
266
- font-weight: ${props => (props.$bold ? '500' : '400')};
267
- line-height: 1.33em;
268
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
269
- margin: ${props => props.$margin || '0px'};
270
- padding: ${props => props.$padding || '0px'};
271
- box-sizing: border-box;
272
- `;
273
- const H3 = styled.h3 `
274
- color: ${Colors.BLACK.Hex};
275
- font-size: 18px;
276
- font-weight: ${props => (props.$bold ? '500' : '400')};
277
- line-height: 1.33em;
278
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
279
- margin: ${props => props.$margin || '0px'};
280
- padding: ${props => props.$padding || '0px'};
281
- box-sizing: border-box;
251
+ };
252
+
253
+ const H1 = styled.h1 `
254
+ color: ${Colors.BLACK.Hex};
255
+ font-size: 30px;
256
+ font-weight: ${props => (props.$bold ? '500' : '400')};
257
+ line-height: 1.4em;
258
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
259
+ margin: ${props => props.$margin || '0px'};
260
+ padding: ${props => props.$padding || '0px'};
261
+ box-sizing: border-box;
262
+ `;
263
+ const H2 = styled.h2 `
264
+ color: ${Colors.BLACK.Hex};
265
+ font-size: 24px;
266
+ font-weight: ${props => (props.$bold ? '500' : '400')};
267
+ line-height: 1.33em;
268
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
269
+ margin: ${props => props.$margin || '0px'};
270
+ padding: ${props => props.$padding || '0px'};
271
+ box-sizing: border-box;
272
+ `;
273
+ const H3 = styled.h3 `
274
+ color: ${Colors.BLACK.Hex};
275
+ font-size: 18px;
276
+ font-weight: ${props => (props.$bold ? '500' : '400')};
277
+ line-height: 1.33em;
278
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
279
+ margin: ${props => props.$margin || '0px'};
280
+ padding: ${props => props.$padding || '0px'};
281
+ box-sizing: border-box;
282
282
  `;
283
283
  const Heading = (_a) => {
284
284
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -297,29 +297,29 @@ const Heading = (_a) => {
297
297
  Heading.defaultProps = {
298
298
  bold: false,
299
299
  type: 'primary',
300
- };
301
-
302
- const Wrapper$h = styled.div `
303
- position: fixed;
304
- top: 0;
305
- right: 0;
306
- bottom: 0;
307
- left: 0;
308
- z-index: 9999;
309
- background: rgba(0, 0, 0, 0.8);
310
- display: flex;
311
- align-items: center;
312
- justify-content: center;
313
- box-sizing: border-box;
300
+ };
301
+
302
+ const Wrapper$h = styled.div `
303
+ position: fixed;
304
+ top: 0;
305
+ right: 0;
306
+ bottom: 0;
307
+ left: 0;
308
+ z-index: 9999;
309
+ background: rgba(0, 0, 0, 0.8);
310
+ display: flex;
311
+ align-items: center;
312
+ justify-content: center;
313
+ box-sizing: border-box;
314
314
  `;
315
315
  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)));
316
- const Buttons$1 = styled.div `
317
- display: flex;
318
- gap: 10px;
319
- align-items: center;
320
- justify-content: center;
321
- margin-top: 30px;
322
- box-sizing: border-box;
316
+ const Buttons$1 = styled.div `
317
+ display: flex;
318
+ gap: 10px;
319
+ align-items: center;
320
+ justify-content: center;
321
+ margin-top: 30px;
322
+ box-sizing: border-box;
323
323
  `;
324
324
  const ActionDialog = (_a) => {
325
325
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
@@ -331,29 +331,29 @@ const ActionDialog = (_a) => {
331
331
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
332
332
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
333
333
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)));
334
- };
335
-
336
- const Wrapper$g = styled.div `
337
- border: 1px solid #f1f1f1;
338
- border-radius: 4px;
339
- border-left-width: 4px;
340
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
341
- display: flex;
342
- align-items: flex-start;
343
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
344
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
345
- box-sizing: border-box;
346
- `;
347
- const StyledIcon$5 = styled(Icon) `
348
- flex-shrink: 0;
349
- `;
350
- const Action$1 = styled.div `
351
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
352
- font-size: ${FontSizes.DEFAULT};
353
- font-family: ${FontStyles.DEFAULT};
354
- font-weight: 500;
355
- cursor: pointer;
356
- margin-top: 6px;
334
+ };
335
+
336
+ const Wrapper$g = styled.div `
337
+ border: 1px solid #f1f1f1;
338
+ border-radius: 4px;
339
+ border-left-width: 4px;
340
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
341
+ display: flex;
342
+ align-items: flex-start;
343
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
344
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
345
+ box-sizing: border-box;
346
+ `;
347
+ const StyledIcon$5 = styled(Icon) `
348
+ flex-shrink: 0;
349
+ `;
350
+ const Action$1 = styled.div `
351
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
352
+ font-size: ${FontSizes.DEFAULT};
353
+ font-family: ${FontStyles.DEFAULT};
354
+ font-weight: 500;
355
+ cursor: pointer;
356
+ margin-top: 6px;
357
357
  `;
358
358
  Action$1.defaultProps = { theme: EditableTheme };
359
359
  const Alert = (_a) => {
@@ -383,8 +383,8 @@ const Alert = (_a) => {
383
383
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
384
384
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
385
385
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
386
- };
387
-
386
+ };
387
+
388
388
  const colorMapping = {
389
389
  black: {
390
390
  fill_1: '#000000',
@@ -425,61 +425,61 @@ const Logo = (_a) => {
425
425
  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 }),
426
426
  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 })));
427
427
  }
428
- };
429
-
430
- const Container$3 = styled.header `
431
- width: 100%;
432
- display: flex;
433
- padding: 20px;
434
- box-sizing: border-box;
435
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
436
- background: '#fff';
437
- justify-content: space-between;
438
- `;
439
- const LogoWrapper = styled.div `
440
- display: flex;
441
- align-items: center;
442
- `;
443
- const Image = styled.img `
444
- height: 30px !important;
445
- width: auto !important;
446
- `;
447
- const Buttons = styled.div `
448
- display: flex;
449
- flex-direction: row;
450
- column-gap: 10px;
451
- flex-direction: reverse;
428
+ };
429
+
430
+ const Container$3 = styled.header `
431
+ width: 100%;
432
+ display: flex;
433
+ padding: 20px;
434
+ box-sizing: border-box;
435
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
436
+ background: '#fff';
437
+ justify-content: space-between;
438
+ `;
439
+ const LogoWrapper = styled.div `
440
+ display: flex;
441
+ align-items: center;
442
+ `;
443
+ const Image = styled.img `
444
+ height: 30px !important;
445
+ width: auto !important;
446
+ `;
447
+ const Buttons = styled.div `
448
+ display: flex;
449
+ flex-direction: row;
450
+ column-gap: 10px;
451
+ flex-direction: reverse;
452
452
  `;
453
453
  const AppHeader = ({ logoUrl, buttons = [] }) => {
454
454
  return (React.createElement(Container$3, null,
455
455
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
456
456
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
457
- };
458
-
459
- const Wrapper$f = styled.div `
460
- display: inline-block;
461
- border-radius: 4px;
462
- padding: 4px 6px;
463
- background: ${props => Colors[props.$color].Hex};
464
- color: #ffffff;
465
- box-sizing: border-box;
466
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
467
- `;
468
- const Content$3 = styled.div `
469
- display: flex;
470
- align-items: center;
471
- `;
472
- const Label$4 = styled.div `
473
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
474
- font-size: ${FontSizes.SMALL};
475
- font-weight: 500;
476
- font-family: ${FontStyles.DEFAULT};
477
- line-height: 1.2em;
478
- `;
479
- const Remove$1 = styled.div `
480
- margin-left: 10px;
481
- display: flex;
482
- align-items: center;
457
+ };
458
+
459
+ const Wrapper$f = styled.div `
460
+ display: inline-block;
461
+ border-radius: 4px;
462
+ padding: 4px 6px;
463
+ background: ${props => Colors[props.$color].Hex};
464
+ color: #ffffff;
465
+ box-sizing: border-box;
466
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
467
+ `;
468
+ const Content$3 = styled.div `
469
+ display: flex;
470
+ align-items: center;
471
+ `;
472
+ const Label$4 = styled.div `
473
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
474
+ font-size: ${FontSizes.SMALL};
475
+ font-weight: 500;
476
+ font-family: ${FontStyles.DEFAULT};
477
+ line-height: 1.2em;
478
+ `;
479
+ const Remove$1 = styled.div `
480
+ margin-left: 10px;
481
+ display: flex;
482
+ align-items: center;
483
483
  `;
484
484
  const Tag = (_a) => {
485
485
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -488,91 +488,91 @@ const Tag = (_a) => {
488
488
  React.createElement(Label$4, { "$color": color }, children),
489
489
  removable ? (React.createElement(Remove$1, null,
490
490
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
491
- };
492
-
493
- const SidebarContainer = styled.div `
494
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
495
- display: flex;
496
- flex-direction: column;
497
- height: 100%;
498
- padding: 12px 0px;
499
- width: ${props => (props.$isOpen ? props.$width : '60px')};
500
- `;
501
- const MenuWrapper$1 = styled.div `
502
- display: flex;
503
- align-items: center;
504
- border-left-width: 4px;
505
- border-left-style: solid;
506
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
507
- cursor: pointer;
508
- height: 40px;
509
-
510
- &:hover > div {
511
- color: ${props => props.$color.Hex};
512
- }
513
-
514
- &:hover > svg > path {
515
- fill: ${Colors.BLACK.Hex} !important;
516
- }
517
- `;
518
- const MenuIcon = styled(Icon) `
519
- width: 20px;
520
- height: 20px;
521
- margin: 0px 16px;
522
- flex-shrink: 0;
523
-
524
- > path {
525
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
526
- }
527
- `;
528
- const MenuLabel = styled.div `
529
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
530
- flex: 1;
531
- font-size: 12px;
532
- font-style: normal;
533
- font-weight: 600;
534
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
535
- line-height: 16px;
536
- padding: 12px 0px;
537
- letter-spacing: 1px;
538
- `;
539
- const SubMenu = styled.div `
540
- overflow-y: auto;
541
- padding-left: 44px;
542
- padding-right: 20px;
543
- padding-bottom: 10px;
544
- `;
545
- const SubMenuItem = styled.a `
546
- display: block;
547
- padding: 8px 12px;
548
- border-radius: 8px;
549
- font-size: 13px;
550
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
551
- line-height: 20px;
552
- text-decoration: none;
553
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
554
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
555
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
556
- cursor: pointer;
557
-
558
- &:hover {
559
- color: ${props => props.$color.Hex};
560
- font-weight: 500;
561
- }
562
- `;
563
- const Footer = styled.div `
564
- padding: 20px 14px 0px;
565
- display: flex;
566
- align-items: center;
567
- `;
568
- const FooterInfo = styled.div `
569
- display: flex;
570
- flex-direction: column;
571
- flex: 1;
572
- align-items: flex-start;
573
- `;
574
- const SidebarMenuContainer = styled.div `
575
- flex-grow: 1;
491
+ };
492
+
493
+ const SidebarContainer = styled.div `
494
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
495
+ display: flex;
496
+ flex-direction: column;
497
+ height: 100%;
498
+ padding: 12px 0px;
499
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
500
+ `;
501
+ const MenuWrapper$1 = styled.div `
502
+ display: flex;
503
+ align-items: center;
504
+ border-left-width: 4px;
505
+ border-left-style: solid;
506
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
507
+ cursor: pointer;
508
+ height: 40px;
509
+
510
+ &:hover > div {
511
+ color: ${props => props.$color.Hex};
512
+ }
513
+
514
+ &:hover > svg > path {
515
+ fill: ${Colors.BLACK.Hex} !important;
516
+ }
517
+ `;
518
+ const MenuIcon = styled(Icon) `
519
+ width: 20px;
520
+ height: 20px;
521
+ margin: 0px 16px;
522
+ flex-shrink: 0;
523
+
524
+ > path {
525
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
526
+ }
527
+ `;
528
+ const MenuLabel = styled.div `
529
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
530
+ flex: 1;
531
+ font-size: 12px;
532
+ font-style: normal;
533
+ font-weight: 600;
534
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
535
+ line-height: 16px;
536
+ padding: 12px 0px;
537
+ letter-spacing: 1px;
538
+ `;
539
+ const SubMenu = styled.div `
540
+ overflow-y: auto;
541
+ padding-left: 44px;
542
+ padding-right: 20px;
543
+ padding-bottom: 10px;
544
+ `;
545
+ const SubMenuItem = styled.a `
546
+ display: block;
547
+ padding: 8px 12px;
548
+ border-radius: 8px;
549
+ font-size: 13px;
550
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
551
+ line-height: 20px;
552
+ text-decoration: none;
553
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
554
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
555
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
556
+ cursor: pointer;
557
+
558
+ &:hover {
559
+ color: ${props => props.$color.Hex};
560
+ font-weight: 500;
561
+ }
562
+ `;
563
+ const Footer = styled.div `
564
+ padding: 20px 14px 0px;
565
+ display: flex;
566
+ align-items: center;
567
+ `;
568
+ const FooterInfo = styled.div `
569
+ display: flex;
570
+ flex-direction: column;
571
+ flex: 1;
572
+ align-items: flex-start;
573
+ `;
574
+ const SidebarMenuContainer = styled.div `
575
+ flex-grow: 1;
576
576
  `;
577
577
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
578
578
  const theme = useContext(ThemeContext) || EditableTheme;
@@ -596,75 +596,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
596
596
  e.preventDefault();
597
597
  toggleCollapse(!collapsed);
598
598
  }, small: true }))));
599
- };
600
-
601
- const Wrapper$e = styled.div `
602
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
603
- border-radius: 8px;
604
- box-sizing: border-box;
605
- display: flex;
606
- align-items: center;
607
- justify-content: space-between;
608
- padding: 16px 20px;
599
+ };
600
+
601
+ const Wrapper$e = styled.div `
602
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
603
+ border-radius: 8px;
604
+ box-sizing: border-box;
605
+ display: flex;
606
+ align-items: center;
607
+ justify-content: space-between;
608
+ padding: 16px 20px;
609
609
  `;
610
610
  Wrapper$e.defaultProps = { theme: EditableTheme };
611
- const Left = styled.div `
612
- box-sizing: border-box;
613
- display: flex;
614
- align-items: center;
615
- justify-content: space-between;
616
- flex-shrink: 0;
617
- `;
618
- const Info$1 = styled.div `
619
- box-sizing: border-box;
620
- display: flex;
621
- align-items: center;
622
- margin-right: 30px;
623
- `;
624
- const Selected = styled.span `
625
- font-size: 14px;
626
- font-weight: 400;
627
- font-family: ${FontStyles.DEFAULT};
628
- color: ${Colors.BLACK.Hex};
629
- line-height: 1;
630
- `;
631
- const Clear = styled.span `
632
- font-size: 14px;
633
- font-weight: 400;
634
- font-family: ${FontStyles.DEFAULT};
635
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
636
- line-height: 1;
637
- cursor: pointer;
638
- padding-left: 10px;
639
- margin-left: 10px;
640
- border-left: 1px solid #ccc;
611
+ const Left = styled.div `
612
+ box-sizing: border-box;
613
+ display: flex;
614
+ align-items: center;
615
+ justify-content: space-between;
616
+ flex-shrink: 0;
617
+ `;
618
+ const Info$1 = styled.div `
619
+ box-sizing: border-box;
620
+ display: flex;
621
+ align-items: center;
622
+ margin-right: 30px;
623
+ `;
624
+ const Selected = styled.span `
625
+ font-size: 14px;
626
+ font-weight: 400;
627
+ font-family: ${FontStyles.DEFAULT};
628
+ color: ${Colors.BLACK.Hex};
629
+ line-height: 1;
630
+ `;
631
+ const Clear = styled.span `
632
+ font-size: 14px;
633
+ font-weight: 400;
634
+ font-family: ${FontStyles.DEFAULT};
635
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
636
+ line-height: 1;
637
+ cursor: pointer;
638
+ padding-left: 10px;
639
+ margin-left: 10px;
640
+ border-left: 1px solid #ccc;
641
641
  `;
642
642
  Clear.defaultProps = { theme: EditableTheme };
643
- const Actions$1 = styled.div `
644
- box-sizing: border-box;
645
- display: flex;
646
- align-items: center;
647
- column-gap: 10px;
648
- `;
649
- const Error$1 = styled.div `
650
- box-sizing: border-box;
651
- display: flex;
652
- align-items: center;
653
- background: rgba(${Colors.RED.Rgb}, 0.1);
654
- border-radius: 4px;
655
- padding: 6px 8px;
656
- text-overflow: ellipsis;
657
- white-space: nowrap;
658
- overflow: hidden;
659
- margin-left: 30px;
660
- `;
661
- const ErrorMsg = styled.span `
662
- font-size: 14px;
663
- font-weight: 500;
664
- font-family: ${FontStyles.DEFAULT};
665
- line-height: 1em;
666
- color: ${Colors.RED.Hex};
667
- margin-left: 8px;
643
+ const Actions$1 = styled.div `
644
+ box-sizing: border-box;
645
+ display: flex;
646
+ align-items: center;
647
+ column-gap: 10px;
648
+ `;
649
+ const Error$1 = styled.div `
650
+ box-sizing: border-box;
651
+ display: flex;
652
+ align-items: center;
653
+ background: rgba(${Colors.RED.Rgb}, 0.1);
654
+ border-radius: 4px;
655
+ padding: 6px 8px;
656
+ text-overflow: ellipsis;
657
+ white-space: nowrap;
658
+ overflow: hidden;
659
+ margin-left: 30px;
660
+ `;
661
+ const ErrorMsg = styled.span `
662
+ font-size: 14px;
663
+ font-weight: 500;
664
+ font-family: ${FontStyles.DEFAULT};
665
+ line-height: 1em;
666
+ color: ${Colors.RED.Hex};
667
+ margin-left: 8px;
668
668
  `;
669
669
  const BulkActionBar = (_a) => {
670
670
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -679,8 +679,8 @@ const BulkActionBar = (_a) => {
679
679
  errorMsg ? (React.createElement(Error$1, null,
680
680
  React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
681
681
  React.createElement(ErrorMsg, null, errorMsg))) : null));
682
- };
683
-
682
+ };
683
+
684
684
  const Wrapper$d = styled.div `
685
685
  background: #fff;
686
686
  border-radius: 8px;
@@ -733,8 +733,8 @@ const MoreMenu = (_a) => {
733
733
  item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
734
734
  React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label)));
735
735
  })));
736
- };
737
-
736
+ };
737
+
738
738
  const MenuWrapper = styled.div `
739
739
  position: relative;
740
740
  display: inline-block;
@@ -822,19 +822,19 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
822
822
  return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
823
823
  React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
824
824
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
825
- };
826
-
827
- const Wrapper$c = styled.div `
828
- display: inline-block;
829
- position: relative;
830
- height: 16px;
831
- `;
832
- const StyledIcon$4 = styled(Icon) `
833
- width: 16px;
834
- height: 16px;
835
- margin: 0px 6px;
836
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
837
- cursor: pointer;
825
+ };
826
+
827
+ const Wrapper$c = styled.div `
828
+ display: inline-block;
829
+ position: relative;
830
+ height: 16px;
831
+ `;
832
+ const StyledIcon$4 = styled(Icon) `
833
+ width: 16px;
834
+ height: 16px;
835
+ margin: 0px 6px;
836
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
837
+ cursor: pointer;
838
838
  `;
839
839
  StyledIcon$4.defaultProps = { theme: EditableTheme };
840
840
  const positions = {
@@ -872,85 +872,85 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
872
872
  return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
873
873
  trigger || React.createElement(StyledIcon$4, { path: mdiInformationOutline }),
874
874
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
875
- };
876
-
877
- const Wrapper$b = styled.label `
878
- border-radius: 4px;
879
- padding: 4px 0px 4px 6px;
880
- margin-left: -6px;
881
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
882
- display: flex;
883
- align-items: center;
884
- font-size: ${FontSizes.DEFAULT};
885
- line-height: 1.6em;
886
- box-sizing: border-box;
887
- position: relative;
888
-
889
- &:focus-within {
890
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
891
- }
875
+ };
876
+
877
+ const Wrapper$b = styled.label `
878
+ border-radius: 4px;
879
+ padding: 4px 0px 4px 6px;
880
+ margin-left: -6px;
881
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
882
+ display: flex;
883
+ align-items: center;
884
+ font-size: ${FontSizes.DEFAULT};
885
+ line-height: 1.6em;
886
+ box-sizing: border-box;
887
+ position: relative;
888
+
889
+ &:focus-within {
890
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
891
+ }
892
892
  `;
893
893
  Wrapper$b.defaultProps = { theme: EditableTheme };
894
- const Input$2 = styled.input `
895
- font-size: 20px;
896
- margin: 0px;
897
- line-height: 1.1em;
898
- box-sizing: border-box;
899
- position: absolute;
900
- opacity: 0;
901
- cursor: pointer;
902
- height: 0;
903
- width: 0;
904
- &:checked + span {
905
- background-color: ${Colors.PRIMARY.Hex};
906
- border-color: ${Colors.PRIMARY.Hex};
907
- }
908
- &:checked:disabled + span {
909
- background-color: ${Colors.MEDIUM_GRAY.Hex};
910
- border-color: ${Colors.MEDIUM_GRAY.Hex};
911
- }
912
- &:disabled + span {
913
- background-color: #d3d3d3;
914
- border-color: #d3d3d3;
915
- }
916
- &:checked + span:after {
917
- display: block;
918
- }
919
- `;
920
- const Check$1 = styled.span `
921
- height: 17px;
922
- width: 17px;
923
- min-width: 17px;
924
- background-color: #fff;
925
- border-width: 2px;
926
- border-style: solid;
927
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
928
- box-sizing: border-box;
929
- position: relative;
930
- &:after {
931
- content: '';
932
- position: absolute;
933
- left: 3px;
934
- top: 0px;
935
- width: 7px;
936
- height: 12px;
937
- border: solid white;
938
- border-width: 0 3px 3px 0;
939
- -webkit-transform: rotate(45deg);
940
- -ms-transform: rotate(45deg);
941
- transform: rotate(45deg);
942
- box-sizing: border-box;
943
- display: none;
944
- }
945
- `;
946
- const Label$3 = styled.span `
947
- font-family: ${FontStyles.DEFAULT};
948
- font-size: ${FontSizes.DEFAULT};
949
- font-weight: 400;
950
- line-height: 1.6em;
951
- color: ${props => props.color || Colors.BLACK.Hex};
952
- margin-left: 6px;
953
- box-sizing: border-box;
894
+ const Input$2 = styled.input `
895
+ font-size: 20px;
896
+ margin: 0px;
897
+ line-height: 1.1em;
898
+ box-sizing: border-box;
899
+ position: absolute;
900
+ opacity: 0;
901
+ cursor: pointer;
902
+ height: 0;
903
+ width: 0;
904
+ &:checked + span {
905
+ background-color: ${Colors.PRIMARY.Hex};
906
+ border-color: ${Colors.PRIMARY.Hex};
907
+ }
908
+ &:checked:disabled + span {
909
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
910
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
911
+ }
912
+ &:disabled + span {
913
+ background-color: #d3d3d3;
914
+ border-color: #d3d3d3;
915
+ }
916
+ &:checked + span:after {
917
+ display: block;
918
+ }
919
+ `;
920
+ const Check$1 = styled.span `
921
+ height: 17px;
922
+ width: 17px;
923
+ min-width: 17px;
924
+ background-color: #fff;
925
+ border-width: 2px;
926
+ border-style: solid;
927
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
928
+ box-sizing: border-box;
929
+ position: relative;
930
+ &:after {
931
+ content: '';
932
+ position: absolute;
933
+ left: 3px;
934
+ top: 0px;
935
+ width: 7px;
936
+ height: 12px;
937
+ border: solid white;
938
+ border-width: 0 3px 3px 0;
939
+ -webkit-transform: rotate(45deg);
940
+ -ms-transform: rotate(45deg);
941
+ transform: rotate(45deg);
942
+ box-sizing: border-box;
943
+ display: none;
944
+ }
945
+ `;
946
+ const Label$3 = styled.span `
947
+ font-family: ${FontStyles.DEFAULT};
948
+ font-size: ${FontSizes.DEFAULT};
949
+ font-weight: 400;
950
+ line-height: 1.6em;
951
+ color: ${props => props.color || Colors.BLACK.Hex};
952
+ margin-left: 6px;
953
+ box-sizing: border-box;
954
954
  `;
955
955
  const Checkbox = (_a) => {
956
956
  var { children, color, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip"]);
@@ -960,16 +960,16 @@ const Checkbox = (_a) => {
960
960
  children ? (React.createElement(Label$3, { color: color },
961
961
  children,
962
962
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
963
- };
964
-
965
- const SelectAll = styled.div `
966
- padding: 8px 12px;
967
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
968
- box-sizing: border-box;
963
+ };
964
+
965
+ const SelectAll = styled.div `
966
+ padding: 8px 12px;
967
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
968
+ box-sizing: border-box;
969
969
  `;
970
- const Options$1 = styled.div `
971
- padding: 12px;
972
- box-sizing: border-box;
970
+ const Options$1 = styled.div `
971
+ padding: 12px;
972
+ box-sizing: border-box;
973
973
  `;
974
974
  const Checklist = (_a) => {
975
975
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -1006,70 +1006,70 @@ const Checklist = (_a) => {
1006
1006
  const checked = selected.includes(option.value);
1007
1007
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
1008
1008
  }))));
1009
- };
1010
-
1011
- const Wrapper$a = styled.div `
1012
- border-radius: 4px;
1013
- height: 40px;
1014
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1015
- position: relative;
1016
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1017
- border-width: 1px;
1018
- border-style: solid;
1019
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1020
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1021
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1022
- box-sizing: border-box;
1023
- padding: 10px 0px;
1024
- display: flex;
1025
- align-items: center;
1026
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1027
-
1028
- &:focus-within {
1029
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1030
- }
1009
+ };
1010
+
1011
+ const Wrapper$a = styled.div `
1012
+ border-radius: 4px;
1013
+ height: 40px;
1014
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1015
+ position: relative;
1016
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1017
+ border-width: 1px;
1018
+ border-style: solid;
1019
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1020
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1021
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1022
+ box-sizing: border-box;
1023
+ padding: 10px 0px;
1024
+ display: flex;
1025
+ align-items: center;
1026
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1027
+
1028
+ &:focus-within {
1029
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1030
+ }
1031
1031
  `;
1032
1032
  Wrapper$a.defaultProps = { theme: EditableTheme };
1033
- const Trigger$1 = styled.select `
1034
- appearance: none;
1035
- box-shadow: none;
1036
- outline: none;
1037
- border: none;
1038
- color: ${Colors.BLACK.Hex};
1039
- font-size: ${FontSizes.DEFAULT};
1040
- font-weight: 400;
1041
- font-family: ${FontStyles.DEFAULT};
1042
- line-height: 2.9em;
1043
- background-color: transparent;
1044
- background-image: none;
1045
- width: 100%;
1046
- box-sizing: border-box;
1047
- padding: 0px 30px 0px 10px;
1048
- box-sizing: border-box;
1049
- position: relative;
1050
- z-index: 2;
1051
- `;
1052
- const IconWrapper$2 = styled(Icon) `
1053
- position: absolute;
1054
- right: 9px;
1055
- z-index: 1;
1056
- `;
1057
- const SearchInput$1 = styled.input `
1058
- position: absolute;
1059
- left: 2px;
1060
- top: 2px;
1061
- z-index: 999;
1062
- width: 90%;
1063
- height: 30px;
1064
- border: none;
1065
- outline: none;
1066
- color: ${Colors.BLACK.Hex};
1067
- font-family: ${FontStyles.DEFAULT};
1068
- font-size: ${FontSizes.DEFAULT};
1069
- font-weight: 400;
1070
- line-height: 2.9em;
1071
- overflow: hidden;
1072
- white-space: nowrap;
1033
+ const Trigger$1 = styled.select `
1034
+ appearance: none;
1035
+ box-shadow: none;
1036
+ outline: none;
1037
+ border: none;
1038
+ color: ${Colors.BLACK.Hex};
1039
+ font-size: ${FontSizes.DEFAULT};
1040
+ font-weight: 400;
1041
+ font-family: ${FontStyles.DEFAULT};
1042
+ line-height: 2.9em;
1043
+ background-color: transparent;
1044
+ background-image: none;
1045
+ width: 100%;
1046
+ box-sizing: border-box;
1047
+ padding: 0px 30px 0px 10px;
1048
+ box-sizing: border-box;
1049
+ position: relative;
1050
+ z-index: 2;
1051
+ `;
1052
+ const IconWrapper$2 = styled(Icon) `
1053
+ position: absolute;
1054
+ right: 9px;
1055
+ z-index: 1;
1056
+ `;
1057
+ const SearchInput$1 = styled.input `
1058
+ position: absolute;
1059
+ left: 2px;
1060
+ top: 2px;
1061
+ z-index: 999;
1062
+ width: 90%;
1063
+ height: 30px;
1064
+ border: none;
1065
+ outline: none;
1066
+ color: ${Colors.BLACK.Hex};
1067
+ font-family: ${FontStyles.DEFAULT};
1068
+ font-size: ${FontSizes.DEFAULT};
1069
+ font-weight: 400;
1070
+ line-height: 2.9em;
1071
+ overflow: hidden;
1072
+ white-space: nowrap;
1073
1073
  `;
1074
1074
  const Select = (_a) => {
1075
1075
  var { options, optionGroups, placeholder, readOnly, invalid, searchable = false, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
@@ -1105,15 +1105,15 @@ const Select = (_a) => {
1105
1105
  return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
1106
1106
  }))),
1107
1107
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
1108
- };
1109
-
1110
- const DatePickerWrapper = styled.div `
1111
- display: flex;
1112
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1108
+ };
1109
+
1110
+ const DatePickerWrapper = styled.div `
1111
+ display: flex;
1112
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1113
1113
  `;
1114
- const Middle = styled.div `
1115
- margin: 0px -1px;
1116
- flex-grow: 1;
1114
+ const Middle = styled.div `
1115
+ margin: 0px -1px;
1116
+ flex-grow: 1;
1117
1117
  `;
1118
1118
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, onChange, style, }) => {
1119
1119
  const [selectedDay, setSelectedDay] = useState('');
@@ -1195,66 +1195,66 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1195
1195
  React.createElement(Middle, null,
1196
1196
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1197
1197
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1198
- };
1199
-
1200
- const Scrim$1 = styled.div `
1201
- position: ${({ $position }) => $position};
1202
- top: 0;
1203
- right: 0;
1204
- bottom: 0;
1205
- left: 0;
1206
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1207
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1208
- `;
1209
- const Container$2 = styled.div `
1210
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1211
- min-width: 400px;
1212
- width: ${({ $width }) => $width || '400px'};
1213
- overflow: hidden;
1214
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1215
- outline: none;
1216
- border: none;
1217
- position: ${({ $position }) => $position};
1218
- top: 0;
1219
- right: 0;
1220
- bottom: 0;
1221
- padding: 0px;
1222
- display: flex;
1223
- flex-direction: column;
1224
- box-sizing: border-box;
1225
- background: #fff;
1226
- `;
1227
- const Header$2 = styled.div `
1228
- padding: 30px 20px;
1229
- display: flex;
1230
- align-items: flex-start;
1231
- box-sizing: border-box;
1232
- flex-shrink: 0;
1233
- background: #fff;
1234
- `;
1235
- const Close$1 = styled.div `
1236
- margin-left: auto;
1237
- display: flex;
1238
- align-items: center;
1239
- padding-left: 20px;
1240
- cursor: pointer;
1241
- `;
1242
- const ContentWrapper$1 = styled.div `
1243
- overflow-x: hidden;
1244
- overflow-y: auto;
1245
- box-sizing: border-box;
1246
- flex: 1;
1247
- background: #fff;
1248
- `;
1249
- const ButtonBar$1 = styled.div `
1250
- padding: 20px;
1251
- display: flex;
1252
- align-items: center;
1253
- justify-content: flex-end;
1254
- box-sizing: border-box;
1255
- gap: 10px;
1256
- flex-shrink: 0;
1257
- background: #fff;
1198
+ };
1199
+
1200
+ const Scrim$1 = styled.div `
1201
+ position: ${({ $position }) => $position};
1202
+ top: 0;
1203
+ right: 0;
1204
+ bottom: 0;
1205
+ left: 0;
1206
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1207
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1208
+ `;
1209
+ const Container$2 = styled.div `
1210
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1211
+ min-width: 400px;
1212
+ width: ${({ $width }) => $width || '400px'};
1213
+ overflow: hidden;
1214
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1215
+ outline: none;
1216
+ border: none;
1217
+ position: ${({ $position }) => $position};
1218
+ top: 0;
1219
+ right: 0;
1220
+ bottom: 0;
1221
+ padding: 0px;
1222
+ display: flex;
1223
+ flex-direction: column;
1224
+ box-sizing: border-box;
1225
+ background: #fff;
1226
+ `;
1227
+ const Header$2 = styled.div `
1228
+ padding: 30px 20px;
1229
+ display: flex;
1230
+ align-items: flex-start;
1231
+ box-sizing: border-box;
1232
+ flex-shrink: 0;
1233
+ background: #fff;
1234
+ `;
1235
+ const Close$1 = styled.div `
1236
+ margin-left: auto;
1237
+ display: flex;
1238
+ align-items: center;
1239
+ padding-left: 20px;
1240
+ cursor: pointer;
1241
+ `;
1242
+ const ContentWrapper$1 = styled.div `
1243
+ overflow-x: hidden;
1244
+ overflow-y: auto;
1245
+ box-sizing: border-box;
1246
+ flex: 1;
1247
+ background: #fff;
1248
+ `;
1249
+ const ButtonBar$1 = styled.div `
1250
+ padding: 20px;
1251
+ display: flex;
1252
+ align-items: center;
1253
+ justify-content: flex-end;
1254
+ box-sizing: border-box;
1255
+ gap: 10px;
1256
+ flex-shrink: 0;
1257
+ background: #fff;
1258
1258
  `;
1259
1259
  const Drawer = (_a) => {
1260
1260
  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"]);
@@ -1282,55 +1282,55 @@ const Drawer = (_a) => {
1282
1282
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
1283
1283
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null),
1284
1284
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1285
- };
1286
-
1285
+ };
1286
+
1287
1287
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1288
- const LabelRow = styled.div `
1289
- display: flex;
1290
- align-items: center;
1291
- justify-content: space-between;
1292
- margin: 0 0 4px 0;
1293
- box-sizing: border-box;
1294
- `;
1295
- const Label$2 = styled.label `
1296
- font-size: ${FontSizes.DEFAULT};
1297
- font-weight: 500;
1298
- line-height: 1.3em;
1299
- font-family: ${FontStyles.DEFAULT};
1300
- color: ${Colors.BLACK.Hex};
1301
- display: flex;
1302
- align-items: center;
1303
- `;
1304
- const Required = styled.span `
1305
- color: ${Colors.RED.Hex};
1306
- margin-left: 4px;
1307
- `;
1308
- const Action = styled.span `
1309
- font-size: ${FontSizes.DEFAULT};
1310
- font-weight: 500;
1311
- line-height: 1em;
1312
- font-family: ${FontStyles.DEFAULT};
1313
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1314
- cursor: pointer;
1288
+ const LabelRow = styled.div `
1289
+ display: flex;
1290
+ align-items: center;
1291
+ justify-content: space-between;
1292
+ margin: 0 0 4px 0;
1293
+ box-sizing: border-box;
1294
+ `;
1295
+ const Label$2 = styled.label `
1296
+ font-size: ${FontSizes.DEFAULT};
1297
+ font-weight: 500;
1298
+ line-height: 1.3em;
1299
+ font-family: ${FontStyles.DEFAULT};
1300
+ color: ${Colors.BLACK.Hex};
1301
+ display: flex;
1302
+ align-items: center;
1303
+ `;
1304
+ const Required = styled.span `
1305
+ color: ${Colors.RED.Hex};
1306
+ margin-left: 4px;
1307
+ `;
1308
+ const Action = styled.span `
1309
+ font-size: ${FontSizes.DEFAULT};
1310
+ font-weight: 500;
1311
+ line-height: 1em;
1312
+ font-family: ${FontStyles.DEFAULT};
1313
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1314
+ cursor: pointer;
1315
1315
  `;
1316
1316
  Action.defaultProps = { theme: EditableTheme };
1317
- const Description = styled.div `
1318
- font-size: ${FontSizes.SMALL};
1319
- font-weight: 400;
1320
- line-height: 1.3em;
1321
- font-family: ${FontStyles.DEFAULT};
1322
- color: ${Colors.BLACK.Hex};
1323
- margin: 0 0 8px 0;
1324
- box-sizing: border-box;
1325
- `;
1326
- const Validation = styled.div `
1327
- font-size: ${FontSizes.SMALL};
1328
- font-weight: 400;
1329
- line-height: 1.3em;
1330
- font-family: ${FontStyles.DEFAULT};
1331
- color: ${Colors.RED.Hex};
1332
- margin: 4px 0 0 0;
1333
- box-sizing: border-box;
1317
+ const Description = styled.div `
1318
+ font-size: ${FontSizes.SMALL};
1319
+ font-weight: 400;
1320
+ line-height: 1.3em;
1321
+ font-family: ${FontStyles.DEFAULT};
1322
+ color: ${Colors.BLACK.Hex};
1323
+ margin: 0 0 8px 0;
1324
+ box-sizing: border-box;
1325
+ `;
1326
+ const Validation = styled.div `
1327
+ font-size: ${FontSizes.SMALL};
1328
+ font-weight: 400;
1329
+ line-height: 1.3em;
1330
+ font-family: ${FontStyles.DEFAULT};
1331
+ color: ${Colors.RED.Hex};
1332
+ margin: 4px 0 0 0;
1333
+ box-sizing: border-box;
1334
1334
  `;
1335
1335
  const Field = (_a) => {
1336
1336
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1344,112 +1344,112 @@ const Field = (_a) => {
1344
1344
  description ? React.createElement(Description, null, description) : null,
1345
1345
  children,
1346
1346
  validationText ? React.createElement(Validation, null, validationText) : null));
1347
- };
1348
-
1349
- const Wrapper$8 = styled.fieldset `
1350
- margin-inline-start: 0px;
1351
- margin-inline-end: 0px;
1352
- padding-block-start: 0px;
1353
- padding-inline-start: 0px;
1354
- padding-inline-end: 0px;
1355
- padding-block-end: 0px;
1356
- min-inline-size: min-content;
1357
- border-width: 0px;
1358
- border-style: none;
1359
- border-color: transparent;
1360
- border-image: none;
1361
- `;
1362
- const Label$1 = styled.legend `
1363
- padding-inline-start: 0px;
1364
- padding-inline-end: 0px;
1365
-
1366
- color: ${Colors.BLACK.Hex};
1367
- font-family: ${FontStyles.DEFAULT};
1368
- font-size: ${FontSizes.DEFAULT};
1369
- font-weight: 500;
1370
- line-height: 22px;
1371
- margin-bottom: 6px;
1372
- `;
1373
- const Content$1 = styled.div `
1374
- padding: 20px;
1375
- border-radius: 8px;
1376
- background: #fcfcfc;
1347
+ };
1348
+
1349
+ const Wrapper$8 = styled.fieldset `
1350
+ margin-inline-start: 0px;
1351
+ margin-inline-end: 0px;
1352
+ padding-block-start: 0px;
1353
+ padding-inline-start: 0px;
1354
+ padding-inline-end: 0px;
1355
+ padding-block-end: 0px;
1356
+ min-inline-size: min-content;
1357
+ border-width: 0px;
1358
+ border-style: none;
1359
+ border-color: transparent;
1360
+ border-image: none;
1361
+ `;
1362
+ const Label$1 = styled.legend `
1363
+ padding-inline-start: 0px;
1364
+ padding-inline-end: 0px;
1365
+
1366
+ color: ${Colors.BLACK.Hex};
1367
+ font-family: ${FontStyles.DEFAULT};
1368
+ font-size: ${FontSizes.DEFAULT};
1369
+ font-weight: 500;
1370
+ line-height: 22px;
1371
+ margin-bottom: 6px;
1372
+ `;
1373
+ const Content$1 = styled.div `
1374
+ padding: 20px;
1375
+ border-radius: 8px;
1376
+ background: #fcfcfc;
1377
1377
  `;
1378
1378
  const FieldGroup = ({ children, label }) => {
1379
1379
  return (React.createElement(Wrapper$8, null,
1380
1380
  React.createElement(Label$1, null, label),
1381
1381
  React.createElement(Content$1, null, children)));
1382
- };
1383
-
1384
- const Dropzone = styled.div `
1385
- border-radius: 8px;
1386
- border-width: 1px;
1387
- border-style: dashed;
1388
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1389
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1390
- cursor: copy;
1382
+ };
1383
+
1384
+ const Dropzone = styled.div `
1385
+ border-radius: 8px;
1386
+ border-width: 1px;
1387
+ border-style: dashed;
1388
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1389
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1390
+ cursor: copy;
1391
1391
  `;
1392
1392
  Dropzone.defaultProps = { theme: EditableTheme };
1393
- const IconWrapper$1 = styled.div `
1394
- width: 80px;
1395
- height: 80px;
1396
- border-radius: 40px;
1397
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1398
- display: flex;
1399
- align-items: center;
1400
- justify-content: center;
1401
- `;
1402
- const StyledIcon$3 = styled(Icon) `
1403
- width: 40px !important;
1404
- height: 40px !important;
1405
-
1406
- > path {
1407
- fill: ${Colors.GRAY.Hex} !important;
1408
- }
1409
- `;
1410
- const ClickZone = styled.div `
1411
- margin: 40px 20px;
1412
- display: flex;
1413
- flex-direction: column;
1414
- align-items: center;
1415
- gap: 16px;
1416
- `;
1417
- const Content = styled.div `
1418
- display: flex;
1419
- flex-direction: column;
1420
- align-items: center;
1421
- gap: 2px;
1422
- `;
1423
- const Files = styled.div `
1424
- display: flex;
1425
- flex-direction: column;
1426
- align-self: stretch;
1427
- gap: 10px;
1428
- margin: 20px;
1429
- `;
1430
- const MessageDiv = styled.div `
1431
- display: flex;
1432
- align-items: center;
1433
- justify-content: center;
1434
- `;
1435
- const File = styled.div `
1436
- display: flex;
1437
- padding: 10px;
1438
- align-items: center;
1439
- justify-content: space-between;
1440
- gap: 10px;
1441
- border-radius: 4px;
1442
- border: 1px solid #cccccc;
1443
- background: #ffffff;
1444
- `;
1445
- const Remove = styled(Icon) `
1446
- width: 24px;
1447
- height: 24px;
1448
- cursor: pointer;
1449
-
1450
- > path {
1451
- fill: ${Colors.RED.Hex} !important;
1452
- }
1393
+ const IconWrapper$1 = styled.div `
1394
+ width: 80px;
1395
+ height: 80px;
1396
+ border-radius: 40px;
1397
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1398
+ display: flex;
1399
+ align-items: center;
1400
+ justify-content: center;
1401
+ `;
1402
+ const StyledIcon$3 = styled(Icon) `
1403
+ width: 40px !important;
1404
+ height: 40px !important;
1405
+
1406
+ > path {
1407
+ fill: ${Colors.GRAY.Hex} !important;
1408
+ }
1409
+ `;
1410
+ const ClickZone = styled.div `
1411
+ margin: 40px 20px;
1412
+ display: flex;
1413
+ flex-direction: column;
1414
+ align-items: center;
1415
+ gap: 16px;
1416
+ `;
1417
+ const Content = styled.div `
1418
+ display: flex;
1419
+ flex-direction: column;
1420
+ align-items: center;
1421
+ gap: 2px;
1422
+ `;
1423
+ const Files = styled.div `
1424
+ display: flex;
1425
+ flex-direction: column;
1426
+ align-self: stretch;
1427
+ gap: 10px;
1428
+ margin: 20px;
1429
+ `;
1430
+ const MessageDiv = styled.div `
1431
+ display: flex;
1432
+ align-items: center;
1433
+ justify-content: center;
1434
+ `;
1435
+ const File = styled.div `
1436
+ display: flex;
1437
+ padding: 10px;
1438
+ align-items: center;
1439
+ justify-content: space-between;
1440
+ gap: 10px;
1441
+ border-radius: 4px;
1442
+ border: 1px solid #cccccc;
1443
+ background: #ffffff;
1444
+ `;
1445
+ const Remove = styled(Icon) `
1446
+ width: 24px;
1447
+ height: 24px;
1448
+ cursor: pointer;
1449
+
1450
+ > path {
1451
+ fill: ${Colors.RED.Hex} !important;
1452
+ }
1453
1453
  `;
1454
1454
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
1455
1455
  const inputRef = useRef(null);
@@ -1567,8 +1567,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1567
1567
  React.createElement(Copy, { align: 'center', color: 'GRAY' }, message),
1568
1568
  tooltipInfo && (React.createElement("span", null,
1569
1569
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1570
- };
1571
-
1570
+ };
1571
+
1572
1572
  const getAgesFromDob = (dob) => {
1573
1573
  let calculated_current_age = null;
1574
1574
  let calculated_nearest_age = null;
@@ -1641,8 +1641,8 @@ const formatAsSsn = (number) => {
1641
1641
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1642
1642
  }
1643
1643
  return formatted_value;
1644
- };
1645
-
1644
+ };
1645
+
1646
1646
  const StyledInput = styled.input `
1647
1647
  border: none !important;
1648
1648
  background: none !important;
@@ -1682,7 +1682,7 @@ const StyledTextArea = styled.textarea `
1682
1682
  margin: 0px;
1683
1683
  text-indent: 0px;
1684
1684
  --webkit-appearance: none;
1685
- text-wrap: break-word;
1685
+ overflow-wrap: break-word;
1686
1686
  box-sizing: border-box;
1687
1687
  display: block;
1688
1688
  width: 100%;
@@ -1709,7 +1709,7 @@ const StyledSuffix = styled.div `
1709
1709
  font-style: normal;
1710
1710
  font-weight: 400;
1711
1711
  font-size: ${FontSizes.DEFAULT};
1712
- color: Colors.BLACK.Hex;
1712
+ color: ${Colors.BLACK.Hex};
1713
1713
  `;
1714
1714
  const StyledWrapper = styled.div `
1715
1715
  display: flex;
@@ -1756,7 +1756,6 @@ const SuggestedSummary = styled.div `
1756
1756
  position: sticky;
1757
1757
  top: 0px;
1758
1758
  `;
1759
- //styles for textarea
1760
1759
  const SuggestedValue = styled.div `
1761
1760
  cursor: pointer;
1762
1761
  padding: 8px 12px;
@@ -1787,48 +1786,65 @@ const Input$1 = (_a) => {
1787
1786
  // eslint-disable-next-line @typescript-eslint/no-empty-function
1788
1787
  onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "type", "value"]);
1789
1788
  const [show_options, setShowOptions] = useState(false);
1789
+ const [internalValue, setInternalValue] = useState(value);
1790
+ const [internalSuggestedValues, setInternalSuggestedValues] = useState(suggestedValues || []);
1791
+ const formatCurrencyDecimal = (value) => {
1792
+ const parts = value.toString().split('.');
1793
+ const integerPart = parts[0];
1794
+ const decimalPart = parts[1] !== undefined ? `.${parts[1]}` : ''; // Only add decimal part if it exists
1795
+ const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
1796
+ return `${formattedIntegerPart}${decimalPart}`;
1797
+ };
1790
1798
  const handleInputChange = (e) => {
1799
+ const newValue = e.target.value;
1791
1800
  if (format === 'currency' || format === 'currency_decimal') {
1792
- e.target.value = e.target.value.replace(/[^0-9.]/g, '');
1801
+ e.target.value = newValue.replace(/[^0-9.]/g, '');
1793
1802
  }
1794
1803
  if (format === 'phone') {
1795
- e.target.value = e.target.value.replace(/[^0-9.]/g, '').substring(0, 10);
1804
+ e.target.value = newValue.replace(/[^0-9.]/g, '').substring(0, 10);
1796
1805
  }
1797
1806
  if (format === 'ssn') {
1798
- e.target.value = e.target.value.replace(/[^0-9]/g, '').substring(0, 9);
1807
+ e.target.value = newValue.replace(/[^0-9]/g, '').substring(0, 9);
1799
1808
  }
1800
1809
  if (type === 'email') {
1801
- e.target.value = e.target.value.toLowerCase();
1810
+ e.target.value = newValue.toLowerCase();
1802
1811
  }
1803
- if (type === 'number' && max && parseInt(e.target.value, 10) > parseInt(max, 10)) {
1812
+ if (type === 'number' && max && parseInt(newValue, 10) > parseInt(max, 10)) {
1804
1813
  e.target.value = `${max}`;
1805
1814
  }
1806
- if (!readOnly && onChange)
1815
+ setInternalValue(e.target.value);
1816
+ if (onChange)
1807
1817
  onChange(e);
1818
+ if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
1819
+ const newSuggestions = (suggestedValues || []).filter(s => s.toLowerCase().includes(newValue.toLowerCase()));
1820
+ setInternalSuggestedValues(newSuggestions);
1821
+ }
1822
+ else {
1823
+ setInternalSuggestedValues(suggestedValues || []);
1824
+ }
1808
1825
  };
1809
- let formatted_value = value;
1826
+ let formatted_value = internalValue;
1810
1827
  if (format === 'phone') {
1811
- formatted_value = formatAsPhone(value);
1828
+ formatted_value = formatAsPhone(internalValue);
1812
1829
  }
1813
1830
  if (format === 'currency') {
1814
- if (`${value}`.length) {
1815
- formatted_value = Numeral(value).format('$0,0');
1831
+ if (`${internalValue}`.length) {
1832
+ formatted_value = Numeral(internalValue).format('$0,0');
1816
1833
  }
1817
1834
  }
1818
1835
  if (format === 'currency_decimal') {
1819
- formatted_value = `${formatted_value}`;
1836
+ formatted_value = formatCurrencyDecimal(formatted_value);
1837
+ formatted_value = formatCurrencyDecimal(formatted_value);
1820
1838
  }
1821
1839
  if (format === 'ssn' && type !== 'password') {
1822
- formatted_value = formatAsSsn(value);
1840
+ formatted_value = formatAsSsn(internalValue);
1823
1841
  }
1824
- return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
1842
+ return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length },
1825
1843
  React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: readOnly
1826
1844
  ? e => e.preventDefault()
1827
1845
  : e => {
1828
1846
  if (onBlur)
1829
1847
  onBlur(e);
1830
- // The blur was causing issues with the suggested select event
1831
- // This makes sure the select if fired before the blur
1832
1848
  setTimeout(() => {
1833
1849
  setShowOptions(false);
1834
1850
  }, 100);
@@ -1842,15 +1858,13 @@ const Input$1 = (_a) => {
1842
1858
  loading ? (React.createElement(Loader$1, null,
1843
1859
  React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: mdiLoading, size: '20px', spin: true }))) : null,
1844
1860
  showCharCount ? (React.createElement(CharacterCount, null,
1845
- value.length,
1846
- maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
1861
+ internalValue.length,
1862
+ maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length },
1847
1863
  React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, max: max, maxLength: maxLength, min: min, onBlur: readOnly
1848
1864
  ? e => e.preventDefault()
1849
1865
  : e => {
1850
1866
  if (onBlur)
1851
1867
  onBlur(e);
1852
- // The blur was causing issues with the suggested select event
1853
- // This makes sure the select if fired before the blur
1854
1868
  setTimeout(() => {
1855
1869
  setShowOptions(false);
1856
1870
  }, 100);
@@ -1860,83 +1874,81 @@ const Input$1 = (_a) => {
1860
1874
  setShowOptions(true);
1861
1875
  if (onFocus)
1862
1876
  onFocus(e);
1863
- }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, step: step, type: type, value: format === 'currency_decimal' && value ? `$${formatted_value}` : formatted_value }, accessibleProps)),
1877
+ }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, step: step, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps)),
1864
1878
  loading ? (React.createElement(Loader$1, null,
1865
1879
  React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: mdiLoading, size: '20px', spin: true }))) : null,
1866
1880
  showCharCount ? (React.createElement(CharacterCount, null,
1867
- value.length,
1881
+ internalValue.length,
1868
1882
  maxLength ? ` / ${maxLength}` : null)) : null,
1869
1883
  suffix && React.createElement(StyledSuffix, null, suffix),
1870
- show_options && (suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) ? (React.createElement(SuggestedValues, null,
1884
+ show_options && internalSuggestedValues.length ? (React.createElement(SuggestedValues, null,
1871
1885
  React.createElement(SuggestedSummary, null,
1872
- suggestedValues.length,
1886
+ internalSuggestedValues.length,
1873
1887
  " Results Match \"",
1874
- value,
1888
+ internalValue,
1875
1889
  "\""),
1876
- suggestedValues.map((s_value, i) => {
1877
- return (React.createElement(SuggestedValue, { key: i, onClick: () => {
1878
- handleInputChange({ target: { value: s_value } });
1879
- onSuggestedSelect();
1880
- setShowOptions(false);
1881
- } }, s_value));
1882
- }))) : null));
1883
- };
1884
-
1885
- const Wrapper$7 = styled.a `
1886
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1887
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1888
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1889
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1890
- font-weight: 500;
1891
- font-style: normal;
1892
- text-decoration: 'none';
1893
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1894
- margin: 0px;
1895
- padding: 0px;
1896
- box-sizing: border-box;
1897
- cursor: pointer;
1890
+ internalSuggestedValues.map((suggestedValue, index) => (React.createElement(SuggestedValue, { key: index, onClick: () => {
1891
+ handleInputChange({ target: { value: suggestedValue } });
1892
+ onSuggestedSelect();
1893
+ setShowOptions(false);
1894
+ } }, suggestedValue))))) : null));
1895
+ };
1896
+
1897
+ const Wrapper$7 = styled.a `
1898
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1899
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1900
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1901
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1902
+ font-weight: 500;
1903
+ font-style: normal;
1904
+ text-decoration: 'none';
1905
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1906
+ margin: 0px;
1907
+ padding: 0px;
1908
+ box-sizing: border-box;
1909
+ cursor: pointer;
1898
1910
  `;
1899
1911
  Wrapper$7.defaultProps = { theme: EditableTheme };
1900
1912
  const Link = (_a) => {
1901
1913
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1902
1914
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1903
- };
1904
-
1905
- const dash = keyframes `
1906
- 0% {
1907
- stroke-dasharray: 1, 160;
1908
- stroke-dashoffset: 0;
1909
- }
1910
- 50% {
1911
- stroke-dasharray: 80, 160;
1912
- stroke-dashoffset: -32;
1913
- }
1914
- 100% {
1915
- stroke-dasharray: 80, 160;
1916
- stroke-dashoffset: -124;
1917
- }
1918
- `;
1919
- const Spinner = styled.svg `
1920
- z-index: 2;
1921
- position: absolute;
1922
- top: 50%;
1923
- left: 50%;
1924
- transform: translate(-50%, -50%);
1925
- margin: 0 auto;
1926
- width: 40px;
1927
- height: 40px;
1928
- `;
1929
- const Path = styled.path `
1930
- stroke: #0193d7;
1931
- stroke-linecap: round;
1932
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1933
- animation: ${dash} 1.1s ease-in-out infinite;
1915
+ };
1916
+
1917
+ const dash = keyframes `
1918
+ 0% {
1919
+ stroke-dasharray: 1, 160;
1920
+ stroke-dashoffset: 0;
1921
+ }
1922
+ 50% {
1923
+ stroke-dasharray: 80, 160;
1924
+ stroke-dashoffset: -32;
1925
+ }
1926
+ 100% {
1927
+ stroke-dasharray: 80, 160;
1928
+ stroke-dashoffset: -124;
1929
+ }
1930
+ `;
1931
+ const Spinner = styled.svg `
1932
+ z-index: 2;
1933
+ position: absolute;
1934
+ top: 50%;
1935
+ left: 50%;
1936
+ transform: translate(-50%, -50%);
1937
+ margin: 0 auto;
1938
+ width: 40px;
1939
+ height: 40px;
1940
+ `;
1941
+ const Path = styled.path `
1942
+ stroke: #0193d7;
1943
+ stroke-linecap: round;
1944
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1945
+ animation: ${dash} 1.1s ease-in-out infinite;
1934
1946
  `;
1935
1947
  const Loader = () => {
1936
1948
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1937
1949
  React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', strokeWidth: '2' })));
1938
- };
1939
-
1950
+ };
1951
+
1940
1952
  const Steps = styled.div `
1941
1953
  padding: 20px;
1942
1954
  border-bottom: 1px solid #e7e6e6;
@@ -1993,75 +2005,75 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
1993
2005
  step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
1994
2006
  React.createElement(StepLabel, null, step.label))));
1995
2007
  })));
1996
- };
1997
-
1998
- const Wrapper$6 = styled.div `
1999
- position: fixed;
2000
- top: 0;
2001
- right: 0;
2002
- bottom: 0;
2003
- left: 0;
2004
- z-index: 9999;
2005
- background: rgba(0, 0, 0, 0.8);
2006
- display: flex;
2007
- align-items: center;
2008
- justify-content: center;
2009
- `;
2010
- const Container$1 = styled.dialog `
2011
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2012
- max-width: calc(100vw - 80px);
2013
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2014
- max-height: calc(100vh - 80px);
2015
- border-radius: 8px;
2016
- overflow: hidden;
2017
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2018
- outline: none;
2019
- border: none;
2020
- position: relative;
2021
- padding: 0px;
2022
- box-sizing: border-box;
2023
- display: flex;
2024
- flex-direction: column;
2025
- `;
2026
- const Header$1 = styled.div `
2027
- flex-shrink: 0;
2028
- padding: 20px;
2029
- border-bottom: 1px solid #e7e6e6;
2030
- display: flex;
2031
- align-items: center;
2032
- background: #ffffff;
2033
- box-sizing: border-box;
2034
- `;
2035
- const Close = styled.div `
2036
- margin-left: auto;
2037
- display: flex;
2038
- align-items: center;
2039
- padding-left: 20px;
2040
- cursor: pointer;
2041
- `;
2042
- const CloseMsg = styled.span `
2043
- font-size: ${FontSizes.SMALL};
2044
- font-weight: 400;
2045
- font-family: ${FontStyles.DEFAULT};
2046
- line-height: 1em;
2047
- color: ${Colors.MEDIUM_GRAY.Hex};
2048
- `;
2049
- const ContentWrapper = styled.div `
2050
- overflow-x: hidden;
2051
- overflow-y: auto;
2052
- background: #ffffff;
2053
- flex: 1;
2054
- box-sizing: border-box;
2055
- `;
2056
- const ButtonBar = styled.div `
2057
- flex-shrink: 0;
2058
- background: #ffffff;
2059
- padding: 20px;
2060
- border-top: 1px solid #e7e6e6;
2061
- display: flex;
2062
- align-items: center;
2063
- justify-self: flex-end;
2064
- box-sizing: border-box;
2008
+ };
2009
+
2010
+ const Wrapper$6 = styled.div `
2011
+ position: fixed;
2012
+ top: 0;
2013
+ right: 0;
2014
+ bottom: 0;
2015
+ left: 0;
2016
+ z-index: 9999;
2017
+ background: rgba(0, 0, 0, 0.8);
2018
+ display: flex;
2019
+ align-items: center;
2020
+ justify-content: center;
2021
+ `;
2022
+ const Container$1 = styled.dialog `
2023
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2024
+ max-width: calc(100vw - 80px);
2025
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2026
+ max-height: calc(100vh - 80px);
2027
+ border-radius: 8px;
2028
+ overflow: hidden;
2029
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2030
+ outline: none;
2031
+ border: none;
2032
+ position: relative;
2033
+ padding: 0px;
2034
+ box-sizing: border-box;
2035
+ display: flex;
2036
+ flex-direction: column;
2037
+ `;
2038
+ const Header$1 = styled.div `
2039
+ flex-shrink: 0;
2040
+ padding: 20px;
2041
+ border-bottom: 1px solid #e7e6e6;
2042
+ display: flex;
2043
+ align-items: center;
2044
+ background: #ffffff;
2045
+ box-sizing: border-box;
2046
+ `;
2047
+ const Close = styled.div `
2048
+ margin-left: auto;
2049
+ display: flex;
2050
+ align-items: center;
2051
+ padding-left: 20px;
2052
+ cursor: pointer;
2053
+ `;
2054
+ const CloseMsg = styled.span `
2055
+ font-size: ${FontSizes.SMALL};
2056
+ font-weight: 400;
2057
+ font-family: ${FontStyles.DEFAULT};
2058
+ line-height: 1em;
2059
+ color: ${Colors.MEDIUM_GRAY.Hex};
2060
+ `;
2061
+ const ContentWrapper = styled.div `
2062
+ overflow-x: hidden;
2063
+ overflow-y: auto;
2064
+ background: #ffffff;
2065
+ flex: 1;
2066
+ box-sizing: border-box;
2067
+ `;
2068
+ const ButtonBar = styled.div `
2069
+ flex-shrink: 0;
2070
+ background: #ffffff;
2071
+ padding: 20px;
2072
+ border-top: 1px solid #e7e6e6;
2073
+ display: flex;
2074
+ align-items: center;
2075
+ justify-self: flex-end;
2076
+ box-sizing: border-box;
2065
2077
  `;
2066
2078
  const Modal = (_a) => {
2067
2079
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
@@ -2094,21 +2106,21 @@ const Modal = (_a) => {
2094
2106
  } },
2095
2107
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
2096
2108
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
2097
- };
2098
-
2099
- const Wrapper$5 = styled.div `
2100
- position: relative;
2101
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2102
- `;
2103
- const Trigger = styled.div `
2104
- box-sizing: border-box;
2105
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2106
- height: 40px;
2107
- padding: 0 10px;
2108
- position: relative;
2109
- cursor: pointer;
2110
- border-width: 1px;
2111
- border-style: solid;
2109
+ };
2110
+
2111
+ const Wrapper$5 = styled.div `
2112
+ position: relative;
2113
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2114
+ `;
2115
+ const Trigger = styled.div `
2116
+ box-sizing: border-box;
2117
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2118
+ height: 40px;
2119
+ padding: 0 10px;
2120
+ position: relative;
2121
+ cursor: pointer;
2122
+ border-width: 1px;
2123
+ border-style: solid;
2112
2124
  border-color: ${props => {
2113
2125
  if (props.$invalid) {
2114
2126
  return Colors.RED.Hex;
@@ -2119,67 +2131,67 @@ const Trigger = styled.div `
2119
2131
  else {
2120
2132
  return '#cccccc';
2121
2133
  }
2122
- }};
2123
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2124
- background-image: none;
2125
- display: flex;
2126
- width: 100%;
2127
- align-items: center;
2128
- justify-content: space-between;
2129
- z-index: 1;
2134
+ }};
2135
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2136
+ background-image: none;
2137
+ display: flex;
2138
+ width: 100%;
2139
+ align-items: center;
2140
+ justify-content: space-between;
2141
+ z-index: 1;
2130
2142
  `;
2131
2143
  Trigger.defaultProps = { theme: EditableTheme };
2132
- const Value = styled.div `
2133
- color: ${Colors.BLACK.Hex};
2134
- font-family: ${FontStyles.DEFAULT};
2135
- font-size: ${FontSizes.DEFAULT};
2136
- font-weight: 400;
2137
- line-height: 2.9em;
2138
- overflow: hidden;
2139
- text-overflow: ellipsis;
2140
- white-space: nowrap;
2141
- width: 100%;
2142
- `;
2143
- const Options = styled.div `
2144
- background: #fff;
2145
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2146
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2147
- border-radius: 0px 0px 4px 4px;
2148
- border-style: solid;
2149
- border-top: none;
2150
- border-width: 1px;
2151
- left: 0;
2152
- position: relative;
2153
- right: 0;
2154
- z-index: 10;
2155
- max-height: 220px;
2156
- overflow: auto;
2144
+ const Value = styled.div `
2145
+ color: ${Colors.BLACK.Hex};
2146
+ font-family: ${FontStyles.DEFAULT};
2147
+ font-size: ${FontSizes.DEFAULT};
2148
+ font-weight: 400;
2149
+ line-height: 2.9em;
2150
+ overflow: hidden;
2151
+ text-overflow: ellipsis;
2152
+ white-space: nowrap;
2153
+ width: 100%;
2154
+ `;
2155
+ const Options = styled.div `
2156
+ background: #fff;
2157
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2158
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2159
+ border-radius: 0px 0px 4px 4px;
2160
+ border-style: solid;
2161
+ border-top: none;
2162
+ border-width: 1px;
2163
+ left: 0;
2164
+ position: relative;
2165
+ right: 0;
2166
+ z-index: 10;
2167
+ max-height: 220px;
2168
+ overflow: auto;
2157
2169
  `;
2158
2170
  Options.defaultProps = { theme: EditableTheme };
2159
- const Scrim = styled.div `
2160
- bottom: 0;
2161
- left: 0;
2162
- position: fixed;
2163
- right: 0;
2164
- top: 0;
2165
- z-index: 9;
2166
- `;
2167
- const SearchInput = styled.input `
2168
- position: absolute;
2169
- left: 2px;
2170
- top: 2px;
2171
- z-index: 999;
2172
- width: 90%;
2173
- height: 30px;
2174
- border: none;
2175
- outline: none;
2176
- color: ${Colors.BLACK.Hex};
2177
- font-family: ${FontStyles.DEFAULT};
2178
- font-size: ${FontSizes.DEFAULT};
2179
- font-weight: 400;
2180
- line-height: 2.9em;
2181
- overflow: hidden;
2182
- white-space: nowrap;
2171
+ const Scrim = styled.div `
2172
+ bottom: 0;
2173
+ left: 0;
2174
+ position: fixed;
2175
+ right: 0;
2176
+ top: 0;
2177
+ z-index: 9;
2178
+ `;
2179
+ const SearchInput = styled.input `
2180
+ position: absolute;
2181
+ left: 2px;
2182
+ top: 2px;
2183
+ z-index: 999;
2184
+ width: 90%;
2185
+ height: 30px;
2186
+ border: none;
2187
+ outline: none;
2188
+ color: ${Colors.BLACK.Hex};
2189
+ font-family: ${FontStyles.DEFAULT};
2190
+ font-size: ${FontSizes.DEFAULT};
2191
+ font-weight: 400;
2192
+ line-height: 2.9em;
2193
+ overflow: hidden;
2194
+ white-space: nowrap;
2183
2195
  `;
2184
2196
  const MultiSelect = (_a) => {
2185
2197
  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"]);
@@ -2198,8 +2210,8 @@ const MultiSelect = (_a) => {
2198
2210
  showOptions ? (React.createElement(Options, null,
2199
2211
  React.createElement(Checklist, { onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2200
2212
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
2201
- };
2202
-
2213
+ };
2214
+
2203
2215
  const Wrapper$4 = styled.div `
2204
2216
  display: flex;
2205
2217
  padding: 16px 30px;
@@ -2248,13 +2260,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2248
2260
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2249
2261
  }),
2250
2262
  menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
2251
- };
2252
-
2253
- const Wrapper$3 = styled.nav `
2254
- box-sizing: border-box;
2255
- display: flex;
2256
- align-items: center;
2257
- column-gap: 10px;
2263
+ };
2264
+
2265
+ const Wrapper$3 = styled.nav `
2266
+ box-sizing: border-box;
2267
+ display: flex;
2268
+ align-items: center;
2269
+ column-gap: 10px;
2258
2270
  `;
2259
2271
  const Pagination = (_a) => {
2260
2272
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2283,82 +2295,82 @@ const Pagination = (_a) => {
2283
2295
  value: `${p}`,
2284
2296
  })), value: `${currentPage}` }),
2285
2297
  React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
2286
- };
2287
-
2288
- const Wrapper$2 = styled.label `
2289
- border-radius: 4px;
2290
- padding: 4px 0px 4px 6px;
2291
- margin-left: -6px;
2292
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2293
- display: flex;
2294
- align-items: center;
2295
- font-size: ${FontSizes.DEFAULT};
2296
- line-height: 1.6em;
2297
- box-sizing: border-box;
2298
- position: relative;
2299
-
2300
- &:focus-within {
2301
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2302
- }
2298
+ };
2299
+
2300
+ const Wrapper$2 = styled.label `
2301
+ border-radius: 4px;
2302
+ padding: 4px 0px 4px 6px;
2303
+ margin-left: -6px;
2304
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2305
+ display: flex;
2306
+ align-items: center;
2307
+ font-size: ${FontSizes.DEFAULT};
2308
+ line-height: 1.6em;
2309
+ box-sizing: border-box;
2310
+ position: relative;
2311
+
2312
+ &:focus-within {
2313
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2314
+ }
2303
2315
  `;
2304
2316
  Wrapper$2.defaultProps = { theme: EditableTheme };
2305
- const Input = styled.input `
2306
- font-size: 20px;
2307
- margin: 0px;
2308
- line-height: 1.6em;
2309
- box-sizing: border-box;
2310
- position: absolute;
2311
- opacity: 0;
2312
- cursor: pointer;
2313
- height: 0;
2314
- width: 0;
2315
- &:checked + span {
2316
- border-color: ${Colors.PRIMARY.Hex};
2317
- }
2318
- &:checked + span:after {
2319
- background-color: ${Colors.PRIMARY.Hex};
2320
- display: block;
2321
- }
2322
- &:disabled + span {
2323
- background-color: #d3d3d3;
2324
- border-color: #d3d3d3;
2325
- }
2326
- &:disabled + span:after {
2327
- background-color: #fff;
2328
- }
2329
- &:checked:disabled + span:after {
2330
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2331
- }
2332
- `;
2333
- const Check = styled.span `
2334
- height: 17px;
2335
- width: 17px;
2336
- border-radius: 50%;
2337
- background-color: #fff;
2338
- border-width: 2px;
2339
- border-style: solid;
2340
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2341
- box-sizing: border-box;
2342
- position: relative;
2343
- &:after {
2344
- content: '';
2345
- position: absolute;
2346
- top: 2px;
2347
- left: 2px;
2348
- width: 9px;
2349
- height: 9px;
2350
- border-radius: 50%;
2351
- box-sizing: border-box;
2352
- display: none;
2353
- }
2354
- `;
2355
- const Label = styled.span `
2356
- font-family: ${FontStyles.DEFAULT};
2357
- font-size: ${FontSizes.DEFAULT};
2358
- font-weight: 400;
2359
- color: ${Colors.BLACK.Hex};
2360
- line-height: 1.6em;
2361
- margin-left: 6px;
2317
+ const Input = styled.input `
2318
+ font-size: 20px;
2319
+ margin: 0px;
2320
+ line-height: 1.6em;
2321
+ box-sizing: border-box;
2322
+ position: absolute;
2323
+ opacity: 0;
2324
+ cursor: pointer;
2325
+ height: 0;
2326
+ width: 0;
2327
+ &:checked + span {
2328
+ border-color: ${Colors.PRIMARY.Hex};
2329
+ }
2330
+ &:checked + span:after {
2331
+ background-color: ${Colors.PRIMARY.Hex};
2332
+ display: block;
2333
+ }
2334
+ &:disabled + span {
2335
+ background-color: #d3d3d3;
2336
+ border-color: #d3d3d3;
2337
+ }
2338
+ &:disabled + span:after {
2339
+ background-color: #fff;
2340
+ }
2341
+ &:checked:disabled + span:after {
2342
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2343
+ }
2344
+ `;
2345
+ const Check = styled.span `
2346
+ height: 17px;
2347
+ width: 17px;
2348
+ border-radius: 50%;
2349
+ background-color: #fff;
2350
+ border-width: 2px;
2351
+ border-style: solid;
2352
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2353
+ box-sizing: border-box;
2354
+ position: relative;
2355
+ &:after {
2356
+ content: '';
2357
+ position: absolute;
2358
+ top: 2px;
2359
+ left: 2px;
2360
+ width: 9px;
2361
+ height: 9px;
2362
+ border-radius: 50%;
2363
+ box-sizing: border-box;
2364
+ display: none;
2365
+ }
2366
+ `;
2367
+ const Label = styled.span `
2368
+ font-family: ${FontStyles.DEFAULT};
2369
+ font-size: ${FontSizes.DEFAULT};
2370
+ font-weight: 400;
2371
+ color: ${Colors.BLACK.Hex};
2372
+ line-height: 1.6em;
2373
+ margin-left: 6px;
2362
2374
  `;
2363
2375
  const Radio = (_a) => {
2364
2376
  var { children, disabled, checked, onChange, value, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip"]);
@@ -2368,77 +2380,77 @@ const Radio = (_a) => {
2368
2380
  React.createElement(Label, null,
2369
2381
  children,
2370
2382
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2371
- };
2372
-
2383
+ };
2384
+
2373
2385
  const RadioList = (_a) => {
2374
2386
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2375
2387
  return (React.createElement(React.Fragment, null, options.map((option) => {
2376
2388
  const label = option.label || option.value;
2377
2389
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2378
2390
  })));
2379
- };
2380
-
2381
- const StyledTable = styled.table `
2382
- width: 100%;
2383
- margin-top: 1px;
2384
- table-layout: ${props => props.$tableLayout || 'auto'};
2385
- border-collapse: collapse;
2386
- text-indent: 0px;
2387
- border-spacing: 0px;
2388
- border-color: none;
2389
- box-sizing: border-box;
2390
- `;
2391
- const Header = styled.th `
2392
- padding: 12px !important;
2393
- text-align: left;
2394
- font-weight: 500;
2395
- border-bottom: 1px solid #e5e5e5;
2396
- border-top: 1px solid #e5e5e5;
2397
- text-transform: uppercase;
2398
- font-size: 12px;
2399
- font-family: ${FontStyles.DEFAULT};
2400
- letter-spacing: 1px;
2401
- white-space: nowrap;
2402
- line-height: 1;
2403
- position: relative;
2404
- box-sizing: border-box;
2405
- width: ${props => props.$width || 'auto'};
2406
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2407
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2391
+ };
2392
+
2393
+ const StyledTable = styled.table `
2394
+ width: 100%;
2395
+ margin-top: 1px;
2396
+ table-layout: ${props => props.$tableLayout || 'auto'};
2397
+ border-collapse: collapse;
2398
+ text-indent: 0px;
2399
+ border-spacing: 0px;
2400
+ border-color: none;
2401
+ box-sizing: border-box;
2402
+ `;
2403
+ const Header = styled.th `
2404
+ padding: 12px !important;
2405
+ text-align: left;
2406
+ font-weight: 500;
2407
+ border-bottom: 1px solid #e5e5e5;
2408
+ border-top: 1px solid #e5e5e5;
2409
+ text-transform: uppercase;
2410
+ font-size: 12px;
2411
+ font-family: ${FontStyles.DEFAULT};
2412
+ letter-spacing: 1px;
2413
+ white-space: nowrap;
2414
+ line-height: 1;
2415
+ position: relative;
2416
+ box-sizing: border-box;
2417
+ width: ${props => props.$width || 'auto'};
2418
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2419
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2408
2420
  `;
2409
2421
  Header.defaultProps = { theme: EditableTheme };
2410
- const Row = styled.tr `
2411
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2412
- transition: all 0.2s;
2413
- background-color: ${props => props.$bgColor};
2414
- box-sizing: border-box;
2415
- &:hover {
2416
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2417
- }
2422
+ const Row = styled.tr `
2423
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2424
+ transition: all 0.2s;
2425
+ background-color: ${props => props.$bgColor};
2426
+ box-sizing: border-box;
2427
+ &:hover {
2428
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2429
+ }
2418
2430
  `;
2419
2431
  Row.defaultProps = { theme: EditableTheme };
2420
- const Column = styled.td `
2421
- padding: 16px 12px !important;
2422
- font-size: ${FontSizes.DEFAULT} !important;
2423
- font-weight: 400 !important;
2424
- font-family: ${FontStyles.DEFAULT};
2425
- border: none !important;
2426
- word-break: break-word;
2427
- line-height: 1.4em;
2428
- box-sizing: border-box;
2429
- text-align: ${props => props.$align || 'left'};
2430
- width: ${props => props.$width || 'auto'};
2431
- `;
2432
- const IconWrapper = styled.span `
2433
- position: absolute;
2434
- top: 50%;
2435
- transform: translateY(-50%);
2436
- margin-left: 2px;
2437
- `;
2438
- const StyledIcon$1 = styled(Icon) `
2439
- > path {
2440
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2441
- }
2432
+ const Column = styled.td `
2433
+ padding: 16px 12px !important;
2434
+ font-size: ${FontSizes.DEFAULT} !important;
2435
+ font-weight: 400 !important;
2436
+ font-family: ${FontStyles.DEFAULT};
2437
+ border: none !important;
2438
+ word-break: break-word;
2439
+ line-height: 1.4em;
2440
+ box-sizing: border-box;
2441
+ text-align: ${props => props.$align || 'left'};
2442
+ width: ${props => props.$width || 'auto'};
2443
+ `;
2444
+ const IconWrapper = styled.span `
2445
+ position: absolute;
2446
+ top: 50%;
2447
+ transform: translateY(-50%);
2448
+ margin-left: 2px;
2449
+ `;
2450
+ const StyledIcon$1 = styled(Icon) `
2451
+ > path {
2452
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2453
+ }
2442
2454
  `;
2443
2455
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2444
2456
  const Table = (_a) => {
@@ -2456,55 +2468,55 @@ const Table = (_a) => {
2456
2468
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2457
2469
  })));
2458
2470
  }))) : null));
2459
- };
2460
-
2461
- const Wrapper$1 = styled.div `
2462
- display: flex;
2463
- box-sizing: border-box;
2464
- align-items: flex-end;
2465
- border-top: 1px solid #e5e5e5;
2466
- border-bottom: 1px solid #e5e5e5;
2467
- flex-shrink: 0;
2468
- align-self: stretch;
2469
- padding: 0;
2470
- margin: 0;
2471
- `;
2472
- const Tab = styled.div `
2473
- display: flex;
2474
- align-items: center;
2475
- gap: 6px;
2476
- font-size: ${FontSizes.DEFAULT};
2477
- font-family: ${FontStyles.DEFAULT};
2478
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2479
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2480
- line-height: 1em;
2481
- padding: 16px 30px 12px;
2482
- margin: 0 0 -1px 0;
2483
- border-bottom-width: 4px;
2484
- border-bottom-style: solid;
2485
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2486
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2487
- box-sizing: border-box;
2488
- &:hover {
2489
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2490
- font-weight: 500;
2491
- }
2471
+ };
2472
+
2473
+ const Wrapper$1 = styled.div `
2474
+ display: flex;
2475
+ box-sizing: border-box;
2476
+ align-items: flex-end;
2477
+ border-top: 1px solid #e5e5e5;
2478
+ border-bottom: 1px solid #e5e5e5;
2479
+ flex-shrink: 0;
2480
+ align-self: stretch;
2481
+ padding: 0;
2482
+ margin: 0;
2483
+ `;
2484
+ const Tab = styled.div `
2485
+ display: flex;
2486
+ align-items: center;
2487
+ gap: 6px;
2488
+ font-size: ${FontSizes.DEFAULT};
2489
+ font-family: ${FontStyles.DEFAULT};
2490
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2491
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2492
+ line-height: 1em;
2493
+ padding: 16px 30px 12px;
2494
+ margin: 0 0 -1px 0;
2495
+ border-bottom-width: 4px;
2496
+ border-bottom-style: solid;
2497
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2498
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2499
+ box-sizing: border-box;
2500
+ &:hover {
2501
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2502
+ font-weight: 500;
2503
+ }
2492
2504
  `;
2493
2505
  Tab.defaultProps = { theme: EditableTheme };
2494
- const Badge = styled.div `
2495
- display: flex;
2496
- width: 18px;
2497
- height: 18px;
2498
- justify-content: center;
2499
- align-items: center;
2500
- border-radius: 9px;
2501
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2502
- color: #fff;
2503
- font-family: ${FontStyles.DEFAULT};
2504
- font-size: 12px;
2505
- font-weight: 500;
2506
- line-height: 1;
2507
- letter-spacing: 1px;
2506
+ const Badge = styled.div `
2507
+ display: flex;
2508
+ width: 18px;
2509
+ height: 18px;
2510
+ justify-content: center;
2511
+ align-items: center;
2512
+ border-radius: 9px;
2513
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2514
+ color: #fff;
2515
+ font-family: ${FontStyles.DEFAULT};
2516
+ font-size: 12px;
2517
+ font-weight: 500;
2518
+ line-height: 1;
2519
+ letter-spacing: 1px;
2508
2520
  `;
2509
2521
  Badge.defaultProps = { theme: EditableTheme };
2510
2522
  const Tabs = (_a) => {
@@ -2516,29 +2528,29 @@ const Tabs = (_a) => {
2516
2528
  label));
2517
2529
  })));
2518
2530
  };
2519
- Tabs.defaultProps = {};
2520
-
2521
- const Track = styled.div `
2522
- height: 24px;
2523
- border-radius: 12px;
2524
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2525
- display: flex;
2526
- align-items: center;
2527
- cursor: pointer;
2528
- width: 40px;
2529
- padding: 2px;
2530
- box-sizing: border-box;
2531
- `;
2532
- const Handle = styled.div `
2533
- width: 20px;
2534
- height: 20px;
2535
- border-radius: 10px;
2536
- background: #ffffff;
2537
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2538
- display: flex;
2539
- align-items: center;
2540
- justify-content: center;
2541
- box-sizing: border-box;
2531
+ Tabs.defaultProps = {};
2532
+
2533
+ const Track = styled.div `
2534
+ height: 24px;
2535
+ border-radius: 12px;
2536
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2537
+ display: flex;
2538
+ align-items: center;
2539
+ cursor: pointer;
2540
+ width: 40px;
2541
+ padding: 2px;
2542
+ box-sizing: border-box;
2543
+ `;
2544
+ const Handle = styled.div `
2545
+ width: 20px;
2546
+ height: 20px;
2547
+ border-radius: 10px;
2548
+ background: #ffffff;
2549
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2550
+ display: flex;
2551
+ align-items: center;
2552
+ justify-content: center;
2553
+ box-sizing: border-box;
2542
2554
  `;
2543
2555
  const Toggle = (_a) => {
2544
2556
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2547,8 +2559,8 @@ const Toggle = (_a) => {
2547
2559
  React.createElement(Handle, { "$on": on },
2548
2560
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? mdiCheck : mdiClose, size: '16px' }))));
2549
2561
  };
2550
- Toggle.defaultProps = {};
2551
-
2562
+ Toggle.defaultProps = {};
2563
+
2552
2564
  const Container = styled.div `
2553
2565
  width: 100%;
2554
2566
  padding: 40px auto;
@@ -2583,7 +2595,7 @@ const ZeroState = (_a) => {
2583
2595
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2584
2596
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2585
2597
  action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, onClick: action.onClick }))));
2586
- };
2587
-
2588
- 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 };
2589
- //# sourceMappingURL=index.js.map
2598
+ };
2599
+
2600
+ 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 };
2601
+ //# sourceMappingURL=index.js.map