@bigbinary/neeto-molecules 1.1.10 → 1.1.11

package/dist/ShareViaLink/RegenerateURL.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Typography, Modal, Button, Input } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+var RegenerateURL = function RegenerateURL(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    url = _ref.url,
+    isLoading = _ref.isLoading,
+    handleRegenerate = _ref.handleRegenerate;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(Modal, {
+    "data-testid": "regenerate-url-modal",
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    lineHeight: "normal",
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMolecules.shareViaLink.regenerateUrl.title"))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-6"
+  }, /*#__PURE__*/React.createElement(Input, {
+    disabled: true,
+    label: t("neetoMolecules.shareViaLink.regenerateUrl.inputLabel"),
+    value: url
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.shareViaLink.regenerateUrl.description")))), /*#__PURE__*/React.createElement(Modal.Footer, {
+    className: "space-x-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "regenerate-url-confirm-button",
+    loading: isLoading,
+    label: t("neetoMolecules.shareViaLink.regenerateUrl.submitButtonLabel"),
+    onClick: function onClick() {
+      handleRegenerate();
+      onClose();
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "regenerate-url-cancel-button",
+    style: "text",
+    label: t("neetoMolecules.shareViaLink.regenerateUrl.cancelButtonLabel"),
+    onClick: onClose
+  })));
+};
+export default RegenerateURL;

package/dist/ShareViaLink/SocialMedia.js

@@ -0,0 +1,52 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from "react";
+import { Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import { SOCIAL_MEDIA_OPTIONS } from "./constants";
+import QRCode from "./QRCode";
+var SocialMedia = function SocialMedia(_ref) {
+  var entity = _ref.entity,
+    postTitle = _ref.postTitle,
+    url = _ref.url;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var socialMediaButtonClasses = "neeto-ui-bg-gray-200 hover:neeto-ui-bg-gray-300 flex h-12 w-12 cursor-pointer items-center justify-center neeto-ui-rounded-md transition-colors duration-300 ease-in-out";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex space-x-4 divide-x"
+  }, /*#__PURE__*/React.createElement(QRCode, {
+    entity: entity,
+    url: url
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4 pl-4",
+    "data-testid": "social-media-block"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800",
+    lineHeight: "normal",
+    style: "body2",
+    weight: "medium"
+  }, t("neetoMolecules.shareViaLink.socialMediaShare.title")), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-4"
+  }, Object.entries(SOCIAL_MEDIA_OPTIONS).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      _ref3$ = _ref3[1],
+      label = _ref3$.label,
+      Icon = _ref3$.icon,
+      generateShareUrl = _ref3$.generateShareUrl;
+    return /*#__PURE__*/React.createElement("a", {
+      className: socialMediaButtonClasses,
+      "data-testid": "social-media-button-".concat(key),
+      href: generateShareUrl({
+        id: entity.id,
+        title: postTitle
+      }),
+      key: key,
+      rel: "noopener noreferrer",
+      target: "_blank",
+      title: label
+    }, /*#__PURE__*/React.createElement(Icon, {
+      size: 24
+    }));
+  }))));
+};
+export default SocialMedia;

package/dist/ShareViaLink/constants.js

@@ -0,0 +1,25 @@
+import { t } from "i18next";
+import { Facebook, Linkedin, Twitter } from "@bigbinary/neeto-icons";
+import * as yup from "yup";
+import { facebookShareLink, twitterShareLink, linkedInShareLink } from "./utils";
+export var SOCIAL_MEDIA_OPTIONS = {
+  FACEBOOK: {
+    label: t("neetoMolecules.shareViaLink.socialMediaShare.facebook"),
+    icon: Facebook,
+    generateShareUrl: facebookShareLink
+  },
+  LINKEDIN: {
+    label: t("neetoMolecules.shareViaLink.socialMediaShare.linkedIn"),
+    icon: Linkedin,
+    generateShareUrl: linkedInShareLink
+  },
+  TWITTER: {
+    label: t("neetoMolecules.shareViaLink.socialMediaShare.twitter"),
+    icon: Twitter,
+    generateShareUrl: twitterShareLink
+  }
+};
+export var PATH_VALIDATION_SCHEMA = yup.object().shape({
+  path: yup.string().required(t("neetoMolecules.shareViaLink.editUrl.validationError")).matches(/^[A-Za-z0-9]([\w/-])*$/, t("neetoMolecules.shareViaLink.editUrl.validationError"))
+});
+export var MAX_PREFIX_SIZE = 30;

