@bigbinary/neeto-themes-frontend 4.0.25 → 4.0.27

package/dist/cjs/NeetoThemesBuilder.js

@@ -1,68 +1,2559 @@
 'use strict';
 
-require('zustand/shallow');
-require('react');
-require('@bigbinary/neeto-cist');
-require('@bigbinary/neeto-commons-frontend/react-utils');
-require('@bigbinary/neetoui/Spinner');
-require('react-i18next');
-require('../index-BUeeI0XI.js');
-var NeetoThemesBuilder = require('../index-CSuzzSza.js');
-require('../useExpandedSection-GpzbAxmE.js');
-require('react/jsx-runtime');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/regenerator');
-require('@bigbinary/neetoui/Toastr');
+var shallow = require('zustand/shallow');
+var react = require('react');
+var neetoCist = require('@bigbinary/neeto-cist');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var reactI18next = require('react-i18next');
+var utils = require('../index-BUeeI0XI.js');
+var useGlobalThemesApi = require('../useGlobalThemesApi-DOH4EK5Q.js');
+var useExpandedSection = require('../useExpandedSection-GpzbAxmE.js');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var classnames = require('classnames');
+var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
+var Collapse = require('@bigbinary/neeto-icons/Collapse');
+var Alert = require('@bigbinary/neetoui/Alert');
+var Button = require('@bigbinary/neetoui/Button');
+var reactRouterDom = require('react-router-dom');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var Close = require('@bigbinary/neeto-icons/Close');
+var ramda = require('ramda');
+var Popover = require('@bigbinary/neetoui/Popover');
+var Typography = require('@bigbinary/neetoui/Typography');
+var Switch = require('@bigbinary/neetoui/Switch');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var Form = require('@bigbinary/neetoui/formik/Form');
+var BlockNavigation = require('@bigbinary/neetoui/formik/BlockNavigation');
+var formik = require('formik');
+var jsxRuntime = require('react/jsx-runtime');
+var i18n = require('i18next');
+var Right = require('@bigbinary/neeto-icons/Right');
+var Left = require('@bigbinary/neeto-icons/Left');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var reactDom = require('react-dom');
+var Radio = require('@bigbinary/neetoui/formik/Radio');
+var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
+var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
+var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
+var Select = require('@bigbinary/neetoui/Select');
+var antd = require('antd');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var Help = require('@bigbinary/neeto-icons/Help');
+var Checkbox = require('@bigbinary/neetoui/Checkbox');
+var Modal = require('@bigbinary/neetoui/Modal');
+var Input = require('@bigbinary/neetoui/Input');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var Input$1 = require('@bigbinary/neetoui/formik/Input');
+var Search = require('@bigbinary/neeto-molecules/Search');
+var AddImage = require('@bigbinary/neeto-icons/AddImage');
+var CodeBlock = require('@bigbinary/neeto-icons/CodeBlock');
+var ColorPicker$1 = require('@bigbinary/neeto-icons/ColorPicker');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var RightArrow = require('@bigbinary/neeto-icons/RightArrow');
+var Search$1 = require('@bigbinary/neeto-icons/Search');
 require('@tanstack/react-query');
 require('axios');
-require('@babel/runtime/helpers/slicedToArray');
-require('i18next');
-require('classnames');
-require('@bigbinary/neeto-commons-frontend/utils');
-require('@bigbinary/neeto-icons/Collapse');
-require('@bigbinary/neetoui/Alert');
-require('@bigbinary/neetoui/Button');
-require('react-router-dom');
-require('@babel/runtime/helpers/defineProperty');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@bigbinary/neeto-icons/Close');
-require('ramda');
-require('@bigbinary/neetoui/Popover');
-require('@bigbinary/neetoui/Typography');
-require('@bigbinary/neetoui/Switch');
-require('@bigbinary/neetoui/Tooltip');
-require('@bigbinary/neetoui/formik/Form');
-require('@bigbinary/neetoui/formik/BlockNavigation');
-require('formik');
-require('@bigbinary/neeto-icons/Right');
-require('@bigbinary/neeto-icons/Left');
-require('@bigbinary/neeto-molecules/HelpPopover');
-require('@babel/runtime/helpers/toConsumableArray');
-require('react-dom');
-require('@bigbinary/neetoui/formik/Radio');
-require('@bigbinary/neeto-icons/CenterAlign');
-require('@bigbinary/neeto-icons/LeftAlign');
-require('@bigbinary/neetoui/ColorPicker');
-require('@bigbinary/neetoui/Select');
-require('antd');
-require('@bigbinary/neeto-icons/Help');
-require('@bigbinary/neetoui/Checkbox');
-require('@bigbinary/neetoui/Modal');
-require('@bigbinary/neetoui/Input');
-require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
-require('@bigbinary/neetoui/formik/Input');
-require('@bigbinary/neeto-molecules/Search');
-require('@bigbinary/neeto-icons/AddImage');
-require('@bigbinary/neeto-icons/CodeBlock');
-require('@bigbinary/neeto-icons/ColorPicker');
-require('@bigbinary/neeto-molecules/MoreDropdown');
-require('@bigbinary/neeto-icons/LeftArrow');
-require('@bigbinary/neeto-icons/RightArrow');
-require('@bigbinary/neeto-icons/Search');
 require('zustand');
 require('yup');
 
+var DESIGN_SCREENS = {
+  THEMES: "Themes",
+  Customize: "Customize",
+  CustomCSS: "CustomCSS"
+};
+var ONE_MEGABYTE = 1;
 
+var MonacoEditor = /*#__PURE__*/react.lazy(function () {
+  return import('@monaco-editor/react');
+});
+var Editor = function Editor(_ref) {
+  var value = _ref.value,
+    isCustomCssScreen = _ref.isCustomCssScreen,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+    fallback: /*#__PURE__*/jsxRuntime.jsx(Spinner, {}),
+    children: /*#__PURE__*/jsxRuntime.jsx(MonacoEditor, {
+      onChange: onChange,
+      value: value,
+      language: "css",
+      theme: "vs-dark",
+      className: classnames({
+        rounded: true,
+        "css-editor-height__expanded": isCustomCssScreen,
+        "css-editor-height__regular": !isCustomCssScreen
+      }),
+      options: {
+        scrollBeyondLastLine: false,
+        minimap: {
+          enabled: false
+        }
+      }
+    })
+  });
+};
 
