@conveyorhq/arrow-ds 1.125.0 → 1.127.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.125.0",
+  "version": "1.127.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Accordion/Accordion.d.ts

@@ -13,7 +13,7 @@ declare type AccordionGroupChildrenUnionType = AccordionGroupChildFunction | {
     children: React.ReactNode;
 };
 export declare type AccordionGroupProps = AccordionGroupOwnProps & AccordionGroupChildrenUnionType & Pick<StackProps, "spacing" | "className">;
-export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, className, ...rest }: AccordionGroupProps) => JSX.Element;
+export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, allowToggle, className, ...rest }: AccordionGroupProps) => JSX.Element;
 export declare type AccordionItemProps = AccordionItemOwnProps & BoxProps;
 export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
 declare type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
@@ -28,8 +28,9 @@ export declare const AccordionButton: React.ForwardRefExoticComponent<AccordionB
 export declare type AccordionIconProps = {
     className?: string;
     direction?: "up" | "down" | "left" | "right";
+    disabled?: boolean;
 } & Pick<IconProps, "color">;
-export declare const AccordionIcon: ({ className, direction, color, }: AccordionIconProps) => JSX.Element;
+export declare const AccordionIcon: ({ className, direction, color, disabled, }: AccordionIconProps) => JSX.Element;
 export declare type AccordionContentProps = {
     children: React.ReactNode;
     maxHeight?: string;
@@ -41,10 +42,10 @@ export declare const AccordionContent: ({ children, maxHeight, style, className,
 export declare type AccordionProps = AccordionOwnProps & BoxProps;
 export declare const Accordion: {
     (props: AccordionProps): JSX.Element;
-    Group: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, className, ...rest }: AccordionGroupProps) => JSX.Element;
+    Group: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, allowToggle, className, ...rest }: AccordionGroupProps) => JSX.Element;
     Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
     Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
-    Icon: ({ className, direction, color, }: AccordionIconProps) => JSX.Element;
+    Icon: ({ className, direction, color, disabled, }: AccordionIconProps) => JSX.Element;
     Content: ({ children, maxHeight, style, className, scrollClassName, ...rest }: AccordionContentProps) => JSX.Element;
 };
 export {};

package/public/components/Accordion/Accordion.js

@@ -20,7 +20,7 @@ const Heading_1 = require("../Heading");
 const Icon_1 = require("../Icon");
 const context_1 = require("./context");
 const cn = utilities_1.bemHOF("Accordion");
-const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, allowMultiple = true, className, ...rest }) => {
+const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, allowMultiple = true, allowToggle = true, className, ...rest }) => {
     const totalItems = react_1.default.Children.count(children);
     const [currentValue, setCurrentValue] = react_1.default.useState(defaultValue || "");
     const context = react_1.default.useMemo(() => ({
@@ -30,13 +30,21 @@ const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation,
         currentValue,
         setCurrentValue,
         allowMultiple,
-    }), [defaultValue, disableAnimation, totalItems, currentValue, allowMultiple]);
+        allowToggle,
+    }), [
+        defaultValue,
+        disableAnimation,
+        totalItems,
+        currentValue,
+        allowMultiple,
+        allowToggle,
+    ]);
     return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: context },
         react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing, className: className }, rest), typeof children === "function" ? children({ currentValue }) : children)));
 };
 exports.AccordionGroup = AccordionGroup;
 const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }) => {
-    const { defaultValue, currentValue, setCurrentValue, allowMultiple, } = context_1.useAccordionGroupContext();
+    const { defaultValue, currentValue, setCurrentValue, allowMultiple, allowToggle, } = context_1.useAccordionGroupContext();
     const hasDefaultValue = typeof defaultValue === "undefined" ? false : defaultValue === value;
     const defaultIsOpen = typeof defaultIsOpenProp === "undefined"
         ? hasDefaultValue
@@ -57,6 +65,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
         currentValue,
         setCurrentValue,
         allowMultiple,
+        allowToggle,
     }), [
         defaultIsOpen,
         isOpen,
@@ -69,6 +78,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
         currentValue,
         setCurrentValue,
         allowMultiple,
+        allowToggle,
     ]);
     react_1.default.useEffect(() => {
         if (!allowMultiple && currentValue !== value) {
@@ -83,7 +93,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
 exports.AccordionItem = AccordionItem;
 exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
     const { children, className, onClick, disabled = false, ...rest } = props;
-    const { buttonId, contentId, isOpen, onToggle, onClose, onOpen, value, setCurrentValue, } = context_1.useAccordionItemContext();
+    const { buttonId, contentId, isOpen, onToggle, onClose, onOpen, value, setCurrentValue, allowToggle, } = context_1.useAccordionItemContext();
     const buttonRef = react_1.default.useRef(null);
     const ref = react_merge_refs_1.default([forwardedRef, buttonRef]);
     return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button", className: className, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
@@ -94,21 +104,24 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
             if (setCurrentValue && value) {
                 setCurrentValue(value);
             }
-            if (onToggle) {
+            if (onToggle && allowToggle) {
                 onToggle();
             }
+            if (onOpen && !allowToggle) {
+                onOpen();
+            }
         } }, rest), typeof children === "function"
         ? children({ isOpen, onClose, onOpen })
         : children));
 });
