@jobber/components 6.85.2 → 6.85.3-CLEANUPre-6d043f4.28

package/dist/Disclosure/index.cjs

@@ -3,12 +3,7 @@
 var Disclosure = require('../Disclosure-cjs.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../throttle-cjs.js');
-require('../debounce-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
+require('@jobber/hooks');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');

package/dist/Disclosure/index.mjs

@@ -1,12 +1,7 @@
 export { D as Disclosure } from '../Disclosure-es.js';
 import 'react';
 import 'classnames';
-import '../useResizeObserver-es.js';
-import '../_commonjsHelpers-es.js';
-import '../throttle-es.js';
-import '../debounce-es.js';
-import '../isObjectLike-es.js';
-import '../isSymbol-es.js';
+import '@jobber/hooks';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';

package/dist/Disclosure-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var Icon = require('./Icon-cjs.js');
 var Typography = require('./Typography-cjs.js');
 
@@ -12,8 +12,8 @@ function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSA
     var _a, _b, _c, _d;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen || open || false);
     const isOpen = open !== undefined ? open : internalOpen;
-    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver.useResizeObserver();
-    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.useResizeObserver.Breakpoints.small;
+    const [titleRef, { exactWidth }] = jobberHooks.useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < jobberHooks.Breakpoints.small;
     const isTitleString = typeof title === "string";
     const containerClassNames = classnames(styles.details, UNSAFE_className.container);
     const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);

package/dist/Disclosure-es.js

@@ -1,6 +1,6 @@
 import React__default, { useState } from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { I as Icon } from './Icon-es.js';
 import { T as Typography } from './Typography-es.js';
 
@@ -10,8 +10,8 @@ function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSA
     var _a, _b, _c, _d;
     const [internalOpen, setInternalOpen] = useState(defaultOpen || open || false);
     const isOpen = open !== undefined ? open : internalOpen;
-    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver();
-    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
+    const [titleRef, { exactWidth }] = useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < Breakpoints.small;
     const isTitleString = typeof title === "string";
     const containerClassNames = classnames(styles.details, UNSAFE_className.container);
     const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);

package/dist/FeatureSwitch/index.cjs

@@ -16,7 +16,7 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Emphasis-cjs.js');
 require('../Markdown-cjs.js');
-require('../index-cjs.js');
+require('react/jsx-runtime');
 require('../_commonjsHelpers-cjs.js');
 
 

package/dist/FeatureSwitch/index.mjs

@@ -14,5 +14,5 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Emphasis-es.js';
 import '../Markdown-es.js';
-import '../index-es.js';
+import 'react/jsx-runtime';
 import '../_commonjsHelpers-es.js';

package/dist/FormField/FormFieldWrapper.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren, ReactNode } from "react";
 import React from "react";
