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

package/dist/Autocomplete/tests/Autocomplete.setup.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { type AutocompleteRebuiltProps, type MenuItem, type OptionLike } from "../Autocomplete.types";
+export declare function Wrapper<T extends OptionLike>({ initialValue, initialInputValue, onChange, onInputChange, onBlur, onFocus, menu, openOnFocus, filterOptions, emptyActions, customRenderOption, customRenderAction, customRenderSection, customRenderInput, customRenderHeader, customRenderFooter, loading, customRenderLoading, emptyStateMessage, ref, readOnly, UNSAFE_className, UNSAFE_styles, debounce, }: {
+    readonly initialValue?: T;
+    readonly initialInputValue?: string;
+    readonly onChange?: (v: T | undefined) => void;
+    readonly onInputChange?: (v: string) => void;
+    readonly onBlur?: () => void;
+    readonly onFocus?: () => void;
+    readonly menu?: MenuItem<T>[];
+    readonly openOnFocus?: boolean;
+    readonly filterOptions?: false | ((opts: T[], input: string) => T[]);
+    readonly emptyActions?: AutocompleteRebuiltProps<T, false>["emptyActions"];
+    readonly customRenderOption?: AutocompleteRebuiltProps<T, false>["customRenderOption"];
+    readonly customRenderAction?: AutocompleteRebuiltProps<T, false>["customRenderAction"];
+    readonly customRenderInput?: AutocompleteRebuiltProps<T, false>["customRenderInput"];
+    readonly customRenderHeader?: AutocompleteRebuiltProps<T, false>["customRenderHeader"];
+    readonly customRenderFooter?: AutocompleteRebuiltProps<T, false>["customRenderFooter"];
+    readonly customRenderSection?: AutocompleteRebuiltProps<T, false>["customRenderSection"];
+    readonly loading?: boolean;
+    readonly customRenderLoading?: React.ReactNode;
+    readonly emptyStateMessage?: React.ReactNode;
+    readonly ref?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+    readonly UNSAFE_className?: AutocompleteRebuiltProps<T, false>["UNSAFE_className"];
+    readonly UNSAFE_styles?: AutocompleteRebuiltProps<T, false>["UNSAFE_styles"];
+    readonly readOnly?: boolean;
+    readonly debounce?: number;
+}): React.JSX.Element;
+export declare function FreeFormWrapper({ initialValue, initialInputValue, onChange, onInputChange, menu, openOnFocus, inputEqualsOption, debounce, }: {
+    readonly initialValue?: OptionLike;
+    readonly initialInputValue?: string;
+    readonly onChange?: (v: OptionLike | undefined) => void;
+    readonly onInputChange?: (v: string) => void;
+    readonly menu?: MenuItem<OptionLike>[];
+    readonly openOnFocus?: boolean;
+    readonly inputEqualsOption?: (input: string, option: OptionLike) => boolean;
+    readonly debounce?: number;
+}): React.JSX.Element;

package/dist/Autocomplete/useAutocomplete.d.ts

