@flozy/editor 3.6.6 → 3.6.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. package/dist/Editor/CommonEditor.js +166 -109
  2. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  3. package/dist/Editor/Elements/Button/EditorButton.js +25 -14
  4. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  5. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  6. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  7. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  8. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +1 -0
  9. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  10. package/dist/Editor/Elements/Grid/Grid.js +2 -0
  11. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  12. package/dist/Editor/Elements/Link/Link.js +6 -1
  13. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  14. package/dist/Editor/Elements/Link/LinkPopup.js +11 -3
  15. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  16. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  17. package/dist/Editor/MiniEditor.js +3 -1
  18. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  19. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  20. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  21. package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -11
  22. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  23. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  24. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  25. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +20 -13
  26. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  27. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  28. package/dist/Editor/Toolbar/PopupTool/index.js +4 -2
  29. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  30. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  31. package/dist/Editor/common/ColorPickerButton.js +25 -9
  32. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  33. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  34. package/dist/Editor/common/CustomDialog/index.js +94 -0
  35. package/dist/Editor/common/CustomDialog/style.js +67 -0
  36. package/dist/Editor/common/CustomSelect.js +33 -0
  37. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  38. package/dist/Editor/common/Icon.js +30 -2
  39. package/dist/Editor/common/Shorthands/elements.js +54 -0
  40. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  44. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  45. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  46. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  47. package/dist/Editor/helper/theme.js +190 -4
  48. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  49. package/dist/Editor/hooks/useMouseMove.js +4 -1
  50. package/dist/Editor/plugins/withEmbeds.js +1 -1
  51. package/dist/Editor/plugins/withHTML.js +47 -5
  52. package/dist/Editor/plugins/withTable.js +1 -1
  53. package/dist/Editor/theme/ThemeList.js +50 -173
  54. package/dist/Editor/theme/index.js +144 -0
  55. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  56. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  57. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  58. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  59. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  60. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  61. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  62. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  63. package/dist/Editor/themeSettings/icons.js +60 -0
  64. package/dist/Editor/themeSettings/index.js +320 -0
  65. package/dist/Editor/themeSettings/style.js +152 -0
  66. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  67. package/dist/Editor/themeSettingsAI/index.js +356 -0
  68. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  69. package/dist/Editor/themeSettingsAI/style.js +247 -0
  70. package/dist/Editor/utils/SlateUtilityFunctions.js +157 -25
  71. package/dist/Editor/utils/button.js +1 -17
  72. package/dist/Editor/utils/font.js +40 -37
  73. package/dist/Editor/utils/helper.js +50 -12
  74. package/package.json +1 -1
