@bigbinary/neeto-molecules 1.1.10 → 1.1.11

package/dist/PageLoader/index.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["text"];
+import React from "react";
+import { Typography } from "@bigbinary/neetoui";
+var Neeto = function Neeto(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M414.989 207.495C414.989 92.899 322.091 0 207.495 0H0v414.989h414.989V207.495Z",
+    fill: "#0043AC"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "a",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "415",
+    height: "415"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M414.989 207.495C414.989 92.899 322.091 0 207.495 0H0v414.989h414.989V207.495Z",
+    fill: "#0043AC"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M233.747 348.74c88.579 101.145 172.015 116.411 202.661 111.401v32.491H-8.032V230.487c43.685-2.726 153.2 17.108 241.779 118.253Z",
+    fill: "url(#b)"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
+    id: "b",
+    cx: "0",
+    cy: "0",
+    r: "1",
+    gradientUnits: "userSpaceOnUse",
+    gradientTransform: "rotate(47.118 -220.556 214.818) scale(427.964 725.049)"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: "#0043AC"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "1",
+    stopColor: "#3DB1CA",
+    stopOpacity: ".8"
+  }))));
+};
+Neeto.defaultProps = {
+  width: "50",
+  height: "50",
+  viewBox: "0 0 415 415",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import "./page-loader.scss";
+var PageLoader = function PageLoader(_ref) {
+  var _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "" : _ref$text,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "neeto-molecules-pageloader__wrapper"
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-pageloader neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-justify-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-pageloader__content neeto-ui-flex neeto-ui-flex-shrink-0 neeto-ui-items-center neeto-ui-justify-center"
+  }, /*#__PURE__*/React.createElement(Neeto, {
+    className: "neeto-molecules-pageloader__logo",
+    size: 50
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-pageloader__spinner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-pageloader__rect1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-pageloader__rect2"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-pageloader__rect3"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-pageloader__rect4"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-pageloader__rect5"
+  }))), text && /*#__PURE__*/React.createElement(Typography, {
+    style: "h5",
+    weight: "semibold"
+  }, text)));
+};
+export default /*#__PURE__*/React.memo(PageLoader);

package/dist/PageLoader/page-loader.scss

@@ -0,0 +1,95 @@
+.neeto-molecules-pageloader__wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .neeto-molecules-pageloader {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .neeto-molecules-pageloader__content {
+      position: relative;
+      padding: 8px;
+      margin-bottom: 16px;
+      width: 66px;
+      height: 66px;
+      overflow: hidden;
+    }
+
+    .neeto-molecules-pageloader__text {
+      margin-bottom: 4rem;
+      text-align: center;
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      color: rgb(var(--neeto-ui-gray-800));
+    }
+  }
+
+  .neeto-molecules-pageloader__spinner {
+    height: 25px;
+    display: flex;
+    gap: 2px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .neeto-molecules-pageloader__spinner > div {
+    background-color: #fff;
+    height: 100%;
+    width: 2px;
+    border-radius: 2px;
+    display: inline-flex;
+
+    -webkit-animation: neeto-ui-stretch-delay 1.2s infinite ease-in-out;
+    animation: neeto-ui-stretch-delay 1.2s infinite ease-in-out;
+  }
+
+  .neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect2 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+
+  .neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect3 {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+  }
+
+  .neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect4 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+  }
+
+  .neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect5 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+
+  @-webkit-keyframes neeto-ui-stretch-delay {
+    0%,
+    40%,
+    100% {
+      -webkit-transform: scaleY(0.4);
+    }
+    20% {
+      -webkit-transform: scaleY(1);
+    }
+  }
+
+  @keyframes neeto-ui-stretch-delay {
+    0%,
+    40%,
+    100% {
+      transform: scaleY(0.4);
+      -webkit-transform: scaleY(0.4);
+    }
+    20% {
+      transform: scaleY(1);
+      -webkit-transform: scaleY(1);
+    }
+  }

package/dist/PhoneNumber/CountryPicker/SingleValue.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["country", "showEmoji"];
+import React from "react";
+import { countries } from "countries-list";
+import { Tooltip, Typography } from "@bigbinary/neetoui";
+var SingleValue = function SingleValue(_ref) {
+  var country = _ref.country,
+    _ref$showEmoji = _ref.showEmoji,
+    showEmoji = _ref$showEmoji === void 0 ? false : _ref$showEmoji,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  if (!showEmoji) return null;
+  var countryData = countries[country];
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: countryData.name
+  }, /*#__PURE__*/React.createElement(Typography, _extends({
+    className: "cursor-pointer text-center text-xl",
+    style: "body2"
+  }, otherProps), countryData.emoji));
+};
+export default /*#__PURE__*/React.memo(SingleValue);

package/dist/PhoneNumber/CountryPicker/constants.js

