@bigbinary/neeto-molecules 1.1.10 → 1.1.12

package/dist/KeyboardShortcuts/hooks/useKeyboardShortcutsPaneState.js

@@ -0,0 +1,31 @@
+import { withImmutableActions } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { create } from "zustand";
+import { shallow } from "zustand/shallow";
+
+/** @type {import("neetocommons/react-utils").ZustandStoreHook} */
+var useKeyboardShortcutsStore = create(withImmutableActions(function (set) {
+  return {
+    isOpen: false,
+    setIsOpen: function setIsOpen(arg) {
+      if (typeof arg === "function") {
+        set(function (state) {
+          return {
+            isOpen: arg(state.isOpen)
+          };
+        });
+      } else {
+        set({
+          isOpen: arg
+        });
+      }
+    }
+  };
+}));
+var useKeyboardShortcutsPaneState = function useKeyboardShortcutsPaneState() {
+  return useKeyboardShortcutsStore(function (_ref) {
+    var isOpen = _ref.isOpen,
+      setIsOpen = _ref.setIsOpen;
+    return [isOpen, setIsOpen];
+  }, shallow);
+};
+export default useKeyboardShortcutsPaneState;

package/dist/KeyboardShortcuts/index.js

@@ -0,0 +1,9 @@
+import useKeyboardShortcutsPaneState from "./hooks/useKeyboardShortcutsPaneState";
+import KeyboardShortcutsPane from "./Pane";
+import { getGlobalShortcuts } from "./Pane/utils";
+var KeyboardShortcuts = {
+  Pane: KeyboardShortcutsPane,
+  usePaneState: useKeyboardShortcutsPaneState,
+  GLOBAL_SHORTCUTS: getGlobalShortcuts()
+};
+export default KeyboardShortcuts;

package/dist/LoginPage/Form.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { Form, Formik } from "formik";
+import { Button, Input } from "@bigbinary/neetoui/formik";
+import { assoc } from "ramda";
+import { useTranslation, Trans } from "react-i18next";
+import { INITIAL_FORM_VALUES, LOGIN_FORM_VALIDATION_SCHEMA } from "./constants";
+var SignInForm = function SignInForm(_ref) {
+  var handleFormSubmit = _ref.handleFormSubmit;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var emailFromSearchParams = function emailFromSearchParams() {
+    return new URLSearchParams(window.location.search).get("email") || "";
+  };
+  var emailPrefilledInitialValues = function emailPrefilledInitialValues() {
+    return assoc("email", emailFromSearchParams(), INITIAL_FORM_VALUES);
+  };
+  if (Button === undefined) {
+    return /*#__PURE__*/React.createElement(Trans, {
+      components: {
+        code: /*#__PURE__*/React.createElement("code", null)
+      },
+      i18nKey: "neetoMolecules.login.installNeetoUI"
+    });
+  }
+  return /*#__PURE__*/React.createElement(Formik, {
+    initialValues: emailPrefilledInitialValues(),
+    validationSchema: LOGIN_FORM_VALIDATION_SCHEMA,
+    onSubmit: handleFormSubmit
+  }, /*#__PURE__*/React.createElement(Form, {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mb-6"
+  }, /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    "data-cy": "login-email-text-field",
+    "data-test-id": "login-email",
+    label: t("neetoMolecules.login.email"),
+    name: "email"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "mb-6"
+  }, /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    "data-cy": "login-password-text-field",
+    "data-test-id": "login-password",
+    label: t("neetoMolecules.login.password"),
+    name: "password",
+    type: "password"
+  })), /*#__PURE__*/React.createElement(Button, {
+    fullWidth: true,
+    "data-cy": "login-submit-button",
+    "data-test-id": "login-submit-button",
+    label: t("neetoMolecules.login.login"),
+    style: "secondary",
+    type: "submit"
+  })));
+};
+export default SignInForm;

package/dist/LoginPage/constants.js

@@ -0,0 +1,12 @@
+import { t } from "i18next";
+import * as Yup from "yup";
+export var INITIAL_FORM_VALUES = {
+  email: "",
+  password: ""
+};
+export var DEFAULT_EMAIL = "oliver@example.com";
+export var DEFAULT_PASSWORD = "welcome";
+export var LOGIN_FORM_VALIDATION_SCHEMA = Yup.object().shape({
+  email: Yup.string().email(t("neetoMolecules.login.invalidEmail")).required(t("neetoMolecules.login.emailRequired")),
+  password: Yup.string().required(t("neetoMolecules.login.passwordRequired"))
+});

