@hexure/ui 1.13.47 → 1.13.49

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 (18) hide show
  1. package/dist/cjs/index.js +1524 -1524
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/BulkActionBar/BulkActionBar.d.ts +1 -0
  4. package/dist/cjs/types/components/Button/Button.d.ts +2 -0
  5. package/dist/cjs/types/components/PageHeader/PageHeader.d.ts +2 -0
  6. package/dist/cjs/types/components/Pagination/Pagination.d.ts +1 -0
  7. package/dist/esm/index.js +1476 -1476
  8. package/dist/esm/index.js.map +1 -1
  9. package/dist/esm/types/components/BulkActionBar/BulkActionBar.d.ts +1 -0
  10. package/dist/esm/types/components/Button/Button.d.ts +2 -0
  11. package/dist/esm/types/components/PageHeader/PageHeader.d.ts +2 -0
  12. package/dist/esm/types/components/Pagination/Pagination.d.ts +1 -0
  13. package/dist/index.d.ts +87 -81
  14. package/package.json +1 -1
  15. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  16. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
  17. /package/dist/esm/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  18. /package/dist/esm/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
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 { dataItemid, title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["dataItemid", "title", "children", "open", "onClick"]);
@@ -114,21 +114,21 @@ const Accordion = (_a) => {
114
114
  React.createElement(Title$2, { "data-itemid": `${baseId}-title` }, title),
115
115
  React.createElement(Icon, { color: Colors.BLACK.Hex, "data-itemid": `${baseId}-icon`, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
116
116
  open ? React.createElement("div", { "data-itemid": `${baseId}-content` }, children) : null));
117
- };
118
-
119
- const StyledComponent = styled.p `
120
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
121
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
122
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
123
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
124
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
125
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
126
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
127
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
128
- margin: ${props => props.$margin || '0px'};
129
- padding: ${props => props.$padding || '0px'};
130
- text-align: ${props => props.$align || 'left'};
131
- box-sizing: border-box;
117
+ };
118
+
119
+ const StyledComponent = styled.p `
120
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
121
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
122
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
123
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
124
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
125
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
126
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
127
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
128
+ margin: ${props => props.$margin || '0px'};
129
+ padding: ${props => props.$padding || '0px'};
130
+ text-align: ${props => props.$align || 'left'};
131
+ box-sizing: border-box;
132
132
  `;
133
133
  const Copy = (_a) => {
134
134
  var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', dataItemid } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color", "dataItemid"]);
@@ -137,19 +137,19 @@ const Copy = (_a) => {
137
137
  };
138
138
  Copy.defaultProps = {
139
139
  type: 'default',
140
- };
141
-
142
- const Wrapper$h = styled.div `
143
- display: inline-block;
144
- position: relative;
145
- height: 16px;
146
- `;
147
- const StyledIcon$6 = styled(Icon) `
148
- width: 16px;
149
- height: 16px;
150
- margin: 0px 6px;
151
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
152
- cursor: pointer;
140
+ };
141
+
142
+ const Wrapper$h = styled.div `
143
+ display: inline-block;
144
+ position: relative;
145
+ height: 16px;
146
+ `;
147
+ const StyledIcon$6 = styled(Icon) `
148
+ width: 16px;
149
+ height: 16px;
150
+ margin: 0px 6px;
151
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
152
+ cursor: pointer;
153
153
  `;
154
154
  StyledIcon$6.defaultProps = { theme: EditableTheme };
155
155
  const positions = {
@@ -188,13 +188,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
188
188
  return (React.createElement(Wrapper$h, { "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
189
189
  trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline }),
190
190
  show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-copy`, type: 'small' }, children)))) : null));
191
- };
192
-
193
- const StyledButton = styled.button `
194
- height: ${props => (props.$small ? '30px' : '40px')};
195
- line-height: 1em;
196
- border-radius: ${props => (props.$small ? '15px' : '20px')};
197
- margin: ${props => props.$margin || '0px'};
191
+ };
192
+
193
+ const StyledButton = styled.button `
194
+ height: ${props => (props.$small ? '30px' : '40px')};
195
+ line-height: 1em;
196
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
197
+ margin: ${props => props.$margin || '0px'};
198
198
  padding: ${props => {
199
199
  if (props.$hasChildren) {
200
200
  if (props.$small) {
@@ -205,9 +205,9 @@ const StyledButton = styled.button `
205
205
  }
206
206
  }
207
207
  return '0px';
208
- }};
209
- outline: none;
210
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
208
+ }};
209
+ outline: none;
210
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
211
211
  width: ${props => {
212
212
  if (props.$hasChildren) {
213
213
  return 'auto';
@@ -216,58 +216,58 @@ const StyledButton = styled.button `
216
216
  return '30px';
217
217
  }
218
218
  return '40px';
219
- }};
220
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
221
- display: flex;
222
- align-items: center;
223
- justify-content: center;
224
- gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
225
- flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
226
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
227
- border-width: 1px;
228
- border-style: solid;
229
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
230
- box-sizing: border-box;
231
-
232
- &:active,
233
- &:focus,
234
- &:hover {
235
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
236
- }
237
- `;
238
- const Label$5 = styled.span `
239
- color: ${props => props.$content_color || '#fff'};
240
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
241
- font-family: ${FontStyles.DEFAULT};
242
- font-weight: 500;
243
- line-height: 1;
244
- `;
245
- const StyledIcon$5 = styled.span `
246
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
247
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
248
- display: flex;
249
- align-items: center;
250
- box-sizing: border-box;
251
- `;
252
- const Badge$1 = styled.span `
253
- width: ${props => (props.$small ? '20px' : '24px')};
254
- height: ${props => (props.$small ? '20px' : '24px')};
255
- line-height: 1;
256
- display: flex;
257
- align-items: center;
258
- justify-content: center;
259
- border-radius: 100%;
260
- background-color: ${props => props.$bg_color || '#fff'};
261
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
262
- font-size: ${props => (props.$small ? '10px' : '12px')};
263
- font-weight: 600;
264
- font-family: ${FontStyles.DEFAULT};
265
- letter-spacing: -1px;
266
- margin-left: ${props => (props.$small ? '5px' : '10px')};
267
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
219
+ }};
220
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: center;
224
+ gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
225
+ flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
226
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
227
+ border-width: 1px;
228
+ border-style: solid;
229
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
230
+ box-sizing: border-box;
231
+
232
+ &:active,
233
+ &:focus,
234
+ &:hover {
235
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
236
+ }
237
+ `;
238
+ const Label$5 = styled.span `
239
+ color: ${props => props.$content_color || '#fff'};
240
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
241
+ font-family: ${FontStyles.DEFAULT};
242
+ font-weight: 500;
243
+ line-height: 1;
244
+ `;
245
+ const StyledIcon$5 = styled.span `
246
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
247
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
248
+ display: flex;
249
+ align-items: center;
250
+ box-sizing: border-box;
251
+ `;
252
+ const Badge$1 = styled.span `
253
+ width: ${props => (props.$small ? '20px' : '24px')};
254
+ height: ${props => (props.$small ? '20px' : '24px')};
255
+ line-height: 1;
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: center;
259
+ border-radius: 100%;
260
+ background-color: ${props => props.$bg_color || '#fff'};
261
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
262
+ font-size: ${props => (props.$small ? '10px' : '12px')};
263
+ font-weight: 600;
264
+ font-family: ${FontStyles.DEFAULT};
265
+ letter-spacing: -1px;
266
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
267
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
268
268
  `;
269
269
  const Button = (_a) => {
270
- var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', iconPosition = 'after', toolTip, title = '', dataItemid } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title", "dataItemid"]);
270
+ var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', iconPosition = 'after', toolTip, title = '', dataItemid, type = null } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title", "dataItemid", "type"]);
271
271
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
272
272
  const has_children = children && children.length > 0;
273
273
  const button_type_mapping = {
@@ -302,7 +302,7 @@ const Button = (_a) => {
302
302
  };
303
303
  const format_styles = button_type_mapping[format];
304
304
  const baseId = dataItemid || 'button';
305
- const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$iconPosition": iconPosition, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: isForm ? 'submit' : undefined }, accessibleProps, { "data-itemid": `${baseId}-styled-button` }),
305
+ const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$iconPosition": iconPosition, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: type || (isForm ? 'submit' : undefined) }, accessibleProps, { "data-itemid": `${baseId}-styled-button` }),
306
306
  children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small, "data-itemid": `${baseId}-label` }, children)) : null,
307
307
  icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children, "data-itemid": `${baseId}-icon` },
308
308
  React.createElement(Icon, { color: format ? format_styles === null || format_styles === void 0 ? void 0 : format_styles.content_color : '#fff', "data-itemid": `${baseId}-icon-svg`, path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
@@ -311,37 +311,37 @@ const Button = (_a) => {
311
311
  return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
312
312
  }
313
313
  return button_view;
314
- };
315
-
316
- const H1 = styled.h1 `
317
- color: ${Colors.BLACK.Hex};
318
- font-size: 30px;
319
- font-weight: ${props => (props.$bold ? '500' : '400')};
320
- line-height: 1.4em;
321
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
322
- margin: ${props => props.$margin || '0px'};
323
- padding: ${props => props.$padding || '0px'};
324
- box-sizing: border-box;
325
- `;
326
- const H2 = styled.h2 `
327
- color: ${Colors.BLACK.Hex};
328
- font-size: 24px;
329
- font-weight: ${props => (props.$bold ? '500' : '400')};
330
- line-height: 1.33em;
331
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
332
- margin: ${props => props.$margin || '0px'};
333
- padding: ${props => props.$padding || '0px'};
334
- box-sizing: border-box;
335
- `;
336
- const H3 = styled.h3 `
337
- color: ${Colors.BLACK.Hex};
338
- font-size: 18px;
339
- font-weight: ${props => (props.$bold ? '500' : '400')};
340
- line-height: 1.33em;
341
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
342
- margin: ${props => props.$margin || '0px'};
343
- padding: ${props => props.$padding || '0px'};
344
- box-sizing: border-box;
314
+ };
315
+
316
+ const H1 = styled.h1 `
317
+ color: ${Colors.BLACK.Hex};
318
+ font-size: 30px;
319
+ font-weight: ${props => (props.$bold ? '500' : '400')};
320
+ line-height: 1.4em;
321
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
322
+ margin: ${props => props.$margin || '0px'};
323
+ padding: ${props => props.$padding || '0px'};
324
+ box-sizing: border-box;
325
+ `;
326
+ const H2 = styled.h2 `
327
+ color: ${Colors.BLACK.Hex};
328
+ font-size: 24px;
329
+ font-weight: ${props => (props.$bold ? '500' : '400')};
330
+ line-height: 1.33em;
331
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
332
+ margin: ${props => props.$margin || '0px'};
333
+ padding: ${props => props.$padding || '0px'};
334
+ box-sizing: border-box;
335
+ `;
336
+ const H3 = styled.h3 `
337
+ color: ${Colors.BLACK.Hex};
338
+ font-size: 18px;
339
+ font-weight: ${props => (props.$bold ? '500' : '400')};
340
+ line-height: 1.33em;
341
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
342
+ margin: ${props => props.$margin || '0px'};
343
+ padding: ${props => props.$padding || '0px'};
344
+ box-sizing: border-box;
345
345
  `;
346
346
  const Heading = (_a) => {
347
347
  var { bold, children, margin, padding, type, dataItemid } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type", "dataItemid"]);
@@ -361,29 +361,29 @@ const Heading = (_a) => {
361
361
  Heading.defaultProps = {
362
362
  bold: false,
363
363
  type: 'primary',
364
- };
365
-
366
- const Wrapper$g = styled.div `
367
- position: fixed;
368
- top: 0;
369
- right: 0;
370
- bottom: 0;
371
- left: 0;
372
- z-index: 9999;
373
- background: rgba(0, 0, 0, 0.8);
374
- display: flex;
375
- align-items: center;
376
- justify-content: center;
377
- box-sizing: border-box;
364
+ };
365
+
366
+ const Wrapper$g = styled.div `
367
+ position: fixed;
368
+ top: 0;
369
+ right: 0;
370
+ bottom: 0;
371
+ left: 0;
372
+ z-index: 9999;
373
+ background: rgba(0, 0, 0, 0.8);
374
+ display: flex;
375
+ align-items: center;
376
+ justify-content: center;
377
+ box-sizing: border-box;
378
378
  `;
379
379
  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)));
380
- const Buttons$1 = styled.div `
381
- display: flex;
382
- gap: 10px;
383
- align-items: center;
384
- justify-content: center;
385
- margin-top: 30px;
386
- box-sizing: border-box;
380
+ const Buttons$1 = styled.div `
381
+ display: flex;
382
+ gap: 10px;
383
+ align-items: center;
384
+ justify-content: center;
385
+ margin-top: 30px;
386
+ box-sizing: border-box;
387
387
  `;
388
388
  const ActionDialog = (_a) => {
389
389
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {}, dataItemid } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style", "dataItemid"]);
@@ -396,29 +396,29 @@ const ActionDialog = (_a) => {
396
396
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { "data-itemid": `${baseId}-tertiary-button`, format: tertiaryButton.format || 'secondary' }))) : null,
397
397
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": `${baseId}-secondary-button`, format: secondaryButton.format || 'secondary' }))) : null,
398
398
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": `${baseId}-primary-button`, format: primaryButton.format || 'primary' }))) : null)) : null)));
399
- };
400
-
401
- const Wrapper$f = styled.div `
402
- border: 1px solid #f1f1f1;
403
- border-radius: 4px;
404
- border-left-width: 4px;
405
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
406
- display: flex;
407
- align-items: flex-start;
408
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
409
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
410
- box-sizing: border-box;
411
- `;
412
- const StyledIcon$4 = styled(Icon) `
413
- flex-shrink: 0;
414
- `;
415
- const Action$1 = styled.div `
416
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
417
- font-size: ${FontSizes.DEFAULT};
418
- font-family: ${FontStyles.DEFAULT};
419
- font-weight: 500;
420
- cursor: pointer;
421
- margin-top: 6px;
399
+ };
400
+
401
+ const Wrapper$f = styled.div `
402
+ border: 1px solid #f1f1f1;
403
+ border-radius: 4px;
404
+ border-left-width: 4px;
405
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
406
+ display: flex;
407
+ align-items: flex-start;
408
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
409
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
410
+ box-sizing: border-box;
411
+ `;
412
+ const StyledIcon$4 = styled(Icon) `
413
+ flex-shrink: 0;
414
+ `;
415
+ const Action$1 = styled.div `
416
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
417
+ font-size: ${FontSizes.DEFAULT};
418
+ font-family: ${FontStyles.DEFAULT};
419
+ font-weight: 500;
420
+ cursor: pointer;
421
+ margin-top: 6px;
422
422
  `;
