@jobber/components 6.71.3 → 6.73.0

package/dist/Banner/Banner.d.ts

@@ -1,32 +1,10 @@
-import React, { ReactNode } from "react";
-import { IconNames } from "@jobber/design";
-import { BannerType } from "./Banner.types";
-import { ButtonProps } from "../Button";
-interface BannerProps {
-    readonly children: ReactNode;
-    /**
-     * Sets the status-based theme of the Banner
-     */
-    readonly type: BannerType;
-    /**
-     * Accepts props for Button. Default action uses a 'subtle' Button
-     */
-    readonly primaryAction?: ButtonProps;
-    /**
-     * Set to false to hide the dismiss button
-     * @default true
-     */
-    readonly dismissible?: boolean;
-    /**
-     * Use to override the default status Icon
-     */
-    readonly icon?: IconNames;
-    onDismiss?(): void;
-    /**
-     * When provided, Banner's visibility is controlled by this value
-     * @default undefined
-     */
-    readonly controlledVisiblity?: boolean;
+import React from "react";
+import type { BannerActionProps, BannerContentProps, BannerDismissButtonProps, BannerIconProps, BannerProps, BannerProviderProps } from "./Banner.types";
+export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, controlledVisiblity, }: BannerProps): React.JSX.Element;
+export declare namespace Banner {
+    var Provider: ({ children, visible, type, onDismiss, icon, dismissButton, UNSAFE_className, UNSAFE_style, }: BannerProviderProps) => React.JSX.Element;
+    var Icon: ({ backgroundColor, UNSAFE_className, UNSAFE_style, ...iconProps }: BannerIconProps) => React.JSX.Element | null;
+    var Content: (props: BannerContentProps) => React.JSX.Element;
+    var DismissButton: (props: BannerDismissButtonProps) => React.JSX.Element;
+    var Action: ({ UNSAFE_className, UNSAFE_style, ...buttonProps }: BannerActionProps) => React.JSX.Element;
 }
-export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, controlledVisiblity, }: BannerProps): React.JSX.Element | null;
-export {};

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

@@ -1 +1,165 @@
+import { type CSSProperties, type PropsWithChildren, type ReactNode } from "react";
+import { type IconNames, tokens } from "@jobber/design";
+import { type ButtonProps } from "../Button";
+import { type ButtonDismissProps } from "../ButtonDismiss";
+import { IconProps } from "../Icon";
 export type BannerType = "notice" | "success" | "warning" | "error";
