npm - @bigbinary/neeto-themes-frontend - Versions diffs - 1.3.0-beta2 → 2.0.2 - Mend

@bigbinary/neeto-themes-frontend 1.3.0-beta2 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/app/javascript/src/translations/en.json +12 -2
package/dist/index.cjs.js +374 -103
package/dist/index.cjs.js.map +1 -1
package/dist/index.js +361 -99
package/dist/index.js.map +1 -1
package/package.json +11 -11
package/types.d.ts +1 -0

package/dist/index.cjs.js CHANGED Viewed

@@ -12,15 +12,15 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/regenerator');
-require('@bigbinary/neetoui/Toastr');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var Toastr = require('@bigbinary/neetoui/Toastr');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var ramda = require('ramda');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var neetoIcons = require('@bigbinary/neeto-icons');
+var Close = require('@bigbinary/neeto-icons/Close');
 var Button = require('@bigbinary/neetoui/Button');
 var Popover = require('@bigbinary/neetoui/Popover');
 var Typography = require('@bigbinary/neetoui/Typography');
@@ -30,14 +30,19 @@ var formik = require('formik');
 var jsxRuntime = require('react/jsx-runtime');
 var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var Select = require('@bigbinary/neetoui/Select');
+var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
+var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
+var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var antd = require('antd');
+var classnames = require('classnames');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var Switch = require('@bigbinary/neetoui/Switch');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var Search = require('@bigbinary/neeto-molecules/Search');
-var classnames = require('classnames');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var Plus = require('@bigbinary/neeto-icons/Plus');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -62,21 +67,30 @@ function _interopNamespace(e) {
 var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
+var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
-var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var CenterAlign__default = /*#__PURE__*/_interopDefaultLegacy(CenterAlign);
+var LeftAlign__default = /*#__PURE__*/_interopDefaultLegacy(LeftAlign);
+var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var LeftArrow__default = /*#__PURE__*/_interopDefaultLegacy(LeftArrow);
+var Plus__default = /*#__PURE__*/_interopDefaultLegacy(Plus);
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useConfigStore = zustand.create(reactUtils.withImmutableActions(function (set) {
@@ -85,7 +99,9 @@ var useConfigStore = zustand.create(reactUtils.withImmutableActions(function (se
     entityType: "",
     entityId: "",
     variableNamesMap: {},
+    defaultThemeName: "Plain blue",
     isFetchingSchema: true,
+    isTemplateThemesEnabled: false,
     setConfigState: set
   };
 }));
@@ -100,6 +116,52 @@ var useThemeStore = zustand.create(reactUtils.withImmutableActions(function (set
   };
 }));
+var getImageFromUrl = function getImageFromUrl(source) {
+  var image = new Image();
+  image.crossOrigin = "anonymous";
+  image.src = source;
+  return new Promise(function (resolve) {
+    image.onload = function () {
+      resolve(image);
+    };
+  });
+};
+var getDominantColorFromUrl = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(imageUrl) {
+    var image, context, c;
+    return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return getImageFromUrl(imageUrl);
+        case 3:
+          image = _context.sent;
+          context = document.createElement("canvas").getContext("2d");
+          context === null || context === void 0 || context.drawImage(image, 0, 0, 1, 1);
+          c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
+          if (!c) {
+            _context.next = 9;
+            break;
+          }
+          return _context.abrupt("return", "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1)));
+        case 9:
+          return _context.abrupt("return", null);
+        case 12:
+          _context.prev = 12;
+          _context.t0 = _context["catch"](0);
+          Toastr__default["default"].error(_context.t0);
+          return _context.abrupt("return", null);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 12]]);
+  }));
+  return function getDominantColorFromUrl(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 var scrollElementIntoView = function scrollElementIntoView(elementId) {
   var elementToScroll = document.getElementById(elementId);
   elementToScroll === null || elementToScroll === void 0 || elementToScroll.scrollIntoView({
@@ -147,8 +209,12 @@ var useShowThemeEntity = function useShowThemeEntity(entityId) {
 };
 var _excluded$1 = ["themeId"];
-var list$1 = function list() {
-  return axios__default["default"].get("".concat(BASE_URL, "/api/v1/themes"));
+var list$1 = function list(entityId) {
+  return axios__default["default"].get("".concat(BASE_URL, "/api/v1/themes"), {
+    params: {
+      entity_id: entityId
+    }
+  });
 };
 var show = function show(id) {
   return axios__default["default"].get("".concat(BASE_URL, "/api/v1/themes/").concat(id));
@@ -188,10 +254,19 @@ var themesApi = {
   apply: apply
 };
-var useListThemes = function useListThemes() {
+var useListThemes = function useListThemes(entityId) {
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        isTemplateThemesEnabled: store["isTemplateThemesEnabled"]
+      };
+    }, shallow.shallow),
+    isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
+  var queryKey = isTemplateThemesEnabled ? [QUERY_KEYS.THEMES_LIST, entityId] : [QUERY_KEYS.THEMES_LIST];
   return reactQuery.useQuery({
-    queryKey: [QUERY_KEYS.THEMES_LIST],
-    queryFn: themesApi.list
+    queryKey: queryKey,
+    queryFn: function queryFn() {
+      return themesApi.list(entityId);
+    }
   });
 };
 var useCreateTheme = function useCreateTheme() {
@@ -243,6 +318,8 @@ var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
       var overlayOpacity = Number(property.value);
       setVariable(neetoCist.snakeToCamelCase("".concat(property.key, "_overlay_opacity")), Math.abs(overlayOpacity / 100), variableNamesMap);
       setVariable(neetoCist.snakeToCamelCase("".concat(property.key, "_overlay_color")), overlayOpacity < 0 ? BLACK : WHITE, variableNamesMap);
+    } else if (property.kind === "radius") {
+      setVariable(attribute, "".concat(property.value, "px"), variableNamesMap);
     } else {
       setVariable(attribute, property.value, variableNamesMap);
     }
@@ -293,7 +370,8 @@ var useThemeUtils = function useThemeUtils() {
     if (data) {
       setConfigState({
         themePropertiesSchema: data === null || data === void 0 ? void 0 : data.schema,
-        variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap
+        variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap,
+        defaultThemeName: data === null || data === void 0 ? void 0 : data.defaultThemeName
       });
     }
   }, [data]);
@@ -426,6 +504,12 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             kind: "slider",
             key: key
           };
+        case "radius":
+          return {
+            value: defaultValue,
+            kind: "radius",
+            key: key
+          };
         case "boolean":
           return {
             value: String(defaultValue),
@@ -438,6 +522,12 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             kind: "position_selector",
             key: key
           };
+        case "alignment_block":
+          return {
+            value: defaultValue,
+            kind: "alignment_block",
+            key: key
+          };
         default:
           return null;
       }
@@ -455,23 +545,26 @@ var buildImageData = function buildImageData(values, themePropertiesSchema) {
   }, {});
 };
 var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
