@bigbinary/neeto-templates-frontend 1.2.0 → 2.0.1

package/dist/index.cjs.js

@@ -4,26 +4,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
-var neetoui = require('@bigbinary/neetoui');
+var Modal = require('@bigbinary/neetoui/Modal');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var Search = require('@bigbinary/neeto-molecules/Search');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var Typography = require('@bigbinary/neetoui/Typography');
 var reactI18next = require('react-i18next');
+var neetoTagsFrontend = require('@bigbinary/neeto-tags-frontend');
+var reactQuery = require('@tanstack/react-query');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var ramda = require('ramda');
-var reactQuery = require('react-query');
 var axios = require('axios');
-var require$$0 = require('util');
-var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
-var i18next = require('i18next');
+var jsxRuntime = require('react/jsx-runtime');
 var classnames = require('classnames');
-var utils$3 = require('@bigbinary/neeto-commons-frontend/utils');
-var neetoIcons = require('@bigbinary/neeto-icons');
-var formik$1 = require('@bigbinary/neetoui/formik');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var ResponsiveDevicePicker = require('@bigbinary/neeto-molecules/ResponsiveDevicePicker');
+var Button = require('@bigbinary/neetoui/Button');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var Form = require('@bigbinary/neetoui/formik/Form');
 var reactRouterDom = require('react-router-dom');
-var neetoTagsFrontend = require('@bigbinary/neeto-tags-frontend');
 var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
 var formik = require('formik');
 var Header = require('@bigbinary/neeto-molecules/Header');
 var Scrollable = require('@bigbinary/neeto-molecules/Scrollable');
+var Label = require('@bigbinary/neetoui/Label');
+var i18next = require('i18next');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,15 +51,20 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
-var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ResponsiveDevicePicker__default = /*#__PURE__*/_interopDefaultLegacy(ResponsiveDevicePicker);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
+var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
 var Scrollable__default = /*#__PURE__*/_interopDefaultLegacy(Scrollable);
+var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -120,9 +130,10 @@ var DEFAULT_CATEGORY = {
   name: "All"
 };
 var INFINITE_SCROLL_DELAY = 500;
-var MENU_ITEMS = {
-  CREATE: "create",
-  PREVIEW: "preview"
+var RESPONSIVE_DEVICES = {
+  DESKTOP: "desktop",
+  TABLET: "tablet",
+  MOBILE: "mobile"
 };
 
 function _typeof(o) {
@@ -405,7 +416,7 @@ const SvgCustom = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   height: 40,
   x: 3,
   y: 2,
-  fill: "#4558F9",
+  fill: "#008068",
   rx: 2
 })), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "#fff",
@@ -414,2445 +425,345 @@ const SvgCustom = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   clipRule: "evenodd"
 })));
 
-/* eslint complexity: [2, 18], max-statements: [2, 33] */
-var shams = function hasSymbols() {
-	if (typeof Symbol !== 'function' || typeof Object.getOwnPropertySymbols !== 'function') { return false; }
-	if (typeof Symbol.iterator === 'symbol') { return true; }
-
-	var obj = {};
-	var sym = Symbol('test');
-	var symObj = Object(sym);
-	if (typeof sym === 'string') { return false; }
-
-	if (Object.prototype.toString.call(sym) !== '[object Symbol]') { return false; }
-	if (Object.prototype.toString.call(symObj) !== '[object Symbol]') { return false; }
-
-	// temp disabled per https://github.com/ljharb/object.assign/issues/17
-	// if (sym instanceof Symbol) { return false; }
-	// temp disabled per https://github.com/WebReflection/get-own-property-symbols/issues/4
-	// if (!(symObj instanceof Symbol)) { return false; }
-
-	// if (typeof Symbol.prototype.toString !== 'function') { return false; }
-	// if (String(sym) !== Symbol.prototype.toString.call(sym)) { return false; }
-
-	var symVal = 42;
-	obj[sym] = symVal;
-	for (sym in obj) { return false; } // eslint-disable-line no-restricted-syntax, no-unreachable-loop
-	if (typeof Object.keys === 'function' && Object.keys(obj).length !== 0) { return false; }
-
-	if (typeof Object.getOwnPropertyNames === 'function' && Object.getOwnPropertyNames(obj).length !== 0) { return false; }
-
-	var syms = Object.getOwnPropertySymbols(obj);
-	if (syms.length !== 1 || syms[0] !== sym) { return false; }
-
-	if (!Object.prototype.propertyIsEnumerable.call(obj, sym)) { return false; }
-
-	if (typeof Object.getOwnPropertyDescriptor === 'function') {
-		var descriptor = Object.getOwnPropertyDescriptor(obj, sym);
-		if (descriptor.value !== symVal || descriptor.enumerable !== true) { return false; }
-	}
-
-	return true;
-};
-
-var origSymbol = typeof Symbol !== 'undefined' && Symbol;
-var hasSymbolSham = shams;
-
-var hasSymbols$1 = function hasNativeSymbols() {
-	if (typeof origSymbol !== 'function') { return false; }
-	if (typeof Symbol !== 'function') { return false; }
-	if (typeof origSymbol('foo') !== 'symbol') { return false; }
-	if (typeof Symbol('bar') !== 'symbol') { return false; }
-
-	return hasSymbolSham();
-};
+var IMAGE_SIZE_LIMIT_IN_MEGABYTES = 1;
+var NEETO_TEMPLATES_URL = "/neeto_templates_engine/api/v1";
+var TEMPLATE_TAGS_URL = "".concat(NEETO_TEMPLATES_URL, "/tags/template_tags");
 
