@jobber/components 6.86.0 → 6.86.2

package/dist/Modal/index.mjs

@@ -2,14 +2,14 @@ import React__default, { useRef, createContext, useContext } from 'react';
 import ReactDOM__default from 'react-dom';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useRefocusOnActivator_2 } from '../useRefocusOnActivator-es.js';
-import { u as useOnKeyDown_2 } from '../useOnKeyDown-es.js';
-import { u as useFocusTrap_2 } from '../useFocusTrap-es.js';
+import { u as useRefocusOnActivator } from '../useRefocusOnActivator-es.js';
+import { u as useOnKeyDown } from '../useOnKeyDown-es.js';
+import { u as useFocusTrap } from '../useFocusTrap-es.js';
 import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { h as useFloatingNodeId, u as useFloating, m as useClick, c as useDismiss, n as useRole, d as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, p as FloatingOverlay, q as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { h as useFloatingNodeId, u as useFloating, m as useClick, a as useDismiss, n as useRole, b as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, p as FloatingOverlay, q as FloatingFocusManager } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';
@@ -33,9 +33,9 @@ var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKIT
 
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
-    useRefocusOnActivator_2(open);
-    const modalRef = useFocusTrap_2(open);
-    useOnKeyDown_2(handleRequestClose, "Escape");
+    useRefocusOnActivator(open);
+    const modalRef = useFocusTrap(open);
+    useOnKeyDown(handleRequestClose, "Escape");
     const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0 },
         React__default.createElement(motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React__default.createElement(motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {

package/dist/Page-cjs.js

@@ -15,11 +15,11 @@ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA
 
 function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames(styles.page, styles[width]);
-    const [titleBarRef, { width: titleBarWidth = useResizeObserver.useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver.useResizeObserver();
+    const [titleBarRef, { width: titleBarWidth = useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.small,
-        [styles.large]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.base,
+        [styles.small]: titleBarWidth > useResizeObserver.Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > useResizeObserver.Breakpoints.small,
+        [styles.large]: titleBarWidth > useResizeObserver.Breakpoints.base,
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;

package/dist/Page-es.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { u as useResizeObserver, B as Breakpoints } from './useResizeObserver-es.js';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
 import { C as Content } from './Content-es.js';
@@ -13,11 +13,11 @@ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA
 
 function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames(styles.page, styles[width]);
-    const [titleBarRef, { width: titleBarWidth = useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver();
+    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > useResizeObserver.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > useResizeObserver.Breakpoints.small,
-        [styles.large]: titleBarWidth > useResizeObserver.Breakpoints.base,
+        [styles.small]: titleBarWidth > Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > Breakpoints.small,
+        [styles.large]: titleBarWidth > Breakpoints.base,
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;

package/dist/Popover-cjs.js

@@ -53,7 +53,7 @@ const usePopover = ({ preferredPlacement, attachTo, open, }) => {
         // (which we are), not hidden with css. https://floating-ui.com/docs/autoUpdate
         whileElementsMounted: floatingUi_react.autoUpdate,
     });
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    useRefocusOnActivator.useRefocusOnActivator(open);
     return {
         setFloatingElement: refs.setFloating,
         setArrowElement,

package/dist/Popover-es.js

@@ -1,8 +1,8 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
-import { o as offset, s as shift, l as limitShift, k as autoPlacement, f as flip, a as arrow, u as useFloating, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import { o as offset, d as shift, l as limitShift, k as autoPlacement, f as flip, e as arrow, u as useFloating, c as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
 import { A as AtlantisPortalContent } from './AtlantisPortalContent-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
@@ -51,7 +51,7 @@ const usePopover = ({ preferredPlacement, attachTo, open, }) => {
         // (which we are), not hidden with css. https://floating-ui.com/docs/autoUpdate
         whileElementsMounted: autoUpdate,
     });
-    useRefocusOnActivator_2(open);
+    useRefocusOnActivator(open);
     return {
         setFloatingElement: refs.setFloating,
         setArrowElement,

package/dist/SideDrawer-cjs.js

@@ -87,10 +87,10 @@ const useSideDrawerState = (open) => {
         backButton: false,
     });
     const { toolbar, title, actions, backButton, footer } = useSlotIDs();
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const sideDrawerRef = useFocusTrap.useFocusTrap_2(open);
-    const [headerShadowRef, noHeaderShadow] = useInView.useInView_2();
-    const [footerShadowRef, noFooterShadow] = useInView.useInView_2();
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    const sideDrawerRef = useFocusTrap.useFocusTrap(open);
+    const [headerShadowRef, noHeaderShadow] = useInView.useInView();
+    const [footerShadowRef, noFooterShadow] = useInView.useInView();
     return {
         ref,
         setRef,
@@ -107,9 +107,9 @@ const useSideDrawerState = (open) => {
 function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    useRefocusOnActivator.useRefocusOnActivator(open);
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
-    const isMounted = useIsMounted.useIsMounted_2();
+    const isMounted = useIsMounted.useIsMounted();
     if (!isMounted.current && !container)
         return null;
     const SideDrawerRender = (React.createElement(SideDrawerContext.Provider, { value: {

package/dist/SideDrawer-es.js

@@ -1,11 +1,11 @@
 import React__default, { createContext, useContext, useEffect, useState, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
+import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
+import { u as useFocusTrap } from './useFocusTrap-es.js';
 import classnames from 'classnames';
-import { u as useInView_2 } from './useInView-es.js';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import { u as useInView } from './useInView-es.js';
+import { u as useIsMounted } from './useIsMounted-es.js';
 import { tokens } from '@jobber/design';
 import { H as Heading } from './Heading-es.js';
 import { B as Button } from './Button-es.js';
@@ -85,10 +85,10 @@ const useSideDrawerState = (open) => {
         backButton: false,
     });
     const { toolbar, title, actions, backButton, footer } = useSlotIDs();
-    useRefocusOnActivator_2(open);
-    const sideDrawerRef = useFocusTrap_2(open);
-    const [headerShadowRef, noHeaderShadow] = useInView_2();
-    const [footerShadowRef, noFooterShadow] = useInView_2();
+    useRefocusOnActivator(open);
+    const sideDrawerRef = useFocusTrap(open);
+    const [headerShadowRef, noHeaderShadow] = useInView();
+    const [footerShadowRef, noFooterShadow] = useInView();
     return {
         ref,
         setRef,
@@ -105,9 +105,9 @@ const useSideDrawerState = (open) => {
 function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
-    useRefocusOnActivator_2(open);
+    useRefocusOnActivator(open);
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
-    const isMounted = useIsMounted_2();
+    const isMounted = useIsMounted();
     if (!isMounted.current && !container)
         return null;
     const SideDrawerRender = (React__default.createElement(SideDrawerContext.Provider, { value: {

package/dist/Tooltip-cjs.js

@@ -122,7 +122,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                 activator.removeEventListener("blur", hideTooltip);
             }
         };
-        useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        useSafeLayoutEffect.useSafeLayoutEffect(() => {
             injectAttributes();
             addListeners();
             return () => {
@@ -132,7 +132,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
     }
 }
 function TooltipPortal({ children }) {
-    const mounted = useIsMounted.useIsMounted_2();
+    const mounted = useIsMounted.useIsMounted();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }

package/dist/Tooltip-es.js

@@ -1,9 +1,9 @@
 import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
-import { u as useFloating, s as shift, f as flip, a as arrow, b as autoUpdate, l as limitShift, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, d as shift, f as flip, e as arrow, c as autoUpdate, l as limitShift, F as FloatingPortal } from './floating-ui.react-es.js';
 import { motion } from 'framer-motion';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import { u as useSafeLayoutEffect } from './useSafeLayoutEffect-es.js';
+import { u as useIsMounted } from './useIsMounted-es.js';
 
 var styles = {"shadowActivator":"sZQ1M6tj8-c-","tooltipWrapper":"_0o-yEgfXmSQ-","tooltip":"Q1YfFqI71cw-","arrow":"ZP3ev-wT-OI-","top":"jlEmO6f6uHg-","bottom":"z9JQ-DR-QYc-","left":"zWATWgq3bS4-","right":"-tDm6lNCCic-","tooltipMessage":"djrmr4mADlA-","spinning":"bobYmlUMnuY-"};
 
@@ -120,7 +120,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                 activator.removeEventListener("blur", hideTooltip);
             }
         };
-        useSafeLayoutEffect_1(() => {
+        useSafeLayoutEffect(() => {
             injectAttributes();
             addListeners();
             return () => {
@@ -130,7 +130,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
     }
 }
 function TooltipPortal({ children }) {
-    const mounted = useIsMounted_2();
+    const mounted = useIsMounted();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }

package/dist/floating-ui.react-es.js

@@ -7015,4 +7015,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, arrow as a, autoUpdate as b, useDismiss as c, useInteractions as d, size as e, flip as f, useFloatingParentNodeId as g, useFloatingNodeId as h, FloatingTree as i, FloatingNode as j, autoPlacement as k, limitShift as l, useClick as m, useRole as n, offset as o, FloatingOverlay as p, FloatingFocusManager as q, useListNavigation as r, shift as s, useTransitionStyles as t, useFloating as u };
+export { FloatingPortal as F, useDismiss as a, useInteractions as b, autoUpdate as c, shift as d, arrow as e, flip as f, useFloatingParentNodeId as g, useFloatingNodeId as h, FloatingTree as i, FloatingNode as j, autoPlacement as k, limitShift as l, useClick as m, useRole as n, offset as o, FloatingOverlay as p, FloatingFocusManager as q, useListNavigation as r, size as s, useTransitionStyles as t, useFloating as u };

package/dist/index.cjs

@@ -30,7 +30,7 @@ var Countdown = require('./Countdown-cjs.js');
 var DataDump = require('./DataDump-cjs.js');
 var DataList = require('./DataList-cjs.js');
 var DataTable = require('./DataTable-cjs.js');
-require('./useResizeObserver-cjs.js');
+require('./isObjectLike-cjs.js');
 require('./DataTableTable-cjs.js');
 var reactTable = require('@tanstack/react-table');
 var DatePicker = require('./DatePicker-cjs.js');
@@ -101,7 +101,6 @@ require('@jobber/design');
 require('./_commonjsHelpers-cjs.js');
 require('./identity-cjs.js');
 require('./isTypedArray-cjs.js');
-require('./isObjectLike-cjs.js');
 require('./_baseAssignValue-cjs.js');
 require('./_baseFor-cjs.js');
 require('./keysIn-cjs.js');
@@ -118,6 +117,10 @@ require('./useIsMounted-cjs.js');
 require('./useSafeLayoutEffect-cjs.js');
 require('./useOnKeyDown-cjs.js');
 require('color');
+require('./useResizeObserver-cjs.js');
+require('./throttle-cjs.js');
+require('./debounce-cjs.js');
+require('./isSymbol-cjs.js');
 require('react-router-dom');
 require('./getMappedAtlantisSpaceToken-cjs.js');
 require('react-hook-form');
@@ -128,9 +131,7 @@ require('./useScrollToActive-cjs.js');
 require('./_baseFlatten-cjs.js');
 require('./_baseGet-cjs.js');
 require('./_getTag-cjs.js');
-require('./isSymbol-cjs.js');
 require('./_baseEach-cjs.js');
-require('./debounce-cjs.js');
 require('./ComboboxContent-cjs.js');
 require('./ComboboxContentSearch-cjs.js');
 require('./ComboboxContentList-cjs.js');
@@ -179,7 +180,6 @@ require('./DataListLoadMore-cjs.js');
 require('./DataListAction-cjs.js');
 require('./DataListLayoutActions-cjs.js');
 require('./DataListStatusBar-cjs.js');
-require('./throttle-cjs.js');
 require('./omit-cjs.js');
 require('./useFormFieldFocus-cjs.js');
 require('filesize');

package/dist/index.mjs

@@ -28,7 +28,7 @@ export { C as Countdown } from './Countdown-es.js';
 export { D as DataDump } from './DataDump-es.js';
 export { D as DataList } from './DataList-es.js';
 export { D as DataTable } from './DataTable-es.js';
-import './useResizeObserver-es.js';
+import './isObjectLike-es.js';
 import './DataTableTable-es.js';
 export { createColumnHelper } from '@tanstack/react-table';
 export { D as DatePicker } from './DatePicker-es.js';
@@ -99,7 +99,6 @@ import '@jobber/design';
 import './_commonjsHelpers-es.js';
 import './identity-es.js';
 import './isTypedArray-es.js';
-import './isObjectLike-es.js';
 import './_baseAssignValue-es.js';
 import './_baseFor-es.js';
 import './keysIn-es.js';
@@ -116,6 +115,10 @@ import './useIsMounted-es.js';
 import './useSafeLayoutEffect-es.js';
 import './useOnKeyDown-es.js';
 import 'color';
+import './useResizeObserver-es.js';
+import './throttle-es.js';
+import './debounce-es.js';
+import './isSymbol-es.js';
 import 'react-router-dom';
 import './getMappedAtlantisSpaceToken-es.js';
 import 'react-hook-form';
@@ -126,9 +129,7 @@ import './useScrollToActive-es.js';
 import './_baseFlatten-es.js';
 import './_baseGet-es.js';
 import './_getTag-es.js';
-import './isSymbol-es.js';
 import './_baseEach-es.js';
-import './debounce-es.js';
 import './ComboboxContent-es.js';
 import './ComboboxContentSearch-es.js';
 import './ComboboxContentList-es.js';
@@ -177,7 +178,6 @@ import './DataListLoadMore-es.js';
 import './DataListAction-es.js';
 import './DataListLayoutActions-es.js';
 import './DataListStatusBar-es.js';
-import './throttle-es.js';
 import './omit-es.js';
 import './useFormFieldFocus-es.js';
 import 'filesize';

package/dist/styles.css

@@ -5297,9 +5297,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .hk1-OlPzFpM- {
   color: hsl(31, 90%, 37%);
-  color: var(--color-orange--dark);
+  color: var(--color-base-orange--600);
   background-color: hsl(31, 74%, 93%);
-  background-color: var(--color-orange--lightest);
+  background-color: var(--color-base-orange--200);
+}
+
+[data-theme="dark"] .hk1-OlPzFpM- {
+  color: hsl(31, 74%, 93%);
+  color: var(--color-base-orange--200);
+  background-color: hsl(31, 90%, 37%);
+  background-color: var(--color-base-orange--600);
 }
 
 .ekQbbiBSxKk-,
@@ -5336,9 +5343,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .ZrdNg5b18oY- {
   color: hsl(79, 85%, 21%);
-  color: var(--color-lime--dark);
+  color: var(--color-base-lime--700);
   background-color: hsl(79, 49%, 90%);
-  background-color: var(--color-lime--lightest);
+  background-color: var(--color-base-lime--200);
+}
+
+[data-theme="dark"] .ZrdNg5b18oY- {
+  color: hsl(79, 49%, 90%);
+  color: var(--color-base-lime--200);
+  background-color: hsl(79, 85%, 21%);
+  background-color: var(--color-base-lime--700);
 }
 
 .df-Q7pKd2iI-,
@@ -5359,9 +5373,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .gc8t5abqWH4- {
   color: hsl(190, 78%, 25%);
-  color: var(--color-teal--dark);
+  color: var(--color-base-teal--700);
   background-color: hsl(190, 63%, 92%);
-  background-color: var(--color-teal--lightest);
+  background-color: var(--color-base-teal--200);
+}
+
+[data-theme="dark"] .gc8t5abqWH4- {
+  color: hsl(190, 63%, 92%);
+  color: var(--color-base-teal--200);
+  background-color: hsl(190, 78%, 25%);
+  background-color: var(--color-base-teal--700);
 }
 
 .SeLhnnpqK70-,

package/dist/throttle-cjs.js

@@ -77,4 +77,3 @@ var throttle_1 = throttle;
 var throttle$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(throttle_1);
 
 exports.throttle = throttle$1;
-exports.throttle_1 = throttle_1;

package/dist/throttle-es.js

@@ -74,4 +74,4 @@ var throttle_1 = throttle;
 
 var throttle$1 = /*@__PURE__*/getDefaultExportFromCjs(throttle_1);
 
-export { throttle_1 as a, throttle$1 as t };
+export { throttle$1 as t };