@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-7K0j.1

package/dist/types/components/form/select/components/MrlSelectValueContainer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GroupBase, ValueContainerProps } from 'react-select';
+/**
+ * MrlSelectValueContainer component
+ *
+ * @param props - the react-select value container props
+ * @returns a value container component
+ */
+export declare function MrlSelectValueContainer<T, IsMulti extends boolean = false, Group extends GroupBase<T> = GroupBase<T>>(props: ValueContainerProps<T, IsMulti, Group>): JSX.Element;

package/dist/types/components/form/select/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './MrlSelectDropdownIndicator';
+export * from './MrlSelectOption';
+export * from './MrlSelectMultiValueRemove';
+export * from './MrlSelectMultiValue';
+export * from './MrlSelectContainer';
+export * from './MrlSelectValueContainer';
+export * from './MrlSelectClearIndicator';

package/dist/types/components/form/select/index.d.ts

@@ -0,0 +1,6 @@
+export * from './MrlSelect';
+export * from './MrlMultiSelect';
+export * from './MrlCreatableSelect';
+export * from './MrlMultiCreatableSelect';
+export * from './components';
+export * from './utils';

package/dist/types/components/form/select/styles/default.d.ts

@@ -0,0 +1,6 @@
+import { GroupBase, StylesConfig } from 'react-select';
+/**
+ * MrlSelect styles object for the default kind
+ * @returns a styles object
+ */
+export declare function defaultStyles<T, IsMulti extends boolean = false, Group extends GroupBase<T> = GroupBase<T>>(): StylesConfig<T, IsMulti, Group>;

package/dist/types/components/form/select/styles/index.d.ts

@@ -0,0 +1,9 @@
+import { GroupBase, StylesConfig } from 'react-select';
+import { SelectKind } from '../types';
+/**
+ * Gets the styles objects for each MrlSelect kind
+ *
+ * @param kind - the select kind
+ * @returns the styles object for react-select
+ */
+export declare function getSelectStyles<T, IsMulti extends boolean = false, Group extends GroupBase<T> = GroupBase<T>>(kind?: SelectKind): StylesConfig<T, IsMulti, Group>;

package/dist/types/components/form/select/styles/inline.d.ts

@@ -0,0 +1,7 @@
+import { GroupBase, StylesConfig } from 'react-select';
+/**
+ * MrlSelect styles object for the inline kind
+ *
+ * @returns a styles object
+ */
+export declare function inlineStyles<T, IsMulti extends boolean = false, Group extends GroupBase<T> = GroupBase<T>>(): StylesConfig<T, IsMulti, Group>;

package/dist/types/components/form/select/styles/inlineNoLabel.d.ts

@@ -0,0 +1,7 @@
+import { GroupBase, StylesConfig } from 'react-select';
+/**
+ * MrlSelect styles object for the inline-no-label kind
+ *
+ * @returns a styles object
+ */
+export declare function inlineNoLabelStyles<T, IsMulti extends boolean = false, Group extends GroupBase<T> = GroupBase<T>>(): StylesConfig<T, IsMulti, Group>;

package/dist/types/components/form/select/styles/inlineStacked.d.ts

@@ -0,0 +1,7 @@
+import { GroupBase, StylesConfig } from 'react-select';
+/**
+ * MrlSelect styles object for the inline-stacked kind
+ *
+ * @returns a styles object
+ */
+export declare function inlineStackedStyles<T, IsMulti extends boolean = false, Group extends GroupBase<T> = GroupBase<T>>(): StylesConfig<T, IsMulti, Group>;

package/dist/types/components/form/select/types.d.ts

@@ -0,0 +1,5 @@
+export type DefaultOption = {
+    value: string;
+    label: string;
+};
+export type SelectKind = 'default' | 'inline-stacked' | 'inline' | 'inline-no-label';

package/dist/types/components/form/select/utils/closeMenuOnScroll.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Evaluates the scroll event target with a given class name to prevent closing the select menu when
+ * it renders inside a scrollable container.
+ * if the scroll event target contains the provided class, the function return `false` to keep the menu open.
+ * In most scenarios, `className` will be the class name of the select menu list.
+ *
+ * @param  className - The class name to check against the target element's class list.
+ * @returns An event handler function that takes an event as an argument
+ */
+export declare function closeMenuOnScroll(className: string): (e: Event) => boolean;

