@muraldevkit/ui-toolkit 4.66.0-dev-DhSN.1 → 4.66.0-dev-T3Jw.1

package/dist/esm/components/table/index.js

@@ -1,9 +0,0 @@
-export * from './MrlTable';
-export * from './MrlTableBody';
-export * from './MrlTableCell';
-export * from './MrlTableColumn';
-export * from './MrlTableHeader';
-export * from './MrlTableRow';
-export * from './MrlSmartTable';
-export * from './MrlTableEmptyState';
-export * from './constants';

package/dist/esm/components/table/utils.js

@@ -1,45 +0,0 @@
-import { sortAsc, sortDes } from '@muraldevkit/ds-icons';
-import { MrlSortDirection } from './constants';
-/**
- * Used as a generic sort comparator for unknown types by coercing each value
- * to a string and sorting alphabetically. It will likely produce unexpected and/or
- * undesirable results for anything other than the most basic text or numeric data.
- *
- * @param {unknown} a first of two values
- * @param {unknown} b second of two values
- * @returns {number} A negative number if a occurs before b; positive if the
- * a occurs after b; 0 if they are equivalent.
- */
-export const sortAlphabeticallyAsCoercedStrings = (a, b) => {
-    return `${a}`.localeCompare(`${b}`);
-};
-/**
- * Used to generate consistent keys for the entire structure of MrlSmartTable
- *
- * @param {string} prefix the unique structure prefix
- * @param {string} elementType the element type to generate a key for
- * @param {string[]} keys a set of properties to uniquely identify the element
- * @returns {string} the generated key
- */
-export const keyFor = (prefix, elementType, ...keys) => `${prefix}-${elementType}-${keys.join('-')}`;
-/**
- * Provides sort icon based on direction.
- *
- * @param {MrlSortDirection} direction the sort direction
- * @returns {typeof sortAsc | typeof sortDes} the icon
- */
-export const sortIcon = (direction) => direction > 0 ? sortAsc : sortDes;
-/**
- * Provides text label based on sort direction.
- *
- * @param {MrlSortDirection} direction the sort direction
- * @returns {string} the text label
- */
-export const sortText = (direction) => direction > 0 ? 'ascending' : 'descending';
-/**
- * Provides next sort direction based on current direction.
- *
- * @param {MrlSortDirection} current sort direction
- * @returns {MrlSortDirection} next sort direction
- */
-export const nextSortDirection = (current) => current ? current * -1 : MrlSortDirection.ASC;

package/dist/esm/components/tabs/MrlTab/MrlTab.js

@@ -1,42 +0,0 @@
-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;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import { useMrlTabContext } from '../MrlTabs/MrlTabs';
-/** MrlTab and MrlTabLink share styles as they should look identical */
-import styles from './MrlTab.module.scss.js';
-/**
- * Renders a tab component
- * @param {MrlTabProps} props the props for your MrlTab
- * @returns {React.ReactElement} an a element containing the text you pass
- */
-export const MrlTab = (_a) => {
-    var { className, icon, id, hookClick, text } = _a, rest = __rest(_a, ["className", "icon", "id", "hookClick", "text"]);
-    const { activeTab, setActiveTab } = useMrlTabContext();
-    const active = activeTab === id;
-    const buttonClasses = classnames(className, 'mrl-tab', {
-        [styles['MrlTab']]: true,
-        [styles['MrlTab-selected']]: active
-    });
-    const textClasses = classnames('mrl-tab--text', {
-        [styles['MrlTab-Text']]: true
-    });
-    const handleClick = (id) => {
-        if (hookClick) {
-            hookClick();
-        }
-        setActiveTab(id);
-    };
-    return (React.createElement("button", Object.assign({}, rest, { "aria-selected": active, className: buttonClasses, "data-qa": `${id}-tab`, "data-roving": "true", id: id, onClick: () => handleClick(id), role: "tab", tabIndex: active ? 0 : -1, type: "button" }),
-        !!icon && React.createElement("span", { className: styles['MrlTab-icon'] }, icon),
-        React.createElement("span", { className: textClasses }, text)));
-};

