@muraldevkit/ui-toolkit 4.45.2-dev-jOrv.1 → 4.46.0-dev-YZUx.1

package/dist/components/notification/MrlToast/MrlToast.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { NotificationKind } from '../constants';
+export type MrlToastKind = NotificationKind | 'collaborator' | 'general';
+export type MrlToastPosition = 'bottom' | 'top';
+export interface MrlToastCTA {
+    onClick: () => void;
+    text: string;
+    dataQa: string;
+}
+export interface MrlToastProps {
+    ['data-qa']?: string;
+    /**
+     * Determines whether the Toast Notification should automatically close after the time specified in `closeAfterMs` (default 3000ms).
+     *
+     * Note: auto-closing is only possible when no interactive elements (e.g. close button & CTA's) exist on the toast notification
+     */
+    autoClose?: boolean;
+    /**
+     * Sets the background color of the toast notification.
+     *
+     * Note: this is only applicable when the `kind` is set to 'collaborator'.
+     */
+    backgroundColor?: string;
+    className?: string;
+    /**
+     * The time in milliseconds after which the toast notification should automatically close.
+     */
+    closeAfterMs?: number;
+    kind?: MrlToastKind;
+    onClose?: () => void;
+    primaryCTA?: MrlToastCTA;
+    primaryMessage: string | JSX.Element;
+    secondaryCTA?: MrlToastCTA;
+    secondaryMessage?: string | JSX.Element;
+    /** Determines whether the close icon button should be shown. */
+    showCloseButton?: boolean;
+    showIcon?: boolean;
+}
+/**
+ * MrlToast component.
+ *
+ * @param {MrlToastProps} props - The props for the MrlToast component.
+ * @returns {React.ReactElement} The MrlToast component.
+ */
+export declare const MrlToast: ({ ["data-qa"]: qa, autoClose, backgroundColor, className, closeAfterMs, kind, onClose, primaryCTA, primaryMessage, secondaryCTA, secondaryMessage, showCloseButton, showIcon }: MrlToastProps) => React.ReactElement;

package/dist/components/notification/MrlToast/index.d.ts

@@ -0,0 +1 @@
+export { MrlToast } from './MrlToast';

package/dist/components/notification/constants.d.ts

@@ -0,0 +1,26 @@
+export declare const allowedValues: {
+    kinds: readonly ["info", "success", "warning", "error", "private", "general"];
+    levels: readonly ["2", "3", "4", "5", "6"];
+    scopes: readonly ["page", "inline"];
+    states: readonly ["open", "close"];
+};
+export type NotificationKind = (typeof allowedValues.kinds)[number];
+export type NotificationScope = (typeof allowedValues.scopes)[number];
+export type NotificationState = (typeof allowedValues.states)[number];
+export type NotificationLevel = (typeof allowedValues.levels)[number];
+export interface NotificationDefaults {
+    dismissible: boolean;
+    kind: NotificationKind;
+    level: NotificationLevel;
+    scope: NotificationScope;
+    state: NotificationState;
+}
+/**
+ * Default values for props on the Notification component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: NotificationDefaults;
+/**
+ * Default transition duration for the notification transitions
+ */
+export declare const TransitionDuration = 333;

package/dist/components/notification/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MrlBlockNotification';
+export * from './MrlToast';
+export * from './MrlInlineMessage';

package/dist/components/pagination/MrlPagination/MrlPagination.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface MrlPaginationProps extends React.ComponentPropsWithoutRef<'nav'> {
+    /** Elements to be rendered by MrlPagination */
+    children: React.ReactNode;
+    /** Additional class to add to the nav element */
+    className?: string;
+    /** Pagination heading */
+    heading?: string;
+    /** Styles to add to the wrapper for the unordered list */
+    style?: React.CSSProperties;
+}
+/**
+ * Pagination component
+ *
+ * @param {MrlPaginationProps} props - the component props
+ * @returns pagination
+ */
+export declare function MrlPagination({ children, className, heading, style, ...rest }: MrlPaginationProps): JSX.Element;
+export {};

