@hexure/ui 1.13.15 → 1.13.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/index.js +1161 -1162
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/Modal/Modal.d.ts +2 -0
  4. package/dist/cjs/types/components/Select/Select.d.ts +2 -10
  5. package/dist/esm/index.js +1113 -1115
  6. package/dist/esm/index.js.map +1 -1
  7. package/dist/esm/types/components/Modal/Modal.d.ts +2 -0
  8. package/dist/esm/types/components/Select/Select.d.ts +2 -10
  9. package/dist/index.d.ts +4 -10
  10. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -1,13 +1,13 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var styled = require('styled-components');
5
- var Icon = require('@mdi/react');
6
- var js = require('@mdi/js');
7
- var dayjs = require('dayjs');
8
- var Numeral = require('numeral');
9
- var Moment = require('moment');
10
-
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var styled = require('styled-components');
5
+ var Icon = require('@mdi/react');
6
+ var js = require('@mdi/js');
7
+ var dayjs = require('dayjs');
8
+ var Numeral = require('numeral');
9
+ var Moment = require('moment');
10
+
11
11
  /******************************************************************************
12
12
  Copyright (c) Microsoft Corporation.
13
13
 
@@ -21,22 +21,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
21
21
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
22
22
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
23
23
  PERFORMANCE OF THIS SOFTWARE.
24
- ***************************************************************************** */
25
- /* global Reflect, Promise, SuppressedError, Symbol */
26
-
27
- function __rest(s, e) {
28
- var t = {};
29
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
30
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
32
- }
33
- return t;
34
- }
35
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
36
- var e = new Error(message);
37
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
38
- };
39
-
24
+ ***************************************************************************** */
25
+ /* global Reflect, Promise, SuppressedError, Symbol */
26
+
27
+ function __rest(s, e) {
28
+ var t = {};
29
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
30
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
32
+ }
33
+ return t;
34
+ }
35
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
36
+ var e = new Error(message);
37
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
38
+ };
39
+
40
40
  const Colors = {
41
41
  PRIMARY: {
42
42
  Hex: '#0193D7',
@@ -85,26 +85,26 @@ const FontSizes = {
85
85
  };
86
86
  const EditableTheme = {
87
87
  PRIMARY_COLOR: Colors.PRIMARY,
88
- };
89
-
90
- const Header$3 = styled.div `
91
- display: flex;
92
- align-items: center;
93
- justify-content: space-between;
94
- box-sizing: border-box;
95
- background: #f5f5f5;
96
- border: 1px solid #e5e5e5;
97
- padding: 14px 20px;
98
- height: 50px;
99
- cursor: pointer;
100
- `;
101
- const Title$2 = styled.div `
102
- font-size: ${FontSizes.DEFAULT};
103
- font-weight: 400;
104
- color: ${Colors.BLACK.Hex};
105
- line-height: 1.6em;
106
- font-family: ${FontStyles.DEFAULT};
107
- box-sizing: border-box;
88
+ };
89
+
90
+ const Header$3 = styled.div `
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: space-between;
94
+ box-sizing: border-box;
95
+ background: #f5f5f5;
96
+ border: 1px solid #e5e5e5;
97
+ padding: 14px 20px;
98
+ height: 50px;
99
+ cursor: pointer;
100
+ `;
101
+ const Title$2 = styled.div `
102
+ font-size: ${FontSizes.DEFAULT};
103
+ font-weight: 400;
104
+ color: ${Colors.BLACK.Hex};
105
+ line-height: 1.6em;
106
+ font-family: ${FontStyles.DEFAULT};
107
+ box-sizing: border-box;
108
108
  `;
109
109
  const Accordion = (_a) => {
110
110
  var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -113,13 +113,13 @@ const Accordion = (_a) => {
113
113
  React.createElement(Title$2, null, title),
114
114
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
115
115
  open ? children : null));
116
- };
117
-
118
- const StyledButton = styled.button `
119
- height: ${props => (props.$small ? '30px' : '40px')};
120
- line-height: 1em;
121
- border-radius: ${props => (props.$small ? '15px' : '20px')};
122
- margin: ${props => props.$margin || '0px'};
116
+ };
117
+
118
+ const StyledButton = styled.button `
119
+ height: ${props => (props.$small ? '30px' : '40px')};
120
+ line-height: 1em;
121
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
122
+ margin: ${props => props.$margin || '0px'};
123
123
  padding: ${props => {
124
124
  if (props.$hasChildren) {
125
125
  if (props.$small) {
@@ -130,9 +130,9 @@ const StyledButton = styled.button `
130
130
  }
131
131
  }
132
132
  return '0px';
