@bigbinary/neeto-themes-frontend 1.2.1 → 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
  });
@@ -857,20 +857,32 @@ var ThemeMeta = reactUtils.withT(function (_ref) {
857
857
  });
858
858
  });
859
859
 
860
- 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; }
861
- 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; }
862
862
  var Customize = function Customize(_ref) {
863
863
  var themeId = _ref.themeId,
864
864
  theme = _ref.theme,
865
- onCreateTheme = _ref.onCreateTheme;
865
+ onCreateTheme = _ref.onCreateTheme,
866
+ onApplyTheme = _ref.onApplyTheme,
867
+ isApplyingTheme = _ref.isApplyingTheme;
866
868
  var _useTranslation = reactI18next.useTranslation(),
867
869
  t = _useTranslation.t;
870
+ var _useState = react.useState({}),
871
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
872
+ popoverInstance = _useState2[0],
873
+ setPopoverInstance = _useState2[1];
868
874
  var _useConfigStore = useConfigStore(function (store) {
869
875
  return {
870
- themePropertiesSchema: store["themePropertiesSchema"]
876
+ themePropertiesSchema: store["themePropertiesSchema"],
877
+ entityType: store["entityType"]
871
878
  };
872
879
  }, shallow.shallow),
873
- 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);
874
886
  var _useCreateTheme = useCreateTheme(),
875
887
  createTheme = _useCreateTheme.mutate,
876
888
  isCreating = _useCreateTheme.isLoading;
@@ -881,7 +893,7 @@ var Customize = function Customize(_ref) {
881
893
  var onSubmit = function onSubmit(values, _ref2) {
882
894
  var resetForm = _ref2.resetForm;
883
895
  var imageData = buildImageData(values, themePropertiesSchema);
884
- var themeToSave = _objectSpread({
896
+ var themeToSave = _objectSpread$1({
885
897
  propertiesAttributes: values.properties,
886
898
  name: values.name
887
899
  }, imageData);
@@ -889,6 +901,9 @@ var Customize = function Customize(_ref) {
889
901
  return createTheme(themeToSave, {
890
902
  onSuccess: function onSuccess(_ref3) {
891
903
  var theme = _ref3.theme;
904
+ resetForm({
905
+ values: values
906
+ });
892
907
  onCreateTheme(theme);
893
908
  }
894
909
  });
@@ -934,14 +949,127 @@ var Customize = function Customize(_ref) {
934
949
  disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
935
950
  label: t("neetoThemes.buttons.save"),
936
951
  loading: isSubmitting,
952
+ ref: submitBtnRef,
937
953
  type: "submit"
938
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
939
997
  })]
940
998
  });
941
999
  }
942
1000
  });
943
1001
  };
944
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
+
945
1073
  var Thumbnail = function Thumbnail(_ref) {
946
1074
  var _theme$snakeToCamelCa, _findBy, _findBy2;
947
1075
  var active = _ref.active,
@@ -1028,35 +1156,17 @@ var Card = function Card(_ref) {
1028
1156
  onSetPreviewTheme = _ref.onSetPreviewTheme,
1029
1157
  onDeleteTheme = _ref.onDeleteTheme,
1030
1158
  onEditTheme = _ref.onEditTheme,
1031
- applyTheme = _ref.applyTheme,
1032
1159
  theme = _ref.theme,
1033
1160
  isApplyingTheme = _ref.isApplyingTheme,
1034
1161
  onCloneTheme = _ref.onCloneTheme,
1035
1162
  isHighLightedTheme = _ref.isHighLightedTheme,
1036
- setThemeBeingApplied = _ref.setThemeBeingApplied,
1163
+ onApplyTheme = _ref.onApplyTheme,
1037
1164
  Thumbnail$1 = _ref.thumbnail;
1038
1165
  var _useTranslation = reactI18next.useTranslation(),
1039
1166
  t = _useTranslation.t;
1040
1167
  var id = theme.id,
1041
1168
  name = theme.name,
1042
1169
  appliedCount = theme.appliedCount;
1043
- var _useConfigStore = useConfigStore(function (store) {
1044
- return {
1045
- entityId: store["entityId"],
1046
- entityType: store["entityType"]
1047
- };
1048
- }, shallow.shallow),
1049
- entityId = _useConfigStore.entityId,
1050
- entityType = _useConfigStore.entityType;
1051
- var handleApplyThemeClick = function handleApplyThemeClick() {
1052
- if (isApplyingTheme) return;
1053
- setThemeBeingApplied(theme);
1054
- applyTheme({
1055
- themeId: theme.id,
1056
- entityId: entityId,
1057
- entityType: entityType
1058
- });
1059
- };
1060
1170
  var handleCloneTheme = function handleCloneTheme() {
1061
1171
  return onCloneTheme(theme);
1062
1172
  };
@@ -1066,55 +1176,73 @@ var Card = function Card(_ref) {
1066
1176
  var handleDeleteTheme = function handleDeleteTheme() {
1067
1177
  return onDeleteTheme(id, name, appliedCount);
1068
1178
  };
1069
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
1179
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1070
1180
  className: "group space-y-2 pt-0.5",
1071
1181
  "data-cy": active ? "active-theme-card" : "theme-card",
1072
1182
  id: theme.id,
1073
- 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
+ }),
1074
1190
  onClick: function onClick() {
1075
1191
  return onSetPreviewTheme(theme);
1076
1192
  },
1077
- children: Thumbnail$1 ? /*#__PURE__*/jsxRuntime.jsx(Thumbnail$1, {
1078
- active: active,
1079
- isHighLightedTheme: isHighLightedTheme,
1080
- isPreviewing: isPreviewing,
1081
- theme: theme
1082
- }) : /*#__PURE__*/jsxRuntime.jsx(Thumbnail, {
1083
- active: active,
1084
- isHighLightedTheme: isHighLightedTheme,
1085
- isPreviewing: isPreviewing,
1086
- theme: theme
1087
- })
1088
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1089
- className: "flex items-start justify-between gap-1",
1090
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
1091
- className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
1092
- "data-cy": "theme-name",
1093
- lineHeight: "snug",
1094
- style: "body2",
1095
- 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
+ })]
1096
1229
  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1097
