@hexure/ui 1.13.4 → 1.13.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/index.js +1541 -1531
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/MoreMenu/MoreMenu.d.ts +1 -0
  4. package/dist/esm/index.js +1493 -1483
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/types/components/MoreMenu/MoreMenu.d.ts +1 -0
  7. package/dist/index.d.ts +82 -81
  8. package/package.json +86 -85
package/dist/cjs/index.js CHANGED
@@ -1,13 +1,13 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var styled = require('styled-components');
5
- var Icon = require('@mdi/react');
6
- var js = require('@mdi/js');
7
- var dayjs = require('dayjs');
8
- var Numeral = require('numeral');
9
- var Moment = require('moment');
10
-
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var styled = require('styled-components');
5
+ var Icon = require('@mdi/react');
6
+ var js = require('@mdi/js');
7
+ var dayjs = require('dayjs');
8
+ var Numeral = require('numeral');
9
+ var Moment = require('moment');
10
+
11
11
  /******************************************************************************
12
12
  Copyright (c) Microsoft Corporation.
13
13
 
@@ -21,22 +21,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
21
21
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
22
22
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
23
23
  PERFORMANCE OF THIS SOFTWARE.
24
- ***************************************************************************** */
25
- /* global Reflect, Promise, SuppressedError, Symbol */
26
-
27
- function __rest(s, e) {
28
- var t = {};
29
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
30
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
32
- }
33
- return t;
34
- }
35
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
36
- var e = new Error(message);
37
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
38
- };
39
-
24
+ ***************************************************************************** */
25
+ /* global Reflect, Promise, SuppressedError, Symbol */
26
+
27
+ function __rest(s, e) {
28
+ var t = {};
29
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
30
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
32
+ }
33
+ return t;
34
+ }
35
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
36
+ var e = new Error(message);
37
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
38
+ };
39
+
40
40
  const Colors = {
41
41
  PRIMARY: {
42
42
  Hex: '#0193D7',
@@ -85,26 +85,26 @@ const FontSizes = {
85
85
  };
86
86
  const EditableTheme = {
87
87
  PRIMARY_COLOR: Colors.PRIMARY,
88
- };
89
-
90
- const Header$3 = styled.div `
91
- display: flex;
92
- align-items: center;
93
- justify-content: space-between;
94
- box-sizing: border-box;
95
- background: #f5f5f5;
96
- border: 1px solid #e5e5e5;
97
- padding: 14px 20px;
98
- height: 50px;
99
- cursor: pointer;
100
- `;
101
- const Title$2 = styled.div `
102
- font-size: ${FontSizes.DEFAULT};
103
- font-weight: 400;
104
- color: ${Colors.BLACK.Hex};
105
- line-height: 1.6em;
106
- font-family: ${FontStyles.DEFAULT};
107
- box-sizing: border-box;
88
+ };
89
+
90
+ const Header$3 = styled.div `
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: space-between;
94
+ box-sizing: border-box;
95
+ background: #f5f5f5;
96
+ border: 1px solid #e5e5e5;
97
+ padding: 14px 20px;
98
+ height: 50px;
99
+ cursor: pointer;
100
+ `;
101
+ const Title$2 = styled.div `
102
+ font-size: ${FontSizes.DEFAULT};
103
+ font-weight: 400;
104
+ color: ${Colors.BLACK.Hex};
105
+ line-height: 1.6em;
106
+ font-family: ${FontStyles.DEFAULT};
107
+ box-sizing: border-box;
108
108
  `;
109
109
  const Accordion = (_a) => {
110
110
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -113,13 +113,13 @@ const Accordion = (_a) => {
113
113
  React.createElement(Title$2, null, title),
114
114
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
115
115
  open ? children : null));
116
- };
117
-
118
- const StyledButton = styled.button `
119
- height: ${props => (props.$small ? '30px' : '40px')};
120
- line-height: 1em;
121
- border-radius: ${props => (props.$small ? '15px' : '20px')};
122
- margin: ${props => props.$margin || '0px'};
116
+ };
117
+
118
+ const StyledButton = styled.button `
119
+ height: ${props => (props.$small ? '30px' : '40px')};
120
+ line-height: 1em;
121
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
122
+ margin: ${props => props.$margin || '0px'};
123
123
  padding: ${props => {
124
124
  if (props.$hasChildren) {
125
125
  if (props.$small) {
@@ -130,9 +130,9 @@ const StyledButton = styled.button `
130
130
  }
131
131
  }
132
132
  return '0px';
133
- }};
134
- outline: none;
135
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
133
+ }};
134
+ outline: none;
135
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
136
136
  width: ${props => {
137
137
  if (props.$hasChildren) {
138
138
  return 'auto';
@@ -141,53 +141,53 @@ const StyledButton = styled.button `
141
141
  return '30px';
142
142
  }
143
143
  return '40px';
144
- }};
145
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
150
- border-width: 1px;
151
- border-style: solid;
152
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
153
- box-sizing: border-box;
154
-
155
- &:active,
156
- &:focus,
157
- &:hover {
158
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
159
- }
160
- `;
161
- const Label$5 = styled.span `
162
- color: ${props => props.$content_color || '#fff'};
163
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
164
- font-family: ${FontStyles.DEFAULT};
165
- font-weight: 500;
166
- line-height: 1;
167
- `;
168
- const StyledIcon$6 = styled.span `
169
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
170
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
171
- display: flex;
172
- align-items: center;
173
- box-sizing: border-box;
174
- `;
175
- const Badge$1 = styled.span `
176
- width: ${props => (props.$small ? '20px' : '24px')};
177
- height: ${props => (props.$small ? '20px' : '24px')};
178
- line-height: 1;
179
- display: flex;
180
- align-items: center;
181
- justify-content: center;
182
- border-radius: 100%;
183
- background-color: ${props => props.$bg_color || '#fff'};
184
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
185
- font-size: ${props => (props.$small ? '10px' : '12px')};
186
- font-weight: 600;
187
- font-family: ${FontStyles.DEFAULT};
188
- letter-spacing: -1px;
189
- margin-left: ${props => (props.$small ? '5px' : '10px')};
190
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
144
+ }};
145
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
150
+ border-width: 1px;
151
+ border-style: solid;
152
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
153
+ box-sizing: border-box;
154
+
155
+ &:active,
156
+ &:focus,
157
+ &:hover {
158
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
159
+ }
160
+ `;
161
+ const Label$5 = styled.span `
162
+ color: ${props => props.$content_color || '#fff'};
163
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
164
+ font-family: ${FontStyles.DEFAULT};
165
+ font-weight: 500;
166
+ line-height: 1;
167
+ `;
168
+ const StyledIcon$6 = styled.span `
169
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
170
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
171
+ display: flex;
172
+ align-items: center;
173
+ box-sizing: border-box;
174
+ `;
175
+ const Badge$1 = styled.span `
176
+ width: ${props => (props.$small ? '20px' : '24px')};
177
+ height: ${props => (props.$small ? '20px' : '24px')};
178
+ line-height: 1;
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ border-radius: 100%;
183
+ background-color: ${props => props.$bg_color || '#fff'};
184
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
185
+ font-size: ${props => (props.$small ? '10px' : '12px')};
186
+ font-weight: 600;
187
+ font-family: ${FontStyles.DEFAULT};
188
+ letter-spacing: -1px;
189
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
190
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
191
191
  `;
192
192
  const Button = (_a) => {
193
193
  var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
@@ -229,58 +229,58 @@ const Button = (_a) => {
229
229
  icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
230
230
  React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
231
231
  badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
232
- };
233
-
234
- const StyledComponent = styled.p `
235
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
236
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
237
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
238
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
239
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
240
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
241
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
242
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
243
- margin: ${props => props.$margin || '0px'};
244
- padding: ${props => props.$padding || '0px'};
245
- text-align: ${props => props.$align || 'left'};
246
- box-sizing: border-box;
232
+ };
233
+
234
+ const StyledComponent = styled.p `
235
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
236
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
237
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
238
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
239
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
240
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
241
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
242
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
243
+ margin: ${props => props.$margin || '0px'};
244
+ padding: ${props => props.$padding || '0px'};
245
+ text-align: ${props => props.$align || 'left'};
246
+ box-sizing: border-box;
247
247
  `;
248
248
  const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
249
249
  return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
250
250
  };
251
251
  Copy.defaultProps = {
252
252
  type: 'default',
253
- };
254
-
255
- const H1 = styled.h1 `
256
- color: ${Colors.BLACK.Hex};
257
- font-size: 30px;
258
- font-weight: ${props => (props.$bold ? '500' : '400')};
259
- line-height: 1.4em;
260
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
261
- margin: ${props => props.$margin || '0px'};
262
- padding: ${props => props.$padding || '0px'};
263
- box-sizing: border-box;
264
- `;
265
- const H2 = styled.h2 `
266
- color: ${Colors.BLACK.Hex};
267
- font-size: 24px;
268
- font-weight: ${props => (props.$bold ? '500' : '400')};
269
- line-height: 1.33em;
270
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
271
- margin: ${props => props.$margin || '0px'};
272
- padding: ${props => props.$padding || '0px'};
273
- box-sizing: border-box;
274
- `;
275
- const H3 = styled.h3 `
276
- color: ${Colors.BLACK.Hex};
277
- font-size: 18px;
278
- font-weight: ${props => (props.$bold ? '500' : '400')};
279
- line-height: 1.33em;
280
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
281
- margin: ${props => props.$margin || '0px'};
282
- padding: ${props => props.$padding || '0px'};
283
- box-sizing: border-box;
253
+ };
254
+
255
+ const H1 = styled.h1 `
256
+ color: ${Colors.BLACK.Hex};
257
+ font-size: 30px;
258
+ font-weight: ${props => (props.$bold ? '500' : '400')};
259
+ line-height: 1.4em;
260
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
261
+ margin: ${props => props.$margin || '0px'};
262
+ padding: ${props => props.$padding || '0px'};
263
+ box-sizing: border-box;
264
+ `;
265
+ const H2 = styled.h2 `
266
+ color: ${Colors.BLACK.Hex};
267
+ font-size: 24px;
268
+ font-weight: ${props => (props.$bold ? '500' : '400')};
269
+ line-height: 1.33em;
270
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
271
+ margin: ${props => props.$margin || '0px'};
272
+ padding: ${props => props.$padding || '0px'};
273
+ box-sizing: border-box;
274
+ `;
275
+ const H3 = styled.h3 `
276
+ color: ${Colors.BLACK.Hex};
277
+ font-size: 18px;
278
+ font-weight: ${props => (props.$bold ? '500' : '400')};
279
+ line-height: 1.33em;
280
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
281
+ margin: ${props => props.$margin || '0px'};
282
+ padding: ${props => props.$padding || '0px'};
283
+ box-sizing: border-box;
284
284
  `;
285
285
  const Heading = (_a) => {
286
286
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -299,29 +299,29 @@ const Heading = (_a) => {
299
299
  Heading.defaultProps = {
300
300
  bold: false,
301
301
  type: 'primary',
302
- };
303
-
304
- const Wrapper$h = styled.div `
305
- position: fixed;
306
- top: 0;
307
- right: 0;
308
- bottom: 0;
309
- left: 0;
310
- z-index: 9999;
311
- background: rgba(0, 0, 0, 0.8);
312
- display: flex;
313
- align-items: center;
314
- justify-content: center;
315
- box-sizing: border-box;
302
+ };
303
+
304
+ const Wrapper$h = styled.div `
305
+ position: fixed;
306
+ top: 0;
307
+ right: 0;
308
+ bottom: 0;
309
+ left: 0;
310
+ z-index: 9999;
311
+ background: rgba(0, 0, 0, 0.8);
312
+ display: flex;
313
+ align-items: center;
314
+ justify-content: center;
315
+ box-sizing: border-box;
316
316
  `;
317
317
  const Container$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
318
- const Buttons$1 = styled.div `
319
- display: flex;
320
- gap: 10px;
321
- align-items: center;
322
- justify-content: center;
323
- margin-top: 30px;
324
- box-sizing: border-box;
318
+ const Buttons$1 = styled.div `
319
+ display: flex;
320
+ gap: 10px;
321
+ align-items: center;
322
+ justify-content: center;
323
+ margin-top: 30px;
324
+ box-sizing: border-box;
325
325
  `;
326
326
  const ActionDialog = (_a) => {
327
327
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
@@ -333,29 +333,29 @@ const ActionDialog = (_a) => {
333
333
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
334
334
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
335
335
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)));
336
- };
337
-
338
- const Wrapper$g = styled.div `
339
- border: 1px solid #f1f1f1;
340
- border-radius: 4px;
341
- border-left-width: 4px;
342
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
343
- display: flex;
344
- align-items: flex-start;
345
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
346
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
347
- box-sizing: border-box;
348
- `;
349
- const StyledIcon$5 = styled(Icon) `
350
- flex-shrink: 0;
351
- `;
352
- const Action$1 = styled.div `
353
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
354
- font-size: ${FontSizes.DEFAULT};
355
- font-family: ${FontStyles.DEFAULT};
356
- font-weight: 500;
357
- cursor: pointer;
358
- margin-top: 6px;
336
+ };
337
+
338
+ const Wrapper$g = styled.div `
339
+ border: 1px solid #f1f1f1;
340
+ border-radius: 4px;
341
+ border-left-width: 4px;
342
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
343
+ display: flex;
344
+ align-items: flex-start;
345
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
346
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
347
+ box-sizing: border-box;
348
+ `;
349
+ const StyledIcon$5 = styled(Icon) `
350
+ flex-shrink: 0;
351
+ `;
352
+ const Action$1 = styled.div `
353
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
354
+ font-size: ${FontSizes.DEFAULT};
355
+ font-family: ${FontStyles.DEFAULT};
356
+ font-weight: 500;
357
+ cursor: pointer;
358
+ margin-top: 6px;
359
359
  `;
360
360
  Action$1.defaultProps = { theme: EditableTheme };
361
361
  const Alert = (_a) => {
@@ -385,8 +385,8 @@ const Alert = (_a) => {
385
385
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
386
386
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
387
387
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
388
- };
389
-
388
+ };
389
+
390
390
  const colorMapping = {
391
391
  black: {
392
392
  fill_1: '#000000',
@@ -427,61 +427,61 @@ const Logo = (_a) => {
427
427
  React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
428
428
  React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
429
429
  }
430
- };
431
-
432
- const Container$3 = styled.header `
433
- width: 100%;
434
- display: flex;
435
- padding: 20px;
436
- box-sizing: border-box;
437
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
438
- background: '#fff';
439
- justify-content: space-between;
440
- `;
441
- const LogoWrapper = styled.div `
442
- display: flex;
443
- align-items: center;
444
- `;
445
- const Image = styled.img `
446
- height: 30px !important;
447
- width: auto !important;
448
- `;
449
- const Buttons = styled.div `
450
- display: flex;
451
- flex-direction: row;
452
- column-gap: 10px;
453
- flex-direction: reverse;
430
+ };
431
+
432
+ const Container$3 = styled.header `
433
+ width: 100%;
434
+ display: flex;
435
+ padding: 20px;
436
+ box-sizing: border-box;
437
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
438
+ background: '#fff';
439
+ justify-content: space-between;
440
+ `;
441
+ const LogoWrapper = styled.div `
442
+ display: flex;
443
+ align-items: center;
444
+ `;
445
+ const Image = styled.img `
446
+ height: 30px !important;
447
+ width: auto !important;
448
+ `;
449
+ const Buttons = styled.div `
450
+ display: flex;
451
+ flex-direction: row;
452
+ column-gap: 10px;
453
+ flex-direction: reverse;
454
454
  `;
455
455
  const AppHeader = ({ logoUrl, buttons = [] }) => {
456
456
  return (React.createElement(Container$3, null,
457
457
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
458
458
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
459
- };
460
-
461
- const Wrapper$f = styled.div `
462
- display: inline-block;
463
- border-radius: 4px;
464
- padding: 4px 6px;
465
- background: ${props => Colors[props.$color].Hex};
466
- color: #ffffff;
467
- box-sizing: border-box;
468
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
469
- `;
470
- const Content$3 = styled.div `
471
- display: flex;
472
- align-items: center;
473
- `;
474
- const Label$4 = styled.div `
475
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
476
- font-size: ${FontSizes.SMALL};
477
- font-weight: 500;
478
- font-family: ${FontStyles.DEFAULT};
479
- line-height: 1.2em;
480
- `;
481
- const Remove$1 = styled.div `
482
- margin-left: 10px;
483
- display: flex;
484
- align-items: center;
459
+ };
460
+
461
+ const Wrapper$f = styled.div `
462
+ display: inline-block;
463
+ border-radius: 4px;
464
+ padding: 4px 6px;
465
+ background: ${props => Colors[props.$color].Hex};
466
+ color: #ffffff;
467
+ box-sizing: border-box;
468
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
469
+ `;
470
+ const Content$3 = styled.div `
471
+ display: flex;
472
+ align-items: center;
473
+ `;
474
+ const Label$4 = styled.div `
475
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
476
+ font-size: ${FontSizes.SMALL};
477
+ font-weight: 500;
478
+ font-family: ${FontStyles.DEFAULT};
479
+ line-height: 1.2em;
480
+ `;
481
+ const Remove$1 = styled.div `
482
+ margin-left: 10px;
483
+ display: flex;
484
+ align-items: center;
485
485
  `;
486
486
  const Tag = (_a) => {
487
487
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -490,91 +490,91 @@ const Tag = (_a) => {
490
490
  React.createElement(Label$4, { "$color": color }, children),
491
491
  removable ? (React.createElement(Remove$1, null,
492
492
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
493
- };
494
-
495
- const SidebarContainer = styled.div `
496
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
497
- display: flex;
498
- flex-direction: column;
499
- height: 100%;
500
- padding: 12px 0px;
501
- width: ${props => (props.$isOpen ? props.$width : '60px')};
502
- `;
503
- const MenuWrapper$1 = styled.div `
504
- display: flex;
505
- align-items: center;
506
- border-left-width: 4px;
507
- border-left-style: solid;
508
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
509
- cursor: pointer;
510
- height: 40px;
511
-
512
- &:hover > div {
513
- color: ${props => props.$color.Hex};
514
- }
515
-
516
- &:hover > svg > path {
517
- fill: ${Colors.BLACK.Hex} !important;
518
- }
519
- `;
520
- const MenuIcon = styled(Icon) `
521
- width: 20px;
522
- height: 20px;
523
- margin: 0px 16px;
524
- flex-shrink: 0;
525
-
526
- > path {
527
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
528
- }
529
- `;
530
- const MenuLabel = styled.div `
531
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
532
- flex: 1;
533
- font-size: 12px;
534
- font-style: normal;
535
- font-weight: 600;
536
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
537
- line-height: 16px;
538
- padding: 12px 0px;
539
- letter-spacing: 1px;
540
- `;
541
- const SubMenu = styled.div `
542
- overflow-y: auto;
543
- padding-left: 44px;
544
- padding-right: 20px;
545
- padding-bottom: 10px;
546
- `;
547
- const SubMenuItem = styled.a `
548
- display: block;
549
- padding: 8px 12px;
550
- border-radius: 8px;
551
- font-size: 13px;
552
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
553
- line-height: 20px;
554
- text-decoration: none;
555
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
556
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
557
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
558
- cursor: pointer;
559
-
560
- &:hover {
561
- color: ${props => props.$color.Hex};
562
- font-weight: 500;
563
- }
564
- `;
565
- const Footer = styled.div `
566
- padding: 20px 14px 0px;
567
- display: flex;
568
- align-items: center;
569
- `;
570
- const FooterInfo = styled.div `
571
- display: flex;
572
- flex-direction: column;
573
- flex: 1;
574
- align-items: flex-start;
575
- `;
576
- const SidebarMenuContainer = styled.div `
577
- flex-grow: 1;
493
+ };
494
+
495
+ const SidebarContainer = styled.div `
496
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
497
+ display: flex;
498
+ flex-direction: column;
499
+ height: 100%;
500
+ padding: 12px 0px;
501
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
502
+ `;
503
+ const MenuWrapper$1 = styled.div `
504
+ display: flex;
505
+ align-items: center;
506
+ border-left-width: 4px;
507
+ border-left-style: solid;
508
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
509
+ cursor: pointer;
510
+ height: 40px;
511
+
512
+ &:hover > div {
513
+ color: ${props => props.$color.Hex};
514
+ }
515
+
516
+ &:hover > svg > path {
517
+ fill: ${Colors.BLACK.Hex} !important;
518
+ }
519
+ `;
520
+ const MenuIcon = styled(Icon) `
521
+ width: 20px;
522
+ height: 20px;
523
+ margin: 0px 16px;
524
+ flex-shrink: 0;
525
+
526
+ > path {
527
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
528
+ }
529
+ `;
530
+ const MenuLabel = styled.div `
531
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
532
+ flex: 1;
533
+ font-size: 12px;
534
+ font-style: normal;
535
+ font-weight: 600;
536
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
537
+ line-height: 16px;
538
+ padding: 12px 0px;
539
+ letter-spacing: 1px;
540
+ `;
541
+ const SubMenu = styled.div `
542
+ overflow-y: auto;
543
+ padding-left: 44px;
544
+ padding-right: 20px;
545
+ padding-bottom: 10px;
546
+ `;
547
+ const SubMenuItem = styled.a `
548
+ display: block;
549
+ padding: 8px 12px;
550
+ border-radius: 8px;
551
+ font-size: 13px;
552
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
553
+ line-height: 20px;
554
+ text-decoration: none;
555
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
556
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
557
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
558
+ cursor: pointer;
559
+
560
+ &:hover {
561
+ color: ${props => props.$color.Hex};
562
+ font-weight: 500;
563
+ }
564
+ `;
565
+ const Footer = styled.div `
566
+ padding: 20px 14px 0px;
567
+ display: flex;
568
+ align-items: center;
569
+ `;
570
+ const FooterInfo = styled.div `
571
+ display: flex;
572
+ flex-direction: column;
573
+ flex: 1;
574
+ align-items: flex-start;
575
+ `;
576
+ const SidebarMenuContainer = styled.div `
577
+ flex-grow: 1;
578
578
  `;
579
579
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
580
580
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -598,75 +598,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
598
598
  e.preventDefault();
599
599
  toggleCollapse(!collapsed);
600
600
  }, small: true }))));
