@bento-core/about 0.2.0

package/babel.config.json

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-react-jsx",
+    "@babel/plugin-syntax-jsx",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

package/dist/aboutBodyView.js

@@ -0,0 +1,329 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@material-ui/core");
+var _xoomInOutView = _interopRequireDefault(require("./xoomInOutView"));
+var _AboutTableExternalLink = _interopRequireDefault(require("./assets/About-Table-ExternalLink.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const AboutBody = _ref => {
+  let {
+    classes,
+    data,
+    externalIconImage
+  } = _ref;
+  function boldText(text) {
+    const boldedText = text.split('$$').map(splitedText => {
+      if (splitedText != null && /\*(.*)\*/.test(splitedText)) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.title
+        }, splitedText.match(/\*(.*)\*/).pop());
+      }
+      return splitedText;
+    });
+    return boldedText;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    container: true,
+    spacing: 16,
+    direction: "row",
+    className: classes.aboutSection
+  }, data.imageLocation === 'left' && /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    lg: 3,
+    md: 3,
+    sm: 12,
+    xs: 12,
+    className: classes.imageSection
+  }, data.image), /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    lg: 9,
+    md: 9,
+    sm: 12,
+    xs: 12,
+    className: classes.contentSection
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.text
+  }, data.content ? data.content.map(contentObj => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, contentObj.listWithNumbers && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.text
+  }, /*#__PURE__*/_react.default.createElement("ol", null, contentObj.listWithNumbers.map(listObj => listObj.listWithAlpahbets ?
+  /*#__PURE__*/
+  // Alphetised sub ordered list
+  _react.default.createElement("ol", {
+    type: "a"
+  }, listObj.listWithAlpahbets.map(listObj1 => /*#__PURE__*/_react.default.createElement("li", null, listObj1.includes('$$') ? boldText(listObj1) : listObj1))) : /*#__PURE__*/_react.default.createElement("li", null, listObj.includes('$$') ? boldText(listObj) : listObj)))), contentObj.listWithAlpahbets && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.text
+  }, /*#__PURE__*/_react.default.createElement("ol", {
+    type: "a"
+  }, contentObj.listWithAlpahbets.map(listObj => /*#__PURE__*/_react.default.createElement("li", null, listObj.includes('$$') ? boldText(listObj) : listObj)))), contentObj.paragraph && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.text
+  }, contentObj.paragraph.split('$$').map(splitedParagraph => {
+    // Checking for regex ()[] pattern
+    if (splitedParagraph != null && (/\[(.+)\]\((.+)\)/g.test(splitedParagraph) || /\((.+)\)\[(.+)\]/g.test(splitedParagraph))) {
+      const title = splitedParagraph.match(/\[(.*)\]/).pop();
+      const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
+      const target = linkAttrs.find(link => link.includes('target:'));
+      const url = linkAttrs.find(link => link.includes('url:'));
+      const type = linkAttrs.find(link => link.includes('type:')); // 0 : no img
+      const href = splitedParagraph.match(/\((.*)\)/).pop();
+      const link = /*#__PURE__*/_react.default.createElement(_core.Link, {
+        title: title,
+        target: target ? target.replace('target:', '') : '_blank',
+        rel: "noreferrer",
+        href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
+        color: "inherit",
+        className: classes.link
+      }, title);
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, type ? '' : /*#__PURE__*/_react.default.createElement("img", {
+        src: externalIconImage
+        // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
+        ,
+        alt: "outbounnd web site icon",
+        className: classes.linkIcon
+      }));
+    }
+    // For email
+    if (splitedParagraph != null && /@(.*)@/.test(splitedParagraph)) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: classes.email
+      }, splitedParagraph.match(/@(.*)@/).pop());
+    }
+    // For sub headings
+    if (splitedParagraph != null && /#(.*)#/.test(splitedParagraph)) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.title
+      }, splitedParagraph.match(/#(.*)#/).pop());
+    }
+    // For bolding inline words
+    if (splitedParagraph != null && /\*(.*)\*/.test(splitedParagraph)) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: classes.title
+      }, splitedParagraph.match(/\*(.*)\*/).pop());
+    }
+    // For downloading things
+    if (splitedParagraph != null && /{(.*)}/.test(splitedParagraph)) {
+      const downloadAttrs = splitedParagraph.match(/{(.*)}/).pop().split(',');
+      const downloadLink = downloadAttrs.find(link => link.includes('link:'));
+      const downloadTitle = downloadAttrs.find(link => link.includes('title:'));
+      return /*#__PURE__*/_react.default.createElement(_core.Link, {
+        target: "_blank",
+        className: classes.link,
+        href: downloadLink ? downloadLink.replace('link:', '') : ''
+      }, downloadTitle ? downloadTitle.replace('title:', '') : '');
+    }
+    return splitedParagraph;
+  })), contentObj.table && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.tableDiv
+  }, /*#__PURE__*/_react.default.createElement("table", {
+    className: classes.table
+  }, /*#__PURE__*/_react.default.createElement("thead", {
+    className: classes.tableHeader
+  }, /*#__PURE__*/_react.default.createElement("tr", {
+    className: classes.tableBodyRow
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: classes.headerCell,
+    "aria-label": "Index"
+  }), contentObj.table[0].head.map(rowObj => {
+    let outputHTML = /*#__PURE__*/_react.default.createElement("th", {
+      className: classes.headerCell
+    }, rowObj);
+    if (rowObj != null && /{(.*)}/.test(rowObj)) {
+      const thAttrs = rowObj.match(/{(.*)}/).pop().split('$$');
+      const inlineStyleStr = thAttrs.find(thAttr => thAttr.includes('style:')).replace('style:', '').replace(/'/g, '');
+      const inlineStyleMap = {};
+      inlineStyleStr.split(',').forEach(style => {
+        // eslint-disable-next-line prefer-destructuring
+        inlineStyleMap[style.split(':')[0]] = style.split(':')[1];
+      });
+      const text = thAttrs.find(thAttr => thAttr.includes('text:'));
+      outputHTML = /*#__PURE__*/_react.default.createElement("th", {
+        className: classes.headerCell,
+        style: inlineStyleMap
+      }, text.replace('text:', ''));
+    }
+    return outputHTML;
+  }))), /*#__PURE__*/_react.default.createElement("tbody", null, contentObj.table[1].body.map((rowObj, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("tr", {
+    className: classes.tableBodyRow
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    className: classes.tableCell
+  }, index + 1), rowObj.row.map(rowValue => {
+    let outputHTML = /*#__PURE__*/_react.default.createElement("td", {
+      className: classes.tableCell
+    }, rowValue);
+    // add inline style
+    if (rowValue != null && /{(.*)}/.test(rowValue)) {
+      const thAttrs = rowValue.match(/{(.*)}/).pop().split('$$');
+      const inlineStyleStr = thAttrs.find(thAttr => thAttr.includes('style:')).replace('style:', '').replace(/'/g, '');
+      const inlineStyleMap = {};
+      inlineStyleStr.split(',').forEach(style => {
+        // eslint-disable-next-line prefer-destructuring
+        inlineStyleMap[style.split(':')[0]] = style.split(':')[1];
+      });
+      const text = thAttrs.find(thAttr => thAttr.includes('text:'));
+      outputHTML = /*#__PURE__*/_react.default.createElement("td", {
+        className: classes.tableCell,
+        style: inlineStyleMap
+      }, text.replace('text:', ''));
+    }
+    if (rowValue != null && (/\[(.+)\]\((.+)\)/g.test(rowValue) || /\((.+)\)\[(.+)\]/g.test(rowValue))) {
+      const title = rowValue.match(/\[(.*)\]/).pop();
+      const linkAttrs = rowValue.match(/\((.*)\)/).pop().split(' ');
+      const target = linkAttrs.find(link => link.includes('target:'));
+      const url = linkAttrs.find(link => link.includes('url:'));
+      const type = linkAttrs.find(link => link.includes('type:')); // 0 : no img
+      const link = /*#__PURE__*/_react.default.createElement(_core.Link, {
+        title: title,
+        target: target ? target.replace('target:', '') : '_blank',
+        rel: "noreferrer",
+        href: url ? url.replace('url:', '') : rowValue.match(/\((.*)\)/).pop(),
+        color: "inherit",
+        className: classes.tableLink
+      }, title);
+      outputHTML = /*#__PURE__*/_react.default.createElement("td", {
+        className: classes.tableCell
+      }, link, type ? '' : /*#__PURE__*/_react.default.createElement("img", {
+        src: _AboutTableExternalLink.default,
+        alt: "outbounnd web site icon",
+        className: classes.tablelinkIcon
+      }));
+    }
+    return outputHTML;
+  }))))))), /*#__PURE__*/_react.default.createElement("br", null))) : '')), data.imageLocation === 'right' && /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    lg: 3,
+    md: 3,
+    sm: 12,
+    xs: 12,
+    className: classes.imageSection
+  }, data.image))), data.secondaryZoomImageTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.secondayTitle
+  }, data.secondaryZoomImageTitle), data.secondaryImage && /*#__PURE__*/_react.default.createElement(_xoomInOutView.default, null, data.secondaryImageData));
+};
+const styles = () => ({
+  container: {
+    margin: '16px auto 16px auto',
+    color: '#000000',
+    fontFamily: props => props.data.fontFamily ? props.data.fontFamily : 'Nunito',
+    fontSize: '15px',
+    lineHeight: '22px',
+    maxWidth: '1440px'
+  },
+  maxWidthContainer: {
+    margin: '0px auto 0px auto',
+    maxWidth: '1440px'
+  },
+  secondayTitle: {
+    display: 'block',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    marginBottom: '70px',
+    color: '#033D6F',
+    fontSize: '28px',
+    fontFamily: 'Lato'
+  },
+  text: {
+    // height: '476px',
+    // width: '675px',
+    color: '#000000',
+    fontFamily: props => props.data.fontFamily ? props.data.fontFamily : 'Nunito',
+    fontSize: '16px',
+    lineHeight: props => props.data.lineHeight ? props.data.lineHeight : '30px'
+  },
+  title: props => ({
+    color: props.titleColor,
+    fontWeight: 'bold'
+  }),
+  email: props => ({
+    color: props.linkColor,
+    fontWeight: 'bold'
+  }),
+  contentSection: {
+    padding: props => props.data.imageLocation === 'right' ? '8px 25px 8px 0px !important' : '8px 0px 8px 25px !important',
+    float: 'left'
+  },
+  imageSection: {
+    float: 'left'
+  },
+  aboutSection: {
+    padding: '60px 45px'
+  },
+  img: {
+    width: '100%'
+  },
+  linkIcon: {
+    width: '20px',
+    verticalAlign: 'sub',
+    margin: '0px 0px 0px 2px'
+  },
+  link: props => ({
+    color: props.linkColor,
+    '&:hover': {
+      color: props.linkColor
+    }
+  }),
+  tableDiv: {
+    marginTop: '0px'
+  },
+  tablelinkIcon: {
+    width: '15px',
+    verticalAlign: 'sub',
+    margin: '0px 0px 0px 2px'
+  },
+  tableLink: {
+    fontWeight: 'bolder',
+    textDecoration: 'underline'
+  },
+  table: {
+    borderSpacing: '0',
+    borderCollapse: 'collapse',
+    fontSize: '12px',
+    fontWeight: 'bold',
+    letterSpacing: '0.025em',
+    lineHeight: '30px',
+    textAlign: 'left',
+    width: '100%'
+  },
+  tableHeader: {
+    fontFamily: props => props.data.fontFamily ? props.data.fontFamily : 'Nunito',
+    color: '#194563',
+    textTransform: 'uppercase'
+  },
+  tableBodyRow: {
+    borderSpacing: '0',
+    borderCollapse: 'collapse',
+    color: '#3E7AAA'
+  },
+  tableCell: {
+    fontFamily: props => props.data.fontFamily ? props.data.fontFamily : 'Nunito',
+    fontSize: '14px',
+    padding: '8px 15px 8px 0px',
+    borderBottom: '0.66px solid #087CA5'
+  },
+  headerCell: {
+    borderBottom: '4px solid #087CA5',
+    borderSpacing: '0',
+    borderCollapse: 'collapse',
+    fontWeight: 'bolder'
+  },
+  MyCasesWizardStep4: {
+    width: '600px'
+  }
+});
+AboutBody.defaultProps = {
+  classes: {},
+  data: {
+    content: [],
+    fontFamily: 'Nunito',
+    lineHeight: '30px'
+  },
+  linkColor: '#0296C9',
+  titleColor: '#0B3556',
+  externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg'
+};
+var _default = (0, _core.withStyles)(styles)(AboutBody);
+exports.default = _default;