package/dist/ShareViaLink/edit-url.scss

@@ -0,0 +1,8 @@
+.no-padding {
+  .neeto-ui-input.neeto-ui-input--medium input {
+    padding: 0;
+  }
+  .neeto-ui-input__prefix {
+    color: rgb(var(--neeto-ui-gray-600)) !important;
+  }
+}

package/dist/ShareViaLink/index.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import LinkBlock from "./Link";
+import SocialMedia from "./SocialMedia";
+var ShareViaLink = function ShareViaLink(_ref) {
+  var _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$enabledOptions = _ref.enabledOptions,
+    enabledOptions = _ref$enabledOptions === void 0 ? {
+      regenerate: false,
+      edit: false
+    } : _ref$enabledOptions,
+    _ref$editUrlProps = _ref.editUrlProps,
+    editUrlProps = _ref$editUrlProps === void 0 ? {
+      prefix: "",
+      editablePath: ""
+    } : _ref$editUrlProps,
+    entity = _ref.entity,
+    entityName = _ref.entityName,
+    _ref$handleEdit = _ref.handleEdit,
+    handleEdit = _ref$handleEdit === void 0 ? noop : _ref$handleEdit,
+    _ref$handleRegenerate = _ref.handleRegenerate,
+    handleRegenerate = _ref$handleRegenerate === void 0 ? noop : _ref$handleRegenerate,
+    _ref$previewUrl = _ref.previewUrl,
+    previewUrl = _ref$previewUrl === void 0 ? "" : _ref$previewUrl,
+    socialMediaPostTitle = _ref.socialMediaPostTitle,
+    url = _ref.url;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-border-gray-400 neeto-ui-shadow-xs neeto-ui-rounded-lg neeto-ui-bg-white col-span-2 space-y-4 border p-8",
+    "data-testid": "share-via-link"
+  }, /*#__PURE__*/React.createElement(LinkBlock, {
+    editUrlProps: editUrlProps,
+    enabledOptions: enabledOptions,
+    entityName: entityName,
+    handleEdit: handleEdit,
+    handleRegenerate: handleRegenerate,
+    isLoading: isLoading,
+    previewUrl: previewUrl,
+    url: url
+  }), /*#__PURE__*/React.createElement(SocialMedia, {
+    entity: entity,
+    url: url,
+    postTitle: socialMediaPostTitle
+  }));
+};
+export default ShareViaLink;

package/dist/ShareViaLink/utils.js

@@ -0,0 +1,47 @@
+import { buildUrl } from "@bigbinary/neeto-commons-frontend/utils";
+import { MAX_PREFIX_SIZE } from "./constants";
+export var facebookShareLink = function facebookShareLink(_ref) {
+  var id = _ref.id;
+  return buildUrl("https://www.facebook.com/sharer/sharer.php", {
+    u: "https://".concat(window.location.host, "/").concat(id)
+  });
+};
+export var linkedInShareLink = function linkedInShareLink(_ref2) {
+  var id = _ref2.id,
+    title = _ref2.title;
+  return buildUrl("https://www.linkedin.com/shareArticle", {
+    mini: true,
+    url: "https://".concat(window.location.host, "/").concat(id),
+    title: title
+  });
+};
+export var twitterShareLink = function twitterShareLink(_ref3) {
+  var id = _ref3.id,
+    title = _ref3.title;
+  return buildUrl("http://twitter.com/share", {
+    text: title,
+    url: "https://".concat(window.location.host, "/").concat(id)
+  });
+};
+export var downloadCanvas = function downloadCanvas(canvas) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$name = options.name,
+    name = _options$name === void 0 ? "image" : _options$name,
+    _options$extension = options.extension,
+    extension = _options$extension === void 0 ? "png" : _options$extension;
+  var canvasUrl = canvas.toDataURL("image/".concat(extension));
+  var element = document.createElement("a");
+  element.href = canvasUrl;
+  element.download = "".concat(name, ".").concat(extension);
+  element.click();
+  element.remove();
+};
+export var getPathname = function getPathname(url) {
+  return new URL(url).pathname.slice(1);
+};
+export var getPrefixFromUrl = function getPrefixFromUrl(url) {
+  return "".concat(new URL(url).origin, "/");
+};
+export var truncatePrefix = function truncatePrefix(url) {
+  return url.length > MAX_PREFIX_SIZE ? "...".concat(url.slice(-MAX_PREFIX_SIZE)) : url;
+};