133
- }};
134
- outline: none;
135
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
133
+ }};
134
+ outline: none;
135
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
136
136
  width: ${props => {
137
137
  if (props.$hasChildren) {
138
138
  return 'auto';
@@ -141,53 +141,53 @@ const StyledButton = styled.button `
141
141
  return '30px';
142
142
  }
143
143
  return '40px';
144
- }};
145
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
150
- border-width: 1px;
151
- border-style: solid;
152
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
153
- box-sizing: border-box;
154
-
155
- &:active,
156
- &:focus,
157
- &:hover {
158
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
159
- }
160
- `;
161
- const Label$5 = styled.span `
162
- color: ${props => props.$content_color || '#fff'};
163
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
164
- font-family: ${FontStyles.DEFAULT};
165
- font-weight: 500;
166
- line-height: 1;
167
- `;
168
- const StyledIcon$6 = styled.span `
169
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
170
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
171
- display: flex;
172
- align-items: center;
173
- box-sizing: border-box;
174
- `;
175
- const Badge$1 = styled.span `
176
- width: ${props => (props.$small ? '20px' : '24px')};
177
- height: ${props => (props.$small ? '20px' : '24px')};
178
- line-height: 1;
179
- display: flex;
180
- align-items: center;
181
- justify-content: center;
182
- border-radius: 100%;
183
- background-color: ${props => props.$bg_color || '#fff'};
184
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
185
- font-size: ${props => (props.$small ? '10px' : '12px')};
186
- font-weight: 600;
187
- font-family: ${FontStyles.DEFAULT};
188
- letter-spacing: -1px;
189
- margin-left: ${props => (props.$small ? '5px' : '10px')};
190
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
144
+ }};
145
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
150
+ border-width: 1px;
151
+ border-style: solid;
152
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
153
+ box-sizing: border-box;
154
+
155
+ &:active,
156
+ &:focus,
157
+ &:hover {
158
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
159
+ }
160
+ `;
161
+ const Label$5 = styled.span `
162
+ color: ${props => props.$content_color || '#fff'};
163
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
164
+ font-family: ${FontStyles.DEFAULT};
165
+ font-weight: 500;
166
+ line-height: 1;
167
+ `;
168
+ const StyledIcon$6 = styled.span `
169
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
170
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
171
+ display: flex;
172
+ align-items: center;
173
+ box-sizing: border-box;
174
+ `;
175
+ const Badge$1 = styled.span `
176
+ width: ${props => (props.$small ? '20px' : '24px')};
177
+ height: ${props => (props.$small ? '20px' : '24px')};
178
+ line-height: 1;
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ border-radius: 100%;
183
+ background-color: ${props => props.$bg_color || '#fff'};
184
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
185
+ font-size: ${props => (props.$small ? '10px' : '12px')};
186
+ font-weight: 600;
187
+ font-family: ${FontStyles.DEFAULT};
188
+ letter-spacing: -1px;
189
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
190
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
191
191
  `;
192
192
  const Button = (_a) => {
193
193
  var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
@@ -229,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,8 +681,8 @@ 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
-
684
+ };
685
+
686
686
  const Wrapper$d = styled.div `
687
687
  background: #fff;
688
688
  border-radius: 8px;
@@ -735,17 +735,14 @@ const MoreMenu = (_a) => {
735
735
  item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
736
736
  React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label)));
737
737
  })));
738
- };
739
-
738
+ };
739
+
740
740
  const MenuWrapper = styled.div `
741
- position: relative;
741
+ position: relative; // Ensure this is relative
742
742
  display: inline-block;
743
743
  `;
744
744
  const StyledMoreMenu = styled(MoreMenu) `
745
- position: fixed;
746
- top: ${props => props.$top};
747
- left: ${props => props.$left};
748
- position: fixed;
745
+ position: absolute; // Changed from fixed to absolute
749
746
  top: ${props => props.$top};
750
747
  left: ${props => props.$left};
751
748
  width: ${props => props.$menuWidth};
@@ -778,44 +775,44 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
778
775
  if (showMenu && menuWrapperRef.current) {
779
776
  const wrapperRect = menuWrapperRef.current.getBoundingClientRect();
780
777
  const menuWidthInt = parseInt(menuWidth, 10);
781
- let top = wrapperRect.top;
782
- let left = wrapperRect.left;
778
+ let top = 0;
779
+ let left = 0;
783
780
  switch (position) {
784
781
  case 'top':
785
- top = wrapperRect.top - 142; // Menu above the wrapper
786
- left = wrapperRect.left;
782
+ top = -142; // Menu above the wrapper
783
+ left = 0;
787
784
  break;
788
785
  case 'bottom':
789
- top = wrapperRect.bottom; // Menu below the wrapper
790
- left = wrapperRect.left;
786
+ top = wrapperRect.height; // Menu below the wrapper
787
+ left = 0;
791
788
  break;
792
789
  case 'left':
793
- top = wrapperRect.top;
794
- left = wrapperRect.left - menuWidthInt; // Menu to the left of the wrapper
790
+ top = 0;
791
+ left = -menuWidthInt; // Menu to the left of the wrapper
795
792
  break;
796
793
  case 'right':
797
- top = wrapperRect.top;
798
- left = wrapperRect.right; // Menu to the right of the wrapper
794
+ top = 0;
795
+ left = wrapperRect.width; // Menu to the right of the wrapper
799
796
  break;
800
797
  case 'bottomLeft':
801
- top = wrapperRect.bottom;
802
- left = wrapperRect.right - menuWidthInt;
798
+ top = wrapperRect.height;
799
+ left = wrapperRect.width - menuWidthInt;
803
800
  break;
804
801
  case 'bottomRight':
805
- top = wrapperRect.bottom;
806
- left = wrapperRect.left;
802
+ top = wrapperRect.height;
803
+ left = 0;
807
804
  break;
808
805
  case 'topRight':
809
- top = wrapperRect.top - 142;
810
- left = wrapperRect.right - 24;
806
+ top = -142;
807
+ left = wrapperRect.width - 24;
811
808
  break;
812
809
  case 'topLeft':
813
- top = wrapperRect.top - 142;
814
- left = wrapperRect.left - 188;
810
+ top = -142;
811
+ left = -188;
815
812
  break;
816
813
  default:
817
- top = wrapperRect.bottom;
818
- left = wrapperRect.left;
814
+ top = wrapperRect.height;
815
+ left = 0;
819
816
  break;
820
817
  }
821
818
  setMenuPosition({ top: `${top}px`, left: `${left}px` });
@@ -824,19 +821,19 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
824
821
  return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
825
822
  React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
826
823
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
827
- };
828
-
829
- const Wrapper$c = styled.div `
830
- display: inline-block;
831
- position: relative;
832
- height: 16px;
833
- `;
834
- const StyledIcon$4 = styled(Icon) `
835
- width: 16px;
836
- height: 16px;
837
- margin: 0px 6px;
838
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
839
- 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;
840
837
  `;
841
838
  StyledIcon$4.defaultProps = { theme: EditableTheme };
842
839
  const positions = {
@@ -874,85 +871,85 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
874
871
  return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
875
872
  trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
876
873
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
877
- };
878
-
879
- const Wrapper$b = styled.label `
880
- border-radius: 4px;
881
- padding: 4px 0px 4px 6px;
882
- margin-left: -6px;
883
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
884
- display: flex;
885
- align-items: center;
886
- font-size: ${FontSizes.DEFAULT};
887
- line-height: 1.6em;
888
- box-sizing: border-box;
889
- position: relative;
890
-
891
- &:focus-within {
892
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
893
- }
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
+ }
894
891
  `;
895
892
  Wrapper$b.defaultProps = { theme: EditableTheme };
896
- const Input$2 = styled.input `
897
- font-size: 20px;
898
- margin: 0px;
899
- line-height: 1.1em;
900
- box-sizing: border-box;
901
- position: absolute;
902
- opacity: 0;
903
- cursor: pointer;
904
- height: 0;
905
- width: 0;
906
- &:checked + span {
907
- background-color: ${Colors.PRIMARY.Hex};
908
- border-color: ${Colors.PRIMARY.Hex};
909
- }
910
- &:checked:disabled + span {
911
- background-color: ${Colors.MEDIUM_GRAY.Hex};
912
- border-color: ${Colors.MEDIUM_GRAY.Hex};
913
- }
914
- &:disabled + span {
915
- background-color: #d3d3d3;
916
- border-color: #d3d3d3;
917
- }
918
- &:checked + span:after {
919
- display: block;
920
- }
921
- `;
922
- const Check$1 = styled.span `
923
- height: 17px;
924
- width: 17px;
925
- min-width: 17px;
926
- background-color: #fff;
927
- border-width: 2px;
928
- border-style: solid;
929
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
930
- box-sizing: border-box;
931
- position: relative;
932
- &:after {
933
- content: '';
934
- position: absolute;
935
- left: 3px;
936
- top: 0px;
937
- width: 7px;
938
- height: 12px;
939
- border: solid white;
940
- border-width: 0 3px 3px 0;
941
- -webkit-transform: rotate(45deg);
942
- -ms-transform: rotate(45deg);
943
- transform: rotate(45deg);
944
- box-sizing: border-box;
945
- display: none;
946
- }
947
- `;
948
- const Label$3 = styled.span `
949
- font-family: ${FontStyles.DEFAULT};
950
- font-size: ${FontSizes.DEFAULT};
951
- font-weight: 400;
952
- line-height: 1.6em;
953
- color: ${props => props.color || Colors.BLACK.Hex};
954
- margin-left: 6px;
955
- 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;
956
953
  `;
957
954
  const Checkbox = (_a) => {
958
955
  var { children, color, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip"]);
@@ -962,16 +959,16 @@ const Checkbox = (_a) => {
962
959
  children ? (React.createElement(Label$3, { color: color },
963
960
  children,
964
961
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
965
- };
966
-
967
- const SelectAll = styled.div `
968
- padding: 8px 12px;
969
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
970
- 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;
971
968
  `;
972
- const Options$1 = styled.div `
973
- padding: 12px;
974
- box-sizing: border-box;
969
+ const Options$1 = styled.div `
970
+ padding: 12px;
971
+ box-sizing: border-box;
975
972
  `;
976
973
  const Checklist = (_a) => {
977
974
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -1008,8 +1005,8 @@ const Checklist = (_a) => {
1008
1005
  const checked = selected.includes(option.value);
1009
1006
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
1010
1007
  }))));
1011
- };
1012
-
1008
+ };
1009
+
1013
1010
  const Wrapper$a = styled.div `
1014
1011
  border-radius: 4px;
1015
1012
  height: 40px;
@@ -1074,48 +1071,42 @@ const SearchInput$1 = styled.input `
1074
1071
  white-space: nowrap;
1075
1072
  `;
1076
1073
  const Select = (_a) => {
1077
- var { options, optionGroups, placeholder, readOnly, invalid, searchable = false, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
1074
+ var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
1078
1075
  const [searchTerm, setSearchTerm] = React.useState('');
1076
+ const [value, setValue] = React.useState(propValue || '');
1079
1077
  const handleSearch = (event) => {
1080
1078
  setSearchTerm(event.target.value);
1081
1079
  };
1082
- const filteredOptions = options === null || options === void 0 ? void 0 : options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); });
1083
- const filteredOptionGroups = optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })));
1080
+ const handleChange = (event) => {
1081
+ setValue(event.target.value);
1082
+ if (onChange) {
1083
+ onChange(event);
1084
+ }
1085
+ };
1086
+ const filteredOptions = searchable
1087
+ ? options === null || options === void 0 ? void 0 : options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); })
1088
+ : options;
1089
+ const filteredOptionGroups = searchable
1090
+ ? optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })))
1091
+ : optionGroups;
1084
1092
  return (React.createElement(Wrapper$a, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
1085
- searchable && (React.createElement(SearchInput$1, Object.assign({ onChange: handleSearch, placeholder: '--Select-One-', type: 'text', value: searchTerm }, accessibleProps))),
1086
- searchable ? (React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
1087
- placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
1093
+ searchable && (React.createElement(SearchInput$1, Object.assign({ onChange: handleSearch, placeholder: placeholder, type: 'text', value: searchTerm }, accessibleProps))),
1094
+ React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: handleChange, placeholder: placeholder, value: value }, accessibleProps),
1095
+ placeholder && !value && (React.createElement("option", { disabled: true, value: '' }, placeholder)),
1088
1096
  filteredOptionGroups &&
1089
- filteredOptionGroups.map((group, i) => {
1090
- return (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => {
1091
- return (option.label && (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)));
1092
- })));
1093
- }),
1097
+ filteredOptionGroups.map((group, i) => (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))))),
1094
1098
  filteredOptions &&