package/dist/LoginPage/index.js

@@ -0,0 +1,103 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState } from "react";
+import { Button, Toastr } from "@bigbinary/neetoui";
+import { useTranslation, Trans } from "react-i18next";
+import { DEFAULT_EMAIL, DEFAULT_PASSWORD } from "./constants";
+import SignInForm from "./Form";
+var SignIn = function SignIn(_ref) {
+  var handleSubmit = _ref.handleSubmit;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var redirectAfterSuccessfulLogin = function redirectAfterSuccessfulLogin(redirectTo) {
+    window.location.pathname = redirectTo || "/";
+  };
+  var handleFormSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formValues) {
+      var response;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return handleSubmit({
+              user: formValues
+            });
+          case 3:
+            response = _context.sent;
+            Toastr.success(t("neetoMolecules.login.success"));
+            redirectAfterSuccessfulLogin(response.redirectTo);
+            _context.next = 10;
+            break;
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](0);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 8]]);
+    }));
+    return function handleFormSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var loginAsOliver = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            setIsSubmitting(true);
+            _context2.next = 3;
+            return handleFormSubmit({
+              email: DEFAULT_EMAIL,
+              password: DEFAULT_PASSWORD
+            });
+          case 3:
+            setIsSubmitting(false);
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function loginAsOliver() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex h-screen w-full justify-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-white neeto-ui-rounded-lg neeto-ui-shadow-sm w-2/3 min-w-max max-w-lg self-center p-10"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "mb-6 text-xl font-medium"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    components: {
+      bold: /*#__PURE__*/React.createElement("b", {
+        "data-test-id": "organization-name"
+      })
+    },
+    i18nKey: "neetoMolecules.login.toOrganizationAccount",
+    values: {
+      organizationName: globalProps.organization.name
+    }
+  })), /*#__PURE__*/React.createElement(Button, {
+    fullWidth: true,
+    disabled: isSubmitting,
+    label: t("neetoMolecules.login.loginAsOliver"),
+    loading: isSubmitting,
+    size: "large",
+    style: "primary",
+    onClick: loginAsOliver
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "my-6 text-center text-lg font-semibold"
+  }, t("neetoMolecules.common.or").toLocaleUpperCase()), /*#__PURE__*/React.createElement(SignInForm, {
+    handleFormSubmit: handleFormSubmit
+  })));
+};
+export default SignIn;

package/dist/MenuBar/AddNew.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "onClick"];
+import React from "react";
+import { Plus } from "@bigbinary/neeto-icons";
+import { Button } from "@bigbinary/neetoui";
+import "./menubar.scss";
+var AddNew = function AddNew(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    onClick = _ref.onClick,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "neeto-molecules-menubar__add-new-wrap"
+  }, otherProps), /*#__PURE__*/React.createElement(Button, {
+    icon: Plus,
+    iconPosition: "left",
+    iconSize: 16,
+    label: label,
+    size: "small",
+    style: "link",
+    onClick: onClick
+  }));
+};
+export default AddNew;

package/dist/MenuBar/Block.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["url", "icon", "label", "count", "active", "onEdit", "onClick", "className"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from "react";
+import classnames from "classnames";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { joinHyphenCase } from "@bigbinary/neeto-commons-frontend/utils";
+import { Typography } from "@bigbinary/neetoui";
+import { Link } from "react-router-dom";
+import "./menubar.scss";
+var Block = function Block(_ref) {
+  var url = _ref.url,
+    icon = _ref.icon,
+    label = _ref.label,
+    count = _ref.count,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    onEdit = _ref.onEdit,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var handleEdit = function handleEdit(e) {
+    e.stopPropagation();
+    onEdit && onEdit();
+  };
+  var Parent = url ? Link : function (props) {
+    return /*#__PURE__*/React.createElement("button", props);
+  };
+  return /*#__PURE__*/React.createElement(Parent, _extends({
+    "data-cy": otherProps["data-cy"] || "menubar-block",
+    to: url,
+    className: classnames("neeto-molecules-menubar__block", _defineProperty({
+      "neeto-molecules-menubar__block--editable": !!onEdit,
+      "neeto-molecules-menubar__block--active": active
+    }, className, className))
+  }, _objectSpread({
+    onClick: onClick
+  }, otherProps)), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-menubar__block-label",
+    "data-cy": joinHyphenCase("menubar-block-label", label)
+  }, icon && /*#__PURE__*/React.createElement("i", {
+    className: "neeto-molecules-menubar__block-icon"
+  }, icon), /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    style: "h5",
+    title: label,
+    weight: "medium"
+  }, label)), Number.isInteger(count) && /*#__PURE__*/React.createElement("div", {
+    onClick: handleEdit
+  }, /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    style: "h5",
+    weight: "medium"
+  }, count)));
+};
+export default Block;