@@ -0,0 +1,26 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { countries } from "countries-list";
+import { mergeLeft, assoc } from "ramda";
+export var COUNTRY_PICKER_OPTIONS = Object.entries(countries).map(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    code = _ref2[0],
+    country = _ref2[1];
+  return {
+    label: country.name,
+    value: code
+  };
+});
+export var COUNTRY_PICKER_STYLES = {
+  menuPortal: mergeLeft({
+    width: 196,
+    zIndex: 99999
+  }),
+  control: mergeLeft({
+    border: "none !important",
+    cursor: "pointer",
+    gap: 4
+  }),
+  input: assoc("position", "absolute !important"),
+  valueContainer: assoc("padding", "0 !important"),
+  indicatorsContainer: assoc("paddingRight", "0 !important")
+};

package/dist/PhoneNumber/CountryPicker/index.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["country", "setCountry", "onInputChange", "prefix", "phoneNumber"];
+import React, { useState } from "react";
+import classnames from "classnames";
+import { getCountryCallingCode } from "libphonenumber-js/min";
+import { Select } from "@bigbinary/neetoui";
+import { COUNTRY_PICKER_OPTIONS, COUNTRY_PICKER_STYLES } from "./constants";
+import _SingleValue from "./SingleValue";
+var CountryPicker = function CountryPicker(_ref) {
+  var country = _ref.country,
+    setCountry = _ref.setCountry,
+    onInputChange = _ref.onInputChange,
+    prefix = _ref.prefix,
+    phoneNumber = _ref.phoneNumber,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var handleCountryChange = function handleCountryChange(_ref2) {
+    var value = _ref2.value;
+    setCountry(value);
+    onInputChange(phoneNumber.replace(prefix, "+".concat(getCountryCallingCode(value))));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("flex-shrink-0", {
+      "w-10": !searchTerm,
+      "w-24": searchTerm
+    })
+  }, /*#__PURE__*/React.createElement(Select, _extends({
+    isSearchable: true,
+    "data-testid": "phonenumber-country-picker",
+    options: COUNTRY_PICKER_OPTIONS,
+    strategy: "fixed",
+    styles: COUNTRY_PICKER_STYLES,
+    value: {
+      value: country
+    },
+    components: {
+      SingleValue: function SingleValue() {
+        return /*#__PURE__*/React.createElement(_SingleValue, {
+          showEmoji: true,
+          country: country
+        });
+      }
+    },
+    isOptionSelected: function isOptionSelected(_ref3, _ref4) {
+      var value = _ref3.value;
+      var _ref5 = _slicedToArray(_ref4, 1),
+        selectedOption = _ref5[0];
+      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) === value;
+    },
+    onChange: handleCountryChange,
+    onInputChange: setSearchTerm
+  }, otherProps)));
+};
+export default /*#__PURE__*/React.memo(CountryPicker);

package/dist/PhoneNumber/FormikPhoneNumberInput.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name"];
+import React from "react";
+import { useField } from "formik";
+import PhoneNumberInput from "./PhoneNumberInput";
+var FormikPhoneNumberInput = function FormikPhoneNumberInput(_ref) {
+  var name = _ref.name,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0],
+    meta = _useField2[1],
+    setValue = _useField2[2].setValue;
+  return /*#__PURE__*/React.createElement(PhoneNumberInput, _extends({}, field, {
+    error: meta.touched ? meta.error : "",
+    onChange: setValue
+  }, props));
+};
+export default FormikPhoneNumberInput;

package/dist/PhoneNumber/PhoneNumber.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "defaultCountry", "value", "showEmoji", "children"];
+import React from "react";
+import classnames from "classnames";
+import { Typography } from "@bigbinary/neetoui";
+import SingleValue from "./CountryPicker/SingleValue";
+import { getPhoneData } from "./utils";
+var PhoneNumber = function PhoneNumber(_ref) {
+  var className = _ref.className,
+    _ref$defaultCountry = _ref.defaultCountry,
+    defaultCountry = _ref$defaultCountry === void 0 ? "IN" : _ref$defaultCountry,
+    value = _ref.value,
+    _ref$showEmoji = _ref.showEmoji,
+    showEmoji = _ref$showEmoji === void 0 ? false : _ref$showEmoji,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _getPhoneData = getPhoneData(value || children, defaultCountry),
+    international = _getPhoneData.international,
+    country = _getPhoneData.country;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(["flex items-center space-x-2", className])
+  }, /*#__PURE__*/React.createElement(SingleValue, _extends({
+    country: country,
+    showEmoji: showEmoji
+  }, otherProps)), /*#__PURE__*/React.createElement(Typography, _extends({
+    style: "body2"
+  }, otherProps), international));
+};
+export default /*#__PURE__*/React.memo(PhoneNumber);