423
423
  Action$1.defaultProps = { theme: EditableTheme };
424
424
  const Alert = (_a) => {
@@ -449,8 +449,8 @@ const Alert = (_a) => {
449
449
  title && !small ? (React.createElement(Heading, { bold: true, "data-itemid": `${baseId}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
450
450
  description ? (React.createElement(Copy, { "data-itemid": `${baseId}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
451
451
  action && !small ? (React.createElement(Action$1, { "data-itemid": `${baseId}-action`, onClick: action.onClick }, action.label)) : null)));
452
- };
453
-
452
+ };
453
+
454
454
  const colorMapping = {
455
455
  black: {
456
456
  fill_1: '#000000',
@@ -492,62 +492,62 @@ const Logo = (_a) => {
492
492
  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', "data-itemid": `${baseId}-path-7`, fill: colorMapping[type_parts[1]].fill_1 }),
493
493
  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', "data-itemid": `${baseId}-path-8`, fill: colorMapping[type_parts[1]].fill_1 })));
494
494
  }
495
- };
496
-
497
- const Container$3 = styled.header `
498
- width: 100%;
499
- display: flex;
500
- padding: 20px;
501
- box-sizing: border-box;
502
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
503
- background: '#fff';
504
- justify-content: space-between;
505
- `;
506
- const LogoWrapper = styled.div `
507
- display: flex;
508
- align-items: center;
509
- `;
510
- const Image = styled.img `
511
- height: 30px !important;
512
- width: auto !important;
513
- `;
514
- const Buttons = styled.div `
515
- display: flex;
516
- flex-direction: row;
517
- column-gap: 10px;
518
- flex-direction: reverse;
495
+ };
496
+
497
+ const Container$3 = styled.header `
498
+ width: 100%;
499
+ display: flex;
500
+ padding: 20px;
501
+ box-sizing: border-box;
502
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
503
+ background: '#fff';
504
+ justify-content: space-between;
505
+ `;
506
+ const LogoWrapper = styled.div `
507
+ display: flex;
508
+ align-items: center;
509
+ `;
510
+ const Image = styled.img `
511
+ height: 30px !important;
512
+ width: auto !important;
513
+ `;
514
+ const Buttons = styled.div `
515
+ display: flex;
516
+ flex-direction: row;
517
+ column-gap: 10px;
518
+ flex-direction: reverse;
519
519
  `;
520
520
  const AppHeader = ({ logoUrl, buttons = [], dataItemid }) => {
521
521
  const baseId = dataItemid || 'app-header';
522
522
  return (React.createElement(Container$3, { "data-itemid": `${baseId}-container` },
523
523
  React.createElement(LogoWrapper, { "data-itemid": `${baseId}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { "data-itemid": `${baseId}-logo`, src: logoUrl })) : (React.createElement(Logo, { "data-itemid": `${baseId}-default-logo`, height: '30px' }))),
524
524
  React.createElement(Buttons, { "data-itemid": `${baseId}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { "data-itemid": `${baseId}-button-${i}` })))))));
525
- };
526
-
527
- const Wrapper$e = styled.div `
528
- display: inline-block;
529
- border-radius: 4px;
530
- padding: 4px 6px;
531
- background: ${props => Colors[props.$color].Hex};
532
- color: #ffffff;
533
- box-sizing: border-box;
534
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
535
- `;
536
- const Content$2 = styled.div `
537
- display: flex;
538
- align-items: center;
539
- `;
540
- const Label$4 = styled.div `
541
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
542
- font-size: ${FontSizes.SMALL};
543
- font-weight: 500;
544
- font-family: ${FontStyles.DEFAULT};
545
- line-height: 1.2em;
546
- `;
547
- const Remove$1 = styled.div `
548
- margin-left: 10px;
549
- display: flex;
550
- align-items: center;
525
+ };
526
+
527
+ const Wrapper$e = styled.div `
528
+ display: inline-block;
529
+ border-radius: 4px;
530
+ padding: 4px 6px;
531
+ background: ${props => Colors[props.$color].Hex};
532
+ color: #ffffff;
533
+ box-sizing: border-box;
534
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
535
+ `;
536
+ const Content$2 = styled.div `
537
+ display: flex;
538
+ align-items: center;
539
+ `;
540
+ const Label$4 = styled.div `
541
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
542
+ font-size: ${FontSizes.SMALL};
543
+ font-weight: 500;
544
+ font-family: ${FontStyles.DEFAULT};
545
+ line-height: 1.2em;
546
+ `;
547
+ const Remove$1 = styled.div `
548
+ margin-left: 10px;
549
+ display: flex;
550
+ align-items: center;
551
551
  `;
552
552
  const Tag = (_a) => {
553
553
  var { children, color = 'PRIMARY', removable, onClick, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick", "dataItemid"]);
@@ -557,94 +557,94 @@ const Tag = (_a) => {
557
557
  React.createElement(Label$4, { "$color": color, "data-itemid": `${baseId}-label` }, children),
558
558
  removable ? (React.createElement(Remove$1, { "data-itemid": `${baseId}-remove` },
559
559
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', "data-itemid": `${baseId}-icon`, path: js.mdiClose, size: '15px' }))) : null)));
560
- };
561
-
562
- const SidebarContainer = styled.div `
563
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
564
- display: flex;
565
- flex-direction: column;
566
- height: 100%;
567
- padding: 12px 0px;
568
- width: ${props => (props.$isOpen ? props.$width : '60px')};
569
- `;
570
- const MenuWrapper$1 = styled.button `
571
- display: flex;
572
- align-items: center;
573
- border: 0px;
574
- background-color: transparent;
575
- padding-left: 0px;
576
- border-left-width: 4px;
577
- border-left-style: solid;
578
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
579
- cursor: pointer;
580
- height: 40px;
581
-
582
- &:hover > div {
583
- color: ${props => props.$color.Hex};
584
- }
585
-
586
- &:hover > svg > path {
587
- fill: ${Colors.BLACK.Hex} !important;
588
- }
589
- `;
590
- const MenuIcon = styled(Icon) `
591
- width: 20px;
592
- height: 20px;
593
- margin: 0px 16px;
594
- flex-shrink: 0;
595
-
596
- > path {
597
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
598
- }
599
- `;
600
- const MenuLabel = styled.div `
601
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
602
- flex: 1;
603
- font-size: 12px;
604
- font-style: normal;
605
- font-weight: 600;
606
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
607
- line-height: 16px;
608
- padding: 12px 0px;
609
- letter-spacing: 1px;
610
- `;
611
- const SubMenu = styled.div `
612
- overflow-y: auto;
613
- padding-left: 44px;
614
- padding-right: 20px;
615
- padding-bottom: 10px;
616
- `;
617
- const SubMenuItem = styled.a `
618
- display: block;
619
- padding: 8px 12px;
620
- border-radius: 8px;
621
- font-size: 13px;
622
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
623
- line-height: 20px;
624
- text-decoration: none;
625
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
626
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
627
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
628
- cursor: pointer;
629
-
630
- &:hover {
631
- color: ${props => props.$color.Hex};
632
- font-weight: 500;
633
- }
634
- `;
635
- const Footer = styled.div `
636
- padding: 20px 14px 0px;
637
- display: flex;
638
- align-items: center;
639
- `;
640
- const FooterInfo = styled.div `
641
- display: flex;
642
- flex-direction: column;
643
- flex: 1;
644
- align-items: flex-start;
645
- `;
646
- const SidebarMenuContainer = styled.div `
647
- flex-grow: 1;
560
+ };
561
+
562
+ const SidebarContainer = styled.div `
563
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
564
+ display: flex;
565
+ flex-direction: column;
566
+ height: 100%;
567
+ padding: 12px 0px;
568
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
569
+ `;
570
+ const MenuWrapper$1 = styled.button `
571
+ display: flex;
572
+ align-items: center;
573
+ border: 0px;
574
+ background-color: transparent;
575
+ padding-left: 0px;
576
+ border-left-width: 4px;
577
+ border-left-style: solid;
578
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
579
+ cursor: pointer;
580
+ height: 40px;
581
+
582
+ &:hover > div {
583
+ color: ${props => props.$color.Hex};
584
+ }
585
+
586
+ &:hover > svg > path {
587
+ fill: ${Colors.BLACK.Hex} !important;
588
+ }
589
+ `;
590
+ const MenuIcon = styled(Icon) `
591
+ width: 20px;
592
+ height: 20px;
593
+ margin: 0px 16px;
594
+ flex-shrink: 0;
595
+
596
+ > path {
597
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
598
+ }
599
+ `;
600
+ const MenuLabel = styled.div `
601
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
602
+ flex: 1;
603
+ font-size: 12px;
604
+ font-style: normal;
605
+ font-weight: 600;
606
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
607
+ line-height: 16px;
608
+ padding: 12px 0px;
609
+ letter-spacing: 1px;
610
+ `;
611
+ const SubMenu = styled.div `
612
+ overflow-y: auto;
613
+ padding-left: 44px;
614
+ padding-right: 20px;
615
+ padding-bottom: 10px;
616
+ `;
617
+ const SubMenuItem = styled.a `
618
+ display: block;
619
+ padding: 8px 12px;
620
+ border-radius: 8px;
621
+ font-size: 13px;
622
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
623
+ line-height: 20px;
624
+ text-decoration: none;
625
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
626
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
627
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
628
+ cursor: pointer;
629
+
630
+ &:hover {
631
+ color: ${props => props.$color.Hex};
632
+ font-weight: 500;
633
+ }
634
+ `;
635
+ const Footer = styled.div `
636
+ padding: 20px 14px 0px;
637
+ display: flex;
638
+ align-items: center;
639
+ `;
640
+ const FooterInfo = styled.div `
641
+ display: flex;
642
+ flex-direction: column;
643
+ flex: 1;
644
+ align-items: flex-start;
645
+ `;
646
+ const SidebarMenuContainer = styled.div `
647
+ flex-grow: 1;
648
648
  `;
649
649
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataItemid, }) => {
650
650
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -654,7 +654,7 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataIte
654
654
  React.createElement(SidebarMenuContainer, { "data-itemid": `${baseId}-sidebar-menu-container` }, menu.map((nav_item, navIndex) => {
655
655
  const navItemId = `${baseId}-nav-item-${navIndex}`;
656
656
  return (React.createElement(React.Fragment, { key: navItemId },
657
- React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${navItemId}-menu-wrapper`, onClick: nav_item.onClick, title: collapsed ? (nav_item === null || nav_item === void 0 ? void 0 : nav_item.title) || nav_item.label : '' },
657
+ React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${navItemId}-menu-wrapper`, onClick: nav_item.onClick, title: collapsed ? (nav_item === null || nav_item === void 0 ? void 0 : nav_item.title) || nav_item.label : '', type: 'button' },
658
658
  React.createElement(MenuIcon, { "$active": !!nav_item.is_active, "data-itemid": `${navItemId}-menu-icon`, path: nav_item.icon }),
659
659
  collapsed ? null : (React.createElement(MenuLabel, { "$active": nav_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${navItemId}-menu-label` }, nav_item.label))),
660
660
  nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, { "data-itemid": `${navItemId}-sub-menu` }, nav_item.menu.map((menu_item, menuIndex) => {
@@ -672,76 +672,76 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataIte
672
672
  React.createElement(Button, { "data-itemid": `${baseId}-collapse-button`, icon: collapsed ? js.mdiChevronRight : js.mdiChevronLeft, onClick: (e) => {
673
673
  e.preventDefault();
674
674
  toggleCollapse(!collapsed);
675
- }, small: true }))));
676
- };
677
-
678
- const Wrapper$d = styled.div `
679
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
680
- border-radius: 8px;
681
- box-sizing: border-box;
682
- display: flex;
683
- align-items: center;
684
- justify-content: space-between;
685
- padding: 16px 20px;
675
+ }, small: true, type: 'button' }))));
676
+ };
677
+
678
+ const Wrapper$d = styled.div `
679
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
680
+ border-radius: 8px;
681
+ box-sizing: border-box;
682
+ display: flex;
683
+ align-items: center;
684
+ justify-content: space-between;
685
+ padding: 16px 20px;
686
686
  `;
687
687
  Wrapper$d.defaultProps = { theme: EditableTheme };
688
- const Left = styled.div `
689
- box-sizing: border-box;
690
- display: flex;
691
- align-items: center;
692
- justify-content: space-between;
693
- flex-shrink: 0;
694
- `;
695
- const Info$1 = styled.div `
696
- box-sizing: border-box;
697
- display: flex;
698
- align-items: center;
699
- margin-right: 30px;
700
- `;
701
- const Selected = styled.span `
702
- font-size: 14px;
703
- font-weight: 400;
704
- font-family: ${FontStyles.DEFAULT};
705
- color: ${Colors.BLACK.Hex};
706
- line-height: 1;
707
- `;
708
- const Clear = styled.span `
709
- font-size: 14px;
710
- font-weight: 400;
711
- font-family: ${FontStyles.DEFAULT};
712
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
713
- line-height: 1;
714
- cursor: pointer;
715
- padding-left: 10px;
716
- margin-left: 10px;
717
- border-left: 1px solid #ccc;
688
+ const Left = styled.div `
689
+ box-sizing: border-box;
690
+ display: flex;
691
+ align-items: center;
692
+ justify-content: space-between;
693
+ flex-shrink: 0;
694
+ `;
695
+ const Info$1 = styled.div `
696
+ box-sizing: border-box;
697
+ display: flex;
698
+ align-items: center;
699
+ margin-right: 30px;
700
+ `;
701
+ const Selected = styled.span `
702
+ font-size: 14px;
703
+ font-weight: 400;
704
+ font-family: ${FontStyles.DEFAULT};
705
+ color: ${Colors.BLACK.Hex};
706
+ line-height: 1;
707
+ `;
708
+ const Clear = styled.span `
709
+ font-size: 14px;
710
+ font-weight: 400;
711
+ font-family: ${FontStyles.DEFAULT};
712
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
713
+ line-height: 1;
714
+ cursor: pointer;
715
+ padding-left: 10px;
716
+ margin-left: 10px;
717
+ border-left: 1px solid #ccc;
718
718
  `;
719
719
  Clear.defaultProps = { theme: EditableTheme };
