@muraldevkit/ui-toolkit 4.67.0-dev-Vc0V.1 → 4.68.0-dev-NFbt.1

package/dist/types/components/popover/MrlPopover/MrlPopover.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { PortalProps } from '../../';
+import { MenuPosition, MenuAlignment, ActionState, CustomMenuPosition } from '../../menu/constants';
+type RenderPropFn = ({ closeMenu }: {
+    closeMenu: () => void;
+}) => JSX.Element;
+export interface MrlPopoverProps {
+    /**
+     * Set initial state of menu
+     * @default { actionType: null, isOpen: false }
+     */
+    actionState?: ActionState;
+    /** Label for the popover */
+    ariaLabel?: string;
+    /** ID of element to associate a label */
+    ariaLabelledBy?: string;
+    /** Children to be rendered within the menu component*/
+    children: React.ReactNode | RenderPropFn;
+    /** Custom class names for the popover */
+    className?: string;
+    /** Custom position for the menu */
+    customPosition?: CustomMenuPosition;
+    /**
+     * If the popover should disable click to open
+     *
+     * Example usage: if you do not want your component opened via click, set to true
+     */
+    disableClickToOpen?: boolean;
+    /**
+     * If the popover should close when clicking outside of the menu
+     *
+     * Example usage: MrlCallout component should not close when clicking outside, so it's set to true
+     */
+    disableClickOutside?: boolean;
+    /**
+     * Disable flipping of the popover when it goes off the screen
+     * @default false
+     */
+    disableFlipping?: boolean;
+    /**
+     * If the popover should disable focus trap
+     *
+     * The impact of enabling or disabling focus trap:
+     * - enabled : focus will remain trapped in the popover until a user closes the popover
+     * - disabled : focus will move to the next interactive element in the DOM when the user
+     * tabs out of the popover. Focus will move to the trigger when the user shift+tabs out of the popover
+     *
+     * Additional scenarios to consider with focus trap is disabled. When hasCloseButton is set to true/false:
+     * - true : if a user shows the close button, the popover will stay open until explicitly dismissed
+     * - false : if a user hides the close button, the popover will close when a user tabs out of it from the beginning or end
+     */
+    disableFocusTrap?: boolean;
+    /** If the popover should have a close button */
+    hasCloseButton?: boolean;
+    /** Unique identifier for the menu */
+    id?: string;
+    /** If the menu is a submenu */
+    isSubMenu?: boolean;
+    /**
+     * Horizontal and vertical alignment of the menu relative to the trigger element
+     *
+     * This does not impact submenus
+     * @default 'bottom'
+     */
+    position?: MenuPosition;
+    /**
+     * Alignment of the popover along the axis perpendicular to its position
+     * - For position 'top'/'bottom': 'start' = left, 'end' = right, 'center' = center horizontally
+     * - For position 'left'/'right': 'start' = top, 'end' = bottom, 'center' = center vertically
+     *
+     * @default 'center'
+     *
+     * This does not impact submenus
+     */
+    alignment?: MenuAlignment;
+    /**
+     * spacing of menu
+     * - 'default' has 16px padding
+     * - 'compact' has 12px padding
+     */
+    spacing?: 'default' | 'compact';
+    /**
+     * Reference to the DOM element that triggers this menu.
+     */
+    triggerRef?: React.RefObject<HTMLElement>;
+    /**
+     * If the menu should be rendered with the inverse theme
+     * @default 'primary'
+     */
+    kind?: 'primary' | 'inverse';
+    /**
+     * If the menu should have a pointer element
+     * @default false
+     */
+    point?: boolean;
+    /**
+     * Configuration for the portal component
+     */
+    portalProps?: Omit<PortalProps, 'children'>;
+    /**
+     * Offset in pixels for the popover
+     *
+     * The popover automatically calculates the proper offset based on the position and alignment
+     * this prop will override those values.
+     */
+    offset?: number;
+    /**
+     * Callback to be called when the menu is opened
+     */
+    onOpen?: () => void;
+    /**
+     * Callback to be called when the menu is closed
+     * @param type - type of close event
+     */
+    onClose?: (type?: string) => void;
+    /**
+     * data-qa attribute for the popover
+     */
+    ['data-qa']?: string;
+}
+/**
+ * MrlPopover
+ *
+ * Renders a popover component with position and alignment relative to a trigger element
+ * @param {MrlPopoverProps} props - The props for the MrlPopover component
+ * @returns {Element} - rendered MrlPopover component
+ */
+export declare function MrlPopover({ alignment, ariaLabel, ariaLabelledBy, children, className, customPosition, disableClickToOpen, disableClickOutside, disableFlipping, disableFocusTrap, hasCloseButton, spacing, id, isSubMenu, actionState, position, point, portalProps, kind, offset, onClose, onOpen, triggerRef, ...rest }: MrlPopoverProps): JSX.Element;
+export declare namespace MrlPopover {
+    var componentType: string;
+}
+export {};