1095
- filteredOptions.map((option, i) => {
1096
- return (option.label && (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)));
1097
- }))) : (React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
1098
- placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
1099
- optionGroups &&
1100
- optionGroups.map((group, i) => {
1101
- return (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => {
1102
- return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
1103
- })));
1104
- }),
1105
- options &&
1106
- options.map((option, i) => {
1107
- return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
1108
- }))),
1099
+ filteredOptions.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
1109
1100
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
1110
- };
1111
-
1112
- const DatePickerWrapper = styled.div `
1113
- display: flex;
1114
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1101
+ };
1102
+
1103
+ const DatePickerWrapper = styled.div `
1104
+ display: flex;
1105
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1115
1106
  `;
1116
- const Middle = styled.div `
1117
- margin: 0px -1px;
1118
- flex-grow: 1;
1107
+ const Middle = styled.div `
1108
+ margin: 0px -1px;
1109
+ flex-grow: 1;
1119
1110
  `;
1120
1111
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, onChange, style, }) => {
1121
1112
  const [selectedDay, setSelectedDay] = React.useState('');
@@ -1197,66 +1188,66 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1197
1188
  React.createElement(Middle, null,
1198
1189
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1199
1190
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1200
- };
1201
-
1202
- const Scrim$1 = styled.div `
1203
- position: ${({ $position }) => $position};
1204
- top: 0;
1205
- right: 0;
1206
- bottom: 0;
1207
- left: 0;
1208
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1209
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1210
- `;
1211
- const Container$2 = styled.div `
1212
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1213
- min-width: 400px;
1214
- width: ${({ $width }) => $width || '400px'};
1215
- overflow: hidden;
1216
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1217
- outline: none;
1218
- border: none;
1219
- position: ${({ $position }) => $position};
1220
- top: 0;
1221
- right: 0;
1222
- bottom: 0;
1223
- padding: 0px;
1224
- display: flex;
1225
- flex-direction: column;
1226
- box-sizing: border-box;
1227
- background: #fff;
1228
- `;
1229
- const Header$2 = styled.div `
1230
- padding: 30px 20px;
1231
- display: flex;
1232
- align-items: flex-start;
1233
- box-sizing: border-box;
1234
- flex-shrink: 0;
1235
- background: #fff;
1236
- `;
1237
- const Close$1 = styled.div `
1238
- margin-left: auto;
1239
- display: flex;
1240
- align-items: center;
1241
- padding-left: 20px;
1242
- cursor: pointer;
1243
- `;
1244
- const ContentWrapper$1 = styled.div `
1245
- overflow-x: hidden;
1246
- overflow-y: auto;
1247
- box-sizing: border-box;
1248
- flex: 1;
1249
- background: #fff;
1250
- `;
1251
- const ButtonBar$1 = styled.div `
1252
- padding: 20px;
1253
- display: flex;
1254
- align-items: center;
1255
- justify-content: flex-end;
1256
- box-sizing: border-box;
1257
- gap: 10px;
1258
- flex-shrink: 0;
1259
- background: #fff;
1191
+ };
1192
+
1193
+ const Scrim$1 = styled.div `
1194
+ position: ${({ $position }) => $position};
1195
+ top: 0;
1196
+ right: 0;
1197
+ bottom: 0;
1198
+ left: 0;
1199
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1200
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1201
+ `;
1202
+ const Container$2 = styled.div `
1203
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1204
+ min-width: 400px;
1205
+ width: ${({ $width }) => $width || '400px'};
1206
+ overflow: hidden;
1207
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1208
+ outline: none;
1209
+ border: none;
1210
+ position: ${({ $position }) => $position};
1211
+ top: 0;
1212
+ right: 0;
1213
+ bottom: 0;
1214
+ padding: 0px;
1215
+ display: flex;
1216
+ flex-direction: column;
1217
+ box-sizing: border-box;
1218
+ background: #fff;
1219
+ `;
1220
+ const Header$2 = styled.div `
1221
+ padding: 30px 20px;
1222
+ display: flex;
1223
+ align-items: flex-start;
1224
+ box-sizing: border-box;
1225
+ flex-shrink: 0;
1226
+ background: #fff;
1227
+ `;
1228
+ const Close$1 = styled.div `
1229
+ margin-left: auto;
1230
+ display: flex;
1231
+ align-items: center;
1232
+ padding-left: 20px;
1233
+ cursor: pointer;
1234
+ `;
1235
+ const ContentWrapper$1 = styled.div `
1236
+ overflow-x: hidden;
1237
+ overflow-y: auto;
1238
+ box-sizing: border-box;
1239
+ flex: 1;
1240
+ background: #fff;
1241
+ `;
1242
+ const ButtonBar$1 = styled.div `
1243
+ padding: 20px;
1244
+ display: flex;
1245
+ align-items: center;
1246
+ justify-content: flex-end;
1247
+ box-sizing: border-box;
1248
+ gap: 10px;
1249
+ flex-shrink: 0;
1250
+ background: #fff;
1260
1251
  `;
1261
1252
  const Drawer = (_a) => {
1262
1253
  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"]);
@@ -1284,55 +1275,55 @@ const Drawer = (_a) => {
1284
1275
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
1285
1276
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null),
1286
1277
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1287
- };
1288
-
1289
- const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1290
- const LabelRow = styled.div `
1291
- display: flex;
1292
- align-items: center;
1293
- justify-content: space-between;
1294
- margin: 0 0 4px 0;
1295
- box-sizing: border-box;
1296
- `;
1297
- const Label$2 = styled.label `
1298
- font-size: ${FontSizes.DEFAULT};
1299
- font-weight: 500;
1300
- line-height: 1.3em;
1301
- font-family: ${FontStyles.DEFAULT};
1302
- color: ${Colors.BLACK.Hex};
1303
- display: flex;
1304
- align-items: center;
1305
- `;
1306
- const Required = styled.span `
1307
- color: ${Colors.RED.Hex};
1308
- margin-left: 4px;
1309
- `;
1310
- const Action = styled.span `
1311
- font-size: ${FontSizes.DEFAULT};
1312
- font-weight: 500;
1313
- line-height: 1em;
1314
- font-family: ${FontStyles.DEFAULT};
1315
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1316
- cursor: pointer;
1317
- `;
1318
- Action.defaultProps = { theme: EditableTheme };
1319
- const Description = styled.div `
1320
- font-size: ${FontSizes.SMALL};
1321
- font-weight: 400;
1322
- line-height: 1.3em;
1323
- font-family: ${FontStyles.DEFAULT};
1324
- color: ${Colors.BLACK.Hex};
1325
- margin: 0 0 8px 0;
1326
- box-sizing: border-box;
1327
- `;
1328
- const Validation = styled.div `
1329
- font-size: ${FontSizes.SMALL};
1330
- font-weight: 400;
1331
- line-height: 1.3em;
1332
- font-family: ${FontStyles.DEFAULT};
1333
- color: ${Colors.RED.Hex};
1334
- margin: 4px 0 0 0;
1335
- box-sizing: border-box;
1278
+ };
1279
+
1280
+ const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1281
+ const LabelRow = styled.div `
1282
+ display: flex;
1283
+ align-items: center;
1284
+ justify-content: space-between;
1285
+ margin: 0 0 4px 0;
1286
+ box-sizing: border-box;
1287
+ `;
1288
+ const Label$2 = styled.label `
1289
+ font-size: ${FontSizes.DEFAULT};
1290
+ font-weight: 500;
1291
+ line-height: 1.3em;
1292
+ font-family: ${FontStyles.DEFAULT};
1293
+ color: ${Colors.BLACK.Hex};
1294
+ display: flex;
1295
+ align-items: center;
1296
+ `;
1297
+ const Required = styled.span `
1298
+ color: ${Colors.RED.Hex};
1299
+ margin-left: 4px;
1300
+ `;
1301
+ const Action = styled.span `
1302
+ font-size: ${FontSizes.DEFAULT};
1303
+ font-weight: 500;
1304
+ line-height: 1em;
1305
+ font-family: ${FontStyles.DEFAULT};
1306
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1307
+ cursor: pointer;
1308
+ `;
1309
+ Action.defaultProps = { theme: EditableTheme };
1310
+ const Description = styled.div `
1311
+ font-size: ${FontSizes.SMALL};
1312
+ font-weight: 400;
1313
+ line-height: 1.3em;
1314
+ font-family: ${FontStyles.DEFAULT};
1315
+ color: ${Colors.BLACK.Hex};
1316
+ margin: 0 0 8px 0;
1317
+ box-sizing: border-box;
1318
+ `;
1319
+ const Validation = styled.div `
1320
+ font-size: ${FontSizes.SMALL};
1321
+ font-weight: 400;
1322
+ line-height: 1.3em;
1323
+ font-family: ${FontStyles.DEFAULT};
1324
+ color: ${Colors.RED.Hex};
1325
+ margin: 4px 0 0 0;
1326
+ box-sizing: border-box;
1336
1327
  `;
