@jobber/components 4.0.0 → 4.0.1-pre.4

package/dist/{FormatFile-18e8a54a.js → FormatFile-3512f838.js}

@@ -4,13 +4,12 @@ var React = require('react');
 var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
-var Button = require('./Button-cd30df0f.js');
-var ConfirmationModal = require('./ConfirmationModal-e95f46d7.js');
-var Icon = require('./Icon-d5ad1a6d.js');
-var Typography = require('./Typography-fbe0ed6e.js');
-var Text = require('./Text-e012fb46.js');
-var ProgressBar = require('./ProgressBar-e9a49129.js');
+var Button = require('./Button-16e043ec.js');
+var ConfirmationModal = require('./ConfirmationModal-6a7beee2.js');
+var Icon = require('./Icon-405a216c.js');
+var Typography = require('./Typography-9262511f.js');
+var Text = require('./Text-7ce00adb.js');
+var ProgressBar = require('./ProgressBar-f028b159.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,31 +21,28 @@ var css$1 = ":root {\n  --file-card--height: calc(var(--space-base) * 3.5);\n  -
 var styles$1 = {"expanded":"_9dGq9pkZYNxwlhRwaVaWH","compact":"_24PiUzD_Hoe3p6hD_OxjbH","wrapper":"_26euKXXdGUFmchTL7YqSO7","large":"_2OuJNJWNnBmTTzGAUfSaM7","base":"_2GSQaEqbKQHd7Tf2XqJ5i1","thumbnail":"_1JreUit2_KSn_-iQ3vBhUn","clickable":"_3_8YVeas_gdmexLUKZ3mpR","hoverable":"_15spVvfm0lqLuhAwuIuWrm","progress":"_3Sb6hKDYDXwDcc69ByIdyl","contentBlock":"_2My-AZfFXfluwQURTvc6Z9","deleteButton":"_2pUMiqf0oiCus7WkVuTt57","deleteable":"_2g5hRVudATuiROg0LStgTs"};
 styleInject_es.styleInject(css$1);
 
-function FormatFileDeleteButton(_a) {
-    var size = _a.size, onDelete = _a.onDelete;
-    var buttonSize = size === "base" ? "small" : "base";
-    var _b = tslib_es6.__read(React.useState(false), 2), deleteConfirmationOpen = _b[0], setDeleteConfirmationOpen = _b[1];
+function FormatFileDeleteButton({ size, onDelete }) {
+    const buttonSize = size === "base" ? "small" : "base";
+    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Button.Button, { onClick: function () { return setDeleteConfirmationOpen(true); }, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
-        React__default["default"].createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: "Are you sure you want to delete this file?", confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(); }, onRequestClose: function () { return setDeleteConfirmationOpen(false); } })));
+        React__default["default"].createElement(Button.Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React__default["default"].createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
 }
 
 var css = "._15Z4SPrC7I2WxqMysdwQxX {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.VMZPGfgfpCH2eH5Mv9zgO {\n  display: none;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe {\n  display: -ms-flexbox;\n  display: flex;\n  width: inherit;\n  height: inherit;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  border: var(--border-base);\n  border-radius: var(--radius-base);\n  background: linear-gradient(\n    270deg,\n    rgb(244, 244, 244) 38.46%,\n    rgba(244, 244, 244, 0) 100%\n  );\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._3NVQrEqP9hGjbdbpOXGHQd::after {\n  width: var(--space-base);\n  height: var(--space-base);\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._2AI9R5gNW3y8vFV4ev1tge::after {\n  width: var(--space-large);\n  height: var(--space-large);\n}\n\n._3VjXRD4ob2Fdq9YxmNRy2S {\n  position: absolute;\n}\n\n._3NVQrEqP9hGjbdbpOXGHQd ._3VjXRD4ob2Fdq9YxmNRy2S {\n  bottom: var(--space-smaller);\n  left: var(--space-smaller);\n  font-size: var(--typography--fontSize-smaller);\n}\n\n._2AI9R5gNW3y8vFV4ev1tge ._3VjXRD4ob2Fdq9YxmNRy2S {\n  bottom: var(--space-small);\n  left: var(--space-small);\n  font-size: var(--typography--fontSize-small);\n}\n";
 var styles = {"image":"_15Z4SPrC7I2WxqMysdwQxX","loading":"VMZPGfgfpCH2eH5Mv9zgO","content":"Z-gb7-3W6CcFd5uSiosLe","base":"_3NVQrEqP9hGjbdbpOXGHQd","large":"_2AI9R5gNW3y8vFV4ev1tge","fileName":"_3VjXRD4ob2Fdq9YxmNRy2S"};
 styleInject_es.styleInject(css);
 