-module.exports = NeetoThemesBuilder.NeetoThemesBuilder;
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Card$2 = function Card(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    children = _ref.children,
+    name = _ref.name,
+    className = _ref.className,
+    helpPopoverProps = _ref.helpPopoverProps,
+    required = _ref.required;
+  var _useExpandedSection = useExpandedSection.useExpandedSection(),
+    expandedSection = _useExpandedSection.expandedSection,
+    setExpandedSection = _useExpandedSection.setExpandedSection;
+  var isOpen = expandedSection === name;
+  var isRTL = i18n.dir() === "rtl";
+  var ToggleIcon = isRTL ? Left : Right;
+  var handleToggle = function handleToggle() {
+    return setExpandedSection(isOpen ? "" : name);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    "data-testid": "theme-".concat(neetoCist.hyphenate(title), "-properties"),
+    className: classnames("neeto-themes-nano-section neeto-ui-border-gray-200 border-b pt-2 transition-all duration-300 last:border-none", className, {
+      "pb-2": !isOpen,
+      "pb-3": isOpen
+    }),
+    children: [title && /*#__PURE__*/jsxRuntime.jsxs("button", {
+      className: "neeto-themes-nano-section__title flex w-full cursor-pointer items-center justify-between px-1 py-2 focus:outline-none",
+      type: "button",
+      onClick: handleToggle,
+      children: [/*#__PURE__*/jsxRuntime.jsxs(Typography, {
+        className: "flex min-w-0 grow items-center gap-2 text-start",
+        component: "span",
+        "data-testid": "theme-properties",
+        lineHeight: "normal",
+        style: "h4",
+        weight: "semibold",
+        children: [title, required && /*#__PURE__*/jsxRuntime.jsx("span", {
+          "aria-hidden": true,
+          className: "-ms-1",
+          children: "*"
+        }), neetoCist.isPresent(helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread$4({}, helpPopoverProps))]
+      }), /*#__PURE__*/jsxRuntime.jsx(ToggleIcon, {
+        size: 20,
+        className: classnames("transition-all duration-300", {
+          "rotate-90 rtl:-rotate-90": isOpen
+        })
+      })]
+    }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames("neeto-themes-nano-section__content w-full space-y-3 overflow-hidden px-1 transition-all duration-300", {
+        "neeto-themes-nano-section__content--closed": !isOpen,
+        "neeto-themes-nano-section__content--open pb-1": isOpen
+      }),
+      children: children
+    })]
+  });
+};
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var isScreenCustomCSS = function isScreenCustomCSS(screen) {
+  return screen === DESIGN_SCREENS.CustomCSS;
+};
+var buildPathname = function buildPathname(route) {
+  var pathname = "";
+  var _iterator = _createForOfIteratorHelper(location.pathname.split("/")),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var segment = _step.value;
+      if (ramda.isEmpty(segment)) {
+        continue;
+      }
+      if (segment === "themes") {
+        break;
+      }
+      pathname += "/".concat(segment);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return "".concat(pathname).concat(route);
+};
+
+// FLIP: measure each theme card's position, apply the React update, then
+// transform every card back to its old spot and let a CSS transition glide
+// it to the new one. The animation itself is CSS (.neeto-themes-flip-animating).
+var animateThemeReorder = function animateThemeReorder(updateFn) {
+  var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  var cards = _toConsumableArray(document.querySelectorAll("[data-flip-id]"));
+  var scrollContainer = document.querySelector(".neeto-themes-sidebar__scroll");
+  if (prefersReducedMotion || cards.length === 0) {
+    updateFn();
+    if (scrollContainer) scrollContainer.scrollTop = 0;
+    return;
+  }
+  var oldRects = new Map(cards.map(function (card) {
+    return [card.dataset.flipId, card.getBoundingClientRect()];
+  }));
+  reactDom.flushSync(updateFn);
+
+  // Move the viewport to the top — the applied theme is now the first card.
+  // The FLIP deltas below are measured after this, so the scroll is folded
+  // into the glide instead of showing as an instant jump.
+  if (scrollContainer) scrollContainer.scrollTop = 0;
+  var flips = _toConsumableArray(document.querySelectorAll("[data-flip-id]")).map(function (card) {
+    var oldRect = oldRects.get(card.dataset.flipId);
+    if (!oldRect) return null;
+    var newRect = card.getBoundingClientRect();
+    var dx = oldRect.left - newRect.left;
+    var dy = oldRect.top - newRect.top;
+    return dx || dy ? {
+      card: card,
+      dx: dx,
+      dy: dy
+    } : null;
+  }).filter(Boolean);
+  if (flips.length === 0) return;
+  flips.forEach(function (_ref) {
+    var card = _ref.card,
+      dx = _ref.dx,
+      dy = _ref.dy;
+    card.style.transform = "translate(".concat(dx, "px, ").concat(dy, "px)");
+  });
+
+  // Force a reflow so the starting transform is committed before animating.
+  document.body.offsetHeight;
+  flips.forEach(function (_ref2) {
+    var card = _ref2.card;
+    card.classList.add("neeto-themes-flip-animating");
+    card.style.transform = "";
+    card.addEventListener("transitionend", function () {
+      card.classList.remove("neeto-themes-flip-animating");
+    }, {
+      once: true
+    });
+  });
+};
+
+var CustomCSS = function CustomCSS(_ref) {
+  var onEditCSSClick = _ref.onEditCSSClick,
+    currentScreen = _ref.currentScreen,
+    isEnabled = _ref.isEnabled,
+    isProFeature = _ref.isProFeature;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"],
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow.shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$cus = helpPopoverProps.customCss,
+    customCssHelpPopoverProps = _helpPopoverProps$cus === void 0 ? {} : _helpPopoverProps$cus;
+  var _useExpandedSection = useExpandedSection.useExpandedSection(),
+    expandedSection = _useExpandedSection.expandedSection;
+  var isExpanded = expandedSection === "customcss";
+  var customCSS = neetoCist.findBy({
+    kind: "custom_css"
+  }, values.properties);
+  if (!customCSS || !isEnabled && !isProFeature) return null;
+  var parentElementClass = neetoCist.findBy({
+    kind: "custom_css"
+  }, themePropertiesSchema).parentClass;
+  var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  var handleEditorToggle = function handleEditorToggle() {
+    if (!isCustomCssScreen) return onEditCSSClick(DESIGN_SCREENS.CustomCSS);
+    onEditCSSClick(DESIGN_SCREENS.Customize);
+    return setTimeout(function () {
+      utils.scrollElementIntoView("css-editor");
+    }, 400);
+  };
+  var handleChange = function handleChange(value) {
+    var index = neetoCist.findIndexBy({
+      key: customCSS.key
+    }, values.properties);
+    if (index !== -1 && values.properties[index].value !== value) {
+      setFieldValue("properties[".concat(index, "].value"), value);
+      utils.setCustomCSS({
+        css: value,
+        elementId: customCSS.key,
+        parentElementClass: parentElementClass
+      });
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "neeto-themes-sidebar__custom-css-wrapper",
+    id: "css-editor",
+    children: /*#__PURE__*/jsxRuntime.jsx(Card$2, {
+      name: "customcss",
+      helpPopoverProps: isEnabled ? customCssHelpPopoverProps : {
+        title: t("neetoThemes.common.proFeature.customCSS.title"),
+        description: t("neetoThemes.common.proFeature.customCSS.description")
+      },
+      title: isCustomCssScreen ? "" : t("neetoThemes.build.leftSideBar.themes.customCSS"),
+      children: isEnabled ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "w-full",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-themes-sidebar__custom-css-editor-header w-full justify-end gap-1 rounded-b-none p-2",
+          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+            size: "small",
+            style: "secondary",
+            label: isCustomCssScreen ? t("neetoThemes.buttons.minimizeEditor") : t("neetoThemes.buttons.expandEditor"),
+            onClick: handleEditorToggle
+          })
+        }), isExpanded && /*#__PURE__*/jsxRuntime.jsx(Editor, {
+          isCustomCssScreen: isCustomCssScreen,
+          value: customCSS.value,
+          onChange: handleChange
+        })]
+      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "px-1 py-2",
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          lineHeight: "normal",
+          style: "body2",
+          children: t("neetoThemes.common.proFeature.customCSS.description")
+        })
+      })
+    })
+  });
+};
+
+var LogoPosition = function LogoPosition() {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values;
+  var index = neetoCist.findIndexBy({
+    key: "logo_position"
+  }, values.properties);
+  // Do not show this field if the logo_position property is not present.
+  if (index === -1) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(Radio, {
+    stacked: true,
+    name: "properties[".concat(index, "].value"),
+    label: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      className: "my-3",
+      component: "span",
+      style: "body2",
+      weight: "semibold",
+      children: t("neetoThemes.build.leftSideBar.themes.logoPosition.title")
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
+      value: "over_left",
+      label: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "flex flex-col gap-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          component: "span",
+          style: "body2",
+          weight: "semibold",
+          children: t("neetoThemes.build.leftSideBar.themes.logoPosition.overLeft")
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          component: "span",
+          style: "body3",
+          weight: "normal",
+          children: t("neetoThemes.build.leftSideBar.themes.logoPosition.overLeftDescription")
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
+      value: "below_left",
+      label: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "flex flex-col gap-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          component: "span",
+          style: "body2",
+          weight: "semibold",
+          children: t("neetoThemes.build.leftSideBar.themes.logoPosition.belowLeft")
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          component: "span",
+          style: "body3",
+          weight: "normal",
+          children: t("neetoThemes.build.leftSideBar.themes.logoPosition.belowLeftDescription")
+        })]
+      })
+    })]
+  });
+};
+
+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), true).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; }
+
+// Capitalizes the first letter of the displayed label while keeping the
+// underlying value untouched (position values like "top left" are used
+// verbatim as CSS background-position, so they must stay lowercase).
+var toCapitalizedOption = function toCapitalizedOption(value) {
+  var _toLabelAndValue = neetoCist.toLabelAndValue(value),
+    label = _toLabelAndValue.label,
+    optionValue = _toLabelAndValue.value;
+  return {
+    label: label ? neetoCist.capitalize(label) : label,
+    value: optionValue
+  };
+};
+var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
+  if (neetoCist.isPresent(theme)) return theme;
+  return {
+    name: i18n.t("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
+    properties: themePropertiesSchema.map(function (_ref) {
+      var key = _ref.key,
+        kind = _ref.kind,
+        defaultValue = _ref.defaultValue,
+        _ref$order = _ref.order,
+        order = _ref$order === void 0 ? null : _ref$order,
+        dependsOn = _ref.dependsOn;
+      switch (kind) {
+        case "text_input":
+          return _objectSpread$3({
+            value: defaultValue || "",
+            kind: "text_input",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "color":
+          return _objectSpread$3({
+            value: defaultValue,
+            kind: "color",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "font_family":
+          return _objectSpread$3({
+            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,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "overlay_opacity":
+          return _objectSpread$3({
+            value: 0,
+            kind: "overlay_opacity",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "slider":
+          return _objectSpread$3({
+            value: 0,
+            kind: "slider",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "radius":
+          return _objectSpread$3({
+            value: defaultValue,
+            kind: "radius",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "boolean":
+          return _objectSpread$3({
+            value: String(defaultValue),
+            kind: "boolean",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "order_selector":
+          return _objectSpread$3({
+            value: defaultValue,
+            kind: "order_selector",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "alignment_block":
+          return _objectSpread$3({
+            value: defaultValue,
+            kind: "alignment_block",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "custom_css":
+          return _objectSpread$3({
+            value: defaultValue,
+            kind: "custom_css",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        case "logo_position":
+          return _objectSpread$3({
+            value: defaultValue,
+            kind: "logo_position",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
+        default:
+          return null;
+      }
+    }).filter(neetoCist.isNot(null))
+  };
+};
+var buildImageData = function buildImageData(values, themePropertiesSchema) {
+  return neetoCist.filterBy({
+    kind: "image"
+  }, themePropertiesSchema).reduce(function (acc, item) {
+    var _values$snakeToCamelC;
+    var signedId = (_values$snakeToCamelC = values[neetoCist.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 = 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 dependentPropertySchema = neetoCist.findBy({
+    key: conditionalKey
+  }, themePropertiesSchema);
+  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(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
+};
+var buildLabel = function buildLabel(key, kind) {
+  return i18n.t("neetoThemes.properties.".concat(neetoCist.snakeToCamelCase(kind), ".").concat(neetoCist.snakeToCamelCase(key)));
+};
+var buildProperties = function buildProperties(values, condition, themePropertiesSchema) {
+  values.forEach(function (value) {
+    themePropertiesSchema.forEach(function (theme) {
+      if (!(value.key === theme.key)) return;
+      value.dependsOn = theme.dependsOn;
+    });
+  });
+  if (condition) {
+    return neetoCist.filterBy({
+      dependsOn: condition
+    }, values);
+  }
+  var imageKeys = new Set();
+  neetoCist.filterBy({
+    kind: "image"
+  }, themePropertiesSchema).forEach(function (ele) {
+    return imageKeys.add(ele.key);
+  });
+  return values === null || values === void 0 ? void 0 : values.filter(function (_ref2) {
+    var dependsOn = _ref2.dependsOn;
+    return !imageKeys.has(dependsOn);
+  });
+};
+
+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",
+    "data-testid": utils$1.joinHyphenCase(label),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      "data-testid": "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: "neeto-ui-border-gray-300 neeto-themes-nano-alignment-block flex items-center border",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+            className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-left",
+            "data-testid": "alignment-left",
+            size: "medium",
+            style: value === "left" ? "primary" : "text",
+            icon: function icon() {
+              return /*#__PURE__*/jsxRuntime.jsx(LeftAlign, {
+                size: 20,
+                className: classnames({
+                  rounded: true,
+                  "neeto-ui-text-primary-800": value === "left",
+                  "neeto-ui-text-gray-600": value !== "left"
+                })
+              });
+            },
+            tooltipProps: {
+              content: "Left align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "left");
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "neeto-themes-nano-alignment-divider"
+          }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+            className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-center",
+            "data-testid": "alignment-center",
+            size: "medium",
+            style: value === "center" ? "primary" : "text",
+            icon: function icon() {
+              return /*#__PURE__*/jsxRuntime.jsx(CenterAlign, {
+                size: 20,
+                className: classnames({
+                  rounded: true,
+                  "neeto-ui-text-primary-800": value === "center",
+                  "neeto-ui-text-gray-600": value !== "center"
+                })
+              });
+            },
+            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__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(ColorPicker, {
+      color: color,
+      onChange: onChange,
+      showTransparencyControl: showTransparencyControl,
+      showEyeDropper: true,
+      size: "medium"
+    })]
+  });
+};
+
+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), true).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 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__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsxRuntime.jsx(Select, {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value,
+        menuPosition: "fixed",
+        styles: {
+          option: function option(styles, _ref2) {
+            var data = _ref2.data;
+            return _objectSpread$2(_objectSpread$2({}, styles), {}, {
+              fontFamily: data.value
+            });
+          }
+        }
+      })
+    })]
+  });
+};
+
+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: "neeto-ui-border-gray-200 flex flex-col gap-2 border-t pt-3",
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      "data-testid": "logo-field-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(Select, {
+      onChange: onChange,
+      options: options,
+      placeholder: placeholder,
+      value: 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__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between gap-3",
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(antd.Slider, {
+      marks: marks,
+      max: max,
+      min: min,
+      onChange: onChange,
+      value: value,
+      className: "my-2 w-20",
+      tooltip: {
+        formatter: null
+      }
+    })]
+  });
+};
+
+var CONTENT_BACKGROUND_PROPERTY_NAME = "isContentBackgroundEnabled";
+var CONTENT_BACKGROUND_HELP_TRANSLATION_BASE_KEY = "neetoThemes.properties.boolean.contentBackgroundHelp";
+
+var ContentBackgroundHelpModal = function ContentBackgroundHelpModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    t = _ref.t;
+  return /*#__PURE__*/jsxRuntime.jsxs(Modal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    size: "large",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "h2",
+        children: t("".concat(CONTENT_BACKGROUND_HELP_TRANSLATION_BASE_KEY, ".title"))
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-themes-content-background-help-modal",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          lineHeight: "normal",
+          style: "body2",
+          children: t("".concat(CONTENT_BACKGROUND_HELP_TRANSLATION_BASE_KEY, ".description"))
+        }), /*#__PURE__*/jsxRuntime.jsxs("ol", {
+          className: "neeto-themes-content-background-help-modal__list",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("li", {
+            className: "neeto-themes-content-background-help-modal__section",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+              style: "h4",
+              children: t("".concat(CONTENT_BACKGROUND_HELP_TRANSLATION_BASE_KEY, ".notEnabledTitle"))
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "neeto-themes-content-background-help-modal__image neeto-themes-content-background-help-modal__image--disabled",
+              role: "img",
+              "aria-label": t("".concat(CONTENT_BACKGROUND_HELP_TRANSLATION_BASE_KEY, ".notEnabledImageAlt"))
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("li", {
+            className: "neeto-themes-content-background-help-modal__section",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+              style: "h4",
+              children: t("".concat(CONTENT_BACKGROUND_HELP_TRANSLATION_BASE_KEY, ".enabledTitle"))
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "neeto-themes-content-background-help-modal__image neeto-themes-content-background-help-modal__image--enabled",
+              role: "img",
+              "aria-label": t("".concat(CONTENT_BACKGROUND_HELP_TRANSLATION_BASE_KEY, ".enabledImageAlt"))
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+};
+var ContentBackgroundHelpModal$1 = reactUtils.withT(ContentBackgroundHelpModal);
+
+var _excluded = ["label", "name", "asCheckbox"];
+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), true).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 SwitchBlock = function SwitchBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    _ref$asCheckbox = _ref.asCheckbox,
+    asCheckbox = _ref$asCheckbox === void 0 ? false : _ref$asCheckbox,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isContentBackgroundHelpOpen = _useState2[0],
+    setIsContentBackgroundHelpOpen = _useState2[1];
+  var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
+  var doesHelpTextExist = i18n.exists(translationKey);
+  var shouldShowContentBackgroundHelp = name === CONTENT_BACKGROUND_PROPERTY_NAME;
+  var shouldShowHelpPopover = doesHelpTextExist && !shouldShowContentBackgroundHelp;
+  var shouldRenderAsCheckbox = asCheckbox || shouldShowContentBackgroundHelp;
+  var renderHelpIcon = function renderHelpIcon() {
+    if (shouldShowContentBackgroundHelp) {
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+          className: "neeto-themes-content-background-help-modal__trigger shrink-0",
+          "data-testid": "content-background-help-button",
+          icon: Help,
+          size: "small",
+          style: "text",
+          "aria-label": t("neetoThemes.properties.boolean.contentBackgroundHelp.title"),
+          onClick: function onClick() {
+            return setIsContentBackgroundHelpOpen(true);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(ContentBackgroundHelpModal$1, {
+          isOpen: isContentBackgroundHelpOpen,
+          onClose: function onClose() {
+            return setIsContentBackgroundHelpOpen(false);
+          }
+        })]
+      });
+    }
+    if (shouldShowHelpPopover) {
+      return /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+        className: "shrink-0",
+        description: t(translationKey)
+      });
+    }
+    return null;
+  };
+  if (shouldRenderAsCheckbox) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-testid": "theme-style-content-background",
+      className: classnames("flex items-center gap-2", {
+        "neeto-themes-content-background-checkbox-row": shouldShowContentBackgroundHelp
+      }),
+      children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
+        label: label,
+        name: name
+      }, inputProps)), {}, {
+        "data-testid": "enable-background-color-toggle"
+      })), renderHelpIcon()]
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-testid": "theme-style-content-background",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "inline-flex items-center gap-4",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        "data-testid": "style-fields-labels",
+        style: "body2",
+        className: classnames({
+          "w-32": doesHelpTextExist || shouldShowContentBackgroundHelp,
+          "w-auto": !doesHelpTextExist && !shouldShowContentBackgroundHelp
+        }),
+        children: label
+      }), renderHelpIcon()]
+    }), /*#__PURE__*/jsxRuntime.jsx(Switch, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
+      name: name
+    }, inputProps)), {}, {
+      "data-testid": "enable-background-color-toggle"
+    }))]
+  });
+};
+
+var TextBlock = function TextBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "text" : _ref$type,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    error = _ref.error;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+        error: error,
+        name: name,
+        onChange: onChange,
+        placeholder: placeholder,
+        type: type,
+        value: value
+      })
+    })]
+  });
+};
+
+var DependentPropertyConnector = function DependentPropertyConnector() {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", {
+    className: "neeto-themes-dependent-property__connector",
+    fill: "none",
+    height: "32",
+    viewBox: "0 0 36 32",
+    width: "36",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M4 1V22C4 25.5 7 28 13 28H34",
+      stroke: "rgb(var(--neeto-ui-gray-300))",
+      strokeLinecap: "round",
+      strokeWidth: "1.5"
+    })
+  });
+};
+var Properties = function Properties(_ref) {
+  var onPropertiesChange = _ref.onPropertiesChange,
+    condition = _ref.condition,
+    themeId = _ref.themeId;
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow.shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow.shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var _useFormikContext = formik.useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values,
+    errors = _useFormikContext.errors;
+  var _useThemeUtils = useExpandedSection.useThemeUtils(),
+    setVariable = _useThemeUtils.setVariable,
+    setTheme = _useThemeUtils.setTheme;
+  var handleColorChange = function handleColorChange(name) {
+    return function (_ref2) {
+      var hex = _ref2.hex,
+        rgb = _ref2.rgb;
+      if (name === "background_color") {
+        var _findBy, _values$backgroundIma;
+        var isDominantBackgroundColorEnabled = ((_findBy = neetoCist.findBy({
+          key: "is_dominant_background_color_enabled"
+        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) === "true";
+        var hasImageWithDominantColor = values === null || values === void 0 || (_values$backgroundIma = values.backgroundImage) === null || _values$backgroundIma === void 0 ? void 0 : _values$backgroundIma.dominantColor;
+        if (isDominantBackgroundColorEnabled && hasImageWithDominantColor) {
+          return;
+        }
+      }
+      handleChange(name, hex, "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a));
+    };
+  };
+  var handleChange = function handleChange(name, value, variableValue) {
+    var index = neetoCist.findIndexBy({
+      key: name
+    }, values.properties);
+    if (index !== -1 && values.properties[index].value !== value) {
+      setFieldValue("properties[".concat(index, "].value"), value);
+    }
+    setVariable(neetoCist.snakeToCamelCase(name), variableValue !== null && variableValue !== void 0 ? variableValue : value);
+  };
+  var handleOverlayChange = function handleOverlayChange(key, value) {
+    var index = neetoCist.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");
+    }
+  };
+  react.useEffect(function () {
+    if (!((values === null || values === void 0 ? void 0 : values.id) === themeId)) return;
+    onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
+    setTheme(values);
+    setThemeState({
+      previewingTheme: values
+    });
+  }, [values]);
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: buildProperties(values === null || values === void 0 ? void 0 : values.properties, condition, themePropertiesSchema).sort(function (a, b) {
+      var order = function order(key) {
+        var _findBy2;
+        return ((_findBy2 = neetoCist.findBy({
+          key: key
+        }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.order) || Infinity;
+      };
+      return order(a.key) - order(b.key);
+    }).map(function (_ref3) {
+      var key = _ref3.key,
+        value = _ref3.value,
+        kind = _ref3.kind;
+      var propertySchema = neetoCist.findBy({
+        key: key
+      }, themePropertiesSchema);
+      var isDependentProperty = Boolean(propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.dependsOn);
+      var wrapProperty = function wrapProperty(property) {
+        if (!isDependentProperty) return property;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "neeto-themes-dependent-property",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DependentPropertyConnector, {}), property]
+        }, key);
+      };
+      var isCurrentPropertyVisible = isPropertyVisible(key, values, themePropertiesSchema);
+      if (!isCurrentPropertyVisible) return null;
+      switch (kind) {
+        case "text_input":
+          {
+            var _errors$properties;
+            var index = neetoCist.findIndexBy({
+              key: key
+            }, values.properties);
+            var error = errors === null || errors === void 0 || (_errors$properties = errors.properties) === null || _errors$properties === void 0 || (_errors$properties = _errors$properties[index]) === null || _errors$properties === void 0 ? void 0 : _errors$properties.value;
+            return wrapProperty(/*#__PURE__*/react.createElement(TextBlock, {
+              error: error,
+              key: key,
+              label: buildLabel(key, kind),
+              name: "properties[".concat(index, "].value"),
+              value: value || "",
+              onChange: function onChange(e) {
+                return setFieldValue("properties[".concat(index, "].value"), e.target.value);
+              }
+            }));
+          }
+        case "font_family":
+          return wrapProperty(/*#__PURE__*/jsxRuntime.jsx(FontPickerBlock, {
+            label: buildLabel(key, kind),
+            options: useExpandedSection.FONT_OPTIONS,
+            value: neetoCist.findBy({
+              value: value || null
+            }, useExpandedSection.FONT_OPTIONS),
+            onChange: function onChange(_ref4) {
+              var value = _ref4.value;
+              return handleChange(key, value);
+            }
+          }, key));
+        case "color":
+          return wrapProperty(/*#__PURE__*/jsxRuntime.jsx(ColorBlock, {
+            color: value,
+            label: buildLabel(key, kind),
+            showTransparencyControl: (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.showTransparencyControl) || false,
+            onChange: handleColorChange(key)
+          }, key));
+        case "radius":
+          return wrapProperty(/*#__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));
+        case "overlay_opacity":
+          return wrapProperty(/*#__PURE__*/jsxRuntime.jsx(SliderBlock, {
+            label: buildLabel(key, kind),
+            marks: useExpandedSection.OVERLAY_OPACITY_SLIDER_MARKS,
+            max: useExpandedSection.HUNDRED,
+            min: ramda.negate(useExpandedSection.HUNDRED),
+            value: Number(value) || 0,
+            onChange: function onChange(opacity) {
+              return handleOverlayChange(key, opacity);
+            }
+          }, key));
+        case "position_selector":
+          {
+            var _findBy3;
+            var _index = neetoCist.findIndexBy({
+              key: key
+            }, values.properties);
+            var options = (_findBy3 = neetoCist.findBy({
+              key: key
+            }, themePropertiesSchema)) === null || _findBy3 === void 0 || (_findBy3 = _findBy3.options) === null || _findBy3 === void 0 ? void 0 : _findBy3.map(toCapitalizedOption);
+            return wrapProperty(/*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
+              label: buildLabel(key, kind),
+              options: options || useExpandedSection.POSITION_OPTIONS,
+              placeholder: "left",
+              value: toCapitalizedOption(value),
+              onChange: function onChange(option) {
+                return setFieldValue("properties[".concat(_index, "].value"), option.value);
+              }
+            }, key));
+          }
+        case "boolean":
+          {
+            var _index2 = neetoCist.findIndexBy({
+              key: key
+            }, values.properties);
+            var renderAsCheckbox = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.renderAsCheckbox) || false;
+            return wrapProperty(/*#__PURE__*/jsxRuntime.jsx(SwitchBlock, {
+              asCheckbox: renderAsCheckbox,
+              checked: value !== "false",
+              label: buildLabel(key, kind),
+              name: neetoCist.snakeToCamelCase(key),
+              onChange: function onChange(e) {
+                return setFieldValue("properties[".concat(_index2, "].value"), String(e.target.checked));
+              }
+            }, key));
+          }
+        case "alignment_block":
+          {
+            var _index3 = neetoCist.findIndexBy({
+              key: key
+            }, values.properties);
+            return wrapProperty(/*#__PURE__*/jsxRuntime.jsx(AlignmentBlock, {
+              label: buildLabel(key, kind),
+              name: "properties[".concat(_index3, "].value")
+            }, key));
+          }
+        default:
+          return null;
+      }
+    })
+  });
+};
+
+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,
+    defaultImageSize = _ref.defaultImageSize,
+    useDefaultImageSize = _ref.useDefaultImageSize,
+    fixedAspectRatio = _ref.fixedAspectRatio;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var _useConfigStore = useExpandedSection.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(/*#__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 (!(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 utils.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__*/jsxRuntime.jsxs("div", {
+    className: "space-y-3",
+    "data-testid": "theme-style-".concat(label ? utils$1.joinHyphenCase(label) : "image-block"),
+    children: [label && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-between",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        "data-testid": "style-fields-labels",
+        style: "body2",
+        children: label
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-3",
+      children: [/*#__PURE__*/react.createElement(ImageUploader, {
+        fixedAspectRatio: fixedAspectRatio,
+        uploadConfig: uploadConfig,
+        className: "h-40 w-full",
+        defaultImageSize: useDefaultImageSize ? defaultImageSize : {},
+        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 === null || options === void 0 ? void 0 : options.map(toCapitalizedOption)) || useExpandedSection.POSITION_OPTIONS,
+        placeholder: t("neetoThemes.common.left"),
+        value: toCapitalizedOption(((_findBy = neetoCist.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 _values$coverImage;
+  var attribute = _ref.attribute,
+    className = _ref.className,
+    onPropertiesChange = _ref.onPropertiesChange,
+    defaultImageSize = _ref.defaultImageSize,
+    useDefaultImageSize = _ref.useDefaultImageSize,
+    fixedAspectRatio = _ref.fixedAspectRatio;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values;
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow.shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var key = neetoCist.snakeToCamelCase(attribute);
+  var title = buildLabel(key, "image");
+  var imageData = values[key];
+  return /*#__PURE__*/jsxRuntime.jsxs(Card$2, {
+    className: className,
+    title: title,
+    helpPopoverProps: helpPopoverProps[key],
+    name: key,
+    children: [/*#__PURE__*/jsxRuntime.jsx(ImageBlock, {
+      attribute: attribute,
+      defaultImageSize: defaultImageSize,
+      fixedAspectRatio: fixedAspectRatio,
+      imageData: imageData,
+      useDefaultImageSize: useDefaultImageSize,
+      name: key
+    }), /*#__PURE__*/jsxRuntime.jsx(Properties, {
+      onPropertiesChange: onPropertiesChange,
+      condition: attribute
+    }), key === "logo" && ((_values$coverImage = values.coverImage) === null || _values$coverImage === void 0 ? void 0 : _values$coverImage.url) && /*#__PURE__*/jsxRuntime.jsx(LogoPosition, {})]
+  });
+};
+
+var ThemeMeta = function ThemeMeta(_ref) {
+  var className = _ref.className;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow.shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$nam = helpPopoverProps.name,
+    nameHelpPopoverProps = _helpPopoverProps$nam === void 0 ? {} : _helpPopoverProps$nam;
+  return /*#__PURE__*/jsxRuntime.jsx(Card$2, {
+    className: className,
+    required: true,
+    helpPopoverProps: nameHelpPopoverProps,
+    name: "name",
+    title: t("neetoThemes.common.name"),
+    children: /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+      autoFocus: true,
+      "data-testid": "theme-name-property",
+      name: "name"
+    })
+  });
+};
+
+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), true).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 Customize = function Customize(_ref) {
+  var theme = _ref.theme,
+    onCreateTheme = _ref.onCreateTheme,
+    onApplyTheme = _ref.onApplyTheme,
+    onUpdateTheme = _ref.onUpdateTheme,
+    isApplyingTheme = _ref.isApplyingTheme,
+    onPropertiesChange = _ref.onPropertiesChange,
+    defaultImageSize = _ref.defaultImageSize,
+    fixedAspectRatio = _ref.fixedAspectRatio,
+    onEditCSSClick = _ref.onEditCSSClick,
+    currentScreen = _ref.currentScreen;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  useExpandedSection.useSyncExpandedSectionFromUrl();
+  var history = reactRouterDom.useHistory();
+  var _useState = react.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverInstance = _useState2[0],
+    setPopoverInstance = _useState2[1];
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"],
+        entityType: store["entityType"],
+        isFetchingSchema: store["isFetchingSchema"],
+        helpPopoverProps: store["helpPopoverProps"],
+        enabledFeatures: store["enabledFeatures"],
+        proFeatures: store["proFeatures"]
+      };
+    }, shallow.shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    entityType = _useConfigStore.entityType,
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    helpPopoverProps = _useConfigStore.helpPopoverProps,
+    enabledFeatures = _useConfigStore.enabledFeatures,
+    proFeatures = _useConfigStore.proFeatures;
+  var _useParams = reactRouterDom.useParams(),
+    themeId = _useParams.themeId;
+  var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
+      return {
+        currentTheme: store["currentTheme"],
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow.shallow),
+    currentTheme = _useThemeStore.currentTheme,
+    setThemeState = _useThemeStore.setThemeState;
+  var _useShowGlobalTheme = useGlobalThemesApi.useShowGlobalTheme(entityType),
+    _useShowGlobalTheme$d = _useShowGlobalTheme.data,
+    _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
+    _useShowGlobalTheme$d3 = _useShowGlobalTheme$d2.globalTheme,
+    globalTheme = _useShowGlobalTheme$d3 === void 0 ? {} : _useShowGlobalTheme$d3;
+  var _useFetchTheme = useGlobalThemesApi.useFetchTheme(themeId, {
+      enabled: utils.isEditThemeRoute() && ramda.isNotNil(themeId),
+      initialData: theme !== null && theme !== void 0 ? theme : undefined
+    }),
+    _useFetchTheme$data = _useFetchTheme.data,
+    themeData = _useFetchTheme$data === void 0 ? {} : _useFetchTheme$data,
+    isLoadingTheme = _useFetchTheme.isLoadingTheme;
+  var isLoading = isFetchingSchema || isLoadingTheme;
+  var isThemeGlobalTheme = themeId && (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === themeId;
+  var isCurrentThemeAndGlobalThemeSame = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id);
+  var _helpPopoverProps$sty = helpPopoverProps.style,
+    styleHelpPopoverProps = _helpPopoverProps$sty === void 0 ? {} : _helpPopoverProps$sty;
+  var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+  var submitBtnRef = react.useRef(null);
+  var _useCreateTheme = useGlobalThemesApi.useCreateTheme(),
+    createTheme = _useCreateTheme.mutate,
+    isCreating = _useCreateTheme.isPending;
+  var _useUpdateTheme = useGlobalThemesApi.useUpdateTheme(themeId),
+    updateTheme = _useUpdateTheme.mutate,
+    isUpdating = _useUpdateTheme.isPending;
+  var isSubmitting = isCreating || isUpdating;
+  var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  var handleGlobalThemeSwitchChange = function handleGlobalThemeSwitchChange(e, setFieldValue) {
+    setFieldValue("shouldSetAsGlobalTheme", e.target.checked);
+  };
+  var onSubmit = function onSubmit(values, _ref2) {
+    var resetForm = _ref2.resetForm;
+    var imageData = buildImageData(values, themePropertiesSchema);
+    var themeToSave = _objectSpread({
+      propertiesAttributes: values.properties,
+      name: values.name,
+      shouldSetAsGlobalTheme: values.shouldSetAsGlobalTheme,
+      entityType: values.entityType
+    }, imageData);
+    if (!themeId) {
+      return createTheme(themeToSave, {
+        onSuccess: function onSuccess(_ref3) {
+          var theme = _ref3.theme;
+          resetForm({
+            values: theme
+          });
+          onCreateTheme(theme);
+          history.replace(utils$1.buildUrl(buildPathname(useGlobalThemesApi.routes.themes.edit), {
+            themeId: theme.id
+          }));
+        }
+      });
+    }
+    return updateTheme(themeToSave, {
+      onSuccess: function onSuccess(_ref4) {
+        var theme = _ref4.theme;
+        onUpdateTheme(theme);
+        resetForm({
+          values: theme
+        });
+      }
+    });
+  };
+  react.useEffect(function () {
+    if (ramda.isNotNil(themeId) && !isLoadingTheme) {
+      setThemeState({
+        previewingTheme: themeData
+      });
+    }
+  }, [isLoadingTheme]);
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Form, {
+    formikProps: {
+      initialValues: _objectSpread(_objectSpread({}, buildInitialValues(themeData, themePropertiesSchema)), {}, {
+        shouldSetAsGlobalTheme: isThemeGlobalTheme,
+        entityType: entityType
+      }),
+      validationSchema: useExpandedSection.THEME_VALIDATION_SCHEMA,
+      enableReinitialize: true,
+      onSubmit: onSubmit
+    },
+    children: function children(_ref5) {
+      var dirty = _ref5.dirty,
+        isValid = _ref5.isValid,
+        values = _ref5.values,
+        setFieldValue = _ref5.setFieldValue;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-themes-sidebar__scroll",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "neeto-themes-sidebar__scroll-content flex grow flex-col px-4 pb-4 lg:px-5",
+          children: [!isSubmitting && /*#__PURE__*/jsxRuntime.jsx(BlockNavigation, {}), /*#__PURE__*/jsxRuntime.jsx(ThemeMeta, {
+            className: classnames({
+              hidden: isCustomCssScreen
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Card$2, {
+            className: classnames({
+              hidden: isCustomCssScreen
+            }),
+            helpPopoverProps: styleHelpPopoverProps,
+            name: "style",
+            title: t("neetoThemes.common.style"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Properties, {
+              onPropertiesChange: onPropertiesChange,
+              themeId: themeId
+            })
+          }), neetoCist.filterBy({
+            kind: "image"
+          }, themePropertiesSchema).map(function (_ref6) {
+            var key = _ref6.key,
+              useDefaultImageSize = _ref6.useDefaultImageSize,
+              propertyDefaultSize = _ref6.defaultImageSize,
+              propertyFixedAspectRatio = _ref6.fixedAspectRatio;
+            return /*#__PURE__*/react.createElement(Images, _defineProperty({
+              fixedAspectRatio: fixedAspectRatio,
+              onPropertiesChange: onPropertiesChange,
+              useDefaultImageSize: useDefaultImageSize,
+              attribute: key,
+              className: classnames({
+                hidden: isCustomCssScreen
+              }),
+              defaultImageSize: propertyDefaultSize || defaultImageSize,
+              key: key
+            }, "fixedAspectRatio", propertyFixedAspectRatio || fixedAspectRatio));
+          }), /*#__PURE__*/jsxRuntime.jsx(CustomCSS, {
+            currentScreen: currentScreen,
+            onEditCSSClick: onEditCSSClick,
+            isEnabled: enabledFeatures.customCSS,
+            isProFeature: proFeatures.customCSS
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "neeto-ui-bg-gray-50 neeto-ui-border-gray-200 mt-2 flex flex-col space-y-2 border p-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+              disabled: !isThemeGlobalTheme,
+              content: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.tooltipContent"),
+              children: /*#__PURE__*/jsxRuntime.jsx(Switch, {
+                checked: values.shouldSetAsGlobalTheme,
+                disabled: isThemeGlobalTheme,
+                name: "shouldSetAsGlobalTheme",
+                label: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.label"),
+                onChange: function onChange(e) {
+                  return handleGlobalThemeSwitchChange(e, setFieldValue);
+                }
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+              className: "text-sm",
+              style: "body2",
+              children: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.helpText", {
+                entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
+                  count: 2
+                })
+              })
+            })]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 start-0 end-0 flex justify-end gap-x-2 px-4 py-6 lg:px-5 xl:px-6",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+            "data-testid": "reset-button",
+            disabled: !dirty || isSubmitting,
+            label: t("neetoThemes.buttons.reset"),
+            style: "text",
+            type: "reset"
+          }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+            "data-testid": "save-changes-button",
+            disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid,
+            label: t("neetoThemes.buttons.save"),
+            loading: isSubmitting,
+            ref: submitBtnRef,
+            type: "submit"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(Popover, {
+          appendTo: function appendTo() {
+            return document.body;
+          },
+          position: "top",
+          reference: submitBtnRef,
+          trigger: "click",
+          content: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col items-start gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+              className: "absolute end-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__*/jsxRuntime.jsx(Typography, {
+              className: "w-72 pe-5",
+              style: "body2",
+              weight: "normal",
+              children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+                components: {
+                  bold: /*#__PURE__*/jsxRuntime.jsx("strong", {})
+                },
+                i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
+                values: {
+                  entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
+                }
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+              disabled: isApplyingTheme,
+              label: t("neetoThemes.buttons.applyThisTheme"),
+              loading: isApplyingTheme,
+              onClick: function onClick() {
+                return onApplyTheme(themeData);
+              }
+            })]
+          }),
+          disabled: isEditingCurrentlyAppliedTheme || isCurrentThemeAndGlobalThemeSame && values.shouldSetAsGlobalTheme,
+          onMount: setPopoverInstance
+        })]
+      });
+    }
+  });
+};
+
+var QuickActionRow = function QuickActionRow(_ref) {
+  var Icon = _ref.icon,
+    label = _ref.label,
+    onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    onClick: onClick,
+    className: "neeto-ui-border-gray-100 hover:neeto-ui-bg-gray-100 flex w-full cursor-pointer items-center gap-3 border-t px-3 py-2 text-start transition-colors",
+    "data-testid": testId,
+    type: "button",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+      size: 16
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      lineHeight: "normal",
+      style: "body2",
+      children: label
+    })]
+  });
+};
+
+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 = useExpandedSection.useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow.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 = neetoCist.humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
+  var secondaryLabel = neetoCist.humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
+  var primaryColor = neetoCist.findBy({
+    key: colorObject1.key
+  }, theme.properties).value;
+  var secondaryColor = neetoCist.findBy({
+    key: colorObject2.key
+  }, theme.properties).value;
+  var backgroundImageUrl = (_theme$snakeToCamelCa = theme[neetoCist.snakeToCamelCase(neetoCist.findBy({
+    useAsCardBackground: true
+  }, themePropertiesSchema).key)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url;
+  var buttonBackgroundColor = (_findBy = neetoCist.findBy({
+    key: (_findBy2 = neetoCist.findBy({
+      useAsCardButtonBackground: true
+    }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
+  }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
+  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-ui-rounded-lg p-3",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "mb-3",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            style: "h3",
+            weight: "semibold",
+            children: /*#__PURE__*/jsxRuntime.jsx("span", {
+              style: {
+                color: primaryColor
+              },
+              children: primaryLabel
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: /*#__PURE__*/jsxRuntime.jsx("span", {
+              style: {
+                color: secondaryColor
+              },
+              children: secondaryLabel
+            })
+          })]
+        }), /*#__PURE__*/jsxRuntime.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,
+    isGlobalTheme = _ref.isGlobalTheme,
+    onApplyTheme = _ref.onApplyTheme,
+    Thumbnail$1 = _ref.thumbnail;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow.shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var id = theme.id,
+    name = theme.name;
+  var imageProperties = neetoCist.filterBy({
+    kind: "image"
+  }, themePropertiesSchema);
+  var handleDeleteTheme = function handleDeleteTheme() {
+    return onDeleteTheme(id, name);
+  };
+  var handleQuickEdit = function handleQuickEdit(section) {
+    return function (e) {
+      e.stopPropagation();
+      if (neetoCist.isPresent(onEditTheme)) onEditTheme(theme, section);else onCloneTheme(theme, section);
+    };
+  };
+  var showMoreDropdown = utils.isFunction(onDeleteTheme);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "group space-y-2 pt-0.5",
+    "data-flip-id": theme.id,
+    "data-testid": active ? "active-theme-card" : "theme-card",
+    id: theme.id,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg relative cursor-pointer border-2 transition-all duration-300 ease-in-out", {
+        "neeto-ui-border-gray-400": !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__*/jsxRuntime.jsxs("div", {
+        className: "neeto-ui-rounded-lg relative overflow-hidden rounded-bl-none rounded-br-none transition-all duration-300 ease-in-out",
+        children: [active ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-themes-theme-thumbnail__active-banner absolute start-0 top-0 z-10 w-full py-1 text-center text-xs font-semibold uppercase tracking-wide",
+          "data-testid": "active-theme-label",
+          children: t("neetoThemes.common.activeTheme")
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "absolute start-0 top-0 z-10 flex h-full w-full items-center justify-center px-3 pb-3 pt-3",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: classnames("-translate-y-9 flex w-full items-center justify-between gap-2", {
+              hidden: !isPreviewing,
+              "group-hover:flex": true
+            }),
+            children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+              "data-testid": "preview-theme-button",
+              disabled: isPreviewing,
+              label: t("neetoThemes.common.previewTheme"),
+              size: "medium",
+              style: "tertiary",
+              className: classnames({
+                "neeto-themes-theme-thumbnail__preview-btn--disabled opacity-100": isPreviewing,
+                "neeto-themes-theme-thumbnail__preview-btn shrink-0 justify-center": true
+              }),
+              onClick: function onClick() {
+                return onSetPreviewTheme(theme);
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+              className: "neeto-themes-theme-thumbnail__apply-btn shrink-0 justify-center",
+              "data-testid": "apply-theme-button",
+              disabled: isApplyingTheme,
+              label: t("neetoThemes.common.useTheme"),
+              loading: isApplyingTheme,
+              size: "medium",
+              style: "primary",
+              onClick: function onClick() {
+                return onApplyTheme(theme);
+              }
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-themes-theme-thumbnail__overlay w-full transition-all duration-300 ease-in-out",
+          children: Thumbnail$1 ? /*#__PURE__*/jsxRuntime.jsx(Thumbnail$1, {
+            active: active,
+            isHighLightedTheme: isHighLightedTheme,
+            isPreviewing: isPreviewing,
+            theme: theme
+          }) : /*#__PURE__*/jsxRuntime.jsx(Thumbnail, {
+            active: active,
+            isHighLightedTheme: isHighLightedTheme,
+            isPreviewing: isPreviewing,
+            theme: theme
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-ui-border-gray-100 flex items-start justify-between gap-1 border-t p-2",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center space-x-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-500 line-clamp-2 min-w-0 grow wrap-anywhere pt-1 italic",
+            "data-testid": "theme-name",
+            lineHeight: "snug",
+            style: "body2",
+            children: name
+          }), isGlobalTheme && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-500 shrink-0 pt-1 italic",
+            "data-testid": "default-theme-label",
+            lineHeight: "snug",
+            style: "body2",
+            children: t("neetoThemes.common.defaultTheme")
+          })]
+        }), showMoreDropdown && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+          dropdownButtonProps: {
+            size: "small"
+          },
+          dropdownProps: {
+            strategy: "fixed",
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
+          },
+          menuItems: [{
+            key: "delete",
+            "data-testid": "delete-theme-menu-item",
+            label: t("neetoThemes.build.leftSideBar.themes.themeOptions.delete"),
+            isDisabled: isApplyingTheme,
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              handleDeleteTheme();
+            }
+          }]
+        })]
+      }), active && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col",
+        children: [/*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
+          icon: ColorPicker$1,
+          label: t("neetoThemes.common.customizeStyle"),
+          testId: "quick-customize-style",
+          onClick: handleQuickEdit("style")
+        }), imageProperties.map(function (_ref2) {
+          var _theme$camelKey;
+          var key = _ref2.key;
+          var camelKey = neetoCist.snakeToCamelCase(key);
+          var hasImage = neetoCist.isPresent((_theme$camelKey = theme[camelKey]) === null || _theme$camelKey === void 0 ? void 0 : _theme$camelKey.url);
+          var action = hasImage ? "change" : "add";
+          var specificKey = "neetoThemes.common.".concat(action).concat(neetoCist.capitalize(camelKey));
+          return /*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
+            icon: AddImage,
+            label: t([specificKey, "neetoThemes.common.addImage"]),
+            testId: "quick-add-".concat(neetoCist.hyphenate(key)),
+            onClick: handleQuickEdit(camelKey)
+          }, key);
+        }), /*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
+          icon: CodeBlock,
+          label: t("neetoThemes.build.leftSideBar.themes.customCSS"),
+          testId: "quick-custom-css",
+          onClick: handleQuickEdit("customcss")
+        })]
+      })]
+    })
+  });
+};
+var Card$1 = /*#__PURE__*/react.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,
+    onApplyThemeSuccess = _ref.onApplyThemeSuccess,
+    _ref$isSearchVisible = _ref.isSearchVisible,
+    isSearchVisible = _ref$isSearchVisible === void 0 ? false : _ref$isSearchVisible;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useThemeUtils = useExpandedSection.useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"],
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow.shallow),
+    setThemeState = _useThemeStore.setThemeState,
+    previewingTheme = _useThemeStore.previewingTheme;
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        entityId: store["entityId"]
+      };
+    }, shallow.shallow),
+    entityType = _useConfigStore.entityType,
+    entityId = _useConfigStore.entityId;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _useCloneTheme = useGlobalThemesApi.useCloneTheme(),
+    cloneTheme = _useCloneTheme.mutate;
+  var _useApplyTheme = useGlobalThemesApi.useApplyTheme({}),
+    applyClonedTheme = _useApplyTheme.mutate;
+  var _useShowGlobalTheme = useGlobalThemesApi.useShowGlobalTheme(entityType),
+    _useShowGlobalTheme$d = _useShowGlobalTheme.data,
+    _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
+    _useShowGlobalTheme$d3 = _useShowGlobalTheme$d2.globalTheme,
+    globalTheme = _useShowGlobalTheme$d3 === void 0 ? {} : _useShowGlobalTheme$d3,
+    isLoadingGlobalTheme = _useShowGlobalTheme.isLoading;
+  react.useEffect(function () {
+    if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
+    didScrollActiveThemeIntoView.current = true;
+    setTimeout(function () {
+      utils.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 activeThemeId = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id;
+  var lowerSearchTerm = searchTerm.toLowerCase();
+  var matchesSearch = function matchesSearch(theme) {
+    return theme.name.toLowerCase().includes(lowerSearchTerm);
+  };
+  var activeTheme = activeThemeId ? [].concat(_toConsumableArray(defaultThemes), _toConsumableArray(themes)).find(function (theme) {
+    return theme.id === activeThemeId;
+  }) : null;
+  var isActiveThemeCustom = themes.some(function (theme) {
+    return theme.id === activeThemeId;
+  });
+  var filteredDefaultThemes = defaultThemes.filter(function (theme) {
+    return theme.id !== activeThemeId && matchesSearch(theme);
+  });
+  var filteredThemes = themes.filter(function (theme) {
+    return theme.id !== activeThemeId && matchesSearch(theme);
+  });
+  var showActiveThemeSection = activeTheme && matchesSearch(activeTheme);
+  var handleCloneTheme = function handleCloneTheme(data, section) {
+    cloneTheme(data.id, {
+      onSuccess: function onSuccess(_ref2) {
+        var clonedTheme = _ref2.theme;
+        // A system theme is cloned when the user customizes it. Apply the
+        // clone right away so it becomes the active theme — the editor then
+        // won't prompt "apply this theme?" on save.
+        applyClonedTheme({
+          themeId: clonedTheme.id,
+          entityId: entityId,
+          entityType: entityType
+        }, {
+          onSuccess: function onSuccess() {
+            onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(clonedTheme);
+            onEditTheme(clonedTheme, section);
+          }
+        });
+      }
+    });
+  };
+  if (isLoading || isCurrentThemeLoading || isLoadingGlobalTheme) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
+  var activeThemeSection = showActiveThemeSection && /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "neeto-ui-border-gray-200 mb-6 border-b px-6 pb-6 lg:px-5 xl:px-6",
+    children: /*#__PURE__*/jsxRuntime.jsx(Card$1, {
+      onApplyTheme: onApplyTheme,
+      thumbnail: thumbnail,
+      active: true,
+      isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === activeTheme.id,
+      isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === activeTheme.id,
+      isHighLightedTheme: activeTheme.id === themeToHighlight,
+      isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === activeTheme.id,
+      theme: activeTheme,
+      onCloneTheme: handleCloneTheme,
+      onEditTheme: isActiveThemeCustom ? onEditTheme : undefined,
+      onSetPreviewTheme: setPreviewTheme
+    })
+  });
+  var systemThemesSection = neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "mb-6 space-y-3",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-col gap-4 px-6 pb-10 lg:px-5 xl:px-6",
+      "data-testid": "system-themes",
+      children: filteredDefaultThemes.map(function (theme) {
+        return /*#__PURE__*/react.createElement(Card$1, {
+          onApplyTheme: onApplyTheme,
+          theme: theme,
+          thumbnail: thumbnail,
+          active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
+          isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
+          isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === theme.id,
+          isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
+          key: theme.id,
+          onCloneTheme: handleCloneTheme,
+          onSetPreviewTheme: setPreviewTheme
+        });
+      })
+    })
+  });
+  var customThemesSection = neetoCist.isNotEmpty(filteredThemes) && /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "mb-6 space-y-3",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-col gap-4 px-6",
+      "data-testid": "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__*/react.createElement(Card$1, {
+          isPreviewing: isPreviewing,
+          onApplyTheme: onApplyTheme,
+          onEditTheme: onEditTheme,
+          theme: theme,
+          thumbnail: thumbnail,
+          active: isActive,
+          isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
+          isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === theme.id,
+          isHighLightedTheme: theme.id === themeToHighlight,
+          key: theme.id,
+          onCloneTheme: handleCloneTheme,
+          onDeleteTheme: !isActive && onDeleteTheme,
+          onSetPreviewTheme: setPreviewTheme
+        });
+      })
+    })
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-themes-sidebar__scroll",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "mb-6 space-y-3",
+      children: [isSearchVisible && /*#__PURE__*/jsxRuntime.jsx(Search, {
+        autoFocus: true,
+        enableUrlSync: true,
+        autoComplete: "off",
+        className: "mb-4 mt-1 px-6",
+        placeholder: t("neetoThemes.common.searchThemes")
+      }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "text-center",
+        "data-testid": "no-data-title",
+        style: "body2",
+        children: t("neetoThemes.common.noResultsFound")
+      })]
+    }), activeThemeSection, systemThemesSection, customThemesSection]
+  });
+};
+
+var TitleBar = function TitleBar(_ref) {
+  var currentScreen = _ref.currentScreen,
+    handleBackPress = _ref.handleBackPress,
+    handleToggleSearch = _ref.handleToggleSearch;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow.shallow),
+    previewingTheme = _useThemeStore.previewingTheme;
+  var themeId = previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id;
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        helpDocUrl: store["helpDocUrl"]
+      };
+    }, shallow.shallow),
+    entityType = _useConfigStore.entityType,
+    helpDocUrl = _useConfigStore.helpDocUrl;
+  var isCustomizeScreen = utils.isEditThemeRoute() || utils.isNewThemeRoute();
+  var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  var isRTL = i18n.dir() === "rtl";
+  var BackButtonIcon = isRTL ? RightArrow : LeftArrow;
+  if (isCustomizeScreen) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-themes-sidebar__header px-4",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-start space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+          "data-testid": "customize-themes-back-button",
+          icon: BackButtonIcon,
+          iconPosition: "left",
+          style: "text",
+          tooltipProps: {
+            content: isCustomCssScreen ? t("neetoThemes.buttons.backToEdit") : t("neetoThemes.buttons.backToThemes"),
+            position: "top"
+          },
+          onClick: function onClick() {
+            return handleBackPress(themeId);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
+          "data-testid": "themes-header",
+          lineHeight: "normal",
+          style: "h3",
+          weight: "semibold",
+          children: [isCustomizeScreen && !isCustomCssScreen && (utils.isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between space-x-2",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          "data-testid": "themes-header",
+          lineHeight: "normal",
+          style: "h3",
+          weight: "semibold",
+          children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
+        }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+          helpLinkProps: helpDocUrl && {
+            href: helpDocUrl
+          },
+          title: t("neetoThemes.build.leftSideBar.helpPopover.title"),
+          description: t("neetoThemes.build.leftSideBar.helpPopover.description", {
+            entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "self-end",
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          "data-testid": "themes-search-toggle-button",
+          icon: Search$1,
+          iconPosition: "left",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoThemes.common.searchThemes"),
+            position: "top"
+          },
+          onClick: handleToggleSearch
+        })
+      })]
+    })
+  });
+};
+
+var MemoizedAlert = /*#__PURE__*/react.memo(Alert);
+var Sidebar = function Sidebar(_ref) {
+  var _themeToDelete$curren2;
+  var thumbnail = _ref.thumbnail,
+    onPropertiesChange = _ref.onPropertiesChange,
+    defaultImageSize = _ref.defaultImageSize,
+    fixedAspectRatio = _ref.fixedAspectRatio,
+    onApplyThemeSuccess = _ref.onApplyThemeSuccess,
+    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
+  var _useState = react.useState(DESIGN_SCREENS.THEMES),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentScreen = _useState2[0],
+    setCurrentScreen = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDeleteAlertOpen = _useState4[0],
+    setIsDeleteAlertOpen = _useState4[1];
+  var _useState5 = react.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    themeToHighlight = _useState6[0],
+    setThemeToHighlight = _useState6[1];
+  var _useState7 = react.useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    themeBeingApplied = _useState8[0],
+    setThemeBeingApplied = _useState8[1];
+  var _useBreakpoints = reactUtils.useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isLargerScreen = !isSize("mobile");
+  var _useState9 = react.useState(!isLargerScreen),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isThemesSidebarCollapsed = _useState10[0],
+    setIsThemesSidebarCollapsed = _useState10[1];
+  var history = reactRouterDom.useHistory();
+  react.useEffect(function () {
+    setIsThemesSidebarCollapsed(!isLargerScreen);
+  }, [isLargerScreen]);
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        entityId: store["entityId"],
+        isFetchingSchema: store["isFetchingSchema"],
+        defaultThemeName: store["defaultThemeName"]
+      };
+    }, shallow.shallow),
+    entityType = _useConfigStore.entityType,
+    entityId = _useConfigStore.entityId,
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    defaultThemeName = _useConfigStore.defaultThemeName;
+  var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow.shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var didScrollActiveThemeIntoView = react.useRef(null);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useThemeUtils = useExpandedSection.useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useListThemes = useGlobalThemesApi.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 = useGlobalThemesApi.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 = useGlobalThemesApi.useDeleteTheme(),
+    deleteTheme = _useDeleteTheme.mutate,
+    isDeleting = _useDeleteTheme.isPending;
+  var _useApplyTheme = useGlobalThemesApi.useApplyTheme({
+      onSuccess: function onSuccess(_ref2) {
+        var theme = _ref2.theme;
+        var applyUpdates = function applyUpdates() {
+          setTheme(theme);
+          highlightTheme(theme);
+          setThemeState({
+            previewingTheme: theme
+          });
+          setThemeBeingApplied({});
+          setCurrentScreen(DESIGN_SCREENS.THEMES);
+          onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
+        };
+
+        // Keep the spinner visible a bit longer so the apply feels deliberate,
+        // then glide the card into the pinned active section.
+        setTimeout(function () {
+          return animateThemeReorder(applyUpdates);
+        }, useExpandedSection.APPLY_SPINNER_DELAY);
+      }
+    }),
+    applyTheme = _useApplyTheme.mutate,
+    isApplyingTheme = _useApplyTheme.isPending;
+  var themeToDelete = react.useRef(null);
+  var themeToEdit = react.useRef(null);
+  var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  var _useState11 = react.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isSearchVisible = _useState12[0],
+    setIsSearchVisible = _useState12[1];
+  var handleToggleSearch = function handleToggleSearch() {
+    setIsSearchVisible(function (prev) {
+      var next = !prev;
+      if (!next) {
+        var params = new URLSearchParams(history.location.search);
+        params["delete"]("searchTerm");
+        history.replace({
+          search: params.toString()
+        });
+      }
+      return next;
+    });
+  };
+  var handleEditTheme = function handleEditTheme(theme, section) {
+    themeToEdit.current = theme;
+    var pathname = utils$1.buildUrl(buildPathname(useGlobalThemesApi.routes.themes.edit), {
+      themeId: theme.id
+    });
+    history.push({
+      pathname: pathname,
+      search: section ? "?section=".concat(section) : ""
+    });
+  };
+  var onApplyTheme = function onApplyTheme(theme) {
+    if (themeBeingApplied !== null && themeBeingApplied !== void 0 && themeBeingApplied.id) return;
+    setThemeBeingApplied(theme);
+    applyTheme({
+      themeId: theme.id,
+      entityId: entityId,
+      entityType: entityType
+    }, {
+      onError: function onError() {
+        return setThemeBeingApplied({});
+      }
+    });
+  };
+  var navigateToThemesScreen = function navigateToThemesScreen(themeId) {
+    highlightTheme(neetoCist.isPresent(themeId) ? themeId : currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+    history.push(buildPathname(useGlobalThemesApi.routes.themes.index));
+    themeToEdit.current = null;
+  };
+  var handleBackPress = function handleBackPress(themeId) {
+    if (isCustomCssScreen) {
+      setCurrentScreen(DESIGN_SCREENS.Customize);
+      return;
+    }
+    navigateToThemesScreen(themeId);
+  };
+  var highlightTheme = function highlightTheme(themeIdToHighlight) {
+    setTimeout(function () {
+      utils.scrollElementIntoView(themeIdToHighlight);
+    }, 1500);
+    setTimeout(function () {
+      setThemeToHighlight(null);
+    }, 4000);
+    setThemeToHighlight(themeIdToHighlight);
+  };
+  var onCreateTheme = function onCreateTheme(createdTheme) {
+    themeToEdit.current = createdTheme;
+    setTheme(createdTheme);
+    setThemeState({
+      previewingTheme: createdTheme
+    });
+  };
+  var onUpdateTheme = function onUpdateTheme(updatedTheme) {
+    themeToEdit.current = updatedTheme;
+    onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 || onUpdateThemeSuccess(updatedTheme);
+  };
+  var handleDelete = function handleDelete(themeId, name) {
+    setIsDeleteAlertOpen(true);
+    themeToDelete.current = {
+      id: themeId,
+      name: name
+    };
+  };
+  var handleCloseDeleteAlert = react.useCallback(function () {
+    setIsDeleteAlertOpen(false);
+    themeToDelete.current = null;
+  }, [themeToDelete]);
+  var handleDeleteTheme = react.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!isThemesSidebarCollapsed && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-themes-sidebar__backdrop",
+      onClick: function onClick() {
+        setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames("neeto-themes-sidebar neeto-ui-border-gray-200 shrink-0 border-e transition-all duration-300", {
+        "neeto-themes-sidebar--expanded": isCustomCssScreen
+      }, {
+        "neeto-themes-sidebar--collapsed": isThemesSidebarCollapsed
+      }),
+      children: [/*#__PURE__*/jsxRuntime.jsx(TitleBar, {
+        currentScreen: currentScreen,
+        handleBackPress: handleBackPress,
+        handleToggleSearch: handleToggleSearch
+      }), /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Switch, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+          exact: true,
+          path: buildPathname(useGlobalThemesApi.routes.themes.index),
+          render: function render() {
+            return /*#__PURE__*/jsxRuntime.jsx(Themes, {
+              currentTheme: currentTheme,
+              defaultThemes: defaultThemes,
+              didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
+              highlightTheme: highlightTheme,
+              isCurrentThemeLoading: isCurrentThemeLoading,
+              isSearchVisible: isSearchVisible,
+              onApplyTheme: onApplyTheme,
+              onApplyThemeSuccess: onApplyThemeSuccess,
+              themeBeingApplied: themeBeingApplied,
+              themeToHighlight: themeToHighlight,
+              themes: themes,
+              thumbnail: thumbnail,
+              isLoading: isLoading || isFetchingSchema,
+              onDeleteTheme: handleDelete,
+              onEditTheme: handleEditTheme
+            });
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+          path: buildPathname(useGlobalThemesApi.routes.themes["new"]),
+          render: function render() {
+            return /*#__PURE__*/jsxRuntime.jsx(Customize, {
+              currentScreen: currentScreen,
+              defaultImageSize: defaultImageSize,
+              fixedAspectRatio: fixedAspectRatio,
+              isApplyingTheme: isApplyingTheme,
+              onApplyTheme: onApplyTheme,
+              onCreateTheme: onCreateTheme,
+              onPropertiesChange: onPropertiesChange,
+              onUpdateTheme: onUpdateTheme,
+              theme: themeToEdit.current,
+              onEditCSSClick: setCurrentScreen
+            });
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+          path: buildPathname(useGlobalThemesApi.routes.themes.edit),
+          render: function render() {
+            return /*#__PURE__*/jsxRuntime.jsx(Customize, {
+              currentScreen: currentScreen,
+              defaultImageSize: defaultImageSize,
+              fixedAspectRatio: fixedAspectRatio,
+              isApplyingTheme: isApplyingTheme,
+              onApplyTheme: onApplyTheme,
+              onCreateTheme: onCreateTheme,
+              onPropertiesChange: onPropertiesChange,
+              onUpdateTheme: onUpdateTheme,
+              theme: themeToEdit.current,
+              onEditCSSClick: setCurrentScreen
+            });
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.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,
+          defaultThemeName: defaultThemeName,
+          entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
+        }),
+        onClose: handleCloseDeleteAlert,
+        onSubmit: handleDeleteTheme
+      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+        className: "neeto-themes-sidebar__toggler",
+        icon: Collapse,
+        style: "secondary",
+        onClick: function onClick() {
+          setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
+        }
+      })]
+    })]
+  });
+};
+
+var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
+  var children = _ref.children,
+    entityType = _ref.entityType,
+    entityId = _ref.entityId,
+    thumbnail = _ref.thumbnail,
+    onPropertiesChange = _ref.onPropertiesChange,
+    _ref$defaultImageSize = _ref.defaultImageSize,
+    defaultImageSize = _ref$defaultImageSize === void 0 ? {} : _ref$defaultImageSize,
+    _ref$fixedAspectRatio = _ref.fixedAspectRatio,
+    fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? null : _ref$helpDocUrl,
+    _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
+    isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
+    _ref$pageTitle = _ref.pageTitle,
+    pageTitle = _ref$pageTitle === void 0 ? null : _ref$pageTitle,
+    _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
+    onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? neetoCist.noop : _ref$onApplyThemeSucc,
+    _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
+    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? neetoCist.noop : _ref$onUpdateThemeSuc,
+    _ref$helpPopoverProps = _ref.helpPopoverProps,
+    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps,
+    _ref$enabledFeatures = _ref.enabledFeatures,
+    enabledFeatures = _ref$enabledFeatures === void 0 ? {
+      customCSS: true
+    } : _ref$enabledFeatures,
+    _ref$proFeatures = _ref.proFeatures,
+    proFeatures = _ref$proFeatures === void 0 ? {} : _ref$proFeatures;
+  react.useMemo(useGlobalThemesApi.registerNeetoThemesTranslations, []);
+  var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow.shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var _useThemeUtils = useExpandedSection.useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
+      return {
+        setConfigState: store["setConfigState"]
+      };
+    }, shallow.shallow),
+    setConfigState = _useConfigStore.setConfigState;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useShowThemeEntity = useGlobalThemesApi.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;
+  react.useEffect(function () {
+    setConfigState({
+      entityType: entityType,
+      entityId: entityId,
+      isTemplateThemesEnabled: isTemplateThemesEnabled,
+      helpDocUrl: helpDocUrl,
+      helpPopoverProps: helpPopoverProps,
+      enabledFeatures: enabledFeatures,
+      proFeatures: proFeatures
+    });
+  }, []);
+  react.useEffect(function () {
+    if (neetoCist.isNotPresent(currentTheme) || utils.isEditThemeRoute()) {
+      return;
+    }
+    setThemeState({
+      previewingTheme: currentTheme
+    });
+    setTheme(currentTheme);
+  }, [isLoading, entityId, currentTheme]);
+  react.useEffect(function () {
+    if (neetoCist.isNotPresent(currentTheme)) return;
+    setThemeState({
+      currentTheme: currentTheme,
+      isCurrentThemeLoading: isCurrentThemeLoading
+    });
+  }, [currentTheme, isCurrentThemeLoading]);
+  react.useEffect(function () {
+    var setViewportHeight = function setViewportHeight() {
+      document.documentElement.style.setProperty("--viewport-height", "".concat(window.innerHeight, "px"));
+    };
+    setViewportHeight();
+    window.addEventListener("load", setViewportHeight);
+    window.addEventListener("resize", setViewportHeight);
+    window.addEventListener("orientationchange", setViewportHeight);
+    window.addEventListener("scroll", setViewportHeight);
+    return function () {
+      window.removeEventListener("load", setViewportHeight);
+      window.removeEventListener("resize", setViewportHeight);
+      window.removeEventListener("orientationchange", setViewportHeight);
+      window.removeEventListener("scroll", setViewportHeight);
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-themes__wrapper",
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactUtils.PageTitle, {
+      title: pageTitle || t("neetoThemes.common.theme")
+    }), /*#__PURE__*/jsxRuntime.jsx(Sidebar, {
+      defaultImageSize: defaultImageSize,
+      fixedAspectRatio: fixedAspectRatio,
+      onApplyThemeSuccess: onApplyThemeSuccess,
+      onPropertiesChange: onPropertiesChange,
+      onUpdateThemeSuccess: onUpdateThemeSuccess,
+      thumbnail: thumbnail
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-themes-preview__wrapper",
+      children: isCurrentThemeLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "m-auto flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+      }) : children
+    })]
+  });
+};
+
+module.exports = NeetoThemesBuilder;
 //# sourceMappingURL=NeetoThemesBuilder.js.map