package/dist/MenuBar/Item.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "description", "active", "className"];
+import React from "react";
+import classnames from "classnames";
+import { Typography } from "@bigbinary/neetoui";
+import "./menubar.scss";
+var Item = function Item(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: classnames("neeto-molecules-menubar__item", _defineProperty({
+      "neeto-molecules-menubar__item--active": active
+    }, className, className))
+  }, otherProps), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-menubar__item-header",
+    component: "h5",
+    style: "h4"
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-menubar__item-desc",
+    style: "body3"
+  }, description));
+};
+export default Item;

package/dist/MenuBar/Search.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["t", "isCollapsed", "onCollapse"];
+import React from "react";
+import { withT } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Search as NeetoUISearchIcon, Close } from "@bigbinary/neeto-icons";
+import { Button, Input } from "@bigbinary/neetoui";
+import PropTypes from "prop-types";
+import "./menubar.scss";
+var Search = withT(function (_ref) {
+  var t = _ref.t,
+    _ref$isCollapsed = _ref.isCollapsed,
+    isCollapsed = _ref$isCollapsed === void 0 ? true : _ref$isCollapsed,
+    onCollapse = _ref.onCollapse,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isCollapsed && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-menubar__search"
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    placeholder: t("neetoMolecules.common.actions.search"),
+    prefix: /*#__PURE__*/React.createElement(NeetoUISearchIcon, null),
+    type: "search"
+  }, props)), /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "menubar-search-close-icon",
+    icon: Close,
+    style: "text",
+    onClick: onCollapse
+  })));
+});
+Search.propTypes = {
+  /**
+   * To specify whether the search field is collapsed.
+   */
+  isCollapsed: PropTypes.bool,
+  /**
+   * To provide a callback function on collapse of the search field.
+   */
+  onCollapse: PropTypes.func
+};
+export default Search;

package/dist/MenuBar/SubTitle.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "iconProps"];
+import React from "react";
+import { Button } from "@bigbinary/neetoui";
+import "./menubar.scss";
+var SubTitle = function SubTitle(_ref) {
+  var children = _ref.children,
+    iconProps = _ref.iconProps,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "neeto-molecules-menubar__subtitle",
+    "data-cy": otherProps["data-cy"] || "menubar-subtitle-heading"
+  }, otherProps), children, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-menubar__subtitle-actions"
+  }, iconProps === null || iconProps === void 0 ? void 0 : iconProps.map(function (iconProp, index) {
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      key: index,
+      style: "text"
+    }, iconProp));
+  })));
+};
+export default SubTitle;

package/dist/MenuBar/index.js

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "children", "showMenu", "className"];
+import React from "react";
+import classnames from "classnames";
+import { Typography } from "@bigbinary/neetoui";
+import { CSSTransition } from "react-transition-group";
+import AddNew from "./AddNew";
+import Block from "./Block";
+import Item from "./Item";
+import "./menubar.scss";
+import Search from "./Search";
+import SubTitle from "./SubTitle";
+var MenuBar = function MenuBar(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    children = _ref.children,
+    _ref$showMenu = _ref.showMenu,
+    showMenu = _ref$showMenu === void 0 ? false : _ref$showMenu,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(CSSTransition, {
+    unmountOnExit: true,
+    classNames: "neeto-molecules-menubar",
+    "in": showMenu,
+    timeout: 300
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-molecules-menubar__wrapper", _defineProperty({}, className, className))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-menubar__container",
+    "data-cy": "menubar-container"
+  }, title && /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-menubar__title",
+    "data-cy": otherProps["data-cy"] || "menubar-heading",
+    lineHeight: "tight",
+    style: "h2",
+    weight: "semibold"
+  }, title), children)));
+};
+MenuBar.Block = Block;
+MenuBar.Item = Item;
+MenuBar.SubTitle = SubTitle;
+MenuBar.Search = Search;
+MenuBar.AddNew = AddNew;
+export default MenuBar;

