@hexure/ui 1.12.5 → 1.12.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/index.js +1133 -1080
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/Button/Button.d.ts +1 -1
  4. package/dist/cjs/types/components/Drawer/Drawer.d.ts +1 -0
  5. package/dist/esm/index.js +1085 -1032
  6. package/dist/esm/index.js.map +1 -1
  7. package/dist/esm/types/components/Button/Button.d.ts +1 -1
  8. package/dist/esm/types/components/Drawer/Drawer.d.ts +1 -0
  9. package/dist/index.d.ts +83 -82
  10. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -1,13 +1,13 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var styled = require('styled-components');
5
- var Icon = require('@mdi/react');
6
- var js = require('@mdi/js');
7
- var dayjs = require('dayjs');
8
- var Numeral = require('numeral');
9
- var Moment = require('moment');
10
-
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var styled = require('styled-components');
5
+ var Icon = require('@mdi/react');
6
+ var js = require('@mdi/js');
7
+ var dayjs = require('dayjs');
8
+ var Numeral = require('numeral');
9
+ var Moment = require('moment');
10
+
11
11
  /******************************************************************************
12
12
  Copyright (c) Microsoft Corporation.
13
13
 
@@ -21,22 +21,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
21
21
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
22
22
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
23
23
  PERFORMANCE OF THIS SOFTWARE.
24
- ***************************************************************************** */
25
- /* global Reflect, Promise, SuppressedError, Symbol */
26
-
27
- function __rest(s, e) {
28
- var t = {};
29
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
30
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
32
- }
33
- return t;
34
- }
35
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
36
- var e = new Error(message);
37
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
38
- };
39
-
24
+ ***************************************************************************** */
25
+ /* global Reflect, Promise, SuppressedError, Symbol */
26
+
27
+ function __rest(s, e) {
28
+ var t = {};
29
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
30
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
32
+ }
33
+ return t;
34
+ }
35
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
36
+ var e = new Error(message);
37
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
38
+ };
39
+
40
40
  const Colors = {
41
41
  PRIMARY: {
42
42
  Hex: '#0193D7',
@@ -85,26 +85,26 @@ const FontSizes = {
85
85
  };
86
86
  const EditableTheme = {
87
87
  PRIMARY_COLOR: Colors.PRIMARY,
88
- };
89
-
90
- const Header$3 = styled.div `
91
- display: flex;
92
- align-items: center;
93
- justify-content: space-between;
94
- box-sizing: border-box;
95
- background: #f5f5f5;
96
- border: 1px solid #e5e5e5;
97
- padding: 14px 20px;
98
- height: 50px;
99
- cursor: pointer;
100
- `;
101
- const Title$2 = styled.div `
102
- font-size: ${FontSizes.DEFAULT};
103
- font-weight: 400;
104
- color: ${Colors.BLACK.Hex};
105
- line-height: 1.6em;
106
- font-family: ${FontStyles.DEFAULT};
107
- box-sizing: border-box;
88
+ };
89
+
90
+ const Header$3 = styled.div `
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: space-between;
94
+ box-sizing: border-box;
95
+ background: #f5f5f5;
96
+ border: 1px solid #e5e5e5;
97
+ padding: 14px 20px;
98
+ height: 50px;
99
+ cursor: pointer;
100
+ `;
101
+ const Title$2 = styled.div `
102
+ font-size: ${FontSizes.DEFAULT};
103
+ font-weight: 400;
104
+ color: ${Colors.BLACK.Hex};
105
+ line-height: 1.6em;
106
+ font-family: ${FontStyles.DEFAULT};
107
+ box-sizing: border-box;
108
108
  `;
109
109
  const Accordion = (_a) => {
110
110
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -113,13 +113,13 @@ const Accordion = (_a) => {
113
113
  React.createElement(Title$2, null, title),
114
114
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
115
115
  open ? children : null));
116
- };
117
-
118
- const StyledButton = styled.button `
119
- height: ${props => (props.$small ? '30px' : '40px')};
120
- line-height: 1em;
121
- border-radius: ${props => (props.$small ? '15px' : '20px')};
122
- margin: ${props => props.$margin || '0px'};
116
+ };
117
+
118
+ const StyledButton = styled.button `
119
+ height: ${props => (props.$small ? '30px' : '40px')};
120
+ line-height: 1em;
121
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
122
+ margin: ${props => props.$margin || '0px'};
123
123
  padding: ${props => {
124
124
  if (props.$hasChildren) {
125
125
  if (props.$small) {
@@ -130,9 +130,9 @@ const StyledButton = styled.button `
130
130
  }
131
131
  }
132
132
  return '0px';
133
- }};
134
- outline: none;
135
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
133
+ }};
134
+ outline: none;
135
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
136
136
  width: ${props => {
137
137
  if (props.$hasChildren) {
138
138
  return 'auto';
@@ -141,53 +141,53 @@ const StyledButton = styled.button `
141
141
  return '30px';
142
142
  }
143
143
  return '40px';
144
- }};
145
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
150
- border-width: 1px;
151
- border-style: solid;
152
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
153
- box-sizing: border-box;
154
-
155
- &:active,
156
- &:focus,
157
- &:hover {
158
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
159
- }
160
- `;
161
- const Label$5 = styled.span `
162
- color: ${props => props.$content_color || '#fff'};
163
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
164
- font-family: ${FontStyles.DEFAULT};
165
- font-weight: 500;
166
- line-height: 1;
167
- `;
168
- const StyledIcon$6 = styled.span `
169
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
170
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
171
- display: flex;
172
- align-items: center;
173
- box-sizing: border-box;
174
- `;
175
- const Badge$1 = styled.span `
176
- width: ${props => (props.$small ? '20px' : '24px')};
177
- height: ${props => (props.$small ? '20px' : '24px')};
178
- line-height: 1;
179
- display: flex;
180
- align-items: center;
181
- justify-content: center;
182
- border-radius: 100%;
183
- background-color: ${props => props.$bg_color || '#fff'};
184
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
185
- font-size: ${props => (props.$small ? '10px' : '12px')};
186
- font-weight: 600;
187
- font-family: ${FontStyles.DEFAULT};
188
- letter-spacing: -1px;
189
- margin-left: ${props => (props.$small ? '5px' : '10px')};
190
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
144
+ }};
145
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
150
+ border-width: 1px;
151
+ border-style: solid;
152
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
153
+ box-sizing: border-box;
154
+
155
+ &:active,
156
+ &:focus,
157
+ &:hover {
158
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
159
+ }
160
+ `;
161
+ const Label$5 = styled.span `
162
+ color: ${props => props.$content_color || '#fff'};
163
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
164
+ font-family: ${FontStyles.DEFAULT};
165
+ font-weight: 500;
166
+ line-height: 1;
167
+ `;
168
+ const StyledIcon$6 = styled.span `
169
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
170
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
171
+ display: flex;
172
+ align-items: center;
173
+ box-sizing: border-box;
174
+ `;
175
+ const Badge$1 = styled.span `
176
+ width: ${props => (props.$small ? '20px' : '24px')};
177
+ height: ${props => (props.$small ? '20px' : '24px')};
178
+ line-height: 1;
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ border-radius: 100%;
183
+ background-color: ${props => props.$bg_color || '#fff'};
184
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
185
+ font-size: ${props => (props.$small ? '10px' : '12px')};
186
+ font-weight: 600;
187
+ font-family: ${FontStyles.DEFAULT};
188
+ letter-spacing: -1px;
189
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
190
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
191
191
  `;
192
192
  const Button = (_a) => {
193
193
  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"]);
@@ -229,29 +229,29 @@ const Button = (_a) => {
229
229
  icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
230
230
  React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
231
231
  badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
232
- };
233
-
234
- const StyledComponent = styled.p `
235
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
236
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
237
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
238
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
239
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
240
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
241
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
242
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
243
- margin: ${props => props.$margin || '0px'};
244
- padding: ${props => props.$padding || '0px'};
245
- text-align: ${props => props.$align || 'left'};
246
- box-sizing: border-box;
232
+ };
233
+
234
+ const StyledComponent = styled.p `
235
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
236
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
237
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
238
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
239
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
240
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
241
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
242
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
243
+ margin: ${props => props.$margin || '0px'};
244
+ padding: ${props => props.$padding || '0px'};
245
+ text-align: ${props => props.$align || 'left'};
246
+ box-sizing: border-box;
247
247
  `;
248
248
  const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
249
249
  return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
250
250
  };
251
251
  Copy.defaultProps = {
252
252
  type: 'default',
253
- };
254
-
253
+ };
254
+
255
255
  const H1 = styled.h1 `
256
256
  color: ${Colors.BLACK.Hex};
257
257
  font-size: 30px;
@@ -299,8 +299,8 @@ const Heading = (_a) => {
299
299
  Heading.defaultProps = {
300
300
  bold: false,
301
301
  type: 'primary',
302
- };
303
-
302
+ };
303
+
304
304
  const Wrapper$i = styled.div `
305
305
  position: fixed;
306
306
  top: 0;
@@ -333,29 +333,29 @@ const ActionDialog = (_a) => {
333
333
  tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
334
334
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
335
335
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
336
- };
337
-
338
- const Wrapper$h = styled.div `
339
- border: 1px solid #f1f1f1;
340
- border-radius: 4px;
341
- border-left-width: 4px;
342
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
343
- display: flex;
344
- align-items: flex-start;
345
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
346
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
347
- box-sizing: border-box;
348
- `;
349
- const StyledIcon$5 = styled(Icon) `
350
- flex-shrink: 0;
351
- `;
352
- const Action$1 = styled.div `
353
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
354
- font-size: ${FontSizes.DEFAULT};
355
- font-family: ${FontStyles.DEFAULT};
356
- font-weight: 500;
357
- cursor: pointer;
358
- margin-top: 6px;
336
+ };
337
+
338
+ const Wrapper$h = styled.div `
339
+ border: 1px solid #f1f1f1;
340
+ border-radius: 4px;
341
+ border-left-width: 4px;
342
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
343
+ display: flex;
344
+ align-items: flex-start;
345
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
346
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
347
+ box-sizing: border-box;
348
+ `;
349
+ const StyledIcon$5 = styled(Icon) `
350
+ flex-shrink: 0;
351
+ `;
352
+ const Action$1 = styled.div `
353
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
354
+ font-size: ${FontSizes.DEFAULT};
355
+ font-family: ${FontStyles.DEFAULT};
356
+ font-weight: 500;
357
+ cursor: pointer;
358
+ margin-top: 6px;
359
359
  `;
360
360
  Action$1.defaultProps = { theme: EditableTheme };
361
361
  const Alert = (_a) => {
@@ -385,8 +385,8 @@ const Alert = (_a) => {
385
385
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
386
386
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
387
387
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
388
- };
389
-
388
+ };
389
+
390
390
  const colorMapping = {
391
391
  black: {
392
392
  fill_1: '#000000',
@@ -427,61 +427,61 @@ const Logo = (_a) => {
427
427
  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 }),
428
428
  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 })));
