@muraldevkit/ui-toolkit 4.68.0-dev-NFbt.1 → 4.68.0-dev-5W5E.1

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

@@ -5,7 +5,10 @@ var React = require('react');
 var classnames = require('classnames');
 var constants = require('../constants.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -22,53 +25,43 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["children", "className"];
-var getBootstrapClass = function getBootstrapClass(size, type, val) {
-  return size === 'col' || size === 'xs' ? "".concat(type, "-").concat(val) : "".concat(type, "-").concat(size, "-").concat(val);
-};
+var getBootstrapClass = (size, type, val) => size === 'col' || size === 'xs' ? "".concat(type, "-").concat(val) : "".concat(type, "-").concat(size, "-").concat(val);
 
 /**
  * Creates the size classes for the grid.
  * @param props - component props
  * @returns an array of size classes based on bootstrap grid API
  */
-var createSizeClasses = function createSizeClasses(props) {
+var createSizeClasses = props => {
   var classes = [];
-  var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(constants.GridSizes),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var size = _step.value;
-      // get the value based on the prop key from the component props
-      var value = props[size];
+  for (var size of constants.GridSizes) {
+    // get the value based on the prop key from the component props
+    var 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;
-        }
+    // 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 && _rollupPluginBabelHelpers.typeof(value) === 'object') {
-          for (var _i = 0, _Object$entries = Object.entries(value); _i < _Object$entries.length; _i++) {
-            var _Object$entries$_i = _rollupPluginBabelHelpers.slicedToArray(_Object$entries[_i], 2),
-              key = _Object$entries$_i[0],
-              val = _Object$entries$_i[1];
-            if (val === 0 || val === undefined) continue;
-            classes.push(getBootstrapClass(size, key, val));
-          }
+      // 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 (var _ref3 of Object.entries(value)) {
+          var _ref2 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 2);
+          var key = _ref2[0];
+          var val = _ref2[1];
+          if (val === 0 || val === undefined) continue;
+          classes.push(getBootstrapClass(size, key, val));
         }
       }
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
   }
   if (classes.length === 0) classes.push('col');
   return classes;