720
- const Actions$1 = styled.div `
721
- box-sizing: border-box;
722
- display: flex;
723
- align-items: center;
724
- column-gap: 10px;
725
- `;
726
- const Error$1 = styled.div `
727
- box-sizing: border-box;
728
- display: flex;
729
- align-items: center;
730
- background: rgba(${Colors.RED.Rgb}, 0.1);
731
- border-radius: 4px;
732
- padding: 6px 8px;
733
- text-overflow: ellipsis;
734
- white-space: nowrap;
735
- overflow: hidden;
736
- margin-left: 30px;
737
- `;
738
- const ErrorMsg = styled.span `
739
- font-size: 14px;
740
- font-weight: 500;
741
- font-family: ${FontStyles.DEFAULT};
742
- line-height: 1em;
743
- color: ${Colors.RED.Hex};
744
- margin-left: 8px;
720
+ const Actions$1 = styled.div `
721
+ box-sizing: border-box;
722
+ display: flex;
723
+ align-items: center;
724
+ column-gap: 10px;
725
+ `;
726
+ const Error$1 = styled.div `
727
+ box-sizing: border-box;
728
+ display: flex;
729
+ align-items: center;
730
+ background: rgba(${Colors.RED.Rgb}, 0.1);
731
+ border-radius: 4px;
732
+ padding: 6px 8px;
733
+ text-overflow: ellipsis;
734
+ white-space: nowrap;
735
+ overflow: hidden;
736
+ margin-left: 30px;
737
+ `;
738
+ const ErrorMsg = styled.span `
739
+ font-size: 14px;
740
+ font-weight: 500;
741
+ font-family: ${FontStyles.DEFAULT};
742
+ line-height: 1em;
743
+ color: ${Colors.RED.Hex};
744
+ margin-left: 8px;
745
745
  `;
746
746
  const BulkActionBar = (_a) => {
747
747
  var { actions = [], errorMsg, onClear, selectedCount = 0, dataItemid } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount", "dataItemid"]);
@@ -757,48 +757,48 @@ const BulkActionBar = (_a) => {
757
757
  errorMsg ? (React.createElement(Error$1, { "data-itemid": `${baseId}-error` },
758
758
  React.createElement(Icon, { color: Colors.RED.Hex, "data-itemid": `${baseId}-error-icon`, path: js.mdiInformationOutline, size: '20px' }),
759
759
  React.createElement(ErrorMsg, { "data-itemid": `${baseId}-error-msg` }, errorMsg))) : null));
760
- };
761
-
762
- const Wrapper$c = styled.div `
763
- background: #fff;
764
- border-radius: 8px;
765
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
766
- display: flex;
767
- flex-direction: column;
768
- gap: 4px;
769
- max-height: ${props => props.$maxHeight || '312px'};
770
- padding: 10px;
771
- width: 200px;
772
- `;
773
- const MenuItem = styled.div `
774
- align-items: center;
775
- border-radius: 8px;
776
- border: 1px solid transparent;
777
- display: flex;
778
- gap: 8px;
779
- height: 38px;
780
- padding: 8px;
781
- &:hover {
782
- background: rgba(1, 147, 215, 0.1);
783
- cursor: pointer;
784
-
785
- svg,
786
- path {
787
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
788
- }
789
- }
760
+ };
761
+
762
+ const Wrapper$c = styled.div `
763
+ background: #fff;
764
+ border-radius: 8px;
765
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
766
+ display: flex;
767
+ flex-direction: column;
768
+ gap: 4px;
769
+ max-height: ${props => props.$maxHeight || '312px'};
770
+ padding: 10px;
771
+ width: 200px;
772
+ `;
773
+ const MenuItem = styled.div `
774
+ align-items: center;
775
+ border-radius: 8px;
776
+ border: 1px solid transparent;
777
+ display: flex;
778
+ gap: 8px;
779
+ height: 38px;
780
+ padding: 8px;
781
+ &:hover {
782
+ background: rgba(1, 147, 215, 0.1);
783
+ cursor: pointer;
784
+
785
+ svg,
786
+ path {
787
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
788
+ }
789
+ }
790
790
  `;
791
791
  MenuItem.defaultProps = { theme: EditableTheme };
792
- const Title$1 = styled.span `
793
- font-family: Roboto;
794
- font-size: 14px;
795
- font-weight: 400;
796
- height: auto;
797
- letter-spacing: 0px;
798
- line-height: 22px;
799
- text-align: left;
800
- color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
801
- pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
792
+ const Title$1 = styled.span `
793
+ font-family: Roboto;
794
+ font-size: 14px;
795
+ font-weight: 400;
796
+ height: auto;
797
+ letter-spacing: 0px;
798
+ line-height: 22px;
799
+ text-align: left;
800
+ color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
801
+ pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
802
802
  `;
803
803
  Title$1.defaultProps = {
804
804
  disabled: false,
@@ -813,19 +813,19 @@ const MoreMenu = (_a) => {
813
813
  item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, "data-itemid": `${itemId}-icon`, path: item.icon, size: '20px' })) : null,
814
814
  React.createElement(Title$1, { "data-itemid": `${itemId}-title`, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label)));
815
815
  })));
816
- };
817
-
818
- const MenuWrapper = styled.div `
819
- position: relative;
820
- display: inline-block;
821
- `;
822
- const StyledMoreMenu = styled(MoreMenu) `
823
- position: absolute;
824
- top: ${props => props.$top};
825
- left: ${props => props.$left};
826
- width: ${props => props.$menuWidth};
827
- max-height: ${props => props.maxHeight};
828
- z-index: 10;
816
+ };
817
+
818
+ const MenuWrapper = styled.div `
819
+ position: relative;
820
+ display: inline-block;
821
+ `;
822
+ const StyledMoreMenu = styled(MoreMenu) `
823
+ position: absolute;
824
+ top: ${props => props.$top};
825
+ left: ${props => props.$left};
826
+ width: ${props => props.$menuWidth};
827
+ max-height: ${props => props.maxHeight};
828
+ z-index: 10;
829
829
  `;