@@ -0,0 +1,290 @@
1
+ import React, { useRef, useState } from "react";
2
+ import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled } from "@mui/material";
3
+ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
4
+
5
+ // Style
6
+ import Style from "./style";
7
+ import { PenIcon } from "../icons";
8
+ import StyleBuilder from "../../common/StyleBuilder";
9
+ import { fontFamilyMap, fontOptions } from "../../utils/font";
10
+ import { useEditorTheme } from "../../hooks/useEditorTheme";
11
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ const buttonStyle = [{
15
+ tab: "General",
16
+ value: "size",
17
+ fields: [{
18
+ label: "Font Family",
19
+ key: "fontFamily",
20
+ type: "textOptions",
21
+ options: fontOptions,
22
+ width: 7,
23
+ renderOption: option => {
24
+ return /*#__PURE__*/_jsx("span", {
25
+ style: {
26
+ fontFamily: option.value
27
+ },
28
+ children: option.text
29
+ });
30
+ }
31
+ }, {
32
+ label: "Font Size",
33
+ key: "textSize",
34
+ type: "fontSize",
35
+ width: 5,
36
+ placeholder: "16px or 1em"
37
+ }]
38
+ }, {
39
+ tab: "Colors",
40
+ value: "colors",
41
+ fields: [{
42
+ label: "Text Color",
43
+ key: "textColor",
44
+ type: "color",
45
+ needPreview: true
46
+ }, {
47
+ label: "Button Color",
48
+ key: "bgColor",
49
+ type: "color",
50
+ themeEnabled: true
51
+ }]
52
+ }, {
53
+ tab: "Banner Spacing",
54
+ value: "bannerSpacing",
55
+ fields: [{
56
+ label: "Banner Spacing",
57
+ key: "bannerSpacing",
58
+ type: "bannerSpacing"
59
+ }]
60
+ }, {
61
+ tab: "Border",
62
+ value: "border",
63
+ fields: [{
64
+ label: "Border Radius",
65
+ key: "borderRadius",
66
+ type: "borderRadius"
67
+ }]
68
+ }, {
69
+ tab: "Hover Colors",
70
+ value: "hoverColors",
71
+ fields: [{
72
+ label: "Hover Text Color",
73
+ key: "textColorHover",
74
+ type: "color",
75
+ needPreview: true
76
+ }, {
77
+ label: "Hover Button Color",
78
+ key: "bgColorHover",
79
+ type: "color"
80
+ }]
81
+ }];
82
+ function getBtnSxProps(buttonStyle = {}) {
83
+ const newStyle = {
84
+ ...buttonStyle
85
+ };
86
+ if (newStyle?.bannerSpacing) {
87
+ newStyle.padding = newStyle?.bannerSpacing;
88
+ }
89
+ newStyle.borderRadius = {
90
+ ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
91
+ };
92
+ newStyle.padding = {
93
+ ...getTRBLBreakPoints(newStyle?.bannerSpacing || {})
94
+ };
95
+ delete newStyle?.bannerSpacing;
96
+ if (newStyle?.hover) {
97
+ newStyle["&:hover"] = newStyle.hover;
98
+ delete newStyle.hover;
99
+ }
100
+ return newStyle;
101
+ }
102
+ const MAP_HOVER_KEYS = {
103
+ color: "textColorHover",
104
+ background: "bgColorHover"
105
+ };
106
+ const MAP_THEME_TO_ELEMENT_KEYS = {
107
+ color: "textColor",
108
+ background: "bgColor",
109
+ fontFamily: (value, prev, buttonEl) => {
110
+ if (!buttonEl?.current) {
111
+ return prev;
112
+ }
113
+ const computedStyle = window.getComputedStyle(buttonEl?.current);
114
+ const val = computedStyle.getPropertyValue("font-family") || "";
115
+ const fontFamily = fontOptions?.find(o => o.text === val)?.value;
116
+ return {
117
+ ...prev,
118
+ fontFamily
119
+ };
120
+ },
121
+ fontSize: "textSize",
122
+ borderRadius: "borderRadius",
123
+ bannerSpacing: "bannerSpacing",
124
+ lockRadius: "lockRadius",
125
+ lockbannerSpacing: "lockbannerSpacing",
126
+ // fontWeight
127
+
128
+ hover: (value = {}, prev = {}) => {
129
+ const props = getProps(value, MAP_HOVER_KEYS);
130
+ return {
131
+ ...prev,
132
+ ...props
133
+ };
134
+ }
135
+ };
136
+ const MAP_ELEMENT_TO_THEME_KEYS = {
137
+ textSize: "fontSize",
138
+ textColor: "color",
139
+ bgColor: "background",
140
+ bannerSpacing: "bannerSpacing",
141
+ borderRadius: "borderRadius",
142
+ lockRadius: "lockRadius",
143
+ lockbannerSpacing: "lockbannerSpacing",
144
+ textColorHover: (value, prev) => {
145
+ const hover = {
146
+ ...(prev?.hover || {})
147
+ };
148
+ hover.color = value;
149
+ return {
150
+ ...prev,
151
+ hover
152
+ };
153
+ },
154
+ bgColorHover: (value, prev) => {
155
+ const hover = {
156
+ ...(prev?.hover || {})
157
+ };
158
+ hover.background = value;
159
+ return {
160
+ ...prev,
161
+ hover
162
+ };
163
+ },
164
+ fontFamily: (value, prev) => {
165
+ const fontFamily = fontFamilyMap[value] || "";
166
+ return {
167
+ ...prev,
168
+ fontFamily
169
+ };
170
+ }
171
+ };
172
+ function getProps(buttonStyle, MAP_KEYS, buttonEl) {
173
+ let props = {};
174
+ Object.entries(buttonStyle).forEach(([key, value]) => {
175
+ const elementKey = MAP_KEYS[key];
176
+ if (elementKey) {
177
+ if (typeof elementKey === "string") {
178
+ props[elementKey] = value;
179
+ } else {
180
+ props = elementKey(value, props, buttonEl);
181
+ }
182
+ }
183
+ });
184
+ return props;
185
+ }
186
+ function convertThemeToElementProps(button = {}, buttonEl) {
187
+ const props = getProps(button, MAP_THEME_TO_ELEMENT_KEYS, buttonEl);
188
+ return props;
189
+ }
190
+
191
+ // icons
192
+
193
+ const Buttons = props => {
194
+ const {
195
+ className
196
+ } = props;
197
+ const [anchorEl, setAnchorEl] = useState();
198
+ const {
199
+ selectedTheme,
200
+ updateTheme
201
+ } = useEditorTheme();
202
+ const {
203
+ button
204
+ } = selectedTheme?.elementProps || {};
205
+ const buttonEl = useRef();
206
+ const elementProps = convertThemeToElementProps(button, buttonEl);
207
+
208
+ // State
209
+ return /*#__PURE__*/_jsxs(Grid, {
210
+ className: className,
211
+ children: [/*#__PURE__*/_jsxs(Accordion, {
212
+ className: "settingAccordion",
213
+ children: [/*#__PURE__*/_jsx(AccordionSummary, {
214
+ expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
215
+ "aria-controls": "panel1-content",
216
+ id: "panel1-header",
217
+ children: "Buttons"
218
+ }), /*#__PURE__*/_jsx(AccordionDetails, {
219
+ children: /*#__PURE__*/_jsxs(Grid, {
220
+ container: true,
221
+ className: "buttonTypeItem",
222
+ justifyContent: "space-between",
223
+ alignItems: "center",
224
+ wrap: "nowrap",
225
+ onClick: e => setAnchorEl(e.currentTarget),
226
+ children: [/*#__PURE__*/_jsxs(Grid, {
227
+ item: true,
228
+ style: {
229
+ maxWidth: "calc(100% - 50px)",
230
+ overflowX: "auto"
231
+ },
232
+ children: [/*#__PURE__*/_jsx(Typography, {
233
+ variant: "body1",
234
+ className: "fw-600 fs-14",
235
+ style: {
236
+ marginBottom: "10px"
237
+ },
238
+ children: "Primary Button"
239
+ }), /*#__PURE__*/_jsx(Button, {
240
+ sx: getBtnSxProps(button),
241
+ ref: buttonEl,
242
+ children: "Button"
243
+ })]
244
+ }), /*#__PURE__*/_jsx(IconButton, {
245
+ className: "editIcon",
246
+ children: /*#__PURE__*/_jsx(PenIcon, {})
247
+ })]
248
+ })
249
+ })]
250
+ }), /*#__PURE__*/_jsx(Popper, {
251
+ open: Boolean(anchorEl),
252
+ anchorEl: anchorEl,
253
+ transition: true,
254
+ sx: {
255
+ zIndex: "100000",
256
+ background: "white"
257
+ },
258
+ placement: "left-start",
259
+ children: ({
260
+ TransitionProps
261
+ }) => /*#__PURE__*/_jsx(Fade, {
262
+ ...TransitionProps,
263
+ timeout: 350,
264
+ children: /*#__PURE__*/_jsx("div", {
265
+ children: /*#__PURE__*/_jsx(StyleBuilder, {
266
+ title: "Button",
267
+ type: "buttonStyle",
268
+ element: elementProps,
269
+ onSave: data => {
270
+ const props = getProps(data, MAP_ELEMENT_TO_THEME_KEYS);
271
+ updateTheme(props, {
272
+ action: "ELEMENT_PROPS_CHANGE",
273
+ fieldName: "button"
274
+ });
275
+ setAnchorEl(null);
276
+ },
277
+ onClose: () => {
278
+ setAnchorEl(null);
279
+ },
280
+ renderTabs: buttonStyle,
281
+ customProps: {
282
+ disableEditTheme: true
283
+ }
284
+ })
285
+ })
286
+ })
287
+ })]
288
+ });
289
+ };
290
+ export default styled(Buttons)(Style);
@@ -0,0 +1,21 @@
1
+ const Style = () => ({
2
+ ".buttonTypeItem": {
3
+ padding: "8px 10px",
4
+ width: "calc(100% + 20px)",
5
+ margin: "0 -10px",
6
+ "&:hover": {
7
+ background: "#ECF2FF",
8
+ ".editIcon": {
9
+ opacity: "1",
10
+ visibility: "visible"
11
+ }
12
+ },
13
+ ".editIcon": {
14
+ opacity: "0",
15
+ visibility: "hidden",
16
+ width: "30px",
17
+ height: "30px"
18
+ }
19
+ }
20
+ });
21
+ export default Style;
@@ -0,0 +1,290 @@
1
+ import React from "react";
2
+ import { Accordion, AccordionDetails, AccordionSummary, Divider, FormControlLabel, Grid, IconButton, Radio, RadioGroup, ToggleButton, ToggleButtonGroup, Typography, styled } from "@mui/material";
3
+ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
4
+
5
+ // Style
6
+ import Style from "./style";
7
+
8
+ // icons
9
+ import { ChevronLeft } from "@mui/icons-material";
10
+ import { EditIcon } from "../icons";
11
+ import ColorPickerButton from "../../common/ColorPickerButton";
12
+ import { getContrastColor } from "../../utils/helper";
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ const ColorTheme = props => {
16
+ const {
17
+ className,
18
+ colors,
19
+ onColorChange,
20
+ openDefault
21
+ } = props;
22
+ const {
23
+ primaryColors,
24
+ otherColors = []
25
+ } = colors || {};
26
+
27
+ // State
28
+ const [customizeTheme, setCustomizeTheme] = React.useState(false);
29
+ const [buttonType, setButtonType] = React.useState("regular");
30
+ const customTheme = [{
31
+ title: "Text & Line Colors",
32
+ data: [{
33
+ title: "Headings",
34
+ color: "#ccc"
35
+ }, {
36
+ title: "Subheading text",
37
+ color: "#ccc"
38
+ }, {
39
+ title: "Body text",
40
+ color: "#ccc"
41
+ }, {
42
+ title: "Subtext",
43
+ color: "#ccc"
44
+ }, {
45
+ title: "Lines & dividers",
46
+ color: "#ccc"
47
+ }]
48
+ }, {
49
+ title: "Background Colors",
50
+ data: [{
51
+ title: "Primary background color",
52
+ color: "#ccc"
53
+ }, {
54
+ title: "Secondary background color",
55
+ color: "#ccc"
56
+ }]
57
+ }];
58
+ const buttonData = [{
59
+ title: "Button background",
60
+ color: "#ccc"
61
+ }, {
62
+ title: "Button text",
63
+ color: "#ccc"
64
+ }, {
65
+ title: "Button border",
66
+ color: "#ccc"
67
+ }];
68
+
69
+ //button
70
+ const handleButtonType = (event, buttonType) => {
71
+ if (buttonType !== null) {
72
+ setButtonType(buttonType);
73
+ }
74
+ };
75
+ return /*#__PURE__*/_jsx(Grid, {
76
+ className: className,
77
+ children: !customizeTheme ? /*#__PURE__*/_jsxs(Accordion, {
78
+ className: "settingAccordion",
79
+ defaultExpanded: openDefault,
80
+ children: [/*#__PURE__*/_jsx(AccordionSummary, {
81
+ expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
82
+ "aria-controls": "panel1-content",
83
+ id: "panel1-header",
84
+ children: "Color Theme"
85
+ }), /*#__PURE__*/_jsxs(AccordionDetails, {
86
+ children: [/*#__PURE__*/_jsx(Typography, {
87
+ variant: "body2",
88
+ sx: {
89
+ pb: 1
90
+ },
91
+ className: "fs-12 fw-600",
92
+ children: "Primary Color"
93
+ }), /*#__PURE__*/_jsx(Grid, {
94
+ container: true,
95
+ spacing: 1,
96
+ sx: {
97
+ pb: 2
98
+ },
99
+ className: "primaryColorBoxes",
100
+ wrap: "nowrap",
101
+ children: primaryColors?.map((color, i) => {
102
+ const textColor = getContrastColor(color);
103
+ return /*#__PURE__*/_jsx(Grid, {
104
+ item: true,
105
+ xs: 6,
106
+ children: /*#__PURE__*/_jsx(ColorPickerButton, {
107
+ onSave: selectedColor => {
108
+ onColorChange(selectedColor, i);
109
+ },
110
+ hideThemeColors: true,
111
+ children: /*#__PURE__*/_jsxs(Grid, {
112
+ className: "pmBox",
113
+ style: {
114
+ backgroundColor: color
115
+ },
116
+ children: [/*#__PURE__*/_jsx(IconButton, {
117
+ className: "editBtn",
118
+ children: /*#__PURE__*/_jsx(EditIcon, {})
119
+ }), /*#__PURE__*/_jsx(Typography, {
120
+ variant: "body2",
121
+ className: "fs-12 valyeText",
122
+ style: {
123
+ color: textColor
124
+ },
125
+ children: color
126
+ })]
127
+ })
128
+ })
129
+ }, i);
130
+ })
131
+ }), /*#__PURE__*/_jsx(Typography, {
132
+ variant: "body2",
133
+ sx: {
134
+ pb: 1
135
+ },
136
+ className: "fs-12 fw-600",
137
+ children: "Secondary Colors"
138
+ }), /*#__PURE__*/_jsx(Grid, {
139
+ container: true,
140
+ className: "secondaryColorBoxes",
141
+ wrap: "nowrap",
142
+ sx: {
143
+ mb: 1
144
+ },
145
+ children: otherColors?.slice(0, 4)?.map((color, i) => {
146
+ const noOfPrimaryColors = 2;
147
+ const colorIndex = noOfPrimaryColors + i;
148
+ const textColor = getContrastColor(color);
149
+ return /*#__PURE__*/_jsx(Grid, {
150
+ item: true,
151
+ xs: 6,
152
+ children: /*#__PURE__*/_jsx(ColorPickerButton, {
153
+ onSave: selectedColor => {
154
+ onColorChange(selectedColor, colorIndex);
155
+ },
156
+ hideThemeColors: true,
157
+ children: /*#__PURE__*/_jsxs(Grid, {
158
+ className: "sdBox",
159
+ style: {
160
+ backgroundColor: color
161
+ },
162
+ children: [/*#__PURE__*/_jsx(IconButton, {
163
+ className: "editBtn",
164
+ children: /*#__PURE__*/_jsx(EditIcon, {})
165
+ }), /*#__PURE__*/_jsx(Typography, {
166
+ variant: "body2",
167
+ className: "fs-12 valyeText",
168
+ style: {
169
+ color: textColor
170
+ },
171
+ children: color
172
+ })]
173
+ })
174
+ })
175
+ }, i);
176
+ })
177
+ })]
178
+ })]
179
+ }) : /*#__PURE__*/_jsxs(Grid, {
180
+ className: "sectionDetail",
181
+ children: [/*#__PURE__*/_jsxs(Typography, {
182
+ variant: "body1",
183
+ className: "sectionTitle flexAlign",
184
+ children: [/*#__PURE__*/_jsx(IconButton, {
185
+ onClick: () => setCustomizeTheme(false),
186
+ children: /*#__PURE__*/_jsx(ChevronLeft, {})
187
+ }), "Customize Theme settings"]
188
+ }), customTheme.map((item, index) => /*#__PURE__*/_jsxs(Grid, {
189
+ className: "settingsSection",
190
+ children: [/*#__PURE__*/_jsx(Typography, {
191
+ variant: "body1",
192
+ className: "sectionTitle",
193
+ sx: {
194
+ pb: 1
195
+ },
196
+ children: item.title
197
+ }), item.data.map((childitem, childIndex) => /*#__PURE__*/_jsxs(Grid, {
198
+ container: true,
199
+ justifyContent: "space-between",
200
+ sx: {
201
+ pt: 2
202
+ },
203
+ children: [/*#__PURE__*/_jsx(Typography, {
204
+ variant: "body1",
205
+ className: "fs-14",
206
+ children: childitem.title
207
+ }), /*#__PURE__*/_jsx(Grid, {
208
+ className: "xsColorBox",
209
+ sx: {
210
+ background: childitem.color
211
+ }
212
+ })]
213
+ }, childIndex))]
214
+ }, index)), /*#__PURE__*/_jsxs(Grid, {
215
+ className: "settingsSection",
216
+ children: [/*#__PURE__*/_jsx(Typography, {
217
+ variant: "body1",
218
+ className: "sectionTitle",
219
+ sx: {
220
+ pb: 1
221
+ },
222
+ children: "Button Colors"
223
+ }), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
224
+ sx: {
225
+ mt: 2
226
+ },
227
+ className: "toggleType",
228
+ value: buttonType,
229
+ exclusive: true,
230
+ onChange: handleButtonType,
231
+ children: [/*#__PURE__*/_jsx(ToggleButton, {
232
+ value: "regular",
233
+ "aria-label": "regulard",
234
+ children: "Regular"
235
+ }), /*#__PURE__*/_jsx(ToggleButton, {
236
+ value: "hover",
237
+ "aria-label": "hover",
238
+ children: "Hover"
239
+ })]
240
+ }), /*#__PURE__*/_jsx(Divider, {
241
+ sx: {
242
+ mt: 2,
243
+ mb: 1
244
+ }
245
+ }), /*#__PURE__*/_jsxs(RadioGroup, {
246
+ sx: {
247
+ mt: 1
248
+ },
249
+ "aria-labelledby": "demo-radio-buttons-group-label",
250
+ defaultValue: "primary",
251
+ name: "radio-buttons-group",
252
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
253
+ value: "primary",
254
+ control: /*#__PURE__*/_jsx(Radio, {}),
255
+ label: /*#__PURE__*/_jsx(Typography, {
256
+ variant: "body1",
257
+ className: "fs-14",
258
+ children: "Primary button"
259
+ })
260
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
261
+ value: "secondary",
262
+ control: /*#__PURE__*/_jsx(Radio, {}),
263
+ label: /*#__PURE__*/_jsx(Typography, {
264
+ variant: "body1",
265
+ className: "fs-14",
266
+ children: "Secondary button"
267
+ })
268
+ })]
269
+ }), buttonData.map((item, Index) => /*#__PURE__*/_jsxs(Grid, {
270
+ container: true,
271
+ justifyContent: "space-between",
272
+ sx: {
273
+ pt: 2
274
+ },
275
+ children: [/*#__PURE__*/_jsx(Typography, {
276
+ variant: "body1",
277
+ className: "fs-14",
278
+ children: item.title
279
+ }), /*#__PURE__*/_jsx(Grid, {
280
+ className: "xsColorBox",
281
+ sx: {
282
+ background: item.color
283
+ }
284
+ })]
285
+ }, Index))]
286
+ })]
287
+ })
288
+ });
289
+ };
290
+ export default styled(ColorTheme)(Style);
@@ -0,0 +1,77 @@
1
+ const Style = () => ({
2
+ ".primaryColorBoxes": {
3
+ ".pmBox": {
4
+ border: "1px solid #D1D1D1",
5
+ height: "65px",
6
+ borderRadius: "4px",
7
+ position: "relative",
8
+ flexShrink: 0,
9
+ "&:hover": {
10
+ ".editBtn": {
11
+ opacity: "1",
12
+ visibility: "visible"
13
+ }
14
+ }
15
+ }
16
+ },
17
+ ".secondaryColorBoxes": {
18
+ gap: "10px",
19
+ ".sdBox": {
20
+ border: "1px solid #D1D1D1",
21
+ height: "60px",
22
+ borderRadius: "4px",
23
+ width: "100%",
24
+ flexShrink: 0,
25
+ position: "relative",
26
+ "&:hover": {
27
+ ".editBtn": {
28
+ opacity: "1",
29
+ visibility: "visible"
30
+ }
31
+ }
32
+ }
33
+ },
34
+ ".valyeText": {
35
+ position: "absolute",
36
+ right: "5px",
37
+ bottom: "5px"
38
+ },
39
+ ".editBtn": {
40
+ position: "absolute",
41
+ right: "2px",
42
+ top: "2px",
43
+ padding: "2px",
44
+ opacity: "0",
45
+ visibility: "hidden"
46
+ },
47
+ ".settingsSection": {
48
+ background: "#FFFFFF",
49
+ border: "1px solid #E4E6E9",
50
+ padding: "12px",
51
+ marginTop: "10px",
52
+ borderRadius: "7px"
53
+ },
54
+ ".toggleType": {
55
+ width: "100%",
56
+ border: "1px solid #2563EB",
57
+ background: "#F5F6F9",
58
+ borderRadius: "8px",
59
+ padding: "3px",
60
+ height: "40px",
61
+ ".MuiToggleButton-root": {
62
+ padding: "10px",
63
+ width: "50%",
64
+ border: "none",
65
+ textTransform: "unset",
66
+ fontSize: "14px",
67
+ color: "#64748B",
68
+ "&.Mui-selected": {
69
+ borderRadius: "8px",
70
+ background: "#2563EB",
71
+ color: "#fff",
72
+ fontWeight: "700"
73
+ }
74
+ }
75
+ }
76
+ });
77
+ export default Style;