@bigbinary/neeto-themes-frontend 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,7 +24,8 @@
24
24
  "addNewTheme": "Add new theme",
25
25
  "backToThemes": "Back to themes",
26
26
  "save": "Save",
27
- "reset": "Reset"
27
+ "reset": "Reset",
28
+ "applyThisTheme": "Apply this theme"
28
29
  },
29
30
  "alerts": {
30
31
  "title": {
@@ -52,6 +53,7 @@
52
53
  "primary": "Primary",
53
54
  "secondary": "Secondary"
54
55
  },
56
+ "notAppliedYet": "This theme is <bold>not yet applied</bold> to this {{entityType, anyCase}}.",
55
57
  "editTheme": {
56
58
  "title": "Edit theme",
57
59
  "imageUpload": "Drag and drop or <span>Browse</span> a file"
package/dist/index.cjs.js CHANGED
@@ -20,11 +20,13 @@ var axios = require('axios');
20
20
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
21
21
  var ramda = require('ramda');
22
22
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
23
+ var neetoIcons = require('@bigbinary/neeto-icons');
23
24
  var Button = require('@bigbinary/neetoui/Button');
25
+ var Popover = require('@bigbinary/neetoui/Popover');
26
+ var Typography = require('@bigbinary/neetoui/Typography');
24
27
  var Form = require('@bigbinary/neetoui/formik/Form');
25
28
  var yup = require('yup');
26
29
  var formik = require('formik');
27
- var Typography = require('@bigbinary/neetoui/Typography');
28
30
  var jsxRuntime = require('react/jsx-runtime');
29
31
  var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
30
32
  var utils = require('@bigbinary/neeto-commons-frontend/utils');
@@ -34,10 +36,8 @@ var antd = require('antd');
34
36
  var Switch = require('@bigbinary/neetoui/Switch');
35
37
  var Input = require('@bigbinary/neetoui/formik/Input');
36
38
  var Search = require('@bigbinary/neeto-molecules/Search');
37
- var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
38
- var Tag = require('@bigbinary/neetoui/Tag');
39
39
  var classnames = require('classnames');
40
- var neetoIcons = require('@bigbinary/neeto-icons');
40
+ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
41
41
 
42
42
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
43
43
 
@@ -66,17 +66,17 @@ var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
66
66
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
67
67
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
68
68
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
69
+ var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
70
+ var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
69
71
  var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
70
72
  var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
71
- var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
72
73
  var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
73
74
  var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
74
75
  var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
75
76
  var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
76
77
  var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
77
- var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
78
- var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
79
78
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
79
+ var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
80
80
 
81
81
  /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
82
82
  var useConfigStore = zustand.create(reactUtils.withImmutableActions(function (set) {
@@ -588,8 +588,8 @@ var ColorBlock = function ColorBlock(_ref) {
588
588
  });
589
589
  };
590
590
 
591
- 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; }
592
- 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__default["default"](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; }
591
+ 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; }
592
+ 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__default["default"](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; }
593
593
  var FontPickerBlock = function FontPickerBlock(_ref) {
594
594
  var label = _ref.label,
595
595
  _ref$placeholder = _ref.placeholder,
@@ -615,7 +615,7 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
615
615
  styles: {
616
616
  option: function option(styles, _ref2) {
617
617
  var data = _ref2.data;
618
- return _objectSpread$2(_objectSpread$2({}, styles), {}, {
618
+ return _objectSpread$3(_objectSpread$3({}, styles), {}, {
619
619
  fontFamily: data.value
620
620
  });
621
621
  }
@@ -680,8 +680,8 @@ var SliderBlock = function SliderBlock(_ref) {
680
680
  };
681
681
 
682
682
  var _excluded = ["label", "name"];
683
- 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; }
684
- 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__default["default"](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; }
683
+ 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; }
684
+ 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__default["default"](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; }
685
685
  var SwitchBlock = function SwitchBlock(_ref) {
686
686
  var label = _ref.label,
687
687
  name = _ref.name,
@@ -691,7 +691,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
691
691
  children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
692
692
  style: "body2",
693
693
  children: label
694
- }), /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], _objectSpread$1({}, _objectSpread$1({
694
+ }), /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], _objectSpread$2({}, _objectSpread$2({
695
695
  name: name
696
696
  }, switchProps)))]