830
830
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, dataItemid, }) => {
831
831
  const [showMenu, toggleMenu] = React.useState(false);
@@ -900,85 +900,85 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
900
900
  return (React.createElement(MenuWrapper, { "data-itemid": `${baseId}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
901
901
  React.createElement(Button, { "data-itemid": `${baseId}-button`, disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
902
902
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, "data-itemid": `${baseId}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
903
- };
904
-
905
- const Wrapper$b = styled.label `
906
- border-radius: 4px;
907
- padding: 4px 0px 4px 6px;
908
- margin-left: -6px;
909
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
910
- display: flex;
911
- align-items: center;
912
- font-size: ${FontSizes.DEFAULT};
913
- line-height: 1.6em;
914
- box-sizing: border-box;
915
- position: relative;
916
-
917
- &:focus-within {
918
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
919
- }
903
+ };
904
+
905
+ const Wrapper$b = styled.label `
906
+ border-radius: 4px;
907
+ padding: 4px 0px 4px 6px;
908
+ margin-left: -6px;
909
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
910
+ display: flex;
911
+ align-items: center;
912
+ font-size: ${FontSizes.DEFAULT};
913
+ line-height: 1.6em;
914
+ box-sizing: border-box;
915
+ position: relative;
916
+
917
+ &:focus-within {
918
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
919
+ }
920
920
  `;
921
921
  Wrapper$b.defaultProps = { theme: EditableTheme };
922
- const Input$2 = styled.input `
923
- font-size: 20px;
924
- margin: 0px;
925
- line-height: 1.1em;
926
- box-sizing: border-box;
927
- position: absolute;
928
- opacity: 0;
929
- cursor: pointer;
930
- height: 0;
931
- width: 0;
932
- &:checked + span {
933
- background-color: ${Colors.PRIMARY.Hex};
934
- border-color: ${Colors.PRIMARY.Hex};
935
- }
936
- &:checked:disabled + span {
937
- background-color: ${Colors.MEDIUM_GRAY.Hex};
938
- border-color: ${Colors.MEDIUM_GRAY.Hex};
939
- }
940
- &:disabled + span {
941
- background-color: #d3d3d3;
942
- border-color: #d3d3d3;
943
- }
944
- &:checked + span:after {
945
- display: block;
946
- }
947
- `;
948
- const Check$1 = styled.span `
949
- height: 17px;
950
- width: 17px;
951
- min-width: 17px;
952
- background-color: #fff;
953
- border-width: 2px;
954
- border-style: solid;
955
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
956
- box-sizing: border-box;
957
- position: relative;
958
- &:after {
959
- content: '';
960
- position: absolute;
961
- left: 3px;
962
- top: 0px;
963
- width: 7px;
964
- height: 12px;
965
- border: solid white;
966
- border-width: 0 3px 3px 0;
967
- -webkit-transform: rotate(45deg);
968
- -ms-transform: rotate(45deg);
969
- transform: rotate(45deg);
970
- box-sizing: border-box;
971
- display: none;
972
- }
973
- `;
974
- const Label$3 = styled.span `
975
- font-family: ${FontStyles.DEFAULT};
976
- font-size: ${FontSizes.DEFAULT};
977
- font-weight: 400;
978
- line-height: 1.6em;
979
- color: ${props => props.color || Colors.BLACK.Hex};
980
- margin-left: 6px;
981
- box-sizing: border-box;
922
+ const Input$2 = styled.input `
923
+ font-size: 20px;
924
+ margin: 0px;
925
+ line-height: 1.1em;
926
+ box-sizing: border-box;
927
+ position: absolute;
928
+ opacity: 0;
929
+ cursor: pointer;
930
+ height: 0;
931
+ width: 0;
932
+ &:checked + span {
933
+ background-color: ${Colors.PRIMARY.Hex};
934
+ border-color: ${Colors.PRIMARY.Hex};
935
+ }
936
+ &:checked:disabled + span {
937
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
938
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
939
+ }
940
+ &:disabled + span {
941
+ background-color: #d3d3d3;
942
+ border-color: #d3d3d3;
943
+ }
944
+ &:checked + span:after {
945
+ display: block;
946
+ }
947
+ `;
948
+ const Check$1 = styled.span `
949
+ height: 17px;
950
+ width: 17px;
951
+ min-width: 17px;
952
+ background-color: #fff;
953
+ border-width: 2px;
954
+ border-style: solid;
955
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
956
+ box-sizing: border-box;
957
+ position: relative;
958
+ &:after {
959
+ content: '';
960
+ position: absolute;
961
+ left: 3px;
962
+ top: 0px;
963
+ width: 7px;
964
+ height: 12px;
965
+ border: solid white;
966
+ border-width: 0 3px 3px 0;
967
+ -webkit-transform: rotate(45deg);
968
+ -ms-transform: rotate(45deg);
969
+ transform: rotate(45deg);
970
+ box-sizing: border-box;
971
+ display: none;
972
+ }
973
+ `;
974
+ const Label$3 = styled.span `
975
+ font-family: ${FontStyles.DEFAULT};
976
+ font-size: ${FontSizes.DEFAULT};
977
+ font-weight: 400;
978
+ line-height: 1.6em;
979
+ color: ${props => props.color || Colors.BLACK.Hex};
980
+ margin-left: 6px;
981
+ box-sizing: border-box;
982
982
  `;
983
983
  const Checkbox = (_a) => {
984
984
  var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid"]);
@@ -989,16 +989,16 @@ const Checkbox = (_a) => {
989
989
  children ? (React.createElement(Label$3, { color: color, "data-itemid": `${baseId}-label` },
990
990
  children,
991
991
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
992
- };
993
-
994
- const SelectAll = styled.div `
995
- padding: 8px 12px;
996
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
997
- box-sizing: border-box;
992
+ };
993
+
994
+ const SelectAll = styled.div `
995
+ padding: 8px 12px;
996
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
997
+ box-sizing: border-box;
998
998
  `;
999
- const Options$1 = styled.div `
1000
- padding: 12px;
1001
- box-sizing: border-box;
999
+ const Options$1 = styled.div `
1000
+ padding: 12px;
1001
+ box-sizing: border-box;
1002
1002
  `;
1003
1003
  const Checklist = (_a) => {
1004
1004
  var { disabled, onChange, options, selected = [], showSelectAll, dataItemid } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll", "dataItemid"]);
@@ -1037,70 +1037,70 @@ const Checklist = (_a) => {
1037
1037
  const optionId = `${baseId}-option-${i}`;
1038
1038
  return (React.createElement(Checkbox, Object.assign({ "data-itemid": `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
1039
1039
  }))));
1040
- };
1041
-
1042
- const Wrapper$a = styled.div `
1043
- border-radius: 4px;
1044
- height: 40px;
1045
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1046
- position: relative;
1047
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1048
- border-width: 1px;
1049
- border-style: solid;
1050
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1051
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1052
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1053
- box-sizing: border-box;
1054
- padding: 10px 0px;
1055
- display: flex;
1056
- align-items: center;
1057
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1058
-
1059
- &:focus-within {
1060
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1061
- }
1040
+ };
1041
+
1042
+ const Wrapper$a = styled.div `
1043
+ border-radius: 4px;
1044
+ height: 40px;
1045
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1046
+ position: relative;
1047
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1048
+ border-width: 1px;
1049
+ border-style: solid;
1050
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1051
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1052
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1053
+ box-sizing: border-box;
1054
+ padding: 10px 0px;
1055
+ display: flex;
1056
+ align-items: center;
1057
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1058
+
1059
+ &:focus-within {
1060
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1061
+ }
1062
1062
  `;
1063
1063
  Wrapper$a.defaultProps = { theme: EditableTheme };
1064
- const Trigger$1 = styled.select `
1065
- appearance: none;
1066
- box-shadow: none;
1067
- outline: none;
1068
- border: none;
1069
- color: ${Colors.BLACK.Hex};
1070
- font-size: ${FontSizes.DEFAULT};
1071
- font-weight: 400;
1072
- font-family: ${FontStyles.DEFAULT};
1073
- line-height: 3.1em;
1074
- background-color: transparent;
1075
- background-image: none;
1076
- width: 100%;
1077
- box-sizing: border-box;
1078
- padding: 0px 30px 0px 10px;
1079
- box-sizing: border-box;
1080
- position: relative;
1081
- z-index: 2;
1082
- `;
1083
- const IconWrapper$2 = styled(Icon) `
1084
- position: absolute;
1085
- right: 9px;
1086
- z-index: 1;
1087
- `;
1088
- const SearchInput$1 = styled.input `
1089
- position: absolute;
1090
- left: 2px;
1091
- top: 2px;
1092
- z-index: 999;
1093
- width: 90%;
1094
- height: 30px;
1095
- border: none;
1096
- outline: none;
1097
- color: ${Colors.BLACK.Hex};
1098
- font-family: ${FontStyles.DEFAULT};
1099
- font-size: ${FontSizes.DEFAULT};
1100
- font-weight: 400;
1101
- line-height: 2.9em;
1102
- overflow: hidden;
1103
- white-space: nowrap;
1064
+ const Trigger$1 = styled.select `
1065
+ appearance: none;
1066
+ box-shadow: none;
1067
+ outline: none;
1068
+ border: none;
1069
+ color: ${Colors.BLACK.Hex};
1070
+ font-size: ${FontSizes.DEFAULT};
1071
+ font-weight: 400;
1072
+ font-family: ${FontStyles.DEFAULT};
1073
+ line-height: 3.1em;
1074
+ background-color: transparent;
1075
+ background-image: none;
1076
+ width: 100%;
1077
+ box-sizing: border-box;
1078
+ padding: 0px 30px 0px 10px;
1079
+ box-sizing: border-box;
1080
+ position: relative;
1081
+ z-index: 2;
1082
+ `;
1083
+ const IconWrapper$2 = styled(Icon) `
1084
+ position: absolute;
1085
+ right: 9px;
1086
+ z-index: 1;
1087
+ `;
1088
+ const SearchInput$1 = styled.input `
1089
+ position: absolute;
1090
+ left: 2px;
1091
+ top: 2px;
1092
+ z-index: 999;
1093
+ width: 90%;
1094
+ height: 30px;
1095
+ border: none;
1096
+ outline: none;
1097
+ color: ${Colors.BLACK.Hex};
1098
+ font-family: ${FontStyles.DEFAULT};
1099
+ font-size: ${FontSizes.DEFAULT};
1100
+ font-weight: 400;
1101
+ line-height: 2.9em;
1102
+ overflow: hidden;
1103
+ white-space: nowrap;
1104
1104
  `;
1105
1105
  const Select = (_a) => {
1106
1106
  var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid"]);
@@ -1135,15 +1135,15 @@ const Select = (_a) => {
1135
1135
  filteredOptions &&
1136
1136
  filteredOptions.map((option, i) => (React.createElement("option", { "data-itemid": `${baseId}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
1137
1137
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, "data-itemid": `${baseId}-icon`, path: js.mdiChevronDown, size: '22px' })));
1138
- };
1139
-
1140
- const DatePickerWrapper = styled.div `
1141
- display: flex;
1142
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1138
+ };
1139
+
1140
+ const DatePickerWrapper = styled.div `
1141
+ display: flex;
1142
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1143
1143
  `;
1144
- const Middle = styled.div `
1145
- margin: 0px -1px;
1146
- flex-grow: 1;
1144
+ const Middle = styled.div `
1145
+ margin: 0px -1px;
1146
+ flex-grow: 1;
1147
1147
  `;
1148
1148
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date,
1149
1149
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1231,66 +1231,66 @@ onChange = () => { }, style, dataItemid, locale, }) => {
1231
1231
  React.createElement(Middle, { "data-itemid": `${baseId}-middle` },
1232
1232
  React.createElement(Select, { "data-itemid": `${baseId}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: (locale === null || locale === void 0 ? void 0 : locale.SelectDay) ? locale === null || locale === void 0 ? void 0 : locale.SelectDay : 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1233
1233
  React.createElement(Select, { "data-itemid": `${baseId}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: (locale === null || locale === void 0 ? void 0 : locale.SelectYear) ? locale === null || locale === void 0 ? void 0 : locale.SelectYear : 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1234
- };
1235
-
1236
- const Scrim$1 = styled.div `
1237
- position: ${({ $position }) => $position};
1238
- top: 0;
1239
- right: 0;
1240
- bottom: 0;
1241
- left: 0;
1242
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1243
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1244
- `;
1245
- const Container$2 = styled.div `
1246
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1247
- min-width: 400px;
1248
- width: ${({ $width }) => $width || '400px'};
1249
- overflow: hidden;
1250
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1251
- outline: none;
1252
- border: none;
1253
- position: ${({ $position }) => $position};
1254
- top: 0;
1255
- right: 0;
1256
- bottom: 0;
1257
- padding: 0px;
1258
- display: flex;
1259
- flex-direction: column;
1260
- box-sizing: border-box;
1261
- background: #fff;
1262
- `;
1263
- const Header$2 = styled.div `
1264
- padding: 30px 20px;
1265
- display: flex;
1266
- align-items: flex-start;
1267
- box-sizing: border-box;
1268
- flex-shrink: 0;
1269
- background: #fff;
1270
- `;
1271
- const Close$1 = styled.div `
1272
- margin-left: auto;
1273
- display: flex;
1274
- align-items: center;
1275
- padding-left: 20px;
1276
- cursor: pointer;
1277
- `;
1278
- const ContentWrapper$1 = styled.div `
1279
- overflow-x: hidden;
1280
- overflow-y: auto;
1281
- box-sizing: border-box;
1282
- flex: 1;
1283
- background: #fff;
1284
- `;
1285
- const ButtonBar$1 = styled.div `
1286
- padding: 20px;
1287
- display: flex;
1288
- align-items: center;
1289
- justify-content: flex-end;
1290
- box-sizing: border-box;
1291
- gap: 10px;
1292
- flex-shrink: 0;
1293
- background: #fff;
1234
+ };
1235
+
1236
+ const Scrim$1 = styled.div `
1237
+ position: ${({ $position }) => $position};
1238
+ top: 0;
1239
+ right: 0;
1240
+ bottom: 0;
1241
+ left: 0;
1242
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1243
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1244
+ `;
1245
+ const Container$2 = styled.div `
1246
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1247
+ min-width: 400px;
1248
+ width: ${({ $width }) => $width || '400px'};
1249
+ overflow: hidden;
1250
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1251
+ outline: none;
1252
+ border: none;
1253
+ position: ${({ $position }) => $position};
1254
+ top: 0;
1255
+ right: 0;
1256
+ bottom: 0;
1257
+ padding: 0px;
1258
+ display: flex;
1259
+ flex-direction: column;
1260
+ box-sizing: border-box;
1261
+ background: #fff;
1262
+ `;
1263
+ const Header$2 = styled.div `
1264
+ padding: 30px 20px;
1265
+ display: flex;
1266
+ align-items: flex-start;
1267
+ box-sizing: border-box;
1268
+ flex-shrink: 0;
1269
+ background: #fff;
1270
+ `;
1271
+ const Close$1 = styled.div `
1272
+ margin-left: auto;
1273
+ display: flex;
1274
+ align-items: center;
1275
+ padding-left: 20px;
1276
+ cursor: pointer;
1277
+ `;
1278
+ const ContentWrapper$1 = styled.div `
1279
+ overflow-x: hidden;
1280
+ overflow-y: auto;
1281
+ box-sizing: border-box;
1282
+ flex: 1;
1283
+ background: #fff;
1284
+ `;
1285
+ const ButtonBar$1 = styled.div `
1286
+ padding: 20px;
1287
+ display: flex;
1288
+ align-items: center;
1289
+ justify-content: flex-end;
1290
+ box-sizing: border-box;
1291
+ gap: 10px;
1292
+ flex-shrink: 0;
1293
+ background: #fff;
1294
1294
  `;
1295
1295
  const Drawer = (_a) => {
1296
1296
  var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width", "dataItemid"]);
@@ -1319,55 +1319,55 @@ const Drawer = (_a) => {
1319
1319
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": `${baseId}-secondary-button`, format: secondaryButton.format || 'secondary' }))) : null,
1320
1320
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": `${baseId}-primary-button`, format: primaryButton.format || 'primary' }))) : null)) : null),
1321
1321
  scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, "data-itemid": `${baseId}-scrim`, onClick: onClose })) : null));
1322
- };
1323
-
1322
+ };
1323
+
1324
1324
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1325
- const LabelRow = styled.div `
1326
- display: flex;
1327
- align-items: center;
1328
- justify-content: space-between;
1329
- margin: 0 0 4px 0;
1330
- box-sizing: border-box;
1331
- `;
1332
- const Label$2 = styled.label `
1333
- font-size: ${FontSizes.DEFAULT};
1334
- font-weight: 500;
1335
- line-height: 1.3em;
1336
- font-family: ${FontStyles.DEFAULT};
1337
- color: ${Colors.BLACK.Hex};
1338
- display: flex;
1339
- align-items: center;
1340
- `;
1341
- const Required = styled.span `
1342
- color: ${Colors.RED.Hex};
1343
- margin-left: 4px;
1344
- `;
1345
- const Action = styled.span `
1346
- font-size: ${FontSizes.DEFAULT};
1347
- font-weight: 500;
1348
- line-height: 1em;
1349
- font-family: ${FontStyles.DEFAULT};
1350
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1351
- cursor: pointer;
1325
+ const LabelRow = styled.div `
1326
+ display: flex;
1327
+ align-items: center;
1328
+ justify-content: space-between;
1329
+ margin: 0 0 4px 0;
1330
+ box-sizing: border-box;
1331
+ `;
1332
+ const Label$2 = styled.label `
1333
+ font-size: ${FontSizes.DEFAULT};
1334
+ font-weight: 500;
1335
+ line-height: 1.3em;
1336
+ font-family: ${FontStyles.DEFAULT};
1337
+ color: ${Colors.BLACK.Hex};
1338
+ display: flex;
1339
+ align-items: center;
1340
+ `;
1341
+ const Required = styled.span `
1342
+ color: ${Colors.RED.Hex};
1343
+ margin-left: 4px;
1344
+ `;
1345
+ const Action = styled.span `
1346
+ font-size: ${FontSizes.DEFAULT};
1347
+ font-weight: 500;
1348
+ line-height: 1em;
1349
+ font-family: ${FontStyles.DEFAULT};
1350
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1351
+ cursor: pointer;
1352
1352
  `;
1353
1353
  Action.defaultProps = { theme: EditableTheme };
1354
- const Description = styled.div `
1355
- font-size: ${FontSizes.SMALL};
1356
- font-weight: 400;
1357
- line-height: 1.3em;
1358
- font-family: ${FontStyles.DEFAULT};
1359
- color: ${Colors.BLACK.Hex};
1360
- margin: 0 0 8px 0;
1361
- box-sizing: border-box;
1362
- `;
1363
- const Validation = styled.div `
1364
- font-size: ${FontSizes.SMALL};
1365
- font-weight: 400;
1366
- line-height: 1.3em;
1367
- font-family: ${FontStyles.DEFAULT};
1368
- color: ${Colors.RED.Hex};
1369
- margin: 4px 0 0 0;
1370
- box-sizing: border-box;
1354
+ const Description = styled.div `
1355
+ font-size: ${FontSizes.SMALL};
1356
+ font-weight: 400;
1357
+ line-height: 1.3em;
1358
+ font-family: ${FontStyles.DEFAULT};
1359
+ color: ${Colors.BLACK.Hex};
1360
+ margin: 0 0 8px 0;
1361
+ box-sizing: border-box;
1362
+ `;
1363
+ const Validation = styled.div `
1364
+ font-size: ${FontSizes.SMALL};
1365
+ font-weight: 400;
1366
+ line-height: 1.3em;
1367
+ font-family: ${FontStyles.DEFAULT};
1368
+ color: ${Colors.RED.Hex};
1369
+ margin: 4px 0 0 0;
1370
+ box-sizing: border-box;
1371
1371
  `;
1372
1372
  const Field = (_a) => {
1373
1373
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip, dataItemid } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip", "dataItemid"]);
@@ -1382,116 +1382,116 @@ const Field = (_a) => {
1382
1382
  description ? (React.createElement(Description, { "data-itemid": `${baseId}-description` }, description)) : null,
1383
1383
  React.createElement("div", { "data-itemid": `${baseId}-children` }, children),
1384
1384
  React.createElement(Validation, { className: 'field-validation-wrapper', "data-itemid": `${baseId}-validation`, title: validationText }, validationText ? validationText : '\u00A0')));
1385
- };
1386
-
1387
- const Wrapper$8 = styled.fieldset `
1388
- margin-inline-start: 0px;
1389
- margin-inline-end: 0px;
1390
- padding-block-start: 0px;
1391
- padding-inline-start: 0px;
1392
- padding-inline-end: 0px;
1393
- padding-block-end: 0px;
1394
- min-inline-size: min-content;
1395
- border-width: 0px;
1396
- border-style: none;
1397
- border-color: transparent;
1398
- border-image: none;
1399
- `;
1400
- const Label$1 = styled.legend `
1401
- padding-inline-start: 0px;
1402
- padding-inline-end: 0px;
1403
-
1404
- color: ${Colors.BLACK.Hex};
1405
- font-family: ${FontStyles.DEFAULT};
1406
- font-size: ${FontSizes.DEFAULT};
1407
- font-weight: 500;
1408
- line-height: 22px;
1409
- margin-bottom: 6px;
1410
- `;
1411
- const Content$1 = styled.div `
1412
- padding: 20px;
1413
- border-radius: 8px;
1414
- background: #fcfcfc;
1385
+ };
1386
+
1387
+ const Wrapper$8 = styled.fieldset `
1388
+ margin-inline-start: 0px;
1389
+ margin-inline-end: 0px;
1390
+ padding-block-start: 0px;
1391
+ padding-inline-start: 0px;
1392
+ padding-inline-end: 0px;
1393
+ padding-block-end: 0px;
1394
+ min-inline-size: min-content;
1395
+ border-width: 0px;
1396
+ border-style: none;
1397
+ border-color: transparent;
1398
+ border-image: none;
1399
+ `;
1400
+ const Label$1 = styled.legend `
1401
+ padding-inline-start: 0px;
1402
+ padding-inline-end: 0px;
1403
+
1404
+ color: ${Colors.BLACK.Hex};
1405
+ font-family: ${FontStyles.DEFAULT};
1406
+ font-size: ${FontSizes.DEFAULT};
1407
+ font-weight: 500;
1408
+ line-height: 22px;
1409
+ margin-bottom: 6px;
1410
+ `;
1411
+ const Content$1 = styled.div `
1412
+ padding: 20px;
1413
+ border-radius: 8px;
1414
+ background: #fcfcfc;
1415
1415
  `;
1416
1416
  const FieldGroup = ({ children, label, dataItemid }) => {
1417
1417
  const baseId = dataItemid || 'field-group';
1418
1418
  return (React.createElement(Wrapper$8, { "data-itemid": `${baseId}-wrapper` },
1419
1419
  React.createElement(Label$1, { "data-itemid": `${baseId}-label` }, label),
1420
1420
  React.createElement(Content$1, { "data-itemid": `${baseId}-content` }, children)));
1421
- };
1422
-
1423
- const Dropzone = styled.div `
1424
- border-radius: 8px;
1425
- border-width: 1px;
1426
- border-style: dashed;
1427
- border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1428
- background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1429
- cursor: ${props => (props.disabled ? 'not-allowed' : 'copy')};
1430
- opacity: ${props => (props.disabled ? 0.6 : 1)};
1431
- pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
1421
+ };
1422
+
1423
+ const Dropzone = styled.div `
1424
+ border-radius: 8px;
1425
+ border-width: 1px;
1426
+ border-style: dashed;
1427
+ border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
1428
+ background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
1429
+ cursor: ${props => (props.disabled ? 'not-allowed' : 'copy')};
1430
+ opacity: ${props => (props.disabled ? 0.6 : 1)};
1431
+ pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
1432
1432
  `;
1433
1433
  Dropzone.defaultProps = { theme: EditableTheme };
1434
- const IconWrapper$1 = styled.div `
1435
- width: 80px;
1436
- height: 80px;
1437
- border-radius: 40px;
1438
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1439
- display: flex;
1440
- align-items: center;
1441
- justify-content: center;
1442
- `;
1443
- const StyledIcon$3 = styled(Icon) `
1444
- width: 40px !important;
1445
- height: 40px !important;
1446
-
1447
- > path {
1448
- fill: ${Colors.GRAY.Hex} !important;
1449
- }
1450
- `;
1451
- const ClickZone = styled.div `
1452
- margin: 40px 20px;
1453
- display: flex;
1454
- flex-direction: column;
1455
- align-items: center;
1456
- gap: 16px;
1457
- `;
1458
- const Content = styled.div `
1459
- display: flex;
1460
- flex-direction: column;
1461
- align-items: center;
1462
- z-index: 99999;
1463
- gap: 2px;
1464
- `;
1465
- const Files = styled.div `
1466
- display: flex;
1467
- flex-direction: column;
1468
- align-self: stretch;
1469
- gap: 10px;
1470
- margin: 20px;
1471
- `;
1472
- const MessageDiv = styled.div `
1473
- display: flex;
1474
- align-items: center;
1475
- justify-content: center;
1476
- `;
1477
- const File = styled.div `
1478
- display: flex;
1479
- padding: 10px;
1480
- align-items: center;
1481
- justify-content: space-between;
1482
- gap: 10px;
1483
- border-radius: 4px;
1484
- border: 1px solid #cccccc;
1485
- background: #ffffff;
1486
- `;
1487
- const Remove = styled(Icon) `
1488
- width: 24px;
1489
- height: 24px;
1490
- cursor: pointer;
1491
-
1492
- > path {
1493
- fill: ${Colors.RED.Hex} !important;
1494
- }
1434
+ const IconWrapper$1 = styled.div `
1435
+ width: 80px;
1436
+ height: 80px;
1437
+ border-radius: 40px;
1438
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
1439
+ display: flex;
1440
+ align-items: center;
1441
+ justify-content: center;
1442
+ `;
1443
+ const StyledIcon$3 = styled(Icon) `
1444
+ width: 40px !important;
1445
+ height: 40px !important;
1446
+
1447
+ > path {
1448
+ fill: ${Colors.GRAY.Hex} !important;
1449
+ }
1450
+ `;
1451
+ const ClickZone = styled.div `
1452
+ margin: 40px 20px;
1453
+ display: flex;
1454
+ flex-direction: column;
1455
+ align-items: center;
1456
+ gap: 16px;
1457
+ `;
1458
+ const Content = styled.div `
1459
+ display: flex;
1460
+ flex-direction: column;
1461
+ align-items: center;
1462
+ z-index: 99999;
1463
+ gap: 2px;
1464
+ `;
1465
+ const Files = styled.div `
1466
+ display: flex;
1467
+ flex-direction: column;
1468
+ align-self: stretch;
1469
+ gap: 10px;
1470
+ margin: 20px;
1471
+ `;
1472
+ const MessageDiv = styled.div `
1473
+ display: flex;
1474
+ align-items: center;
1475
+ justify-content: center;
1476
+ `;
1477
+ const File = styled.div `
1478
+ display: flex;
1479
+ padding: 10px;
1480
+ align-items: center;
1481
+ justify-content: space-between;
1482
+ gap: 10px;
1483
+ border-radius: 4px;
1484
+ border: 1px solid #cccccc;
1485
+ background: #ffffff;
1486
+ `;
1487
+ const Remove = styled(Icon) `
1488
+ width: 24px;
1489
+ height: 24px;
1490
+ cursor: pointer;
1491
+
1492
+ > path {
1493
+ fill: ${Colors.RED.Hex} !important;
1494
+ }
1495
1495
  `;
1496
1496
  const FileUpload = ({ accept, onChange, disabled = false, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, dataItemid, }) => {
1497
1497
  const inputRef = React.useRef(null);
@@ -1611,8 +1611,8 @@ const FileUpload = ({ accept, onChange, disabled = false, onError, maxFiles = 10
1611
1611
  React.createElement(Copy, { align: 'center', color: 'GRAY', "data-itemid": `${baseId}-message` }, message),
1612
1612
  tooltipInfo && (React.createElement("span", { "data-itemid": `${baseId}-tooltip` },
1613
1613
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1614
- };
1615
-
1614
+ };
1615
+
1616
1616
  const getAgesFromDob = (dob) => {
1617
1617
  let calculated_current_age = null;
1618
1618
  let calculated_nearest_age = null;
@@ -1685,149 +1685,149 @@ const formatAsSsn = (number) => {
1685
1685
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1686
1686
  }
1687
1687
  return formatted_value;
1688
- };
1689
-
1690
- const StyledInput = styled.input `
1691
- border: none !important;
1692
- background: none !important;
1693
- font-size: ${FontSizes.DEFAULT};
1694
- font-weight: 400;
1695
- font-family: ${FontStyles.DEFAULT};
1696
- line-height: 1.28em;
1688
+ };
1689
+
1690
+ const StyledInput = styled.input `
1691
+ border: none !important;
1692
+ background: none !important;
1693
+ font-size: ${FontSizes.DEFAULT};
1694
+ font-weight: 400;
1695
+ font-family: ${FontStyles.DEFAULT};
1696
+ line-height: 1.28em;
1697
1697
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1698
1698
  ? Colors.RED.Hex
1699
- : Colors.BLACK.Hex};
1700
- position: relative;
1701
- height: ${props => props.$height || 'auto'};
1702
- padding: 10px;
1703
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1704
- box-shadow: none;
1705
- outline: none;
1706
- margin: 0px;
1707
- text-indent: 0px;
1708
- --webkit-appearance: none;
1709
- box-sizing: border-box;
1710
- display: block;
1711
- width: 100%;
1712
- `;
1713
- const StyledTextArea = styled.textarea `
1714
- border: none !important;
1715
- background: none !important;
1716
- overflow-y: scroll !important;
1717
- font-size: 14px;
1718
- font-weight: 400;
1719
- height: ${props => props.$height || 'auto'};
1720
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1721
- line-height: 1.28em;
1699
+ : Colors.BLACK.Hex};
1700
+ position: relative;
1701
+ height: ${props => props.$height || 'auto'};
1702
+ padding: 10px;
1703
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1704
+ box-shadow: none;
1705
+ outline: none;
1706
+ margin: 0px;
1707
+ text-indent: 0px;
1708
+ --webkit-appearance: none;
1709
+ box-sizing: border-box;
1710
+ display: block;
1711
+ width: 100%;
1712
+ `;
1713
+ const StyledTextArea = styled.textarea `
1714
+ border: none !important;
1715
+ background: none !important;
1716
+ overflow-y: scroll !important;
1717
+ font-size: 14px;
1718
+ font-weight: 400;
1719
+ height: ${props => props.$height || 'auto'};
1720
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1721
+ line-height: 1.28em;
1722
1722
  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
1723
1723
  ? Colors.RED.Hex
1724
- : Colors.BLACK.Hex};
1725
- position: relative;
1726
- padding: 10px;
1727
- opacity: 1;
1728
- box-shadow: none;
1729
- outline: none;
1730
- margin: 0px;
1731
- text-indent: 0px;
1732
- --webkit-appearance: none;
1733
- overflow-wrap: break-word;
1734
- box-sizing: border-box;
1735
- display: block;
1736
- width: 100%;
1724
+ : Colors.BLACK.Hex};
1725
+ position: relative;
1726
+ padding: 10px;
1727
+ opacity: 1;
1728
+ box-shadow: none;
1729
+ outline: none;
1730
+ margin: 0px;
1731
+ text-indent: 0px;
1732
+ --webkit-appearance: none;
1733
+ overflow-wrap: break-word;
1734
+ box-sizing: border-box;
1735
+ display: block;
1736
+ width: 100%;
1737
1737
  ${({ $readOnly }) => $readOnly &&
1738
- `
1739
- background-color: #f0f0f0;
1740
- color: #999999;
1741
- overflow-y: scroll;
1742
- `}
1743
- `;
1744
- const StyledSuffix = styled.div `
1745
- box-sizing: border-box;
1746
- border-radius: 0px 4px 4px 0px;
1747
- display: flex;
1748
- justify-content: center;
1749
- align-items: center;
1750
- padding: 10px;
1751
- height: auto;
1752
- background: #f5f5f5;
1753
- border-width: 0px 0px 0px 1px;
1754
- border-style: solid;
1755
- border-color: #cccccc;
1756
- font-family: ${FontStyles.DEFAULT};
1757
- font-style: normal;
1758
- font-weight: 400;
1759
- font-size: ${FontSizes.DEFAULT};
1760
- color: ${Colors.BLACK.Hex};
1761
- `;
1762
- const StyledWrapper = styled.div `
1763
- display: flex;
1764
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1765
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1766
- position: relative;
1767
- border-width: 1px;
1768
- border-style: solid;
1769
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1770
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1771
-
1772
- &:focus-within {
1773
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1774
- }
1738
+ `
1739
+ background-color: #f0f0f0;
1740
+ color: #999999;
1741
+ overflow-y: scroll;
1742
+ `}
1743
+ `;
1744
+ const StyledSuffix = styled.div `
1745
+ box-sizing: border-box;
1746
+ border-radius: 0px 4px 4px 0px;
1747
+ display: flex;
1748
+ justify-content: center;
1749
+ align-items: center;
1750
+ padding: 10px;
1751
+ height: auto;
1752
+ background: #f5f5f5;
1753
+ border-width: 0px 0px 0px 1px;
1754
+ border-style: solid;
1755
+ border-color: #cccccc;
1756
+ font-family: ${FontStyles.DEFAULT};
1757
+ font-style: normal;
1758
+ font-weight: 400;
1759
+ font-size: ${FontSizes.DEFAULT};
1760
+ color: ${Colors.BLACK.Hex};
1761
+ `;
1762
+ const StyledWrapper = styled.div `
1763
+ display: flex;
1764
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1765
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1766
+ position: relative;
1767
+ border-width: 1px;
1768
+ border-style: solid;
1769
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1770
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1771
+
1772
+ &:focus-within {
1773
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1774
+ }
1775
1775
  `;
1776
1776
  StyledWrapper.defaultProps = { theme: EditableTheme };
1777
- const SuggestedValues = styled.div `
1778
- background: #fff;
1779
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1780
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1781
- border-radius: 0px 0px 4px 4px;
1782
- border-style: solid;
1783
- border-top: none;
1784
- border-width: 1px;
1785
- left: -1px;
1786
- position: absolute;
1787
- right: -1px;
1788
- top: 39px;
1789
- z-index: 9999;
1790
- max-height: 220px;
1791
- overflow: auto;
1777
+ const SuggestedValues = styled.div `
1778
+ background: #fff;
1779
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1780
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1781
+ border-radius: 0px 0px 4px 4px;
1782
+ border-style: solid;
1783
+ border-top: none;
1784
+ border-width: 1px;
1785
+ left: -1px;
1786
+ position: absolute;
1787
+ right: -1px;
1788
+ top: 39px;
1789
+ z-index: 9999;
1790
+ max-height: 220px;
1791
+ overflow: auto;
1792
1792
  `;
1793
1793
  SuggestedValues.defaultProps = { theme: EditableTheme };
1794
- const SuggestedSummary = styled.div `
1795
- color: ${Colors.MEDIUM_GRAY.Hex};
1796
- font-size: 12px;
1797
- font-family: ${FontStyles.DEFAULT};
1798
- font-weight: 500;
1799
- line-height: 18px;
1800
- padding: 10px 12px;
1801
- border-bottom: 1px solid #e5e5e5;
1802
- background: #fff;
1803
- z-index: 1;
1804
- position: sticky;
1805
- top: 0px;
1806
- `;
1807
- const SuggestedValue = styled.div `
1808
- cursor: pointer;
1809
- padding: 8px 12px;
1810
- font-size: ${FontSizes.DEFAULT};
1811
- font-family: ${FontStyles.DEFAULT};
1812
- font-weight: 400;
1813
- line-height: 1.6em;
1814
- color: ${Colors.BLACK.Hex};
1815
-
1816
- &:hover {
1817
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1818
- }
1794
+ const SuggestedSummary = styled.div `
1795
+ color: ${Colors.MEDIUM_GRAY.Hex};
1796
+ font-size: 12px;
1797
+ font-family: ${FontStyles.DEFAULT};
1798
+ font-weight: 500;
1799
+ line-height: 18px;
1800
+ padding: 10px 12px;
1801
+ border-bottom: 1px solid #e5e5e5;
1802
+ background: #fff;
1803
+ z-index: 1;
1804
+ position: sticky;
1805
+ top: 0px;
1806
+ `;
1807
+ const SuggestedValue = styled.div `
1808
+ cursor: pointer;
1809
+ padding: 8px 12px;
1810
+ font-size: ${FontSizes.DEFAULT};
1811
+ font-family: ${FontStyles.DEFAULT};
1812
+ font-weight: 400;
1813
+ line-height: 1.6em;
1814
+ color: ${Colors.BLACK.Hex};
1815
+
1816
+ &:hover {
1817
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1818
+ }
1819
1819
  `;
1820
1820
  SuggestedValue.defaultProps = { theme: EditableTheme };
1821
- const CharacterCount = styled.div `
1822
- font-family: ${FontStyles.DEFAULT};
1823
- font-size: ${FontSizes.SMALL};
1824
- color: ${Colors.MEDIUM_GRAY.Hex};
1825
- padding: 10px;
1821
+ const CharacterCount = styled.div `
1822
+ font-family: ${FontStyles.DEFAULT};
1823
+ font-size: ${FontSizes.SMALL};
1824
+ color: ${Colors.MEDIUM_GRAY.Hex};
1825
+ padding: 10px;
1826
1826
  `;
1827
- const Loader$1 = styled.div `
1828
- padding: 0px 10px;
1829
- display: flex;
1830
- align-items: center;
1827
+ const Loader$1 = styled.div `
1828
+ padding: 0px 10px;
1829
+ display: flex;
1830
+ align-items: center;
1831
1831
  `;
1832
1832
  const Input$1 = (_a) => {
1833
1833
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown,
@@ -1960,112 +1960,112 @@ const Input$1 = (_a) => {
1960
1960
  onSuggestedSelect();
1961
1961
  setShowOptions(false);
1962
1962
  } }, suggestedValue))))) : null));
1963
- };
1964
-
1965
- const Wrapper$7 = styled.a `
1966
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1967
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1968
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1969
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1970
- font-weight: 500;
1971
- font-style: normal;
1972
- text-decoration: none;
1973
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1974
- margin: 0px;
1975
- padding: 0px;
1976
- box-sizing: border-box;
1977
- cursor: pointer;
1963
+ };
1964
+
1965
+ const Wrapper$7 = styled.a `
1966
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1967
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1968
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1969
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1970
+ font-weight: 500;
1971
+ font-style: normal;
1972
+ text-decoration: none;
1973
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1974
+ margin: 0px;
1975
+ padding: 0px;
1976
+ box-sizing: border-box;
1977
+ cursor: pointer;
1978
1978
  `;
1979
1979
  Wrapper$7.defaultProps = { theme: EditableTheme };
1980
1980
  const Link = (_a) => {
1981
1981
  var { children, onClick, small, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small", "dataItemid"]);
1982
1982
  const baseId = dataItemid || 'link';
1983
1983
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }), children));
1984
- };
1985
-
1986
- const dash = styled.keyframes `
1987
- 0% {
1988
- stroke-dasharray: 1, 160;
1989
- stroke-dashoffset: 0;
1990
- }
1991
- 50% {
1992
- stroke-dasharray: 80, 160;
1993
- stroke-dashoffset: -32;
1994
- }
1995
- 100% {
1996
- stroke-dasharray: 80, 160;
1997
- stroke-dashoffset: -124;
1998
- }
1999
- `;
2000
- const Spinner = styled.svg `
2001
- z-index: 2;
2002
- position: absolute;
2003
- top: 50%;
2004
- left: 50%;
2005
- transform: translate(-50%, -50%);
2006
- margin: 0 auto;
2007
- width: 40px;
2008
- height: 40px;
2009
- `;
2010
- const Path = styled.path `
2011
- stroke: #0193d7;
2012
- stroke-linecap: round;
2013
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2014
- animation: ${dash} 1.1s ease-in-out infinite;
1984
+ };
1985
+
1986
+ const dash = styled.keyframes `
1987
+ 0% {
1988
+ stroke-dasharray: 1, 160;
1989
+ stroke-dashoffset: 0;
1990
+ }
1991
+ 50% {
1992
+ stroke-dasharray: 80, 160;
1993
+ stroke-dashoffset: -32;
1994
+ }
1995
+ 100% {
1996
+ stroke-dasharray: 80, 160;
1997
+ stroke-dashoffset: -124;
1998
+ }
1999
+ `;
2000
+ const Spinner = styled.svg `
2001
+ z-index: 2;
2002
+ position: absolute;
2003
+ top: 50%;
2004
+ left: 50%;
2005
+ transform: translate(-50%, -50%);
2006
+ margin: 0 auto;
2007
+ width: 40px;
2008
+ height: 40px;
2009
+ `;
2010
+ const Path = styled.path `
2011
+ stroke: #0193d7;
2012
+ stroke-linecap: round;
2013
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
2014
+ animation: ${dash} 1.1s ease-in-out infinite;
2015
2015
  `;
2016
2016
  const Loader = ({ dataItemid }) => {
2017
2017
  const baseId = dataItemid || 'loader';
2018
2018
  return (React.createElement(Spinner, { "data-itemid": `${baseId}-spinner`, viewBox: '0 0 16 18' },
2019
2019
  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', "data-itemid": `${baseId}-path`, fill: 'none', strokeWidth: '2' })));
2020
- };
2021
-
2022
- const Steps = styled.div `
2023
- padding: 20px;
2024
- border-bottom: 1px solid #e7e6e6;
2025
- background: #f5f5f5;
2026
- display: flex;
2027
- gap: 30px;
2028
- align-items: center;
2029
- `;
2030
- const Step = styled.div `
2031
- display: flex;
2032
- align-items: center;
2033
- gap: 8px;
2034
- `;
2035
- const StyledIcon$2 = styled(Icon) `
2036
- > path {
2037
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2038
- }
2020
+ };
2021
+
2022
+ const Steps = styled.div `
2023
+ padding: 20px;
2024
+ border-bottom: 1px solid #e7e6e6;
2025
+ background: #f5f5f5;
2026
+ display: flex;
2027
+ gap: 30px;
2028
+ align-items: center;
2029
+ `;
2030
+ const Step = styled.div `
2031
+ display: flex;
2032
+ align-items: center;
2033
+ gap: 8px;
2034
+ `;
2035
+ const StyledIcon$2 = styled(Icon) `
2036
+ > path {
2037
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2038
+ }
2039
2039
  `;