601
- };
602
-
603
- const Wrapper$e = styled.div `
604
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
605
- border-radius: 8px;
606
- box-sizing: border-box;
607
- display: flex;
608
- align-items: center;
609
- justify-content: space-between;
610
- padding: 16px 20px;
601
+ };
602
+
603
+ const Wrapper$e = styled.div `
604
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
605
+ border-radius: 8px;
606
+ box-sizing: border-box;
607
+ display: flex;
608
+ align-items: center;
609
+ justify-content: space-between;
610
+ padding: 16px 20px;
611
611
  `;
612
612
  Wrapper$e.defaultProps = { theme: EditableTheme };
613
- const Left = styled.div `
614
- box-sizing: border-box;
615
- display: flex;
616
- align-items: center;
617
- justify-content: space-between;
618
- flex-shrink: 0;
619
- `;
620
- const Info$1 = styled.div `
621
- box-sizing: border-box;
622
- display: flex;
623
- align-items: center;
624
- margin-right: 30px;
625
- `;
626
- const Selected = styled.span `
627
- font-size: 14px;
628
- font-weight: 400;
629
- font-family: ${FontStyles.DEFAULT};
630
- color: ${Colors.BLACK.Hex};
631
- line-height: 1;
632
- `;
633
- const Clear = styled.span `
634
- font-size: 14px;
635
- font-weight: 400;
636
- font-family: ${FontStyles.DEFAULT};
637
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
638
- line-height: 1;
639
- cursor: pointer;
640
- padding-left: 10px;
641
- margin-left: 10px;
642
- border-left: 1px solid #ccc;
613
+ const Left = styled.div `
614
+ box-sizing: border-box;
615
+ display: flex;
616
+ align-items: center;
617
+ justify-content: space-between;
618
+ flex-shrink: 0;
619
+ `;
620
+ const Info$1 = styled.div `
621
+ box-sizing: border-box;
622
+ display: flex;
623
+ align-items: center;
624
+ margin-right: 30px;
625
+ `;
626
+ const Selected = styled.span `
627
+ font-size: 14px;
628
+ font-weight: 400;
629
+ font-family: ${FontStyles.DEFAULT};
630
+ color: ${Colors.BLACK.Hex};
631
+ line-height: 1;
632
+ `;
633
+ const Clear = styled.span `
634
+ font-size: 14px;
635
+ font-weight: 400;
636
+ font-family: ${FontStyles.DEFAULT};
637
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
638
+ line-height: 1;
639
+ cursor: pointer;
640
+ padding-left: 10px;
641
+ margin-left: 10px;
642
+ border-left: 1px solid #ccc;
643
643
  `;
644
644
  Clear.defaultProps = { theme: EditableTheme };
645
- const Actions$1 = styled.div `
646
- box-sizing: border-box;
647
- display: flex;
648
- align-items: center;
649
- column-gap: 10px;
650
- `;
651
- const Error$1 = styled.div `
652
- box-sizing: border-box;
653
- display: flex;
654
- align-items: center;
655
- background: rgba(${Colors.RED.Rgb}, 0.1);
656
- border-radius: 4px;
657
- padding: 6px 8px;
658
- text-overflow: ellipsis;
659
- white-space: nowrap;
660
- overflow: hidden;
661
- margin-left: 30px;
662
- `;
663
- const ErrorMsg = styled.span `
664
- font-size: 14px;
665
- font-weight: 500;
666
- font-family: ${FontStyles.DEFAULT};
667
- line-height: 1em;
668
- color: ${Colors.RED.Hex};
669
- margin-left: 8px;
645
+ const Actions$1 = styled.div `
646
+ box-sizing: border-box;
647
+ display: flex;
648
+ align-items: center;
649
+ column-gap: 10px;
650
+ `;
651
+ const Error$1 = styled.div `
652
+ box-sizing: border-box;
653
+ display: flex;
654
+ align-items: center;
655
+ background: rgba(${Colors.RED.Rgb}, 0.1);
656
+ border-radius: 4px;
657
+ padding: 6px 8px;
658
+ text-overflow: ellipsis;
659
+ white-space: nowrap;
660
+ overflow: hidden;
661
+ margin-left: 30px;
662
+ `;
663
+ const ErrorMsg = styled.span `
664
+ font-size: 14px;
665
+ font-weight: 500;
666
+ font-family: ${FontStyles.DEFAULT};
667
+ line-height: 1em;
668
+ color: ${Colors.RED.Hex};
669
+ margin-left: 8px;
670
670
  `;
671
671
  const BulkActionBar = (_a) => {
672
672
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -681,67 +681,76 @@ const BulkActionBar = (_a) => {
681
681
  errorMsg ? (React.createElement(Error$1, null,
682
682
  React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
683
683
  React.createElement(ErrorMsg, null, errorMsg))) : null));
684
- };
685
-
686
- const Wrapper$d = styled.div `
687
- background: #fff;
688
- border-radius: 8px;
689
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
690
- display: flex;
691
- flex-direction: column;
692
- gap: 4px;
693
- max-height: ${props => props.$maxHeight || '312px'};
694
- padding: 10px;
695
- width: 200px;
696
- `;
697
- const MenuItem = styled.div `
698
- align-items: center;
699
- border-radius: 8px;
700
- border: 1px solid transparent;
701
- display: flex;
702
- gap: 8px;
703
- height: 38px;
704
- padding: 8px;
705
- &:hover {
706
- background: rgba(1, 147, 215, 0.1);
707
- cursor: pointer;
708
-
709
- svg,
710
- path {
711
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
712
- }
713
- }
684
+ };
685
+
686
+ const Wrapper$d = styled.div `
687
+ background: #fff;
688
+ border-radius: 8px;
689
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
690
+ display: flex;
691
+ flex-direction: column;
692
+ gap: 4px;
693
+ max-height: ${props => props.$maxHeight || '312px'};
694
+ padding: 10px;
695
+ width: 200px;
696
+ `;
697
+ const MenuItem = styled.div `
698
+ align-items: center;
699
+ border-radius: 8px;
700
+ border: 1px solid transparent;
701
+ display: flex;
702
+ gap: 8px;
703
+ height: 38px;
704
+ padding: 8px;
705
+ &:hover {
706
+ background: rgba(1, 147, 215, 0.1);
707
+ cursor: pointer;
708
+
709
+ svg,
710
+ path {
711
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
712
+ }
713
+ }
714
714
  `;
