@bigbinary/neeto-themes-frontend 1.1.13 → 1.1.15

package/dist/index.cjs.js

@@ -6,22 +6,31 @@ var shallow = require('zustand/shallow');
 var React = require('react');
 var i18next = require('i18next');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var neetoui = require('@bigbinary/neetoui');
+var Spinner = require('@bigbinary/neetoui/Spinner');
 var zustand = require('zustand');
 var neetoCist = require('@bigbinary/neeto-cist');
+var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
+require('@bigbinary/neetoui/Toastr');
 var reactQuery = require('react-query');
 var axios = require('axios');
 var ramda = require('ramda');
-var formik$1 = require('@bigbinary/neetoui/formik');
+var Button = require('@bigbinary/neetoui/Button');
+var Form = require('@bigbinary/neetoui/formik/Form');
 var yup = require('yup');
 var formik = require('formik');
+var Typography = require('@bigbinary/neetoui/Typography');
 var classnames = require('classnames');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
+var Select = require('@bigbinary/neetoui/Select');
+var Input = require('@bigbinary/neetoui/formik/Input');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var Tag = require('@bigbinary/neetoui/Tag');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,11 +54,20 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
 
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useConfigStore = zustand.create(reactUtils.withImmutableActions(function (set) {
@@ -493,7 +511,7 @@ var hexToRgba = function hexToRgba(hex) {
   return "".concat(r, ", ").concat(g, ", ").concat(b).concat(a !== undefined ? ", ".concat(a) : "");
 };
 
-var BASE_URL = "themes";
+var BASE_URL = "neeto_themes_engine";
 
 var show$1 = function show(entityId) {
   return axios__default["default"].get("".concat(BASE_URL, "/api/v1/theme/entities/").concat(entityId));
@@ -775,7 +793,7 @@ var Card$2 = function Card(_ref) {
     className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white space-y-3 border p-4"
   }, title && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "theme-properties",
     lineHeight: "normal",
     style: "h4",
@@ -2685,9 +2703,9 @@ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) {
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * Convenience wrapper component for the `useDropzone` hook
  *
@@ -6078,7 +6096,7 @@ var _reactInfiniteScroller2 = _interopRequireDefault(_reactInfiniteScroller);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties$3(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -6182,7 +6200,7 @@ var MasonryInfiniteScroller = (_temp2 = _class = function (_Component) {
           _props.packed;
           _props.position;
           _props.sizes;
-          var props = _objectWithoutProperties$3(_props, ['children', 'className', 'style', 'pack', 'packed', 'position', 'sizes']);
+          var props = _objectWithoutProperties(_props, ['children', 'className', 'style', 'pack', 'packed', 'position', 'sizes']);
 
       return _react2.default.createElement(
         _reactInfiniteScroller2.default,
@@ -6754,7 +6772,7 @@ var Modal = function Modal(_ref) {
   })))), /*#__PURE__*/React__default["default"].createElement("input", getInputProps()));
 };
 
-var _excluded$2 = ["key", "label"];
+var _excluded = ["key", "label"];
 var Menu = neetoui.Dropdown.Menu,
   MenuItem = neetoui.Dropdown.MenuItem;
 var ImageUploader = function ImageUploader(_ref) {
@@ -6874,7 +6892,7 @@ var ImageUploader = function ImageUploader(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Menu, null, options.map(function (_ref2) {
     var key = _ref2.key,
       label = _ref2.label,
-      otherProps = _objectWithoutProperties$2(_ref2, _excluded$2);
+      otherProps = _objectWithoutProperties$2(_ref2, _excluded);
     return /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, _extends$1({}, otherProps, {
       key: key
     }), label);
@@ -6929,7 +6947,7 @@ var ImageBlock = function ImageBlock(_ref) {
     "data-cy": "theme-style-".concat(utils.joinHyphenCase(label))
   }, label && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "style-fields-labels",
     style: "body2"
   }, label)), /*#__PURE__*/React__default["default"].createElement(ImageUploader, {
@@ -6967,10 +6985,10 @@ var ColorBlock = function ColorBlock(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
     "data-cy": "theme-style-".concat(utils.joinHyphenCase(label))
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "style-fields-labels",
     style: "body2"
-  }, label), /*#__PURE__*/React__default["default"].createElement(neetoui.ColorPicker, {
+  }, label), /*#__PURE__*/React__default["default"].createElement(ColorPicker__default["default"], {
     color: color,
     onChange: onChange,
     showTransparencyControl: showTransparencyControl,
@@ -6990,12 +7008,12 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
     "data-cy": "theme-style-".concat(utils.joinHyphenCase(label))
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "style-fields-labels",
     style: "body2"
   }, label), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-40"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+  }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
     onChange: onChange,
     options: options,
     placeholder: placeholder,
@@ -7091,7 +7109,7 @@ var ThemeMeta = reactUtils.withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React__default["default"].createElement(Card$2, {
     title: t("neetoThemes.common.name")
-  }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     "data-cy": "theme-name-property",
     name: "name"
@@ -7179,7 +7197,7 @@ var Customize = function Customize(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+  return /*#__PURE__*/React__default["default"].createElement(Form__default["default"], {
     formikProps: {
       initialValues: buildInitialValues(theme, themeConfig),
       validationSchema: THEME_VALIDATION_SCHEMA,
@@ -7201,13 +7219,13 @@ var Customize = function Customize(_ref) {
       });
     })), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 left-0 right-0 flex justify-end gap-x-2 px-4 py-6"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "reset-button",
       disabled: !dirty || isSubmitting,
       label: t("neetoThemes.buttons.reset"),
       style: "text",
       type: "reset"
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "save-changes-button",
       disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
       label: t("neetoThemes.buttons.save"),
@@ -7217,36 +7235,6 @@ var Customize = function Customize(_ref) {
   });
 };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-var _excluded = ["id", "name", "appliedCount", "properties"];
 var Card = function Card(_ref) {
   var _ref$active = _ref.active,
     active = _ref$active === void 0 ? false : _ref$active,
@@ -7259,30 +7247,21 @@ var Card = function Card(_ref) {
     isApplyingTheme = _ref.isApplyingTheme,
     onCloneTheme = _ref.onCloneTheme,
     isHighLightedTheme = _ref.isHighLightedTheme,
-    setThemeBeingApplied = _ref.setThemeBeingApplied;
+    setThemeBeingApplied = _ref.setThemeBeingApplied,
+    Thumbnail = _ref.thumbnail;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var id = theme.id,
     name = theme.name,
-    appliedCount = theme.appliedCount,
-    properties = theme.properties,
-    styles = _objectWithoutProperties(theme, _excluded);
+    appliedCount = theme.appliedCount;
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        themeConfig: store["themeConfig"],
         entityId: store["entityId"],
         entityType: store["entityType"]
       };
     }, shallow.shallow),
-    _useConfigStore$theme = _useConfigStore.themeConfig,
-    themeConfig = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme,
     entityId = _useConfigStore.entityId,
     entityType = _useConfigStore.entityType;
-  var _themeConfig = _slicedToArray$3(themeConfig, 2),
-    colorObject1 = _themeConfig[0],
-    colorObject2 = _themeConfig[1];
-  var primaryLabel = neetoCist.humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
-  var secondaryLabel = neetoCist.humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
   var handleApplyThemeClick = function handleApplyThemeClick() {
     if (isApplyingTheme) return;
     setThemeBeingApplied(theme);
@@ -7301,78 +7280,33 @@ var Card = function Card(_ref) {
   var handleDeleteTheme = function handleDeleteTheme() {
     return onDeleteTheme(id, name, appliedCount);
   };
-  var primaryColor = neetoCist.findBy({
-    key: colorObject1.key
-  }, properties).value;
-  var secondaryColor = neetoCist.findBy({
-    key: colorObject2.key
-  }, properties).value;
-  var backgroundImageUrl = theme[neetoCist.snakeToCamelCase(neetoCist.findBy({
-    useAsCardBackground: true
-  }, themeConfig).key)].url;
-  var isContentBackgroundEnabled = ramda.path(["layoutOptions", "isContentBackgroundEnabled"], styles);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "group space-y-2 pt-0.5",
     "data-cy": active ? "active-theme-card" : "theme-card",
-    id: theme.id
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("neeto-themes-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
-      "neeto-ui-border-gray-400": !active,
-      "neeto-ui-border-gray-800 neeto-themes-theme-thumbnail--active": active,
-      "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
-      "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
-    }),
-    style: {
-      backgroundColor: ramda.path(["colorScheme", "backgroundColor"], styles),
-      backgroundImage: backgroundImageUrl ? "url(".concat(backgroundImageUrl, ")") : "initial",
-      backgroundSize: "cover"
-    },
+    id: theme.id,
     onClick: function onClick() {
       return onSetPreviewTheme(theme);
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-rounded-lg p-3",
-    style: {
-      backgroundColor: isContentBackgroundEnabled && ramda.path(["layoutOptions", "contentBackgroundColor"], styles)
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mb-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h3",
-    weight: "semibold"
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    style: {
-      color: primaryColor
-    }
-  }, primaryLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-600",
-    style: "body2"
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    style: {
-      color: secondaryColor
-    }
-  }, secondaryLabel))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-rounded-lg h-5 w-12",
-    style: {
-      backgroundColor: ramda.path(["colorScheme", "buttonBackgroundColor"], styles)
-    }
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, Thumbnail && /*#__PURE__*/React__default["default"].createElement(Thumbnail, {
+    active: active,
+    isHighLightedTheme: isHighLightedTheme,
+    isPreviewing: isPreviewing,
+    theme: theme
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-start justify-between gap-1"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
     "data-cy": "theme-name",
     lineHeight: "snug",
     style: "body2"
   }, name), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center gap-2"