@@ -79,7 +72,7 @@ var createSizeClasses = function createSizeClasses(props) {
  * @param props  - component props
  * @returns object of grid size props
  */
-var getGridProps = function getGridProps(props) {
+var getGridProps = props => {
   var col = props.col,
     xs = props.xs,
     sm = props.sm,
@@ -90,13 +83,13 @@ var getGridProps = function getGridProps(props) {
 
   // eslint-disable-next-line sort-keys
   return {
-    col: col,
-    xs: xs,
-    sm: sm,
-    md: md,
-    lg: lg,
-    xl: xl,
-    xxl: xxl
+    col,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl
   };
 };
 
@@ -111,10 +104,8 @@ function MrlCol(props) {
     className = _props$className === void 0 ? '' : _props$className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
   var gridProps = getGridProps(props);
-  var columnClasses = React__namespace.useMemo(function () {
-    return createSizeClasses(gridProps);
-  }, [gridProps]);
-  var allClasses = classnames(className, columnClasses);
+  var columnClasses = React__namespace.useMemo(() => createSizeClasses(gridProps), [gridProps]);
+  var allClasses = classnames__default.default(className, columnClasses);
   return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: allClasses
   }), children);

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

@@ -1 +1 @@
-{"version":3,"file":"MrlCol.js","sources":["../../../../../src/components/grid/MrlCol/MrlCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../../layout/constants';\nimport { GridSizes, GridColumns } from '../constants';\n\ntype MrlCol = LayoutComponent & GridColumns;\n\nconst getBootstrapClass = (size: string, type: string, val: number | string): string =>\n\tsize === 'col' || size === 'xs' ? `${type}-${val}` : `${type}-${size}-${val}`;\n\n/**\n * Creates the size classes for the grid.\n * @param props - component props\n * @returns an array of size classes based on bootstrap grid API\n */\nconst createSizeClasses = (props: GridColumns): string[] => {\n\tconst classes: string[] = [];\n\n\tfor (const size of GridSizes) {\n\t\t// get the value based on the prop key from the component props\n\t\tconst value = props[size as keyof GridColumns];\n\n\t\t// create the size class based on the value using the bootstrap grid API\n\t\tif (value) {\n\t\t\t// if the value is a number, then it is a column size\n\t\t\tif (typeof value === 'number') {\n\t\t\t\tclasses.push(getBootstrapClass(size, 'col', value));\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// if the value is an object, then we need to compose multiple classes\n\t\t\t// based on the keyvalue pairings\n\t\t\tif (value !== null && typeof value === 'object') {\n\t\t\t\tfor (const [key, val] of Object.entries(value)) {\n\t\t\t\t\tif (val === 0 || val === undefined) continue;\n\t\t\t\t\tclasses.push(getBootstrapClass(size, key, val as number));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tif (classes.length === 0) classes.push('col');\n\n\treturn classes;\n};\n\n/**\n * Gets the grid size props from the component props.\n * @param props  - component props\n * @returns object of grid size props\n */\nconst getGridProps = (props: MrlCol): GridColumns => {\n\tconst { col, xs, sm, md, lg, xl, xxl } = props;\n\n\t// eslint-disable-next-line sort-keys\n\treturn { col, xs, sm, md, lg, xl, xxl };\n};\n\n/**\n * MrlCol React component.\n * @param props - component props\n * @returns a MrlCol React component.\n */\nexport function MrlCol(props: MrlCol): JSX.Element {\n\tconst { children, className = '', ...rest } = props;\n\tconst gridProps = getGridProps(props);\n\n\tconst columnClasses = React.useMemo(() => createSizeClasses(gridProps), [gridProps]);\n\tconst allClasses = classnames(className, columnClasses);\n\n\treturn (\n\t\t<div {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"names":["getBootstrapClass","size","type","val","concat","createSizeClasses","props","classes","_iterator","_createForOfIteratorHelper","GridSizes","_step","s","n","done","value","push","_typeof","_i","_Object$entries","Object","entries","length","_Object$entries$_i","_slicedToArray","key","undefined","err","e","f","getGridProps","col","xs","sm","md","lg","xl","xxl","MrlCol","children","_props$className","className","rest","_objectWithoutProperties","_excluded","gridProps","columnClasses","React","useMemo","allClasses","classnames","createElement","_extends"],"mappings":"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"}
+{"version":3,"file":"MrlCol.js","sources":["../../../../../src/components/grid/MrlCol/MrlCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../../layout/constants';\nimport { GridSizes, GridColumns } from '../constants';\n\ntype MrlCol = LayoutComponent & GridColumns;\n\nconst getBootstrapClass = (size: string, type: string, val: number | string): string =>\n\tsize === 'col' || size === 'xs' ? `${type}-${val}` : `${type}-${size}-${val}`;\n\n/**\n * Creates the size classes for the grid.\n * @param props - component props\n * @returns an array of size classes based on bootstrap grid API\n */\nconst createSizeClasses = (props: GridColumns): string[] => {\n\tconst classes: string[] = [];\n\n\tfor (const size of GridSizes) {\n\t\t// get the value based on the prop key from the component props\n\t\tconst value = props[size as keyof GridColumns];\n\n\t\t// create the size class based on the value using the bootstrap grid API\n\t\tif (value) {\n\t\t\t// if the value is a number, then it is a column size\n\t\t\tif (typeof value === 'number') {\n\t\t\t\tclasses.push(getBootstrapClass(size, 'col', value));\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// if the value is an object, then we need to compose multiple classes\n\t\t\t// based on the keyvalue pairings\n\t\t\tif (value !== null && typeof value === 'object') {\n\t\t\t\tfor (const [key, val] of Object.entries(value)) {\n\t\t\t\t\tif (val === 0 || val === undefined) continue;\n\t\t\t\t\tclasses.push(getBootstrapClass(size, key, val as number));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tif (classes.length === 0) classes.push('col');\n\n\treturn classes;\n};\n\n/**\n * Gets the grid size props from the component props.\n * @param props  - component props\n * @returns object of grid size props\n */\nconst getGridProps = (props: MrlCol): GridColumns => {\n\tconst { col, xs, sm, md, lg, xl, xxl } = props;\n\n\t// eslint-disable-next-line sort-keys\n\treturn { col, xs, sm, md, lg, xl, xxl };\n};\n\n/**\n * MrlCol React component.\n * @param props - component props\n * @returns a MrlCol React component.\n */\nexport function MrlCol(props: MrlCol): JSX.Element {\n\tconst { children, className = '', ...rest } = props;\n\tconst gridProps = getGridProps(props);\n\n\tconst columnClasses = React.useMemo(() => createSizeClasses(gridProps), [gridProps]);\n\tconst allClasses = classnames(className, columnClasses);\n\n\treturn (\n\t\t<div {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"names":["getBootstrapClass","size","type","val","concat","createSizeClasses","props","classes","GridSizes","value","push","_ref3","Object","entries","_ref2","_slicedToArray","key","undefined","length","getGridProps","col","xs","sm","md","lg","xl","xxl","MrlCol","children","_props$className","className","rest","_objectWithoutProperties","_excluded","gridProps","columnClasses","React","useMemo","allClasses","classnames","createElement","_extends"],"mappings":"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"}

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

@@ -4,7 +4,10 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var React = require('react');
 var classnames = require('classnames');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -21,7 +24,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["children", "className"];
 
@@ -35,7 +39,7 @@ function MrlGrid(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var allClasses = classnames('container', className);
+  var allClasses = classnames__default.default('container', className);
   return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: allClasses
   }), children);

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

@@ -1 +1 @@
-{"version":3,"file":"MrlGrid.js","sources":["../../../../../src/components/grid/MrlGrid/MrlGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../../layout/constants';\nimport '../grid.variables.scss';\nimport '../grid.global.scss';\n\n/**\n * MrlCol React component.\n * @param props - component props\n * @returns a MrlCol React component.\n */\nexport function MrlGrid({ children, className = '', ...rest }: LayoutComponent): JSX.Element {\n\tconst allClasses = classnames('container', className);\n\n\treturn (\n\t\t<div {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"names":["MrlGrid","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","allClasses","classnames","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAAsE;AAAA,EAAA,IAAnEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAMC,UAAU,GAAGC,UAAU,CAAC,WAAW,EAAEL,SAAS,CAAC;AAErD,EAAA,oBACCM,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,KAASP,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEI;AAAW,GAAA,CAAA,EACnCN,QACG,CAAC;AAER;;;;"}
+{"version":3,"file":"MrlGrid.js","sources":["../../../../../src/components/grid/MrlGrid/MrlGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../../layout/constants';\nimport '../grid.variables.scss';\nimport '../grid.global.scss';\n\n/**\n * MrlCol React component.\n * @param props - component props\n * @returns a MrlCol React component.\n */\nexport function MrlGrid({ children, className = '', ...rest }: LayoutComponent): JSX.Element {\n\tconst allClasses = classnames('container', className);\n\n\treturn (\n\t\t<div {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"names":["MrlGrid","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","allClasses","classnames","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAAsE;AAAA,EAAA,IAAnEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAMC,UAAU,GAAGC,2BAAU,CAAC,WAAW,EAAEL,SAAS,CAAC;AAErD,EAAA,oBACCM,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,KAASP,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEI;AAAW,GAAA,CAAA,EACnCN,QACG,CAAC;AAER;;;;"}

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

@@ -4,7 +4,10 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var React = require('react');
 var classnames = require('classnames');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -21,7 +24,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["align", "children", "className", "justify"];
 /**
@@ -38,7 +42,7 @@ function MrlRow(_ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var alignClass = align ? "align-items-".concat(align) : '';
   var justifyClass = justify && "justify-content-".concat(justify);
-  var allClasses = classnames('row', className, alignClass, justifyClass);
+  var allClasses = classnames__default.default('row', className, alignClass, justifyClass);
   return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({
     className: allClasses
   }, rest), children);

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

@@ -1 +1 @@
-{"version":3,"file":"MrlRow.js","sources":["../../../../../src/components/grid/MrlRow/MrlRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../../layout/constants';\nimport { AlignOptions, GutterSizes, JustifyOptions } from '../constants';\n\ninterface MrlRow extends LayoutComponent {\n\t/**\n\t * Flex alignment of the children within the component.\n\t */\n\talign?: AlignOptions;\n\n\t/**\n\t * Gutter size for columns within the row\n\t */\n\tgutter?: GutterSizes;\n\n\t/**\n\t * Justify content of the children within the component.\n\t */\n\tjustify?: JustifyOptions;\n}\n\n/**\n * MrlRow React component.\n * @param props - component props\n * @returns a MrlRow React component.\n */\nexport function MrlRow({ align, children, className = '', justify, ...rest }: MrlRow): JSX.Element {\n\tconst alignClass = align ? `align-items-${align}` : '';\n\tconst justifyClass = justify && `justify-content-${justify}`;\n\n\tconst allClasses = classnames('row', className, alignClass, justifyClass);\n\n\treturn (\n\t\t<div className={allClasses} {...rest}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"names":["MrlRow","_ref","align","children","_ref$className","className","justify","rest","_objectWithoutProperties","_excluded","alignClass","concat","justifyClass","allClasses","classnames","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACA;AACO,SAASA,MAAMA,CAAAC,IAAA,EAA6E;AAAA,EAAA,IAA1EC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,cAAA,GAAAH,IAAA,CAAEI,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;IAAEE,OAAO,GAAAL,IAAA,CAAPK,OAAO;AAAKC,IAAAA,IAAI,GAAAC,iDAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA;EACzE,IAAMC,UAAU,GAAGR,KAAK,GAAA,cAAA,CAAAS,MAAA,CAAkBT,KAAK,IAAK,EAAE;AACtD,EAAA,IAAMU,YAAY,GAAGN,OAAO,uBAAAK,MAAA,CAAuBL,OAAO,CAAE;EAE5D,IAAMO,UAAU,GAAGC,UAAU,CAAC,KAAK,EAAET,SAAS,EAAEK,UAAU,EAAEE,YAAY,CAAC;AAEzE,EAAA,oBACCG,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,CAAA;AAAKZ,IAAAA,SAAS,EAAEQ;GAAW,EAAKN,IAAI,CAAA,EAClCJ,QACG,CAAC;AAER;;;;"}
+{"version":3,"file":"MrlRow.js","sources":["../../../../../src/components/grid/MrlRow/MrlRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../../layout/constants';\nimport { AlignOptions, GutterSizes, JustifyOptions } from '../constants';\n\ninterface MrlRow extends LayoutComponent {\n\t/**\n\t * Flex alignment of the children within the component.\n\t */\n\talign?: AlignOptions;\n\n\t/**\n\t * Gutter size for columns within the row\n\t */\n\tgutter?: GutterSizes;\n\n\t/**\n\t * Justify content of the children within the component.\n\t */\n\tjustify?: JustifyOptions;\n}\n\n/**\n * MrlRow React component.\n * @param props - component props\n * @returns a MrlRow React component.\n */\nexport function MrlRow({ align, children, className = '', justify, ...rest }: MrlRow): JSX.Element {\n\tconst alignClass = align ? `align-items-${align}` : '';\n\tconst justifyClass = justify && `justify-content-${justify}`;\n\n\tconst allClasses = classnames('row', className, alignClass, justifyClass);\n\n\treturn (\n\t\t<div className={allClasses} {...rest}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"names":["MrlRow","_ref","align","children","_ref$className","className","justify","rest","_objectWithoutProperties","_excluded","alignClass","concat","justifyClass","allClasses","classnames","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACA;AACO,SAASA,MAAMA,CAAAC,IAAA,EAA6E;AAAA,EAAA,IAA1EC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,cAAA,GAAAH,IAAA,CAAEI,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;IAAEE,OAAO,GAAAL,IAAA,CAAPK,OAAO;AAAKC,IAAAA,IAAI,GAAAC,iDAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA;EACzE,IAAMC,UAAU,GAAGR,KAAK,GAAA,cAAA,CAAAS,MAAA,CAAkBT,KAAK,IAAK,EAAE;AACtD,EAAA,IAAMU,YAAY,GAAGN,OAAO,uBAAAK,MAAA,CAAuBL,OAAO,CAAE;EAE5D,IAAMO,UAAU,GAAGC,2BAAU,CAAC,KAAK,EAAET,SAAS,EAAEK,UAAU,EAAEE,YAAY,CAAC;AAEzE,EAAA,oBACCG,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,CAAA;AAAKZ,IAAAA,SAAS,EAAEQ;GAAW,EAAKN,IAAI,CAAA,EAClCJ,QACG,CAAC;AAER;;;;"}

package/dist/cjs/components/keystroke/MrlKeystroke/MrlKeystroke.js

@@ -5,7 +5,10 @@ var React = require('react');
 var classnames = require('classnames');
 var MrlKeystroke_module = require('./MrlKeystroke.module.scss.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -22,7 +25,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["children", "className"];
 /**
@@ -38,7 +42,7 @@ function MrlKeystroke(_ref) {
   var children = _ref.children,
     className = _ref.className,
     remainingProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var keystrokeClasses = classnames(MrlKeystroke_module.default['MrlKeystroke'], 'MrlKeystroke', className);
+  var keystrokeClasses = classnames__default.default(MrlKeystroke_module.default['MrlKeystroke'], 'MrlKeystroke', className);
   return /*#__PURE__*/React__namespace.createElement("span", _rollupPluginBabelHelpers.extends({}, remainingProps, {
     className: keystrokeClasses
   }), children);

package/dist/cjs/components/keystroke/MrlKeystroke/MrlKeystroke.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlKeystroke.js","sources":["../../../../../src/components/keystroke/MrlKeystroke/MrlKeystroke.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlKeystroke.module.scss';\n\nexport interface MrlKeystrokeProps extends React.ComponentPropsWithoutRef<'span'> {\n\t/**\n\t * Children to be rendered within the component.\n\t */\n\tchildren: React.ReactNode;\n}\n\n/**\n * MrlKeystroke Component\n *\n * Displays keyboard shortcuts and keystroke combinations in a visually consistent format.\n * Useful for showing users available keyboard shortcuts in tooltips, menus, help text, or command palettes.\n *\n * @param props - component props\n * @returns a MrlKeystroke React component\n */\nexport function MrlKeystroke({ children, className, ...remainingProps }: MrlKeystrokeProps) {\n\tconst keystrokeClasses = classnames(styles['MrlKeystroke'], 'MrlKeystroke', className);\n\treturn (\n\t\t<span {...remainingProps} className={keystrokeClasses}>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"names":["MrlKeystroke","_ref","children","className","remainingProps","_objectWithoutProperties","_excluded","keystrokeClasses","classnames","styles","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAYA,CAAAC,IAAA,EAAgE;AAAA,EAAA,IAA7DC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;AAAKC,IAAAA,cAAc,GAAAC,iDAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA;AACpE,EAAA,IAAMC,gBAAgB,GAAGC,UAAU,CAACC,2BAAM,CAAC,cAAc,CAAC,EAAE,cAAc,EAAEN,SAAS,CAAC;AACtF,EAAA,oBACCO,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAAC,iCAAA,KAAUR,cAAc,EAAA;AAAED,IAAAA,SAAS,EAAEI;AAAiB,GAAA,CAAA,EACpDL,QACI,CAAC;AAET;;;;"}
+{"version":3,"file":"MrlKeystroke.js","sources":["../../../../../src/components/keystroke/MrlKeystroke/MrlKeystroke.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlKeystroke.module.scss';\n\nexport interface MrlKeystrokeProps extends React.ComponentPropsWithoutRef<'span'> {\n\t/**\n\t * Children to be rendered within the component.\n\t */\n\tchildren: React.ReactNode;\n}\n\n/**\n * MrlKeystroke Component\n *\n * Displays keyboard shortcuts and keystroke combinations in a visually consistent format.\n * Useful for showing users available keyboard shortcuts in tooltips, menus, help text, or command palettes.\n *\n * @param props - component props\n * @returns a MrlKeystroke React component\n */\nexport function MrlKeystroke({ children, className, ...remainingProps }: MrlKeystrokeProps) {\n\tconst keystrokeClasses = classnames(styles['MrlKeystroke'], 'MrlKeystroke', className);\n\treturn (\n\t\t<span {...remainingProps} className={keystrokeClasses}>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"names":["MrlKeystroke","_ref","children","className","remainingProps","_objectWithoutProperties","_excluded","keystrokeClasses","classnames","styles","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAYA,CAAAC,IAAA,EAAgE;AAAA,EAAA,IAA7DC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;AAAKC,IAAAA,cAAc,GAAAC,iDAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA;AACpE,EAAA,IAAMC,gBAAgB,GAAGC,2BAAU,CAACC,2BAAM,CAAC,cAAc,CAAC,EAAE,cAAc,EAAEN,SAAS,CAAC;AACtF,EAAA,oBACCO,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAAC,iCAAA,KAAUR,cAAc,EAAA;AAAED,IAAAA,SAAS,EAAEI;AAAiB,GAAA,CAAA,EACpDL,QACI,CAAC;AAET;;;;"}

package/dist/cjs/components/keystroke/MrlKeystrokes/MrlKeystrokes.js

@@ -5,7 +5,10 @@ var React = require('react');
 var classnames = require('classnames');
 var MrlKeystrokes_module = require('./MrlKeystrokes.module.scss.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -22,7 +25,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["children", "className"];
 /**
@@ -38,7 +42,7 @@ function MrlKeystrokes(_ref) {
   var children = _ref.children,
     className = _ref.className,
     remainingProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var keystrokesClasses = classnames(MrlKeystrokes_module.default['MrlKeystrokes'], 'MrlKeystrokes', className);
+  var keystrokesClasses = classnames__default.default(MrlKeystrokes_module.default['MrlKeystrokes'], 'MrlKeystrokes', className);
   return /*#__PURE__*/React__namespace.createElement("span", _rollupPluginBabelHelpers.extends({}, remainingProps, {
     className: keystrokesClasses
   }), children);

package/dist/cjs/components/keystroke/MrlKeystrokes/MrlKeystrokes.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlKeystrokes.js","sources":["../../../../../src/components/keystroke/MrlKeystrokes/MrlKeystrokes.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlKeystrokes.module.scss';\n\nexport interface MrlKeystrokesProps extends React.ComponentPropsWithoutRef<'span'> {\n\t/**\n\t * Children to be rendered within the component.\n\t */\n\tchildren: React.ReactNode;\n}\n\n/**\n * MrlKeystrokes Component\n *\n * Wraps a group of MrlKeystroke components together with proper spacing.\n * Useful for displaying keyboard shortcut combinations.\n *\n * @param props - component props\n * @returns a MrlKeystrokes React component\n */\nexport function MrlKeystrokes({ children, className, ...remainingProps }: MrlKeystrokesProps) {\n\tconst keystrokesClasses = classnames(styles['MrlKeystrokes'], 'MrlKeystrokes', className);\n\treturn (\n\t\t<span {...remainingProps} className={keystrokesClasses}>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"names":["MrlKeystrokes","_ref","children","className","remainingProps","_objectWithoutProperties","_excluded","keystrokesClasses","classnames","styles","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAaA,CAAAC,IAAA,EAAiE;AAAA,EAAA,IAA9DC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;AAAKC,IAAAA,cAAc,GAAAC,iDAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA;AACrE,EAAA,IAAMC,iBAAiB,GAAGC,UAAU,CAACC,4BAAM,CAAC,eAAe,CAAC,EAAE,eAAe,EAAEN,SAAS,CAAC;AACzF,EAAA,oBACCO,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAAC,iCAAA,KAAUR,cAAc,EAAA;AAAED,IAAAA,SAAS,EAAEI;AAAkB,GAAA,CAAA,EACrDL,QACI,CAAC;AAET;;;;"}
+{"version":3,"file":"MrlKeystrokes.js","sources":["../../../../../src/components/keystroke/MrlKeystrokes/MrlKeystrokes.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlKeystrokes.module.scss';\n\nexport interface MrlKeystrokesProps extends React.ComponentPropsWithoutRef<'span'> {\n\t/**\n\t * Children to be rendered within the component.\n\t */\n\tchildren: React.ReactNode;\n}\n\n/**\n * MrlKeystrokes Component\n *\n * Wraps a group of MrlKeystroke components together with proper spacing.\n * Useful for displaying keyboard shortcut combinations.\n *\n * @param props - component props\n * @returns a MrlKeystrokes React component\n */\nexport function MrlKeystrokes({ children, className, ...remainingProps }: MrlKeystrokesProps) {\n\tconst keystrokesClasses = classnames(styles['MrlKeystrokes'], 'MrlKeystrokes', className);\n\treturn (\n\t\t<span {...remainingProps} className={keystrokesClasses}>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"names":["MrlKeystrokes","_ref","children","className","remainingProps","_objectWithoutProperties","_excluded","keystrokesClasses","classnames","styles","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAaA,CAAAC,IAAA,EAAiE;AAAA,EAAA,IAA9DC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;AAAKC,IAAAA,cAAc,GAAAC,iDAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA;AACrE,EAAA,IAAMC,iBAAiB,GAAGC,2BAAU,CAACC,4BAAM,CAAC,eAAe,CAAC,EAAE,eAAe,EAAEN,SAAS,CAAC;AACzF,EAAA,oBACCO,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAAC,iCAAA,KAAUR,cAAc,EAAA;AAAED,IAAAA,SAAS,EAAEI;AAAkB,GAAA,CAAA,EACrDL,QACI,CAAC;AAET;;;;"}

package/dist/cjs/components/layout/MrlMain/MrlMain.js

@@ -6,7 +6,10 @@ var classnames = require('classnames');
 var LayoutContext = require('../context/LayoutContext.js');
 var MrlMain_module = require('./MrlMain.module.scss.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -23,7 +26,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["children", "className"];
 
@@ -39,7 +43,9 @@ function MrlMain(_ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useLayoutContext = LayoutContext.useLayoutContext(),
     isTopbarRendered = _useLayoutContext.isTopbarRendered;
-  var allClasses = classnames(MrlMain_module.default['MrlMain'], 'mrl-main', className, _rollupPluginBabelHelpers.defineProperty({}, MrlMain_module.default['MrlMain--noTopbar'], !isTopbarRendered));
+  var allClasses = classnames__default.default(MrlMain_module.default['MrlMain'], 'mrl-main', className, {
+    [MrlMain_module.default['MrlMain--noTopbar']]: !isTopbarRendered
+  });
   return /*#__PURE__*/React__namespace.createElement("main", _rollupPluginBabelHelpers.extends({}, rest, {
     className: allClasses
   }), children);

package/dist/cjs/components/layout/MrlMain/MrlMain.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlMain.js","sources":["../../../../../src/components/layout/MrlMain/MrlMain.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../constants';\nimport { useLayoutContext } from '../context/LayoutContext';\n\nimport styles from './MrlMain.module.scss';\n\n/**\n * MrlMain React component.\n * @param props - component props\n * @returns a MrlMain React component.\n */\nexport function MrlMain({ children, className = '', ...rest }: LayoutComponent): JSX.Element {\n\tconst { isTopbarRendered } = useLayoutContext();\n\tconst allClasses = classnames(styles['MrlMain'], 'mrl-main', className, {\n\t\t[styles['MrlMain--noTopbar']]: !isTopbarRendered\n\t});\n\n\treturn (\n\t\t<main {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</main>\n\t);\n}\n"],"names":["MrlMain","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","_useLayoutContext","useLayoutContext","isTopbarRendered","allClasses","classnames","styles","_defineProperty","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAAsE;AAAA,EAAA,IAAnEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAAC,iBAAA,GAA6BC,8BAAgB,EAAE;IAAvCC,gBAAgB,GAAAF,iBAAA,CAAhBE,gBAAgB;EACxB,IAAMC,UAAU,GAAGC,UAAU,CAACC,sBAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAET,SAAS,EAAAU,wCAAA,CAAA,EAAA,EACpED,sBAAM,CAAC,mBAAmB,CAAC,EAAG,CAACH,gBAAgB,CAChD,CAAC;AAEF,EAAA,oBACCK,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAAC,iCAAA,KAAUZ,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEO;AAAW,GAAA,CAAA,EACpCT,QACI,CAAC;AAET;;;;"}
+{"version":3,"file":"MrlMain.js","sources":["../../../../../src/components/layout/MrlMain/MrlMain.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../constants';\nimport { useLayoutContext } from '../context/LayoutContext';\n\nimport styles from './MrlMain.module.scss';\n\n/**\n * MrlMain React component.\n * @param props - component props\n * @returns a MrlMain React component.\n */\nexport function MrlMain({ children, className = '', ...rest }: LayoutComponent): JSX.Element {\n\tconst { isTopbarRendered } = useLayoutContext();\n\tconst allClasses = classnames(styles['MrlMain'], 'mrl-main', className, {\n\t\t[styles['MrlMain--noTopbar']]: !isTopbarRendered\n\t});\n\n\treturn (\n\t\t<main {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</main>\n\t);\n}\n"],"names":["MrlMain","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","_useLayoutContext","useLayoutContext","isTopbarRendered","allClasses","classnames","styles","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAAsE;AAAA,EAAA,IAAnEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAAC,iBAAA,GAA6BC,8BAAgB,EAAE;IAAvCC,gBAAgB,GAAAF,iBAAA,CAAhBE,gBAAgB;AACxB,EAAA,IAAMC,UAAU,GAAGC,2BAAU,CAACC,sBAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAET,SAAS,EAAE;AACvE,IAAA,CAACS,sBAAM,CAAC,mBAAmB,CAAC,GAAG,CAACH;AACjC,GAAC,CAAC;AAEF,EAAA,oBACCI,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAAC,iCAAA,KAAUX,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEO;AAAW,GAAA,CAAA,EACpCT,QACI,CAAC;AAET;;;;"}

package/dist/cjs/components/layout/MrlPage/MrlPage.js

@@ -6,7 +6,10 @@ var classnames = require('classnames');
 var LayoutContext = require('../context/LayoutContext.js');
 var MrlPage_module = require('./MrlPage.module.scss.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -23,7 +26,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["children", "className"];
 /**
@@ -38,7 +42,9 @@ function MrlPage(_ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useLayoutContext = LayoutContext.useLayoutContext(),
     isTopbarRendered = _useLayoutContext.isTopbarRendered;
-  var allClasses = classnames(MrlPage_module.default['MrlPage'], 'mrl-page', className, _rollupPluginBabelHelpers.defineProperty({}, MrlPage_module.default['MrlPage--no-topbar'], !isTopbarRendered));
+  var allClasses = classnames__default.default(MrlPage_module.default['MrlPage'], 'mrl-page', className, {
+    [MrlPage_module.default['MrlPage--no-topbar']]: !isTopbarRendered
+  });
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: allClasses
   }), children));

package/dist/cjs/components/layout/MrlPage/MrlPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlPage.js","sources":["../../../../../src/components/layout/MrlPage/MrlPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { useLayoutContext } from '../context/LayoutContext';\nimport { LayoutComponent } from '../constants';\n\nimport styles from './MrlPage.module.scss';\n\ntype MrlPage = LayoutComponent;\n\n/**\n * MrlPage React component.\n * @param props - component props\n * @returns a MrlPage React component.\n */\nexport function MrlPage({ children, className = '', ...rest }: MrlPage): JSX.Element {\n\tconst { isTopbarRendered } = useLayoutContext();\n\n\tconst allClasses = classnames(styles['MrlPage'], 'mrl-page', className, {\n\t\t[styles['MrlPage--no-topbar']]: !isTopbarRendered\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<div {...rest} className={allClasses}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"names":["MrlPage","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","_useLayoutContext","useLayoutContext","isTopbarRendered","allClasses","classnames","styles","_defineProperty","React","createElement","Fragment","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAA8D;AAAA,EAAA,IAA3DC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAAC,iBAAA,GAA6BC,8BAAgB,EAAE;IAAvCC,gBAAgB,GAAAF,iBAAA,CAAhBE,gBAAgB;EAExB,IAAMC,UAAU,GAAGC,UAAU,CAACC,sBAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAET,SAAS,EAAAU,wCAAA,CAAA,EAAA,EACpED,sBAAM,CAAC,oBAAoB,CAAC,EAAG,CAACH,gBAAgB,CACjD,CAAC;AAEF,EAAA,oBACCK,gBAAA,CAAAC,aAAA,CAAAD,gBAAA,CAAAE,QAAA,EAAA,IAAA,eACCF,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAE,iCAAA,KAASb,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEO;GAAW,CAAA,EACnCT,QACG,CACJ,CAAC;AAEL;;;;"}
+{"version":3,"file":"MrlPage.js","sources":["../../../../../src/components/layout/MrlPage/MrlPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { useLayoutContext } from '../context/LayoutContext';\nimport { LayoutComponent } from '../constants';\n\nimport styles from './MrlPage.module.scss';\n\ntype MrlPage = LayoutComponent;\n\n/**\n * MrlPage React component.\n * @param props - component props\n * @returns a MrlPage React component.\n */\nexport function MrlPage({ children, className = '', ...rest }: MrlPage): JSX.Element {\n\tconst { isTopbarRendered } = useLayoutContext();\n\n\tconst allClasses = classnames(styles['MrlPage'], 'mrl-page', className, {\n\t\t[styles['MrlPage--no-topbar']]: !isTopbarRendered\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<div {...rest} className={allClasses}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"names":["MrlPage","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","_useLayoutContext","useLayoutContext","isTopbarRendered","allClasses","classnames","styles","React","createElement","Fragment","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAA8D;AAAA,EAAA,IAA3DC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAAC,iBAAA,GAA6BC,8BAAgB,EAAE;IAAvCC,gBAAgB,GAAAF,iBAAA,CAAhBE,gBAAgB;AAExB,EAAA,IAAMC,UAAU,GAAGC,2BAAU,CAACC,sBAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAET,SAAS,EAAE;AACvE,IAAA,CAACS,sBAAM,CAAC,oBAAoB,CAAC,GAAG,CAACH;AAClC,GAAC,CAAC;AAEF,EAAA,oBACCI,gBAAA,CAAAC,aAAA,CAAAD,gBAAA,CAAAE,QAAA,EAAA,IAAA,eACCF,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAE,iCAAA,KAASZ,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEO;GAAW,CAAA,EACnCT,QACG,CACJ,CAAC;AAEL;;;;"}

package/dist/cjs/components/layout/MrlPage/index.js

@@ -5,7 +5,8 @@ var React = require('react');
 var LayoutContext = require('../context/LayoutContext.js');
 var MrlPage$1 = require('./MrlPage.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -22,7 +23,7 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /**
  * MrlPage Provider

package/dist/cjs/components/layout/MrlPage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/layout/MrlPage/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LayoutComponent } from '../constants';\nimport { LayoutProvider } from '../context/LayoutContext';\nimport { MrlPage as Page } from './MrlPage';\ntype MrlPage = LayoutComponent;\n\n/**\n * MrlPage Provider\n *\n * @param props - component props\n * @returns a MrlPage React component.\n */\nexport function MrlPage({ ...rest }: MrlPage): JSX.Element {\n\treturn (\n\t\t<LayoutProvider>\n\t\t\t<Page {...rest} />\n\t\t</LayoutProvider>\n\t);\n}\n"],"names":["MrlPage","_ref","rest","_extends","_objectDestructuringEmpty","React","createElement","LayoutProvider","Page"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAAoC;EAAA,IAA9BC,IAAI,GAAAC,iCAAA,CAAA,EAAA,GAAAC,kDAAA,CAAAH,IAAA,GAAAA,IAAA,EAAA;AAChC,EAAA,oBACCI,gBAAA,CAAAC,aAAA,CAACC,4BAAc,EAAA,IAAA,eACdF,gBAAA,CAAAC,aAAA,CAACE,iBAAI,EAAKN,IAAO,CACF,CAAC;AAEnB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/layout/MrlPage/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LayoutComponent } from '../constants';\nimport { LayoutProvider } from '../context/LayoutContext';\nimport { MrlPage as Page } from './MrlPage';\ntype MrlPage = LayoutComponent;\n\n/**\n * MrlPage Provider\n *\n * @param props - component props\n * @returns a MrlPage React component.\n */\nexport function MrlPage({ ...rest }: MrlPage): JSX.Element {\n\treturn (\n\t\t<LayoutProvider>\n\t\t\t<Page {...rest} />\n\t\t</LayoutProvider>\n\t);\n}\n"],"names":["MrlPage","_ref","rest","_extends","_objectDestructuringEmpty","React","createElement","LayoutProvider","Page"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAAoC;EAAA,IAA9BC,IAAI,GAAAC,iCAAA,CAAA,EAAA,GAAAC,kDAAA,CAAAH,IAAA,GAAAA,IAAA,EAAA;AAChC,EAAA,oBACCI,gBAAA,CAAAC,aAAA,CAACC,4BAAc,EAAA,IAAA,eACdF,gBAAA,CAAAC,aAAA,CAACE,iBAAI,EAAKN,IAAO,CACF,CAAC;AAEnB;;;;"}

package/dist/cjs/components/layout/MrlSidebar/MrlSidebar.js

@@ -12,7 +12,10 @@ var MrlIconButton = require('../../button/MrlIconButton/MrlIconButton.js');
 var MrlFocusTrap = require('../../focus-trap/MrlFocusTrap/MrlFocusTrap.js');
 var MrlSvg = require('../../svg/MrlSvg/MrlSvg.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -29,7 +32,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["children", "className", "hookOpen", "hookClose"];
 /**
@@ -48,7 +52,7 @@ var MrlSidebar = /*#__PURE__*/React__namespace.forwardRef(function MrlSidebar(_r
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isExpanded = _React$useState2[0],
     setIsExpanded = _React$useState2[1];
-  var setExpandedAndNotify = React__namespace.useCallback(function (expanded, info) {
+  var setExpandedAndNotify = React__namespace.useCallback((expanded, info) => {
     if (expanded) {
       hookOpen === null || hookOpen === void 0 ? void 0 : hookOpen(info);
     } else {
@@ -58,19 +62,19 @@ var MrlSidebar = /*#__PURE__*/React__namespace.forwardRef(function MrlSidebar(_r
   }, [hookOpen, hookClose]);
   var _useLayoutContext = LayoutContext.useLayoutContext(),
     isTopbarRendered = _useLayoutContext.isTopbarRendered;
-  React__namespace.useImperativeHandle(ref, function () {
+  React__namespace.useImperativeHandle(ref, () => {
     return {
-      close: function close() {
+      close() {
         setExpandedAndNotify(false, {
           source: 'imperativeHandler'
         });
       },
-      open: function open() {
+      open() {
         setExpandedAndNotify(true, {
           source: 'imperativeHandler'
         });
       },
-      toggle: function toggle() {
+      toggle() {
         setExpandedAndNotify(!isExpanded, {
           source: 'imperativeHandler'
         });
@@ -86,11 +90,16 @@ var MrlSidebar = /*#__PURE__*/React__namespace.forwardRef(function MrlSidebar(_r
   // which is kind of confusing, because these values actually return true.
   // So, we need to negate them. Don't worry, it works.
   var shouldFocusTrap = !(renderMobile && isExpanded);
-  var offsetClass = classnames(isTopbarRendered && MrlSidebar_module.default['MrlSidebar--offset']);
-  var sidebarClasses = classnames(MrlSidebar_module.default['MrlSidebar'], 'MrlSidebar', className, offsetClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, MrlSidebar_module.default['MrlSidebar--mobile'], renderMobile), MrlSidebar_module.default['MrlSidebar--mobile--open'], renderMobile && isExpanded));
-  var overlayClasses = classnames(MrlSidebar_module.default['MrlSidebar-overlay'], 'MrlSidebar-overlay', renderMobile && isExpanded && MrlSidebar_module.default['MrlSidebar-overlay--visible'], offsetClass);
-  var sidebarContentClasses = classnames(MrlSidebar_module.default['MrlSidebar-content'], 'MrlSidebar-content', _rollupPluginBabelHelpers.defineProperty({}, MrlSidebar_module.default['MrlSidebar-content--visible'], isExpanded || !renderMobile));
-  var handleKeyUp = function handleKeyUp(e) {
+  var offsetClass = classnames__default.default(isTopbarRendered && MrlSidebar_module.default['MrlSidebar--offset']);
+  var sidebarClasses = classnames__default.default(MrlSidebar_module.default['MrlSidebar'], 'MrlSidebar', className, offsetClass, {
+    [MrlSidebar_module.default['MrlSidebar--mobile']]: renderMobile,
+    [MrlSidebar_module.default['MrlSidebar--mobile--open']]: renderMobile && isExpanded
+  });
+  var overlayClasses = classnames__default.default(MrlSidebar_module.default['MrlSidebar-overlay'], 'MrlSidebar-overlay', renderMobile && isExpanded && MrlSidebar_module.default['MrlSidebar-overlay--visible'], offsetClass);
+  var sidebarContentClasses = classnames__default.default(MrlSidebar_module.default['MrlSidebar-content'], 'MrlSidebar-content', {
+    [MrlSidebar_module.default['MrlSidebar-content--visible']]: isExpanded || !renderMobile
+  });
+  var handleKeyUp = e => {
     e.preventDefault();
     e.stopPropagation();
     if (e.key === 'Escape') {
@@ -101,7 +110,7 @@ var MrlSidebar = /*#__PURE__*/React__namespace.forwardRef(function MrlSidebar(_r
       (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
     }
   };
-  var handleClick = function handleClick(e) {
+  var handleClick = e => {
     e.preventDefault();
     setExpandedAndNotify(!isExpanded, {
       source: 'userInteraction'
@@ -110,7 +119,7 @@ var MrlSidebar = /*#__PURE__*/React__namespace.forwardRef(function MrlSidebar(_r
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null,
   // If the sidebar is rendered on mobile, we want to render the menu button and overlay.
   renderMobile && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MrlIconButton.MrlIconButton, {
-    wrapperClassName: classnames(MrlSidebar_module.default['MrlSidebar-menu-trigger'], MrlSidebar_module.default['MrlSidebar-menu']),
+    wrapperClassName: classnames__default.default(MrlSidebar_module.default['MrlSidebar-menu-trigger'], MrlSidebar_module.default['MrlSidebar-menu']),
     icon: /*#__PURE__*/React__namespace.createElement(MrlSvg.MrlSvg, {
       svg: dsIcons.menu
     }),
@@ -142,7 +151,10 @@ var MrlSidebar = /*#__PURE__*/React__namespace.forwardRef(function MrlSidebar(_r
     disabled: shouldFocusTrap,
     containerRef: sidebarRef
   }, isExpanded && /*#__PURE__*/React__namespace.createElement(MrlIconButton.MrlIconButton, {
-    wrapperClassName: classnames(MrlSidebar_module.default['MrlSidebar-menu-trigger'], MrlSidebar_module.default['MrlSidebar-menu'], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, MrlSidebar_module.default['MrlSidebar-menu-close'], isExpanded), 'MrlSidebar-menu-close', isExpanded)),
+    wrapperClassName: classnames__default.default(MrlSidebar_module.default['MrlSidebar-menu-trigger'], MrlSidebar_module.default['MrlSidebar-menu'], {
+      [MrlSidebar_module.default['MrlSidebar-menu-close']]: isExpanded,
+      'MrlSidebar-menu-close': isExpanded
+    }),
     icon: /*#__PURE__*/React__namespace.createElement(MrlSvg.MrlSvg, {
       svg: dsIcons.close
     }),