2040
2040
  StyledIcon$2.defaultProps = { theme: EditableTheme };
2041
- const StepIndicator = styled.div `
2042
- width: 30px;
2043
- height: 30px;
2044
- border-radius: 15px;
2045
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2046
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2047
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2048
- font-size: 14px;
2049
- font-weight: 500;
2050
- line-height: 1;
2051
- display: flex;
2052
- align-items: center;
2053
- justify-content: center;
2054
- flex-shrink: 0;
2041
+ const StepIndicator = styled.div `
2042
+ width: 30px;
2043
+ height: 30px;
2044
+ border-radius: 15px;
2045
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
2046
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
2047
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2048
+ font-size: 14px;
2049
+ font-weight: 500;
2050
+ line-height: 1;
2051
+ display: flex;
2052
+ align-items: center;
2053
+ justify-content: center;
2054
+ flex-shrink: 0;
2055
2055
  `;
2056
2056
  StepIndicator.defaultProps = { theme: EditableTheme };
2057
- const StepLabel = styled.div `
2058
- color: #000;
2059
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
2060
- font-size: 14px;
2061
- font-weight: 500;
2062
- line-height: 1;
2063
- `;
2064
- const StepLine = styled.div `
2065
- height: 2px;
2066
- flex-grow: 1;
2067
- background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2068
- transition: background-color 0.5s ease-in-out;
2057
+ const StepLabel = styled.div `
2058
+ color: #000;
2059
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2060
+ font-size: 14px;
2061
+ font-weight: 500;
2062
+ line-height: 1;
2063
+ `;
2064
+ const StepLine = styled.div `
2065
+ height: 2px;
2066
+ flex-grow: 1;
2067
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2068
+ transition: background-color 0.5s ease-in-out;
2069
2069
  `;
