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

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

@@ -0,0 +1,12 @@
+export declare const allowedValues: {
+    kinds: readonly ["default", "helper", "nested", "nested-options"];
+};
+export type Kind = (typeof allowedValues.kinds)[number];
+export interface ContainerDefaults {
+    kind: Kind;
+}
+/**
+ * Default values for props on the MrlContainer component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: ContainerDefaults;

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

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

package/dist/components/divider/MrlDivider/MrlDivider.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../utils';
+import { Kind, Orientation, Spacing } from '../constants';
+interface MrlDividerProps {
+    /**
+     * Applies additional HTML attributes to the divider element.
+     */
+    attrs?: AttrsObject;
+    className?: string;
+    /**
+     * Defines which color scheme to used based on the background color of the container.
+     * White/light backgrounds should use "default" and dark/saturated color backgrounds
+     * should use "inverse".
+     */
+    kind?: Kind;
+    /**
+     * Use to set a width/height of a divider to create an offset from surrounding content.
+     * This is commonly found in toolbars. Value can be any valid CSS `width/height` value, such as
+     * a CSS variable or rem value. Warning, vertical dividers may not work if set to a percentage,
+     * due to browser limitations with calculating dynamic heights. You should not set the parent to
+     * a static height to make this work as that poses accessibility issues.
+     */
+    length?: string;
+    /**
+     * Determines the orientation of the divider based on the sibling elements' orientation.
+     * Stacked elements should use "horizontal" and elements displayed in a row should use
+     * "vertical". Note for the "vertical" orientation, only usage between a row of Icon Buttons
+     * is currently supported.
+     */
+    orientation?: Orientation;
+    /**
+     * Determines how much space to provide between the elements that the divider is separating.
+     * This option only applies to horizontal orientation.
+     */
+    spacing?: Spacing;
+}
+/**
+ * Used to visually and semantically separate two elements.
+ * For visual separation only view this package's mixins
+ *
+ * @param props - component props
+ * @returns a MrlDivider React component.
+ */
+export declare function MrlDivider({ attrs, className, kind, length, orientation, spacing, ...remainingProps }: MrlDividerProps): JSX.Element;
+export {};

package/dist/components/divider/MrlDivider/index.d.ts

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

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

@@ -0,0 +1,18 @@
+export declare const allowedValues: {
+    kinds: readonly ["default", "inverse"];
+    orientations: readonly ["horizontal", "vertical"];
+    spacings: readonly ["small", "medium", "large", "xlarge"];
+};
+export type Kind = (typeof allowedValues.kinds)[number];
+export type Orientation = (typeof allowedValues.orientations)[number];
+export type Spacing = (typeof allowedValues.spacings)[number];
+export interface DividerDefaults {
+    kind: Kind;
+    orientation: Orientation;
+    spacing: Spacing;
+}
+/**
+ * Default values for props on the Divider component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: DividerDefaults;

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

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

package/dist/components/empty/default/MrlEmpty.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface MrlEmptyProps {
+    graphic?: JSX.Element;
+    heading: string;
+    description: string;
+    action?: JSX.Element;
+}
+/**
+ * MrlEmpty for when there is no data to display for a single component.
+ *
+ * @param MrlEmptyProps props
+ * @returns MrlEmpty component
+ */
+export declare const MrlEmpty: ({ graphic, description, action, heading }: MrlEmptyProps) => JSX.Element;
+export {};

package/dist/components/empty/default/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './default';
+export * from './large';

package/dist/components/empty/large/MrlEmptyLarge.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface MrlEmptyLargeProps {
+    graphic?: JSX.Element;
+    heading: string;
+    description: string;
+    action?: JSX.Element;
+}
+/**
+ * MrlEmptyLarge for when there is no data to display for an entire page.
+ *
+ * @param MrlEmptyProps props
+ * @returns MrlEmptyLarge
+ */
+export declare const MrlEmptyLarge: ({ graphic, heading, description, action }: MrlEmptyLargeProps) => JSX.Element;
+export {};

package/dist/components/empty/large/index.d.ts

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

