@box/blueprint-web 5.31.3

package/lib-esm/guided-tooltip/guided-tooltip-body.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { Text } from '../text/text.js';
+import { getUniqueId } from '../utils/useUniqueId.js';
+import styles from './guided-tooltip.module.js';
+import { useGuidedTooltipContext } from './utils/guided-tooltip-context.js';
+
+/**
+ * The component to show the text of Guided Tooltip.
+ */
+const GuidedTooltipText = ({
+  children
+}) => jsx(Text, {
+  as: "p",
+  color: "textOnLightDefault",
+  variant: "bodyDefault",
+  children: children
+});
+/**
+ * The component to show content in body of the Guided Tooltip.
+ */
+const GuidedTooltipBody = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, forwardedRef) => {
+  const {
+    bodyId,
+    setBodyId,
+    titleId
+  } = useGuidedTooltipContext();
+  useEffect(() => {
+    if (!bodyId) {
+      const id = getUniqueId('guidedTooltip-body-');
+      setBodyId(id);
+    }
+  }, [bodyId, setBodyId]);
+  const guidedTooltipHasNoTitle = !titleId;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.body, guidedTooltipHasNoTitle && styles.noTitle, className),
+    id: bodyId,
+    children: children
+  });
+});
+
+export { GuidedTooltipBody, GuidedTooltipText, GuidedTooltipBody as default };

package/lib-esm/guided-tooltip/guided-tooltip-footer.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import { type GuidedTooltipActionsContainerProps, type GuidedTooltipFooterProps, type GuidedTooltipStepsIndicatorProps } from './types';
+/**
+ * Wrapper for buttons in the footer of the GuidedTooltip with optional step indicator.
+ */
+export declare const GuidedTooltipFooterComponent: ({ children, className, ...rest }: GuidedTooltipFooterProps) => JSX.Element;
+/**
+ * Wrapper for buttons in the footer of the GuidedTooltip.
+ * Exposes primary and secondary action buttons most commonly used inside footer of the tooltip.
+ */
+export declare const GuidedTooltipFooter: (({ children, className, ...rest }: GuidedTooltipFooterProps) => JSX.Element) & {
+    ActionsContainer: ({ children, className }: GuidedTooltipActionsContainerProps) => JSX.Element;
+    PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children?: string | string[] | undefined;
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, never>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children?: string | string[] | undefined;
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    SecondaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children?: string | string[] | undefined;
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, never>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children?: string | string[] | undefined;
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    StepsIndicator: ({ children, className }: GuidedTooltipStepsIndicatorProps) => JSX.Element;
+};
+export default GuidedTooltipFooter;

package/lib-esm/guided-tooltip/guided-tooltip-footer.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { Button } from '../basics/button/button.js';
+import { getUniqueId } from '../utils/useUniqueId.js';
+import styles from './guided-tooltip.module.js';
+import { useGuidedTooltipContext } from './utils/guided-tooltip-context.js';
+
+const PrimaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(Button, {
+  ...props,
+  ref: forwardedRef,
+  autoFocus: true,
+  className: clsx(styles.primaryAction, props.className)
+}));
+const SecondaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(Button, {
+  ...props,
+  ref: forwardedRef,
+  className: clsx(styles.secondaryAction, props.className),
+  variant: "tertiary"
+}));
+/**
+ * Wrapper for buttons in the footer of the tooltip.
+ */
+const ActionsContainer = ({
+  children,
+  className
+}) => jsx("div", {
+  className: clsx(styles.actionButtons, className),
+  children: children
+});
+/**
+ * Container for the steps indicator text (example: "1 of 3").
+ */
+const StepsIndicator = ({
+  children,
+  className
+}) => {
+  const {
+    setStepsIndicatorId,
+    stepsIndicatorId
+  } = useGuidedTooltipContext();
+  useEffect(() => {
+    if (!stepsIndicatorId) {
+      const id = getUniqueId('guidedTooltip-steps-indicator-');
+      setStepsIndicatorId(id);
+    }
+  }, [setStepsIndicatorId, stepsIndicatorId]);
+  return jsx("div", {
+    className: clsx(styles.stepsIndicator, className),
+    id: stepsIndicatorId,
+    children: children
+  });
+};
+/**
+ * Wrapper for buttons in the footer of the GuidedTooltip with optional step indicator.
+ */
+const GuidedTooltipFooterComponent = ({
+  children,
+  className,
+  ...rest
+}) => jsx("div", {
+  ...rest,
+  className: clsx(styles.footer, className),
+  children: children
+});
+/**
+ * Wrapper for buttons in the footer of the GuidedTooltip.
+ * Exposes primary and secondary action buttons most commonly used inside footer of the tooltip.
+ */
+const GuidedTooltipFooter = Object.assign(GuidedTooltipFooterComponent, {
+  ActionsContainer,
+  PrimaryAction,
+  SecondaryAction,
+  StepsIndicator
+});
+
+export { GuidedTooltipFooter, GuidedTooltipFooterComponent, GuidedTooltipFooter as default };

