@bigbinary/neeto-templates-frontend 1.1.2 → 1.1.3

package/dist/index.js

@@ -1,25 +1,35 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { noop } from '@bigbinary/neeto-cist';
-import { Typography, Dropdown, Input, Spinner, Button, Modal } from '@bigbinary/neetoui';
-import { useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { MenuHorizontal, Search, LeftArrow } from '@bigbinary/neeto-icons';
+import * as React from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, useMemo, memo } from 'react';
+import { noop, removeBy, renameKeys } from '@bigbinary/neeto-cist';
+import { Typography, Dropdown, Input, Spinner, Button, Modal, Toastr, Tag, Select, Label } from '@bigbinary/neetoui';
+import { useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { MenuHorizontal, Search, LeftArrow, Plus, Check, Settings, Delete } from '@bigbinary/neeto-icons';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Scrollable from '@bigbinary/neeto-molecules/Scrollable';
-import { useTranslation } from 'react-i18next';
-import { prop } from 'ramda';
-import { QueryClient, useInfiniteQuery, useMutation } from 'react-query';
+import { useTranslation, Trans } from 'react-i18next';
+import { prop, pluck, not } from 'ramda';
+import { QueryClient, useQuery, useMutation, useInfiniteQuery, QueryCache, useQueryClient } from 'react-query';
 import axios from 'axios';
 import require$$0 from 'util';
-import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
-import CustomSVG from 'images/dashboard/custom';
+import { DEFAULT_STALE_TIME, SINGULAR, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import classnames from 'classnames';
 import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
-
-function _arrayWithHoles(arr) {
+import { Form } from '@bigbinary/neetoui/formik';
+import { useParams } from 'react-router-dom';
+import { isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
+import '@bigbinary/neeto-molecules/Container';
+import '@bigbinary/neeto-molecules/SubHeader';
+import '@bigbinary/neeto-molecules/TableWrapper';
+import { t as t$1 } from 'i18next';
+import * as yup from 'yup';
+import NeetoHeader from '@bigbinary/neeto-molecules/Header';
+import 'react-query/devtools';
+
+function _arrayWithHoles$1(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
+function _iterableToArrayLimit$1(arr, i) {
   var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
   if (null != _i) {
     var _s,
@@ -47,27 +57,27 @@ function _iterableToArrayLimit(arr, i) {
   }
 }
 
-function _arrayLikeToArray(arr, len) {
+function _arrayLikeToArray$1(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
   return arr2;
 }
 
-function _unsupportedIterableToArray(o, minLen) {
+function _unsupportedIterableToArray$1(o, minLen) {
   if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
   var n = Object.prototype.toString.call(o).slice(8, -1);
   if (n === "Object" && o.constructor) n = o.constructor.name;
   if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
 }
 
-function _nonIterableRest() {
+function _nonIterableRest$1() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+function _slicedToArray$1(arr, i) {
+  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1();
 }
 
 var TEMPLATE_SCREENS = {
@@ -123,7 +133,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
 }
 
 function _iterableToArray(iter) {
@@ -135,7 +145,7 @@ function _nonIterableSpread() {
 }
 
 function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
 }
 
 function createObserverCache() {
@@ -266,8 +276,8 @@ function useIntersectionObserver(args) {
   }];
 }
 
-function _extends() {
-  _extends = Object.assign || function (target) {
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -281,7 +291,7 @@ function _extends() {
     return target;
   };
 
-  return _extends.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
 function useTrackVisibility(args) {
@@ -301,7 +311,7 @@ function useTrackVisibility(args) {
     setWasEverVisible(true);
   }
 
-  return [ref, _extends({}, result, {
+  return [ref, _extends$2({}, result, {
     isVisible: isVisible,
     wasEverVisible: wasEverVisible
   })];
@@ -349,6 +359,27 @@ function useInfiniteScroll(_ref) {
   }];
 }
 
+var _rect, _path;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+const SvgCustom = props => /*#__PURE__*/React.createElement("svg", _extends$1({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 46,
+  height: 46,
+  fill: "none"
+}, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
+  width: 40,
+  height: 40,
+  x: 3,
+  y: 2,
+  fill: "#4558F9",
+  rx: 2
+})), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fill: "#fff",
+  fillRule: "evenodd",
+  d: "M23.75 16a.75.75 0 0 0-1.5 0v5.25H17a.75.75 0 0 0 0 1.5h5.25V28a.75.75 0 0 0 1.5 0v-5.25H29a.75.75 0 0 0 0-1.5h-5.25V16Z",
+  clipRule: "evenodd"
+})));
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -2431,17 +2462,8 @@ var lib = {
     stringify: stringify
 };
 
-var generatePath = function generatePath(path, params) {
-  return Object.entries(params).reduce(function (acc, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      name = _ref2[0],
-      value = _ref2[1];
-    return acc.replace(":".concat(name), value);
-  }, path);
-};
-
 var _excluded = ["url"];
-var list = function list(_ref) {
+var list$1 = function list(_ref) {
   var url = _ref.url,
     params = _objectWithoutProperties(_ref, _excluded);
   return axios.get(url, {
@@ -2453,31 +2475,33 @@ var list = function list(_ref) {
     }
   });
 };
-var create = function create(_ref2) {
+var create$1 = function create(_ref2) {
   var id = _ref2.id,
     url = _ref2.url;
   return axios.post(url, {
-    createTemplate: {
+    template: {
       id: id
     }
+  }, {
+    showToastr: false
   });
 };
-var fetch = function fetch(resourceId, url) {
-  return axios.get(generatePath(url, {
-    resourceId: resourceId
-  }));
-};
-var update = function update(_ref3) {
-  var resourceId = _ref3.resourceId,
-    payload = _ref3.payload,
+var fetch = function fetch(_ref3) {
+  var templateId = _ref3.templateId,
     url = _ref3.url;
-  return axios.put(generatePath(url, {
-    resourceId: resourceId
-  }), payload);
+  return axios.get("".concat(url, "/").concat(templateId), {
+    showToastr: false
+  });
+};
+var update = function update(_ref4) {
+  var resourceId = _ref4.resourceId,
+    payload = _ref4.payload,
+    url = _ref4.url;
+  return axios.put("".concat(url, "/").concat(resourceId), payload);
 };
 var templatesApi = {
-  list: list,
-  create: create,
+  list: list$1,
+  create: create$1,
   update: update,
   fetch: fetch
 };
@@ -2487,7 +2511,7 @@ var QUERY_KEYS = {
   TEMPLATE_TAGS: "template-tags"
 };
 
-var queryClient = new QueryClient({
+var queryClient$1 = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: DEFAULT_STALE_TIME
@@ -2495,8 +2519,8 @@ var queryClient = new QueryClient({
   }
 });
 
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFetchTemplates = function useFetchTemplates(_ref) {
   var url = _ref.url,
     searchTerm = _ref.searchTerm,
@@ -2529,9 +2553,9 @@ var useFetchTemplates = function useFetchTemplates(_ref) {
 };
 var useCreateTemplate = function useCreateTemplate(_ref3, options) {
   var resourceQueryKey = _ref3.resourceQueryKey;
-  return useMutation(templatesApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
+  return useMutation(templatesApi.create, _objectSpread$3(_objectSpread$3({}, options), {}, {
     onSuccess: function onSuccess() {
-      queryClient.invalidateQueries([resourceQueryKey]);
+      queryClient$1.invalidateQueries([resourceQueryKey]);
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
@@ -2539,6 +2563,34 @@ var useCreateTemplate = function useCreateTemplate(_ref3, options) {
     }
   }));
 };
+var useFetchTemplate = function useFetchTemplate(_ref4, options) {
+  var resourceId = _ref4.resourceId,
+    url = _ref4.url;
+  return useQuery([QUERY_KEYS.TEMPLATES, resourceId], function () {
+    return templatesApi.fetch({
+      templateId: resourceId,
+      url: url
+    });
+  }, options);
+};
+var useUpdateTemplate = function useUpdateTemplate(_ref5) {
+  var resourceId = _ref5.resourceId,
+    url = _ref5.url;
+  return useMutation(function (_ref6) {
+    var template = _ref6.template;
+    return templatesApi.update({
+      resourceId: resourceId,
+      url: url,
+      payload: {
+        template: template
+      }
+    });
+  }, {
+    onSuccess: function onSuccess() {
+      queryClient$1.invalidateQueries([QUERY_KEYS.TEMPLATES]);
+    }
+  });
+};
 
 var BlankCard = function BlankCard(_ref) {
   var Icon = _ref.icon,
@@ -2548,21 +2600,21 @@ var BlankCard = function BlankCard(_ref) {
     onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-rounded-lg neeto-ui-bg-white hover:neeto-ui-bg-white neeto-ui-border-primary-500 outline-none flex cursor-pointer flex-col items-center justify-center border border-dashed p-6 transition-all duration-300 ease-in-out hover:border-solid focus:border-solid",
     "data-cy": "start-from-scratch-button",
     tabIndex: 0,
     onClick: !disabled ? onClick : noop
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-text-primary-500 mb-4"
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     size: 40
-  })), /*#__PURE__*/React.createElement(Typography, {
+  })), /*#__PURE__*/React__default.createElement(Typography, {
     className: "text-center",
     lineHeight: "normal",
     style: "h5",
     weight: "semibold"
-  }, title), /*#__PURE__*/React.createElement(Typography, {
+  }, title), /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-600 text-center",
     lineHeight: "leading-4",
     style: "body3"
@@ -2570,18 +2622,18 @@ var BlankCard = function BlankCard(_ref) {
 };
 
 var ButtonLoader = function ButtonLoader() {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     role: "status"
-  }, /*#__PURE__*/React.createElement("svg", {
+  }, /*#__PURE__*/React__default.createElement("svg", {
     "aria-hidden": "true",
     className: "neeto-ui-text-gray-400 inline h-5 w-5 animate-spin",
     fill: "none",
     viewBox: "0 0 100 101",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__default.createElement("path", {
     d: "M100 50.59c0 27.615-22.386 50.001-50 50.001s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zm-90.919 0c0 22.6 18.32 40.92 40.919 40.92 22.599 0 40.919-18.32 40.919-40.92 0-22.598-18.32-40.918-40.919-40.918-22.599 0-40.919 18.32-40.919 40.919z",
     fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__default.createElement("path", {
     d: "M93.968 39.04c2.425-.636 3.894-3.128 3.04-5.486A50 50 0 0041.735 1.279c-2.474.414-3.922 2.919-3.285 5.344.637 2.426 3.12 3.849 5.6 3.484a40.916 40.916 0 0144.131 25.769c.902 2.34 3.361 3.802 5.787 3.165z",
     fill: "#3642df"
   })));
@@ -2613,25 +2665,25 @@ var Card = function Card(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-template neeto-ui-bg-white outline-none neeto-ui-shadow-sm hover:neeto-ui-border-gray-400 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col overflow-hidden border transition-colors duration-300 ease-in-out",
     "data-cy": "template-card",
     tabIndex: 0,
     onClick: onClick
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-template__header"
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     className: "neeto-template__image",
     "data-cy": "template-thumbnail-image",
     src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg p-2 py-1.5"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-800 line-clamp-2",
     "data-cy": "template-card-title",
     lineHeight: "normal",
     style: "body2"
-  }, template.title), /*#__PURE__*/React.createElement(Dropdown, {
+  }, template.title), /*#__PURE__*/React__default.createElement(Dropdown, {
     buttonProps: {
       className: "flex-shrink-0",
       size: "small"
@@ -2641,12 +2693,12 @@ var Card = function Card(_ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
+  }, /*#__PURE__*/React__default.createElement(Menu, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
     "data-cy": "use-this-template-button",
     onClick: function onClick(e) {
       return handleCreateTemplate(e, template.id);
     }
-  }, t("neetoTemplate.templates.editTemplate"), isCreating && /*#__PURE__*/React.createElement(ButtonLoader, null)), /*#__PURE__*/React.createElement(MenuItem.Button, {
+  }, t("neetoTemplate.templates.editTemplate"), isCreating && /*#__PURE__*/React__default.createElement(ButtonLoader, null)), /*#__PURE__*/React__default.createElement(MenuItem.Button, {
     "data-cy": "template-preview-button"
   }, t("neetoTemplate.templates.preview"))))));
 };
@@ -2656,7 +2708,7 @@ var CategoryItem = function CategoryItem(_ref) {
     count = _ref.count,
     isActive = _ref.isActive,
     setCurrentCategory = _ref.setCurrentCategory;
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React__default.createElement("button", {
     "data-cy": "category-".concat(joinHyphenCase(label)),
     tabIndex: 0,
     className: classnames("neeto-ui-rounded-lg outline-none flex w-full items-center justify-between gap-2 border border-solid px-3 py-2 text-sm font-medium leading-4 transition-all duration-300 ease-in-out", {
@@ -2664,11 +2716,11 @@ var CategoryItem = function CategoryItem(_ref) {
       "neeto-ui-text-gray-800 neeto-ui-bg-white neeto-ui-border-gray-300 focus:neeto-ui-border-gray-500": isActive
     }),
     onClick: setCurrentCategory
-  }, /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("span", null, count));
+  }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, count));
 };
 
-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; }
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var List = function List(_ref) {
   var setCurrentScreen = _ref.setCurrentScreen,
     setSelectedTemplate = _ref.setSelectedTemplate,
@@ -2681,11 +2733,11 @@ var List = function List(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(DEFAULT_CATEGORY),
-    _useState2 = _slicedToArray(_useState, 2),
+    _useState2 = _slicedToArray$1(_useState, 2),
     currentCategory = _useState2[0],
     _setCurrentCategory = _useState2[1];
   var _useState3 = useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
+    _useState4 = _slicedToArray$1(_useState3, 2),
     searchTerm = _useState4[0],
     setSearchTerm = _useState4[1];
   var debouncedSearch = useDebounce(searchTerm).trim();
@@ -2706,7 +2758,7 @@ var List = function List(_ref) {
       rootMargin: "0px 0px 700px 0px",
       delayInMs: INFINITE_SCROLL_DELAY
     }),
-    _useInfiniteScroll2 = _slicedToArray(_useInfiniteScroll, 2),
+    _useInfiniteScroll2 = _slicedToArray$1(_useInfiniteScroll, 2),
     sentryRef = _useInfiniteScroll2[0],
     rootRef = _useInfiniteScroll2[1].rootRef;
   var handleCardClick = function handleCardClick(template) {
@@ -2714,53 +2766,53 @@ var List = function List(_ref) {
     setSelectedTemplate(template);
   };
   if (isTemplatesLoading) {
-    return /*#__PURE__*/React.createElement(PageLoader, null);
+    return /*#__PURE__*/React__default.createElement(PageLoader, null);
   }
   var tags = data.tags,
     templates = data.templates,
     templatesCount = data.templatesCount;
-  var categories = [_objectSpread(_objectSpread({}, DEFAULT_CATEGORY), {}, {
+  var categories = [_objectSpread$2(_objectSpread$2({}, DEFAULT_CATEGORY), {}, {
     count: templatesCount
   })].concat(_toConsumableArray(tags));
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-bg-gray-100 gap-18 relative flex min-h-full items-start p-16"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "top-18 sticky left-0 w-80 flex-shrink-0 space-y-8"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-4"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-1"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "create-new-form-title",
     style: "h2",
     weight: "semibold"
   }, t("neetoTemplate.templates.createNewEntity", {
     entity: entity
-  })), /*#__PURE__*/React.createElement(Typography, {
+  })), /*#__PURE__*/React__default.createElement(Typography, {
     lineHeight: "normal",
     style: "body2"
-  }, t("neetoTemplate.templates.description"))), /*#__PURE__*/React.createElement(Input, {
+  }, t("neetoTemplate.templates.description"))), /*#__PURE__*/React__default.createElement(Input, {
     placeholder: t("neetoTemplate.templates.search"),
-    prefix: /*#__PURE__*/React.createElement(Search, null),
+    prefix: /*#__PURE__*/React__default.createElement(Search, null),
     type: "search",
     value: searchTerm,
     onChange: function onChange(_ref2) {
       var value = _ref2.target.value;
       return setSearchTerm(value);
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-3"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     className: "uppercase",
     "data-cy": "template-categories-label",
     style: "h6"
-  }, t("neetoTemplate.templates.categories")), /*#__PURE__*/React.createElement("div", {
+  }, t("neetoTemplate.templates.categories")), /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-2"
   }, categories.map(function (_ref3) {
     var id = _ref3.id,
       name = _ref3.name,
       count = _ref3.count;
-    return /*#__PURE__*/React.createElement(CategoryItem, {
+    return /*#__PURE__*/React__default.createElement(CategoryItem, {
       count: count,
       isActive: currentCategory.id === id,
       key: id,
@@ -2772,20 +2824,20 @@ var List = function List(_ref) {
         });
       }
     });
-  })))), /*#__PURE__*/React.createElement(Scrollable, {
+  })))), /*#__PURE__*/React__default.createElement(Scrollable, {
     ref: rootRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex-grow space-y-6"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-2 gap-6 md:grid-cols-3 2xl:grid-cols-4"
-  }, /*#__PURE__*/React.createElement(BlankCard, {
+  }, /*#__PURE__*/React__default.createElement(BlankCard, {
     description: t("neetoTemplate.templates.blankCard.description"),
     disabled: isCreating,
-    icon: isCreating ? Spinner : CustomSVG,
+    icon: isCreating ? Spinner : SvgCustom,
     title: t("neetoTemplate.templates.blankCard.title"),
     onClick: onCreate
   }), templates === null || templates === void 0 ? void 0 : templates.map(function (template, index) {
-    return /*#__PURE__*/React.createElement(Card, {
+    return /*#__PURE__*/React__default.createElement(Card, {
       key: index,
       template: template,
       afterCreate: afterCreate,
@@ -2795,13 +2847,13 @@ var List = function List(_ref) {
         return handleCardClick(template);
       }
     });
-  })), hasNextPage && /*#__PURE__*/React.createElement("div", {
+  })), hasNextPage && /*#__PURE__*/React__default.createElement("div", {
     className: "my-10 text-center",
     ref: sentryRef
-  }, /*#__PURE__*/React.createElement(Spinner, null)))));
+  }, /*#__PURE__*/React__default.createElement(Spinner, null)))));
 };
 