package/dist/MenuBar/menubar.scss

@@ -0,0 +1,154 @@
+.neeto-molecules-menubar__wrapper {
+  background-color: rgb(var(--neeto-ui-white)) !important;
+  border-right: 1px solid rgb(var(--neeto-ui-gray-300));
+  flex-shrink: 0;
+  overflow: hidden;
+
+  transition: all 0.3s;
+}
+
+.neeto-molecules-menubar__container {
+  width: 324px;
+  padding: 32px !important;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.neeto-molecules-menubar__title {
+  margin-bottom: 16px;
+}
+
+// search
+
+.neeto-molecules-menubar__search {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  gap: 4px;
+}
+
+// subtitle
+
+.neeto-molecules-menubar__subtitle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  margin-top: 20px;
+
+  &-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+// block
+
+.neeto-molecules-menubar__add-new-wrap {
+  padding: 7px 8px;
+  margin-bottom: 8px;
+}
+
+.neeto-molecules-menubar__block {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 7px 8px;
+  margin-bottom: 8px;
+  transition: all 0.3s;
+  cursor: pointer;
+  border-radius: var(--neeto-ui-rounded);
+  border: thin solid transparent;
+
+  &:hover,
+  &:focus,
+  &:focus-visible,
+  &:active {
+    background-color: rgb(var(--neeto-ui-gray-200));
+    text-decoration: none;
+    outline: none;
+  }
+
+  &--active {
+    background-color: rgb(var(--neeto-ui-white));
+    box-shadow: var(--neeto-ui-shadow-xs);
+    border-color: rgb(var(--neeto-ui-gray-300));
+
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:active {
+      background-color: rgb(var(--neeto-ui-white));
+    }
+  }
+
+  .neeto-molecules-menubar__block-label {
+    display: flex;
+    align-items: center;
+  }
+  .neeto-molecules-menubar__block-icon {
+    margin-right: 4px;
+  }
+}
+
+// item
+
+.neeto-molecules-menubar__item {
+  padding: 12px;
+  width: 100%;
+  margin-bottom: 8px;
+  transition: all 0.3s;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--neeto-ui-rounded);
+  border: thin solid transparent;
+
+  &:hover,
+  &:focus,
+  &:focus-visible,
+  &:active {
+    background-color: rgb(var(--neeto-ui-gray-200));
+    outline: none;
+  }
+
+  &--active {
+    background-color: rgb(var(--neeto-ui-white));
+    color: rgb(var(--neeto-ui-gray-800));
+    box-shadow: var(--neeto-ui-shadow-xs);
+    border-color: rgb(var(--neeto-ui-gray-300));
+
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:active {
+      background-color: rgb(var(--neeto-ui-white));
+    }
+  }
+}
+
+// CSS transition group
+
+.neeto-molecules-menubar-enter {
+  &.neeto-molecules-menubar__wrapper {
+    width: 0;
+  }
+}
+.neeto-molecules-menubar-enter-active,
+.neeto-molecules-menubar-enter-done {
+  &.neeto-molecules-menubar__wrapper {
+    width: 324px;
+  }
+}
+.neeto-molecules-menubar-exit {
+  &.neeto-molecules-menubar__wrapper {
+    width: 324px;
+  }
+}
+.neeto-molecules-menubar-exit-active {
+  &.neeto-molecules-menubar__wrapper {
+    width: 0;
+  }
+}

package/dist/Metadata/Block.js

@@ -0,0 +1,30 @@
+import React from "react";
+import classnames from "classnames";
+import { Typography } from "@bigbinary/neetoui";
+var Block = function Block(_ref) {
+  var title = _ref.title,
+    actionBlock = _ref.actionBlock,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-metadata__block mb-5 w-full",
+    "data-cy": "neeto-molecules-metadata-block",
+    "data-testid": "metadata-block"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mb-2 flex w-full items-center justify-between gap-2"
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "flexitems-center w-60 gap-2 break-all"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700",
+    "data-testid": "metadata-block-title",
+    style: "h5",
+    textTransform: "uppercase",
+    weight: "bold"
+  }, title)), actionBlock && /*#__PURE__*/React.createElement("div", {
+    className: "ml-auto"
+  }, actionBlock)), /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-molecules-metadata__card overflow-y-hidden border p-4", className)
+  }, children));
+};
+export default Block;