1337
1328
  const Field = (_a) => {
1338
1329
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1346,112 +1337,112 @@ const Field = (_a) => {
1346
1337
  description ? React.createElement(Description, null, description) : null,
1347
1338
  children,
1348
1339
  validationText ? React.createElement(Validation, null, validationText) : null));
1349
- };
1350
-
1351
- const Wrapper$8 = styled.fieldset `
1352
- margin-inline-start: 0px;
1353
- margin-inline-end: 0px;
1354
- padding-block-start: 0px;
1355
- padding-inline-start: 0px;
1356
- padding-inline-end: 0px;
1357
- padding-block-end: 0px;
1358
- min-inline-size: min-content;
1359
- border-width: 0px;
1360
- border-style: none;
1361
- border-color: transparent;
1362
- border-image: none;
1363
- `;
1364
- const Label$1 = styled.legend `
1365
- padding-inline-start: 0px;
1366
- padding-inline-end: 0px;
1367
-
1368
- color: ${Colors.BLACK.Hex};
1369
- font-family: ${FontStyles.DEFAULT};
1370
- font-size: ${FontSizes.DEFAULT};
1371
- font-weight: 500;
1372
- line-height: 22px;
1373
- margin-bottom: 6px;
1374
- `;
1375
- const Content$1 = styled.div `
1376
- padding: 20px;
1377
- border-radius: 8px;
1378
- background: #fcfcfc;
1340
+ };
1341
+
1342
+ const Wrapper$8 = styled.fieldset `
1343
+ margin-inline-start: 0px;
1344
+ margin-inline-end: 0px;
1345
+ padding-block-start: 0px;
1346
+ padding-inline-start: 0px;
1347
+ padding-inline-end: 0px;
1348
+ padding-block-end: 0px;
1349
+ min-inline-size: min-content;
1350
+ border-width: 0px;
1351
+ border-style: none;
1352
+ border-color: transparent;
1353
+ border-image: none;
1354
+ `;
1355
+ const Label$1 = styled.legend `
1356
+ padding-inline-start: 0px;
1357
+ padding-inline-end: 0px;
1358
+
1359
+ color: ${Colors.BLACK.Hex};
1360
+ font-family: ${FontStyles.DEFAULT};
1361
+ font-size: ${FontSizes.DEFAULT};
1362
+ font-weight: 500;
1363
+ line-height: 22px;
1364
+ margin-bottom: 6px;
1365
+ `;
1366
+ const Content$1 = styled.div `
1367
+ padding: 20px;
1368
+ border-radius: 8px;
1369
+ background: #fcfcfc;
1379
1370
  `;
1380
1371
  const FieldGroup = ({ children, label }) => {
1381
1372
  return (React.createElement(Wrapper$8, null,
1382
1373
  React.createElement(Label$1, null, label),
1383
1374
  React.createElement(Content$1, null, children)));
1384
- };
1385
-
1386
- const Dropzone = styled.div `
1387
- border-radius: 8px;
1388
- border-width: 1px;
1389
- border-style: dashed;
1390
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1391
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1392
- cursor: copy;
1375
+ };
1376
+
1377
+ const Dropzone = styled.div `
1378
+ border-radius: 8px;
1379
+ border-width: 1px;
1380
+ border-style: dashed;
1381
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1382
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1383
+ cursor: copy;
1393
1384
  `;
1394
1385
  Dropzone.defaultProps = { theme: EditableTheme };
1395
- const IconWrapper$1 = styled.div `
1396
- width: 80px;
1397
- height: 80px;
1398
- border-radius: 40px;
1399
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1400
- display: flex;
1401
- align-items: center;
1402
- justify-content: center;
1403
- `;
1404
- const StyledIcon$3 = styled(Icon) `
1405
- width: 40px !important;
1406
- height: 40px !important;
1407
-
1408
- > path {
1409
- fill: ${Colors.GRAY.Hex} !important;
1410
- }
1411
- `;
1412
- const ClickZone = styled.div `
1413
- margin: 40px 20px;
1414
- display: flex;
1415
- flex-direction: column;
1416
- align-items: center;
1417
- gap: 16px;
1418
- `;
1419
- const Content = styled.div `
1420
- display: flex;
1421
- flex-direction: column;
1422
- align-items: center;
1423
- gap: 2px;
1424
- `;
1425
- const Files = styled.div `
1426
- display: flex;
1427
- flex-direction: column;
1428
- align-self: stretch;
1429
- gap: 10px;
1430
- margin: 20px;
1431
- `;
1432
- const MessageDiv = styled.div `
1433
- display: flex;
1434
- align-items: center;
1435
- justify-content: center;
1436
- `;
1437
- const File = styled.div `
1438
- display: flex;
1439
- padding: 10px;
1440
- align-items: center;
1441
- justify-content: space-between;
1442
- gap: 10px;
1443
- border-radius: 4px;
1444
- border: 1px solid #cccccc;
1445
- background: #ffffff;
1446
- `;
1447
- const Remove = styled(Icon) `
1448
- width: 24px;
1449
- height: 24px;
1450
- cursor: pointer;
1451
-
1452
- > path {
1453
- fill: ${Colors.RED.Hex} !important;
1454
- }
1386
+ const IconWrapper$1 = styled.div `
1387
+ width: 80px;
1388
+ height: 80px;
1389
+ border-radius: 40px;
1390
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1391
+ display: flex;
1392
+ align-items: center;
1393
+ justify-content: center;
1394
+ `;
1395
+ const StyledIcon$3 = styled(Icon) `
1396
+ width: 40px !important;
1397
+ height: 40px !important;
1398
+
1399
+ > path {
1400
+ fill: ${Colors.GRAY.Hex} !important;
1401
+ }
1402
+ `;
1403
+ const ClickZone = styled.div `
1404
+ margin: 40px 20px;
1405
+ display: flex;
1406
+ flex-direction: column;
1407
+ align-items: center;
1408
+ gap: 16px;
1409
+ `;
1410
+ const Content = styled.div `
1411
+ display: flex;
1412
+ flex-direction: column;
1413
+ align-items: center;
1414
+ gap: 2px;
1415
+ `;
1416
+ const Files = styled.div `
1417
+ display: flex;
1418
+ flex-direction: column;
1419
+ align-self: stretch;
1420
+ gap: 10px;
1421
+ margin: 20px;
1422
+ `;
1423
+ const MessageDiv = styled.div `
1424
+ display: flex;
1425
+ align-items: center;
1426
+ justify-content: center;
1427
+ `;
1428
+ const File = styled.div `
1429
+ display: flex;
1430
+ padding: 10px;
1431
+ align-items: center;
1432
+ justify-content: space-between;
1433
+ gap: 10px;
1434
+ border-radius: 4px;
1435
+ border: 1px solid #cccccc;
1436
+ background: #ffffff;
1437
+ `;
1438
+ const Remove = styled(Icon) `
1439
+ width: 24px;
1440
+ height: 24px;
1441
+ cursor: pointer;
1442
+
1443
+ > path {
1444
+ fill: ${Colors.RED.Hex} !important;
1445
+ }
1455
1446
  `;
1456
1447
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
1457
1448
  const inputRef = React.useRef(null);
@@ -1569,8 +1560,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1569
1560
  React.createElement(Copy, { align: 'center', color: 'GRAY' }, message),
1570
1561
  tooltipInfo && (React.createElement("span", null,
1571
1562
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1572
- };
1573
-
1563
+ };
1564
+
1574
1565
  const getAgesFromDob = (dob) => {
1575
1566
  let calculated_current_age = null;
1576
1567
  let calculated_nearest_age = null;
@@ -1643,8 +1634,8 @@ const formatAsSsn = (number) => {
1643
1634
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1644
1635
  }
1645
1636
  return formatted_value;
1646
- };
1647
-
1637
+ };
1638
+
1648
1639
  const StyledInput = styled.input `
