@flozy/editor 1.5.1 → 1.5.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/dist/Editor/CommonEditor.js +14 -3
  2. package/dist/Editor/Editor.css +144 -14
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +16 -11
  4. package/dist/Editor/Elements/Button/EditorButton.js +16 -7
  5. package/dist/Editor/Elements/Embed/Embed.js +13 -10
  6. package/dist/Editor/Elements/Grid/Grid.js +15 -2
  7. package/dist/Editor/Elements/Grid/GridItem.js +14 -2
  8. package/dist/Editor/Elements/Table/TableSelector.js +6 -4
  9. package/dist/Editor/Toolbar/FormatTools/TextSize.js +73 -0
  10. package/dist/Editor/Toolbar/FormatTools/index.js +2 -1
  11. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +23 -9
  12. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +152 -42
  13. package/dist/Editor/Toolbar/PopupTool/index.js +35 -34
  14. package/dist/Editor/Toolbar/Toolbar.js +6 -1
  15. package/dist/Editor/Toolbar/toolbarGroups.js +9 -9
  16. package/dist/Editor/assets/svg/addGridItem.js +49 -0
  17. package/dist/Editor/common/ColorPickerButton.js +3 -3
  18. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +4 -4
  19. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +32 -15
  20. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +48 -34
  21. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +90 -115
  22. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +93 -101
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +24 -5
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -5
  25. package/dist/Editor/common/StyleBuilder/fieldTypes/elementSize.js +49 -20
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +9 -5
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +23 -5
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +52 -0
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +33 -6
  30. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +16 -17
  31. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +8 -5
  32. package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +12 -6
  33. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +28 -23
  34. package/dist/Editor/common/StyleBuilder/gridStyle.js +0 -6
  35. package/dist/Editor/common/StyleBuilder/index.js +70 -44
  36. package/dist/Editor/common/Uploader.js +51 -14
  37. package/dist/Editor/common/iconslist.js +409 -0
  38. package/package.json +1 -1
@@ -1,8 +1,9 @@
1
1
  import React, { useState } from "react";
2
2
  import { Grid, Button, Typography } from "@mui/material";
3
- import CloudUploadIcon from "@mui/icons-material/CloudUpload";
3
+ // import CloudUploadIcon from "@mui/icons-material/CloudUpload";
4
4
  import { convertBase64 } from "../../../utils/helper";
5
5
  import { uploadFile } from "../../../service/fileupload";