package/dist/types/components/popover/MrlPopover/MrlPopoverScrollContainer.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface MrlPopoverScrollContainerProps {
+    /** class names for the scrollable wrapper */
+    className: string;
+    /** inline styles for the scrollable wrapper */
+    style: React.CSSProperties;
+    /** popover content to render inside the scrollable wrapper */
+    children: React.ReactNode;
+}
+/**
+ * Scrollable wrapper for the popover content.
+ *
+ * @param {MrlPopoverScrollContainerProps} props - the component props
+ * @returns the rendered scrollable popover content wrapper
+ */
+export declare function MrlPopoverScrollContainer({ className, style, children }: MrlPopoverScrollContainerProps): JSX.Element;

package/dist/types/components/popover/MrlPopover/context/MrlPopoverContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+type MrlPopoverContext = {
+    /**
+     * Close menu is shared in context to allow for closing the popover from a child component
+     *
+     * @returns {void}
+     */
+    closeMenu: () => void;
+};
+/**
+ * Adds context for the MrlPopover component
+ */
+export declare const MrlPopoverContext: React.Context<MrlPopoverContext | undefined>;
+/**
+ * Returns the MrlPopoverContext state.
+ *
+ * @returns The MrlPopoverContext state.
+ */
+export declare const useMrlPopoverContext: () => MrlPopoverContext;
+export {};

package/dist/types/components/popover/MrlPopover/hooks/use-mrl-popover-event-handlers.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ActionState } from '../../../menu';
+import { MrlPopoverProps } from '../MrlPopover';
+type UseMrlPopoverEventHandlersOptions = {
+    closeMenu: () => void;
+    isSubMenu: MrlPopoverProps['isSubMenu'];
+    disableFocusTrap: MrlPopoverProps['disableFocusTrap'];
+    disableClickToOpen: MrlPopoverProps['disableClickToOpen'];
+    hasCloseButton: MrlPopoverProps['hasCloseButton'];
+    interactiveElements: HTMLElement[];
+    menuRef: React.RefObject<HTMLDivElement>;
+    state: ActionState;
+    setState: React.Dispatch<React.SetStateAction<ActionState>>;
+    triggerRef: MrlPopoverProps['triggerRef'];
+    isTriggerDisabled: () => boolean;
+};
+type UseMrlPopoverEventHandlersReturn = {
+    handleClose: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    handleMenuKey: (e: React.KeyboardEvent) => void;
+    handleTriggerSiblingKey: (e: KeyboardEvent) => void;
+    hideMenuHover: (e: MouseEvent) => void;
+    showMenuHover: () => void;
+    toggleMenuKey: (e: KeyboardEvent) => void;
+    toggleMenuTrigger: () => void;
+};
+/**
+ * Creates all of the required event handlers for the MrlPopover component
+ *
+ * @param options configuration options
+ * @returns all of the required event handlers
+ */
+export declare const useMrlPopoverEventHandlers: ({ closeMenu, isSubMenu, disableFocusTrap, disableClickToOpen, hasCloseButton, interactiveElements, menuRef, state, setState, triggerRef, isTriggerDisabled }: UseMrlPopoverEventHandlersOptions) => UseMrlPopoverEventHandlersReturn;
+export {};

package/dist/types/components/popover/MrlPopover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlPopover';
+export * from './utilities';

package/dist/types/components/popover/MrlPopover/utilities/get-data-point.d.ts

