@jobber/components 4.18.5-test-web-v.11 → 4.18.5-test-web-p.9
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/Card/index.js +2 -2
- package/dist/{Card-ece8c5a8.js → Card-a9cb42d4.js} +1 -1
- package/dist/Checkbox/index.js +1 -4
- package/dist/{Checkbox-3bccf65c.js → Checkbox-36f63689.js} +13 -37
- package/dist/ConfirmationModal/index.js +2 -2
- package/dist/{ConfirmationModal-ba91bd1d.js → ConfirmationModal-c88e76b3.js} +1 -1
- package/dist/DataDump/index.js +2 -2
- package/dist/Drawer/index.js +1 -1
- package/dist/FormatFile/index.js +3 -3
- package/dist/{FormatFile-cc6b058c.js → FormatFile-aba39490.js} +1 -1
- package/dist/Gallery/index.js +3 -3
- package/dist/Grid/Grid.d.ts +1 -1
- package/dist/Grid/index.js +2 -2
- package/dist/InputNumber/InputNumber.d.ts +1 -1
- package/dist/Menu/index.js +1 -1
- package/dist/{Menu-3e22db94.js → Menu-a1a45452.js} +1 -1
- package/dist/Modal/index.js +1 -1
- package/dist/{Modal-48e2708a.js → Modal-5b746fd0.js} +1 -1
- package/dist/MultiSelect/index.js +1 -4
- package/dist/Page/index.js +2 -2
- package/package.json +3 -3
package/dist/Card/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Card = require('../Card-
|
|
5
|
+
var Card = require('../Card-a9cb42d4.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('../style-inject.es-9d2f5f4e.js');
|
|
@@ -12,7 +12,7 @@ require('../Button-7698424c.js');
|
|
|
12
12
|
require('react-router-dom');
|
|
13
13
|
require('../Icon-405a216c.js');
|
|
14
14
|
require('@jobber/design');
|
|
15
|
-
require('../Menu-
|
|
15
|
+
require('../Menu-a1a45452.js');
|
|
16
16
|
require('uuid');
|
|
17
17
|
require('framer-motion');
|
|
18
18
|
require('@jobber/hooks/useOnKeyDown');
|
|
@@ -5,7 +5,7 @@ var classnames = require('classnames');
|
|
|
5
5
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
6
|
var Heading = require('./Heading-a1191b15.js');
|
|
7
7
|
var Button = require('./Button-7698424c.js');
|
|
8
|
-
var Menu = require('./Menu-
|
|
8
|
+
var Menu = require('./Menu-a1a45452.js');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
package/dist/Checkbox/index.js
CHANGED
|
@@ -2,12 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Checkbox = require('../Checkbox-
|
|
6
|
-
require('../tslib.es6-5b8768b7.js');
|
|
5
|
+
var Checkbox = require('../Checkbox-36f63689.js');
|
|
7
6
|
require('react');
|
|
8
|
-
require('uuid');
|
|
9
7
|
require('classnames');
|
|
10
|
-
require('react-hook-form');
|
|
11
8
|
require('../style-inject.es-9d2f5f4e.js');
|
|
12
9
|
require('../Icon-405a216c.js');
|
|
13
10
|
require('@jobber/design');
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-5b8768b7.js');
|
|
4
3
|
var React = require('react');
|
|
5
|
-
var uuid = require('uuid');
|
|
6
4
|
var classnames = require('classnames');
|
|
7
|
-
var reactHookForm = require('react-hook-form');
|
|
8
5
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
9
6
|
var Icon = require('./Icon-405a216c.js');
|
|
10
7
|
var Text = require('./Text-e7ed0974.js');
|
|
@@ -19,46 +16,25 @@ var styles = {"checkbox":"d-2MyyzKGN0-","wrapper":"OFHQaLxY8zI-","disabled":"HRr
|
|
|
19
16
|
styleInject_es.styleInject(css_248z);
|
|
20
17
|
|
|
21
18
|
function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onChange, onFocus, }) {
|
|
22
|
-
const { control, setValue, watch } = reactHookForm.useFormContext() != undefined
|
|
23
|
-
? reactHookForm.useFormContext()
|
|
24
|
-
: // If there isn't a Form Context being provided, get a form for this field.
|
|
25
|
-
reactHookForm.useForm({ mode: "onTouched" });
|
|
26
|
-
const [identifier] = React.useState(uuid.v1());
|
|
27
|
-
/**
|
|
28
|
-
* Generate a name if one is not supplied, this is the name
|
|
29
|
-
* that will be used for react-hook-form and not neccessarily
|
|
30
|
-
* attached to the DOM
|
|
31
|
-
*/
|
|
32
|
-
const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
|
|
33
|
-
React.useEffect(() => {
|
|
34
|
-
if (value != undefined) {
|
|
35
|
-
setValue(controlledName, value);
|
|
36
|
-
}
|
|
37
|
-
}, [value, watch(controlledName)]);
|
|
38
19
|
const wrapperClassName = classnames__default["default"](styles.wrapper, disabled && styles.disabled);
|
|
39
20
|
const inputClassName = classnames__default["default"](styles.input, {
|
|
40
21
|
[styles.indeterminate]: indeterminate,
|
|
41
22
|
});
|
|
42
23
|
const iconName = indeterminate ? "minus2" : "checkmark";
|
|
43
24
|
const labelText = label ? React__default["default"].createElement(Text.Text, null, label) : children;
|
|
44
|
-
return (React__default["default"].createElement(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
React__default["default"].createElement("
|
|
49
|
-
React__default["default"].createElement(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const newChecked = event.currentTarget.checked;
|
|
58
|
-
onChange && onChange(newChecked);
|
|
59
|
-
onControllerChange(event);
|
|
60
|
-
}
|
|
61
|
-
} }));
|
|
25
|
+
return (React__default["default"].createElement("div", { className: styles.checkbox },
|
|
26
|
+
React__default["default"].createElement("label", { className: wrapperClassName },
|
|
27
|
+
React__default["default"].createElement("span", { className: styles.checkHolder },
|
|
28
|
+
React__default["default"].createElement("input", { type: "checkbox", checked: checked, defaultChecked: defaultChecked, className: inputClassName, "aria-label": label, onChange: handleChange, value: value, name: name, disabled: disabled, onFocus: onFocus }),
|
|
29
|
+
React__default["default"].createElement("span", { className: styles.checkBox },
|
|
30
|
+
React__default["default"].createElement(Icon.Icon, { name: iconName, size: "small", color: "white" }))),
|
|
31
|
+
labelText && React__default["default"].createElement("span", { className: styles.label }, labelText)),
|
|
32
|
+
description && (React__default["default"].createElement("div", { className: styles.description },
|
|
33
|
+
React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
|
|
34
|
+
function handleChange(event) {
|
|
35
|
+
const newChecked = event.currentTarget.checked;
|
|
36
|
+
onChange && onChange(newChecked);
|
|
37
|
+
}
|
|
62
38
|
}
|
|
63
39
|
|
|
64
40
|
exports.Checkbox = Checkbox;
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var ConfirmationModal = require('../ConfirmationModal-
|
|
5
|
+
var ConfirmationModal = require('../ConfirmationModal-c88e76b3.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('@jobber/hooks/useOnKeyDown');
|
|
8
|
-
require('../Modal-
|
|
8
|
+
require('../Modal-5b746fd0.js');
|
|
9
9
|
require('react-dom');
|
|
10
10
|
require('classnames');
|
|
11
11
|
require('framer-motion');
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
5
|
-
var Modal = require('./Modal-
|
|
5
|
+
var Modal = require('./Modal-5b746fd0.js');
|
|
6
6
|
var Content = require('./Content-a6590328.js');
|
|
7
7
|
var Markdown = require('./Markdown-53a0bfda.js');
|
|
8
8
|
|
package/dist/DataDump/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var Card = require('../Card-
|
|
6
|
+
var Card = require('../Card-a9cb42d4.js');
|
|
7
7
|
var Content = require('../Content-a6590328.js');
|
|
8
8
|
var Emphasis = require('../Emphasis-76a10790.js');
|
|
9
9
|
require('classnames');
|
|
@@ -14,7 +14,7 @@ require('../Button-7698424c.js');
|
|
|
14
14
|
require('react-router-dom');
|
|
15
15
|
require('../Icon-405a216c.js');
|
|
16
16
|
require('@jobber/design');
|
|
17
|
-
require('../Menu-
|
|
17
|
+
require('../Menu-a1a45452.js');
|
|
18
18
|
require('uuid');
|
|
19
19
|
require('framer-motion');
|
|
20
20
|
require('@jobber/hooks/useOnKeyDown');
|
package/dist/Drawer/index.js
CHANGED
|
@@ -18,7 +18,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
18
18
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
19
19
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
20
20
|
|
|
21
|
-
var css_248z$1 = ":root {\n --drawer-width: calc(var(--space-base) * 17.5);\n --drawer--base-padding: var(--space-base);\n}\n\n.IJAyrFb2GpA- {\n display: none;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1001;\n z-index: var(--elevation-modal);\n overflow: hidden;\n\n /* SPECIAL CASE:\n Drawer is primarily used in Jobber Online and is currently used in a layout\n that rearranges at 640px. For compatibility, this is hardcoded here\n rather than using the breakpoint custom properties.\n DO NOT COPY THIS - USE THE BREAKPOINTS DEFINED IN THE @jobber/design package!\n */\n}\n\n@media (min-width: 640px), print {\n\n.IJAyrFb2GpA- {\n position: relative;\n z-index: auto;\n width: calc((16px * 1) * 17.5);\n width: calc(calc(16px * 1) * 17.5);\n width: var(--drawer-width);\n}\n }\n\n@media (min-width:
|
|
21
|
+
var css_248z$1 = ":root {\n --drawer-width: calc(var(--space-base) * 17.5);\n --drawer--base-padding: var(--space-base);\n}\n\n.IJAyrFb2GpA- {\n display: none;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1001;\n z-index: var(--elevation-modal);\n overflow: hidden;\n\n /* SPECIAL CASE:\n Drawer is primarily used in Jobber Online and is currently used in a layout\n that rearranges at 640px. For compatibility, this is hardcoded here\n rather than using the breakpoint custom properties.\n DO NOT COPY THIS - USE THE BREAKPOINTS DEFINED IN THE @jobber/design package!\n */\n}\n\n@media (min-width: 640px), print {\n\n.IJAyrFb2GpA- {\n position: relative;\n z-index: auto;\n width: calc((16px * 1) * 17.5);\n width: calc(calc(16px * 1) * 17.5);\n width: var(--drawer-width);\n}\n }\n\n@media (min-width:1440px) {\n\n.IJAyrFb2GpA- {\n --drawer-width: calc(var(--space-base) * 26.25);\n}\n }\n\n@media (--large-screens-and-up) {\n\n.IJAyrFb2GpA- {\n --drawer-width: calc(var(--space-base) * 26.25);\n}\n }\n\n.Hsmk6Pg14PQ- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: calc(16px / 16) solid rgb(225, 225, 225);\n border: var(--border-base) solid var(--color-border);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.DwF3Q9EMPvQ- {\n display: -ms-flexbox;\n display: flex;\n}\n\n.TcdyXiTbnMU- {\n display: -ms-flexbox;\n display: flex;\n padding: calc(16px / 2) calc(16px * 1);\n padding: var(--space-small) var(--drawer--base-padding);\n background-color: rgb(244, 244, 244);\n background-color: var(--color-surface--background);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.srL7xqEzwhM- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n height: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n overflow-y: auto;\n}\n\n.p6-yqttoIJI- {\n width: 100%;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n.p6-yqttoIJI- > * {\n --public-content--padding: var(--drawer--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.p6-yqttoIJI- > * > * {\n --public-content--padding: 0;\n}\n";
|
|
22
22
|
var styles$1 = {"container":"IJAyrFb2GpA-","drawer":"Hsmk6Pg14PQ-","open":"DwF3Q9EMPvQ-","header":"TcdyXiTbnMU-","contentScroll":"srL7xqEzwhM-","content":"p6-yqttoIJI-"};
|
|
23
23
|
styleInject_es.styleInject(css_248z$1);
|
|
24
24
|
|
package/dist/FormatFile/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var FormatFile = require('../FormatFile-
|
|
5
|
+
var FormatFile = require('../FormatFile-aba39490.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('filesize');
|
|
@@ -12,9 +12,9 @@ require('react-router-dom');
|
|
|
12
12
|
require('../Icon-405a216c.js');
|
|
13
13
|
require('@jobber/design');
|
|
14
14
|
require('../Typography-fd6f932a.js');
|
|
15
|
-
require('../ConfirmationModal-
|
|
15
|
+
require('../ConfirmationModal-c88e76b3.js');
|
|
16
16
|
require('@jobber/hooks/useOnKeyDown');
|
|
17
|
-
require('../Modal-
|
|
17
|
+
require('../Modal-5b746fd0.js');
|
|
18
18
|
require('react-dom');
|
|
19
19
|
require('framer-motion');
|
|
20
20
|
require('@jobber/hooks/useRefocusOnActivator');
|
|
@@ -5,7 +5,7 @@ var classnames = require('classnames');
|
|
|
5
5
|
var getHumanReadableFileSize = require('filesize');
|
|
6
6
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
7
7
|
var Button = require('./Button-7698424c.js');
|
|
8
|
-
var ConfirmationModal = require('./ConfirmationModal-
|
|
8
|
+
var ConfirmationModal = require('./ConfirmationModal-c88e76b3.js');
|
|
9
9
|
var Glimmer = require('./Glimmer-f670c24e.js');
|
|
10
10
|
var Icon = require('./Icon-405a216c.js');
|
|
11
11
|
var Typography = require('./Typography-fd6f932a.js');
|
package/dist/Gallery/index.js
CHANGED
|
@@ -6,7 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
8
8
|
var LightBox = require('../LightBox-b59ee23b.js');
|
|
9
|
-
var FormatFile = require('../FormatFile-
|
|
9
|
+
var FormatFile = require('../FormatFile-aba39490.js');
|
|
10
10
|
var Button = require('../Button-7698424c.js');
|
|
11
11
|
require('framer-motion');
|
|
12
12
|
require('react-dom');
|
|
@@ -16,8 +16,8 @@ require('@jobber/hooks/useOnKeyDown');
|
|
|
16
16
|
require('@jobber/hooks/useFocusTrap');
|
|
17
17
|
require('../ButtonDismiss-c7ee94a9.js');
|
|
18
18
|
require('filesize');
|
|
19
|
-
require('../ConfirmationModal-
|
|
20
|
-
require('../Modal-
|
|
19
|
+
require('../ConfirmationModal-c88e76b3.js');
|
|
20
|
+
require('../Modal-5b746fd0.js');
|
|
21
21
|
require('../Heading-a1191b15.js');
|
|
22
22
|
require('../Typography-fd6f932a.js');
|
|
23
23
|
require('../Content-a6590328.js');
|
package/dist/Grid/Grid.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ interface GridProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* Array of `Grid.Cell` children
|
|
18
18
|
*/
|
|
19
|
-
readonly children: Array<ReactElement<GridCellProps
|
|
19
|
+
readonly children: Array<ReactElement<GridCellProps>>;
|
|
20
20
|
}
|
|
21
21
|
export declare const GRID_TEST_ID = "ATL-Grid";
|
|
22
22
|
export declare function Grid({ alignItems, gap, children, }: GridProps): JSX.Element;
|
package/dist/Grid/index.js
CHANGED
|
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
14
14
|
|
|
15
|
-
var css_248z$2 = ".YJHtDDKq6WI- {\n grid-column: initial;\n grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width:
|
|
15
|
+
var css_248z$2 = ".YJHtDDKq6WI- {\n grid-column: initial;\n grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width:490px) {.YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-sm);\n}\n }@media (--small-screens-and-up) {.YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-sm);\n}\n }@media (min-width:768px) {.YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-md);\n}\n }@media (--medium-screens-and-up) {.YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-md);\n}\n }@media (min-width:1440px) {.YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-lg);\n}\n }@media (--large-screens-and-up) {.YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-lg);\n}\n }@media (min-width:1680px) {.YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-xl);\n}\n }@media (--extra-large-screens-and-up) {.YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-xl);\n}\n }\n";
|
|
16
16
|
var styles$1 = {"gridCell":"YJHtDDKq6WI-"};
|
|
17
17
|
styleInject_es.styleInject(css_248z$2);
|
|
18
18
|
|
|
@@ -45,7 +45,7 @@ function getSizeCSSVariables(size) {
|
|
|
45
45
|
};
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
var css_248z$1 = ".NqFGJV-UF3Q- {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.IZLiiSquUTM- {\n gap: calc(16px
|
|
48
|
+
var css_248z$1 = ".NqFGJV-UF3Q- {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.IZLiiSquUTM- {\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n\n@media (min-width:768px) {\n .IZLiiSquUTM- {\n gap: calc(16px * 1);\n gap: var(--space-base);\n }\n}\n\n@media (--medium-screens-and-up) {\n .IZLiiSquUTM- {\n gap: calc(16px * 1);\n gap: var(--space-base);\n }\n}\n";
|
|
49
49
|
var styles = {"grid":"NqFGJV-UF3Q-","gap":"IZLiiSquUTM-"};
|
|
50
50
|
styleInject_es.styleInject(css_248z$1);
|
|
51
51
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { CommonFormFieldProps, FormFieldProps } from "../FormField";
|
|
3
|
-
interface InputNumberProps extends CommonFormFieldProps, Pick<FormFieldProps, "maxLength" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "readonly" | "defaultValue" | "keyboard"
|
|
3
|
+
interface InputNumberProps extends CommonFormFieldProps, Pick<FormFieldProps, "maxLength" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "readonly" | "defaultValue" | "keyboard"> {
|
|
4
4
|
value?: number;
|
|
5
5
|
}
|
|
6
6
|
export interface InputNumberRef {
|
package/dist/Menu/index.js
CHANGED
|
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
16
16
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
17
17
|
|
|
18
|
-
var css_248z = ".dT6M9tp1sZc- * {\n box-sizing: border-box;\n}\n\n.dT6M9tp1sZc- {\n display: inline-block;\n position: relative;\n}\n\n.Qmxlsj0D3qM- {\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:
|
|
18
|
+
var css_248z = ".dT6M9tp1sZc- * {\n box-sizing: border-box;\n}\n\n.dT6M9tp1sZc- {\n display: inline-block;\n position: relative;\n}\n\n.Qmxlsj0D3qM- {\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.Qmxlsj0D3qM- {\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(225, 225, 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.Qmxlsj0D3qM- {\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(225, 225, 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.QTisUfiHwL4- {\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.QTisUfiHwL4- {\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.qsch1dlpOHc- {\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.qsch1dlpOHc- {\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._0xR9-oxWMOU- {\n right: 0;\n left: auto;\n}\n }\n\n@media (--small-screens-and-up) {\n\n._0xR9-oxWMOU- {\n right: 0;\n left: auto;\n}\n }\n\n@media (min-width:490px) {\n\n.gaZwsdyoG0k- {\n right: auto;\n left: 0;\n}\n }\n\n@media (--small-screens-and-up) {\n\n.gaZwsdyoG0k- {\n right: auto;\n left: 0;\n}\n }\n\n.LaKFjYCLHZc- {\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n border-bottom: calc(16px / 16) dotted rgb(225, 225, 225);\n border-bottom: var(--border-base) dotted var(--color-border);\n}\n\n.LaKFjYCLHZc-:first-of-type {\n padding-top: 0;\n}\n\n.LaKFjYCLHZc-:last-of-type {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n._7HB7dWnqCi0- {\n padding: calc(16px / 2);\n padding: var(--space-small);\n}\n\n.ZuceCiefKqw- {\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.ZuceCiefKqw-:hover,\n.ZuceCiefKqw-:focus {\n background-color: rgb(250, 246, 219);\n background-color: var(--color-surface--hover);\n outline-color: rgb(231, 213, 87);\n outline-color: var(--color-focus);\n}\n\n.Bz8TONF8kws- {\n margin-right: calc(16px * 1);\n margin-right: var(--space-base);\n}\n\n.eKnUAucwwWU- {\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.eKnUAucwwWU- {\n background-color: transparent;\n}\n }\n\n@media (--small-screens-and-up) {\n\n.eKnUAucwwWU- {\n background-color: transparent;\n}\n }\n\n.oaxefr58z-E- {\n width: 100%;\n}\n\n.vz9opIdwHFg- {\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";
|
|
19
19
|
var styles = {"wrapper":"dT6M9tp1sZc-","menu":"Qmxlsj0D3qM-","above":"QTisUfiHwL4-","below":"qsch1dlpOHc-","left":"_0xR9-oxWMOU-","right":"gaZwsdyoG0k-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","icon":"Bz8TONF8kws-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
|
|
20
20
|
styleInject_es.styleInject(css_248z);
|
|
21
21
|
|
package/dist/Modal/index.js
CHANGED
|
@@ -18,7 +18,7 @@ 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: var(--space-base);\n}\n\n@media (min-width:
|
|
21
|
+
var css_248z$1 = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding: var(--space-base);\n}\n\n@media (min-width:768px) {\n :root {\n --modal--padding: var(--space-base) var(--space-large);\n }\n}\n\n@media (--medium-screens-and-up) {\n :root {\n --modal--padding: var(--space-base) var(--space-large);\n }\n}\n\n.QGRLFHPoV5E- {\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.QGRLFHPoV5E-,\n._4WzGOMUGj5I- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n._4WzGOMUGj5I- {\n background-color: rgba(0, 0, 0, 0.32);\n background-color: var(--color-overlay);\n}\n\n.WLId2NJBQcQ- {\n --public-tab--inset: var(--space-large);\n\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(225, 225, 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(231, 213, 87);\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` components public padding to match the modal */\n\n.WLId2NJBQcQ- > * {\n --public-content--padding: var(--modal--padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.WLId2NJBQcQ- > * > * {\n --public-content--padding: 0;\n}\n\n.wjrPpIUNNrk- {\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 padding: var(--modal--padding);\n background-color: rgb(244, 244, 244);\n background-color: var(--color-surface--background);\n}\n\n.rKvigUnOyYE- {\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n._62c8HLZFwvs- {\n display: -ms-flexbox;\n display: flex;\n padding: 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.Xl1Ptn-P9Ew- {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n\n.p2s7GtpoZz0- {\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.p2s7GtpoZz0- > * {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.p2s7GtpoZz0- *:first-child {\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n.p2s7GtpoZz0- *:nth-child(2) {\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n";
|
|
22
22
|
var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-"};
|
|
23
23
|
styleInject_es.styleInject(css_248z$1);
|
|
24
24
|
|
|
@@ -6,12 +6,9 @@ var React = require('react');
|
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
8
8
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
9
|
-
var Checkbox = require('../Checkbox-
|
|
9
|
+
var Checkbox = require('../Checkbox-36f63689.js');
|
|
10
10
|
var Text = require('../Text-e7ed0974.js');
|
|
11
11
|
var Icon = require('../Icon-405a216c.js');
|
|
12
|
-
require('../tslib.es6-5b8768b7.js');
|
|
13
|
-
require('uuid');
|
|
14
|
-
require('react-hook-form');
|
|
15
12
|
require('../Typography-fd6f932a.js');
|
|
16
13
|
require('@jobber/design');
|
|
17
14
|
|
package/dist/Page/index.js
CHANGED
|
@@ -11,7 +11,7 @@ var Text = require('../Text-e7ed0974.js');
|
|
|
11
11
|
var Content = require('../Content-a6590328.js');
|
|
12
12
|
var Markdown = require('../Markdown-53a0bfda.js');
|
|
13
13
|
var Button = require('../Button-7698424c.js');
|
|
14
|
-
var Menu = require('../Menu-
|
|
14
|
+
var Menu = require('../Menu-a1a45452.js');
|
|
15
15
|
var Emphasis = require('../Emphasis-76a10790.js');
|
|
16
16
|
require('../Typography-fd6f932a.js');
|
|
17
17
|
require('react-markdown');
|
|
@@ -27,7 +27,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
27
27
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
28
28
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
29
29
|
|
|
30
|
-
var css_248z = ".pVEdXlwstrc- {\n width: 100%;\n box-sizing: border-box;\n padding: calc(16px * 1
|
|
30
|
+
var css_248z = ".pVEdXlwstrc- {\n width: 100%;\n box-sizing: border-box;\n padding: calc(16px * 1.5);\n padding: var(--space-large);\n}\n\n._9r84iz--C5M- {\n max-width: none;\n}\n\n._0LO26JFXU9g- {\n max-width: calc(16px * 80);\n max-width: calc(var(--base-unit) * 80);\n}\n\n.KiMIF8eFbuE- {\n max-width: calc(16px * 64);\n max-width: calc(var(--base-unit) * 64);\n}\n\n.GCeQrLFyml4- h1 {\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n margin-bottom: calc(16px * 1);\n margin-bottom: var(--space-base);\n}\n\n.GCeQrLFyml4- > .KP-BTjB82iQ- {\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n}\n\n.GCeQrLFyml4-.GuFU-PgC1j4-,\n.GCeQrLFyml4-.qiwlkB5pxkA- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .KP-BTjB82iQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ-,\n.GCeQrLFyml4-.GuFU-PgC1j4- .KP-BTjB82iQ- {\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ- {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.E5FEsck9zwg- {\n -ms-flex: 0 0 100%;\n flex: 0 0 100%;\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n}\n\n.Sn3-wJuNCqk- {\n margin-top: calc(16px / 2);\n margin-top: var(--space-small);\n -ms-flex: 1;\n flex: 1;\n}\n\n.Sn3-wJuNCqk- > div {\n width: 100%;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- {\n margin-top: 0;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .E5FEsck9zwg-,\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin: 0;\n -ms-flex: 0 auto;\n flex: 0 auto;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- + .Sn3-wJuNCqk- {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4- ._9ZKFDK2jL80- {\n margin-bottom: calc(16px * 1);\n margin-bottom: var(--space-base);\n}\n";
|
|
31
31
|
var styles = {"page":"pVEdXlwstrc-","fill":"_9r84iz--C5M-","standard":"_0LO26JFXU9g-","narrow":"KiMIF8eFbuE-","titleBar":"GCeQrLFyml4-","actionGroup":"KP-BTjB82iQ-","large":"GuFU-PgC1j4-","medium":"qiwlkB5pxkA-","small":"CbPnpIk7-EE-","primaryAction":"E5FEsck9zwg-","actionButton":"Sn3-wJuNCqk-","subtitle":"_9ZKFDK2jL80-"};
|
|
32
32
|
styleInject_es.styleInject(css_248z);
|
|
33
33
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.18.5-test-web-
|
|
3
|
+
"version": "4.18.5-test-web-p.9+ef0c9b2c",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dist/*"
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@jobber/design": "^0.41.
|
|
22
|
+
"@jobber/design": "^0.41.0",
|
|
23
23
|
"@jobber/formatters": "^0.2.2",
|
|
24
24
|
"@jobber/hooks": "^2.1.3",
|
|
25
25
|
"@popperjs/core": "^2.0.6",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"> 1%",
|
|
84
84
|
"IE 10"
|
|
85
85
|
],
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "ef0c9b2c1c48e14eafee65f3f1d0da68eca0828b"
|
|
87
87
|
}
|