@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/cjs/components/rovingTabindex/MrlRovingTabindex/MrlRovingTabindex.js

@@ -0,0 +1,485 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlRovingTabindex = exports.getTabbableElements = void 0;
+const React = __importStar(require("react"));
+/**
+ * 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
+ */
+const getTabbableElements = (ref, selector) => {
+    const elements = ref === null || ref === void 0 ? void 0 : ref.querySelectorAll(selector);
+    if (!elements)
+        return [];
+    return Array.prototype.slice.call(elements);
+};
+exports.getTabbableElements = getTabbableElements;
+const arraysEqual = (a, b) => a.length === b.length && a.every((el, i) => el === b[i]);
+/**
+ * Default value for allowDisabled prop.
+ * When true, disabled elements are included in the roving tabindex navigation.
+ */
+const DEFAULT_ALLOW_DISABLED = true;
+/**
+ * CSS selector to exclude disabled elements.
+ * Excludes both native disabled attribute and ARIA-compliant disabled elements.
+ */
+const DISABLED_EXCLUSION = ':not([disabled]):not([aria-disabled="true"])';
+/**
+ * CSS selector suffix to exclude nested roving tabindex elements.
+ * Prevents deeply nested elements from being included in parent roving tabindex.
+ */
+const NESTED_ROVING_EXCLUSION = ':not(.helpers-roving-tabindex-container .helpers-roving-tabindex-container [data-roving])';
+/**
+ * Builds the appropriate CSS selector based on configuration.
+ * @param allowDisabled - Whether to include disabled elements in the roving tabindex
+ * @param hasChildRoving - Whether nested roving tabindex containers should be excluded
+ * @returns CSS selector string for querying roving elements
+ */
+const buildSelector = (allowDisabled, hasChildRoving) => {
+    const disabledPart = allowDisabled ? '' : DISABLED_EXCLUSION;
+    const nestedPart = hasChildRoving ? NESTED_ROVING_EXCLUSION : '';
+    return `[data-roving]${disabledPart}${nestedPart}`;
+};
+/**
+ * Component to create a Roving Tabindex in the DOM
+ * @returns {HTMLDivElement}
+ */
+class MrlRovingTabindex extends React.Component {
+    /**
+     * MrlRovingTabindex class constructor
+     * @param props - the MrlRovingTabindex props
+     * @returns new instance
+     */
+    constructor(props) {
+        super(props);
+        this.handleRef = (ref) => {
+            this.ref = ref;
+            // Set up focus listener when ref becomes available
+            if (ref) {
+                ref.addEventListener('focusout', this.handleFocusOut);
+            }
+            return ref;
+        };
+        /**
+         * Handles focus out events to detect when focus leaves the roving tabindex container
+         * @param {FocusEvent} event - the focus out event
+         * @returns {void}
+         */
+        this.handleFocusOut = (event) => {
+            var _a;
+            const { onBlur } = this.props;
+            const relatedTarget = event.relatedTarget;
+            // Check if focus is moving to an element outside the container
+            if (relatedTarget && !((_a = this.ref) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget))) {
+                // Focus has moved from inside the container to outside
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+            }
+        };
+        /**
+         * Sets component array of elements
+         * @returns {void}
+         */
+        this.setElements = () => {
+            if (!this.ref)
+                return;
+            this.elements = (0, exports.getTabbableElements)(this.ref, this.selector);
+        };
+        /**
+         * Queries for a single element matching the selector within the container.
+         * @param selector - CSS selector to query
+         * @returns The matching element or null
+         */
+        this.queryElement = (selector) => {
+            var _a;
+            return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+        };
+        /**
+         * 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
+         */
+        this.getActiveElement = () => {
+            var _a;
+            const { activeSelector, allowDisabled = DEFAULT_ALLOW_DISABLED } = this.props;
+            const disabledFilter = allowDisabled ? '' : DISABLED_EXCLUSION;
+            // Priority 1: Custom active selector (e.g., for radio button groups)
+            // An element with the matching activeSelector prop (example usage: custom radio elements)
+            if (activeSelector) {
+                const customActiveElement = this.queryElement(`${activeSelector}[data-roving]${disabledFilter}`);
+                if (customActiveElement)
+                    return customActiveElement;
+            }
+            // Priority 2: Programmatically marked active element
+            // An element with a `data-roving-active` attribute, indicating the current active element
+            const markedActiveElement = this.queryElement(`[data-roving][data-roving-active]${disabledFilter}`);
+            if (markedActiveElement)
+                return markedActiveElement;
+            // Priority 3: First roving element (uses pre-built selector with disabled handling)
+            // If no active element is found, the first instance of an element with `data-roving="true"`
+            const firstRovingElement = (_a = this.ref) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.selector)[0];
+            return firstRovingElement;
+        };
+        /**
+         * 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}
+         */
+        this.setActiveElement = (el) => {
+            if (!el)
+                return;
+            this.unsetTabbableElements();
+            el.setAttribute('tabindex', '0');
+        };
+        /**
+         * Sets focus to a specific element
+         * @param {HTMLElement | undefined} el - the element to set in focus
+         * @returns {void}
+         */
+        this.setElementFocus = (el) => {
+            if (!el)
+                return;
+            /**
+             * Why data-roving-active?
+             *
+             * We only want to set data-roving-active when 'setElementFocus' is triggered because we don't want [tabindex=0] to be mutally exclusive with
+             * [data-roving-active]. An item with [data-roving-active] can exist without having [tabindex=0] and vice versa. We only want to set [data-roving-active]
+             * intentionally when a user action has occured to change it. Such as a keyboard event or moving focus manually with Javascript.
+             */
+            const current = this.getActiveElement();
+            if (current)
+                current.removeAttribute('data-roving-active');
+            el.setAttribute('data-roving-active', 'true');
+            this.setActiveElement(el);
+            el.focus();
+        };
+        /**
+         * 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}
+         */
+        this.setFocusByDirection = (direction) => {
+            const itemsLen = this.elements.length;
+            if (itemsLen > 0) {
+                const currentIndex = this.elements.indexOf(document.activeElement);
+                const directionSum = direction === 'back' ? -1 : 1;
+                let nextIndex = currentIndex + directionSum;
+                if (direction === 'back') {
+                    nextIndex = nextIndex < 0 ? itemsLen - 1 : nextIndex;
+                }
+                if (direction === 'forward') {
+                    nextIndex = nextIndex >= itemsLen ? 0 : nextIndex;
+                }
+                this.setElementFocus(this.elements[nextIndex]);
+            }
+        };
+        /**
+         * Sets all tabindex for elements of this component to -1
+         * Also ensures disabled elements (excluded from roving tabindex) have tabindex=-1
+         * @returns {void}
+         */
+        this.unsetTabbableElements = () => {
+            if (!this.elements)
+                return;
+            // Set tabindex=-1 for all roving tabindex elements
+            this.elements.forEach((el) => {
+                el && el.setAttribute('tabindex', '-1');
+            });
+            // Also set tabindex=-1 for disabled elements that are excluded from roving tabindex
+            // This ensures disabled elements are not tabbable even though they're not in the navigation order
+            if (!this.ref || this.props.allowDisabled)
+                return;
+            const disabledElements = this.ref.querySelectorAll(`[data-roving][disabled], [data-roving][aria-disabled="true"]`);
+            disabledElements.forEach((el) => {
+                el.setAttribute('tabindex', '-1');
+            });
+        };
+        /**
+         * 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
+         */
+        this.canUseArrows = (orientation) => {
+            const { activeElement } = document;
+            const role = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('role');
+            const hasMenuOrSelect = (activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-haspopup')) === 'true' ||
+                role === 'combobox' ||
+                role === 'option' ||
+                role === 'listbox';
+            return !(this.orientation === orientation && hasMenuOrSelect);
+        };
+        this.handleKeyUp = (e) => {
+            var _a;
+            const { ignoreElements } = this.props;
+            const allowKeyPress = !ignoreElements ? true : !((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(ignoreElements));
+            const modifierPressed = e.ctrlKey || e.metaKey || e.shiftKey;
+            if (modifierPressed)
+                return;
+            /**
+             * If elements within MrlRovingTabindex are added after the component mounts
+             * they will not automatically be a `part of this.elements`. This checks if
+             * `this.elements` contains all elements that MrlRovingTabindex should be aware
+             * of and will update `this.elements` if neccessary.
+             */
+            const knownTabbableElements = this.elements;
+            const allTabbableElements = (0, exports.getTabbableElements)(this.ref, this.selector);
+            if (knownTabbableElements.length !== allTabbableElements.length ||
+                !arraysEqual(knownTabbableElements, allTabbableElements)) {
+                this.setElements();
+                this.setActiveElement(this.getActiveElement());
+            }
+            const isActiveRoving = this.getActiveElement() === document.activeElement;
+            if (allowKeyPress && isActiveRoving) {
+                e.stopPropagation();
+                switch (e.key) {
+                    case 'ArrowDown':
+                        if (this.canUseArrows('horizontal'))
+                            this.setFocusByDirection('forward');
+                        break;
+                    case 'ArrowUp':
+                        if (this.canUseArrows('horizontal'))
+                            this.setFocusByDirection('back');
+                        break;
+                    case 'ArrowRight':
+                        if (this.canUseArrows('vertical'))
+                            this.setFocusByDirection('forward');
+                        break;
+                    case 'ArrowLeft':
+                        if (this.canUseArrows('vertical'))
+                            this.setFocusByDirection('back');
+                        break;
+                    case 'End':
+                        this.handleFocusedLast();
+                        break;
+                    case 'Home':
+                        this.handleFocusedFirst();
+                        break;
+                }
+            }
+        };
+        this.handleFocusedFirst = () => this.setElementFocus(this.elements[0]);
+        this.handleFocusedLast = () => this.setElementFocus(this.elements[this.elements.length - 1]);
+        this.handleRefocus = () => {
+            var _a, _b;
+            this.setActiveElement(document.activeElement);
+            (_b = (_a = this.props).onRefocus) === null || _b === void 0 ? void 0 : _b.call(_a, false);
+        };
+        const { allowDisabled = DEFAULT_ALLOW_DISABLED, hasChildRoving = false, orientation } = props;
+        this.elements = [];
+        this.orientation = orientation || 'horizontal';
+        this.selector = buildSelector(allowDisabled, hasChildRoving);
+    }
+    /**
+     * Runs when the MrlRovingTabindex component mounts
+     */
+    componentDidMount() {
+        const { delayMount } = this.props;
+        if (delayMount) {
+            setTimeout(() => this.mount(), delayMount);
+            return;
+        }
+        this.mount();
+    }
+    /**
+     * Runs when the MrlRovingTabindex component unmounts
+     */
+    componentWillUnmount() {
+        // Remove focus event listener
+        if (this.ref) {
+            this.ref.removeEventListener('focusout', this.handleFocusOut);
+        }
+    }
+    /**
+     * Runs when the MrlRovingTabindex component updates
+     * @param {RovingPropTypes} prevProps - the props before the component updated
+     */
+    componentDidUpdate(prevProps) {
+        var _a;
+        const { allowDisabled = DEFAULT_ALLOW_DISABLED, children, focusWithShortcut, hasChildRoving = false, isFocused, onBlur, onRefocus } = this.props;
+        /**
+         * If allowDisabled or hasChildRoving prop changes, rebuild the selector
+         * and re-scan for elements to reflect the new configuration.
+         */
+        if (prevProps.allowDisabled !== allowDisabled || prevProps.hasChildRoving !== hasChildRoving) {
+            this.selector = buildSelector(allowDisabled, hasChildRoving);
+            this.setElements();
+            this.setActiveElement(this.getActiveElement());
+        }
+        /**
+         * If focus is programatically moved to the MrlRovingTabindex
+         * component from outside of the MrlRovingTabindex, passing
+         * the prop of `onRefocus` will cause the component to go
+         * through and make sure that only the  active element
+         * has a tabindex set to 0.
+         */
+        if (onRefocus) {
+            this.handleRefocus();
+        }
+        /**
+         * When children change, re-scan for elements and update tabindex values.
+         * This ensures that dynamically added/removed buttons are properly managed.
+         */
+        if (prevProps.children !== children && !focusWithShortcut) {
+            this.setElements();
+            this.setActiveElement(this.getActiveElement());
+        }
+        if (focusWithShortcut) {
+            /**
+             * If the component within MrlRovingTabindex shows on the page before it should
+             * be reached with a keyboard the prop `focusWithiShortcut` can be used to
+             * achieve that. The conditions below handle the various states that a
+             * component can experience under this scenario.
+             */
+            if (!isFocused && !prevProps.isFocused) {
+                /**
+                 * The component was not focus before and is not ready to be focused on
+                 */
+                this.unsetTabbableElements();
+            }
+            if (prevProps.isFocused && !isFocused) {
+                /**
+                 * The component was focused but is not focused anymore
+                 */
+                this.unsetTabbableElements();
+                // Only call onBlur if focus has truly left the container
+                if (this.ref && !this.ref.contains(document.activeElement)) {
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                }
+            }
+            if (!prevProps.isFocused && isFocused) {
+                /**
+                 * The component was not focused before and is ready to be focused
+                 */
+                this.setElements();
+                this.setElementFocus(this.getActiveElement());
+            }
+            if (prevProps.children !== children && !isFocused && !prevProps.isFocused) {
+                /**
+                 * Children changed but component is not focused
+                 * Ensure all new elements have tabindex=-1 to prevent Tab key access
+                 */
+                this.setElements();
+                this.unsetTabbableElements();
+            }
+            if (prevProps.children !== children &&
+                prevProps.isFocused &&
+                isFocused &&
+                !((_a = this.ref) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
+                /**
+                 * While the component was focused an action was performed that
+                 * changed the elements of the component and focus was moved to
+                 * a different element on the page
+                 */
+                this.setElements();
+                this.setActiveElement(this.getActiveElement());
+                if (this.getActiveElement()) {
+                    /**
+                     * The active element is still within the roving tabindex so focus
+                     * on the element that should receive focus
+                     */
+                    this.setElementFocus(this.getActiveElement());
+                }
+                else {
+                    /**
+                     * The active element has been moved outside of the MrlRovingTabindex
+                     * component so reset the component
+                     */
+                    // Only call onBlur if focus has truly left the container
+                    if (this.ref && !this.ref.contains(document.activeElement)) {
+                        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Mounts the MrlRovingTabindex component
+     * @returns {void}
+     */
+    mount() {
+        const { focusOnInit, focusWithShortcut, isFocused } = this.props;
+        if (!focusWithShortcut) {
+            // get initial set of elements for the component
+            this.setElements();
+            // sets the first element of the component to tabindex=0 but does not move focus
+            // this allows users to tab to the component naturally based on tab order
+            this.setActiveElement(this.getActiveElement());
+        }
+        else {
+            // When focusWithShortcut is true, we need to set up elements
+            // but only set tabindex values based on isFocused state
+            this.setElements();
+            if (!isFocused) {
+                // If not focused initially, set all elements to tabindex=-1
+                this.unsetTabbableElements();
+            }
+            else {
+                // If focused initially, set the active element properly
+                this.setActiveElement(this.getActiveElement());
+            }
+        }
+        if (focusOnInit && this.elements.length > 0) {
+            if (focusOnInit === 'first') {
+                this.handleFocusedFirst();
+                return;
+            }
+            this.handleFocusedLast();
+        }
+    }
+    /**
+     * Renders the MrlRovingTabindex component
+     * @returns {HTMLDivElement} - the rendered MrlRovingTabindex component
+     */
+    render() {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        // Destructure component-specific props to prevent them from being spread to the DOM
+        const _a = this.props, { activeSelector, allowDisabled, children, delayMount, focusOnInit, focusWithShortcut, forceUpdate, hasChildRoving, ignoreElements, isFocused, onBlur, onRefocus, orientation, qa } = _a, rest = __rest(_a, ["activeSelector", "allowDisabled", "children", "delayMount", "focusOnInit", "focusWithShortcut", "forceUpdate", "hasChildRoving", "ignoreElements", "isFocused", "onBlur", "onRefocus", "orientation", "qa"]);
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+        const dataQa = `${qa || 'generic'}-roving`;
+        return (React.createElement("div", Object.assign({}, rest, { className: "helpers-roving-tabindex-container", "data-qa": dataQa, onKeyUp: this.handleKeyUp, ref: this.handleRef, role: "presentation", 
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex: -1 }), children));
+    }
+}
+exports.MrlRovingTabindex = MrlRovingTabindex;

package/dist/cjs/components/rovingTabindex/MrlRovingTabindex/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlRovingTabindex"), exports);

package/dist/cjs/components/rovingTabindex/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlRovingTabindex"), exports);

package/dist/cjs/components/skeleton/MrlSkeleton/MrlSkeleton.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlSkeleton = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const MrlSkeleton_module_scss_1 = __importDefault(require("./MrlSkeleton.module.scss.js"));
+/**
+ * MrlSkeleton React component.
+ *
+ * @param props {MrlSkeletonProps} - component props
+ * @returns a MrlSkeleton React component.
+ */
+function MrlSkeleton(_a) {
+    var { height = 'var(--mrl-spacing-05)', shape = 'default', style, width, className } = _a, rest = __rest(_a, ["height", "shape", "style", "width", "className"]);
+    const classes = (0, classnames_1.default)(MrlSkeleton_module_scss_1.default['MrlSkeleton'], {
+        [MrlSkeleton_module_scss_1.default[`MrlSkeleton-${shape}`]]: shape !== 'default'
+    }, className);
+    const skeletonStyle = Object.assign(Object.assign(Object.assign({}, style), { height,
+        width }), (shape === 'circle' && { width: height }));
+    return React.createElement("div", Object.assign({ "aria-hidden": "true", className: classes, style: skeletonStyle }, rest));
+}
+exports.MrlSkeleton = MrlSkeleton;

package/dist/cjs/components/skeleton/MrlSkeleton/MrlSkeleton.module.css

@@ -0,0 +1,41 @@
+@keyframes shimmer--MvtuC {
+  0% {
+    background-position: right;
+  }
+  100% {
+    background-position: left;
+  }
+}
+.MrlSkeleton--hJyx- {
+  background-color: var(--mrl-black-opacity-00);
+  border-radius: var(--mrl-border-radius-functional);
+  overflow: hidden;
+  position: relative;
+}
+.MrlSkeleton--hJyx-::after {
+  animation-direction: normal;
+  animation-duration: 2.5s;
+  animation-iteration-count: infinite;
+  animation-name: shimmer--MvtuC;
+  animation-timing-function: ease-in-out;
+  background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);
+  background-repeat: no-repeat;
+  background-size: 400% 200%;
+  content: "";
+  height: 100%;
+  left: 0;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  width: 200%;
+}
+@media (prefers-reduced-motion) {
+  .MrlSkeleton--hJyx-::after {
+    animation-name: none;
+    background: var(--mrl-black-opacity-00);
+  }
+}
+
+.MrlSkeleton-circle--bVpNl {
+  border-radius: 50%;
+}

package/dist/cjs/components/skeleton/MrlSkeleton/MrlSkeleton.module.scss.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlSkeleton.module.css");
+exports.default = {
+	"MrlSkeleton": "MrlSkeleton--hJyx-",
+	"shimmer": "shimmer--MvtuC",
+	"MrlSkeleton-circle": "MrlSkeleton-circle--bVpNl"
+};

package/dist/cjs/components/skeleton/MrlSkeleton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlSkeleton"), exports);