@jobber/components 4.77.4 → 4.78.0

package/AnimatedPresence.d.ts

@@ -0,0 +1 @@
+export * from "./dist/AnimatedPresence";

package/AnimatedPresence.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AnimatedPresence = require("./dist/AnimatedPresence");
+
+Object.keys(AnimatedPresence).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AnimatedPresence[key];
+    },
+  });
+});

package/dist/AnimatedPresence/AnimatedPresence.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from "react";
+declare const transitions: {
+    fromBottom: import("framer-motion").Variants;
+    fromTop: import("framer-motion").Variants;
+    fromLeft: import("framer-motion").Variants;
+    fromRight: import("framer-motion").Variants;
+    popIn: import("framer-motion").Variants;
+    fromLeftToRight: import("framer-motion").Variants;
+    fromRightToLeft: import("framer-motion").Variants;
+    fade: import("framer-motion").Variants;
+};
+export type AnimatedPresenceTransitions = keyof typeof transitions;
+interface AnimatedPresenceProps extends Required<PropsWithChildren> {
+    /**
+     * The type of transition you can use.
+     */
+    readonly transition?: AnimatedPresenceTransitions;
+    /**
+     * Whether or not to animate the children on mount. By default it's set to false.
+     */
+    readonly initial?: boolean;
+}
+export declare function AnimatedPresence(props: AnimatedPresenceProps): JSX.Element;
+export {};

package/dist/AnimatedPresence/AnimatedPresence.transitions.d.ts

@@ -0,0 +1,11 @@
+import { Variants } from "framer-motion";
+export declare const TIMING_QUICK: number;
+export declare const TIMING_BASE: number;
+export declare const fade: Variants;
+export declare const popIn: Variants;
+export declare const fromTop: Variants;
+export declare const fromBottom: Variants;
+export declare const fromLeft: Variants;
+export declare const fromRight: Variants;
+export declare const fromLeftToRight: Variants;
+export declare const fromRightToLeft: Variants;

package/dist/AnimatedPresence/hooks/usePreviousValue.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function usePreviousValue<T>(value: T): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];

package/dist/AnimatedPresence/index.d.ts

@@ -0,0 +1 @@
+export * from "./AnimatedPresence";

package/dist/AnimatedPresence/index.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
+const TIMING_BASE = toSeconds(design.tokens["timing-base"]);
+const baseTransition = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const fade = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const popIn = {
+    visible: Object.assign({ scale: 1 }, baseTransition.visible),
+    hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
+};
+const fromTop = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromBottom = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeft = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRight = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeftToRight = {
+    initial: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRightToLeft = {
+    initial: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+function toSeconds(ms) {
+    return ms / 1000;
+}
+
+function usePreviousValue(value) {
+    const [previousValue, setPreviousValue] = React.useState(value);
+    React.useEffect(() => {
+        setPreviousValue(value);
+    }, [value]);
+    return [previousValue, setPreviousValue];
+}
+
+const transitions = {
+    fromBottom,
+    fromTop,
+    fromLeft,
+    fromRight,
+    popIn,
+    fromLeftToRight,
+    fromRightToLeft,
+    fade,
+};
+function AnimatedPresence(props) {
+    const shouldReduceMotion = framerMotion.useReducedMotion();
+    if (shouldReduceMotion) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
+    }
+    return React__default["default"].createElement(InternalAnimatedPresence, Object.assign({}, props));
+}
+function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
+    const transitionVariation = transitions[transition];
+    const hasInitialTransition = "initial" in transitionVariation;
+    const childCount = React.Children.count(children);
+    // Set the initial value to 0 so it staggers the animation on mount when
+    // initial is true.
+    const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
+    // Whenever the children count changes, update the last index.
+    React.useEffect(() => {
+        setLastChildIndex(childCount - 1);
+    }, [childCount]);
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { initial: initial, mode: "popLayout" }, React.Children.map(children, (child, i) => child && (React__default["default"].createElement(framerMotion.motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
+            duration: TIMING_BASE,
+            delay: generateDelayTime(i),
+        } }, child)))));
+    function generateDelayTime(index) {
+        // Don't add a delay if it's already rendered.
+        if (lastChildIndex > index)
+            return 0;
+        // Stagger the animation starting after the previous last child index.
+        return (index - lastChildIndex) * TIMING_QUICK;
+    }
+}
+
+exports.AnimatedPresence = AnimatedPresence;

package/dist/AnimatedSwitcher/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
+var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
 require('react');
 require('framer-motion');
 require('../Icon-405a216c.js');