-  }, active ? /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+  }, active ? /*#__PURE__*/React__default["default"].createElement(Tag__default["default"], {
     className: "flex-shrink-0",
     "data-cy": "active-theme-label",
     label: t("neetoThemes.common.active"),
     style: "success"
-  }) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     className: "flex-shrink-0",
     "data-cy": "apply-theme-button",
     disabled: isApplyingTheme,
@@ -7424,7 +7358,8 @@ var Themes = function Themes(_ref) {
     didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
     isLoading = _ref.isLoading,
     currentTheme = _ref.currentTheme,
-    isCurrentThemeLoading = _ref.isCurrentThemeLoading;
+    isCurrentThemeLoading = _ref.isCurrentThemeLoading,
+    thumbnail = _ref.thumbnail;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useThemeUtils = useThemeUtils(),
@@ -7490,7 +7425,7 @@ var Themes = function Themes(_ref) {
   if (isLoading || isCurrentThemeLoading) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
+    }, /*#__PURE__*/React__default["default"].createElement(Spinner__default["default"], null));
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-themes-sidebar__scroll"
@@ -7502,10 +7437,10 @@ var Themes = function Themes(_ref) {
     className: "mb-4 mt-1 px-6",
     placeholder: t("neetoThemes.common.searchThemes"),
     onSearch: setSearchQuery
-  }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "text-center",
     style: "body2"