-const AccordionIcon = ({ className, direction = "down", color, }) => {
+const AccordionIcon = ({ className, direction = "down", color, disabled = false, }) => {
     const icon = {
         up: Icon_1.ICON_TYPE.CHEVRON_UP,
         down: Icon_1.ICON_TYPE.CHEVRON_DOWN,
         left: Icon_1.ICON_TYPE.CHEVRON_LEFT,
         right: Icon_1.ICON_TYPE.CHEVRON_RIGHT,
     };
-    return (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default([cn({ e: "icon" }), className]), "data-direction": direction, icon: icon[direction], color: color }));
+    return (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default([cn({ e: "icon" }), className]), "data-direction": disabled ? undefined : direction, icon: icon[direction], color: color }));
 };
 exports.AccordionIcon = AccordionIcon;
 const AccordionContent = ({ children, maxHeight, style, className, scrollClassName, ...rest }) => {

package/public/components/Accordion/context.d.ts

@@ -13,6 +13,7 @@ declare type AccordionItemContextType = AccordionItemOwnProps & AccordionDisclos
     currentValue?: string;
     setCurrentValue?(value: string): void;
     allowMultiple?: boolean;
+    allowToggle?: boolean;
 };
 export declare const AccordionItemContext: Context<AccordionItemContextType>;
 export declare function useAccordionItemContext(): AccordionItemContextType;

package/public/components/Accordion/context.js

