trepur_components 2.3.4 → 2.3.5

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.
Files changed (113) hide show
  1. package/archive/theme.ts +1 -1
  2. package/lib/components/index.d.ts +1 -1
  3. package/lib/styles/base.css +1 -0
  4. package/package.json +1 -1
  5. package/postcss.config.js +8 -0
  6. package/src/components/index.ts +3 -3
  7. package/src/styles/base.css +1 -0
  8. package/tsconfig.json +1 -1
  9. package/storybook-build/assets/Accordion.stories-Cn994N1H.js +0 -103
  10. package/storybook-build/assets/AlertBar.stories-BkzNXFBh.js +0 -202
  11. package/storybook-build/assets/Avatar.stories-CpH6xVwM.js +0 -418
  12. package/storybook-build/assets/Color-6VNJS4EI-DQV2onvt.js +0 -1378
  13. package/storybook-build/assets/Colours-r29qjFlW.js +0 -324
  14. package/storybook-build/assets/DocsRenderer-NNNQARDV-OgWasCIs.js +0 -44
  15. package/storybook-build/assets/Introduction-Bs1PgnBZ.js +0 -40
  16. package/storybook-build/assets/WithTooltip-V3YHNWJZ-vi2V5TOO.js +0 -15
  17. package/storybook-build/assets/_commonjsHelpers-LQfde5yM.js +0 -35
  18. package/storybook-build/assets/axe-DnFZVv9V.js +0 -32561
  19. package/storybook-build/assets/chunk-EIRT5I3Z-DFD8udmD.js +0 -480
  20. package/storybook-build/assets/context-CIRBAiUz.js +0 -20
  21. package/storybook-build/assets/controls-DJSGrQKd.js +0 -23
  22. package/storybook-build/assets/entry-preview-DmlPV4-3.js +0 -41
  23. package/storybook-build/assets/entry-preview-docs-D46Drugi.js +0 -11861
  24. package/storybook-build/assets/formatter-SWP5E3XI-BWIasvKP.js +0 -14427
  25. package/storybook-build/assets/iframe-Dzzzanqi.js +0 -144
  26. package/storybook-build/assets/index-0FT4HXk-.js +0 -7222
  27. package/storybook-build/assets/index-B9Tccxv4.js +0 -107
  28. package/storybook-build/assets/index-BdOSk9or.js +0 -41
  29. package/storybook-build/assets/index-CU7cYjZD.js +0 -9604
  30. package/storybook-build/assets/index-Clz-aGG3.js +0 -39
  31. package/storybook-build/assets/index-CpyNLP69.js +0 -63
  32. package/storybook-build/assets/index-DM9bPmif.js +0 -319
  33. package/storybook-build/assets/index-ex9_VrIg.js +0 -3734
  34. package/storybook-build/assets/jsx-runtime-D2-sc1j1.js +0 -35
  35. package/storybook-build/assets/preview-3kSipVgK.js +0 -430
  36. package/storybook-build/assets/preview-B4rAxPmB.js +0 -27
  37. package/storybook-build/assets/preview-BMkwWyrh.js +0 -2920
  38. package/storybook-build/assets/preview-BeQelhbu.js +0 -204
  39. package/storybook-build/assets/preview-BiG-rflf.js +0 -2444
  40. package/storybook-build/assets/preview-BiYUJ7TP.js +0 -22
  41. package/storybook-build/assets/preview-C4ItOQzM.js +0 -34
  42. package/storybook-build/assets/preview-CWyhKACi.css +0 -886
  43. package/storybook-build/assets/preview-CtOV68TG.js +0 -10
  44. package/storybook-build/assets/preview-De9E9xaR.js +0 -140
  45. package/storybook-build/assets/preview-bL4x2zrN.js +0 -99
  46. package/storybook-build/assets/preview-gxqyGMHu.js +0 -323
  47. package/storybook-build/assets/react-18-B-gfo82w.js +0 -29
  48. package/storybook-build/assets/syntaxhighlighter-B5GMVT5T-DrY_Dc6-.js +0 -15
  49. package/storybook-build/favicon.svg +0 -7
  50. package/storybook-build/iframe.html +0 -458
  51. package/storybook-build/index.html +0 -163
  52. package/storybook-build/index.json +0 -1
  53. package/storybook-build/preview-stats.json +0 -172
  54. package/storybook-build/project.json +0 -1
  55. package/storybook-build/sb-addons/a11y-9/manager-bundle.js +0 -3
  56. package/storybook-build/sb-addons/a11y-9/manager-bundle.js.LEGAL.txt +0 -0
  57. package/storybook-build/sb-addons/essentials-actions-2/manager-bundle.js +0 -3
  58. package/storybook-build/sb-addons/essentials-actions-2/manager-bundle.js.LEGAL.txt +0 -0
  59. package/storybook-build/sb-addons/essentials-backgrounds-3/manager-bundle.js +0 -12
  60. package/storybook-build/sb-addons/essentials-backgrounds-3/manager-bundle.js.LEGAL.txt +0 -0
  61. package/storybook-build/sb-addons/essentials-controls-1/manager-bundle.js +0 -63
  62. package/storybook-build/sb-addons/essentials-controls-1/manager-bundle.js.LEGAL.txt +0 -18
  63. package/storybook-build/sb-addons/essentials-measure-6/manager-bundle.js +0 -3
  64. package/storybook-build/sb-addons/essentials-measure-6/manager-bundle.js.LEGAL.txt +0 -0
  65. package/storybook-build/sb-addons/essentials-outline-7/manager-bundle.js +0 -3
  66. package/storybook-build/sb-addons/essentials-outline-7/manager-bundle.js.LEGAL.txt +0 -0
  67. package/storybook-build/sb-addons/essentials-toolbars-5/manager-bundle.js +0 -3
  68. package/storybook-build/sb-addons/essentials-toolbars-5/manager-bundle.js.LEGAL.txt +0 -0
  69. package/storybook-build/sb-addons/essentials-viewport-4/manager-bundle.js +0 -3
  70. package/storybook-build/sb-addons/essentials-viewport-4/manager-bundle.js.LEGAL.txt +0 -0
  71. package/storybook-build/sb-addons/interactions-8/manager-bundle.js +0 -12
  72. package/storybook-build/sb-addons/interactions-8/manager-bundle.js.LEGAL.txt +0 -0
  73. package/storybook-build/sb-addons/links-0/manager-bundle.js +0 -3
  74. package/storybook-build/sb-addons/links-0/manager-bundle.js.LEGAL.txt +0 -0
  75. package/storybook-build/sb-addons/storybook-12/manager-bundle.js +0 -151
  76. package/storybook-build/sb-addons/storybook-12/manager-bundle.js.LEGAL.txt +0 -0
  77. package/storybook-build/sb-addons/storybook-react-i18next-11/manager-bundle.js +0 -3
  78. package/storybook-build/sb-addons/storybook-react-i18next-11/manager-bundle.js.LEGAL.txt +0 -0
  79. package/storybook-build/sb-addons/themes-10/register-bundle.js +0 -5
  80. package/storybook-build/sb-addons/themes-10/register-bundle.js.LEGAL.txt +0 -0
  81. package/storybook-build/sb-common-assets/fonts.css +0 -31
  82. package/storybook-build/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  83. package/storybook-build/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  84. package/storybook-build/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  85. package/storybook-build/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  86. package/storybook-build/sb-manager/WithTooltip-V3YHNWJZ-TRLNWEGW.js +0 -1
  87. package/storybook-build/sb-manager/chunk-4IYAVH3S.js +0 -348
  88. package/storybook-build/sb-manager/chunk-CXYKRFSY.js +0 -9
  89. package/storybook-build/sb-manager/chunk-KZYAAUOR.js +0 -406
  90. package/storybook-build/sb-manager/chunk-LVLAH4SI.js +0 -7
  91. package/storybook-build/sb-manager/chunk-ZEU7PDD3.js +0 -1
  92. package/storybook-build/sb-manager/formatter-SWP5E3XI-7BGIK6BL.js +0 -156
  93. package/storybook-build/sb-manager/globals-module-info.js +0 -1
  94. package/storybook-build/sb-manager/globals.js +0 -1
  95. package/storybook-build/sb-manager/index.js +0 -1
  96. package/storybook-build/sb-manager/runtime.js +0 -1
  97. package/storybook-build/sb-manager/syntaxhighlighter-B5GMVT5T-EA5ASEYD.js +0 -1
  98. package/storybook-build/sb-preview/globals.js +0 -1
  99. package/storybook-build/sb-preview/runtime.js +0 -112
  100. package/storybook-build/src/components/Accordion/Accordion.stories.d.ts +0 -94
  101. package/storybook-build/src/components/Accordion/index.d.ts +0 -9
  102. package/storybook-build/src/components/AlertBar/AlertBar.stories.d.ts +0 -162
  103. package/storybook-build/src/components/AlertBar/index.d.ts +0 -13
  104. package/storybook-build/src/components/Avatar/Avatar.stories.d.ts +0 -44
  105. package/storybook-build/src/components/Avatar/index.d.ts +0 -4
  106. package/storybook-build/src/components/index.d.ts +0 -7
  107. package/storybook-build/src/index.d.ts +0 -1
  108. package/storybook-build/src/utils/controls.d.ts +0 -36
  109. package/storybook-build/src/utils/matchMedia.d.ts +0 -2
  110. package/storybook-build/src/utils/screens.d.ts +0 -7
  111. package/storybook-build/src/utils/theme.d.ts +0 -3
  112. package/storybook-build/stories.json +0 -1
  113. package/storybook-build/styles/base.css +0 -116
