@bigbinary/neeto-themes-frontend 1.2.2 → 1.2.4

package/app/javascript/src/translations/en.json

@@ -53,7 +53,7 @@
             "primary": "Primary",
             "secondary": "Secondary"
           },
-          "notAppliedYet": "This theme is <bold>not yet applied</bold> to this {{entityType, anyCase}}.",
+          "notAppliedYet": "This theme is <bold>not yet applied</bold> to this {{entityType}}.",
           "editTheme": {
             "title": "Edit theme",
             "imageUpload": "Drag and drop or <span>Browse</span> a file"

package/dist/index.cjs.js

@@ -12,9 +12,9 @@ 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('react-query');
 var axios = require('axios');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -30,8 +30,8 @@ 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 ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var antd = require('antd');
 var Switch = require('@bigbinary/neetoui/Switch');
 var Input = require('@bigbinary/neetoui/formik/Input');
@@ -62,6 +62,9 @@ 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);
@@ -70,8 +73,8 @@ 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 ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
@@ -100,6 +103,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({
@@ -238,6 +287,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);
     }
@@ -424,6 +475,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),
@@ -436,6 +493,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;
       }
@@ -453,23 +516,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)));
@@ -497,6 +563,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"
@@ -504,6 +596,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,
@@ -511,22 +604,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)),
@@ -537,12 +681,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);
+        }
+      })]
     })]
   });
 };
@@ -559,6 +716,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
       })
@@ -566,6 +724,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: neetoIcons.LeftAlign,
+            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: neetoIcons.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,
@@ -625,32 +831,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,
@@ -697,17 +877,16 @@ var SwitchBlock = function SwitchBlock(_ref) {
   });
 };
 
-var Properties = function Properties() {
+var Properties = function Properties(_ref) {
+  var onPropertiesChange = _ref.onPropertiesChange;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        themePropertiesSchema: store["themePropertiesSchema"],
-        onPropertiesChange: store["onPropertiesChange"]
+        themePropertiesSchema: store["themePropertiesSchema"]
       };
     }, shallow.shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
-    onPropertiesChange = _useConfigStore.onPropertiesChange;
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -721,9 +900,9 @@ var Properties = function Properties() {
     setVariable = _useThemeUtils.setVariable,
     setTheme = _useThemeUtils.setTheme;
   var handleColorChange = function handleColorChange(name) {
-    return function (_ref) {
-      var hex = _ref.hex,
-        rgb = _ref.rgb;
+    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));
     };
   };
@@ -748,7 +927,7 @@ var Properties = function Properties() {
     }
   };
   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
@@ -760,38 +939,53 @@ var Properties = function Properties() {
       className: "divide-y divide-gray-200",
       children: [neetoCist.filterBy({
         kind: "font_family"
-      }, values.properties).map(function (_ref2) {
-        var key = _ref2.key,
-          value = _ref2.value,
-          kind = _ref2.kind;
+      }, values.properties).map(function (_ref3) {
+        var key = _ref3.key,
+          value = _ref3.value,
+          kind = _ref3.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(FontPickerBlock, {
           label: buildLabel(key, kind),
           options: FONT_OPTIONS,
           value: neetoCist.findBy({
             value: value || null
           }, FONT_OPTIONS),
-          onChange: function onChange(_ref3) {
-            var value = _ref3.value;
+          onChange: function onChange(_ref4) {
+            var value = _ref4.value;
             handleChange(key, value);
           }
         }, key);
       }), neetoCist.filterBy({
         kind: "color"
-      }, values.properties).map(function (_ref4) {
-        var key = _ref4.key,
-          value = _ref4.value,
-          kind = _ref4.kind;
+      }, values.properties).map(function (_ref5) {
+        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),
           onChange: handleColorChange(key)
         }, key);
+      }), neetoCist.filterBy({
+        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 (_ref5) {
-        var key = _ref5.key,
-          value = _ref5.value,
-          kind = _ref5.kind;
+      }, 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,
@@ -804,11 +998,11 @@ var Properties = function Properties() {
         }, key);
       }), neetoCist.filterBy({
         kind: "position_selector"
-      }, values.properties).map(function (_ref6) {
+      }, values.properties).map(function (_ref8) {
         var _findBy;
-        var key = _ref6.key,
-          kind = _ref6.kind,
-          value = _ref6.value;
+        var key = _ref8.key,
+          kind = _ref8.kind,
+          value = _ref8.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
@@ -826,10 +1020,10 @@ var Properties = function Properties() {
         }, key);
       }), neetoCist.filterBy({
         kind: "boolean"
-      }, values.properties).map(function (_ref7) {
-        var key = _ref7.key,
-          kind = _ref7.kind,
-          value = _ref7.value;
+      }, values.properties).map(function (_ref9) {
+        var key = _ref9.key,
+          kind = _ref9.kind,
+          value = _ref9.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
@@ -840,6 +1034,18 @@ var Properties = function Properties() {
             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")
+        });
       })]
     })
   });
@@ -864,7 +1070,8 @@ var Customize = function Customize(_ref) {
     theme = _ref.theme,
     onCreateTheme = _ref.onCreateTheme,
     onApplyTheme = _ref.onApplyTheme,
-    isApplyingTheme = _ref.isApplyingTheme;
+    isApplyingTheme = _ref.isApplyingTheme,
+    onPropertiesChange = _ref.onPropertiesChange;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = react.useState({}),
@@ -928,7 +1135,9 @@ var Customize = function Customize(_ref) {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-col gap-6 p-4",
-          children: [/*#__PURE__*/jsxRuntime.jsx(ThemeMeta, {}), /*#__PURE__*/jsxRuntime.jsx(Properties, {}), neetoCist.filterBy({
+          children: [/*#__PURE__*/jsxRuntime.jsx(ThemeMeta, {}), /*#__PURE__*/jsxRuntime.jsx(Properties, {
+            onPropertiesChange: onPropertiesChange
+          }), neetoCist.filterBy({
             kind: "image"
           }, themePropertiesSchema).map(function (_ref5) {
             var key = _ref5.key;
@@ -1473,7 +1682,8 @@ 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 thumbnail = _ref.thumbnail;
+  var thumbnail = _ref.thumbnail,
+    onPropertiesChange = _ref.onPropertiesChange;
   var _useState = react.useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     currentScreen = _useState2[0],
@@ -1641,6 +1851,7 @@ var Sidebar = function Sidebar(_ref) {
       isApplyingTheme: isApplyingTheme,
       onApplyTheme: onApplyTheme,
       onCreateTheme: onCreateTheme,
+      onPropertiesChange: onPropertiesChange,
       theme: themeToEdit.current,
       themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
     }), /*#__PURE__*/jsxRuntime.jsx(MemoizedAlert, {
@@ -1679,13 +1890,13 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   react.useEffect(function () {
     setConfigState({
       entityType: entityType,
-      entityId: entityId,
-      onPropertiesChange: onPropertiesChange
+      entityId: entityId
     });
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsxRuntime.jsx(Sidebar, {
+      onPropertiesChange: onPropertiesChange,
       thumbnail: thumbnail
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-themes-preview__wrapper",