@hexure/ui 1.13.21 → 1.13.23

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 (12) hide show
  1. package/dist/cjs/index.js +1511 -1496
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/Button/Button.d.ts +3 -0
  4. package/dist/esm/index.js +1463 -1448
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/types/components/Button/Button.d.ts +3 -0
  7. package/dist/index.d.ts +93 -91
  8. package/package.json +1 -1
  9. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  10. /package/dist/cjs/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
  11. /package/dist/esm/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
  12. /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 { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -113,13 +113,84 @@ const Accordion = (_a) => {
113
113
  React.createElement(Title$2, null, title),
114
114
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
115
115
  open ? children : null));
116
- };
117
-
118
- const StyledButton = styled.button `
119
- height: ${props => (props.$small ? '30px' : '40px')};
120
- line-height: 1em;
121
- border-radius: ${props => (props.$small ? '15px' : '20px')};
122
- margin: ${props => props.$margin || '0px'};
116
+ };
117
+
118
+ const StyledComponent = styled.p `
119
+ color: ${props => Colors[props.$color || 'BLACK'].Hex};
120
+ font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
121
+ line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
122
+ letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
123
+ font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
124
+ font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
125
+ text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
126
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
127
+ margin: ${props => props.$margin || '0px'};
128
+ padding: ${props => props.$padding || '0px'};
129
+ text-align: ${props => props.$align || 'left'};
130
+ box-sizing: border-box;
131
+ `;
132
+ const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
133
+ return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
134
+ };
135
+ Copy.defaultProps = {
136
+ type: 'default',
137
+ };
138
+
139
+ const Wrapper$h = styled.div `
140
+ display: inline-block;
141
+ position: relative;
142
+ height: 16px;
143
+ `;
144
+ const StyledIcon$6 = styled(Icon) `
145
+ width: 16px;
146
+ height: 16px;
147
+ margin: 0px 6px;
148
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
149
+ cursor: pointer;
150
+ `;
151
+ StyledIcon$6.defaultProps = { theme: EditableTheme };
152
+ const positions = {
153
+ 'right-top': {
154
+ top: '0px',
155
+ left: '28px',
156
+ },
157
+ 'right-bottom': {
158
+ bottom: '0px',
159
+ left: '28px',
160
+ },
161
+ 'right-center': {
162
+ top: '50%',
163
+ left: '28px',
164
+ transform: 'translateY(-50%)',
165
+ },
166
+ 'left-top': {
167
+ top: '0px',
168
+ right: '28px',
169
+ },
170
+ 'left-bottom': {
171
+ bottom: '0px',
172
+ right: '28px',
173
+ },
174
+ 'left-center': {
175
+ top: '50%',
176
+ right: '28px',
177
+ transform: 'translateY(-50%)',
178
+ },
179
+ };
180
+ const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 9999 }, positions[props.$position])));
181
+ Content$3.defaultProps = { theme: EditableTheme };
182
+ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
183
+ const [show_content, toggleContent] = React.useState(false);
184
+ return (React.createElement(Wrapper$h, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
185
+ trigger || React.createElement(StyledIcon$6, { path: js.mdiInformationOutline }),
186
+ show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
187
+ };
188
+
189
+ const StyledButton = styled.button `
190
+ height: ${props => (props.$small ? '30px' : '40px')};
191
+ line-height: 1em;
192
+ border-radius: ${props => (props.$small ? '15px' : '20px')};
193
+ margin: ${props => props.$margin || '0px'};
123
194
  padding: ${props => {
124
195
  if (props.$hasChildren) {
125
196
  if (props.$small) {
@@ -130,9 +201,9 @@ const StyledButton = styled.button `
130
201
  }
131
202
  }
132
203
  return '0px';
133
- }};
134
- outline: none;
135
- background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
204
+ }};
205
+ outline: none;
206
+ background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
136
207
  width: ${props => {
137
208
  if (props.$hasChildren) {
138
209
  return 'auto';
@@ -141,56 +212,56 @@ const StyledButton = styled.button `
141
212
  return '30px';
142
213
  }
143
214
  return '40px';
144
- }};
145
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
150
- border-width: 1px;
151
- border-style: solid;
152
- border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
153
- box-sizing: border-box;
154
-
155
- &:active,
156
- &:focus,
157
- &:hover {
158
- opacity: ${props => (props.$disabled ? 0.6 : 1)};
159
- }
160
- `;
161
- const Label$5 = styled.span `
162
- color: ${props => props.$content_color || '#fff'};
163
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
164
- font-family: ${FontStyles.DEFAULT};
165
- font-weight: 500;
166
- line-height: 1;
167
- `;
168
- const StyledIcon$6 = styled.span `
169
- margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
170
- margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
171
- display: flex;
172
- align-items: center;
173
- box-sizing: border-box;
174
- `;
175
- const Badge$1 = styled.span `
176
- width: ${props => (props.$small ? '20px' : '24px')};
177
- height: ${props => (props.$small ? '20px' : '24px')};
178
- line-height: 1;
179
- display: flex;
180
- align-items: center;
181
- justify-content: center;
182
- border-radius: 100%;
183
- background-color: ${props => props.$bg_color || '#fff'};
184
- color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
185
- font-size: ${props => (props.$small ? '10px' : '12px')};
186
- font-weight: 600;
187
- font-family: ${FontStyles.DEFAULT};
188
- letter-spacing: -1px;
189
- margin-left: ${props => (props.$small ? '5px' : '10px')};
190
- margin-right: ${props => (props.$small ? '-5px' : '-10px')};
215
+ }};
216
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
217
+ display: flex;
218
+ align-items: center;
219
+ justify-content: center;
220
+ opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
221
+ border-width: 1px;
222
+ border-style: solid;
223
+ border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
224
+ box-sizing: border-box;
225
+
226
+ &:active,
227
+ &:focus,
228
+ &:hover {
229
+ opacity: ${props => (props.$disabled ? 0.6 : 1)};
230
+ }
231
+ `;
232
+ const Label$5 = styled.span `
233
+ color: ${props => props.$content_color || '#fff'};
234
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
235
+ font-family: ${FontStyles.DEFAULT};
236
+ font-weight: 500;
237
+ line-height: 1;
238
+ `;
239
+ const StyledIcon$5 = styled.span `
240
+ margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
241
+ margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
242
+ display: flex;
243
+ align-items: center;
244
+ box-sizing: border-box;
245
+ `;
246
+ const Badge$1 = styled.span `
247
+ width: ${props => (props.$small ? '20px' : '24px')};
248
+ height: ${props => (props.$small ? '20px' : '24px')};
249
+ line-height: 1;
250
+ display: flex;
251
+ align-items: center;
252
+ justify-content: center;
253
+ border-radius: 100%;
254
+ background-color: ${props => props.$bg_color || '#fff'};
255
+ color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
256
+ font-size: ${props => (props.$small ? '10px' : '12px')};
257
+ font-weight: 600;
258
+ font-family: ${FontStyles.DEFAULT};
259
+ letter-spacing: -1px;
260
+ margin-left: ${props => (props.$small ? '5px' : '10px')};
261
+ margin-right: ${props => (props.$small ? '-5px' : '-10px')};
191
262
  `;
192
263
  const Button = (_a) => {
193
- var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
264
+ var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', toolTip } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "toolTip"]);
194
265
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
195
266
  const has_children = children && children.length > 0;
196
267
  const button_type_mapping = {
@@ -224,63 +295,46 @@ const Button = (_a) => {
224
295
  },
225
296
  };
226
297
  const format_styles = button_type_mapping[format];
227
- return (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
298
+ 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, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
228
299
  children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small }, children)) : null,
229
- icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
300
+ icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children },
230
301
  React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
231
302
  badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
232
- };
233
-
234
- const StyledComponent = styled.p `
235
- color: ${props => Colors[props.$color || 'BLACK'].Hex};
236
- font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
237
- line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
238
- letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
239
- font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
240
- font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
241
- text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
242
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
243
- margin: ${props => props.$margin || '0px'};
244
- padding: ${props => props.$padding || '0px'};
245
- text-align: ${props => props.$align || 'left'};
246
- box-sizing: border-box;
247
- `;
248
- const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
249
- return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
303
+ if (toolTip && Object.keys(toolTip).length) {
304
+ 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));
305
+ }
306
+ return button_view;
250
307
  };
251
- Copy.defaultProps = {
252
- type: 'default',
253
- };
254
-
255
- const H1 = styled.h1 `
256
- color: ${Colors.BLACK.Hex};
257
- font-size: 30px;
258
- font-weight: ${props => (props.$bold ? '500' : '400')};
259
- line-height: 1.4em;
260
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
261
- margin: ${props => props.$margin || '0px'};
262
- padding: ${props => props.$padding || '0px'};
263
- box-sizing: border-box;
264
- `;
265
- const H2 = styled.h2 `
266
- color: ${Colors.BLACK.Hex};
267
- font-size: 24px;
268
- font-weight: ${props => (props.$bold ? '500' : '400')};
269
- line-height: 1.33em;
270
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
271
- margin: ${props => props.$margin || '0px'};
272
- padding: ${props => props.$padding || '0px'};
273
- box-sizing: border-box;
274
- `;
275
- const H3 = styled.h3 `
276
- color: ${Colors.BLACK.Hex};
277
- font-size: 18px;
278
- font-weight: ${props => (props.$bold ? '500' : '400')};
279
- line-height: 1.33em;
280
- font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
281
- margin: ${props => props.$margin || '0px'};
282
- padding: ${props => props.$padding || '0px'};
283
- box-sizing: border-box;
308
+
309
+ const H1 = styled.h1 `
310
+ color: ${Colors.BLACK.Hex};
311
+ font-size: 30px;
312
+ font-weight: ${props => (props.$bold ? '500' : '400')};
313
+ line-height: 1.4em;
314
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
315
+ margin: ${props => props.$margin || '0px'};
316
+ padding: ${props => props.$padding || '0px'};
317
+ box-sizing: border-box;
318
+ `;
319
+ const H2 = styled.h2 `
320
+ color: ${Colors.BLACK.Hex};
321
+ font-size: 24px;
322
+ font-weight: ${props => (props.$bold ? '500' : '400')};
323
+ line-height: 1.33em;
324
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
325
+ margin: ${props => props.$margin || '0px'};
326
+ padding: ${props => props.$padding || '0px'};
327
+ box-sizing: border-box;
328
+ `;
329
+ const H3 = styled.h3 `
330
+ color: ${Colors.BLACK.Hex};
331
+ font-size: 18px;
332
+ font-weight: ${props => (props.$bold ? '500' : '400')};
333
+ line-height: 1.33em;
334
+ font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
335
+ margin: ${props => props.$margin || '0px'};
336
+ padding: ${props => props.$padding || '0px'};
337
+ box-sizing: border-box;
284
338
  `;
285
339
  const Heading = (_a) => {
286
340
  var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -299,33 +353,33 @@ const Heading = (_a) => {
299
353
  Heading.defaultProps = {
300
354
  bold: false,
301
355
  type: 'primary',
302
- };
303
-
304
- const Wrapper$h = styled.div `
305
- position: fixed;
306
- top: 0;
307
- right: 0;
308
- bottom: 0;
309
- left: 0;
310
- z-index: 9999;
311
- background: rgba(0, 0, 0, 0.8);
312
- display: flex;
313
- align-items: center;
314
- justify-content: center;
315
- box-sizing: border-box;
356
+ };
357
+
358
+ const Wrapper$g = styled.div `
359
+ position: fixed;
360
+ top: 0;
361
+ right: 0;
362
+ bottom: 0;
363
+ left: 0;
364
+ z-index: 9999;
365
+ background: rgba(0, 0, 0, 0.8);
366
+ display: flex;
367
+ align-items: center;
368
+ justify-content: center;
369
+ box-sizing: border-box;
316
370
  `;
317
371
  const Container$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
318
- const Buttons$1 = styled.div `
319
- display: flex;
320
- gap: 10px;
321
- align-items: center;
322
- justify-content: center;
323
- margin-top: 30px;
324
- box-sizing: border-box;
372
+ const Buttons$1 = styled.div `
373
+ display: flex;
374
+ gap: 10px;
375
+ align-items: center;
376
+ justify-content: center;
377
+ margin-top: 30px;
378
+ box-sizing: border-box;
325
379
  `;
326
380
  const ActionDialog = (_a) => {
327
381
  var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
328
- return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps),
382
+ return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps),
329
383
  React.createElement(Container$4, { "$customStyle": style, open: true },
330
384
  title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
331
385
  description ? React.createElement(Copy, { align: 'center' }, description) : null,
@@ -333,29 +387,29 @@ const ActionDialog = (_a) => {
333
387
  tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
334
388
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
335
389
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)));
336
- };
337
-
338
- const Wrapper$g = styled.div `
339
- border: 1px solid #f1f1f1;
340
- border-radius: 4px;
341
- border-left-width: 4px;
342
- box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
343
- display: flex;
344
- align-items: flex-start;
345
- gap: ${({ $small }) => ($small ? '8px' : '20px')};
346
- padding: ${({ $small }) => ($small ? '11px' : '20px')};
347
- box-sizing: border-box;
348
- `;
349
- const StyledIcon$5 = styled(Icon) `
350
- flex-shrink: 0;
351
- `;
352
- const Action$1 = styled.div `
353
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
354
- font-size: ${FontSizes.DEFAULT};
355
- font-family: ${FontStyles.DEFAULT};
356
- font-weight: 500;
357
- cursor: pointer;
358
- margin-top: 6px;
390
+ };
391
+
392
+ const Wrapper$f = styled.div `
393
+ border: 1px solid #f1f1f1;
394
+ border-radius: 4px;
395
+ border-left-width: 4px;
396
+ box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
397
+ display: flex;
398
+ align-items: flex-start;
399
+ gap: ${({ $small }) => ($small ? '8px' : '20px')};
400
+ padding: ${({ $small }) => ($small ? '11px' : '20px')};
401
+ box-sizing: border-box;
402
+ `;
403
+ const StyledIcon$4 = styled(Icon) `
404
+ flex-shrink: 0;
405
+ `;
406
+ const Action$1 = styled.div `
407
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
408
+ font-size: ${FontSizes.DEFAULT};
409
+ font-family: ${FontStyles.DEFAULT};
410
+ font-weight: 500;
411
+ cursor: pointer;
412
+ margin-top: 6px;
359
413
  `;
360
414
  Action$1.defaultProps = { theme: EditableTheme };
361
415
  const Alert = (_a) => {
@@ -379,14 +433,14 @@ const Alert = (_a) => {
379
433
  icon: js.mdiCheckboxMarkedCircleOutline,
380
434
  },
381
435
  };
382
- return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { "$small": small, style: { borderLeftColor: type_mapping[type].color } }),
383
- React.createElement(StyledIcon$5, { color: type_mapping[type].color, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
436
+ return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps, { "$small": small, style: { borderLeftColor: type_mapping[type].color } }),
437
+ React.createElement(StyledIcon$4, { color: type_mapping[type].color, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
384
438
  React.createElement("div", null,
385
439
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
386
440
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
387
441
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
388
- };
389
-
442
+ };
443
+
390
444
  const colorMapping = {
391
445
  black: {
392
446
  fill_1: '#000000',
@@ -427,154 +481,154 @@ const Logo = (_a) => {
427
481
  React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
428
482
  React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
429
483
  }
430
- };
431
-
432
- const Container$3 = styled.header `
433
- width: 100%;
434
- display: flex;
435
- padding: 20px;
436
- box-sizing: border-box;
437
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
438
- background: '#fff';
439
- justify-content: space-between;
440
- `;
441
- const LogoWrapper = styled.div `
442
- display: flex;
443
- align-items: center;
444
- `;
445
- const Image = styled.img `
446
- height: 30px !important;
447
- width: auto !important;
448
- `;
449
- const Buttons = styled.div `
450
- display: flex;
451
- flex-direction: row;
452
- column-gap: 10px;
453
- flex-direction: reverse;
484
+ };
485
+
486
+ const Container$3 = styled.header `
487
+ width: 100%;
488
+ display: flex;
489
+ padding: 20px;
490
+ box-sizing: border-box;
491
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
492
+ background: '#fff';
493
+ justify-content: space-between;
494
+ `;
495
+ const LogoWrapper = styled.div `
496
+ display: flex;
497
+ align-items: center;
498
+ `;
499
+ const Image = styled.img `
500
+ height: 30px !important;
501
+ width: auto !important;
502
+ `;
503
+ const Buttons = styled.div `
504
+ display: flex;
505
+ flex-direction: row;
506
+ column-gap: 10px;
507
+ flex-direction: reverse;
454
508
  `;
