@bigbinary/neeto-themes-frontend 1.2.1 → 1.2.3

package/dist/index.js

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useEffect, createElement, memo, useState, useRef, useCallback } from 'react';
+import { useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
 import { t as t$1 } from 'i18next';
 import { withImmutableActions, useMutationWithInvalidation, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
@@ -7,7 +7,7 @@ import { create as create$1 } from 'zustand';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { isNotPresent, snakeToCamelCase, filterBy, isPresent, isNot, findBy, findIndexBy, toLabelAndValue, humanize, isNotEmpty } from '@bigbinary/neeto-cist';
 import Alert from '@bigbinary/neetoui/Alert';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import '@babel/runtime/helpers/asyncToGenerator';
 import '@babel/runtime/regenerator';
 import '@bigbinary/neetoui/Toastr';
@@ -16,11 +16,13 @@ import axios from 'axios';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { prop, isEmpty, negate } from 'ramda';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Close, LeftArrow, Plus } from '@bigbinary/neeto-icons';
 import Button from '@bigbinary/neetoui/Button';
+import Popover from '@bigbinary/neetoui/Popover';
+import Typography from '@bigbinary/neetoui/Typography';
 import Form from '@bigbinary/neetoui/formik/Form';
 import * as yup from 'yup';
 import { useFormikContext } from 'formik';
-import Typography from '@bigbinary/neetoui/Typography';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
@@ -30,10 +32,8 @@ import { Slider } from 'antd';
 import Switch from '@bigbinary/neetoui/Switch';
 import Input from '@bigbinary/neetoui/formik/Input';
 import Search from '@bigbinary/neeto-molecules/Search';
-import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
-import Tag from '@bigbinary/neetoui/Tag';
 import classnames from 'classnames';
-import { LeftArrow, Plus } from '@bigbinary/neeto-icons';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useConfigStore = create$1(withImmutableActions(function (set) {
@@ -545,8 +545,8 @@ var ColorBlock = function ColorBlock(_ref) {
   });
 };
 
-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), !0).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; }
+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), !0).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; }
 var FontPickerBlock = function FontPickerBlock(_ref) {
   var label = _ref.label,
     _ref$placeholder = _ref.placeholder,
@@ -572,7 +572,7 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
         styles: {
           option: function option(styles, _ref2) {
             var data = _ref2.data;
-            return _objectSpread$2(_objectSpread$2({}, styles), {}, {
+            return _objectSpread$3(_objectSpread$3({}, styles), {}, {
               fontFamily: data.value
             });
           }
@@ -637,8 +637,8 @@ var SliderBlock = function SliderBlock(_ref) {
 };
 
 var _excluded = ["label", "name"];
-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), !0).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; }
+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), !0).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 SwitchBlock = function SwitchBlock(_ref) {
   var label = _ref.label,
     name = _ref.name,
@@ -648,23 +648,22 @@ var SwitchBlock = function SwitchBlock(_ref) {
     children: [/*#__PURE__*/jsx(Typography, {
       style: "body2",
       children: label
-    }), /*#__PURE__*/jsx(Switch, _objectSpread$1({}, _objectSpread$1({
+    }), /*#__PURE__*/jsx(Switch, _objectSpread$2({}, _objectSpread$2({
       name: name
     }, switchProps)))]
   });
 };
 
-var Properties = function Properties() {
+var Properties = function Properties(_ref) {
+  var onPropertiesChange = _ref.onPropertiesChange;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        themePropertiesSchema: store["themePropertiesSchema"],
-        onPropertiesChange: store["onPropertiesChange"]
+        themePropertiesSchema: store["themePropertiesSchema"]
       };
     }, shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
-    onPropertiesChange = _useConfigStore.onPropertiesChange;
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -678,9 +677,9 @@ var Properties = function Properties() {
     setVariable = _useThemeUtils.setVariable,
     setTheme = _useThemeUtils.setTheme;
   var handleColorChange = function handleColorChange(name) {
-    return function (_ref) {
-      var hex = _ref.hex,
-        rgb = _ref.rgb;
+    return function (_ref2) {
+      var hex = _ref2.hex,
+        rgb = _ref2.rgb;
       handleChange(name, hex, "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a));
     };
   };
@@ -717,27 +716,27 @@ var Properties = function Properties() {
       className: "divide-y divide-gray-200",
       children: [filterBy({
         kind: "font_family"
-      }, values.properties).map(function (_ref2) {
-        var key = _ref2.key,
-          value = _ref2.value,
-          kind = _ref2.kind;
+      }, values.properties).map(function (_ref3) {
+        var key = _ref3.key,
+          value = _ref3.value,
+          kind = _ref3.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(FontPickerBlock, {
           label: buildLabel(key, kind),
           options: FONT_OPTIONS,
           value: findBy({
             value: value || null
           }, FONT_OPTIONS),
-          onChange: function onChange(_ref3) {
-            var value = _ref3.value;
+          onChange: function onChange(_ref4) {
+            var value = _ref4.value;
             handleChange(key, value);
           }
         }, key);
       }), filterBy({
         kind: "color"
-      }, values.properties).map(function (_ref4) {
-        var key = _ref4.key,
-          value = _ref4.value,
-          kind = _ref4.kind;
+      }, values.properties).map(function (_ref5) {
+        var key = _ref5.key,
+          value = _ref5.value,
+          kind = _ref5.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(ColorBlock, {
           color: value,
           label: buildLabel(key, kind),
@@ -745,10 +744,10 @@ var Properties = function Properties() {
         }, key);
       }), filterBy({
         kind: "overlay_opacity"
-      }, values.properties).map(function (_ref5) {
-        var key = _ref5.key,
-          value = _ref5.value,
-          kind = _ref5.kind;
+      }, values.properties).map(function (_ref6) {
+        var key = _ref6.key,
+          value = _ref6.value,
+          kind = _ref6.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
           label: buildLabel(key, kind),
           marks: OVERLAY_OPACITY_SLIDER_MARKS,
@@ -761,11 +760,11 @@ var Properties = function Properties() {
         }, key);
       }), filterBy({
         kind: "position_selector"
-      }, values.properties).map(function (_ref6) {
+      }, values.properties).map(function (_ref7) {
         var _findBy;
-        var key = _ref6.key,
-          kind = _ref6.kind,
-          value = _ref6.value;
+        var key = _ref7.key,
+          kind = _ref7.kind,
+          value = _ref7.value;
         var index = findIndexBy({
           key: key
         }, values.properties);
@@ -783,10 +782,10 @@ var Properties = function Properties() {
         }, key);
       }), filterBy({
         kind: "boolean"
-      }, values.properties).map(function (_ref7) {
-        var key = _ref7.key,
-          kind = _ref7.kind,
-          value = _ref7.value;
+      }, values.properties).map(function (_ref8) {
+        var key = _ref8.key,
+          kind = _ref8.kind,
+          value = _ref8.value;
         var index = findIndexBy({
           key: key
         }, values.properties);
@@ -814,20 +813,33 @@ var ThemeMeta = withT(function (_ref) {
   });
 });
 
-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), !0).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; }
+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), !0).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 Customize = function Customize(_ref) {
   var themeId = _ref.themeId,
     theme = _ref.theme,
-    onCreateTheme = _ref.onCreateTheme;
+    onCreateTheme = _ref.onCreateTheme,
+    onApplyTheme = _ref.onApplyTheme,
+    isApplyingTheme = _ref.isApplyingTheme,
+    onPropertiesChange = _ref.onPropertiesChange;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverInstance = _useState2[0],
+    setPopoverInstance = _useState2[1];
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        themePropertiesSchema: store["themePropertiesSchema"]
+        themePropertiesSchema: store["themePropertiesSchema"],
+        entityType: store["entityType"]
       };
     }, shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    entityType = _useConfigStore.entityType;
