@jobber/components 4.81.5-job-85845.4 → 4.81.5

package/dist/Autocomplete/index.js

@@ -14,11 +14,12 @@ var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-55b6cb65.js');
+var InputText = require('../InputText-6c71361e.js');
 require('../Typography-c45bf216.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('../FormField-6ff183f8.js');
+require('../FormField-b4e6c549.js');
+require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Button-b73a5e01.js');

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-e3144022.js');
+var Card = require('../Card-0a6f3a28.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
@@ -13,7 +13,8 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-083fc4c4.js');
+require('../Menu-5fc613a1.js');
+require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/{Card-e3144022.js → Card-0a6f3a28.js}

@@ -5,14 +5,14 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-1e8e4bd3.js');
 var Button = require('./Button-b73a5e01.js');
-var Menu = require('./Menu-083fc4c4.js');
+var Menu = require('./Menu-5fc613a1.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 css_248z$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n  --card--border: var(--border-base) solid var(--color-border);\n  --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n  display: block;\n  width: 100%;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--card--border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n  outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n  --card--header-background: transparent;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n  --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n  border-top-width: 0;\n}\n\n._5LfUFF9DYsk-::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * (16px / 16));\n  margin: 0 calc(-1 * calc(16px / 16));\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.375rem solid rgb(181, 181, 181);\n  border-top: 0.375rem solid var(--card--accent-color);\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\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\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all 100ms linear;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1);\n  padding: var(--card--base-padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--card--header-background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 1.5);\n  font-size: calc(calc(16px * 1) * 1.5);\n  font-size: var(--typography--fontSize-largest);\n}\n";
+var css_248z$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n  --card--border: var(--border-base) solid var(--color-border);\n  --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n  display: block;\n  width: 100%;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--card--border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n  outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n  --card--header-background: transparent;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n  --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n  border-top-width: 0;\n}\n\n.jobber-retheme ._5LfUFF9DYsk- {\n  border-top-width: 1px;\n}\n\n._5LfUFF9DYsk-::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * (16px / 16));\n  margin: 0 calc(-1 * calc(16px / 16));\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.5rem solid rgb(181, 181, 181);\n  border-top: 0.5rem solid var(--card--accent-color);\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.jobber-retheme ._5LfUFF9DYsk-::before {\n  display: none;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\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\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all 100ms linear;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1);\n  padding: var(--card--base-padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--card--header-background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 1.5);\n  font-size: calc(calc(16px * 1) * 1.5);\n  font-size: var(--typography--fontSize-largest);\n}\n";
 var styles = {"card":"_2wxPdv7kELk-","clickable":"tRfpysqqk8s-","accent":"_5LfUFF9DYsk-","header":"fAPeD1InvAI-"};
 styleInject_es.styleInject(css_248z$1);
 

package/dist/Checkbox/index.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-787e2e47.js');
+var Checkbox = require('../Checkbox-99f6297f.js');
 require('../tslib.es6-754e2961.js');
 require('react');
+require('uuid');
 require('classnames');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Checkbox-787e2e47.js → Checkbox-99f6297f.js}

@@ -2,6 +2,7 @@
 
 var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
+var uuid = require('uuid');
 var classnames = require('classnames');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