429
429
  }
430
- };
431
-
432
- const Container$3 = styled.header `
433
- width: 100%;
434
- display: flex;
435
- padding: 20px;
436
- box-sizing: border-box;
437
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
438
- background: '#fff';
439
- justify-content: space-between;
440
- `;
441
- const LogoWrapper = styled.div `
442
- display: flex;
443
- align-items: center;
444
- `;
445
- const Image = styled.img `
446
- height: 30px !important;
447
- width: auto !important;
448
- `;
449
- const Buttons = styled.div `
450
- display: flex;
451
- flex-direction: row;
452
- column-gap: 10px;
453
- flex-direction: reverse;
430
+ };
431
+
432
+ const Container$3 = styled.header `
433
+ width: 100%;
434
+ display: flex;
435
+ padding: 20px;
436
+ box-sizing: border-box;
437
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
438
+ background: '#fff';
439
+ justify-content: space-between;
440
+ `;
441
+ const LogoWrapper = styled.div `
442
+ display: flex;
443
+ align-items: center;
444
+ `;
445
+ const Image = styled.img `
446
+ height: 30px !important;
447
+ width: auto !important;
448
+ `;
449
+ const Buttons = styled.div `
450
+ display: flex;
451
+ flex-direction: row;
452
+ column-gap: 10px;
453
+ flex-direction: reverse;
454
454
  `;
455
455
  const AppHeader = ({ logoUrl, buttons = [] }) => {
456
456
  return (React.createElement(Container$3, null,
457
457
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
458
458
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
459
- };
460
-
461
- const Wrapper$g = styled.div `
462
- display: inline-block;
463
- border-radius: 4px;
464
- padding: 4px 6px;
465
- background: ${props => Colors[props.$color].Hex};
466
- color: #ffffff;
467
- box-sizing: border-box;
468
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
469
- `;
470
- const Content$3 = styled.div `
471
- display: flex;
472
- align-items: center;
473
- `;
474
- const Label$4 = styled.div `
475
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
476
- font-size: ${FontSizes.SMALL};
477
- font-weight: 500;
478
- font-family: ${FontStyles.DEFAULT};
479
- line-height: 1.2em;
480
- `;
481
- const Remove$1 = styled.div `
482
- margin-left: 10px;
483
- display: flex;
484
- align-items: center;
459
+ };
460
+
461
+ const Wrapper$g = styled.div `
462
+ display: inline-block;
463
+ border-radius: 4px;
464
+ padding: 4px 6px;
465
+ background: ${props => Colors[props.$color].Hex};
466
+ color: #ffffff;
467
+ box-sizing: border-box;
468
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
469
+ `;
470
+ const Content$3 = styled.div `
471
+ display: flex;
472
+ align-items: center;
473
+ `;
474
+ const Label$4 = styled.div `
475
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
476
+ font-size: ${FontSizes.SMALL};
477
+ font-weight: 500;
478
+ font-family: ${FontStyles.DEFAULT};
479
+ line-height: 1.2em;
480
+ `;
481
+ const Remove$1 = styled.div `
482
+ margin-left: 10px;
483
+ display: flex;
484
+ align-items: center;
485
485
  `;
486
486
  const Tag = (_a) => {
487
487
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -490,91 +490,91 @@ const Tag = (_a) => {
490
490
  React.createElement(Label$4, { "$color": color }, children),
491
491
  removable ? (React.createElement(Remove$1, null,
492
492
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
493
- };
494
-
495
- const SidebarContainer = styled.div `
496
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
497
- display: flex;
498
- flex-direction: column;
499
- height: 100%;
500
- padding: 12px 0px;
501
- width: ${props => (props.$isOpen ? props.$width : '60px')};
502
- `;
503
- const MenuWrapper = styled.div `
504
- display: flex;
505
- align-items: center;
506
- border-left-width: 4px;
507
- border-left-style: solid;
508
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
509
- cursor: pointer;
510
- height: 40px;
511
-
512
- &:hover > div {
513
- color: ${props => props.$color.Hex};
514
- }
515
-
516
- &:hover > svg > path {
517
- fill: ${Colors.BLACK.Hex} !important;
518
- }
519
- `;
520
- const MenuIcon = styled(Icon) `
521
- width: 20px;
522
- height: 20px;
523
- margin: 0px 16px;
524
- flex-shrink: 0;
525
-
526
- > path {
527
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
528
- }
529
- `;
530
- const MenuLabel = styled.div `
531
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
532
- flex: 1;
533
- font-size: 12px;
534
- font-style: normal;
535
- font-weight: 600;
536
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
537
- line-height: 16px;
538
- padding: 12px 0px;
539
- letter-spacing: 1px;
540
- `;
541
- const SubMenu = styled.div `
542
- overflow-y: auto;
543
- padding-left: 44px;
544
- padding-right: 20px;
545
- padding-bottom: 10px;
546
- `;
547
- const SubMenuItem = styled.a `
548
- display: block;
549
- padding: 8px 12px;
550
- border-radius: 8px;
551
- font-size: 13px;
552
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
553
- line-height: 20px;
554
- text-decoration: none;
555
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
556
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
557
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
558
- cursor: pointer;
559
-
560
- &:hover {
561
- color: ${props => props.$color.Hex};
562
- font-weight: 500;
563
- }
564
- `;
565
- const Footer = styled.div `
566
- padding: 20px 14px 0px;
567
- display: flex;
568
- align-items: center;
569
- `;
570
- const FooterInfo = styled.div `
571
- display: flex;
572
- flex-direction: column;
573
- flex: 1;
574
- align-items: flex-start;
575
- `;
576
- const SidebarMenuContainer = styled.div `
577
- flex-grow: 1;
493
+ };
494
+
495
+ const SidebarContainer = styled.div `
496
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
497
+ display: flex;
498
+ flex-direction: column;
499
+ height: 100%;
500
+ padding: 12px 0px;
501
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
502
+ `;
503
+ const MenuWrapper = styled.div `
504
+ display: flex;
505
+ align-items: center;
506
+ border-left-width: 4px;
507
+ border-left-style: solid;
508
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
509
+ cursor: pointer;
510
+ height: 40px;
511
+
512
+ &:hover > div {
513
+ color: ${props => props.$color.Hex};
514
+ }
515
+
516
+ &:hover > svg > path {
517
+ fill: ${Colors.BLACK.Hex} !important;
518
+ }
519
+ `;
520
+ const MenuIcon = styled(Icon) `
521
+ width: 20px;
522
+ height: 20px;
523
+ margin: 0px 16px;
524
+ flex-shrink: 0;
525
+
526
+ > path {
527
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
528
+ }
529
+ `;
530
+ const MenuLabel = styled.div `
531
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
532
+ flex: 1;
533
+ font-size: 12px;
534
+ font-style: normal;
535
+ font-weight: 600;
536
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
537
+ line-height: 16px;
538
+ padding: 12px 0px;
539
+ letter-spacing: 1px;
540
+ `;
541
+ const SubMenu = styled.div `
542
+ overflow-y: auto;
543
+ padding-left: 44px;
544
+ padding-right: 20px;
545
+ padding-bottom: 10px;
546
+ `;
547
+ const SubMenuItem = styled.a `
548
+ display: block;
549
+ padding: 8px 12px;
550
+ border-radius: 8px;
551
+ font-size: 13px;
552
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
553
+ line-height: 20px;
554
+ text-decoration: none;
555
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
556
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
557
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
558
+ cursor: pointer;
559
+
560
+ &:hover {
561
+ color: ${props => props.$color.Hex};
562
+ font-weight: 500;
563
+ }
564
+ `;
565
+ const Footer = styled.div `
566
+ padding: 20px 14px 0px;
567
+ display: flex;
568
+ align-items: center;
569
+ `;
570
+ const FooterInfo = styled.div `
571
+ display: flex;
572
+ flex-direction: column;
573
+ flex: 1;
574
+ align-items: flex-start;
575
+ `;
576
+ const SidebarMenuContainer = styled.div `
577
+ flex-grow: 1;
578
578
  `;
579
579
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
580
580
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -598,75 +598,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
598
598
  e.preventDefault();
599
599
  toggleCollapse(!collapsed);
600
600
  }, small: true }))));
601
- };
602
-
603
- const Wrapper$f = styled.div `
604
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
605
- border-radius: 8px;
606
- box-sizing: border-box;
607
- display: flex;
608
- align-items: center;
609
- justify-content: space-between;
610
- padding: 16px 20px;
601
+ };
602
+
603
+ const Wrapper$f = styled.div `
604
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
605
+ border-radius: 8px;
606
+ box-sizing: border-box;
607
+ display: flex;
608
+ align-items: center;
609
+ justify-content: space-between;
610
+ padding: 16px 20px;
611
611
  `;
612
612
  Wrapper$f.defaultProps = { theme: EditableTheme };
613
- const Left = styled.div `
614
- box-sizing: border-box;
615
- display: flex;
616
- align-items: center;
617
- justify-content: space-between;
618
- flex-shrink: 0;
619
- `;
620
- const Info$1 = styled.div `
621
- box-sizing: border-box;
622
- display: flex;
623
- align-items: center;
624
- margin-right: 30px;
625
- `;
626
- const Selected = styled.span `
627
- font-size: 14px;
628
- font-weight: 400;
629
- font-family: ${FontStyles.DEFAULT};
630
- color: ${Colors.BLACK.Hex};
631
- line-height: 1;
632
- `;
633
- const Clear = styled.span `
634
- font-size: 14px;
635
- font-weight: 400;
636
- font-family: ${FontStyles.DEFAULT};
637
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
638
- line-height: 1;
639
- cursor: pointer;
640
- padding-left: 10px;
641
- margin-left: 10px;
642
- border-left: 1px solid #ccc;
613
+ const Left = styled.div `
614
+ box-sizing: border-box;
615
+ display: flex;
616
+ align-items: center;
617
+ justify-content: space-between;
618
+ flex-shrink: 0;
619
+ `;
620
+ const Info$1 = styled.div `
621
+ box-sizing: border-box;
622
+ display: flex;
623
+ align-items: center;
624
+ margin-right: 30px;
625
+ `;
626
+ const Selected = styled.span `
627
+ font-size: 14px;
628
+ font-weight: 400;
629
+ font-family: ${FontStyles.DEFAULT};
630
+ color: ${Colors.BLACK.Hex};
631
+ line-height: 1;
632
+ `;
633
+ const Clear = styled.span `
634
+ font-size: 14px;
635
+ font-weight: 400;
636
+ font-family: ${FontStyles.DEFAULT};
637
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
638
+ line-height: 1;
639
+ cursor: pointer;
640
+ padding-left: 10px;
641
+ margin-left: 10px;
642
+ border-left: 1px solid #ccc;
643
643
  `;
644
644
  Clear.defaultProps = { theme: EditableTheme };
645
- const Actions$1 = styled.div `
646
- box-sizing: border-box;
647
- display: flex;
648
- align-items: center;
649
- column-gap: 10px;
650
- `;
651
- const Error$1 = styled.div `
652
- box-sizing: border-box;
653
- display: flex;
654
- align-items: center;
655
- background: rgba(${Colors.RED.Rgb}, 0.1);
656
- border-radius: 4px;
657
- padding: 6px 8px;
658
- text-overflow: ellipsis;
659
- white-space: nowrap;
660
- overflow: hidden;
661
- margin-left: 30px;
662
- `;
663
- const ErrorMsg = styled.span `
664
- font-size: 14px;
665
- font-weight: 500;
666
- font-family: ${FontStyles.DEFAULT};
667
- line-height: 1em;
668
- color: ${Colors.RED.Hex};
669
- margin-left: 8px;
645
+ const Actions$1 = styled.div `
646
+ box-sizing: border-box;
647
+ display: flex;
648
+ align-items: center;
649
+ column-gap: 10px;
650
+ `;
651
+ const Error$1 = styled.div `
652
+ box-sizing: border-box;
653
+ display: flex;
654
+ align-items: center;
655
+ background: rgba(${Colors.RED.Rgb}, 0.1);
656
+ border-radius: 4px;
657
+ padding: 6px 8px;
658
+ text-overflow: ellipsis;
659
+ white-space: nowrap;
660
+ overflow: hidden;
661
+ margin-left: 30px;
662
+ `;
663
+ const ErrorMsg = styled.span `
664
+ font-size: 14px;
665
+ font-weight: 500;
666
+ font-family: ${FontStyles.DEFAULT};
667
+ line-height: 1em;
668
+ color: ${Colors.RED.Hex};
669
+ margin-left: 8px;
670
670
  `;
671
671
  const BulkActionBar = (_a) => {
672
672
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -681,46 +681,46 @@ const BulkActionBar = (_a) => {
681
681
  errorMsg ? (React.createElement(Error$1, null,
682
682
  React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
683
683
  React.createElement(ErrorMsg, null, errorMsg))) : null));
684
- };
685
-
686
- const Wrapper$e = styled.div `
687
- background: #fff;
688
- border-radius: 8px;
689
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
690
- display: flex;
691
- flex-direction: column;
692
- gap: 4px;
693
- max-height: ${props => props.$maxHeight || '312px'};
694
- padding: 10px;
695
- width: 200px;
696
- `;
697
- const MenuItem = styled.div `
698
- align-items: center;
699
- border-radius: 8px;
700
- border: 1px solid transparent;
701
- display: flex;
702
- gap: 8px;
703
- height: 38px;
704
- padding: 8px;
705
- &:hover {
706
- background: rgba(1, 147, 215, 0.1);
707
- cursor: pointer;
708
-
709
- svg,
710
- path {
711
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
712
- }
713
- }
684
+ };
685
+
686
+ const Wrapper$e = styled.div `
687
+ background: #fff;
688
+ border-radius: 8px;
689
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
690
+ display: flex;
691
+ flex-direction: column;
692
+ gap: 4px;
693
+ max-height: ${props => props.$maxHeight || '312px'};
694
+ padding: 10px;
695
+ width: 200px;
696
+ `;
697
+ const MenuItem = styled.div `
698
+ align-items: center;
699
+ border-radius: 8px;
700
+ border: 1px solid transparent;
701
+ display: flex;
702
+ gap: 8px;
703
+ height: 38px;
704
+ padding: 8px;
705
+ &:hover {
706
+ background: rgba(1, 147, 215, 0.1);
707
+ cursor: pointer;
708
+
709
+ svg,
710
+ path {
711
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
712
+ }
713
+ }
714
714
  `;
715
715
  MenuItem.defaultProps = { theme: EditableTheme };
716
- const Title$1 = styled.span `
717
- font-family: Roboto;
718
- font-size: 14px;
719
- font-weight: 400;
720
- height: auto;
721
- letter-spacing: 0px;
722
- line-height: 22px;
723
- text-align: left;
716
+ const Title$1 = styled.span `
717
+ font-family: Roboto;
718
+ font-size: 14px;
719
+ font-weight: 400;
720
+ height: auto;
721
+ letter-spacing: 0px;
722
+ line-height: 22px;
723
+ text-align: left;
724
724
  `;
725
725
  const MoreMenu = (_a) => {
726
726
  var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
@@ -729,38 +729,38 @@ const MoreMenu = (_a) => {
729
729
  item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
730
730
  React.createElement(Title$1, null, item.label)));
731
731
  })));
