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

package/dist/cjs/components/form/textarea/MrlTextarea/MrlTextarea.module.css

@@ -0,0 +1,157 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--tQKn- {
+  position: relative;
+}
+
+.MrlForm-counter--qsQR5 {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-xxsmall);
+  font-weight: var(--mrl-type-weight-text);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-xxsmall);
+  color: rgba(var(--mrl-gray-80), 1);
+  display: block;
+  margin-top: var(--mrl-spacing-02);
+  text-align: right;
+  width: 100%;
+}
+
+:root,
+:host {
+  --mrl-text-input-background: var(--mrl-color-background);
+  --mrl-text-input-background-color-hover: var(--mrl-color-background);
+  --mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);
+  --mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-text-input-border-width: var(--mrl-line-width-border);
+  --mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
+  --mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
+  --mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);
+  --mrl-text-input-border-color-focus: var(--mrl-color-line-active);
+  --mrl-text-input-border-radius: var(--mrl-border-radius-functional);
+  --mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
+  --mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
+  --mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
+  --mrl-text-input-color-read-only: var(--mrl-gray-90);
+  --mrl-text-input-height: var(--mrl-spacing-09);
+  --mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
+  --mrl-text-input-inset-vertical: var(--mrl-space-inset);
+  --mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
+  --mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
+  	var(--mrl-text-input-inset-horizontal);
+  --mrl-input-icon-offset: var(--mrl-spacing-03);
+  --mrl-checkbox-height: var(--mrl-spacing-09);
+  --mrl-checkbox-input-affordance: var(--mrl-spacing-08);
+  --mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-checkbox-input-size: var(--mrl-spacing-06);
+  --mrl-checkbox-input-background: var(--mrl-color-background);
+  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-checkbox-input-color: var(--mrl-color-text-inverse);
+  --mrl-checkbox-input-border-width: var(--mrl-line-width-control);
+  --mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
+  --mrl-radio-button-height: var(--mrl-spacing-06);
+  --mrl-radio-button-width: var(--mrl-spacing-06);
+  --mrl-radio-button-fill-size: var(--mrl-spacing-04);
+  --mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-radio-button-border-width: var(--mrl-line-width-border);
+  --mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
+  --mrl-radio-button-background: var(--mrl-color-background);
+  --mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
+  --mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
+  --mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
+}
+
+.mrl-checkbox-input--2TKjf:checked ~ .mrl-checkbox-inputDisplay--g2X37,
+.MrlCheckboxStandalone-input--yAygJ:checked ~ .MrlCheckboxStandalone-inputDisplay--XTvat,
+.mrl-checkbox-input--2TKjf:indeterminate ~ .mrl-checkbox-inputDisplay--g2X37,
+.MrlCheckboxStandalone-input--yAygJ:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--XTvat {
+  --mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
+  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
+}
+
+:host {
+  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-select-item-spacing-stack: var(--mrl-spacing-02);
+  --mrl-select-item-text-affordance: calc(
+  	var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
+  );
+}
+
+.MrlTextarea--TkMIr {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-small);
+  font-weight: var(--mrl-type-weight-text);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-small);
+  background: var(--mrl-text-input-background);
+  border-color: var(--mrl-text-input-border-color);
+  border-radius: var(--mrl-text-input-border-radius);
+  border-style: solid;
+  border-width: var(--mrl-text-input-border-width);
+  color: var(--mrl-text-input-color);
+  margin: 0;
+  min-height: var(--mrl-text-input-height);
+  padding: var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);
+  transition: background-color var(--mrl-duration-03) var(--mrl-timing-m2), border-color var(--mrl-duration-03) var(--mrl-timing-m2), color var(--mrl-duration-03) var(--mrl-timing-m2), padding-left var(--mrl-duration-03) var(--mrl-timing-m2);
+  width: 100%;
+  resize: vertical;
+}
+.MrlTextarea--TkMIr::placeholder {
+  color: var(--mrl-text-input-placeholder-color);
+}
+.MrlTextarea--TkMIr:hover {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);
+  --mrl-text-input-background: var(--mrl-text-input-background-color-hover);
+}
+.MrlTextarea--TkMIr:focus {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);
+  color: var(--mrl-text-input-color-focus);
+}
+.MrlTextarea--TkMIr:focus-visible {
+  outline: none;
+}
+.MrlTextarea--TkMIr:disabled {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);
+  color: var(--mrl-text-input-color-disabled);
+  pointer-events: none;
+}
+.MrlTextarea--TkMIr:disabled::placeholder {
+  color: var(--mrl-text-input-color-disabled);
+}
+.MrlTextarea--TkMIr[aria-invalid=true] {
+  border-color: var(--mrl-color-background-error);
+}
+.MrlTextarea--TkMIr:not(:disabled):read-only {
+  --mrl-text-input-background: var(--mrl-text-input-background-color-read-only);
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-read-only);
+  color: var(--mrl-text-input-color-read-only);
+}
+.MrlTextarea--TkMIr:focus-visible {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-name: outline-animation--EjXPr;
+  animation-timing-function: var(--mrl-timing-m3);
+}
+@keyframes outline-animation--EjXPr {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}
+.MrlTextarea--auto-expand--RA1nt {
+  display: block;
+  max-height: 120px;
+  overflow: hidden;
+  resize: none;
+}
+.MrlTextarea--read-only--k4Zvm {
+  resize: none;
+}

