@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.
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { shallow } from 'zustand/shallow';
2
- import { useEffect, createElement, memo, useState, useRef, useCallback } from 'react';
2
+ import { useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
3
3
  import { t as t$1 } from 'i18next';
4
4
  import { withImmutableActions, useMutationWithInvalidation, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
5
5
  import Spinner from '@bigbinary/neetoui/Spinner';
@@ -7,7 +7,7 @@ import { create as create$1 } from 'zustand';
7
7
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
8
8
  import { isNotPresent, snakeToCamelCase, filterBy, isPresent, isNot, findBy, findIndexBy, toLabelAndValue, humanize, isNotEmpty } from '@bigbinary/neeto-cist';
9
9
  import Alert from '@bigbinary/neetoui/Alert';
10
- import { useTranslation } from 'react-i18next';
10
+ import { useTranslation, Trans } from 'react-i18next';
11
11
  import '@babel/runtime/helpers/asyncToGenerator';
12
12
  import '@babel/runtime/regenerator';
13
13
  import '@bigbinary/neetoui/Toastr';
@@ -16,11 +16,13 @@ import axios from 'axios';
16
16
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
17
17
  import { prop, isEmpty, negate } from 'ramda';
18
18
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
19
+ import { Close, LeftArrow, Plus } from '@bigbinary/neeto-icons';
19
20
  import Button from '@bigbinary/neetoui/Button';
21
+ import Popover from '@bigbinary/neetoui/Popover';
22
+ import Typography from '@bigbinary/neetoui/Typography';
20
23
  import Form from '@bigbinary/neetoui/formik/Form';
21
24
  import * as yup from 'yup';
22
25
  import { useFormikContext } from 'formik';
23
- import Typography from '@bigbinary/neetoui/Typography';
24
26
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
25
27
  import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
26
28
  import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
@@ -30,10 +32,8 @@ import { Slider } from 'antd';
30
32
  import Switch from '@bigbinary/neetoui/Switch';
31
33
  import Input from '@bigbinary/neetoui/formik/Input';
32
34
  import Search from '@bigbinary/neeto-molecules/Search';
33
- import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
34
- import Tag from '@bigbinary/neetoui/Tag';
35
35
  import classnames from 'classnames';
36
- import { LeftArrow, Plus } from '@bigbinary/neeto-icons';
36
+ import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
37
37
 
38
38
  /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
39
39
  var useConfigStore = create$1(withImmutableActions(function (set) {
@@ -545,8 +545,8 @@ var ColorBlock = function ColorBlock(_ref) {
545
545
  });
546
546
  };
547
547
 
548
- 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; }
549
- function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
548
+ 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; }
549
+ function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
550
550
  var FontPickerBlock = function FontPickerBlock(_ref) {
551
551
  var label = _ref.label,
552
552
  _ref$placeholder = _ref.placeholder,
@@ -572,7 +572,7 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
572
572
  styles: {
573
573
  option: function option(styles, _ref2) {
574
574
  var data = _ref2.data;
575
- return _objectSpread$2(_objectSpread$2({}, styles), {}, {
575
+ return _objectSpread$3(_objectSpread$3({}, styles), {}, {
576
576
  fontFamily: data.value
577
577
  });
578
578
  }
@@ -637,8 +637,8 @@ var SliderBlock = function SliderBlock(_ref) {
637
637
  };
638
638
 
639
639
  var _excluded = ["label", "name"];
640
- 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; }
641
- function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
640
+ 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; }
641
+ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
642
642
  var SwitchBlock = function SwitchBlock(_ref) {
643
643
  var label = _ref.label,
644
644
  name = _ref.name,
@@ -648,7 +648,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
648
648
  children: [/*#__PURE__*/jsx(Typography, {
649
649
  style: "body2",
650
650
  children: label
651
- }), /*#__PURE__*/jsx(Switch, _objectSpread$1({}, _objectSpread$1({
651
+ }), /*#__PURE__*/jsx(Switch, _objectSpread$2({}, _objectSpread$2({
652
652
  name: name
653
653
  }, switchProps)))]
654
654
  });
@@ -734,9 +734,7 @@ var Properties = function Properties() {
734
734
  }, key);
735
735
  }), filterBy({
736
736
  kind: "color"
737
- }, values.properties).sort(function (colorObject1, colorObject2) {
738
- return colorObject1.key.localeCompare(colorObject2.key);
739
- }).map(function (_ref4) {
737
+ }, values.properties).map(function (_ref4) {
740
738
  var key = _ref4.key,
741
739
  value = _ref4.value,
742
740
  kind = _ref4.kind;
@@ -816,20 +814,32 @@ var ThemeMeta = withT(function (_ref) {
816
814
  });
817
815
  });
818
816
 
819
- 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; }
820
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
817
+ 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; }
818
+ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
821
819
  var Customize = function Customize(_ref) {
822
820
  var themeId = _ref.themeId,
823
821
  theme = _ref.theme,
824
- onCreateTheme = _ref.onCreateTheme;
822
+ onCreateTheme = _ref.onCreateTheme,
823
+ onApplyTheme = _ref.onApplyTheme,
824
+ isApplyingTheme = _ref.isApplyingTheme;
825
825
  var _useTranslation = useTranslation(),
826
826
  t = _useTranslation.t;
827
+ var _useState = useState({}),
828
+ _useState2 = _slicedToArray(_useState, 2),
829
+ popoverInstance = _useState2[0],
830
+ setPopoverInstance = _useState2[1];
827
831
  var _useConfigStore = useConfigStore(function (store) {
828
832
  return {
829
- themePropertiesSchema: store["themePropertiesSchema"]
833
+ themePropertiesSchema: store["themePropertiesSchema"],
834
+ entityType: store["entityType"]
830
835
  };
831
836
  }, shallow),
832
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
837
+ themePropertiesSchema = _useConfigStore.themePropertiesSchema,
838
+ entityType = _useConfigStore.entityType;
839
+ var _useThemeUtils = useThemeUtils(),
840
+ currentTheme = _useThemeUtils.currentTheme;
841
+ var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
842
+ var submitBtnRef = useRef(null);
833
843
  var _useCreateTheme = useCreateTheme(),
834
844
  createTheme = _useCreateTheme.mutate,
835
845
  isCreating = _useCreateTheme.isLoading;
@@ -840,7 +850,7 @@ var Customize = function Customize(_ref) {
840
850
  var onSubmit = function onSubmit(values, _ref2) {
841
851
  var resetForm = _ref2.resetForm;
842
852
  var imageData = buildImageData(values, themePropertiesSchema);
843
- var themeToSave = _objectSpread({
853
+ var themeToSave = _objectSpread$1({
844
854
  propertiesAttributes: values.properties,
845
855
  name: values.name
846
856
  }, imageData);
@@ -848,6 +858,9 @@ var Customize = function Customize(_ref) {
848
858
  return createTheme(themeToSave, {
849
859
  onSuccess: function onSuccess(_ref3) {
850
860
  var theme = _ref3.theme;
861
+ resetForm({
862
+ values: values
863
+ });
851
864
  onCreateTheme(theme);
852
865
  }
853
866
  });
@@ -893,14 +906,127 @@ var Customize = function Customize(_ref) {
893
906
  disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
894
907
  label: t("neetoThemes.buttons.save"),
895
908
  loading: isSubmitting,
909
+ ref: submitBtnRef,
896
910
  type: "submit"
897
911
  })]
912
+ }), /*#__PURE__*/jsx(Popover, {
913
+ appendTo: function appendTo() {
914
+ return document.body;
915
+ },
916
+ disabled: isEditingCurrentlyAppliedTheme,
917
+ position: "top",
918
+ reference: submitBtnRef,
919
+ trigger: "click",
920
+ content: /*#__PURE__*/jsxs("div", {
921
+ className: "flex flex-col items-start gap-2",
922
+ children: [/*#__PURE__*/jsx(Button, {
923
+ className: "absolute right-1 top-1 z-0",
924
+ icon: Close,
925
+ size: "small",
926
+ style: "text",
927
+ onClick: function onClick() {
928
+ var _popoverInstance$hide;
929
+ return popoverInstance === null || popoverInstance === void 0 || (_popoverInstance$hide = popoverInstance.hide) === null || _popoverInstance$hide === void 0 ? void 0 : _popoverInstance$hide.call(popoverInstance);
930
+ }
931
+ }), /*#__PURE__*/jsx(Typography, {
932
+ className: "w-72 pr-5",
933
+ style: "body2",
934
+ weight: "normal",
935
+ children: /*#__PURE__*/jsx(Trans, {
936
+ components: {
937
+ bold: /*#__PURE__*/jsx("strong", {})
938
+ },
939
+ i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
940
+ values: {
941
+ entityType: entityType
942
+ }
943
+ })
944
+ }), /*#__PURE__*/jsx(Button, {
945
+ disabled: isApplyingTheme,
946
+ label: t("neetoThemes.buttons.applyThisTheme"),
947
+ loading: isApplyingTheme,
948
+ onClick: function onClick() {
949
+ return onApplyTheme(theme);
950
+ }
951
+ })]
952
+ }),
953
+ onMount: setPopoverInstance
898
954
  })]
899
955
  });