package/dist/Sidebar/AppSwitcher/AppLink.js

@@ -0,0 +1,45 @@
+import React from "react";
+import classnames from "classnames";
+import { capitalize } from "@bigbinary/neeto-commons-frontend/pure";
+import { NeetoIcon } from "@bigbinary/neeto-icons";
+import * as AppIcons from "@bigbinary/neeto-icons/app-icons";
+import { Typography } from "@bigbinary/neetoui";
+import "./appswitcher.scss";
+var AppLink = function AppLink(_ref) {
+  var name = _ref.name,
+    description = _ref.description,
+    url = _ref.url;
+  var appName = "Neeto".concat(name.charAt(0)).concat(name.slice(1).toLowerCase());
+  var AppIcon = AppIcons[appName];
+  return /*#__PURE__*/React.createElement("a", {
+    "data-cy": "".concat(name, "-app-link"),
+    "data-test-id": "neetoapp-link-".concat(name),
+    href: url,
+    rel: "noreferrer",
+    target: "_blank",
+    className: classnames("neeto-molecules-app-switcher-link", {
+      "neeto-molecules-app-switcher-link--active": capitalize(globalProps.appName) === appName
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-molecules-app-switcher-link__icon-holder", {
+      "neeto-ui-bg-primary-500": !AppIcon
+    })
+  }, AppIcon ? /*#__PURE__*/React.createElement(AppIcon, {
+    size: 42
+  }) : /*#__PURE__*/React.createElement(NeetoIcon, {
+    color: "white",
+    size: 42
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-app-switcher-link__content"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    lineHeight: "relaxed",
+    style: "h4",
+    weight: "medium"
+  }, name), /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    style: "body3",
+    weight: "normal"
+  }, description)));
+};
+export default /*#__PURE__*/React.memo(AppLink);

package/dist/Sidebar/AppSwitcher/Backdrop.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { forwardRef } from "react";
+var Backdrop = function Backdrop(_ref, ref) {
+  var children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-testid": "neeto-backdrop",
+    ref: ref
+  }, otherProps), children);
+};
+export default /*#__PURE__*/forwardRef(Backdrop);

package/dist/Sidebar/AppSwitcher/Body.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { useFetchNeetoApps } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Close, Search } from "@bigbinary/neeto-icons";
+import { Button, Input, Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import AppLink from "./AppLink";
+import "./appswitcher.scss";
+var Body = function Body(_ref) {
+  var onClose = _ref.onClose;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useFetchNeetoApps = useFetchNeetoApps(),
+    data = _useFetchNeetoApps.data;
+  var substring = searchTerm.replace(/ /g, "").toLowerCase();
+  var filteredApps = data === null || data === void 0 ? void 0 : data.neetoApps.filter(function (_ref2) {
+    var name = _ref2.name;
+    return name.toLowerCase().includes(substring);
+  });
+  var handleSearch = function handleSearch(e) {
+    return setSearchTerm(e.target.value);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    className: "neeto-molecules-app-switcher__close-btn",
+    "data-cy": "app-switcher-back-button",
+    "data-testid": "app-switcher-back-button",
+    icon: Close,
+    iconPosition: "left",
+    size: "small",
+    style: "text",
+    onClick: onClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-app-switcher__header",
+    "data-cy": "app-switcher-body-wrapper"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "h1"
+  }, t("neetoMolecules.appSwitcher.chooseNeetoProduct")), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-app-switcher__search-wrapper"
+  }, /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
+    "data-cy": "app-switcher-search-input",
+    placeholder: t("neetoMolecules.appSwitcher.searchProducts"),
+    prefix: /*#__PURE__*/React.createElement(Search, null),
+    type: "search",
+    value: searchTerm,
+    onChange: handleSearch
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-app-switcher__body"
+  }, (filteredApps === null || filteredApps === void 0 ? void 0 : filteredApps.length) > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-app-switcher__grid"
+  }, filteredApps.map(function (app) {
+    return /*#__PURE__*/React.createElement(AppLink, _extends({
+      key: app.name
+    }, app));
+  })) : /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-center",
+    style: "body1"
+  }, t("neetoMolecules.appSwitcher.noApps"))));
+};
+export default Body;

