@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.1-alpha.1

package/.storybook/preview.js

@@ -1,14 +1,37 @@
 /** @type { import('@storybook/react').Preview } */
-// import '../src/local.scss'
-// import '@pareto-engineering/styles'
-// Same as
 import '@pareto-engineering/styles/dist/main.css'
 
 const preview = {
-  parameters:{
-    backgrounds:{
-      default:'light',
+  globalTypes: {
+    theme: {
+      description: 'Swap theme',
+      defaultValue: 'ui-light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: [
+          {
+            value: 'ui-light', icon: 'circlehollow', title: 'light',
+          },
+          {
+            value: 'ui-dark', icon: 'circle', title: 'dark',
+          },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.parameters.theme || context.globals.theme
+      return (
+        <div className={theme}>
+          <Story />
+        </div>
+      )
     },
+  ],
+  parameters:{
     actions :{ argTypesRegex: '^on[A-Z].*' },
     controls:{
       matchers:{
@@ -16,12 +39,6 @@ const preview = {
         date :/Date$/,
       },
     },
-    themes:[
-      {
-        name:'Light', class:'ui-light', color:'#EFEFEF', default:true,
-      },
-      { name: 'Dark', class: 'ui-dark', color: '#121212' },
-    ],
   },
 }
 

package/dist/cjs/a/AnimatedBlobs/AnimatedBlobs.js

@@ -7,9 +7,12 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && {}.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; }
+/* @pareto-engineering/generator-front 1.0.12 */
+
 // Local Definitions
 
 const baseClassName = _exports.default.base;
@@ -29,9 +32,6 @@ const AnimatedBlobs = _ref => {
     opacity
     // ...otherProps
   } = _ref;
-  (0, React.useInsertionEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -86,5 +86,4 @@ AnimatedBlobs.defaultProps = {
   width: '200px',
   opacity: '0.7'
 };
-var _default = AnimatedBlobs;
-exports.default = _default;
+var _default = exports.default = AnimatedBlobs;

package/dist/cjs/a/AnimatedGradient/AnimatedGradient.js

@@ -4,13 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _ = require("./..");
 var _webGIRenderer = require("./webGIRenderer");
+require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && {}.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; }
+/* @pareto-engineering/generator-front 1.0.12 */
+
 // Local Definitions
 
 const baseClassName = _exports.default.base;
@@ -24,17 +29,17 @@ const AnimatedGradient = _ref => {
     className: userClassName
     // ...otherProps
   } = _ref;
-  (0, React.useInsertionEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
+  const {
+    userTheme
+  } = (0, _.useApp)();
   const isClient = typeof window !== 'undefined';
-  (0, React.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     // Only initialize the Gradient if we're in the browser
     if (isClient) {
       const gradient = new _webGIRenderer.Gradient();
       gradient.initGradient('#gradient-canvas');
     }
-  }, []);
+  }, [userTheme]);
   return /*#__PURE__*/React.createElement("canvas", {
     id: "gradient-canvas",
     "data-transition-in": true,
@@ -42,7 +47,6 @@ const AnimatedGradient = _ref => {
     // {...otherProps}
   });
 };
-
 AnimatedGradient.propTypes = {
   /**
   * The HTML class names for this element
@@ -50,7 +54,6 @@ AnimatedGradient.propTypes = {
   className: _propTypes.default.string
 };
 AnimatedGradient.defaultProps = {
-  // primaryColor:'black',
+  // primaryColor:'heading',
 };
-var _default = AnimatedGradient;
-exports.default = _default;
+var _default = exports.default = AnimatedGradient;

package/dist/cjs/a/AnimatedGradient/styles.scss

@@ -3,10 +3,11 @@
 @use "@pareto-engineering/bem";
 
 .#{bem.$base}.animated-gradient {
-  --gradient-color-1: var(--background-mesh);
+  --gradient-color-1: var(--hard-background-mesh);
   --gradient-color-2: var(--soft-background-mesh);
   --gradient-color-3: var(--background-mesh);
   --gradient-color-4: var(--soft-background-mesh);
+  background-color: var(--background-mesh);
   height: 100%;
   left: 0;
   top: 0;

package/dist/cjs/a/AnimatedGradient/webGIRenderer.js

@@ -356,7 +356,6 @@ class Gradient {
                     window.addEventListener("scroll", this.handleScroll), window.addEventListener("mousedown", this.handleMouseDown), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("keydown", this.handleKeyDown), this.isIntersecting = !0, this.addIsLoadedClass(), this.play()
                 }) */);
   }
-
   disconnect() {
     this.scrollObserver && (window.removeEventListener('scroll', this.handleScroll), window.removeEventListener('mousedown', this.handleMouseDown), window.removeEventListener('mouseup', this.handleMouseUp), window.removeEventListener('keydown', this.handleKeyDown), this.scrollObserver.disconnect()), window.removeEventListener('resize', this.resize);
   }

