@jobber/components 6.26.0 → 6.26.2

package/dist/FormatFile-es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import getHumanReadableFileSize from 'filesize';
 import { B as Button } from './Button-es.js';
@@ -14,9 +14,9 @@ var styles$2 = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact"
 function FormatFileDeleteButton({ size, onDelete }) {
     const buttonSize = size === "base" ? "small" : "base";
     const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
-    return (React.createElement("div", { className: styles$2.deleteButton },
-        React.createElement(Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
-        React.createElement(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) })));
+    return (React__default.createElement("div", { className: styles$2.deleteButton },
+        React__default.createElement(Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React__default.createElement(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 styles$1 = {"content":"GlvUe-y47J8-","hasName":"zxlhNVPlPfU-","large":"PLxm6a4dUeE-","fileName":"-HUnao9DHy4-","base":"HJGVBmS64DY-","spinning":"Svf9Lca4cus-"};
@@ -30,9 +30,9 @@ function InternalThumbnailImage({ file }) {
     useEffect(() => {
         src().then(url => setImageSource(url));
     }, []);
-    return (React.createElement(React.Fragment, null,
-        !imageLoaded && React.createElement(Glimmer, { size: "auto" }),
-        React.createElement("img", { src: imageSource, onError: file.onImageLoadError, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }) })));
+    return (React__default.createElement(React__default.Fragment, null,
+        !imageLoaded && React__default.createElement(Glimmer, { size: "auto" }),
+        React__default.createElement("img", { src: imageSource, onError: file.onImageLoadError, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }) })));
     function handleImageLoad() {
         setImageLoaded(true);
     }
@@ -82,14 +82,14 @@ function InternalThumbnail({ compact = false, size, file, }) {
     const iconName = getIconNameFromType(type);
     const hasName = Boolean(name) && compact;
     if (type.startsWith("image/") && isSupportedImageType(file)) {
-        return React.createElement(InternalThumbnailImage, { file: file });
+        return React__default.createElement(InternalThumbnailImage, { file: file });
     }
-    return (React.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
+    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
             [styles$1.hasName]: hasName,
         }) },