package/dist/{AnimatedSwitcher-d1e1ddcf.js → AnimatedSwitcher-3d45ec5d.js}

@@ -51,7 +51,7 @@ function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromB
     const [ref, setRef] = React.useState(null);
     const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
     const { key, transition, child, duration } = getChildData();
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true, initial: false },
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
         React__default["default"].createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
     function getDisplayValue() {
         if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {

package/dist/Autocomplete/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
@@ -13,17 +13,17 @@ var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-9e61365c.js');
+var InputText = require('../InputText-6e356985.js');
 require('../Typography-c45bf216.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('../FormField-b0e74d32.js');
+require('../FormField-b4e6c549.js');
 require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Button-b73a5e01.js');
 require('react-router-dom');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/Checkbox/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-1cdd5cf6.js');
-require('../tslib.es6-5b8768b7.js');
+var Checkbox = require('../Checkbox-99f6297f.js');
+require('../tslib.es6-754e2961.js');
 require('react');
 require('uuid');
 require('classnames');

package/dist/{Checkbox-1cdd5cf6.js → Checkbox-99f6297f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
 var uuid = require('uuid');
 var classnames = require('classnames');

package/dist/Chip/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Chip = require('../Chip-c91fd6c8.js');
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var Icon = require('../Icon-405a216c.js');
 require('classnames');

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-d85ce78c.js');
+var Combobox = require('../Combobox-237caf42.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -11,8 +11,8 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Text-259af966.js');
 require('../Typography-c45bf216.js');
-require('../Glimmer-f40d5ea5.js');
-require('../tslib.es6-5b8768b7.js');
+require('../Glimmer-7c317864.js');
+require('../tslib.es6-754e2961.js');
 require('../Content-e3f7b6fc.js');
 require('../Button-b73a5e01.js');
 require('react-router-dom');

package/dist/{Combobox-d85ce78c.js → Combobox-237caf42.js}

@@ -6,8 +6,8 @@ var ReactDOM = require('react-dom');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-259af966.js');
-var Glimmer = require('./Glimmer-f40d5ea5.js');
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var Glimmer = require('./Glimmer-7c317864.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
 var Typography = require('./Typography-c45bf216.js');
 var Button = require('./Button-b73a5e01.js');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');

package/dist/DataList/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Text = require('../Text-259af966.js');
-var Glimmer = require('../Glimmer-f40d5ea5.js');
+var Glimmer = require('../Glimmer-7c317864.js');
 var noop = require('lodash/noop');
 var design = require('@jobber/design');
 var framerMotion = require('framer-motion');
@@ -23,13 +23,13 @@ var Icon = require('../Icon-405a216c.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
 var Heading = require('../Heading-1e8e4bd3.js');
 var ReactDOM = require('react-dom');
-var Checkbox = require('../Checkbox-1cdd5cf6.js');
+var Checkbox = require('../Checkbox-99f6297f.js');
 var reactRouterDom = require('react-router-dom');
-var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-var Combobox = require('../Combobox-d85ce78c.js');
+var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
+var Combobox = require('../Combobox-237caf42.js');
 var Chip = require('../Chip-c91fd6c8.js');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-9e61365c.js');
+var InputText = require('../InputText-6e356985.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Typography = require('../Typography-c45bf216.js');
 require('../Content-e3f7b6fc.js');
@@ -40,9 +40,9 @@ require('react-hook-form');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../FormField-b0e74d32.js');
+require('../FormField-b4e6c549.js');
 require('@jobber/hooks/useShowClear');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataTable/index.js

@@ -7,19 +7,19 @@ var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Glimmer = require('../Glimmer-f40d5ea5.js');
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-b715f6b4.js');
+var Glimmer = require('../Glimmer-7c317864.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
+var Option = require('../Option-8565da71.js');
 var Button = require('../Button-b73a5e01.js');
 var Text = require('../Text-259af966.js');
 require('../Content-e3f7b6fc.js');
-require('../FormField-b0e74d32.js');
+require('../FormField-b4e6c549.js');
 require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 require('react-router-dom');

package/dist/Form/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 

package/dist/FormField/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-b0e74d32.js');
-require('../tslib.es6-5b8768b7.js');
+var FormField = require('../FormField-b4e6c549.js');
+require('../tslib.es6-754e2961.js');
 require('react');
 require('uuid');
 require('react-hook-form');
@@ -16,7 +16,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/{FormField-b0e74d32.js → FormField-b4e6c549.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
 var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
@@ -10,7 +10,7 @@ var useShowClear = require('@jobber/hooks/useShowClear');
 var Button = require('./Button-b73a5e01.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-259af966.js');
-var InputValidation = require('./InputValidation-a7a737f9.js');
+var InputValidation = require('./InputValidation-05e839fa.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-9f8e4996.js');
+var FormatFile = require('../FormatFile-652edda8.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -27,8 +27,8 @@ require('../Markdown-f7c55304.js');
 require('react-markdown');
 require('../Text-259af966.js');
 require('../Emphasis-bda56d3b.js');
-require('../Glimmer-f40d5ea5.js');
-require('../tslib.es6-5b8768b7.js');
+require('../Glimmer-7c317864.js');
+require('../tslib.es6-754e2961.js');
 require('../ProgressBar-b68edc8f.js');
 
 

package/dist/{FormatFile-9f8e4996.js → FormatFile-652edda8.js}

@@ -6,7 +6,7 @@ var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-b73a5e01.js');
 var ConfirmationModal = require('./ConfirmationModal-f1a049fb.js');
-var Glimmer = require('./Glimmer-f40d5ea5.js');
+var Glimmer = require('./Glimmer-7c317864.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-c45bf216.js');
 var Text = require('./Text-259af966.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-a89d8863.js');
-var FormatFile = require('../FormatFile-9f8e4996.js');
+var FormatFile = require('../FormatFile-652edda8.js');
 var Button = require('../Button-b73a5e01.js');
 require('framer-motion');
 require('react-dom');
@@ -26,8 +26,8 @@ require('../Markdown-f7c55304.js');
 require('react-markdown');
 require('../Text-259af966.js');
 require('../Emphasis-bda56d3b.js');
-require('../Glimmer-f40d5ea5.js');
-require('../tslib.es6-5b8768b7.js');
+require('../Glimmer-7c317864.js');
+require('../tslib.es6-754e2961.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../ProgressBar-b68edc8f.js');

package/dist/Glimmer/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Glimmer = require('../Glimmer-f40d5ea5.js');
-require('../tslib.es6-5b8768b7.js');
+var Glimmer = require('../Glimmer-7c317864.js');
+require('../tslib.es6-754e2961.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Glimmer-f40d5ea5.js → Glimmer-7c317864.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');

package/dist/InputAvatar/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-76a799fa.js');
-var InputFile = require('../InputFile-d080dec5.js');
+var InputFile = require('../InputFile-c9eeb04b.js');
 var ProgressBar = require('../ProgressBar-b68edc8f.js');
 var Button = require('../Button-b73a5e01.js');
 require('classnames');
@@ -16,7 +16,7 @@ require('@jobber/design');
 require('react-dropzone');
 require('axios');
 require('uuid');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Text-259af966.js');
 require('../Typography-c45bf216.js');

package/dist/InputDate/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-b0e74d32.js');
+var FormField = require('../FormField-b4e6c549.js');
 var DatePicker = require('../DatePicker-64c5ab1a.js');
-require('../tslib.es6-5b8768b7.js');
+require('../tslib.es6-754e2961.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -18,7 +18,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 require('react-datepicker');

package/dist/InputEmail/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-b0e74d32.js');
-require('../tslib.es6-5b8768b7.js');
+var FormField = require('../FormField-b4e6c549.js');
+require('../tslib.es6-754e2961.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -16,7 +16,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/InputFile/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-d080dec5.js');
-require('../tslib.es6-5b8768b7.js');
+var InputFile = require('../InputFile-c9eeb04b.js');
+require('../tslib.es6-754e2961.js');
 require('react');
 require('classnames');
 require('react-dropzone');
 require('axios');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Text-259af966.js');
 require('../Typography-c45bf216.js');

package/dist/{InputFile-d080dec5.js → InputFile-c9eeb04b.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
 var classnames = require('classnames');
 var reactDropzone = require('react-dropzone');
 var axios = require('axios');
 var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var InputValidation = require('./InputValidation-a7a737f9.js');
+var InputValidation = require('./InputValidation-05e839fa.js');
 var Button = require('./Button-b73a5e01.js');
 var Content = require('./Content-e3f7b6fc.js');
 var Typography = require('./Typography-c45bf216.js');

package/dist/InputNumber/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-79da1cdc.js');
+var InputNumber = require('../InputNumber-ceae3872.js');
 require('react');
-require('../FormField-b0e74d32.js');
-require('../tslib.es6-5b8768b7.js');
+require('../FormField-b4e6c549.js');
+require('../tslib.es6-754e2961.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -17,7 +17,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/{InputNumber-79da1cdc.js → InputNumber-ceae3872.js}

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

package/dist/InputPassword/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-b0e74d32.js');
-require('../tslib.es6-5b8768b7.js');
+var FormField = require('../FormField-b4e6c549.js');
+require('../tslib.es6-754e2961.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -16,7 +16,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/InputPhoneNumber/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-b0e74d32.js');
+var FormField = require('../FormField-b4e6c549.js');
 require('uuid');
 require('classnames');
 require('@jobber/hooks/useShowClear');
@@ -16,7 +16,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/InputText/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-9e61365c.js');
+var InputText = require('../InputText-6e356985.js');
 require('react');
-require('../FormField-b0e74d32.js');
-require('../tslib.es6-5b8768b7.js');
+require('../FormField-b4e6c549.js');
+require('../tslib.es6-754e2961.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -17,7 +17,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/{InputText-9e61365c.js → InputText-6e356985.js}

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

package/dist/InputTime/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var temporal = require('@std-proposal/temporal');
 var debounce = require('lodash/debounce');
-var FormField = require('../FormField-b0e74d32.js');
+var FormField = require('../FormField-b4e6c549.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -18,7 +18,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/InputValidation/InputValidation.d.ts

@@ -3,7 +3,7 @@ interface InputValidationProps {
     /**
      * Validation message to be displayed
      */
-    message: string;
+    readonly message: string;
 }
 export declare function InputValidation({ message }: InputValidationProps): JSX.Element;
 export {};

package/dist/InputValidation/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputValidation = require('../InputValidation-a7a737f9.js');
+var InputValidation = require('../InputValidation-05e839fa.js');
 require('react');
 require('framer-motion');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{InputValidation-a7a737f9.js → InputValidation-05e839fa.js}

@@ -20,7 +20,7 @@ function InputValidation({ message }) {
         slideOut: { y: "5%", opacity: 0 },
         slideIn: { y: 0, opacity: 1 },
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, messages && messages.length > 0 && (React__default["default"].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true }, messages.map(msg => (React__default["default"].createElement(framerMotion.motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, messages && messages.length > 0 && (React__default["default"].createElement(framerMotion.AnimatePresence, { mode: "wait" }, messages.map(msg => (React__default["default"].createElement(framerMotion.motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
         React__default["default"].createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
             React__default["default"].createElement(Icon.Icon, { name: "alert", size: "small", color: "critical" }),
             React__default["default"].createElement(Text.Text, { size: "small", variation: "error" }, msg)))))))));

package/dist/MultiSelect/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Checkbox = require('../Checkbox-1cdd5cf6.js');
+var Checkbox = require('../Checkbox-99f6297f.js');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
-require('../tslib.es6-5b8768b7.js');
+require('../tslib.es6-754e2961.js');
 require('uuid');
 require('react-hook-form');
 require('../Typography-c45bf216.js');

package/dist/{Option-b715f6b4.js → Option-8565da71.js}

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

package/dist/RecurringSelect/index.js

@@ -9,19 +9,19 @@ var RadioGroup = require('../RadioGroup-ca7a5978.js');
 var Text = require('../Text-259af966.js');
 require('classnames');
 require('../Typography-c45bf216.js');
-var Option = require('../Option-b715f6b4.js');
-var InputNumber = require('../InputNumber-79da1cdc.js');
+var Option = require('../Option-8565da71.js');
+var InputNumber = require('../InputNumber-ceae3872.js');
 var InputGroup = require('../InputGroup-8d4fd4eb.js');
 var Content = require('../Content-e3f7b6fc.js');
-require('../FormField-b0e74d32.js');
-require('../tslib.es6-5b8768b7.js');
+require('../FormField-b4e6c549.js');
+require('../tslib.es6-754e2961.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/Select/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-b715f6b4.js');
+var Option = require('../Option-8565da71.js');
 require('react');
-require('../FormField-b0e74d32.js');
-require('../tslib.es6-5b8768b7.js');
+require('../FormField-b4e6c549.js');
+require('../tslib.es6-754e2961.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -17,7 +17,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/{tslib.es6-5b8768b7.js → tslib.es6-754e2961.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -35,7 +35,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 exports.__awaiter = __awaiter;
 exports.__rest = __rest;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.77.4",
+  "version": "4.78.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,7 +35,7 @@
     "classnames": "^2.3.2",
     "color": "^3.1.2",
     "filesize": "^6.1.0",
-    "framer-motion": "6.3.16",
+    "framer-motion": "^11.0.3",
     "lodash": "^4.17.21",
     "react-countdown": "^2.3.2",
     "react-datepicker": "~4.10.0",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c9d875673aae72b4ba26698297d7c1f78af10db0"
+  "gitHead": "e6ea2817fa008fa463a8adbc6b918566d05d9d38"
 }