@jobber/components 4.67.1 → 4.67.2-retheme-co.5
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/Autocomplete/index.js +10 -10
- package/dist/Avatar/index.js +1 -1
- package/dist/{Avatar-76a799fa.js → Avatar-3bb347c0.js} +2 -2
- package/dist/Banner/index.js +7 -7
- package/dist/Button/index.js +2 -2
- package/dist/Button-315fdd36.js +57 -0
- package/dist/ButtonDismiss/index.js +3 -3
- package/dist/{ButtonDismiss-2b98d075.js → ButtonDismiss-10b55ea8.js} +1 -1
- package/dist/Card/index.js +5 -5
- package/dist/Card-fe44ab83.js +93 -0
- package/dist/Checkbox/index.js +3 -3
- package/dist/{Checkbox-ad7ec2e7.js → Checkbox-e13780f7.js} +3 -3
- package/dist/Chip/index.js +4 -4
- package/dist/Chip-ab0db6e3.js +89 -0
- package/dist/Chips/index.js +10 -10
- package/dist/Combobox/index.js +7 -7
- package/dist/{Combobox-eb1e5817.js → Combobox-a211b89c.js} +18 -18
- package/dist/ConfirmationModal/index.js +10 -10
- package/dist/{ConfirmationModal-0f85d96c.js → ConfirmationModal-0d529f1c.js} +3 -3
- package/dist/Content/index.js +1 -1
- package/dist/Content-f562fa97.js +24 -0
- package/dist/DataDump/index.js +7 -7
- package/dist/DataList/index.js +48 -48
- package/dist/DataTable/index.js +17 -17
- package/dist/DatePicker/index.js +3 -3
- package/dist/{DatePicker-c18f1739.js → DatePicker-86ce5543.js} +4 -4
- package/dist/DescriptionList/index.js +3 -3
- package/dist/Disclosure/index.js +3 -3
- package/dist/Divider/index.js +2 -2
- package/dist/Drawer/index.js +8 -8
- package/dist/Emphasis/index.js +2 -2
- package/dist/{Emphasis-b2d1b3aa.js → Emphasis-562dc20f.js} +1 -1
- package/dist/FeatureSwitch/index.js +10 -10
- package/dist/Flex/index.js +2 -2
- package/dist/FormField/index.js +6 -6
- package/dist/{FormField-dfc061ca.js → FormField-81f94a56.js} +6 -6
- package/dist/FormatEmail/index.js +2 -2
- package/dist/FormatFile/index.js +13 -13
- package/dist/FormatFile-4721d6e1.js +121 -0
- package/dist/Gallery/index.js +16 -16
- package/dist/Glimmer/index.js +2 -2
- package/dist/Glimmer-7d30eb94.js +77 -0
- package/dist/Grid/index.js +6 -6
- package/dist/Heading/index.js +2 -2
- package/dist/{Heading-0f4ecb0c.js → Heading-33d621dd.js} +1 -1
- package/dist/InlineLabel/index.js +2 -2
- package/dist/InlineLabel-4d7324ac.js +28 -0
- package/dist/InputAvatar/index.js +8 -8
- package/dist/InputDate/index.js +7 -7
- package/dist/InputEmail/index.js +6 -6
- package/dist/InputFile/index.js +4 -4
- package/dist/{InputFile-540c1657.js → InputFile-818f026a.js} +5 -5
- package/dist/InputGroup/index.js +1 -1
- package/dist/InputGroup-ae670374.js +33 -0
- package/dist/InputNumber/index.js +7 -7
- package/dist/{InputNumber-d9ebabaa.js → InputNumber-4b1b6ec9.js} +1 -1
- package/dist/InputPassword/index.js +6 -6
- package/dist/InputPhoneNumber/index.js +8 -8
- package/dist/InputText/index.js +7 -7
- package/dist/{InputText-f7c45ee5.js → InputText-c9117290.js} +1 -1
- package/dist/InputTime/index.js +6 -6
- package/dist/InputValidation/index.js +3 -3
- package/dist/{InputValidation-179f0926.js → InputValidation-b7b3bc73.js} +3 -3
- package/dist/LightBox/index.js +4 -4
- package/dist/{LightBox-3f4dbc33.js → LightBox-0ed0736a.js} +4 -4
- package/dist/List/index.js +12 -12
- package/dist/Markdown/index.js +6 -6
- package/dist/{Markdown-96070121.js → Markdown-458aeb1e.js} +4 -4
- package/dist/Menu/index.js +3 -3
- package/dist/{Menu-d7ea093c.js → Menu-26149e93.js} +4 -4
- package/dist/Modal/index.js +5 -5
- package/dist/{Modal-70daa0e2.js → Modal-112928c4.js} +7 -7
- package/dist/MultiSelect/index.js +7 -7
- package/dist/{Option-469029b5.js → Option-62da6894.js} +1 -1
- package/dist/Page/index.js +10 -10
- package/dist/Popover/index.js +5 -5
- package/dist/ProgressBar/index.js +1 -1
- package/dist/ProgressBar-795d1357.js +43 -0
- package/dist/RadioGroup/index.js +3 -3
- package/dist/RadioGroup-8af6e169.js +47 -0
- package/dist/RecurringSelect/index.js +23 -23
- package/dist/Select/index.js +7 -7
- package/dist/Spinner/index.js +1 -1
- package/dist/Spinner-ba6cbf66.js +24 -0
- package/dist/StatusLabel/index.js +4 -4
- package/dist/Switch/index.js +2 -2
- package/dist/Switch-bae6ee85.js +56 -0
- package/dist/Table/index.js +4 -4
- package/dist/Tabs/index.js +3 -3
- package/dist/Text/index.js +2 -2
- package/dist/{Text-4a2bc89f.js → Text-982ed306.js} +1 -1
- package/dist/Toast/index.js +4 -4
- package/dist/Tooltip/index.js +1 -1
- package/dist/{Tooltip-6b12f1c2.js → Tooltip-1b266564.js} +2 -2
- package/dist/Typography/index.js +1 -1
- package/dist/Typography-702ee9a7.js +62 -0
- package/package.json +3 -3
- package/rollup.config.js +1 -1
- package/dist/Button-163a0641.js +0 -57
- package/dist/Card-3178033c.js +0 -93
- package/dist/Chip-168acf3e.js +0 -89
- package/dist/Content-2ca1ffe1.js +0 -24
- 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/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
|
@@ -2,23 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var InputNumber = require('../InputNumber-
|
|
5
|
+
var InputNumber = require('../InputNumber-4b1b6ec9.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../FormField-
|
|
7
|
+
require('../FormField-81f94a56.js');
|
|
8
8
|
require('../tslib.es6-5b8768b7.js');
|
|
9
9
|
require('uuid');
|
|
10
10
|
require('react-hook-form');
|
|
11
11
|
require('../style-inject.es-9d2f5f4e.js');
|
|
12
12
|
require('classnames');
|
|
13
|
-
require('../Button-
|
|
13
|
+
require('../Button-315fdd36.js');
|
|
14
14
|
require('react-router-dom');
|
|
15
15
|
require('../Icon-405a216c.js');
|
|
16
16
|
require('@jobber/design');
|
|
17
|
-
require('../Typography-
|
|
18
|
-
require('../Text-
|
|
19
|
-
require('../InputValidation-
|
|
17
|
+
require('../Typography-702ee9a7.js');
|
|
18
|
+
require('../Text-982ed306.js');
|
|
19
|
+
require('../InputValidation-b7b3bc73.js');
|
|
20
20
|
require('framer-motion');
|
|
21
|
-
require('../Spinner-
|
|
21
|
+
require('../Spinner-ba6cbf66.js');
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var FormField = require('./FormField-
|
|
4
|
+
var FormField = require('./FormField-81f94a56.js');
|
|
5
5
|
|
|
6
6
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
7
7
|
|
|
@@ -3,21 +3,21 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var FormField = require('../FormField-
|
|
6
|
+
var FormField = require('../FormField-81f94a56.js');
|
|
7
7
|
require('../tslib.es6-5b8768b7.js');
|
|
8
8
|
require('uuid');
|
|
9
9
|
require('react-hook-form');
|
|
10
10
|
require('../style-inject.es-9d2f5f4e.js');
|
|
11
11
|
require('classnames');
|
|
12
|
-
require('../Button-
|
|
12
|
+
require('../Button-315fdd36.js');
|
|
13
13
|
require('react-router-dom');
|
|
14
14
|
require('../Icon-405a216c.js');
|
|
15
15
|
require('@jobber/design');
|
|
16
|
-
require('../Typography-
|
|
17
|
-
require('../Text-
|
|
18
|
-
require('../InputValidation-
|
|
16
|
+
require('../Typography-702ee9a7.js');
|
|
17
|
+
require('../Text-982ed306.js');
|
|
18
|
+
require('../InputValidation-b7b3bc73.js');
|
|
19
19
|
require('framer-motion');
|
|
20
|
-
require('../Spinner-
|
|
20
|
+
require('../Spinner-ba6cbf66.js');
|
|
21
21
|
|
|
22
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
23
|
|
|
@@ -6,25 +6,25 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactHookForm = require('react-hook-form');
|
|
8
8
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
9
|
-
var FormField = require('../FormField-
|
|
9
|
+
var FormField = require('../FormField-81f94a56.js');
|
|
10
10
|
require('uuid');
|
|
11
11
|
require('classnames');
|
|
12
|
-
require('../Button-
|
|
12
|
+
require('../Button-315fdd36.js');
|
|
13
13
|
require('react-router-dom');
|
|
14
14
|
require('../Icon-405a216c.js');
|
|
15
15
|
require('@jobber/design');
|
|
16
|
-
require('../Typography-
|
|
17
|
-
require('../Text-
|
|
18
|
-
require('../InputValidation-
|
|
16
|
+
require('../Typography-702ee9a7.js');
|
|
17
|
+
require('../Text-982ed306.js');
|
|
18
|
+
require('../InputValidation-b7b3bc73.js');
|
|
19
19
|
require('framer-motion');
|
|
20
|
-
require('../Spinner-
|
|
20
|
+
require('../Spinner-ba6cbf66.js');
|
|
21
21
|
|
|
22
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
23
|
|
|
24
24
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
25
25
|
|
|
26
|
-
var css_248z = ".
|
|
27
|
-
var styles = {"mask":"
|
|
26
|
+
var css_248z = ".InputMask__mask---retheme- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1;\n z-index: var(--elevation-base);\n height: var(--field--height);\n padding-top: var(--field--padding-top);\n padding-bottom: var(--field--padding-bottom);\n padding-left: var(--field--padding-left);\n padding-right: var(--field--padding-right);\n color: rgb(181, 181, 181);\n color: var(--color-grey);\n font-family: inherit;\n font-size: inherit;\n line-height: var(--field--value-lineHeight);\n pointer-events: none;\n}\n\n.InputMask__hiddenValue---retheme- {\n visibility: hidden;\n opacity: 0;\n}\n";
|
|
27
|
+
var styles = {"mask":"InputMask__mask---retheme-","hiddenValue":"InputMask__hiddenValue---retheme-"};
|
|
28
28
|
styleInject_es.styleInject(css_248z);
|
|
29
29
|
|
|
30
30
|
function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
|
package/dist/InputText/index.js
CHANGED
|
@@ -2,23 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var InputText = require('../InputText-
|
|
5
|
+
var InputText = require('../InputText-c9117290.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../FormField-
|
|
7
|
+
require('../FormField-81f94a56.js');
|
|
8
8
|
require('../tslib.es6-5b8768b7.js');
|
|
9
9
|
require('uuid');
|
|
10
10
|
require('react-hook-form');
|
|
11
11
|
require('../style-inject.es-9d2f5f4e.js');
|
|
12
12
|
require('classnames');
|
|
13
|
-
require('../Button-
|
|
13
|
+
require('../Button-315fdd36.js');
|
|
14
14
|
require('react-router-dom');
|
|
15
15
|
require('../Icon-405a216c.js');
|
|
16
16
|
require('@jobber/design');
|
|
17
|
-
require('../Typography-
|
|
18
|
-
require('../Text-
|
|
19
|
-
require('../InputValidation-
|
|
17
|
+
require('../Typography-702ee9a7.js');
|
|
18
|
+
require('../Text-982ed306.js');
|
|
19
|
+
require('../InputValidation-b7b3bc73.js');
|
|
20
20
|
require('framer-motion');
|
|
21
|
-
require('../Spinner-
|
|
21
|
+
require('../Spinner-ba6cbf66.js');
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var FormField = require('./FormField-
|
|
4
|
+
var FormField = require('./FormField-81f94a56.js');
|
|
5
5
|
|
|
6
6
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
7
7
|
|
package/dist/InputTime/index.js
CHANGED
|
@@ -6,20 +6,20 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var debounce = require('lodash/debounce');
|
|
8
8
|
var temporal = require('@std-proposal/temporal');
|
|
9
|
-
var FormField = require('../FormField-
|
|
9
|
+
var FormField = require('../FormField-81f94a56.js');
|
|
10
10
|
require('uuid');
|
|
11
11
|
require('react-hook-form');
|
|
12
12
|
require('../style-inject.es-9d2f5f4e.js');
|
|
13
13
|
require('classnames');
|
|
14
|
-
require('../Button-
|
|
14
|
+
require('../Button-315fdd36.js');
|
|
15
15
|
require('react-router-dom');
|
|
16
16
|
require('../Icon-405a216c.js');
|
|
17
17
|
require('@jobber/design');
|
|
18
|
-
require('../Typography-
|
|
19
|
-
require('../Text-
|
|
20
|
-
require('../InputValidation-
|
|
18
|
+
require('../Typography-702ee9a7.js');
|
|
19
|
+
require('../Text-982ed306.js');
|
|
20
|
+
require('../InputValidation-b7b3bc73.js');
|
|
21
21
|
require('framer-motion');
|
|
22
|
-
require('../Spinner-
|
|
22
|
+
require('../Spinner-ba6cbf66.js');
|
|
23
23
|
|
|
24
24
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
25
|
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var InputValidation = require('../InputValidation-
|
|
5
|
+
var InputValidation = require('../InputValidation-b7b3bc73.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('framer-motion');
|
|
8
8
|
require('../style-inject.es-9d2f5f4e.js');
|
|
9
|
-
require('../Text-
|
|
10
|
-
require('../Typography-
|
|
9
|
+
require('../Text-982ed306.js');
|
|
10
|
+
require('../Typography-702ee9a7.js');
|
|
11
11
|
require('classnames');
|
|
12
12
|
require('../Icon-405a216c.js');
|
|
13
13
|
require('@jobber/design');
|
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var framerMotion = require('framer-motion');
|
|
5
5
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
|
-
var Text = require('./Text-
|
|
6
|
+
var Text = require('./Text-982ed306.js');
|
|
7
7
|
var Icon = require('./Icon-405a216c.js');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
10
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
|
|
13
|
-
var css_248z = ".
|
|
14
|
-
var styles = {"hasValidationMessage":"
|
|
13
|
+
var css_248z = ".InputValidation__hasValidationMessage---retheme- {\n margin-top: calc(16px / 4);\n margin-top: var(--space-smaller);\n}\n\n.InputValidation__message---retheme- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n padding: calc(16px / 4);\n padding: var(--space-smaller);\n padding-left: 0;\n}\n\n.InputValidation__message---retheme- > svg {\n margin-right: calc(16px / 4);\n margin-right: var(--space-smaller);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -ms-flex-item-align: start;\n align-self: flex-start;\n}\n\n.InputValidation__message---retheme-: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";
|
|
14
|
+
var styles = {"hasValidationMessage":"InputValidation__hasValidationMessage---retheme-","message":"InputValidation__message---retheme-"};
|
|
15
15
|
styleInject_es.styleInject(css_248z);
|
|
16
16
|
|
|
17
17
|
function InputValidation({ message }) {
|
package/dist/LightBox/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var LightBox = require('../LightBox-
|
|
5
|
+
var LightBox = require('../LightBox-0ed0736a.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('framer-motion');
|
|
8
8
|
require('react-dom');
|
|
@@ -11,13 +11,13 @@ require('@jobber/hooks/useRefocusOnActivator');
|
|
|
11
11
|
require('@jobber/hooks/useOnKeyDown');
|
|
12
12
|
require('@jobber/hooks/useFocusTrap');
|
|
13
13
|
require('../style-inject.es-9d2f5f4e.js');
|
|
14
|
-
require('../ButtonDismiss-
|
|
15
|
-
require('../Button-
|
|
14
|
+
require('../ButtonDismiss-10b55ea8.js');
|
|
15
|
+
require('../Button-315fdd36.js');
|
|
16
16
|
require('classnames');
|
|
17
17
|
require('react-router-dom');
|
|
18
18
|
require('../Icon-405a216c.js');
|
|
19
19
|
require('@jobber/design');
|
|
20
|
-
require('../Typography-
|
|
20
|
+
require('../Typography-702ee9a7.js');
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
|
|
@@ -8,8 +8,8 @@ var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
|
8
8
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
9
9
|
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
10
10
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
11
|
-
var ButtonDismiss = require('./ButtonDismiss-
|
|
12
|
-
var Button = require('./Button-
|
|
11
|
+
var ButtonDismiss = require('./ButtonDismiss-10b55ea8.js');
|
|
12
|
+
var Button = require('./Button-315fdd36.js');
|
|
13
13
|
|
|
14
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
15
|
|
|
@@ -17,8 +17,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
17
17
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
18
18
|
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
19
19
|
|
|
20
|
-
var css_248z = ".
|
|
21
|
-
var styles = {"next":"
|
|
20
|
+
var css_248z = ".LightBox__next---retheme-,\n.LightBox__prev---retheme- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 50%;\n z-index: 1;\n z-index: var(--elevation-base);\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n\n.LightBox__next---retheme- {\n right: calc(16px * 1);\n right: var(--space-base);\n}\n\n.LightBox__prev---retheme- {\n left: calc(16px * 1);\n left: var(--space-base);\n}\n\n.LightBox__lightboxWrapper---retheme- {\n display: -ms-flexbox;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1001;\n z-index: var(--elevation-modal);\n width: 100%;\n height: 100%;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.LightBox__toolbar---retheme- {\n display: -ms-flexbox;\n display: flex;\n z-index: 1;\n z-index: var(--elevation-base);\n padding: calc(16px / 2) calc(16px * 1);\n padding: var(--space-small) var(--space-base);\n color: rgb(193, 201, 206);\n color: var(--color-text--reverse--secondary);\n font-size: calc(16px * 1);\n font-size: var(--typography--fontSize-large);\n background-color: rgb(1, 41, 57);\n background-color: var(--color-surface--reverse);\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.LightBox__title---retheme- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.LightBox__imagesWrapper---retheme- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n position: relative;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n min-height: 0;\n}\n\n.LightBox__overlay---retheme- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.32);\n background-color: var(--color-overlay);\n}\n\n.LightBox__image---retheme- {\n position: absolute;\n top: 50%;\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n}\n";
|
|
21
|
+
var styles = {"next":"LightBox__next---retheme-","prev":"LightBox__prev---retheme-","lightboxWrapper":"LightBox__lightboxWrapper---retheme-","toolbar":"LightBox__toolbar---retheme-","title":"LightBox__title---retheme-","imagesWrapper":"LightBox__imagesWrapper---retheme-","overlay":"LightBox__overlay---retheme-","image":"LightBox__image---retheme-"};
|
|
22
22
|
styleInject_es.styleInject(css_248z);
|
|
23
23
|
|
|
24
24
|
/* eslint-disable max-statements */
|
package/dist/List/index.js
CHANGED
|
@@ -8,14 +8,14 @@ var get = require('lodash/get');
|
|
|
8
8
|
var groupBy = require('lodash/groupBy');
|
|
9
9
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
10
10
|
var Icon = require('../Icon-405a216c.js');
|
|
11
|
-
var Text = require('../Text-
|
|
12
|
-
var Heading = require('../Heading-
|
|
13
|
-
var Typography = require('../Typography-
|
|
14
|
-
var Markdown = require('../Markdown-
|
|
15
|
-
var Emphasis = require('../Emphasis-
|
|
11
|
+
var Text = require('../Text-982ed306.js');
|
|
12
|
+
var Heading = require('../Heading-33d621dd.js');
|
|
13
|
+
var Typography = require('../Typography-702ee9a7.js');
|
|
14
|
+
var Markdown = require('../Markdown-458aeb1e.js');
|
|
15
|
+
var Emphasis = require('../Emphasis-562dc20f.js');
|
|
16
16
|
require('@jobber/design');
|
|
17
17
|
require('react-markdown');
|
|
18
|
-
require('../Content-
|
|
18
|
+
require('../Content-f562fa97.js');
|
|
19
19
|
|
|
20
20
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
21
|
|
|
@@ -24,16 +24,16 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
|
24
24
|
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
|
|
25
25
|
var groupBy__default = /*#__PURE__*/_interopDefaultLegacy(groupBy);
|
|
26
26
|
|
|
27
|
-
var css_248z$2 = ".
|
|
28
|
-
var styles$1 = {"list":"
|
|
27
|
+
var css_248z$2 = ".List__list---retheme- {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.List__item---retheme-:not(:last-child) {\n border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.List__section---retheme- {\n position: relative;\n}\n\n.List__section---retheme-:not(:last-child) .List__list---retheme- {\n padding-bottom: calc(16px * 1.5);\n padding-bottom: var(--space-large);\n}\n";
|
|
28
|
+
var styles$1 = {"list":"List__list---retheme-","item":"List__item---retheme-","section":"List__section---retheme-"};
|
|
29
29
|
styleInject_es.styleInject(css_248z$2);
|
|
30
30
|
|
|
31
|
-
var css_248z$1 = ".
|
|
32
|
-
var sectionStyles = {"sectionHeader":"
|
|
31
|
+
var css_248z$1 = ".SectionHeader__sectionHeader---retheme- {\n position: sticky;\n top: 0;\n padding: calc(16px / 2) calc(16px * 1);\n padding: var(--space-small) var(--space-base);\n border-bottom: 1px solid rgb(1, 41, 57);\n border-bottom: 1px solid var(--color-border--section);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n.SectionHeader__greyBlue---retheme- {\n border-bottom-color: rgb(147, 161, 169);\n border-bottom-color: var(--color-greyBlue--light);\n color: rgb(147, 161, 169);\n color: var(--color-greyBlue--light);\n}\n\n.SectionHeader__green---retheme- {\n border-bottom-color: rgb(125, 176, 14);\n border-bottom-color: var(--color-green);\n color: rgb(125, 176, 14);\n color: var(--color-green);\n}\n\n.SectionHeader__blue---retheme-,\n.SectionHeader__archived---retheme- {\n border-bottom-color: rgb(1, 41, 57);\n border-bottom-color: var(--color-blue);\n color: rgb(1, 41, 57);\n color: var(--color-blue);\n}\n\n.SectionHeader__orange---retheme- {\n border-bottom-color: rgb(243, 150, 36);\n border-bottom-color: var(--color-orange);\n color: rgb(243, 150, 36);\n color: var(--color-orange);\n}\n\n.SectionHeader__red---retheme- {\n border-bottom-color: rgb(201, 66, 33);\n border-bottom-color: var(--color-red);\n color: rgb(201, 66, 33);\n color: var(--color-red);\n}\n\n.SectionHeader__teal---retheme- {\n border-bottom-color: rgb(62, 173, 146);\n border-bottom-color: var(--color-teal);\n color: rgb(62, 173, 146);\n color: var(--color-teal);\n}\n";
|
|
32
|
+
var sectionStyles = {"sectionHeader":"SectionHeader__sectionHeader---retheme-","greyBlue":"SectionHeader__greyBlue---retheme-","green":"SectionHeader__green---retheme-","blue":"SectionHeader__blue---retheme-","archived":"SectionHeader__archived---retheme-","orange":"SectionHeader__orange---retheme-","red":"SectionHeader__red---retheme-","teal":"SectionHeader__teal---retheme-"};
|
|
33
33
|
styleInject_es.styleInject(css_248z$1);
|
|
34
34
|
|
|
35
|
-
var css_248z = ".
|
|
36
|
-
var styles = {"action":"
|
|
35
|
+
var css_248z = ".ListItem__action---retheme- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border: none;\n text-align: left;\n -webkit-text-decoration: none;\n text-decoration: none;\n background-color: transparent;\n transition: background-color 200ms;\n transition: background-color var(--timing-base);\n -webkit-appearance: none;\n appearance: none;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.ListItem__action---retheme- > * {\n padding: calc(16px / 2);\n padding: var(--space-small);\n}\n\n.ListItem__hoverable---retheme- {\n cursor: pointer;\n}\n\n.ListItem__hoverable---retheme-:hover,\n.ListItem__hoverable---retheme-:focus {\n outline: none;\n background-color: rgb(244, 246, 250);\n background-color: var(--color-surface--hover);\n}\n\n.ListItem__icon---retheme- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: calc(16px * 1.5);\n width: var(--space-large);\n height: calc(16px * 1.5);\n height: var(--space-large);\n box-sizing: content-box;\n}\n\n.ListItem__info---retheme- {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n min-width: 0;\n -ms-flex-item-align: center;\n align-self: center;\n}\n\n.ListItem__amount---retheme- {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n text-align: right;\n}\n\n/* States */\n\n.ListItem__isActive---retheme- {\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n}\n\n.ListItem__isActive---retheme-:hover,\n.ListItem__isActive---retheme-:focus {\n background-color: rgb(193, 201, 206);\n background-color: var(--color-surface--background--hover);\n}\n\n/* TODO: Move truncate in typography */\n\n.ListItem__truncate---retheme- {\n display: block;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
36
|
+
var styles = {"action":"ListItem__action---retheme-","hoverable":"ListItem__hoverable---retheme-","icon":"ListItem__icon---retheme-","info":"ListItem__info---retheme-","amount":"ListItem__amount---retheme-","isActive":"ListItem__isActive---retheme-","truncate":"ListItem__truncate---retheme-"};
|
|
37
37
|
styleInject_es.styleInject(css_248z);
|
|
38
38
|
|
|
39
39
|
function ListItem({ caption, content, icon, iconColor, id, isActive, onClick, title, url, value, }) {
|
package/dist/Markdown/index.js
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Markdown = require('../Markdown-
|
|
5
|
+
var Markdown = require('../Markdown-458aeb1e.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-markdown');
|
|
8
|
-
require('../Text-
|
|
9
|
-
require('../Typography-
|
|
8
|
+
require('../Text-982ed306.js');
|
|
9
|
+
require('../Typography-702ee9a7.js');
|
|
10
10
|
require('classnames');
|
|
11
11
|
require('../style-inject.es-9d2f5f4e.js');
|
|
12
|
-
require('../Emphasis-
|
|
13
|
-
require('../Heading-
|
|
14
|
-
require('../Content-
|
|
12
|
+
require('../Emphasis-562dc20f.js');
|
|
13
|
+
require('../Heading-33d621dd.js');
|
|
14
|
+
require('../Content-f562fa97.js');
|
|
15
15
|
|
|
16
16
|
|
|
17
17
|
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var ReactMarkdown = require('react-markdown');
|
|
5
|
-
var Text = require('./Text-
|
|
6
|
-
var Emphasis = require('./Emphasis-
|
|
7
|
-
var Heading = require('./Heading-
|
|
8
|
-
var Content = require('./Content-
|
|
5
|
+
var Text = require('./Text-982ed306.js');
|
|
6
|
+
var Emphasis = require('./Emphasis-562dc20f.js');
|
|
7
|
+
var Heading = require('./Heading-33d621dd.js');
|
|
8
|
+
var Content = require('./Content-f562fa97.js');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
package/dist/Menu/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Menu = require('../Menu-
|
|
5
|
+
var Menu = require('../Menu-26149e93.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('uuid');
|
|
8
8
|
require('classnames');
|
|
@@ -10,11 +10,11 @@ require('framer-motion');
|
|
|
10
10
|
require('@jobber/hooks/useOnKeyDown');
|
|
11
11
|
require('@jobber/hooks/useRefocusOnActivator');
|
|
12
12
|
require('../style-inject.es-9d2f5f4e.js');
|
|
13
|
-
require('../Button-
|
|
13
|
+
require('../Button-315fdd36.js');
|
|
14
14
|
require('react-router-dom');
|
|
15
15
|
require('../Icon-405a216c.js');
|
|
16
16
|
require('@jobber/design');
|
|
17
|
-
require('../Typography-
|
|
17
|
+
require('../Typography-702ee9a7.js');
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
@@ -7,8 +7,8 @@ var framerMotion = require('framer-motion');
|
|
|
7
7
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
8
8
|
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
9
9
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
10
|
-
var Button = require('./Button-
|
|
11
|
-
var Typography = require('./Typography-
|
|
10
|
+
var Button = require('./Button-315fdd36.js');
|
|
11
|
+
var Typography = require('./Typography-702ee9a7.js');
|
|
12
12
|
var Icon = require('./Icon-405a216c.js');
|
|
13
13
|
|
|
14
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -16,8 +16,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
17
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
18
18
|
|
|
19
|
-
var css_248z = ".
|
|
20
|
-
var styles = {"wrapper":"
|
|
19
|
+
var css_248z = ".Menu__wrapper---retheme- * {\n box-sizing: border-box;\n}\n\n.Menu__wrapper---retheme- {\n display: inline-block;\n position: relative;\n}\n\n.Menu__menu---retheme- {\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: 6;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: 72vh;\n padding: calc(16px / 2);\n padding: var(--space-small);\n padding-bottom: calc(env(safe-area-inset-bottom) + (16px / 2));\n padding-bottom: calc(env(safe-area-inset-bottom) + calc(16px / 2));\n padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-small));\n border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n -webkit-overflow-scrolling: touch;\n overflow-y: scroll;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n@media (min-width: 490px) {\n\n.Menu__menu---retheme- {\n position: absolute;\n left: auto;\n width: calc(16px * 12.5);\n width: calc(var(--base-unit) * 12.5);\n box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n rgba(0, 0, 0, 0.1),\n 0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n box-shadow: var(--shadow-base);\n padding: calc(16px / 2);\n padding: var(--space-small);\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 overflow: auto;\n}\n }\n\n@media (--small-screens-and-up) {\n\n.Menu__menu---retheme- {\n position: absolute;\n left: auto;\n width: calc(16px * 12.5);\n width: calc(var(--base-unit) * 12.5);\n box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n rgba(0, 0, 0, 0.1),\n 0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n box-shadow: var(--shadow-base);\n padding: calc(16px / 2);\n padding: var(--space-small);\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 overflow: auto;\n}\n }\n\n@media (min-width: 490px) {\n\n.Menu__above---retheme- {\n bottom: 100%;\n margin-bottom: calc(16px / 8);\n margin-bottom: var(--space-smallest);\n}\n }\n\n@media (--small-screens-and-up) {\n\n.Menu__above---retheme- {\n bottom: 100%;\n margin-bottom: calc(16px / 8);\n margin-bottom: var(--space-smallest);\n}\n }\n\n@media (min-width: 490px) {\n\n.Menu__below---retheme- {\n top: 100%;\n bottom: auto;\n margin-top: calc(16px / 8);\n margin-top: var(--space-smallest);\n}\n }\n\n@media (--small-screens-and-up) {\n\n.Menu__below---retheme- {\n top: 100%;\n bottom: auto;\n margin-top: calc(16px / 8);\n margin-top: var(--space-smallest);\n}\n }\n\n@media (min-width: 490px) {\n\n.Menu__left---retheme- {\n right: 0;\n left: auto;\n}\n }\n\n@media (--small-screens-and-up) {\n\n.Menu__left---retheme- {\n right: 0;\n left: auto;\n}\n }\n\n@media (min-width: 490px) {\n\n.Menu__right---retheme- {\n right: auto;\n left: 0;\n}\n }\n\n@media (--small-screens-and-up) {\n\n.Menu__right---retheme- {\n right: auto;\n left: 0;\n}\n }\n\n.Menu__section---retheme- {\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n border-bottom: calc(16px / 16) dotted rgb(217, 223, 225);\n border-bottom: var(--border-base) dotted var(--color-border);\n}\n\n.Menu__section---retheme-:first-of-type {\n padding-top: 0;\n}\n\n.Menu__section---retheme-:last-of-type {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n.Menu__sectionHeader---retheme- {\n padding: calc(16px / 2);\n padding: var(--space-small);\n}\n\n.Menu__action---retheme- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border: none;\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n background-color: transparent;\n cursor: pointer;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.Menu__action---retheme-:hover,\n.Menu__action---retheme-:focus {\n background-color: rgb(244, 246, 250);\n background-color: var(--color-surface--hover);\n outline-color: rgb(147, 161, 169);\n outline-color: var(--color-focus);\n}\n\n.Menu__icon---retheme- {\n margin-right: calc(16px * 1);\n margin-right: var(--space-base);\n}\n\n.Menu__overlay---retheme- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 6;\n z-index: var(--elevation-menu);\n background-color: rgba(0, 0, 0, 0.32);\n background-color: var(--color-overlay);\n}\n\n@media (min-width: 490px) {\n\n.Menu__overlay---retheme- {\n background-color: transparent;\n}\n }\n\n@media (--small-screens-and-up) {\n\n.Menu__overlay---retheme- {\n background-color: transparent;\n}\n }\n\n.Menu__fullWidth---retheme- {\n width: 100%;\n}\n\n.Menu__screenReaderOnly---retheme- {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n";
|
|
20
|
+
var styles = {"wrapper":"Menu__wrapper---retheme-","menu":"Menu__menu---retheme-","above":"Menu__above---retheme-","below":"Menu__below---retheme-","left":"Menu__left---retheme-","right":"Menu__right---retheme-","section":"Menu__section---retheme-","sectionHeader":"Menu__sectionHeader---retheme-","action":"Menu__action---retheme-","icon":"Menu__icon---retheme-","overlay":"Menu__overlay---retheme-","fullWidth":"Menu__fullWidth---retheme-","screenReaderOnly":"Menu__screenReaderOnly---retheme-"};
|
|
21
21
|
styleInject_es.styleInject(css_248z);
|
|
22
22
|
|
|
23
23
|
const variation = {
|
package/dist/Modal/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Modal = require('../Modal-
|
|
5
|
+
var Modal = require('../Modal-112928c4.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-dom');
|
|
8
8
|
require('classnames');
|
|
@@ -11,13 +11,13 @@ require('@jobber/hooks/useRefocusOnActivator');
|
|
|
11
11
|
require('@jobber/hooks/useOnKeyDown');
|
|
12
12
|
require('@jobber/hooks/useFocusTrap');
|
|
13
13
|
require('../style-inject.es-9d2f5f4e.js');
|
|
14
|
-
require('../Heading-
|
|
15
|
-
require('../Typography-
|
|
16
|
-
require('../Button-
|
|
14
|
+
require('../Heading-33d621dd.js');
|
|
15
|
+
require('../Typography-702ee9a7.js');
|
|
16
|
+
require('../Button-315fdd36.js');
|
|
17
17
|
require('react-router-dom');
|
|
18
18
|
require('../Icon-405a216c.js');
|
|
19
19
|
require('@jobber/design');
|
|
20
|
-
require('../ButtonDismiss-
|
|
20
|
+
require('../ButtonDismiss-10b55ea8.js');
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
|
|
@@ -8,9 +8,9 @@ var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
|
8
8
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
9
9
|
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
10
10
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
11
|
-
var Heading = require('./Heading-
|
|
12
|
-
var Button = require('./Button-
|
|
13
|
-
var ButtonDismiss = require('./ButtonDismiss-
|
|
11
|
+
var Heading = require('./Heading-33d621dd.js');
|
|
12
|
+
var Button = require('./Button-315fdd36.js');
|
|
13
|
+
var ButtonDismiss = require('./ButtonDismiss-10b55ea8.js');
|
|
14
14
|
|
|
15
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
16
|
|
|
@@ -18,12 +18,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
18
18
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
19
19
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
20
20
|
|
|
21
|
-
var css_248z$1 = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding-horizontal: var(--space-base);\n --modal--padding-vertical: var(--space-base);\n --modal--padding: var(--modal--padding-vertical)\n var(--modal--padding-horizontal);\n}\n\n@media (min-width: 768px) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n@media (--medium-screens-and-up) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n.
|
|
22
|
-
var styles = {"container":"
|
|
21
|
+
var css_248z$1 = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding-horizontal: var(--space-base);\n --modal--padding-vertical: var(--space-base);\n --modal--padding: var(--modal--padding-vertical)\n var(--modal--padding-horizontal);\n}\n\n@media (min-width: 768px) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n@media (--medium-screens-and-up) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n.Modal__container---retheme- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n z-index: 1001;\n z-index: var(--elevation-modal);\n padding: calc(16px / 2);\n padding: var(--space-small);\n overflow: auto;\n}\n\n.Modal__container---retheme-,\n.Modal__overlay---retheme- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.Modal__overlay---retheme- {\n background-color: rgba(0, 0, 0, 0.32);\n background-color: var(--color-overlay);\n}\n\n.Modal__modal---retheme- {\n position: relative;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: 100%;\n max-width: calc(16px * 37.5);\n max-width: var(--modal--width);\n margin: auto;\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 outline-color: rgb(147, 161, 169);\n outline-color: var(--color-focus);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n/* Adjust `Content` and `Tab` components public padding to match the modal */\n\n.Modal__modal---retheme- > * {\n --public-content--padding: var(--modal--padding);\n --public-tab--inset: var(--modal--padding-horizontal);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.Modal__modal---retheme- > * > * {\n --public-content--padding: 0;\n}\n\n.Modal__header---retheme- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n padding: calc(16px * 1)\n calc(16px * 1);\n padding: var(--modal--padding);\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n}\n\n.Modal__closeButton---retheme- {\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.Modal__actionBar---retheme- {\n display: -ms-flexbox;\n display: flex;\n padding: calc(16px * 1)\n calc(16px * 1);\n padding: var(--modal--padding);\n padding-top: 0;\n -ms-flex: 1 1 100%;\n flex: 1 1 100%;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n.Modal__leftAction---retheme- {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n\n.Modal__rightAction---retheme- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n.Modal__rightAction---retheme- > * {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.Modal__rightAction---retheme- *:first-child {\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n.Modal__rightAction---retheme- *:nth-child(2) {\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n";
|
|
22
|
+
var styles = {"container":"Modal__container---retheme-","overlay":"Modal__overlay---retheme-","modal":"Modal__modal---retheme-","header":"Modal__header---retheme-","closeButton":"Modal__closeButton---retheme-","actionBar":"Modal__actionBar---retheme-","leftAction":"Modal__leftAction---retheme-","rightAction":"Modal__rightAction---retheme-"};
|
|
23
23
|
styleInject_es.styleInject(css_248z$1);
|
|
24
24
|
|
|
25
|
-
var css_248z = ".
|
|
26
|
-
var sizes = {"small":"
|
|
25
|
+
var css_248z = ".Sizes__small---retheme- {\n --modal--padding: var(--space-base);\n --public-tab--inset: var(--space-base);\n max-width: calc(16px * 25);\n max-width: calc(var(--base-unit) * 25);\n}\n\n.Sizes__large---retheme- {\n max-width: calc(16px * 58.75);\n max-width: calc(var(--base-unit) * 58.75);\n}\n";
|
|
26
|
+
var sizes = {"small":"Sizes__small---retheme-","large":"Sizes__large---retheme-"};
|
|
27
27
|
styleInject_es.styleInject(css_248z);
|
|
28
28
|
|
|
29
29
|
function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
|
|
@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
8
|
-
var Checkbox = require('../Checkbox-
|
|
9
|
-
var Text = require('../Text-
|
|
8
|
+
var Checkbox = require('../Checkbox-e13780f7.js');
|
|
9
|
+
var Text = require('../Text-982ed306.js');
|
|
10
10
|
var Icon = require('../Icon-405a216c.js');
|
|
11
11
|
require('../tslib.es6-5b8768b7.js');
|
|
12
12
|
require('uuid');
|
|
13
13
|
require('react-hook-form');
|
|
14
|
-
require('../Typography-
|
|
14
|
+
require('../Typography-702ee9a7.js');
|
|
15
15
|
require('@jobber/design');
|
|
16
16
|
|
|
17
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -19,12 +19,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
19
19
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
20
20
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
21
21
|
|
|
22
|
-
var css_248z$1 = ".
|
|
23
|
-
var styles$1 = {"multiSelectContainer":"
|
|
22
|
+
var css_248z$1 = ".MultiSelect__multiSelectContainer---retheme- {\n position: relative;\n width: 100%;\n}\n\n.MultiSelect__multiSelectContainer---retheme- * {\n box-sizing: border-box;\n}\n\n.MultiSelect__multiSelect---retheme- {\n --field--height: var(--space-largest);\n\n --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n --field--padding-left: var(--space-base);\n --field--padding-right: var(--space-base);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n height: calc(16px * 3);\n height: var(--field--height);\n padding-top: calc((16px * 1) - (16px / 8));\n padding-top: calc(calc(16px * 1) - calc(16px / 8));\n padding-top: var(--field--padding-top);\n padding-bottom: calc((16px * 1) - (16px / 8));\n padding-bottom: calc(calc(16px * 1) - calc(16px / 8));\n padding-bottom: var(--field--padding-bottom);\n padding-left: calc(16px * 1);\n padding-left: var(--field--padding-left);\n padding-right: calc(16px * 1);\n padding-right: var(--field--padding-right);\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.MultiSelect__multiSelect---retheme- p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.MultiSelect__multiSelectContainer---retheme-:hover,\n.MultiSelect__multiSelectContainer---retheme-.MultiSelect__multiSelect---retheme- {\n cursor: pointer;\n caret-color: transparent;\n}\n\n.MultiSelect__multiSelect---retheme-:focus,\n.MultiSelect__multiSelect---retheme-.MultiSelect__active---retheme- {\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.MultiSelect__small---retheme- {\n --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.MultiSelect__large---retheme- {\n --field--padding-left: var(--space-large);\n --field--padding-right: var(--space-large);\n --field--height: calc(var(--space-extravagant));\n}\n";
|
|
23
|
+
var styles$1 = {"multiSelectContainer":"MultiSelect__multiSelectContainer---retheme-","multiSelect":"MultiSelect__multiSelect---retheme-","active":"MultiSelect__active---retheme-","small":"MultiSelect__small---retheme-","large":"MultiSelect__large---retheme-"};
|
|
24
24
|
styleInject_es.styleInject(css_248z$1);
|
|
25
25
|
|
|
26
|
-
var css_248z = ".
|
|
27
|
-
var styles = {"dropDownMenuContainer":"
|
|
26
|
+
var css_248z = ".DropDownMenu__dropDownMenuContainer---retheme- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n z-index: 6;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: calc((16px * 4) * 5);\n max-height: calc(calc(16px * 4) * 5);\n max-height: calc(var(--space-extravagant) * 5);\n box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n rgba(0, 0, 0, 0.1),\n 0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n box-shadow: var(--shadow-base);\n margin: 0;\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 / 4);\n border-radius: var(--radius-large);\n overflow: auto;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n -ms-flex-direction: column;\n flex-direction: column;\n scroll-behavior: smooth;\n}\n\n.DropDownMenu__dropDownMenuContainer---retheme- li {\n list-style: none;\n}\n\n.DropDownMenu__option---retheme- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: calc(16px / 2) calc(16px * 1);\n padding: var(--space-small) var(--space-base);\n cursor: pointer;\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.DropDownMenu__option---retheme-:focus,\n.DropDownMenu__option---retheme-.DropDownMenu__active---retheme- {\n background-color: rgb(244, 246, 250);\n background-color: var(--color-surface--hover);\n outline-color: rgb(147, 161, 169);\n outline-color: var(--color-focus);\n}\n";
|
|
27
|
+
var styles = {"dropDownMenuContainer":"DropDownMenu__dropDownMenuContainer---retheme-","option":"DropDownMenu__option---retheme-","active":"DropDownMenu__active---retheme-"};
|
|
28
28
|
styleInject_es.styleInject(css_248z);
|
|
29
29
|
|
|
30
30
|
function DropDownMenu({ options, setOptions }) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var FormField = require('./FormField-
|
|
4
|
+
var FormField = require('./FormField-81f94a56.js');
|
|
5
5
|
|
|
6
6
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
7
7
|
|