@jobber/components 4.7.1-pre.2 → 4.7.1-pre.5

package/dist/Autocomplete/index.js

@@ -11,10 +11,10 @@ var useEventListener = require('@use-it/event-listener');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-32cbc583.js');
+var InputText = require('../InputText-0a76a9f9.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-771f6e12.js');
+require('../FormField-03e36a98.js');
 require('uuid');
 require('react-hook-form');
 require('../Button-69409e46.js');

package/dist/Banner/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var jobberHooks = require('@jobber/hooks');
+var useResizeObserver = require('@jobber/hooks/dist/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
 var Text = require('../Text-e7ed0974.js');
@@ -32,7 +32,7 @@ function Banner({ children, type, primaryAction, dismissible = true, onDismiss,
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = jobberHooks.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
         widths: bannerWidths,
     });
     const iconColors = {

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-459a48b7.js');
+var Card = require('../Card-143d1b9e.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
@@ -12,10 +12,10 @@ require('../Button-69409e46.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-aa9c73d2.js');
+require('../Menu-a527b392.js');
 require('uuid');
 require('framer-motion');
-require('@jobber/hooks');
+require('@jobber/hooks/dist/useOnKeyDown');
 
 
 

package/dist/{Card-459a48b7.js → Card-143d1b9e.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-a1191b15.js');
 var Button = require('./Button-69409e46.js');
-var Menu = require('./Menu-aa9c73d2.js');
+var Menu = require('./Menu-a527b392.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chips/index.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var jobberHooks = require('@jobber/hooks');
+var useAssert = require('@jobber/hooks/dist/useAssert');
 var Icon = require('../Icon-405a216c.js');
 var Avatar = require('../Avatar-1aa30ee1.js');
 var Typography = require('../Typography-fd6f932a.js');
 var Tooltip = require('../Tooltip-bf67fe6e.js');
 var uuid = require('uuid');
 var lodash = require('lodash');
+var useLiveAnnounce = require('@jobber/hooks/dist/useLiveAnnounce');
 var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
 var Button = require('../Button-69409e46.js');
@@ -90,7 +91,7 @@ function InternalChipAffix({ affix, active, invalid, disabled, }) {
         const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar || false;
         const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon || false;
         const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
-        jobberHooks.useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
+        useAssert.useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
     }
 }
 
@@ -210,7 +211,7 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
     const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
     const sortedVisibleChipOptions = lodash.sortBy(visibleChipOptions, chip => selected.indexOf(chip.value));
     const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
-    const { liveAnnounce } = jobberHooks.useLiveAnnounce();
+    const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
     const actions = {
         handleChipRemove: (value) => {
             return () => {
@@ -276,7 +277,7 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
     const [shouldCancelEnter, setShouldCancelEnter] = React.useState(false);
     const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
     const maxOptionIndex = allOptions.length - 1;
-    const { liveAnnounce } = jobberHooks.useLiveAnnounce();
+    const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
     React.useEffect(() => {
         setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
     }, [options]);
@@ -511,7 +512,7 @@ function Chips(props) {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Chip(props) {
     // Throw error when <Chip /> gets used outside of the <Chips />
-    jobberHooks.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
+    useAssert.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 

package/dist/ConfirmationModal/index.js

@@ -2,13 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-3f9a3524.js');
+var ConfirmationModal = require('../ConfirmationModal-931cec40.js');
 require('react');
-require('@jobber/hooks');
-require('../Modal-c5f9040f.js');
+require('@jobber/hooks/dist/useOnKeyDown');
+require('../Modal-ee11c18b.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
+require('@jobber/hooks/dist/useRefocusOnActivator');
+require('@jobber/hooks/dist/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');

package/dist/{ConfirmationModal-3f9a3524.js → ConfirmationModal-931cec40.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var jobberHooks = require('@jobber/hooks');
-var Modal = require('./Modal-c5f9040f.js');
+var useOnKeyDown = require('@jobber/hooks/dist/useOnKeyDown');
+var Modal = require('./Modal-ee11c18b.js');
 var Content = require('./Content-a6590328.js');
 var Markdown = require('./Markdown-53a0bfda.js');
 
@@ -59,7 +59,7 @@ const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({
                 onCancel }),
         });
     }, [title, message, confirmLabel, cancelLabel, onConfirm, onCancel]);
-    jobberHooks.useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
+    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
     return (React__default["default"].createElement(Modal.Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
             label: state.confirmLabel,
             onClick: handleAction("confirm"),

package/dist/DataDump/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-459a48b7.js');
+var Card = require('../Card-143d1b9e.js');
 var Content = require('../Content-a6590328.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('classnames');
@@ -14,10 +14,10 @@ require('../Button-69409e46.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-aa9c73d2.js');
+require('../Menu-a527b392.js');
 require('uuid');
 require('framer-motion');
-require('@jobber/hooks');
+require('@jobber/hooks/dist/useOnKeyDown');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataTable/index.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactTable = require('@tanstack/react-table');
 var classnames = require('classnames');
 var React = require('react');
-var jobberHooks = require('@jobber/hooks');
+var useResizeObserver = require('@jobber/hooks/dist/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-ee917602.js');
+var Option = require('../Option-1447547b.js');
 var Button = require('../Button-69409e46.js');
 var Text = require('../Text-e7ed0974.js');
-require('../FormField-771f6e12.js');
+var jobberHooks = require('@jobber/hooks/dist/index');
+require('../FormField-03e36a98.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');
@@ -234,7 +235,7 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
 }
 
 function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }) {
-    const [ref, { exactWidth }] = jobberHooks.useResizeObserver();
+    const [ref, { exactWidth }] = useResizeObserver.useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
         sorting,
@@ -250,10 +251,10 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
                 React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, height: height ? height * 0.7 : undefined, emptyState: emptyState }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
-                    exactWidth > jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > useResizeObserver.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
+            exactWidth <= useResizeObserver.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
         pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length }))));

package/dist/DatePicker/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-b704c15b.js');
+var DatePicker = require('../DatePicker-86ccf76d.js');
 require('react');
 require('classnames');
 require('react-datepicker');
-require('@jobber/hooks');
+require('@jobber/hooks/dist/useRefocusOnActivator');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Typography-fd6f932a.js');
 require('../Button-69409e46.js');

package/dist/{DatePicker-b704c15b.js → DatePicker-86ccf76d.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var classnames = require('classnames');
 var ReactDatePicker = require('react-datepicker');
-var jobberHooks = require('@jobber/hooks');
+var useRefocusOnActivator = require('@jobber/hooks/dist/useRefocusOnActivator');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Typography = require('./Typography-fd6f932a.js');
 var Button = require('./Button-69409e46.js');
@@ -82,7 +82,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         [styles.inline]: inline,
     });
     if (smartAutofocus) {
-        jobberHooks.useRefocusOnActivator(open);
+        useRefocusOnActivator.useRefocusOnActivator(open);
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default["default"].createElement("div", { className: wrapperClassName, ref: ref },

package/dist/Disclosure/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var jobberHooks = require('@jobber/hooks');
+var useResizeObserver = require('@jobber/hooks/dist/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
 var Typography = require('../Typography-fd6f932a.js');
@@ -21,8 +21,8 @@ styleInject_es.styleInject(css_248z);
 function Disclosure({ children, title, defaultOpen = false, }) {
     const [isOpen, setOpen] = React.useState(defaultOpen);
     const [isMounted, setMount] = React.useState(false);
-    const [titleRef, { exactWidth }] = jobberHooks.useResizeObserver();
-    const isBelowBreakpoint = exactWidth && exactWidth < jobberHooks.Breakpoints.small;
+    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
     React.useEffect(() => {
         setMount(true);
     }, []);

package/dist/FormField/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-771f6e12.js');
+var FormField = require('../FormField-03e36a98.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');

package/dist/{FormField-771f6e12.js → FormField-03e36a98.js}

@@ -129,8 +129,8 @@ function FormField(props) {
      */
     const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
     React.useEffect(() => {
-        if (value != undefined && value != "") {
-            setValue(controlledName, value);
+        if (value != undefined) {
+            setValue(controlledName, value, { shouldValidate: true });
         }
     }, [value, watch(controlledName)]);
     React.useImperativeHandle(actionsRef, () => ({

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-d2c30cbc.js');
+var FormatFile = require('../FormatFile-362ae1d5.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -12,11 +12,13 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
-require('../ConfirmationModal-3f9a3524.js');
-require('@jobber/hooks');
-require('../Modal-c5f9040f.js');
+require('../ConfirmationModal-931cec40.js');
+require('@jobber/hooks/dist/useOnKeyDown');
+require('../Modal-ee11c18b.js');
 require('react-dom');
 require('framer-motion');
+require('@jobber/hooks/dist/useRefocusOnActivator');
+require('@jobber/hooks/dist/useFocusTrap');
 require('../Heading-a1191b15.js');
 require('../ButtonDismiss-7d9deeab.js');
 require('../Content-a6590328.js');

package/dist/{FormatFile-d2c30cbc.js → FormatFile-362ae1d5.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-69409e46.js');
-var ConfirmationModal = require('./ConfirmationModal-3f9a3524.js');
+var ConfirmationModal = require('./ConfirmationModal-931cec40.js');
 var Glimmer = require('./Glimmer-f670c24e.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-fd6f932a.js');

package/dist/Gallery/index.js

@@ -5,17 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var LightBox = require('../LightBox-c637c684.js');
-var FormatFile = require('../FormatFile-d2c30cbc.js');
+var LightBox = require('../LightBox-5cceb171.js');
+var FormatFile = require('../FormatFile-362ae1d5.js');
 var Button = require('../Button-69409e46.js');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
-require('@jobber/hooks');
+require('@jobber/hooks/dist/useRefocusOnActivator');
+require('@jobber/hooks/dist/useOnKeyDown');
+require('@jobber/hooks/dist/useFocusTrap');
 require('../ButtonDismiss-7d9deeab.js');
 require('filesize');
-require('../ConfirmationModal-3f9a3524.js');
-require('../Modal-c5f9040f.js');
+require('../ConfirmationModal-931cec40.js');
+require('../Modal-ee11c18b.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
 require('../Content-a6590328.js');

package/dist/InputDate/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lodash = require('lodash');
 var React = require('react');
-var FormField = require('../FormField-771f6e12.js');
-var DatePicker = require('../DatePicker-b704c15b.js');
+var FormField = require('../FormField-03e36a98.js');
+var DatePicker = require('../DatePicker-86ccf76d.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
@@ -21,7 +21,7 @@ require('../InputValidation-bf743417.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 require('react-datepicker');
-require('@jobber/hooks');
+require('@jobber/hooks/dist/useRefocusOnActivator');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputEmail/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-771f6e12.js');
+var FormField = require('../FormField-03e36a98.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputNumber/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-771f6e12.js');
+var FormField = require('../FormField-03e36a98.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPassword/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-771f6e12.js');
+var FormField = require('../FormField-03e36a98.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputText/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-32cbc583.js');
+var InputText = require('../InputText-0a76a9f9.js');
 require('react');
-require('../FormField-771f6e12.js');
+require('../FormField-03e36a98.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputText-32cbc583.js → InputText-0a76a9f9.js}

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

package/dist/InputTime/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-771f6e12.js');
+var FormField = require('../FormField-03e36a98.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/LightBox/index.js

@@ -2,12 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-c637c684.js');
+var LightBox = require('../LightBox-5cceb171.js');
 require('react');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
-require('@jobber/hooks');
+require('@jobber/hooks/dist/useRefocusOnActivator');
+require('@jobber/hooks/dist/useOnKeyDown');
+require('@jobber/hooks/dist/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
 require('../ButtonDismiss-7d9deeab.js');
 require('../Button-69409e46.js');

package/dist/{LightBox-c637c684.js → LightBox-5cceb171.js}

@@ -4,7 +4,9 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
 var debounce = require('lodash/debounce');
-var jobberHooks = require('@jobber/hooks');
+var useRefocusOnActivator = require('@jobber/hooks/dist/useRefocusOnActivator');
+var useOnKeyDown = require('@jobber/hooks/dist/useOnKeyDown');
+var useFocusTrap = require('@jobber/hooks/dist/useFocusTrap');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var ButtonDismiss = require('./ButtonDismiss-7d9deeab.js');
 var Button = require('./Button-69409e46.js');
@@ -55,15 +57,15 @@ const debounceDuration = 250;
 function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
     const [direction, setDirection] = React.useState(0);
-    const lightboxRef = jobberHooks.useFocusTrap(open);
+    const lightboxRef = useFocusTrap.useFocusTrap(open);
     const debouncedHandleNext = debounce__default["default"](handleMoveNext, debounceDuration);
     const debouncedHandlePrevious = debounce__default["default"](handleMovePrevious, debounceDuration);
-    jobberHooks.useRefocusOnActivator(open);
-    jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
-    jobberHooks.useOnKeyDown(debouncedHandlePrevious, {
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
+    useOnKeyDown.useOnKeyDown(debouncedHandlePrevious, {
         key: "ArrowLeft",
     });
-    jobberHooks.useOnKeyDown(debouncedHandleNext, {
+    useOnKeyDown.useOnKeyDown(debouncedHandleNext, {
         key: "ArrowRight",
     });
     React.useEffect(() => {

package/dist/Menu/index.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-aa9c73d2.js');
+var Menu = require('../Menu-a527b392.js');
 require('react');
 require('uuid');
 require('classnames');
 require('framer-motion');
-require('@jobber/hooks');
+require('@jobber/hooks/dist/useOnKeyDown');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Button-69409e46.js');
 require('react-router-dom');

package/dist/{Menu-aa9c73d2.js → Menu-a527b392.js}

@@ -4,7 +4,7 @@ var React = require('react');
 var uuid = require('uuid');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
-var jobberHooks = require('@jobber/hooks');
+var useOnKeyDown = require('@jobber/hooks/dist/useOnKeyDown');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-69409e46.js');
 var Typography = require('./Typography-fd6f932a.js');
@@ -43,7 +43,7 @@ function Menu({ activator, items }) {
     const wrapperRef = React.createRef();
     const buttonID = uuid.v1();
     const menuID = uuid.v1();
-    jobberHooks.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
+    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
     React.useLayoutEffect(() => {
         if (wrapperRef.current) {
             const bounds = wrapperRef.current.getBoundingClientRect();

package/dist/Modal/index.js

@@ -2,12 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Modal = require('../Modal-c5f9040f.js');
+var Modal = require('../Modal-ee11c18b.js');
 require('react');
 require('react-dom');
 require('classnames');
 require('framer-motion');
-require('@jobber/hooks');
+require('@jobber/hooks/dist/useRefocusOnActivator');
+require('@jobber/hooks/dist/useOnKeyDown');
+require('@jobber/hooks/dist/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');

package/dist/{Modal-c5f9040f.js → Modal-ee11c18b.js}

@@ -4,7 +4,9 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
-var jobberHooks = require('@jobber/hooks');
+var useRefocusOnActivator = require('@jobber/hooks/dist/useRefocusOnActivator');
+var useOnKeyDown = require('@jobber/hooks/dist/useOnKeyDown');
+var useFocusTrap = require('@jobber/hooks/dist/useFocusTrap');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-a1191b15.js');
 var Button = require('./Button-69409e46.js');
@@ -26,9 +28,9 @@ styleInject_es.styleInject(css_248z);
 
 function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
     const modalClassName = classnames__default["default"](styles.modal, size && sizes[size]);
-    jobberHooks.useRefocusOnActivator(open);
-    const modalRef = jobberHooks.useFocusTrap(open);
-    jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    const modalRef = useFocusTrap.useFocusTrap(open);
+    useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
     const template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, className: styles.container, tabIndex: 0 },
         React__default["default"].createElement(framerMotion.motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React__default["default"].createElement(framerMotion.motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {

package/dist/MultiSelect/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var jobberHooks = require('@jobber/hooks');
+var useOnKeyDown = require('@jobber/hooks/dist/useOnKeyDown');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Checkbox = require('../Checkbox-36f63689.js');
 var Text = require('../Text-e7ed0974.js');
@@ -98,7 +98,7 @@ function DropDownMenu({ options, setOptions }) {
             }
         }
     }
-    jobberHooks.useOnKeyDown(handleKeyboardShortcut(setupKeyListeners).callback, [
+    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut(setupKeyListeners).callback, [
         "Enter",
         " ",
         "ArrowDown",
@@ -159,7 +159,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
             }
         }
     }
-    jobberHooks.useOnKeyDown(handleKeyboardShortcut(setupKeyListeners).callback, [
+    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut(setupKeyListeners).callback, [
         "Enter",
         " ",
         "Escape",

package/dist/{Option-ee917602.js → Option-1447547b.js}

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

package/dist/Page/index.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var jobberHooks = require('@jobber/hooks');
+var hooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Heading = require('../Heading-a1191b15.js');
 var Text = require('../Text-e7ed0974.js');
 var Content = require('../Content-a6590328.js');
 var Markdown = require('../Markdown-53a0bfda.js');
 var Button = require('../Button-69409e46.js');
-var Menu = require('../Menu-aa9c73d2.js');
+var Menu = require('../Menu-a527b392.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('../Typography-fd6f932a.js');
 require('react-markdown');
@@ -20,6 +20,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('uuid');
 require('framer-motion');
+require('@jobber/hooks/dist/useOnKeyDown');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,11 +34,11 @@ styleInject_es.styleInject(css_248z);
 // eslint-disable-next-line max-statements
 function Page({ title, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames__default["default"](styles.page, styles[width]);
-    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
+    const [titleBarRef, { width: titleBarWidth = hooks.Breakpoints.large }] = hooks.useResizeObserver();
     const titleBarClasses = classnames__default["default"](styles.titleBar, {
-        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
-        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
+        [styles.small]: titleBarWidth > hooks.Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > hooks.Breakpoints.small,
+        [styles.large]: titleBarWidth > hooks.Breakpoints.base,
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction;

package/dist/Popover/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactPopper = require('react-popper');
-var jobberHooks = require('@jobber/hooks');
+var useRefocusOnActivator = require('@jobber/hooks/dist/useRefocusOnActivator');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var ButtonDismiss = require('../ButtonDismiss-7d9deeab.js');
 require('../Button-69409e46.js');
@@ -29,7 +29,7 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
         modifiers: buildModifiers(arrowElement),
         placement: preferredPlacement,
     });
-    jobberHooks.useRefocusOnActivator(open);
+    useRefocusOnActivator.useRefocusOnActivator(open);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", Object.assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
         React__default["default"].createElement("div", { className: classes.dismissButton },
             React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),

package/dist/Select/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-ee917602.js');
+var Option = require('../Option-1447547b.js');
 require('react');
-require('../FormField-771f6e12.js');
+require('../FormField-03e36a98.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@jobber/components",
-  "version": "4.7.1-pre.2+b6de2a42",
+  "version": "4.7.1-pre.5+15c84c7c",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup --config",
     "clean": "rm -rf dist/* tsconfig.tsbuildinfo",
-    "prepublishOnly": "ts-node --project ../../tsconfig.bin.json scripts/entryPoints.ts",
+    "prepublishOnly": "ts-node --project ../../tsconfig.bin.json ../../scripts/entryPoints.ts",
     "bootstrap": "npm run clean; npm run build",
-    "postpublish": "ts-node --project ../../tsconfig.bin.json scripts/entryPoints.ts clean"
+    "postpublish": "ts-node --project ../../tsconfig.bin.json ../../scripts/entryPoints.ts clean"
   },
   "files": [
     "*.js",
@@ -82,5 +82,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b6de2a42c6f9ab78ecf2ab88856aa87d78094800"
+  "gitHead": "15c84c7cf073b20d73f9905c242daf16da24ea1f"
 }