- className: "flex items-center gap-2",
1098
- children: [active ? /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
1099
- className: "flex-shrink-0",
1100
- "data-cy": "active-theme-label",
1101
- label: t("neetoThemes.common.active"),
1102
- style: "success"
1103
- }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
1104
- className: "flex-shrink-0",
1105
- "data-cy": "apply-theme-button",
1106
- disabled: isApplyingTheme,
1107
- label: t("neetoThemes.common.apply"),
1108
- loading: isApplyingTheme,
1109
- size: "small",
1110
- style: "link",
1111
- 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
1112
1237
  }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
1113
1238
  dropdownButtonProps: {
1114
1239
  size: "small"
1115
1240
  },
1116
1241
  dropdownProps: {
1117
- strategy: "fixed"
1242
+ strategy: "fixed",
1243
+ onClick: function onClick(e) {
1244
+ return e.stopPropagation();
1245
+ }
1118
1246
  },
1119
1247
  menuItems: [{
1120
1248
  key: "edit",
@@ -1138,7 +1266,7 @@ var Card = function Card(_ref) {
1138
1266
  }]
1139
1267
  })]
1140
1268
  })]
1141
- })]
1269
+ })
1142
1270
  });
1143
1271
  };
1144
1272
  var Card$1 = /*#__PURE__*/react.memo(Card);