@@ -0,0 +1,9 @@
+import { MenuAlignment, MenuPosition } from '../../../menu';
+/**
+ * Returns the data-point attribute for the popover pointer
+ *
+ * @param position - position of the menu
+ * @param alignment - alignment of the menu
+ * @returns - data-point attribute value
+ */
+export declare const getDataPoint: (position: MenuPosition, alignment: MenuAlignment) => string;

package/dist/types/components/popover/MrlPopover/utilities/get-offset.d.ts

@@ -0,0 +1,9 @@
+import { MenuPosition } from '../../../menu';
+/**
+ * Returns a value in PX for the offset of the popover from the menu at different positions
+ *
+ * @param position - position of the menu
+ * @param point - if the menu has a pointer
+ * @returns - offset in PX
+ */
+export declare const getOffset: (position: MenuPosition, point: boolean) => number;

package/dist/types/components/popover/MrlPopover/utilities/index.d.ts

@@ -0,0 +1,2 @@
+export * from './get-data-point';
+export * from './get-offset';

package/dist/types/components/popover/demo/PopoverWithIconButton.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
+interface PopoverWithIconButtonProps {
+    hasCloseButton?: boolean;
+    menuAlign?: MenuPosition;
+    spacing?: 'default' | 'compact';
+    alignment?: MenuAlignment;
+    actionState?: ActionState;
+    onClose?: () => void;
+    triggerAlignment?: 'left' | 'right' | 'center';
+    kind?: 'inverse' | 'primary';
+    point?: boolean;
+}
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @param {PopoverWithIconButtonProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export declare const PopoverWithIconButton: ({ menuAlign, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton }: PopoverWithIconButtonProps) => JSX.Element;
+export {};

package/dist/types/components/popover/demo/PopoverWithSelect.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
+interface PopoverWithSelectProps {
+    hasCloseButton?: boolean;
+    menuAlign?: MenuPosition;
+    spacing?: 'default' | 'compact';
+    alignment?: MenuAlignment;
+    actionState?: ActionState;
+    onClose?: () => void;
+    triggerAlignment?: 'left' | 'right' | 'center';
+    kind?: 'inverse' | 'primary';
+    point?: boolean;
+    disableFocusTrap?: boolean;
+    scrolling?: boolean;
+    position?: MenuPosition;
+}
+/**
+ * Demo of a popover with a select inside
+ *
+ * @param {PopoverWithSelectProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export declare const PopoverWithSelect: ({ menuAlign, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton, disableFocusTrap }: PopoverWithSelectProps) => JSX.Element;
+export {};

package/dist/types/components/popover/demo/PopoverWithTrigger.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
+interface PopoverWithTriggerProps {
+    hasCloseButton?: boolean;
+    menuAlign?: MenuPosition;
+    spacing?: 'default' | 'compact';
+    alignment?: MenuAlignment;
+    actionState?: ActionState;
+    onClose?: () => void;
+    triggerAlignment?: 'left' | 'right' | 'center';
+    kind?: 'inverse' | 'primary';
+    point?: boolean;
+    disableFocusTrap?: boolean;
+    scrolling?: boolean;
+    position?: MenuPosition;
+    disableTrigger?: boolean;
+    ariaDisabled?: boolean;
+}
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @param {PopoverWithTriggerProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export declare const PopoverWithTrigger: ({ menuAlign, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton, disableFocusTrap, disableTrigger, scrolling, ariaDisabled }: PopoverWithTriggerProps) => JSX.Element;
+export {};

package/dist/types/components/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlPopover';

package/dist/types/components/portal/MrlPortal.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PORTAL_LAYERS } from '../../utils/layers';
+type PortalLayer = (typeof PORTAL_LAYERS)[keyof typeof PORTAL_LAYERS];
+export interface PortalProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    ['data-qa']?: string;
+    id?: string;
+    layer?: PortalLayer;
+}
+export declare const MRL_PORTAL_ID: "mrl-root-portal";
+/**
+ * Dynamically creates a single portal and send your children to the portal.
+ * Where they will live outside of the normal document flow
+ *
+ * @param PortalProps Portal only takes children. Contact the platform team if you need to extend this.
+ * @returns MrlPortal component
+ */
+export declare const MrlPortal: ({ children, className, id, layer, ...remainingProps }: PortalProps) => React.ReactElement | null;
+export {};

package/dist/types/components/portal/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlPortal';

package/dist/types/components/rovingTabindex/MrlRovingTabindex/MrlRovingTabindex.d.ts

@@ -0,0 +1,142 @@
+import * as React from 'react';
+type RefType = HTMLElement | HTMLDivElement | null;
+/**
+ * Gets tabbable elements in a given bit of the DOM, excluding disabled elements
+ * @param {RefType} ref - the ref of the container
+ * @param {string} selector - the selector to query (should already exclude disabled elements)
+ * @returns {HTMLElement[]} - an array of tabbable HTML elements
+ */
+export declare const getTabbableElements: (ref: RefType, selector: string) => HTMLElement[];
+export type FocusOnInitPosition = 'first' | 'last';
+export interface RovingPropTypes {
+    activeSelector?: string;
+    /**
+     * If true, disabled elements (with disabled attribute or aria-disabled="true")
+     * will be included in the roving tabindex. Defaults to true (disabled elements are included).
+     */
+    allowDisabled?: boolean;
+    children: React.ReactNode;
+    /**
+     * delayMount is used to apply a delay to the mounting
+     * of the RovingTabindex component. This can be helpful in
+     * the event that a component's children have not been fully
+     * rendered by the time the componentDidMount function is triggered
+     */
+    delayMount?: number;
+    focusOnInit?: FocusOnInitPosition;
+    focusWithShortcut?: boolean;
+    forceUpdate?: boolean;
+    hasChildRoving?: boolean;
+    ignoreElements?: string;
+    isFocused?: boolean;
+    onBlur?: () => void;
+    onRefocus?: (shouldRefocus: boolean) => void;
+    orientation?: RovingOrientation;
+    qa?: string;
+}
+type RovingOrientation = 'horizontal' | 'vertical';
+type NavigationDirection = 'forward' | 'back';
+/**
+ * Component to create a Roving Tabindex in the DOM
+ * @returns {HTMLDivElement}
+ */
+declare class MrlRovingTabindex extends React.Component<RovingPropTypes> {
+    elements: Array<Element | null>;
+    orientation: RovingOrientation;
+    ref: HTMLDivElement | null;
+    selector: string;
+    /**
+     * MrlRovingTabindex class constructor
+     * @param props - the MrlRovingTabindex props
+     * @returns new instance
+     */
+    constructor(props: RovingPropTypes);
+    /**
+     * Runs when the MrlRovingTabindex component mounts
+     */
+    componentDidMount(): void;
+    /**
+     * Runs when the MrlRovingTabindex component unmounts
+     */
+    componentWillUnmount(): void;
+    /**
+     * Runs when the MrlRovingTabindex component updates
+     * @param {RovingPropTypes} prevProps - the props before the component updated
+     */
+    componentDidUpdate(prevProps: RovingPropTypes): void;
+    handleRef: (ref: HTMLDivElement) => HTMLDivElement;
+    /**
+     * Handles focus out events to detect when focus leaves the roving tabindex container
+     * @param {FocusEvent} event - the focus out event
+     * @returns {void}
+     */
+    handleFocusOut: (event: FocusEvent) => void;
+    /**
+     * Sets component array of elements
+     * @returns {void}
+     */
+    setElements: () => void;
+    /**
+     * Queries for a single element matching the selector within the container.
+     * @param selector - CSS selector to query
+     * @returns The matching element or null
+     */
+    queryElement: (selector: string) => HTMLElement | null;
+    /**
+     * Gets the active element based on priority order:
+     * 1. Element matching the custom `activeSelector` prop (e.g., custom radio elements)
+     * 2. Element with `data-roving-active` attribute (programmatically set active)
+     * 3. First element with `data-roving` attribute (default fallback)
+     *
+     * Disabled elements are excluded unless `allowDisabled` is true.
+     * @returns The active HTML element, or undefined if none found
+     */
+    getActiveElement: () => HTMLElement | undefined;
+    /**
+     * Sets an element to `tabindex=0` and sets all other elements to `tabindex=-1`
+     * @param {HTMLElement | undefined} el - the element to set as active
+     * @returns {void}
+     */
+    setActiveElement: (el: HTMLElement | undefined) => void;
+    /**
+     * Sets focus to a specific element
+     * @param {HTMLElement | undefined} el - the element to set in focus
+     * @returns {void}
+     */
+    setElementFocus: (el: HTMLElement | undefined) => void;
+    /**
+     * Sets focus to an element based on a direction (`forward` or `back`)
+     * Disabled elements are already excluded from this.elements via CSS selector
+     * @param {NavigationDirection} direction 'forward' | 'back'
+     * @returns {void}
+     */
+    setFocusByDirection: (direction: NavigationDirection) => void;
+    /**
+     * Sets all tabindex for elements of this component to -1
+     * Also ensures disabled elements (excluded from roving tabindex) have tabindex=-1
+     * @returns {void}
+     */
+    unsetTabbableElements: () => void;
+    /**
+     * Will return `false` if the orientation param matches the
+     * orientation of the component and the actively focused element has a menu or select
+     * @param orientation : 'horizontal' | 'vertical'
+     * @returns boolean
+     */
+    canUseArrows: (orientation: RovingOrientation) => boolean;
+    handleKeyUp: (e: React.KeyboardEvent) => void;
+    handleFocusedFirst: () => void;
+    handleFocusedLast: () => void;
+    handleRefocus: () => void;
+    /**
+     * Mounts the MrlRovingTabindex component
+     * @returns {void}
+     */
+    mount(): void;
+    /**
+     * Renders the MrlRovingTabindex component
+     * @returns {HTMLDivElement} - the rendered MrlRovingTabindex component
+     */
+    render(): JSX.Element;
+}
+export { MrlRovingTabindex };

package/dist/types/components/rovingTabindex/MrlRovingTabindex/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlRovingTabindex';

package/dist/types/components/rovingTabindex/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlRovingTabindex';

package/dist/types/components/skeleton/MrlSkeleton/MrlSkeleton.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface MrlSkeletonProps extends React.ComponentProps<'div'> {
+    /** An object with CSS properties */
+    style?: React.CSSProperties;
+    /** MrlSkeleton wrapper class */
+    className?: string;
+    /** The height of the MrlSkeleton component */
+    height?: React.CSSProperties['height'];
+    /** The width of the MrlSkeleton component */
+    width?: React.CSSProperties['width'];
+    /** The shape of the Skeleton component */
+    shape?: 'circle' | 'default';
+}
+/**
+ * MrlSkeleton React component.
+ *
+ * @param props {MrlSkeletonProps} - component props
+ * @returns a MrlSkeleton React component.
+ */
+export declare function MrlSkeleton({ height, shape, style, width, className, ...rest }: MrlSkeletonProps): JSX.Element;

package/dist/types/components/skeleton/MrlSkeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlSkeleton';

package/dist/types/components/skeleton/MrlSkeletonText/MrlSkeletonText.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TextSizes } from '../../text/constants';
+export interface MrlSkeletonTextProps extends React.ComponentProps<'div'> {
+    /** An object of CSS properties */
+    style?: React.CSSProperties;
+    /** MrlSkeletonText wrapper class */
+    className?: string;
+    /** The width of the MrlSkeletonText component */
+    width?: React.CSSProperties['width'];
+    /** Number of lines to render */
+    lines?: number;
+    /** Size of the text which is the same as MrlText component */
+    size?: TextSizes;
+}
+/**
+ * MrlSkeletonText React component. Used to create skeleton elements as placeholders
+ * for the MrlText component. It supports the same text sizes as the MrlText component.
+ *
+ * @param props {MrlSkeletonTextProps} - component props
+ * @returns a MrlSkeleton React component.
+ */
+export declare function MrlSkeletonText({ className, style, width, lines, size, ...rest }: MrlSkeletonTextProps): JSX.Element;