-function InternalThumbnail(_a) {
-    var _b;
-    var name = _a.name, _c = _a.hideName, hideName = _c === void 0 ? false : _c, size = _a.size, file = _a.file;
-    var _d = tslib_es6.__read(React.useState(), 2), imageSource = _d[0], setImageSource = _d[1];
-    var _e = tslib_es6.__read(React.useState(false), 2), imageLoaded = _e[0], setImageLoaded = _e[1];
-    var iconName = getIconNameFromType(file.type);
+function InternalThumbnail({ name, hideName = false, size, file, }) {
+    const [imageSource, setImageSource] = React.useState();
+    const [imageLoaded, setImageLoaded] = React.useState(false);
+    const iconName = getIconNameFromType(file.type);
     if (!imageSource && file.type.startsWith("image/")) {
-        file.src().then(function (src) { return setImageSource(src); });
+        file.src().then(src => setImageSource(src));
     }
-    var image = (React__default["default"].createElement("img", { src: imageSource, onLoad: function () {
+    const image = (React__default["default"].createElement("img", { src: imageSource, onLoad: () => {
             setImageLoaded(true);
-        }, className: classnames__default["default"](styles.image, (_b = {}, _b[styles.loading] = !imageLoaded, _b)), alt: name, "data-testid": "internalThumbnailImage" }));
+        }, className: classnames__default["default"](styles.image, { [styles.loading]: !imageLoaded }), alt: name, "data-testid": "internalThumbnailImage" }));
     if (imageLoaded) {
         return image;
     }
@@ -70,22 +66,20 @@ function getIconNameFromType(mimeType) {
     }
 }
 
-function FormatFile(_a) {
-    var _b, _c;
-    var file = _a.file, _d = _a.display, display = _d === void 0 ? "expanded" : _d, _e = _a.displaySize, displaySize = _e === void 0 ? "base" : _e, onDelete = _a.onDelete, onClick = _a.onClick;
-    var isComplete = file.progress >= 1;
-    var fileSize = getHumanReadableFileSize__default["default"](file.size);
-    var wrapperClassNames = classnames__default["default"](styles$1[display], (_b = {},
-        _b[styles$1[displaySize]] = display === "compact",
-        _b));
-    var DetailsContainer = isComplete && onClick ? "button" : "div";
-    var detailsClassNames = classnames__default["default"](styles$1.wrapper, (_c = {},
-        _c[styles$1[displaySize]] = display === "compact",
-        _c[styles$1.hoverable] = isHoverable({ display: display, isComplete: isComplete, onClick: onClick, onDelete: onDelete }),
-        _c[styles$1.clickable] = onClick,
-        _c[styles$1.deleteable] = display === "compact",
-        _c));
-    var thumbnailContainerClassNames = classnames__default["default"](styles$1.thumbnail, styles$1[displaySize]);
+function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
+    const isComplete = file.progress >= 1;
+    const fileSize = getHumanReadableFileSize__default["default"](file.size);
+    const wrapperClassNames = classnames__default["default"](styles$1[display], {
+        [styles$1[displaySize]]: display === "compact",
+    });
+    const DetailsContainer = isComplete && onClick ? "button" : "div";
+    const detailsClassNames = classnames__default["default"](styles$1.wrapper, {
+        [styles$1[displaySize]]: display === "compact",
+        [styles$1.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
+        [styles$1.clickable]: onClick,
+        [styles$1.deleteable]: display === "compact",
+    });
+    const thumbnailContainerClassNames = classnames__default["default"](styles$1.thumbnail, styles$1[displaySize]);
     return (React__default["default"].createElement("div", { className: wrapperClassNames },
         React__default["default"].createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
             React__default["default"].createElement("div", { className: thumbnailContainerClassNames },
@@ -98,8 +92,7 @@ function FormatFile(_a) {
         isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$1.deleteButton },
             React__default["default"].createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
 }
-function isHoverable(_a) {
-    var display = _a.display, isComplete = _a.isComplete, onClick = _a.onClick, onDelete = _a.onDelete;
+function isHoverable({ display, isComplete, onClick, onDelete, }) {
     if (display === "compact") {
         return Boolean(isComplete && (onClick || onDelete));
     }

package/dist/FormatRelativeDateTime/index.js

@@ -8,9 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FormatRelativeDateTime(_a) {
-    var inputDate = _a.date;
-    var dateObject;
+function FormatRelativeDateTime({ date: inputDate, }) {
+    let dateObject;
     if (inputDate instanceof Date) {
         dateObject = inputDate;
     }
@@ -20,9 +19,9 @@ function FormatRelativeDateTime(_a) {
     else {
         dateObject = new Date(inputDate.toJSON());
     }
-    var now = Date.now() / 1000; //seconds
-    var date = dateObject;
-    var delta = now - date.getTime() / 1000; //seconds;
+    const now = Date.now() / 1000; //seconds
+    const date = dateObject;
+    const delta = now - date.getTime() / 1000; //seconds;
     switch (relativeTimeRange(delta)) {
         case "less than an hour":
             return React__default["default"].createElement(React__default["default"].Fragment, null, showMinutes(Math.round(delta / 60)));

package/dist/FormatTime/index.js

@@ -8,9 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FormatTime(_a) {
-    var inputTime = _a.time, use24HourClock = _a.use24HourClock;
-    var dateObject;
+function FormatTime({ time: inputTime, use24HourClock, }) {
+    let dateObject;
     if (inputTime instanceof Date) {
         dateObject = inputTime;
     }
@@ -18,10 +17,10 @@ function FormatTime(_a) {
         dateObject = new Date(inputTime);
     }
     else {
-        var currentDate = new Date();
-        var currentYear = currentDate.getFullYear();
-        var currentMonth = currentDate.getMonth();
-        var currentDay = currentDate.getDay();
+        const currentDate = new Date();
+        const currentYear = currentDate.getFullYear();
+        const currentMonth = currentDate.getMonth();
+        const currentDay = currentDate.getDay();
         dateObject = new Date(currentYear, currentMonth, currentDay, inputTime.hour, inputTime.minute, inputTime.second, inputTime.millisecond);
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null, formatCivilTime(dateObject, use24HourClock));

package/dist/Gallery/GalleryTypes.d.ts

@@ -1,7 +1,7 @@
 import { IconNames } from "../Icon";
 import { FileUpload } from "../InputFile";
-export declare type Sizes = "small" | "base" | "large" | "extraLarge";
-export declare type FileIconsNames = Extract<IconNames, "file" | "excel" | "pdf" | "video" | "word">;
+export type Sizes = "small" | "base" | "large" | "extraLarge";
+export type FileIconsNames = Extract<IconNames, "file" | "excel" | "pdf" | "video" | "word">;
 export interface GalleryProps {
     /**
      * The size of the files and their spacing in the gallery

package/dist/Gallery/index.js

@@ -2,31 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var LightBox = require('../LightBox-1ad62669.js');
-var FormatFile = require('../FormatFile-18e8a54a.js');
-var Button = require('../Button-cd30df0f.js');
+var LightBox = require('../LightBox-dd1afa97.js');
+var FormatFile = require('../FormatFile-3512f838.js');
+var Button = require('../Button-16e043ec.js');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
 require('@jobber/hooks');
-require('../ButtonDismiss-a9590195.js');
+require('../ButtonDismiss-3fb1eaf9.js');
 require('filesize');
-require('../ConfirmationModal-e95f46d7.js');
-require('../Modal-cc3bd7bf.js');
-require('../Heading-a9a66964.js');
-require('../Typography-fbe0ed6e.js');
-require('../Content-18de5fbb.js');
-require('../Markdown-b53e0308.js');
+require('../ConfirmationModal-6a7beee2.js');
+require('../Modal-757e83fd.js');
+require('../Heading-7b203f7f.js');
+require('../Typography-9262511f.js');
+require('../Content-05df8f7f.js');
+require('../Markdown-be2dcd0c.js');
 require('react-markdown');
-require('../Text-e012fb46.js');
-require('../Emphasis-75a3f411.js');
-require('../Icon-d5ad1a6d.js');
+require('../Text-7ce00adb.js');
+require('../Emphasis-23dc2a0a.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ProgressBar-e9a49129.js');
+require('../ProgressBar-f028b159.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -38,22 +37,21 @@ var css = ".oLHYkzv718LqMvtqFZFcZ,\n._2JSG0uYj1HSXFads63nptQ {\n  display: -ms-f
 var styles = {"gallery":"oLHYkzv718LqMvtqFZFcZ","galleryLarge":"_2JSG0uYj1HSXFads63nptQ","showMoreButton":"_3LkQj1p9wvHbrfXfz2nUYp","baseShowMoreButton":"FG8mZ6UcMPRsMC9HQinY2","largeShowMoreButton":"_1cTzKosWc22qxWZSiI0CzZ"};
 styleInject_es.styleInject(css);
 
-function Gallery(_a) {
-    var files = _a.files, _b = _a.size, size = _b === void 0 ? "base" : _b, max = _a.max, onDelete = _a.onDelete;
-    var _c = generateImagesArray(files), images = _c.images, filesToImageIndex = _c.filesToImageIndex;
-    var _d = tslib_es6.__read(React.useState(false), 2), lightboxOpen = _d[0], setLightboxOpen = _d[1];
-    var _e = tslib_es6.__read(React.useState(0), 2), lightboxIndex = _e[0], setLightboxIndex = _e[1];
-    var _f = tslib_es6.__read(React.useState(max ? false : true), 2), displayPastMax = _f[0], setDisplayPastMax = _f[1];
-    var visibleFiles = displayPastMax ? files : files.slice(0, max);
+function Gallery({ files, size = "base", max, onDelete }) {
+    const { images, filesToImageIndex } = generateImagesArray(files);
+    const [lightboxOpen, setLightboxOpen] = React.useState(false);
+    const [lightboxIndex, setLightboxIndex] = React.useState(0);
+    const [displayPastMax, setDisplayPastMax] = React.useState(max ? false : true);
+    const visibleFiles = displayPastMax ? files : files.slice(0, max);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
-            visibleFiles.map(function (file, index) {
-                return (React__default["default"].createElement(FormatFile.FormatFile, { key: file.key, file: tslib_es6.__assign(tslib_es6.__assign({}, file), { src: function () { return Promise.resolve(file.src); } }), display: "compact", displaySize: size, onClick: function () {
+            visibleFiles.map((file, index) => {
+                return (React__default["default"].createElement(FormatFile.FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.src) }), display: "compact", displaySize: size, onClick: () => {
                         handleThumbnailClicked(index);
-                    }, onDelete: onDelete ? function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(file); } : undefined }));
+                    }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
-            max && files.length > max && !displayPastMax && (React__default["default"].createElement("div", { className: classnames__default["default"](styles.showMoreButton, styles[size + "ShowMoreButton"]) },
-                React__default["default"].createElement(Button.Button, { type: "tertiary", size: size, label: "+ " + (files.length - max), fullWidth: true, onClick: function () {
+            max && files.length > max && !displayPastMax && (React__default["default"].createElement("div", { className: classnames__default["default"](styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
+                React__default["default"].createElement(Button.Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                         setDisplayPastMax(true);
                     } })))),
         React__default["default"].createElement(LightBox.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
@@ -66,7 +64,7 @@ function Gallery(_a) {
         }
     }
     function handleLightboxOpen(index) {
-        var fileToImageIndex = filesToImageIndex[index];
+        const fileToImageIndex = filesToImageIndex[index];
         if (fileToImageIndex !== undefined) {
             setLightboxIndex(fileToImageIndex);
             setLightboxOpen(true);
@@ -77,10 +75,10 @@ function Gallery(_a) {
     }
 }
 function generateImagesArray(files) {
-    var images = [];
-    var filesToImageIndex = [];
-    var imageIndex = 0;
-    for (var i = 0; i < files.length; i++) {
+    const images = [];
+    const filesToImageIndex = [];
+    let imageIndex = 0;
+    for (let i = 0; i < files.length; i++) {
         if (files[i].type.startsWith("image/")) {
             images.push({ title: files[i].name, url: files[i].src });
             filesToImageIndex.push(imageIndex);
@@ -90,7 +88,7 @@ function generateImagesArray(files) {
             filesToImageIndex.push(undefined);
         }
     }
-    return { images: images, filesToImageIndex: filesToImageIndex };
+    return { images, filesToImageIndex };
 }
 
 exports.Gallery = Gallery;

package/dist/Heading/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Heading = require('../Heading-a9a66964.js');
-require('../tslib.es6-5b50eb8e.js');
+var Heading = require('../Heading-7b203f7f.js');
 require('react');
-require('../Typography-fbe0ed6e.js');
+require('../Typography-9262511f.js');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
 

package/dist/{Heading-a9a66964.js → Heading-7b203f7f.js}

@@ -1,16 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
-var Typography = require('./Typography-fbe0ed6e.js');
+var Typography = require('./Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Heading(_a) {
-    var _b = _a.level, level = _b === void 0 ? 5 : _b, children = _a.children;
-    var levelMap = {
+function Heading({ level = 5, children }) {
+    const levelMap = {
         1: {
             element: "h1",
             size: "jumbo",
@@ -49,7 +47,7 @@ function Heading(_a) {
             textColor: "heading",
         },
     };
-    return React__default["default"].createElement(Typography.Typography, tslib_es6.__assign({}, levelMap[level]), children);
+    return React__default["default"].createElement(Typography.Typography, Object.assign({}, levelMap[level]), children);
 }
 
 exports.Heading = Heading;

package/dist/Icon/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Icon = require('../Icon-d5ad1a6d.js');
+var Icon = require('../Icon-405a216c.js');
 require('react');
 require('@jobber/design');
 

package/dist/{Icon-d5ad1a6d.js → Icon-405a216c.js}

@@ -7,19 +7,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Icon(_a) {
-    var name = _a.name, color = _a.color, customColor = _a.customColor, _b = _a.size, size = _b === void 0 ? "base" : _b;
-    var icon;
-    var _c = design.getIcon({
-        name: name,
+function Icon({ name, color, customColor, size = "base" }) {
+    let icon;
+    const { svgClassNames, pathClassNames, paths, viewBox } = design.getIcon({
+        name,
         color: getIconColor(name, color),
-        size: size,
-    }), svgClassNames = _c.svgClassNames, pathClassNames = _c.pathClassNames, paths = _c.paths, viewBox = _c.viewBox;
+        size,
+    });
     if (name === "truck") {
         icon = getTruck(pathClassNames, customColor);
     }
     else {
-        icon = paths.map(function (path) { return (React__default["default"].createElement("path", { key: path, className: pathClassNames, d: path, fill: customColor })); });
+        icon = paths.map((path) => (React__default["default"].createElement("path", { key: path, className: pathClassNames, d: path, fill: customColor })));
     }
     return (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, className: svgClassNames, "data-testid": name }, icon));
 }

package/dist/InlineLabel/InlineLabel.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-export declare type InlineLabelColors = "greyBlue" | "red" | "orange" | "green" | "blue" | "yellow" | "lime" | "purple" | "pink" | "teal" | "yellowGreen" | "blueDark" | "lightBlue" | "indigo";
+export type InlineLabelColors = "greyBlue" | "red" | "orange" | "green" | "blue" | "yellow" | "lime" | "purple" | "pink" | "teal" | "yellowGreen" | "blueDark" | "lightBlue" | "indigo";
 interface InlineLabelProps {
     /**
      * The size of the label

package/dist/InlineLabel/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Typography = require('../Typography-fbe0ed6e.js');
-require('../tslib.es6-5b50eb8e.js');
+var Typography = require('../Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,10 +16,9 @@ var css = "._2CX7X_wH5lb0fioNTuYTB3 {\n  display: -ms-inline-flexbox;\n  display
 var styles = {"inlineLabel":"_2CX7X_wH5lb0fioNTuYTB3","base":"hIEzl9j3x8azFGCx53-RF","large":"_2FEAdHSbQ1julTQlXKcU9G","larger":"y2IZqgoDbEVd68JUw74_V","greyBlue":"_3ayhjHoV55pJnCyceIIodY","red":"_1NRX5K08cyefHFTjmEY7JC","orange":"_2WqpAFlUhWh2Wycr-r2uMn","green":"EM3QGMlc1v7pjfVBR2j82","blue":"LuBWHY5BJNh4RnEPozKgA","navy":"_36P3W4wMGeF6ObMYI87q2b","yellow":"z7yJ1rNuOTksBtZ0cr3ys","lime":"_2jRJWXkl2av1GzSTdc4GS","purple":"_2DSYzUVBgtIaB1xsMr7rVj","pink":"_27cvq6AfdeOP6SUuX5Ex_T","teal":"eImPpTsVAb13A3dFkEkBc","yellowGreen":"_1AcWxzfWcjE71_gRrEo-J_","blueDark":"J21zEr7ZIvGwt6R5-MZQ7","lightBlue":"_27HNFihCeydE5HUcbCskQ4","indigo":"_3_dDXhHTqG9pa_au-60pWR"};
 styleInject_es.styleInject(css);
 
-function InlineLabel(_a) {
-    var _b = _a.size, size = _b === void 0 ? "base" : _b, _c = _a.color, color = _c === void 0 ? "greyBlue" : _c, children = _a.children;
-    var className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
-    var sizeMapper = {
+function InlineLabel({ size = "base", color = "greyBlue", children, }) {
+    const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
+    const sizeMapper = {
         base: "small",
         large: "large",
         larger: "large",

package/dist/InputAvatar/index.js

@@ -2,22 +2,22 @@
 
 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 styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Avatar = require('../Avatar-cfd04e86.js');
-var InputFile = require('../InputFile-e108a7f8.js');
-var ProgressBar = require('../ProgressBar-e9a49129.js');
-var Button = require('../Button-cd30df0f.js');
+var Avatar = require('../Avatar-89cfd0a6.js');
+var InputFile = require('../InputFile-5e0ed2b5.js');
+var ProgressBar = require('../ProgressBar-f028b159.js');
+var Button = require('../Button-16e043ec.js');
 require('classnames');
 require('color');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
 require('react-dropzone');
 require('axios');
 require('uuid');
-require('../Content-18de5fbb.js');
-require('../Typography-fbe0ed6e.js');
+require('../Content-05df8f7f.js');
+require('../Typography-9262511f.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -29,11 +29,11 @@ var styles = {"inputAvatar":"_1e1D2becaB2vzZJ8QkTQFY","preview":"TQgDlkCH4_o4LkH
 styleInject_es.styleInject(css);
 
 function InputAvatar(_a) {
-    var getUploadParams = _a.getUploadParams, onUploadComplete = _a.onUploadComplete, onChange = _a.onChange, avatarProps = tslib_es6.__rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
-    var _b = tslib_es6.__read(React.useState(1), 2), progress = _b[0], setProgress = _b[1];
+    var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = tslib_es6.__rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
+    const [progress, setProgress] = React.useState(1);
     return (React__default["default"].createElement("div", { className: styles.inputAvatar },
         React__default["default"].createElement("div", { className: styles.preview },
-            React__default["default"].createElement(Avatar.Avatar, tslib_es6.__assign({ size: "large" }, avatarProps)),
+            React__default["default"].createElement(Avatar.Avatar, Object.assign({ size: "large" }, avatarProps)),
             progress < 1 && (React__default["default"].createElement(Overlay, null,
                 React__default["default"].createElement(Centered, null,
                     React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
@@ -48,11 +48,8 @@ function InputAvatar(_a) {
         handleUpload(newFile);
     }
     function handleUpload(newFile) {
-        return tslib_es6.__awaiter(this, void 0, void 0, function () {
-            return tslib_es6.__generator(this, function (_a) {
-                setProgress(newFile.progress);
-                return [2 /*return*/];
-            });
+        return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+            setProgress(newFile.progress);
         });
     }
     function clearAvatar() {
@@ -60,12 +57,10 @@ function InputAvatar(_a) {
         setProgress(1);
     }
 }
-function Overlay(_a) {
-    var children = _a.children;
+function Overlay({ children }) {
     return React__default["default"].createElement("div", { className: styles.overlay }, children);
 }
-function Centered(_a) {
-    var children = _a.children;
+function Centered({ children }) {
     // Note: this HIGHLY experimental Centered component is applying margin.
     return React__default["default"].createElement("div", { className: styles.centered }, children);
 }

package/dist/InputDate/index.js

@@ -2,24 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var lodash = require('lodash');
 var React = require('react');
-var FormField = require('../FormField-76068c0b.js');
-var DatePicker = require('../DatePicker-7c67e8d2.js');
+var FormField = require('../FormField-1e444bb6.js');
+var DatePicker = require('../DatePicker-af21ae91.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');
 require('react-datepicker');
 require('@jobber/hooks');
 
@@ -28,17 +28,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputDate(inputProps) {
-    return (React__default["default"].createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: function (activatorProps) {
-            var onChange = activatorProps.onChange, onClick = activatorProps.onClick, value = activatorProps.value;
-            var newActivatorProps = lodash.omit(activatorProps, ["activator"]);
-            var suffix = tslib_es6.__assign({ icon: "calendar" }, (onClick && {
+    return (React__default["default"].createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
+            const { onChange, onClick, value } = activatorProps;
+            const newActivatorProps = lodash.omit(activatorProps, ["activator"]);
+            const suffix = Object.assign({ icon: "calendar" }, (onClick && {
                 onClick: onClick,
                 ariaLabel: "Show calendar",
             }));
-            return (React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({}, newActivatorProps, inputProps, { value: value, onChange: function (_, event) { return onChange && onChange(event); }, onBlur: function () {
+            return (React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
                     inputProps.onBlur && inputProps.onBlur();
                     activatorProps.onBlur && activatorProps.onBlur();
-                }, onFocus: function () {
+                }, onFocus: () => {
                     inputProps.onFocus && inputProps.onFocus();
                     activatorProps.onFocus && activatorProps.onFocus();
                 }, suffix: suffix })));

package/dist/InputEmail/InputEmail.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
-declare type InputEmailProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
+type InputEmailProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
 export declare const validationMessage = "Please enter a valid email";
 export declare function InputEmail(props: InputEmailProps): JSX.Element;
 export {};

package/dist/InputEmail/index.js

@@ -2,33 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var FormField = require('../FormField-76068c0b.js');
+var FormField = require('../FormField-1e444bb6.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);
 
-var validationMessage = "Please enter a valid email";
+const validationMessage = "Please enter a valid email";
 function InputEmail(props) {
-    var validations = props.validations;
-    return (React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({}, props, { type: "email", validations: tslib_es6.__assign(tslib_es6.__assign({}, validations), { validate: checkForValidEmail }) })));
+    const { validations } = props;
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
     function checkForValidEmail(value) {
-        var emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         if (!value) {
             return true;
         }