@hexure/ui 1.13.4 → 1.13.6

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