@jobber/components 4.84.0 → 4.85.0

package/StatusIndicator.d.ts

@@ -0,0 +1 @@
+export * from "./dist/StatusIndicator";

package/StatusIndicator.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var StatusIndicator = require("./dist/StatusIndicator");
+
+Object.keys(StatusIndicator).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return StatusIndicator[key];
+    },
+  });
+});

package/dist/Combobox/Combobox.types.d.ts

@@ -62,6 +62,10 @@ export interface ComboboxOption {
      * The value to be visually displayed in the Combobox options list.
      */
     label: string;
+    /**
+     * An optional component to be displayed before the label.
+     */
+    prefix?: React.ReactElement;
 }
 export interface ComboboxContentProps {
     /**

package/dist/Combobox/components/ComboboxOption/ComboboxOption.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 export interface ComboboxOptionProps {
     readonly id: string | number;
     readonly label: string;
+    readonly prefix?: React.ReactNode;
 }
 export declare function ComboboxOption(props: ComboboxOptionProps): JSX.Element;

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-df332d89.js');
+var Combobox = require('../Combobox-a24c8241.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -17,6 +17,7 @@ require('../Content-e3f7b6fc.js');
 require('../Spinner-9d8fc7ff.js');
 require('../AnimatedPresence-20a02aaa.js');
 require('framer-motion');
+require('../Flex-d490c4db.js');
 require('@jobber/hooks/useInView');
 require('../Button-b73a5e01.js');
 require('react-router-dom');

package/dist/{Combobox-df332d89.js → Combobox-a24c8241.js}

@@ -9,6 +9,7 @@ var Text = require('./Text-259af966.js');
 var Glimmer = require('./Glimmer-84dee1ed.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
 var AnimatedPresence = require('./AnimatedPresence-20a02aaa.js');
+var Flex = require('./Flex-d490c4db.js');
 var tslib_es6 = require('./tslib.es6-754e2961.js');
 var useInView = require('@jobber/hooks/useInView');
 var Typography = require('./Typography-c45bf216.js');
@@ -84,7 +85,9 @@ function ComboboxOption(props) {
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
     return (React__default["default"].createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
             selectionHandler({ id: props.id, label: props.label }), className: classnames__default["default"](styles$4.option) },
-        props.label,
+        React__default["default"].createElement(Flex.Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
+            props.prefix,
+            props.label),
         React__default["default"].createElement("div", null, isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" }))));
 }
 
@@ -107,7 +110,7 @@ function ComboboxContentList(props) {
     return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$5.container, styles$5[listScrollState]) },
         optionsExist && (React__default["default"].createElement("ul", { className: styles$5.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
             props.options.map(option => {
-                return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
+                return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix }));
             }),
             React__default["default"].createElement("div", { className: classnames__default["default"]([styles$5.loadingContainer, styles$5.hasOptions]) },
                 React__default["default"].createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
@@ -459,6 +462,7 @@ function Combobox(props) {
     const options = React.useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => ({
         id: option.props.id,
         label: option.props.label,
+        prefix: option.props.prefix,
     }))) || [], [optionElements]);
     const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
     return (React__default["default"].createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue },

package/dist/ConfirmationModal/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-f1a049fb.js');
+var ConfirmationModal = require('../ConfirmationModal-52e16873.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-a0627c92.js');
+require('../Modal-c336cac6.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');

package/dist/{ConfirmationModal-f1a049fb.js → ConfirmationModal-52e16873.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-a0627c92.js');
+var Modal = require('./Modal-c336cac6.js');
 var Content = require('./Content-e3f7b6fc.js');
 var Markdown = require('./Markdown-f7c55304.js');
 

package/dist/DataList/DataList.types.d.ts

@@ -189,7 +189,6 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
     readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
     readonly bulkActionsComponent?: ReactElement<DataListItemActionsProps<T>>;
     readonly layoutBreakpoints: Breakpoints[];
-    readonly registerLayoutBreakpoints: (breakpoint: Breakpoints) => void;
     readonly layouts: {
         readonly [Breakpoint in Breakpoints]?: LayoutRenderer<T>;
     };

package/dist/DataList/index.js

@@ -26,7 +26,7 @@ var ReactDOM = require('react-dom');
 var Checkbox = require('../Checkbox-787e2e47.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
-var Combobox = require('../Combobox-df332d89.js');
+var Combobox = require('../Combobox-a24c8241.js');
 var Chip = require('../Chip-3d1bfddc.js');
 var debounce = require('lodash/debounce');
 var InputText = require('../InputText-55b6cb65.js');
@@ -38,6 +38,7 @@ require('react-popper');
 require('../getAtlantisConfig-0f3e8af2.js');
 require('react-hook-form');
 require('../AnimatedPresence-20a02aaa.js');
+require('../Flex-d490c4db.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');
@@ -85,7 +86,6 @@ const defaultValues$1 = {
     children: [],
     selected: [],
     layoutBreakpoints: [],
-    registerLayoutBreakpoints: noop__default["default"],
     layouts: {
         xs: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
         sm: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
@@ -766,17 +766,14 @@ function DataListItems({ size = "xs", }) {
 }
 
 function DataListLayout({ children, size = "xs", }) {
-    const { layoutBreakpoints, registerLayout, registerLayoutBreakpoints, loadingState, } = useDataListContext();
-    const breakpoints = useResponsiveSizing();
-    React.useEffect(() => {
-        registerLayoutBreakpoints(size);
-    }, [size]);
+    const { registerLayout, loadingState, layouts } = useDataListContext();
+    const { activeBreakpoint } = useActiveLayout();
     React.useEffect(() => {
+        if (layouts[size])
+            return;
         registerLayout(size, children);
     }, [size, children]);
-    const sizeIndex = layoutBreakpoints.indexOf(size);
-    const nextAvailableSize = layoutBreakpoints[sizeIndex + 1];
-    const shouldRenderList = breakpoints[size] && !breakpoints[nextAvailableSize];
+    const shouldRenderList = size === activeBreakpoint;
     if (loadingState !== "initial" && shouldRenderList) {
         return React__default["default"].createElement(DataListItems, { size: size });
     }
@@ -1224,8 +1221,8 @@ function InternalDataListStatusBar() {
 
 function DataList(_a) {
     var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
-    const [layoutBreakpoints, setLayoutBreakpoints] = React.useState([]);
     const [layouts, setLayouts] = React.useState({});
+    const layoutBreakpoints = React.useMemo(() => sortBreakpoints(Object.keys(layouts)), [layouts]);
     const searchComponent = getCompoundComponent(props.children, DataListSearch);
     const filterComponent = getCompoundComponent(props.children, DataListFilters);
     const layoutComponents = getCompoundComponents(props.children, DataListLayout);
@@ -1241,15 +1238,11 @@ function DataList(_a) {
             itemActionComponent,
             bulkActionsComponent,
             layoutBreakpoints,
-            registerLayoutBreakpoints,
             layouts,
             registerLayout }, props), { selected, 
             // T !== DataListObject
             sorting: sorting }) },
         React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
-    function registerLayoutBreakpoints(size) {
-        setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
-    }
     function registerLayout(size, children) {
         setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
     }

package/dist/Flex/index.js

@@ -2,39 +2,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 Flex = require('../Flex-d490c4db.js');
+require('react');
+require('classnames');
+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 classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z = "._8VpnrMKmsqQ- {\n  display: grid;\n  /* If this gets wrapped in a flex container, it should take the remaining space */\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.ooF1YfV4Usc- {\n  gap: calc(16px / 8);\n  gap: var(--space-smallest);\n}\n\n.ppCZfXq-Kqc- {\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.tElkBalXH3g- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n._4u3OwUKxxbg- {\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n}\n\n.RL7CJla0AAI- {\n  gap: calc(16px * 1.5);\n  gap: var(--space-large);\n}\n\n.fV4cvFYkhgo- {\n  gap: 0;\n}\n\n._04xVVjZgr-0- {\n  -ms-flex-align: start;\n      align-items: start;\n}\n\n.Nc3zrqHHYSg- {\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qA-v50wBX1U- {\n  -ms-flex-align: end;\n      align-items: end;\n}\n";
-var styles = {"flexible":"_8VpnrMKmsqQ-","smallestGap":"ooF1YfV4Usc-","smallerGap":"ppCZfXq-Kqc-","smallGap":"tElkBalXH3g-","baseGap":"_4u3OwUKxxbg-","largeGap":"RL7CJla0AAI-","noneGap":"fV4cvFYkhgo-","startAlign":"_04xVVjZgr-0-","centerAlign":"Nc3zrqHHYSg-","endAlign":"qA-v50wBX1U-"};
-styleInject_es.styleInject(css_248z);
-
-function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.flexible, {
-            [styles[`${gap}Gap`]]: Boolean(gap),
-            [styles[`${align}Align`]]: Boolean(align),
-        }), style: generateGridStylesFromTemplate(direction, template) }, children));
-}
-function generateGridStylesFromTemplate(direction, layoutTemplate) {
-    const containerStyles = {};
-    const templateKeys = {
-        row: "gridTemplateColumns",
-        column: "gridTemplateRows",
-    };
-    const templateValues = {
-        grow: "1fr",
-        shrink: "max-content",
-    };
-    containerStyles[templateKeys[direction]] = layoutTemplate
-        .map(key => templateValues[key])
-        .join(" ");
-    return containerStyles;
-}
-
-exports.Flex = Flex;
+exports.Flex = Flex.Flex;