-  var _findBy;
   var property = neetoCist.findBy({
     key: key
   }, themePropertiesSchema);
   if (neetoCist.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 (neetoCist.isNotPresent(conditionalKey)) return true;
-  var dependentProperty = neetoCist.findBy({
+  var dependentPropertySchema = neetoCist.findBy({
     key: conditionalKey
   }, themePropertiesSchema);
-  if (dependentProperty.kind === "image") {
+  var dependentProperty = neetoCist.findBy({
+    key: conditionalKey
+  }, formikValues.properties);
+  if (dependentPropertySchema.kind === "image") {
     var _formikValues$snakeTo;
     return neetoCist.isPresent((_formikValues$snakeTo = formikValues[neetoCist.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 neetoCist.isPresent((_findBy = neetoCist.findBy({
-    key: conditionalKey
-  }, formikValues.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value);
+  return neetoCist.isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
 };
 var buildLabel = function buildLabel(key, kind) {
   return i18next.t("neetoThemes.properties.".concat(neetoCist.snakeToCamelCase(kind), ".").concat(neetoCist.snakeToCamelCase(key)));
@@ -499,6 +592,32 @@ var Card$2 = function Card(_ref) {
   });
 };
+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__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
+    "data-cy": "theme-style-".concat(utils.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      "data-cy": "logo-field-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value
+      })
+    })]
+  });
+};
 var DESIGN_SCREENS = {
   THEMES: "Themes",
   Customize: "Customize"
@@ -506,6 +625,7 @@ var DESIGN_SCREENS = {
 var ONE_MEGABYTE = 1;
 var ImageBlock = function ImageBlock(_ref) {
+  var _findBy;
   var label = _ref.label,
     name = _ref.name,
     _ref$imageData = _ref.imageData,
@@ -513,22 +633,73 @@ var ImageBlock = function ImageBlock(_ref) {
     _ref$uploadConfig = _ref.uploadConfig,
     uploadConfig = _ref$uploadConfig === void 0 ? {
       maxImageSize: ONE_MEGABYTE
-    } : _ref$uploadConfig;
+    } : _ref$uploadConfig,
+    attribute = _ref.attribute;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
-  var handleImageChange = function handleImageChange(image) {
-    if (ramda.isEmpty(image.signedId) || ramda.isEmpty(image.url)) {
-      setFieldValue(name, {
-        signedId: null,
-        url: image.url
-      });
-      return;
-    }
-    setFieldValue(name, {
-      signedId: image.signedId,
-      url: image.url
-    });
-  };
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow.shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var propertySchema = neetoCist.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 = neetoCist.findBy({
+    key: "".concat(name, "_position")
+  }, themePropertiesSchema);
+  var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && neetoCist.isPresent(positionKeyInSchema);
+  var positionKeyIndex = neetoCist.findIndexBy({
+    key: "".concat(name, "_position")
+  }, values.properties);
+  var handleImageChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(image) {
+      var dominantColor;
+      return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            if (!(ramda.isEmpty(image.signedId) || ramda.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__default["default"].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__*/jsxRuntime.jsxs("div", {
     className: "space-y-3 py-3 first:pt-0 last:pb-0",
     "data-cy": "theme-style-".concat(utils.joinHyphenCase(label)),
@@ -539,12 +710,25 @@ var ImageBlock = function ImageBlock(_ref) {
         style: "body2",
         children: label
       })
-    }), /*#__PURE__*/react.createElement(neetoImageUploaderFrontend.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
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-3 divide-y divide-gray-200",
+      children: [/*#__PURE__*/react.createElement(neetoImageUploaderFrontend.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__*/jsxRuntime.jsx(SelectBlock, {
+        label: buildLabel("".concat(name, "Position"), "image"),
+        options: options || POSITION_OPTIONS,
+        placeholder: t("neetoThemes.common.left"),
+        value: neetoCist.toLabelAndValue((_findBy = neetoCist.findBy({
+          key: "".concat(name, "_position")
+        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value),
+        onChange: function onChange(option) {
+          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
+        }
+      })]
     })]
   });
 };
@@ -561,6 +745,7 @@ var Images = function Images(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "divide-y divide-gray-200",
       children: /*#__PURE__*/jsxRuntime.jsx(ImageBlock, {
+        attribute: attribute,
         imageData: imageData,
         name: key
       })
@@ -568,6 +753,54 @@ var Images = function Images(_ref) {
   });
 };
+var AlignmentBlock = function AlignmentBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0",
+    "data-cy": utils.joinHyphenCase(label),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(formik.Field, {
+      name: name,
+      children: function children(_ref2) {
+        var value = _ref2.field.value,
+          setFieldValue = _ref2.form.setFieldValue;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-3",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            "data-cy": "alignment-left",
+            icon: LeftAlign__default["default"],
+            size: "large",
+            style: value === "left" ? "primary" : "text",
+            tooltipProps: {
+              content: "Left align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "left");
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            "data-cy": "alignment-center",
+            icon: CenterAlign__default["default"],
+            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,
@@ -627,32 +860,6 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
   });
 };
-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__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
-    "data-cy": "theme-style-".concat(utils.joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      "data-cy": "logo-field-labels",
-      style: "body2",
-      children: label
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-40",
-      children: /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
-        onChange: onChange,
-        options: options,
-        placeholder: placeholder,
-        value: value
-      })
-    })]
-  });
-};
 var SliderBlock = function SliderBlock(_ref) {
   var label = _ref.label,
     onChange = _ref.onChange,
@@ -688,14 +895,32 @@ var SwitchBlock = function SwitchBlock(_ref) {
   var label = _ref.label,
     name = _ref.name,
     switchProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
+  var doesHelpTextExist = i18n.exists(translationKey);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      style: "body2",
-      children: label
-    }), /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], _objectSpread$2({}, _objectSpread$2({
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "inline-flex items-center gap-4",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        "data-cy": "style-fields-labels",
+        style: "body2",
+        className: classnames__default["default"]({
+          "w-32": doesHelpTextExist,
+          "w-auto": !doesHelpTextExist
+        }),
+        children: label
+      }), doesHelpTextExist && /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
+        className: "flex-shrink-0",
+        description: t(translationKey)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
       name: name
-    }, switchProps)))]
+    }, switchProps)), {}, {
+      "data-cy": "enable-background-color-toggle"
+    }))]
   });
 };