697
697
  });
@@ -777,9 +777,7 @@ var Properties = function Properties() {
777
777
  }, key);
778
778
  }), neetoCist.filterBy({
779
779
  kind: "color"
780
- }, values.properties).sort(function (colorObject1, colorObject2) {
781
- return colorObject1.key.localeCompare(colorObject2.key);
782
- }).map(function (_ref4) {
780
+ }, values.properties).map(function (_ref4) {
783
781
  var key = _ref4.key,
784
782
  value = _ref4.value,
785
783
  kind = _ref4.kind;
@@ -859,20 +857,32 @@ var ThemeMeta = reactUtils.withT(function (_ref) {
859
857
  });
860
858
  });
861
859
 
862
- 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; }
863
- 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__default["default"](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; }
860
+ 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; }
861
+ 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__default["default"](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; }
864
862
  var Customize = function Customize(_ref) {
865
863
  var themeId = _ref.themeId,
866
864
  theme = _ref.theme,
867
- onCreateTheme = _ref.onCreateTheme;
865
+ onCreateTheme = _ref.onCreateTheme,
866
+ onApplyTheme = _ref.onApplyTheme,
867
+ isApplyingTheme = _ref.isApplyingTheme;
868
868
  var _useTranslation = reactI18next.useTranslation(),
869
869
  t = _useTranslation.t;
870
+ var _useState = react.useState({}),
871
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
872
+ popoverInstance = _useState2[0],
873
+ setPopoverInstance = _useState2[1];
870
874
  var _useConfigStore = useConfigStore(function (store) {
871
875
  return {
872
- themePropertiesSchema: store["themePropertiesSchema"]
876
+ themePropertiesSchema: store["themePropertiesSchema"],
877
+ entityType: store["entityType"]
873
878
  };
874
879
  }, shallow.shallow),
875
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
880
+ themePropertiesSchema = _useConfigStore.themePropertiesSchema,
881
+ entityType = _useConfigStore.entityType;
882
+ var _useThemeUtils = useThemeUtils(),
883
+ currentTheme = _useThemeUtils.currentTheme;
884
+ var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
885
+ var submitBtnRef = react.useRef(null);
876
886
  var _useCreateTheme = useCreateTheme(),
877
887
  createTheme = _useCreateTheme.mutate,
878
888
  isCreating = _useCreateTheme.isLoading;
@@ -883,7 +893,7 @@ var Customize = function Customize(_ref) {
883
893
  var onSubmit = function onSubmit(values, _ref2) {
884
894
  var resetForm = _ref2.resetForm;
885
895
  var imageData = buildImageData(values, themePropertiesSchema);
886
- var themeToSave = _objectSpread({
896
+ var themeToSave = _objectSpread$1({
887
897
  propertiesAttributes: values.properties,
888
898
  name: values.name
889
899
  }, imageData);
@@ -891,6 +901,9 @@ var Customize = function Customize(_ref) {
891
901
  return createTheme(themeToSave, {
892
902
  onSuccess: function onSuccess(_ref3) {
893
903
  var theme = _ref3.theme;
904
+ resetForm({
905
+ values: values
906
+ });
894
907
  onCreateTheme(theme);
895
908
  }
896
909
  });
@@ -936,14 +949,127 @@ var Customize = function Customize(_ref) {
936
949
  disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
937
950
  label: t("neetoThemes.buttons.save"),
938
951
  loading: isSubmitting,
952
+ ref: submitBtnRef,
939
953
  type: "submit"
940
954
  })]
955
+ }), /*#__PURE__*/jsxRuntime.jsx(Popover__default["default"], {
956
+ appendTo: function appendTo() {
957
+ return document.body;
958
+ },
959
+ disabled: isEditingCurrentlyAppliedTheme,
960
+ position: "top",
961
+ reference: submitBtnRef,
962
+ trigger: "click",
963
+ content: /*#__PURE__*/jsxRuntime.jsxs("div", {
964
+ className: "flex flex-col items-start gap-2",
965
+ children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
966
+ className: "absolute right-1 top-1 z-0",
967
+ icon: neetoIcons.Close,
968
+ size: "small",
969
+ style: "text",
970
+ onClick: function onClick() {
971
+ var _popoverInstance$hide;
972
+ return popoverInstance === null || popoverInstance === void 0 || (_popoverInstance$hide = popoverInstance.hide) === null || _popoverInstance$hide === void 0 ? void 0 : _popoverInstance$hide.call(popoverInstance);
973
+ }
974
+ }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
975
+ className: "w-72 pr-5",
976
+ style: "body2",
977
+ weight: "normal",
978
+ children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
979
+ components: {
980
+ bold: /*#__PURE__*/jsxRuntime.jsx("strong", {})
981
+ },
982
+ i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
983
+ values: {
984
+ entityType: entityType
985
+ }
986
+ })
987
+ }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
988
+ disabled: isApplyingTheme,
989
+ label: t("neetoThemes.buttons.applyThisTheme"),
990
+ loading: isApplyingTheme,
991
+ onClick: function onClick() {
992
+ return onApplyTheme(theme);
993
+ }
994
+ })]
995
+ }),
996
+ onMount: setPopoverInstance
941
997
  })]