+  var _useThemeUtils = useThemeUtils(),
+    currentTheme = _useThemeUtils.currentTheme;
+  var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+  var submitBtnRef = useRef(null);
   var _useCreateTheme = useCreateTheme(),
     createTheme = _useCreateTheme.mutate,
     isCreating = _useCreateTheme.isLoading;
@@ -838,7 +850,7 @@ var Customize = function Customize(_ref) {
   var onSubmit = function onSubmit(values, _ref2) {
     var resetForm = _ref2.resetForm;
     var imageData = buildImageData(values, themePropertiesSchema);
-    var themeToSave = _objectSpread({
+    var themeToSave = _objectSpread$1({
       propertiesAttributes: values.properties,
       name: values.name
     }, imageData);
@@ -846,6 +858,9 @@ var Customize = function Customize(_ref) {
       return createTheme(themeToSave, {
         onSuccess: function onSuccess(_ref3) {
           var theme = _ref3.theme;
+          resetForm({
+            values: values
+          });
           onCreateTheme(theme);
         }
       });
@@ -870,7 +885,9 @@ var Customize = function Customize(_ref) {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxs("div", {
           className: "flex flex-col gap-6 p-4",
-          children: [/*#__PURE__*/jsx(ThemeMeta, {}), /*#__PURE__*/jsx(Properties, {}), filterBy({
+          children: [/*#__PURE__*/jsx(ThemeMeta, {}), /*#__PURE__*/jsx(Properties, {
+            onPropertiesChange: onPropertiesChange
+          }), filterBy({
             kind: "image"
           }, themePropertiesSchema).map(function (_ref5) {
             var key = _ref5.key;
@@ -891,14 +908,127 @@ var Customize = function Customize(_ref) {
             disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
             label: t("neetoThemes.buttons.save"),
             loading: isSubmitting,
+            ref: submitBtnRef,
             type: "submit"
           })]
+        }), /*#__PURE__*/jsx(Popover, {
+          appendTo: function appendTo() {
+            return document.body;
+          },
+          disabled: isEditingCurrentlyAppliedTheme,
+          position: "top",
+          reference: submitBtnRef,
+          trigger: "click",
+          content: /*#__PURE__*/jsxs("div", {
+            className: "flex flex-col items-start gap-2",
+            children: [/*#__PURE__*/jsx(Button, {
+              className: "absolute right-1 top-1 z-0",
+              icon: Close,
+              size: "small",
+              style: "text",
+              onClick: function onClick() {
+                var _popoverInstance$hide;
+                return popoverInstance === null || popoverInstance === void 0 || (_popoverInstance$hide = popoverInstance.hide) === null || _popoverInstance$hide === void 0 ? void 0 : _popoverInstance$hide.call(popoverInstance);
+              }
+            }), /*#__PURE__*/jsx(Typography, {
+              className: "w-72 pr-5",
+              style: "body2",
+              weight: "normal",
+              children: /*#__PURE__*/jsx(Trans, {
+                components: {
+                  bold: /*#__PURE__*/jsx("strong", {})
+                },
+                i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
+                values: {
+                  entityType: entityType
+                }
+              })
+            }), /*#__PURE__*/jsx(Button, {
+              disabled: isApplyingTheme,
+              label: t("neetoThemes.buttons.applyThisTheme"),
+              loading: isApplyingTheme,
+              onClick: function onClick() {
+                return onApplyTheme(theme);
+              }
+            })]
+          }),
+          onMount: setPopoverInstance
         })]
       });
     }
   });
 };
 
+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), !0).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 Check = function Check(props) {
+  return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
+    fill: "none",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxs("g", {
+      filter: "url(#filter0_d_9519_161)",
+      children: [/*#__PURE__*/jsx("rect", {
+        fill: "#4558F9",
+        height: "20",
+        rx: "10",
+        width: "20",
+        x: "2",
+        y: "2"
+      }), /*#__PURE__*/jsx("rect", {
+        height: "20",
+        rx: "10",
+        stroke: "#fff",
+        strokeWidth: "1.5",
+        width: "20",
+        x: "2",
+        y: "2"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M16.375 9.5l-5.95 6.25-2.8-2.941",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.25"
+      })]
+    }), /*#__PURE__*/jsx("defs", {
+      children: /*#__PURE__*/jsxs("filter", {
+        colorInterpolationFilters: "sRGB",
+        filterUnits: "userSpaceOnUse",
+        height: "23.5",
+        id: "filter0_d_9519_161",
+        width: "23.5",
+        x: "0.25",
+        y: "0.25",
+        children: [/*#__PURE__*/jsx("feFlood", {
+          floodOpacity: "0",
+          result: "BackgroundImageFix"
+        }), /*#__PURE__*/jsx("feColorMatrix", {
+          "in": "SourceAlpha",
+          result: "hardAlpha",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        }), /*#__PURE__*/jsx("feOffset", {}), /*#__PURE__*/jsx("feGaussianBlur", {
+          stdDeviation: "0.5"
+        }), /*#__PURE__*/jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "out"
+        }), /*#__PURE__*/jsx("feColorMatrix", {
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"
+        }), /*#__PURE__*/jsx("feBlend", {
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_9519_161"
+        }), /*#__PURE__*/jsx("feBlend", {
+          "in": "SourceGraphic",
+          in2: "effect1_dropShadow_9519_161",
+          result: "shape"
+        })]
+      })
+    })]
+  }));
+};
+
 var Thumbnail = function Thumbnail(_ref) {
   var _theme$snakeToCamelCa, _findBy, _findBy2;
   var active = _ref.active,
@@ -985,35 +1115,17 @@ var Card = function Card(_ref) {
     onSetPreviewTheme = _ref.onSetPreviewTheme,
     onDeleteTheme = _ref.onDeleteTheme,
     onEditTheme = _ref.onEditTheme,
-    applyTheme = _ref.applyTheme,
     theme = _ref.theme,
     isApplyingTheme = _ref.isApplyingTheme,
     onCloneTheme = _ref.onCloneTheme,
     isHighLightedTheme = _ref.isHighLightedTheme,
-    setThemeBeingApplied = _ref.setThemeBeingApplied,
+    onApplyTheme = _ref.onApplyTheme,
     Thumbnail$1 = _ref.thumbnail;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var id = theme.id,
     name = theme.name,
     appliedCount = theme.appliedCount;
-  var _useConfigStore = useConfigStore(function (store) {
-      return {
-        entityId: store["entityId"],
-        entityType: store["entityType"]
-      };
-    }, shallow),
-    entityId = _useConfigStore.entityId,
-    entityType = _useConfigStore.entityType;
-  var handleApplyThemeClick = function handleApplyThemeClick() {
-    if (isApplyingTheme) return;
-    setThemeBeingApplied(theme);
-    applyTheme({
-      themeId: theme.id,
-      entityId: entityId,
-      entityType: entityType
-    });
-  };
   var handleCloneTheme = function handleCloneTheme() {
     return onCloneTheme(theme);
   };
@@ -1023,55 +1135,73 @@ var Card = function Card(_ref) {
   var handleDeleteTheme = function handleDeleteTheme() {
     return onDeleteTheme(id, name, appliedCount);
   };
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "group space-y-2 pt-0.5",
     "data-cy": active ? "active-theme-card" : "theme-card",
     id: theme.id,
-    children: [/*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg cursor-pointer border transition-all duration-300 ease-in-out", {
+        "neeto-ui-border-gray-200": !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: 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: "flex items-start justify-between gap-1",
-      children: [/*#__PURE__*/jsx(Typography, {
-        className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
-        "data-cy": "theme-name",
-        lineHeight: "snug",
-        style: "body2",
-        children: name
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-rounded-lg relative overflow-hidden rounded-bl-none rounded-br-none transition-all duration-300 ease-in-out group-hover:opacity-85",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "absolute right-0 top-0 p-3",
+          children: active ? /*#__PURE__*/jsx(Check, {
+            className: "flex-shrink-0",
+            "data-cy": "active-theme-label"
+          }) : /*#__PURE__*/jsx("div", {
+            className: classnames({
+              hidden: !isPreviewing,
+              "group-hover:block": true
+            }),
+            children: /*#__PURE__*/jsx(Button, {
+              className: "neeto-themes-theme-thumbnail__apply-btn flex-shrink-0",
+              "data-cy": "apply-theme-button",
+              disabled: isApplyingTheme,
+              label: t("neetoThemes.common.apply"),
+              loading: isApplyingTheme,
+              size: "small",
+              style: "tertiary",
+              onClick: function onClick() {
+                return onApplyTheme(theme);
+              }
+            })
+          })
+        }), 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: "flex items-center gap-2",
-        children: [active ? /*#__PURE__*/jsx(Tag, {
-          className: "flex-shrink-0",
-          "data-cy": "active-theme-label",
-          label: t("neetoThemes.common.active"),
-          style: "success"
-        }) : /*#__PURE__*/jsx(Button, {
-          className: "flex-shrink-0",
-          "data-cy": "apply-theme-button",
-          disabled: isApplyingTheme,
-          label: t("neetoThemes.common.apply"),
-          loading: isApplyingTheme,
-          size: "small",
-          style: "link",
-          onClick: handleApplyThemeClick
+        className: "flex items-start justify-between gap-1 p-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
+          "data-cy": "theme-name",
+          lineHeight: "snug",
+          style: "body2",
+          children: name
         }), /*#__PURE__*/jsx(MoreDropdown, {
           dropdownButtonProps: {
             size: "small"
           },
           dropdownProps: {
-            strategy: "fixed"
+            strategy: "fixed",
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
           },
           menuItems: [{
             key: "edit",
@@ -1095,7 +1225,7 @@ var Card = function Card(_ref) {
           }]
         })]
       })]
-    })]
+    })
   });
 };
 var Card$1 = /*#__PURE__*/memo(Card);
