@terraware/web-components 1.0.1 → 1.0.4

package/components/Icon/icons/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _BlobbyGrayIconUploadToTheCloud = _interopRequireDefault(require("./assets/BlobbyGrayIconUploadToTheCloud"));
+
+var _BlobbyIconHappy = _interopRequireDefault(require("./assets/BlobbyIconHappy"));
+
+var _BlobbyIconLeaf = _interopRequireDefault(require("./assets/BlobbyIconLeaf"));
+
+var _BlobbyIconLibrary = _interopRequireDefault(require("./assets/BlobbyIconLibrary"));
+
+var _BlobbyIconSeedBank = _interopRequireDefault(require("./assets/BlobbyIconSeedBank"));
+
+var _BlobbyIconWrench = _interopRequireDefault(require("./assets/BlobbyIconWrench"));
+
+var _BlobbyIconHeartMonitor = _interopRequireDefault(require("./assets/BlobbyIconHeartMonitor"));
+
+var _BlobbyIconOrganization = _interopRequireDefault(require("./assets/BlobbyIconOrganization"));
+
+var _BlobbyIconPeople = _interopRequireDefault(require("./assets/BlobbyIconPeople"));
+
+var _Bug = _interopRequireDefault(require("./assets/Bug"));
+
+var _Calendar = _interopRequireDefault(require("./assets/Calendar"));
+
+var _CaretDown = _interopRequireDefault(require("./assets/CaretDown"));
+
+var _CaretLeft = _interopRequireDefault(require("./assets/CaretLeft"));
+
+var _CaretUp = _interopRequireDefault(require("./assets/CaretUp"));
+
+var _ChevronDown = _interopRequireDefault(require("./assets/ChevronDown"));
+
+var _ChevronUp = _interopRequireDefault(require("./assets/ChevronUp"));
+
+var _Close = _interopRequireDefault(require("./assets/Close"));
+
+var _Critical = _interopRequireDefault(require("./assets/Critical"));
+
+var _Edit = _interopRequireDefault(require("./assets/Edit"));
+
+var _Error = _interopRequireDefault(require("./assets/Error"));
+
+var _Export = _interopRequireDefault(require("./assets/Export"));
+
+var _Filter = _interopRequireDefault(require("./assets/Filter"));
+
+var _Folder = _interopRequireDefault(require("./assets/Folder"));
+
+var _Help = _interopRequireDefault(require("./assets/Help"));
+
+var _Home = _interopRequireDefault(require("./assets/Home"));
+
+var _IconCancel = _interopRequireDefault(require("./assets/IconCancel"));
+
+var _IconChargingBattery = _interopRequireDefault(require("./assets/IconChargingBattery"));
+
+var _IconCheckmark = _interopRequireDefault(require("./assets/IconCheckmark"));
+
+var _IconDashboard = _interopRequireDefault(require("./assets/IconDashboard"));
+
+var _IconHeartMonitor = _interopRequireDefault(require("./assets/IconHeartMonitor"));
+
+var _IconMail = _interopRequireDefault(require("./assets/IconMail"));
+
+var _IconManager = _interopRequireDefault(require("./assets/IconManager"));
+
+var _IconMenu = _interopRequireDefault(require("./assets/IconMenu"));
+
+var _IconOrg = _interopRequireDefault(require("./assets/IconOrg"));
+
+var _IconSeedBank = _interopRequireDefault(require("./assets/IconSeedBank"));
+
+var _IconWifi = _interopRequireDefault(require("./assets/IconWifi"));
+
+var _Info = _interopRequireDefault(require("./assets/Info"));
+
+var _Key = _interopRequireDefault(require("./assets/Key"));
+
+var _Leaf = _interopRequireDefault(require("./assets/Leaf"));
+
+var _Lock = _interopRequireDefault(require("./assets/Lock"));
+
+var _MenuVertical = _interopRequireDefault(require("./assets/MenuVertical"));
+
+var _Notification = _interopRequireDefault(require("./assets/Notification"));
+
+var _Person = _interopRequireDefault(require("./assets/Person"));
+
+var _Plus = _interopRequireDefault(require("./assets/Plus"));
+
+var _RestorationSite = _interopRequireDefault(require("./assets/RestorationSite"));
+
+var _Search = _interopRequireDefault(require("./assets/Search"));
+
+var _Seeds = _interopRequireDefault(require("./assets/Seeds"));
+
+var _Sparkles = _interopRequireDefault(require("./assets/Sparkles"));
+
+var _Species = _interopRequireDefault(require("./assets/Species"));
+
+var _Species2 = _interopRequireDefault(require("./assets/Species2"));
+
+var _Spinner = _interopRequireDefault(require("./assets/Spinner"));
+
+var _Success = _interopRequireDefault(require("./assets/Success"));
+
+var _Touchscreen = _interopRequireDefault(require("./assets/Touchscreen"));
+
+var _UploadCloud = _interopRequireDefault(require("./assets/UploadCloud"));
+
+var _Warning = _interopRequireDefault(require("./assets/Warning"));
+
+var icons = {
+  blobbyGrayIconUploadToTheCloud: _BlobbyGrayIconUploadToTheCloud.default,
+  blobbyIconSeedBank: _BlobbyIconSeedBank.default,
+  blobbyIconHappy: _BlobbyIconHappy.default,
+  blobbyIconLeaf: _BlobbyIconLeaf.default,
+  blobbyIconLibrary: _BlobbyIconLibrary.default,
+  blobbyIconWrench: _BlobbyIconWrench.default,
+  bug: _Bug.default,
+  calendar: _Calendar.default,
+  cancel: _IconCancel.default,
+  caretDown: _CaretDown.default,
+  caretLeft: _CaretLeft.default,
+  caretUp: _CaretUp.default,
+  chargingBattery: _IconChargingBattery.default,
+  checkmark: _IconCheckmark.default,
+  chevronDown: _ChevronDown.default,
+  chevronUp: _ChevronUp.default,
+  close: _Close.default,
+  critical: _Critical.default,
+  dashboard: _IconDashboard.default,
+  edit: _Edit.default,
+  error: _Error.default,
+  export: _Export.default,
+  filter: _Filter.default,
+  folder: _Folder.default,
+  help: _Help.default,
+  home: _Home.default,
+  iconMenu: _IconMenu.default,
+  info: _Info.default,
+  key: _Key.default,
+  leaf: _Leaf.default,
+  lock: _Lock.default,
+  mail: _IconMail.default,
+  menuVertical: _MenuVertical.default,
+  monitoring: _BlobbyIconHeartMonitor.default,
+  monitoringNav: _IconHeartMonitor.default,
+  notification: _Notification.default,
+  organization: _BlobbyIconOrganization.default,
+  organizationNav: _IconOrg.default,
+  people: _BlobbyIconPeople.default,
+  peopleNav: _IconManager.default,
+  person: _Person.default,
+  plus: _Plus.default,
+  restorationSite: _RestorationSite.default,
+  search: _Search.default,
+  seedbank: _BlobbyIconSeedBank.default,
+  seedbankNav: _IconSeedBank.default,
+  seeds: _Seeds.default,
+  sparkles: _Sparkles.default,
+  species: _Species.default,
+  species2: _Species2.default,
+  spinner: _Spinner.default,
+  success: _Success.default,
+  touchscreen: _Touchscreen.default,
+  uploadCloud: _UploadCloud.default,
+  warning: _Warning.default,
+  wifi: _IconWifi.default
+};
+var _default = icons;
+exports.default = _default;