715
715
  MenuItem.defaultProps = { theme: EditableTheme };
716
- const Title$1 = styled.span `
717
- font-family: Roboto;
718
- font-size: 14px;
719
- font-weight: 400;
720
- height: auto;
721
- letter-spacing: 0px;
722
- line-height: 22px;
723
- text-align: left;
724
- `;
716
+ const Title$1 = styled.span `
717
+ font-family: Roboto;
718
+ font-size: 14px;
719
+ font-weight: 400;
720
+ height: auto;
721
+ letter-spacing: 0px;
722
+ line-height: 22px;
723
+ text-align: left;
724
+ color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
725
+ pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
726
+ `;
727
+ Title$1.defaultProps = {
728
+ disabled: false,
729
+ };
725
730
  const MoreMenu = (_a) => {
726
731
  var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
727
732
  return (React.createElement(Wrapper$d, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
733
+ var _a;
728
734
  return (React.createElement(MenuItem, { key: i, onClick: item.onClick },
729
- item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
730
- React.createElement(Title$1, null, item.label)));
735
+ item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
736
+ React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label)));
731
737
  })));
732
- };
733
-
734
- const MenuWrapper = styled.div `
735
- position: relative;
736
- display: inline-block;
737
- `;
738
- const StyledMoreMenu = styled(MoreMenu) `
739
- position: fixed;
740
- top: ${props => props.$top};
741
- left: ${props => props.$left};
742
- width: ${props => props.$menuWidth};
743
- max-height: ${props => props.maxHeight};
744
- z-index: 10;
738
+ };
739
+
740
+ const MenuWrapper = styled.div `
741
+ position: relative;
742
+ display: inline-block;
743
+ `;
744
+ const StyledMoreMenu = styled(MoreMenu) `
745
+ position: fixed;
746
+ top: ${props => props.$top};
747
+ left: ${props => props.$left};
748
+ position: fixed;
749
+ top: ${props => props.$top};
750
+ left: ${props => props.$left};
751
+ width: ${props => props.$menuWidth};
752
+ max-height: ${props => props.maxHeight};
753
+ z-index: 10;
745
754
  `;
746
755
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, }) => {
747
756
  const [showMenu, toggleMenu] = React.useState(false);
@@ -764,45 +773,46 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
764
773
  };
765
774
  React.useEffect(() => {
766
775
  if (showMenu && menuWrapperRef.current) {
767
- const rect = menuWrapperRef.current.getBoundingClientRect();
768
- let top = rect.top;
769
- let left = rect.left;
776
+ const wrapperRect = menuWrapperRef.current.getBoundingClientRect();
777
+ const menuWidthInt = parseInt(menuWidth, 10);
778
+ let top = wrapperRect.top;
779
+ let left = wrapperRect.left;
770
780
  switch (position) {
771
781
  case 'top':
772
- top = rect.top - rect.height;
773
- left = rect.left;
782
+ top = wrapperRect.top - 142; // Menu above the wrapper
783
+ left = wrapperRect.left;
774
784
  break;
775
785
  case 'bottom':
776
- top = rect.bottom;
777
- left = rect.left;
786
+ top = wrapperRect.bottom; // Menu below the wrapper
787
+ left = wrapperRect.left;
778
788
  break;
779
789
  case 'left':
780
- top = rect.top;
781
- left = rect.left - rect.width;
790
+ top = wrapperRect.top;
791
+ left = wrapperRect.left - menuWidthInt; // Menu to the left of the wrapper
782
792
  break;
783
793
  case 'right':
784
- top = rect.top;
785
- left = rect.right;
786
- break;
787
- case 'bottomRight':
788
- top = rect.bottom;
789
- left = rect.left;
794
+ top = wrapperRect.top;
795
+ left = wrapperRect.right; // Menu to the right of the wrapper
790
796
  break;
791
797
  case 'bottomLeft':
792
- top = rect.bottom;
793
- left = rect.right - parseInt(menuWidth, 10);
798
+ top = wrapperRect.bottom;
799
+ left = wrapperRect.right - menuWidthInt;
800
+ break;
801
+ case 'bottomRight':
802
+ top = wrapperRect.bottom;
803
+ left = wrapperRect.left;
794
804
  break;
795
805
  case 'topRight':
796
- top = rect.top - parseInt(menuWidth, 10);
797
- left = rect.left;
806
+ top = wrapperRect.top - 142;
807
+ left = wrapperRect.right - 24;
798
808
  break;
799
809
  case 'topLeft':
800
- top = rect.top - parseInt(menuWidth, 10);
801
- left = rect.right - parseInt(menuWidth, 10);
810
+ top = wrapperRect.top - 142;
811
+ left = wrapperRect.left - 188;
802
812
  break;
803
813
  default:
804
- top = rect.bottom;
805
- left = rect.left;
814
+ top = wrapperRect.bottom;
815
+ left = wrapperRect.left;
806
816
  break;
807
817
  }
808
818
  setMenuPosition({ top: `${top}px`, left: `${left}px` });
@@ -811,19 +821,19 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
811
821
  return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
812
822
  React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
813
823
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
814
- };
815
-
816
- const Wrapper$c = styled.div `
817
- display: inline-block;
818
- position: relative;
819
- height: 16px;
820
- `;
821
- const StyledIcon$4 = styled(Icon) `
822
- width: 16px;
823
- height: 16px;
824
- margin: 0px 6px;
825
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
826
- cursor: pointer;
824
+ };
825
+
826
+ const Wrapper$c = styled.div `
827
+ display: inline-block;
828
+ position: relative;
829
+ height: 16px;
830
+ `;
831
+ const StyledIcon$4 = styled(Icon) `
832
+ width: 16px;
833
+ height: 16px;
834
+ margin: 0px 6px;
835
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
836
+ cursor: pointer;
827
837
  `;
828
838
  StyledIcon$4.defaultProps = { theme: EditableTheme };
829
839
  const positions = {
@@ -861,85 +871,85 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
861
871
  return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
862
872
  trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
863
873
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
864
- };
865
-
866
- const Wrapper$b = styled.label `
867
- border-radius: 4px;
868
- padding: 4px 0px 4px 6px;
869
- margin-left: -6px;
870
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
871
- display: flex;
872
- align-items: center;
873
- font-size: ${FontSizes.DEFAULT};
874
- line-height: 1.6em;
875
- box-sizing: border-box;
876
- position: relative;
877
-
878
- &:focus-within {
879
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
880
- }
874
+ };
875
+
876
+ const Wrapper$b = styled.label `
877
+ border-radius: 4px;
878
+ padding: 4px 0px 4px 6px;
879
+ margin-left: -6px;
880
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
881
+ display: flex;
882
+ align-items: center;
883
+ font-size: ${FontSizes.DEFAULT};
884
+ line-height: 1.6em;
885
+ box-sizing: border-box;
886
+ position: relative;
887
+
888
+ &:focus-within {
889
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
890
+ }
881
891
  `;
882
892
  Wrapper$b.defaultProps = { theme: EditableTheme };
883
- const Input$2 = styled.input `
884
- font-size: 20px;
885
- margin: 0px;
886
- line-height: 1.1em;
887
- box-sizing: border-box;
888
- position: absolute;
889
- opacity: 0;
890
- cursor: pointer;
891
- height: 0;
892
- width: 0;
893
- &:checked + span {
894
- background-color: ${Colors.PRIMARY.Hex};
895
- border-color: ${Colors.PRIMARY.Hex};
896
- }
897
- &:checked:disabled + span {
898
- background-color: ${Colors.MEDIUM_GRAY.Hex};
899
- border-color: ${Colors.MEDIUM_GRAY.Hex};
900
- }
901
- &:disabled + span {
902
- background-color: #fff;
903
- border-color: ${Colors.MEDIUM_GRAY.Hex};
904
- }
905
- &:checked + span:after {
906
- display: block;
907
- }
908
- `;
909
- const Check$1 = styled.span `
910
- height: 17px;
911
- width: 17px;
912
- min-width: 17px;
913
- background-color: #fff;
914
- border-width: 2px;
915
- border-style: solid;
916
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
917
- box-sizing: border-box;
918
- position: relative;
919
- &:after {
920
- content: '';
921
- position: absolute;
922
- left: 3px;
923
- top: 0px;
924
- width: 7px;
925
- height: 12px;
926
- border: solid white;
927
- border-width: 0 3px 3px 0;
928
- -webkit-transform: rotate(45deg);
929
- -ms-transform: rotate(45deg);
930
- transform: rotate(45deg);
931
- box-sizing: border-box;
932
- display: none;
933
- }
934
- `;
935
- const Label$3 = styled.span `
936
- font-family: ${FontStyles.DEFAULT};
937
- font-size: ${FontSizes.DEFAULT};
938
- font-weight: 400;
939
- line-height: 1.6em;
940
- color: ${props => props.color || Colors.BLACK.Hex};
941
- margin-left: 6px;
942
- box-sizing: border-box;
893
+ const Input$2 = styled.input `
894
+ font-size: 20px;
895
+ margin: 0px;
896
+ line-height: 1.1em;
897
+ box-sizing: border-box;
898
+ position: absolute;
899
+ opacity: 0;
900
+ cursor: pointer;
901
+ height: 0;
902
+ width: 0;
903
+ &:checked + span {
904
+ background-color: ${Colors.PRIMARY.Hex};
905
+ border-color: ${Colors.PRIMARY.Hex};
906
+ }
907
+ &:checked:disabled + span {
908
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
909
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
910
+ }
911
+ &:disabled + span {
912
+ background-color: #d3d3d3;
913
+ border-color: #d3d3d3;
914
+ }
915
+ &:checked + span:after {
916
+ display: block;
917
+ }
918
+ `;
919
+ const Check$1 = styled.span `
920
+ height: 17px;
921
+ width: 17px;
922
+ min-width: 17px;
923
+ background-color: #fff;
924
+ border-width: 2px;
925
+ border-style: solid;
926
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
927
+ box-sizing: border-box;
928
+ position: relative;
929
+ &:after {
930
+ content: '';
931
+ position: absolute;
932
+ left: 3px;
933
+ top: 0px;
934
+ width: 7px;
935
+ height: 12px;
936
+ border: solid white;
937
+ border-width: 0 3px 3px 0;
938
+ -webkit-transform: rotate(45deg);
939
+ -ms-transform: rotate(45deg);
940
+ transform: rotate(45deg);
941
+ box-sizing: border-box;
942
+ display: none;
943
+ }
944
+ `;
945
+ const Label$3 = styled.span `
946
+ font-family: ${FontStyles.DEFAULT};
947
+ font-size: ${FontSizes.DEFAULT};
948
+ font-weight: 400;
949
+ line-height: 1.6em;
950
+ color: ${props => props.color || Colors.BLACK.Hex};
951
+ margin-left: 6px;
952
+ box-sizing: border-box;
943
953
  `;