732
- };
733
-
734
- const Wrapper$d = styled.div `
735
- position: relative;
736
- display: inline-block;
737
- `;
738
- const StyledMoreMenu = styled(MoreMenu) `
739
- position: absolute;
740
- right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
741
- left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
742
- top: ${props => (props.$small ? '30px' : '40px')};
743
- width: ${props => props.$menuWidth};
744
- z-index: 10;
732
+ };
733
+
734
+ const Wrapper$d = styled.div `
735
+ position: relative;
736
+ display: inline-block;
737
+ `;
738
+ const StyledMoreMenu = styled(MoreMenu) `
739
+ position: absolute;
740
+ right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
741
+ left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
742
+ top: ${props => (props.$small ? '30px' : '40px')};
743
+ width: ${props => props.$menuWidth};
744
+ z-index: 10;
745
745
  `;
746
746
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', menuWidth = '200px', }) => {
747
747
  const [show_menu, toggleMenu] = React.useState(false);
748
748
  return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
749
749
  React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
750
750
  show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
751
- };
752
-
753
- const Wrapper$c = styled.div `
754
- display: inline-block;
755
- position: relative;
756
- height: 16px;
757
- `;
758
- const StyledIcon$4 = styled(Icon) `
759
- width: 16px;
760
- height: 16px;
761
- margin: 0px 6px;
762
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
763
- cursor: pointer;
751
+ };
752
+
753
+ const Wrapper$c = styled.div `
754
+ display: inline-block;
755
+ position: relative;
756
+ height: 16px;
757
+ `;
758
+ const StyledIcon$4 = styled(Icon) `
759
+ width: 16px;
760
+ height: 16px;
761
+ margin: 0px 6px;
762
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
763
+ cursor: pointer;
764
764
  `;
765
765
  StyledIcon$4.defaultProps = { theme: EditableTheme };
766
766
  const positions = {
@@ -798,8 +798,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
798
798
  return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
799
799
  trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
800
800
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
801
- };
802
-
801
+ };
802
+
803
803
  const Wrapper$b = styled.label `
804
804
  border-radius: 4px;
805
805
  padding: 4px 0px 4px 6px;
@@ -885,16 +885,16 @@ const Checkbox = (_a) => {
885
885
  children ? (React.createElement(Label$3, null,
886
886
  children,
887
887
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
888
- };
889
-
890
- const SelectAll = styled.div `
891
- padding: 8px 12px;
892
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
893
- box-sizing: border-box;
888
+ };
889
+
890
+ const SelectAll = styled.div `
891
+ padding: 8px 12px;
892
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
893
+ box-sizing: border-box;
894
894
  `;
895
- const Options$1 = styled.div `
896
- padding: 12px;
897
- box-sizing: border-box;
895
+ const Options$1 = styled.div `
896
+ padding: 12px;
897
+ box-sizing: border-box;
898
898
  `;
899
899
  const Checklist = (_a) => {
900
900
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -931,53 +931,53 @@ const Checklist = (_a) => {
931
931
  const checked = selected.includes(option.value);
932
932
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
933
933
  }))));
934
- };
935
-
936
- const Wrapper$a = styled.div `
937
- border-radius: 4px;
938
- height: 40px;
939
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
940
- position: relative;
941
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
942
- border-width: 1px;
943
- border-style: solid;
944
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
945
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
946
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
947
- box-sizing: border-box;
948
- padding: 10px 0px;
949
- display: flex;
950
- align-items: center;
951
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
952
-
953
- &:focus-within {
954
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
955
- }
934
+ };
935
+
936
+ const Wrapper$a = styled.div `
937
+ border-radius: 4px;
938
+ height: 40px;
939
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
940
+ position: relative;
941
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
942
+ border-width: 1px;
943
+ border-style: solid;
944
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
945
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
946
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
947
+ box-sizing: border-box;
948
+ padding: 10px 0px;
949
+ display: flex;
950
+ align-items: center;
951
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
952
+
953
+ &:focus-within {
954
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
955
+ }
956
956
  `;
957
957
  Wrapper$a.defaultProps = { theme: EditableTheme };