package/dist/components/pagination/MrlPagination/index.d.ts

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

package/dist/components/pagination/MrlPaginationButton/MrlPaginationButton.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { MrlTooltipAnchor, MrlTooltipPosition } from '../..';
+import { PaginationButtonType } from '../constants';
+interface MrlPaginationButtonProps {
+    /** Additional class to add to the button element */
+    buttonClass?: string;
+    /** Additional class to add to the container element */
+    className?: string;
+    disabled?: boolean;
+    /** The type of pagination item  */
+    kind: PaginationButtonType;
+    /**
+     * Click event for the button.
+     */
+    handleClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /** Pagination heading */
+    text?: string;
+    /** The anchor of the tooltips on the buttons */
+    tooltipAnchor?: MrlTooltipAnchor;
+    /** The placement of the tooltips on the buttons */
+    tooltipPosition?: MrlTooltipPosition;
+}
+/**
+ * Pagination button component
+ *
+ * @param {MrlPaginationButtonProps} props - the component props
+ * @returns a pagintaion button
+ */
+export declare function MrlPaginationButton({ buttonClass, className, disabled, kind, handleClick, text, tooltipAnchor, tooltipPosition }: MrlPaginationButtonProps): JSX.Element;
+export {};

package/dist/components/pagination/MrlPaginationButton/index.d.ts

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

package/dist/components/pagination/MrlPaginationText/MrlPaginationText.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+interface MrlPaginationTextProps {
+    /** Additional class to add to the container element */
+    className?: string;
+    /** Show total as estimate */
+    isEstimate?: boolean;
+    /** The last visible item */
+    rangeEnd: number;
+    /** The first visible item */
+    rangeStart: number;
+    /** Additional class to add to the text */
+    textClass?: string;
+    /** The total number of items */
+    total: number;
+}
+/**
+ * Pagination text component
+ *
+ * @param {MrlPaginationTextProps} props - the component props
+ * @returns pagination text
+ */
+export declare function MrlPaginationText({ className, isEstimate, rangeStart, rangeEnd, textClass, total }: MrlPaginationTextProps): JSX.Element;
+export {};

package/dist/components/pagination/MrlPaginationText/index.d.ts

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

package/dist/components/pagination/constants.d.ts

@@ -0,0 +1 @@
+export type PaginationButtonType = 'first' | 'previous' | 'next' | 'last';

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MrlPagination';
+export * from './MrlPaginationButton';
+export * from './MrlPaginationText';

package/dist/components/panel/MrlPanel/MrlPanel.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+/**
+ * Props for the MrlPanel component.
+ */
+interface MrlPanelProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * A string value used for data-qa attribute.
+     */
+    ['data-qa']?: string;
+    /**
+     * Callback function that is called when the panel is closed.
+     */
+    onClose?: () => void;
+    /**
+     * The custom header element to be rendered in the panel.
+     * When a custom header is used developers need to provide th aria-label and aria-describedby.
+     */
+    header?: React.ReactNode;
+    /**
+     * The custom top actions to be rendered in the panel header.
+     * By default top actions are rendered on the right side of the title and include a MrlDivider at the end.
+     * The close button should not be included as part of the top actions.
+     */
+    topActions?: React.ReactNode;
+    /**
+     * The title of the panel.
+     */
+    title?: string;
+    /**
+     * The description of the panel.
+     */
+    description?: string;
+    /**
+     * Specifies whether to disable autofocus on the panel.
+     */
+    disableAutofocus?: boolean;
+    /**
+     * Specifies whether the panel has a sticky header to adjust styles.
+     */
+    hasStickyHeader?: boolean;
+    /**
+     * hasDataScrollAnchor is required to enable infinite scroll
+     */
+    hasDataScrollAnchor?: boolean;
+}
+/**
+ * MrlPanel component.
+ *
+ * @param props The MrlPanel component properties.
+ * @returns The MrlPanel component.
+ */
+export declare const MrlPanel: React.ForwardRefExoticComponent<Omit<MrlPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/panel/MrlPanel/index.d.ts