@@ -9,6 +9,7 @@ const defaultGroupContext = {
     currentValue: undefined,
     setCurrentValue: () => { },
     allowMultiple: true,
+    allowToggle: true,
 };
 exports.AccordionGroupContext = react_1.createContext(defaultGroupContext);
 function useAccordionGroupContext() {
@@ -29,6 +30,7 @@ const defaultContext = {
     currentValue: undefined,
     setCurrentValue: () => { },
     allowMultiple: true,
+    allowToggle: true,
 };
 exports.AccordionItemContext = react_1.createContext(defaultContext);
 function useAccordionItemContext() {

package/public/components/Accordion/types.d.ts

@@ -4,6 +4,7 @@ export declare type AccordionGroupOwnProps = {
     defaultValue?: string;
     disableAnimation?: boolean;
     allowMultiple?: boolean;
+    allowToggle?: boolean;
 };
 export declare type AccordionItemOwnProps = {
     defaultIsOpen?: boolean;

package/public/components/Description/index.d.ts

@@ -1 +1 @@
-export { Description } from "./Description";
+export * from "./Description";

package/public/components/Description/index.js

@@ -1,5 +1,13 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Description = void 0;
-var Description_1 = require("./Description");
-Object.defineProperty(exports, "Description", { enumerable: true, get: function () { return Description_1.Description; } });
+__exportStar(require("./Description"), exports);

package/public/components/Heading/Heading.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from "react";
-declare type HeadingProps = HTMLProps<HTMLHeadingElement>;
+export declare type HeadingProps = HTMLProps<HTMLHeadingElement>;
 export declare const Heading: {
     (props: HeadingProps): JSX.Element;
     H1: (props: HeadingProps) => JSX.Element;
@@ -9,4 +9,3 @@ export declare const Heading: {
     H5: (props: HeadingProps) => JSX.Element;
     H6: (props: HeadingProps) => JSX.Element;
 };
-export {};

package/public/components/Heading/index.d.ts

@@ -1 +1 @@
-export { Heading } from "./Heading";
+export * from "./Heading";

package/public/components/Heading/index.js

@@ -1,5 +1,13 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Heading = void 0;
-var Heading_1 = require("./Heading");
-Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Heading_1.Heading; } });
+__exportStar(require("./Heading"), exports);

package/public/components/Modal/Modal.d.ts

@@ -1,8 +1,10 @@
 import React, { HTMLAttributes, ReactNode } from "react";
 import { BoxProps } from "../Box";
 import { PortalProps, PortalRootElementType } from "../Portal";
+import { DescriptionProps } from "../Description";
 import { CloseButtonProps } from "../CloseButton";
 import { StackProps } from "../Stack";
+import { HeadingProps } from "../Heading";
 export declare enum MODAL_SIZE {
     DEFAULT = "default",
     LARGE = "large",
@@ -34,6 +36,9 @@ export interface ModalFooterMultiStepProps extends BoxProps {
     rightButtonLabel?: string;
 }
 export declare const ModalHeader: (props: BoxProps) => JSX.Element;
+export declare const ModalTitle: (props: HeadingProps) => JSX.Element;
+export declare const ModalSecondaryTitle: ({ className, ...rest }: HeadingProps) => JSX.Element;
+export declare const ModalDescription: ({ className, ...rest }: DescriptionProps) => JSX.Element;
 export declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
 export declare const ModalTabs: (props: StackProps) => JSX.Element;
 export declare const ModalFooter: (props: BoxProps) => JSX.Element;
@@ -81,6 +86,9 @@ export declare const Modal: {
     Screen: ({ className, style, ...rest }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
     Tabs: (props: StackProps) => JSX.Element;
     Header: (props: BoxProps) => JSX.Element;
+    Title: (props: HeadingProps) => JSX.Element;
+    SecondaryTitle: ({ className, ...rest }: HeadingProps) => JSX.Element;
+    Description: ({ className, ...rest }: DescriptionProps) => JSX.Element;
     Body: (props: ModalBodyProps) => JSX.Element;
     Footer: (props: BoxProps) => JSX.Element;
     FooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;

package/public/components/Modal/Modal.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.ModalScreen = exports.ModalContent = exports.ModalContainer = exports.ModalOverlay = exports.ModalPortal = exports.ModalRoot = exports.ModalClose = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalHeader = exports.MODAL_SIZE = void 0;
+exports.Modal = exports.ModalScreen = exports.ModalContent = exports.ModalContainer = exports.ModalOverlay = exports.ModalPortal = exports.ModalRoot = exports.ModalClose = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalDescription = exports.ModalSecondaryTitle = exports.ModalTitle = exports.ModalHeader = exports.MODAL_SIZE = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
@@ -52,6 +52,18 @@ const ModalHeader = (props) => {
     return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "header" }), className]) }, rest)));
 };
 exports.ModalHeader = ModalHeader;
+const ModalTitle = (props) => {
+    return react_1.default.createElement(Heading_1.Heading.H2, Object.assign({}, props));
+};
+exports.ModalTitle = ModalTitle;
+const ModalSecondaryTitle = ({ className, ...rest }) => {
+    return (react_1.default.createElement(Heading_1.Heading.H5, Object.assign({ className: classnames_1.default("text-gray-600", className) }, rest)));
+};
+exports.ModalSecondaryTitle = ModalSecondaryTitle;
+const ModalDescription = ({ className, ...rest }) => {
+    return (react_1.default.createElement(Description_1.Description, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "description" }), className) }, rest)));
+};
+exports.ModalDescription = ModalDescription;
 const ModalBody = (props) => {
     const { padded = true, className, ...rest } = props;
     return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([
@@ -196,11 +208,11 @@ const Modal = (props) => {
                             className,
                         ]) }, rest),
                         !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
-                            title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
+                            title && react_1.default.createElement(exports.ModalTitle, null, title),
                             react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
-                                secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
+                                secondaryTitle && (react_1.default.createElement(exports.ModalSecondaryTitle, null, secondaryTitle)),
                                 !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
-                        description && (react_1.default.createElement(Description_1.Description, { className: bem_1.bem(cn, { e: "description" }) }, description)),
+                        description && (react_1.default.createElement(exports.ModalDescription, null, description)),
                         children)),
                 react_1.default.createElement(exports.ModalScreen, null)))));
 };