@@ -0,0 +1,66 @@
+import type React from "react";
+import type { ActionConfig, ActionOrigin, AutocompleteRebuiltProps, MenuAction, MenuSection, OptionLike } from "./Autocomplete.types";
+export type RenderItem<T extends OptionLike, S extends object = Record<string, unknown>, A extends object = Record<string, unknown>> = {
+    kind: "option";
+    value: T;
+} | {
+    kind: "action";
+    action: MenuAction<A>;
+    origin?: ActionOrigin;
+} | {
+    kind: "section";
+    section: MenuSection<T, S, A>;
+};
+export declare function useAutocomplete<Value extends OptionLike, Multiple extends boolean = false, SectionExtra extends object = Record<string, unknown>, ActionExtra extends object = Record<string, unknown>>(props: AutocompleteRebuiltProps<Value, Multiple, SectionExtra, ActionExtra>): {
+    renderable: RenderItem<Value, SectionExtra, ActionExtra>[];
+    optionCount: number;
+    persistentsHeaders: import("./Autocomplete.types").MenuHeader<ActionExtra>[];
+    persistentsFooters: import("./Autocomplete.types").MenuFooter<ActionExtra>[];
+    headerInteractiveCount: number;
+    middleNavigableCount: number;
+    getOptionLabel: (opt: Value) => string;
+    isOptionSelected: (opt: Value) => boolean;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    floatingStyles: React.CSSProperties;
+    context: {
+        x: number;
+        y: number;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    activeIndex: number | null;
+    setActiveIndex: (index: number | null) => void;
+    listRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    onSelection: (option: Value) => void;
+    onAction: (action: ActionConfig) => void;
+    onInputChangeFromUser: (val: string) => void;
+    onInputBlur: () => void;
+    onInputFocus: () => void;
+    onInputKeyDown: (event: React.KeyboardEvent) => void;
+    setReferenceElement: (el: HTMLElement | null) => void;
+};

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

@@ -0,0 +1,14 @@
+import type React from "react";
+import type { ActionConfig, MenuFooter, MenuHeader, MenuItem, MenuOptions, MenuSection, OptionLike } from "../Autocomplete.types";
+import type { RenderItem } from "../useAutocomplete";
+export declare function flattenMenu<Value extends OptionLike, S extends object, A extends object>(menu: MenuItem<Value, S, A>[]): {
+    optionItems: Value[];
+    sections: (MenuSection<Value, S, A> | MenuOptions<Value, A>)[];
+    persistentsHeaders: MenuHeader<A>[];
+    persistentsFooters: MenuFooter<A>[];
+};
+export declare function buildItemsForGroup<Value extends OptionLike, S extends object, A extends object>(group: MenuSection<Value, S, A> | MenuOptions<Value, A>, optionsFilter?: (opts: Value[]) => Value[]): Array<RenderItem<Value, S, A>>;
+export declare function buildRenderableList<Value extends OptionLike, S extends object, A extends object>(sections: Array<MenuSection<Value, S, A> | MenuOptions<Value, A>>, optionsFilter?: (opts: Value[]) => Value[]): RenderItem<Value, S, A>[];
+export declare function getNavigableItemAtIndex<Value extends OptionLike, S extends object, A extends object>(activeIndex: number | null, renderable: Array<RenderItem<Value, S, A>>): RenderItem<Value, S, A> | null;
+export declare function findNavigableIndexForValue<Value extends OptionLike, S extends object, A extends object>(renderable: Array<RenderItem<Value, S, A>>, equals: (a: Value, b: Value) => boolean, selectedValue: Value): number | null;
+export declare function invokeActiveItemOnEnter<Value extends OptionLike, S extends object, A extends object>(event: React.KeyboardEvent, activeIndex: number | null, renderable: Array<RenderItem<Value, S, A>>, onSelect: (option: Value) => void, onAction: (action: ActionConfig) => void): void;

package/dist/Banner/index.cjs

@@ -4,12 +4,7 @@ var Banner = require('../Banner-cjs.js');
 require('../tslib.es6-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('../ButtonDismiss-cjs.js');

package/dist/Banner/index.mjs

@@ -2,12 +2,7 @@ export { B as Banner } from '../Banner-es.js';
 import '../tslib.es6-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 '../ButtonDismiss-es.js';

package/dist/Banner-cjs.js

@@ -3,7 +3,7 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 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 ButtonDismiss = require('./ButtonDismiss-cjs.js');
 var Button = require('./Button-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 }] = jobberHooks.useResizeObserver({
         widths: bannerWidths,
     });
     const bannerClassNames = classnames(styles.banner, [styles[type]], {

package/dist/Banner-es.js

@@ -1,7 +1,7 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { createContext, useContext, useState } from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { useResizeObserver } from '@jobber/hooks';
 import { I as Icon } from './Icon-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 import { B as Button } from './Button-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-cjs.js

@@ -74,7 +74,7 @@ function Button(props) {
         React.createElement(ButtonWrapper, Object.assign({}, props))));
 }
 function ButtonWrapper(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, loading, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
     const { combined } = useButtonStyles(props);
     const buttonType = submit ? "submit" : "button";
     const buttonClassNames = classnames(combined, UNSAFE_className.container);
@@ -82,7 +82,7 @@ function ButtonWrapper(props) {
         id, style: UNSAFE_style.container }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && {
         target: "_blank",
         rel: "noopener noreferrer",
-    })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-busy": loading, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
     const buttonInternals = children || React.createElement(ButtonContent, Object.assign({}, props));
     if (to) {
         return (React.createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));

package/dist/Button-es.js

@@ -72,7 +72,7 @@ function Button(props) {
         React__default.createElement(ButtonWrapper, Object.assign({}, props))));
 }
 function ButtonWrapper(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, loading, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
     const { combined } = useButtonStyles(props);
     const buttonType = submit ? "submit" : "button";
     const buttonClassNames = classnames(combined, UNSAFE_className.container);
@@ -80,7 +80,7 @@ function ButtonWrapper(props) {
         id, style: UNSAFE_style.container }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && {
         target: "_blank",
         rel: "noopener noreferrer",
-    })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-busy": loading, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
     const buttonInternals = children || React__default.createElement(ButtonContent, Object.assign({}, props));
     if (to) {
         return (React__default.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));