958
- const Trigger$1 = styled.select `
959
- appearance: none;
960
- box-shadow: none;
961
- outline: none;
962
- border: none;
963
- color: ${Colors.BLACK.Hex};
964
- font-size: ${FontSizes.DEFAULT};
965
- font-weight: 400;
966
- font-family: ${FontStyles.DEFAULT};
967
- line-height: 2.9em;
968
- background-color: transparent;
969
- background-image: none;
970
- width: 100%;
971
- box-sizing: border-box;
972
- padding: 0px 30px 0px 10px;
973
- box-sizing: border-box;
974
- position: relative;
975
- z-index: 2;
976
- `;
977
- const IconWrapper$2 = styled(Icon) `
978
- position: absolute;
979
- right: 9px;
980
- z-index: 1;
958
+ const Trigger$1 = styled.select `
959
+ appearance: none;
960
+ box-shadow: none;
961
+ outline: none;
962
+ border: none;
963
+ color: ${Colors.BLACK.Hex};
964
+ font-size: ${FontSizes.DEFAULT};
965
+ font-weight: 400;
966
+ font-family: ${FontStyles.DEFAULT};
967
+ line-height: 2.9em;
968
+ background-color: transparent;
969
+ background-image: none;
970
+ width: 100%;
971
+ box-sizing: border-box;
972
+ padding: 0px 30px 0px 10px;
973
+ box-sizing: border-box;
974
+ position: relative;
975
+ z-index: 2;
976
+ `;
977
+ const IconWrapper$2 = styled(Icon) `
978
+ position: absolute;
979
+ right: 9px;
980
+ z-index: 1;
981
981
  `;
982
982
  const Select = (_a) => {
983
983
  var { options, optionGroups, placeholder, readOnly, invalid, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
@@ -995,15 +995,15 @@ const Select = (_a) => {
995
995
  return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
996
996
  })),
997
997
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
998
- };
999
-
1000
- const DatePickerWrapper = styled.div `
1001
- display: flex;
1002
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
998
+ };
999
+
1000
+ const DatePickerWrapper = styled.div `
1001
+ display: flex;
1002
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1003
1003
  `;
1004
- const Middle = styled.div `
1005
- margin: 0px -1px;
1006
- flex-grow: 1;
1004
+ const Middle = styled.div `
1005
+ margin: 0px -1px;
1006
+ flex-grow: 1;
1007
1007
  `;
1008
1008
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, onChange, style, }) => {
1009
1009
  const dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
@@ -1065,66 +1065,66 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1065
1065
  React.createElement(Middle, null,
1066
1066
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
1067
1067
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
1068
- };
1069
-
1070
- const Scrim$1 = styled.div `
1071
- position: ${({ $position }) => $position};
1072
- top: 0;
1073
- right: 0;
1074
- bottom: 0;
1075
- left: 0;
1076
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1077
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1078
- `;
1079
- const Container$2 = styled.div `
1080
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1081
- min-width: 400px;
1082
- width: ${({ $width }) => $width || '400px'};
1083
- overflow: hidden;
1084
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1085
- outline: none;
1086
- border: none;
1087
- position: ${({ $position }) => $position};
1088
- top: 0;
1089
- right: 0;
1090
- bottom: 0;
1091
- padding: 0px;
1092
- display: flex;
1093
- flex-direction: column;
1094
- box-sizing: border-box;
1095
- background: #fff;
1096
- `;
1097
- const Header$2 = styled.div `
1098
- padding: 30px 20px;
1099
- display: flex;
1100
- align-items: flex-start;
1101
- box-sizing: border-box;
1102
- flex-shrink: 0;
1103
- background: #fff;
1104
- `;
1105
- const Close$1 = styled.div `
1106
- margin-left: auto;
1107
- display: flex;
1108
- align-items: center;
1109
- padding-left: 20px;
1110
- cursor: pointer;
1111
- `;
1112
- const ContentWrapper$1 = styled.div `
1113
- overflow-x: hidden;
1114
- overflow-y: auto;
1115
- box-sizing: border-box;
1116
- flex: 1;
1117
- background: #fff;
1118
- `;
1119
- const ButtonBar$1 = styled.div `
1120
- padding: 20px;
1121
- display: flex;
1122
- align-items: center;
1123
- justify-content: flex-end;
1124
- box-sizing: border-box;
1125
- gap: 10px;
1126
- flex-shrink: 0;
1127
- background: #fff;
1068
+ };
1069
+
1070
+ const Scrim$1 = styled.div `
1071
+ position: ${({ $position }) => $position};
1072
+ top: 0;
1073
+ right: 0;
1074
+ bottom: 0;
1075
+ left: 0;
1076
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1077
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1078
+ `;
1079
+ const Container$2 = styled.div `
1080
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1081
+ min-width: 400px;
1082
+ width: ${({ $width }) => $width || '400px'};
1083
+ overflow: hidden;
1084
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1085
+ outline: none;
1086
+ border: none;
1087
+ position: ${({ $position }) => $position};
1088
+ top: 0;
1089
+ right: 0;
1090
+ bottom: 0;
1091
+ padding: 0px;
1092
+ display: flex;
1093
+ flex-direction: column;
1094
+ box-sizing: border-box;
1095
+ background: #fff;
1096
+ `;
1097
+ const Header$2 = styled.div `
1098
+ padding: 30px 20px;
1099
+ display: flex;
1100
+ align-items: flex-start;
1101
+ box-sizing: border-box;
1102
+ flex-shrink: 0;
1103
+ background: #fff;
1104
+ `;
1105
+ const Close$1 = styled.div `
1106
+ margin-left: auto;
1107
+ display: flex;
1108
+ align-items: center;
1109
+ padding-left: 20px;
1110
+ cursor: pointer;
1111
+ `;
1112
+ const ContentWrapper$1 = styled.div `
1113
+ overflow-x: hidden;
1114
+ overflow-y: auto;
1115
+ box-sizing: border-box;
1116
+ flex: 1;
1117
+ background: #fff;
1118
+ `;
1119
+ const ButtonBar$1 = styled.div `
1120
+ padding: 20px;
1121
+ display: flex;
1122
+ align-items: center;
1123
+ justify-content: flex-end;
1124
+ box-sizing: border-box;
1125
+ gap: 10px;
1126
+ flex-shrink: 0;
1127
+ background: #fff;
1128
1128
  `;
1129
1129
  const Drawer = (_a) => {
1130
1130
  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"]);
@@ -1148,12 +1148,12 @@ const Drawer = (_a) => {
1148
1148
  React.createElement(Button, { format: 'secondary', icon: js.mdiClose, small: true }))),
1149
1149
  React.createElement(ContentWrapper$1, null, children),
1150
1150
  primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, null,
1151
- tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
1152
- secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1153
- primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
1151
+ tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' })) : null,
1152
+ secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' })) : null,
1153
+ primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' })) : null)) : null),
1154
1154
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1155
- };
1156
-
1155
+ };
1156
+
1157
1157
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, (props.$customStyle))));
1158
1158
  const LabelRow = styled.div `
1159
1159
  display: flex;
@@ -1210,111 +1210,111 @@ const Field = (_a) => {
1210
1210
  label,
1211
1211
  required ? React.createElement(Required, null, "*") : null,
1212
1212
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null),
1213
- action ? (React.createElement(Action, { id: action.id, onClick: action.onClick }, action.label)) : null),
1214
- description ? React.createElement(Description, null, description) : null,
1215
- children,
1216
- validationText ? React.createElement(Validation, null, validationText) : null));
1217
- };
1218
-
1219
- const Wrapper$8 = styled.fieldset `
1220
- margin-inline-start: 0px;
1221
- margin-inline-end: 0px;
1222
- padding-block-start: 0px;
1223
- padding-inline-start: 0px;
1224
- padding-inline-end: 0px;
1225
- padding-block-end: 0px;
1226
- min-inline-size: min-content;
1227
- border-width: 0px;
1228
- border-style: none;
1229
- border-color: transparent;
1230
- border-image: none;
1231
- `;
1232
- const Label$1 = styled.legend `
1233
- padding-inline-start: 0px;
1234
- padding-inline-end: 0px;
1235
-
1236
- color: ${Colors.BLACK.Hex};
1237
- font-family: ${FontStyles.DEFAULT};
1238
- font-size: ${FontSizes.DEFAULT};
1239
- font-weight: 500;
1240
- line-height: 22px;
1241
- margin-bottom: 6px;
1242
- `;
1243
- const Content$1 = styled.div `
1244
- padding: 20px;
1245
- border-radius: 8px;
1246
- background: #fcfcfc;
1213
+ action ? (React.createElement(Action, { id: action.id, onClick: action.onClick }, action.label)) : null),
1214
+ description ? React.createElement(Description, null, description) : null,
1215
+ children,
1216
+ validationText ? React.createElement(Validation, null, validationText) : null));
1217
+ };
1218
+
1219
+ const Wrapper$8 = styled.fieldset `
1220
+ margin-inline-start: 0px;
1221
+ margin-inline-end: 0px;
1222
+ padding-block-start: 0px;
1223
+ padding-inline-start: 0px;
1224
+ padding-inline-end: 0px;
1225
+ padding-block-end: 0px;
1226
+ min-inline-size: min-content;
1227
+ border-width: 0px;
1228
+ border-style: none;
1229
+ border-color: transparent;
1230
+ border-image: none;
1231
+ `;
1232
+ const Label$1 = styled.legend `
1233
+ padding-inline-start: 0px;
1234
+ padding-inline-end: 0px;
1235
+
1236
+ color: ${Colors.BLACK.Hex};
1237
+ font-family: ${FontStyles.DEFAULT};
1238
+ font-size: ${FontSizes.DEFAULT};
1239
+ font-weight: 500;
1240
+ line-height: 22px;
1241
+ margin-bottom: 6px;
1242
+ `;
1243
+ const Content$1 = styled.div `
1244
+ padding: 20px;
1245
+ border-radius: 8px;
1246
+ background: #fcfcfc;
1247
1247
  `;