-var test = {
-	foo: {}
+//routes of the host
+var TEMPLATES_URL = "/api/v1/templates";
+var TEMPLATES_SETTINGS_URL = "/api/v1/settings";
+var IMAGE_UPLOAD_CONFIG = {
+  maxImageSize: IMAGE_SIZE_LIMIT_IN_MEGABYTES
 };
 
-var $Object = Object;
-
-var hasProto$1 = function hasProto() {
-	return { __proto__: test }.foo === test.foo && !({ __proto__: null } instanceof $Object);
+var list$1 = function list(params) {
+  return axios__default["default"].get(TEMPLATES_URL, {
+    params: params
+  });
 };
-
-/* eslint no-invalid-this: 1 */
-
-var ERROR_MESSAGE = 'Function.prototype.bind called on incompatible ';
-var slice = Array.prototype.slice;
-var toStr$1 = Object.prototype.toString;
-var funcType = '[object Function]';
-
-var implementation$1 = function bind(that) {
-    var target = this;
-    if (typeof target !== 'function' || toStr$1.call(target) !== funcType) {
-        throw new TypeError(ERROR_MESSAGE + target);
-    }
-    var args = slice.call(arguments, 1);
-
-    var bound;
-    var binder = function () {
-        if (this instanceof bound) {
-            var result = target.apply(
-                this,
-                args.concat(slice.call(arguments))
-            );
-            if (Object(result) === result) {
-                return result;
-            }
-            return this;
-        } else {
-            return target.apply(
-                that,
-                args.concat(slice.call(arguments))
-            );
-        }
-    };
-
-    var boundLength = Math.max(0, target.length - args.length);
-    var boundArgs = [];
-    for (var i = 0; i < boundLength; i++) {
-        boundArgs.push('$' + i);
-    }
-
-    bound = Function('binder', 'return function (' + boundArgs.join(',') + '){ return binder.apply(this,arguments); }')(binder);
-
-    if (target.prototype) {
-        var Empty = function Empty() {};
-        Empty.prototype = target.prototype;
-        bound.prototype = new Empty();
-        Empty.prototype = null;
+var create$1 = function create(_ref) {
+  var id = _ref.id;
+  return axios__default["default"].post(TEMPLATES_URL, {
+    template: {
+      id: id
     }
-
-    return bound;
+  }, {
+    showToastr: false
+  });
 };
-
-var implementation = implementation$1;
-
-var functionBind = Function.prototype.bind || implementation;
-
-var bind$1 = functionBind;
-
-var src = bind$1.call(Function.call, Object.prototype.hasOwnProperty);
-
-var undefined$1;
-
-var $SyntaxError = SyntaxError;
-var $Function = Function;
-var $TypeError$1 = TypeError;
-
-// eslint-disable-next-line consistent-return
-var getEvalledConstructor = function (expressionSyntax) {
-	try {
-		return $Function('"use strict"; return (' + expressionSyntax + ').constructor;')();
-	} catch (e) {}
+var fetch = function fetch(_ref2) {
+  var templateId = _ref2.templateId;
+  return axios__default["default"].get("".concat(TEMPLATES_SETTINGS_URL, "/").concat(templateId));
 };
-
-var $gOPD = Object.getOwnPropertyDescriptor;
-if ($gOPD) {
-	try {
-		$gOPD({}, '');
-	} catch (e) {
-		$gOPD = null; // this is IE 8, which has a broken gOPD
-	}
-}
-
-var throwTypeError = function () {
-	throw new $TypeError$1();
+var update = function update(_ref3) {
+  var resourceId = _ref3.resourceId,
+    payload = _ref3.payload;
+  return axios__default["default"].put("".concat(TEMPLATES_SETTINGS_URL, "/").concat(resourceId), payload);
 };
-var ThrowTypeError = $gOPD
-	? (function () {
-		try {
-			// eslint-disable-next-line no-unused-expressions, no-caller, no-restricted-properties
-			arguments.callee; // IE 8 does not throw here
-			return throwTypeError;
-		} catch (calleeThrows) {
-			try {
-				// IE 8 throws on Object.getOwnPropertyDescriptor(arguments, '')
-				return $gOPD(arguments, 'callee').get;
-			} catch (gOPDthrows) {
-				return throwTypeError;
-			}
-		}
-	}())
-	: throwTypeError;
-
-var hasSymbols = hasSymbols$1();
-var hasProto = hasProto$1();
-
-var getProto = Object.getPrototypeOf || (
-	hasProto
-		? function (x) { return x.__proto__; } // eslint-disable-line no-proto
-		: null
-);
-
-var needsEval = {};
-
-var TypedArray = typeof Uint8Array === 'undefined' || !getProto ? undefined$1 : getProto(Uint8Array);
-
-var INTRINSICS = {
-	'%AggregateError%': typeof AggregateError === 'undefined' ? undefined$1 : AggregateError,
-	'%Array%': Array,
-	'%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined$1 : ArrayBuffer,
-	'%ArrayIteratorPrototype%': hasSymbols && getProto ? getProto([][Symbol.iterator]()) : undefined$1,
-	'%AsyncFromSyncIteratorPrototype%': undefined$1,
-	'%AsyncFunction%': needsEval,
-	'%AsyncGenerator%': needsEval,
-	'%AsyncGeneratorFunction%': needsEval,
-	'%AsyncIteratorPrototype%': needsEval,
-	'%Atomics%': typeof Atomics === 'undefined' ? undefined$1 : Atomics,
-	'%BigInt%': typeof BigInt === 'undefined' ? undefined$1 : BigInt,
-	'%BigInt64Array%': typeof BigInt64Array === 'undefined' ? undefined$1 : BigInt64Array,
-	'%BigUint64Array%': typeof BigUint64Array === 'undefined' ? undefined$1 : BigUint64Array,
-	'%Boolean%': Boolean,
-	'%DataView%': typeof DataView === 'undefined' ? undefined$1 : DataView,
-	'%Date%': Date,
-	'%decodeURI%': decodeURI,
-	'%decodeURIComponent%': decodeURIComponent,
-	'%encodeURI%': encodeURI,
-	'%encodeURIComponent%': encodeURIComponent,
-	'%Error%': Error,
-	'%eval%': eval, // eslint-disable-line no-eval
-	'%EvalError%': EvalError,
-	'%Float32Array%': typeof Float32Array === 'undefined' ? undefined$1 : Float32Array,
-	'%Float64Array%': typeof Float64Array === 'undefined' ? undefined$1 : Float64Array,
-	'%FinalizationRegistry%': typeof FinalizationRegistry === 'undefined' ? undefined$1 : FinalizationRegistry,
-	'%Function%': $Function,
-	'%GeneratorFunction%': needsEval,
-	'%Int8Array%': typeof Int8Array === 'undefined' ? undefined$1 : Int8Array,
-	'%Int16Array%': typeof Int16Array === 'undefined' ? undefined$1 : Int16Array,
-	'%Int32Array%': typeof Int32Array === 'undefined' ? undefined$1 : Int32Array,
-	'%isFinite%': isFinite,
-	'%isNaN%': isNaN,
-	'%IteratorPrototype%': hasSymbols && getProto ? getProto(getProto([][Symbol.iterator]())) : undefined$1,
-	'%JSON%': typeof JSON === 'object' ? JSON : undefined$1,
-	'%Map%': typeof Map === 'undefined' ? undefined$1 : Map,
-	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols || !getProto ? undefined$1 : getProto(new Map()[Symbol.iterator]()),
-	'%Math%': Math,
-	'%Number%': Number,
-	'%Object%': Object,
-	'%parseFloat%': parseFloat,
-	'%parseInt%': parseInt,
-	'%Promise%': typeof Promise === 'undefined' ? undefined$1 : Promise,
-	'%Proxy%': typeof Proxy === 'undefined' ? undefined$1 : Proxy,
-	'%RangeError%': RangeError,
-	'%ReferenceError%': ReferenceError,
-	'%Reflect%': typeof Reflect === 'undefined' ? undefined$1 : Reflect,
-	'%RegExp%': RegExp,
-	'%Set%': typeof Set === 'undefined' ? undefined$1 : Set,
-	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols || !getProto ? undefined$1 : getProto(new Set()[Symbol.iterator]()),
-	'%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined$1 : SharedArrayBuffer,
-	'%String%': String,
-	'%StringIteratorPrototype%': hasSymbols && getProto ? getProto(''[Symbol.iterator]()) : undefined$1,
-	'%Symbol%': hasSymbols ? Symbol : undefined$1,
-	'%SyntaxError%': $SyntaxError,
-	'%ThrowTypeError%': ThrowTypeError,
-	'%TypedArray%': TypedArray,
-	'%TypeError%': $TypeError$1,
-	'%Uint8Array%': typeof Uint8Array === 'undefined' ? undefined$1 : Uint8Array,
-	'%Uint8ClampedArray%': typeof Uint8ClampedArray === 'undefined' ? undefined$1 : Uint8ClampedArray,
-	'%Uint16Array%': typeof Uint16Array === 'undefined' ? undefined$1 : Uint16Array,
-	'%Uint32Array%': typeof Uint32Array === 'undefined' ? undefined$1 : Uint32Array,
-	'%URIError%': URIError,
-	'%WeakMap%': typeof WeakMap === 'undefined' ? undefined$1 : WeakMap,
-	'%WeakRef%': typeof WeakRef === 'undefined' ? undefined$1 : WeakRef,
-	'%WeakSet%': typeof WeakSet === 'undefined' ? undefined$1 : WeakSet
+var templatesApi = {
+  list: list$1,
+  create: create$1,
+  update: update,
+  fetch: fetch
 };
 
-if (getProto) {
-	try {
-		null.error; // eslint-disable-line no-unused-expressions
-	} catch (e) {
-		// https://github.com/tc39/proposal-shadowrealm/pull/384#issuecomment-1364264229
-		var errorProto = getProto(getProto(e));
-		INTRINSICS['%Error.prototype%'] = errorProto;
-	}
-}
-
-var doEval = function doEval(name) {
-	var value;
-	if (name === '%AsyncFunction%') {
-		value = getEvalledConstructor('async function () {}');
-	} else if (name === '%GeneratorFunction%') {
-		value = getEvalledConstructor('function* () {}');
-	} else if (name === '%AsyncGeneratorFunction%') {
-		value = getEvalledConstructor('async function* () {}');
-	} else if (name === '%AsyncGenerator%') {
-		var fn = doEval('%AsyncGeneratorFunction%');
-		if (fn) {
-			value = fn.prototype;
-		}
-	} else if (name === '%AsyncIteratorPrototype%') {
-		var gen = doEval('%AsyncGenerator%');
-		if (gen && getProto) {
-			value = getProto(gen.prototype);
-		}
-	}
-
-	INTRINSICS[name] = value;
-
-	return value;
+var QUERY_KEYS = {
+  TEMPLATES_LIST: "templates-list",
+  TEMPLATE: "templates-detail",
+  TEMPLATE_TAGS: "tag-key"
 };
 
-var LEGACY_ALIASES = {
-	'%ArrayBufferPrototype%': ['ArrayBuffer', 'prototype'],
-	'%ArrayPrototype%': ['Array', 'prototype'],
-	'%ArrayProto_entries%': ['Array', 'prototype', 'entries'],
-	'%ArrayProto_forEach%': ['Array', 'prototype', 'forEach'],
-	'%ArrayProto_keys%': ['Array', 'prototype', 'keys'],
-	'%ArrayProto_values%': ['Array', 'prototype', 'values'],
-	'%AsyncFunctionPrototype%': ['AsyncFunction', 'prototype'],
-	'%AsyncGenerator%': ['AsyncGeneratorFunction', 'prototype'],
-	'%AsyncGeneratorPrototype%': ['AsyncGeneratorFunction', 'prototype', 'prototype'],
-	'%BooleanPrototype%': ['Boolean', 'prototype'],
-	'%DataViewPrototype%': ['DataView', 'prototype'],
-	'%DatePrototype%': ['Date', 'prototype'],
-	'%ErrorPrototype%': ['Error', 'prototype'],
-	'%EvalErrorPrototype%': ['EvalError', 'prototype'],
-	'%Float32ArrayPrototype%': ['Float32Array', 'prototype'],
-	'%Float64ArrayPrototype%': ['Float64Array', 'prototype'],
-	'%FunctionPrototype%': ['Function', 'prototype'],
-	'%Generator%': ['GeneratorFunction', 'prototype'],
-	'%GeneratorPrototype%': ['GeneratorFunction', 'prototype', 'prototype'],
-	'%Int8ArrayPrototype%': ['Int8Array', 'prototype'],
-	'%Int16ArrayPrototype%': ['Int16Array', 'prototype'],
-	'%Int32ArrayPrototype%': ['Int32Array', 'prototype'],
-	'%JSONParse%': ['JSON', 'parse'],
-	'%JSONStringify%': ['JSON', 'stringify'],
-	'%MapPrototype%': ['Map', 'prototype'],
-	'%NumberPrototype%': ['Number', 'prototype'],
-	'%ObjectPrototype%': ['Object', 'prototype'],
-	'%ObjProto_toString%': ['Object', 'prototype', 'toString'],
-	'%ObjProto_valueOf%': ['Object', 'prototype', 'valueOf'],
-	'%PromisePrototype%': ['Promise', 'prototype'],
-	'%PromiseProto_then%': ['Promise', 'prototype', 'then'],
-	'%Promise_all%': ['Promise', 'all'],
-	'%Promise_reject%': ['Promise', 'reject'],
-	'%Promise_resolve%': ['Promise', 'resolve'],
-	'%RangeErrorPrototype%': ['RangeError', 'prototype'],
-	'%ReferenceErrorPrototype%': ['ReferenceError', 'prototype'],
-	'%RegExpPrototype%': ['RegExp', 'prototype'],
-	'%SetPrototype%': ['Set', 'prototype'],
-	'%SharedArrayBufferPrototype%': ['SharedArrayBuffer', 'prototype'],
-	'%StringPrototype%': ['String', 'prototype'],
-	'%SymbolPrototype%': ['Symbol', 'prototype'],
-	'%SyntaxErrorPrototype%': ['SyntaxError', 'prototype'],
-	'%TypedArrayPrototype%': ['TypedArray', 'prototype'],
-	'%TypeErrorPrototype%': ['TypeError', 'prototype'],
-	'%Uint8ArrayPrototype%': ['Uint8Array', 'prototype'],
-	'%Uint8ClampedArrayPrototype%': ['Uint8ClampedArray', 'prototype'],
-	'%Uint16ArrayPrototype%': ['Uint16Array', 'prototype'],
-	'%Uint32ArrayPrototype%': ['Uint32Array', 'prototype'],
-	'%URIErrorPrototype%': ['URIError', 'prototype'],
-	'%WeakMapPrototype%': ['WeakMap', 'prototype'],
-	'%WeakSetPrototype%': ['WeakSet', 'prototype']
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFetchTemplates = function useFetchTemplates(_ref) {
+  var searchTerm = _ref.searchTerm,
+    category = _ref.category;
+  return reactQuery.useInfiniteQuery({
+    queryKey: [QUERY_KEYS.TEMPLATES_LIST, searchTerm, category],
+    queryFn: function queryFn(_ref2) {
+      var _ref2$pageParam = _ref2.pageParam,
+        pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
+      return templatesApi.list({
+        page: pageParam,
+        searchTerm: searchTerm,
+        category: category
+      });
+    },
+    getNextPageParam: function getNextPageParam(lastPage) {
+      return lastPage.hasNextPage ? lastPage.page + 1 : undefined;
+    },
+    select: function select(data) {
+      var templates = data.pages.flatMap(ramda.prop("templates"));
+      var lastPage = data.pages[data.pages.length - 1];
+      return {
+        templates: templates,
+        hasNextPage: lastPage.hasNextPage,
+        page: lastPage.page,
+        tags: lastPage.tags,
+        templatesCount: lastPage.templatesCount
+      };
+    },
+    keepPreviousData: true
+  });
 };
-
-var bind = functionBind;
-var hasOwn$1 = src;
-var $concat$1 = bind.call(Function.call, Array.prototype.concat);
-var $spliceApply = bind.call(Function.apply, Array.prototype.splice);
-var $replace$1 = bind.call(Function.call, String.prototype.replace);
-var $strSlice = bind.call(Function.call, String.prototype.slice);
-var $exec = bind.call(Function.call, RegExp.prototype.exec);
-
-/* adapted from https://github.com/lodash/lodash/blob/4.17.15/dist/lodash.js#L6735-L6744 */
-var rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g;
-var reEscapeChar = /\\(\\)?/g; /** Used to match backslashes in property paths. */
-var stringToPath = function stringToPath(string) {
-	var first = $strSlice(string, 0, 1);
-	var last = $strSlice(string, -1);
-	if (first === '%' && last !== '%') {
-		throw new $SyntaxError('invalid intrinsic syntax, expected closing `%`');
-	} else if (last === '%' && first !== '%') {
-		throw new $SyntaxError('invalid intrinsic syntax, expected opening `%`');
-	}
-	var result = [];
-	$replace$1(string, rePropName, function (match, number, quote, subString) {
-		result[result.length] = quote ? $replace$1(subString, reEscapeChar, '$1') : number || match;
-	});
-	return result;
+var useCreateTemplate = function useCreateTemplate() {
+  return reactQuery.useMutation({
+    mutationFn: templatesApi.create
+  });
 };
-/* end adaptation */
-
-var getBaseIntrinsic = function getBaseIntrinsic(name, allowMissing) {
-	var intrinsicName = name;
-	var alias;
-	if (hasOwn$1(LEGACY_ALIASES, intrinsicName)) {
-		alias = LEGACY_ALIASES[intrinsicName];
-		intrinsicName = '%' + alias[0] + '%';
-	}
-
-	if (hasOwn$1(INTRINSICS, intrinsicName)) {
-		var value = INTRINSICS[intrinsicName];
-		if (value === needsEval) {
-			value = doEval(intrinsicName);
-		}
-		if (typeof value === 'undefined' && !allowMissing) {
-			throw new $TypeError$1('intrinsic ' + name + ' exists, but is not available. Please file an issue!');
-		}
-
-		return {
-			alias: alias,
-			name: intrinsicName,
-			value: value
-		};
-	}
-
-	throw new $SyntaxError('intrinsic ' + name + ' does not exist!');
+var useFetchTemplate = function useFetchTemplate(_ref3, options) {
+  var resourceId = _ref3.resourceId;
+  return reactQuery.useQuery(_objectSpread$5({
+    queryKey: [QUERY_KEYS.TEMPLATE, resourceId],
+    queryFn: function queryFn() {
+      return templatesApi.fetch({
+        templateId: resourceId
+      });
+    }
+  }, options));
 };
-
-var getIntrinsic = function GetIntrinsic(name, allowMissing) {
-	if (typeof name !== 'string' || name.length === 0) {
-		throw new $TypeError$1('intrinsic name must be a non-empty string');
-	}
-	if (arguments.length > 1 && typeof allowMissing !== 'boolean') {
-		throw new $TypeError$1('"allowMissing" argument must be a boolean');
-	}
-
-	if ($exec(/^%?[^%]*%?$/, name) === null) {
-		throw new $SyntaxError('`%` may not be present anywhere but at the beginning and end of the intrinsic name');
-	}
-	var parts = stringToPath(name);
-	var intrinsicBaseName = parts.length > 0 ? parts[0] : '';
-
-	var intrinsic = getBaseIntrinsic('%' + intrinsicBaseName + '%', allowMissing);
-	var intrinsicRealName = intrinsic.name;
-	var value = intrinsic.value;
-	var skipFurtherCaching = false;
-
-	var alias = intrinsic.alias;
-	if (alias) {
-		intrinsicBaseName = alias[0];
-		$spliceApply(parts, $concat$1([0, 1], alias));
-	}
-
-	for (var i = 1, isOwn = true; i < parts.length; i += 1) {
-		var part = parts[i];
-		var first = $strSlice(part, 0, 1);
-		var last = $strSlice(part, -1);
-		if (
-			(
-				(first === '"' || first === "'" || first === '`')
-				|| (last === '"' || last === "'" || last === '`')
-			)
-			&& first !== last
-		) {
-			throw new $SyntaxError('property names with quotes must have matching quotes');
-		}
-		if (part === 'constructor' || !isOwn) {
-			skipFurtherCaching = true;
-		}
-
-		intrinsicBaseName += '.' + part;
-		intrinsicRealName = '%' + intrinsicBaseName + '%';
-
-		if (hasOwn$1(INTRINSICS, intrinsicRealName)) {
-			value = INTRINSICS[intrinsicRealName];
-		} else if (value != null) {
-			if (!(part in value)) {
-				if (!allowMissing) {
-					throw new $TypeError$1('base intrinsic for ' + name + ' exists, but the property is not available.');
-				}
-				return void undefined$1;
-			}
-			if ($gOPD && (i + 1) >= parts.length) {
-				var desc = $gOPD(value, part);
-				isOwn = !!desc;
-
-				// By convention, when a data property is converted to an accessor
-				// property to emulate a data property that does not suffer from
-				// the override mistake, that accessor's getter is marked with
-				// an `originalValue` property. Here, when we detect this, we
-				// uphold the illusion by pretending to see that original data
-				// property, i.e., returning the value rather than the getter
-				// itself.
-				if (isOwn && 'get' in desc && !('originalValue' in desc.get)) {
-					value = desc.get;
-				} else {
-					value = value[part];
-				}
-			} else {
-				isOwn = hasOwn$1(value, part);
-				value = value[part];
-			}
-
-			if (isOwn && !skipFurtherCaching) {
-				INTRINSICS[intrinsicRealName] = value;
-			}
-		}
-	}
-	return value;
+var useUpdateTemplate = function useUpdateTemplate(_ref4) {
+  var resourceId = _ref4.resourceId;
+  return reactUtils.useMutationWithInvalidation(function (_ref5) {
+    var template = _ref5.template;
+    return templatesApi.update({
+      resourceId: resourceId,
+      payload: {
+        template: template
+      }
+    });
+  }, {
+    keysToInvalidate: [[QUERY_KEYS.TEMPLATES_LIST], [QUERY_KEYS.TEMPLATE, resourceId]],
+    onSuccess: function onSuccess() {
+      neetoTagsFrontend.refetchTags();
+    }
+  });
 };
 
-var callBind$1 = {exports: {}};
-
-callBind$1.exports;
-
-(function (module) {
-
-	var bind = functionBind;
-	var GetIntrinsic = getIntrinsic;
-
-	var $apply = GetIntrinsic('%Function.prototype.apply%');
-	var $call = GetIntrinsic('%Function.prototype.call%');
-	var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply);
-
-	var $gOPD = GetIntrinsic('%Object.getOwnPropertyDescriptor%', true);
-	var $defineProperty = GetIntrinsic('%Object.defineProperty%', true);
-	var $max = GetIntrinsic('%Math.max%');
-
-	if ($defineProperty) {
-		try {
-			$defineProperty({}, 'a', { value: 1 });
-		} catch (e) {
-			// IE 8 has a broken defineProperty
-			$defineProperty = null;
-		}
-	}
-
-	module.exports = function callBind(originalFunction) {
-		var func = $reflectApply(bind, $call, arguments);
-		if ($gOPD && $defineProperty) {
-			var desc = $gOPD(func, 'length');
-			if (desc.configurable) {
-				// original length, plus the receiver, minus any additional arguments (after the receiver)
-				$defineProperty(
-					func,
-					'length',
-					{ value: 1 + $max(0, originalFunction.length - (arguments.length - 1)) }
-				);
-			}
-		}
-		return func;
-	};
-
-	var applyBind = function applyBind() {
-		return $reflectApply(bind, $apply, arguments);
-	};
-
-	if ($defineProperty) {
-		$defineProperty(module.exports, 'apply', { value: applyBind });
-	} else {
-		module.exports.apply = applyBind;
-	} 
-} (callBind$1));
-
-var callBindExports = callBind$1.exports;
-
-var GetIntrinsic$1 = getIntrinsic;
-
-var callBind = callBindExports;
-
-var $indexOf = callBind(GetIntrinsic$1('String.prototype.indexOf'));
-
-var callBound$1 = function callBoundIntrinsic(name, allowMissing) {
-	var intrinsic = GetIntrinsic$1(name, !!allowMissing);
-	if (typeof intrinsic === 'function' && $indexOf(name, '.prototype.') > -1) {
-		return callBind(intrinsic);
-	}
-	return intrinsic;
+var BlankCard = function BlankCard(_ref) {
+  var Icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-ui-rounded-lg neeto-ui-bg-white hover:neeto-ui-bg-white neeto-ui-border-primary-500 flex cursor-pointer flex-col items-center justify-center border border-dashed p-6 outline-none transition-all duration-300 ease-in-out hover:border-solid focus:border-solid",
+    "data-cy": "start-from-scratch-button",
+    tabIndex: 0,
+    onClick: !disabled ? onClick : neetoCist.noop,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-text-primary-500 mb-4",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        size: 40
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "text-center",
+      lineHeight: "normal",
+      style: "h5",
+      weight: "semibold",
+      children: title
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-600 text-center",
+      lineHeight: "leading-4",
+      style: "body3",
+      children: description
+    })]
+  });
 };
 
-var util_inspect = require$$0__default["default"].inspect;
-
-var hasMap = typeof Map === 'function' && Map.prototype;
-var mapSizeDescriptor = Object.getOwnPropertyDescriptor && hasMap ? Object.getOwnPropertyDescriptor(Map.prototype, 'size') : null;
-var mapSize = hasMap && mapSizeDescriptor && typeof mapSizeDescriptor.get === 'function' ? mapSizeDescriptor.get : null;
-var mapForEach = hasMap && Map.prototype.forEach;
-var hasSet = typeof Set === 'function' && Set.prototype;
-var setSizeDescriptor = Object.getOwnPropertyDescriptor && hasSet ? Object.getOwnPropertyDescriptor(Set.prototype, 'size') : null;
-var setSize = hasSet && setSizeDescriptor && typeof setSizeDescriptor.get === 'function' ? setSizeDescriptor.get : null;
-var setForEach = hasSet && Set.prototype.forEach;
-var hasWeakMap = typeof WeakMap === 'function' && WeakMap.prototype;
-var weakMapHas = hasWeakMap ? WeakMap.prototype.has : null;
-var hasWeakSet = typeof WeakSet === 'function' && WeakSet.prototype;
-var weakSetHas = hasWeakSet ? WeakSet.prototype.has : null;
-var hasWeakRef = typeof WeakRef === 'function' && WeakRef.prototype;
-var weakRefDeref = hasWeakRef ? WeakRef.prototype.deref : null;
-var booleanValueOf = Boolean.prototype.valueOf;
-var objectToString = Object.prototype.toString;
-var functionToString = Function.prototype.toString;
-var $match = String.prototype.match;
-var $slice = String.prototype.slice;
-var $replace = String.prototype.replace;
-var $toUpperCase = String.prototype.toUpperCase;
-var $toLowerCase = String.prototype.toLowerCase;
-var $test = RegExp.prototype.test;
-var $concat = Array.prototype.concat;
-var $join = Array.prototype.join;
-var $arrSlice = Array.prototype.slice;
-var $floor = Math.floor;
-var bigIntValueOf = typeof BigInt === 'function' ? BigInt.prototype.valueOf : null;
-var gOPS = Object.getOwnPropertySymbols;
-var symToString = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? Symbol.prototype.toString : null;
-var hasShammedSymbols = typeof Symbol === 'function' && typeof Symbol.iterator === 'object';
-// ie, `has-tostringtag/shams
-var toStringTag = typeof Symbol === 'function' && Symbol.toStringTag && (typeof Symbol.toStringTag === hasShammedSymbols ? 'object' : 'symbol')
-    ? Symbol.toStringTag
-    : null;
-var isEnumerable = Object.prototype.propertyIsEnumerable;
-
-var gPO = (typeof Reflect === 'function' ? Reflect.getPrototypeOf : Object.getPrototypeOf) || (
-    [].__proto__ === Array.prototype // eslint-disable-line no-proto
-        ? function (O) {
-            return O.__proto__; // eslint-disable-line no-proto
-        }
-        : null
-);
-
-function addNumericSeparator(num, str) {
-    if (
-        num === Infinity
-        || num === -Infinity
-        || num !== num
-        || (num && num > -1000 && num < 1000)
-        || $test.call(/e/, str)
-    ) {
-        return str;
-    }
-    var sepRegex = /[0-9](?=(?:[0-9]{3})+(?![0-9]))/g;
-    if (typeof num === 'number') {
-        var int = num < 0 ? -$floor(-num) : $floor(num); // trunc(num)
-        if (int !== num) {
-            var intStr = String(int);
-            var dec = $slice.call(str, intStr.length + 1);
-            return $replace.call(intStr, sepRegex, '$&_') + '.' + $replace.call($replace.call(dec, /([0-9]{3})/g, '$&_'), /_$/, '');
-        }
-    }
-    return $replace.call(str, sepRegex, '$&_');
-}
-
-var utilInspect = util_inspect;
-var inspectCustom = utilInspect.custom;
-var inspectSymbol = isSymbol(inspectCustom) ? inspectCustom : null;
-
-var objectInspect = function inspect_(obj, options, depth, seen) {
-    var opts = options || {};
-
-    if (has$3(opts, 'quoteStyle') && (opts.quoteStyle !== 'single' && opts.quoteStyle !== 'double')) {
-        throw new TypeError('option "quoteStyle" must be "single" or "double"');
-    }
-    if (
-        has$3(opts, 'maxStringLength') && (typeof opts.maxStringLength === 'number'
-            ? opts.maxStringLength < 0 && opts.maxStringLength !== Infinity
-            : opts.maxStringLength !== null
-        )
-    ) {
-        throw new TypeError('option "maxStringLength", if provided, must be a positive integer, Infinity, or `null`');
-    }
-    var customInspect = has$3(opts, 'customInspect') ? opts.customInspect : true;
-    if (typeof customInspect !== 'boolean' && customInspect !== 'symbol') {
-        throw new TypeError('option "customInspect", if provided, must be `true`, `false`, or `\'symbol\'`');
-    }
-
-    if (
-        has$3(opts, 'indent')
-        && opts.indent !== null
-        && opts.indent !== '\t'
-        && !(parseInt(opts.indent, 10) === opts.indent && opts.indent > 0)
-    ) {
-        throw new TypeError('option "indent" must be "\\t", an integer > 0, or `null`');
-    }
-    if (has$3(opts, 'numericSeparator') && typeof opts.numericSeparator !== 'boolean') {
-        throw new TypeError('option "numericSeparator", if provided, must be `true` or `false`');
-    }
-    var numericSeparator = opts.numericSeparator;
-
-    if (typeof obj === 'undefined') {
-        return 'undefined';
-    }
-    if (obj === null) {
-        return 'null';
-    }
-    if (typeof obj === 'boolean') {
-        return obj ? 'true' : 'false';
-    }
-
-    if (typeof obj === 'string') {
-        return inspectString(obj, opts);
-    }
-    if (typeof obj === 'number') {
-        if (obj === 0) {
-            return Infinity / obj > 0 ? '0' : '-0';
-        }
-        var str = String(obj);
-        return numericSeparator ? addNumericSeparator(obj, str) : str;
-    }
-    if (typeof obj === 'bigint') {
-        var bigIntStr = String(obj) + 'n';
-        return numericSeparator ? addNumericSeparator(obj, bigIntStr) : bigIntStr;
-    }
-
-    var maxDepth = typeof opts.depth === 'undefined' ? 5 : opts.depth;
-    if (typeof depth === 'undefined') { depth = 0; }
-    if (depth >= maxDepth && maxDepth > 0 && typeof obj === 'object') {
-        return isArray$3(obj) ? '[Array]' : '[Object]';
-    }
-
-    var indent = getIndent(opts, depth);
-
-    if (typeof seen === 'undefined') {
-        seen = [];
-    } else if (indexOf(seen, obj) >= 0) {
-        return '[Circular]';
-    }
+var Card = function Card(_ref) {
+  var template = _ref.template,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    onClick: onClick,
+    className: "neeto-template neeto-template-thumbnail neeto-ui-bg-white neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col overflow-hidden border outline-none transition-colors duration-300 ease-in-out",
+    "data-cy": "template-card",
+    tabIndex: 0,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-template__header relative overflow-hidden",
+      children: /*#__PURE__*/jsxRuntime.jsx("img", {
+        className: "neeto-template__image",
+        "data-cy": "template-thumbnail-image",
+        src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-3 py-1.5",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-template-thumbnail__title line-clamp-2",
+        "data-cy": "template-card-title",
+        lineHeight: "normal",
+        style: "h5",
+        children: template.title
+      })
+    })]
+  });
+};
 
-    function inspect(value, from, noIndent) {
-        if (from) {
-            seen = $arrSlice.call(seen);
-            seen.push(from);
-        }
-        if (noIndent) {
-            var newOpts = {
-                depth: opts.depth
-            };
-            if (has$3(opts, 'quoteStyle')) {
-                newOpts.quoteStyle = opts.quoteStyle;
-            }
-            return inspect_(value, newOpts, depth + 1, seen);
-        }
-        return inspect_(value, opts, depth + 1, seen);
-    }
+var CategoryItem = function CategoryItem(_ref) {
+  var label = _ref.label,
+    count = _ref.count,
+    isActive = _ref.isActive,
+    setCurrentCategory = _ref.setCurrentCategory;
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    "data-cy": "category-".concat(utils.joinHyphenCase(label)),
+    tabIndex: 0,
+    className: classnames__default["default"]("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", {
+      "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-200 focus:neeto-ui-bg-gray-200 border-transparent": !isActive,
+      "neeto-ui-text-gray-800 neeto-ui-bg-white neeto-ui-border-gray-300 focus:neeto-ui-border-gray-500": isActive
+    }),
+    onClick: setCurrentCategory,
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      children: count
+    })]
+  });
+};
 