+type TokensType = keyof typeof tokens;
+type Prefixes = TokensType extends `${infer Prefix}-${string}` ? Prefix : never;
+type ExtractTokens<T extends string> = Extract<TokensType, `${T}-${string}`>;
+type Tokenize<T extends Prefixes> = ExtractTokens<T> extends `${T}-${infer Value}` ? Value : never;
+type Colors = Tokenize<"color">;
+export interface BannerProps {
+    readonly children: ReactNode;
+    /**
+     * Sets the status-based theme of the Banner
+     */
+    readonly type: BannerType;
+    /**
+     * Accepts props for Button. Default action uses a 'subtle' Button
+     */
+    readonly primaryAction?: ButtonProps;
+    /**
+     * Set to false to hide the dismiss button
+     * @default true
+     */
+    readonly dismissible?: boolean;
+    /**
+     * Use to override the default status Icon
+     */
+    readonly icon?: IconNames;
+    /**
+     * Callback to be called when the Banner is dismissed.
+     */
+    onDismiss?(): void;
+    /**
+     * When provided, Banner's visibility is controlled by this value
+     * @default undefined
+     */
+    readonly controlledVisiblity?: boolean;
+}
+export interface BannerProviderProps extends PropsWithChildren {
+    /**
+     * Sets the status-based theme of the Banner.
+     */
+    readonly type: BannerType;
+    /**
+     * When provided, Banner's visibility is controlled by this value.
+     */
+    readonly visible?: boolean;
+    /**
+     * Callback to be called when the Banner is dismissed.
+     */
+    readonly onDismiss?: () => void;
+    /**
+     * Icon to be used for the Banner.
+     * If you want to remove the icon, set to false.
+     * @default <Banner.Icon/>
+     */
+    readonly icon?: React.ReactNode;
+    /**
+     * Dismiss button to be used for the Banner.
+     * If you want to remove the dismiss button, set to false.
+     * @default <Banner.DismissButton/>
+     */
+    readonly dismissButton?: React.ReactNode;
+    /**
+     * **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?: {
+        readonly container?: 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?: {
+        readonly container?: CSSProperties;
+    };
+}
+export interface BannerContentProps extends PropsWithChildren {
+    /**
+     * **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?: {
+        readonly container?: 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?: {
+        readonly container?: CSSProperties;
+    };
+}
+export interface BannerDismissButtonProps {
+    readonly onClick?: ButtonDismissProps["onClick"];
+    readonly ariaLabel?: ButtonDismissProps["ariaLabel"];
+    /**
+     * **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?: {
+        readonly container?: 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?: {
+        readonly container?: CSSProperties;
+    };
+}
+export interface BannerIconProps extends Partial<Omit<IconProps, "UNSAFE_className" | "UNSAFE_style">> {
+    /**
+     * Sets the background color of the icon.
+     */
+    readonly backgroundColor?: Colors;
+    /**
+     * **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?: {
+        readonly container?: string;
+        readonly icon?: IconProps["UNSAFE_className"];
+    };
+    /**
+     * **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?: {
+        readonly container?: CSSProperties;
+        readonly icon?: IconProps["UNSAFE_style"];
+    };
+}
+export interface BannerActionProps extends Omit<ButtonProps, "UNSAFE_className" | "UNSAFE_style"> {
+    /**
+     * **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?: {
+        readonly container?: string;
+        readonly button?: ButtonProps["UNSAFE_className"];
+    };
+    /**
+     * **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?: {
+        readonly container?: CSSProperties;
+        readonly button?: ButtonProps["UNSAFE_style"];
+    };
+}
+export {};

package/dist/Banner/BannerContext.d.ts

@@ -0,0 +1,18 @@
+import { BannerType } from "./Banner.types";
+interface BannerContextValue {
+    /**
+     * The status-based theme of the Banner.
+     */
+    readonly type: BannerType;
+    /**
+     * Whether the Banner is currently visible.
+     */
+    readonly isVisible: boolean;
+    /**
+     * Sets the visibility of the Banner.
+     */
+    readonly setIsVisible: (visible: boolean) => void;
+}
+export declare const BannerContextProvider: import("react").Provider<BannerContextValue>;
+export declare function useBanner(): BannerContextValue;
+export {};

package/dist/Banner/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var Banner = require('../Banner-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('../useResizeObserver-cjs.js');
@@ -9,15 +10,13 @@ require('../throttle-cjs.js');
 require('../debounce-cjs.js');
 require('../isObjectLike-cjs.js');
 require('../isSymbol-cjs.js');
-require('../BannerIcon-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
-require('../Text-cjs.js');
-require('../Typography-cjs.js');
+require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../tslib.es6-cjs.js');
-require('../ButtonDismiss-cjs.js');
+require('../Typography-cjs.js');
+require('../Text-cjs.js');
 
 
 

package/dist/Banner/index.d.ts

@@ -1,2 +1,2 @@
 export { Banner } from "./Banner";
-export { BannerType } from "./Banner.types";
+export type { BannerType, BannerDismissButtonProps, BannerProviderProps, BannerContentProps, BannerIconProps, } from "./Banner.types";

package/dist/Banner/index.mjs

@@ -1,4 +1,5 @@
 export { B as Banner } from '../Banner-es.js';
+import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../useResizeObserver-es.js';
@@ -7,12 +8,10 @@ import '../throttle-es.js';
 import '../debounce-es.js';
 import '../isObjectLike-es.js';
 import '../isSymbol-es.js';
-import '../BannerIcon-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
-import '../Text-es.js';
-import '../Typography-es.js';
+import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
-import '../tslib.es6-es.js';
-import '../ButtonDismiss-es.js';
+import '../Typography-es.js';
+import '../Text-es.js';

package/dist/Banner-cjs.js

@@ -1,25 +1,29 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var useResizeObserver = require('./useResizeObserver-cjs.js');
-var BannerIcon = require('./BannerIcon-cjs.js');
-var Text = require('./Text-cjs.js');
-var Button = require('./Button-cjs.js');
+var Icon = require('./Icon-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
+var Button = require('./Button-cjs.js');
+var Text = require('./Text-cjs.js');
+
+var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","successIcon":"wc5os7zGk30-","errorIcon":"R0t3TbhBBqo-","warningIcon":"i5fVmbzbYVM-","noticeIcon":"onwyp3UI3so-","spinning":"fZdByimVT5Q-"};
+
+const BannerContext = React.createContext({
+    type: "success",
+    isVisible: true,
+    setIsVisible: () => {
+        // noop
+    },
+});
+const BannerContextProvider = BannerContext.Provider;
+function useBanner() {
+    return React.useContext(BannerContext);
+}
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, controlledVisiblity, }) {
-    const [showBanner, setShowBanner] = React.useState(true);
-    const bannerIcon = icon || getBannerIcon(type);
-    const controlledVisible = controlledVisiblity !== null && controlledVisiblity !== void 0 ? controlledVisiblity : true;
-    const visible = controlledVisible && showBanner;
-    const bannerWidths = {
-        small: 320,
-        medium: 480,
-    };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver.useResizeObserver({
-        widths: bannerWidths,
-    });
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
             size: "small",
@@ -27,27 +31,85 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
             variation: "subtle",
         }, primaryAction);
     }