1248
1248
  const FieldGroup = ({ children, label }) => {
1249
1249
  return (React.createElement(Wrapper$8, null,
1250
1250
  React.createElement(Label$1, null, label),
1251
1251
  React.createElement(Content$1, null, children)));
1252
- };
1253
-
1254
- const Dropzone = styled.div `
1255
- border-radius: 8px;
1256
- border-width: 1px;
1257
- border-style: dashed;
1258
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1259
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1260
- cursor: copy;
1252
+ };
1253
+
1254
+ const Dropzone = styled.div `
1255
+ border-radius: 8px;
1256
+ border-width: 1px;
1257
+ border-style: dashed;
1258
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1259
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1260
+ cursor: copy;
1261
1261
  `;
1262
1262
  Dropzone.defaultProps = { theme: EditableTheme };
1263
- const IconWrapper$1 = styled.div `
1264
- width: 80px;
1265
- height: 80px;
1266
- border-radius: 40px;
1267
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1268
- display: flex;
1269
- align-items: center;
1270
- justify-content: center;
1271
- `;
1272
- const StyledIcon$3 = styled(Icon) `
1273
- width: 40px !important;
1274
- height: 40px !important;
1275
-
1276
- > path {
1277
- fill: ${Colors.GRAY.Hex} !important;
1278
- }
1279
- `;
1280
- const ClickZone = styled.div `
1281
- margin: 40px 20px;
1282
- display: flex;
1283
- flex-direction: column;
1284
- align-items: center;
1285
- gap: 16px;
1286
- `;
1287
- const Content = styled.div `
1288
- display: flex;
1289
- flex-direction: column;
1290
- align-items: center;
1291
- gap: 2px;
1292
- `;
1293
- const Files = styled.div `
1294
- display: flex;
1295
- flex-direction: column;
1296
- align-self: stretch;
1297
- gap: 10px;
1298
- margin: 20px;
1299
- `;
1300
- const File = styled.div `
1301
- display: flex;
1302
- padding: 10px;
1303
- align-items: center;
1304
- justify-content: space-between;
1305
- gap: 10px;
1306
- border-radius: 4px;
1307
- border: 1px solid #cccccc;
1308
- background: #ffffff;
1309
- `;
1310
- const Remove = styled(Icon) `
1311
- width: 24px;
1312
- height: 24px;
1313
- cursor: pointer;
1314
-
1315
- > path {
1316
- fill: ${Colors.RED.Hex} !important;
1317
- }
1263
+ const IconWrapper$1 = styled.div `
1264
+ width: 80px;
1265
+ height: 80px;
1266
+ border-radius: 40px;
1267
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1268
+ display: flex;
1269
+ align-items: center;
1270
+ justify-content: center;
1271
+ `;
1272
+ const StyledIcon$3 = styled(Icon) `
1273
+ width: 40px !important;
1274
+ height: 40px !important;
1275
+
1276
+ > path {
1277
+ fill: ${Colors.GRAY.Hex} !important;
1278
+ }
1279
+ `;
1280
+ const ClickZone = styled.div `
1281
+ margin: 40px 20px;
1282
+ display: flex;
1283
+ flex-direction: column;
1284
+ align-items: center;
1285
+ gap: 16px;
1286
+ `;
1287
+ const Content = styled.div `
1288
+ display: flex;
1289
+ flex-direction: column;
1290
+ align-items: center;
1291
+ gap: 2px;
1292
+ `;
1293
+ const Files = styled.div `
1294
+ display: flex;
1295
+ flex-direction: column;
1296
+ align-self: stretch;
1297
+ gap: 10px;
1298
+ margin: 20px;
1299
+ `;
1300
+ const File = styled.div `
1301
+ display: flex;
1302
+ padding: 10px;
1303
+ align-items: center;
1304
+ justify-content: space-between;
1305
+ gap: 10px;
1306
+ border-radius: 4px;
1307
+ border: 1px solid #cccccc;
1308
+ background: #ffffff;
1309
+ `;
1310
+ const Remove = styled(Icon) `
1311
+ width: 24px;
1312
+ height: 24px;
1313
+ cursor: pointer;
1314
+
1315
+ > path {
1316
+ fill: ${Colors.RED.Hex} !important;
1317
+ }
1318
1318
  `;
1319
1319
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, message, validateFile, }) => {
1320
1320
  const inputRef = React.useRef(null);
@@ -1425,8 +1425,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
1425
1425
  React.createElement(Content, null,
1426
1426
  React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
1427
1427
  message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
1428
- };
1429
-
1428
+ };
1429
+
1430
1430
  const getAgesFromDob = (dob) => {
1431
1431
  let calculated_current_age = null;
1432
1432
  let calculated_nearest_age = null;
@@ -1499,8 +1499,8 @@ const formatAsSsn = (number) => {
1499
1499
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1500
1500
  }
1501
1501
  return formatted_value;
1502
- };
1503
-
1502
+ };
1503
+
1504
1504
  const StyledInput = styled.input `
1505
1505
  border: none !important;
1506
1506
  background: none !important;
@@ -1522,6 +1522,35 @@ const StyledInput = styled.input `
1522
1522
  display: block;
1523
1523
  width: 100%;
1524
1524
  `;
1525
+ const StyledTextArea = styled.textarea `
1526
+ border: none !important;
1527
+ background: none !important;
1528
+ overflow-y:scroll !important;
1529
+ font-size: 14px;
1530
+ font-weight: 400;
1531
+ height: ${props => props.$height || 'auto'};
1532
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
1533
+ line-height: 1.28em;
1534
+ color: ${({ $invalid }) => ($invalid ? '#ff0000' : '#000000')};
1535
+ position: relative;
1536
+ padding: 10px;
1537
+ opacity: 1;
1538
+ box-shadow: none;
1539
+ outline: none;
1540
+ margin: 0px;
1541
+ text-indent: 0px;
1542
+ --webkit-appearance: none;
1543
+ text-wrap: break-word;
1544
+ box-sizing: border-box;
1545
+ display: block;
1546
+ width: 100%;
1547
+ ${({ $readOnly }) => $readOnly &&
1548
+ `
1549
+ background-color: #f0f0f0;
1550
+ color: #999999;
1551
+ overflow-y: scroll;
1552
+ `}
1553
+ `;
1525
1554
  const StyledSuffix = styled.div `
1526
1555
  box-sizing: border-box;
1527
1556
  border-radius: 0px 4px 4px 0px;
@@ -1585,6 +1614,7 @@ const SuggestedSummary = styled.div `
1585
1614
  position: sticky;
1586
1615
  top: 0px;
1587
1616
  `;
1617
+ //styles for textarea
1588
1618
  const SuggestedValue = styled.div `
1589
1619
  cursor: pointer;
1590
1620
  padding: 8px 12px;
@@ -1647,8 +1677,8 @@ const Input$1 = (_a) => {
1647
1677
  if (format === 'ssn' && type !== 'password') {
1648
1678
  formatted_value = formatAsSsn(value);
1649
1679
  }
1650
- return (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
1651
- React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, max: max, maxLength: maxLength, min: min, onBlur: readOnly
1680
+ return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
1681
+ React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: readOnly
1652
1682
  ? e => e.preventDefault()
1653
1683
  : e => {
1654
1684
  if (onBlur)
@@ -1664,84 +1694,107 @@ const Input$1 = (_a) => {
1664
1694
  setShowOptions(true);
1665
1695
  if (onFocus)
1666
1696
  onFocus(e);
1667
- }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
1697
+ }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, value: formatted_value }, accessibleProps)),
1668
1698
  loading ? (React.createElement(Loader$1, null,
1669
1699
  React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
1670
1700
  showCharCount ? (React.createElement(CharacterCount, null,
1671
1701
  value.length,
1672
- maxLength ? ` / ${maxLength}` : null)) : null,
1673
- suffix && React.createElement(StyledSuffix, null, suffix),
1674
- show_options && (suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) ? (React.createElement(SuggestedValues, null,
1675
- React.createElement(SuggestedSummary, null,
1676
- suggestedValues.length,
1677
- " Results Match \"",
1678
- value,
1679
- "\""),
1680
- suggestedValues.map((s_value, i) => {
1681
- return (React.createElement(SuggestedValue, { key: i, onClick: () => {
1682
- handleInputChange({ target: { value: s_value } });
1683
- if (onSuggestedSelect)
1684
- onSuggestedSelect();
1685
- setShowOptions(false);
1686
- } }, s_value));
1687
- }))) : null));
1688
- };
1689
-
1690
- const Wrapper$7 = styled.a `
1691
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1692
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1693
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1694
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1695
- font-weight: 500;
1696
- font-style: normal;
1697
- text-decoration: 'none';
1698
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1699
- margin: 0px;
1700
- padding: 0px;
1701
- box-sizing: border-box;
1702
- cursor: pointer;
1702
+ maxLength ? ` / ${maxLength}` : null)) : null))
1703
+ : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
1704
+ React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, max: max, maxLength: maxLength, min: min, onBlur: readOnly
1705
+ ? e => e.preventDefault()
1706
+ : e => {
1707
+ if (onBlur)
1708
+ onBlur(e);
1709
+ // The blur was causing issues with the suggested select event
1710
+ // This makes sure the select if fired before the blur
1711
+ setTimeout(() => {
1712
+ setShowOptions(false);
1713
+ }, 100);
1714
+ }, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
1715
+ ? e => e.preventDefault()
1716
+ : e => {
1717
+ setShowOptions(true);
1718
+ if (onFocus)
1719
+ onFocus(e);
1720
+ }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
1721
+ loading ? (React.createElement(Loader$1, null,
1722
+ React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
1723
+ showCharCount ? (React.createElement(CharacterCount, null,
1724
+ value.length,
1725
+ maxLength ? ` / ${maxLength}` : null)) : null,
1726
+ suffix && React.createElement(StyledSuffix, null, suffix),
1727
+ show_options && (suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) ? (React.createElement(SuggestedValues, null,
1728
+ React.createElement(SuggestedSummary, null,
1729
+ suggestedValues.length,
1730
+ " Results Match \"",
1731
+ value,
1732
+ "\""),
1733
+ suggestedValues.map((s_value, i) => {
1734
+ return (React.createElement(SuggestedValue, { key: i, onClick: () => {
1735
+ handleInputChange({ target: { value: s_value } });
1736
+ if (onSuggestedSelect)
1737
+ onSuggestedSelect();
1738
+ setShowOptions(false);
1739
+ } }, s_value));
1740
+ }))) : null));
1741
+ };
1742
+
1743
+ const Wrapper$7 = styled.a `
1744
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1745
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1746
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1747
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1748
+ font-weight: 500;
1749
+ font-style: normal;
1750
+ text-decoration: 'none';
1751
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1752
+ margin: 0px;
1753
+ padding: 0px;
1754
+ box-sizing: border-box;
1755
+ cursor: pointer;
1703
1756
  `;
1704
1757
  Wrapper$7.defaultProps = { theme: EditableTheme };
