@bigbinary/neeto-themes-frontend 2.1.1 → 2.2.0

package/dist/NeetoThemesBuilder.js

@@ -0,0 +1,1776 @@
+import { shallow } from 'zustand/shallow';
+import { createElement, useEffect, useState, useRef, memo, useCallback } from 'react';
+import { t as t$1 } from 'i18next';
+import { isPresent, isNot, filterBy, snakeToCamelCase, findBy, isNotPresent, hyphenate, findIndexBy, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { useMutationWithInvalidation, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { B as BASE_URL, g as getDominantColorFromUrl, i as isFunction, a as scrollElementIntoView } from './index-9e15a8b1.js';
+import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils } from './useThemeUtils-36f2ce5a.js';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import Alert from '@bigbinary/neetoui/Alert';
+import { useTranslation, Trans } from 'react-i18next';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import Close from '@bigbinary/neeto-icons/Close';
+import Button from '@bigbinary/neetoui/Button';
+import Popover from '@bigbinary/neetoui/Popover';
+import Typography from '@bigbinary/neetoui/Typography';
+import Form from '@bigbinary/neetoui/formik/Form';
+import * as yup from 'yup';
+import { useFormikContext, Field } from 'formik';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
+import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
+import Toastr from '@bigbinary/neetoui/Toastr';
+import { isEmpty, negate } from 'ramda';
+import Select from '@bigbinary/neetoui/Select';
+import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
+import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
+import ColorPicker from '@bigbinary/neetoui/ColorPicker';
+import { Slider } from 'antd';
+import classnames from 'classnames';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
+import Switch from '@bigbinary/neetoui/Switch';
+import Input from '@bigbinary/neetoui/formik/Input';
+import Search from '@bigbinary/neeto-molecules/Search';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
+import Plus from '@bigbinary/neeto-icons/Plus';
+import 'zustand';
+
+var show$1 = function show(entityId) {
+  return axios.get("".concat(BASE_URL, "/api/v1/entities/").concat(entityId));
+};
+var entitiesApi = {
+  show: show$1
+};
+
+var useShowThemeEntity = function useShowThemeEntity(entityId) {
+  return useQuery({
+    queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
+    queryFn: function queryFn() {
+      return entitiesApi.show(entityId);
+    },
+    enabled: !!entityId
+  });
+};
+
+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-themes__wrapper{display:flex;width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));height:calc(100vh - 64px);width:240px}@media (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:280px}}@media (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px}}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{height:calc(100vh - 120px);overflow-y:auto}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-themes__wrapper .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 64px);position:relative}.neeto-themes-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-600))!important;outline:1px solid rgb(var(--neeto-ui-gray-600))!important}.neeto-themes-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:2px solid rgb(var(--neeto-ui-primary-500))!important}.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-gray-400))!important;outline:2px solid rgb(var(--neeto-ui-gray-400))!important}.neeto-themes-theme-thumbnail__apply-btn{--neeto-ui-btn-padding-x:12px;--neeto-ui-btn-border-radius:100px}.neeto-themes-theme-thumbnail__apply-btn:disabled,.neeto-themes-theme-thumbnail__apply-btn[disabled]{opacity:1!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvdGhlbWVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsdUJBRUUsWUFBQSxDQURBLFVBQUYsQ0FHRSw2Q0FHRSwyQ0FBQSxDQURBLHlCQUFBLENBREEsV0FDSixDQUdJLDBCQUxGLDZDQU1JLFdBQUosQ0FDRixDQUNJLDBCQVJGLDZDQVNJLFdBRUosQ0FDRixDQUFJLDJFQUVFLGtCQUFBLENBREEsZ0JBR04sQ0FDSSwyRUFDRSwwQkFBQSxDQUNBLGVBQ04sQ0FFUSw0SUFDRSxZQUFWLENBTUUsc0RBR0UsV0FBQSxDQURBLHlCQUFBLENBREEsaUJBRkosQ0FRQSw4Q0FDRSxvREFBQSxDQUNBLHlEQUxGLENBUUEsc0NBQ0UsdURBQUEsQ0FDQSw0REFMRixDQVFBLGdEQUNFLG9EQUFBLENBQ0EseURBTEYsQ0FRQSx5Q0FDRSw2QkFBQSxDQUNBLGtDQUxGLENBTUUscUdBRUUsbUJBTEoiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0IFwiLi4vYWJzdHJhY3RzL3ZhcmlhYmxlc1wiO1xuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLXdpZHRoLXNtO1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtICN7JGJ1aWxkZXItaGVhZGVyLWhlaWdodH0pO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xuXG4gICAgQHNjcmVlbiBsZyB7XG4gICAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLXdpZHRoLWxnO1xuICAgIH1cbiAgICBAc2NyZWVuIHhsIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgteGw7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19oZWFkZXIge1xuICAgICAgcGFkZGluZy10b3A6IDE2cHg7XG4gICAgICBwYWRkaW5nLWJvdHRvbTogOHB4O1xuICAgIH1cblxuICAgIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fc2Nyb2xsIHtcbiAgICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDEyMHB4KTtcbiAgICAgIG92ZXJmbG93LXk6IGF1dG87XG5cbiAgICAgIC5uZWV0by11aS1jb2xvcnBpY2tlcl9fdGFyZ2V0IHtcbiAgICAgICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyLXRhcmdldF9fY29kZSB7XG4gICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC5uZWV0by10aGVtZXMtcHJldmlld19fd3JhcHBlciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtICN7JGJ1aWxkZXItaGVhZGVyLWhlaWdodH0pO1xuICAgIGZsZXgtZ3JvdzogMTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWhpZ2hsaWdodC1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS00MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fYXBwbHktYnRuIHtcbiAgLS1uZWV0by11aS1idG4tcGFkZGluZy14OiAxMnB4O1xuICAtLW5lZXRvLXVpLWJ0bi1ib3JkZXItcmFkaXVzOiAxMDBweDtcbiAgJjpkaXNhYmxlZCxcbiAgJltkaXNhYmxlZF0ge1xuICAgIG9wYWNpdHk6IDEgIWltcG9ydGFudDtcbiAgfVxufVxuIl19 */";
+n(css,{});
+
+var _excluded$1 = ["themeId"];
+var list = function list(entityId) {
+  return axios.get("".concat(BASE_URL, "/api/v1/themes"), {
+    params: {
+      entity_id: entityId
+    }
+  });
+};
+var show = function show(id) {
+  return axios.get("".concat(BASE_URL, "/api/v1/themes/").concat(id));
+};
+var create = function create(payload) {
+  return axios.post("".concat(BASE_URL, "/api/v1/themes"), {
+    theme: payload
+  });
+};
+var update = function update(_ref) {
+  var id = _ref.id,
+    payload = _ref.payload;
+  return axios.put("".concat(BASE_URL, "/api/v1/themes/").concat(id), {
+    theme: payload
+  });
+};
+var destroy = function destroy(id) {
+  return axios["delete"]("".concat(BASE_URL, "/api/v1/themes/").concat(id));
+};
+var clone = function clone(id) {
+  return axios.post("".concat(BASE_URL, "/api/v1/themes/").concat(id, "/clone"));
+};
+var apply = function apply(_ref2) {
+  var themeId = _ref2.themeId,
+    payload = _objectWithoutProperties(_ref2, _excluded$1);
+  return axios.post("".concat(BASE_URL, "/api/v1/themes/").concat(themeId, "/apply"), {
+    entity: payload
+  });
+};
+var themesApi = {
+  list: list,
+  show: show,
+  create: create,
+  update: update,
+  destroy: destroy,
+  clone: clone,
+  apply: apply
+};
+
+var useListThemes = function useListThemes(entityId) {
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        isTemplateThemesEnabled: store["isTemplateThemesEnabled"]
+      };
+    }, shallow),
+    isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
+  var queryKey = isTemplateThemesEnabled ? [QUERY_KEYS.THEMES_LIST, entityId] : [QUERY_KEYS.THEMES_LIST];
+  return useQuery({
+    queryKey: queryKey,
+    queryFn: function queryFn() {
+      return themesApi.list(entityId);
+    }
+  });
+};
+var useCreateTheme = function useCreateTheme() {
+  return useMutationWithInvalidation(themesApi.create, {
+    keysToInvalidate: [QUERY_KEYS.THEMES_LIST]
+  });
+};
+var useUpdateTheme = function useUpdateTheme(themeId) {
+  return useMutationWithInvalidation(function (payload) {
+    return themesApi.update({
+      id: themeId,
+      payload: payload
+    });
+  }, {
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.THEME_DETAILS, themeId]]
+  });
+};
+var useDeleteTheme = function useDeleteTheme() {
+  return useMutationWithInvalidation(themesApi.destroy, {
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]]
+  });
+};
+var useCloneTheme = function useCloneTheme() {
+  return useMutationWithInvalidation(themesApi.clone, {
+    keysToInvalidate: [QUERY_KEYS.THEMES_LIST]
+  });
+};
+var useApplyTheme = function useApplyTheme(_ref) {
+  var onSuccess = _ref.onSuccess;
+  return useMutationWithInvalidation(themesApi.apply, {
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]],
+    onSuccess: onSuccess
+  });
+};
+
+var POSITION_OPTIONS = [{
+  label: "Left",
+  value: "left"
+}, {
+  label: "Right",
+  value: "right"
+}];
+var FONT_OPTIONS = [{
+  label: "System UI",
+  value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+}, {
+  label: "Cedarville Cursive",
+  value: "'Cedarville Cursive', cursive"
+}, {
+  label: "Poppins",
+  value: "Poppins, sans-serif"
+}, {
+  label: "Roboto",
+  value: "Roboto, sans-serif"
+}, {
+  label: "Open Sans",
+  value: "Open Sans, sans-serif"
+}, {
+  label: "Montserrat",
+  value: "Montserrat, sans-serif"
+}, {
+  label: "Raleway",
+  value: "Raleway, sans-serif"
+}, {
+  label: "Quicksand",
+  value: "Quicksand, sans-serif"
+}, {
+  label: "Inter",
+  value: "Inter, sans-serif"
+}, {
+  label: "Satoshi",
+  value: "Satoshi, sans-serif"
+}, {
+  label: "Chillax",
+  value: "Chillax, sans-serif"
+}, {
+  label: "Clash Display",
+  value: "Clash Display, sans-serif"
+}, {
+  label: "General Sans",
+  value: "General Sans, sans-serif"
+}, {
+  label: "Cabinet Grotesk",
+  value: "Cabinet Grotesk, sans-serif"
+}, {
+  label: "Lora",
+  value: "Lora, serif"
+}, {
+  label: "Merriweather",
+  value: "Merriweather, serif"
+}, {
+  label: "Boska",
+  value: "Boska, serif"
+}, {
+  label: "Playfair Display",
+  value: "Playfair Display, serif"
+}, {
+  label: "Roboto Slab",
+  value: "Roboto Slab, serif"
+}, {
+  label: "Dancing Script",
+  value: "Dancing Script, cursive"
+}];
+var THEME_VALIDATION_SCHEMA = yup.object().shape({
+  name: yup.string().required("Name is required")
+});
+var OVERLAY_OPACITY_SLIDER_MARKS = {
+  0: " "
+};
+var HUNDRED = 100;
+
+var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
+  if (isPresent(theme)) return theme;
+  return {
+    name: t$1("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
+    properties: themePropertiesSchema.map(function (_ref) {
+      var key = _ref.key,
+        kind = _ref.kind,
+        defaultValue = _ref.defaultValue;
+      switch (kind) {
+        case "color":
+          return {
+            value: defaultValue,
+            kind: "color",
+            key: key
+          };
+        case "font_family":
+          return {
+            value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+            kind: "font_family",
+            key: key
+          };
+        case "overlay_opacity":
+          return {
+            value: 0,
+            kind: "overlay_opacity",
+            key: key
+          };
+        case "slider":
+          return {
+            value: 0,
+            kind: "slider",
+            key: key
+          };
+        case "radius":
+          return {
+            value: defaultValue,
+            kind: "radius",
+            key: key
+          };
+        case "boolean":
+          return {
+            value: String(defaultValue),
+            kind: "boolean",
+            key: key
+          };
+        case "position_selector":
+          return {
+            value: defaultValue,
+            kind: "position_selector",
+            key: key
+          };
+        case "alignment_block":
+          return {
+            value: defaultValue,
+            kind: "alignment_block",
+            key: key
+          };
+        default:
+          return null;
+      }
+    }).filter(isNot(null))
+  };
+};
+var buildImageData = function buildImageData(values, themePropertiesSchema) {
+  return filterBy({
+    kind: "image"
+  }, themePropertiesSchema).reduce(function (acc, item) {
+    var _values$snakeToCamelC;
+    var signedId = (_values$snakeToCamelC = values[snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
+    acc[item.key] = signedId;
+    return acc;
+  }, {});
+};
+var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
+  var property = findBy({
+    key: key
+  }, themePropertiesSchema);
+  if (isNotPresent(property)) return false;
+  if (property !== null && property !== void 0 && property.hidden) return false;
+  var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
+  if (isNotPresent(conditionalKey)) return true;
+  var dependentPropertySchema = findBy({
+    key: conditionalKey
+  }, themePropertiesSchema);
+  var dependentProperty = findBy({
+    key: conditionalKey
+  }, formikValues.properties);
+  if (dependentPropertySchema.kind === "image") {
+    var _formikValues$snakeTo;
+    return isPresent((_formikValues$snakeTo = formikValues[snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
+  } else if (dependentPropertySchema.kind === "boolean") {
+    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
+  }
+  return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
+};
+var buildLabel = function buildLabel(key, kind) {
+  return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
+};
+
+var Card$2 = function Card(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    children = _ref.children;
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white space-y-3 border p-4",
+    "data-cy": "theme-".concat(hyphenate(title), "-properties"),
+    children: [title && /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-between",
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "theme-properties",
+        lineHeight: "normal",
+        style: "h4",
+        weight: "semibold",
+        children: title
+      })
+    }), children && /*#__PURE__*/jsx("div", {
+      className: "space-y-4",
+      children: children
+    })]
+  });
+};
+
+var SelectBlock = function SelectBlock(_ref) {
+  var label = _ref.label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
+    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "logo-field-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsx(Select, {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value
+      })
+    })]
+  });
+};
+
+var DESIGN_SCREENS = {
+  THEMES: "Themes",
+  Customize: "Customize"
+};
+var ONE_MEGABYTE = 1;
+
+var ImageBlock = function ImageBlock(_ref) {
+  var _findBy;
+  var label = _ref.label,
+    name = _ref.name,
+    _ref$imageData = _ref.imageData,
+    imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
+    _ref$uploadConfig = _ref.uploadConfig,
+    uploadConfig = _ref$uploadConfig === void 0 ? {
+      maxImageSize: ONE_MEGABYTE
+    } : _ref$uploadConfig,
+    attribute = _ref.attribute;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var propertySchema = findBy({
+    key: attribute
+  }, themePropertiesSchema);
+  var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
+  var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
+  var positionKeyInSchema = findBy({
+    key: "".concat(name, "_position")
+  }, themePropertiesSchema);
+  var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && isPresent(positionKeyInSchema);
+  var positionKeyIndex = findIndexBy({
+    key: "".concat(name, "_position")
+  }, values.properties);
+  var handleImageChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
+      var dominantColor;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            if (!(isEmpty(image.signedId) || isEmpty(image.url))) {
+              _context.next = 4;
+              break;
+            }
+            setFieldValue(name, {
+              signedId: null,
+              url: image.url
+            });
+            return _context.abrupt("return");
+          case 4:
+            _context.next = 6;
+            return getDominantColorFromUrl(image.url);
+          case 6:
+            dominantColor = _context.sent;
+            setFieldValue(name, {
+              signedId: image.signedId,
+              url: image.url,
+              dominantColor: dominantColor
+            });
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](0);
+            Toastr.error(_context.t0);
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+    return function handleImageChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-3 py-3 first:pt-0 last:pb-0",
+    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    children: [label && /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-between",
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "style-fields-labels",
+        style: "body2",
+        children: label
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "space-y-3 divide-y divide-gray-200",
+      children: [/*#__PURE__*/createElement(ImageUploader, {
+        uploadConfig: uploadConfig,
+        className: "h-40 w-full",
+        key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
+        src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
+        onUploadComplete: handleImageChange
+      }), isPositionChangerVisible && /*#__PURE__*/jsx(SelectBlock, {
+        label: buildLabel("".concat(name, "Position"), "image"),
+        options: options || POSITION_OPTIONS,
+        placeholder: t("neetoThemes.common.left"),
+        value: toLabelAndValue(((_findBy = findBy({
+          key: "".concat(name, "_position")
+        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
+        onChange: function onChange(option) {
+          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
+        }
+      })]
+    })]
+  });
+};
+
+var Images = function Images(_ref) {
+  var attribute = _ref.attribute;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values;
+  var key = snakeToCamelCase(attribute);
+  var title = buildLabel(key, "image");
+  var imageData = values[key];
+  return /*#__PURE__*/jsx(Card$2, {
+    title: title,
+    children: /*#__PURE__*/jsx("div", {
+      className: "divide-y divide-gray-200",
+      children: /*#__PURE__*/jsx(ImageBlock, {
+        attribute: attribute,
+        imageData: imageData,
+        name: key
+      })
+    })
+  });
+};
+
+var AlignmentBlock = function AlignmentBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0",
+    "data-cy": joinHyphenCase(label),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx(Field, {
+      name: name,
+      children: function children(_ref2) {
+        var value = _ref2.field.value,
+          setFieldValue = _ref2.form.setFieldValue;
+        return /*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-3",
+          children: [/*#__PURE__*/jsx(Button, {
+            "data-cy": "alignment-left",
+            icon: LeftAlign,
+            size: "large",
+            style: value === "left" ? "primary" : "text",
+            tooltipProps: {
+              content: "Left align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "left");
+            }
+          }), /*#__PURE__*/jsx(Button, {
+            "data-cy": "alignment-center",
+            icon: CenterAlign,
+            size: "large",
+            style: value === "center" ? "primary" : "text",
+            tooltipProps: {
+              content: "Center align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "center");
+            }
+          })]
+        });
+      }
+    })]
+  });
+};
+
+var ColorBlock = function ColorBlock(_ref) {
+  var label = _ref.label,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#FFFFFF" : _ref$color,
+    onChange = _ref.onChange,
+    showTransparencyControl = _ref.showTransparencyControl;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
+    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx(ColorPicker, {
+      color: color,
+      onChange: onChange,
+      showTransparencyControl: showTransparencyControl,
+      showEyeDropper: true
+    })]
+  });
+};
+
+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 FontPickerBlock = function FontPickerBlock(_ref) {
+  var label = _ref.label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
+    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsx(Select, {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value,
+        menuPosition: "fixed",
+        styles: {
+          option: function option(styles, _ref2) {
+            var data = _ref2.data;
+            return _objectSpread$3(_objectSpread$3({}, styles), {}, {
+              fontFamily: data.value
+            });
+          }
+        }
+      })
+    })]
+  });
+};
+
+var SliderBlock = function SliderBlock(_ref) {
+  var label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    min = _ref.min,
+    max = _ref.max,
+    marks = _ref.marks;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0",
+    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx(Slider, {
+      marks: marks,
+      max: max,
+      min: min,
+      onChange: onChange,
+      value: value,
+      className: "my-2 w-20",
+      tooltip: {
+        formatter: null
+      }
+    })]
+  });
+};
+
+var _excluded = ["label", "name"];
+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 SwitchBlock = function SwitchBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    switchProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
+  var doesHelpTextExist = i18n.exists(translationKey);
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "inline-flex items-center gap-4",
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-cy": "style-fields-labels",
+        style: "body2",
+        className: classnames({
+          "w-32": doesHelpTextExist,
+          "w-auto": !doesHelpTextExist
+        }),
+        children: label
+      }), doesHelpTextExist && /*#__PURE__*/jsx(HelpPopover, {
+        className: "flex-shrink-0",
+        description: t(translationKey)
+      })]
+    }), /*#__PURE__*/jsx(Switch, _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
+      name: name
+    }, switchProps)), {}, {
+      "data-cy": "enable-background-color-toggle"
+    }))]
+  });
+};
+
+var Properties = function Properties(_ref) {
+  var onPropertiesChange = _ref.onPropertiesChange;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var _useThemeUtils = useThemeUtils(),
+    setVariable = _useThemeUtils.setVariable,
+    setTheme = _useThemeUtils.setTheme;
+  var handleColorChange = function handleColorChange(name) {
+    return function (_ref2) {
+      var hex = _ref2.hex,
+        rgb = _ref2.rgb;
+      handleChange(name, hex, "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a));
+    };
+  };
+  var handleChange = function handleChange(name, value, variableValue) {
+    var index = findIndexBy({
+      key: name
+    }, values.properties);
+    if (index !== -1 && values.properties[index].value !== value) {
+      setFieldValue("properties[".concat(index, "].value"), value);
+    }
+    setVariable(snakeToCamelCase(name), variableValue !== null && variableValue !== void 0 ? variableValue : value);
+  };
+  var handleOverlayChange = function handleOverlayChange(key, value) {
+    var index = findIndexBy({
+      key: key
+    }, values.properties);
+    var overlayColorVariable = "".concat(key, "_overlay_color");
+    setFieldValue("properties[".concat(index, "].value"), value);
+    setVariable("".concat(key, "_overlay_opacity"), Math.abs(value / 100));
+    if (value < 0) {
+      handleChange(overlayColorVariable, "#000000", "0, 0, 0");
+    } else {
+      handleChange(overlayColorVariable, "#ffffff", "255, 255, 255");
+    }
+  };
+  useEffect(function () {
+    onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
+    setTheme(values);
+    setThemeState({
+      previewingTheme: values
+    });
+  }, [values]);
+  return /*#__PURE__*/jsx(Card$2, {
+    title: t("neetoThemes.common.style"),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "divide-y divide-gray-200",
+      children: [filterBy({
+        kind: "font_family"
+      }, values.properties).map(function (_ref3) {
+        var key = _ref3.key,
+          value = _ref3.value,
+          kind = _ref3.kind;
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(FontPickerBlock, {
+          label: buildLabel(key, kind),
+          options: FONT_OPTIONS,
+          value: findBy({
+            value: value || null
+          }, FONT_OPTIONS),
+          onChange: function onChange(_ref4) {
+            var value = _ref4.value;
+            handleChange(key, value);
+          }
+        }, key);
+      }), filterBy({
+        kind: "color"
+      }, values.properties).map(function (_ref5) {
+        var _findBy;
+        var key = _ref5.key,
+          value = _ref5.value,
+          kind = _ref5.kind;
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(ColorBlock, {
+          color: value,
+          label: buildLabel(key, kind),
+          showTransparencyControl: ((_findBy = findBy({
+            key: key
+          }, themePropertiesSchema)) === null || _findBy === void 0 ? void 0 : _findBy.showTransparencyControl) || false,
+          onChange: handleColorChange(key)
+        }, key);
+      }), filterBy({
+        kind: "radius"
+      }, values.properties).map(function (_ref6) {
+        var key = _ref6.key,
+          value = _ref6.value,
+          kind = _ref6.kind;
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
+          label: buildLabel(key, kind),
+          max: 50,
+          min: 0,
+          value: Number(value) || 0,
+          onChange: function onChange(radius) {
+            return handleChange(key, radius, "".concat(radius, "px"));
+          }
+        }, key);
+      }), filterBy({
+        kind: "overlay_opacity"
+      }, values.properties).map(function (_ref7) {
+        var key = _ref7.key,
+          value = _ref7.value,
+          kind = _ref7.kind;
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
+          label: buildLabel(key, kind),
+          marks: OVERLAY_OPACITY_SLIDER_MARKS,
+          max: HUNDRED,
+          min: negate(HUNDRED),
+          value: Number(value) || 0,
+          onChange: function onChange(opacity) {
+            return handleOverlayChange(key, opacity);
+          }
+        }, key);
+      }), filterBy({
+        kind: "position_selector"
+      }, values.properties).map(function (_ref8) {
+        var _findBy2;
+        var key = _ref8.key,
+          kind = _ref8.kind,
+          value = _ref8.value;
+        var index = findIndexBy({
+          key: key
+        }, values.properties);
+        var options = (_findBy2 = findBy({
+          key: key
+        }, themePropertiesSchema)) === null || _findBy2 === void 0 || (_findBy2 = _findBy2.options) === null || _findBy2 === void 0 ? void 0 : _findBy2.map(toLabelAndValue);
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SelectBlock, {
+          label: buildLabel(key, kind),
+          options: options || POSITION_OPTIONS,
+          placeholder: "left",
+          value: toLabelAndValue(value),
+          onChange: function onChange(option) {
+            return setFieldValue("properties[".concat(index, "].value"), option.value);
+          }
+        }, key);
+      }), filterBy({
+        kind: "boolean"
+      }, values.properties).map(function (_ref9) {
+        var key = _ref9.key,
+          kind = _ref9.kind,
+          value = _ref9.value;
+        var index = findIndexBy({
+          key: key
+        }, values.properties);
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SwitchBlock, {
+          checked: value !== "false",
+          label: buildLabel(key, kind),
+          name: snakeToCamelCase(key),
+          onChange: function onChange(e) {
+            return setFieldValue("properties[".concat(index, "].value"), String(e.target.checked));
+          }
+        }, key);
+      }), filterBy({
+        kind: "alignment_block"
+      }, values.properties).map(function (_ref10) {
+        var key = _ref10.key,
+          kind = _ref10.kind;
+        var index = findIndexBy({
+          key: key
+        }, values.properties);
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(AlignmentBlock, {
+          label: buildLabel(key, kind),
+          name: "properties[".concat(index, "].value")
+        });
+      })]
+    })
+  });
+};
+
+var ThemeMeta = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/jsx(Card$2, {
+    title: t("neetoThemes.common.name"),
+    children: /*#__PURE__*/jsx(Input, {
+      autoFocus: true,
+      "data-cy": "theme-name-property",
+      name: "name"
+    })
+  });
+});
+
+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 Customize = function Customize(_ref) {
+  var themeId = _ref.themeId,
+    theme = _ref.theme,
+    onCreateTheme = _ref.onCreateTheme,
+    onApplyTheme = _ref.onApplyTheme,
+    isApplyingTheme = _ref.isApplyingTheme,
+    onPropertiesChange = _ref.onPropertiesChange,
+    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverInstance = _useState2[0],
+    setPopoverInstance = _useState2[1];
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"],
+        entityType: store["entityType"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    entityType = _useConfigStore.entityType;
+  var _useThemeUtils = useThemeUtils(),
+    currentTheme = _useThemeUtils.currentTheme;
+  var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+  var submitBtnRef = useRef(null);
+  var _useCreateTheme = useCreateTheme(),
+    createTheme = _useCreateTheme.mutate,
+    isCreating = _useCreateTheme.isPending;
+  var _useUpdateTheme = useUpdateTheme(themeId),
+    updateTheme = _useUpdateTheme.mutate,
+    isUpdating = _useUpdateTheme.isPending;
+  var isSubmitting = isCreating || isUpdating;
+  var onSubmit = function onSubmit(values, _ref2) {
+    var resetForm = _ref2.resetForm;
+    var imageData = buildImageData(values, themePropertiesSchema);
+    var themeToSave = _objectSpread$1({
+      propertiesAttributes: values.properties,
+      name: values.name
+    }, imageData);
+    if (!themeId) {
+      return createTheme(themeToSave, {
+        onSuccess: function onSuccess(_ref3) {
+          var theme = _ref3.theme;
+          resetForm({
+            values: theme
+          });
+          onCreateTheme(theme);
+        }
+      });
+    }
+    return updateTheme(themeToSave, {
+      onSuccess: function onSuccess() {
+        resetForm({
+          values: values
+        });
+        onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 || onUpdateThemeSuccess(values);
+      }
+    });
+  };
+  return /*#__PURE__*/jsx(Form, {
+    formikProps: {
+      initialValues: buildInitialValues(theme, themePropertiesSchema),
+      validationSchema: THEME_VALIDATION_SCHEMA,
+      onSubmit: onSubmit
+    },
+    children: function children(_ref4) {
+      var dirty = _ref4.dirty;
+      return /*#__PURE__*/jsxs("div", {
+        className: "neeto-themes-sidebar__scroll",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-6 p-4",
+          children: [/*#__PURE__*/jsx(ThemeMeta, {}), /*#__PURE__*/jsx(Properties, {
+            onPropertiesChange: onPropertiesChange
+          }), filterBy({
+            kind: "image"
+          }, themePropertiesSchema).map(function (_ref5) {
+            var key = _ref5.key;
+            return /*#__PURE__*/jsx(Images, {
+              attribute: key
+            }, key);
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 left-0 right-0 flex justify-end gap-x-2 px-4 py-6",
+          children: [/*#__PURE__*/jsx(Button, {
+            "data-cy": "reset-button",
+            disabled: !dirty || isSubmitting,
+            label: t("neetoThemes.buttons.reset"),
+            style: "text",
+            type: "reset"
+          }), /*#__PURE__*/jsx(Button, {
+            "data-cy": "save-changes-button",
+            disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
+            label: t("neetoThemes.buttons.save"),
+            loading: isSubmitting,
+            ref: submitBtnRef,
+            type: "submit"
+          })]
+        }), /*#__PURE__*/jsx(Popover, {
+          appendTo: function appendTo() {
+            return document.body;
+          },
+          disabled: isEditingCurrentlyAppliedTheme,
+          position: "top",
+          reference: submitBtnRef,
+          trigger: "click",
+          content: /*#__PURE__*/jsxs("div", {
+            className: "flex flex-col items-start gap-2",
+            children: [/*#__PURE__*/jsx(Button, {
+              className: "absolute right-1 top-1 z-0",
+              icon: Close,
+              size: "small",
+              style: "text",
+              onClick: function onClick() {
+                var _popoverInstance$hide;
+                return popoverInstance === null || popoverInstance === void 0 || (_popoverInstance$hide = popoverInstance.hide) === null || _popoverInstance$hide === void 0 ? void 0 : _popoverInstance$hide.call(popoverInstance);
+              }
+            }), /*#__PURE__*/jsx(Typography, {
+              className: "w-72 pr-5",
+              style: "body2",
+              weight: "normal",
+              children: /*#__PURE__*/jsx(Trans, {
+                components: {
+                  bold: /*#__PURE__*/jsx("strong", {})
+                },
+                i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
+                values: {
+                  entityType: entityType
+                }
+              })
+            }), /*#__PURE__*/jsx(Button, {
+              disabled: isApplyingTheme,
+              label: t("neetoThemes.buttons.applyThisTheme"),
+              loading: isApplyingTheme,
+              onClick: function onClick() {
+                return onApplyTheme(theme);
+              }
+            })]
+          }),
+          onMount: setPopoverInstance
+        })]
+      });
+    }
+  });
+};
+
+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 Check = function Check(props) {
+  return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
+    fill: "none",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxs("g", {
+      filter: "url(#filter0_d_9519_161)",
+      children: [/*#__PURE__*/jsx("rect", {
+        fill: "#008068",
+        height: "20",
+        rx: "10",
+        width: "20",
+        x: "2",
+        y: "2"
+      }), /*#__PURE__*/jsx("rect", {
+        height: "20",
+        rx: "10",
+        stroke: "#fff",
+        strokeWidth: "1.5",
+        width: "20",
+        x: "2",
+        y: "2"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M16.375 9.5l-5.95 6.25-2.8-2.941",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.25"
+      })]
+    }), /*#__PURE__*/jsx("defs", {
+      children: /*#__PURE__*/jsxs("filter", {
+        colorInterpolationFilters: "sRGB",
+        filterUnits: "userSpaceOnUse",
+        height: "23.5",
+        id: "filter0_d_9519_161",
+        width: "23.5",
+        x: "0.25",
+        y: "0.25",
+        children: [/*#__PURE__*/jsx("feFlood", {
+          floodOpacity: "0",
+          result: "BackgroundImageFix"
+        }), /*#__PURE__*/jsx("feColorMatrix", {
+          "in": "SourceAlpha",
+          result: "hardAlpha",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        }), /*#__PURE__*/jsx("feOffset", {}), /*#__PURE__*/jsx("feGaussianBlur", {
+          stdDeviation: "0.5"
+        }), /*#__PURE__*/jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "out"
+        }), /*#__PURE__*/jsx("feColorMatrix", {
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"
+        }), /*#__PURE__*/jsx("feBlend", {
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_9519_161"
+        }), /*#__PURE__*/jsx("feBlend", {
+          "in": "SourceGraphic",
+          in2: "effect1_dropShadow_9519_161",
+          result: "shape"
+        })]
+      })
+    })]
+  }));
+};
+
+var Thumbnail = function Thumbnail(_ref) {
+  var _theme$snakeToCamelCa, _findBy, _findBy2;
+  var active = _ref.active,
+    isPreviewing = _ref.isPreviewing,
+    isHighLightedTheme = _ref.isHighLightedTheme,
+    theme = _ref.theme;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    _useConfigStore$theme = _useConfigStore.themePropertiesSchema,
+    themePropertiesSchema = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme;
+  var _themePropertiesSchem = _slicedToArray(themePropertiesSchema, 2),
+    colorObject1 = _themePropertiesSchem[0],
+    colorObject2 = _themePropertiesSchem[1];
+  var primaryLabel = humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
+  var secondaryLabel = humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
+  var primaryColor = findBy({
+    key: colorObject1.key
+  }, theme.properties).value;
+  var secondaryColor = findBy({
+    key: colorObject2.key
+  }, theme.properties).value;
+  var backgroundImageUrl = (_theme$snakeToCamelCa = theme[snakeToCamelCase(findBy({
+    useAsCardBackground: true
+  }, themePropertiesSchema).key)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url;
+  var buttonBackgroundColor = (_findBy = findBy({
+    key: (_findBy2 = findBy({
+      useAsCardButtonBackground: true
+    }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
+  }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
+      "neeto-ui-border-gray-400": !active,
+      "neeto-ui-border-gray-800 neeto-themes-theme-thumbnail--active": active,
+      "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
+      "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
+    }),
+    style: {
+      backgroundImage: backgroundImageUrl ? "url(".concat(backgroundImageUrl, ")") : "initial",
+      backgroundSize: "cover"
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-rounded-lg p-3",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "mb-3",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h3",
+            weight: "semibold",
+            children: /*#__PURE__*/jsx("span", {
+              style: {
+                color: primaryColor
+              },
+              children: primaryLabel
+            })
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: /*#__PURE__*/jsx("span", {
+              style: {
+                color: secondaryColor
+              },
+              children: secondaryLabel
+            })
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-rounded-lg h-5 w-12",
+          style: {
+            backgroundColor: buttonBackgroundColor
+          }
+        })]
+      })
+    })
+  });
+};
+
+var Card = function Card(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    isPreviewing = _ref.isPreviewing,
+    onSetPreviewTheme = _ref.onSetPreviewTheme,
+    onDeleteTheme = _ref.onDeleteTheme,
+    onEditTheme = _ref.onEditTheme,
+    theme = _ref.theme,
+    isApplyingTheme = _ref.isApplyingTheme,
+    onCloneTheme = _ref.onCloneTheme,
+    isHighLightedTheme = _ref.isHighLightedTheme,
+    onApplyTheme = _ref.onApplyTheme,
+    Thumbnail$1 = _ref.thumbnail;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var id = theme.id,
+    name = theme.name,
+    appliedCount = theme.appliedCount;
+  var handleCloneTheme = function handleCloneTheme() {
+    return onCloneTheme(theme);
+  };
+  var handleEditTheme = function handleEditTheme() {
+    return onEditTheme(theme);
+  };
+  var handleDeleteTheme = function handleDeleteTheme() {
+    return onDeleteTheme(id, name, appliedCount);
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: "group space-y-2 pt-0.5",
+    "data-cy": active ? "active-theme-card" : "theme-card",
+    id: theme.id,
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg cursor-pointer border transition-all duration-300 ease-in-out", {
+        "neeto-ui-border-gray-200": !active,
+        "neeto-themes-theme-thumbnail--active": active,
+        "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
+        "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
+      }),
+      onClick: function onClick() {
+        return onSetPreviewTheme(theme);
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-rounded-lg relative overflow-hidden rounded-bl-none rounded-br-none transition-all duration-300 ease-in-out group-hover:opacity-85",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "absolute right-0 top-0 p-3",
+          children: active ? /*#__PURE__*/jsx(Check, {
+            className: "flex-shrink-0",
+            "data-cy": "active-theme-label"
+          }) : /*#__PURE__*/jsx("div", {
+            className: classnames({
+              hidden: !isPreviewing,
+              "group-hover:block": true
+            }),
+            children: /*#__PURE__*/jsx(Button, {
+              className: "neeto-themes-theme-thumbnail__apply-btn flex-shrink-0",
+              "data-cy": "apply-theme-button",
+              disabled: isApplyingTheme,
+              label: t("neetoThemes.common.apply"),
+              loading: isApplyingTheme,
+              size: "small",
+              style: "tertiary",
+              onClick: function onClick() {
+                return onApplyTheme(theme);
+              }
+            })
+          })
+        }), Thumbnail$1 ? /*#__PURE__*/jsx(Thumbnail$1, {
+          active: active,
+          isHighLightedTheme: isHighLightedTheme,
+          isPreviewing: isPreviewing,
+          theme: theme
+        }) : /*#__PURE__*/jsx(Thumbnail, {
+          active: active,
+          isHighLightedTheme: isHighLightedTheme,
+          isPreviewing: isPreviewing,
+          theme: theme
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex items-start justify-between gap-1 p-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
+          "data-cy": "theme-name",
+          lineHeight: "snug",
+          style: "body2",
+          children: name
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownButtonProps: {
+            size: "small"
+          },
+          dropdownProps: {
+            strategy: "fixed",
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
+          },
+          menuItems: [{
+            key: "edit",
+            "data-cy": "edit-theme-menu-item",
+            label: t("neetoThemes.common.edit"),
+            isVisible: isPresent(onEditTheme),
+            onClick: handleEditTheme
+          }, {
+            key: "clone",
+            "data-cy": "clone-theme-menu-item",
+            label: t("neetoThemes.build.leftSideBar.themes.themeOptions.clone"),
+            onClick: handleCloneTheme
+          }, {
+            key: "divider",
+            type: "divider",
+            isVisible: isFunction(onDeleteTheme)
+          }, {
+            key: "delete",
+            "data-cy": "delete-theme-menu-item",
+            label: t("neetoThemes.build.leftSideBar.themes.themeOptions.delete"),
+            isVisible: isFunction(onDeleteTheme),
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              handleDeleteTheme();
+            }
+          }]
+        })]
+      })]
+    })
+  });
+};
+var Card$1 = /*#__PURE__*/memo(Card);
+
+var Themes = function Themes(_ref) {
+  var onEditTheme = _ref.onEditTheme,
+    _ref$themes = _ref.themes,
+    themes = _ref$themes === void 0 ? [] : _ref$themes,
+    _ref$defaultThemes = _ref.defaultThemes,
+    defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
+    onDeleteTheme = _ref.onDeleteTheme,
+    themeToHighlight = _ref.themeToHighlight,
+    didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
+    isLoading = _ref.isLoading,
+    currentTheme = _ref.currentTheme,
+    isCurrentThemeLoading = _ref.isCurrentThemeLoading,
+    thumbnail = _ref.thumbnail,
+    themeBeingApplied = _ref.themeBeingApplied,
+    onApplyTheme = _ref.onApplyTheme,
+    isApplyingTheme = _ref.isApplyingTheme;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useThemeUtils = useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"],
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState,
+    previewingTheme = _useThemeStore.previewingTheme;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchQuery = _useState2[0],
+    setSearchQuery = _useState2[1];
+  var _useCloneTheme = useCloneTheme(),
+    cloneTheme = _useCloneTheme.mutate;
+  useEffect(function () {
+    if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
+    didScrollActiveThemeIntoView.current = true;
+    setTimeout(function () {
+      scrollElementIntoView(currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+    }, 100);
+  }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
+  var setPreviewTheme = function setPreviewTheme(theme) {
+    setThemeState({
+      previewingTheme: theme
+    });
+    setTheme(theme);
+  };
+  var filteredDefaultThemes = defaultThemes.filter(function (theme) {
+    return theme.name.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+  var filteredThemes = themes.filter(function (theme) {
+    return theme.name.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+  var isSearchFieldVisible = (themes === null || themes === void 0 ? void 0 : themes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
+  var handleCloneTheme = function handleCloneTheme(data) {
+    cloneTheme(data.id, {
+      onSuccess: function onSuccess(_ref2) {
+        var clonedTheme = _ref2.theme;
+        onEditTheme(clonedTheme);
+      }
+    });
+  };
+  if (isLoading || isCurrentThemeLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-themes-sidebar__scroll",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "mb-6 space-y-3",
+      children: [isSearchFieldVisible && /*#__PURE__*/jsx(Search, {
+        autoFocus: true,
+        autoComplete: "off",
+        className: "mb-4 mt-1 px-6",
+        placeholder: t("neetoThemes.common.searchThemes"),
+        onSearch: setSearchQuery
+      }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx(Typography, {
+        className: "text-center",
+        style: "body2",
+        children: t("neetoThemes.common.noResultsFound")
+      }), isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "my-4 px-4 uppercase lg:px-5 xl:px-6",
+          "data-cy": "system-themes-header",
+          style: "h6",
+          weight: "semibold",
+          children: t("neetoThemes.build.leftSideBar.themes.systemThemes")
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
+          "data-cy": "system-themes",
+          children: filteredDefaultThemes.map(function (theme) {
+            return /*#__PURE__*/createElement(Card$1, {
+              onApplyTheme: onApplyTheme,
+              theme: theme,
+              thumbnail: thumbnail,
+              active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
+              isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
+              key: theme.id,
+              isApplyingTheme: isApplyingTheme && (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
+              onCloneTheme: handleCloneTheme,
+              onSetPreviewTheme: setPreviewTheme
+            });
+          })
+        })]
+      })]
+    }), isNotEmpty(filteredThemes) && /*#__PURE__*/jsxs("div", {
+      className: "mb-6 space-y-3",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "my-4 px-6 uppercase",
+        "data-cy": "custom-themes-header",
+        style: "h6",
+        weight: "semibold",
+        children: t("neetoThemes.build.leftSideBar.themes.customThemes")
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex flex-col gap-4 px-6",
+        "data-cy": "custom-themes",
+        children: filteredThemes.map(function (theme) {
+          var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
+          var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
+          return /*#__PURE__*/createElement(Card$1, {
+            isPreviewing: isPreviewing,
+            onApplyTheme: onApplyTheme,
+            onEditTheme: onEditTheme,
+            theme: theme,
+            thumbnail: thumbnail,
+            active: isActive,
+            isHighLightedTheme: theme.id === themeToHighlight,
+            key: theme.id,
+            isApplyingTheme: isApplyingTheme && (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
+            onCloneTheme: handleCloneTheme,
+            onDeleteTheme: !isActive && onDeleteTheme,
+            onSetPreviewTheme: setPreviewTheme
+          });
+        })
+      })]
+    })]
+  });
+};
+
+var TitleBar = function TitleBar(_ref) {
+  var currentScreen = _ref.currentScreen,
+    handleBackPress = _ref.handleBackPress,
+    handleCreateNewTheme = _ref.handleCreateNewTheme,
+    isNewTheme = _ref.isNewTheme,
+    themeToEdit = _ref.themeToEdit;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (currentScreen === DESIGN_SCREENS.Customize) {
+    return /*#__PURE__*/jsx("div", {
+      className: "neeto-themes-sidebar__header px-4",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-start space-x-2",
+        children: [/*#__PURE__*/jsx(Button, {
+          "data-cy": "customize-themes-back-button",
+          icon: LeftArrow,
+          iconPosition: "left",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoThemes.buttons.backToThemes"),
+            position: "top"
+          },
+          onClick: function onClick() {
+            return handleBackPress(themeToEdit);
+          }
+        }), /*#__PURE__*/jsx(Typography, {
+          "data-cy": "themes-header",
+          lineHeight: "normal",
+          style: "h3",
+          weight: "semibold",
+          children: isNewTheme ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-themes-sidebar__header px-4 lg:px-5 xl:px-6",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between space-x-2",
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-cy": "themes-header",
+        lineHeight: "normal",
+        style: "h3",
+        weight: "semibold",
+        children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
+      }), /*#__PURE__*/jsx("div", {
+        className: "self-end",
+        children: /*#__PURE__*/jsx(Button, {
+          "data-cy": "customize-themes-add-theme-button",
+          icon: Plus,
+          iconPosition: "left",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoThemes.buttons.addNewTheme"),
+            position: "top"
+          },
+          onClick: handleCreateNewTheme
+        })
+      })]
+    })
+  });
+};
+
+var MemoizedAlert = /*#__PURE__*/memo(Alert);
+var Sidebar = function Sidebar(_ref) {
+  var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
+  var thumbnail = _ref.thumbnail,
+    onPropertiesChange = _ref.onPropertiesChange,
+    onApplyThemeSuccess = _ref.onApplyThemeSuccess,
+    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
+  var _useState = useState(DESIGN_SCREENS.THEMES),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentScreen = _useState2[0],
+    setCurrentScreen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDeleteAlertOpen = _useState4[0],
+    setIsDeleteAlertOpen = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    themeToHighlight = _useState6[0],
+    setThemeToHighlight = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    themeBeingApplied = _useState8[0],
+    setThemeBeingApplied = _useState8[1];
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        entityId: store["entityId"],
+        isFetchingSchema: store["isFetchingSchema"],
+        defaultThemeName: store["defaultThemeName"]
+      };
+    }, shallow),
+    entityType = _useConfigStore.entityType,
+    entityId = _useConfigStore.entityId,
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    defaultThemeName = _useConfigStore.defaultThemeName;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var didScrollActiveThemeIntoView = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useThemeUtils = useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useListThemes = useListThemes(entityId),
+    _useListThemes$data = _useListThemes.data,
+    _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
+    _useListThemes$data2$ = _useListThemes$data2.themes,
+    themes = _useListThemes$data2$ === void 0 ? [] : _useListThemes$data2$,
+    _useListThemes$data2$2 = _useListThemes$data2.defaultThemes,
+    defaultThemes = _useListThemes$data2$2 === void 0 ? [] : _useListThemes$data2$2,
+    isLoading = _useListThemes.isLoading;
+  var _useShowThemeEntity = useShowThemeEntity(entityId),
+    _useShowThemeEntity$d = _useShowThemeEntity.data,
+    _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
+    _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
+    currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
+    isCurrentThemeLoading = _useShowThemeEntity.isLoading;
+  var _useDeleteTheme = useDeleteTheme(),
+    deleteTheme = _useDeleteTheme.mutate,
+    isDeleting = _useDeleteTheme.isPending;
+  var _useApplyTheme = useApplyTheme({
+      onSuccess: function onSuccess(_ref2) {
+        var theme = _ref2.theme;
+        setTheme(theme);
+        highlightTheme(theme);
+        setThemeState({
+          previewingTheme: theme
+        });
+        setThemeBeingApplied({});
+        setCurrentScreen(DESIGN_SCREENS.THEMES);
+        onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
+      }
+    }),
+    applyTheme = _useApplyTheme.mutate,
+    isApplyingTheme = _useApplyTheme.isPending;
+  var themeToDelete = useRef(null);
+  var themeToEdit = useRef(null);
+  var handleEditTheme = function handleEditTheme(theme) {
+    themeToEdit.current = theme;
+    setCurrentScreen(DESIGN_SCREENS.Customize);
+  };
+  var onApplyTheme = function onApplyTheme(theme) {
+    if (isApplyingTheme) return;
+    setThemeBeingApplied(theme);
+    applyTheme({
+      themeId: theme.id,
+      entityId: entityId,
+      entityType: entityType
+    });
+  };
+  var handleBackPress = function handleBackPress(theme) {
+    setTheme(currentTheme);
+    highlightTheme(isPresent(theme) ? theme : currentTheme);
+    setThemeState({
+      previewingTheme: currentTheme
+    });
+    setCurrentScreen(DESIGN_SCREENS.THEMES);
+    themeToEdit.current = null;
+  };
+  var highlightTheme = function highlightTheme(themeToHighlight) {
+    setTimeout(function () {
+      scrollElementIntoView(themeToHighlight.id);
+    }, 1500);
+    setTimeout(function () {
+      setThemeToHighlight(null);
+    }, 4000);
+    setThemeToHighlight(themeToHighlight.id);
+  };
+  var onCreateTheme = function onCreateTheme(createdTheme) {
+    themeToEdit.current = createdTheme;
+    setTheme(createdTheme);
+    setThemeState({
+      previewingTheme: createdTheme
+    });
+  };
+  var handleDelete = function handleDelete(themeId, name, appliedCount) {
+    setIsDeleteAlertOpen(true);
+    themeToDelete.current = {
+      id: themeId,
+      name: name,
+      appliedCount: appliedCount
+    };
+  };
+  var handleCloseDeleteAlert = useCallback(function () {
+    setIsDeleteAlertOpen(false);
+    themeToDelete.current = null;
+  }, [themeToDelete]);
+  var handleDeleteTheme = useCallback(function () {
+    var _themeToDelete$curren;
+    deleteTheme((_themeToDelete$curren = themeToDelete.current) === null || _themeToDelete$curren === void 0 ? void 0 : _themeToDelete$curren.id, {
+      onSuccess: function onSuccess() {
+        setIsDeleteAlertOpen(false);
+        themeToDelete.current = null;
+      }
+    });
+  }, [deleteTheme, themeToDelete]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-themes-sidebar neeto-ui-border-gray-200 flex-shrink-0 border-r",
+    children: [/*#__PURE__*/jsx(TitleBar, {
+      currentScreen: currentScreen,
+      handleBackPress: handleBackPress,
+      handleCreateNewTheme: function handleCreateNewTheme() {
+        return handleEditTheme({});
+      },
+      isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id),
+      themeToEdit: themeToEdit.current
+    }), currentScreen === DESIGN_SCREENS.THEMES ? /*#__PURE__*/jsx(Themes, {
+      currentTheme: currentTheme,
+      defaultThemes: defaultThemes,
+      didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
+      highlightTheme: highlightTheme,
+      isApplyingTheme: isApplyingTheme,
+      isCurrentThemeLoading: isCurrentThemeLoading,
+      onApplyTheme: onApplyTheme,
+      themeBeingApplied: themeBeingApplied,
+      themeToHighlight: themeToHighlight,
+      themes: themes,
+      thumbnail: thumbnail,
+      isLoading: isLoading || isFetchingSchema,
+      onDeleteTheme: handleDelete,
+      onEditTheme: handleEditTheme
+    }) : /*#__PURE__*/jsx(Customize, {
+      isApplyingTheme: isApplyingTheme,
+      onApplyTheme: onApplyTheme,
+      onCreateTheme: onCreateTheme,
+      onPropertiesChange: onPropertiesChange,
+      onUpdateThemeSuccess: onUpdateThemeSuccess,
+      theme: themeToEdit.current,
+      themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
+    }), /*#__PURE__*/jsx(MemoizedAlert, {
+      isOpen: isDeleteAlertOpen,
+      isSubmitting: isDeleting,
+      title: t("neetoThemes.alerts.title.deleteTheme"),
+      message: t("neetoThemes.alerts.message.deleteTheme", {
+        name: (_themeToDelete$curren2 = themeToDelete.current) === null || _themeToDelete$curren2 === void 0 ? void 0 : _themeToDelete$curren2.name,
+        count: (_themeToDelete$curren3 = themeToDelete.current) === null || _themeToDelete$curren3 === void 0 ? void 0 : _themeToDelete$curren3.appliedCount,
+        defaultThemeName: defaultThemeName,
+        entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
+          count: (_themeToDelete$curren4 = themeToDelete.current) === null || _themeToDelete$curren4 === void 0 ? void 0 : _themeToDelete$curren4.appliedCount
+        })
+      }),
+      onClose: handleCloseDeleteAlert,
+      onSubmit: handleDeleteTheme
+    })]
+  });
+};
+
+var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
+  var children = _ref.children,
+    entityType = _ref.entityType,
+    entityId = _ref.entityId,
+    thumbnail = _ref.thumbnail,
+    onPropertiesChange = _ref.onPropertiesChange,
+    _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
+    isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
+    _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
+    onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? noop : _ref$onApplyThemeSucc,
+    _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
+    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? noop : _ref$onUpdateThemeSuc;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var _useThemeUtils = useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        setConfigState: store["setConfigState"]
+      };
+    }, shallow),
+    setConfigState = _useConfigStore.setConfigState;
+  var _useShowThemeEntity = useShowThemeEntity(entityId),
+    _useShowThemeEntity$d = _useShowThemeEntity.data,
+    _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
+    _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
+    currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
+    isLoading = _useShowThemeEntity.isLoading,
+    isFetchingCurrentTheme = _useShowThemeEntity.isFetching;
+  var isCurrentThemeLoading = isLoading || isFetchingCurrentTheme;
+  useEffect(function () {
+    setConfigState({
+      entityType: entityType,
+      entityId: entityId,
+      isTemplateThemesEnabled: isTemplateThemesEnabled
+    });
+  }, []);
+  useEffect(function () {
+    if (isNotPresent(currentTheme)) return;
+    setThemeState({
+      previewingTheme: currentTheme
+    });
+    setTheme(currentTheme);
+  }, [isLoading, entityId]);
+  useEffect(function () {
+    if (isNotPresent(currentTheme)) return;
+    setThemeState({
+      currentTheme: currentTheme,
+      isCurrentThemeLoading: isCurrentThemeLoading
+    });
+  }, [currentTheme, isCurrentThemeLoading]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-themes__wrapper",
+    children: [/*#__PURE__*/jsx(Sidebar, {
+      onApplyThemeSuccess: onApplyThemeSuccess,
+      onPropertiesChange: onPropertiesChange,
+      onUpdateThemeSuccess: onUpdateThemeSuccess,
+      thumbnail: thumbnail
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-themes-preview__wrapper",
+      children: isCurrentThemeLoading ? /*#__PURE__*/jsx("div", {
+        className: "m-auto flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsx(Spinner, {})
+      }) : children
+    })]
+  });
+};
+var index = withTitle(NeetoThemesBuilder, t$1("neetoThemes.common.design"));
+
+export { index as default };
+//# sourceMappingURL=NeetoThemesBuilder.js.map