@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/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,18 @@ 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 */
|
|
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
|
+
|
|
34
34
|
const Colors = {
|
|
35
35
|
PRIMARY: {
|
|
36
36
|
Hex: '#0193D7',
|
|
@@ -79,8 +79,8 @@ const FontSizes = {
|
|
|
79
79
|
};
|
|
80
80
|
const EditableTheme = {
|
|
81
81
|
PRIMARY_COLOR: Colors.PRIMARY,
|
|
82
|
-
};
|
|
83
|
-
|
|
82
|
+
};
|
|
83
|
+
|
|
84
84
|
const Header$3 = styled.div `
|
|
85
85
|
display: flex;
|
|
86
86
|
align-items: center;
|
|
@@ -107,8 +107,8 @@ const Accordion = (_a) => {
|
|
|
107
107
|
React.createElement(Title$2, null, title),
|
|
108
108
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
|
|
109
109
|
open ? children : null));
|
|
110
|
-
};
|
|
111
|
-
|
|
110
|
+
};
|
|
111
|
+
|
|
112
112
|
const StyledButton = styled.button `
|
|
113
113
|
height: ${props => (props.$small ? '30px' : '40px')};
|
|
114
114
|
line-height: 1em;
|
|
@@ -223,8 +223,8 @@ const Button = (_a) => {
|
|
|
223
223
|
icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
|
|
224
224
|
React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
|
|
225
225
|
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
|
-
|
|
226
|
+
};
|
|
227
|
+
|
|
228
228
|
const StyledComponent = styled.p `
|
|
229
229
|
color: ${props => Colors[props.$color || 'BLACK'].Hex};
|
|
230
230
|
font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -244,8 +244,8 @@ const Copy = ({ children, align = '', margin = '', padding = '', type = 'default
|
|
|
244
244
|
};
|
|
245
245
|
Copy.defaultProps = {
|
|
246
246
|
type: 'default',
|
|
247
|
-
};
|
|
248
|
-
|
|
247
|
+
};
|
|
248
|
+
|
|
249
249
|
const H1 = styled.h1 `
|
|
250
250
|
color: ${Colors.BLACK.Hex};
|
|
251
251
|
font-size: 30px;
|
|
@@ -293,8 +293,8 @@ const Heading = (_a) => {
|
|
|
293
293
|
Heading.defaultProps = {
|
|
294
294
|
bold: false,
|
|
295
295
|
type: 'primary',
|
|
296
|
-
};
|
|
297
|
-
|
|
296
|
+
};
|
|
297
|
+
|
|
298
298
|
const Wrapper$i = styled.div `
|
|
299
299
|
position: fixed;
|
|
300
300
|
top: 0;
|
|
@@ -339,8 +339,8 @@ const ActionDialog = (_a) => {
|
|
|
339
339
|
tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
|
|
340
340
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
341
341
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
|
|
342
|
-
};
|
|
343
|
-
|
|
342
|
+
};
|
|
343
|
+
|
|
344
344
|
const Wrapper$h = styled.div `
|
|
345
345
|
border: 1px solid #f1f1f1;
|
|
346
346
|
border-radius: 4px;
|
|
@@ -391,8 +391,8 @@ const Alert = (_a) => {
|
|
|
391
391
|
title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
392
392
|
description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
|
|
393
393
|
action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
394
|
-
};
|
|
395
|
-
|
|
394
|
+
};
|
|
395
|
+
|
|
396
396
|
const colorMapping = {
|
|
397
397
|
black: {
|
|
398
398
|
fill_1: '#000000',
|
|
@@ -433,8 +433,8 @@ const Logo = (_a) => {
|
|
|
433
433
|
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
434
|
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
435
|
}
|
|
436
|
-
};
|
|
437
|
-
|
|
436
|
+
};
|
|
437
|
+
|
|
438
438
|
const Container$3 = styled.header `
|
|
439
439
|
width: 100%;
|
|
440
440
|
display: flex;
|
|
@@ -462,8 +462,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
|
|
|
462
462
|
return (React.createElement(Container$3, null,
|
|
463
463
|
React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
|
|
464
464
|
React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
|
|
465
|
-
};
|
|
466
|
-
|
|
465
|
+
};
|
|
466
|
+
|
|
467
467
|
const Wrapper$g = styled.div `
|
|
468
468
|
display: inline-block;
|
|
469
469
|
border-radius: 4px;
|
|
@@ -496,8 +496,8 @@ const Tag = (_a) => {
|
|
|
496
496
|
React.createElement(Label$4, { "$color": color }, children),
|
|
497
497
|
removable ? (React.createElement(Remove$1, null,
|
|
498
498
|
React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
|
|
499
|
-
};
|
|
500
|
-
|
|
499
|
+
};
|
|
500
|
+
|
|
501
501
|
const SidebarContainer = styled.div `
|
|
502
502
|
border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
503
503
|
display: flex;
|
|
@@ -604,8 +604,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
|
|
|
604
604
|
e.preventDefault();
|
|
605
605
|
toggleCollapse(!collapsed);
|
|
606
606
|
}, small: true }))));
|
|
607
|
-
};
|
|
608
|
-
|
|
607
|
+
};
|
|
608
|
+
|
|
609
609
|
const Wrapper$f = styled.div `
|
|
610
610
|
border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
611
611
|
border-radius: 8px;
|
|
@@ -687,8 +687,8 @@ const BulkActionBar = (_a) => {
|
|
|
687
687
|
errorMsg ? (React.createElement(Error, null,
|
|
688
688
|
React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
|
|
689
689
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
690
|
-
};
|
|
691
|
-
|
|
690
|
+
};
|
|
691
|
+
|
|
692
692
|
const Wrapper$e = styled.div `
|
|
693
693
|
background: #fff;
|
|
694
694
|
border-radius: 8px;
|
|
@@ -735,8 +735,8 @@ const MoreMenu = (_a) => {
|
|
|
735
735
|
item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
|
|
736
736
|
React.createElement(Title$1, null, item.label)));
|
|
737
737
|
})));
|
|
738
|
-
};
|
|
739
|
-
|
|
738
|
+
};
|
|
739
|
+
|
|
740
740
|
const Wrapper$d = styled.div `
|
|
741
741
|
position: relative;
|
|
742
742
|
display: inline-block;
|
|
@@ -754,8 +754,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
|
|
|
754
754
|
return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
|
|
755
755
|
React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
|
|
756
756
|
show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
|
|
757
|
-
};
|
|
758
|
-
|
|
757
|
+
};
|
|
758
|
+
|
|
759
759
|
const Wrapper$c = styled.div `
|
|
760
760
|
display: inline-block;
|
|
761
761
|
position: relative;
|
|
@@ -804,8 +804,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
|
|
|
804
804
|
return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
|
|
805
805
|
trigger || React.createElement(StyledIcon$4, { path: mdiInformationOutline }),
|
|
806
806
|
show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
|
|
807
|
-
};
|
|
808
|
-
|
|
807
|
+
};
|
|
808
|
+
|
|
809
809
|
const Wrapper$b = styled.label `
|
|
810
810
|
border-radius: 4px;
|
|
811
811
|
padding: 4px 0px 4px 6px;
|
|
@@ -891,8 +891,8 @@ const Checkbox = (_a) => {
|
|
|
891
891
|
children ? (React.createElement(Label$3, null,
|
|
892
892
|
children,
|
|
893
893
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
|
|
894
|
-
};
|
|
895
|
-
|
|
894
|
+
};
|
|
895
|
+
|
|
896
896
|
const SelectAll = styled.div `
|
|
897
897
|
padding: 8px 12px;
|
|
898
898
|
border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
@@ -937,8 +937,8 @@ const Checklist = (_a) => {
|
|
|
937
937
|
const checked = selected.includes(option.value);
|
|
938
938
|
return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
939
939
|
}))));
|
|
940
|
-
};
|
|
941
|
-
|
|
940
|
+
};
|
|
941
|
+
|
|
942
942
|
const Wrapper$a = styled.div `
|
|
943
943
|
border-radius: 4px;
|
|
944
944
|
height: 40px;
|
|
@@ -1001,8 +1001,8 @@ const Select = (_a) => {
|
|
|
1001
1001
|
return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
|
|
1002
1002
|
})),
|
|
1003
1003
|
React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
|
|
1004
|
-
};
|
|
1005
|
-
|
|
1004
|
+
};
|
|
1005
|
+
|
|
1006
1006
|
const DatePickerWrapper = styled.div `
|
|
1007
1007
|
display: flex;
|
|
1008
1008
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1071,8 +1071,8 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
|
|
|
1071
1071
|
React.createElement(Middle, null,
|
|
1072
1072
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
1073
1073
|
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
|
-
|
|
1074
|
+
};
|
|
1075
|
+
|
|
1076
1076
|
const Scrim$1 = styled.div `
|
|
1077
1077
|
position: ${({ $position }) => $position};
|
|
1078
1078
|
top: 0;
|
|
@@ -1158,8 +1158,8 @@ const Drawer = (_a) => {
|
|
|
1158
1158
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
1159
1159
|
primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
1160
1160
|
scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
|
|
1161
|
-
};
|
|
1162
|
-
|
|
1161
|
+
};
|
|
1162
|
+
|
|
1163
1163
|
const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
|
|
1164
1164
|
const LabelRow = styled.div `
|
|
1165
1165
|
display: flex;
|
|
@@ -1220,8 +1220,8 @@ const Field = (_a) => {
|
|
|
1220
1220
|
description ? React.createElement(Description, null, description) : null,
|
|
1221
1221
|
children,
|
|
1222
1222
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
1223
|
-
};
|
|
1224
|
-
|
|
1223
|
+
};
|
|
1224
|
+
|
|
1225
1225
|
const Wrapper$8 = styled.fieldset `
|
|
1226
1226
|
margin-inline-start: 0px;
|
|
1227
1227
|
margin-inline-end: 0px;
|
|
@@ -1255,8 +1255,8 @@ const FieldGroup = ({ children, label }) => {
|
|
|
1255
1255
|
return (React.createElement(Wrapper$8, null,
|
|
1256
1256
|
React.createElement(Label$1, null, label),
|
|
1257
1257
|
React.createElement(Content$1, null, children)));
|
|
1258
|
-
};
|
|
1259
|
-
|
|
1258
|
+
};
|
|
1259
|
+
|
|
1260
1260
|
const Dropzone = styled.div `
|
|
1261
1261
|
border-radius: 8px;
|
|
1262
1262
|
border-width: 1px;
|
|
@@ -1431,8 +1431,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
|
|
|
1431
1431
|
React.createElement(Content, null,
|
|
1432
1432
|
React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
|
|
1433
1433
|
message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
|
|
1434
|
-
};
|
|
1435
|
-
|
|
1434
|
+
};
|
|
1435
|
+
|
|
1436
1436
|
const getAgesFromDob = (dob) => {
|
|
1437
1437
|
let calculated_current_age = null;
|
|
1438
1438
|
let calculated_nearest_age = null;
|
|
@@ -1505,8 +1505,8 @@ const formatAsSsn = (number) => {
|
|
|
1505
1505
|
formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
|
|
1506
1506
|
}
|
|
1507
1507
|
return formatted_value;
|
|
1508
|
-
};
|
|
1509
|
-
|
|
1508
|
+
};
|
|
1509
|
+
|
|
1510
1510
|
const StyledInput = styled.input `
|
|
1511
1511
|
border: none !important;
|
|
1512
1512
|
background: none !important;
|
|
@@ -1691,8 +1691,8 @@ const Input$1 = (_a) => {
|
|
|
1691
1691
|
setShowOptions(false);
|
|
1692
1692
|
} }, s_value));
|
|
1693
1693
|
}))) : null));
|
|
1694
|
-
};
|
|
1695
|
-
|
|
1694
|
+
};
|
|
1695
|
+
|
|
1696
1696
|
const Wrapper$7 = styled.a `
|
|
1697
1697
|
color: ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
1698
1698
|
font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -1711,8 +1711,8 @@ Wrapper$7.defaultProps = { theme: EditableTheme };
|
|
|
1711
1711
|
const Link = (_a) => {
|
|
1712
1712
|
var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
1713
1713
|
return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
|
|
1714
|
-
};
|
|
1715
|
-
|
|
1714
|
+
};
|
|
1715
|
+
|
|
1716
1716
|
const dash = keyframes `
|
|
1717
1717
|
0% {
|
|
1718
1718
|
stroke-dasharray: 1, 160;
|
|
@@ -1746,8 +1746,8 @@ const Path = styled.path `
|
|
|
1746
1746
|
const Loader = () => {
|
|
1747
1747
|
return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
|
|
1748
1748
|
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
|
-
|
|
1749
|
+
};
|
|
1750
|
+
|
|
1751
1751
|
const Steps = styled.div `
|
|
1752
1752
|
padding: 20px;
|
|
1753
1753
|
border-bottom: 1px solid #e7e6e6;
|
|
@@ -1796,8 +1796,8 @@ const ProgressBar = ({ steps }) => {
|
|
|
1796
1796
|
step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
|
|
1797
1797
|
React.createElement(StepLabel, null, step.label)));
|
|
1798
1798
|
})));
|
|
1799
|
-
};
|
|
1800
|
-
|
|
1799
|
+
};
|
|
1800
|
+
|
|
1801
1801
|
const Wrapper$6 = styled.div `
|
|
1802
1802
|
position: fixed;
|
|
1803
1803
|
top: 0;
|
|
@@ -1897,8 +1897,8 @@ const Modal = (_a) => {
|
|
|
1897
1897
|
} },
|
|
1898
1898
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
1899
1899
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
|
|
1900
|
-
};
|
|
1901
|
-
|
|
1900
|
+
};
|
|
1901
|
+
|
|
1902
1902
|
const Wrapper$5 = styled.div `
|
|
1903
1903
|
position: relative;
|
|
1904
1904
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1980,8 +1980,8 @@ const MultiSelect = (_a) => {
|
|
|
1980
1980
|
showOptions ? (React.createElement(Options, null,
|
|
1981
1981
|
React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
|
|
1982
1982
|
showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
|
|
1983
|
-
};
|
|
1984
|
-
|
|
1983
|
+
};
|
|
1984
|
+
|
|
1985
1985
|
const Wrapper$4 = styled.div `
|
|
1986
1986
|
display: flex;
|
|
1987
1987
|
padding: 16px 30px;
|
|
@@ -2030,8 +2030,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
|
|
|
2030
2030
|
return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
|
|
2031
2031
|
}),
|
|
2032
2032
|
menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
|
|
2033
|
-
};
|
|
2034
|
-
|
|
2033
|
+
};
|
|
2034
|
+
|
|
2035
2035
|
const Wrapper$3 = styled.nav `
|
|
2036
2036
|
box-sizing: border-box;
|
|
2037
2037
|
display: flex;
|
|
@@ -2065,8 +2065,8 @@ const Pagination = (_a) => {
|
|
|
2065
2065
|
value: `${p}`,
|
|
2066
2066
|
})), value: `${currentPage}` }),
|
|
2067
2067
|
React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
|
|
2068
|
-
};
|
|
2069
|
-
|
|
2068
|
+
};
|
|
2069
|
+
|
|
2070
2070
|
const Wrapper$2 = styled.label `
|
|
2071
2071
|
border-radius: 4px;
|
|
2072
2072
|
padding: 4px 0px 4px 6px;
|
|
@@ -2150,16 +2150,16 @@ const Radio = (_a) => {
|
|
|
2150
2150
|
React.createElement(Label, null,
|
|
2151
2151
|
children,
|
|
2152
2152
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
|
|
2153
|
-
};
|
|
2154
|
-
|
|
2153
|
+
};
|
|
2154
|
+
|
|
2155
2155
|
const RadioList = (_a) => {
|
|
2156
2156
|
var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
|
|
2157
2157
|
return (React.createElement(React.Fragment, null, options.map((option) => {
|
|
2158
2158
|
const label = option.label || option.value;
|
|
2159
2159
|
return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
|
|
2160
2160
|
})));
|
|
2161
|
-
};
|
|
2162
|
-
|
|
2161
|
+
};
|
|
2162
|
+
|
|
2163
2163
|
const StyledTable = styled.table `
|
|
2164
2164
|
width: 100%;
|
|
2165
2165
|
margin-top: 1px;
|
|
@@ -2238,8 +2238,8 @@ const Table = (_a) => {
|
|
|
2238
2238
|
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
2239
|
})));
|
|
2240
2240
|
}))) : null));
|
|
2241
|
-
};
|
|
2242
|
-
|
|
2241
|
+
};
|
|
2242
|
+
|
|
2243
2243
|
const Wrapper$1 = styled.div `
|
|
2244
2244
|
display: flex;
|
|
2245
2245
|
box-sizing: border-box;
|
|
@@ -2298,8 +2298,8 @@ const Tabs = (_a) => {
|
|
|
2298
2298
|
label));
|
|
2299
2299
|
})));
|
|
2300
2300
|
};
|
|
2301
|
-
Tabs.defaultProps = {};
|
|
2302
|
-
|
|
2301
|
+
Tabs.defaultProps = {};
|
|
2302
|
+
|
|
2303
2303
|
const Track = styled.div `
|
|
2304
2304
|
height: 24px;
|
|
2305
2305
|
border-radius: 12px;
|
|
@@ -2329,8 +2329,8 @@ const Toggle = (_a) => {
|
|
|
2329
2329
|
React.createElement(Handle, { "$on": on },
|
|
2330
2330
|
React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? mdiCheck : mdiClose, size: '16px' }))));
|
|
2331
2331
|
};
|
|
2332
|
-
Toggle.defaultProps = {};
|
|
2333
|
-
|
|
2332
|
+
Toggle.defaultProps = {};
|
|
2333
|
+
|
|
2334
2334
|
const Container = styled.div `
|
|
2335
2335
|
width: 100%;
|
|
2336
2336
|
padding: 40px auto;
|
|
@@ -2365,7 +2365,7 @@ const ZeroState = (_a) => {
|
|
|
2365
2365
|
React.createElement(Heading, { children: title, type: 'tertiary' }),
|
|
2366
2366
|
description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
|
|
2367
2367
|
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
|
|
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
|
|
@@ -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 */
|