-    if (typeof obj === 'function' && !isRegExp$1(obj)) { // in older engines, regexes are callable
-        var name = nameOf(obj);
-        var keys = arrObjKeys(obj, inspect);
-        return '[Function' + (name ? ': ' + name : ' (anonymous)') + ']' + (keys.length > 0 ? ' { ' + $join.call(keys, ', ') + ' }' : '');
-    }
-    if (isSymbol(obj)) {
-        var symString = hasShammedSymbols ? $replace.call(String(obj), /^(Symbol\(.*\))_[^)]*$/, '$1') : symToString.call(obj);
-        return typeof obj === 'object' && !hasShammedSymbols ? markBoxed(symString) : symString;
-    }
-    if (isElement(obj)) {
-        var s = '<' + $toLowerCase.call(String(obj.nodeName));
-        var attrs = obj.attributes || [];
-        for (var i = 0; i < attrs.length; i++) {
-            s += ' ' + attrs[i].name + '=' + wrapQuotes(quote(attrs[i].value), 'double', opts);
-        }
-        s += '>';
-        if (obj.childNodes && obj.childNodes.length) { s += '...'; }
-        s += '</' + $toLowerCase.call(String(obj.nodeName)) + '>';
-        return s;
-    }
-    if (isArray$3(obj)) {
-        if (obj.length === 0) { return '[]'; }
-        var xs = arrObjKeys(obj, inspect);
-        if (indent && !singleLineValues(xs)) {
-            return '[' + indentedJoin(xs, indent) + ']';
-        }
-        return '[ ' + $join.call(xs, ', ') + ' ]';
-    }
-    if (isError(obj)) {
-        var parts = arrObjKeys(obj, inspect);
-        if (!('cause' in Error.prototype) && 'cause' in obj && !isEnumerable.call(obj, 'cause')) {
-            return '{ [' + String(obj) + '] ' + $join.call($concat.call('[cause]: ' + inspect(obj.cause), parts), ', ') + ' }';
-        }
-        if (parts.length === 0) { return '[' + String(obj) + ']'; }
-        return '{ [' + String(obj) + '] ' + $join.call(parts, ', ') + ' }';
-    }
-    if (typeof obj === 'object' && customInspect) {
-        if (inspectSymbol && typeof obj[inspectSymbol] === 'function' && utilInspect) {
-            return utilInspect(obj, { depth: maxDepth - depth });
-        } else if (customInspect !== 'symbol' && typeof obj.inspect === 'function') {
-            return obj.inspect();
-        }
-    }
-    if (isMap(obj)) {
-        var mapParts = [];
-        if (mapForEach) {
-            mapForEach.call(obj, function (value, key) {
-                mapParts.push(inspect(key, obj, true) + ' => ' + inspect(value, obj));
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var List = function List(_ref) {
+  var setCurrentScreen = _ref.setCurrentScreen,
+    setSelectedTemplate = _ref.setSelectedTemplate,
+    onCreate = _ref.onCreate,
+    isCreating = _ref.isCreating,
+    afterCreate = _ref.afterCreate,
+    refetchResource = _ref.refetchResource;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(DEFAULT_CATEGORY),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentCategory = _useState2[0],
+    _setCurrentCategory = _useState2[1];
+  var _useState3 = React.useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var _useFetchTemplates = useFetchTemplates({
+      searchTerm: searchTerm,
+      category: currentCategory
+    }),
+    _useFetchTemplates$ha = _useFetchTemplates.hasNextPage,
+    hasNextPage = _useFetchTemplates$ha === void 0 ? false : _useFetchTemplates$ha,
+    fetchNextPage = _useFetchTemplates.fetchNextPage,
+    isTemplatesLoading = _useFetchTemplates.isLoading,
+    _useFetchTemplates$da = _useFetchTemplates.data,
+    data = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da;
+  var _useInfiniteScroll = useInfiniteScroll({
+      loading: isTemplatesLoading,
+      hasNextPage: hasNextPage,
+      onLoadMore: fetchNextPage,
+      rootMargin: "0px 0px 700px 0px",
+      delayInMs: INFINITE_SCROLL_DELAY
+    }),
+    _useInfiniteScroll2 = _slicedToArray(_useInfiniteScroll, 2),
+    sentryRef = _useInfiniteScroll2[0],
+    rootRef = _useInfiniteScroll2[1].rootRef;
+  var handleCardClick = function handleCardClick(template) {
+    setCurrentScreen(TEMPLATE_SCREENS.PREVIEW);
+    setSelectedTemplate(template);
+  };
+  if (isTemplatesLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
+  }
+  var _data$tags = data.tags,
+    tags = _data$tags === void 0 ? [] : _data$tags,
+    _data$templates = data.templates,
+    templates = _data$templates === void 0 ? [] : _data$templates,
+    _data$templatesCount = data.templatesCount,
+    templatesCount = _data$templatesCount === void 0 ? 0 : _data$templatesCount;
+  var categories = [_objectSpread$4(_objectSpread$4({}, DEFAULT_CATEGORY), {}, {
+    count: templatesCount
+  })].concat(_toConsumableArray(tags));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "sticky left-0 top-0 w-52 flex-shrink-0 space-y-8 py-6 pl-4 md:w-72 md:pl-10 lg:w-80 xl:pl-16",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            "data-cy": "create-new-form-title",
+            style: "h2",
+            weight: "semibold",
+            children: t("neetoTemplate.templates.createNewEntity")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            lineHeight: "normal",
+            style: "body2",
+            children: t("neetoTemplate.templates.description")
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {
+          autoFocus: true,
+          disableTrimOnBlur: true,
+          "data-cy": "template-search-input",
+          placeholder: t("neetoTemplate.templates.search"),
+          onSearch: function onSearch(value) {
+            return setSearchTerm(value);
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "uppercase",
+          "data-cy": "template-categories-label",
+          style: "h6",
+          children: t("neetoTemplate.templates.categories")
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-2",
+          children: categories.map(function (_ref2) {
+            var id = _ref2.id,
+              name = _ref2.name,
+              count = _ref2.count;
+            return /*#__PURE__*/React.createElement(CategoryItem, {
+              count: count,
+              isActive: currentCategory.id === id,
+              key: id,
+              label: name,
+              setCurrentCategory: function setCurrentCategory() {
+                return _setCurrentCategory({
+                  id: id,
+                  name: name
+                });
+              }
             });
-        }
-        return collectionOf('Map', mapSize.call(obj), mapParts, indent);
-    }
-    if (isSet(obj)) {
-        var setParts = [];
-        if (setForEach) {
-            setForEach.call(obj, function (value) {
-                setParts.push(inspect(value, obj));
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "h-screen w-full overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
+      ref: rootRef,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-grow space-y-6",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-5 xl:gap-6 2xl:grid-cols-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx(BlankCard, {
+            description: t("neetoTemplate.templates.blankCard.description"),
+            disabled: isCreating,
+            icon: isCreating ? Spinner__default["default"] : SvgCustom,
+            title: t("neetoTemplate.templates.blankCard.title"),
+            onClick: onCreate
+          }), templates.map(function (template, index) {
+            return /*#__PURE__*/React.createElement(Card, {
+              afterCreate: afterCreate,
+              refetchResource: refetchResource,
+              template: template,
+              key: index,
+              onClick: function onClick() {
+                return handleCardClick(template);
+              }
             });
-        }
-        return collectionOf('Set', setSize.call(obj), setParts, indent);
-    }
-    if (isWeakMap(obj)) {
-        return weakCollectionOf('WeakMap');
-    }
-    if (isWeakSet(obj)) {
-        return weakCollectionOf('WeakSet');
-    }
-    if (isWeakRef(obj)) {
-        return weakCollectionOf('WeakRef');
-    }
-    if (isNumber(obj)) {
-        return markBoxed(inspect(Number(obj)));
-    }
-    if (isBigInt(obj)) {
-        return markBoxed(inspect(bigIntValueOf.call(obj)));
-    }
-    if (isBoolean(obj)) {
-        return markBoxed(booleanValueOf.call(obj));
-    }
-    if (isString(obj)) {
-        return markBoxed(inspect(String(obj)));
-    }
-    if (!isDate(obj) && !isRegExp$1(obj)) {
-        var ys = arrObjKeys(obj, inspect);
-        var isPlainObject = gPO ? gPO(obj) === Object.prototype : obj instanceof Object || obj.constructor === Object;
-        var protoTag = obj instanceof Object ? '' : 'null prototype';
-        var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr(obj), 8, -1) : protoTag ? 'Object' : '';
-        var constructorTag = isPlainObject || typeof obj.constructor !== 'function' ? '' : obj.constructor.name ? obj.constructor.name + ' ' : '';
-        var tag = constructorTag + (stringTag || protoTag ? '[' + $join.call($concat.call([], stringTag || [], protoTag || []), ': ') + '] ' : '');
-        if (ys.length === 0) { return tag + '{}'; }
-        if (indent) {
-            return tag + '{' + indentedJoin(ys, indent) + '}';
-        }
-        return tag + '{ ' + $join.call(ys, ', ') + ' }';
-    }
-    return String(obj);
-};
-
-function wrapQuotes(s, defaultStyle, opts) {
-    var quoteChar = (opts.quoteStyle || defaultStyle) === 'double' ? '"' : "'";
-    return quoteChar + s + quoteChar;
-}
-
-function quote(s) {
-    return $replace.call(String(s), /"/g, '&quot;');
-}
-
-function isArray$3(obj) { return toStr(obj) === '[object Array]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); }
-function isDate(obj) { return toStr(obj) === '[object Date]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); }
-function isRegExp$1(obj) { return toStr(obj) === '[object RegExp]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); }
-function isError(obj) { return toStr(obj) === '[object Error]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); }
-function isString(obj) { return toStr(obj) === '[object String]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); }
-function isNumber(obj) { return toStr(obj) === '[object Number]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); }
-function isBoolean(obj) { return toStr(obj) === '[object Boolean]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); }
-
-// Symbol and BigInt do have Symbol.toStringTag by spec, so that can't be used to eliminate false positives
-function isSymbol(obj) {
-    if (hasShammedSymbols) {
-        return obj && typeof obj === 'object' && obj instanceof Symbol;
-    }
-    if (typeof obj === 'symbol') {
-        return true;
-    }
-    if (!obj || typeof obj !== 'object' || !symToString) {
-        return false;
-    }
-    try {
-        symToString.call(obj);
-        return true;
-    } catch (e) {}
-    return false;
-}
-
-function isBigInt(obj) {
-    if (!obj || typeof obj !== 'object' || !bigIntValueOf) {
-        return false;
-    }
-    try {
-        bigIntValueOf.call(obj);
-        return true;
-    } catch (e) {}
-    return false;
-}
-
-var hasOwn = Object.prototype.hasOwnProperty || function (key) { return key in this; };
-function has$3(obj, key) {
-    return hasOwn.call(obj, key);
-}
-
-function toStr(obj) {
-    return objectToString.call(obj);
-}
-
-function nameOf(f) {
-    if (f.name) { return f.name; }
-    var m = $match.call(functionToString.call(f), /^function\s*([\w$]+)/);
-    if (m) { return m[1]; }
-    return null;
-}
-
-function indexOf(xs, x) {
-    if (xs.indexOf) { return xs.indexOf(x); }
-    for (var i = 0, l = xs.length; i < l; i++) {
-        if (xs[i] === x) { return i; }
-    }
-    return -1;
-}
-
-function isMap(x) {
-    if (!mapSize || !x || typeof x !== 'object') {
-        return false;
-    }
-    try {
-        mapSize.call(x);
-        try {
-            setSize.call(x);
-        } catch (s) {
-            return true;
-        }
-        return x instanceof Map; // core-js workaround, pre-v2.5.0
-    } catch (e) {}
-    return false;
-}
-
-function isWeakMap(x) {
-    if (!weakMapHas || !x || typeof x !== 'object') {
-        return false;
-    }
-    try {
-        weakMapHas.call(x, weakMapHas);
-        try {
-            weakSetHas.call(x, weakSetHas);
-        } catch (s) {
-            return true;
-        }
-        return x instanceof WeakMap; // core-js workaround, pre-v2.5.0
-    } catch (e) {}
-    return false;
-}
-
-function isWeakRef(x) {
-    if (!weakRefDeref || !x || typeof x !== 'object') {
-        return false;
-    }
-    try {
-        weakRefDeref.call(x);
-        return true;
-    } catch (e) {}
-    return false;
-}
-
-function isSet(x) {
-    if (!setSize || !x || typeof x !== 'object') {
-        return false;
-    }
-    try {
-        setSize.call(x);
-        try {
-            mapSize.call(x);
-        } catch (m) {
-            return true;
-        }
-        return x instanceof Set; // core-js workaround, pre-v2.5.0
-    } catch (e) {}
-    return false;
-}
-
-function isWeakSet(x) {
-    if (!weakSetHas || !x || typeof x !== 'object') {
-        return false;
-    }
-    try {
-        weakSetHas.call(x, weakSetHas);
-        try {
-            weakMapHas.call(x, weakMapHas);
-        } catch (s) {
-            return true;
-        }
-        return x instanceof WeakSet; // core-js workaround, pre-v2.5.0
-    } catch (e) {}
-    return false;
-}
-
-function isElement(x) {
-    if (!x || typeof x !== 'object') { return false; }
-    if (typeof HTMLElement !== 'undefined' && x instanceof HTMLElement) {
-        return true;
-    }
-    return typeof x.nodeName === 'string' && typeof x.getAttribute === 'function';
-}
-
-function inspectString(str, opts) {
-    if (str.length > opts.maxStringLength) {
-        var remaining = str.length - opts.maxStringLength;
-        var trailer = '... ' + remaining + ' more character' + (remaining > 1 ? 's' : '');
-        return inspectString($slice.call(str, 0, opts.maxStringLength), opts) + trailer;
-    }
-    // eslint-disable-next-line no-control-regex
-    var s = $replace.call($replace.call(str, /(['\\])/g, '\\$1'), /[\x00-\x1f]/g, lowbyte);
-    return wrapQuotes(s, 'single', opts);
-}
-
-function lowbyte(c) {
-    var n = c.charCodeAt(0);
-    var x = {
-        8: 'b',
-        9: 't',
-        10: 'n',
-        12: 'f',
-        13: 'r'
-    }[n];
-    if (x) { return '\\' + x; }
-    return '\\x' + (n < 0x10 ? '0' : '') + $toUpperCase.call(n.toString(16));
-}
-
-function markBoxed(str) {
-    return 'Object(' + str + ')';
-}
-
-function weakCollectionOf(type) {
-    return type + ' { ? }';
-}
-
-function collectionOf(type, size, entries, indent) {
-    var joinedEntries = indent ? indentedJoin(entries, indent) : $join.call(entries, ', ');
-    return type + ' (' + size + ') {' + joinedEntries + '}';
-}
-
-function singleLineValues(xs) {
-    for (var i = 0; i < xs.length; i++) {
-        if (indexOf(xs[i], '\n') >= 0) {
-            return false;
-        }
-    }
-    return true;
-}
-
-function getIndent(opts, depth) {
-    var baseIndent;
-    if (opts.indent === '\t') {
-        baseIndent = '\t';
-    } else if (typeof opts.indent === 'number' && opts.indent > 0) {
-        baseIndent = $join.call(Array(opts.indent + 1), ' ');
-    } else {
-        return null;
-    }
-    return {
-        base: baseIndent,
-        prev: $join.call(Array(depth + 1), baseIndent)
-    };
-}
-
-function indentedJoin(xs, indent) {
-    if (xs.length === 0) { return ''; }
-    var lineJoiner = '\n' + indent.prev + indent.base;
-    return lineJoiner + $join.call(xs, ',' + lineJoiner) + '\n' + indent.prev;
-}
-
-function arrObjKeys(obj, inspect) {
-    var isArr = isArray$3(obj);
-    var xs = [];
-    if (isArr) {
-        xs.length = obj.length;
-        for (var i = 0; i < obj.length; i++) {
-            xs[i] = has$3(obj, i) ? inspect(obj[i], obj) : '';
-        }
-    }
-    var syms = typeof gOPS === 'function' ? gOPS(obj) : [];
-    var symMap;
-    if (hasShammedSymbols) {
-        symMap = {};
-        for (var k = 0; k < syms.length; k++) {
-            symMap['$' + syms[k]] = syms[k];
-        }
-    }
-
-    for (var key in obj) { // eslint-disable-line no-restricted-syntax
-        if (!has$3(obj, key)) { continue; } // eslint-disable-line no-restricted-syntax, no-continue
-        if (isArr && String(Number(key)) === key && key < obj.length) { continue; } // eslint-disable-line no-restricted-syntax, no-continue
-        if (hasShammedSymbols && symMap['$' + key] instanceof Symbol) {
-            // this is to prevent shammed Symbols, which are stored as strings, from being included in the string key section
-            continue; // eslint-disable-line no-restricted-syntax, no-continue
-        } else if ($test.call(/[^\w$]/, key)) {
-            xs.push(inspect(key, obj) + ': ' + inspect(obj[key], obj));
-        } else {
-            xs.push(key + ': ' + inspect(obj[key], obj));
-        }
-    }
-    if (typeof gOPS === 'function') {
-        for (var j = 0; j < syms.length; j++) {
-            if (isEnumerable.call(obj, syms[j])) {
-                xs.push('[' + inspect(syms[j]) + ']: ' + inspect(obj[syms[j]], obj));
-            }
-        }
-    }
-    return xs;
-}
-
-var GetIntrinsic = getIntrinsic;
-var callBound = callBound$1;
-var inspect = objectInspect;
-
-var $TypeError = GetIntrinsic('%TypeError%');
-var $WeakMap = GetIntrinsic('%WeakMap%', true);
-var $Map = GetIntrinsic('%Map%', true);
-
-var $weakMapGet = callBound('WeakMap.prototype.get', true);
-var $weakMapSet = callBound('WeakMap.prototype.set', true);
-var $weakMapHas = callBound('WeakMap.prototype.has', true);
-var $mapGet = callBound('Map.prototype.get', true);
-var $mapSet = callBound('Map.prototype.set', true);
-var $mapHas = callBound('Map.prototype.has', true);
-
-/*
- * This function traverses the list returning the node corresponding to the
- * given key.
- *
- * That node is also moved to the head of the list, so that if it's accessed
- * again we don't need to traverse the whole list. By doing so, all the recently
- * used nodes can be accessed relatively quickly.
- */
-var listGetNode = function (list, key) { // eslint-disable-line consistent-return
-	for (var prev = list, curr; (curr = prev.next) !== null; prev = curr) {
-		if (curr.key === key) {
-			prev.next = curr.next;
-			curr.next = list.next;
-			list.next = curr; // eslint-disable-line no-param-reassign
-			return curr;
-		}
-	}
-};
-
-var listGet = function (objects, key) {
-	var node = listGetNode(objects, key);
-	return node && node.value;
-};
-var listSet = function (objects, key, value) {
-	var node = listGetNode(objects, key);
-	if (node) {
-		node.value = value;
-	} else {
-		// Prepend the new node to the beginning of the list
-		objects.next = { // eslint-disable-line no-param-reassign
-			key: key,
-			next: objects.next,
-			value: value
-		};
-	}
-};
-var listHas = function (objects, key) {
-	return !!listGetNode(objects, key);
-};
-
-var sideChannel = function getSideChannel() {
-	var $wm;
-	var $m;
-	var $o;
-	var channel = {
-		assert: function (key) {
-			if (!channel.has(key)) {
-				throw new $TypeError('Side channel does not contain ' + inspect(key));
-			}
-		},
-		get: function (key) { // eslint-disable-line consistent-return
-			if ($WeakMap && key && (typeof key === 'object' || typeof key === 'function')) {
-				if ($wm) {
-					return $weakMapGet($wm, key);
-				}
-			} else if ($Map) {
-				if ($m) {
-					return $mapGet($m, key);
-				}
-			} else {
-				if ($o) { // eslint-disable-line no-lonely-if
-					return listGet($o, key);
-				}
-			}
-		},
-		has: function (key) {
-			if ($WeakMap && key && (typeof key === 'object' || typeof key === 'function')) {
-				if ($wm) {
-					return $weakMapHas($wm, key);
-				}
-			} else if ($Map) {
-				if ($m) {
-					return $mapHas($m, key);
-				}
-			} else {
-				if ($o) { // eslint-disable-line no-lonely-if
-					return listHas($o, key);
-				}
-			}
-			return false;
-		},
-		set: function (key, value) {
-			if ($WeakMap && key && (typeof key === 'object' || typeof key === 'function')) {
-				if (!$wm) {
-					$wm = new $WeakMap();
-				}
-				$weakMapSet($wm, key, value);
-			} else if ($Map) {
-				if (!$m) {
-					$m = new $Map();
-				}
-				$mapSet($m, key, value);
-			} else {
-				if (!$o) {
-					/*
-					 * Initialize the linked list as an empty node, so that we don't have
-					 * to special-case handling of the first node: we can always refer to
-					 * it as (previous node).next, instead of something like (list).head
-					 */
-					$o = { key: {}, next: null };
-				}
-				listSet($o, key, value);
-			}
-		}
-	};
-	return channel;
-};
-
-var replace = String.prototype.replace;
-var percentTwenties = /%20/g;
-
-var Format = {
-    RFC1738: 'RFC1738',
-    RFC3986: 'RFC3986'
-};
-
-var formats$3 = {
-    'default': Format.RFC3986,
-    formatters: {
-        RFC1738: function (value) {
-            return replace.call(value, percentTwenties, '+');
-        },
-        RFC3986: function (value) {
-            return String(value);
-        }
-    },
-    RFC1738: Format.RFC1738,
-    RFC3986: Format.RFC3986
-};
-
-var formats$2 = formats$3;
-
-var has$2 = Object.prototype.hasOwnProperty;
-var isArray$2 = Array.isArray;
-
-var hexTable = (function () {
-    var array = [];
-    for (var i = 0; i < 256; ++i) {
-        array.push('%' + ((i < 16 ? '0' : '') + i.toString(16)).toUpperCase());
-    }
-
-    return array;
-}());
-
-var compactQueue = function compactQueue(queue) {
-    while (queue.length > 1) {
-        var item = queue.pop();
-        var obj = item.obj[item.prop];
-
-        if (isArray$2(obj)) {
-            var compacted = [];
-
-            for (var j = 0; j < obj.length; ++j) {
-                if (typeof obj[j] !== 'undefined') {
-                    compacted.push(obj[j]);
-                }
-            }
-
-            item.obj[item.prop] = compacted;
-        }
-    }
-};
-
-var arrayToObject = function arrayToObject(source, options) {
-    var obj = options && options.plainObjects ? Object.create(null) : {};
-    for (var i = 0; i < source.length; ++i) {
-        if (typeof source[i] !== 'undefined') {
-            obj[i] = source[i];
-        }
-    }
-
-    return obj;
-};
-
-var merge = function merge(target, source, options) {
-    /* eslint no-param-reassign: 0 */
-    if (!source) {
-        return target;
-    }
-
-    if (typeof source !== 'object') {
-        if (isArray$2(target)) {
-            target.push(source);
-        } else if (target && typeof target === 'object') {
-            if ((options && (options.plainObjects || options.allowPrototypes)) || !has$2.call(Object.prototype, source)) {
-                target[source] = true;
-            }
-        } else {
-            return [target, source];
-        }
-
-        return target;
-    }
-
-    if (!target || typeof target !== 'object') {
-        return [target].concat(source);
-    }
-
-    var mergeTarget = target;
-    if (isArray$2(target) && !isArray$2(source)) {
-        mergeTarget = arrayToObject(target, options);
-    }
-
-    if (isArray$2(target) && isArray$2(source)) {
-        source.forEach(function (item, i) {
-            if (has$2.call(target, i)) {
-                var targetItem = target[i];
-                if (targetItem && typeof targetItem === 'object' && item && typeof item === 'object') {
-                    target[i] = merge(targetItem, item, options);
-                } else {
-                    target.push(item);
-                }
-            } else {
-                target[i] = item;
-            }
-        });
-        return target;
-    }
-
-    return Object.keys(source).reduce(function (acc, key) {
-        var value = source[key];
-
-        if (has$2.call(acc, key)) {
-            acc[key] = merge(acc[key], value, options);
-        } else {
-            acc[key] = value;
-        }
-        return acc;
-    }, mergeTarget);
-};
-
-var assign = function assignSingleSource(target, source) {
-    return Object.keys(source).reduce(function (acc, key) {
-        acc[key] = source[key];
-        return acc;
-    }, target);
-};
-
-var decode = function (str, decoder, charset) {
-    var strWithoutPlus = str.replace(/\+/g, ' ');
-    if (charset === 'iso-8859-1') {
-        // unescape never throws, no try...catch needed:
-        return strWithoutPlus.replace(/%[0-9a-f]{2}/gi, unescape);
-    }
-    // utf-8
-    try {
-        return decodeURIComponent(strWithoutPlus);
-    } catch (e) {
-        return strWithoutPlus;
-    }
-};
-
-var encode = function encode(str, defaultEncoder, charset, kind, format) {
-    // This code was originally written by Brian White (mscdex) for the io.js core querystring library.
-    // It has been adapted here for stricter adherence to RFC 3986
-    if (str.length === 0) {
-        return str;
-    }
-
-    var string = str;
-    if (typeof str === 'symbol') {
-        string = Symbol.prototype.toString.call(str);
-    } else if (typeof str !== 'string') {
-        string = String(str);
-    }
-
-    if (charset === 'iso-8859-1') {
-        return escape(string).replace(/%u[0-9a-f]{4}/gi, function ($0) {
-            return '%26%23' + parseInt($0.slice(2), 16) + '%3B';
-        });
-    }
-
-    var out = '';
-    for (var i = 0; i < string.length; ++i) {
-        var c = string.charCodeAt(i);
-
-        if (
-            c === 0x2D // -
-            || c === 0x2E // .
-            || c === 0x5F // _
-            || c === 0x7E // ~
-            || (c >= 0x30 && c <= 0x39) // 0-9
-            || (c >= 0x41 && c <= 0x5A) // a-z
-            || (c >= 0x61 && c <= 0x7A) // A-Z
-            || (format === formats$2.RFC1738 && (c === 0x28 || c === 0x29)) // ( )
-        ) {
-            out += string.charAt(i);
-            continue;
-        }
-
-        if (c < 0x80) {
-            out = out + hexTable[c];
-            continue;
-        }
-
-        if (c < 0x800) {
-            out = out + (hexTable[0xC0 | (c >> 6)] + hexTable[0x80 | (c & 0x3F)]);
-            continue;
-        }
-
-        if (c < 0xD800 || c >= 0xE000) {
-            out = out + (hexTable[0xE0 | (c >> 12)] + hexTable[0x80 | ((c >> 6) & 0x3F)] + hexTable[0x80 | (c & 0x3F)]);
-            continue;
-        }
-
-        i += 1;
-        c = 0x10000 + (((c & 0x3FF) << 10) | (string.charCodeAt(i) & 0x3FF));
-        /* eslint operator-linebreak: [2, "before"] */
-        out += hexTable[0xF0 | (c >> 18)]
-            + hexTable[0x80 | ((c >> 12) & 0x3F)]
-            + hexTable[0x80 | ((c >> 6) & 0x3F)]
-            + hexTable[0x80 | (c & 0x3F)];
-    }
-
-    return out;
-};
-
-var compact = function compact(value) {
-    var queue = [{ obj: { o: value }, prop: 'o' }];
-    var refs = [];
-
-    for (var i = 0; i < queue.length; ++i) {
-        var item = queue[i];
-        var obj = item.obj[item.prop];
-
-        var keys = Object.keys(obj);
-        for (var j = 0; j < keys.length; ++j) {
-            var key = keys[j];
-            var val = obj[key];
-            if (typeof val === 'object' && val !== null && refs.indexOf(val) === -1) {
-                queue.push({ obj: obj, prop: key });
-                refs.push(val);
-            }
-        }
-    }
-
-    compactQueue(queue);
-
-    return value;
-};
-
-var isRegExp = function isRegExp(obj) {
-    return Object.prototype.toString.call(obj) === '[object RegExp]';
-};
-
-var isBuffer = function isBuffer(obj) {
-    if (!obj || typeof obj !== 'object') {
-        return false;
-    }
-
-    return !!(obj.constructor && obj.constructor.isBuffer && obj.constructor.isBuffer(obj));
-};
-
-var combine = function combine(a, b) {
-    return [].concat(a, b);
-};
-
-var maybeMap = function maybeMap(val, fn) {
-    if (isArray$2(val)) {
-        var mapped = [];
-        for (var i = 0; i < val.length; i += 1) {
-            mapped.push(fn(val[i]));
-        }
-        return mapped;
-    }
-    return fn(val);
-};
-
-var utils$2 = {
-    arrayToObject: arrayToObject,
-    assign: assign,
-    combine: combine,
-    compact: compact,
-    decode: decode,
-    encode: encode,
-    isBuffer: isBuffer,
-    isRegExp: isRegExp,
-    maybeMap: maybeMap,
-    merge: merge
-};
-
-var getSideChannel = sideChannel;
-var utils$1 = utils$2;
-var formats$1 = formats$3;
-var has$1 = Object.prototype.hasOwnProperty;
-
-var arrayPrefixGenerators = {
-    brackets: function brackets(prefix) {
-        return prefix + '[]';
-    },
-    comma: 'comma',
-    indices: function indices(prefix, key) {
-        return prefix + '[' + key + ']';
-    },
-    repeat: function repeat(prefix) {
-        return prefix;
-    }
-};
-
-var isArray$1 = Array.isArray;
-var push = Array.prototype.push;
-var pushToArray = function (arr, valueOrArray) {
-    push.apply(arr, isArray$1(valueOrArray) ? valueOrArray : [valueOrArray]);
-};
-
-var toISO = Date.prototype.toISOString;
-
-var defaultFormat = formats$1['default'];
-var defaults$1 = {
-    addQueryPrefix: false,
-    allowDots: false,
-    charset: 'utf-8',
-    charsetSentinel: false,
-    delimiter: '&',
-    encode: true,
-    encoder: utils$1.encode,
-    encodeValuesOnly: false,
-    format: defaultFormat,
-    formatter: formats$1.formatters[defaultFormat],
-    // deprecated
-    indices: false,
-    serializeDate: function serializeDate(date) {
-        return toISO.call(date);
-    },
-    skipNulls: false,
-    strictNullHandling: false
-};
-
-var isNonNullishPrimitive = function isNonNullishPrimitive(v) {
-    return typeof v === 'string'
-        || typeof v === 'number'
-        || typeof v === 'boolean'
-        || typeof v === 'symbol'
-        || typeof v === 'bigint';
-};
-
-var sentinel = {};
-
-var stringify$1 = function stringify(
-    object,
-    prefix,
-    generateArrayPrefix,
-    commaRoundTrip,
-    strictNullHandling,
-    skipNulls,
-    encoder,
-    filter,
-    sort,
-    allowDots,
-    serializeDate,
-    format,
-    formatter,
-    encodeValuesOnly,
-    charset,
-    sideChannel
-) {
-    var obj = object;
-
-    var tmpSc = sideChannel;
-    var step = 0;
-    var findFlag = false;
-    while ((tmpSc = tmpSc.get(sentinel)) !== void undefined && !findFlag) {
-        // Where object last appeared in the ref tree
-        var pos = tmpSc.get(object);
-        step += 1;
-        if (typeof pos !== 'undefined') {
-            if (pos === step) {
-                throw new RangeError('Cyclic object value');
-            } else {
-                findFlag = true; // Break while
-            }
-        }
-        if (typeof tmpSc.get(sentinel) === 'undefined') {
-            step = 0;
-        }
-    }
-
-    if (typeof filter === 'function') {
-        obj = filter(prefix, obj);
-    } else if (obj instanceof Date) {
-        obj = serializeDate(obj);
-    } else if (generateArrayPrefix === 'comma' && isArray$1(obj)) {
-        obj = utils$1.maybeMap(obj, function (value) {
-            if (value instanceof Date) {
-                return serializeDate(value);
-            }
-            return value;
-        });
-    }
-
-    if (obj === null) {
-        if (strictNullHandling) {
-            return encoder && !encodeValuesOnly ? encoder(prefix, defaults$1.encoder, charset, 'key', format) : prefix;
-        }
-
-        obj = '';
-    }
-
-    if (isNonNullishPrimitive(obj) || utils$1.isBuffer(obj)) {
-        if (encoder) {
-            var keyValue = encodeValuesOnly ? prefix : encoder(prefix, defaults$1.encoder, charset, 'key', format);
-            return [formatter(keyValue) + '=' + formatter(encoder(obj, defaults$1.encoder, charset, 'value', format))];
-        }
-        return [formatter(prefix) + '=' + formatter(String(obj))];
-    }
-
-    var values = [];
-
-    if (typeof obj === 'undefined') {
-        return values;
-    }
-
-    var objKeys;
-    if (generateArrayPrefix === 'comma' && isArray$1(obj)) {
-        // we need to join elements in
-        if (encodeValuesOnly && encoder) {
-            obj = utils$1.maybeMap(obj, encoder);
-        }
-        objKeys = [{ value: obj.length > 0 ? obj.join(',') || null : void undefined }];
-    } else if (isArray$1(filter)) {
-        objKeys = filter;
-    } else {
-        var keys = Object.keys(obj);
-        objKeys = sort ? keys.sort(sort) : keys;
-    }
-
-    var adjustedPrefix = commaRoundTrip && isArray$1(obj) && obj.length === 1 ? prefix + '[]' : prefix;
-
-    for (var j = 0; j < objKeys.length; ++j) {
-        var key = objKeys[j];
-        var value = typeof key === 'object' && typeof key.value !== 'undefined' ? key.value : obj[key];
-
-        if (skipNulls && value === null) {
-            continue;
-        }
-
-        var keyPrefix = isArray$1(obj)
-            ? typeof generateArrayPrefix === 'function' ? generateArrayPrefix(adjustedPrefix, key) : adjustedPrefix
-            : adjustedPrefix + (allowDots ? '.' + key : '[' + key + ']');
-
-        sideChannel.set(object, step);
-        var valueSideChannel = getSideChannel();
-        valueSideChannel.set(sentinel, sideChannel);
-        pushToArray(values, stringify(
-            value,
-            keyPrefix,
-            generateArrayPrefix,
-            commaRoundTrip,
-            strictNullHandling,
-            skipNulls,
-            generateArrayPrefix === 'comma' && encodeValuesOnly && isArray$1(obj) ? null : encoder,
-            filter,
-            sort,
-            allowDots,
-            serializeDate,
-            format,
-            formatter,
-            encodeValuesOnly,
-            charset,
-            valueSideChannel
-        ));
-    }
-
-    return values;
-};
-
-var normalizeStringifyOptions = function normalizeStringifyOptions(opts) {
-    if (!opts) {
-        return defaults$1;
-    }
-
-    if (opts.encoder !== null && typeof opts.encoder !== 'undefined' && typeof opts.encoder !== 'function') {
-        throw new TypeError('Encoder has to be a function.');
-    }
-
-    var charset = opts.charset || defaults$1.charset;
-    if (typeof opts.charset !== 'undefined' && opts.charset !== 'utf-8' && opts.charset !== 'iso-8859-1') {
-        throw new TypeError('The charset option must be either utf-8, iso-8859-1, or undefined');
-    }
-
-    var format = formats$1['default'];
-    if (typeof opts.format !== 'undefined') {
-        if (!has$1.call(formats$1.formatters, opts.format)) {
-            throw new TypeError('Unknown format option provided.');
-        }
-        format = opts.format;
-    }
-    var formatter = formats$1.formatters[format];
-
-    var filter = defaults$1.filter;
-    if (typeof opts.filter === 'function' || isArray$1(opts.filter)) {
-        filter = opts.filter;
-    }
-
-    return {
-        addQueryPrefix: typeof opts.addQueryPrefix === 'boolean' ? opts.addQueryPrefix : defaults$1.addQueryPrefix,
-        allowDots: typeof opts.allowDots === 'undefined' ? defaults$1.allowDots : !!opts.allowDots,
-        charset: charset,
-        charsetSentinel: typeof opts.charsetSentinel === 'boolean' ? opts.charsetSentinel : defaults$1.charsetSentinel,
-        delimiter: typeof opts.delimiter === 'undefined' ? defaults$1.delimiter : opts.delimiter,
-        encode: typeof opts.encode === 'boolean' ? opts.encode : defaults$1.encode,
-        encoder: typeof opts.encoder === 'function' ? opts.encoder : defaults$1.encoder,
-        encodeValuesOnly: typeof opts.encodeValuesOnly === 'boolean' ? opts.encodeValuesOnly : defaults$1.encodeValuesOnly,
-        filter: filter,
-        format: format,
-        formatter: formatter,
-        serializeDate: typeof opts.serializeDate === 'function' ? opts.serializeDate : defaults$1.serializeDate,
-        skipNulls: typeof opts.skipNulls === 'boolean' ? opts.skipNulls : defaults$1.skipNulls,
-        sort: typeof opts.sort === 'function' ? opts.sort : null,
-        strictNullHandling: typeof opts.strictNullHandling === 'boolean' ? opts.strictNullHandling : defaults$1.strictNullHandling
-    };
-};
-
-var stringify_1 = function (object, opts) {
-    var obj = object;
-    var options = normalizeStringifyOptions(opts);
-
-    var objKeys;
-    var filter;
-
-    if (typeof options.filter === 'function') {
-        filter = options.filter;
-        obj = filter('', obj);
-    } else if (isArray$1(options.filter)) {
-        filter = options.filter;
-        objKeys = filter;
-    }
-
-    var keys = [];
-
-    if (typeof obj !== 'object' || obj === null) {
-        return '';
-    }
-
-    var arrayFormat;
-    if (opts && opts.arrayFormat in arrayPrefixGenerators) {
-        arrayFormat = opts.arrayFormat;
-    } else if (opts && 'indices' in opts) {
-        arrayFormat = opts.indices ? 'indices' : 'repeat';
-    } else {
-        arrayFormat = 'indices';
-    }
-
-    var generateArrayPrefix = arrayPrefixGenerators[arrayFormat];
-    if (opts && 'commaRoundTrip' in opts && typeof opts.commaRoundTrip !== 'boolean') {
-        throw new TypeError('`commaRoundTrip` must be a boolean, or absent');
-    }
-    var commaRoundTrip = generateArrayPrefix === 'comma' && opts && opts.commaRoundTrip;
-
-    if (!objKeys) {
-        objKeys = Object.keys(obj);
-    }
-
-    if (options.sort) {
-        objKeys.sort(options.sort);
-    }
-
-    var sideChannel = getSideChannel();
-    for (var i = 0; i < objKeys.length; ++i) {
-        var key = objKeys[i];
-
-        if (options.skipNulls && obj[key] === null) {
-            continue;
-        }
-        pushToArray(keys, stringify$1(
-            obj[key],
-            key,
-            generateArrayPrefix,
-            commaRoundTrip,
-            options.strictNullHandling,
-            options.skipNulls,
-            options.encode ? options.encoder : null,
-            options.filter,
-            options.sort,
-            options.allowDots,
-            options.serializeDate,
-            options.format,
-            options.formatter,
-            options.encodeValuesOnly,
-            options.charset,
-            sideChannel
-        ));
-    }
-
-    var joined = keys.join(options.delimiter);
-    var prefix = options.addQueryPrefix === true ? '?' : '';
-
-    if (options.charsetSentinel) {
-        if (options.charset === 'iso-8859-1') {
-            // encodeURIComponent('&#10003;'), the "numeric entity" representation of a checkmark
-            prefix += 'utf8=%26%2310003%3B&';
-        } else {
-            // encodeURIComponent('✓')
-            prefix += 'utf8=%E2%9C%93&';
-        }
-    }
-
-    return joined.length > 0 ? prefix + joined : '';
-};
-
-var utils = utils$2;
-
-var has = Object.prototype.hasOwnProperty;
-var isArray = Array.isArray;
-
-var defaults = {
-    allowDots: false,
-    allowPrototypes: false,
-    allowSparse: false,
-    arrayLimit: 20,
-    charset: 'utf-8',
-    charsetSentinel: false,
-    comma: false,
-    decoder: utils.decode,
-    delimiter: '&',
-    depth: 5,
-    ignoreQueryPrefix: false,
-    interpretNumericEntities: false,
-    parameterLimit: 1000,
-    parseArrays: true,
-    plainObjects: false,
-    strictNullHandling: false
-};
-
-var interpretNumericEntities = function (str) {
-    return str.replace(/&#(\d+);/g, function ($0, numberStr) {
-        return String.fromCharCode(parseInt(numberStr, 10));
-    });
-};
-
-var parseArrayValue = function (val, options) {
-    if (val && typeof val === 'string' && options.comma && val.indexOf(',') > -1) {
-        return val.split(',');
-    }
-
-    return val;
-};
-
-// This is what browsers will submit when the ✓ character occurs in an
-// application/x-www-form-urlencoded body and the encoding of the page containing
-// the form is iso-8859-1, or when the submitted form has an accept-charset
-// attribute of iso-8859-1. Presumably also with other charsets that do not contain
-// the ✓ character, such as us-ascii.
-var isoSentinel = 'utf8=%26%2310003%3B'; // encodeURIComponent('&#10003;')
-
-// These are the percent-encoded utf-8 octets representing a checkmark, indicating that the request actually is utf-8 encoded.
-var charsetSentinel = 'utf8=%E2%9C%93'; // encodeURIComponent('✓')
-
-var parseValues = function parseQueryStringValues(str, options) {
-    var obj = { __proto__: null };
-
-    var cleanStr = options.ignoreQueryPrefix ? str.replace(/^\?/, '') : str;
-    var limit = options.parameterLimit === Infinity ? undefined : options.parameterLimit;
-    var parts = cleanStr.split(options.delimiter, limit);
-    var skipIndex = -1; // Keep track of where the utf8 sentinel was found
-    var i;
-
-    var charset = options.charset;
-    if (options.charsetSentinel) {
-        for (i = 0; i < parts.length; ++i) {
-            if (parts[i].indexOf('utf8=') === 0) {
-                if (parts[i] === charsetSentinel) {
-                    charset = 'utf-8';
-                } else if (parts[i] === isoSentinel) {
-                    charset = 'iso-8859-1';
-                }
-                skipIndex = i;
-                i = parts.length; // The eslint settings do not allow break;
-            }
-        }
-    }
-
-    for (i = 0; i < parts.length; ++i) {
-        if (i === skipIndex) {
-            continue;
-        }
-        var part = parts[i];
-
-        var bracketEqualsPos = part.indexOf(']=');
-        var pos = bracketEqualsPos === -1 ? part.indexOf('=') : bracketEqualsPos + 1;
-
-        var key, val;
-        if (pos === -1) {
-            key = options.decoder(part, defaults.decoder, charset, 'key');
-            val = options.strictNullHandling ? null : '';
-        } else {
-            key = options.decoder(part.slice(0, pos), defaults.decoder, charset, 'key');
-            val = utils.maybeMap(
-                parseArrayValue(part.slice(pos + 1), options),
-                function (encodedVal) {
-                    return options.decoder(encodedVal, defaults.decoder, charset, 'value');
-                }
-            );
-        }
-
-        if (val && options.interpretNumericEntities && charset === 'iso-8859-1') {
-            val = interpretNumericEntities(val);
-        }
-
-        if (part.indexOf('[]=') > -1) {
-            val = isArray(val) ? [val] : val;
-        }
-
-        if (has.call(obj, key)) {
-            obj[key] = utils.combine(obj[key], val);
-        } else {
-            obj[key] = val;
-        }
-    }
-
-    return obj;
-};
-
-var parseObject = function (chain, val, options, valuesParsed) {
-    var leaf = valuesParsed ? val : parseArrayValue(val, options);
-
-    for (var i = chain.length - 1; i >= 0; --i) {
-        var obj;
-        var root = chain[i];
-
-        if (root === '[]' && options.parseArrays) {
-            obj = [].concat(leaf);
-        } else {
-            obj = options.plainObjects ? Object.create(null) : {};
-            var cleanRoot = root.charAt(0) === '[' && root.charAt(root.length - 1) === ']' ? root.slice(1, -1) : root;
-            var index = parseInt(cleanRoot, 10);
-            if (!options.parseArrays && cleanRoot === '') {
-                obj = { 0: leaf };
-            } else if (
-                !isNaN(index)
-                && root !== cleanRoot
-                && String(index) === cleanRoot
-                && index >= 0
-                && (options.parseArrays && index <= options.arrayLimit)
-            ) {
-                obj = [];
-                obj[index] = leaf;
-            } else if (cleanRoot !== '__proto__') {
-                obj[cleanRoot] = leaf;
-            }
-        }
-
-        leaf = obj;
-    }
-
-    return leaf;
-};
-
-var parseKeys = function parseQueryStringKeys(givenKey, val, options, valuesParsed) {
-    if (!givenKey) {
-        return;
-    }
-
-    // Transform dot notation to bracket notation
-    var key = options.allowDots ? givenKey.replace(/\.([^.[]+)/g, '[$1]') : givenKey;
-
-    // The regex chunks
-
-    var brackets = /(\[[^[\]]*])/;
-    var child = /(\[[^[\]]*])/g;
-
-    // Get the parent
-
-    var segment = options.depth > 0 && brackets.exec(key);
-    var parent = segment ? key.slice(0, segment.index) : key;
-
-    // Stash the parent if it exists
-
-    var keys = [];
-    if (parent) {
-        // If we aren't using plain objects, optionally prefix keys that would overwrite object prototype properties
-        if (!options.plainObjects && has.call(Object.prototype, parent)) {
-            if (!options.allowPrototypes) {
-                return;
-            }
-        }
-
-        keys.push(parent);
-    }
-
-    // Loop through children appending to the array until we hit depth
-
-    var i = 0;
-    while (options.depth > 0 && (segment = child.exec(key)) !== null && i < options.depth) {
-        i += 1;
-        if (!options.plainObjects && has.call(Object.prototype, segment[1].slice(1, -1))) {
-            if (!options.allowPrototypes) {
-                return;
-            }
-        }
-        keys.push(segment[1]);
-    }
-
-    // If there's a remainder, just add whatever is left
-
-    if (segment) {
-        keys.push('[' + key.slice(segment.index) + ']');
-    }
-
-    return parseObject(keys, val, options, valuesParsed);
-};
-
-var normalizeParseOptions = function normalizeParseOptions(opts) {
-    if (!opts) {
-        return defaults;
-    }
-
-    if (opts.decoder !== null && opts.decoder !== undefined && typeof opts.decoder !== 'function') {
-        throw new TypeError('Decoder has to be a function.');
-    }
-
-    if (typeof opts.charset !== 'undefined' && opts.charset !== 'utf-8' && opts.charset !== 'iso-8859-1') {
-        throw new TypeError('The charset option must be either utf-8, iso-8859-1, or undefined');
-    }
-    var charset = typeof opts.charset === 'undefined' ? defaults.charset : opts.charset;
-
-    return {
-        allowDots: typeof opts.allowDots === 'undefined' ? defaults.allowDots : !!opts.allowDots,
-        allowPrototypes: typeof opts.allowPrototypes === 'boolean' ? opts.allowPrototypes : defaults.allowPrototypes,
-        allowSparse: typeof opts.allowSparse === 'boolean' ? opts.allowSparse : defaults.allowSparse,
-        arrayLimit: typeof opts.arrayLimit === 'number' ? opts.arrayLimit : defaults.arrayLimit,
-        charset: charset,
-        charsetSentinel: typeof opts.charsetSentinel === 'boolean' ? opts.charsetSentinel : defaults.charsetSentinel,
-        comma: typeof opts.comma === 'boolean' ? opts.comma : defaults.comma,
-        decoder: typeof opts.decoder === 'function' ? opts.decoder : defaults.decoder,
-        delimiter: typeof opts.delimiter === 'string' || utils.isRegExp(opts.delimiter) ? opts.delimiter : defaults.delimiter,
-        // eslint-disable-next-line no-implicit-coercion, no-extra-parens
-        depth: (typeof opts.depth === 'number' || opts.depth === false) ? +opts.depth : defaults.depth,
-        ignoreQueryPrefix: opts.ignoreQueryPrefix === true,
-        interpretNumericEntities: typeof opts.interpretNumericEntities === 'boolean' ? opts.interpretNumericEntities : defaults.interpretNumericEntities,
-        parameterLimit: typeof opts.parameterLimit === 'number' ? opts.parameterLimit : defaults.parameterLimit,
-        parseArrays: opts.parseArrays !== false,
-        plainObjects: typeof opts.plainObjects === 'boolean' ? opts.plainObjects : defaults.plainObjects,
-        strictNullHandling: typeof opts.strictNullHandling === 'boolean' ? opts.strictNullHandling : defaults.strictNullHandling
-    };
-};
-
-var parse$1 = function (str, opts) {
-    var options = normalizeParseOptions(opts);
-
-    if (str === '' || str === null || typeof str === 'undefined') {
-        return options.plainObjects ? Object.create(null) : {};
-    }
-
-    var tempObj = typeof str === 'string' ? parseValues(str, options) : str;
-    var obj = options.plainObjects ? Object.create(null) : {};
-
-    // Iterate over the keys and setup the new object
-
-    var keys = Object.keys(tempObj);
-    for (var i = 0; i < keys.length; ++i) {
-        var key = keys[i];
-        var newObj = parseKeys(key, tempObj[key], options, typeof str === 'string');
-        obj = utils.merge(obj, newObj, options);
-    }
-
-    if (options.allowSparse === true) {
-        return obj;
-    }
-
-    return utils.compact(obj);
-};
-
-var stringify = stringify_1;
-var parse = parse$1;
-var formats = formats$3;
-
-var lib = {
-    formats: formats,
-    parse: parse,
-    stringify: stringify
-};
-
-var IMAGE_SIZE_LIMIT_IN_MEGABYTES = 1;
-var NEETO_TEMPLATES_URL = "/neeto_templates_engine/api/v1";
-var TEMPLATE_TAGS_URL = "".concat(NEETO_TEMPLATES_URL, "/tags/template_tags");
-
-//routes of the host
-var TEMPLATES_URL = "/api/v1/templates";
-var TEMPLATES_SETTINGS_URL = "/api/v1/settings";
-var IMAGE_UPLOAD_CONFIG = {
-  maxImageSize: IMAGE_SIZE_LIMIT_IN_MEGABYTES
-};
-
-var list$1 = function list(params) {
-  return axios__default["default"].get(TEMPLATES_URL, {
-    params: params,
-    paramsSerializer: function paramsSerializer(params) {
-      return lib.stringify(params, {
-        arrayFormat: "brackets"
-      });
-    }
-  });
-};
-var create$1 = function create(_ref) {
-  var id = _ref.id;
-  return axios__default["default"].post(TEMPLATES_URL, {
-    template: {
-      id: id
-    }
-  }, {
-    showToastr: false
-  });
-};
-var fetch = function fetch(_ref2) {
-  var templateId = _ref2.templateId;
-  return axios__default["default"].get("".concat(TEMPLATES_SETTINGS_URL, "/").concat(templateId));
-};
-var update = function update(_ref3) {
-  var resourceId = _ref3.resourceId,
-    payload = _ref3.payload;
-  return axios__default["default"].put("".concat(TEMPLATES_SETTINGS_URL, "/").concat(resourceId), payload);
-};
-var templatesApi = {
-  list: list$1,
-  create: create$1,
-  update: update,
-  fetch: fetch
-};
-
-var QUERY_KEYS = {
-  TEMPLATES_LIST: "templates-list",
-  TEMPLATE: "templates-detail",
-  TEMPLATE_TAGS: "template-tags"
-};
-
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useFetchTemplates = function useFetchTemplates(_ref) {
-  var searchTerm = _ref.searchTerm,
-    category = _ref.category;
-  return reactQuery.useInfiniteQuery([QUERY_KEYS.TEMPLATES_LIST, searchTerm, category], function (_ref2) {
-    var _ref2$pageParam = _ref2.pageParam,
-      pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
-    return templatesApi.list({
-      page: pageParam,
-      searchTerm: searchTerm,
-      category: category
-    });
-  }, {
-    getNextPageParam: function getNextPageParam(lastPage) {
-      return lastPage.hasNextPage ? lastPage.page + 1 : undefined;
-    },
-    select: function select(data) {
-      var templates = data.pages.flatMap(ramda.prop("templates"));
-      var lastPage = data.pages[data.pages.length - 1];
-      return {
-        templates: templates,
-        hasNextPage: lastPage.hasNextPage,
-        page: lastPage.page,
-        tags: lastPage.tags,
-        templatesCount: lastPage.templatesCount
-      };
-    },
-    keepPreviousData: true
-  });
-};
-var useCreateTemplate = function useCreateTemplate(_ref3, options) {
-  var refetchResource = _ref3.refetchResource;
-  return reactQuery.useMutation(templatesApi.create, _objectSpread$3(_objectSpread$3({}, options), {}, {
-    onSuccess: function onSuccess() {
-      refetchResource();
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      options === null || options === void 0 || options.onSuccess.apply(options, args);
-    }
-  }));
-};
-var useFetchTemplate = function useFetchTemplate(_ref4, options) {
-  var resourceId = _ref4.resourceId;
-  return reactQuery.useQuery([QUERY_KEYS.TEMPLATE, resourceId], function () {
-    return templatesApi.fetch({
-      templateId: resourceId
-    });
-  }, options);
-};
-var useUpdateTemplate = function useUpdateTemplate(_ref5) {
-  var resourceId = _ref5.resourceId;
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref6) {
-    var template = _ref6.template;
-    return templatesApi.update({
-      resourceId: resourceId,
-      payload: {
-        template: template
-      }
-    });
-  }, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries([QUERY_KEYS.TEMPLATE, resourceId]);
-      queryClient.invalidateQueries(QUERY_KEYS.TEMPLATES_LIST);
-    }
-  });
-};
-
-var BlankCard = function BlankCard(_ref) {
-  var Icon = _ref.icon,
-    title = _ref.title,
-    description = _ref.description,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return /*#__PURE__*/React__default["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 : neetoCist.noop
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-text-primary-500 mb-4"
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    size: 40
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "text-center",
-    lineHeight: "normal",
-    style: "h5",
-    weight: "semibold"
-  }, title), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-600 text-center",
-    lineHeight: "leading-4",
-    style: "body3"
-  }, description));
-};
-
-var ButtonLoader = function ButtonLoader() {
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    role: "status"
-  }, /*#__PURE__*/React__default["default"].createElement("svg", {
-    "aria-hidden": "true",
-    className: "neeto-ui-text-gray-400 inline h-4 w-4 animate-spin",
-    fill: "none",
-    viewBox: "0 0 100 101",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default["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__default["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"
-  })));
-};
-
-var getMenuItems = function getMenuItems(_ref) {
-  var handleCreateTemplate = _ref.handleCreateTemplate,
-    isCreating = _ref.isCreating,
-    template = _ref.template;
-  return [{
-    key: MENU_ITEMS.CREATE,
-    "data-cy": "use-this-template-button",
-    isDisabled: isCreating,
-    label: i18next.t("neetoTemplate.templates.editTemplate"),
-    suffix: isCreating && /*#__PURE__*/React__default["default"].createElement(ButtonLoader, null),
-    onClick: function onClick(event) {
-      return handleCreateTemplate(event, template.id);
-    }
-  }, {
-    key: MENU_ITEMS.PREVIEW,
-    "data-cy": "template-preview-button",
-    label: i18next.t("neetoTemplate.templates.preview")
-  }];
-};
-
-var Card = function Card(_ref) {
-  var template = _ref.template,
-    onClick = _ref.onClick,
-    afterCreate = _ref.afterCreate,
-    refetchResource = _ref.refetchResource;
-  var _useCreateTemplate = useCreateTemplate({
-      refetchResource: refetchResource
-    }),
-    createTemplate = _useCreateTemplate.mutate,
-    isCreating = _useCreateTemplate.isLoading;
-  var handleCreateTemplate = function handleCreateTemplate(e, templateId) {
-    e.stopPropagation();
-    createTemplate({
-      id: templateId
-    }, {
-      onSuccess: function onSuccess(response) {
-        return afterCreate(response);
-      }
-    });
-  };
-  return /*#__PURE__*/React__default["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__default["default"].createElement("div", {
-    className: "neeto-template__header"
-  }, /*#__PURE__*/React__default["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__default["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__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 line-clamp-2",
-    "data-cy": "template-card-title",
-    lineHeight: "normal",
-    style: "body2"
-  }, template.title), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
-    dropdownButtonProps: {
-      className: "flex-shrink-0",
-      size: "small"
-    },
-    dropdownProps: {
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      }
-    },
-    menuItems: getMenuItems({
-      handleCreateTemplate: handleCreateTemplate,
-      isCreating: isCreating,
-      template: template
-    })
-  })));
-};
-
-var CategoryItem = function CategoryItem(_ref) {
-  var label = _ref.label,
-    count = _ref.count,
-    isActive = _ref.isActive,
-    setCurrentCategory = _ref.setCurrentCategory;
-  return /*#__PURE__*/React__default["default"].createElement("button", {
-    "data-cy": "category-".concat(utils$3.joinHyphenCase(label)),
-    tabIndex: 0,
-    className: classnames__default["default"]("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", {
-      "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-200 focus:neeto-ui-bg-gray-200 border-transparent": !isActive,
-      "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__default["default"].createElement("span", null, label), /*#__PURE__*/React__default["default"].createElement("span", null, count));
-};
-
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var List = function List(_ref) {
-  var setCurrentScreen = _ref.setCurrentScreen,
-    setSelectedTemplate = _ref.setSelectedTemplate,
-    onCreate = _ref.onCreate,
-    isCreating = _ref.isCreating,
-    afterCreate = _ref.afterCreate,
-    refetchResource = _ref.refetchResource;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = React.useState(DEFAULT_CATEGORY),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentCategory = _useState2[0],
-    _setCurrentCategory = _useState2[1];
-  var _useState3 = React.useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchTerm = _useState4[0],
-    setSearchTerm = _useState4[1];
-  var _useFetchTemplates = useFetchTemplates({
-      searchTerm: searchTerm,
-      category: currentCategory
-    }),
-    _useFetchTemplates$ha = _useFetchTemplates.hasNextPage,
-    hasNextPage = _useFetchTemplates$ha === void 0 ? false : _useFetchTemplates$ha,
-    fetchNextPage = _useFetchTemplates.fetchNextPage,
-    isTemplatesLoading = _useFetchTemplates.isLoading,
-    _useFetchTemplates$da = _useFetchTemplates.data,
-    data = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da;
-  var _useInfiniteScroll = useInfiniteScroll({
-      loading: isTemplatesLoading,
-      hasNextPage: hasNextPage,
-      onLoadMore: fetchNextPage,
-      rootMargin: "0px 0px 700px 0px",
-      delayInMs: INFINITE_SCROLL_DELAY
-    }),
-    _useInfiniteScroll2 = _slicedToArray(_useInfiniteScroll, 2),
-    sentryRef = _useInfiniteScroll2[0],
-    rootRef = _useInfiniteScroll2[1].rootRef;
-  var handleCardClick = function handleCardClick(template) {
-    setCurrentScreen(TEMPLATE_SCREENS.PREVIEW);
-    setSelectedTemplate(template);
-  };
-  if (isTemplatesLoading) {
-    return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
-  }
-  var _data$tags = data.tags,
-    tags = _data$tags === void 0 ? [] : _data$tags,
-    _data$templates = data.templates,
-    templates = _data$templates === void 0 ? [] : _data$templates,
-    _data$templatesCount = data.templatesCount,
-    templatesCount = _data$templatesCount === void 0 ? 0 : _data$templatesCount;
-  var categories = [_objectSpread$2(_objectSpread$2({}, DEFAULT_CATEGORY), {}, {
-    count: templatesCount
-  })].concat(_toConsumableArray(tags));
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sticky left-0 top-0 w-52 flex-shrink-0 space-y-8 py-6 pl-4 md:w-72 md:pl-10 lg:w-80 xl:pl-16"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-1"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    "data-cy": "create-new-form-title",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoTemplate.templates.createNewEntity")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoTemplate.templates.description"))), /*#__PURE__*/React__default["default"].createElement(Search__default["default"], {
-    autoFocus: true,
-    disableTrimOnBlur: true,
-    "data-cy": "template-search-input",
-    placeholder: t("neetoTemplate.templates.search"),
-    onSearch: function onSearch(value) {
-      return setSearchTerm(value);
-    }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "uppercase",
-    "data-cy": "template-categories-label",
-    style: "h6"
-  }, t("neetoTemplate.templates.categories")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-2"
-  }, categories.map(function (_ref2) {
-    var id = _ref2.id,
-      name = _ref2.name,
-      count = _ref2.count;
-    return /*#__PURE__*/React__default["default"].createElement(CategoryItem, {
-      count: count,
-      isActive: currentCategory.id === id,
-      key: id,
-      label: name,
-      setCurrentCategory: function setCurrentCategory() {
-        return _setCurrentCategory({
-          id: id,
-          name: name
-        });
-      }
-    });
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "h-screen overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
-    ref: rootRef
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex-grow space-y-6"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-5 xl:gap-6 2xl:grid-cols-4"
-  }, /*#__PURE__*/React__default["default"].createElement(BlankCard, {
-    description: t("neetoTemplate.templates.blankCard.description"),
-    disabled: isCreating,
-    icon: isCreating ? neetoui.Spinner : SvgCustom,
-    title: t("neetoTemplate.templates.blankCard.title"),
-    onClick: onCreate
-  }), templates.map(function (template, index) {
-    return /*#__PURE__*/React__default["default"].createElement(Card, {
-      afterCreate: afterCreate,
-      refetchResource: refetchResource,
-      template: template,
-      key: index,
-      onClick: function onClick() {
-        return handleCardClick(template);
-      }
-    });
-  })), hasNextPage && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "my-10 text-center",
-    ref: sentryRef
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)))));
+          })]
+        }), hasNextPage && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "my-10 text-center",
+          ref: sentryRef,
+          children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+        })]
+      })
+    })]
+  });
 };
 
 var Preview$1 = function Preview(_ref) {
@@ -2862,55 +773,87 @@ var Preview$1 = function Preview(_ref) {
     refetchResource = _ref.refetchResource;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useCreateTemplate = useCreateTemplate({
-      refetchResource: refetchResource
-    }),
+  var _useBreakpoints = reactUtils.useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var _useCreateTemplate = useCreateTemplate(),
     createTemplate = _useCreateTemplate.mutate,
-    isCreating = _useCreateTemplate.isLoading;
+    isCreating = _useCreateTemplate.isPending;
+  var _useState = React.useState(RESPONSIVE_DEVICES.DESKTOP),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedDevice = _useState2[0],
+    setSelectedDevice = _useState2[1];
   var handleCreateTemplate = function handleCreateTemplate() {
     createTemplate({
       id: selectedTemplate.id
     }, {
       onSuccess: function onSuccess(response) {
-        return afterCreate(response);
+        afterCreate(response);
+        refetchResource();
       }
     });
   };
   var title = selectedTemplate.title,
     previewUrl = selectedTemplate.previewUrl;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "m-auto flex h-full w-full max-w-5xl flex-col space-y-6 py-6"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex min-w-0 flex-grow items-center gap-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "flex-shrink-0",
-    "data-cy": "preview-template-back-button",
-    icon: neetoIcons.LeftArrow,
-    style: "text",
-    onClick: function onClick() {
-      return setCurrentScreen(TEMPLATE_SCREENS.LIST);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "leading-none",
-    "data-cy": "preview-template-title",
-    style: "h2",
-    weight: "semibold"
-  }, title)), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "flex-shrink-0",
-    "data-cy": "preview-use-template-button",
-    disabled: isCreating,
-    label: t("neetoTemplate.templates.editTemplate"),
-    loading: isCreating,
-    onClick: handleCreateTemplate
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10"
-  }, /*#__PURE__*/React__default["default"].createElement("iframe", {
-    className: "w-full flex-1 shadow-inner",
-    "data-cy": "iframe-id",
-    src: previewUrl
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-templates-full-page-preview flex h-full w-full flex-col",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-templates-full-page-preview__header neeto-ui-border-gray-200 border-b px-4",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mx-auto flex w-full max-w-6xl items-center justify-between py-[9px]",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-1/3",
+          children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            className: "truncate leading-tight",
+            "data-cy": "preview-template-title",
+            style: "h3",
+            weight: "semibold",
+            children: title
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "hidden flex-shrink-0 lg:flex",
+          children: /*#__PURE__*/jsxRuntime.jsx(ResponsiveDevicePicker__default["default"], {
+            selectedDevice: selectedDevice,
+            onDeviceChange: setSelectedDevice
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex w-1/3 items-center justify-end gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            className: "flex-shrink-0",
+            "data-cy": "preview-template-back-button",
+            style: "secondary",
+            label: isSize("mobile") ? t("neetoTemplate.templates.back") : t("neetoTemplate.templates.backToTemplates"),
+            onClick: function onClick() {
+              return setCurrentScreen(TEMPLATE_SCREENS.LIST);
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            className: "flex-shrink-0",
+            "data-cy": "preview-use-template-button",
+            disabled: isCreating,
+            label: t("neetoTemplate.templates.editTemplate"),
+            loading: isCreating,
+            onClick: handleCreateTemplate
+          })]
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-bg-gray-200 neeto-templates-full-page-preview__holder-wrapper min-h-0 flex-grow",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]("neeto-templates-full-page-preview__holder m-auto", {
+          "neeto-templates-full-page-preview__holder--desktop": selectedDevice === RESPONSIVE_DEVICES.DESKTOP,
+          "neeto-templates-full-page-preview__holder--tablet": selectedDevice === RESPONSIVE_DEVICES.TABLET,
+          "neeto-templates-full-page-preview__holder--mobile": selectedDevice === RESPONSIVE_DEVICES.MOBILE
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-templates-full-page-preview__device-border h-full w-full",
+          children: /*#__PURE__*/jsxRuntime.jsx("iframe", {
+            className: "neeto-templates-full-page-preview__iframe h-full w-full border-none",
+            "data-cy": "iframe-id",
+            src: previewUrl
+          })
+        })
+      })
+    })]
+  });
 };
 
 var CreateTemplateModal = function CreateTemplateModal(_ref) {
@@ -2937,24 +880,26 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
     }, 300); //To accommodate the animation duration.
   };
 
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
-    className: "neeto-template-list h-screen w-screen overflow-y-auto",
+  return /*#__PURE__*/jsxRuntime.jsx(Modal__default["default"], {
     isOpen: isOpen,
+    className: "neeto-template-list h-screen w-screen overflow-y-auto",
+    closeButton: currentScreen === TEMPLATE_SCREENS.LIST,
     size: "fullScreen",
-    onClose: onModalClose
-  }, currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/React__default["default"].createElement(List, {
-    setCurrentScreen: setCurrentScreen,
-    setSelectedTemplate: setSelectedTemplate,
-    isCreating: isCreating,
-    afterCreate: afterCreate,
-    onCreate: onCreate,
-    refetchResource: refetchResource
-  }) : /*#__PURE__*/React__default["default"].createElement(Preview$1, {
-    selectedTemplate: selectedTemplate,
-    setCurrentScreen: setCurrentScreen,
-    afterCreate: afterCreate,
-    refetchResource: refetchResource
-  }));
+    onClose: onModalClose,
+    children: currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/jsxRuntime.jsx(List, {
+      afterCreate: afterCreate,
+      isCreating: isCreating,
+      onCreate: onCreate,
+      refetchResource: refetchResource,
+      setCurrentScreen: setCurrentScreen,
+      setSelectedTemplate: setSelectedTemplate
+    }) : /*#__PURE__*/jsxRuntime.jsx(Preview$1, {
+      afterCreate: afterCreate,
+      refetchResource: refetchResource,
+      selectedTemplate: selectedTemplate,
+      setCurrentScreen: setCurrentScreen
+    })
+  });
 };
 
 var create = function create(payload) {
@@ -2972,21 +917,24 @@ var templateTagsApi = {
   list: list
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateTemplateTag = function useCreateTemplateTag(options) {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(templateTagsApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$3(_objectSpread$3({
+    mutationFn: templateTagsApi.create
+  }, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess;
       neetoTagsFrontend.refetchTags();
-      queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE_TAGS);
       options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options);
     }
   }));
 };
 var useFetchTemplateTags = function useFetchTemplateTags() {
-  return reactQuery.useQuery([QUERY_KEYS.TEMPLATE_TAGS], templateTagsApi.list);
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.TEMPLATE_TAGS],
+    queryFn: templateTagsApi.list
+  });
 };
 
 var FormikImageUploader = function FormikImageUploader(_ref) {
@@ -3002,7 +950,7 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
     setFieldValue("imageSignedId", file.signedId);
     return setValue(file.url);
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoImageUploaderFrontend.ImageUploader, {
+  return /*#__PURE__*/jsxRuntime.jsx(neetoImageUploaderFrontend.ImageUploader, {
     className: "h-52 w-full md:h-80",
     src: field.value,
     uploadConfig: IMAGE_UPLOAD_CONFIG,
@@ -3013,20 +961,22 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
 var PageWrapper = function PageWrapper(_ref) {
   var children = _ref.children,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("w-full flex-col", className)
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classnames__default["default"]("w-full flex-col", className),
+    children: children
+  });
 };
 var PageHeader = function PageHeader(_ref2) {
   var title = _ref2.title,
     breadcrumbs = _ref2.breadcrumbs;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full px-6"
-  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], {
-    breadcrumbs: breadcrumbs,
-    size: "small",
-    title: title
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "w-full px-6",
+    children: /*#__PURE__*/jsxRuntime.jsx(Header__default["default"], {
+      breadcrumbs: breadcrumbs,
+      size: "small",
+      title: title
+    })
+  });
 };
 var customPropEqualityCheck = function customPropEqualityCheck(prevProps, nextProps) {
   return prevProps.title === nextProps.title && prevProps.breadcrumbs === nextProps.breadcrumbs;
@@ -3036,13 +986,17 @@ var PageContent = function PageContent(_ref3) {
   var children = _ref3.children,
     _ref3$className = _ref3.className,
     className = _ref3$className === void 0 ? "" : _ref3$className;
-  return /*#__PURE__*/React__default["default"].createElement(Scrollable__default["default"], {
-    className: "w-full px-6 pb-6"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"](["mx-auto max-w-7xl", className])
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsx(Scrollable__default["default"], {
+    className: "w-full px-6 pb-6",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"](["mx-auto max-w-7xl", className]),
+      children: children
+    })
+  });
 };
 
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Tags = function Tags(_ref) {
   var allTags = _ref.allTags,
     selectedTags = _ref.selectedTags,
@@ -3074,44 +1028,52 @@ var Tags = function Tags(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: className
-  }, labelProps.label && /*#__PURE__*/React__default["default"].createElement(neetoui.Label, labelProps, labelProps.label), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoTagsFrontend.TagsComponent, {
-    allTags: allTags,
-    selectedTags: selectedTags,
-    buttonProps: {
-      loading: isLoading,
-      disabled: isLoading,
-      iconPosition: "left"
-    },
-    onTagCreate: handleTagCreate,
-    onTagDelete: handleTagRemove,
-    onTagSelect: handleTagSelect
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: className,
+    children: [labelProps.label && /*#__PURE__*/jsxRuntime.jsx(Label__default["default"], _objectSpread$2(_objectSpread$2({}, labelProps), {}, {
+      children: labelProps.label
+    })), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoTagsFrontend.TagsComponent, {
+        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["default"].createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("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["default"].createElement("div", {
-    className: "neeto-template__header"
-  }, /*#__PURE__*/React__default["default"].createElement("img", {
-    className: "neeto-template__image",
-    "data-cy": "template-image-preview",
-    src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
-  })), /*#__PURE__*/React__default["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["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800",
-    "data-cy": "template-title-text",
-    lineHeight: "normal",
-    style: "body2"
-  }, template.title)));
+    tabIndex: 0,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-template__header",
+      children: /*#__PURE__*/jsxRuntime.jsx("img", {
+        className: "neeto-template__image",
+        "data-cy": "template-image-preview",
+        src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-ui-text-gray-800",
+        "data-cy": "template-title-text",
+        lineHeight: "normal",
+        style: "body2",
+        children: template.title
+      })
+    })]
+  });
 };
 
 var buildSelectOptionsBy = function buildSelectOptionsBy(labelField) {
@@ -3138,8 +1100,8 @@ var buildTemplateUpdatePayload = function buildTemplateUpdatePayload(values) {
   };
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TemplateSettings = function TemplateSettings(_ref) {
   var _ref$onCancelTemplate = _ref.onCancelTemplatePreview,
     onCancelTemplatePreview = _ref$onCancelTemplate === void 0 ? "" : _ref$onCancelTemplate,
@@ -3160,10 +1122,10 @@ var TemplateSettings = function TemplateSettings(_ref) {
       resourceId: resourceId
     }),
     updateTemplate = _useUpdateTemplate.mutate,
-    isUpdatingTemplate = _useUpdateTemplate.isLoading;
+    isUpdatingTemplate = _useUpdateTemplate.isPending;
   var _useCreateTemplateTag = useCreateTemplateTag(),
     createTemplateTag = _useCreateTemplateTag.mutate,
-    isCreatingTags = _useCreateTemplateTag.isLoading;
+    isCreatingTags = _useCreateTemplateTag.isPending;
   var _useFetchTemplateTags = useFetchTemplateTags(),
     _useFetchTemplateTags2 = _useFetchTemplateTags.data,
     templateTags = _useFetchTemplateTags2 === void 0 ? {} : _useFetchTemplateTags2,
@@ -3175,92 +1137,205 @@ var TemplateSettings = function TemplateSettings(_ref) {
   };
   var isLoading = isFetchingTemplate || isTagsLoading;
   var tags = buildTagOptions(data === null || data === void 0 ? void 0 : data.tags);
-  var resourceInitialValues = _objectSpread(_objectSpread({
+  var resourceInitialValues = _objectSpread$1(_objectSpread$1({
     imageUrl: null
   }, data), {}, {
     tags: tags
   });
-  return /*#__PURE__*/React__default["default"].createElement(PageWrapper, {
-    className: className
-  }, /*#__PURE__*/React__default["default"].createElement(MemoizedPageHeader, {
-    breadcrumbs: breadcrumbs,
-    title: t("neetoTemplate.templateSettings.title")
-  }), /*#__PURE__*/React__default["default"].createElement(PageContent, {
-    className: classnames__default["default"]({
-      "min-h-0": !isLoading,
-      "h-full": isLoading
-    })
-  }, isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "mb-1",
-    "data-cy": "thank-you-action-text",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoTemplate.templateSettings.configureTemplates")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "mb-2",
-    "data-cy": "thank-you-description-label",
-    style: "body2"
-  }, t("neetoTemplate.templateSettings.subText")), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
-    formikProps: {
-      enableReinitialize: true,
-      initialValues: resourceInitialValues,
-      onSubmit: handleSubmit
+  return /*#__PURE__*/jsxRuntime.jsxs(PageWrapper, {
+    className: className,
+    children: [/*#__PURE__*/jsxRuntime.jsx(MemoizedPageHeader, {
+      breadcrumbs: breadcrumbs,
+      title: t("neetoTemplate.templateSettings.title")
+    }), /*#__PURE__*/jsxRuntime.jsx(PageContent, {
+      className: classnames__default["default"]({
+        "min-h-0": !isLoading,
+        "h-full": isLoading
+      }),
+      children: isLoading ? /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {}) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "mb-1",
+          "data-cy": "thank-you-action-text",
+          style: "h2",
+          weight: "semibold",
+          children: t("neetoTemplate.templateSettings.configureTemplates")
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "mb-2",
+          "data-cy": "thank-you-description-label",
+          style: "body2",
+          children: t("neetoTemplate.templateSettings.subText")
+        }), /*#__PURE__*/jsxRuntime.jsx(Form__default["default"], {
+          formikProps: {
+            enableReinitialize: true,
+            initialValues: resourceInitialValues,
+            onSubmit: handleSubmit
+          },
+          children: function children(_ref2) {
+            var values = _ref2.values,
+              setFieldValue = _ref2.setFieldValue;
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "grid grid-cols-2 gap-8 pt-6",
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "space-y-4",
+                children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+                  className: "mb-3",
+                  style: "h4",
+                  weight: "semibold",
+                  children: t("neetoTemplate.templateSettings.imageLabel")
+                }), /*#__PURE__*/jsxRuntime.jsx(FormikImageUploader, {
+                  name: "imageUrl"
+                }), /*#__PURE__*/jsxRuntime.jsx(Tags, {
+                  allTags: buildSelectOptionsBy("name", templateTags.tags),
+                  className: "space-y-2",
+                  isLoading: isCreatingTags,
+                  selectedTags: values.tags,
+                  labelProps: {
+                    label: t("neetoTemplate.templateSettings.categoryLabel")
+                  },
+                  onCreate: createTemplateTag,
+                  onUpdate: function onUpdate(tags) {
+                    return setFieldValue("tags", tags);
+                  }
+                }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "mt-12 flex flex-row items-center justify-start",
+                  children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+                    isSubmitting: isUpdatingTemplate,
+                    cancelButtonProps: {
+                      to: onCancelTemplatePreview,
+                      "data-cy": "reset-changes-button",
+                      onClick: neetoCist.noop
+                    }
+                  })
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+                  className: "mb-3",
+                  style: "h4",
+                  weight: "semibold",
+                  children: t("neetoTemplate.templateSettings.previewLabel")
+                }), /*#__PURE__*/jsxRuntime.jsx(Preview, {
+                  imageUrl: values.imageUrl,
+                  template: data
+                })]
+              })]
+            });
+          }
+        })]
+      })
+    })]
+  });
+};
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
     }