@@ -1,1378 +0,0 @@
1
- import { n as newStyled, d as WithTooltip, T as TooltipNote, F as Form, I as Icons, g as getControlId } from "./index-CU7cYjZD.js";
2
- import { R as React, r as reactExports } from "./index-DM9bPmif.js";
3
- import { g as getDefaultExportFromCjs } from "./_commonjsHelpers-LQfde5yM.js";
4
- import { _ as _root, i as isObject_1, a as isSymbol_1 } from "./index-ex9_VrIg.js";
5
- import "./iframe-Dzzzanqi.js";
6
- import "../sb-preview/runtime.js";
7
- import "./chunk-EIRT5I3Z-DFD8udmD.js";
8
- import "./index-0FT4HXk-.js";
9
- import "./index-B9Tccxv4.js";
10
- import "./index-BdOSk9or.js";
11
- function u() {
12
- return (u = Object.assign || function(e) {
13
- for (var r = 1; r < arguments.length; r++) {
14
- var t = arguments[r];
15
- for (var n in t)
16
- Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
17
- }
18
- return e;
19
- }).apply(this, arguments);
20
- }
21
- function c(e, r) {
22
- if (null == e)
23
- return {};
24
- var t, n, o = {}, a = Object.keys(e);
25
- for (n = 0; n < a.length; n++)
26
- r.indexOf(t = a[n]) >= 0 || (o[t] = e[t]);
27
- return o;
28
- }
29
- function i(e) {
30
- var t = reactExports.useRef(e), n = reactExports.useRef(function(e2) {
31
- t.current && t.current(e2);
32
- });
33
- return t.current = e, n.current;
34
- }
35
- var s = function(e, r, t) {
36
- return void 0 === r && (r = 0), void 0 === t && (t = 1), e > t ? t : e < r ? r : e;
37
- }, f = function(e) {
38
- return "touches" in e;
39
- }, v = function(e) {
40
- return e && e.ownerDocument.defaultView || self;
41
- }, d = function(e, r, t) {
42
- var n = e.getBoundingClientRect(), o = f(r) ? function(e2, r2) {
43
- for (var t2 = 0; t2 < e2.length; t2++)
44
- if (e2[t2].identifier === r2)
45
- return e2[t2];
46
- return e2[0];
47
- }(r.touches, t) : r;
48
- return { left: s((o.pageX - (n.left + v(e).pageXOffset)) / n.width), top: s((o.pageY - (n.top + v(e).pageYOffset)) / n.height) };
49
- }, h = function(e) {
50
- !f(e) && e.preventDefault();
51
- }, m = React.memo(function(o) {
52
- var a = o.onMove, l = o.onKey, s2 = c(o, ["onMove", "onKey"]), m2 = reactExports.useRef(null), g2 = i(a), p2 = i(l), b2 = reactExports.useRef(null), _2 = reactExports.useRef(false), x2 = reactExports.useMemo(function() {
53
- var e = function(e2) {
54
- h(e2), (f(e2) ? e2.touches.length > 0 : e2.buttons > 0) && m2.current ? g2(d(m2.current, e2, b2.current)) : t(false);
55
- }, r = function() {
56
- return t(false);
57
- };
58
- function t(t2) {
59
- var n = _2.current, o2 = v(m2.current), a2 = t2 ? o2.addEventListener : o2.removeEventListener;
60
- a2(n ? "touchmove" : "mousemove", e), a2(n ? "touchend" : "mouseup", r);
61
- }
62
- return [function(e2) {
63
- var r2 = e2.nativeEvent, n = m2.current;
64
- if (n && (h(r2), !function(e3, r3) {
65
- return r3 && !f(e3);
66
- }(r2, _2.current) && n)) {
67
- if (f(r2)) {
68
- _2.current = true;
69
- var o2 = r2.changedTouches || [];
70
- o2.length && (b2.current = o2[0].identifier);
71
- }
72
- n.focus(), g2(d(n, r2, b2.current)), t(true);
73
- }
74
- }, function(e2) {
75
- var r2 = e2.which || e2.keyCode;
76
- r2 < 37 || r2 > 40 || (e2.preventDefault(), p2({ left: 39 === r2 ? 0.05 : 37 === r2 ? -0.05 : 0, top: 40 === r2 ? 0.05 : 38 === r2 ? -0.05 : 0 }));
77
- }, t];
78
- }, [p2, g2]), C2 = x2[0], E2 = x2[1], H2 = x2[2];
79
- return reactExports.useEffect(function() {
80
- return H2;
81
- }, [H2]), React.createElement("div", u({}, s2, { onTouchStart: C2, onMouseDown: C2, className: "react-colorful__interactive", ref: m2, onKeyDown: E2, tabIndex: 0, role: "slider" }));
82
- }), g = function(e) {
83
- return e.filter(Boolean).join(" ");
84
- }, p = function(r) {
85
- var t = r.color, n = r.left, o = r.top, a = void 0 === o ? 0.5 : o, l = g(["react-colorful__pointer", r.className]);
86
- return React.createElement("div", { className: l, style: { top: 100 * a + "%", left: 100 * n + "%" } }, React.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: t } }));
87
- }, b = function(e, r, t) {
88
- return void 0 === r && (r = 0), void 0 === t && (t = Math.pow(10, r)), Math.round(t * e) / t;
89
- }, _ = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, x = function(e) {
90
- return L(C(e));
91
- }, C = function(e) {
92
- return "#" === e[0] && (e = e.substring(1)), e.length < 6 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: 4 === e.length ? b(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : { r: parseInt(e.substring(0, 2), 16), g: parseInt(e.substring(2, 4), 16), b: parseInt(e.substring(4, 6), 16), a: 8 === e.length ? b(parseInt(e.substring(6, 8), 16) / 255, 2) : 1 };
93
- }, E = function(e, r) {
94
- return void 0 === r && (r = "deg"), Number(e) * (_[r] || 1);
95
- }, H = function(e) {
96
- var r = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
97
- return r ? N({ h: E(r[1], r[2]), s: Number(r[3]), l: Number(r[4]), a: void 0 === r[5] ? 1 : Number(r[5]) / (r[6] ? 100 : 1) }) : { h: 0, s: 0, v: 0, a: 1 };
98
- }, N = function(e) {
99
- var r = e.s, t = e.l;
100
- return { h: e.h, s: (r *= (t < 50 ? t : 100 - t) / 100) > 0 ? 2 * r / (t + r) * 100 : 0, v: t + r, a: e.a };
101
- }, w = function(e) {
102
- return K(I(e));
103
- }, y = function(e) {
104
- var r = e.s, t = e.v, n = e.a, o = (200 - r) * t / 100;
105
- return { h: b(e.h), s: b(o > 0 && o < 200 ? r * t / 100 / (o <= 100 ? o : 200 - o) * 100 : 0), l: b(o / 2), a: b(n, 2) };
106
- }, q = function(e) {
107
- var r = y(e);
108
- return "hsl(" + r.h + ", " + r.s + "%, " + r.l + "%)";
109
- }, k = function(e) {
110
- var r = y(e);
111
- return "hsla(" + r.h + ", " + r.s + "%, " + r.l + "%, " + r.a + ")";
112
- }, I = function(e) {
113
- var r = e.h, t = e.s, n = e.v, o = e.a;
114
- r = r / 360 * 6, t /= 100, n /= 100;
115
- var a = Math.floor(r), l = n * (1 - t), u2 = n * (1 - (r - a) * t), c2 = n * (1 - (1 - r + a) * t), i2 = a % 6;
116
- return { r: b(255 * [n, u2, l, l, c2, n][i2]), g: b(255 * [c2, n, n, u2, l, l][i2]), b: b(255 * [l, l, c2, n, n, u2][i2]), a: b(o, 2) };
117
- }, z = function(e) {
118
- var r = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
119
- return r ? L({ r: Number(r[1]) / (r[2] ? 100 / 255 : 1), g: Number(r[3]) / (r[4] ? 100 / 255 : 1), b: Number(r[5]) / (r[6] ? 100 / 255 : 1), a: void 0 === r[7] ? 1 : Number(r[7]) / (r[8] ? 100 : 1) }) : { h: 0, s: 0, v: 0, a: 1 };
120
- }, D = function(e) {
121
- var r = e.toString(16);
122
- return r.length < 2 ? "0" + r : r;
123
- }, K = function(e) {
124
- var r = e.r, t = e.g, n = e.b, o = e.a, a = o < 1 ? D(b(255 * o)) : "";
125
- return "#" + D(r) + D(t) + D(n) + a;
126
- }, L = function(e) {
127
- var r = e.r, t = e.g, n = e.b, o = e.a, a = Math.max(r, t, n), l = a - Math.min(r, t, n), u2 = l ? a === r ? (t - n) / l : a === t ? 2 + (n - r) / l : 4 + (r - t) / l : 0;
128
- return { h: b(60 * (u2 < 0 ? u2 + 6 : u2)), s: b(a ? l / a * 100 : 0), v: b(a / 255 * 100), a: o };
129
- }, S = React.memo(function(r) {
130
- var t = r.hue, n = r.onChange, o = g(["react-colorful__hue", r.className]);
131
- return React.createElement("div", { className: o }, React.createElement(m, { onMove: function(e) {
132
- n({ h: 360 * e.left });
133
- }, onKey: function(e) {
134
- n({ h: s(t + 360 * e.left, 0, 360) });
135
- }, "aria-label": "Hue", "aria-valuenow": b(t), "aria-valuemax": "360", "aria-valuemin": "0" }, React.createElement(p, { className: "react-colorful__hue-pointer", left: t / 360, color: q({ h: t, s: 100, v: 100, a: 1 }) })));
136
- }), T = React.memo(function(r) {
137
- var t = r.hsva, n = r.onChange, o = { backgroundColor: q({ h: t.h, s: 100, v: 100, a: 1 }) };
138
- return React.createElement("div", { className: "react-colorful__saturation", style: o }, React.createElement(m, { onMove: function(e) {
139
- n({ s: 100 * e.left, v: 100 - 100 * e.top });
140
- }, onKey: function(e) {
141
- n({ s: s(t.s + 100 * e.left, 0, 100), v: s(t.v - 100 * e.top, 0, 100) });
142
- }, "aria-label": "Color", "aria-valuetext": "Saturation " + b(t.s) + "%, Brightness " + b(t.v) + "%" }, React.createElement(p, { className: "react-colorful__saturation-pointer", top: 1 - t.v / 100, left: t.s / 100, color: q(t) })));
143
- }), F = function(e, r) {
144
- if (e === r)
145
- return true;
146
- for (var t in e)
147
- if (e[t] !== r[t])
148
- return false;
149
- return true;
150
- }, P = function(e, r) {
151
- return e.replace(/\s/g, "") === r.replace(/\s/g, "");
152
- }, X = function(e, r) {
153
- return e.toLowerCase() === r.toLowerCase() || F(C(e), C(r));
154
- };
155
- function Y(e, t, l) {
156
- var u2 = i(l), c2 = reactExports.useState(function() {
157
- return e.toHsva(t);
158
- }), s2 = c2[0], f2 = c2[1], v2 = reactExports.useRef({ color: t, hsva: s2 });
159
- reactExports.useEffect(function() {
160
- if (!e.equal(t, v2.current.color)) {
161
- var r = e.toHsva(t);
162
- v2.current = { hsva: r, color: t }, f2(r);
163
- }
164
- }, [t, e]), reactExports.useEffect(function() {
165
- var r;
166
- F(s2, v2.current.hsva) || e.equal(r = e.fromHsva(s2), v2.current.color) || (v2.current = { hsva: s2, color: r }, u2(r));
167
- }, [s2, e, u2]);
168
- var d2 = reactExports.useCallback(function(e2) {
169
- f2(function(r) {
170
- return Object.assign({}, r, e2);
171
- });
172
- }, []);
173
- return [s2, d2];
174
- }
175
- var V = "undefined" != typeof window ? reactExports.useLayoutEffect : reactExports.useEffect, $ = function() {
176
- return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0;
177
- }, J = /* @__PURE__ */ new Map(), Q = function(e) {
178
- V(function() {
179
- var r = e.current ? e.current.ownerDocument : document;
180
- if (void 0 !== r && !J.has(r)) {
181
- var t = r.createElement("style");
182
- t.innerHTML = `.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`, J.set(r, t);
183
- var n = $();
184
- n && t.setAttribute("nonce", n), r.head.appendChild(t);
185
- }
186
- }, []);
187
- }, U = function(t) {
188
- var n = t.className, o = t.colorModel, a = t.color, l = void 0 === a ? o.defaultColor : a, i2 = t.onChange, s2 = c(t, ["className", "colorModel", "color", "onChange"]), f2 = reactExports.useRef(null);
189
- Q(f2);
190
- var v2 = Y(o, l, i2), d2 = v2[0], h2 = v2[1], m2 = g(["react-colorful", n]);
191
- return React.createElement("div", u({}, s2, { ref: f2, className: m2 }), React.createElement(T, { hsva: d2, onChange: h2 }), React.createElement(S, { hue: d2.h, onChange: h2, className: "react-colorful__last-control" }));
192
- }, W = { defaultColor: "000", toHsva: x, fromHsva: function(e) {
193
- return w({ h: e.h, s: e.s, v: e.v, a: 1 });
194
- }, equal: X }, Z = function(r) {
195
- return React.createElement(U, u({}, r, { colorModel: W }));
196
- }, ee = function(r) {
197
- var t = r.className, n = r.hsva, o = r.onChange, a = { backgroundImage: "linear-gradient(90deg, " + k(Object.assign({}, n, { a: 0 })) + ", " + k(Object.assign({}, n, { a: 1 })) + ")" }, l = g(["react-colorful__alpha", t]), u2 = b(100 * n.a);
198
- return React.createElement("div", { className: l }, React.createElement("div", { className: "react-colorful__alpha-gradient", style: a }), React.createElement(m, { onMove: function(e) {
199
- o({ a: e.left });
200
- }, onKey: function(e) {
201
- o({ a: s(n.a + e.left) });
202
- }, "aria-label": "Alpha", "aria-valuetext": u2 + "%", "aria-valuenow": u2, "aria-valuemin": "0", "aria-valuemax": "100" }, React.createElement(p, { className: "react-colorful__alpha-pointer", left: n.a, color: k(n) })));
203
- }, re = function(t) {
204
- var n = t.className, o = t.colorModel, a = t.color, l = void 0 === a ? o.defaultColor : a, i2 = t.onChange, s2 = c(t, ["className", "colorModel", "color", "onChange"]), f2 = reactExports.useRef(null);
205
- Q(f2);
206
- var v2 = Y(o, l, i2), d2 = v2[0], h2 = v2[1], m2 = g(["react-colorful", n]);
207
- return React.createElement("div", u({}, s2, { ref: f2, className: m2 }), React.createElement(T, { hsva: d2, onChange: h2 }), React.createElement(S, { hue: d2.h, onChange: h2 }), React.createElement(ee, { hsva: d2, onChange: h2, className: "react-colorful__last-control" }));
208
- }, le = { defaultColor: "hsla(0, 0%, 0%, 1)", toHsva: H, fromHsva: k, equal: P }, ue = function(r) {
209
- return React.createElement(re, u({}, r, { colorModel: le }));
210
- }, Ee = { defaultColor: "rgba(0, 0, 0, 1)", toHsva: z, fromHsva: function(e) {
211
- var r = I(e);
212
- return "rgba(" + r.r + ", " + r.g + ", " + r.b + ", " + r.a + ")";
213
- }, equal: P }, He = function(r) {
214
- return React.createElement(re, u({}, r, { colorModel: Ee }));
215
- };
216
- var colorName = {
217
- "aliceblue": [240, 248, 255],
218
- "antiquewhite": [250, 235, 215],
219
- "aqua": [0, 255, 255],
220
- "aquamarine": [127, 255, 212],
221
- "azure": [240, 255, 255],
222
- "beige": [245, 245, 220],
223
- "bisque": [255, 228, 196],
224
- "black": [0, 0, 0],
225
- "blanchedalmond": [255, 235, 205],
226
- "blue": [0, 0, 255],
227
- "blueviolet": [138, 43, 226],
228
- "brown": [165, 42, 42],
229
- "burlywood": [222, 184, 135],
230
- "cadetblue": [95, 158, 160],
231
- "chartreuse": [127, 255, 0],
232
- "chocolate": [210, 105, 30],
233
- "coral": [255, 127, 80],
234
- "cornflowerblue": [100, 149, 237],
235
- "cornsilk": [255, 248, 220],
236
- "crimson": [220, 20, 60],
237
- "cyan": [0, 255, 255],
238
- "darkblue": [0, 0, 139],
239
- "darkcyan": [0, 139, 139],
240
- "darkgoldenrod": [184, 134, 11],
241
- "darkgray": [169, 169, 169],
242
- "darkgreen": [0, 100, 0],
243
- "darkgrey": [169, 169, 169],
244
- "darkkhaki": [189, 183, 107],
245
- "darkmagenta": [139, 0, 139],
246
- "darkolivegreen": [85, 107, 47],
247
- "darkorange": [255, 140, 0],
248
- "darkorchid": [153, 50, 204],
249
- "darkred": [139, 0, 0],
250
- "darksalmon": [233, 150, 122],
251
- "darkseagreen": [143, 188, 143],
252
- "darkslateblue": [72, 61, 139],
253
- "darkslategray": [47, 79, 79],
254
- "darkslategrey": [47, 79, 79],
255
- "darkturquoise": [0, 206, 209],
256
- "darkviolet": [148, 0, 211],
257
- "deeppink": [255, 20, 147],
258
- "deepskyblue": [0, 191, 255],
259
- "dimgray": [105, 105, 105],
260
- "dimgrey": [105, 105, 105],
261
- "dodgerblue": [30, 144, 255],
262
- "firebrick": [178, 34, 34],
263
- "floralwhite": [255, 250, 240],
264
- "forestgreen": [34, 139, 34],
265
- "fuchsia": [255, 0, 255],
266
- "gainsboro": [220, 220, 220],
267
- "ghostwhite": [248, 248, 255],
268
- "gold": [255, 215, 0],
269
- "goldenrod": [218, 165, 32],
270
- "gray": [128, 128, 128],
271
- "green": [0, 128, 0],
272
- "greenyellow": [173, 255, 47],
273
- "grey": [128, 128, 128],
274
- "honeydew": [240, 255, 240],
275
- "hotpink": [255, 105, 180],
276
- "indianred": [205, 92, 92],
277
- "indigo": [75, 0, 130],
278
- "ivory": [255, 255, 240],
279
- "khaki": [240, 230, 140],
280
- "lavender": [230, 230, 250],
281
- "lavenderblush": [255, 240, 245],
282
- "lawngreen": [124, 252, 0],
283
- "lemonchiffon": [255, 250, 205],
284
- "lightblue": [173, 216, 230],
285
- "lightcoral": [240, 128, 128],
286
- "lightcyan": [224, 255, 255],
287
- "lightgoldenrodyellow": [250, 250, 210],
288
- "lightgray": [211, 211, 211],
289
- "lightgreen": [144, 238, 144],
290
- "lightgrey": [211, 211, 211],
291
- "lightpink": [255, 182, 193],
292
- "lightsalmon": [255, 160, 122],
293
- "lightseagreen": [32, 178, 170],
294
- "lightskyblue": [135, 206, 250],
295
- "lightslategray": [119, 136, 153],
296
- "lightslategrey": [119, 136, 153],
297
- "lightsteelblue": [176, 196, 222],
298
- "lightyellow": [255, 255, 224],
299
- "lime": [0, 255, 0],
300
- "limegreen": [50, 205, 50],
301
- "linen": [250, 240, 230],
302
- "magenta": [255, 0, 255],
303
- "maroon": [128, 0, 0],
304
- "mediumaquamarine": [102, 205, 170],
305
- "mediumblue": [0, 0, 205],
306
- "mediumorchid": [186, 85, 211],
307
- "mediumpurple": [147, 112, 219],
308
- "mediumseagreen": [60, 179, 113],
309
- "mediumslateblue": [123, 104, 238],
310
- "mediumspringgreen": [0, 250, 154],
311
- "mediumturquoise": [72, 209, 204],
312
- "mediumvioletred": [199, 21, 133],
313
- "midnightblue": [25, 25, 112],
314
- "mintcream": [245, 255, 250],
315
- "mistyrose": [255, 228, 225],
316
- "moccasin": [255, 228, 181],
317
- "navajowhite": [255, 222, 173],
318
- "navy": [0, 0, 128],
319
- "oldlace": [253, 245, 230],
320
- "olive": [128, 128, 0],
321
- "olivedrab": [107, 142, 35],
322
- "orange": [255, 165, 0],
323
- "orangered": [255, 69, 0],
324
- "orchid": [218, 112, 214],
325
- "palegoldenrod": [238, 232, 170],
326
- "palegreen": [152, 251, 152],
327
- "paleturquoise": [175, 238, 238],
328
- "palevioletred": [219, 112, 147],
329
- "papayawhip": [255, 239, 213],
330
- "peachpuff": [255, 218, 185],
331
- "peru": [205, 133, 63],
332
- "pink": [255, 192, 203],
333
- "plum": [221, 160, 221],
334
- "powderblue": [176, 224, 230],
335
- "purple": [128, 0, 128],
336
- "rebeccapurple": [102, 51, 153],
337
- "red": [255, 0, 0],
338
- "rosybrown": [188, 143, 143],
339
- "royalblue": [65, 105, 225],
340
- "saddlebrown": [139, 69, 19],
341
- "salmon": [250, 128, 114],
342
- "sandybrown": [244, 164, 96],
343
- "seagreen": [46, 139, 87],
344
- "seashell": [255, 245, 238],
345
- "sienna": [160, 82, 45],
346
- "silver": [192, 192, 192],
347
- "skyblue": [135, 206, 235],
348
- "slateblue": [106, 90, 205],
349
- "slategray": [112, 128, 144],
350
- "slategrey": [112, 128, 144],
351
- "snow": [255, 250, 250],
352
- "springgreen": [0, 255, 127],
353
- "steelblue": [70, 130, 180],
354
- "tan": [210, 180, 140],
355
- "teal": [0, 128, 128],
356
- "thistle": [216, 191, 216],
357
- "tomato": [255, 99, 71],
358
- "turquoise": [64, 224, 208],
359
- "violet": [238, 130, 238],
360
- "wheat": [245, 222, 179],
361
- "white": [255, 255, 255],
362
- "whitesmoke": [245, 245, 245],
363
- "yellow": [255, 255, 0],
364
- "yellowgreen": [154, 205, 50]
365
- };
366
- const cssKeywords = colorName;
367
- const reverseKeywords = {};
368
- for (const key of Object.keys(cssKeywords)) {
369
- reverseKeywords[cssKeywords[key]] = key;
370
- }
371
- const convert$2 = {
372
- rgb: { channels: 3, labels: "rgb" },
373
- hsl: { channels: 3, labels: "hsl" },
374
- hsv: { channels: 3, labels: "hsv" },
375
- hwb: { channels: 3, labels: "hwb" },
376
- cmyk: { channels: 4, labels: "cmyk" },
377
- xyz: { channels: 3, labels: "xyz" },
378
- lab: { channels: 3, labels: "lab" },
379
- lch: { channels: 3, labels: "lch" },
380
- hex: { channels: 1, labels: ["hex"] },
381
- keyword: { channels: 1, labels: ["keyword"] },
382
- ansi16: { channels: 1, labels: ["ansi16"] },
383
- ansi256: { channels: 1, labels: ["ansi256"] },
384
- hcg: { channels: 3, labels: ["h", "c", "g"] },
385
- apple: { channels: 3, labels: ["r16", "g16", "b16"] },
386
- gray: { channels: 1, labels: ["gray"] }
387
- };
388
- var conversions$2 = convert$2;
389
- for (const model of Object.keys(convert$2)) {
390
- if (!("channels" in convert$2[model])) {
391
- throw new Error("missing channels property: " + model);
392
- }
393
- if (!("labels" in convert$2[model])) {
394
- throw new Error("missing channel labels property: " + model);
395
- }
396
- if (convert$2[model].labels.length !== convert$2[model].channels) {
397
- throw new Error("channel and label counts mismatch: " + model);
398
- }
399
- const { channels, labels } = convert$2[model];
400
- delete convert$2[model].channels;
401
- delete convert$2[model].labels;
402
- Object.defineProperty(convert$2[model], "channels", { value: channels });
403
- Object.defineProperty(convert$2[model], "labels", { value: labels });
404
- }
405
- convert$2.rgb.hsl = function(rgb) {
406
- const r = rgb[0] / 255;
407
- const g2 = rgb[1] / 255;
408
- const b2 = rgb[2] / 255;
409
- const min = Math.min(r, g2, b2);
410
- const max = Math.max(r, g2, b2);
411
- const delta = max - min;
412
- let h2;
413
- let s2;
414
- if (max === min) {
415
- h2 = 0;
416
- } else if (r === max) {
417
- h2 = (g2 - b2) / delta;
418
- } else if (g2 === max) {
419
- h2 = 2 + (b2 - r) / delta;
420
- } else if (b2 === max) {
421
- h2 = 4 + (r - g2) / delta;
422
- }
423
- h2 = Math.min(h2 * 60, 360);
424
- if (h2 < 0) {
425
- h2 += 360;
426
- }
427
- const l = (min + max) / 2;
428
- if (max === min) {
429
- s2 = 0;
430
- } else if (l <= 0.5) {
431
- s2 = delta / (max + min);
432
- } else {
433
- s2 = delta / (2 - max - min);
434
- }
435
- return [h2, s2 * 100, l * 100];
436
- };
437
- convert$2.rgb.hsv = function(rgb) {
438
- let rdif;
439
- let gdif;
440
- let bdif;
441
- let h2;
442
- let s2;
443
- const r = rgb[0] / 255;
444
- const g2 = rgb[1] / 255;
445
- const b2 = rgb[2] / 255;
446
- const v2 = Math.max(r, g2, b2);
447
- const diff = v2 - Math.min(r, g2, b2);
448
- const diffc = function(c2) {
449
- return (v2 - c2) / 6 / diff + 1 / 2;
450
- };
451
- if (diff === 0) {
452
- h2 = 0;
453
- s2 = 0;
454
- } else {
455
- s2 = diff / v2;
456
- rdif = diffc(r);
457
- gdif = diffc(g2);
458
- bdif = diffc(b2);
459
- if (r === v2) {
460
- h2 = bdif - gdif;
461
- } else if (g2 === v2) {
462
- h2 = 1 / 3 + rdif - bdif;
463
- } else if (b2 === v2) {
464
- h2 = 2 / 3 + gdif - rdif;
465
- }
466
- if (h2 < 0) {
467
- h2 += 1;
468
- } else if (h2 > 1) {
469
- h2 -= 1;
470
- }
471
- }
472
- return [
473
- h2 * 360,
474
- s2 * 100,
475
- v2 * 100
476
- ];
477
- };
478
- convert$2.rgb.hwb = function(rgb) {
479
- const r = rgb[0];
480
- const g2 = rgb[1];
481
- let b2 = rgb[2];
482
- const h2 = convert$2.rgb.hsl(rgb)[0];
483
- const w2 = 1 / 255 * Math.min(r, Math.min(g2, b2));
484
- b2 = 1 - 1 / 255 * Math.max(r, Math.max(g2, b2));
485
- return [h2, w2 * 100, b2 * 100];
486
- };
487
- convert$2.rgb.cmyk = function(rgb) {
488
- const r = rgb[0] / 255;
489
- const g2 = rgb[1] / 255;
490
- const b2 = rgb[2] / 255;
491
- const k2 = Math.min(1 - r, 1 - g2, 1 - b2);
492
- const c2 = (1 - r - k2) / (1 - k2) || 0;
493
- const m2 = (1 - g2 - k2) / (1 - k2) || 0;
494
- const y2 = (1 - b2 - k2) / (1 - k2) || 0;
495
- return [c2 * 100, m2 * 100, y2 * 100, k2 * 100];
496
- };
497
- function comparativeDistance(x2, y2) {
498
- return (x2[0] - y2[0]) ** 2 + (x2[1] - y2[1]) ** 2 + (x2[2] - y2[2]) ** 2;
499
- }
500
- convert$2.rgb.keyword = function(rgb) {
501
- const reversed = reverseKeywords[rgb];
502
- if (reversed) {
503
- return reversed;
504
- }
505
- let currentClosestDistance = Infinity;
506
- let currentClosestKeyword;
507
- for (const keyword of Object.keys(cssKeywords)) {
508
- const value = cssKeywords[keyword];
509
- const distance = comparativeDistance(rgb, value);
510
- if (distance < currentClosestDistance) {
511
- currentClosestDistance = distance;
512
- currentClosestKeyword = keyword;
513
- }
514
- }
515
- return currentClosestKeyword;
516
- };
517
- convert$2.keyword.rgb = function(keyword) {
518
- return cssKeywords[keyword];
519
- };
520
- convert$2.rgb.xyz = function(rgb) {
521
- let r = rgb[0] / 255;
522
- let g2 = rgb[1] / 255;
523
- let b2 = rgb[2] / 255;
524
- r = r > 0.04045 ? ((r + 0.055) / 1.055) ** 2.4 : r / 12.92;
525
- g2 = g2 > 0.04045 ? ((g2 + 0.055) / 1.055) ** 2.4 : g2 / 12.92;
526
- b2 = b2 > 0.04045 ? ((b2 + 0.055) / 1.055) ** 2.4 : b2 / 12.92;
527
- const x2 = r * 0.4124 + g2 * 0.3576 + b2 * 0.1805;
528
- const y2 = r * 0.2126 + g2 * 0.7152 + b2 * 0.0722;
529
- const z2 = r * 0.0193 + g2 * 0.1192 + b2 * 0.9505;
530
- return [x2 * 100, y2 * 100, z2 * 100];
531
- };
532
- convert$2.rgb.lab = function(rgb) {
533
- const xyz = convert$2.rgb.xyz(rgb);
534
- let x2 = xyz[0];
535
- let y2 = xyz[1];
536
- let z2 = xyz[2];
537
- x2 /= 95.047;
538
- y2 /= 100;
539
- z2 /= 108.883;
540
- x2 = x2 > 8856e-6 ? x2 ** (1 / 3) : 7.787 * x2 + 16 / 116;
541
- y2 = y2 > 8856e-6 ? y2 ** (1 / 3) : 7.787 * y2 + 16 / 116;
542
- z2 = z2 > 8856e-6 ? z2 ** (1 / 3) : 7.787 * z2 + 16 / 116;
543
- const l = 116 * y2 - 16;
544
- const a = 500 * (x2 - y2);
545
- const b2 = 200 * (y2 - z2);
546
- return [l, a, b2];
547
- };
548
- convert$2.hsl.rgb = function(hsl) {
549
- const h2 = hsl[0] / 360;
550
- const s2 = hsl[1] / 100;
551
- const l = hsl[2] / 100;
552
- let t2;
553
- let t3;
554
- let val;
555
- if (s2 === 0) {
556
- val = l * 255;
557
- return [val, val, val];
558
- }
559
- if (l < 0.5) {
560
- t2 = l * (1 + s2);
561
- } else {
562
- t2 = l + s2 - l * s2;
563
- }
564
- const t1 = 2 * l - t2;
565
- const rgb = [0, 0, 0];
566
- for (let i2 = 0; i2 < 3; i2++) {
567
- t3 = h2 + 1 / 3 * -(i2 - 1);
568
- if (t3 < 0) {
569
- t3++;
570
- }
571
- if (t3 > 1) {
572
- t3--;
573
- }
574
- if (6 * t3 < 1) {
575
- val = t1 + (t2 - t1) * 6 * t3;
576
- } else if (2 * t3 < 1) {
577
- val = t2;
578
- } else if (3 * t3 < 2) {
579
- val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
580
- } else {
581
- val = t1;
582
- }
583
- rgb[i2] = val * 255;
584
- }
585
- return rgb;
586
- };
587
- convert$2.hsl.hsv = function(hsl) {
588
- const h2 = hsl[0];
589
- let s2 = hsl[1] / 100;
590
- let l = hsl[2] / 100;
591
- let smin = s2;
592
- const lmin = Math.max(l, 0.01);
593
- l *= 2;
594
- s2 *= l <= 1 ? l : 2 - l;
595
- smin *= lmin <= 1 ? lmin : 2 - lmin;
596
- const v2 = (l + s2) / 2;
597
- const sv = l === 0 ? 2 * smin / (lmin + smin) : 2 * s2 / (l + s2);
598
- return [h2, sv * 100, v2 * 100];
599
- };
600
- convert$2.hsv.rgb = function(hsv) {
601
- const h2 = hsv[0] / 60;
602
- const s2 = hsv[1] / 100;
603
- let v2 = hsv[2] / 100;
604
- const hi = Math.floor(h2) % 6;
605
- const f2 = h2 - Math.floor(h2);
606
- const p2 = 255 * v2 * (1 - s2);
607
- const q2 = 255 * v2 * (1 - s2 * f2);
608
- const t = 255 * v2 * (1 - s2 * (1 - f2));
609
- v2 *= 255;
610
- switch (hi) {
611
- case 0:
612
- return [v2, t, p2];
613
- case 1:
614
- return [q2, v2, p2];
615
- case 2:
616
- return [p2, v2, t];
617
- case 3:
618
- return [p2, q2, v2];
619
- case 4:
620
- return [t, p2, v2];
621
- case 5:
622
- return [v2, p2, q2];
623
- }
624
- };
625
- convert$2.hsv.hsl = function(hsv) {
626
- const h2 = hsv[0];
627
- const s2 = hsv[1] / 100;
628
- const v2 = hsv[2] / 100;
629
- const vmin = Math.max(v2, 0.01);
630
- let sl;
631
- let l;
632
- l = (2 - s2) * v2;
633
- const lmin = (2 - s2) * vmin;
634
- sl = s2 * vmin;
635
- sl /= lmin <= 1 ? lmin : 2 - lmin;
636
- sl = sl || 0;
637
- l /= 2;
638
- return [h2, sl * 100, l * 100];
639
- };
640
- convert$2.hwb.rgb = function(hwb) {
641
- const h2 = hwb[0] / 360;
642
- let wh = hwb[1] / 100;
643
- let bl = hwb[2] / 100;
644
- const ratio = wh + bl;
645
- let f2;
646
- if (ratio > 1) {
647
- wh /= ratio;
648
- bl /= ratio;
649
- }
650
- const i2 = Math.floor(6 * h2);
651
- const v2 = 1 - bl;
652
- f2 = 6 * h2 - i2;
653
- if ((i2 & 1) !== 0) {
654
- f2 = 1 - f2;
655
- }
656
- const n = wh + f2 * (v2 - wh);
657
- let r;
658
- let g2;
659
- let b2;
660
- switch (i2) {
661
- default:
662
- case 6:
663
- case 0:
664
- r = v2;
665
- g2 = n;
666
- b2 = wh;
667
- break;
668
- case 1:
669
- r = n;
670
- g2 = v2;
671
- b2 = wh;
672
- break;
673
- case 2:
674
- r = wh;
675
- g2 = v2;
676
- b2 = n;
677
- break;
678
- case 3:
679
- r = wh;
680
- g2 = n;
681
- b2 = v2;
682
- break;
683
- case 4:
684
- r = n;
685
- g2 = wh;
686
- b2 = v2;
687
- break;
688
- case 5:
689
- r = v2;
690
- g2 = wh;
691
- b2 = n;
692
- break;
693
- }
694
- return [r * 255, g2 * 255, b2 * 255];
695
- };
696
- convert$2.cmyk.rgb = function(cmyk) {
697
- const c2 = cmyk[0] / 100;
698
- const m2 = cmyk[1] / 100;
699
- const y2 = cmyk[2] / 100;
700
- const k2 = cmyk[3] / 100;
701
- const r = 1 - Math.min(1, c2 * (1 - k2) + k2);
702
- const g2 = 1 - Math.min(1, m2 * (1 - k2) + k2);
703
- const b2 = 1 - Math.min(1, y2 * (1 - k2) + k2);
704
- return [r * 255, g2 * 255, b2 * 255];
705
- };
706
- convert$2.xyz.rgb = function(xyz) {
707
- const x2 = xyz[0] / 100;
708
- const y2 = xyz[1] / 100;
709
- const z2 = xyz[2] / 100;
710
- let r;
711
- let g2;
712
- let b2;
713
- r = x2 * 3.2406 + y2 * -1.5372 + z2 * -0.4986;
714
- g2 = x2 * -0.9689 + y2 * 1.8758 + z2 * 0.0415;
715
- b2 = x2 * 0.0557 + y2 * -0.204 + z2 * 1.057;
716
- r = r > 31308e-7 ? 1.055 * r ** (1 / 2.4) - 0.055 : r * 12.92;
717
- g2 = g2 > 31308e-7 ? 1.055 * g2 ** (1 / 2.4) - 0.055 : g2 * 12.92;
718
- b2 = b2 > 31308e-7 ? 1.055 * b2 ** (1 / 2.4) - 0.055 : b2 * 12.92;
719
- r = Math.min(Math.max(0, r), 1);
720
- g2 = Math.min(Math.max(0, g2), 1);
721
- b2 = Math.min(Math.max(0, b2), 1);
722
- return [r * 255, g2 * 255, b2 * 255];
723
- };
724
- convert$2.xyz.lab = function(xyz) {
725
- let x2 = xyz[0];
726
- let y2 = xyz[1];
727
- let z2 = xyz[2];
728
- x2 /= 95.047;
729
- y2 /= 100;
730
- z2 /= 108.883;
731
- x2 = x2 > 8856e-6 ? x2 ** (1 / 3) : 7.787 * x2 + 16 / 116;
732
- y2 = y2 > 8856e-6 ? y2 ** (1 / 3) : 7.787 * y2 + 16 / 116;
733
- z2 = z2 > 8856e-6 ? z2 ** (1 / 3) : 7.787 * z2 + 16 / 116;
734
- const l = 116 * y2 - 16;
735
- const a = 500 * (x2 - y2);
736
- const b2 = 200 * (y2 - z2);
737
- return [l, a, b2];
738
- };
739
- convert$2.lab.xyz = function(lab) {
740
- const l = lab[0];
741
- const a = lab[1];
742
- const b2 = lab[2];
743
- let x2;
744
- let y2;
745
- let z2;
746
- y2 = (l + 16) / 116;
747
- x2 = a / 500 + y2;
748
- z2 = y2 - b2 / 200;
749
- const y22 = y2 ** 3;
750
- const x22 = x2 ** 3;
751
- const z22 = z2 ** 3;
752
- y2 = y22 > 8856e-6 ? y22 : (y2 - 16 / 116) / 7.787;
753
- x2 = x22 > 8856e-6 ? x22 : (x2 - 16 / 116) / 7.787;
754
- z2 = z22 > 8856e-6 ? z22 : (z2 - 16 / 116) / 7.787;
755
- x2 *= 95.047;
756
- y2 *= 100;
757
- z2 *= 108.883;
758
- return [x2, y2, z2];
759
- };
760
- convert$2.lab.lch = function(lab) {
761
- const l = lab[0];
762
- const a = lab[1];
763
- const b2 = lab[2];
764
- let h2;
765
- const hr = Math.atan2(b2, a);
766
- h2 = hr * 360 / 2 / Math.PI;
767
- if (h2 < 0) {
768
- h2 += 360;
769
- }
770
- const c2 = Math.sqrt(a * a + b2 * b2);
771
- return [l, c2, h2];
772
- };
773
- convert$2.lch.lab = function(lch) {
774
- const l = lch[0];
775
- const c2 = lch[1];
776
- const h2 = lch[2];
777
- const hr = h2 / 360 * 2 * Math.PI;
778
- const a = c2 * Math.cos(hr);
779
- const b2 = c2 * Math.sin(hr);
780
- return [l, a, b2];
781
- };
782
- convert$2.rgb.ansi16 = function(args, saturation = null) {
783
- const [r, g2, b2] = args;
784
- let value = saturation === null ? convert$2.rgb.hsv(args)[2] : saturation;
785
- value = Math.round(value / 50);
786
- if (value === 0) {
787
- return 30;
788
- }
789
- let ansi = 30 + (Math.round(b2 / 255) << 2 | Math.round(g2 / 255) << 1 | Math.round(r / 255));
790
- if (value === 2) {
791
- ansi += 60;
792
- }
793
- return ansi;
794
- };
795
- convert$2.hsv.ansi16 = function(args) {
796
- return convert$2.rgb.ansi16(convert$2.hsv.rgb(args), args[2]);
797
- };
798
- convert$2.rgb.ansi256 = function(args) {
799
- const r = args[0];
800
- const g2 = args[1];
801
- const b2 = args[2];
802
- if (r === g2 && g2 === b2) {
803
- if (r < 8) {
804
- return 16;
805
- }
806
- if (r > 248) {
807
- return 231;
808
- }
809
- return Math.round((r - 8) / 247 * 24) + 232;
810
- }
811
- const ansi = 16 + 36 * Math.round(r / 255 * 5) + 6 * Math.round(g2 / 255 * 5) + Math.round(b2 / 255 * 5);
812
- return ansi;
813
- };
814
- convert$2.ansi16.rgb = function(args) {
815
- let color = args % 10;
816
- if (color === 0 || color === 7) {
817
- if (args > 50) {
818
- color += 3.5;
819
- }
820
- color = color / 10.5 * 255;
821
- return [color, color, color];
822
- }
823
- const mult = (~~(args > 50) + 1) * 0.5;
824
- const r = (color & 1) * mult * 255;
825
- const g2 = (color >> 1 & 1) * mult * 255;
826
- const b2 = (color >> 2 & 1) * mult * 255;
827
- return [r, g2, b2];
828
- };
829
- convert$2.ansi256.rgb = function(args) {
830
- if (args >= 232) {
831
- const c2 = (args - 232) * 10 + 8;
832
- return [c2, c2, c2];
833
- }
834
- args -= 16;
835
- let rem;
836
- const r = Math.floor(args / 36) / 5 * 255;
837
- const g2 = Math.floor((rem = args % 36) / 6) / 5 * 255;
838
- const b2 = rem % 6 / 5 * 255;
839
- return [r, g2, b2];
840
- };
841
- convert$2.rgb.hex = function(args) {
842
- const integer = ((Math.round(args[0]) & 255) << 16) + ((Math.round(args[1]) & 255) << 8) + (Math.round(args[2]) & 255);
843
- const string = integer.toString(16).toUpperCase();
844
- return "000000".substring(string.length) + string;
845
- };
846
- convert$2.hex.rgb = function(args) {
847
- const match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
848
- if (!match) {
849
- return [0, 0, 0];
850
- }
851
- let colorString = match[0];
852
- if (match[0].length === 3) {
853
- colorString = colorString.split("").map((char) => {
854
- return char + char;
855
- }).join("");
856
- }
857
- const integer = parseInt(colorString, 16);
858
- const r = integer >> 16 & 255;
859
- const g2 = integer >> 8 & 255;
860
- const b2 = integer & 255;
861
- return [r, g2, b2];
862
- };
863
- convert$2.rgb.hcg = function(rgb) {
864
- const r = rgb[0] / 255;
865
- const g2 = rgb[1] / 255;
866
- const b2 = rgb[2] / 255;
867
- const max = Math.max(Math.max(r, g2), b2);
868
- const min = Math.min(Math.min(r, g2), b2);
869
- const chroma = max - min;
870
- let grayscale;
871
- let hue;
872
- if (chroma < 1) {
873
- grayscale = min / (1 - chroma);
874
- } else {
875
- grayscale = 0;
876
- }
877
- if (chroma <= 0) {
878
- hue = 0;
879
- } else if (max === r) {
880
- hue = (g2 - b2) / chroma % 6;
881
- } else if (max === g2) {
882
- hue = 2 + (b2 - r) / chroma;
883
- } else {
884
- hue = 4 + (r - g2) / chroma;
885
- }
886
- hue /= 6;
887
- hue %= 1;
888
- return [hue * 360, chroma * 100, grayscale * 100];
889
- };
890
- convert$2.hsl.hcg = function(hsl) {
891
- const s2 = hsl[1] / 100;
892
- const l = hsl[2] / 100;
893
- const c2 = l < 0.5 ? 2 * s2 * l : 2 * s2 * (1 - l);
894
- let f2 = 0;
895
- if (c2 < 1) {
896
- f2 = (l - 0.5 * c2) / (1 - c2);
897
- }
898
- return [hsl[0], c2 * 100, f2 * 100];
899
- };
900
- convert$2.hsv.hcg = function(hsv) {
901
- const s2 = hsv[1] / 100;
902
- const v2 = hsv[2] / 100;
903
- const c2 = s2 * v2;
904
- let f2 = 0;
905
- if (c2 < 1) {
906
- f2 = (v2 - c2) / (1 - c2);
907
- }
908
- return [hsv[0], c2 * 100, f2 * 100];
909
- };
910
- convert$2.hcg.rgb = function(hcg) {
911
- const h2 = hcg[0] / 360;
912
- const c2 = hcg[1] / 100;
913
- const g2 = hcg[2] / 100;
914
- if (c2 === 0) {
915
- return [g2 * 255, g2 * 255, g2 * 255];
916
- }
917
- const pure = [0, 0, 0];
918
- const hi = h2 % 1 * 6;
919
- const v2 = hi % 1;
920
- const w2 = 1 - v2;
921
- let mg = 0;
922
- switch (Math.floor(hi)) {
923
- case 0:
924
- pure[0] = 1;
925
- pure[1] = v2;
926
- pure[2] = 0;
927
- break;
928
- case 1:
929
- pure[0] = w2;
930
- pure[1] = 1;
931
- pure[2] = 0;
932
- break;
933
- case 2:
934
- pure[0] = 0;
935
- pure[1] = 1;
936
- pure[2] = v2;
937
- break;
938
- case 3:
939
- pure[0] = 0;
940
- pure[1] = w2;
941
- pure[2] = 1;
942
- break;
943
- case 4:
944
- pure[0] = v2;
945
- pure[1] = 0;
946
- pure[2] = 1;
947
- break;
948
- default:
949
- pure[0] = 1;
950
- pure[1] = 0;
951
- pure[2] = w2;
952
- }
953
- mg = (1 - c2) * g2;
954
- return [
955
- (c2 * pure[0] + mg) * 255,
956
- (c2 * pure[1] + mg) * 255,
957
- (c2 * pure[2] + mg) * 255
958
- ];
959
- };
960
- convert$2.hcg.hsv = function(hcg) {
961
- const c2 = hcg[1] / 100;
962
- const g2 = hcg[2] / 100;
963
- const v2 = c2 + g2 * (1 - c2);
964
- let f2 = 0;
965
- if (v2 > 0) {
966
- f2 = c2 / v2;
967
- }
968
- return [hcg[0], f2 * 100, v2 * 100];
969
- };
970
- convert$2.hcg.hsl = function(hcg) {
971
- const c2 = hcg[1] / 100;
972
- const g2 = hcg[2] / 100;
973
- const l = g2 * (1 - c2) + 0.5 * c2;
974
- let s2 = 0;
975
- if (l > 0 && l < 0.5) {
976
- s2 = c2 / (2 * l);
977
- } else if (l >= 0.5 && l < 1) {
978
- s2 = c2 / (2 * (1 - l));
979
- }
980
- return [hcg[0], s2 * 100, l * 100];
981
- };
982
- convert$2.hcg.hwb = function(hcg) {
983
- const c2 = hcg[1] / 100;
984
- const g2 = hcg[2] / 100;
985
- const v2 = c2 + g2 * (1 - c2);
986
- return [hcg[0], (v2 - c2) * 100, (1 - v2) * 100];
987
- };
988
- convert$2.hwb.hcg = function(hwb) {
989
- const w2 = hwb[1] / 100;
990
- const b2 = hwb[2] / 100;
991
- const v2 = 1 - b2;
992
- const c2 = v2 - w2;
993
- let g2 = 0;
994
- if (c2 < 1) {
995
- g2 = (v2 - c2) / (1 - c2);
996
- }
997
- return [hwb[0], c2 * 100, g2 * 100];
998
- };
999
- convert$2.apple.rgb = function(apple) {
1000
- return [apple[0] / 65535 * 255, apple[1] / 65535 * 255, apple[2] / 65535 * 255];
1001
- };
1002
- convert$2.rgb.apple = function(rgb) {
1003
- return [rgb[0] / 255 * 65535, rgb[1] / 255 * 65535, rgb[2] / 255 * 65535];
1004
- };
1005
- convert$2.gray.rgb = function(args) {
1006
- return [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255];
1007
- };
1008
- convert$2.gray.hsl = function(args) {
1009
- return [0, 0, args[0]];
1010
- };
1011
- convert$2.gray.hsv = convert$2.gray.hsl;
1012
- convert$2.gray.hwb = function(gray) {
1013
- return [0, 100, gray[0]];
1014
- };
1015
- convert$2.gray.cmyk = function(gray) {
1016
- return [0, 0, 0, gray[0]];
1017
- };
1018
- convert$2.gray.lab = function(gray) {
1019
- return [gray[0], 0, 0];
1020
- };
1021
- convert$2.gray.hex = function(gray) {
1022
- const val = Math.round(gray[0] / 100 * 255) & 255;
1023
- const integer = (val << 16) + (val << 8) + val;
1024
- const string = integer.toString(16).toUpperCase();
1025
- return "000000".substring(string.length) + string;
1026
- };
1027
- convert$2.rgb.gray = function(rgb) {
1028
- const val = (rgb[0] + rgb[1] + rgb[2]) / 3;
1029
- return [val / 255 * 100];
1030
- };
1031
- const conversions$1 = conversions$2;
1032
- function buildGraph() {
1033
- const graph = {};
1034
- const models2 = Object.keys(conversions$1);
1035
- for (let len = models2.length, i2 = 0; i2 < len; i2++) {
1036
- graph[models2[i2]] = {
1037
- // http://jsperf.com/1-vs-infinity
1038
- // micro-opt, but this is simple.
1039
- distance: -1,
1040
- parent: null
1041
- };
1042
- }
1043
- return graph;
1044
- }
1045
- function deriveBFS(fromModel) {
1046
- const graph = buildGraph();
1047
- const queue = [fromModel];
1048
- graph[fromModel].distance = 0;
1049
- while (queue.length) {
1050
- const current = queue.pop();
1051
- const adjacents = Object.keys(conversions$1[current]);
1052
- for (let len = adjacents.length, i2 = 0; i2 < len; i2++) {
1053
- const adjacent = adjacents[i2];
1054
- const node = graph[adjacent];
1055
- if (node.distance === -1) {
1056
- node.distance = graph[current].distance + 1;
1057
- node.parent = current;
1058
- queue.unshift(adjacent);
1059
- }
1060
- }
1061
- }
1062
- return graph;
1063
- }
1064
- function link(from, to) {
1065
- return function(args) {
1066
- return to(from(args));
1067
- };
1068
- }
1069
- function wrapConversion(toModel, graph) {
1070
- const path = [graph[toModel].parent, toModel];
1071
- let fn = conversions$1[graph[toModel].parent][toModel];
1072
- let cur = graph[toModel].parent;
1073
- while (graph[cur].parent) {
1074
- path.unshift(graph[cur].parent);
1075
- fn = link(conversions$1[graph[cur].parent][cur], fn);
1076
- cur = graph[cur].parent;
1077
- }
1078
- fn.conversion = path;
1079
- return fn;
1080
- }
1081
- var route$1 = function(fromModel) {
1082
- const graph = deriveBFS(fromModel);
1083
- const conversion = {};
1084
- const models2 = Object.keys(graph);
1085
- for (let len = models2.length, i2 = 0; i2 < len; i2++) {
1086
- const toModel = models2[i2];
1087
- const node = graph[toModel];
1088
- if (node.parent === null) {
1089
- continue;
1090
- }
1091
- conversion[toModel] = wrapConversion(toModel, graph);
1092
- }
1093
- return conversion;
1094
- };
1095
- const conversions = conversions$2;
1096
- const route = route$1;
1097
- const convert = {};
1098
- const models = Object.keys(conversions);
1099
- function wrapRaw(fn) {
1100
- const wrappedFn = function(...args) {
1101
- const arg0 = args[0];
1102
- if (arg0 === void 0 || arg0 === null) {
1103
- return arg0;
1104
- }
1105
- if (arg0.length > 1) {
1106
- args = arg0;
1107
- }
1108
- return fn(args);
1109
- };
1110
- if ("conversion" in fn) {
1111
- wrappedFn.conversion = fn.conversion;
1112
- }
1113
- return wrappedFn;
1114
- }
1115
- function wrapRounded(fn) {
1116
- const wrappedFn = function(...args) {
1117
- const arg0 = args[0];
1118
- if (arg0 === void 0 || arg0 === null) {
1119
- return arg0;
1120
- }
1121
- if (arg0.length > 1) {
1122
- args = arg0;
1123
- }
1124
- const result = fn(args);
1125
- if (typeof result === "object") {
1126
- for (let len = result.length, i2 = 0; i2 < len; i2++) {
1127
- result[i2] = Math.round(result[i2]);
1128
- }
1129
- }
1130
- return result;
1131
- };
1132
- if ("conversion" in fn) {
1133
- wrappedFn.conversion = fn.conversion;
1134
- }
1135
- return wrappedFn;
1136
- }
1137
- models.forEach((fromModel) => {
1138
- convert[fromModel] = {};
1139
- Object.defineProperty(convert[fromModel], "channels", { value: conversions[fromModel].channels });
1140
- Object.defineProperty(convert[fromModel], "labels", { value: conversions[fromModel].labels });
1141
- const routes = route(fromModel);
1142
- const routeModels = Object.keys(routes);
1143
- routeModels.forEach((toModel) => {
1144
- const fn = routes[toModel];
1145
- convert[fromModel][toModel] = wrapRounded(fn);
1146
- convert[fromModel][toModel].raw = wrapRaw(fn);
1147
- });
1148
- });
1149
- var colorConvert = convert;
1150
- const convert$1 = /* @__PURE__ */ getDefaultExportFromCjs(colorConvert);
1151
- var root = _root;
1152
- var now$1 = function() {
1153
- return root.Date.now();
1154
- };
1155
- var now_1 = now$1;
1156
- var reWhitespace = /\s/;
1157
- function trimmedEndIndex$1(string) {
1158
- var index = string.length;
1159
- while (index-- && reWhitespace.test(string.charAt(index))) {
1160
- }
1161
- return index;
1162
- }
1163
- var _trimmedEndIndex = trimmedEndIndex$1;
1164
- var trimmedEndIndex = _trimmedEndIndex;
1165
- var reTrimStart = /^\s+/;
1166
- function baseTrim$1(string) {
1167
- return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
1168
- }
1169
- var _baseTrim = baseTrim$1;
1170
- var baseTrim = _baseTrim, isObject$2 = isObject_1, isSymbol = isSymbol_1;
1171
- var NAN = 0 / 0;
1172
- var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
1173
- var reIsBinary = /^0b[01]+$/i;
1174
- var reIsOctal = /^0o[0-7]+$/i;
1175
- var freeParseInt = parseInt;
1176
- function toNumber$1(value) {
1177
- if (typeof value == "number") {
1178
- return value;
1179
- }
1180
- if (isSymbol(value)) {
1181
- return NAN;
1182
- }
1183
- if (isObject$2(value)) {
1184
- var other = typeof value.valueOf == "function" ? value.valueOf() : value;
1185
- value = isObject$2(other) ? other + "" : other;
1186
- }
1187
- if (typeof value != "string") {
1188
- return value === 0 ? value : +value;
1189
- }
1190
- value = baseTrim(value);
1191
- var isBinary = reIsBinary.test(value);
1192
- return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
1193
- }
1194
- var toNumber_1 = toNumber$1;
1195
- var isObject$1 = isObject_1, now = now_1, toNumber = toNumber_1;
1196
- var FUNC_ERROR_TEXT$1 = "Expected a function";
1197
- var nativeMax = Math.max, nativeMin = Math.min;
1198
- function debounce$1(func, wait, options) {
1199
- var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
1200
- if (typeof func != "function") {
1201
- throw new TypeError(FUNC_ERROR_TEXT$1);
1202
- }
1203
- wait = toNumber(wait) || 0;
1204
- if (isObject$1(options)) {
1205
- leading = !!options.leading;
1206
- maxing = "maxWait" in options;
1207
- maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
1208
- trailing = "trailing" in options ? !!options.trailing : trailing;
1209
- }
1210
- function invokeFunc(time) {
1211
- var args = lastArgs, thisArg = lastThis;
1212
- lastArgs = lastThis = void 0;
1213
- lastInvokeTime = time;
1214
- result = func.apply(thisArg, args);
1215
- return result;
1216
- }
1217
- function leadingEdge(time) {
1218
- lastInvokeTime = time;
1219
- timerId = setTimeout(timerExpired, wait);
1220
- return leading ? invokeFunc(time) : result;
1221
- }
1222
- function remainingWait(time) {
1223
- var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
1224
- return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
1225
- }
1226
- function shouldInvoke(time) {
1227
- var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
1228
- return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
1229
- }
1230
- function timerExpired() {
1231
- var time = now();
1232
- if (shouldInvoke(time)) {
1233
- return trailingEdge(time);
1234
- }
1235
- timerId = setTimeout(timerExpired, remainingWait(time));
1236
- }
1237
- function trailingEdge(time) {
1238
- timerId = void 0;
1239
- if (trailing && lastArgs) {
1240
- return invokeFunc(time);
1241
- }
1242
- lastArgs = lastThis = void 0;
1243
- return result;
1244
- }
1245
- function cancel() {
1246
- if (timerId !== void 0) {
1247
- clearTimeout(timerId);
1248
- }
1249
- lastInvokeTime = 0;
1250
- lastArgs = lastCallTime = lastThis = timerId = void 0;
1251
- }
1252
- function flush() {
1253
- return timerId === void 0 ? result : trailingEdge(now());
1254
- }
1255
- function debounced() {
1256
- var time = now(), isInvoking = shouldInvoke(time);
1257
- lastArgs = arguments;
1258
- lastThis = this;
1259
- lastCallTime = time;
1260
- if (isInvoking) {
1261
- if (timerId === void 0) {
1262
- return leadingEdge(lastCallTime);
1263
- }
1264
- if (maxing) {
1265
- clearTimeout(timerId);
1266
- timerId = setTimeout(timerExpired, wait);
1267
- return invokeFunc(lastCallTime);
1268
- }
1269
- }
1270
- if (timerId === void 0) {
1271
- timerId = setTimeout(timerExpired, wait);
1272
- }
1273
- return result;
1274
- }
1275
- debounced.cancel = cancel;
1276
- debounced.flush = flush;
1277
- return debounced;
1278
- }
1279
- var debounce_1 = debounce$1;
1280
- var debounce = debounce_1, isObject = isObject_1;
1281
- var FUNC_ERROR_TEXT = "Expected a function";
1282
- function throttle(func, wait, options) {
1283
- var leading = true, trailing = true;
1284
- if (typeof func != "function") {
1285
- throw new TypeError(FUNC_ERROR_TEXT);
1286
- }
1287
- if (isObject(options)) {
1288
- leading = "leading" in options ? !!options.leading : leading;
1289
- trailing = "trailing" in options ? !!options.trailing : trailing;
1290
- }
1291
- return debounce(func, wait, {
1292
- "leading": leading,
1293
- "maxWait": wait,
1294
- "trailing": trailing
1295
- });
1296
- }
1297
- var throttle_1 = throttle;
1298
- const throttle$1 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
1299
- var Wrapper = newStyled.div({ position: "relative", maxWidth: 250 }), PickerTooltip = newStyled(WithTooltip)({ position: "absolute", zIndex: 1, top: 4, left: 4 }), TooltipContent = newStyled.div({ width: 200, margin: 5, ".react-colorful__saturation": { borderRadius: "4px 4px 0 0" }, ".react-colorful__hue": { boxShadow: "inset 0 0 0 1px rgb(0 0 0 / 5%)" }, ".react-colorful__last-control": { borderRadius: "0 0 4px 4px" } }), Note = newStyled(TooltipNote)(({ theme }) => ({ fontFamily: theme.typography.fonts.base })), Swatches = newStyled.div({ display: "grid", gridTemplateColumns: "repeat(9, 16px)", gap: 6, padding: 3, marginTop: 5, width: 200 }), SwatchColor = newStyled.div(({ theme, active }) => ({ width: 16, height: 16, boxShadow: active ? `${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px` : `${theme.appBorderColor} 0 0 0 1px inset`, borderRadius: theme.appBorderRadius })), swatchBackground = `url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`, Swatch = ({ value, active, onClick, style, ...props }) => {
1300
- let backgroundImage = `linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(#fff, #fff)`;
1301
- return React.createElement(SwatchColor, { ...props, active, onClick, style: { ...style, backgroundImage } });
1302
- }, Input = newStyled(Form.Input)(({ theme }) => ({ width: "100%", paddingLeft: 30, paddingRight: 30, boxSizing: "border-box", fontFamily: theme.typography.fonts.base })), ToggleIcon = newStyled(Icons)(({ theme }) => ({ position: "absolute", zIndex: 1, top: 6, right: 7, width: 20, height: 20, padding: 4, boxSizing: "border-box", cursor: "pointer", color: theme.input.color })), ColorSpace = ((ColorSpace2) => (ColorSpace2.RGB = "rgb", ColorSpace2.HSL = "hsl", ColorSpace2.HEX = "hex", ColorSpace2))(ColorSpace || {}), COLOR_SPACES = Object.values(ColorSpace), COLOR_REGEXP = /\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/, RGB_REGEXP = /^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i, HSL_REGEXP = /^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i, HEX_REGEXP = /^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i, SHORTHEX_REGEXP = /^\s*#?([0-9a-f]{3})\s*$/i, ColorPicker = { hex: Z, rgb: He, hsl: ue }, fallbackColor = { hex: "transparent", rgb: "rgba(0, 0, 0, 0)", hsl: "hsla(0, 0%, 0%, 0)" }, stringToArgs = (value) => {
1303
- let match = value == null ? void 0 : value.match(COLOR_REGEXP);
1304
- if (!match)
1305
- return [0, 0, 0, 1];
1306
- let [, x2, y2, z2, a = 1] = match;
1307
- return [x2, y2, z2, a].map(Number);
1308
- }, parseValue = (value) => {
1309
- if (!value)
1310
- return;
1311
- let valid = true;
1312
- if (RGB_REGEXP.test(value)) {
1313
- let [r, g2, b2, a] = stringToArgs(value), [h2, s2, l] = convert$1.rgb.hsl([r, g2, b2]) || [0, 0, 0];
1314
- return { valid, value, keyword: convert$1.rgb.keyword([r, g2, b2]), colorSpace: "rgb", rgb: value, hsl: `hsla(${h2}, ${s2}%, ${l}%, ${a})`, hex: `#${convert$1.rgb.hex([r, g2, b2]).toLowerCase()}` };
1315
- }
1316
- if (HSL_REGEXP.test(value)) {
1317
- let [h2, s2, l, a] = stringToArgs(value), [r, g2, b2] = convert$1.hsl.rgb([h2, s2, l]) || [0, 0, 0];
1318
- return { valid, value, keyword: convert$1.hsl.keyword([h2, s2, l]), colorSpace: "hsl", rgb: `rgba(${r}, ${g2}, ${b2}, ${a})`, hsl: value, hex: `#${convert$1.hsl.hex([h2, s2, l]).toLowerCase()}` };
1319
- }
1320
- let plain = value.replace("#", ""), rgb = convert$1.keyword.rgb(plain) || convert$1.hex.rgb(plain), hsl = convert$1.rgb.hsl(rgb), mapped = value;
1321
- if (/[^#a-f0-9]/i.test(value) ? mapped = plain : HEX_REGEXP.test(value) && (mapped = `#${plain}`), mapped.startsWith("#"))
1322
- valid = HEX_REGEXP.test(mapped);
1323
- else
1324
- try {
1325
- convert$1.keyword.hex(mapped);
1326
- } catch {
1327
- valid = false;
1328
- }
1329
- return { valid, value: mapped, keyword: convert$1.rgb.keyword(rgb), colorSpace: "hex", rgb: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`, hsl: `hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, 1)`, hex: mapped };
1330
- }, getRealValue = (value, color, colorSpace) => {
1331
- if (!value || !(color == null ? void 0 : color.valid))
1332
- return fallbackColor[colorSpace];
1333
- if (colorSpace !== "hex")
1334
- return (color == null ? void 0 : color[colorSpace]) || fallbackColor[colorSpace];
1335
- if (!color.hex.startsWith("#"))
1336
- try {
1337
- return `#${convert$1.keyword.hex(color.hex)}`;
1338
- } catch {
1339
- return fallbackColor.hex;
1340
- }
1341
- let short = color.hex.match(SHORTHEX_REGEXP);
1342
- if (!short)
1343
- return HEX_REGEXP.test(color.hex) ? color.hex : fallbackColor.hex;
1344
- let [r, g2, b2] = short[1].split("");
1345
- return `#${r}${r}${g2}${g2}${b2}${b2}`;
1346
- }, useColorInput = (initialValue, onChange) => {
1347
- let [value, setValue] = reactExports.useState(initialValue || ""), [color, setColor] = reactExports.useState(() => parseValue(value)), [colorSpace, setColorSpace] = reactExports.useState((color == null ? void 0 : color.colorSpace) || "hex");
1348
- reactExports.useEffect(() => {
1349
- let nextValue = initialValue || "", nextColor = parseValue(nextValue);
1350
- setValue(nextValue), setColor(nextColor), setColorSpace((nextColor == null ? void 0 : nextColor.colorSpace) || "hex");
1351
- }, [initialValue]);
1352
- let realValue = reactExports.useMemo(() => getRealValue(value, color, colorSpace).toLowerCase(), [value, color, colorSpace]), updateValue = reactExports.useCallback((update) => {
1353
- let parsed = parseValue(update), v2 = (parsed == null ? void 0 : parsed.value) || update || "";
1354
- setValue(v2), v2 === "" && (setColor(void 0), onChange(void 0)), parsed && (setColor(parsed), setColorSpace(parsed.colorSpace), onChange(parsed.value));
1355
- }, [onChange]), cycleColorSpace = reactExports.useCallback(() => {
1356
- let next = COLOR_SPACES.indexOf(colorSpace) + 1;
1357
- next >= COLOR_SPACES.length && (next = 0), setColorSpace(COLOR_SPACES[next]);
1358
- let update = (color == null ? void 0 : color[COLOR_SPACES[next]]) || "";
1359
- setValue(update), onChange(update);
1360
- }, [color, colorSpace, onChange]);
1361
- return { value, realValue, updateValue, color, colorSpace, cycleColorSpace };
1362
- }, id = (value) => value.replace(/\s*/, "").toLowerCase(), usePresets = (presetColors, currentColor, colorSpace) => {
1363
- let [selectedColors, setSelectedColors] = reactExports.useState((currentColor == null ? void 0 : currentColor.valid) ? [currentColor] : []);
1364
- reactExports.useEffect(() => {
1365
- currentColor === void 0 && setSelectedColors([]);
1366
- }, [currentColor]);
1367
- let presets = reactExports.useMemo(() => (presetColors || []).map((preset) => typeof preset == "string" ? parseValue(preset) : preset.title ? { ...parseValue(preset.color), keyword: preset.title } : parseValue(preset.color)).concat(selectedColors).filter(Boolean).slice(-27), [presetColors, selectedColors]), addPreset = reactExports.useCallback((color) => {
1368
- (color == null ? void 0 : color.valid) && (presets.some((preset) => id(preset[colorSpace]) === id(color[colorSpace])) || setSelectedColors((arr) => arr.concat(color)));
1369
- }, [colorSpace, presets]);
1370
- return { presets, addPreset };
1371
- }, ColorControl = ({ name, value: initialValue, onChange, onFocus, onBlur, presetColors, startOpen = false }) => {
1372
- let throttledOnChange = reactExports.useCallback(throttle$1(onChange, 200), [onChange]), { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(initialValue, throttledOnChange), { presets, addPreset } = usePresets(presetColors, color, colorSpace), Picker = ColorPicker[colorSpace];
1373
- return React.createElement(Wrapper, null, React.createElement(PickerTooltip, { startOpen, closeOnOutsideClick: true, onVisibleChange: () => addPreset(color), tooltip: React.createElement(TooltipContent, null, React.createElement(Picker, { color: realValue === "transparent" ? "#000000" : realValue, onChange: updateValue, onFocus, onBlur }), presets.length > 0 && React.createElement(Swatches, null, presets.map((preset, index) => React.createElement(WithTooltip, { key: `${preset.value}-${index}`, hasChrome: false, tooltip: React.createElement(Note, { note: preset.keyword || preset.value }) }, React.createElement(Swatch, { value: preset[colorSpace], active: color && id(preset[colorSpace]) === id(color[colorSpace]), onClick: () => updateValue(preset.value) }))))) }, React.createElement(Swatch, { value: realValue, style: { margin: 4 } })), React.createElement(Input, { id: getControlId(name), value, onChange: (e) => updateValue(e.target.value), onFocus: (e) => e.target.select(), placeholder: "Choose color..." }), value ? React.createElement(ToggleIcon, { icon: "markup", onClick: cycleColorSpace }) : null);
1374
- }, Color_default = ColorControl;
1375
- export {
1376
- ColorControl,
1377
- Color_default as default
1378
- };