1649
1640
  border: none !important;
1650
1641
  background: none !important;
@@ -1740,7 +1731,7 @@ const SuggestedValues = styled.div `
1740
1731
  position: absolute;
1741
1732
  right: -1px;
1742
1733
  top: 39px;
1743
- z-index: 10;
1734
+ z-index: 9999;
1744
1735
  max-height: 220px;
1745
1736
  overflow: auto;
1746
1737
  `;
@@ -1836,6 +1827,7 @@ const Input$1 = (_a) => {
1836
1827
  }
1837
1828
  if (format === 'currency_decimal') {
1838
1829
  formatted_value = formatCurrencyDecimal(formatted_value);
1830
+ formatted_value = formatCurrencyDecimal(formatted_value);
1839
1831
  }
1840
1832
  if (format === 'ssn' && type !== 'password') {
1841
1833
  formatted_value = formatAsSsn(internalValue);
@@ -1893,63 +1885,63 @@ const Input$1 = (_a) => {
1893
1885
  onSuggestedSelect();
1894
1886
  setShowOptions(false);
1895
1887
  } }, suggestedValue))))) : null));
1896
- };
1897
-
1898
- const Wrapper$7 = styled.a `
1899
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1900
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1901
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1902
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1903
- font-weight: 500;
1904
- font-style: normal;
1905
- text-decoration: 'none';
1906
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1907
- margin: 0px;
1908
- padding: 0px;
1909
- box-sizing: border-box;
1910
- cursor: pointer;
1888
+ };
1889
+
1890
+ const Wrapper$7 = styled.a `
1891
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1892
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1893
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1894
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1895
+ font-weight: 500;
1896
+ font-style: normal;
1897
+ text-decoration: 'none';
1898
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1899
+ margin: 0px;
1900
+ padding: 0px;
1901
+ box-sizing: border-box;
1902
+ cursor: pointer;
1911
1903
  `;
1912
1904
  Wrapper$7.defaultProps = { theme: EditableTheme };
1913
1905
  const Link = (_a) => {
1914
1906
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1915
1907
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1916
- };
1917
-
1918
- const dash = styled.keyframes `
1919
- 0% {
1920
- stroke-dasharray: 1, 160;
1921
- stroke-dashoffset: 0;
1922
- }
1923
- 50% {
1924
- stroke-dasharray: 80, 160;
1925
- stroke-dashoffset: -32;
1926
- }
1927
- 100% {
1928
- stroke-dasharray: 80, 160;
1929
- stroke-dashoffset: -124;
1930
- }
1931
- `;
1932
- const Spinner = styled.svg `
1933
- z-index: 2;
1934
- position: absolute;
1935
- top: 50%;
1936
- left: 50%;
1937
- transform: translate(-50%, -50%);
1938
- margin: 0 auto;
1939
- width: 40px;
1940
- height: 40px;
1941
- `;
1942
- const Path = styled.path `
1943
- stroke: #0193d7;
1944
- stroke-linecap: round;
1945
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1946
- animation: ${dash} 1.1s ease-in-out infinite;
1908
+ };
1909
+
1910
+ const dash = styled.keyframes `
1911
+ 0% {
1912
+ stroke-dasharray: 1, 160;
1913
+ stroke-dashoffset: 0;
1914
+ }
1915
+ 50% {
1916
+ stroke-dasharray: 80, 160;
1917
+ stroke-dashoffset: -32;
1918
+ }
1919
+ 100% {
1920
+ stroke-dasharray: 80, 160;
1921
+ stroke-dashoffset: -124;
1922
+ }
1923
+ `;
1924
+ const Spinner = styled.svg `
1925
+ z-index: 2;
1926
+ position: absolute;
1927
+ top: 50%;
1928
+ left: 50%;
1929
+ transform: translate(-50%, -50%);
1930
+ margin: 0 auto;
1931
+ width: 40px;
1932
+ height: 40px;
1933
+ `;
1934
+ const Path = styled.path `
1935
+ stroke: #0193d7;
1936
+ stroke-linecap: round;
1937
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1938
+ animation: ${dash} 1.1s ease-in-out infinite;
1947
1939
  `;
1948
1940
  const Loader = () => {
1949
1941
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1950
1942
  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' })));
1951
- };
1952
-
1943
+ };
1944
+
1953
1945
  const Steps = styled.div `
1954
1946
  padding: 20px;
1955
1947
  border-bottom: 1px solid #e7e6e6;
@@ -2006,8 +1998,8 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
2006
1998
  step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
2007
1999
  React.createElement(StepLabel, null, step.label))));
2008
2000
  })));
2009
- };
2010
-
2001
+ };
2002
+
2011
2003
  const Wrapper$6 = styled.div `
2012
2004
  position: fixed;
2013
2005
  top: 0;
@@ -2077,7 +2069,7 @@ const ButtonBar = styled.div `
2077
2069
  box-sizing: border-box;
2078
2070
  `;