455
509
  const AppHeader = ({ logoUrl, buttons = [] }) => {
456
510
  return (React.createElement(Container$3, null,
457
511
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
458
512
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
459
- };
460
-
461
- const Wrapper$f = styled.div `
462
- display: inline-block;
463
- border-radius: 4px;
464
- padding: 4px 6px;
465
- background: ${props => Colors[props.$color].Hex};
466
- color: #ffffff;
467
- box-sizing: border-box;
468
- cursor: ${props => (props.$removable ? 'pointer' : 'default')};
469
- `;
470
- const Content$3 = styled.div `
471
- display: flex;
472
- align-items: center;
473
- `;
474
- const Label$4 = styled.div `
475
- color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
476
- font-size: ${FontSizes.SMALL};
477
- font-weight: 500;
478
- font-family: ${FontStyles.DEFAULT};
479
- line-height: 1.2em;
480
- `;
481
- const Remove$1 = styled.div `
482
- margin-left: 10px;
483
- display: flex;
484
- align-items: center;
513
+ };
514
+
515
+ const Wrapper$e = styled.div `
516
+ display: inline-block;
517
+ border-radius: 4px;
518
+ padding: 4px 6px;
519
+ background: ${props => Colors[props.$color].Hex};
520
+ color: #ffffff;
521
+ box-sizing: border-box;
522
+ cursor: ${props => (props.$removable ? 'pointer' : 'default')};
523
+ `;
524
+ const Content$2 = styled.div `
525
+ display: flex;
526
+ align-items: center;
527
+ `;
528
+ const Label$4 = styled.div `
529
+ color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
530
+ font-size: ${FontSizes.SMALL};
531
+ font-weight: 500;
532
+ font-family: ${FontStyles.DEFAULT};
533
+ line-height: 1.2em;
534
+ `;
535
+ const Remove$1 = styled.div `
536
+ margin-left: 10px;
537
+ display: flex;
538
+ align-items: center;
485
539
  `;
486
540
  const Tag = (_a) => {
487
541
  var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
488
- return (React.createElement(Wrapper$f, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
489
- React.createElement(Content$3, null,
542
+ return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
543
+ React.createElement(Content$2, null,
490
544
  React.createElement(Label$4, { "$color": color }, children),
491
545
  removable ? (React.createElement(Remove$1, null,
492
546
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
493
- };
494
-
495
- const SidebarContainer = styled.div `
496
- border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
497
- display: flex;
498
- flex-direction: column;
499
- height: 100%;
500
- padding: 12px 0px;
501
- width: ${props => (props.$isOpen ? props.$width : '60px')};
502
- `;
503
- const MenuWrapper$1 = styled.div `
504
- display: flex;
505
- align-items: center;
506
- border-left-width: 4px;
507
- border-left-style: solid;
508
- border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
509
- cursor: pointer;
510
- height: 40px;
511
-
512
- &:hover > div {
513
- color: ${props => props.$color.Hex};
514
- }
515
-
516
- &:hover > svg > path {
517
- fill: ${Colors.BLACK.Hex} !important;
518
- }
519
- `;
520
- const MenuIcon = styled(Icon) `
521
- width: 20px;
522
- height: 20px;
523
- margin: 0px 16px;
524
- flex-shrink: 0;
525
-
526
- > path {
527
- fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
528
- }
529
- `;
530
- const MenuLabel = styled.div `
531
- color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
532
- flex: 1;
533
- font-size: 12px;
534
- font-style: normal;
535
- font-weight: 600;
536
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
537
- line-height: 16px;
538
- padding: 12px 0px;
539
- letter-spacing: 1px;
540
- `;
541
- const SubMenu = styled.div `
542
- overflow-y: auto;
543
- padding-left: 44px;
544
- padding-right: 20px;
545
- padding-bottom: 10px;
546
- `;
547
- const SubMenuItem = styled.a `
548
- display: block;
549
- padding: 8px 12px;
550
- border-radius: 8px;
551
- font-size: 13px;
552
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
553
- line-height: 20px;
554
- text-decoration: none;
555
- font-weight: ${({ $active }) => ($active ? '500' : '400')};
556
- color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
557
- background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
558
- cursor: pointer;
559
-
560
- &:hover {
561
- color: ${props => props.$color.Hex};
562
- font-weight: 500;
563
- }
564
- `;
565
- const Footer = styled.div `
566
- padding: 20px 14px 0px;
567
- display: flex;
568
- align-items: center;
569
- `;
570
- const FooterInfo = styled.div `
571
- display: flex;
572
- flex-direction: column;
573
- flex: 1;
574
- align-items: flex-start;
575
- `;
576
- const SidebarMenuContainer = styled.div `
577
- flex-grow: 1;
547
+ };
548
+
549
+ const SidebarContainer = styled.div `
550
+ border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
551
+ display: flex;
552
+ flex-direction: column;
553
+ height: 100%;
554
+ padding: 12px 0px;
555
+ width: ${props => (props.$isOpen ? props.$width : '60px')};
556
+ `;
557
+ const MenuWrapper$1 = styled.div `
558
+ display: flex;
559
+ align-items: center;
560
+ border-left-width: 4px;
561
+ border-left-style: solid;
562
+ border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
563
+ cursor: pointer;
564
+ height: 40px;
565
+
566
+ &:hover > div {
567
+ color: ${props => props.$color.Hex};
568
+ }
569
+
570
+ &:hover > svg > path {
571
+ fill: ${Colors.BLACK.Hex} !important;
572
+ }
573
+ `;
574
+ const MenuIcon = styled(Icon) `
575
+ width: 20px;
576
+ height: 20px;
577
+ margin: 0px 16px;
578
+ flex-shrink: 0;
579
+
580
+ > path {
581
+ fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
582
+ }
583
+ `;
584
+ const MenuLabel = styled.div `
585
+ color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
586
+ flex: 1;
587
+ font-size: 12px;
588
+ font-style: normal;
589
+ font-weight: 600;
590
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
591
+ line-height: 16px;
592
+ padding: 12px 0px;
593
+ letter-spacing: 1px;
594
+ `;
595
+ const SubMenu = styled.div `
596
+ overflow-y: auto;
597
+ padding-left: 44px;
598
+ padding-right: 20px;
599
+ padding-bottom: 10px;
600
+ `;
601
+ const SubMenuItem = styled.a `
602
+ display: block;
603
+ padding: 8px 12px;
604
+ border-radius: 8px;
605
+ font-size: 13px;
606
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
607
+ line-height: 20px;
608
+ text-decoration: none;
609
+ font-weight: ${({ $active }) => ($active ? '500' : '400')};
610
+ color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
611
+ background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
612
+ cursor: pointer;
613
+
614
+ &:hover {
615
+ color: ${props => props.$color.Hex};
616
+ font-weight: 500;
617
+ }
618
+ `;
619
+ const Footer = styled.div `
620
+ padding: 20px 14px 0px;
621
+ display: flex;
622
+ align-items: center;
623
+ `;
624
+ const FooterInfo = styled.div `
625
+ display: flex;
626
+ flex-direction: column;
627
+ flex: 1;
628
+ align-items: flex-start;
629
+ `;
630
+ const SidebarMenuContainer = styled.div `
631
+ flex-grow: 1;
578
632
  `;
579
633
  const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
580
634
  const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -598,79 +652,79 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
598
652
  e.preventDefault();
599
653
  toggleCollapse(!collapsed);
600
654
  }, small: true }))));
601
- };
602
-
603
- const Wrapper$e = styled.div `
604
- border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
605
- border-radius: 8px;
606
- box-sizing: border-box;
607
- display: flex;
608
- align-items: center;
609
- justify-content: space-between;
610
- padding: 16px 20px;
611
- `;
612
- Wrapper$e.defaultProps = { theme: EditableTheme };
613
- const Left = styled.div `
614
- box-sizing: border-box;
615
- display: flex;
616
- align-items: center;
617
- justify-content: space-between;
618
- flex-shrink: 0;
619
- `;
620
- const Info$1 = styled.div `
621
- box-sizing: border-box;
622
- display: flex;
623
- align-items: center;
624
- margin-right: 30px;
625
- `;
626
- const Selected = styled.span `
627
- font-size: 14px;
628
- font-weight: 400;
629
- font-family: ${FontStyles.DEFAULT};
630
- color: ${Colors.BLACK.Hex};
631
- line-height: 1;
632
- `;
633
- const Clear = styled.span `
634
- font-size: 14px;
635
- font-weight: 400;
636
- font-family: ${FontStyles.DEFAULT};
637
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
638
- line-height: 1;
639
- cursor: pointer;
640
- padding-left: 10px;
641
- margin-left: 10px;
642
- border-left: 1px solid #ccc;
655
+ };
656
+
657
+ const Wrapper$d = styled.div `
658
+ border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
659
+ border-radius: 8px;
660
+ box-sizing: border-box;
661
+ display: flex;
662
+ align-items: center;
663
+ justify-content: space-between;
664
+ padding: 16px 20px;
665
+ `;
666
+ Wrapper$d.defaultProps = { theme: EditableTheme };
667
+ const Left = styled.div `
668
+ box-sizing: border-box;
669
+ display: flex;
670
+ align-items: center;
671
+ justify-content: space-between;
672
+ flex-shrink: 0;
673
+ `;
674
+ const Info$1 = styled.div `
675
+ box-sizing: border-box;
676
+ display: flex;
677
+ align-items: center;
678
+ margin-right: 30px;
679
+ `;
680
+ const Selected = styled.span `
681
+ font-size: 14px;
682
+ font-weight: 400;
683
+ font-family: ${FontStyles.DEFAULT};
684
+ color: ${Colors.BLACK.Hex};
685
+ line-height: 1;
686
+ `;
687
+ const Clear = styled.span `
688
+ font-size: 14px;
689
+ font-weight: 400;
690
+ font-family: ${FontStyles.DEFAULT};
691
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
692
+ line-height: 1;
693
+ cursor: pointer;
694
+ padding-left: 10px;
695
+ margin-left: 10px;
696
+ border-left: 1px solid #ccc;
643
697
  `;
644
698
  Clear.defaultProps = { theme: EditableTheme };
645
- const Actions$1 = styled.div `
646
- box-sizing: border-box;
647
- display: flex;
648
- align-items: center;
649
- column-gap: 10px;
650
- `;
651
- const Error$1 = styled.div `
652
- box-sizing: border-box;
653
- display: flex;
654
- align-items: center;
655
- background: rgba(${Colors.RED.Rgb}, 0.1);
656
- border-radius: 4px;
657
- padding: 6px 8px;
658
- text-overflow: ellipsis;
659
- white-space: nowrap;
660
- overflow: hidden;
661
- margin-left: 30px;
662
- `;
663
- const ErrorMsg = styled.span `
664
- font-size: 14px;
665
- font-weight: 500;
666
- font-family: ${FontStyles.DEFAULT};
667
- line-height: 1em;
668
- color: ${Colors.RED.Hex};
669
- margin-left: 8px;
699
+ const Actions$1 = styled.div `
700
+ box-sizing: border-box;
701
+ display: flex;
702
+ align-items: center;
703
+ column-gap: 10px;
704
+ `;
705
+ const Error$1 = styled.div `
706
+ box-sizing: border-box;
707
+ display: flex;
708
+ align-items: center;
709
+ background: rgba(${Colors.RED.Rgb}, 0.1);
710
+ border-radius: 4px;
711
+ padding: 6px 8px;
712
+ text-overflow: ellipsis;
713
+ white-space: nowrap;
714
+ overflow: hidden;
715
+ margin-left: 30px;
716
+ `;
717
+ const ErrorMsg = styled.span `
718
+ font-size: 14px;
719
+ font-weight: 500;
720
+ font-family: ${FontStyles.DEFAULT};
721
+ line-height: 1em;
722
+ color: ${Colors.RED.Hex};
723
+ margin-left: 8px;
670
724
  `;