package/dist/Flex-d490c4db.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+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 classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = "._8VpnrMKmsqQ- {\n  display: grid;\n  /* If this gets wrapped in a flex container, it should take the remaining space */\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.ooF1YfV4Usc- {\n  gap: calc(16px / 8);\n  gap: var(--space-smallest);\n}\n\n.ppCZfXq-Kqc- {\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.tElkBalXH3g- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n._4u3OwUKxxbg- {\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n}\n\n.RL7CJla0AAI- {\n  gap: calc(16px * 1.5);\n  gap: var(--space-large);\n}\n\n.fV4cvFYkhgo- {\n  gap: 0;\n}\n\n._04xVVjZgr-0- {\n  -ms-flex-align: start;\n      align-items: start;\n}\n\n.Nc3zrqHHYSg- {\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qA-v50wBX1U- {\n  -ms-flex-align: end;\n      align-items: end;\n}\n";
+var styles = {"flexible":"_8VpnrMKmsqQ-","smallestGap":"ooF1YfV4Usc-","smallerGap":"ppCZfXq-Kqc-","smallGap":"tElkBalXH3g-","baseGap":"_4u3OwUKxxbg-","largeGap":"RL7CJla0AAI-","noneGap":"fV4cvFYkhgo-","startAlign":"_04xVVjZgr-0-","centerAlign":"Nc3zrqHHYSg-","endAlign":"qA-v50wBX1U-"};
+styleInject_es.styleInject(css_248z);
+
+function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.flexible, {
+            [styles[`${gap}Gap`]]: Boolean(gap),
+            [styles[`${align}Align`]]: Boolean(align),
+        }), style: generateGridStylesFromTemplate(direction, template) }, children));
+}
+function generateGridStylesFromTemplate(direction, layoutTemplate) {
+    const containerStyles = {};
+    const templateKeys = {
+        row: "gridTemplateColumns",
+        column: "gridTemplateRows",
+    };
+    const templateValues = {
+        grow: "1fr",
+        shrink: "max-content",
+    };
+    containerStyles[templateKeys[direction]] = layoutTemplate
+        .map(key => templateValues[key])
+        .join(" ");
+    return containerStyles;
+}
+
+exports.Flex = Flex;

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-f036902d.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -12,9 +12,9 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
-require('../ConfirmationModal-f1a049fb.js');
+require('../ConfirmationModal-52e16873.js');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-a0627c92.js');
+require('../Modal-c336cac6.js');
 require('react-dom');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/{FormatFile-f10799f5.js → FormatFile-f036902d.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 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 ConfirmationModal = require('./ConfirmationModal-52e16873.js');
 var Glimmer = require('./Glimmer-84dee1ed.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-c45bf216.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-f036902d.js');
 var Button = require('../Button-b73a5e01.js');
 require('framer-motion');
 require('react-dom');
@@ -16,8 +16,8 @@ require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
 require('../ButtonDismiss-350af163.js');
 require('filesize');
-require('../ConfirmationModal-f1a049fb.js');
-require('../Modal-a0627c92.js');
+require('../ConfirmationModal-52e16873.js');
+require('../Modal-c336cac6.js');
 require('../Heading-1e8e4bd3.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');

package/dist/Modal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Modal = require('../Modal-a0627c92.js');
+var Modal = require('../Modal-c336cac6.js');
 require('react');
 require('react-dom');
 require('classnames');

package/dist/{Modal-a0627c92.js → Modal-c336cac6.js}

@@ -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);
 

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-b179d06e.js');
+require('react');
+require('../style-inject.es-9d2f5f4e.js');
+
+
+
+exports.StatusIndicator = StatusIndicator.StatusIndicator;

