@jobber/components 4.17.1 → 4.17.2-install-re.10

package/dist/Autocomplete/index.js

@@ -13,10 +13,10 @@ var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-fce3bd3e.js');
+var InputText = require('../InputText-20364bbc.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-1a3bafd6.js');
+require('../FormField-64e9c241.js');
 require('uuid');
 require('react-hook-form');
 require('../Button-7698424c.js');

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-405e6575.js');
+var Card = require('../Card-a9cb42d4.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
@@ -12,7 +12,7 @@ require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-d2445bae.js');
+require('../Menu-a1a45452.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/{Card-405e6575.js → Card-a9cb42d4.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-a1191b15.js');
 var Button = require('./Button-7698424c.js');
-var Menu = require('./Menu-d2445bae.js');
+var Menu = require('./Menu-a1a45452.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/ConfirmationModal/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-7835c534.js');
+var ConfirmationModal = require('../ConfirmationModal-c88e76b3.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-29fdefc8.js');
+require('../Modal-5b746fd0.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');

package/dist/{ConfirmationModal-7835c534.js → ConfirmationModal-c88e76b3.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-29fdefc8.js');
+var Modal = require('./Modal-5b746fd0.js');
 var Content = require('./Content-a6590328.js');
 var Markdown = require('./Markdown-53a0bfda.js');
 

package/dist/DataDump/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-405e6575.js');
+var Card = require('../Card-a9cb42d4.js');
 var Content = require('../Content-a6590328.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('classnames');
@@ -14,7 +14,7 @@ require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-d2445bae.js');
+require('../Menu-a1a45452.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/DataTable/index.js

@@ -8,10 +8,10 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-7ac3893b.js');
+var Option = require('../Option-71d4acc2.js');
 var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
-require('../FormField-1a3bafd6.js');
+require('../FormField-64e9c241.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');
@@ -121,7 +121,7 @@ function getSortingSettings(sorting) {
     return sortingSettings;
 }
 
-var css_248z$2 = ".zn0VRVhObt0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  min-height: calc((16px / 4) + (16px * 3));\n  min-height: calc(calc(16px / 4) + calc(16px * 3));\n  min-height: calc(var(--space-smaller) + var(--space-largest));\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n  border-top: calc(16px / 16) solid rgb(225, 225, 225);\n  border-top: var(--border-base) solid var(--color-border);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n._1d4uh90gfSI- {\n  -ms-flex: 9999;\n      flex: 9999;\n  white-space: nowrap;\n}\n\n._5Hh01rJlUDs- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  min-width: -webkit-fit-content;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.N5rXFBBzPxk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  min-width: calc(3 * (16px * 3) + (16px / 2));\n  min-width: calc(3 * calc(16px * 3) + calc(16px / 2));\n  min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n.Uq2TUaf9ang- {\n  min-width: calc((16px * 4) + (16px / 4));\n  min-width: calc(calc(16px * 4) + calc(16px / 4));\n  min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.PeLwUZ2wWPI- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px * 1.5);\n  gap: var(--space-large);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n@media (max-width: 639.98px) {\n\n.PeLwUZ2wWPI- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n}\n  }\n\n@media (--handhelds) {\n\n.PeLwUZ2wWPI- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n}\n  }\n";
+var css_248z$2 = ".zn0VRVhObt0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  min-height: calc((16px / 4) + (16px * 3));\n  min-height: calc(calc(16px / 4) + calc(16px * 3));\n  min-height: calc(var(--space-smaller) + var(--space-largest));\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n  border-top: calc(16px / 16) solid rgb(225, 225, 225);\n  border-top: var(--border-base) solid var(--color-border);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n._1d4uh90gfSI- {\n  -ms-flex: 9999;\n      flex: 9999;\n  white-space: nowrap;\n}\n\n._5Hh01rJlUDs- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  min-width: -webkit-fit-content;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.N5rXFBBzPxk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  min-width: calc(3 * (16px * 3) + (16px / 2));\n  min-width: calc(3 * calc(16px * 3) + calc(16px / 2));\n  min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n.Uq2TUaf9ang- {\n  min-width: calc((16px * 4) + (16px / 4));\n  min-width: calc(calc(16px * 4) + calc(16px / 4));\n  min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.PeLwUZ2wWPI- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px * 1.5);\n  gap: var(--space-large);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n@media (max-width: 489.98px) {\n\n.PeLwUZ2wWPI- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.PeLwUZ2wWPI- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n}\n  }\n";
 var styles$2 = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","paginationNav":"_5Hh01rJlUDs-","paginationSelect":"N5rXFBBzPxk-","paginationSelectLabel":"Uq2TUaf9ang-","paginationButtons":"PeLwUZ2wWPI-"};
 styleInject_es.styleInject(css_248z$2);
 

package/dist/Drawer/index.js

@@ -18,7 +18,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-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\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 (--medium-screens), 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: 1024px) {\n\n.IJAyrFb2GpA- {\n    --drawer-width: calc(var(--space-base) * 26.25);\n}\n  }\n\n@media (--wide-screens) {\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";
+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";
 var styles$1 = {"container":"IJAyrFb2GpA-","drawer":"Hsmk6Pg14PQ-","open":"DwF3Q9EMPvQ-","header":"TcdyXiTbnMU-","contentScroll":"srL7xqEzwhM-","content":"p6-yqttoIJI-"};
 styleInject_es.styleInject(css_248z$1);
 

package/dist/Form/index.js

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Form = React.forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
     const methods = reactHookForm.useForm({ mode: "onTouched" });
-    const { errors, trigger, handleSubmit, formState: { isDirty, isValid }, } = methods;
+    const { trigger, handleSubmit, formState: { isDirty, isValid, errors }, } = methods;
     React.useEffect(() => onStateChange && onStateChange({ isDirty, isValid }), [isDirty, isValid]);
     React.useImperativeHandle(ref, () => ({
         /**

package/dist/FormField/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-64e9c241.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');

package/dist/{FormField-1a3bafd6.js → FormField-64e9c241.js}

@@ -118,13 +118,13 @@ function FormFieldPostFix({ variation }) {
     return (React__default["default"].createElement("span", { className: styles.postfix }, variation === "select" ? (React__default["default"].createElement(Icon.Icon, { name: "arrowDown" })) : (React__default["default"].createElement(Spinner.Spinner, { size: "small" }))));
 }
 
+// Added 13th statement to accommodate getErrorMessage function
+/*eslint max-statements: ["error", 13]*/
 function FormField(props) {
-    var _a;
+    var _a, _b, _c;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, } = props;
-    const { control, errors, setValue, watch } = reactHookForm.useFormContext() != undefined
-        ? reactHookForm.useFormContext()
-        : // If there isn't a Form Context being provided, get a form for this field.
-            reactHookForm.useForm({ mode: "onTouched" });
+    // If there isn't a Form Context being provided, get a form for this field.
+    const { control, formState: { errors }, setValue, watch, } = (_a = reactHookForm.useFormContext()) !== null && _a !== void 0 ? _a : reactHookForm.useForm({ mode: "onTouched" });
     const [identifier] = React.useState(uuid.v1());
     const [descriptionIdentifier] = React.useState(`descriptionUUID--${uuid.v1()}`);
     /**
@@ -143,10 +143,11 @@ function FormField(props) {
             setValue(controlledName, newValue, { shouldValidate: true });
         },
     }));
-    const error = errors[controlledName] && errors[controlledName].message;
+    const message = (_b = errors[controlledName]) === null || _b === void 0 ? void 0 : _b.message;
+    const error = getErrorMessage();
     React.useEffect(() => handleValidation(), [error]);
-    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "", render: (_a) => {
-            var { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _a, rest = tslib_es6.__rest(_a, ["onChange", "onBlur", "name"]);
+    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_c = value !== null && value !== void 0 ? value : defaultValue) !== null && _c !== void 0 ? _c : "", render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "onBlur", "name"]);
             const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id: identifier, className: styles.input, name: (validations || name) && controllerName, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange }), (description &&
                 !inline && { "aria-describedby": descriptionIdentifier }));
             const textFieldProps = Object.assign(Object.assign({}, fieldProps), { onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown });
@@ -195,6 +196,12 @@ function FormField(props) {
                 onControllerBlur();
             }
         } }));
+    function getErrorMessage() {
+        if (typeof message === "string") {
+            return message;
+        }
+        return "";
+    }
     function handleValidation() {
         onValidation && onValidation(error);
     }

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-8450a8de.js');
+var FormatFile = require('../FormatFile-aba39490.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -12,9 +12,9 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
-require('../ConfirmationModal-7835c534.js');
+require('../ConfirmationModal-c88e76b3.js');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-29fdefc8.js');
+require('../Modal-5b746fd0.js');
 require('react-dom');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/{FormatFile-8450a8de.js → FormatFile-aba39490.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-7698424c.js');
-var ConfirmationModal = require('./ConfirmationModal-7835c534.js');
+var ConfirmationModal = require('./ConfirmationModal-c88e76b3.js');
 var Glimmer = require('./Glimmer-f670c24e.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-fd6f932a.js');

package/dist/Gallery/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var LightBox = require('../LightBox-b59ee23b.js');
-var FormatFile = require('../FormatFile-8450a8de.js');
+var FormatFile = require('../FormatFile-aba39490.js');
 var Button = require('../Button-7698424c.js');
 require('framer-motion');
 require('react-dom');
@@ -16,8 +16,8 @@ require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
 require('../ButtonDismiss-c7ee94a9.js');
 require('filesize');
-require('../ConfirmationModal-7835c534.js');
-require('../Modal-29fdefc8.js');
+require('../ConfirmationModal-c88e76b3.js');
+require('../Modal-5b746fd0.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
 require('../Content-a6590328.js');

package/dist/Grid/index.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-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: 640px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (--medium-screens) {.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";
+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";
 var styles$1 = {"gridCell":"YJHtDDKq6WI-"};
 styleInject_es.styleInject(css_248z$2);
 

package/dist/InputDate/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lodash = require('lodash');
 var React = require('react');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-64e9c241.js');
 var DatePicker = require('../DatePicker-98f03314.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');

package/dist/InputEmail/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-64e9c241.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputNumber/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-64e9c241.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPassword/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-64e9c241.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPhoneNumber/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
+var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-64e9c241.js');
 require('uuid');
-require('react-hook-form');
 require('classnames');
 require('../Button-7698424c.js');
 require('react-router-dom');
@@ -84,6 +84,7 @@ function InputPhoneNumber(_a) {
     var { required } = _a, props = tslib_es6.__rest(_a, ["required"]);
     const { placeholder, validations, pattern = "(***) ***-****" } = props;
     const errorSubject = placeholder || "Phone number";
+    const getValues = reactHookForm.useFormContext();
     return (React__default["default"].createElement(InputMask, { pattern: pattern, strict: false },
         React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
                     value: Boolean(required),
@@ -103,7 +104,7 @@ function InputPhoneNumber(_a) {
             return `${errorSubject} must contain ${cleanValueRequiredLength} or more digits`;
         }
         if (typeof (validations === null || validations === void 0 ? void 0 : validations.validate) === "function") {
-            return validations.validate(value);
+            return validations.validate(value, getValues);
         }
         return true;
     }

package/dist/InputText/InputText.d.ts

@@ -44,18 +44,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     } | undefined;
     onEnter?: ((event: React.KeyboardEvent<Element>) => void) | undefined;
     readonly readonly?: boolean | undefined;
-    readonly validations?: Partial<{
-        required: string | import("react-hook-form").ValidationRule<boolean>;
-        min: import("react-hook-form").ValidationRule<string | number>;
-        max: import("react-hook-form").ValidationRule<string | number>;
-        maxLength: import("react-hook-form").ValidationRule<string | number>;
-        minLength: import("react-hook-form").ValidationRule<string | number>;
-        pattern: import("react-hook-form").ValidationRule<RegExp>;
-        validate: import("react-hook-form").Validate | Record<string, import("react-hook-form").Validate>;
-        valueAsNumber: boolean;
-        valueAsDate: boolean;
-        setValueAs: (value: any) => any;
-    }> | undefined;
+    readonly validations?: import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
 } | {
     rows?: undefined;
     multiline?: boolean | undefined;
@@ -92,17 +81,6 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     } | undefined;
     onEnter?: ((event: React.KeyboardEvent<Element>) => void) | undefined;
     readonly readonly?: boolean | undefined;
-    readonly validations?: Partial<{
-        required: string | import("react-hook-form").ValidationRule<boolean>;
-        min: import("react-hook-form").ValidationRule<string | number>;
-        max: import("react-hook-form").ValidationRule<string | number>;
-        maxLength: import("react-hook-form").ValidationRule<string | number>;
-        minLength: import("react-hook-form").ValidationRule<string | number>;
-        pattern: import("react-hook-form").ValidationRule<RegExp>;
-        validate: import("react-hook-form").Validate | Record<string, import("react-hook-form").Validate>;
-        valueAsNumber: boolean;
-        valueAsDate: boolean;
-        setValueAs: (value: any) => any;
-    }> | undefined;
+    readonly validations?: import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
 }) & React.RefAttributes<InputTextRef>>;
 export {};

package/dist/InputText/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-fce3bd3e.js');
+var InputText = require('../InputText-20364bbc.js');
 require('react');
-require('../FormField-1a3bafd6.js');
+require('../FormField-64e9c241.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputText-fce3bd3e.js → InputText-20364bbc.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-1a3bafd6.js');
+var FormField = require('./FormField-64e9c241.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputTime/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-64e9c241.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/Menu/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-d2445bae.js');
+var Menu = require('../Menu-a1a45452.js');
 require('react');
 require('uuid');
 require('classnames');

package/dist/{Menu-d2445bae.js → Menu-a1a45452.js}

@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-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: 640px) {\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 (--medium-screens) {\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: 640px) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: calc(16px / 8);\n    margin-bottom: var(--space-smallest);\n}\n  }\n\n@media (--medium-screens) {\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: 640px) {\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 (--medium-screens) {\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: 640px) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (--medium-screens) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (min-width: 640px) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n@media (--medium-screens) {\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: 640px) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n@media (--medium-screens) {\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";
+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";
 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-"};
 styleInject_es.styleInject(css_248z);
 

package/dist/Modal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Modal = require('../Modal-29fdefc8.js');
+var Modal = require('../Modal-5b746fd0.js');
 require('react');
 require('react-dom');
 require('classnames');

package/dist/{Modal-29fdefc8.js → Modal-5b746fd0.js}

@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-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: 640px) {\n  :root {\n    --modal--padding: var(--space-base) var(--space-large);\n  }\n}\n\n@media (--medium-screens) {\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";
+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";
 var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-"};
 styleInject_es.styleInject(css_248z$1);
 

package/dist/{Option-7ac3893b.js → Option-71d4acc2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-1a3bafd6.js');
+var FormField = require('./FormField-64e9c241.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Page/index.js

@@ -11,7 +11,7 @@ var Text = require('../Text-e7ed0974.js');
 var Content = require('../Content-a6590328.js');
 var Markdown = require('../Markdown-53a0bfda.js');
 var Button = require('../Button-7698424c.js');
-var Menu = require('../Menu-d2445bae.js');
+var Menu = require('../Menu-a1a45452.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('../Typography-fd6f932a.js');
 require('react-markdown');

package/dist/Select/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-7ac3893b.js');
+var Option = require('../Option-71d4acc2.js');
 require('react');
-require('../FormField-1a3bafd6.js');
+require('../FormField-64e9c241.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.17.1",
+  "version": "4.17.2-install-re.10+f68160f3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.39.0",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.1.2",
+    "@jobber/design": "^0.40.0",
+    "@jobber/formatters": "^0.2.2",
+    "@jobber/hooks": "^2.1.3-install-re.52+f68160f3",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -41,7 +41,7 @@
     "react-countdown": "^2.3.2",
     "react-datepicker": "^4.10.0",
     "react-dropzone": "^11.0.2",
-    "react-hook-form": "^6.15.8",
+    "react-hook-form": "^7.43.7",
     "react-markdown": "^8.0.3",
     "react-popper": "^2.2.5",
     "react-router-dom": "^5.3.4",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "7889d5b8906357bc48208ece6c383100dac49a6a"
+  "gitHead": "f68160f3616e1e00cebb5fbfc3271f80634ac972"
 }