package/dist/Sidebar/AppSwitcher/Portal.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+var Portal = function Portal(_ref) {
+  var rootId = _ref.rootId,
+    children = _ref.children;
+  var target = useRef(null);
+  useEffect(function () {
+    var container = document.getElementById(rootId);
+    if (!container) {
+      container = document.createElement("div");
+      container.setAttribute("id", rootId);
+      document.body.appendChild(container);
+    }
+    container.appendChild(target.current);
+    return function () {
+      target.current.remove();
+      if (container.childNodes.length === 0) {
+        container.remove();
+      }
+    };
+  }, [rootId]);
+  if (!target.current) {
+    target.current = document.createElement("div");
+  }
+  return /*#__PURE__*/createPortal(children, target.current);
+};
+export default Portal;

package/dist/Sidebar/AppSwitcher/appswitcher.scss

@@ -0,0 +1,164 @@
+.neeto-molecules-app-switcher__backdrop {
+  position: fixed;
+  z-index: 99998;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+
+  transition: all 0.3s;
+  background-color: #1b1f23dd;
+  backdrop-filter: blur(2px);
+}
+
+.neeto-molecules-app-switcher__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  background-color: rgb(var(--neeto-ui-white));
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto;
+  max-width: 100%;
+  padding: 40px;
+  position: relative;
+
+  backdrop-filter: blur(2px);
+  animation: nuifadeIn 0.3s ease-in;
+
+  transition: all 0.3s;
+
+  &--collapsed {
+    width: 100vw;
+  }
+}
+
+.neeto-molecules-app-switcher__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
+  gap: 24px;
+}
+
+.neeto-molecules-app-switcher__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  gap: 16px;
+  margin-bottom: 32px;
+
+  h1 {
+    font-size: 40px;
+    line-height: var(--neeto-ui-leading-tight);
+    margin-top: -16px;
+  }
+}
+
+.neeto-molecules-app-switcher__close-btn {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+}
+
+.neeto-molecules-app-switcher__search-wrapper {
+  width: 316px;
+}
+
+.neeto-molecules-app-switcher__body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-size: var(--neeto-ui-text-sm);
+  margin-bottom: 24px;
+  gap: 12px;
+}
+
+.neeto-molecules-app-switcher-link {
+  width: 100%;
+  max-width: 100%;
+  border-radius: var(--neeto-ui-rounded-lg);
+  background-color: rgb(var(--neeto-ui-gray-100));
+  border-width: 2px;
+  border-style: solid;
+  cursor: pointer;
+  border-color: rgb(var(--neeto-ui-gray-100));
+  text-decoration: none;
+  transition: background-color 0.3s ease-in-out;
+
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 12px;
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background-color: rgb(var(--neeto-ui-gray-200));
+  }
+
+  &:not(.neeto-molecules-app-switcher-link--active):hover {
+    background-color: rgb(var(--neeto-ui-gray-200));
+  }
+}
+
+.neeto-molecules-app-switcher-link--active {
+  background: rgb(var(--neeto-ui-primary-100));
+  border-color: rgb(var(--neeto-ui-primary-600));
+}
+
+.neeto-molecules-app-switcher-link__icon-holder {
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--neeto-ui-rounded-lg);
+  flex-shrink: 0;
+}
+
+.neeto-molecules-app-switcher-link__content {
+  flex-grow: 1;
+
+  span {
+    display: block;
+  }
+}
+
+// CSS transition group
+
+.neeto-molecules-app-switcher-enter {
+  &.neeto-molecules-app-switcher__backdrop {
+    opacity: 0;
+    backdrop-filter: blur(2px);
+  }
+}
+.neeto-molecules-app-switcher-enter-active,
+.neeto-molecules-app-switcher-enter-done {
+  &.neeto-molecules-app-switcher__backdrop {
+    opacity: 1;
+    backdrop-filter: blur(2px);
+  }
+}
+.neeto-molecules-app-switcher-exit {
+  &.neeto-molecules-app-switcher__backdrop {
+    opacity: 1;
+    backdrop-filter: blur(2px);
+  }
+}
+.neeto-molecules-app-switcher-exit-active {
+  &.neeto-molecules-app-switcher__backdrop {
+    opacity: 0;
+    backdrop-filter: blur(2px);
+  }
+}

package/dist/Sidebar/AppSwitcher/index.js

