@bigbinary/neeto-themes-frontend 4.2.2 → 4.2.4-beta1

package/dist/NeetoThemesBuilder.js

@@ -7,7 +7,7 @@ import { useTranslation, Trans } from 'react-i18next';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import Toastr from '@bigbinary/neetoui/Toastr';
-import { n, 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-C-jx4UaU.js';
+import { n, u as useShowGlobalTheme, a as useFetchTheme, b as useListThemes, c as useCreateTheme, d as useUpdateTheme, e as useApplyTheme, f as routes, g as useShowThemeEntity, h as useDeleteTheme, r as registerNeetoThemesTranslations } from './useGlobalThemesApi-D04VWBoL.js';
 import { a as useExpandedSection, b as useConfigStore, c as useThemeStore, u as useThemeUtils, P as POSITION_OPTIONS, H as HUNDRED, O as OVERLAY_OPACITY_SLIDER_MARKS, F as FONT_OPTIONS, d as useSyncExpandedSectionFromUrl, T as THEME_VALIDATION_SCHEMA, A as APPLY_SPINNER_DELAY } from './useExpandedSection-MjgB7rh6.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classnames from 'classnames';
@@ -24,7 +24,7 @@ import Switch from '@bigbinary/neetoui/Switch';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import Form from '@bigbinary/neetoui/formik/Form';
 import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
-import { isEmpty, negate, isNotNil } from 'ramda';
+import { isEmpty, omit, negate, isNotNil } from 'ramda';
 import { useFormikContext, Field } from 'formik';
 import { b as setCustomCSS } from './index-CzRk-Wf1.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -52,6 +52,7 @@ 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/MoreDropdown';
+import Tag from '@bigbinary/neetoui/Tag';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import RightArrow from '@bigbinary/neeto-icons/RightArrow';
 import Search$1 from '@bigbinary/neeto-icons/Search';
@@ -642,6 +643,15 @@ var buildProperties = function buildProperties(values, condition, themePropertie
     return !imageKeys.has(dependsOn);
   });
 };