671
725
  const BulkActionBar = (_a) => {
672
726
  var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
673
- return (React.createElement(Wrapper$e, Object.assign({}, accessibleProps),
727
+ return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps),
674
728
  React.createElement(Left, null,
675
729
  React.createElement(Info$1, null,
676
730
  React.createElement(Selected, null,
@@ -681,73 +735,73 @@ const BulkActionBar = (_a) => {
681
735
  errorMsg ? (React.createElement(Error$1, null,
682
736
  React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
683
737
  React.createElement(ErrorMsg, null, errorMsg))) : null));
684
- };
685
-
686
- const Wrapper$d = styled.div `
687
- background: #fff;
688
- border-radius: 8px;
689
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
690
- display: flex;
691
- flex-direction: column;
692
- gap: 4px;
693
- max-height: ${props => props.$maxHeight || '312px'};
694
- padding: 10px;
695
- width: 200px;
696
- `;
697
- const MenuItem = styled.div `
698
- align-items: center;
699
- border-radius: 8px;
700
- border: 1px solid transparent;
701
- display: flex;
702
- gap: 8px;
703
- height: 38px;
704
- padding: 8px;
705
- &:hover {
706
- background: rgba(1, 147, 215, 0.1);
707
- cursor: pointer;
708
-
709
- svg,
710
- path {
711
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
712
- }
713
- }
738
+ };
739
+
740
+ const Wrapper$c = styled.div `
741
+ background: #fff;
742
+ border-radius: 8px;
743
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
744
+ display: flex;
745
+ flex-direction: column;
746
+ gap: 4px;
747
+ max-height: ${props => props.$maxHeight || '312px'};
748
+ padding: 10px;
749
+ width: 200px;
750
+ `;
751
+ const MenuItem = styled.div `
752
+ align-items: center;
753
+ border-radius: 8px;
754
+ border: 1px solid transparent;
755
+ display: flex;
756
+ gap: 8px;
757
+ height: 38px;
758
+ padding: 8px;
759
+ &:hover {
760
+ background: rgba(1, 147, 215, 0.1);
761
+ cursor: pointer;
762
+
763
+ svg,
764
+ path {
765
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
766
+ }
767
+ }
714
768
  `;
715
769
  MenuItem.defaultProps = { theme: EditableTheme };
716
- const Title$1 = styled.span `
717
- font-family: Roboto;
718
- font-size: 14px;
719
- font-weight: 400;
720
- height: auto;
721
- letter-spacing: 0px;
722
- line-height: 22px;
723
- text-align: left;
724
- color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
725
- pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
770
+ const Title$1 = styled.span `
771
+ font-family: Roboto;
772
+ font-size: 14px;
773
+ font-weight: 400;
774
+ height: auto;
775
+ letter-spacing: 0px;
776
+ line-height: 22px;
777
+ text-align: left;
778
+ color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
779
+ pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
726
780
  `;
727
781
  Title$1.defaultProps = {
728
782
  disabled: false,
729
783
  };
730
784
  const MoreMenu = (_a) => {
731
785
  var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
732
- return (React.createElement(Wrapper$d, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
786
+ return (React.createElement(Wrapper$c, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
733
787
  var _a;
734
788
  return (React.createElement(MenuItem, { key: i, onClick: item.onClick },
735
789
  item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
736
790
  React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label)));
737
791
  })));
738
- };
739
-
740
- const MenuWrapper = styled.div `
741
- position: relative; // Ensure this is relative
742
- display: inline-block;
743
- `;
744
- const StyledMoreMenu = styled(MoreMenu) `
745
- position: absolute; // Changed from fixed to absolute
746
- top: ${props => props.$top};
747
- left: ${props => props.$left};
748
- width: ${props => props.$menuWidth};
749
- max-height: ${props => props.maxHeight};
750
- z-index: 10;
792
+ };
793
+
794
+ const MenuWrapper = styled.div `
795
+ position: relative; // Ensure this is relative
796
+ display: inline-block;
797
+ `;
798
+ const StyledMoreMenu = styled(MoreMenu) `
799
+ position: absolute; // Changed from fixed to absolute
800
+ top: ${props => props.$top};
801
+ left: ${props => props.$left};
802
+ width: ${props => props.$menuWidth};
803
+ max-height: ${props => props.maxHeight};
804
+ z-index: 10;
751
805
  `;
752
806
  const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, }) => {
753
807
  const [showMenu, toggleMenu] = React.useState(false);
@@ -821,135 +875,85 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
821
875
  return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
822
876
  React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
823
877
  showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
824
- };
825
-
826
- const Wrapper$c = styled.div `
827
- display: inline-block;
828
- position: relative;
829
- height: 16px;
830
- `;
831
- const StyledIcon$4 = styled(Icon) `
832
- width: 16px;
833
- height: 16px;
834
- margin: 0px 6px;
835
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
836
- cursor: pointer;
837
- `;
838
- StyledIcon$4.defaultProps = { theme: EditableTheme };
839
- const positions = {
840
- 'right-top': {
841
- top: '0px',
842
- left: '28px',
843
- },
844
- 'right-bottom': {
845
- bottom: '0px',
846
- left: '28px',
847
- },
848
- 'right-center': {
849
- top: '50%',
850
- left: '28px',
851
- transform: 'translateY(-50%)',
852
- },
853
- 'left-top': {
854
- top: '0px',
855
- right: '28px',
856
- },
857
- 'left-bottom': {
858
- bottom: '0px',
859
- right: '28px',
860
- },
861
- 'left-center': {
862
- top: '50%',
863
- right: '28px',
864
- transform: 'translateY(-50%)',
865
- },
866
878
  };
867
- const Content$2 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 9999 }, positions[props.$position])));
868
- Content$2.defaultProps = { theme: EditableTheme };
869
- const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
870
- const [show_content, toggleContent] = React.useState(false);
871
- return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
872
- trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
873
- show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
874
- };
875
-
876
- const Wrapper$b = styled.label `
877
- border-radius: 4px;
878
- padding: 4px 0px 4px 6px;
879
- margin-left: -6px;
880
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
881
- display: flex;
882
- align-items: center;
883
- font-size: ${FontSizes.DEFAULT};
884
- line-height: 1.6em;
885
- box-sizing: border-box;
886
- position: relative;
887
-
888
- &:focus-within {
889
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
890
- }
879
+
880
+ const Wrapper$b = styled.label `
881
+ border-radius: 4px;
882
+ padding: 4px 0px 4px 6px;
883
+ margin-left: -6px;
884
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
885
+ display: flex;
886
+ align-items: center;
887
+ font-size: ${FontSizes.DEFAULT};
888
+ line-height: 1.6em;
889
+ box-sizing: border-box;
890
+ position: relative;
891
+
892
+ &:focus-within {
893
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
894
+ }
891
895
  `;
892
896
  Wrapper$b.defaultProps = { theme: EditableTheme };
893
- const Input$2 = styled.input `
894
- font-size: 20px;
895
- margin: 0px;
896
- line-height: 1.1em;
897
- box-sizing: border-box;
898
- position: absolute;
899
- opacity: 0;
900
- cursor: pointer;
901
- height: 0;
902
- width: 0;
903
- &:checked + span {
904
- background-color: ${Colors.PRIMARY.Hex};
905
- border-color: ${Colors.PRIMARY.Hex};
906
- }
907
- &:checked:disabled + span {
908
- background-color: ${Colors.MEDIUM_GRAY.Hex};
909
- border-color: ${Colors.MEDIUM_GRAY.Hex};
910
- }
911
- &:disabled + span {
912
- background-color: #d3d3d3;
913
- border-color: #d3d3d3;
914
- }
915
- &:checked + span:after {
916
- display: block;
917
- }
918
- `;
919
- const Check$1 = styled.span `
920
- height: 17px;
921
- width: 17px;
922
- min-width: 17px;
923
- background-color: #fff;
924
- border-width: 2px;
925
- border-style: solid;
926
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
927
- box-sizing: border-box;
928
- position: relative;
929
- &:after {
930
- content: '';
931
- position: absolute;
932
- left: 3px;
933
- top: 0px;
934
- width: 7px;
935
- height: 12px;
936
- border: solid white;
937
- border-width: 0 3px 3px 0;
938
- -webkit-transform: rotate(45deg);
939
- -ms-transform: rotate(45deg);
940
- transform: rotate(45deg);
941
- box-sizing: border-box;
942
- display: none;
943
- }
944
- `;
945
- const Label$3 = styled.span `
946
- font-family: ${FontStyles.DEFAULT};
947
- font-size: ${FontSizes.DEFAULT};
948
- font-weight: 400;
949
- line-height: 1.6em;
950
- color: ${props => props.color || Colors.BLACK.Hex};
951
- margin-left: 6px;
952
- box-sizing: border-box;
897
+ const Input$2 = styled.input `
898
+ font-size: 20px;
899
+ margin: 0px;
900
+ line-height: 1.1em;
901
+ box-sizing: border-box;
902
+ position: absolute;
903
+ opacity: 0;
904
+ cursor: pointer;
905
+ height: 0;
906
+ width: 0;
907
+ &:checked + span {
908
+ background-color: ${Colors.PRIMARY.Hex};
909
+ border-color: ${Colors.PRIMARY.Hex};
910
+ }
911
+ &:checked:disabled + span {
912
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
913
+ border-color: ${Colors.MEDIUM_GRAY.Hex};
914
+ }
915
+ &:disabled + span {
916
+ background-color: #d3d3d3;
917
+ border-color: #d3d3d3;
918
+ }
919
+ &:checked + span:after {
920
+ display: block;
921
+ }
922
+ `;
923
+ const Check$1 = styled.span `
924
+ height: 17px;
925
+ width: 17px;
926
+ min-width: 17px;
927
+ background-color: #fff;
928
+ border-width: 2px;
929
+ border-style: solid;
930
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
931
+ box-sizing: border-box;
932
+ position: relative;
933
+ &:after {
934
+ content: '';
935
+ position: absolute;
936
+ left: 3px;
937
+ top: 0px;
938
+ width: 7px;
939
+ height: 12px;
940
+ border: solid white;
941
+ border-width: 0 3px 3px 0;
942
+ -webkit-transform: rotate(45deg);
943
+ -ms-transform: rotate(45deg);
944
+ transform: rotate(45deg);
945
+ box-sizing: border-box;
946
+ display: none;
947
+ }
948
+ `;
949
+ const Label$3 = styled.span `
950
+ font-family: ${FontStyles.DEFAULT};
951
+ font-size: ${FontSizes.DEFAULT};
952
+ font-weight: 400;
953
+ line-height: 1.6em;
954
+ color: ${props => props.color || Colors.BLACK.Hex};
955
+ margin-left: 6px;
956
+ box-sizing: border-box;
953
957
  `;
954
958
  const Checkbox = (_a) => {
955
959
  var { children, color, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip"]);
@@ -959,16 +963,16 @@ const Checkbox = (_a) => {
959
963
  children ? (React.createElement(Label$3, { color: color },
960
964
  children,
961
965
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
962
- };
963
-
964
- const SelectAll = styled.div `
965
- padding: 8px 12px;
966
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
967
- box-sizing: border-box;
966
+ };
967
+
968
+ const SelectAll = styled.div `
969
+ padding: 8px 12px;
970
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
971
+ box-sizing: border-box;
968
972
  `;
969
- const Options$1 = styled.div `
970
- padding: 12px;
971
- box-sizing: border-box;
973
+ const Options$1 = styled.div `
974
+ padding: 12px;
975
+ box-sizing: border-box;
972
976
  `;
973
977
  const Checklist = (_a) => {
974
978
  var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -1005,70 +1009,70 @@ const Checklist = (_a) => {
1005
1009
  const checked = selected.includes(option.value);
1006
1010
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
1007
1011
  }))));
1008
- };
1009
-
1010
- const Wrapper$a = styled.div `
1011
- border-radius: 4px;
1012
- height: 40px;
1013
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1014
- position: relative;
1015
- cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1016
- border-width: 1px;
1017
- border-style: solid;
1018
- border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1019
- border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1020
- flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1021
- box-sizing: border-box;
1022
- padding: 10px 0px;
1023
- display: flex;
1024
- align-items: center;
1025
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1026
-
1027
- &:focus-within {
1028
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1029
- }
1012
+ };
1013
+
1014
+ const Wrapper$a = styled.div `
1015
+ border-radius: 4px;
1016
+ height: 40px;
1017
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1018
+ position: relative;
1019
+ cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
1020
+ border-width: 1px;
1021
+ border-style: solid;
1022
+ border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
1023
+ border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
1024
+ flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
1025
+ box-sizing: border-box;
1026
+ padding: 10px 0px;
1027
+ display: flex;
1028
+ align-items: center;
1029
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1030
+
1031
+ &:focus-within {
1032
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1033
+ }
1030
1034
  `;
