@hexure/ui 1.12.3 → 1.12.4
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.
- package/dist/cjs/index.js +169 -157
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/ProgressBar/ProgressBar.d.ts +1 -0
- package/dist/esm/index.js +121 -109
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/ProgressBar/ProgressBar.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React, { useContext, useState, useEffect, useRef } 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, useEffect, useRef } 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,18 +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 */
|
|
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
|
-
|
|
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
|
+
|
|
34
38
|
const Colors = {
|
|
35
39
|
PRIMARY: {
|
|
36
40
|
Hex: '#0193D7',
|
|
@@ -79,8 +83,8 @@ const FontSizes = {
|
|
|
79
83
|
};
|
|
80
84
|
const EditableTheme = {
|
|
81
85
|
PRIMARY_COLOR: Colors.PRIMARY,
|
|
82
|
-
};
|
|
83
|
-
|
|
86
|
+
};
|
|
87
|
+
|
|
84
88
|
const Header$3 = styled.div `
|
|
85
89
|
display: flex;
|
|
86
90
|
align-items: center;
|
|
@@ -107,8 +111,8 @@ const Accordion = (_a) => {
|
|
|
107
111
|
React.createElement(Title$2, null, title),
|
|
108
112
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
|
|
109
113
|
open ? children : null));
|
|
110
|
-
};
|
|
111
|
-
|
|
114
|
+
};
|
|
115
|
+
|
|
112
116
|
const StyledButton = styled.button `
|
|
113
117
|
height: ${props => (props.$small ? '30px' : '40px')};
|
|
114
118
|
line-height: 1em;
|
|
@@ -223,8 +227,8 @@ const Button = (_a) => {
|
|
|
223
227
|
icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
|
|
224
228
|
React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
|
|
225
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));
|
|
226
|
-
};
|
|
227
|
-
|
|
230
|
+
};
|
|
231
|
+
|
|
228
232
|
const StyledComponent = styled.p `
|
|
229
233
|
color: ${props => Colors[props.$color || 'BLACK'].Hex};
|
|
230
234
|
font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -244,8 +248,8 @@ const Copy = ({ children, align = '', margin = '', padding = '', type = 'default
|
|
|
244
248
|
};
|
|
245
249
|
Copy.defaultProps = {
|
|
246
250
|
type: 'default',
|
|
247
|
-
};
|
|
248
|
-
|
|
251
|
+
};
|
|
252
|
+
|
|
249
253
|
const H1 = styled.h1 `
|
|
250
254
|
color: ${Colors.BLACK.Hex};
|
|
251
255
|
font-size: 30px;
|
|
@@ -293,8 +297,8 @@ const Heading = (_a) => {
|
|
|
293
297
|
Heading.defaultProps = {
|
|
294
298
|
bold: false,
|
|
295
299
|
type: 'primary',
|
|
296
|
-
};
|
|
297
|
-
|
|
300
|
+
};
|
|
301
|
+
|
|
298
302
|
const Wrapper$i = styled.div `
|
|
299
303
|
position: fixed;
|
|
300
304
|
top: 0;
|
|
@@ -339,8 +343,8 @@ const ActionDialog = (_a) => {
|
|
|
339
343
|
tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
|
|
340
344
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
341
345
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
|
|
342
|
-
};
|
|
343
|
-
|
|
346
|
+
};
|
|
347
|
+
|
|
344
348
|
const Wrapper$h = styled.div `
|
|
345
349
|
border: 1px solid #f1f1f1;
|
|
346
350
|
border-radius: 4px;
|
|
@@ -391,8 +395,8 @@ const Alert = (_a) => {
|
|
|
391
395
|
title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
392
396
|
description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
|
|
393
397
|
action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
394
|
-
};
|
|
395
|
-
|
|
398
|
+
};
|
|
399
|
+
|
|
396
400
|
const colorMapping = {
|
|
397
401
|
black: {
|
|
398
402
|
fill_1: '#000000',
|
|
@@ -433,8 +437,8 @@ const Logo = (_a) => {
|
|
|
433
437
|
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 }),
|
|
434
438
|
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 })));
|
|
435
439
|
}
|
|
436
|
-
};
|
|
437
|
-
|
|
440
|
+
};
|
|
441
|
+
|
|
438
442
|
const Container$3 = styled.header `
|
|
439
443
|
width: 100%;
|
|
440
444
|
display: flex;
|
|
@@ -462,8 +466,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
|
|
|
462
466
|
return (React.createElement(Container$3, null,
|
|
463
467
|
React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
|
|
464
468
|
React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
|
|
465
|
-
};
|
|
466
|
-
|
|
469
|
+
};
|
|
470
|
+
|
|
467
471
|
const Wrapper$g = styled.div `
|
|
468
472
|
display: inline-block;
|
|
469
473
|
border-radius: 4px;
|
|
@@ -496,8 +500,8 @@ const Tag = (_a) => {
|
|
|
496
500
|
React.createElement(Label$4, { "$color": color }, children),
|
|
497
501
|
removable ? (React.createElement(Remove$1, null,
|
|
498
502
|
React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
|
|
499
|
-
};
|
|
500
|
-
|
|
503
|
+
};
|
|
504
|
+
|
|
501
505
|
const SidebarContainer = styled.div `
|
|
502
506
|
border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
503
507
|
display: flex;
|
|
@@ -604,8 +608,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
|
|
|
604
608
|
e.preventDefault();
|
|
605
609
|
toggleCollapse(!collapsed);
|
|
606
610
|
}, small: true }))));
|
|
607
|
-
};
|
|
608
|
-
|
|
611
|
+
};
|
|
612
|
+
|
|
609
613
|
const Wrapper$f = styled.div `
|
|
610
614
|
border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
611
615
|
border-radius: 8px;
|
|
@@ -654,7 +658,7 @@ const Actions$1 = styled.div `
|
|
|
654
658
|
align-items: center;
|
|
655
659
|
column-gap: 10px;
|
|
656
660
|
`;
|
|
657
|
-
const Error = styled.div `
|
|
661
|
+
const Error$1 = styled.div `
|
|
658
662
|
box-sizing: border-box;
|
|
659
663
|
display: flex;
|
|
660
664
|
align-items: center;
|
|
@@ -684,11 +688,11 @@ const BulkActionBar = (_a) => {
|
|
|
684
688
|
" Selected"),
|
|
685
689
|
onClear ? React.createElement(Clear, { onClick: onClear }, "Clear") : null),
|
|
686
690
|
React.createElement(Actions$1, null, actions.map((action, i) => (React.createElement(Button, Object.assign({}, action, { key: i, small: true })))))),
|
|
687
|
-
errorMsg ? (React.createElement(Error, null,
|
|
691
|
+
errorMsg ? (React.createElement(Error$1, null,
|
|
688
692
|
React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
|
|
689
693
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
690
|
-
};
|
|
691
|
-
|
|
694
|
+
};
|
|
695
|
+
|
|
692
696
|
const Wrapper$e = styled.div `
|
|
693
697
|
background: #fff;
|
|
694
698
|
border-radius: 8px;
|
|
@@ -735,8 +739,8 @@ const MoreMenu = (_a) => {
|
|
|
735
739
|
item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
|
|
736
740
|
React.createElement(Title$1, null, item.label)));
|
|
737
741
|
})));
|
|
738
|
-
};
|
|
739
|
-
|
|
742
|
+
};
|
|
743
|
+
|
|
740
744
|
const Wrapper$d = styled.div `
|
|
741
745
|
position: relative;
|
|
742
746
|
display: inline-block;
|
|
@@ -754,8 +758,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
|
|
|
754
758
|
return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
|
|
755
759
|
React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
|
|
756
760
|
show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
|
|
757
|
-
};
|
|
758
|
-
|
|
761
|
+
};
|
|
762
|
+
|
|
759
763
|
const Wrapper$c = styled.div `
|
|
760
764
|
display: inline-block;
|
|
761
765
|
position: relative;
|
|
@@ -804,8 +808,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
|
|
|
804
808
|
return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
|
|
805
809
|
trigger || React.createElement(StyledIcon$4, { path: mdiInformationOutline }),
|
|
806
810
|
show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
|
|
807
|
-
};
|
|
808
|
-
|
|
811
|
+
};
|
|
812
|
+
|
|
809
813
|
const Wrapper$b = styled.label `
|
|
810
814
|
border-radius: 4px;
|
|
811
815
|
padding: 4px 0px 4px 6px;
|
|
@@ -859,7 +863,7 @@ const Check$1 = styled.span `
|
|
|
859
863
|
box-sizing: border-box;
|
|
860
864
|
position: relative;
|
|
861
865
|
&:after {
|
|
862
|
-
content:
|
|
866
|
+
content: '';
|
|
863
867
|
position: absolute;
|
|
864
868
|
left: 3px;
|
|
865
869
|
top: 0px;
|
|
@@ -891,8 +895,8 @@ const Checkbox = (_a) => {
|
|
|
891
895
|
children ? (React.createElement(Label$3, null,
|
|
892
896
|
children,
|
|
893
897
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
|
|
894
|
-
};
|
|
895
|
-
|
|
898
|
+
};
|
|
899
|
+
|
|
896
900
|
const SelectAll = styled.div `
|
|
897
901
|
padding: 8px 12px;
|
|
898
902
|
border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
@@ -937,8 +941,8 @@ const Checklist = (_a) => {
|
|
|
937
941
|
const checked = selected.includes(option.value);
|
|
938
942
|
return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
939
943
|
}))));
|
|
940
|
-
};
|
|
941
|
-
|
|
944
|
+
};
|
|
945
|
+
|
|
942
946
|
const Wrapper$a = styled.div `
|
|
943
947
|
border-radius: 4px;
|
|
944
948
|
height: 40px;
|
|
@@ -1001,8 +1005,8 @@ const Select = (_a) => {
|
|
|
1001
1005
|
return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
|
|
1002
1006
|
})),
|
|
1003
1007
|
React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
|
|
1004
|
-
};
|
|
1005
|
-
|
|
1008
|
+
};
|
|
1009
|
+
|
|
1006
1010
|
const DatePickerWrapper = styled.div `
|
|
1007
1011
|
display: flex;
|
|
1008
1012
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1071,8 +1075,8 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
|
|
|
1071
1075
|
React.createElement(Middle, null,
|
|
1072
1076
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
1073
1077
|
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
|
|
1074
|
-
};
|
|
1075
|
-
|
|
1078
|
+
};
|
|
1079
|
+
|
|
1076
1080
|
const Scrim$1 = styled.div `
|
|
1077
1081
|
position: ${({ $position }) => $position};
|
|
1078
1082
|
top: 0;
|
|
@@ -1158,9 +1162,9 @@ const Drawer = (_a) => {
|
|
|
1158
1162
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
1159
1163
|
primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
1160
1164
|
scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
|
|
1161
|
-
};
|
|
1162
|
-
|
|
1163
|
-
const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props
|
|
1165
|
+
};
|
|
1166
|
+
|
|
1167
|
+
const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, (props.$customStyle))));
|
|
1164
1168
|
const LabelRow = styled.div `
|
|
1165
1169
|
display: flex;
|
|
1166
1170
|
align-items: center;
|
|
@@ -1209,8 +1213,8 @@ const Validation = styled.div `
|
|
|
1209
1213
|
box-sizing: border-box;
|
|
1210
1214
|
`;
|
|
1211
1215
|
const Field = (_a) => {
|
|
1212
|
-
var { action, children, validationText, label, description, required, htmlFor, style, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
|
|
1213
|
-
return (React.createElement(Wrapper$9, Object.assign({
|
|
1216
|
+
var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
|
|
1217
|
+
return (React.createElement(Wrapper$9, Object.assign({ "$customStyle": style }, accessibleProps),
|
|
1214
1218
|
React.createElement(LabelRow, null,
|
|
1215
1219
|
React.createElement(Label$2, { htmlFor: htmlFor },
|
|
1216
1220
|
label,
|
|
@@ -1220,8 +1224,8 @@ const Field = (_a) => {
|
|
|
1220
1224
|
description ? React.createElement(Description, null, description) : null,
|
|
1221
1225
|
children,
|
|
1222
1226
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
1223
|
-
};
|
|
1224
|
-
|
|
1227
|
+
};
|
|
1228
|
+
|
|
1225
1229
|
const Wrapper$8 = styled.fieldset `
|
|
1226
1230
|
margin-inline-start: 0px;
|
|
1227
1231
|
margin-inline-end: 0px;
|
|
@@ -1255,8 +1259,8 @@ const FieldGroup = ({ children, label }) => {
|
|
|
1255
1259
|
return (React.createElement(Wrapper$8, null,
|
|
1256
1260
|
React.createElement(Label$1, null, label),
|
|
1257
1261
|
React.createElement(Content$1, null, children)));
|
|
1258
|
-
};
|
|
1259
|
-
|
|
1262
|
+
};
|
|
1263
|
+
|
|
1260
1264
|
const Dropzone = styled.div `
|
|
1261
1265
|
border-radius: 8px;
|
|
1262
1266
|
border-width: 1px;
|
|
@@ -1431,8 +1435,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
|
|
|
1431
1435
|
React.createElement(Content, null,
|
|
1432
1436
|
React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
|
|
1433
1437
|
message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
|
|
1434
|
-
};
|
|
1435
|
-
|
|
1438
|
+
};
|
|
1439
|
+
|
|
1436
1440
|
const getAgesFromDob = (dob) => {
|
|
1437
1441
|
let calculated_current_age = null;
|
|
1438
1442
|
let calculated_nearest_age = null;
|
|
@@ -1505,8 +1509,8 @@ const formatAsSsn = (number) => {
|
|
|
1505
1509
|
formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
|
|
1506
1510
|
}
|
|
1507
1511
|
return formatted_value;
|
|
1508
|
-
};
|
|
1509
|
-
|
|
1512
|
+
};
|
|
1513
|
+
|
|
1510
1514
|
const StyledInput = styled.input `
|
|
1511
1515
|
border: none !important;
|
|
1512
1516
|
background: none !important;
|
|
@@ -1691,8 +1695,8 @@ const Input$1 = (_a) => {
|
|
|
1691
1695
|
setShowOptions(false);
|
|
1692
1696
|
} }, s_value));
|
|
1693
1697
|
}))) : null));
|
|
1694
|
-
};
|
|
1695
|
-
|
|
1698
|
+
};
|
|
1699
|
+
|
|
1696
1700
|
const Wrapper$7 = styled.a `
|
|
1697
1701
|
color: ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
1698
1702
|
font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -1711,8 +1715,8 @@ Wrapper$7.defaultProps = { theme: EditableTheme };
|
|
|
1711
1715
|
const Link = (_a) => {
|
|
1712
1716
|
var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
1713
1717
|
return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
|
|
1714
|
-
};
|
|
1715
|
-
|
|
1718
|
+
};
|
|
1719
|
+
|
|
1716
1720
|
const dash = keyframes `
|
|
1717
1721
|
0% {
|
|
1718
1722
|
stroke-dasharray: 1, 160;
|
|
@@ -1746,8 +1750,8 @@ const Path = styled.path `
|
|
|
1746
1750
|
const Loader = () => {
|
|
1747
1751
|
return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
|
|
1748
1752
|
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' })));
|
|
1749
|
-
};
|
|
1750
|
-
|
|
1753
|
+
};
|
|
1754
|
+
|
|
1751
1755
|
const Steps = styled.div `
|
|
1752
1756
|
padding: 20px;
|
|
1753
1757
|
border-bottom: 1px solid #e7e6e6;
|
|
@@ -1790,14 +1794,22 @@ const StepLabel = styled.div `
|
|
|
1790
1794
|
font-weight: 500;
|
|
1791
1795
|
line-height: 1;
|
|
1792
1796
|
`;
|
|
1793
|
-
const
|
|
1797
|
+
const StepLine = styled.div `
|
|
1798
|
+
height: 2px;
|
|
1799
|
+
flex-grow: 1;
|
|
1800
|
+
background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
|
|
1801
|
+
transition: background-color 0.5s ease-in-out;
|
|
1802
|
+
`;
|
|
1803
|
+
const ProgressBar = ({ steps, showStepLine = false }) => {
|
|
1794
1804
|
return (React.createElement(Steps, null, steps.map((step, i) => {
|
|
1795
|
-
return (React.createElement(
|
|
1796
|
-
|
|
1797
|
-
React.createElement(
|
|
1805
|
+
return (React.createElement(React.Fragment, null,
|
|
1806
|
+
i !== 0 && showStepLine && (React.createElement(StepLine, { "$active": step.active })),
|
|
1807
|
+
React.createElement(Step, { key: i },
|
|
1808
|
+
step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
|
|
1809
|
+
React.createElement(StepLabel, null, step.label))));
|
|
1798
1810
|
})));
|
|
1799
|
-
};
|
|
1800
|
-
|
|
1811
|
+
};
|
|
1812
|
+
|
|
1801
1813
|
const Wrapper$6 = styled.div `
|
|
1802
1814
|
position: fixed;
|
|
1803
1815
|
top: 0;
|
|
@@ -1897,8 +1909,8 @@ const Modal = (_a) => {
|
|
|
1897
1909
|
} },
|
|
1898
1910
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
1899
1911
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
|
|
1900
|
-
};
|
|
1901
|
-
|
|
1912
|
+
};
|
|
1913
|
+
|
|
1902
1914
|
const Wrapper$5 = styled.div `
|
|
1903
1915
|
position: relative;
|
|
1904
1916
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1980,8 +1992,8 @@ const MultiSelect = (_a) => {
|
|
|
1980
1992
|
showOptions ? (React.createElement(Options, null,
|
|
1981
1993
|
React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
|
|
1982
1994
|
showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
|
|
1983
|
-
};
|
|
1984
|
-
|
|
1995
|
+
};
|
|
1996
|
+
|
|
1985
1997
|
const Wrapper$4 = styled.div `
|
|
1986
1998
|
display: flex;
|
|
1987
1999
|
padding: 16px 30px;
|
|
@@ -2030,8 +2042,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
|
|
|
2030
2042
|
return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
|
|
2031
2043
|
}),
|
|
2032
2044
|
menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
|
|
2033
|
-
};
|
|
2034
|
-
|
|
2045
|
+
};
|
|
2046
|
+
|
|
2035
2047
|
const Wrapper$3 = styled.nav `
|
|
2036
2048
|
box-sizing: border-box;
|
|
2037
2049
|
display: flex;
|
|
@@ -2065,8 +2077,8 @@ const Pagination = (_a) => {
|
|
|
2065
2077
|
value: `${p}`,
|
|
2066
2078
|
})), value: `${currentPage}` }),
|
|
2067
2079
|
React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
|
|
2068
|
-
};
|
|
2069
|
-
|
|
2080
|
+
};
|
|
2081
|
+
|
|
2070
2082
|
const Wrapper$2 = styled.label `
|
|
2071
2083
|
border-radius: 4px;
|
|
2072
2084
|
padding: 4px 0px 4px 6px;
|
|
@@ -2123,7 +2135,7 @@ const Check = styled.span `
|
|
|
2123
2135
|
box-sizing: border-box;
|
|
2124
2136
|
position: relative;
|
|
2125
2137
|
&:after {
|
|
2126
|
-
content:
|
|
2138
|
+
content: '';
|
|
2127
2139
|
position: absolute;
|
|
2128
2140
|
top: 2px;
|
|
2129
2141
|
left: 2px;
|
|
@@ -2150,16 +2162,16 @@ const Radio = (_a) => {
|
|
|
2150
2162
|
React.createElement(Label, null,
|
|
2151
2163
|
children,
|
|
2152
2164
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
|
|
2153
|
-
};
|
|
2154
|
-
|
|
2165
|
+
};
|
|
2166
|
+
|
|
2155
2167
|
const RadioList = (_a) => {
|
|
2156
2168
|
var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
|
|
2157
2169
|
return (React.createElement(React.Fragment, null, options.map((option) => {
|
|
2158
2170
|
const label = option.label || option.value;
|
|
2159
2171
|
return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
|
|
2160
2172
|
})));
|
|
2161
|
-
};
|
|
2162
|
-
|
|
2173
|
+
};
|
|
2174
|
+
|
|
2163
2175
|
const StyledTable = styled.table `
|
|
2164
2176
|
width: 100%;
|
|
2165
2177
|
margin-top: 1px;
|
|
@@ -2238,8 +2250,8 @@ const Table = (_a) => {
|
|
|
2238
2250
|
return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
|
|
2239
2251
|
})));
|
|
2240
2252
|
}))) : null));
|
|
2241
|
-
};
|
|
2242
|
-
|
|
2253
|
+
};
|
|
2254
|
+
|
|
2243
2255
|
const Wrapper$1 = styled.div `
|
|
2244
2256
|
display: flex;
|
|
2245
2257
|
box-sizing: border-box;
|
|
@@ -2298,8 +2310,8 @@ const Tabs = (_a) => {
|
|
|
2298
2310
|
label));
|
|
2299
2311
|
})));
|
|
2300
2312
|
};
|
|
2301
|
-
Tabs.defaultProps = {};
|
|
2302
|
-
|
|
2313
|
+
Tabs.defaultProps = {};
|
|
2314
|
+
|
|
2303
2315
|
const Track = styled.div `
|
|
2304
2316
|
height: 24px;
|
|
2305
2317
|
border-radius: 12px;
|
|
@@ -2329,8 +2341,8 @@ const Toggle = (_a) => {
|
|
|
2329
2341
|
React.createElement(Handle, { "$on": on },
|
|
2330
2342
|
React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? mdiCheck : mdiClose, size: '16px' }))));
|
|
2331
2343
|
};
|
|
2332
|
-
Toggle.defaultProps = {};
|
|
2333
|
-
|
|
2344
|
+
Toggle.defaultProps = {};
|
|
2345
|
+
|
|
2334
2346
|
const Container = styled.div `
|
|
2335
2347
|
width: 100%;
|
|
2336
2348
|
padding: 40px auto;
|
|
@@ -2365,7 +2377,7 @@ const ZeroState = (_a) => {
|
|
|
2365
2377
|
React.createElement(Heading, { children: title, type: 'tertiary' }),
|
|
2366
2378
|
description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
|
|
2367
2379
|
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 }))));
|
|
2368
|
-
};
|
|
2369
|
-
|
|
2370
|
-
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 };
|
|
2371
|
-
//# sourceMappingURL=index.js.map
|
|
2380
|
+
};
|
|
2381
|
+
|
|
2382
|
+
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 };
|
|
2383
|
+
//# sourceMappingURL=index.js.map
|