@jobber/components 6.90.4 → 6.91.1

package/dist/DataListSearch-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var classnames = require('classnames');
 var design = require('@jobber/design');
-var useDebounce = require('./useDebounce-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var InputText_index = require('./InputText/index.cjs');
 var DataListContext = require('./DataListContext-cjs.js');
 var DataList_const = require('./DataList.const-cjs.js');
@@ -25,7 +25,7 @@ function InternalDataListSearch() {
     const inputRef = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
     const { searchComponent, filterComponent, sorting, title } = DataListContext.useDataListContext();
-    const debouncedSearch = useDebounce.useDebounce_2((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY);
+    const debouncedSearch = jobberHooks.useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY);
     if (!searchComponent)
         return null;
     const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;

package/dist/DataListSearch-es.js

@@ -1,7 +1,7 @@
 import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
-import { u as useDebounce_2 } from './useDebounce-es.js';
+import { useDebounce } from '@jobber/hooks';
 import { InputText } from './InputText/index.mjs';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-es.js';
@@ -23,7 +23,7 @@ function InternalDataListSearch() {
     const inputRef = useRef(null);
     const [visible, setVisible] = useState(false);
     const { searchComponent, filterComponent, sorting, title } = useDataListContext();
-    const debouncedSearch = useDebounce_2((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY);
+    const debouncedSearch = useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY);
     if (!searchComponent)
         return null;
     const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;

package/dist/DataListSortingOptions-cjs.js

@@ -1,15 +1,14 @@
 'use strict';
 
 var React = require('react');
-var useOnKeyDown = require('./useOnKeyDown-cjs.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var Icon = require('./Icon-cjs.js');
 
 var styles = {"optionsList":"krkUjDI-P7E-","option":"d4hPt6o50kw-","spinning":"CNq0y1X8-Eo-"};
 
 function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
-    useRefocusOnActivator.useRefocusOnActivator_2(!optionsListRef.current);
-    useOnKeyDown.useOnKeyDown_2(() => onClose(), "Escape");
+    jobberHooks.useRefocusOnActivator(!optionsListRef.current);
+    jobberHooks.useOnKeyDown(() => onClose(), "Escape");
     React.useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => {

package/dist/DataListSortingOptions-es.js

@@ -1,13 +1,12 @@
 import React__default, { useEffect } from 'react';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import { useRefocusOnActivator, useOnKeyDown } from '@jobber/hooks';
 import { I as Icon } from './Icon-es.js';
 
 var styles = {"optionsList":"krkUjDI-P7E-","option":"d4hPt6o50kw-","spinning":"CNq0y1X8-Eo-"};
 
 function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
-    useRefocusOnActivator_2(!optionsListRef.current);
-    useOnKeyDown_2(() => onClose(), "Escape");
+    useRefocusOnActivator(!optionsListRef.current);
+    useOnKeyDown(() => onClose(), "Escape");
     useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => {

package/dist/DataTable/index.cjs

@@ -6,21 +6,19 @@ var DataTableTable = require('../DataTableTable-cjs.js');
 var reactTable = require('@tanstack/react-table');
 require('classnames');
 require('react');
-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('../Glimmer-cjs.js');
 require('../tslib.es6-cjs.js');
 require('../Content-cjs.js');
 require('../Select/index.cjs');
 require('../omit-cjs.js');
+require('../_commonjsHelpers-cjs.js');
 require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
 require('../identity-cjs.js');
 require('../_getTag-cjs.js');
+require('../isSymbol-cjs.js');
 require('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');

package/dist/DataTable/index.mjs

@@ -4,21 +4,19 @@ export { a as SortDirection, S as SortIcon } from '../DataTableTable-es.js';
 export { createColumnHelper } from '@tanstack/react-table';
 import 'classnames';
 import 'react';
-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 '../Glimmer-es.js';
 import '../tslib.es6-es.js';
 import '../Content-es.js';
 import '../Select/index.mjs';
 import '../omit-es.js';
+import '../_commonjsHelpers-es.js';
 import '../_baseGet-es.js';
 import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
 import '../identity-es.js';
 import '../_getTag-es.js';
+import '../isSymbol-es.js';
 import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';

package/dist/DataTable/test-utilities/index.cjs

@@ -1,13 +1,7 @@
 'use strict';
 
 var helpers = require('../../helpers-cjs.js');
-require('../../useResizeObserver-cjs.js');
-require('../../_commonjsHelpers-cjs.js');
-require('react');
-require('../../throttle-cjs.js');
-require('../../debounce-cjs.js');
-require('../../isObjectLike-cjs.js');
-require('../../isSymbol-cjs.js');
+require('@jobber/hooks');
 
 const data = [
     {

package/dist/DataTable/test-utilities/index.mjs

@@ -1,11 +1,5 @@
 export { m as mockContainerWidth } from '../../helpers-es.js';
-import '../../useResizeObserver-es.js';
-import '../../_commonjsHelpers-es.js';
-import 'react';
-import '../../throttle-es.js';
-import '../../debounce-es.js';
-import '../../isObjectLike-es.js';
-import '../../isSymbol-es.js';
+import '@jobber/hooks';
 
 const data = [
     {

package/dist/DataTable-cjs.js

@@ -3,7 +3,7 @@
 var reactTable = require('@tanstack/react-table');
 var classnames = require('classnames');
 var React = require('react');
-var useResizeObserver = require('./useResizeObserver-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var Glimmer = require('./Glimmer-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var Select_index = require('./Select/index.cjs');
@@ -177,7 +177,7 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
 }
 
 function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading = false, }) {
-    const [ref, { exactWidth }] = useResizeObserver.useResizeObserver.useResizeObserver();
+    const [ref, { exactWidth }] = jobberHooks.useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
         sorting,
@@ -193,10 +193,10 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
                 React.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
-                    exactWidth > useResizeObserver.useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > jobberHooks.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= useResizeObserver.useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
+            exactWidth <= jobberHooks.Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
         pagination && (React.createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));

package/dist/DataTable-es.js

@@ -1,7 +1,7 @@
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import classnames from 'classnames';
 import React__default, { useCallback, useMemo } from 'react';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { G as Glimmer } from './Glimmer-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { Select, Option as SelectOption } from './Select/index.mjs';
@@ -175,7 +175,7 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
 }
 
 function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading = false, }) {
-    const [ref, { exactWidth }] = useResizeObserver.useResizeObserver();
+    const [ref, { exactWidth }] = useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
         sorting,
@@ -191,10 +191,10 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
                 React__default.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
-                    exactWidth > useResizeObserver.Breakpoints.small ? (React__default.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > Breakpoints.small ? (React__default.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= useResizeObserver.Breakpoints.small ? (React__default.createElement(Footer, { table: table })) : null,
+            exactWidth <= Breakpoints.small ? (React__default.createElement(Footer, { table: table })) : null,
         pagination && (React__default.createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));

package/dist/DatePicker/index.cjs

@@ -6,7 +6,7 @@ require('classnames');
 require('../clsx-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
-require('../useRefocusOnActivator-cjs.js');
+require('@jobber/hooks');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');

package/dist/DatePicker/index.mjs

@@ -4,7 +4,7 @@ import 'classnames';
 import '../clsx-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
-import '../useRefocusOnActivator-es.js';
+import '@jobber/hooks';
 import '../Typography-es.js';
 import '../Button-es.js';
 import 'react-router-dom';

package/dist/DatePicker-cjs.js

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var clsx = require('./clsx-cjs.js');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
 var ReactDOM = require('react-dom');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var Typography = require('./Typography-cjs.js');
 var Button = require('./Button-cjs.js');
 var omit = require('./omit-cjs.js');
@@ -12740,7 +12740,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     });
     const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
     if (smartAutofocus) {
-        useRefocusOnActivator.useRefocusOnActivator_2(open);
+        jobberHooks.useRefocusOnActivator(open);
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },

package/dist/DatePicker-es.js

@@ -1,9 +1,9 @@
 import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState } from 'react';
 import classnames from 'classnames';
 import { c as clsx } from './clsx-es.js';
-import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, t as FloatingArrow } from './floating-ui.react-es.js';
+import { u as useFloating, c as autoUpdate, f as flip, o as offset, e as arrow, t as FloatingArrow } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import { useRefocusOnActivator } from '@jobber/hooks';
 import { T as Typography } from './Typography-es.js';
 import { B as Button } from './Button-es.js';
 import { o as omit } from './omit-es.js';
@@ -12738,7 +12738,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     });
     const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
     if (smartAutofocus) {
-        useRefocusOnActivator_2(open);
+        useRefocusOnActivator(open);
         useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },

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/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/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,12 +16,10 @@ 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');

package/dist/FormatFile/index.mjs

@@ -14,12 +14,10 @@ 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';

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

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';

package/dist/InputDate/index.cjs

@@ -6,6 +6,7 @@ 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');
@@ -32,9 +33,7 @@ require('react-router-dom');
 require('../clsx-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
-require('../useRefocusOnActivator-cjs.js');
 require('../AtlantisContext-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = React.useRef(null);

package/dist/InputDate/index.mjs

@@ -4,6 +4,7 @@ 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';
@@ -30,9 +31,7 @@ import 'react-router-dom';
 import '../clsx-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
-import '../useRefocusOnActivator-es.js';
 import '../AtlantisContext-es.js';
-import '../useSafeLayoutEffect-es.js';
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = useRef(null);

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';

package/dist/InputNumber/index.cjs

@@ -9,6 +9,7 @@ var Icon = require('../Icon-cjs.js');
 var Text = require('../Text-cjs.js');
 var FormField = require('../FormField-cjs.js');
 require('react-hook-form');
+require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');

package/dist/InputNumber/index.mjs

@@ -7,6 +7,7 @@ import { I as Icon } from '../Icon-es.js';
 import { T as Text } from '../Text-es.js';
 import { k as FormField } from '../FormField-es.js';
 import 'react-hook-form';
+import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';

package/dist/InputPassword/index.cjs

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

package/dist/InputPassword/index.mjs

@@ -1,6 +1,7 @@
 export { I as InputPassword } from '../InputPassword-es.js';
 import 'react';
 import '../FormField-es.js';
+import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import 'classnames';

package/dist/InputPassword-cjs.js

@@ -5,6 +5,7 @@ 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');