@sanity/color-input 4.0.0 → 4.0.1

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