@jobber/components 6.75.2 → 6.75.3-scotttho-e5ab79e.3

package/.eslintrc.cjs

@@ -1,4 +1,18 @@
 module.exports = {
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      parserOptions: {
+        project: "tsconfig.json",
+        tsconfigRootDir: __dirname,
+        sourceType: "module",
+      },
+      rules: {
+        "@typescript-eslint/consistent-type-exports": "error",
+        "@typescript-eslint/consistent-type-imports": "error",
+      },
+    },
+  ],
   rules: {
     "import/no-internal-modules": [
       "error",

package/dist/AnimatedPresence/AnimatedPresence.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 declare const transitions: {
     fromBottom: import("framer-motion").Variants;
     fromTop: import("framer-motion").Variants;

package/dist/AnimatedPresence/AnimatedPresence.transitions.d.ts

@@ -1,4 +1,4 @@
-import { Variants } from "framer-motion";
+import type { Variants } from "framer-motion";
 export declare const TIMING_QUICK: number;
 export declare const TIMING_BASE: number;
 export declare const fade: Variants;

package/dist/AnimatedSwitcher/AnimatedSwitcher.d.ts

@@ -1,5 +1,6 @@
-import React, { ReactElement } from "react";
-import { IconNames } from "@jobber/design";
+import type { ReactElement } from "react";
+import React from "react";
+import type { IconNames } from "@jobber/design";
 export interface AnimatedSwitcherProps {
     /**
      * Determines when to switch the component to the `switchTo` prop.

package/dist/AnimatedSwitcher/transitions.d.ts

@@ -1,4 +1,4 @@
-import { Variants } from "framer-motion";
+import type { Variants } from "framer-motion";
 export declare const DURATION_SIMPLE = 0.1;
 export declare const DURATION_AVERAGE = 0.2;
 export declare const FADE: Variants;

package/dist/AtlantisContext/AtlantisContext.d.ts

@@ -1,4 +1,4 @@
-import { DayOfWeek } from "../sharedHelpers/types";
+import type { DayOfWeek } from "../sharedHelpers/types";
 export interface AtlantisContextProps {
     /**
      * The date format Atlantis components would use

package/dist/AtlantisPortalContent/AtlantisPortalContent.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { AtlantisPortalContentProps } from "./AtlantisPortalContent.types";
+import type { AtlantisPortalContentProps } from "./AtlantisPortalContent.types";
 export declare function AtlantisPortalContent({ children, }: AtlantisPortalContentProps): React.JSX.Element;

package/dist/AtlantisThemeContext/AtlantisThemeContext.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
+import type { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
 export declare const atlantisThemeContextDefaultValues: AtlantisThemeContextValue;
 export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): React.JSX.Element;
 export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/AtlantisThemeContext/index.d.ts

@@ -1,3 +1,3 @@
 export { AtlantisThemeContextProvider, atlantisThemeContextDefaultValues, useAtlantisTheme, } from "./AtlantisThemeContext";
-export { THEME_CHANGE_EVENT, Theme, ThemeChangeDetails, AtlantisThemeContextProviderProps, AtlantisThemeContextValue, } from "./types";
+export { THEME_CHANGE_EVENT, type AtlantisThemeContextProviderProps, type AtlantisThemeContextValue, type Theme, type ThemeChangeDetails, } from "./types";
 export { updateTheme } from "./updateTheme";

package/dist/AtlantisThemeContext/types.d.ts

@@ -1,5 +1,5 @@
-import { tokens } from "@jobber/design";
-import { PropsWithChildren } from "react";
+import type { tokens } from "@jobber/design";
+import type { PropsWithChildren } from "react";
 export interface AtlantisThemeContextValue {
     /**
      * The theme of the application.

package/dist/AtlantisThemeContext/updateTheme.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "./types";
+import type { Theme } from "./types";
 /**
  * Toggle the theme of the application. If subscribed, the tokens will be updated accordingly.
  * Will add data-theme="<newTheme>" to the <html> element.

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,6 +1,7 @@
-import React, { Ref, RefAttributes } from "react";
-import { AnyOption, AutocompleteProps, Option } from "./Autocomplete.types";
-import { InputTextRef } from "../InputText";
+import type { Ref, RefAttributes } from "react";
+import React from "react";
+import { type AnyOption, type AutocompleteProps, type Option } from "./Autocomplete.types";
+import type { InputTextRef } from "../InputText";
 declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu, ...inputProps }: AutocompleteProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<InputTextRef>): React.JSX.Element;
 export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<InputTextRef>) => ReturnType<typeof AutocompleteInternal>;
 export {};

package/dist/Autocomplete/Autocomplete.types.d.ts

@@ -1,6 +1,6 @@
-import { RefObject } from "react";
-import { FormFieldProps } from "../FormField";
-import { InputTextRef } from "../InputText";
+import type { RefObject } from "react";
+import type { FormFieldProps } from "../FormField";
+import type { InputTextRef } from "../InputText";
 type OptionValue = string | number;
 export interface BaseOption {
     label: string;

package/dist/Autocomplete/Autocomplete.utils.d.ts

@@ -1,4 +1,4 @@
-import { AnyOption, GroupOption, Option } from "./Autocomplete.types";
+import { type AnyOption, type GroupOption, type Option } from "./Autocomplete.types";
 export declare function isOptionSelected(selectedOption: Option | undefined, option: Option): boolean;
 /**
  * Helper function to determine if the option is a group. This is used to

package/dist/Autocomplete/Menu/DefaultMenu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AnyOption, Option } from "../Autocomplete.types";
+import { type AnyOption, type Option } from "../Autocomplete.types";
 export interface DefaultMenuProps {
     readonly options: AnyOption[];
     readonly selectedOption?: Option;

package/dist/Autocomplete/Menu/Menu.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { AnyOption, MenuProps, Option } from "../Autocomplete.types";
+import { type AnyOption, type MenuProps, type Option } from "../Autocomplete.types";
 export declare function Menu<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option>({ options, selectedOption, onOptionSelect, inputFocused, attachTo, inputRef, customRenderMenu, }: MenuProps<GenericOption, GenericOptionValue>): React.JSX.Element | null;

package/dist/Autocomplete/Menu/MenuWrapper.d.ts

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren } from "react";
-import { UseRepositionMenu } from "../useRepositionMenu";
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { UseRepositionMenu } from "../useRepositionMenu";
 export interface BaseAutocompleteMenuWrapperInternalProps {
     readonly setMenuRef: UseRepositionMenu["setMenuRef"];
     readonly floatStyles: UseRepositionMenu["styles"];

package/dist/Autocomplete/Option.d.ts

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren } from "react";
-import { AnyOption, Option } from "./Autocomplete.types";
+import type { PropsWithChildren } from "react";
+import React from "react";
+import { type AnyOption, type Option } from "./Autocomplete.types";
 export interface MenuOptionProps {
     readonly isHighlighted: boolean;
     readonly option: AnyOption;

package/dist/Autocomplete/constants.d.ts

@@ -1,2 +1 @@
 export declare const AUTOCOMPLETE_MAX_HEIGHT = 300;
-export declare const AUTCOMPLETE_MIN_HEIGHT = 100;

package/dist/Autocomplete/index.cjs

@@ -9,11 +9,12 @@ require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
+require('../maxHeight-cjs.js');
+require('@jobber/design');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Icon-cjs.js');
-require('@jobber/design');
 require('../useOnKeyDown-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-cjs.js');

package/dist/Autocomplete/index.d.ts

@@ -1,6 +1,6 @@
 export { Autocomplete } from "./Autocomplete";
-export { MenuOptionProps, BaseMenuOption, BaseMenuOptionProps, MenuOption, BaseMenuGroupOption, BaseMenuGroupOptionProps, } from "./Option";
-export { AnyOption, AutocompleteProps, BaseOption, CustomOptionsMenuProp, GroupOption, OptionCollection, Option, } from "./Autocomplete.types";
+export { type MenuOptionProps, BaseMenuOption, type BaseMenuOptionProps, MenuOption, BaseMenuGroupOption, type BaseMenuGroupOptionProps, } from "./Option";
+export { type AnyOption, type AutocompleteProps, type BaseOption, type CustomOptionsMenuProp, type GroupOption, type OptionCollection, type Option, } from "./Autocomplete.types";
 export { KeyboardAction, getRequestedIndexChange, useKeyboardNavigation, useCustomKeyboardNavigation, } from "./useKeyboardNavigation";
 export { useRepositionMenu } from "./useRepositionMenu";
 export { BaseAutocompleteMenuWrapper, useAutocompleteMenu, } from "./Menu/MenuWrapper";

package/dist/Autocomplete/index.mjs

@@ -7,11 +7,12 @@ import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
+import '../maxHeight-es.js';
+import '@jobber/design';
 import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../Icon-es.js';
-import '@jobber/design';
 import '../useOnKeyDown-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';

package/dist/Autocomplete/useKeyboardNavigation.d.ts

@@ -1,4 +1,4 @@
-import { AnyOption, Option } from "./Autocomplete.types";
+import { type AnyOption, type Option } from "./Autocomplete.types";
 export declare enum KeyboardAction {
     Previous = -1,
     Next = 1,

package/dist/Autocomplete/useRepositionMenu.d.ts

@@ -1,4 +1,4 @@
-import { MenuProps } from "./Autocomplete.types";
+import type { MenuProps } from "./Autocomplete.types";
 export interface UseRepositionMenu {
     readonly menuRef: HTMLElement | null;
     readonly setMenuRef: (ref: HTMLElement | null) => void;

package/dist/Autocomplete-cjs.js

@@ -7,6 +7,7 @@ var classnames = require('classnames');
 var useIsMounted = require('./useIsMounted-cjs.js');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
 var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
+var maxHeight = require('./maxHeight-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
 var Icon = require('./Icon-cjs.js');
@@ -17,7 +18,6 @@ var FormField = require('./FormField-cjs.js');
 var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","heading":"PWZL-94hH7k-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
 
 const AUTOCOMPLETE_MAX_HEIGHT = 300;
-const AUTCOMPLETE_MIN_HEIGHT = 100;
 
 function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
     const { refs, floatingStyles, update } = floatingUi_react.useFloating(Object.assign({ placement: "bottom", middleware: [
@@ -25,13 +25,11 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
             floatingUi_react.flip({ fallbackPlacements: ["top"] }),
             floatingUi_react.size({
                 apply({ availableHeight, elements }) {
-                    // Limit the height for a true maximum
-                    // However if we have less space than that, then reduce it to allow scrolling
-                    const maxHeight = availableHeight > AUTOCOMPLETE_MAX_HEIGHT
-                        ? AUTOCOMPLETE_MAX_HEIGHT
-                        : Math.max(AUTCOMPLETE_MIN_HEIGHT, availableHeight);
+                    const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
+                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
+                    });
                     Object.assign(elements.floating.style, {
-                        maxHeight: `${maxHeight}px`,
+                        maxHeight: `${maxHeight$1}px`,
                     });
                 },
             }),
@@ -44,7 +42,7 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
         : {})));
     // While DefaultMenu leverages conditional rendering, CustomMenu is hidden with CSS
     // We need to apply the correct update method to each case
-    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
             const cleanup = floatingUi_react.autoUpdate(attachTo, refs.floating.current, update);
             return cleanup;
@@ -88,7 +86,7 @@ function useAutocompleteMenu({ attachTo, }) {
     return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
 }
 function BaseAutocompleteMenuWrapper(props) {
-    const mounted = useIsMounted.useIsMounted_2();
+    const mounted = useIsMounted.useIsMounted();
     const menu = React.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
     return mounted.current ? React.createElement(floatingUi_react.FloatingPortal, null, menu) : menu;
 }
@@ -162,13 +160,13 @@ exports.KeyboardAction = void 0;
  * Use this hook if you are using components in the menu that aren't MenuOption or BaseMenuOption.
  */
 function useCustomKeyboardNavigation({ onRequestHighlightChange, }) {
-    useOnKeyDown.useOnKeyDown_2((event) => {
+    useOnKeyDown.useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Next);
     }, "ArrowDown");
-    useOnKeyDown.useOnKeyDown_2((event) => {
+    useOnKeyDown.useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Previous);
     }, "ArrowUp");
-    useOnKeyDown.useOnKeyDown_2((event) => {
+    useOnKeyDown.useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Select);
     }, "Enter");
 }
@@ -280,7 +278,7 @@ function AutocompleteInternal(_a, ref) {
     const [inputFocused, setInputFocused] = React.useState(false);
     const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
     const [autocompleteRef, setAutocompleteRef] = React.useState(null);
-    const delayedSearch = useDebounce.useDebounce_2(updateSearch, debounceRate);
+    const delayedSearch = useDebounce.useDebounce(updateSearch, debounceRate);
     const inputRef = React.useRef(null);
     React.useEffect(() => {
         delayedSearch();

package/dist/Autocomplete-es.js

@@ -1,21 +1,21 @@
 import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
 import React__default, { useCallback, useEffect, useState, forwardRef, useMemo, useRef } from 'react';
-import { u as useDebounce_2 } from './useDebounce-es.js';
+import { u as useDebounce } from './useDebounce-es.js';
 import classnames from 'classnames';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
-import { b as useFloating, o as offset, i as flip, q as size, d as autoUpdate, h as FloatingPortal } from './floating-ui.react-es.js';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
+import { u as useIsMounted } from './useIsMounted-es.js';
+import { u as useFloating, o as offset, f as flip, s as size, c as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useSafeLayoutEffect } from './useSafeLayoutEffect-es.js';
+import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
 import { I as Icon } from './Icon-es.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
+import { u as useOnKeyDown } from './useOnKeyDown-es.js';
 import { InputText } from './InputText/index.mjs';
 import { m as mergeRefs } from './FormField-es.js';
 
 var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","heading":"PWZL-94hH7k-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
 
 const AUTOCOMPLETE_MAX_HEIGHT = 300;
-const AUTCOMPLETE_MIN_HEIGHT = 100;
 
 function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
     const { refs, floatingStyles, update } = useFloating(Object.assign({ placement: "bottom", middleware: [
@@ -23,11 +23,9 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
             flip({ fallbackPlacements: ["top"] }),
             size({
                 apply({ availableHeight, elements }) {
-                    // Limit the height for a true maximum
-                    // However if we have less space than that, then reduce it to allow scrolling
-                    const maxHeight = availableHeight > AUTOCOMPLETE_MAX_HEIGHT
-                        ? AUTOCOMPLETE_MAX_HEIGHT
-                        : Math.max(AUTCOMPLETE_MIN_HEIGHT, availableHeight);
+                    const maxHeight = calculateMaxHeight(availableHeight, {
+                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
+                    });
                     Object.assign(elements.floating.style, {
                         maxHeight: `${maxHeight}px`,
                     });
@@ -42,7 +40,7 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
         : {})));
     // While DefaultMenu leverages conditional rendering, CustomMenu is hidden with CSS
     // We need to apply the correct update method to each case
-    useSafeLayoutEffect_1(() => {
+    useSafeLayoutEffect(() => {
         if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
             const cleanup = autoUpdate(attachTo, refs.floating.current, update);
             return cleanup;
@@ -86,7 +84,7 @@ function useAutocompleteMenu({ attachTo, }) {
     return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
 }
 function BaseAutocompleteMenuWrapper(props) {
-    const mounted = useIsMounted_2();
+    const mounted = useIsMounted();
     const menu = React__default.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
     return mounted.current ? React__default.createElement(FloatingPortal, null, menu) : menu;
 }
@@ -160,13 +158,13 @@ var KeyboardAction;
  * Use this hook if you are using components in the menu that aren't MenuOption or BaseMenuOption.
  */
 function useCustomKeyboardNavigation({ onRequestHighlightChange, }) {
-    useOnKeyDown_2((event) => {
+    useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Next);
     }, "ArrowDown");
-    useOnKeyDown_2((event) => {
+    useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Previous);
     }, "ArrowUp");
-    useOnKeyDown_2((event) => {
+    useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Select);
     }, "Enter");
 }
@@ -278,7 +276,7 @@ function AutocompleteInternal(_a, ref) {
     const [inputFocused, setInputFocused] = useState(false);
     const [inputText, setInputText] = useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
     const [autocompleteRef, setAutocompleteRef] = useState(null);
-    const delayedSearch = useDebounce_2(updateSearch, debounceRate);
+    const delayedSearch = useDebounce(updateSearch, debounceRate);
     const inputRef = useRef(null);
     useEffect(() => {
         delayedSearch();

package/dist/Avatar/Avatar.d.ts

@@ -1,6 +1,7 @@
-import React, { CSSProperties } from "react";
-import { XOR } from "ts-xor";
-import { IconProps } from "../Icon";
+import type { CSSProperties } from "react";
+import React from "react";
+import type { XOR } from "ts-xor";
+import type { IconProps } from "../Icon";
 type AvatarSize = "base" | "large" | "small";
 interface AvatarFoundationProps {
     /**

package/dist/Avatar/index.d.ts

@@ -1 +1 @@
-export { Avatar, AvatarProps } from "./Avatar";
+export { Avatar, type AvatarProps } from "./Avatar";

package/dist/Banner/Banner.types.d.ts

@@ -1,8 +1,8 @@
 import { type CSSProperties, type PropsWithChildren, type ReactNode } from "react";
-import { type IconNames, tokens } from "@jobber/design";
+import type { IconNames, tokens } from "@jobber/design";
 import { type ButtonProps } from "../Button";
 import { type ButtonDismissProps } from "../ButtonDismiss";
-import { IconProps } from "../Icon";
+import type { IconProps } from "../Icon";
 export type BannerType = "notice" | "success" | "warning" | "error";
 type TokensType = keyof typeof tokens;
 type Prefixes = TokensType extends `${infer Prefix}-${string}` ? Prefix : never;

package/dist/Banner/BannerContext.d.ts

@@ -1,4 +1,4 @@
-import { BannerType } from "./Banner.types";
+import type { BannerType } from "./Banner.types";
 interface BannerContextValue {
     /**
      * The status-based theme of the Banner.

package/dist/Banner-cjs.js

@@ -58,7 +58,7 @@ function InternalWrapper({ children, icon, dismissButton, UNSAFE_className, UNSA
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
         widths: bannerWidths,
     });
     const bannerClassNames = classnames(styles.banner, [styles[type]], {

package/dist/Banner-es.js

@@ -56,7 +56,7 @@ function InternalWrapper({ children, icon, dismissButton, UNSAFE_className, UNSA
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver({
         widths: bannerWidths,
     });
     const bannerClassNames = classnames(styles.banner, [styles[type]], {

package/dist/Button/Button.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-import { ButtonProps } from "./Button.types";
+import { type ButtonProps } from "./Button.types";
 import { ButtonIcon, ButtonLabel } from "./ButtonInternals";
 declare function Button(props: ButtonProps): React.JSX.Element;
 declare namespace Button {
     var Label: typeof ButtonLabel;
     var Icon: typeof ButtonIcon;
 }
-export { Button, ButtonProps };
+export type { ButtonProps };
+export { Button };

package/dist/Button/Button.types.d.ts

@@ -1,9 +1,9 @@
-import { IconNames } from "@jobber/design";
-import { LinkProps } from "react-router-dom";
-import { XOR } from "ts-xor";
-import { CSSProperties } from "react";
-import { TypographyProps } from "../Typography/Typography";
-import { IconProps } from "../Icon/Icon";
+import type { IconNames } from "@jobber/design";
+import type { LinkProps } from "react-router-dom";
+import type { XOR } from "ts-xor";
+import type { CSSProperties } from "react";
+import type { TypographyProps } from "../Typography/Typography";
+import type { IconProps } from "../Icon/Icon";
 export type HTMLButtonType = "button" | "submit";
 export type ButtonVariation = "work" | "learning" | "subtle" | "destructive";
 export type ButtonSize = "small" | "base" | "large";

package/dist/Button/ButtonInternals.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ButtonProps } from "./Button.types";
-import { IconProps } from "../Icon";
-import { TypographyProps } from "../Typography";
+import { type ButtonProps } from "./Button.types";
+import { type IconProps } from "../Icon";
+import { type TypographyProps } from "../Typography";
 /**
  * For backwards compatibility with the legacy button
  * @deprecated Used composed solution instead

package/dist/Button/ButtonProvider.d.ts

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren } from "react";
-import { ButtonSize } from "./Button.types";
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { ButtonSize } from "./Button.types";
 interface ButtonContextProps {
     size: ButtonSize;
 }

package/dist/Button/index.d.ts

@@ -1,4 +1,4 @@
 export { Button } from "./Button";
-export * from "./Button.types";
-export { useButtonStyles, UseButtonStylesProps } from "./useButtonStyles";
+export type * from "./Button.types";
+export { useButtonStyles, type UseButtonStylesProps } from "./useButtonStyles";
 export { useButtonContext } from "./ButtonProvider";

package/dist/Button/useButtonStyles.d.ts

@@ -1,4 +1,4 @@
-import { ButtonSize, ButtonType, ButtonVariation } from "./Button.types";
+import type { ButtonSize, ButtonType, ButtonVariation } from "./Button.types";
 /**
  * The props that are used to style the button
  */

package/dist/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CardBodyProps, CardHeaderProps, CardProps } from "./types";
+import type { CardBodyProps, CardHeaderProps, CardProps } from "./types";
 /**
  * Props for a card that acts as a link.
  * When url is provided, the card becomes clickable and navigates to the specified URL.

package/dist/Card/CardClickable.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 interface ClickableCardProps {
     onClick(event: React.MouseEvent<HTMLElement>): void;
     readonly className: string;

package/dist/Card/CardHeader.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CardProps } from "./types";
+import type { CardProps } from "./types";
 /**
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.

package/dist/Card/index.cjs

@@ -12,14 +12,14 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
-require('react-popper');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('react-dom');
 require('../useFocusTrap-cjs.js');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
 
 
 

package/dist/Card/index.mjs

@@ -10,11 +10,11 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
-import 'react-popper';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
+import '../floating-ui.react-es.js';
 import 'react-dom';
 import '../useFocusTrap-es.js';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';

package/dist/Card/types.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement, ReactNode } from "react";
-import colors from "./cardcolors.module.css";
-import { ButtonProps } from "../Button";
-import { MenuProps } from "../Menu";
+import type { ReactElement, ReactNode } from "react";
+import type colors from "./cardcolors.module.css";
+import { type ButtonProps } from "../Button";
+import { type MenuProps } from "../Menu";
 export type ActionProps = ReactElement<Omit<ButtonProps, "size" | "fullWidth"> | MenuProps>;
 export interface HeaderActionProps {
     /**

package/dist/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { CheckboxLegacyProps } from "./Checkbox.types";
+import type { CheckboxLegacyProps } from "./Checkbox.types";
 export declare function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, children, onBlur, onChange, onFocus, }: CheckboxLegacyProps): React.JSX.Element;

package/dist/Checkbox/Checkbox.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
-import { XOR } from "ts-xor";
+import type { ReactElement, ReactNode } from "react";
+import type { XOR } from "ts-xor";
 export interface BaseCheckboxProps {
     /**
      * Determines if the checkbox is checked or not.

package/dist/Checkbox/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CheckboxLegacyProps, CheckboxRebuiltProps } from "./Checkbox.types";
+import type { CheckboxLegacyProps, CheckboxRebuiltProps } from "./Checkbox.types";
 type CheckboxShimProps = CheckboxLegacyProps | CheckboxRebuiltProps;
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxShimProps & React.RefAttributes<HTMLInputElement>>;
 export type { CheckboxLegacyProps, CheckboxRebuiltProps };