1031
1035
  Wrapper$a.defaultProps = { theme: EditableTheme };
1032
- const Trigger$1 = styled.select `
1033
- appearance: none;
1034
- box-shadow: none;
1035
- outline: none;
1036
- border: none;
1037
- color: ${Colors.BLACK.Hex};
1038
- font-size: ${FontSizes.DEFAULT};
1039
- font-weight: 400;
1040
- font-family: ${FontStyles.DEFAULT};
1041
- line-height: 2.9em;
1042
- background-color: transparent;
1043
- background-image: none;
1044
- width: 100%;
1045
- box-sizing: border-box;
1046
- padding: 0px 30px 0px 10px;
1047
- box-sizing: border-box;
1048
- position: relative;
1049
- z-index: 2;
1050
- `;
1051
- const IconWrapper$2 = styled(Icon) `
1052
- position: absolute;
1053
- right: 9px;
1054
- z-index: 1;
1055
- `;
1056
- const SearchInput$1 = styled.input `
1057
- position: absolute;
1058
- left: 2px;
1059
- top: 2px;
1060
- z-index: 999;
1061
- width: 90%;
1062
- height: 30px;
1063
- border: none;
1064
- outline: none;
1065
- color: ${Colors.BLACK.Hex};
1066
- font-family: ${FontStyles.DEFAULT};
1067
- font-size: ${FontSizes.DEFAULT};
1068
- font-weight: 400;
1069
- line-height: 2.9em;
1070
- overflow: hidden;
1071
- white-space: nowrap;
1036
+ const Trigger$1 = styled.select `
1037
+ appearance: none;
1038
+ box-shadow: none;
1039
+ outline: none;
1040
+ border: none;
1041
+ color: ${Colors.BLACK.Hex};
1042
+ font-size: ${FontSizes.DEFAULT};
1043
+ font-weight: 400;
1044
+ font-family: ${FontStyles.DEFAULT};
1045
+ line-height: 2.9em;
1046
+ background-color: transparent;
1047
+ background-image: none;
1048
+ width: 100%;
1049
+ box-sizing: border-box;
1050
+ padding: 0px 30px 0px 10px;
1051
+ box-sizing: border-box;
1052
+ position: relative;
1053
+ z-index: 2;
1054
+ `;
1055
+ const IconWrapper$2 = styled(Icon) `
1056
+ position: absolute;
1057
+ right: 9px;
1058
+ z-index: 1;
1059
+ `;
1060
+ const SearchInput$1 = styled.input `
1061
+ position: absolute;
1062
+ left: 2px;
1063
+ top: 2px;
1064
+ z-index: 999;
1065
+ width: 90%;
1066
+ height: 30px;
1067
+ border: none;
1068
+ outline: none;
1069
+ color: ${Colors.BLACK.Hex};
1070
+ font-family: ${FontStyles.DEFAULT};
1071
+ font-size: ${FontSizes.DEFAULT};
1072
+ font-weight: 400;
1073
+ line-height: 2.9em;
1074
+ overflow: hidden;
1075
+ white-space: nowrap;
1072
1076
  `;
1073
1077
  const Select = (_a) => {
1074
1078
  var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
@@ -1102,15 +1106,15 @@ const Select = (_a) => {
1102
1106
  filteredOptions &&
1103
1107
  filteredOptions.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
1104
1108
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
1105
- };
1106
-
1107
- const DatePickerWrapper = styled.div `
1108
- display: flex;
1109
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1109
+ };
1110
+
1111
+ const DatePickerWrapper = styled.div `
1112
+ display: flex;
1113
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1110
1114
  `;
1111
- const Middle = styled.div `
1112
- margin: 0px -1px;
1113
- flex-grow: 1;
1115
+ const Middle = styled.div `
1116
+ margin: 0px -1px;
1117
+ flex-grow: 1;
1114
1118
  `;
1115
1119
  const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date,
1116
1120
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1191,66 +1195,66 @@ onChange = () => { }, style, }) => {
1191
1195
  React.createElement(Middle, null,
1192
1196
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
1193
1197
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
1194
- };
1195
-
1196
- const Scrim$1 = styled.div `
1197
- position: ${({ $position }) => $position};
1198
- top: 0;
1199
- right: 0;
1200
- bottom: 0;
1201
- left: 0;
1202
- z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1203
- background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1204
- `;
1205
- const Container$2 = styled.div `
1206
- z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1207
- min-width: 400px;
1208
- width: ${({ $width }) => $width || '400px'};
1209
- overflow: hidden;
1210
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1211
- outline: none;
1212
- border: none;
1213
- position: ${({ $position }) => $position};
1214
- top: 0;
1215
- right: 0;
1216
- bottom: 0;
1217
- padding: 0px;
1218
- display: flex;
1219
- flex-direction: column;
1220
- box-sizing: border-box;
1221
- background: #fff;
1222
- `;
1223
- const Header$2 = styled.div `
1224
- padding: 30px 20px;
1225
- display: flex;
1226
- align-items: flex-start;
1227
- box-sizing: border-box;
1228
- flex-shrink: 0;
1229
- background: #fff;
1230
- `;
1231
- const Close$1 = styled.div `
1232
- margin-left: auto;
1233
- display: flex;
1234
- align-items: center;
1235
- padding-left: 20px;
1236
- cursor: pointer;
1237
- `;
1238
- const ContentWrapper$1 = styled.div `
1239
- overflow-x: hidden;
1240
- overflow-y: auto;
1241
- box-sizing: border-box;
1242
- flex: 1;
1243
- background: #fff;
1244
- `;
1245
- const ButtonBar$1 = styled.div `
1246
- padding: 20px;
1247
- display: flex;
1248
- align-items: center;
1249
- justify-content: flex-end;
1250
- box-sizing: border-box;
1251
- gap: 10px;
1252
- flex-shrink: 0;
1253
- background: #fff;
1198
+ };
1199
+
1200
+ const Scrim$1 = styled.div `
1201
+ position: ${({ $position }) => $position};
1202
+ top: 0;
1203
+ right: 0;
1204
+ bottom: 0;
1205
+ left: 0;
1206
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
1207
+ background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
1208
+ `;
1209
+ const Container$2 = styled.div `
1210
+ z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
1211
+ min-width: 400px;
1212
+ width: ${({ $width }) => $width || '400px'};
1213
+ overflow: hidden;
1214
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
1215
+ outline: none;
1216
+ border: none;
1217
+ position: ${({ $position }) => $position};
1218
+ top: 0;
1219
+ right: 0;
1220
+ bottom: 0;
1221
+ padding: 0px;
1222
+ display: flex;
1223
+ flex-direction: column;
1224
+ box-sizing: border-box;
1225
+ background: #fff;
1226
+ `;
1227
+ const Header$2 = styled.div `
1228
+ padding: 30px 20px;
1229
+ display: flex;
1230
+ align-items: flex-start;
1231
+ box-sizing: border-box;
1232
+ flex-shrink: 0;
1233
+ background: #fff;
1234
+ `;
1235
+ const Close$1 = styled.div `
1236
+ margin-left: auto;
1237
+ display: flex;
1238
+ align-items: center;
1239
+ padding-left: 20px;
1240
+ cursor: pointer;
1241
+ `;
1242
+ const ContentWrapper$1 = styled.div `
1243
+ overflow-x: hidden;
1244
+ overflow-y: auto;
1245
+ box-sizing: border-box;
1246
+ flex: 1;
1247
+ background: #fff;
1248
+ `;
1249
+ const ButtonBar$1 = styled.div `
1250
+ padding: 20px;
1251
+ display: flex;
1252
+ align-items: center;
1253
+ justify-content: flex-end;
1254
+ box-sizing: border-box;
1255
+ gap: 10px;
1256
+ flex-shrink: 0;
1257
+ background: #fff;
1254
1258
  `;
1255
1259
  const Drawer = (_a) => {
1256
1260
  var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width"]);
@@ -1278,55 +1282,55 @@ const Drawer = (_a) => {
1278
1282
  secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
1279
1283
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null),
1280
1284
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1281
- };
1282
-
1285
+ };
1286
+
1283
1287
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
1284
- const LabelRow = styled.div `
1285
- display: flex;
1286
- align-items: center;
1287
- justify-content: space-between;
1288
- margin: 0 0 4px 0;
1289
- box-sizing: border-box;
1290
- `;
1291
- const Label$2 = styled.label `
1292
- font-size: ${FontSizes.DEFAULT};
1293
- font-weight: 500;
1294
- line-height: 1.3em;
1295
- font-family: ${FontStyles.DEFAULT};
1296
- color: ${Colors.BLACK.Hex};
1297
- display: flex;
1298
- align-items: center;
1299
- `;
1300
- const Required = styled.span `
1301
- color: ${Colors.RED.Hex};
1302
- margin-left: 4px;
1303
- `;
1304
- const Action = styled.span `
1305
- font-size: ${FontSizes.DEFAULT};
1306
- font-weight: 500;
1307
- line-height: 1em;
1308
- font-family: ${FontStyles.DEFAULT};
1309
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1310
- cursor: pointer;
1288
+ const LabelRow = styled.div `
1289
+ display: flex;
1290
+ align-items: center;
1291
+ justify-content: space-between;
1292
+ margin: 0 0 4px 0;
1293
+ box-sizing: border-box;
1294
+ `;
1295
+ const Label$2 = styled.label `
1296
+ font-size: ${FontSizes.DEFAULT};
1297
+ font-weight: 500;
1298
+ line-height: 1.3em;
1299
+ font-family: ${FontStyles.DEFAULT};
1300
+ color: ${Colors.BLACK.Hex};
1301
+ display: flex;
1302
+ align-items: center;
1303
+ `;
1304
+ const Required = styled.span `
1305
+ color: ${Colors.RED.Hex};
1306
+ margin-left: 4px;
1307
+ `;
1308
+ const Action = styled.span `
1309
+ font-size: ${FontSizes.DEFAULT};
1310
+ font-weight: 500;
1311
+ line-height: 1em;
1312
+ font-family: ${FontStyles.DEFAULT};
1313
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1314
+ cursor: pointer;
1311
1315
  `;
1312
1316
  Action.defaultProps = { theme: EditableTheme };
1313
- const Description = styled.div `
1314
- font-size: ${FontSizes.SMALL};
1315
- font-weight: 400;
1316
- line-height: 1.3em;
1317
- font-family: ${FontStyles.DEFAULT};
1318
- color: ${Colors.BLACK.Hex};
1319
- margin: 0 0 8px 0;
1320
- box-sizing: border-box;
1321
- `;
1322
- const Validation = styled.div `
1323
- font-size: ${FontSizes.SMALL};
1324
- font-weight: 400;
1325
- line-height: 1.3em;
1326
- font-family: ${FontStyles.DEFAULT};
1327
- color: ${Colors.RED.Hex};
1328
- margin: 4px 0 0 0;
1329
- box-sizing: border-box;
1317
+ const Description = styled.div `
1318
+ font-size: ${FontSizes.SMALL};
1319
+ font-weight: 400;
1320
+ line-height: 1.3em;
1321
+ font-family: ${FontStyles.DEFAULT};
1322
+ color: ${Colors.BLACK.Hex};
1323
+ margin: 0 0 8px 0;
1324
+ box-sizing: border-box;
1325
+ `;
1326
+ const Validation = styled.div `
1327
+ font-size: ${FontSizes.SMALL};
1328
+ font-weight: 400;
1329
+ line-height: 1.3em;
1330
+ font-family: ${FontStyles.DEFAULT};
1331
+ color: ${Colors.RED.Hex};
1332
+ margin: 4px 0 0 0;
1333
+ box-sizing: border-box;
1330
1334
  `;
1331
1335
  const Field = (_a) => {
1332
1336
  var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1340,43 +1344,43 @@ const Field = (_a) => {
1340
1344
  description ? React.createElement(Description, null, description) : null,
1341
1345
  children,
1342
1346
  validationText ? React.createElement(Validation, null, validationText) : null));
1343
- };
1344
-
1345
- const Wrapper$8 = styled.fieldset `
1346
- margin-inline-start: 0px;
1347
- margin-inline-end: 0px;
1348
- padding-block-start: 0px;
1349
- padding-inline-start: 0px;
1350
- padding-inline-end: 0px;
1351
- padding-block-end: 0px;
1352
- min-inline-size: min-content;
1353
- border-width: 0px;
1354
- border-style: none;
1355
- border-color: transparent;
1356
- border-image: none;
1357
- `;
1358
- const Label$1 = styled.legend `
1359
- padding-inline-start: 0px;
1360
- padding-inline-end: 0px;
1361
-
1362
- color: ${Colors.BLACK.Hex};
1363
- font-family: ${FontStyles.DEFAULT};
1364
- font-size: ${FontSizes.DEFAULT};
1365
- font-weight: 500;
1366
- line-height: 22px;
1367
- margin-bottom: 6px;
1368
- `;
1369
- const Content$1 = styled.div `
1370
- padding: 20px;
1371
- border-radius: 8px;
1372
- background: #fcfcfc;
1347
+ };
1348
+
1349
+ const Wrapper$8 = styled.fieldset `
1350
+ margin-inline-start: 0px;
1351
+ margin-inline-end: 0px;
1352
+ padding-block-start: 0px;
1353
+ padding-inline-start: 0px;
1354
+ padding-inline-end: 0px;
1355
+ padding-block-end: 0px;
1356
+ min-inline-size: min-content;
1357
+ border-width: 0px;
1358
+ border-style: none;
1359
+ border-color: transparent;
1360
+ border-image: none;
1361
+ `;
1362
+ const Label$1 = styled.legend `
1363
+ padding-inline-start: 0px;
1364
+ padding-inline-end: 0px;
1365
+
1366
+ color: ${Colors.BLACK.Hex};
1367
+ font-family: ${FontStyles.DEFAULT};
1368
+ font-size: ${FontSizes.DEFAULT};
1369
+ font-weight: 500;
1370
+ line-height: 22px;
1371
+ margin-bottom: 6px;
1372
+ `;
1373
+ const Content$1 = styled.div `
1374
+ padding: 20px;
1375
+ border-radius: 8px;
1376
+ background: #fcfcfc;
1373
1377
  `;
1374
1378
  const FieldGroup = ({ children, label }) => {
1375
1379
  return (React.createElement(Wrapper$8, null,
1376
1380
  React.createElement(Label$1, null, label),
1377
1381
  React.createElement(Content$1, null, children)));
1378
- };
1379
-
1382
+ };
1383
+
1380
1384
  const Dropzone = styled.div `