1705
1758
  const Link = (_a) => {
1706
1759
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1707
1760
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1708
- };
1709
-
1710
- const dash = styled.keyframes `
1711
- 0% {
1712
- stroke-dasharray: 1, 160;
1713
- stroke-dashoffset: 0;
1714
- }
1715
- 50% {
1716
- stroke-dasharray: 80, 160;
1717
- stroke-dashoffset: -32;
1718
- }
1719
- 100% {
1720
- stroke-dasharray: 80, 160;
1721
- stroke-dashoffset: -124;
1722
- }
1723
- `;
1724
- const Spinner = styled.svg `
1725
- z-index: 2;
1726
- position: absolute;
1727
- top: 50%;
1728
- left: 50%;
1729
- transform: translate(-50%, -50%);
1730
- margin: 0 auto;
1731
- width: 40px;
1732
- height: 40px;
1733
- `;
1734
- const Path = styled.path `
1735
- stroke: #0193d7;
1736
- stroke-linecap: round;
1737
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1738
- animation: ${dash} 1.1s ease-in-out infinite;
1761
+ };
1762
+
1763
+ const dash = styled.keyframes `
1764
+ 0% {
1765
+ stroke-dasharray: 1, 160;
1766
+ stroke-dashoffset: 0;
1767
+ }
1768
+ 50% {
1769
+ stroke-dasharray: 80, 160;
1770
+ stroke-dashoffset: -32;
1771
+ }
1772
+ 100% {
1773
+ stroke-dasharray: 80, 160;
1774
+ stroke-dashoffset: -124;
1775
+ }
1776
+ `;
1777
+ const Spinner = styled.svg `
1778
+ z-index: 2;
1779
+ position: absolute;
1780
+ top: 50%;
1781
+ left: 50%;
1782
+ transform: translate(-50%, -50%);
1783
+ margin: 0 auto;
1784
+ width: 40px;
1785
+ height: 40px;
1786
+ `;
1787
+ const Path = styled.path `
1788
+ stroke: #0193d7;
1789
+ stroke-linecap: round;
1790
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1791
+ animation: ${dash} 1.1s ease-in-out infinite;
1739
1792
  `;
1740
1793
  const Loader = () => {
1741
1794
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1742
1795
  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' })));
1743
- };
1744
-
1796
+ };
1797
+
1745
1798
  const Steps = styled.div `
1746
1799
  padding: 20px;
1747
1800
  border-bottom: 1px solid #e7e6e6;
@@ -1798,75 +1851,75 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
1798
1851
  step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
1799
1852
  React.createElement(StepLabel, null, step.label))));
1800
1853
  })));
1801
- };
1802
-
1803
- const Wrapper$6 = styled.div `
1804
- position: fixed;
1805
- top: 0;
1806
- right: 0;
1807
- bottom: 0;
1808
- left: 0;
1809
- z-index: 9999;
1810
- background: rgba(0, 0, 0, 0.8);
1811
- display: flex;
1812
- align-items: center;
1813
- justify-content: center;
1814
- `;
1815
- const Container$1 = styled.dialog `
1816
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
1817
- max-width: calc(100vw - 80px);
1818
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
1819
- max-height: calc(100vh - 80px);
1820
- border-radius: 8px;
1821
- overflow: hidden;
1822
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1823
- outline: none;
1824
- border: none;
1825
- position: relative;
1826
- padding: 0px;
1827
- box-sizing: border-box;
1828
- display: flex;
1829
- flex-direction: column;
1830
- `;
1831
- const Header$1 = styled.div `
1832
- flex-shrink: 0;
1833
- padding: 20px;
1834
- border-bottom: 1px solid #e7e6e6;
1835
- display: flex;
1836
- align-items: center;
1837
- background: #ffffff;
1838
- box-sizing: border-box;
1839
- `;
1840
- const Close = styled.div `
1841
- margin-left: auto;
1842
- display: flex;
1843
- align-items: center;
1844
- padding-left: 20px;
1845
- cursor: pointer;
1846
- `;
1847
- const CloseMsg = styled.span `
1848
- font-size: ${FontSizes.SMALL};
1849
- font-weight: 400;
1850
- font-family: ${FontStyles.DEFAULT};
1851
- line-height: 1em;
1852
- color: ${Colors.MEDIUM_GRAY.Hex};
1853
- `;
1854
- const ContentWrapper = styled.div `
1855
- overflow-x: hidden;
1856
- overflow-y: auto;
1857
- background: #ffffff;
1858
- flex: 1;
1859
- box-sizing: border-box;
1860
- `;
1861
- const ButtonBar = styled.div `
1862
- flex-shrink: 0;
1863
- background: #ffffff;
1864
- padding: 20px;
1865
- border-top: 1px solid #e7e6e6;
1866
- display: flex;
1867
- align-items: center;
1868
- justify-self: flex-end;
1869
- box-sizing: border-box;
1854
+ };
1855
+
1856
+ const Wrapper$6 = styled.div `
1857
+ position: fixed;
1858
+ top: 0;
1859
+ right: 0;
1860
+ bottom: 0;
1861
+ left: 0;
1862
+ z-index: 9999;
1863
+ background: rgba(0, 0, 0, 0.8);
1864
+ display: flex;
1865
+ align-items: center;
1866
+ justify-content: center;
1867
+ `;
1868
+ const Container$1 = styled.dialog `
1869
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
1870
+ max-width: calc(100vw - 80px);
1871
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
1872
+ max-height: calc(100vh - 80px);
1873
+ border-radius: 8px;
1874
+ overflow: hidden;
1875
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1876
+ outline: none;
1877
+ border: none;
1878
+ position: relative;
1879
+ padding: 0px;
1880
+ box-sizing: border-box;
1881
+ display: flex;
1882
+ flex-direction: column;
1883
+ `;
1884
+ const Header$1 = styled.div `
1885
+ flex-shrink: 0;
1886
+ padding: 20px;
1887
+ border-bottom: 1px solid #e7e6e6;
1888
+ display: flex;
1889
+ align-items: center;
1890
+ background: #ffffff;
1891
+ box-sizing: border-box;
1892
+ `;
1893
+ const Close = styled.div `
1894
+ margin-left: auto;
1895
+ display: flex;
1896
+ align-items: center;
1897
+ padding-left: 20px;
1898
+ cursor: pointer;
1899
+ `;
1900
+ const CloseMsg = styled.span `
1901
+ font-size: ${FontSizes.SMALL};
1902
+ font-weight: 400;
1903
+ font-family: ${FontStyles.DEFAULT};
1904
+ line-height: 1em;
1905
+ color: ${Colors.MEDIUM_GRAY.Hex};
1906
+ `;
1907
+ const ContentWrapper = styled.div `
1908
+ overflow-x: hidden;
1909
+ overflow-y: auto;
1910
+ background: #ffffff;
1911
+ flex: 1;
1912
+ box-sizing: border-box;
1913
+ `;
1914
+ const ButtonBar = styled.div `
1915
+ flex-shrink: 0;
1916
+ background: #ffffff;
1917
+ padding: 20px;
1918
+ border-top: 1px solid #e7e6e6;
1919
+ display: flex;
1920
+ align-items: center;
1921
+ justify-self: flex-end;
1922
+ box-sizing: border-box;
1870
1923
  `;
1871
1924
  const Modal = (_a) => {
1872
1925
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
@@ -1899,21 +1952,21 @@ const Modal = (_a) => {
1899
1952
  } },
1900
1953
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1901
1954
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
1902
- };
1903
-
1904
- const Wrapper$5 = styled.div `
1905
- position: relative;
1906
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1907
- `;
1908
- const Trigger = styled.div `
1909
- box-sizing: border-box;
1910
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
1911
- height: 40px;
1912
- padding: 0 10px;
1913
- position: relative;
1914
- cursor: pointer;
1915
- border-width: 1px;
1916
- border-style: solid;
1955
+ };
1956
+
1957
+ const Wrapper$5 = styled.div `
1958
+ position: relative;
1959
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1960
+ `;
1961
+ const Trigger = styled.div `
1962
+ box-sizing: border-box;
1963
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
1964
+ height: 40px;
1965
+ padding: 0 10px;
1966
+ position: relative;
1967
+ cursor: pointer;
1968
+ border-width: 1px;
1969
+ border-style: solid;
1917
1970
  border-color: ${props => {
1918
1971
  if (props.$invalid) {
1919
1972
  return Colors.RED.Hex;
@@ -1924,50 +1977,50 @@ const Trigger = styled.div `
1924
1977
  else {
1925
1978
  return '#cccccc';
1926
1979
  }
1927
- }};
1928
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1929
- background-image: none;
1930
- display: flex;
1931
- width: 100%;
1932
- align-items: center;
1933
- justify-content: space-between;
1934
- z-index: 1;
1980
+ }};
1981
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1982
+ background-image: none;
1983
+ display: flex;
1984
+ width: 100%;
1985
+ align-items: center;
1986
+ justify-content: space-between;
1987
+ z-index: 1;
1935
1988
  `;
1936
1989
  Trigger.defaultProps = { theme: EditableTheme };
1937
- const Value = styled.div `
1938
- color: ${Colors.BLACK.Hex};
1939
- font-family: ${FontStyles.DEFAULT};
1940
- font-size: ${FontSizes.DEFAULT};
1941
- font-weight: 400;
1942
- line-height: 2.9em;
1943
- overflow: hidden;
1944
- text-overflow: ellipsis;
1945
- white-space: nowrap;
1946
- width: 100%;
1947
- `;
1948
- const Options = styled.div `
1949
- background: #fff;
1950
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1951
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1952
- border-radius: 0px 0px 4px 4px;
1953
- border-style: solid;
1954
- border-top: none;
1955
- border-width: 1px;
1956
- left: 0;
1957
- position: absolute;
1958
- right: 0;
1959
- z-index: 10;
1960
- max-height: 220px;
1961
- overflow: auto;
1990
+ const Value = styled.div `
1991
+ color: ${Colors.BLACK.Hex};
1992
+ font-family: ${FontStyles.DEFAULT};
1993
+ font-size: ${FontSizes.DEFAULT};
1994
+ font-weight: 400;
1995
+ line-height: 2.9em;
1996
+ overflow: hidden;
1997
+ text-overflow: ellipsis;
1998
+ white-space: nowrap;
1999
+ width: 100%;
2000
+ `;
2001
+ const Options = styled.div `
2002
+ background: #fff;
2003
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2004
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2005
+ border-radius: 0px 0px 4px 4px;
2006
+ border-style: solid;
2007
+ border-top: none;
2008
+ border-width: 1px;
2009
+ left: 0;
2010
+ position: absolute;
2011
+ right: 0;
2012
+ z-index: 10;
2013
+ max-height: 220px;
2014
+ overflow: auto;
1962
2015
  `;
