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

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/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');
 
 
 

package/dist/{InputFile-540c1657.js → InputFile-5c44f0b4.js}

@@ -1,15 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-a575af05.js');
 var React = require('react');
 var classnames = require('classnames');
 var reactDropzone = require('react-dropzone');
 var axios = require('axios');
-var uuid = require('uuid');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Button = require('./Button-163a0641.js');
-var Content = require('./Content-2ca1ffe1.js');
-var Typography = require('./Typography-973b122e.js');
+var Button = require('./Button-8bde6560.js');
+var Content = require('./Content-80486307.js');
+var Typography = require('./Typography-75f58b60.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,11 +15,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
-var css_248z = ".grljXfTWj84- {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.WHhHWgaoXk4- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border: rgb(217, 223, 225) dashed calc(16px / 8);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n";
 var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-"};
-styleInject_es.styleInject(css_248z);
 
-function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }) {
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, name, onUploadStart, onUploadProgress, onUploadComplete, }) {
+    const id = React.useId();
     const options = {
         multiple: allowMultiple,
         onDrop: React.useCallback(handleDrop, []),
@@ -39,7 +36,7 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
         [styles.active]: isDragActive,
     });
     return (React__default["default"].createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
-        React__default["default"].createElement("input", Object.assign({}, getInputProps())),
+        React__default["default"].createElement("input", Object.assign({ name: name }, getInputProps())),
         variation === "dropzone" && (React__default["default"].createElement(Content.Content, { spacing: "small" },
             React__default["default"].createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
             size === "base" && (React__default["default"].createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
@@ -51,7 +48,7 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     }
     function uploadFile(file) {
         return tslib_es6.__awaiter(this, void 0, void 0, function* () {
-            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST", } = yield getUploadParams(file);
+            const { url, key = id, fields = {}, httpMethod = "POST", } = yield getUploadParams(file);
             const fileUpload = getFileUpload(file, key, url);
             onUploadStart && onUploadStart(Object.assign({}, fileUpload));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/InputGroup/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputGroup = require('../InputGroup-8d4fd4eb.js');
+var InputGroup = require('../InputGroup-88bec8c9.js');
 require('react');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
 
 
 

package/dist/InputGroup-88bec8c9.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+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 = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-"};
+
+function InputGroup({ children, flowDirection = "vertical", }) {
+    if (isInvalidGroupNesting(children))
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    const className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
+    return React__default["default"].createElement("div", { className: className }, children);
+}
+function isInvalidGroupNesting(childs) {
+    return React__default["default"].Children.toArray(childs).some(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`);
+            return true;
+        }
+        return false;
+    });
+}
+
+exports.InputGroup = InputGroup;

package/dist/{InputNumber-ef949161.js → InputNumber-ed655bae.js}

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

package/dist/InputText/useSafeLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const useSafeLayoutEffect: typeof React.useLayoutEffect;

package/dist/{InputText-9e159467.js → InputText-c68964ff.js}

@@ -1,7 +1,8 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-181efe29.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-b63708b1.js');
+var FormField = require('./FormField-18eda132.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,7 +35,7 @@ function InputTextInternal(props, ref) {
             }
         },
     }));
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
             resize(inputRef.current);
         }

package/dist/InputTime/InputTime.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { InputTimeProps } from "./InputTimeProps";
-export declare function InputTime({ defaultValue, value, onChange, ...params }: InputTimeProps): JSX.Element;
+declare function InputTimeSafe(props: InputTimeProps): JSX.Element;
+export declare const InputTime: typeof InputTimeSafe | (() => null);
+export {};

package/dist/InputTime/InputTime.disabledTest.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/InputTime/InternalInputTime.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { InputTimeProps } from "./InputTimeProps";
+export declare function InternalInputTime({ defaultValue, value, onChange, ...params }: InputTimeProps): JSX.Element;

package/dist/InputTime/SupportsTimePolyfill.d.ts

@@ -0,0 +1,2 @@
+import supportsTime from "time-input-polyfill/supportsTime";
+export { supportsTime };

package/dist/InputTime/TimeInputPolyfill.client.d.ts

@@ -0,0 +1,2 @@
+import TimePolyfill from "time-input-polyfill";
+export { TimePolyfill };

package/dist/InputValidation/index.js

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputValidation = require('../InputValidation-179f0926.js');
+var InputValidation = require('../InputValidation-fdc891af.js');
 require('react');
 require('framer-motion');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Text-4a2bc89f.js');
-require('../Typography-973b122e.js');
+require('../Text-9f261dde.js');
+require('../Typography-75f58b60.js');
 require('classnames');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
 
 

package/dist/{InputValidation-179f0926.js → InputValidation-fdc891af.js}

@@ -2,17 +2,14 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Text = require('./Text-4a2bc89f.js');
-var Icon = require('./Icon-405a216c.js');
+var Text = require('./Text-9f261dde.js');
+var Icon = require('./Icon-361343e0.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css_248z = ".sc-bFJieXBA- {\n  margin-top: calc(16px / 4);\n  margin-top: var(--space-smaller);\n}\n\n.xybhC5Y6mk4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  padding-left: 0;\n}\n\n.xybhC5Y6mk4- > svg {\n  margin-right: calc(16px / 4);\n  margin-right: var(--space-smaller);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n.xybhC5Y6mk4-:focus {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n";
 var styles = {"hasValidationMessage":"sc-bFJieXBA-","message":"xybhC5Y6mk4-"};
-styleInject_es.styleInject(css_248z);
 
 function InputValidation({ message }) {
     const messages = [message];

package/dist/LightBox/ClientOnly.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function useHydrated(): boolean;
+export declare function ClientOnly({ children, fallback, }: {
+    readonly children: React.ReactNode;
+    readonly fallback?: React.ReactNode;
+}): JSX.Element;

package/dist/LightBox/LightBox.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 interface PresentedImage {
     title?: string;
     caption?: string;
@@ -33,5 +33,5 @@ interface LightBoxProps {
      */
     onRequestClose(options: RequestCloseOptions): void;
 }
-export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): React.ReactPortal;
+export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): JSX.Element;
 export {};

package/dist/LightBox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-3f4dbc33.js');
+var LightBox = require('../LightBox-d5aea313.js');
 require('react');
 require('framer-motion');
 require('react-dom');
@@ -10,14 +10,14 @@ require('lodash/debounce');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
-require('../style-inject.es-9d2f5f4e.js');
-require('../ButtonDismiss-2b98d075.js');
-require('../Button-163a0641.js');
+require('../ClientOnly-4f3e136d.js');
+require('../ButtonDismiss-af17d76d.js');
+require('../Button-8bde6560.js');
 require('classnames');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
+require('../Typography-75f58b60.js');