@@ -22,7 +23,7 @@ function Checkbox({ checked, defaultChecked, disabled, label, name, value, indet
         ? reactHookForm.useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
             reactHookForm.useForm({ mode: "onTouched" });
-    const [identifier] = React.useState(React.useId());
+    const [identifier] = React.useState(uuid.v1());
     /**
      * Generate a name if one is not supplied, this is the name
      * that will be used for react-hook-form and not neccessarily

package/dist/Chips/index.js

@@ -10,14 +10,15 @@ var Icon = require('../Icon-405a216c.js');
 var Avatar = require('../Avatar-76a799fa.js');
 var Typography = require('../Typography-c45bf216.js');
 var Tooltip = require('../Tooltip-ef3d6ef4.js');
+var uuid = require('uuid');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');
-require('@jobber/design');
 var reactPopper = require('react-popper');
 var Text = require('../Text-259af966.js');
 var Button = require('../Button-b73a5e01.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
+require('@jobber/design');
 require('color');
 require('react-dom');
 require('framer-motion');
@@ -129,7 +130,7 @@ function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestR
     return (React__default["default"].createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
-function InternalChipSingleSelect({ children, selected, name = React.useId(), onChange, onClick, }) {
+function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChange, onClick, }) {
     return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, child => {
         const isSelected = child.props.value === selected;
         return (React__default["default"].createElement("label", null,
@@ -269,9 +270,9 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
         availableChipOptions });
 }
 
+const menuId = uuid.v1();
 // eslint-disable-next-line max-statements
 function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCustomOptionSelect, onOptionSelect, onSearch, }) {
-    const menuId = React.useId();
     const [allOptions, setAllOptions] = React.useState([]);
     const [searchValue, setSearchValue] = React.useState("");
     const [menuOpen, setMenuOpen] = React.useState(false);

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-8d91d825.js');
+var Combobox = require('../Combobox-f977e808.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -11,7 +11,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Text-259af966.js');
 require('../Typography-c45bf216.js');
-require('../Glimmer-84dee1ed.js');
+require('../Glimmer-7c317864.js');
 require('../tslib.es6-754e2961.js');
 require('../Content-e3f7b6fc.js');
 require('../Spinner-9d8fc7ff.js');

package/dist/{Combobox-8d91d825.js → Combobox-f977e808.js}

@@ -6,7 +6,7 @@ var ReactDOM = require('react-dom');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-259af966.js');
-var Glimmer = require('./Glimmer-84dee1ed.js');
+var Glimmer = require('./Glimmer-7c317864.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
 var AnimatedPresence = require('./AnimatedPresence-20a02aaa.js');
 var tslib_es6 = require('./tslib.es6-754e2961.js');

package/dist/DataDump/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-e3144022.js');
+var Card = require('../Card-0a6f3a28.js');
 var Content = require('../Content-e3f7b6fc.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('classnames');
@@ -15,7 +15,8 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-083fc4c4.js');
+require('../Menu-5fc613a1.js');
+require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/DataList/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Text = require('../Text-259af966.js');
-var Glimmer = require('../Glimmer-84dee1ed.js');
+var Glimmer = require('../Glimmer-7c317864.js');
 var noop = require('lodash/noop');
 var design = require('@jobber/design');
 var framerMotion = require('framer-motion');
@@ -23,25 +23,26 @@ var Icon = require('../Icon-405a216c.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
 var Heading = require('../Heading-1e8e4bd3.js');
 var ReactDOM = require('react-dom');
-var Checkbox = require('../Checkbox-787e2e47.js');
+var Checkbox = require('../Checkbox-99f6297f.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
-var Combobox = require('../Combobox-8d91d825.js');
+var Combobox = require('../Combobox-f977e808.js');
 var Chip = require('../Chip-3d1bfddc.js');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-55b6cb65.js');
+var InputText = require('../InputText-6c71361e.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Typography = require('../Typography-c45bf216.js');
 require('../Content-e3f7b6fc.js');
 require('@jobber/hooks/useSafeLayoutEffect');
 require('react-popper');
 require('../getAtlantisConfig-0f3e8af2.js');
+require('uuid');
 require('react-hook-form');
 require('../AnimatedPresence-20a02aaa.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../FormField-6ff183f8.js');
+require('../FormField-b4e6c549.js');
 require('@jobber/hooks/useShowClear');
 require('../InputValidation-05e839fa.js');
 

package/dist/DataTable/index.js

@@ -7,13 +7,14 @@ var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Glimmer = require('../Glimmer-84dee1ed.js');
+var Glimmer = require('../Glimmer-7c317864.js');
 var tslib_es6 = require('../tslib.es6-754e2961.js');
-var Option = require('../Option-3c4d377e.js');
+var Option = require('../Option-8565da71.js');
 var Button = require('../Button-b73a5e01.js');
 var Text = require('../Text-259af966.js');
 require('../Content-e3f7b6fc.js');
-require('../FormField-6ff183f8.js');
+require('../FormField-b4e6c549.js');
+require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Icon-405a216c.js');

package/dist/FormField/index.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-6ff183f8.js');
+var FormField = require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
 require('react');
+require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/{FormField-6ff183f8.js → FormField-b4e6c549.js}

@@ -2,6 +2,7 @@
 
 var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
+var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
@@ -150,8 +151,8 @@ function FormField(props) {
         ? reactHookForm.useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
             reactHookForm.useForm({ mode: "onTouched" });
-    const [identifier] = React.useState(React.useId());
-    const [descriptionIdentifier] = React.useState(`descriptionUUID--${React.useId()}`);
+    const [identifier] = React.useState(uuid.v1());
+    const [descriptionIdentifier] = React.useState(`descriptionUUID--${uuid.v1()}`);
     /**
      * Generate a name if one is not supplied, this is the name
      * that will be used for react-hook-form and not neccessarily

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-f10799f5.js');
+var FormatFile = require('../FormatFile-652edda8.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -27,7 +27,7 @@ require('../Markdown-f7c55304.js');
 require('react-markdown');
 require('../Text-259af966.js');
 require('../Emphasis-bda56d3b.js');
-require('../Glimmer-84dee1ed.js');
+require('../Glimmer-7c317864.js');
 require('../tslib.es6-754e2961.js');
 require('../ProgressBar-b68edc8f.js');
 

package/dist/{FormatFile-f10799f5.js → FormatFile-652edda8.js}

@@ -6,7 +6,7 @@ var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-b73a5e01.js');
 var ConfirmationModal = require('./ConfirmationModal-f1a049fb.js');
-var Glimmer = require('./Glimmer-84dee1ed.js');
+var Glimmer = require('./Glimmer-7c317864.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-c45bf216.js');
 var Text = require('./Text-259af966.js');

package/dist/Gallery/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var LightBox = require('../LightBox-a89d8863.js');
-var FormatFile = require('../FormatFile-f10799f5.js');
+var FormatFile = require('../FormatFile-652edda8.js');
 var Button = require('../Button-b73a5e01.js');
 require('framer-motion');
 require('react-dom');
@@ -26,7 +26,7 @@ require('../Markdown-f7c55304.js');
 require('react-markdown');
 require('../Text-259af966.js');
 require('../Emphasis-bda56d3b.js');
-require('../Glimmer-84dee1ed.js');
+require('../Glimmer-7c317864.js');
 require('../tslib.es6-754e2961.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Glimmer/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Glimmer = require('../Glimmer-84dee1ed.js');
+var Glimmer = require('../Glimmer-7c317864.js');
 require('../tslib.es6-754e2961.js');
 require('react');
 require('classnames');

package/dist/{Glimmer-84dee1ed.js → Glimmer-7c317864.js}

@@ -40,7 +40,7 @@ const GLIMMER_BUTTON_TEST_ID = "ATL-GlimmerButton";
  */
 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", role: "status", className: className, "data-testid": GLIMMER_TEST_ID, style: { width } }));
+    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"]);

package/dist/InputAvatar/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-76a799fa.js');
-var InputFile = require('../InputFile-bb945071.js');
+var InputFile = require('../InputFile-c9eeb04b.js');
 var ProgressBar = require('../ProgressBar-b68edc8f.js');
 var Button = require('../Button-b73a5e01.js');
 require('classnames');
@@ -15,6 +15,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('react-dropzone');
 require('axios');
+require('uuid');
 require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Text-259af966.js');

package/dist/InputDate/index.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-6ff183f8.js');
+var FormField = require('../FormField-b4e6c549.js');
 var DatePicker = require('../DatePicker-64c5ab1a.js');
 require('../tslib.es6-754e2961.js');
+require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/InputEmail/index.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-6ff183f8.js');
+var FormField = require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
+require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/InputFile/InputFile.d.ts

@@ -39,7 +39,7 @@ export interface UploadParams {
     readonly url: string;
     /**
      * Key to identify file.
-     * If unspecified a generated Id will be used.
+     * If unspecified a `uuid` will be used.
      */
     readonly key?: string;
     /**

package/dist/InputFile/index.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-bb945071.js');
+var InputFile = require('../InputFile-c9eeb04b.js');
 require('../tslib.es6-754e2961.js');
 require('react');
 require('classnames');
 require('react-dropzone');
 require('axios');
+require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
 require('../InputValidation-05e839fa.js');
 require('framer-motion');

package/dist/{InputFile-bb945071.js → InputFile-c9eeb04b.js}

@@ -5,6 +5,7 @@ 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 InputValidation = require('./InputValidation-05e839fa.js');
 var Button = require('./Button-b73a5e01.js');
@@ -71,7 +72,7 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
                 onUploadError && onUploadError(new Error("Failed to get upload params"));
                 return;
             }
-            const { url, key = generateId(), fields = {}, httpMethod = "POST", } = params;
+            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST" } = params;
             const fileUpload = getFileUpload(file, key, url);
             onUploadStart && onUploadStart(Object.assign({}, fileUpload));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -182,9 +183,6 @@ function updateFiles(updatedFile, files) {
     }
     return newFiles;
 }
-function generateId() {
-    return Math.floor(Math.random() * Date.now()).toString(16);
-}
 
 exports.InputFile = InputFile;
 exports.updateFiles = updateFiles;

package/dist/InputNumber/index.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-d451b52e.js');
+var InputNumber = require('../InputNumber-ceae3872.js');
 require('react');
-require('../FormField-6ff183f8.js');
+require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
+require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/{InputNumber-d451b52e.js → InputNumber-ceae3872.js}

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

package/dist/InputPassword/index.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-6ff183f8.js');
+var FormField = require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
+require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/InputPhoneNumber/index.js

@@ -6,7 +6,8 @@ var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-6ff183f8.js');
+var FormField = require('../FormField-b4e6c549.js');
+require('uuid');
 require('classnames');
 require('@jobber/hooks/useShowClear');
 require('../Button-b73a5e01.js');

package/dist/InputText/index.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-55b6cb65.js');
+var InputText = require('../InputText-6c71361e.js');
 require('react');
 require('@jobber/hooks/useSafeLayoutEffect');
-require('../FormField-6ff183f8.js');
+require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
+require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/{InputText-55b6cb65.js → InputText-6c71361e.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
-var FormField = require('./FormField-6ff183f8.js');
+var FormField = require('./FormField-b4e6c549.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputTime/index.js

@@ -6,7 +6,8 @@ var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var temporal = require('@std-proposal/temporal');
 var debounce = require('lodash/debounce');
-var FormField = require('../FormField-6ff183f8.js');
+var FormField = require('../FormField-b4e6c549.js');
+require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/Menu/index.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-083fc4c4.js');
+var Menu = require('../Menu-5fc613a1.js');
 require('react');
+require('uuid');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/{Menu-083fc4c4.js → Menu-5fc613a1.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var uuid = require('uuid');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
@@ -42,8 +43,8 @@ function Menu({ activator, items }) {
         horizontal: "right",
     });
     const wrapperRef = React.createRef();
-    const buttonID = React.useId();
-    const menuID = React.useId();
+    const buttonID = uuid.v1();
+    const menuID = uuid.v1();
     useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
     useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (wrapperRef.current) {

package/dist/MultiSelect/index.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Checkbox = require('../Checkbox-787e2e47.js');
+var Checkbox = require('../Checkbox-99f6297f.js');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 require('../tslib.es6-754e2961.js');
+require('uuid');
 require('react-hook-form');
 require('../Typography-c45bf216.js');
 require('@jobber/design');

package/dist/{Option-3c4d377e.js → Option-8565da71.js}

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

package/dist/Page/index.js

@@ -11,7 +11,7 @@ var Text = require('../Text-259af966.js');
 var Content = require('../Content-e3f7b6fc.js');
 var Markdown = require('../Markdown-f7c55304.js');
 var Button = require('../Button-b73a5e01.js');
-var Menu = require('../Menu-083fc4c4.js');
+var Menu = require('../Menu-5fc613a1.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');
@@ -19,6 +19,7 @@ require('react-markdown');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
+require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/RadioGroup/RadioGroup.d.ts

@@ -19,7 +19,7 @@ interface RadioGroupProps {
      * The name of the radio group, that links the radio options back up
      * to the group.
      *
-     * @default useId()
+     * @default uuid
      */
     readonly name?: string;
 }

package/dist/RadioGroup/index.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../RadioGroup-17b67ade.js');
+var RadioGroup = require('../RadioGroup-ca7a5978.js');
 require('react');
+require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Text-259af966.js');
 require('../Typography-c45bf216.js');

package/dist/{RadioGroup-17b67ade.js → RadioGroup-ca7a5978.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Text = require('./Text-259af966.js');
 
@@ -20,7 +21,7 @@ function RadioOption({ children }) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
 function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
-    const inputId = `${value.toString()}_${React.useId()}`;
+    const inputId = `${value.toString()}_${uuid.v1()}`;
     const shouldRenderIndependentChildren = label && children;
     return (React__default["default"].createElement("div", null,
         React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
@@ -33,7 +34,7 @@ function InternalRadioOption({ value, name, label, description, disabled, checke
     }
 }
 
-function RadioGroup({ children, value, ariaLabel, onChange, name = React.useId(), }) {
+function RadioGroup({ children, value, ariaLabel, onChange, name = uuid.v1(), }) {
     return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, option => (React__default["default"].createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
     function handleChange(newValue) {
         if (newValue !== value) {

package/dist/RecurringSelect/components/DayOfMonthSelect.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { DayOfMonth } from "../types";
 interface DayOfMonthSelectProps {
-    readonly selectedDays: Set<DayOfMonth>;
-    readonly disabled: boolean;
+    selectedDays: Set<DayOfMonth>;
+    disabled: boolean;
     onChange(selectedDays: Set<DayOfMonth>): void;
 }
 export declare function DayOfMonthSelect({ selectedDays, disabled, onChange, }: DayOfMonthSelectProps): JSX.Element;

package/dist/RecurringSelect/components/WeeklySelect.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { WeekDay } from "../types";
 interface WeeklySelectProps {
-    readonly disabled: boolean;
-    readonly selectedDays: Set<WeekDay>;
+    disabled: boolean;
+    selectedDays: Set<WeekDay>;
     onChange(selectedDays: Set<WeekDay>): void;
 }
 export declare function WeeklySelect({ onChange, selectedDays, disabled, }: WeeklySelectProps): JSX.Element;

package/dist/RecurringSelect/index.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var uuid = require('uuid');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var RadioGroup = require('../RadioGroup-17b67ade.js');
+var RadioGroup = require('../RadioGroup-ca7a5978.js');
 var Text = require('../Text-259af966.js');
 require('classnames');
 require('../Typography-c45bf216.js');
-var Option = require('../Option-3c4d377e.js');
-var InputNumber = require('../InputNumber-d451b52e.js');
+var Option = require('../Option-8565da71.js');
+var InputNumber = require('../InputNumber-ceae3872.js');
 var InputGroup = require('../InputGroup-8d4fd4eb.js');
 var Content = require('../Content-e3f7b6fc.js');
-require('../FormField-6ff183f8.js');
+require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
@@ -98,7 +99,7 @@ function WeeklySelect({ onChange, selectedDays, disabled, }) {
     };
     return (React__default["default"].createElement("div", { className: styles$4.container }, weekDays.map(weekDay => {
         const isSelected = selectedDays.has(weekDay);
-        const inputId = React.useId();
+        const inputId = uuid.v1();
         return (React__default["default"].createElement("div", { key: `${weekDay}`, className: checkboxStyles.checkboxWrapper },
             React__default["default"].createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", onChange: onChangeWeekDays, id: `weekly-select-${weekDay}${inputId}`, "aria-checked": isSelected, checked: isSelected, value: weekDay }),
             React__default["default"].createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `weekly-select-${weekDay}${inputId}` }, `${exports.WeekDay[weekDay].substr(0, 1).toUpperCase()}`)));
@@ -143,7 +144,7 @@ const daysInMonth = [...Array.from({ length: 31 }, (_, i) => i + 1), "LAST"];
 function DayOfMonthSelect({ selectedDays, disabled, onChange, }) {
     return (React__default["default"].createElement("div", { className: styles$1.container }, daysInMonth.map(day => {
         const isSelected = selectedDays.has(day);
-        const inputId = React.useId();
+        const inputId = uuid.v1();
         return (React__default["default"].createElement("div", { key: `${day}`, className: checkboxStyles.checkboxWrapper },
             React__default["default"].createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", id: `${day}-${inputId}`, onChange: handleChangeDayOfMonth, "aria-checked": isSelected, checked: isSelected, value: day }),
             React__default["default"].createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `${day}-${inputId}` }, `${day === "LAST" ? "Last day" : day}`)));

package/dist/Select/index.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-3c4d377e.js');
+var Option = require('../Option-8565da71.js');
 require('react');
-require('../FormField-6ff183f8.js');
+require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
+require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.81.5-job-85845.4+f4a2240e",
+  "version": "4.81.5",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.54.0",
-    "@jobber/formatters": "^0.2.2",
+    "@jobber/formatters": "*",
     "@jobber/hooks": "^2.8.3",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -30,6 +30,7 @@
     "@types/react-datepicker": "^4.8.0",
     "@types/react-router": "5.1.7",
     "@types/react-router-dom": "^5.3.3",
+    "@types/uuid": "^8.3.3",
     "axios": "^1.6.0",
     "classnames": "^2.3.2",
     "color": "^3.1.2",
@@ -44,7 +45,8 @@
     "react-popper": "^2.2.5",
     "react-router-dom": "^5.3.4",
     "time-input-polyfill": "^1.0.7",
-    "ts-xor": "^1.0.8"
+    "ts-xor": "^1.0.8",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^1.0.3",
@@ -57,6 +59,7 @@
     "@types/glob": "^7.1.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^8.3.3",
     "autoprefixer": "^9.5.1",
     "copyfiles": "^2.4.1",
     "glob": "^7.1.4",
@@ -69,7 +72,8 @@
     "rollup-plugin-multi-input": "^1.4.1",
     "rollup-plugin-postcss": "^4.0.2",
     "typed-css-modules": "^0.7.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "react": "^18",
@@ -80,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "f4a2240ec037b509ea461eec6de40f6a0c002e15"
+  "gitHead": "cd9f5d82bfc1acfac37d2e0a79f02fb654bd64a0"
 }

package/rollup.config.js

@@ -117,6 +117,7 @@ export default {
     "color",
     "framer-motion",
     "classnames",
+    "uuid",
     new RegExp("lodash/.*"),
     "@std-proposal/temporal",
     "@jobber/design",