package/dist/cjs/a/AppContext/Context.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var _default = /*#__PURE__*/React.createContext({});
-exports.default = _default;
+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 && {}.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; }
+var _default = exports.default = /*#__PURE__*/React.createContext({});

package/dist/cjs/a/AppContext/ContextProvider.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _Context = _interopRequireDefault(require("./Context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && {}.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; }
 /* @pareto-engineering/generator-front 0.2.3 */
 
 // Package-level Imports
@@ -39,7 +40,7 @@ const AppContextProvider = _ref => {
     // ...otherProps
   } = _ref;
   const theme = (0, _useTheme.default)(initialTheme);
-  const [state, dispatch] = (0, React.useReducer)(reducer, initialState);
+  const [state, dispatch] = (0, _react.useReducer)(reducer, initialState);
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
     value: {
       state,
@@ -83,5 +84,4 @@ AppContextProvider.propTypes = {
 AppContextProvider.defaultProps = {
   initialState: {}
 };
-var _default = AppContextProvider;
-exports.default = _default;
+var _default = exports.default = AppContextProvider;

package/dist/cjs/a/AppContext/useTheme.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _default = function _default(initialTheme) {
+var _default = exports.default = function _default(initialTheme) {
   let storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
   const isClient = typeof window === 'object';
   const [preferredTheme, setPreferredTheme] = (0, _react.useState)(initialTheme);
@@ -14,19 +14,15 @@ var _default = function _default(initialTheme) {
     const storage = window.localStorage;
     if (isClient) {
       const storedTheme = window.localStorage.getItem(storageKey);
-      // console.log(storedTheme, storedTheme != userTheme)
       if (storedTheme && storedTheme !== userTheme) {
-        // console.warn('Theme load')
         setPreferredTheme(storedTheme);
         setUserTheme(storedTheme);
       } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
         setUserTheme(preferredTheme);
         storage.setItem(storageKey, preferredTheme);
-        // console.warn('theme change', preferredTheme)
       } else {
         setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
         storage.removeItem(storageKey);
-        // console.warn('theme reset')
       }
     } else {
       setUserTheme('light');
@@ -39,5 +35,4 @@ var _default = function _default(initialTheme) {
     setPreferredTheme,
     isTheme
   };
-};
-exports.default = _default;
+};

package/dist/cjs/a/BlurOverlay/BlurOverlay.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && {}.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; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'blur-overlay';
+const BlurOverlay = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    blur
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, blur && _exports.default.modifierActive].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
+BlurOverlay.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   *  The children JSX
+   */
+  children: _propTypes.default.node,
+  /**
+   *  Boolean to toggle blur effect
+   */
+  blur: _propTypes.default.bool
+};
+BlurOverlay.defaultProps = {
+  blur: true
+  // someProp:false
+};
+var _default = exports.default = BlurOverlay;

package/dist/cjs/{r/common/PrivateRoute → a/BlurOverlay}/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "PrivateRoute", {
+Object.defineProperty(exports, "BlurOverlay", {
   enumerable: true,
   get: function () {
-    return _PrivateRoute.default;
+    return _BlurOverlay.default;
   }
 });
-var _PrivateRoute = _interopRequireDefault(require("./PrivateRoute"));
+var _BlurOverlay = _interopRequireDefault(require("./BlurOverlay"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/BlurOverlay/styles.scss

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.blur-overlay {
+  background: inherit;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+  &.#{bem.$modifier-active} {
+    animation: blurAnimation .3s ease-in-out;
+    backdrop-filter: blur(5px);
+    background: var(--blur-overlay-background, inherit);
+    height: 100%;
+    z-index: var(--blur-overlay-z-index, 3);
+  }
+}
+
+@keyframes blurAnimation {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  1% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/cjs/a/ContentTree/ContentTree.js

@@ -7,10 +7,15 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
 var _common = require("./common");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && {}.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; }
+/* @pareto-engineering/generator-front 1.0.12 */
+
+// Local Definitions
+
 const baseClassName = _exports.default.base;
 const componentClassName = 'content-tree';
 
@@ -23,12 +28,10 @@ const ContentTree = _ref => {
     className: userClassName,
     style,
     target,
-    selectors
+    selectors,
+    color
     // ...otherProps
   } = _ref;
-  (0, React.useInsertionEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
   const contentTree = (0, _common.useContentTree)(target, selectors);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -36,6 +39,7 @@ const ContentTree = _ref => {
     style: style
     // {...otherProps}
   }, /*#__PURE__*/React.createElement(_common.Tree, {
+    color: color,
     tree: contentTree
   }));
 };
@@ -61,10 +65,13 @@ ContentTree.propTypes = {
    */
   target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.node
-  })])
+  })]),
+  /**
+   * The color for the tree.
+   */
+  color: _propTypes.default.string
 };
 ContentTree.defaultProps = {
   selectors: ['h2', 'h3']
 };