944
954
  const Checkbox = (_a) => {
945
955
  var { children, color, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip"]);
@@ -949,16 +959,16 @@ const Checkbox = (_a) => {
949
959
  children ? (React.createElement(Label$3, { color: color },
950
960
  children,
951
961
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
952
- };
953
-
954
- const SelectAll = styled.div `
955
- padding: 8px 12px;
956
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
957
- box-sizing: border-box;
962
+ };
963
+
964
+ const SelectAll = styled.div `
965
+ padding: 8px 12px;
966
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
967
+ box-sizing: border-box;
958
968
  `;
959
- const Options$1 = styled.div `
960
- padding: 12px;
961
- box-sizing: border-box;
969
+ const Options$1 = styled.div `
970
+ padding: 12px;
971
+ box-sizing: border-box;
962
972
  `;
963
973
  const Checklist = (_a) => {
964
974
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -995,70 +1005,70 @@ const Checklist = (_a) => {
995
1005
  const checked = selected.includes(option.value);
996
1006
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
997
1007
  }))));
998
- };
999
-
1000
- const Wrapper$a = styled.div `
1001
- border-radius: 4px;
1002
- height: 40px;
1003
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1004
- position: relative;
1005
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1006
- border-width: 1px;
1007
- border-style: solid;
1008
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1009
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1010
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1011
- box-sizing: border-box;
1012
- padding: 10px 0px;
1013
- display: flex;
1014
- align-items: center;
1015
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1016
-
1017
- &:focus-within {
1018
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1019
- }
1008
+ };
1009
+
1010
+ const Wrapper$a = styled.div `
1011
+ border-radius: 4px;
1012
+ height: 40px;
1013
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1014
+ position: relative;
1015
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1016
+ border-width: 1px;
1017
+ border-style: solid;
1018
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1019
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1020
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1021
+ box-sizing: border-box;
1022
+ padding: 10px 0px;
1023
+ display: flex;
1024
+ align-items: center;
1025
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1026
+
1027
+ &:focus-within {
1028
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1029
+ }
1020
1030
  `;
1021
1031
  Wrapper$a.defaultProps = { theme: EditableTheme };
1022
- const Trigger$1 = styled.select `
1023
- appearance: none;
1024
- box-shadow: none;
1025
- outline: none;
1026
- border: none;
1027
- color: ${Colors.BLACK.Hex};
1028
- font-size: ${FontSizes.DEFAULT};
1029
- font-weight: 400;
1030
- font-family: ${FontStyles.DEFAULT};
1031
- line-height: 2.9em;
1032
- background-color: transparent;
1033
- background-image: none;
1034
- width: 100%;
1035
- box-sizing: border-box;
1036
- padding: 0px 30px 0px 10px;
1037
- box-sizing: border-box;
1038
- position: relative;
1039
- z-index: 2;
1040
- `;
1041
- const IconWrapper$2 = styled(Icon) `
1042
- position: absolute;
1043
- right: 9px;
1044
- z-index: 1;
1045
- `;
1046
- const SearchInput$1 = styled.input `
1047
- position: absolute;
1048
- left: 2px;
1049
- top: 2px;
1050
- z-index: 999;
1051
- width: 90%;
1052
- height: 30px;
1053
- border: none;
1054
- outline: none;
1055
- color: ${Colors.BLACK.Hex};
1056
- font-family: ${FontStyles.DEFAULT};
1057
- font-size: ${FontSizes.DEFAULT};
1058
- font-weight: 400;
1059
- line-height: 2.9em;
1060
- overflow: hidden;
1061
- white-space: nowrap;
1032
+ const Trigger$1 = styled.select `
1033
+ appearance: none;
1034
+ box-shadow: none;
1035
+ outline: none;
1036
+ border: none;
1037
+ color: ${Colors.BLACK.Hex};
1038
+ font-size: ${FontSizes.DEFAULT};
1039
+ font-weight: 400;
1040
+ font-family: ${FontStyles.DEFAULT};
1041
+ line-height: 2.9em;
1042
+ background-color: transparent;
1043
+ background-image: none;
1044
+ width: 100%;
1045
+ box-sizing: border-box;
1046
+ padding: 0px 30px 0px 10px;
1047
+ box-sizing: border-box;
1048
+ position: relative;
1049
+ z-index: 2;
1050
+ `;
1051
+ const IconWrapper$2 = styled(Icon) `
1052
+ position: absolute;
1053
+ right: 9px;
1054
+ z-index: 1;
1055
+ `;
1056
+ const SearchInput$1 = styled.input `
1057
+ position: absolute;
1058
+ left: 2px;
1059
+ top: 2px;
1060
+ z-index: 999;
1061
+ width: 90%;
1062
+ height: 30px;
1063
+ border: none;
1064
+ outline: none;
1065
+ color: ${Colors.BLACK.Hex};
1066
+ font-family: ${FontStyles.DEFAULT};
1067
+ font-size: ${FontSizes.DEFAULT};
1068
+ font-weight: 400;
1069
+ line-height: 2.9em;
1070
+ overflow: hidden;
1071
+ white-space: nowrap;
1062
1072
  `;
1063
1073
  const Select = (_a) => {
1064
1074
  var { options, optionGroups, placeholder, readOnly, invalid, searchable = false, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
@@ -1094,15 +1104,15 @@ const Select = (_a) => {
1094
1104
  return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
1095
1105
  }))),
1096
1106
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
1097
- };
1098
-
1099
- const DatePickerWrapper = styled.div `
1100
- display: flex;
1101
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1107
+ };
1108
+
1109
+ const DatePickerWrapper = styled.div `
1110
+ display: flex;
1111
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1102
1112
  `;
1103
- const Middle = styled.div `
1104
- margin: 0px -1px;
1105
- flex-grow: 1;
1113
+ const Middle = styled.div `
1114
+ margin: 0px -1px;
1115
+ flex-grow: 1;
1106
1116
  `;
1107
1117
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, onChange, style, }) => {
1108
1118
  const [selectedDay, setSelectedDay] = React.useState('');
@@ -1184,66 +1194,66 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1184
1194
  React.createElement(Middle, null,
1185
1195
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1186
1196
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1187
- };
1188
-
1189
- const Scrim$1 = styled.div `
1190
- position: ${({ $position }) => $position};
1191
- top: 0;
1192
- right: 0;
1193
- bottom: 0;
1194
- left: 0;
1195
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1196
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1197
- `;
1198
- const Container$2 = styled.div `
1199
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1200
- min-width: 400px;
1201
- width: ${({ $width }) => $width || '400px'};
1202
- overflow: hidden;
1203
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1204
- outline: none;
1205
- border: none;
1206
- position: ${({ $position }) => $position};
1207
- top: 0;
1208
- right: 0;
1209
- bottom: 0;
1210
- padding: 0px;
1211
- display: flex;
1212
- flex-direction: column;
1213
- box-sizing: border-box;
1214
- background: #fff;
1215
- `;
1216
- const Header$2 = styled.div `
1217
- padding: 30px 20px;
1218
- display: flex;
1219
- align-items: flex-start;
1220
- box-sizing: border-box;
1221
- flex-shrink: 0;
1222
- background: #fff;
1223
- `;
1224
- const Close$1 = styled.div `
1225
- margin-left: auto;
1226
- display: flex;
1227
- align-items: center;
1228
- padding-left: 20px;
1229
- cursor: pointer;
1230
- `;
1231
- const ContentWrapper$1 = styled.div `
1232
- overflow-x: hidden;
1233
- overflow-y: auto;
1234
- box-sizing: border-box;
1235
- flex: 1;
1236
- background: #fff;
1237
- `;
1238
- const ButtonBar$1 = styled.div `
1239
- padding: 20px;
1240
- display: flex;
1241
- align-items: center;
1242
- justify-content: flex-end;
1243
- box-sizing: border-box;
1244
- gap: 10px;
1245
- flex-shrink: 0;
1246
- background: #fff;
1197
+ };
1198
+
1199
+ const Scrim$1 = styled.div `
1200
+ position: ${({ $position }) => $position};
1201
+ top: 0;
1202
+ right: 0;
1203
+ bottom: 0;
1204
+ left: 0;
1205
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1206
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1207
+ `;
1208
+ const Container$2 = styled.div `
1209
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1210
+ min-width: 400px;
1211
+ width: ${({ $width }) => $width || '400px'};
1212
+ overflow: hidden;
1213
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1214
+ outline: none;
1215
+ border: none;
1216
+ position: ${({ $position }) => $position};
1217
+ top: 0;
1218
+ right: 0;
1219
+ bottom: 0;
1220
+ padding: 0px;
1221
+ display: flex;
1222
+ flex-direction: column;
1223
+ box-sizing: border-box;
1224
+ background: #fff;
1225
+ `;
1226
+ const Header$2 = styled.div `
1227
+ padding: 30px 20px;
1228
+ display: flex;
1229
+ align-items: flex-start;
1230
+ box-sizing: border-box;
1231
+ flex-shrink: 0;
1232
+ background: #fff;
1233
+ `;
1234
+ const Close$1 = styled.div `
1235
+ margin-left: auto;
1236
+ display: flex;
1237
+ align-items: center;
1238
+ padding-left: 20px;
1239
+ cursor: pointer;
1240
+ `;
1241
+ const ContentWrapper$1 = styled.div `
1242
+ overflow-x: hidden;
1243
+ overflow-y: auto;
1244
+ box-sizing: border-box;
1245
+ flex: 1;
1246
+ background: #fff;
1247
+ `;
1248
+ const ButtonBar$1 = styled.div `
1249
+ padding: 20px;
1250
+ display: flex;
1251
+ align-items: center;
1252
+ justify-content: flex-end;
1253
+ box-sizing: border-box;
1254
+ gap: 10px;
1255
+ flex-shrink: 0;
1256
+ background: #fff;
1247
1257
  `;
1248
1258
  const Drawer = (_a) => {
1249
1259
  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"]);
@@ -1271,55 +1281,55 @@ const Drawer = (_a) => {
1271
1281
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
1272
1282
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null),
1273
1283
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1274
- };
1275
-
1284
+ };
1285
+
1276
1286
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1277
- const LabelRow = styled.div `
1278
- display: flex;
1279
- align-items: center;
1280
- justify-content: space-between;
1281
- margin: 0 0 4px 0;
1282
- box-sizing: border-box;
1283
- `;
1284
- const Label$2 = styled.label `
1285
- font-size: ${FontSizes.DEFAULT};
1286
- font-weight: 500;
1287
- line-height: 1.3em;
1288
- font-family: ${FontStyles.DEFAULT};
1289
- color: ${Colors.BLACK.Hex};
1290
- display: flex;
1291
- align-items: center;
1292
- `;
1293
- const Required = styled.span `
1294
- color: ${Colors.RED.Hex};
1295
- margin-left: 4px;
1296
- `;
1297
- const Action = styled.span `
1298
- font-size: ${FontSizes.DEFAULT};
1299
- font-weight: 500;
1300
- line-height: 1em;
1301
- font-family: ${FontStyles.DEFAULT};
1302
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1303
- cursor: pointer;
1287
+ const LabelRow = styled.div `
1288
+ display: flex;
1289
+ align-items: center;
1290
+ justify-content: space-between;
1291
+ margin: 0 0 4px 0;
1292
+ box-sizing: border-box;
1293
+ `;
1294
+ const Label$2 = styled.label `
1295
+ font-size: ${FontSizes.DEFAULT};
1296
+ font-weight: 500;
1297
+ line-height: 1.3em;
1298
+ font-family: ${FontStyles.DEFAULT};
1299
+ color: ${Colors.BLACK.Hex};
1300
+ display: flex;
1301
+ align-items: center;
1302
+ `;
1303
+ const Required = styled.span `
1304
+ color: ${Colors.RED.Hex};
1305
+ margin-left: 4px;
1306
+ `;
1307
+ const Action = styled.span `
1308
+ font-size: ${FontSizes.DEFAULT};
1309
+ font-weight: 500;
1310
+ line-height: 1em;
1311
+ font-family: ${FontStyles.DEFAULT};
1312
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1313
+ cursor: pointer;
1304
1314
  `;
1305
1315
  Action.defaultProps = { theme: EditableTheme };
1306
- const Description = styled.div `
1307
- font-size: ${FontSizes.SMALL};
1308
- font-weight: 400;
1309
- line-height: 1.3em;
1310
- font-family: ${FontStyles.DEFAULT};
1311
- color: ${Colors.BLACK.Hex};
1312
- margin: 0 0 8px 0;
1313
- box-sizing: border-box;
1314
- `;
1315
- const Validation = styled.div `
1316
- font-size: ${FontSizes.SMALL};
1317
- font-weight: 400;
1318
- line-height: 1.3em;
1319
- font-family: ${FontStyles.DEFAULT};
1320
- color: ${Colors.RED.Hex};
1321
- margin: 4px 0 0 0;
1322
- box-sizing: border-box;
1316
+ const Description = styled.div `
1317
+ font-size: ${FontSizes.SMALL};
1318
+ font-weight: 400;
1319
+ line-height: 1.3em;
1320
+ font-family: ${FontStyles.DEFAULT};
1321
+ color: ${Colors.BLACK.Hex};
1322
+ margin: 0 0 8px 0;
1323
+ box-sizing: border-box;
1324
+ `;
1325
+ const Validation = styled.div `
1326
+ font-size: ${FontSizes.SMALL};
1327
+ font-weight: 400;
1328
+ line-height: 1.3em;
1329
+ font-family: ${FontStyles.DEFAULT};
1330
+ color: ${Colors.RED.Hex};
1331
+ margin: 4px 0 0 0;
1332
+ box-sizing: border-box;
1323
1333
  `;
1324
1334
  const Field = (_a) => {
1325
1335
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1333,112 +1343,112 @@ const Field = (_a) => {
1333
1343
  description ? React.createElement(Description, null, description) : null,
1334
1344
  children,
1335
1345
  validationText ? React.createElement(Validation, null, validationText) : null));
1336
- };
1337
-
1338
- const Wrapper$8 = styled.fieldset `
1339
- margin-inline-start: 0px;
1340
- margin-inline-end: 0px;
1341
- padding-block-start: 0px;
1342
- padding-inline-start: 0px;
1343
- padding-inline-end: 0px;
1344
- padding-block-end: 0px;
1345
- min-inline-size: min-content;
1346
- border-width: 0px;
1347
- border-style: none;
1348
- border-color: transparent;
1349
- border-image: none;
1350
- `;
1351
- const Label$1 = styled.legend `
1352
- padding-inline-start: 0px;
1353
- padding-inline-end: 0px;
1354
-
1355
- color: ${Colors.BLACK.Hex};
1356
- font-family: ${FontStyles.DEFAULT};
1357
- font-size: ${FontSizes.DEFAULT};
1358
- font-weight: 500;
1359
- line-height: 22px;
1360
- margin-bottom: 6px;
1361
- `;
1362
- const Content$1 = styled.div `
1363
- padding: 20px;
1364
- border-radius: 8px;
1365
- background: #fcfcfc;
1346
+ };
1347
+
1348
+ const Wrapper$8 = styled.fieldset `
1349
+ margin-inline-start: 0px;
1350
+ margin-inline-end: 0px;
1351
+ padding-block-start: 0px;
1352
+ padding-inline-start: 0px;
1353
+ padding-inline-end: 0px;
1354
+ padding-block-end: 0px;
1355
+ min-inline-size: min-content;
1356
+ border-width: 0px;
1357
+ border-style: none;
1358
+ border-color: transparent;
1359
+ border-image: none;
1360
+ `;
1361
+ const Label$1 = styled.legend `
1362
+ padding-inline-start: 0px;
1363
+ padding-inline-end: 0px;
1364
+
1365
+ color: ${Colors.BLACK.Hex};
1366
+ font-family: ${FontStyles.DEFAULT};
1367
+ font-size: ${FontSizes.DEFAULT};
1368
+ font-weight: 500;
1369
+ line-height: 22px;
1370
+ margin-bottom: 6px;
1371
+ `;
1372
+ const Content$1 = styled.div `
1373
+ padding: 20px;
1374
+ border-radius: 8px;
1375
+ background: #fcfcfc;
1366
1376
  `;