-import type { Clearable } from "@jobber/hooks/useShowClear";
+import type { Clearable } from "@jobber/hooks";
 import type { FormFieldProps } from "./FormFieldTypes";
 export interface FormFieldWrapperProps extends FormFieldProps {
     readonly error: string;

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

@@ -9,6 +9,7 @@ export declare function useAtlantisReactHookForm({ actionsRef, name, defaultValu
     inputRefs: import("react").RefCallback<any>;
     useControllerField: {
         value: any;
+        disabled?: boolean;
         name: string;
     };
     setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues>;

package/dist/FormField/index.cjs

@@ -2,6 +2,7 @@
 
 var FormField = require('../FormField-cjs.js');
 require('react');
+require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('classnames');

package/dist/FormField/index.mjs

@@ -1,5 +1,6 @@
 export { A as AffixIcon, i as AffixLabel, k as FormField, F as FormFieldInputHorizontalWrapper, d as FormFieldInputWrapperStyles, e as FormFieldLabel, f as FormFieldWrapper, g as FormFieldWrapperMain, h as FormFieldWrapperToolbar, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisFormFieldName, c as useAtlantisReactHookForm, j as useFormFieldWrapperStyles } from '../FormField-es.js';
 import 'react';
+import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import 'classnames';

package/dist/FormField-cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var jobberHooks = require('@jobber/hooks');
 var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
 var classnames = require('classnames');
@@ -13,26 +14,6 @@ var Spinner = require('./Spinner-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var reactHookForm = require('react-hook-form');
 
-var useShowClear$1 = {};
-
-Object.defineProperty(useShowClear$1, "__esModule", { value: true });
-var useShowClear_2 = useShowClear$1.useShowClear = useShowClear;
-function useShowClear({ clearable, multiline, focused, hasValue, readonly, disabled = false, }) {
-    if (multiline && clearable !== "never") {
-        throw new Error("Multiline inputs can not be clearable");
-    }
-    // Do not show if there is no value
-    if (!hasValue || clearable === "never" || disabled || readonly) {
-        return false;
-    }
-    switch (clearable) {
-        case "while-editing":
-            return focused;
-        case "always":
-            return true;
-    }
-}
-
 var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
@@ -188,7 +169,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         showMiniLabel,
     });
     const { focused } = useFormFieldFocus.useFormFieldFocus({ wrapperRef });
-    const showClear = useShowClear_2({
+    const showClear = jobberHooks.useShowClear({
         clearable,
         multiline: type === "textarea",
         focused,

package/dist/FormField-es.js

@@ -1,4 +1,5 @@
 import React__default, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react';
+import { useShowClear } from '@jobber/hooks';
 import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@jobber/design';
 import classnames from 'classnames';
@@ -11,26 +12,6 @@ import { S as Spinner } from './Spinner-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { useFormContext, useForm, useController } from 'react-hook-form';
 
-var useShowClear$1 = {};
-
-Object.defineProperty(useShowClear$1, "__esModule", { value: true });
-var useShowClear_2 = useShowClear$1.useShowClear = useShowClear;
-function useShowClear({ clearable, multiline, focused, hasValue, readonly, disabled = false, }) {
-    if (multiline && clearable !== "never") {
-        throw new Error("Multiline inputs can not be clearable");
-    }
-    // Do not show if there is no value
-    if (!hasValue || clearable === "never" || disabled || readonly) {
-        return false;
-    }
-    switch (clearable) {
-        case "while-editing":
-            return focused;
-        case "always":
-            return true;
-    }
-}
-
 var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
@@ -186,7 +167,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         showMiniLabel,
     });
     const { focused } = useFormFieldFocus({ wrapperRef });
-    const showClear = useShowClear_2({
+    const showClear = useShowClear({
         clearable,
         multiline: type === "textarea",
         focused,

package/dist/FormatFile/index.cjs

@@ -16,17 +16,16 @@ require('../ProgressBar-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../ConfirmationModal-cjs.js');
-require('../useOnKeyDown-cjs.js');
+require('@jobber/hooks');
 require('../Modal/index.cjs');
 require('react-dom');
 require('framer-motion');
-require('../useRefocusOnActivator-cjs.js');
-require('../useFocusTrap-cjs.js');
 require('../Heading-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../noop-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../floating-ui.react-cjs.js');
+require('react/jsx-runtime');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
@@ -39,7 +38,6 @@ require('../_isIterateeCall-cjs.js');
 require('../_setToString-cjs.js');
 require('../Markdown-cjs.js');
 require('../Emphasis-cjs.js');
-require('../index-cjs.js');
 
 
 

package/dist/FormatFile/index.mjs

@@ -14,17 +14,16 @@ import '../ProgressBar-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../ConfirmationModal-es.js';
-import '../useOnKeyDown-es.js';
+import '@jobber/hooks';
 import '../Modal/index.mjs';
 import 'react-dom';
 import 'framer-motion';
-import '../useRefocusOnActivator-es.js';
-import '../useFocusTrap-es.js';
 import '../Heading-es.js';
 import '../ButtonDismiss-es.js';
 import '../noop-es.js';
 import '../_commonjsHelpers-es.js';
 import '../floating-ui.react-es.js';
+import 'react/jsx-runtime';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
@@ -37,4 +36,3 @@ import '../_isIterateeCall-es.js';
 import '../_setToString-es.js';
 import '../Markdown-es.js';
 import '../Emphasis-es.js';
-import '../index-es.js';

package/dist/Gallery/index.cjs

@@ -7,12 +7,7 @@ require('classnames');
 require('../LightBox-cjs.js');
 require('framer-motion');
 require('react-dom');
-require('../useRefocusOnActivator-cjs.js');
-require('../useOnKeyDown-cjs.js');
-require('../useFocusTrap-cjs.js');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
-require('../useDebounce-cjs.js');
+require('@jobber/hooks');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
@@ -41,10 +36,10 @@ require('../ConfirmationModal-cjs.js');
 require('../Modal/index.cjs');
 require('../noop-cjs.js');
 require('../floating-ui.react-cjs.js');
+require('react/jsx-runtime');
 require('../AtlantisPortalContent-cjs.js');
 require('../Markdown-cjs.js');
 require('../Emphasis-cjs.js');
-require('../index-cjs.js');
 
 
 

package/dist/Gallery/index.mjs

@@ -5,12 +5,7 @@ import 'classnames';
 import '../LightBox-es.js';
 import 'framer-motion';
 import 'react-dom';
-import '../useRefocusOnActivator-es.js';
-import '../useOnKeyDown-es.js';
-import '../useFocusTrap-es.js';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
-import '../useDebounce-es.js';
+import '@jobber/hooks';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
@@ -39,7 +34,7 @@ import '../ConfirmationModal-es.js';
 import '../Modal/index.mjs';
 import '../noop-es.js';
 import '../floating-ui.react-es.js';
+import 'react/jsx-runtime';
 import '../AtlantisPortalContent-es.js';
 import '../Markdown-es.js';
 import '../Emphasis-es.js';
-import '../index-es.js';

package/dist/Heading/Heading.d.ts

@@ -3,6 +3,12 @@ import React from "react";
 import type { TypographyOptions, TypographyProps } from "../Typography";
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface HeadingProps {
+    /**
+     * Adds a unique identifier to the heading.
+     * Useful when the heading needs to be referenced by another element.
+     * Not intended for styling.
+     */
+    readonly id?: string;
     /**
      * @default 5
      */
@@ -31,5 +37,5 @@ export interface HeadingProps {
     readonly UNSAFE_style?: TypographyProps["UNSAFE_style"];
 }
 export type LevelMap = Record<HeadingLevel, TypographyOptions>;
-export declare function Heading({ level, children, element, maxLines, UNSAFE_className, UNSAFE_style, }: HeadingProps): React.JSX.Element;
+export declare function Heading({ id, level, children, element, maxLines, UNSAFE_className, UNSAFE_style, }: HeadingProps): React.JSX.Element;
 export {};

package/dist/Heading-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var Typography = require('./Typography-cjs.js');
 
-function Heading({ level = 5, children, element, maxLines = "unlimited", UNSAFE_className, UNSAFE_style, }) {
+function Heading({ id, level = 5, children, element, maxLines = "unlimited", UNSAFE_className, UNSAFE_style, }) {
     const levelMap = {
         1: {
             element: "h1",
@@ -51,7 +51,7 @@ function Heading({ level = 5, children, element, maxLines = "unlimited", UNSAFE_
         larger: 16,
         unlimited: undefined,
     };
-    return (React.createElement(Typography.Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element, numberOfLines: maxLineToNumber[maxLines], UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
+    return (React.createElement(Typography.Typography, Object.assign({ id: id }, levelMap[level], { element: element || levelMap[level].element, numberOfLines: maxLineToNumber[maxLines], UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
 }
 
 exports.Heading = Heading;

package/dist/Heading-es.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { T as Typography } from './Typography-es.js';
 
-function Heading({ level = 5, children, element, maxLines = "unlimited", UNSAFE_className, UNSAFE_style, }) {
+function Heading({ id, level = 5, children, element, maxLines = "unlimited", UNSAFE_className, UNSAFE_style, }) {
     const levelMap = {
         1: {
             element: "h1",
@@ -49,7 +49,7 @@ function Heading({ level = 5, children, element, maxLines = "unlimited", UNSAFE_
         larger: 16,
         unlimited: undefined,
     };
-    return (React__default.createElement(Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element, numberOfLines: maxLineToNumber[maxLines], UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
+    return (React__default.createElement(Typography, Object.assign({ id: id }, levelMap[level], { element: element || levelMap[level].element, numberOfLines: maxLineToNumber[maxLines], UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
 }
 
 export { Heading as H };

package/dist/InlineLabel/InlineLabel.d.ts

@@ -6,7 +6,7 @@ interface InlineLabelProps {
      * The size of the label
      * @default base
      */
-    readonly size?: "base" | "large" | "larger";
+    readonly size?: "small" | "base" | "large" | "larger";
     /**
      * The color of the label
      * @default "greyBlue"

package/dist/InlineLabel-cjs.js

@@ -4,11 +4,12 @@ var React = require('react');
 var classnames = require('classnames');
 var Typography = require('./Typography-cjs.js');
 
-var styles = {"inlineLabel":"M01SZy5EYFg-","base":"_0L5DuoQQ0N0-","large":"QKOUUH9-Fho-","larger":"GdJFaAMVrfU-","greyBlue":"_1KuDugNaT-o-","red":"bHju-S5Uytc-","orange":"hk1-OlPzFpM-","green":"ekQbbiBSxKk-","success":"YBvJuPW-YEI-","blue":"_5X5w6s0pPdw-","inactive":"lju-nyF9vX0-","navy":"nMlCD9k-Meg-","task":"HVMpHULM2PU-","yellow":"hOJmavXturw-","warning":"kfXKagw-wdE-","lime":"ZrdNg5b18oY-","purple":"df-Q7pKd2iI-","invoice":"WE3Qy5JUsN4-","pink":"-Wiy2k-i7tQ-","quote":"NoDP1qZvkds-","teal":"gc8t5abqWH4-","yellowGreen":"SeLhnnpqK70-","job":"L9FK1YwwCB8-","blueDark":"PZdC-xYFPok-","lightBlue":"_3JD9CXbxRQ8-","informative":"R-kgbH6qPZU-","indigo":"_6juDApQlcS0-","request":"MGcsvmjHlow-","spinning":"dre73387JG8-"};
+var styles = {"inlineLabel":"M01SZy5EYFg-","small":"_8nqeeAapUQU-","base":"_0L5DuoQQ0N0-","large":"QKOUUH9-Fho-","larger":"GdJFaAMVrfU-","greyBlue":"_1KuDugNaT-o-","red":"bHju-S5Uytc-","orange":"hk1-OlPzFpM-","green":"ekQbbiBSxKk-","success":"YBvJuPW-YEI-","blue":"_5X5w6s0pPdw-","inactive":"lju-nyF9vX0-","navy":"nMlCD9k-Meg-","task":"HVMpHULM2PU-","yellow":"hOJmavXturw-","warning":"kfXKagw-wdE-","lime":"ZrdNg5b18oY-","purple":"df-Q7pKd2iI-","invoice":"WE3Qy5JUsN4-","pink":"-Wiy2k-i7tQ-","quote":"NoDP1qZvkds-","teal":"gc8t5abqWH4-","yellowGreen":"SeLhnnpqK70-","job":"L9FK1YwwCB8-","blueDark":"PZdC-xYFPok-","lightBlue":"_3JD9CXbxRQ8-","informative":"R-kgbH6qPZU-","indigo":"_6juDApQlcS0-","request":"MGcsvmjHlow-","spinning":"dre73387JG8-"};
 
 function InlineLabel({ size = "base", color = "greyBlue", children, }) {
     const className = classnames(styles.inlineLabel, styles[size], styles[color]);
     const sizeMapper = {
+        small: "smaller",
         base: "small",
         large: "large",
         larger: "large",

package/dist/InlineLabel-es.js

@@ -2,11 +2,12 @@ import React__default from 'react';
 import classnames from 'classnames';
 import { T as Typography } from './Typography-es.js';
 
-var styles = {"inlineLabel":"M01SZy5EYFg-","base":"_0L5DuoQQ0N0-","large":"QKOUUH9-Fho-","larger":"GdJFaAMVrfU-","greyBlue":"_1KuDugNaT-o-","red":"bHju-S5Uytc-","orange":"hk1-OlPzFpM-","green":"ekQbbiBSxKk-","success":"YBvJuPW-YEI-","blue":"_5X5w6s0pPdw-","inactive":"lju-nyF9vX0-","navy":"nMlCD9k-Meg-","task":"HVMpHULM2PU-","yellow":"hOJmavXturw-","warning":"kfXKagw-wdE-","lime":"ZrdNg5b18oY-","purple":"df-Q7pKd2iI-","invoice":"WE3Qy5JUsN4-","pink":"-Wiy2k-i7tQ-","quote":"NoDP1qZvkds-","teal":"gc8t5abqWH4-","yellowGreen":"SeLhnnpqK70-","job":"L9FK1YwwCB8-","blueDark":"PZdC-xYFPok-","lightBlue":"_3JD9CXbxRQ8-","informative":"R-kgbH6qPZU-","indigo":"_6juDApQlcS0-","request":"MGcsvmjHlow-","spinning":"dre73387JG8-"};
+var styles = {"inlineLabel":"M01SZy5EYFg-","small":"_8nqeeAapUQU-","base":"_0L5DuoQQ0N0-","large":"QKOUUH9-Fho-","larger":"GdJFaAMVrfU-","greyBlue":"_1KuDugNaT-o-","red":"bHju-S5Uytc-","orange":"hk1-OlPzFpM-","green":"ekQbbiBSxKk-","success":"YBvJuPW-YEI-","blue":"_5X5w6s0pPdw-","inactive":"lju-nyF9vX0-","navy":"nMlCD9k-Meg-","task":"HVMpHULM2PU-","yellow":"hOJmavXturw-","warning":"kfXKagw-wdE-","lime":"ZrdNg5b18oY-","purple":"df-Q7pKd2iI-","invoice":"WE3Qy5JUsN4-","pink":"-Wiy2k-i7tQ-","quote":"NoDP1qZvkds-","teal":"gc8t5abqWH4-","yellowGreen":"SeLhnnpqK70-","job":"L9FK1YwwCB8-","blueDark":"PZdC-xYFPok-","lightBlue":"_3JD9CXbxRQ8-","informative":"R-kgbH6qPZU-","indigo":"_6juDApQlcS0-","request":"MGcsvmjHlow-","spinning":"dre73387JG8-"};
 
 function InlineLabel({ size = "base", color = "greyBlue", children, }) {
     const className = classnames(styles.inlineLabel, styles[size], styles[color]);
     const sizeMapper = {
+        small: "smaller",
         base: "small",
         large: "large",
         larger: "large",

package/dist/InputDate/InputDate.types.d.ts

@@ -53,16 +53,4 @@ export interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">,
      * Text to display instead of a date value
      */
     readonly emptyValueLabel?: string;
-    /**
-     * Experimental:
-     * Whether to replace empty/invalid values with the original value on blur.
-     *
-     * This solves an immediate UX problem and is likely to change in the future.
-     * It prevents the input from retaining empty/invalid values when the user tabs
-     * into it, clears the value, and tabs away. In this scenario, the original
-     * value will be restored.
-     *
-     * @default false
-     */
-    readonly restoreLastValueOnBlur?: boolean;
 }

package/dist/InputDate/index.cjs

@@ -2,14 +2,15 @@
 
 var React = require('react');
 var omit = require('../omit-cjs.js');
-var DatePicker = require('../DatePicker-cjs.js');
 var FormField = require('../FormField-cjs.js');
 require('classnames');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
+require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
+var DatePicker = require('../DatePicker-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
 require('../_commonjsHelpers-cjs.js');
 require('../_baseGet-cjs.js');
@@ -22,23 +23,23 @@ require('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
-require('../index-cjs.js');
-require('react-dom');
-require('../useRefocusOnActivator-cjs.js');
-require('../Typography-cjs.js');
-require('../AtlantisContext-cjs.js');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');
+require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-router-dom');
-require('../useSafeLayoutEffect-cjs.js');
+require('../clsx-cjs.js');
+require('../floating-ui.react-cjs.js');
+require('react/jsx-runtime');
+require('react-dom');
+require('../AtlantisContext-cjs.js');
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = React.useRef(null);
     return (React.createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-            const { onChange, onClick, value, pickerRef } = activatorProps;
+            const { onChange, onClick, value } = activatorProps;
             const newActivatorProps = omit.omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = React.useState(false);
             const suffix = inputProps.showIcon !== false
@@ -61,31 +62,9 @@ function InputDate$1(inputProps) {
                 React.createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                         onChange && onChange(event);
                     }, onBlur: () => {
-                        var _a;
                         inputProps.onBlur && inputProps.onBlur();
                         activatorProps.onBlur && activatorProps.onBlur();
                         setIsFocused(false);
-                        /**
-                         * This is an experimental workaround to solve a specific UX problem we have under certain conditions.
-                         * When you click to focus InputDate, ReactDatePicker becomes visible. If you delete the current date and blur
-                         * the input field by clicking away, ReactDatePicker will automatically set the date to whatever date was
-                         * currently selected.
-                         *
-                         * The above works great and is the expected user experience. ReactDatePicker fills in the empty value for us.
-                         *
-                         * However, there's a specific scenario where ReactDatePicker isn't visible: when you tab into the input date.
-                         * When you tab into it, clear the value, and tab away to blur, ReactDatePicker doesn't automatically fill in
-                         * the empty value because it wasn't visible/active.
-                         *
-                         * To solve this, we need to handle the blur event here and check if the value is empty or invalid. If it is,
-                         * we have to call onChange with the original input value which informs ReactDatePicker that is the current value.
-                         */
-                        if (inputProps.restoreLastValueOnBlur) {
-                            if ((!value || !DatePicker.isValid(value)) && inputProps.value) {
-                                // @ts-expect-error -- ReactDatePicker types don't include setSelected
-                                (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setSelected(inputProps.value);
-                            }
-                        }
                     }, onFocus: () => {
                         inputProps.onFocus && inputProps.onFocus();
                         activatorProps.onFocus && activatorProps.onFocus();

package/dist/InputDate/index.mjs

@@ -1,13 +1,14 @@
 import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
 import { o as omit } from '../omit-es.js';
-import { D as DatePicker, i as isValid } from '../DatePicker-es.js';
 import { k as FormField } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
+import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
+import { D as DatePicker } from '../DatePicker-es.js';
 import { InputText } from '../InputText/index.mjs';
 import '../_commonjsHelpers-es.js';
 import '../_baseGet-es.js';
@@ -20,23 +21,23 @@ import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
-import '../index-es.js';
-import 'react-dom';
-import '../useRefocusOnActivator-es.js';
-import '../Typography-es.js';
-import '../AtlantisContext-es.js';
 import '../Icon-es.js';
 import '../Text-es.js';
+import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-router-dom';
-import '../useSafeLayoutEffect-es.js';
+import '../clsx-es.js';
+import '../floating-ui.react-es.js';
+import 'react/jsx-runtime';
+import 'react-dom';
+import '../AtlantisContext-es.js';
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = useRef(null);
     return (React__default.createElement(DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-            const { onChange, onClick, value, pickerRef } = activatorProps;
+            const { onChange, onClick, value } = activatorProps;
             const newActivatorProps = omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = useState(false);
             const suffix = inputProps.showIcon !== false
@@ -59,31 +60,9 @@ function InputDate$1(inputProps) {
                 React__default.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                         onChange && onChange(event);
                     }, onBlur: () => {
-                        var _a;
                         inputProps.onBlur && inputProps.onBlur();
                         activatorProps.onBlur && activatorProps.onBlur();
                         setIsFocused(false);
-                        /**
-                         * This is an experimental workaround to solve a specific UX problem we have under certain conditions.
-                         * When you click to focus InputDate, ReactDatePicker becomes visible. If you delete the current date and blur
-                         * the input field by clicking away, ReactDatePicker will automatically set the date to whatever date was
-                         * currently selected.
-                         *
-                         * The above works great and is the expected user experience. ReactDatePicker fills in the empty value for us.
-                         *
-                         * However, there's a specific scenario where ReactDatePicker isn't visible: when you tab into the input date.
-                         * When you tab into it, clear the value, and tab away to blur, ReactDatePicker doesn't automatically fill in
-                         * the empty value because it wasn't visible/active.
-                         *
-                         * To solve this, we need to handle the blur event here and check if the value is empty or invalid. If it is,
-                         * we have to call onChange with the original input value which informs ReactDatePicker that is the current value.
-                         */
-                        if (inputProps.restoreLastValueOnBlur) {
-                            if ((!value || !isValid(value)) && inputProps.value) {
-                                // @ts-expect-error -- ReactDatePicker types don't include setSelected
-                                (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setSelected(inputProps.value);
-                            }
-                        }
                     }, onFocus: () => {
                         inputProps.onFocus && inputProps.onFocus();
                         activatorProps.onFocus && activatorProps.onFocus();

package/dist/InputEmail/index.cjs

@@ -5,6 +5,7 @@ var FormField = require('../FormField-cjs.js');
 require('classnames');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
+require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');

package/dist/InputEmail/index.mjs

@@ -3,6 +3,7 @@ import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFie
 import 'classnames';
 import { _ as __rest } from '../tslib.es6-es.js';
 import 'react-hook-form';
+import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';