@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.
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
  });
@@ -814,20 +814,32 @@ var ThemeMeta = withT(function (_ref) {
814
814
  });
815
815
  });
816
816
 
817
- 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; }
818
- 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; }
819
819
  var Customize = function Customize(_ref) {
820
820
  var themeId = _ref.themeId,
821
821
  theme = _ref.theme,
822
- onCreateTheme = _ref.onCreateTheme;
822
+ onCreateTheme = _ref.onCreateTheme,
823
+ onApplyTheme = _ref.onApplyTheme,
824
+ isApplyingTheme = _ref.isApplyingTheme;
823
825
  var _useTranslation = useTranslation(),
824
826
  t = _useTranslation.t;
827
+ var _useState = useState({}),
828
+ _useState2 = _slicedToArray(_useState, 2),
829
+ popoverInstance = _useState2[0],
830
+ setPopoverInstance = _useState2[1];
825
831
  var _useConfigStore = useConfigStore(function (store) {
826
832
  return {
827
- themePropertiesSchema: store["themePropertiesSchema"]
833
+ themePropertiesSchema: store["themePropertiesSchema"],
834
+ entityType: store["entityType"]
828
835
  };
829
836
  }, shallow),
830
- 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);
831
843
  var _useCreateTheme = useCreateTheme(),
832
844
  createTheme = _useCreateTheme.mutate,
833
845
  isCreating = _useCreateTheme.isLoading;
@@ -838,7 +850,7 @@ var Customize = function Customize(_ref) {
838
850
  var onSubmit = function onSubmit(values, _ref2) {
839
851
  var resetForm = _ref2.resetForm;
840
852
  var imageData = buildImageData(values, themePropertiesSchema);
841
- var themeToSave = _objectSpread({
853
+ var themeToSave = _objectSpread$1({
842
854
  propertiesAttributes: values.properties,
843
855
  name: values.name
844
856
  }, imageData);
@@ -846,6 +858,9 @@ var Customize = function Customize(_ref) {
846
858
  return createTheme(themeToSave, {
847
859
  onSuccess: function onSuccess(_ref3) {
848
860
  var theme = _ref3.theme;
861
+ resetForm({
862
+ values: values
863
+ });
849
864
  onCreateTheme(theme);
850
865
  }
851
866
  });
@@ -891,14 +906,127 @@ var Customize = function Customize(_ref) {
891
906
  disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
892
907
  label: t("neetoThemes.buttons.save"),
893
908
  loading: isSubmitting,
909
+ ref: submitBtnRef,
894
910
  type: "submit"
895
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
896
954
  })]
897
955
  });
898
956
  }
899
957
  });
900
958
  };
