@bigbinary/neeto-themes-frontend 1.2.8 → 1.2.10

package/dist/index.cjs.js

@@ -15,12 +15,12 @@ var reactI18next = require('react-i18next');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var Toastr = require('@bigbinary/neetoui/Toastr');
-var reactQuery = require('react-query');
+var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var ramda = require('ramda');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var neetoIcons = require('@bigbinary/neeto-icons');
+var Close = require('@bigbinary/neeto-icons/Close');
 var Button = require('@bigbinary/neetoui/Button');
 var Popover = require('@bigbinary/neetoui/Popover');
 var Typography = require('@bigbinary/neetoui/Typography');
@@ -31,13 +31,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var Select = require('@bigbinary/neetoui/Select');
+var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
+var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
 var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var antd = require('antd');
+var classnames = require('classnames');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var Switch = require('@bigbinary/neetoui/Switch');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var Search = require('@bigbinary/neeto-molecules/Search');
-var classnames = require('classnames');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var Plus = require('@bigbinary/neeto-icons/Plus');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -68,18 +73,24 @@ var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var CenterAlign__default = /*#__PURE__*/_interopDefaultLegacy(CenterAlign);
+var LeftAlign__default = /*#__PURE__*/_interopDefaultLegacy(LeftAlign);
 var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var LeftArrow__default = /*#__PURE__*/_interopDefaultLegacy(LeftArrow);
+var Plus__default = /*#__PURE__*/_interopDefaultLegacy(Plus);
 
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useConfigStore = zustand.create(reactUtils.withImmutableActions(function (set) {
@@ -188,9 +199,11 @@ var QUERY_KEYS = {
 };
 
 var useShowThemeEntity = function useShowThemeEntity(entityId) {
-  return reactQuery.useQuery([QUERY_KEYS.THEME_ENTITY_DETAILS, entityId], function () {
-    return entitiesApi.show(entityId);
-  }, {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
+    queryFn: function queryFn() {
+      return entitiesApi.show(entityId);
+    },
     enabled: !!entityId
   });
 };
@@ -249,8 +262,11 @@ var useListThemes = function useListThemes(entityId) {
     }, shallow.shallow),
     isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
   var queryKey = isTemplateThemesEnabled ? [QUERY_KEYS.THEMES_LIST, entityId] : [QUERY_KEYS.THEMES_LIST];
-  return reactQuery.useQuery(queryKey, function () {
-    return themesApi.list(entityId);
+  return reactQuery.useQuery({
+    queryKey: queryKey,
+    queryFn: function queryFn() {
+      return themesApi.list(entityId);
+    }
   });
 };
 var useCreateTheme = function useCreateTheme() {
@@ -265,12 +281,12 @@ var useUpdateTheme = function useUpdateTheme(themeId) {
       payload: payload
     });
   }, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS, [QUERY_KEYS.THEME_DETAILS, themeId]]
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.THEME_DETAILS, themeId]]
   });
 };
 var useDeleteTheme = function useDeleteTheme() {
   return reactUtils.useMutationWithInvalidation(themesApi.destroy, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS]
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]]
   });
 };
 var useCloneTheme = function useCloneTheme() {
@@ -281,7 +297,7 @@ var useCloneTheme = function useCloneTheme() {
 var useApplyTheme = function useApplyTheme(_ref) {
   var onSuccess = _ref.onSuccess;
   return reactUtils.useMutationWithInvalidation(themesApi.apply, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS],
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]],
     onSuccess: onSuccess
   });
 };
@@ -325,10 +341,10 @@ var schemasApi = {
   list: list
 };
 
-var useListSchema = function useListSchema(_ref) {
-  var onSuccess = _ref.onSuccess;
-  return reactQuery.useQuery(QUERY_KEYS.SCHEMA_DETAILS, schemasApi.list, {
-    onSuccess: onSuccess
+var useListSchema = function useListSchema() {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.SCHEMA_DETAILS],
+    queryFn: schemasApi.list
   });
 };
 
@@ -342,28 +358,23 @@ var useThemeUtils = function useThemeUtils() {
     }, shallow.shallow),
     previewingTheme = _useThemeStore.previewingTheme,
     currentTheme = _useThemeStore.currentTheme;