package/components/Icon/styles.scss

@@ -0,0 +1,43 @@
+@import '../../style-dictionary-dist/button_variables.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+#spinner {
+  animation: Spin 1s infinite linear;
+}
+
+@keyframes Spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.tw-icon {
+  vertical-align: bottom;
+
+  &--small {
+    width: $tw-sz-btn-small-icon;
+    height: $tw-sz-btn-small-icon;
+  }
+
+  &--medium {
+    width: $tw-sz-btn-medium-icon;
+    height: $tw-sz-btn-medium-icon;
+  }
+
+  &--large {
+    width: $tw-sz-btn-large-icon;
+    height: $tw-sz-btn-large-icon;
+  }
+
+  &--xlarge {
+    width: $tw-sz-btn-x-large-icon;
+    height: $tw-sz-btn-x-large-icon;
+  }
+}

package/components/Navbar/NavFooter.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import './styles.scss';
+export interface Props {
+    children: ReactNode;
+}
+export default function NavFooter(props: Props): JSX.Element;
+//# sourceMappingURL=NavFooter.d.ts.map

package/components/Navbar/NavFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavFooter.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAI3D"}

package/components/Navbar/NavFooter.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavFooter;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./styles.scss");
+
+function NavFooter(props) {
+  var children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-footer"
+  }, children);
+}