@@ -749,7 +974,7 @@ var Properties = function Properties(_ref) {
     }
   };
   react.useEffect(function () {
-    onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, setFieldValue);
+    onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
     setTheme(values);
     setThemeState({
       previewingTheme: values
@@ -779,20 +1004,39 @@ var Properties = function Properties(_ref) {
       }), neetoCist.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__*/jsxRuntime.jsx(ColorBlock, {
           color: value,
           label: buildLabel(key, kind),
+          showTransparencyControl: ((_findBy = neetoCist.findBy({
+            key: key
+          }, themePropertiesSchema)) === null || _findBy === void 0 ? void 0 : _findBy.showTransparencyControl) || false,
           onChange: handleColorChange(key)
         }, key);
       }), neetoCist.filterBy({
-        kind: "overlay_opacity"
+        kind: "radius"
       }, values.properties).map(function (_ref6) {
         var key = _ref6.key,
           value = _ref6.value,
           kind = _ref6.kind;
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.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);
+      }), neetoCist.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__*/jsxRuntime.jsx(SliderBlock, {
           label: buildLabel(key, kind),
           marks: OVERLAY_OPACITY_SLIDER_MARKS,
@@ -805,17 +1049,17 @@ var Properties = function Properties(_ref) {
         }, key);
       }), neetoCist.filterBy({
         kind: "position_selector"
-      }, values.properties).map(function (_ref7) {
-        var _findBy;
-        var key = _ref7.key,
-          kind = _ref7.kind,
-          value = _ref7.value;
+      }, values.properties).map(function (_ref8) {
+        var _findBy2;
+        var key = _ref8.key,
+          kind = _ref8.kind,
+          value = _ref8.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
-        var options = (_findBy = neetoCist.findBy({
+        var options = (_findBy2 = neetoCist.findBy({
           key: key
-        }, themePropertiesSchema)) === null || _findBy === void 0 || (_findBy = _findBy.options) === null || _findBy === void 0 ? void 0 : _findBy.map(neetoCist.toLabelAndValue);
+        }, themePropertiesSchema)) === null || _findBy2 === void 0 || (_findBy2 = _findBy2.options) === null || _findBy2 === void 0 ? void 0 : _findBy2.map(neetoCist.toLabelAndValue);
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
           label: buildLabel(key, kind),
           options: options || POSITION_OPTIONS,
@@ -827,20 +1071,33 @@ var Properties = function Properties(_ref) {
         }, key);
       }), neetoCist.filterBy({
         kind: "boolean"
-      }, values.properties).map(function (_ref8) {
-        var key = _ref8.key,
-          kind = _ref8.kind,
-          value = _ref8.value;
+      }, values.properties).map(function (_ref9) {
+        var key = _ref9.key,
+          kind = _ref9.kind,
+          value = _ref9.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(SwitchBlock, {
           checked: value !== "false",
           label: buildLabel(key, kind),
+          name: neetoCist.snakeToCamelCase(key),
           onChange: function onChange(e) {
             return setFieldValue("properties[".concat(index, "].value"), String(e.target.checked));
           }
         }, key);
+      }), neetoCist.filterBy({
+        kind: "alignment_block"
+      }, values.properties).map(function (_ref10) {
+        var key = _ref10.key,
+          kind = _ref10.kind;
+        var index = neetoCist.findIndexBy({
+          key: key
+        }, values.properties);
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(AlignmentBlock, {
+          label: buildLabel(key, kind),
+          name: "properties[".concat(index, "].value")
+        });
       })]
     })
   });