package/lib-esm/guided-tooltip/guided-tooltip-icon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type GuidedTooltipIconProps } from './types';
+/**
+ * Component that displays icon.
+ */
+export declare const GuidedTooltipIcon: ({ className, icon }: GuidedTooltipIconProps) => JSX.Element;
+export default GuidedTooltipIcon;

package/lib-esm/guided-tooltip/guided-tooltip-icon.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import { SurfaceSurfaceBrand } from '@box/blueprint-web-assets/tokens/tokens';
+import styles from './guided-tooltip.module.js';
+
+/**
+ * Component that displays icon.
+ */
+const GuidedTooltipIcon = ({
+  className,
+  icon
+}) => {
+  return jsx("div", {
+    className: styles.icon,
+    children: /*#__PURE__*/createElement(icon, {
+      color: SurfaceSurfaceBrand,
+      role: 'presentation'
+    })
+  });
+};
+
+export { GuidedTooltipIcon, GuidedTooltipIcon as default };

package/lib-esm/guided-tooltip/guided-tooltip-illustration.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type GuidedTooltipIllustrationProps } from './types';
+/**
+ * Component that displays illustration.
+ */
+export declare const GuidedTooltipIllustration: ({ altText, className, imgUrl }: GuidedTooltipIllustrationProps) => JSX.Element;
+export default GuidedTooltipIllustration;

package/lib-esm/guided-tooltip/guided-tooltip-illustration.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './guided-tooltip.module.js';
+
+/**
+ * Component that displays illustration.
+ */
+const GuidedTooltipIllustration = ({
+  altText = '',
+  className,
+  imgUrl
+}) => {
+  return jsx("img", {
+    alt: altText,
+    className: clsx(styles.illustration, className),
+    src: imgUrl
+  });
+};
+
+export { GuidedTooltipIllustration, GuidedTooltipIllustration as default };

package/lib-esm/guided-tooltip/guided-tooltip-title.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type GuidedTooltipTitleProps } from './types';
+/**
+ * An accessible title to be announced when the GuidedTooltip is opened.
+ */
+export declare const GuidedTooltipTitle: ({ children, className }: GuidedTooltipTitleProps) => JSX.Element;

package/lib-esm/guided-tooltip/guided-tooltip-title.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useEffect } from 'react';
+import { getUniqueId } from '../utils/useUniqueId.js';
+import { Text } from '../text/text.js';
+import styles from './guided-tooltip.module.js';
+import { useGuidedTooltipContext } from './utils/guided-tooltip-context.js';
+
+/**
+ * An accessible title to be announced when the GuidedTooltip is opened.
+ */
+const GuidedTooltipTitle = ({
+  children,
+  className
+}) => {
+  const {
+    setTitleId,
+    titleId
+  } = useGuidedTooltipContext();
+  useEffect(() => {
+    if (!titleId) {
+      const id = getUniqueId('guidedTooltip-title-');
+      setTitleId(id);
+    }
+  }, [setTitleId, titleId]);
+  return jsx(Text, {
+    as: "h2",
+    className: clsx(styles.title, className),
+    color: "textOnLightDefault",
+    id: titleId,
+    variant: "titleLarge",
+    children: children
+  });
+};
+
+export { GuidedTooltipTitle };

package/lib-esm/guided-tooltip/guided-tooltip.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { type GuidedTooltipProps } from './types';
+export declare const GuidedTooltip: (({ children, onOpenChange, open, container, ...guidedTooltipContentProps }: GuidedTooltipProps) => JSX.Element) & {
+    Body: import("react").ForwardRefExoticComponent<import("./types").GuidedTooltipBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: (({ children, className, ...rest }: import("./types").GuidedTooltipFooterProps) => JSX.Element) & {
+        ActionsContainer: ({ children, className }: import("./types").GuidedTooltipActionsContainerProps) => JSX.Element;
+        PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children?: string | string[] | undefined;
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, never>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children?: string | string[] | undefined;
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+        SecondaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children?: string | string[] | undefined;
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, never>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children?: string | string[] | undefined;
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+        StepsIndicator: ({ children, className }: import("./types").GuidedTooltipStepsIndicatorProps) => JSX.Element;
+    };
+    Icon: ({ className, icon }: import("./types").GuidedTooltipIconProps) => JSX.Element;
+    Illustration: ({ altText, className, imgUrl }: import("./types").GuidedTooltipIllustrationProps) => JSX.Element;
+    Text: ({ children }: import("./types").GuidedTooltipTextProps) => JSX.Element;
+    Title: ({ children, className }: import("./types").GuidedTooltipTitleProps) => JSX.Element;
+};

package/lib-esm/guided-tooltip/guided-tooltip.js

@@ -0,0 +1,110 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { Space7 } from '@box/blueprint-web-assets/tokens/px-tokens';
+import * as RadixPopover from '@radix-ui/react-popover';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useState, useMemo } from 'react';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { GuidedTooltipBody, GuidedTooltipText } from './guided-tooltip-body.js';
+import { GuidedTooltipFooter } from './guided-tooltip-footer.js';
+import { GuidedTooltipIcon } from './guided-tooltip-icon.js';
+import { GuidedTooltipIllustration } from './guided-tooltip-illustration.js';
+import { GuidedTooltipTitle } from './guided-tooltip-title.js';
+import styles from './guided-tooltip.module.js';
+import { GuidedTooltipContext } from './utils/guided-tooltip-context.js';
+
+const OFFSET_FROM_ANCHOR_IN_PX = 3;
+const ARROW_PADDING_IN_PX = parseInt(Space7, 10);
+const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
+  align = 'center',
+  className,
+  closeLabel,
+  content,
+  side = 'bottom',
+  sideOffset = OFFSET_FROM_ANCHOR_IN_PX,
+  ...rest
+}, forwardedRef) => {
+  const onInteractOutside = useCallback(event => event.preventDefault(), []);
+  const [bodyId, setBodyId] = useState();
+  const [stepsIndicatorId, setStepsIndicatorId] = useState();
+  const [titleId, setTitleId] = useState();
+  const contextProviderValue = useMemo(() => ({
+    bodyId,
+    setBodyId,
+    setStepsIndicatorId,
+    setTitleId,
+    stepsIndicatorId,
+    titleId
+  }), [bodyId, stepsIndicatorId, titleId]);
+  /**
+   * We use aria-labelledby attribute instead of aria-label because of the First Rule of ARIA Use
+   * (https://www.w3.org/TR/using-aria/#firstrule). We also follow the Guided Tooltip Accessibility Notes
+   * aria-labelledby attribute has similar structure as className - ids of elements separated by space,
+   * hence the use of clsx utility.
+   * It needs to consist of an id of the title element or the body element if former is not present.
+   * It also needs to consist of an id of the "steps indicator" element if it's present
+   */
+  const ariaLabelledbyAttr = clsx(titleId || bodyId, stepsIndicatorId);
+  return jsx(GuidedTooltipContext.Provider, {
+    value: contextProviderValue,
+    children: jsxs(RadixPopover.Content, {
+      ...rest,
+      ref: forwardedRef,
+      align: align,
+      "aria-labelledby": ariaLabelledbyAttr,
+      arrowPadding: ARROW_PADDING_IN_PX,
+      className: clsx(styles.content, className),
+      onInteractOutside: onInteractOutside,
+      side: side,
+      sideOffset: sideOffset,
+      children: [content, jsx(RadixPopover.Close, {
+        asChild: true,
+        children: jsx(IconButton, {
+          "aria-label": closeLabel,
+          className: styles.closeButton,
+          icon: XMark
+        })
+      }), jsx(RadixPopover.Arrow, {
+        asChild: true,
+        height: 16,
+        width: 34,
+        children: jsx("div", {
+          className: styles.arrow
+        })
+      })]
+    })
+  });
+});
+/**
+ * A component used to wrap any other component, giving it a GuidedTooltip.
+ *
+ * * [Radix-UI link](https://www.radix-ui.com/docs/primitives/components/popover)
+ */
+const GuidedTooltipComponent = ({
+  children,
+  onOpenChange,
+  open,
+  container,
+  ...guidedTooltipContentProps
+}) => jsxs(RadixPopover.Root, {
+  onOpenChange: onOpenChange,
+  open: open,
+  children: [jsx(RadixPopover.Anchor, {
+    children: children
+  }), jsx(RadixPopover.Portal, {
+    container: container,
+    children: jsx(GuidedTooltipContent, {
+      ...guidedTooltipContentProps
+    })
+  })]
+});
+const GuidedTooltip = Object.assign(GuidedTooltipComponent, {
+  Body: GuidedTooltipBody,
+  Footer: GuidedTooltipFooter,
+  Icon: GuidedTooltipIcon,
+  Illustration: GuidedTooltipIllustration,
+  Text: GuidedTooltipText,
+  Title: GuidedTooltipTitle
+});
+
+export { GuidedTooltip };

package/lib-esm/guided-tooltip/guided-tooltip.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"content":"guided-tooltip-module_content__4P0jU","body":"guided-tooltip-module_body__lf6-N","noTitle":"guided-tooltip-module_noTitle__C-rQU","title":"guided-tooltip-module_title__WjhyT","footer":"guided-tooltip-module_footer__dvCqt","actionButtons":"guided-tooltip-module_actionButtons__JCj8T","stepsIndicator":"guided-tooltip-module_stepsIndicator__hkoGZ","closeButton":"guided-tooltip-module_closeButton__ZVZcg","arrow":"guided-tooltip-module_arrow__JCGwC","icon":"guided-tooltip-module_icon__FZnIm","illustration":"guided-tooltip-module_illustration__CU2kK"};
+
+export { styles as default };

package/lib-esm/guided-tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { GuidedTooltip } from './guided-tooltip';
+export { type GuidedTooltipActionsContainerProps, type GuidedTooltipBodyProps, type GuidedTooltipFooterProps, type GuidedTooltipIconProps, type GuidedTooltipIllustrationProps, type GuidedTooltipProps, type GuidedTooltipStepsIndicatorProps, type GuidedTooltipTitleProps, } from './types';
+export { GuidedTooltipContext } from './utils/guided-tooltip-context';

package/lib-esm/guided-tooltip/types.d.ts

@@ -0,0 +1,98 @@
+import type * as RadixPopover from '@radix-ui/react-popover';
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+export interface GuidedTooltipContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** The preferred alignment against the anchor. May change when collisions occur.
+     * "start" | "center" | "end"
+     * Default value: "center". */
+    align?: RadixPopover.PopoverContentProps['align'];
+    /** The anchor for the tooltip. */
+    className?: string;
+    /** Localized aria-label for close button */
+    closeLabel: string;
+    /** React element with the content of GuildedTooltip */
+    content: React.ReactElement;
+    /** The preferred side of the anchor to render against. Will be reversed when collisions occur.
+     * "top" | "right" | "bottom" | "left"
+     * Default value: "bottom". */
+    side?: RadixPopover.PopoverContentProps['side'];
+    /** The offset that GuidedTooltip will be moved from anchor element, in pixels. "3" by default. */
+    sideOffset?: RadixPopover.PopoverContentProps['sideOffset'];
+}
+export interface GuidedTooltipProps extends GuidedTooltipContentProps {
+    /** The anchor for the tooltip. */
+    children: React.ReactNode | React.ReactNode[];
+    /** Element that will be a container for Portal in wich GuidedTooltip is rendered. */
+    container?: HTMLElement | null;
+    /** The controlled open state of the tooltip. Must be used in conjunction with onOpenChange. */
+    open: RadixPopover.PopoverProps['open'];
+    /** Event handler called when the open state of the tooltip changes. */
+    onOpenChange?: RadixPopover.PopoverProps['onOpenChange'];
+}
+export interface GuidedTooltipTextProps {
+    /** The content of the GuidedTooltipText. */
+    children: string;
+}
+export interface GuidedTooltipBodyProps {
+    /** The content of the GuidedTooltip. */
+    children: React.ReactNode | React.ReactNode[];
+    /** Additional className to pass to GuidedTooltip Body */
+    className?: string;
+    /**
+     * SVG Icon element to pass to GuidedTooltip Body
+     * */
+    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+}
+export interface GuidedTooltipFooterProps {
+    /** The content of the GuidedTooltip. */
+    children?: React.ReactNode | React.ReactNode[];
+    /** Additional className to pass to GuidedTooltip Footer */
+    className?: string;
+}
+export interface GuidedTooltipIconProps {
+    /** Additional className to pass to GuidedTooltip Icon */
+    className?: string;
+    /**
+     * SVG Icon element to pass to GuidedTooltip Icon
+     * */
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+}
+export interface GuidedTooltipTitleProps {
+    /** Title content. */
+    children: React.ReactNode;
+    /**
+     * Additional className to pass to GuidedTooltip Footer
+     */
+    className?: string;
+}
+export interface GuidedTooltipStepsIndicatorProps {
+    /**
+     * StepsIndicator text
+     */
+    children: string;
+    /**
+     * Additional className to pass to GuidedTooltip StepsIndicator
+     */
+    className?: string;
+}
+export interface GuidedTooltipActionsContainerProps {
+    /**
+     * Additional className to pass to GuidedTooltip ActionButtons
+     */
+    className?: string;
+    /** The content of the GuidedTooltip ActionButtons */
+    children: React.ReactNode | React.ReactNode[];
+}
+export interface GuidedTooltipIllustrationProps {
+    /**
+     * Alternative text for image
+     */
+    altText?: string;
+    /**
+     * Image URL
+     */
+    imgUrl: string;
+    /**
+     * Additional className to pass to GuidedTooltip Illustration
+     */
+    className?: string;
+}

package/lib-esm/guided-tooltip/utils/guided-tooltip-context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface GuidedTooltipContextData {
+    bodyId?: string;
+    setBodyId: (bodyId: string) => void;
+    setStepsIndicatorId: (stepsIndicatorId: string) => void;
+    setTitleId: (titleId: string) => void;
+    stepsIndicatorId?: string;
+    titleId?: string;
+}
+export declare const GuidedTooltipContext: import("react").Context<GuidedTooltipContextData | undefined>;
+export declare const useGuidedTooltipContext: () => GuidedTooltipContextData;

package/lib-esm/guided-tooltip/utils/guided-tooltip-context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const GuidedTooltipContext = /*#__PURE__*/createContext(undefined);
+const useGuidedTooltipContext = () => {
+  const guidedTooltipContextData = useContext(GuidedTooltipContext);
+  if (!guidedTooltipContextData) {
+    throw new Error('The useGuidedTooltipContext hook must be used within a GuidedTooltipContext.Provider');
+  }
+  return guidedTooltipContextData;
+};
+
+export { GuidedTooltipContext, useGuidedTooltipContext };