package/dist/types/components/form/select/utils/index.d.ts

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

package/dist/types/components/form/switch/MrlSwitch/MrlSwitch.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface MrlSwitchProps extends React.ComponentPropsWithoutRef<'input'> {
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+    /**
+     * The `label` is best used as a string, which will style according to MrlLabel styles.
+     * If you need custom styles, you can use `className` or use a span that you style as `label`
+     */
+    label: string | React.ReactNode;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    selected?: boolean;
+}
+export declare const MrlSwitch: React.MemoExoticComponent<({ className, disabled, id, label, onChange, selected, ...rest }: MrlSwitchProps) => React.JSX.Element>;
+export {};

package/dist/types/components/form/switch/MrlSwitch/index.d.ts

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

package/dist/types/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface MrlSwitchStandaloneProps extends React.ComponentPropsWithoutRef<'input'> {
+    className?: string;
+    id: string;
+    labelledBy?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    selected?: boolean;
+}
+export declare const MrlSwitchStandalone: React.MemoExoticComponent<({ className, id, labelledBy, onChange, selected, ...rest }: MrlSwitchStandaloneProps) => React.JSX.Element>;
+export {};

package/dist/types/components/form/switch/MrlSwitchStandalone/index.d.ts

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

package/dist/types/components/form/switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlSwitch/MrlSwitch';
+export * from './MrlSwitchStandalone/MrlSwitchStandalone';

package/dist/types/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { InputStates, MrlFormInputError } from '../../constants';
+import './MrlEditableTextInput.global.scss';
+interface MrlEditableTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Id of the text input */
+    inputId: string;
+    /**
+     * 	Value of the label text assigned to the input.
+     *  This is used to describe to the user what field they will be editing when interacting with the edit buton.
+     */
+    inputLabelText: string;
+    /** The value of the text input used to make it a controlled input */
+    value?: string;
+    /**
+     * The maximum number of characters that the user can enter.
+     * If undefined or set to "0", removes the character counter from the textarea
+     */
+    maxLength?: number;
+    /** Text placeholder for the text input */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    error?: MrlFormInputError;
+    'data-qa': string;
+    isEditable?: boolean;
+    setIsEditable?: (isEditableUpdate: boolean) => void;
+    /**
+     * Show icon on hover, if true the icon will be hidden and show on hover and focus
+     * @default false
+     */
+    showIconOnHover?: boolean;
+}
+export declare const MrlEditableTextInput: React.ForwardRefExoticComponent<MrlEditableTextInputProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/components/form/text-input/MrlEditableTextInput/MrlEditableTextInputRightIcon.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { DSIconType } from '../../../svg/MrlSvg/MrlSvg';
+export interface MrlEditableInputRightButtonProps {
+    /** the action that should be executed when interacting with the icon */
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** the icon that will be rendered */
+    icon: DSIconType;
+    /** data-qa attribute for the icon */
+    dataQa?: string;
+    /** describes the purpouse of the icon button */
+    label: string;
+    /** determines if the icon has active color or not */
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+    /** the text input value used to calculate the active style */
+    value?: string;
+    ref?: HTMLButtonElement;
+}
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlEditableInputRightButtonProps} props - the component props
+ * @returns a button element with an icon
+ */
+export declare const MrlEditableTextInputRightButton: React.ForwardRefExoticComponent<Omit<MrlEditableInputRightButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/form/text-input/MrlEditableTextInput/index.d.ts

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