@@ -213,6 +225,9 @@ exports.Modal.Content = exports.ModalContent;
 exports.Modal.Screen = exports.ModalScreen;
 exports.Modal.Tabs = exports.ModalTabs;
 exports.Modal.Header = exports.ModalHeader;
+exports.Modal.Title = exports.ModalTitle;
+exports.Modal.SecondaryTitle = exports.ModalSecondaryTitle;
+exports.Modal.Description = exports.ModalDescription;
 exports.Modal.Body = exports.ModalBody;
 exports.Modal.Footer = exports.ModalFooter;
 exports.Modal.FooterMultiStep = exports.ModalFooterMultiStep;

package/src/components/Accordion/Accordion.tsx

@@ -51,6 +51,7 @@ export const AccordionGroup = ({
   defaultValue,
   disableAnimation,
   allowMultiple = true,
+  allowToggle = true,
   className,
   ...rest
 }: AccordionGroupProps) => {
@@ -64,8 +65,16 @@ export const AccordionGroup = ({
       currentValue,
       setCurrentValue,
       allowMultiple,
+      allowToggle,
     }),
-    [defaultValue, disableAnimation, totalItems, currentValue, allowMultiple],
+    [
+      defaultValue,
+      disableAnimation,
+      totalItems,
+      currentValue,
+      allowMultiple,
+      allowToggle,
+    ],
   );
   return (
     <AccordionGroupContext.Provider value={context}>
@@ -99,6 +108,7 @@ export const AccordionItem = ({
     currentValue,
     setCurrentValue,
     allowMultiple,
+    allowToggle,
   } = useAccordionGroupContext();
 
   /**
@@ -131,6 +141,7 @@ export const AccordionItem = ({
       currentValue,
       setCurrentValue,
       allowMultiple,
+      allowToggle,
     }),
     [
       defaultIsOpen,
@@ -144,6 +155,7 @@ export const AccordionItem = ({
       currentValue,
       setCurrentValue,
       allowMultiple,
+      allowToggle,
     ],
   );
 
@@ -197,6 +209,7 @@ export const AccordionButton = React.forwardRef<
     onOpen,
     value,
     setCurrentValue,
+    allowToggle,
   } = useAccordionItemContext();
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const ref = mergeRefs<HTMLButtonElement>([forwardedRef, buttonRef]);
@@ -219,9 +232,12 @@ export const AccordionButton = React.forwardRef<
         if (setCurrentValue && value) {
           setCurrentValue(value);
         }
-        if (onToggle) {
+        if (onToggle && allowToggle) {
           onToggle();
         }
+        if (onOpen && !allowToggle) {
+          onOpen();
+        }
       }}
       {...rest}
     >
@@ -243,12 +259,18 @@ export type AccordionIconProps = {
    * point down, unless direction=down, then it will point up
    */
   direction?: "up" | "down" | "left" | "right";
+  /**
+   * Prevent the icon from rotating when the accordion is opened or closed; the
+   * direction will always be what is specified in the `direction` prop
+   */
+  disabled?: boolean;
 } & Pick<IconProps, "color">;
 
 export const AccordionIcon = ({
   className,
   direction = "down",
   color,
+  disabled = false,
 }: AccordionIconProps) => {
   const icon = {
     up: ICON_TYPE.CHEVRON_UP,
@@ -260,7 +282,7 @@ export const AccordionIcon = ({
   return (
     <Icon
       className={classNames([cn({ e: "icon" }), className])}
-      data-direction={direction}
+      data-direction={disabled ? undefined : direction}
       icon={icon[direction]}
       color={color}
     />

package/src/components/Accordion/context.ts

@@ -22,6 +22,7 @@ const defaultGroupContext: AccordionGroupContextType = {
   currentValue: undefined,
   setCurrentValue: () => {},
   allowMultiple: true,
+  allowToggle: true,
 };
 
 export const AccordionGroupContext: Context<AccordionGroupContextType> = createContext<AccordionGroupContextType>(
@@ -49,6 +50,7 @@ type AccordionItemContextType = AccordionItemOwnProps &
     currentValue?: string;
     setCurrentValue?(value: string): void;
     allowMultiple?: boolean;
+    allowToggle?: boolean;
   };
 
 const defaultContext: AccordionItemContextType = {
@@ -62,6 +64,7 @@ const defaultContext: AccordionItemContextType = {
   currentValue: undefined,
   setCurrentValue: () => {},
   allowMultiple: true,
+  allowToggle: true,
 };
 
 export const AccordionItemContext: Context<AccordionItemContextType> = createContext<AccordionItemContextType>(

package/src/components/Accordion/types.ts

@@ -14,6 +14,10 @@ export type AccordionGroupOwnProps = {
    * Whether or not multiple items can be expanded at once
    */
   allowMultiple?: boolean;
+  /**
+   * Allow any expanded accordion item to be collapsed
+   */
+  allowToggle?: boolean;
 };
 
 export type AccordionItemOwnProps = {

package/src/components/Description/index.ts

@@ -1 +1 @@
-export { Description } from "./Description";
+export * from "./Description";

package/src/components/Heading/Heading.tsx

@@ -5,7 +5,7 @@ import { bem } from "../../utilities/bem";
 
 const cn = "Heading";
 
-type HeadingProps = HTMLProps<HTMLHeadingElement>;
+export type HeadingProps = HTMLProps<HTMLHeadingElement>;
 
 export const Heading = (props: HeadingProps) => {
   const { children, className, ...rest } = props;

package/src/components/Heading/index.ts

@@ -1 +1 @@
-export { Heading } from "./Heading";
+export * from "./Heading";

package/src/components/Modal/Modal.tsx

@@ -16,14 +16,14 @@ import mergeRefs from "react-merge-refs";
 import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
 import { Portal, PortalProps, PortalRootElementType } from "../Portal";
-import { Description } from "../Description";
+import { Description, DescriptionProps } from "../Description";
 import { CloseButton, CloseButtonProps } from "../CloseButton";
 import { Stack, StackProps } from "../Stack";
 import { KEY_CODE } from "../../types";
 import { useKeyPress, useOutsideClick } from "../../hooks";
 import { bem } from "../../utilities/bem";
 import { Tab } from "../Tab";
-import { Heading } from "../Heading";
+import { Heading, HeadingProps } from "../Heading";
 import { ModalContext, useModalContext } from "./context";
 
 const cn = "Modal";
@@ -166,6 +166,25 @@ export const ModalHeader = (props: BoxProps) => {
   );
 };
 
+export const ModalTitle = (props: HeadingProps) => {
+  return <Heading.H2 {...props} />;
+};
+
+export const ModalSecondaryTitle = ({ className, ...rest }: HeadingProps) => {
+  return (
+    <Heading.H5 className={classNames("text-gray-600", className)} {...rest} />
+  );
+};
+
+export const ModalDescription = ({ className, ...rest }: DescriptionProps) => {
+  return (
+    <Description
+      className={classNames(bem(cn, { e: "description" }), className)}
+      {...rest}
+    />
+  );
+};
+
 export const ModalBody = (props: ModalBodyProps) => {
   const { padded = true, className, ...rest } = props;
   return (
@@ -510,13 +529,13 @@ export const Modal = (props: ModalProps) => {
             >
               {!noHeader && showHeader && (
                 <ModalHeader>
-                  {title && <Heading.H2>{title}</Heading.H2>}
+                  {title && <ModalTitle>{title}</ModalTitle>}
 
                   <Stack className="flex-shrink-0" spacing={5}>
                     {secondaryTitle && (
-                      <Heading.H5 className="text-gray-600">
+                      <ModalSecondaryTitle>
                         {secondaryTitle}
-                      </Heading.H5>
+                      </ModalSecondaryTitle>
                     )}
 
                     {!hideCloseButton && <ModalCloseButton />}
@@ -525,9 +544,7 @@ export const Modal = (props: ModalProps) => {
               )}
 
               {description && (
-                <Description className={bem(cn, { e: "description" })}>
-                  {description}
-                </Description>
+                <ModalDescription>{description}</ModalDescription>
               )}
 
               {children}
@@ -549,6 +566,9 @@ Modal.Content = ModalContent;
 Modal.Screen = ModalScreen;
 Modal.Tabs = ModalTabs;
 Modal.Header = ModalHeader;
+Modal.Title = ModalTitle;
+Modal.SecondaryTitle = ModalSecondaryTitle;
+Modal.Description = ModalDescription;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.FooterMultiStep = ModalFooterMultiStep;