UNPKG

@seidhr/sanity-plugin-timespan-input

Version:

Make it easier to add timespan information with the help of Extended Date Time Format (EDTF).

1,129 lines (1,113 loc) 73.1 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: !0 }); var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), edtf = require("edtf"), ui = require("@sanity/ui"), r = require("react"), icons = require("@sanity/icons"), dateFns = require("date-fns"), tz = require("@date-fns/tz"); function _interopDefaultCompat(e) { return e && typeof e == "object" && "default" in e ? e : { default: e }; } var edtf__default = /* @__PURE__ */ _interopDefaultCompat(edtf), r__default = /* @__PURE__ */ _interopDefaultCompat(r); const Period = ({ start, end, name, variant = "fuzzy" }) => { let bg; const mode = ui.useTheme().sanity.color.dark ? "dark" : "light", boxColorScheme = mode === "light" ? { backgroundColor: "#ffffff", color: "#000000" } : { backgroundColor: "#000000", color: "#ffffff" }; switch (variant) { case "fuzzy": bg = { light: { backgroundImage: "repeating-linear-gradient(45deg, #000000 0, #000000 0.5px, transparent 0, transparent 50%)", backgroundSize: "5px 5px", backgroundColor: "#ffffff", borderBlockStart: "1px solid #444", borderBlockEnd: "1px solid #444", color: "#000000" }, dark: { backgroundImage: "repeating-linear-gradient(45deg, #dddddd 0, #dddddd 0.5px, transparent 0, transparent 50%)", backgroundSize: "5px 5px", backgroundColor: "#000000", borderBlockStart: "1px solid #ccc", borderBlockEnd: "1px solid #ccc", color: "#ffffff" } }; break; case "certain": bg = { light: { backgroundImage: "repeating-linear-gradient(45deg, #000000 0, #000000 0.5px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, #000000 0, #000000 0.5px, transparent 0, transparent 50%)", backgroundSize: "5px 5px", backgroundColor: "#ffffff", borderBlockStart: "1px solid #444", borderBlockEnd: "1px solid #444", color: "#000000" }, dark: { backgroundImage: "repeating-linear-gradient(45deg, #dddddd 0, #dddddd 0.5px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, #dddddd 0, #dddddd 0.5px, transparent 0, transparent 50%)", backgroundSize: "5px 5px", backgroundColor: "#000000", borderBlockStart: "1px solid #ccc", borderBlockEnd: "1px solid #ccc", color: "#ffffff" } }; break; case "unknown": bg = { light: { borderBlockStart: "1px solid #444", borderBlockEnd: "1px solid #444", color: "#000000" }, dark: { borderBlockStart: "1px solid #ccc", borderBlockEnd: "1px solid #ccc", color: "#ffffff" } }; break; case "infinity": bg = { light: { borderBlockStart: "1px solid #444", borderBlockEnd: "1px solid #444", color: "#000000" }, dark: { borderBlockStart: "1px solid #ccc", borderBlockEnd: "1px solid #ccc", color: "#ffffff" } }; break; default: bg = { light: {}, dark: {} }; break; } return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { flex: 1, children: [ /* @__PURE__ */ jsxRuntime.jsxs( ui.Box, { flex: 1, style: { position: "relative", height: "15px" }, children: [ start && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ /* @__PURE__ */ jsxRuntime.jsx( icons.ArrowLeftIcon, { style: { position: "absolute", top: "-8px", left: "-3px", fontSize: 18 } } ), /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", top: "-7px", left: "16px" }, children: dateFns.format(new Date(start), "yyyy.MM.dd") }) ] }), variant === "infinity" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ /* @__PURE__ */ jsxRuntime.jsx( icons.ArrowLeftIcon, { style: { position: "absolute", top: "-8px", left: "-3px", fontSize: 18 } } ), /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", top: "-7px", left: "16px" }, children: "\u221E" }) ] }) ] } ), /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { flex: 1, justify: "center", paddingY: 1, style: bg[mode], children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 1, style: { ...boxColorScheme, borderRadius: "5px" }, children: name }) }), /* @__PURE__ */ jsxRuntime.jsxs( ui.Box, { flex: 1, style: { position: "relative", height: "15px" }, children: [ end && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ /* @__PURE__ */ jsxRuntime.jsx( icons.ArrowRightIcon, { style: { position: "absolute", bottom: "-8px", right: "-3px", fontSize: 18 } } ), /* @__PURE__ */ jsxRuntime.jsx( "span", { style: { position: "absolute", bottom: "-8px", right: "16px" }, children: dateFns.format(new Date(end), "yyyy.MM.dd") } ) ] }), variant === "infinity" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ /* @__PURE__ */ jsxRuntime.jsx( icons.ArrowRightIcon, { style: { position: "absolute", bottom: "-8px", right: "-3px", fontSize: 18 } } ), /* @__PURE__ */ jsxRuntime.jsx( "span", { style: { position: "absolute", bottom: "-8px", right: "16px" }, children: "\u221E" } ) ] }) ] } ) ] }); }; function getDateLabel(date) { return date ? date === "Infinity" ? "infinity" : typeof date.uncertain == "number" && date.uncertain > 0 && typeof date.approximate == "number" && date.approximate !== 0 ? "approximate and uncertain" : date.uncertain === !0 || typeof date.uncertain == "number" && date.uncertain !== 0 ? "uncertain" : typeof date.approximate == "number" && date.approximate !== 0 ? "approximate" : "certain" : "unknown"; } function getIntervalLabel(interval) { if (!interval?.values?.length) return ["unknown"]; const [start, end] = interval.values, startLabel = getDateLabel(start), endLabel = getDateLabel(end); return [startLabel, endLabel]; } function Preview({ value }) { const { beginOfTheBegin, endOfTheBegin, beginOfTheEnd, endOfTheEnd, date, edtf: edtf$1 } = value; let boxLabel, intervalLabel = []; try { const edtfValue = edtf.parse(edtf$1); boxLabel = edtfValue.type === "Date" ? getDateLabel(edtfValue) : void 0, intervalLabel = edtfValue.type === "Interval" ? getIntervalLabel(edtfValue) : []; } catch { boxLabel = "invalid"; } const boxColorScheme = (ui.useTheme().sanity.color.dark ? "dark" : "light") == "light" ? { backgroundColor: "#ffffff", color: "#000000" } : { backgroundColor: "#000000", color: "#ffffff" }; return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: beginOfTheBegin || endOfTheBegin || beginOfTheEnd || endOfTheEnd || date ? /* @__PURE__ */ jsxRuntime.jsxs( ui.Flex, { direction: "row", justify: "center", align: "center", marginTop: 4, width: "100%", style: { fontSize: "12px" }, children: [ date && !beginOfTheBegin && !endOfTheBegin && !endOfTheEnd && !beginOfTheEnd && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), !beginOfTheBegin && !endOfTheBegin && endOfTheEnd && beginOfTheEnd && /* @__PURE__ */ jsxRuntime.jsx(Period, { name: intervalLabel[0], variant: "unknown" }), endOfTheBegin && /* @__PURE__ */ jsxRuntime.jsx( Period, { start: beginOfTheBegin, end: endOfTheBegin, name: `${intervalLabel[0]} start` } ), beginOfTheBegin && endOfTheEnd && !endOfTheBegin && !beginOfTheEnd && /* @__PURE__ */ jsxRuntime.jsx( Period, { start: beginOfTheBegin, end: endOfTheEnd, name: boxLabel ?? "certain", variant: "certain" } ), beginOfTheBegin && endOfTheBegin && beginOfTheEnd && endOfTheEnd && /* @__PURE__ */ jsxRuntime.jsx(Period, { name: boxLabel ?? "certain", variant: "certain" }), beginOfTheEnd && /* @__PURE__ */ jsxRuntime.jsx(Period, { start: beginOfTheEnd, end: endOfTheEnd, name: `${intervalLabel[1]} end` }), beginOfTheBegin && endOfTheBegin && !endOfTheEnd && !beginOfTheEnd && /* @__PURE__ */ jsxRuntime.jsx(Period, { name: intervalLabel[1], variant: "unknown" }) ] } ) : /* @__PURE__ */ jsxRuntime.jsx( ui.Flex, { direction: "row", justify: "center", align: "center", marginTop: 1, width: "100%", style: { fontSize: "12px", borderBlockEnd: "1px dashed #aaa", position: "relative", height: "15px" }, children: /* @__PURE__ */ jsxRuntime.jsx( ui.Box, { padding: 2, style: { ...boxColorScheme, borderRadius: "5px", position: "absolute", top: "-1px" }, children: "No EDTF value or invalid value" } ) } ) }); } const getDateFromDateTime = (unix) => dateFns.format( new tz.TZDate(dateFns.fromUnixTime(unix / 1e3), "UTC"), "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'" ), getDateFromDate = (unix) => dateFns.format(dateFns.fromUnixTime(unix / 1e3), "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"), mapEDTF = (edtf2) => { const intervalBeginOfTheBegin = edtf2.lower?.min ? { value: getDateFromDateTime(edtf2.lower?.min), path: ["beginOfTheBegin"] } : null, intervalEndOfTheBegin = edtf2.lower?.max ? { value: getDateFromDateTime(edtf2.lower?.max), path: ["endOfTheBegin"] } : null, intervalBeginOfTheEnd = edtf2.upper?.min ? { value: getDateFromDateTime(edtf2.upper?.min), path: ["beginOfTheEnd"] } : null, intervalEndOfTheEnd = edtf2.upper?.max ? { value: getDateFromDateTime(edtf2.upper?.max), path: ["endOfTheEnd"] } : null, beginOfTheBegin = edtf2.min && edtf2.min != edtf2.max ? { value: getDateFromDateTime(edtf2.min), path: ["beginOfTheBegin"] } : null, date = edtf2.min && edtf2.min === edtf2.max ? { value: getDateFromDate(edtf2.min), path: ["date"] } : null, endOfTheEnd = edtf2.max && edtf2.min != edtf2.max ? { value: getDateFromDateTime(edtf2.max), path: ["endOfTheEnd"] } : null; return [ intervalBeginOfTheBegin ?? beginOfTheBegin, intervalEndOfTheBegin, date, intervalBeginOfTheEnd, intervalEndOfTheEnd ?? endOfTheEnd ].filter(Boolean); }; function TimespanInput(props) { const { value, members, onChange, renderField, renderInput, renderItem, renderPreview } = props, previousEdtf = r.useRef(value?.edtf), edtfMember = members.find( (member) => member.kind === "field" && member.name === "edtf" ); r.useEffect( () => { if (value?.edtf) { if (value.edtf !== previousEdtf.current) { let edtfValue; try { edtfValue = edtf__default.default(value.edtf); const timespanPatches = mapEDTF(edtfValue)?.map((e) => sanity.set(e.value, e.path)); if (edtfValue.isEDTF) { const patches = [ sanity.unset(["beginOfTheBegin"]), sanity.unset(["endOfTheBegin"]), sanity.unset(["beginOfTheEnd"]), sanity.unset(["endOfTheEnd"]), sanity.unset(["date"]), sanity.set(value.edtf, ["edtf"]), ...timespanPatches ]; value._type || patches.unshift(sanity.set("Timespan", ["_type"])), onChange(patches); } } catch { value._type && onChange([ sanity.unset(["beginOfTheBegin"]), sanity.unset(["endOfTheBegin"]), sanity.unset(["beginOfTheEnd"]), sanity.unset(["endOfTheEnd"]), sanity.unset(["date"]) ]); } } previousEdtf.current = value?.edtf; } }, // eslint-disable-next-line react-hooks/exhaustive-deps [value?._type, value?.edtf] ), r.useEffect( () => { value?._type && !value?.edtf && onChange([sanity.unset()]); }, // eslint-disable-next-line react-hooks/exhaustive-deps [value] ); const customRenderInput = r.useCallback( (renderInputCallbackProps) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { children: [ /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { children: renderInput(renderInputCallbackProps) }), value && /* @__PURE__ */ jsxRuntime.jsx(Preview, { value }) ] }), [renderInput, value] ); return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 2, children: edtfMember && /* @__PURE__ */ jsxRuntime.jsx( sanity.MemberField, { member: edtfMember, renderInput: customRenderInput, renderField, renderItem, renderPreview } ) }); } var __assign = function() { return __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]); } return t; }, __assign.apply(this, arguments); }; function __spreadArray(to, from2, pack) { if (pack || arguments.length === 2) for (var i = 0, l = from2.length, ar; i < l; i++) (ar || !(i in from2)) && (ar || (ar = Array.prototype.slice.call(from2, 0, i)), ar[i] = from2[i]); return to.concat(ar || Array.prototype.slice.call(from2)); } function memoize(fn) { var cache = /* @__PURE__ */ Object.create(null); return function(arg) { return cache[arg] === void 0 && (cache[arg] = fn(arg)), cache[arg]; }; } var 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)-.*))$/, isPropValid = /* @__PURE__ */ memoize( function(prop) { return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91; } /* Z+1 */ ), MS = "-ms-", MOZ = "-moz-", WEBKIT = "-webkit-", COMMENT = "comm", RULESET = "rule", DECLARATION = "decl", IMPORT = "@import", KEYFRAMES = "@keyframes", LAYER = "@layer", abs = Math.abs, from = String.fromCharCode, assign = Object.assign; function hash(value, length2) { return charat(value, 0) ^ 45 ? (((length2 << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0; } function trim(value) { return value.trim(); } function match(value, pattern) { return (value = pattern.exec(value)) ? value[0] : value; } function replace(value, pattern, replacement) { return value.replace(pattern, replacement); } function indexof(value, search, position2) { return value.indexOf(search, position2); } function charat(value, index) { return value.charCodeAt(index) | 0; } function substr(value, begin, end) { return value.slice(begin, end); } function strlen(value) { return value.length; } function sizeof(value) { return value.length; } function append(value, array) { return array.push(value), value; } function combine(array, callback) { return array.map(callback).join(""); } function filter(array, pattern) { return array.filter(function(value) { return !match(value, pattern); }); } var line = 1, column = 1, length = 0, position = 0, character = 0, characters = ""; function node(value, root, parent, type, props, children, length2, siblings) { return { value, root, parent, type, props, children, line, column, length: length2, return: "", siblings }; } function copy(root, props) { return assign(node("", null, null, "", null, null, 0, root.siblings), root, { length: -root.length }, props); } function lift(root) { for (; root.root; ) root = copy(root.root, { children: [root] }); append(root, root.siblings); } function char() { return character; } function prev() { return character = position > 0 ? charat(characters, --position) : 0, column--, character === 10 && (column = 1, line--), character; } function next() { return character = position < length ? charat(characters, position++) : 0, column++, character === 10 && (column = 1, line++), character; } function peek() { return charat(characters, position); } function caret() { return position; } function slice(begin, end) { return substr(characters, begin, end); } function token(type) { switch (type) { // \0 \t \n \r \s whitespace token case 0: case 9: case 10: case 13: case 32: return 5; // ! + , / > @ ~ isolate token case 33: case 43: case 44: case 47: case 62: case 64: case 126: // ; { } breakpoint token case 59: case 123: case 125: return 4; // : accompanied token case 58: return 3; // " ' ( [ opening delimit token case 34: case 39: case 40: case 91: return 2; // ) ] closing delimit token case 41: case 93: return 1; } return 0; } function alloc(value) { return line = column = 1, length = strlen(characters = value), position = 0, []; } function dealloc(value) { return characters = "", value; } function delimit(type) { return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type))); } function whitespace(type) { for (; (character = peek()) && character < 33; ) next(); return token(type) > 2 || token(character) > 3 ? "" : " "; } function escaping(index, count) { for (; --count && next() && !(character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97); ) ; return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32)); } function delimiter(type) { for (; next(); ) switch (character) { // ] ) " ' case type: return position; // " ' case 34: case 39: type !== 34 && type !== 39 && delimiter(character); break; // ( case 40: type === 41 && delimiter(type); break; // \ case 92: next(); break; } return position; } function commenter(type, index) { for (; next() && type + character !== 57; ) if (type + character === 84 && peek() === 47) break; return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next()); } function identifier(index) { for (; !token(peek()); ) next(); return slice(index, position); } function compile(value) { return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value)); } function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) { for (var index = 0, offset = 0, length2 = pseudo, atrule = 0, property = 0, previous = 0, variable = 1, scanning = 1, ampersand = 1, character2 = 0, type = "", props = rules, children = rulesets, reference = rule, characters2 = type; scanning; ) switch (previous = character2, character2 = next()) { // ( case 40: if (previous != 108 && charat(characters2, length2 - 1) == 58) { indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f", abs(index ? points[index - 1] : 0)) != -1 && (ampersand = -1); break; } // " ' [ case 34: case 39: case 91: characters2 += delimit(character2); break; // \t \n \r \s case 9: case 10: case 13: case 32: characters2 += whitespace(previous); break; // \ case 92: characters2 += escaping(caret() - 1, 7); continue; // / case 47: switch (peek()) { case 42: case 47: append(comment(commenter(next(), caret()), root, parent, declarations), declarations); break; default: characters2 += "/"; } break; // { case 123 * variable: points[index++] = strlen(characters2) * ampersand; // } ; \0 case 125 * variable: case 59: case 0: switch (character2) { // \0 } case 0: case 125: scanning = 0; // ; case 59 + offset: ampersand == -1 && (characters2 = replace(characters2, /\f/g, "")), property > 0 && strlen(characters2) - length2 && append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1, declarations) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2, declarations), declarations); break; // @ ; case 59: characters2 += ";"; // { rule/at-rule default: if (append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2, rulesets), rulesets), character2 === 123) if (offset === 0) parse(characters2, root, reference, reference, props, rulesets, length2, points, children); else switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) { // d l m s case 100: case 108: case 109: case 115: parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2, children), children), rules, children, length2, points, rule ? props : children); break; default: parse(characters2, reference, reference, reference, [""], children, 0, points, children); } } index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo; break; // : case 58: length2 = 1 + strlen(characters2), property = previous; default: if (variable < 1) { if (character2 == 123) --variable; else if (character2 == 125 && variable++ == 0 && prev() == 125) continue; } switch (characters2 += from(character2), character2 * variable) { // & case 38: ampersand = offset > 0 ? 1 : (characters2 += "\f", -1); break; // , case 44: points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1; break; // @ case 64: peek() === 45 && (characters2 += delimit(next())), atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++; break; // - case 45: previous === 45 && strlen(characters2) == 2 && (variable = 0); } } return rulesets; } function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length2, siblings) { for (var post = offset - 1, rule = offset === 0 ? rules : [""], size = sizeof(rule), i = 0, j2 = 0, k2 = 0; i < index; ++i) for (var x2 = 0, y2 = substr(value, post + 1, post = abs(j2 = points[i])), z2 = value; x2 < size; ++x2) (z2 = trim(j2 > 0 ? rule[x2] + " " + y2 : replace(y2, /&\f/g, rule[x2]))) && (props[k2++] = z2); return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length2, siblings); } function comment(value, root, parent, siblings) { return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0, siblings); } function declaration(value, root, parent, length2, siblings) { return node(value, root, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2, siblings); } function prefix(value, length2, children) { switch (hash(value, length2)) { // color-adjust case 5103: return WEBKIT + "print-" + value + value; // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function) case 5737: case 4201: case 3177: case 3433: case 1641: case 4457: case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break case 5572: case 6356: case 5844: case 3191: case 6645: case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite, case 6391: case 5879: case 5623: case 6135: case 4599: case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width) case 4215: case 6389: case 5109: case 5365: case 5621: case 3829: return WEBKIT + value + value; // tab-size case 4789: return MOZ + value + value; // appearance, user-select, transform, hyphens, text-size-adjust case 5349: case 4246: case 4810: case 6968: case 2756: return WEBKIT + value + MOZ + value + MS + value + value; // writing-mode case 5936: switch (charat(value, length2 + 11)) { // vertical-l(r) case 114: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value; // vertical-r(l) case 108: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value; // horizontal(-)tb case 45: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value; } // flex, flex-direction, scroll-snap-type, writing-mode case 6828: case 4268: case 2903: return WEBKIT + value + MS + value + value; // order case 6165: return WEBKIT + value + MS + "flex-" + value + value; // align-items case 5187: return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value; // align-self case 5443: return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/g, "") + (match(value, /flex-|baseline/) ? "" : MS + "grid-row-" + replace(value, /flex-|-self/g, "")) + value; // align-content case 4675: return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/g, "") + value; // flex-shrink case 5548: return WEBKIT + value + MS + replace(value, "shrink", "negative") + value; // flex-basis case 5292: return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value; // flex-grow case 6060: return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value; // transition case 4554: return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value; // cursor case 6187: return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value; // background, background-image case 5495: case 3959: return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1"); // justify-content case 4968: return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value; // justify-self case 4200: if (!match(value, /flex-|baseline/)) return MS + "grid-column-align" + substr(value, length2) + value; break; // grid-template-(columns|rows) case 2592: case 3360: return MS + replace(value, "template-", "") + value; // grid-(row|column)-start case 4384: case 3616: return children && children.some(function(element, index) { return length2 = index, match(element.props, /grid-\w+-end/); }) ? ~indexof(value + (children = children[length2].value), "span", 0) ? value : MS + replace(value, "-start", "") + value + MS + "grid-row-span:" + (~indexof(children, "span", 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ";" : MS + replace(value, "-start", "") + value; // grid-(row|column)-end case 4896: case 4128: return children && children.some(function(element) { return match(element.props, /grid-\w+-start/); }) ? value : MS + replace(replace(value, "-end", "-span"), "span ", "") + value; // (margin|padding)-inline-(start|end) case 4095: case 3583: case 4068: case 2532: return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value; // (min|max)?(width|height|inline-size|block-size) case 8116: case 7059: case 5753: case 5535: case 5445: case 5701: case 4933: case 4677: case 5533: case 5789: case 5021: case 4765: if (strlen(value) - 1 - length2 > 6) switch (charat(value, length2 + 1)) { // (m)ax-content, (m)in-content case 109: if (charat(value, length2 + 4) !== 45) break; // (f)ill-available, (f)it-content case 102: return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value; // (s)tretch case 115: return ~indexof(value, "stretch", 0) ? prefix(replace(value, "stretch", "fill-available"), length2, children) + value : value; } break; // grid-(column|row) case 5152: case 5920: return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a, b, c, d, e, f2) { return MS + a + ":" + b + f2 + (c ? MS + a + "-span:" + (d ? e : +e - +b) + f2 : "") + value; }); // position: sticky case 4949: if (charat(value, length2 + 6) === 121) return replace(value, ":", ":" + WEBKIT) + value; break; // display: (flex|inline-flex|grid|inline-grid) case 6444: switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) { // (inline-)?fle(x) case 120: return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value; // (inline-)?gri(d) case 100: return replace(value, ":", ":" + MS) + value; } break; // scroll-margin, scroll-margin-(top|right|bottom|left) case 5719: case 2647: case 2135: case 3927: case 2391: return replace(value, "scroll-", "scroll-snap-") + value; } return value; } function serialize(children, callback) { for (var output = "", i = 0; i < children.length; i++) output += callback(children[i], i, children, callback) || ""; return output; } function stringify(element, index, children, callback) { switch (element.type) { case LAYER: if (element.children.length) break; case IMPORT: case DECLARATION: return element.return = element.return || element.value; case COMMENT: return ""; case KEYFRAMES: return element.return = element.value + "{" + serialize(element.children, callback) + "}"; case RULESET: if (!strlen(element.value = element.props.join(","))) return ""; } return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : ""; } function middleware(collection) { var length2 = sizeof(collection); return function(element, index, children, callback) { for (var output = "", i = 0; i < length2; i++) output += collection[i](element, index, children, callback) || ""; return output; }; } function rulesheet(callback) { return function(element) { element.root || (element = element.return) && callback(element); }; } function prefixer(element, index, children, callback) { if (element.length > -1 && !element.return) switch (element.type) { case DECLARATION: element.return = prefix(element.value, element.length, children); return; case KEYFRAMES: return serialize([copy(element, { value: replace(element.value, "@", "@" + WEBKIT) })], callback); case RULESET: if (element.length) return combine(children = element.props, function(value) { switch (match(value, callback = /(::plac\w+|:read-\w+)/)) { // :read-(only|write) case ":read-only": case ":read-write": lift(copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] })), lift(copy(element, { props: [value] })), assign(element, { props: filter(children, callback) }); break; // :placeholder case "::placeholder": lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] })), lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] })), lift(copy(element, { props: [replace(value, /:(plac\w+)/, MS + "input-$1")] })), lift(copy(element, { props: [value] })), assign(element, { props: filter(children, callback) }); break; } return ""; }); } } var unitlessKeys = { animationIterationCount: 1, aspectRatio: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1, boxOrdinalGroup: 1, columnCount: 1, columns: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1, gridRow: 1, gridRowEnd: 1, gridRowSpan: 1, gridRowStart: 1, gridColumn: 1, gridColumnEnd: 1, gridColumnSpan: 1, gridColumnStart: 1, msGridRow: 1, msGridRowSpan: 1, msGridColumn: 1, msGridColumnSpan: 1, fontWeight: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1, zIndex: 1, zoom: 1, WebkitLineClamp: 1, // SVG-related properties fillOpacity: 1, floodOpacity: 1, stopOpacity: 1, strokeDasharray: 1, strokeDashoffset: 1, strokeMiterlimit: 1, strokeOpacity: 1, strokeWidth: 1 }, f = typeof process < "u" && process.env !== void 0 && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled", m = "active", y = "data-styled-version", v = "6.1.13", g = `/*!sc*/ `, S = typeof window < "u" && "HTMLElement" in window, w = !!(typeof SC_DISABLE_SPEEDY == "boolean" ? SC_DISABLE_SPEEDY : typeof process < "u" && process.env !== void 0 && process.env.REACT_APP_SC_DISABLE_SPEEDY !== void 0 && process.env.REACT_APP_SC_DISABLE_SPEEDY !== "" ? process.env.REACT_APP_SC_DISABLE_SPEEDY !== "false" && process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process < "u" && process.env !== void 0 && process.env.SC_DISABLE_SPEEDY !== void 0 && process.env.SC_DISABLE_SPEEDY !== "" ? process.env.SC_DISABLE_SPEEDY !== "false" && process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== "production"), E = /invalid hook call/i, N = /* @__PURE__ */ new Set(), P = function(t, n) { if (process.env.NODE_ENV !== "production") { var r$1 = n ? ' with the id of "'.concat(n, '"') : "", s = "The component ".concat(t).concat(r$1, ` has been created dynamically. `) + `You may see this warning because you've called styled inside another component. To resolve this only create new StyledComponents outside of any render method and function component.`, i = console.error; try { var a = !0; console.error = function(t2) { for (var n2 = [], r2 = 1; r2 < arguments.length; r2++) n2[r2 - 1] = arguments[r2]; E.test(t2) ? (a = !1, N.delete(s)) : i.apply(void 0, __spreadArray([t2], n2, !1)); }, r.useRef(), a && !N.has(s) && (console.warn(s), N.add(s)); } catch (e) { E.test(e.message) && N.delete(s); } finally { console.error = i; } } }, _ = Object.freeze([]), C = Object.freeze({}); function I(e, t, n) { return n === void 0 && (n = C), e.theme !== n.theme && e.theme || t || n.theme; } var A = /* @__PURE__ */ new Set(["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "u", "ul", "use", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "text", "tspan"]), O = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g, D = /(^-|-$)/g; function R(e) { return e.replace(O, "-").replace(D, ""); } var T = /(a)(d)/gi, k = 52, j = function(e) { return String.fromCharCode(e + (e > 25 ? 39 : 97)); }; function x(e) { var t, n = ""; for (t = Math.abs(e); t > k; t = t / k | 0) n = j(t % k) + n; return (j(t % k) + n).replace(T, "$1-$2"); } var V, F = 5381, M = function(e, t) { for (var n = t.length; n; ) e = 33 * e ^ t.charCodeAt(--n); return e; }, z = function(e) { return M(F, e); }; function $(e) { return x(z(e) >>> 0); } function B(e) { return process.env.NODE_ENV !== "production" && typeof e == "string" && e || e.displayName || e.name || "Component"; } function L(e) { return typeof e == "string" && (process.env.NODE_ENV === "production" || e.charAt(0) === e.charAt(0).toLowerCase()); } var G = typeof Symbol == "function" && Symbol.for, Y = G ? Symbol.for("react.memo") : 60115, q = G ? Symbol.for("react.forward_ref") : 60112, W = { childContextTypes: !0, contextType: !0, contextTypes: !0, defaultProps: !0, displayName: !0, getDefaultProps: !0, getDerivedStateFromError: !0, getDerivedStateFromProps: !0, mixins: !0, propTypes: !0, type: !0 }, H = { name: !0, length: !0, prototype: !0, caller: !0, callee: !0, arguments: !0, arity: !0 }, U = { $$typeof: !0, compare: !0, defaultProps: !0, displayName: !0, propTypes: !0, type: !0 }, J = ((V = {})[q] = { $$typeof: !0, render: !0, defaultProps: !0, displayName: !0, propTypes: !0 }, V[Y] = U, V); function X(e) { return ("type" in (t = e) && t.type.$$typeof) === Y ? U : "$$typeof" in e ? J[e.$$typeof] : W; var t; } var Z = Object.defineProperty, K = Object.getOwnPropertyNames, Q = Object.getOwnPropertySymbols, ee = Object.getOwnPropertyDescriptor, te = Object.getPrototypeOf, ne = Object.prototype; function re(e, t, n) { if (typeof t != "string") { if (ne) { var r2 = te(t); r2 && r2 !== ne && re(e, r2, n); } var o = K(t); Q && (o = o.concat(Q(t))); for (var s = X(e), i = X(t), a = 0; a < o.length; ++a) { var c = o[a]; if (!(c in H || n && n[c] || i && c in i || s && c in s)) { var l = ee(t, c); try { Z(e, c, l); } catch { } } } } return e; } function oe(e) { return typeof e == "function"; } function se(e) { return typeof e == "object" && "styledComponentId" in e; } function ie(e, t) { return e && t ? "".concat(e, " ").concat(t) : e || t || ""; } function ae(e, t) { if (e.length === 0) return ""; for (var n = e[0], r2 = 1; r2 < e.length; r2++) n += e[r2]; return n; } function ce(e) { return e !== null && typeof e == "object" && e.constructor.name === Object.name && !("props" in e && e.$$typeof); } function le(e, t, n) { if (n === void 0 && (n = !1), !n && !ce(e) && !Array.isArray(e)) return t; if (Array.isArray(t)) for (var r2 = 0; r2 < t.length; r2++) e[r2] = le(e[r2], t[r2]); else if (ce(t)) for (var r2 in t) e[r2] = le(e[r2], t[r2]); return e; } function ue(e, t) { Object.defineProperty(e, "toString", { value: t }); } var pe = process.env.NODE_ENV !== "production" ? { 1: `Cannot create styled-component for component: %s. `, 2: `Can't collect styles once you've consumed a \`ServerStyleSheet\`'s styles! \`ServerStyleSheet\` is a one off instance for each server-side render cycle. - Are you trying to reuse it across renders? - Are you accidentally calling collectStyles twice? `, 3: `Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser. `, 4: `The \`StyleSheetManager\` expects a valid target or sheet prop! - Does this error occur on the client and is your target falsy? - Does this error occur on the server and is the sheet falsy? `, 5: `The clone method cannot be used on the client! - Are you running in a client-like environment on the server? - Are you trying to run SSR on the client? `, 6: `Trying to insert a new style tag, but the given Node is unmounted! - Are you using a custom target that isn't mounted? - Does your document not have a valid head element? - Have you accidentally removed a style tag manually? `, 7: 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n', 8: `ThemeProvider: Please make your "theme" prop an object. `, 9: "Missing document `<head>`\n\n", 10: `Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021 `, 11: `_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements. `, 12: "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n", 13: `%s 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. `, 14: `ThemeProvider: "theme" prop is required. `, 15: "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n", 16: `Reached the limit of how many styled components may be created at group %s. You may only create up to 1,073,741,824 components. If you're creating components dynamically, as for instance in your render method then you may be running into this limitation. `, 17: `CSSStyleSheet could not be found on HTMLStyleElement. Has styled-components' style tag been unmounted or altered by another script? `, 18: "ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`" } : {}; function de() { for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; for (var n = e[0], r2 = [], o = 1, s = e.length; o < s; o += 1) r2.push(e[o]); return r2.forEach(function(e2) { n = n.replace(/%[a-z]/, e2); }), n; } function he(t) { for (var n = [], r2 = 1; r2 < arguments.length; r2++) n[r2 - 1] = arguments[r2]; return process.env.NODE_ENV === "production" ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(de.apply(void 0, __spreadArray([pe[t]], n, !1)).trim()); } var fe = function() { function e(e2) { this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e2; } return e.prototype.indexOfGroup = function(e2) { for (var t = 0, n = 0; n < e2; n++) t += this.groupSizes[n]; return t; }, e.prototype.insertRules = function(e2, t) { if (e2 >= this.groupSizes.length) { for (var n = this.groupSizes, r2 = n.length, o = r2; e2 >= o; ) if ((o <<= 1) < 0) throw he(16, "".concat(e2)); this.groupSizes = new Uint32Array(o), this.groupSizes.set(n), this.length = o; for (var s = r2; s < o; s++) this.groupSizes[s] = 0; } for (var i = this.indexOfGroup(e2 + 1), a = (s = 0, t.length); s < a; s++) this.tag.insertRule(i, t[s]) && (this.groupSizes[e2]++, i++); }, e.prototype.clearGroup = function(e2) { if (e2 < this.length) { var t = this.groupSizes[e2], n = this.indexOfGroup(e2), r2 = n + t; this.groupSizes[e2] = 0; for (var o = n; o < r2; o++) this.tag.deleteRule(n); } }, e.prototype.getGroup = function(e2) { var t = ""; if (e2 >= this.length || this.groupSizes[e2] === 0) return t; for (var n = this.groupSizes