1381
1385
  border-radius: 8px;
1382
1386
  border-width: 1px;
@@ -1564,8 +1568,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
1564
1568
  React.createElement(Copy, { align: 'center', color: 'GRAY' }, message),
1565
1569
  tooltipInfo && (React.createElement("span", null,
1566
1570
  React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
1567
- };
1568
-
1571
+ };
1572
+
1569
1573
  const getAgesFromDob = (dob) => {
1570
1574
  let calculated_current_age = null;
1571
1575
  let calculated_nearest_age = null;
@@ -1638,145 +1642,145 @@ const formatAsSsn = (number) => {
1638
1642
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1639
1643
  }
1640
1644
  return formatted_value;
1641
- };
1642
-
1643
- const StyledInput = styled.input `
1644
- border: none !important;
1645
- background: none !important;
1646
- font-size: ${FontSizes.DEFAULT};
1647
- font-weight: 400;
1648
- font-family: ${FontStyles.DEFAULT};
1649
- line-height: 1.28em;
1650
- color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
1651
- position: relative;
1652
- height: ${props => props.$height || 'auto'};
1653
- padding: 10px;
1654
- opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1655
- box-shadow: none;
1656
- outline: none;
1657
- margin: 0px;
1658
- text-indent: 0px;
1659
- --webkit-appearance: none;
1660
- box-sizing: border-box;
1661
- display: block;
1662
- width: 100%;
1663
- `;
1664
- const StyledTextArea = styled.textarea `
1665
- border: none !important;
1666
- background: none !important;
1667
- overflow-y: scroll !important;
1668
- font-size: 14px;
1669
- font-weight: 400;
1670
- height: ${props => props.$height || 'auto'};
1671
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1672
- line-height: 1.28em;
1673
- color: ${({ $invalid }) => ($invalid ? '#ff0000' : '#000000')};
1674
- position: relative;
1675
- padding: 10px;
1676
- opacity: 1;
1677
- box-shadow: none;
1678
- outline: none;
1679
- margin: 0px;
1680
- text-indent: 0px;
1681
- --webkit-appearance: none;
1682
- overflow-wrap: break-word;
1683
- box-sizing: border-box;
1684
- display: block;
1685
- width: 100%;
1645
+ };
1646
+
1647
+ const StyledInput = styled.input `
1648
+ border: none !important;
1649
+ background: none !important;
1650
+ font-size: ${FontSizes.DEFAULT};
1651
+ font-weight: 400;
1652
+ font-family: ${FontStyles.DEFAULT};
1653
+ line-height: 1.28em;
1654
+ color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
1655
+ position: relative;
1656
+ height: ${props => props.$height || 'auto'};
1657
+ padding: 10px;
1658
+ opacity: ${props => (props.$readOnly ? 0.6 : 1)};
1659
+ box-shadow: none;
1660
+ outline: none;
1661
+ margin: 0px;
1662
+ text-indent: 0px;
1663
+ --webkit-appearance: none;
1664
+ box-sizing: border-box;
1665
+ display: block;
1666
+ width: 100%;
1667
+ `;
1668
+ const StyledTextArea = styled.textarea `
1669
+ border: none !important;
1670
+ background: none !important;
1671
+ overflow-y: scroll !important;
1672
+ font-size: 14px;
1673
+ font-weight: 400;
1674
+ height: ${props => props.$height || 'auto'};
1675
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1676
+ line-height: 1.28em;
1677
+ color: ${({ $invalid }) => ($invalid ? '#ff0000' : '#000000')};
1678
+ position: relative;
1679
+ padding: 10px;
1680
+ opacity: 1;
1681
+ box-shadow: none;
1682
+ outline: none;
1683
+ margin: 0px;
1684
+ text-indent: 0px;
1685
+ --webkit-appearance: none;
1686
+ overflow-wrap: break-word;
1687
+ box-sizing: border-box;
1688
+ display: block;
1689
+ width: 100%;
1686
1690
  ${({ $readOnly }) => $readOnly &&
1687
- `
1688
- background-color: #f0f0f0;
1689
- color: #999999;
1690
- overflow-y: scroll;
1691
- `}
1692
- `;
1693
- const StyledSuffix = styled.div `
1694
- box-sizing: border-box;
1695
- border-radius: 0px 4px 4px 0px;
1696
- display: flex;
1697
- justify-content: center;
1698
- align-items: center;
1699
- padding: 10px;
1700
- height: auto;
1701
- background: #f5f5f5;
1702
- border-width: 0px 0px 0px 1px;
1703
- border-style: solid;
1704
- border-color: #cccccc;
1705
- font-family: ${FontStyles.DEFAULT};
1706
- font-style: normal;
1707
- font-weight: 400;
1708
- font-size: ${FontSizes.DEFAULT};
1709
- color: ${Colors.BLACK.Hex};
1710
- `;
1711
- const StyledWrapper = styled.div `
1712
- display: flex;
1713
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1714
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1715
- position: relative;
1716
- border-width: 1px;
1717
- border-style: solid;
1718
- border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1719
- border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1720
-
1721
- &:focus-within {
1722
- border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1723
- }
1691
+ `
1692
+ background-color: #f0f0f0;
1693
+ color: #999999;
1694
+ overflow-y: scroll;
1695
+ `}
1696
+ `;
1697
+ const StyledSuffix = styled.div `
1698
+ box-sizing: border-box;
1699
+ border-radius: 0px 4px 4px 0px;
1700
+ display: flex;
1701
+ justify-content: center;
1702
+ align-items: center;
1703
+ padding: 10px;
1704
+ height: auto;
1705
+ background: #f5f5f5;
1706
+ border-width: 0px 0px 0px 1px;
1707
+ border-style: solid;
1708
+ border-color: #cccccc;
1709
+ font-family: ${FontStyles.DEFAULT};
1710
+ font-style: normal;
1711
+ font-weight: 400;
1712
+ font-size: ${FontSizes.DEFAULT};
1713
+ color: ${Colors.BLACK.Hex};
1714
+ `;
1715
+ const StyledWrapper = styled.div `
1716
+ display: flex;
1717
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
1718
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
1719
+ position: relative;
1720
+ border-width: 1px;
1721
+ border-style: solid;
1722
+ border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
1723
+ border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
1724
+
1725
+ &:focus-within {
1726
+ border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
1727
+ }
1724
1728
  `;
1725
1729
  StyledWrapper.defaultProps = { theme: EditableTheme };
1726
- const SuggestedValues = styled.div `
1727
- background: #fff;
1728
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1729
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1730
- border-radius: 0px 0px 4px 4px;
1731
- border-style: solid;
1732
- border-top: none;
1733
- border-width: 1px;
1734
- left: -1px;
1735
- position: absolute;
1736
- right: -1px;
1737
- top: 39px;
1738
- z-index: 9999;
1739
- max-height: 220px;
1740
- overflow: auto;
1730
+ const SuggestedValues = styled.div `
1731
+ background: #fff;
1732
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
1733
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
1734
+ border-radius: 0px 0px 4px 4px;
1735
+ border-style: solid;
1736
+ border-top: none;
1737
+ border-width: 1px;
1738
+ left: -1px;
1739
+ position: absolute;
1740
+ right: -1px;
1741
+ top: 39px;
1742
+ z-index: 9999;
1743
+ max-height: 220px;
1744
+ overflow: auto;
1741
1745
  `;
1742
1746
  SuggestedValues.defaultProps = { theme: EditableTheme };
1743
- const SuggestedSummary = styled.div `
1744
- color: ${Colors.MEDIUM_GRAY.Hex};
1745
- font-size: 12px;
1746
- font-family: ${FontStyles.DEFAULT};
1747
- font-weight: 500;
1748
- line-height: 18px;
1749
- padding: 10px 12px;
1750
- border-bottom: 1px solid #e5e5e5;
1751
- background: #fff;
1752
- z-index: 1;
1753
- position: sticky;
1754
- top: 0px;
1755
- `;
1756
- const SuggestedValue = styled.div `
1757
- cursor: pointer;
1758
- padding: 8px 12px;
1759
- font-size: ${FontSizes.DEFAULT};
1760
- font-family: ${FontStyles.DEFAULT};
1761
- font-weight: 400;
1762
- line-height: 1.6em;
1763
- color: ${Colors.BLACK.Hex};
1764
-
1765
- &:hover {
1766
- background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1767
- }
1747
+ const SuggestedSummary = styled.div `
1748
+ color: ${Colors.MEDIUM_GRAY.Hex};
1749
+ font-size: 12px;
1750
+ font-family: ${FontStyles.DEFAULT};
1751
+ font-weight: 500;
1752
+ line-height: 18px;
1753
+ padding: 10px 12px;
1754
+ border-bottom: 1px solid #e5e5e5;
1755
+ background: #fff;
1756
+ z-index: 1;
1757
+ position: sticky;
1758
+ top: 0px;
1759
+ `;
1760
+ const SuggestedValue = styled.div `
1761
+ cursor: pointer;
1762
+ padding: 8px 12px;
1763
+ font-size: ${FontSizes.DEFAULT};
1764
+ font-family: ${FontStyles.DEFAULT};
1765
+ font-weight: 400;
1766
+ line-height: 1.6em;
1767
+ color: ${Colors.BLACK.Hex};
1768
+
1769
+ &:hover {
1770
+ background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
1771
+ }
1768
1772
  `;
1769
1773
  SuggestedValue.defaultProps = { theme: EditableTheme };
1770
- const CharacterCount = styled.div `
1771
- font-family: ${FontStyles.DEFAULT};
1772
- font-size: ${FontSizes.SMALL};
1773
- color: ${Colors.MEDIUM_GRAY.Hex};
1774
- padding: 10px;
1774
+ const CharacterCount = styled.div `
1775
+ font-family: ${FontStyles.DEFAULT};
1776
+ font-size: ${FontSizes.SMALL};
1777
+ color: ${Colors.MEDIUM_GRAY.Hex};
1778
+ padding: 10px;
1775
1779
  `;
1776
- const Loader$1 = styled.div `
1777
- padding: 0px 10px;
1778
- display: flex;
1779
- align-items: center;
1780
+ const Loader$1 = styled.div `
1781
+ padding: 0px 10px;
1782
+ display: flex;
1783
+ align-items: center;
1780
1784
  `;
1781
1785
  const Input$1 = (_a) => {
1782
1786
  var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown,
@@ -1785,6 +1789,17 @@ const Input$1 = (_a) => {
1785
1789
  const [show_options, setShowOptions] = React.useState(false);
1786
1790
  const [internalValue, setInternalValue] = React.useState(value);
1787
1791
  const [internalSuggestedValues, setInternalSuggestedValues] = React.useState(suggestedValues || []);
1792
+ React.useEffect(() => {
1793
+ setInternalValue(value);
1794
+ setInternalSuggestedValues(suggestedValues || []);
1795
+ if (value === null || value === void 0 ? void 0 : value.length) {
1796
+ const newSuggestions = (suggestedValues || []).filter(s => s.toLowerCase().includes(value.toLowerCase()));
1797
+ setInternalSuggestedValues(newSuggestions);
1798
+ }
1799
+ else {
1800
+ setInternalSuggestedValues(suggestedValues || []);
1801
+ }
1802
+ }, [value, suggestedValues]);
1788
1803
  const formatCurrencyDecimal = (value) => {
1789
1804
  const parts = value.toString().split('.');
1790
1805
  const integerPart = parts[0];
@@ -1864,7 +1879,7 @@ const Input$1 = (_a) => {
1864
1879
  onBlur(e);
1865
1880
  setTimeout(() => {
1866
1881
  setShowOptions(false);
1867
- }, 100);
1882
+ }, 200);
1868
1883
  }, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
1869
1884
  ? e => e.preventDefault()
1870
1885
  : e => {
@@ -1889,110 +1904,110 @@ const Input$1 = (_a) => {
1889
1904
  onSuggestedSelect();
1890
1905
  setShowOptions(false);
1891
1906
  } }, suggestedValue))))) : null));
1892
- };
1893
-
1894
- const Wrapper$7 = styled.a `
1895
- color: ${props => props.theme.PRIMARY_COLOR.Hex};
1896
- font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1897
- line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1898
- letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1899
- font-weight: 500;
1900
- font-style: normal;
1901
- text-decoration: 'none';
1902
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1903
- margin: 0px;
1904
- padding: 0px;
1905
- box-sizing: border-box;
1906
- cursor: pointer;
1907
+ };
1908
+
1909
+ const Wrapper$7 = styled.a `
1910
+ color: ${props => props.theme.PRIMARY_COLOR.Hex};
1911
+ font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
1912
+ line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
1913
+ letter-spacing: ${props => (props.$small ? '1px' : '0px')};
1914
+ font-weight: 500;
1915
+ font-style: normal;
1916
+ text-decoration: 'none';
1917
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1918
+ margin: 0px;
1919
+ padding: 0px;
1920
+ box-sizing: border-box;
1921
+ cursor: pointer;
1907
1922
  `;
