@box/blueprint-web 8.5.2 → 8.6.0

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

@@ -1,22 +1,21 @@
-/// <reference types="react" />
-import { type ModalFooterProps } from './types';
-/**
- * Wrapper for buttons in the footer of the modal.
- * Exposes primary and secondary buttons most commonly used inside footer of the modal.
- */
-export declare const ModalFooter: import("react").ForwardRefExoticComponent<ModalFooterProps & import("react").RefAttributes<HTMLDivElement>> & {
-    PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-        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 import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-        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<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-        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 import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-        children?: string | string[] | undefined;
-        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
-    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
-};
+import { type ModalFooterProps } from './types';
+/**
+ * Wrapper for buttons in the footer of the modal.
+ * Exposes primary and secondary buttons most commonly used inside footer of the modal.
+ */
+export declare const ModalFooter: import("react").ForwardRefExoticComponent<ModalFooterProps & import("react").RefAttributes<HTMLDivElement>> & {
+    PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+        children?: string | string[];
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+        children?: string | string[];
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    SecondaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+        children?: string | string[];
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+        children?: string | string[];
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+};

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

@@ -51,9 +51,9 @@ const SecondaryButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children: children
   });
 });
-/**
- * Wrapper for buttons in the footer of the modal.
- * Exposes primary and secondary buttons most commonly used inside footer of the modal.
+/**
+ * Wrapper for buttons in the footer of the modal.
+ * Exposes primary and secondary buttons most commonly used inside footer of the modal.
  */
 const ModalFooter = Object.assign(ModalFooterComponent, {
   PrimaryButton,

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { type ModalHeaderProps } from './types';
-/**
- * Header of the Modal
- */
-export declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+import { type ModalHeaderProps } from './types';
+/**
+ * Header of the Modal
+ */
+export declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;

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

@@ -6,8 +6,8 @@ import { Text } from '../text/text.js';
 import { ModalTitle } from './modal-title.js';
 import styles from './modal.module.js';
 
-/**
- * Header of the Modal
+/**
+ * Header of the Modal
  */
 const ModalHeader = /*#__PURE__*/forwardRef(({
   children,

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { type ModalScrollableContainerProps } from './types';
-/**
- * Wrapper for the contents of the modal.
- * This element is scrollable when the size of the content would make the modal not fit on the screen.
- */
-export declare const ModalScrollableContainer: import("react").ForwardRefExoticComponent<ModalScrollableContainerProps & {
-    'data-testid'?: string | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+import { type ModalScrollableContainerProps } from './types';
+/**
+ * Wrapper for the contents of the modal.
+ * This element is scrollable when the size of the content would make the modal not fit on the screen.
+ */
+export declare const ModalScrollableContainer: import("react").ForwardRefExoticComponent<ModalScrollableContainerProps & {
+    'data-testid'?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/modal/modal-scrollable-container.js

@@ -4,9 +4,9 @@ import { forwardRef, useCallback } from 'react';
 import { useScrollContext } from '../utils/scroll-context.js';
 import styles from './modal.module.js';
 
-/**
- * Wrapper for the contents of the modal.
- * This element is scrollable when the size of the content would make the modal not fit on the screen.
+/**
+ * Wrapper for the contents of the modal.
+ * This element is scrollable when the size of the content would make the modal not fit on the screen.
  */
 const ModalScrollableContainer = /*#__PURE__*/forwardRef(({
   children,

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { type ModalTitleProps } from './types';
-/**
- * An accessible title to be announced when the modal is opened.
- */
-export declare const ModalTitle: import("react").ForwardRefExoticComponent<ModalTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+import { type ModalTitleProps } from './types';
+/**
+ * An accessible title to be announced when the modal is opened.
+ */
+export declare const ModalTitle: import("react").ForwardRefExoticComponent<ModalTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;

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

@@ -3,8 +3,8 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 
-/**
- * An accessible title to be announced when the modal is opened.
+/**
+ * An accessible title to be announced when the modal is opened.
  */
 const ModalTitle = /*#__PURE__*/forwardRef(({
   asChild = false,

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { type ModalTriggerProps } from './types';
-/**
- * ModalTrigger connects your button to open a modal
- */
-export declare const ModalTrigger: import("react").ForwardRefExoticComponent<ModalTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+import { type ModalTriggerProps } from './types';
+/**
+ * ModalTrigger connects your button to open a modal
+ */
+export declare const ModalTrigger: import("react").ForwardRefExoticComponent<ModalTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -2,8 +2,8 @@ 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
+/**
+ * ModalTrigger connects your button to open a modal
  */
 const ModalTrigger = /*#__PURE__*/forwardRef(({
   children,

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

@@ -1,54 +1,53 @@
-/// <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 size="small">
-                <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) => import("react/jsx-runtime").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"> & {
-        size: "small" | "large" | "medium" | "xlarge";
-    } & 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<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-            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 import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-            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<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-            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 import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-            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 & {
-        'data-testid'?: string | undefined;
-    } & 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>>;
-};
+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 size="small">
+                <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) => import("react/jsx-runtime").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"> & {
+        size: "small" | "medium" | "large" | "xlarge";
+    } & 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<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+            children?: string | string[];
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+            children?: string | string[];
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+        SecondaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+            children?: string | string[];
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+            children?: string | string[];
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    Header: import("react").ForwardRefExoticComponent<import("./types").ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    ScrollableContainer: import("react").ForwardRefExoticComponent<import("./types").ModalScrollableContainerProps & {
+        'data-testid'?: string;
+    } & 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>>;
+};

package/lib-esm/modal/modal.js

@@ -21,28 +21,28 @@ const Root = ({
     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 size="small">
-                <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>
+/**
+ * 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 size="small">
+                <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,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--7e682","content":"bp_modal_module_content--7e682","popup_bounce_in":"bp_modal_module_popup_bounce_in--7e682","smallSizeModal":"bp_modal_module_smallSizeModal--7e682","mediumSizeModal":"bp_modal_module_mediumSizeModal--7e682","largeSizeModal":"bp_modal_module_largeSizeModal--7e682","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--7e682","close":"bp_modal_module_close--7e682","onColor":"bp_modal_module_onColor--7e682","backButton":"bp_modal_module_backButton--7e682","modalHeader":"bp_modal_module_modalHeader--7e682","modalTitle":"bp_modal_module_modalTitle--7e682","body":"bp_modal_module_body--7e682","scrollableContainer":"bp_modal_module_scrollableContainer--7e682","headerDividerLine":"bp_modal_module_headerDividerLine--7e682","footerDividerLine":"bp_modal_module_footerDividerLine--7e682","footer":"bp_modal_module_footer--7e682","footerButton":"bp_modal_module_footerButton--7e682"};
+var styles = {"overlay":"bp_modal_module_overlay--ae7f9","content":"bp_modal_module_content--ae7f9","popup_bounce_in":"bp_modal_module_popup_bounce_in--ae7f9","smallSizeModal":"bp_modal_module_smallSizeModal--ae7f9","mediumSizeModal":"bp_modal_module_mediumSizeModal--ae7f9","largeSizeModal":"bp_modal_module_largeSizeModal--ae7f9","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--ae7f9","close":"bp_modal_module_close--ae7f9","onColor":"bp_modal_module_onColor--ae7f9","backButton":"bp_modal_module_backButton--ae7f9","modalHeader":"bp_modal_module_modalHeader--ae7f9","modalTitle":"bp_modal_module_modalTitle--ae7f9","body":"bp_modal_module_body--ae7f9","scrollableContainer":"bp_modal_module_scrollableContainer--ae7f9","headerDividerLine":"bp_modal_module_headerDividerLine--ae7f9","footerDividerLine":"bp_modal_module_footerDividerLine--ae7f9","footer":"bp_modal_module_footer--ae7f9","footerButton":"bp_modal_module_footerButton--ae7f9"};
 
 export { styles as default };

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

@@ -1,55 +1,55 @@
-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'> & {
-    /** The size of the modal content.
-     * small: max-width: 460px
-     * medium: max-width: 540px
-     * large: max-width: 620px
-     * xlarge: max-width: 768px */
-    size: 'small' | 'medium' | 'large' | 'xlarge';
-};
-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;
-}
+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'> & {
+    /** The size of the modal content.
+     * small: max-width: 460px
+     * medium: max-width: 540px
+     * large: max-width: 620px
+     * xlarge: max-width: 768px */
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+};
+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/navigation-menu/index.d.ts

@@ -1,16 +1,15 @@
-/// <reference types="react" />
-export declare const NavigationMenu: {
-    Root: {
-        (props: import("@radix-ui/react-dropdown-menu").DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("../..").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
-    Link: import("react").ForwardRefExoticComponent<Omit<import("../..").LinkProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>, "ref"> & import("react").RefAttributes<unknown>>;
-    Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
-};
-export { type NavigationMenuContentProps } from './navigation-menu-content';
-export { type NavigationMenuItemProps } from './navigation-menu-item';
-export { type NavigationMenuRootProps } from './navigation-menu-root';
-export { type NavigationMenuTriggerProps } from './navigation-menu-trigger';
+export declare const NavigationMenu: {
+    Root: {
+        (props: import("../..").DropdownMenuRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("../..").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Link: import("react").ForwardRefExoticComponent<Omit<import("../..").LinkProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>, "ref"> & import("react").RefAttributes<unknown>>;
+    Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
+};
+export { type NavigationMenuContentProps } from './navigation-menu-content';
+export { type NavigationMenuItemProps } from './navigation-menu-item';
+export { type NavigationMenuRootProps } from './navigation-menu-root';
+export { type NavigationMenuTriggerProps } from './navigation-menu-trigger';

package/lib-esm/navigation-menu/navigation-menu-content.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { type DropdownMenuContentProps } from '../primitives/dropdown-menu';
-export type NavigationMenuContentProps = DropdownMenuContentProps;
-/**
- * Alias for DropdownMenu.Content
- */
-export declare const NavigationMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type DropdownMenuContentProps } from '../primitives/dropdown-menu';
+export type NavigationMenuContentProps = DropdownMenuContentProps;
+/**
+ * Alias for DropdownMenu.Content
+ */
+export declare const NavigationMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/navigation-menu/navigation-menu-content.js

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
 
-/**
- * Alias for DropdownMenu.Content
+/**
+ * Alias for DropdownMenu.Content
  */
 const NavigationMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {

package/lib-esm/navigation-menu/navigation-menu-item.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import { type DropdownMenuItemProps } from '../primitives/dropdown-menu';
-export type NavigationMenuItemProps = DropdownMenuItemProps;
-/**
- * An item of a NavigationMenu - this element should have a single NavigationMenu.Item as child
- * example:
- *     <NavigationMenu.Item>
- *        <NavigationMenu.Link href="https://box.com" target="_blank">
- *               Box
- *        </NavigationMenu.Link>
- *     </NavigationMenu.Item>
- */
-export declare const NavigationMenuItem: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+import React from 'react';
+import { type DropdownMenuItemProps } from '../primitives/dropdown-menu';
+export type NavigationMenuItemProps = DropdownMenuItemProps;
+/**
+ * An item of a NavigationMenu - this element should have a single NavigationMenu.Item as child
+ * example:
+ *     <NavigationMenu.Item>
+ *        <NavigationMenu.Link href="https://box.com" target="_blank">
+ *               Box
+ *        </NavigationMenu.Link>
+ *     </NavigationMenu.Item>
+ */
+export declare const NavigationMenuItem: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;

package/lib-esm/navigation-menu/navigation-menu-item.js

@@ -3,14 +3,14 @@ import React__default, { forwardRef, useRef, useCallback } from 'react';
 import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
 import { NavigationMenuLink } from './navigation-menu-link.js';
 
-/**
- * An item of a NavigationMenu - this element should have a single NavigationMenu.Item as child
- * example:
- *     <NavigationMenu.Item>
- *        <NavigationMenu.Link href="https://box.com" target="_blank">
- *               Box
- *        </NavigationMenu.Link>
- *     </NavigationMenu.Item>
+/**
+ * An item of a NavigationMenu - this element should have a single NavigationMenu.Item as child
+ * example:
+ *     <NavigationMenu.Item>
+ *        <NavigationMenu.Link href="https://box.com" target="_blank">
+ *               Box
+ *        </NavigationMenu.Link>
+ *     </NavigationMenu.Item>
  */
 const NavigationMenuItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {

package/lib-esm/navigation-menu/navigation-menu-link.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { type LinkProps } from '../primitives/link';
-/**
- * NavigationMenu link - this element must be placed in a NavigationMenu.Item
- */
-export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+import React from 'react';
+import { type LinkProps } from '../primitives/link';
+/**
+ * NavigationMenu link - this element must be placed in a NavigationMenu.Item
+ */
+export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;