2070
2070
  const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
2071
2071
  const baseId = dataItemid || 'progress-bar';
@@ -2077,78 +2077,78 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
2077
2077
  step.complete ? (React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
2078
2078
  React.createElement(StepLabel, { "data-itemid": `${stepId}-label` }, step.label))));
2079
2079
  })));
2080
- };
2081
-
2082
- const Wrapper$6 = styled.div `
2083
- position: fixed;
2084
- top: 0;
2085
- right: 0;
2086
- bottom: 0;
2087
- left: 0;
2088
- z-index: 9999;
2089
- background: rgba(0, 0, 0, 0.8);
2090
- display: flex;
2091
- align-items: center;
2092
- justify-content: center;
2093
- `;
2094
- const Container$1 = styled.dialog `
2095
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2096
- max-width: calc(100vw - 80px);
2097
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2098
- max-height: calc(100vh - 80px);
2099
- border-radius: 8px;
2100
- overflow: hidden;
2101
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2102
- outline: none;
2103
- border: none;
2104
- position: relative;
2105
- padding: 0px;
2106
- box-sizing: border-box;
2107
- display: flex;
2108
- flex-direction: column;
2109
- `;
2110
- const Header$1 = styled.div `
2111
- flex-shrink: 0;
2112
- padding: 20px;
2113
- border-bottom: 1px solid #e7e6e6;
2114
- display: flex;
2115
- align-items: center;
2116
- background: #ffffff;
2117
- box-sizing: border-box;
2118
- `;
2119
- const Close = styled.div `
2120
- margin-left: auto;
2121
- display: flex;
2122
- align-items: center;
2123
- padding-left: 20px;
2124
- cursor: pointer;
2125
- `;
2126
- const CloseMsg = styled.span `
2127
- font-size: ${FontSizes.SMALL};
2128
- font-weight: 400;
2129
- font-family: ${FontStyles.DEFAULT};
2130
- line-height: 1em;
2131
- color: ${Colors.MEDIUM_GRAY.Hex};
2132
- `;
2133
- const ContentWrapper = styled.div `
2134
- overflow-x: hidden;
2135
- overflow-y: auto;
2136
- background: #ffffff;
2137
- flex: 1;
2138
- box-sizing: border-box;
2139
- `;
2140
- const ButtonBar = styled.div `
2141
- flex-shrink: 0;
2142
- background: #ffffff;
2143
- padding: 20px;
2144
- border-top: 1px solid #e7e6e6;
2145
- display: flex;
2146
- align-items: center;
2147
- justify-self: flex-end;
2148
- box-sizing: border-box;
2149
- `;
2150
- const ButtonContainer = styled.div `
2151
- margin: 0 10px;
2080
+ };
2081
+
2082
+ const Wrapper$6 = styled.div `
2083
+ position: fixed;
2084
+ top: 0;
2085
+ right: 0;
2086
+ bottom: 0;
2087
+ left: 0;
2088
+ z-index: 9999;
2089
+ background: rgba(0, 0, 0, 0.8);
2090
+ display: flex;
2091
+ align-items: center;
2092
+ justify-content: center;
2093
+ `;
2094
+ const Container$1 = styled.dialog `
2095
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2096
+ max-width: calc(100vw - 80px);
2097
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2098
+ max-height: calc(100vh - 80px);
2099
+ border-radius: 8px;
2100
+ overflow: hidden;
2101
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2102
+ outline: none;
2103
+ border: none;
2104
+ position: relative;
2105
+ padding: 0px;
2106
+ box-sizing: border-box;
2107
+ display: flex;
2108
+ flex-direction: column;
2109
+ `;
2110
+ const Header$1 = styled.div `
2111
+ flex-shrink: 0;
2112
+ padding: 20px;
2113
+ border-bottom: 1px solid #e7e6e6;
2114
+ display: flex;
2115
+ align-items: center;
2116
+ background: #ffffff;
2117
+ box-sizing: border-box;
2118
+ `;
2119
+ const Close = styled.div `
2120
+ margin-left: auto;
2121
+ display: flex;
2122
+ align-items: center;
2123
+ padding-left: 20px;
2124
+ cursor: pointer;
2125
+ `;
2126
+ const CloseMsg = styled.span `
2127
+ font-size: ${FontSizes.SMALL};
2128
+ font-weight: 400;
2129
+ font-family: ${FontStyles.DEFAULT};
2130
+ line-height: 1em;
2131
+ color: ${Colors.MEDIUM_GRAY.Hex};
2132
+ `;
2133
+ const ContentWrapper = styled.div `
2134
+ overflow-x: hidden;
2135
+ overflow-y: auto;
2136
+ background: #ffffff;
2137
+ flex: 1;
2138
+ box-sizing: border-box;
2139
+ `;
2140
+ const ButtonBar = styled.div `
2141
+ flex-shrink: 0;
2142
+ background: #ffffff;
2143
+ padding: 20px;
2144
+ border-top: 1px solid #e7e6e6;
2145
+ display: flex;
2146
+ align-items: center;
2147
+ justify-self: flex-end;
2148
+ box-sizing: border-box;
2149
+ `;
2150
+ const ButtonContainer = styled.div `
2151
+ margin: 0 10px;
2152
2152
  `;
2153
2153
  const Modal = (_a) => {
2154
2154
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton", "dataItemid"]);
@@ -2191,21 +2191,21 @@ const Modal = (_a) => {
2191
2191
  secondaryButton ? (React.createElement(ButtonContainer, { "data-itemid": `${baseId}-secondary-button-container` },
2192
2192
  React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": `${baseId}-secondary-button`, format: secondaryButton.format || 'secondary' })))) : null,
2193
2193
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": `${baseId}-primary-button`, format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
2194
- };
2195
-
2196
- const Wrapper$5 = styled.div `
2197
- position: relative;
2198
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2199
- `;
2200
- const Trigger = styled.div `
2201
- box-sizing: border-box;
2202
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2203
- height: 40px;
2204
- padding: 0 10px;
2205
- position: relative;
2206
- cursor: pointer;
2207
- border-width: 1px;
2208
- border-style: solid;
2194
+ };
2195
+
2196
+ const Wrapper$5 = styled.div `
2197
+ position: relative;
2198
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2199
+ `;
2200
+ const Trigger = styled.div `
2201
+ box-sizing: border-box;
2202
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2203
+ height: 40px;
2204
+ padding: 0 10px;
2205
+ position: relative;
2206
+ cursor: pointer;
2207
+ border-width: 1px;
2208
+ border-style: solid;
2209
2209
  border-color: ${props => {
2210
2210
  if (props.$invalid) {
2211
2211
  return Colors.RED.Hex;
@@ -2216,67 +2216,67 @@ const Trigger = styled.div `
2216
2216
  else {
2217
2217
  return '#cccccc';
2218
2218
  }
2219
- }};
2220
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2221
- background-image: none;
2222
- display: flex;
2223
- width: 100%;
2224
- align-items: center;
2225
- justify-content: space-between;
2226
- z-index: 1;
2219
+ }};
2220
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2221
+ background-image: none;
2222
+ display: flex;
2223
+ width: 100%;
2224
+ align-items: center;
2225
+ justify-content: space-between;
2226
+ z-index: 1;
2227
2227
  `;
2228
2228
  Trigger.defaultProps = { theme: EditableTheme };
2229
- const Value = styled.div `
2230
- color: ${Colors.BLACK.Hex};
2231
- font-family: ${FontStyles.DEFAULT};
2232
- font-size: ${FontSizes.DEFAULT};
2233
- font-weight: 400;
2234
- line-height: 2.9em;
2235
- overflow: hidden;
2236
- text-overflow: ellipsis;
2237
- white-space: nowrap;
2238
- width: 100%;
2239
- `;
2240
- const Options = styled.div `
2241
- background: #fff;
2242
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2243
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2244
- border-radius: 0px 0px 4px 4px;
2245
- border-style: solid;
2246
- border-top: none;
2247
- border-width: 1px;
2248
- left: 0;
2249
- position: absolute;
2250
- right: 0;
2251
- z-index: 10;
2252
- max-height: 220px;
2253
- overflow: auto;
2229
+ const Value = styled.div `
2230
+ color: ${Colors.BLACK.Hex};
2231
+ font-family: ${FontStyles.DEFAULT};
2232
+ font-size: ${FontSizes.DEFAULT};
2233
+ font-weight: 400;
2234
+ line-height: 2.9em;
2235
+ overflow: hidden;
2236
+ text-overflow: ellipsis;
2237
+ white-space: nowrap;
2238
+ width: 100%;
2239
+ `;
2240
+ const Options = styled.div `
2241
+ background: #fff;
2242
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2243
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2244
+ border-radius: 0px 0px 4px 4px;
2245
+ border-style: solid;
2246
+ border-top: none;
2247
+ border-width: 1px;
2248
+ left: 0;
2249
+ position: absolute;
2250
+ right: 0;
2251
+ z-index: 10;
2252
+ max-height: 220px;
2253
+ overflow: auto;
2254
2254
  `;