package/dist/types/components/skeleton/MrlSkeletonText/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlSkeletonText';

package/dist/types/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlSkeleton';
+export * from './MrlSkeletonText';

package/dist/types/components/svg/MrlSvg/MrlSvg.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { MrlComponentProps } from '../../../utils';
+import { SVGSize } from '../constants';
+export type DSIcons = typeof import('@muraldevkit/ds-icons');
+export type DSPictograms = typeof import('@muraldevkit/ds-pictograms');
+export type DSIconType = DSIcons[keyof DSIcons] | DSPictograms[keyof DSPictograms];
+export interface SvgPropTypes extends Omit<MrlComponentProps, 'style'>, Omit<React.ComponentProps<'svg'>, 'ref'> {
+    /** Any additional classes to style the SVG's container */
+    className?: string;
+    /**
+     * URL path to a static SVG file. Must provide either path or svg prop.
+     */
+    path?: string;
+    /** Enable lazy loading when a path is provided. */
+    lazyLoad?: boolean;
+    isClone?: boolean;
+    /** The size of an SVG Component */
+    size?: SVGSize;
+    /**
+     * A object of CSS properties. Please use style sparingly, and only in cases where your
+     * needs can not be met by passing a class to the component.
+     */
+    style?: Record<string, unknown>;
+    /** The SVG object to parse into an HTML SVG element. Must provide either path or svg prop. */
+    svg?: DSIconType;
+}
+/**
+ * Creating and exporting component class for Mural SVG
+ *
+ * Supports both static SVG objects and dynamic URL loading.
+ *
+ * @param {SvgPropTypes} props the props for your MrlSvg
+ * @returns {React.ReactElement} a rendered SVG
+ */
+export declare const MrlSvg: React.MemoExoticComponent<(props: SvgPropTypes) => React.ReactElement>;