package/dist/Card/CardClickable.d.ts

@@ -4,10 +4,12 @@ interface ClickableCardProps {
     onClick(event: React.MouseEvent<HTMLElement>): void;
     readonly className: string;
     readonly children: ReactNode | ReactNode[];
+    readonly UNSAFE_className?: string;
+    readonly UNSAFE_style?: React.CSSProperties;
 }
 /**
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-export declare function CardClickable({ className, onClick, children, }: ClickableCardProps): React.JSX.Element;
+export declare function CardClickable({ className, onClick, children, UNSAFE_style, }: ClickableCardProps): React.JSX.Element;
 export {};

package/dist/Card/CardHeader.d.ts

@@ -4,4 +4,4 @@ import type { CardProps } from "./types";
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-export declare function CardHeader({ title, header, }: Pick<CardProps, "title" | "header">): React.JSX.Element;
+export declare function CardHeader({ title, header, UNSAFE_className, UNSAFE_style, }: Pick<CardProps, "title" | "header" | "UNSAFE_className" | "UNSAFE_style">): React.JSX.Element;

package/dist/Card/index.cjs

@@ -12,12 +12,10 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useRefocusOnActivator-cjs.js');
+require('@jobber/hooks');
 require('../floating-ui.react-cjs.js');
+require('react/jsx-runtime');
 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,9 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useRefocusOnActivator-es.js';
+import '@jobber/hooks';
 import '../floating-ui.react-es.js';
+import 'react/jsx-runtime';
 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,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 import type colors from "./cardcolors.module.css";
 import { type ButtonProps } from "../Button";
 import { type MenuProps } from "../Menu";
@@ -31,6 +31,24 @@ export interface CardProps {
      */
     readonly header?: string | HeaderActionProps | ReactElement;
     readonly elevation?: elevationProp;
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+        header?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+        header?: CSSProperties;
+    };
 }
 export interface CardHeaderProps {
     readonly children: ReactNode;

package/dist/Card-cjs.js

@@ -18,9 +18,9 @@ const SPACEBAR_KEY = " ";
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-function CardClickable({ className, onClick, children, }) {
+function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
     const cardRef = React.useRef();
-    return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
+    return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;
     }
@@ -43,7 +43,7 @@ function CardClickable({ className, onClick, children, }) {
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-function CardHeader({ title, header, }) {
+function CardHeader({ title, header, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const heading = title || header;
     if (React.isValidElement(heading))
         return React.createElement(React.Fragment, null, heading);
@@ -51,7 +51,7 @@ function CardHeader({ title, header, }) {
         const titleString = typeof heading === "string"
             ? heading
             : heading.title;
-        return (React.createElement("div", { className: styles.header },
+        return (React.createElement("div", { className: classnames(styles.header, UNSAFE_className.header), style: UNSAFE_style.header },
             titleString && React.createElement(Heading.Heading, { level: 2 }, titleString),
             typeof heading === "object" &&
                 renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
@@ -107,30 +107,31 @@ function CardHeaderCompoundComponent({ children }) {
 function CardBodyCompoundComponent({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
-function renderCardContent(children, title, header) {
+function renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(CardHeader, { title: title, header: header }),
+        React.createElement(CardHeader, { title: title, header: header, UNSAFE_className: { header: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header }, UNSAFE_style: { header: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header } }),
         children));
 }
-function renderCardWrapper(className, content, onClick, url, external) {
+function renderCardWrapper(className, content, onClick, url, external, UNSAFE_className, UNSAFE_style) {
+    const combinedClassName = classnames(className, UNSAFE_className);
     if (onClick) {
-        return (React.createElement(CardClickable, { className: className, onClick: onClick }, content));
+        return (React.createElement(CardClickable, { className: combinedClassName, onClick: onClick, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, content));
     }
     if (url) {
-        return (React.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
+        return (React.createElement("a", Object.assign({ className: combinedClassName, href: url, style: UNSAFE_style }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
     }
-    return React.createElement("div", { className: className }, content);
+    return (React.createElement("div", { className: combinedClassName, style: UNSAFE_style }, content));
 }
 function Card(props) {
-    const { accent, header, children, title, elevation = "none", onClick, url, external, } = props;
+    const { accent, header, children, title, elevation = "none", onClick, url, external, UNSAFE_className = {}, UNSAFE_style = {}, } = props;
     const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
     const isUsingCompoundPattern = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         (child.type === CardHeaderCompoundComponent ||
             child.type === CardBodyCompoundComponent));
     const content = isUsingCompoundPattern
         ? children
-        : renderCardContent(children, title, header);
-    return renderCardWrapper(className, content, onClick, url, external);
+        : renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style);
+    return renderCardWrapper(className, content, onClick, url, external, UNSAFE_className.container, UNSAFE_style.container);
 }
 Card.Header = CardHeaderCompoundComponent;
 Card.Body = CardBodyCompoundComponent;

package/dist/Card-es.js

@@ -16,9 +16,9 @@ const SPACEBAR_KEY = " ";
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-function CardClickable({ className, onClick, children, }) {
+function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
     const cardRef = useRef();
-    return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
+    return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;
     }
@@ -41,7 +41,7 @@ function CardClickable({ className, onClick, children, }) {
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-function CardHeader({ title, header, }) {
+function CardHeader({ title, header, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const heading = title || header;
     if (React__default.isValidElement(heading))
         return React__default.createElement(React__default.Fragment, null, heading);
@@ -49,7 +49,7 @@ function CardHeader({ title, header, }) {
         const titleString = typeof heading === "string"
             ? heading
             : heading.title;
-        return (React__default.createElement("div", { className: styles.header },
+        return (React__default.createElement("div", { className: classnames(styles.header, UNSAFE_className.header), style: UNSAFE_style.header },
             titleString && React__default.createElement(Heading, { level: 2 }, titleString),
             typeof heading === "object" &&
                 renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
@@ -105,30 +105,31 @@ function CardHeaderCompoundComponent({ children }) {
 function CardBodyCompoundComponent({ children }) {
     return React__default.createElement(React__default.Fragment, null, children);
 }
-function renderCardContent(children, title, header) {
+function renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style) {
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(CardHeader, { title: title, header: header }),
+        React__default.createElement(CardHeader, { title: title, header: header, UNSAFE_className: { header: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header }, UNSAFE_style: { header: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header } }),
         children));
 }
-function renderCardWrapper(className, content, onClick, url, external) {
+function renderCardWrapper(className, content, onClick, url, external, UNSAFE_className, UNSAFE_style) {
+    const combinedClassName = classnames(className, UNSAFE_className);
     if (onClick) {
-        return (React__default.createElement(CardClickable, { className: className, onClick: onClick }, content));
+        return (React__default.createElement(CardClickable, { className: combinedClassName, onClick: onClick, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, content));
     }
     if (url) {
-        return (React__default.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
+        return (React__default.createElement("a", Object.assign({ className: combinedClassName, href: url, style: UNSAFE_style }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
     }
-    return React__default.createElement("div", { className: className }, content);
+    return (React__default.createElement("div", { className: combinedClassName, style: UNSAFE_style }, content));
 }
 function Card(props) {
-    const { accent, header, children, title, elevation = "none", onClick, url, external, } = props;
+    const { accent, header, children, title, elevation = "none", onClick, url, external, UNSAFE_className = {}, UNSAFE_style = {}, } = props;
     const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
     const isUsingCompoundPattern = React__default.Children.toArray(children).some(child => React__default.isValidElement(child) &&
         (child.type === CardHeaderCompoundComponent ||
             child.type === CardBodyCompoundComponent));
     const content = isUsingCompoundPattern
         ? children
-        : renderCardContent(children, title, header);
-    return renderCardWrapper(className, content, onClick, url, external);
+        : renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style);
+    return renderCardWrapper(className, content, onClick, url, external, UNSAFE_className.container, UNSAFE_style.container);
 }
 Card.Header = CardHeaderCompoundComponent;
 Card.Body = CardBodyCompoundComponent;

package/dist/Chip/index.cjs

@@ -4,7 +4,7 @@ var Chip = require('../Chip-cjs.js');
 var ChipDismissible = require('../ChipDismissible-cjs.js');
 require('react');
 require('classnames');
-require('../useInView-cjs.js');
+require('@jobber/hooks');
 require('../Avatar-cjs.js');
 require('color');
 require('../Icon-cjs.js');
@@ -13,10 +13,9 @@ require('../useChildComponent-cjs.js');
 require('../Typography-cjs.js');
 require('../Tooltip-cjs.js');
 require('../floating-ui.react-cjs.js');
+require('react/jsx-runtime');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-cjs.js');
-require('../useIsMounted-cjs.js');
 require('../tslib.es6-cjs.js');
 
 

package/dist/Chip/index.mjs

@@ -2,7 +2,7 @@ export { C as Chip } from '../Chip-es.js';
 export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-es.js';
 import 'react';
 import 'classnames';
-import '../useInView-es.js';
+import '@jobber/hooks';
 import '../Avatar-es.js';
 import 'color';
 import '../Icon-es.js';
@@ -11,8 +11,7 @@ import '../useChildComponent-es.js';
 import '../Typography-es.js';
 import '../Tooltip-es.js';
 import '../floating-ui.react-es.js';
+import 'react/jsx-runtime';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-es.js';
-import '../useIsMounted-es.js';
 import '../tslib.es6-es.js';

package/dist/Chip-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useInView = require('./useInView-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var Avatar = require('./Avatar-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var useChildComponent = require('./useChildComponent-cjs.js');
@@ -72,8 +72,8 @@ const ChipComponent = React.forwardRef(({ ariaLabel, disabled, heading, invalid,
     });
     const prefix = useChildComponent.useChildComponent(children, d => d.type === ChipPrefix);
     const suffix = useChildComponent.useChildComponent(children, d => d.type === ChipSuffix);
-    const [labelRef, labelFullyVisible] = useInView.useInView_2();
-    const [headingRef, headingFullyVisible] = useInView.useInView_2();
+    const [labelRef, labelFullyVisible] = jobberHooks.useInView();
+    const [headingRef, headingFullyVisible] = jobberHooks.useInView();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
     const chipContent = (React.createElement(React.Fragment, null,
         prefix,

package/dist/Chip-es.js

@@ -1,6 +1,6 @@
 import React__default, { useRef, forwardRef } from 'react';
 import classnames from 'classnames';
-import { u as useInView_2 } from './useInView-es.js';
+import { useInView } from '@jobber/hooks';
 import { A as Avatar } from './Avatar-es.js';
 import { I as Icon } from './Icon-es.js';
 import { u as useChildComponent } from './useChildComponent-es.js';
@@ -70,8 +70,8 @@ const ChipComponent = forwardRef(({ ariaLabel, disabled, heading, invalid, label
     });
     const prefix = useChildComponent(children, d => d.type === ChipPrefix);
     const suffix = useChildComponent(children, d => d.type === ChipSuffix);
-    const [labelRef, labelFullyVisible] = useInView_2();
-    const [headingRef, headingFullyVisible] = useInView_2();
+    const [labelRef, labelFullyVisible] = useInView();
+    const [headingRef, headingFullyVisible] = useInView();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
     const chipContent = (React__default.createElement(React__default.Fragment, null,
         prefix,

package/dist/Chips/InternalChipDismissible/hooks/index.cjs

@@ -14,10 +14,12 @@ require('../../../_baseEach-cjs.js');
 require('../../../_baseFor-cjs.js');
 require('../../../_isIterateeCall-cjs.js');
 require('../../../_setToString-cjs.js');
+require('@jobber/hooks');
 require('../../../debounce-cjs.js');
 require('../../../Icon-cjs.js');
 require('@jobber/design');
 require('../../../floating-ui.react-cjs.js');
+require('react/jsx-runtime');
 require('react-dom');
 require('../../../maxHeight-cjs.js');
 

package/dist/Chips/InternalChipDismissible/hooks/index.mjs

@@ -12,9 +12,11 @@ import '../../../_baseEach-es.js';
 import '../../../_baseFor-es.js';
 import '../../../_isIterateeCall-es.js';
 import '../../../_setToString-es.js';
+import '@jobber/hooks';
 import '../../../debounce-es.js';
 import '../../../Icon-es.js';
 import '@jobber/design';
 import '../../../floating-ui.react-es.js';
+import 'react/jsx-runtime';
 import 'react-dom';
 import '../../../maxHeight-es.js';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -15,10 +15,12 @@ require('../../_baseEach-cjs.js');
 require('../../_baseFor-cjs.js');
 require('../../_isIterateeCall-cjs.js');
 require('../../_setToString-cjs.js');
+require('@jobber/hooks');
 require('../../debounce-cjs.js');
 require('../../Icon-cjs.js');
 require('@jobber/design');
 require('../../floating-ui.react-cjs.js');
+require('react/jsx-runtime');
 require('react-dom');
 require('../../maxHeight-cjs.js');
 require('classnames');
@@ -29,14 +31,11 @@ require('react-router-dom');
 require('../../tslib.es6-cjs.js');
 require('../../Spinner-cjs.js');
 require('../../Chip-cjs.js');
-require('../../useInView-cjs.js');
 require('../../Avatar-cjs.js');
 require('color');
 require('../../useChildComponent-cjs.js');
 require('../../Tooltip-cjs.js');
 require('framer-motion');
-require('../../useSafeLayoutEffect-cjs.js');
-require('../../useIsMounted-cjs.js');
 
 
 

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -13,10 +13,12 @@ import '../../_baseEach-es.js';
 import '../../_baseFor-es.js';
 import '../../_isIterateeCall-es.js';
 import '../../_setToString-es.js';
+import '@jobber/hooks';
 import '../../debounce-es.js';
 import '../../Icon-es.js';
 import '@jobber/design';
 import '../../floating-ui.react-es.js';
+import 'react/jsx-runtime';
 import 'react-dom';
 import '../../maxHeight-es.js';
 import 'classnames';
@@ -27,11 +29,8 @@ import 'react-router-dom';
 import '../../tslib.es6-es.js';
 import '../../Spinner-es.js';
 import '../../Chip-es.js';
-import '../../useInView-es.js';
 import '../../Avatar-es.js';
 import 'color';
 import '../../useChildComponent-es.js';
 import '../../Tooltip-es.js';
 import 'framer-motion';
-import '../../useSafeLayoutEffect-es.js';
-import '../../useIsMounted-es.js';