1908
1923
  Wrapper$7.defaultProps = { theme: EditableTheme };
1909
1924
  const Link = (_a) => {
1910
1925
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1911
1926
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1912
- };
1913
-
1914
- const dash = styled.keyframes `
1915
- 0% {
1916
- stroke-dasharray: 1, 160;
1917
- stroke-dashoffset: 0;
1918
- }
1919
- 50% {
1920
- stroke-dasharray: 80, 160;
1921
- stroke-dashoffset: -32;
1922
- }
1923
- 100% {
1924
- stroke-dasharray: 80, 160;
1925
- stroke-dashoffset: -124;
1926
- }
1927
- `;
1928
- const Spinner = styled.svg `
1929
- z-index: 2;
1930
- position: absolute;
1931
- top: 50%;
1932
- left: 50%;
1933
- transform: translate(-50%, -50%);
1934
- margin: 0 auto;
1935
- width: 40px;
1936
- height: 40px;
1937
- `;
1938
- const Path = styled.path `
1939
- stroke: #0193d7;
1940
- stroke-linecap: round;
1941
- -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1942
- animation: ${dash} 1.1s ease-in-out infinite;
1927
+ };
1928
+
1929
+ const dash = styled.keyframes `
1930
+ 0% {
1931
+ stroke-dasharray: 1, 160;
1932
+ stroke-dashoffset: 0;
1933
+ }
1934
+ 50% {
1935
+ stroke-dasharray: 80, 160;
1936
+ stroke-dashoffset: -32;
1937
+ }
1938
+ 100% {
1939
+ stroke-dasharray: 80, 160;
1940
+ stroke-dashoffset: -124;
1941
+ }
1942
+ `;
1943
+ const Spinner = styled.svg `
1944
+ z-index: 2;
1945
+ position: absolute;
1946
+ top: 50%;
1947
+ left: 50%;
1948
+ transform: translate(-50%, -50%);
1949
+ margin: 0 auto;
1950
+ width: 40px;
1951
+ height: 40px;
1952
+ `;
1953
+ const Path = styled.path `
1954
+ stroke: #0193d7;
1955
+ stroke-linecap: round;
1956
+ -webkit-animation: ${dash} 1.1s ease-in-out infinite;
1957
+ animation: ${dash} 1.1s ease-in-out infinite;
1943
1958
  `;
1944
1959
  const Loader = () => {
1945
1960
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1946
1961
  React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', strokeWidth: '2' })));
1947
- };
1948
-
1949
- const Steps = styled.div `
1950
- padding: 20px;
1951
- border-bottom: 1px solid #e7e6e6;
1952
- background: #f5f5f5;
1953
- display: flex;
1954
- gap: 30px;
1955
- align-items: center;
1956
- `;
1957
- const Step = styled.div `
1958
- display: flex;
1959
- align-items: center;
1960
- gap: 8px;
1961
- `;
1962
- const StyledIcon$2 = styled(Icon) `
1963
- > path {
1964
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1965
- }
1962
+ };
1963
+
1964
+ const Steps = styled.div `
1965
+ padding: 20px;
1966
+ border-bottom: 1px solid #e7e6e6;
1967
+ background: #f5f5f5;
1968
+ display: flex;
1969
+ gap: 30px;
1970
+ align-items: center;
1971
+ `;
1972
+ const Step = styled.div `
1973
+ display: flex;
1974
+ align-items: center;
1975
+ gap: 8px;
1976
+ `;
1977
+ const StyledIcon$2 = styled(Icon) `
1978
+ > path {
1979
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
1980
+ }
1966
1981
  `;
1967
1982
  StyledIcon$2.defaultProps = { theme: EditableTheme };
1968
- const StepIndicator = styled.div `
1969
- width: 30px;
1970
- height: 30px;
1971
- border-radius: 15px;
1972
- background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1973
- color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1974
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1975
- font-size: 14px;
1976
- font-weight: 500;
1977
- line-height: 1;
1978
- display: flex;
1979
- align-items: center;
1980
- justify-content: center;
1981
- flex-shrink: 0;
1983
+ const StepIndicator = styled.div `
1984
+ width: 30px;
1985
+ height: 30px;
1986
+ border-radius: 15px;
1987
+ background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
1988
+ color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
1989
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
1990
+ font-size: 14px;
1991
+ font-weight: 500;
1992
+ line-height: 1;
1993
+ display: flex;
1994
+ align-items: center;
1995
+ justify-content: center;
1996
+ flex-shrink: 0;
1982
1997
  `;
1983
1998
  StepIndicator.defaultProps = { theme: EditableTheme };
1984
- const StepLabel = styled.div `
1985
- color: #000;
1986
- font-family: 'Roboto', Helvetica, Arial, sans-serif;
1987
- font-size: 14px;
1988
- font-weight: 500;
1989
- line-height: 1;
1990
- `;
1991
- const StepLine = styled.div `
1992
- height: 2px;
1993
- flex-grow: 1;
1994
- background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
1995
- transition: background-color 0.5s ease-in-out;
1999
+ const StepLabel = styled.div `
2000
+ color: #000;
2001
+ font-family: 'Roboto', Helvetica, Arial, sans-serif;
2002
+ font-size: 14px;
2003
+ font-weight: 500;
2004
+ line-height: 1;
2005
+ `;
2006
+ const StepLine = styled.div `
2007
+ height: 2px;
2008
+ flex-grow: 1;
2009
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
2010
+ transition: background-color 0.5s ease-in-out;
1996
2011
  `;
1997
2012
  const ProgressBar = ({ steps, showStepLine = false }) => {
1998
2013
  return (React.createElement(Steps, null, steps.map((step, i) => {
@@ -2002,78 +2017,78 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
2002
2017
  step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
2003
2018
  React.createElement(StepLabel, null, step.label))));
2004
2019
  })));
2005
- };
2006
-
2007
- const Wrapper$6 = styled.div `
2008
- position: fixed;
2009
- top: 0;
2010
- right: 0;
2011
- bottom: 0;
2012
- left: 0;
2013
- z-index: 9999;
2014
- background: rgba(0, 0, 0, 0.8);
2015
- display: flex;
2016
- align-items: center;
2017
- justify-content: center;
2018
- `;
2019
- const Container$1 = styled.dialog `
2020
- width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2021
- max-width: calc(100vw - 80px);
2022
- height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2023
- max-height: calc(100vh - 80px);
2024
- border-radius: 8px;
2025
- overflow: hidden;
2026
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2027
- outline: none;
2028
- border: none;
2029
- position: relative;
2030
- padding: 0px;
2031
- box-sizing: border-box;
2032
- display: flex;
2033
- flex-direction: column;
2034
- `;
2035
- const Header$1 = styled.div `
2036
- flex-shrink: 0;
2037
- padding: 20px;
2038
- border-bottom: 1px solid #e7e6e6;
2039
- display: flex;
2040
- align-items: center;
2041
- background: #ffffff;
2042
- box-sizing: border-box;
2043
- `;
2044
- const Close = styled.div `
2045
- margin-left: auto;
2046
- display: flex;
2047
- align-items: center;
2048
- padding-left: 20px;
2049
- cursor: pointer;
2050
- `;
2051
- const CloseMsg = styled.span `
2052
- font-size: ${FontSizes.SMALL};
2053
- font-weight: 400;
2054
- font-family: ${FontStyles.DEFAULT};
2055
- line-height: 1em;
2056
- color: ${Colors.MEDIUM_GRAY.Hex};
2057
- `;
2058
- const ContentWrapper = styled.div `
2059
- overflow-x: hidden;
2060
- overflow-y: auto;
2061
- background: #ffffff;
2062
- flex: 1;
2063
- box-sizing: border-box;
2064
- `;
2065
- const ButtonBar = styled.div `
2066
- flex-shrink: 0;
2067
- background: #ffffff;
2068
- padding: 20px;
2069
- border-top: 1px solid #e7e6e6;
2070
- display: flex;
2071
- align-items: center;
2072
- justify-self: flex-end;
2073
- box-sizing: border-box;
2074
- `;
2075
- const ButtonContainer = styled.div `
2076
- margin: 0 10px;
2020
+ };
2021
+
2022
+ const Wrapper$6 = styled.div `
2023
+ position: fixed;
2024
+ top: 0;
2025
+ right: 0;
2026
+ bottom: 0;
2027
+ left: 0;
2028
+ z-index: 9999;
2029
+ background: rgba(0, 0, 0, 0.8);
2030
+ display: flex;
2031
+ align-items: center;
2032
+ justify-content: center;
2033
+ `;
2034
+ const Container$1 = styled.dialog `
2035
+ width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
2036
+ max-width: calc(100vw - 80px);
2037
+ height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
2038
+ max-height: calc(100vh - 80px);
2039
+ border-radius: 8px;
2040
+ overflow: hidden;
2041
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2042
+ outline: none;
2043
+ border: none;
2044
+ position: relative;
2045
+ padding: 0px;
2046
+ box-sizing: border-box;
2047
+ display: flex;
2048
+ flex-direction: column;
2049
+ `;
2050
+ const Header$1 = styled.div `
2051
+ flex-shrink: 0;
2052
+ padding: 20px;
2053
+ border-bottom: 1px solid #e7e6e6;
2054
+ display: flex;
2055
+ align-items: center;
2056
+ background: #ffffff;
2057
+ box-sizing: border-box;
2058
+ `;
2059
+ const Close = styled.div `
2060
+ margin-left: auto;
2061
+ display: flex;
2062
+ align-items: center;
2063
+ padding-left: 20px;
2064
+ cursor: pointer;
2065
+ `;
2066
+ const CloseMsg = styled.span `
2067
+ font-size: ${FontSizes.SMALL};
2068
+ font-weight: 400;
2069
+ font-family: ${FontStyles.DEFAULT};
2070
+ line-height: 1em;
2071
+ color: ${Colors.MEDIUM_GRAY.Hex};
2072
+ `;
2073
+ const ContentWrapper = styled.div `
2074
+ overflow-x: hidden;
2075
+ overflow-y: auto;
2076
+ background: #ffffff;
2077
+ flex: 1;
2078
+ box-sizing: border-box;
2079
+ `;
2080
+ const ButtonBar = styled.div `
2081
+ flex-shrink: 0;
2082
+ background: #ffffff;
2083
+ padding: 20px;
2084
+ border-top: 1px solid #e7e6e6;
2085
+ display: flex;
2086
+ align-items: center;
2087
+ justify-self: flex-end;
2088
+ box-sizing: border-box;
2089
+ `;
2090
+ const ButtonContainer = styled.div `
2091
+ margin: 0 10px;
2077
2092
  `;
2078
2093
  const Modal = (_a) => {
2079
2094
  var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton"]);
@@ -2115,21 +2130,21 @@ const Modal = (_a) => {
2115
2130
  secondaryButton ? (React.createElement(ButtonContainer, null,
2116
2131
  React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' })))) : null,
2117
2132
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
2118
- };
2119
-
2120
- const Wrapper$5 = styled.div `
2121
- position: relative;
2122
- width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2123
- `;
2124
- const Trigger = styled.div `
2125
- box-sizing: border-box;
2126
- border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2127
- height: 40px;
2128
- padding: 0 10px;
2129
- position: relative;
2130
- cursor: pointer;
2131
- border-width: 1px;
2132
- border-style: solid;
2133
+ };
2134
+
2135
+ const Wrapper$5 = styled.div `
2136
+ position: relative;
2137
+ width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
2138
+ `;
2139
+ const Trigger = styled.div `
2140
+ box-sizing: border-box;
2141
+ border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
2142
+ height: 40px;
2143
+ padding: 0 10px;
2144
+ position: relative;
2145
+ cursor: pointer;
2146
+ border-width: 1px;
2147
+ border-style: solid;
2133
2148
  border-color: ${props => {
2134
2149
  if (props.$invalid) {
2135
2150
  return Colors.RED.Hex;
@@ -2140,67 +2155,67 @@ const Trigger = styled.div `
2140
2155
  else {
2141
2156
  return '#cccccc';
2142
2157
  }
2143
- }};
2144
- background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2145
- background-image: none;
2146
- display: flex;
2147
- width: 100%;
2148
- align-items: center;
2149
- justify-content: space-between;
2150
- z-index: 1;
2158
+ }};
2159
+ background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
2160
+ background-image: none;
2161
+ display: flex;
2162
+ width: 100%;
2163
+ align-items: center;
2164
+ justify-content: space-between;
2165
+ z-index: 1;
2151
2166
  `;
2152
2167
  Trigger.defaultProps = { theme: EditableTheme };
2153
- const Value = styled.div `
2154
- color: ${Colors.BLACK.Hex};
2155
- font-family: ${FontStyles.DEFAULT};
2156
- font-size: ${FontSizes.DEFAULT};
2157
- font-weight: 400;
2158
- line-height: 2.9em;
2159
- overflow: hidden;
2160
- text-overflow: ellipsis;
2161
- white-space: nowrap;
2162
- width: 100%;
2163
- `;
2164
- const Options = styled.div `
2165
- background: #fff;
2166
- box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2167
- border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2168
- border-radius: 0px 0px 4px 4px;
2169
- border-style: solid;
2170
- border-top: none;
2171
- border-width: 1px;
2172
- left: 0;
2173
- position: relative;
2174
- right: 0;
2175
- z-index: 10;
2176
- max-height: 220px;
2177
- overflow: auto;
2168
+ const Value = styled.div `
2169
+ color: ${Colors.BLACK.Hex};
2170
+ font-family: ${FontStyles.DEFAULT};
2171
+ font-size: ${FontSizes.DEFAULT};
2172
+ font-weight: 400;
2173
+ line-height: 2.9em;
2174
+ overflow: hidden;
2175
+ text-overflow: ellipsis;
2176
+ white-space: nowrap;
2177
+ width: 100%;
2178
+ `;
2179
+ const Options = styled.div `
2180
+ background: #fff;
2181
+ box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
2182
+ border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
2183
+ border-radius: 0px 0px 4px 4px;
2184
+ border-style: solid;
2185
+ border-top: none;
2186
+ border-width: 1px;
2187
+ left: 0;
2188
+ position: relative;
2189
+ right: 0;
2190
+ z-index: 10;
2191
+ max-height: 220px;
2192
+ overflow: auto;
2178
2193
  `;