-  }, function (_ref2) {
-    var values = _ref2.values,
-      setFieldValue = _ref2.setFieldValue,
-      dirty = _ref2.dirty;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "grid grid-cols-2 gap-8 pt-6"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "space-y-4"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      className: "mb-3",
-      style: "h4",
-      weight: "semibold"
-    }, t("neetoTemplate.templateSettings.imageLabel")), /*#__PURE__*/React__default["default"].createElement(FormikImageUploader, {
-      name: "imageUrl"
-    }), /*#__PURE__*/React__default["default"].createElement(Tags, {
-      allTags: buildSelectOptionsBy("name", templateTags.tags),
-      className: "space-y-2",
-      isLoading: isCreatingTags,
-      selectedTags: values.tags,
-      labelProps: {
-        label: t("neetoTemplate.templateSettings.categoryLabel")
-      },
-      onCreate: createTemplateTag,
-      onUpdate: function onUpdate(tags) {
-        return setFieldValue("tags", tags);
+  }
+  return target;
+}
+
+var TAG_TYPES = [{
+  id: 1,
+  label: i18next.t("neetoTemplate.templatesTags.template"),
+  url: "".concat(NEETO_TEMPLATES_URL, "/tags/template_tags"),
+  columns: [{
+    title: i18next.t("neetoTemplate.templatesTags.numberOfActiveTemplates"),
+    key: "templates_count",
+    dataIndex: "templatesCount",
+    align: "center",
+    width: 300,
+    sorter: true,
+    render: function render(templatesCount) {
+      return templatesCount !== 0 ? /*#__PURE__*/jsxRuntime.jsxs(Typography__default["default"], {
+        style: "body1",
+        children: [" ", templatesCount, " "]
+      }) : "-";
+    }
+  }]
+}];
+
+var _excluded = ["breadcrumbs", "tagsPath"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TemplateTags = function TemplateTags(_ref) {
+  var breadcrumbs = _ref.breadcrumbs,
+    tagsPath = _ref.tagsPath,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var queryClient = reactQuery.useQueryClient();
+  var invalidateTags = function invalidateTags() {
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEYS.TEMPLATE_TAGS]
+    });
+  };
+  var invalidateTagsAndTemplates = function invalidateTagsAndTemplates() {
+    invalidateTags();
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEYS.TEMPLATES_LIST]
+    });
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEYS.TEMPLATE]
+    });
+  };
+  var config = _objectSpread({
+    tagTypes: TAG_TYPES,
+    tagsMergable: true,
+    breadcrumbs: breadcrumbs,
+    displayMenu: false,
+    tagsPath: tagsPath,
+    onTagRowClick: neetoCist.noop,
+    createTags: {
+      onSuccess: {
+        callback: invalidateTags
       }
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "mt-12 flex flex-row items-center justify-start"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      className: "mr-3 flex-shrink-0",
-      "data-cy": "save-changes-button",
-      disabled: !dirty,
-      loading: isUpdatingTemplate,
-      type: "submit",
-      label: t("neetoTemplate.templateSettings.button.saveChanges")
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "reset-changes-button",
-      style: "text",
-      to: onCancelTemplatePreview,
-      label: t("neetoTemplate.templateSettings.button.cancel")
-    }))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      className: "mb-3",
-      style: "h4",
-      weight: "semibold"
-    }, t("neetoTemplate.templateSettings.previewLabel")), /*#__PURE__*/React__default["default"].createElement(Preview, {
-      imageUrl: values.imageUrl,
-      template: data
-    })));
-  }))));
+    },
+    updateTags: {
+      onSuccess: {
+        callback: invalidateTagsAndTemplates
+      }
+    },
+    deleteTags: {
+      onSuccess: {
+        callback: invalidateTagsAndTemplates
+      }
+    },
+    mergeTags: {
+      onSuccess: {
+        callback: invalidateTagsAndTemplates
+      }
+    }
+  }, otherProps);
+  return /*#__PURE__*/jsxRuntime.jsx(neetoTagsFrontend.NeetoTags, {
+    config: config
+  });
 };
 
 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 = ".neeto-template-list .neeto-ui-modal__close{z-index:1}.neeto-template__header{flex-grow:1;min-height:120px}.neeto-template__image{aspect-ratio:16/9;max-height:100%;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}.neeto-template__description{min-height:54px}.neeto-templates-share-preview{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-gray-300));box-shadow:var(--neeto-ui-shadow-m);display:flex;flex-direction:column;height:calc(100vh - 104px);width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL3RlbXBsYXRlcy9fdGVtcGxhdGUtbGlzdC5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL3RlbXBsYXRlcy9fc2hhcmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSw0Q0FDRSxTQ0FKLENES0Usd0JBRUUsV0FBQSxDQURBLGdCQ0RKLENES0UsdUJBRUUsaUJBQUEsQ0FHQSxlQUFBLENBREEsY0FBQSxDQURBLG1CQUFBLENBQUEsZ0JBQUEsQ0FGQSxVQ0NKLENES0UsNkJBQ0UsZUNISixDQ2pCQSwrQkFPRSwyQ0FBQSxDQUpBLCtDQUFBLENBQ0EsbUNBQUEsQ0FDQSxZQUFBLENBQ0EscUJBQUEsQ0FKQSwwQkFBQSxDQURBLFVEMEJGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXRlbXBsYXRlLWxpc3Qge1xuICAubmVldG8tdWktbW9kYWxfX2Nsb3NlIHtcbiAgICB6LWluZGV4OiAxO1xuICB9XG59XG5cbi5uZWV0by10ZW1wbGF0ZSB7XG4gICZfX2hlYWRlciB7XG4gICAgbWluLWhlaWdodDogJG5lZXRvLXRlbXBsYXRlLWhlYWRlci1taW4taGVpZ2h0O1xuICAgIGZsZXgtZ3JvdzogMTtcbiAgfVxuXG4gICZfX2ltYWdlIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBhc3BlY3QtcmF0aW86IDE2IC8gOTtcbiAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgbWF4LWhlaWdodDogMTAwJTtcbiAgfVxuICAmX19kZXNjcmlwdGlvbiB7XG4gICAgbWluLWhlaWdodDogJG5lZXRvLXRlbXBsYXRlLWRlc2NyaXB0aW9uLW1pbi1oZWlnaHQ7XG4gIH1cbn1cbiIsIi5uZWV0by10ZW1wbGF0ZS1saXN0IC5uZWV0by11aS1tb2RhbF9fY2xvc2Uge1xuICB6LWluZGV4OiAxO1xufVxuXG4ubmVldG8tdGVtcGxhdGVfX2hlYWRlciB7XG4gIG1pbi1oZWlnaHQ6IDEyMHB4O1xuICBmbGV4LWdyb3c6IDE7XG59XG4ubmVldG8tdGVtcGxhdGVfX2ltYWdlIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGFzcGVjdC1yYXRpbzogMTYvOTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgbWF4LWhlaWdodDogMTAwJTtcbn1cbi5uZWV0by10ZW1wbGF0ZV9fZGVzY3JpcHRpb24ge1xuICBtaW4taGVpZ2h0OiA1NHB4O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLXNoYXJlLXByZXZpZXcge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTA0cHgpO1xuICBib3JkZXI6IHRoaW4gc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMzAwKSk7XG4gIGJveC1zaGFkb3c6IHZhcigtLW5lZXRvLXVpLXNoYWRvdy1tKTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG59IiwiLm5lZXRvLXRlbXBsYXRlcy1zaGFyZS1wcmV2aWV3IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEwNHB4KTtcbiAgYm9yZGVyOiB0aGluIHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTMwMCkpO1xuICBib3gtc2hhZG93OiB2YXIoLS1uZWV0by11aS1zaGFkb3ctbSk7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xufVxuIl19 */";