2079
2071
  const Modal = (_a) => {
2080
- var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
2072
+ var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton"]);
2081
2073
  React.useEffect(() => {
2082
2074
  document.onkeydown = e => {
2083
2075
  if (e.key === 'Escape') {
@@ -2097,8 +2089,15 @@ const Modal = (_a) => {
2097
2089
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiClose, size: '24px' }))),
2098
2090
  steps ? React.createElement(ProgressBar, { steps: steps }) : null,
2099
2091
  React.createElement(ContentWrapper, null, children),
2100
- primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
2101
- tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
2092
+ primaryButton || secondaryButton || tertiaryButton || quarternaryButton ? (React.createElement(ButtonBar, null,
2093
+ tertiaryButton || quarternaryButton ? (React.createElement("div", { style: {
2094
+ marginRight: 'auto',
2095
+ paddingRight: 40,
2096
+ display: 'flex',
2097
+ alignItems: 'center',
2098
+ } },
2099
+ tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
2100
+ quarternaryButton ? (React.createElement(Button, Object.assign({}, quarternaryButton, { format: quarternaryButton.format || 'secondary' }))) : null)) : null,
2102
2101
  primaryButton || secondaryButton ? (React.createElement("div", { style: {
2103
2102
  marginLeft: 'auto',
2104
2103
  paddingLeft: 40,
@@ -2107,21 +2106,21 @@ const Modal = (_a) => {
2107
2106
  } },
2108
2107
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
2109
2108
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
2110
- };
2111
-
2112
- const Wrapper$5 = styled.div `
2113
- position: relative;
2114
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2115
- `;
2116
- const Trigger = styled.div `
2117
- box-sizing: border-box;
2118
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2119
- height: 40px;
2120
- padding: 0 10px;
2121
- position: relative;
2122
- cursor: pointer;
2123
- border-width: 1px;
2124
- border-style: solid;
2109
+ };
2110
+
2111
+ const Wrapper$5 = styled.div `
2112
+ position: relative;
2113
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2114
+ `;
2115
+ const Trigger = styled.div `
2116
+ box-sizing: border-box;
2117
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2118
+ height: 40px;
2119
+ padding: 0 10px;
2120
+ position: relative;
2121
+ cursor: pointer;
2122
+ border-width: 1px;
2123
+ border-style: solid;
2125
2124
  border-color: ${props => {
2126
2125
  if (props.$invalid) {
2127
2126
  return Colors.RED.Hex;
@@ -2132,67 +2131,67 @@ const Trigger = styled.div `
2132
2131
  else {
2133
2132
  return '#cccccc';
2134
2133
  }
2135
- }};
2136
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2137
- background-image: none;
2138
- display: flex;
2139
- width: 100%;
2140
- align-items: center;
2141
- justify-content: space-between;
2142
- z-index: 1;
2134
+ }};
2135
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2136
+ background-image: none;
2137
+ display: flex;
2138
+ width: 100%;
2139
+ align-items: center;
2140
+ justify-content: space-between;
2141
+ z-index: 1;
2143
2142
  `;
2144
2143
  Trigger.defaultProps = { theme: EditableTheme };
2145
- const Value = styled.div `
2146
- color: ${Colors.BLACK.Hex};
2147
- font-family: ${FontStyles.DEFAULT};
2148
- font-size: ${FontSizes.DEFAULT};
2149
- font-weight: 400;
2150
- line-height: 2.9em;
2151
- overflow: hidden;
2152
- text-overflow: ellipsis;
2153
- white-space: nowrap;
2154
- width: 100%;
2155
- `;
2156
- const Options = styled.div `
2157
- background: #fff;
2158
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2159
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2160
- border-radius: 0px 0px 4px 4px;
2161
- border-style: solid;
2162
- border-top: none;
2163
- border-width: 1px;
2164
- left: 0;
2165
- position: relative;
2166
- right: 0;
2167
- z-index: 10;
2168
- max-height: 220px;
2169
- overflow: auto;
2144
+ const Value = styled.div `
2145
+ color: ${Colors.BLACK.Hex};
2146
+ font-family: ${FontStyles.DEFAULT};
2147
+ font-size: ${FontSizes.DEFAULT};
2148
+ font-weight: 400;
2149
+ line-height: 2.9em;
2150
+ overflow: hidden;
2151
+ text-overflow: ellipsis;
2152
+ white-space: nowrap;
2153
+ width: 100%;
2154
+ `;
2155
+ const Options = styled.div `
2156
+ background: #fff;
2157
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2158
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2159
+ border-radius: 0px 0px 4px 4px;
2160
+ border-style: solid;
2161
+ border-top: none;
2162
+ border-width: 1px;
2163
+ left: 0;
2164
+ position: relative;
2165
+ right: 0;
2166
+ z-index: 10;
2167
+ max-height: 220px;
2168
+ overflow: auto;
2170
2169
  `;
2171
2170
  Options.defaultProps = { theme: EditableTheme };
2172
- const Scrim = styled.div `
2173
- bottom: 0;
2174
- left: 0;
2175
- position: fixed;
2176
- right: 0;
2177
- top: 0;
2178
- z-index: 9;
2179
- `;
2180
- const SearchInput = styled.input `
2181
- position: absolute;
2182
- left: 2px;
2183
- top: 2px;
2184
- z-index: 999;
2185
- width: 90%;
2186
- height: 30px;
2187
- border: none;
2188
- outline: none;
2189
- color: ${Colors.BLACK.Hex};
2190
- font-family: ${FontStyles.DEFAULT};
2191
- font-size: ${FontSizes.DEFAULT};
2192
- font-weight: 400;
2193
- line-height: 2.9em;
2194
- overflow: hidden;
2195
- white-space: nowrap;
2171
+ const Scrim = styled.div `
2172
+ bottom: 0;
2173
+ left: 0;
2174
+ position: fixed;
2175
+ right: 0;
2176
+ top: 0;
2177
+ z-index: 9;
2178
+ `;
2179
+ const SearchInput = styled.input `
2180
+ position: absolute;
2181
+ left: 2px;
2182
+ top: 2px;
2183
+ z-index: 999;
2184
+ width: 90%;
2185
+ height: 30px;
2186
+ border: none;
2187
+ outline: none;
2188
+ color: ${Colors.BLACK.Hex};
2189
+ font-family: ${FontStyles.DEFAULT};
2190
+ font-size: ${FontSizes.DEFAULT};
2191
+ font-weight: 400;
2192
+ line-height: 2.9em;
2193
+ overflow: hidden;
2194
+ white-space: nowrap;
2196
2195
  `;
2197
2196
  const MultiSelect = (_a) => {
2198
2197
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style"]);
@@ -2211,8 +2210,8 @@ const MultiSelect = (_a) => {
2211
2210
  showOptions ? (React.createElement(Options, null,
2212
2211
  React.createElement(Checklist, { onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2213
2212
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
2214
- };
2215
-
2213
+ };
2214
+
2216
2215
  const Wrapper$4 = styled.div `
2217
2216
  display: flex;
2218
2217
  padding: 16px 30px;
@@ -2261,13 +2260,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2261
2260
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2262
2261
  }),
2263
2262
  menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
2264
- };
2265
-
2266
- const Wrapper$3 = styled.nav `
2267
- box-sizing: border-box;
2268
- display: flex;
2269
- align-items: center;
2270
- column-gap: 10px;
2263
+ };
2264
+
2265
+ const Wrapper$3 = styled.nav `
2266
+ box-sizing: border-box;
2267
+ display: flex;
2268
+ align-items: center;
2269
+ column-gap: 10px;
2271
2270
  `;
2272
2271
  const Pagination = (_a) => {
2273
2272
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2296,82 +2295,82 @@ const Pagination = (_a) => {
2296
2295
  value: `${p}`,
2297
2296
  })), value: `${currentPage}` }),
2298
2297
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
2299
- };
2300
-
2301
- const Wrapper$2 = styled.label `
2302
- border-radius: 4px;
2303
- padding: 4px 0px 4px 6px;
2304
- margin-left: -6px;
2305
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2306
- display: flex;
2307
- align-items: center;
2308
- font-size: ${FontSizes.DEFAULT};
2309
- line-height: 1.6em;
2310
- box-sizing: border-box;
2311
- position: relative;
2312
-
2313
- &:focus-within {
2314
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2315
- }
2298
+ };
2299
+
2300
+ const Wrapper$2 = styled.label `
2301
+ border-radius: 4px;
2302
+ padding: 4px 0px 4px 6px;
2303
+ margin-left: -6px;
2304
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2305
+ display: flex;
2306
+ align-items: center;
2307
+ font-size: ${FontSizes.DEFAULT};
2308
+ line-height: 1.6em;
2309
+ box-sizing: border-box;
2310
+ position: relative;
2311
+
2312
+ &:focus-within {
2313
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2314
+ }
2316
2315
  `;
2317
2316
  Wrapper$2.defaultProps = { theme: EditableTheme };
2318
- const Input = styled.input `
2319
- font-size: 20px;
2320
- margin: 0px;
2321
- line-height: 1.6em;
2322
- box-sizing: border-box;
2323
- position: absolute;
2324
- opacity: 0;
2325
- cursor: pointer;
2326
- height: 0;
2327
- width: 0;
2328
- &:checked + span {
2329
- border-color: ${Colors.PRIMARY.Hex};
2330
- }
2331
- &:checked + span:after {
2332
- background-color: ${Colors.PRIMARY.Hex};
2333
- display: block;
2334
- }
2335
- &:disabled + span {
2336
- background-color: #d3d3d3;
2337
- border-color: #d3d3d3;
2338
- }
2339
- &:disabled + span:after {
2340
- background-color: #fff;
2341
- }
2342
- &:checked:disabled + span:after {
2343
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2344
- }
2345
- `;
2346
- const Check = styled.span `
2347
- height: 17px;
2348
- width: 17px;
2349
- border-radius: 50%;
2350
- background-color: #fff;
2351
- border-width: 2px;
2352
- border-style: solid;
2353
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2354
- box-sizing: border-box;
2355
- position: relative;
2356
- &:after {
2357
- content: '';
2358
- position: absolute;
2359
- top: 2px;
2360
- left: 2px;
2361
- width: 9px;
2362
- height: 9px;
2363
- border-radius: 50%;
2364
- box-sizing: border-box;
2365
- display: none;
2366
- }
2367
- `;
2368
- const Label = styled.span `
2369
- font-family: ${FontStyles.DEFAULT};
2370
- font-size: ${FontSizes.DEFAULT};
2371
- font-weight: 400;
2372
- color: ${Colors.BLACK.Hex};
2373
- line-height: 1.6em;
2374
- margin-left: 6px;
2317
+ const Input = styled.input `
2318
+ font-size: 20px;
2319
+ margin: 0px;
2320
+ line-height: 1.6em;
2321
+ box-sizing: border-box;
2322
+ position: absolute;
2323
+ opacity: 0;
2324
+ cursor: pointer;
2325
+ height: 0;
2326
+ width: 0;
2327
+ &:checked + span {
2328
+ border-color: ${Colors.PRIMARY.Hex};
2329
+ }
2330
+ &:checked + span:after {
2331
+ background-color: ${Colors.PRIMARY.Hex};
2332
+ display: block;
2333
+ }
2334
+ &:disabled + span {
2335
+ background-color: #d3d3d3;
2336
+ border-color: #d3d3d3;
2337
+ }
2338
+ &:disabled + span:after {
2339
+ background-color: #fff;
2340
+ }
2341
+ &:checked:disabled + span:after {
2342
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2343
+ }
2344
+ `;
2345
+ const Check = styled.span `
2346
+ height: 17px;
2347
+ width: 17px;
2348
+ border-radius: 50%;
2349
+ background-color: #fff;
2350
+ border-width: 2px;
2351
+ border-style: solid;
2352
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2353
+ box-sizing: border-box;
2354
+ position: relative;
2355
+ &:after {
2356
+ content: '';
2357
+ position: absolute;
2358
+ top: 2px;
2359
+ left: 2px;
2360
+ width: 9px;
2361
+ height: 9px;
2362
+ border-radius: 50%;
2363
+ box-sizing: border-box;
2364
+ display: none;
2365
+ }
2366
+ `;
2367
+ const Label = styled.span `
2368
+ font-family: ${FontStyles.DEFAULT};
2369
+ font-size: ${FontSizes.DEFAULT};
2370
+ font-weight: 400;
2371
+ color: ${Colors.BLACK.Hex};
2372
+ line-height: 1.6em;
2373
+ margin-left: 6px;
2375
2374
  `;
2376
2375
  const Radio = (_a) => {
2377
2376
  var { children, disabled, checked, onChange, value, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip"]);
@@ -2381,77 +2380,77 @@ const Radio = (_a) => {
2381
2380
  React.createElement(Label, null,
2382
2381
  children,
2383
2382
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2384
- };
2385
-
2383
+ };
2384
+
2386
2385
  const RadioList = (_a) => {
2387
2386
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2388
2387
  return (React.createElement(React.Fragment, null, options.map((option) => {
2389
2388
  const label = option.label || option.value;
2390
2389
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2391
2390
  })));
2392
- };
2393
-
2394
- const StyledTable = styled.table `
2395
- width: 100%;
2396
- margin-top: 1px;
2397
- table-layout: ${props => props.$tableLayout || 'auto'};
2398
- border-collapse: collapse;
2399
- text-indent: 0px;
2400
- border-spacing: 0px;
2401
- border-color: none;
2402
- box-sizing: border-box;
2403
- `;
2404
- const Header = styled.th `
2405
- padding: 12px !important;
2406
- text-align: left;
2407
- font-weight: 500;
2408
- border-bottom: 1px solid #e5e5e5;
2409
- border-top: 1px solid #e5e5e5;
2410
- text-transform: uppercase;
2411
- font-size: 12px;
2412
- font-family: ${FontStyles.DEFAULT};
2413
- letter-spacing: 1px;
2414
- white-space: nowrap;
2415
- line-height: 1;
2416
- position: relative;
2417
- box-sizing: border-box;
2418
- width: ${props => props.$width || 'auto'};
2419
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2420
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2391
+ };
2392
+
2393
+ const StyledTable = styled.table `
2394
+ width: 100%;
2395
+ margin-top: 1px;
2396
+ table-layout: ${props => props.$tableLayout || 'auto'};
2397
+ border-collapse: collapse;
2398
+ text-indent: 0px;
2399
+ border-spacing: 0px;
2400
+ border-color: none;
2401
+ box-sizing: border-box;
2402
+ `;
2403
+ const Header = styled.th `
2404
+ padding: 12px !important;
2405
+ text-align: left;
2406
+ font-weight: 500;
2407
+ border-bottom: 1px solid #e5e5e5;
2408
+ border-top: 1px solid #e5e5e5;
2409
+ text-transform: uppercase;
2410
+ font-size: 12px;
2411
+ font-family: ${FontStyles.DEFAULT};
2412
+ letter-spacing: 1px;
2413
+ white-space: nowrap;
2414
+ line-height: 1;
2415
+ position: relative;
2416
+ box-sizing: border-box;
2417
+ width: ${props => props.$width || 'auto'};
2418
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2419
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2421
2420
  `;
2422
2421
  Header.defaultProps = { theme: EditableTheme };
2423
- const Row = styled.tr `
2424
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2425
- transition: all 0.2s;
2426
- background-color: ${props => props.$bgColor};
2427
- box-sizing: border-box;
2428
- &:hover {
2429
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2430
- }
2422
+ const Row = styled.tr `
2423
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2424
+ transition: all 0.2s;
2425
+ background-color: ${props => props.$bgColor};
2426
+ box-sizing: border-box;
2427
+ &:hover {
2428
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2429
+ }
2431
2430
  `;
2432
2431
  Row.defaultProps = { theme: EditableTheme };
2433
- const Column = styled.td `
2434
- padding: 16px 12px !important;
2435
- font-size: ${FontSizes.DEFAULT} !important;
2436
- font-weight: 400 !important;
2437
- font-family: ${FontStyles.DEFAULT};
2438
- border: none !important;
2439
- word-break: break-word;
2440
- line-height: 1.4em;
2441
- box-sizing: border-box;
2442
- text-align: ${props => props.$align || 'left'};
2443
- width: ${props => props.$width || 'auto'};
2444
- `;
2445
- const IconWrapper = styled.span `
2446
- position: absolute;
2447
- top: 50%;
2448
- transform: translateY(-50%);
2449
- margin-left: 2px;
2450
- `;
2451
- const StyledIcon$1 = styled(Icon) `
2452
- > path {
2453
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2454
- }
2432
+ const Column = styled.td `
2433
+ padding: 16px 12px !important;
2434
+ font-size: ${FontSizes.DEFAULT} !important;
2435
+ font-weight: 400 !important;
2436
+ font-family: ${FontStyles.DEFAULT};
2437
+ border: none !important;
2438
+ word-break: break-word;
2439
+ line-height: 1.4em;
2440
+ box-sizing: border-box;
2441
+ text-align: ${props => props.$align || 'left'};
2442
+ width: ${props => props.$width || 'auto'};
2443
+ `;
2444
+ const IconWrapper = styled.span `
2445
+ position: absolute;
2446
+ top: 50%;
2447
+ transform: translateY(-50%);
2448
+ margin-left: 2px;
2449
+ `;
2450
+ const StyledIcon$1 = styled(Icon) `
2451
+ > path {
2452
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2453
+ }
2455
2454
  `;
2456
2455
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2457
2456
  const Table = (_a) => {
@@ -2469,55 +2468,55 @@ const Table = (_a) => {
2469
2468
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2470
2469
  })));
2471
2470
  }))) : null));
2472
- };
2473
-
2474
- const Wrapper$1 = styled.div `
2475
- display: flex;
2476
- box-sizing: border-box;
2477
- align-items: flex-end;
2478
- border-top: 1px solid #e5e5e5;
2479
- border-bottom: 1px solid #e5e5e5;
2480
- flex-shrink: 0;
2481
- align-self: stretch;
2482
- padding: 0;
2483
- margin: 0;
2484
- `;
2485
- const Tab = styled.div `
2486
- display: flex;
2487
- align-items: center;
2488
- gap: 6px;
2489
- font-size: ${FontSizes.DEFAULT};
2490
- font-family: ${FontStyles.DEFAULT};
2491
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2492
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2493
- line-height: 1em;
2494
- padding: 16px 30px 12px;
2495
- margin: 0 0 -1px 0;
2496
- border-bottom-width: 4px;
2497
- border-bottom-style: solid;
2498
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2499
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2500
- box-sizing: border-box;
2501
- &:hover {
2502
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2503
- font-weight: 500;
2504
- }
2471
+ };
2472
+
2473
+ const Wrapper$1 = styled.div `
2474
+ display: flex;
2475
+ box-sizing: border-box;
2476
+ align-items: flex-end;
2477
+ border-top: 1px solid #e5e5e5;
2478
+ border-bottom: 1px solid #e5e5e5;
2479
+ flex-shrink: 0;
2480
+ align-self: stretch;
2481
+ padding: 0;
2482
+ margin: 0;
2483
+ `;
2484
+ const Tab = styled.div `
2485
+ display: flex;
2486
+ align-items: center;
2487
+ gap: 6px;
2488
+ font-size: ${FontSizes.DEFAULT};
2489
+ font-family: ${FontStyles.DEFAULT};
2490
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2491
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2492
+ line-height: 1em;
2493
+ padding: 16px 30px 12px;
2494
+ margin: 0 0 -1px 0;
2495
+ border-bottom-width: 4px;
2496
+ border-bottom-style: solid;
2497
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2498
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2499
+ box-sizing: border-box;
2500
+ &:hover {
2501
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2502
+ font-weight: 500;
2503
+ }
2505
2504
  `;
2506
2505
  Tab.defaultProps = { theme: EditableTheme };
2507
- const Badge = styled.div `
2508
- display: flex;
2509
- width: 18px;
2510
- height: 18px;
2511
- justify-content: center;
2512
- align-items: center;
2513
- border-radius: 9px;
2514
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2515
- color: #fff;
2516
- font-family: ${FontStyles.DEFAULT};
2517
- font-size: 12px;
2518
- font-weight: 500;
2519
- line-height: 1;
2520
- letter-spacing: 1px;
2506
+ const Badge = styled.div `
2507
+ display: flex;
2508
+ width: 18px;
2509
+ height: 18px;
2510
+ justify-content: center;
2511
+ align-items: center;
2512
+ border-radius: 9px;
2513
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2514
+ color: #fff;
2515
+ font-family: ${FontStyles.DEFAULT};
2516
+ font-size: 12px;
2517
+ font-weight: 500;
2518
+ line-height: 1;
2519
+ letter-spacing: 1px;
2521
2520
  `;
2522
2521
  Badge.defaultProps = { theme: EditableTheme };
2523
2522
  const Tabs = (_a) => {
@@ -2529,29 +2528,29 @@ const Tabs = (_a) => {
2529
2528
  label));
2530
2529
  })));
2531
2530
  };
2532
- Tabs.defaultProps = {};
2533
-
2534
- const Track = styled.div `
2535
- height: 24px;
2536
- border-radius: 12px;
2537
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2538
- display: flex;
2539
- align-items: center;
2540
- cursor: pointer;
2541
- width: 40px;
2542
- padding: 2px;
2543
- box-sizing: border-box;
2544
- `;
2545
- const Handle = styled.div `
2546
- width: 20px;
2547
- height: 20px;
2548
- border-radius: 10px;
2549
- background: #ffffff;
2550
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2551
- display: flex;
2552
- align-items: center;
2553
- justify-content: center;
2554
- box-sizing: border-box;
2531
+ Tabs.defaultProps = {};
2532
+
2533
+ const Track = styled.div `
2534
+ height: 24px;
2535
+ border-radius: 12px;
2536
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2537
+ display: flex;
2538
+ align-items: center;
2539
+ cursor: pointer;
2540
+ width: 40px;
2541
+ padding: 2px;
2542
+ box-sizing: border-box;
2543
+ `;
2544
+ const Handle = styled.div `
2545
+ width: 20px;
2546
+ height: 20px;
2547
+ border-radius: 10px;
2548
+ background: #ffffff;
2549
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2550
+ display: flex;
2551
+ align-items: center;
2552
+ justify-content: center;
2553
+ box-sizing: border-box;
2555
2554
  `;
2556
2555
  const Toggle = (_a) => {
2557
2556
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2560,8 +2559,8 @@ const Toggle = (_a) => {
2560
2559
  React.createElement(Handle, { "$on": on },
2561
2560
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2562
2561
  };
2563
- Toggle.defaultProps = {};
2564
-
2562
+ Toggle.defaultProps = {};
2563
+
2565
2564
  const Container = styled.div `
2566
2565
  width: 100%;
2567
2566
  padding: 40px auto;
@@ -2596,53 +2595,53 @@ const ZeroState = (_a) => {
2596
2595
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2597
2596
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2598
2597
  action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, onClick: action.onClick }))));
2599
- };
2600
-
2601
- exports.Accordion = Accordion;
2602
- exports.ActionDialog = ActionDialog;
2603
- exports.Alert = Alert;
2604
- exports.AppHeader = AppHeader;
2605
- exports.AppMenu = AppMenu;
2606
- exports.BulkActionBar = BulkActionBar;
2607
- exports.Button = Button;
2608
- exports.ButtonMenu = ButtonMenu;
2609
- exports.Checkbox = Checkbox;
2610
- exports.Checklist = Checklist;
2611
- exports.Colors = Colors;
2612
- exports.Copy = Copy;
2613
- exports.DatePicker = DatePicker;
2614
- exports.Drawer = Drawer;
2615
- exports.EditableTheme = EditableTheme;
2616
- exports.Field = Field;
2617
- exports.FieldGroup = FieldGroup;
2618
- exports.FileUpload = FileUpload;
2619
- exports.FontSizes = FontSizes;
2620
- exports.FontStyles = FontStyles;
2621
- exports.Heading = Heading;
2622
- exports.Input = Input$1;
2623
- exports.Link = Link;
2624
- exports.Loader = Loader;
2625
- exports.Logo = Logo;
2626
- exports.Modal = Modal;
2627
- exports.MoreMenu = MoreMenu;
2628
- exports.MultiSelect = MultiSelect;
2629
- exports.PageHeader = PageHeader;
2630
- exports.Pagination = Pagination;
2631
- exports.ProgressBar = ProgressBar;
2632
- exports.Radio = Radio;
2633
- exports.RadioList = RadioList;
2634
- exports.Select = Select;
2635
- exports.Table = Table;
2636
- exports.Tabs = Tabs;
2637
- exports.Tag = Tag;
2638
- exports.Toggle = Toggle;
2639
- exports.Tooltip = Tooltip;
2640
- exports.ZeroState = ZeroState;
2641
- exports.formatAsPhone = formatAsPhone;
2642
- exports.formatAsSsn = formatAsSsn;
2643
- exports.getAgesFromDob = getAgesFromDob;
2644
- exports.getDaysForMonth = getDaysForMonth;
2645
- exports.getYears = getYears;
2646
- exports.validateEmail = validateEmail;
2647
- exports.validatePhone = validatePhone;
2648
- //# sourceMappingURL=index.js.map
2598
+ };
2599
+
2600
+ exports.Accordion = Accordion;
2601
+ exports.ActionDialog = ActionDialog;
2602
+ exports.Alert = Alert;
2603
+ exports.AppHeader = AppHeader;
2604
+ exports.AppMenu = AppMenu;
2605
+ exports.BulkActionBar = BulkActionBar;
2606
+ exports.Button = Button;
2607
+ exports.ButtonMenu = ButtonMenu;
2608
+ exports.Checkbox = Checkbox;
2609
+ exports.Checklist = Checklist;
2610
+ exports.Colors = Colors;
2611
+ exports.Copy = Copy;
2612
+ exports.DatePicker = DatePicker;
2613
+ exports.Drawer = Drawer;
2614
+ exports.EditableTheme = EditableTheme;
2615
+ exports.Field = Field;
2616
+ exports.FieldGroup = FieldGroup;
2617
+ exports.FileUpload = FileUpload;
2618
+ exports.FontSizes = FontSizes;
2619
+ exports.FontStyles = FontStyles;
2620
+ exports.Heading = Heading;
2621
+ exports.Input = Input$1;
2622
+ exports.Link = Link;
2623
+ exports.Loader = Loader;
2624
+ exports.Logo = Logo;
2625
+ exports.Modal = Modal;
2626
+ exports.MoreMenu = MoreMenu;
2627
+ exports.MultiSelect = MultiSelect;
2628
+ exports.PageHeader = PageHeader;
2629
+ exports.Pagination = Pagination;
2630
+ exports.ProgressBar = ProgressBar;
2631
+ exports.Radio = Radio;
2632
+ exports.RadioList = RadioList;
2633
+ exports.Select = Select;
2634
+ exports.Table = Table;
2635
+ exports.Tabs = Tabs;
2636
+ exports.Tag = Tag;
2637
+ exports.Toggle = Toggle;
2638
+ exports.Tooltip = Tooltip;
2639
+ exports.ZeroState = ZeroState;
2640
+ exports.formatAsPhone = formatAsPhone;
2641
+ exports.formatAsSsn = formatAsSsn;
2642
+ exports.getAgesFromDob = getAgesFromDob;
2643
+ exports.getDaysForMonth = getDaysForMonth;
2644
+ exports.getYears = getYears;
2645
+ exports.validateEmail = validateEmail;
2646
+ exports.validatePhone = validatePhone;
2647
+ //# sourceMappingURL=index.js.map