6
+ import { UploadBtnIcon } from "../../iconslist";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  const BackgroundImage = props => {
@@ -43,52 +44,65 @@ const BackgroundImage = props => {
43
44
  };
44
45
  return /*#__PURE__*/_jsxs(Grid, {
45
46
  container: true,
46
- children: [/*#__PURE__*/_jsxs(Grid, {
47
+ children: [/*#__PURE__*/_jsx(Grid, {
47
48
  item: true,
48
49
  xs: 12,
49
- style: {
50
- display: "flex"
50
+ children: uploading ? "Uploading..." : ""
51
+ }), /*#__PURE__*/_jsx(Typography, {
52
+ variant: "body1",
53
+ color: "primary",
54
+ sx: {
55
+ fontSize: "14px",
56
+ fontWeight: "500",
57
+ marginBottom: "5px"
51
58
  },
52
- justifyContent: "space-between",
53
- alignItems: "center",
54
- children: [/*#__PURE__*/_jsxs(Button, {
55
- component: "label",
56
- variant: "contained",
57
- startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
58
- children: ["Upload file", /*#__PURE__*/_jsx("input", {
59
- type: "file",
60
- style: {
61
- opacity: 0,
62
- width: "0px"
63
- },
64
- onChange: handleChange
65
- })]
66
- }), /*#__PURE__*/_jsxs(Grid, {
67
- className: "dflex",
68
- children: [/*#__PURE__*/_jsx("input", {
69
- type: "checkbox",
70
- value: "none",
71
- checked: value === "none",
72
- onChange: onRemoveBG
73
- }), " ", /*#__PURE__*/_jsx(Typography, {
74
- variant: "body1",
75
- color: "primary",
76
- children: "Remove"
77
- })]
78
- })]
79
- }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
59
+ children: "Upload Image"
60
+ }), /*#__PURE__*/_jsx(Grid, {
80
61
  item: true,
81
62
  xs: 12,
82
63
  style: {
64
+ position: "relative",
83
65
  marginTop: "12px",
66
+ marginBottom: "12px",
84
67
  width: "100%",
85
68
  backgroundImage: base64 ? `url(${base64})` : "none",
86
- height: "100px",
69
+ height: "200px",
70
+ borderRadius: "10px",
87
71
  backgroundPosition: "center",
88
72
  backgroundSize: "contain",
89
73
  backgroundRepeat: "no-repeat",
90
74
  backgroundColor: "rgba(0,0,0,0.5)"
91
- }
75
+ },
76
+ children: /*#__PURE__*/_jsx(Grid, {
77
+ className: "uploadImageSection",
78
+ children: base64 ? /*#__PURE__*/_jsx(Grid, {
79
+ className: "removeImageText",
80
+ onClick: onRemoveBG,
81
+ children: "REMOVE"
82
+ }) : /*#__PURE__*/_jsx(Grid, {
83
+ className: "uploadImageText",
84
+ children: /*#__PURE__*/_jsxs(Button, {
85
+ component: "label",
86
+ variant: "contained",
87
+ style: {
88
+ background: "none"
89
+ },
90
+ children: [/*#__PURE__*/_jsx("input", {
91
+ type: "file",
92
+ style: {
93
+ opacity: 0,
94
+ width: "0px"
95
+ },
96
+ onChange: handleChange
97
+ }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
98
+ style: {
99
+ paddingLeft: "8px"
100
+ },
101
+ children: "UPLOAD"
102
+ })]
103
+ })
104
+ })
105
+ })
92
106
  })]
93
107
  });
94
108
  };
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
- import { Grid } from "@mui/material";
2
+ import { Grid, Typography } from "@mui/material";
3
3
  import LockIcon from "@mui/icons-material/Lock";
4
4
  import LockOpenIcon from "@mui/icons-material/LockOpen";
5
+ import { radiusStyle } from "./radiusStyle";
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
8
  const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
@@ -38,125 +39,99 @@ const BannerSpacing = props => {
38
39
  lockSpacing: !lockSpacing
39
40
  });
40
41
  };