package/dist/types/components/form/text-input/MrlTextInput/MrlTextInput.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { DSIconType } from '../../../';
+import { AttrsObject, MrlComponentProps } from '../../../../utils';
+import { RightActionConfig, InputStates } from '../../constants';
+/**
+ * @todo - we need to add static icon support for right
+ */
+interface MrlTextInputProps extends Omit<MrlComponentProps, 'style'>, React.ComponentProps<'input'> {
+    /** Applies additional HTML attributes to the text input element */
+    attrs?: AttrsObject;
+    /** Additional function to be run when the input's value is cleared */
+    hookClear?: () => void;
+    /** Id of the text input */
+    inputId: string;
+    /** The value of the text input used to make it a controlled input */
+    value?: string;
+    /**
+     * The maximum number of characters that the user can enter.
+     *
+     * If undefined or set to "0", removes the character counter from the input
+     */
+    maxLength?: number;
+    /** Text placeholder for the text input */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    /** Configures a static icon to persistently display on the left side of the input */
+    persistIcon?: DSIconType;
+    /** Configures an icon to the right side of the input */
+    dynamicIcon?: RightActionConfig;
+    /** Preset for setting up a clearable input via a right icon */
+    isClearable?: boolean;
+}
+/**
+ * Allows the user to input plain text
+ * @param {MrlTextInputProps} props - the component props
+ * @param {HTMLInputElement} ref - a ref to the input element in the DOM
+ * @returns a text input element
+ */
+export declare const MrlTextInput: React.ForwardRefExoticComponent<Omit<MrlTextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/types/components/form/text-input/MrlTextInput/MrlTextInputRightIcon.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DSIconType } from '../../../';
+export interface MrlTextInputRightIconProps {
+    /** the action that should be executed when interacting with the icon */
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** the icon that will be rendered */
+    icon: DSIconType;
+    /** data-qa attribute for the icon */
+    dataQa?: string;
+    /** describes the purpouse of the icon button */
+    label: string;
+    /** determines if the icon has active color or not */
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+    /** the text input value used to calculate the active style */
+    value?: string;
+}
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlTextInputRightIconProps} props - the component props
+ * @returns a button element with an icon
+ */
+export declare function MrlTextInputRightIcon({ action, dataQa, hasActiveColor, icon, label, setHasActiveColor, value }: MrlTextInputRightIconProps): JSX.Element;

package/dist/types/components/form/text-input/MrlTextInput/index.d.ts

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

package/dist/types/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import './MrlEditableTextarea.global.scss';
+import { InputStates, MrlFormInputError } from '../../constants';
+interface MrlEditableTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** The value of the textarea used to make it a controlled input */
+    value: string;
+    /**
+     * 	Value of the label text assigned to the input.
+     *  This is used to describe to the user what field they will be editing when interacting with the edit buton.
+     */
+    inputLabelText: string;
+    /**
+     * The maximum number of characters that the user can enter.
+     * If undefined or set to "0", removes the character counter from the textarea
+     */
+    maxLength?: number;
+    /**
+     * Id of the text input.
+     */
+    inputId: string;
+    /**
+     * Text placeholder for the text input.
+     */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    /** Additional class to add to the textarea */
+    className?: string;
+    'data-qa': string;
+    error?: MrlFormInputError;
+    isEditable?: boolean;
+    setIsEditable?: (isEditableUpdate: boolean) => void;
+    /** Autoexpand will automatically adjust the height of the textarea based on the amount of text within it */
+    autoExpand?: boolean;
+}
+/**
+ * Allows the user to input plain text in a multi-line format
+ * @param {MrlEditableTextareaProps} props - the component props
+ * @returns a textarea element
+ */
+export declare const MrlEditableTextarea: React.ForwardRefExoticComponent<MrlEditableTextareaProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { DSIconType } from '../../../svg/MrlSvg/MrlSvg';
+export interface MrlEditableTextareaRightButtonProps {
+    /** the action that should be executed when interacting with the icon */
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** the icon that will be rendered */
+    icon: DSIconType;
+    /** data-qa attribute for the icon */
+    dataQa?: string;
+    /** describes the purpouse of the icon button */
+    label: string;
+    /** determines if the icon has active color or not */
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+    /** the text input value used to calculate the active style */
+    value?: string;
+    ref?: HTMLButtonElement;
+}
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlEditableTextareaRightButtonProps} props - the component props
+ * @returns a button element with an icon
+ */
+export declare const MrlEditableTextareaRightButton: React.ForwardRefExoticComponent<Omit<MrlEditableTextareaRightButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/form/textarea/MrlEditableTextarea/index.d.ts

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

