g(x,C)?(a[d]=x,a[n]=c,d=n):(a[d]=C,a[m]=c,d=m);else if(ng(x,c))a[d]=x,a[n]=c,d=n;else break a}}return b}\nfunction g(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}if(\"object\"===typeof performance&&\"function\"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()}}else{var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q}}var r=[],t=[],u=1,v=null,y=3,z=!1,A=!1,B=!1,D=\"function\"===typeof setTimeout?setTimeout:null,E=\"function\"===typeof clearTimeout?clearTimeout:null,F=\"undefined\"!==typeof setImmediate?setImmediate:null;\n\"undefined\"!==typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function G(a){for(var b=h(t);null!==b;){if(null===b.callback)k(t);else if(b.startTime<=a)k(t),b.sortIndex=b.expirationTime,f(r,b);else break;b=h(t)}}function H(a){B=!1;G(a);if(!A)if(null!==h(r))A=!0,I(J);else{var b=h(t);null!==b&&K(H,b.startTime-a)}}\nfunction J(a,b){A=!1;B&&(B=!1,E(L),L=-1);z=!0;var c=y;try{G(b);for(v=h(r);null!==v&&(!(v.expirationTime>b)||a&&!M());){var d=v.callback;if(\"function\"===typeof d){v.callback=null;y=v.priorityLevel;var e=d(v.expirationTime<=b);b=exports.unstable_now();\"function\"===typeof e?v.callback=e:v===h(r)&&k(r);G(b)}else k(r);v=h(r)}if(null!==v)var w=!0;else{var m=h(t);null!==m&&K(H,m.startTime-b);w=!1}return w}finally{v=null,y=c,z=!1}}var N=!1,O=null,L=-1,P=5,Q=-1;\nfunction M(){return exports.unstable_now()-Qa||125d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a};\nexports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c}}};\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/scheduler.production.min.js');\n} else {\n module.exports = require('./cjs/scheduler.development.js');\n}\n","//\n\nmodule.exports = function shallowEqual(objA, objB, compare, compareContext) {\n var ret = compare ? compare.call(compareContext, objA, objB) : void 0;\n\n if (ret !== void 0) {\n return !!ret;\n }\n\n if (objA === objB) {\n return true;\n }\n\n if (typeof objA !== \"object\" || !objA || typeof objB !== \"object\" || !objB) {\n return false;\n }\n\n var keysA = Object.keys(objA);\n var keysB = Object.keys(objB);\n\n if (keysA.length !== keysB.length) {\n return false;\n }\n\n var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);\n\n // Test for A's keys different from B.\n for (var idx = 0; idx < keysA.length; idx++) {\n var key = keysA[idx];\n\n if (!bHasOwnProperty(key)) {\n return false;\n }\n\n var valueA = objA[key];\n var valueB = objB[key];\n\n ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;\n\n if (ret === false || (ret === void 0 && valueA !== valueB)) {\n return false;\n }\n }\n\n return true;\n};\n","function stylis_min (W) {\n function M(d, c, e, h, a) {\n for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {\n g = e.charCodeAt(l);\n l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);\n\n if (0 === b + n + v + m) {\n if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {\n switch (g) {\n case 32:\n case 9:\n case 59:\n case 13:\n case 10:\n break;\n\n default:\n f += e.charAt(l);\n }\n\n g = 59;\n }\n\n switch (g) {\n case 123:\n f = f.trim();\n q = f.charCodeAt(0);\n k = 1;\n\n for (t = ++l; l < B;) {\n switch (g = e.charCodeAt(l)) {\n case 123:\n k++;\n break;\n\n case 125:\n k--;\n break;\n\n case 47:\n switch (g = e.charCodeAt(l + 1)) {\n case 42:\n case 47:\n a: {\n for (u = l + 1; u < J; ++u) {\n switch (e.charCodeAt(u)) {\n case 47:\n if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {\n l = u + 1;\n break a;\n }\n\n break;\n\n case 10:\n if (47 === g) {\n l = u + 1;\n break a;\n }\n\n }\n }\n\n l = u;\n }\n\n }\n\n break;\n\n case 91:\n g++;\n\n case 40:\n g++;\n\n case 34:\n case 39:\n for (; l++ < J && e.charCodeAt(l) !== g;) {\n }\n\n }\n\n if (0 === k) break;\n l++;\n }\n\n k = e.substring(t, l);\n 0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));\n\n switch (q) {\n case 64:\n 0 < r && (f = f.replace(N, ''));\n g = f.charCodeAt(1);\n\n switch (g) {\n case 100:\n case 109:\n case 115:\n case 45:\n r = c;\n break;\n\n default:\n r = O;\n }\n\n k = M(c, r, k, g, a + 1);\n t = k.length;\n 0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));\n if (0 < t) switch (g) {\n case 115:\n f = f.replace(da, ea);\n\n case 100:\n case 109:\n case 45:\n k = f + '{' + k + '}';\n break;\n\n case 107:\n f = f.replace(fa, '$1 $2');\n k = f + '{' + k + '}';\n k = 1 === w || 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;\n break;\n\n default:\n k = f + k, 112 === h && (k = (p += k, ''));\n } else k = '';\n break;\n\n default:\n k = M(c, X(c, f, I), k, h, a + 1);\n }\n\n F += k;\n k = I = r = u = q = 0;\n f = '';\n g = e.charCodeAt(++l);\n break;\n\n case 125:\n case 59:\n f = (0 < r ? f.replace(N, '') : f).trim();\n if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q || 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\\x00\\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {\n case 0:\n break;\n\n case 64:\n if (105 === g || 99 === g) {\n G += f + e.charAt(l);\n break;\n }\n\n default:\n 58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));\n }\n I = r = u = q = 0;\n f = '';\n g = e.charCodeAt(++l);\n }\n }\n\n switch (g) {\n case 13:\n case 10:\n 47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\\x00');\n 0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);\n z = 1;\n D++;\n break;\n\n case 59:\n case 125:\n if (0 === b + n + v + m) {\n z++;\n break;\n }\n\n default:\n z++;\n y = e.charAt(l);\n\n switch (g) {\n case 9:\n case 32:\n if (0 === n + m + b) switch (x) {\n case 44:\n case 58:\n case 9:\n case 32:\n y = '';\n break;\n\n default:\n 32 !== g && (y = ' ');\n }\n break;\n\n case 0:\n y = '\\\\0';\n break;\n\n case 12:\n y = '\\\\f';\n break;\n\n case 11:\n y = '\\\\v';\n break;\n\n case 38:\n 0 === n + b + m && (r = I = 1, y = '\\f' + y);\n break;\n\n case 108:\n if (0 === n + b + m + E && 0 < u) switch (l - u) {\n case 2:\n 112 === x && 58 === e.charCodeAt(l - 3) && (E = x);\n\n case 8:\n 111 === K && (E = K);\n }\n break;\n\n case 58:\n 0 === n + b + m && (u = l);\n break;\n\n case 44:\n 0 === b + v + n + m && (r = 1, y += '\\r');\n break;\n\n case 34:\n case 39:\n 0 === b && (n = n === g ? 0 : 0 === n ? g : n);\n break;\n\n case 91:\n 0 === n + b + v && m++;\n break;\n\n case 93:\n 0 === n + b + v && m--;\n break;\n\n case 41:\n 0 === n + b + m && v--;\n break;\n\n case 40:\n if (0 === n + b + m) {\n if (0 === q) switch (2 * x + 3 * K) {\n case 533:\n break;\n\n default:\n q = 1;\n }\n v++;\n }\n\n break;\n\n case 64:\n 0 === b + v + n + m + u + k && (k = 1);\n break;\n\n case 42:\n case 47:\n if (!(0 < n + m + v)) switch (b) {\n case 0:\n switch (2 * g + 3 * e.charCodeAt(l + 1)) {\n case 235:\n b = 47;\n break;\n\n case 220:\n t = l, b = 42;\n }\n\n break;\n\n case 42:\n 47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);\n }\n }\n\n 0 === b && (f += y);\n }\n\n K = x;\n x = g;\n l++;\n }\n\n t = p.length;\n\n if (0 < t) {\n r = c;\n if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;\n p = r.join(',') + '{' + p + '}';\n\n if (0 !== w * E) {\n 2 !== w || L(p, 2) || (E = 0);\n\n switch (E) {\n case 111:\n p = p.replace(ha, ':-moz-$1') + p;\n break;\n\n case 112:\n p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;\n }\n\n E = 0;\n }\n }\n\n return G + p + F;\n }\n\n function X(d, c, e) {\n var h = c.trim().split(ia);\n c = h;\n var a = h.length,\n m = d.length;\n\n switch (m) {\n case 0:\n case 1:\n var b = 0;\n\n for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {\n c[b] = Z(d, c[b], e).trim();\n }\n\n break;\n\n default:\n var v = b = 0;\n\n for (c = []; b < a; ++b) {\n for (var n = 0; n < m; ++n) {\n c[v++] = Z(d[n] + ' ', h[b], e).trim();\n }\n }\n\n }\n\n return c;\n }\n\n function Z(d, c, e) {\n var h = c.charCodeAt(0);\n 33 > h && (h = (c = c.trim()).charCodeAt(0));\n\n switch (h) {\n case 38:\n return c.replace(F, '$1' + d.trim());\n\n case 58:\n return d.trim() + c.replace(F, '$1' + d.trim());\n\n default:\n if (0 < 1 * e && 0 < c.indexOf('\\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());\n }\n\n return d + c;\n }\n\n function P(d, c, e, h) {\n var a = d + ';',\n m = 2 * c + 3 * e + 4 * h;\n\n if (944 === m) {\n d = a.indexOf(':', 9) + 1;\n var b = a.substring(d, a.length - 1).trim();\n b = a.substring(0, d).trim() + b + ';';\n return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b;\n }\n\n if (0 === w || 2 === w && !L(a, 1)) return a;\n\n switch (m) {\n case 1015:\n return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;\n\n case 951:\n return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;\n\n case 963:\n return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;\n\n case 1009:\n if (100 !== a.charCodeAt(4)) break;\n\n case 969:\n case 942:\n return '-webkit-' + a + a;\n\n case 978:\n return '-webkit-' + a + '-moz-' + a + a;\n\n case 1019:\n case 983:\n return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;\n\n case 883:\n if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;\n if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;\n break;\n\n case 932:\n if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {\n case 103:\n return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;\n\n case 115:\n return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;\n\n case 98:\n return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;\n }\n return '-webkit-' + a + '-ms-' + a + a;\n\n case 964:\n return '-webkit-' + a + '-ms-flex-' + a + a;\n\n case 1023:\n if (99 !== a.charCodeAt(8)) break;\n b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');\n return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;\n\n case 1005:\n return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;\n\n case 1e3:\n b = a.substring(13).trim();\n c = b.indexOf('-') + 1;\n\n switch (b.charCodeAt(0) + b.charCodeAt(c)) {\n case 226:\n b = a.replace(G, 'tb');\n break;\n\n case 232:\n b = a.replace(G, 'tb-rl');\n break;\n\n case 220:\n b = a.replace(G, 'lr');\n break;\n\n default:\n return a;\n }\n\n return '-webkit-' + a + '-ms-' + b + a;\n\n case 1017:\n if (-1 === a.indexOf('sticky', 9)) break;\n\n case 975:\n c = (a = d).length - 10;\n b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();\n\n switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) {\n case 203:\n if (111 > b.charCodeAt(8)) break;\n\n case 115:\n a = a.replace(b, '-webkit-' + b) + ';' + a;\n break;\n\n case 207:\n case 102:\n a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;\n }\n\n return a + ';';\n\n case 938:\n if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {\n case 105:\n return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;\n\n case 115:\n return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;\n\n default:\n return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;\n }\n break;\n\n case 973:\n case 989:\n if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break;\n\n case 931:\n case 953:\n if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;\n break;\n\n case 962:\n if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;\n }\n\n return a;\n }\n\n function L(d, c) {\n var e = d.indexOf(1 === c ? ':' : '{'),\n h = d.substring(0, 3 !== c ? e : 10);\n e = d.substring(e + 1, d.length - 1);\n return R(2 !== c ? h : h.replace(na, '$1'), e, c);\n }\n\n function ea(d, c) {\n var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));\n return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';\n }\n\n function H(d, c, e, h, a, m, b, v, n, q) {\n for (var g = 0, x = c, w; g < A; ++g) {\n switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {\n case void 0:\n case !1:\n case !0:\n case null:\n break;\n\n default:\n x = w;\n }\n }\n\n if (x !== c) return x;\n }\n\n function T(d) {\n switch (d) {\n case void 0:\n case null:\n A = S.length = 0;\n break;\n\n default:\n if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {\n T(d[c]);\n } else Y = !!d | 0;\n }\n\n return T;\n }\n\n function U(d) {\n d = d.prefix;\n void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);\n return U;\n }\n\n function B(d, c) {\n var e = d;\n 33 > e.charCodeAt(0) && (e = e.trim());\n V = e;\n e = [V];\n\n if (0 < A) {\n var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);\n void 0 !== h && 'string' === typeof h && (c = h);\n }\n\n var a = M(O, e, c, 0, 0);\n 0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));\n V = '';\n E = 0;\n z = D = 1;\n return a;\n }\n\n var ca = /^\\0+/g,\n N = /[\\0\\r\\f]/g,\n aa = /: */g,\n ka = /zoo|gra/,\n ma = /([,: ])(transform)/g,\n ia = /,\\r+?/g,\n F = /([\\t\\r\\n ])*\\f?&/g,\n fa = /@(k\\w+)\\s*(\\S*)\\s*/,\n Q = /::(place)/g,\n ha = /:(read-only)/g,\n G = /[svh]\\w+-[tblr]{2}/,\n da = /\\(\\s*(.*)\\s*\\)/g,\n oa = /([\\s\\S]*?);/g,\n ba = /-self|flex-/g,\n na = /[^]*?(:[rp][el]a[\\w-]+)[^]*/,\n la = /stretch|:\\s*\\w+\\-(?:conte|avail)/,\n ja = /([^-])(image-set\\()/,\n z = 1,\n D = 1,\n E = 0,\n w = 1,\n O = [],\n S = [],\n A = 0,\n R = null,\n Y = 0,\n V = '';\n B.use = T;\n B.set = U;\n void 0 !== W && U(W);\n return B;\n}\n\nexport default stylis_min;\n","var unitlessKeys = {\n animationIterationCount: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1\n};\n\nexport default unitlessKeys;\n","function memoize(fn) {\n var cache = Object.create(null);\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport { memoize as default };\n","import memoize from '@emotion/memoize';\n\nvar reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar isPropValid = /* #__PURE__ */memoize(function (prop) {\n return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111\n /* o */\n && prop.charCodeAt(1) === 110\n /* n */\n && prop.charCodeAt(2) < 91;\n}\n/* Z+1 */\n);\n\nexport { isPropValid as default };\n","// @flow\nimport type { Interpolation } from '../types';\n\nexport default (\n strings: Array,\n interpolations: Array\n): Array => {\n const result = [strings[0]];\n\n for (let i = 0, len = interpolations.length; i < len; i += 1) {\n result.push(interpolations[i], strings[i + 1]);\n }\n\n return result;\n};\n","// @flow\nimport { typeOf } from 'react-is';\n\nexport default (x: any): boolean =>\n x !== null &&\n typeof x === 'object' &&\n (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' &&\n !typeOf(x);\n","// @flow\nexport const EMPTY_ARRAY = Object.freeze([]);\nexport const EMPTY_OBJECT = Object.freeze({});\n","// @flow\nexport default function isFunction(test: any): boolean %checks {\n return typeof test === 'function';\n}\n","// @flow\nimport type { IStyledComponent } from '../types';\n\nexport default function getComponentName(\n target: $PropertyType\n): string {\n return (\n (process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) ||\n // $FlowFixMe\n target.displayName ||\n // $FlowFixMe\n target.name ||\n 'Component'\n );\n}\n","// @flow\nexport default function isStyledComponent(target: any): boolean %checks {\n return target && typeof target.styledComponentId === 'string';\n}\n","// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR: string =\n (typeof process !== 'undefined' &&\n typeof process.env !== 'undefined' &&\n (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||\n 'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\nexport const SPLITTER = '/*!sc*/\\n';\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY = Boolean(\n typeof SC_DISABLE_SPEEDY === 'boolean'\n ? SC_DISABLE_SPEEDY\n : typeof process !== 'undefined' && typeof process.env !== 'undefined'\n ? typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&\n process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''\n ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'\n ? false\n : process.env.REACT_APP_SC_DISABLE_SPEEDY\n : typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== ''\n ? process.env.SC_DISABLE_SPEEDY === 'false'\n ? false\n : process.env.SC_DISABLE_SPEEDY\n : process.env.NODE_ENV !== 'production'\n : false\n);\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\nimport errorMap from './errors';\n\nconst ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};\n\n/**\n * super basic version of sprintf\n */\nfunction format(...args) {\n let a = args[0];\n const b = [];\n\n for (let c = 1, len = args.length; c < len; c += 1) {\n b.push(args[c]);\n }\n\n b.forEach(d => {\n a = a.replace(/%[a-z]/, d);\n });\n\n return a;\n}\n\n/**\n * Create an error file out of errors.md for development and a simple web link to the full errors\n * in production mode.\n */\nexport default function throwStyledComponentsError(\n code: string | number,\n ...interpolations: Array\n) {\n if (process.env.NODE_ENV === 'production') {\n throw new Error(\n `An error occurred. See https://git.io/JUIaE#${code} for more information.${\n interpolations.length > 0 ? ` Args: ${interpolations.join(', ')}` : ''\n }`\n );\n } else {\n throw new Error(format(ERRORS[code], ...interpolations).trim());\n }\n}\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport type { GroupedTag, Tag } from './types';\nimport { SPLITTER } from '../constants';\nimport throwStyledError from '../utils/error';\n\n/** Create a GroupedTag with an underlying Tag implementation */\nexport const makeGroupedTag = (tag: Tag): GroupedTag => {\n return new DefaultGroupedTag(tag);\n};\n\nconst BASE_SIZE = 1 << 9;\n\nclass DefaultGroupedTag implements GroupedTag {\n groupSizes: Uint32Array;\n\n length: number;\n\n tag: Tag;\n\n constructor(tag: Tag) {\n this.groupSizes = new Uint32Array(BASE_SIZE);\n this.length = BASE_SIZE;\n this.tag = tag;\n }\n\n indexOfGroup(group: number): number {\n let index = 0;\n for (let i = 0; i < group; i++) {\n index += this.groupSizes[i];\n }\n\n return index;\n }\n\n insertRules(group: number, rules: string[]): void {\n if (group >= this.groupSizes.length) {\n const oldBuffer = this.groupSizes;\n const oldSize = oldBuffer.length;\n\n let newSize = oldSize;\n while (group >= newSize) {\n newSize <<= 1;\n if (newSize < 0) {\n throwStyledError(16, `${group}`);\n }\n }\n\n this.groupSizes = new Uint32Array(newSize);\n this.groupSizes.set(oldBuffer);\n this.length = newSize;\n\n for (let i = oldSize; i < newSize; i++) {\n this.groupSizes[i] = 0;\n }\n }\n\n let ruleIndex = this.indexOfGroup(group + 1);\n for (let i = 0, l = rules.length; i < l; i++) {\n if (this.tag.insertRule(ruleIndex, rules[i])) {\n this.groupSizes[group]++;\n ruleIndex++;\n }\n }\n }\n\n clearGroup(group: number): void {\n if (group < this.length) {\n const length = this.groupSizes[group];\n const startIndex = this.indexOfGroup(group);\n const endIndex = startIndex + length;\n\n this.groupSizes[group] = 0;\n\n for (let i = startIndex; i < endIndex; i++) {\n this.tag.deleteRule(startIndex);\n }\n }\n }\n\n getGroup(group: number): string {\n let css = '';\n if (group >= this.length || this.groupSizes[group] === 0) {\n return css;\n }\n\n const length = this.groupSizes[group];\n const startIndex = this.indexOfGroup(group);\n const endIndex = startIndex + length;\n\n for (let i = startIndex; i < endIndex; i++) {\n css += `${this.tag.getRule(i)}${SPLITTER}`;\n }\n\n return css;\n }\n}\n","// @flow\n\nimport throwStyledError from '../utils/error';\n\nconst MAX_SMI = 1 << 31 - 1;\n\nlet groupIDRegister: Map = new Map();\nlet reverseRegister: Map = new Map();\nlet nextFreeGroup = 1;\n\nexport const resetGroupIds = () => {\n groupIDRegister = new Map();\n reverseRegister = new Map();\n nextFreeGroup = 1;\n};\n\nexport const getGroupForId = (id: string): number => {\n if (groupIDRegister.has(id)) {\n return (groupIDRegister.get(id): any);\n }\n\n while (reverseRegister.has(nextFreeGroup)) {\n nextFreeGroup++;\n }\n\n const group = nextFreeGroup++;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n ((group | 0) < 0 || group > MAX_SMI)\n ) {\n throwStyledError(16, `${group}`);\n }\n\n groupIDRegister.set(id, group);\n reverseRegister.set(group, id);\n return group;\n};\n\nexport const getIdForGroup = (group: number): void | string => {\n return reverseRegister.get(group);\n};\n\nexport const setGroupForId = (id: string, group: number) => {\n if (group >= nextFreeGroup) {\n nextFreeGroup = group + 1;\n }\n\n groupIDRegister.set(id, group);\n reverseRegister.set(group, id);\n};\n","// @flow\n\nimport { SPLITTER, SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport { getIdForGroup, setGroupForId } from './GroupIDAllocator';\nimport type { Sheet } from './types';\n\nconst SELECTOR = `style[${SC_ATTR}][${SC_ATTR_VERSION}=\"${SC_VERSION}\"]`;\nconst MARKER_RE = new RegExp(`^${SC_ATTR}\\\\.g(\\\\d+)\\\\[id=\"([\\\\w\\\\d-]+)\"\\\\].*?\"([^\"]*)`);\n\nexport const outputSheet = (sheet: Sheet) => {\n const tag = sheet.getTag();\n const { length } = tag;\n\n let css = '';\n for (let group = 0; group < length; group++) {\n const id = getIdForGroup(group);\n if (id === undefined) continue;\n\n const names = sheet.names.get(id);\n const rules = tag.getGroup(group);\n if (!names || !rules || !names.size) continue;\n\n const selector = `${SC_ATTR}.g${group}[id=\"${id}\"]`;\n\n let content = '';\n if (names !== undefined) {\n names.forEach(name => {\n if (name.length > 0) {\n content += `${name},`;\n }\n });\n }\n\n // NOTE: It's easier to collect rules and have the marker\n // after the actual rules to simplify the rehydration\n css += `${rules}${selector}{content:\"${content}\"}${SPLITTER}`;\n }\n\n return css;\n};\n\nconst rehydrateNamesFromContent = (sheet: Sheet, id: string, content: string) => {\n const names = content.split(',');\n let name;\n\n for (let i = 0, l = names.length; i < l; i++) {\n // eslint-disable-next-line\n if ((name = names[i])) {\n sheet.registerName(id, name);\n }\n }\n};\n\nconst rehydrateSheetFromTag = (sheet: Sheet, style: HTMLStyleElement) => {\n const parts = (style.textContent || '').split(SPLITTER);\n const rules: string[] = [];\n\n for (let i = 0, l = parts.length; i < l; i++) {\n const part = parts[i].trim();\n if (!part) continue;\n\n const marker = part.match(MARKER_RE);\n\n if (marker) {\n const group = parseInt(marker[1], 10) | 0;\n const id = marker[2];\n\n if (group !== 0) {\n // Rehydrate componentId to group index mapping\n setGroupForId(id, group);\n // Rehydrate names and rules\n // looks like: data-styled.g11[id=\"idA\"]{content:\"nameA,\"}\n rehydrateNamesFromContent(sheet, id, marker[3]);\n sheet.getTag().insertRules(group, rules);\n }\n\n rules.length = 0;\n } else {\n rules.push(part);\n }\n }\n};\n\nexport const rehydrateSheet = (sheet: Sheet) => {\n const nodes = document.querySelectorAll(SELECTOR);\n\n for (let i = 0, l = nodes.length; i < l; i++) {\n const node = ((nodes[i]: any): HTMLStyleElement);\n if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {\n rehydrateSheetFromTag(sheet, node);\n\n if (node.parentNode) {\n node.parentNode.removeChild(node);\n }\n }\n }\n};\n","// @flow\n/* eslint-disable camelcase, no-undef */\n\ndeclare var __webpack_nonce__: string;\n\nconst getNonce = () => {\n return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;\n};\n\nexport default getNonce;\n","// @flow\n\nimport { SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport getNonce from '../utils/nonce';\nimport throwStyledError from '../utils/error';\n\nconst ELEMENT_TYPE = 1; /* Node.ELEMENT_TYPE */\n\n/** Find last style element if any inside target */\nconst findLastStyleTag = (target: HTMLElement): void | HTMLStyleElement => {\n const { childNodes } = target;\n\n for (let i = childNodes.length; i >= 0; i--) {\n const child = ((childNodes[i]: any): ?HTMLElement);\n if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {\n return ((child: any): HTMLStyleElement);\n }\n }\n\n return undefined;\n};\n\n/** Create a style element inside `target` or after the last */\nexport const makeStyleTag = (target?: HTMLElement): HTMLStyleElement => {\n const head = ((document.head: any): HTMLElement);\n const parent = target || head;\n const style = document.createElement('style');\n const prevStyle = findLastStyleTag(parent);\n const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;\n\n style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);\n style.setAttribute(SC_ATTR_VERSION, SC_VERSION);\n\n const nonce = getNonce();\n\n if (nonce) style.setAttribute('nonce', nonce);\n\n parent.insertBefore(style, nextSibling);\n\n return style;\n};\n\n/** Get the CSSStyleSheet instance for a given style element */\nexport const getSheet = (tag: HTMLStyleElement): CSSStyleSheet => {\n if (tag.sheet) {\n return ((tag.sheet: any): CSSStyleSheet);\n }\n\n // Avoid Firefox quirk where the style element might not have a sheet property\n const { styleSheets } = document;\n for (let i = 0, l = styleSheets.length; i < l; i++) {\n const sheet = styleSheets[i];\n if (sheet.ownerNode === tag) {\n return ((sheet: any): CSSStyleSheet);\n }\n }\n\n throwStyledError(17);\n return (undefined: any);\n};\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n if (isServer) {\n return new VirtualTag(target);\n } else if (useCSSOMInjection) {\n return new CSSOMTag(target);\n } else {\n return new TextTag(target);\n }\n};\n\nexport class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n\n // Avoid Edge bug where empty style elements don't create sheets\n element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(element);\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n try {\n this.sheet.insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.sheet.deleteRule(index);\n this.length--;\n }\n\n getRule(index: number): string {\n const rule = this.sheet.cssRules[index];\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule !== undefined && typeof rule.cssText === 'string') {\n return rule.cssText;\n } else {\n return '';\n }\n }\n}\n\n/** A Tag that emulates the CSSStyleSheet API but uses text nodes */\nexport class TextTag implements Tag {\n element: HTMLStyleElement;\n\n nodes: NodeList;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n this.nodes = element.childNodes;\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length && index >= 0) {\n const node = document.createTextNode(rule);\n const refNode = this.nodes[index];\n this.element.insertBefore(node, refNode || null);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.element.removeChild(this.nodes[index]);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.nodes[index].textContent;\n } else {\n return '';\n }\n }\n}\n\n/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */\nexport class VirtualTag implements Tag {\n rules: string[];\n\n length: number;\n\n constructor(_target?: HTMLElement) {\n this.rules = [];\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length) {\n this.rules.splice(index, 0, rule);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.rules.splice(index, 1);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.rules[index];\n } else {\n return '';\n }\n }\n}\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport { EMPTY_OBJECT } from '../utils/empties';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\nimport { makeTag } from './Tag';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean,\n useCSSOMInjection?: boolean,\n target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map>;\n\nconst defaultOptions: SheetOptions = {\n isServer: !IS_BROWSER,\n useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/** Contains the main stylesheet logic for stringification and caching */\nexport default class StyleSheet implements Sheet {\n gs: GlobalStylesAllocationMap;\n\n names: NamesAllocationMap;\n\n options: SheetOptions;\n\n server: boolean;\n\n tag: void | GroupedTag;\n\n /** Register a group ID to give it an index */\n static registerId(id: string): number {\n return getGroupForId(id);\n }\n\n constructor(\n options: SheetConstructorArgs = EMPTY_OBJECT,\n globalStyles?: GlobalStylesAllocationMap = {},\n names?: NamesAllocationMap\n ) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.gs = globalStyles;\n this.names = new Map(names);\n this.server = !!options.isServer;\n\n // We rehydrate only once and use the sheet that is created first\n if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {\n SHOULD_REHYDRATE = false;\n rehydrateSheet(this);\n }\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n return new StyleSheet(\n { ...this.options, ...options },\n this.gs,\n (withNames && this.names) || undefined\n );\n }\n\n allocateGSInstance(id: string) {\n return (this.gs[id] = (this.gs[id] || 0) + 1);\n }\n\n /** Lazily initialises a GroupedTag for when it's actually needed */\n getTag(): GroupedTag {\n return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));\n }\n\n /** Check whether a name is known for caching */\n hasNameForId(id: string, name: string): boolean {\n return this.names.has(id) && (this.names.get(id): any).has(name);\n }\n\n /** Mark a group's name as known for caching */\n registerName(id: string, name: string) {\n getGroupForId(id);\n\n if (!this.names.has(id)) {\n const groupNames = new Set();\n groupNames.add(name);\n this.names.set(id, groupNames);\n } else {\n (this.names.get(id): any).add(name);\n }\n }\n\n /** Insert new rules which also marks the name as known */\n insertRules(id: string, name: string, rules: string[]) {\n this.registerName(id, name);\n this.getTag().insertRules(getGroupForId(id), rules);\n }\n\n /** Clears all cached names for a given group ID */\n clearNames(id: string) {\n if (this.names.has(id)) {\n (this.names.get(id): any).clear();\n }\n }\n\n /** Clears all rules for a given group ID */\n clearRules(id: string) {\n this.getTag().clearGroup(getGroupForId(id));\n this.clearNames(id);\n }\n\n /** Clears the entire tag which deletes all rules but not its names */\n clearTag() {\n // NOTE: This does not clear the names, since it's only used during SSR\n // so that we can continuously output only new rules\n this.tag = undefined;\n }\n\n /** Outputs the current sheet as a CSS string with markers for SSR */\n toString(): string {\n return outputSheet(this);\n }\n}\n","// @flow\n/* eslint-disable no-bitwise */\n\nconst AD_REPLACER_R = /(a)(d)/gi;\n\n/* This is the \"capacity\" of our alphabet i.e. 2x26 for all letters plus their capitalised\n * counterparts */\nconst charsLength = 52;\n\n/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */\nconst getAlphabeticChar = (code: number): string =>\n String.fromCharCode(code + (code > 25 ? 39 : 97));\n\n/* input a number, usually a hash and convert it to base-52 */\nexport default function generateAlphabeticName(code: number): string {\n let name = '';\n let x;\n\n /* get a char and divide by alphabet-length */\n for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {\n name = getAlphabeticChar(x % charsLength) + name;\n }\n\n return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2');\n}\n","// @flow\n/* eslint-disable */\n\nexport const SEED = 5381;\n\n// When we have separate strings it's useful to run a progressive\n// version of djb2 where we pretend that we're still looping over\n// the same string\nexport const phash = (h: number, x: string): number => {\n let i = x.length;\n\n while (i) {\n h = (h * 33) ^ x.charCodeAt(--i);\n }\n\n return h;\n};\n\n// This is a djb2 hashing function\nexport const hash = (x: string): number => {\n return phash(SEED, x);\n};\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n for (let i = 0; i < rules.length; i += 1) {\n const rule = rules[i];\n\n if (isFunction(rule) && !isStyledComponent(rule)) {\n // functions are allowed to be static if they're just being\n // used to get the classname of a nested styled component\n return false;\n }\n }\n\n return true;\n}\n","// @flow\nimport { SC_VERSION } from '../constants';\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport generateName from '../utils/generateAlphabeticName';\nimport { hash, phash } from '../utils/hash';\nimport isStaticRules from '../utils/isStaticRules';\n\nconst SEED = hash(SC_VERSION);\n\n/**\n * ComponentStyle is all the CSS-specific stuff, not the React-specific stuff.\n */\nexport default class ComponentStyle {\n baseHash: number;\n\n baseStyle: ?ComponentStyle;\n\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n staticRulesId: string;\n\n constructor(rules: RuleSet, componentId: string, baseStyle?: ComponentStyle) {\n this.rules = rules;\n this.staticRulesId = '';\n this.isStatic = process.env.NODE_ENV === 'production' &&\n (baseStyle === undefined || baseStyle.isStatic) &&\n isStaticRules(rules);\n this.componentId = componentId;\n\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n this.baseHash = phash(SEED, componentId);\n\n this.baseStyle = baseStyle;\n\n // NOTE: This registers the componentId, which ensures a consistent order\n // for this component's styles compared to others\n StyleSheet.registerId(componentId);\n }\n\n /*\n * Flattens a rule set into valid CSS\n * Hashes it, wraps the whole chunk in a .hash1234 {}\n * Returns the hash to be injected on render()\n * */\n generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet, stylis: Stringifier) {\n const { componentId } = this;\n\n const names = [];\n\n if (this.baseStyle) {\n names.push(this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis));\n }\n\n // force dynamic classnames if user-supplied stylis plugins are in use\n if (this.isStatic && !stylis.hash) {\n if (this.staticRulesId && styleSheet.hasNameForId(componentId, this.staticRulesId)) {\n names.push(this.staticRulesId);\n } else {\n const cssStatic = flatten(this.rules, executionContext, styleSheet, stylis).join('');\n const name = generateName(phash(this.baseHash, cssStatic) >>> 0);\n\n if (!styleSheet.hasNameForId(componentId, name)) {\n const cssStaticFormatted = stylis(cssStatic, `.${name}`, undefined, componentId);\n\n styleSheet.insertRules(componentId, name, cssStaticFormatted);\n }\n\n names.push(name);\n this.staticRulesId = name;\n }\n } else {\n const { length } = this.rules;\n let dynamicHash = phash(this.baseHash, stylis.hash);\n let css = '';\n\n for (let i = 0; i < length; i++) {\n const partRule = this.rules[i];\n\n if (typeof partRule === 'string') {\n css += partRule;\n\n if (process.env.NODE_ENV !== 'production') dynamicHash = phash(dynamicHash, partRule + i);\n } else if (partRule) {\n const partChunk = flatten(partRule, executionContext, styleSheet, stylis);\n const partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;\n dynamicHash = phash(dynamicHash, partString + i);\n css += partString;\n }\n }\n\n if (css) {\n const name = generateName(dynamicHash >>> 0);\n\n if (!styleSheet.hasNameForId(componentId, name)) {\n const cssFormatted = stylis(css, `.${name}`, undefined, componentId);\n styleSheet.insertRules(componentId, name, cssFormatted);\n }\n\n names.push(name);\n }\n }\n\n return names.join(' ');\n }\n}\n","import Stylis from '@emotion/stylis';\nimport { type Stringifier } from '../types';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from './empties';\nimport throwStyledError from './error';\nimport { phash, SEED } from './hash';\nimport insertRulePlugin from './stylisPluginInsertRule';\n\nconst COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\nconst COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];\n\ntype StylisInstanceConstructorArgs = {\n options?: Object,\n plugins?: Array,\n};\n\nexport default function createStylisInstance({\n options = EMPTY_OBJECT,\n plugins = EMPTY_ARRAY,\n}: StylisInstanceConstructorArgs = EMPTY_OBJECT) {\n const stylis = new Stylis(options);\n\n // Wrap `insertRulePlugin to build a list of rules,\n // and then make our own plugin to return the rules. This\n // makes it easier to hook into the existing SSR architecture\n\n let parsingRules = [];\n\n // eslint-disable-next-line consistent-return\n const returnRulesPlugin = context => {\n if (context === -2) {\n const parsedRules = parsingRules;\n parsingRules = [];\n return parsedRules;\n }\n };\n\n const parseRulesPlugin = insertRulePlugin(rule => {\n parsingRules.push(rule);\n });\n\n let _componentId: string;\n let _selector: string;\n let _selectorRegexp: RegExp;\n let _consecutiveSelfRefRegExp: RegExp;\n\n const selfReferenceReplacer = (match, offset, string) => {\n if (\n // do not replace the first occurrence if it is complex (has a modifier)\n (offset === 0 ? COMPLEX_SELECTOR_PREFIX.indexOf(string[_selector.length]) === -1 : true) &&\n // no consecutive self refs (.b.b); that is a precedence boost and treated differently\n !string.match(_consecutiveSelfRefRegExp)\n ) {\n return `.${_componentId}`;\n }\n\n return match;\n };\n\n /**\n * When writing a style like\n *\n * & + & {\n * color: red;\n * }\n *\n * The second ampersand should be a reference to the static component class. stylis\n * has no knowledge of static class so we have to intelligently replace the base selector.\n *\n * https://github.com/thysultan/stylis.js/tree/v3.5.4#plugins <- more info about the context phase values\n * \"2\" means this plugin is taking effect at the very end after all other processing is complete\n */\n const selfReferenceReplacementPlugin = (context, _, selectors) => {\n if (context === 2 && selectors.length && selectors[0].lastIndexOf(_selector) > 0) {\n // eslint-disable-next-line no-param-reassign\n selectors[0] = selectors[0].replace(_selectorRegexp, selfReferenceReplacer);\n }\n };\n\n stylis.use([...plugins, selfReferenceReplacementPlugin, parseRulesPlugin, returnRulesPlugin]);\n\n function stringifyRules(css, selector, prefix, componentId = '&'): Stringifier {\n const flatCSS = css.replace(COMMENT_REGEX, '');\n const cssStr = selector && prefix ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS;\n\n // stylis has no concept of state to be passed to plugins\n // but since JS is single-threaded, we can rely on that to ensure\n // these properties stay in sync with the current stylis run\n _componentId = componentId;\n _selector = selector;\n _selectorRegexp = new RegExp(`\\\\${_selector}\\\\b`, 'g');\n _consecutiveSelfRefRegExp = new RegExp(`(\\\\${_selector}\\\\b){2,}`);\n\n return stylis(prefix || !selector ? '' : selector, cssStr);\n }\n\n stringifyRules.hash = plugins.length\n ? plugins\n .reduce((acc, plugin) => {\n if (!plugin.name) {\n throwStyledError(15);\n }\n\n return phash(acc, plugin.name);\n }, SEED)\n .toString()\n : '';\n\n return stringifyRules;\n}\n","/**\n * MIT License\n *\n * Copyright (c) 2016 Sultan Tarimo\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy of\n * this software and associated documentation files (the \"Software\"),\n * to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n * sell copies of the Software and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n * OR IMPLIED INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR\n * IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n/* eslint-disable */\n\nexport default function(insertRule) {\n const delimiter = '/*|*/';\n const needle = `${delimiter}}`;\n\n function toSheet(block) {\n if (block) {\n try {\n insertRule(`${block}}`);\n } catch (e) {}\n }\n }\n\n return function ruleSheet(\n context,\n content,\n selectors,\n parents,\n line,\n column,\n length,\n ns,\n depth,\n at\n ) {\n switch (context) {\n // property\n case 1:\n // @import\n if (depth === 0 && content.charCodeAt(0) === 64) return insertRule(`${content};`), '';\n break;\n // selector\n case 2:\n if (ns === 0) return content + delimiter;\n break;\n // at-rule\n case 3:\n switch (ns) {\n // @font-face, @page\n case 102:\n case 112:\n return insertRule(selectors[0] + content), '';\n default:\n return content + (at === 0 ? delimiter : '');\n }\n case -2:\n content.split(needle).forEach(toSheet);\n }\n };\n}\n","// @flow\nimport React, { type Context, type Node, useContext, useEffect, useMemo, useState } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport type { Stringifier } from '../types';\nimport createStylisInstance from '../utils/stylis';\n\ntype Props = {\n children?: Node,\n disableCSSOMInjection?: boolean,\n disableVendorPrefixes?: boolean,\n sheet?: StyleSheet,\n stylisPlugins?: Array,\n target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context = React.createContext();\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport const masterSheet: StyleSheet = new StyleSheet();\nexport const masterStylis: Stringifier = createStylisInstance();\n\nexport function useStyleSheet(): StyleSheet {\n return useContext(StyleSheetContext) || masterSheet;\n}\n\nexport function useStylis(): Stringifier {\n return useContext(StylisContext) || masterStylis;\n}\n\nexport default function StyleSheetManager(props: Props) {\n const [plugins, setPlugins] = useState(props.stylisPlugins);\n const contextStyleSheet = useStyleSheet();\n\n const styleSheet = useMemo(() => {\n let sheet = contextStyleSheet;\n\n if (props.sheet) {\n // eslint-disable-next-line prefer-destructuring\n sheet = props.sheet;\n } else if (props.target) {\n sheet = sheet.reconstructWithOptions({ target: props.target }, false);\n }\n\n if (props.disableCSSOMInjection) {\n sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n }\n\n return sheet;\n }, [props.disableCSSOMInjection, props.sheet, props.target]);\n\n const stylis = useMemo(\n () =>\n createStylisInstance({\n options: { prefix: !props.disableVendorPrefixes },\n plugins,\n }),\n [props.disableVendorPrefixes, plugins]\n );\n\n useEffect(() => {\n if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n }, [props.stylisPlugins]);\n\n return (\n \n \n {process.env.NODE_ENV !== 'production'\n ? React.Children.only(props.children)\n : props.children}\n \n \n );\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n id: string;\n\n name: string;\n\n rules: string;\n\n constructor(name: string, rules: string) {\n this.name = name;\n this.id = `sc-keyframes-${name}`;\n this.rules = rules;\n }\n\n inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n const resolvedName = this.name + stylisInstance.hash;\n\n if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n styleSheet.insertRules(\n this.id,\n resolvedName,\n stylisInstance(this.rules, resolvedName, '@keyframes')\n );\n }\n };\n\n toString = () => {\n return throwStyledError(12, String(this.name));\n };\n\n getName(stylisInstance: Stringifier = masterStylis) {\n return this.name + stylisInstance.hash;\n }\n}\n","// @flow\n\n/**\n * inlined version of\n * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js\n */\n\nconst uppercaseCheck = /([A-Z])/;\nconst uppercasePattern = /([A-Z])/g;\nconst msPattern = /^ms-/;\nconst prefixAndLowerCase = (char: string): string => `-${char.toLowerCase()}`;\n\n/**\n * Hyphenates a camelcased CSS property name, for example:\n *\n * > hyphenateStyleName('backgroundColor')\n * < \"background-color\"\n * > hyphenateStyleName('MozTransition')\n * < \"-moz-transition\"\n * > hyphenateStyleName('msTransition')\n * < \"-ms-transition\"\n *\n * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix\n * is converted to `-ms-`.\n *\n * @param {string} string\n * @return {string}\n */\nexport default function hyphenateStyleName(string: string): string {\n return uppercaseCheck.test(string)\n ? string\n .replace(uppercasePattern, prefixAndLowerCase)\n .replace(msPattern, '-ms-')\n : string;\n}\n","// @flow\nimport { isElement } from 'react-is';\nimport getComponentName from './getComponentName';\nimport isFunction from './isFunction';\nimport isStatelessFunction from './isStatelessFunction';\nimport isPlainObject from './isPlainObject';\nimport isStyledComponent from './isStyledComponent';\nimport Keyframes from '../models/Keyframes';\nimport hyphenate from './hyphenateStyleName';\nimport addUnitIfNeeded from './addUnitIfNeeded';\nimport { type Stringifier } from '../types';\n\n/**\n * It's falsish not falsy because 0 is allowed.\n */\nconst isFalsish = chunk => chunk === undefined || chunk === null || chunk === false || chunk === '';\n\nexport const objToCssArray = (obj: Object, prevKey?: string): Array => {\n const rules = [];\n\n for (const key in obj) {\n if (!obj.hasOwnProperty(key) || isFalsish(obj[key])) continue;\n\n if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {\n rules.push(`${hyphenate(key)}:`, obj[key], ';');\n } else if (isPlainObject(obj[key])) {\n rules.push(...objToCssArray(obj[key], key));\n } else {\n rules.push(`${hyphenate(key)}: ${addUnitIfNeeded(key, obj[key])};`);\n }\n }\n\n return prevKey ? [`${prevKey} {`, ...rules, '}'] : rules;\n};\n\nexport default function flatten(\n chunk: any,\n executionContext: ?Object,\n styleSheet: ?Object,\n stylisInstance: ?Stringifier\n): any {\n if (Array.isArray(chunk)) {\n const ruleSet = [];\n\n for (let i = 0, len = chunk.length, result; i < len; i += 1) {\n result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);\n\n if (result === '') continue;\n else if (Array.isArray(result)) ruleSet.push(...result);\n else ruleSet.push(result);\n }\n\n return ruleSet;\n }\n\n if (isFalsish(chunk)) {\n return '';\n }\n\n /* Handle other components */\n if (isStyledComponent(chunk)) {\n return `.${chunk.styledComponentId}`;\n }\n\n /* Either execute or defer the function */\n if (isFunction(chunk)) {\n if (isStatelessFunction(chunk) && executionContext) {\n const result = chunk(executionContext);\n\n if (process.env.NODE_ENV !== 'production' && isElement(result)) {\n // eslint-disable-next-line no-console\n console.warn(\n `${getComponentName(\n chunk\n )} is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.`\n );\n }\n\n return flatten(result, executionContext, styleSheet, stylisInstance);\n } else return chunk;\n }\n\n if (chunk instanceof Keyframes) {\n if (styleSheet) {\n chunk.inject(styleSheet, stylisInstance);\n return chunk.getName(stylisInstance);\n } else return chunk;\n }\n\n /* Handle objects */\n return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();\n}\n","// @flow\nexport default function isStatelessFunction(test: any): boolean {\n return (\n typeof test === 'function'\n && !(\n test.prototype\n && test.prototype.isReactComponent\n )\n );\n}\n","// @flow\nimport unitless from '@emotion/unitless';\n\n// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js\nexport default function addUnitIfNeeded(name: string, value: any): any {\n // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133\n // $FlowFixMe\n if (value == null || typeof value === 'boolean' || value === '') {\n return '';\n }\n\n if (typeof value === 'number' && value !== 0 && !(name in unitless) && !name.startsWith('--')) {\n return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables\n }\n\n return String(value).trim();\n}\n","// @flow\nimport interleave from '../utils/interleave';\nimport isPlainObject from '../utils/isPlainObject';\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport isFunction from '../utils/isFunction';\nimport flatten from '../utils/flatten';\nimport type { Interpolation, RuleSet, Styles } from '../types';\n\n/**\n * Used when flattening object styles to determine if we should\n * expand an array of styles.\n */\nconst addTag = arg => {\n if (Array.isArray(arg)) {\n // eslint-disable-next-line no-param-reassign\n arg.isCss = true;\n }\n return arg;\n};\n\nexport default function css(styles: Styles, ...interpolations: Array): RuleSet {\n if (isFunction(styles) || isPlainObject(styles)) {\n // $FlowFixMe\n return addTag(flatten(interleave(EMPTY_ARRAY, [styles, ...interpolations])));\n }\n\n if (interpolations.length === 0 && styles.length === 1 && typeof styles[0] === 'string') {\n // $FlowFixMe\n return styles;\n }\n\n // $FlowFixMe\n return addTag(flatten(interleave(styles, interpolations)));\n}\n","// @flow\n\nimport { useRef } from 'react';\n\nconst invalidHookCallRe = /invalid hook call/i;\nconst seen = new Set();\n\nexport const checkDynamicCreation = (displayName: string, componentId?: string) => {\n if (process.env.NODE_ENV !== 'production') {\n const parsedIdString = componentId ? ` with the id of \"${componentId}\"` : '';\n const message =\n `The component ${displayName}${parsedIdString} has been created dynamically.\\n` +\n \"You may see this warning because you've called styled inside another component.\\n\" +\n 'To resolve this only create new StyledComponents outside of any render method and function component.';\n\n // If a hook is called outside of a component:\n // React 17 and earlier throw an error\n // React 18 and above use console.error\n\n const originalConsoleError = console.error // eslint-disable-line no-console\n try {\n let didNotCallInvalidHook = true\n /* $FlowIgnore[cannot-write] */\n console.error = (consoleErrorMessage, ...consoleErrorArgs) => { // eslint-disable-line no-console\n // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to\n // be called outside of a React component.\n if (invalidHookCallRe.test(consoleErrorMessage)) {\n didNotCallInvalidHook = false\n // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently\n seen.delete(message);\n } else {\n originalConsoleError(consoleErrorMessage, ...consoleErrorArgs);\n }\n }\n // We purposefully call `useRef` outside of a component and expect it to throw\n // If it doesn't, then we're inside another component.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useRef();\n\n if (didNotCallInvalidHook && !seen.has(message)) {\n // eslint-disable-next-line no-console\n console.warn(message);\n seen.add(message);\n }\n } catch (error) {\n // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to\n // be called outside of a React component.\n if (invalidHookCallRe.test(error.message)) {\n // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently\n seen.delete(message);\n }\n } finally {\n /* $FlowIgnore[cannot-write] */\n console.error = originalConsoleError; // eslint-disable-line no-console\n }\n }\n};\n","// @flow\nimport { EMPTY_OBJECT } from './empties';\n\ntype Props = {\n theme?: any,\n};\n\nexport default (props: Props, providedTheme: any, defaultProps: any = EMPTY_OBJECT) => {\n return (props.theme !== defaultProps.theme && props.theme) || providedTheme || defaultProps.theme;\n};\n","// @flow\n\n// Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier\n// Control characters and non-letter first symbols are not supported\nconst escapeRegex = /[!\"#$%&'()*+,./:;<=>?@[\\\\\\]^`{|}~-]+/g;\n\nconst dashesAtEnds = /(^-|-$)/g;\n\n/**\n * TODO: Explore using CSS.escape when it becomes more available\n * in evergreen browsers.\n */\nexport default function escape(str: string): string {\n return (\n str\n // Replace all possible CSS selectors\n .replace(escapeRegex, '-')\n\n // Remove extraneous hyphens at the start and end\n .replace(dashesAtEnds, '')\n );\n}\n","// @flow\n/* eslint-disable */\nimport generateAlphabeticName from './generateAlphabeticName';\nimport { hash } from './hash';\n\nexport default (str: string): string => {\n return generateAlphabeticName(hash(str) >>> 0);\n};\n","// @flow\nimport type { IStyledComponent } from '../types';\n\nexport default function isTag(target: $PropertyType): boolean %checks {\n return (\n typeof target === 'string' &&\n (process.env.NODE_ENV !== 'production'\n ? target.charAt(0) === target.charAt(0).toLowerCase()\n : true)\n );\n}\n","/* eslint-disable */\n/**\n mixin-deep; https://github.com/jonschlinkert/mixin-deep\n Inlined such that it will be consistently transpiled to an IE-compatible syntax.\n\n The MIT License (MIT)\n\n Copyright (c) 2014-present, Jon Schlinkert.\n\n Permission is hereby granted, free of charge, to any person obtaining a copy\n of this software and associated documentation files (the \"Software\"), to deal\n in the Software without restriction, including without limitation the rights\n to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n copies of the Software, and to permit persons to whom the Software is\n furnished to do so, subject to the following conditions:\n\n The above copyright notice and this permission notice shall be included in\n all copies or substantial portions of the Software.\n\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n THE SOFTWARE.\n*/\n\nconst isObject = val => {\n return (\n typeof val === 'function' || (typeof val === 'object' && val !== null && !Array.isArray(val))\n );\n};\n\nconst isValidKey = key => {\n return key !== '__proto__' && key !== 'constructor' && key !== 'prototype';\n};\n\nfunction mixin(target, val, key) {\n const obj = target[key];\n if (isObject(val) && isObject(obj)) {\n mixinDeep(obj, val);\n } else {\n target[key] = val;\n }\n}\n\nexport default function mixinDeep(target, ...rest) {\n for (const obj of rest) {\n if (isObject(obj)) {\n for (const key in obj) {\n if (isValidKey(key)) {\n mixin(target, obj[key], key);\n }\n }\n }\n }\n\n return target;\n}\n","// @flow\nimport React, { useContext, useMemo, type Element, type Context } from 'react';\nimport throwStyledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\nexport type Theme = { [key: string]: mixed };\n\ntype ThemeArgument = Theme | ((outerTheme?: Theme) => Theme);\n\ntype Props = {\n children?: Element,\n theme: ThemeArgument,\n};\n\nexport const ThemeContext: Context = React.createContext();\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\nfunction mergeTheme(theme: ThemeArgument, outerTheme?: Theme): Theme {\n if (!theme) {\n return throwStyledError(14);\n }\n\n if (isFunction(theme)) {\n const mergedTheme = theme(outerTheme);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')\n ) {\n return throwStyledError(7);\n }\n\n return mergedTheme;\n }\n\n if (Array.isArray(theme) || typeof theme !== 'object') {\n return throwStyledError(8);\n }\n\n return outerTheme ? { ...outerTheme, ...theme } : theme;\n}\n\n/**\n * Provide a theme to an entire react component tree via context\n */\nexport default function ThemeProvider(props: Props) {\n const outerTheme = useContext(ThemeContext);\n const themeContext = useMemo(() => mergeTheme(props.theme, outerTheme), [\n props.theme,\n outerTheme,\n ]);\n\n if (!props.children) {\n return null;\n }\n\n return {props.children};\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport hoist from 'hoist-non-react-statics';\nimport React, { createElement, type Ref, useContext } from 'react';\nimport { SC_VERSION } from '../constants';\nimport type {\n Attrs,\n IStyledComponent,\n IStyledStatics,\n RuleSet,\n ShouldForwardProp,\n Target,\n} from '../types';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\nimport escape from '../utils/escape';\nimport generateComponentId from '../utils/generateComponentId';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { ThemeContext } from './ThemeProvider';\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(displayName?: string, parentComponentId?: string) {\n const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n // Ensure that no displayName can lead to duplicate componentIds\n identifiers[name] = (identifiers[name] || 0) + 1;\n\n const componentId = `${name}-${generateComponentId(\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n SC_VERSION + name + identifiers[name]\n )}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n // NOTE: can't memoize this\n // returns [context, resolvedAttrs]\n // where resolvedAttrs is only the things injected by the attrs themselves\n const context = { ...props, theme };\n const resolvedAttrs = {};\n\n attrs.forEach(attrDef => {\n let resolvedAttrDef = attrDef;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n resolvedAttrDef = resolvedAttrDef(context);\n }\n\n /* eslint-disable guard-for-in */\n for (key in resolvedAttrDef) {\n context[key] = resolvedAttrs[key] =\n key === 'className'\n ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n : resolvedAttrDef[key];\n }\n /* eslint-enable guard-for-in */\n });\n\n return [context, resolvedAttrs];\n}\n\nfunction useInjectedStyle(\n componentStyle: ComponentStyle,\n isStatic: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call\n) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n\n const className = isStatic\n ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n warnTooManyClasses(className);\n }\n\n return className;\n}\n\nfunction useStyledComponentImpl(\n forwardedComponent: IStyledComponent,\n props: Object,\n forwardedRef: Ref,\n isStatic: boolean\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n defaultProps,\n foldedComponentIds,\n shouldForwardProp,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n // should be an immutable value, but behave for now.\n const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n const [context, attrs] = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);\n\n const generatedClassName = useInjectedStyle(\n componentStyle,\n isStatic,\n context,\n process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n );\n\n const refToForward = forwardedRef;\n\n const elementToBeCreated: Target = attrs.$as || props.$as || attrs.as || props.as || target;\n\n const isTargetTag = isTag(elementToBeCreated);\n const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n const propsForElement = {};\n\n // eslint-disable-next-line guard-for-in\n for (const key in computedProps) {\n if (key[0] === '$' || key === 'as') continue;\n else if (key === 'forwardedAs') {\n propsForElement.as = computedProps[key];\n } else if (\n shouldForwardProp\n ? shouldForwardProp(key, validAttr, elementToBeCreated)\n : isTargetTag\n ? validAttr(key)\n : true\n ) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (props.style && attrs.style !== props.style) {\n propsForElement.style = { ...props.style, ...attrs.style };\n }\n\n propsForElement.className = Array.prototype\n .concat(\n foldedComponentIds,\n styledComponentId,\n generatedClassName !== styledComponentId ? generatedClassName : null,\n props.className,\n attrs.className\n )\n .filter(Boolean)\n .join(' ');\n\n propsForElement.ref = refToForward;\n\n return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n target: $PropertyType,\n options: {\n attrs?: Attrs,\n componentId: string,\n displayName?: string,\n parentComponentId?: string,\n shouldForwardProp?: ShouldForwardProp,\n },\n rules: RuleSet\n) {\n const isTargetStyledComp = isStyledComponent(target);\n const isCompositeComponent = !isTag(target);\n\n const {\n attrs = EMPTY_ARRAY,\n componentId = generateId(options.displayName, options.parentComponentId),\n displayName = generateDisplayName(target),\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId || componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n isTargetStyledComp && ((target: any): IStyledComponent).attrs\n ? Array.prototype.concat(((target: any): IStyledComponent).attrs, attrs).filter(Boolean)\n : attrs;\n\n // eslint-disable-next-line prefer-destructuring\n let shouldForwardProp = options.shouldForwardProp;\n\n if (isTargetStyledComp && target.shouldForwardProp) {\n if (options.shouldForwardProp) {\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, filterFn, elementToBeCreated) =>\n ((((target: any): IStyledComponent).shouldForwardProp: any): ShouldForwardProp)(\n prop,\n filterFn,\n elementToBeCreated\n ) &&\n ((options.shouldForwardProp: any): ShouldForwardProp)(prop, filterFn, elementToBeCreated);\n } else {\n // eslint-disable-next-line prefer-destructuring\n shouldForwardProp = ((target: any): IStyledComponent).shouldForwardProp;\n }\n }\n\n const componentStyle = new ComponentStyle(\n rules,\n styledComponentId,\n isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n );\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n const isStatic = componentStyle.isStatic && attrs.length === 0;\n\n /**\n * forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n */\n let WrappedStyledComponent: IStyledComponent;\n\n const forwardRef = (props, ref) =>\n // eslint-disable-next-line\n useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);\n\n forwardRef.displayName = displayName;\n\n WrappedStyledComponent = ((React.forwardRef(forwardRef): any): IStyledComponent);\n WrappedStyledComponent.attrs = finalAttrs;\n WrappedStyledComponent.componentStyle = componentStyle;\n WrappedStyledComponent.displayName = displayName;\n WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n // this static is used to preserve the cascade of static classes for component selector\n // purposes; this is especially important with usage of the css prop\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n ? Array.prototype.concat(\n ((target: any): IStyledComponent).foldedComponentIds,\n ((target: any): IStyledComponent).styledComponentId\n )\n : EMPTY_ARRAY;\n\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n WrappedStyledComponent.target = isTargetStyledComp\n ? ((target: any): IStyledComponent).target\n : target;\n\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n this._foldedDefaultProps = isTargetStyledComp\n ? merge({}, ((target: any): IStyledComponent).defaultProps, obj)\n : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n checkDynamicCreation(displayName, styledComponentId);\n\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n displayName,\n styledComponentId\n );\n }\n\n // If the Object prototype is frozen, the \"toString\" property is non-writable. This means that any objects which inherit this property\n // cannot have the property changed using an assignment. If using strict mode, attempting that will cause an error. If not using strict\n // mode, attempting that will be silently ignored.\n // However, we can still explicitly shadow the prototype's \"toString\" property by defining a new \"toString\" property on this object.\n Object.defineProperty(WrappedStyledComponent, 'toString', { value: () => `.${WrappedStyledComponent.styledComponentId}` });\n\n if (isCompositeComponent) {\n hoist<\n IStyledStatics,\n $PropertyType,\n { [key: $Keys]: true }\n >(WrappedStyledComponent, ((target: any): $PropertyType), {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n shouldForwardProp: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport type { IStyledComponent } from '../types';\nimport getComponentName from './getComponentName';\nimport isTag from './isTag';\n\nexport default function generateDisplayName(\n target: $PropertyType\n): string {\n return isTag(target) ? `styled.${target}` : `Styled(${getComponentName(target)})`;\n}\n","/**\n * Convenience function for joining strings to form className chains\n */\nexport default function joinStrings(a: ?String, b: ?String): ?String {\n return a && b ? `${a} ${b}` : a || b;\n}\n","// @flow\n// Thanks to ReactDOMFactories for this handy list!\n\nexport default [\n 'a',\n 'abbr',\n 'address',\n 'area',\n 'article',\n 'aside',\n 'audio',\n 'b',\n 'base',\n 'bdi',\n 'bdo',\n 'big',\n 'blockquote',\n 'body',\n 'br',\n 'button',\n 'canvas',\n 'caption',\n 'cite',\n 'code',\n 'col',\n 'colgroup',\n 'data',\n 'datalist',\n 'dd',\n 'del',\n 'details',\n 'dfn',\n 'dialog',\n 'div',\n 'dl',\n 'dt',\n 'em',\n 'embed',\n 'fieldset',\n 'figcaption',\n 'figure',\n 'footer',\n 'form',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'head',\n 'header',\n 'hgroup',\n 'hr',\n 'html',\n 'i',\n 'iframe',\n 'img',\n 'input',\n 'ins',\n 'kbd',\n 'keygen',\n 'label',\n 'legend',\n 'li',\n 'link',\n 'main',\n 'map',\n 'mark',\n 'marquee',\n 'menu',\n 'menuitem',\n 'meta',\n 'meter',\n 'nav',\n 'noscript',\n 'object',\n 'ol',\n 'optgroup',\n 'option',\n 'output',\n 'p',\n 'param',\n 'picture',\n 'pre',\n 'progress',\n 'q',\n 'rp',\n 'rt',\n 'ruby',\n 's',\n 'samp',\n 'script',\n 'section',\n 'select',\n 'small',\n 'source',\n 'span',\n 'strong',\n 'style',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'textarea',\n 'tfoot',\n 'th',\n 'thead',\n 'time',\n 'title',\n 'tr',\n 'track',\n 'u',\n 'ul',\n 'var',\n 'video',\n 'wbr',\n\n // SVG\n 'circle',\n 'clipPath',\n 'defs',\n 'ellipse',\n 'foreignObject',\n 'g',\n 'image',\n 'line',\n 'linearGradient',\n 'marker',\n 'mask',\n 'path',\n 'pattern',\n 'polygon',\n 'polyline',\n 'radialGradient',\n 'rect',\n 'stop',\n 'svg',\n 'text',\n 'textPath',\n 'tspan',\n];\n","// @flow\nimport constructWithOptions from './constructWithOptions';\nimport StyledComponent from '../models/StyledComponent';\nimport domElements from '../utils/domElements';\n\nimport type { Target } from '../types';\n\nconst styled = (tag: Target) => constructWithOptions(StyledComponent, tag);\n\n// Shorthands for all valid HTML Elements\ndomElements.forEach(domElement => {\n styled[domElement] = styled(domElement);\n});\n\nexport default styled;\n","// @flow\nimport { isValidElementType } from 'react-is';\nimport css from './css';\nimport throwStyledError from '../utils/error';\nimport { EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Target } from '../types';\n\nexport default function constructWithOptions(\n componentConstructor: Function,\n tag: Target,\n options: Object = EMPTY_OBJECT\n) {\n if (!isValidElementType(tag)) {\n return throwStyledError(1, String(tag));\n }\n\n /* This is callable directly as a template function */\n // $FlowFixMe: Not typed to avoid destructuring arguments\n const templateFunction = (...args) => componentConstructor(tag, options, css(...args));\n\n /* If config methods are called, wrap up a new template function and merge options */\n templateFunction.withConfig = config =>\n constructWithOptions(componentConstructor, tag, { ...options, ...config });\n\n /* Modify/inject new props at runtime */\n templateFunction.attrs = attrs =>\n constructWithOptions(componentConstructor, tag, {\n ...options,\n attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean),\n });\n\n return templateFunction;\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules);\n\n // pre-register the first instance to ensure global styles\n // load before component ones\n StyleSheet.registerId(this.componentId + 1);\n }\n\n createStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);\n const css = stylis(flatCSS.join(''), '');\n const id = this.componentId + instance;\n\n // NOTE: We use the id as a name as well, since these rules never change\n styleSheet.insertRules(id, id, css);\n }\n\n removeStyles(instance: number, styleSheet: StyleSheet) {\n styleSheet.clearRules(this.componentId + instance);\n }\n\n renderStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n if (instance > 2) StyleSheet.registerId(this.componentId + instance);\n\n // NOTE: Remove old styles, then inject the new ones\n this.removeStyles(instance, styleSheet);\n this.createStyles(instance, executionContext, styleSheet, stylis);\n }\n}\n","// @flow\nimport React, { useContext, useLayoutEffect, useRef } from 'react';\nimport { STATIC_EXECUTION_CONTEXT } from '../constants';\nimport GlobalStyle from '../models/GlobalStyle';\nimport { useStyleSheet, useStylis } from '../models/StyleSheetManager';\nimport { ThemeContext } from '../models/ThemeProvider';\nimport type { Interpolation } from '../types';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport determineTheme from '../utils/determineTheme';\nimport generateComponentId from '../utils/generateComponentId';\nimport css from './css';\n\ndeclare var __SERVER__: boolean;\n\ntype GlobalStyleComponentPropsType = Object;\n\nexport default function createGlobalStyle(\n strings: Array,\n ...interpolations: Array\n) {\n const rules = css(strings, ...interpolations);\n const styledComponentId = `sc-global-${generateComponentId(JSON.stringify(rules))}`;\n const globalStyle = new GlobalStyle(rules, styledComponentId);\n\n if (process.env.NODE_ENV !== 'production') {\n checkDynamicCreation(styledComponentId);\n }\n\n function GlobalStyleComponent(props: GlobalStyleComponentPropsType) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n const theme = useContext(ThemeContext);\n const instanceRef = useRef(styleSheet.allocateGSInstance(styledComponentId));\n\n const instance = instanceRef.current;\n\n if (process.env.NODE_ENV !== 'production' && React.Children.count(props.children)) {\n // eslint-disable-next-line no-console\n console.warn(\n `The global style component ${styledComponentId} was given child JSX. createGlobalStyle does not render children.`\n );\n }\n\n if (\n process.env.NODE_ENV !== 'production' &&\n rules.some(rule => typeof rule === 'string' && rule.indexOf('@import') !== -1)\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n `Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical meta tag to the stylesheet, or simply embedding it manually in your index.html section for a simpler app.`\n );\n }\n\n if (styleSheet.server) {\n renderStyles(instance, props, styleSheet, theme, stylis);\n }\n\n if (!__SERVER__) {\n // this conditional is fine because it is compiled away for the relevant builds during minification,\n // resulting in a single unguarded hook call\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useLayoutEffect(() => {\n if (!styleSheet.server) {\n renderStyles(instance, props, styleSheet, theme, stylis);\n return () => globalStyle.removeStyles(instance, styleSheet);\n }\n }, [instance, props, styleSheet, theme, stylis]);\n }\n\n return null;\n }\n\n function renderStyles(instance, props, styleSheet, theme, stylis) {\n if (globalStyle.isStatic) {\n globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);\n } else {\n const context = {\n ...props,\n theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps),\n };\n\n globalStyle.renderStyles(instance, context, styleSheet, stylis);\n }\n }\n\n // $FlowFixMe\n return React.memo(GlobalStyleComponent);\n}\n","// @flow\n\nimport css from './css';\nimport generateComponentId from '../utils/generateComponentId';\nimport Keyframes from '../models/Keyframes';\n\nimport type { Interpolation, Styles } from '../types';\n\nexport default function keyframes(\n strings: Styles,\n ...interpolations: Array\n): Keyframes {\n /* Warning if you've used keyframes on React Native */\n if (\n process.env.NODE_ENV !== 'production' &&\n typeof navigator !== 'undefined' &&\n navigator.product === 'ReactNative'\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n '`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.'\n );\n }\n\n const rules = css(strings, ...interpolations).join('');\n const name = generateComponentId(rules);\n return new Keyframes(name, rules);\n}\n","// @flow\n/* eslint-disable no-underscore-dangle */\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n isStreaming: boolean;\n\n instance: StyleSheet;\n\n sealed: boolean;\n\n constructor() {\n this.instance = new StyleSheet({ isServer: true });\n this.sealed = false;\n }\n\n _emitSheetCSS = (): string => {\n const css = this.instance.toString();\n if (!css) return '';\n\n const nonce = getNonce();\n const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n const htmlAttr = attrs.filter(Boolean).join(' ');\n\n return ``;\n };\n\n collectStyles(children: any) {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return {children};\n }\n\n getStyleTags = (): string => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return this._emitSheetCSS();\n };\n\n getStyleElement = () => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n const props = {\n [SC_ATTR]: '',\n [SC_ATTR_VERSION]: SC_VERSION,\n dangerouslySetInnerHTML: {\n __html: this.instance.toString(),\n },\n };\n\n const nonce = getNonce();\n if (nonce) {\n (props: any).nonce = nonce;\n }\n\n // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n return [];\n };\n\n // eslint-disable-next-line consistent-return\n interleaveWithNodeStream(input: any) {\n if (!__SERVER__ || IS_BROWSER) {\n return throwStyledError(3);\n } else if (this.sealed) {\n return throwStyledError(2);\n }\n\n if (__SERVER__) {\n this.seal();\n\n // eslint-disable-next-line global-require\n const { Readable, Transform } = require('stream');\n\n const readableStream: Readable = input;\n const { instance: sheet, _emitSheetCSS } = this;\n\n const transformer = new Transform({\n transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n // then reset its rules so we get only new ones for the next chunk\n const renderedHtml = chunk.toString();\n const html = _emitSheetCSS();\n\n sheet.clearTag();\n\n // prepend style html to chunk, unless the start of the chunk is a\n // closing tag in which case append right after that\n if (CLOSING_TAG_R.test(renderedHtml)) {\n const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n const before = renderedHtml.slice(0, endOfClosingTag);\n const after = renderedHtml.slice(endOfClosingTag);\n\n this.push(before + html + after);\n } else {\n this.push(html + renderedHtml);\n }\n\n callback();\n },\n });\n\n readableStream.on('error', err => {\n // forward the error to the transform stream\n transformer.emit('error', err);\n });\n\n return readableStream.pipe(transformer);\n }\n }\n\n seal = () => {\n this.sealed = true;\n };\n}\n","// @flow\nimport React, { useContext, type AbstractComponent } from 'react';\nimport hoistStatics from 'hoist-non-react-statics';\nimport { ThemeContext } from '../models/ThemeProvider';\nimport determineTheme from '../utils/determineTheme';\nimport getComponentName from '../utils/getComponentName';\n\n// NOTE: this would be the correct signature:\n// export default (\n// Component: AbstractComponent\n// ): AbstractComponent<$Diff & { theme?: any }, Instance>\n//\n// but the old build system tooling doesn't support the syntax\n\nexport default (Component: AbstractComponent<*, *>) => {\n // $FlowFixMe This should be React.forwardRef\n const WithTheme = React.forwardRef((props, ref) => {\n const theme = useContext(ThemeContext);\n // $FlowFixMe defaultProps isn't declared so it can be inferrable\n const { defaultProps } = Component;\n const themeProp = determineTheme(props, theme, defaultProps);\n\n if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {\n // eslint-disable-next-line no-console\n console.warn(\n `[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"${getComponentName(\n Component\n )}\"`\n );\n }\n\n return ;\n });\n\n hoistStatics(WithTheme, Component);\n\n WithTheme.displayName = `WithTheme(${getComponentName(Component)})`;\n\n return WithTheme;\n};\n","// @flow\nimport { useContext } from 'react';\nimport { ThemeContext } from '../models/ThemeProvider';\n\nconst useTheme = () => useContext(ThemeContext);\n\nexport default useTheme;\n","// @flow\n/* eslint-disable */\n\nimport StyleSheet from './sheet';\nimport { masterSheet } from './models/StyleSheetManager';\n\nexport const __PRIVATE__ = {\n StyleSheet,\n masterSheet,\n};\n","// @flow\n/* Import singletons */\nimport isStyledComponent from './utils/isStyledComponent';\nimport css from './constructors/css';\nimport createGlobalStyle from './constructors/createGlobalStyle';\nimport keyframes from './constructors/keyframes';\nimport ServerStyleSheet from './models/ServerStyleSheet';\nimport { SC_VERSION } from './constants';\n\nimport StyleSheetManager, {\n StyleSheetContext,\n StyleSheetConsumer,\n} from './models/StyleSheetManager';\n\n/* Import components */\nimport ThemeProvider, { ThemeContext, ThemeConsumer } from './models/ThemeProvider';\n\n/* Import Higher Order Components */\nimport withTheme from './hoc/withTheme';\n\n/* Import hooks */\nimport useTheme from './hooks/useTheme';\n\ndeclare var __SERVER__: boolean;\n\n/* Warning if you've imported this file on React Native */\nif (\n process.env.NODE_ENV !== 'production' &&\n typeof navigator !== 'undefined' &&\n navigator.product === 'ReactNative'\n) {\n // eslint-disable-next-line no-console\n console.warn(\n \"It looks like you've imported 'styled-components' on React Native.\\n\" +\n \"Perhaps you're looking to import 'styled-components/native'?\\n\" +\n 'Read more about this at https://www.styled-components.com/docs/basics#react-native'\n );\n}\n\n/* Warning if there are several instances of styled-components */\nif (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {\n window['__styled-components-init__'] = window['__styled-components-init__'] || 0;\n\n if (window['__styled-components-init__'] === 1) {\n // eslint-disable-next-line no-console\n console.warn(\n \"It looks like there are several instances of 'styled-components' initialized in this application. \" +\n 'This may cause dynamic styles to not render properly, errors during the rehydration process, ' +\n 'a missing theme prop, and makes your application bigger without good reason.\\n\\n' +\n 'See https://s-c.sh/2BAXzed for more info.'\n );\n }\n\n window['__styled-components-init__'] += 1;\n}\n\n/* Export everything */\nexport * from './secretInternals';\nexport {\n createGlobalStyle,\n css,\n isStyledComponent,\n keyframes,\n ServerStyleSheet,\n StyleSheetConsumer,\n StyleSheetContext,\n StyleSheetManager,\n ThemeConsumer,\n ThemeContext,\n ThemeProvider,\n useTheme,\n SC_VERSION as version,\n withTheme,\n};\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);\nvar leafPrototypes;\n// create a fake namespace object\n// mode & 1: value is a module id, require it\n// mode & 2: merge all properties of value into the ns\n// mode & 4: return value when already ns object\n// mode & 16: return value when it's Promise-like\n// mode & 8|1: behave like require\n__webpack_require__.t = function(value, mode) {\n\tif(mode & 1) value = this(value);\n\tif(mode & 8) return value;\n\tif(typeof value === 'object' && value) {\n\t\tif((mode & 4) && value.__esModule) return value;\n\t\tif((mode & 16) && typeof value.then === 'function') return value;\n\t}\n\tvar ns = Object.create(null);\n\t__webpack_require__.r(ns);\n\tvar def = {};\n\tleafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];\n\tfor(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {\n\t\tObject.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));\n\t}\n\tdef['default'] = () => (value);\n\t__webpack_require__.d(ns, def);\n\treturn ns;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.f = {};\n// This file contains only the entry chunk.\n// The chunk loading function for additional chunks\n__webpack_require__.e = (chunkId) => {\n\treturn Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {\n\t\t__webpack_require__.f[key](chunkId, promises);\n\t\treturn promises;\n\t}, []));\n};","// This function allow to reference async chunks\n__webpack_require__.u = (chunkId) => {\n\t// return url for filenames based on template\n\treturn \"static/js/\" + chunkId + \".\" + \"227eed4e\" + \".chunk.js\";\n};","// This function allow to reference async chunks\n__webpack_require__.miniCssF = (chunkId) => {\n\t// return url for filenames based on template\n\treturn undefined;\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var inProgress = {};\nvar dataWebpackPrefix = \"aitapissko-counseling-collective:\";\n// loadScript function to load a script via script tag\n__webpack_require__.l = (url, done, key, chunkId) => {\n\tif(inProgress[url]) { inProgress[url].push(done); return; }\n\tvar script, needAttach;\n\tif(key !== undefined) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tfor(var i = 0; i < scripts.length; i++) {\n\t\t\tvar s = scripts[i];\n\t\t\tif(s.getAttribute(\"src\") == url || s.getAttribute(\"data-webpack\") == dataWebpackPrefix + key) { script = s; break; }\n\t\t}\n\t}\n\tif(!script) {\n\t\tneedAttach = true;\n\t\tscript = document.createElement('script');\n\n\t\tscript.charset = 'utf-8';\n\t\tscript.timeout = 120;\n\t\tif (__webpack_require__.nc) {\n\t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n\t\t}\n\t\tscript.setAttribute(\"data-webpack\", dataWebpackPrefix + key);\n\n\t\tscript.src = url;\n\t}\n\tinProgress[url] = [done];\n\tvar onScriptComplete = (prev, event) => {\n\t\t// avoid mem leaks in IE.\n\t\tscript.onerror = script.onload = null;\n\t\tclearTimeout(timeout);\n\t\tvar doneFns = inProgress[url];\n\t\tdelete inProgress[url];\n\t\tscript.parentNode && script.parentNode.removeChild(script);\n\t\tdoneFns && doneFns.forEach((fn) => (fn(event)));\n\t\tif(prev) return prev(event);\n\t}\n\tvar timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);\n\tscript.onerror = onScriptComplete.bind(null, script.onerror);\n\tscript.onload = onScriptComplete.bind(null, script.onload);\n\tneedAttach && document.head.appendChild(script);\n};","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"/\";","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t792: 0\n};\n\n__webpack_require__.f.j = (chunkId, promises) => {\n\t\t// JSONP chunk loading for javascript\n\t\tvar installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;\n\t\tif(installedChunkData !== 0) { // 0 means \"already installed\".\n\n\t\t\t// a Promise means \"currently loading\".\n\t\t\tif(installedChunkData) {\n\t\t\t\tpromises.push(installedChunkData[2]);\n\t\t\t} else {\n\t\t\t\tif(true) { // all chunks have JS\n\t\t\t\t\t// setup Promise in chunk cache\n\t\t\t\t\tvar promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));\n\t\t\t\t\tpromises.push(installedChunkData[2] = promise);\n\n\t\t\t\t\t// start chunk loading\n\t\t\t\t\tvar url = __webpack_require__.p + __webpack_require__.u(chunkId);\n\t\t\t\t\t// create error before stack unwound to get useful stacktrace later\n\t\t\t\t\tvar error = new Error();\n\t\t\t\t\tvar loadingEnded = (event) => {\n\t\t\t\t\t\tif(__webpack_require__.o(installedChunks, chunkId)) {\n\t\t\t\t\t\t\tinstalledChunkData = installedChunks[chunkId];\n\t\t\t\t\t\t\tif(installedChunkData !== 0) installedChunks[chunkId] = undefined;\n\t\t\t\t\t\t\tif(installedChunkData) {\n\t\t\t\t\t\t\t\tvar errorType = event && (event.type === 'load' ? 'missing' : event.type);\n\t\t\t\t\t\t\t\tvar realSrc = event && event.target && event.target.src;\n\t\t\t\t\t\t\t\terror.message = 'Loading chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';\n\t\t\t\t\t\t\t\terror.name = 'ChunkLoadError';\n\t\t\t\t\t\t\t\terror.type = errorType;\n\t\t\t\t\t\t\t\terror.request = realSrc;\n\t\t\t\t\t\t\t\tinstalledChunkData[1](error);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\t__webpack_require__.l(url, loadingEnded, \"chunk-\" + chunkId, chunkId);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n};\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n// no on chunks loaded\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkaitapissko_counseling_collective\"] = self[\"webpackChunkaitapissko_counseling_collective\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","__webpack_require__.nc = undefined;","function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nexport var isObject = function isObject(item) {\n return item && typeof item === 'object' && !Array.isArray(item);\n};\nexport var deepFreeze = function deepFreeze(obj) {\n Object.keys(obj).forEach(function (key) {\n return key && isObject(obj[key]) && Object.freeze(obj[key]);\n });\n return Object.freeze(obj);\n};\nexport var deepMerge = function deepMerge(target) {\n for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n sources[_key - 1] = arguments[_key];\n }\n if (!sources.length) {\n return target;\n }\n // making sure to not change target (immutable)\n var output = _extends({}, target);\n sources.forEach(function (source) {\n if (isObject(source)) {\n Object.keys(source).forEach(function (key) {\n if (isObject(source[key])) {\n if (!output[key]) {\n output[key] = _extends({}, source[key]);\n } else {\n output[key] = deepMerge(output[key], source[key]);\n }\n } else {\n output[key] = source[key];\n }\n });\n }\n });\n return output;\n};\nexport var removeUndefined = function removeUndefined(obj) {\n var result = {};\n Object.keys(obj).forEach(function (key) {\n if (obj[key] !== undefined) {\n result[key] = obj[key];\n }\n });\n return result;\n};","import { css } from 'styled-components';\nexport var parseMetricToNum = function parseMetricToNum(metric) {\n if (typeof metric === 'number') return metric;\n if (metric.match(/\\s/) && process.env.NODE_ENV !== 'production') {\n console.warn(\"Invalid single measurement value: \\\"\" + metric + \"\\\"\");\n }\n return parseFloat(metric.match(/\\d+(\\.\\d+)?/), 10);\n};\nexport var edgeToNum = function edgeToNum(size, theme) {\n return size ? parseMetricToNum(theme.global.edgeSize[size] || size) : 0;\n};\nexport var fontSize = function fontSize(size, lineHeight) {\n return css([\"font-size:\", \";line-height:\", \";\"], function (props) {\n return parseMetricToNum(size) / parseMetricToNum(props.theme.global.font.size) * 1 + \"rem\";\n }, function (props) {\n return lineHeight || Math.ceil(parseMetricToNum(size) / parseMetricToNum(props.theme.global.lineHeight)) * (parseMetricToNum(props.theme.global.lineHeight) / parseMetricToNum(size)) + \"px\";\n });\n};\nexport var breakpointStyle = function breakpointStyle(breakpoint, content) {\n return css([\"@media only screen \", \"{\", \";}\"], breakpoint.value && \"and (max-width: \" + breakpoint.value + \"px)\", content);\n};\nexport var findAllByType = function findAllByType(component, type) {\n var matches = [];\n if (component.type === type) {\n matches.push(component);\n }\n if (component.children) {\n component.children.forEach(function (child) {\n matches = matches.concat(findAllByType(child, type));\n });\n }\n return matches;\n};\nexport var getAvailableAtBadge = function getAvailableAtBadge(availableAt, componentType) {\n return [{\n url: \"https://storybook.grommet.io/?selectedKind=\" + componentType + \"-\" + availableAt + \"&full=0&stories=1&panelRight=0\",\n badge: 'https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png',\n label: 'Storybook'\n }, {\n url: \"https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/\" + availableAt.toLowerCase() + \"&module=%2Fsrc%2F\" + availableAt + \".js\",\n badge: 'https://codesandbox.io/static/img/play-codesandbox.svg',\n label: 'CodeSandbox'\n }];\n};","function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport { Actions } from 'grommet-icons/icons/Actions';\nimport { AssistListening } from 'grommet-icons/icons/AssistListening';\nimport { CircleInformation } from 'grommet-icons/icons/CircleInformation';\nimport { ClosedCaption } from 'grommet-icons/icons/ClosedCaption';\nimport { Expand } from 'grommet-icons/icons/Expand';\nimport { FormClose } from 'grommet-icons/icons/FormClose';\nimport { FormDown } from 'grommet-icons/icons/FormDown';\nimport { FormNext } from 'grommet-icons/icons/FormNext';\nimport { FormPrevious } from 'grommet-icons/icons/FormPrevious';\nimport { FormUp } from 'grommet-icons/icons/FormUp';\nimport { Next } from 'grommet-icons/icons/Next';\nimport { Pause } from 'grommet-icons/icons/Pause';\nimport { Play } from 'grommet-icons/icons/Play';\nimport { FormPin } from 'grommet-icons/icons/FormPin';\nimport { Previous } from 'grommet-icons/icons/Previous';\nimport { StatusCriticalSmall } from 'grommet-icons/icons/StatusCriticalSmall';\nimport { StatusGoodSmall } from 'grommet-icons/icons/StatusGoodSmall';\nimport { StatusWarningSmall } from 'grommet-icons/icons/StatusWarningSmall';\nimport { StatusUnknownSmall } from 'grommet-icons/icons/StatusUnknownSmall';\nimport { Subtract } from 'grommet-icons/icons/Subtract';\nimport { Volume } from 'grommet-icons/icons/Volume';\nimport { VolumeLow } from 'grommet-icons/icons/VolumeLow';\nimport { base as iconBase } from 'grommet-icons/themes/base';\nimport { deepFreeze, deepMerge } from '../utils/object';\nimport { parseMetricToNum } from '../utils/mixins';\nvar brandColor = '#7D4CDB';\nvar accentColors = ['#6FFFB0', '#FD6FFF', '#81FCED', '#FFCA58'];\nvar neutralColors = ['#00873D', '#3D138D', '#00739D', '#A2423D'];\nvar statusColors = {\n critical: '#FF4040',\n error: '#B30000',\n warning: '#FFAA15',\n ok: '#00C781',\n unknown: '#CCCCCC',\n disabled: '#CCCCCC'\n};\nvar darkColors = ['#333333', '#555555', '#777777', '#999999', '#999999', '#999999'];\nvar lightColors = ['#F8F8F8', '#F2F2F2', '#EDEDED', '#DADADA', '#DADADA', '#DADADA'];\nvar focusColor = accentColors[0];\nvar colors = {\n active: 'rgba(221, 221, 221, 0.5)',\n 'background-back': {\n dark: '#33333308',\n light: '#EDEDED'\n },\n 'background-front': {\n dark: '#444444',\n light: '#FFFFFF'\n },\n 'background-contrast': {\n light: '#33333310',\n dark: '#FFFFFF18'\n },\n 'active-background': 'background-contrast',\n 'active-text': 'text-strong',\n black: '#000000',\n border: {\n dark: 'rgba(255, 255, 255, 0.33)',\n light: 'rgba(0, 0, 0, 0.33)'\n },\n brand: brandColor,\n control: {\n dark: 'accent-1',\n light: 'brand'\n },\n focus: focusColor,\n 'graph-0': 'accent-1',\n 'graph-1': 'neutral-1',\n 'graph-2': 'neutral-2',\n 'graph-3': 'neutral-3',\n 'graph-4': 'neutral-4',\n placeholder: '#AAAAAA',\n selected: 'brand',\n text: {\n dark: '#f8f8f8',\n light: '#444444'\n },\n 'text-strong': {\n dark: '#FFFFFF',\n light: '#000000'\n },\n 'text-weak': {\n dark: '#CCCCCC',\n light: '#555555'\n },\n 'text-xweak': {\n dark: '#BBBBBB',\n light: '#666666'\n },\n icon: {\n dark: '#f8f8f8',\n light: '#666666'\n },\n 'selected-background': 'brand',\n 'selected-text': 'text-strong',\n white: '#FFFFFF'\n};\nvar colorArray = function colorArray(array, prefix) {\n return array.forEach(function (color, index) {\n colors[prefix + \"-\" + (index + 1)] = color;\n });\n};\ncolorArray(accentColors, 'accent');\ncolorArray(darkColors, 'dark');\ncolorArray(lightColors, 'light');\ncolorArray(neutralColors, 'neutral');\nObject.keys(statusColors).forEach(function (color) {\n colors[\"status-\" + color] = statusColors[color];\n});\nexport var generate = function generate(baseSpacing, scale) {\n if (baseSpacing === void 0) {\n baseSpacing = 24;\n }\n if (scale === void 0) {\n scale = 6;\n }\n // 24\n var baseFontSize = baseSpacing * 0.75; // 18\n var fontScale = baseSpacing / scale; // 4\n\n var fontSizing = function fontSizing(factor) {\n return {\n size: baseFontSize + factor * fontScale + \"px\",\n height: baseSpacing + factor * fontScale + \"px\",\n // maxWidth chosen to be ~50 characters wide\n // see: https://ux.stackexchange.com/a/34125\n maxWidth: baseSpacing * (baseFontSize + factor * fontScale) + \"px\"\n };\n };\n var borderWidth = 2;\n var controlBorderWidth = 1;\n var result = deepMerge(iconBase, {\n global: {\n active: {\n background: {\n color: 'active',\n opacity: 'medium'\n },\n color: {\n dark: 'white',\n light: 'black'\n }\n },\n animation: {\n duration: '1s',\n jiggle: {\n duration: '0.1s'\n }\n },\n // backgrounds: undefined,\n borderSize: {\n xsmall: '1px',\n small: '2px',\n medium: baseSpacing / 6 + \"px\",\n // 4\n large: baseSpacing / 2 + \"px\",\n // 12\n xlarge: baseSpacing + \"px\" // 24\n },\n breakpoints: {\n small: {\n value: baseSpacing * 32,\n // 768\n borderSize: {\n xsmall: '1px',\n small: '2px',\n medium: baseSpacing / 6 + \"px\",\n // 4\n large: baseSpacing / 4 + \"px\",\n // 6\n xlarge: baseSpacing / 2 + \"px\" // 12\n },\n edgeSize: {\n none: '0px',\n hair: '1px',\n // for Chart\n xxsmall: '2px',\n xsmall: baseSpacing / 8 + \"px\",\n // 3\n small: baseSpacing / 4 + \"px\",\n // 6\n medium: baseSpacing / 2 + \"px\",\n // 12\n large: baseSpacing + \"px\",\n // 24\n xlarge: baseSpacing * 2 + \"px\" // 48\n },\n size: {\n xxsmall: baseSpacing + \"px\",\n // 24\n xsmall: baseSpacing * 2 + \"px\",\n // 48\n small: baseSpacing * 4 + \"px\",\n // 96\n medium: baseSpacing * 8 + \"px\",\n // 192\n large: baseSpacing * 16 + \"px\",\n // 384\n xlarge: baseSpacing * 32 + \"px\",\n // 768\n full: '100%'\n }\n },\n medium: {\n value: baseSpacing * 64 // 1536\n },\n large: {} // anything above 'medium'\n },\n // Breakpoints used at Server Side Rendering for the initial rendering\n // These values correspond to the theme breakpoints\n deviceBreakpoints: {\n phone: 'small',\n tablet: 'medium',\n computer: 'large'\n },\n colors: colors,\n control: {\n border: {\n width: controlBorderWidth + \"px\",\n radius: '4px',\n color: 'border'\n },\n disabled: {\n opacity: 0.3\n }\n },\n // The time to wait after the user stopped typing, measured in ms.\n // A half second (500ms) debounce can be a helpful starting point.\n // You want to give the user time to fill out a field, but capture\n // their attention before they move on past it. 2 second (2000ms)\n // might be too long depending on how fast people type, and 200ms\n // would be an eye blink\n debounceDelay: 500,\n drop: {\n // intelligentMargin: undefined,\n background: {\n dark: 'black',\n light: 'white'\n },\n border: {\n radius: '0px'\n },\n // margin: undefined\n shadowSize: 'small',\n // shadowSize is deprecated, use 'elevation'\n zIndex: '20'\n },\n edgeSize: {\n none: '0px',\n hair: '1px',\n // for Chart\n xxsmall: baseSpacing / 8 + \"px\",\n // 3\n xsmall: baseSpacing / 4 + \"px\",\n // 6\n small: baseSpacing / 2 + \"px\",\n // 12\n medium: baseSpacing + \"px\",\n // 24\n large: baseSpacing * 2 + \"px\",\n // 48\n xlarge: baseSpacing * 4 + \"px\",\n // 96\n responsiveBreakpoint: 'small'\n },\n elevation: {\n light: {\n none: 'none',\n xsmall: '0px 1px 2px rgba(0, 0, 0, 0.20)',\n small: '0px 2px 4px rgba(0, 0, 0, 0.20)',\n medium: '0px 4px 8px rgba(0, 0, 0, 0.20)',\n large: '0px 8px 16px rgba(0, 0, 0, 0.20)',\n xlarge: '0px 12px 24px rgba(0, 0, 0, 0.20)'\n },\n dark: {\n none: 'none',\n xsmall: '0px 2px 2px rgba(255, 255, 255, 0.40)',\n small: '0px 4px 4px rgba(255, 255, 255, 0.40)',\n medium: '0px 6px 8px rgba(255, 255, 255, 0.40)',\n large: '0px 8px 16px rgba(255, 255, 255, 0.40)',\n xlarge: '0px 12px 24px rgba(255, 255, 255, 0.40)'\n }\n },\n focus: {\n // shadow or outline are required for accessibility\n border: {\n // remove to only have shadow\n color: 'focus'\n },\n // outline: { color: undefined, size: undefined },\n shadow: {\n color: 'focus',\n size: '2px'\n }\n },\n font: _extends({}, fontSizing(0)),\n hover: {\n background: {\n color: 'active',\n opacity: 'medium'\n },\n color: {\n dark: 'white',\n light: 'black'\n }\n },\n input: {\n padding: {\n horizontal: parseMetricToNum(baseSpacing / 2 + \"px\") - parseMetricToNum(controlBorderWidth + \"px\") + \"px\",\n vertical: parseMetricToNum(baseSpacing / 2 + \"px\") - parseMetricToNum(controlBorderWidth + \"px\") + \"px\"\n },\n font: {\n // size: undefined,\n // height: undefined,\n weight: 600\n },\n // deprecate in v3\n // weight: undefined,\n readOnly: {\n // background: undefined,\n // border: {\n // color: undefined,\n // },\n }\n },\n opacity: {\n strong: 0.8,\n medium: 0.4,\n weak: 0.1\n },\n selected: {\n background: 'selected',\n color: 'white'\n },\n spacing: baseSpacing + \"px\",\n size: {\n xxsmall: baseSpacing * 2 + \"px\",\n // 48\n xsmall: baseSpacing * 4 + \"px\",\n // 96\n small: baseSpacing * 8 + \"px\",\n // 192\n medium: baseSpacing * 16 + \"px\",\n // 384\n large: baseSpacing * 32 + \"px\",\n // 768\n xlarge: baseSpacing * 48 + \"px\",\n // 1152\n xxlarge: baseSpacing * 64 + \"px\",\n // 1536\n full: '100%'\n }\n },\n // icon: {\n // extennd: undefined,\n // matchSize: undefined,\n // size: undefined,\n // },\n accordion: {\n panel: {\n // border: {\n // side: 'bottom',\n // color: 'border',\n // },\n },\n border: {\n side: 'bottom',\n color: 'border'\n },\n heading: {\n level: '4' // level ranges from 1-6\n // margin: undefined\n },\n hover: {\n // background: undefined,\n color: {\n dark: 'light-4',\n light: 'dark-3'\n },\n // deprecated\n heading: {\n color: {\n dark: 'light-4',\n light: 'dark-3'\n }\n }\n },\n icons: {\n collapse: FormUp,\n expand: FormDown\n // color: { dark: undefined, light: undefined },\n }\n },\n anchor: {\n textDecoration: 'none',\n fontWeight: 600,\n color: {\n dark: 'accent-1',\n light: 'brand'\n },\n gap: 'small',\n hover: {\n textDecoration: 'underline'\n // fontWeight: undefined,\n // extend: undefined,\n }\n // size: {\n // medium: {\n // color: undefined,\n // fontWeight: undefined,\n // textDecoration: undefined,\n // },\n // },\n // extend: undefined,\n },\n avatar: {\n // extend: undefined,\n size: {\n xsmall: baseSpacing * 0.75 + \"px\",\n // 18px\n small: baseSpacing + \"px\",\n // 24px\n medium: baseSpacing * 2 + \"px\",\n // default 48px\n large: baseSpacing * 3 + \"px\",\n // 72px\n xlarge: baseSpacing * 4 + \"px\",\n // 96px\n '2xl': baseSpacing * 5 + \"px\",\n // 120px\n '3xl': baseSpacing * 6 + \"px\",\n // 144px\n '4xl': baseSpacing * 7 + \"px\",\n // 168px\n '5xl': baseSpacing * 8 + \"px\" // 192px\n },\n text: {\n size: {\n xsmall: 'small',\n // 14px\n small: 'medium',\n // 18px\n medium: 'large',\n // 22px\n large: 'xlarge',\n // 26px\n xlarge: 'xxlarge',\n // 34px\n '2xl': '3xl',\n // 42px\n '3xl': '4xl',\n // 54px\n '4xl': '5xl',\n // 70px\n '5xl': '6xl' // 90px\n }\n // fontWeight: undefined,\n // extend: undefined\n }\n },\n box: {\n responsiveBreakpoint: 'small' // when we switch rows to columns\n // extend: undefined,\n },\n button: {\n badge: {\n // align: undefined,,\n container: {\n background: 'brand'\n // pad: undefined,\n // extend: undefined,\n },\n size: {\n medium: baseSpacing + \"px\" // 24px\n },\n text: {\n size: {\n medium: 'small' // 14px\n }\n }\n },\n gap: 'small',\n size: {\n small: {\n border: {\n radius: baseSpacing * 0.75 + \"px\"\n },\n pad: {\n vertical: baseSpacing / 4 - borderWidth + \"px\",\n // 4px\n horizontal: baseSpacing - borderWidth * 2 + \"px\" // 20px,\n }\n // iconOnly: {\n // pad: undefined,\n // },\n },\n medium: {\n border: {\n radius: baseSpacing * 0.75 + \"px\" // 18px\n },\n pad: {\n vertical: baseSpacing / 4 - borderWidth + \"px\",\n // 4px\n horizontal: baseSpacing - borderWidth + \"px\" // 22px\n }\n // iconOnly: {\n // pad: undefined,\n // },\n },\n large: {\n border: {\n radius: baseSpacing + \"px\" // 24px\n },\n pad: {\n vertical: baseSpacing / 4 + borderWidth + \"px\",\n // 8px\n horizontal: baseSpacing + borderWidth * 4 + \"px\" // 32px,\n }\n // iconOnly: {\n // pad: undefined,\n // },\n }\n },\n border: {\n // color: { dark: undefined, light: undefined }\n width: borderWidth + \"px\",\n radius: baseSpacing * 0.75 + \"px\"\n },\n // color: { dark: undefined, light: undefined }\n // default: {\n // background: undefined,\n // border: undefined,\n // color: undefined,\n // direction: undefined,\n // font: {\n // size: undefined,\n // weight: undefined,\n // },\n // icon: undefined,\n // padding: {\n // vertical: undefined,\n // horizontal: undefined,\n // },\n // reverse: undefined,\n // extend: undefined,\n // },\n // primary: {\n // font: {\n // size: undefined,\n // weight: undefined,\n // },\n // background: undefined,\n // border: undefined,\n // color: undefined,\n // direction: undefined,\n // icon: undefined,\n // padding: {\n // vertical: undefined,\n // horizontal: undefined,\n // },\n // reverse: undefined,\n // extend: undefined,\n // },\n // secondary: {\n // font: {\n // size: undefined,\n // weight: undefined,\n // },\n // background: undefined,\n // border: undefined,\n // color: undefined,\n // direction: undefined,\n // icon: undefined,\n // padding: {\n // vertical: undefined,\n // horizontal: undefined,\n // },\n // reverse: undefined,\n // extend: undefined,\n // },\n // option: {\n // background: undefined,\n // border: undefined,\n // color: undefined,\n // direction: undefined,\n // icon: undefined,\n // padding: {\n // vertical: undefined,\n // horizontal: undefined,\n // },\n // reverse: undefined,\n // extend: undefined,\n // },\n active: {\n background: 'active-background',\n // border: undefined,\n color: 'active-text'\n // extend: undefined,\n // default: {},\n // primary: {},\n // secondary: {},\n },\n disabled: {\n // background: undefined,\n // border: undefined,\n // color: undefined,\n opacity: 0.3\n // extend: undefined,\n // default: {},\n // primary: {},\n // secondary: {},\n },\n // hover: {\n // background: undefined,\n // border: undefined,\n // color: undefined,\n // extend: undefined,\n // default: {},\n // primary: {},\n // secondary: {},\n // },\n padding: {\n vertical: baseSpacing / 4 - borderWidth + \"px\",\n horizontal: baseSpacing - borderWidth + \"px\"\n },\n transition: {\n timing: 'ease-in-out',\n duration: 0.1,\n properties: ['color', 'background-color', 'border-color', 'box-shadow']\n },\n skeleton: {\n width: {\n min: '100px'\n }\n }\n },\n calendar: {\n // daySize must align with global.size\n small: {\n // title: {},\n fontSize: baseFontSize - fontScale + \"px\",\n lineHeight: 1.375,\n daySize: baseSpacing * 8 / 7 + \"px\",\n slideDuration: '0.2s'\n },\n medium: {\n // title: {},\n fontSize: baseFontSize + \"px\",\n lineHeight: 1.45,\n daySize: baseSpacing * 16 / 7 + \"px\",\n slideDuration: '0.5s'\n },\n large: {\n // title: {},\n fontSize: baseFontSize + 3 * fontScale + \"px\",\n lineHeight: 1.11,\n daySize: baseSpacing * 32 / 7 + \"px\",\n slideDuration: '0.8s'\n },\n icons: {\n previous: Previous,\n next: Next,\n small: {\n previous: FormPrevious,\n next: FormNext\n }\n },\n heading: {\n level: '4'\n } // level ranges from 1-6\n },\n card: {\n container: {\n round: 'small',\n elevation: 'small'\n // extend: undefined,\n },\n // hover: {\n // container: {\n // elevation: undefined,\n // },\n // },\n header: {},\n body: {},\n footer: {}\n },\n cards: {\n container: {\n // any box props\n gap: 'xsmall'\n // extend: undefined,\n }\n },\n carousel: {\n icons: {\n current: Subtract,\n next: Next,\n previous: Previous\n // color: { dark: undefined, light: undefined },\n },\n animation: {\n duration: 1000\n },\n disabled: {\n icons: {\n // color: { dark: undefined, light: undefined },\n }\n }\n },\n chart: {\n color: 'graph-0'\n // extend: undefined,\n },\n checkBox: {\n border: {\n color: {\n dark: 'rgba(255, 255, 255, 0.5)',\n light: 'rgba(0, 0, 0, 0.15)'\n },\n width: '2px'\n },\n check: {\n // extend: undefined,\n radius: '4px',\n thickness: '4px'\n },\n label: {\n align: 'center'\n },\n // color: { dark: undefined, light: undefined },\n // extend: undefined,\n // gap: undefined\n hover: {\n border: {\n color: {\n dark: 'white',\n light: 'black'\n }\n }\n // background: undefined,\n // extend: undefined,\n },\n icon: {\n // size: undefined,\n // extend: undefined,\n },\n icons: {\n // checked: undefined,\n // indeterminate: undefined,\n },\n // pad: undefined,\n size: baseSpacing + \"px\",\n toggle: {\n // background: undefined\n color: {\n dark: '#d9d9d9',\n light: '#d9d9d9'\n },\n knob: {\n // extend: undefined,\n },\n radius: baseSpacing + \"px\",\n size: baseSpacing * 2 + \"px\"\n // extend: undefined,\n }\n },\n checkBoxGroup: {\n // container: {\n // // any box props\n // extend: undefined,\n // },\n },\n clock: {\n analog: {\n // extend: undefined,\n hour: {\n color: {\n dark: 'light-2',\n light: 'dark-3'\n },\n width: baseSpacing / 3 + \"px\",\n size: baseSpacing + \"px\",\n shape: 'round'\n },\n minute: {\n color: {\n dark: 'light-4',\n light: 'dark-3'\n },\n width: baseSpacing / 6 + \"px\",\n size: Math.round(baseSpacing / 2) + \"px\",\n shape: 'round'\n },\n second: {\n color: {\n dark: 'accent-1',\n light: 'accent-1'\n },\n width: baseSpacing / 8 + \"px\",\n size: Math.round(baseSpacing / 2.666) + \"px\",\n shape: 'round'\n },\n size: {\n xsmall: baseSpacing * 2 + \"px\",\n small: baseSpacing * 3 + \"px\",\n medium: baseSpacing * 4 + \"px\",\n large: baseSpacing * 6 + \"px\",\n xlarge: baseSpacing * 9 + \"px\",\n xxlarge: baseSpacing * 12 + \"px\",\n huge: baseSpacing * 12 + \"px\" // kept for backwards compatibility\n }\n },\n digital: {\n text: {\n xsmall: {\n size: baseFontSize - 2 * fontScale + \"px\",\n height: 1.5\n },\n small: {\n size: baseFontSize - fontScale + \"px\",\n height: 1.43\n },\n medium: {\n size: baseFontSize + \"px\",\n height: 1.375\n },\n large: {\n size: baseFontSize + fontScale + \"px\",\n height: 1.167\n },\n xlarge: {\n size: baseFontSize + 2 * fontScale + \"px\",\n height: 1.1875\n },\n xxlarge: {\n size: baseFontSize + 4 * fontScale + \"px\",\n height: 1.125\n }\n }\n }\n },\n collapsible: {\n minSpeed: 200,\n baseline: 500\n },\n data: {\n // button: {\n // kind: undefined,\n // },\n },\n dateInput: {\n container: {\n round: 'xxsmall'\n }\n // icon: {\n // size: undefined,\n // },\n },\n dataTable: {\n // body: {\n // extend: undefined,\n // },\n pinned: {\n // body: {\n // background: undefined,\n // extend: undefined,\n // },\n header: {\n background: {\n opacity: 'strong'\n }\n // extend: undefined,\n },\n footer: {\n background: {\n opacity: 'strong'\n }\n // extend: undefined,\n }\n },\n container: {\n // any box props\n gap: 'xsmall'\n // extend: undefined,\n },\n groupHeader: {\n // background: undefined,\n // border: undefined,\n // pad: undefined,\n },\n groupEnd: {\n border: {\n side: 'bottom',\n size: 'xsmall'\n }\n },\n header: {\n // background: undefined,\n // border: undefined,\n // color: undefined,\n // extend: undefined,\n // font: {\n // weight: undefined,\n // size: undefined,\n // },\n gap: 'small',\n // hover: {\n // background: undefined,\n // },\n // pad: undefined,\n units: {\n color: 'text-xweak',\n margin: {\n left: 'xsmall'\n },\n alignSelf: 'end'\n }\n },\n icons: {\n ascending: FormDown,\n contract: FormUp,\n descending: FormUp,\n expand: FormDown\n // sortable: undefined,\n },\n primary: {\n weight: 'bold'\n },\n resize: {\n border: {\n color: 'border',\n side: 'end'\n }\n // hover: {\n // border: {\n // color: undefined,\n // side: undefined,\n // size: undefined,\n // },\n // },\n }\n },\n diagram: {\n // extend: undefined,\n line: {\n color: 'graph-0'\n }\n },\n // drop: {\n // extend: undefined,\n // maxHeight: undefined,\n // },\n fileInput: {\n // background: {},\n border: {\n // color: undefined,\n side: 'all',\n size: 'small',\n style: 'dashed'\n },\n dragOver: {\n border: {\n color: 'control'\n }\n // extend: undefined,\n },\n hover: {\n border: {\n color: 'brand'\n }\n // extend: undefined,\n },\n icons: {\n remove: FormClose\n },\n // pad: {},\n label: {\n margin: 'small'\n // extend: undefined,\n },\n message: {\n margin: 'small'\n // extend: undefined,\n }\n // extend: undefined,\n },\n formField: {\n border: {\n color: 'border',\n error: {\n color: {\n dark: 'white',\n light: 'status-critical'\n }\n },\n position: 'inner',\n side: 'bottom'\n },\n // checkBox: {\n // pad: undefined,\n // },\n content: {\n // margin: undefined,\n pad: 'small'\n },\n disabled: {\n background: {\n color: 'status-disabled',\n opacity: 'medium'\n }\n // border: {\n // color: undefined,\n // },\n // label: {\n // color: undefined,\n // },\n },\n // focus: {\n // background: {\n // color: undefined,\n // },\n // border: {\n // color: undefined,\n // },\n // },\n error: {\n color: 'status-critical',\n margin: {\n vertical: 'xsmall',\n horizontal: 'small'\n }\n // background: undefined,\n // container: {}, // any Box props\n // icon: undefined,\n },\n // extend: undefined,\n help: {\n color: 'dark-3',\n margin: {\n start: 'small'\n }\n },\n info: {\n color: 'text-xweak',\n margin: {\n vertical: 'xsmall',\n horizontal: 'small'\n }\n // container: {}, // any Box props\n // icon: undefined,\n },\n label: {\n margin: {\n vertical: 'xsmall',\n horizontal: 'small'\n }\n // requiredIndicator: undefined,\n },\n margin: {\n bottom: 'small'\n },\n // round: undefined,\n survey: {\n label: {\n margin: {\n bottom: 'xsmall'\n },\n size: 'medium',\n weight: 400\n }\n }\n },\n grommet: {\n // extend: undefined\n },\n header: {\n sticky: {\n zIndex: '20'\n }\n },\n heading: {\n // color: undefined,\n font: {\n // family: undefined\n },\n level: {\n 1: {\n font: {\n // family: undefined,\n // weight: undefined,\n },\n small: _extends({}, fontSizing(4)),\n medium: _extends({}, fontSizing(8)),\n large: _extends({}, fontSizing(16)),\n xlarge: _extends({}, fontSizing(24))\n },\n 2: {\n font: {\n // family: undefined,\n // weight: undefined,\n },\n small: _extends({}, fontSizing(2)),\n medium: _extends({}, fontSizing(4)),\n large: _extends({}, fontSizing(8)),\n xlarge: _extends({}, fontSizing(12))\n },\n 3: {\n font: {\n // family: undefined,\n // weight: undefined,\n },\n small: _extends({}, fontSizing(1)),\n medium: _extends({}, fontSizing(2)),\n large: _extends({}, fontSizing(4)),\n xlarge: _extends({}, fontSizing(6))\n },\n 4: {\n font: {\n // family: undefined,\n // weight: undefined,\n },\n small: _extends({}, fontSizing(0)),\n medium: _extends({}, fontSizing(0)),\n large: _extends({}, fontSizing(0)),\n xlarge: _extends({}, fontSizing(0))\n },\n 5: {\n font: {\n // family: undefined,\n // weight: undefined,\n },\n small: _extends({}, fontSizing(-0.5)),\n medium: _extends({}, fontSizing(-0.5)),\n large: _extends({}, fontSizing(-0.5)),\n xlarge: _extends({}, fontSizing(-0.5))\n },\n 6: {\n font: {\n // family: undefined,\n // weight: undefined,\n },\n small: _extends({}, fontSizing(-1)),\n medium: _extends({}, fontSizing(-1)),\n large: _extends({}, fontSizing(-1)),\n xlarge: _extends({}, fontSizing(-1))\n }\n },\n responsiveBreakpoint: 'small',\n // when we scale the font size down\n weight: 600,\n skeleton: {\n width: {\n min: '150px',\n max: '200px'\n }\n }\n },\n layer: {\n background: {\n dark: 'black',\n light: 'white'\n },\n border: {\n radius: '4px'\n // intelligentRounding: undefined,\n },\n container: {\n // elevation: undefined,\n zIndex: '20'\n },\n // extend: undefined,\n overlay: {\n background: 'rgba(0, 0, 0, 0.5)'\n // backdropFilter: undefined,\n },\n responsiveBreakpoint: 'small',\n // when Layer takes over the full screen\n zIndex: '20'\n },\n list: {\n container: {\n // any box props\n gap: 'xsmall'\n // extend: undefined,\n },\n item: {\n // background: undefined,\n border: 'horizontal',\n disabled: {\n color: 'status-disabled',\n cursor: 'default'\n },\n pinned: {\n background: 'background-contrast',\n icon: {\n size: 'medium',\n pad: 'small'\n }\n },\n pad: {\n horizontal: 'medium',\n vertical: 'small'\n }\n // extend: undefined,\n },\n primaryKey: {\n // any text props\n weight: 'bold'\n },\n icons: {\n down: FormDown,\n up: FormUp,\n pin: FormPin\n }\n // extend: undefined,\n },\n maskedInput: {\n // container: {\n // extend: undefined,\n // },\n // extend: undefined,\n // disabled: { opacity: undefined },\n },\n menu: {\n // background: undefined,\n // item: undefined,\n // extend: undefined,\n drop: {\n align: {\n top: 'top',\n left: 'left'\n }\n // any drop props\n },\n group: {\n container: {\n pad: {\n vertical: 'xsmall'\n }\n },\n separator: {\n color: 'border',\n size: 'xsmall',\n pad: {\n horizontal: 'small'\n }\n }\n },\n icons: {\n down: FormDown\n // up: undefined,\n // color: { dark: undefined, light: undefined },\n }\n },\n meter: {\n color: 'graph-0'\n // colors: [] || colors: ['graph-0', 'graph-1', 'graph-2', 'graph-3'],\n // extend: undefined,\n },\n nameValueList: {\n gap: {\n column: 'large',\n row: 'small'\n },\n pair: {\n column: {\n gap: {\n column: 'large',\n row: 'medium'\n }\n }\n },\n name: {\n width: 'small'\n },\n value: {\n width: 'medium'\n }\n },\n nameValuePair: {\n column: {\n gap: 'xxsmall'\n },\n name: {\n // any text props\n color: 'text',\n weight: 'bold'\n },\n value: {\n // any text props\n color: 'text'\n }\n },\n notification: {\n actions: {\n // any anchor props\n },\n direction: 'column',\n container: {\n // any box props\n round: 'xsmall',\n pad: {\n horizontal: 'small',\n vertical: 'xsmall'\n },\n background: {\n color: 'background-front'\n }\n },\n global: {\n direction: 'row',\n container: {\n // any box props\n round: 'none',\n pad: {\n horizontal: 'large',\n vertical: 'xsmall'\n }\n }\n },\n toast: {\n // direction: undefined,\n container: {\n // any box props\n elevation: 'medium',\n width: 'medium'\n },\n layer: {\n position: 'top',\n margin: 'medium'\n },\n time: 8000\n },\n iconContainer: {\n // any box props\n pad: {\n right: 'small'\n },\n flex: false\n },\n textContainer: {\n // any box props\n gap: 'medium'\n },\n title: {\n // any text props\n weight: 'bold'\n },\n message: {\n // any text props\n margin: 'none'\n },\n close: {\n icon: FormClose\n },\n critical: {\n icon: StatusCriticalSmall,\n background: {\n color: 'status-critical',\n opacity: 'weak'\n },\n color: 'status-critical',\n // global: {},\n toast: {\n background: 'background-front'\n }\n },\n warning: {\n icon: StatusWarningSmall,\n background: {\n color: 'status-warning',\n opacity: 'weak'\n },\n color: 'status-warning',\n // global: {},\n toast: {\n background: 'background-front'\n }\n },\n normal: {\n icon: StatusGoodSmall,\n background: {\n color: 'status-ok',\n opacity: 'weak'\n },\n color: 'status-ok',\n // global: {},\n toast: {\n background: 'background-front'\n }\n },\n info: {\n icon: CircleInformation,\n background: 'background-contrast',\n color: 'text-strong',\n // global: {},\n toast: {\n background: 'background-front'\n }\n },\n unknown: {\n icon: StatusUnknownSmall,\n background: {\n color: 'status-unknown',\n opacity: 'weak'\n },\n color: 'status-unknown',\n // global: {},\n toast: {\n background: 'background-front'\n }\n },\n // deprecate \"undefined\" in v3\n // and if undefined, no icon\n undefined: {\n icon: StatusUnknownSmall,\n // background: undefined,\n color: 'status-unknown'\n // global: {},\n // toast: {},\n }\n },\n page: {\n wide: {\n alignSelf: 'center',\n width: {\n min: 'medium',\n max: 'xxlarge'\n },\n small: {\n pad: {\n horizontal: 'large'\n }\n },\n medium: {\n pad: {\n horizontal: 'medium'\n }\n },\n large: {\n pad: {\n horizontal: 'large'\n }\n }\n },\n narrow: {\n alignSelf: 'center',\n width: {\n min: 'medium',\n max: 'large'\n },\n small: {\n pad: {\n horizontal: 'large'\n }\n },\n medium: {\n pad: {\n horizontal: 'medium'\n }\n },\n large: {\n pad: {\n horizontal: 'large'\n }\n }\n },\n full: {\n alignSelf: 'start',\n width: {\n min: 'medium',\n max: '100%'\n },\n small: {\n pad: {\n horizontal: 'large'\n }\n },\n medium: {\n pad: {\n horizontal: 'medium'\n }\n },\n large: {\n pad: {\n horizontal: 'large'\n }\n }\n }\n },\n pageHeader: {\n actions: {\n // any box props\n align: 'end'\n },\n pad: {\n top: 'large',\n bottom: 'medium'\n },\n parent: {\n // any box props\n align: 'start'\n },\n responsive: {\n actions: {\n // any box props\n align: 'start',\n pad: {\n top: 'small'\n }\n },\n areas: [['parent'], ['title'], ['subtitle'], ['actions']],\n breakpoints: ['small'],\n columns: ['auto'],\n rows: ['auto']\n // gap: undefined,\n },\n subtitle: {\n // any paragraph props\n margin: 'none'\n },\n title: {\n // any heading props\n margin: 'none',\n fill: true\n },\n size: {\n small: {\n pad: {\n top: 'medium',\n bottom: 'small'\n },\n subtitle: {\n size: 'small'\n },\n title: {\n size: 'small'\n }\n },\n // medium: {\n // // pad: undefined,\n // // subtitle: {},\n // // title: {},\n // },\n large: {\n pad: {\n top: 'xlarge',\n bottom: 'large'\n },\n subtitle: {\n size: 'large'\n },\n title: {\n size: 'large'\n }\n }\n },\n small: {\n areas: [['parent', 'parent'], ['title', 'actions'], ['subtitle', 'actions']],\n columns: [['small', 'flex'], 'auto'],\n rows: ['auto', 'auto', 'auto'],\n gap: {\n row: 'xsmall',\n column: 'large'\n }\n },\n medium: {\n areas: [['parent', 'parent'], ['title', 'actions'], ['subtitle', 'actions']],\n columns: [['medium', 'flex'], 'auto'],\n rows: ['auto', 'auto', 'auto'],\n gap: {\n row: 'xsmall',\n column: 'medium'\n }\n },\n large: {\n areas: [['parent', 'parent'], ['title', 'actions'], ['subtitle', 'actions']],\n columns: [['medium', 'flex'], 'auto'],\n rows: ['auto', 'auto', 'auto'],\n gap: {\n row: 'xsmall',\n column: 'large'\n }\n }\n },\n pagination: {\n button: {\n active: {\n background: {\n color: 'active-background'\n }\n },\n color: 'text-strong',\n hover: {\n background: {\n color: 'background-contrast'\n },\n color: undefined\n },\n size: {\n small: {\n border: {\n radius: baseSpacing / 8 + \"px\",\n // 3\n width: '2px'\n },\n pad: {\n vertical: \"4px\",\n horizontal: \"4px\"\n },\n font: _extends({}, fontSizing(-1)),\n height: baseSpacing * 1.25 + \"px\",\n width: baseSpacing * 1.25 + \"px\"\n },\n medium: {\n border: {\n radius: baseSpacing / 6 + \"px\",\n // 4\n width: '2px'\n },\n pad: {\n vertical: \"4px\",\n horizontal: \"4px\"\n },\n font: _extends({}, fontSizing(0)),\n height: baseSpacing * 1.5 + \"px\",\n width: baseSpacing * 1.5 + \"px\"\n },\n large: {\n border: {\n radius: baseSpacing / 4 + \"px\",\n // 6\n width: '2px'\n },\n pad: {\n vertical: \"4px\",\n horizontal: \"4px\"\n },\n font: _extends({}, fontSizing(1)),\n height: baseSpacing * 2 + \"px\",\n width: baseSpacing * 2 + \"px\"\n }\n }\n },\n // container: {\n // // any box props,\n // extend: undefined,\n // },\n controls: {\n align: 'center',\n direction: 'row',\n gap: 'xxsmall',\n margin: 'none',\n pad: 'none'\n },\n icons: {\n // color: undefined,\n next: Next,\n previous: Previous\n }\n },\n paragraph: {\n font: {\n // family: undefined\n },\n small: _extends({}, fontSizing(-1)),\n medium: _extends({}, fontSizing(0)),\n large: _extends({}, fontSizing(1)),\n xlarge: _extends({}, fontSizing(2)),\n xxlarge: _extends({}, fontSizing(4))\n },\n thumbsRating: {\n // dislike: {\n // color: undefined,\n // },\n // like: {\n // color: undefined,\n // },\n },\n spinner: {\n container: {\n animation: 'rotateRight',\n color: 'brand',\n pad: 'small',\n round: 'full',\n size: 'small'\n },\n // icon: undefined\n size: {\n xsmall: baseSpacing * 0.75 + \"px\",\n small: baseSpacing + \"px\",\n // default 24\n medium: baseSpacing * 2 + \"px\",\n large: baseSpacing * 3 + \"px\",\n xlarge: baseSpacing * 4 + \"px\"\n }\n },\n radioButton: {\n border: {\n color: {\n dark: 'rgba(255, 255, 255, 0.5)',\n light: 'rgba(0, 0, 0, 0.15)'\n },\n width: '2px'\n },\n // background: {\n // color: undefined,\n // },\n check: {\n radius: '100%'\n // background: {\n // color: undefined,\n // },\n // color: { dark: undefined, light: undefined },\n // extend: undefined,\n },\n // color: undefined,\n hover: {\n // background: {\n // color: undefined,\n // },\n border: {\n color: {\n dark: 'white',\n light: 'black'\n }\n }\n },\n icon: {\n // size: undefined,\n // extend: undefined,\n },\n icons: {\n // circle: undefined,\n },\n gap: 'small',\n size: baseSpacing + \"px\",\n font: {\n // weight: undefined,\n },\n container: {\n // extend: undefined\n }\n },\n radioButtonGroup: {\n // container: {}, // any box props\n },\n rangeInput: {\n disabled: {\n opacity: 0.3\n // thumb: {\n // color: undefined,\n // },\n // track: {\n // color: undefined,\n // },\n },\n // extend: undefined\n track: {\n height: '4px',\n color: 'border'\n // opacity: undefined,\n // lower: {\n // color: 'undefined',\n // opacity: undefined,\n // },\n // upper: {\n // color: undefined,\n // opacity: undefined,\n // },\n // extend: undefined\n },\n thumb: {\n // color: { dark: undefined, light: undefined },\n // extend: undefined\n }\n // wheel: undefined\n },\n rangeSelector: {\n background: {\n invert: {\n color: 'light-4'\n }\n }\n // edge: {\n // type: undefined,\n // },\n },\n select: {\n // background: undefined,\n clear: {\n container: {\n pad: 'small',\n background: 'background-contrast'\n },\n // any box props\n text: {\n color: 'text-weak'\n } // any text props\n },\n container: {\n // extend: undefined,\n },\n control: {\n // extend: undefined,\n // open: undefined,\n },\n // emptySearchMessage: {\n // container: {}, // any box props\n // text: {}, // any text props\n // },\n icons: {\n // color: { dark: undefined, light: undefined },\n margin: {\n horizontal: 'small'\n },\n down: FormDown\n // up: undefined\n },\n options: {\n container: {\n align: 'start',\n pad: 'small'\n },\n text: {\n margin: 'none'\n }\n },\n // searchInput: undefined,\n step: 20\n },\n selectMultiple: {\n maxInline: 5\n },\n skeleton: {\n border: false,\n colors: {\n dark: ['background', 'background-front'],\n light: ['background', 'background-back']\n }\n // extend: undefined,\n },\n skipLinks: {\n position: 'top',\n container: {\n elevation: 'large',\n round: 'small',\n pad: 'medium'\n },\n label: {\n margin: {\n bottom: 'medium'\n },\n size: 'medium'\n }\n },\n starRating: {\n // color: undefined,\n },\n tab: {\n active: {\n color: 'text'\n // background: undefined,\n },\n // background: undefined,\n border: {\n side: 'bottom',\n size: 'small',\n color: {\n dark: 'accent-1',\n light: 'brand'\n },\n active: {\n color: {\n dark: 'white',\n light: 'black'\n }\n },\n disabled: {\n // color: undefined,\n },\n hover: {\n color: {\n dark: 'white',\n light: 'black'\n }\n // extend: undefined,\n }\n },\n color: 'control',\n // disabled: {\n // color: undefined,\n // },\n // extend: undefined,\n hover: {\n // background: undefined,\n // extend: undefined,\n color: {\n dark: 'white',\n light: 'black'\n }\n },\n margin: {\n vertical: 'xxsmall',\n horizontal: 'small'\n },\n pad: {\n bottom: 'xsmall'\n }\n },\n tabs: {\n // background: undefined,\n // extend: undefined,\n // gap: undefined,\n header: {\n // alignSelf: undefined,\n // background: undefined,\n // border: {\n // side: undefined,\n // size: undefined,\n // style: undefined,\n // color: undefined,\n // },\n // extend: undefined,\n },\n panel: {\n // extend: undefined,\n },\n step: {\n small: 1,\n medium: 3,\n large: 3\n }\n },\n table: {\n header: {\n align: 'start',\n pad: {\n horizontal: 'small',\n vertical: 'xsmall'\n },\n border: 'bottom'\n // verticalAlign: undefined,\n // background: undefined,\n // extend: undefined,\n },\n body: {\n align: 'start',\n pad: {\n horizontal: 'small',\n vertical: 'xsmall'\n }\n // background: undefined,\n // border: undefined,\n // extend: undefined,\n },\n // row: {\n // hover: {\n // background: undefined,\n // color: undefined,\n // },\n // },\n footer: {\n align: 'start',\n pad: {\n horizontal: 'small',\n vertical: 'xsmall'\n },\n border: 'top'\n // verticalAlign: undefined,\n // background: undefined,\n // extend: undefined,\n }\n },\n tag: {\n // background: undefined,\n border: true,\n round: 'large',\n // name: undefined,\n pad: {\n horizontal: 'small',\n vertical: 'xsmall'\n },\n remove: {\n margin: {\n right: 'xsmall'\n }\n },\n separator: ' : ',\n size: {\n xsmall: {\n pad: {\n horizontal: baseSpacing / 3 + \"px\",\n vertical: 'xxsmall'\n },\n icon: {\n size: baseSpacing * 0.75 + \"px\"\n }\n },\n small: {\n pad: {\n horizontal: baseSpacing * 0.4 + \"px\",\n vertical: 'xxsmall'\n },\n icon: {\n size: baseSpacing * 0.75 + \"px\"\n }\n },\n large: {\n pad: {\n horizontal: baseSpacing / 3 * 2 + \"px\",\n vertical: \"xsmall\"\n },\n icon: {\n size: baseSpacing * 1.25 + \"px\"\n }\n },\n xlarge: {\n pad: {\n horizontal: baseSpacing * 0.75 + \"px\",\n vertical: 'xsmall'\n },\n icon: {\n size: baseSpacing * 1.5 + \"px\"\n }\n }\n },\n value: {\n weight: 600\n },\n icons: {\n remove: FormClose\n }\n },\n text: {\n font: {\n // family: undefined\n },\n xsmall: _extends({}, fontSizing(-1.5)),\n small: _extends({}, fontSizing(-1)),\n medium: _extends({}, fontSizing(0)),\n // 18px\n large: _extends({}, fontSizing(1)),\n // 22px\n xlarge: _extends({}, fontSizing(2)),\n xxlarge: _extends({}, fontSizing(4)),\n '2xl': _extends({}, fontSizing(4)),\n '3xl': _extends({}, fontSizing(6)),\n '4xl': _extends({}, fontSizing(9)),\n '5xl': _extends({}, fontSizing(13)),\n '6xl': _extends({}, fontSizing(18)),\n skeleton: {\n width: {\n width: '100px',\n min: '100px'\n },\n margin: {\n vertical: 'xsmall'\n },\n colors: {\n dark: ['border', 'border'],\n light: ['background-front', 'background-back']\n }\n }\n },\n textArea: {\n // extend: undefined,\n // disabled: { opacity: undefined },\n },\n textInput: {\n // extend: undefined,\n // disabled: { opacity: undefined },\n },\n tip: {\n content: {\n // any Box props\n background: 'background-contrast',\n elevation: 'small',\n margin: 'xsmall',\n pad: {\n vertical: 'xsmall',\n horizontal: 'small'\n },\n round: 'small'\n },\n drop: {\n // any props for the drop\n align: {\n top: 'bottom'\n },\n // most common use case is Header with Buttons\n background: 'none',\n elevation: 'none',\n margin: 'none'\n }\n },\n toggleGroup: {\n button: {\n // iconOnly: {\n // pad: undefined,\n // },\n pad: {\n horizontal: '11px',\n vertical: '11px'\n }\n },\n container: {\n round: 'xsmall',\n border: true\n },\n divider: {\n color: 'border'\n }\n },\n video: {\n captions: {\n background: 'rgba(0, 0, 0, 0.7)'\n },\n // controls: { background: undefined },\n icons: {\n closedCaption: ClosedCaption,\n configure: Actions,\n fullScreen: Expand,\n pause: Pause,\n play: Play,\n reduceVolume: VolumeLow,\n volume: Volume,\n description: AssistListening\n // color: { dark: undefined, light: undefined },\n },\n scrubber: {\n color: 'light-4',\n interval: 10\n // track: { color: undefined }\n }\n },\n worldMap: {\n color: 'light-3',\n continent: {\n active: '8px',\n base: '6px'\n },\n hover: {\n color: 'light-4'\n },\n place: {\n active: '20px',\n base: '8px'\n }\n }\n });\n return deepFreeze(result);\n};\nexport var base = generate(24);","import { deepMerge } from './utils';\nimport { base } from './themes/base';\nexport var defaultProps = {\n theme: base\n};\nexport var extendDefaultTheme = function extendDefaultTheme(theme) {\n defaultProps.theme = deepMerge(base, theme);\n};","// Returns the specific color that should be used according to the theme.\n// If 'dark' is supplied, it takes precedence over 'theme.dark'.\n// Can return undefined.\nexport var normalizeColor = function normalizeColor(color, theme, dark) {\n var colorSpec = theme.global && theme.global.colors[color] !== undefined ? theme.global.colors[color] : color;\n // If the color has a light or dark object, use that\n var result = colorSpec;\n if (colorSpec) {\n if ((dark === true || dark === undefined && theme.dark) && colorSpec.dark !== undefined) {\n result = colorSpec.dark;\n } else if ((dark === false || !theme.dark) && colorSpec.light !== undefined) {\n result = colorSpec.light;\n }\n }\n // allow one level of indirection in color names\n if (result && theme.global && theme.global.colors[result] !== undefined) {\n result = normalizeColor(result, theme, dark);\n }\n return result;\n};\nvar parseHexToRGB = function parseHexToRGB(color) {\n return color.length < 7 // 7 is what's needed for '#RRGGBB'\n ? color.match(/[A-Za-z0-9]{1}/g).map(function (v) {\n return parseInt(\"\" + v + v, 16);\n }) :\n // https://stackoverflow.com/a/42429333\n color.match(/[A-Za-z0-9]{2}/g).map(function (v) {\n return parseInt(v, 16);\n });\n};\n\n// From: https://stackoverflow.com/a/9493060/8513067\n// Converts an HSL color value to RGB. Conversion formula\n// adapted from http://en.wikipedia.org/wiki/HSL_color_space.\n// Assumes h, s, and l are contained in the set [0, 1] and\n// returns r, g, and b in the set [0, 255].\nvar hslToRGB = function hslToRGB(h, s, l) {\n var r;\n var g;\n var b;\n if (s === 0 || s === '0') {\n // achromatic\n r = l;\n g = l;\n b = l;\n } else {\n var hue2rgb = function hue2rgb(p, q, inT) {\n var t = inT;\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 0.16666667) return p + (q - p) * 6 * t;\n if (t < 1 / 2) return q;\n if (t < 0.66666667) return p + (q - p) * (0.66666667 - t) * 6;\n return p;\n };\n var q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n var p = 2 * l - q;\n r = hue2rgb(p, q, h + 0.33333333);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 0.33333333);\n }\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n};\n\n// allow for alpha: #RGB, #RGBA, #RRGGBB, or #RRGGBBAA\nvar hexExp = /^#[A-Za-z0-9]{3,4}$|^#[A-Za-z0-9]{6,8}$/;\nvar rgbExp = /^rgba?\\(\\s?([0-9]*)\\s?,\\s?([0-9]*)\\s?,\\s?([0-9]*)\\s?\\)/;\nvar rgbaExp = /^rgba?\\(\\s?([0-9]*)\\s?,\\s?([0-9]*)\\s?,\\s?([0-9]*)\\s?,\\s?([.0-9]*)\\s?\\)/;\n// e.g. hsl(240, 60%, 50%)\nvar hslExp = /^hsla?\\(\\s?([0-9]*)\\s?,\\s?([0-9]*)%?\\s?,\\s?([0-9]*)%?\\s?.*?\\)/;\nexport var canExtractRGBArray = function canExtractRGBArray(color) {\n return hexExp.test(color) || rgbExp.test(color) || rgbaExp.test(color) || hslExp.test(color);\n};\nexport var getRGBArray = function getRGBArray(color) {\n if (hexExp.test(color)) {\n var _parseHexToRGB = parseHexToRGB(color),\n red = _parseHexToRGB[0],\n green = _parseHexToRGB[1],\n blue = _parseHexToRGB[2],\n alpha = _parseHexToRGB[3];\n return [red, green, blue, alpha !== undefined ? alpha / 255.0 : undefined];\n }\n var match = color.match(rgbExp);\n if (match) {\n return match.splice(1).map(function (v) {\n return parseInt(v, 10);\n });\n }\n match = color.match(rgbaExp);\n if (match) {\n return match.splice(1).map(function (v) {\n return parseFloat(v, 10);\n });\n }\n match = color.match(hslExp);\n if (match) {\n var _match$splice$map = match.splice(1).map(function (v) {\n return parseInt(v, 10);\n }),\n h = _match$splice$map[0],\n s = _match$splice$map[1],\n l = _match$splice$map[2];\n return hslToRGB(h / 360.0, s / 100.0, l / 100.0);\n }\n return color;\n};\nexport var colorIsDark = function colorIsDark(color) {\n if (color && canExtractRGBArray(color)) {\n var _getRGBArray = getRGBArray(color),\n red = _getRGBArray[0],\n green = _getRGBArray[1],\n blue = _getRGBArray[2],\n alpha = _getRGBArray[3];\n // if there is an alpha and it's greater than 50%, we can't really tell\n if (alpha < 0.5) return undefined;\n var brightness = (299 * red + 587 * green + 114 * blue) / 1000;\n // From: http://www.had2know.com/technology/color-contrast-calculator-web-design.html\n // Above domain is no longer registered.\n return brightness < 125;\n }\n return undefined;\n};\nexport var getRGBA = function getRGBA(color, opacity) {\n if (color && canExtractRGBArray(color)) {\n var _getRGBArray2 = getRGBArray(color),\n red = _getRGBArray2[0],\n green = _getRGBArray2[1],\n blue = _getRGBArray2[2],\n alpha = _getRGBArray2[3];\n var normalizedAlpha;\n if (opacity !== undefined) {\n normalizedAlpha = opacity;\n } else if (alpha !== undefined) {\n normalizedAlpha = alpha;\n } else {\n normalizedAlpha = 1;\n }\n return \"rgba(\" + red + \", \" + green + \", \" + blue + \", \" + normalizedAlpha + \")\";\n }\n return undefined;\n};","import { css } from 'styled-components';\nimport { colorIsDark, getRGBA, normalizeColor, canExtractRGBArray, getRGBArray } from './colors';\n\n// evalStyle() converts a styled-components item into a string\nvar evalStyle = function evalStyle(arg, theme) {\n if (arg && Array.isArray(arg) && typeof arg[0] === 'function') {\n return arg[0]({\n theme: theme\n });\n }\n return arg;\n};\nexport var normalizeBackground = function normalizeBackground(backgroundArg, theme) {\n var _theme$global$backgro;\n var background = ((_theme$global$backgro = theme.global.backgrounds) == null ? void 0 : _theme$global$backgro[backgroundArg]) || backgroundArg;\n var result = background;\n // If the background has a light or dark object, use that\n if (background) {\n if (theme.dark && background.dark && typeof background.dark !== 'boolean') {\n result = background.dark;\n } else if (!theme.dark && background.light && typeof background.light !== 'boolean') {\n result = background.light;\n }\n result = evalStyle(result, theme);\n }\n return result;\n};\nvar normalizeBackgroundColor = function normalizeBackgroundColor(backgroundArg, theme) {\n var _theme$global$backgro2;\n var background = backgroundArg.color || backgroundArg;\n var result = normalizeColor(\n // Background color may be defined by theme.global.backgrounds or\n // theme.global.colors.\n ((_theme$global$backgro2 = theme.global.backgrounds) == null ? void 0 : _theme$global$backgro2[background]) || background, theme, backgroundArg.dark);\n return result;\n};\nvar normalizeBackgroundImage = function normalizeBackgroundImage(background, theme) {\n var result;\n if (background.image) {\n var _theme$global$backgro3, _theme$global$backgro4;\n result = normalizeBackground(background.dark ? (_theme$global$backgro3 = theme.global.backgrounds) == null || (_theme$global$backgro3 = _theme$global$backgro3[background.image]) == null ? void 0 : _theme$global$backgro3.dark : (_theme$global$backgro4 = theme.global.backgrounds) == null ? void 0 : _theme$global$backgro4[background.image], theme) || background.image;\n } else {\n var _theme$global$backgro5;\n var normalized = normalizeBackground((_theme$global$backgro5 = theme.global.backgrounds) == null ? void 0 : _theme$global$backgro5[background], theme);\n result = typeof normalized === 'object' ? normalizeBackgroundImage(normalized, theme) : normalized;\n }\n return result;\n};\nvar rotateBackground = function rotateBackground(background, theme) {\n var backgroundImage = normalizeBackgroundImage(background, theme);\n var result = backgroundImage;\n if (backgroundImage.lastIndexOf('linear-gradient', 0) === 0) {\n var regex = /\\d{1,}deg\\b,/gm; // Contains rotation specified in degrees. Only targets 'deg' string with a trailing comma. Do not match 'deg' string for hsl, etc..\n result = backgroundImage.lastIndexOf('deg,') >= 0 ? backgroundImage.replace(regex, background.rotate + \"deg,\") : backgroundImage.replace('linear-gradient(', \"linear-gradient(\" + background.rotate + \"deg, \");\n } else {\n console.warn( // eslint-disable-next-line max-len\n \"'background.rotate' property only supports 'background.image' containing a linear-gradient string.\");\n }\n return result;\n};\nexport var backgroundIsDark = function backgroundIsDark(backgroundArg, theme) {\n var background = normalizeBackground(backgroundArg, theme);\n var result;\n if (background) {\n if (typeof background === 'object') {\n var color = background.color,\n dark = background.dark,\n opacity = background.opacity;\n if (typeof dark === 'boolean') {\n result = dark;\n } else if (color && (\n // weak opacity means we keep the existing darkness\n !opacity || opacity !== 'weak')) {\n var backgroundColor = normalizeColor(background.color, theme);\n if (backgroundColor) {\n result = colorIsDark(backgroundColor);\n }\n }\n } else {\n var _color = normalizeColor(background, theme);\n if (_color) {\n result = colorIsDark(_color);\n }\n }\n }\n return result;\n};\nvar darkContext = function darkContext(backgroundColor) {\n var isDark = colorIsDark(backgroundColor);\n if (isDark === undefined) return undefined;\n return isDark ? 'dark' : 'light';\n};\n\n// Returns an array of two CSS colors: [background, color]\n// Either could be undefined.\n// background could be a CSS gradient, like \"linear-gradient(...)\"\nexport var backgroundAndTextColors = function backgroundAndTextColors(backgroundArg, textArg, theme) {\n if (!backgroundArg) return [undefined, textArg];\n var global = theme.global;\n var background = normalizeBackground(backgroundArg, theme);\n var text = textArg || global.colors.text;\n var backgroundColor;\n var textColor;\n if (typeof background === 'object') {\n if (background.dark === false) {\n textColor = text.light || text;\n } else if (background.dark) {\n textColor = text.dark || text;\n }\n if (background.color) {\n var color = normalizeBackgroundColor(background, theme);\n var opacity = background.opacity === true ? global.opacity.medium : global.opacity[background.opacity] || background.opacity;\n backgroundColor = getRGBA(color, opacity) || color;\n\n // If we don't have a textColor already, and we aren't too translucent,\n // set the textColor to have the best contrast against the background\n // color.\n if (!textColor && (opacity === undefined || opacity > 0.3)) {\n var shade = darkContext(backgroundColor, theme);\n textColor = normalizeColor(shade && text[shade] || text, theme);\n }\n }\n } else {\n backgroundColor = normalizeBackgroundColor(background, theme);\n var _shade = darkContext(backgroundColor, theme);\n var transparent;\n if (backgroundColor && canExtractRGBArray(backgroundColor)) {\n var colorArray = getRGBArray(backgroundColor);\n // check if the alpha value is less than 0.5\n if (colorArray[3] < 0.5) transparent = true;\n }\n if (_shade) {\n textColor = normalizeColor(text[_shade] || text, theme, _shade === 'dark');\n } else if (transparent && text) {\n textColor = normalizeColor(text, theme);\n } else {\n // If we can't determine the shade, we assume this isn't a simple color.\n // It could be a gradient. backgroundStyle() will take care of that case.\n if (backgroundColor !== 'transparent') backgroundColor = undefined;\n if (text) textColor = normalizeColor(text, theme);\n }\n }\n // if textArg is false, we don't want the textColor, used for Button hover\n if (textArg === false) textColor = undefined;\n return [backgroundColor, textColor];\n};\nexport var backgroundStyle = function backgroundStyle(backgroundArg, theme, textColorArg) {\n // for Grommet component, if the background isn't defined, don't set it\n if (backgroundArg === undefined) return undefined;\n var background = normalizeBackground(backgroundArg, theme);\n var _backgroundAndTextCol = backgroundAndTextColors(background, textColorArg, theme),\n backgroundColor = _backgroundAndTextCol[0],\n textColor = _backgroundAndTextCol[1];\n var backgroundImage = background.rotate ? rotateBackground(background, theme) : normalizeBackgroundImage(background, theme);\n var backgroundClipStyle = '';\n if (background.clip) {\n backgroundClipStyle = background.clip === 'text' ? \"-webkit-text-fill-color: transparent; \\n -webkit-background-clip: text; \\n background-clip: text;\" : \"background-clip: \" + background.clip + \";\";\n }\n if (typeof background === 'string' && background.lastIndexOf('url', 0) === 0) {\n return css([\"background:\", \" no-repeat center center;background-size:cover;\"], background);\n }\n if (backgroundImage) {\n var backgroundStyles = \"\\n \" + (backgroundColor ? \"background-color: \" + backgroundColor + \";\" : '') + \"\\n background-image: \" + backgroundImage + \";\\n background-repeat: \" + (typeof background === 'object' && background.repeat || 'no-repeat') + \";\\n background-position: \" + (background.position || 'center center') + \";\\n background-size: \" + (background.size || 'cover') + \";\\n \" + backgroundClipStyle + \"\\n \";\n\n // allow both background color and image, in case the image doesn't fill\n // when image and opacity are used together, we need to use pseudo :before\n // to ensure that only image and background color are affected by opacity\n // but not the container contents\n return css([\"\", \" \", \"\"], textColor ? \"color: \" + textColor + \";\" : '', !background.opacity ? backgroundStyles : \"position: relative;\\n z-index: 0;\\n &:before {\\n content: '';\\n position: absolute;\\n top: 0;\\n right: 0;\\n left: 0;\\n bottom: 0;\\n z-index: -1;\\n border-radius: inherit;\\n \" + backgroundStyles + \"\\n opacity: \" + (background.opacity === true ? theme.global.opacity.medium : theme.global.opacity[background.opacity] || background.opacity) + \";\\n }\");\n }\n if (backgroundColor) {\n return css([\"background-color:\", \";\", \"\"], backgroundColor, textColor ? \"color: \" + textColor + \";\" : '');\n }\n if (typeof background === 'string')\n // This case takes care of gradients\n // or theme colors that use CSS names like 'crimson' that we don't parse\n return css([\"background:\", \";\"], normalizeColor(background, theme));\n return undefined;\n};\nexport var activeStyle = css([\"\", \"\"], function (props) {\n return backgroundStyle(normalizeColor(props.theme.global.active.background, props.theme), props.theme, props.theme.global.active.color);\n});\nexport var selectedStyle = css([\"\", \"\"], function (props) {\n return backgroundStyle(normalizeColor(props.theme.global.selected.background, props.theme), props.theme, props.theme.global.selected.color);\n});\nexport var getHoverIndicatorStyle = function getHoverIndicatorStyle(hoverIndicator, theme) {\n var background;\n var elevation;\n if (hoverIndicator === true || hoverIndicator === 'background') {\n background = theme.global.hover.background;\n } else if (typeof hoverIndicator === 'object') {\n if (hoverIndicator.elevation || hoverIndicator.background) {\n elevation = hoverIndicator.elevation;\n background = hoverIndicator.background;\n } else background = hoverIndicator;\n } else {\n background = hoverIndicator;\n }\n return css([\"\", \" \", \"\"], backgroundStyle(background, theme, theme.global.hover.color), elevation && \"box-shadow: \" + theme.global.elevation[theme.dark ? 'dark' : 'light'][elevation] + \";\");\n};","import PropTypes from 'prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = {\n target: PropTypes.oneOf(['component', 'document']),\n onBackspace: PropTypes.func,\n onComma: PropTypes.func,\n onDown: PropTypes.func,\n onEnter: PropTypes.func,\n onEsc: PropTypes.func,\n onKeyDown: PropTypes.func,\n onLeft: PropTypes.func,\n onRight: PropTypes.func,\n onShift: PropTypes.func,\n onSpace: PropTypes.func,\n onTab: PropTypes.func,\n onUp: PropTypes.func\n };\n}\nexport var KeyboardPropTypes = PropType;","var _excluded = [\"capture\", \"target\", \"children\", \"onKeyDown\"];\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport { Children, cloneElement, useCallback, useEffect } from 'react';\nimport { KeyboardPropTypes } from './propTypes';\nvar KEYS = {\n 8: 'onBackspace',\n 9: 'onTab',\n 13: 'onEnter',\n 27: 'onEsc',\n 32: 'onSpace',\n 37: 'onLeft',\n 38: 'onUp',\n 39: 'onRight',\n 40: 'onDown',\n 188: 'onComma',\n 16: 'onShift'\n};\nvar Keyboard = function Keyboard(_ref) {\n var capture = _ref.capture,\n target = _ref.target,\n children = _ref.children,\n onKeyDown = _ref.onKeyDown,\n restProps = _objectWithoutPropertiesLoose(_ref, _excluded);\n var onKeyDownHandler = useCallback(function (event) {\n var key = event.keyCode ? event.keyCode : event.which;\n var callbackName = KEYS[key];\n for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n rest[_key - 1] = arguments[_key];\n }\n if (callbackName && restProps[callbackName]) {\n restProps[callbackName].apply(restProps, [event].concat(rest));\n }\n if (onKeyDown) {\n onKeyDown.apply(void 0, [event].concat(rest));\n }\n }, [onKeyDown, restProps]);\n useEffect(function () {\n if (target === 'document') {\n document.addEventListener('keydown', onKeyDownHandler, capture);\n }\n return function () {\n if (target === 'document') {\n document.removeEventListener('keydown', onKeyDownHandler, capture);\n }\n };\n }, [capture, onKeyDownHandler, target]);\n return target === 'document' ? children : /*#__PURE__*/cloneElement(Children.only(children), {\n onKeyDown: onKeyDownHandler\n });\n};\nKeyboard.propTypes = KeyboardPropTypes;\nexport { Keyboard };","export var getBreakpoint = function getBreakpoint(viewportWidth, theme) {\n var sortedBreakpoints = Object.keys(theme.global.breakpoints).sort(function (a, b) {\n var first = theme.global.breakpoints[a];\n var second = theme.global.breakpoints[b];\n if (!first) return 1;\n if (!second) return -1;\n if (!first.value) return 1;\n if (!second.value) return -1;\n return first.value - second.value;\n });\n\n // the last breakpoint on the sorted array should have\n // no windowWidth boundaries\n var lastBreakpoint = sortedBreakpoints[sortedBreakpoints.length - 1];\n var result = sortedBreakpoints.find(function (name) {\n var breakpoint = theme.global.breakpoints[name];\n return !breakpoint.value || breakpoint.value >= viewportWidth ? name : false;\n });\n return result || lastBreakpoint;\n};\nexport var getDeviceBreakpoint = function getDeviceBreakpoint(type, theme) {\n return theme.global.deviceBreakpoints[type];\n};\nexport var getBreakpointStyle = function getBreakpointStyle(theme, breakpointSize) {\n var breakpoint = breakpointSize && theme.global.breakpoints[breakpointSize] || {};\n if (!breakpoint.edgeSize) breakpoint.edgeSize = theme.global.edgeSize;\n if (!breakpoint.borderSize) breakpoint.borderSize = theme.global.borderSize;\n if (!breakpoint.size) breakpoint.size = theme.global.size;\n return breakpoint;\n};\n\n// for checks that look for a small screen size, flag for xsmall\n// as well since we use xsmall in the hpe theme\nexport var isSmall = function isSmall(size) {\n return ['xsmall', 'small'].includes(size);\n};","var _FLEX_MAP;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport styled, { css } from 'styled-components';\nimport { defaultProps } from '../../default-props';\nimport { alignContentStyle, alignStyle, backgroundStyle, borderStyle, breakpointStyle, edgeStyle, fillStyle, focusStyle, genericStyles, getBreakpointStyle, getHoverIndicatorStyle, heightStyle, overflowStyle, parseMetricToNum, responsiveBorderStyle, widthStyle } from '../../utils';\nimport { roundStyle } from '../../utils/styles';\nimport { animationBounds, animationObjectStyle } from '../../utils/animation';\nvar BASIS_MAP = {\n auto: 'auto',\n full: '100%',\n '1/2': '50%',\n '1/4': '25%',\n '2/4': '50%',\n '3/4': '75%',\n '1/3': '33.33%',\n '2/3': '66.66%'\n};\nvar basisStyle = css([\"flex-basis:\", \";\"], function (props) {\n return BASIS_MAP[props.basis] || props.theme.global.size[props.basis] || props.basis;\n});\n\n// min-width and min-height needed because of this\n// https://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size\n// we assume we are in the context of a Box going the other direction\n// TODO: revisit this\nvar directionStyle = function directionStyle(direction, theme) {\n var styles = [css([\"min-width:0;min-height:0;flex-direction:\", \";\"], direction === 'row-responsive' ? 'row' : direction)];\n if (direction === 'row-responsive' && theme.box.responsiveBreakpoint) {\n var breakpoint = getBreakpointStyle(theme, theme.box.responsiveBreakpoint);\n if (breakpoint) {\n styles.push(breakpointStyle(breakpoint, \"\\n flex-direction: column;\\n flex-basis: auto;\\n justify-content: flex-start;\\n align-items: stretch;\\n \"));\n }\n }\n return styles;\n};\nvar elevationStyle = function elevationStyle(elevation) {\n return css([\"box-shadow:\", \";\"], function (props) {\n return props.theme.global.elevation[props.theme.dark ? 'dark' : 'light'][elevation];\n });\n};\nvar FLEX_MAP = (_FLEX_MAP = {}, _FLEX_MAP[true] = '1 1', _FLEX_MAP[false] = '0 0', _FLEX_MAP.grow = '1 0', _FLEX_MAP.shrink = '0 1', _FLEX_MAP);\nvar flexGrowShrinkProp = function flexGrowShrinkProp(flex) {\n if (typeof flex === 'boolean' || typeof flex === 'string') {\n return FLEX_MAP[flex];\n }\n return (flex.grow ? flex.grow : 0) + \" \" + (flex.shrink ? flex.shrink : 0);\n};\nvar flexStyle = css([\"flex:\", \";\"], function (props) {\n return \"\" + flexGrowShrinkProp(props.flex) + (props.flex !== true && !props.basis ? ' auto' : '');\n});\nvar JUSTIFY_MAP = {\n around: 'space-around',\n between: 'space-between',\n center: 'center',\n end: 'flex-end',\n evenly: 'space-evenly',\n start: 'flex-start'\n};\nvar justifyStyle = css([\"justify-content:\", \";\"], function (props) {\n return JUSTIFY_MAP[props.justify];\n});\nvar WRAP_MAP = {\n \"true\": 'wrap',\n reverse: 'wrap-reverse'\n};\nvar wrapStyle = css([\"flex-wrap:\", \";\"], function (props) {\n return WRAP_MAP[props.wrapProp];\n});\nvar animationItemStyle = function animationItemStyle(item, theme) {\n if (typeof item === 'string') {\n return animationObjectStyle({\n type: item\n }, theme);\n }\n if (Array.isArray(item)) {\n return item.reduce(function (style, a, index) {\n return css([\"\", \"\", \" \", \"\"], style, index > 0 ? ',' : '', animationItemStyle(a, theme));\n }, '');\n }\n if (typeof item === 'object') {\n return animationObjectStyle(item, theme);\n }\n return '';\n};\nvar animationAncilaries = function animationAncilaries(animation) {\n if (animation.type === 'flipIn' || animation.type === 'flipOut') {\n return 'perspective: 1000px; transform-style: preserve-3d;';\n }\n return '';\n};\nvar animationObjectInitialStyle = function animationObjectInitialStyle(animation) {\n var bounds = animationBounds(animation.type, animation.size);\n if (bounds) {\n return bounds[0] + \" \" + animationAncilaries(animation);\n }\n return '';\n};\nvar animationInitialStyle = function animationInitialStyle(item) {\n if (typeof item === 'string') {\n return animationObjectInitialStyle({\n type: item\n });\n }\n if (Array.isArray(item)) {\n return item.map(function (a) {\n return typeof a === 'string' ? animationObjectInitialStyle({\n type: a\n }) : animationObjectInitialStyle(a);\n }).join('');\n }\n if (typeof item === 'object') {\n return animationObjectInitialStyle(item);\n }\n return '';\n};\nvar animationStyle = css([\"\", \";\"], function (props) {\n return css([\"\", \" animation:\", \";\"], animationInitialStyle(props.animation), animationItemStyle(props.animation, props.theme));\n});\nvar interactiveStyle = css([\"cursor:pointer;&:hover{\", \" \", \"}\"], function (props) {\n var _props$kindProp;\n return ((_props$kindProp = props.kindProp) == null ? void 0 : _props$kindProp.hover) && getHoverIndicatorStyle(props.kindProp.hover, props.theme);\n}, function (props) {\n return props.hoverIndicator && getHoverIndicatorStyle(props.hoverIndicator, props.theme);\n});\nvar gapStyle = function gapStyle(directionProp, gap, responsive, wrap, theme) {\n var metric = theme.global.edgeSize[gap] || gap;\n var breakpoint = getBreakpointStyle(theme, theme.box.responsiveBreakpoint);\n var responsiveMetric = responsive && breakpoint && breakpoint.edgeSize[gap];\n var styles = [];\n if (typeof gap === 'object') {\n if (gap.row !== undefined && gap.column !== undefined) {\n styles.push(\"gap: \" + (theme.global.edgeSize[gap.row] || gap.row) + \" \" + (theme.global.edgeSize[gap.column] || gap.column) + \";\");\n if (responsiveMetric) {\n styles.push(breakpointStyle(breakpoint, \"gap: \" + responsiveMetric + \";\"));\n }\n } else if (gap.row !== undefined) {\n styles.push(\"row-gap: \" + (theme.global.edgeSize[gap.row] || gap.row) + \";\");\n if (responsiveMetric) {\n styles.push(breakpointStyle(breakpoint, \"row-gap: \" + responsiveMetric + \";\"));\n }\n } else if (gap.column !== undefined) {\n styles.push(\"column-gap: \" + (theme.global.edgeSize[gap.column] || gap.column) + \";\");\n if (responsiveMetric) {\n styles.push(breakpointStyle(breakpoint, \"column-gap: \" + responsiveMetric + \";\"));\n }\n }\n } else if (directionProp === 'column' || directionProp === 'column-reverse') {\n styles.push(\"row-gap: \" + metric + \";\");\n if (responsiveMetric) {\n styles.push(breakpointStyle(breakpoint, \"row-gap: \" + responsiveMetric + \";\"));\n }\n } else {\n styles.push(\"column-gap: \" + metric + \";\");\n if (wrap) styles.push(\"row-gap: \" + metric + \";\");\n if (responsiveMetric) {\n if (directionProp === 'row' || directionProp === 'row-reverse') {\n styles.push(breakpointStyle(breakpoint, \"column-gap: \" + responsiveMetric + \";\"));\n } else if (directionProp === 'row-responsive') {\n styles.push(breakpointStyle(breakpoint, \"\\n row-gap: \" + responsiveMetric + \";\\n \"));\n }\n }\n }\n return styles;\n};\n\n// NOTE: basis must be after flex! Otherwise, flex overrides basis\nvar StyledBox = styled.div.withConfig({\n displayName: \"StyledBox\",\n componentId: \"sc-13pk1d4-0\"\n})([\"display:flex;box-sizing:border-box;\", \";\", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \"\"], function (props) {\n return !props.basis && 'max-width: 100%;';\n}, genericStyles, function (props) {\n return props.align && alignStyle;\n}, function (props) {\n return props.alignContent && alignContentStyle;\n}, function (props) {\n return props.background && backgroundStyle(props.background, props.theme);\n}, function (props) {\n return props.border && borderStyle(props.border, props.responsive, props.theme);\n}, function (props) {\n return props.directionProp && directionStyle(props.directionProp, props.theme);\n}, function (props) {\n return props.heightProp && heightStyle(props.heightProp, props.theme);\n}, function (props) {\n return props.widthProp && widthStyle(props.widthProp, props.theme);\n}, function (props) {\n return props.flex !== undefined && flexStyle;\n}, function (props) {\n return props.basis && basisStyle;\n}, function (props) {\n return props.fillProp && fillStyle(props.fillProp);\n}, function (props) {\n return props.justify && justifyStyle;\n}, function (props) {\n return props.pad && edgeStyle('padding', props.pad, props.responsive, props.theme.box.responsiveBreakpoint, props.theme);\n}, function (props) {\n return props.round && roundStyle(props.round, props.responsive, props.theme);\n}, function (props) {\n return props.wrapProp && wrapStyle;\n}, function (props) {\n return props.overflowProp && overflowStyle(props.overflowProp);\n}, function (props) {\n return props.elevationProp && elevationStyle(props.elevationProp);\n}, function (props) {\n return props.gap && gapStyle(props.directionProp, props.gap, props.responsive, props.wrapProp, props.theme);\n}, function (props) {\n return props.animation && animationStyle;\n}, function (props) {\n return props.onClick && interactiveStyle;\n}, function (props) {\n return props.onClick && props.focus && props.focusIndicator !== false && focusStyle();\n}, function (props) {\n return props.theme.box && props.theme.box.extend;\n}, function (props) {\n return props.kindProp && props.kindProp.extend;\n});\nStyledBox.defaultProps = {};\nObject.setPrototypeOf(StyledBox.defaultProps, defaultProps);\nvar gapGapStyle = function gapGapStyle(directionProp, gap, responsive, border, theme) {\n var metric = theme.global.edgeSize[gap] || gap;\n var breakpoint = getBreakpointStyle(theme, theme.box.responsiveBreakpoint);\n var responsiveMetric = responsive && breakpoint && breakpoint.edgeSize[gap];\n var styles = [];\n if (directionProp === 'column' || directionProp === 'column-reverse') {\n styles.push(\"height: \" + metric + \";\");\n if (responsiveMetric) {\n styles.push(breakpointStyle(breakpoint, \"height: \" + responsiveMetric + \";\"));\n }\n } else {\n styles.push(\"width: \" + metric + \";\");\n if (responsiveMetric) {\n if (directionProp === 'row' || directionProp === 'row-reverse') {\n styles.push(breakpointStyle(breakpoint, \"width: \" + responsiveMetric + \";\"));\n } else if (directionProp === 'row-responsive') {\n styles.push(breakpointStyle(breakpoint, \"\\n width: auto;\\n height: \" + responsiveMetric + \";\\n \"));\n }\n }\n }\n if (border === 'between' || border && border.side === 'between') {\n var borderSize = border.size || 'xsmall';\n var borderMetric = theme.global.borderSize[borderSize] || borderSize;\n var borderOffset = parseMetricToNum(metric) / 2 - parseMetricToNum(borderMetric) / 2 + \"px\";\n var responsiveBorderMetric = responsive && breakpoint && (breakpoint.borderSize[borderSize] || borderSize);\n var responsiveBorderOffset = responsiveBorderMetric && parseMetricToNum(responsiveMetric || metric) / 2 - parseMetricToNum(responsiveBorderMetric) / 2 + \"px\";\n if (directionProp === 'column' || directionProp === 'column-reverse') {\n var adjustedBorder = typeof border === 'string' ? 'top' : _extends({}, border, {\n side: 'top'\n });\n styles.push(css([\"position:relative;&:after{content:'';position:absolute;width:100%;top:\", \";\", \"}\"], borderOffset, borderStyle(adjustedBorder, responsive, theme)));\n if (responsiveBorderOffset) {\n styles.push(breakpointStyle(breakpoint, \"\\n &:after {\\n content: '';\\n top: \" + responsiveBorderOffset + \";\\n }\"));\n }\n } else {\n var _adjustedBorder = typeof border === 'string' ? 'left' : _extends({}, border, {\n side: 'left'\n });\n styles.push(css([\"position:relative;&:after{content:'';position:absolute;height:100%;left:\", \";\", \"}\"], borderOffset, borderStyle(_adjustedBorder, directionProp !== 'row-responsive' && responsive, theme)));\n if (responsiveBorderOffset) {\n if (directionProp === 'row' || directionProp === 'row-reverse') {\n styles.push(breakpointStyle(breakpoint, \"\\n &:after {\\n content: '';\\n left: \" + responsiveBorderOffset + \";\\n }\"));\n } else if (directionProp === 'row-responsive') {\n var adjustedBorder2 = typeof border === 'string' ? 'top' : _extends({}, border, {\n side: 'top'\n });\n styles.push(breakpointStyle(breakpoint, \"\\n &:after {\\n content: '';\\n height: auto;\\n left: unset;\\n width: 100%;\\n top: \" + responsiveBorderOffset + \";\\n border-left: none;\\n \" + responsiveBorderStyle(adjustedBorder2, theme) + \"\\n }\"));\n }\n }\n }\n }\n return styles;\n};\nvar StyledBoxGap = styled.div.withConfig({\n displayName: \"StyledBox__StyledBoxGap\",\n componentId: \"sc-13pk1d4-1\"\n})([\"flex:0 0 auto;align-self:stretch;\", \";\"], function (props) {\n return props.gap && gapGapStyle(props.directionProp, props.gap, props.responsive, props.border, props.theme);\n});\nStyledBoxGap.defaultProps = {};\nObject.setPrototypeOf(StyledBoxGap.defaultProps, defaultProps);\nexport { StyledBox, StyledBoxGap };","import { css } from 'styled-components';\nimport { backgroundStyle } from './background';\nimport { normalizeColor } from './colors';\nimport { getBreakpointStyle } from './responsive';\nimport { breakpointStyle, parseMetricToNum } from './mixins';\nexport var baseStyle = css([\"font-family:\", \";font-size:\", \";line-height:\", \";font-weight:\", \";\", \" \", \" box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;\"], function (props) {\n return props.theme.global.font.family;\n}, function (props) {\n return props.theme.global.font.size;\n}, function (props) {\n return props.theme.global.font.height;\n}, function (props) {\n return props.theme.global.font.weight;\n}, function (props) {\n return props.theme.global.font.variant && \"\\n font-variant:\" + props.theme.global.font.variant + \";\\n \";\n}, function (props) {\n return !props.plain && backgroundStyle(props.theme.baseBackground, props.theme);\n});\nexport var controlBorderStyle = css([\"border:\", \" solid \", \";border-radius:\", \";\"], function (props) {\n return props.theme.global.control.border.width;\n}, function (props) {\n return normalizeColor(props.theme.global.control.border.color || 'border', props.theme);\n}, function (props) {\n return props.theme.global.control.border.radius;\n});\nexport var edgeStyle = function edgeStyle(kind, data, responsive, responsiveBreakpoint, theme) {\n var breakpoint = responsiveBreakpoint && theme.global.breakpoints[responsiveBreakpoint];\n if (typeof data === 'string') {\n return css([\"\", \":\", \";\", \";\"], kind, theme.global.edgeSize[data] || data, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \": \" + (breakpoint.edgeSize[data] || data) + \";\\n \") : '');\n }\n var result = [];\n var horizontal = data.horizontal,\n vertical = data.vertical,\n top = data.top,\n bottom = data.bottom,\n left = data.left,\n right = data.right;\n\n // if horizontal and vertical are equal OR all sides are equal,\n // we can just return a single css value such as padding: 12px\n // instead of breaking out by sides.\n var horizontalVerticalEqual = horizontal && vertical && horizontal === vertical;\n var allSidesEqual = top && bottom && left && right && top === bottom === left === right;\n if (horizontalVerticalEqual || allSidesEqual) {\n // since the values will be the same between vertical & horizontal OR\n // left, right, top, & bottom, we can just choose one\n var value = horizontalVerticalEqual ? horizontal : top;\n return css([\"\", \":\", \";\", \";\"], kind, theme.global.edgeSize[value] || value, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \": \" + (breakpoint.edgeSize[value] || value) + \";\\n \") : '');\n }\n if (horizontal) {\n result.push(css([\"\", \"-left:\", \";\", \"-right:\", \";\", \";\"], kind, theme.global.edgeSize[horizontal] || horizontal, kind, theme.global.edgeSize[horizontal] || horizontal, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \"-left: \" + (breakpoint.edgeSize[horizontal] || horizontal) + \";\\n \" + kind + \"-right: \" + (breakpoint.edgeSize[horizontal] || horizontal) + \";\\n \") : ''));\n }\n if (vertical) {\n result.push(css([\"\", \"-top:\", \";\", \"-bottom:\", \";\", \";\"], kind, theme.global.edgeSize[vertical] || vertical, kind, theme.global.edgeSize[vertical] || vertical, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \"-top: \" + (breakpoint.edgeSize[vertical] || vertical) + \";\\n \" + kind + \"-bottom: \" + (breakpoint.edgeSize[vertical] || vertical) + \";\\n \") : ''));\n }\n if (top) {\n result.push(css([\"\", \"-top:\", \";\", \";\"], kind, theme.global.edgeSize[top] || top, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \"-top: \" + (breakpoint.edgeSize[top] || top) + \";\\n \") : ''));\n }\n if (bottom) {\n result.push(css([\"\", \"-bottom:\", \";\", \";\"], kind, theme.global.edgeSize[bottom] || bottom, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \"-bottom: \" + (breakpoint.edgeSize[bottom] || bottom) + \";\\n \") : ''));\n }\n if (left) {\n result.push(css([\"\", \"-left:\", \";\", \";\"], kind, theme.global.edgeSize[left] || left, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \"-left: \" + (breakpoint.edgeSize[left] || left) + \";\\n \") : ''));\n }\n if (right) {\n result.push(css([\"\", \"-right:\", \";\", \";\"], kind, theme.global.edgeSize[right] || right, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \"-right: \" + (breakpoint.edgeSize[right] || right) + \";\\n \") : ''));\n }\n if (data.start) {\n result.push(css([\"\", \"-inline-start:\", \";\", \";\"], kind, theme.global.edgeSize[data.start] || data.start, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \"-inline-start: \" + (breakpoint.edgeSize[data.start] || data.start) + \";\\n \") : ''));\n }\n if (data.end) {\n result.push(css([\"\", \"-inline-end:\", \";\", \";\"], kind, theme.global.edgeSize[data.end] || data.end, responsive && breakpoint ? breakpointStyle(breakpoint, \"\\n \" + kind + \"-inline-end: \" + (breakpoint.edgeSize[data.end] || data.end) + \";\\n \") : ''));\n }\n return result;\n};\nexport var fillStyle = function fillStyle(fillProp) {\n if (fillProp === 'horizontal') {\n return 'width: 100%;';\n }\n if (fillProp === 'vertical') {\n return 'height: 100%;';\n }\n if (fillProp) {\n return \"\\n width: 100%;\\n height: 100%;\\n \";\n }\n return undefined;\n};\nvar focusStyles = function focusStyles(props, _temp) {\n var _ref = _temp === void 0 ? {} : _temp,\n forceOutline = _ref.forceOutline,\n justBorder = _ref.justBorder;\n var focus = props.theme.global.focus;\n if (!focus || forceOutline && !focus.outline) {\n var color = normalizeColor('focus', props.theme);\n if (color) return \"outline: 2px solid \" + color + \";\";\n return ''; // native\n }\n if (focus.outline && (!focus.border || !justBorder)) {\n if (typeof focus.outline === 'object') {\n var _color = normalizeColor(focus.outline.color || 'focus', props.theme);\n var size = focus.outline.size || '2px';\n return \"\\n outline-offset: 0px;\\n outline: \" + size + \" solid \" + _color + \";\\n \";\n }\n return \"outline: \" + focus.outline + \";\";\n }\n if (focus.shadow && (!focus.border || !justBorder)) {\n if (typeof focus.shadow === 'object') {\n var _color2 = normalizeColor(\n // If there is a focus.border.color, use that for shadow too.\n // This is for backwards compatibility in v2.\n focus.border && focus.border.color || focus.shadow.color || 'focus', props.theme);\n var _size = focus.shadow.size || '2px'; // backwards compatible default\n return \"\\n outline: none;\\n box-shadow: 0 0 \" + _size + \" \" + _size + \" \" + _color2 + \";\\n \";\n }\n return \"\\n outline: none;\\n box-shadow: \" + focus.shadow + \";\\n \";\n }\n if (focus.border) {\n var _color3 = normalizeColor(focus.border.color || 'focus', props.theme);\n return \"\\n outline: none;\\n border-color: \" + _color3 + \";\\n \";\n }\n return ''; // defensive\n};\nvar unfocusStyles = function unfocusStyles(props, _temp2) {\n var _ref2 = _temp2 === void 0 ? {} : _temp2,\n forceOutline = _ref2.forceOutline,\n justBorder = _ref2.justBorder;\n var focus = props.theme.global.focus;\n if (!focus || forceOutline && !focus.outline) {\n var color = normalizeColor('focus', props.theme);\n if (color) return \"outline: none;\";\n return ''; // native\n }\n if (focus.outline && (!focus.border || !justBorder)) {\n if (typeof focus.outline === 'object') {\n return \"\\n outline-offset: 0px;\\n outline: none;\\n \";\n }\n return \"outline: none;\";\n }\n if (focus.shadow && (!focus.border || !justBorder)) {\n if (typeof focus.shadow === 'object') {\n return \"\\n outline: none;\\n box-shadow: none;\\n \";\n }\n return \"\\n outline: none;\\n box-shadow: none;\\n \";\n }\n if (focus.border) {\n return \"\\n outline: none;\\n border-color: none;\\n \";\n }\n return ''; // defensive\n};\n\n// focus also supports clickable elements inside svg\nexport var focusStyle = function focusStyle(_temp3) {\n var _ref3 = _temp3 === void 0 ? {} : _temp3,\n forceOutline = _ref3.forceOutline,\n justBorder = _ref3.justBorder,\n skipSvgChildren = _ref3.skipSvgChildren;\n return css([\"\", \" \", \" \", \"\"], function (props) {\n return !skipSvgChildren && \"\\n > circle,\\n > ellipse,\\n > line,\\n > path,\\n > polygon,\\n > polyline,\\n > rect {\\n \" + focusStyles(props) + \"\\n }\";\n }, function (props) {\n return focusStyles(props, {\n forceOutline: forceOutline,\n justBorder: justBorder\n });\n }, !forceOutline && \"\\n ::-moz-focus-inner {\\n border: 0;\\n }\\n \");\n};\n\n// This is placed next to focusStyle for easy maintainability\n// of code since changes to focusStyle should be reflected in\n// unfocusStyle as well.\n// this function can be used to reset focus styles which is\n// applicable when turning the focus ring off when using the mouse\n// see https://nelo.is/writing/styling-better-focus-states/\nexport var unfocusStyle = function unfocusStyle(_temp4) {\n var _ref4 = _temp4 === void 0 ? {} : _temp4,\n forceOutline = _ref4.forceOutline,\n justBorder = _ref4.justBorder,\n skipSvgChildren = _ref4.skipSvgChildren;\n return css([\"\", \" \", \" \", \"\"], function (props) {\n return !skipSvgChildren && \"\\n > circle,\\n > ellipse,\\n > line,\\n > path,\\n > polygon,\\n > polyline,\\n > rect {\\n \" + unfocusStyles(props) + \"\\n }\";\n }, function (props) {\n return unfocusStyles(props, {\n forceOutline: forceOutline,\n justBorder: justBorder\n });\n }, !forceOutline && \"\\n ::-moz-focus-inner {\\n border: 0;\\n }\\n \");\n};\n\n// For backwards compatibility we need to add back the control border width.\n// Based on how grommet was functioning prior to https://github.com/grommet/grommet/pull/3939,\n// the padding was subtracting the border width from the theme value, but the\n// placeholder was not. Because we're now placing the subtraction into the\n// theme itself, we have to add back in the border width here.\n// This is used for placeholder/icon in TextInput and MaskedInput.\nvar adjustPad = function adjustPad(props, value) {\n return parseMetricToNum((props.theme.global.edgeSize[value] || value) + \"px\") + parseMetricToNum(props.theme.global.control.border.width + \"px\") + \"px\";\n};\nexport var getInputPadBySide = function getInputPadBySide(props, side) {\n if (typeof props.theme.global.input.padding !== 'object') {\n var _adjustedPad = adjustPad(props, props.theme.global.input.padding);\n return _adjustedPad;\n }\n var orientation;\n if (side === 'left' || side === 'right') orientation = 'horizontal';else if (side === 'top' || side === 'bottom') orientation = 'vertical';else orientation = undefined;\n\n // if individual side isn't available, fallback to the\n // orientation if possible\n var pad = props.theme.global.input.padding[side] || props.theme.global.input.padding[orientation];\n var adjustedPad = adjustPad(props, pad);\n return adjustedPad;\n};\nvar placeholderColor = css([\"color:\", \";\"], function (props) {\n return normalizeColor(props.theme.global.colors.placeholder, props.theme);\n});\nvar placeholderStyle = css([\"&::-webkit-input-placeholder{\", \";}&::-moz-placeholder{\", \";}&:-ms-input-placeholder{\", \";}\"], placeholderColor, placeholderColor, placeholderColor);\nvar inputSizeStyle = function inputSizeStyle(props) {\n var data = props.theme.text[props.size];\n if (!data) {\n return css([\"font-size:\", \";\"], props.size);\n }\n return css([\"font-size:\", \";line-height:\", \";\"], data.size, data.height);\n};\nexport var inputStyle = css([\"box-sizing:border-box;\", \" font-family:inherit;border:none;-webkit-appearance:none;background:transparent;color:inherit;width:100%;\", \" \", \" \", \" margin:0;\", \" &:focus{\", \";}\", \" \", \"::-webkit-search-decoration{-webkit-appearance:none;}&::-moz-focus-inner{border:none;outline:none;}&:-moz-placeholder,&::-moz-placeholder{opacity:1;}\", \"\"], function (props) {\n var _props$theme$text$pro;\n return \"font-size: \" + (props.theme.global.input.font.size ? ((_props$theme$text$pro = props.theme.text[props.theme.global.input.font.size]) == null ? void 0 : _props$theme$text$pro.size) || props.theme.global.input.font.size : 'inherit') + \";\";\n}, function (props) {\n return props.theme.global.input.font.height && \"line-height: \" + props.theme.global.input.font.height + \";\";\n}, function (props) {\n return props.theme.global.input.padding && typeof props.theme.global.input.padding !== 'object' ? // On a breaking change release, this condition could be removed and\n // just the edgeStyle could remain. Currently, this is needed for\n // backwards compatibility since we are placing the calculation in\n // base.js\n \"padding: \" + (parseMetricToNum(props.theme.global.edgeSize[props.theme.global.input.padding] || props.theme.global.input.padding) - parseMetricToNum(props.theme.global.control.border.width)) + \"px;\" : edgeStyle('padding', props.theme.global.input.padding, props.responsive, props.theme.box.responsiveBreakpoint, props.theme);\n}, function (props) {\n return (\n // for backwards compatibility, check if props.theme.global.input.weight\n (props.theme.global.input.weight || props.theme.global.input.font.weight) && css([\"font-weight:\", \";\"], props.theme.global.input.weight || props.theme.global.input.font.weight)\n );\n}, function (props) {\n return props.size && inputSizeStyle(props);\n}, function (props) {\n return (!props.plain || props.focusIndicator) && focusStyle();\n}, controlBorderStyle, placeholderStyle, function (props) {\n return props.theme.global.input.extend;\n});\n\n// Apply padding on input to create space for icon.\n// When theme.icon.matchSize is true, the space for the\n// icon should equal the icon dimension + 12px (edgeSize.medium)\n// to ensure there is reasonable space between the icon and value or placeholder\nexport var inputPadForIcon = css([\"\", \"\"], function (props) {\n var _props$theme, _props$theme$icon;\n var pad = (_props$theme = props.theme) != null && (_props$theme = _props$theme.icon) != null && _props$theme.matchSize ? parseMetricToNum((_props$theme$icon = props.theme.icon) == null || (_props$theme$icon = _props$theme$icon.size) == null ? void 0 : _props$theme$icon[(props == null ? void 0 : props.size) || 'medium']) + parseMetricToNum(props.theme.global.edgeSize.medium) + \"px\" : props.theme.global.edgeSize.large;\n return props.reverse ? \"padding-right: \" + pad + \";\" : \"padding-left: \" + pad + \";\";\n});\nexport var overflowStyle = function overflowStyle(overflowProp) {\n if (typeof overflowProp === 'string') {\n return css([\"overflow:\", \";\"], overflowProp);\n }\n return css([\"\", \" \", \";\"], overflowProp.horizontal && \"overflow-x: \" + overflowProp.horizontal + \";\", overflowProp.vertical && \"overflow-y: \" + overflowProp.vertical + \";\");\n};\nvar ALIGN_SELF_MAP = {\n center: 'center',\n end: 'flex-end',\n start: 'flex-start',\n stretch: 'stretch',\n baseline: 'baseline'\n};\nexport var genericStyles = css([\"\", \" \", \" \", \"\"], function (props) {\n return props.alignSelf && \"align-self: \" + ALIGN_SELF_MAP[props.alignSelf] + \";\";\n}, function (props) {\n return props.gridArea && \"grid-area: \" + props.gridArea + \";\";\n}, function (props) {\n return props.margin && props.theme.global && edgeStyle('margin', props.margin, props.responsive, props.theme.global.edgeSize.responsiveBreakpoint, props.theme);\n});\nexport var disabledStyle = function disabledStyle(componentStyle) {\n return css([\"opacity:\", \";cursor:default;\"], function (props) {\n return componentStyle || props.theme.global.control.disabled.opacity;\n });\n};\nexport var sizeStyle = function sizeStyle(name, value, theme) {\n return css([\"\", \":\", \";\"], name, theme.global.size[value] || value);\n};\nexport var plainInputStyle = css([\"outline:none;border:none;\"]);\n\n// CSS for this sub-object in the theme\nexport var kindPartStyles = function kindPartStyles(obj, theme, colorValue) {\n var styles = [];\n if (obj.padding || obj.pad) {\n // button uses `padding` but other components use Grommet `pad`\n var pad = obj.padding || obj.pad;\n if (pad.vertical || pad.horizontal) styles.push(\"padding: \" + (theme.global.edgeSize[pad.vertical] || pad.vertical || 0) + \" \" + (theme.global.edgeSize[pad.horizontal] || pad.horizontal || 0) + \";\");else styles.push(\"padding: \" + (theme.global.edgeSize[pad] || pad || 0) + \";\");\n }\n if (obj.background) styles.push(backgroundStyle(colorValue || obj.background, theme, obj.color || (Object.prototype.hasOwnProperty.call(obj, 'color') && obj.color === undefined ? false : undefined)));else if (obj.color) styles.push(\"color: \" + normalizeColor(obj.color, theme) + \";\");\n if (obj.border) {\n if (obj.border.width) styles.push(css([\"border-style:solid;border-width:\", \";\"], obj.border.width));\n if (obj.border.color) styles.push(css([\"border-color:\", \";\"], normalizeColor(!obj.background && colorValue || obj.border.color || 'border', theme)));\n if (obj.border.radius) styles.push(css([\"border-radius:\", \";\"], obj.border.radius));\n } else if (obj.border === false) styles.push('border: none;');\n if (colorValue && !obj.border && !obj.background) styles.push(\"color: \" + normalizeColor(colorValue, theme) + \";\");\n if (obj.font) {\n if (obj.font.size) {\n styles.push(\"font-size: \" + (theme.text[obj.font.size].size || obj.font.size) + \";\");\n }\n if (obj.font.height) {\n styles.push(\"line-height: \" + obj.font.height + \";\");\n }\n if (obj.font.weight) {\n styles.push(\"font-weight: \" + obj.font.weight + \";\");\n }\n }\n if (obj.opacity) {\n var opacity = obj.opacity === true ? theme.global.opacity.medium : theme.global.opacity[obj.opacity] || obj.opacity;\n styles.push(\"opacity: \" + opacity + \";\");\n }\n if (obj.extend) styles.push(obj.extend);\n return styles;\n};\nvar ROUND_MAP = {\n full: '100%'\n};\nexport var roundStyle = function roundStyle(data, responsive, theme) {\n var breakpoint = getBreakpointStyle(theme, theme.box.responsiveBreakpoint);\n var styles = [];\n if (typeof data === 'object') {\n var size = ROUND_MAP[data.size] || theme.global.edgeSize[data.size || 'medium'] || data.size;\n var responsiveSize = responsive && breakpoint && breakpoint.edgeSize[data.size] && (breakpoint.edgeSize[data.size] || data.size);\n if (data.corner === 'top') {\n styles.push(css([\"border-top-left-radius:\", \";border-top-right-radius:\", \";\"], size, size));\n if (responsiveSize) {\n styles.push(breakpointStyle(breakpoint, \"\\n border-top-left-radius: \" + responsiveSize + \";\\n border-top-right-radius: \" + responsiveSize + \";\\n \"));\n }\n } else if (data.corner === 'bottom') {\n styles.push(css([\"border-bottom-left-radius:\", \";border-bottom-right-radius:\", \";\"], size, size));\n if (responsiveSize) {\n styles.push(breakpointStyle(breakpoint, \"\\n border-bottom-left-radius: \" + responsiveSize + \";\\n border-bottom-right-radius: \" + responsiveSize + \";\\n \"));\n }\n } else if (data.corner === 'left') {\n styles.push(css([\"border-top-left-radius:\", \";border-bottom-left-radius:\", \";\"], size, size));\n if (responsiveSize) {\n styles.push(breakpointStyle(breakpoint, \"\\n border-top-left-radius: \" + responsiveSize + \";\\n border-bottom-left-radius: \" + responsiveSize + \";\\n \"));\n }\n } else if (data.corner === 'right') {\n styles.push(css([\"border-top-right-radius:\", \";border-bottom-right-radius:\", \";\"], size, size));\n if (responsiveSize) {\n styles.push(breakpointStyle(breakpoint, \"\\n border-top-right-radius: \" + responsiveSize + \";\\n border-bottom-right-radius: \" + responsiveSize + \";\\n \"));\n }\n } else if (data.corner) {\n styles.push(css([\"border-\", \"-radius:\", \";\"], data.corner, size));\n if (responsiveSize) {\n styles.push(breakpointStyle(breakpoint, \"\\n border-\" + data.corner + \"-radius: \" + responsiveSize + \";\\n \"));\n }\n } else {\n styles.push(css([\"border-radius:\", \";\"], size));\n if (responsiveSize) {\n styles.push(breakpointStyle(breakpoint, \"\\n border-radius: \" + responsiveSize + \";\\n \"));\n }\n }\n } else {\n var _size2 = data === true ? 'medium' : data;\n styles.push(css([\"border-radius:\", \";\"], ROUND_MAP[_size2] || theme.global.edgeSize[_size2] || _size2));\n var _responsiveSize = responsive && breakpoint && breakpoint.edgeSize[_size2];\n if (_responsiveSize) {\n styles.push(breakpointStyle(breakpoint, \"\\n border-radius: \" + _responsiveSize + \";\\n \"));\n }\n }\n return styles;\n};\nvar TEXT_ALIGN_MAP = {\n center: 'center',\n end: 'right',\n justify: 'justify',\n start: 'left'\n};\nexport var textAlignStyle = css([\"text-align:\", \";\"], function (props) {\n return TEXT_ALIGN_MAP[props.textAlign];\n});\nvar ALIGN_ITEMS_MAP = {\n baseline: 'baseline',\n center: 'center',\n end: 'flex-end',\n start: 'flex-start',\n stretch: 'stretch'\n};\nexport var alignStyle = css([\"align-items:\", \";\"], function (props) {\n var _ALIGN_ITEMS_MAP$prop;\n return (_ALIGN_ITEMS_MAP$prop = ALIGN_ITEMS_MAP[props.align]) != null ? _ALIGN_ITEMS_MAP$prop : props.align;\n});\nvar ALIGN_CONTENT_MAP = {\n around: 'space-around',\n baseline: 'baseline',\n between: 'space-between',\n center: 'center',\n evenly: 'space-evenly',\n end: 'flex-end',\n start: 'flex-start',\n stretch: 'stretch'\n};\nexport var alignContentStyle = css([\"align-content:\", \";\"], function (props) {\n var _ALIGN_CONTENT_MAP$pr;\n return (_ALIGN_CONTENT_MAP$pr = ALIGN_CONTENT_MAP[props.alignContent]) != null ? _ALIGN_CONTENT_MAP$pr : props.alignContent;\n});\nvar getSize = function getSize(theme, size) {\n return theme.global.size[size] || size;\n};\nvar widthObjectStyle = function widthObjectStyle(width, theme) {\n var result = [];\n if (width.max) result.push(css([\"max-width:\", \";\"], getSize(theme, width.max)));\n if (width.min) result.push(css([\"min-width:\", \";\"], getSize(theme, width.min)));\n if (width.width) result.push(css([\"width:\", \";\"], getSize(theme, width.width)));\n return result;\n};\nvar widthStringStyle = function widthStringStyle(width, theme) {\n return css([\"width:\", \";\"], getSize(theme, width));\n};\nexport var widthStyle = function widthStyle(width, theme) {\n return typeof width === 'object' ? widthObjectStyle(width, theme) : widthStringStyle(width, theme);\n};\nvar heightObjectStyle = function heightObjectStyle(height, theme) {\n var result = [];\n if (height.max) result.push(css([\"max-height:\", \";\"], getSize(theme, height.max)));\n if (height.min) result.push(css([\"min-height:\", \";\"], getSize(theme, height.min)));\n // backwards compatibile\n if (height.width) result.push(css([\"height:\", \";\"], getSize(theme, height.height)));\n if (height.height) result.push(css([\"height:\", \";\"], getSize(theme, height.height)));\n return result;\n};\nvar heightStringStyle = function heightStringStyle(height, theme) {\n return css([\"height:\", \";\"], getSize(theme, height));\n};\nexport var heightStyle = function heightStyle(height, theme) {\n return typeof height === 'object' ? heightObjectStyle(height, theme) : heightStringStyle(height, theme);\n};","import { css } from 'styled-components';\nimport { normalizeColor } from './colors';\nimport { breakpointStyle } from './mixins';\nexport var responsiveBorderStyle = function responsiveBorderStyle(data, theme) {\n var color = normalizeColor(data.color || 'border', theme);\n var borderSize = data.size || 'xsmall';\n var style = data.style || 'solid';\n var side = typeof data === 'string' ? data : data.side || 'all';\n var breakpoint = theme.box.responsiveBreakpoint && theme.global.breakpoints[theme.box.responsiveBreakpoint];\n if (!breakpoint.borderSize) breakpoint.borderSize = theme.global.borderSize;\n var value = breakpoint && (breakpoint.borderSize[borderSize] || borderSize) && style + \" \" + (breakpoint.borderSize[borderSize] || borderSize) + \" \" + color;\n if (!value) return undefined;\n if (side === 'top' || side === 'bottom' || side === 'left' || side === 'right') return \"border-\" + side + \": \" + value + \";\";\n if (side === 'end' || side === 'start') return \"border-inline-\" + side + \": \" + value + \";\";\n if (side === 'vertical') return \"\\n border-left: \" + value + \";\\n border-right: \" + value + \";\\n \";\n if (side === 'horizontal') return \"\\n border-top: \" + value + \";\\n border-bottom: \" + value + \";\\n \";\n if (side === 'between') return undefined; // no-op\n return \"border: \" + value + \";\";\n};\nexport var borderStyle = function borderStyle(borderData, responsive, theme) {\n var borderStyles = [];\n (Array.isArray(borderData) ? borderData : [borderData]).forEach(function (data) {\n var styles = [];\n var color = normalizeColor(data.color || 'border', theme);\n var borderSize = data.size || 'xsmall';\n var style = data.style || 'solid';\n var side = typeof data === 'string' ? data : data.side || 'all';\n var value = style + \" \" + (theme.global.borderSize[borderSize] || borderSize) + \" \" + color;\n var responsiveStyle = responsive && responsiveBorderStyle(data, theme);\n var breakpoint = responsiveStyle && theme.box.responsiveBreakpoint && theme.global.breakpoints[theme.box.responsiveBreakpoint];\n if (side === 'top' || side === 'bottom' || side === 'left' || side === 'right') {\n styles.push(\"border-\" + side + \": \" + value + \";\");\n if (responsiveStyle) {\n styles.push(breakpointStyle(breakpoint, responsiveStyle));\n }\n } else if (side === 'end' || side === 'start') {\n styles.push(css([\"border-inline-\", \":\", \";\"], side, value));\n if (responsiveStyle) {\n styles.push(breakpointStyle(breakpoint, responsiveStyle));\n }\n } else if (side === 'vertical') {\n styles.push(css([\"border-left:\", \";border-right:\", \";\"], value, value));\n if (responsiveStyle) {\n styles.push(breakpointStyle(breakpoint, responsiveStyle));\n }\n } else if (side === 'horizontal') {\n styles.push(css([\"border-top:\", \";border-bottom:\", \";\"], value, value));\n if (responsiveStyle) {\n styles.push(breakpointStyle(breakpoint, responsiveStyle));\n }\n } else if (side === 'between') {\n // no-op\n } else {\n styles.push(css([\"border:\", \";\"], value));\n if (responsiveStyle) {\n styles.push(breakpointStyle(breakpoint, responsiveStyle));\n }\n }\n borderStyles.push(styles);\n });\n return borderStyles;\n};","import { css, keyframes } from 'styled-components';\nvar PULSE_SIZES = {\n xsmall: 1.001,\n small: 1.01,\n medium: 1.1,\n large: 1.5,\n xlarge: 2\n};\nvar SLIDE_SIZES = {\n xsmall: 1,\n small: 5,\n medium: 10,\n large: 50,\n xlarge: 200\n};\nvar JIGGLE_SIZES = {\n xsmall: 0.1,\n small: 1,\n medium: 5,\n large: 400,\n xlarge: 1000\n};\nvar ZOOM_SIZES = {\n xsmall: 0.001,\n small: 0.01,\n medium: 0.05,\n large: 0.1,\n xlarge: 0.5\n};\nexport var animationBounds = function animationBounds(type, size) {\n if (size === void 0) {\n size = 'medium';\n }\n if (type === 'draw') {\n return ['', \"stroke-dashoffset: 0\"];\n }\n if (type === 'fadeIn') {\n return ['opacity: 0;', 'opacity: 1;'];\n }\n if (type === 'fadeOut') {\n return ['opacity: 1;', 'opacity: 0;'];\n }\n if (type === 'jiggle') {\n var deg = JIGGLE_SIZES[size];\n return [\"transform: rotate(-\" + deg + \"deg);\", \"transform: rotate(\" + deg + \"deg);\"];\n }\n if (type === 'pulse') {\n return ['transform: scale(1);', \"transform: scale(\" + PULSE_SIZES[size] + \")\"];\n }\n if (type === 'rotateRight') {\n return [\"transform: rotate(0deg);\", \"transform: rotate(359deg);\"];\n }\n if (type === 'rotateLeft') {\n return [\"transform: rotate(0deg);\", \"transform: rotate(-359deg);\"];\n }\n if (type === 'flipIn') {\n return ['transform: rotateY(90deg);', 'transform: rotateY(0);'];\n }\n if (type === 'flipOut') {\n return ['transform: rotateY(0);', 'transform: rotateY(90deg);'];\n }\n if (type === 'slideDown') {\n return [\"transform: translateY(-\" + SLIDE_SIZES[size] + \"%);\", 'transform: none;'];\n }\n if (type === 'slideLeft') {\n return [\"transform: translateX(\" + SLIDE_SIZES[size] + \"%);\", 'transform: none;'];\n }\n if (type === 'slideRight') {\n return [\"transform: translateX(-\" + SLIDE_SIZES[size] + \"%);\", 'transform: none;'];\n }\n if (type === 'slideUp') {\n return [\"transform: translateY(\" + SLIDE_SIZES[size] + \"%);\", 'transform: none;'];\n }\n if (type === 'zoomIn') {\n return [\"transform: scale(\" + (1 - ZOOM_SIZES[size]) + \");\", 'transform: none;'];\n }\n if (type === 'zoomOut') {\n return [\"transform: scale(\" + (1 + ZOOM_SIZES[size]) + \");\", 'transform: none;'];\n }\n return [];\n};\nexport var normalizeTiming = function normalizeTiming(time, defaultTiming) {\n return typeof time === 'number' ? time / 1000.0 + \"s\" : time || defaultTiming;\n};\nexport var animationEnding = function animationEnding(type) {\n if (type === 'draw') {\n return 'linear forwards';\n }\n if (type === 'jiggle') {\n return 'alternate infinite';\n }\n if (type === 'pulse') {\n return 'alternate infinite';\n }\n if (type === 'rotateRight' || type === 'rotateLeft') {\n return 'infinite linear';\n }\n return 'forwards';\n};\nexport var animationObjectStyle = function animationObjectStyle(animation, theme, themeObj) {\n var bounds = animationBounds(animation.type, animation.size);\n var animationTheme = themeObj && themeObj.animation || theme.global.animation;\n if (bounds) {\n var animationTransition = css([\"from{\", \";}to{\", \";}\"], bounds[0], bounds[1]);\n var defaultDuration = function defaultDuration() {\n return normalizeTiming(animationTheme[animation.type] ? animationTheme[animation.type].duration : animation.duration, animationTheme.duration);\n };\n return css([\"\", \" \", \" \", \" \", \"\"], keyframes([\"\", \"\"], animationTransition), normalizeTiming(animation.duration, defaultDuration()), normalizeTiming(animation.delay, '0s'), animationEnding(animation.type));\n }\n return '';\n};","function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport PropTypes from 'prop-types';\nimport { animationPropType, backgroundDoc, elevationPropType, genericProps, heightPropType, hoverIndicatorPropType, padPropType, roundPropType, skeletonPropType, widthPropType } from '../../utils/general-prop-types';\nvar OVERFLOW_VALUES = ['auto', 'hidden', 'scroll', 'visible'];\nvar BORDER_SHAPE = PropTypes.shape({\n color: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({\n dark: PropTypes.string,\n light: PropTypes.string\n })]),\n side: PropTypes.oneOf(['top', 'left', 'bottom', 'right', 'start', 'end', 'horizontal', 'vertical', 'all', 'between']),\n size: PropTypes.oneOfType([PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']), PropTypes.string]),\n style: PropTypes.oneOf(['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden'])\n});\n\n// if you update values here, make sure to update in Drop/doc too.\nvar overflowPropType = PropTypes.oneOfType([PropTypes.oneOf(OVERFLOW_VALUES), PropTypes.shape({\n horizontal: PropTypes.oneOf(OVERFLOW_VALUES),\n vertical: PropTypes.oneOf(OVERFLOW_VALUES)\n}), PropTypes.string]);\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = _extends({}, genericProps, {\n align: PropTypes.oneOfType([PropTypes.oneOf(['baseline', 'center', 'end', 'start', 'stretch']), PropTypes.string]),\n alignContent: PropTypes.oneOfType([PropTypes.oneOf(['around', 'baseline', 'between', 'center', 'evenly', 'end', 'start', 'stretch']), PropTypes.string]),\n animation: animationPropType,\n background: backgroundDoc,\n basis: PropTypes.oneOfType([PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'full', '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', 'auto']), PropTypes.string]),\n border: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'left', 'bottom', 'right', 'start', 'end', 'horizontal', 'vertical', 'all', 'between']), BORDER_SHAPE, PropTypes.arrayOf(BORDER_SHAPE)]),\n direction: PropTypes.oneOf(['row', 'column', 'row-responsive', 'row-reverse', 'column-reverse']),\n elevation: elevationPropType,\n flex: PropTypes.oneOfType([PropTypes.oneOf(['grow', 'shrink']), PropTypes.bool, PropTypes.shape({\n grow: PropTypes.number,\n shrink: PropTypes.number\n })]),\n fill: PropTypes.oneOfType([PropTypes.oneOf(['horizontal', 'vertical']), PropTypes.bool]),\n focusIndicator: PropTypes.bool,\n gap: PropTypes.oneOfType([PropTypes.oneOf(['none', 'xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge']), PropTypes.string, PropTypes.shape({\n row: PropTypes.string,\n column: PropTypes.string\n })]),\n height: heightPropType,\n hoverIndicator: hoverIndicatorPropType,\n justify: PropTypes.oneOf(['around', 'between', 'center', 'end', 'evenly', 'start', 'stretch']),\n onClick: PropTypes.func,\n overflow: overflowPropType,\n pad: padPropType,\n responsive: PropTypes.bool,\n round: roundPropType,\n skeleton: skeletonPropType,\n tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.elementType]),\n width: widthPropType,\n wrap: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['reverse'])])\n });\n}\nexport var BoxPropTypes = PropType;","import React, { useContext } from 'react';\nexport var SkeletonContext = /*#__PURE__*/React.createContext();\nexport var useSkeleton = function useSkeleton() {\n return useContext(SkeletonContext);\n};","import PropTypes from 'prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = {\n children: PropTypes.func\n };\n}\nexport var AnnounceContextPropTypes = PropType;","import React from 'react';\nimport { AnnounceContextPropTypes } from './propTypes';\nvar createAnnouncer = function createAnnouncer() {\n var announcer = document.createElement('div');\n announcer.id = 'grommet-announcer';\n announcer.style.left = '-100%';\n announcer.style.right = '100%';\n announcer.style.position = 'fixed';\n announcer.style['z-index'] = '-1';\n document.body.insertBefore(announcer, document.body.firstChild);\n return announcer;\n};\nexport var AnnounceContext = /*#__PURE__*/React.createContext(function (message, mode, timeout) {\n if (mode === void 0) {\n mode = 'polite';\n }\n if (timeout === void 0) {\n timeout = 500;\n }\n // we only create a new container if we don't have one already\n // we create a separate node so that grommet does not set aria-hidden to it\n var announcer = document.body.querySelector(\"#grommet-announcer[aria-live]\") || createAnnouncer();\n announcer.setAttribute('aria-live', 'off');\n announcer.innerHTML = message;\n announcer.setAttribute('aria-live', mode);\n setTimeout(function () {\n announcer.innerHTML = '';\n }, timeout);\n});\nAnnounceContext.propTypes = AnnounceContextPropTypes;","import React from 'react';\nexport var OptionsContext = /*#__PURE__*/React.createContext({});","var _excluded = [\"a11yTitle\", \"background\", \"border\", \"children\", \"cssGap\", \"direction\", \"elevation\", \"fill\", \"gap\", \"kind\", \"onBlur\", \"onClick\", \"onFocus\", \"overflow\", \"responsive\", \"tag\", \"as\", \"wrap\", \"width\", \"height\", \"tabIndex\", \"skeleton\"],\n _excluded2 = [\"colors\", \"size\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { Children, forwardRef, useContext, useEffect, useMemo, useState } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { defaultProps } from '../../default-props';\nimport { backgroundIsDark } from '../../utils';\nimport { Keyboard } from '../Keyboard';\nimport { StyledBox, StyledBoxGap } from './StyledBox';\nimport { BoxPropTypes } from './propTypes';\nimport { SkeletonContext, useSkeleton } from '../Skeleton';\nimport { AnnounceContext } from '../../contexts/AnnounceContext';\nimport { OptionsContext } from '../../contexts/OptionsContext';\nvar Box = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var a11yTitle = _ref.a11yTitle,\n backgroundProp = _ref.background,\n border = _ref.border,\n children = _ref.children,\n cssGap = _ref.cssGap,\n _ref$direction = _ref.direction,\n direction = _ref$direction === void 0 ? 'column' : _ref$direction,\n elevation = _ref.elevation,\n fill = _ref.fill,\n gap = _ref.gap,\n kind = _ref.kind,\n _onBlur = _ref.onBlur,\n onClick = _ref.onClick,\n _onFocus = _ref.onFocus,\n overflow = _ref.overflow,\n _ref$responsive = _ref.responsive,\n responsive = _ref$responsive === void 0 ? true : _ref$responsive,\n tag = _ref.tag,\n as = _ref.as,\n wrap = _ref.wrap,\n width = _ref.width,\n height = _ref.height,\n tabIndex = _ref.tabIndex,\n skeletonProp = _ref.skeleton,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n var theme = useContext(ThemeContext) || defaultProps.theme;\n // boxOptions was created to preserve backwards compatibility but\n // should not be supported in v3\n var _useContext = useContext(OptionsContext),\n boxOptions = _useContext.box;\n var skeleton = useSkeleton();\n var background = backgroundProp;\n var announce = useContext(AnnounceContext);\n useEffect(function () {\n var _skeletonProp$message;\n if (skeletonProp != null && (_skeletonProp$message = skeletonProp.message) != null && _skeletonProp$message.start) announce(skeletonProp.message.start);else if (typeof (skeletonProp == null ? void 0 : skeletonProp.message) === 'string') announce(skeletonProp.message);\n return function () {\n var _skeletonProp$message2;\n return (skeletonProp == null || (_skeletonProp$message2 = skeletonProp.message) == null ? void 0 : _skeletonProp$message2.end) && announce(skeletonProp.message.end);\n };\n }, [announce, skeletonProp]);\n var focusable = useMemo(function () {\n return onClick && !(tabIndex < 0);\n }, [onClick, tabIndex]);\n var _useState = useState(),\n focus = _useState[0],\n setFocus = _useState[1];\n var clickProps = useMemo(function () {\n if (focusable) {\n return {\n onClick: onClick,\n onFocus: function onFocus(event) {\n setFocus(true);\n if (_onFocus) _onFocus(event);\n },\n onBlur: function onBlur(event) {\n setFocus(false);\n if (_onBlur) _onBlur(event);\n }\n };\n }\n var result = {};\n if (_onBlur) result.onBlur = _onBlur;\n if (onClick) result.onClick = onClick;\n if (_onFocus) result.onFocus = _onFocus;\n return result;\n }, [focusable, onClick, _onFocus, _onBlur]);\n var adjustedTabIndex = useMemo(function () {\n if (tabIndex !== undefined) return tabIndex;\n if (focusable) return 0;\n return undefined;\n }, [focusable, tabIndex]);\n if ((border === 'between' || border && border.side === 'between' || Array.isArray(border) && border.find(function (b) {\n return b.side === 'between';\n })) && !gap) {\n console.warn('Box must have a gap to use border between');\n }\n var contents = children;\n if (gap && gap !== 'none' && (!(boxOptions != null && boxOptions.cssGap || cssGap || typeof gap === 'object') ||\n // need this approach to show border between\n border === 'between' || (border == null ? void 0 : border.side) === 'between' || Array.isArray(border) && border.find(function (b) {\n return b.side === 'between';\n }))) {\n // if border is an array, we need to extract the border between object\n var styledBoxGapBorder = Array.isArray(border) ? border.find(function (b) {\n return b.side === 'between';\n }) : border;\n var boxAs = !as && tag ? tag : as;\n contents = [];\n var firstIndex;\n Children.forEach(children, function (child, index) {\n if (child) {\n if (firstIndex === undefined) {\n firstIndex = index;\n } else {\n contents.push( /*#__PURE__*/React.createElement(StyledBoxGap\n // eslint-disable-next-line react/no-array-index-key\n , {\n key: \"gap-\" + index,\n as: boxAs === 'span' ? boxAs : 'div',\n gap: gap,\n directionProp: direction,\n responsive: responsive,\n border: styledBoxGapBorder\n }));\n }\n }\n contents.push(child);\n });\n }\n var nextSkeleton = useMemo(function () {\n // Decide if we need to add a new SkeletonContext. We need one if:\n // 1. skeleton info was set in a property OR\n // 2. there already is a SkeletonContext but this box has a\n // background or border. This means the box probably is more\n // distinguishable from the area around it.\n // We keep track of a depth so we know how to alternate backgrounds.\n if (skeletonProp || (background || border) && skeleton) {\n var depth = skeleton ? skeleton.depth + 1 : 0;\n return _extends({}, skeleton, {\n depth: depth\n }, typeof skeletonProp === 'object' ? skeletonProp : {});\n }\n return undefined;\n }, [background, border, skeleton, skeletonProp]);\n var skeletonProps = {};\n if (nextSkeleton) {\n var _theme$skeleton = theme.skeleton,\n skeletonThemeColors = _theme$skeleton.colors,\n skeletonThemeSize = _theme$skeleton.size,\n skeletonThemeProps = _objectWithoutPropertiesLoose(_theme$skeleton, _excluded2);\n var skeletonColors = nextSkeleton.colors ? nextSkeleton.colors[theme.dark ? 'dark' : 'light'] : skeletonThemeColors == null ? void 0 : skeletonThemeColors[theme.dark ? 'dark' : 'light'];\n skeletonProps = _extends({}, skeletonThemeProps);\n background = skeletonColors[nextSkeleton.depth % skeletonColors.length];\n if (skeletonProp != null && skeletonProp.animation) {\n skeletonProps.animation = skeletonProp.animation;\n }\n contents = /*#__PURE__*/React.createElement(SkeletonContext.Provider, {\n value: nextSkeleton\n }, contents);\n }\n\n // construct a new theme object in case we have a background that wants\n // to change the background color context\n var nextTheme = useMemo(function () {\n var result;\n if (background || theme.darkChanged) {\n var dark = backgroundIsDark(background, theme);\n var darkChanged = dark !== undefined && dark !== theme.dark;\n if (darkChanged || theme.darkChanged) {\n result = _extends({}, theme);\n result.dark = dark === undefined ? theme.dark : dark;\n result.background = background;\n } else if (background) {\n // This allows DataTable to intelligently set the background\n // of a pinned header or footer.\n result = _extends({}, theme);\n result.background = background;\n }\n }\n return result || theme;\n }, [background, theme]);\n var content = /*#__PURE__*/React.createElement(StyledBox, _extends({\n as: !as && tag ? tag : as,\n \"aria-label\": a11yTitle,\n background: background,\n border: border,\n ref: ref,\n directionProp: direction,\n elevationProp: elevation,\n fillProp: fill,\n focus: focus,\n gap: ((boxOptions == null ? void 0 : boxOptions.cssGap) || cssGap || typeof gap === 'object') && gap && gap !== 'none' && border !== 'between' && (border == null ? void 0 : border.side) !== 'between' && (!Array.isArray(border) || !border.find(function (b) {\n return b.side === 'between';\n })) && gap,\n kindProp: kind,\n overflowProp: overflow,\n wrapProp: wrap,\n widthProp: width,\n heightProp: height,\n responsive: responsive,\n tabIndex: adjustedTabIndex\n }, clickProps, rest, skeletonProps), /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: nextTheme\n }, contents));\n if (onClick) {\n content = /*#__PURE__*/React.createElement(Keyboard, {\n onEnter: onClick\n }, content);\n }\n return content;\n});\nBox.displayName = 'Box';\nBox.propTypes = BoxPropTypes;\nexport { Box };","/* eslint-disable no-restricted-imports */\nimport { useLayoutEffect as vanillaUseLayoutEffect, useEffect } from 'react';\n\n/**\n * A substitute for React's useLayoutEffect, which does not generate warnings on\n * SSR. It is named useLayoutEffect so that all eslint rules applying to the\n * original useLayoutEffect would also apply to it.\n * This solution was suggested by Alex Reardon.\n * @see https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a\n * @see https://github.com/grommet/grommet/issues/4765\n */\nexport var useLayoutEffect = typeof window !== 'undefined' ? vanillaUseLayoutEffect : useEffect;\nexport default useLayoutEffect;","import styled, { css } from 'styled-components';\nimport { genericStyles, normalizeColor, textAlignStyle } from '../../utils';\nimport { defaultProps } from '../../default-props';\nvar sizeStyle = function sizeStyle(props) {\n var size = props.size || 'medium';\n var data = props.theme.text[size];\n if (data) {\n return css([\"font-size:\", \";line-height:\", \";\"], data.size, data.height);\n }\n return css([\"font-size:\", \";line-height:normal;\"], size);\n};\nvar truncateStyle = \"\\n white-space: nowrap;\\n max-width: 100%;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n\";\nvar colorStyle = css([\"color:\", \";\"], function (props) {\n return normalizeColor(props.colorProp, props.theme);\n});\nvar weightStyle = css([\"font-weight:\", \";\"], function (props) {\n return props.weight;\n});\nvar wordBreakStyle = css([\"word-break:\", \";\"], function (props) {\n return props.wordBreak;\n});\nvar fontFamily = css([\"font-family:\", \";\"], function (props) {\n return props.theme.text.font.family;\n});\nvar StyledText = styled('span').withConfig({\n shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {\n return defaultValidatorFn(prop) && prop !== 'size';\n }\n}).withConfig({\n displayName: \"StyledText\",\n componentId: \"sc-1sadyjn-0\"\n})([\"\", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \"\"], genericStyles, function (props) {\n return sizeStyle(props);\n}, function (props) {\n return props.textAlign && textAlignStyle;\n}, function (props) {\n return props.truncate && truncateStyle;\n}, function (props) {\n return props.colorProp && colorStyle;\n}, function (props) {\n return props.weight && weightStyle;\n}, function (props) {\n return props.wordBreak && wordBreakStyle;\n}, function (props) {\n return props.theme.text.font && props.theme.text.font.family && fontFamily;\n}, function (props) {\n return props.theme.text && props.theme.text.extend;\n});\nStyledText.defaultProps = {};\nObject.setPrototypeOf(StyledText.defaultProps, defaultProps);\nexport { StyledText };","export var findScrollParent = function findScrollParent(element, horizontal) {\n var result;\n if (element) {\n var parent = element.parentNode;\n while (!result && parent && parent.getBoundingClientRect) {\n var rect = parent.getBoundingClientRect();\n // 10px is to account for borders and scrollbars in a lazy way\n if (horizontal) {\n if (rect.width && parent.scrollWidth > rect.width + 10) {\n result = parent;\n }\n } else if (rect.height && parent.scrollHeight > rect.height + 10) {\n result = parent;\n }\n parent = parent.parentNode;\n }\n // last scrollable element will be the document\n // if nothing else is scrollable in the page\n if (!result) {\n result = document;\n } else if (result.tagName.toLowerCase() === 'body') {\n result = document;\n }\n }\n return result;\n};\nvar documentTags = ['html', 'body'];\nexport var findScrollParents = function findScrollParents(element, horizontal) {\n var result = [];\n if (element) {\n var parent = element.parentNode;\n while (parent && parent.getBoundingClientRect) {\n var rect = parent.getBoundingClientRect();\n // 10px is to account for borders and scrollbars in a lazy way\n if (horizontal) {\n if (rect.width && parent.scrollWidth > rect.width + 10) {\n result.push(parent);\n }\n } else if (rect.height && parent.scrollHeight > rect.height + 10) {\n result.push(parent);\n }\n parent = parent.parentNode;\n }\n if (result.length && documentTags.includes(result[0].tagName.toLowerCase())) {\n result.length = 0;\n }\n // last scrollable element will be the document\n result.push(document);\n }\n return result;\n};\nexport var containsFocus = function containsFocus(node) {\n var root = node.getRootNode();\n var element = root.activeElement;\n while (element) {\n if (element === node) break;\n element = element.parentElement;\n }\n return !!element;\n};\nexport var withinDropPortal = function withinDropPortal(node, portalContext) {\n var root = node == null ? void 0 : node.getRootNode();\n var element = node;\n var portalId;\n while (element && element !== root) {\n if (element.hasAttribute('data-g-portal-id')) {\n portalId = element.getAttribute('data-g-portal-id');\n element = root;\n } else {\n element = element.parentElement;\n }\n }\n // if portalContext doesn't contain the portalId then the\n // portal is new and node is within a drop that just opened\n if (portalId === undefined || portalContext.indexOf(parseInt(portalId, 10)) !== -1) return false;\n return true;\n};\n\n// Check if the element.tagName is an input, select or textarea\nexport var isFocusable = function isFocusable(element) {\n var tagName = element.tagName.toLowerCase();\n return tagName === 'input' || tagName === 'select' || tagName === 'textarea';\n};\n\n// Get the first element that can receive focus\nexport var getFirstFocusableDescendant = function getFirstFocusableDescendant(element) {\n var children = element.getElementsByTagName('*');\n for (var i = 0; i < children.length; i += 1) {\n var child = children[i];\n if (isFocusable(child)) {\n return child;\n }\n }\n return undefined;\n};\nexport var shouldKeepFocus = function shouldKeepFocus(root) {\n var element = root.activeElement;\n if (isFocusable(element)) return true;\n return !!getFirstFocusableDescendant(element);\n};\nexport var getNewContainer = function getNewContainer(target, targetChildPosition) {\n if (target === void 0) {\n target = document.body;\n }\n // setup DOM\n var container = document.createElement('div');\n if (targetChildPosition === 'first') {\n // for SkipLinks\n target.prepend(container);\n } else {\n target.appendChild(container);\n }\n return container;\n};\nexport var setFocusWithoutScroll = function setFocusWithoutScroll(element) {\n var x = window.scrollX;\n var y = window.scrollY;\n element.focus();\n window.scrollTo(x, y);\n};\nvar TABINDEX = 'tabindex';\nvar TABINDEX_STATE = 'data-g-tabindex';\nexport var makeNodeFocusable = function makeNodeFocusable(node) {\n // do not touch aria live containers so that announcements work\n if (!node.hasAttribute('aria-live')) {\n node.removeAttribute('aria-hidden');\n // allow children to receive focus again\n var elements = node.getElementsByTagName('*');\n // only reset elements we've changed in makeNodeUnfocusable()\n Array.prototype.filter.call(elements || [], function (element) {\n return element.hasAttribute(TABINDEX_STATE);\n }).forEach(function (element) {\n var prior = element.getAttribute(TABINDEX_STATE);\n if (prior >= 0) {\n element.setAttribute(TABINDEX, element.getAttribute(TABINDEX_STATE));\n } else if (prior === 'none') {\n element.removeAttribute(TABINDEX);\n }\n element.removeAttribute(TABINDEX_STATE);\n });\n }\n};\n\n// Using ^ and $ to match the whole tagName, and not e.g. and .\nvar autoFocusingTags = /^(a|area|input|select|textarea|button|iframe)$/;\nexport var makeNodeUnfocusable = function makeNodeUnfocusable(node) {\n // do not touch aria live containers so that announcements work\n if (!node.hasAttribute('aria-live')) {\n node.setAttribute('aria-hidden', true);\n // prevent children to receive focus\n var elements = node.getElementsByTagName('*');\n // first, save off the tabIndex of any element with one\n Array.prototype.filter.call(elements || [], function (element) {\n return element.getAttribute(TABINDEX) !== null;\n }).forEach(function (element) {\n element.setAttribute(TABINDEX_STATE, element.getAttribute(TABINDEX));\n element.setAttribute(TABINDEX, -1);\n });\n // then, if any element is inherently focusable and not handled above,\n // give it a tabIndex of -1 so it can't receive focus\n Array.prototype.filter.call(elements || [], function (element) {\n var currentTag = element.tagName.toLowerCase();\n return currentTag.match(autoFocusingTags) && element.focus && element.getAttribute(TABINDEX_STATE) === null;\n }).forEach(function (element) {\n element.setAttribute(TABINDEX_STATE, 'none');\n element.setAttribute(TABINDEX, -1);\n });\n }\n};\nexport var findVisibleParent = function findVisibleParent(element) {\n if (element) {\n // Get the closest ancestor element that is positioned.\n return element.offsetParent ? element : findVisibleParent(element.parentElement) || element;\n }\n return undefined;\n};\nexport var isNodeAfterScroll = function isNodeAfterScroll(node, target) {\n var _node$getBoundingClie = node.getBoundingClientRect(),\n bottom = _node$getBoundingClie.bottom;\n // target will be the document from findScrollParent()\n var _ref = target.getBoundingClientRect ? target.getBoundingClientRect() : {\n height: 0,\n top: 0\n },\n height = _ref.height,\n top = _ref.top;\n return bottom >= top + height;\n};\nexport var isNodeBeforeScroll = function isNodeBeforeScroll(node, target) {\n var _node$getBoundingClie2 = node.getBoundingClientRect(),\n top = _node$getBoundingClie2.top;\n // target will be the document from findScrollParent()\n var _ref2 = target.getBoundingClientRect ? target.getBoundingClientRect() : {\n top: 0\n },\n targetTop = _ref2.top;\n return top <= targetTop;\n};\nexport var findButtonParent = function findButtonParent(element) {\n if (element && element.nodeName !== 'BUTTON' && element.nodeName !== 'A') return findButtonParent(element.parentElement);\n return element;\n};","import React from 'react';\nexport var ContainerTargetContext = /*#__PURE__*/React.createContext(typeof document === 'object' ? document.body : undefined);","import React from 'react';\n\n// When toggling aria-hidden values, we only want to affect elements\n// in the DOM that come from Grommet, so we track those elements in this\n// context value. See FocusedContainer.js\nexport var RootsContext = /*#__PURE__*/React.createContext([]);","var _excluded = [\"hidden\", \"restrictScroll\", \"children\", \"trapFocus\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { useContext, useEffect, useRef, useState } from 'react';\nimport { makeNodeFocusable, makeNodeUnfocusable } from '../utils';\nimport { RootsContext } from '../contexts/RootsContext';\nexport var FocusedContainer = function FocusedContainer(_ref) {\n var _ref$hidden = _ref.hidden,\n hidden = _ref$hidden === void 0 ? false : _ref$hidden,\n _ref$restrictScroll = _ref.restrictScroll,\n restrictScroll = _ref$restrictScroll === void 0 ? false : _ref$restrictScroll,\n children = _ref.children,\n trapFocus = _ref.trapFocus,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n var _useState = useState(''),\n bodyOverflowStyle = _useState[0],\n setBodyOverflowStyle = _useState[1];\n var ref = useRef(null);\n var roots = useContext(RootsContext);\n var _useState2 = useState(roots),\n nextRoots = _useState2[0],\n setNextRoots = _useState2[1];\n useEffect(function () {\n // make sure value of null is not added to array\n if (ref.current) setNextRoots([].concat(roots, [ref.current]));\n }, [roots]);\n useEffect(function () {\n if (bodyOverflowStyle !== 'hidden' && !hidden && restrictScroll && trapFocus) {\n setBodyOverflowStyle(document.body.style.overflow);\n document.body.style.overflow = 'hidden';\n }\n return function () {\n if (bodyOverflowStyle !== 'hidden' && !hidden && restrictScroll && trapFocus) {\n document.body.style.overflow = bodyOverflowStyle;\n }\n };\n }, [bodyOverflowStyle, hidden, trapFocus, restrictScroll]);\n useEffect(function () {\n var timer = setTimeout(function () {\n if (!hidden && trapFocus && roots && roots[0]) {\n roots.forEach(makeNodeUnfocusable);\n }\n }, 0);\n return function () {\n // remove trap and restore ability to focus on the last root only\n if (roots && roots[0]) makeNodeFocusable(roots[roots.length - 1]);\n clearTimeout(timer);\n };\n }, [hidden, roots, trapFocus]);\n return /*#__PURE__*/React.createElement(RootsContext.Provider, {\n value: nextRoots\n }, /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref,\n \"aria-hidden\": hidden\n }, rest), children));\n};","import React from 'react';\nexport var PortalContext = /*#__PURE__*/React.createContext([]);","import { useImperativeHandle, useRef } from 'react';\nexport var useForwardedRef = function useForwardedRef(ref) {\n var innerRef = useRef(null);\n useImperativeHandle(ref, function () {\n return innerRef.current;\n }, [innerRef]);\n return innerRef;\n};","import styled, { keyframes } from 'styled-components';\nimport { baseStyle, edgeStyle, roundStyle } from '../../utils/styles';\nimport { backgroundStyle } from '../../utils/background';\nimport { defaultProps } from '../../default-props';\nfunction getTransformOriginStyle(align) {\n var vertical = 'top';\n if (align.bottom) {\n vertical = 'bottom';\n }\n var horizontal = 'left';\n if (align.right) {\n horizontal = 'right';\n }\n return vertical + \" \" + horizontal;\n}\nvar dropKeyFrames = keyframes([\"0%{opacity:0.5;transform:scale(0.8);}100%{opacity:1;transform:scale(1);}\"]);\n\n// The desired margin may be adjusted depending on drops alignment\nvar marginStyle = function marginStyle(theme, align, data, responsive, marginProp) {\n var margin = theme.global.edgeSize[data] || data;\n var adjustedMargin = {};\n // if user provides CSS string such as '50px 12px', apply that always\n var customCSS = typeof margin === 'string' && margin.split(' ').length > 1;\n if (theme.global.drop.intelligentMargin === true && !customCSS && typeof margin === 'string') {\n if (align.top === 'bottom') adjustedMargin.top = margin;else if (align.bottom === 'top') adjustedMargin.bottom = margin;\n if (align.right === 'left') adjustedMargin.left = \"-\" + margin;else if (align.left === 'right') adjustedMargin.left = margin;\n if (!Object.keys(adjustedMargin)) adjustedMargin = 'none';\n } else {\n return edgeStyle('margin', marginProp || theme.global.drop.margin, responsive, theme.global.edgeSize.responsiveBreakpoint, theme);\n }\n return edgeStyle('margin', adjustedMargin, responsive, theme.global.edgeSize.responsiveBreakpoint, theme);\n};\nvar StyledDrop = styled.div.withConfig({\n displayName: \"StyledDrop\",\n componentId: \"sc-16s5rx8-0\"\n})([\"\", \" \", \" position:fixed;z-index:\", \";outline:none;\", \" \", \" opacity:0;transform-origin:\", \";animation:\", \" 0.1s forwards;animation-delay:0.01s;@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){display:flex;align-items:stretch;}\", \"\"], baseStyle, function (props) {\n return !props.plain && (props.round && roundStyle(props.round, true, props.theme) || \"border-radius: \" + props.theme.global.drop.border.radius + \";\");\n}, function (props) {\n return props.theme.global.drop.zIndex;\n}, function (props) {\n return !props.plain && backgroundStyle(props.background || props.theme.global.drop.background, props.theme);\n}, function (props) {\n return !props.plain && (props.margin || props.theme.global.drop.margin) && props.theme.global && marginStyle(props.theme, props.alignProp, props.theme.global.drop.margin, props.responsive, props.margin);\n}, function (props) {\n return getTransformOriginStyle(props.alignProp);\n}, dropKeyFrames, function (props) {\n return props.theme.global.drop && props.theme.global.drop.extend;\n});\nStyledDrop.defaultProps = {};\nObject.setPrototypeOf(StyledDrop.defaultProps, defaultProps);\nexport { StyledDrop };","var _excluded = [\"a11yTitle\", \"aria-label\", \"align\", \"background\", \"onAlign\", \"children\", \"dropTarget\", \"elevation\", \"onClickOutside\", \"onEsc\", \"onKeyDown\", \"overflow\", \"plain\", \"responsive\", \"restrictFocus\", \"stretch\", \"trapFocus\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { ContainerTargetContext } from '../../contexts/ContainerTargetContext';\nimport { FocusedContainer } from '../FocusedContainer';\nimport { backgroundIsDark, findScrollParents, parseMetricToNum, PortalContext, useForwardedRef } from '../../utils';\nimport { defaultProps } from '../../default-props';\nimport { Box } from '../Box';\nimport { Keyboard } from '../Keyboard';\nimport { StyledDrop } from './StyledDrop';\nimport { OptionsContext } from '../../contexts/OptionsContext';\n\n// using react synthetic event to be able to stop propagation that\n// would otherwise close the layer on ESC.\nvar preventLayerClose = function preventLayerClose(event) {\n var key = event.keyCode ? event.keyCode : event.which;\n if (key === 27) {\n event.stopPropagation();\n }\n};\n\n// Gets the closest ancestor positioned element\nvar getParentNode = function getParentNode(element) {\n var _element$offsetParent;\n return (_element$offsetParent = element.offsetParent) != null ? _element$offsetParent : element.parentNode;\n};\n\n// return the containing block\nvar getContainingBlock = function getContainingBlock(element) {\n var currentNode = getParentNode(element);\n while (currentNode instanceof window.HTMLElement && !['html', 'body'].includes(currentNode.nodeName.toLowerCase())) {\n var _currentNode;\n var css = window.getComputedStyle(currentNode);\n // This is non-exhaustive but covers the most common CSS properties that\n // create a containing block.\n // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n if ((css.transform ? css.transform !== 'none' : false) || (css.perspective ? css.perspective !== 'none' : false) || (css.backdropFilter ? css.backdropFilter !== 'none' : false) || css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || css.willChange === 'filter' || (css.filter ? css.filter !== 'none' : false)) {\n return currentNode;\n }\n currentNode = (_currentNode = currentNode) == null ? void 0 : _currentNode.parentNode;\n }\n return null;\n};\nvar defaultAlign = {\n top: 'top',\n left: 'left'\n};\nvar DropContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var a11yTitle = _ref.a11yTitle,\n ariaLabel = _ref['aria-label'],\n _ref$align = _ref.align,\n align = _ref$align === void 0 ? defaultAlign : _ref$align,\n background = _ref.background,\n onAlign = _ref.onAlign,\n children = _ref.children,\n dropTarget = _ref.dropTarget,\n elevation = _ref.elevation,\n onClickOutside = _ref.onClickOutside,\n onEsc = _ref.onEsc,\n onKeyDown = _ref.onKeyDown,\n _ref$overflow = _ref.overflow,\n overflow = _ref$overflow === void 0 ? 'auto' : _ref$overflow,\n plain = _ref.plain,\n _ref$responsive = _ref.responsive,\n responsive = _ref$responsive === void 0 ? true : _ref$responsive,\n restrictFocus = _ref.restrictFocus,\n _ref$stretch = _ref.stretch,\n stretch = _ref$stretch === void 0 ? 'width' : _ref$stretch,\n trapFocus = _ref.trapFocus,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n var containerTarget = useContext(ContainerTargetContext);\n var theme = useContext(ThemeContext) || defaultProps.theme;\n // dropOptions was created to preserve backwards compatibility\n var _useContext = useContext(OptionsContext),\n dropOptions = _useContext.drop;\n var portalContext = useContext(PortalContext);\n var portalId = useMemo(function () {\n return portalContext.length;\n }, [portalContext]);\n var nextPortalContext = useMemo(function () {\n return [].concat(portalContext, [portalId]);\n }, [portalContext, portalId]);\n var dropRef = useForwardedRef(ref);\n useEffect(function () {\n var onClickDocument = function onClickDocument(event) {\n // determine which portal id the target is in, if any\n var clickedPortalId = null;\n var node = event.composed && event.composedPath()[0] || event.target;\n while (clickedPortalId === null && node && node !== document && !(node instanceof ShadowRoot)) {\n var attr = node.getAttribute('data-g-portal-id');\n if (attr !== null) clickedPortalId = parseInt(attr, 10);\n node = node.parentNode;\n }\n if (clickedPortalId === null || portalContext.indexOf(clickedPortalId) !== -1) {\n onClickOutside(event);\n }\n };\n if (onClickOutside) {\n document.addEventListener('mousedown', onClickDocument);\n }\n return function () {\n if (onClickOutside) {\n document.removeEventListener('mousedown', onClickDocument);\n }\n };\n }, [onClickOutside, containerTarget, portalContext]);\n useEffect(function () {\n var target = (dropTarget == null ? void 0 : dropTarget.current) || dropTarget;\n var notifyAlign = function notifyAlign() {\n var _dropRef$current;\n var styleCurrent = dropRef == null || (_dropRef$current = dropRef.current) == null ? void 0 : _dropRef$current.style;\n var alignControl = (styleCurrent == null ? void 0 : styleCurrent.top) !== '' ? 'top' : 'bottom';\n onAlign(alignControl);\n };\n\n // We try to preserve the maxHeight as changing it causes any scroll\n // position to be lost. We set the maxHeight on mount and if the window\n // is resized.\n var place = function place(preserveHeight) {\n var windowWidth = window.innerWidth;\n var windowHeight = window.innerHeight;\n var container = dropRef.current;\n if (container && target) {\n var _containingBlockRect$, _containingBlockRect, _containingBlockRect$2, _containingBlockRect2, _containingBlockRect$3, _containingBlockRect3, _containingBlock$scro, _containingBlock2, _containingBlock$scro2, _containingBlock3;\n // clear prior styling\n container.style.left = '';\n container.style.top = '';\n container.style.bottom = '';\n container.style.width = '';\n if (!preserveHeight) {\n container.style.maxHeight = '';\n }\n // get bounds\n var targetRect = target.getBoundingClientRect();\n var containerRect = container.getBoundingClientRect();\n // determine width\n var width;\n if (stretch) {\n width = Math.min(stretch === 'align' ? Math.min(targetRect.width, containerRect.width) : Math.max(targetRect.width, containerRect.width), windowWidth);\n } else {\n width = Math.min(containerRect.width, windowWidth);\n }\n // set left position\n var left;\n if (align.left) {\n if (align.left === 'left') {\n left = targetRect.left;\n } else if (align.left === 'right') {\n left = targetRect.left + targetRect.width;\n }\n } else if (align.right) {\n if (align.right === 'left') {\n left = targetRect.left - width;\n } else if (align.right === 'right') {\n left = targetRect.left + targetRect.width - width;\n }\n } else {\n left = targetRect.left + targetRect.width / 2 - width / 2;\n }\n if (left + width > windowWidth) {\n left -= left + width - windowWidth;\n } else if (left < 0) {\n left = 0;\n }\n // set top or bottom position\n var top;\n var bottom;\n var maxHeight = containerRect.height;\n\n /* If responsive is true and the Drop doesn't have enough room\n to be fully visible and there is more room in the other\n direction, change the Drop to display above/below. If there is\n less room in the other direction leave the Drop in its current\n position. */\n if (responsive && (align.top === 'top' && targetRect.top < 0 || align.bottom === 'top' && targetRect.top - containerRect.height <= 0 && targetRect.bottom + containerRect.height < windowHeight)) {\n top = targetRect.bottom;\n maxHeight = top;\n } else if (responsive && (align.bottom === 'bottom' && targetRect.bottom > windowHeight || align.top === 'bottom' && targetRect.bottom + containerRect.height >= windowHeight && targetRect.top - containerRect.height > 0)) {\n bottom = targetRect.top;\n maxHeight = bottom;\n } else if (align.top === 'top') {\n top = targetRect.top;\n maxHeight = windowHeight - top;\n } else if (align.top === 'bottom') {\n top = targetRect.bottom;\n maxHeight = windowHeight - top;\n } else if (align.bottom === 'top') {\n bottom = targetRect.top;\n maxHeight = bottom;\n } else if (align.bottom === 'bottom') {\n bottom = targetRect.bottom;\n maxHeight = bottom;\n } else {\n top = targetRect.top + targetRect.height / 2 - containerRect.height / 2;\n }\n var containingBlock;\n var containingBlockRect;\n // dropOptions was created to preserve backwards compatibility\n if (dropOptions != null && dropOptions.checkContainingBlock) {\n var _containingBlock;\n // return the containing block for absolute elements or `null`\n // for fixed elements\n containingBlock = getContainingBlock(container);\n containingBlockRect = (_containingBlock = containingBlock) == null ? void 0 : _containingBlock.getBoundingClientRect();\n }\n\n // compute viewport offsets\n var viewportOffsetLeft = (_containingBlockRect$ = (_containingBlockRect = containingBlockRect) == null ? void 0 : _containingBlockRect.left) != null ? _containingBlockRect$ : 0;\n var viewportOffsetTop = (_containingBlockRect$2 = (_containingBlockRect2 = containingBlockRect) == null ? void 0 : _containingBlockRect2.top) != null ? _containingBlockRect$2 : 0;\n var viewportOffsetBottom = (_containingBlockRect$3 = (_containingBlockRect3 = containingBlockRect) == null ? void 0 : _containingBlockRect3.bottom) != null ? _containingBlockRect$3 : windowHeight;\n var containerOffsetLeft = (_containingBlock$scro = (_containingBlock2 = containingBlock) == null ? void 0 : _containingBlock2.scrollLeft) != null ? _containingBlock$scro : 0;\n var containerOffsetTop = (_containingBlock$scro2 = (_containingBlock3 = containingBlock) == null ? void 0 : _containingBlock3.scrollTop) != null ? _containingBlock$scro2 : 0;\n container.style.left = left - viewportOffsetLeft + containerOffsetLeft + \"px\";\n if (stretch) {\n // offset width by 0.1 to avoid a bug in ie11 that\n // unnecessarily wraps the text if width is the same\n // NOTE: turned off for now\n container.style.width = width + 0.1 + \"px\";\n }\n // the (position:absolute + scrollTop)\n // is presenting issues with desktop scroll flickering\n if (top !== '') {\n container.style.top = top - viewportOffsetTop + containerOffsetTop + \"px\";\n }\n if (bottom !== '') {\n container.style.bottom = viewportOffsetBottom - bottom - containerOffsetTop + \"px\";\n }\n if (!preserveHeight) {\n if (theme.drop && theme.drop.maxHeight) {\n maxHeight = Math.min(maxHeight, parseMetricToNum(theme.drop.maxHeight));\n }\n container.style.maxHeight = maxHeight + \"px\";\n }\n }\n if (onAlign) notifyAlign();\n };\n var scrollParents;\n var addScrollListeners = function addScrollListeners() {\n scrollParents = findScrollParents(target);\n scrollParents.forEach(function (scrollParent) {\n return scrollParent.addEventListener('scroll', place);\n });\n };\n var removeScrollListeners = function removeScrollListeners() {\n scrollParents.forEach(function (scrollParent) {\n return scrollParent.removeEventListener('scroll', place);\n });\n scrollParents = [];\n };\n var onResize = function onResize() {\n removeScrollListeners();\n addScrollListeners();\n place(false);\n };\n addScrollListeners();\n window.addEventListener('resize', onResize);\n place(false);\n return function () {\n removeScrollListeners();\n window.removeEventListener('resize', onResize);\n };\n }, [align, containerTarget, onAlign, dropTarget, portalContext, portalId, responsive, restrictFocus, stretch, theme.drop, dropRef, dropOptions]);\n useEffect(function () {\n if (restrictFocus) {\n dropRef.current.focus();\n }\n }, [dropRef, restrictFocus]);\n var content = /*#__PURE__*/React.createElement(StyledDrop, _extends({\n \"aria-label\": a11yTitle || ariaLabel,\n ref: dropRef,\n as: Box,\n background: background,\n plain: plain,\n elevation: !plain ? elevation || theme.global.drop.elevation || theme.global.drop.shadowSize ||\n // backward compatibility\n 'small' : undefined,\n tabIndex: \"-1\",\n alignProp: align,\n overflow: overflow,\n \"data-g-portal-id\": portalId\n }, rest), children);\n var themeContextValue = useMemo(function () {\n var dark;\n if (background || theme.global.drop.background) {\n dark = backgroundIsDark(background || theme.global.drop.background, theme);\n }\n return _extends({}, theme, {\n dark: dark\n });\n }, [background, theme]);\n var dark = themeContextValue.dark;\n if (dark !== undefined && dark !== theme.dark) {\n content = /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: themeContextValue\n }, content);\n }\n return /*#__PURE__*/React.createElement(PortalContext.Provider, {\n value: nextPortalContext\n }, /*#__PURE__*/React.createElement(FocusedContainer, {\n onKeyDown: onEsc && preventLayerClose,\n trapFocus: trapFocus\n }, /*#__PURE__*/React.createElement(Keyboard\n // should capture keyboard event before other elements,\n // such as Layer\n // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\n , {\n capture: true,\n onEsc: onEsc ? function (event) {\n event.stopPropagation();\n onEsc(event);\n } : undefined,\n onKeyDown: onKeyDown,\n target: \"document\"\n }, content)));\n});\nexport { DropContainer };","import PropTypes from 'prop-types';\nexport var a11yTitlePropType = PropTypes.string;\nexport var alignPropType = PropTypes.oneOfType([PropTypes.oneOf(['baseline', 'center', 'end', 'start', 'stretch']), PropTypes.string]);\nvar ANIMATION_TYPE = PropTypes.oneOf(['fadeIn', 'fadeOut', 'jiggle', 'pulse', 'rotateLeft', 'rotateRight', 'slideUp', 'slideDown', 'slideLeft', 'slideRight', 'zoomIn', 'zoomOut']);\nvar ANIMATION_SHAPE = PropTypes.shape({\n type: ANIMATION_TYPE,\n delay: PropTypes.number,\n duration: PropTypes.number,\n size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge'])\n});\nexport var animationPropType = PropTypes.oneOfType([ANIMATION_TYPE, ANIMATION_SHAPE, PropTypes.arrayOf(PropTypes.oneOfType([ANIMATION_TYPE, ANIMATION_SHAPE]))]);\nexport var colorPropType = PropTypes.oneOfType([PropTypes.string, PropTypes.shape({\n dark: PropTypes.string,\n light: PropTypes.string\n})]);\nexport var backgroundPropType = PropTypes.oneOfType([PropTypes.string, PropTypes.shape({\n clip: PropTypes.oneOfType([PropTypes.oneOf(['text']), PropTypes.string]),\n color: colorPropType,\n dark: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n image: PropTypes.string,\n position: PropTypes.string,\n opacity: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.oneOf(['weak', 'medium', 'strong'])]),\n repeat: PropTypes.oneOfType([PropTypes.oneOf(['no-repeat', 'repeat']), PropTypes.string]),\n rotate: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n size: PropTypes.oneOfType([PropTypes.oneOf(['cover', 'contain']), PropTypes.string]),\n light: PropTypes.string\n})]);\nexport var backgroundDoc = backgroundPropType;\nexport var MARGIN_SIZES = ['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge'];\nexport var marginProp = PropTypes.oneOfType([PropTypes.oneOf(['none'].concat(MARGIN_SIZES)), PropTypes.shape({\n bottom: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n end: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n horizontal: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n left: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n right: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n start: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n top: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n vertical: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string])\n}), PropTypes.string]);\nvar PAD_SIZES = ['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge'];\nexport var padPropType = PropTypes.oneOfType([PropTypes.oneOf(['none'].concat(PAD_SIZES)), PropTypes.shape({\n bottom: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),\n end: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),\n horizontal: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),\n left: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),\n right: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),\n start: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),\n top: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string]),\n vertical: PropTypes.oneOfType([PropTypes.oneOf(PAD_SIZES), PropTypes.string])\n}), PropTypes.string]);\nexport var genericProps = {\n a11yTitle: a11yTitlePropType,\n alignSelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch', 'baseline']),\n gridArea: PropTypes.string,\n margin: marginProp\n};\nexport var elevationPropType = PropTypes.oneOfType([PropTypes.oneOf(['none', 'xsmall', 'small', 'medium', 'large', 'xlarge']), PropTypes.string]);\nexport var hoverIndicatorPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.oneOf(['background']), backgroundPropType, PropTypes.shape({\n background: backgroundPropType,\n elevation: elevationPropType\n})]);\nexport var pointPropType = PropTypes.oneOf(['circle', 'diamond', 'square', 'star', 'triangle', 'triangleDown']);\nexport var patternPropType = PropTypes.oneOf(['squares', 'circles', 'stripesHorizontal', 'stripesVertical', 'stripesDiagonalDown', 'stripesDiagonalUp']);\nexport var roundPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge', 'full']), PropTypes.string, PropTypes.shape({\n corner: PropTypes.oneOf(['top', 'left', 'bottom', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right']),\n size: PropTypes.oneOfType([PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']), PropTypes.string])\n})]);\nexport var skeletonColorsPropType = PropTypes.shape({\n dark: PropTypes.arrayOf(PropTypes.string),\n light: PropTypes.arrayOf(PropTypes.string)\n});\nexport var skeletonPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({\n animation: animationPropType,\n colors: skeletonColorsPropType,\n depth: PropTypes.number,\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({\n start: PropTypes.string,\n end: PropTypes.string\n })])\n})]);\nvar dimSizeType = PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge']);\nexport var heightPropType = PropTypes.oneOfType([dimSizeType, PropTypes.string, PropTypes.shape({\n height: PropTypes.oneOfType([dimSizeType, PropTypes.string]),\n min: PropTypes.oneOfType([dimSizeType, PropTypes.string]),\n max: PropTypes.oneOfType([dimSizeType, PropTypes.string])\n})]);\nexport var widthPropType = PropTypes.oneOfType([dimSizeType, PropTypes.string, PropTypes.shape({\n width: PropTypes.oneOfType([dimSizeType, PropTypes.string]),\n min: PropTypes.oneOfType([dimSizeType, PropTypes.string]),\n max: PropTypes.oneOfType([dimSizeType, PropTypes.string])\n})]);\nexport var OVERFLOW_VALUES = ['auto', 'hidden', 'scroll', 'visible'];","import PropTypes from 'prop-types';\nimport { backgroundDoc, roundPropType, marginProp, OVERFLOW_VALUES } from '../../utils/general-prop-types';\n\n// if you update values here, make sure to update in Box too.\nvar dropOverflowPropTypes = PropTypes.oneOfType([PropTypes.oneOf(OVERFLOW_VALUES), PropTypes.shape({\n horizontal: PropTypes.oneOf(OVERFLOW_VALUES),\n vertical: PropTypes.oneOf(OVERFLOW_VALUES)\n}), PropTypes.string]);\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = {\n align: PropTypes.shape({\n top: PropTypes.oneOf(['top', 'bottom']),\n bottom: PropTypes.oneOf(['top', 'bottom']),\n right: PropTypes.oneOf(['left', 'right']),\n left: PropTypes.oneOf(['left', 'right'])\n }),\n background: backgroundDoc,\n elevation: PropTypes.oneOfType([PropTypes.oneOf(['none', 'xsmall', 'small', 'medium', 'large', 'xlarge']), PropTypes.string]),\n inline: PropTypes.bool,\n margin: marginProp,\n onClickOutside: PropTypes.func,\n onEsc: PropTypes.func,\n overflow: dropOverflowPropTypes,\n plain: PropTypes.bool,\n responsive: PropTypes.bool,\n restrictFocus: PropTypes.bool,\n round: roundPropType,\n stretch: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['align'])]),\n target: PropTypes.object.isRequired,\n trapFocus: PropTypes.bool\n };\n}\nexport var DropPropTypes = PropType;","var _excluded = [\"inline\", \"restrictFocus\", \"target\", \"trapFocus\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { forwardRef, useEffect, useState, useContext, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeContext } from 'styled-components';\nimport { defaultProps } from '../../default-props';\nimport { getNewContainer, setFocusWithoutScroll } from '../../utils';\nimport { DropContainer } from './DropContainer';\nimport { ContainerTargetContext } from '../../contexts/ContainerTargetContext';\nimport { DropPropTypes } from './propTypes';\nvar Drop = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var inline = _ref.inline,\n restrictFocus = _ref.restrictFocus,\n dropTarget = _ref.target,\n _ref$trapFocus = _ref.trapFocus,\n trapFocus = _ref$trapFocus === void 0 ? true : _ref$trapFocus,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n var theme = useContext(ThemeContext) || defaultProps.theme;\n var _useState = useState(),\n originalFocusedElement = _useState[0],\n setOriginalFocusedElement = _useState[1];\n useEffect(function () {\n return setOriginalFocusedElement(document.activeElement);\n }, []);\n var _useState2 = useState(),\n dropContainer = _useState2[0],\n setDropContainer = _useState2[1];\n var containerTarget = useContext(ContainerTargetContext);\n var containerChildNodesLength = useRef(null);\n useEffect(function () {\n // we need this condition to prevent getNewContainer to run multiple times\n // in the event that the component gets created, destroyed, and recreated.\n // see https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state\n if (!(containerChildNodesLength != null && containerChildNodesLength.current)) {\n containerChildNodesLength.current = containerTarget.childNodes.length;\n setDropContainer(!inline ? getNewContainer(containerTarget) : undefined);\n }\n }, [containerTarget, inline]);\n\n // just a few things to clean up when the Drop is unmounted\n useEffect(function () {\n return function () {\n if (restrictFocus && originalFocusedElement) {\n if (originalFocusedElement.focus) {\n setFocusWithoutScroll(originalFocusedElement);\n } else if (originalFocusedElement.parentNode && originalFocusedElement.parentNode.focus) {\n // required for IE11 and Edge\n setFocusWithoutScroll(originalFocusedElement.parentNode);\n }\n }\n if (dropContainer) {\n containerTarget.removeChild(dropContainer);\n }\n };\n }, [containerTarget, dropContainer, originalFocusedElement, restrictFocus]);\n var content = /*#__PURE__*/React.createElement(DropContainer, _extends({\n ref: ref,\n dir: theme && theme.dir,\n dropTarget: dropTarget,\n restrictFocus: restrictFocus,\n trapFocus: trapFocus\n }, rest));\n if (inline) return content;\n if (dropContainer) return /*#__PURE__*/createPortal(content, dropContainer);\n return null;\n});\nDrop.displayName = 'Drop';\nDrop.propTypes = DropPropTypes;\nexport { Drop };","import { useEffect, useState } from 'react';\nexport var useKeyboard = function useKeyboard() {\n var _useState = useState(),\n usingKeyboard = _useState[0],\n setUsingKeyboard = _useState[1];\n useEffect(function () {\n var onMouseDown = function onMouseDown() {\n return setUsingKeyboard(false);\n };\n var onKeyDown = function onKeyDown() {\n return setUsingKeyboard(true);\n };\n document.addEventListener('mousedown', onMouseDown);\n document.addEventListener('keydown', onKeyDown);\n return function () {\n document.removeEventListener('mousedown', onMouseDown);\n document.removeEventListener('keydown', onKeyDown);\n };\n }, []);\n return usingKeyboard;\n};\nexport default useKeyboard;","import PropTypes from 'prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = {\n content: PropTypes.node,\n dropProps: PropTypes.object,\n plain: PropTypes.bool\n };\n}\nexport var TipPropTypes = PropType;","function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport React, { Children, cloneElement, forwardRef, useContext, useState } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { Box } from '../Box';\nimport { Drop } from '../Drop';\nimport { useForwardedRef, useKeyboard } from '../../utils';\nimport { TipPropTypes } from './propTypes';\nvar Tip = /*#__PURE__*/forwardRef(function (_ref, tipRef) {\n var children = _ref.children,\n content = _ref.content,\n dropProps = _ref.dropProps,\n plain = _ref.plain;\n var theme = useContext(ThemeContext);\n var _useState = useState(false),\n over = _useState[0],\n setOver = _useState[1];\n var _useState2 = useState(false),\n tooltipOver = _useState2[0],\n setTooltipOver = _useState2[1];\n var usingKeyboard = useKeyboard();\n var componentRef = useForwardedRef(tipRef);\n\n // Three use case for children\n // 1. Tip has a single child + it is a React Element => Great!\n // 2. Tip has a single child + not React Element =>\n // span will wrap the child so we can use ref and events.\n // 3. Tip has more than one child => Abort, display Children.only error\n var child = Children.count(children) <= 1 && ! /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.createElement(\"span\", null, children) || Children.only(children);\n var clonedChild = /*#__PURE__*/cloneElement(child, {\n onMouseEnter: function onMouseEnter(event) {\n var _child$props;\n setOver(true);\n if ((_child$props = child.props) != null && _child$props.onMouseEnter) child.props.onMouseEnter(event);\n },\n onMouseLeave: function onMouseLeave(event) {\n var _child$props2;\n setOver(false);\n if ((_child$props2 = child.props) != null && _child$props2.onMouseLeave) child.props.onMouseLeave(event);\n },\n onFocus: function onFocus(event) {\n var _child$props3;\n if (usingKeyboard) setOver(true);\n if ((_child$props3 = child.props) != null && _child$props3.onFocus) child.props.onFocus(event);\n },\n onBlur: function onBlur(event) {\n var _child$props4;\n if (usingKeyboard) setOver(false);\n if ((_child$props4 = child.props) != null && _child$props4.onBlur) child.props.onBlur(event);\n },\n key: 'tip-child',\n ref: function ref(node) {\n // https://github.com/facebook/react/issues/8873#issuecomment-287873307\n if (typeof componentRef === 'function') {\n componentRef(node);\n } else if (componentRef) {\n // eslint-disable-next-line no-param-reassign\n componentRef.current = node;\n }\n // Call the original ref, if any\n var callerRef = child.ref;\n if (typeof callerRef === 'function') {\n callerRef(node);\n } else if (callerRef) {\n callerRef.current = node;\n }\n }\n });\n return [clonedChild, (over || tooltipOver) && /*#__PURE__*/React.createElement(Drop, _extends({\n target: componentRef.current,\n trapFocus: false,\n key: \"tip-drop\"\n }, theme.tip.drop, dropProps, {\n onMouseEnter: function onMouseEnter() {\n return setTooltipOver(true);\n },\n onMouseLeave: function onMouseLeave() {\n return setTooltipOver(false);\n }\n }), plain ? content : /*#__PURE__*/React.createElement(Box, theme.tip.content, content))];\n});\nTip.displayName = 'Tip';\nTip.propTypes = TipPropTypes;\nexport { Tip };","function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport PropTypes from 'prop-types';\nimport { colorPropType, genericProps, MARGIN_SIZES, skeletonPropType } from '../../utils/general-prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = _extends({}, genericProps, {\n color: colorPropType,\n margin: PropTypes.oneOfType([PropTypes.oneOf(['none'].concat(MARGIN_SIZES)), PropTypes.shape({\n bottom: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n end: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n horizontal: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n left: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n right: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n start: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n top: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string]),\n vertical: PropTypes.oneOfType([PropTypes.oneOf(MARGIN_SIZES), PropTypes.string])\n }), PropTypes.string]),\n size: PropTypes.oneOfType([PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', '2xl', '3xl', '4xl', '5xl', '6xl']), PropTypes.string]),\n skeleton: skeletonPropType,\n tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),\n textAlign: PropTypes.oneOf(['start', 'center', 'end', 'justify']),\n tip: PropTypes.oneOfType([PropTypes.shape({\n content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n dropProps: PropTypes.shape({}),\n plain: PropTypes.bool\n }), PropTypes.string]),\n truncate: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['tip'])]),\n weight: PropTypes.oneOfType([PropTypes.oneOf(['normal', 'bold', 'bolder', 'lighter']), PropTypes.number]),\n wordBreak: PropTypes.oneOf(['normal', 'break-all', 'keep-all', 'break-word'])\n });\n}\nexport var TextPropTypes = PropType;","function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport PropTypes from 'prop-types';\nimport { genericProps, heightPropType, padPropType, roundPropType, skeletonColorsPropType, widthPropType } from '../../utils/general-prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = _extends({}, genericProps, {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),\n colors: skeletonColorsPropType,\n height: heightPropType,\n pad: padPropType,\n round: roundPropType,\n width: widthPropType\n });\n}\nexport var SkeletonPropTypes = PropType;","import styled from 'styled-components';\nimport { backgroundStyle, edgeStyle, genericStyles, heightStyle, roundStyle, widthStyle } from '../../utils';\n\n// Styling a div directly rather than just using\n// a Box since Box itself will react to a SkeletonContext\n// and we don't want that here.\nexport var StyledSkeleton = styled.div.withConfig({\n displayName: \"StyledSkeleton\",\n componentId: \"sc-1omqm6u-0\"\n})([\"display:flex;box-sizing:border-box;\", \" \", \" \", \" \", \" \", \" \", \" \", \"\"], genericStyles, function (props) {\n return props.background && backgroundStyle(props.background, props.theme);\n}, function (props) {\n var _props$theme$text;\n return heightStyle(props.heightProp || ((_props$theme$text = props.theme.text) == null || (_props$theme$text = _props$theme$text.medium) == null ? void 0 : _props$theme$text.height), props.theme);\n}, function (props) {\n return widthStyle(props.widthProp || '100%', props.theme);\n}, function (props) {\n return props.pad && edgeStyle('padding', props.pad, props.responsive, props.theme.box.responsiveBreakpoint, props.theme);\n}, function (props) {\n return props.round && roundStyle(props.round, true, props.theme);\n}, function (props) {\n var _props$theme;\n return (_props$theme = props.theme) == null || (_props$theme = _props$theme.skeleton) == null ? void 0 : _props$theme.extend;\n});","var _excluded = [\"as\", \"colors\", \"width\", \"height\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { forwardRef, useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { defaultProps } from '../../default-props';\nimport { SkeletonPropTypes } from './propTypes';\nimport { useSkeleton } from './SkeletonContext';\nimport { StyledSkeleton } from './StyledSkeleton';\nvar Skeleton = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var _theme$skeleton;\n var as = _ref.as,\n colorsProp = _ref.colors,\n widthProp = _ref.width,\n heightProp = _ref.height,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n var theme = useContext(ThemeContext) || defaultProps.theme;\n var skeleton = useSkeleton();\n var depth = (skeleton == null ? void 0 : skeleton.depth) || 0;\n var colors = colorsProp || (theme == null || (_theme$skeleton = theme.skeleton) == null ? void 0 : _theme$skeleton.colors);\n var themeColors = colors[theme.dark ? 'dark' : 'light'];\n var background = themeColors[(depth + 1) % themeColors.length];\n return /*#__PURE__*/React.createElement(StyledSkeleton, _extends({\n ref: ref,\n as: as,\n background: background,\n widthProp: widthProp,\n heightProp: heightProp\n }, rest));\n});\nSkeleton.displayName = 'Skeleton';\nSkeleton.propTypes = SkeletonPropTypes;\nexport { Skeleton };","var _excluded = [\"as\", \"size\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { forwardRef, useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { defaultProps } from '../../default-props';\nimport { Skeleton } from '../Skeleton';\nvar TextSkeleton = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var as = _ref.as,\n sizeProp = _ref.size,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n var theme = useContext(ThemeContext) || defaultProps.theme;\n var size = sizeProp || 'medium';\n var data = theme.text[size];\n var height = data ? data.size : sizeProp;\n return /*#__PURE__*/React.createElement(Skeleton, _extends({\n ref: ref,\n as: as,\n height: height\n }, theme.text.skeleton, rest));\n});\nTextSkeleton.displayName = 'TextSkeleton';\nexport { TextSkeleton };","import React from 'react';\nexport var TextContext = /*#__PURE__*/React.createContext({});","var _excluded = [\"children\", \"color\", \"tag\", \"as\", \"tip\", \"a11yTitle\", \"truncate\", \"size\", \"skeleton\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { forwardRef, useMemo, useState } from 'react';\nimport { useLayoutEffect } from '../../utils/use-isomorphic-layout-effect';\nimport { StyledText } from './StyledText';\nimport { Tip } from '../Tip';\nimport { useForwardedRef } from '../../utils';\nimport { TextPropTypes } from './propTypes';\nimport { useSkeleton } from '../Skeleton';\nimport { TextSkeleton } from './TextSkeleton';\nimport { TextContext } from './TextContext';\nvar Text = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var children = _ref.children,\n color = _ref.color,\n tag = _ref.tag,\n as = _ref.as,\n tipProp = _ref.tip,\n _ref$a11yTitle = _ref.a11yTitle,\n a11yTitle = _ref$a11yTitle === void 0 ? typeof tipProp === 'string' && tipProp || (tipProp == null ? void 0 : tipProp.content) || undefined : _ref$a11yTitle,\n truncate = _ref.truncate,\n size = _ref.size,\n skeletonProp = _ref.skeleton,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n var textRef = useForwardedRef(ref);\n var _useState = useState(false),\n textTruncated = _useState[0],\n setTextTruncated = _useState[1];\n var textContextValue = useMemo(function () {\n return {\n size: size\n };\n }, [size]);\n var skeleton = useSkeleton();\n useLayoutEffect(function () {\n var updateTip = function updateTip() {\n setTextTruncated(false);\n if (truncate === 'tip' && textRef.current && textRef.current.scrollWidth > textRef.current.offsetWidth) {\n setTextTruncated(true);\n }\n };\n window.addEventListener('resize', updateTip);\n window.addEventListener('pagechange', updateTip);\n updateTip();\n return function () {\n window.removeEventListener('resize', updateTip);\n window.removeEventListener('pagechange', updateTip);\n };\n }, [textRef, truncate]);\n if (skeleton) {\n return /*#__PURE__*/React.createElement(TextSkeleton, _extends({\n ref: ref,\n as: as,\n size: size\n }, skeletonProp, rest));\n }\n var styledTextResult = /*#__PURE__*/React.createElement(StyledText, _extends({\n as: !as && tag ? tag : as,\n colorProp: color,\n \"aria-label\": a11yTitle,\n truncate: truncate,\n size: size\n }, rest, {\n ref: textRef\n }), children !== undefined ? /*#__PURE__*/React.createElement(TextContext.Provider, {\n value: textContextValue\n }, children) : undefined);\n if (tipProp || textTruncated) {\n // place the text content in a tip if truncate === 'tip'\n // and the text has been truncated\n if (textTruncated) {\n return /*#__PURE__*/React.createElement(Tip, _extends({\n content: children\n }, tipProp), styledTextResult);\n }\n // place the text content in a tip if truncate !== 'tip'\n // it displays even if the text has not truncated\n if (truncate !== 'tip') {\n return /*#__PURE__*/React.createElement(Tip, tipProp, styledTextResult);\n }\n }\n return styledTextResult;\n});\nText.displayName = 'Text';\nText.defaultProps = {\n level: 1\n};\nText.propTypes = TextPropTypes;\nexport { Text };","import styled, { css } from 'styled-components';\nimport { genericStyles, normalizeColor, textAlignStyle } from '../../utils';\nimport { defaultProps } from '../../default-props';\nvar colorStyle = css([\"color:\", \";\"], function (props) {\n return normalizeColor(props.colorProp, props.theme);\n});\nvar sizeStyle = function sizeStyle(props) {\n var size = props.size || 'medium';\n var data = props.theme.paragraph[size];\n return css([\"font-size:\", \";line-height:\", \";max-width:\", \";\"], data ? data.size : size, data ? data.height : 'normal', props.fillProp ? 'none' : data && data.maxWidth);\n};\nvar fontFamily = css([\"font-family:\", \";\"], function (props) {\n return props.theme.paragraph.font.family;\n});\nvar maxlinesStyle = function maxlinesStyle(props) {\n return props.maxLines && css([\"display:-webkit-box;-webkit-line-clamp:\", \";-webkit-box-orient:vertical;overflow:hidden;\"], props.maxLines);\n};\nvar StyledParagraph = styled.p.withConfig({\n displayName: \"StyledParagraph\",\n componentId: \"sc-tbetod-0\"\n})([\"\", \" \", \" \", \" \", \" \", \" \", \" \", \"\"], genericStyles, function (props) {\n return maxlinesStyle(props);\n}, function (props) {\n return sizeStyle(props);\n}, function (props) {\n return props.textAlign && textAlignStyle;\n}, function (props) {\n return props.colorProp && colorStyle;\n}, function (props) {\n return props.theme.paragraph.font && props.theme.paragraph.font.family && fontFamily;\n}, function (props) {\n return props.theme.paragraph && props.theme.paragraph.extend;\n});\nStyledParagraph.defaultProps = {};\nObject.setPrototypeOf(StyledParagraph.defaultProps, defaultProps);\nexport { StyledParagraph };","function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport PropTypes from 'prop-types';\nimport { colorPropType, genericProps } from '../../utils/general-prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = _extends({}, genericProps, {\n color: colorPropType,\n fill: PropTypes.bool,\n maxLines: PropTypes.number,\n responsive: PropTypes.bool,\n size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'medium', 'large', 'xlarge', 'xxlarge']), PropTypes.string]),\n textAlign: PropTypes.oneOf(['start', 'center', 'end', 'justify'])\n });\n}\nexport var ParagraphPropTypes = PropType;","import React, { forwardRef, useContext } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { defaultProps } from '../../default-props';\nimport { Skeleton } from '../Skeleton';\nimport { Box } from '../Box';\nvar ParagraphSkeleton = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var fill = _ref.fill,\n sizeProp = _ref.size;\n var theme = useContext(ThemeContext) || defaultProps.theme;\n var size = sizeProp || 'medium';\n var data = theme.paragraph[size];\n var height = data ? data.size : size;\n return /*#__PURE__*/React.createElement(Box, {\n ref: ref,\n gap: \"xsmall\",\n width: {\n max: fill ? 'none' : data && data.maxWidth\n }\n }, /*#__PURE__*/React.createElement(Skeleton, {\n height: height\n }), /*#__PURE__*/React.createElement(Skeleton, {\n height: height\n }), /*#__PURE__*/React.createElement(Skeleton, {\n height: height,\n width: \"30%\"\n }));\n});\nParagraphSkeleton.displayName = 'ParagraphSkeleton';\nexport { ParagraphSkeleton };","var _excluded = [\"children\", \"color\", \"fill\", \"size\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { forwardRef, useMemo } from 'react';\nimport { StyledParagraph } from './StyledParagraph';\nimport { ParagraphPropTypes } from './propTypes';\nimport { useSkeleton } from '../Skeleton';\nimport { ParagraphSkeleton } from './ParagraphSkeleton';\nimport { TextContext } from '../Text/TextContext';\nvar Paragraph = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var children = _ref.children,\n color = _ref.color,\n fill = _ref.fill,\n size = _ref.size,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n var skeleton = useSkeleton();\n var textContextValue = useMemo(function () {\n return {\n size: size\n };\n }, [size]);\n if (skeleton) {\n return /*#__PURE__*/React.createElement(ParagraphSkeleton, _extends({\n ref: ref,\n fill: fill,\n size: size\n }, rest), children);\n }\n return /*#__PURE__*/React.createElement(StyledParagraph, _extends({\n ref: ref,\n colorProp: color,\n fillProp: fill,\n size: size\n }, rest), children !== undefined ? /*#__PURE__*/React.createElement(TextContext.Provider, {\n value: textContextValue\n }, children) : undefined);\n});\nParagraph.displayName = 'Paragraph';\nParagraph.prototype = ParagraphPropTypes;\nexport { Paragraph };","import PropTypes from 'prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = {\n value: PropTypes.shape({})\n };\n}\nexport var ThemeContextPropTypes = PropType;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeContext } from 'styled-components';\nimport { deepMerge } from '../../utils';\nimport { ThemeContextPropTypes } from './propTypes';\nThemeContext.Extend = function (_ref) {\n var children = _ref.children,\n value = _ref.value;\n return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: deepMerge(theme, value)\n }, children);\n });\n};\nThemeContext.Extend.propTypes = {\n children: PropTypes.node.isRequired,\n value: PropTypes.shape({}).isRequired\n};\nThemeContext.propTypes = ThemeContextPropTypes;\nexport { ThemeContext };","import PropTypes from 'prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = {\n children: PropTypes.func\n };\n}\nexport var ResponsiveContextPropTypes = PropType;","import React from 'react';\nimport { ResponsiveContextPropTypes } from './propTypes';\nexport var ResponsiveContext = /*#__PURE__*/React.createContext(undefined);\nResponsiveContext.propTypes = ResponsiveContextPropTypes;","import styled, { css } from 'styled-components';\nimport { baseStyle } from '../../utils';\nimport { defaultProps } from '../../default-props';\nvar fullStyle = function fullStyle(full) {\n if (full === 'min') return css([\"min-height:100vh;\"]);\n return css([\"width:100vw;height:100vh;overflow:auto;\"]);\n};\nvar StyledGrommet = styled.div.withConfig({\n displayName: \"StyledGrommet\",\n componentId: \"sc-19lkkz7-0\"\n})([\"\", \" \", \" \", \" \", \" \", \"\"], function (props) {\n return !props.plain && baseStyle;\n}, function (props) {\n return props.full && fullStyle(props.full);\n}, function (props) {\n return props.theme.global.font.face;\n}, function (props) {\n return props.theme.grommet.extend;\n}, function (props) {\n return props.cssVars && Object.keys(props.theme.global.colors).filter(function (k) {\n return typeof props.theme.global.colors[k] === 'string';\n }).map(function (k) {\n return \"--\" + k + \": \" + props.theme.global.colors[k] + \";\";\n }).join('\\n');\n});\nStyledGrommet.defaultProps = {};\nObject.setPrototypeOf(StyledGrommet.defaultProps, defaultProps);\nexport { StyledGrommet };","import React from 'react';\nimport defaultMessages from '../../languages/default.json';\n\n// options:\n// id: message id\n// messages: (optional) an object of message overrides\n// values: (optional) currently unused but in the future\n// will be an object with substitution values for\n// positional variables in the message text.\n// defaultMessage: (optional) default message to use if\n// the message isn't found elsewhere.\nvar _format = function format(options, messages) {\n var _options$id;\n // Message id's are hierarchical. For the component-specific\n // message objects passed as options.messages, just use the last\n // component in the id for backwards compatibility.\n //\n // For overall messages passed to grommet, use the hierarchical\n // id. For that messages object, the messages are in an object\n // hierarchy by component, similar to how the theme works.\n //\n // Applications that typically keep their messages in flat\n // objects with a single key string per message can override\n // this format function to get the grommet messages from\n // their bundles that way and don't need to pass the messages\n // themselves in this property, just the format function.\n var idParts = ((_options$id = options.id) == null ? void 0 : _options$id.split('.')) || [];\n // eslint-disable-next-line no-unsafe-optional-chaining\n var baseId = idParts[(idParts == null ? void 0 : idParts.length) - 1];\n var messageObj = messages;\n idParts.forEach(function (idPart) {\n if (typeof messageObj === 'object') {\n messageObj = messageObj[idPart];\n }\n });\n var message = (options.messages ? options.messages[baseId] : undefined) || messageObj || options.defaultMessage;\n var values = options.values;\n var newMessage = message;\n var tokens = message == null ? void 0 : message.match(/\\{(.+?)\\}/g);\n tokens == null || tokens.forEach(function (token) {\n var names = token.substr(1, token.length - 2);\n var value = values[names];\n newMessage = newMessage.replace(token, value);\n });\n return values ? newMessage : message;\n};\nexport { _format as format };\nvar defaultValue = {\n messages: defaultMessages,\n format: function format(options) {\n return _format(options, defaultMessages);\n }\n};\nexport var MessageContext = /*#__PURE__*/React.createContext(defaultValue);","import PropTypes from 'prop-types';\nimport { backgroundDoc } from '../../utils/general-prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = {\n background: backgroundDoc,\n dir: PropTypes.oneOf(['rtl']),\n full: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['min'])]),\n options: PropTypes.shape({\n layer: PropTypes.shape({\n singleId: PropTypes.bool\n }),\n drop: PropTypes.shape({\n checkContainingBlock: PropTypes.bool\n })\n }),\n plain: PropTypes.bool,\n cssVars: PropTypes.bool,\n theme: PropTypes.object,\n themeMode: PropTypes.oneOf(['dark', 'light', 'auto']),\n userAgent: PropTypes.string,\n containerTarget: PropTypes.object,\n messages: PropTypes.shape({\n format: PropTypes.func,\n messages: PropTypes.shape({\n button: PropTypes.shape({\n busy: PropTypes.string,\n success: PropTypes.string\n }),\n calendar: PropTypes.shape({\n previousMove: PropTypes.string,\n previous: PropTypes.string,\n nextMove: PropTypes.string,\n next: PropTypes.string\n }),\n carousel: PropTypes.shape({\n previous: PropTypes.string,\n next: PropTypes.string,\n jump: PropTypes.string\n }),\n dateInput: PropTypes.shape({\n openCalendar: PropTypes.string,\n enterCalendar: PropTypes.string,\n exitCalendar: PropTypes.string\n }),\n dataFilters: PropTypes.shape({\n clear: PropTypes.string,\n heading: PropTypes.string,\n open: PropTypes.string,\n openSet: PropTypes.shape({\n singular: PropTypes.string,\n plural: PropTypes.string\n })\n }),\n dataForm: PropTypes.shape({\n submit: PropTypes.string\n }),\n dataSearch: PropTypes.shape({\n label: PropTypes.string,\n open: PropTypes.string\n }),\n dataSort: PropTypes.shape({\n ascending: PropTypes.string,\n by: PropTypes.string,\n descending: PropTypes.string,\n direction: PropTypes.string,\n open: PropTypes.string\n }),\n dataSummary: PropTypes.shape({\n filtered: PropTypes.string,\n filteredSingle: PropTypes.string,\n items: PropTypes.string,\n itemsSingle: PropTypes.string,\n selected: PropTypes.string,\n total: PropTypes.string,\n totalSingle: PropTypes.string\n }),\n dataTableColumns: PropTypes.shape({\n open: PropTypes.string,\n order: PropTypes.string,\n select: PropTypes.string,\n tip: PropTypes.string\n }),\n dataTableGroupBy: PropTypes.shape({\n clear: PropTypes.string,\n label: PropTypes.string\n }),\n dataView: PropTypes.shape({\n label: PropTypes.string\n }),\n fileInput: PropTypes.shape({\n browse: PropTypes.string,\n dropPrompt: PropTypes.string,\n dropPromptMultiple: PropTypes.string,\n files: PropTypes.string,\n maxFile: PropTypes.string,\n maxSizeSingle: PropTypes.string,\n maxSizeMultiple: PropTypes.shape({\n singular: PropTypes.string,\n plural: PropTypes.string\n }),\n remove: PropTypes.string,\n removeAll: PropTypes.string\n }),\n form: PropTypes.shape({\n invalid: PropTypes.string,\n required: PropTypes.string\n }),\n formField: PropTypes.shape({\n maxCharacters: PropTypes.shape({\n remaining: PropTypes.shape({\n singular: PropTypes.string,\n plural: PropTypes.string\n }),\n overLimit: PropTypes.shape({\n singular: PropTypes.string,\n plural: PropTypes.string\n })\n })\n }),\n menu: PropTypes.shape({\n openMenu: PropTypes.string,\n closeMenu: PropTypes.string\n }),\n rangeSelector: PropTypes.shape({\n lower: PropTypes.string,\n upper: PropTypes.string\n }),\n select: PropTypes.shape({\n multiple: PropTypes.string,\n selected: PropTypes.string\n }),\n selectMultiple: PropTypes.shape({\n clearAll: PropTypes.string,\n clearAllA11y: PropTypes.string,\n open: PropTypes.string,\n optionSelected: PropTypes.string,\n optionNotSelected: PropTypes.string,\n search: PropTypes.string,\n selectAll: PropTypes.string,\n selectAllA11y: PropTypes.string,\n selected: PropTypes.string,\n selectedOfTotal: PropTypes.string,\n selectDrop: PropTypes.string,\n selectedOptions: PropTypes.string,\n showMore: PropTypes.string,\n summarizedValue: PropTypes.string\n }),\n skipLinks: PropTypes.shape({\n skipTo: PropTypes.string\n }),\n tabs: PropTypes.shape({\n tabContents: PropTypes.string\n }),\n textInput: PropTypes.shape({\n enterSelect: PropTypes.string,\n suggestionsCount: PropTypes.string,\n suggestionsExist: PropTypes.string,\n suggestionIsOpen: PropTypes.string\n }),\n video: PropTypes.shape({\n audioDescriptions: PropTypes.string,\n captions: PropTypes.string,\n closeMenu: PropTypes.string,\n description: PropTypes.string,\n fullScreen: PropTypes.string,\n progressMeter: PropTypes.string,\n scrubber: PropTypes.string,\n openMenu: PropTypes.string,\n pauseButton: PropTypes.string,\n playButton: PropTypes.string,\n volumeDown: PropTypes.string,\n volumeUp: PropTypes.string\n })\n }),\n onAnalytics: PropTypes.func\n })\n };\n}\nexport var GrommetPropTypes = PropType;","import React, { useCallback, useContext, useEffect, useRef } from 'react';\nexport var AnalyticsContext = /*#__PURE__*/React.createContext(function () {});\nexport var useAnalytics = function useAnalytics() {\n return useContext(AnalyticsContext);\n};\nexport var AnalyticsProvider = function AnalyticsProvider(_ref) {\n var onAnalytics = _ref.onAnalytics,\n children = _ref.children;\n var lastUrlRef = useRef();\n var sendAnalytics = useCallback(function (data) {\n return onAnalytics && onAnalytics(data);\n }, [onAnalytics]);\n useEffect(function () {\n var observer;\n if (onAnalytics) {\n observer = new window.MutationObserver(function () {\n var _window;\n var url = (_window = window) == null || (_window = _window.location) == null ? void 0 : _window.href;\n var previousUrl = lastUrlRef.current;\n if (url !== previousUrl) {\n lastUrlRef.current = url;\n sendAnalytics({\n type: 'pageView',\n url: url,\n previousUrl: previousUrl\n });\n }\n });\n observer.observe(document, {\n subtree: true,\n childList: true\n });\n }\n return function () {\n var _observer;\n return (_observer = observer) == null ? void 0 : _observer.disconnect();\n };\n }, [sendAnalytics, onAnalytics]);\n return /*#__PURE__*/React.createElement(AnalyticsContext.Provider, {\n value: sendAnalytics\n }, children);\n};","var _excluded = [\"children\", \"full\", \"containerTarget\", \"theme\", \"options\", \"messages\", \"onAnalytics\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React, { forwardRef, useEffect, useMemo, useState } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { ContainerTargetContext, ResponsiveContext, ThemeContext } from '../../contexts';\nimport { deepMerge, backgroundIsDark, getBreakpoint, getDeviceBreakpoint, normalizeColor, useForwardedRef } from '../../utils';\nimport { base as baseTheme } from '../../themes';\nimport { StyledGrommet } from './StyledGrommet';\nimport { RootsContext } from '../../contexts/RootsContext';\nimport { OptionsContext } from '../../contexts/OptionsContext';\nimport { format as _format, MessageContext } from '../../contexts/MessageContext';\nimport defaultMessages from '../../languages/default.json';\nimport { GrommetPropTypes } from './propTypes';\nimport { AnalyticsProvider } from '../../contexts/AnalyticsContext';\nvar FullGlobalStyle = createGlobalStyle([\"body{margin:0;}\"]);\nvar deviceResponsive = function deviceResponsive(userAgent, theme) {\n // log('--deviceResponsive', userAgent, theme);\n /*\n * Regexes provided for mobile and tablet detection are meant to replace\n * a full-featured specific library due to contributing a considerable size\n * into the bundle.\n *\n * User agents found https://deviceatlas.com/blog/list-of-user-agent-strings\n */\n if (userAgent) {\n if (/(tablet|ipad|playbook|silk)|(android(?!.*mobile))/i.test(userAgent)) {\n return getDeviceBreakpoint('tablet', theme);\n }\n if (/Mobile|iPhone|Android/.test(userAgent)) {\n return getDeviceBreakpoint('phone', theme);\n }\n return getDeviceBreakpoint('computer', theme);\n }\n return undefined;\n};\nvar defaultOptions = {};\nvar Grommet = /*#__PURE__*/forwardRef(function (props, ref) {\n var children = props.children,\n full = props.full,\n _props$containerTarge = props.containerTarget,\n containerTarget = _props$containerTarge === void 0 ? typeof document === 'object' ? document.body : undefined : _props$containerTarge,\n themeProp = props.theme,\n _props$options = props.options,\n options = _props$options === void 0 ? defaultOptions : _props$options,\n messagesProp = props.messages,\n onAnalytics = props.onAnalytics,\n rest = _objectWithoutPropertiesLoose(props, _excluded);\n var background = props.background,\n dir = props.dir,\n themeMode = props.themeMode,\n userAgent = props.userAgent;\n var _useState = useState(),\n stateResponsive = _useState[0],\n setResponsive = _useState[1];\n var _useState2 = useState([]),\n roots = _useState2[0],\n setRoots = _useState2[1];\n var theme = useMemo(function () {\n var nextTheme = deepMerge(baseTheme, themeProp || {});\n\n // if user provides specific menu alignment, we don't want\n // the defaults to be included at all (can cause issues with controlMirror)\n // override merged value with themeProp value\n if (themeProp && themeProp.menu && themeProp.menu.drop && themeProp.menu.drop.align) {\n delete nextTheme.menu.drop.align;\n nextTheme.menu.drop.align = themeProp.menu.drop.align;\n }\n var themeBackground = nextTheme.global.colors.background;\n nextTheme.dark = (themeMode || nextTheme.defaultMode) === 'dark';\n if (themeMode === 'auto' && typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n nextTheme.dark = true;\n }\n var color = normalizeColor(background || themeBackground, nextTheme);\n nextTheme.dark = backgroundIsDark(color, nextTheme);\n nextTheme.baseBackground = background || themeBackground;\n // This allows DataTable to intelligently set the background of a pinned\n // header or footer.\n nextTheme.background = nextTheme.baseBackground;\n if (dir) {\n nextTheme.dir = dir;\n }\n return nextTheme;\n }, [background, dir, themeMode, themeProp]);\n var messages = useMemo(function () {\n // combine the passed in messages, if any, with the default\n // messages and format function.\n var nextMessages = deepMerge(defaultMessages, (messagesProp == null ? void 0 : messagesProp.messages) || {});\n return {\n messages: nextMessages,\n format: function format(opts) {\n var message = (messagesProp == null ? void 0 : messagesProp.format) && messagesProp.format(opts);\n return typeof message !== 'undefined' ? message : _format(opts, nextMessages);\n }\n };\n }, [messagesProp]);\n useEffect(function () {\n var onResize = function onResize() {\n setResponsive(getBreakpoint(document.body.clientWidth, theme));\n };\n window.addEventListener('resize', onResize);\n onResize();\n return function () {\n window.removeEventListener('resize', onResize);\n };\n }, [theme]);\n var responsive = stateResponsive || deviceResponsive(userAgent, theme) || theme.global.deviceBreakpoints.tablet;\n var grommetRef = useForwardedRef(ref);\n useEffect(function () {\n if (grommetRef.current) setRoots([grommetRef.current]);\n }, [grommetRef]);\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {\n value: responsive\n }, /*#__PURE__*/React.createElement(RootsContext.Provider, {\n value: roots\n }, /*#__PURE__*/React.createElement(ContainerTargetContext.Provider, {\n value: containerTarget\n }, /*#__PURE__*/React.createElement(OptionsContext.Provider, {\n value: options\n }, /*#__PURE__*/React.createElement(MessageContext.Provider, {\n value: messages\n }, /*#__PURE__*/React.createElement(AnalyticsProvider, {\n onAnalytics: onAnalytics\n }, /*#__PURE__*/React.createElement(StyledGrommet, _extends({\n full: full\n }, rest, {\n ref: grommetRef\n }), children), full && /*#__PURE__*/React.createElement(FullGlobalStyle, null))))))));\n});\nGrommet.displayName = 'Grommet';\nGrommet.propTypes = GrommetPropTypes;\nexport { Grommet };","import styled, { css } from 'styled-components';\nimport { genericStyles } from '../../utils';\nimport { defaultProps } from '../../default-props';\nvar fillStyle = css([\"\", \" \", \" flex-grow:1;display:flex;\"], function (props) {\n return props.fillContainer === true || props.fillContainer === 'horizontal' ? \"\\n width: 100%;\\n max-width: none;\\n \" : '';\n}, function (props) {\n return props.fillContainer === true || props.fillContainer === 'vertical' ? 'height: 100%;' : '';\n});\nvar StyledStack = styled.div.withConfig({\n displayName: \"StyledStack\",\n componentId: \"sc-ajspsk-0\"\n})([\"position:relative;\", \" \", \" \", \"\"], genericStyles, function (props) {\n return props.fillContainer && fillStyle;\n}, function (props) {\n return props.theme.stack && props.theme.stack.extend;\n});\nStyledStack.defaultProps = {};\nObject.setPrototypeOf(StyledStack.defaultProps, defaultProps);\nvar styleMap = {\n fill: \"\\n top: 0;\\n left: 0;\\n bottom: 0;\\n right: 0;\\n \",\n center: \"\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n \",\n left: \"\\n top: 50%;\\n left: 0;\\n transform: translateY(-50%);\\n \",\n right: \"\\n top: 50%;\\n right: 0;\\n transform: translateY(-50%);\\n \",\n top: \"\\n top: 0;\\n left: 50%;\\n transform: translateX(-50%);\\n \",\n bottom: \"\\n bottom: 0;\\n left: 50%;\\n transform: translateX(-50%);\\n \",\n 'top-left': \"\\n top: 0;\\n left: 0;\\n \",\n 'bottom-left': \"\\n bottom: 0;\\n left: 0;\\n \",\n 'top-right': \"\\n top: 0;\\n right: 0;\\n \",\n 'bottom-right': \"\\n bottom: 0;\\n right: 0;\\n \"\n};\nvar StyledStackLayer = styled.div.withConfig({\n displayName: \"StyledStack__StyledStackLayer\",\n componentId: \"sc-ajspsk-1\"\n})([\"position:\", \";\", \" \", \" \", \" \", \"\"], function (props) {\n return props.guiding ? 'relative' : 'absolute';\n}, function (props) {\n return props.guiding && 'display: block;';\n}, function (props) {\n return !props.guiding && styleMap[props.anchor || 'fill'] + \";\";\n}, function (props) {\n return props.fillContainer && \"\\n width: 100%;\\n height: 100%;\\n \";\n}, function (props) {\n return !props.interactive && \"pointer-events: none;\";\n});\nStyledStackLayer.defaultProps = {};\nObject.setPrototypeOf(StyledStackLayer.defaultProps, defaultProps);\nexport { StyledStack, StyledStackLayer };","function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport PropTypes from 'prop-types';\nimport { genericProps } from '../../utils/general-prop-types';\nvar PropType = {};\nif (process.env.NODE_ENV !== 'production') {\n PropType = _extends({}, genericProps, {\n anchor: PropTypes.oneOf(['center', 'left', 'right', 'top', 'bottom', 'top-left', 'bottom-left', 'top-right', 'bottom-right']),\n fill: PropTypes.oneOfType([PropTypes.oneOf(['horizontal', 'vertical']), PropTypes.bool]),\n guidingChild: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['first', 'last'])]),\n interactiveChild: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['first', 'last'])])\n });\n}\nexport var StackPropTypes = PropType;","var _excluded = [\"anchor\", \"children\", \"fill\", \"guidingChild\", \"interactiveChild\"];\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport React, { Children, forwardRef } from 'react';\nimport { StyledStack, StyledStackLayer } from './StyledStack';\nimport { StackPropTypes } from './propTypes';\nvar buildStyledChildren = function buildStyledChildren(_ref) {\n var anchor = _ref.anchor,\n fill = _ref.fill,\n guidingIndex = _ref.guidingIndex,\n interactiveChild = _ref.interactiveChild,\n interactiveIndex = _ref.interactiveIndex;\n return function (child, index) {\n var interactive = interactiveChild === undefined || interactiveIndex === index;\n var isGuidingIndex = index === guidingIndex;\n var props = isGuidingIndex ? {\n guiding: true,\n fillContainer: fill\n } : {\n anchor: anchor\n };\n return /*#__PURE__*/React.createElement(StyledStackLayer, _extends({\n key: index,\n interactive: interactive\n }, props), child);\n };\n};\nvar Stack = /*#__PURE__*/forwardRef(function (_ref2, ref) {\n var anchor = _ref2.anchor,\n children = _ref2.children,\n fill = _ref2.fill,\n guidingChild = _ref2.guidingChild,\n interactiveChild = _ref2.interactiveChild,\n rest = _objectWithoutPropertiesLoose(_ref2, _excluded);\n var prunedChildren = Children.toArray(children).filter(function (c) {\n return c;\n });\n var toChildIndex = function toChildIndex(child) {\n var index = child;\n if (index === 'first' || !index) index = 0;else if (index === 'last') index = prunedChildren.length - 1;\n return index;\n };\n var guidingIndex = toChildIndex(guidingChild);\n var interactiveIndex = interactiveChild && toChildIndex(interactiveChild);\n var styledChildren = prunedChildren.map(buildStyledChildren({\n anchor: anchor,\n fill: fill,\n guidingIndex: guidingIndex,\n interactiveChild: interactiveChild,\n interactiveIndex: interactiveIndex\n }));\n return /*#__PURE__*/React.createElement(StyledStack, _extends({\n ref: ref,\n fillContainer: fill\n }, rest), styledChildren);\n});\nStack.displayName = 'Stack';\nStack.propTypes = StackPropTypes;\nexport { Stack };","////////////////////////////////////////////////////////////////////////////////\n//#region Types and Constants\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * Actions represent the type of change to a location value.\n */\nexport enum Action {\n /**\n * A POP indicates a change to an arbitrary index in the history stack, such\n * as a back or forward navigation. It does not describe the direction of the\n * navigation, only that the current index changed.\n *\n * Note: This is the default action for newly created history objects.\n */\n Pop = \"POP\",\n\n /**\n * A PUSH indicates a new entry being added to the history stack, such as when\n * a link is clicked and a new page loads. When this happens, all subsequent\n * entries in the stack are lost.\n */\n Push = \"PUSH\",\n\n /**\n * A REPLACE indicates the entry at the current index in the history stack\n * being replaced by a new one.\n */\n Replace = \"REPLACE\",\n}\n\n/**\n * The pathname, search, and hash values of a URL.\n */\nexport interface Path {\n /**\n * A URL pathname, beginning with a /.\n */\n pathname: string;\n\n /**\n * A URL search string, beginning with a ?.\n */\n search: string;\n\n /**\n * A URL fragment identifier, beginning with a #.\n */\n hash: string;\n}\n\n// TODO: (v7) Change the Location generic default from `any` to `unknown` and\n// remove Remix `useLocation` wrapper.\n\n/**\n * An entry in a history stack. A location contains information about the\n * URL path, as well as possibly some arbitrary state and a key.\n */\nexport interface Location extends Path {\n /**\n * A value of arbitrary data associated with this location.\n */\n state: State;\n\n /**\n * A unique string associated with this location. May be used to safely store\n * and retrieve data in some other storage API, like `localStorage`.\n *\n * Note: This value is always \"default\" on the initial location.\n */\n key: string;\n}\n\n/**\n * A change to the current location.\n */\nexport interface Update {\n /**\n * The action that triggered the change.\n */\n action: Action;\n\n /**\n * The new location.\n */\n location: Location;\n\n /**\n * The delta between this location and the former location in the history stack\n */\n delta: number | null;\n}\n\n/**\n * A function that receives notifications about location changes.\n */\nexport interface Listener {\n (update: Update): void;\n}\n\n/**\n * Describes a location that is the destination of some navigation, either via\n * `history.push` or `history.replace`. This may be either a URL or the pieces\n * of a URL path.\n */\nexport type To = string | Partial;\n\n/**\n * A history is an interface to the navigation stack. The history serves as the\n * source of truth for the current location, as well as provides a set of\n * methods that may be used to change it.\n *\n * It is similar to the DOM's `window.history` object, but with a smaller, more\n * focused API.\n */\nexport interface History {\n /**\n * The last action that modified the current location. This will always be\n * Action.Pop when a history instance is first created. This value is mutable.\n */\n readonly action: Action;\n\n /**\n * The current location. This value is mutable.\n */\n readonly location: Location;\n\n /**\n * Returns a valid href for the given `to` value that may be used as\n * the value of an attribute.\n *\n * @param to - The destination URL\n */\n createHref(to: To): string;\n\n /**\n * Returns a URL for the given `to` value\n *\n * @param to - The destination URL\n */\n createURL(to: To): URL;\n\n /**\n * Encode a location the same way window.history would do (no-op for memory\n * history) so we ensure our PUSH/REPLACE navigations for data routers\n * behave the same as POP\n *\n * @param to Unencoded path\n */\n encodeLocation(to: To): Path;\n\n /**\n * Pushes a new location onto the history stack, increasing its length by one.\n * If there were any entries in the stack after the current one, they are\n * lost.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n push(to: To, state?: any): void;\n\n /**\n * Replaces the current location in the history stack with a new one. The\n * location that was replaced will no longer be available.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n replace(to: To, state?: any): void;\n\n /**\n * Navigates `n` entries backward/forward in the history stack relative to the\n * current index. For example, a \"back\" navigation would use go(-1).\n *\n * @param delta - The delta in the stack index\n */\n go(delta: number): void;\n\n /**\n * Sets up a listener that will be called whenever the current location\n * changes.\n *\n * @param listener - A function that will be called when the location changes\n * @returns unlisten - A function that may be used to stop listening\n */\n listen(listener: Listener): () => void;\n}\n\ntype HistoryState = {\n usr: any;\n key?: string;\n idx: number;\n};\n\nconst PopStateEventType = \"popstate\";\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Memory History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A user-supplied object that describes a location. Used when providing\n * entries to `createMemoryHistory` via its `initialEntries` option.\n */\nexport type InitialEntry = string | Partial;\n\nexport type MemoryHistoryOptions = {\n initialEntries?: InitialEntry[];\n initialIndex?: number;\n v5Compat?: boolean;\n};\n\n/**\n * A memory history stores locations in memory. This is useful in stateful\n * environments where there is no web browser, such as node tests or React\n * Native.\n */\nexport interface MemoryHistory extends History {\n /**\n * The current index in the history stack.\n */\n readonly index: number;\n}\n\n/**\n * Memory history stores the current location in memory. It is designed for use\n * in stateful non-browser environments like tests and React Native.\n */\nexport function createMemoryHistory(\n options: MemoryHistoryOptions = {}\n): MemoryHistory {\n let { initialEntries = [\"/\"], initialIndex, v5Compat = false } = options;\n let entries: Location[]; // Declare so we can access from createMemoryLocation\n entries = initialEntries.map((entry, index) =>\n createMemoryLocation(\n entry,\n typeof entry === \"string\" ? null : entry.state,\n index === 0 ? \"default\" : undefined\n )\n );\n let index = clampIndex(\n initialIndex == null ? entries.length - 1 : initialIndex\n );\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n function clampIndex(n: number): number {\n return Math.min(Math.max(n, 0), entries.length - 1);\n }\n function getCurrentLocation(): Location {\n return entries[index];\n }\n function createMemoryLocation(\n to: To,\n state: any = null,\n key?: string\n ): Location {\n let location = createLocation(\n entries ? getCurrentLocation().pathname : \"/\",\n to,\n state,\n key\n );\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in memory history: ${JSON.stringify(\n to\n )}`\n );\n return location;\n }\n\n function createHref(to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n let history: MemoryHistory = {\n get index() {\n return index;\n },\n get action() {\n return action;\n },\n get location() {\n return getCurrentLocation();\n },\n createHref,\n createURL(to) {\n return new URL(createHref(to), \"http://localhost\");\n },\n encodeLocation(to: To) {\n let path = typeof to === \"string\" ? parsePath(to) : to;\n return {\n pathname: path.pathname || \"\",\n search: path.search || \"\",\n hash: path.hash || \"\",\n };\n },\n push(to, state) {\n action = Action.Push;\n let nextLocation = createMemoryLocation(to, state);\n index += 1;\n entries.splice(index, entries.length, nextLocation);\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 1 });\n }\n },\n replace(to, state) {\n action = Action.Replace;\n let nextLocation = createMemoryLocation(to, state);\n entries[index] = nextLocation;\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 0 });\n }\n },\n go(delta) {\n action = Action.Pop;\n let nextIndex = clampIndex(index + delta);\n let nextLocation = entries[nextIndex];\n index = nextIndex;\n if (listener) {\n listener({ action, location: nextLocation, delta });\n }\n },\n listen(fn: Listener) {\n listener = fn;\n return () => {\n listener = null;\n };\n },\n };\n\n return history;\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Browser History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A browser history stores the current location in regular URLs in a web\n * browser environment. This is the standard for most web apps and provides the\n * cleanest URLs the browser's address bar.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory\n */\nexport interface BrowserHistory extends UrlHistory {}\n\nexport type BrowserHistoryOptions = UrlHistoryOptions;\n\n/**\n * Browser history stores the location in regular URLs. This is the standard for\n * most web apps, but it requires some configuration on the server to ensure you\n * serve the same app at multiple URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory\n */\nexport function createBrowserHistory(\n options: BrowserHistoryOptions = {}\n): BrowserHistory {\n function createBrowserLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let { pathname, search, hash } = window.location;\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createBrowserHref(window: Window, to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n return getUrlBasedHistory(\n createBrowserLocation,\n createBrowserHref,\n null,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Hash History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A hash history stores the current location in the fragment identifier portion\n * of the URL in a web browser environment.\n *\n * This is ideal for apps that do not control the server for some reason\n * (because the fragment identifier is never sent to the server), including some\n * shared hosting environments that do not provide fine-grained controls over\n * which pages are served at which URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory\n */\nexport interface HashHistory extends UrlHistory {}\n\nexport type HashHistoryOptions = UrlHistoryOptions;\n\n/**\n * Hash history stores the location in window.location.hash. This makes it ideal\n * for situations where you don't want to send the location to the server for\n * some reason, either because you do cannot configure it or the URL space is\n * reserved for something else.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory\n */\nexport function createHashHistory(\n options: HashHistoryOptions = {}\n): HashHistory {\n function createHashLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n } = parsePath(window.location.hash.substr(1));\n\n // Hash URL should always have a leading / just like window.location.pathname\n // does, so if an app ends up at a route like /#something then we add a\n // leading slash so all of our path-matching behaves the same as if it would\n // in a browser router. This is particularly important when there exists a\n // root splat route () since that matches internally against\n // \"/*\" and we'd expect /#something to 404 in a hash router app.\n if (!pathname.startsWith(\"/\") && !pathname.startsWith(\".\")) {\n pathname = \"/\" + pathname;\n }\n\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createHashHref(window: Window, to: To) {\n let base = window.document.querySelector(\"base\");\n let href = \"\";\n\n if (base && base.getAttribute(\"href\")) {\n let url = window.location.href;\n let hashIndex = url.indexOf(\"#\");\n href = hashIndex === -1 ? url : url.slice(0, hashIndex);\n }\n\n return href + \"#\" + (typeof to === \"string\" ? to : createPath(to));\n }\n\n function validateHashLocation(location: Location, to: To) {\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in hash history.push(${JSON.stringify(\n to\n )})`\n );\n }\n\n return getUrlBasedHistory(\n createHashLocation,\n createHashHref,\n validateHashLocation,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region UTILS\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * @private\n */\nexport function invariant(value: boolean, message?: string): asserts value;\nexport function invariant(\n value: T | null | undefined,\n message?: string\n): asserts value is T;\nexport function invariant(value: any, message?: string) {\n if (value === false || value === null || typeof value === \"undefined\") {\n throw new Error(message);\n }\n}\n\nexport function warning(cond: any, message: string) {\n if (!cond) {\n // eslint-disable-next-line no-console\n if (typeof console !== \"undefined\") console.warn(message);\n\n try {\n // Welcome to debugging history!\n //\n // This error is thrown as a convenience, so you can more easily\n // find the source for a warning that appears in the console by\n // enabling \"pause on exceptions\" in your JavaScript debugger.\n throw new Error(message);\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n}\n\nfunction createKey() {\n return Math.random().toString(36).substr(2, 8);\n}\n\n/**\n * For browser-based histories, we combine the state and key into an object\n */\nfunction getHistoryState(location: Location, index: number): HistoryState {\n return {\n usr: location.state,\n key: location.key,\n idx: index,\n };\n}\n\n/**\n * Creates a Location object with a unique key from the given Path\n */\nexport function createLocation(\n current: string | Location,\n to: To,\n state: any = null,\n key?: string\n): Readonly {\n let location: Readonly = {\n pathname: typeof current === \"string\" ? current : current.pathname,\n search: \"\",\n hash: \"\",\n ...(typeof to === \"string\" ? parsePath(to) : to),\n state,\n // TODO: This could be cleaned up. push/replace should probably just take\n // full Locations now and avoid the need to run through this flow at all\n // But that's a pretty big refactor to the current test suite so going to\n // keep as is for the time being and just let any incoming keys take precedence\n key: (to && (to as Location).key) || key || createKey(),\n };\n return location;\n}\n\n/**\n * Creates a string URL path from the given pathname, search, and hash components.\n */\nexport function createPath({\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n}: Partial) {\n if (search && search !== \"?\")\n pathname += search.charAt(0) === \"?\" ? search : \"?\" + search;\n if (hash && hash !== \"#\")\n pathname += hash.charAt(0) === \"#\" ? hash : \"#\" + hash;\n return pathname;\n}\n\n/**\n * Parses a string URL path into its separate pathname, search, and hash components.\n */\nexport function parsePath(path: string): Partial {\n let parsedPath: Partial = {};\n\n if (path) {\n let hashIndex = path.indexOf(\"#\");\n if (hashIndex >= 0) {\n parsedPath.hash = path.substr(hashIndex);\n path = path.substr(0, hashIndex);\n }\n\n let searchIndex = path.indexOf(\"?\");\n if (searchIndex >= 0) {\n parsedPath.search = path.substr(searchIndex);\n path = path.substr(0, searchIndex);\n }\n\n if (path) {\n parsedPath.pathname = path;\n }\n }\n\n return parsedPath;\n}\n\nexport interface UrlHistory extends History {}\n\nexport type UrlHistoryOptions = {\n window?: Window;\n v5Compat?: boolean;\n};\n\nfunction getUrlBasedHistory(\n getLocation: (window: Window, globalHistory: Window[\"history\"]) => Location,\n createHref: (window: Window, to: To) => string,\n validateLocation: ((location: Location, to: To) => void) | null,\n options: UrlHistoryOptions = {}\n): UrlHistory {\n let { window = document.defaultView!, v5Compat = false } = options;\n let globalHistory = window.history;\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n let index = getIndex()!;\n // Index should only be null when we initialize. If not, it's because the\n // user called history.pushState or history.replaceState directly, in which\n // case we should log a warning as it will result in bugs.\n if (index == null) {\n index = 0;\n globalHistory.replaceState({ ...globalHistory.state, idx: index }, \"\");\n }\n\n function getIndex(): number {\n let state = globalHistory.state || { idx: null };\n return state.idx;\n }\n\n function handlePop() {\n action = Action.Pop;\n let nextIndex = getIndex();\n let delta = nextIndex == null ? null : nextIndex - index;\n index = nextIndex;\n if (listener) {\n listener({ action, location: history.location, delta });\n }\n }\n\n function push(to: To, state?: any) {\n action = Action.Push;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n index = getIndex() + 1;\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n\n // try...catch because iOS limits us to 100 pushState calls :/\n try {\n globalHistory.pushState(historyState, \"\", url);\n } catch (error) {\n // If the exception is because `state` can't be serialized, let that throw\n // outwards just like a replace call would so the dev knows the cause\n // https://html.spec.whatwg.org/multipage/nav-history-apis.html#shared-history-push/replace-state-steps\n // https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeinternal\n if (error instanceof DOMException && error.name === \"DataCloneError\") {\n throw error;\n }\n // They are going to lose state here, but there is no real\n // way to warn them about it since the page will refresh...\n window.location.assign(url);\n }\n\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 1 });\n }\n }\n\n function replace(to: To, state?: any) {\n action = Action.Replace;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n index = getIndex();\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n globalHistory.replaceState(historyState, \"\", url);\n\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 0 });\n }\n }\n\n function createURL(to: To): URL {\n // window.location.origin is \"null\" (the literal string value) in Firefox\n // under certain conditions, notably when serving from a local HTML file\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297\n let base =\n window.location.origin !== \"null\"\n ? window.location.origin\n : window.location.href;\n\n let href = typeof to === \"string\" ? to : createPath(to);\n // Treating this as a full URL will strip any trailing spaces so we need to\n // pre-encode them since they might be part of a matching splat param from\n // an ancestor route\n href = href.replace(/ $/, \"%20\");\n invariant(\n base,\n `No window.location.(origin|href) available to create URL for href: ${href}`\n );\n return new URL(href, base);\n }\n\n let history: History = {\n get action() {\n return action;\n },\n get location() {\n return getLocation(window, globalHistory);\n },\n listen(fn: Listener) {\n if (listener) {\n throw new Error(\"A history only accepts one active listener\");\n }\n window.addEventListener(PopStateEventType, handlePop);\n listener = fn;\n\n return () => {\n window.removeEventListener(PopStateEventType, handlePop);\n listener = null;\n };\n },\n createHref(to) {\n return createHref(window, to);\n },\n createURL,\n encodeLocation(to) {\n // Encode a Location the same way window.location would\n let url = createURL(to);\n return {\n pathname: url.pathname,\n search: url.search,\n hash: url.hash,\n };\n },\n push,\n replace,\n go(n) {\n return globalHistory.go(n);\n },\n };\n\n return history;\n}\n\n//#endregion\n","import type { Location, Path, To } from \"./history\";\nimport { invariant, parsePath, warning } from \"./history\";\n\n/**\n * Map of routeId -> data returned from a loader/action/error\n */\nexport interface RouteData {\n [routeId: string]: any;\n}\n\nexport enum ResultType {\n data = \"data\",\n deferred = \"deferred\",\n redirect = \"redirect\",\n error = \"error\",\n}\n\n/**\n * Successful result from a loader or action\n */\nexport interface SuccessResult {\n type: ResultType.data;\n data: unknown;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Successful defer() result from a loader or action\n */\nexport interface DeferredResult {\n type: ResultType.deferred;\n deferredData: DeferredData;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Redirect result from a loader or action\n */\nexport interface RedirectResult {\n type: ResultType.redirect;\n // We keep the raw Response for redirects so we can return it verbatim\n response: Response;\n}\n\n/**\n * Unsuccessful result from a loader or action\n */\nexport interface ErrorResult {\n type: ResultType.error;\n error: unknown;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Result from a loader or action - potentially successful or unsuccessful\n */\nexport type DataResult =\n | SuccessResult\n | DeferredResult\n | RedirectResult\n | ErrorResult;\n\n/**\n * Result from a loader or action called via dataStrategy\n */\nexport interface HandlerResult {\n type: \"data\" | \"error\";\n result: unknown; // data, Error, Response, DeferredData\n status?: number;\n}\n\ntype LowerCaseFormMethod = \"get\" | \"post\" | \"put\" | \"patch\" | \"delete\";\ntype UpperCaseFormMethod = Uppercase;\n\n/**\n * Users can specify either lowercase or uppercase form methods on `