@jobber/components 4.79.0 → 4.79.1-JOB-85851.2

package/dist/{Modal-a0627c92.js → Modal-5b866c72.js}

@@ -8,9 +8,9 @@ var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Heading = require('./Heading-1e8e4bd3.js');
-var Button = require('./Button-b73a5e01.js');
-var ButtonDismiss = require('./ButtonDismiss-350af163.js');
+var Heading = require('./Heading-bae3c69e.js');
+var Button = require('./Button-6b922fc1.js');
+var ButtonDismiss = require('./ButtonDismiss-a3ba1de2.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$1 = ":root {\n  --modal--width: calc(var(--base-unit) * 37.5);\n  --modal--padding-horizontal: var(--space-base);\n  --modal--padding-vertical: var(--space-base);\n  --modal--padding: var(--modal--padding-vertical)\n    var(--modal--padding-horizontal);\n}\n\n@media (min-width: 768px) {\n\n:root {\n    --modal--padding-horizontal: var(--space-large);\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n:root {\n    --modal--padding-horizontal: var(--space-large);\n}\n  }\n\n:root .jobber-retheme {\n  --modal--shadow: var(--shadow-base);\n}\n\n@media (min-width: 768px) {\n\n:root .jobber-retheme {\n    --modal--padding-horizontal: var(--space-large);\n    --modal--padding-vertical: var(--space-large);\n    --modal--padding: var(--modal--padding-vertical)\n      var(--modal--padding-horizontal);\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n:root .jobber-retheme {\n    --modal--padding-horizontal: var(--space-large);\n    --modal--padding-vertical: var(--space-large);\n    --modal--padding: var(--modal--padding-vertical)\n      var(--modal--padding-horizontal);\n}\n  }\n\n.QGRLFHPoV5E- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  z-index: 1001;\n  z-index: var(--elevation-modal);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  overflow: auto;\n}\n\n.QGRLFHPoV5E-,\n._4WzGOMUGj5I- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n._4WzGOMUGj5I- {\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n.WLId2NJBQcQ- {\n  position: relative;\n  width: 100%;\n  max-width: calc(16px * 37.5);\n  max-width: var(--modal--width);\n  box-shadow: var(--modal--shadow);\n  margin: auto;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n/* Adjust `Content` and `Tab` components public padding to match the modal */\n\n.WLId2NJBQcQ- > * {\n  --public-content--padding: var(--modal--padding);\n  --public-tab--inset: var(--modal--padding-horizontal);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.WLId2NJBQcQ- > * > * {\n  --public-content--padding: 0;\n}\n\n.wjrPpIUNNrk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(16px * 1)\n    calc(16px * 1);\n  padding: var(--modal--padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.jobber-retheme .wjrPpIUNNrk- {\n  background-color: transparent;\n}\n\n.jobber-retheme .wjrPpIUNNrk- 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\n/**\n * Ensure there's no extra padding top on the next element. This mostly negates\n * the <Content /> padding\n */\n\n.jobber-retheme .wjrPpIUNNrk- + * {\n  padding-top: 0;\n}\n\n.rKvigUnOyYE- {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n._62c8HLZFwvs- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1)\n    calc(16px * 1);\n  padding: var(--modal--padding);\n  padding-top: 0;\n  -ms-flex: 1 1 100%;\n      flex: 1 1 100%;\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n.Xl1Ptn-P9Ew- {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n\n.p2s7GtpoZz0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n/* This is in a correct position and order */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.p2s7GtpoZz0- > * {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n\n.p2s7GtpoZz0- *:first-child {\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n.p2s7GtpoZz0- *:nth-child(2) {\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n";
+var css_248z$1 = ":root {\n  --modal--width: calc(var(--base-unit) * 37.5);\n  --modal--padding-horizontal: var(--space-base);\n  --modal--padding-vertical: var(--space-base);\n  --modal--padding: var(--modal--padding-vertical)\n    var(--modal--padding-horizontal);\n}\n\n@media (min-width: 768px) {\n\n:root {\n    --modal--padding-horizontal: var(--space-large);\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n:root {\n    --modal--padding-horizontal: var(--space-large);\n}\n  }\n\n:root .jobber-retheme {\n  --modal--shadow: var(--shadow-base);\n}\n\n@media (min-width: 768px) {\n\n:root .jobber-retheme {\n    --modal--padding-horizontal: var(--space-large);\n    --modal--padding-vertical: var(--space-large);\n    --modal--padding: var(--modal--padding-vertical)\n      var(--modal--padding-horizontal);\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n:root .jobber-retheme {\n    --modal--padding-horizontal: var(--space-large);\n    --modal--padding-vertical: var(--space-large);\n    --modal--padding: var(--modal--padding-vertical)\n      var(--modal--padding-horizontal);\n}\n  }\n\n.QGRLFHPoV5E- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  z-index: 1001;\n  z-index: var(--elevation-modal);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  overflow: auto;\n}\n\n.QGRLFHPoV5E-,\n._4WzGOMUGj5I- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n._4WzGOMUGj5I- {\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n.WLId2NJBQcQ- {\n  position: relative;\n  width: 100%;\n  max-width: calc(16px * 37.5);\n  max-width: var(--modal--width);\n  box-shadow: var(--modal--shadow);\n  margin: auto;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n/* Adjust `Content` and `Tab` components public padding to match the modal */\n\n.WLId2NJBQcQ- > * {\n  --public-content--padding: var(--modal--padding);\n  --public-tab--inset: var(--modal--padding-horizontal);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.WLId2NJBQcQ- > * > * {\n  --public-content--padding: 0;\n}\n\n.wjrPpIUNNrk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(16px * 1)\n    calc(16px * 1);\n  padding: var(--modal--padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.jobber-retheme .wjrPpIUNNrk- {\n  background-color: transparent;\n}\n\n.jobber-retheme .wjrPpIUNNrk- 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\n/**\n * Ensure there's no extra padding top on the next element. This mostly negates\n * the <Content /> padding\n */\n\n.jobber-retheme .wjrPpIUNNrk- + * {\n  padding-top: 0;\n}\n\n.rKvigUnOyYE- {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n._62c8HLZFwvs- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1)\n    calc(16px * 1);\n  padding: var(--modal--padding);\n  padding-top: 0;\n  -ms-flex: 1 1 100%;\n      flex: 1 1 100%;\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n.Xl1Ptn-P9Ew- {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n\n.p2s7GtpoZz0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n/* This is in a correct position and order */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.p2s7GtpoZz0- > * {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n\n.p2s7GtpoZz0- > *:first-child {\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n.p2s7GtpoZz0- > *:nth-child(2) {\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n";
 var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-"};
 styleInject_es.styleInject(css_248z$1);
 
@@ -40,7 +40,9 @@ function Modal({ open = false, title, size, dismissible = true, children, primar
             title != undefined && (React__default["default"].createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
             children,
             React__default["default"].createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
-    return ReactDOM__default["default"].createPortal(template, document.body);
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
+        ? ReactDOM__default["default"].createPortal(template, document.body)
+        : template;
     function handleRequestClose() {
         if (open && onRequestClose) {
             onRequestClose();

package/dist/MultiSelect/index.js

@@ -5,13 +5,12 @@ 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-99f6297f.js');
-var Text = require('../Text-259af966.js');
+var Checkbox = require('../Checkbox-e481a4b1.js');
+var Text = require('../Text-fbeaaca6.js');
 var Icon = require('../Icon-405a216c.js');
 require('../tslib.es6-754e2961.js');
-require('uuid');
 require('react-hook-form');
-require('../Typography-c45bf216.js');
+require('../Typography-e2a23b7e.js');
 require('@jobber/design');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

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

package/dist/Page/index.js

@@ -6,20 +6,20 @@ var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Heading = require('../Heading-1e8e4bd3.js');
-var Text = require('../Text-259af966.js');
+var Heading = require('../Heading-bae3c69e.js');
+var Text = require('../Text-fbeaaca6.js');
 var Content = require('../Content-e3f7b6fc.js');
-var Markdown = require('../Markdown-f7c55304.js');
-var Button = require('../Button-b73a5e01.js');
-var Menu = require('../Menu-81b12936.js');
-var Emphasis = require('../Emphasis-bda56d3b.js');
-require('../Typography-c45bf216.js');
-require('../getAtlantisConfig-0f3e8af2.js');
+var Markdown = require('../Markdown-b1b65457.js');
+var Button = require('../Button-6b922fc1.js');
+var Menu = require('../Menu-d6dd673e.js');
+var Emphasis = require('../Emphasis-a77d8ee9.js');
+require('../Typography-e2a23b7e.js');
+require('../useAtlantisConfig-ed0bee66.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 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/Popover/index.js

@@ -6,13 +6,13 @@ var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var ButtonDismiss = require('../ButtonDismiss-350af163.js');
-require('../Button-b73a5e01.js');
+var ButtonDismiss = require('../ButtonDismiss-a3ba1de2.js');
+require('../Button-6b922fc1.js');
 require('classnames');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-c45bf216.js');
+require('../Typography-e2a23b7e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,7 +25,7 @@ styleInject_es.styleInject(css_248z);
 function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
     const [popperElement, setPopperElement] = React.useState();
     const [arrowElement, setArrowElement] = React.useState();
-    const { styles: popperStyles, attributes } = reactPopper.usePopper(attachTo instanceof Element ? attachTo : attachTo.current, popperElement, {
+    const { styles: popperStyles, attributes } = reactPopper.usePopper(isHTMLElement(attachTo) ? attachTo : attachTo.current, popperElement, {
         modifiers: buildModifiers(arrowElement),
         placement: preferredPlacement,
     });
@@ -57,5 +57,9 @@ function buildModifiers(arrowElement) {
     ];
     return modifiers;
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isHTMLElement(el) {
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) && el instanceof Element;
+}
 
 exports.Popover = Popover;

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 uuid
+     * @default useId()
      */
     readonly name?: string;
 }

package/dist/RadioGroup/index.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../RadioGroup-ca7a5978.js');
+var RadioGroup = require('../RadioGroup-678f4932.js');
 require('react');
-require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Text-259af966.js');
-require('../Typography-c45bf216.js');
+require('../Text-fbeaaca6.js');
+require('../Typography-e2a23b7e.js');
 require('classnames');
 
 

package/dist/{RadioGroup-ca7a5978.js → RadioGroup-678f4932.js}

@@ -1,9 +1,8 @@
 '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');
+var Text = require('./Text-fbeaaca6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,7 +20,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()}_${uuid.v1()}`;
+    const inputId = `${value.toString()}_${React.useId()}`;
     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 }),
@@ -34,7 +33,7 @@ function InternalRadioOption({ value, name, label, description, disabled, checke
     }
 }
 
-function RadioGroup({ children, value, ariaLabel, onChange, name = uuid.v1(), }) {
+function RadioGroup({ children, value, ariaLabel, onChange, name = React.useId(), }) {
     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/CurrentRecurrenceComponent.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { RecurrenceRule } from "./types";
 interface RecurringSelectProps {
-    disabled?: boolean;
-    recurrenceRule: RecurrenceRule;
+    readonly disabled?: boolean;
+    readonly recurrenceRule: RecurrenceRule;
     onChange(newRecurrence: RecurrenceRule): void;
 }
 export declare function CurrentRecurrenceComponent({ recurrenceRule, disabled, onChange, }: RecurringSelectProps): JSX.Element;

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

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

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

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

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { DurationPeriod } from "../types";
 interface MonthlySelectProps {
-    disabled: boolean;
-    selectedMonthOption: DurationPeriod.DayOfMonth | DurationPeriod.WeekDayOfMonth;
+    readonly disabled: boolean;
+    readonly selectedMonthOption: DurationPeriod.DayOfMonth | DurationPeriod.WeekDayOfMonth;
     onChange(type: DurationPeriod.DayOfMonth | DurationPeriod.WeekDayOfMonth): void;
 }
 export declare function MonthlySelect({ disabled, onChange, selectedMonthOption, }: MonthlySelectProps): JSX.Element;

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

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

package/dist/RecurringSelect/index.js

@@ -3,25 +3,24 @@
 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-ca7a5978.js');
-var Text = require('../Text-259af966.js');
+var RadioGroup = require('../RadioGroup-678f4932.js');
+var Text = require('../Text-fbeaaca6.js');
 require('classnames');
-require('../Typography-c45bf216.js');
-var Option = require('../Option-8565da71.js');
-var InputNumber = require('../InputNumber-ceae3872.js');
+require('../Typography-e2a23b7e.js');
+var Option = require('../Option-c4b05656.js');
+var InputNumber = require('../InputNumber-75ae72b9.js');
 var InputGroup = require('../InputGroup-8d4fd4eb.js');
 var Content = require('../Content-e3f7b6fc.js');
-require('../FormField-b4e6c549.js');
+require('../FormField-3ec1c85d.js');
 require('../tslib.es6-754e2961.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
-require('../Button-b73a5e01.js');
+require('../Button-6b922fc1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-05e839fa.js');
+require('../InputValidation-a92bb519.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 
@@ -99,7 +98,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 = uuid.v1();
+        const inputId = React.useId();
         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()}`)));
@@ -144,7 +143,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 = uuid.v1();
+        const inputId = React.useId();
         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,22 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-8565da71.js');
+var Option = require('../Option-c4b05656.js');
 require('react');
-require('../FormField-b4e6c549.js');
+require('../FormField-3ec1c85d.js');
 require('../tslib.es6-754e2961.js');
-require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
 require('@jobber/hooks/useShowClear');
-require('../Button-b73a5e01.js');
+require('../Button-6b922fc1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-c45bf216.js');
-require('../Text-259af966.js');
-require('../InputValidation-05e839fa.js');
+require('../Typography-e2a23b7e.js');
+require('../Text-fbeaaca6.js');
+require('../InputValidation-a92bb519.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StatusIndicatorType } from "./StatusIndicator.type";
+interface StatusIndicatorProps {
+    readonly status: StatusIndicatorType;
+}
+export declare function StatusIndicator({ status }: StatusIndicatorProps): JSX.Element;
+export {};

package/dist/StatusIndicator/StatusIndicator.type.d.ts

@@ -0,0 +1 @@
+export type StatusIndicatorType = "success" | "warning" | "critical" | "inactive" | "informative";

package/dist/StatusIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusIndicator } from "./StatusIndicator";
+export type { StatusIndicatorType } from "./StatusIndicator.type";

package/dist/StatusIndicator/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var StatusIndicator = require('../StatusIndicator-7b5258ea.js');
+require('react');
+require('../style-inject.es-9d2f5f4e.js');
+
+
+
+exports.StatusIndicator = StatusIndicator.StatusIndicator;

package/dist/StatusIndicator-7b5258ea.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ":root {\n  --statusLabel-icon-diameter: 8px;\n}\n\n.ob7nhx1U-HQ- {\n  display: inline-block;\n  width: 8px;\n  width: var(--statusLabel-icon-diameter);\n  height: 8px;\n  height: var(--statusLabel-icon-diameter);\n  border-radius: 50%;\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-success);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n";
+var styles = {"statusIndicator":"ob7nhx1U-HQ-"};
+styleInject_es.styleInject(css_248z);
+
+function StatusIndicator({ status }) {
+    return (React__default["default"].createElement("span", { style: { backgroundColor: `var(--color-${status})` }, className: styles.statusIndicator, "data-testid": `ATL-Status-Indicator-${status}` }));
+}
+
+exports.StatusIndicator = StatusIndicator;

package/dist/StatusLabel/StatusLabel.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-export type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
+import { StatusIndicatorType } from "../StatusIndicator/StatusIndicator.type";
 export interface StatusLabelType {
     readonly statusLabel: string;
-    readonly statusType?: StatusType;
+    readonly statusType?: StatusIndicatorType;
 }
 interface StatusLabelProps {
     /**
@@ -20,7 +20,7 @@ interface StatusLabelProps {
      *
      * @default "inactive"
      */
-    readonly status: StatusType;
+    readonly status: StatusIndicatorType;
 }
 export declare function StatusLabel({ label, alignment, status, }: StatusLabelProps): JSX.Element;
 export {};

package/dist/StatusLabel/index.js

@@ -5,26 +5,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Text = require('../Text-259af966.js');
-require('../Typography-c45bf216.js');
+var Typography = require('../Typography-e2a23b7e.js');
+var StatusIndicator = require('../StatusIndicator-7b5258ea.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 = ":root {\n  --statusLabel-icon-diameter: 10px;\n}\n\n.MB0ycTR4PHg- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.fNl6zDhsox0- {\n  width: 10px;\n  width: var(--statusLabel-icon-diameter);\n  height: 10px;\n  height: var(--statusLabel-icon-diameter);\n  margin-top: calc(16px / 16);\n  margin-top: var(--space-minuscule);\n  border-radius: 3px;\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-success);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._0kNfkSPBETw- {\n  -ms-flex-direction: row-reverse;\n      flex-direction: row-reverse;\n}\n";
-var styles = {"statusLabelRow":"MB0ycTR4PHg-","statusIndicator":"fNl6zDhsox0-","labelTextEndAligned":"_0kNfkSPBETw-"};
+var css_248z = ":root {\n  --labelBackgroundColor: var(--color-success--surface);\n}\n\n.WBxCEgPiC98- {\n  --labelBackgroundColor: var(--color-success--surface);\n}\n\n.ok6hVljkqSE- {\n  --labelBackgroundColor: var(--color-warning--surface);\n}\n\n.-YTFHnzpkRE- {\n  --labelBackgroundColor: var(--color-critical--surface);\n}\n\n._2F0I59nddP8- {\n  --labelBackgroundColor: var(--color-inactive--surface);\n}\n\n.BQd6Hylvxh0- {\n  --labelBackgroundColor: var(--color-informative--surface);\n}\n\n.MB0ycTR4PHg- {\n  display: -ms-flexbox;\n  display: flex;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  padding: 0.375rem 0.625rem 0.375rem 0.5rem;\n  border-radius: 0.75rem;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  gap: 0.375rem;\n  background-color: rgb(236, 243, 219);\n  background-color: var(--labelBackgroundColor);\n}\n\n/* Reset the <Text> line height so we can reliably get 24px tall */\n\n.MB0ycTR4PHg- p {\n  line-height: 1;\n}\n\n._0kNfkSPBETw- {\n  -ms-flex-direction: row-reverse;\n      flex-direction: row-reverse;\n}\n\n.NYMNxZSup30- {\n  display: -ms-flexbox;\n  display: flex;\n  padding-top: 0.125rem;\n}\n";
+var styles = {"success":"WBxCEgPiC98-","warning":"ok6hVljkqSE-","critical":"-YTFHnzpkRE-","inactive":"_2F0I59nddP8-","informative":"BQd6Hylvxh0-","statusLabelRow":"MB0ycTR4PHg-","labelTextEndAligned":"_0kNfkSPBETw-","statusIndicatorWrapper":"NYMNxZSup30-"};
 styleInject_es.styleInject(css_248z);
 
 function StatusLabel({ label, alignment = "start", status = "inactive", }) {
-    const containerClassNames = classnames__default["default"](styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
+    const containerClassNames = classnames__default["default"](styles.statusLabelRow, styles[status], alignment === "end" && styles.labelTextEndAligned);
     return (React__default["default"].createElement("div", { role: "status", className: containerClassNames },
-        React__default["default"].createElement(StatusLabelIcon, { status: status }),
-        React__default["default"].createElement(Text.Text, { size: "small", align: alignment }, label)));
-}
-function StatusLabelIcon({ status }) {
-    return (React__default["default"].createElement("div", { style: { backgroundColor: `var(--color-${status}` }, className: styles.statusIndicator }));
+        React__default["default"].createElement("div", { className: styles.statusIndicatorWrapper },
+            React__default["default"].createElement(StatusIndicator.StatusIndicator, { status: status })),
+        React__default["default"].createElement(Typography.Typography, { size: "small", textColor: status, align: alignment }, label)));
 }
 
 exports.StatusLabel = StatusLabel;

package/dist/Switch/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Switch = require('../Switch-7d4aa7c3.js');
+var Switch = require('../Switch-eac89586.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-c45bf216.js');
+require('../Typography-e2a23b7e.js');
 
 
 

package/dist/{Switch-7d4aa7c3.js → Switch-eac89586.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Typography = require('./Typography-c45bf216.js');
+var Typography = require('./Typography-e2a23b7e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Table/Body.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface BodyProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Body({ children }: BodyProps): JSX.Element;
 export {};

package/dist/Table/Cells/Cell.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 interface CellProps {
-    children?: ReactNode | ReactNode[];
-    align?: "left" | "center" | "right";
+    readonly children?: ReactNode | ReactNode[];
+    readonly align?: "left" | "center" | "right";
 }
 export declare function Cell({ children, align }: CellProps): JSX.Element;
 export {};

package/dist/Table/Cells/CellCurrency.d.ts

@@ -2,8 +2,8 @@
 import { CurrencyType } from "@jobber/formatters";
 import { CellNumericProps } from "./CellNumeric";
 interface CellCurrencyProps extends CellNumericProps {
-    value: number;
-    currency?: CurrencyType;
+    readonly value: number;
+    readonly currency?: CurrencyType;
 }
 export declare function CellCurrency({ value, currency, }: CellCurrencyProps): JSX.Element;
 export {};

package/dist/Table/Cells/CellNumeric.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export interface CellNumericProps {
-    value: number | string;
+    readonly value: number | string;
 }
 export declare function CellNumeric({ value }: CellNumericProps): JSX.Element;

package/dist/Table/Footer.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface FooterProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Footer({ children }: FooterProps): JSX.Element;
 export {};

package/dist/Table/Header.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface HeaderProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Header({ children }: HeaderProps): JSX.Element;
 export {};

package/dist/Table/Row.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface RowProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Row({ children }: RowProps): JSX.Element;
 export {};

package/dist/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface TableProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Table({ children }: TableProps): JSX.Element;
 export {};

package/dist/Tabs/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Typography = require('../Typography-c45bf216.js');
+var Typography = require('../Typography-e2a23b7e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Text/Text.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from "react";
 interface TextProps {
-    maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
+    readonly maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
     readonly variation?: "default" | "subdued" | "success" | "error" | "warn" | "info" | "disabled";
     readonly align?: "start" | "center" | "end";
     readonly size?: "small" | "base" | "large";

package/dist/Text/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Text = require('../Text-259af966.js');
+var Text = require('../Text-fbeaaca6.js');
 require('react');
-require('../Typography-c45bf216.js');
+require('../Typography-e2a23b7e.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 

package/dist/{Text-259af966.js → Text-fbeaaca6.js}

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

package/dist/Toast/index.js

@@ -7,8 +7,8 @@ var client = require('react-dom/client');
 var framerMotion = require('framer-motion');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
-var Button = require('../Button-b73a5e01.js');
-var Typography = require('../Typography-c45bf216.js');
+var Button = require('../Button-6b922fc1.js');
+var Typography = require('../Typography-e2a23b7e.js');
 require('@jobber/design');
 require('classnames');
 require('react-router-dom');