@sis-cc/dotstatsuite-visions 12.27.0 → 12.28.0

package/umd/@sis-cc/dotstatsuite-visions.js

@@ -1,5 +1,5 @@
 /*!
- * @sis-cc/dotstatsuite-visions v12.27.0 - https://visions-qa.siscc.org/#o
+ * @sis-cc/dotstatsuite-visions v12.28.0 - https://visions-qa.siscc.org/#o
  * MIT Licensed
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -1129,8 +1129,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _emotion_weak_memoize__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(52);
 /* harmony import */ var _isolated_hnrs_dist_emotion_react_isolated_hnrs_esm_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(145);
 /* harmony import */ var _emotion_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(32);
-/* harmony import */ var _emotion_serialize__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(37);
-/* harmony import */ var _emotion_use_insertion_effect_with_fallbacks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(36);
+/* harmony import */ var _emotion_serialize__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(34);
+/* harmony import */ var _emotion_use_insertion_effect_with_fallbacks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(37);
 
 
 
@@ -1348,8 +1348,8 @@ var Emotion$1 = Emotion;
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _emotion_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(32);
-/* harmony import */ var _emotion_use_insertion_effect_with_fallbacks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(36);
-/* harmony import */ var _emotion_serialize__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(37);
+/* harmony import */ var _emotion_use_insertion_effect_with_fallbacks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(37);
+/* harmony import */ var _emotion_serialize__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(34);
 /* harmony import */ var _emotion_cache__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(85);
 /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(53);
 /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_6__);
@@ -1664,7 +1664,7 @@ var ClassNames = /* #__PURE__ */Object(_emotion_element_d59e098f_esm_js__WEBPACK
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return resolveBreakpointValues; });
 /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _mui_utils_deepmerge__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(73);
-/* harmony import */ var _merge__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(34);
+/* harmony import */ var _merge__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(36);
 
 
 