901
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
+
902
1030
  var Thumbnail = function Thumbnail(_ref) {
903
1031
  var _theme$snakeToCamelCa, _findBy, _findBy2;
904
1032
  var active = _ref.active,
@@ -985,35 +1113,17 @@ var Card = function Card(_ref) {
985
1113
  onSetPreviewTheme = _ref.onSetPreviewTheme,
986
1114
  onDeleteTheme = _ref.onDeleteTheme,
987
1115
  onEditTheme = _ref.onEditTheme,
988
- applyTheme = _ref.applyTheme,
989
1116
  theme = _ref.theme,
990
1117
  isApplyingTheme = _ref.isApplyingTheme,
991
1118
  onCloneTheme = _ref.onCloneTheme,
992
1119
  isHighLightedTheme = _ref.isHighLightedTheme,
993
- setThemeBeingApplied = _ref.setThemeBeingApplied,
1120
+ onApplyTheme = _ref.onApplyTheme,
994
1121
  Thumbnail$1 = _ref.thumbnail;
995
1122
  var _useTranslation = useTranslation(),
996
1123
  t = _useTranslation.t;
997
1124
  var id = theme.id,
998
1125
  name = theme.name,
999
1126
  appliedCount = theme.appliedCount;
1000
- var _useConfigStore = useConfigStore(function (store) {
1001
- return {
1002
- entityId: store["entityId"],
1003
- entityType: store["entityType"]
1004
- };
1005
- }, shallow),
1006
- entityId = _useConfigStore.entityId,
1007
- entityType = _useConfigStore.entityType;
1008
- var handleApplyThemeClick = function handleApplyThemeClick() {
1009
- if (isApplyingTheme) return;
1010
- setThemeBeingApplied(theme);
1011
- applyTheme({
1012
- themeId: theme.id,
1013
- entityId: entityId,
1014
- entityType: entityType
1015
- });
1016
- };
1017
1127
  var handleCloneTheme = function handleCloneTheme() {
1018
1128
  return onCloneTheme(theme);
1019
1129
  };
@@ -1023,55 +1133,73 @@ var Card = function Card(_ref) {
1023
1133
  var handleDeleteTheme = function handleDeleteTheme() {
1024
1134
  return onDeleteTheme(id, name, appliedCount);
1025
1135
  };
1026
- return /*#__PURE__*/jsxs("div", {
1136
+ return /*#__PURE__*/jsx("div", {
1027
1137
  className: "group space-y-2 pt-0.5",
1028
1138
  "data-cy": active ? "active-theme-card" : "theme-card",
1029
1139
  id: theme.id,
1030
- 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
+ }),
1031
1147
  onClick: function onClick() {
1032
1148
  return onSetPreviewTheme(theme);
1033
1149
  },
1034
- children: Thumbnail$1 ? /*#__PURE__*/jsx(Thumbnail$1, {
1035
- active: active,
1036
- isHighLightedTheme: isHighLightedTheme,
1037
- isPreviewing: isPreviewing,
1038
- theme: theme
1039
- }) : /*#__PURE__*/jsx(Thumbnail, {
1040
- active: active,
1041
- isHighLightedTheme: isHighLightedTheme,
1042
- isPreviewing: isPreviewing,
1043
- theme: theme
1044
- })
1045
- }), /*#__PURE__*/jsxs("div", {
1046
- className: "flex items-start justify-between gap-1",
1047
- children: [/*#__PURE__*/jsx(Typography, {
1048
- className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
1049
- "data-cy": "theme-name",
1050
- lineHeight: "snug",
1051
- style: "body2",
1052
- 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
+ })]
1053
1186
  }), /*#__PURE__*/jsxs("div", {
1054
- className: "flex items-center gap-2",
1055
- children: [active ? /*#__PURE__*/jsx(Tag, {
1056
- className: "flex-shrink-0",
1057
- "data-cy": "active-theme-label",
1058
- label: t("neetoThemes.common.active"),
1059
- style: "success"
1060
- }) : /*#__PURE__*/jsx(Button, {
1061
- className: "flex-shrink-0",
1062
- "data-cy": "apply-theme-button",
1063
- disabled: isApplyingTheme,
1064
- label: t("neetoThemes.common.apply"),
1065
- loading: isApplyingTheme,
1066
- size: "small",
1067
- style: "link",
1068
- 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
1069
1194
  }), /*#__PURE__*/jsx(MoreDropdown, {
1070
1195
  dropdownButtonProps: {
1071
1196
  size: "small"
1072
1197
  },
1073
1198
  dropdownProps: {
1074
- strategy: "fixed"
1199
+ strategy: "fixed",
1200
+ onClick: function onClick(e) {
1201
+ return e.stopPropagation();
1202
+ }
1075
1203
  },
1076
1204
  menuItems: [{
1077
1205
  key: "edit",
@@ -1095,7 +1223,7 @@ var Card = function Card(_ref) {
1095
1223
  }]
1096
1224
  })]
1097
1225
  })]
1098
- })]
1226
+ })
1099
1227
  });
1100
1228
  };
1101
1229
  var Card$1 = /*#__PURE__*/memo(Card);