1367
1377
  const FieldGroup = ({ children, label }) => {
1368
1378
  return (React.createElement(Wrapper$8, null,
1369
1379
  React.createElement(Label$1, null, label),
1370
1380
  React.createElement(Content$1, null, children)));
1371
- };
1372
-
1373
- const Dropzone = styled.div `
1374
- border-radius: 8px;
1375
- border-width: 1px;
1376
- border-style: dashed;
1377
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1378
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1379
- cursor: copy;
1381
+ };
1382
+
1383
+ const Dropzone = styled.div `
1384
+ border-radius: 8px;
1385
+ border-width: 1px;
1386
+ border-style: dashed;
1387
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1388
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1389
+ cursor: copy;
1380
1390
  `;
1381
1391
  Dropzone.defaultProps = { theme: EditableTheme };
1382
- const IconWrapper$1 = styled.div `
1383
- width: 80px;
1384
- height: 80px;
1385
- border-radius: 40px;
1386
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1387
- display: flex;
1388
- align-items: center;
1389
- justify-content: center;
1390
- `;
1391
- const StyledIcon$3 = styled(Icon) `
1392
- width: 40px !important;
1393
- height: 40px !important;
1394
-
1395
- > path {
1396
- fill: ${Colors.GRAY.Hex} !important;
1397
- }
1398
- `;
1399
- const ClickZone = styled.div `
1400
- margin: 40px 20px;
1401
- display: flex;
1402
- flex-direction: column;
1403
- align-items: center;
1404
- gap: 16px;
1405
- `;
1406
- const Content = styled.div `
1407
- display: flex;
1408
- flex-direction: column;
1409
- align-items: center;
1410
- gap: 2px;
1411
- `;
1412
- const Files = styled.div `
1413
- display: flex;
1414
- flex-direction: column;
1415
- align-self: stretch;
1416
- gap: 10px;
1417
- margin: 20px;
1418
- `;
1419
- const MessageDiv = styled.div `
1420
- display: flex;
1421
- align-items: center;
1422
- justify-content: center;
1423
- `;
1424
- const File = styled.div `
1425
- display: flex;
1426
- padding: 10px;
1427
- align-items: center;
1428
- justify-content: space-between;
1429
- gap: 10px;
1430
- border-radius: 4px;
1431
- border: 1px solid #cccccc;
1432
- background: #ffffff;
1433
- `;
1434
- const Remove = styled(Icon) `
1435
- width: 24px;
1436
- height: 24px;
1437
- cursor: pointer;
1438
-
1439
- > path {
1440
- fill: ${Colors.RED.Hex} !important;
1441
- }
1392
+ const IconWrapper$1 = styled.div `
1393
+ width: 80px;
1394
+ height: 80px;
1395
+ border-radius: 40px;
1396
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1397
+ display: flex;
1398
+ align-items: center;
1399
+ justify-content: center;
1400
+ `;
1401
+ const StyledIcon$3 = styled(Icon) `
1402
+ width: 40px !important;
1403
+ height: 40px !important;
1404
+
1405
+ > path {
1406
+ fill: ${Colors.GRAY.Hex} !important;
1407
+ }
1408
+ `;
1409
+ const ClickZone = styled.div `
1410
+ margin: 40px 20px;
1411
+ display: flex;
1412
+ flex-direction: column;
1413
+ align-items: center;
1414
+ gap: 16px;
1415
+ `;
1416
+ const Content = styled.div `
1417
+ display: flex;
1418
+ flex-direction: column;
1419
+ align-items: center;
1420
+ gap: 2px;
1421
+ `;
1422
+ const Files = styled.div `
1423
+ display: flex;
1424
+ flex-direction: column;
1425
+ align-self: stretch;
1426
+ gap: 10px;
1427
+ margin: 20px;
1428
+ `;
1429
+ const MessageDiv = styled.div `
1430
+ display: flex;
1431
+ align-items: center;
1432
+ justify-content: center;
1433
+ `;
1434
+ const File = styled.div `
1435
+ display: flex;
1436
+ padding: 10px;
1437
+ align-items: center;
1438
+ justify-content: space-between;
1439
+ gap: 10px;
1440
+ border-radius: 4px;
1441
+ border: 1px solid #cccccc;
1442
+ background: #ffffff;
1443
+ `;
1444
+ const Remove = styled(Icon) `
1445
+ width: 24px;
1446
+ height: 24px;
1447
+ cursor: pointer;
1448
+
1449
+ > path {
1450
+ fill: ${Colors.RED.Hex} !important;
1451
+ }
1442
1452
  `;
1443
1453
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
1444
1454
  const inputRef = React.useRef(null);
@@ -1556,8 +1566,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1556
1566
  React.createElement(Copy, { align: 'center', color: 'GRAY' }, message),
1557
1567
  tooltipInfo && (React.createElement("span", null,
1558
1568
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1559
- };
1560
-
1569
+ };
1570
+
1561
1571
  const getAgesFromDob = (dob) => {
1562
1572
  let calculated_current_age = null;
1563
1573
  let calculated_nearest_age = null;
@@ -1630,146 +1640,146 @@ const formatAsSsn = (number) => {
1630
1640
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1631
1641
  }
1632
1642
  return formatted_value;
1633
- };
1634
-
1635
- const StyledInput = styled.input `
1636
- border: none !important;
1637
- background: none !important;
1638
- font-size: ${FontSizes.DEFAULT};
1639
- font-weight: 400;
1640
- font-family: ${FontStyles.DEFAULT};
1641
- line-height: 1.28em;
1642
- color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
1643
- position: relative;
1644
- height: ${props => props.$height || 'auto'};
1645
- padding: 10px;
1646
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1647
- box-shadow: none;
1648
- outline: none;
1649
- margin: 0px;
1650
- text-indent: 0px;
1651
- --webkit-appearance: none;
1652
- box-sizing: border-box;
1653
- display: block;
1654
- width: 100%;
1655
- `;
1656
- const StyledTextArea = styled.textarea `
1657
- border: none !important;
1658
- background: none !important;
1659
- overflow-y: scroll !important;
1660
- font-size: 14px;
1661
- font-weight: 400;
1662
- height: ${props => props.$height || 'auto'};
1663
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1664
- line-height: 1.28em;
1665
- color: ${({ $invalid }) => ($invalid ? '#ff0000' : '#000000')};
1666
- position: relative;
1667
- padding: 10px;
1668
- opacity: 1;
1669
- box-shadow: none;
1670
- outline: none;
1671
- margin: 0px;
1672
- text-indent: 0px;
1673
- --webkit-appearance: none;
1674
- text-wrap: break-word;
1675
- box-sizing: border-box;
1676
- display: block;
1677
- width: 100%;
1643
+ };
1644
+
1645
+ const StyledInput = styled.input `
1646
+ border: none !important;
1647
+ background: none !important;
1648
+ font-size: ${FontSizes.DEFAULT};
1649
+ font-weight: 400;
1650
+ font-family: ${FontStyles.DEFAULT};
1651
+ line-height: 1.28em;
1652
+ color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
1653
+ position: relative;
1654
+ height: ${props => props.$height || 'auto'};
1655
+ padding: 10px;
1656
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1657
+ box-shadow: none;
1658
+ outline: none;
1659
+ margin: 0px;
1660
+ text-indent: 0px;
1661
+ --webkit-appearance: none;
1662
+ box-sizing: border-box;
1663
+ display: block;
1664
+ width: 100%;
1665
+ `;
1666
+ const StyledTextArea = styled.textarea `
1667
+ border: none !important;
1668
+ background: none !important;
1669
+ overflow-y: scroll !important;
1670
+ font-size: 14px;
1671
+ font-weight: 400;
1672
+ height: ${props => props.$height || 'auto'};
1673
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1674
+ line-height: 1.28em;
1675
+ color: ${({ $invalid }) => ($invalid ? '#ff0000' : '#000000')};
1676
+ position: relative;
1677
+ padding: 10px;
1678
+ opacity: 1;
1679
+ box-shadow: none;
1680
+ outline: none;
1681
+ margin: 0px;
1682
+ text-indent: 0px;
1683
+ --webkit-appearance: none;
1684
+ text-wrap: break-word;
1685
+ box-sizing: border-box;
1686
+ display: block;
1687
+ width: 100%;
1678
1688
  ${({ $readOnly }) => $readOnly &&
1679
- `
1680
- background-color: #f0f0f0;
1681
- color: #999999;
1682
- overflow-y: scroll;
1683
- `}
1684
- `;
1685
- const StyledSuffix = styled.div `
1686
- box-sizing: border-box;
1687
- border-radius: 0px 4px 4px 0px;
1688
- display: flex;
1689
- justify-content: center;
1690
- align-items: center;
1691
- padding: 10px;
1692
- height: auto;
1693
- background: #f5f5f5;
1694
- border-width: 0px 0px 0px 1px;
1695
- border-style: solid;
1696
- border-color: #cccccc;
1697
- font-family: ${FontStyles.DEFAULT};
1698
- font-style: normal;
1699
- font-weight: 400;
1700
- font-size: ${FontSizes.DEFAULT};
1701
- color: Colors.BLACK.Hex;
1702
- `;
1703
- const StyledWrapper = styled.div `
1704
- display: flex;
1705
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1706
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1707
- position: relative;
1708
- border-width: 1px;
1709
- border-style: solid;
1710
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1711
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1712
-
1713
- &:focus-within {
1714
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1715
- }
1689
+ `
1690
+ background-color: #f0f0f0;
1691
+ color: #999999;
1692
+ overflow-y: scroll;
1693
+ `}
1694
+ `;
1695
+ const StyledSuffix = styled.div `
1696
+ box-sizing: border-box;
1697
+ border-radius: 0px 4px 4px 0px;
1698
+ display: flex;
1699
+ justify-content: center;
1700
+ align-items: center;
1701
+ padding: 10px;
1702
+ height: auto;
1703
+ background: #f5f5f5;
1704
+ border-width: 0px 0px 0px 1px;
1705
+ border-style: solid;
1706
+ border-color: #cccccc;
1707
+ font-family: ${FontStyles.DEFAULT};
1708
+ font-style: normal;
1709
+ font-weight: 400;
1710
+ font-size: ${FontSizes.DEFAULT};
1711
+ color: Colors.BLACK.Hex;
1712
+ `;
1713
+ const StyledWrapper = styled.div `
1714
+ display: flex;
1715
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1716
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1717
+ position: relative;
1718
+ border-width: 1px;
1719
+ border-style: solid;
1720
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1721
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1722
+
1723
+ &:focus-within {
1724
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1725
+ }
1716
1726
  `;
1717
1727
  StyledWrapper.defaultProps = { theme: EditableTheme };
1718
- const SuggestedValues = styled.div `
1719
- background: #fff;
1720
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1721
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1722
- border-radius: 0px 0px 4px 4px;
1723
- border-style: solid;
1724
- border-top: none;
1725
- border-width: 1px;
1726
- left: -1px;
1727
- position: absolute;
1728
- right: -1px;
1729
- top: 39px;
1730
- z-index: 10;
1731
- max-height: 220px;
1732
- overflow: auto;
1728
+ const SuggestedValues = styled.div `
1729
+ background: #fff;
1730
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1731
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1732
+ border-radius: 0px 0px 4px 4px;
1733
+ border-style: solid;
1734
+ border-top: none;
1735
+ border-width: 1px;
1736
+ left: -1px;
1737
+ position: absolute;
1738
+ right: -1px;
1739
+ top: 39px;
1740
+ z-index: 10;
1741
+ max-height: 220px;
1742
+ overflow: auto;
1733
1743
  `;
1734
1744
  SuggestedValues.defaultProps = { theme: EditableTheme };
1735
- const SuggestedSummary = styled.div `
1736
- color: ${Colors.MEDIUM_GRAY.Hex};
1737
- font-size: 12px;
1738
- font-family: ${FontStyles.DEFAULT};
1739
- font-weight: 500;
1740
- line-height: 18px;
1741
- padding: 10px 12px;
1742
- border-bottom: 1px solid #e5e5e5;
1743
- background: #fff;
1744
- z-index: 1;
1745
- position: sticky;
1746
- top: 0px;
1745
+ const SuggestedSummary = styled.div `
1746
+ color: ${Colors.MEDIUM_GRAY.Hex};
1747
+ font-size: 12px;
1748
+ font-family: ${FontStyles.DEFAULT};
1749
+ font-weight: 500;
1750
+ line-height: 18px;
1751
+ padding: 10px 12px;
1752
+ border-bottom: 1px solid #e5e5e5;
1753
+ background: #fff;
1754
+ z-index: 1;
1755
+ position: sticky;
1756
+ top: 0px;
1747
1757
  `;
1748
1758
  //styles for textarea
1749
- const SuggestedValue = styled.div `
1750
- cursor: pointer;
1751
- padding: 8px 12px;
1752
- font-size: ${FontSizes.DEFAULT};
1753
- font-family: ${FontStyles.DEFAULT};
1754
- font-weight: 400;
1755
- line-height: 1.6em;
1756
- color: ${Colors.BLACK.Hex};
1757
-
1758
- &:hover {
1759
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1760
- }
1759
+ const SuggestedValue = styled.div `
1760
+ cursor: pointer;
1761
+ padding: 8px 12px;
1762
+ font-size: ${FontSizes.DEFAULT};
1763
+ font-family: ${FontStyles.DEFAULT};
1764
+ font-weight: 400;
1765
+ line-height: 1.6em;
1766
+ color: ${Colors.BLACK.Hex};
1767
+
1768
+ &:hover {
1769
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1770
+ }
1761
1771
  `;
1762
1772
  SuggestedValue.defaultProps = { theme: EditableTheme };