package/dist/aboutHeaderView.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@material-ui/core");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const AboutHeader = _ref => {
+  let {
+    classes,
+    title
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.header
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "about_title",
+    className: classes.titleBody
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.titleText
+  }, title))), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.whitePadding
+  }));
+};
+const styles = () => ({
+  header: {
+    padding: '45px'
+  },
+  container: props => ({
+    background: props.background
+  }),
+  whitePadding: {
+    height: '6px',
+    background: 'white'
+  },
+  titleBody: {
+    textAlign: 'center'
+  },
+  titleText: props => ({
+    height: '65px',
+    width: '252px',
+    color: props.titleColor,
+    fontFamily: 'Lato',
+    fontSize: '35px',
+    fontWeight: 'bold'
+  })
+});
+AboutHeader.defaultProps = {
+  titleColor: '#0077E3',
+  background: '#e7eef5'
+};
+var _default = (0, _core.withStyles)(styles)(AboutHeader);
+exports.default = _default;

package/dist/assets/About-ExternalLink.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 131.2 130.5" style="enable-background:new 0 0 131.2 130.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#0296C9;}
+</style>
+<title>Group</title>
+<desc>Created with Sketch.</desc>
+<g>
+	<polygon class="st0" points="70.9,16 86.1,31.2 44,72.8 56.9,85.8 99,44.1 115.8,60.9 115.8,16 	"/>
+	<polygon class="st0" points="87,100.2 29.6,100.2 29.6,42.8 61.9,42.8 75.3,29.4 16.2,29.4 16.2,113.7 100.4,113.7 100.4,55.4 
+		87,68.8 	"/>
+</g>
+</svg>