@@ -2165,42 +2165,6 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
 
 /***/ }),
 /* 33 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-"use client";
-
-var _interopRequireDefault = __webpack_require__(16);
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _createSvgIcon = _interopRequireDefault(__webpack_require__(17));
-var _jsxRuntime = __webpack_require__(3);
-var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), 'Close');
-
-/***/ }),
-/* 34 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _mui_utils_deepmerge__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(73);
-
-function merge(acc, item) {
-  if (!item) {
-    return acc;
-  }
-  return Object(_mui_utils_deepmerge__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])(acc, item, {
-    clone: false // No need to clone deep, it's way faster.
-  });
-}
-/* harmony default export */ __webpack_exports__["a"] = (merge);
-
-/***/ }),
-/* 35 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2213,10 +2177,10 @@ var esm_extends = __webpack_require__(2);
 var emotion_element_d59e098f_esm = __webpack_require__(22);
 
 // EXTERNAL MODULE: ./node_modules/@emotion/serialize/dist/emotion-serialize.esm.js + 2 modules
-var emotion_serialize_esm = __webpack_require__(37);
+var emotion_serialize_esm = __webpack_require__(34);
 
 // EXTERNAL MODULE: ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.esm.js
-var emotion_use_insertion_effect_with_fallbacks_esm = __webpack_require__(36);
+var emotion_use_insertion_effect_with_fallbacks_esm = __webpack_require__(37);
 
 // EXTERNAL MODULE: ./node_modules/@emotion/utils/dist/emotion-utils.esm.js
 var emotion_utils_esm = __webpack_require__(32);
@@ -2480,22 +2444,46 @@ var jsx_runtime = __webpack_require__(3);
 // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 
-let StyledEngineProvider_cache;
-if (typeof document === 'object') {
-  StyledEngineProvider_cache = Object(emotion_cache_esm["a" /* default */])({
+function getCache(injectFirst, enableCssLayer) {
+  const emotionCache = Object(emotion_cache_esm["a" /* default */])({
     key: 'css',
-    prepend: true
+    prepend: injectFirst
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+        // avoid nested @layer
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }
+const cacheMap = new Map();
 function StyledEngineProvider(props) {
   const {
     injectFirst,
+    enableCssLayer,
     children
   } = props;
-  return injectFirst && StyledEngineProvider_cache ? /*#__PURE__*/Object(jsx_runtime["jsx"])(emotion_element_d59e098f_esm["a" /* C */], {
-    value: StyledEngineProvider_cache,
-    children: children
-  }) : children;
+  const cache = react["useMemo"](() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (typeof document === 'object' && cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
+  if (injectFirst || enableCssLayer) {
+    return /*#__PURE__*/Object(jsx_runtime["jsx"])(emotion_element_d59e098f_esm["a" /* C */], {
+      value: cache,
+      children: children
+    });
+  }
+  return children;
 }
  false ? undefined : void 0;
 // CONCATENATED MODULE: ./node_modules/@mui/styled-engine/StyledEngineProvider/index.js
@@ -2512,13 +2500,14 @@ var GlobalStyles = __webpack_require__(146);
 // CONCATENATED MODULE: ./node_modules/@mui/styled-engine/index.js
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return styled_engine_styled; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "internal_processStyles", function() { return internal_processStyles; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "internal_serializeStyles", function() { return internal_serializeStyles; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "ThemeContext", function() { return emotion_react_esm["b" /* ThemeContext */]; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "keyframes", function() { return emotion_react_esm["d" /* keyframes */]; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "css", function() { return emotion_react_esm["c" /* css */]; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "StyledEngineProvider", function() { return StyledEngineProvider; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "GlobalStyles", function() { return GlobalStyles["a" /* default */]; });
 /**
- * @mui/styled-engine v5.16.14
+ * @mui/styled-engine v5.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2528,6 +2517,7 @@ var GlobalStyles = __webpack_require__(146);
 
 /* eslint-disable no-underscore-dangle */
 
+
 function styled_engine_styled(tag, options) {
   const stylesFactory = styled(tag, options);
   if (false) {}
@@ -2543,35 +2533,19 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-
-
-
-/***/ }),
-/* 36 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useInsertionEffectAlwaysWithSyncFallback; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return useInsertionEffectWithLayoutFallback; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-
-
-var isBrowser = typeof document !== 'undefined';
-
-var syncFallback = function syncFallback(create) {
-  return create();
-};
-
-var useInsertionEffect = react__WEBPACK_IMPORTED_MODULE_0__['useInsertion' + 'Effect'] ? react__WEBPACK_IMPORTED_MODULE_0__['useInsertion' + 'Effect'] : false;
-var useInsertionEffectAlwaysWithSyncFallback = !isBrowser ? syncFallback : useInsertionEffect || syncFallback;
-var useInsertionEffectWithLayoutFallback = useInsertionEffect || react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"];
+// Emotion only accepts an array, but we want to avoid allocations
+const wrapper = [];
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function internal_serializeStyles(styles) {
+  wrapper[0] = styles;
+  return Object(emotion_serialize_esm["a" /* serializeStyles */])(wrapper);
+}
 
 
 
 
 /***/ }),
-/* 37 */
+/* 34 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2930,6 +2904,66 @@ function serializeStyles(args, registered, mergedProps) {
 
 
 
+/***/ }),
+/* 35 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+"use client";
+
+var _interopRequireDefault = __webpack_require__(16);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createSvgIcon = _interopRequireDefault(__webpack_require__(17));
+var _jsxRuntime = __webpack_require__(3);
+var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), 'Close');
+
+/***/ }),
+/* 36 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _mui_utils_deepmerge__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(73);
+
+function merge(acc, item) {
+  if (!item) {
+    return acc;
+  }
+  return Object(_mui_utils_deepmerge__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])(acc, item, {
+    clone: false // No need to clone deep, it's way faster.
+  });
+}
+/* harmony default export */ __webpack_exports__["a"] = (merge);
+
+/***/ }),
+/* 37 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useInsertionEffectAlwaysWithSyncFallback; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return useInsertionEffectWithLayoutFallback; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+
+var isBrowser = typeof document !== 'undefined';
+
+var syncFallback = function syncFallback(create) {
+  return create();
+};
+
+var useInsertionEffect = react__WEBPACK_IMPORTED_MODULE_0__['useInsertion' + 'Effect'] ? react__WEBPACK_IMPORTED_MODULE_0__['useInsertion' + 'Effect'] : false;
+var useInsertionEffectAlwaysWithSyncFallback = !isBrowser ? syncFallback : useInsertionEffect || syncFallback;
+var useInsertionEffectWithLayoutFallback = useInsertionEffect || react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"];
+
+
+
+
 /***/ }),
 /* 38 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -3337,7 +3371,7 @@ function style(options) {
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return unstable_createStyleFunctionSx; });
 /* harmony import */ var _mui_utils_capitalize__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(144);
-/* harmony import */ var _merge__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(34);
+/* harmony import */ var _merge__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(36);
 /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(49);
 /* harmony import */ var _breakpoints__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24);
 /* harmony import */ var _defaultSxConfig__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(57);
@@ -3407,7 +3441,8 @@ function unstable_createStyleFunctionSx() {
     var _theme$unstable_sxCon;
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
@@ -3448,7 +3483,8 @@ function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
-                  theme
+                  theme,
+                  nested: true
                 });
               } else {
                 css = Object(_merge__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"])(css, breakpointsValues);
@@ -3459,6 +3495,11 @@ function unstable_createStyleFunctionSx() {
           }
         }
       });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          '@layer sx': Object(_breakpoints__WEBPACK_IMPORTED_MODULE_3__[/* removeUnusedBreakpoints */ "d"])(breakpointsKeys, css)
+        };
+      }
       return Object(_breakpoints__WEBPACK_IMPORTED_MODULE_3__[/* removeUnusedBreakpoints */ "d"])(breakpointsKeys, css);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