-    const bannerClassNames = classnames(BannerIcon.styles.banner, [BannerIcon.styles[type]], {
-        [BannerIcon.styles.medium]: bannerWidth >= bannerWidths.medium,
-    });
-    if (!visible)
-        return null;
-    return (React.createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React.createElement("div", { className: BannerIcon.styles.bannerContent },
-            bannerIcon && React.createElement(BannerIcon.BannerIcon, { icon: bannerIcon, type: type }),
-            React.createElement("div", { className: BannerIcon.styles.bannerChildren },
-                React.createElement(BannerChildren, null, children)),
-            primaryAction && (React.createElement("div", { className: BannerIcon.styles.bannerAction },
-                React.createElement(Button.Button, Object.assign({}, primaryAction))))),
-        dismissible && (React.createElement("div", { className: BannerIcon.styles.closeButton },
-            React.createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Dismiss notification", onClick: handleClose })))));
-    function handleClose() {
-        if (typeof controlledVisiblity === "undefined") {
-            setShowBanner(!showBanner);
+    return (React.createElement(Banner.Provider, { type: type, visible: controlledVisiblity, onDismiss: onDismiss, icon: React.createElement(Banner.Icon, { name: icon }), dismissButton: dismissible && React.createElement(Banner.DismissButton, null) },
+        React.createElement(Banner.Content, null, children),
+        primaryAction && React.createElement(Banner.Action, Object.assign({}, primaryAction))));
+}
+Banner.Provider = function BannerProvider({ children, visible, type, onDismiss, icon, dismissButton, UNSAFE_className, UNSAFE_style, }) {
+    const [isVisible, _setIsVisible] = React.useState(true);
+    const showBanner = visible !== null && visible !== void 0 ? visible : isVisible;
+    const setIsVisible = (newValue) => {
+        // Only update internal visibility if it's not controlled by the parent.
+        if (typeof visible === "undefined") {
+            _setIsVisible(newValue);
         }
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    }
+    };
+    return (React.createElement(BannerContextProvider, { value: {
+            type,
+            isVisible: showBanner,
+            setIsVisible,
+        } },
+        React.createElement(InternalWrapper, { icon: icon, dismissButton: dismissButton, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, children)));
+};
+function InternalWrapper({ children, icon, dismissButton, UNSAFE_className, UNSAFE_style, }) {
+    const { isVisible, type } = useBanner();
+    const bannerWidths = {
+        small: 320,
+        medium: 480,
+    };
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver.useResizeObserver({
+        widths: bannerWidths,
+    });
+    const bannerClassNames = classnames(styles.banner, [styles[type]], {
+        [styles.medium]: bannerWidth >= bannerWidths.medium,
+    }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
+    if (!isVisible)
+        return null;
+    return (React.createElement("div", { ref: bannerRef, className: bannerClassNames, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container, role: type === "error" ? "alert" : "status" },
+        React.createElement("div", { className: styles.bannerContent }, icon !== null && icon !== void 0 ? icon : React.createElement(Banner.Icon, null),
+            children), dismissButton !== null && dismissButton !== void 0 ? dismissButton : React.createElement(Banner.DismissButton, null)));
 }
+Banner.Icon = function BannerIcon(_a) {
+    var { backgroundColor, UNSAFE_className, UNSAFE_style } = _a, iconProps = tslib_es6.__rest(_a, ["backgroundColor", "UNSAFE_className", "UNSAFE_style"]);
+    const { type } = useBanner();
+    const name = iconProps.name || getBannerIcon(type);
+    const color = iconProps.customColor ? undefined : "surface";
+    const size = "small";
+    if (!name)
+        return null;
+    const overrideStyles = {};
+    if (backgroundColor) {
+        overrideStyles.backgroundColor = `var(--color-${backgroundColor})`;
+    }
+    const classNames = classnames(styles.iconWrapper, styles[`${type}Icon`], UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
+    return (React.createElement("span", { className: classNames, style: Object.assign(Object.assign({}, overrideStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container) },
+        React.createElement(Icon.Icon, Object.assign({ color: color, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.icon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.icon }, iconProps, { name: name }))));
+};
+Banner.Content = function BannerContent(props) {
+    var _a, _b;
+    let children = props.children;
+    if (children && typeof children === "string") {
+        children = React.createElement(Text.Text, null, children);
+    }
+    return (React.createElement("div", { className: classnames(styles.bannerChildren, (_a = props.UNSAFE_className) === null || _a === void 0 ? void 0 : _a.container), style: (_b = props.UNSAFE_style) === null || _b === void 0 ? void 0 : _b.container }, children));
+};
+Banner.DismissButton = function DismissButton(props) {
+    var _a, _b, _c, _d;
+    const { setIsVisible } = useBanner();
+    const ariaLabel = (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : "Dismiss notification";
+    const onClick = (_b = props.onClick) !== null && _b !== void 0 ? _b : (() => {
+        setIsVisible(false);
+    });
+    return (React.createElement("div", { className: classnames(styles.closeButton, (_c = props.UNSAFE_className) === null || _c === void 0 ? void 0 : _c.container), style: (_d = props.UNSAFE_style) === null || _d === void 0 ? void 0 : _d.container },
+        React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onClick, ariaLabel: ariaLabel })));
+};
+Banner.Action = function Action(_a) {
+    var { UNSAFE_className, UNSAFE_style } = _a, buttonProps = tslib_es6.__rest(_a, ["UNSAFE_className", "UNSAFE_style"]);
+    const classNames = classnames(styles.bannerAction, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
+    return (React.createElement("div", { className: classNames, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
+        React.createElement(Button.Button, Object.assign({ size: "small", type: "primary", variation: "subtle", UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.button, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.button }, buttonProps))));
+};
 function getBannerIcon(type) {
     switch (type) {
         case "notice":
@@ -60,13 +122,5 @@ function getBannerIcon(type) {
             return "alert";
     }
 }
-function BannerChildren({ children, }) {
-    if (!children)
-        return React.createElement(React.Fragment, null);
-    if (children && typeof children === "string") {
-        return React.createElement(Text.Text, null, children);
-    }
-    return React.createElement(React.Fragment, null, children);
-}
 
 exports.Banner = Banner;

package/dist/Banner-es.js

@@ -1,23 +1,27 @@
-import React__default, { useState } from 'react';
+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 { s as styles, B as BannerIcon } from './BannerIcon-es.js';
-import { T as Text } from './Text-es.js';
-import { B as Button } from './Button-es.js';
+import { I as Icon } from './Icon-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
+import { B as Button } from './Button-es.js';
+import { T as Text } from './Text-es.js';
+
+var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","successIcon":"wc5os7zGk30-","errorIcon":"R0t3TbhBBqo-","warningIcon":"i5fVmbzbYVM-","noticeIcon":"onwyp3UI3so-","spinning":"fZdByimVT5Q-"};
+
+const BannerContext = createContext({
+    type: "success",
+    isVisible: true,
+    setIsVisible: () => {
+        // noop
+    },
+});
+const BannerContextProvider = BannerContext.Provider;
+function useBanner() {
+    return useContext(BannerContext);
+}
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, controlledVisiblity, }) {
-    const [showBanner, setShowBanner] = useState(true);
-    const bannerIcon = icon || getBannerIcon(type);
-    const controlledVisible = controlledVisiblity !== null && controlledVisiblity !== void 0 ? controlledVisiblity : true;
-    const visible = controlledVisible && showBanner;
-    const bannerWidths = {
-        small: 320,
-        medium: 480,
-    };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
-        widths: bannerWidths,
-    });
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
             size: "small",
@@ -25,27 +29,85 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
             variation: "subtle",
         }, primaryAction);
     }
+    return (React__default.createElement(Banner.Provider, { type: type, visible: controlledVisiblity, onDismiss: onDismiss, icon: React__default.createElement(Banner.Icon, { name: icon }), dismissButton: dismissible && React__default.createElement(Banner.DismissButton, null) },
+        React__default.createElement(Banner.Content, null, children),
+        primaryAction && React__default.createElement(Banner.Action, Object.assign({}, primaryAction))));
+}
+Banner.Provider = function BannerProvider({ children, visible, type, onDismiss, icon, dismissButton, UNSAFE_className, UNSAFE_style, }) {
+    const [isVisible, _setIsVisible] = useState(true);
+    const showBanner = visible !== null && visible !== void 0 ? visible : isVisible;
+    const setIsVisible = (newValue) => {
+        // Only update internal visibility if it's not controlled by the parent.
+        if (typeof visible === "undefined") {
+            _setIsVisible(newValue);
+        }
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    return (React__default.createElement(BannerContextProvider, { value: {
+            type,
+            isVisible: showBanner,
+            setIsVisible,
+        } },
+        React__default.createElement(InternalWrapper, { icon: icon, dismissButton: dismissButton, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, children)));
+};
+function InternalWrapper({ children, icon, dismissButton, UNSAFE_className, UNSAFE_style, }) {
+    const { isVisible, type } = useBanner();
+    const bannerWidths = {
+        small: 320,
+        medium: 480,
+    };
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
+        widths: bannerWidths,
+    });
     const bannerClassNames = classnames(styles.banner, [styles[type]], {
         [styles.medium]: bannerWidth >= bannerWidths.medium,
-    });
-    if (!visible)
+    }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
+    if (!isVisible)
         return null;
-    return (React__default.createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React__default.createElement("div", { className: styles.bannerContent },
-            bannerIcon && React__default.createElement(BannerIcon, { icon: bannerIcon, type: type }),
-            React__default.createElement("div", { className: styles.bannerChildren },
-                React__default.createElement(BannerChildren, null, children)),
-            primaryAction && (React__default.createElement("div", { className: styles.bannerAction },
-                React__default.createElement(Button, Object.assign({}, primaryAction))))),
-        dismissible && (React__default.createElement("div", { className: styles.closeButton },
-            React__default.createElement(ButtonDismiss, { ariaLabel: "Dismiss notification", onClick: handleClose })))));
-    function handleClose() {
-        if (typeof controlledVisiblity === "undefined") {
-            setShowBanner(!showBanner);
-        }
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    }
+    return (React__default.createElement("div", { ref: bannerRef, className: bannerClassNames, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container, role: type === "error" ? "alert" : "status" },
+        React__default.createElement("div", { className: styles.bannerContent }, icon !== null && icon !== void 0 ? icon : React__default.createElement(Banner.Icon, null),
+            children), dismissButton !== null && dismissButton !== void 0 ? dismissButton : React__default.createElement(Banner.DismissButton, null)));
 }