-  var _useListSchema = useListSchema({
-      onSuccess: function onSuccess(_ref) {
-        var _ref$schema = _ref.schema,
-          themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
-          _ref$variableNamesMap = _ref.variableNamesMap,
-          variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap,
-          _ref$defaultThemeName = _ref.defaultThemeName,
-          defaultThemeName = _ref$defaultThemeName === void 0 ? "" : _ref$defaultThemeName;
-        return setConfigState({
-          themePropertiesSchema: themePropertiesSchema,
-          variableNamesMap: variableNamesMap,
-          defaultThemeName: defaultThemeName
-        });
-      }
-    }),
+  var _useListSchema = useListSchema(),
     isFetchingSchema = _useListSchema.isLoading,
-    _useListSchema$data = _useListSchema.data,
-    _useListSchema$data2 = _useListSchema$data === void 0 ? {} : _useListSchema$data,
-    _useListSchema$data2$ = _useListSchema$data2.schema,
-    themePropertiesSchema = _useListSchema$data2$ === void 0 ? [] : _useListSchema$data2$,
-    _useListSchema$data2$2 = _useListSchema$data2.variableNamesMap,
-    variableNamesMap = _useListSchema$data2$2 === void 0 ? {} : _useListSchema$data2$2;
+    data = _useListSchema.data;
+  var _ref = data || {},
+    _ref$schema = _ref.schema,
+    themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
+    _ref$variableNamesMap = _ref.variableNamesMap,
+    variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap;
+  react.useEffect(function () {
+    if (data) {
+      setConfigState({
+        themePropertiesSchema: data === null || data === void 0 ? void 0 : data.schema,
+        variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap,
+        defaultThemeName: data === null || data === void 0 ? void 0 : data.defaultThemeName
+      });
+    }
+  }, [data]);
   react.useEffect(function () {
     return setConfigState({
       isFetchingSchema: isFetchingSchema
@@ -761,7 +772,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
           className: "flex items-center gap-3",
           children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
             "data-cy": "alignment-left",
-            icon: neetoIcons.LeftAlign,
+            icon: LeftAlign__default["default"],
             size: "large",
             style: value === "left" ? "primary" : "text",
             tooltipProps: {
@@ -773,7 +784,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
             }
           }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
             "data-cy": "alignment-center",
-            icon: neetoIcons.CenterAlign,
+            icon: CenterAlign__default["default"],
             size: "large",
             style: value === "center" ? "primary" : "text",
             tooltipProps: {
@@ -884,14 +895,32 @@ var SwitchBlock = function SwitchBlock(_ref) {
   var label = _ref.label,
     name = _ref.name,
     switchProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
+  var doesHelpTextExist = i18n.exists(translationKey);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      style: "body2",
-      children: label
-    }), /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], _objectSpread$2({}, _objectSpread$2({
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "inline-flex items-center gap-4",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        "data-cy": "style-fields-labels",
+        style: "body2",
+        className: classnames__default["default"]({
+          "w-32": doesHelpTextExist,
+          "w-auto": !doesHelpTextExist
+        }),
+        children: label
+      }), doesHelpTextExist && /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
+        className: "flex-shrink-0",
+        description: t(translationKey)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
       name: name
-    }, switchProps)))]
+    }, switchProps)), {}, {
+      "data-cy": "enable-background-color-toggle"
+    }))]
   });
 };
 