package/dist/PhoneNumber/PhoneNumberInput.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "onChange", "className", "error", "defaultCountry", "selectProps"];
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import { formatIncompletePhoneNumber, getCountryCallingCode } from "libphonenumber-js/min";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { Input } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import CountryPicker from "./CountryPicker";
+import { getCursorPosition, getPhoneData } from "./utils";
+var PhoneNumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+    className = _ref.className,
+    error = _ref.error,
+    _ref$defaultCountry = _ref.defaultCountry,
+    defaultCountry = _ref$defaultCountry === void 0 ? "IN" : _ref$defaultCountry,
+    selectProps = _ref.selectProps,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var internalValue = useRef(value);
+  var _useState = useState(defaultCountry),
+    _useState2 = _slicedToArray(_useState, 2),
+    country = _useState2[0],
+    setCountry = _useState2[1];
+  var prefix = country ? "+".concat(getCountryCallingCode(country)) : "";
+  var formattedValue = formatIncompletePhoneNumber(value, country);
+  var handleInputChange = useCallback(function (value) {
+    onChange(value);
+    internalValue.current = value;
+  }, []);
+  var handleChange = function handleChange(event) {
+    var _getPhoneData = getPhoneData(event.target.value, country),
+      phoneNumber = _getPhoneData.phoneNumber,
+      newCountry = _getPhoneData.country;
+    handleInputChange(phoneNumber);
+    setCountry(newCountry);
+    var cursor = getCursorPosition({
+      event: event,
+      prevFormattedValue: formattedValue,
+      newFormattedValue: formatIncompletePhoneNumber(phoneNumber, newCountry)
+    });
+    window.requestAnimationFrame(function () {
+      return event.target.setSelectionRange(cursor, cursor);
+    });
+  };
+  useEffect(function () {
+    if (internalValue.current !== value) {
+      setCountry(getPhoneData(value, defaultCountry).country);
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames([className])
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    "data-testid": "phonenumber-input",
+    error: error,
+    ref: ref,
+    type: "tel",
+    value: formattedValue,
+    placeholder: t("neetoMolecules.phoneNumberInput.placeholder", {
+      prefix: prefix
+    }),
+    prefix: /*#__PURE__*/React.createElement(CountryPicker, _extends({
+      country: country,
+      phoneNumber: value,
+      prefix: prefix,
+      setCountry: setCountry,
+      onInputChange: handleInputChange
+    }, selectProps)),
+    onChange: handleChange
+  }, inputProps)));
+});
+PhoneNumberInput.displayName = "PhoneNumberInput";
+export default PhoneNumberInput;

package/dist/PhoneNumber/index.js

@@ -0,0 +1,5 @@
+import FormikPhoneNumberInput from "./FormikPhoneNumberInput";
+import PhoneNumber from "./PhoneNumber";
+import PhoneNumberInput from "./PhoneNumberInput";
+import { isPhoneNumberValid, validation } from "./utils";
+export { PhoneNumber, PhoneNumberInput, FormikPhoneNumberInput, isPhoneNumberValid, validation };

package/dist/PhoneNumber/utils.js

@@ -0,0 +1,55 @@
+import i18next from "i18next";
+import { formatIncompletePhoneNumber, isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js/min";
+import * as yup from "yup";
+export var isPhoneNumberValid = function isPhoneNumberValid() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    rest[_key - 1] = arguments[_key];
+  }
+  return isValidPhoneNumber.apply(void 0, [value].concat(rest));
+};
+export var validation = function validation() {
+  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : i18next.t("neetoMolecules.phoneNumberInput.validations.invalid");
+  return yup.string().test("phoneNumber", message, function (phoneNumber) {
+    return phoneNumber ? isValidPhoneNumber(phoneNumber) : true;
+  });
+};
+export var getPhoneData = function getPhoneData(value, defaultCountry) {
+  try {
+    var parsedValue = parsePhoneNumber(value, defaultCountry);
+    return {
+      phoneNumber: parsedValue.number,
+      international: parsedValue.formatInternational(),
+      country: parsedValue.country || defaultCountry
+    };
+  } catch (_unused) {
+    return {
+      phoneNumber: value,
+      international: formatIncompletePhoneNumber(value, defaultCountry),
+      country: defaultCountry
+    };
+  }
+};
+export var getCursorPosition = function getCursorPosition(_ref) {
+  var event = _ref.event,
+    prevFormattedValue = _ref.prevFormattedValue,
+    newFormattedValue = _ref.newFormattedValue;
+  var inputType = event.nativeEvent.inputType,
+    _event$target = event.target,
+    newValue = _event$target.value,
+    selectionStart = _event$target.selectionStart;
+  if (selectionStart === newValue.length) return newFormattedValue.length;
+  var n = prevFormattedValue.substring(0, selectionStart).replace(/\s/g, "").length;
+  var cursor = 0;
+  for (var i = 0; i < n; ++i, ++cursor) {
+    if (newFormattedValue[cursor] === " ") ++cursor;
+  }
+  if (inputType !== "deleteContentBackward") {
+    if (newFormattedValue[selectionStart - 1] === " " && prevFormattedValue[selectionStart - 1] === " ") {
+      return cursor + 2;
+    } else if (prevFormattedValue[selectionStart - 1] === " ") {
+      return cursor + 1;
+    }
+  }
+  return cursor;
+};