2179
2194
  Options.defaultProps = { theme: EditableTheme };
2180
- const Scrim = styled.div `
2181
- bottom: 0;
2182
- left: 0;
2183
- position: fixed;
2184
- right: 0;
2185
- top: 0;
2186
- z-index: 9;
2187
- `;
2188
- const SearchInput = styled.input `
2189
- position: absolute;
2190
- left: 2px;
2191
- top: 2px;
2192
- z-index: 999;
2193
- width: 90%;
2194
- height: 30px;
2195
- border: none;
2196
- outline: none;
2197
- color: ${Colors.BLACK.Hex};
2198
- font-family: ${FontStyles.DEFAULT};
2199
- font-size: ${FontSizes.DEFAULT};
2200
- font-weight: 400;
2201
- line-height: 2.9em;
2202
- overflow: hidden;
2203
- white-space: nowrap;
2195
+ const Scrim = styled.div `
2196
+ bottom: 0;
2197
+ left: 0;
2198
+ position: fixed;
2199
+ right: 0;
2200
+ top: 0;
2201
+ z-index: 9;
2202
+ `;
2203
+ const SearchInput = styled.input `
2204
+ position: absolute;
2205
+ left: 2px;
2206
+ top: 2px;
2207
+ z-index: 999;
2208
+ width: 90%;
2209
+ height: 30px;
2210
+ border: none;
2211
+ outline: none;
2212
+ color: ${Colors.BLACK.Hex};
2213
+ font-family: ${FontStyles.DEFAULT};
2214
+ font-size: ${FontSizes.DEFAULT};
2215
+ font-weight: 400;
2216
+ line-height: 2.9em;
2217
+ overflow: hidden;
2218
+ white-space: nowrap;
2204
2219
  `;
2205
2220
  const MultiSelect = (_a) => {
2206
2221
  var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style"]);
@@ -2219,37 +2234,37 @@ const MultiSelect = (_a) => {
2219
2234
  showOptions ? (React.createElement(Options, null,
2220
2235
  React.createElement(Checklist, { onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
2221
2236
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
2222
- };
2223
-
2224
- const Wrapper$4 = styled.div `
2225
- display: flex;
2226
- padding: 16px 30px;
2227
- align-items: center;
2228
- gap: 20px;
2229
- align-self: stretch;
2230
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2231
- `;
2232
- const Title = styled.div `
2233
- display: flex;
2234
- align-items: center;
2235
- gap: 20px;
2236
- `;
2237
- const Info = styled.div `
2238
- display: flex;
2239
- flex-direction: column;
2240
- align-items: flex-start;
2241
- gap: 4px;
2242
- flex: 1 0 0;
2243
- `;
2244
- const Breadcrumbs = styled.div `
2245
- display: flex;
2246
- align-items: center;
2247
- gap: 4px;
2248
- `;
2249
- const Actions = styled.div `
2250
- display: flex;
2251
- align-items: center;
2252
- gap: 8px;
2237
+ };
2238
+
2239
+ const Wrapper$4 = styled.div `
2240
+ display: flex;
2241
+ padding: 16px 30px;
2242
+ align-items: center;
2243
+ gap: 20px;
2244
+ align-self: stretch;
2245
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
2246
+ `;
2247
+ const Title = styled.div `
2248
+ display: flex;
2249
+ align-items: center;
2250
+ gap: 20px;
2251
+ `;
2252
+ const Info = styled.div `
2253
+ display: flex;
2254
+ flex-direction: column;
2255
+ align-items: flex-start;
2256
+ gap: 4px;
2257
+ flex: 1 0 0;
2258
+ `;
2259
+ const Breadcrumbs = styled.div `
2260
+ display: flex;
2261
+ align-items: center;
2262
+ gap: 4px;
2263
+ `;
2264
+ const Actions = styled.div `
2265
+ display: flex;
2266
+ align-items: center;
2267
+ gap: 8px;
2253
2268
  `;
2254
2269
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2255
2270
  const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, } = buttonMenu || {};
@@ -2269,13 +2284,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2269
2284
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2270
2285
  }),
2271
2286
  menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
2272
- };
2273
-
2274
- const Wrapper$3 = styled.nav `
2275
- box-sizing: border-box;
2276
- display: flex;
2277
- align-items: center;
2278
- column-gap: 10px;
2287
+ };
2288
+
2289
+ const Wrapper$3 = styled.nav `
2290
+ box-sizing: border-box;
2291
+ display: flex;
2292
+ align-items: center;
2293
+ column-gap: 10px;
2279
2294
  `;
2280
2295
  const Pagination = (_a) => {
2281
2296
  var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2304,82 +2319,82 @@ const Pagination = (_a) => {
2304
2319
  value: `${p}`,
2305
2320
  })), value: `${currentPage}` }),
2306
2321
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
2307
- };
2308
-
2309
- const Wrapper$2 = styled.label `
2310
- border-radius: 4px;
2311
- padding: 4px 0px 4px 6px;
2312
- margin-left: -6px;
2313
- cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2314
- display: flex;
2315
- align-items: center;
2316
- font-size: ${FontSizes.DEFAULT};
2317
- line-height: 1.6em;
2318
- box-sizing: border-box;
2319
- position: relative;
2320
-
2321
- &:focus-within {
2322
- background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2323
- }
2322
+ };
2323
+
2324
+ const Wrapper$2 = styled.label `
2325
+ border-radius: 4px;
2326
+ padding: 4px 0px 4px 6px;
2327
+ margin-left: -6px;
2328
+ cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
2329
+ display: flex;
2330
+ align-items: center;
2331
+ font-size: ${FontSizes.DEFAULT};
2332
+ line-height: 1.6em;
2333
+ box-sizing: border-box;
2334
+ position: relative;
2335
+
2336
+ &:focus-within {
2337
+ background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
2338
+ }
2324
2339
  `;
2325
2340
  Wrapper$2.defaultProps = { theme: EditableTheme };
2326
- const Input = styled.input `
2327
- font-size: 20px;
2328
- margin: 0px;
2329
- line-height: 1.6em;
2330
- box-sizing: border-box;
2331
- position: absolute;
2332
- opacity: 0;
2333
- cursor: pointer;
2334
- height: 0;
2335
- width: 0;
2336
- &:checked + span {
2337
- border-color: ${Colors.PRIMARY.Hex};
2338
- }
2339
- &:checked + span:after {
2340
- background-color: ${Colors.PRIMARY.Hex};
2341
- display: block;
2342
- }
2343
- &:disabled + span {
2344
- background-color: #d3d3d3;
2345
- border-color: #d3d3d3;
2346
- }
2347
- &:disabled + span:after {
2348
- background-color: #fff;
2349
- }
2350
- &:checked:disabled + span:after {
2351
- background-color: ${Colors.MEDIUM_GRAY.Hex};
2352
- }
2353
- `;
2354
- const Check = styled.span `
2355
- height: 17px;
2356
- width: 17px;
2357
- border-radius: 50%;
2358
- background-color: #fff;
2359
- border-width: 2px;
2360
- border-style: solid;
2361
- border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2362
- box-sizing: border-box;
2363
- position: relative;
2364
- &:after {
2365
- content: '';
2366
- position: absolute;
2367
- top: 2px;
2368
- left: 2px;
2369
- width: 9px;
2370
- height: 9px;
2371
- border-radius: 50%;
2372
- box-sizing: border-box;
2373
- display: none;
2374
- }
2375
- `;
2376
- const Label = styled.span `
2377
- font-family: ${FontStyles.DEFAULT};
2378
- font-size: ${FontSizes.DEFAULT};
2379
- font-weight: 400;
2380
- color: ${Colors.BLACK.Hex};
2381
- line-height: 1.6em;
2382
- margin-left: 6px;
2341
+ const Input = styled.input `
2342
+ font-size: 20px;
2343
+ margin: 0px;
2344
+ line-height: 1.6em;
2345
+ box-sizing: border-box;
2346
+ position: absolute;
2347
+ opacity: 0;
2348
+ cursor: pointer;
2349
+ height: 0;
2350
+ width: 0;
2351
+ &:checked + span {
2352
+ border-color: ${Colors.PRIMARY.Hex};
2353
+ }
2354
+ &:checked + span:after {
2355
+ background-color: ${Colors.PRIMARY.Hex};
2356
+ display: block;
2357
+ }
2358
+ &:disabled + span {
2359
+ background-color: #d3d3d3;
2360
+ border-color: #d3d3d3;
2361
+ }
2362
+ &:disabled + span:after {
2363
+ background-color: #fff;
2364
+ }
2365
+ &:checked:disabled + span:after {
2366
+ background-color: ${Colors.MEDIUM_GRAY.Hex};
2367
+ }
2368
+ `;
2369
+ const Check = styled.span `
2370
+ height: 17px;
2371
+ width: 17px;
2372
+ border-radius: 50%;
2373
+ background-color: #fff;
2374
+ border-width: 2px;
2375
+ border-style: solid;
2376
+ border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2377
+ box-sizing: border-box;
2378
+ position: relative;
2379
+ &:after {
2380
+ content: '';
2381
+ position: absolute;
2382
+ top: 2px;
2383
+ left: 2px;
2384
+ width: 9px;
2385
+ height: 9px;
2386
+ border-radius: 50%;
2387
+ box-sizing: border-box;
2388
+ display: none;
2389
+ }
2390
+ `;
2391
+ const Label = styled.span `
2392
+ font-family: ${FontStyles.DEFAULT};
2393
+ font-size: ${FontSizes.DEFAULT};
2394
+ font-weight: 400;
2395
+ color: ${Colors.BLACK.Hex};
2396
+ line-height: 1.6em;
2397
+ margin-left: 6px;
2383
2398
  `;
2384
2399
  const Radio = (_a) => {
2385
2400
  var { children, disabled, checked, onChange, value, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip"]);
@@ -2389,77 +2404,77 @@ const Radio = (_a) => {
2389
2404
  React.createElement(Label, null,
2390
2405
  children,
2391
2406
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2392
- };
2393
-
2407
+ };
2408
+
2394
2409
  const RadioList = (_a) => {
2395
2410
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2396
2411
  return (React.createElement(React.Fragment, null, options.map((option) => {
2397
2412
  const label = option.label || option.value;
2398
2413
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2399
2414
  })));
2400
- };
2401
-
2402
- const StyledTable = styled.table `
2403
- width: 100%;
2404
- margin-top: 1px;
2405
- table-layout: ${props => props.$tableLayout || 'auto'};
2406
- border-collapse: collapse;
2407
- text-indent: 0px;
2408
- border-spacing: 0px;
2409
- border-color: none;
2410
- box-sizing: border-box;
2411
- `;
2412
- const Header = styled.th `
2413
- padding: 12px !important;
2414
- text-align: left;
2415
- font-weight: 500;
2416
- border-bottom: 1px solid #e5e5e5;
2417
- border-top: 1px solid #e5e5e5;
2418
- text-transform: uppercase;
2419
- font-size: 12px;
2420
- font-family: ${FontStyles.DEFAULT};
2421
- letter-spacing: 1px;
2422
- white-space: nowrap;
2423
- line-height: 1;
2424
- position: relative;
2425
- box-sizing: border-box;
2426
- width: ${props => props.$width || 'auto'};
2427
- cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2428
- color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2415
+ };
2416
+
2417
+ const StyledTable = styled.table `
2418
+ width: 100%;
2419
+ margin-top: 1px;
2420
+ table-layout: ${props => props.$tableLayout || 'auto'};
2421
+ border-collapse: collapse;
2422
+ text-indent: 0px;
2423
+ border-spacing: 0px;
2424
+ border-color: none;
2425
+ box-sizing: border-box;
2426
+ `;
2427
+ const Header = styled.th `
2428
+ padding: 12px !important;
2429
+ text-align: left;
2430
+ font-weight: 500;
2431
+ border-bottom: 1px solid #e5e5e5;
2432
+ border-top: 1px solid #e5e5e5;
2433
+ text-transform: uppercase;
2434
+ font-size: 12px;
2435
+ font-family: ${FontStyles.DEFAULT};
2436
+ letter-spacing: 1px;
2437
+ white-space: nowrap;
2438
+ line-height: 1;
2439
+ position: relative;
2440
+ box-sizing: border-box;
2441
+ width: ${props => props.$width || 'auto'};
2442
+ cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
2443
+ color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
2429
2444
  `;
2430
2445
  Header.defaultProps = { theme: EditableTheme };