@@ -1108,12 +1238,14 @@ var Themes = function Themes(_ref) {
     defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
     onDeleteTheme = _ref.onDeleteTheme,
     themeToHighlight = _ref.themeToHighlight,
-    highlightTheme = _ref.highlightTheme,
     didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
     isLoading = _ref.isLoading,
     currentTheme = _ref.currentTheme,
     isCurrentThemeLoading = _ref.isCurrentThemeLoading,
-    thumbnail = _ref.thumbnail;
+    thumbnail = _ref.thumbnail,
+    themeBeingApplied = _ref.themeBeingApplied,
+    onApplyTheme = _ref.onApplyTheme,
+    isApplyingTheme = _ref.isApplyingTheme;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useThemeUtils = useThemeUtils(),
@@ -1130,24 +1262,8 @@ var Themes = function Themes(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     searchQuery = _useState2[0],
     setSearchQuery = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    themeBeingApplied = _useState4[0],
-    setThemeBeingApplied = _useState4[1];
   var _useCloneTheme = useCloneTheme(),
     cloneTheme = _useCloneTheme.mutate;
-  var _useApplyTheme = useApplyTheme({
-      onSuccess: function onSuccess(_ref2) {
-        var theme = _ref2.theme;
-        setTheme(theme);
-        setThemeState({
-          previewingTheme: theme
-        });
-        setThemeBeingApplied({});
-      }
-    }),
-    applyTheme = _useApplyTheme.mutate,
-    isApplyingTheme = _useApplyTheme.isLoading;
   useEffect(function () {
     if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
     didScrollActiveThemeIntoView.current = true;
@@ -1170,9 +1286,9 @@ var Themes = function Themes(_ref) {
   var isSearchFieldVisible = (themes === null || themes === void 0 ? void 0 : themes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
   var handleCloneTheme = function handleCloneTheme(data) {
     cloneTheme(data.id, {
-      onSuccess: function onSuccess(_ref3) {
-        var clonedTheme = _ref3.theme;
-        highlightTheme(clonedTheme);
+      onSuccess: function onSuccess(_ref2) {
+        var clonedTheme = _ref2.theme;
+        onEditTheme(clonedTheme);
       }
     });
   };
@@ -1207,8 +1323,7 @@ var Themes = function Themes(_ref) {
           className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
           children: filteredDefaultThemes.map(function (theme) {
             return /*#__PURE__*/createElement(Card$1, {
-              applyTheme: applyTheme,
-              setThemeBeingApplied: setThemeBeingApplied,
+              onApplyTheme: onApplyTheme,
               theme: theme,
               thumbnail: thumbnail,
               active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
@@ -1235,10 +1350,9 @@ var Themes = function Themes(_ref) {
           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$1, {
-            applyTheme: applyTheme,
             isPreviewing: isPreviewing,
+            onApplyTheme: onApplyTheme,
             onEditTheme: onEditTheme,
-            setThemeBeingApplied: setThemeBeingApplied,
             theme: theme,
             thumbnail: thumbnail,
             active: isActive,
@@ -1318,7 +1432,8 @@ var TitleBar = function TitleBar(_ref) {
 var MemoizedAlert = /*#__PURE__*/memo(Alert);
 var Sidebar = function Sidebar(_ref) {
   var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3;
-  var thumbnail = _ref.thumbnail;
+  var thumbnail = _ref.thumbnail,
+    onPropertiesChange = _ref.onPropertiesChange;
   var _useState = useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray(_useState, 2),
     currentScreen = _useState2[0],
@@ -1331,6 +1446,10 @@ var Sidebar = function Sidebar(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     themeToHighlight = _useState6[0],
     setThemeToHighlight = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    themeBeingApplied = _useState8[0],
+    setThemeBeingApplied = _useState8[1];
   var _useConfigStore = useConfigStore(function (store) {
       return {
         entityType: store["entityType"],
@@ -1369,12 +1488,34 @@ var Sidebar = function Sidebar(_ref) {
   var _useDeleteTheme = useDeleteTheme(),
     deleteTheme = _useDeleteTheme.mutate,
     isDeleting = _useDeleteTheme.isLoading;
+  var _useApplyTheme = useApplyTheme({
+      onSuccess: function onSuccess(_ref2) {
+        var theme = _ref2.theme;
+        setTheme(theme);
+        setThemeState({
+          previewingTheme: theme
+        });
+        setThemeBeingApplied({});
+        setCurrentScreen(DESIGN_SCREENS.THEMES);
+      }
+    }),
+    applyTheme = _useApplyTheme.mutate,
+    isApplyingTheme = _useApplyTheme.isLoading;
   var themeToDelete = useRef(null);
   var themeToEdit = useRef(null);
   var handleEditTheme = function handleEditTheme(theme) {
     themeToEdit.current = theme;
     setCurrentScreen(DESIGN_SCREENS.Customize);
   };
+  var onApplyTheme = function onApplyTheme(theme) {
+    if (isApplyingTheme) return;
+    setThemeBeingApplied(theme);
+    applyTheme({
+      themeId: theme.id,
+      entityId: entityId,
+      entityType: entityType
+    });
+  };
   var handleBackPress = function handleBackPress() {
     setTheme(currentTheme);
     setThemeState({
@@ -1393,13 +1534,11 @@ var Sidebar = function Sidebar(_ref) {
     setThemeToHighlight(themeToHighlight.id);
   };
   var onCreateTheme = function onCreateTheme(createdTheme) {
-    setCurrentScreen(DESIGN_SCREENS.THEMES);
+    themeToEdit.current = createdTheme;
     setTheme(createdTheme);
     setThemeState({
       previewingTheme: createdTheme
     });
-    highlightTheme(createdTheme);
-    themeToEdit.current = null;
   };
   var handleDelete = function handleDelete(themeId, name, appliedCount) {
     setIsDeleteAlertOpen(true);
@@ -1448,7 +1587,10 @@ var Sidebar = function Sidebar(_ref) {
       defaultThemes: defaultThemes,
       didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
       highlightTheme: highlightTheme,
+      isApplyingTheme: isApplyingTheme,
       isCurrentThemeLoading: isCurrentThemeLoading,
+      onApplyTheme: onApplyTheme,
+      themeBeingApplied: themeBeingApplied,
       themeToHighlight: themeToHighlight,
       themes: themes,
       thumbnail: thumbnail,
@@ -1456,7 +1598,10 @@ var Sidebar = function Sidebar(_ref) {
       onDeleteTheme: handleDelete,
       onEditTheme: handleEditTheme
     }) : /*#__PURE__*/jsx(Customize, {
+      isApplyingTheme: isApplyingTheme,
+      onApplyTheme: onApplyTheme,
       onCreateTheme: onCreateTheme,
+      onPropertiesChange: onPropertiesChange,
       theme: themeToEdit.current,
       themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
     }), /*#__PURE__*/jsx(MemoizedAlert, {
@@ -1495,13 +1640,13 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   useEffect(function () {
     setConfigState({
       entityType: entityType,
-      entityId: entityId,
-      onPropertiesChange: onPropertiesChange
+      entityId: entityId
     });
   }, []);
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsx(Sidebar, {
+      onPropertiesChange: onPropertiesChange,
       thumbnail: thumbnail
     }), /*#__PURE__*/jsx("div", {
       className: "neeto-themes-preview__wrapper",
@@ -1516,7 +1661,7 @@ var index = withTitle(NeetoThemesBuilder, t$1("neetoThemes.common.design"));
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-themes__wrapper{display:flex;width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));box-shadow:var(--neeto-ui-shadow-s);height:calc(100vh - 64px);width:240px}@media (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:280px}}@media (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px}}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{height:calc(100vh - 120px);overflow-y:auto}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-themes__wrapper .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 64px);position:relative}.neeto-themes-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}.neeto-themes-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-700));box-shadow:0 0 0 1px rgb(var(--neeto-ui-gray-700))}.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-success-500));box-shadow:0 0 0 1px rgb(var(--neeto-ui-success-500));transition:border-color box-shadow .1s .1s}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3RoZW1lcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1QkFFRSxZQUFBLENBREEsVUNFRixDRENFLDZDQUdFLDJDQUFBLENBQ0EsbUNBQUEsQ0FGQSx5QkFBQSxDQURBLFdDSUosQ0RBSSwwQkFMRiw2Q0FNSSxXQ0dKLENBQ0YsQ0RGSSwwQkFSRiw2Q0FTSSxXQ0tKLENBQ0YsQ0RISSwyRUFFRSxrQkFBQSxDQURBLGdCQ01OLENERkksMkVBQ0UsMEJBQUEsQ0FDQSxlQ0lOLENERFEsNElBQ0UsWUNHVixDREdFLHNEQUdFLFdBQUEsQ0FEQSx5QkFBQSxDQURBLGlCQ0NKLENES0Esc0NBQ0UsdURBQUEsQ0FDQSwrRENGRixDREtBLDhDQUNFLDBDQUFBLENBQ0Esa0RDRkYsQ0RLQSxnREFFRSw2Q0FBQSxDQUNBLHFEQUFBLENBRkEsMENDQUYiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLXdpZHRoLXNtO1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtICN7JGJ1aWxkZXItaGVhZGVyLWhlaWdodH0pO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLW5lZXRvLXVpLXNoYWRvdy1zKTtcbiAgICBAc2NyZWVuIGxne1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC1sZztcbiAgICB9XG4gICAgQHNjcmVlbiB4bHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgteGw7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19oZWFkZXIge1xuICAgICAgcGFkZGluZy10b3A6IDE2cHg7XG4gICAgICBwYWRkaW5nLWJvdHRvbTogOHB4O1xuICAgIH1cblxuICAgIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fc2Nyb2xsIHtcbiAgICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDEyMHB4KTtcbiAgICAgIG92ZXJmbG93LXk6IGF1dG87XG5cbiAgICAgIC5uZWV0by11aS1jb2xvcnBpY2tlcl9fdGFyZ2V0IHtcbiAgICAgICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyLXRhcmdldF9fY29kZSB7XG4gICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC5uZWV0by10aGVtZXMtcHJldmlld19fd3JhcHBlciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtICN7JGJ1aWxkZXItaGVhZGVyLWhlaWdodH0pO1xuICAgIGZsZXgtZ3JvdzogMTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBib3gtc2hhZG93OiAwcHggMHB4IDBweCAxcHggcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLXByZXZpZXctYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS03MDApKTtcbiAgYm94LXNoYWRvdzogMHB4IDBweCAwcHggMXB4IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTcwMCkpO1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAxMDBtcyBib3gtc2hhZG93IDEwMG1zO1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1zdWNjZXNzLTUwMCkpO1xuICBib3gtc2hhZG93OiAwcHggMHB4IDBweCAxcHggcmdiKHZhcigtLW5lZXRvLXVpLXN1Y2Nlc3MtNTAwKSk7XG59XG4iLCIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gIHdpZHRoOiAyNDBweDtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gNjRweCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xuICBib3gtc2hhZG93OiB2YXIoLS1uZWV0by11aS1zaGFkb3ctcyk7XG59XG5Ac2NyZWVuIGxnIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAyODBweDtcbiAgfVxufVxuQHNjcmVlbiB4bCB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogMzIwcHg7XG4gIH1cbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgcGFkZGluZy10b3A6IDE2cHg7XG4gIHBhZGRpbmctYm90dG9tOiA4cHg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX3Njcm9sbCB7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEyMHB4KTtcbiAgb3ZlcmZsb3cteTogYXV0bztcbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fc2Nyb2xsIC5uZWV0by11aS1jb2xvcnBpY2tlcl9fdGFyZ2V0IC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDY0cHgpO1xuICBmbGV4LWdyb3c6IDE7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIGJveC1zaGFkb3c6IDBweCAwcHggMHB4IDFweCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTcwMCkpO1xuICBib3gtc2hhZG93OiAwcHggMHB4IDBweCAxcHggcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNzAwKSk7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1oaWdobGlnaHQtYWN0aXZlIHtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yIDEwMG1zIGJveC1zaGFkb3cgMTAwbXM7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXN1Y2Nlc3MtNTAwKSk7XG4gIGJveC1zaGFkb3c6IDBweCAwcHggMHB4IDFweCByZ2IodmFyKC0tbmVldG8tdWktc3VjY2Vzcy01MDApKTtcbn0iXX0= */";
+var css = ".neeto-themes__wrapper{display:flex;width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));box-shadow:var(--neeto-ui-shadow-s);height:calc(100vh - 64px);width:240px}@media (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:280px}}@media (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px}}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{height:calc(100vh - 120px);overflow-y:auto}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-themes__wrapper .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 64px);position:relative}.neeto-themes-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-600))!important;outline:1px solid rgb(var(--neeto-ui-gray-600))!important}.neeto-themes-theme-thumbnail--active,.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:2px solid rgb(var(--neeto-ui-primary-500))!important}.neeto-themes-theme-thumbnail__apply-btn{--neeto-ui-btn-padding-x:12px;--neeto-ui-btn-border-radius:100px}.neeto-themes-theme-thumbnail__apply-btn:disabled,.neeto-themes-theme-thumbnail__apply-btn[disabled]{opacity:1!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3RoZW1lcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1QkFFRSxZQUFBLENBREEsVUNFRixDRENFLDZDQUdFLDJDQUFBLENBQ0EsbUNBQUEsQ0FGQSx5QkFBQSxDQURBLFdDSUosQ0RBSSwwQkFMRiw2Q0FNSSxXQ0dKLENBQ0YsQ0RGSSwwQkFSRiw2Q0FTSSxXQ0tKLENBQ0YsQ0RISSwyRUFFRSxrQkFBQSxDQURBLGdCQ01OLENERkksMkVBQ0UsMEJBQUEsQ0FDQSxlQ0lOLENERFEsNElBQ0UsWUNHVixDREdFLHNEQUdFLFdBQUEsQ0FEQSx5QkFBQSxDQURBLGlCQ0NKLENES0EsOENBQ0Usb0RBQUEsQ0FDQSx5RENGRixDRFVBLHNGQUNFLHVEQUFBLENBQ0EsNERDRkYsQ0RLQSx5Q0FDRSw2QkFBQSxDQUNBLGtDQ0ZGLENER0UscUdBRUUsbUJDRkoiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLXdpZHRoLXNtO1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtICN7JGJ1aWxkZXItaGVhZGVyLWhlaWdodH0pO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLW5lZXRvLXVpLXNoYWRvdy1zKTtcbiAgICBAc2NyZWVuIGxnIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtbGc7XG4gICAgfVxuICAgIEBzY3JlZW4geGwge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC14bDtcbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA4cHg7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTIwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcblxuICAgICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyX190YXJnZXQge1xuICAgICAgICAubmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0X19jb2RlIHtcbiAgICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm5lZXRvLXRoZW1lcy1wcmV2aWV3X193cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgZmxleC1ncm93OiAxO1xuICB9XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG4ge1xuICAtLW5lZXRvLXVpLWJ0bi1wYWRkaW5nLXg6IDEycHg7XG4gIC0tbmVldG8tdWktYnRuLWJvcmRlci1yYWRpdXM6IDEwMHB4O1xuICAmOmRpc2FibGVkLFxuICAmW2Rpc2FibGVkXSB7XG4gICAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gIHdpZHRoOiAyNDBweDtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gNjRweCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xuICBib3gtc2hhZG93OiB2YXIoLS1uZWV0by11aS1zaGFkb3ctcyk7XG59XG5Ac2NyZWVuIGxnIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAyODBweDtcbiAgfVxufVxuQHNjcmVlbiB4bCB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogMzIwcHg7XG4gIH1cbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgcGFkZGluZy10b3A6IDE2cHg7XG4gIHBhZGRpbmctYm90dG9tOiA4cHg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX3Njcm9sbCB7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEyMHB4KTtcbiAgb3ZlcmZsb3cteTogYXV0bztcbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fc2Nyb2xsIC5uZWV0by11aS1jb2xvcnBpY2tlcl9fdGFyZ2V0IC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDY0cHgpO1xuICBmbGV4LWdyb3c6IDE7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG4ge1xuICAtLW5lZXRvLXVpLWJ0bi1wYWRkaW5nLXg6IDEycHg7XG4gIC0tbmVldG8tdWktYnRuLWJvcmRlci1yYWRpdXM6IDEwMHB4O1xufVxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bjpkaXNhYmxlZCwgLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bltkaXNhYmxlZF0ge1xuICBvcGFjaXR5OiAxICFpbXBvcnRhbnQ7XG59Il19 */";
 n(css,{});
 
 export { index as NeetoThemesBuilder, setTheme, useThemeUtils };