@jobber/components 4.0.2 → 4.1.1

package/dist/InputGroup/index.js

@@ -15,18 +15,17 @@ var css = "._1UKIybTcnyfJQlTx901rF5 > *:not(:last-child) {\n  margin-bottom: -1p
 var styles = {"vertical":"_1UKIybTcnyfJQlTx901rF5","horizontal":"_26qQBed5Rzu9i2ZIDEaESr","inputGroup":"_3kywSyvvwSdmNSTOqX-AQA"};
 styleInject_es.styleInject(css);
 
-function InputGroup(_a) {
-    var children = _a.children, _b = _a.flowDirection, flowDirection = _b === void 0 ? "vertical" : _b;
+function InputGroup({ children, flowDirection = "vertical", }) {
     if (isInvalidGroupNesting(children))
         return React__default["default"].createElement(React__default["default"].Fragment, null);
-    var className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
+    const className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
     return React__default["default"].createElement("div", { className: className }, children);
 }
 function isInvalidGroupNesting(childs) {
-    return React__default["default"].Children.toArray(childs).some(function (child) {
+    return React__default["default"].Children.toArray(childs).some(child => {
         if (child.type === InputGroup &&
             child.props.flowDirection != "horizontal") {
-            console.error("ERROR: InputGroup not rendered: nesting 'flowDirection=\"vertical\"' columns not supported.", "https://atlantis.getjobber.com/components/input-group#nested-example");
+            console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/components/input-group#nested-example`);
             return true;
         }
         return false;

package/dist/InputNumber/index.js

@@ -2,64 +2,64 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var FormField = require('../FormField-ac310b6f.js');
+var FormField = require('../FormField-79a0a375.js');
+require('../tslib.es6-efe27175.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-dcee06b6.js');
 require('classnames');
-require('../Button-cd30df0f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
-require('../Text-e012fb46.js');
-require('../InputValidation-06a8a7ba.js');
+require('../Typography-9262511f.js');
+require('../Text-7ce00adb.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-e4e9c8eb.js');
+require('../Spinner-ae4c8a85.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputNumberInternal(props, ref) {
-    var inputRef = React.createRef();
-    React.useImperativeHandle(ref, function () { return ({
-        blur: function () {
-            var input = inputRef.current;
+    const inputRef = React.createRef();
+    React.useImperativeHandle(ref, () => ({
+        blur: () => {
+            const input = inputRef.current;
             if (input) {
                 input.blur();
             }
         },
-        focus: function () {
-            var input = inputRef.current;
+        focus: () => {
+            const input = inputRef.current;
             if (input) {
                 input.focus();
             }
         },
-    }); });
-    return (React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: tslib_es6.__assign(tslib_es6.__assign({}, props.validations), { validate: getOverLimitMessage }) })));
+    }));
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: getOverLimitMessage }) })));
     function handleChange(newValue) {
         props.onChange && props.onChange(newValue);
     }
     function getOverLimitMessage(value) {
-        var isOverMax = props.max != undefined && value && value > props.max;
-        var isUnderMin = props.min != undefined && value && value < props.min;
+        const isOverMax = props.max != undefined && value && value > props.max;
+        const isUnderMin = props.min != undefined && value && value < props.min;
         if (isOverMax || isUnderMin || (value && value.toString() === "")) {
             if (props.min != undefined && props.max === undefined) {
-                return "Enter a number that is greater than or equal to " + props.min;
+                return `Enter a number that is greater than or equal to ${props.min}`;
             }
             else if (props.max != undefined && props.min === undefined) {
-                return "Enter a number that is less than or equal to " + props.max;
+                return `Enter a number that is less than or equal to ${props.max}`;
             }
             else if (props.min != undefined && props.max != undefined) {
-                return "Enter a number between " + props.min + " and " + props.max;
+                return `Enter a number between ${props.min} and ${props.max}`;
             }
         }
         return true;
     }
 }
-var InputNumber = React.forwardRef(InputNumberInternal);
+const InputNumber = React.forwardRef(InputNumberInternal);
 
 exports.InputNumber = InputNumber;

package/dist/InputPassword/index.js

@@ -2,35 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var FormField = require('../FormField-ac310b6f.js');
+var FormField = require('../FormField-79a0a375.js');
+require('../tslib.es6-efe27175.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-dcee06b6.js');
 require('classnames');