+var buildSystemThemeCopy = function buildSystemThemeCopy(systemTheme) {
+  if (!systemTheme) return null;
+  return _objectSpread$3(_objectSpread$3({}, omit(["id"], systemTheme)), {}, {
+    name: t("neetoThemes.common.cloneName", {
+      name: systemTheme.name
+    }),
+    properties: systemTheme.properties.map(omit(["id", "themeId"]))
+  });
+};
 
 var AlignmentBlock = function AlignmentBlock(_ref) {
   var label = _ref.label,
@@ -1399,6 +1409,7 @@ var Customize = function Customize(_ref) {
   var theme = _ref.theme,
     onCreateTheme = _ref.onCreateTheme,
     onApplyTheme = _ref.onApplyTheme,
+    onApplyThemeSuccess = _ref.onApplyThemeSuccess,
     onUpdateTheme = _ref.onUpdateTheme,
     isApplyingTheme = _ref.isApplyingTheme,
     onPropertiesChange = _ref.onPropertiesChange,
@@ -1417,6 +1428,7 @@ var Customize = function Customize(_ref) {
   var _useConfigStore = useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"],
+        entityId: store["entityId"],
         entityType: store["entityType"],
         isFetchingSchema: store["isFetchingSchema"],
         helpPopoverProps: store["helpPopoverProps"],
@@ -1425,6 +1437,7 @@ var Customize = function Customize(_ref) {
       };
     }, shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    entityId = _useConfigStore.entityId,
     entityType = _useConfigStore.entityType,
     isFetchingSchema = _useConfigStore.isFetchingSchema,
     helpPopoverProps = _useConfigStore.helpPopoverProps,
@@ -1432,6 +1445,9 @@ var Customize = function Customize(_ref) {
     proFeatures = _useConfigStore.proFeatures;
   var _useParams = useParams(),
     themeId = _useParams.themeId;
+  var _useQueryParams = useQueryParams(),
+    sourceThemeId = _useQueryParams.source;
+  var isCustomizingSystemTheme = !themeId && isPresent(sourceThemeId);
   var _useThemeStore = useThemeStore(function (store) {
       return {
         currentTheme: store["currentTheme"],
@@ -1452,12 +1468,21 @@ var Customize = function Customize(_ref) {
     _useFetchTheme$data = _useFetchTheme.data,
     themeData = _useFetchTheme$data === void 0 ? {} : _useFetchTheme$data,
     isLoadingTheme = _useFetchTheme.isLoadingTheme;
-  var isLoading = isFetchingSchema || isLoadingTheme;
+  var _useListThemes = useListThemes(entityId),
+    _useListThemes$data = _useListThemes.data,
+    _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
+    _useListThemes$data2$ = _useListThemes$data2.defaultThemes,
+    defaultThemes = _useListThemes$data2$ === void 0 ? [] : _useListThemes$data2$,
+    isLoadingSystemThemes = _useListThemes.isLoading;
+  var themeToCustomize = isCustomizingSystemTheme ? buildSystemThemeCopy(findBy({
+    id: sourceThemeId
+  }, defaultThemes)) : themeData;
+  var isLoading = isFetchingSchema || isLoadingTheme || isCustomizingSystemTheme && isLoadingSystemThemes;
   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 isEditingCurrentlyAppliedTheme = (themeId !== null && themeId !== void 0 ? themeId : sourceThemeId) === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
   var submitBtnRef = useRef(null);
   var _useCreateTheme = useCreateTheme(),
     createTheme = _useCreateTheme.mutateAsync,
@@ -1465,13 +1490,57 @@ var Customize = function Customize(_ref) {
   var _useUpdateTheme = useUpdateTheme(themeId),
     updateTheme = _useUpdateTheme.mutateAsync,
     isUpdating = _useUpdateTheme.isPending;
-  var isSubmitting = isCreating || isUpdating;
+  var _useApplyTheme = useApplyTheme({}),
+    applyTheme = _useApplyTheme.mutateAsync,
+    isApplyingCreatedTheme = _useApplyTheme.isPending;
+  var isSubmitting = isCreating || isUpdating || isApplyingCreatedTheme;
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
   var handleGlobalThemeSwitchChange = function handleGlobalThemeSwitchChange(e, setFieldValue) {
     setFieldValue("shouldSetAsGlobalTheme", e.target.checked);
   };
-  var onSubmit = function onSubmit(values, _ref2) {
-    var resetForm = _ref2.resetForm;
+  var createAndOpenTheme = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeToSave, resetForm) {
+      var _yield$createTheme, theme;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return createTheme(themeToSave);
+          case 2:
+            _yield$createTheme = _context.sent;
+            theme = _yield$createTheme.theme;
+            resetForm({
+              values: theme
+            });
+            if (!isCustomizingSystemTheme) {
+              _context.next = 9;
+              break;
+            }
+            _context.next = 8;
+            return applyTheme({
+              themeId: theme.id,
+              entityId: entityId,
+              entityType: entityType
+            });
+          case 8:
+            onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
+          case 9:
+            onCreateTheme(theme);
+            history.replace(buildUrl(buildPathname(routes.themes.edit), {
+              themeId: theme.id
+            }));
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function createAndOpenTheme(_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onSubmit = function onSubmit(values, _ref3) {
+    var resetForm = _ref3.resetForm;
     var imageData = buildImageData(values, themePropertiesSchema);
     var themeToSave = _objectSpread({
       propertiesAttributes: values.properties,
@@ -1479,20 +1548,7 @@ var Customize = function Customize(_ref) {
       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
-          }));
-        }
-      });
-    }
+    if (!themeId) return createAndOpenTheme(themeToSave, resetForm);
     return updateTheme(themeToSave, {
       onSuccess: function onSuccess(_ref4) {
         var theme = _ref4.theme;
@@ -1518,7 +1574,7 @@ var Customize = function Customize(_ref) {
   }
   return /*#__PURE__*/jsx(Form, {
     formikProps: {
-      initialValues: _objectSpread(_objectSpread({}, buildInitialValues(themeData, themePropertiesSchema)), {}, {
+      initialValues: _objectSpread(_objectSpread({}, buildInitialValues(themeToCustomize, themePropertiesSchema)), {}, {
         shouldSetAsGlobalTheme: isThemeGlobalTheme,
         entityType: entityType
       }),
@@ -1607,11 +1663,11 @@ var Customize = function Customize(_ref) {
             type: "reset"
           }), /*#__PURE__*/jsx(Button, {
             "data-testid": "save-changes-button",
-            disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid,
             label: t("neetoThemes.buttons.save"),
             loading: isSubmitting,
             ref: submitBtnRef,
-            type: "submit"
+            type: "submit",
+            disabled: !dirty && (themeToCustomize === null || themeToCustomize === void 0 ? void 0 : themeToCustomize.id) || isSubmitting || !isValid
           })]
         }), /*#__PURE__*/jsx(Popover, {
           appendTo: function appendTo() {
@@ -1661,25 +1717,48 @@ var Customize = function Customize(_ref) {
   });
 };
 
-var QuickActionRow = function QuickActionRow(_ref) {
-  var Icon = _ref.icon,
+var QuickActionRow = withT(function (_ref) {
+  var t = _ref.t,
+    Icon = _ref.icon,
     label = _ref.label,
     onClick = _ref.onClick,
-    testId = _ref.testId;
-  return /*#__PURE__*/jsxs("button", {
-    onClick: onClick,
-    className: "neeto-ui-border-gray-100 hover:neeto-ui-bg-gray-100 flex w-full cursor-pointer items-center gap-3 border-t px-3 py-2 text-start transition-colors",
-    "data-testid": testId,
-    type: "button",
-    children: [/*#__PURE__*/jsx(Icon, {
-      size: 16
-    }), /*#__PURE__*/jsx(Typography, {
-      lineHeight: "normal",
-      style: "body2",
-      children: label
-    })]
+    testId = _ref.testId,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disabledTooltip = _ref.disabledTooltip,
+    _ref$isProFeature = _ref.isProFeature,
+    isProFeature = _ref$isProFeature === void 0 ? false : _ref$isProFeature;
+  return /*#__PURE__*/jsx(Tooltip, {
+    content: disabledTooltip,
+    disabled: !disabled || !disabledTooltip,
+    position: "top",
+    children: /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-border-gray-100 border-t",
+      children: /*#__PURE__*/jsxs("button", {
+        disabled: disabled,
+        onClick: onClick,
+        "data-testid": testId,
+        type: "button",
+        className: classnames("flex w-full items-center gap-3 px-3 py-2 text-start transition-colors", {
+          "hover:neeto-ui-bg-gray-100 cursor-pointer": !disabled,
+          "cursor-not-allowed opacity-50": disabled
+        }),
+        children: [/*#__PURE__*/jsx(Icon, {
+          size: 16
+        }), /*#__PURE__*/jsx(Typography, {
+          lineHeight: "normal",
+          style: "body2",
+          children: label
+        }), isProFeature && /*#__PURE__*/jsx(Tag, {
+          "data-testid": "".concat(testId, "-pro-badge"),
+          label: t("neetoThemes.common.pro"),
+          size: "small",
+          style: "info"
+        })]
+      })
+    })
   });
-};
+});
 
 var Thumbnail = function Thumbnail(_ref) {
   var _theme$snakeToCamelCa, _findBy, _findBy2;
@@ -1769,7 +1848,7 @@ var Card$1 = function Card(_ref) {
     onEditTheme = _ref.onEditTheme,
     theme = _ref.theme,
     isApplyingTheme = _ref.isApplyingTheme,
-    onCloneTheme = _ref.onCloneTheme,
+    onCustomizeSystemTheme = _ref.onCustomizeSystemTheme,
     isHighLightedTheme = _ref.isHighLightedTheme,
     isGlobalTheme = _ref.isGlobalTheme,
     onApplyTheme = _ref.onApplyTheme,
@@ -1778,22 +1857,32 @@ var Card$1 = function Card(_ref) {
     t = _useTranslation.t;
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        themePropertiesSchema: store["themePropertiesSchema"]
+        themePropertiesSchema: store["themePropertiesSchema"],
+        enabledFeatures: store["enabledFeatures"],
+        proFeatures: store["proFeatures"]
       };
     }, shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    enabledFeatures = _useConfigStore.enabledFeatures,
+    proFeatures = _useConfigStore.proFeatures;
   var id = theme.id,
     name = theme.name;
   var imageProperties = filterBy({
     kind: "image"
   }, themePropertiesSchema);
+  var isCustomCSSInSchema = isPresent(findBy({
+    kind: "custom_css"
+  }, themePropertiesSchema));
+  var isCustomCSSEnabled = Boolean(enabledFeatures.customCSS);
+  var isCustomCSSProFeature = Boolean(proFeatures.customCSS);
+  var showCustomCSSAction = isCustomCSSInSchema && (isCustomCSSEnabled || isCustomCSSProFeature);
   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);
+      if (isPresent(onEditTheme)) onEditTheme(theme, section);else onCustomizeSystemTheme(theme, section);
     };
   };
   var showMoreDropdown = isFunction(onDeleteTheme);
@@ -1923,10 +2012,13 @@ var Card$1 = function Card(_ref) {
             testId: "quick-add-".concat(hyphenate(key)),
             onClick: handleQuickEdit(camelKey)
           }, key);
-        }), /*#__PURE__*/jsx(QuickActionRow, {
+        }), showCustomCSSAction && /*#__PURE__*/jsx(QuickActionRow, {
+          disabled: !isCustomCSSEnabled,
           icon: CodeBlock,
+          isProFeature: isCustomCSSProFeature,
           label: t("neetoThemes.build.leftSideBar.themes.customCSS"),
           testId: "quick-custom-css",
+          disabledTooltip: t("neetoThemes.common.proFeature.customCSS.description"),
           onClick: handleQuickEdit("customcss")
         })]
       })]
@@ -1935,8 +2027,21 @@ var Card$1 = function Card(_ref) {
 };
 var Card = /*#__PURE__*/memo(Card$1);
 
+var SectionHeading = function SectionHeading(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  return /*#__PURE__*/jsx(Typography, {
+    className: "neeto-ui-text-gray-600 px-6 uppercase tracking-wide lg:px-5 xl:px-6",
+    "data-testid": testId,
+    style: "body3",
+    weight: "semibold",
+    children: label
+  });
+};
+
 var Themes = function Themes(_ref) {
   var onEditTheme = _ref.onEditTheme,
+    onCustomizeSystemTheme = _ref.onCustomizeSystemTheme,
     _ref$themes = _ref.themes,
     themes = _ref$themes === void 0 ? [] : _ref$themes,
     _ref$defaultThemes = _ref.defaultThemes,
@@ -1950,7 +2055,6 @@ var Themes = function Themes(_ref) {
     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(),
@@ -1967,19 +2071,13 @@ var Themes = function Themes(_ref) {
     previewingTheme = _useThemeStore.previewingTheme;
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        entityType: store["entityType"],
-        entityId: store["entityId"]
+        entityType: store["entityType"]
       };
     }, shallow),
-    entityType = _useConfigStore.entityType,
-    entityId = _useConfigStore.entityId;
+    entityType = _useConfigStore.entityType;
   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,
@@ -2017,26 +2115,7 @@ var Themes = function Themes(_ref) {
     return theme.id !== activeThemeId && matchesSearch(theme);
   });
   var showActiveThemeSection = activeTheme && matchesSearch(activeTheme);
-  var handleCloneTheme = function handleCloneTheme(data, section) {
-    cloneTheme(data.id, {
-      onSuccess: function onSuccess(_ref2) {
-        var clonedTheme = _ref2.theme;
-        // A system theme is cloned when the user customizes it. Apply the
-        // clone right away so it becomes the active theme — the editor then
-        // won't prompt "apply this theme?" on save.
-        applyClonedTheme({
-          themeId: clonedTheme.id,
-          entityId: entityId,
-          entityType: entityType
-        }, {
-          onSuccess: function onSuccess() {
-            onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(clonedTheme);
-            onEditTheme(clonedTheme, section);
-          }
-        });
-      }
-    });
-  };
+  var hasNoMatchingThemes = !showActiveThemeSection && isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes);
   if (isLoading || isCurrentThemeLoading || isLoadingGlobalTheme) {
     return /*#__PURE__*/jsx("div", {
       className: "flex h-full w-full items-center justify-center",
@@ -2047,6 +2126,7 @@ var Themes = function Themes(_ref) {
     className: "neeto-ui-border-gray-200 mb-6 border-b px-6 pb-6 lg:px-5 xl:px-6",
     children: /*#__PURE__*/jsx(Card, {
       onApplyTheme: onApplyTheme,
+      onCustomizeSystemTheme: onCustomizeSystemTheme,
       thumbnail: thumbnail,
       active: true,
       isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === activeTheme.id,
@@ -2054,14 +2134,16 @@ var Themes = function Themes(_ref) {
       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", {
+  var systemThemesSection = isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxs("div", {
     className: "mb-6 space-y-3",
-    children: /*#__PURE__*/jsx("div", {
+    children: [/*#__PURE__*/jsx(SectionHeading, {
+      label: t("neetoThemes.build.leftSideBar.themes.systemThemes"),
+      testId: "system-themes-heading"
+    }), /*#__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) {
@@ -2074,15 +2156,17 @@ var Themes = function Themes(_ref) {
           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", {
+  var customThemesSection = isNotEmpty(filteredThemes) && /*#__PURE__*/jsxs("div", {
     className: "mb-6 space-y-3",
-    children: /*#__PURE__*/jsx("div", {
+    children: [/*#__PURE__*/jsx(SectionHeading, {
+      label: t("neetoThemes.build.leftSideBar.themes.customThemes"),
+      testId: "custom-themes-heading"
+    }), /*#__PURE__*/jsx("div", {
       className: "flex flex-col gap-4 px-6",
       "data-testid": "custom-themes",
       children: filteredThemes.map(function (theme) {
@@ -2099,12 +2183,11 @@ var Themes = function Themes(_ref) {
           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",
@@ -2116,7 +2199,7 @@ var Themes = function Themes(_ref) {
         autoComplete: "off",
         className: "mb-4 mt-1 px-6",
         placeholder: t("neetoThemes.common.searchThemes")
-      }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx(Typography, {
+      }), hasNoMatchingThemes && /*#__PURE__*/jsx(Typography, {
         className: "text-center",
         "data-testid": "no-data-title",
         style: "body2",
@@ -2147,6 +2230,8 @@ var TitleBar = function TitleBar(_ref) {
     }, shallow),
     entityType = _useConfigStore.entityType,
     helpDocUrl = _useConfigStore.helpDocUrl;
+  var _useQueryParams = useQueryParams(),
+    sourceThemeId = _useQueryParams.source;
   var isCustomizeScreen = isEditThemeRoute() || isNewThemeRoute();
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
   var isRTL = i18n.dir() === "rtl";
@@ -2173,7 +2258,7 @@ var TitleBar = function TitleBar(_ref) {
           lineHeight: "normal",
           style: "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")]
+          children: [isCustomizeScreen && !isCustomCssScreen && (isNewThemeRoute() && !isPresent(sourceThemeId) ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
         })]
       })
     });
@@ -2346,6 +2431,17 @@ var Sidebar = function Sidebar(_ref) {
       search: section ? "?section=".concat(section) : ""
     });
   };
+  var handleCustomizeSystemTheme = function handleCustomizeSystemTheme(theme, section) {
+    themeToEdit.current = theme;
+    var searchParams = new URLSearchParams({
+      source: theme.id
+    });
+    if (section) searchParams.set("section", section);
+    history.push({
+      pathname: buildPathname(routes.themes["new"]),
+      search: "?".concat(searchParams.toString())
+    });
+  };
   var onApplyTheme = function onApplyTheme(theme) {
     if (themeBeingApplied !== null && themeBeingApplied !== void 0 && themeBeingApplied.id) return;
     setThemeBeingApplied(theme);
@@ -2440,12 +2536,12 @@ var Sidebar = function Sidebar(_ref) {
               isCurrentThemeLoading: isCurrentThemeLoading,
               isSearchVisible: isSearchVisible,
               onApplyTheme: onApplyTheme,
-              onApplyThemeSuccess: onApplyThemeSuccess,
               themeBeingApplied: themeBeingApplied,
               themeToHighlight: themeToHighlight,
               themes: themes,
               thumbnail: thumbnail,
               isLoading: isLoading || isFetchingSchema,
+              onCustomizeSystemTheme: handleCustomizeSystemTheme,
               onDeleteTheme: handleDelete,
               onEditTheme: handleEditTheme
             });
@@ -2459,6 +2555,7 @@ var Sidebar = function Sidebar(_ref) {
               fixedAspectRatio: fixedAspectRatio,
               isApplyingTheme: isApplyingTheme,
               onApplyTheme: onApplyTheme,
+              onApplyThemeSuccess: onApplyThemeSuccess,
               onCreateTheme: onCreateTheme,
               onPropertiesChange: onPropertiesChange,
               onUpdateTheme: onUpdateTheme,
@@ -2475,6 +2572,7 @@ var Sidebar = function Sidebar(_ref) {
               fixedAspectRatio: fixedAspectRatio,
               isApplyingTheme: isApplyingTheme,
               onApplyTheme: onApplyTheme,
+              onApplyThemeSuccess: onApplyThemeSuccess,
               onCreateTheme: onCreateTheme,
               onPropertiesChange: onPropertiesChange,
               onUpdateTheme: onUpdateTheme,