@hexure/ui 1.12.0 → 1.12.1
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 +164 -158
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +116 -110
- package/dist/esm/index.js.map +1 -1
- 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,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;
|
|
@@ -850,24 +850,27 @@ const Input$2 = styled.input `
|
|
|
850
850
|
}
|
|
851
851
|
`;
|
|
852
852
|
const Check$1 = styled.span `
|
|
853
|
-
height:
|
|
854
|
-
width:
|
|
853
|
+
height: 17px;
|
|
854
|
+
width: 17px;
|
|
855
855
|
background-color: #fff;
|
|
856
856
|
border-width: 2px;
|
|
857
857
|
border-style: solid;
|
|
858
858
|
border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
|
|
859
|
+
box-sizing: border-box;
|
|
860
|
+
position: relative;
|
|
859
861
|
&:after {
|
|
860
862
|
content: "";
|
|
861
863
|
position: absolute;
|
|
862
|
-
left:
|
|
863
|
-
top:
|
|
864
|
-
width:
|
|
865
|
-
height:
|
|
864
|
+
left: 3px;
|
|
865
|
+
top: 0px;
|
|
866
|
+
width: 7px;
|
|
867
|
+
height: 12px;
|
|
866
868
|
border: solid white;
|
|
867
869
|
border-width: 0 3px 3px 0;
|
|
868
870
|
-webkit-transform: rotate(45deg);
|
|
869
871
|
-ms-transform: rotate(45deg);
|
|
870
872
|
transform: rotate(45deg);
|
|
873
|
+
box-sizing: border-box;
|
|
871
874
|
display: none;
|
|
872
875
|
}
|
|
873
876
|
`;
|
|
@@ -888,8 +891,8 @@ const Checkbox = (_a) => {
|
|
|
888
891
|
children ? (React.createElement(Label$3, null,
|
|
889
892
|
children,
|
|
890
893
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
|
|
891
|
-
};
|
|
892
|
-
|
|
894
|
+
};
|
|
895
|
+
|
|
893
896
|
const SelectAll = styled.div `
|
|
894
897
|
padding: 8px 12px;
|
|
895
898
|
border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
@@ -934,8 +937,8 @@ const Checklist = (_a) => {
|
|
|
934
937
|
const checked = selected.includes(option.value);
|
|
935
938
|
return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
936
939
|
}))));
|
|
937
|
-
};
|
|
938
|
-
|
|
940
|
+
};
|
|
941
|
+
|
|
939
942
|
const Wrapper$a = styled.div `
|
|
940
943
|
border-radius: 4px;
|
|
941
944
|
height: 40px;
|
|
@@ -998,8 +1001,8 @@ const Select = (_a) => {
|
|
|
998
1001
|
return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
|
|
999
1002
|
})),
|
|
1000
1003
|
React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
|
|
1001
|
-
};
|
|
1002
|
-
|
|
1004
|
+
};
|
|
1005
|
+
|
|
1003
1006
|
const DatePickerWrapper = styled.div `
|
|
1004
1007
|
display: flex;
|
|
1005
1008
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1068,8 +1071,8 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
|
|
|
1068
1071
|
React.createElement(Middle, null,
|
|
1069
1072
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
1070
1073
|
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
|
|
1071
|
-
};
|
|
1072
|
-
|
|
1074
|
+
};
|
|
1075
|
+
|
|
1073
1076
|
const Scrim$1 = styled.div `
|
|
1074
1077
|
position: ${({ $position }) => $position};
|
|
1075
1078
|
top: 0;
|
|
@@ -1155,8 +1158,8 @@ const Drawer = (_a) => {
|
|
|
1155
1158
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
1156
1159
|
primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
1157
1160
|
scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
|
|
1158
|
-
};
|
|
1159
|
-
|
|
1161
|
+
};
|
|
1162
|
+
|
|
1160
1163
|
const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
|
|
1161
1164
|
const LabelRow = styled.div `
|
|
1162
1165
|
display: flex;
|
|
@@ -1217,8 +1220,8 @@ const Field = (_a) => {
|
|
|
1217
1220
|
description ? React.createElement(Description, null, description) : null,
|
|
1218
1221
|
children,
|
|
1219
1222
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
1220
|
-
};
|
|
1221
|
-
|
|
1223
|
+
};
|
|
1224
|
+
|
|
1222
1225
|
const Wrapper$8 = styled.fieldset `
|
|
1223
1226
|
margin-inline-start: 0px;
|
|
1224
1227
|
margin-inline-end: 0px;
|
|
@@ -1252,8 +1255,8 @@ const FieldGroup = ({ children, label }) => {
|
|
|
1252
1255
|
return (React.createElement(Wrapper$8, null,
|
|
1253
1256
|
React.createElement(Label$1, null, label),
|
|
1254
1257
|
React.createElement(Content$1, null, children)));
|
|
1255
|
-
};
|
|
1256
|
-
|
|
1258
|
+
};
|
|
1259
|
+
|
|
1257
1260
|
const Dropzone = styled.div `
|
|
1258
1261
|
border-radius: 8px;
|
|
1259
1262
|
border-width: 1px;
|
|
@@ -1428,8 +1431,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
|
|
|
1428
1431
|
React.createElement(Content, null,
|
|
1429
1432
|
React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
|
|
1430
1433
|
message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
|
|
1431
|
-
};
|
|
1432
|
-
|
|
1434
|
+
};
|
|
1435
|
+
|
|
1433
1436
|
const getAgesFromDob = (dob) => {
|
|
1434
1437
|
let calculated_current_age = null;
|
|
1435
1438
|
let calculated_nearest_age = null;
|
|
@@ -1502,8 +1505,8 @@ const formatAsSsn = (number) => {
|
|
|
1502
1505
|
formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
|
|
1503
1506
|
}
|
|
1504
1507
|
return formatted_value;
|
|
1505
|
-
};
|
|
1506
|
-
|
|
1508
|
+
};
|
|
1509
|
+
|
|
1507
1510
|
const StyledInput = styled.input `
|
|
1508
1511
|
border: none !important;
|
|
1509
1512
|
background: none !important;
|
|
@@ -1688,8 +1691,8 @@ const Input$1 = (_a) => {
|
|
|
1688
1691
|
setShowOptions(false);
|
|
1689
1692
|
} }, s_value));
|
|
1690
1693
|
}))) : null));
|
|
1691
|
-
};
|
|
1692
|
-
|
|
1694
|
+
};
|
|
1695
|
+
|
|
1693
1696
|
const Wrapper$7 = styled.a `
|
|
1694
1697
|
color: ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
1695
1698
|
font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -1708,8 +1711,8 @@ Wrapper$7.defaultProps = { theme: EditableTheme };
|
|
|
1708
1711
|
const Link = (_a) => {
|
|
1709
1712
|
var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
1710
1713
|
return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
|
|
1711
|
-
};
|
|
1712
|
-
|
|
1714
|
+
};
|
|
1715
|
+
|
|
1713
1716
|
const dash = keyframes `
|
|
1714
1717
|
0% {
|
|
1715
1718
|
stroke-dasharray: 1, 160;
|
|
@@ -1743,8 +1746,8 @@ const Path = styled.path `
|
|
|
1743
1746
|
const Loader = () => {
|
|
1744
1747
|
return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
|
|
1745
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' })));
|
|
1746
|
-
};
|
|
1747
|
-
|
|
1749
|
+
};
|
|
1750
|
+
|
|
1748
1751
|
const Steps = styled.div `
|
|
1749
1752
|
padding: 20px;
|
|
1750
1753
|
border-bottom: 1px solid #e7e6e6;
|
|
@@ -1793,8 +1796,8 @@ const ProgressBar = ({ steps }) => {
|
|
|
1793
1796
|
step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
|
|
1794
1797
|
React.createElement(StepLabel, null, step.label)));
|
|
1795
1798
|
})));
|
|
1796
|
-
};
|
|
1797
|
-
|
|
1799
|
+
};
|
|
1800
|
+
|
|
1798
1801
|
const Wrapper$6 = styled.div `
|
|
1799
1802
|
position: fixed;
|
|
1800
1803
|
top: 0;
|
|
@@ -1894,8 +1897,8 @@ const Modal = (_a) => {
|
|
|
1894
1897
|
} },
|
|
1895
1898
|
secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
1896
1899
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
|
|
1897
|
-
};
|
|
1898
|
-
|
|
1900
|
+
};
|
|
1901
|
+
|
|
1899
1902
|
const Wrapper$5 = styled.div `
|
|
1900
1903
|
position: relative;
|
|
1901
1904
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1977,8 +1980,8 @@ const MultiSelect = (_a) => {
|
|
|
1977
1980
|
showOptions ? (React.createElement(Options, null,
|
|
1978
1981
|
React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
|
|
1979
1982
|
showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
|
|
1980
|
-
};
|
|
1981
|
-
|
|
1983
|
+
};
|
|
1984
|
+
|
|
1982
1985
|
const Wrapper$4 = styled.div `
|
|
1983
1986
|
display: flex;
|
|
1984
1987
|
padding: 16px 30px;
|
|
@@ -2027,8 +2030,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
|
|
|
2027
2030
|
return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
|
|
2028
2031
|
}),
|
|
2029
2032
|
menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
|
|
2030
|
-
};
|
|
2031
|
-
|
|
2033
|
+
};
|
|
2034
|
+
|
|
2032
2035
|
const Wrapper$3 = styled.nav `
|
|
2033
2036
|
box-sizing: border-box;
|
|
2034
2037
|
display: flex;
|
|
@@ -2062,8 +2065,8 @@ const Pagination = (_a) => {
|
|
|
2062
2065
|
value: `${p}`,
|
|
2063
2066
|
})), value: `${currentPage}` }),
|
|
2064
2067
|
React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
|
|
2065
|
-
};
|
|
2066
|
-
|
|
2068
|
+
};
|
|
2069
|
+
|
|
2067
2070
|
const Wrapper$2 = styled.label `
|
|
2068
2071
|
border-radius: 4px;
|
|
2069
2072
|
padding: 4px 0px 4px 6px;
|
|
@@ -2110,21 +2113,24 @@ const Input = styled.input `
|
|
|
2110
2113
|
}
|
|
2111
2114
|
`;
|
|
2112
2115
|
const Check = styled.span `
|
|
2113
|
-
height:
|
|
2114
|
-
width:
|
|
2116
|
+
height: 17px;
|
|
2117
|
+
width: 17px;
|
|
2115
2118
|
border-radius: 50%;
|
|
2116
2119
|
background-color: #fff;
|
|
2117
2120
|
border-width: 2px;
|
|
2118
2121
|
border-style: solid;
|
|
2119
2122
|
border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
|
|
2123
|
+
box-sizing: border-box;
|
|
2124
|
+
position: relative;
|
|
2120
2125
|
&:after {
|
|
2121
2126
|
content: "";
|
|
2122
2127
|
position: absolute;
|
|
2123
|
-
top:
|
|
2124
|
-
left:
|
|
2125
|
-
width:
|
|
2126
|
-
height:
|
|
2128
|
+
top: 2px;
|
|
2129
|
+
left: 2px;
|
|
2130
|
+
width: 9px;
|
|
2131
|
+
height: 9px;
|
|
2127
2132
|
border-radius: 50%;
|
|
2133
|
+
box-sizing: border-box;
|
|
2128
2134
|
display: none;
|
|
2129
2135
|
}
|
|
2130
2136
|
`;
|
|
@@ -2144,16 +2150,16 @@ const Radio = (_a) => {
|
|
|
2144
2150
|
React.createElement(Label, null,
|
|
2145
2151
|
children,
|
|
2146
2152
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
|
|
2147
|
-
};
|
|
2148
|
-
|
|
2153
|
+
};
|
|
2154
|
+
|
|
2149
2155
|
const RadioList = (_a) => {
|
|
2150
2156
|
var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
|
|
2151
2157
|
return (React.createElement(React.Fragment, null, options.map((option) => {
|
|
2152
2158
|
const label = option.label || option.value;
|
|
2153
2159
|
return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
|
|
2154
2160
|
})));
|
|
2155
|
-
};
|
|
2156
|
-
|
|
2161
|
+
};
|
|
2162
|
+
|
|
2157
2163
|
const StyledTable = styled.table `
|
|
2158
2164
|
width: 100%;
|
|
2159
2165
|
margin-top: 1px;
|
|
@@ -2232,8 +2238,8 @@ const Table = (_a) => {
|
|
|
2232
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'));
|
|
2233
2239
|
})));
|
|
2234
2240
|
}))) : null));
|
|
2235
|
-
};
|
|
2236
|
-
|
|
2241
|
+
};
|
|
2242
|
+
|
|
2237
2243
|
const Wrapper$1 = styled.div `
|
|
2238
2244
|
display: flex;
|
|
2239
2245
|
box-sizing: border-box;
|
|
@@ -2292,8 +2298,8 @@ const Tabs = (_a) => {
|
|
|
2292
2298
|
label));
|
|
2293
2299
|
})));
|
|
2294
2300
|
};
|
|
2295
|
-
Tabs.defaultProps = {};
|
|
2296
|
-
|
|
2301
|
+
Tabs.defaultProps = {};
|
|
2302
|
+
|
|
2297
2303
|
const Track = styled.div `
|
|
2298
2304
|
height: 24px;
|
|
2299
2305
|
border-radius: 12px;
|
|
@@ -2323,8 +2329,8 @@ const Toggle = (_a) => {
|
|
|
2323
2329
|
React.createElement(Handle, { "$on": on },
|
|
2324
2330
|
React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? mdiCheck : mdiClose, size: '16px' }))));
|
|
2325
2331
|
};
|
|
2326
|
-
Toggle.defaultProps = {};
|
|
2327
|
-
|
|
2332
|
+
Toggle.defaultProps = {};
|
|
2333
|
+
|
|
2328
2334
|
const Container = styled.div `
|
|
2329
2335
|
width: 100%;
|
|
2330
2336
|
padding: 40px auto;
|
|
@@ -2359,7 +2365,7 @@ const ZeroState = (_a) => {
|
|
|
2359
2365
|
React.createElement(Heading, { children: title, type: 'tertiary' }),
|
|
2360
2366
|
description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
|
|
2361
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 }))));
|
|
2362
|
-
};
|
|
2363
|
-
|
|
2364
|
-
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 };
|
|
2365
|
-
//# 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
|