@bigbinary/neeto-themes-frontend 4.0.25 → 4.0.27

package/dist/v2/NeetoThemesBuilder.js

@@ -0,0 +1,2600 @@
+import { shallow } from 'zustand/shallow';
+import { Suspense, lazy, useEffect, createElement, useState, memo, useRef, useCallback, useMemo } from 'react';
+import { Toastr, Spinner, Typography, Button, ColorPicker, Select, Checkbox, Switch, Input, Tooltip, Popover, Alert } from '@bigbinary/neeto-atoms';
+import { isPresent, hyphenate, findBy, findIndexBy, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, capitalize, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { useQueryParams, useBreakpoints, PageTitle } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import { useTranslation, Trans } from 'react-i18next';
+import { u as useShowGlobalTheme, a as useFetchTheme, b as useCreateTheme, c as useUpdateTheme, d as routes, e as useCloneTheme, f as useApplyTheme, g as useListThemes, h as useShowThemeEntity, i as useDeleteTheme, r as registerNeetoThemesTranslations } from '../useGlobalThemesApi-NQA1B1Zs.js';
+import { a as useExpandedSection, b as useConfigStore, c as useThemeStore, u as useThemeUtils, d as useSyncExpandedSectionFromUrl } from '../useExpandedSection-CelNLEKQ.js';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import classnames from 'classnames';
+import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/v2/utils';
+import Collapse from '@bigbinary/neeto-icons/Collapse';
+import { useHistory, useParams, Switch as Switch$1, Route } from 'react-router-dom';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { RadioGroup, Input as Input$1, Form, BlockNavigation } from '@bigbinary/neeto-atoms/formik';
+import Close from '@bigbinary/neeto-icons/Close';
+import { isEmpty, negate, isNotNil } from 'ramda';
+import i18n, { t } from 'i18next';
+import * as yup from 'yup';
+import { useFormikContext, Field } from 'formik';
+import { c as setCustomCSS } from '../index-BZB12oJt.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Right from '@bigbinary/neeto-icons/Right';
+import Left from '@bigbinary/neeto-icons/Left';
+import HelpPopover from '@bigbinary/neeto-molecules/v2/HelpPopover';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { flushSync } from 'react-dom';
+import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
+import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
+import { Slider } from 'antd';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/v2/ImageUploader';
+import Search from '@bigbinary/neeto-molecules/v2/Search';
+import AddImage from '@bigbinary/neeto-icons/AddImage';
+import CodeBlock from '@bigbinary/neeto-icons/CodeBlock';
+import ColorPicker$1 from '@bigbinary/neeto-icons/ColorPicker';
+import MoreDropdown from '@bigbinary/neeto-molecules/v2/MoreDropdown';
+import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
+import RightArrow from '@bigbinary/neeto-icons/RightArrow';
+import Search$1 from '@bigbinary/neeto-icons/Search';
+import '@tanstack/react-query';
+import 'axios';
+import '@bigbinary/neeto-commons-frontend/react-utils';
+import 'zustand';
+import '@bigbinary/neetoui/Toastr';
+
+var getImageFromUrl = function getImageFromUrl(source) {
+  var image = new Image();
+  image.crossOrigin = "anonymous";
+  image.src = source;
+  return new Promise(function (resolve) {
+    image.onload = function () {
+      resolve(image);
+    };
+  });
+};
+var getDominantColorFromUrl = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(imageUrl) {
+    var image, context, c;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return getImageFromUrl(imageUrl);
+        case 3:
+          image = _context.sent;
+          context = document.createElement("canvas").getContext("2d");
+          context === null || context === void 0 || context.drawImage(image, 0, 0, 1, 1);
+          c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
+          if (!c) {
+            _context.next = 9;
+            break;
+          }
+          return _context.abrupt("return", "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1)));
+        case 9:
+          return _context.abrupt("return", null);
+        case 12:
+          _context.prev = 12;
+          _context.t0 = _context["catch"](0);
+          Toastr.error(_context.t0);
+          return _context.abrupt("return", null);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 12]]);
+  }));
+  return function getDominantColorFromUrl(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var scrollElementIntoView = function scrollElementIntoView(elementId) {
+  var elementToScroll = document.getElementById(elementId);
+  var sidebarContainer = document.querySelector(".neeto-themes-sidebar__scroll");
+  if (!elementToScroll || !sidebarContainer) return;
+  var elementRect = elementToScroll.getBoundingClientRect();
+  var sidebarContainerRect = sidebarContainer.getBoundingClientRect();
+  var offset = elementRect.top - sidebarContainerRect.top + sidebarContainer.scrollTop;
+  sidebarContainer.scrollTo({
+    top: offset,
+    behavior: "smooth"
+  });
+};
+var isFunction = function isFunction(obj) {
+  return typeof obj === "function";
+};
+var isNewThemeRoute = function isNewThemeRoute() {
+  return location.pathname.endsWith("new");
+};
+var isEditThemeRoute = function isEditThemeRoute() {
+  return location.pathname.endsWith("edit");
+};
+
+// Keeps the spinner visible a bit longer so the apply feels deliberate,
+// before the card glides into the pinned active section.
+var APPLY_SPINNER_DELAY = 900;
+
+var POSITION_OPTIONS = [{
+  label: "Left",
+  value: "left"
+}, {
+  label: "Right",
+  value: "right"
+}];
+var FONT_OPTIONS = [{
+  label: "System UI",
+  value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+}, {
+  label: "Cedarville Cursive",
+  value: "'Cedarville Cursive', cursive"
+}, {
+  label: "Poppins",
+  value: "Poppins, sans-serif"
+}, {
+  label: "Roboto",
+  value: "Roboto, sans-serif"
+}, {
+  label: "Open Sans",
+  value: "Open Sans, sans-serif"
+}, {
+  label: "Montserrat",
+  value: "Montserrat, sans-serif"
+}, {
+  label: "Raleway",
+  value: "Raleway, sans-serif"
+}, {
+  label: "Quicksand",
+  value: "Quicksand, sans-serif"
+}, {
+  label: "Inter",
+  value: "Inter, sans-serif"
+}, {
+  label: "Satoshi",
+  value: "Satoshi, sans-serif"
+}, {
+  label: "Chillax",
+  value: "Chillax, sans-serif"
+}, {
+  label: "Clash Display",
+  value: "Clash Display, sans-serif"
+}, {
+  label: "General Sans",
+  value: "General Sans, sans-serif"
+}, {
+  label: "Cabinet Grotesk",
+  value: "Cabinet Grotesk, sans-serif"
+}, {
+  label: "Lora",
+  value: "Lora, serif"
+}, {
+  label: "Merriweather",
+  value: "Merriweather, serif"
+}, {
+  label: "Boska",
+  value: "Boska, serif"
+}, {
+  label: "Playfair Display",
+  value: "Playfair Display, serif"
+}, {
+  label: "Roboto Slab",
+  value: "Roboto Slab, serif"
+}, {
+  label: "Dancing Script",
+  value: "Dancing Script, cursive"
+}, {
+  label: "Tw Cent",
+  value: "Tw Cen MT, Tahoma, sans-serif"
+}, {
+  label: "Comic Sans",
+  value: "Comic Sans MS, cursive"
+}];
+var THEME_VALIDATION_SCHEMA = yup.object().shape({
+  name: yup.string().required(function () {
+    return t("neetoThemes.validations.nameRequired");
+  }),
+  properties: yup.array().of(yup.object().shape({
+    key: yup.string(),
+    value: yup.string().when("key", {
+      is: function is(key) {
+        return key === null || key === void 0 ? void 0 : key.endsWith("_url");
+      },
+      then: function then(schema) {
+        return schema.url(function () {
+          return t("neetoThemes.validations.invalidUrl");
+        });
+      }
+    })
+  }))
+});
+var OVERLAY_OPACITY_SLIDER_MARKS = {
+  0: " "
+};
+var HUNDRED = 100;
+
+var DESIGN_SCREENS = {
+  THEMES: "Themes",
+  Customize: "Customize",
+  CustomCSS: "CustomCSS"
+};
+var ONE_MEGABYTE = 1;
+
+var MonacoEditor = /*#__PURE__*/lazy(function () {
+  return import('@monaco-editor/react');
+});
+var Editor = function Editor(_ref) {
+  var value = _ref.value,
+    isCustomCssScreen = _ref.isCustomCssScreen,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsx(Suspense, {
+    fallback: /*#__PURE__*/jsx(Spinner, {}),
+    children: /*#__PURE__*/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
+        }
+      }
+    })
+  });
+};
+
+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(),
+    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__*/jsxs("div", {
+    "data-testid": "theme-".concat(hyphenate(title), "-properties"),
+    className: classnames("neeto-themes-nano-section border-border border-b pt-2 transition-all duration-300 last:border-none", className, {
+      "pb-2": !isOpen,
+      "pb-3": isOpen
+    }),
+    children: [title && /*#__PURE__*/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__*/jsx(Typography, {
+        asChild: true,
+        className: "flex min-w-0 grow items-center gap-2 text-start",
+        "data-testid": "theme-properties",
+        variant: "h4",
+        weight: "semibold",
+        children: /*#__PURE__*/jsxs("span", {
+          children: [title, required && /*#__PURE__*/jsx("span", {
+            "aria-hidden": true,
+            className: "-ms-1",
+            children: "*"
+          }), isPresent(helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$4({}, helpPopoverProps))]
+        })
+      }), /*#__PURE__*/jsx(ToggleIcon, {
+        size: 20,
+        className: classnames("transition-all duration-300", {
+          "rotate-90 rtl:-rotate-90": isOpen
+        })
+      })]
+    }), children && /*#__PURE__*/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 (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()];
+  }));
+  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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"],
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$cus = helpPopoverProps.customCss,
+    customCssHelpPopoverProps = _helpPopoverProps$cus === void 0 ? {} : _helpPopoverProps$cus;
+  var _useExpandedSection = useExpandedSection(),
+    expandedSection = _useExpandedSection.expandedSection;
+  var isExpanded = expandedSection === "customcss";
+  var customCSS = findBy({
+    kind: "custom_css"
+  }, values.properties);
+  if (!customCSS || !isEnabled && !isProFeature) return null;
+  var parentElementClass = 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 () {
+      scrollElementIntoView("css-editor");
+    }, 400);
+  };
+  var handleChange = function handleChange(value) {
+    var index = findIndexBy({
+      key: customCSS.key
+    }, values.properties);
+    if (index !== -1 && values.properties[index].value !== value) {
+      setFieldValue("properties[".concat(index, "].value"), value);
+      setCustomCSS({
+        css: value,
+        elementId: customCSS.key,
+        parentElementClass: parentElementClass
+      });
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-themes-sidebar__custom-css-wrapper",
+    id: "css-editor",
+    children: /*#__PURE__*/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__*/jsxs("div", {
+        className: "w-full",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "neeto-themes-sidebar__custom-css-editor-header w-full justify-end gap-1 rounded-b-none p-2",
+          children: /*#__PURE__*/jsx(Button, {
+            size: "sm",
+            variant: "outline",
+            label: isCustomCssScreen ? t("neetoThemes.buttons.minimizeEditor") : t("neetoThemes.buttons.expandEditor"),
+            onClick: handleEditorToggle
+          })
+        }), isExpanded && /*#__PURE__*/jsx(Editor, {
+          isCustomCssScreen: isCustomCssScreen,
+          value: customCSS.value,
+          onChange: handleChange
+        })]
+      }) : /*#__PURE__*/jsx("div", {
+        className: "px-1 py-2",
+        children: /*#__PURE__*/jsx(Typography, {
+          variant: "body2",
+          children: t("neetoThemes.common.proFeature.customCSS.description")
+        })
+      })
+    })
+  });
+};
+
+var LogoPosition = function LogoPosition() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values;
+  var index = 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__*/jsxs(RadioGroup, {
+    name: "properties[".concat(index, "].value"),
+    orientation: "vertical",
+    label: /*#__PURE__*/jsx(Typography, {
+      asChild: true,
+      className: "my-3",
+      variant: "body2",
+      weight: "semibold",
+      children: /*#__PURE__*/jsx("span", {
+        children: t("neetoThemes.build.leftSideBar.themes.logoPosition.title")
+      })
+    }),
+    children: [/*#__PURE__*/jsx(RadioGroup.Item, {
+      value: "over_left",
+      label: /*#__PURE__*/jsxs("span", {
+        className: "flex flex-col gap-1",
+        children: [/*#__PURE__*/jsx(Typography, {
+          asChild: true,
+          variant: "body2",
+          weight: "semibold",
+          children: /*#__PURE__*/jsx("span", {
+            children: t("neetoThemes.build.leftSideBar.themes.logoPosition.overLeft")
+          })
+        }), /*#__PURE__*/jsx(Typography, {
+          asChild: true,
+          variant: "body3",
+          weight: "normal",
+          children: /*#__PURE__*/jsx("span", {
+            children: t("neetoThemes.build.leftSideBar.themes.logoPosition.overLeftDescription")
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsx(RadioGroup.Item, {
+      value: "below_left",
+      label: /*#__PURE__*/jsxs("span", {
+        className: "flex flex-col gap-1",
+        children: [/*#__PURE__*/jsx(Typography, {
+          asChild: true,
+          variant: "body2",
+          weight: "semibold",
+          children: /*#__PURE__*/jsx("span", {
+            children: t("neetoThemes.build.leftSideBar.themes.logoPosition.belowLeft")
+          })
+        }), /*#__PURE__*/jsx(Typography, {
+          asChild: true,
+          variant: "body3",
+          weight: "normal",
+          children: /*#__PURE__*/jsx("span", {
+            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 = toLabelAndValue(value),
+    label = _toLabelAndValue.label,
+    optionValue = _toLabelAndValue.value;
+  return {
+    label: label ? capitalize(label) : label,
+    value: optionValue
+  };
+};
+var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
+  if (isPresent(theme)) return theme;
+  return {
+    name: 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(isNot(null))
+  };
+};
+var buildImageData = function buildImageData(values, themePropertiesSchema) {
+  return filterBy({
+    kind: "image"
+  }, themePropertiesSchema).reduce(function (acc, item) {
+    var _values$snakeToCamelC;
+    var signedId = (_values$snakeToCamelC = values[snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
+    acc[item.key] = signedId;
+    return acc;
+  }, {});
+};
+var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
+  var property = findBy({
+    key: key
+  }, themePropertiesSchema);
+  if (isNotPresent(property)) return false;
+  if (property !== null && property !== void 0 && property.hidden) return false;
+  var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
+  if (isNotPresent(conditionalKey)) return true;
+  var dependentPropertySchema = findBy({
+    key: conditionalKey
+  }, themePropertiesSchema);
+  var dependentProperty = findBy({
+    key: conditionalKey
+  }, formikValues.properties);
+  if (dependentPropertySchema.kind === "image") {
+    var _formikValues$snakeTo;
+    return isPresent((_formikValues$snakeTo = formikValues[snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
+  } else if (dependentPropertySchema.kind === "boolean") {
+    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
+  }
+  return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
+};
+var buildLabel = function buildLabel(key, kind) {
+  return t("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(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 filterBy({
+      dependsOn: condition
+    }, values);
+  }
+  var imageKeys = new Set();
+  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__*/jsxs("div", {
+    className: "flex items-center justify-between gap-2",
+    "data-testid": joinHyphenCase(label),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      variant: "body2",
+      children: label
+    }), /*#__PURE__*/jsx(Field, {
+      name: name,
+      children: function children(_ref2) {
+        var value = _ref2.field.value,
+          setFieldValue = _ref2.form.setFieldValue;
+        return /*#__PURE__*/jsxs("div", {
+          className: "border-input neeto-themes-nano-alignment-block flex items-center border",
+          children: [/*#__PURE__*/jsx(Button, {
+            className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-left",
+            "data-testid": "alignment-left",
+            variant: value === "left" ? "default" : "ghost",
+            icon: function icon() {
+              return /*#__PURE__*/jsx(LeftAlign, {
+                size: 20,
+                className: classnames({
+                  rounded: true,
+                  "text-primary": value === "left",
+                  "text-muted-foreground": value !== "left"
+                })
+              });
+            },
+            tooltipProps: {
+              content: "Left align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "left");
+            }
+          }), /*#__PURE__*/jsx("div", {
+            className: "neeto-themes-nano-alignment-divider"
+          }), /*#__PURE__*/jsx(Button, {
+            className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-center",
+            "data-testid": "alignment-center",
+            variant: value === "center" ? "default" : "ghost",
+            icon: function icon() {
+              return /*#__PURE__*/jsx(CenterAlign, {
+                size: 20,
+                className: classnames({
+                  rounded: true,
+                  "text-primary": value === "center",
+                  "text-muted-foreground": 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__*/jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      variant: "body2",
+      children: label
+    }), /*#__PURE__*/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__*/jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      variant: "body2",
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsx(Select, {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value,
+        menuPosition: "fixed",
+        styles: {
+          option: function option(styles, _ref2) {
+            var data = _ref2.data;
+            return _objectSpread$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__*/jsxs("div", {
+    className: "border-border flex flex-col gap-2 border-t pt-3",
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-testid": "logo-field-labels",
+      variant: "body2",
+      children: label
+    }), /*#__PURE__*/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__*/jsxs("div", {
+    className: "flex items-center justify-between gap-3",
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      variant: "body2",
+      children: label
+    }), /*#__PURE__*/jsx(Slider, {
+      marks: marks,
+      max: max,
+      min: min,
+      onChange: onChange,
+      value: value,
+      className: "my-2 w-20",
+      tooltip: {
+        formatter: null
+      }
+    })]
+  });
+};
+
+var _excluded = ["label", "name", "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 = useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
+  var doesHelpTextExist = i18n.exists(translationKey);
+  if (asCheckbox) {
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-2",
+      "data-testid": "theme-style-content-background",
+      children: [/*#__PURE__*/jsx(Checkbox, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
+        label: label,
+        name: name
+      }, inputProps)), {}, {
+        "data-testid": "enable-background-color-toggle"
+      })), doesHelpTextExist && /*#__PURE__*/jsx(HelpPopover, {
+        className: "shrink-0",
+        description: t(translationKey)
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-testid": "theme-style-content-background",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "inline-flex items-center gap-4",
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-testid": "style-fields-labels",
+        variant: "body2",
+        className: classnames({
+          "w-32": doesHelpTextExist,
+          "w-auto": !doesHelpTextExist
+        }),
+        children: label
+      }), doesHelpTextExist && /*#__PURE__*/jsx(HelpPopover, {
+        className: "shrink-0",
+        description: t(translationKey)
+      })]
+    }), /*#__PURE__*/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__*/jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-testid": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-testid": "style-fields-labels",
+      variant: "body2",
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsx(Input, {
+        error: error,
+        name: name,
+        onChange: onChange,
+        placeholder: placeholder,
+        type: type,
+        value: value
+      })
+    })]
+  });
+};
+
+var Properties = function Properties(_ref) {
+  var onPropertiesChange = _ref.onPropertiesChange,
+    condition = _ref.condition,
+    themeId = _ref.themeId;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values,
+    errors = _useFormikContext.errors;
+  var _useThemeUtils = 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 = 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 = findIndexBy({
+      key: name
+    }, values.properties);
+    if (index !== -1 && values.properties[index].value !== value) {
+      setFieldValue("properties[".concat(index, "].value"), value);
+    }
+    setVariable(snakeToCamelCase(name), variableValue !== null && variableValue !== void 0 ? variableValue : value);
+  };
+  var handleOverlayChange = function handleOverlayChange(key, value) {
+    var index = findIndexBy({
+      key: key
+    }, values.properties);
+    var overlayColorVariable = "".concat(key, "_overlay_color");
+    setFieldValue("properties[".concat(index, "].value"), value);
+    setVariable("".concat(key, "_overlay_opacity"), Math.abs(value / 100));
+    if (value < 0) {
+      handleChange(overlayColorVariable, "#000000", "0, 0, 0");
+    } else {
+      handleChange(overlayColorVariable, "#ffffff", "255, 255, 255");
+    }
+  };
+  useEffect(function () {
+    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__*/jsx(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 = findBy({
+          key: key
+        }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.order) || Infinity;
+      };
+      return order(a.key) - order(b.key);
+    }).map(function (_ref3) {
+      var _findBy3;
+      var key = _ref3.key,
+        value = _ref3.value,
+        kind = _ref3.kind;
+      var isCurrentPropertyVisible = isPropertyVisible(key, values, themePropertiesSchema);
+      if (!isCurrentPropertyVisible) return null;
+      switch (kind) {
+        case "text_input":
+          {
+            var _errors$properties;
+            var index = 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 /*#__PURE__*/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 /*#__PURE__*/jsx(FontPickerBlock, {
+            label: buildLabel(key, kind),
+            options: FONT_OPTIONS,
+            value: findBy({
+              value: value || null
+            }, FONT_OPTIONS),
+            onChange: function onChange(_ref4) {
+              var value = _ref4.value;
+              return handleChange(key, value);
+            }
+          }, key);
+        case "color":
+          return /*#__PURE__*/jsx(ColorBlock, {
+            color: value,
+            label: buildLabel(key, kind),
+            showTransparencyControl: ((_findBy3 = findBy({
+              key: key
+            }, themePropertiesSchema)) === null || _findBy3 === void 0 ? void 0 : _findBy3.showTransparencyControl) || false,
+            onChange: handleColorChange(key)
+          }, key);
+        case "radius":
+          return /*#__PURE__*/jsx(SliderBlock, {
+            label: buildLabel(key, kind),
+            max: 50,
+            min: 0,
+            value: Number(value) || 0,
+            onChange: function onChange(radius) {
+              return handleChange(key, radius, "".concat(radius, "px"));
+            }
+          }, key);
+        case "overlay_opacity":
+          return /*#__PURE__*/jsx(SliderBlock, {
+            label: buildLabel(key, kind),
+            marks: OVERLAY_OPACITY_SLIDER_MARKS,
+            max: HUNDRED,
+            min: negate(HUNDRED),
+            value: Number(value) || 0,
+            onChange: function onChange(opacity) {
+              return handleOverlayChange(key, opacity);
+            }
+          }, key);
+        case "position_selector":
+          {
+            var _findBy4;
+            var _index = findIndexBy({
+              key: key
+            }, values.properties);
+            var options = (_findBy4 = findBy({
+              key: key
+            }, themePropertiesSchema)) === null || _findBy4 === void 0 || (_findBy4 = _findBy4.options) === null || _findBy4 === void 0 ? void 0 : _findBy4.map(toCapitalizedOption);
+            return /*#__PURE__*/jsx(SelectBlock, {
+              label: buildLabel(key, kind),
+              options: options || POSITION_OPTIONS,
+              placeholder: "left",
+              value: toCapitalizedOption(value),
+              onChange: function onChange(option) {
+                return setFieldValue("properties[".concat(_index, "].value"), option.value);
+              }
+            }, key);
+          }
+        case "boolean":
+          {
+            var _findBy5;
+            var _index2 = findIndexBy({
+              key: key
+            }, values.properties);
+            var renderAsCheckbox = ((_findBy5 = findBy({
+              key: key
+            }, themePropertiesSchema)) === null || _findBy5 === void 0 ? void 0 : _findBy5.renderAsCheckbox) || false;
+            return /*#__PURE__*/jsx(SwitchBlock, {
+              asCheckbox: renderAsCheckbox,
+              checked: value !== "false",
+              label: buildLabel(key, kind),
+              name: snakeToCamelCase(key),
+              onCheckedChange: function onCheckedChange(checked) {
+                return setFieldValue("properties[".concat(_index2, "].value"), String(checked));
+              }
+            }, key);
+          }
+        case "alignment_block":
+          {
+            var _index3 = findIndexBy({
+              key: key
+            }, values.properties);
+            return /*#__PURE__*/jsx(AlignmentBlock, {
+              label: buildLabel(key, kind),
+              name: "properties[".concat(_index3, "].value")
+            });
+          }
+        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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var propertySchema = findBy({
+    key: attribute
+  }, themePropertiesSchema);
+  var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
+  var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
+  var positionKeyInSchema = findBy({
+    key: "".concat(name, "_position")
+  }, themePropertiesSchema);
+  var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && isPresent(positionKeyInSchema);
+  var positionKeyIndex = findIndexBy({
+    key: "".concat(name, "_position")
+  }, values.properties);
+  var handleImageChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
+      var dominantColor;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            if (!(isEmpty(image.signedId) || isEmpty(image.url))) {
+              _context.next = 4;
+              break;
+            }
+            setFieldValue(name, {
+              signedId: null,
+              url: image.url
+            });
+            return _context.abrupt("return");
+          case 4:
+            _context.next = 6;
+            return getDominantColorFromUrl(image.url);
+          case 6:
+            dominantColor = _context.sent;
+            setFieldValue(name, {
+              signedId: image.signedId,
+              url: image.url,
+              dominantColor: dominantColor
+            });
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](0);
+            Toastr.error(_context.t0);
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+    return function handleImageChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-3",
+    "data-testid": "theme-style-".concat(label ? joinHyphenCase(label) : "image-block"),
+    children: [label && /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-between",
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-testid": "style-fields-labels",
+        variant: "body2",
+        children: label
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "space-y-3",
+      children: [/*#__PURE__*/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__*/jsx(SelectBlock, {
+        label: buildLabel("".concat(name, "Position"), "image"),
+        options: (options === null || options === void 0 ? void 0 : options.map(toCapitalizedOption)) || POSITION_OPTIONS,
+        placeholder: t("neetoThemes.common.left"),
+        value: toCapitalizedOption(((_findBy = findBy({
+          key: "".concat(name, "_position")
+        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
+        onChange: function onChange(option) {
+          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
+        }
+      })]
+    })]
+  });
+};
+
+var Images = function Images(_ref) {
+  var _values$coverImage;
+  var attribute = _ref.attribute,
+    className = _ref.className,
+    onPropertiesChange = _ref.onPropertiesChange,
+    defaultImageSize = _ref.defaultImageSize,
+    useDefaultImageSize = _ref.useDefaultImageSize,
+    fixedAspectRatio = _ref.fixedAspectRatio;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var key = snakeToCamelCase(attribute);
+  var title = buildLabel(key, "image");
+  var imageData = values[key];
+  return /*#__PURE__*/jsxs(Card$2, {
+    className: className,
+    title: title,
+    helpPopoverProps: helpPopoverProps[key],
+    name: key,
+    children: [/*#__PURE__*/jsx(ImageBlock, {
+      attribute: attribute,
+      defaultImageSize: defaultImageSize,
+      fixedAspectRatio: fixedAspectRatio,
+      imageData: imageData,
+      useDefaultImageSize: useDefaultImageSize,
+      name: key
+    }), /*#__PURE__*/jsx(Properties, {
+      onPropertiesChange: onPropertiesChange,
+      condition: attribute
+    }), key === "logo" && ((_values$coverImage = values.coverImage) === null || _values$coverImage === void 0 ? void 0 : _values$coverImage.url) && /*#__PURE__*/jsx(LogoPosition, {})]
+  });
+};
+
+var ThemeMeta = function ThemeMeta(_ref) {
+  var className = _ref.className;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$nam = helpPopoverProps.name,
+    nameHelpPopoverProps = _helpPopoverProps$nam === void 0 ? {} : _helpPopoverProps$nam;
+  return /*#__PURE__*/jsx(Card$2, {
+    className: className,
+    required: true,
+    helpPopoverProps: nameHelpPopoverProps,
+    name: "name",
+    title: t("neetoThemes.common.name"),
+    children: /*#__PURE__*/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 = useTranslation(),
+    t = _useTranslation.t;
+  useSyncExpandedSectionFromUrl();
+  var history = useHistory();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isNotAppliedPopoverOpen = _useState2[0],
+    setIsNotAppliedPopoverOpen = _useState2[1];
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"],
+        entityType: store["entityType"],
+        isFetchingSchema: store["isFetchingSchema"],
+        helpPopoverProps: store["helpPopoverProps"],
+        enabledFeatures: store["enabledFeatures"],
+        proFeatures: store["proFeatures"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    entityType = _useConfigStore.entityType,
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    helpPopoverProps = _useConfigStore.helpPopoverProps,
+    enabledFeatures = _useConfigStore.enabledFeatures,
+    proFeatures = _useConfigStore.proFeatures;
+  var _useParams = useParams(),
+    themeId = _useParams.themeId;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        currentTheme: store["currentTheme"],
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow),
+    currentTheme = _useThemeStore.currentTheme,
+    setThemeState = _useThemeStore.setThemeState;
+  var _useShowGlobalTheme = 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 = useFetchTheme(themeId, {
+      enabled: isEditThemeRoute() && 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 _useCreateTheme = useCreateTheme(),
+    createTheme = _useCreateTheme.mutate,
+    isCreating = _useCreateTheme.isPending;
+  var _useUpdateTheme = useUpdateTheme(themeId),
+    updateTheme = _useUpdateTheme.mutate,
+    isUpdating = _useUpdateTheme.isPending;
+  var isSubmitting = isCreating || isUpdating;
+  var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  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(buildUrl(buildPathname(routes.themes.edit), {
+            themeId: theme.id
+          }));
+        }
+      });
+    }
+    return updateTheme(themeToSave, {
+      onSuccess: function onSuccess(_ref4) {
+        var theme = _ref4.theme;
+        onUpdateTheme(theme);
+        resetForm({
+          values: theme
+        });
+      }
+    });
+  };
+  useEffect(function () {
+    if (isNotNil(themeId) && !isLoadingTheme) {
+      setThemeState({
+        previewingTheme: themeData
+      });
+    }
+  }, [isLoadingTheme]);
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsx(Form, {
+    formikProps: {
+      initialValues: _objectSpread(_objectSpread({}, buildInitialValues(themeData, themePropertiesSchema)), {}, {
+        shouldSetAsGlobalTheme: isThemeGlobalTheme,
+        entityType: entityType
+      }),
+      validationSchema: THEME_VALIDATION_SCHEMA,
+      enableReinitialize: true,
+      onSubmit: onSubmit
+    },
+    children: function children(_ref5) {
+      var dirty = _ref5.dirty,
+        isValid = _ref5.isValid,
+        values = _ref5.values,
+        setFieldValue = _ref5.setFieldValue;
+      var isNotAppliedCondition = !isEditingCurrentlyAppliedTheme && !(isCurrentThemeAndGlobalThemeSame && values.shouldSetAsGlobalTheme);
+      return /*#__PURE__*/jsxs("div", {
+        className: "neeto-themes-sidebar__scroll",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "neeto-themes-sidebar__scroll-content flex grow flex-col px-4 pb-4 lg:px-5",
+          children: [!isSubmitting && /*#__PURE__*/jsx(BlockNavigation, {}), /*#__PURE__*/jsx(ThemeMeta, {
+            className: classnames({
+              hidden: isCustomCssScreen
+            })
+          }), /*#__PURE__*/jsx(Card$2, {
+            className: classnames({
+              hidden: isCustomCssScreen
+            }),
+            helpPopoverProps: styleHelpPopoverProps,
+            name: "style",
+            title: t("neetoThemes.common.style"),
+            children: /*#__PURE__*/jsx(Properties, {
+              onPropertiesChange: onPropertiesChange,
+              themeId: themeId
+            })
+          }), filterBy({
+            kind: "image"
+          }, themePropertiesSchema).map(function (_ref6) {
+            var key = _ref6.key,
+              useDefaultImageSize = _ref6.useDefaultImageSize,
+              propertyDefaultSize = _ref6.defaultImageSize,
+              propertyFixedAspectRatio = _ref6.fixedAspectRatio;
+            return /*#__PURE__*/createElement(Images, _defineProperty({
+              fixedAspectRatio: fixedAspectRatio,
+              onPropertiesChange: onPropertiesChange,
+              useDefaultImageSize: useDefaultImageSize,
+              attribute: key,
+              className: classnames({
+                hidden: isCustomCssScreen
+              }),
+              defaultImageSize: propertyDefaultSize || defaultImageSize,
+              key: key
+            }, "fixedAspectRatio", propertyFixedAspectRatio || fixedAspectRatio));
+          }), /*#__PURE__*/jsx(CustomCSS, {
+            currentScreen: currentScreen,
+            onEditCSSClick: onEditCSSClick,
+            isEnabled: enabledFeatures.customCSS,
+            isProFeature: proFeatures.customCSS
+          }), /*#__PURE__*/jsxs("div", {
+            className: "bg-muted/50 border-border mt-2 flex flex-col space-y-2 border p-2",
+            children: [/*#__PURE__*/jsx(Tooltip, {
+              disabled: !isThemeGlobalTheme,
+              content: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.tooltipContent"),
+              children: /*#__PURE__*/jsx(Switch, {
+                checked: values.shouldSetAsGlobalTheme,
+                disabled: isThemeGlobalTheme,
+                name: "shouldSetAsGlobalTheme",
+                label: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.label"),
+                onCheckedChange: function onCheckedChange(checked) {
+                  return setFieldValue("shouldSetAsGlobalTheme", checked);
+                }
+              })
+            }), /*#__PURE__*/jsx(Typography, {
+              className: "text-sm",
+              variant: "body2",
+              children: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.helpText", {
+                entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
+                  count: 2
+                })
+              })
+            })]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "bg-background shadow-sm 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__*/jsx(Button, {
+            "data-testid": "reset-button",
+            disabled: !dirty || isSubmitting,
+            label: t("neetoThemes.buttons.reset"),
+            type: "reset",
+            variant: "ghost"
+          }), /*#__PURE__*/jsx(Popover, {
+            open: isNotAppliedPopoverOpen,
+            position: "top",
+            trigger: /*#__PURE__*/jsx(Button, {
+              "data-testid": "save-changes-button",
+              label: t("neetoThemes.buttons.save"),
+              loading: isSubmitting,
+              type: "submit",
+              disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid,
+              onClick: function onClick() {
+                if (isNotAppliedCondition) {
+                  setIsNotAppliedPopoverOpen(true);
+                }
+              }
+            }),
+            onOpenChange: setIsNotAppliedPopoverOpen,
+            children: /*#__PURE__*/jsxs("div", {
+              className: "flex flex-col items-start gap-2",
+              children: [/*#__PURE__*/jsx(Button, {
+                className: "absolute end-1 top-1 z-0",
+                icon: Close,
+                size: "sm",
+                variant: "ghost",
+                onClick: function onClick() {
+                  return setIsNotAppliedPopoverOpen(false);
+                }
+              }), /*#__PURE__*/jsx(Typography, {
+                className: "w-72 pe-5",
+                variant: "body2",
+                weight: "normal",
+                children: /*#__PURE__*/jsx(Trans, {
+                  components: {
+                    bold: /*#__PURE__*/jsx("strong", {})
+                  },
+                  i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
+                  values: {
+                    entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
+                  }
+                })
+              }), /*#__PURE__*/jsx(Button, {
+                disabled: isApplyingTheme,
+                label: t("neetoThemes.buttons.applyThisTheme"),
+                loading: isApplyingTheme,
+                onClick: function onClick() {
+                  return onApplyTheme(themeData);
+                }
+              })]
+            })
+          })]
+        })]
+      });
+    }
+  });
+};
+
+var QuickActionRow = function QuickActionRow(_ref) {
+  var Icon = _ref.icon,
+    label = _ref.label,
+    onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/jsxs("button", {
+    onClick: onClick,
+    className: "border-border hover:bg-muted 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__*/jsx(Icon, {
+      size: 16
+    }), /*#__PURE__*/jsx(Typography, {
+      variant: "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 = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    _useConfigStore$theme = _useConfigStore.themePropertiesSchema,
+    themePropertiesSchema = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme;
+  var _themePropertiesSchem = _slicedToArray(themePropertiesSchema, 2),
+    colorObject1 = _themePropertiesSchem[0],
+    colorObject2 = _themePropertiesSchem[1];
+  var primaryLabel = humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
+  var secondaryLabel = humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
+  var primaryColor = findBy({
+    key: colorObject1.key
+  }, theme.properties).value;
+  var secondaryColor = findBy({
+    key: colorObject2.key
+  }, theme.properties).value;
+  var backgroundImageUrl = (_theme$snakeToCamelCa = theme[snakeToCamelCase(findBy({
+    useAsCardBackground: true
+  }, themePropertiesSchema).key)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url;
+  var buttonBackgroundColor = (_findBy = findBy({
+    key: (_findBy2 = findBy({
+      useAsCardButtonBackground: true
+    }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
+  }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames("neeto-themes-theme-thumbnail rounded-lg border transition-all duration-300 ease-in-out", {
+      "border-gray-400": !active,
+      "border-gray-800 neeto-themes-theme-thumbnail--active": active,
+      "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
+      "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
+    }),
+    style: {
+      backgroundImage: backgroundImageUrl ? "url(".concat(backgroundImageUrl, ")") : "initial",
+      backgroundSize: "cover"
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: "rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "rounded-lg p-3",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "mb-3",
+          children: [/*#__PURE__*/jsx(Typography, {
+            variant: "h3",
+            weight: "semibold",
+            children: /*#__PURE__*/jsx("span", {
+              style: {
+                color: primaryColor
+              },
+              children: primaryLabel
+            })
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "text-muted-foreground",
+            variant: "body2",
+            children: /*#__PURE__*/jsx("span", {
+              style: {
+                color: secondaryColor
+              },
+              children: secondaryLabel
+            })
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          className: "rounded-lg h-5 w-12",
+          style: {
+            backgroundColor: buttonBackgroundColor
+          }
+        })]
+      })
+    })
+  });
+};
+
+var Card$1 = 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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var id = theme.id,
+    name = theme.name;
+  var imageProperties = filterBy({
+    kind: "image"
+  }, themePropertiesSchema);
+  var handleDeleteTheme = function handleDeleteTheme() {
+    return onDeleteTheme(id, name);
+  };
+  var handleQuickEdit = function handleQuickEdit(section) {
+    return function (e) {
+      e.stopPropagation();
+      if (isPresent(onEditTheme)) onEditTheme(theme, section);else onCloneTheme(theme, section);
+    };
+  };
+  var showMoreDropdown = isFunction(onDeleteTheme);
+  return /*#__PURE__*/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__*/jsxs("div", {
+      className: classnames("neeto-themes-theme-thumbnail rounded-lg relative cursor-pointer border-2 transition-all duration-300 ease-in-out", {
+        "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__*/jsxs("div", {
+        className: "rounded-lg relative overflow-hidden rounded-bl-none rounded-br-none transition-all duration-300 ease-in-out",
+        children: [active ? /*#__PURE__*/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__*/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__*/jsxs("div", {
+            className: classnames("-translate-y-9 flex w-full items-center justify-between gap-2", {
+              hidden: !isPreviewing,
+              "group-hover:flex": true
+            }),
+            children: [/*#__PURE__*/jsx(Button, {
+              "data-testid": "preview-theme-button",
+              disabled: isPreviewing,
+              label: t("neetoThemes.common.previewTheme"),
+              variant: "secondary",
+              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__*/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,
+              variant: "default",
+              onClick: function onClick() {
+                return onApplyTheme(theme);
+              }
+            })]
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-themes-theme-thumbnail__overlay w-full transition-all duration-300 ease-in-out",
+          children: Thumbnail$1 ? /*#__PURE__*/jsx(Thumbnail$1, {
+            active: active,
+            isHighLightedTheme: isHighLightedTheme,
+            isPreviewing: isPreviewing,
+            theme: theme
+          }) : /*#__PURE__*/jsx(Thumbnail, {
+            active: active,
+            isHighLightedTheme: isHighLightedTheme,
+            isPreviewing: isPreviewing,
+            theme: theme
+          })
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "border-border flex items-start justify-between gap-1 border-t p-2",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex items-center space-x-2",
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "text-muted-foreground line-clamp-2 min-w-0 grow wrap-anywhere pt-1 italic",
+            "data-testid": "theme-name",
+            variant: "body2",
+            children: name
+          }), isGlobalTheme && /*#__PURE__*/jsx(Typography, {
+            className: "text-muted-foreground shrink-0 pt-1 italic",
+            "data-testid": "default-theme-label",
+            variant: "body2",
+            children: t("neetoThemes.common.defaultTheme")
+          })]
+        }), showMoreDropdown && /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownButtonProps: {
+            size: "sm"
+          },
+          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__*/jsxs("div", {
+        className: "flex flex-col",
+        children: [/*#__PURE__*/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 = snakeToCamelCase(key);
+          var hasImage = 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(capitalize(camelKey));
+          return /*#__PURE__*/jsx(QuickActionRow, {
+            icon: AddImage,
+            label: t([specificKey, "neetoThemes.common.addImage"]),
+            testId: "quick-add-".concat(hyphenate(key)),
+            onClick: handleQuickEdit(camelKey)
+          }, key);
+        }), /*#__PURE__*/jsx(QuickActionRow, {
+          icon: CodeBlock,
+          label: t("neetoThemes.build.leftSideBar.themes.customCSS"),
+          testId: "quick-custom-css",
+          onClick: handleQuickEdit("customcss")
+        })]
+      })]
+    })
+  });
+};
+var Card = /*#__PURE__*/memo(Card$1);
+
+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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useThemeUtils = useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"],
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState,
+    previewingTheme = _useThemeStore.previewingTheme;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        entityId: store["entityId"]
+      };
+    }, shallow),
+    entityType = _useConfigStore.entityType,
+    entityId = _useConfigStore.entityId;
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _useCloneTheme = useCloneTheme(),
+    cloneTheme = _useCloneTheme.mutate;
+  var _useApplyTheme = useApplyTheme({}),
+    applyClonedTheme = _useApplyTheme.mutate;
+  var _useShowGlobalTheme = 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;
+  useEffect(function () {
+    if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
+    didScrollActiveThemeIntoView.current = true;
+    setTimeout(function () {
+      scrollElementIntoView(currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+    }, 100);
+  }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
+  var setPreviewTheme = function setPreviewTheme(theme) {
+    setThemeState({
+      previewingTheme: theme
+    });
+    setTheme(theme);
+  };
+  var 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;
+        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__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  var activeThemeSection = showActiveThemeSection && /*#__PURE__*/jsx("div", {
+    className: "border-border mb-6 border-b px-6 pb-6 lg:px-5 xl:px-6",
+    children: /*#__PURE__*/jsx(Card, {
+      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 = isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx("div", {
+    className: "mb-6 space-y-3",
+    children: /*#__PURE__*/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__*/createElement(Card, {
+          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 = isNotEmpty(filteredThemes) && /*#__PURE__*/jsx("div", {
+    className: "mb-6 space-y-3",
+    children: /*#__PURE__*/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__*/createElement(Card, {
+          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__*/jsxs("div", {
+    className: "neeto-themes-sidebar__scroll",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "mb-6 space-y-3",
+      children: [isSearchVisible && /*#__PURE__*/jsx(Search, {
+        autoFocus: true,
+        enableUrlSync: true,
+        autoComplete: "off",
+        className: "mb-4 mt-1 px-6",
+        placeholder: t("neetoThemes.common.searchThemes")
+      }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx(Typography, {
+        className: "text-center",
+        "data-testid": "no-data-title",
+        variant: "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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow),
+    previewingTheme = _useThemeStore.previewingTheme;
+  var themeId = previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        helpDocUrl: store["helpDocUrl"]
+      };
+    }, shallow),
+    entityType = _useConfigStore.entityType,
+    helpDocUrl = _useConfigStore.helpDocUrl;
+  var isCustomizeScreen = isEditThemeRoute() || isNewThemeRoute();
+  var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  var isRTL = i18n.dir() === "rtl";
+  var BackButtonIcon = isRTL ? RightArrow : LeftArrow;
+  if (isCustomizeScreen) {
+    return /*#__PURE__*/jsx("div", {
+      className: "neeto-themes-sidebar__header px-4",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-start space-x-2",
+        children: [/*#__PURE__*/jsx(Button, {
+          "data-testid": "customize-themes-back-button",
+          icon: BackButtonIcon,
+          iconPosition: "left",
+          variant: "ghost",
+          tooltipProps: {
+            content: isCustomCssScreen ? t("neetoThemes.buttons.backToEdit") : t("neetoThemes.buttons.backToThemes"),
+            position: "top"
+          },
+          onClick: function onClick() {
+            return handleBackPress(themeId);
+          }
+        }), /*#__PURE__*/jsxs(Typography, {
+          "data-testid": "themes-header",
+          variant: "h3",
+          weight: "semibold",
+          children: [isCustomizeScreen && !isCustomCssScreen && (isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between space-x-2",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex space-x-2",
+        children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "themes-header",
+          variant: "h3",
+          weight: "semibold",
+          children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
+        }), /*#__PURE__*/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__*/jsx("div", {
+        className: "self-end",
+        children: /*#__PURE__*/jsx(Button, {
+          "data-testid": "themes-search-toggle-button",
+          icon: Search$1,
+          iconPosition: "left",
+          variant: "ghost",
+          tooltipProps: {
+            content: t("neetoThemes.common.searchThemes"),
+            position: "top"
+          },
+          onClick: handleToggleSearch
+        })
+      })]
+    })
+  });
+};
+
+var MemoizedAlert = /*#__PURE__*/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 = useState(DESIGN_SCREENS.THEMES),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentScreen = _useState2[0],
+    setCurrentScreen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDeleteAlertOpen = _useState4[0],
+    setIsDeleteAlertOpen = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    themeToHighlight = _useState6[0],
+    setThemeToHighlight = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    themeBeingApplied = _useState8[0],
+    setThemeBeingApplied = _useState8[1];
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isLargerScreen = !isSize("mobile");
+  var _useState9 = useState(!isLargerScreen),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isThemesSidebarCollapsed = _useState10[0],
+    setIsThemesSidebarCollapsed = _useState10[1];
+  var history = useHistory();
+  useEffect(function () {
+    setIsThemesSidebarCollapsed(!isLargerScreen);
+  }, [isLargerScreen]);
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        entityId: store["entityId"],
+        isFetchingSchema: store["isFetchingSchema"],
+        defaultThemeName: store["defaultThemeName"]
+      };
+    }, shallow),
+    entityType = _useConfigStore.entityType,
+    entityId = _useConfigStore.entityId,
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    defaultThemeName = _useConfigStore.defaultThemeName;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var didScrollActiveThemeIntoView = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useThemeUtils = useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useListThemes = useListThemes(entityId),
+    _useListThemes$data = _useListThemes.data,
+    _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
+    _useListThemes$data2$ = _useListThemes$data2.themes,
+    themes = _useListThemes$data2$ === void 0 ? [] : _useListThemes$data2$,
+    _useListThemes$data2$2 = _useListThemes$data2.defaultThemes,
+    defaultThemes = _useListThemes$data2$2 === void 0 ? [] : _useListThemes$data2$2,
+    isLoading = _useListThemes.isLoading;
+  var _useShowThemeEntity = useShowThemeEntity(entityId),
+    _useShowThemeEntity$d = _useShowThemeEntity.data,
+    _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
+    _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
+    currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
+    isCurrentThemeLoading = _useShowThemeEntity.isLoading;
+  var _useDeleteTheme = useDeleteTheme(),
+    deleteTheme = _useDeleteTheme.mutate,
+    isDeleting = _useDeleteTheme.isPending;
+  var _useApplyTheme = useApplyTheme({
+      onSuccess: function onSuccess(_ref2) {
+        var theme = _ref2.theme;
+        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);
+        }, APPLY_SPINNER_DELAY);
+      }
+    }),
+    applyTheme = _useApplyTheme.mutate,
+    isApplyingTheme = _useApplyTheme.isPending;
+  var themeToDelete = useRef(null);
+  var themeToEdit = useRef(null);
+  var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  var _useState11 = 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 = buildUrl(buildPathname(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(isPresent(themeId) ? themeId : currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+    history.push(buildPathname(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 () {
+      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 = useCallback(function () {
+    setIsDeleteAlertOpen(false);
+    themeToDelete.current = null;
+  }, [themeToDelete]);
+  var handleDeleteTheme = useCallback(function () {
+    var _themeToDelete$curren;
+    deleteTheme((_themeToDelete$curren = themeToDelete.current) === null || _themeToDelete$curren === void 0 ? void 0 : _themeToDelete$curren.id, {
+      onSuccess: function onSuccess() {
+        setIsDeleteAlertOpen(false);
+        themeToDelete.current = null;
+      }
+    });
+  }, [deleteTheme, themeToDelete]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isThemesSidebarCollapsed && /*#__PURE__*/jsx("div", {
+      className: "neeto-themes-sidebar__backdrop",
+      onClick: function onClick() {
+        setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames("neeto-themes-sidebar border-border shrink-0 border-e transition-all duration-300", {
+        "neeto-themes-sidebar--expanded": isCustomCssScreen
+      }, {
+        "neeto-themes-sidebar--collapsed": isThemesSidebarCollapsed
+      }),
+      children: [/*#__PURE__*/jsx(TitleBar, {
+        currentScreen: currentScreen,
+        handleBackPress: handleBackPress,
+        handleToggleSearch: handleToggleSearch
+      }), /*#__PURE__*/jsxs(Switch$1, {
+        children: [/*#__PURE__*/jsx(Route, {
+          exact: true,
+          path: buildPathname(routes.themes.index),
+          render: function render() {
+            return /*#__PURE__*/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__*/jsx(Route, {
+          path: buildPathname(routes.themes["new"]),
+          render: function render() {
+            return /*#__PURE__*/jsx(Customize, {
+              currentScreen: currentScreen,
+              defaultImageSize: defaultImageSize,
+              fixedAspectRatio: fixedAspectRatio,
+              isApplyingTheme: isApplyingTheme,
+              onApplyTheme: onApplyTheme,
+              onCreateTheme: onCreateTheme,
+              onPropertiesChange: onPropertiesChange,
+              onUpdateTheme: onUpdateTheme,
+              theme: themeToEdit.current,
+              onEditCSSClick: setCurrentScreen
+            });
+          }
+        }), /*#__PURE__*/jsx(Route, {
+          path: buildPathname(routes.themes.edit),
+          render: function render() {
+            return /*#__PURE__*/jsx(Customize, {
+              currentScreen: currentScreen,
+              defaultImageSize: defaultImageSize,
+              fixedAspectRatio: fixedAspectRatio,
+              isApplyingTheme: isApplyingTheme,
+              onApplyTheme: onApplyTheme,
+              onCreateTheme: onCreateTheme,
+              onPropertiesChange: onPropertiesChange,
+              onUpdateTheme: onUpdateTheme,
+              theme: themeToEdit.current,
+              onEditCSSClick: setCurrentScreen
+            });
+          }
+        })]
+      }), /*#__PURE__*/jsx(MemoizedAlert, {
+        isOpen: isDeleteAlertOpen,
+        isSubmitting: isDeleting,
+        title: t("neetoThemes.alerts.title.deleteTheme"),
+        message: t("neetoThemes.alerts.message.deleteTheme", {
+          name: (_themeToDelete$curren2 = themeToDelete.current) === null || _themeToDelete$curren2 === void 0 ? void 0 : _themeToDelete$curren2.name,
+          defaultThemeName: defaultThemeName,
+          entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
+        }),
+        onClose: handleCloseDeleteAlert,
+        onSubmit: handleDeleteTheme
+      }), /*#__PURE__*/jsx(Button, {
+        className: "neeto-themes-sidebar__toggler",
+        icon: Collapse,
+        variant: "outline",
+        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 ? noop : _ref$onApplyThemeSucc,
+    _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
+    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? 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;
+  useMemo(registerNeetoThemesTranslations, []);
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow),
+    setThemeState = _useThemeStore.setThemeState;
+  var _useThemeUtils = useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        setConfigState: store["setConfigState"]
+      };
+    }, shallow),
+    setConfigState = _useConfigStore.setConfigState;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useShowThemeEntity = useShowThemeEntity(entityId),
+    _useShowThemeEntity$d = _useShowThemeEntity.data,
+    _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
+    _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
+    currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
+    isLoading = _useShowThemeEntity.isLoading,
+    isFetchingCurrentTheme = _useShowThemeEntity.isFetching;
+  var isCurrentThemeLoading = isLoading || isFetchingCurrentTheme;
+  useEffect(function () {
+    setConfigState({
+      entityType: entityType,
+      entityId: entityId,
+      isTemplateThemesEnabled: isTemplateThemesEnabled,
+      helpDocUrl: helpDocUrl,
+      helpPopoverProps: helpPopoverProps,
+      enabledFeatures: enabledFeatures,
+      proFeatures: proFeatures
+    });
+  }, []);
+  useEffect(function () {
+    if (isNotPresent(currentTheme) || isEditThemeRoute()) {
+      return;
+    }
+    setThemeState({
+      previewingTheme: currentTheme
+    });
+    setTheme(currentTheme);
+  }, [isLoading, entityId, currentTheme]);
+  useEffect(function () {
+    if (isNotPresent(currentTheme)) return;
+    setThemeState({
+      currentTheme: currentTheme,
+      isCurrentThemeLoading: isCurrentThemeLoading
+    });
+  }, [currentTheme, isCurrentThemeLoading]);
+  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__*/jsxs("div", {
+    className: "neeto-themes__wrapper",
+    children: [/*#__PURE__*/jsx(PageTitle, {
+      title: pageTitle || t("neetoThemes.common.theme")
+    }), /*#__PURE__*/jsx(Sidebar, {
+      defaultImageSize: defaultImageSize,
+      fixedAspectRatio: fixedAspectRatio,
+      onApplyThemeSuccess: onApplyThemeSuccess,
+      onPropertiesChange: onPropertiesChange,
+      onUpdateThemeSuccess: onUpdateThemeSuccess,
+      thumbnail: thumbnail
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-themes-preview__wrapper",
+      children: isCurrentThemeLoading ? /*#__PURE__*/jsx("div", {
+        className: "m-auto flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsx(Spinner, {})
+      }) : children
+    })]
+  });
+};
+
+export { NeetoThemesBuilder as default };
+//# sourceMappingURL=NeetoThemesBuilder.js.map