2255
2255
  Options.defaultProps = { theme: EditableTheme };
2256
- const Scrim = styled.div `
2257
- bottom: 0;
2258
- left: 0;
2259
- position: fixed;
2260
- right: 0;
2261
- top: 0;
2262
- z-index: 9;
2263
- `;
2264
- const SearchInput = styled.input `
2265
- position: absolute;
2266
- left: 2px;
2267
- top: 2px;
2268
- z-index: 999;
2269
- width: 90%;
2270
- height: 30px;
2271
- border: none;
2272
- outline: none;
2273
- color: ${Colors.BLACK.Hex};
2274
- font-family: ${FontStyles.DEFAULT};
2275
- font-size: ${FontSizes.DEFAULT};
2276
- font-weight: 400;
2277
- line-height: 2.9em;
2278
- overflow: hidden;
2279
- white-space: nowrap;
2256
+ const Scrim = styled.div `
2257
+ bottom: 0;
2258
+ left: 0;
2259
+ position: fixed;
2260
+ right: 0;
2261
+ top: 0;
2262
+ z-index: 9;
2263
+ `;
2264
+ const SearchInput = styled.input `
2265
+ position: absolute;
2266
+ left: 2px;
2267
+ top: 2px;
2268
+ z-index: 999;
2269
+ width: 90%;
2270
+ height: 30px;
2271
+ border: none;
2272
+ outline: none;
2273
+ color: ${Colors.BLACK.Hex};
2274
+ font-family: ${FontStyles.DEFAULT};
2275
+ font-size: ${FontSizes.DEFAULT};
2276
+ font-weight: 400;
2277
+ line-height: 2.9em;
2278
+ overflow: hidden;
2279
+ white-space: nowrap;
2280
2280
  `;
2281
2281
  const MultiSelect = (_a) => {
2282
2282
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style, dataItemid } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style", "dataItemid"]);
@@ -2296,37 +2296,37 @@ const MultiSelect = (_a) => {
2296
2296
  showOptions ? (React.createElement(Options, { "data-itemid": `${baseId}-options` },
2297
2297
  React.createElement(Checklist, { "data-itemid": `${baseId}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2298
2298
  showOptions ? (React.createElement(Scrim, { "data-itemid": `${baseId}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
2299
- };
2300
-
2301
- const Wrapper$4 = styled.div `
2302
- display: flex;
2303
- padding: 16px 30px;
2304
- align-items: center;
2305
- gap: 20px;
2306
- align-self: stretch;
2307
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2308
- `;
2309
- const Title = styled.div `
2310
- display: flex;
2311
- align-items: center;
2312
- gap: 20px;
2313
- `;
2314
- const Info = styled.div `
2315
- display: flex;
2316
- flex-direction: column;
2317
- align-items: flex-start;
2318
- gap: 4px;
2319
- flex: 1 0 0;
2320
- `;
2321
- const Breadcrumbs = styled.div `
2322
- display: flex;
2323
- align-items: center;
2324
- gap: 4px;
2325
- `;
2326
- const Actions = styled.div `
2327
- display: flex;
2328
- align-items: center;
2329
- gap: 8px;
2299
+ };
2300
+
2301
+ const Wrapper$4 = styled.div `
2302
+ display: flex;
2303
+ padding: 16px 30px;
2304
+ align-items: center;
2305
+ gap: 20px;
2306
+ align-self: stretch;
2307
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2308
+ `;
2309
+ const Title = styled.div `
2310
+ display: flex;
2311
+ align-items: center;
2312
+ gap: 20px;
2313
+ `;
2314
+ const Info = styled.div `
2315
+ display: flex;
2316
+ flex-direction: column;
2317
+ align-items: flex-start;
2318
+ gap: 4px;
2319
+ flex: 1 0 0;
2320
+ `;
2321
+ const Breadcrumbs = styled.div `
2322
+ display: flex;
2323
+ align-items: center;
2324
+ gap: 4px;
2325
+ `;
2326
+ const Actions = styled.div `
2327
+ display: flex;
2328
+ align-items: center;
2329
+ gap: 8px;
2330
2330
  `;
2331
2331
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag, dataItemid, }) => {
2332
2332
  const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, maxHeight = '', } = buttonMenu || {};
@@ -2349,16 +2349,16 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag, dataIte
2349
2349
  return (React.createElement(Button, Object.assign({}, buttonProps, { "data-itemid": `${actionId}-button`, key: i, small: true }), label));
2350
2350
  }),
2351
2351
  menuItems.length ? (React.createElement(ButtonMenu, { "data-itemid": `${baseId}-button-menu`, enableClick: enableClick, enableHover: enableHover, format: format, label: label, maxHeight: maxHeight, menuItems: menuItems, show: show, small: true })) : null)) : null));
2352
- };
2353
-
2354
- const Wrapper$3 = styled.nav `
2355
- box-sizing: border-box;
2356
- display: flex;
2357
- align-items: center;
2358
- column-gap: 10px;
2352
+ };
2353
+
2354
+ const Wrapper$3 = styled.nav `
2355
+ box-sizing: border-box;
2356
+ display: flex;
2357
+ align-items: center;
2358
+ column-gap: 10px;
2359
2359
  `;
2360
2360
  const Pagination = (_a) => {
2361
- var { currentPage = 1, onClick, pageCount = 0, dataItemid } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount", "dataItemid"]);
2361
+ var { currentPage = 1, onClick, pageCount = 0, dataItemid, type = null } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount", "dataItemid", "type"]);
2362
2362
  const is_first_page = currentPage === 1;
2363
2363
  const is_last_page = currentPage === pageCount;
2364
2364
  const handlePrevClick = () => {
@@ -2379,88 +2379,88 @@ const Pagination = (_a) => {
2379
2379
  };
2380
2380
  const baseId = dataItemid || 'pagination';
2381
2381
  return (React.createElement(Wrapper$3, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
2382
- React.createElement(Button, { "data-itemid": `${baseId}-prev-button`, disabled: is_first_page, icon: js.mdiChevronLeft, onClick: handlePrevClick, small: true }),
2382
+ React.createElement(Button, { "data-itemid": `${baseId}-prev-button`, disabled: is_first_page, icon: js.mdiChevronLeft, onClick: handlePrevClick, small: true, type: type }),
2383
2383
  React.createElement(Select, { "data-itemid": `${baseId}-select`, onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), p => p + 1).map(p => ({
2384
2384
  label: `Page ${p}`,
2385
2385
  value: `${p}`,
2386
2386
  })), value: `${currentPage}` }),
2387
- React.createElement(Button, { "data-itemid": `${baseId}-next-button`, disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
2388
- };
2389
-
2390
- const Wrapper$2 = styled.label `
2391
- border-radius: 4px;
2392
- padding: 4px 0px 4px 6px;
2393
- margin-left: -6px;
2394
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2395
- display: flex;
2396
- align-items: center;
2397
- font-size: ${FontSizes.DEFAULT};
2398
- line-height: 1.6em;
2399
- box-sizing: border-box;
2400
- position: relative;
2401
-
2402
- &:focus-within {
2403
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2404
- }
2387
+ React.createElement(Button, { "data-itemid": `${baseId}-next-button`, disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true, type: type })));
2388
+ };
2389
+
2390
+ const Wrapper$2 = styled.label `
2391
+ border-radius: 4px;
2392
+ padding: 4px 0px 4px 6px;
2393
+ margin-left: -6px;
2394
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2395
+ display: flex;
2396
+ align-items: center;
2397
+ font-size: ${FontSizes.DEFAULT};
2398
+ line-height: 1.6em;
2399
+ box-sizing: border-box;
2400
+ position: relative;
2401
+
2402
+ &:focus-within {
2403
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2404
+ }
2405
2405
  `;
2406
2406
  Wrapper$2.defaultProps = { theme: EditableTheme };
2407
- const Input = styled.input `
2408
- font-size: 20px;
2409
- margin: 0px;
2410
- line-height: 1.6em;
2411
- box-sizing: border-box;
2412
- position: absolute;
2413
- opacity: 0;
2414
- cursor: pointer;
2415
- height: 0;
2416
- width: 0;
2417
- &:checked + span {
2418
- border-color: ${Colors.PRIMARY.Hex};
2419
- }
2420
- &:checked + span:after {
2421
- background-color: ${Colors.PRIMARY.Hex};
2422
- display: block;
2423
- }
2424
- &:disabled + span {
2425
- background-color: #d3d3d3;
2426
- border-color: #d3d3d3;
2427
- }
2428
- &:disabled + span:after {
2429
- background-color: #fff;
2430
- }
2431
- &:checked:disabled + span:after {
2432
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2433
- }
2434
- `;
2435
- const Check = styled.span `
2436
- height: 17px;
2437
- width: 17px;
2438
- border-radius: 50%;
2439
- background-color: #fff;
2440
- border-width: 2px;
2441
- border-style: solid;
2442
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2443
- box-sizing: border-box;
2444
- position: relative;
2445
- &:after {
2446
- content: '';
2447
- position: absolute;
2448
- top: 2px;
2449
- left: 2px;
2450
- width: 9px;
2451
- height: 9px;
2452
- border-radius: 50%;
2453
- box-sizing: border-box;
2454
- display: none;
2455
- }
2456
- `;
2457
- const Label = styled.span `
2458
- font-family: ${FontStyles.DEFAULT};
2459
- font-size: ${FontSizes.DEFAULT};
2460
- font-weight: 400;
2461
- color: ${Colors.BLACK.Hex};
2462
- line-height: 1.6em;
2463
- margin-left: 6px;
2407
+ const Input = styled.input `
2408
+ font-size: 20px;
2409
+ margin: 0px;
2410
+ line-height: 1.6em;
2411
+ box-sizing: border-box;
2412
+ position: absolute;
2413
+ opacity: 0;
2414
+ cursor: pointer;
2415
+ height: 0;
2416
+ width: 0;
2417
+ &:checked + span {
2418
+ border-color: ${Colors.PRIMARY.Hex};
2419
+ }
2420
+ &:checked + span:after {
2421
+ background-color: ${Colors.PRIMARY.Hex};
2422
+ display: block;
2423
+ }
2424
+ &:disabled + span {
2425
+ background-color: #d3d3d3;
2426
+ border-color: #d3d3d3;
2427
+ }
2428
+ &:disabled + span:after {
2429
+ background-color: #fff;
2430
+ }
2431
+ &:checked:disabled + span:after {
2432
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2433
+ }
2434
+ `;
2435
+ const Check = styled.span `
2436
+ height: 17px;
2437
+ width: 17px;
2438
+ border-radius: 50%;
2439
+ background-color: #fff;
2440
+ border-width: 2px;
2441
+ border-style: solid;
2442
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2443
+ box-sizing: border-box;
2444
+ position: relative;
2445
+ &:after {
2446
+ content: '';
2447
+ position: absolute;
2448
+ top: 2px;
2449
+ left: 2px;
2450
+ width: 9px;
2451
+ height: 9px;
2452
+ border-radius: 50%;
2453
+ box-sizing: border-box;
2454
+ display: none;
2455
+ }
2456
+ `;
2457
+ const Label = styled.span `
2458
+ font-family: ${FontStyles.DEFAULT};
2459
+ font-size: ${FontSizes.DEFAULT};
2460
+ font-weight: 400;
2461
+ color: ${Colors.BLACK.Hex};
2462
+ line-height: 1.6em;
2463
+ margin-left: 6px;
2464
2464
  `;
2465
2465
  const Radio = (_a) => {
2466
2466
  var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid"]);
@@ -2471,8 +2471,8 @@ const Radio = (_a) => {
2471
2471
  React.createElement(Label, { "data-itemid": `${baseId}-label` },
2472
2472
  children,
2473
2473
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2474
- };
2475
-
2474
+ };
2475
+
2476
2476
  const RadioList = (_a) => {
2477
2477
  var { disabled, onChange, options, value, dataItemid } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value", "dataItemid"]);
2478
2478
  const baseId = dataItemid || 'radio-list';
@@ -2481,69 +2481,69 @@ const RadioList = (_a) => {
2481
2481
  const optionId = `${baseId}-option-${index}`;
2482
2482
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, "data-itemid": optionId, disabled: disabled, key: option.value, onChange: onChange, value: option.value }, accessibleProps), label));
2483
2483
  })));
2484
- };
2485
-
2486
- const StyledTable = styled.table `
2487
- width: 100%;
2488
- margin-top: 1px;
2489
- table-layout: ${props => props.$tableLayout || 'auto'};
2490
- border-collapse: collapse;
2491
- text-indent: 0px;
2492
- border-spacing: 0px;
2493
- border-color: none;
2494
- box-sizing: border-box;
2495
- `;
2496
- const Header = styled.th `
2497
- padding: 12px !important;
2498
- text-align: left;
2499
- font-weight: 500;
2500
- border-bottom: 1px solid #e5e5e5;
2501
- border-top: 1px solid #e5e5e5;
2502
- text-transform: uppercase;
2503
- font-size: 12px;
2504
- font-family: ${FontStyles.DEFAULT};
2505
- letter-spacing: 1px;
2506
- white-space: nowrap;
2507
- line-height: 1;
2508
- position: relative;
2509
- box-sizing: border-box;
2510
- width: ${props => props.$width || 'auto'};
2511
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2512
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2484
+ };
2485
+
2486
+ const StyledTable = styled.table `
2487
+ width: 100%;
2488
+ margin-top: 1px;
2489
+ table-layout: ${props => props.$tableLayout || 'auto'};
2490
+ border-collapse: collapse;
2491
+ text-indent: 0px;
2492
+ border-spacing: 0px;
2493
+ border-color: none;
2494
+ box-sizing: border-box;
2495
+ `;
2496
+ const Header = styled.th `
2497
+ padding: 12px !important;
2498
+ text-align: left;
2499
+ font-weight: 500;
2500
+ border-bottom: 1px solid #e5e5e5;
2501
+ border-top: 1px solid #e5e5e5;
2502
+ text-transform: uppercase;
2503
+ font-size: 12px;
2504
+ font-family: ${FontStyles.DEFAULT};
2505
+ letter-spacing: 1px;
2506
+ white-space: nowrap;
2507
+ line-height: 1;
2508
+ position: relative;
2509
+ box-sizing: border-box;
2510
+ width: ${props => props.$width || 'auto'};
2511
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2512
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2513
2513
  `;
