@jobber/components 4.18.4 → 4.18.5-test-web-v.11

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.
Files changed (21) hide show
  1. package/dist/Card/index.js +2 -2
  2. package/dist/{Card-a9cb42d4.js → Card-ece8c5a8.js} +1 -1
  3. package/dist/Checkbox/index.js +4 -1
  4. package/dist/{Checkbox-36f63689.js → Checkbox-3bccf65c.js} +37 -13
  5. package/dist/ConfirmationModal/index.js +2 -2
  6. package/dist/{ConfirmationModal-c88e76b3.js → ConfirmationModal-ba91bd1d.js} +1 -1
  7. package/dist/DataDump/index.js +2 -2
  8. package/dist/Drawer/index.js +1 -1
  9. package/dist/FormatFile/index.js +3 -3
  10. package/dist/{FormatFile-aba39490.js → FormatFile-cc6b058c.js} +1 -1
  11. package/dist/Gallery/index.js +3 -3
  12. package/dist/Grid/Grid.d.ts +1 -1
  13. package/dist/Grid/index.js +2 -2
  14. package/dist/InputNumber/InputNumber.d.ts +1 -1
  15. package/dist/Menu/index.js +1 -1
  16. package/dist/{Menu-a1a45452.js → Menu-3e22db94.js} +1 -1
  17. package/dist/Modal/index.js +1 -1
  18. package/dist/{Modal-5b746fd0.js → Modal-48e2708a.js} +1 -1
  19. package/dist/MultiSelect/index.js +4 -1
  20. package/dist/Page/index.js +2 -2
  21. package/package.json +4 -4
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-a9cb42d4.js');
5
+ var Card = require('../Card-ece8c5a8.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-a1a45452.js');
15
+ require('../Menu-3e22db94.js');
16
16
  require('uuid');
17
17
  require('framer-motion');
18
18
  require('@jobber/hooks/useOnKeyDown');
package/dist/{Card-a9cb42d4.js → Card-ece8c5a8.js} RENAMED
@@ -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-a1a45452.js');
8
+ var Menu = require('./Menu-3e22db94.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,9 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Checkbox = require('../Checkbox-36f63689.js');
5
+ var Checkbox = require('../Checkbox-3bccf65c.js');
6
+ require('../tslib.es6-5b8768b7.js');
6
7
  require('react');
8
+ require('uuid');
7
9
  require('classnames');
10
+ require('react-hook-form');
8
11
  require('../style-inject.es-9d2f5f4e.js');
9
12
  require('../Icon-405a216c.js');
10
13
  require('@jobber/design');
package/dist/{Checkbox-36f63689.js → Checkbox-3bccf65c.js} RENAMED
@@ -1,7 +1,10 @@
1
1
  'use strict';
2
2
 
3
+ var tslib_es6 = require('./tslib.es6-5b8768b7.js');
3
4
  var React = require('react');
5
+ var uuid = require('uuid');
4
6
  var classnames = require('classnames');
7
+ var reactHookForm = require('react-hook-form');
5
8
  var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
6
9
  var Icon = require('./Icon-405a216c.js');
7
10
  var Text = require('./Text-e7ed0974.js');
@@ -16,25 +19,46 @@ var styles = {"checkbox":"d-2MyyzKGN0-","wrapper":"OFHQaLxY8zI-","disabled":"HRr
16
19
  styleInject_es.styleInject(css_248z);
17
20
 
18
21
  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)]);
19
38
  const wrapperClassName = classnames__default["default"](styles.wrapper, disabled && styles.disabled);
20
39
  const inputClassName = classnames__default["default"](styles.input, {
21
40
  [styles.indeterminate]: indeterminate,
22
41
  });
23
42
  const iconName = indeterminate ? "minus2" : "checkmark";
24
43
  const labelText = label ? React__default["default"].createElement(Text.Text, null, label) : children;
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
- }
44
+ return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
45
+ var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "name"]);
46
+ const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
47
+ return (React__default["default"].createElement("div", { className: styles.checkbox },
48
+ React__default["default"].createElement("label", { className: wrapperClassName },
49
+ React__default["default"].createElement("span", { className: styles.checkHolder },
50
+ React__default["default"].createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus })),
51
+ React__default["default"].createElement("span", { className: styles.checkBox },
52
+ React__default["default"].createElement(Icon.Icon, { name: iconName, size: "small", color: "white" }))),
53
+ labelText && React__default["default"].createElement("span", { className: styles.label }, labelText)),
54
+ description && (React__default["default"].createElement("div", { className: styles.description },
55
+ React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
56
+ function handleChange(event) {
57
+ const newChecked = event.currentTarget.checked;
58
+ onChange && onChange(newChecked);
59
+ onControllerChange(event);
60
+ }
61
+ } }));
38
62
  }
39
63
 
40
64
  exports.Checkbox = Checkbox;
package/dist/ConfirmationModal/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var ConfirmationModal = require('../ConfirmationModal-c88e76b3.js');
5
+ var ConfirmationModal = require('../ConfirmationModal-ba91bd1d.js');
6
6
  require('react');