package/dist/components/error-boundary/MrlErrorBoundary.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+interface ErrorProps {
+    children?: React.ReactNode;
+    /**
+     * Required to log the error to observability.
+     *
+     * @param error
+     * @param errorInfo
+     * @returns void
+     */
+    logError: (error: Error, errorInfo: React.ErrorInfo) => void;
+    /**
+     * Fallback component to render when there is an error.
+     */
+    fallback: React.ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+/**
+ * When an error occurs during rendering, this component catches the error.
+ * Renders a fallback component for a user friendly msg and calls the log error callback.
+ *
+ * Error boundaries DO NOT catch errors for:
+ * Event handlers
+ * Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
+ * Server side rendering
+ * Errors thrown in the error boundary itself (rather than its children)
+ *
+ * @param ErrorProps
+ * @returns ErrorBoundary component
+ */
+declare class ErrorBoundary extends React.Component<ErrorProps, State> {
+    /**
+     * Error boundry
+     *
+     * @param props fallback and logError
+     */
+    constructor(props: ErrorProps);
+    /**
+     * Update state so the next render will show the fallback UI.
+     *
+     * @param _error Error
+     * @returns State
+     */
+    static getDerivedStateFromError: (_error: Error) => State;
+    /**
+     * componentDidCatch react lifecycle method
+     *
+     * @param error error object
+     * @param errorInfo react.error info
+     */
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    /**
+     * Renders react node wrapped in error handler.
+     *
+     * @returns React.ReactNode
+     */
+    render(): React.ReactNode;
+}
+export declare const MrlErrorBoundary: typeof ErrorBoundary;
+export {};

package/dist/components/error-boundary/index.d.ts

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

package/dist/components/filter/MrlFilter/MrlFilter.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { RovingPropTypes } from '../../rovingTabindex';
+import { DataQa } from '../../../utils/dataQa';
+export type MrlFilterProps = {
+    /**
+     * The label for the radio group.
+     */
+    radioGroupLabel: string;
+    /**
+     * The children elements to be rendered within the MrlFilter component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback function that is called when the filter value changes.
+     */
+    onFilterChange?: (checked: string) => void;
+    /**
+     * The default checked value for the filter. It will match the value of the MrlFilterItem.
+     */
+    defaultCheckedValue?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultChecked' | 'defaultValue'> & Required<Pick<RovingPropTypes, 'orientation'>> & DataQa;
+/**
+ * MrlFilter component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilter component.
+ */
+export declare function MrlFilter(props: MrlFilterProps): React.ReactElement;

package/dist/components/filter/MrlFilter/index.d.ts

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

package/dist/components/filter/MrlFilterContext/MrlFilterContext.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { MrlFilterProps } from '../MrlFilter/MrlFilter';
+type MrlFilterState = {
+    checked: string;
+};
+type MrlFilterContextValue = {
+    state: MrlFilterState;
+    dispatch: React.Dispatch<MrlFilterAction>;
+};
+type SET_CHECKED = {
+    type: 'SET_CHECKED';
+    payload: string;
+};
+type MrlFilterAction = SET_CHECKED;
+type MrlFilterContextProviderProps = {
+    children: React.ReactNode;
+} & Pick<MrlFilterProps, 'defaultCheckedValue' | 'onFilterChange'>;
+/**
+ * MrlFilterContextProvider component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilterContextProvider component.
+ */
+export declare function MrlFilterContextProvider(props: MrlFilterContextProviderProps): JSX.Element;
+/**
+ * Custom hook to use the MrlFilterContext.
+ *
+ * This hook provides access to the MrlFilterContext value.
+ *
+ * @returns The MrlFilterContext value.
+ * @throws Will throw an error if used outside of a MrlFilterContextProvider.
+ */
+export declare const useMrlFilterContext: () => MrlFilterContextValue;
+export {};

package/dist/components/filter/MrlFilterContext/index.d.ts

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

package/dist/components/filter/MrlFilterItem/MrlFilterItem.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DataQa } from '../../../utils/dataQa';
+export type MrlFilterItemProps = {
+    /**
+     * The filter item's value.
+     */
+    value: string;
+    /**
+     * The content to be displayed within the filter item.
+     */
+    children?: React.ReactNode;
+    /**
+     * The count of items for this filter option.
+     */
+    count?: number;
+} & React.ComponentPropsWithoutRef<'span'> & DataQa;
+/**
+ * MrlFilterItem component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilterItem component.
+ */
+export declare function MrlFilterItem(props: MrlFilterItemProps): React.ReactElement;

package/dist/components/filter/MrlFilterItem/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './MrlFilterContext';
+export * from './MrlFilterItem';
+export * from './MrlFilter';

package/dist/components/focus-trap/MrlFocusTrap/MrlFocusTrap.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+interface PropTypes {
+    /**
+     * Elements to be rendered within the focus trap
+     */
+    children: React.ReactNode | ((focusTrapRef: React.RefObject<HTMLDivElement>) => JSX.Element);
+    /**
+     * Specifies whether the focus trap should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Disable autofocus
+     */
+    disableAutofocus?: boolean;
+    /**
+     * Focus trap container reference. Can be used to specify a custom container if a ref is already available
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+}
+/**
+ * Focus Trap React Component
+ *
+ * @param {object} props - The component props.
+ * @param {React.ReactElement} props.children - A function that returns the component's child element and receives a ref to the container.
+ * @param {boolean} [props.disabled] - Specifies whether the focus trap should be disabled.
+ * @param { React.RefObject<HTMLElement>} props.containerRef - Focus trap container reference
+ * @returns {React.ReactElement} - The rendered FocusTrap component.
+ */
+export declare const MrlFocusTrap: ({ children, disabled, disableAutofocus, containerRef }: PropTypes) => JSX.Element;
+export {};

package/dist/components/focus-trap/MrlFocusTrap/index.d.ts

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

package/dist/components/focus-trap/index.d.ts

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

package/dist/components/form/checkbox/MrlCheckbox/MrlCheckbox.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+import { CheckboxSelected, CheckboxStates, StaticIconConfig } from '../../constants';
+import './MrlCheckbox.global.scss';
+interface MrlCheckboxProps {
+    /** Applies additional HTML attributes to the checkbox element */
+    attrs?: AttrsObject;
+    /** Additional class to add to the container of the checkbox and label */
+    className?: string;
+    /** Adjusts the styles of the label, icon and description when the label is multiline */
+    hasMultilineLabel?: boolean;
+    /** The current state of the checkbox input based on user interactions or permissions */
+    state?: CheckboxStates;
+    /** Sets what selection state the checkbox is in. */
+    selected?: CheckboxSelected;
+    /** The text to display as the checkbox's label */
+    label: string;
+    /** Leading label icon */
+    icon?: StaticIconConfig;
+    /**
+     * Description, additional context text for the user.
+     * It can be a string or a React component for custom render.
+     * When using a React component it's necessary to add an id to the custom element and
+     * pass it to the MrlCheckbox through 'attrs["aria-describedby"]' to make it accessible
+     * to screen readers.
+     * Custom description should also implement the disabled state styles
+     * for text when the input is disabled or set color: inherit.
+     *
+     * @example
+     * <MrlCheckbox attrs={{ 'aria-describedby': customId }} description={
+     *   <p id={customId}>description</p>
+     * }>
+     */
+    description?: string | React.ReactNode;
+}
+/**
+ * Form element with an associated text label that allows the user to select one or more options
+ * from a provided list
+ *
+ * @param {MrlCheckboxProps} props - the component props
+ * @returns a checkbox element with an associated label
+ */
+export declare function MrlCheckbox({ attrs, className, description, hasMultilineLabel, state, selected, icon, label }: MrlCheckboxProps): JSX.Element;
+export {};

package/dist/components/form/checkbox/MrlCheckbox/index.d.ts

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

package/dist/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../../utils';
+import { CheckboxSelected, CheckboxStates } from '../../constants';
+import './MrlCheckboxStandalone.global.scss';
+interface MrlCheckboxStandaloneProps {
+    /** Applies additional HTML attributes to the checkbox element */
+    attrs?: AttrsObject;
+    /** The current state of the checkbox input based on user interactions or permissions */
+    state?: CheckboxStates;
+    /** Sets what selection state the checkbox is in. */
+    selected?: CheckboxSelected;
+}
+/**
+ * Input that allows the user to select one or more options from a provided list.
+ * Note, this component does not provide out of the box accessibility for ensuring
+ * an associated label and must be manually setup during adoption.
+ *
+ * @param {MrlCheckboxStandaloneProps} props - the component props
+ * @returns a checkbox element
+ */
+export declare function MrlCheckboxStandalone({ attrs, state, selected }: MrlCheckboxStandaloneProps): JSX.Element;
+export {};

package/dist/components/form/checkbox/MrlCheckboxStandalone/index.d.ts

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

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

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { DSIconType } from '../svg';
+/**
+ * This should be used to communciate error information for a specific input
+ */
+export interface MrlFormInputError {
+    message: string;
+}
+export type InputStates = 'disabled' | 'error' | 'read-only';
+export type InputKinds = 'default' | 'inline' | 'inline-label';
+export type InputSizes = 'default' | 'large';
+export declare const allowedCheckboxValues: {
+    selected: readonly ["default", "checked", "indeterminate"];
+    states: readonly ["default", "disabled", "error", "read-only"];
+};
+export type CheckboxStates = (typeof allowedCheckboxValues.states)[number];
+export type CheckboxSelected = (typeof allowedCheckboxValues.selected)[number];
+interface CheckboxDefaults {
+    selected: CheckboxSelected;
+    state: CheckboxStates;
+}
+export declare const checkboxDefaults: CheckboxDefaults;
+export declare const allowedSelectItemValues: {
+    states: readonly ["default", "disabled", "selected"];
+};
+export type SelectItemStates = (typeof allowedSelectItemValues.states)[number];
+interface SelectItemDefaults {
+    state: SelectItemStates;
+}
+export declare const selectItemDefaults: SelectItemDefaults;
+export declare const allowedSelectMenuValues: {
+    positions: readonly ["bottom", "top"];
+};
+export type SelectMenuPositions = (typeof allowedSelectMenuValues.positions)[number];
+interface SelectMenuDefaults {
+    position: SelectMenuPositions;
+}
+export declare const selectMenuDefaults: SelectMenuDefaults;
+export declare const allowedSelectValues: {
+    states: readonly ["default", "disabled", "open", "read-only"];
+};
+export type SelectStates = (typeof allowedSelectValues.states)[number];
+interface SelectDefaults {
+    size: InputSizes;
+    kind: InputKinds;
+    state: SelectStates;
+}
+export declare const selectDefaults: SelectDefaults;
+export interface StaticIconConfig {
+    icon: DSIconType;
+    theme?: string;
+}
+export interface RightActionConfig extends StaticIconConfig {
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    label: string;
+}
+export declare const allowedLabelValues: {
+    kinds: readonly ["block", "inline"];
+    states: readonly ["default", "disabled"];
+};
+export type LabelStates = (typeof allowedLabelValues.states)[number];
+export type LabelKind = (typeof allowedLabelValues.kinds)[number];
+interface LabelDefaults {
+    kind: LabelKind;
+    state: LabelStates;
+}
+export declare const labelDefaults: LabelDefaults;
+export interface FormControlDefaults {
+    disabled: boolean;
+    label: string;
+}
+export interface FieldsetDefault {
+    label: string;
+}
+/**
+ * Default values for props on the Fieldset component;
+ * Shared between the component and Storybook
+ */
+export declare const fieldsetDefault: FieldsetDefault;
+/**
+ * Default values for props on the Fieldset component which is used to group Textarea components;
+ * Shared between the component and Storybook
+ */
+export declare const textareaDefaults: FormControlDefaults;
+export {};

package/dist/components/form/date-picker/MrlDatePicker.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { InputStates } from '../constants';
+import { DataQa } from '../../../utils/dataQa';
+export interface MrlDatePickerProps extends React.ComponentPropsWithRef<'input'>, DataQa {
+    /** Id of the text input */
+    inputId: string;
+    kind?: 'default' | 'borderless';
+    /** The value of the text input used to make it a controlled input */
+    value?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    autofocus?: boolean;
+    /**
+     * Event handler for onChange Events
+     * The value is normalized to yyyy-mm-dd
+     *
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+     */
+    onChange?: React.ComponentPropsWithRef<'input'>['onChange'];
+}
+/**
+ * Allows the user to input a date
+ *
+ * @param {MrlDatePickerProps} props - the component props
+ * @param {HTMLInputElement} ref - a ref to the input element in the DOM
+ * @returns a date input element
+ */
+export declare const MrlDatePicker: React.ForwardRefExoticComponent<Omit<MrlDatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/date-picker/index.d.ts

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

package/dist/components/form/fieldset/MrlFieldset/MrlFieldset.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+interface MrlFieldsetProps {
+    /** Applies additional HTML attributes to the fieldset element */
+    attrs?: AttrsObject;
+    /** Text for the fieldset's legend */
+    label: string;
+    /** related form elements that will be grouped by the fieldset  */
+    children: React.ReactNode;
+    /** Additional class to add to the fieldset */
+    className?: string;
+}
+/**
+ * Groups related form elements
+ *
+ * @param {MrlFieldsetProps} props - the component props
+ * @returns a fieldset element
+ */
+export declare function MrlFieldset({ attrs, children, className, label }: MrlFieldsetProps): JSX.Element;
+export {};

package/dist/components/form/fieldset/MrlFieldset/index.d.ts

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

package/dist/components/form/hooks/useActiveColor.d.ts

@@ -0,0 +1,13 @@
+import { InputStates } from '../constants';
+type useActiveColorReturn = {
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+};
+/**
+ * Custom hook used to track the active color state of inputs
+ *
+ * @param {InputStates | undefined} state - the input state
+ * @returns the hasActiveColor state and handler
+ */
+export declare function useActiveColor(state?: InputStates): useActiveColorReturn;
+export {};

package/dist/components/form/hooks/useIsEditable.d.ts

@@ -0,0 +1,28 @@
+import { InputStates } from '../constants';
+type UseIsEditableReturn = {
+    isEditable: boolean;
+    isEditing: boolean;
+    setIsEditable: (isEditable: boolean) => void;
+    setIsEditing: (isEditingUpdate: boolean) => void;
+};
+/**
+ * Custom hook used to track the edit state of a text input.
+ *
+ * isEditing represents if someone has actively decided to start editing a field.
+ * isEditable controls if the input field can be interacted with directly.
+ *
+ * This leaves open the possibility for a field to be editable even if someone has not explicitly decided to edit it.
+ * @param param - useIsEditable options
+ * @param param.changeHandler - optional set handler
+ * @param param.initialValue - the text input initial value
+ * @param param.state - the text input state
+ * @param param.value - optional control value
+ * @returns the isEditable, isEditing state and handler
+ */
+export declare function useIsEditable({ changeHandler, initialValue, state, value }: {
+    changeHandler?: (isEditableUpdate: boolean) => void;
+    initialValue: boolean;
+    state?: InputStates;
+    value?: boolean;
+}): UseIsEditableReturn;
+export {};

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

@@ -0,0 +1,19 @@
+export * from './legacy-select';
+export * from './legacy-select/MrlLegacySelectItem';
+export * from './legacy-select/MrlLegacySelectMenu';
+export * from './text-input/MrlTextInput';
+export * from './text-input/MrlEditableTextInput';
+export * from './label/MrlLabel';
+export * from './label/MrlLabelWithDescription';
+export * from './textarea/MrlTextarea';
+export * from './textarea/MrlEditableTextarea';
+export * from './fieldset/MrlFieldset';
+export * from './checkbox/MrlCheckbox';
+export * from './checkbox/MrlCheckboxStandalone';
+export * from './constants';
+export * from './radio/MrlRadioGroup';
+export * from './radio/MrlRadioButton';
+export * from './radio/MrlRadioButtonStandalone';
+export * from './switch';
+export * from './date-picker';
+export * from './select';

package/dist/components/form/label/MrlLabel/MrlLabel.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+import { LabelKind, LabelStates, StaticIconConfig } from '../../constants';
+interface MrlLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+    /** Applies additional HTML attributes to the label element */
+    attrs?: AttrsObject;
+    /** Informs the user of the form element's purpose */
+    text: string;
+    /** ID of the form elements so all users can understand the relationship between the two elements */
+    htmlFor?: string;
+    /** Label style based on the type of associated form element */
+    kind?: LabelKind;
+    /**
+     * Configures a leading icon within the label. This is only supported with an inline label
+     */
+    icon?: StaticIconConfig;
+    /**
+     * Changes the state of the label based on state of the associated input. Note, do not
+     * use this prop only for styling, it must match the state of the input for accessibility compliance.
+     */
+    state?: LabelStates;
+    /** Additional class to add to the label */
+    className?: string;
+}
+/**
+ * Provides a label for a form element
+ *
+ * @param {MrlLabelProps} props - the component props
+ * @returns a label element
+ */
+export declare function MrlLabel({ attrs, className, text, htmlFor, kind, icon, state, ...rest }: MrlLabelProps): JSX.Element;
+export {};

package/dist/components/form/label/MrlLabel/index.d.ts

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