@hexure/ui 1.12.2 → 1.12.3
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
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var styled = require('styled-components');
|
|
5
|
-
var Icon = require('@mdi/react');
|
|
6
|
-
var js = require('@mdi/js');
|
|
7
|
-
var dayjs = require('dayjs');
|
|
8
|
-
var Numeral = require('numeral');
|
|
9
|
-
var Moment = require('moment');
|
|
10
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var styled = require('styled-components');
|
|
5
|
+
var Icon = require('@mdi/react');
|
|
6
|
+
var js = require('@mdi/js');
|
|
7
|
+
var dayjs = require('dayjs');
|
|
8
|
+
var Numeral = require('numeral');
|
|
9
|
+
var Moment = require('moment');
|
|
10
|
+
|
|
11
11
|
/******************************************************************************
|
|
12
12
|
Copyright (c) Microsoft Corporation.
|
|
13
13
|
|
|
@@ -21,18 +21,18 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
|
21
21
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
22
22
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
23
23
|
PERFORMANCE OF THIS SOFTWARE.
|
|
24
|
-
***************************************************************************** */
|
|
25
|
-
/* global Reflect, Promise */
|
|
26
|
-
|
|
27
|
-
function __rest(s, e) {
|
|
28
|
-
var t = {};
|
|
29
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
30
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
32
|
-
}
|
|
33
|
-
return t;
|
|
34
|
-
}
|
|
35
|
-
|
|
24
|
+
***************************************************************************** */
|
|
25
|
+
/* global Reflect, Promise */
|
|
26
|
+
|
|
27
|
+
function __rest(s, e) {
|
|
28
|
+
var t = {};
|
|
29
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
30
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
32
|
+
}
|
|
33
|
+
return t;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
36
|
const Colors = {
|
|
37
37
|
PRIMARY: {
|
|
38
38
|
Hex: '#0193D7',
|
|
@@ -81,8 +81,8 @@ const FontSizes = {
|
|
|
81
81
|
};
|
|
82
82
|
const EditableTheme = {
|
|
83
83
|
PRIMARY_COLOR: Colors.PRIMARY,
|
|
84
|
-
};
|
|
85
|
-
|
|
84
|
+
};
|
|
85
|
+
|
|
86
86
|
const Header$3 = styled.div `
|
|
87
87
|
display: flex;
|
|
88
88
|
align-items: center;
|
|
@@ -109,8 +109,8 @@ const Accordion = (_a) => {
|
|
|
109
109
|
React.createElement(Title$2, null, title),
|
|
110
110
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
|
|
111
111
|
open ? children : null));
|
|
112
|
-
};
|
|
113
|
-
|
|
112
|
+
};
|
|
113
|
+
|
|
114
114
|
const StyledButton = styled.button `
|
|
115
115
|
height: ${props => (props.$small ? '30px' : '40px')};
|
|
116
116
|
line-height: 1em;
|
|
@@ -225,8 +225,8 @@ const Button = (_a) => {
|
|
|
225
225
|
icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
|
|
226
226
|
React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
|
|
227
227
|
badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
|
|
228
|
-
};
|
|
229
|
-
|
|
228
|
+
};
|
|
229
|
+
|
|
230
230
|
const StyledComponent = styled.p `
|
|
231
231
|
color: ${props => Colors[props.$color || 'BLACK'].Hex};
|
|
232
232
|
font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -246,8 +246,8 @@ const Copy = ({ children, align = '', margin = '', padding = '', type = 'default
|
|
|
246
246
|
};
|
|
247
247
|
Copy.defaultProps = {
|
|
248
248
|
type: 'default',
|
|
249
|
-
};
|
|
250
|
-
|
|
249
|
+
};
|
|
250
|
+
|
|
251
251
|
const H1 = styled.h1 `
|
|
252
252
|
color: ${Colors.BLACK.Hex};
|
|
253
253
|
font-size: 30px;
|
|
@@ -295,8 +295,8 @@ const Heading = (_a) => {
|
|
|
295
295
|
Heading.defaultProps = {
|
|
296
296
|
bold: false,
|
|
297
297
|
type: 'primary',
|
|
298
|
-
};
|
|
299
|
-
|
|
298
|
+
};
|
|
299
|
+
|
|
300
300
|
const Wrapper$i = styled.div `
|
|
301
301
|
position: fixed;
|
|
302
302
|
top: 0;
|
|
@@ -341,8 +341,8 @@ const ActionDialog = (_a) => {
|
|
|
341
341
|
tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
|
|
342
342
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
343
343
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
|
|
344
|
-
};
|
|
345
|
-
|
|
344
|
+
};
|
|
345
|
+
|
|
346
346
|
const Wrapper$h = styled.div `
|
|
347
347
|
border: 1px solid #f1f1f1;
|
|
348
348
|
border-radius: 4px;
|
|
@@ -393,8 +393,8 @@ const Alert = (_a) => {
|
|
|
393
393
|
title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
394
394
|
description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
|
|
395
395
|
action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
396
|
-
};
|
|
397
|
-
|
|
396
|
+
};
|
|
397
|
+
|
|
398
398
|
const colorMapping = {
|
|
399
399
|
black: {
|
|
400
400
|
fill_1: '#000000',
|
|
@@ -435,8 +435,8 @@ const Logo = (_a) => {
|
|
|
435
435
|
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 }),
|
|
436
436
|
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 })));
|
|
437
437
|
}
|
|
438
|
-
};
|
|
439
|
-
|
|
438
|
+
};
|
|
439
|
+
|
|
440
440
|
const Container$3 = styled.header `
|
|
441
441
|
width: 100%;
|
|
442
442
|
display: flex;
|
|
@@ -464,8 +464,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
|
|
|
464
464
|
return (React.createElement(Container$3, null,
|
|
465
465
|
React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
|
|
466
466
|
React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
|
|
467
|
-
};
|
|
468
|
-
|
|
467
|
+
};
|
|
468
|
+
|
|
469
469
|
const Wrapper$g = styled.div `
|
|
470
470
|
display: inline-block;
|
|
471
471
|
border-radius: 4px;
|
|
@@ -498,8 +498,8 @@ const Tag = (_a) => {
|
|
|
498
498
|
React.createElement(Label$4, { "$color": color }, children),
|
|
499
499
|
removable ? (React.createElement(Remove$1, null,
|
|
500
500
|
React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
|
|
501
|
-
};
|
|
502
|
-
|
|
501
|
+
};
|
|
502
|
+
|
|
503
503
|
const SidebarContainer = styled.div `
|
|
504
504
|
border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
505
505
|
display: flex;
|
|
@@ -606,8 +606,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
|
|
|
606
606
|
e.preventDefault();
|
|
607
607
|
toggleCollapse(!collapsed);
|
|
608
608
|
}, small: true }))));
|
|
609
|
-
};
|
|
610
|
-
|
|
609
|
+
};
|
|
610
|
+
|
|
611
611
|
const Wrapper$f = styled.div `
|
|
612
612
|
border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
613
613
|
border-radius: 8px;
|
|
@@ -689,8 +689,8 @@ const BulkActionBar = (_a) => {
|
|
|
689
689
|
errorMsg ? (React.createElement(Error, null,
|
|
690
690
|
React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
|
|
691
691
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
692
|
-
};
|
|
693
|
-
|
|
692
|
+
};
|
|
693
|
+
|
|
694
694
|
const Wrapper$e = styled.div `
|
|
695
695
|
background: #fff;
|
|
696
696
|
border-radius: 8px;
|
|
@@ -737,8 +737,8 @@ const MoreMenu = (_a) => {
|
|
|
737
737
|
item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
|
|
738
738
|
React.createElement(Title$1, null, item.label)));
|
|
739
739
|
})));
|
|
740
|
-
};
|
|
741
|
-
|
|
740
|
+
};
|
|
741
|
+
|
|
742
742
|
const Wrapper$d = styled.div `
|
|
743
743
|
position: relative;
|
|
744
744
|
display: inline-block;
|
|
@@ -756,8 +756,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
|
|
|
756
756
|
return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
|
|
757
757
|
React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
|
|
758
758
|
show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
|
|
759
|
-
};
|
|
760
|
-
|
|
759
|
+
};
|
|
760
|
+
|
|
761
761
|
const Wrapper$c = styled.div `
|
|
762
762
|
display: inline-block;
|
|
763
763
|
position: relative;
|
|
@@ -806,8 +806,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
|
|
|
806
806
|
return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
|
|
807
807
|
trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
|
|
808
808
|
show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
|
|
809
|
-
};
|
|
810
|
-
|
|
809
|
+
};
|
|
810
|
+
|
|
811
811
|
const Wrapper$b = styled.label `
|
|
812
812
|
border-radius: 4px;
|
|
813
813
|
padding: 4px 0px 4px 6px;
|
|
@@ -893,8 +893,8 @@ const Checkbox = (_a) => {
|
|
|
893
893
|
children ? (React.createElement(Label$3, null,
|
|
894
894
|
children,
|
|
895
895
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
|
|
896
|
-
};
|
|
897
|
-
|
|
896
|
+
};
|
|
897
|
+
|
|
898
898
|
const SelectAll = styled.div `
|
|
899
899
|
padding: 8px 12px;
|
|
900
900
|
border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
@@ -939,8 +939,8 @@ const Checklist = (_a) => {
|
|
|
939
939
|
const checked = selected.includes(option.value);
|
|
940
940
|
return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
941
941
|
}))));
|
|
942
|
-
};
|
|
943
|
-
|
|
942
|
+
};
|
|
943
|
+
|
|
944
944
|
const Wrapper$a = styled.div `
|
|
945
945
|
border-radius: 4px;
|
|
946
946
|
height: 40px;
|
|
@@ -1003,8 +1003,8 @@ const Select = (_a) => {
|
|
|
1003
1003
|
return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
|
|
1004
1004
|
})),
|
|
1005
1005
|
React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
|
|
1006
|
-
};
|
|
1007
|
-
|
|
1006
|
+
};
|
|
1007
|
+
|
|
1008
1008
|
const DatePickerWrapper = styled.div `
|
|
1009
1009
|
display: flex;
|
|
1010
1010
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1073,8 +1073,8 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
|
|
|
1073
1073
|
React.createElement(Middle, null,
|
|
1074
1074
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
1075
1075
|
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
|
|
1076
|
-
};
|
|
1077
|
-
|
|
1076
|
+
};
|
|
1077
|
+
|
|
1078
1078
|
const Scrim$1 = styled.div `
|
|
1079
1079
|
position: ${({ $position }) => $position};
|
|
1080
1080
|
top: 0;
|
|
@@ -1160,8 +1160,8 @@ const Drawer = (_a) => {
|
|
|
1160
1160
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
1161
1161
|
primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
1162
1162
|
scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
|
|
1163
|
-
};
|
|
1164
|
-
|
|
1163
|
+
};
|
|
1164
|
+
|
|
1165
1165
|
const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
|
|
1166
1166
|
const LabelRow = styled.div `
|
|
1167
1167
|
display: flex;
|
|
@@ -1222,8 +1222,8 @@ const Field = (_a) => {
|
|
|
1222
1222
|
description ? React.createElement(Description, null, description) : null,
|
|
1223
1223
|
children,
|
|
1224
1224
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
1225
|
-
};
|
|
1226
|
-
|
|
1225
|
+
};
|
|
1226
|
+
|
|
1227
1227
|
const Wrapper$8 = styled.fieldset `
|
|
1228
1228
|
margin-inline-start: 0px;
|
|
1229
1229
|
margin-inline-end: 0px;
|
|
@@ -1257,8 +1257,8 @@ const FieldGroup = ({ children, label }) => {
|
|
|
1257
1257
|
return (React.createElement(Wrapper$8, null,
|
|
1258
1258
|
React.createElement(Label$1, null, label),
|
|
1259
1259
|
React.createElement(Content$1, null, children)));
|
|
1260
|
-
};
|
|
1261
|
-
|
|
1260
|
+
};
|
|
1261
|
+
|
|
1262
1262
|
const Dropzone = styled.div `
|
|
1263
1263
|
border-radius: 8px;
|
|
1264
1264
|
border-width: 1px;
|
|
@@ -1433,8 +1433,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
|
|
|
1433
1433
|
React.createElement(Content, null,
|
|
1434
1434
|
React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
|
|
1435
1435
|
message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
|
|
1436
|
-
};
|
|
1437
|
-
|
|
1436
|
+
};
|
|
1437
|
+
|
|
1438
1438
|
const getAgesFromDob = (dob) => {
|
|
1439
1439
|
let calculated_current_age = null;
|
|
1440
1440
|
let calculated_nearest_age = null;
|
|
@@ -1507,8 +1507,8 @@ const formatAsSsn = (number) => {
|
|
|
1507
1507
|
formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
|
|
1508
1508
|
}
|
|
1509
1509
|
return formatted_value;
|
|
1510
|
-
};
|
|
1511
|
-
|
|
1510
|
+
};
|
|
1511
|
+
|
|
1512
1512
|
const StyledInput = styled.input `
|
|
1513
1513
|
border: none !important;
|
|
1514
1514
|
background: none !important;
|
|
@@ -1693,8 +1693,8 @@ const Input$1 = (_a) => {
|
|
|
1693
1693
|
setShowOptions(false);
|
|
1694
1694
|
} }, s_value));
|
|
1695
1695
|
}))) : null));
|
|
1696
|
-
};
|
|
1697
|
-
|
|
1696
|
+
};
|
|
1697
|
+
|
|
1698
1698
|
const Wrapper$7 = styled.a `
|
|
1699
1699
|
color: ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
1700
1700
|
font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -1713,8 +1713,8 @@ Wrapper$7.defaultProps = { theme: EditableTheme };
|
|
|
1713
1713
|
const Link = (_a) => {
|
|
1714
1714
|
var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
1715
1715
|
return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
|
|
1716
|
-
};
|
|
1717
|
-
|
|
1716
|
+
};
|
|
1717
|
+
|
|
1718
1718
|
const dash = styled.keyframes `
|
|
1719
1719
|
0% {
|
|
1720
1720
|
stroke-dasharray: 1, 160;
|
|
@@ -1748,8 +1748,8 @@ const Path = styled.path `
|
|
|
1748
1748
|
const Loader = () => {
|
|
1749
1749
|
return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
|
|
1750
1750
|
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' })));
|
|
1751
|
-
};
|
|
1752
|
-
|
|
1751
|
+
};
|
|
1752
|
+
|
|
1753
1753
|
const Steps = styled.div `
|
|
1754
1754
|
padding: 20px;
|
|
1755
1755
|
border-bottom: 1px solid #e7e6e6;
|
|
@@ -1798,8 +1798,8 @@ const ProgressBar = ({ steps }) => {
|
|
|
1798
1798
|
step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
|
|
1799
1799
|
React.createElement(StepLabel, null, step.label)));
|
|
1800
1800
|
})));
|
|
1801
|
-
};
|
|
1802
|
-
|
|
1801
|
+
};
|
|
1802
|
+
|
|
1803
1803
|
const Wrapper$6 = styled.div `
|
|
1804
1804
|
position: fixed;
|
|
1805
1805
|
top: 0;
|
|
@@ -1899,8 +1899,8 @@ const Modal = (_a) => {
|
|
|
1899
1899
|
} },
|
|
1900
1900
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
1901
1901
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
|
|
1902
|
-
};
|
|
1903
|
-
|
|
1902
|
+
};
|
|
1903
|
+
|
|
1904
1904
|
const Wrapper$5 = styled.div `
|
|
1905
1905
|
position: relative;
|
|
1906
1906
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1982,8 +1982,8 @@ const MultiSelect = (_a) => {
|
|
|
1982
1982
|
showOptions ? (React.createElement(Options, null,
|
|
1983
1983
|
React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
|
|
1984
1984
|
showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
|
|
1985
|
-
};
|
|
1986
|
-
|
|
1985
|
+
};
|
|
1986
|
+
|
|
1987
1987
|
const Wrapper$4 = styled.div `
|
|
1988
1988
|
display: flex;
|
|
1989
1989
|
padding: 16px 30px;
|
|
@@ -2032,8 +2032,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
|
|
|
2032
2032
|
return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
|
|
2033
2033
|
}),
|
|
2034
2034
|
menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
|
|
2035
|
-
};
|
|
2036
|
-
|
|
2035
|
+
};
|
|
2036
|
+
|
|
2037
2037
|
const Wrapper$3 = styled.nav `
|
|
2038
2038
|
box-sizing: border-box;
|
|
2039
2039
|
display: flex;
|
|
@@ -2067,8 +2067,8 @@ const Pagination = (_a) => {
|
|
|
2067
2067
|
value: `${p}`,
|
|
2068
2068
|
})), value: `${currentPage}` }),
|
|
2069
2069
|
React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
|
|
2070
|
-
};
|
|
2071
|
-
|
|
2070
|
+
};
|
|
2071
|
+
|
|
2072
2072
|
const Wrapper$2 = styled.label `
|
|
2073
2073
|
border-radius: 4px;
|
|
2074
2074
|
padding: 4px 0px 4px 6px;
|
|
@@ -2152,16 +2152,16 @@ const Radio = (_a) => {
|
|
|
2152
2152
|
React.createElement(Label, null,
|
|
2153
2153
|
children,
|
|
2154
2154
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
|
|
2155
|
-
};
|
|
2156
|
-
|
|
2155
|
+
};
|
|
2156
|
+
|
|
2157
2157
|
const RadioList = (_a) => {
|
|
2158
2158
|
var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
|
|
2159
2159
|
return (React.createElement(React.Fragment, null, options.map((option) => {
|
|
2160
2160
|
const label = option.label || option.value;
|
|
2161
2161
|
return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
|
|
2162
2162
|
})));
|
|
2163
|
-
};
|
|
2164
|
-
|
|
2163
|
+
};
|
|
2164
|
+
|
|
2165
2165
|
const StyledTable = styled.table `
|
|
2166
2166
|
width: 100%;
|
|
2167
2167
|
margin-top: 1px;
|
|
@@ -2240,8 +2240,8 @@ const Table = (_a) => {
|
|
|
2240
2240
|
return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
|
|
2241
2241
|
})));
|
|
2242
2242
|
}))) : null));
|
|
2243
|
-
};
|
|
2244
|
-
|
|
2243
|
+
};
|
|
2244
|
+
|
|
2245
2245
|
const Wrapper$1 = styled.div `
|
|
2246
2246
|
display: flex;
|
|
2247
2247
|
box-sizing: border-box;
|
|
@@ -2300,8 +2300,8 @@ const Tabs = (_a) => {
|
|
|
2300
2300
|
label));
|
|
2301
2301
|
})));
|
|
2302
2302
|
};
|
|
2303
|
-
Tabs.defaultProps = {};
|
|
2304
|
-
|
|
2303
|
+
Tabs.defaultProps = {};
|
|
2304
|
+
|
|
2305
2305
|
const Track = styled.div `
|
|
2306
2306
|
height: 24px;
|
|
2307
2307
|
border-radius: 12px;
|
|
@@ -2331,8 +2331,8 @@ const Toggle = (_a) => {
|
|
|
2331
2331
|
React.createElement(Handle, { "$on": on },
|
|
2332
2332
|
React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
|
|
2333
2333
|
};
|
|
2334
|
-
Toggle.defaultProps = {};
|
|
2335
|
-
|
|
2334
|
+
Toggle.defaultProps = {};
|
|
2335
|
+
|
|
2336
2336
|
const Container = styled.div `
|
|
2337
2337
|
width: 100%;
|
|
2338
2338
|
padding: 40px auto;
|
|
@@ -2367,53 +2367,53 @@ const ZeroState = (_a) => {
|
|
|
2367
2367
|
React.createElement(Heading, { children: title, type: 'tertiary' }),
|
|
2368
2368
|
description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
|
|
2369
2369
|
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 }))));
|
|
2370
|
-
};
|
|
2371
|
-
|
|
2372
|
-
exports.Accordion = Accordion;
|
|
2373
|
-
exports.ActionDialog = ActionDialog;
|
|
2374
|
-
exports.Alert = Alert;
|
|
2375
|
-
exports.AppHeader = AppHeader;
|
|
2376
|
-
exports.AppMenu = AppMenu;
|
|
2377
|
-
exports.BulkActionBar = BulkActionBar;
|
|
2378
|
-
exports.Button = Button;
|
|
2379
|
-
exports.ButtonMenu = ButtonMenu;
|
|
2380
|
-
exports.Checkbox = Checkbox;
|
|
2381
|
-
exports.Checklist = Checklist;
|
|
2382
|
-
exports.Colors = Colors;
|
|
2383
|
-
exports.Copy = Copy;
|
|
2384
|
-
exports.DatePicker = DatePicker;
|
|
2385
|
-
exports.Drawer = Drawer;
|
|
2386
|
-
exports.EditableTheme = EditableTheme;
|
|
2387
|
-
exports.Field = Field;
|
|
2388
|
-
exports.FieldGroup = FieldGroup;
|
|
2389
|
-
exports.FileUpload = FileUpload;
|
|
2390
|
-
exports.FontSizes = FontSizes;
|
|
2391
|
-
exports.FontStyles = FontStyles;
|
|
2392
|
-
exports.Heading = Heading;
|
|
2393
|
-
exports.Input = Input$1;
|
|
2394
|
-
exports.Link = Link;
|
|
2395
|
-
exports.Loader = Loader;
|
|
2396
|
-
exports.Logo = Logo;
|
|
2397
|
-
exports.Modal = Modal;
|
|
2398
|
-
exports.MoreMenu = MoreMenu;
|
|
2399
|
-
exports.MultiSelect = MultiSelect;
|
|
2400
|
-
exports.PageHeader = PageHeader;
|
|
2401
|
-
exports.Pagination = Pagination;
|
|
2402
|
-
exports.ProgressBar = ProgressBar;
|
|
2403
|
-
exports.Radio = Radio;
|
|
2404
|
-
exports.RadioList = RadioList;
|
|
2405
|
-
exports.Select = Select;
|
|
2406
|
-
exports.Table = Table;
|
|
2407
|
-
exports.Tabs = Tabs;
|
|
2408
|
-
exports.Tag = Tag;
|
|
2409
|
-
exports.Toggle = Toggle;
|
|
2410
|
-
exports.Tooltip = Tooltip;
|
|
2411
|
-
exports.ZeroState = ZeroState;
|
|
2412
|
-
exports.formatAsPhone = formatAsPhone;
|
|
2413
|
-
exports.formatAsSsn = formatAsSsn;
|
|
2414
|
-
exports.getAgesFromDob = getAgesFromDob;
|
|
2415
|
-
exports.getDaysForMonth = getDaysForMonth;
|
|
2416
|
-
exports.getYears = getYears;
|
|
2417
|
-
exports.validateEmail = validateEmail;
|
|
2418
|
-
exports.validatePhone = validatePhone;
|
|
2419
|
-
//# sourceMappingURL=index.js.map
|
|
2370
|
+
};
|
|
2371
|
+
|
|
2372
|
+
exports.Accordion = Accordion;
|
|
2373
|
+
exports.ActionDialog = ActionDialog;
|
|
2374
|
+
exports.Alert = Alert;
|
|
2375
|
+
exports.AppHeader = AppHeader;
|
|
2376
|
+
exports.AppMenu = AppMenu;
|
|
2377
|
+
exports.BulkActionBar = BulkActionBar;
|
|
2378
|
+
exports.Button = Button;
|
|
2379
|
+
exports.ButtonMenu = ButtonMenu;
|
|
2380
|
+
exports.Checkbox = Checkbox;
|
|
2381
|
+
exports.Checklist = Checklist;
|
|
2382
|
+
exports.Colors = Colors;
|
|
2383
|
+
exports.Copy = Copy;
|
|
2384
|
+
exports.DatePicker = DatePicker;
|
|
2385
|
+
exports.Drawer = Drawer;
|
|
2386
|
+
exports.EditableTheme = EditableTheme;
|
|
2387
|
+
exports.Field = Field;
|
|
2388
|
+
exports.FieldGroup = FieldGroup;
|
|
2389
|
+
exports.FileUpload = FileUpload;
|
|
2390
|
+
exports.FontSizes = FontSizes;
|
|
2391
|
+
exports.FontStyles = FontStyles;
|
|
2392
|
+
exports.Heading = Heading;
|
|
2393
|
+
exports.Input = Input$1;
|
|
2394
|
+
exports.Link = Link;
|
|
2395
|
+
exports.Loader = Loader;
|
|
2396
|
+
exports.Logo = Logo;
|
|
2397
|
+
exports.Modal = Modal;
|
|
2398
|
+
exports.MoreMenu = MoreMenu;
|
|
2399
|
+
exports.MultiSelect = MultiSelect;
|
|
2400
|
+
exports.PageHeader = PageHeader;
|
|
2401
|
+
exports.Pagination = Pagination;
|
|
2402
|
+
exports.ProgressBar = ProgressBar;
|
|
2403
|
+
exports.Radio = Radio;
|
|
2404
|
+
exports.RadioList = RadioList;
|
|
2405
|
+
exports.Select = Select;
|
|
2406
|
+
exports.Table = Table;
|
|
2407
|
+
exports.Tabs = Tabs;
|
|
2408
|
+
exports.Tag = Tag;
|
|
2409
|
+
exports.Toggle = Toggle;
|
|
2410
|
+
exports.Tooltip = Tooltip;
|
|
2411
|
+
exports.ZeroState = ZeroState;
|
|
2412
|
+
exports.formatAsPhone = formatAsPhone;
|
|
2413
|
+
exports.formatAsSsn = formatAsSsn;
|
|
2414
|
+
exports.getAgesFromDob = getAgesFromDob;
|
|
2415
|
+
exports.getDaysForMonth = getDaysForMonth;
|
|
2416
|
+
exports.getYears = getYears;
|
|
2417
|
+
exports.validateEmail = validateEmail;
|
|
2418
|
+
exports.validatePhone = validatePhone;
|
|
2419
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
2
|
import { AccessibleProps } from '../../utils/Accessibility';
|
|
3
3
|
export interface HeadingProps extends AccessibleProps {
|
|
4
4
|
/** Toggle between bold and normal font weights */
|
|
5
5
|
bold?: boolean;
|
|
6
6
|
/** Set the text to be displayed */
|
|
7
|
-
children: string;
|
|
7
|
+
children: string | React.ReactNode;
|
|
8
8
|
/** Set the margin on the element */
|
|
9
9
|
margin?: string;
|
|
10
10
|
/** Set the padding on the element */
|