package/dist/types/components/form/textarea/MrlTextarea/MrlTextarea.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../../utils';
+import './MrlTextarea.global.scss';
+type MrlTextareaState = 'default' | 'disabled' | 'error' | 'read-only';
+interface MrlTextareaProps {
+    /** Applies additional HTML attributes to the textarea element */
+    attrs?: AttrsObject;
+    /** The value of the textarea used to make it a controlled input */
+    value?: string;
+    /**
+     * The maximum number of characters that the user can enter.
+     * If undefined or set to "0", removes the character counter from the textarea
+     */
+    maxLength?: number;
+    /**
+     * Id of the text input.
+     */
+    inputId: string;
+    /**
+     * Text placeholder for the text input.
+     */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: MrlTextareaState;
+    /** Additional class to add to the textarea */
+    className?: string;
+    /** Autoexpand will automatically adjust the height of the textarea based on the amount of text within it */
+    autoExpand?: boolean;
+}
+/**
+ * Allows the user to input plain text in a multi-line format
+ * @param {MrlTextareaProps} props - the component props
+ * @returns a textarea element
+ */
+export declare function MrlTextarea({ attrs, className, inputId, state, maxLength, placeholder, value, autoExpand, ...rest }: MrlTextareaProps): JSX.Element;
+export {};

package/dist/types/components/form/textarea/MrlTextarea/index.d.ts

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

package/dist/types/components/form/utils.d.ts

@@ -0,0 +1,94 @@
+import { type KeyboardEvent } from 'react';
+/**
+ * Defines all of the possible actions a user can take with their keyboard in a select.
+ * This is used to create a more human-friendly connection between the actions and
+ * keyboard short cuts since multiple keys may perform the same action.
+ * See getActionFromKey for more details.
+ *
+ * @todo - need to verify what the pageDown/Up keys do differently. They have a
+ * 		different action in the getUpdatedIndex function but need to understand
+ * 		a bit more.  This is not merge blocking for MVP
+ */
+export declare const actions: {
+    Close: number;
+    CloseSelect: number;
+    First: number;
+    Last: number;
+    Next: number;
+    Open: number;
+    PageDown: number;
+    PageUp: number;
+    Previous: number;
+    Type: number;
+};
+/**
+ * Map a key press to an action (see the )
+ *
+ * @param {KeyboardEvent} event - keyboard event
+ * @param {boolean} isMenuOpen - dropdown menu state
+ * @param {string | undefined} search - current searchstring to determine how to handle space presses
+ * @returns {number | undefined} - returns action number or quits from function execution
+ */
+export declare const getActionFromKey: (event: KeyboardEvent, isMenuOpen: boolean, search?: string | undefined) => number | undefined;
+/**
+ * Get an updated item index based on the action
+ *
+ * @param {number} currentIndex - index of the active menu item
+ * @param {number} maxIndex - last menu item's index
+ * @param {action} action - keyboard key action
+ * @returns {number} - returns updated index
+ */
+export declare const getUpdatedIndex: (currentIndex: number, maxIndex: number | undefined, action: number) => number;
+/**
+ * Checks if the select menu items has scrollable overflow
+ *
+ * @param {HTMLElement} menu - select menu component
+ * @returns {boolean} - true if the menu has overflow content
+ */
+export declare const isScrollable: (menu: HTMLElement) => boolean;
+/**
+ * Ensures a given child element is within the parents's visible scroll area.
+ * If the child is not visible, it scrolls the parent element.
+ *
+ * @param {HTMLElement} childEl - clicked/focused select item
+ * @param {HTMLElement} scrollParent - select menu component
+ * @todo - POST MVP - this could be a more reusable util function for other components
+ * @todo - POST MVP - the marginY should be more dynamic
+ */
+export declare const maintainScrollVisibility: (childEl: HTMLElement, scrollParent: HTMLElement) => void;
+/**
+ * Returns the index of an option from an array of options, based on a search string
+ * if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
+ *
+ * @param {Element[]} options - menu items list
+ * @param {string} filter - pressed letters combination
+ * @param {number} startIndex - start index
+ * @returns {number} - menu item's index
+ */
+export declare const getIndexByLetter: (options: Element[], filter: string, startIndex?: number) => number;
+type DebounceType = number | null | undefined;
+type CallbackType = (_debounce: number) => void;
+/**
+ * Waits a predetermined time before calling a function
+ *
+ * @param {Function} func - function to call after timeout
+ * @param {number} timeout - time to wait before calling function
+ * @param {number} debounce - existing debounce to clear
+ * @param {Function} callback - callback function to update debounce
+ * @returns {Function} - function to reset debounce and call callback
+ * @todo - 4969 investigate combining this debounce function with the modal debounce function
+ */
+export declare const debounce: (func: () => void, timeout: number | undefined, debounce: DebounceType, callback: CallbackType) => (() => void);
+type GetAriaDescribedByReturn = {
+    ['aria-describedby']?: string;
+} | {
+    ['aria-describedby']: string;
+};
+/**
+ * Generates the 'aria-describedby' attribute from multiple ids
+ *
+ * @param {Array<string | undefined>} args ids
+ * @returns {GetAriaDescribedByReturn} an object with aria-describedby
+ */
+export declare function getDescribedby(...args: Array<string | undefined>): GetAriaDescribedByReturn;
+export {};

