@jobber/components 4.67.2-JOB-84261.6 → 4.67.2-pre.25

package/dist/FormatFile-317b158a.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var getHumanReadableFileSize = require('filesize');
+var Button = require('./Button-8bde6560.js');
+var ConfirmationModal = require('./ConfirmationModal-f6c0afc7.js');
+var Glimmer = require('./Glimmer-f5c31401.js');
+var Icon = require('./Icon-361343e0.js');
+var Typography = require('./Typography-75f58b60.js');
+var Text = require('./Text-9f261dde.js');
+var ProgressBar = require('./ProgressBar-5c577dc0.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var getHumanReadableFileSize__default = /*#__PURE__*/_interopDefaultLegacy(getHumanReadableFileSize);
+
+var styles$2 = {"expanded":"cx4iQqlNNvc-","compact":"nSaog7-7Jn0-","wrapper":"_9jVt97W52JY-","large":"z-kUGMs0Yfg-","base":"x1Ql0enaIxY-","thumbnail":"il9-MCeoBts-","clickable":"O9EG-xJYVco-","hoverable":"QmrRp5CTpGU-","progress":"N5qVYfi1Pgo-","contentBlock":"TyXXZnJuVwo-","deleteButton":"_7wDO6nPXy-g-","deleteable":"sgUJuNv0rUE-"};
+
+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: () => 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 styles$1 = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
+
+var styles = {"image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
+
+function InternalThumbnailImage({ file }) {
+    const { name, src } = file;
+    const [imageSource, setImageSource] = React.useState();
+    const [imageLoaded, setImageLoaded] = React.useState(false);
+    React.useEffect(() => {
+        if (!imageSource) {
+            src().then(url => setImageSource(url));
+        }
+    }, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        !imageLoaded && React__default["default"].createElement(Glimmer.Glimmer, { size: "auto" }),
+        React__default["default"].createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames__default["default"](styles.image, { [styles.hidden]: !imageLoaded }) })));
+    function handleImageLoad() {
+        setImageLoaded(true);
+    }
+}
+
+function InternalThumbnail({ compact = false, size, file, }) {
+    const { name, type } = file;
+    const iconName = getIconNameFromType(type);
+    const hasName = Boolean(name) && compact;
+    if (type.startsWith("image/")) {
+        return React__default["default"].createElement(InternalThumbnailImage, { file: file });
+    }
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.content, styles$1[size], {
+            [styles$1.hasName]: hasName,
+        }) },
+        React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React__default["default"].createElement("div", { className: styles$1.fileName },
+            React__default["default"].createElement(Typography.Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
+}
+function getIconNameFromType(mimeType) {
+    if (mimeType.startsWith("image/"))
+        return "camera";
+    if (mimeType.startsWith("video/"))
+        return "video";
+    switch (mimeType) {
+        case "application/pdf":
+            return "pdf";
+        case "application/vnd.ms-excel":
+            return "excel";
+        default:
+            return "file";
+    }
+}
+
+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$2[display], {
+        [styles$2[displaySize]]: display === "compact",
+    });
+    const DetailsContainer = isComplete && onClick ? "button" : "div";
+    const detailsClassNames = classnames__default["default"](styles$2.wrapper, {
+        [styles$2[displaySize]]: display === "compact",
+        [styles$2.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
+        [styles$2.clickable]: onClick,
+        [styles$2.deleteable]: display === "compact",
+    });
+    const thumbnailContainerClassNames = classnames__default["default"](styles$2.thumbnail, styles$2[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 },
+                React__default["default"].createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
+                !isComplete && (React__default["default"].createElement("div", { className: styles$2.progress },
+                    React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React__default["default"].createElement("div", { className: styles$2.contentBlock },
+                React__default["default"].createElement(Text.Text, { size: "base" }, file.name),
+                React__default["default"].createElement(Text.Text, { size: "small" }, fileSize)))),
+        isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$2.deleteButton },
+            React__default["default"].createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
+}
+function isHoverable({ display, isComplete, onClick, onDelete, }) {
+    if (display === "compact") {
+        return Boolean(isComplete && (onClick || onDelete));
+    }
+    else if (display === "expanded") {
+        return Boolean(isComplete && onClick);
+    }
+    return false;
+}
+
+exports.FormatFile = FormatFile;