+var css = ".neeto-template-list .neeto-ui-modal__close{z-index:1}.neeto-template__header{flex-grow:1;min-height:120px}.neeto-template__image{aspect-ratio:16/9;max-height:100%;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}.neeto-template__description{min-height:54px}.neeto-template-thumbnail .neeto-template__image{transition:transform .5s ease}.neeto-template-thumbnail .neeto-template-thumbnail__title{transition:color .5s ease}.neeto-template-thumbnail:hover .neeto-template__image{transform:scale(1.08)}.neeto-template-thumbnail:hover .neeto-template-thumbnail__title{color:rgb(var(--neeto-ui-black))!important}.neeto-templates-full-page-preview__holder{transition:all .2s ease-in-out}.neeto-templates-full-page-preview__holder--desktop{height:100%;max-width:100%;width:100%}.neeto-templates-full-page-preview__holder--tablet{height:1024px;margin-top:16px!important;max-height:calc(100% - 32px);max-width:768px}.neeto-templates-full-page-preview__holder--tablet .neeto-templates-full-page-preview__iframe{border:1px solid rgb(var(--neeto-ui-gray-300))!important}.neeto-templates-full-page-preview__holder--mobile{height:896px;margin-top:16px!important;max-height:calc(100% - 32px);max-width:384px}.neeto-templates-full-page-preview__holder--mobile .neeto-templates-full-page-preview__iframe{border:1px solid rgb(var(--neeto-ui-gray-300))!important}.neeto-templates-share-preview{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-gray-300));box-shadow:var(--neeto-ui-shadow-m);display:flex;flex-direction:column;height:calc(100vh - 104px);width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL3RlbXBsYXRlcy9fdGVtcGxhdGUtbGlzdC5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL3RlbXBsYXRlcy9fc2hhcmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSw0Q0FDRSxTQ0FKLENES0Usd0JBRUUsV0FBQSxDQURBLGdCQ0RKLENES0UsdUJBRUUsaUJBQUEsQ0FHQSxlQUFBLENBREEsY0FBQSxDQURBLG1CQUFBLENBQUEsZ0JBQUEsQ0FGQSxVQ0NKLENES0UsNkJBQ0UsZUNISixDRFFFLGlEQUNFLDZCQ0xKLENET0UsMkRBQ0UseUJDTEosQ0RRSSx1REFDRSxxQkNOTixDRFFJLGlFQUNFLDBDQ05OLENEV0EsMkNBQ0UsOEJDUkYsQ0RXQSxvREFFRSxXQUFBLENBQ0EsY0FBQSxDQUZBLFVDTkYsQ0RXQSxtREFFRSxhQUFBLENBRUEseUJBQUEsQ0FEQSw0QkFBQSxDQUZBLGVDTEYsQ0RVRSw4RkFDRSx3RENSSixDRFlBLG1EQUVFLFlBQUEsQ0FFQSx5QkFBQSxDQURBLDRCQUFBLENBRkEsZUNORixDRFdFLDhGQUNFLHdEQ1RKLENDNURBLCtCQU9FLDJDQUFBLENBSkEsK0NBQUEsQ0FDQSxtQ0FBQSxDQUNBLFlBQUEsQ0FDQSxxQkFBQSxDQUpBLDBCQUFBLENBREEsVURxRUYiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tdGVtcGxhdGUtbGlzdCB7XG4gIC5uZWV0by11aS1tb2RhbF9fY2xvc2Uge1xuICAgIHotaW5kZXg6IDE7XG4gIH1cbn1cblxuLm5lZXRvLXRlbXBsYXRlIHtcbiAgJl9faGVhZGVyIHtcbiAgICBtaW4taGVpZ2h0OiAkbmVldG8tdGVtcGxhdGUtaGVhZGVyLW1pbi1oZWlnaHQ7XG4gICAgZmxleC1ncm93OiAxO1xuICB9XG5cbiAgJl9faW1hZ2Uge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGFzcGVjdC1yYXRpbzogMTYgLyA5O1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgICBtYXgtaGVpZ2h0OiAxMDAlO1xuICB9XG4gICZfX2Rlc2NyaXB0aW9uIHtcbiAgICBtaW4taGVpZ2h0OiAkbmVldG8tdGVtcGxhdGUtZGVzY3JpcHRpb24tbWluLWhlaWdodDtcbiAgfVxufVxuXG4ubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsIHtcbiAgLm5lZXRvLXRlbXBsYXRlX19pbWFnZSB7XG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuNXMgZWFzZTtcbiAgfVxuICAubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsX190aXRsZSB7XG4gICAgdHJhbnNpdGlvbjogY29sb3IgMC41cyBlYXNlO1xuICB9XG4gICY6aG92ZXIge1xuICAgIC5uZWV0by10ZW1wbGF0ZV9faW1hZ2Uge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjA4KTtcbiAgICB9XG4gICAgLm5lZXRvLXRlbXBsYXRlLXRodW1ibmFpbF9fdGl0bGUge1xuICAgICAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ibGFjaykpICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlciB7XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2UtaW4tb3V0O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLWRlc2t0b3Age1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlci0tdGFibGV0IHtcbiAgbWF4LXdpZHRoOiA3NjhweDtcbiAgaGVpZ2h0OiAxMDI0cHg7XG4gIG1heC1oZWlnaHQ6IGNhbGMoMTAwJSAtIDMycHgpO1xuICBtYXJnaW4tdG9wOiAxNnB4ICFpbXBvcnRhbnQ7XG5cbiAgLm5lZXRvLXRlbXBsYXRlcy1mdWxsLXBhZ2UtcHJldmlld19faWZyYW1lIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKSAhaW1wb3J0YW50O1xuICB9XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlci0tbW9iaWxlIHtcbiAgbWF4LXdpZHRoOiAzODRweDtcbiAgaGVpZ2h0OiA4OTZweDtcbiAgbWF4LWhlaWdodDogY2FsYygxMDAlIC0gMzJweCk7XG4gIG1hcmdpbi10b3A6IDE2cHggIWltcG9ydGFudDtcblxuICAubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19pZnJhbWUge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTMwMCkpICFpbXBvcnRhbnQ7XG4gIH1cbn1cbiIsIi5uZWV0by10ZW1wbGF0ZS1saXN0IC5uZWV0by11aS1tb2RhbF9fY2xvc2Uge1xuICB6LWluZGV4OiAxO1xufVxuXG4ubmVldG8tdGVtcGxhdGVfX2hlYWRlciB7XG4gIG1pbi1oZWlnaHQ6IDEyMHB4O1xuICBmbGV4LWdyb3c6IDE7XG59XG4ubmVldG8tdGVtcGxhdGVfX2ltYWdlIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGFzcGVjdC1yYXRpbzogMTYvOTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgbWF4LWhlaWdodDogMTAwJTtcbn1cbi5uZWV0by10ZW1wbGF0ZV9fZGVzY3JpcHRpb24ge1xuICBtaW4taGVpZ2h0OiA1NHB4O1xufVxuXG4ubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsIC5uZWV0by10ZW1wbGF0ZV9faW1hZ2Uge1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC41cyBlYXNlO1xufVxuLm5lZXRvLXRlbXBsYXRlLXRodW1ibmFpbCAubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsX190aXRsZSB7XG4gIHRyYW5zaXRpb246IGNvbG9yIDAuNXMgZWFzZTtcbn1cbi5uZWV0by10ZW1wbGF0ZS10aHVtYm5haWw6aG92ZXIgLm5lZXRvLXRlbXBsYXRlX19pbWFnZSB7XG4gIHRyYW5zZm9ybTogc2NhbGUoMS4wOCk7XG59XG4ubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsOmhvdmVyIC5uZWV0by10ZW1wbGF0ZS10aHVtYm5haWxfX3RpdGxlIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ibGFjaykpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlciB7XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2UtaW4tb3V0O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLWRlc2t0b3Age1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlci0tdGFibGV0IHtcbiAgbWF4LXdpZHRoOiA3NjhweDtcbiAgaGVpZ2h0OiAxMDI0cHg7XG4gIG1heC1oZWlnaHQ6IGNhbGMoMTAwJSAtIDMycHgpO1xuICBtYXJnaW4tdG9wOiAxNnB4ICFpbXBvcnRhbnQ7XG59XG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLXRhYmxldCAubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19pZnJhbWUge1xuICBib3JkZXI6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLW1vYmlsZSB7XG4gIG1heC13aWR0aDogMzg0cHg7XG4gIGhlaWdodDogODk2cHg7XG4gIG1heC1oZWlnaHQ6IGNhbGMoMTAwJSAtIDMycHgpO1xuICBtYXJnaW4tdG9wOiAxNnB4ICFpbXBvcnRhbnQ7XG59XG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLW1vYmlsZSAubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19pZnJhbWUge1xuICBib3JkZXI6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLXNoYXJlLXByZXZpZXcge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTA0cHgpO1xuICBib3JkZXI6IHRoaW4gc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMzAwKSk7XG4gIGJveC1zaGFkb3c6IHZhcigtLW5lZXRvLXVpLXNoYWRvdy1tKTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG59IiwiLm5lZXRvLXRlbXBsYXRlcy1zaGFyZS1wcmV2aWV3IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEwNHB4KTtcbiAgYm9yZGVyOiB0aGluIHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTMwMCkpO1xuICBib3gtc2hhZG93OiB2YXIoLS1uZWV0by11aS1zaGFkb3ctbSk7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xufVxuIl19 */";
 n(css,{});
 
 exports.CreateTemplateModal = CreateTemplateModal;
 exports.TemplateSettings = TemplateSettings;
+exports.TemplateTags = TemplateTags;
 //# sourceMappingURL=index.cjs.js.map