1963
2016
  Options.defaultProps = { theme: EditableTheme };
1964
- const Scrim = styled.div `
1965
- bottom: 0;
1966
- left: 0;
1967
- position: fixed;
1968
- right: 0;
1969
- top: 0;
1970
- z-index: 9;
2017
+ const Scrim = styled.div `
2018
+ bottom: 0;
2019
+ left: 0;
2020
+ position: fixed;
2021
+ right: 0;
2022
+ top: 0;
2023
+ z-index: 9;
1971
2024
  `;
1972
2025
  const MultiSelect = (_a) => {
1973
2026
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
@@ -1982,37 +2035,37 @@ const MultiSelect = (_a) => {
1982
2035
  showOptions ? (React.createElement(Options, null,
1983
2036
  React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
1984
2037
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
1985
- };
1986
-
1987
- const Wrapper$4 = styled.div `
1988
- display: flex;
1989
- padding: 16px 30px;
1990
- align-items: center;
1991
- gap: 20px;
1992
- align-self: stretch;
1993
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
1994
- `;
1995
- const Title = styled.div `
1996
- display: flex;
1997
- align-items: center;
1998
- gap: 20px;
1999
- `;
2000
- const Info = styled.div `
2001
- display: flex;
2002
- flex-direction: column;
2003
- align-items: flex-start;
2004
- gap: 4px;
2005
- flex: 1 0 0;
2006
- `;
2007
- const Breadcrumbs = styled.div `
2008
- display: flex;
2009
- align-items: center;
2010
- gap: 4px;
2011
- `;
2012
- const Actions = styled.div `
2013
- display: flex;
2014
- align-items: center;
2015
- gap: 8px;
2038
+ };
2039
+
2040
+ const Wrapper$4 = styled.div `
2041
+ display: flex;
2042
+ padding: 16px 30px;
2043
+ align-items: center;
2044
+ gap: 20px;
2045
+ align-self: stretch;
2046
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2047
+ `;
2048
+ const Title = styled.div `
2049
+ display: flex;
2050
+ align-items: center;
2051
+ gap: 20px;
2052
+ `;
2053
+ const Info = styled.div `
2054
+ display: flex;
2055
+ flex-direction: column;
2056
+ align-items: flex-start;
2057
+ gap: 4px;
2058
+ flex: 1 0 0;
2059
+ `;
2060
+ const Breadcrumbs = styled.div `
2061
+ display: flex;
2062
+ align-items: center;
2063
+ gap: 4px;
2064
+ `;
2065
+ const Actions = styled.div `
2066
+ display: flex;
2067
+ align-items: center;
2068
+ gap: 8px;
2016
2069
  `;
2017
2070
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2018
2071
  const { format = 'primary', menuItems = [], label = '', } = buttonMenu || {};
@@ -2032,13 +2085,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2032
2085
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2033
2086
  }),
2034
2087
  menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
2035
- };
2036
-
2037
- const Wrapper$3 = styled.nav `
2038
- box-sizing: border-box;
2039
- display: flex;
2040
- align-items: center;
2041
- column-gap: 10px;
2088
+ };
2089
+
2090
+ const Wrapper$3 = styled.nav `
2091
+ box-sizing: border-box;
2092
+ display: flex;
2093
+ align-items: center;
2094
+ column-gap: 10px;
2042
2095
  `;
2043
2096
  const Pagination = (_a) => {
2044
2097
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2067,8 +2120,8 @@ const Pagination = (_a) => {
2067
2120
  value: `${p}`,
2068
2121
  })), value: `${currentPage}` }),
2069
2122
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
2070
- };
2071
-
2123
+ };
2124
+
2072
2125
  const Wrapper$2 = styled.label `
2073
2126
  border-radius: 4px;
2074
2127
  padding: 4px 0px 4px 6px;
@@ -2152,77 +2205,77 @@ const Radio = (_a) => {
2152
2205
  React.createElement(Label, null,
2153
2206
  children,
2154
2207
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2155
- };
2156
-
2208
+ };
2209
+
2157
2210
  const RadioList = (_a) => {
2158
2211
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2159
2212
  return (React.createElement(React.Fragment, null, options.map((option) => {
2160
2213
  const label = option.label || option.value;
2161
2214
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2162
2215
  })));
2163
- };
2164
-
2165
- const StyledTable = styled.table `
2166
- width: 100%;
2167
- margin-top: 1px;
2168
- table-layout: ${props => props.$tableLayout || 'auto'};
2169
- border-collapse: collapse;
2170
- text-indent: 0px;
2171
- border-spacing: 0px;
2172
- border-color: none;
2173
- box-sizing: border-box;
2174
- `;
2175
- const Header = styled.th `
2176
- padding: 12px !important;
2177
- text-align: left;
2178
- font-weight: 500;
2179
- border-bottom: 1px solid #e5e5e5;
2180
- border-top: 1px solid #e5e5e5;
2181
- text-transform: uppercase;
2182
- font-size: 12px;
2183
- font-family: ${FontStyles.DEFAULT};
2184
- letter-spacing: 1px;
2185
- white-space: nowrap;
2186
- line-height: 1;
2187
- position: relative;
2188
- box-sizing: border-box;
2189
- width: ${props => props.$width || 'auto'};
2190
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2191
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2216
+ };
2217
+
2218
+ const StyledTable = styled.table `
2219
+ width: 100%;
2220
+ margin-top: 1px;
2221
+ table-layout: ${props => props.$tableLayout || 'auto'};
2222
+ border-collapse: collapse;
2223
+ text-indent: 0px;
2224
+ border-spacing: 0px;
2225
+ border-color: none;
2226
+ box-sizing: border-box;
2227
+ `;
2228
+ const Header = styled.th `
2229
+ padding: 12px !important;
2230
+ text-align: left;
2231
+ font-weight: 500;
2232
+ border-bottom: 1px solid #e5e5e5;
2233
+ border-top: 1px solid #e5e5e5;
2234
+ text-transform: uppercase;
2235
+ font-size: 12px;
2236
+ font-family: ${FontStyles.DEFAULT};
2237
+ letter-spacing: 1px;
2238
+ white-space: nowrap;
2239
+ line-height: 1;
2240
+ position: relative;
2241
+ box-sizing: border-box;
2242
+ width: ${props => props.$width || 'auto'};
2243
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2244
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2192
2245
  `;
2193
2246
  Header.defaultProps = { theme: EditableTheme };
2194
- const Row = styled.tr `
2195
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2196
- transition: all 0.2s;
2197
- background-color: ${props => props.$bgColor};
2198
- box-sizing: border-box;
2199
- &:hover {
2200
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2201
- }
2247
+ const Row = styled.tr `
2248
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2249
+ transition: all 0.2s;
2250
+ background-color: ${props => props.$bgColor};
2251
+ box-sizing: border-box;
2252
+ &:hover {
2253
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2254
+ }
2202
2255
  `;
2203
2256
  Row.defaultProps = { theme: EditableTheme };
2204
- const Column = styled.td `
2205
- padding: 16px 12px !important;
2206
- font-size: ${FontSizes.DEFAULT} !important;
2207
- font-weight: 400 !important;
2208
- font-family: ${FontStyles.DEFAULT};
2209
- border: none !important;
2210
- word-break: break-word;
2211
- line-height: 1.4em;
2212
- box-sizing: border-box;
2213
- text-align: ${props => props.$align || 'left'};
2214
- width: ${props => props.$width || 'auto'};
2215
- `;
2216
- const IconWrapper = styled.span `
2217
- position: absolute;
2218
- top: 50%;
2219
- transform: translateY(-50%);
2220
- margin-left: 2px;
2221
- `;
2222
- const StyledIcon$1 = styled(Icon) `
2223
- > path {
2224
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2225
- }
2257
+ const Column = styled.td `
2258
+ padding: 16px 12px !important;
2259
+ font-size: ${FontSizes.DEFAULT} !important;
2260
+ font-weight: 400 !important;
2261
+ font-family: ${FontStyles.DEFAULT};
2262
+ border: none !important;
2263
+ word-break: break-word;
2264
+ line-height: 1.4em;
2265
+ box-sizing: border-box;
2266
+ text-align: ${props => props.$align || 'left'};
2267
+ width: ${props => props.$width || 'auto'};
2268
+ `;
2269
+ const IconWrapper = styled.span `
2270
+ position: absolute;
2271
+ top: 50%;
2272
+ transform: translateY(-50%);
2273
+ margin-left: 2px;
2274
+ `;
2275
+ const StyledIcon$1 = styled(Icon) `
2276
+ > path {
2277
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2278
+ }
2226
2279
  `;
2227
2280
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2228
2281
  const Table = (_a) => {
@@ -2240,55 +2293,55 @@ const Table = (_a) => {
2240
2293
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2241
2294
  })));
2242
2295
  }))) : null));
2243
- };
2244
-
2245
- const Wrapper$1 = styled.div `
2246
- display: flex;
2247
- box-sizing: border-box;
2248
- align-items: flex-end;
2249
- border-top: 1px solid #e5e5e5;
2250
- border-bottom: 1px solid #e5e5e5;
2251
- flex-shrink: 0;
2252
- align-self: stretch;
2253
- padding: 0;
2254
- margin: 0;
2255
- `;
2256
- const Tab = styled.div `
2257
- display: flex;
2258
- align-items: center;
2259
- gap: 6px;
2260
- font-size: ${FontSizes.DEFAULT};
2261
- font-family: ${FontStyles.DEFAULT};
2262
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2263
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2264
- line-height: 1em;
2265
- padding: 16px 30px 12px;
2266
- margin: 0 0 -1px 0;
2267
- border-bottom-width: 4px;
2268
- border-bottom-style: solid;
2269
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2270
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2271
- box-sizing: border-box;
2272
- &:hover {
2273
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2274
- font-weight: 500;
2275
- }
2296
+ };
2297
+
2298
+ const Wrapper$1 = styled.div `
2299
+ display: flex;
2300
+ box-sizing: border-box;
2301
+ align-items: flex-end;
2302
+ border-top: 1px solid #e5e5e5;
2303
+ border-bottom: 1px solid #e5e5e5;
2304
+ flex-shrink: 0;
2305
+ align-self: stretch;
2306
+ padding: 0;
2307
+ margin: 0;
2308
+ `;
2309
+ const Tab = styled.div `
2310
+ display: flex;
2311
+ align-items: center;
2312
+ gap: 6px;
2313
+ font-size: ${FontSizes.DEFAULT};
2314
+ font-family: ${FontStyles.DEFAULT};
2315
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2316
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2317
+ line-height: 1em;
2318
+ padding: 16px 30px 12px;
2319
+ margin: 0 0 -1px 0;
2320
+ border-bottom-width: 4px;
2321
+ border-bottom-style: solid;
2322
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2323
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2324
+ box-sizing: border-box;
2325
+ &:hover {
2326
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2327
+ font-weight: 500;
2328
+ }
2276
2329
  `;