@@ -0,0 +1 @@
+export { MrlPanel } from './MrlPanel';

package/dist/components/panel/MrlPanelContext/MrlPanelContext.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export type MrlPanelContextState = {
+    hasScrollbar: boolean;
+    scrollbarWidth: number;
+};
+export declare const initialState: {
+    hasScrollbar: boolean;
+    scrollbarWidth: number;
+};
+export declare const MrlPanelContext: React.Context<MrlPanelContextState>;
+/**
+ * Returns the MrlPanelContext state.
+ *
+ * @returns The MrlPanelContext state.
+ */
+export declare const useMrlPanelContext: () => MrlPanelContextState;

package/dist/components/panel/MrlPanelContext/index.d.ts

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

package/dist/components/panel/MrlPanelFooter/MrlPanelFooter.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * Props for the MrlPanelFooter component.
+ */
+interface MrlPanelFooterProps extends React.ComponentPropsWithRef<'footer'> {
+    /**
+     * The children of the MrlPanelFooter component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies whether to show the divider.
+     */
+    hasDivider?: boolean;
+}
+/**
+ * MrlPanelFooter component.
+ *
+ * @param props The MrlPanelFooter component properties.
+ * @returns The MrlPanelFooter component.
+ */
+export declare const MrlPanelFooter: React.ForwardRefExoticComponent<Omit<MrlPanelFooterProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/panel/MrlPanelFooter/index.d.ts

@@ -0,0 +1 @@
+export { MrlPanelFooter } from './MrlPanelFooter';

package/dist/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Props for the MrlPanelStickyHeader component.
+ */
+interface MrlPanelStickyHeaderProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * The children of the MrlPanelStickyHeader component.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * MrlPanelStickyHeader component.
+ *
+ * @param props The MrlPanelStickyHeader component properties.
+ * @returns The MrlPanel component.
+ */
+export declare const MrlPanelStickyHeader: ({ children, className, ...rest }: MrlPanelStickyHeaderProps) => JSX.Element;
+export {};

package/dist/components/panel/MrlPanelStickyHeader/index.d.ts

@@ -0,0 +1 @@
+export { MrlPanelStickyHeader } from './MrlPanelStickyHeader';

package/dist/components/panel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MrlPanel';
+export * from './MrlPanelFooter';
+export * from './MrlPanelStickyHeader';

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

@@ -0,0 +1,131 @@
+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;
+    /**
+     * Vertical and horizontal alignment of the popover relative to the position with the trigger
+     * - 'left' and 'right' work with position 'top' and 'bottom'
+     * - 'top' and 'bottom' work with position 'left' and 'right'
+     * - 'center' works with all positions
+     *
+     * 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/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/components/popover/MrlPopover/hooks/use-mrl-popover-event-handlers.d.ts

@@ -0,0 +1,32 @@
+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'];
+};
+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;
+    toggleMenuMouse: () => 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 }: UseMrlPopoverEventHandlersOptions) => UseMrlPopoverEventHandlersReturn;
+export {};

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

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

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

@@ -0,0 +1,9 @@
+import { MenuAlignment } 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: string, alignment: MenuAlignment) => string;

package/dist/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/components/popover/MrlPopover/utilities/index.d.ts

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

package/dist/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/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/components/popover/demo/PopoverWithTrigger.d.ts

@@ -0,0 +1,24 @@
+/// <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;
+}
+/**
+ * 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, scrolling }: PopoverWithTriggerProps) => JSX.Element;
+export {};

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

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

package/dist/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/components/portal/index.d.ts

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