@@ -968,7 +1225,7 @@ var Customize = function Customize(_ref) {
             className: "flex flex-col items-start gap-2",
             children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
               className: "absolute right-1 top-1 z-0",
-              icon: neetoIcons.Close,
+              icon: Close__default["default"],
               size: "small",
               style: "text",
               onClick: function onClick() {
@@ -1017,7 +1274,7 @@ var Check = function Check(props) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
       filter: "url(#filter0_d_9519_161)",
       children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
-        fill: "#4558F9",
+        fill: "#008068",
         height: "20",
         rx: "10",
         width: "20",
@@ -1418,7 +1675,8 @@ var TitleBar = function TitleBar(_ref) {
   var currentScreen = _ref.currentScreen,
     handleBackPress = _ref.handleBackPress,
     handleCreateNewTheme = _ref.handleCreateNewTheme,
-    isNewTheme = _ref.isNewTheme;
+    isNewTheme = _ref.isNewTheme,
+    themeToEdit = _ref.themeToEdit;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   if (currentScreen === DESIGN_SCREENS.Customize) {
@@ -1428,14 +1686,16 @@ var TitleBar = function TitleBar(_ref) {
         className: "flex items-center justify-start space-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           "data-cy": "customize-themes-back-button",
-          icon: neetoIcons.LeftArrow,
+          icon: LeftArrow__default["default"],
           iconPosition: "left",
           style: "text",
           tooltipProps: {
             content: t("neetoThemes.buttons.backToThemes"),
             position: "top"
           },
-          onClick: handleBackPress
+          onClick: function onClick() {
+            return handleBackPress(themeToEdit);
+          }
         }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
           "data-cy": "themes-header",
           lineHeight: "normal",
@@ -1460,7 +1720,7 @@ var TitleBar = function TitleBar(_ref) {
         className: "self-end",
         children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           "data-cy": "customize-themes-add-theme-button",
-          icon: neetoIcons.Plus,
+          icon: Plus__default["default"],
           iconPosition: "left",
           style: "text",
           tooltipProps: {
@@ -1476,7 +1736,7 @@ var TitleBar = function TitleBar(_ref) {
 var MemoizedAlert = /*#__PURE__*/react.memo(Alert__default["default"]);
 var Sidebar = function Sidebar(_ref) {
-  var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3;
+  var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
   var thumbnail = _ref.thumbnail,
     onPropertiesChange = _ref.onPropertiesChange;
   var _useState = react.useState(DESIGN_SCREENS.THEMES),
@@ -1499,12 +1759,14 @@ var Sidebar = function Sidebar(_ref) {
       return {
         entityType: store["entityType"],
         entityId: store["entityId"],
-        isFetchingSchema: store["isFetchingSchema"]
+        isFetchingSchema: store["isFetchingSchema"],
+        defaultThemeName: store["defaultThemeName"]
       };
     }, shallow.shallow),
     entityType = _useConfigStore.entityType,
     entityId = _useConfigStore.entityId,
-    isFetchingSchema = _useConfigStore.isFetchingSchema;
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    defaultThemeName = _useConfigStore.defaultThemeName;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -1516,7 +1778,7 @@ var Sidebar = function Sidebar(_ref) {
     t = _useTranslation.t;
   var _useThemeUtils = useThemeUtils(),
     setTheme = _useThemeUtils.setTheme;
-  var _useListThemes = useListThemes(),
+  var _useListThemes = useListThemes(entityId),
     _useListThemes$data = _useListThemes.data,
     _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
     _useListThemes$data2$ = _useListThemes$data2.themes,
@@ -1537,6 +1799,7 @@ var Sidebar = function Sidebar(_ref) {
       onSuccess: function onSuccess(_ref2) {
         var theme = _ref2.theme;
         setTheme(theme);
+        highlightTheme(theme);
         setThemeState({
           previewingTheme: theme
         });
@@ -1561,8 +1824,9 @@ var Sidebar = function Sidebar(_ref) {
       entityType: entityType
     });
   };
-  var handleBackPress = function handleBackPress() {
+  var handleBackPress = function handleBackPress(theme) {
     setTheme(currentTheme);
+    highlightTheme(neetoCist.isPresent(theme) ? theme : currentTheme);
     setThemeState({
       previewingTheme: currentTheme
     });
@@ -1572,10 +1836,10 @@ var Sidebar = function Sidebar(_ref) {
   var highlightTheme = function highlightTheme(themeToHighlight) {
     setTimeout(function () {
       scrollElementIntoView(themeToHighlight.id);
-    }, 1500);
+    }, 1000);
     setTimeout(function () {
       setThemeToHighlight(null);
-    }, 4000);
+    }, 3500);
     setThemeToHighlight(themeToHighlight.id);
   };
   var onCreateTheme = function onCreateTheme(createdTheme) {
@@ -1626,7 +1890,8 @@ var Sidebar = function Sidebar(_ref) {
       handleCreateNewTheme: function handleCreateNewTheme() {
         return handleEditTheme({});
       },
-      isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id)
+      isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id),
+      themeToEdit: themeToEdit.current
     }), currentScreen === DESIGN_SCREENS.THEMES ? /*#__PURE__*/jsxRuntime.jsx(Themes, {
       currentTheme: currentTheme,
       defaultThemes: defaultThemes,
@@ -1656,7 +1921,10 @@ var Sidebar = function Sidebar(_ref) {
       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,
-        entityType: entityType
+        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
@@ -1669,7 +1937,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     entityType = _ref.entityType,
     entityId = _ref.entityId,
     thumbnail = _ref.thumbnail,
-    onPropertiesChange = _ref.onPropertiesChange;
+    onPropertiesChange = _ref.onPropertiesChange,
+    _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
+    isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         isCurrentThemeLoading: store["isCurrentThemeLoading"]
@@ -1685,7 +1955,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   react.useEffect(function () {
     setConfigState({
       entityType: entityType,
-      entityId: entityId
+      entityId: entityId,
+      isTemplateThemesEnabled: isTemplateThemesEnabled
     });
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1706,7 +1977,7 @@ var index = reactUtils.withTitle(NeetoThemesBuilder, i18next.t("neetoThemes.comm
 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));box-shadow:var(--neeto-ui-shadow-s);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,.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:2px solid rgb(var(--neeto-ui-primary-500))!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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3RoZW1lcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1QkFFRSxZQUFBLENBREEsVUNFRixDRENFLDZDQUdFLDJDQUFBLENBQ0EsbUNBQUEsQ0FGQSx5QkFBQSxDQURBLFdDSUosQ0RBSSwwQkFMRiw2Q0FNSSxXQ0dKLENBQ0YsQ0RGSSwwQkFSRiw2Q0FTSSxXQ0tKLENBQ0YsQ0RISSwyRUFFRSxrQkFBQSxDQURBLGdCQ01OLENERkksMkVBQ0UsMEJBQUEsQ0FDQSxlQ0lOLENERFEsNElBQ0UsWUNHVixDREdFLHNEQUdFLFdBQUEsQ0FEQSx5QkFBQSxDQURBLGlCQ0NKLENES0EsOENBQ0Usb0RBQUEsQ0FDQSx5RENGRixDRFVBLHNGQUNFLHVEQUFBLENBQ0EsNERDRkYsQ0RLQSx5Q0FDRSw2QkFBQSxDQUNBLGtDQ0ZGLENER0UscUdBRUUsbUJDRkoiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLXdpZHRoLXNtO1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtICN7JGJ1aWxkZXItaGVhZGVyLWhlaWdodH0pO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLW5lZXRvLXVpLXNoYWRvdy1zKTtcbiAgICBAc2NyZWVuIGxnIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtbGc7XG4gICAgfVxuICAgIEBzY3JlZW4geGwge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC14bDtcbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA4cHg7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTIwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcblxuICAgICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyX190YXJnZXQge1xuICAgICAgICAubmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0X19jb2RlIHtcbiAgICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm5lZXRvLXRoZW1lcy1wcmV2aWV3X193cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgZmxleC1ncm93OiAxO1xuICB9XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG4ge1xuICAtLW5lZXRvLXVpLWJ0bi1wYWRkaW5nLXg6IDEycHg7XG4gIC0tbmVldG8tdWktYnRuLWJvcmRlci1yYWRpdXM6IDEwMHB4O1xuICAmOmRpc2FibGVkLFxuICAmW2Rpc2FibGVkXSB7XG4gICAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gIHdpZHRoOiAyNDBweDtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gNjRweCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xuICBib3gtc2hhZG93OiB2YXIoLS1uZWV0by11aS1zaGFkb3ctcyk7XG59XG5Ac2NyZWVuIGxnIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAyODBweDtcbiAgfVxufVxuQHNjcmVlbiB4bCB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogMzIwcHg7XG4gIH1cbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgcGFkZGluZy10b3A6IDE2cHg7XG4gIHBhZGRpbmctYm90dG9tOiA4cHg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX3Njcm9sbCB7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEyMHB4KTtcbiAgb3ZlcmZsb3cteTogYXV0bztcbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fc2Nyb2xsIC5uZWV0by11aS1jb2xvcnBpY2tlcl9fdGFyZ2V0IC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDY0cHgpO1xuICBmbGV4LWdyb3c6IDE7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG4ge1xuICAtLW5lZXRvLXVpLWJ0bi1wYWRkaW5nLXg6IDEycHg7XG4gIC0tbmVldG8tdWktYnRuLWJvcmRlci1yYWRpdXM6IDEwMHB4O1xufVxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bjpkaXNhYmxlZCwgLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bltkaXNhYmxlZF0ge1xuICBvcGFjaXR5OiAxICFpbXBvcnRhbnQ7XG59Il19 */";
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3RoZW1lcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1QkFFRSxZQUFBLENBREEsVUNFRixDRENFLDZDQUdFLDJDQUFBLENBREEseUJBQUEsQ0FEQSxXQ0dKLENEQ0ksMEJBTEYsNkNBTUksV0NFSixDQUNGLENEREksMEJBUkYsNkNBU0ksV0NJSixDQUNGLENERkksMkVBRUUsa0JBQUEsQ0FEQSxnQkNLTixDRERJLDJFQUNFLDBCQUFBLENBQ0EsZUNHTixDREFRLDRJQUNFLFlDRVYsQ0RJRSxzREFHRSxXQUFBLENBREEseUJBQUEsQ0FEQSxpQkNBSixDRE1BLDhDQUNFLG9EQUFBLENBQ0EseURDSEYsQ0RNQSxzQ0FDRSx1REFBQSxDQUNBLDREQ0hGLENETUEsZ0RBQ0Usb0RBQUEsQ0FDQSx5RENIRixDRE1BLHlDQUNFLDZCQUFBLENBQ0Esa0NDSEYsQ0RJRSxxR0FFRSxtQkNISiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by10aGVtZXNfX3dyYXBwZXIge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcblxuICAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtc207XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG5cbiAgICBAc2NyZWVuIGxnIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtbGc7XG4gICAgfVxuICAgIEBzY3JlZW4geGwge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC14bDtcbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA4cHg7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTIwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcblxuICAgICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyX190YXJnZXQge1xuICAgICAgICAubmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0X19jb2RlIHtcbiAgICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm5lZXRvLXRoZW1lcy1wcmV2aWV3X193cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgZmxleC1ncm93OiAxO1xuICB9XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNDAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG4ge1xuICAtLW5lZXRvLXVpLWJ0bi1wYWRkaW5nLXg6IDEycHg7XG4gIC0tbmVldG8tdWktYnRuLWJvcmRlci1yYWRpdXM6IDEwMHB4O1xuICAmOmRpc2FibGVkLFxuICAmW2Rpc2FibGVkXSB7XG4gICAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gIHdpZHRoOiAyNDBweDtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gNjRweCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xufVxuQHNjcmVlbiBsZyB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogMjgwcHg7XG4gIH1cbn1cbkBzY3JlZW4geGwge1xuICAubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gICAgd2lkdGg6IDMyMHB4O1xuICB9XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gIHBhZGRpbmctdG9wOiAxNnB4O1xuICBwYWRkaW5nLWJvdHRvbTogOHB4O1xufVxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAxMjBweCk7XG4gIG92ZXJmbG93LXk6IGF1dG87XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX3Njcm9sbCAubmVldG8tdWktY29sb3JwaWNrZXJfX3RhcmdldCAubmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0X19jb2RlIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1wcmV2aWV3X193cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSA2NHB4KTtcbiAgZmxleC1ncm93OiAxO1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWhpZ2hsaWdodC1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS00MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fYXBwbHktYnRuIHtcbiAgLS1uZWV0by11aS1idG4tcGFkZGluZy14OiAxMnB4O1xuICAtLW5lZXRvLXVpLWJ0bi1ib3JkZXItcmFkaXVzOiAxMDBweDtcbn1cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG46ZGlzYWJsZWQsIC5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG5bZGlzYWJsZWRdIHtcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xufSJdfQ== */";
 n(css,{});
 exports.NeetoThemesBuilder = index;