900
956
  }
901
957
  });
902
958
  };
903
959
 
960
+ 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; }
961
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
962
+ var Check = function Check(props) {
963
+ return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
964
+ fill: "none",
965
+ height: "24",
966
+ viewBox: "0 0 24 24",
967
+ width: "24",
968
+ xmlns: "http://www.w3.org/2000/svg"
969
+ }, props), {}, {
970
+ children: [/*#__PURE__*/jsxs("g", {
971
+ filter: "url(#filter0_d_9519_161)",
972
+ children: [/*#__PURE__*/jsx("rect", {
973
+ fill: "#4558F9",
974
+ height: "20",
975
+ rx: "10",
976
+ width: "20",
977
+ x: "2",
978
+ y: "2"
979
+ }), /*#__PURE__*/jsx("rect", {
980
+ height: "20",
981
+ rx: "10",
982
+ stroke: "#fff",
983
+ strokeWidth: "1.5",
984
+ width: "20",
985
+ x: "2",
986
+ y: "2"
987
+ }), /*#__PURE__*/jsx("path", {
988
+ d: "M16.375 9.5l-5.95 6.25-2.8-2.941",
989
+ stroke: "#fff",
990
+ strokeLinecap: "round",
991
+ strokeLinejoin: "round",
992
+ strokeWidth: "1.25"
993
+ })]
994
+ }), /*#__PURE__*/jsx("defs", {
995
+ children: /*#__PURE__*/jsxs("filter", {
996
+ colorInterpolationFilters: "sRGB",
997
+ filterUnits: "userSpaceOnUse",
998
+ height: "23.5",
999
+ id: "filter0_d_9519_161",
1000
+ width: "23.5",
1001
+ x: "0.25",
1002
+ y: "0.25",
1003
+ children: [/*#__PURE__*/jsx("feFlood", {
1004
+ floodOpacity: "0",
1005
+ result: "BackgroundImageFix"
1006
+ }), /*#__PURE__*/jsx("feColorMatrix", {
1007
+ "in": "SourceAlpha",
1008
+ result: "hardAlpha",
1009
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
1010
+ }), /*#__PURE__*/jsx("feOffset", {}), /*#__PURE__*/jsx("feGaussianBlur", {
1011
+ stdDeviation: "0.5"
1012
+ }), /*#__PURE__*/jsx("feComposite", {
1013
+ in2: "hardAlpha",
1014
+ operator: "out"
1015
+ }), /*#__PURE__*/jsx("feColorMatrix", {
1016
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"
1017
+ }), /*#__PURE__*/jsx("feBlend", {
1018
+ in2: "BackgroundImageFix",
1019
+ result: "effect1_dropShadow_9519_161"
1020
+ }), /*#__PURE__*/jsx("feBlend", {
1021
+ "in": "SourceGraphic",
1022
+ in2: "effect1_dropShadow_9519_161",
1023
+ result: "shape"
1024
+ })]
1025
+ })
1026
+ })]
1027
+ }));
1028
+ };
1029
+
904
1030
  var Thumbnail = function Thumbnail(_ref) {
905
1031
  var _theme$snakeToCamelCa, _findBy, _findBy2;
906
1032
  var active = _ref.active,
@@ -987,35 +1113,17 @@ var Card = function Card(_ref) {
987
1113
  onSetPreviewTheme = _ref.onSetPreviewTheme,
988
1114
  onDeleteTheme = _ref.onDeleteTheme,
989
1115
  onEditTheme = _ref.onEditTheme,
990
- applyTheme = _ref.applyTheme,
991
1116
  theme = _ref.theme,
992
1117
  isApplyingTheme = _ref.isApplyingTheme,
993
1118
  onCloneTheme = _ref.onCloneTheme,
994
1119
  isHighLightedTheme = _ref.isHighLightedTheme,
995
- setThemeBeingApplied = _ref.setThemeBeingApplied,
1120
+ onApplyTheme = _ref.onApplyTheme,
996
1121
  Thumbnail$1 = _ref.thumbnail;
997
1122
  var _useTranslation = useTranslation(),
998
1123
  t = _useTranslation.t;
999
1124
  var id = theme.id,
1000
1125
  name = theme.name,
1001
1126
  appliedCount = theme.appliedCount;
1002
- var _useConfigStore = useConfigStore(function (store) {
1003
- return {
1004
- entityId: store["entityId"],
1005
- entityType: store["entityType"]
1006
- };
1007
- }, shallow),
1008
- entityId = _useConfigStore.entityId,
1009
- entityType = _useConfigStore.entityType;
1010
- var handleApplyThemeClick = function handleApplyThemeClick() {
1011
- if (isApplyingTheme) return;
1012
- setThemeBeingApplied(theme);
1013
- applyTheme({
1014
- themeId: theme.id,
1015
- entityId: entityId,
1016
- entityType: entityType
1017
- });
1018
- };
1019
1127
  var handleCloneTheme = function handleCloneTheme() {
1020
1128
  return onCloneTheme(theme);
1021
1129
  };
@@ -1025,55 +1133,73 @@ var Card = function Card(_ref) {
1025
1133
  var handleDeleteTheme = function handleDeleteTheme() {
1026
1134
  return onDeleteTheme(id, name, appliedCount);
1027
1135
  };
1028
- return /*#__PURE__*/jsxs("div", {
1136
+ return /*#__PURE__*/jsx("div", {
1029
1137
  className: "group space-y-2 pt-0.5",
1030
1138
  "data-cy": active ? "active-theme-card" : "theme-card",
1031
1139
  id: theme.id,
1032
- children: [/*#__PURE__*/jsx("div", {
1140
+ children: /*#__PURE__*/jsxs("div", {
1141
+ className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg cursor-pointer border transition-all duration-300 ease-in-out", {
1142
+ "neeto-ui-border-gray-200": !active,
1143
+ "neeto-themes-theme-thumbnail--active": active,
1144
+ "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
1145
+ "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
1146
+ }),
1033
1147
  onClick: function onClick() {
1034
1148
  return onSetPreviewTheme(theme);
1035
1149
  },
1036
- children: Thumbnail$1 ? /*#__PURE__*/jsx(Thumbnail$1, {
1037
- active: active,
1038
- isHighLightedTheme: isHighLightedTheme,
1039
- isPreviewing: isPreviewing,
1040
- theme: theme
1041
- }) : /*#__PURE__*/jsx(Thumbnail, {
1042
- active: active,
1043
- isHighLightedTheme: isHighLightedTheme,
1044
- isPreviewing: isPreviewing,
1045
- theme: theme
1046
- })
1047
- }), /*#__PURE__*/jsxs("div", {
1048
- className: "flex items-start justify-between gap-1",
1049
- children: [/*#__PURE__*/jsx(Typography, {
1050
- className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
1051
- "data-cy": "theme-name",
1052
- lineHeight: "snug",
1053
- style: "body2",
1054
- children: name
1150
+ children: [/*#__PURE__*/jsxs("div", {
1151
+ 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",
1152
+ children: [/*#__PURE__*/jsx("div", {
1153
+ className: "absolute right-0 top-0 p-3",
1154
+ children: active ? /*#__PURE__*/jsx(Check, {
1155
+ className: "flex-shrink-0",
1156
+ "data-cy": "active-theme-label"
1157
+ }) : /*#__PURE__*/jsx("div", {
1158
+ className: classnames({
1159
+ hidden: !isPreviewing,
1160
+ "group-hover:block": true
1161
+ }),
1162
+ children: /*#__PURE__*/jsx(Button, {
1163
+ className: "neeto-themes-theme-thumbnail__apply-btn flex-shrink-0",
1164
+ "data-cy": "apply-theme-button",
1165
+ disabled: isApplyingTheme,
1166
+ label: t("neetoThemes.common.apply"),
1167
+ loading: isApplyingTheme,
1168
+ size: "small",
1169
+ style: "tertiary",
1170
+ onClick: function onClick() {
1171
+ return onApplyTheme(theme);
1172
+ }
1173
+ })
1174
+ })
1175
+ }), Thumbnail$1 ? /*#__PURE__*/jsx(Thumbnail$1, {
1176
+ active: active,
1177
+ isHighLightedTheme: isHighLightedTheme,
1178
+ isPreviewing: isPreviewing,
1179
+ theme: theme
1180
+ }) : /*#__PURE__*/jsx(Thumbnail, {
1181
+ active: active,
1182
+ isHighLightedTheme: isHighLightedTheme,
1183
+ isPreviewing: isPreviewing,
1184
+ theme: theme
1185
+ })]
1055
1186
  }), /*#__PURE__*/jsxs("div", {
1056
- className: "flex items-center gap-2",
1057
- children: [active ? /*#__PURE__*/jsx(Tag, {
1058
- className: "flex-shrink-0",
1059
- "data-cy": "active-theme-label",
1060
- label: t("neetoThemes.common.active"),
1061
- style: "success"
1062
- }) : /*#__PURE__*/jsx(Button, {
1063
- className: "flex-shrink-0",
1064
- "data-cy": "apply-theme-button",
1065
- disabled: isApplyingTheme,
1066
- label: t("neetoThemes.common.apply"),
1067
- loading: isApplyingTheme,
1068
- size: "small",
1069
- style: "link",
1070
- onClick: handleApplyThemeClick
1187
+ className: "flex items-start justify-between gap-1 p-3",
1188
+ children: [/*#__PURE__*/jsx(Typography, {
1189
+ className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
1190
+ "data-cy": "theme-name",
1191
+ lineHeight: "snug",
1192
+ style: "body2",
1193
+ children: name
1071
1194
  }), /*#__PURE__*/jsx(MoreDropdown, {
1072
1195
  dropdownButtonProps: {
1073
1196
  size: "small"
1074
1197
  },
1075
1198
  dropdownProps: {
1076
- strategy: "fixed"
1199
+ strategy: "fixed",
1200
+ onClick: function onClick(e) {
1201
+ return e.stopPropagation();
1202
+ }
1077
1203
  },
1078
1204
  menuItems: [{
1079
1205
  key: "edit",
@@ -1097,7 +1223,7 @@ var Card = function Card(_ref) {
1097
1223
  }]
1098
1224
  })]
1099
1225
  })]
1100
- })]
1226
+ })
1101
1227
  });
1102
1228
  };
1103
1229
  var Card$1 = /*#__PURE__*/memo(Card);
@@ -1110,12 +1236,14 @@ var Themes = function Themes(_ref) {
1110
1236
  defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
1111
1237
  onDeleteTheme = _ref.onDeleteTheme,
1112
1238
  themeToHighlight = _ref.themeToHighlight,
1113
- highlightTheme = _ref.highlightTheme,
1114
1239
  didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
1115
1240
  isLoading = _ref.isLoading,
1116
1241
  currentTheme = _ref.currentTheme,
1117
1242
  isCurrentThemeLoading = _ref.isCurrentThemeLoading,
1118
- thumbnail = _ref.thumbnail;
1243
+ thumbnail = _ref.thumbnail,
1244
+ themeBeingApplied = _ref.themeBeingApplied,
1245
+ onApplyTheme = _ref.onApplyTheme,
1246
+ isApplyingTheme = _ref.isApplyingTheme;
1119
1247
  var _useTranslation = useTranslation(),
1120
1248
  t = _useTranslation.t;
1121
1249
  var _useThemeUtils = useThemeUtils(),
@@ -1132,24 +1260,8 @@ var Themes = function Themes(_ref) {
1132
1260
  _useState2 = _slicedToArray(_useState, 2),
1133
1261
  searchQuery = _useState2[0],
1134
1262
  setSearchQuery = _useState2[1];
1135
- var _useState3 = useState({}),
1136
- _useState4 = _slicedToArray(_useState3, 2),
1137
- themeBeingApplied = _useState4[0],
1138
- setThemeBeingApplied = _useState4[1];
1139
1263
  var _useCloneTheme = useCloneTheme(),
1140
1264
  cloneTheme = _useCloneTheme.mutate;
1141
- var _useApplyTheme = useApplyTheme({
1142
- onSuccess: function onSuccess(_ref2) {
1143
- var theme = _ref2.theme;
1144
- setTheme(theme);
1145
- setThemeState({
1146
- previewingTheme: theme
1147
- });
1148
- setThemeBeingApplied({});
1149
- }
1150
- }),
1151
- applyTheme = _useApplyTheme.mutate,
1152
- isApplyingTheme = _useApplyTheme.isLoading;
1153
1265
  useEffect(function () {
1154
1266
  if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
1155
1267
  didScrollActiveThemeIntoView.current = true;
@@ -1172,9 +1284,9 @@ var Themes = function Themes(_ref) {
1172
1284
  var isSearchFieldVisible = (themes === null || themes === void 0 ? void 0 : themes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
1173
1285
  var handleCloneTheme = function handleCloneTheme(data) {
1174
1286
  cloneTheme(data.id, {
1175
- onSuccess: function onSuccess(_ref3) {
1176
- var clonedTheme = _ref3.theme;
1177
- highlightTheme(clonedTheme);
1287
+ onSuccess: function onSuccess(_ref2) {
1288
+ var clonedTheme = _ref2.theme;
1289
+ onEditTheme(clonedTheme);
1178
1290
  }
1179
1291
  });
1180
1292
  };
@@ -1209,8 +1321,7 @@ var Themes = function Themes(_ref) {
1209
1321
  className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
1210
1322
  children: filteredDefaultThemes.map(function (theme) {
1211
1323
  return /*#__PURE__*/createElement(Card$1, {
1212
- applyTheme: applyTheme,
1213
- setThemeBeingApplied: setThemeBeingApplied,
1324
+ onApplyTheme: onApplyTheme,
1214
1325
  theme: theme,
1215
1326
  thumbnail: thumbnail,
1216
1327
  active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
@@ -1237,10 +1348,9 @@ var Themes = function Themes(_ref) {
1237
1348
  var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
1238
1349
  var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
1239
1350
  return /*#__PURE__*/createElement(Card$1, {
1240
- applyTheme: applyTheme,
1241
1351
  isPreviewing: isPreviewing,
1352
+ onApplyTheme: onApplyTheme,
1242
1353
  onEditTheme: onEditTheme,
1243
- setThemeBeingApplied: setThemeBeingApplied,
1244
1354
  theme: theme,
1245
1355
  thumbnail: thumbnail,
1246
1356
  active: isActive,
@@ -1333,6 +1443,10 @@ var Sidebar = function Sidebar(_ref) {
1333
1443
  _useState6 = _slicedToArray(_useState5, 2),
1334
1444
  themeToHighlight = _useState6[0],
1335
1445
  setThemeToHighlight = _useState6[1];
1446
+ var _useState7 = useState({}),
1447
+ _useState8 = _slicedToArray(_useState7, 2),
1448
+ themeBeingApplied = _useState8[0],
1449
+ setThemeBeingApplied = _useState8[1];
1336
1450
  var _useConfigStore = useConfigStore(function (store) {
1337
1451
  return {
1338
1452
  entityType: store["entityType"],
@@ -1371,12 +1485,34 @@ var Sidebar = function Sidebar(_ref) {
1371
1485
  var _useDeleteTheme = useDeleteTheme(),
1372
1486
  deleteTheme = _useDeleteTheme.mutate,
1373
1487
  isDeleting = _useDeleteTheme.isLoading;
1488
+ var _useApplyTheme = useApplyTheme({
1489
+ onSuccess: function onSuccess(_ref2) {
1490
+ var theme = _ref2.theme;
1491
+ setTheme(theme);
1492
+ setThemeState({
1493
+ previewingTheme: theme
1494
+ });
1495
+ setThemeBeingApplied({});
1496
+ setCurrentScreen(DESIGN_SCREENS.THEMES);
1497
+ }
1498
+ }),
1499
+ applyTheme = _useApplyTheme.mutate,
1500
+ isApplyingTheme = _useApplyTheme.isLoading;
1374
1501
  var themeToDelete = useRef(null);
1375
1502
  var themeToEdit = useRef(null);
1376
1503
  var handleEditTheme = function handleEditTheme(theme) {
1377
1504
  themeToEdit.current = theme;
1378
1505
  setCurrentScreen(DESIGN_SCREENS.Customize);
1379
1506
  };
1507
+ var onApplyTheme = function onApplyTheme(theme) {
1508
+ if (isApplyingTheme) return;
1509
+ setThemeBeingApplied(theme);
1510
+ applyTheme({
1511
+ themeId: theme.id,
1512
+ entityId: entityId,
1513
+ entityType: entityType
1514
+ });
1515
+ };
1380
1516
  var handleBackPress = function handleBackPress() {
1381
1517
  setTheme(currentTheme);
1382
1518
  setThemeState({
@@ -1395,13 +1531,11 @@ var Sidebar = function Sidebar(_ref) {
1395
1531
  setThemeToHighlight(themeToHighlight.id);
1396
1532
  };
1397
1533
  var onCreateTheme = function onCreateTheme(createdTheme) {
1398
- setCurrentScreen(DESIGN_SCREENS.THEMES);
1534
+ themeToEdit.current = createdTheme;
1399
1535
  setTheme(createdTheme);
1400
1536
  setThemeState({
1401
1537
  previewingTheme: createdTheme
1402
1538
  });
1403
- highlightTheme(createdTheme);
1404
- themeToEdit.current = null;
1405
1539
  };
1406
1540
  var handleDelete = function handleDelete(themeId, name, appliedCount) {
1407
1541
  setIsDeleteAlertOpen(true);
@@ -1450,7 +1584,10 @@ var Sidebar = function Sidebar(_ref) {
1450
1584
  defaultThemes: defaultThemes,
1451
1585
  didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
1452
1586
  highlightTheme: highlightTheme,
1587
+ isApplyingTheme: isApplyingTheme,
1453
1588
  isCurrentThemeLoading: isCurrentThemeLoading,
1589
+ onApplyTheme: onApplyTheme,
1590
+ themeBeingApplied: themeBeingApplied,
1454
1591
  themeToHighlight: themeToHighlight,
1455
1592
  themes: themes,
1456
1593
  thumbnail: thumbnail,
@@ -1458,6 +1595,8 @@ var Sidebar = function Sidebar(_ref) {
1458
1595
  onDeleteTheme: handleDelete,
1459
1596
  onEditTheme: handleEditTheme
1460
1597
  }) : /*#__PURE__*/jsx(Customize, {
1598
+ isApplyingTheme: isApplyingTheme,
1599
+ onApplyTheme: onApplyTheme,
1461
1600
  onCreateTheme: onCreateTheme,
1462
1601
  theme: themeToEdit.current,
1463
1602
  themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
@@ -1518,7 +1657,7 @@ var index = withTitle(NeetoThemesBuilder, t$1("neetoThemes.common.design"));
1518
1657
 
1519
1658
  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}}
1520
1659
 
1521
- 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= */";
1660
+ 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 */";
1522
1661
  n(css,{});
1523
1662
 
1524
1663
  export { index as NeetoThemesBuilder, setTheme, useThemeUtils };