@@ -1151,12 +1279,14 @@ var Themes = function Themes(_ref) {
1151
1279
  defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
1152
1280
  onDeleteTheme = _ref.onDeleteTheme,
1153
1281
  themeToHighlight = _ref.themeToHighlight,
1154
- highlightTheme = _ref.highlightTheme,
1155
1282
  didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
1156
1283
  isLoading = _ref.isLoading,
1157
1284
  currentTheme = _ref.currentTheme,
1158
1285
  isCurrentThemeLoading = _ref.isCurrentThemeLoading,
1159
- thumbnail = _ref.thumbnail;
1286
+ thumbnail = _ref.thumbnail,
1287
+ themeBeingApplied = _ref.themeBeingApplied,
1288
+ onApplyTheme = _ref.onApplyTheme,
1289
+ isApplyingTheme = _ref.isApplyingTheme;
1160
1290
  var _useTranslation = reactI18next.useTranslation(),
1161
1291
  t = _useTranslation.t;
1162
1292
  var _useThemeUtils = useThemeUtils(),
@@ -1173,24 +1303,8 @@ var Themes = function Themes(_ref) {
1173
1303
  _useState2 = _slicedToArray__default["default"](_useState, 2),
1174
1304
  searchQuery = _useState2[0],
1175
1305
  setSearchQuery = _useState2[1];
1176
- var _useState3 = react.useState({}),
1177
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
1178
- themeBeingApplied = _useState4[0],
1179
- setThemeBeingApplied = _useState4[1];
1180
1306
  var _useCloneTheme = useCloneTheme(),
1181
1307
  cloneTheme = _useCloneTheme.mutate;
1182
- var _useApplyTheme = useApplyTheme({
1183
- onSuccess: function onSuccess(_ref2) {
1184
- var theme = _ref2.theme;
1185
- setTheme(theme);
1186
- setThemeState({
1187
- previewingTheme: theme
1188
- });
1189
- setThemeBeingApplied({});
1190
- }
1191
- }),
1192
- applyTheme = _useApplyTheme.mutate,
1193
- isApplyingTheme = _useApplyTheme.isLoading;
1194
1308
  react.useEffect(function () {
1195
1309
  if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
1196
1310
  didScrollActiveThemeIntoView.current = true;
@@ -1213,9 +1327,9 @@ var Themes = function Themes(_ref) {
1213
1327
  var isSearchFieldVisible = (themes === null || themes === void 0 ? void 0 : themes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
1214
1328
  var handleCloneTheme = function handleCloneTheme(data) {
1215
1329
  cloneTheme(data.id, {
1216
- onSuccess: function onSuccess(_ref3) {
1217
- var clonedTheme = _ref3.theme;
1218
- highlightTheme(clonedTheme);
1330
+ onSuccess: function onSuccess(_ref2) {
1331
+ var clonedTheme = _ref2.theme;
1332
+ onEditTheme(clonedTheme);
1219
1333
  }
1220
1334
  });
1221
1335
  };
@@ -1250,8 +1364,7 @@ var Themes = function Themes(_ref) {
1250
1364
  className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
1251
1365
  children: filteredDefaultThemes.map(function (theme) {
1252
1366
  return /*#__PURE__*/react.createElement(Card$1, {
1253
- applyTheme: applyTheme,
1254
- setThemeBeingApplied: setThemeBeingApplied,
1367
+ onApplyTheme: onApplyTheme,
1255
1368
  theme: theme,
1256
1369
  thumbnail: thumbnail,
1257
1370
  active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
@@ -1278,10 +1391,9 @@ var Themes = function Themes(_ref) {
1278
1391
  var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
1279
1392
  var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
1280
1393
  return /*#__PURE__*/react.createElement(Card$1, {
1281
- applyTheme: applyTheme,
1282
1394
  isPreviewing: isPreviewing,
1395
+ onApplyTheme: onApplyTheme,
1283
1396
  onEditTheme: onEditTheme,
1284
- setThemeBeingApplied: setThemeBeingApplied,
1285
1397
  theme: theme,
1286
1398
  thumbnail: thumbnail,
1287
1399
  active: isActive,
@@ -1374,6 +1486,10 @@ var Sidebar = function Sidebar(_ref) {
1374
1486
  _useState6 = _slicedToArray__default["default"](_useState5, 2),
1375
1487
  themeToHighlight = _useState6[0],
1376
1488
  setThemeToHighlight = _useState6[1];
1489
+ var _useState7 = react.useState({}),
1490
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
1491
+ themeBeingApplied = _useState8[0],
1492
+ setThemeBeingApplied = _useState8[1];
1377
1493
  var _useConfigStore = useConfigStore(function (store) {
1378
1494
  return {
1379
1495
  entityType: store["entityType"],
@@ -1412,12 +1528,34 @@ var Sidebar = function Sidebar(_ref) {
1412
1528
  var _useDeleteTheme = useDeleteTheme(),
1413
1529
  deleteTheme = _useDeleteTheme.mutate,
1414
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;
1415
1544
  var themeToDelete = react.useRef(null);
1416
1545
  var themeToEdit = react.useRef(null);
1417
1546
  var handleEditTheme = function handleEditTheme(theme) {
1418
1547
  themeToEdit.current = theme;
1419
1548
  setCurrentScreen(DESIGN_SCREENS.Customize);
1420
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
+ };
1421
1559
  var handleBackPress = function handleBackPress() {
1422
1560
  setTheme(currentTheme);
1423
1561
  setThemeState({
@@ -1436,13 +1574,11 @@ var Sidebar = function Sidebar(_ref) {
1436
1574
  setThemeToHighlight(themeToHighlight.id);
1437
1575
  };
1438
1576
  var onCreateTheme = function onCreateTheme(createdTheme) {
1439
- setCurrentScreen(DESIGN_SCREENS.THEMES);
1577
+ themeToEdit.current = createdTheme;
1440
1578
  setTheme(createdTheme);
1441
1579
  setThemeState({
1442
1580
  previewingTheme: createdTheme
1443
1581
  });
1444
- highlightTheme(createdTheme);
1445
- themeToEdit.current = null;
1446
1582
  };
1447
1583
  var handleDelete = function handleDelete(themeId, name, appliedCount) {
1448
1584
  setIsDeleteAlertOpen(true);
@@ -1491,7 +1627,10 @@ var Sidebar = function Sidebar(_ref) {
1491
1627
  defaultThemes: defaultThemes,
1492
1628
  didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
1493
1629
  highlightTheme: highlightTheme,
1630
+ isApplyingTheme: isApplyingTheme,
1494
1631
  isCurrentThemeLoading: isCurrentThemeLoading,
1632
+ onApplyTheme: onApplyTheme,
1633
+ themeBeingApplied: themeBeingApplied,
1495
1634
  themeToHighlight: themeToHighlight,
1496
1635
  themes: themes,
1497
1636
  thumbnail: thumbnail,
@@ -1499,6 +1638,8 @@ var Sidebar = function Sidebar(_ref) {
1499
1638
  onDeleteTheme: handleDelete,
1500
1639
  onEditTheme: handleEditTheme
1501
1640
  }) : /*#__PURE__*/jsxRuntime.jsx(Customize, {
1641
+ isApplyingTheme: isApplyingTheme,
1642
+ onApplyTheme: onApplyTheme,
1502
1643
  onCreateTheme: onCreateTheme,
1503
1644
  theme: themeToEdit.current,
1504
1645
  themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
@@ -1559,7 +1700,7 @@ var index = reactUtils.withTitle(NeetoThemesBuilder, i18next.t("neetoThemes.comm
1559
1700
 
1560
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}}
1561
1702
 
1562
- 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 */";
1563
1704
  n(css,{});
1564
1705
 
1565
1706
  exports.NeetoThemesBuilder = index;