@strapi/plugin-color-picker 4.15.0 → 4.15.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/_chunks/ColorPickerInput-b422e4e7.js +206 -0
- package/dist/_chunks/{ColorPickerInput-6f0d1bb5.js.map → ColorPickerInput-b422e4e7.js.map} +1 -1
- package/dist/_chunks/ColorPickerInput-ee59d80f.mjs +185 -0
- package/dist/_chunks/{ColorPickerInput-f3a9f863.mjs.map → ColorPickerInput-ee59d80f.mjs.map} +1 -1
- package/dist/_chunks/{index-e797ad4f.mjs → index-10d18ad6.mjs} +6 -15
- package/dist/_chunks/index-10d18ad6.mjs.map +1 -0
- package/dist/_chunks/{index-476267d4.js → index-2b655cca.js} +6 -15
- package/dist/_chunks/index-2b655cca.js.map +1 -0
- package/dist/admin/index.js +2 -2
- package/dist/admin/index.mjs +2 -2
- package/package.json +7 -10
- package/dist/_chunks/ColorPickerInput-6f0d1bb5.js +0 -298
- package/dist/_chunks/ColorPickerInput-f3a9f863.mjs +0 -277
- package/dist/_chunks/index-476267d4.js.map +0 -1
- package/dist/_chunks/index-e797ad4f.mjs.map +0 -1
package/dist/admin/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { i } from "../_chunks/index-
|
|
1
|
+
import { i } from "../_chunks/index-10d18ad6.mjs";
|
|
2
2
|
import "@strapi/helper-plugin";
|
|
3
|
-
import "react/jsx-
|
|
3
|
+
import "react/jsx-runtime";
|
|
4
4
|
import "@strapi/design-system";
|
|
5
5
|
import "@strapi/icons";
|
|
6
6
|
import "styled-components";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/plugin-color-picker",
|
|
3
|
-
"version": "4.15.
|
|
3
|
+
"version": "4.15.2",
|
|
4
4
|
"description": "Strapi maintained Custom Fields",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -44,10 +44,7 @@
|
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "strapi plugin:build --force",
|
|
46
46
|
"clean": "run -T rimraf ./dist",
|
|
47
|
-
"lint": "
|
|
48
|
-
"lint:back": "run -T eslint ./server -c ./server/.eslintrc.js",
|
|
49
|
-
"lint:front": "run -T eslint ./admin -c ./admin/.eslintrc.js",
|
|
50
|
-
"lint:project": "run -T eslint . -c ./.eslintrc.js",
|
|
47
|
+
"lint": "run -T eslint .",
|
|
51
48
|
"prepublishOnly": "yarn clean && yarn build",
|
|
52
49
|
"test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
|
|
53
50
|
"test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
|
|
@@ -58,14 +55,14 @@
|
|
|
58
55
|
},
|
|
59
56
|
"dependencies": {
|
|
60
57
|
"@strapi/design-system": "1.13.0",
|
|
61
|
-
"@strapi/helper-plugin": "4.15.
|
|
58
|
+
"@strapi/helper-plugin": "4.15.2",
|
|
62
59
|
"@strapi/icons": "1.13.0",
|
|
63
60
|
"prop-types": "^15.8.1",
|
|
64
61
|
"react-colorful": "5.6.1",
|
|
65
62
|
"react-intl": "6.4.1"
|
|
66
63
|
},
|
|
67
64
|
"devDependencies": {
|
|
68
|
-
"@strapi/strapi": "4.15.
|
|
65
|
+
"@strapi/strapi": "4.15.2",
|
|
69
66
|
"@testing-library/react": "14.0.0",
|
|
70
67
|
"@testing-library/user-event": "14.4.3",
|
|
71
68
|
"@types/styled-components": "5.1.26",
|
|
@@ -79,8 +76,8 @@
|
|
|
79
76
|
"@strapi/strapi": "^4.4.0",
|
|
80
77
|
"react": "^17.0.0 || ^18.0.0",
|
|
81
78
|
"react-dom": "^17.0.0 || ^18.0.0",
|
|
82
|
-
"react-router-dom": "5.
|
|
83
|
-
"styled-components": "5.
|
|
79
|
+
"react-router-dom": "^5.2.0",
|
|
80
|
+
"styled-components": "^5.2.1"
|
|
84
81
|
},
|
|
85
82
|
"engines": {
|
|
86
83
|
"node": ">=18.0.0 <=20.x.x",
|
|
@@ -92,5 +89,5 @@
|
|
|
92
89
|
"kind": "plugin",
|
|
93
90
|
"displayName": "Color Picker"
|
|
94
91
|
},
|
|
95
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "bb510893332674e2607f7d335b34dc78c599319a"
|
|
96
93
|
}
|
|
@@ -1,298 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxDevRuntime = require("react/jsx-dev-runtime");
|
|
4
|
-
const React = require("react");
|
|
5
|
-
const designSystem = require("@strapi/design-system");
|
|
6
|
-
const icons = require("@strapi/icons");
|
|
7
|
-
const reactColorful = require("react-colorful");
|
|
8
|
-
const reactIntl = require("react-intl");
|
|
9
|
-
const styled = require("styled-components");
|
|
10
|
-
const index = require("./index-476267d4.js");
|
|
11
|
-
require("@strapi/helper-plugin");
|
|
12
|
-
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
13
|
-
function _interopNamespace(e) {
|
|
14
|
-
if (e && e.__esModule)
|
|
15
|
-
return e;
|
|
16
|
-
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
17
|
-
if (e) {
|
|
18
|
-
for (const k in e) {
|
|
19
|
-
if (k !== "default") {
|
|
20
|
-
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: () => e[k]
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
n.default = e;
|
|
29
|
-
return Object.freeze(n);
|
|
30
|
-
}
|
|
31
|
-
const React__namespace = /* @__PURE__ */ _interopNamespace(React);
|
|
32
|
-
const styled__default = /* @__PURE__ */ _interopDefault(styled);
|
|
33
|
-
function setRef(ref, value) {
|
|
34
|
-
if (typeof ref === "function") {
|
|
35
|
-
ref(value);
|
|
36
|
-
} else if (ref !== null && ref !== void 0) {
|
|
37
|
-
ref.current = value;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
function composeRefs(...refs) {
|
|
41
|
-
return (node) => refs.forEach((ref) => setRef(ref, node));
|
|
42
|
-
}
|
|
43
|
-
function useComposedRefs(...refs) {
|
|
44
|
-
return React__namespace.useCallback(composeRefs(...refs), refs);
|
|
45
|
-
}
|
|
46
|
-
const ColorPreview = styled__default.default.div`
|
|
47
|
-
border-radius: 50%;
|
|
48
|
-
width: 20px;
|
|
49
|
-
height: 20px;
|
|
50
|
-
margin-right: 10px;
|
|
51
|
-
background-color: ${(props) => props.color};
|
|
52
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
53
|
-
`;
|
|
54
|
-
const ColorPicker = styled__default.default(reactColorful.HexColorPicker)`
|
|
55
|
-
&& {
|
|
56
|
-
width: 100%;
|
|
57
|
-
aspect-ratio: 1.5;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.react-colorful__pointer {
|
|
61
|
-
width: ${({ theme }) => theme.spaces[3]};
|
|
62
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.react-colorful__saturation {
|
|
66
|
-
border-radius: ${({ theme }) => theme.spaces[1]};
|
|
67
|
-
border-bottom: none;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.react-colorful__hue {
|
|
71
|
-
border-radius: 10px;
|
|
72
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
73
|
-
margin-top: ${({ theme }) => theme.spaces[2]};
|
|
74
|
-
}
|
|
75
|
-
`;
|
|
76
|
-
const ColorPickerToggle = styled__default.default(designSystem.BaseButton)`
|
|
77
|
-
display: flex;
|
|
78
|
-
justify-content: space-between;
|
|
79
|
-
align-items: center;
|
|
80
|
-
|
|
81
|
-
svg {
|
|
82
|
-
width: ${({ theme }) => theme.spaces[2]};
|
|
83
|
-
height: ${({ theme }) => theme.spaces[2]};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
svg > path {
|
|
87
|
-
fill: ${({ theme }) => theme.colors.neutral500};
|
|
88
|
-
justify-self: flex-end;
|
|
89
|
-
}
|
|
90
|
-
`;
|
|
91
|
-
const ColorPickerPopover = styled__default.default(designSystem.Popover)`
|
|
92
|
-
padding: ${({ theme }) => theme.spaces[2]};
|
|
93
|
-
min-height: 270px;
|
|
94
|
-
`;
|
|
95
|
-
const ColorPickerInput = React__namespace.forwardRef(
|
|
96
|
-
({
|
|
97
|
-
attribute,
|
|
98
|
-
description,
|
|
99
|
-
disabled = false,
|
|
100
|
-
error,
|
|
101
|
-
intlLabel,
|
|
102
|
-
labelAction,
|
|
103
|
-
name,
|
|
104
|
-
onChange,
|
|
105
|
-
required = false,
|
|
106
|
-
value = ""
|
|
107
|
-
}, forwardedRef) => {
|
|
108
|
-
const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
|
|
109
|
-
const colorPickerButtonRef = React__namespace.useRef(null);
|
|
110
|
-
const { formatMessage } = reactIntl.useIntl();
|
|
111
|
-
const color = value || "#000000";
|
|
112
|
-
const handleBlur = (e) => {
|
|
113
|
-
e.preventDefault();
|
|
114
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
115
|
-
setShowColorPicker(false);
|
|
116
|
-
}
|
|
117
|
-
};
|
|
118
|
-
const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
|
|
119
|
-
return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
|
|
120
|
-
designSystem.Field,
|
|
121
|
-
{
|
|
122
|
-
name,
|
|
123
|
-
id: name,
|
|
124
|
-
error,
|
|
125
|
-
hint: description && formatMessage(description),
|
|
126
|
-
required,
|
|
127
|
-
children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
|
128
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }, void 0, false, {
|
|
129
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
130
|
-
lineNumber: 138,
|
|
131
|
-
columnNumber: 11
|
|
132
|
-
}, globalThis),
|
|
133
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(
|
|
134
|
-
ColorPickerToggle,
|
|
135
|
-
{
|
|
136
|
-
ref: composedRefs,
|
|
137
|
-
"aria-label": formatMessage({
|
|
138
|
-
id: index.getTrad("color-picker.toggle.aria-label"),
|
|
139
|
-
defaultMessage: "Color picker toggle"
|
|
140
|
-
}),
|
|
141
|
-
"aria-controls": "color-picker-value",
|
|
142
|
-
"aria-haspopup": "dialog",
|
|
143
|
-
"aria-expanded": showColorPicker,
|
|
144
|
-
"aria-disabled": disabled,
|
|
145
|
-
disabled,
|
|
146
|
-
onClick: () => setShowColorPicker(!showColorPicker),
|
|
147
|
-
children: [
|
|
148
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { children: [
|
|
149
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(ColorPreview, { color }, void 0, false, {
|
|
150
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
151
|
-
lineNumber: 153,
|
|
152
|
-
columnNumber: 15
|
|
153
|
-
}, globalThis),
|
|
154
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(
|
|
155
|
-
designSystem.Typography,
|
|
156
|
-
{
|
|
157
|
-
style: { textTransform: "uppercase" },
|
|
158
|
-
textColor: value ? void 0 : "neutral600",
|
|
159
|
-
variant: "omega",
|
|
160
|
-
children: color
|
|
161
|
-
},
|
|
162
|
-
void 0,
|
|
163
|
-
false,
|
|
164
|
-
{
|
|
165
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
166
|
-
lineNumber: 154,
|
|
167
|
-
columnNumber: 15
|
|
168
|
-
},
|
|
169
|
-
globalThis
|
|
170
|
-
)
|
|
171
|
-
] }, void 0, true, {
|
|
172
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
173
|
-
lineNumber: 152,
|
|
174
|
-
columnNumber: 13
|
|
175
|
-
}, globalThis),
|
|
176
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(icons.CarretDown, { "aria-hidden": true }, void 0, false, {
|
|
177
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
178
|
-
lineNumber: 162,
|
|
179
|
-
columnNumber: 13
|
|
180
|
-
}, globalThis)
|
|
181
|
-
]
|
|
182
|
-
},
|
|
183
|
-
void 0,
|
|
184
|
-
true,
|
|
185
|
-
{
|
|
186
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
187
|
-
lineNumber: 139,
|
|
188
|
-
columnNumber: 11
|
|
189
|
-
},
|
|
190
|
-
globalThis
|
|
191
|
-
),
|
|
192
|
-
showColorPicker && /* @__PURE__ */ jsxDevRuntime.jsxDEV(
|
|
193
|
-
ColorPickerPopover,
|
|
194
|
-
{
|
|
195
|
-
onBlur: handleBlur,
|
|
196
|
-
role: "dialog",
|
|
197
|
-
source: colorPickerButtonRef,
|
|
198
|
-
spacing: 4,
|
|
199
|
-
children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
|
|
200
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(
|
|
201
|
-
ColorPicker,
|
|
202
|
-
{
|
|
203
|
-
color,
|
|
204
|
-
onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
|
|
205
|
-
},
|
|
206
|
-
void 0,
|
|
207
|
-
false,
|
|
208
|
-
{
|
|
209
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
210
|
-
lineNumber: 172,
|
|
211
|
-
columnNumber: 17
|
|
212
|
-
},
|
|
213
|
-
globalThis
|
|
214
|
-
),
|
|
215
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
|
|
216
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
|
|
217
|
-
id: index.getTrad("color-picker.input.format"),
|
|
218
|
-
defaultMessage: "HEX"
|
|
219
|
-
}) }, void 0, false, {
|
|
220
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
221
|
-
lineNumber: 180,
|
|
222
|
-
columnNumber: 21
|
|
223
|
-
}, globalThis) }, void 0, false, {
|
|
224
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
225
|
-
lineNumber: 179,
|
|
226
|
-
columnNumber: 19
|
|
227
|
-
}, globalThis),
|
|
228
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(
|
|
229
|
-
designSystem.FieldInput,
|
|
230
|
-
{
|
|
231
|
-
id: "color-picker-value",
|
|
232
|
-
"aria-label": formatMessage({
|
|
233
|
-
id: index.getTrad("color-picker.input.aria-label"),
|
|
234
|
-
defaultMessage: "Color picker input"
|
|
235
|
-
}),
|
|
236
|
-
style: { textTransform: "uppercase" },
|
|
237
|
-
value,
|
|
238
|
-
placeholder: "#000000",
|
|
239
|
-
onChange
|
|
240
|
-
},
|
|
241
|
-
void 0,
|
|
242
|
-
false,
|
|
243
|
-
{
|
|
244
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
245
|
-
lineNumber: 187,
|
|
246
|
-
columnNumber: 19
|
|
247
|
-
},
|
|
248
|
-
globalThis
|
|
249
|
-
)
|
|
250
|
-
] }, void 0, true, {
|
|
251
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
252
|
-
lineNumber: 178,
|
|
253
|
-
columnNumber: 17
|
|
254
|
-
}, globalThis)
|
|
255
|
-
] }, void 0, true, {
|
|
256
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
257
|
-
lineNumber: 171,
|
|
258
|
-
columnNumber: 15
|
|
259
|
-
}, globalThis)
|
|
260
|
-
},
|
|
261
|
-
void 0,
|
|
262
|
-
false,
|
|
263
|
-
{
|
|
264
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
265
|
-
lineNumber: 165,
|
|
266
|
-
columnNumber: 13
|
|
267
|
-
},
|
|
268
|
-
globalThis
|
|
269
|
-
),
|
|
270
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldHint, {}, void 0, false, {
|
|
271
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
272
|
-
lineNumber: 202,
|
|
273
|
-
columnNumber: 11
|
|
274
|
-
}, globalThis),
|
|
275
|
-
/* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldError, {}, void 0, false, {
|
|
276
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
277
|
-
lineNumber: 203,
|
|
278
|
-
columnNumber: 11
|
|
279
|
-
}, globalThis)
|
|
280
|
-
] }, void 0, true, {
|
|
281
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
282
|
-
lineNumber: 137,
|
|
283
|
-
columnNumber: 9
|
|
284
|
-
}, globalThis)
|
|
285
|
-
},
|
|
286
|
-
void 0,
|
|
287
|
-
false,
|
|
288
|
-
{
|
|
289
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
290
|
-
lineNumber: 129,
|
|
291
|
-
columnNumber: 7
|
|
292
|
-
},
|
|
293
|
-
globalThis
|
|
294
|
-
);
|
|
295
|
-
}
|
|
296
|
-
);
|
|
297
|
-
exports.ColorPickerInput = ColorPickerInput;
|
|
298
|
-
//# sourceMappingURL=ColorPickerInput-6f0d1bb5.js.map
|
|
@@ -1,277 +0,0 @@
|
|
|
1
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { BaseButton, Popover, Field, Flex, FieldLabel, Typography, FocusTrap, Box, FieldInput, FieldHint, FieldError } from "@strapi/design-system";
|
|
4
|
-
import { CarretDown } from "@strapi/icons";
|
|
5
|
-
import { HexColorPicker } from "react-colorful";
|
|
6
|
-
import { useIntl } from "react-intl";
|
|
7
|
-
import styled from "styled-components";
|
|
8
|
-
import { g as getTrad } from "./index-e797ad4f.mjs";
|
|
9
|
-
import "@strapi/helper-plugin";
|
|
10
|
-
function setRef(ref, value) {
|
|
11
|
-
if (typeof ref === "function") {
|
|
12
|
-
ref(value);
|
|
13
|
-
} else if (ref !== null && ref !== void 0) {
|
|
14
|
-
ref.current = value;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
function composeRefs(...refs) {
|
|
18
|
-
return (node) => refs.forEach((ref) => setRef(ref, node));
|
|
19
|
-
}
|
|
20
|
-
function useComposedRefs(...refs) {
|
|
21
|
-
return React.useCallback(composeRefs(...refs), refs);
|
|
22
|
-
}
|
|
23
|
-
const ColorPreview = styled.div`
|
|
24
|
-
border-radius: 50%;
|
|
25
|
-
width: 20px;
|
|
26
|
-
height: 20px;
|
|
27
|
-
margin-right: 10px;
|
|
28
|
-
background-color: ${(props) => props.color};
|
|
29
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
30
|
-
`;
|
|
31
|
-
const ColorPicker = styled(HexColorPicker)`
|
|
32
|
-
&& {
|
|
33
|
-
width: 100%;
|
|
34
|
-
aspect-ratio: 1.5;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.react-colorful__pointer {
|
|
38
|
-
width: ${({ theme }) => theme.spaces[3]};
|
|
39
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.react-colorful__saturation {
|
|
43
|
-
border-radius: ${({ theme }) => theme.spaces[1]};
|
|
44
|
-
border-bottom: none;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.react-colorful__hue {
|
|
48
|
-
border-radius: 10px;
|
|
49
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
50
|
-
margin-top: ${({ theme }) => theme.spaces[2]};
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
|
-
const ColorPickerToggle = styled(BaseButton)`
|
|
54
|
-
display: flex;
|
|
55
|
-
justify-content: space-between;
|
|
56
|
-
align-items: center;
|
|
57
|
-
|
|
58
|
-
svg {
|
|
59
|
-
width: ${({ theme }) => theme.spaces[2]};
|
|
60
|
-
height: ${({ theme }) => theme.spaces[2]};
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
svg > path {
|
|
64
|
-
fill: ${({ theme }) => theme.colors.neutral500};
|
|
65
|
-
justify-self: flex-end;
|
|
66
|
-
}
|
|
67
|
-
`;
|
|
68
|
-
const ColorPickerPopover = styled(Popover)`
|
|
69
|
-
padding: ${({ theme }) => theme.spaces[2]};
|
|
70
|
-
min-height: 270px;
|
|
71
|
-
`;
|
|
72
|
-
const ColorPickerInput = React.forwardRef(
|
|
73
|
-
({
|
|
74
|
-
attribute,
|
|
75
|
-
description,
|
|
76
|
-
disabled = false,
|
|
77
|
-
error,
|
|
78
|
-
intlLabel,
|
|
79
|
-
labelAction,
|
|
80
|
-
name,
|
|
81
|
-
onChange,
|
|
82
|
-
required = false,
|
|
83
|
-
value = ""
|
|
84
|
-
}, forwardedRef) => {
|
|
85
|
-
const [showColorPicker, setShowColorPicker] = React.useState(false);
|
|
86
|
-
const colorPickerButtonRef = React.useRef(null);
|
|
87
|
-
const { formatMessage } = useIntl();
|
|
88
|
-
const color = value || "#000000";
|
|
89
|
-
const handleBlur = (e) => {
|
|
90
|
-
e.preventDefault();
|
|
91
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
92
|
-
setShowColorPicker(false);
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
|
|
96
|
-
return /* @__PURE__ */ jsxDEV(
|
|
97
|
-
Field,
|
|
98
|
-
{
|
|
99
|
-
name,
|
|
100
|
-
id: name,
|
|
101
|
-
error,
|
|
102
|
-
hint: description && formatMessage(description),
|
|
103
|
-
required,
|
|
104
|
-
children: /* @__PURE__ */ jsxDEV(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
|
105
|
-
/* @__PURE__ */ jsxDEV(FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }, void 0, false, {
|
|
106
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
107
|
-
lineNumber: 138,
|
|
108
|
-
columnNumber: 11
|
|
109
|
-
}, globalThis),
|
|
110
|
-
/* @__PURE__ */ jsxDEV(
|
|
111
|
-
ColorPickerToggle,
|
|
112
|
-
{
|
|
113
|
-
ref: composedRefs,
|
|
114
|
-
"aria-label": formatMessage({
|
|
115
|
-
id: getTrad("color-picker.toggle.aria-label"),
|
|
116
|
-
defaultMessage: "Color picker toggle"
|
|
117
|
-
}),
|
|
118
|
-
"aria-controls": "color-picker-value",
|
|
119
|
-
"aria-haspopup": "dialog",
|
|
120
|
-
"aria-expanded": showColorPicker,
|
|
121
|
-
"aria-disabled": disabled,
|
|
122
|
-
disabled,
|
|
123
|
-
onClick: () => setShowColorPicker(!showColorPicker),
|
|
124
|
-
children: [
|
|
125
|
-
/* @__PURE__ */ jsxDEV(Flex, { children: [
|
|
126
|
-
/* @__PURE__ */ jsxDEV(ColorPreview, { color }, void 0, false, {
|
|
127
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
128
|
-
lineNumber: 153,
|
|
129
|
-
columnNumber: 15
|
|
130
|
-
}, globalThis),
|
|
131
|
-
/* @__PURE__ */ jsxDEV(
|
|
132
|
-
Typography,
|
|
133
|
-
{
|
|
134
|
-
style: { textTransform: "uppercase" },
|
|
135
|
-
textColor: value ? void 0 : "neutral600",
|
|
136
|
-
variant: "omega",
|
|
137
|
-
children: color
|
|
138
|
-
},
|
|
139
|
-
void 0,
|
|
140
|
-
false,
|
|
141
|
-
{
|
|
142
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
143
|
-
lineNumber: 154,
|
|
144
|
-
columnNumber: 15
|
|
145
|
-
},
|
|
146
|
-
globalThis
|
|
147
|
-
)
|
|
148
|
-
] }, void 0, true, {
|
|
149
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
150
|
-
lineNumber: 152,
|
|
151
|
-
columnNumber: 13
|
|
152
|
-
}, globalThis),
|
|
153
|
-
/* @__PURE__ */ jsxDEV(CarretDown, { "aria-hidden": true }, void 0, false, {
|
|
154
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
155
|
-
lineNumber: 162,
|
|
156
|
-
columnNumber: 13
|
|
157
|
-
}, globalThis)
|
|
158
|
-
]
|
|
159
|
-
},
|
|
160
|
-
void 0,
|
|
161
|
-
true,
|
|
162
|
-
{
|
|
163
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
164
|
-
lineNumber: 139,
|
|
165
|
-
columnNumber: 11
|
|
166
|
-
},
|
|
167
|
-
globalThis
|
|
168
|
-
),
|
|
169
|
-
showColorPicker && /* @__PURE__ */ jsxDEV(
|
|
170
|
-
ColorPickerPopover,
|
|
171
|
-
{
|
|
172
|
-
onBlur: handleBlur,
|
|
173
|
-
role: "dialog",
|
|
174
|
-
source: colorPickerButtonRef,
|
|
175
|
-
spacing: 4,
|
|
176
|
-
children: /* @__PURE__ */ jsxDEV(FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
|
|
177
|
-
/* @__PURE__ */ jsxDEV(
|
|
178
|
-
ColorPicker,
|
|
179
|
-
{
|
|
180
|
-
color,
|
|
181
|
-
onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
|
|
182
|
-
},
|
|
183
|
-
void 0,
|
|
184
|
-
false,
|
|
185
|
-
{
|
|
186
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
187
|
-
lineNumber: 172,
|
|
188
|
-
columnNumber: 17
|
|
189
|
-
},
|
|
190
|
-
globalThis
|
|
191
|
-
),
|
|
192
|
-
/* @__PURE__ */ jsxDEV(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
|
|
193
|
-
/* @__PURE__ */ jsxDEV(Box, { paddingRight: 2, children: /* @__PURE__ */ jsxDEV(Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
|
|
194
|
-
id: getTrad("color-picker.input.format"),
|
|
195
|
-
defaultMessage: "HEX"
|
|
196
|
-
}) }, void 0, false, {
|
|
197
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
198
|
-
lineNumber: 180,
|
|
199
|
-
columnNumber: 21
|
|
200
|
-
}, globalThis) }, void 0, false, {
|
|
201
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
202
|
-
lineNumber: 179,
|
|
203
|
-
columnNumber: 19
|
|
204
|
-
}, globalThis),
|
|
205
|
-
/* @__PURE__ */ jsxDEV(
|
|
206
|
-
FieldInput,
|
|
207
|
-
{
|
|
208
|
-
id: "color-picker-value",
|
|
209
|
-
"aria-label": formatMessage({
|
|
210
|
-
id: getTrad("color-picker.input.aria-label"),
|
|
211
|
-
defaultMessage: "Color picker input"
|
|
212
|
-
}),
|
|
213
|
-
style: { textTransform: "uppercase" },
|
|
214
|
-
value,
|
|
215
|
-
placeholder: "#000000",
|
|
216
|
-
onChange
|
|
217
|
-
},
|
|
218
|
-
void 0,
|
|
219
|
-
false,
|
|
220
|
-
{
|
|
221
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
222
|
-
lineNumber: 187,
|
|
223
|
-
columnNumber: 19
|
|
224
|
-
},
|
|
225
|
-
globalThis
|
|
226
|
-
)
|
|
227
|
-
] }, void 0, true, {
|
|
228
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
229
|
-
lineNumber: 178,
|
|
230
|
-
columnNumber: 17
|
|
231
|
-
}, globalThis)
|
|
232
|
-
] }, void 0, true, {
|
|
233
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
234
|
-
lineNumber: 171,
|
|
235
|
-
columnNumber: 15
|
|
236
|
-
}, globalThis)
|
|
237
|
-
},
|
|
238
|
-
void 0,
|
|
239
|
-
false,
|
|
240
|
-
{
|
|
241
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
242
|
-
lineNumber: 165,
|
|
243
|
-
columnNumber: 13
|
|
244
|
-
},
|
|
245
|
-
globalThis
|
|
246
|
-
),
|
|
247
|
-
/* @__PURE__ */ jsxDEV(FieldHint, {}, void 0, false, {
|
|
248
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
249
|
-
lineNumber: 202,
|
|
250
|
-
columnNumber: 11
|
|
251
|
-
}, globalThis),
|
|
252
|
-
/* @__PURE__ */ jsxDEV(FieldError, {}, void 0, false, {
|
|
253
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
254
|
-
lineNumber: 203,
|
|
255
|
-
columnNumber: 11
|
|
256
|
-
}, globalThis)
|
|
257
|
-
] }, void 0, true, {
|
|
258
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
259
|
-
lineNumber: 137,
|
|
260
|
-
columnNumber: 9
|
|
261
|
-
}, globalThis)
|
|
262
|
-
},
|
|
263
|
-
void 0,
|
|
264
|
-
false,
|
|
265
|
-
{
|
|
266
|
-
fileName: "/Users/marcroig/Documents/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
|
|
267
|
-
lineNumber: 129,
|
|
268
|
-
columnNumber: 7
|
|
269
|
-
},
|
|
270
|
-
globalThis
|
|
271
|
-
);
|
|
272
|
-
}
|
|
273
|
-
);
|
|
274
|
-
export {
|
|
275
|
-
ColorPickerInput
|
|
276
|
-
};
|
|
277
|
-
//# sourceMappingURL=ColorPickerInput-f3a9f863.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index-476267d4.js","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex, Icon } from '@strapi/design-system';\nimport { Paint } from '@strapi/icons';\nimport styled from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values */\n /* to stay consistent between themes */\n background-color: #f0f0ff; /* primary100 */\n border: 1px solid #d9d8ff; /* primary200 */\n\n svg > path {\n fill: #4945ff; /* primary600 */\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <Icon as={Paint} />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","import { prefixPluginTranslations } from '@strapi/helper-plugin';\n\nimport { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /**\n * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import(\n /* webpackChunkName: \"color-picker-input-component\" */ './components/ColorPickerInput'\n ).then((module) => ({ default: module.ColorPickerInput })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["styled","Flex","jsxDEV","Icon","Paint","this","module","prefixPluginTranslations"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index-e797ad4f.mjs","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex, Icon } from '@strapi/design-system';\nimport { Paint } from '@strapi/icons';\nimport styled from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values */\n /* to stay consistent between themes */\n background-color: #f0f0ff; /* primary100 */\n border: 1px solid #d9d8ff; /* primary200 */\n\n svg > path {\n fill: #4945ff; /* primary600 */\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <Icon as={Paint} />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","import { prefixPluginTranslations } from '@strapi/helper-plugin';\n\nimport { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /**\n * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import(\n /* webpackChunkName: \"color-picker-input-component\" */ './components/ColorPickerInput'\n ).then((module) => ({ default: module.ColorPickerInput })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["this"],"mappings":";;;;;;;;;;;;;;AAIA,MAAM,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,MAAM,kBAAkB,MAAM;AACnC,gCACG,SAAQ,EAAA,gBAAe,UAAS,YAAW,UAAS,OAAO,GAAG,QAAQ,GAAG,WAAS,MAAC,eAAW,MAC7F,UAAC,uBAAA,MAAA,EAAK,IAAI,MAAV,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,UAAiB,EADnB,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAA,UAAA;AAEJ;ACrBO,MAAM,WAAW;ACEjB,MAAM,UAAU,CAAC,OAAe,GAAG,QAAQ,IAAI,EAAE;ACKxD,MAAe,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb,SAAS,KAAU;AACjB,QAAI,aAAa,SAAS;AAAA,MACxB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,QACT,IAAI,QAAQ,oBAAoB;AAAA,QAChC,gBAAgB;AAAA,MAClB;AAAA,MACA,iBAAiB;AAAA,QACf,IAAI,QAAQ,0BAA0B;AAAA,QACtC,gBAAgB;AAAA,MAClB;AAAA,MACA,YAAY;AAAA,QACV,OAAO,YACL;AAAA;AAAA,UACyD;AAAA,QAAA,EACvD,KAAK,CAAC,YAAY,EAAE,SAAS,OAAO,mBAAmB;AAAA,MAC7D;AAAA,MACA,SAAS;AAAA,QACP,UAAU;AAAA,UACR;AAAA,YACE,WAAW;AAAA,cACT,IAAI,QAAQ,qCAAqC;AAAA,cACjD,gBAAgB;AAAA,YAClB;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,cAAc;AAAA,YACd,aAAa;AAAA,cACX,IAAI,QAAQ,iDAAiD;AAAA,cAC7D,gBAAgB;AAAA,YAClB;AAAA,UACF;AAAA,UACA;AAAA,YACE,cAAc;AAAA,cACZ,IAAI;AAAA,cACJ,gBAAgB;AAAA,YAClB;AAAA,YACA,OAAO;AAAA,cACL;AAAA,gBACE,MAAM;AAAA,gBACN,MAAM;AAAA,gBACN,WAAW;AAAA,kBACT,IAAI,QAAQ,6CAA6C;AAAA,kBACzD,gBAAgB;AAAA,gBAClB;AAAA,gBACA,aAAa;AAAA,kBACX,IAAI,QAAQ,yDAAyD;AAAA,kBACrE,gBAAgB;AAAA,gBAClB;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EACA,MAAM,cAAc,EAAE,WAAkC;AAChD,UAAA,gBAAgB,MAAM,QAAQ;AAAA,MAClC,QAAQ,IAAI,CAAC,WAAW;AACf,eAAA,qCAA+B,uBAAA,OAAA,EAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,mBAAA,EAAA,CAAA,GAAA,kBAAA,MAAA,OAAA,EACnC,KAAK,CAAC,EAAE,SAAS,WAAW;AACpB,iBAAA;AAAA,YACL,MAAM,yBAAyB,MAAM,QAAQ;AAAA,YAC7C;AAAA,UAAA;AAAA,QACF,CACD,EACA,MAAM,MAAM;AACJ,iBAAA;AAAA,YACL,MAAM,CAAC;AAAA,YACP;AAAA,UAAA;AAAA,QACF,CACD;AAAA,MAAA,CACJ;AAAA,IAAA;AAGI,WAAA,QAAQ,QAAQ,aAAa;AAAA,EACtC;AACF;"}
|