@flozy/editor 8.0.5 → 8.0.7

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.
Files changed (130) hide show
  1. package/dist/Editor/ChatEditor.js +1 -2
  2. package/dist/Editor/CommonEditor.js +33 -112
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +16 -32
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  6. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  7. package/dist/Editor/Elements/Color Picker/ColorButtons.js +12 -57
  8. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  10. package/dist/Editor/Elements/Color Picker/Styles.js +1 -1
  11. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +1 -4
  12. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +4 -3
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js +1 -6
  14. package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +9 -19
  15. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +2 -28
  16. package/dist/Editor/Elements/DataView/Layouts/TableView.js +29 -122
  17. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +1 -1
  18. package/dist/Editor/Elements/DataView/styles.js +8 -8
  19. package/dist/Editor/Elements/Embed/Image.js +2 -2
  20. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +14 -0
  21. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +1 -2
  22. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -2
  23. package/dist/Editor/Elements/FreeGrid/styles.js +0 -3
  24. package/dist/Editor/Elements/Grid/GridItem.js +3 -2
  25. package/dist/Editor/Elements/Link/Link.js +43 -70
  26. package/dist/Editor/Elements/SimpleText/index.js +12 -7
  27. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  28. package/dist/Editor/Elements/Table/Table.js +16 -17
  29. package/dist/Editor/Elements/Table/TableCell.js +3 -4
  30. package/dist/Editor/Elements/Title/title.js +1 -13
  31. package/dist/Editor/Elements/Variables/Style.js +2 -28
  32. package/dist/Editor/Elements/Variables/VariableButton.js +4 -17
  33. package/dist/Editor/Styles/EditorStyles.js +291 -287
  34. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  35. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  36. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  37. package/dist/Editor/Toolbar/FormatTools/TextSize.js +15 -7
  38. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +0 -1
  39. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +8 -9
  40. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  41. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +85 -210
  42. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  43. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -16
  44. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +9 -56
  45. package/dist/Editor/Toolbar/PopupTool/index.js +56 -34
  46. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  47. package/dist/Editor/common/ColorPickerButton.js +9 -35
  48. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  49. package/dist/Editor/common/DnD/Draggable.js +1 -0
  50. package/dist/Editor/common/FontLoader/FontList.js +11 -3
  51. package/dist/Editor/common/FontLoader/FontLoader.js +42 -74
  52. package/dist/Editor/common/Icon.js +0 -28
  53. package/dist/Editor/common/ImageSelector/Options/Upload.js +2 -2
  54. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  55. package/dist/Editor/common/ImageSelector/UploadStyles.js +10 -9
  56. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -0
  57. package/dist/Editor/common/LinkSettings/index.js +5 -0
  58. package/dist/Editor/common/MentionsPopup/Styles.js +12 -6
  59. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  60. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  61. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  62. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  63. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  64. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  65. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  66. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  67. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  68. package/dist/Editor/common/RnD/ElementSettings/styles.js +2 -0
  69. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -8
  70. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  71. package/dist/Editor/common/RnD/Utils/gridDropItem.js +4 -5
  72. package/dist/Editor/common/RnD/Utils/index.js +0 -45
  73. package/dist/Editor/common/RnD/index.js +3 -23
  74. package/dist/Editor/common/Section/index.js +89 -60
  75. package/dist/Editor/common/Shorthands/elements.js +0 -54
  76. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  77. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  78. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
  81. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +11 -35
  82. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  83. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  84. package/dist/Editor/common/Uploader.js +0 -8
  85. package/dist/Editor/commonStyle.js +69 -114
  86. package/dist/Editor/helper/deserialize/index.js +1 -1
  87. package/dist/Editor/helper/index.js +2 -2
  88. package/dist/Editor/helper/theme.js +2 -200
  89. package/dist/Editor/hooks/useDrag.js +11 -17
  90. package/dist/Editor/hooks/useEditorScroll.js +2 -1
  91. package/dist/Editor/hooks/useMouseMove.js +3 -9
  92. package/dist/Editor/plugins/withEmbeds.js +1 -1
  93. package/dist/Editor/plugins/withHTML.js +21 -20
  94. package/dist/Editor/plugins/withLayout.js +1 -1
  95. package/dist/Editor/plugins/withTable.js +1 -1
  96. package/dist/Editor/theme/ThemeList.js +173 -50
  97. package/dist/Editor/utils/SlateUtilityFunctions.js +49 -157
  98. package/dist/Editor/utils/button.js +14 -0
  99. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +0 -23
  100. package/dist/Editor/utils/draftToSlate.js +2 -3
  101. package/dist/Editor/utils/font.js +37 -40
  102. package/dist/Editor/utils/helper.js +19 -59
  103. package/dist/Editor/utils/link.js +1 -1
  104. package/package.json +3 -6
  105. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  106. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  107. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  108. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  109. package/dist/Editor/common/CustomDialog/index.js +0 -90
  110. package/dist/Editor/common/CustomDialog/style.js +0 -67
  111. package/dist/Editor/common/CustomDialog/styles.js +0 -80
  112. package/dist/Editor/common/CustomSelect.js +0 -33
  113. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  114. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  115. package/dist/Editor/theme/index.js +0 -144
  116. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  117. package/dist/Editor/themeSettings/buttons/index.js +0 -283
  118. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  119. package/dist/Editor/themeSettings/colorTheme/index.js +0 -292
  120. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  121. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  122. package/dist/Editor/themeSettings/fonts/index.js +0 -220
  123. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  124. package/dist/Editor/themeSettings/icons.js +0 -60
  125. package/dist/Editor/themeSettings/index.js +0 -320
  126. package/dist/Editor/themeSettings/style.js +0 -152
  127. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  128. package/dist/Editor/themeSettingsAI/index.js +0 -356
  129. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -197
  130. package/dist/Editor/themeSettingsAI/style.js +0 -250