-require('../Button-cd30df0f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
-require('../Text-e012fb46.js');
-require('../InputValidation-06a8a7ba.js');
+require('../Typography-9262511f.js');
+require('../Text-7ce00adb.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-e4e9c8eb.js');
+require('../Spinner-ae4c8a85.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputPassword(props) {
-    var _a = props.hasVisibility, hasVisibility = _a === void 0 ? false : _a;
-    var _b = tslib_es6.__read(React.useState(false), 2), visible = _b[0], setVisibility = _b[1];
-    return (React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({}, props, (hasVisibility && {
+    const { hasVisibility = false } = props;
+    const [visible, setVisibility] = React.useState(false);
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({}, props, (hasVisibility && {
         suffix: {
             ariaLabel: visible ? "Hide password" : "Show password",
             icon: visible ? "eye" : "eyeCrossed",
-            onClick: function () { return setVisibility(!visible); },
+            onClick: () => setVisibility(!visible),
         },
     }), { type: visible ? "text" : "password", onChange: handleChange })));
     function handleChange(newValue) {

package/dist/InputText/InputText.d.ts

@@ -25,5 +25,5 @@ interface MultilineProps extends BaseProps {
      */
     readonly rows?: number | RowRange;
 }
-export declare const InputText: React.ForwardRefExoticComponent<(import("ts-xor/dist/types/Without.type").Without<BaseProps, MultilineProps> & MultilineProps & React.RefAttributes<InputTextRef>) | (import("ts-xor/dist/types/Without.type").Without<MultilineProps, BaseProps> & BaseProps & React.RefAttributes<InputTextRef>)>;
+export declare const InputText: React.ForwardRefExoticComponent<((import("ts-xor/dist/types/Without.type").Without<BaseProps, MultilineProps> & MultilineProps) | (import("ts-xor/dist/types/Without.type").Without<MultilineProps, BaseProps> & BaseProps)) & React.RefAttributes<InputTextRef>>;
 export {};

package/dist/InputText/index.js

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-70f7d947.js');
-require('../tslib.es6-5b50eb8e.js');
+var InputText = require('../InputText-95ea24f9.js');
 require('react');
-require('../FormField-ac310b6f.js');
+require('../FormField-79a0a375.js');
+require('../tslib.es6-efe27175.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-dcee06b6.js');
 require('classnames');
-require('../Button-cd30df0f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
-require('../Text-e012fb46.js');
-require('../InputValidation-06a8a7ba.js');
+require('../Typography-9262511f.js');
+require('../Text-7ce00adb.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-e4e9c8eb.js');
+require('../Spinner-ae4c8a85.js');
 
 
 

package/dist/{InputText-70f7d947.js → InputText-95ea24f9.js}

@@ -1,35 +1,34 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
-var FormField = require('./FormField-ac310b6f.js');
+var FormField = require('./FormField-79a0a375.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputTextInternal(props, ref) {
-    var inputRef = React.createRef();
-    var actionsRef = React.createRef();
-    var rowRange = getRowRange();
-    React.useImperativeHandle(ref, function () { return ({
-        insert: function (text) {
+    const inputRef = React.createRef();
+    const actionsRef = React.createRef();
+    const rowRange = getRowRange();
+    React.useImperativeHandle(ref, () => ({
+        insert: (text) => {
             insertText(text);
         },
-        blur: function () {
-            var input = inputRef.current;
+        blur: () => {
+            const input = inputRef.current;
             if (input) {
                 input.blur();
             }
         },
-        focus: function () {
-            var input = inputRef.current;
+        focus: () => {
+            const input = inputRef.current;
             if (input) {
                 input.focus();
             }
         },
-    }); });
-    return (React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, onChange: handleChange, rows: rowRange.min })));
+    }));
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, onChange: handleChange, rows: rowRange.min })));
     function handleChange(newValue) {
         props.onChange && props.onChange(newValue);
         if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
@@ -54,35 +53,35 @@ function InputTextInternal(props, ref) {
         textArea.style.height = textAreaHeight(textArea) + "px";
     }
     function textAreaHeight(textArea) {
-        var _a = window.getComputedStyle(textArea), lineHeight = _a.lineHeight, borderBottomWidth = _a.borderBottomWidth, borderTopWidth = _a.borderTopWidth, paddingBottom = _a.paddingBottom, paddingTop = _a.paddingTop;
-        var maxHeight = rowRange.max * parseFloat(lineHeight) +
+        const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
+        const maxHeight = rowRange.max * parseFloat(lineHeight) +
             parseFloat(borderTopWidth) +
             parseFloat(borderBottomWidth) +
             parseFloat(paddingTop) +
             parseFloat(paddingBottom);
-        var scrollHeight = textArea.scrollHeight +
+        const scrollHeight = textArea.scrollHeight +
             parseFloat(borderTopWidth) +
             parseFloat(borderBottomWidth);
         return Math.min(scrollHeight, maxHeight);
     }
     function insertText(text) {
         var _a;
-        var input = inputRef.current;
+        const input = inputRef.current;
         if (input) {
             insertAtCursor(input, text);
-            var newValue = input.value;
+            const newValue = input.value;
             (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(newValue);
             props.onChange && props.onChange(newValue);
         }
     }
 }
-var InputText = React.forwardRef(InputTextInternal);
+const InputText = React.forwardRef(InputTextInternal);
 function insertAtCursor(input, newText) {
-    var start = input.selectionStart || 0;
-    var end = input.selectionEnd || 0;
-    var text = input.value;
-    var before = text.substring(0, start);
-    var after = text.substring(end, text.length);
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+    const text = input.value;
+    const before = text.substring(0, start);
+    const after = text.substring(end, text.length);
     input.value = before + newText + after;
     input.selectionStart = input.selectionEnd = start + newText.length;
     input.focus();

package/dist/InputTime/index.js

@@ -2,24 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
+var tslib_es6 = require('../tslib.es6-efe27175.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-ac310b6f.js');
+var FormField = require('../FormField-79a0a375.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-dcee06b6.js');
 require('classnames');
-require('../Button-cd30df0f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
-require('../Text-e012fb46.js');
-require('../InputValidation-06a8a7ba.js');
+require('../Typography-9262511f.js');
+require('../Text-7ce00adb.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-e4e9c8eb.js');
+require('../Spinner-ae4c8a85.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -884,7 +884,7 @@ function civilTimeToHTMLTime(civilTime) {
     if (civilTime == undefined) {
         return "";
     }
-    var timeString = civilTime.toString();
+    const timeString = civilTime.toString();
     return timeString.slice(0, 5);
 }
 function htmlTimeToCivilTime(timeString) {
@@ -897,13 +897,13 @@ function htmlTimeToCivilTime(timeString) {
 }
 
 function InputTimeSafari(_a) {
-    var defaultValue = _a.defaultValue, value = _a.value, onChange = _a.onChange, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
-    var inputTime = React__default["default"].createRef();
-    var debouncedHandleChange = debounce__default["default"](handleChange, 1000);
-    var changeHandler = generateEventHandler(debouncedHandleChange);
-    var blurHandler = generateEventHandler(handleChange);
-    React.useLayoutEffect(function () {
-        var input = inputTime.current;
+    var { defaultValue, value, onChange } = _a, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
+    const inputTime = React__default["default"].createRef();
+    const debouncedHandleChange = debounce__default["default"](handleChange, 1000);
+    const changeHandler = generateEventHandler(debouncedHandleChange);
+    const blurHandler = generateEventHandler(handleChange);
+    React.useLayoutEffect(() => {
+        const input = inputTime.current;
         new TimePolyfill(input);
         if (value) {
             input.value = civilTimeToHTMLTime(value);
@@ -915,13 +915,13 @@ function InputTimeSafari(_a) {
         }
         input.addEventListener("change", changeHandler);
         input.addEventListener("blur", blurHandler);
-        return function () {
+        return () => {
             window.removeEventListener("change", changeHandler);
             window.removeEventListener("blur", blurHandler);
         };
     }, []);
-    React.useLayoutEffect(function () {
-        var input = inputTime.current;
+    React.useLayoutEffect(() => {
+        const input = inputTime.current;
         if (value) {
             input.value = civilTimeToHTMLTime(value);
             input.polyfill.update();
@@ -931,13 +931,13 @@ function InputTimeSafari(_a) {
             input.polyfill.update();
         }
     }, [value, defaultValue]);
-    return React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({ inputRef: inputTime, type: "time" }, params));
+    return React__default["default"].createElement(FormField.FormField, Object.assign({ inputRef: inputTime, type: "time" }, params));
     function handleChange(newValue) {
         onChange && onChange(htmlTimeToCivilTime(newValue));
     }
     function generateEventHandler(handler) {
-        return function (event) {
-            var newValue = event.currentTarget.dataset.value;
+        return (event) => {
+            const newValue = event.currentTarget.dataset.value;
             if (newValue != undefined) {
                 handler(newValue);
             }
@@ -946,16 +946,16 @@ function InputTimeSafari(_a) {
 }
 
 function InputTime(_a) {
-    var defaultValue = _a.defaultValue, value = _a.value, onChange = _a.onChange, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
-    var handleChange = function (newValue) {
+    var { defaultValue, value, onChange } = _a, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
+    const handleChange = (newValue) => {
         onChange && onChange(htmlTimeToCivilTime(newValue));
     };
     if (supportsTime) {
-        var fieldProps = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({ onChange: handleChange }, (defaultValue && { defaultValue: civilTimeToHTMLTime(defaultValue) })), (!defaultValue && { value: civilTimeToHTMLTime(value) })), params);
-        return React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({ type: "time" }, fieldProps));
+        const fieldProps = Object.assign(Object.assign(Object.assign({ onChange: handleChange }, (defaultValue && { defaultValue: civilTimeToHTMLTime(defaultValue) })), (!defaultValue && { value: civilTimeToHTMLTime(value) })), params);
+        return React__default["default"].createElement(FormField.FormField, Object.assign({ type: "time" }, fieldProps));
     }
     else {
-        return (React__default["default"].createElement(InputTimeSafari, tslib_es6.__assign({ defaultValue: defaultValue, value: value, onChange: onChange }, params)));
+        return (React__default["default"].createElement(InputTimeSafari, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChange }, params)));
     }
 }
 

package/dist/InputValidation/index.js

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputValidation = require('../InputValidation-06a8a7ba.js');
+var InputValidation = require('../InputValidation-97dd0dcf.js');
 require('react');
 require('framer-motion');
 require('../style-inject.es-dcee06b6.js');
-require('../Text-e012fb46.js');
-require('../Typography-fbe0ed6e.js');
-require('../tslib.es6-5b50eb8e.js');
+require('../Text-7ce00adb.js');
+require('../Typography-9262511f.js');
 require('classnames');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
 
 

package/dist/{InputValidation-06a8a7ba.js → InputValidation-97dd0dcf.js}

@@ -3,8 +3,8 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var Text = require('./Text-e012fb46.js');
-var Icon = require('./Icon-d5ad1a6d.js');
+var Text = require('./Text-7ce00adb.js');
+var Icon = require('./Icon-405a216c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,17 +14,16 @@ var css = "._9gFxrZogiKbS3gPLv_I79 {\n  margin-top: var(--space-smaller);\n}\n\n
 var styles = {"hasValidationMessage":"_9gFxrZogiKbS3gPLv_I79","message":"_3QUt88pIWZatkYLVYFlRuL"};
 styleInject_es.styleInject(css);
 
-function InputValidation(_a) {
-    var message = _a.message;
-    var messages = [message];
-    var variants = {
+function InputValidation({ message }) {
+    const messages = [message];
+    const variants = {
         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(function (msg) { return (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, { 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 } },
         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)))); })))));
+            React__default["default"].createElement(Text.Text, { size: "small", variation: "error" }, msg)))))))));
 }
 
 exports.InputValidation = InputValidation;

package/dist/LightBox/index.js

@@ -2,21 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-1ad62669.js');
-require('../tslib.es6-5b50eb8e.js');
+var LightBox = require('../LightBox-dd1afa97.js');
 require('react');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
 require('@jobber/hooks');
 require('../style-inject.es-dcee06b6.js');
-require('../ButtonDismiss-a9590195.js');
-require('../Button-cd30df0f.js');
+require('../ButtonDismiss-3fb1eaf9.js');
+require('../Button-16e043ec.js');
 require('classnames');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
+require('../Typography-9262511f.js');
 
 
 

package/dist/{LightBox-1ad62669.js → LightBox-dd1afa97.js}

@@ -1,14 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
 var debounce = require('lodash/debounce');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var ButtonDismiss = require('./ButtonDismiss-a9590195.js');
-var Button = require('./Button-cd30df0f.js');
+var ButtonDismiss = require('./ButtonDismiss-3fb1eaf9.js');
+var Button = require('./Button-16e043ec.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20,12 +19,13 @@ var css = "._2qgU3ylcPWUJGRthB18cb,\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  display: -ms-
 var styles = {"next":"_2qgU3ylcPWUJGRthB18cb","prev":"_27gh3HPkx5J1Ru4Tqp_1tF","lightboxWrapper":"_3FuSx2b8rfxjzTQKeVn6MW","toolbar":"_2gGRj41uQJhcl0zcSNgsOA","title":"oyIA3-aR1Fvwn0lpp1Mgx","imagesWrapper":"_1PPDSsP7v3FAZG3DA--Oq3","overlay":"_23IH8HE3ZATpurQqLyWj-l","image":"_2UNyNw_u8HDWIzzxcSLUU6"};
 styleInject_es.styleInject(css);
 
-var swipeConfidenceThreshold = 10000;
-var swipePower = function (offset, velocity) {
+/* eslint-disable max-statements */
+const swipeConfidenceThreshold = 10000;
+const swipePower = (offset, velocity) => {
     return Math.abs(offset) * velocity;
 };
-var variants = {
-    enter: function (direction) {
+const variants = {
+    enter: (direction) => {
         return {
             x: direction > 0 ? 1000 : -1000,
             opacity: 0,
@@ -36,7 +36,7 @@ var variants = {
         x: 0,
         opacity: 1,
     },
-    exit: function (direction) {
+    exit: (direction) => {
         return {
             zIndex: 0,
             x: direction < 0 ? 1000 : -1000,
@@ -44,21 +44,20 @@ var variants = {
         };
     },
 };
-var imageTransition = {
+const imageTransition = {
     x: { type: "spring", stiffness: 300, damping: 30 },
     opacity: { duration: 0.2 },
 };
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
 // https://github.com/framer/motion/issues/1769
-var debounceDuration = 250;
-function LightBox(_a) {
-    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
-    var _c = tslib_es6.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
-    var _d = tslib_es6.__read(React.useState(0), 2), direction = _d[0], setDirection = _d[1];
-    var lightboxRef = jobberHooks.useFocusTrap(open);
-    var debouncedHandleNext = debounce__default["default"](handleMoveNext, debounceDuration);
-    var debouncedHandlePrevious = debounce__default["default"](handleMovePrevious, debounceDuration);
+const debounceDuration = 250;
+function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
+    const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
+    const [direction, setDirection] = React.useState(0);
+    const lightboxRef = jobberHooks.useFocusTrap(open);
+    const debouncedHandleNext = debounce__default["default"](handleMoveNext, debounceDuration);
+    const debouncedHandlePrevious = debounce__default["default"](handleMovePrevious, debounceDuration);
     jobberHooks.useRefocusOnActivator(open);
     jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
     jobberHooks.useOnKeyDown(debouncedHandlePrevious, {
@@ -67,10 +66,10 @@ function LightBox(_a) {
     jobberHooks.useOnKeyDown(debouncedHandleNext, {
         key: "ArrowRight",
     });
-    React.useEffect(function () {
+    React.useEffect(() => {
         setCurrentImageIndex(imageIndex);
     }, [imageIndex, open]);
-    var template = (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
+    const template = (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
         React__default["default"].createElement("div", { className: styles.toolbar },
             React__default["default"].createElement("span", { className: styles.title }, images[currentImageIndex].title),
             React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })),
@@ -94,9 +93,8 @@ function LightBox(_a) {
     function handleRequestClose() {
         onRequestClose({ lastPosition: currentImageIndex });
     }
-    function handleOnDragEnd(event, _a) {
-        var offset = _a.offset, velocity = _a.velocity;
-        var swipe = swipePower(offset.x, velocity.x);
+    function handleOnDragEnd(event, { offset, velocity }) {
+        const swipe = swipePower(offset.x, velocity.x);
         if (swipe < -swipeConfidenceThreshold) {
             handleMoveNext();
         }
@@ -105,13 +103,11 @@ function LightBox(_a) {
         }
     }
 }
-function PreviousButton(_a) {
-    var onClick = _a.onClick;
+function PreviousButton({ onClick }) {
     return (React__default["default"].createElement("div", { className: styles.prev },
         React__default["default"].createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
-function NextButton(_a) {
-    var onClick = _a.onClick;
+function NextButton({ onClick }) {
     return (React__default["default"].createElement("div", { className: styles.next },
         React__default["default"].createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }