@box/blueprint-web 5.31.3

package/lib-esm/modal/modal-trigger.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+
+/**
+ * ModalTrigger connects your button to open a modal
+ */
+const ModalTrigger = /*#__PURE__*/forwardRef(({
+  children,
+  ...rest
+}, forwardedRef) => jsx(RadixDialog.Trigger, {
+  ...rest,
+  ref: forwardedRef,
+  asChild: true,
+  children: children
+}));
+
+export { ModalTrigger, ModalTrigger as default };

package/lib-esm/modal/modal.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import { type ModalProps } from './types';
+/**
+ * Modal can be used for a number of ways to support focused experiences
+ *
+ * It consists of multiple subcomponents that allow you to compose it however you need.
+ *
+ * @example
+ *      <Modal>
+            <Modal.Trigger>
+                <button type="button">Trigger</button>
+            </Modal.Trigger>
+            <Modal.Content>
+                <Modal.Header>My Title</Modal.Header>
+                <Modal.ScrollableContainer>
+                    <Modal.Body>Content of my modal</Modal.Body>
+                </Modal.ScrollableContainer>
+                <Modal.Footer>
+                    <Modal.Footer.SecondaryButton>Dismiss</Modal.Footer.SecondaryButton>
+                    <Modal.Footer.PrimaryButton>Submit</Modal.Footer.PrimaryButton>
+                </Modal.Footer>
+                <Modal.Close aria-label="Close" />
+            </Modal.Content>
+        </Modal>
+ */
+export declare const Modal: (({ children, modal, ...props }: ModalProps) => JSX.Element) & {
+    Body: import("react").ForwardRefExoticComponent<import("./types").ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("./types").ModalCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & Pick<import("@radix-ui/react-dialog").DialogPortalProps, "container"> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("./types").ModalFooterProps & import("react").RefAttributes<HTMLDivElement>> & {
+        PrimaryButton: 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>>;
+        SecondaryButton: 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>>;
+    };
+    Header: import("react").ForwardRefExoticComponent<import("./types").ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    ScrollableContainer: import("react").ForwardRefExoticComponent<import("./types").ModalScrollableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("./types").ModalTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Title: import("react").ForwardRefExoticComponent<import("./types").ModalTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+};
+export default Modal;

package/lib-esm/modal/modal.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { Root as Root$1 } from '@radix-ui/react-dialog';
+import { ModalBody } from './modal-body.js';
+import { ModalClose } from './modal-close.js';
+import { ModalContent } from './modal-content.js';
+import { ModalFooter } from './modal-footer.js';
+import { ModalHeader } from './modal-header.js';
+import { ModalScrollableContainer } from './modal-scrollable-container.js';
+import { ModalTitle } from './modal-title.js';
+import { ModalTrigger } from './modal-trigger.js';
+
+const Root = ({
+  children,
+  modal = true,
+  ...props
+}) => jsx(Root$1, {
+  ...props,
+  modal: modal,
+  children: children
+});
+/**
+ * Modal can be used for a number of ways to support focused experiences
+ *
+ * It consists of multiple subcomponents that allow you to compose it however you need.
+ *
+ * @example
+ *      <Modal>
+            <Modal.Trigger>
+                <button type="button">Trigger</button>
+            </Modal.Trigger>
+            <Modal.Content>
+                <Modal.Header>My Title</Modal.Header>
+                <Modal.ScrollableContainer>
+                    <Modal.Body>Content of my modal</Modal.Body>
+                </Modal.ScrollableContainer>
+                <Modal.Footer>
+                    <Modal.Footer.SecondaryButton>Dismiss</Modal.Footer.SecondaryButton>
+                    <Modal.Footer.PrimaryButton>Submit</Modal.Footer.PrimaryButton>
+                </Modal.Footer>
+                <Modal.Close aria-label="Close" />
+            </Modal.Content>
+        </Modal>
+ */
+const Modal = Object.assign(Root, {
+  Body: ModalBody,
+  Close: ModalClose,
+  Content: ModalContent,
+  Footer: ModalFooter,
+  Header: ModalHeader,
+  ScrollableContainer: ModalScrollableContainer,
+  Trigger: ModalTrigger,
+  Title: ModalTitle
+});
+
+export { Modal, Modal as default };

package/lib-esm/modal/modal.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"overlay":"modal-module_overlay__OIKwn","content":"modal-module_content__Z8W3U","popup_bounce_in":"modal-module_popup_bounce_in__Q7Slx","close":"modal-module_close__4qYVH","onColor":"modal-module_onColor__qNumt","backButton":"modal-module_backButton__ImG1B","modalHeader":"modal-module_modalHeader__bGhDg","modalTitle":"modal-module_modalTitle__Q-aFr","body":"modal-module_body__HKxP9","scrollableContainer":"modal-module_scrollableContainer__N3upQ","footer":"modal-module_footer__bCIwP","footerButton":"modal-module_footerButton__QlYl3"};
+
+export { styles as default };

package/lib-esm/modal/types.d.ts

@@ -0,0 +1,48 @@
+import { type DialogContentProps, type DialogPortalProps, type DialogProps, type DialogTitleProps } from '@radix-ui/react-dialog';
+import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
+import { type IconButtonProps } from '../primitives/icon-button';
+export type ModalProps = DialogProps;
+export type ModalContentProps = DialogContentProps & Pick<DialogPortalProps, 'container'>;
+export interface ModalCloseProps {
+    /** The aria-label for the Close element */
+    'aria-label': string;
+    /** Optional class name to be passed to IconButton component */
+    className?: string;
+    /** Custom icon for Close element */
+    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /** Determines variant of close icon button.
+     * default: transparent background
+     * onColor: white background  */
+    variant?: 'default' | 'onColor';
+    /** The size of the button. Default: 'large'. */
+    size?: IconButtonProps['size'];
+}
+export interface ModalTriggerProps {
+    /** Content of the Trigger element */
+    children: ReactElement;
+}
+export interface ModalTitleProps extends DialogTitleProps {
+    /** Content of the Title element */
+    children: ReactNode;
+    /** Specifies if title should be visually hidden */
+    visuallyHidden?: boolean;
+}
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content of the Body element */
+    children: ReactNode;
+}
+export interface ModalScrollableContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content of the ScrollableContainer element */
+    children: ReactNode;
+}
+export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content of the Footer element */
+    children: ReactNode;
+}
+export interface ModalHeaderProps extends HTMLAttributes<HTMLHeadingElement> {
+    backButton?: ReactElement;
+    /** Content of the Header element */
+    children: ReactNode;
+    /** Content of the Subttitle element */
+    subtitle?: ReactNode;
+}

package/lib-esm/primitives/base-button/base-button-context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type BaseButtonContextType } from './types';
+export declare const BaseButtonContext: import("react").Context<BaseButtonContextType>;
+export declare const useBaseButtonContext: () => BaseButtonContextType;

package/lib-esm/primitives/base-button/base-button-context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+const BaseButtonContext = /*#__PURE__*/createContext({
+  isIconButton: false,
+  variant: 'primary',
+  size: 'small'
+});
+const useBaseButtonContext = () => useContext(BaseButtonContext);
+
+export { BaseButtonContext, useBaseButtonContext };

package/lib-esm/primitives/base-button/base-button-icon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const BaseButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+} & {
+    icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    iconProps?: import("react").SVGProps<SVGSVGElement> | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib-esm/primitives/base-button/base-button-icon.js

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useCallback, createElement } from 'react';
+import clsx from 'clsx';
+import { getIconSize, buttonVariantToIconColorMap } from './utils.js';
+import { useBaseButtonContext } from './base-button-context.js';
+import styles from './base-button.module.js';
+
+const BaseButtonIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    icon,
+    iconProps
+  } = props;
+  const {
+    loading,
+    size,
+    variant,
+    isIconButton,
+    ariaLabel
+  } = useBaseButtonContext();
+  const renderIcon = useCallback(() => {
+    if (!icon) {
+      return null;
+    }
+    if (isIconButton && !ariaLabel) {
+      // eslint-disable-next-line no-console
+      console.warn('Icon only button must have an aria-label');
+      return null;
+    }
+    return /*#__PURE__*/createElement(icon, {
+      ...getIconSize(size, isIconButton),
+      color: loading ? 'transparent' : buttonVariantToIconColorMap[variant],
+      role: 'presentation',
+      ...iconProps
+    });
+  }, [icon, size, loading, variant, isIconButton, iconProps, ariaLabel]);
+  return jsx("span", {
+    ref: forwardedRef,
+    className: clsx(styles.icon, {
+      [styles.isIconButton]: isIconButton,
+      [styles.loading]: loading
+    }),
+    children: renderIcon()
+  });
+});
+BaseButtonIcon.displayName = 'BaseButton.Icon';
+
+export { BaseButtonIcon };

package/lib-esm/primitives/base-button/base-button-label.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const BaseButtonLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+} & {
+    children: string | string[];
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib-esm/primitives/base-button/base-button-label.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const BaseButtonLabel = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx("span", {
+    ...rest,
+    ref: forwardedRef,
+    children: children
+  });
+});
+BaseButtonLabel.displayName = 'BaseButton.Label';
+
+export { BaseButtonLabel };

package/lib-esm/primitives/base-button/base-button.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare const BaseButton: import("react").ForwardRefExoticComponent<(Omit<import("./types").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;
+}>, "ref"> | Omit<import("./types").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;
+}>, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+export default BaseButton;

package/lib-esm/primitives/base-button/base-button.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, Children, isValidElement } from 'react';
+import { Button } from '@ariakit/react';
+import clsx from 'clsx';
+import { BaseButtonIcon } from './base-button-icon.js';
+import { BaseButtonContext } from './base-button-context.js';
+import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
+import { getButtonOptions } from '../../utils/getButtonOptions.js';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { loadingIndicatorVariantMap } from './utils.js';
+import styles from './base-button.module.js';
+
+const DEFAULT_ELEMENT = 'button';
+const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    variant = 'primary',
+    size = 'small',
+    loading,
+    loadingAriaLabel,
+    'aria-label': ariaLabel,
+    as = DEFAULT_ELEMENT,
+    ...rest
+  } = getButtonOptions(props);
+  const ref = useRef(null);
+  const isIconButton = useMemo(() => {
+    const childArray = Children.toArray(children);
+    const firstChild = childArray[0];
+    return childArray.length === 1 && /*#__PURE__*/isValidElement(firstChild) && firstChild.type === BaseButtonIcon;
+  }, [children]);
+  const context = useMemo(() => ({
+    ariaLabel,
+    loading,
+    size,
+    variant,
+    isIconButton
+  }), [ariaLabel, loading, size, variant, isIconButton]);
+  return jsx(Button, {
+    ...rest,
+    ref: useForkRef(ref, forwardedRef),
+    "aria-label": loading ? undefined : ariaLabel,
+    as: as,
+    className: clsx([styles.button, styles[variant], styles[size]], {
+      [styles.isIconButton]: isIconButton,
+      [styles.hide]: loading
+    }, className),
+    children: jsxs(BaseButtonContext.Provider, {
+      value: context,
+      children: [children, loading && loadingAriaLabel ? jsx(LoadingIndicator, {
+        "aria-label": loadingAriaLabel,
+        variant: loadingIndicatorVariantMap[variant]
+      }) : null]
+    })
+  });
+});
+
+export { BaseButton, BaseButton as default };

package/lib-esm/primitives/base-button/base-button.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"button":"base-button-module_button__TsfJa","icon":"base-button-module_icon__UY0uJ","primary":"base-button-module_primary__3bHHB","secondary":"base-button-module_secondary__sRO2F","tertiary":"base-button-module_tertiary__K4c0c","outline":"base-button-module_outline__9gckj","small":"base-button-module_small__3DdUa","isIconButton":"base-button-module_isIconButton__4P43K","large":"base-button-module_large__LgTuL","hide":"base-button-module_hide__oB2jj"};
+
+export { styles as default };

package/lib-esm/primitives/base-button/index.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const BaseButton: import("react").ForwardRefExoticComponent<(Omit<import("./types").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;
+}>, "ref"> | Omit<import("./types").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;
+}>, "ref">) & import("react").RefAttributes<HTMLButtonElement>> & {
+    Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    } & {
+        children: string | string[];
+    }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    } & {
+        icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        iconProps?: import("react").SVGProps<SVGSVGElement> | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export * from './types';

package/lib-esm/primitives/base-button/index.js

@@ -0,0 +1,10 @@
+import { BaseButton as BaseButton$1 } from './base-button.js';
+import { BaseButtonLabel } from './base-button-label.js';
+import { BaseButtonIcon } from './base-button-icon.js';
+
+const BaseButton = Object.assign(BaseButton$1, {
+  Label: BaseButtonLabel,
+  Icon: BaseButtonIcon
+});
+
+export { BaseButton };

package/lib-esm/primitives/base-button/types.d.ts

@@ -0,0 +1,28 @@
+import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type RequireAllOrNone } from 'type-fest';
+type Loading = {
+    /** Whether the button is loading. */
+    loading?: boolean;
+    /** The aria-label for the loading indicator. */
+    loadingAriaLabel?: string;
+};
+export interface BaseButtonInterface extends AriakitButtonProps {
+    /** The visual style of the button. */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outline';
+    /** The size of the button. */
+    size?: 'small' | 'large';
+}
+export type BaseButtonProps = BaseButtonInterface & RequireAllOrNone<Loading, keyof Loading>;
+export type BaseButtonLabelProps = ComponentPropsWithRef<'span'> & {
+    children: string | string[];
+};
+export type BaseButtonIconProps = ComponentPropsWithRef<'span'> & {
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    iconProps?: SVGProps<SVGSVGElement>;
+};
+export type BaseButtonContextType = Pick<BaseButtonProps, 'loading'> & Required<Pick<BaseButtonProps, 'variant' | 'size'>> & {
+    ariaLabel?: BaseButtonProps['aria-label'];
+    isIconButton: boolean;
+};
+export {};

package/lib-esm/primitives/base-button/utils.d.ts

@@ -0,0 +1,8 @@
+import { type LoadingIndicatorProps } from '../../loading-indicator/loading-indicator';
+import { type BaseButtonProps } from './types';
+export declare const getIconSize: (buttonSize: NonNullable<BaseButtonProps['size']>, isIconButton: boolean) => {
+    readonly width: string;
+    readonly height: string;
+};
+export declare const loadingIndicatorVariantMap: Record<NonNullable<BaseButtonProps['variant']>, NonNullable<LoadingIndicatorProps['variant']>>;
+export declare const buttonVariantToIconColorMap: Record<NonNullable<BaseButtonProps['variant']>, string>;

package/lib-esm/primitives/base-button/utils.js

@@ -0,0 +1,28 @@
+import { IconIconOnDark, IconIconOnLight, TextCtaLink, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+
+const getIconSize = (buttonSize, isIconButton) => {
+  let size;
+  if (isIconButton) {
+    size = buttonSize === 'large' ? Size5 : Size4;
+  } else {
+    size = buttonSize === 'large' ? Size4 : Size3;
+  }
+  return {
+    width: size,
+    height: size
+  };
+};
+const loadingIndicatorVariantMap = {
+  primary: 'light',
+  secondary: 'default',
+  tertiary: 'default',
+  outline: 'dark'
+};
+const buttonVariantToIconColorMap = {
+  primary: IconIconOnDark,
+  secondary: IconIconOnLight,
+  tertiary: TextCtaLink,
+  outline: IconIconOnLight
+};
+
+export { buttonVariantToIconColorMap, getIconSize, loadingIndicatorVariantMap };

package/lib-esm/primitives/base-inline-notice/base-inline-notice-actions.d.ts

@@ -0,0 +1,116 @@
+/// <reference types="react" />
+import { type BaseInlineNoticeActionsProps } from './types';
+export declare const PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../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;
+    className?: string | undefined;
+}, "ref"> | Omit<import("../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;
+    className?: string | undefined;
+}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TertiaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../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;
+    className?: string | undefined;
+}, "ref"> | Omit<import("../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;
+    className?: string | undefined;
+}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const BaseInlineNoticeActions: import("react").ForwardRefExoticComponent<BaseInlineNoticeActionsProps & import("react").RefAttributes<HTMLDivElement>> & {
+    PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../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;
+        className?: string | undefined;
+    }, "ref"> | Omit<import("../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;
+        className?: string | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    TertiaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../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;
+        className?: string | undefined;
+    }, "ref"> | Omit<import("../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;
+        className?: string | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+};