942
998
  });
943
999
  }
944
1000
  });
945
1001
  };
946
1002
 
1003
+ 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; }
1004
+ 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__default["default"](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; }
1005
+ var Check = function Check(props) {
1006
+ return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread(_objectSpread({
1007
+ fill: "none",
1008
+ height: "24",
1009
+ viewBox: "0 0 24 24",
1010
+ width: "24",
1011
+ xmlns: "http://www.w3.org/2000/svg"
1012
+ }, props), {}, {
1013
+ children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
1014
+ filter: "url(#filter0_d_9519_161)",
1015
+ children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
1016
+ fill: "#4558F9",
1017
+ height: "20",
1018
+ rx: "10",
1019
+ width: "20",
1020
+ x: "2",
1021
+ y: "2"
1022
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1023
+ height: "20",
1024
+ rx: "10",
1025
+ stroke: "#fff",
1026
+ strokeWidth: "1.5",
1027
+ width: "20",
1028
+ x: "2",
1029
+ y: "2"
1030
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
1031
+ d: "M16.375 9.5l-5.95 6.25-2.8-2.941",
1032
+ stroke: "#fff",
1033
+ strokeLinecap: "round",
1034
+ strokeLinejoin: "round",
1035
+ strokeWidth: "1.25"
1036
+ })]
1037
+ }), /*#__PURE__*/jsxRuntime.jsx("defs", {
1038
+ children: /*#__PURE__*/jsxRuntime.jsxs("filter", {
1039
+ colorInterpolationFilters: "sRGB",
1040
+ filterUnits: "userSpaceOnUse",
1041
+ height: "23.5",
1042
+ id: "filter0_d_9519_161",
1043
+ width: "23.5",
1044
+ x: "0.25",
1045
+ y: "0.25",
1046
+ children: [/*#__PURE__*/jsxRuntime.jsx("feFlood", {
1047
+ floodOpacity: "0",
1048
+ result: "BackgroundImageFix"
1049
+ }), /*#__PURE__*/jsxRuntime.jsx("feColorMatrix", {
1050
+ "in": "SourceAlpha",
1051
+ result: "hardAlpha",
1052
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
1053
+ }), /*#__PURE__*/jsxRuntime.jsx("feOffset", {}), /*#__PURE__*/jsxRuntime.jsx("feGaussianBlur", {
1054
+ stdDeviation: "0.5"
1055
+ }), /*#__PURE__*/jsxRuntime.jsx("feComposite", {
1056
+ in2: "hardAlpha",
1057
+ operator: "out"
1058
+ }), /*#__PURE__*/jsxRuntime.jsx("feColorMatrix", {
1059
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"
1060
+ }), /*#__PURE__*/jsxRuntime.jsx("feBlend", {
1061
+ in2: "BackgroundImageFix",
1062
+ result: "effect1_dropShadow_9519_161"
1063
+ }), /*#__PURE__*/jsxRuntime.jsx("feBlend", {
1064
+ "in": "SourceGraphic",
1065
+ in2: "effect1_dropShadow_9519_161",
1066
+ result: "shape"
1067
+ })]
1068
+ })
1069
+ })]
1070
+ }));
1071
+ };
1072
+
947
1073
  var Thumbnail = function Thumbnail(_ref) {
948
1074
  var _theme$snakeToCamelCa, _findBy, _findBy2;
949
1075
  var active = _ref.active,
@@ -1030,35 +1156,17 @@ var Card = function Card(_ref) {
1030
1156
  onSetPreviewTheme = _ref.onSetPreviewTheme,
1031
1157
  onDeleteTheme = _ref.onDeleteTheme,
1032
1158
  onEditTheme = _ref.onEditTheme,
1033
- applyTheme = _ref.applyTheme,
1034
1159
  theme = _ref.theme,
1035
1160
  isApplyingTheme = _ref.isApplyingTheme,
1036
1161
  onCloneTheme = _ref.onCloneTheme,
1037
1162
  isHighLightedTheme = _ref.isHighLightedTheme,
1038
- setThemeBeingApplied = _ref.setThemeBeingApplied,
1163
+ onApplyTheme = _ref.onApplyTheme,
1039
1164
  Thumbnail$1 = _ref.thumbnail;
1040
1165
  var _useTranslation = reactI18next.useTranslation(),
1041
1166
  t = _useTranslation.t;
1042
1167
  var id = theme.id,
1043
1168
  name = theme.name,
1044
1169
  appliedCount = theme.appliedCount;
1045
- var _useConfigStore = useConfigStore(function (store) {
1046
- return {
1047
- entityId: store["entityId"],
1048
- entityType: store["entityType"]
1049
- };
1050
- }, shallow.shallow),
1051
- entityId = _useConfigStore.entityId,
1052
- entityType = _useConfigStore.entityType;
1053
- var handleApplyThemeClick = function handleApplyThemeClick() {
1054
- if (isApplyingTheme) return;
1055
- setThemeBeingApplied(theme);
1056
- applyTheme({
1057
- themeId: theme.id,
1058
- entityId: entityId,
1059
- entityType: entityType
1060
- });
1061
- };
1062
1170
  var handleCloneTheme = function handleCloneTheme() {
1063
1171
  return onCloneTheme(theme);
1064
1172
  };
@@ -1068,55 +1176,73 @@ var Card = function Card(_ref) {
1068
1176
  var handleDeleteTheme = function handleDeleteTheme() {
1069
1177
  return onDeleteTheme(id, name, appliedCount);
1070
1178
  };
1071
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
1179
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1072
1180
  className: "group space-y-2 pt-0.5",
1073
1181
  "data-cy": active ? "active-theme-card" : "theme-card",
1074
1182
  id: theme.id,
1075
- children: [/*#__PURE__*/jsxRuntime.jsx("div", {
1183
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
1184
+ className: classnames__default["default"]("neeto-themes-theme-thumbnail neeto-ui-rounded-lg cursor-pointer border transition-all duration-300 ease-in-out", {
1185
+ "neeto-ui-border-gray-200": !active,
1186
+ "neeto-themes-theme-thumbnail--active": active,
1187
+ "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
1188
+ "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
1189
+ }),
1076
1190
  onClick: function onClick() {
1077
1191
  return onSetPreviewTheme(theme);
1078
1192
  },
1079
- children: Thumbnail$1 ? /*#__PURE__*/jsxRuntime.jsx(Thumbnail$1, {
1080
- active: active,
1081
- isHighLightedTheme: isHighLightedTheme,
1082
- isPreviewing: isPreviewing,
1083
- theme: theme
1084
- }) : /*#__PURE__*/jsxRuntime.jsx(Thumbnail, {
1085
- active: active,
1086
- isHighLightedTheme: isHighLightedTheme,
1087
- isPreviewing: isPreviewing,
1088
- theme: theme
1089
- })
1090
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1091
- className: "flex items-start justify-between gap-1",
1092
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
1093
- className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
1094
- "data-cy": "theme-name",
1095
- lineHeight: "snug",
1096
- style: "body2",
1097
- children: name
1193
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1194
+ 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",
1195
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
1196
+ className: "absolute right-0 top-0 p-3",
1197
+ children: active ? /*#__PURE__*/jsxRuntime.jsx(Check, {
1198
+ className: "flex-shrink-0",
1199
+ "data-cy": "active-theme-label"
1200
+ }) : /*#__PURE__*/jsxRuntime.jsx("div", {
1201
+ className: classnames__default["default"]({
1202
+ hidden: !isPreviewing,
1203
+ "group-hover:block": true
1204
+ }),
1205
+ children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
1206
+ className: "neeto-themes-theme-thumbnail__apply-btn flex-shrink-0",
1207
+ "data-cy": "apply-theme-button",
1208
+ disabled: isApplyingTheme,
1209
+ label: t("neetoThemes.common.apply"),
1210
+ loading: isApplyingTheme,
1211
+ size: "small",
1212
+ style: "tertiary",
1213
+ onClick: function onClick() {
1214
+ return onApplyTheme(theme);
1215
+ }
1216
+ })
1217
+ })
1218
+ }), Thumbnail$1 ? /*#__PURE__*/jsxRuntime.jsx(Thumbnail$1, {
1219
+ active: active,
1220
+ isHighLightedTheme: isHighLightedTheme,
1221
+ isPreviewing: isPreviewing,
1222
+ theme: theme
1223
+ }) : /*#__PURE__*/jsxRuntime.jsx(Thumbnail, {
1224
+ active: active,
1225
+ isHighLightedTheme: isHighLightedTheme,
1226
+ isPreviewing: isPreviewing,
1227
+ theme: theme
1228
+ })]
1098
1229
  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1099
- className: "flex items-center gap-2",
1100
- children: [active ? /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
1101
- className: "flex-shrink-0",
1102
- "data-cy": "active-theme-label",
1103
- label: t("neetoThemes.common.active"),
1104
- style: "success"
1105
- }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
1106
- className: "flex-shrink-0",
1107
- "data-cy": "apply-theme-button",
1108
- disabled: isApplyingTheme,
1109
- label: t("neetoThemes.common.apply"),
1110
- loading: isApplyingTheme,
1111
- size: "small",
1112
- style: "link",
1113
- onClick: handleApplyThemeClick
1230
+ className: "flex items-start justify-between gap-1 p-3",
1231
+ children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
1232
+ className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
1233
+ "data-cy": "theme-name",
1234
+ lineHeight: "snug",
1235
+ style: "body2",
1236
+ children: name
1114
1237
  }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
