@sanity/color-input 4.0.0 → 4.0.1-canary.0

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.
@@ -0,0 +1,1084 @@
1
+ "use strict";
2
+ var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), reactColor = require("react-color"), common = require("react-color/lib/components/common"), styledComponents = require("styled-components"), react = require("react"), color$1 = require("react-color/lib/helpers/color");
3
+ function _typeof(obj) {
4
+ "@babel/helpers - typeof";
5
+ return _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(obj2) {
6
+ return typeof obj2;
7
+ } : function(obj2) {
8
+ return obj2 && typeof Symbol == "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
9
+ }, _typeof(obj);
10
+ }
11
+ var trimLeft = /^\s+/, trimRight = /\s+$/;
12
+ function tinycolor(color2, opts) {
13
+ if (color2 = color2 || "", opts = opts || {}, color2 instanceof tinycolor)
14
+ return color2;
15
+ if (!(this instanceof tinycolor))
16
+ return new tinycolor(color2, opts);
17
+ var rgb = inputToRGB(color2);
18
+ this._originalInput = color2, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format, this._gradientType = opts.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = rgb.ok;
19
+ }
20
+ tinycolor.prototype = {
21
+ isDark: function() {
22
+ return this.getBrightness() < 128;
23
+ },
24
+ isLight: function() {
25
+ return !this.isDark();
26
+ },
27
+ isValid: function() {
28
+ return this._ok;
29
+ },
30
+ getOriginalInput: function() {
31
+ return this._originalInput;
32
+ },
33
+ getFormat: function() {
34
+ return this._format;
35
+ },
36
+ getAlpha: function() {
37
+ return this._a;
38
+ },
39
+ getBrightness: function() {
40
+ var rgb = this.toRgb();
41
+ return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
42
+ },
43
+ getLuminance: function() {
44
+ var rgb = this.toRgb(), RsRGB, GsRGB, BsRGB, R, G, B;
45
+ return RsRGB = rgb.r / 255, GsRGB = rgb.g / 255, BsRGB = rgb.b / 255, RsRGB <= 0.03928 ? R = RsRGB / 12.92 : R = Math.pow((RsRGB + 0.055) / 1.055, 2.4), GsRGB <= 0.03928 ? G = GsRGB / 12.92 : G = Math.pow((GsRGB + 0.055) / 1.055, 2.4), BsRGB <= 0.03928 ? B = BsRGB / 12.92 : B = Math.pow((BsRGB + 0.055) / 1.055, 2.4), 0.2126 * R + 0.7152 * G + 0.0722 * B;
46
+ },
47
+ setAlpha: function(value) {
48
+ return this._a = boundAlpha(value), this._roundA = Math.round(100 * this._a) / 100, this;
49
+ },
50
+ toHsv: function() {
51
+ var hsv = rgbToHsv(this._r, this._g, this._b);
52
+ return {
53
+ h: hsv.h * 360,
54
+ s: hsv.s,
55
+ v: hsv.v,
56
+ a: this._a
57
+ };
58
+ },
59
+ toHsvString: function() {
60
+ var hsv = rgbToHsv(this._r, this._g, this._b), h = Math.round(hsv.h * 360), s = Math.round(hsv.s * 100), v = Math.round(hsv.v * 100);
61
+ return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
62
+ },
63
+ toHsl: function() {
64
+ var hsl = rgbToHsl(this._r, this._g, this._b);
65
+ return {
66
+ h: hsl.h * 360,
67
+ s: hsl.s,
68
+ l: hsl.l,
69
+ a: this._a
70
+ };
71
+ },
72
+ toHslString: function() {
73
+ var hsl = rgbToHsl(this._r, this._g, this._b), h = Math.round(hsl.h * 360), s = Math.round(hsl.s * 100), l = Math.round(hsl.l * 100);
74
+ return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
75
+ },
76
+ toHex: function(allow3Char) {
77
+ return rgbToHex(this._r, this._g, this._b, allow3Char);
78
+ },
79
+ toHexString: function(allow3Char) {
80
+ return "#" + this.toHex(allow3Char);
81
+ },
82
+ toHex8: function(allow4Char) {
83
+ return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
84
+ },
85
+ toHex8String: function(allow4Char) {
86
+ return "#" + this.toHex8(allow4Char);
87
+ },
88
+ toRgb: function() {
89
+ return {
90
+ r: Math.round(this._r),
91
+ g: Math.round(this._g),
92
+ b: Math.round(this._b),
93
+ a: this._a
94
+ };
95
+ },
96
+ toRgbString: function() {
97
+ return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
98
+ },
99
+ toPercentageRgb: function() {
100
+ return {
101
+ r: Math.round(bound01(this._r, 255) * 100) + "%",
102
+ g: Math.round(bound01(this._g, 255) * 100) + "%",
103
+ b: Math.round(bound01(this._b, 255) * 100) + "%",
104
+ a: this._a
105
+ };
106
+ },
107
+ toPercentageRgbString: function() {
108
+ return this._a == 1 ? "rgb(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
109
+ },
110
+ toName: function() {
111
+ return this._a === 0 ? "transparent" : this._a < 1 ? !1 : hexNames[rgbToHex(this._r, this._g, this._b, !0)] || !1;
112
+ },
113
+ toFilter: function(secondColor) {
114
+ var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a), secondHex8String = hex8String, gradientType = this._gradientType ? "GradientType = 1, " : "";
115
+ if (secondColor) {
116
+ var s = tinycolor(secondColor);
117
+ secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
118
+ }
119
+ return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
120
+ },
121
+ toString: function(format) {
122
+ var formatSet = !!format;
123
+ format = format || this._format;
124
+ var formattedString = !1, hasAlpha = this._a < 1 && this._a >= 0, needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
125
+ return needsAlphaFormat ? format === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (format === "rgb" && (formattedString = this.toRgbString()), format === "prgb" && (formattedString = this.toPercentageRgbString()), (format === "hex" || format === "hex6") && (formattedString = this.toHexString()), format === "hex3" && (formattedString = this.toHexString(!0)), format === "hex4" && (formattedString = this.toHex8String(!0)), format === "hex8" && (formattedString = this.toHex8String()), format === "name" && (formattedString = this.toName()), format === "hsl" && (formattedString = this.toHslString()), format === "hsv" && (formattedString = this.toHsvString()), formattedString || this.toHexString());
126
+ },
127
+ clone: function() {
128
+ return tinycolor(this.toString());
129
+ },
130
+ _applyModification: function(fn, args) {
131
+ var color2 = fn.apply(null, [this].concat([].slice.call(args)));
132
+ return this._r = color2._r, this._g = color2._g, this._b = color2._b, this.setAlpha(color2._a), this;
133
+ },
134
+ lighten: function() {
135
+ return this._applyModification(_lighten, arguments);
136
+ },
137
+ brighten: function() {
138
+ return this._applyModification(_brighten, arguments);
139
+ },
140
+ darken: function() {
141
+ return this._applyModification(_darken, arguments);
142
+ },
143
+ desaturate: function() {
144
+ return this._applyModification(_desaturate, arguments);
145
+ },
146
+ saturate: function() {
147
+ return this._applyModification(_saturate, arguments);
148
+ },
149
+ greyscale: function() {
150
+ return this._applyModification(_greyscale, arguments);
151
+ },
152
+ spin: function() {
153
+ return this._applyModification(_spin, arguments);
154
+ },
155
+ _applyCombination: function(fn, args) {
156
+ return fn.apply(null, [this].concat([].slice.call(args)));
157
+ },
158
+ analogous: function() {
159
+ return this._applyCombination(_analogous, arguments);
160
+ },
161
+ complement: function() {
162
+ return this._applyCombination(_complement, arguments);
163
+ },
164
+ monochromatic: function() {
165
+ return this._applyCombination(_monochromatic, arguments);
166
+ },
167
+ splitcomplement: function() {
168
+ return this._applyCombination(_splitcomplement, arguments);
169
+ },
170
+ // Disabled until https://github.com/bgrins/TinyColor/issues/254
171
+ // polyad: function (number) {
172
+ // return this._applyCombination(polyad, [number]);
173
+ // },
174
+ triad: function() {
175
+ return this._applyCombination(polyad, [3]);
176
+ },
177
+ tetrad: function() {
178
+ return this._applyCombination(polyad, [4]);
179
+ }
180
+ };
181
+ tinycolor.fromRatio = function(color2, opts) {
182
+ if (_typeof(color2) == "object") {
183
+ var newColor = {};
184
+ for (var i in color2)
185
+ color2.hasOwnProperty(i) && (i === "a" ? newColor[i] = color2[i] : newColor[i] = convertToPercentage(color2[i]));
186
+ color2 = newColor;
187
+ }
188
+ return tinycolor(color2, opts);
189
+ };
190
+ function inputToRGB(color2) {
191
+ var rgb = {
192
+ r: 0,
193
+ g: 0,
194
+ b: 0
195
+ }, a = 1, s = null, v = null, l = null, ok = !1, format = !1;
196
+ return typeof color2 == "string" && (color2 = stringInputToObject(color2)), _typeof(color2) == "object" && (isValidCSSUnit(color2.r) && isValidCSSUnit(color2.g) && isValidCSSUnit(color2.b) ? (rgb = rgbToRgb(color2.r, color2.g, color2.b), ok = !0, format = String(color2.r).substr(-1) === "%" ? "prgb" : "rgb") : isValidCSSUnit(color2.h) && isValidCSSUnit(color2.s) && isValidCSSUnit(color2.v) ? (s = convertToPercentage(color2.s), v = convertToPercentage(color2.v), rgb = hsvToRgb(color2.h, s, v), ok = !0, format = "hsv") : isValidCSSUnit(color2.h) && isValidCSSUnit(color2.s) && isValidCSSUnit(color2.l) && (s = convertToPercentage(color2.s), l = convertToPercentage(color2.l), rgb = hslToRgb(color2.h, s, l), ok = !0, format = "hsl"), color2.hasOwnProperty("a") && (a = color2.a)), a = boundAlpha(a), {
197
+ ok,
198
+ format: color2.format || format,
199
+ r: Math.min(255, Math.max(rgb.r, 0)),
200
+ g: Math.min(255, Math.max(rgb.g, 0)),
201
+ b: Math.min(255, Math.max(rgb.b, 0)),
202
+ a
203
+ };
204
+ }
205
+ function rgbToRgb(r, g, b) {
206
+ return {
207
+ r: bound01(r, 255) * 255,
208
+ g: bound01(g, 255) * 255,
209
+ b: bound01(b, 255) * 255
210
+ };
211
+ }
212
+ function rgbToHsl(r, g, b) {
213
+ r = bound01(r, 255), g = bound01(g, 255), b = bound01(b, 255);
214
+ var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, l = (max + min) / 2;
215
+ if (max == min)
216
+ h = s = 0;
217
+ else {
218
+ var d = max - min;
219
+ switch (s = l > 0.5 ? d / (2 - max - min) : d / (max + min), max) {
220
+ case r:
221
+ h = (g - b) / d + (g < b ? 6 : 0);
222
+ break;
223
+ case g:
224
+ h = (b - r) / d + 2;
225
+ break;
226
+ case b:
227
+ h = (r - g) / d + 4;
228
+ break;
229
+ }
230
+ h /= 6;
231
+ }
232
+ return {
233
+ h,
234
+ s,
235
+ l
236
+ };
237
+ }
238
+ function hslToRgb(h, s, l) {
239
+ var r, g, b;
240
+ h = bound01(h, 360), s = bound01(s, 100), l = bound01(l, 100);
241
+ function hue2rgb(p2, q2, t) {
242
+ return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p2 + (q2 - p2) * 6 * t : t < 1 / 2 ? q2 : t < 2 / 3 ? p2 + (q2 - p2) * (2 / 3 - t) * 6 : p2;
243
+ }
244
+ if (s === 0)
245
+ r = g = b = l;
246
+ else {
247
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
248
+ r = hue2rgb(p, q, h + 1 / 3), g = hue2rgb(p, q, h), b = hue2rgb(p, q, h - 1 / 3);
249
+ }
250
+ return {
251
+ r: r * 255,
252
+ g: g * 255,
253
+ b: b * 255
254
+ };
255
+ }
256
+ function rgbToHsv(r, g, b) {
257
+ r = bound01(r, 255), g = bound01(g, 255), b = bound01(b, 255);
258
+ var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, v = max, d = max - min;
259
+ if (s = max === 0 ? 0 : d / max, max == min)
260
+ h = 0;
261
+ else {
262
+ switch (max) {
263
+ case r:
264
+ h = (g - b) / d + (g < b ? 6 : 0);
265
+ break;
266
+ case g:
267
+ h = (b - r) / d + 2;
268
+ break;
269
+ case b:
270
+ h = (r - g) / d + 4;
271
+ break;
272
+ }
273
+ h /= 6;
274
+ }
275
+ return {
276
+ h,
277
+ s,
278
+ v
279
+ };
280
+ }
281
+ function hsvToRgb(h, s, v) {
282
+ h = bound01(h, 360) * 6, s = bound01(s, 100), v = bound01(v, 100);
283
+ var i = Math.floor(h), f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod];
284
+ return {
285
+ r: r * 255,
286
+ g: g * 255,
287
+ b: b * 255
288
+ };
289
+ }
290
+ function rgbToHex(r, g, b, allow3Char) {
291
+ var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
292
+ return allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) ? hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) : hex.join("");
293
+ }
294
+ function rgbaToHex(r, g, b, a, allow4Char) {
295
+ var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
296
+ return allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1) ? hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0) : hex.join("");
297
+ }
298
+ function rgbaToArgbHex(r, g, b, a) {
299
+ var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
300
+ return hex.join("");
301
+ }
302
+ tinycolor.equals = function(color1, color2) {
303
+ return !color1 || !color2 ? !1 : tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
304
+ };
305
+ tinycolor.random = function() {
306
+ return tinycolor.fromRatio({
307
+ r: Math.random(),
308
+ g: Math.random(),
309
+ b: Math.random()
310
+ });
311
+ };
312
+ function _desaturate(color2, amount) {
313
+ amount = amount === 0 ? 0 : amount || 10;
314
+ var hsl = tinycolor(color2).toHsl();
315
+ return hsl.s -= amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
316
+ }
317
+ function _saturate(color2, amount) {
318
+ amount = amount === 0 ? 0 : amount || 10;
319
+ var hsl = tinycolor(color2).toHsl();
320
+ return hsl.s += amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
321
+ }
322
+ function _greyscale(color2) {
323
+ return tinycolor(color2).desaturate(100);
324
+ }
325
+ function _lighten(color2, amount) {
326
+ amount = amount === 0 ? 0 : amount || 10;
327
+ var hsl = tinycolor(color2).toHsl();
328
+ return hsl.l += amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
329
+ }
330
+ function _brighten(color2, amount) {
331
+ amount = amount === 0 ? 0 : amount || 10;
332
+ var rgb = tinycolor(color2).toRgb();
333
+ return rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100)))), rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100)))), rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100)))), tinycolor(rgb);
334
+ }
335
+ function _darken(color2, amount) {
336
+ amount = amount === 0 ? 0 : amount || 10;
337
+ var hsl = tinycolor(color2).toHsl();
338
+ return hsl.l -= amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
339
+ }
340
+ function _spin(color2, amount) {
341
+ var hsl = tinycolor(color2).toHsl(), hue = (hsl.h + amount) % 360;
342
+ return hsl.h = hue < 0 ? 360 + hue : hue, tinycolor(hsl);
343
+ }
344
+ function _complement(color2) {
345
+ var hsl = tinycolor(color2).toHsl();
346
+ return hsl.h = (hsl.h + 180) % 360, tinycolor(hsl);
347
+ }
348
+ function polyad(color2, number) {
349
+ if (isNaN(number) || number <= 0)
350
+ throw new Error("Argument to polyad must be a positive number");
351
+ for (var hsl = tinycolor(color2).toHsl(), result = [tinycolor(color2)], step = 360 / number, i = 1; i < number; i++)
352
+ result.push(tinycolor({
353
+ h: (hsl.h + i * step) % 360,
354
+ s: hsl.s,
355
+ l: hsl.l
356
+ }));
357
+ return result;
358
+ }
359
+ function _splitcomplement(color2) {
360
+ var hsl = tinycolor(color2).toHsl(), h = hsl.h;
361
+ return [tinycolor(color2), tinycolor({
362
+ h: (h + 72) % 360,
363
+ s: hsl.s,
364
+ l: hsl.l
365
+ }), tinycolor({
366
+ h: (h + 216) % 360,
367
+ s: hsl.s,
368
+ l: hsl.l
369
+ })];
370
+ }
371
+ function _analogous(color2, results, slices) {
372
+ results = results || 6, slices = slices || 30;
373
+ var hsl = tinycolor(color2).toHsl(), part = 360 / slices, ret = [tinycolor(color2)];
374
+ for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; )
375
+ hsl.h = (hsl.h + part) % 360, ret.push(tinycolor(hsl));
376
+ return ret;
377
+ }
378
+ function _monochromatic(color2, results) {
379
+ results = results || 6;
380
+ for (var hsv = tinycolor(color2).toHsv(), h = hsv.h, s = hsv.s, v = hsv.v, ret = [], modification = 1 / results; results--; )
381
+ ret.push(tinycolor({
382
+ h,
383
+ s,
384
+ v
385
+ })), v = (v + modification) % 1;
386
+ return ret;
387
+ }
388
+ tinycolor.mix = function(color1, color2, amount) {
389
+ amount = amount === 0 ? 0 : amount || 50;
390
+ var rgb1 = tinycolor(color1).toRgb(), rgb2 = tinycolor(color2).toRgb(), p = amount / 100, rgba = {
391
+ r: (rgb2.r - rgb1.r) * p + rgb1.r,
392
+ g: (rgb2.g - rgb1.g) * p + rgb1.g,
393
+ b: (rgb2.b - rgb1.b) * p + rgb1.b,
394
+ a: (rgb2.a - rgb1.a) * p + rgb1.a
395
+ };
396
+ return tinycolor(rgba);
397
+ };
398
+ tinycolor.readability = function(color1, color2) {
399
+ var c1 = tinycolor(color1), c2 = tinycolor(color2);
400
+ return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
401
+ };
402
+ tinycolor.isReadable = function(color1, color2, wcag2) {
403
+ var readability = tinycolor.readability(color1, color2), wcag2Parms, out;
404
+ switch (out = !1, wcag2Parms = validateWCAG2Parms(wcag2), wcag2Parms.level + wcag2Parms.size) {
405
+ case "AAsmall":
406
+ case "AAAlarge":
407
+ out = readability >= 4.5;
408
+ break;
409
+ case "AAlarge":
410
+ out = readability >= 3;
411
+ break;
412
+ case "AAAsmall":
413
+ out = readability >= 7;
414
+ break;
415
+ }
416
+ return out;
417
+ };
418
+ tinycolor.mostReadable = function(baseColor, colorList, args) {
419
+ var bestColor = null, bestScore = 0, readability, includeFallbackColors, level, size;
420
+ args = args || {}, includeFallbackColors = args.includeFallbackColors, level = args.level, size = args.size;
421
+ for (var i = 0; i < colorList.length; i++)
422
+ readability = tinycolor.readability(baseColor, colorList[i]), readability > bestScore && (bestScore = readability, bestColor = tinycolor(colorList[i]));
423
+ return tinycolor.isReadable(baseColor, bestColor, {
424
+ level,
425
+ size
426
+ }) || !includeFallbackColors ? bestColor : (args.includeFallbackColors = !1, tinycolor.mostReadable(baseColor, ["#fff", "#000"], args));
427
+ };
428
+ var names = tinycolor.names = {
429
+ aliceblue: "f0f8ff",
430
+ antiquewhite: "faebd7",
431
+ aqua: "0ff",
432
+ aquamarine: "7fffd4",
433
+ azure: "f0ffff",
434
+ beige: "f5f5dc",
435
+ bisque: "ffe4c4",
436
+ black: "000",
437
+ blanchedalmond: "ffebcd",
438
+ blue: "00f",
439
+ blueviolet: "8a2be2",
440
+ brown: "a52a2a",
441
+ burlywood: "deb887",
442
+ burntsienna: "ea7e5d",
443
+ cadetblue: "5f9ea0",
444
+ chartreuse: "7fff00",
445
+ chocolate: "d2691e",
446
+ coral: "ff7f50",
447
+ cornflowerblue: "6495ed",
448
+ cornsilk: "fff8dc",
449
+ crimson: "dc143c",
450
+ cyan: "0ff",
451
+ darkblue: "00008b",
452
+ darkcyan: "008b8b",
453
+ darkgoldenrod: "b8860b",
454
+ darkgray: "a9a9a9",
455
+ darkgreen: "006400",
456
+ darkgrey: "a9a9a9",
457
+ darkkhaki: "bdb76b",
458
+ darkmagenta: "8b008b",
459
+ darkolivegreen: "556b2f",
460
+ darkorange: "ff8c00",
461
+ darkorchid: "9932cc",
462
+ darkred: "8b0000",
463
+ darksalmon: "e9967a",
464
+ darkseagreen: "8fbc8f",
465
+ darkslateblue: "483d8b",
466
+ darkslategray: "2f4f4f",
467
+ darkslategrey: "2f4f4f",
468
+ darkturquoise: "00ced1",
469
+ darkviolet: "9400d3",
470
+ deeppink: "ff1493",
471
+ deepskyblue: "00bfff",
472
+ dimgray: "696969",
473
+ dimgrey: "696969",
474
+ dodgerblue: "1e90ff",
475
+ firebrick: "b22222",
476
+ floralwhite: "fffaf0",
477
+ forestgreen: "228b22",
478
+ fuchsia: "f0f",
479
+ gainsboro: "dcdcdc",
480
+ ghostwhite: "f8f8ff",
481
+ gold: "ffd700",
482
+ goldenrod: "daa520",
483
+ gray: "808080",
484
+ green: "008000",
485
+ greenyellow: "adff2f",
486
+ grey: "808080",
487
+ honeydew: "f0fff0",
488
+ hotpink: "ff69b4",
489
+ indianred: "cd5c5c",
490
+ indigo: "4b0082",
491
+ ivory: "fffff0",
492
+ khaki: "f0e68c",
493
+ lavender: "e6e6fa",
494
+ lavenderblush: "fff0f5",
495
+ lawngreen: "7cfc00",
496
+ lemonchiffon: "fffacd",
497
+ lightblue: "add8e6",
498
+ lightcoral: "f08080",
499
+ lightcyan: "e0ffff",
500
+ lightgoldenrodyellow: "fafad2",
501
+ lightgray: "d3d3d3",
502
+ lightgreen: "90ee90",
503
+ lightgrey: "d3d3d3",
504
+ lightpink: "ffb6c1",
505
+ lightsalmon: "ffa07a",
506
+ lightseagreen: "20b2aa",
507
+ lightskyblue: "87cefa",
508
+ lightslategray: "789",
509
+ lightslategrey: "789",
510
+ lightsteelblue: "b0c4de",
511
+ lightyellow: "ffffe0",
512
+ lime: "0f0",
513
+ limegreen: "32cd32",
514
+ linen: "faf0e6",
515
+ magenta: "f0f",
516
+ maroon: "800000",
517
+ mediumaquamarine: "66cdaa",
518
+ mediumblue: "0000cd",
519
+ mediumorchid: "ba55d3",
520
+ mediumpurple: "9370db",
521
+ mediumseagreen: "3cb371",
522
+ mediumslateblue: "7b68ee",
523
+ mediumspringgreen: "00fa9a",
524
+ mediumturquoise: "48d1cc",
525
+ mediumvioletred: "c71585",
526
+ midnightblue: "191970",
527
+ mintcream: "f5fffa",
528
+ mistyrose: "ffe4e1",
529
+ moccasin: "ffe4b5",
530
+ navajowhite: "ffdead",
531
+ navy: "000080",
532
+ oldlace: "fdf5e6",
533
+ olive: "808000",
534
+ olivedrab: "6b8e23",
535
+ orange: "ffa500",
536
+ orangered: "ff4500",
537
+ orchid: "da70d6",
538
+ palegoldenrod: "eee8aa",
539
+ palegreen: "98fb98",
540
+ paleturquoise: "afeeee",
541
+ palevioletred: "db7093",
542
+ papayawhip: "ffefd5",
543
+ peachpuff: "ffdab9",
544
+ peru: "cd853f",
545
+ pink: "ffc0cb",
546
+ plum: "dda0dd",
547
+ powderblue: "b0e0e6",
548
+ purple: "800080",
549
+ rebeccapurple: "663399",
550
+ red: "f00",
551
+ rosybrown: "bc8f8f",
552
+ royalblue: "4169e1",
553
+ saddlebrown: "8b4513",
554
+ salmon: "fa8072",
555
+ sandybrown: "f4a460",
556
+ seagreen: "2e8b57",
557
+ seashell: "fff5ee",
558
+ sienna: "a0522d",
559
+ silver: "c0c0c0",
560
+ skyblue: "87ceeb",
561
+ slateblue: "6a5acd",
562
+ slategray: "708090",
563
+ slategrey: "708090",
564
+ snow: "fffafa",
565
+ springgreen: "00ff7f",
566
+ steelblue: "4682b4",
567
+ tan: "d2b48c",
568
+ teal: "008080",
569
+ thistle: "d8bfd8",
570
+ tomato: "ff6347",
571
+ turquoise: "40e0d0",
572
+ violet: "ee82ee",
573
+ wheat: "f5deb3",
574
+ white: "fff",
575
+ whitesmoke: "f5f5f5",
576
+ yellow: "ff0",
577
+ yellowgreen: "9acd32"
578
+ }, hexNames = tinycolor.hexNames = flip(names);
579
+ function flip(o) {
580
+ var flipped = {};
581
+ for (var i in o)
582
+ o.hasOwnProperty(i) && (flipped[o[i]] = i);
583
+ return flipped;
584
+ }
585
+ function boundAlpha(a) {
586
+ return a = parseFloat(a), (isNaN(a) || a < 0 || a > 1) && (a = 1), a;
587
+ }
588
+ function bound01(n, max) {
589
+ isOnePointZero(n) && (n = "100%");
590
+ var processPercent = isPercentage(n);
591
+ return n = Math.min(max, Math.max(0, parseFloat(n))), processPercent && (n = parseInt(n * max, 10) / 100), Math.abs(n - max) < 1e-6 ? 1 : n % max / parseFloat(max);
592
+ }
593
+ function clamp01(val) {
594
+ return Math.min(1, Math.max(0, val));
595
+ }
596
+ function parseIntFromHex(val) {
597
+ return parseInt(val, 16);
598
+ }
599
+ function isOnePointZero(n) {
600
+ return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
601
+ }
602
+ function isPercentage(n) {
603
+ return typeof n == "string" && n.indexOf("%") != -1;
604
+ }
605
+ function pad2(c) {
606
+ return c.length == 1 ? "0" + c : "" + c;
607
+ }
608
+ function convertToPercentage(n) {
609
+ return n <= 1 && (n = n * 100 + "%"), n;
610
+ }
611
+ function convertDecimalToHex(d) {
612
+ return Math.round(parseFloat(d) * 255).toString(16);
613
+ }
614
+ function convertHexToDecimal(h) {
615
+ return parseIntFromHex(h) / 255;
616
+ }
617
+ var matchers = function() {
618
+ var CSS_INTEGER = "[-\\+]?\\d+%?", CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?", CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")", PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?", PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
619
+ return {
620
+ CSS_UNIT: new RegExp(CSS_UNIT),
621
+ rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
622
+ rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
623
+ hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
624
+ hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
625
+ hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
626
+ hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
627
+ hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
628
+ hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
629
+ hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
630
+ hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
631
+ };
632
+ }();
633
+ function isValidCSSUnit(color2) {
634
+ return !!matchers.CSS_UNIT.exec(color2);
635
+ }
636
+ function stringInputToObject(color2) {
637
+ color2 = color2.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
638
+ var named = !1;
639
+ if (names[color2])
640
+ color2 = names[color2], named = !0;
641
+ else if (color2 == "transparent")
642
+ return {
643
+ r: 0,
644
+ g: 0,
645
+ b: 0,
646
+ a: 0,
647
+ format: "name"
648
+ };
649
+ var match;
650
+ return (match = matchers.rgb.exec(color2)) ? {
651
+ r: match[1],
652
+ g: match[2],
653
+ b: match[3]
654
+ } : (match = matchers.rgba.exec(color2)) ? {
655
+ r: match[1],
656
+ g: match[2],
657
+ b: match[3],
658
+ a: match[4]
659
+ } : (match = matchers.hsl.exec(color2)) ? {
660
+ h: match[1],
661
+ s: match[2],
662
+ l: match[3]
663
+ } : (match = matchers.hsla.exec(color2)) ? {
664
+ h: match[1],
665
+ s: match[2],
666
+ l: match[3],
667
+ a: match[4]
668
+ } : (match = matchers.hsv.exec(color2)) ? {
669
+ h: match[1],
670
+ s: match[2],
671
+ v: match[3]
672
+ } : (match = matchers.hsva.exec(color2)) ? {
673
+ h: match[1],
674
+ s: match[2],
675
+ v: match[3],
676
+ a: match[4]
677
+ } : (match = matchers.hex8.exec(color2)) ? {
678
+ r: parseIntFromHex(match[1]),
679
+ g: parseIntFromHex(match[2]),
680
+ b: parseIntFromHex(match[3]),
681
+ a: convertHexToDecimal(match[4]),
682
+ format: named ? "name" : "hex8"
683
+ } : (match = matchers.hex6.exec(color2)) ? {
684
+ r: parseIntFromHex(match[1]),
685
+ g: parseIntFromHex(match[2]),
686
+ b: parseIntFromHex(match[3]),
687
+ format: named ? "name" : "hex"
688
+ } : (match = matchers.hex4.exec(color2)) ? {
689
+ r: parseIntFromHex(match[1] + "" + match[1]),
690
+ g: parseIntFromHex(match[2] + "" + match[2]),
691
+ b: parseIntFromHex(match[3] + "" + match[3]),
692
+ a: convertHexToDecimal(match[4] + "" + match[4]),
693
+ format: named ? "name" : "hex8"
694
+ } : (match = matchers.hex3.exec(color2)) ? {
695
+ r: parseIntFromHex(match[1] + "" + match[1]),
696
+ g: parseIntFromHex(match[2] + "" + match[2]),
697
+ b: parseIntFromHex(match[3] + "" + match[3]),
698
+ format: named ? "name" : "hex"
699
+ } : !1;
700
+ }
701
+ function validateWCAG2Parms(parms) {
702
+ var level, size;
703
+ return parms = parms || {
704
+ level: "AA",
705
+ size: "small"
706
+ }, level = (parms.level || "AA").toUpperCase(), size = (parms.size || "small").toLowerCase(), level !== "AA" && level !== "AAA" && (level = "AA"), size !== "small" && size !== "large" && (size = "small"), {
707
+ level,
708
+ size
709
+ };
710
+ }
711
+ const ColorListWrap = styledComponents.styled(ui.Flex)`
712
+ gap: 0.25em;
713
+ `, ColorBoxContainer = styledComponents.styled.div`
714
+ width: 2.1em;
715
+ height: 2.1em;
716
+ cursor: pointer;
717
+ position: relative;
718
+ overflow: hidden;
719
+ border-radius: 3px;
720
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')
721
+ left center #fff;
722
+ `, ColorBox$1 = styledComponents.styled.div`
723
+ border-radius: inherit;
724
+ box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);
725
+ content: '';
726
+ position: absolute;
727
+ inset: 0;
728
+ z-index: 1;
729
+ `, validateColors = (colors) => colors.reduce((cls, c) => {
730
+ const color2 = c.hex ? tinycolor(c.hex) : tinycolor(c);
731
+ return color2.isValid() && cls.push({
732
+ color: c,
733
+ backgroundColor: color2.toRgbString()
734
+ }), cls;
735
+ }, []), ColorList = react.memo(function({ colors, onChange }) {
736
+ return colors ? /* @__PURE__ */ jsxRuntime.jsx(ColorListWrap, { wrap: "wrap", children: validateColors(colors).map(({ color: color2, backgroundColor }, idx) => /* @__PURE__ */ jsxRuntime.jsx(
737
+ ColorBoxContainer,
738
+ {
739
+ onClick: () => {
740
+ onChange(color2);
741
+ },
742
+ children: /* @__PURE__ */ jsxRuntime.jsx(ColorBox$1, { style: { background: backgroundColor } })
743
+ },
744
+ `${backgroundColor}-${idx}`
745
+ )) }) : null;
746
+ }), ColorPickerFields = ({
747
+ onChange,
748
+ rgb,
749
+ hsl,
750
+ hex,
751
+ disableAlpha
752
+ }) => {
753
+ const { sanity: sanity2 } = ui.useTheme(), inputStyles = react.useMemo(
754
+ () => ({
755
+ input: {
756
+ width: "80%",
757
+ padding: "4px 10% 3px",
758
+ border: "none",
759
+ boxShadow: `inset 0 0 0 1px ${sanity2.color.input.default.enabled.border}`,
760
+ color: sanity2.color.input.default.enabled.fg,
761
+ backgroundColor: sanity2.color.input.default.enabled.bg,
762
+ fontSize: sanity2.fonts.text.sizes[0].fontSize,
763
+ textAlign: "center"
764
+ },
765
+ label: {
766
+ display: "block",
767
+ textAlign: "center",
768
+ fontSize: sanity2.fonts.label.sizes[0].fontSize,
769
+ color: sanity2.color.base.fg,
770
+ paddingTop: "3px",
771
+ paddingBottom: "4px",
772
+ textTransform: "capitalize"
773
+ }
774
+ }),
775
+ [sanity2]
776
+ ), handleChange = react.useCallback(
777
+ (data) => {
778
+ if ("hex" in data && data.hex && color$1.isValidHex(data.hex))
779
+ onChange({
780
+ hex: data.hex,
781
+ source: "hex"
782
+ });
783
+ else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b))
784
+ onChange({
785
+ r: Number(data.r) || rgb.r,
786
+ g: Number(data.g) || rgb.g,
787
+ b: Number(data.b) || rgb.b,
788
+ a: rgb.a,
789
+ source: "rgb"
790
+ });
791
+ else if (hsl && "a" in data && data.a) {
792
+ let alpha = Number(data.a);
793
+ alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
794
+ h: hsl.h,
795
+ s: hsl.s,
796
+ l: hsl.l,
797
+ a: alpha,
798
+ source: "hsl"
799
+ });
800
+ }
801
+ },
802
+ [onChange, hsl, rgb]
803
+ );
804
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
805
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
806
+ common.EditableInput,
807
+ {
808
+ style: inputStyles,
809
+ label: "hex",
810
+ value: hex?.replace("#", ""),
811
+ onChange: handleChange
812
+ }
813
+ ) }),
814
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
815
+ common.EditableInput,
816
+ {
817
+ style: inputStyles,
818
+ label: "r",
819
+ value: rgb?.r,
820
+ onChange: handleChange,
821
+ dragLabel: !0,
822
+ dragMax: 255
823
+ }
824
+ ) }),
825
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
826
+ common.EditableInput,
827
+ {
828
+ style: inputStyles,
829
+ label: "g",
830
+ value: rgb?.g,
831
+ onChange: handleChange,
832
+ dragLabel: !0,
833
+ dragMax: 255
834
+ }
835
+ ) }),
836
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
837
+ common.EditableInput,
838
+ {
839
+ style: inputStyles,
840
+ label: "b",
841
+ value: rgb?.b,
842
+ onChange: handleChange,
843
+ dragLabel: !0,
844
+ dragMax: 255
845
+ }
846
+ ) }),
847
+ !disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
848
+ common.EditableInput,
849
+ {
850
+ style: inputStyles,
851
+ label: "a",
852
+ value: Math.round((rgb?.a ?? 1) * 100),
853
+ onChange: handleChange,
854
+ dragLabel: !0,
855
+ dragMax: 100
856
+ }
857
+ ) })
858
+ ] });
859
+ }, ColorBox = styledComponents.styled(ui.Box)`
860
+ position: absolute;
861
+ top: 0;
862
+ left: 0;
863
+ width: 100%;
864
+ height: 100%;
865
+ `, ReadOnlyContainer = styledComponents.styled(ui.Flex)`
866
+ margin-top: 6rem;
867
+ background-color: var(--card-bg-color);
868
+ position: relative;
869
+ width: 100%;
870
+ `, ColorPickerInner = (props) => {
871
+ const {
872
+ width,
873
+ color: { rgb, hex, hsv, hsl },
874
+ onChange,
875
+ onUnset,
876
+ disableAlpha,
877
+ colorList,
878
+ readOnly
879
+ } = props;
880
+ return !hsl || !hsv ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
881
+ !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
882
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { overflow: "hidden", style: { position: "relative", height: "5em" }, children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, { onChange, hsl, hsv }) }),
883
+ /* @__PURE__ */ jsxRuntime.jsx(
884
+ ui.Card,
885
+ {
886
+ shadow: 1,
887
+ radius: 3,
888
+ overflow: "hidden",
889
+ style: { position: "relative", height: "10px" },
890
+ children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, { hsl, onChange: !readOnly && onChange })
891
+ }
892
+ ),
893
+ !disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(
894
+ ui.Card,
895
+ {
896
+ shadow: 1,
897
+ radius: 3,
898
+ overflow: "hidden",
899
+ style: { position: "relative", height: "10px", background: "#fff" },
900
+ children: /* @__PURE__ */ jsxRuntime.jsx(common.Alpha, { rgb, hsl, onChange })
901
+ }
902
+ )
903
+ ] }),
904
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
905
+ /* @__PURE__ */ jsxRuntime.jsxs(
906
+ ui.Card,
907
+ {
908
+ flex: 1,
909
+ radius: 2,
910
+ overflow: "hidden",
911
+ style: { position: "relative", minWidth: "4em", background: "#fff" },
912
+ children: [
913
+ /* @__PURE__ */ jsxRuntime.jsx(common.Checkboard, {}),
914
+ /* @__PURE__ */ jsxRuntime.jsx(
915
+ ColorBox,
916
+ {
917
+ style: {
918
+ backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`
919
+ }
920
+ }
921
+ ),
922
+ readOnly && /* @__PURE__ */ jsxRuntime.jsx(
923
+ ReadOnlyContainer,
924
+ {
925
+ padding: 2,
926
+ paddingBottom: 1,
927
+ sizing: "border",
928
+ justify: "space-between",
929
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, marginTop: 1, children: [
930
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, weight: "bold", children: hex }),
931
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 3, children: [
932
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
933
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "RGB: " }),
934
+ rgb?.r,
935
+ " ",
936
+ rgb?.g,
937
+ " ",
938
+ rgb?.b
939
+ ] }),
940
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
941
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "HSL: " }),
942
+ " ",
943
+ Math.round(hsl?.h ?? 0),
944
+ " ",
945
+ Math.round((hsl?.s ?? 0) * 100),
946
+ "% ",
947
+ Math.round((hsl?.l ?? 0) * 100),
948
+ "%"
949
+ ] })
950
+ ] })
951
+ ] })
952
+ }
953
+ )
954
+ ]
955
+ }
956
+ ),
957
+ !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "flex-start", marginLeft: 2, children: [
958
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { width: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx(
959
+ ColorPickerFields,
960
+ {
961
+ rgb,
962
+ hsl,
963
+ hex,
964
+ onChange,
965
+ disableAlpha
966
+ }
967
+ ) }),
968
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onUnset, title: "Delete color", icon: icons.TrashIcon, tone: "critical" }) })
969
+ ] })
970
+ ] }),
971
+ colorList && /* @__PURE__ */ jsxRuntime.jsx(ColorList, { colors: colorList, onChange })
972
+ ] }) }) });
973
+ }, ColorPicker = reactColor.CustomPicker(ColorPickerInner), ColorInput = react.lazy(() => Promise.resolve().then(function() {
974
+ return require("./ColorInput.js");
975
+ })), round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = sanity.defineType({
976
+ name: colorTypeName,
977
+ type: "object",
978
+ title: "Color",
979
+ components: { input: ColorInput },
980
+ fields: [
981
+ {
982
+ title: "Hex",
983
+ name: "hex",
984
+ type: "string"
985
+ },
986
+ {
987
+ title: "Alpha",
988
+ name: "alpha",
989
+ type: "number"
990
+ },
991
+ {
992
+ title: "Hue Saturation Lightness",
993
+ name: "hsl",
994
+ type: "hslaColor"
995
+ },
996
+ {
997
+ title: "Hue Saturation Value",
998
+ name: "hsv",
999
+ type: "hsvaColor"
1000
+ },
1001
+ {
1002
+ title: "Red Green Blue (rgb)",
1003
+ name: "rgb",
1004
+ type: "rgbaColor"
1005
+ }
1006
+ ],
1007
+ preview: {
1008
+ select: {
1009
+ title: "hex",
1010
+ alpha: "alpha",
1011
+ hex: "hex",
1012
+ hsl: "hsl"
1013
+ },
1014
+ prepare({
1015
+ title,
1016
+ hex,
1017
+ hsl,
1018
+ alpha
1019
+ }) {
1020
+ let subtitle = hex || "No color set";
1021
+ return hsl && (subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`), {
1022
+ title,
1023
+ subtitle,
1024
+ media: () => /* @__PURE__ */ jsxRuntime.jsx(
1025
+ "div",
1026
+ {
1027
+ style: {
1028
+ backgroundColor: hex ?? "#000",
1029
+ opacity: alpha ?? 1,
1030
+ position: "absolute",
1031
+ height: "100%",
1032
+ width: "100%",
1033
+ top: "0",
1034
+ left: "0"
1035
+ }
1036
+ }
1037
+ )
1038
+ };
1039
+ }
1040
+ }
1041
+ }), hslaColor = sanity.defineType({
1042
+ title: "Hue Saturation Lightness",
1043
+ name: "hslaColor",
1044
+ type: "object",
1045
+ fields: [
1046
+ { name: "h", type: "number", title: "Hue" },
1047
+ { name: "s", type: "number", title: "Saturation" },
1048
+ { name: "l", type: "number", title: "Lightness" },
1049
+ { name: "a", type: "number", title: "Alpha" }
1050
+ ]
1051
+ }), hsvaColor = sanity.defineType({
1052
+ title: "Hue Saturation Value",
1053
+ name: "hsvaColor",
1054
+ type: "object",
1055
+ fields: [
1056
+ { name: "h", type: "number", title: "Hue" },
1057
+ { name: "s", type: "number", title: "Saturation" },
1058
+ { name: "v", type: "number", title: "Value" },
1059
+ { name: "a", type: "number", title: "Alpha" }
1060
+ ]
1061
+ }), rgbaColor = sanity.defineType({
1062
+ title: "Red Green Blue (rgb)",
1063
+ name: "rgbaColor",
1064
+ type: "object",
1065
+ fields: [
1066
+ { name: "r", type: "number", title: "Red" },
1067
+ { name: "g", type: "number", title: "Green" },
1068
+ { name: "b", type: "number", title: "Blue" },
1069
+ { name: "a", type: "number", title: "Alpha" }
1070
+ ]
1071
+ }), colorInput = sanity.definePlugin({
1072
+ name: "@sanity/color-input",
1073
+ schema: {
1074
+ types: [hslaColor, hsvaColor, rgbaColor, color]
1075
+ }
1076
+ });
1077
+ exports.ColorInput = ColorInput;
1078
+ exports.ColorPicker = ColorPicker;
1079
+ exports.color = color;
1080
+ exports.colorInput = colorInput;
1081
+ exports.hslaColor = hslaColor;
1082
+ exports.hsvaColor = hsvaColor;
1083
+ exports.rgbaColor = rgbaColor;
1084
+ //# sourceMappingURL=index.js.map