-var _default = ContentTree;
-exports.default = _default;
+var _default = exports.default = ContentTree;

package/dist/cjs/a/ContentTree/common/Tree/Tree.js

@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _ = require("../../../..");
 var _useFirstVisibleNode = _interopRequireDefault(require("../useFirstVisibleNode"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && {}.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; }
 /* @pareto-engineering/generator-front 1.0.12 */
 
 // Local Definitions
@@ -27,15 +29,16 @@ const Tree = _ref => {
     className: userClassName,
     style,
     tree,
-    displayDepth
+    displayDepth,
+    color
     // ...otherProps
   } = _ref;
   // The nodeIds to be used to get the first visible node
-  const [nodeIds, setNodeIds] = (0, React.useState)([]);
+  const [nodeIds, setNodeIds] = (0, _react.useState)([]);
 
   // current visible nodeId
   const visibleNodeId = (0, _useFirstVisibleNode.default)(nodeIds);
-  (0, React.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     const node = document.getElementsByClassName(visibleNodeId)[0];
     node?.classList.add(_exports.default.modifierActive);
     return () => {
@@ -61,12 +64,12 @@ const Tree = _ref => {
       className: node.id
     }, node.text)), node.children.length > 0 && /*#__PURE__*/React.createElement("ul", null, node.children.map(child => getNestedTree(child, depth - 1))));
   };
-  const ContentTree = (0, React.useMemo)(() => tree.map(node => getNestedTree(node, displayDepth)), [tree]);
-  return /*#__PURE__*/React.createElement("ul", {
+  const ContentTree = (0, _react.useMemo)(() => tree.map(node => getNestedTree(node, displayDepth)), [tree]);
+  return ContentTree.length ? /*#__PURE__*/React.createElement(_.Card, {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, color && `x-${color}`].filter(e => e).join(' '),
     style: style
-  }, ContentTree);
+  }, /*#__PURE__*/React.createElement(_.Card.Section, null, /*#__PURE__*/React.createElement("ul", null, ContentTree))) : null;
 };
 Tree.propTypes = {
   /**
@@ -95,10 +98,14 @@ Tree.propTypes = {
   /**
    * The levels of the tree to display.
    */
-  displayDepth: _propTypes.default.number
+  displayDepth: _propTypes.default.number,
+  /**
+   * The color of the tree.
+   */
+  color: _propTypes.default.string
 };
 Tree.defaultProps = {
+  color: 'interactive',
   displayDepth: 4
 };
-var _default = Tree;
-exports.default = _default;
+var _default = exports.default = Tree;

package/dist/cjs/a/ContentTree/common/useContentTree.js

@@ -76,5 +76,4 @@ const useContentTree = (target, selectors) => {
   }, [target.current]);
   return contentTree;
 };
-var _default = useContentTree;
-exports.default = _default;
+var _default = exports.default = useContentTree;

package/dist/cjs/a/ContentTree/common/useFirstVisibleNode.js

@@ -58,5 +58,4 @@ const useFirstVisibleNode = (nodeIds, config) => {
   }, [getVisibleNodeId]);
   return visibleNodeId;
 };
-var _default = useFirstVisibleNode;
-exports.default = _default;
+var _default = exports.default = useFirstVisibleNode;

package/dist/cjs/a/ContentTree/styles.scss

@@ -1,23 +1,48 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-compound-selectors -- exception */
 
 @use "@pareto-engineering/bem";
 
+$default-dot-size: .5em;
 $default-margin: 1em;
 $default-padding: 1em;
 
 .#{bem.$base}.content-tree {
-  ul {
-    list-style: none;
-  }
-
-  .#{bem.$base}.tree {
-    padding: 0;
+  > .#{bem.$base}.tree {
     position: sticky;
-    top: 0;
+    top: var(--theme-default-header-height-offset);
+
+    ul {
+      list-style: none;
+      padding: 0;
+
+      &:first-child > li > p {
+        margin-top: 0;
+      }
+
+      &:last-child > li > p {
+        margin-bottom: 0;
+      }
+
+      > li > p > a {
+        color: var(--paragraph);
+        text-decoration: none;
+      }
+    }
 
     .#{bem.$modifier-active} {
-      color: var(--main2);
-      transition: color .2s;
+      font-weight: 700;
+
+      &::before {
+        background: var(--x);
+        border-radius: 50%;
+        content: "";
+        display: inline-block;
+        height: $default-dot-size;
+        margin-right: $default-margin;
+        text-align: center;
+        width: $default-dot-size;
+      }
     }
 
     li:not(:last-child) {
@@ -29,5 +54,3 @@ $default-padding: 1em;
     }
   }
 }
-
-

package/dist/cjs/a/Conversation/Context.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var _default = /*#__PURE__*/React.createContext({});
-exports.default = _default;
+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 && {}.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; }
+var _default = exports.default = /*#__PURE__*/React.createContext({});