1763
- const CharacterCount = styled.div `
1764
- font-family: ${FontStyles.DEFAULT};
1765
- font-size: ${FontSizes.SMALL};
1766
- color: ${Colors.MEDIUM_GRAY.Hex};
1767
- padding: 10px;
1773
+ const CharacterCount = styled.div `
1774
+ font-family: ${FontStyles.DEFAULT};
1775
+ font-size: ${FontSizes.SMALL};
1776
+ color: ${Colors.MEDIUM_GRAY.Hex};
1777
+ padding: 10px;
1768
1778
  `;
1769
- const Loader$1 = styled.div `
1770
- padding: 0px 10px;
1771
- display: flex;
1772
- align-items: center;
1779
+ const Loader$1 = styled.div `
1780
+ padding: 0px 10px;
1781
+ display: flex;
1782
+ align-items: center;
1773
1783
  `;
1774
1784
  const Input$1 = (_a) => {
1775
1785
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, onSuggestedSelect, placeholder, readOnly, showCharCount, step, style, suggestedValues, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "type", "value"]);
@@ -1868,110 +1878,110 @@ const Input$1 = (_a) => {
1868
1878
  setShowOptions(false);
1869
1879
  } }, s_value));
1870
1880
  }))) : null));
1871
- };
1872
-
1873
- const Wrapper$7 = styled.a `
1874
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1875
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1876
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1877
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1878
- font-weight: 500;
1879
- font-style: normal;
1880
- text-decoration: 'none';
1881
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1882
- margin: 0px;
1883
- padding: 0px;
1884
- box-sizing: border-box;
1885
- cursor: pointer;
1881
+ };
1882
+
1883
+ const Wrapper$7 = styled.a `
1884
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1885
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1886
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1887
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1888
+ font-weight: 500;
1889
+ font-style: normal;
1890
+ text-decoration: 'none';
1891
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1892
+ margin: 0px;
1893
+ padding: 0px;
1894
+ box-sizing: border-box;
1895
+ cursor: pointer;
1886
1896
  `;
1887
1897
  Wrapper$7.defaultProps = { theme: EditableTheme };
1888
1898
  const Link = (_a) => {
1889
1899
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1890
1900
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1891
- };
1892
-
1893
- const dash = styled.keyframes `
1894
- 0% {
1895
- stroke-dasharray: 1, 160;
1896
- stroke-dashoffset: 0;
1897
- }
1898
- 50% {
1899
- stroke-dasharray: 80, 160;
1900
- stroke-dashoffset: -32;
1901
- }
1902
- 100% {
1903
- stroke-dasharray: 80, 160;
1904
- stroke-dashoffset: -124;
1905
- }
1906
- `;
1907
- const Spinner = styled.svg `
1908
- z-index: 2;
1909
- position: absolute;
1910
- top: 50%;
1911
- left: 50%;
1912
- transform: translate(-50%, -50%);
1913
- margin: 0 auto;
1914
- width: 40px;
1915
- height: 40px;
1916
- `;
1917
- const Path = styled.path `
1918
- stroke: #0193d7;
1919
- stroke-linecap: round;
1920
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1921
- animation: ${dash} 1.1s ease-in-out infinite;
1901
+ };
1902
+
1903
+ const dash = styled.keyframes `
1904
+ 0% {
1905
+ stroke-dasharray: 1, 160;
1906
+ stroke-dashoffset: 0;
1907
+ }
1908
+ 50% {
1909
+ stroke-dasharray: 80, 160;
1910
+ stroke-dashoffset: -32;
1911
+ }
1912
+ 100% {
1913
+ stroke-dasharray: 80, 160;
1914
+ stroke-dashoffset: -124;
1915
+ }
1916
+ `;
1917
+ const Spinner = styled.svg `
1918
+ z-index: 2;
1919
+ position: absolute;
1920
+ top: 50%;
1921
+ left: 50%;
1922
+ transform: translate(-50%, -50%);
1923
+ margin: 0 auto;
1924
+ width: 40px;
1925
+ height: 40px;
1926
+ `;
1927
+ const Path = styled.path `
1928
+ stroke: #0193d7;
1929
+ stroke-linecap: round;
1930
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1931
+ animation: ${dash} 1.1s ease-in-out infinite;
1922
1932
  `;
1923
1933
  const Loader = () => {
1924
1934
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1925
1935
  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' })));
1926
- };
1927
-
1928
- const Steps = styled.div `
1929
- padding: 20px;
1930
- border-bottom: 1px solid #e7e6e6;
1931
- background: #f5f5f5;
1932
- display: flex;
1933
- gap: 30px;
1934
- align-items: center;
1935
- `;
1936
- const Step = styled.div `
1937
- display: flex;
1938
- align-items: center;
1939
- gap: 8px;
1940
- `;
1941
- const StyledIcon$2 = styled(Icon) `
1942
- > path {
1943
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1944
- }
1936
+ };
1937
+
1938
+ const Steps = styled.div `
1939
+ padding: 20px;
1940
+ border-bottom: 1px solid #e7e6e6;
1941
+ background: #f5f5f5;
1942
+ display: flex;
1943
+ gap: 30px;
1944
+ align-items: center;
1945
+ `;
1946
+ const Step = styled.div `
1947
+ display: flex;
1948
+ align-items: center;
1949
+ gap: 8px;
1950
+ `;
1951
+ const StyledIcon$2 = styled(Icon) `
1952
+ > path {
1953
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1954
+ }
1945
1955
  `;
1946
1956
  StyledIcon$2.defaultProps = { theme: EditableTheme };
1947
- const StepIndicator = styled.div `
1948
- width: 30px;
1949
- height: 30px;
1950
- border-radius: 15px;
1951
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1952
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1953
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1954
- font-size: 14px;
1955
- font-weight: 500;
1956
- line-height: 1;
1957
- display: flex;
1958
- align-items: center;
1959
- justify-content: center;
1960
- flex-shrink: 0;
1957
+ const StepIndicator = styled.div `
1958
+ width: 30px;
1959
+ height: 30px;
1960
+ border-radius: 15px;
1961
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1962
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1963
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1964
+ font-size: 14px;
1965
+ font-weight: 500;
1966
+ line-height: 1;
1967
+ display: flex;
1968
+ align-items: center;
1969
+ justify-content: center;
1970
+ flex-shrink: 0;
1961
1971
  `;
1962
1972
  StepIndicator.defaultProps = { theme: EditableTheme };
1963
- const StepLabel = styled.div `
1964
- color: #000;
1965
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1966
- font-size: 14px;
1967
- font-weight: 500;
1968
- line-height: 1;
1969
- `;
1970
- const StepLine = styled.div `
1971
- height: 2px;
1972
- flex-grow: 1;
1973
- background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
1974
- transition: background-color 0.5s ease-in-out;
1973
+ const StepLabel = styled.div `
1974
+ color: #000;
1975
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1976
+ font-size: 14px;
1977
+ font-weight: 500;
1978
+ line-height: 1;
1979
+ `;
1980
+ const StepLine = styled.div `
1981
+ height: 2px;
1982
+ flex-grow: 1;
1983
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
1984
+ transition: background-color 0.5s ease-in-out;
1975
1985
  `;
1976
1986
  const ProgressBar = ({ steps, showStepLine = false }) => {
1977
1987
  return (React.createElement(Steps, null, steps.map((step, i) => {
@@ -1981,75 +1991,75 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
1981
1991
  step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
1982
1992
  React.createElement(StepLabel, null, step.label))));
1983
1993
  })));
1984
- };
1985
-
1986
- const Wrapper$6 = styled.div `
1987
- position: fixed;
1988
- top: 0;
1989
- right: 0;
1990
- bottom: 0;
1991
- left: 0;
1992
- z-index: 9999;
1993
- background: rgba(0, 0, 0, 0.8);
1994
- display: flex;
1995
- align-items: center;
1996
- justify-content: center;
1997
- `;
1998
- const Container$1 = styled.dialog `
1999
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2000
- max-width: calc(100vw - 80px);
2001
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2002
- max-height: calc(100vh - 80px);
2003
- border-radius: 8px;
2004
- overflow: hidden;
2005
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2006
- outline: none;
2007
- border: none;
2008
- position: relative;
2009
- padding: 0px;
2010
- box-sizing: border-box;
2011
- display: flex;
2012
- flex-direction: column;
2013
- `;
2014
- const Header$1 = styled.div `
2015
- flex-shrink: 0;
2016
- padding: 20px;
2017
- border-bottom: 1px solid #e7e6e6;
2018
- display: flex;
2019
- align-items: center;
2020
- background: #ffffff;
2021
- box-sizing: border-box;
2022
- `;
2023
- const Close = styled.div `
2024
- margin-left: auto;
2025
- display: flex;
2026
- align-items: center;
2027
- padding-left: 20px;
2028
- cursor: pointer;
2029
- `;
2030
- const CloseMsg = styled.span `
2031
- font-size: ${FontSizes.SMALL};
2032
- font-weight: 400;
2033
- font-family: ${FontStyles.DEFAULT};
2034
- line-height: 1em;
2035
- color: ${Colors.MEDIUM_GRAY.Hex};
2036
- `;
2037
- const ContentWrapper = styled.div `
2038
- overflow-x: hidden;
2039
- overflow-y: auto;
2040
- background: #ffffff;
2041
- flex: 1;
2042
- box-sizing: border-box;
2043
- `;
2044
- const ButtonBar = styled.div `
2045
- flex-shrink: 0;
2046
- background: #ffffff;
2047
- padding: 20px;
2048
- border-top: 1px solid #e7e6e6;
2049
- display: flex;
2050
- align-items: center;
2051
- justify-self: flex-end;
2052
- box-sizing: border-box;
1994
+ };
1995
+
1996
+ const Wrapper$6 = styled.div `
1997
+ position: fixed;
1998
+ top: 0;
1999
+ right: 0;
2000
+ bottom: 0;
2001
+ left: 0;
2002
+ z-index: 9999;
2003
+ background: rgba(0, 0, 0, 0.8);
2004
+ display: flex;
2005
+ align-items: center;
2006
+ justify-content: center;
2007
+ `;
2008
+ const Container$1 = styled.dialog `
2009
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2010
+ max-width: calc(100vw - 80px);
2011
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2012
+ max-height: calc(100vh - 80px);
2013
+ border-radius: 8px;
2014
+ overflow: hidden;
2015
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2016
+ outline: none;
2017
+ border: none;
2018
+ position: relative;
2019
+ padding: 0px;
2020
+ box-sizing: border-box;
2021
+ display: flex;
2022
+ flex-direction: column;
2023
+ `;
2024
+ const Header$1 = styled.div `
2025
+ flex-shrink: 0;
2026
+ padding: 20px;
2027
+ border-bottom: 1px solid #e7e6e6;
2028
+ display: flex;
2029
+ align-items: center;
2030
+ background: #ffffff;
2031
+ box-sizing: border-box;
2032
+ `;
2033
+ const Close = styled.div `
2034
+ margin-left: auto;
2035
+ display: flex;
2036
+ align-items: center;
2037
+ padding-left: 20px;
2038
+ cursor: pointer;
2039
+ `;
2040
+ const CloseMsg = styled.span `
2041
+ font-size: ${FontSizes.SMALL};
2042
+ font-weight: 400;
2043
+ font-family: ${FontStyles.DEFAULT};
2044
+ line-height: 1em;
2045
+ color: ${Colors.MEDIUM_GRAY.Hex};
2046
+ `;
2047
+ const ContentWrapper = styled.div `
2048
+ overflow-x: hidden;
2049
+ overflow-y: auto;
2050
+ background: #ffffff;
2051
+ flex: 1;
2052
+ box-sizing: border-box;
2053
+ `;
2054
+ const ButtonBar = styled.div `
2055
+ flex-shrink: 0;
2056
+ background: #ffffff;
2057
+ padding: 20px;
2058
+ border-top: 1px solid #e7e6e6;
2059
+ display: flex;
2060
+ align-items: center;
2061
+ justify-self: flex-end;
2062
+ box-sizing: border-box;
2053
2063
  `;
2054
2064
  const Modal = (_a) => {
2055
2065
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
@@ -2082,21 +2092,21 @@ const Modal = (_a) => {
2082
2092
  } },