package/dist/types/components/grid/MrlCol/MrlCol.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../../layout/constants';
+import { GridColumns } from '../constants';
+type MrlCol = LayoutComponent & GridColumns;
+/**
+ * MrlCol React component.
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+export declare function MrlCol(props: MrlCol): JSX.Element;
+export {};

package/dist/types/components/grid/MrlCol/index.d.ts

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

package/dist/types/components/grid/MrlGrid/MrlGrid.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../../layout/constants';
+import '../grid.variables.scss';
+import '../grid.global.scss';
+/**
+ * MrlCol React component.
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+export declare function MrlGrid({ children, className, ...rest }: LayoutComponent): JSX.Element;

package/dist/types/components/grid/MrlGrid/index.d.ts

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

package/dist/types/components/grid/MrlRow/MrlRow.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../../layout/constants';
+import { AlignOptions, GutterSizes, JustifyOptions } from '../constants';
+interface MrlRow extends LayoutComponent {
+    /**
+     * Flex alignment of the children within the component.
+     */
+    align?: AlignOptions;
+    /**
+     * Gutter size for columns within the row
+     */
+    gutter?: GutterSizes;
+    /**
+     * Justify content of the children within the component.
+     */
+    justify?: JustifyOptions;
+}
+/**
+ * MrlRow React component.
+ * @param props - component props
+ * @returns a MrlRow React component.
+ */
+export declare function MrlRow({ align, children, className, justify, ...rest }: MrlRow): JSX.Element;
+export {};

package/dist/types/components/grid/MrlRow/index.d.ts

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

package/dist/types/components/grid/constants.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Alignment & justification options for grid containers
+ */
+export type AlignOptions = 'start' | 'center' | 'end';
+export type JustifyOptions = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * Available grid sizes
+ */
+export declare const GridSizes: string[];
+/**
+ * Number of columns that will be span on the grid.
+ */
+export type NumCols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * The type of classes that can be configured based on the bootstrap API.
+ * Current supported:
+ * - columns "col-<size>-<number>"
+ * - offsets "offset-<size>-<number>""
+ */
+type GridClass = 'col' | 'offset';
+/**
+ * Interface of available class selectors based on GridClass
+ *
+ * Example interface:
+ * {
+ *    col?: number,
+ *    offset?: number
+ * }
+ */
+type GridClassConfig = {
+    [key in GridClass]?: NumCols;
+};
+/**
+ * Options to configure the number of columns to span on different screen sizes.
+ */
+type ColumnConfig = NumCols | 'auto' | GridClassConfig | undefined;
+export interface GridColumns {
+    col?: ColumnConfig;
+    xs?: ColumnConfig;
+    sm?: ColumnConfig;
+    md?: ColumnConfig;
+    lg?: ColumnConfig;
+    xl?: ColumnConfig;
+    xxl?: ColumnConfig;
+}
+/**
+ * Available gutter sizes for customizing the grid
+ */
+export type GutterSizes = 0 | 1 | 2;
+export {};

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

@@ -0,0 +1,3 @@
+export * from './MrlGrid';
+export * from './MrlRow';
+export * from './MrlCol';

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

@@ -0,0 +1,34 @@
+export * from './avatar';
+export * from './badge';
+export * from './button';
+export * from './container';
+export * from './divider';
+export * from './error-boundary';
+export * from './focus-trap';
+export * from './form';
+export * from './grid';
+export * from './keystroke';
+export * from './layout';
+export * from './link';
+export * from './loader';
+export * from './menu';
+export * from './modal';
+export * from './notification';
+export * from './pagination';
+export * from './popover';
+export * from './svg';
+export * from './table';
+export * from './tabs';
+export * from './text';
+export * from './tooltip';
+export * from './portal';
+export * from './navigation-sidebar';
+export * from './skeleton';
+export * from './empty';
+export * from './live-region';
+export * from './callout';
+export * from './panel';
+export * from './rovingTabindex';
+export * from './toolbar';
+export * from './filter';
+export * from './breadcrumb';