@pareto-engineering/design-system 4.0.0-alpha.3 → 4.0.0-alpha.33

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

@@ -6,33 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _default = function _default(initialTheme) {
-  var storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
-  var isClient = typeof window === 'object';
-  var [preferredTheme, setPreferredTheme] = (0, _react.useState)(initialTheme);
-  var [userTheme, setUserTheme] = (0, _react.useState)();
+  let storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
+  const isClient = typeof window === 'object';
+  const [preferredTheme, setPreferredTheme] = (0, _react.useState)(initialTheme);
+  const [userTheme, setUserTheme] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    var storage = window.localStorage;
+    const storage = window.localStorage;
     if (isClient) {
-      var storedTheme = window.localStorage.getItem(storageKey);
-      // console.log(storedTheme, storedTheme != userTheme)
+      const storedTheme = window.localStorage.getItem(storageKey);
       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');
     }
   }, [preferredTheme, isClient]);
-  var isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
+  const isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
   return {
     userTheme,
     preferredTheme,

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

@@ -0,0 +1,59 @@
+"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"));
+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; } /* @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;
+  (0, React.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  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 = BlurOverlay;
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BlurOverlay", {
+  enumerable: true,
+  get: function () {
+    return _BlurOverlay.default;
+  }
+});
+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,31 @@
+/* @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);
+    height: 100%;
+  }
+}
+
+@keyframes blurAnimation {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  1% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

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

@@ -9,33 +9,35 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 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 _getRequireWildcardCache(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 baseClassName = _exports.default.base;
-var componentClassName = 'content-tree';
+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; } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
+const baseClassName = _exports.default.base;
+const componentClassName = 'content-tree';
 
 /**
  * This is the component description.
  */
-var ContentTree = _ref => {
-  var {
+const ContentTree = _ref => {
+  let {
     id,
     className: userClassName,
     style,
     target,
-    selectors
+    selectors,
+    color
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  var contentTree = (0, _common.useContentTree)(target, selectors);
+  const contentTree = (0, _common.useContentTree)(target, selectors);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
     // {...otherProps}
   }, /*#__PURE__*/React.createElement(_common.Tree, {
+    color: color,
     tree: contentTree
   }));
 };
@@ -60,8 +62,12 @@ ContentTree.propTypes = {
    * The reference to the parent element.
    */
   target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.instanceOf(Element)
-  })])
+    current: _propTypes.default.node
+  })]),
+  /**
+   * The color for the tree.
+   */
+  color: _propTypes.default.string
 };
 ContentTree.defaultProps = {
   selectors: ['h2', 'h3']

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

@@ -7,44 +7,46 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
 /* @pareto-engineering/generator-front 1.0.12 */
 
 // Local Definitions
 
-var baseClassName = _exports.default.base;
-var componentClassName = 'tree';
+const baseClassName = _exports.default.base;
+const componentClassName = 'tree';
 
 /**
  * This is the component description.
  */
-var Tree = _ref => {
-  var {
+const Tree = _ref => {
+  let {
     id,
     className: userClassName,
     style,
     tree,
-    displayDepth
+    displayDepth,
+    color
     // ...otherProps
   } = _ref;
   // The nodeIds to be used to get the first visible node
-  var [nodeIds, setNodeIds] = (0, React.useState)([]);
+  const [nodeIds, setNodeIds] = (0, React.useState)([]);
 
   // current visible nodeId
-  var visibleNodeId = (0, _useFirstVisibleNode.default)(nodeIds);
+  const visibleNodeId = (0, _useFirstVisibleNode.default)(nodeIds);
   (0, React.useEffect)(() => {
-    var node = document.getElementsByClassName(visibleNodeId)[0];
-    node === null || node === void 0 ? void 0 : node.classList.add(_exports.default.modifierActive);
+    const node = document.getElementsByClassName(visibleNodeId)[0];
+    node?.classList.add(_exports.default.modifierActive);
     return () => {
-      node === null || node === void 0 ? void 0 : node.classList.remove(_exports.default.modifierActive);
+      node?.classList.remove(_exports.default.modifierActive);
     };
   }, [visibleNodeId]);
 
   // Generate the tree structure from the content tree data depending on the display depth
-  var getNestedTree = (node, depth) => {
+  const getNestedTree = (node, depth) => {
     setNodeIds(prev => [...prev, node.id]);
     if (depth <= 1) {
       return /*#__PURE__*/React.createElement("li", {
@@ -61,12 +63,12 @@ var Tree = _ref => {
       className: node.id
     }, node.text)), node.children.length > 0 && /*#__PURE__*/React.createElement("ul", null, node.children.map(child => getNestedTree(child, depth - 1))));
   };
-  var 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,9 +97,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;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tree.default;
   }
 });

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

@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tree.Tree;
   }
 });
 Object.defineProperty(exports, "useContentTree", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useContentTree.default;
   }
 });
 Object.defineProperty(exports, "useFirstVisibleNode", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useFirstVisibleNode.default;
   }
 });

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