+Banner.Icon = function BannerIcon(_a) {
+    var { backgroundColor, UNSAFE_className, UNSAFE_style } = _a, iconProps = __rest(_a, ["backgroundColor", "UNSAFE_className", "UNSAFE_style"]);
+    const { type } = useBanner();
+    const name = iconProps.name || getBannerIcon(type);
+    const color = iconProps.customColor ? undefined : "surface";
+    const size = "small";
+    if (!name)
+        return null;
+    const overrideStyles = {};
+    if (backgroundColor) {
+        overrideStyles.backgroundColor = `var(--color-${backgroundColor})`;
+    }
+    const classNames = classnames(styles.iconWrapper, styles[`${type}Icon`], UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
+    return (React__default.createElement("span", { className: classNames, style: Object.assign(Object.assign({}, overrideStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container) },
+        React__default.createElement(Icon, Object.assign({ color: color, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.icon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.icon }, iconProps, { name: name }))));
+};
+Banner.Content = function BannerContent(props) {
+    var _a, _b;
+    let children = props.children;
+    if (children && typeof children === "string") {
+        children = React__default.createElement(Text, null, children);
+    }
+    return (React__default.createElement("div", { className: classnames(styles.bannerChildren, (_a = props.UNSAFE_className) === null || _a === void 0 ? void 0 : _a.container), style: (_b = props.UNSAFE_style) === null || _b === void 0 ? void 0 : _b.container }, children));
+};
+Banner.DismissButton = function DismissButton(props) {
+    var _a, _b, _c, _d;
+    const { setIsVisible } = useBanner();
+    const ariaLabel = (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : "Dismiss notification";
+    const onClick = (_b = props.onClick) !== null && _b !== void 0 ? _b : (() => {
+        setIsVisible(false);
+    });
+    return (React__default.createElement("div", { className: classnames(styles.closeButton, (_c = props.UNSAFE_className) === null || _c === void 0 ? void 0 : _c.container), style: (_d = props.UNSAFE_style) === null || _d === void 0 ? void 0 : _d.container },
+        React__default.createElement(ButtonDismiss, { onClick: onClick, ariaLabel: ariaLabel })));
+};
+Banner.Action = function Action(_a) {
+    var { UNSAFE_className, UNSAFE_style } = _a, buttonProps = __rest(_a, ["UNSAFE_className", "UNSAFE_style"]);
+    const classNames = classnames(styles.bannerAction, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
+    return (React__default.createElement("div", { className: classNames, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
+        React__default.createElement(Button, Object.assign({ size: "small", type: "primary", variation: "subtle", UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.button, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.button }, buttonProps))));
+};
 function getBannerIcon(type) {
     switch (type) {
         case "notice":
@@ -58,13 +120,5 @@ function getBannerIcon(type) {
             return "alert";
     }
 }
-function BannerChildren({ children, }) {
-    if (!children)
-        return React__default.createElement(React__default.Fragment, null);
-    if (children && typeof children === "string") {
-        return React__default.createElement(Text, null, children);
-    }
-    return React__default.createElement(React__default.Fragment, null, children);
-}
 
 export { Banner as B };

package/dist/Checkbox/Checkbox.rebuilt.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<Omit<import("./Checkbox.types").BaseCheckboxProps, "children" | "onChange" | "label" | "description"> & {
     label?: string | React.ReactElement;
-    description?: string | React.ReactElement;
+    description?: React.ReactNode;
     onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
     version: 2;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 import { XOR } from "ts-xor";
 export interface BaseCheckboxProps {
     /**
@@ -32,7 +32,7 @@ export interface BaseCheckboxProps {
     /**
      * Further description of the label
      */
-    readonly description?: string;
+    readonly description?: ReactNode;
     /**
      * ID for the checkbox input
      */
@@ -78,7 +78,7 @@ export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "descriptio
      * String will be rendered with the default markup.
      * ReactElement will be rendered with provided positioning.
      */
-    description?: string | ReactElement;
+    description?: ReactNode;
     /**
      * Called when the checkbox value changes.
      * Includes the change event as a second argument.

package/dist/FormField/FormFieldDescription.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { ReactNode } from "react";
 interface FormFieldDescriptionProps {
     readonly id: string;
-    readonly description?: string;
+    readonly description?: ReactNode;
     readonly visible?: boolean;
 }
 export declare function FormFieldDescription({ id, description, visible, }: FormFieldDescriptionProps): React.JSX.Element | null;

package/dist/FormField/FormFieldTypes.d.ts

@@ -33,7 +33,7 @@ export interface CommonFormFieldProps {
     /**
      * Further description of the input, can be used for a hint.
      */
-    readonly description?: string;
+    readonly description?: ReactNode;
     /**
      * Disable the input
      */

package/dist/FormField-cjs.js

@@ -69,8 +69,8 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
 function FormFieldDescription({ id, description, visible = true, }) {
     if (!visible)
         return null;
-    return (React.createElement("div", { id: id, className: styles$1.description },
-        React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)));
+    const useStringFormat = !description || typeof description === "string";
+    return (React.createElement("div", { id: id, className: styles$1.description }, useStringFormat ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description)));
 }
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};

package/dist/FormField-es.js

@@ -67,8 +67,8 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
 function FormFieldDescription({ id, description, visible = true, }) {
     if (!visible)
         return null;
-    return (React__default.createElement("div", { id: id, className: styles$1.description },
-        React__default.createElement(Text, { size: "small", variation: "subdued" }, description)));
+    const useStringFormat = !description || typeof description === "string";
+    return (React__default.createElement("div", { id: id, className: styles$1.description }, useStringFormat ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description)));
 }
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};

package/dist/InputEmail/hooks/useInputEmailFormField.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
 export interface UseInputEmailFormFieldProps {
     readonly id: string;
     readonly name: string;
@@ -6,7 +6,7 @@ export interface UseInputEmailFormFieldProps {
     readonly autofocus?: boolean;
     readonly error?: string;
     readonly inline?: boolean;
-    readonly description?: string;
+    readonly description?: ReactNode;
     readonly invalid?: boolean;
     readonly value?: string;
     readonly handleChange: (event: ChangeEvent<HTMLInputElement>) => void;

package/dist/InputNumber/InputNumber.rebuilt.types.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
 export type InputNumberVersion = 1 | 2 | undefined;
 export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "version">, Pick<FormFieldProps, "onFocus" | "onBlur" | "inputRef" | "readonly" | "size"> {
@@ -6,7 +6,7 @@ export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "ver
     readonly autocomplete?: boolean;
     readonly autoFocus?: boolean;
     readonly defaultValue?: number;
-    readonly description?: string;
+    readonly description?: ReactNode;
     readonly error?: string;
     readonly formatOptions?: Intl.NumberFormatOptions;
     readonly identifier?: string;

package/dist/InputPhoneNumber/hooks/useInputPhoneFormField.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
 export interface useInputPhoneFormFieldProps {
     /**
      * The html id for the field
@@ -22,7 +22,7 @@ export interface useInputPhoneFormFieldProps {
     /**
      * Further description of the input, can be used for a hint.
      */
-    readonly description?: string;
+    readonly description?: ReactNode;
     /**
      * Callback for when the field value changes
      */

package/dist/InputText/InputText.d.ts

@@ -5,7 +5,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly rows?: (number | import("./InputText.types").RowRange) | undefined;
     readonly id?: string | undefined;
     readonly align?: ("center" | "right") | undefined;
-    readonly description?: string | undefined;
+    readonly description?: React.ReactNode;
     readonly disabled?: boolean | undefined;
     readonly showMiniLabel?: boolean | undefined;
     readonly invalid?: boolean | undefined;
@@ -39,7 +39,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     multiline?: boolean | undefined;
     readonly id?: string | undefined;
     readonly align?: ("center" | "right") | undefined;
-    readonly description?: string | undefined;
+    readonly description?: React.ReactNode;
     readonly disabled?: boolean | undefined;
     readonly showMiniLabel?: boolean | undefined;
     readonly invalid?: boolean | undefined;

package/dist/InputText/useInputTextFormField.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
 export interface useInputTextFormFieldProps extends React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     /**
      * The html id for the field
@@ -22,7 +22,7 @@ export interface useInputTextFormFieldProps extends React.InputHTMLAttributes<HT
     /**
      * Further description of the input, can be used for a hint.
      */
-    readonly description?: string;
+    readonly description?: ReactNode;
     /**
      * Callback for when the field value changes
      */
@@ -187,7 +187,7 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        children?: import("react").ReactNode | undefined;
+        children?: ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;

package/dist/Select/hooks/useSelectFormField.d.ts

@@ -1,10 +1,10 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, ReactNode } from "react";
 export interface UseSelectFormFieldProps {
     readonly id: string;
     readonly name: string;
     readonly disabled?: boolean;
     readonly autofocus?: boolean;
-    readonly description?: string;
+    readonly description?: ReactNode;
     readonly inline?: boolean;
     readonly error?: string;
     readonly invalid?: boolean;

package/dist/index.cjs

@@ -117,7 +117,6 @@ require('./useDebounce-cjs.js');
 require('./debounce-cjs.js');
 require('./isSymbol-cjs.js');
 require('color');
-require('./BannerIcon-cjs.js');
 require('react-router-dom');
 require('./getMappedAtlantisSpaceToken-cjs.js');
 require('react-hook-form');

package/dist/index.mjs

@@ -115,7 +115,6 @@ import './useDebounce-es.js';
 import './debounce-es.js';
 import './isSymbol-es.js';
 import 'color';
-import './BannerIcon-es.js';
 import 'react-router-dom';
 import './getMappedAtlantisSpaceToken-es.js';
 import 'react-hook-form';

package/dist/styles.css

@@ -1840,22 +1840,22 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       align-self: center;
 }
 
-.RRQ5CQj05jU- {
+.wc5os7zGk30- {
   background-color: hsl(107, 58%, 33%);
   background-color: var(--color-success);
 }
 
-.rLsOR1QiHC8- {
+.R0t3TbhBBqo- {
   background-color: hsl(6, 64%, 51%);
   background-color: var(--color-destructive);
 }
 
-.KqPf0zuN2fg- {
+.i5fVmbzbYVM- {
   background-color: hsl(51, 64%, 49%);
   background-color: var(--color-warning);
 }
 
-.M3q29PUUYRM- {
+.onwyp3UI3so- {
   background-color: hsl(207, 79%, 57%);
   background-color: var(--color-informative);
 }

package/dist/utils/meta/meta.json

@@ -11,6 +11,11 @@
     "Autocomplete",
     "Avatar",
     "Banner",
+    "Banner.Action",
+    "Banner.Content",
+    "Banner.DismissButton",
+    "Banner.Icon",
+    "Banner.Provider",
     "Body",
     "Box",
     "Button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.71.3",
+  "version": "6.73.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "39a07b1865287584961db241051fbb865ea41d50"
+  "gitHead": "7f8481c4a6dbde1cd25aa16cf06e763aea00d9c8"
 }

package/dist/Banner/components/BannerIcon/BannerIcon.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { IconNames } from "@jobber/design";
-import { BannerType } from "../../Banner.types";
-export interface BannerIconProps {
-    readonly icon: IconNames;
-    readonly type: BannerType;
-}
-export declare function BannerIcon({ icon, type }: BannerIconProps): React.JSX.Element;

package/dist/Banner/components/BannerIcon/index.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-var BannerIcon = require('../../../BannerIcon-cjs.js');
-require('react');
-require('classnames');
-require('../../../Icon-cjs.js');
-require('@jobber/design');
-
-
-
-exports.BannerIcon = BannerIcon.BannerIcon;

package/dist/Banner/components/BannerIcon/index.d.ts

@@ -1 +0,0 @@
-export * from "./BannerIcon";

package/dist/Banner/components/BannerIcon/index.mjs

@@ -1,5 +0,0 @@
-export { B as BannerIcon } from '../../../BannerIcon-es.js';
-import 'react';
-import 'classnames';
-import '../../../Icon-es.js';
-import '@jobber/design';

package/dist/BannerIcon-cjs.js

@@ -1,17 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var Icon = require('./Icon-cjs.js');
-
-var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
-
-var iconStyles = {"success":"RRQ5CQj05jU-","error":"rLsOR1QiHC8-","warning":"KqPf0zuN2fg-","notice":"M3q29PUUYRM-","spinning":"ad7f3jNTQXM-"};
-
-function BannerIcon({ icon, type }) {
-    return (React.createElement("span", { className: classnames(styles.iconWrapper, iconStyles[type]) },
-        React.createElement(Icon.Icon, { name: icon, color: "surface", size: "small" })));
-}
-
-exports.BannerIcon = BannerIcon;
-exports.styles = styles;

package/dist/BannerIcon-es.js

@@ -1,14 +0,0 @@
-import React__default from 'react';
-import classnames from 'classnames';
-import { I as Icon } from './Icon-es.js';
-
-var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
-
-var iconStyles = {"success":"RRQ5CQj05jU-","error":"rLsOR1QiHC8-","warning":"KqPf0zuN2fg-","notice":"M3q29PUUYRM-","spinning":"ad7f3jNTQXM-"};
-
-function BannerIcon({ icon, type }) {
-    return (React__default.createElement("span", { className: classnames(styles.iconWrapper, iconStyles[type]) },
-        React__default.createElement(Icon, { name: icon, color: "surface", size: "small" })));
-}
-
-export { BannerIcon as B, styles as s };