package/dist/cjs/components/form/textarea/MrlTextarea/MrlTextarea.module.scss.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlTextarea.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--tQKn-",
+	"MrlForm-counter": "MrlForm-counter--qsQR5",
+	"mrl-checkbox-input": "mrl-checkbox-input--2TKjf",
+	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--g2X37",
+	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--yAygJ",
+	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--XTvat",
+	"MrlTextarea": "MrlTextarea--TkMIr",
+	"outline-animation": "outline-animation--EjXPr",
+	"MrlTextarea--auto-expand": "MrlTextarea--auto-expand--RA1nt",
+	"MrlTextarea--read-only": "MrlTextarea--read-only--k4Zvm"
+};

package/dist/cjs/components/form/textarea/MrlTextarea/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("./MrlTextarea"), exports);

package/dist/cjs/components/form/utils.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDescribedby = exports.debounce = exports.getIndexByLetter = exports.maintainScrollVisibility = exports.isScrollable = exports.getUpdatedIndex = exports.getActionFromKey = exports.actions = void 0;
+/**
+ * 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
+ */
+exports.actions = {
+    // Closes the menu without changing the value
+    Close: 0,
+    // Selects an item and closes the menu in one key press
+    CloseSelect: 1,
+    // Opens the menu and moves focus to the first item in the the menu
+    First: 2,
+    // Opens the menu and moves focus to the last item in the menu
+    Last: 3,
+    // Moves focus to the next item in the list
+    Next: 4,
+    // Displays the menu and moves focus to the selected item
+    Open: 5,
+    PageDown: 6,
+    PageUp: 7,
+    // Moves focus to the previous item in the list
+    Previous: 8,
+    // Selects the item without closing the list??
+    // I don't think this is used anywhere
+    // Select: 9,
+    // The user is free-form typing to find an item in the menu
+    Type: 10
+};
+/**
+ * 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
+ */
+const getActionFromKey = (event, isMenuOpen, search) => {
+    const { key, altKey, ctrlKey, metaKey } = event;
+    // all keys that will do the default open action
+    const openKeys = ['ArrowDown', 'ArrowUp', ' '];
+    // handle opening when closed
+    if (!isMenuOpen && openKeys.includes(key))
+        return exports.actions.Open;
+    // home and end move the selected option when open or closed
+    if (key === 'Home')
+        return exports.actions.First;
+    if (key === 'End')
+        return exports.actions.Last;
+    // handle typing characters when open or closed
+    if (key === 'Backspace' ||
+        key === 'Clear' ||
+        (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) ||
+        (search !== '' && key === ' ')) {
+        return exports.actions.Type;
+    }
+    // handle shortcuts only allowed when the menu is open
+    if (isMenuOpen) {
+        switch (key) {
+            case 'ArrowUp':
+                return altKey ? exports.actions.CloseSelect : exports.actions.Previous;
+            case 'ArrowDown':
+                return !altKey ? exports.actions.Next : undefined;
+            case 'PageUp':
+                return exports.actions.PageUp;
+            case 'PageDown':
+                return exports.actions.PageDown;
+            case 'Escape':
+                return exports.actions.Close;
+            case 'Enter':
+            case ' ':
+                return exports.actions.CloseSelect;
+            default:
+                break;
+        }
+    }
+};
+exports.getActionFromKey = getActionFromKey;
+/**
+ * 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
+ */
+const getUpdatedIndex = (currentIndex, maxIndex = 0, action) => {
+    switch (action) {
+        case exports.actions.First:
+            return 0;
+        case exports.actions.Last:
+            return maxIndex;
+        case exports.actions.Previous:
+            return Math.max(0, currentIndex === null ? 0 : currentIndex - 1);
+        case exports.actions.Next:
+            return Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + 1);
+        case exports.actions.PageUp:
+            return Math.max(0, currentIndex === null ? 0 : currentIndex - maxIndex);
+        case exports.actions.PageDown:
+            return Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + maxIndex);
+        default:
+            return currentIndex;
+    }
+};
+exports.getUpdatedIndex = getUpdatedIndex;
+/**
+ * Checks if the select menu items has scrollable overflow
+ *
+ * @param {HTMLElement} menu - select menu component
+ * @returns {boolean} - true if the menu has overflow content
+ */
+const isScrollable = (menu) => menu && menu.clientHeight < menu.scrollHeight;
+exports.isScrollable = isScrollable;
+/**
+ * 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
+ */
+const maintainScrollVisibility = (childEl, scrollParent) => {
+    const { offsetHeight, offsetTop } = childEl;
+    const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
+    const isAbove = offsetTop < scrollTop;
+    const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+    // total amount of select item's Y-axis spacing
+    const marginY = 4 + 4;
+    if (isAbove) {
+        scrollParent.scrollTo(0, offsetTop - marginY);
+    }
+    else if (isBelow) {
+        scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + marginY);
+    }
+};
+exports.maintainScrollVisibility = maintainScrollVisibility;
+/**
+ * Filters an array of items against an input string
+ * returns an array of options that begin with the filter string, case-independent
+ *
+ * @param {Element[]} options - menu items list
+ * @param {string} filter - pressed letters combination
+ * @returns {Element[]} - filtered options
+ */
+const filterOptions = (options, filter) => {
+    return options.filter((option) => {
+        var _a;
+        const matches = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(filter.toLowerCase())) === 0;
+        return matches;
+    });
+};
+/**
+ * Checks if the pressed letter is the same as previously pressed
+ *
+ * @param {string[]} array - filter string split by letters
+ * @returns {boolean} - if the pressed letter is the same as previously pressed
+ */
+const allSameLetter = (array) => array.every((letter) => letter === array[0]);
+/**
+ * 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
+ */
+const getIndexByLetter = (options, filter, startIndex = 0) => {
+    const orderedOptions = [...options.slice(startIndex), ...options.slice(0, startIndex)];
+    const firstMatch = filterOptions(orderedOptions, filter)[0];
+    // first check if there is an exact match for the typed string
+    if (firstMatch)
+        return options.indexOf(firstMatch);
+    // if the same letter is being repeated, cycle through first-letter matches
+    else if (allSameLetter(filter.split(''))) {
+        const matches = filterOptions(orderedOptions, filter[0]);
+        return options.indexOf(matches[0]);
+    }
+    // if no matches, return -1
+    else
+        return -1;
+};
+exports.getIndexByLetter = getIndexByLetter;
+/**
+ * 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
+ */
+const debounce = (func, timeout = 500, debounce, callback) => {
+    if (debounce !== null) {
+        clearTimeout(debounce);
+        debounce = null;
+    }
+    return () => {
+        debounce = window.setTimeout(() => {
+            func.apply(this);
+        }, timeout);
+        callback(debounce);
+    };
+};
+exports.debounce = debounce;
+/**
+ * Generates the 'aria-describedby' attribute from multiple ids
+ *
+ * @param {Array<string | undefined>} args ids
+ * @returns {GetAriaDescribedByReturn} an object with aria-describedby
+ */
+function getDescribedby(...args) {
+    const describedby = args.filter((str) => Boolean(str)).join(' ');
+    if (describedby === '')
+        return {};
+    return {
+        'aria-describedby': describedby
+    };
+}
+exports.getDescribedby = getDescribedby;