1115
1238
  dropdownButtonProps: {
1116
1239
  size: "small"
1117
1240
  },
1118
1241
  dropdownProps: {
1119
- strategy: "fixed"
1242
+ strategy: "fixed",
1243
+ onClick: function onClick(e) {
1244
+ return e.stopPropagation();
1245
+ }
1120
1246
  },
1121
1247
  menuItems: [{
1122
1248
  key: "edit",
@@ -1140,7 +1266,7 @@ var Card = function Card(_ref) {
1140
1266
  }]
1141
1267
  })]
1142
1268
  })]
1143
- })]
1269
+ })
1144
1270
  });
1145
1271
  };
1146
1272
  var Card$1 = /*#__PURE__*/react.memo(Card);
@@ -1153,12 +1279,14 @@ var Themes = function Themes(_ref) {
1153
1279
  defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
1154
1280
  onDeleteTheme = _ref.onDeleteTheme,
1155
1281
  themeToHighlight = _ref.themeToHighlight,
1156
- highlightTheme = _ref.highlightTheme,
1157
1282
  didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
1158
1283
  isLoading = _ref.isLoading,
1159
1284
  currentTheme = _ref.currentTheme,
1160
1285
  isCurrentThemeLoading = _ref.isCurrentThemeLoading,
1161
- thumbnail = _ref.thumbnail;
1286
+ thumbnail = _ref.thumbnail,
1287
+ themeBeingApplied = _ref.themeBeingApplied,
1288
+ onApplyTheme = _ref.onApplyTheme,
1289
+ isApplyingTheme = _ref.isApplyingTheme;
1162
1290
  var _useTranslation = reactI18next.useTranslation(),
1163
1291
  t = _useTranslation.t;
1164
1292
  var _useThemeUtils = useThemeUtils(),
@@ -1175,24 +1303,8 @@ var Themes = function Themes(_ref) {
1175
1303
  _useState2 = _slicedToArray__default["default"](_useState, 2),
1176
1304
  searchQuery = _useState2[0],
1177
1305
  setSearchQuery = _useState2[1];
1178
- var _useState3 = react.useState({}),
1179
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
1180
- themeBeingApplied = _useState4[0],
1181
- setThemeBeingApplied = _useState4[1];
1182
1306
  var _useCloneTheme = useCloneTheme(),
1183
1307
  cloneTheme = _useCloneTheme.mutate;
1184
- var _useApplyTheme = useApplyTheme({
1185
- onSuccess: function onSuccess(_ref2) {
1186
- var theme = _ref2.theme;
1187
- setTheme(theme);
1188
- setThemeState({
1189
- previewingTheme: theme
1190
- });
1191
- setThemeBeingApplied({});
1192
- }
1193
- }),
1194
- applyTheme = _useApplyTheme.mutate,
1195
- isApplyingTheme = _useApplyTheme.isLoading;
1196
1308
  react.useEffect(function () {
1197
1309
  if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
1198
1310
  didScrollActiveThemeIntoView.current = true;
@@ -1215,9 +1327,9 @@ var Themes = function Themes(_ref) {
1215
1327
  var isSearchFieldVisible = (themes === null || themes === void 0 ? void 0 : themes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
1216
1328
  var handleCloneTheme = function handleCloneTheme(data) {
1217
1329
  cloneTheme(data.id, {
1218
- onSuccess: function onSuccess(_ref3) {
1219
- var clonedTheme = _ref3.theme;
1220
- highlightTheme(clonedTheme);
1330
+ onSuccess: function onSuccess(_ref2) {
1331
+ var clonedTheme = _ref2.theme;
1332
+ onEditTheme(clonedTheme);
1221
1333
  }
1222
1334
  });
1223
1335
  };
@@ -1252,8 +1364,7 @@ var Themes = function Themes(_ref) {
1252
1364
  className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
1253
1365
  children: filteredDefaultThemes.map(function (theme) {
1254
1366
  return /*#__PURE__*/react.createElement(Card$1, {
1255
- applyTheme: applyTheme,
1256
- setThemeBeingApplied: setThemeBeingApplied,
1367
+ onApplyTheme: onApplyTheme,
1257
1368
  theme: theme,
1258
1369
  thumbnail: thumbnail,
1259
1370
  active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
@@ -1280,10 +1391,9 @@ var Themes = function Themes(_ref) {
1280
1391
  var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
1281
1392
  var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
1282
1393
  return /*#__PURE__*/react.createElement(Card$1, {
1283
- applyTheme: applyTheme,
1284
1394
  isPreviewing: isPreviewing,
1395
+ onApplyTheme: onApplyTheme,
1285
1396
  onEditTheme: onEditTheme,
1286
- setThemeBeingApplied: setThemeBeingApplied,
1287
1397
  theme: theme,
1288
1398
  thumbnail: thumbnail,
1289
1399
  active: isActive,
@@ -1376,6 +1486,10 @@ var Sidebar = function Sidebar(_ref) {
1376
1486
  _useState6 = _slicedToArray__default["default"](_useState5, 2),
1377
1487
  themeToHighlight = _useState6[0],
1378
1488
  setThemeToHighlight = _useState6[1];
1489
+ var _useState7 = react.useState({}),
1490
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
1491
+ themeBeingApplied = _useState8[0],
1492
+ setThemeBeingApplied = _useState8[1];
1379
1493
  var _useConfigStore = useConfigStore(function (store) {
1380
1494
  return {
1381
1495
  entityType: store["entityType"],
@@ -1414,12 +1528,34 @@ var Sidebar = function Sidebar(_ref) {
1414
1528
  var _useDeleteTheme = useDeleteTheme(),
1415
1529
  deleteTheme = _useDeleteTheme.mutate,
1416
1530
  isDeleting = _useDeleteTheme.isLoading;
1531
+ var _useApplyTheme = useApplyTheme({
1532
+ onSuccess: function onSuccess(_ref2) {
1533
+ var theme = _ref2.theme;
1534
+ setTheme(theme);
1535
+ setThemeState({
1536
+ previewingTheme: theme
1537
+ });
1538
+ setThemeBeingApplied({});
1539
+ setCurrentScreen(DESIGN_SCREENS.THEMES);
1540
+ }
1541
+ }),
1542
+ applyTheme = _useApplyTheme.mutate,
1543
+ isApplyingTheme = _useApplyTheme.isLoading;
1417
1544
  var themeToDelete = react.useRef(null);
1418
1545
  var themeToEdit = react.useRef(null);
1419
1546
  var handleEditTheme = function handleEditTheme(theme) {
1420
1547
  themeToEdit.current = theme;
1421
1548
  setCurrentScreen(DESIGN_SCREENS.Customize);
1422
1549
  };
1550
+ var onApplyTheme = function onApplyTheme(theme) {
1551
+ if (isApplyingTheme) return;
1552
+ setThemeBeingApplied(theme);
1553
+ applyTheme({
1554
+ themeId: theme.id,
1555
+ entityId: entityId,
1556
+ entityType: entityType
1557
+ });
1558
+ };
1423
1559
  var handleBackPress = function handleBackPress() {
1424
1560
  setTheme(currentTheme);
1425
1561
  setThemeState({
@@ -1438,13 +1574,11 @@ var Sidebar = function Sidebar(_ref) {
1438
1574
  setThemeToHighlight(themeToHighlight.id);
1439
1575
  };
1440
1576
  var onCreateTheme = function onCreateTheme(createdTheme) {
1441
- setCurrentScreen(DESIGN_SCREENS.THEMES);
1577
+ themeToEdit.current = createdTheme;
1442
1578
  setTheme(createdTheme);
1443
1579
  setThemeState({
1444
1580
  previewingTheme: createdTheme
1445
1581
  });
1446
- highlightTheme(createdTheme);
1447
- themeToEdit.current = null;
1448
1582
  };
1449
1583
  var handleDelete = function handleDelete(themeId, name, appliedCount) {
1450
1584
  setIsDeleteAlertOpen(true);
@@ -1493,7 +1627,10 @@ var Sidebar = function Sidebar(_ref) {
1493
1627
  defaultThemes: defaultThemes,
1494
1628
  didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
1495
1629
  highlightTheme: highlightTheme,
1630
+ isApplyingTheme: isApplyingTheme,
1496
1631
  isCurrentThemeLoading: isCurrentThemeLoading,
1632
+ onApplyTheme: onApplyTheme,
1633
+ themeBeingApplied: themeBeingApplied,
1497
1634
  themeToHighlight: themeToHighlight,
1498
1635
  themes: themes,
1499
1636
  thumbnail: thumbnail,
@@ -1501,6 +1638,8 @@ var Sidebar = function Sidebar(_ref) {
1501
1638
  onDeleteTheme: handleDelete,
1502
1639
  onEditTheme: handleEditTheme
1503
1640
  }) : /*#__PURE__*/jsxRuntime.jsx(Customize, {
1641
+ isApplyingTheme: isApplyingTheme,
1642
+ onApplyTheme: onApplyTheme,
1504
1643
  onCreateTheme: onCreateTheme,
1505
1644
  theme: themeToEdit.current,
1506
1645
  themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
@@ -1561,7 +1700,7 @@ var index = reactUtils.withTitle(NeetoThemesBuilder, i18next.t("neetoThemes.comm
1561
1700
 
1562
1701
  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}}
1563
1702
 
1564
- 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= */";
1703
+ 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 */";
1565
1704
  n(css,{});
1566
1705
 
1567
1706
  exports.NeetoThemesBuilder = index;