-var Preview = function Preview(_ref) {
+var Preview$1 = function Preview(_ref) {
   var selectedTemplate = _ref.selectedTemplate,
     setCurrentScreen = _ref.setCurrentScreen,
     afterCreate = _ref.afterCreate,
@@ -2826,32 +2878,32 @@ var Preview = function Preview(_ref) {
   };
   var title = selectedTemplate.title,
     publicLinkId = selectedTemplate.publicLinkId;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "m-auto flex h-full w-full max-w-5xl flex-col space-y-8 py-20"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-between gap-6"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-2"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "preview-template-back-button",
     icon: LeftArrow,
     style: "text",
     onClick: function onClick() {
       return setCurrentScreen(TEMPLATE_SCREENS.LIST);
     }
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React__default.createElement(Typography, {
     className: "leading-none",
     "data-cy": "preview-template-title",
     style: "h2",
     weight: "semibold"
-  }, title)), /*#__PURE__*/React.createElement(Button, {
+  }, title)), /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "preview-use-template-button",
-    label: t("neetoTemplate.v2.form.templates.editTemplate"),
+    label: t("neetoTemplate.templates.editTemplate"),
     loading: isCreating,
     onClick: handleCreateTemplate
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "nf-share-preview neeto-ui-rounded-sm sticky top-10"
-  }, /*#__PURE__*/React.createElement("iframe", {
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10"
+  }, /*#__PURE__*/React__default.createElement("iframe", {
     className: "w-full flex-1 shadow-inner",
     "data-cy": "iframe-id",
     src: buildUrl(PREVIEW_URL, {
@@ -2873,11 +2925,11 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
     _ref$url = _ref.url,
     url = _ref$url === void 0 ? "" : _ref$url;
   var _useState = useState(TEMPLATE_SCREENS.LIST),
-    _useState2 = _slicedToArray(_useState, 2),
+    _useState2 = _slicedToArray$1(_useState, 2),
     currentScreen = _useState2[0],
     setCurrentScreen = _useState2[1];
   var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
+    _useState4 = _slicedToArray$1(_useState3, 2),
     selectedTemplate = _useState4[0],
     setSelectedTemplate = _useState4[1];
   var onModalClose = function onModalClose() {
@@ -2887,12 +2939,12 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
     }, 300); //To accommodate the animation duration.
   };
 
-  return /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/React__default.createElement(Modal, {
     className: "h-screen w-screen overflow-y-auto",
     isOpen: isOpen,
     size: "fullScreen",
     onClose: onModalClose
-  }, currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/React.createElement(List, {
+  }, currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/React__default.createElement(List, {
     setCurrentScreen: setCurrentScreen,
     setSelectedTemplate: setSelectedTemplate,
     isCreating: isCreating,
@@ -2901,7 +2953,7 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
     entity: entity,
     resourceQueryKey: resourceQueryKey,
     url: url
-  }) : /*#__PURE__*/React.createElement(Preview, {
+  }) : /*#__PURE__*/React__default.createElement(Preview$1, {
     selectedTemplate: selectedTemplate,
     setCurrentScreen: setCurrentScreen,
     afterCreate: afterCreate,
@@ -2910,5 +2962,1145 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
   }));
 };
 
-export { CreateTemplateModal as Templates };
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css$1 = ".neeto-chat__metadata-card__spinner{scale:.6}";
+n(css$1,{});
+
+var Title = function Title(_ref) {
+  var _ref$titleProps = _ref.titleProps,
+    titleProps = _ref$titleProps === void 0 ? {} : _ref$titleProps,
+    title = _ref.title,
+    isUpdating = _ref.isUpdating,
+    setIsTagsDropdownVisible = _ref.setIsTagsDropdownVisible,
+    showAddTagsOnTitle = _ref.showAddTagsOnTitle;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tagsTitle = title || t("neetoTags.common.tag", PLURAL);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    didStartUpdate = _useState2[0],
+    setDidStartUpdate = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isCheckIconVisible = _useState4[0],
+    setIsCheckIconVisible = _useState4[1];
+  useEffect(function () {
+    if (!isUpdating) return;
+    setDidStartUpdate(true);
+  }, [isUpdating]);
+  useEffect(function () {
+    if (isUpdating || !didStartUpdate) return;
+    setIsCheckIconVisible(true);
+    setDidStartUpdate(false);
+    setTimeout(function () {
+      setIsCheckIconVisible(false);
+    }, 5000);
+  }, [didStartUpdate, isUpdating]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-2 flex w-full items-center justify-between gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement(Typography, _extends({
+    className: "neeto-ui-text-gray-700",
+    style: "h5",
+    weight: "bold"
+  }, titleProps), tagsTitle), /*#__PURE__*/React__default.createElement("div", {
+    className: "inline-flex h-6 items-center"
+  }, isUpdating && /*#__PURE__*/React__default.createElement(Spinner, {
+    className: "neeto-chat__metadata-card__spinner"
+  }), !isUpdating && isCheckIconVisible && /*#__PURE__*/React__default.createElement(Check, {
+    className: "neeto-ui-text-success-500",
+    size: 20
+  }))), showAddTagsOnTitle && /*#__PURE__*/React__default.createElement(Button, {
+    icon: Settings,
+    size: "15",
+    style: "icon",
+    onClick: function onClick() {
+      return setIsTagsDropdownVisible(function (addTag) {
+        return not(addTag);
+      });
+    }
+  }));
+};
+
+/**
+ * A component that helps to manage tags.
+ * Renders selected tags, has dropdown to list down available tags
+ * and allows user to remove tags from the list.
+ */
+var Tags$2 = function Tags(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    allTags = _ref.allTags,
+    selectedTags = _ref.selectedTags,
+    onTagSelect = _ref.onTagSelect,
+    onTagCreate = _ref.onTagCreate,
+    onTagDelete = _ref.onTagDelete,
+    tagProps = _ref.tagProps,
+    selectProps = _ref.selectProps,
+    buttonProps = _ref.buttonProps,
+    _ref$showSuccessToast = _ref.showSuccessToastr,
+    showSuccessToastr = _ref$showSuccessToast === void 0 ? false : _ref$showSuccessToast,
+    titleProps = _ref.titleProps,
+    _ref$containerProps = _ref.containerProps,
+    containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
+    _ref$isUpdating = _ref.isUpdating,
+    isUpdating = _ref$isUpdating === void 0 ? false : _ref$isUpdating,
+    _ref$showAddTagsOnTit = _ref.showAddTagsOnTitle,
+    showAddTagsOnTitle = _ref$showAddTagsOnTit === void 0 ? true : _ref$showAddTagsOnTit,
+    _ref$showTitleBar = _ref.showTitleBar,
+    showTitleBar = _ref$showTitleBar === void 0 ? true : _ref$showTitleBar,
+    _ref$bodyProps = _ref.bodyProps,
+    bodyProps = _ref$bodyProps === void 0 ? {} : _ref$bodyProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTagsDropdownVisible = _useState2[0],
+    setIsTagsDropdownVisible = _useState2[1];
+  var tags = useMemo(function () {
+    if (!allTags) return [];
+    if (!selectedTags) return allTags;
+    var selectedTagValues = pluck("value", selectedTags);
+    return allTags.filter(function (_ref2) {
+      var value = _ref2.value;
+      return !selectedTagValues.includes(value);
+    });
+  }, [allTags, selectedTags]);
+  var handleAddExistingTag = function handleAddExistingTag(event) {
+    setIsTagsDropdownVisible(false);
+    onTagSelect(event);
+    // @ts-ignore
+    showSuccessToastr && Toastr.success("", {
+      icon: "👍",
+      className: "w-20"
+    });
+  };
+  var handleDeleteTag = function handleDeleteTag(tag) {
+    onTagDelete(tag);
+    // @ts-ignore
+    showSuccessToastr && Toastr.success("", {
+      icon: "👍",
+      className: "w-20"
+    });
+  };
+  var isAddTagsButtonVisible = !showAddTagsOnTitle && !isTagsDropdownVisible;
+  var isTagsBodyVisible = isNotEmpty(selectedTags) || isTagsDropdownVisible || isAddTagsButtonVisible;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: "neeto-ui-tags-wrapper flex w-full flex-col items-start"
+  }, containerProps), showTitleBar && /*#__PURE__*/React__default.createElement(Title, {
+    isUpdating: isUpdating,
+    setIsTagsDropdownVisible: setIsTagsDropdownVisible,
+    showAddTagsOnTitle: showAddTagsOnTitle,
+    title: title,
+    titleProps: titleProps
+  }), isTagsBodyVisible && /*#__PURE__*/React__default.createElement("div", _extends({
+    className: "neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg w-full border p-4"
+  }, bodyProps), isNotEmpty(selectedTags) && /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start gap-2 break-all"
+  }, selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.map(function (tag, index) {
+    return /*#__PURE__*/React__default.createElement(Tag, _extends({
+      key: "".concat(index, "-").concat(tag.label),
+      label: tag.label,
+      style: "primary",
+      onClose: function onClose() {
+        return handleDeleteTag(tag);
+      }
+    }, tagProps));
+  })), isTagsDropdownVisible && /*#__PURE__*/React__default.createElement(Select, _extends({
+    autoFocus: true,
+    isCreateable: true,
+    className: "neeto-ui-mt-4",
+    maxLength: 50,
+    options: tags,
+    placeholder: t("neetoTags.placeholder.selectOrCreateTag"),
+    onChange: function onChange(event) {
+      return handleAddExistingTag(event);
+    },
+    onCreateOption: function onCreateOption(event) {
+      setIsTagsDropdownVisible(false);
+      onTagCreate(event);
+    }
+  }, selectProps)), isAddTagsButtonVisible && /*#__PURE__*/React__default.createElement(Button, _extends({
+    icon: Plus,
+    label: t("neetoTags.button.addTag", SINGULAR),
+    size: "small",
+    style: "link",
+    onClick: function onClick() {
+      return setIsTagsDropdownVisible(true);
+    }
+  }, buttonProps))));
+};
+
+var queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: function onError(error) {
+      return Toastr.error(error);
+    }
+  })
+});
+
+var TAG_KEY = "tag-key";
+var refetchTags = function refetchTags() {
+  return queryClient.invalidateQueries([TAG_KEY]);
+};
+
+({
+  "data-cy": "add-new-tag-button",
+  label: t$1("neetoTags.common.addNewTag", SINGULAR)
+});
+var TAG_NAME_MAX_LENGTH = 50;
+var TAG_DESCRIPTION_MAX_LENGTH = 255;
+yup.object().shape({
+  name: yup.string().typeError(t$1("neetoTags.validation.nameMustBeString")).required(t$1("neetoTags.validation.nameRequired")).max(TAG_NAME_MAX_LENGTH, t$1("neetoTags.validation.nameMaxLength", {
+    length: TAG_NAME_MAX_LENGTH
+  })),
+  description: yup.string().typeError(t$1("neetoTags.validation.descriptionMustBeString")).nullable().max(TAG_DESCRIPTION_MAX_LENGTH, t$1("neetoTags.validation.descriptionMaxLength", {
+    length: TAG_DESCRIPTION_MAX_LENGTH
+  }))
+});
+
+Dropdown.Menu;
+  Dropdown.MenuItem;
+
+({
+  "data-cy": "neeto-tags-go-back-button",
+  size: "small",
+  label: t$1("neetoTags.button.goBack")
+});
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function commonjsRequire(path) {
+	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
+}
+
+var pluralize$1 = {exports: {}};
+
+/* global define */
+pluralize$1.exports;
+
+(function (module, exports) {
+	(function (root, pluralize) {
+	  /* istanbul ignore else */
+	  if (typeof commonjsRequire === 'function' && 'object' === 'object' && 'object' === 'object') {
+	    // Node.
+	    module.exports = pluralize();
+	  } else {
+	    // Browser global.
+	    root.pluralize = pluralize();
+	  }
+	})(commonjsGlobal, function () {
+	  // Rule storage - pluralize and singularize need to be run sequentially,
+	  // while other rules can be optimized using an object for instant lookups.
+	  var pluralRules = [];
+	  var singularRules = [];
+	  var uncountables = {};
+	  var irregularPlurals = {};
+	  var irregularSingles = {};
+
+	  /**
+	   * Sanitize a pluralization rule to a usable regular expression.
+	   *
+	   * @param  {(RegExp|string)} rule
+	   * @return {RegExp}
+	   */
+	  function sanitizeRule (rule) {
+	    if (typeof rule === 'string') {
+	      return new RegExp('^' + rule + '$', 'i');
+	    }
+
+	    return rule;
+	  }
+
+	  /**
+	   * Pass in a word token to produce a function that can replicate the case on
+	   * another word.
+	   *
+	   * @param  {string}   word
+	   * @param  {string}   token
+	   * @return {Function}
+	   */
+	  function restoreCase (word, token) {
+	    // Tokens are an exact match.
+	    if (word === token) return token;
+
+	    // Lower cased words. E.g. "hello".
+	    if (word === word.toLowerCase()) return token.toLowerCase();
+
+	    // Upper cased words. E.g. "WHISKY".
+	    if (word === word.toUpperCase()) return token.toUpperCase();
+
+	    // Title cased words. E.g. "Title".
+	    if (word[0] === word[0].toUpperCase()) {
+	      return token.charAt(0).toUpperCase() + token.substr(1).toLowerCase();
+	    }
+
+	    // Lower cased words. E.g. "test".
+	    return token.toLowerCase();
+	  }
+
+	  /**
+	   * Interpolate a regexp string.
+	   *
+	   * @param  {string} str
+	   * @param  {Array}  args
+	   * @return {string}
+	   */
+	  function interpolate (str, args) {
+	    return str.replace(/\$(\d{1,2})/g, function (match, index) {
+	      return args[index] || '';
+	    });
+	  }
+
+	  /**
+	   * Replace a word using a rule.
+	   *
+	   * @param  {string} word
+	   * @param  {Array}  rule
+	   * @return {string}
+	   */
+	  function replace (word, rule) {
+	    return word.replace(rule[0], function (match, index) {
+	      var result = interpolate(rule[1], arguments);
+
+	      if (match === '') {
+	        return restoreCase(word[index - 1], result);
+	      }
+
+	      return restoreCase(match, result);
+	    });
+	  }
+
+	  /**
+	   * Sanitize a word by passing in the word and sanitization rules.
+	   *
+	   * @param  {string}   token
+	   * @param  {string}   word
+	   * @param  {Array}    rules
+	   * @return {string}
+	   */
+	  function sanitizeWord (token, word, rules) {
+	    // Empty string or doesn't need fixing.
+	    if (!token.length || uncountables.hasOwnProperty(token)) {
+	      return word;
+	    }
+
+	    var len = rules.length;
+
+	    // Iterate over the sanitization rules and use the first one to match.
+	    while (len--) {
+	      var rule = rules[len];
+
+	      if (rule[0].test(word)) return replace(word, rule);
+	    }
+
+	    return word;
+	  }
+
+	  /**
+	   * Replace a word with the updated word.
+	   *
+	   * @param  {Object}   replaceMap
+	   * @param  {Object}   keepMap
+	   * @param  {Array}    rules
+	   * @return {Function}
+	   */
+	  function replaceWord (replaceMap, keepMap, rules) {
+	    return function (word) {
+	      // Get the correct token and case restoration functions.
+	      var token = word.toLowerCase();
+
+	      // Check against the keep object map.
+	      if (keepMap.hasOwnProperty(token)) {
+	        return restoreCase(word, token);
+	      }
+
+	      // Check against the replacement map for a direct word replacement.
+	      if (replaceMap.hasOwnProperty(token)) {
+	        return restoreCase(word, replaceMap[token]);
+	      }
+
+	      // Run all the rules against the word.
+	      return sanitizeWord(token, word, rules);
+	    };
+	  }
+
+	  /**
+	   * Check if a word is part of the map.
+	   */
+	  function checkWord (replaceMap, keepMap, rules, bool) {
+	    return function (word) {
+	      var token = word.toLowerCase();
+
+	      if (keepMap.hasOwnProperty(token)) return true;
+	      if (replaceMap.hasOwnProperty(token)) return false;
+
+	      return sanitizeWord(token, token, rules) === token;
+	    };
+	  }
+
+	  /**
+	   * Pluralize or singularize a word based on the passed in count.
+	   *
+	   * @param  {string}  word      The word to pluralize
+	   * @param  {number}  count     How many of the word exist
+	   * @param  {boolean} inclusive Whether to prefix with the number (e.g. 3 ducks)
+	   * @return {string}
+	   */
+	  function pluralize (word, count, inclusive) {
+	    var pluralized = count === 1
+	      ? pluralize.singular(word) : pluralize.plural(word);
+
+	    return (inclusive ? count + ' ' : '') + pluralized;
+	  }
+
+	  /**
+	   * Pluralize a word.
+	   *
+	   * @type {Function}
+	   */
+	  pluralize.plural = replaceWord(
+	    irregularSingles, irregularPlurals, pluralRules
+	  );
+
+	  /**
+	   * Check if a word is plural.
+	   *
+	   * @type {Function}
+	   */
+	  pluralize.isPlural = checkWord(
+	    irregularSingles, irregularPlurals, pluralRules
+	  );
+
+	  /**
+	   * Singularize a word.
+	   *
+	   * @type {Function}
+	   */
+	  pluralize.singular = replaceWord(
+	    irregularPlurals, irregularSingles, singularRules
+	  );
+
+	  /**
+	   * Check if a word is singular.
+	   *
+	   * @type {Function}
+	   */
+	  pluralize.isSingular = checkWord(
+	    irregularPlurals, irregularSingles, singularRules
+	  );
+
+	  /**
+	   * Add a pluralization rule to the collection.
+	   *
+	   * @param {(string|RegExp)} rule
+	   * @param {string}          replacement
+	   */
+	  pluralize.addPluralRule = function (rule, replacement) {
+	    pluralRules.push([sanitizeRule(rule), replacement]);
+	  };
+
+	  /**
+	   * Add a singularization rule to the collection.
+	   *
+	   * @param {(string|RegExp)} rule
+	   * @param {string}          replacement
+	   */
+	  pluralize.addSingularRule = function (rule, replacement) {
+	    singularRules.push([sanitizeRule(rule), replacement]);
+	  };
+
+	  /**
+	   * Add an uncountable word rule.
+	   *
+	   * @param {(string|RegExp)} word
+	   */
+	  pluralize.addUncountableRule = function (word) {
+	    if (typeof word === 'string') {
+	      uncountables[word.toLowerCase()] = true;
+	      return;
+	    }
+
+	    // Set singular and plural references for the word.
+	    pluralize.addPluralRule(word, '$0');
+	    pluralize.addSingularRule(word, '$0');
+	  };
+
+	  /**
+	   * Add an irregular word definition.
+	   *
+	   * @param {string} single
+	   * @param {string} plural
+	   */
+	  pluralize.addIrregularRule = function (single, plural) {
+	    plural = plural.toLowerCase();
+	    single = single.toLowerCase();
+
+	    irregularSingles[single] = plural;
+	    irregularPlurals[plural] = single;
+	  };
+
+	  /**
+	   * Irregular rules.
+	   */
+	  [
+	    // Pronouns.
+	    ['I', 'we'],
+	    ['me', 'us'],
+	    ['he', 'they'],
+	    ['she', 'they'],
+	    ['them', 'them'],
+	    ['myself', 'ourselves'],
+	    ['yourself', 'yourselves'],
+	    ['itself', 'themselves'],
+	    ['herself', 'themselves'],
+	    ['himself', 'themselves'],
+	    ['themself', 'themselves'],
+	    ['is', 'are'],
+	    ['was', 'were'],
+	    ['has', 'have'],
+	    ['this', 'these'],
+	    ['that', 'those'],
+	    // Words ending in with a consonant and `o`.
+	    ['echo', 'echoes'],
+	    ['dingo', 'dingoes'],
+	    ['volcano', 'volcanoes'],
+	    ['tornado', 'tornadoes'],
+	    ['torpedo', 'torpedoes'],
+	    // Ends with `us`.
+	    ['genus', 'genera'],
+	    ['viscus', 'viscera'],
+	    // Ends with `ma`.
+	    ['stigma', 'stigmata'],
+	    ['stoma', 'stomata'],
+	    ['dogma', 'dogmata'],
+	    ['lemma', 'lemmata'],
+	    ['schema', 'schemata'],
+	    ['anathema', 'anathemata'],
+	    // Other irregular rules.
+	    ['ox', 'oxen'],
+	    ['axe', 'axes'],
+	    ['die', 'dice'],
+	    ['yes', 'yeses'],
+	    ['foot', 'feet'],
+	    ['eave', 'eaves'],
+	    ['goose', 'geese'],
+	    ['tooth', 'teeth'],
+	    ['quiz', 'quizzes'],
+	    ['human', 'humans'],
+	    ['proof', 'proofs'],
+	    ['carve', 'carves'],
+	    ['valve', 'valves'],
+	    ['looey', 'looies'],
+	    ['thief', 'thieves'],
+	    ['groove', 'grooves'],
+	    ['pickaxe', 'pickaxes'],
+	    ['passerby', 'passersby']
+	  ].forEach(function (rule) {
+	    return pluralize.addIrregularRule(rule[0], rule[1]);
+	  });
+
+	  /**
+	   * Pluralization rules.
+	   */
+	  [
+	    [/s?$/i, 's'],
+	    [/[^\u0000-\u007F]$/i, '$0'],
+	    [/([^aeiou]ese)$/i, '$1'],
+	    [/(ax|test)is$/i, '$1es'],
+	    [/(alias|[^aou]us|t[lm]as|gas|ris)$/i, '$1es'],
+	    [/(e[mn]u)s?$/i, '$1s'],
+	    [/([^l]ias|[aeiou]las|[ejzr]as|[iu]am)$/i, '$1'],
+	    [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, '$1i'],
+	    [/(alumn|alg|vertebr)(?:a|ae)$/i, '$1ae'],
+	    [/(seraph|cherub)(?:im)?$/i, '$1im'],
+	    [/(her|at|gr)o$/i, '$1oes'],
+	    [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|automat|quor)(?:a|um)$/i, '$1a'],
+	    [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)(?:a|on)$/i, '$1a'],
+	    [/sis$/i, 'ses'],
+	    [/(?:(kni|wi|li)fe|(ar|l|ea|eo|oa|hoo)f)$/i, '$1$2ves'],
+	    [/([^aeiouy]|qu)y$/i, '$1ies'],
+	    [/([^ch][ieo][ln])ey$/i, '$1ies'],
+	    [/(x|ch|ss|sh|zz)$/i, '$1es'],
+	    [/(matr|cod|mur|sil|vert|ind|append)(?:ix|ex)$/i, '$1ices'],
+	    [/\b((?:tit)?m|l)(?:ice|ouse)$/i, '$1ice'],
+	    [/(pe)(?:rson|ople)$/i, '$1ople'],
+	    [/(child)(?:ren)?$/i, '$1ren'],
+	    [/eaux$/i, '$0'],
+	    [/m[ae]n$/i, 'men'],
+	    ['thou', 'you']
+	  ].forEach(function (rule) {
+	    return pluralize.addPluralRule(rule[0], rule[1]);
+	  });
+
+	  /**
+	   * Singularization rules.
+	   */
+	  [
+	    [/s$/i, ''],
+	    [/(ss)$/i, '$1'],
+	    [/(wi|kni|(?:after|half|high|low|mid|non|night|[^\w]|^)li)ves$/i, '$1fe'],
+	    [/(ar|(?:wo|[ae])l|[eo][ao])ves$/i, '$1f'],
+	    [/ies$/i, 'y'],
+	    [/\b([pl]|zomb|(?:neck|cross)?t|coll|faer|food|gen|goon|group|lass|talk|goal|cut)ies$/i, '$1ie'],
+	    [/\b(mon|smil)ies$/i, '$1ey'],
+	    [/\b((?:tit)?m|l)ice$/i, '$1ouse'],
+	    [/(seraph|cherub)im$/i, '$1'],
+	    [/(x|ch|ss|sh|zz|tto|go|cho|alias|[^aou]us|t[lm]as|gas|(?:her|at|gr)o|[aeiou]ris)(?:es)?$/i, '$1'],
+	    [/(analy|diagno|parenthe|progno|synop|the|empha|cri|ne)(?:sis|ses)$/i, '$1sis'],
+	    [/(movie|twelve|abuse|e[mn]u)s$/i, '$1'],
+	    [/(test)(?:is|es)$/i, '$1is'],
+	    [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, '$1us'],
+	    [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|quor)a$/i, '$1um'],
+	    [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)a$/i, '$1on'],
+	    [/(alumn|alg|vertebr)ae$/i, '$1a'],
+	    [/(cod|mur|sil|vert|ind)ices$/i, '$1ex'],
+	    [/(matr|append)ices$/i, '$1ix'],
+	    [/(pe)(rson|ople)$/i, '$1rson'],
+	    [/(child)ren$/i, '$1'],
+	    [/(eau)x?$/i, '$1'],
+	    [/men$/i, 'man']
+	  ].forEach(function (rule) {
+	    return pluralize.addSingularRule(rule[0], rule[1]);
+	  });
+
+	  /**
+	   * Uncountable rules.
+	   */
+	  [
+	    // Singular words with no plurals.
+	    'adulthood',
+	    'advice',
+	    'agenda',
+	    'aid',
+	    'aircraft',
+	    'alcohol',
+	    'ammo',
+	    'analytics',
+	    'anime',
+	    'athletics',
+	    'audio',
+	    'bison',
+	    'blood',
+	    'bream',
+	    'buffalo',
+	    'butter',
+	    'carp',
+	    'cash',
+	    'chassis',
+	    'chess',
+	    'clothing',
+	    'cod',
+	    'commerce',
+	    'cooperation',
+	    'corps',
+	    'debris',
+	    'diabetes',
+	    'digestion',
+	    'elk',
+	    'energy',
+	    'equipment',
+	    'excretion',
+	    'expertise',
+	    'firmware',
+	    'flounder',
+	    'fun',
+	    'gallows',
+	    'garbage',
+	    'graffiti',
+	    'hardware',
+	    'headquarters',
+	    'health',
+	    'herpes',
+	    'highjinks',
+	    'homework',
+	    'housework',
+	    'information',
+	    'jeans',
+	    'justice',
+	    'kudos',
+	    'labour',
+	    'literature',
+	    'machinery',
+	    'mackerel',
+	    'mail',
+	    'media',
+	    'mews',
+	    'moose',
+	    'music',
+	    'mud',
+	    'manga',
+	    'news',
+	    'only',
+	    'personnel',
+	    'pike',
+	    'plankton',
+	    'pliers',
+	    'police',
+	    'pollution',
+	    'premises',
+	    'rain',
+	    'research',
+	    'rice',
+	    'salmon',
+	    'scissors',
+	    'series',
+	    'sewage',
+	    'shambles',
+	    'shrimp',
+	    'software',
+	    'species',
+	    'staff',
+	    'swine',
+	    'tennis',
+	    'traffic',
+	    'transportation',
+	    'trout',
+	    'tuna',
+	    'wealth',
+	    'welfare',
+	    'whiting',
+	    'wildebeest',
+	    'wildlife',
+	    'you',
+	    /pok[eé]mon$/i,
+	    // Regexes.
+	    /[^aeiou]ese$/i, // "chinese", "japanese"
+	    /deer$/i, // "deer", "reindeer"
+	    /fish$/i, // "fish", "blowfish", "angelfish"
+	    /measles$/i,
+	    /o[iu]s$/i, // "carnivorous"
+	    /pox$/i, // "chickpox", "smallpox"
+	    /sheep$/i
+	  ].forEach(pluralize.addUncountableRule);
+
+	  return pluralize;
+	}); 
+} (pluralize$1, pluralize$1.exports));
+
+var pluralizeExports = pluralize$1.exports;
+var pluralize = /*@__PURE__*/getDefaultExportFromCjs(pluralizeExports);
+
+withT(function (_ref) {
+  var t = _ref.t,
+    _ref$destinationTags = _ref.destinationTags,
+    destinationTags = _ref$destinationTags === void 0 ? [] : _ref$destinationTags,
+    handleSubmit = _ref.handleSubmit,
+    _ref$isSubmitting = _ref.isSubmitting,
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
+    setShowModal = _ref.setShowModal,
+    _ref$showModal = _ref.showModal,
+    showModal = _ref$showModal === void 0 ? false : _ref$showModal,
+    _ref$sourceTags = _ref.sourceTags,
+    sourceTags = _ref$sourceTags === void 0 ? [] : _ref$sourceTags,
+    _ref$tagType = _ref.tagType,
+    tagType = _ref$tagType === void 0 ? "" : _ref$tagType;
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    isOpen: showModal,
+    onClose: function onClose() {
+      return setShowModal(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
+    id: "dialog1Title",
+    style: "h2"
+  }, t("neetoTags.common.mergeTag", PLURAL))), /*#__PURE__*/React__default.createElement(Modal.Body, null, /*#__PURE__*/React__default.createElement(Typography, {
+    lineHeight: "normal",
+    style: "body2"
+  }, /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "neetoTags.helper.mergeTagsMessage",
+    values: {
+      count: sourceTags.length,
+      sourceTags: pluck("name", sourceTags),
+      destinationTag: pluck("name", destinationTags),
+      entities: pluralize(tagType.label.toLowerCase())
+    }
+  }))), /*#__PURE__*/React__default.createElement(Modal.Footer, {
+    className: "space-x-2"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    "data-cy": "neeto-tags-merge-proceed-button",
+    disabled: isSubmitting,
+    label: t("neetoTags.button.proceed"),
+    loading: isSubmitting,
+    onClick: handleSubmit
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    "data-cy": "neeto-tags-merge-cancel-button",
+    label: t("neetoTags.button.cancel"),
+    style: "text",
+    onClick: function onClick() {
+      return setShowModal(false);
+    }
+  })));
+});
+
+var css = ".neeto-tags-border{border-width:thin}.ntm-empty-state{height:100%;margin:auto;width:100%}.ntm-empty-state,.ntm-empty-state__image{align-items:center;display:flex;justify-content:center}.ntm-empty-state__image{margin-left:0 auto 4rem auto}.ntm-empty-state__title{font-size:1.25rem;line-height:1.75rem;margin-bottom:1rem;text-align:center}.ntm-empty-state__description{margin-bottom:1.5rem;text-align:center}.ntm-empty-state__action-block{display:flex;justify-content:center}.neeto-tags-table__wrapper{height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height) - var(--neeto-molecules-sub-header-height) - var(--neeto-molecules-sub-header-bottom-margin));padding:0 24px;width:100%}.neeto-tags-table__column{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.neeto-tags-merge__wrapper{height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height));margin:0 auto;max-width:1200px;padding:0 24px 24px;width:100%}.neeto-tags-merge__wrapper .neeto-tags-merge__container{display:flex;flex-direction:row;height:100%;justify-content:space-between;width:100%}.neeto-tags-merge__wrapper .neeto-tags-merge__container .neeto-tags-merge__list{width:48%}.neeto-tags-merge__wrapper .neeto-tags-merge__container .neeto-tags-merge__list .neeto-tags-merge__items{height:calc(100vh - var(--neeto-molecules-main-header-height) - 120px);overflow-y:auto;padding-top:16px}";
+n(css,{});
+
+var NEETO_TEMPLATES_URL = "/neeto_templates_engine/api/v1";
+var TEMPLATE_TAGS_URL = "".concat(NEETO_TEMPLATES_URL, "/tags/template_tags");
+
+var create = function create(payload) {
+  return axios.post(TEMPLATE_TAGS_URL, {
+    tag: payload
+  });
+};
+var list = function list() {
+  return axios.get(TEMPLATE_TAGS_URL);
+};
+var templateTagsApi = {
+  create: create,
+  list: list
+};
+
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useCreateTemplateTag = function useCreateTemplateTag(options) {
+  var queryClient = useQueryClient();
+  return useMutation(templateTagsApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
+    onSuccess: function onSuccess() {
+      var _options$onSuccess;
+      refetchTags();
+      queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE_TAGS);
+      options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options);
+    }
+  }));
+};
+var useFetchTemplateTags = function useFetchTemplateTags() {
+  return useQuery([QUERY_KEYS.TEMPLATE_TAGS], templateTagsApi.list);
+};
+
+var PageWrapper = function PageWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "nf-form-settings__wrapper w-full flex-col"
+  }, children);
+};
+var PageHeader = function PageHeader(_ref2) {
+  var title = _ref2.title,
+    breadcrumbs = _ref2.breadcrumbs;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full px-6"
+  }, /*#__PURE__*/React__default.createElement(NeetoHeader, {
+    breadcrumbs: breadcrumbs,
+    size: "small",
+    title: title
+  }));
+};
+var customPropEqualityCheck = function customPropEqualityCheck(prevProps, nextProps) {
+  return prevProps.title === nextProps.title && prevProps.breadcrumbs === nextProps.breadcrumbs;
+};
+var MemoizedPageHeader = /*#__PURE__*/memo(PageHeader, customPropEqualityCheck);
+var PageContent = function PageContent(_ref3) {
+  var children = _ref3.children,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? "" : _ref3$className;
+  return /*#__PURE__*/React__default.createElement(Scrollable, {
+    className: "w-full px-6 pb-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(["mx-auto max-w-7xl", className])
+  }, children));
+};
+
+var Tags = function Tags(_ref) {
+  var allTags = _ref.allTags,
+    selectedTags = _ref.selectedTags,
+    onUpdate = _ref.onUpdate,
+    onCreate = _ref.onCreate,
+    isLoading = _ref.isLoading,
+    className = _ref.className,
+    _ref$labelProps = _ref.labelProps,
+    labelProps = _ref$labelProps === void 0 ? {} : _ref$labelProps;
+  var handleTagSelect = function handleTagSelect(newTag) {
+    return onUpdate([].concat(_toConsumableArray(selectedTags), [newTag]));
+  };
+  var handleTagRemove = function handleTagRemove(removedTag) {
+    var updatedTags = removeBy({
+      value: removedTag.value
+    }, selectedTags);
+    onUpdate(updatedTags);
+  };
+  var handleTagCreate = function handleTagCreate(tagName) {
+    onCreate({
+      name: tagName
+    }, {
+      onSuccess: function onSuccess(_ref2) {
+        var tag = _ref2.tag;
+        return handleTagSelect({
+          value: tag.id,
+          label: tag.name
+        });
+      }
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, labelProps.label && /*#__PURE__*/React__default.createElement(Label, labelProps, labelProps.label), /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4"
+  }, /*#__PURE__*/React__default.createElement(Tags$2, {
+    allTags: allTags,
+    selectedTags: selectedTags,
+    buttonProps: {
+      loading: isLoading,
+      disabled: isLoading,
+      iconPosition: "left"
+    },
+    onTagCreate: handleTagCreate,
+    onTagDelete: handleTagRemove,
+    onTagSelect: handleTagSelect
+  })));
+};
+
+var Preview = function Preview(_ref) {
+  var template = _ref.template,
+    imageUrl = _ref.imageUrl;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-template neeto-ui-bg-white outline-none neeto-ui-shadow-sm hover:neeto-ui-border-gray-400 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col overflow-hidden border transition-colors duration-300 ease-in-out",
+    tabIndex: 0
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-template__header"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    className: "neeto-template__image",
+    src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-gray-800",
+    lineHeight: "normal",
+    style: "body2"
+  }, template.title)));
+};
+
+var buildSelectOptionsBy = function buildSelectOptionsBy(labelField, options) {
+  var valueField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "id";
+  return options.map(function (option) {
+    return {
+      value: option[valueField],
+      label: option[labelField]
+    };
+  });
+};
+var buildTagOptions = function buildTagOptions() {
+  var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return renameKeys({
+    id: "value",
+    name: "label"
+  }, tags);
+};
+var buildTemplateUpdatePayload = function buildTemplateUpdatePayload(values) {
+  return {
+    image: values.imageSignedId,
+    tagIds: pluck("value", values === null || values === void 0 ? void 0 : values.tags)
+  };
+};
+
+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; }
+var TemplateSettings = function TemplateSettings(_ref) {
+  var _ref$onCancelTemplate = _ref.onCancelTemplatePreview,
+    onCancelTemplatePreview = _ref$onCancelTemplate === void 0 ? "" : _ref$onCancelTemplate,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    resourceType = _ref.resourceType,
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? "" : _ref$url;
+  var _useParams = useParams(),
+    resourceId = _useParams["".concat(resourceType, "Id")];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchTemplate = useFetchTemplate({
+      resourceId: resourceId,
+      url: url
+    }),
+    data = _useFetchTemplate.data,
+    isFetchingTemplate = _useFetchTemplate.isLoading;
+  var _useUpdateTemplate = useUpdateTemplate({
+      resourceId: resourceId,
+      url: url
+    }),
+    updateTemplate = _useUpdateTemplate.mutate,
+    isUpdatingTemplate = _useUpdateTemplate.isLoading;
+  var _useCreateTemplateTag = useCreateTemplateTag(),
+    createTemplateTag = _useCreateTemplateTag.mutate,
+    isCreatingTags = _useCreateTemplateTag.isLoading;
+  var _useFetchTemplateTags = useFetchTemplateTags(),
+    _useFetchTemplateTags2 = _useFetchTemplateTags.data,
+    templateTags = _useFetchTemplateTags2 === void 0 ? {} : _useFetchTemplateTags2,
+    isTagsLoading = _useFetchTemplateTags.isLoading;
+  var handleSubmit = function handleSubmit(values) {
+    updateTemplate({
+      template: buildTemplateUpdatePayload(values)
+    });
+  };
+  var handleRemoveImage = function handleRemoveImage(setFieldValue) {
+    setFieldValue("imageUrl", "");
+    setFieldValue("imageSignedId", null);
+  };
+  var isLoading = isFetchingTemplate || isTagsLoading;
+  var tags = buildTagOptions(data === null || data === void 0 ? void 0 : data.tags);
+  var formInitialValues = _objectSpread(_objectSpread({
+    imageUrl: null
+  }, data), {}, {
+    tags: tags
+  });
+  return /*#__PURE__*/React__default.createElement(PageWrapper, null, /*#__PURE__*/React__default.createElement(MemoizedPageHeader, {
+    breadcrumbs: breadcrumbs,
+    title: t("neetoTemplate.templateSettings.title")
+  }), /*#__PURE__*/React__default.createElement(PageContent, {
+    className: "h-full"
+  }, isLoading ? /*#__PURE__*/React__default.createElement(PageLoader, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "mb-1",
+    "data-cy": "thank-you-action-text",
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoTemplate.templateSettings.configureTemplates")), /*#__PURE__*/React__default.createElement(Typography, {
+    className: "mb-2",
+    "data-cy": "thank-you-description-label",
+    style: "body2"
+  }, t("neetoTemplate.templateSettings.subText")), /*#__PURE__*/React__default.createElement(Form, {
+    formikProps: {
+      enableReinitialize: true,
+      initialValues: formInitialValues,
+      onSubmit: handleSubmit
+    }
+  }, function (_ref2) {
+    var values = _ref2.values,
+      setFieldValue = _ref2.setFieldValue,
+      dirty = _ref2.dirty;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "grid grid-cols-2 gap-8 pt-6"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "space-y-4"
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      className: "mb-3",
+      style: "h4",
+      weight: "semibold"
+    }, t("neetoTemplate.templateSettings.imageLabel")), values.imageUrl && /*#__PURE__*/React__default.createElement("div", {
+      className: "w-100 mb-6 flex flex-row justify-center"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "neeto-ui-bg-gray-100 relative flex h-80 w-96 flex-row items-center justify-center p-4"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      className: "neeto-ui-rounded-full absolute right-0 top-0",
+      "data-cy": "remove-image",
+      icon: Delete,
+      size: "small",
+      style: "danger-text",
+      tooltipProps: {
+        content: t("neetoTemplate.templateSettings.removeImage")
+      },
+      onClick: function onClick() {
+        return handleRemoveImage(setFieldValue);
+      }
+    }))), /*#__PURE__*/React__default.createElement(Tags, {
+      className: "space-y-2",
+      isLoading: isCreatingTags,
+      selectedTags: values.tags,
+      allTags: buildSelectOptionsBy("name", templateTags.tags),
+      labelProps: {
+        label: t("neetoTemplate.templateSettings.categoryLabel")
+      },
+      onCreate: createTemplateTag,
+      onUpdate: function onUpdate(tags) {
+        return setFieldValue("tags", tags);
+      }
+    })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Typography, {
+      className: "mb-3",
+      style: "h4",
+      weight: "semibold"
+    }, t("neetoTemplate.templateSettings.previewLabel")), /*#__PURE__*/React__default.createElement(Preview, {
+      imageUrl: values.imageUrl,
+      template: data
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "mt-6 flex flex-row items-center justify-start"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      className: "mr-3",
+      "data-cy": "save-changes-button",
+      disabled: !dirty,
+      loading: isUpdatingTemplate,
+      type: "submit",
+      label: t("neetoTemplate.templateSettings.button.saveChanges")
+    }), /*#__PURE__*/React__default.createElement(Button, {
+      "data-cy": "reset-changes-button",
+      label: t("neetoTemplate.templateSettings.button.cancel"),
+      style: "text",
+      to: onCancelTemplatePreview
+    })));
+  }))));
+};
+
+export { CreateTemplateModal, TemplateSettings };
 //# sourceMappingURL=index.js.map