package/dist/cjs/components/grid/MrlCol/MrlCol.js

@@ -0,0 +1,99 @@
+"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.MrlCol = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../constants");
+const getBootstrapClass = (size, type, val) => size === 'col' || size === 'xs' ? `${type}-${val}` : `${type}-${size}-${val}`;
+/**
+ * Creates the size classes for the grid.
+ * @param props - component props
+ * @returns an array of size classes based on bootstrap grid API
+ */
+const createSizeClasses = (props) => {
+    const classes = [];
+    for (const size of constants_1.GridSizes) {
+        // get the value based on the prop key from the component props
+        const value = props[size];
+        // create the size class based on the value using the bootstrap grid API
+        if (value) {
+            // if the value is a number, then it is a column size
+            if (typeof value === 'number') {
+                classes.push(getBootstrapClass(size, 'col', value));
+                continue;
+            }
+            // if the value is an object, then we need to compose multiple classes
+            // based on the keyvalue pairings
+            if (value !== null && typeof value === 'object') {
+                for (const [key, val] of Object.entries(value)) {
+                    if (val === 0 || val === undefined)
+                        continue;
+                    classes.push(getBootstrapClass(size, key, val));
+                }
+            }
+        }
+    }
+    if (classes.length === 0)
+        classes.push('col');
+    return classes;
+};
+/**
+ * Gets the grid size props from the component props.
+ * @param props  - component props
+ * @returns object of grid size props
+ */
+const getGridProps = (props) => {
+    const { col, xs, sm, md, lg, xl, xxl } = props;
+    // eslint-disable-next-line sort-keys
+    return { col, xs, sm, md, lg, xl, xxl };
+};
+/**
+ * MrlCol React component.
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+function MrlCol(props) {
+    const { children, className = '' } = props, rest = __rest(props, ["children", "className"]);
+    const gridProps = getGridProps(props);
+    const columnClasses = React.useMemo(() => createSizeClasses(gridProps), [gridProps]);
+    const allClasses = (0, classnames_1.default)(className, columnClasses);
+    return (React.createElement("div", Object.assign({}, rest, { className: allClasses }), children));
+}
+exports.MrlCol = MrlCol;

package/dist/cjs/components/grid/MrlCol/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlCol = void 0;
+var MrlCol_1 = require("./MrlCol");
+Object.defineProperty(exports, "MrlCol", { enumerable: true, get: function () { return MrlCol_1.MrlCol; } });

package/dist/cjs/components/grid/MrlGrid/MrlGrid.js

@@ -0,0 +1,55 @@
+"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.MrlGrid = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+require("../grid.variables.css");
+require("../grid.global.css");
+/**
+ * MrlCol React component.
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+function MrlGrid(_a) {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    const allClasses = (0, classnames_1.default)('container', className);
+    return (React.createElement("div", Object.assign({}, rest, { className: allClasses }), children));
+}
+exports.MrlGrid = MrlGrid;

package/dist/cjs/components/grid/MrlGrid/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlGrid = void 0;
+var MrlGrid_1 = require("./MrlGrid");
+Object.defineProperty(exports, "MrlGrid", { enumerable: true, get: function () { return MrlGrid_1.MrlGrid; } });

package/dist/cjs/components/grid/MrlRow/MrlRow.js

@@ -0,0 +1,55 @@
+"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.MrlRow = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * MrlRow React component.
+ * @param props - component props
+ * @returns a MrlRow React component.
+ */
+function MrlRow(_a) {
+    var { align, children, className = '', justify } = _a, rest = __rest(_a, ["align", "children", "className", "justify"]);
+    const alignClass = align ? `align-items-${align}` : '';
+    const justifyClass = justify && `justify-content-${justify}`;
+    const allClasses = (0, classnames_1.default)('row', className, alignClass, justifyClass);
+    return (React.createElement("div", Object.assign({ className: allClasses }, rest), children));
+}
+exports.MrlRow = MrlRow;

package/dist/cjs/components/grid/MrlRow/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlRow = void 0;
+var MrlRow_1 = require("./MrlRow");
+Object.defineProperty(exports, "MrlRow", { enumerable: true, get: function () { return MrlRow_1.MrlRow; } });

package/dist/cjs/components/grid/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridSizes = void 0;
+/**
+ * Available grid sizes
+ */
+exports.GridSizes = [
+    'col',
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    'xxl'
+];