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