package/components/Navbar/NavItem.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconName } from '../Icon/icons';
+import './styles.scss';
+export interface NavItemProps {
+    label: string;
+    icon?: IconName;
+    selected?: boolean;
+    onClick?: () => void;
+    id?: string;
+    isFooter?: boolean;
+}
+export default function NavItem(props: NavItemProps): JSX.Element;
+//# sourceMappingURL=NavItem.d.ts.map

package/components/Navbar/NavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavItem.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAuBhE"}

package/components/Navbar/NavItem.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavItem;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+require("./styles.scss");
+
+function NavItem(props) {
+  var label = props.label,
+      icon = props.icon,
+      selected = props.selected,
+      onClick = props.onClick,
+      id = props.id,
+      isFooter = props.isFooter;
+
+  var onClickHandler = function onClickHandler() {
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n        nav-item\n        ".concat(selected ? 'nav-item--selected' : '', "\n        ").concat(isFooter ? 'nav-item--footer' : '', "\n      ")
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "nav-item-content",
+    onClick: onClickHandler,
+    id: id
+  }, icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: icon,
+    className: "nav-item--icon"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-item--label"
+  }, label)));
+}

package/components/Navbar/NavSection.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './styles.scss';
+export interface Props {
+    title?: string;
+}
+export default function NavSection(props: Props): JSX.Element;
+//# sourceMappingURL=NavSection.d.ts.map

package/components/Navbar/NavSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavSection.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavSection.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAS5D"}

package/components/Navbar/NavSection.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavSection;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./styles.scss");
+
+function NavSection(props) {
+  var title = props.title;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-section"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "divider"
+  }), title && /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-section--title"
+  }, title));
+}

package/components/Navbar/Navbar.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import './styles.scss';
+export interface Props {
+    children: ReactNode;
+    setShowNavBar: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export default function Navbar(props: Props): JSX.Element;
+//# sourceMappingURL=Navbar.d.ts.map

package/components/Navbar/Navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,eAAe,CAAC;AAKvB,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC9D;AAmBD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBxD"}

package/components/Navbar/Navbar.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Navbar;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _logo = require("./logo.svg");
+
+require("./styles.scss");
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+var _utils = require("../../utils");
+
+var _styles2 = require("@mui/styles");
+
+var useStyles = (0, _styles2.makeStyles)(function () {
+  return {
+    icon: {
+      fill: '#708284',
+      width: '27px',
+      height: '27px',
+      margin: '15px 0 15px 14px'
+    },
+    closeButton: {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer'
+    },
+    navBarTop: {
+      display: 'flex'
+    }
+  };
+});
+
+function Navbar(props) {
+  var children = props.children,
+      setShowNavBar = props.setShowNavBar;
+
+  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
+      isDesktop = _useDeviceInfo.isDesktop;
+
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "navbar"
+  }, isDesktop ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "logo"
+  }, /*#__PURE__*/_react.default.createElement(_logo.ReactComponent, null)) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.navBarTop
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return setShowNavBar(false);
+    },
+    className: classes.closeButton
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: classes.icon
+  }))), children);
+}

package/components/Navbar/logo.svg