package/dist/types/components/svg/MrlSvg/index.d.ts

@@ -0,0 +1 @@
+export { MrlSvg, type SvgPropTypes } from './MrlSvg';

package/dist/types/components/svg/MrlSvgAnimate/MrlSvgAnimate.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { AnimatedState } from '../constants';
+/**
+ * Props for MrlSvgAnimate component
+ */
+export interface MrlSvgAnimateProps {
+    /** Any additional classes to style the SVG's container */
+    className?: string;
+    /**
+     * JSON file contents used by Lottie to generate an animated SVG to render.
+     * This attribute is mutually exclusive with fullPath and cdnFile.
+     * Note: When dynamically changing the svgData, if a configuration change
+     * is required be sure to set any new values before changing the svgData.
+     */
+    svgData?: string;
+    /**
+     * Path to a JSON file used by Lottie to generate an animated SVG to render.
+     * This attribute is mutually exclusive with svgData and cdnFile.
+     * Note: When dynamically changing the fullPath, if a configuration change
+     * is required be sure to set any new values before changing the fullPath.
+     */
+    fullPath?: string;
+    /**
+     * File name of an animation hosted on Mural's CDN used by Lottie to generate
+     * an animated SVG to render. This is the preferred usage of this component
+     * in terms of performance. It supports any file located at `static/animations`.
+     * This attribute is mutually exclusive with fullPath and svgData.
+     * Note: When dynamically changing the cdnFile, if a configuration change
+     * is required be sure to set any new values before changing the cdnFile.
+     */
+    cdnFile?: string;
+    /** Icon animation state. */
+    state?: AnimatedState;
+    /** Delay (in ms) before animation begins. */
+    delay?: number;
+    /**
+     * Optional [Lottie configuration object](http://airbnb.io/lottie/#/web) for the
+     * loadAnimation method
+     */
+    config?: string;
+}
+/**
+ * MrlSvgAnimate
+ *
+ * This is a React functional component used for SVGs with robust After Effects animations.
+ * @param {MrlSvgAnimateProps} props - The properties for the MrlSvgAnimate component.
+ * @returns {React.ReactElement} - The rendered MrlSvgAnimate component.
+ */
+export declare const MrlSvgAnimate: React.FC<MrlSvgAnimateProps>;
+export default MrlSvgAnimate;

package/dist/types/components/svg/MrlSvgAnimate/index.d.ts

@@ -0,0 +1 @@
+export { MrlSvgAnimate, type MrlSvgAnimateProps } from './MrlSvgAnimate';