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

package/dist/v2/NeetoThemesBuilder.js

@@ -1,10 +1,10 @@
 import { shallow } from 'zustand/shallow';
 import { Suspense, lazy, useId, useEffect, createElement, useState, memo, useRef, useCallback, useMemo } from 'react';
-import { Toastr, Spinner, Typography, Button, Label, ColorPicker, Select, Slider, Checkbox, Switch, Input, Tooltip, Popover, Alert } from '@bigbinary/neeto-atoms';
+import { Toastr, Spinner, Typography, Button, Label, ColorPicker, Select, Slider, Checkbox, Switch, Input, Tooltip, Popover, Badge, Alert } from '@bigbinary/neeto-atoms';
 import { hyphenate, isPresent, 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 { 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-L0AWdlhf.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, d as useSyncExpandedSectionFromUrl } from '../useExpandedSection-MjgB7rh6.js';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
@@ -15,7 +15,7 @@ import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/v2/u
 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 { isEmpty, negate, isNotNil } from 'ramda';
+import { isEmpty, omit, negate, isNotNil } from 'ramda';
 import i18n, { t } from 'i18next';
 import * as yup from 'yup';
 import { useFormikContext, Field } from 'formik';
@@ -741,6 +741,15 @@ var buildProperties = function buildProperties(values, condition, themePropertie
     return !imageKeys.has(dependsOn);
   });
 };
+var buildSystemThemeCopy = function buildSystemThemeCopy(systemTheme) {
+  if (!systemTheme) return null;
+  return _objectSpread$2(_objectSpread$2({}, omit(["id"], systemTheme)), {}, {
+    name: t("neetoThemes.common.cloneName", {
+      name: systemTheme.name
+    }),
+    properties: systemTheme.properties.map(omit(["id", "themeId"]))
+  });
+};
 
 var AlignmentBlock = withT(function (_ref) {
   var t = _ref.t,
@@ -1359,6 +1368,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,
@@ -1377,6 +1387,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"],
@@ -1385,6 +1396,7 @@ var Customize = function Customize(_ref) {
       };
     }, shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    entityId = _useConfigStore.entityId,
     entityType = _useConfigStore.entityType,
     isFetchingSchema = _useConfigStore.isFetchingSchema,
     helpPopoverProps = _useConfigStore.helpPopoverProps,
@@ -1392,6 +1404,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"],
@@ -1412,22 +1427,75 @@ 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 _useCreateTheme = useCreateTheme(),
     createTheme = _useCreateTheme.mutateAsync,
     isCreating = _useCreateTheme.isPending;
   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 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,
@@ -1435,20 +1503,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;
@@ -1474,7 +1529,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
       }),
@@ -1573,7 +1628,7 @@ var Customize = function Customize(_ref) {
               label: t("neetoThemes.buttons.save"),
               loading: isSubmitting,
               type: "submit",
-              disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid,
+              disabled: !dirty && (themeToCustomize === null || themeToCustomize === void 0 ? void 0 : themeToCustomize.id) || isSubmitting || !isValid,
               onClick: function onClick() {
                 if (isNotAppliedCondition) {
                   setIsNotAppliedPopoverOpen(true);
@@ -1620,26 +1675,49 @@ 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: "border-border hover:bg-muted flex w-full cursor-pointer items-center gap-2 border-t px-3 py-1.5 text-start transition-colors",
-    "data-testid": testId,
-    type: "button",
-    children: [/*#__PURE__*/jsx(Icon, {
-      className: "text-muted-foreground",
-      size: 16
-    }), /*#__PURE__*/jsx(Typography, {
-      className: "text-sm",
-      variant: "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: "border-border border-t",
+      children: /*#__PURE__*/jsxs("button", {
+        disabled: disabled,
+        onClick: onClick,
+        "data-testid": testId,
+        type: "button",
+        className: classnames("flex w-full items-center gap-2 px-3 py-1.5 text-start transition-colors", {
+          "hover:bg-muted cursor-pointer": !disabled,
+          "cursor-not-allowed opacity-50": disabled
+        }),
+        children: [/*#__PURE__*/jsx(Icon, {
+          className: "text-muted-foreground",
+          size: 16
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "text-sm",
+          variant: "body2",
+          children: label
+        }), isProFeature && /*#__PURE__*/jsx(Badge, {
+          "data-testid": "".concat(testId, "-pro-badge"),
+          label: t("neetoThemes.common.pro"),
+          size: "sm",
+          variant: "purple-subtle"
+        })]
+      })
+    })
   });
-};
+});
 
 var Thumbnail = function Thumbnail(_ref) {
   var _theme$snakeToCamelCa, _findBy, _findBy2;
@@ -1728,7 +1806,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,
@@ -1737,22 +1815,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);
@@ -1885,10 +1973,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: Code,
+          isProFeature: isCustomCSSProFeature,
           label: t("neetoThemes.build.leftSideBar.themes.customCSS"),
           testId: "quick-custom-css",
+          disabledTooltip: t("neetoThemes.common.proFeature.customCSS.description"),
           onClick: handleQuickEdit("customcss")
         })]
       })]
@@ -1897,8 +1988,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: "px-6 text-xs font-semibold uppercase tracking-wide lg:px-5 xl:px-6",
+    color: "muted",
+    "data-testid": testId,
+    variant: "body2",
+    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,
@@ -1912,7 +2016,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(),
@@ -1929,19 +2032,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,
@@ -1979,23 +2076,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;
-        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",
@@ -2006,6 +2087,7 @@ var Themes = function Themes(_ref) {
     className: "border-border 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,
@@ -2013,14 +2095,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) {
@@ -2033,15 +2117,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) {
@@ -2058,12 +2144,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",
@@ -2077,7 +2162,7 @@ var Themes = function Themes(_ref) {
           autoComplete: "off",
           placeholder: t("neetoThemes.common.searchThemes")
         })
-      }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx(Typography, {
+      }), hasNoMatchingThemes && /*#__PURE__*/jsx(Typography, {
         className: "text-center",
         color: "muted",
         "data-testid": "no-data-title",
@@ -2109,6 +2194,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";
@@ -2133,7 +2220,7 @@ var TitleBar = function TitleBar(_ref) {
         }), /*#__PURE__*/jsxs(Typography, {
           "data-testid": "themes-header",
           variant: "h5",
-          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")]
         })]
       })
     });
@@ -2306,6 +2393,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);
@@ -2400,12 +2498,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
             });
@@ -2419,6 +2517,7 @@ var Sidebar = function Sidebar(_ref) {
               fixedAspectRatio: fixedAspectRatio,
               isApplyingTheme: isApplyingTheme,
               onApplyTheme: onApplyTheme,
+              onApplyThemeSuccess: onApplyThemeSuccess,
               onCreateTheme: onCreateTheme,
               onPropertiesChange: onPropertiesChange,
               onUpdateTheme: onUpdateTheme,
@@ -2435,6 +2534,7 @@ var Sidebar = function Sidebar(_ref) {
               fixedAspectRatio: fixedAspectRatio,
               isApplyingTheme: isApplyingTheme,
               onApplyTheme: onApplyTheme,
+              onApplyThemeSuccess: onApplyThemeSuccess,
               onCreateTheme: onCreateTheme,
               onPropertiesChange: onPropertiesChange,
               onUpdateTheme: onUpdateTheme,