package/dist/StatusIndicator-b179d06e.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 = ".ob7nhx1U-HQ- {\n  display: inline-block;\n  width: var(--statusLabel-icon-diameter);\n  height: var(--statusLabel-icon-diameter);\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";
+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

@@ -6,6 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Text = require('../Text-259af966.js');
+var StatusIndicator = require('../StatusIndicator-b179d06e.js');
 require('../Typography-c45bf216.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,18 +14,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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  --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._0kNfkSPBETw- {\n  -ms-flex-direction: row-reverse;\n      flex-direction: row-reverse;\n}\n\n.fNl6zDhsox0- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  padding-top: calc(16px / 16);\n  padding-top: var(--space-minuscule);\n}\n";
+var styles = {"statusLabelRow":"MB0ycTR4PHg-","labelTextEndAligned":"_0kNfkSPBETw-","statusIndicator":"fNl6zDhsox0-"};
 styleInject_es.styleInject(css_248z);
 
 function StatusLabel({ label, alignment = "start", status = "inactive", }) {
     const containerClassNames = classnames__default["default"](styles.statusLabelRow, 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("div", { className: styles.statusIndicator },
+            React__default["default"].createElement(StatusIndicator.StatusIndicator, { 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 }));
-}
 
 exports.StatusLabel = StatusLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.84.0",
+  "version": "4.85.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -80,5 +80,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4780cde621bb770d24f6bd324ee868b302afc579"
+  "gitHead": "8a94ae96fa60a2d0db036ab5bc87d9dc4df39f78"
 }