2277
2330
  Tab.defaultProps = { theme: EditableTheme };
2278
- const Badge = styled.div `
2279
- display: flex;
2280
- width: 18px;
2281
- height: 18px;
2282
- justify-content: center;
2283
- align-items: center;
2284
- border-radius: 9px;
2285
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2286
- color: #fff;
2287
- font-family: ${FontStyles.DEFAULT};
2288
- font-size: 12px;
2289
- font-weight: 500;
2290
- line-height: 1;
2291
- letter-spacing: 1px;
2331
+ const Badge = styled.div `
2332
+ display: flex;
2333
+ width: 18px;
2334
+ height: 18px;
2335
+ justify-content: center;
2336
+ align-items: center;
2337
+ border-radius: 9px;
2338
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2339
+ color: #fff;
2340
+ font-family: ${FontStyles.DEFAULT};
2341
+ font-size: 12px;
2342
+ font-weight: 500;
2343
+ line-height: 1;
2344
+ letter-spacing: 1px;
2292
2345
  `;
2293
2346
  Badge.defaultProps = { theme: EditableTheme };
2294
2347
  const Tabs = (_a) => {
@@ -2300,29 +2353,29 @@ const Tabs = (_a) => {
2300
2353
  label));
2301
2354
  })));
2302
2355
  };
2303
- Tabs.defaultProps = {};
2304
-
2305
- const Track = styled.div `
2306
- height: 24px;
2307
- border-radius: 12px;
2308
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2309
- display: flex;
2310
- align-items: center;
2311
- cursor: pointer;
2312
- width: 40px;
2313
- padding: 2px;
2314
- box-sizing: border-box;
2315
- `;
2316
- const Handle = styled.div `
2317
- width: 20px;
2318
- height: 20px;
2319
- border-radius: 10px;
2320
- background: #ffffff;
2321
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2322
- display: flex;
2323
- align-items: center;
2324
- justify-content: center;
2325
- box-sizing: border-box;
2356
+ Tabs.defaultProps = {};
2357
+
2358
+ const Track = styled.div `
2359
+ height: 24px;
2360
+ border-radius: 12px;
2361
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2362
+ display: flex;
2363
+ align-items: center;
2364
+ cursor: pointer;
2365
+ width: 40px;
2366
+ padding: 2px;
2367
+ box-sizing: border-box;
2368
+ `;
2369
+ const Handle = styled.div `
2370
+ width: 20px;
2371
+ height: 20px;
2372
+ border-radius: 10px;
2373
+ background: #ffffff;
2374
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2375
+ display: flex;
2376
+ align-items: center;
2377
+ justify-content: center;
2378
+ box-sizing: border-box;
2326
2379
  `;
2327
2380
  const Toggle = (_a) => {
2328
2381
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2331,32 +2384,32 @@ const Toggle = (_a) => {
2331
2384
  React.createElement(Handle, { "$on": on },
2332
2385
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2333
2386
  };
2334
- Toggle.defaultProps = {};
2335
-
2336
- const Container = styled.div `
2337
- width: 100%;
2338
- padding: 40px auto;
2339
- gap: 20px;
2340
- display: flex;
2341
- flex-direction: column;
2342
- justify-items: center;
2343
- align-items: center;
2344
- `;
2345
- const Wrapper = styled.div `
2346
- gap: 10px;
2347
- display: flex;
2348
- flex-direction: column;
2349
- justify-items: center;
2350
- align-items: center;
2351
- `;
2352
- const StyledIcon = styled.div `
2353
- display: flex;
2354
- align-items: center;
2355
- justify-content: center;
2356
- width: 80px;
2357
- height: 80px;
2358
- border-radius: 40px;
2359
- background: #f5f5f5;
2387
+ Toggle.defaultProps = {};
2388
+
2389
+ const Container = styled.div `
2390
+ width: 100%;
2391
+ padding: 40px auto;
2392
+ gap: 20px;
2393
+ display: flex;
2394
+ flex-direction: column;
2395
+ justify-items: center;
2396
+ align-items: center;
2397
+ `;
2398
+ const Wrapper = styled.div `
2399
+ gap: 10px;
2400
+ display: flex;
2401
+ flex-direction: column;
2402
+ justify-items: center;
2403
+ align-items: center;
2404
+ `;
2405
+ const StyledIcon = styled.div `
2406
+ display: flex;
2407
+ align-items: center;
2408
+ justify-content: center;
2409
+ width: 80px;
2410
+ height: 80px;
2411
+ border-radius: 40px;
2412
+ background: #f5f5f5;
2360
2413
  `;
2361
2414
  const ZeroState = (_a) => {
2362
2415
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2367,53 +2420,53 @@ const ZeroState = (_a) => {
2367
2420
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2368
2421
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2369
2422
  action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
2370
- };
2371
-
2372
- exports.Accordion = Accordion;
2373
- exports.ActionDialog = ActionDialog;
2374
- exports.Alert = Alert;
2375
- exports.AppHeader = AppHeader;
2376
- exports.AppMenu = AppMenu;
2377
- exports.BulkActionBar = BulkActionBar;
2378
- exports.Button = Button;
2379
- exports.ButtonMenu = ButtonMenu;
2380
- exports.Checkbox = Checkbox;
2381
- exports.Checklist = Checklist;
2382
- exports.Colors = Colors;
2383
- exports.Copy = Copy;
2384
- exports.DatePicker = DatePicker;
2385
- exports.Drawer = Drawer;
2386
- exports.EditableTheme = EditableTheme;
2387
- exports.Field = Field;
2388
- exports.FieldGroup = FieldGroup;
2389
- exports.FileUpload = FileUpload;
2390
- exports.FontSizes = FontSizes;
2391
- exports.FontStyles = FontStyles;
2392
- exports.Heading = Heading;
2393
- exports.Input = Input$1;
2394
- exports.Link = Link;
2395
- exports.Loader = Loader;
2396
- exports.Logo = Logo;
2397
- exports.Modal = Modal;
2398
- exports.MoreMenu = MoreMenu;
2399
- exports.MultiSelect = MultiSelect;
2400
- exports.PageHeader = PageHeader;
2401
- exports.Pagination = Pagination;
2402
- exports.ProgressBar = ProgressBar;
2403
- exports.Radio = Radio;
2404
- exports.RadioList = RadioList;
2405
- exports.Select = Select;
2406
- exports.Table = Table;
2407
- exports.Tabs = Tabs;
2408
- exports.Tag = Tag;
2409
- exports.Toggle = Toggle;
2410
- exports.Tooltip = Tooltip;
2411
- exports.ZeroState = ZeroState;
2412
- exports.formatAsPhone = formatAsPhone;
2413
- exports.formatAsSsn = formatAsSsn;
2414
- exports.getAgesFromDob = getAgesFromDob;
2415
- exports.getDaysForMonth = getDaysForMonth;
2416
- exports.getYears = getYears;
2417
- exports.validateEmail = validateEmail;
2418
- exports.validatePhone = validatePhone;
2419
- //# sourceMappingURL=index.js.map
2423
+ };
2424
+
2425
+ exports.Accordion = Accordion;
2426
+ exports.ActionDialog = ActionDialog;
2427
+ exports.Alert = Alert;
2428
+ exports.AppHeader = AppHeader;
2429
+ exports.AppMenu = AppMenu;
2430
+ exports.BulkActionBar = BulkActionBar;
2431
+ exports.Button = Button;
2432
+ exports.ButtonMenu = ButtonMenu;
2433
+ exports.Checkbox = Checkbox;
2434
+ exports.Checklist = Checklist;
2435
+ exports.Colors = Colors;
2436
+ exports.Copy = Copy;
2437
+ exports.DatePicker = DatePicker;
2438
+ exports.Drawer = Drawer;
2439
+ exports.EditableTheme = EditableTheme;
2440
+ exports.Field = Field;
2441
+ exports.FieldGroup = FieldGroup;
2442
+ exports.FileUpload = FileUpload;
2443
+ exports.FontSizes = FontSizes;
2444
+ exports.FontStyles = FontStyles;
2445
+ exports.Heading = Heading;
2446
+ exports.Input = Input$1;
2447
+ exports.Link = Link;
2448
+ exports.Loader = Loader;
2449
+ exports.Logo = Logo;
2450
+ exports.Modal = Modal;
2451
+ exports.MoreMenu = MoreMenu;
2452
+ exports.MultiSelect = MultiSelect;
2453
+ exports.PageHeader = PageHeader;
2454
+ exports.Pagination = Pagination;
2455
+ exports.ProgressBar = ProgressBar;
2456
+ exports.Radio = Radio;
2457
+ exports.RadioList = RadioList;
2458
+ exports.Select = Select;
2459
+ exports.Table = Table;
2460
+ exports.Tabs = Tabs;
2461
+ exports.Tag = Tag;
2462
+ exports.Toggle = Toggle;
2463
+ exports.Tooltip = Tooltip;
2464
+ exports.ZeroState = ZeroState;
2465
+ exports.formatAsPhone = formatAsPhone;
2466
+ exports.formatAsSsn = formatAsSsn;
2467
+ exports.getAgesFromDob = getAgesFromDob;
2468
+ exports.getDaysForMonth = getDaysForMonth;
2469
+ exports.getYears = getYears;
2470
+ exports.validateEmail = validateEmail;
2471
+ exports.validatePhone = validatePhone;
2472
+ //# sourceMappingURL=index.js.map