@jobber/components 4.67.2-JOB-84126.13 → 4.67.2-pre.26
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/AnimatedSwitcher/index.js +2 -2
- package/dist/{AnimatedSwitcher-d1e1ddcf.js → AnimatedSwitcher-04efde84.js} +1 -1
- package/dist/Autocomplete/index.js +0 -0
- package/dist/Avatar/index.js +2 -3
- package/dist/{Avatar-76a799fa.js → Avatar-911b5de9.js} +1 -4
- package/dist/Banner/index.js +4 -9
- package/dist/Button/index.js +3 -4
- package/dist/Button-3c32e0c3.js +54 -0
- package/dist/ButtonDismiss/index.js +4 -5
- package/dist/{ButtonDismiss-2b98d075.js → ButtonDismiss-7a4d0c92.js} +1 -1
- package/dist/Card/index.js +7 -8
- package/dist/Card-b0199e40.js +88 -0
- package/dist/Checkbox/index.js +5 -7
- package/dist/{Checkbox-ad7ec2e7.js → Checkbox-1e21bd60.js} +5 -8
- package/dist/Chip/index.js +8 -7
- package/dist/Chip-3b122d7f.js +86 -0
- package/dist/Chips/index.js +12 -16
- package/dist/ClientOnly-a5ca0b64.js +23 -0
- package/dist/Combobox/index.js +11 -10
- package/dist/{Combobox-b6053eb7.js → Combobox-9ae11ead.js} +9 -22
- package/dist/ConfirmationModal/index.js +14 -13
- package/dist/{ConfirmationModal-0f85d96c.js → ConfirmationModal-844e1e5b.js} +3 -3
- package/dist/Content/index.js +1 -2
- package/dist/{Content-2ca1ffe1.js → Content-4bda88fb.js} +0 -5
- package/dist/DataDump/index.js +9 -10
- package/dist/DataList/components/DataListHeader/DataListHeaderCheckbox.d.ts +1 -2
- package/dist/DataList/components/DataListHeaderTile/DataListSortingArrows.d.ts +1 -1
- package/dist/DataList/hooks/useMediaQuery.d.ts +3 -1
- package/dist/DataList/index.js +0 -0
- package/dist/DataTable/DataTable.d.ts +1 -1
- package/dist/DataTable/index.js +0 -0
- package/dist/DatePicker/index.js +4 -5
- package/dist/DatePicker-75dbcdf4.js +131 -0
- package/dist/DescriptionList/index.js +1 -4
- package/dist/Disclosure/index.js +2 -5
- package/dist/Divider/index.js +0 -3
- package/dist/Drawer/index.js +5 -10
- package/dist/Emphasis/index.js +2 -3
- package/dist/{Emphasis-b2d1b3aa.js → Emphasis-5daac23b.js} +1 -1
- package/dist/FeatureSwitch/index.js +11 -13
- package/dist/Flex/index.js +6 -4
- package/dist/Form/index.js +1 -1
- package/dist/FormField/index.js +0 -0
- package/dist/FormField-3ffaca91.js +252 -0
- package/dist/FormatDate/index.js +1 -1
- package/dist/FormatEmail/index.js +0 -3
- package/dist/FormatFile/index.js +17 -17
- package/dist/FormatFile-dd5e571b.js +116 -0
- package/dist/FormatTime/FormatTime.d.ts +1 -2
- package/dist/FormatTime/index.js +11 -6
- package/dist/Gallery/index.js +18 -20
- package/dist/Glimmer/index.js +3 -4
- package/dist/Glimmer-db756e90.js +68 -0
- package/dist/Grid/index.js +0 -7
- package/dist/Heading/index.js +2 -3
- package/dist/{Heading-0f4ecb0c.js → Heading-4c8f8bf1.js} +1 -1
- package/dist/Icon/index.js +1 -1
- package/dist/InlineLabel/index.js +2 -3
- package/dist/InlineLabel-3fe9f933.js +25 -0
- package/dist/InputAvatar/index.js +8 -12
- package/dist/InputDate/index.js +0 -0
- package/dist/InputEmail/index.js +0 -0
- package/dist/InputFile/InputFile.d.ts +5 -1
- package/dist/InputFile/index.js +6 -8
- package/dist/{InputFile-540c1657.js → InputFile-df1d2631.js} +8 -11
- package/dist/InputGroup/index.js +1 -2
- package/dist/InputGroup-e42699cf.js +30 -0
- package/dist/InputNumber/index.js +0 -0
- package/dist/{InputNumber-ef949161.js → InputNumber-15f529b3.js} +1 -1
- package/dist/InputPassword/index.js +0 -0
- package/dist/InputPhoneNumber/index.js +0 -0
- package/dist/InputText/index.js +0 -0
- package/dist/InputText/useSafeLayoutEffect.d.ts +2 -0
- package/dist/{InputText-9e159467.js → InputText-f2631528.js} +3 -2
- package/dist/InputTime/InputTime.d.ts +3 -1
- package/dist/InputTime/InputTime.disabledTest.d.ts +1 -0
- package/dist/InputTime/InternalInputTime.d.ts +3 -0
- package/dist/InputTime/SupportsTimePolyfill.d.ts +2 -0
- package/dist/InputTime/TimeInputPolyfill.client.d.ts +2 -0
- package/dist/InputTime/index.js +0 -0
- package/dist/InputValidation/index.js +4 -5
- package/dist/{InputValidation-179f0926.js → InputValidation-12e21b1d.js} +2 -5
- package/dist/LightBox/ClientOnly.d.ts +6 -0
- package/dist/LightBox/LightBox.d.ts +2 -2
- package/dist/LightBox/index.js +6 -6
- package/dist/{LightBox-3f4dbc33.js → LightBox-f5dab250.js} +5 -6
- package/dist/List/index.js +9 -15
- package/dist/Markdown/Markdown.d.ts +1 -1
- package/dist/Markdown/index.js +8 -8
- package/dist/Markdown-737108cc.js +90 -0
- package/dist/Menu/Menu.d.ts +4 -4
- package/dist/Menu/index.js +5 -6
- package/dist/{Menu-d7ea093c.js → Menu-cd087c2d.js} +7 -10
- package/dist/Modal/Modal.d.ts +2 -2
- package/dist/Modal/index.js +7 -7
- package/dist/{Modal-70daa0e2.js → Modal-a41b9fc0.js} +6 -9
- package/dist/MultiSelect/index.js +5 -11
- package/dist/{Option-290b5594.js → Option-0287aa95.js} +1 -1
- package/dist/Page/index.js +12 -14
- package/dist/Popover/Popover.d.ts +2 -2
- package/dist/Popover/index.js +8 -8
- package/dist/ProgressBar/index.js +1 -2
- package/dist/ProgressBar-77a1d2dd.js +38 -0
- package/dist/RadioGroup/index.js +3 -5
- package/dist/RadioGroup-390ae5c7.js +44 -0
- package/dist/RecurringSelect/components/DayOfMonthSelect.d.ts +2 -2
- package/dist/RecurringSelect/components/WeeklySelect.d.ts +2 -2
- package/dist/RecurringSelect/index.js +0 -0
- package/dist/Select/index.js +0 -0
- package/dist/Spinner/index.js +1 -2
- package/dist/Spinner-ca04123d.js +21 -0
- package/dist/StatusLabel/index.js +2 -5
- package/dist/SupportsTimePolyfill-d4bc6195.js +21 -0
- package/dist/Switch/index.js +2 -3
- package/dist/Switch-dce18976.js +53 -0
- package/dist/Table/index.js +2 -7
- package/dist/Tabs/index.js +1 -4
- package/dist/Text/index.js +2 -3
- package/dist/{Text-4a2bc89f.js → Text-9526cc9a.js} +1 -1
- package/dist/TimeInputPolyfill.client-c254e5ea.js +687 -0
- package/dist/Toast/index.js +3 -6
- package/dist/Tooltip/index.js +3 -2
- package/dist/{Tooltip-6b12f1c2.js → Tooltip-b6fe3aed.js} +14 -12
- package/dist/Typography/index.js +1 -2
- package/dist/Typography-bdc97f73.js +43 -0
- package/dist/styles.css +8107 -0
- package/dist/useSafeLayoutEffect-e4942a5e.js +16 -0
- package/package.json +4 -4
- package/rollup.config.js +3 -1
- package/dist/Button-163a0641.js +0 -57
- package/dist/Card-3178033c.js +0 -93
- package/dist/Chip-168acf3e.js +0 -89
- package/dist/DatePicker-c18f1739.js +0 -134
- package/dist/FormField-181efe29.js +0 -0
- package/dist/FormatFile-3b650d02.js +0 -121
- package/dist/Glimmer-cfa92a88.js +0 -77
- package/dist/InlineLabel-9a517c19.js +0 -28
- package/dist/InputGroup-8d4fd4eb.js +0 -33
- package/dist/Markdown-96070121.js +0 -62
- package/dist/ProgressBar-b68edc8f.js +0 -43
- package/dist/RadioGroup-ebaa4f87.js +0 -47
- package/dist/Spinner-9d8fc7ff.js +0 -24
- package/dist/Switch-b85272bf.js +0 -56
- package/dist/Typography-973b122e.js +0 -62
- package/dist/style-inject.es-9d2f5f4e.js +0 -30
- /package/dist/{FormatDate-70ea5b43.js → FormatDate-21aecc0a.js} +0 -0
- /package/dist/{Icon-405a216c.js → Icon-1da9c7e5.js} +0 -0
- /package/dist/{tslib.es6-5b8768b7.js → tslib.es6-f8fe7ef6.js} +0 -0
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var classnames = require('classnames');
|
|
5
|
-
var getHumanReadableFileSize = require('filesize');
|
|
6
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
7
|
-
var Button = require('./Button-163a0641.js');
|
|
8
|
-
var ConfirmationModal = require('./ConfirmationModal-0f85d96c.js');
|
|
9
|
-
var Glimmer = require('./Glimmer-cfa92a88.js');
|
|
10
|
-
var Icon = require('./Icon-405a216c.js');
|
|
11
|
-
var Typography = require('./Typography-973b122e.js');
|
|
12
|
-
var Text = require('./Text-4a2bc89f.js');
|
|
13
|
-
var ProgressBar = require('./ProgressBar-b68edc8f.js');
|
|
14
|
-
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
-
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
19
|
-
var getHumanReadableFileSize__default = /*#__PURE__*/_interopDefaultLegacy(getHumanReadableFileSize);
|
|
20
|
-
|
|
21
|
-
var css_248z$2 = ":root {\n --file-card--height: calc(var(--space-base) * 3.5);\n --file-card--background-color: var(--color-white);\n --file-card--header-background-color: var(--color-greyBlue--lighter);\n --file-card--content-background-color: var(--color-white);\n --file-card--border-color: var(--color-border);\n --file-card--accent-color: var(--color-grey);\n --file-card--base-padding: var(--space-small);\n}\n\n.cx4iQqlNNvc- {\n display: grid;\n grid-template-columns: auto -webkit-max-content;\n grid-template-columns: auto max-content;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--file-card--base-padding);\n gap: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n padding-right: calc(16px / 2);\n padding-right: var(--space-small);\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--file-card--border-color);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--file-card--background-color);\n}\n\n.nSaog7-7Jn0-,\n.cx4iQqlNNvc- {\n position: relative;\n}\n\n._9jVt97W52JY- {\n display: grid;\n grid-template-columns: -webkit-max-content auto;\n grid-template-columns: max-content auto;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--file-card--base-padding);\n gap: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n text-align: left;\n background-color: var(--color-transparent);\n}\n\n.z-kUGMs0Yfg- {\n width: 168px;\n height: 168px;\n}\n\n.x1Ql0enaIxY- {\n width: 56px;\n height: 56px;\n}\n\n.il9-MCeoBts- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.cx4iQqlNNvc- ._9jVt97W52JY- {\n outline: none;\n}\n\n.nSaog7-7Jn0- ._9jVt97W52JY-:focus {\n box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n.nSaog7-7Jn0- .il9-MCeoBts- {\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n}\n\n.cx4iQqlNNvc- ._9jVt97W52JY-:focus::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: var(--shadow-focus);\n}\n\n.cx4iQqlNNvc- .il9-MCeoBts- {\n border-right: none;\n border-bottom-left-radius: calc(16px / 8);\n border-bottom-left-radius: var(--radius-base);\n border-top-left-radius: calc(16px / 8);\n border-top-left-radius: var(--radius-base);\n}\n\n.O9EG-xJYVco- {\n cursor: pointer;\n}\n\n.QmrRp5CTpGU- .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.32);\n background-color: var(--color-overlay);\n opacity: 0;\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.QmrRp5CTpGU-:hover .il9-MCeoBts-::after,\n.QmrRp5CTpGU-:focus .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n opacity: 1;\n}\n\n.N5qVYfi1Pgo- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n box-sizing: border-box;\n padding: calc(16px / 2);\n padding: var(--file-card--base-padding);\n}\n\n.TyXXZnJuVwo- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n min-width: 0;\n}\n\n.TyXXZnJuVwo- p {\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.nSaog7-7Jn0- ._7wDO6nPXy-g- {\n position: absolute;\n top: calc(16px / 4);\n top: var(--space-smaller);\n right: calc(16px / 4);\n right: var(--space-smaller);\n}\n\n.sgUJuNv0rUE- ~ ._7wDO6nPXy-g- {\n visibility: hidden;\n}\n\n._7wDO6nPXy-g-:focus-within,\n._7wDO6nPXy-g-:hover,\n.sgUJuNv0rUE-:hover ~ ._7wDO6nPXy-g-,\n.sgUJuNv0rUE-:focus ~ ._7wDO6nPXy-g- {\n visibility: visible;\n}\n";
|
|
22
|
-
var styles$2 = {"expanded":"cx4iQqlNNvc-","compact":"nSaog7-7Jn0-","wrapper":"_9jVt97W52JY-","large":"z-kUGMs0Yfg-","base":"x1Ql0enaIxY-","thumbnail":"il9-MCeoBts-","clickable":"O9EG-xJYVco-","hoverable":"QmrRp5CTpGU-","progress":"N5qVYfi1Pgo-","contentBlock":"TyXXZnJuVwo-","deleteButton":"_7wDO6nPXy-g-","deleteable":"sgUJuNv0rUE-"};
|
|
23
|
-
styleInject_es.styleInject(css_248z$2);
|
|
24
|
-
|
|
25
|
-
function FormatFileDeleteButton({ size, onDelete }) {
|
|
26
|
-
const buttonSize = size === "base" ? "small" : "base";
|
|
27
|
-
const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false);
|
|
28
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
29
|
-
React__default["default"].createElement(Button.Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
|
|
30
|
-
React__default["default"].createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
var css_248z$1 = ".M9Y7sOk6lTc- {\n display: grid;\n grid-template-columns: auto;\n grid-template-rows: auto -webkit-max-content;\n grid-template-rows: auto max-content;\n width: inherit;\n height: inherit;\n -ms-flex-align: center;\n align-items: center;\n justify-items: center;\n}\n\n.E4wclxY71oM-:not(.yReSfaruAh0-) {\n -ms-flex-align: end;\n align-items: end;\n}\n\n.YXN92rsh2eU- {\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n}\n\n.psaqxO2Lu7E- .YXN92rsh2eU- {\n padding: calc(16px / 4);\n padding: var(--space-smaller);\n font-size: calc(\n (16px * 1) * 0.625\n );\n font-size: calc(\n calc(16px * 1) * 0.625\n );\n font-size: var(--typography--fontSize-smaller);\n}\n\n.yReSfaruAh0- .YXN92rsh2eU- {\n position: absolute;\n bottom: 0;\n left: 0;\n padding: calc(16px / 2);\n padding: var(--space-small);\n font-size: calc((16px * 1) * 0.75);\n font-size: calc(calc(16px * 1) * 0.75);\n font-size: var(--typography--fontSize-small);\n}\n";
|
|
34
|
-
var styles$1 = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
|
|
35
|
-
styleInject_es.styleInject(css_248z$1);
|
|
36
|
-
|
|
37
|
-
var css_248z = "._62D0xyydQwo- {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n -webkit-animation: _5GIEBejwNJc- 200ms ease;\n animation: _5GIEBejwNJc- 200ms ease;\n}\n\n.a5EQqLlJmCk- {\n display: none;\n}\n\n@-webkit-keyframes _5GIEBejwNJc- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes _5GIEBejwNJc- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
|
|
38
|
-
var styles = {"image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
|
|
39
|
-
styleInject_es.styleInject(css_248z);
|
|
40
|
-
|
|
41
|
-
function InternalThumbnailImage({ file }) {
|
|
42
|
-
const { name, src } = file;
|
|
43
|
-
const [imageSource, setImageSource] = React.useState();
|
|
44
|
-
const [imageLoaded, setImageLoaded] = React.useState(false);
|
|
45
|
-
if (!imageSource) {
|
|
46
|
-
src().then(url => setImageSource(url));
|
|
47
|
-
}
|
|
48
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
49
|
-
!imageLoaded && React__default["default"].createElement(Glimmer.Glimmer, { size: "auto" }),
|
|
50
|
-
React__default["default"].createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames__default["default"](styles.image, { [styles.hidden]: !imageLoaded }) })));
|
|
51
|
-
function handleImageLoad() {
|
|
52
|
-
setImageLoaded(true);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function InternalThumbnail({ compact = false, size, file, }) {
|
|
57
|
-
const { name, type } = file;
|
|
58
|
-
const iconName = getIconNameFromType(type);
|
|
59
|
-
const hasName = Boolean(name) && compact;
|
|
60
|
-
if (type.startsWith("image/")) {
|
|
61
|
-
return React__default["default"].createElement(InternalThumbnailImage, { file: file });
|
|
62
|
-
}
|
|
63
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.content, styles$1[size], {
|
|
64
|
-
[styles$1.hasName]: hasName,
|
|
65
|
-
}) },
|
|
66
|
-
React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue", size: size }),
|
|
67
|
-
hasName && (React__default["default"].createElement("div", { className: styles$1.fileName },
|
|
68
|
-
React__default["default"].createElement(Typography.Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
|
|
69
|
-
}
|
|
70
|
-
function getIconNameFromType(mimeType) {
|
|
71
|
-
if (mimeType.startsWith("image/"))
|
|
72
|
-
return "camera";
|
|
73
|
-
if (mimeType.startsWith("video/"))
|
|
74
|
-
return "video";
|
|
75
|
-
switch (mimeType) {
|
|
76
|
-
case "application/pdf":
|
|
77
|
-
return "pdf";
|
|
78
|
-
case "application/vnd.ms-excel":
|
|
79
|
-
return "excel";
|
|
80
|
-
default:
|
|
81
|
-
return "file";
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
|
|
86
|
-
const isComplete = file.progress >= 1;
|
|
87
|
-
const fileSize = getHumanReadableFileSize__default["default"](file.size);
|
|
88
|
-
const wrapperClassNames = classnames__default["default"](styles$2[display], {
|
|
89
|
-
[styles$2[displaySize]]: display === "compact",
|
|
90
|
-
});
|
|
91
|
-
const DetailsContainer = isComplete && onClick ? "button" : "div";
|
|
92
|
-
const detailsClassNames = classnames__default["default"](styles$2.wrapper, {
|
|
93
|
-
[styles$2[displaySize]]: display === "compact",
|
|
94
|
-
[styles$2.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
|
|
95
|
-
[styles$2.clickable]: onClick,
|
|
96
|
-
[styles$2.deleteable]: display === "compact",
|
|
97
|
-
});
|
|
98
|
-
const thumbnailContainerClassNames = classnames__default["default"](styles$2.thumbnail, styles$2[displaySize]);
|
|
99
|
-
return (React__default["default"].createElement("div", { className: wrapperClassNames },
|
|
100
|
-
React__default["default"].createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
|
|
101
|
-
React__default["default"].createElement("div", { className: thumbnailContainerClassNames },
|
|
102
|
-
React__default["default"].createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
|
|
103
|
-
!isComplete && (React__default["default"].createElement("div", { className: styles$2.progress },
|
|
104
|
-
React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
|
|
105
|
-
display === "expanded" && (React__default["default"].createElement("div", { className: styles$2.contentBlock },
|
|
106
|
-
React__default["default"].createElement(Text.Text, { size: "base" }, file.name),
|
|
107
|
-
React__default["default"].createElement(Text.Text, { size: "small" }, fileSize)))),
|
|
108
|
-
isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$2.deleteButton },
|
|
109
|
-
React__default["default"].createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
|
|
110
|
-
}
|
|
111
|
-
function isHoverable({ display, isComplete, onClick, onDelete, }) {
|
|
112
|
-
if (display === "compact") {
|
|
113
|
-
return Boolean(isComplete && (onClick || onDelete));
|
|
114
|
-
}
|
|
115
|
-
else if (display === "expanded") {
|
|
116
|
-
return Boolean(isComplete && onClick);
|
|
117
|
-
}
|
|
118
|
-
return false;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
exports.FormatFile = FormatFile;
|
package/dist/Glimmer-cfa92a88.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-5b8768b7.js');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var classnames = require('classnames');
|
|
6
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
7
|
-
var Content = require('./Content-2ca1ffe1.js');
|
|
8
|
-
|
|
9
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
-
|
|
11
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
-
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
13
|
-
|
|
14
|
-
var css_248z$3 = ".FXzzrJAf890- {\n --glimmer-background: rgba(var(--color-black--rgb) 5%);\n --glimmer-shine: rgba(var(--color-white--rgb), var(--glimmer-shine-opacity));\n --glimmer-shine-opacity: 80%;\n --duration-base: calc(var(--timing-slowest) * 4); /* 2s */\n --duration-fast: calc(var(--duration-base) / 2); /* 1s */\n\n width: 100%;\n height: 100%;\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n background-color: rgba(0 0 0 5%);\n background-color: rgba(0, 0, 0 5%);\n background-color: var(--glimmer-background);\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n rgba(255, 255, 255, 0.8) calc(16px * 2),\n transparent calc(16px * 4)\n );\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n rgba(255, 255, 255, 80%) calc(16px * 2),\n transparent calc(16px * 4)\n );\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n var(--glimmer-shine) var(--space-larger),\n transparent var(--space-extravagant)\n );\n background-repeat: no-repeat;\n background-size: calc(16px * 4) 100%;\n background-size: var(--space-extravagant) 100%;\n -webkit-animation: FXzzrJAf890- 2s infinite linear;\n animation: FXzzrJAf890- 2s infinite linear;\n}@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {.FXzzrJAf890- {\n --glimmer-background: rgba(var(--color-black--rgb), 5%);\n}\n}\n\n.s9bG0yRJR3A- {\n --glimmer-background: rgba(var(--color-white--rgb) 10%);\n --glimmer-shine-opacity: 25%;\n}\n\n@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {\n\n.s9bG0yRJR3A- {\n --glimmer-background: rgba(var(--color-white--rgb), 10%);\n}\n}\n\n@-webkit-keyframes FXzzrJAf890- {\n 0%,\n 20% {\n background-position-x: calc((16px * 4) * -1);\n background-position-x: calc(calc(16px * 4) * -1);\n background-position-x: calc(var(--space-extravagant) * -1);\n }\n\n 100% {\n background-position-x: calc(100% + (16px * 4));\n background-position-x: calc(100% + calc(16px * 4));\n background-position-x: calc(100% + var(--space-extravagant));\n }\n}\n\n@keyframes FXzzrJAf890- {\n 0%,\n 20% {\n background-position-x: calc((16px * 4) * -1);\n background-position-x: calc(calc(16px * 4) * -1);\n background-position-x: calc(var(--space-extravagant) * -1);\n }\n\n 100% {\n background-position-x: calc(100% + (16px * 4));\n background-position-x: calc(100% + calc(16px * 4));\n background-position-x: calc(100% + var(--space-extravagant));\n }\n}\n\n.M0X0dxjIyv4- {\n width: 30%;\n max-width: 180px;\n min-width: 120px;\n}\n\n.v2Q1amzd7Ac- {\n display: inline-block;\n width: 100px;\n height: 36px;\n}\n\n._8va--lBgr38- {\n display: block;\n width: 100%;\n min-width: 100px;\n}\n";
|
|
15
|
-
var styles = {"glimmer":"FXzzrJAf890-","reverseTheme":"s9bG0yRJR3A-","header":"M0X0dxjIyv4-","button":"v2Q1amzd7Ac-","buttonFill":"_8va--lBgr38-"};
|
|
16
|
-
styleInject_es.styleInject(css_248z$3);
|
|
17
|
-
|
|
18
|
-
var css_248z$2 = ".siUUG4rZNSk- {\n height: calc(16px / 2);\n height: var(--space-small);\n}\n\n.nFuBXyrhG2Q- {\n height: calc(16px * 1);\n height: var(--space-base);\n}\n\n.oiVEoAqI-fU- {\n height: calc(16px * 1.5);\n height: var(--space-large);\n}\n\n.Tkmo6mSMI9Y- {\n height: calc(16px * 2);\n height: var(--space-larger);\n}\n\n.uVeaD3IhD6o- {\n height: calc(16px * 3);\n height: var(--space-largest);\n}\n\n._6Wak9NLJ3VQ- {\n height: 100%;\n min-width: calc(16px * 1);\n min-width: var(--space-base);\n min-height: calc(16px * 1);\n min-height: var(--space-base);\n}\n";
|
|
19
|
-
var sizes = {"small":"siUUG4rZNSk-","base":"nFuBXyrhG2Q-","large":"oiVEoAqI-fU-","larger":"Tkmo6mSMI9Y-","largest":"uVeaD3IhD6o-","auto":"_6Wak9NLJ3VQ-"};
|
|
20
|
-
styleInject_es.styleInject(css_248z$2);
|
|
21
|
-
|
|
22
|
-
var css_248z$1 = ".enoWbteryXg- {\n width: 100%;\n}\n\n._9qkwCdedX1M- {\n width: 85%;\n}\n\n.XtyJxvcJDFs- {\n width: 70%;\n}\n\n._8unQ0TS1He4-,\n.ameRMYEKfss- {\n width: auto;\n aspect-ratio: 1;\n}\n\n.ameRMYEKfss- {\n border-radius: 100%;\n border-radius: var(--radius-circle);\n}\n";
|
|
23
|
-
var shapes = {"rectangle":"enoWbteryXg-","rectangleShort":"_9qkwCdedX1M-","rectangleShorter":"XtyJxvcJDFs-","square":"_8unQ0TS1He4-","circle":"ameRMYEKfss-"};
|
|
24
|
-
styleInject_es.styleInject(css_248z$1);
|
|
25
|
-
|
|
26
|
-
var css_248z = ".hO0mZ6TeVko- {\n -webkit-animation-duration: var(--duration-base);\n animation-duration: var(--duration-base);\n}\n\n.WXi5-zF8Ll4- {\n -webkit-animation-duration: calc(var(--duration-fast));\n animation-duration: calc(var(--duration-fast));\n}\n";
|
|
27
|
-
var timings = {"base":"hO0mZ6TeVko-","fast":"WXi5-zF8Ll4-"};
|
|
28
|
-
styleInject_es.styleInject(css_248z);
|
|
29
|
-
|
|
30
|
-
const GLIMMER_TEST_ID = "ATL-Glimmer";
|
|
31
|
-
const GLIMMER_HEADER_TEST_ID = "ATL-GlimmerHeader";
|
|
32
|
-
const GLIMMER_TEXT_TEST_ID = "ATL-GlimmerText";
|
|
33
|
-
const GLIMMER_BUTTON_TEST_ID = "ATL-GlimmerButton";
|
|
34
|
-
/**
|
|
35
|
-
* **Experimental component! Use at your own risk.**
|
|
36
|
-
*
|
|
37
|
-
* Foundational component used to build loading states such as Skeleton UI
|
|
38
|
-
*
|
|
39
|
-
* @experimental
|
|
40
|
-
*/
|
|
41
|
-
function Glimmer({ size = "base", shape = "rectangle", timing = "base", reverseTheme = false, width, }) {
|
|
42
|
-
const className = classnames__default["default"](styles.glimmer, sizes[size], shapes[shape], timings[timing], { [styles.reverseTheme]: reverseTheme });
|
|
43
|
-
return (React__default["default"].createElement("div", { "aria-busy": "true", className: className, "data-testid": GLIMMER_TEST_ID, style: { width } }));
|
|
44
|
-
}
|
|
45
|
-
Glimmer.Header = function GlimmerHeader(_a) {
|
|
46
|
-
var { level = 3 } = _a, props = tslib_es6.__rest(_a, ["level"]);
|
|
47
|
-
const headerSize = {
|
|
48
|
-
1: "largest",
|
|
49
|
-
2: "larger",
|
|
50
|
-
3: "large",
|
|
51
|
-
4: "base",
|
|
52
|
-
5: "small",
|
|
53
|
-
};
|
|
54
|
-
return (React__default["default"].createElement("div", { className: styles.header, "data-testid": GLIMMER_HEADER_TEST_ID },
|
|
55
|
-
React__default["default"].createElement(Glimmer, Object.assign({ size: headerSize[level] }, props))));
|
|
56
|
-
};
|
|
57
|
-
Glimmer.Text = function GlimmerText(_a) {
|
|
58
|
-
var { width, lines = 3 } = _a, props = tslib_es6.__rest(_a, ["width", "lines"]);
|
|
59
|
-
const children = [
|
|
60
|
-
React__default["default"].createElement(Glimmer, Object.assign({ key: "1", size: "small", shape: "rectangleShort" }, props)),
|
|
61
|
-
React__default["default"].createElement(Glimmer, Object.assign({ key: "2", size: "small" }, props)),
|
|
62
|
-
React__default["default"].createElement(Glimmer, Object.assign({ key: "3", size: "small", shape: "rectangleShorter" }, props)),
|
|
63
|
-
].slice(0, lines);
|
|
64
|
-
return (React__default["default"].createElement("div", { style: { width }, "data-testid": GLIMMER_TEXT_TEST_ID },
|
|
65
|
-
React__default["default"].createElement(Content.Content, { spacing: "small" }, children)));
|
|
66
|
-
};
|
|
67
|
-
Glimmer.Button = function GlimmerButton(_a) {
|
|
68
|
-
var { fullWidth = false } = _a, props = tslib_es6.__rest(_a, ["fullWidth"]);
|
|
69
|
-
const buttonClassNames = classnames__default["default"](styles.button, {
|
|
70
|
-
[styles.buttonFill]: fullWidth,
|
|
71
|
-
});
|
|
72
|
-
return (React__default["default"].createElement("div", { className: buttonClassNames, "data-testid": GLIMMER_BUTTON_TEST_ID },
|
|
73
|
-
React__default["default"].createElement(Glimmer, Object.assign({}, props, { size: "auto" }))));
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
exports.GLIMMER_TEST_ID = GLIMMER_TEST_ID;
|
|
77
|
-
exports.Glimmer = Glimmer;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var classnames = require('classnames');
|
|
5
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
|
-
var Typography = require('./Typography-973b122e.js');
|
|
7
|
-
|
|
8
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
-
|
|
10
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
-
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
12
|
-
|
|
13
|
-
var css_248z = ".S72WkdRbhc0- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n border-radius: calc(16px / 4);\n border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- {\n padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.ui07veHjPII- {\n padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.WIXhLSQ7z8A- {\n padding: calc((16px / 2) * 1.25) calc((16px / 4) * 3.5);\n padding: calc(calc(16px / 2) * 1.25) calc(calc(16px / 4) * 3.5);\n padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._8RuKvOhj-Ro- {\n color: rgb(66, 78, 86);\n color: var(--color-greyBlue--dark);\n background-color: rgb(238, 240, 242);\n background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n color: rgb(128, 25, 0);\n color: var(--color-red--dark);\n background-color: rgb(255, 226, 219);\n background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n color: rgb(158, 98, 23);\n color: var(--color-orange--dark);\n background-color: rgb(253, 239, 222);\n background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n color: rgb(81, 114, 9);\n color: var(--color-green--dark);\n background-color: rgb(236, 243, 219);\n background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n color: rgb(1, 27, 37);\n color: var(--color-blue--dark);\n background-color: rgb(217, 223, 225);\n background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n color: rgb(49, 69, 98);\n color: var(--color-navy--dark);\n background-color: rgb(228, 233, 239);\n background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n color: rgb(144, 127, 10);\n color: var(--color-yellow--dark);\n background-color: rgb(250, 246, 219);\n background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n color: rgb(99, 125, 46);\n color: var(--color-lime--dark);\n background-color: rgb(240, 246, 227);\n background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n color: rgb(88, 73, 127);\n color: var(--color-purple--dark);\n background-color: rgb(237, 234, 246);\n background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n color: rgb(116, 62, 98);\n color: var(--color-pink--dark);\n background-color: rgb(244, 231, 239);\n background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n color: rgb(40, 112, 95);\n color: var(--color-teal--dark);\n background-color: rgb(226, 243, 239);\n background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n color: rgb(122, 128, 21);\n color: var(--color-yellowGreen--dark);\n background-color: rgb(245, 246, 222);\n background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n color: rgba(255, 255, 255, 1);\n color: var(--color-white);\n background-color: rgb(77, 105, 116);\n background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n color: rgb(39, 105, 146);\n color: var(--color-lightBlue--dark);\n background-color: rgb(226, 241, 250);\n background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n color: rgb(55, 69, 132);\n color: var(--color-indigo--dark);\n background-color: rgb(230, 233, 247);\n background-color: var(--color-indigo--lightest);\n}\n";
|
|
14
|
-
var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
|
|
15
|
-
styleInject_es.styleInject(css_248z);
|
|
16
|
-
|
|
17
|
-
function InlineLabel({ size = "base", color = "greyBlue", children, }) {
|
|
18
|
-
const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
|
|
19
|
-
const sizeMapper = {
|
|
20
|
-
base: "small",
|
|
21
|
-
large: "large",
|
|
22
|
-
larger: "large",
|
|
23
|
-
};
|
|
24
|
-
return (React__default["default"].createElement("span", { className: className },
|
|
25
|
-
React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
exports.InlineLabel = InlineLabel;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var classnames = require('classnames');
|
|
5
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
-
|
|
9
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
-
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
11
|
-
|
|
12
|
-
var css_248z = "._4bvHwa3-qBA- > *:not(:last-child) {\n margin-bottom: -1px !important;\n}\n\n.bHm4WuX8ToY- {\n display: -ms-flexbox;\n display: flex;\n}\n\n.bHm4WuX8ToY- > *:not(:last-child) {\n margin-bottom: auto;\n margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group */\n\n.nmDPgrXofeE- {\n --public-field--top-left-radius: 0;\n --public-field--top-right-radius: 0;\n --public-field--bottom-left-radius: 0;\n --public-field--bottom-right-radius: 0;\n}\n\n._4bvHwa3-qBA- > :first-child:not(.bHm4WuX8ToY-) {\n --public-field--top-left-radius: var(--radius-base);\n --public-field--top-right-radius: var(--radius-base);\n}\n\n._4bvHwa3-qBA- > :last-child:not(.bHm4WuX8ToY-) {\n --public-field--bottom-left-radius: var(--radius-base);\n --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n.bHm4WuX8ToY-:first-child > :first-child {\n --public-field--top-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:first-child > :last-child {\n --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n.bHm4WuX8ToY-:last-child > :first-child {\n --public-field--bottom-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:last-child > :last-child {\n --public-field--bottom-right-radius: var(--radius-base);\n}\n";
|
|
13
|
-
var styles = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-"};
|
|
14
|
-
styleInject_es.styleInject(css_248z);
|
|
15
|
-
|
|
16
|
-
function InputGroup({ children, flowDirection = "vertical", }) {
|
|
17
|
-
if (isInvalidGroupNesting(children))
|
|
18
|
-
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
19
|
-
const className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
|
|
20
|
-
return React__default["default"].createElement("div", { className: className }, children);
|
|
21
|
-
}
|
|
22
|
-
function isInvalidGroupNesting(childs) {
|
|
23
|
-
return React__default["default"].Children.toArray(childs).some(child => {
|
|
24
|
-
if (child.type === InputGroup &&
|
|
25
|
-
child.props.flowDirection != "horizontal") {
|
|
26
|
-
console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
|
|
27
|
-
return true;
|
|
28
|
-
}
|
|
29
|
-
return false;
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
exports.InputGroup = InputGroup;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var ReactMarkdown = require('react-markdown');
|
|
5
|
-
var Text = require('./Text-4a2bc89f.js');
|
|
6
|
-
var Emphasis = require('./Emphasis-b2d1b3aa.js');
|
|
7
|
-
var Heading = require('./Heading-0f4ecb0c.js');
|
|
8
|
-
var Content = require('./Content-2ca1ffe1.js');
|
|
9
|
-
|
|
10
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
-
|
|
12
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
|
-
var ReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(ReactMarkdown);
|
|
14
|
-
|
|
15
|
-
function Markdown({ content, externalLink, basicUsage }) {
|
|
16
|
-
const props = Object.assign({}, (basicUsage && {
|
|
17
|
-
disallowedElements: [
|
|
18
|
-
"p",
|
|
19
|
-
"h1",
|
|
20
|
-
"h2",
|
|
21
|
-
"h3",
|
|
22
|
-
"h4",
|
|
23
|
-
"h5",
|
|
24
|
-
"h6",
|
|
25
|
-
"table",
|
|
26
|
-
"ul",
|
|
27
|
-
"li",
|
|
28
|
-
"code",
|
|
29
|
-
"image",
|
|
30
|
-
],
|
|
31
|
-
unwrapDisallowed: true,
|
|
32
|
-
}));
|
|
33
|
-
const Tag = basicUsage ? React__default["default"].Fragment : Content.Content;
|
|
34
|
-
return (React__default["default"].createElement(Tag, null,
|
|
35
|
-
React__default["default"].createElement(ReactMarkdown__default["default"], Object.assign({}, props, { linkTarget: externalLink ? "_blank" : undefined, components: {
|
|
36
|
-
p: renderParagraph,
|
|
37
|
-
strong: renderStrong,
|
|
38
|
-
em: renderEmphasis,
|
|
39
|
-
h1: renderHeading(1),
|
|
40
|
-
h2: renderHeading(2),
|
|
41
|
-
h3: renderHeading(3),
|
|
42
|
-
h4: renderHeading(4),
|
|
43
|
-
h5: renderHeading(5),
|
|
44
|
-
} }), content)));
|
|
45
|
-
}
|
|
46
|
-
function renderParagraph({ children }) {
|
|
47
|
-
return React__default["default"].createElement(Text.Text, null, children);
|
|
48
|
-
}
|
|
49
|
-
function renderStrong({ children }) {
|
|
50
|
-
return React__default["default"].createElement(Emphasis.Emphasis, { variation: "bold" }, children);
|
|
51
|
-
}
|
|
52
|
-
function renderEmphasis({ children }) {
|
|
53
|
-
return React__default["default"].createElement(Emphasis.Emphasis, { variation: "italic" }, children);
|
|
54
|
-
}
|
|
55
|
-
function renderHeading(level) {
|
|
56
|
-
function buildHeading({ children }) {
|
|
57
|
-
return React__default["default"].createElement(Heading.Heading, { level: level }, children);
|
|
58
|
-
}
|
|
59
|
-
return buildHeading;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
exports.Markdown = Markdown;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var classnames = require('classnames');
|
|
5
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
-
|
|
9
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
-
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
11
|
-
|
|
12
|
-
var css_248z$1 = ":root {\n --progress-bar--height: var(--space-base);\n}\n\nprogress.S1cioqW7loo-[value] {\n width: 100%;\n height: calc(16px * 1);\n height: var(--progress-bar--height);\n border: none;\n vertical-align: baseline;\n -webkit-appearance: none;\n appearance: none;\n}\n\nprogress.S1cioqW7loo-[value],\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);\n border-radius: calc((16px * 1) / 2);\n border-radius: calc(calc(16px * 1) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-value {\n border-radius: calc((16px * 1) / 2);\n border-radius: calc(calc(16px * 1) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n -webkit-transition: all 300ms ease-out;\n transition: all 300ms ease-out;\n -webkit-transition: all var(--timing-slow) ease-out;\n transition: all var(--timing-slow) ease-out;\n}\n\nprogress.S1cioqW7loo-[value]::-moz-progress-bar {\n border-radius: calc((16px * 1) / 2);\n border-radius: calc(calc(16px * 1) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n -moz-transition: all 300ms ease-out;\n transition: all 300ms ease-out;\n -moz-transition: all var(--timing-slow) ease-out;\n transition: all var(--timing-slow) ease-out;\n}\n\nprogress.nv5fejwjHzo-[value]::-webkit-progress-value {\n -webkit-transition: all 100ms ease-out;\n transition: all 100ms ease-out;\n -webkit-transition: all var(--timing-quick) ease-out;\n transition: all var(--timing-quick) ease-out;\n}\n\n.dyBDsjWCui4- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n width: 100%;\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n";
|
|
13
|
-
var styles = {"ProgressBar":"S1cioqW7loo-","SteppedProgressBar":"nv5fejwjHzo-","wrapper":"dyBDsjWCui4-"};
|
|
14
|
-
styleInject_es.styleInject(css_248z$1);
|
|
15
|
-
|
|
16
|
-
var css_248z = ".CzIxUWYkrdo- {\n --progress-bar--height: var(--space-smaller);\n}\n\n.JNSDqHqKVlE- {\n --progress-bar--height: var(--space-small);\n}\n\n.nzFMJ2k4zJ0- {\n --progress-bar--height: var(--space-base);\n}\n";
|
|
17
|
-
var sizes = {"smaller":"CzIxUWYkrdo-","small":"JNSDqHqKVlE-","base":"nzFMJ2k4zJ0-"};
|
|
18
|
-
styleInject_es.styleInject(css_248z);
|
|
19
|
-
|
|
20
|
-
function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
|
|
21
|
-
const steppedProgressBarClassName = classnames__default["default"](styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);
|
|
22
|
-
const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
|
|
23
|
-
return (React__default["default"].createElement("div", { role: "progressbar", className: styles.wrapper, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
|
|
24
|
-
const step = index + 1;
|
|
25
|
-
const value = step <= currentStep ? 100 : 0;
|
|
26
|
-
return (React__default["default"].createElement("progress", { key: step, className: steppedProgressBarClassName, value: value, "data-testid": "progress-step" },
|
|
27
|
-
value,
|
|
28
|
-
"%"));
|
|
29
|
-
})));
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", }) {
|
|
33
|
-
const percentage = (currentStep / totalSteps) * 100;
|
|
34
|
-
const progressBarClassName = classnames__default["default"](styles.ProgressBar, sizes[size]);
|
|
35
|
-
if (variation === "stepped") {
|
|
36
|
-
return (React__default["default"].createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size }));
|
|
37
|
-
}
|
|
38
|
-
return (React__default["default"].createElement("progress", { className: progressBarClassName, max: totalSteps, value: currentStep },
|
|
39
|
-
percentage,
|
|
40
|
-
"%"));
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
exports.ProgressBar = ProgressBar;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var uuid = require('uuid');
|
|
5
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
|
-
var Text = require('./Text-4a2bc89f.js');
|
|
7
|
-
|
|
8
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
-
|
|
10
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
-
|
|
12
|
-
var css_248z = "._5P8wEHDUdKY- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n._08ZPdlE98Ko- {\n /* Hide checkbox on UI but not screen readers and still allow focus state */\n position: absolute;\n left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: calc((16px * 1) * 0.875);\n font-size: calc(calc(16px * 1) * 0.875);\n font-size: var(--typography--fontSize-base);\n cursor: pointer;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n content: \"\";\n display: block;\n width: calc(16px * 1);\n width: var(--space-base);\n height: calc(16px * 1);\n height: var(--space-base);\n box-sizing: border-box;\n margin: calc(16px / 8) calc(16px / 2) 0 0;\n margin: var(--space-smallest) var(--space-small) 0 0;\n border: calc(16px / 8) solid rgb(125, 176, 14);\n border: var(--border-thick) solid var(--color-interactive);\n border-radius: 100%;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n transition: all 200ms;\n transition: all var(--timing-base);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n._08ZPdlE98Ko-:focus + .-PUoLXltVlQ-:before {\n box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:focus:checked + .-PUoLXltVlQ-:before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9),\n 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover),\n var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover);\n border-color: rgb(81, 114, 9);\n border-color: var(--color-interactive--hover);\n border-width: calc(16px / 4);\n border-width: var(--border-thicker);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n border-color: rgb(225, 225, 225);\n border-color: var(--color-disabled--secondary);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(181, 181, 181);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-disabled);\n border-color: rgb(181, 181, 181);\n border-color: var(--color-grey);\n background-color: rgb(225, 225, 225);\n background-color: var(--color-disabled--secondary);\n}\n\n._8r6qT-6S9EI-,\n.C5SzbO1epLk- {\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n padding-left: calc(16px * 1.5);\n padding-left: var(--space-large);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n}\n";
|
|
13
|
-
var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
|
|
14
|
-
styleInject_es.styleInject(css_248z);
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* For rendering props only. To make updates to
|
|
18
|
-
* the real RadioOption, look at InternalRadioOption
|
|
19
|
-
*/
|
|
20
|
-
function RadioOption({ children }) {
|
|
21
|
-
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
|
|
22
|
-
}
|
|
23
|
-
function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
|
|
24
|
-
const inputId = `${value.toString()}_${uuid.v1()}`;
|
|
25
|
-
const shouldRenderIndependentChildren = label && children;
|
|
26
|
-
return (React__default["default"].createElement("div", null,
|
|
27
|
-
React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
|
|
28
|
-
React__default["default"].createElement("label", { className: styles.label, htmlFor: inputId }, label ? label : children),
|
|
29
|
-
description && (React__default["default"].createElement("div", { className: styles.description, id: `${inputId}_description` },
|
|
30
|
-
React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description))),
|
|
31
|
-
shouldRenderIndependentChildren && (React__default["default"].createElement("div", { className: styles.children, id: `${inputId}_children` }, children))));
|
|
32
|
-
function handleChange() {
|
|
33
|
-
onChange(value);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function RadioGroup({ children, value, ariaLabel, onChange, name = uuid.v1(), }) {
|
|
38
|
-
return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, option => (React__default["default"].createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
|
|
39
|
-
function handleChange(newValue) {
|
|
40
|
-
if (newValue !== value) {
|
|
41
|
-
onChange(newValue);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
exports.RadioGroup = RadioGroup;
|
|
47
|
-
exports.RadioOption = RadioOption;
|
package/dist/Spinner-9d8fc7ff.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var classnames = require('classnames');
|
|
5
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
-
|
|
9
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
-
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
11
|
-
|
|
12
|
-
var css_248z = ".uoU-LfjFDv0- {\n width: calc(16px * 2);\n width: var(--space-larger);\n height: calc(16px * 2);\n height: var(--space-larger);\n box-shadow: 0px 0px 4px 2px rgba(1, 41, 57, 0.4);\n border: solid rgb(77, 105, 116);\n border: solid var(--color-blue--light);\n border-top-color: rgba(255, 255, 255, 1);\n border-top-color: var(--color-white);\n border-width: calc((16px / 2) * 0.75);\n border-width: calc(calc(16px / 2) * 0.75);\n border-width: calc(var(--space-small) * 0.75);\n border-radius: 100%;\n border-radius: var(--radius-circle);\n background-color: rgb(217, 223, 225);\n background-color: var(--color-blue--lightest);\n -webkit-animation-duration: calc(500ms * 2);\n -webkit-animation-duration: calc(var(--timing-slowest) * 2);\n animation-duration: calc(500ms * 2);\n animation-duration: calc(var(--timing-slowest) * 2);\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: _1aCKd5q9u34-;\n animation-name: _1aCKd5q9u34-;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n will-change: transform;\n}\n\n@-webkit-keyframes _1aCKd5q9u34- {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n 100% {\n -webkit-transform: rotate(359deg);\n transform: rotate(359deg);\n }\n}\n\n@keyframes _1aCKd5q9u34- {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n 100% {\n -webkit-transform: rotate(359deg);\n transform: rotate(359deg);\n }\n}\n\n.cLRQwkSqnhA- {\n width: calc(16px * 1);\n width: var(--space-base);\n height: calc(16px * 1);\n height: var(--space-base);\n border-width: calc(16px / 4);\n border-width: var(--space-smaller);\n}\n\n.h6O4vDPCWOQ- {\n display: inline-block;\n margin-top: calc((16px / 4) * -1);\n margin-top: calc(calc(16px / 4) * -1);\n margin-top: calc(var(--space-smaller) * -1);\n vertical-align: middle;\n}\n";
|
|
13
|
-
var styles = {"spinner":"uoU-LfjFDv0-","animationSpin":"_1aCKd5q9u34-","small":"cLRQwkSqnhA-","inline":"h6O4vDPCWOQ-"};
|
|
14
|
-
styleInject_es.styleInject(css_248z);
|
|
15
|
-
|
|
16
|
-
function Spinner({ size = "base", inline }) {
|
|
17
|
-
const spinnerStyles = classnames__default["default"](styles.spinner, {
|
|
18
|
-
[styles.small]: size === "small",
|
|
19
|
-
[styles.inline]: inline,
|
|
20
|
-
});
|
|
21
|
-
return (React__default["default"].createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
exports.Spinner = Spinner;
|
package/dist/Switch-b85272bf.js
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var classnames = require('classnames');
|
|
5
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
|
-
var Typography = require('./Typography-973b122e.js');
|
|
7
|
-
|
|
8
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
-
|
|
10
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
-
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
12
|
-
|
|
13
|
-
var css_248z = ":root {\n --switch--pipSize: calc(var(--space-base) * 1.875);\n --switch--labelWidth: calc(var(--switch--pipSize) * 1.3);\n --switch--borderOffset: calc(var(--border-base) * 2);\n}\n\n.NaSI2jsLI0c-,\n.NaSI2jsLI0c- * {\n box-sizing: border-box;\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.NaSI2jsLI0c- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: calc((((16px * 1) * 1.875) * 1.3) + ((16px * 1) * 1.875));\n width: calc(calc(calc(calc(16px * 1) * 1.875) * 1.3) + calc(calc(16px * 1) * 1.875));\n width: calc(var(--switch--labelWidth) + var(--switch--pipSize));\n padding: 0;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc((16px * 1) * 1.875);\n border-radius: calc(calc(16px * 1) * 1.875);\n border-radius: var(--switch--pipSize);\n overflow: hidden;\n line-height: normal;\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.NaSI2jsLI0c-:focus {\n box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n.HbAoDMJhkwY- {\n border-color: rgb(125, 176, 14);\n border-color: var(--color-interactive);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n}\n\n.cc259FtdxeE- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n margin-left: calc(-1 * (((16px * 1) * 1.875) * 1.3));\n margin-left: calc(-1 * calc(calc(calc(16px * 1) * 1.875) * 1.3));\n margin-left: calc(-1 * var(--switch--labelWidth));\n pointer-events: none;\n -ms-flex: 1 1 100%;\n flex: 1 1 100%;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.HbAoDMJhkwY- .cc259FtdxeE- {\n margin-left: calc(-1 * ((16px / 16) * 2));\n margin-left: calc(-1 * calc(calc(16px / 16) * 2));\n margin-left: calc(-1 * var(--switch--borderOffset));\n}\n\n.YZ-HIehHOBA- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n min-width: calc(((16px * 1) * 1.875) * 1.3);\n min-width: calc(calc(calc(16px * 1) * 1.875) * 1.3);\n min-width: var(--switch--labelWidth);\n margin-top: calc(16px / 16);\n margin-top: var(--space-minuscule);\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: none;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.YZ-HIehHOBA-:first-of-type {\n padding-left: calc(16px / 2);\n padding-left: var(--space-small);\n}\n\n.YZ-HIehHOBA-:last-of-type {\n padding-right: calc(16px / 2);\n padding-right: var(--space-small);\n}\n\n._2hxova2FHpM- {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: calc((16px * 1) * 1.875);\n width: calc(calc(16px * 1) * 1.875);\n width: var(--switch--pipSize);\n height: calc((16px * 1) * 1.875);\n height: calc(calc(16px * 1) * 1.875);\n height: var(--switch--pipSize);\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: 100%;\n border-radius: var(--radius-circle);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n.HbAoDMJhkwY- ._2hxova2FHpM- {\n border-color: rgb(125, 176, 14);\n border-color: var(--color-green);\n}\n\n._6hWvJHjyLlk- {\n border-color: rgb(225, 225, 225);\n border-color: var(--color-disabled--secondary);\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n cursor: not-allowed;\n}\n\n._6hWvJHjyLlk- ._2hxova2FHpM- {\n border-color: rgb(225, 225, 225);\n border-color: var(--color-disabled--secondary);\n}\n";
|
|
14
|
-
var styles = {"track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-"};
|
|
15
|
-
styleInject_es.styleInject(css_248z);
|
|
16
|
-
|
|
17
|
-
function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
|
|
18
|
-
const [statefulValue, setValue] = React.useState(false);
|
|
19
|
-
const value = providedValue != undefined ? providedValue : statefulValue;
|
|
20
|
-
const toggleSwitch = () => {
|
|
21
|
-
if (disabled) {
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
const newValue = !value;
|
|
25
|
-
onChange && onChange(newValue);
|
|
26
|
-
if (providedValue == undefined) {
|
|
27
|
-
setValue(newValue);
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const className = classnames__default["default"](styles.track, {
|
|
31
|
-
[styles.isChecked]: value,
|
|
32
|
-
[styles.disabled]: disabled,
|
|
33
|
-
});
|
|
34
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
35
|
-
React__default["default"].createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
|
|
36
|
-
React__default["default"].createElement("span", { className: styles.toggle },
|
|
37
|
-
React__default["default"].createElement(Label, { as: "On", disabled: disabled }),
|
|
38
|
-
React__default["default"].createElement("span", { className: styles.pip }),
|
|
39
|
-
React__default["default"].createElement(Label, { as: "Off", disabled: disabled }))),
|
|
40
|
-
React__default["default"].createElement("input", { name: name, type: "hidden", value: String(value) })));
|
|
41
|
-
}
|
|
42
|
-
function Label({ as, disabled }) {
|
|
43
|
-
const getTextColor = () => {
|
|
44
|
-
if (disabled) {
|
|
45
|
-
return "grey";
|
|
46
|
-
}
|
|
47
|
-
else if (as === "On") {
|
|
48
|
-
return "white";
|
|
49
|
-
}
|
|
50
|
-
return "greyBlue";
|
|
51
|
-
};
|
|
52
|
-
return (React__default["default"].createElement("span", { className: styles.label },
|
|
53
|
-
React__default["default"].createElement(Typography.Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
exports.Switch = Switch;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var classnames = require('classnames');
|
|
5
|
-
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
-
|
|
9
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
-
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
11
|
-
|
|
12
|
-
var css_248z$8 = ".asDB9Ra2UpA- {\n margin: 0;\n padding: 0;\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\n /* Wrap really long words or URL's */\n word-wrap: break-word;\n overflow-wrap: break-word;\n word-wrap: break-word;\n}\n";
|
|
13
|
-
var styles = {"base":"asDB9Ra2UpA-"};
|
|
14
|
-
styleInject_es.styleInject(css_248z$8);
|
|
15
|
-
|
|
16
|
-
var css_248z$7 = "._7C4Ck1izBPs- {\n font-size: calc(\n (16px * 1) * 3\n );\n font-size: calc(\n calc(16px * 1) * 3\n );\n font-size: var(--typography--fontSize-extravagant);\n line-height: 1.08;\n line-height: var(--typography--lineHeight-miniscule);\n}\n\n._8X-fSrUTxV8- {\n font-size: calc((16px * 1) * 2.25);\n font-size: calc(calc(16px * 1) * 2.25);\n font-size: var(--typography--fontSize-jumbo);\n line-height: 1.08;\n line-height: var(--typography--lineHeight-miniscule);\n}\n\n.n-SPJXPXLSA- {\n font-size: calc((16px * 1) * 1.5);\n font-size: calc(calc(16px * 1) * 1.5);\n font-size: var(--typography--fontSize-largest);\n line-height: 1.12;\n line-height: var(--typography--lineHeight-tightest);\n}\n\n.vCrvF55YQ9o- {\n font-size: calc((16px * 1) * 1.25);\n font-size: calc(calc(16px * 1) * 1.25);\n font-size: var(--typography--fontSize-larger);\n line-height: 1.2;\n line-height: var(--typography--lineHeight-tight);\n}\n\n.FBoaHWotSik- {\n font-size: calc(16px * 1);\n font-size: var(--typography--fontSize-large);\n line-height: 1.34;\n line-height: var(--typography--lineHeight-large);\n}\n\n.V6yPPLHLeuY- {\n font-size: calc((16px * 1) * 0.875);\n font-size: calc(calc(16px * 1) * 0.875);\n font-size: var(--typography--fontSize-base);\n line-height: 1.25;\n line-height: var(--typography--lineHeight-base);\n}\n\n.T5XC4DgJlxk- {\n font-size: calc((16px * 1) * 0.75);\n font-size: calc(calc(16px * 1) * 0.75);\n font-size: var(--typography--fontSize-small);\n line-height: 1.143;\n line-height: var(--typography--lineHeight-tighter);\n}\n\n.sycqXMMO-wc- {\n font-size: calc(\n (16px * 1) * 0.625\n );\n font-size: calc(\n calc(16px * 1) * 0.625\n );\n font-size: var(--typography--fontSize-smaller);\n line-height: 1.2;\n line-height: var(--typography--lineHeight-tight);\n}\n";
|
|
17
|
-
var fontSizes = {"extravagant":"_7C4Ck1izBPs-","jumbo":"_8X-fSrUTxV8-","largest":"n-SPJXPXLSA-","larger":"vCrvF55YQ9o-","large":"FBoaHWotSik-","base":"V6yPPLHLeuY-","small":"T5XC4DgJlxk-","smaller":"sycqXMMO-wc-"};
|
|
18
|
-
styleInject_es.styleInject(css_248z$7);
|
|
19
|
-
|
|
20
|
-
var css_248z$6 = ".lziyWzzvuno- {\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\n font-weight: 400;\n}\n\n.PVKSijyipP8- {\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\n font-weight: 500;\n}\n\n.-ch9Z4gIGDg- {\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\n font-weight: 600;\n}\n\n.EEwS0f07RqQ- {\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\n font-weight: 700;\n}\n\n.kA3NtPPWbP0- {\n font-family: \"Jobber Pro\", \"Poppins\", Helvetica, Arial,\n sans-serif;\n font-family: var(--typography--fontFamily-display);\n font-weight: 800;\n}\n\n._3M58OLqp0JM- {\n font-family: \"Jobber Pro\", \"Poppins\", Helvetica, Arial,\n sans-serif;\n font-family: var(--typography--fontFamily-display);\n font-weight: 900;\n}\n";
|
|
21
|
-
var fontWeights = {"regular":"lziyWzzvuno-","medium":"PVKSijyipP8-","semiBold":"-ch9Z4gIGDg-","bold":"EEwS0f07RqQ-","extraBold":"kA3NtPPWbP0-","black":"_3M58OLqp0JM-"};
|
|
22
|
-
styleInject_es.styleInject(css_248z$6);
|
|
23
|
-
|
|
24
|
-
var css_248z$5 = ".xE6cC62h5G0- {\n text-transform: uppercase;\n}\n\n.HlqJJ3Cl7dE- {\n text-transform: lowercase;\n}\n\n.Loe26JnDfco- {\n text-transform: capitalize;\n}\n";
|
|
25
|
-
var textCases = {"uppercase":"xE6cC62h5G0-","lowercase":"HlqJJ3Cl7dE-","capitalize":"Loe26JnDfco-"};
|
|
26
|
-
styleInject_es.styleInject(css_248z$5);
|
|
27
|
-
|
|
28
|
-
var css_248z$4 = ".pkqoq2KXY9w- {\n color: rgb(1, 41, 57);\n color: var(--color-blue);\n}\n\n.ftVHRSii3ro- {\n color: rgb(181, 181, 181);\n color: var(--color-grey);\n}\n\n.FQbGABZWVzA- {\n color: rgb(66, 78, 86);\n color: var(--color-greyBlue--dark);\n}\n\n.zQaB9J0-vrs- {\n color: rgba(101, 120, 132, 1);\n color: var(--color-greyBlue);\n}\n\n._4-xdzcqT-Us- {\n color: rgb(125, 176, 14);\n color: var(--color-green);\n}\n\n.Zp9E7ELPjPA- {\n color: rgb(201, 66, 33);\n color: var(--color-red);\n}\n\n.v-Fo4PwPxDI- {\n color: rgb(221, 195, 15);\n color: var(--color-yellow);\n}\n\n.YrGUIChAZC0- {\n color: rgb(144, 127, 10);\n color: var(--color-yellow--dark);\n}\n\n.r7JcIVoDcTY- {\n color: rgb(60, 162, 224);\n color: var(--color-lightBlue);\n}\n\n._6RXTyd198iM- {\n color: rgba(255, 255, 255, 1);\n color: var(--color-white);\n}\n\n.fLix4jA-RkU- {\n color: rgb(1, 41, 57);\n color: var(--color-heading);\n}\n\n._1g0uMAwFAsk- {\n color: rgb(66, 78, 86);\n color: var(--color-text);\n}\n\n.oXqFAHwT6y4- {\n color: rgb(77, 105, 116);\n color: var(--color-text--secondary);\n}\n\n.rWkzi9HFNDU- {\n color: rgb(201, 66, 33);\n color: var(--color-critical);\n}\n\n.PQLYQKGCmPI- {\n color: rgb(144, 127, 10);\n color: var(--color-warning--onSurface);\n}\n\n.L6bBDJrx-m0- {\n color: rgb(39, 105, 146);\n color: var(--color-informative--onSurface);\n}\n\n.bJDJJKvmT90- {\n color: rgb(81, 114, 9);\n color: var(--color-success--onSurface);\n}\n\n._3g4iYm8XwkM- {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n}\n";
|
|
29
|
-
var textColors = {"blue":"pkqoq2KXY9w-","grey":"ftVHRSii3ro-","greyBlueDark":"FQbGABZWVzA-","greyBlue":"zQaB9J0-vrs-","green":"_4-xdzcqT-Us-","red":"Zp9E7ELPjPA-","yellow":"v-Fo4PwPxDI-","yellowDark":"YrGUIChAZC0-","lightBlue":"r7JcIVoDcTY-","white":"_6RXTyd198iM-","heading":"fLix4jA-RkU-","text":"_1g0uMAwFAsk-","textSecondary":"oXqFAHwT6y4-","critical":"rWkzi9HFNDU-","warning":"PQLYQKGCmPI-","informative":"L6bBDJrx-m0-","success":"bJDJJKvmT90-","disabled":"_3g4iYm8XwkM-"};
|
|
30
|
-
styleInject_es.styleInject(css_248z$4);
|
|
31
|
-
|
|
32
|
-
var css_248z$3 = ".Jys1uy2pQXw- {\n font-style: italic;\n}\n\n.kd2u0dL-if0- {\n display: inline;\n font-family: inherit;\n font-style: normal;\n font-weight: inherit;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 84 8' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.50004C14.6667 4.50004 49.3 0.900038 82.5 2.50004' stroke='%2384EA00' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E\");\n background-position: center bottom;\n background-repeat: no-repeat;\n background-size: 100% 20%;\n}\n";
|
|
33
|
-
var emphasis = {"italic":"Jys1uy2pQXw-","highlight":"kd2u0dL-if0-"};
|
|
34
|
-
styleInject_es.styleInject(css_248z$3);
|
|
35
|
-
|
|
36
|
-
var css_248z$2 = ".LUJEfdi3pws- {\n display: -webkit-box !important;\n}\n.LUJEfdi3pws- {\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n";
|
|
37
|
-
var truncate = {"textTruncate":"LUJEfdi3pws-"};
|
|
38
|
-
styleInject_es.styleInject(css_248z$2);
|
|
39
|
-
|
|
40
|
-
var css_248z$1 = ".eDMsbRCP0kg- {\n text-align: left;\n}\n\n.j34R9yIG--c- {\n text-align: center;\n}\n\n.CeI75T5sHwM- {\n text-align: right;\n}\n";
|
|
41
|
-
var alignment = {"start":"eDMsbRCP0kg-","center":"j34R9yIG--c-","end":"CeI75T5sHwM-"};
|
|
42
|
-
styleInject_es.styleInject(css_248z$1);
|
|
43
|
-
|
|
44
|
-
var css_248z = ".mRpfVoMiIMM- {\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\n}\n\n.TPtuWMdOsfw- {\n font-family: \"Jobber Pro\", \"Poppins\", Helvetica, Arial,\n sans-serif;\n font-family: var(--typography--fontFamily-display);\n}\n";
|
|
45
|
-
var fontFamilies = {"base":"mRpfVoMiIMM-","display":"TPtuWMdOsfw-"};
|
|
46
|
-
styleInject_es.styleInject(css_248z);
|
|
47
|
-
|
|
48
|
-
/* eslint-disable import/no-internal-modules */
|
|
49
|
-
function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, }) {
|
|
50
|
-
const shouldTruncateText = numberOfLines && numberOfLines > 0;
|
|
51
|
-
const className = classnames__default["default"](styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
|
|
52
|
-
let truncateLines;
|
|
53
|
-
if (shouldTruncateText) {
|
|
54
|
-
truncateLines = {
|
|
55
|
-
WebkitLineClamp: numberOfLines,
|
|
56
|
-
WebkitBoxOrient: "vertical",
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
return (React__default["default"].createElement(Tag, { id: id, className: className, style: truncateLines }, children));
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
exports.Typography = Typography;
|