UNPKG

@adyen/kyc-components

Version:

`adyen-kyc-components` provides the required pieces to build an onboarding flow based on a legal entity. To onboard and verify users, you need to create a user interface (UI) to collect user data. To speed up building your integration, Adyen offers onboar

1,788 lines 437 kB
var __defProp = Object.defineProperty; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); import { b as createContext, d as createSignal, o as onMount, e as createEffect, c as createMemo, a as createComponent, P as Portal, S as Show, t as template, i as insert, f as createRenderEffect, h as className, j as clearDelegatedEvents, k as delegateEvents, u as useContext, l as onCleanup, s as sortFns, m as mutationSortFns, n as on, p as setAttribute, q as getSidedProp, r as use, v as createUniqueId, w as batch, x as getQueryStatusLabel, y as getMutationStatusColor, z as getQueryStatusColor, A as getQueryStatusColorByLabel, B as displayValue, F as For, C as convertRemToPixels, D as untrack, $ as $TRACK, E as useTransition, G as spread, H as mergeProps, I as createRoot, J as serialize, K as Index, L as updateNestedDataByPath, M as addEventListener, N as stringify, O as Match, Q as Switch, R as deleteNestedDataByPath, T as splitProps, U as Dynamic, V as createComputed } from "./index-SiHtDC7u.js"; var isNonNullable = (i2) => i2 != null; var filterNonNullable = (arr) => arr.filter(isNonNullable); function chain(callbacks) { return (...args) => { for (const callback of callbacks) callback && callback(...args); }; } var access = (v) => typeof v === "function" && !v.length ? v() : v; var asArray = (value) => Array.isArray(value) ? value : value ? [value] : []; function accessWith(valueOrFn, ...args) { return typeof valueOrFn === "function" ? valueOrFn(...args) : valueOrFn; } var tryOnCleanup = onCleanup; function handleDiffArray(current, prev, handleAdded, handleRemoved) { const currLength = current.length; const prevLength = prev.length; let i2 = 0; if (!prevLength) { for (; i2 < currLength; i2++) handleAdded(current[i2]); return; } if (!currLength) { for (; i2 < prevLength; i2++) handleRemoved(prev[i2]); return; } for (; i2 < prevLength; i2++) { if (prev[i2] !== current[i2]) break; } let prevEl; let currEl; prev = prev.slice(i2); current = current.slice(i2); for (prevEl of prev) { if (!current.includes(prevEl)) handleRemoved(prevEl); } for (currEl of current) { if (!prev.includes(currEl)) handleAdded(currEl); } } function createStorage(props) { const [error, setError] = createSignal(); const handleError = (props == null ? void 0 : props.throw) ? (err, fallback) => { setError(err instanceof Error ? err : new Error(fallback)); throw err; } : (err, fallback) => { setError(err instanceof Error ? err : new Error(fallback)); }; const apis = (props == null ? void 0 : props.api) ? Array.isArray(props.api) ? props.api : [props.api] : [globalThis.localStorage].filter(Boolean); const prefix = (props == null ? void 0 : props.prefix) ? `${props.prefix}.` : ""; const signals = /* @__PURE__ */ new Map(); const store = new Proxy( {}, { get(_, key) { let node = signals.get(key); if (!node) { node = createSignal(void 0, { equals: false }); signals.set(key, node); } node[0](); const value = apis.reduce( (result, api) => { if (result !== null || !api) { return result; } try { return api.getItem(`${prefix}${key}`); } catch (err) { handleError(err, `Error reading ${prefix}${key} from ${api["name"]}`); return null; } }, null ); if (value !== null && (props == null ? void 0 : props.deserializer)) { return props.deserializer(value, key, props.options); } return value; } } ); const setter = (key, value, options) => { const filteredValue = (props == null ? void 0 : props.serializer) ? props.serializer(value, key, options ?? props.options) : value; const apiKey = `${prefix}${key}`; apis.forEach((api) => { try { api.getItem(apiKey) !== filteredValue && api.setItem(apiKey, filteredValue); } catch (err) { handleError(err, `Error setting ${prefix}${key} to ${filteredValue} in ${api.name}`); } }); const node = signals.get(key); node && node[1](); }; const remove = (key) => apis.forEach((api) => { try { api.removeItem(`${prefix}${key}`); } catch (err) { handleError(err, `Error removing ${prefix}${key} from ${api.name}`); } }); const clear = () => apis.forEach((api) => { try { api.clear(); } catch (err) { handleError(err, `Error clearing ${api.name}`); } }); const toJSON = () => { const result = {}; const addValue = (key, value) => { if (!result.hasOwnProperty(key)) { const filteredValue = value && (props == null ? void 0 : props.deserializer) ? props.deserializer(value, key, props.options) : value; if (filteredValue) { result[key] = filteredValue; } } }; apis.forEach((api) => { if (typeof api.getAll === "function") { let values; try { values = api.getAll(); } catch (err) { handleError(err, `Error getting all values from in ${api.name}`); } for (const key of values) { addValue(key, values[key]); } } else { let index = 0, key; try { while (key = api.key(index++)) { if (!result.hasOwnProperty(key)) { addValue(key, api.getItem(key)); } } } catch (err) { handleError(err, `Error getting all values from ${api.name}`); } } }); return result; }; (props == null ? void 0 : props.sync) !== false && onMount(() => { const listener = (ev) => { var _a; let changed = false; apis.forEach((api) => { try { if (api !== ev.storageArea && ev.key && ev.newValue !== api.getItem(ev.key)) { ev.newValue ? api.setItem(ev.key, ev.newValue) : api.removeItem(ev.key); changed = true; } } catch (err) { handleError( err, `Error synching api ${api.name} from storage event (${ev.key}=${ev.newValue})` ); } }); changed && ev.key && ((_a = signals.get(ev.key)) == null ? void 0 : _a[1]()); }; if ("addEventListener" in globalThis) { globalThis.addEventListener("storage", listener); onCleanup(() => globalThis.removeEventListener("storage", listener)); } else { apis.forEach((api) => { var _a; return (_a = api.addEventListener) == null ? void 0 : _a.call(api, "storage", listener); }); onCleanup(() => apis.forEach((api) => { var _a; return (_a = api.removeEventListener) == null ? void 0 : _a.call(api, "storage", listener); })); } }); return [ store, setter, { clear, error, remove, toJSON } ]; } var createLocalStorage = createStorage; var addClearMethod = (storage) => { if (typeof storage.clear === "function") { return storage; } storage.clear = () => { let key; while (key = storage.key(0)) { storage.removeItem(key); } }; return storage; }; var serializeCookieOptions = (options) => { if (!options) { return ""; } let memo = ""; for (const key in options) { if (!options.hasOwnProperty(key)) { continue; } const value = options[key]; memo += value instanceof Date ? `; ${key}=${value.toUTCString()}` : typeof value === "boolean" ? `; ${key}` : `; ${key}=${value}`; } return memo; }; var cookieStorage = addClearMethod({ _cookies: [globalThis.document, "cookie"], getItem: (key) => { var _a; return ((_a = cookieStorage._cookies[0][cookieStorage._cookies[1]].match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)")) == null ? void 0 : _a.pop()) ?? null; }, setItem: (key, value, options) => { const oldValue = cookieStorage.getItem(key); cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=${value}${serializeCookieOptions( options )}`; const storageEvent = Object.assign(new Event("storage"), { key, oldValue, newValue: value, url: globalThis.document.URL, storageArea: cookieStorage }); window.dispatchEvent(storageEvent); }, removeItem: (key) => { cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=deleted${serializeCookieOptions({ expires: /* @__PURE__ */ new Date(0) })}`; }, key: (index) => { let key = null; let count = 0; cookieStorage._cookies[0][cookieStorage._cookies[1]].replace( /(?:^|;)\s*(.+?)\s*=\s*[^;]+/g, (_, found) => { if (!key && found && count++ === index) { key = found; } return ""; } ); return key; }, get length() { let length = 0; cookieStorage._cookies[0][cookieStorage._cookies[1]].replace( /(?:^|;)\s*.+?\s*=\s*[^;]+/g, (found) => { length += found ? 1 : 0; return ""; } ); return length; } }); var firstBreakpoint = 1024; var secondBreakpoint = 796; var thirdBreakpoint = 700; var BUTTON_POSITION = "bottom-right"; var POSITION = "bottom"; var THEME_PREFERENCE = "system"; var INITIAL_IS_OPEN = false; var DEFAULT_HEIGHT = 500; var PIP_DEFAULT_HEIGHT = 500; var DEFAULT_WIDTH = 500; var DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0]; var DEFAULT_SORT_ORDER = 1; var DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0]; var QueryDevtoolsContext = createContext({ client: void 0, onlineManager: void 0, queryFlavor: "", version: "", shadowDOMTarget: void 0 }); function useQueryDevtoolsContext() { return useContext(QueryDevtoolsContext); } var PiPContext = createContext(void 0); var PiPProvider = (props) => { const [pipWindow, setPipWindow] = createSignal(null); const closePipWindow = () => { const w = pipWindow(); if (w != null) { w.close(); setPipWindow(null); } }; const requestPipWindow = (width, height) => { if (pipWindow() != null) { return; } const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`); if (!pip) { throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode."); } pip.document.head.innerHTML = ""; pip.document.body.innerHTML = ""; clearDelegatedEvents(pip.document); pip.document.title = "TanStack Query Devtools"; pip.document.body.style.margin = "0"; pip.addEventListener("pagehide", () => { props.setLocalStore("pip_open", "false"); setPipWindow(null); }); [...(useQueryDevtoolsContext().shadowDOMTarget || document).styleSheets].forEach((styleSheet) => { try { const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join(""); const style = document.createElement("style"); const style_node = styleSheet.ownerNode; let style_id = ""; if (style_node && "id" in style_node) { style_id = style_node.id; } if (style_id) { style.setAttribute("id", style_id); } style.textContent = cssRules; pip.document.head.appendChild(style); } catch (e2) { const link = document.createElement("link"); if (styleSheet.href == null) { return; } link.rel = "stylesheet"; link.type = styleSheet.type; link.media = styleSheet.media.toString(); link.href = styleSheet.href; pip.document.head.appendChild(link); } }); delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document); props.setLocalStore("pip_open", "true"); setPipWindow(pip); }; createEffect(() => { const pip_open = props.localStore.pip_open ?? "false"; if (pip_open === "true" && !props.disabled) { requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT)); } }); createEffect(() => { const gooberStyles = (useQueryDevtoolsContext().shadowDOMTarget || document).querySelector("#_goober"); const w = pipWindow(); if (gooberStyles && w) { const observer = new MutationObserver(() => { const pip_style = (useQueryDevtoolsContext().shadowDOMTarget || w.document).querySelector("#_goober"); if (pip_style) { pip_style.textContent = gooberStyles.textContent; } }); observer.observe(gooberStyles, { childList: true, // observe direct children subtree: true, // and lower descendants too characterDataOldValue: true // pass old data to callback }); onCleanup(() => { observer.disconnect(); }); } }); const value = createMemo(() => ({ pipWindow: pipWindow(), requestPipWindow, closePipWindow, disabled: props.disabled ?? false })); return createComponent(PiPContext.Provider, { value, get children() { return props.children; } }); }; var usePiPWindow = () => { const context = createMemo(() => { const ctx = useContext(PiPContext); if (!ctx) { throw new Error("usePiPWindow must be used within a PiPProvider"); } return ctx(); }); return context; }; var ThemeContext = createContext( () => "dark" ); function useTheme() { return useContext(ThemeContext); } var characterMap = { À: "A", Á: "A", Â: "A", Ã: "A", Ä: "A", Å: "A", Ấ: "A", Ắ: "A", Ẳ: "A", Ẵ: "A", Ặ: "A", Æ: "AE", Ầ: "A", Ằ: "A", Ȃ: "A", Ç: "C", Ḉ: "C", È: "E", É: "E", Ê: "E", Ë: "E", Ế: "E", Ḗ: "E", Ề: "E", Ḕ: "E", Ḝ: "E", Ȇ: "E", Ì: "I", Í: "I", Î: "I", Ï: "I", Ḯ: "I", Ȋ: "I", Ð: "D", Ñ: "N", Ò: "O", Ó: "O", Ô: "O", Õ: "O", Ö: "O", Ø: "O", Ố: "O", Ṍ: "O", Ṓ: "O", Ȏ: "O", Ù: "U", Ú: "U", Û: "U", Ü: "U", Ý: "Y", à: "a", á: "a", â: "a", ã: "a", ä: "a", å: "a", ấ: "a", ắ: "a", ẳ: "a", ẵ: "a", ặ: "a", æ: "ae", ầ: "a", ằ: "a", ȃ: "a", ç: "c", ḉ: "c", è: "e", é: "e", ê: "e", ë: "e", ế: "e", ḗ: "e", ề: "e", ḕ: "e", ḝ: "e", ȇ: "e", ì: "i", í: "i", î: "i", ï: "i", ḯ: "i", ȋ: "i", ð: "d", ñ: "n", ò: "o", ó: "o", ô: "o", õ: "o", ö: "o", ø: "o", ố: "o", ṍ: "o", ṓ: "o", ȏ: "o", ù: "u", ú: "u", û: "u", ü: "u", ý: "y", ÿ: "y", Ā: "A", ā: "a", Ă: "A", ă: "a", Ą: "A", ą: "a", Ć: "C", ć: "c", Ĉ: "C", ĉ: "c", Ċ: "C", ċ: "c", Č: "C", č: "c", C̆: "C", c̆: "c", Ď: "D", ď: "d", Đ: "D", đ: "d", Ē: "E", ē: "e", Ĕ: "E", ĕ: "e", Ė: "E", ė: "e", Ę: "E", ę: "e", Ě: "E", ě: "e", Ĝ: "G", Ǵ: "G", ĝ: "g", ǵ: "g", Ğ: "G", ğ: "g", Ġ: "G", ġ: "g", Ģ: "G", ģ: "g", Ĥ: "H", ĥ: "h", Ħ: "H", ħ: "h", Ḫ: "H", ḫ: "h", Ĩ: "I", ĩ: "i", Ī: "I", ī: "i", Ĭ: "I", ĭ: "i", Į: "I", į: "i", İ: "I", ı: "i", IJ: "IJ", ij: "ij", Ĵ: "J", ĵ: "j", Ķ: "K", ķ: "k", Ḱ: "K", ḱ: "k", K̆: "K", k̆: "k", Ĺ: "L", ĺ: "l", Ļ: "L", ļ: "l", Ľ: "L", ľ: "l", Ŀ: "L", ŀ: "l", Ł: "l", ł: "l", Ḿ: "M", ḿ: "m", M̆: "M", m̆: "m", Ń: "N", ń: "n", Ņ: "N", ņ: "n", Ň: "N", ň: "n", ʼn: "n", N̆: "N", n̆: "n", Ō: "O", ō: "o", Ŏ: "O", ŏ: "o", Ő: "O", ő: "o", Œ: "OE", œ: "oe", P̆: "P", p̆: "p", Ŕ: "R", ŕ: "r", Ŗ: "R", ŗ: "r", Ř: "R", ř: "r", R̆: "R", r̆: "r", Ȓ: "R", ȓ: "r", Ś: "S", ś: "s", Ŝ: "S", ŝ: "s", Ş: "S", Ș: "S", ș: "s", ş: "s", Š: "S", š: "s", Ţ: "T", ţ: "t", ț: "t", Ț: "T", Ť: "T", ť: "t", Ŧ: "T", ŧ: "t", T̆: "T", t̆: "t", Ũ: "U", ũ: "u", Ū: "U", ū: "u", Ŭ: "U", ŭ: "u", Ů: "U", ů: "u", Ű: "U", ű: "u", Ų: "U", ų: "u", Ȗ: "U", ȗ: "u", V̆: "V", v̆: "v", Ŵ: "W", ŵ: "w", Ẃ: "W", ẃ: "w", X̆: "X", x̆: "x", Ŷ: "Y", ŷ: "y", Ÿ: "Y", Y̆: "Y", y̆: "y", Ź: "Z", ź: "z", Ż: "Z", ż: "z", Ž: "Z", ž: "z", ſ: "s", ƒ: "f", Ơ: "O", ơ: "o", Ư: "U", ư: "u", Ǎ: "A", ǎ: "a", Ǐ: "I", ǐ: "i", Ǒ: "O", ǒ: "o", Ǔ: "U", ǔ: "u", Ǖ: "U", ǖ: "u", Ǘ: "U", ǘ: "u", Ǚ: "U", ǚ: "u", Ǜ: "U", ǜ: "u", Ứ: "U", ứ: "u", Ṹ: "U", ṹ: "u", Ǻ: "A", ǻ: "a", Ǽ: "AE", ǽ: "ae", Ǿ: "O", ǿ: "o", Þ: "TH", þ: "th", Ṕ: "P", ṕ: "p", Ṥ: "S", ṥ: "s", X́: "X", x́: "x", Ѓ: "Г", ѓ: "г", Ќ: "К", ќ: "к", A̋: "A", a̋: "a", E̋: "E", e̋: "e", I̋: "I", i̋: "i", Ǹ: "N", ǹ: "n", Ồ: "O", ồ: "o", Ṑ: "O", ṑ: "o", Ừ: "U", ừ: "u", Ẁ: "W", ẁ: "w", Ỳ: "Y", ỳ: "y", Ȁ: "A", ȁ: "a", Ȅ: "E", ȅ: "e", Ȉ: "I", ȉ: "i", Ȍ: "O", ȍ: "o", Ȑ: "R", ȑ: "r", Ȕ: "U", ȕ: "u", B̌: "B", b̌: "b", Č̣: "C", č̣: "c", Ê̌: "E", ê̌: "e", F̌: "F", f̌: "f", Ǧ: "G", ǧ: "g", Ȟ: "H", ȟ: "h", J̌: "J", ǰ: "j", Ǩ: "K", ǩ: "k", M̌: "M", m̌: "m", P̌: "P", p̌: "p", Q̌: "Q", q̌: "q", Ř̩: "R", ř̩: "r", Ṧ: "S", ṧ: "s", V̌: "V", v̌: "v", W̌: "W", w̌: "w", X̌: "X", x̌: "x", Y̌: "Y", y̌: "y", A̧: "A", a̧: "a", B̧: "B", b̧: "b", Ḑ: "D", ḑ: "d", Ȩ: "E", ȩ: "e", Ɛ̧: "E", ɛ̧: "e", Ḩ: "H", ḩ: "h", I̧: "I", i̧: "i", Ɨ̧: "I", ɨ̧: "i", M̧: "M", m̧: "m", O̧: "O", o̧: "o", Q̧: "Q", q̧: "q", U̧: "U", u̧: "u", X̧: "X", x̧: "x", Z̧: "Z", z̧: "z" }; var chars = Object.keys(characterMap).join("|"); var allAccents = new RegExp(chars, "g"); function removeAccents(str) { return str.replace(allAccents, (match) => { return characterMap[match]; }); } var rankings = { CASE_SENSITIVE_EQUAL: 7, EQUAL: 6, STARTS_WITH: 5, WORD_STARTS_WITH: 4, CONTAINS: 3, ACRONYM: 2, MATCHES: 1, NO_MATCH: 0 }; function rankItem(item, value, options) { var _options$threshold; options = options || {}; options.threshold = (_options$threshold = options.threshold) != null ? _options$threshold : rankings.MATCHES; if (!options.accessors) { const rank = getMatchRanking(item, value, options); return { // ends up being duplicate of 'item' in matches but consistent rankedValue: item, rank, accessorIndex: -1, accessorThreshold: options.threshold, passed: rank >= options.threshold }; } const valuesToRank = getAllValuesToRank(item, options.accessors); const rankingInfo = { rankedValue: item, rank: rankings.NO_MATCH, accessorIndex: -1, accessorThreshold: options.threshold, passed: false }; for (let i2 = 0; i2 < valuesToRank.length; i2++) { const rankValue = valuesToRank[i2]; let newRank = getMatchRanking(rankValue.itemValue, value, options); const { minRanking, maxRanking, threshold = options.threshold } = rankValue.attributes; if (newRank < minRanking && newRank >= rankings.MATCHES) { newRank = minRanking; } else if (newRank > maxRanking) { newRank = maxRanking; } newRank = Math.min(newRank, maxRanking); if (newRank >= threshold && newRank > rankingInfo.rank) { rankingInfo.rank = newRank; rankingInfo.passed = true; rankingInfo.accessorIndex = i2; rankingInfo.accessorThreshold = threshold; rankingInfo.rankedValue = rankValue.itemValue; } } return rankingInfo; } function getMatchRanking(testString, stringToRank, options) { testString = prepareValueForComparison(testString, options); stringToRank = prepareValueForComparison(stringToRank, options); if (stringToRank.length > testString.length) { return rankings.NO_MATCH; } if (testString === stringToRank) { return rankings.CASE_SENSITIVE_EQUAL; } testString = testString.toLowerCase(); stringToRank = stringToRank.toLowerCase(); if (testString === stringToRank) { return rankings.EQUAL; } if (testString.startsWith(stringToRank)) { return rankings.STARTS_WITH; } if (testString.includes(` ${stringToRank}`)) { return rankings.WORD_STARTS_WITH; } if (testString.includes(stringToRank)) { return rankings.CONTAINS; } else if (stringToRank.length === 1) { return rankings.NO_MATCH; } if (getAcronym(testString).includes(stringToRank)) { return rankings.ACRONYM; } return getClosenessRanking(testString, stringToRank); } function getAcronym(string) { let acronym = ""; const wordsInString = string.split(" "); wordsInString.forEach((wordInString) => { const splitByHyphenWords = wordInString.split("-"); splitByHyphenWords.forEach((splitByHyphenWord) => { acronym += splitByHyphenWord.substr(0, 1); }); }); return acronym; } function getClosenessRanking(testString, stringToRank) { let matchingInOrderCharCount = 0; let charNumber = 0; function findMatchingCharacter(matchChar, string, index) { for (let j = index, J = string.length; j < J; j++) { const stringChar = string[j]; if (stringChar === matchChar) { matchingInOrderCharCount += 1; return j + 1; } } return -1; } function getRanking(spread3) { const spreadPercentage = 1 / spread3; const inOrderPercentage = matchingInOrderCharCount / stringToRank.length; const ranking = rankings.MATCHES + inOrderPercentage * spreadPercentage; return ranking; } const firstIndex = findMatchingCharacter(stringToRank[0], testString, 0); if (firstIndex < 0) { return rankings.NO_MATCH; } charNumber = firstIndex; for (let i2 = 1, I = stringToRank.length; i2 < I; i2++) { const matchChar = stringToRank[i2]; charNumber = findMatchingCharacter(matchChar, testString, charNumber); const found = charNumber > -1; if (!found) { return rankings.NO_MATCH; } } const spread2 = charNumber - firstIndex; return getRanking(spread2); } function prepareValueForComparison(value, _ref) { let { keepDiacritics } = _ref; value = `${value}`; if (!keepDiacritics) { value = removeAccents(value); } return value; } function getItemValues(item, accessor) { let accessorFn = accessor; if (typeof accessor === "object") { accessorFn = accessor.accessor; } const value = accessorFn(item); if (value == null) { return []; } if (Array.isArray(value)) { return value; } return [String(value)]; } function getAllValuesToRank(item, accessors) { const allValues = []; for (let j = 0, J = accessors.length; j < J; j++) { const accessor = accessors[j]; const attributes = getAccessorAttributes(accessor); const itemValues = getItemValues(item, accessor); for (let i2 = 0, I = itemValues.length; i2 < I; i2++) { allValues.push({ itemValue: itemValues[i2], attributes }); } } return allValues; } var defaultKeyAttributes = { maxRanking: Infinity, minRanking: -Infinity }; function getAccessorAttributes(accessor) { if (typeof accessor === "function") { return defaultKeyAttributes; } return { ...defaultKeyAttributes, ...accessor }; } var e = { data: "" }; var t = (t2) => "object" == typeof window ? ((t2 ? t2.querySelector("#_goober") : window._goober) || Object.assign((t2 || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t2 || e; var l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g; var a = /\/\*[^]*?\*\/| +/g; var n = /\n+/g; var o = (e2, t2) => { let r2 = "", l2 = "", a2 = ""; for (let n2 in e2) { let c2 = e2[n2]; "@" == n2[0] ? "i" == n2[1] ? r2 = n2 + " " + c2 + ";" : l2 += "f" == n2[1] ? o(c2, n2) : n2 + "{" + o(c2, "k" == n2[1] ? "" : t2) + "}" : "object" == typeof c2 ? l2 += o(c2, t2 ? t2.replace(/([^,])+/g, (e3) => n2.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (t3) => /&/.test(t3) ? t3.replace(/&/g, e3) : e3 ? e3 + " " + t3 : t3)) : n2) : null != c2 && (n2 = /^--/.test(n2) ? n2 : n2.replace(/[A-Z]/g, "-$&").toLowerCase(), a2 += o.p ? o.p(n2, c2) : n2 + ":" + c2 + ";"); } return r2 + (t2 && a2 ? t2 + "{" + a2 + "}" : a2) + l2; }; var c = {}; var s = (e2) => { if ("object" == typeof e2) { let t2 = ""; for (let r2 in e2) t2 += r2 + s(e2[r2]); return t2; } return e2; }; var i = (e2, t2, r2, i2, p2) => { let u2 = s(e2), d = c[u2] || (c[u2] = ((e3) => { let t3 = 0, r3 = 11; for (; t3 < e3.length; ) r3 = 101 * r3 + e3.charCodeAt(t3++) >>> 0; return "go" + r3; })(u2)); if (!c[d]) { let t3 = u2 !== e2 ? e2 : ((e3) => { let t4, r3, o2 = [{}]; for (; t4 = l.exec(e3.replace(a, "")); ) t4[4] ? o2.shift() : t4[3] ? (r3 = t4[3].replace(n, " ").trim(), o2.unshift(o2[0][r3] = o2[0][r3] || {})) : o2[0][t4[1]] = t4[2].replace(n, " ").trim(); return o2[0]; })(e2); c[d] = o(p2 ? { ["@keyframes " + d]: t3 } : t3, r2 ? "" : "." + d); } let f = r2 && c.g ? c.g : null; return r2 && (c.g = c[d]), ((e3, t3, r3, l2) => { l2 ? t3.data = t3.data.replace(l2, e3) : -1 === t3.data.indexOf(e3) && (t3.data = r3 ? e3 + t3.data : t3.data + e3); })(c[d], t2, i2, f), d; }; var p = (e2, t2, r2) => e2.reduce((e3, l2, a2) => { let n2 = t2[a2]; if (n2 && n2.call) { let e4 = n2(r2), t3 = e4 && e4.props && e4.props.className || /^go/.test(e4) && e4; n2 = t3 ? "." + t3 : e4 && "object" == typeof e4 ? e4.props ? "" : o(e4, "") : false === e4 ? "" : e4; } return e3 + l2 + (null == n2 ? "" : n2); }, ""); function u(e2) { let r2 = this || {}, l2 = e2.call ? e2(r2.p) : e2; return i(l2.unshift ? l2.raw ? p(l2, [].slice.call(arguments, 1), r2.p) : l2.reduce((e3, t2) => Object.assign(e3, t2 && t2.call ? t2(r2.p) : t2), {}) : l2, t(r2.target), r2.g, r2.o, r2.k); } u.bind({ g: 1 }); u.bind({ k: 1 }); function r(e2) { var t2, f, n2 = ""; if ("string" == typeof e2 || "number" == typeof e2) n2 += e2; else if ("object" == typeof e2) if (Array.isArray(e2)) { var o2 = e2.length; for (t2 = 0; t2 < o2; t2++) e2[t2] && (f = r(e2[t2])) && (n2 && (n2 += " "), n2 += f); } else for (f in e2) e2[f] && (n2 && (n2 += " "), n2 += f); return n2; } function clsx() { for (var e2, t2, f = 0, n2 = "", o2 = arguments.length; f < o2; f++) (e2 = arguments[f]) && (t2 = r(e2)) && (n2 && (n2 += " "), n2 += t2); return n2; } function createListTransition(source, options) { const initSource = untrack(source); const { onChange } = options; let prevSet = new Set(options.appear ? void 0 : initSource); const exiting = /* @__PURE__ */ new WeakSet(); const [toRemove, setToRemove] = createSignal([], { equals: false }); const [isTransitionPending] = useTransition(); const finishRemoved = (els) => { setToRemove((p2) => (p2.push.apply(p2, els), p2)); for (const el of els) exiting.delete(el); }; const handleRemoved = (els, el, i2) => els.splice(i2, 0, el); return createMemo( (prev) => { const elsToRemove = toRemove(); const sourceList = source(); sourceList[$TRACK]; if (untrack(isTransitionPending)) { isTransitionPending(); return prev; } if (elsToRemove.length) { const next = prev.filter((e2) => !elsToRemove.includes(e2)); elsToRemove.length = 0; onChange({ list: next, added: [], removed: [], unchanged: next, finishRemoved }); return next; } return untrack(() => { const nextSet = new Set(sourceList); const next = sourceList.slice(); const added = []; const removed = []; const unchanged = []; for (const el of sourceList) { (prevSet.has(el) ? unchanged : added).push(el); } let nothingChanged = !added.length; for (let i2 = 0; i2 < prev.length; i2++) { const el = prev[i2]; if (!nextSet.has(el)) { if (!exiting.has(el)) { removed.push(el); exiting.add(el); } handleRemoved(next, el, i2); } if (nothingChanged && el !== next[i2]) nothingChanged = false; } if (!removed.length && nothingChanged) return prev; onChange({ list: next, added, removed, unchanged, finishRemoved }); prevSet = nextSet; return next; }); }, options.appear ? [] : initSource.slice() ); } function mergeRefs(...refs) { return chain(refs); } var defaultElementPredicate = (item) => item instanceof Element; function getResolvedElements(value, predicate) { if (predicate(value)) return value; if (typeof value === "function" && !value.length) return getResolvedElements(value(), predicate); if (Array.isArray(value)) { const results = []; for (const item of value) { const result = getResolvedElements(item, predicate); if (result) Array.isArray(result) ? results.push.apply(results, result) : results.push(result); } return results.length ? results : null; } return null; } function resolveElements(fn, predicate = defaultElementPredicate, serverPredicate = defaultElementPredicate) { const children2 = createMemo(fn); const memo = createMemo( () => getResolvedElements(children2(), predicate) ); memo.toArray = () => { const value = memo(); return Array.isArray(value) ? value : value ? [value] : []; }; return memo; } function createClassnames(props) { return createMemo(() => { const name = props.name || "s"; return { enterActive: (props.enterActiveClass || name + "-enter-active").split(" "), enter: (props.enterClass || name + "-enter").split(" "), enterTo: (props.enterToClass || name + "-enter-to").split(" "), exitActive: (props.exitActiveClass || name + "-exit-active").split(" "), exit: (props.exitClass || name + "-exit").split(" "), exitTo: (props.exitToClass || name + "-exit-to").split(" "), move: (props.moveClass || name + "-move").split(" ") }; }); } function nextFrame(fn) { requestAnimationFrame(() => requestAnimationFrame(fn)); } function enterTransition(classes, events, el, done) { const { onBeforeEnter, onEnter, onAfterEnter } = events; onBeforeEnter == null ? void 0 : onBeforeEnter(el); el.classList.add(...classes.enter); el.classList.add(...classes.enterActive); queueMicrotask(() => { if (!el.parentNode) return done == null ? void 0 : done(); onEnter == null ? void 0 : onEnter(el, () => endTransition()); }); nextFrame(() => { el.classList.remove(...classes.enter); el.classList.add(...classes.enterTo); if (!onEnter || onEnter.length < 2) { el.addEventListener("transitionend", endTransition); el.addEventListener("animationend", endTransition); } }); function endTransition(e2) { if (!e2 || e2.target === el) { el.removeEventListener("transitionend", endTransition); el.removeEventListener("animationend", endTransition); el.classList.remove(...classes.enterActive); el.classList.remove(...classes.enterTo); onAfterEnter == null ? void 0 : onAfterEnter(el); } } } function exitTransition(classes, events, el, done) { const { onBeforeExit, onExit, onAfterExit } = events; if (!el.parentNode) return done == null ? void 0 : done(); onBeforeExit == null ? void 0 : onBeforeExit(el); el.classList.add(...classes.exit); el.classList.add(...classes.exitActive); onExit == null ? void 0 : onExit(el, () => endTransition()); nextFrame(() => { el.classList.remove(...classes.exit); el.classList.add(...classes.exitTo); if (!onExit || onExit.length < 2) { el.addEventListener("transitionend", endTransition); el.addEventListener("animationend", endTransition); } }); function endTransition(e2) { if (!e2 || e2.target === el) { done == null ? void 0 : done(); el.removeEventListener("transitionend", endTransition); el.removeEventListener("animationend", endTransition); el.classList.remove(...classes.exitActive); el.classList.remove(...classes.exitTo); onAfterExit == null ? void 0 : onAfterExit(el); } } } var TransitionGroup = (props) => { const classnames = createClassnames(props); return createListTransition(resolveElements(() => props.children).toArray, { appear: props.appear, onChange({ added, removed, finishRemoved, list }) { const classes = classnames(); for (const el of added) { enterTransition(classes, props, el); } const toMove = []; for (const el of list) { if (el.isConnected && (el instanceof HTMLElement || el instanceof SVGElement)) { toMove.push({ el, rect: el.getBoundingClientRect() }); } } queueMicrotask(() => { const moved = []; for (const { el, rect } of toMove) { if (el.isConnected) { const newRect = el.getBoundingClientRect(), dX = rect.left - newRect.left, dY = rect.top - newRect.top; if (dX || dY) { el.style.transform = `translate(${dX}px, ${dY}px)`; el.style.transitionDuration = "0s"; moved.push(el); } } } document.body.offsetHeight; for (const el of moved) { let endTransition2 = function(e2) { if (e2.target === el || /transform$/.test(e2.propertyName)) { el.removeEventListener("transitionend", endTransition2); el.classList.remove(...classes.move); } }; el.classList.add(...classes.move); el.style.transform = el.style.transitionDuration = ""; el.addEventListener("transitionend", endTransition2); } }); for (const el of removed) { exitTransition(classes, props, el, () => finishRemoved([el])); } } }); }; var FALLBACK = Symbol("fallback"); function dispose(list) { for (const o2 of list) o2.dispose(); } function keyArray(items, keyFn, mapFn, options = {}) { const prev = /* @__PURE__ */ new Map(); onCleanup(() => dispose(prev.values())); return () => { const list = items() || []; list[$TRACK]; return untrack(() => { var _a, _b; if (!list.length) { dispose(prev.values()); prev.clear(); if (!options.fallback) return []; const fb2 = createRoot((dispose2) => { prev.set(FALLBACK, { dispose: dispose2 }); return options.fallback(); }); return [fb2]; } const result = new Array(list.length); const fb = prev.get(FALLBACK); if (!prev.size || fb) { fb == null ? void 0 : fb.dispose(); prev.delete(FALLBACK); for (let i2 = 0; i2 < list.length; i2++) { const item = list[i2]; const key = keyFn(item, i2); addNewItem(result, item, i2, key); } return result; } const prevKeys = new Set(prev.keys()); for (let i2 = 0; i2 < list.length; i2++) { const item = list[i2]; const key = keyFn(item, i2); prevKeys.delete(key); const lookup = prev.get(key); if (lookup) { result[i2] = lookup.mapped; (_a = lookup.setIndex) == null ? void 0 : _a.call(lookup, i2); lookup.setItem(() => item); } else addNewItem(result, item, i2, key); } for (const key of prevKeys) { (_b = prev.get(key)) == null ? void 0 : _b.dispose(); prev.delete(key); } return result; }); }; function addNewItem(list, item, i2, key) { createRoot((dispose2) => { const [getItem, setItem] = createSignal(item); const save = { setItem, dispose: dispose2 }; if (mapFn.length > 1) { const [index, setIndex] = createSignal(i2); save.setIndex = setIndex; save.mapped = mapFn(getItem, index); } else save.mapped = mapFn(getItem); prev.set(key, save); list[i2] = save.mapped; }); } } function Key(props) { const { by } = props; return createMemo( keyArray( () => props.each, typeof by === "function" ? by : (v) => v[by], props.children, "fallback" in props ? { fallback: () => props.fallback } : void 0 ) ); } function makeEventListener(target, type, handler, options) { target.addEventListener(type, handler, options); return tryOnCleanup(target.removeEventListener.bind(target, type, handler, options)); } function createEventListener(targets, type, handler, options) { const attachListeners = () => { asArray(access(targets)).forEach((el) => { if (el) asArray(access(type)).forEach((type2) => makeEventListener(el, type2, handler, options)); }); }; if (typeof targets === "function") createEffect(attachListeners); else createRenderEffect(attachListeners); } function makeResizeObserver(callback, options) { const observer = new ResizeObserver(callback); onCleanup(observer.disconnect.bind(observer)); return { observe: (ref) => observer.observe(ref, options), unobserve: observer.unobserve.bind(observer) }; } function createResizeObserver(targets, onResize, options) { const previousMap = /* @__PURE__ */ new WeakMap(), { observe, unobserve } = makeResizeObserver((entries2) => { for (const entry of entries2) { const { contentRect, target } = entry, width = Math.round(contentRect.width), height = Math.round(contentRect.height), previous = previousMap.get(target); if (!previous || previous.width !== width || previous.height !== height) { onResize(contentRect, target, entry); previousMap.set(target, { width, height }); } } }, options); createEffect((prev) => { const refs = filterNonNullable(asArray(access(targets))); handleDiffArray(refs, prev, observe, unobserve); return refs; }, []); } var extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g; function stringStyleToObject(style) { const object = {}; let match; while (match = extractCSSregex.exec(style)) { object[match[1]] = match[2]; } return object; } function combineStyle(a2, b2) { if (typeof a2 === "string") { if (typeof b2 === "string") return `${a2};${b2}`; a2 = stringStyleToObject(a2); } else if (typeof b2 === "string") { b2 = stringStyleToObject(b2); } return { ...a2, ...b2 }; } function addItemToArray(array, item, index = -1) { if (!(index in array)) { return [...array, item]; } return [...array.slice(0, index), item, ...array.slice(index)]; } function removeItemFromArray(array, item) { const updatedArray = [...array]; const index = updatedArray.indexOf(item); if (index !== -1) { updatedArray.splice(index, 1); } return updatedArray; } function isNumber(value) { return typeof value === "number"; } function isString(value) { return Object.prototype.toString.call(value) === "[object String]"; } function isFunction(value) { return typeof value === "function"; } function createGenerateId(baseId) { return (suffix) => `${baseId()}-${suffix}`; } function contains(parent, child) { if (!parent) { return false; } return parent === child || parent.contains(child); } function getActiveElement(node, activeDescendant = false) { const { activeElement } = getDocument(node); if (!(activeElement == null ? void 0 : activeElement.nodeName)) { return null; } if (isFrame(activeElement) && activeElement.contentDocument) { return getActiveElement(activeElement.contentDocument.body, activeDescendant); } if (activeDescendant) { const id = activeElement.getAttribute("aria-activedescendant"); if (id) { const element = getDocument(activeElement).getElementById(id); if (element) { return element; } } } return activeElement; } function getWindow(node) { return getDocument(node).defaultView || window; } function getDocument(node) { return node ? node.ownerDocument || node : document; } function isFrame(element) { return element.tagName === "IFRAME"; } var EventKey = /* @__PURE__ */ ((EventKey2) => { EventKey2["Escape"] = "Escape"; EventKey2["Enter"] = "Enter"; EventKey2["Tab"] = "Tab"; EventKey2["Space"] = " "; EventKey2["ArrowDown"] = "ArrowDown"; EventKey2["ArrowLeft"] = "ArrowLeft"; EventKey2["ArrowRight"] = "ArrowRight"; EventKey2["ArrowUp"] = "ArrowUp"; EventKey2["End"] = "End"; EventKey2["Home"] = "Home"; EventKey2["PageDown"] = "PageDown"; EventKey2["PageUp"] = "PageUp"; return EventKey2; })(EventKey || {}); function testPlatform(re) { var _a; return typeof window !== "undefined" && window.navigator != null ? ( // @ts-ignore re.test(((_a = window.navigator["userAgentData"]) == null ? void 0 : _a.platform) || window.navigator.platform) ) : false; } function isMac() { return testPlatform(/^Mac/i); } function isIPhone() { return testPlatform(/^iPhone/i); } function isIPad() { return testPlatform(/^iPad/i) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support. isMac() && navigator.maxTouchPoints > 1; } function isIOS() { return isIPhone() || isIPad(); } function isAppleDevice() { return isMac() || isIOS(); } function callHandler(event, handler) { if (handler) { if (isFunction(handler)) { handler(event); } else { handler[0](handler[1], event); } } return event == null ? void 0 : event.defaultPrevented; } function composeEventHandlers(handlers) { return (event) => { for (const handler of handlers) { callHandler(event, handler); } }; } function isCtrlKey(e2) { if (isMac()) { return e2.metaKey && !e2.ctrlKey; } return e2.ctrlKey && !e2.metaKey; } function focusWithoutScrolling(element) { if (!element) { return; } if (supportsPreventScroll()) { element.focus({ preventScroll: true }); } else { const scrollableElements = getScrollableElements(element); element.focus(); restoreScrollPosition(scrollableElements); } } var supportsPreventScrollCached = null; function supportsPreventScroll() { if (supportsPreventScrollCached == null) { supportsPreventScrollCached = false; try { const focusElem = document.createElement("div"); focusElem.focus({ get preventScroll() { supportsPreventScrollCached = true; return true; } }); } catch (e2) { } } return supportsPreventScrollCached; } function getScrollableElements(element) { let parent = element.parentNode; const scrollableElements = []; const rootScrollingElement = document.scrollingElement || document.documentElement; while (parent instanceof HTMLElement && parent !== rootScrollingElement) { if (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) { scrollableElements.push({ element: parent, scrollTop: parent.scrollTop, scrollLeft: parent.scrollLeft }); } parent = parent.parentNode; } if (rootScrollingElement instanceof HTMLElement) { scrollableElements.push({ element: rootScrollingElement, scrollTop: rootScrollingElement.scrollTop, scrollLeft: rootScrollingElement.scrollLeft }); } return scrollableElements; } function restoreScrollPosition(scrollableElements) { for (const { element, scrollTop, scrollLeft } of scrollableElements) { element.scrollTop = scrollTop; element.scrollLeft = scrollLeft; } } var focusableElements = [ "input:not([type='hidden']):not([disabled])", "select:not([disabled])", "textarea:not([disabled])", "button:not([disabled])", "a[href]", "area[href]", "[tabindex]", "iframe", "object", "embed", "audio[controls]", "video[controls]", "[contenteditable]:not([contenteditable='false'])" ]; var tabbableElements = [...focusableElements, '[tabindex]:not([tabindex="-1"]):not([disabled])']; var FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])"; var TABBABLE_ELEMENT_SELECTOR = tabbableElements.join( ':not([hidden]):not([tabindex="-1"]),' ); function getAllTabbableIn(container, includeContainer) { const elements = Array.from(container.querySelectorAll(FOCUSABLE_ELEMENT_SELECTOR)); const tabbableElements2 = elements.filter(isTabbable); if (includeContainer && isTabbable(container)) { tabbableElements2.unshift(container); } tabbableElements2.forEach((element, i2) => { if (isFrame(element) && element.contentDocument) { const frameBody = element.contentDocument.body; const allFrameTabbable = getAllTabbableIn(frameBody, false); tabbableElements2.splice(i2, 1, ...allFrameTabbable); } }); return tabbableElements2; } function isTabbable(element) { return isFocusable(element) && !hasNegativeTabIndex(element); } function isFocusable(element) { return element.matches(FOCUSABLE_ELEMENT_SELECTOR) && isElementVisible(element); } function hasNegativeTabIndex(element) { const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10); return tabIndex < 0; } function isElementVisible(element, childElement) { return element.nodeName !== "#comment" && isStyleVisible(element) && isAttributeVisible(element, childElement) && (!element.parentElement || isElementVisible(element.parentElement, element)); } function isStyleVisible(element) { if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) { return false; } const { display, visibility } = element.style; let isVisible = display !== "none" && visibility !== "hidden" && visibility !== "collapse"; if (isVisible) { if (!element.ownerDocument.defaultView) { return isVisible; } const { getComputedStyle: getComputedStyle3 } = element.ownerDocument.defaultView; const { display: computedDisplay, visibility: computedVisibility } = getComputedStyle3(element); isVisible = computedDisplay !== "none" && computedVisibility !== "hidden" && computedVisibility !== "collapse"; } return isVisible; } function isAttributeVisible(element, childElement) { return !element.hasAttribute("hidden") && (element.nodeName === "DETAILS" && childElement && childElement.nodeName !== "SUMMARY" ? element.hasAttribute("open") : true); } function getFocusableTreeWalker(root, opts, scope) { const selector = (opts == null ? void 0 : opts.tabbable) ? TABBABLE_ELEMENT_SELECTOR : FOCUSABLE_ELEMENT_SELECTOR; const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, { acceptNode(node) { var _a; if ((_a = opts == null ? void 0 : opts.from) == null ? void 0 : _a.contains(node)) { return NodeFilter.FILTER_REJECT; } if (node.matches(selector) && isElementVisible(node) && true && (!(opts == null ? void 0 : opts.accept) || opts.accept(node))) { return NodeFilter.FILTER_ACCEPT; } return NodeFilter.FILTER_SKIP; } }); if (opts == null ? void 0 : opts.from) { walker.currentNode = opts.from; } return walker; } function getScrollParent(node) { while (node && !isScrollable(node)) { node = node.parentElement; } return node || document.scrollingElement || document.documentElement; } function isScrollable(node) { const style = window.getComputedStyle(node); return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY); } function noop3() { return; } function isPointInPolygon(point, polygon) { const [x, y] = point; let inside = false; const length = polygon.length; for (let l2 = length, i2 = 0, j = l2 - 1; i2 < l2; j = i2++) { const [xi, yi] = polygon[i2]; const [xj, yj] = polygon[j]; const [, vy] = polygon[j === 0 ? l2 - 1 : j - 1] || [0, 0]; const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi); if (yj < yi) { if (y >= yj && y < yi) { if (where === 0) return true; if (where > 0) { if (y === yj) { if (y > vy) { inside = !inside; } } else { inside = !inside; } } } } else if (yi < yj) { if (y > yi && y <= yj) { if (where === 0) return true; if (where < 0) { if (y === yj) { if (y < vy) { inside = !inside; } } else { inside = !inside; } } } } else if (y == yi && (x >= xj && x <= xi || x >= xi && x <= xj)) { return true; } } return inside; } function mergeDefaultProps(defaultProps, props) { return mergeProps(defaultProps, props); } var transitionsByElement = /* @__PURE__ */ new Map(); var transitionCallbacks = /* @__PURE__ */ new Set(); function setupGlobalEvents() { if (typeof window === "undefined") { return; } const onTransitionStart = (e2) => { if (!e2.target) { return; } let transitions = transitionsByElement.get(e2.target); if (!transitions) { transitions = /* @__PURE__ */ new Set(); transitionsByElement.set(e2.target, transitions); e2.target.addEventListener("transitioncancel", onTransitionEnd); } transitions.add(e2.propertyName); }; const onTransitionEnd = (e2) => { if (!e2.target) { return; } const properties = transitionsByElement.get(e2.target); if (!properties) { return; } properties.delete(e2.propertyName); if (properties.size === 0) { e2.target.removeEventListener("transitioncancel", onTransitionEnd); transitionsB