-  }, t("neetoThemes.common.noResultsFound")), neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoThemes.common.noResultsFound")), neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "my-4 px-4 uppercase lg:px-5 xl:px-6",
     "data-cy": "system-themes-header",
     style: "h6",
@@ -7517,6 +7452,7 @@ var Themes = function Themes(_ref) {
       onApplyTheme: onApplyTheme,
       setThemeBeingApplied: setThemeBeingApplied,
       theme: theme,
+      thumbnail: thumbnail,
       active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
       isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
       key: theme.id,
@@ -7526,7 +7462,7 @@ var Themes = function Themes(_ref) {
     });
   })))), neetoCist.isNotEmpty(filteredThemes) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-6 space-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "my-4 px-6 uppercase",
     "data-cy": "custom-themes-header",
     style: "h6",
@@ -7542,6 +7478,7 @@ var Themes = function Themes(_ref) {
       onEditTheme: onEditTheme,
       setThemeBeingApplied: setThemeBeingApplied,
       theme: theme,
+      thumbnail: thumbnail,
       active: isActive,
       isHighLightedTheme: theme.id === themeToHighlight,
       key: theme.id,
@@ -7565,7 +7502,7 @@ var TitleBar = function TitleBar(_ref) {
       className: "neeto-themes-sidebar__header px-4"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center justify-start space-x-2"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "customize-themes-back-button",
       icon: neetoIcons.LeftArrow,
       iconPosition: "left",
@@ -7575,7 +7512,7 @@ var TitleBar = function TitleBar(_ref) {
         position: "top"
       },
       onClick: handleBackPress
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "themes-header",
       lineHeight: "normal",
       style: "h3",
@@ -7586,14 +7523,14 @@ var TitleBar = function TitleBar(_ref) {
     className: "neeto-themes-sidebar__header px-4 lg:px-5 xl:px-6"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "themes-header",
     lineHeight: "normal",
     style: "h3",
     weight: "semibold"
   }, t("neetoThemes.build.leftSideBar.headerTabs.themes")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "self-end"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     "data-cy": "customize-themes-add-theme-button",
     icon: neetoIcons.Plus,
     iconPosition: "left",
@@ -7606,9 +7543,10 @@ var TitleBar = function TitleBar(_ref) {
   }))));
 };
 
-var MemoizedAlert = /*#__PURE__*/React.memo(neetoui.Alert);
-var Sidebar = function Sidebar() {
+var MemoizedAlert = /*#__PURE__*/React.memo(Alert__default["default"]);
+var Sidebar = function Sidebar(_ref) {
   var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3;
+  var thumbnail = _ref.thumbnail;
   var _useState = React.useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray$3(_useState, 2),
     currentScreen = _useState2[0],
@@ -7741,6 +7679,7 @@ var Sidebar = function Sidebar() {
     isCurrentThemeLoading: isCurrentThemeLoading,
     themeToHighlight: themeToHighlight,
     themes: themes,
+    thumbnail: thumbnail,
     isLoading: isLoading || isFetchingConfig,
     onDeleteTheme: handleDelete,
     onEditTheme: handleEditTheme
@@ -7765,7 +7704,8 @@ var Sidebar = function Sidebar() {
 var NeetoThemes = function NeetoThemes(_ref) {
   var children = _ref.children,
     entityType = _ref.entityType,
-    entityId = _ref.entityId;
+    entityId = _ref.entityId,
+    thumbnail = _ref.thumbnail;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         isCurrentThemeLoading: store["isCurrentThemeLoading"]
@@ -7786,11 +7726,13 @@ var NeetoThemes = function NeetoThemes(_ref) {
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-themes__wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(Sidebar, null), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Sidebar, {
+    thumbnail: thumbnail
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-themes-preview__wrapper"
   }, isCurrentThemeLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "m-auto flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : children));
+  }, /*#__PURE__*/React__default["default"].createElement(Spinner__default["default"], null)) : children));
 };
 var index = reactUtils.withTitle(NeetoThemes, i18next.t("neetoThemes.common.design"));