@@ -5,38 +5,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var useContentTree = (target, selectors) => {
-  var [contentTree, setContentTree] = (0, _react.useState)([]);
-  var getNodes = (0, _react.useCallback)(parentTag => {
-    var nodeList = parentTag.querySelectorAll(selectors.join(', '));
-    var nodes = [];
+const useContentTree = (target, selectors) => {
+  const [contentTree, setContentTree] = (0, _react.useState)([]);
+  const getNodes = (0, _react.useCallback)(parentTag => {
+    const nodeList = parentTag.querySelectorAll(selectors.join(', '));
+    const nodes = [];
     nodeList.forEach(nodeNode => {
-      var {
+      const {
         id,
         innerText,
         tagName
       } = nodeNode;
       nodes.push({
-        id: "#".concat(id),
+        id: `#${id}`,
         text: innerText,
         level: selectors.indexOf(tagName.toLowerCase())
       });
     });
     return nodes;
   }, [selectors]);
-  var buildTree = (0, _react.useCallback)(nodes => {
+  const buildTree = (0, _react.useCallback)(nodes => {
     // Track the nodes we've seen so far in the same level
-    var currentSameLevelNodes = [];
+    const currentSameLevelNodes = [];
     // Track nodes of the next level which will be children of the current node
-    var nextLevelNodes = [];
+    let nextLevelNodes = [];
     // Track the current node level
-    var lastLevel = -1;
+    let lastLevel = -1;
 
     // If the nodes are empty, return an empty tree
     if (nodes.length === 0) {
       return [];
     }
-    var buildSubTree = () => {
+    const buildSubTree = () => {
       if (nextLevelNodes.length > 0) {
         currentSameLevelNodes[currentSameLevelNodes.length - 1].children.push(...buildTree(nextLevelNodes));
       }
@@ -69,8 +69,8 @@ var useContentTree = (target, selectors) => {
   }, []);
   (0, _react.useEffect)(() => {
     if (target.current) {
-      var nodes = getNodes(target.current);
-      var tree = buildTree(nodes);
+      const nodes = getNodes(target.current);
+      const tree = buildTree(nodes);
       setContentTree(tree);
     }
   }, [target.current]);

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

@@ -7,28 +7,27 @@ exports.default = void 0;
 var _react = require("react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var useFirstVisibleNode = (nodeIds, config) => {
-  var [visibleNodeId, setVisibleNodeId] = (0, _react.useState)(null);
-  var {
+const useFirstVisibleNode = (nodeIds, config) => {
+  const [visibleNodeId, setVisibleNodeId] = (0, _react.useState)(null);
+  const {
     debounceMs = 25
   } = config || {};
 
   // get headlines nodes - Should only be recalculated when the ids change
-  var nodes = (0, _react.useMemo)(() => {
-    if ((nodeIds === null || nodeIds === void 0 ? void 0 : nodeIds.length) > 0) {
+  const nodes = (0, _react.useMemo)(() => {
+    if (nodeIds?.length > 0) {
       return Array.from(document.querySelectorAll(nodeIds.join(',')));
     }
     return [];
   }, [nodeIds]);
-  var getVisibleNodeId = (0, _react.useCallback)((0, _debounce.default)(() => {
-    var _visibleNode$node;
+  const getVisibleNodeId = (0, _react.useCallback)((0, _debounce.default)(() => {
     // Get the top postion of each headline node relative to the viewport
-    var topOffsets = nodes.map(node => node.getBoundingClientRect().top);
+    const topOffsets = nodes.map(node => node.getBoundingClientRect().top);
 
     // Get the node closer to zero (the top of the viewport)
     // We have the default offset as Infinity so it's always greater that the first node Y position
-    var visibleNode = topOffsets.reduce((prev, currentOffset, currentIndex) => {
-      var node = Math.abs(currentOffset - 0) < Math.abs(prev.offset - 0) ? {
+    const visibleNode = topOffsets.reduce((prev, currentOffset, currentIndex) => {
+      const node = Math.abs(currentOffset - 0) < Math.abs(prev.offset - 0) ? {
         node: nodes[currentIndex],
         offset: currentOffset
       } : prev;
@@ -39,7 +38,7 @@ var useFirstVisibleNode = (nodeIds, config) => {
     });
 
     // Set the visible node id
-    setVisibleNodeId("#".concat(visibleNode === null || visibleNode === void 0 ? void 0 : (_visibleNode$node = visibleNode.node) === null || _visibleNode$node === void 0 ? void 0 : _visibleNode$node.id));
+    setVisibleNodeId(`#${visibleNode?.node?.id}`);
   }, debounceMs), [nodes]);
 
   // Recalculate the visible node id when the page is scrolled

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ContentTree", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _ContentTree.default;
   }
 });

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,7 @@ 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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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;

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

@@ -7,30 +7,30 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _ = require("../..");
 var _common = require("./common");
 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 _getRequireWildcardCache(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 baseClassName = _exports.default.base;
-var componentClassName = 'conversation';
+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; } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
+const baseClassName = _exports.default.base;
+const componentClassName = 'conversation';
 
 /**
  * This is the component description.
  */
-var Conversation = _ref => {
-  var {
+const Conversation = _ref => {
+  let {
     id,
     className: userClassName,
     style,
-    backgroundColor,
     ourColor,
     theirColor,
     children,
-    hasTriangle
+    backgroundColor
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
@@ -38,11 +38,11 @@ var Conversation = _ref => {
       ourColor,
       theirColor
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_.Card, {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, hasTriangle && 'has-triangle', "y-".concat(backgroundColor), 'u1'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `y-${backgroundColor}`].filter(e => e).join(' '),
     style: style
-  }, children));
+  }, /*#__PURE__*/React.createElement(_.Card.Section, null, children)));
 };
 Conversation.propTypes = {
   /**
@@ -65,24 +65,19 @@ Conversation.propTypes = {
    * The base color to their messages component
    */
   theirColor: _propTypes.default.string,
-  /**
-   * The component background color
-   */
-  backgroundColor: _propTypes.default.string,
   /**
    *  The children JSX
    */
   children: _propTypes.default.node,
   /**
-   * whether to add triangle to bubble chats
+   * The background color
    */
-  hasTriangle: _propTypes.default.bool
+  backgroundColor: _propTypes.default.string
 };
 Conversation.defaultProps = {
-  backgroundColor: 'background2',
-  ourColor: 'background1',
-  theirColor: 'background1',
-  hasTriangle: false
+  ourColor: 'main',
+  theirColor: 'main2',
+  backgroundColor: 'background-near'
 };
 Conversation.Message = _common.Message;
 var _default = Conversation;