@@ -0,0 +1,25 @@
+<svg width="137" height="16" viewBox="0 0 137 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M30.2222 11.1276C26.93 9.02058 23.177 7.57202 19.1605 6.97942V3.09465C19.1605 2.04115 18.963 1.18519 18.5021 0.72428C18.1728 0.263375 17.5144 0 16.7243 0H14.4856V1.38272H16.3292C17.251 1.38272 17.5802 2.04115 17.5802 3.16049V6.78189C16.7901 6.71605 15.9342 6.65021 15.144 6.65021C14.4856 6.65021 13.893 6.65021 13.2346 6.71605V0L11.5885 0.460905V6.84774C7.37449 7.37449 3.42387 8.88889 0 11.1276C3.55556 9.34979 7.44033 8.16461 11.5885 7.7037V12.9054C11.5885 13.9588 11.786 14.8148 12.2469 15.2757C12.642 15.7366 13.2346 16 14.0247 16H16.3292V14.6173H14.4856C13.5638 14.6173 13.2346 13.9588 13.2346 12.8395V7.57202C13.893 7.50617 14.4856 7.50617 15.144 7.50617C15.5806 7.50617 16 7.5233 16.411 7.54008C16.8059 7.55621 17.1931 7.57202 17.5802 7.57202V16L19.2263 15.5391V7.76955C23.1111 8.23045 26.8642 9.41564 30.2222 11.1276Z" fill="black"/>
+<path d="M53.8601 9.94236C53.8601 8.69133 54.1893 7.96705 55.2428 7.96705L55.9012 7.9012V6.3868H54.7819C53.9259 6.3868 53.2675 6.71602 52.8066 7.17692C52.2798 7.76952 52.0823 8.69133 52.0823 9.87651V13.8271H53.8601V9.94236Z" fill="black"/>
+<path d="M59.9835 7.96705C58.93 7.96705 58.6008 8.69133 58.6008 9.94236V13.8271H56.823V9.87651C56.823 8.69133 57.0206 7.76952 57.5473 7.17692C58.0082 6.71602 58.6667 6.3868 59.5226 6.3868H60.642V7.9012L59.9835 7.96705Z" fill="black"/>
+<path d="M88.6255 7.96705C87.572 7.96705 87.2428 8.69133 87.2428 9.94236V13.8271H85.465V9.87651C85.465 8.69133 85.6625 7.76952 86.1893 7.17692C86.6502 6.71602 87.3086 6.3868 88.1646 6.3868H89.284V7.9012L88.6255 7.96705Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0124 14.0247C48.5268 14.0247 49.5144 13.5638 50.3045 12.4444L48.856 11.5884C48.3951 12.1152 47.8683 12.3127 47.0782 12.3127C46.0247 12.3127 45.2346 11.7201 45.0371 10.6666H50.8313V10.2716C50.8313 8.03289 49.3169 6.3868 47.0124 6.3868C44.7078 6.3868 43.2593 8.23042 43.2593 10.2057C43.2593 12.3127 44.7078 14.0247 47.0124 14.0247ZM47.0124 7.96705C48 7.96705 48.7243 8.4938 48.9877 9.34976H45.1029C45.4321 8.42795 46.0905 7.96705 47.0124 7.96705Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.0288 13.1028C66.3704 13.6954 65.712 14.0247 64.7901 14.0247C62.9465 14.0247 61.3663 12.4444 61.3663 10.2057C61.3663 7.96705 62.8807 6.3868 64.7901 6.3868C65.6461 6.3868 66.4362 6.71602 67.0288 7.37445V6.58433H68.8066V13.8271H67.0288V13.1028ZM63.2099 10.2057C63.2099 11.4568 64 12.3786 65.1194 12.3786C66.2387 12.3786 67.0947 11.5226 67.0947 10.2057C67.0947 8.9547 66.2387 8.09873 65.1194 8.09873C63.9342 8.09873 63.2099 9.08639 63.2099 10.2057Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.3292 14.0247C82.5021 14.0247 84.1481 12.3127 84.1481 10.2057C84.1481 8.09873 82.4362 6.45264 80.3292 6.3868C78.3539 6.3868 76.5761 8.03289 76.5761 10.2057C76.5761 12.3786 78.2222 14.0247 80.3292 14.0247ZM80.3292 12.3127C79.2099 12.3127 78.4198 11.4568 78.4198 10.2057C78.4198 9.02054 79.2099 8.16458 80.3292 8.09873C81.5144 8.09873 82.3045 8.9547 82.3045 10.2057C82.3045 11.5226 81.4486 12.3127 80.3292 12.3127Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.313 13.1028C107.654 13.6954 106.996 14.0247 106.074 14.0247C104.23 14.0247 102.65 12.4444 102.65 10.2057C102.65 7.96705 104.165 6.3868 106.074 6.3868C106.93 6.3868 107.72 6.71602 108.313 7.37445V6.58433H110.091V13.8271H108.313V13.1028ZM104.428 10.2057C104.428 11.4568 105.218 12.3786 106.337 12.3786C107.457 12.3786 108.313 11.5226 108.313 10.2057C108.313 8.9547 107.457 8.09873 106.337 8.09873C105.218 8.09873 104.428 9.08639 104.428 10.2057Z" fill="black"/>
+<path d="M119.243 5.5309C119.901 5.5309 120.428 5.00415 120.428 4.34571C120.428 3.68727 119.901 3.16053 119.243 3.16053C118.584 3.16053 118.058 3.68727 118.058 4.27987C118.058 4.9383 118.584 5.5309 119.243 5.5309Z" fill="black"/>
+<path d="M120.165 6.65024H118.387V13.893H120.165V6.65024Z" fill="black"/>
+<path d="M45.1029 1.90948H35.0288V3.68726H39.1111V13.8272H40.9547V3.68726H45.1029V1.90948Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.169 14.0247C127.342 14.0247 128.988 12.3127 128.988 10.2057C128.988 8.09873 127.276 6.45264 125.169 6.3868C123.193 6.3868 121.416 8.03289 121.416 10.2057C121.416 12.3786 123.062 14.0247 125.169 14.0247ZM125.169 12.3127C124.049 12.3127 123.259 11.4568 123.259 10.2057C123.259 9.02054 124.049 8.16458 125.169 8.09873C126.354 8.09873 127.144 8.9547 127.144 10.2057C127.144 11.5226 126.288 12.3127 125.169 12.3127Z" fill="black"/>
+<path d="M117.07 8.16464V6.58439H115.029V3.16053L113.251 3.68727V6.65024H111.342V8.23048H113.251V11.9177C113.251 13.1029 113.449 14.0247 113.975 14.6173C114.436 15.0782 115.095 15.4074 115.951 15.4074H117.07V13.8272H116.412C115.358 13.8272 115.029 13.1029 115.029 11.8519V8.16464H117.07Z" fill="black"/>
+<path d="M75.8519 2.17287V3.68728H75.1934C74.0082 3.68728 73.8107 4.27987 73.8107 5.66258V6.58439H75.8519V8.16464H73.8107V15.2099L72.0329 15.7367V8.29633H70.1235V6.71608H72.0329V5.66258C72.0329 4.41155 72.2305 3.55559 72.7572 2.963C73.1523 2.43625 73.8765 2.17287 74.7325 2.17287H75.8519Z" fill="black"/>
+<path d="M96.9876 13.8272H95.2099V10.3375C95.2099 8.95476 94.9465 8.0988 93.9588 8.0988C93.037 8.0988 92.3786 8.82308 92.3786 10.3375V13.8272H90.6008V6.45271H92.3786V7.44036C92.9712 6.78193 93.7613 6.45271 94.6173 6.45271C95.5391 6.45271 96.2634 6.84777 96.7243 7.76958C97.3827 6.91361 98.0412 6.45271 99.1605 6.45271C99.9506 6.45271 100.675 6.78193 101.07 7.30867C101.531 7.90127 101.597 8.69139 101.597 9.67904V13.8272H99.8189V9.87658C99.8189 8.69139 99.4239 8.0988 98.5679 8.0988C97.6461 8.0988 96.9876 8.82308 96.9876 10.2716V13.8272Z" fill="black"/>
+<path d="M133.926 6.45271C133.136 6.45271 132.543 6.78193 131.819 7.37452V6.58439H130.041V13.8272H131.819V10.7984C131.819 10.7068 131.818 10.6163 131.817 10.5268C131.81 9.90863 131.803 9.34073 132.148 8.82308C132.477 8.36217 132.872 8.0988 133.399 8.0988C134.519 8.0988 134.65 8.95477 134.65 10.4033V13.8272H136.428V8.95477C136.428 7.37452 135.243 6.45271 133.926 6.45271Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="136.428" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/Navbar/styles.scss