2514
2514
  Header.defaultProps = { theme: EditableTheme };
2515
- const Row = styled.tr `
2516
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2517
- transition: all 0.2s;
2518
- background-color: ${props => props.$bgColor};
2519
- box-sizing: border-box;
2520
- &:hover {
2521
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2522
- }
2515
+ const Row = styled.tr `
2516
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2517
+ transition: all 0.2s;
2518
+ background-color: ${props => props.$bgColor};
2519
+ box-sizing: border-box;
2520
+ &:hover {
2521
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2522
+ }
2523
2523
  `;
2524
2524
  Row.defaultProps = { theme: EditableTheme };
2525
- const Column = styled.td `
2526
- padding: 16px 12px !important;
2527
- font-size: ${FontSizes.DEFAULT} !important;
2528
- font-weight: 400 !important;
2529
- font-family: ${FontStyles.DEFAULT};
2530
- border: none !important;
2531
- word-break: break-word;
2532
- line-height: 1.4em;
2533
- box-sizing: border-box;
2534
- text-align: ${props => props.$align || 'left'};
2535
- width: ${props => props.$width || 'auto'};
2536
- `;
2537
- const IconWrapper = styled.span `
2538
- position: absolute;
2539
- top: 50%;
2540
- transform: translateY(-50%);
2541
- margin-left: 2px;
2542
- `;
2543
- const StyledIcon$1 = styled(Icon) `
2544
- > path {
2545
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2546
- }
2525
+ const Column = styled.td `
2526
+ padding: 16px 12px !important;
2527
+ font-size: ${FontSizes.DEFAULT} !important;
2528
+ font-weight: 400 !important;
2529
+ font-family: ${FontStyles.DEFAULT};
2530
+ border: none !important;
2531
+ word-break: break-word;
2532
+ line-height: 1.4em;
2533
+ box-sizing: border-box;
2534
+ text-align: ${props => props.$align || 'left'};
2535
+ width: ${props => props.$width || 'auto'};
2536
+ `;
2537
+ const IconWrapper = styled.span `
2538
+ position: absolute;
2539
+ top: 50%;
2540
+ transform: translateY(-50%);
2541
+ margin-left: 2px;
2542
+ `;
2543
+ const StyledIcon$1 = styled(Icon) `
2544
+ > path {
2545
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2546
+ }
2547
2547
  `;
2548
2548
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2549
2549
  const Table = (_a) => {
@@ -2565,55 +2565,55 @@ const Table = (_a) => {
2565
2565
  return (React.createElement(Column, { "$align": columns[j].align, "$width": columns[j].width, "data-itemid": `${columnId}-column`, key: j }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2566
2566
  })));
2567
2567
  }))) : null));
2568
- };
2569
-
2570
- const Wrapper$1 = styled.div `
2571
- display: flex;
2572
- box-sizing: border-box;
2573
- align-items: flex-end;
2574
- border-top: 1px solid #e5e5e5;
2575
- border-bottom: 1px solid #e5e5e5;
2576
- flex-shrink: 0;
2577
- align-self: stretch;
2578
- padding: 0;
2579
- margin: 0;
2580
- `;
2581
- const Tab = styled.div `
2582
- display: flex;
2583
- align-items: center;
2584
- gap: 6px;
2585
- font-size: ${FontSizes.DEFAULT};
2586
- font-family: ${FontStyles.DEFAULT};
2587
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2588
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2589
- line-height: 1em;
2590
- padding: 16px 30px 12px;
2591
- margin: 0 0 -1px 0;
2592
- border-bottom-width: 4px;
2593
- border-bottom-style: solid;
2594
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2595
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2596
- box-sizing: border-box;
2597
- &:hover {
2598
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2599
- font-weight: 500;
2600
- }
2568
+ };
2569
+
2570
+ const Wrapper$1 = styled.div `
2571
+ display: flex;
2572
+ box-sizing: border-box;
2573
+ align-items: flex-end;
2574
+ border-top: 1px solid #e5e5e5;
2575
+ border-bottom: 1px solid #e5e5e5;
2576
+ flex-shrink: 0;
2577
+ align-self: stretch;
2578
+ padding: 0;
2579
+ margin: 0;
2580
+ `;
2581
+ const Tab = styled.div `
2582
+ display: flex;
2583
+ align-items: center;
2584
+ gap: 6px;
2585
+ font-size: ${FontSizes.DEFAULT};
2586
+ font-family: ${FontStyles.DEFAULT};
2587
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2588
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2589
+ line-height: 1em;
2590
+ padding: 16px 30px 12px;
2591
+ margin: 0 0 -1px 0;
2592
+ border-bottom-width: 4px;
2593
+ border-bottom-style: solid;
2594
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2595
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2596
+ box-sizing: border-box;
2597
+ &:hover {
2598
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2599
+ font-weight: 500;
2600
+ }
2601
2601
  `;
2602
2602
  Tab.defaultProps = { theme: EditableTheme };
2603
- const Badge = styled.div `
2604
- display: flex;
2605
- width: 18px;
2606
- height: 18px;
2607
- justify-content: center;
2608
- align-items: center;
2609
- border-radius: 9px;
2610
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2611
- color: #fff;
2612
- font-family: ${FontStyles.DEFAULT};
2613
- font-size: 12px;
2614
- font-weight: 500;
2615
- line-height: 1;
2616
- letter-spacing: 1px;
2603
+ const Badge = styled.div `
2604
+ display: flex;
2605
+ width: 18px;
2606
+ height: 18px;
2607
+ justify-content: center;
2608
+ align-items: center;
2609
+ border-radius: 9px;
2610
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2611
+ color: #fff;
2612
+ font-family: ${FontStyles.DEFAULT};
2613
+ font-size: 12px;
2614
+ font-weight: 500;
2615
+ line-height: 1;
2616
+ letter-spacing: 1px;
2617
2617
  `;
2618
2618
  Badge.defaultProps = { theme: EditableTheme };
2619
2619
  const Tabs = (_a) => {
@@ -2627,29 +2627,29 @@ const Tabs = (_a) => {
2627
2627
  label));
2628
2628
  })));
2629
2629
  };
2630
- Tabs.defaultProps = {};
2631
-
2632
- const Track = styled.div `
2633
- height: 24px;
2634
- border-radius: 12px;
2635
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2636
- display: flex;
2637
- align-items: center;
2638
- cursor: pointer;
2639
- width: 40px;
2640
- padding: 2px;
2641
- box-sizing: border-box;
2642
- `;
2643
- const Handle = styled.div `
2644
- width: 20px;
2645
- height: 20px;
2646
- border-radius: 10px;
2647
- background: #ffffff;
2648
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2649
- display: flex;
2650
- align-items: center;
2651
- justify-content: center;
2652
- box-sizing: border-box;
2630
+ Tabs.defaultProps = {};
2631
+
2632
+ const Track = styled.div `
2633
+ height: 24px;
2634
+ border-radius: 12px;
2635
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2636
+ display: flex;
2637
+ align-items: center;
2638
+ cursor: pointer;
2639
+ width: 40px;
2640
+ padding: 2px;
2641
+ box-sizing: border-box;
2642
+ `;
2643
+ const Handle = styled.div `
2644
+ width: 20px;
2645
+ height: 20px;
2646
+ border-radius: 10px;
2647
+ background: #ffffff;
2648
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2649
+ display: flex;
2650
+ align-items: center;
2651
+ justify-content: center;
2652
+ box-sizing: border-box;
2653
2653
  `;
2654
2654
  const Toggle = (_a) => {
2655
2655
  var { onClick, on, dataItemid } = _a, accessibleProps = __rest(_a, ["onClick", "on", "dataItemid"]);
@@ -2659,32 +2659,32 @@ const Toggle = (_a) => {
2659
2659
  React.createElement(Handle, { "$on": on, "data-itemid": `${baseId}-handle` },
2660
2660
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, "data-itemid": `${baseId}-icon`, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2661
2661
  };
2662
- Toggle.defaultProps = {};
2663
-
2664
- const Container = styled.div `
2665
- width: 100%;
2666
- padding: 40px auto;
2667
- gap: 20px;
2668
- display: flex;
2669
- flex-direction: column;
2670
- justify-items: center;
2671
- align-items: center;
2672
- `;
2673
- const Wrapper = styled.div `
2674
- gap: 10px;
2675
- display: flex;
2676
- flex-direction: column;
2677
- justify-items: center;
2678
- align-items: center;
2679
- `;
2680
- const StyledIcon = styled.div `
2681
- display: flex;
2682
- align-items: center;
2683
- justify-content: center;
2684
- width: 80px;
2685
- height: 80px;
2686
- border-radius: 40px;
2687
- background: #f5f5f5;
2662
+ Toggle.defaultProps = {};
2663
+
2664
+ const Container = styled.div `
2665
+ width: 100%;
2666
+ padding: 40px auto;
2667
+ gap: 20px;
2668
+ display: flex;
2669
+ flex-direction: column;
2670
+ justify-items: center;
2671
+ align-items: center;
2672
+ `;
2673
+ const Wrapper = styled.div `
2674
+ gap: 10px;
2675
+ display: flex;
2676
+ flex-direction: column;
2677
+ justify-items: center;
2678
+ align-items: center;
2679
+ `;
2680
+ const StyledIcon = styled.div `
2681
+ display: flex;
2682
+ align-items: center;
2683
+ justify-content: center;
2684
+ width: 80px;
2685
+ height: 80px;
2686
+ border-radius: 40px;
2687
+ background: #f5f5f5;
2688
2688
  `;
2689
2689
  const ZeroState = (_a) => {
2690
2690
  var { icon, title, description, action, dataItemid } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action", "dataItemid"]);
@@ -2696,53 +2696,53 @@ const ZeroState = (_a) => {
2696
2696
  React.createElement(Heading, { children: title, "data-itemid": `${baseId}-heading`, type: 'tertiary' }),
2697
2697
  description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', "data-itemid": `${baseId}-description`, type: 'default' }))),
2698
2698
  action && (React.createElement(Button, { children: action.children, "data-itemid": `${baseId}-button`, disabled: action.disabled, format: action.format, icon: action.icon, onClick: action.onClick }))));
2699
- };
2700
-
2701
- exports.Accordion = Accordion;
2702
- exports.ActionDialog = ActionDialog;
2703
- exports.Alert = Alert;
2704
- exports.AppHeader = AppHeader;
2705
- exports.AppMenu = AppMenu;
2706
- exports.BulkActionBar = BulkActionBar;
2707
- exports.Button = Button;
2708
- exports.ButtonMenu = ButtonMenu;
2709
- exports.Checkbox = Checkbox;
2710
- exports.Checklist = Checklist;
2711
- exports.Colors = Colors;
2712
- exports.Copy = Copy;
2713
- exports.DatePicker = DatePicker;
2714
- exports.Drawer = Drawer;
2715
- exports.EditableTheme = EditableTheme;
2716
- exports.Field = Field;
2717
- exports.FieldGroup = FieldGroup;
2718
- exports.FileUpload = FileUpload;
2719
- exports.FontSizes = FontSizes;
2720
- exports.FontStyles = FontStyles;
2721
- exports.Heading = Heading;
2722
- exports.Input = Input$1;
2723
- exports.Link = Link;
2724
- exports.Loader = Loader;
2725
- exports.Logo = Logo;
2726
- exports.Modal = Modal;
2727
- exports.MoreMenu = MoreMenu;
2728
- exports.MultiSelect = MultiSelect;
2729
- exports.PageHeader = PageHeader;
2730
- exports.Pagination = Pagination;
2731
- exports.ProgressBar = ProgressBar;
2732
- exports.Radio = Radio;
2733
- exports.RadioList = RadioList;
2734
- exports.Select = Select;
2735
- exports.Table = Table;
2736
- exports.Tabs = Tabs;
2737
- exports.Tag = Tag;
2738
- exports.Toggle = Toggle;
2739
- exports.Tooltip = Tooltip;
2740
- exports.ZeroState = ZeroState;
2741
- exports.formatAsPhone = formatAsPhone;
2742
- exports.formatAsSsn = formatAsSsn;
2743
- exports.getAgesFromDob = getAgesFromDob;
2744
- exports.getDaysForMonth = getDaysForMonth;
2745
- exports.getYears = getYears;
2746
- exports.validateEmail = validateEmail;
2747
- exports.validatePhone = validatePhone;
2748
- //# sourceMappingURL=index.js.map
2699
+ };
2700
+
2701
+ exports.Accordion = Accordion;
2702
+ exports.ActionDialog = ActionDialog;
2703
+ exports.Alert = Alert;
2704
+ exports.AppHeader = AppHeader;
2705
+ exports.AppMenu = AppMenu;
2706
+ exports.BulkActionBar = BulkActionBar;
2707
+ exports.Button = Button;
2708
+ exports.ButtonMenu = ButtonMenu;
2709
+ exports.Checkbox = Checkbox;
2710
+ exports.Checklist = Checklist;
2711
+ exports.Colors = Colors;
2712
+ exports.Copy = Copy;
2713
+ exports.DatePicker = DatePicker;
2714
+ exports.Drawer = Drawer;
2715
+ exports.EditableTheme = EditableTheme;
2716
+ exports.Field = Field;
2717
+ exports.FieldGroup = FieldGroup;
2718
+ exports.FileUpload = FileUpload;
2719
+ exports.FontSizes = FontSizes;
2720
+ exports.FontStyles = FontStyles;
2721
+ exports.Heading = Heading;
2722
+ exports.Input = Input$1;
2723
+ exports.Link = Link;
2724
+ exports.Loader = Loader;
2725
+ exports.Logo = Logo;
2726
+ exports.Modal = Modal;
2727
+ exports.MoreMenu = MoreMenu;
2728
+ exports.MultiSelect = MultiSelect;
2729
+ exports.PageHeader = PageHeader;
2730
+ exports.Pagination = Pagination;
2731
+ exports.ProgressBar = ProgressBar;
2732
+ exports.Radio = Radio;
2733
+ exports.RadioList = RadioList;
2734
+ exports.Select = Select;
2735
+ exports.Table = Table;
2736
+ exports.Tabs = Tabs;
2737
+ exports.Tag = Tag;
2738
+ exports.Toggle = Toggle;
2739
+ exports.Tooltip = Tooltip;
2740
+ exports.ZeroState = ZeroState;
2741
+ exports.formatAsPhone = formatAsPhone;
2742
+ exports.formatAsSsn = formatAsSsn;
2743
+ exports.getAgesFromDob = getAgesFromDob;
2744
+ exports.getDaysForMonth = getDaysForMonth;
2745
+ exports.getYears = getYears;
2746
+ exports.validateEmail = validateEmail;
2747
+ exports.validatePhone = validatePhone;
2748
+ //# sourceMappingURL=index.js.map