package/dist/FormatTime/FormatTime.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CivilTime } from "@std-proposal/temporal";
 interface FormatTimeProps {
     /**
@@ -12,5 +11,5 @@ interface FormatTimeProps {
      */
     readonly use24HourClock?: boolean;
 }
-export declare function FormatTime({ time: inputTime, use24HourClock, }: FormatTimeProps): JSX.Element;
+export declare const FormatTime: (props: FormatTimeProps) => JSX.Element;
 export {};

package/dist/FormatTime/index.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var ClientOnly = require('../ClientOnly-4f3e136d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FormatTime({ time: inputTime, use24HourClock, }) {
+function FormatTimeInternal({ time: inputTime, use24HourClock, }) {
     let dateObject;
     if (inputTime instanceof Date) {
         dateObject = inputTime;
@@ -25,12 +26,16 @@ function FormatTime({ time: inputTime, use24HourClock, }) {
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null, formatCivilTime(dateObject, use24HourClock));
 }
+const FormatTime = (props) => (React__default["default"].createElement(ClientOnly.ClientOnly, null,
+    React__default["default"].createElement(FormatTimeInternal, Object.assign({}, props))));
 function formatCivilTime(date, use24HourClock) {
-    return date.toLocaleTimeString(navigator.language, {
-        hourCycle: use24HourClock ? "h23" : "h12",
-        minute: "2-digit",
-        hour: "numeric",
-    });
+    return typeof navigator !== "undefined"
+        ? date.toLocaleTimeString(navigator.language, {
+            hourCycle: use24HourClock ? "h23" : "h12",
+            minute: "2-digit",
+            hour: "numeric",
+        })
+        : "";
 }
 
 exports.FormatTime = FormatTime;

package/dist/Gallery/index.js

@@ -4,32 +4,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var LightBox = require('../LightBox-3f4dbc33.js');
-var FormatFile = require('../FormatFile-3b650d02.js');
-var Button = require('../Button-163a0641.js');
+var LightBox = require('../LightBox-d5aea313.js');
+var FormatFile = require('../FormatFile-317b158a.js');
+var Button = require('../Button-8bde6560.js');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
-require('../ButtonDismiss-2b98d075.js');
+require('../ClientOnly-4f3e136d.js');
+require('../ButtonDismiss-af17d76d.js');
 require('filesize');
-require('../ConfirmationModal-0f85d96c.js');
-require('../Modal-70daa0e2.js');
-require('../Heading-0f4ecb0c.js');
-require('../Typography-973b122e.js');
-require('../Content-2ca1ffe1.js');
-require('../Markdown-96070121.js');
-require('react-markdown');
-require('../Text-4a2bc89f.js');
-require('../Emphasis-b2d1b3aa.js');
-require('../Glimmer-cfa92a88.js');
-require('../tslib.es6-5b8768b7.js');
-require('../Icon-405a216c.js');
+require('../ConfirmationModal-f6c0afc7.js');
+require('../Modal-357fd1df.js');
+require('../Heading-f066883a.js');
+require('../Typography-75f58b60.js');
+require('../Content-80486307.js');
+require('../Markdown-10fc9d3e.js');
+require('../tslib.es6-a575af05.js');
+require('markdown-to-jsx');
+require('../Text-9f261dde.js');
+require('../Emphasis-7a2893bb.js');
+require('../Glimmer-f5c31401.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../ProgressBar-b68edc8f.js');
+require('../ProgressBar-5c577dc0.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -37,9 +37,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z = ".G3D4T8IYmwA-,\n._6sZaxiji5rQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n._6sZaxiji5rQ- {\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n}\n\n.wh-FkS64oJ0- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.Idp-BJIbUUs- {\n  width: 56px;\n  height: 56px;\n}\n\n.kOG-STgt5Hs- {\n  width: 168px;\n  height: 168px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n}\n";
 var styles = {"gallery":"G3D4T8IYmwA-","galleryLarge":"_6sZaxiji5rQ-","showMoreButton":"wh-FkS64oJ0-","baseShowMoreButton":"Idp-BJIbUUs-","largeShowMoreButton":"kOG-STgt5Hs-"};
-styleInject_es.styleInject(css_248z);
 
 function Gallery({ files, size = "base", max, onDelete }) {
     const { images, filesToImageIndex } = generateImagesArray(files);

package/dist/Glimmer/index.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Glimmer = require('../Glimmer-cfa92a88.js');
-require('../tslib.es6-5b8768b7.js');
+var Glimmer = require('../Glimmer-f5c31401.js');
+require('../tslib.es6-a575af05.js');
 require('react');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Content-2ca1ffe1.js');
+require('../Content-80486307.js');
 
 
 

package/dist/Glimmer-f5c31401.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-a575af05.js');
+var React = require('react');
+var classnames = require('classnames');
+var Content = require('./Content-80486307.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var styles = {"glimmer":"FXzzrJAf890-","reverseTheme":"s9bG0yRJR3A-","header":"M0X0dxjIyv4-","button":"v2Q1amzd7Ac-","buttonFill":"_8va--lBgr38-"};
+
+var sizes = {"small":"siUUG4rZNSk-","base":"nFuBXyrhG2Q-","large":"oiVEoAqI-fU-","larger":"Tkmo6mSMI9Y-","largest":"uVeaD3IhD6o-","auto":"_6Wak9NLJ3VQ-"};
+
+var shapes = {"rectangle":"enoWbteryXg-","rectangleShort":"_9qkwCdedX1M-","rectangleShorter":"XtyJxvcJDFs-","square":"_8unQ0TS1He4-","circle":"ameRMYEKfss-"};
+
+var timings = {"base":"hO0mZ6TeVko-","fast":"WXi5-zF8Ll4-"};
+
+const GLIMMER_TEST_ID = "ATL-Glimmer";
+const GLIMMER_HEADER_TEST_ID = "ATL-GlimmerHeader";
+const GLIMMER_TEXT_TEST_ID = "ATL-GlimmerText";
+const GLIMMER_BUTTON_TEST_ID = "ATL-GlimmerButton";
+/**
+ * **Experimental component! Use at your own risk.**
+ *
+ * Foundational component used to build loading states such as Skeleton UI
+ *
+ * @experimental
+ */
+function Glimmer({ size = "base", shape = "rectangle", timing = "base", reverseTheme = false, width, }) {
+    const className = classnames__default["default"](styles.glimmer, sizes[size], shapes[shape], timings[timing], { [styles.reverseTheme]: reverseTheme });
+    return (React__default["default"].createElement("div", { "aria-busy": "true", className: className, "data-testid": GLIMMER_TEST_ID, style: { width } }));
+}
+Glimmer.Header = function GlimmerHeader(_a) {
+    var { level = 3 } = _a, props = tslib_es6.__rest(_a, ["level"]);
+    const headerSize = {
+        1: "largest",
+        2: "larger",
+        3: "large",
+        4: "base",
+        5: "small",
+    };
+    return (React__default["default"].createElement("div", { className: styles.header, "data-testid": GLIMMER_HEADER_TEST_ID },
+        React__default["default"].createElement(Glimmer, Object.assign({ size: headerSize[level] }, props))));
+};
+Glimmer.Text = function GlimmerText(_a) {
+    var { width, lines = 3 } = _a, props = tslib_es6.__rest(_a, ["width", "lines"]);
+    const children = [
+        React__default["default"].createElement(Glimmer, Object.assign({ key: "1", size: "small", shape: "rectangleShort" }, props)),
+        React__default["default"].createElement(Glimmer, Object.assign({ key: "2", size: "small" }, props)),
+        React__default["default"].createElement(Glimmer, Object.assign({ key: "3", size: "small", shape: "rectangleShorter" }, props)),
+    ].slice(0, lines);
+    return (React__default["default"].createElement("div", { style: { width }, "data-testid": GLIMMER_TEXT_TEST_ID },
+        React__default["default"].createElement(Content.Content, { spacing: "small" }, children)));
+};
+Glimmer.Button = function GlimmerButton(_a) {
+    var { fullWidth = false } = _a, props = tslib_es6.__rest(_a, ["fullWidth"]);
+    const buttonClassNames = classnames__default["default"](styles.button, {
+        [styles.buttonFill]: fullWidth,
+    });
+    return (React__default["default"].createElement("div", { className: buttonClassNames, "data-testid": GLIMMER_BUTTON_TEST_ID },
+        React__default["default"].createElement(Glimmer, Object.assign({}, props, { size: "auto" }))));
+};
+
+exports.GLIMMER_TEST_ID = GLIMMER_TEST_ID;
+exports.Glimmer = Glimmer;

package/dist/Grid/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var useAssert = require('@jobber/hooks/useAssert');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,9 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$2 = ".YJHtDDKq6WI- {\n  grid-column: initial;\n  grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width: 490px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (--small-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (min-width: 768px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (--medium-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (min-width: 1080px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (--large-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (min-width: 1440px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }@media (--extra-large-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }\n";
 var styles$1 = {"gridCell":"YJHtDDKq6WI-"};
-styleInject_es.styleInject(css_248z$2);
 
 /**
  * Breakpoints that we support
@@ -45,13 +42,9 @@ function getSizeCSSVariables(size) {
     };
 }
 
-var css_248z$1 = ".NqFGJV-UF3Q- {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.IZLiiSquUTM- {\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n}\n\n@media (min-width: 768px) {\n  .IZLiiSquUTM- {\n    gap: calc(16px * 1.5);\n    gap: var(--space-large);\n  }\n}\n\n@media (--medium-screens-and-up) {\n  .IZLiiSquUTM- {\n    gap: calc(16px * 1.5);\n    gap: var(--space-large);\n  }\n}\n";
 var styles = {"grid":"NqFGJV-UF3Q-","gap":"IZLiiSquUTM-"};
-styleInject_es.styleInject(css_248z$1);
 
-var css_248z = "._8XlrWg3FV-Q- {\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.uKzqJPlYxJs- {\n  -ms-flex-align: start;\n      align-items: start;\n}\n\n.CSBjeFlj2xQ- {\n  -ms-flex-align: end;\n      align-items: end;\n}\n\n.BYyFdzONXyk- {\n  -ms-flex-align: stretch;\n      align-items: stretch;\n}\n";
 var alignments = {"center":"_8XlrWg3FV-Q-","start":"uKzqJPlYxJs-","end":"CSBjeFlj2xQ-","stretch":"BYyFdzONXyk-"};
-styleInject_es.styleInject(css_248z);
 
 // Only need the component to pass in the data as a react children
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/dist/Heading/index.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Heading = require('../Heading-0f4ecb0c.js');
+var Heading = require('../Heading-f066883a.js');
 require('react');
-require('../Typography-973b122e.js');
+require('../Typography-75f58b60.js');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
 
 
 

package/dist/{Heading-0f4ecb0c.js → Heading-f066883a.js}

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

package/dist/Icon/index.js

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

package/dist/InlineLabel/index.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InlineLabel = require('../InlineLabel-9a517c19.js');
+var InlineLabel = require('../InlineLabel-4c2fec47.js');
 require('react');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-973b122e.js');
+require('../Typography-75f58b60.js');
 
 
 

package/dist/InlineLabel-4c2fec47.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Typography = require('./Typography-75f58b60.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
+
+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",
+    };
+    return (React__default["default"].createElement("span", { className: className },
+        React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
+}
+
+exports.InlineLabel = InlineLabel;

package/dist/InputAvatar/index.js

@@ -2,31 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-a575af05.js');
 var React = require('react');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Avatar = require('../Avatar-76a799fa.js');
-var InputFile = require('../InputFile-540c1657.js');
-var ProgressBar = require('../ProgressBar-b68edc8f.js');
-var Button = require('../Button-163a0641.js');
+var Avatar = require('../Avatar-765d6e45.js');
+var InputFile = require('../InputFile-5c44f0b4.js');
+var ProgressBar = require('../ProgressBar-5c577dc0.js');
+var Button = require('../Button-8bde6560.js');
 require('classnames');
 require('color');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
 require('react-dropzone');
 require('axios');
-require('uuid');
-require('../Content-2ca1ffe1.js');
-require('../Typography-973b122e.js');
+require('../Content-80486307.js');
+require('../Typography-75f58b60.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css_248z = ".a2KrLEZNB04- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.a2KrLEZNB04- > *:not(:last-child) {\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n._7-uM-6dFidA- {\n  position: relative;\n}\n\n._4tvG9ksH3oM- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 100%;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ah2Ak5EObRo- {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.ah2Ak5EObRo-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(1, 27, 37);\n  background-color: var(--color-blue--dark);\n  opacity: 0.3;\n  mix-blend-mode: multiply;\n}\n";
 var styles = {"inputAvatar":"a2KrLEZNB04-","preview":"_7-uM-6dFidA-","centered":"_4tvG9ksH3oM-","overlay":"ah2Ak5EObRo-"};
-styleInject_es.styleInject(css_248z);
 
 function InputAvatar(_a) {
     var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = tslib_es6.__rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);

package/dist/InputDate/InputDate.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
-interface InputDateProps extends CommonFormFieldProps, Pick<FormFieldProps, "readonly" | "disabled" | "onEnter" | "onFocus" | "inputRef" | "validations" | "placeholder" | "onChange" | "onBlur"> {
+interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">, Pick<FormFieldProps, "readonly" | "disabled" | "onEnter" | "onFocus" | "inputRef" | "validations" | "placeholder" | "onChange" | "onBlur"> {
     /**
      * A Date object value
      * (e.g., `new Date("11/11/2011")`)

package/dist/InputDate/index.js

@@ -4,22 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-dfc061ca.js');
-var DatePicker = require('../DatePicker-c18f1739.js');
-require('../tslib.es6-5b8768b7.js');
-require('uuid');
+var FormField = require('../FormField-18eda132.js');
+var DatePicker = require('../DatePicker-9399cc69.js');
+require('../tslib.es6-a575af05.js');
 require('react-hook-form');
-require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-163a0641.js');
+require('@jobber/hooks/useShowClear');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
-require('../Text-4a2bc89f.js');
-require('../InputValidation-179f0926.js');
+require('../Typography-75f58b60.js');
+require('../Text-9f261dde.js');
+require('../InputValidation-fdc891af.js');
 require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
+require('../Spinner-cac356ee.js');
 require('react-datepicker');
 require('@jobber/hooks/useRefocusOnActivator');
 

package/dist/InputEmail/index.js

@@ -3,21 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-dfc061ca.js');
-require('../tslib.es6-5b8768b7.js');
-require('uuid');
+var FormField = require('../FormField-18eda132.js');
+require('../tslib.es6-a575af05.js');
 require('react-hook-form');
-require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-163a0641.js');
+require('@jobber/hooks/useShowClear');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
-require('../Text-4a2bc89f.js');
-require('../InputValidation-179f0926.js');
+require('../Typography-75f58b60.js');
+require('../Text-9f261dde.js');
+require('../InputValidation-fdc891af.js');
 require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
+require('../Spinner-cac356ee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputFile/InputFile.d.ts

@@ -67,6 +67,10 @@ interface InputFileProps {
      * @default "dropzone"
      */
     readonly variation?: "dropzone" | "button";
+    /**
+     * Name of the InputFile
+     */
+    readonly name?: string;
     /**
      * Size of the InputFile
      * @default "base"
@@ -113,7 +117,7 @@ interface InputFileProps {
      */
     onUploadComplete?(file: FileUpload): void;
 }
-export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }: InputFileProps): JSX.Element;
+export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, getUploadParams, name, onUploadStart, onUploadProgress, onUploadComplete, }: InputFileProps): JSX.Element;
 /**
  * Upsert a given `FileUpload` into an array of `FileUpload`s.
  * `key` is used to uniquely identify files.

package/dist/InputFile/index.js

@@ -2,20 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-540c1657.js');
-require('../tslib.es6-5b8768b7.js');
+var InputFile = require('../InputFile-5c44f0b4.js');
+require('../tslib.es6-a575af05.js');
 require('react');
 require('classnames');
 require('react-dropzone');
 require('axios');
-require('uuid');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Button-163a0641.js');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
-require('../Content-2ca1ffe1.js');
+require('../Typography-75f58b60.js');
+require('../Content-80486307.js');