@@ -1,80 +0,0 @@
1
- const CustomDialogStyles = theme => ({
2
- MuiBackdropRoot: {
3
- opacity: "1",
4
- transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
5
- },
6
- CustomDialogu: {
7
- "& .MuiPaper-root": {
8
- borderRadius: "12px 12px 0px 0px",
9
- backgroundColor: `${theme?.palette?.greyshades?.light9} !important`,
10
- "@media only screen and (min-width: 899px)": {
11
- maxWidth: "400px",
12
- border: `1px solid ${theme?.palette?.editor?.customDialogueBorder}`,
13
- borderRadius: "12px"
14
- }
15
- },
16
- "& .MuiDialogContent-root": {
17
- padding: "20px 24px 8px 24px",
18
- "& .MuiTypography-root": {
19
- textAlign: "center",
20
- fontFamily: "Inter, sans-serif",
21
- fontSize: "14px",
22
- fontWeight: 500,
23
- color: theme?.palette?.editor?.textColor
24
- }
25
- },
26
- "& .confirmBtn": {
27
- backgroundColor: "#2563EB",
28
- padding: "8px 12px",
29
- color: "#ffffff",
30
- fontWeight: 600,
31
- fontSize: "14px",
32
- opacity: 1,
33
- borderRadius: "8px",
34
- textTransform: "math-auto",
35
- height: "36px",
36
- padding: "0px 12px",
37
- minWidth: "90px",
38
- "&:hover": {
39
- backgroundColor: "#2563EB"
40
- },
41
- "@media only screen and (max-width: 899px)": {
42
- width: "50%"
43
- }
44
- },
45
- "& .MuiDialogActions-root": {
46
- justifyContent: "center",
47
- paddingBottom: "20px"
48
- },
49
- "& .closeBtn": {
50
- padding: "8px 12px",
51
- color: theme?.palette?.editor?.customDialogueCloseBtnColor,
52
- fontWeight: 600,
53
- fontSize: "14px",
54
- opacity: 1,
55
- borderRadius: "8px",
56
- textTransform: "math-auto",
57
- height: "36px",
58
- padding: "0px 12px",
59
- minWidth: "90px",
60
- backgroundColor: theme?.palette?.editor?.closeButtonBackground,
61
- border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
62
- "&:hover": {
63
- backgroundColor: theme?.palette?.editor?.closeButtonBackground
64
- },
65
- "@media only screen and (max-width: 899px)": {
66
- width: "50%"
67
- }
68
- },
69
- "& .pullerRoot": {
70
- padding: "8px 0"
71
- },
72
- "& .pullerGrid": {
73
- width: "40px",
74
- height: "5px",
75
- backgroundColor: "#ccc",
76
- borderRadius: "10px"
77
- }
78
- }
79
- });
80
- export default CustomDialogStyles;
@@ -1,33 +0,0 @@
1
- import { MenuItem, Select } from "@mui/material";
2
- import { fontFamilyMap } from "../utils/font";
3
- import { jsx as _jsx } from "react/jsx-runtime";
4
- function CustomSelect(props) {
5
- const {
6
- onChange,
7
- options = [],
8
- value
9
- } = props;
10
- return /*#__PURE__*/_jsx(Select, {
11
- fullWidth: true,
12
- value: value,
13
- onChange: onChange,
14
- className: "editor-dd",
15
- style: {
16
- fontFamily: fontFamilyMap[value],
17
- width: "100%",
18
- height: "36px",
19
- borderRadius: "10px",
20
- fontSize: "14px"
21
- },
22
- children: options.map((option, i) => {
23
- return /*#__PURE__*/_jsx(MenuItem, {
24
- value: option.value,
25
- style: {
26
- fontFamily: option.text
27
- },
28
- children: option?.label || option?.text
29
- }, i);
30
- })
31
- });
32
- }
33
- export default CustomSelect;
@@ -1,17 +0,0 @@
1
- import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- function MainThemeProvider({
4
- children,
5
- userSelectedTheme,
6
- theme = {}
7
- }) {
8
- const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
9
- return /*#__PURE__*/_jsx(CssVarsProvider, {
10
- theme: {
11
- ...themeVars,
12
- ...theme
13
- },
14
- children: children
15
- });
16
- }
17
- export default MainThemeProvider;
@@ -1,153 +0,0 @@
1
- import { useSlate } from "slate-react";
2
- import { defaultTheme } from "../theme";
3
- import { getPageSettings, updatePageSettings } from "../utils/pageSettings";
4
- import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../helper/theme";
5
- import { useEditorContext } from "./useMouseMove";
6
- const MAP_FIELDS = {
7
- HEADING: HEADING_THEME_FIELDS,
8
- PARAGRAPH: PARAGRAPH_THEME_FIELDS
9
- };
10
- const MAP_FONT_FIELD_KEYS = {
11
- HEADING: "headingFontFamily",
12
- PARAGRAPH: "paragraphFontFamily"
13
- };
14
- function getUpdatePayload(prevTheme = {}, update, actionData) {
15
- const {
16
- action,
17
- fieldName
18
- } = actionData || {};
19
- const {
20
- theme: prev
21
- } = prevTheme;
22
- let theme = {};
23
- let themeProps = {};
24
- switch (action) {
25
- case "THEME_CHANGE":
26
- theme = update;
27
- break;
28
- case "CSS_VAR_CHANGE":
29
- const prevCssVars = prev?.cssVars || {};
30
- const prevValue = prevCssVars[fieldName] || {};
31
- themeProps = {
32
- ...(prev || {}),
33
- cssVars: {
34
- ...prevCssVars,
35
- [fieldName]: {
36
- ...prevValue,
37
- ...update
38
- }
39
- }
40
- };
41
- theme = {
42
- ...prevTheme,
43
- theme: themeProps
44
- };
45
- break;
46
- case "ELEMENT_PROPS_CHANGE":
47
- const prevEleProps = prev?.elementProps || {};
48
- const prevEleValue = prevEleProps[fieldName] || {};
49
- themeProps = {
50
- ...(prev || {}),
51
- elementProps: {
52
- ...prevEleProps,
53
- [fieldName]: {
54
- ...prevEleValue,
55
- ...update
56
- }
57
- }
58
- };
59
- theme = {
60
- ...prevTheme,
61
- theme: themeProps
62
- };
63
- break;
64
- case "OTHER_PROPS_CHANGE":
65
- themeProps = {
66
- ...(prev || {}),
67
- otherProps: {
68
- ...(prev.otherProps || {}),
69
- ...update
70
- }
71
- };
72
- theme = {
73
- ...prevTheme,
74
- theme: themeProps
75
- };
76
- break;
77
- case "FONT_CHANGE":
78
- const {
79
- elementProps = {},
80
- otherProps = {}
81
- } = prev;
82
- const {
83
- fieldType
84
- } = actionData || {};
85
- const fields = MAP_FIELDS[fieldType];
86
- const fontFieldsUpdate = {};
87
- fields?.forEach(field => {
88
- const prevFieldData = elementProps[field];
89
- fontFieldsUpdate[field] = {
90
- ...prevFieldData,
91
- ...update
92
- };
93
- });
94
- const FONT_KEY_FOR_FIELD = MAP_FONT_FIELD_KEYS[fieldType];
95
- themeProps = {
96
- ...(prev || {}),
97
- elementProps: {
98
- ...elementProps,
99
- ...fontFieldsUpdate
100
- },
101
- otherProps: {
102
- ...otherProps,
103
- [FONT_KEY_FOR_FIELD]: update?.fontFamily
104
- }
105
- };
106
- theme = {
107
- ...prevTheme,
108
- theme: themeProps
109
- };
110
- break;
111
- default:
112
- theme = {
113
- ...prevTheme,
114
- ...(update || {})
115
- };
116
- break;
117
- }
118
- return theme;
119
- }
120
- const updateTheme = (editor, pageSt, update, actionData, triggerRender) => {
121
- const {
122
- pageProps
123
- } = pageSt || {};
124
- const {
125
- theme
126
- } = pageProps || {};
127
- const updatedTheme = getUpdatePayload(theme, update, actionData);
128
- updatePageSettings(editor, {
129
- ...(pageProps || {}),
130
- theme: updatedTheme
131
- });
132
- triggerRender();
133
- };
134
- export const useEditorTheme = () => {
135
- const editor = useSlate();
136
- const {
137
- triggerRender
138
- } = useEditorContext();
139
- const {
140
- element: pageSt
141
- } = getPageSettings(editor) || {};
142
- const {
143
- pageProps
144
- } = pageSt || {};
145
- const {
146
- theme
147
- } = pageProps || {};
148
- return {
149
- selectedTheme: theme?.theme || defaultTheme?.theme,
150
- updateTheme: (update, actionData) => updateTheme(editor, pageSt, update, actionData, triggerRender),
151
- theme
152
- };
153
- };
@@ -1,144 +0,0 @@
1
- const themeClassName = ".theme-element";
2
- function getTextStyles(props) {
3
- const {
4
- fontSize,
5
- textDecoration,
6
- ...rest
7
- } = props;
8
- return {
9
- ...rest,
10
- '& span[data-slate-string="true"]': {
11
- textDecoration,
12
- fontSize
13
- }
14
-
15
- // "&::after": {
16
- // // for placeholder
17
- // fontSize,
18
- // },
19
- };
20
- }
21
-
22
- const transformHeading = (props, elementType) => {
23
- return {
24
- [`& ${elementType}${themeClassName}`]: getTextStyles(props)
25
- };
26
- };
27
- const transformParagraph = (props, paraType) => {
28
- return {
29
- [`& p${themeClassName}.${paraType}`]: getTextStyles(props)
30
- };
31
- };
32
- const transformButton = props => {
33
- const {
34
- borderRadius,
35
- lockRadius,
36
- bannerSpacing,
37
- buttonIcon,
38
- hover,
39
- ...classProps
40
- } = props;
41
- return {
42
- [`& .button${themeClassName}`]: {
43
- ...classProps,
44
- "&:hover": hover
45
- },
46
- buttonTheme: {
47
- borderRadius,
48
- lockRadius,
49
- bannerSpacing,
50
- buttonIcon
51
- }
52
- };
53
- };
54
- const transformProps = (elementType, props) => {
55
- let transformedProp = {};
56
- let otherProps = {};
57
- switch (elementType) {
58
- case "h1":
59
- case "h2":
60
- case "h3":
61
- case "h4":
62
- case "h5":
63
- case "h6":
64
- transformedProp = transformHeading(props, elementType);
65
- break;
66
- case "para1":
67
- case "para2":
68
- case "para3":
69
- transformedProp = transformParagraph(props, elementType);
70
- break;
71
- case "button":
72
- const {
73
- buttonTheme,
74
- ...classProps
75
- } = transformButton(props, elementType);
76
- transformedProp = classProps;
77
- otherProps = {
78
- buttonTheme
79
- };
80
- break;
81
- default:
82
- }
83
- return {
84
- transformedProp,
85
- otherProps
86
- };
87
- };
88
- export const transformTheme = (selectedTheme = {}) => {
89
- let sxProps = {};
90
- let others = {};
91
- const {
92
- elementProps
93
- } = selectedTheme;
94
- if (elementProps) {
95
- Object.entries(elementProps).forEach(([key, value]) => {
96
- const {
97
- transformedProp,
98
- otherProps
99
- } = transformProps(key, value);
100
- sxProps = {
101
- ...sxProps,
102
- ...transformedProp
103
- };
104
- others = {
105
- ...others,
106
- ...otherProps
107
- };
108
- });
109
- }
110
- return {
111
- sxProps,
112
- ...others
113
- };
114
- };
115
- export const defaultTheme = {
116
- theme: {
117
- cssVars: {},
118
- elementProps: {
119
- button: {
120
- color: "#FFFFFF",
121
- background: "#2563EB",
122
- fontFamily: "PoppinsRegular",
123
- fontWeight: 400,
124
- fontSize: "inherit",
125
- borderColor: "transparent",
126
- borderRadius: {
127
- topLeft: 30,
128
- topRight: 30,
129
- bottomLeft: 30,
130
- bottomRight: 30
131
- },
132
- bannerSpacing: {
133
- left: 16,
134
- top: 8,
135
- right: 16,
136
- bottom: 8
137
- }
138
- }
139
- }
140
- }
141
- };
142
- export function getTheme(selectedTheme) {
143
- return transformTheme(selectedTheme?.theme || defaultTheme.theme);
144
- }
@@ -1,72 +0,0 @@
1
- import { Grid, Link, Typography } from "@mui/material";
2
- import { useEditorTheme } from "../hooks/useEditorTheme";
3
- import { jsx as _jsx } from "react/jsx-runtime";
4
- import { jsxs as _jsxs } from "react/jsx-runtime";
5
- import { Fragment as _Fragment } from "react/jsx-runtime";
6
- function ActiveTheme(props) {
7
- const {
8
- onExplore
9
- } = props;
10
- const {
11
- theme
12
- } = useEditorTheme();
13
- const {
14
- colors = {}
15
- } = theme?.theme?.cssVars || {};
16
- const {
17
- id,
18
- name,
19
- mood_name = ""
20
- } = theme || {};
21
- const themeColors = Object.values(colors || {});
22
- return /*#__PURE__*/_jsxs(Grid, {
23
- className: "activeThemeInnner",
24
- children: [/*#__PURE__*/_jsx(Typography, {
25
- variant: "body1",
26
- className: "title",
27
- children: id ? "Active Theme" : "No theme activated"
28
- }), /*#__PURE__*/_jsxs(Grid, {
29
- className: "flexAlign",
30
- children: [/*#__PURE__*/_jsx(Typography, {
31
- variant: "body1",
32
- className: "fs-14",
33
- children: name
34
- }), /*#__PURE__*/_jsxs(Typography, {
35
- variant: "body2",
36
- color: "textSecondary",
37
- className: "fs-12",
38
- style: {
39
- marginLeft: "4px"
40
- },
41
- children: [id ? ` - ` : null, id ? mood_name : "Select 'Explore More' to activate a theme and customize your design."]
42
- })]
43
- }), /*#__PURE__*/_jsxs(Grid, {
44
- container: true,
45
- justifyContent: "space-between",
46
- sx: {
47
- mt: 1
48
- },
49
- children: [/*#__PURE__*/_jsx(Grid, {
50
- className: "flexAlign",
51
- sx: {
52
- gap: "10px"
53
- },
54
- children: id ? /*#__PURE__*/_jsx(_Fragment, {
55
- children: themeColors?.map((color, i) => {
56
- return /*#__PURE__*/_jsx(Grid, {
57
- className: "activeColorBox",
58
- style: {
59
- background: color
60
- }
61
- }, i);
62
- })
63
- }) : null
64
- }), onExplore && /*#__PURE__*/_jsx(Link, {
65
- className: "pointer fs-12 fw-500",
66
- onClick: onExplore,
67
- children: "Explore More"
68
- })]
69
- })]
70
- });
71
- }
72
- export default ActiveTheme;