@jobber/components 6.9.0 → 6.9.1-CLEANUPau-2d4ca7d.34

package/dist/DataList/DataList.const.d.ts

@@ -16,6 +16,7 @@ export declare const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteri
 export declare const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 export declare const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
 export declare const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
+export declare const DATA_LIST_TITLE_CONTAINER_TEST_ID = "ATL-DataList-titleContainer";
 export declare const TRANSITION_DURATION_IN_SECONDS: number;
 export declare const TRANSITION_DELAY_IN_SECONDS: number;
 export {};

package/dist/DataList-cjs.js

@@ -57,10 +57,11 @@ function InternalDataList({ shouldRenderStickyHeader, }) {
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
     const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
+    const shouldRenderTitleContainer = initialLoading || title !== undefined || totalCount !== undefined;
     return (React.createElement("div", { className: DataList_module.styles.wrapper },
-        React.createElement("div", { className: DataList_module.styles.titleContainer },
+        shouldRenderTitleContainer && (React.createElement("div", { className: DataList_module.styles.titleContainer, "data-testid": DataList_const.DATA_LIST_TITLE_CONTAINER_TEST_ID },
             title && React.createElement(Heading.Heading, { level: 3 }, title),
-            React.createElement(DataListTotalCount.DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
+            totalCount !== undefined && (React.createElement(DataListTotalCount.DataListTotalCount, { totalCount: totalCount, loading: initialLoading })))),
         React.createElement("div", { ref: backToTopRef }),
         shouldRenderStickyHeader && (React.createElement(DataListStickyHeader.DataListStickyHeader, null,
             React.createElement("div", { className: DataList_module.styles.headerFilters },

package/dist/DataList-es.js

@@ -15,7 +15,7 @@ import { D as DataListAction } from './DataListAction-es.js';
 import { D as DataListLayoutActions } from './DataListLayoutActions-es.js';
 import { D as DataListContext, u as useDataListContext } from './DataListContext-es.js';
 import { s as sortBreakpoints, g as getCompoundComponent, a as getCompoundComponents } from './DataList.utils-es.js';
-import { D as DATA_LIST_FILTERING_SPINNER_TEST_ID } from './DataList.const-es.js';
+import { D as DATA_LIST_TITLE_CONTAINER_TEST_ID, a as DATA_LIST_FILTERING_SPINNER_TEST_ID } from './DataList.const-es.js';
 import { D as DataListBulkActions } from './DataListBulkActions-es.js';
 import { I as InternalDataListStatusBar, D as DataListStatusBar } from './DataListStatusBar-es.js';
 import { H as Heading } from './Heading-es.js';
@@ -55,10 +55,11 @@ function InternalDataList({ shouldRenderStickyHeader, }) {
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
     const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
+    const shouldRenderTitleContainer = initialLoading || title !== undefined || totalCount !== undefined;
     return (React.createElement("div", { className: styles.wrapper },
-        React.createElement("div", { className: styles.titleContainer },
+        shouldRenderTitleContainer && (React.createElement("div", { className: styles.titleContainer, "data-testid": DATA_LIST_TITLE_CONTAINER_TEST_ID },
             title && React.createElement(Heading, { level: 3 }, title),
-            React.createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
+            totalCount !== undefined && (React.createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })))),
         React.createElement("div", { ref: backToTopRef }),
         shouldRenderStickyHeader && (React.createElement(DataListStickyHeader, null,
             React.createElement("div", { className: styles.headerFilters },

package/dist/DataList.const-cjs.js

@@ -21,6 +21,7 @@ const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
 const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
 const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
+const DATA_LIST_TITLE_CONTAINER_TEST_ID = "ATL-DataList-titleContainer";
 const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
 const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
 
@@ -29,6 +30,7 @@ exports.BREAKPOINT_SIZES = BREAKPOINT_SIZES;
 exports.DATA_LIST_FILTERING_SPINNER_TEST_ID = DATA_LIST_FILTERING_SPINNER_TEST_ID;
 exports.DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = DATA_LIST_LOADING_MORE_SPINNER_TEST_ID;
 exports.DATA_LIST_STICKY_HEADER_TEST_ID = DATA_LIST_STICKY_HEADER_TEST_ID;
+exports.DATA_LIST_TITLE_CONTAINER_TEST_ID = DATA_LIST_TITLE_CONTAINER_TEST_ID;
 exports.DATA_LOAD_MORE_TEST_ID = DATA_LOAD_MORE_TEST_ID;
 exports.EMPTY_FILTER_RESULTS_MESSAGE = EMPTY_FILTER_RESULTS_MESSAGE;
 exports.EMPTY_RESULTS_MESSAGE = EMPTY_RESULTS_MESSAGE;

package/dist/DataList.const-es.js

@@ -19,7 +19,8 @@ const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
 const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
 const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
+const DATA_LIST_TITLE_CONTAINER_TEST_ID = "ATL-DataList-titleContainer";
 const TRANSITION_DURATION_IN_SECONDS = tokens["timing-base"] / 1000;
 const TRANSITION_DELAY_IN_SECONDS = tokens["timing-quick"] / 1000;
 
-export { BREAKPOINTS as B, DATA_LIST_FILTERING_SPINNER_TEST_ID as D, EMPTY_FILTER_RESULTS_MESSAGE as E, SEARCH_DEBOUNCE_DELAY as S, TRANSITION_DURATION_IN_SECONDS as T, DATA_LIST_STICKY_HEADER_TEST_ID as a, EMPTY_RESULTS_MESSAGE as b, EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR as c, TRANSITION_DELAY_IN_SECONDS as d, BREAKPOINT_SIZES as e, DATA_LOAD_MORE_TEST_ID as f, DATA_LIST_LOADING_MORE_SPINNER_TEST_ID as g };
+export { BREAKPOINTS as B, DATA_LIST_TITLE_CONTAINER_TEST_ID as D, EMPTY_FILTER_RESULTS_MESSAGE as E, SEARCH_DEBOUNCE_DELAY as S, TRANSITION_DURATION_IN_SECONDS as T, DATA_LIST_FILTERING_SPINNER_TEST_ID as a, DATA_LIST_STICKY_HEADER_TEST_ID as b, EMPTY_RESULTS_MESSAGE as c, EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR as d, TRANSITION_DELAY_IN_SECONDS as e, BREAKPOINT_SIZES as f, DATA_LOAD_MORE_TEST_ID as g, DATA_LIST_LOADING_MORE_SPINNER_TEST_ID as h };

package/dist/DataListActionsMenu-es.js

@@ -6,7 +6,7 @@ import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
 import { createPortal } from 'react-dom';
 import { tokens } from '@jobber/design';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
-import { d as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-es.js';
+import { e as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-es.js';
 
 var styles = {"menu":"e1ztw2-YxtM-","overlay":"uMoOb93Pf1Q-","spinning":"_0wS9DWCNuj4-"};
 

package/dist/DataListEmptyState-es.js

@@ -3,7 +3,7 @@ import React, { useContext, cloneElement } from 'react';
 import { D as DataListContext } from './DataListContext-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
-import { E as EMPTY_FILTER_RESULTS_MESSAGE, b as EMPTY_RESULTS_MESSAGE, c as EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR } from './DataList.const-es.js';
+import { E as EMPTY_FILTER_RESULTS_MESSAGE, c as EMPTY_RESULTS_MESSAGE, d as EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR } from './DataList.const-es.js';
 
 var styles = {"emptyStateWrapper":"R0MWvfTO9vg-","spinning":"hVJ2XoR6bR0-"};
 

package/dist/DataListItemActions-es.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { motion } from 'framer-motion';
-import { T as TRANSITION_DURATION_IN_SECONDS, d as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-es.js';
+import { T as TRANSITION_DURATION_IN_SECONDS, e as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-es.js';
 import { D as DataListActions } from './DataListActions-es.js';
 
 var styles = {"menu":"SSm2j6d2kYo-","spinning":"Mpmu6IiBTSI-"};

package/dist/DataListLoadMore-es.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { u as useInView_2 } from './useInView-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
-import { f as DATA_LOAD_MORE_TEST_ID, g as DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from './DataList.const-es.js';
+import { g as DATA_LOAD_MORE_TEST_ID, h as DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from './DataList.const-es.js';
 import { S as Spinner } from './Spinner-es.js';
 import { B as Button } from './Button-es.js';
 

package/dist/DataListStickyHeader-es.js

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { a as DATA_LIST_STICKY_HEADER_TEST_ID } from './DataList.const-es.js';
+import { b as DATA_LIST_STICKY_HEADER_TEST_ID } from './DataList.const-es.js';
 
 var styles = {"header":"u5YTRL-PlTI-","stuck":"rylbmDbzCts-","spinning":"_2VUVOWcGjbc-"};
 

package/dist/DataListTotalCount-cjs.js

@@ -7,20 +7,22 @@ var Glimmer = require('./Glimmer-cjs.js');
 var styles = {"results":"_9wfZRG5vXI8-","spinning":"_7A1FU9kI3mY-"};
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+function DataListTotalCountContainer({ children }) {
+    return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, children));
+}
 function DataListTotalCount({ totalCount, loading, }) {
-    if (totalCount === undefined)
-        return null;
-    let output = null;
     if (totalCount === null && loading) {
-        output = React.createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
+        return (React.createElement(DataListTotalCountContainer, null,
+            React.createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" })));
     }
     if (typeof totalCount === "number") {
-        output = (React.createElement(Text.Text, { variation: "subdued" },
-            "(",
-            totalCount.toLocaleString(),
-            " results)"));
+        return (React.createElement(DataListTotalCountContainer, null,
+            React.createElement(Text.Text, { variation: "subdued" },
+                "(",
+                totalCount.toLocaleString(),
+                " results)")));
     }
-    return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+    return null;
 }
 
 exports.DATALIST_TOTALCOUNT_TEST_ID = DATALIST_TOTALCOUNT_TEST_ID;

package/dist/DataListTotalCount-es.js

@@ -5,20 +5,22 @@ import { G as Glimmer } from './Glimmer-es.js';
 var styles = {"results":"_9wfZRG5vXI8-","spinning":"_7A1FU9kI3mY-"};
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+function DataListTotalCountContainer({ children }) {
+    return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, children));
+}
 function DataListTotalCount({ totalCount, loading, }) {
-    if (totalCount === undefined)
-        return null;
-    let output = null;
     if (totalCount === null && loading) {
-        output = React.createElement(Glimmer, { size: "auto", shape: "rectangle" });
+        return (React.createElement(DataListTotalCountContainer, null,
+            React.createElement(Glimmer, { size: "auto", shape: "rectangle" })));
     }
     if (typeof totalCount === "number") {
-        output = (React.createElement(Text, { variation: "subdued" },
-            "(",
-            totalCount.toLocaleString(),
-            " results)"));
+        return (React.createElement(DataListTotalCountContainer, null,
+            React.createElement(Text, { variation: "subdued" },
+                "(",
+                totalCount.toLocaleString(),
+                " results)")));
     }
-    return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+    return null;
 }
 
 export { DATALIST_TOTALCOUNT_TEST_ID as D, DataListTotalCount as a };

package/dist/FormField/hooks/useFormFieldWrapperStyles.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from "react";
 import { FormFieldProps } from "../FormFieldTypes";
-export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline"> {
+export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline" | "toolbar"> {
     readonly error: string;
     suffixRef: RefObject<HTMLDivElement>;
     prefixRef: RefObject<HTMLDivElement>;
@@ -12,7 +12,7 @@ export interface LabelPadding {
 /**
  * Hook for getting the correct styles for the FormField and its children
  */
-export declare function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, }: useFormFieldWrapperStylesProps): {
+export declare function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, toolbar, }: useFormFieldWrapperStylesProps): {
     inputStyle: string;
     wrapperClasses: string;
     containerClasses: string;

package/dist/FormField/hooks/useToolbar.d.ts

@@ -1,6 +1,7 @@
 import { FormFieldProps } from "../FormFieldTypes";
 interface UseToolBarProps {
     focused: boolean;
+    disabled?: boolean;
     toolbar: React.ReactNode;
     toolbarVisibility: FormFieldProps["toolbarVisibility"];
 }

package/dist/FormField-cjs.js

@@ -33,7 +33,7 @@ function useShowClear({ clearable, multiline, focused, hasValue, disabled = fals
     }
 }
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","textarea":"hGr6YW4AeLM-","horizontalWrapper":"b5mv1x1H7YE-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","hasToolbar":"aPyUFddVSTc-","toolbarWrapper":"gZBJ3Xcpka4-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
     const affixLabelClass = classnames(styles$1.affixLabel, {
@@ -82,6 +82,7 @@ function ClearAction({ onClick, visible, }) {
 
 function useToolbar(props) {
     const isToolbarVisible = props.toolbar !== undefined &&
+        !props.disabled &&
         (props.toolbarVisibility === "always" || props.focused);
     const toolbarAnimationEnd = { opacity: 0, height: 0 };
     const toolbarAnimationStart = { opacity: 1, height: "auto" };
@@ -92,17 +93,10 @@ function useToolbar(props) {
     };
 }
 
-function useIsSafari() {
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator)
-        ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-        : false;
-}
-
 /**
  * Hook for getting the correct styles for the FormField and its children
  */
-function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, }) {
-    const isSafari = useIsSafari();
+function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, toolbar, }) {
     const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
         [styles$1.miniLabel]: (placeholder && value !== "") ||
             (placeholder && type === "select") ||
@@ -110,7 +104,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
             (placeholder && type === "tel"),
         [styles$1.text]: type === "textarea" || type === "text",
         [styles$1.textarea]: type === "textarea",
-        [styles$1.safari]: isSafari && type === "textarea",
+        [styles$1.hasToolbar]: toolbar && !disabled,
         [styles$1.select]: type === "select",
         [styles$1.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
         [styles$1.disabled]: disabled,
@@ -183,6 +177,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         disabled,
         inline,
         size,
+        toolbar,
     });
     const { focused } = useFormFieldFocus.useFormFieldFocus({ wrapperRef });
     const showClear = useShowClear_2({
@@ -194,6 +189,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
     });
     const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } = useToolbar({
         focused,
+        disabled,
         toolbar,
         toolbarVisibility,
     });
@@ -229,11 +225,11 @@ function FormFieldLabel({ placeholder, identifier, style, }) {
     return (React.createElement("label", { className: styles$1.label, htmlFor: identifier, style: style }, placeholder));
 }
 function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }) {
-    return (React.createElement(framerMotion.AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(framerMotion.motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
+    return (React.createElement(framerMotion.AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(framerMotion.motion.div, { key: "toolbar", className: styles$1.toolbarWrapper, initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
             duration: design.tokens["timing-base"] / 1000,
             ease: "easeInOut",
         }, tabIndex: -1 },
-        React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+        React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar", "data-elevation": "elevated" }, toolbar)))));
 }
 
 function FormFieldPostFix({ variation, visible = true, }) {

package/dist/FormField-es.js

@@ -31,7 +31,7 @@ function useShowClear({ clearable, multiline, focused, hasValue, disabled = fals
     }
 }
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","textarea":"hGr6YW4AeLM-","horizontalWrapper":"b5mv1x1H7YE-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","hasToolbar":"aPyUFddVSTc-","toolbarWrapper":"gZBJ3Xcpka4-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
     const affixLabelClass = classnames(styles$1.affixLabel, {
@@ -80,6 +80,7 @@ function ClearAction({ onClick, visible, }) {
 
 function useToolbar(props) {
     const isToolbarVisible = props.toolbar !== undefined &&
+        !props.disabled &&
         (props.toolbarVisibility === "always" || props.focused);
     const toolbarAnimationEnd = { opacity: 0, height: 0 };
     const toolbarAnimationStart = { opacity: 1, height: "auto" };
@@ -90,17 +91,10 @@ function useToolbar(props) {
     };
 }
 
-function useIsSafari() {
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator)
-        ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-        : false;
-}
-
 /**
  * Hook for getting the correct styles for the FormField and its children
  */
-function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, }) {
-    const isSafari = useIsSafari();
+function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, toolbar, }) {
     const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
         [styles$1.miniLabel]: (placeholder && value !== "") ||
             (placeholder && type === "select") ||
@@ -108,7 +102,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
             (placeholder && type === "tel"),
         [styles$1.text]: type === "textarea" || type === "text",
         [styles$1.textarea]: type === "textarea",
-        [styles$1.safari]: isSafari && type === "textarea",
+        [styles$1.hasToolbar]: toolbar && !disabled,
         [styles$1.select]: type === "select",
         [styles$1.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
         [styles$1.disabled]: disabled,
@@ -181,6 +175,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         disabled,
         inline,
         size,
+        toolbar,
     });
     const { focused } = useFormFieldFocus({ wrapperRef });
     const showClear = useShowClear_2({
@@ -192,6 +187,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
     });
     const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } = useToolbar({
         focused,
+        disabled,
         toolbar,
         toolbarVisibility,
     });
@@ -227,11 +223,11 @@ function FormFieldLabel({ placeholder, identifier, style, }) {
     return (React.createElement("label", { className: styles$1.label, htmlFor: identifier, style: style }, placeholder));
 }
 function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }) {
-    return (React.createElement(AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
+    return (React.createElement(AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(motion.div, { key: "toolbar", className: styles$1.toolbarWrapper, initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
             duration: tokens["timing-base"] / 1000,
             ease: "easeInOut",
         }, tabIndex: -1 },
-        React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+        React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar", "data-elevation": "elevated" }, toolbar)))));
 }
 
 function FormFieldPostFix({ variation, visible = true, }) {

package/dist/InputText-cjs.js

@@ -38,22 +38,12 @@ function InputTextInternal(props, ref) {
             }
         },
     }));
-    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
-        if (inputRef &&
-            inputRef.current instanceof HTMLTextAreaElement &&
-            wrapperRef &&
-            wrapperRef.current instanceof HTMLDivElement) {
-            resize(inputRef.current, wrapperRef.current);
-        }
-    }, [inputRef.current, wrapperRef.current]);
+    const resize = useAutoResize(inputRef, rowRange, props.value);
     return (React.createElement(FormField.FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
     function handleChange(newValue) {
         props.onChange && props.onChange(newValue);
-        if (inputRef &&
-            inputRef.current instanceof HTMLTextAreaElement &&
-            wrapperRef &&
-            (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
-            resize(inputRef.current, wrapperRef.current);
+        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
+            resize(inputRef.current);
         }
     }
     function getRowRange() {
@@ -67,25 +57,6 @@ function InputTextInternal(props, ref) {
             return { min: props.rows, max: props.rows };
         }
     }
-    function resize(textArea, wrapper) {
-        if (rowRange.min === rowRange.max)
-            return;
-        textArea.style.flexBasis = "auto";
-        wrapper.style.height = "auto";
-        textArea.style.flexBasis = textAreaHeight(textArea) + "px";
-    }
-    function textAreaHeight(textArea) {
-        const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
-        const maxHeight = rowRange.max * parseFloat(lineHeight) +
-            parseFloat(borderTopWidth) +
-            parseFloat(borderBottomWidth) +
-            parseFloat(paddingTop) +
-            parseFloat(paddingBottom);
-        const scrollHeight = textArea.scrollHeight +
-            parseFloat(borderTopWidth) +
-            parseFloat(borderBottomWidth);
-        return Math.min(scrollHeight, maxHeight);
-    }
     function insertText(text) {
         var _a;
         const input = inputRef.current;
@@ -108,5 +79,38 @@ function insertAtCursor(input, newText) {
     input.selectionStart = input.selectionEnd = start + newText.length;
     input.focus();
 }
+function useAutoResize(inputRef, rowRange, value) {
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
+            resize(inputRef.current);
+        }
+    }, [inputRef.current]);
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        setTimeout(() => {
+            if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
+                resize(inputRef.current);
+            }
+        }, 0);
+    }, [value]);
+    function resize(textArea) {
+        if (rowRange.min === rowRange.max)
+            return;
+        textArea.style.height = "auto";
+        textArea.style.height = textAreaHeight(textArea) + "px";
+    }
+    function textAreaHeight(textArea) {
+        const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
+        const maxHeight = rowRange.max * parseFloat(lineHeight) +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth) +
+            parseFloat(paddingTop) +
+            parseFloat(paddingBottom);
+        const scrollHeight = textArea.scrollHeight +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth);
+        return Math.min(scrollHeight, maxHeight);
+    }
+    return resize;
+}
 
 exports.InputText = InputText;

package/dist/InputText-es.js

@@ -36,22 +36,12 @@ function InputTextInternal(props, ref) {
             }
         },
     }));
-    useSafeLayoutEffect_1(() => {
-        if (inputRef &&
-            inputRef.current instanceof HTMLTextAreaElement &&
-            wrapperRef &&
-            wrapperRef.current instanceof HTMLDivElement) {
-            resize(inputRef.current, wrapperRef.current);
-        }
-    }, [inputRef.current, wrapperRef.current]);
+    const resize = useAutoResize(inputRef, rowRange, props.value);
     return (React.createElement(FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
     function handleChange(newValue) {
         props.onChange && props.onChange(newValue);
-        if (inputRef &&
-            inputRef.current instanceof HTMLTextAreaElement &&
-            wrapperRef &&
-            (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
-            resize(inputRef.current, wrapperRef.current);
+        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
+            resize(inputRef.current);
         }
     }
     function getRowRange() {
@@ -65,25 +55,6 @@ function InputTextInternal(props, ref) {
             return { min: props.rows, max: props.rows };
         }
     }
-    function resize(textArea, wrapper) {
-        if (rowRange.min === rowRange.max)
-            return;
-        textArea.style.flexBasis = "auto";
-        wrapper.style.height = "auto";
-        textArea.style.flexBasis = textAreaHeight(textArea) + "px";
-    }
-    function textAreaHeight(textArea) {
-        const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
-        const maxHeight = rowRange.max * parseFloat(lineHeight) +
-            parseFloat(borderTopWidth) +
-            parseFloat(borderBottomWidth) +
-            parseFloat(paddingTop) +
-            parseFloat(paddingBottom);
-        const scrollHeight = textArea.scrollHeight +
-            parseFloat(borderTopWidth) +
-            parseFloat(borderBottomWidth);
-        return Math.min(scrollHeight, maxHeight);
-    }
     function insertText(text) {
         var _a;
         const input = inputRef.current;
@@ -106,5 +77,38 @@ function insertAtCursor(input, newText) {
     input.selectionStart = input.selectionEnd = start + newText.length;
     input.focus();
 }
+function useAutoResize(inputRef, rowRange, value) {
+    useSafeLayoutEffect_1(() => {
+        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
+            resize(inputRef.current);
+        }
+    }, [inputRef.current]);
+    useSafeLayoutEffect_1(() => {
+        setTimeout(() => {
+            if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
+                resize(inputRef.current);
+            }
+        }, 0);
+    }, [value]);
+    function resize(textArea) {
+        if (rowRange.min === rowRange.max)
+            return;
+        textArea.style.height = "auto";
+        textArea.style.height = textAreaHeight(textArea) + "px";
+    }
+    function textAreaHeight(textArea) {
+        const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
+        const maxHeight = rowRange.max * parseFloat(lineHeight) +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth) +
+            parseFloat(paddingTop) +
+            parseFloat(paddingBottom);
+        const scrollHeight = textArea.scrollHeight +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth);
+        return Math.min(scrollHeight, maxHeight);
+    }
+    return resize;
+}
 
 export { InputText as I };

package/dist/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 export interface PopoverProps {
     /**
      * Element the Popover will attach to and point at. A `useRef` must be attached to an html element
@@ -22,5 +22,25 @@ export interface PopoverProps {
      * @default 'auto'
      */
     readonly preferredPlacement?: "top" | "bottom" | "left" | "right" | "auto";
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+        dismissButtonContainer?: string;
+        arrow?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+        dismissButtonContainer?: CSSProperties;
+        arrow?: CSSProperties;
+    };
 }
-export declare function Popover({ onRequestClose, children, attachTo, open, preferredPlacement, }: PopoverProps): JSX.Element;
+export declare function Popover({ onRequestClose, children, attachTo, open, preferredPlacement, UNSAFE_className, UNSAFE_style, }: PopoverProps): JSX.Element;

package/dist/Popover/index.cjs

@@ -4,9 +4,9 @@ var Popover = require('../Popover-cjs.js');
 require('react');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
+require('classnames');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
-require('classnames');
 require('react-router-dom');
 require('../Icon-cjs.js');
 require('@jobber/design');

package/dist/Popover/index.mjs

@@ -2,9 +2,9 @@ export { P as Popover } from '../Popover-es.js';
 import 'react';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
+import 'classnames';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
-import 'classnames';
 import 'react-router-dom';
 import '../Icon-es.js';
 import '@jobber/design';

package/dist/Popover-cjs.js

@@ -3,11 +3,13 @@
 var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
+var classnames = require('classnames');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
 
-function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
+function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    var _a, _b, _c;
     const [popperElement, setPopperElement] = React.useState();
     const [arrowElement, setArrowElement] = React.useState();
     const { styles: popperStyles, attributes } = reactPopper.usePopper(isHTMLElement(attachTo) ? attachTo : attachTo.current, popperElement, {
@@ -15,11 +17,14 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
         placement: preferredPlacement,
     });
     useRefocusOnActivator.useRefocusOnActivator_2(open);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
-        React.createElement("div", { className: classes.dismissButton },
+    const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
+    const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
+    const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
+    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+        React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/Popover-es.js

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import classnames from 'classnames';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
 
-function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
+function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    var _a, _b, _c;
     const [popperElement, setPopperElement] = useState();
     const [arrowElement, setArrowElement] = useState();
     const { styles: popperStyles, attributes } = usePopper(isHTMLElement(attachTo) ? attachTo : attachTo.current, popperElement, {
@@ -13,11 +15,14 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
         placement: preferredPlacement,
     });
     useRefocusOnActivator_2(open);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
-        React.createElement("div", { className: classes.dismissButton },
+    const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
+    const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
+    const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
+    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+        React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/styles.css

@@ -711,6 +711,10 @@
   box-sizing: border-box;
 }
 
+._8lhbGTQ-hhg-.hGr6YW4AeLM- {
+  overflow: hidden;
+}
+
 ._8lhbGTQ-hhg-:focus-within {
   position: relative;
   z-index: var(--field--base-elevation);
@@ -726,10 +730,6 @@
       flex: 1;
 }
 
-.hGr6YW4AeLM-.QBCWi9GBgMs- .b5mv1x1H7YE- {
-  margin-right: var(--field--padding-right);
-}
-
 ._0pmqVa2zSE4-:not(:focus-within) input {
   color: var(--field--background-color);
   -webkit-text-fill-color: var(--field--background-color);
@@ -755,11 +755,6 @@
   min-height: auto;
 }
 
-._8lhbGTQ-hhg-.hGr6YW4AeLM- {
-  resize: vertical;
-  overflow: auto;
-}
-
 .XWDSfe6weSY-,
 .XWDSfe6weSY-:focus-within {
   --field--border-color: var(--color-critical);
@@ -769,8 +764,8 @@
 .Tz9LK9ABKMk- {
   --field--placeholder-color: var(--color-disabled);
   --field--value-color: var(--color-disabled);
-  --field--background-color: var(--color-surface--background);
-  --field--border-color: var(--color-disabled--secondary);
+  --field--background-color: var(--color-disabled--secondary);
+  --field--border-color: var(--color-border);
 }
 
 /* override iOS default styling for disabled input */
@@ -889,11 +884,8 @@
 }
 
 .hGr6YW4AeLM- .vtSDcuzNr9Q- {
-  -ms-flex: 1;
-      flex: 1;
-  resize: none;
-  scroll-padding-bottom: 16px;
-  scroll-padding-bottom: var(--space-base);
+  height: auto;
+  resize: vertical;
   padding-top: 0;
 }
 
@@ -913,10 +905,6 @@
     padding-top: var(--field--padding-top);
   }
 
-.hGr6YW4AeLM-.QBCWi9GBgMs- .vtSDcuzNr9Q- {
-  padding-right: 0;
-}
-
 /**
  * Label
  **/
@@ -975,6 +963,8 @@
 }
 
 .hGr6YW4AeLM-.F1t76G6bDKo- .Dgk00tzlODA- {
+  border-radius: 8px;
+  border-radius: var(--radius-base);
   background-color: var(--field--background-color);
 }
 
@@ -1062,30 +1052,35 @@
   margin-top: var(--space-smaller);
 }
 
-.AL-2brNI7dk- {
-  display: -ms-flexbox;
-  display: flex;
+._8lhbGTQ-hhg-.aPyUFddVSTc- {
   position: relative;
-  margin: 8px var(--field--padding-right) 16px
-    var(--field--padding-left);
-  margin: var(--space-small) var(--field--padding-right) var(--space-base)
-    var(--field--padding-left);
+  overflow: visible;
 }
 
-.AL-2brNI7dk-::before {
-  content: "";
-  display: block;
+.gZBJ3Xcpka4- {
   position: absolute;
-  top: calc(-1.25 * 16px);
-  top: calc(-1.25 * var(--space-base));
-  right: 0;
-  left: 0;
+  top: 100%;
+  right: calc(1px * -1);
+  right: calc(var(--border-base) * -1);
+  left: calc(1px * -1);
+  left: calc(var(--border-base) * -1);
   z-index: 1;
-  z-index: var(--elevation-base);
-  height: 16px;
-  height: var(--space-base);
-  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1) 60%);
-  background: linear-gradient(to bottom, transparent, var(--color-surface) 60%);
+}
+
+.AL-2brNI7dk- {
+  display: -ms-flexbox;
+  display: flex;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-base);
+  margin-top: 8px;
+  margin-top: var(--space-small);
+  padding: 8px;
+  padding: var(--space-small);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
 }
 
 :root {
@@ -1444,8 +1439,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border: none;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--background);
+  background-color: hsl(51, 17%, 85%);
+  background-color: var(--color-interactive--background);
   cursor: pointer;
   -ms-flex-pack: center;
       justify-content: center;
@@ -1462,8 +1457,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .YmRTd-KeXv4-:hover,
 .YmRTd-KeXv4-:focus-visible {
   outline: none;
-  background-color: hsl(51, 17%, 85%);
-  background-color: var(--color-surface--background--hover);
+  background-color: hsl(49, 7%, 70%);
+  background-color: var(--color-interactive--background--hover);
 }
 
 .YmRTd-KeXv4-:focus-visible {
@@ -2735,8 +2730,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 :root {
-  --public-chip-base-bg-color: var(--color-surface--background);
-  --public-chip-base-hover-bg-color: var(--color-surface--background--hover);
+  --public-chip-base-bg-color: var(--color-interactive--background);
+  --public-chip-base-hover-bg-color: var(
+    --color-interactive--background--hover
+  );
   --public-chip-base-content-color: var(--color-heading);
 }
 
@@ -2763,7 +2760,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: hsl(197, 90%, 12%);
   color: var(--color-heading);
   text-align: left;
-  background-color: hsl(53, 21%, 93%);
+  background-color: hsl(51, 17%, 85%);
   background-color: var(--chip-base-bg-color);
   cursor: pointer;
   transition: all 200ms;
@@ -2880,7 +2877,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .ln-ky9jFiLI-.CMvHum0PGzY-:hover,
 .ln-ky9jFiLI-.CMvHum0PGzY-:focus-visible {
   --chip-border-color: var(--color-critical);
-  --chip-base-hover-bg-color: var(--color-surface--background--hover);
+  --chip-base-hover-bg-color: var(--color-interactive--background--hover);
 }
 
 .ln-ky9jFiLI- {
@@ -2893,7 +2890,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .ln-ky9jFiLI-:focus-visible,
 .ln-ky9jFiLI-:hover {
   --chip-border-color: var(--chip-base-bg-color);
-  --chip-base-hover-bg-color: var(--color-surface--background);
+  --chip-base-hover-bg-color: var(--color-interactive--background);
 }
 
 .CMvHum0PGzY-._3uJEejbZvig-,
@@ -3015,14 +3012,14 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .ulLzwMsQL3U-._3LLjp8oIxJ0-:focus-visible ~ div[role="option"],
 .ulLzwMsQL3U-._3LLjp8oIxJ0-:focus-visible ~ div[role="button"] {
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--background);
+  background-color: hsl(51, 17%, 85%);
+  background-color: var(--color-interactive--background);
 }
 
 .ulLzwMsQL3U-.H7VZzUBkgjk-:focus-visible ~ div[role="option"],
 .ulLzwMsQL3U-.H7VZzUBkgjk-:focus-visible ~ div[role="button"] {
-  background-color: hsl(51, 17%, 85%);
-  background-color: var(--color-surface--background--hover);
+  background-color: hsl(49, 7%, 70%);
+  background-color: var(--color-interactive--background--hover);
 }
 
 .ulLzwMsQL3U-.-yQxZSnxBBU-:focus-visible ~ div[role="option"],
@@ -3439,8 +3436,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border: none;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--background);
+  background-color: hsl(51, 17%, 85%);
+  background-color: var(--color-interactive--background);
   cursor: pointer;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
@@ -5384,8 +5381,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .vWFyXrAaFtQ-:hover,
 .vWFyXrAaFtQ-:hover :first-child {
-  background: hsl(53, 21%, 93%);
-  background: var(--color-surface--background);
+  background: var(--color-surface--element);
   cursor: pointer;
 }
 
@@ -6223,8 +6219,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border-radius: 0;
   color: hsl(198, 35%, 21%);
   color: var(--color-text);
-  background: hsl(53, 21%, 93%);
-  background: var(--color-surface--background);
+  background: hsl(51, 17%, 85%);
+  background: var(--color-interactive--background);
 }
 .Ma55F5Y-XhE- .react-datepicker__day--disabled {
   color: hsl(0, 0%, 72%);
@@ -6268,8 +6264,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 .Ma55F5Y-XhE- .react-datepicker__day--outside-month:hover,
 .Ma55F5Y-XhE- .react-datepicker__day--outside-month:focus {
-  background: hsl(51, 17%, 85%);
-  background: var(--color-surface--background--hover);
+  background: hsl(49, 7%, 70%);
+  background: var(--color-interactive--background--hover);
 }
 .Ma55F5Y-XhE- .react-datepicker__day:focus {
   position: relative;
@@ -6881,8 +6877,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   box-sizing: border-box;
   padding: 0;
   overflow: hidden;
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--background);
+  background-color: hsl(51, 17%, 85%);
+  background-color: var(--color-interactive--background);
   -ms-flex-negative: 0;
       flex-shrink: 0;
   -ms-flex-align: center;
@@ -7110,8 +7106,8 @@ progress.p9AgTzIbTwY-[value]::-webkit-progress-bar {
 }
 
 progress.p9AgTzIbTwY-[value]::-webkit-progress-bar {
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--background);
+  background-color: hsl(51, 17%, 85%);
+  background-color: var(--color-interactive--background);
 }
 
 progress.p9AgTzIbTwY-[value]::-webkit-progress-value {
@@ -7647,8 +7643,8 @@ html.atlantisLightBoxActive {
 
 .h6M4H38O32Y-:hover > *,
 .h6M4H38O32Y-:focus > * {
-  background-color: hsl(51, 17%, 85%);
-  background-color: var(--color-surface--background--hover);
+  background-color: hsl(49, 7%, 70%);
+  background-color: var(--color-interactive--background--hover);
 }
 
 /* TODO: Move truncate in typography */
@@ -8251,8 +8247,8 @@ html.atlantisLightBoxActive {
 .XGjk9DHJAmw-:disabled + .zulupkPyEs8- {
   color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
-  background: hsl(53, 21%, 93%);
-  background: var(--color-surface--background);
+  background: hsl(0, 0%, 93%);
+  background: var(--color-disabled--secondary);
   cursor: default;
 }
 
@@ -8404,8 +8400,8 @@ html.atlantisLightBoxActive {
   border: var(--border-base) solid var(--color-border--interactive);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--background);
+  background-color: hsl(51, 17%, 85%);
+  background-color: var(--color-interactive--background);
 }
 
 .V41prM1xcKI- {

package/dist/useResponsiveSizing-es.js

@@ -1,5 +1,5 @@
 import { useCallback, useSyncExternalStore } from 'react';
-import { e as BREAKPOINT_SIZES } from './DataList.const-es.js';
+import { f as BREAKPOINT_SIZES } from './DataList.const-es.js';
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.9.0",
+  "version": "6.9.1-CLEANUPau-2d4ca7d.34+2d4ca7db",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -487,5 +487,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e3061144a300e82ee790f5c7d99f90e8e21adfc0"
+  "gitHead": "2d4ca7dbe73e0ea7d7b146f4b4e213d51d1203bb"
 }

package/dist/FormField/hooks/useIsSafari.d.ts

@@ -1 +0,0 @@
-export declare function useIsSafari(): boolean;