@@ -0,0 +1,47 @@
+import React, { useRef } from "react";
+import classnames from "classnames";
+import { useHotKeys } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { CSSTransition } from "react-transition-group";
+import "./appswitcher.scss";
+import Backdrop from "./Backdrop";
+import Body from "./Body";
+import Portal from "./Portal";
+import { useOnClickOutside } from "./utils";
+var AppSwitcher = function AppSwitcher(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    isSidebarCollapsed = _ref.isSidebarCollapsed;
+  var paneWrapper = useRef(null);
+  var backdropRef = useRef(null);
+  useOnClickOutside(paneWrapper, backdropRef, onClose);
+  useHotKeys("esc", onClose, {
+    enabled: isOpen,
+    mode: "global"
+  });
+  return /*#__PURE__*/React.createElement(Portal, {
+    rootId: "neeto-ui-portal"
+  }, /*#__PURE__*/React.createElement(CSSTransition, {
+    appear: true,
+    unmountOnExit: true,
+    classNames: "neeto-molecules-app-switcher",
+    "in": isOpen,
+    timeout: 300
+  }, /*#__PURE__*/React.createElement(Backdrop, {
+    key: "switcher-backdrop",
+    ref: backdropRef,
+    className: classnames("neeto-molecules-app-switcher__backdrop", {
+      "neeto-molecules-app-switcher__backdrop--collapsed": isSidebarCollapsed
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-cy": "switcher-wrapper",
+    "data-testid": "switcher-wrapper",
+    key: "switcher-wrapper",
+    ref: paneWrapper,
+    className: classnames("neeto-molecules-app-switcher__wrapper", {
+      "neeto-molecules-app-switcher__wrapper--collapsed": isSidebarCollapsed
+    })
+  }, /*#__PURE__*/React.createElement(Body, {
+    onClose: onClose
+  })))));
+};
+export default AppSwitcher;

package/dist/Sidebar/AppSwitcher/utils.js

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+export var useOnClickOutside = function useOnClickOutside(insideRef, outsideRef, handler) {
+  useEffect(function () {
+    var listener = function listener(event) {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!insideRef.current || insideRef.current.contains(event.target)) {
+        return;
+      }
+      if (outsideRef.current) {
+        // If Outside ref exists, trigger the handler if it contains the event target.
+        if (outsideRef.current.contains(event.target)) {
+          handler(event);
+        }
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return function () {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [insideRef, outsideRef, handler]);
+};

package/dist/Sidebar/Chevron.js

@@ -0,0 +1,14 @@
+import React from "react";
+var Chevron = function Chevron(_ref) {
+  var style = _ref.style;
+  return /*#__PURE__*/React.createElement("svg", {
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    style: style
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.07031 13.8887C7.2207 14.0391 7.40527 14.1211 7.62402 14.1211C8.06836 14.1211 8.41699 13.7725 8.41699 13.3281C8.41699 13.1094 8.32812 12.9043 8.17773 12.7539L3.37207 8.05762L8.17773 3.375C8.32812 3.21777 8.41699 3.0127 8.41699 2.80078C8.41699 2.35645 8.06836 2.00781 7.62402 2.00781C7.40527 2.00781 7.2207 2.08984 7.07031 2.24023L1.73828 7.44922C1.56055 7.62012 1.46484 7.8252 1.46484 8.06445C1.46484 8.29688 1.55371 8.49512 1.73828 8.67969L7.07031 13.8887ZM13.1748 13.8887C13.3252 14.0391 13.5098 14.1211 13.7354 14.1211C14.1797 14.1211 14.5283 13.7725 14.5283 13.3281C14.5283 13.1094 14.4395 12.9043 14.2891 12.7539L9.4834 8.05762L14.2891 3.375C14.4395 3.21777 14.5283 3.0127 14.5283 2.80078C14.5283 2.35645 14.1797 2.00781 13.7354 2.00781C13.5098 2.00781 13.3252 2.08984 13.1748 2.24023L7.84961 7.44922C7.66504 7.62012 7.57617 7.8252 7.56934 8.06445C7.56934 8.29688 7.66504 8.49512 7.84961 8.67969L13.1748 13.8887Z",
+    fill: "currentColor"
+  }));
+};
+export default Chevron;

package/dist/Sidebar/FeaturedTooltip.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Typography } from "@bigbinary/neetoui";
+var FeaturedTooltip = function FeaturedTooltip(_ref) {
+  var label = _ref.label,
+    description = _ref.description;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-flex-col sidebar-featured-tooltip"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-center sidebar-featured-tooltip__title",
+    lineHeight: "tight",
+    style: "h5",
+    weight: "semibold"
+  }, label), description && /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-center neeto-ui-text-gray-400 sidebar-featured-tooltip__description",
+    lineHeight: "normal",
+    style: "body3"
+  }, description));
+};
+export default /*#__PURE__*/React.memo(FeaturedTooltip);