@@ -975,12 +1004,16 @@ var Properties = function Properties(_ref) {
       }), neetoCist.filterBy({
         kind: "color"
       }, values.properties).map(function (_ref5) {
+        var _findBy;
         var key = _ref5.key,
           value = _ref5.value,
           kind = _ref5.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(ColorBlock, {
           color: value,
           label: buildLabel(key, kind),
+          showTransparencyControl: ((_findBy = neetoCist.findBy({
+            key: key
+          }, themePropertiesSchema)) === null || _findBy === void 0 ? void 0 : _findBy.showTransparencyControl) || false,
           onChange: handleColorChange(key)
         }, key);
       }), neetoCist.filterBy({
@@ -1017,16 +1050,16 @@ var Properties = function Properties(_ref) {
       }), neetoCist.filterBy({
         kind: "position_selector"
       }, values.properties).map(function (_ref8) {
-        var _findBy;
+        var _findBy2;
         var key = _ref8.key,
           kind = _ref8.kind,
           value = _ref8.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
-        var options = (_findBy = neetoCist.findBy({
+        var options = (_findBy2 = neetoCist.findBy({
           key: key
-        }, themePropertiesSchema)) === null || _findBy === void 0 || (_findBy = _findBy.options) === null || _findBy === void 0 ? void 0 : _findBy.map(neetoCist.toLabelAndValue);
+        }, themePropertiesSchema)) === null || _findBy2 === void 0 || (_findBy2 = _findBy2.options) === null || _findBy2 === void 0 ? void 0 : _findBy2.map(neetoCist.toLabelAndValue);
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
           label: buildLabel(key, kind),
           options: options || POSITION_OPTIONS,
@@ -1048,6 +1081,7 @@ var Properties = function Properties(_ref) {
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(SwitchBlock, {
           checked: value !== "false",
           label: buildLabel(key, kind),
+          name: neetoCist.snakeToCamelCase(key),
           onChange: function onChange(e) {
             return setFieldValue("properties[".concat(index, "].value"), String(e.target.checked));
           }
@@ -1110,10 +1144,10 @@ var Customize = function Customize(_ref) {
   var submitBtnRef = react.useRef(null);
   var _useCreateTheme = useCreateTheme(),
     createTheme = _useCreateTheme.mutate,
-    isCreating = _useCreateTheme.isLoading;
+    isCreating = _useCreateTheme.isPending;
   var _useUpdateTheme = useUpdateTheme(themeId),
     updateTheme = _useUpdateTheme.mutate,
-    isUpdating = _useUpdateTheme.isLoading;
+    isUpdating = _useUpdateTheme.isPending;
   var isSubmitting = isCreating || isUpdating;
   var onSubmit = function onSubmit(values, _ref2) {
     var resetForm = _ref2.resetForm;
@@ -1191,7 +1225,7 @@ var Customize = function Customize(_ref) {
             className: "flex flex-col items-start gap-2",
             children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
               className: "absolute right-1 top-1 z-0",
-              icon: neetoIcons.Close,
+              icon: Close__default["default"],
               size: "small",
               style: "text",
               onClick: function onClick() {
@@ -1641,7 +1675,8 @@ var TitleBar = function TitleBar(_ref) {
   var currentScreen = _ref.currentScreen,
     handleBackPress = _ref.handleBackPress,
     handleCreateNewTheme = _ref.handleCreateNewTheme,
-    isNewTheme = _ref.isNewTheme;
+    isNewTheme = _ref.isNewTheme,
+    themeToEdit = _ref.themeToEdit;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   if (currentScreen === DESIGN_SCREENS.Customize) {
@@ -1651,14 +1686,16 @@ var TitleBar = function TitleBar(_ref) {
         className: "flex items-center justify-start space-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           "data-cy": "customize-themes-back-button",
-          icon: neetoIcons.LeftArrow,
+          icon: LeftArrow__default["default"],
           iconPosition: "left",
           style: "text",
           tooltipProps: {
             content: t("neetoThemes.buttons.backToThemes"),
             position: "top"
           },
-          onClick: handleBackPress
+          onClick: function onClick() {
+            return handleBackPress(themeToEdit);
+          }
         }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
           "data-cy": "themes-header",
           lineHeight: "normal",
@@ -1683,7 +1720,7 @@ var TitleBar = function TitleBar(_ref) {
         className: "self-end",
         children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           "data-cy": "customize-themes-add-theme-button",
-          icon: neetoIcons.Plus,
+          icon: Plus__default["default"],
           iconPosition: "left",
           style: "text",
           tooltipProps: {
@@ -1757,11 +1794,12 @@ var Sidebar = function Sidebar(_ref) {
     isCurrentThemeLoading = _useShowThemeEntity.isLoading;
   var _useDeleteTheme = useDeleteTheme(),
     deleteTheme = _useDeleteTheme.mutate,
-    isDeleting = _useDeleteTheme.isLoading;
+    isDeleting = _useDeleteTheme.isPending;
   var _useApplyTheme = useApplyTheme({
       onSuccess: function onSuccess(_ref2) {
         var theme = _ref2.theme;
         setTheme(theme);
+        highlightTheme(theme);
         setThemeState({
           previewingTheme: theme
         });
@@ -1786,8 +1824,9 @@ var Sidebar = function Sidebar(_ref) {
       entityType: entityType
     });
   };
-  var handleBackPress = function handleBackPress() {
+  var handleBackPress = function handleBackPress(theme) {
     setTheme(currentTheme);
+    highlightTheme(neetoCist.isPresent(theme) ? theme : currentTheme);
     setThemeState({
       previewingTheme: currentTheme
     });
@@ -1797,10 +1836,10 @@ var Sidebar = function Sidebar(_ref) {
   var highlightTheme = function highlightTheme(themeToHighlight) {
     setTimeout(function () {
       scrollElementIntoView(themeToHighlight.id);
-    }, 1500);
+    }, 1000);
     setTimeout(function () {
       setThemeToHighlight(null);
-    }, 4000);
+    }, 3500);
     setThemeToHighlight(themeToHighlight.id);
   };
   var onCreateTheme = function onCreateTheme(createdTheme) {
@@ -1851,7 +1890,8 @@ var Sidebar = function Sidebar(_ref) {
       handleCreateNewTheme: function handleCreateNewTheme() {
         return handleEditTheme({});
       },
-      isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id)
+      isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id),
+      themeToEdit: themeToEdit.current
     }), currentScreen === DESIGN_SCREENS.THEMES ? /*#__PURE__*/jsxRuntime.jsx(Themes, {
       currentTheme: currentTheme,
       defaultThemes: defaultThemes,
@@ -1937,7 +1977,7 @@ var index = reactUtils.withTitle(NeetoThemesBuilder, i18next.t("neetoThemes.comm
 
 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));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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3RoZW1lcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1QkFFRSxZQUFBLENBREEsVUNFRixDRENFLDZDQUdFLDJDQUFBLENBREEseUJBQUEsQ0FEQSxXQ0dKLENEQ0ksMEJBTEYsNkNBTUksV0NFSixDQUNGLENEREksMEJBUkYsNkNBU0ksV0NJSixDQUNGLENERkksMkVBRUUsa0JBQUEsQ0FEQSxnQkNLTixDRERJLDJFQUNFLDBCQUFBLENBQ0EsZUNHTixDREFRLDRJQUNFLFlDRVYsQ0RJRSxzREFHRSxXQUFBLENBREEseUJBQUEsQ0FEQSxpQkNBSixDRE1BLDhDQUNFLG9EQUFBLENBQ0EseURDSEYsQ0RXQSxzRkFDRSx1REFBQSxDQUNBLDREQ0hGLENETUEseUNBQ0UsNkJBQUEsQ0FDQSxrQ0NIRixDRElFLHFHQUVFLG1CQ0hKIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXRoZW1lc19fd3JhcHBlciB7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuXG4gIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC1zbTtcbiAgICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAjeyRidWlsZGVyLWhlYWRlci1oZWlnaHR9KTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcblxuICAgIEBzY3JlZW4gbGcge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC1sZztcbiAgICB9XG4gICAgQHNjcmVlbiB4bCB7XG4gICAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLXdpZHRoLXhsO1xuICAgIH1cblxuICAgIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgICAgIHBhZGRpbmctdG9wOiAxNnB4O1xuICAgICAgcGFkZGluZy1ib3R0b206IDhweDtcbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX3Njcm9sbCB7XG4gICAgICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAxMjBweCk7XG4gICAgICBvdmVyZmxvdy15OiBhdXRvO1xuXG4gICAgICAubmVldG8tdWktY29sb3JwaWNrZXJfX3RhcmdldCB7XG4gICAgICAgIC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAjeyRidWlsZGVyLWhlYWRlci1oZWlnaHR9KTtcbiAgICBmbGV4LWdyb3c6IDE7XG4gIH1cbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLXByZXZpZXctYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAxcHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1oaWdobGlnaHQtYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0biB7XG4gIC0tbmVldG8tdWktYnRuLXBhZGRpbmcteDogMTJweDtcbiAgLS1uZWV0by11aS1idG4tYm9yZGVyLXJhZGl1czogMTAwcHg7XG4gICY6ZGlzYWJsZWQsXG4gICZbZGlzYWJsZWRdIHtcbiAgICBvcGFjaXR5OiAxICFpbXBvcnRhbnQ7XG4gIH1cbn1cbiIsIi5uZWV0by10aGVtZXNfX3dyYXBwZXIge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgd2lkdGg6IDI0MHB4O1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSA2NHB4KTtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG59XG5Ac2NyZWVuIGxnIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAyODBweDtcbiAgfVxufVxuQHNjcmVlbiB4bCB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogMzIwcHg7XG4gIH1cbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgcGFkZGluZy10b3A6IDE2cHg7XG4gIHBhZGRpbmctYm90dG9tOiA4cHg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX3Njcm9sbCB7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEyMHB4KTtcbiAgb3ZlcmZsb3cteTogYXV0bztcbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fc2Nyb2xsIC5uZWV0by11aS1jb2xvcnBpY2tlcl9fdGFyZ2V0IC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDY0cHgpO1xuICBmbGV4LWdyb3c6IDE7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG4ge1xuICAtLW5lZXRvLXVpLWJ0bi1wYWRkaW5nLXg6IDEycHg7XG4gIC0tbmVldG8tdWktYnRuLWJvcmRlci1yYWRpdXM6IDEwMHB4O1xufVxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bjpkaXNhYmxlZCwgLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bltkaXNhYmxlZF0ge1xuICBvcGFjaXR5OiAxICFpbXBvcnRhbnQ7XG59Il19 */";
+var css = ".neeto-themes__wrapper{display:flex;width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));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{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:2px solid rgb(var(--neeto-ui-primary-500))!important}.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-gray-400))!important;outline:2px solid rgb(var(--neeto-ui-gray-400))!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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3RoZW1lcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1QkFFRSxZQUFBLENBREEsVUNFRixDRENFLDZDQUdFLDJDQUFBLENBREEseUJBQUEsQ0FEQSxXQ0dKLENEQ0ksMEJBTEYsNkNBTUksV0NFSixDQUNGLENEREksMEJBUkYsNkNBU0ksV0NJSixDQUNGLENERkksMkVBRUUsa0JBQUEsQ0FEQSxnQkNLTixDRERJLDJFQUNFLDBCQUFBLENBQ0EsZUNHTixDREFRLDRJQUNFLFlDRVYsQ0RJRSxzREFHRSxXQUFBLENBREEseUJBQUEsQ0FEQSxpQkNBSixDRE1BLDhDQUNFLG9EQUFBLENBQ0EseURDSEYsQ0RNQSxzQ0FDRSx1REFBQSxDQUNBLDREQ0hGLENETUEsZ0RBQ0Usb0RBQUEsQ0FDQSx5RENIRixDRE1BLHlDQUNFLDZCQUFBLENBQ0Esa0NDSEYsQ0RJRSxxR0FFRSxtQkNISiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by10aGVtZXNfX3dyYXBwZXIge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcblxuICAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtc207XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG5cbiAgICBAc2NyZWVuIGxnIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtbGc7XG4gICAgfVxuICAgIEBzY3JlZW4geGwge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC14bDtcbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA4cHg7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTIwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcblxuICAgICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyX190YXJnZXQge1xuICAgICAgICAubmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0X19jb2RlIHtcbiAgICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm5lZXRvLXRoZW1lcy1wcmV2aWV3X193cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgZmxleC1ncm93OiAxO1xuICB9XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNDAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG4ge1xuICAtLW5lZXRvLXVpLWJ0bi1wYWRkaW5nLXg6IDEycHg7XG4gIC0tbmVldG8tdWktYnRuLWJvcmRlci1yYWRpdXM6IDEwMHB4O1xuICAmOmRpc2FibGVkLFxuICAmW2Rpc2FibGVkXSB7XG4gICAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gIHdpZHRoOiAyNDBweDtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gNjRweCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xufVxuQHNjcmVlbiBsZyB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogMjgwcHg7XG4gIH1cbn1cbkBzY3JlZW4geGwge1xuICAubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gICAgd2lkdGg6IDMyMHB4O1xuICB9XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gIHBhZGRpbmctdG9wOiAxNnB4O1xuICBwYWRkaW5nLWJvdHRvbTogOHB4O1xufVxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAxMjBweCk7XG4gIG92ZXJmbG93LXk6IGF1dG87XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX3Njcm9sbCAubmVldG8tdWktY29sb3JwaWNrZXJfX3RhcmdldCAubmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0X19jb2RlIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1wcmV2aWV3X193cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSA2NHB4KTtcbiAgZmxleC1ncm93OiAxO1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWhpZ2hsaWdodC1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS00MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fYXBwbHktYnRuIHtcbiAgLS1uZWV0by11aS1idG4tcGFkZGluZy14OiAxMnB4O1xuICAtLW5lZXRvLXVpLWJ0bi1ib3JkZXItcmFkaXVzOiAxMDBweDtcbn1cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG46ZGlzYWJsZWQsIC5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG5bZGlzYWJsZWRdIHtcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xufSJdfQ== */";
 n(css,{});
 
 exports.NeetoThemesBuilder = index;