7
7
  require('@jobber/hooks/useOnKeyDown');
8
- require('../Modal-5b746fd0.js');
8
+ require('../Modal-48e2708a.js');
9
9
  require('react-dom');
10
10
  require('classnames');
11
11
  require('framer-motion');
package/dist/{ConfirmationModal-c88e76b3.js → ConfirmationModal-ba91bd1d.js} RENAMED
@@ -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-5b746fd0.js');
5
+ var Modal = require('./Modal-48e2708a.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-a9cb42d4.js');
6
+ var Card = require('../Card-ece8c5a8.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-a1a45452.js');
17
+ require('../Menu-3e22db94.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: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";
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: 1080px) {\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-aba39490.js');
5
+ var FormatFile = require('../FormatFile-cc6b058c.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-c88e76b3.js');
15
+ require('../ConfirmationModal-ba91bd1d.js');
16
16
  require('@jobber/hooks/useOnKeyDown');
17
- require('../Modal-5b746fd0.js');
17
+ require('../Modal-48e2708a.js');
18
18
  require('react-dom');
19
19
  require('framer-motion');
20
20
  require('@jobber/hooks/useRefocusOnActivator');
package/dist/{FormatFile-aba39490.js → FormatFile-cc6b058c.js} RENAMED
@@ -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-c88e76b3.js');
8
+ var ConfirmationModal = require('./ConfirmationModal-ba91bd1d.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-aba39490.js');
9
+ var FormatFile = require('../FormatFile-cc6b058c.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-c88e76b3.js');
20
- require('../Modal-5b746fd0.js');
19
+ require('../ConfirmationModal-ba91bd1d.js');
20
+ require('../Modal-48e2708a.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>> | 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: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";
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: 1080px) {.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: 1440px) {.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 / 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";
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 * 1);\n gap: var(--space-base);\n}\n\n@media (min-width: 768px) {\n .IZLiiSquUTM- {\n gap: calc(16px * 1.5);\n gap: var(--space-large);\n }\n}\n\n@media (--medium-screens-and-up) {\n .IZLiiSquUTM- {\n gap: calc(16px * 1.5);\n gap: var(--space-large);\n }\n}\n";
49
49
  var styles = {"grid":"NqFGJV-UF3Q-","gap":"IZLiiSquUTM-"};
50
50
  styleInject_es.styleInject(css_248z$1);
51
51
 
package/dist/InputNumber/InputNumber.d.ts CHANGED
@@ -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" | "prefix" | "suffix"> {
4
4
  value?: number;
5
5
  }
6
6
  export interface InputNumberRef {
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-a1a45452.js');
5
+ var Menu = require('../Menu-3e22db94.js');
6
6
  require('react');
7
7
  require('uuid');
8
8
  require('classnames');
package/dist/{Menu-a1a45452.js → Menu-3e22db94.js} RENAMED
@@ -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: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";
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
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Modal = require('../Modal-5b746fd0.js');
5
+ var Modal = require('../Modal-48e2708a.js');
6
6
  require('react');
7
7
  require('react-dom');
8
8
  require('classnames');
package/dist/{Modal-5b746fd0.js → Modal-48e2708a.js} RENAMED
@@ -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: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";
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
 
package/dist/MultiSelect/index.js CHANGED
@@ -6,9 +6,12 @@ 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-36f63689.js');
9
+ var Checkbox = require('../Checkbox-3bccf65c.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');
12
15
  require('../Typography-fd6f932a.js');
13
16
  require('@jobber/design');
14
17
 
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-a1a45452.js');
14
+ var Menu = require('../Menu-3e22db94.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.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";
30
+ var css_248z = ".pVEdXlwstrc- {\n width: 100%;\n box-sizing: border-box;\n padding: calc(16px * 1);\n padding: var(--space-base);\n}\n\n@media (min-width: 768px) {\n\n.pVEdXlwstrc- {\n padding: calc(16px * 1.5);\n padding: var(--space-large);\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.pVEdXlwstrc- {\n padding: calc(16px * 1.5);\n padding: var(--space-large);\n}\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.4",
3
+ "version": "4.18.5-test-web-v.11+0bb36cd2",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -19,8 +19,8 @@
19
19
  "dist/*"
20
20
  ],
21
21
  "dependencies": {
22
- "@jobber/design": "^0.41.0",
23
- "@jobber/formatters": "*",
22
+ "@jobber/design": "^0.41.3",
23
+ "@jobber/formatters": "^0.2.2",
24
24
  "@jobber/hooks": "^2.1.3",
25
25
  "@popperjs/core": "^2.0.6",
26
26
  "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
83
83
  "> 1%",
84
84
  "IE 10"
85
85
  ],
86
- "gitHead": "fa441edec7a1fb6f6d328209f6fd4ec9b70f1902"
86
+ "gitHead": "0bb36cd23812de2ba9b3fa0f1cd2996ed9c82a2b"
87
87
  }