@@ -3580,7 +3621,7 @@ var spacing = __webpack_require__(58);
 var style = __webpack_require__(49);
 
 // EXTERNAL MODULE: ./node_modules/@mui/system/esm/merge.js
-var merge = __webpack_require__(34);
+var merge = __webpack_require__(36);
 
 // CONCATENATED MODULE: ./node_modules/@mui/system/esm/compose.js
 
@@ -4137,7 +4178,7 @@ var breakpoints = __webpack_require__(24);
 var style = __webpack_require__(49);
 
 // EXTERNAL MODULE: ./node_modules/@mui/system/esm/merge.js
-var merge = __webpack_require__(34);
+var merge = __webpack_require__(36);
 
 // CONCATENATED MODULE: ./node_modules/@mui/system/esm/memoize.js
 function memoize(fn) {
@@ -8814,7 +8855,7 @@ if (true) {
 /* 154 */
 /***/ (function(module) {
 
-module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"12.27.0","description":"Library of visual components","author":"OECD","homepage":"https://visions-qa.siscc.org/#o","license":"MIT","repository":"https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions","main":"lib/index.js","module":"es/index.js","engines":{"node":">=18"},"files":["css","es","lib","umd"],"scripts":{"peers":"install-peers --force-run","build":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo && node scripts/doc && cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-demo","build:dev":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged"},"dependencies":{"@hello-pangea/dnd":"^16.6.0","@react-hook/size":"^2.1.1","classnames":"^2.2.6","isemail":"^3.2.0","prop-types":"^15.7.2","ramda":"^0.27.0","react-draggable":"4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@emotion/react":"^11","@emotion/styled":"^11","@mui/icons-material":"^5","@mui/material":"^5","@mui/styles":"^5","date-fns":"^1.30.1","numeral":"^2.0.6","react":"^18","react-dom":"^18"},"devDependencies":{"@babel/eslint-parser":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@cfaester/enzyme-adapter-react-18":"^0.7.0","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","babel-jest":"^24.8.0","babel-preset-react-app":"^9.0.0","cross-env":"^7.0.3","dox":"^0.9.0","eslint":"^8.39.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^2.7.0","identity-obj-proxy":"^3.0.0","install-peers-cli":"^2.2.0","jest":"^24.8.0","jss":"^10.10.0","jss-rtl":"^0.2.3","lint-staged":"^8.2.1","mutationobserver-shim":"^0.3.7","nwb":"0.23.0","prettier":"^2.8.8","pretty-quick":"^3.1.3","react-a11y":"^1.1.0","react-helmet":"^5.2.1","react-scrollable-anchor":"^0.6.1","react-syntax-highlighter":"^10.2.1","sanitize-html":"2.7.0","webpack":"^5.68.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"jest":{"verbose":true,"coverageDirectory":"coverage","collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/ScopeList/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFilesAfterEnv":["<rootDir>/tests/setup.js"],"testMatch":["**/tests/**/*.{spec,test}.{js,jsx,ts,tsx}","!**/tests/ScopeList.test.js"],"testEnvironment":"jsdom","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"]},"babel":{"presets":["react-app"],"plugins":["@babel/plugin-syntax-dynamic-import"]},"eslintConfig":{"env":{"browser":true,"jest":true,"node":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"],"parser":"@babel/eslint-parser","parserOptions":{"babelOptions":{"presets":[["babel-preset-react-app",false],"babel-preset-react-app/test"]},"ecmaFeatures":{"experimentalObjectRestSpread":true,"jsx":true},"sourceType":"module"},"plugins":["prettier","react","import","react-hooks","jsx-a11y"],"rules":{"no-console":"warn","no-unused-vars":"error","react/display-name":"off","react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","no-use-before-define":"error"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,css}":["prettier --write","git add","yarn lint"]},"prettier":{"endOfLine":"lf","useTabs":false,"printWidth":100,"tabWidth":2,"singleQuote":true,"trailingComma":"all","bracketSameLine":false,"bracketSpacing":true,"parser":"babel","semi":true,"arrowParens":"avoid"}};
+module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"12.28.0","description":"Library of visual components","author":"OECD","homepage":"https://visions-qa.siscc.org/#o","license":"MIT","repository":"https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions","main":"lib/index.js","module":"es/index.js","engines":{"node":">=18"},"files":["css","es","lib","umd"],"scripts":{"peers":"install-peers --force-run","build":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo && node scripts/doc && cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-demo","build:dev":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged"},"dependencies":{"@hello-pangea/dnd":"^16.6.0","@react-hook/size":"^2.1.1","classnames":"^2.2.6","isemail":"^3.2.0","prop-types":"^15.7.2","ramda":"^0.27.0","react-draggable":"4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@emotion/react":"^11","@emotion/styled":"^11","@mui/icons-material":"^5","@mui/material":"^5","@mui/styles":"^5","date-fns":"^1.30.1","numeral":"^2.0.6","react":"^18","react-dom":"^18"},"devDependencies":{"@babel/eslint-parser":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@cfaester/enzyme-adapter-react-18":"^0.7.0","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","babel-jest":"^24.8.0","babel-preset-react-app":"^9.0.0","cross-env":"^7.0.3","dox":"^0.9.0","eslint":"^8.39.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^2.7.0","identity-obj-proxy":"^3.0.0","install-peers-cli":"^2.2.0","jest":"^24.8.0","jss":"^10.10.0","jss-rtl":"^0.2.3","lint-staged":"^8.2.1","mutationobserver-shim":"^0.3.7","nwb":"0.23.0","prettier":"^2.8.8","pretty-quick":"^3.1.3","react-a11y":"^1.1.0","react-helmet":"^5.2.1","react-scrollable-anchor":"^0.6.1","react-syntax-highlighter":"^10.2.1","sanitize-html":"2.7.0","webpack":"^5.68.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"jest":{"verbose":true,"coverageDirectory":"coverage","collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/ScopeList/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFilesAfterEnv":["<rootDir>/tests/setup.js"],"testMatch":["**/tests/**/*.{spec,test}.{js,jsx,ts,tsx}","!**/tests/ScopeList.test.js"],"testEnvironment":"jsdom","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"]},"babel":{"presets":["react-app"],"plugins":["@babel/plugin-syntax-dynamic-import"]},"eslintConfig":{"env":{"browser":true,"jest":true,"node":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"],"parser":"@babel/eslint-parser","parserOptions":{"babelOptions":{"presets":[["babel-preset-react-app",false],"babel-preset-react-app/test"]},"ecmaFeatures":{"experimentalObjectRestSpread":true,"jsx":true},"sourceType":"module"},"plugins":["prettier","react","import","react-hooks","jsx-a11y"],"rules":{"no-console":"warn","no-unused-vars":"error","react/display-name":"off","react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","no-use-before-define":"error"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,css}":["prettier --write","git add","yarn lint"]},"prettier":{"endOfLine":"lf","useTabs":false,"printWidth":100,"tabWidth":2,"singleQuote":true,"trailingComma":"all","bracketSameLine":false,"bracketSpacing":true,"parser":"babel","semi":true,"arrowParens":"avoid"}};
 
 /***/ }),
 /* 155 */
@@ -11379,7 +11420,7 @@ exports.shouldForwardProp = shouldForwardProp;
 exports.systemDefaultTheme = void 0;
 var _extends2 = _interopRequireDefault(__webpack_require__(53));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(156));
-var _styledEngine = _interopRequireWildcard(__webpack_require__(35));
+var _styledEngine = _interopRequireWildcard(__webpack_require__(33));
 var _deepmerge = __webpack_require__(21);
 var _capitalize = _interopRequireDefault(__webpack_require__(47));
 var _getDisplayName = _interopRequireDefault(__webpack_require__(220));
@@ -11408,6 +11449,13 @@ function isStringTag(tag) {
 function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
 const lowercaseFirstLetter = string => {
   if (!string) {
@@ -11428,7 +11476,7 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
+function processStyleArg(callableStyle, _ref, layerName) {
   let {
       ownerState
     } = _ref,
@@ -11439,7 +11487,7 @@ function processStyleArg(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -11464,14 +11512,15 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
+        const variantStyle = typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 function createStyled(input = {}) {
   const {
@@ -11502,6 +11551,7 @@ function createStyled(input = {}) {
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3);
+    const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -11533,13 +11583,16 @@ function createStyled(input = {}) {
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {
-        return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
-          theme: resolveTheme({
+        return props => {
+          const theme = resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
-          })
-        }));
+          });
+          return processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : undefined);
+        };
       }
       return stylesArg;
     };
@@ -11561,7 +11614,7 @@ function createStyled(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? 'theme' : undefined);
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -11578,7 +11631,7 @@ function createStyled(input = {}) {
             variants: themeVariants
           }, (0, _extends2.default)({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {
@@ -11732,7 +11785,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(__webpack_require__(0));
-var _styledEngine = __webpack_require__(35);
+var _styledEngine = __webpack_require__(33);
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function isObjectEmpty(obj) {
@@ -30895,7 +30948,7 @@ var InfoOutlined = __webpack_require__(225);
 var InfoOutlined_default = /*#__PURE__*/__webpack_require__.n(InfoOutlined);
 
 // EXTERNAL MODULE: ./node_modules/@mui/icons-material/Close.js
-var Close = __webpack_require__(33);
+var Close = __webpack_require__(35);
 var Close_default = /*#__PURE__*/__webpack_require__.n(Close);
 
 // EXTERNAL MODULE: ./node_modules/@mui/material/utils/useForkRef.js
@@ -36073,7 +36126,9 @@ const BreadcrumbCollapsed_excluded = ["slots", "slotProps"];
 
 
 
-const BreadcrumbCollapsedButton = Object(styled["a" /* default */])(material_ButtonBase_ButtonBase)(({
+const BreadcrumbCollapsedButton = Object(styled["a" /* default */])(material_ButtonBase_ButtonBase, {
+  name: 'MuiBreadcrumbCollapsed'
+})(({
   theme
 }) => Object(esm_extends["a" /* default */])({
   display: 'flex',
@@ -38429,6 +38484,9 @@ function formControlState({
 // EXTERNAL MODULE: ./node_modules/@mui/material/utils/useEnhancedEffect.js
 var utils_useEnhancedEffect = __webpack_require__(30);
 
+// EXTERNAL MODULE: ./node_modules/@mui/styled-engine/index.js + 6 modules
+var styled_engine = __webpack_require__(33);
+
 // EXTERNAL MODULE: ./node_modules/@mui/styled-engine/GlobalStyles/GlobalStyles.js
 var GlobalStyles = __webpack_require__(146);
 
@@ -38440,13 +38498,37 @@ var GlobalStyles = __webpack_require__(146);
 
 
 
+function wrapGlobalLayer(styles) {
+  const serialized = Object(styled_engine["internal_serializeStyles"])(styles);
+  if (styles !== serialized && serialized.styles) {
+    if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+      // If the styles are not already wrapped in a layer, wrap them in a global layer.
+      serialized.styles = `@layer global{${serialized.styles}}`;
+    }
+    return serialized;
+  }
+  return styles;
+}
 function GlobalStyles_GlobalStyles({
   styles,
   themeId,
   defaultTheme = {}
 }) {
   const upperTheme = esm_useTheme(defaultTheme);
-  const globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+  const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+  let globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
+  if (resolvedTheme.modularCssLayers) {
+    if (Array.isArray(globalStyles)) {
+      globalStyles = globalStyles.map(styleArg => {
+        if (typeof styleArg === 'function') {
+          return wrapGlobalLayer(styleArg(resolvedTheme));
+        }
+        return wrapGlobalLayer(styleArg);
+      });
+    } else {
+      globalStyles = wrapGlobalLayer(globalStyles);
+    }
+  }
   return /*#__PURE__*/Object(jsx_runtime["jsx"])(GlobalStyles["a" /* default */], {
     styles: globalStyles
   });
@@ -39404,6 +39486,7 @@ const NotchedOutline_excluded = ["children", "classes", "className", "label", "n
 
 
 const NotchedOutlineRoot = Object(styled["a" /* default */])('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: styles_rootShouldForwardProp["a" /* default */]
 })({
   textAlign: 'left',
@@ -39422,6 +39505,7 @@ const NotchedOutlineRoot = Object(styled["a" /* default */])('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = Object(styled["a" /* default */])('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: styles_rootShouldForwardProp["a" /* default */]
 })(({
   ownerState,
@@ -45307,7 +45391,9 @@ const SwitchBase_useUtilityClasses = ownerState => {
   };
   return Object(composeClasses["a" /* default */])(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = Object(styled["a" /* default */])(material_ButtonBase_ButtonBase)(({
+const SwitchBaseRoot = Object(styled["a" /* default */])(material_ButtonBase_ButtonBase, {
+  name: 'MuiSwitchBase'
+})(({
   ownerState
 }) => Object(esm_extends["a" /* default */])({
   padding: 9,
@@ -45318,6 +45404,7 @@ const SwitchBaseRoot = Object(styled["a" /* default */])(material_ButtonBase_But
   marginRight: ownerState.size === 'small' ? -3 : -12
 }));
 const SwitchBaseInput = Object(styled["a" /* default */])('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: styles_rootShouldForwardProp["a" /* default */]
 })({
   cursor: 'inherit',
@@ -45607,9 +45694,6 @@ const Checkbox_Checkbox = /*#__PURE__*/react["forwardRef"](function Checkbox(inP
 });
  false ? undefined : void 0;
 /* harmony default export */ var material_Checkbox_Checkbox = (Checkbox_Checkbox);
-// EXTERNAL MODULE: ./node_modules/@mui/styled-engine/index.js + 6 modules
-var styled_engine = __webpack_require__(35);
-
 // EXTERNAL MODULE: ./node_modules/@mui/system/esm/styleFunctionSx/styleFunctionSx.js
 var styleFunctionSx = __webpack_require__(50);
 
@@ -45643,6 +45727,13 @@ function isStringTag(tag) {
 function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 const createStyled_systemDefaultTheme = Object(createTheme["a" /* default */])();
 const lowercaseFirstLetter = string => {
   if (!string) {
@@ -45663,7 +45754,7 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
+function processStyleArg(callableStyle, _ref, layerName) {
   let {
       ownerState
     } = _ref,
@@ -45674,7 +45765,7 @@ function processStyleArg(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, Object(esm_extends["a" /* default */])({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -45699,14 +45790,15 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style(Object(esm_extends["a" /* default */])({
+        const variantStyle = typeof variant.style === 'function' ? variant.style(Object(esm_extends["a" /* default */])({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer(Object(styled_engine["internal_serializeStyles"])(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer(Object(styled_engine["internal_serializeStyles"])(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 function createStyled(input = {}) {
   const {
@@ -45737,6 +45829,7 @@ function createStyled(input = {}) {
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = Object(objectWithoutPropertiesLoose["a" /* default */])(inputOptions, createStyled_excluded3);
+    const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -45768,13 +45861,16 @@ function createStyled(input = {}) {
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || Object(deepmerge["b" /* isPlainObject */])(stylesArg)) {
-        return props => processStyleArg(stylesArg, Object(esm_extends["a" /* default */])({}, props, {
-          theme: resolveTheme({
+        return props => {
+          const theme = resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
-          })
-        }));
+          });
+          return processStyleArg(stylesArg, Object(esm_extends["a" /* default */])({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : undefined);
+        };
       }
       return stylesArg;
     };
@@ -45796,7 +45892,7 @@ function createStyled(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, Object(esm_extends["a" /* default */])({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? 'theme' : undefined);
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -45813,7 +45909,7 @@ function createStyled(input = {}) {
             variants: themeVariants
           }, Object(esm_extends["a" /* default */])({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {
@@ -54141,16 +54237,21 @@ const RadioGroup_RadioGroup = /*#__PURE__*/react["forwardRef"](function RadioGro
 
 
 const RadioButtonIconRoot = Object(styled["a" /* default */])('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: styles_rootShouldForwardProp["a" /* default */]
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = Object(styled["a" /* default */])(RadioButtonUnchecked)({
+const RadioButtonIconBackground = Object(styled["a" /* default */])(RadioButtonUnchecked, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = Object(styled["a" /* default */])(RadioButtonChecked)(({
+const RadioButtonIconDot = Object(styled["a" /* default */])(RadioButtonChecked, {
+  name: 'MuiRadioButtonIcon'
+})(({
   theme,
   ownerState
 }) => Object(esm_extends["a" /* default */])({
@@ -57108,6 +57209,7 @@ DataHeader_Title_Title.propTypes = {
 var TooltipHeader_TooltipHeader = function TooltipHeader(_ref) {
   var children = _ref.children,
       classes = _ref.classes,
+      HTMLRenderer = _ref.HTMLRenderer,
       _ref$content = _ref.content,
       content = _ref$content === undefined ? [] : _ref$content;
 
@@ -57125,7 +57227,7 @@ var TooltipHeader_TooltipHeader = function TooltipHeader(_ref) {
         'li',
         { key: label + '-' + index },
         react_default.a.createElement(DataHeader_Title, { header: header }),
-        label,
+        es_is(Function, HTMLRenderer) ? react_default.a.createElement(HTMLRenderer, { html: label }) : label,
         es_not(es_isEmpty(sub)) && react_default.a.createElement(
           'ul',
           { className: classes.subContent },
@@ -57134,7 +57236,7 @@ var TooltipHeader_TooltipHeader = function TooltipHeader(_ref) {
             return react_default.a.createElement(
               'li',
               { key: label + '-' + index },
-              label
+              es_is(Function, HTMLRenderer) ? react_default.a.createElement(HTMLRenderer, { html: label }) : label
             );
           }, sub)
         )
@@ -57171,7 +57273,8 @@ TooltipHeader_TooltipHeader.propTypes = {
     sub: prop_types_default.a.arrayOf(prop_types_default.a.shape({
       label: prop_types_default.a.string
     }))
-  }))
+  })),
+  HTMLRenderer: prop_types_default.a.func
 };
 
 /* harmony default export */ var DataHeader_TooltipHeader = (TooltipHeader_TooltipHeader);
@@ -57184,7 +57287,8 @@ TooltipHeader_TooltipHeader.propTypes = {
 
 var Flags_Flags = function Flags(_ref) {
   var classes = _ref.classes,
-      content = _ref.content;
+      content = _ref.content,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var codes = pipe(es_pluck('code'), es_filter(es_identity))(content);
   var hasCodes = !es_isEmpty(codes);
@@ -57194,7 +57298,7 @@ var Flags_Flags = function Flags(_ref) {
   })(codes);
   return react_default.a.createElement(
     TooltipHeader_TooltipHeader,
-    { classes: classes, content: content },
+    { classes: classes, content: content, HTMLRenderer: HTMLRenderer },
     react_default.a.createElement(
       'sup',
       { className: classes.svgWrapper },
@@ -57206,6 +57310,7 @@ var Flags_Flags = function Flags(_ref) {
 
 Flags_Flags.propTypes = {
   classes: prop_types_default.a.object,
+  HTMLRenderer: prop_types_default.a.func,
   content: prop_types_default.a.arrayOf(prop_types_default.a.shape({
     header: prop_types_default.a.string,
     label: prop_types_default.a.string,
@@ -57477,6 +57582,8 @@ var utils_getReducedContent = function getReducedContent(_ref) {
 // CONCATENATED MODULE: ./src/DataHeader/DataHeader.js
 var DataHeader_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+function DataHeader_objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 
 
 
@@ -57566,20 +57673,31 @@ var DataHeader_useStyles = makeStyles(function (theme) {
     }
   };
 });
+var DataHeader_BasicHTMLRenderer = function BasicHTMLRenderer(_ref) {
+  var html = _ref.html,
+      rest = DataHeader_objectWithoutProperties(_ref, ['html']);
 
-var DataHeader_DataHeader = function DataHeader(_ref) {
+  return react_default.a.createElement('span', DataHeader_extends({ dangerouslySetInnerHTML: { __html: html } }, rest));
+};
+
+DataHeader_BasicHTMLRenderer.propTypes = {
+  html: prop_types_default.a.string
+};
+var DataHeader_DataHeader = function DataHeader(_ref2) {
   var _cx;
 
-  var children = _ref.children,
-      title = _ref.title,
-      _ref$subtitle = _ref.subtitle,
-      subtitle = _ref$subtitle === undefined ? [] : _ref$subtitle,
-      combinations = _ref.combinations,
-      disclaimer = _ref.disclaimer,
-      sideProps = _ref.sideProps,
-      SideIcon = _ref.SideIcon,
-      _ref$isSticky = _ref.isSticky,
-      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
+  var children = _ref2.children,
+      title = _ref2.title,
+      _ref2$subtitle = _ref2.subtitle,
+      subtitle = _ref2$subtitle === undefined ? [] : _ref2$subtitle,
+      combinations = _ref2.combinations,
+      disclaimer = _ref2.disclaimer,
+      sideProps = _ref2.sideProps,
+      SideIcon = _ref2.SideIcon,
+      _ref2$isSticky = _ref2.isSticky,
+      isSticky = _ref2$isSticky === undefined ? false : _ref2$isSticky,
+      _ref2$HTMLRenderer = _ref2.HTMLRenderer,
+      HTMLRenderer = _ref2$HTMLRenderer === undefined ? DataHeader_BasicHTMLRenderer : _ref2$HTMLRenderer;
 
   var target = react_default.a.useRef(null);
 
@@ -57634,7 +57752,11 @@ var DataHeader_DataHeader = function DataHeader(_ref) {
           { className: classes.sideIconContainer },
           react_default.a.createElement(SideIcon, { sideProps: sideProps })
         ),
-        react_default.a.createElement(DataHeader_Flags, { classes: classes, content: es_propOr([], 'flags', title) })
+        react_default.a.createElement(DataHeader_Flags, {
+          classes: classes,
+          HTMLRenderer: HTMLRenderer,
+          content: es_propOr([], 'flags', title)
+        })
       ),
       isWidthUp(T4_BREAKPOINTS.xs3) && subtitle && es_not(es_isEmpty(subtitle)) && react_default.a.createElement(
         'div',
@@ -57655,7 +57777,11 @@ var DataHeader_DataHeader = function DataHeader(_ref) {
               { variant: 'inherit' },
               sub.label
             ),
-            es_not(es_isEmpty(es_propOr([], 'flags', sub))) && react_default.a.createElement(DataHeader_Flags, { classes: classes, content: es_prop('flags', sub) }),
+            es_not(es_isEmpty(es_propOr([], 'flags', sub))) && react_default.a.createElement(DataHeader_Flags, {
+              classes: classes,
+              HTMLRenderer: HTMLRenderer,
+              content: es_prop('flags', sub)
+            }),
             es_lt(index + 1, subtitleLength) && react_default.a.createElement(
               'svg',
               { width: '24', height: '8' },
@@ -57682,7 +57808,11 @@ var DataHeader_DataHeader = function DataHeader(_ref) {
               { variant: 'inherit' },
               comb.label
             ),
-            es_not(es_isEmpty(es_propOr([], 'flags', comb))) && react_default.a.createElement(DataHeader_Flags, { classes: classes, content: es_prop('flags', comb) }),
+            es_not(es_isEmpty(es_propOr([], 'flags', comb))) && react_default.a.createElement(DataHeader_Flags, {
+              classes: classes,
+              HTMLRenderer: HTMLRenderer,
+              content: es_prop('flags', comb)
+            }),
             es_lt(index + 1, combinationsLength) && react_default.a.createElement(
               'svg',
               { width: '24', height: '8' },
@@ -57706,7 +57836,7 @@ var DataHeader_DataHeader = function DataHeader(_ref) {
       { className: classes.children },
       es_not(es_isEmpty(reducedContent)) && react_default.a.createElement(
         DataHeader_TooltipHeader,
-        { classes: classes, content: reducedContent },
+        { classes: classes, content: reducedContent, HTMLRenderer: HTMLRenderer },
         react_default.a.createElement(Info_default.a, { className: classes.infoIcon })
       ),
       children
@@ -57744,7 +57874,8 @@ DataHeader_DataHeader.propTypes = {
   SideIcon: prop_types_default.a.func,
   disclaimer: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.element]),
   children: prop_types_default.a.node,
-  isSticky: prop_types_default.a.bool
+  isSticky: prop_types_default.a.bool,
+  HTMLRenderer: prop_types_default.a.func
 };
 
 /* harmony default export */ var src_DataHeader_DataHeader = (DataHeader_DataHeader);
@@ -58329,6 +58460,42 @@ var uniq =
 /*#__PURE__*/
 es_uniqBy(es_identity);
 /* harmony default export */ var es_uniq = (uniq);
+// CONCATENATED MODULE: ./node_modules/ramda/es/zipObj.js
+
+/**
+ * Creates a new object out of a list of keys and a list of values.
+ * Key/value pairing is truncated to the length of the shorter of the two lists.
+ * Note: `zipObj` is equivalent to `pipe(zip, fromPairs)`.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.3.0
+ * @category List
+ * @sig [String] -> [*] -> {String: *}
+ * @param {Array} keys The array that will be properties on the output object.
+ * @param {Array} values The list of values on the output object.
+ * @return {Object} The object made by pairing up same-indexed elements of `keys` and `values`.
+ * @example
+ *
+ *      R.zipObj(['a', 'b', 'c'], [1, 2, 3]); //=> {a: 1, b: 2, c: 3}
+ */
+
+var zipObj =
+/*#__PURE__*/
+_curry2(function zipObj(keys, values) {
+  var idx = 0;
+  var len = Math.min(keys.length, values.length);
+  var out = {};
+
+  while (idx < len) {
+    out[keys[idx]] = values[idx];
+    idx += 1;
+  }
+
+  return out;
+});
+
+/* harmony default export */ var es_zipObj = (zipObj);
 // CONCATENATED MODULE: ./node_modules/@mui/system/esm/createBox.js
 'use client';
 
@@ -60977,9 +61144,9 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = Object(react["useState"])({}),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
+  var _useState2 = Object(react["useState"])(null),
+      selectedId = _useState2[0],
+      setSelectedId = _useState2[1];
 
   var _useState3 = Object(react["useState"])({}),
       selection = _useState3[0],
@@ -61032,9 +61199,12 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
       rest = DynamicDrawer_objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'onClosePanel', 'isNarrow', 'labels', 'disableAccessor', 'isApplyHiddenNarrow', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children', 'styles']);
 
   var handleChange = function handleChange(e, item) {
-    setSelection(DynamicDrawer_extends({}, allSelection[item.id]));
+    var filterSelection = pipe(es_propOr([], item.id), function (arr) {
+      return es_zipObj(arr, arr);
+    })(allSelection);
+    setSelection(DynamicDrawer_extends({}, filterSelection));
     handleChangePanel(item.id, selection, allSelection);
-    setFilter(item);
+    setSelectedId(item.id);
     setOpen(true);
   };
   var handleSubmit = function handleSubmit() {
@@ -61042,17 +61212,24 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
     setOpen(false);
-    setFilter({});
+    setSelectedId(null);
     onClosePanel();
   };
   var handleClose = function handleClose() {
     setOpen(false);
     setAllSelection({});
     setSelection({});
-    setFilter({});
+    setSelectedId(null);
     onClosePanel();
   };
 
+  var filter = Object(react["useMemo"])(function () {
+    if (!selectedId) return {};
+    return es_find(function (item) {
+      return item.id === selectedId;
+    })(list);
+  }, [selectedId, list]);
+
   var isHidden = open && isNarrow;
   var isNotHiddenButton = (!es_isEmpty(allSelection) || !isApplyHiddenNarrow) && isNarrow;
   Object(react["useEffect"])(function () {
@@ -61117,7 +61294,7 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
           component: function component(props) {
             return DynamicDrawer_PaperComponent(DynamicDrawer_extends({
               label: labelRenderer(item),
-              selected: filter.id === item.id,
+              selected: selectedId === item.id,
               tag: es_isNil(item.tag) ? react_default.a.createElement(
                 Chip,
                 { items: item.values, tagValueLabel: tagValueLabel },
@@ -61177,8 +61354,8 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
         styles: styles
       },
       es_equals(filter.id, periodPanel) ? children : react_default.a.createElement(DynamicDrawer_AdvancedSelection, DynamicDrawer_extends({
-        id: filter.id,
-        items: filter.values,
+        id: selectedId,
+        items: filter.values || [],
         isOpen: open,
         labelRenderer: labelRenderer,
         disableAccessor: disableAccessor ? pipe(es_prop('isEnabled'), es_not) : undefined,