package/dist/esm/components/tabs/MrlTab/MrlTab.module.css

@@ -1,202 +0,0 @@
-/* stylelint-disable scss/operator-no-newline-after */
-.mrl-u-focus-wrapper--lvPB8 {
-  position: relative;
-}
-
-/* The styles in this file are used for both MrlTab and MrlTabLink */
-.MrlTab-Text--Wq91h {
-  border-bottom: var(--mrl-line-width-control) solid transparent;
-  display: block;
-  line-height: var(--mrl-line-height-08);
-  margin: 0;
-  padding: var(--mrl-space-stack-related-small) var(--mrl-space-stack-related) var(--mrl-spacing-01);
-  position: relative;
-  text-wrap: nowrap;
-  z-index: 5;
-}
-
-.MrlTab-icon--AnJZ0 {
-  display: block;
-  height: var(--mrl-spacing-07);
-  margin: var(--mrl-spacing-01) auto;
-  overflow: hidden;
-  width: var(--mrl-spacing-07);
-}
-
-/* Disabled descending specificity rules due to the need to override for interactions */
-/* stylelint-disable no-descending-specificity */
-.MrlTab--NYKlg {
-  background-color: transparent;
-  border: none;
-  color: var(--mrl-color-text-emph);
-  cursor: pointer;
-  display: inline-block;
-  font-family: var(--mrl-heading-font);
-  font-size: var(--mrl-font-size-01);
-  font-weight: var(--mrl-font-weight-02);
-  letter-spacing: var(--mrl-letter-spacing-04);
-  line-height: var(--mrl-line-height-08);
-  margin-left: var(--mrl-spacing-03);
-  padding: 0;
-  position: relative;
-  text-decoration: none;
-  vertical-align: bottom;
-}
-.MrlTab--NYKlg:first-child {
-  margin-left: 0;
-}
-.MrlTab--NYKlg:not(.MrlTab-selected---N324) .MrlTab-icon--AnJZ0 {
-  opacity: 0.8;
-}
-.MrlTab--NYKlg:hover {
-  color: var(--mrl-color-text-hover);
-}
-.MrlTab--NYKlg:hover .MrlTab-icon--AnJZ0 {
-  opacity: 1;
-}
-.MrlTab--NYKlg:hover .MrlTab-Text--Wq91h {
-  border-bottom-color: var(--mrl-color-text-emph-hover);
-}
-.MrlTab--NYKlg:active {
-  color: var(--mrl-color-text-active);
-}
-.MrlTab--NYKlg:active .MrlTab-icon--AnJZ0 {
-  opacity: 1;
-}
-.MrlTab--NYKlg:focus-visible {
-  background-color: var(--mrl-color-background);
-  border-color: transparent;
-  outline: none;
-}
-.MrlTab--NYKlg:focus-visible::after {
-  animation-duration: var(--mrl-duration-03);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-  animation-timing-function: var(--mrl-timing-m3);
-  border: 0 solid transparent;
-  border-radius: calc(
-		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
-	);
-  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  content: "";
-  display: block;
-  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  position: absolute;
-  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  z-index: 1;
-  animation-name: border-animation--Z56ZN;
-  border-radius: var(--mrl-border-radius-content-large);
-}
-@keyframes border-animation--Z56ZN {
-  0% {
-    border-color: transparent;
-    border-width: 0;
-    bottom: var(--mrl-space-offset-focus);
-    left: var(--mrl-space-offset-focus);
-    right: var(--mrl-space-offset-focus);
-    top: var(--mrl-space-offset-focus);
-  }
-  50% {
-    border-color: var(--mrl-color-focus);
-    border-width: 0.25rem;
-    bottom: calc(var(--mrl-spacing-02) * -1);
-    left: calc(var(--mrl-spacing-02) * -1);
-    right: calc(var(--mrl-spacing-02) * -1);
-    top: calc(var(--mrl-spacing-02) * -1);
-  }
-  100% {
-    border-color: var(--mrl-color-focus);
-    border-width: var(--mrl-line-width-focus);
-    bottom: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    left: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    right: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    top: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-  }
-}
-@keyframes border-animation-inverse--8KG9- {
-  0% {
-    border-color: transparent;
-    border-width: 0;
-    bottom: var(--mrl-space-offset-focus);
-    left: var(--mrl-space-offset-focus);
-    right: var(--mrl-space-offset-focus);
-    top: var(--mrl-space-offset-focus);
-  }
-  50% {
-    border-color: var(--mrl-color-focus-inverse);
-    border-width: 0.25rem;
-    bottom: calc(var(--mrl-spacing-02) * -1);
-    left: calc(var(--mrl-spacing-02) * -1);
-    right: calc(var(--mrl-spacing-02) * -1);
-    top: calc(var(--mrl-spacing-02) * -1);
-  }
-  100% {
-    border-color: var(--mrl-color-focus-inverse);
-    border-width: var(--mrl-line-width-focus);
-    bottom: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    left: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    right: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    top: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-  }
-}
-.MrlTab--NYKlg:focus-visible .MrlTab-Text--Wq91h {
-  border-color: var(--mrl-color-line-emph);
-}
-.MrlTab--NYKlg:focus-visible:hover .MrlTab-Text--Wq91h {
-  border-bottom-color: var(--mrl-color-text-emph-hover);
-}
-
-.MrlTab-selected---N324 .MrlTab-Text--Wq91h {
-  border-bottom-color: var(--mrl-color-text-emph-selected);
-  color: var(--mrl-color-text-emph-selected);
-}
-.MrlTab-selected---N324:hover .MrlTab-Text--Wq91h {
-  border-bottom-color: var(--mrl-color-text-emph-selected);
-  color: var(--mrl-color-text-emph-selected);
-}
-.MrlTab-selected---N324:focus-visible .MrlTab-Text--Wq91h {
-  border-bottom-color: var(--mrl-color-text-emph-selected);
-}
-.MrlTab-selected---N324:focus-visible:hover .MrlTab-Text--Wq91h {
-  border-bottom-color: var(--mrl-color-text-emph-selected);
-}
-
-.MrlTabs-caps .MrlTab--NYKlg {
-  text-transform: capitalize;
-}
-
-.MrlTabs-large .MrlTab--NYKlg {
-  font-size: var(--mrl-font-size-03);
-  line-height: var(--mrl-line-height-07);
-  padding-top: var(--mrl-spacing-01);
-}
-.MrlTabs-large .MrlTab-Text--Wq91h {
-  padding-bottom: var(--mrl-space-stack-related-small);
-}
-.MrlTabs-large .MrlTab-icon--AnJZ0 {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.MrlTabs-evenSpacing .MrlTab--NYKlg {
-  flex: 1;
-}
-
-/* stylelint-enable no-descending-specificity */

package/dist/esm/components/tabs/MrlTab/MrlTab.module.scss.js

@@ -1,10 +0,0 @@
-import "./MrlTab.module.css";
-export default {
-	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--lvPB8",
-	"MrlTab-Text": "MrlTab-Text--Wq91h",
-	"MrlTab-icon": "MrlTab-icon--AnJZ0",
-	"MrlTab": "MrlTab--NYKlg",
-	"MrlTab-selected": "MrlTab-selected---N324",
-	"border-animation": "border-animation--Z56ZN",
-	"border-animation-inverse": "border-animation-inverse--8KG9-"
-};

package/dist/esm/components/tabs/MrlTab/index.js

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

package/dist/esm/components/tabs/MrlTabContent/MrlTabContent.js

@@ -1,32 +0,0 @@
-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;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import { getFocusableElementsInsideElement, useMrlTabContext } from '../../../';
-import styles from './MrlTabContent.module.scss.js';
-export const MrlTabContent = React.memo((_a) => {
-    var { children, className, tabId } = _a, rest = __rest(_a, ["children", "className", "tabId"]);
-    const { activeTab } = useMrlTabContext();
-    const isHidden = activeTab !== tabId;
-    const panelRef = React.useRef(null);
-    const [focusableElementsInPanel, setFocusableElementsInPanel] = React.useState([]);
-    const containerClass = classnames(className, 'mrl-tab-content', {
-        [styles.MrlTabContent]: true,
-        [styles['MrlTabContent-hidden']]: isHidden
-    });
-    React.useEffect(() => {
-        const focusableElements = getFocusableElementsInsideElement(panelRef.current);
-        setFocusableElementsInPanel(focusableElements);
-    }, []);
-    return (React.createElement("div", Object.assign({ "aria-labelledby": tabId, className: containerClass, role: "tabpanel", tabIndex: focusableElementsInPanel.length ? -1 : 0, ref: panelRef }, rest), children));
-});
-MrlTabContent.displayName = 'MrlTabContent';

package/dist/esm/components/tabs/MrlTabContent/MrlTabContent.module.css

@@ -1,7 +0,0 @@
-.MrlTabContent--5IbTK {
-  display: block;
-  padding: var(--mrl-spacing-05) 0 0;
-}
-.MrlTabContent-hidden--xaA-j {
-  display: none;
-}

package/dist/esm/components/tabs/MrlTabContent/MrlTabContent.module.scss.js

@@ -1,5 +0,0 @@
-import "./MrlTabContent.module.css";
-export default {
-	"MrlTabContent": "MrlTabContent--5IbTK",
-	"MrlTabContent-hidden": "MrlTabContent-hidden--xaA-j"
-};

package/dist/esm/components/tabs/MrlTabContent/index.js

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

package/dist/esm/components/tabs/MrlTabGroup/MrlTabGroup.js

@@ -1,128 +0,0 @@
-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;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import { chevronLeft, chevronRight } from '@muraldevkit/ds-icons';
-import { MrlIconButton, MrlSvg } from '../../';
-import { preventDefault } from '../../../utils';
-import styles from './MrlTabGroup.module.scss.js';
-export const MrlTabGroup = React.memo((_a) => {
-    var { children, className, disablePageControls, label } = _a, rest = __rest(_a, ["children", "className", "disablePageControls", "label"]);
-    const [page, setPage] = React.useState(0);
-    // We need `pageCount` in the state so when the component is mounted
-    // the values of `isFirstPage` and `isLastPage` are correctly calculated.
-    const [pageCount, setPageCount] = React.useState(0);
-    const tabGroup = React.useRef(null);
-    const prevButtonContainer = React.useRef(null);
-    const nextButtonContainer = React.useRef(null);
-    const [tabButtons, setTabButtons] = React.useState([]);
-    const prevPage = React.useCallback(() => {
-        setPage(page - 1);
-    }, [page]);
-    const nextPage = React.useCallback(() => {
-        setPage(page + 1);
-    }, [page]);
-    // **************************
-    // Keyboard Navigation
-    // **************************
-    const handleKeyUp = (e) => {
-        const actions = [
-            'ArrowUp',
-            'ArrowDown',
-            'ArrowLeft',
-            'ArrowRight',
-            'Home',
-            'End'
-        ];
-        if (actions.includes(e.key)) {
-            preventDefault(e);
-        }
-    };
-    /**
-     * Focus management when someone is using a keyboard to navigate the menu
-     * @param e - keyboard event
-     */
-    const handleKeyDown = (e) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const currentIndex = tabButtons.findIndex((item) => document.activeElement === item);
-        let nextIndex;
-        const lastTab = tabButtons.length - 1;
-        switch (e.key) {
-            case 'ArrowDown':
-            case 'ArrowRight':
-                preventDefault(e);
-                nextIndex = currentIndex < tabButtons.length - 1 ? currentIndex + 1 : currentIndex;
-                (_a = tabButtons[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-                (_b = tabButtons[nextIndex]) === null || _b === void 0 ? void 0 : _b.click();
-                break;
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                preventDefault(e);
-                nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
-                (_c = tabButtons[nextIndex]) === null || _c === void 0 ? void 0 : _c.focus();
-                (_d = tabButtons[nextIndex]) === null || _d === void 0 ? void 0 : _d.click();
-                break;
-            case 'Home':
-                preventDefault(e);
-                (_e = tabButtons[0]) === null || _e === void 0 ? void 0 : _e.focus();
-                (_f = tabButtons[0]) === null || _f === void 0 ? void 0 : _f.click();
-                break;
-            case 'End':
-                preventDefault(e);
-                (_g = tabButtons[lastTab]) === null || _g === void 0 ? void 0 : _g.focus();
-                (_h = tabButtons[lastTab]) === null || _h === void 0 ? void 0 : _h.click();
-                break;
-        }
-    };
-    React.useEffect(() => {
-        var _a;
-        const foundMenuItems = Array.from(((_a = tabGroup.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="tab"]')) || []);
-        setTabButtons(foundMenuItems);
-    }, [prevPage, nextPage]);
-    // **************************
-    // End Keyboard Navigation
-    // **************************
-    React.useEffect(() => {
-        if (!tabGroup.current || tabGroup.current.offsetWidth === 0) {
-            return;
-        }
-        const totalPages = Math.ceil(tabGroup.current.scrollWidth / tabGroup.current.offsetWidth);
-        setPageCount(totalPages);
-    }, [tabGroup]);
-    const previousButton = (React.createElement("div", { className: `${styles['MrlTabGroup-nav']} ${styles['MrlTabGroup-prev']}`, ref: prevButtonContainer },
-        React.createElement("div", { className: `${styles['MrlTabGroup-fade']} ${styles['MrlTabGroup-fadePrev']}` }),
-        React.createElement(MrlIconButton, { className: styles['MrlTabGroup-prevButton'], icon: React.createElement(MrlSvg, { svg: chevronLeft }), onClick: prevPage, "data-qa": "previous-categories-button", kind: "ghost", position: "right", size: "xsmall", state: "default", tabIndex: -1, text: "Previous" })));
-    const nextButton = (React.createElement("div", { className: `${styles['MrlTabGroup-nav']} ${styles['MrlTabGroup-next']}`, ref: nextButtonContainer },
-        React.createElement("div", { className: `${styles['MrlTabGroup-fade']} ${styles['MrlTabGroup-fadeNext']}` }),
-        React.createElement(MrlIconButton, { className: styles['MrlTabGroup-nextButton'], icon: React.createElement(MrlSvg, { svg: chevronRight }), onClick: nextPage, "data-qa": "next-categories-button", kind: "ghost", position: "left", state: "default", size: "xsmall", tabIndex: -1, text: "Next" })));
-    const isFirstPage = page === 0;
-    // If we don't have any pages yet (at rendering time for instance) don't show the arrow.
-    const isLastPage = pageCount === 0 || page === pageCount - 1;
-    let pxToTranslate = null;
-    const fadePx = 3.4375 * 16;
-    // Check if the component was mounted and has more than one page
-    if (tabGroup.current && pageCount !== 1) {
-        const pxPerPage = -tabGroup.current.offsetWidth * page;
-        const fadeOffset = isFirstPage || isLastPage ? fadePx : fadePx * 2;
-        const pxRemainingInContainer = tabGroup.current.offsetWidth - tabGroup.current.scrollWidth - fadeOffset;
-        pxToTranslate = Math.max(pxPerPage, pxRemainingInContainer);
-    }
-    const containerClass = classnames(className, 'mrl-tab-group', styles.MrlTabGroup);
-    // We do not need the tablist to be focusable, as the contents within it are
-    /* eslint-disable jsx-a11y/interactive-supports-focus */
-    return (React.createElement("div", Object.assign({}, rest, { className: styles['MrlTabGroup-container'] }),
-        !disablePageControls && !isFirstPage && previousButton,
-        React.createElement("div", { "aria-label": label ? label : undefined, className: containerClass, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ref: tabGroup, role: "tablist", style: pxToTranslate ? { transform: `translateX(${pxToTranslate / 16}rem)` } : undefined }, children),
-        !disablePageControls && !isLastPage && nextButton));
-    /* eslint-enable jsx-a11y/interactive-supports-focus */
-});
-MrlTabGroup.displayName = 'MrlTabGroup';

package/dist/esm/components/tabs/MrlTabGroup/MrlTabGroup.module.css

@@ -1,63 +0,0 @@
-.MrlTabGroup-container--b2Vd7 {
-  display: flex;
-  overflow: hidden;
-  padding: 4px;
-  position: relative;
-}
-.MrlTabGroup-container--b2Vd7::before {
-  background-color: var(--mrl-color-background-decorative);
-  bottom: 4px;
-  content: "";
-  height: var(--mrl-line-width-control);
-  left: -4px;
-  position: absolute;
-  right: -4px;
-}
-
-.MrlTabGroup--BdlYs {
-  display: inline-flex;
-  position: relative;
-  transform: translateX(0);
-  width: 100%;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .MrlTabGroup--BdlYs {
-    transition: 0.3s ease-in-out;
-  }
-}
-
-.MrlTabGroup-fade--qWvwk {
-  bottom: 6px;
-  position: absolute;
-  top: 0;
-  width: 3.4375rem;
-}
-
-.MrlTabGroup-fadeNext--m0gbi {
-  background: linear-gradient(to right, rgba(var(--mrl-white), 0) 0%, rgba(var(--mrl-white), 0.4) 20%, rgba(var(--mrl-white), 0.6) 30%, var(--mrl-color-background) 60%);
-  right: 0;
-}
-
-.MrlTabGroup-fadePrev--7VxJN {
-  background: linear-gradient(to left, rgba(var(--mrl-white), 0) 0%, rgba(var(--mrl-white), 0.4) 20%, rgba(var(--mrl-white), 0.6) 30%, rgba(var(--mrl-white), 1) 60%);
-  left: 0;
-}
-
-.MrlTabGroup-nav--cZt3f {
-  align-items: center;
-  bottom: 0;
-  display: flex;
-  position: absolute;
-  top: 0;
-  z-index: 1;
-}
-
-.MrlTabGroup-next--YsQD0 {
-  bottom: var(--mrl-spacing-02);
-  right: 0;
-}
-
-.MrlTabGroup-prev--lMHc0 {
-  bottom: var(--mrl-spacing-02);
-  left: 0;
-}

package/dist/esm/components/tabs/MrlTabGroup/MrlTabGroup.module.scss.js

@@ -1,11 +0,0 @@
-import "./MrlTabGroup.module.css";
-export default {
-	"MrlTabGroup-container": "MrlTabGroup-container--b2Vd7",
-	"MrlTabGroup": "MrlTabGroup--BdlYs",
-	"MrlTabGroup-fade": "MrlTabGroup-fade--qWvwk",
-	"MrlTabGroup-fadeNext": "MrlTabGroup-fadeNext--m0gbi",
-	"MrlTabGroup-fadePrev": "MrlTabGroup-fadePrev--7VxJN",
-	"MrlTabGroup-nav": "MrlTabGroup-nav--cZt3f",
-	"MrlTabGroup-next": "MrlTabGroup-next--YsQD0",
-	"MrlTabGroup-prev": "MrlTabGroup-prev--lMHc0"
-};

package/dist/esm/components/tabs/MrlTabGroup/index.js

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

package/dist/esm/components/tabs/MrlTabLink/MrlTabLink.js

@@ -1,45 +0,0 @@
-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;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import { NavLink } from 'react-router-dom';
-import { useMrlTabContext } from '../MrlTabs/MrlTabs';
-/** MrlTab and MrlTabLink share styles as they should look identical */
-import styles from '../MrlTab/MrlTab.module.scss.js';
-/**
- * Renders a tab component
- *
- * @param {MrlTabLinkProps} props the props for your MrlTabLink
- * @returns {React.ReactElement} an a element containing the text you pass
- */
-export const MrlTabLink = (_a) => {
-    var { className, children, icon, id, hookClick, text, to } = _a, remainingProps = __rest(_a, ["className", "children", "icon", "id", "hookClick", "text", "to"]);
-    const { activeTab, setActiveTab } = useMrlTabContext();
-    const active = activeTab === id;
-    const buttonClasses = classnames(className, 'mrl-tab', {
-        [styles['MrlTab']]: true,
-        [styles['MrlTab-selected']]: active
-    });
-    const textClasses = classnames('mrl-tab--text', {
-        [styles['MrlTab-Text']]: true
-    });
-    const handleClick = (id) => {
-        if (hookClick) {
-            hookClick();
-        }
-        setActiveTab(id);
-    };
-    return (React.createElement(NavLink, Object.assign({ "aria-selected": active, className: buttonClasses, "data-qa": `${id}-tab`, "data-roving": "true", id: id, onClick: () => handleClick(id), role: "tab", tabIndex: active ? 0 : -1, to: to }, remainingProps),
-        !!icon && React.createElement("span", { className: styles['MrlTab-icon'] }, icon),
-        !!text && React.createElement("span", { className: textClasses }, text),
-        !!children && React.createElement("span", { className: textClasses }, children)));
-};

package/dist/esm/components/tabs/MrlTabLink/index.js

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

package/dist/esm/components/tabs/MrlTabs/MrlTabs.js

@@ -1,48 +0,0 @@
-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;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import { MrlTabContext } from '../../../';
-export const MrlTabs = React.memo((_a) => {
-    var { capitalizeTabTitles, children, className, selectedTab, size = 'small', spaceTabsEvenly } = _a, rest = __rest(_a, ["capitalizeTabTitles", "children", "className", "selectedTab", "size", "spaceTabsEvenly"]);
-    const [activeTab, setActiveTab] = React.useState('');
-    const tabsRef = React.useRef(null);
-    React.useEffect(() => {
-        var _a;
-        const foundTabs = Array.from(((_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="tab"]')) || []);
-        const tabIds = foundTabs.map((tab) => tab.id);
-        const selectedTabValid = selectedTab && tabIds.indexOf(selectedTab);
-        // If we have a valid `selectedTab` - use it
-        // Otherwise, set the first tab to active.
-        setActiveTab(selectedTabValid ? selectedTab : tabIds[0]);
-    }, [selectedTab]);
-    const containerClass = classnames(className, 'mrl-tabs', {
-        [`MrlTabs-${size}`]: size !== 'small',
-        ['MrlTabs-caps']: capitalizeTabTitles,
-        ['MrlTabs-evenSpacing']: spaceTabsEvenly
-    });
-    return (React.createElement(MrlTabContext.Provider, { value: { activeTab, setActiveTab } },
-        React.createElement("div", Object.assign({ className: containerClass }, rest, { ref: tabsRef }), children)));
-});
-MrlTabs.displayName = 'MrlTabs';
-/**
- * Tab context to prevent us from having to do any prop drilling.
- *
- * @returns {MrlTabContextProps} the context of the tabs
- */
-export function useMrlTabContext() {
-    const context = React.useContext(MrlTabContext);
-    if (context === undefined) {
-        throw new Error('useMrlTabContext must be used within a MrlTabProvider');
-    }
-    return context;
-}