package/dist/PublishBlock/AlertBlock.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { Alert } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+var AlertBlock = function AlertBlock(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(Alert, _extends({
+    "data-cy": "reset-alert",
+    "data-testid": "reset-alert",
+    submitButtonLabel: t("neetoMolecules.common.actions.reset")
+  }, props));
+};
+export default AlertBlock;

package/dist/PublishBlock/index.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["t"],
+  _excluded2 = ["t"],
+  _excluded3 = ["t"],
+  _excluded4 = ["t"];
+import React from "react";
+import classnames from "classnames";
+import { withT } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { ExternalLink, Undo } from "@bigbinary/neeto-icons";
+import { Button, Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import AlertBlock from "./AlertBlock";
+import "./publish-block.scss";
+var ViewDraftButton = withT(function (_ref) {
+  var t = _ref.t,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    "data-cy": "view-draft-button",
+    "data-testid": "view-draft-button",
+    icon: ExternalLink,
+    style: "secondary",
+    target: "_blank",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.viewDraftVersion"),
+      position: "top"
+    }
+  }, props));
+});
+var ResetDraftButton = withT(function (_ref2) {
+  var t = _ref2.t,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    "data-cy": "draft-button",
+    "data-testid": "draft-button",
+    icon: Undo,
+    style: "secondary",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.deleteDraftVersion"),
+      position: "top"
+    }
+  }, props));
+});
+var PublishButton = withT(function (_ref3) {
+  var t = _ref3.t,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    "data-cy": "publish-button",
+    "data-testid": "publish-button",
+    label: t("neetoMolecules.common.actions.publish")
+  }, props));
+});
+var PublishPreviewButton = withT(function (_ref4) {
+  var t = _ref4.t,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    "data-cy": "publish-preview-button",
+    "data-testid": "publish-preview-button",
+    icon: ExternalLink,
+    target: "_blank",
+    className: classnames({
+      "pointer-events-none": props.disabled
+    }, props.className),
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.viewPublishedVersion"),
+      position: "top"
+    }
+  }, props));
+});
+var PublishBlock = function PublishBlock(_ref5) {
+  var renderDraftButtons = _ref5.renderDraftButtons,
+    renderPublishButtons = _ref5.renderPublishButtons;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var draftBlockButtons = renderDraftButtons({
+    ViewDraftButton: ViewDraftButton,
+    ResetDraftButton: ResetDraftButton
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-publish-block",
+    "data-testid": "neeto-molecules-publish-block"
+  }, draftBlockButtons && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.common.actions.draft")), /*#__PURE__*/React.createElement("div", {
+    className: "space-x-1"
+  }, draftBlockButtons)), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 h-full w-px"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-publish-block__action-btn"
+  }, renderPublishButtons({
+    PublishButton: PublishButton,
+    PublishPreviewButton: PublishPreviewButton
+  })));
+};
+PublishBlock.Alert = AlertBlock;
+export default PublishBlock;

package/dist/PublishBlock/publish-block.scss

@@ -0,0 +1,25 @@
+.neeto-molecules-publish-block {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+
+  &__action-btn {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 1px;
+
+    > .neeto-ui-btn {
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}

package/dist/Rename/DummySpan.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from "react";
+var DummySpan = function DummySpan(_ref) {
+  var name = _ref.name,
+    placeholderRef = _ref.placeholderRef,
+    setInputWidth = _ref.setInputWidth;
+  useEffect(function () {
+    var _placeholderRef$curre;
+    //To handle the input width on initial render.
+    var placeholderSpanWidth = (_placeholderRef$curre = placeholderRef.current) === null || _placeholderRef$curre === void 0 ? void 0 : _placeholderRef$curre.offsetWidth;
+    setInputWidth(placeholderSpanWidth);
+  }, [name]);
+  return (
+    /*#__PURE__*/
+    // Dummy element to calculate the width to be set for the input. Do not remove.
+    React.createElement("div", {
+      className: "dummy-span pointer-events-none invisible absolute",
+      ref: placeholderRef
+    }, name.split(" ").join("."))
+  );
+};
+export default DummySpan;

package/dist/Rename/constants.js

@@ -0,0 +1 @@
+export var MIN_WIDTH = 150;