2431
- const Row = styled.tr `
2432
- cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2433
- transition: all 0.2s;
2434
- background-color: ${props => props.$bgColor};
2435
- box-sizing: border-box;
2436
- &:hover {
2437
- background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2438
- }
2446
+ const Row = styled.tr `
2447
+ cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
2448
+ transition: all 0.2s;
2449
+ background-color: ${props => props.$bgColor};
2450
+ box-sizing: border-box;
2451
+ &:hover {
2452
+ background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
2453
+ }
2439
2454
  `;
2440
2455
  Row.defaultProps = { theme: EditableTheme };
2441
- const Column = styled.td `
2442
- padding: 16px 12px !important;
2443
- font-size: ${FontSizes.DEFAULT} !important;
2444
- font-weight: 400 !important;
2445
- font-family: ${FontStyles.DEFAULT};
2446
- border: none !important;
2447
- word-break: break-word;
2448
- line-height: 1.4em;
2449
- box-sizing: border-box;
2450
- text-align: ${props => props.$align || 'left'};
2451
- width: ${props => props.$width || 'auto'};
2452
- `;
2453
- const IconWrapper = styled.span `
2454
- position: absolute;
2455
- top: 50%;
2456
- transform: translateY(-50%);
2457
- margin-left: 2px;
2458
- `;
2459
- const StyledIcon$1 = styled(Icon) `
2460
- > path {
2461
- fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2462
- }
2456
+ const Column = styled.td `
2457
+ padding: 16px 12px !important;
2458
+ font-size: ${FontSizes.DEFAULT} !important;
2459
+ font-weight: 400 !important;
2460
+ font-family: ${FontStyles.DEFAULT};
2461
+ border: none !important;
2462
+ word-break: break-word;
2463
+ line-height: 1.4em;
2464
+ box-sizing: border-box;
2465
+ text-align: ${props => props.$align || 'left'};
2466
+ width: ${props => props.$width || 'auto'};
2467
+ `;
2468
+ const IconWrapper = styled.span `
2469
+ position: absolute;
2470
+ top: 50%;
2471
+ transform: translateY(-50%);
2472
+ margin-left: 2px;
2473
+ `;
2474
+ const StyledIcon$1 = styled(Icon) `
2475
+ > path {
2476
+ fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
2477
+ }
2463
2478
  `;
2464
2479
  StyledIcon$1.defaultProps = { theme: EditableTheme };
2465
2480
  const Table = (_a) => {
@@ -2477,55 +2492,55 @@ const Table = (_a) => {
2477
2492
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2478
2493
  })));
2479
2494
  }))) : null));
2480
- };
2481
-
2482
- const Wrapper$1 = styled.div `
2483
- display: flex;
2484
- box-sizing: border-box;
2485
- align-items: flex-end;
2486
- border-top: 1px solid #e5e5e5;
2487
- border-bottom: 1px solid #e5e5e5;
2488
- flex-shrink: 0;
2489
- align-self: stretch;
2490
- padding: 0;
2491
- margin: 0;
2492
- `;
2493
- const Tab = styled.div `
2494
- display: flex;
2495
- align-items: center;
2496
- gap: 6px;
2497
- font-size: ${FontSizes.DEFAULT};
2498
- font-family: ${FontStyles.DEFAULT};
2499
- font-weight: ${props => (props.$isActive ? 500 : 400)};
2500
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2501
- line-height: 1em;
2502
- padding: 16px 30px 12px;
2503
- margin: 0 0 -1px 0;
2504
- border-bottom-width: 4px;
2505
- border-bottom-style: solid;
2506
- border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2507
- cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2508
- box-sizing: border-box;
2509
- &:hover {
2510
- color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2511
- font-weight: 500;
2512
- }
2495
+ };
2496
+
2497
+ const Wrapper$1 = styled.div `
2498
+ display: flex;
2499
+ box-sizing: border-box;
2500
+ align-items: flex-end;
2501
+ border-top: 1px solid #e5e5e5;
2502
+ border-bottom: 1px solid #e5e5e5;
2503
+ flex-shrink: 0;
2504
+ align-self: stretch;
2505
+ padding: 0;
2506
+ margin: 0;
2507
+ `;
2508
+ const Tab = styled.div `
2509
+ display: flex;
2510
+ align-items: center;
2511
+ gap: 6px;
2512
+ font-size: ${FontSizes.DEFAULT};
2513
+ font-family: ${FontStyles.DEFAULT};
2514
+ font-weight: ${props => (props.$isActive ? 500 : 400)};
2515
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
2516
+ line-height: 1em;
2517
+ padding: 16px 30px 12px;
2518
+ margin: 0 0 -1px 0;
2519
+ border-bottom-width: 4px;
2520
+ border-bottom-style: solid;
2521
+ border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
2522
+ cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
2523
+ box-sizing: border-box;
2524
+ &:hover {
2525
+ color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
2526
+ font-weight: 500;
2527
+ }
2513
2528
  `;
2514
2529
  Tab.defaultProps = { theme: EditableTheme };
2515
- const Badge = styled.div `
2516
- display: flex;
2517
- width: 18px;
2518
- height: 18px;
2519
- justify-content: center;
2520
- align-items: center;
2521
- border-radius: 9px;
2522
- background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2523
- color: #fff;
2524
- font-family: ${FontStyles.DEFAULT};
2525
- font-size: 12px;
2526
- font-weight: 500;
2527
- line-height: 1;
2528
- letter-spacing: 1px;
2530
+ const Badge = styled.div `
2531
+ display: flex;
2532
+ width: 18px;
2533
+ height: 18px;
2534
+ justify-content: center;
2535
+ align-items: center;
2536
+ border-radius: 9px;
2537
+ background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
2538
+ color: #fff;
2539
+ font-family: ${FontStyles.DEFAULT};
2540
+ font-size: 12px;
2541
+ font-weight: 500;
2542
+ line-height: 1;
2543
+ letter-spacing: 1px;
2529
2544
  `;
2530
2545
  Badge.defaultProps = { theme: EditableTheme };
2531
2546
  const Tabs = (_a) => {
@@ -2537,29 +2552,29 @@ const Tabs = (_a) => {
2537
2552
  label));
2538
2553
  })));
2539
2554
  };
2540
- Tabs.defaultProps = {};
2541
-
2542
- const Track = styled.div `
2543
- height: 24px;
2544
- border-radius: 12px;
2545
- background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2546
- display: flex;
2547
- align-items: center;
2548
- cursor: pointer;
2549
- width: 40px;
2550
- padding: 2px;
2551
- box-sizing: border-box;
2552
- `;
2553
- const Handle = styled.div `
2554
- width: 20px;
2555
- height: 20px;
2556
- border-radius: 10px;
2557
- background: #ffffff;
2558
- margin-left: ${props => (props.$on ? 'auto' : '0px')};
2559
- display: flex;
2560
- align-items: center;
2561
- justify-content: center;
2562
- box-sizing: border-box;
2555
+ Tabs.defaultProps = {};
2556
+
2557
+ const Track = styled.div `
2558
+ height: 24px;
2559
+ border-radius: 12px;
2560
+ background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
2561
+ display: flex;
2562
+ align-items: center;
2563
+ cursor: pointer;
2564
+ width: 40px;
2565
+ padding: 2px;
2566
+ box-sizing: border-box;
2567
+ `;
2568
+ const Handle = styled.div `
2569
+ width: 20px;
2570
+ height: 20px;
2571
+ border-radius: 10px;
2572
+ background: #ffffff;
2573
+ margin-left: ${props => (props.$on ? 'auto' : '0px')};
2574
+ display: flex;
2575
+ align-items: center;
2576
+ justify-content: center;
2577
+ box-sizing: border-box;
2563
2578
  `;
2564
2579
  const Toggle = (_a) => {
2565
2580
  var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2568,32 +2583,32 @@ const Toggle = (_a) => {
2568
2583
  React.createElement(Handle, { "$on": on },
2569
2584
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2570
2585
  };
2571
- Toggle.defaultProps = {};
2572
-
2573
- const Container = styled.div `
2574
- width: 100%;
2575
- padding: 40px auto;
2576
- gap: 20px;
2577
- display: flex;
2578
- flex-direction: column;
2579
- justify-items: center;
2580
- align-items: center;
2581
- `;
2582
- const Wrapper = styled.div `
2583
- gap: 10px;
2584
- display: flex;
2585
- flex-direction: column;
2586
- justify-items: center;
2587
- align-items: center;
2588
- `;
2589
- const StyledIcon = styled.div `
2590
- display: flex;
2591
- align-items: center;
2592
- justify-content: center;
2593
- width: 80px;
2594
- height: 80px;
2595
- border-radius: 40px;
2596
- background: #f5f5f5;
2586
+ Toggle.defaultProps = {};
2587
+
2588
+ const Container = styled.div `
2589
+ width: 100%;
2590
+ padding: 40px auto;
2591
+ gap: 20px;
2592
+ display: flex;
2593
+ flex-direction: column;
2594
+ justify-items: center;
2595
+ align-items: center;
2596
+ `;
2597
+ const Wrapper = styled.div `
2598
+ gap: 10px;
2599
+ display: flex;
2600
+ flex-direction: column;
2601
+ justify-items: center;
2602
+ align-items: center;
2603
+ `;
2604
+ const StyledIcon = styled.div `
2605
+ display: flex;
2606
+ align-items: center;
2607
+ justify-content: center;
2608
+ width: 80px;
2609
+ height: 80px;
2610
+ border-radius: 40px;
2611
+ background: #f5f5f5;
2597
2612
  `;
2598
2613
  const ZeroState = (_a) => {
2599
2614
  var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2604,53 +2619,53 @@ const ZeroState = (_a) => {
2604
2619
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2605
2620
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2606
2621
  action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, onClick: action.onClick }))));
2607
- };
2608
-
2609
- exports.Accordion = Accordion;
2610
- exports.ActionDialog = ActionDialog;
2611
- exports.Alert = Alert;
2612
- exports.AppHeader = AppHeader;
2613
- exports.AppMenu = AppMenu;
2614
- exports.BulkActionBar = BulkActionBar;
2615
- exports.Button = Button;
2616
- exports.ButtonMenu = ButtonMenu;
2617
- exports.Checkbox = Checkbox;
2618
- exports.Checklist = Checklist;
2619
- exports.Colors = Colors;
2620
- exports.Copy = Copy;
2621
- exports.DatePicker = DatePicker;
2622
- exports.Drawer = Drawer;
2623
- exports.EditableTheme = EditableTheme;
2624
- exports.Field = Field;
2625
- exports.FieldGroup = FieldGroup;
2626
- exports.FileUpload = FileUpload;
2627
- exports.FontSizes = FontSizes;
2628
- exports.FontStyles = FontStyles;
2629
- exports.Heading = Heading;
2630
- exports.Input = Input$1;
2631
- exports.Link = Link;
2632
- exports.Loader = Loader;
2633
- exports.Logo = Logo;
2634
- exports.Modal = Modal;
2635
- exports.MoreMenu = MoreMenu;
2636
- exports.MultiSelect = MultiSelect;
2637
- exports.PageHeader = PageHeader;
2638
- exports.Pagination = Pagination;
2639
- exports.ProgressBar = ProgressBar;
2640
- exports.Radio = Radio;
2641
- exports.RadioList = RadioList;
2642
- exports.Select = Select;
2643
- exports.Table = Table;
2644
- exports.Tabs = Tabs;
2645
- exports.Tag = Tag;
2646
- exports.Toggle = Toggle;
2647
- exports.Tooltip = Tooltip;
2648
- exports.ZeroState = ZeroState;
2649
- exports.formatAsPhone = formatAsPhone;
2650
- exports.formatAsSsn = formatAsSsn;
2651
- exports.getAgesFromDob = getAgesFromDob;
2652
- exports.getDaysForMonth = getDaysForMonth;
2653
- exports.getYears = getYears;
2654
- exports.validateEmail = validateEmail;
2655
- exports.validatePhone = validatePhone;
2656
- //# sourceMappingURL=index.js.map
2622
+ };
2623
+
2624
+ exports.Accordion = Accordion;
2625
+ exports.ActionDialog = ActionDialog;
2626
+ exports.Alert = Alert;
2627
+ exports.AppHeader = AppHeader;
2628
+ exports.AppMenu = AppMenu;
2629
+ exports.BulkActionBar = BulkActionBar;
2630
+ exports.Button = Button;
2631
+ exports.ButtonMenu = ButtonMenu;
2632
+ exports.Checkbox = Checkbox;
2633
+ exports.Checklist = Checklist;
2634
+ exports.Colors = Colors;
2635
+ exports.Copy = Copy;
2636
+ exports.DatePicker = DatePicker;
2637
+ exports.Drawer = Drawer;
2638
+ exports.EditableTheme = EditableTheme;
2639
+ exports.Field = Field;
2640
+ exports.FieldGroup = FieldGroup;
2641
+ exports.FileUpload = FileUpload;
2642
+ exports.FontSizes = FontSizes;
2643
+ exports.FontStyles = FontStyles;
2644
+ exports.Heading = Heading;
2645
+ exports.Input = Input$1;
2646
+ exports.Link = Link;
2647
+ exports.Loader = Loader;
2648
+ exports.Logo = Logo;
2649
+ exports.Modal = Modal;
2650
+ exports.MoreMenu = MoreMenu;
2651
+ exports.MultiSelect = MultiSelect;
2652
+ exports.PageHeader = PageHeader;
2653
+ exports.Pagination = Pagination;
2654
+ exports.ProgressBar = ProgressBar;
2655
+ exports.Radio = Radio;
2656
+ exports.RadioList = RadioList;
2657
+ exports.Select = Select;
2658
+ exports.Table = Table;
2659
+ exports.Tabs = Tabs;
2660
+ exports.Tag = Tag;
2661
+ exports.Toggle = Toggle;
2662
+ exports.Tooltip = Tooltip;
2663
+ exports.ZeroState = ZeroState;
2664
+ exports.formatAsPhone = formatAsPhone;
2665
+ exports.formatAsSsn = formatAsSsn;
2666
+ exports.getAgesFromDob = getAgesFromDob;
2667
+ exports.getDaysForMonth = getDaysForMonth;
2668
+ exports.getYears = getYears;
2669
+ exports.validateEmail = validateEmail;
2670
+ exports.validatePhone = validatePhone;
2671
+ //# sourceMappingURL=index.js.map