-        React.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
-        hasName && (React.createElement("div", { className: styles$1.fileName },
-            React.createElement(Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
+        React__default.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React__default.createElement("div", { className: styles$1.fileName },
+            React__default.createElement(Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
 }
 function getIconNameFromType(mimeType) {
     if (mimeType.startsWith("image/"))
@@ -126,17 +126,17 @@ function FormatFile({ file, display = "expanded", displaySize = "base", onDelete
         [styles$2.deleteable]: display === "compact",
     });
     const thumbnailContainerClassNames = classnames(styles$2.thumbnail, styles$2[displaySize]);
-    return (React.createElement("div", { className: wrapperClassNames },
-        React.createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
-            React.createElement("div", { className: thumbnailContainerClassNames },
-                React.createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
-                !isComplete && (React.createElement("div", { className: styles$2.progress },
-                    React.createElement(ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
-            display === "expanded" && (React.createElement("div", { className: styles$2.contentBlock },
-                React.createElement(Text, { size: "base" }, file.name),
-                React.createElement(Text, { size: "small" }, fileSize)))),
-        isComplete && onDelete && (React.createElement("div", { className: styles$2.deleteButton },
-            React.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
+    return (React__default.createElement("div", { className: wrapperClassNames },
+        React__default.createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
+            React__default.createElement("div", { className: thumbnailContainerClassNames },
+                React__default.createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
+                !isComplete && (React__default.createElement("div", { className: styles$2.progress },
+                    React__default.createElement(ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React__default.createElement("div", { className: styles$2.contentBlock },
+                React__default.createElement(Text, { size: "base" }, file.name),
+                React__default.createElement(Text, { size: "small" }, fileSize)))),
+        isComplete && onDelete && (React__default.createElement("div", { className: styles$2.deleteButton },
+            React__default.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
 }
 function isHoverable({ display, isComplete, onClick, onDelete, }) {
     if (display === "compact") {

package/dist/FormatRelativeDateTime-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 function FormatRelativeDateTime({ date: inputDate, }) {
     let dateObject;
@@ -13,18 +13,18 @@ function FormatRelativeDateTime({ date: inputDate, }) {
     const delta = now - date.getTime() / 1000; //seconds;
     switch (relativeTimeRange(delta)) {
         case "less than an hour":
-            return React.createElement(React.Fragment, null, showMinutes(Math.round(delta / 60)));
+            return React__default.createElement(React__default.Fragment, null, showMinutes(Math.round(delta / 60)));
         case "less then a day":
-            return (React.createElement(React.Fragment, null, date.toLocaleTimeString(undefined, {
+            return (React__default.createElement(React__default.Fragment, null, date.toLocaleTimeString(undefined, {
                 hour: "numeric",
                 minute: "numeric",
             })));
         case "less than a week":
-            return React.createElement(React.Fragment, null, strFormatDate(date, { weekday: "short" }));
+            return React__default.createElement(React__default.Fragment, null, strFormatDate(date, { weekday: "short" }));
         case "less than a year":
-            return React.createElement(React.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
+            return React__default.createElement(React__default.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
         default:
-            return (React.createElement(React.Fragment, null, strFormatDate(date, {
+            return (React__default.createElement(React__default.Fragment, null, strFormatDate(date, {
                 month: "short",
                 day: "numeric",
                 year: "numeric",

package/dist/FormatTime-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 function FormatTime({ time: inputTime, use24HourClock, }) {
     let dateObject;
@@ -8,7 +8,7 @@ function FormatTime({ time: inputTime, use24HourClock, }) {
     else {
         dateObject = new Date(inputTime);
     }
-    return React.createElement(React.Fragment, null, dateToLocaleTimeString(dateObject, use24HourClock));
+    return React__default.createElement(React__default.Fragment, null, dateToLocaleTimeString(dateObject, use24HourClock));
 }
 function dateToLocaleTimeString(date, use24HourClock) {
     const language = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator) ? navigator.language : "en";

package/dist/Gallery-es.js

@@ -1,5 +1,5 @@
 import { a as __awaiter } from './tslib.es6-es.js';
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import classnames from 'classnames';
 import { L as LightBox } from './LightBox-es.js';
 import { F as FormatFile, i as isSafari } from './FormatFile-es.js';
@@ -10,7 +10,7 @@ var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreB
 function Gallery({ files, size = "base", max, onDelete }) {
     const [images, setImages] = useState([]);
     const [filesToImageIndex, setFilesToImageIndex] = useState([]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         generateImagesArray(files).then(result => {
             setImages(result.images);
             setFilesToImageIndex(result.filesToImageIndex);
@@ -20,18 +20,18 @@ function Gallery({ files, size = "base", max, onDelete }) {
     const [lightboxIndex, setLightboxIndex] = useState(0);
     const [displayPastMax, setDisplayPastMax] = useState(max ? false : true);
     const visibleFiles = displayPastMax ? files : files.slice(0, max);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
             visibleFiles.map((file, index) => {
-                return (React.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || getFileSrc(file)) }), display: "compact", displaySize: size, onClick: () => {
+                return (React__default.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || getFileSrc(file)) }), display: "compact", displaySize: size, onClick: () => {
                         handleThumbnailClicked(index);
                     }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
-            max && files.length > max && !displayPastMax && (React.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
-                React.createElement(Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
+            max && files.length > max && !displayPastMax && (React__default.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
+                React__default.createElement(Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                         setDisplayPastMax(true);
                     } })))),
-        React.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
+        React__default.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
     function handleThumbnailClicked(index) {
         return __awaiter(this, void 0, void 0, function* () {
             if (files[index].type.startsWith("image/") &&

package/dist/Glimmer-es.js

@@ -1,5 +1,5 @@
 import { _ as __rest } from './tslib.es6-es.js';
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { C as Content } from './Content-es.js';
 
@@ -17,7 +17,7 @@ const GLIMMER_TEXT_TEST_ID = "ATL-GlimmerText";
 const GLIMMER_BUTTON_TEST_ID = "ATL-GlimmerButton";
 function Glimmer({ size = "base", shape = "rectangle", timing = "base", reverseTheme = false, width, }) {
     const className = classnames(styles.glimmer, sizes[size], shapes[shape], timings[timing], { [styles.reverseTheme]: reverseTheme });
-    return (React.createElement("div", { "aria-busy": "true", role: "status", className: className, "data-testid": GLIMMER_TEST_ID, style: { width } }));
+    return (React__default.createElement("div", { "aria-busy": "true", role: "status", className: className, "data-testid": GLIMMER_TEST_ID, style: { width } }));
 }
 Glimmer.Header = function GlimmerHeader(_a) {
     var { level = 3 } = _a, props = __rest(_a, ["level"]);
@@ -28,26 +28,26 @@ Glimmer.Header = function GlimmerHeader(_a) {
         4: "base",
         5: "small",
     };
-    return (React.createElement("div", { className: styles.header, "data-testid": GLIMMER_HEADER_TEST_ID },
-        React.createElement(Glimmer, Object.assign({ size: headerSize[level] }, props))));
+    return (React__default.createElement("div", { className: styles.header, "data-testid": GLIMMER_HEADER_TEST_ID },
+        React__default.createElement(Glimmer, Object.assign({ size: headerSize[level] }, props))));
 };
 Glimmer.Text = function GlimmerText(_a) {
     var { width, lines = 3 } = _a, props = __rest(_a, ["width", "lines"]);
     const children = [
-        React.createElement(Glimmer, Object.assign({ key: "1", size: "small", shape: "rectangleShort" }, props)),
-        React.createElement(Glimmer, Object.assign({ key: "2", size: "small" }, props)),
-        React.createElement(Glimmer, Object.assign({ key: "3", size: "small", shape: "rectangleShorter" }, props)),
+        React__default.createElement(Glimmer, Object.assign({ key: "1", size: "small", shape: "rectangleShort" }, props)),
+        React__default.createElement(Glimmer, Object.assign({ key: "2", size: "small" }, props)),
+        React__default.createElement(Glimmer, Object.assign({ key: "3", size: "small", shape: "rectangleShorter" }, props)),
     ].slice(0, lines);
-    return (React.createElement("div", { style: { width }, "data-testid": GLIMMER_TEXT_TEST_ID },
-        React.createElement(Content, { spacing: "small" }, children)));
+    return (React__default.createElement("div", { style: { width }, "data-testid": GLIMMER_TEXT_TEST_ID },
+        React__default.createElement(Content, { spacing: "small" }, children)));
 };
 Glimmer.Button = function GlimmerButton(_a) {
     var { fullWidth = false } = _a, props = __rest(_a, ["fullWidth"]);
     const buttonClassNames = classnames(styles.button, {
         [styles.buttonFill]: fullWidth,
     });
-    return (React.createElement("div", { className: buttonClassNames, "data-testid": GLIMMER_BUTTON_TEST_ID },
-        React.createElement(Glimmer, Object.assign({}, props, { size: "auto" }))));
+    return (React__default.createElement("div", { className: buttonClassNames, "data-testid": GLIMMER_BUTTON_TEST_ID },
+        React__default.createElement(Glimmer, Object.assign({}, props, { size: "auto" }))));
 };
 
 export { Glimmer as G, GLIMMER_TEST_ID as a };

package/dist/Grid-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { a as GridCell } from './GridCell-es.js';
 
@@ -11,7 +11,7 @@ function Grid({ alignItems = "start", gap = true, children, }) {
     const classnames$1 = classnames(styles.grid, alignments[alignItems], {
         [styles.gap]: gap,
     });
-    return (React.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames$1 }, children));
+    return (React__default.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames$1 }, children));
 }
 Grid.Cell = GridCell;
 

package/dist/GridCell-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 var styles = {"gridCell":"U0IgyTjmtnU-","spinning":"KceqkKMGwzE-"};
 
@@ -14,7 +14,7 @@ function GridCell({ size, children }) {
      * the column
      */
     const cssSizeVariables = breakpoints.reduce(getSizeCSSVariables(size), {});
-    return (React.createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles.gridCell, style: cssSizeVariables }, children));
+    return (React__default.createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles.gridCell, style: cssSizeVariables }, children));
 }
 function getSizeCSSVariables(size) {
     return (breakpointsObj, currentSize) => {

package/dist/Heading-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { T as Typography } from './Typography-es.js';
 
 function Heading({ level = 5, children, element }) {
@@ -41,7 +41,7 @@ function Heading({ level = 5, children, element }) {
             textColor: "heading",
         },
     };
-    return (React.createElement(Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element }), children));
+    return (React__default.createElement(Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element }), children));
 }
 
 export { Heading as H };

package/dist/Icon-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { getIcon } from '@jobber/design';
 
 function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
@@ -13,9 +13,9 @@ function Icon({ name, color, customColor, size = "base", testID, UNSAFE_classNam
         icon = getTruck(pathStyle, customColor);
     }
     else {
-        icon = paths.map((path) => (React.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
+        icon = paths.map((path) => (React__default.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
     }
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
+    return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }
 function getIconColor(name, color) {
     if (name === "truck") {
@@ -24,12 +24,12 @@ function getIconColor(name, color) {
     return color;
 }
 function getTruck(pathStyle, customColor) {
-    return (React.createElement("g", { transform: "translate(233.000000, 0.000000)", style: Object.assign({}, pathStyle) },
-        React.createElement("path", { d: "M31.030303,124.121212 C31.030303,106.983796 44.9231903,93.0909091 62.0606061,93.0909091 L93.0909091,93.0909091 L93.0909091,279.272727 L62.0606061,279.272727 C44.9231903,279.272727 31.030303,265.37984 31.030303,248.242424 L31.030303,124.121212 Z M31.030303,744.727273 C31.030303,727.589236 44.9231903,713.69697 62.0606061,713.69697 L93.0909091,713.69697 L93.0909091,899.878788 L62.0606061,899.878788 C44.9231903,899.878788 31.030303,885.986521 31.030303,868.848485 L31.030303,744.727273 Z M62.0606061,961.939394 L496.484848,961.939394 L496.484848,992.969697 C496.484848,1010.10773 482.592582,1024 465.454545,1024 L93.0909091,1024 C75.9534933,1024 62.0606061,1010.10773 62.0606061,992.969697 L62.0606061,961.939394 Z M494.858861,713.715588 L463.834764,714.258618 L467.083636,900.412509 L498.107733,899.869479 C515.242667,899.571588 528.889794,885.437285 528.591903,868.302352 L526.425988,744.199758 C526.128097,727.064824 511.993794,713.417697 494.858861,713.715588 Z M496.484848,93.0909091 L465.454545,93.0909091 L465.454545,279.272727 L496.484848,279.272727 C513.622885,279.272727 527.515152,265.37984 527.515152,248.242424 L527.515152,124.121212 C527.515152,106.983796 513.622885,93.0909091 496.484848,93.0909091 Z", id: "Shape", fill: "#2B2B2B" }),
-        React.createElement("path", { d: "M124.121212,0 C89.8460703,0 62.0606061,27.7854642 62.0606061,62.0606061 L62.0606061,310.30303 L31.030303,310.30303 C13.8927321,310.30303 0,324.195297 0,341.333333 L62.0606061,341.333333 L62.0606061,992.969697 L496.484848,992.969697 L496.484848,341.333333 L558.545455,341.333333 C558.545455,324.195297 544.653188,310.30303 527.515152,310.30303 L496.484848,310.30303 L496.484848,62.0606061 C496.484848,27.7854642 468.700315,0 434.424242,0 L124.121212,0 Z", id: "Path", fill: customColor }),
-        React.createElement("path", { d: "M465.454545,589.575758 L93.0909091,589.575758 L93.0909091,713.69697 L124.121212,713.69697 C141.258628,713.69697 155.151515,727.589236 155.151515,744.727273 L155.151515,868.848485 C155.151515,885.986521 141.258628,899.878788 124.121212,899.878788 L93.0909091,899.878788 L93.0909091,961.939394 L465.454545,961.939394 L465.454545,899.878788 L434.424242,899.878788 C417.286206,899.878788 403.393939,885.986521 403.393939,868.848485 L403.393939,744.727273 C403.393939,727.589236 417.286206,713.69697 434.424242,713.69697 L465.454545,713.69697 L465.454545,589.575758 Z", id: "Path", fillOpacity: "0.35", fill: "#000000" }),
-        React.createElement("path", { d: "M93.0909091,62.0606061 C93.0909091,44.9231903 106.983796,31.030303 124.121212,31.030303 L434.424242,31.030303 C451.562279,31.030303 465.454545,44.9231903 465.454545,62.0606061 L465.454545,589.575758 L93.0909091,589.575758 L93.0909091,62.0606061 Z M93.0909091,713.69697 L124.121212,713.69697 C141.258628,713.69697 155.151515,727.589236 155.151515,744.727273 L155.151515,868.848485 C155.151515,885.986521 141.258628,899.878788 124.121212,899.878788 L93.0909091,899.878788 L93.0909091,713.69697 Z M434.424242,713.69697 C417.286206,713.69697 403.393939,727.589236 403.393939,744.727273 L403.393939,868.848485 C403.393939,885.986521 417.286206,899.878788 434.424242,899.878788 L465.454545,899.878788 L465.454545,713.69697 L434.424242,713.69697 Z", id: "Shape", fill: "#FFFFFF", opacity: "0.5" }),
-        React.createElement("path", { d: "M93.0909091,279.272727 C113.777881,268.929396 192.387879,248.242424 279.272727,248.242424 C366.157576,248.242424 444.766642,268.929396 465.454545,279.272727 L403.393939,372.363636 C393.051539,362.021236 341.333333,341.333333 279.272727,341.333333 C217.212121,341.333333 165.494846,362.021236 155.151515,372.363636 L93.0909091,279.272727 Z M155.151515,512 L155.151515,403.393939 L93.0909091,310.30303 L93.0909091,512 L155.151515,512 Z M403.393939,512 L403.393939,403.393939 L465.454545,310.30303 L465.454545,512 L403.393939,512 Z", id: "Shape", fill: "#2A2A2A" })));
+    return (React__default.createElement("g", { transform: "translate(233.000000, 0.000000)", style: Object.assign({}, pathStyle) },
+        React__default.createElement("path", { d: "M31.030303,124.121212 C31.030303,106.983796 44.9231903,93.0909091 62.0606061,93.0909091 L93.0909091,93.0909091 L93.0909091,279.272727 L62.0606061,279.272727 C44.9231903,279.272727 31.030303,265.37984 31.030303,248.242424 L31.030303,124.121212 Z M31.030303,744.727273 C31.030303,727.589236 44.9231903,713.69697 62.0606061,713.69697 L93.0909091,713.69697 L93.0909091,899.878788 L62.0606061,899.878788 C44.9231903,899.878788 31.030303,885.986521 31.030303,868.848485 L31.030303,744.727273 Z M62.0606061,961.939394 L496.484848,961.939394 L496.484848,992.969697 C496.484848,1010.10773 482.592582,1024 465.454545,1024 L93.0909091,1024 C75.9534933,1024 62.0606061,1010.10773 62.0606061,992.969697 L62.0606061,961.939394 Z M494.858861,713.715588 L463.834764,714.258618 L467.083636,900.412509 L498.107733,899.869479 C515.242667,899.571588 528.889794,885.437285 528.591903,868.302352 L526.425988,744.199758 C526.128097,727.064824 511.993794,713.417697 494.858861,713.715588 Z M496.484848,93.0909091 L465.454545,93.0909091 L465.454545,279.272727 L496.484848,279.272727 C513.622885,279.272727 527.515152,265.37984 527.515152,248.242424 L527.515152,124.121212 C527.515152,106.983796 513.622885,93.0909091 496.484848,93.0909091 Z", id: "Shape", fill: "#2B2B2B" }),
+        React__default.createElement("path", { d: "M124.121212,0 C89.8460703,0 62.0606061,27.7854642 62.0606061,62.0606061 L62.0606061,310.30303 L31.030303,310.30303 C13.8927321,310.30303 0,324.195297 0,341.333333 L62.0606061,341.333333 L62.0606061,992.969697 L496.484848,992.969697 L496.484848,341.333333 L558.545455,341.333333 C558.545455,324.195297 544.653188,310.30303 527.515152,310.30303 L496.484848,310.30303 L496.484848,62.0606061 C496.484848,27.7854642 468.700315,0 434.424242,0 L124.121212,0 Z", id: "Path", fill: customColor }),
+        React__default.createElement("path", { d: "M465.454545,589.575758 L93.0909091,589.575758 L93.0909091,713.69697 L124.121212,713.69697 C141.258628,713.69697 155.151515,727.589236 155.151515,744.727273 L155.151515,868.848485 C155.151515,885.986521 141.258628,899.878788 124.121212,899.878788 L93.0909091,899.878788 L93.0909091,961.939394 L465.454545,961.939394 L465.454545,899.878788 L434.424242,899.878788 C417.286206,899.878788 403.393939,885.986521 403.393939,868.848485 L403.393939,744.727273 C403.393939,727.589236 417.286206,713.69697 434.424242,713.69697 L465.454545,713.69697 L465.454545,589.575758 Z", id: "Path", fillOpacity: "0.35", fill: "#000000" }),
+        React__default.createElement("path", { d: "M93.0909091,62.0606061 C93.0909091,44.9231903 106.983796,31.030303 124.121212,31.030303 L434.424242,31.030303 C451.562279,31.030303 465.454545,44.9231903 465.454545,62.0606061 L465.454545,589.575758 L93.0909091,589.575758 L93.0909091,62.0606061 Z M93.0909091,713.69697 L124.121212,713.69697 C141.258628,713.69697 155.151515,727.589236 155.151515,744.727273 L155.151515,868.848485 C155.151515,885.986521 141.258628,899.878788 124.121212,899.878788 L93.0909091,899.878788 L93.0909091,713.69697 Z M434.424242,713.69697 C417.286206,713.69697 403.393939,727.589236 403.393939,744.727273 L403.393939,868.848485 C403.393939,885.986521 417.286206,899.878788 434.424242,899.878788 L465.454545,899.878788 L465.454545,713.69697 L434.424242,713.69697 Z", id: "Shape", fill: "#FFFFFF", opacity: "0.5" }),
+        React__default.createElement("path", { d: "M93.0909091,279.272727 C113.777881,268.929396 192.387879,248.242424 279.272727,248.242424 C366.157576,248.242424 444.766642,268.929396 465.454545,279.272727 L403.393939,372.363636 C393.051539,362.021236 341.333333,341.333333 279.272727,341.333333 C217.212121,341.333333 165.494846,362.021236 155.151515,372.363636 L93.0909091,279.272727 Z M155.151515,512 L155.151515,403.393939 L93.0909091,310.30303 L93.0909091,512 L155.151515,512 Z M403.393939,512 L403.393939,403.393939 L465.454545,310.30303 L465.454545,512 L403.393939,512 Z", id: "Shape", fill: "#2A2A2A" })));
 }
 
 export { Icon as I };

package/dist/InlineLabel-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { T as Typography } from './Typography-es.js';
 
@@ -11,8 +11,8 @@ function InlineLabel({ size = "base", color = "greyBlue", children, }) {
         large: "large",
         larger: "large",
     };
-    return (React.createElement("span", { className: className },
-        React.createElement(Typography, { element: "span", size: sizeMapper[size] }, children)));
+    return (React__default.createElement("span", { className: className },
+        React__default.createElement(Typography, { element: "span", size: sizeMapper[size] }, children)));
 }
 
 export { InlineLabel as I };

package/dist/InputAvatar-es.js

@@ -1,5 +1,5 @@
 import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import { A as Avatar } from './Avatar-es.js';
 import { I as InputFile } from './InputFile-es.js';
 import { P as ProgressBar } from './ProgressBar-es.js';
@@ -11,14 +11,14 @@ var styles = {"inputAvatar":"CMahTsC0SPE-","preview":"VOVr4KEFeVk-","centered":"
 function InputAvatar(_a) {
     var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = __rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
     const [progress, setProgress] = useState(1);
-    return (React.createElement("div", { className: styles.inputAvatar },
-        React.createElement("div", { className: styles.preview },
-            React.createElement(Avatar, Object.assign({ size: "large" }, avatarProps)),
-            progress < 1 && (React.createElement(Overlay, null,
-                React.createElement(Centered, null,
-                    React.createElement(ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
-        React.createElement(InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
-        avatarProps.imageUrl != undefined && progress === 1 && (React.createElement(Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
+    return (React__default.createElement("div", { className: styles.inputAvatar },
+        React__default.createElement("div", { className: styles.preview },
+            React__default.createElement(Avatar, Object.assign({ size: "large" }, avatarProps)),
+            progress < 1 && (React__default.createElement(Overlay, null,
+                React__default.createElement(Centered, null,
+                    React__default.createElement(ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
+        React__default.createElement(InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
+        avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);
         handleUpload(newFile);
@@ -38,11 +38,11 @@ function InputAvatar(_a) {
     }
 }
 function Overlay({ children }) {
-    return React.createElement("div", { className: styles.overlay }, children);
+    return React__default.createElement("div", { className: styles.overlay }, children);
 }
 function Centered({ children }) {
     // Note: this HIGHLY experimental Centered component is applying margin.
-    return React.createElement("div", { className: styles.centered }, children);
+    return React__default.createElement("div", { className: styles.centered }, children);
 }
 
 export { InputAvatar as I };

package/dist/InputDate/index.cjs

@@ -3,11 +3,11 @@
 var React = require('react');
 var omit = require('../omit-cjs.js');
 var FormField = require('../FormField-cjs.js');
+require('classnames');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
 var DatePicker = require('../DatePicker-cjs.js');
 var InputText_index = require('../InputText/index.cjs');

package/dist/InputDate/index.mjs

@@ -1,11 +1,11 @@
-import React, { useRef, useState, useEffect, forwardRef } from 'react';
+import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
 import { o as omit } from '../omit-es.js';
 import { k as FormField } from '../FormField-es.js';
+import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
 import { D as DatePicker } from '../DatePicker-es.js';
 import { InputText } from '../InputText/index.mjs';
@@ -36,7 +36,7 @@ import '../useSafeLayoutEffect-es.js';
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = useRef(null);
-    return (React.createElement(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 => {
+    return (React__default.createElement(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 = omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = useState(false);
@@ -56,8 +56,8 @@ function InputDate$1(inputProps) {
             const showEmptyValueLabel = !value && !isFocused;
             return (
             // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
-            React.createElement("div", { onClick: onClick },
-                React.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
+            React__default.createElement("div", { onClick: onClick },
+                React__default.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                         onChange && onChange(event);
                     }, onBlur: () => {
                         inputProps.onBlur && inputProps.onBlur();
@@ -104,7 +104,7 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
 
 const InputDateRebuilt = forwardRef(function InputDateInternal(props, inputRefs) {
     const { onChange } = props;
-    return (React.createElement(DatePicker, { selected: props.value, onChange: newValue => {
+    return (React__default.createElement(DatePicker, { selected: props.value, onChange: newValue => {
             onChange(newValue);
         }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator }));
     function InputDateActivator(activatorProps) {
@@ -133,8 +133,8 @@ const InputDateRebuilt = forwardRef(function InputDateInternal(props, inputRefs)
         const showEmptyValueLabel = !value && !isFocused;
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
-        React.createElement("div", { onClick: onClick },
-            React.createElement(InputText, Object.assign({}, newActivatorProps, props, { version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: inputRefs, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+        React__default.createElement("div", { onClick: onClick },
+            React__default.createElement(InputText, Object.assign({}, newActivatorProps, props, { version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: inputRefs, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
@@ -149,10 +149,10 @@ function isNewInputDateProps(props) {
 }
 const InputDate = forwardRef(function InputDateShim(props, ref) {
     if (isNewInputDateProps(props)) {
-        return React.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
+        return React__default.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
     }
     else {
-        return React.createElement(InputDate$1, Object.assign({}, props));
+        return React__default.createElement(InputDate$1, Object.assign({}, props));
     }
 });
 

package/dist/InputEmail-cjs.js

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 const validationMessage = "Please enter a valid email";

package/dist/InputEmail-es.js

@@ -1,16 +1,16 @@
-import React from 'react';
+import React__default from 'react';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 const validationMessage = "Please enter a valid email";
 function InputEmail(props) {
     const { validations } = props;
-    return (React.createElement(FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
+    return (React__default.createElement(FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
     function checkForValidEmail(value) {
         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) {

package/dist/InputFile-es.js

@@ -1,5 +1,5 @@
 import { a as __awaiter, b as __generator, c as __spread, _ as __rest } from './tslib.es6-es.js';
-import React, { forwardRef, useImperativeHandle, Fragment, useMemo, useRef, useReducer, useEffect, useCallback, createContext, useContext } from 'react';
+import React__default, { forwardRef, useImperativeHandle, Fragment, useMemo, useRef, useReducer, useEffect, useCallback, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { P as PropTypes } from './index-es.js';
 import axios from 'axios';
@@ -604,7 +604,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
-  return /*#__PURE__*/React.createElement(Fragment, null, children(_objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/React__default.createElement(Fragment, null, children(_objectSpread(_objectSpread({}, props), {}, {
     open: open
   })));
 });
@@ -1501,7 +1501,7 @@ function getDefaultHintText(fileType, multiple) {
 function InputFileHintText(_a) {
     var { size = "small", children } = _a, textProps = __rest(_a, ["size", "children"]);
     const { hintText } = useInputFileContentContext();
-    return (React.createElement(Text, Object.assign({}, textProps, { size: size }), children || hintText));
+    return (React__default.createElement(Text, Object.assign({}, textProps, { size: size }), children || hintText));
 }
 
 function InputFileDescription(_a) {
@@ -1510,24 +1510,24 @@ function InputFileDescription(_a) {
     if (!children && !description) {
         return null;
     }
-    return (React.createElement(Text, Object.assign({ size: size, variation: variation }, textProps), children || description));
+    return (React__default.createElement(Text, Object.assign({ size: size, variation: variation }, textProps), children || description));
 }
 
 function InputFileButton(_a) {
     var { label, size, fullWidth = false } = _a, buttonProps = __rest(_a, ["label", "size", "fullWidth"]);
     const { buttonLabel: contextLabel, size: contextSize } = useInputFileContentContext();
-    return (React.createElement(Button, Object.assign({}, buttonProps, { label: label || contextLabel, size: size !== null && size !== void 0 ? size : contextSize, type: "secondary", fullWidth: fullWidth })));
+    return (React__default.createElement(Button, Object.assign({}, buttonProps, { label: label || contextLabel, size: size !== null && size !== void 0 ? size : contextSize, type: "secondary", fullWidth: fullWidth })));
 }
 
 function InputFileDropzoneWrapper({ children, }) {
-    return React.createElement("div", { className: styles.dropzoneContent }, children);
+    return React__default.createElement("div", { className: styles.dropzoneContent }, children);
 }
 
 function InputFileValidationErrors({ validationErrors, }) {
     if (validationErrors.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: styles.validationErrors }, validationErrors.map(error => (React.createElement(InputValidation, { message: error.message, key: error.code })))));
+    return (React__default.createElement("div", { className: styles.validationErrors }, validationErrors.map(error => (React__default.createElement(InputValidation, { message: error.message, key: error.code })))));
 }
 
 /* eslint-disable max-statements */
@@ -1618,19 +1618,19 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
         buttonLabel: providedButtonLabel || "",
         size,
     };
-    const defaultContent = (React.createElement(React.Fragment, null,
-        variation === "dropzone" && (React.createElement(InputFile.DropzoneWrapper, null,
-            React.createElement(Content, { spacing: "small" },
-                React.createElement(InputFile.Button, { size: "small", fullWidth: false }),
-                size === "base" && (React.createElement(React.Fragment, null,
-                    React.createElement(InputFile.HintText, null),
-                    React.createElement(InputFile.Description, null)))))),
-        variation === "button" && React.createElement(InputFile.Button, { fullWidth: true })));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
-            React.createElement("input", Object.assign({}, getInputProps(), { "data-testid": "input-file-input" })),
-            React.createElement(InputFileContentContext.Provider, { value: contentContext }, children || defaultContent)),
-        React.createElement(InputFileValidationErrors, { validationErrors: validationErrors })));
+    const defaultContent = (React__default.createElement(React__default.Fragment, null,
+        variation === "dropzone" && (React__default.createElement(InputFile.DropzoneWrapper, null,
+            React__default.createElement(Content, { spacing: "small" },
+                React__default.createElement(InputFile.Button, { size: "small", fullWidth: false }),
+                size === "base" && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(InputFile.HintText, null),
+                    React__default.createElement(InputFile.Description, null)))))),
+        variation === "button" && React__default.createElement(InputFile.Button, { fullWidth: true })));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
+            React__default.createElement("input", Object.assign({}, getInputProps(), { "data-testid": "input-file-input" })),
+            React__default.createElement(InputFileContentContext.Provider, { value: contentContext }, children || defaultContent)),
+        React__default.createElement(InputFileValidationErrors, { validationErrors: validationErrors })));
     function handleDrop(acceptedFiles) {
         acceptedFiles.forEach(file => {
             uploadFile(file);

package/dist/InputGroup-es.js

@@ -1,16 +1,16 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 
 var styles = {"vertical":"RwhScbXCXw0-","horizontal":"xxMbKnv30VQ-","inputGroup":"l87dJm2JnlA-","spinning":"XZBCtuO467Y-"};
 
 function InputGroup({ children, flowDirection = "vertical", }) {
     if (isInvalidGroupNesting(children))
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     const className = classnames(styles.inputGroup, styles[flowDirection]);
-    return React.createElement("div", { className: className }, children);
+    return React__default.createElement("div", { className: className }, children);
 }
 function isInvalidGroupNesting(childs) {
-    return React.Children.toArray(childs).some(child => {
+    return React__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/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);