@@ -1108,12 +1236,14 @@ var Themes = function Themes(_ref) {
1108
1236
  defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
1109
1237
  onDeleteTheme = _ref.onDeleteTheme,
1110
1238
  themeToHighlight = _ref.themeToHighlight,
1111
- highlightTheme = _ref.highlightTheme,
1112
1239
  didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
1113
1240
  isLoading = _ref.isLoading,
1114
1241
  currentTheme = _ref.currentTheme,
1115
1242
  isCurrentThemeLoading = _ref.isCurrentThemeLoading,
1116
- thumbnail = _ref.thumbnail;
1243
+ thumbnail = _ref.thumbnail,
1244
+ themeBeingApplied = _ref.themeBeingApplied,
1245
+ onApplyTheme = _ref.onApplyTheme,
1246
+ isApplyingTheme = _ref.isApplyingTheme;
1117
1247
  var _useTranslation = useTranslation(),
1118
1248
  t = _useTranslation.t;
1119
1249
  var _useThemeUtils = useThemeUtils(),
@@ -1130,24 +1260,8 @@ var Themes = function Themes(_ref) {
1130
1260
  _useState2 = _slicedToArray(_useState, 2),
1131
1261
  searchQuery = _useState2[0],
1132
1262
  setSearchQuery = _useState2[1];
1133
- var _useState3 = useState({}),
1134
- _useState4 = _slicedToArray(_useState3, 2),
1135
- themeBeingApplied = _useState4[0],
1136
- setThemeBeingApplied = _useState4[1];
1137
1263
  var _useCloneTheme = useCloneTheme(),
1138
1264
  cloneTheme = _useCloneTheme.mutate;
1139
- var _useApplyTheme = useApplyTheme({
1140
- onSuccess: function onSuccess(_ref2) {
1141
- var theme = _ref2.theme;
1142
- setTheme(theme);
1143
- setThemeState({
1144
- previewingTheme: theme
1145
- });
1146
- setThemeBeingApplied({});
1147
- }
1148
- }),
1149
- applyTheme = _useApplyTheme.mutate,
1150
- isApplyingTheme = _useApplyTheme.isLoading;
1151
1265
  useEffect(function () {
1152
1266
  if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
1153
1267
  didScrollActiveThemeIntoView.current = true;
@@ -1170,9 +1284,9 @@ var Themes = function Themes(_ref) {
1170
1284
  var isSearchFieldVisible = (themes === null || themes === void 0 ? void 0 : themes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
1171
1285
  var handleCloneTheme = function handleCloneTheme(data) {
1172
1286
  cloneTheme(data.id, {
1173
- onSuccess: function onSuccess(_ref3) {
1174
- var clonedTheme = _ref3.theme;
1175
- highlightTheme(clonedTheme);
1287
+ onSuccess: function onSuccess(_ref2) {
1288
+ var clonedTheme = _ref2.theme;
1289
+ onEditTheme(clonedTheme);
1176
1290
  }
1177
1291
  });
1178
1292
  };
@@ -1207,8 +1321,7 @@ var Themes = function Themes(_ref) {
1207
1321
  className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
1208
1322
  children: filteredDefaultThemes.map(function (theme) {
1209
1323
  return /*#__PURE__*/createElement(Card$1, {
1210
- applyTheme: applyTheme,
1211
- setThemeBeingApplied: setThemeBeingApplied,
1324
+ onApplyTheme: onApplyTheme,
1212
1325
  theme: theme,
1213
1326
  thumbnail: thumbnail,
1214
1327
  active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
@@ -1235,10 +1348,9 @@ var Themes = function Themes(_ref) {
1235
1348
  var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
1236
1349
  var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
1237
1350
  return /*#__PURE__*/createElement(Card$1, {
1238
- applyTheme: applyTheme,
1239
1351
  isPreviewing: isPreviewing,
1352
+ onApplyTheme: onApplyTheme,
1240
1353
  onEditTheme: onEditTheme,
1241
- setThemeBeingApplied: setThemeBeingApplied,
1242
1354
  theme: theme,
1243
1355
  thumbnail: thumbnail,
1244
1356
  active: isActive,
@@ -1331,6 +1443,10 @@ var Sidebar = function Sidebar(_ref) {
1331
1443
  _useState6 = _slicedToArray(_useState5, 2),
1332
1444
  themeToHighlight = _useState6[0],
1333
1445
  setThemeToHighlight = _useState6[1];
1446
+ var _useState7 = useState({}),
1447
+ _useState8 = _slicedToArray(_useState7, 2),
1448
+ themeBeingApplied = _useState8[0],
1449
+ setThemeBeingApplied = _useState8[1];
1334
1450
  var _useConfigStore = useConfigStore(function (store) {
1335
1451
  return {
1336
1452
  entityType: store["entityType"],
@@ -1369,12 +1485,34 @@ var Sidebar = function Sidebar(_ref) {
1369
1485
  var _useDeleteTheme = useDeleteTheme(),
1370
1486
  deleteTheme = _useDeleteTheme.mutate,
1371
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;
1372
1501
  var themeToDelete = useRef(null);
1373
1502
  var themeToEdit = useRef(null);
1374
1503
  var handleEditTheme = function handleEditTheme(theme) {
1375
1504
  themeToEdit.current = theme;
1376
1505
  setCurrentScreen(DESIGN_SCREENS.Customize);
1377
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
+ };
1378
1516
  var handleBackPress = function handleBackPress() {
1379
1517
  setTheme(currentTheme);
1380
1518
  setThemeState({
@@ -1393,13 +1531,11 @@ var Sidebar = function Sidebar(_ref) {
1393
1531
  setThemeToHighlight(themeToHighlight.id);
1394
1532
  };
1395
1533
  var onCreateTheme = function onCreateTheme(createdTheme) {
1396
- setCurrentScreen(DESIGN_SCREENS.THEMES);
1534
+ themeToEdit.current = createdTheme;
1397
1535
  setTheme(createdTheme);
1398
1536
  setThemeState({
1399
1537
  previewingTheme: createdTheme
1400
1538
  });
1401
- highlightTheme(createdTheme);
1402
- themeToEdit.current = null;
1403
1539
  };
1404
1540
  var handleDelete = function handleDelete(themeId, name, appliedCount) {
1405
1541
  setIsDeleteAlertOpen(true);
@@ -1448,7 +1584,10 @@ var Sidebar = function Sidebar(_ref) {
1448
1584
  defaultThemes: defaultThemes,
1449
1585
  didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
1450
1586
  highlightTheme: highlightTheme,
1587
+ isApplyingTheme: isApplyingTheme,
1451
1588
  isCurrentThemeLoading: isCurrentThemeLoading,
1589
+ onApplyTheme: onApplyTheme,
1590
+ themeBeingApplied: themeBeingApplied,
1452
1591
  themeToHighlight: themeToHighlight,
1453
1592
  themes: themes,
1454
1593
  thumbnail: thumbnail,
@@ -1456,6 +1595,8 @@ var Sidebar = function Sidebar(_ref) {
1456
1595
  onDeleteTheme: handleDelete,
1457
1596
  onEditTheme: handleEditTheme
1458
1597
  }) : /*#__PURE__*/jsx(Customize, {
1598
+ isApplyingTheme: isApplyingTheme,
1599
+ onApplyTheme: onApplyTheme,
1459
1600
  onCreateTheme: onCreateTheme,
1460
1601
  theme: themeToEdit.current,
1461
1602
  themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
@@ -1516,7 +1657,7 @@ var index = withTitle(NeetoThemesBuilder, t$1("neetoThemes.common.design"));
1516
1657
 
1517
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}}
1518
1659
 
1519
- 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 */";
1520
1661
  n(css,{});
1521
1662
 
1522
1663
  export { index as NeetoThemesBuilder, setTheme, useThemeUtils };