package/dist/assets/About-Table-ExternalLink.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 131.2 130.5" style="enable-background:new 0 0 131.2 130.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#3E7AAA;}
+</style>
+<title>Group</title>
+<desc>Created with Sketch.</desc>
+<g>
+	<polygon class="st0" points="70.9,16 86.1,31.2 44,72.8 56.9,85.8 99,44.1 115.8,60.9 115.8,16 	"/>
+	<polygon class="st0" points="87,100.2 29.6,100.2 29.6,42.8 61.9,42.8 75.3,29.4 16.2,29.4 16.2,113.7 100.4,113.7 100.4,55.4 
+		87,68.8 	"/>
+</g>
+</svg>

package/dist/assets/Model-Buttons-Center.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st2{display:inline;fill:#FFFFFF;}
+	.st3{fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;}
+</style>
+<g id="Layer_1" class="st0">
+	<circle class="st1" cx="20.9" cy="21" r="20"/>
+	<path class="st2" d="M32.8,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,26.9,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.3,33,33.4,32.2,32.8,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.2,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st2" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7v0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+	<path class="st2" d="M20.2,25.3v-9.8c0-0.4,0.3-0.7,0.7-0.7h0c0.4,0,0.7,0.3,0.7,0.7v9.8c0,0.4-0.3,0.7-0.7,0.7h0
+		C20.5,26,20.2,25.7,20.2,25.3z"/>
+</g>
+<g id="Layer_2" class="st0">
+	<circle class="st1" cx="20.9" cy="20.9" r="20"/>
+	<path class="st2" d="M32.9,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,27,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.4,33,33.4,32.2,32.9,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.3,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st2" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7l0,0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+</g>
+<g id="Layer_3">
+	<circle class="st3" cx="20.8" cy="21" r="20"/>
+	<g>
+		<g>
+			<path class="st4" d="M34.9,20.4l-1.8-1.8c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l0.5,0.5h-7c-0.3-2.1-1.9-3.7-4-4v-7l0.5,0.5
+				c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1L21.3,7c-0.3-0.3-0.8-0.3-1,0l-1.8,1.8c-0.3,0.3-0.3,0.7,0,1
+				c0.3,0.3,0.7,0.3,1,0l0.6-0.5v7c-2.1,0.3-3.7,1.9-4,4h-7l0.5-0.5c0.3-0.3,0.3-0.8,0-1c-0.3-0.3-0.7-0.3-1,0l-1.8,1.8
+				c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1l-0.5-0.5h7
+				c0.3,2.1,1.9,3.7,4,4v7l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2
+				c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8c0.3-0.3,0.3-0.7,0-1c-0.3-0.3-0.7-0.3-1,0l-0.6,0.5v-7c2.1-0.3,3.7-2,4-4h7l-0.5,0.5
+				c-0.3,0.3-0.3,0.7,0,1c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8C35.1,21.2,35.1,20.7,34.9,20.4z M20.9,24.3
+				c-1.8,0-3.3-1.5-3.3-3.3c0-1.8,1.5-3.3,3.3-3.3c1.8,0,3.3,1.5,3.3,3.3C24.2,22.8,22.7,24.3,20.9,24.3z"/>
+			<path class="st4" d="M20.9,35.3c-0.2,0-0.4-0.1-0.6-0.3l-1.8-1.8c-0.2-0.2-0.3-0.4-0.3-0.6c0-0.2,0.1-0.4,0.3-0.6
+				c0.3-0.3,0.9-0.3,1.2,0l0.3,0.3v-6.5c-2-0.4-3.6-2-4-4H9.5l0.3,0.3c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6
+				c-0.3,0.3-0.9,0.3-1.2,0l-1.8-1.8c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8c0.3-0.3,0.9-0.3,1.2,0c0.2,0.1,0.2,0.3,0.3,0.6
+				c0,0.2-0.1,0.5-0.3,0.6l-0.3,0.3H16c0.3-2,1.9-3.6,4-4V9.5l-0.4,0.3c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8
+				c0.1-0.2,0.3-0.2,0.6-0.3c0.2,0,0.5,0.1,0.6,0.3l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.2,0l-0.3-0.3v6.6
+				c2,0.4,3.6,1.9,4,4h6.6L32,19.8c-0.3-0.3-0.3-0.9,0-1.2c0.3-0.3,0.9-0.3,1.2,0l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2l-1.8,1.8
+				c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l0.3-0.3h-6.5c-0.4,2-2,3.6-4,4v6.6l0.4-0.3c0.3-0.3,0.9-0.3,1.2,0
+				c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6l-1.8,1.8C21.3,35.2,21.1,35.3,20.9,35.3z M19.1,32.1c-0.2,0-0.3,0.1-0.4,0.2
+				c-0.1,0.1-0.2,0.3-0.2,0.4s0.1,0.3,0.2,0.4l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4
+				c-0.2-0.2-0.6-0.2-0.8,0L21.5,33v-7.3l0.1,0c2-0.3,3.6-1.9,3.9-3.9l0-0.1h7.4l-0.7,0.7c-0.2,0.2-0.2,0.6,0,0.8
+				c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.2-0.2,0.2-0.6,0-0.9L33,18.8c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8l0.7,0.8h-7.4
+				l0-0.1c-0.3-2-1.9-3.6-3.9-3.9l-0.1,0V9l0.7,0.7c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4S23.2,9,23.1,8.8l-1.8-1.8
+				C21.1,7,21,6.9,20.8,6.9c-0.2,0-0.3,0.1-0.4,0.2l-1.8,1.8c-0.2,0.2-0.2,0.6,0,0.8c0.2,0.2,0.6,0.2,0.8,0L20.3,9v7.3l-0.1,0
+				c-2,0.3-3.6,1.9-3.9,3.9l0,0.1H8.9l0.7-0.7c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.2-0.2-0.6-0.2-0.9,0l-1.8,1.8
+				c-0.2,0.2-0.2,0.6,0,0.8l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4l-0.7-0.7h7.4l0,0.1
+				c0.3,2,1.9,3.6,3.9,3.9l0.1,0V33l-0.7-0.7C19.4,32.2,19.3,32.1,19.1,32.1z M20.9,24.4c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5
+				c1.9,0,3.5,1.6,3.5,3.5S22.8,24.4,20.9,24.4z M20.9,17.8c-1.8,0-3.2,1.4-3.2,3.2s1.4,3.2,3.2,3.2c1.8,0,3.2-1.4,3.2-3.2
+				S22.6,17.8,20.9,17.8z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_4">
+</g>
+</svg>

package/dist/assets/Model-Buttons-ZoomIn.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;}
+	.st2{display:none;}
+	.st3{display:inline;fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st4{display:inline;fill:#FFFFFF;}
+	.st5{display:inline;}
+</style>
+<g id="Layer_1">
+	<circle class="st0" cx="20.9" cy="21" r="20"/>
+	<path class="st1" d="M32.8,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,26.9,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.3,33,33.4,32.2,32.8,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.2,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st1" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7v0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+	<path class="st1" d="M20.2,25.3v-9.8c0-0.4,0.3-0.7,0.7-0.7h0c0.4,0,0.7,0.3,0.7,0.7v9.8c0,0.4-0.3,0.7-0.7,0.7h0
+		C20.5,26,20.2,25.7,20.2,25.3z"/>
+</g>
+<g id="Layer_2" class="st2">
+	<circle class="st3" cx="20.9" cy="20.9" r="20"/>
+	<path class="st4" d="M32.9,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,27,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.4,33,33.4,32.2,32.9,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.3,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st4" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7l0,0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+</g>
+<g id="Layer_3" class="st2">
+	<circle class="st3" cx="20.8" cy="21" r="20"/>
+	<g class="st5">
+		<g>
+			<path class="st1" d="M34.9,20.4l-1.8-1.8c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l0.5,0.5h-7c-0.3-2.1-1.9-3.7-4-4v-7l0.5,0.5
+				c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1L21.3,7c-0.3-0.3-0.8-0.3-1,0l-1.8,1.8c-0.3,0.3-0.3,0.7,0,1
+				c0.3,0.3,0.7,0.3,1,0l0.6-0.5v7c-2.1,0.3-3.7,1.9-4,4h-7l0.5-0.5c0.3-0.3,0.3-0.8,0-1c-0.3-0.3-0.7-0.3-1,0l-1.8,1.8
+				c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1l-0.5-0.5h7
+				c0.3,2.1,1.9,3.7,4,4v7l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2
+				c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8c0.3-0.3,0.3-0.7,0-1c-0.3-0.3-0.7-0.3-1,0l-0.6,0.5v-7c2.1-0.3,3.7-2,4-4h7l-0.5,0.5
+				c-0.3,0.3-0.3,0.7,0,1c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8C35.1,21.2,35.1,20.7,34.9,20.4z M20.9,24.3
+				c-1.8,0-3.3-1.5-3.3-3.3c0-1.8,1.5-3.3,3.3-3.3c1.8,0,3.3,1.5,3.3,3.3C24.2,22.8,22.7,24.3,20.9,24.3z"/>
+			<path class="st1" d="M20.9,35.3c-0.2,0-0.4-0.1-0.6-0.3l-1.8-1.8c-0.2-0.2-0.3-0.4-0.3-0.6c0-0.2,0.1-0.4,0.3-0.6
+				c0.3-0.3,0.9-0.3,1.2,0l0.3,0.3v-6.5c-2-0.4-3.6-2-4-4H9.5l0.3,0.3c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6
+				c-0.3,0.3-0.9,0.3-1.2,0l-1.8-1.8c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8c0.3-0.3,0.9-0.3,1.2,0c0.2,0.1,0.2,0.3,0.3,0.6
+				c0,0.2-0.1,0.5-0.3,0.6l-0.3,0.3H16c0.3-2,1.9-3.6,4-4V9.5l-0.4,0.3c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8
+				c0.1-0.2,0.3-0.2,0.6-0.3c0.2,0,0.5,0.1,0.6,0.3l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.2,0l-0.3-0.3v6.6
+				c2,0.4,3.6,1.9,4,4h6.6L32,19.8c-0.3-0.3-0.3-0.9,0-1.2c0.3-0.3,0.9-0.3,1.2,0l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2l-1.8,1.8
+				c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l0.3-0.3h-6.5c-0.4,2-2,3.6-4,4v6.6l0.4-0.3c0.3-0.3,0.9-0.3,1.2,0
+				c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6l-1.8,1.8C21.3,35.2,21.1,35.3,20.9,35.3z M19.1,32.1c-0.2,0-0.3,0.1-0.4,0.2
+				c-0.1,0.1-0.2,0.3-0.2,0.4s0.1,0.3,0.2,0.4l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4
+				c-0.2-0.2-0.6-0.2-0.8,0L21.5,33v-7.3l0.1,0c2-0.3,3.6-1.9,3.9-3.9l0-0.1h7.4l-0.7,0.7c-0.2,0.2-0.2,0.6,0,0.8
+				c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.2-0.2,0.2-0.6,0-0.9L33,18.8c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8l0.7,0.8h-7.4
+				l0-0.1c-0.3-2-1.9-3.6-3.9-3.9l-0.1,0V9l0.7,0.7c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4S23.2,9,23.1,8.8l-1.8-1.8
+				C21.1,7,21,6.9,20.8,6.9c-0.2,0-0.3,0.1-0.4,0.2l-1.8,1.8c-0.2,0.2-0.2,0.6,0,0.8c0.2,0.2,0.6,0.2,0.8,0L20.3,9v7.3l-0.1,0
+				c-2,0.3-3.6,1.9-3.9,3.9l0,0.1H8.9l0.7-0.7c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.2-0.2-0.6-0.2-0.9,0l-1.8,1.8
+				c-0.2,0.2-0.2,0.6,0,0.8l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4l-0.7-0.7h7.4l0,0.1
+				c0.3,2,1.9,3.6,3.9,3.9l0.1,0V33l-0.7-0.7C19.4,32.2,19.3,32.1,19.1,32.1z M20.9,24.4c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5
+				c1.9,0,3.5,1.6,3.5,3.5S22.8,24.4,20.9,24.4z M20.9,17.8c-1.8,0-3.2,1.4-3.2,3.2s1.4,3.2,3.2,3.2c1.8,0,3.2-1.4,3.2-3.2
+				S22.6,17.8,20.9,17.8z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_4">
+</g>
+</svg>