2083
2093
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
2084
2094
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
2085
- };
2086
-
2087
- const Wrapper$5 = styled.div `
2088
- position: relative;
2089
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2090
- `;
2091
- const Trigger = styled.div `
2092
- box-sizing: border-box;
2093
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2094
- height: 40px;
2095
- padding: 0 10px;
2096
- position: relative;
2097
- cursor: pointer;
2098
- border-width: 1px;
2099
- border-style: solid;
2095
+ };
2096
+
2097
+ const Wrapper$5 = styled.div `
2098
+ position: relative;
2099
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2100
+ `;
2101
+ const Trigger = styled.div `
2102
+ box-sizing: border-box;
2103
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2104
+ height: 40px;
2105
+ padding: 0 10px;
2106
+ position: relative;
2107
+ cursor: pointer;
2108
+ border-width: 1px;
2109
+ border-style: solid;
2100
2110
  border-color: ${props => {
2101
2111
  if (props.$invalid) {
2102
2112
  return Colors.RED.Hex;
@@ -2107,67 +2117,67 @@ const Trigger = styled.div `
2107
2117
  else {
2108
2118
  return '#cccccc';
2109
2119
  }
2110
- }};
2111
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2112
- background-image: none;
2113
- display: flex;
2114
- width: 100%;
2115
- align-items: center;
2116
- justify-content: space-between;
2117
- z-index: 1;
2120
+ }};
2121
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2122
+ background-image: none;
2123
+ display: flex;
2124
+ width: 100%;
2125
+ align-items: center;
2126
+ justify-content: space-between;
2127
+ z-index: 1;
2118
2128
  `;
2119
2129
  Trigger.defaultProps = { theme: EditableTheme };
2120
- const Value = styled.div `
2121
- color: ${Colors.BLACK.Hex};
2122
- font-family: ${FontStyles.DEFAULT};
2123
- font-size: ${FontSizes.DEFAULT};
2124
- font-weight: 400;
2125
- line-height: 2.9em;
2126
- overflow: hidden;
2127
- text-overflow: ellipsis;
2128
- white-space: nowrap;
2129
- width: 100%;
2130
- `;
2131
- const Options = styled.div `
2132
- background: #fff;
2133
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2134
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2135
- border-radius: 0px 0px 4px 4px;
2136
- border-style: solid;
2137
- border-top: none;
2138
- border-width: 1px;
2139
- left: 0;
2140
- position: relative;
2141
- right: 0;
2142
- z-index: 10;
2143
- max-height: 220px;
2144
- overflow: auto;
2130
+ const Value = styled.div `
2131
+ color: ${Colors.BLACK.Hex};
2132
+ font-family: ${FontStyles.DEFAULT};
2133
+ font-size: ${FontSizes.DEFAULT};
2134
+ font-weight: 400;
2135
+ line-height: 2.9em;
2136
+ overflow: hidden;
2137
+ text-overflow: ellipsis;
2138
+ white-space: nowrap;
2139
+ width: 100%;
2140
+ `;
2141
+ const Options = styled.div `
2142
+ background: #fff;
2143
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2144
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2145
+ border-radius: 0px 0px 4px 4px;
2146
+ border-style: solid;
2147
+ border-top: none;
2148
+ border-width: 1px;
2149
+ left: 0;
2150
+ position: relative;
2151
+ right: 0;
2152
+ z-index: 10;
2153
+ max-height: 220px;
2154
+ overflow: auto;
2145
2155
  `;
2146
2156
  Options.defaultProps = { theme: EditableTheme };
2147
- const Scrim = styled.div `
2148
- bottom: 0;
2149
- left: 0;
2150
- position: fixed;
2151
- right: 0;
2152
- top: 0;
2153
- z-index: 9;
2154
- `;
2155
- const SearchInput = styled.input `
2156
- position: absolute;
2157
- left: 2px;
2158
- top: 2px;
2159
- z-index: 999;
2160
- width: 90%;
2161
- height: 30px;
2162
- border: none;
2163
- outline: none;
2164
- color: ${Colors.BLACK.Hex};
2165
- font-family: ${FontStyles.DEFAULT};
2166
- font-size: ${FontSizes.DEFAULT};
2167
- font-weight: 400;
2168
- line-height: 2.9em;
2169
- overflow: hidden;
2170
- white-space: nowrap;
2157
+ const Scrim = styled.div `
2158
+ bottom: 0;
2159
+ left: 0;
2160
+ position: fixed;
2161
+ right: 0;
2162
+ top: 0;
2163
+ z-index: 9;
2164
+ `;
2165
+ const SearchInput = styled.input `
2166
+ position: absolute;
2167
+ left: 2px;
2168
+ top: 2px;
2169
+ z-index: 999;
2170
+ width: 90%;
2171
+ height: 30px;
2172
+ border: none;
2173
+ outline: none;
2174
+ color: ${Colors.BLACK.Hex};
2175
+ font-family: ${FontStyles.DEFAULT};
2176
+ font-size: ${FontSizes.DEFAULT};
2177
+ font-weight: 400;
2178
+ line-height: 2.9em;
2179
+ overflow: hidden;
2180
+ white-space: nowrap;
2171
2181
  `;
2172
2182
  const MultiSelect = (_a) => {
2173
2183
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style"]);
@@ -2186,40 +2196,40 @@ const MultiSelect = (_a) => {
2186
2196
  showOptions ? (React.createElement(Options, null,
2187
2197
  React.createElement(Checklist, { onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2188
2198
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
2189
- };
2190
-
2191
- const Wrapper$4 = styled.div `
2192
- display: flex;
2193
- padding: 16px 30px;
2194
- align-items: center;
2195
- gap: 20px;
2196
- align-self: stretch;
2197
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2198
- `;
2199
- const Title = styled.div `
2200
- display: flex;
2201
- align-items: center;
2202
- gap: 20px;
2203
- `;
2204
- const Info = styled.div `
2205
- display: flex;
2206
- flex-direction: column;
2207
- align-items: flex-start;
2208
- gap: 4px;
2209
- flex: 1 0 0;
2210
- `;
2211
- const Breadcrumbs = styled.div `
2212
- display: flex;
2213
- align-items: center;
2214
- gap: 4px;
2215
- `;
2216
- const Actions = styled.div `
2217
- display: flex;
2218
- align-items: center;
2219
- gap: 8px;
2199
+ };
2200
+
2201
+ const Wrapper$4 = styled.div `
2202
+ display: flex;
2203
+ padding: 16px 30px;
2204
+ align-items: center;
2205
+ gap: 20px;
2206
+ align-self: stretch;
2207
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2208
+ `;
2209
+ const Title = styled.div `
2210
+ display: flex;
2211
+ align-items: center;
2212
+ gap: 20px;
2213
+ `;
2214
+ const Info = styled.div `
2215
+ display: flex;
2216
+ flex-direction: column;
2217
+ align-items: flex-start;
2218
+ gap: 4px;
2219
+ flex: 1 0 0;
2220
+ `;
2221
+ const Breadcrumbs = styled.div `
2222
+ display: flex;
2223
+ align-items: center;
2224
+ gap: 4px;
2225
+ `;
2226
+ const Actions = styled.div `
2227
+ display: flex;
2228
+ align-items: center;
2229
+ gap: 8px;
2220
2230
  `;
2221
2231
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2222
- const { format = 'primary', menuItems = [], label = '', } = buttonMenu || {};
2232
+ const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, } = buttonMenu || {};
2223
2233
  return (React.createElement(Wrapper$4, null,
2224
2234
  React.createElement(Info, null,
2225
2235
  React.createElement(Title, null,
@@ -2235,14 +2245,14 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2235
2245
  const { label } = action, buttonProps = __rest(action, ["label"]);
2236
2246
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2237
2247
  }),
2238
- menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
2239
- };
2240
-
2241
- const Wrapper$3 = styled.nav `
2242
- box-sizing: border-box;
2243
- display: flex;
2244
- align-items: center;
2245
- column-gap: 10px;
2248
+ menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
2249
+ };
2250
+
2251
+ const Wrapper$3 = styled.nav `
2252
+ box-sizing: border-box;
2253
+ display: flex;
2254
+ align-items: center;
2255
+ column-gap: 10px;
2246
2256
  `;
2247
2257
  const Pagination = (_a) => {
2248
2258
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2271,82 +2281,82 @@ const Pagination = (_a) => {
2271
2281
  value: `${p}`,
2272
2282
  })), value: `${currentPage}` }),
2273
2283
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
2274
- };
2275
-
2276
- const Wrapper$2 = styled.label `
2277
- border-radius: 4px;
2278
- padding: 4px 0px 4px 6px;
2279
- margin-left: -6px;
2280
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2281
- display: flex;
2282
- align-items: center;
2283
- font-size: ${FontSizes.DEFAULT};
2284
- line-height: 1.6em;
2285
- box-sizing: border-box;
2286
- position: relative;
2287
-
2288
- &:focus-within {
2289
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2290
- }
2284
+ };
2285
+
2286
+ const Wrapper$2 = styled.label `
2287
+ border-radius: 4px;
2288
+ padding: 4px 0px 4px 6px;
2289
+ margin-left: -6px;
2290
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2291
+ display: flex;
2292
+ align-items: center;
2293
+ font-size: ${FontSizes.DEFAULT};
2294
+ line-height: 1.6em;
2295
+ box-sizing: border-box;
2296
+ position: relative;
2297
+
2298
+ &:focus-within {
2299
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2300
+ }
2291
2301
  `;
2292
2302
  Wrapper$2.defaultProps = { theme: EditableTheme };
2293
- const Input = styled.input `
2294
- font-size: 20px;
2295
- margin: 0px;
2296
- line-height: 1.6em;
2297
- box-sizing: border-box;
2298
- position: absolute;
2299
- opacity: 0;
2300
- cursor: pointer;
2301
- height: 0;
2302
- width: 0;
2303
- &:checked + span {
2304
- border-color: ${Colors.PRIMARY.Hex};
2305
- }
2306
- &:checked + span:after {
2307
- background-color: ${Colors.PRIMARY.Hex};
2308
- display: block;
2309
- }
2310
- &:disabled + span {
2311
- background-color: #fff;
2312
- border-color: ${Colors.MEDIUM_GRAY.Hex};
2313
- }
2314
- &:disabled + span:after {
2315
- background-color: #fff;
2316
- }
2317
- &:checked:disabled + span:after {
2318
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2319
- }
2320
- `;
2321
- const Check = styled.span `
2322
- height: 17px;
2323
- width: 17px;
2324
- border-radius: 50%;
2325
- background-color: #fff;
2326
- border-width: 2px;
2327
- border-style: solid;
2328
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2329
- box-sizing: border-box;
2330
- position: relative;
2331
- &:after {
2332
- content: '';
2333
- position: absolute;
2334
- top: 2px;
2335
- left: 2px;
2336
- width: 9px;
2337
- height: 9px;
2338
- border-radius: 50%;
2339
- box-sizing: border-box;
2340
- display: none;
2341
- }
2342
- `;
2343
- const Label = styled.span `
2344
- font-family: ${FontStyles.DEFAULT};
2345
- font-size: ${FontSizes.DEFAULT};
2346
- font-weight: 400;
2347
- color: ${Colors.BLACK.Hex};
2348
- line-height: 1.6em;
2349
- margin-left: 6px;
2303
+ const Input = styled.input `
2304
+ font-size: 20px;
2305
+ margin: 0px;
2306
+ line-height: 1.6em;
2307
+ box-sizing: border-box;
2308
+ position: absolute;
2309
+ opacity: 0;
2310
+ cursor: pointer;
2311
+ height: 0;
2312
+ width: 0;
2313
+ &:checked + span {
2314
+ border-color: ${Colors.PRIMARY.Hex};
2315
+ }
2316
+ &:checked + span:after {
2317
+ background-color: ${Colors.PRIMARY.Hex};
2318
+ display: block;
2319
+ }
2320
+ &:disabled + span {
2321
+ background-color: #d3d3d3;
2322
+ border-color: #d3d3d3;
2323
+ }
2324
+ &:disabled + span:after {
2325
+ background-color: #fff;
2326
+ }
2327
+ &:checked:disabled + span:after {
2328
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2329
+ }
2330
+ `;
2331
+ const Check = styled.span `
2332
+ height: 17px;
2333
+ width: 17px;
2334
+ border-radius: 50%;
2335
+ background-color: #fff;
2336
+ border-width: 2px;
2337
+ border-style: solid;
2338
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2339
+ box-sizing: border-box;
2340
+ position: relative;
2341
+ &:after {
2342
+ content: '';
2343
+ position: absolute;
2344
+ top: 2px;
2345
+ left: 2px;
2346
+ width: 9px;
2347
+ height: 9px;
2348
+ border-radius: 50%;
2349
+ box-sizing: border-box;
2350
+ display: none;
2351
+ }
2352
+ `;
2353
+ const Label = styled.span `
2354
+ font-family: ${FontStyles.DEFAULT};
2355
+ font-size: ${FontSizes.DEFAULT};
2356
+ font-weight: 400;
2357
+ color: ${Colors.BLACK.Hex};
2358
+ line-height: 1.6em;
2359
+ margin-left: 6px;
2350
2360
  `;
2351
2361
  const Radio = (_a) => {
2352
2362
  var { children, disabled, checked, onChange, value, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip"]);
@@ -2356,77 +2366,77 @@ const Radio = (_a) => {
2356
2366
  React.createElement(Label, null,
2357
2367
  children,
2358
2368
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2359
- };
2360
-
2369
+ };
2370
+
2361
2371
  const RadioList = (_a) => {
2362
2372
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2363
2373
  return (React.createElement(React.Fragment, null, options.map((option) => {
2364
2374
  const label = option.label || option.value;
2365
2375
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2366
2376
  })));
2367
- };
2368
-
2369
- const StyledTable = styled.table `
2370
- width: 100%;
2371
- margin-top: 1px;
2372
- table-layout: ${props => props.$tableLayout || 'auto'};
2373
- border-collapse: collapse;
2374
- text-indent: 0px;
2375
- border-spacing: 0px;
2376
- border-color: none;
2377
- box-sizing: border-box;
2378
- `;
2379
- const Header = styled.th `
2380
- padding: 12px !important;
2381
- text-align: left;
2382
- font-weight: 500;
2383
- border-bottom: 1px solid #e5e5e5;
2384
- border-top: 1px solid #e5e5e5;
2385
- text-transform: uppercase;
2386
- font-size: 12px;
2387
- font-family: ${FontStyles.DEFAULT};
2388
- letter-spacing: 1px;
2389
- white-space: nowrap;
2390
- line-height: 1;
2391
- position: relative;
2392
- box-sizing: border-box;
2393
- width: ${props => props.$width || 'auto'};
2394
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2395
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2377
+ };
2378
+
2379
+ const StyledTable = styled.table `
2380
+ width: 100%;
2381
+ margin-top: 1px;
2382
+ table-layout: ${props => props.$tableLayout || 'auto'};
2383
+ border-collapse: collapse;
2384
+ text-indent: 0px;
2385
+ border-spacing: 0px;
2386
+ border-color: none;
2387
+ box-sizing: border-box;
2388
+ `;
2389
+ const Header = styled.th `
2390
+ padding: 12px !important;
2391
+ text-align: left;
2392
+ font-weight: 500;
2393
+ border-bottom: 1px solid #e5e5e5;
2394
+ border-top: 1px solid #e5e5e5;
2395
+ text-transform: uppercase;
2396
+ font-size: 12px;
2397
+ font-family: ${FontStyles.DEFAULT};
2398
+ letter-spacing: 1px;
2399
+ white-space: nowrap;
2400
+ line-height: 1;
2401
+ position: relative;
2402
+ box-sizing: border-box;
2403
+ width: ${props => props.$width || 'auto'};
2404
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2405
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2396
2406
  `;
2397
2407
  Header.defaultProps = { theme: EditableTheme };
2398
- const Row = styled.tr `
2399
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2400
- transition: all 0.2s;
2401
- background-color: ${props => props.$bgColor};
2402
- box-sizing: border-box;
2403
- &:hover {
2404
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2405
- }
2408
+ const Row = styled.tr `
2409
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2410
+ transition: all 0.2s;
2411
+ background-color: ${props => props.$bgColor};
2412
+ box-sizing: border-box;
2413
+ &:hover {
2414
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2415
+ }
2406
2416
  `;
2407
2417
  Row.defaultProps = { theme: EditableTheme };
2408
- const Column = styled.td `
2409
- padding: 16px 12px !important;
2410
- font-size: ${FontSizes.DEFAULT} !important;
2411
- font-weight: 400 !important;
2412
- font-family: ${FontStyles.DEFAULT};
2413
- border: none !important;
2414
- word-break: break-word;
2415
- line-height: 1.4em;
2416
- box-sizing: border-box;
2417
- text-align: ${props => props.$align || 'left'};
2418
- width: ${props => props.$width || 'auto'};
2419
- `;
2420
- const IconWrapper = styled.span `
2421
- position: absolute;
2422
- top: 50%;
2423
- transform: translateY(-50%);
2424
- margin-left: 2px;
2425
- `;
2426
- const StyledIcon$1 = styled(Icon) `
2427
- > path {
2428
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2429
- }
2418
+ const Column = styled.td `
2419
+ padding: 16px 12px !important;
2420
+ font-size: ${FontSizes.DEFAULT} !important;
2421
+ font-weight: 400 !important;
2422
+ font-family: ${FontStyles.DEFAULT};
2423
+ border: none !important;
2424
+ word-break: break-word;
2425
+ line-height: 1.4em;
2426
+ box-sizing: border-box;
2427
+ text-align: ${props => props.$align || 'left'};
2428
+ width: ${props => props.$width || 'auto'};
2429
+ `;
2430
+ const IconWrapper = styled.span `
2431
+ position: absolute;
2432
+ top: 50%;
2433
+ transform: translateY(-50%);
2434
+ margin-left: 2px;
2435
+ `;
2436
+ const StyledIcon$1 = styled(Icon) `
2437
+ > path {
2438
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2439
+ }
2430
2440
  `;
2431
2441
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2432
2442
  const Table = (_a) => {
@@ -2444,55 +2454,55 @@ const Table = (_a) => {
2444
2454
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2445
2455
  })));
2446
2456
  }))) : null));
2447
- };
2448
-
2449
- const Wrapper$1 = styled.div `
2450
- display: flex;
2451
- box-sizing: border-box;
2452
- align-items: flex-end;
2453
- border-top: 1px solid #e5e5e5;
2454
- border-bottom: 1px solid #e5e5e5;
2455
- flex-shrink: 0;
2456
- align-self: stretch;
2457
- padding: 0;
2458
- margin: 0;
2459
- `;
2460
- const Tab = styled.div `
2461
- display: flex;
2462
- align-items: center;
2463
- gap: 6px;
2464
- font-size: ${FontSizes.DEFAULT};
2465
- font-family: ${FontStyles.DEFAULT};
2466
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2467
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2468
- line-height: 1em;
2469
- padding: 16px 30px 12px;
2470
- margin: 0 0 -1px 0;
2471
- border-bottom-width: 4px;
2472
- border-bottom-style: solid;
2473
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2474
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2475
- box-sizing: border-box;
2476
- &:hover {
2477
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2478
- font-weight: 500;
2479
- }
2457
+ };
2458
+
2459
+ const Wrapper$1 = styled.div `
2460
+ display: flex;
2461
+ box-sizing: border-box;
2462
+ align-items: flex-end;
2463
+ border-top: 1px solid #e5e5e5;
2464
+ border-bottom: 1px solid #e5e5e5;
2465
+ flex-shrink: 0;
2466
+ align-self: stretch;
2467
+ padding: 0;
2468
+ margin: 0;
2469
+ `;
2470
+ const Tab = styled.div `
2471
+ display: flex;
2472
+ align-items: center;
2473
+ gap: 6px;
2474
+ font-size: ${FontSizes.DEFAULT};
2475
+ font-family: ${FontStyles.DEFAULT};
2476
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2477
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2478
+ line-height: 1em;
2479
+ padding: 16px 30px 12px;
2480
+ margin: 0 0 -1px 0;
2481
+ border-bottom-width: 4px;
2482
+ border-bottom-style: solid;
2483
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2484
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2485
+ box-sizing: border-box;
2486
+ &:hover {
2487
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2488
+ font-weight: 500;
2489
+ }
2480
2490
  `;
2481
2491
  Tab.defaultProps = { theme: EditableTheme };
2482
- const Badge = styled.div `
2483
- display: flex;
2484
- width: 18px;
2485
- height: 18px;
2486
- justify-content: center;
2487
- align-items: center;
2488
- border-radius: 9px;
2489
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2490
- color: #fff;
2491
- font-family: ${FontStyles.DEFAULT};
2492
- font-size: 12px;
2493
- font-weight: 500;
2494
- line-height: 1;
2495
- letter-spacing: 1px;
2492
+ const Badge = styled.div `
2493
+ display: flex;
2494
+ width: 18px;
2495
+ height: 18px;
2496
+ justify-content: center;
2497
+ align-items: center;
2498
+ border-radius: 9px;
2499
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2500
+ color: #fff;
2501
+ font-family: ${FontStyles.DEFAULT};
2502
+ font-size: 12px;
2503
+ font-weight: 500;
2504
+ line-height: 1;
2505
+ letter-spacing: 1px;
2496
2506
  `;
2497
2507
  Badge.defaultProps = { theme: EditableTheme };
2498
2508
  const Tabs = (_a) => {
@@ -2504,29 +2514,29 @@ const Tabs = (_a) => {
2504
2514
  label));
2505
2515
  })));
2506
2516
  };
2507
- Tabs.defaultProps = {};
2508
-
2509
- const Track = styled.div `
2510
- height: 24px;
2511
- border-radius: 12px;
2512
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2513
- display: flex;
2514
- align-items: center;
2515
- cursor: pointer;
2516
- width: 40px;
2517
- padding: 2px;
2518
- box-sizing: border-box;
2519
- `;
2520
- const Handle = styled.div `
2521
- width: 20px;
2522
- height: 20px;
2523
- border-radius: 10px;
2524
- background: #ffffff;
2525
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2526
- display: flex;
2527
- align-items: center;
2528
- justify-content: center;
2529
- box-sizing: border-box;
2517
+ Tabs.defaultProps = {};
2518
+
2519
+ const Track = styled.div `
2520
+ height: 24px;
2521
+ border-radius: 12px;
2522
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2523
+ display: flex;
2524
+ align-items: center;
2525
+ cursor: pointer;
2526
+ width: 40px;
2527
+ padding: 2px;
2528
+ box-sizing: border-box;
2529
+ `;
2530
+ const Handle = styled.div `
2531
+ width: 20px;
2532
+ height: 20px;
2533
+ border-radius: 10px;
2534
+ background: #ffffff;
2535
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2536
+ display: flex;
2537
+ align-items: center;
2538
+ justify-content: center;
2539
+ box-sizing: border-box;
2530
2540
  `;
2531
2541
  const Toggle = (_a) => {
2532
2542
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2535,32 +2545,32 @@ const Toggle = (_a) => {
2535
2545
  React.createElement(Handle, { "$on": on },
2536
2546
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2537
2547
  };
2538
- Toggle.defaultProps = {};
2539
-
2540
- const Container = styled.div `
2541
- width: 100%;
2542
- padding: 40px auto;
2543
- gap: 20px;
2544
- display: flex;
2545
- flex-direction: column;
2546
- justify-items: center;
2547
- align-items: center;
2548
- `;
2549
- const Wrapper = styled.div `
2550
- gap: 10px;
2551
- display: flex;
2552
- flex-direction: column;
2553
- justify-items: center;
2554
- align-items: center;
2555
- `;
2556
- const StyledIcon = styled.div `
2557
- display: flex;
2558
- align-items: center;
2559
- justify-content: center;
2560
- width: 80px;
2561
- height: 80px;
2562
- border-radius: 40px;
2563
- background: #f5f5f5;
2548
+ Toggle.defaultProps = {};
2549
+
2550
+ const Container = styled.div `
2551
+ width: 100%;
2552
+ padding: 40px auto;
2553
+ gap: 20px;
2554
+ display: flex;
2555
+ flex-direction: column;
2556
+ justify-items: center;
2557
+ align-items: center;
2558
+ `;
2559
+ const Wrapper = styled.div `
2560
+ gap: 10px;
2561
+ display: flex;
2562
+ flex-direction: column;
2563
+ justify-items: center;
2564
+ align-items: center;
2565
+ `;
2566
+ const StyledIcon = styled.div `
2567
+ display: flex;
2568
+ align-items: center;
2569
+ justify-content: center;
2570
+ width: 80px;
2571
+ height: 80px;
2572
+ border-radius: 40px;
2573
+ background: #f5f5f5;
2564
2574
  `;
2565
2575
  const ZeroState = (_a) => {
2566
2576
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2571,53 +2581,53 @@ const ZeroState = (_a) => {
2571
2581
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2572
2582
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2573
2583
  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 }))));
2574
- };
2575
-
2576
- exports.Accordion = Accordion;
2577
- exports.ActionDialog = ActionDialog;
2578
- exports.Alert = Alert;
2579
- exports.AppHeader = AppHeader;
2580
- exports.AppMenu = AppMenu;
2581
- exports.BulkActionBar = BulkActionBar;
2582
- exports.Button = Button;
2583
- exports.ButtonMenu = ButtonMenu;
2584
- exports.Checkbox = Checkbox;
2585
- exports.Checklist = Checklist;
2586
- exports.Colors = Colors;
2587
- exports.Copy = Copy;
2588
- exports.DatePicker = DatePicker;
2589
- exports.Drawer = Drawer;
2590
- exports.EditableTheme = EditableTheme;
2591
- exports.Field = Field;
2592
- exports.FieldGroup = FieldGroup;
2593
- exports.FileUpload = FileUpload;
2594
- exports.FontSizes = FontSizes;
2595
- exports.FontStyles = FontStyles;
2596
- exports.Heading = Heading;
2597
- exports.Input = Input$1;
2598
- exports.Link = Link;
2599
- exports.Loader = Loader;
2600
- exports.Logo = Logo;
2601
- exports.Modal = Modal;
2602
- exports.MoreMenu = MoreMenu;
2603
- exports.MultiSelect = MultiSelect;
2604
- exports.PageHeader = PageHeader;
2605
- exports.Pagination = Pagination;
2606
- exports.ProgressBar = ProgressBar;
2607
- exports.Radio = Radio;
2608
- exports.RadioList = RadioList;
2609
- exports.Select = Select;
2610
- exports.Table = Table;
2611
- exports.Tabs = Tabs;
2612
- exports.Tag = Tag;
2613
- exports.Toggle = Toggle;
2614
- exports.Tooltip = Tooltip;
2615
- exports.ZeroState = ZeroState;
2616
- exports.formatAsPhone = formatAsPhone;
2617
- exports.formatAsSsn = formatAsSsn;
2618
- exports.getAgesFromDob = getAgesFromDob;
2619
- exports.getDaysForMonth = getDaysForMonth;
2620
- exports.getYears = getYears;
2621
- exports.validateEmail = validateEmail;
2622
- exports.validatePhone = validatePhone;
2623
- //# sourceMappingURL=index.js.map
2584
+ };
2585
+
2586
+ exports.Accordion = Accordion;
2587
+ exports.ActionDialog = ActionDialog;
2588
+ exports.Alert = Alert;
2589
+ exports.AppHeader = AppHeader;
2590
+ exports.AppMenu = AppMenu;
2591
+ exports.BulkActionBar = BulkActionBar;
2592
+ exports.Button = Button;
2593
+ exports.ButtonMenu = ButtonMenu;
2594
+ exports.Checkbox = Checkbox;
2595
+ exports.Checklist = Checklist;
2596
+ exports.Colors = Colors;
2597
+ exports.Copy = Copy;
2598
+ exports.DatePicker = DatePicker;
2599
+ exports.Drawer = Drawer;
2600
+ exports.EditableTheme = EditableTheme;
2601
+ exports.Field = Field;
2602
+ exports.FieldGroup = FieldGroup;
2603
+ exports.FileUpload = FileUpload;
2604
+ exports.FontSizes = FontSizes;
2605
+ exports.FontStyles = FontStyles;
2606
+ exports.Heading = Heading;
2607
+ exports.Input = Input$1;
2608
+ exports.Link = Link;
2609
+ exports.Loader = Loader;
2610
+ exports.Logo = Logo;
2611
+ exports.Modal = Modal;
2612
+ exports.MoreMenu = MoreMenu;
2613
+ exports.MultiSelect = MultiSelect;
2614
+ exports.PageHeader = PageHeader;
2615
+ exports.Pagination = Pagination;
2616
+ exports.ProgressBar = ProgressBar;
2617
+ exports.Radio = Radio;
2618
+ exports.RadioList = RadioList;
2619
+ exports.Select = Select;
2620
+ exports.Table = Table;
2621
+ exports.Tabs = Tabs;
2622
+ exports.Tag = Tag;
2623
+ exports.Toggle = Toggle;
2624
+ exports.Tooltip = Tooltip;
2625
+ exports.ZeroState = ZeroState;
2626
+ exports.formatAsPhone = formatAsPhone;
2627
+ exports.formatAsSsn = formatAsSsn;
2628
+ exports.getAgesFromDob = getAgesFromDob;
2629
+ exports.getDaysForMonth = getDaysForMonth;
2630
+ exports.getYears = getYears;
2631
+ exports.validateEmail = validateEmail;
2632
+ exports.validatePhone = validatePhone;
2633
+ //# sourceMappingURL=index.js.map