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

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

@@ -0,0 +1,25 @@
+"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("./MrlTable"), exports);
+__exportStar(require("./MrlTableBody"), exports);
+__exportStar(require("./MrlTableCell"), exports);
+__exportStar(require("./MrlTableColumn"), exports);
+__exportStar(require("./MrlTableHeader"), exports);
+__exportStar(require("./MrlTableRow"), exports);
+__exportStar(require("./MrlSmartTable"), exports);
+__exportStar(require("./MrlTableEmptyState"), exports);
+__exportStar(require("./constants"), exports);

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nextSortDirection = exports.sortText = exports.sortIcon = exports.keyFor = exports.sortAlphabeticallyAsCoercedStrings = void 0;
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const constants_1 = require("./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.
+ */
+const sortAlphabeticallyAsCoercedStrings = (a, b) => {
+    return `${a}`.localeCompare(`${b}`);
+};
+exports.sortAlphabeticallyAsCoercedStrings = sortAlphabeticallyAsCoercedStrings;
+/**
+ * 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
+ */
+const keyFor = (prefix, elementType, ...keys) => `${prefix}-${elementType}-${keys.join('-')}`;
+exports.keyFor = keyFor;
+/**
+ * Provides sort icon based on direction.
+ *
+ * @param {MrlSortDirection} direction the sort direction
+ * @returns {typeof sortAsc | typeof sortDes} the icon
+ */
+const sortIcon = (direction) => direction > 0 ? ds_icons_1.sortAsc : ds_icons_1.sortDes;
+exports.sortIcon = sortIcon;
+/**
+ * Provides text label based on sort direction.
+ *
+ * @param {MrlSortDirection} direction the sort direction
+ * @returns {string} the text label
+ */
+const sortText = (direction) => direction > 0 ? 'ascending' : 'descending';
+exports.sortText = sortText;
+/**
+ * Provides next sort direction based on current direction.
+ *
+ * @param {MrlSortDirection} current sort direction
+ * @returns {MrlSortDirection} next sort direction
+ */
+const nextSortDirection = (current) => current ? current * -1 : constants_1.MrlSortDirection.ASC;
+exports.nextSortDirection = nextSortDirection;

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

@@ -0,0 +1,72 @@
+"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.MrlTab = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const MrlTabs_1 = require("../MrlTabs/MrlTabs");
+/** MrlTab and MrlTabLink share styles as they should look identical */
+const MrlTab_module_scss_1 = __importDefault(require("./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
+ */
+const MrlTab = (_a) => {
+    var { className, icon, id, hookClick, text } = _a, rest = __rest(_a, ["className", "icon", "id", "hookClick", "text"]);
+    const { activeTab, setActiveTab } = (0, MrlTabs_1.useMrlTabContext)();
+    const active = activeTab === id;
+    const buttonClasses = (0, classnames_1.default)(className, 'mrl-tab', {
+        [MrlTab_module_scss_1.default['MrlTab']]: true,
+        [MrlTab_module_scss_1.default['MrlTab-selected']]: active
+    });
+    const textClasses = (0, classnames_1.default)('mrl-tab--text', {
+        [MrlTab_module_scss_1.default['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: MrlTab_module_scss_1.default['MrlTab-icon'] }, icon),
+        React.createElement("span", { className: textClasses }, text)));
+};
+exports.MrlTab = MrlTab;

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

@@ -0,0 +1,202 @@
+/* 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/cjs/components/tabs/MrlTab/MrlTab.module.scss.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlTab.module.css");
+exports.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/cjs/components/tabs/MrlTab/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("./MrlTab"), exports);

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

@@ -0,0 +1,61 @@
+"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.MrlTabContent = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const __1 = require("../../../");
+const MrlTabContent_module_scss_1 = __importDefault(require("./MrlTabContent.module.scss.js"));
+exports.MrlTabContent = React.memo((_a) => {
+    var { children, className, tabId } = _a, rest = __rest(_a, ["children", "className", "tabId"]);
+    const { activeTab } = (0, __1.useMrlTabContext)();
+    const isHidden = activeTab !== tabId;
+    const panelRef = React.useRef(null);
+    const [focusableElementsInPanel, setFocusableElementsInPanel] = React.useState([]);
+    const containerClass = (0, classnames_1.default)(className, 'mrl-tab-content', {
+        [MrlTabContent_module_scss_1.default.MrlTabContent]: true,
+        [MrlTabContent_module_scss_1.default['MrlTabContent-hidden']]: isHidden
+    });
+    React.useEffect(() => {
+        const focusableElements = (0, __1.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));
+});
+exports.MrlTabContent.displayName = 'MrlTabContent';

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlTabContent.module.css");
+exports.default = {
+	"MrlTabContent": "MrlTabContent--5IbTK",
+	"MrlTabContent-hidden": "MrlTabContent-hidden--xaA-j"
+};

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

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

@@ -0,0 +1,157 @@
+"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.MrlTabGroup = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const __1 = require("../../");
+const utils_1 = require("../../../utils");
+const MrlTabGroup_module_scss_1 = __importDefault(require("./MrlTabGroup.module.scss.js"));
+exports.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)) {
+            (0, utils_1.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':
+                (0, utils_1.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':
+                (0, utils_1.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':
+                (0, utils_1.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':
+                (0, utils_1.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: `${MrlTabGroup_module_scss_1.default['MrlTabGroup-nav']} ${MrlTabGroup_module_scss_1.default['MrlTabGroup-prev']}`, ref: prevButtonContainer },
+        React.createElement("div", { className: `${MrlTabGroup_module_scss_1.default['MrlTabGroup-fade']} ${MrlTabGroup_module_scss_1.default['MrlTabGroup-fadePrev']}` }),
+        React.createElement(__1.MrlIconButton, { className: MrlTabGroup_module_scss_1.default['MrlTabGroup-prevButton'], icon: React.createElement(__1.MrlSvg, { svg: ds_icons_1.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: `${MrlTabGroup_module_scss_1.default['MrlTabGroup-nav']} ${MrlTabGroup_module_scss_1.default['MrlTabGroup-next']}`, ref: nextButtonContainer },
+        React.createElement("div", { className: `${MrlTabGroup_module_scss_1.default['MrlTabGroup-fade']} ${MrlTabGroup_module_scss_1.default['MrlTabGroup-fadeNext']}` }),
+        React.createElement(__1.MrlIconButton, { className: MrlTabGroup_module_scss_1.default['MrlTabGroup-nextButton'], icon: React.createElement(__1.MrlSvg, { svg: ds_icons_1.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 = (0, classnames_1.default)(className, 'mrl-tab-group', MrlTabGroup_module_scss_1.default.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: MrlTabGroup_module_scss_1.default['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 */
+});
+exports.MrlTabGroup.displayName = 'MrlTabGroup';