41
- return /*#__PURE__*/_jsx(Grid, {
42
- container: true,
43
- padding: 4,
44
- children: /*#__PURE__*/_jsxs(Grid, {
45
- item: true,
46
- xs: 12,
47
- sx: {
48
- pb: 2,
49
- display: "flex",
50
- justifyContent: "center",
51
- flexDirection: "column",
52
- alignItems: "center"
42
+ const maxCap = val => {
43
+ return val > 100 ? 32 : val;
44
+ };
45
+ return /*#__PURE__*/_jsxs(Grid, {
46
+ item: true,
47
+ xs: 12,
48
+ children: [/*#__PURE__*/_jsx(Typography, {
49
+ variant: "body1",
50
+ color: "primary",
51
+ style: {
52
+ fontSize: "14px",
53
+ fontWeight: 500
53
54
  },
54
- children: [/*#__PURE__*/_jsx("label", {
55
- style: {
56
- fontSize: "12px"
57
- },
58
- children: data?.label
59
- }), /*#__PURE__*/_jsxs("div", {
60
- style: {
61
- width: "100px",
62
- height: "100px",
63
- border: "1px solid #495efc",
64
- backgroundColor: "transparent",
65
- position: "relative",
55
+ children: data?.label
56
+ }), /*#__PURE__*/_jsx(Grid, {
57
+ container: true,
58
+ padding: 4,
59
+ children: /*#__PURE__*/_jsx(Grid, {
60
+ item: true,
61
+ xs: 12,
62
+ sx: {
63
+ pb: 2,
66
64
  display: "flex",
67
- padding: `${value?.top}px ${value?.right}px ${value?.bottom}px ${value?.left}px`
65
+ justifyContent: "center",
66
+ flexDirection: "column",
67
+ alignItems: "center"
68
68
  },
69
- children: [/*#__PURE__*/_jsx("div", {
70
- style: {
71
- border: "1px solid #495efc",
72
- width: "100%"
73
- }
74
- }), /*#__PURE__*/_jsx("input", {
75
- type: "text",
76
- name: "left",
77
- value: value?.left,
78
- style: {
79
- position: "absolute",
80
- left: "-60px",
81
- top: 0,
82
- bottom: 0,
83
- width: "35px",
84
- height: "16px",
85
- margin: "auto",
86
- textAlign: "center",
87
- border: "1px solid #cccccc",
88
- fontSize: "12px",
89
- borderRadius: "4px"
90
- },
91
- onChange: handleChange
92
- }), /*#__PURE__*/_jsx("input", {
93
- type: "text",
94
- name: "top",
95
- value: value?.top,
96
- style: {
97
- position: "absolute",
98
- right: 0,
99
- left: 0,
100
- top: "-36px",
101
- width: "35px",
102
- height: "16px",
103
- margin: "auto",
104
- textAlign: "center",
105
- border: "1px solid #cccccc",
106
- fontSize: "12px",
107
- borderRadius: "4px"
108
- },
109
- onChange: handleChange
110
- }), /*#__PURE__*/_jsx("input", {
111
- type: "text",
112
- name: "right",
113
- value: value?.right,
114
- style: {
115
- position: "absolute",
116
- right: "-60px",
117
- top: 0,
118
- bottom: 0,
119
- width: "35px",
120
- height: "16px",
121
- margin: "auto",
122
- textAlign: "center",
123
- border: "1px solid #cccccc",
124
- fontSize: "12px",
125
- borderRadius: "4px"
126
- },
127
- onChange: handleChange
128
- }), /*#__PURE__*/_jsx("input", {
129
- type: "text",
130
- name: "bottom",
131
- value: value?.bottom,
132
- style: {
133
- position: "absolute",
134
- right: 0,
135
- left: 0,
136
- bottom: "-36px",
137
- width: "35px",
138
- height: "16px",
139
- margin: "auto",
140
- textAlign: "center",
141
- border: "1px solid #cccccc",
142
- fontSize: "12px",
143
- borderRadius: "4px"
144
- },
145
- onChange: handleChange
146
- }), /*#__PURE__*/_jsx("button", {
69
+ children: /*#__PURE__*/_jsxs("div", {
147
70
  style: {
148
- position: "absolute",
149
- right: 0,
150
- left: 0,
151
- top: 0,
152
- bottom: 0,
153
- background: "none"
71
+ width: "100px",
72
+ height: "100px",
73
+ // border: "1px solid #495efc",
74
+ backgroundColor: "transparent",
75
+ position: "relative",
76
+ display: "flex",
77
+ padding: `${maxCap(value?.top)}px ${maxCap(value?.right)}px ${maxCap(value?.bottom)}px ${maxCap(value?.left)}px`
154
78
  },
155
- onClick: onLockSpacing,
156
- children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
157
- })]
158
- })]
159
- })
79
+ children: [/*#__PURE__*/_jsx("div", {
80
+ style: {
81
+ border: "1px solid #495efc",
82
+ width: "100%"
83
+ }
84
+ }), /*#__PURE__*/_jsx("input", {
85
+ type: "text",
86
+ name: "left",
87
+ className: "borderInput",
88
+ value: value?.left,
89
+ style: {
90
+ ...radiusStyle.topLeft
91
+ },
92
+ onChange: handleChange
93
+ }), /*#__PURE__*/_jsx("input", {
94
+ type: "text",
95
+ name: "top",
96
+ value: value?.top,
97
+ className: "borderInput",
98
+ style: {
99
+ ...radiusStyle.topRight
100
+ },
101
+ onChange: handleChange
102
+ }), /*#__PURE__*/_jsx("input", {
103
+ type: "text",
104
+ name: "right",
105
+ value: value?.right,
106
+ className: "borderInput",
107
+ style: {
108
+ ...radiusStyle.bottomLeft
109
+ },
110
+ onChange: handleChange
111
+ }), /*#__PURE__*/_jsx("input", {
112
+ type: "text",
113
+ name: "bottom",
114
+ value: value?.bottom,
115
+ className: "borderInput",
116
+ style: {
117
+ ...radiusStyle.bottomRight
118
+ },
119
+ onChange: handleChange
120
+ }), /*#__PURE__*/_jsx("button", {
121
+ style: {
122
+ position: "absolute",
123
+ right: 0,
124
+ left: 0,
125
+ top: 0,
126
+ bottom: 0,
127
+ background: "none"
128
+ },
129
+ onClick: onLockSpacing,
130
+ children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
131
+ })]
132
+ })
133
+ })
134
+ })]
160
135
  });
161
136
  };
162
137
  export default BannerSpacing;
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
- import { Grid } from "@mui/material";
2
+ import { Grid, Typography } from "@mui/material";
3
3
  import LockIcon from "@mui/icons-material/Lock";
4
4
  import LockOpenIcon from "@mui/icons-material/LockOpen";
5
+ import { radiusStyle } from "./radiusStyle";
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
8
  const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -39,113 +40,104 @@ const BorderRadius = props => {
39
40
  lockRadius: !lockRadius
40
41
  });
41
42
  };
42
- return /*#__PURE__*/_jsx(Grid, {
43
- container: true,
44
- padding: 4,
45
- children: /*#__PURE__*/_jsxs(Grid, {
46
- item: true,
47
- xs: 12,
43
+ return /*#__PURE__*/_jsxs(Grid, {
44
+ item: true,
45
+ xs: 12,
46
+ children: [/*#__PURE__*/_jsx(Typography, {
47
+ variant: "body1",
48
+ color: "primary",
48
49
  style: {
49
- display: "flex",
50
- flexDirection: "column"
50
+ fontSize: "14px",
51
+ fontWeight: 500
51
52
  },
52
- justifyContent: "center",
53
- alignContent: "center",
54
- alignItems: "center",
55
- children: [/*#__PURE__*/_jsx("label", {
53
+ children: data?.label
54
+ }), /*#__PURE__*/_jsx(Grid, {
55
+ container: true,
56
+ children: /*#__PURE__*/_jsx(Grid, {
57
+ item: true,
58
+ xs: 12,
56
59
  style: {
57
- fontSize: "12px"
58
- },
59
- children: data?.label
60
- }), /*#__PURE__*/_jsxs("div", {
61
- style: {
62
- width: "100px",
63
- height: "100px",
64
- border: "1px solid blue",
65
- position: "relative",
66
60
  display: "flex",
67
- borderColor: `${borderColor}`,
68
- borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
61
+ flexDirection: "column",
62
+ marginBottom: "48px",
63
+ marginTop: "42px"
69
64
  },
70
- children: [/*#__PURE__*/_jsx("input", {
71
- type: "text",
72
- name: "topLeft",
73
- value: value?.topLeft,
74
- style: {
75
- position: "absolute",
76
- left: "-25px",
77
- top: "-28px",
78
- width: "20px",
79
- height: "16px",
80
- margin: "auto",
81
- border: "1px solid #cccccc",
82
- fontSize: "12px",
83
- borderRadius: "4px",
84
- textAlign: "center"
85
- },
86
- onChange: handleChange
87
- }), /*#__PURE__*/_jsx("input", {
88
- type: "text",
89
- name: "topRight",
90
- value: value?.topRight,
91
- style: {
92
- position: "absolute",
93
- top: "-28px",
94
- right: "-25px",
95
- width: "20px",
96
- height: "16px",
97
- border: "1px solid #cccccc",
98
- fontSize: "12px",
99
- borderRadius: "4px",
100
- textAlign: "center"
101
- },
102
- onChange: handleChange
103
- }), /*#__PURE__*/_jsx("input", {
104
- type: "text",
105
- name: "bottomLeft",
106
- value: value?.bottomLeft,
107
- style: {
108
- position: "absolute",
109
- left: "-25px",
110
- bottom: "-28px",
111
- width: "20px",
112
- height: "16px",
113
- border: "1px solid #cccccc",
114
- fontSize: "12px",
115
- borderRadius: "4px",
116
- textAlign: "center"
117
- },
118
- onChange: handleChange
119
- }), /*#__PURE__*/_jsx("input", {
120
- type: "text",
121
- name: "bottomRight",
122
- value: value?.bottomRight,
123
- style: {
124
- position: "absolute",
125
- bottom: "-28px",
126
- right: "-25px",
127
- width: "20px",
128
- height: "16px",
129
- border: "1px solid #cccccc",
130
- fontSize: "12px",
131
- borderRadius: "4px",
132
- textAlign: "center"
133
- },
134
- onChange: handleChange
135
- }), /*#__PURE__*/_jsx("button", {
65
+ justifyContent: "center",
66
+ alignContent: "center",
67
+ alignItems: "center",
68
+ children: /*#__PURE__*/_jsxs("div", {
136
69
  style: {
137
- position: "absolute",
138
- right: 0,
139
- left: 0,
140
- top: 0,
141
- bottom: 0,
142
- background: "none"
70
+ width: "100px",
71
+ height: "50px",
72
+ border: "none",
73
+ position: "relative",
74
+ display: "flex",
75
+ borderColor: `${borderColor}`,
76
+ borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
143
77
  },
144
- onClick: onLockRadius,
145
- children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
146
- })]
147
- })]
148
- })
78
+ children: [/*#__PURE__*/_jsx("input", {
79
+ type: "text",
80
+ name: "topLeft",
81
+ value: value?.topLeft,
82
+ className: "borderInput",
83
+ placeholder: "0",
84
+ style: {
85
+ ...radiusStyle.topLeft,
86
+ borderTopLeftRadius: `${value?.topLeft}px`
87
+ },
88
+ onChange: handleChange
89
+ }), /*#__PURE__*/_jsx("input", {
90
+ type: "text",
91
+ name: "topRight",
92
+ value: value?.topRight,
93
+ className: "borderInput",
94
+ placeholder: "0",
95
+ style: {
96
+ ...radiusStyle.topRight,
97
+ borderTopRightRadius: `${value?.topRight}px`,
98
+ textAlign: "center"
99
+ },
100
+ onChange: handleChange
101
+ }), /*#__PURE__*/_jsx("input", {
102
+ type: "text",
103
+ name: "bottomLeft",
104
+ value: value?.bottomLeft,
105
+ className: "borderInput",
106
+ placeholder: "0",
107
+ style: {
108
+ ...radiusStyle.bottomLeft,
109
+ borderBottomLeftRadius: `${value?.bottomLeft}px`,
110
+ textAlign: "center"
111
+ },
112
+ onChange: handleChange
113
+ }), /*#__PURE__*/_jsx("input", {
114
+ type: "text",
115
+ name: "bottomRight",
116
+ value: value?.bottomRight,
117
+ className: "borderInput",
118
+ placeholder: "0",
119
+ style: {
120
+ ...radiusStyle.bottomRight,
121
+ borderBottomRightRadius: `${value?.bottomRight}px`,
122
+ textAlign: "center"
123
+ },
124
+ onChange: handleChange
125
+ }), /*#__PURE__*/_jsx("button", {
126
+ style: {
127
+ border: "none",
128
+ position: "absolute",
129
+ right: 0,
130
+ left: 0,
131
+ top: 0,
132
+ bottom: 0,
133
+ background: "none"
134
+ },
135
+ onClick: onLockRadius,
136
+ children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
137
+ })]
138
+ })
139
+ })
140
+ })]
149
141
  });
150
142
  };
151
143
  export default BorderRadius;
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { FormControl, FormLabel, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem } from "@mui/material";
2
+ import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem, Typography } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
5
  const ButtonLink = props => {
@@ -81,13 +81,18 @@ const ButtonLink = props => {
81
81
  };
82
82
  return /*#__PURE__*/_jsxs(Grid, {
83
83
  container: true,
84
- padding: 4,
85
84
  spacing: 1,
86
85
  children: [/*#__PURE__*/_jsx(Grid, {
87
86
  item: true,
88
87
  xs: 12,
89
88
  children: /*#__PURE__*/_jsxs(FormControl, {
90
- children: [/*#__PURE__*/_jsx(FormLabel, {
89
+ children: [/*#__PURE__*/_jsx(Typography, {
90
+ variant: "body1",
91
+ color: "primary",
92
+ style: {
93
+ fontSize: "14px",
94
+ fontWeight: 500
95
+ },
91
96
  id: "demo-radio-buttons-group-label",
92
97
  children: "Where do you want to Link?"
93
98
  }), /*#__PURE__*/_jsxs(RadioGroup, {
@@ -99,11 +104,25 @@ const ButtonLink = props => {
99
104
  children: [/*#__PURE__*/_jsx(FormControlLabel, {
100
105
  value: "actionTrigger",
101
106
  control: /*#__PURE__*/_jsx(Radio, {}),
102
- label: "Action Trigger"
107
+ label: /*#__PURE__*/_jsx(Typography, {
108
+ variant: "body1",
109
+ color: "primary",
110
+ style: {
111
+ fontSize: "14px"
112
+ },
113
+ children: "Action Trigger"
114
+ })
103
115
  }), /*#__PURE__*/_jsx(FormControlLabel, {
104
116
  value: "webAddress",
105
117
  control: /*#__PURE__*/_jsx(Radio, {}),
106
- label: "Web Address"
118
+ label: /*#__PURE__*/_jsx(Typography, {
119
+ variant: "body1",
120
+ color: "primary",
121
+ style: {
122
+ fontSize: "14px"
123
+ },
124
+ children: "Web Address"
125
+ })
107
126
  })]
108
127
  })]
109
128
  })
@@ -39,10 +39,11 @@ const Color = props => {
39
39
  children: /*#__PURE__*/_jsx(Grid, {
40
40
  item: true,
41
41
  style: {
42
- padding: "8px",
43
42
  color: textColor,
44
43
  background: bgColor,
45
- border: `1px solid ${borderColor}`
44
+ border: `1px solid ${borderColor}`,
45
+ fontSize: "14px",
46
+ fontWeight: 500
46
47
  },
47
48
  children: "Button Preview"
48
49
  })
@@ -69,9 +70,10 @@ const Color = props => {
69
70
  className: "btnColorPicker",
70
71
  children: [/*#__PURE__*/_jsx(Typography, {
71
72
  variant: "body1",
72
- color: "textSecondary",
73
+ color: "primary",
73
74
  sx: {
74
75
  fontSize: "14px",
76
+ fontWeight: 500,
75
77
  marginBottom: "5px"
76
78
  },
77
79
  children: label
@@ -85,8 +87,8 @@ const Color = props => {
85
87
  shrink: true
86
88
  },
87
89
  InputProps: {
88
- endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
89
- position: "end",
90
+ startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
91
+ position: "start",
90
92
  children: /*#__PURE__*/_jsx(ColorPickerButton, {
91
93
  value: value,
92
94
  onSave: onSave