@@ -0,0 +1,159 @@
+@import '../../style-dictionary-dist/navbar_variables.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.navbar {
+  background-color: $tw-clr-nvgtn-side-nav-item-fill;
+  height: 100%;
+  position: fixed;
+  z-index: 1100;
+  width: $tw-sz-nvgtn-side-nav-width;
+  display: flex;
+  flex-direction: column;
+
+  .logo {
+    background-color: $tw-clr-nvgtn-side-nav-item-fill;
+    padding-bottom: $tw-spc-base-small 0;
+    margin-bottom: $tw-spc-base-small 0;
+
+    svg {
+      margin: $tw-spc-base-medium $tw-spc-base-small;
+      height: $tw-spc-base-small;
+    }
+  }
+  .nav-section {
+    background-color: $tw-clr-nvgtn-side-nav-section-fill;
+    padding: $tw-spc-base-x-small $tw-spc-base-small;
+    .divider {
+      border-top: $tw-sz-dvdr-stroke solid $tw-clr-dvdr-fill;
+    }
+
+    &--title {
+      font-family: $tw-fnt-nvgtn-side-nav-section-title-font-family;
+      font-size: $tw-fnt-nvgtn-side-nav-section-title-font-size;
+      font-weight: $tw-fnt-nvgtn-side-nav-section-title-font-weight;
+      line-height: $tw-fnt-nvgtn-side-nav-section-title-line-height;
+      text-transform: $tw-fnt-nvgtn-side-nav-section-title-text-transform;
+      color: $tw-clr-nvgtn-side-nav-section-title;
+      display: block;
+      margin-top: $tw-spc-base-small;
+    }
+  }
+
+  .nav-item {
+    font-family: $tw-fnt-nvgtn-side-nav-item-label-font-family;
+    font-size: $tw-fnt-nvgtn-side-nav-item-label-font-size;
+    font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
+    line-height: $tw-fnt-nvgtn-side-nav-item-label-line-height;
+    color: $tw-clr-nvgtn-side-nav-item-label;
+    background-color: $tw-clr-nvgtn-side-nav-item-fill;
+
+    .nav-item-content {
+      padding: $tw-sz-base-small;
+      display: flex;
+      width: 100%;
+      font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
+
+      .nav-item--label {
+        flex: 1 1 auto;
+        text-align: left;
+        font-size: 14px;
+        font-weight: 500;
+        color: #3a4445;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &:hover {
+      background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
+      // .nav-item {
+      //   background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
+      // }
+    }
+
+    &:active {
+      background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
+    }
+
+    button {
+      background: none;
+      border: none;
+      padding-right: $tw-spc-base-small;
+      padding-left: $tw-spc-base-x-small;
+    }
+
+    &--children-selected {
+      background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
+
+      &:hover {
+        background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
+
+        & > .nav-item-content {
+          background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
+        }
+      }
+
+      .nav-item {
+        background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
+
+        &:hover {
+          background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
+        }
+      }
+    }
+
+    &--selected {
+      background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
+      position: relative;
+    }
+
+    &--selected:before {
+      content: '';
+      border-bottom-right-radius: $tw-sz-nvgtn-side-nav-item-indicator;
+      border-top-right-radius: $tw-sz-nvgtn-side-nav-item-indicator;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: $tw-sz-nvgtn-side-nav-item-indicator;
+      background-color: $tw-clr-nvgtn-side-nav-item-indicator-fill;
+    }
+
+    &--icon {
+      fill: $tw-clr-icon-fill-text;
+      margin-right: $tw-spc-base-x-small;
+      line-height: $tw-sz-icon-small;
+      height: $tw-sz-icon-small;
+      width: $tw-sz-icon-small;
+    }
+
+    &--arrow {
+      height: $tw-sz-icon-small;
+      width: $tw-sz-icon-small;
+      margin-left: $tw-spc-base-x-small;
+
+      path {
+        fill: $tw-clr-icon-fill-passive;
+      }
+    }
+
+    .subnavbar .nav-item {
+      padding-right: $tw-spc-base-small;
+      background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
+
+      &-content {
+        padding-left: calc(#{$tw-spc-base-small} * 2);
+      }
+    }
+  }
+
+  .nav-footer {
+    margin-top: auto;
+    margin-bottom: 32px;
+  }
+}

package/components/Note.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface Props {
+    children: string;
+}
+export default function Note({ children }: Props): JSX.Element;
+//# sourceMappingURL=Note.d.ts.map

package/components/Note.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/components/Note.tsx"],"names":[],"mappings":";AAaA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQ7D"}

package/components/Note.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Note;
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/styles");
+
+var _react = _interopRequireDefault(require("react"));
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    note: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[200],
+      marginBottom: theme.spacing(3),
+      padding: theme.spacing(2)
+    }
+  };
+});
+
+function Note(_ref) {
+  var children = _ref.children;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: classes.note
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p"
+  }, children));
+}