{'Hello, world!'}
\n *{'Hello, { $username }!'}
\n *\n * \n *
\n * )}\n * Drag 'n' drop some files here, or click to select files
\n *\n * \n *
\n * )\n * }\n * ```\n *\n * @function useDropzone\n *\n * @param {object} props\n * @param {string|string[]} [props.accept] Set accepted file types.\n * See https://github.com/okonet/attr-accept for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all.\n * See: https://github.com/react-dropzone/react-dropzone/issues/276\n * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files\n * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window\n * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog\n * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop\n * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents\n * @param {number} [props.minSize=0] Minimum file size (in bytes)\n * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)\n * @param {boolean} [props.disabled=false] Enable/disable the dropzone\n * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator\n * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection\n * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.\n * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs\n * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs\n * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.\n * If `multiple` is set to false and additional files are dropped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n * @param {dropAcceptedCb} [props.onDropAccepted]\n * @param {dropRejectedCb} [props.onDropRejected]\n *\n * @returns {DropzoneState}\n */\n\nexport function useDropzone() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n var _defaultProps$options = _objectSpread(_objectSpread({}, defaultProps), options),\n accept = _defaultProps$options.accept,\n disabled = _defaultProps$options.disabled,\n getFilesFromEvent = _defaultProps$options.getFilesFromEvent,\n maxSize = _defaultProps$options.maxSize,\n minSize = _defaultProps$options.minSize,\n multiple = _defaultProps$options.multiple,\n maxFiles = _defaultProps$options.maxFiles,\n onDragEnter = _defaultProps$options.onDragEnter,\n onDragLeave = _defaultProps$options.onDragLeave,\n onDragOver = _defaultProps$options.onDragOver,\n onDrop = _defaultProps$options.onDrop,\n onDropAccepted = _defaultProps$options.onDropAccepted,\n onDropRejected = _defaultProps$options.onDropRejected,\n onFileDialogCancel = _defaultProps$options.onFileDialogCancel,\n preventDropOnDocument = _defaultProps$options.preventDropOnDocument,\n noClick = _defaultProps$options.noClick,\n noKeyboard = _defaultProps$options.noKeyboard,\n noDrag = _defaultProps$options.noDrag,\n noDragEventsBubbling = _defaultProps$options.noDragEventsBubbling;\n\n var rootRef = useRef(null);\n var inputRef = useRef(null);\n\n var _useReducer = useReducer(reducer, initialState),\n _useReducer2 = _slicedToArray(_useReducer, 2),\n state = _useReducer2[0],\n dispatch = _useReducer2[1];\n\n var isFocused = state.isFocused,\n isFileDialogActive = state.isFileDialogActive,\n draggedFiles = state.draggedFiles; // Fn for opening the file dialog programmatically\n\n var openFileDialog = useCallback(function () {\n if (inputRef.current) {\n dispatch({\n type: 'openDialog'\n });\n inputRef.current.value = null;\n inputRef.current.click();\n }\n }, [dispatch]); // Update file dialog active state when the window is focused on\n\n var onWindowFocus = function onWindowFocus() {\n // Execute the timeout only if the file dialog is opened in the browser\n if (isFileDialogActive) {\n setTimeout(function () {\n if (inputRef.current) {\n var files = inputRef.current.files;\n\n if (!files.length) {\n dispatch({\n type: 'closeDialog'\n });\n\n if (typeof onFileDialogCancel === 'function') {\n onFileDialogCancel();\n }\n }\n }\n }, 300);\n }\n };\n\n useEffect(function () {\n window.addEventListener('focus', onWindowFocus, false);\n return function () {\n window.removeEventListener('focus', onWindowFocus, false);\n };\n }, [inputRef, isFileDialogActive, onFileDialogCancel]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone\n\n var onKeyDownCb = useCallback(function (event) {\n // Ignore keyboard events bubbling up the DOM tree\n if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {\n return;\n }\n\n if (event.keyCode === 32 || event.keyCode === 13) {\n event.preventDefault();\n openFileDialog();\n }\n }, [rootRef, inputRef]); // Update focus state for the dropzone\n\n var onFocusCb = useCallback(function () {\n dispatch({\n type: 'focus'\n });\n }, []);\n var onBlurCb = useCallback(function () {\n dispatch({\n type: 'blur'\n });\n }, []); // Cb to open the file dialog when click occurs on the dropzone\n\n var onClickCb = useCallback(function () {\n if (noClick) {\n return;\n } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()\n // to ensure React can handle state changes\n // See: https://github.com/react-dropzone/react-dropzone/issues/450\n\n\n if (isIeOrEdge()) {\n setTimeout(openFileDialog, 0);\n } else {\n openFileDialog();\n }\n }, [inputRef, noClick]);\n var dragTargetsRef = useRef([]);\n\n var onDocumentDrop = function onDocumentDrop(event) {\n if (rootRef.current && rootRef.current.contains(event.target)) {\n // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler\n return;\n }\n\n event.preventDefault();\n dragTargetsRef.current = [];\n };\n\n useEffect(function () {\n if (preventDropOnDocument) {\n document.addEventListener('dragover', onDocumentDragOver, false);\n document.addEventListener('drop', onDocumentDrop, false);\n }\n\n return function () {\n if (preventDropOnDocument) {\n document.removeEventListener('dragover', onDocumentDragOver);\n document.removeEventListener('drop', onDocumentDrop);\n }\n };\n }, [rootRef, preventDropOnDocument]);\n var onDragEnterCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (draggedFiles) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n dispatch({\n draggedFiles: draggedFiles,\n isDragActive: true,\n type: 'setDraggedFiles'\n });\n\n if (onDragEnter) {\n onDragEnter(event);\n }\n });\n }\n }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);\n var onDragOverCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event);\n\n if (event.dataTransfer) {\n try {\n event.dataTransfer.dropEffect = 'copy';\n } catch (_unused) {}\n /* eslint-disable-line no-empty */\n\n }\n\n if (isEvtWithFiles(event) && onDragOver) {\n onDragOver(event);\n }\n\n return false;\n }, [onDragOver, noDragEventsBubbling]);\n var onDragLeaveCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event); // Only deactivate once the dropzone and all children have been left\n\n var targets = dragTargetsRef.current.filter(function (target) {\n return rootRef.current && rootRef.current.contains(target);\n }); // Make sure to remove a target present multiple times only once\n // (Firefox may fire dragenter/dragleave multiple times on the same element)\n\n var targetIdx = targets.indexOf(event.target);\n\n if (targetIdx !== -1) {\n targets.splice(targetIdx, 1);\n }\n\n dragTargetsRef.current = targets;\n\n if (targets.length > 0) {\n return;\n }\n\n dispatch({\n isDragActive: false,\n type: 'setDraggedFiles',\n draggedFiles: []\n });\n\n if (isEvtWithFiles(event) && onDragLeave) {\n onDragLeave(event);\n }\n }, [rootRef, onDragLeave, noDragEventsBubbling]);\n var onDropCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [];\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (files) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n var acceptedFiles = [];\n var fileRejections = [];\n files.forEach(function (file) {\n var _fileAccepted = fileAccepted(file, accept),\n _fileAccepted2 = _slicedToArray(_fileAccepted, 2),\n accepted = _fileAccepted2[0],\n acceptError = _fileAccepted2[1];\n\n var _fileMatchSize = fileMatchSize(file, minSize, maxSize),\n _fileMatchSize2 = _slicedToArray(_fileMatchSize, 2),\n sizeMatch = _fileMatchSize2[0],\n sizeError = _fileMatchSize2[1];\n\n if (accepted && sizeMatch) {\n acceptedFiles.push(file);\n } else {\n var errors = [acceptError, sizeError].filter(function (e) {\n return e;\n });\n fileRejections.push({\n file: file,\n errors: errors\n });\n }\n });\n\n if (!multiple && acceptedFiles.length > 1 || multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles) {\n // Reject everything and empty accepted files\n acceptedFiles.forEach(function (file) {\n fileRejections.push({\n file: file,\n errors: [TOO_MANY_FILES_REJECTION]\n });\n });\n acceptedFiles.splice(0);\n }\n\n dispatch({\n acceptedFiles: acceptedFiles,\n fileRejections: fileRejections,\n type: 'setFiles'\n });\n\n if (onDrop) {\n onDrop(acceptedFiles, fileRejections, event);\n }\n\n if (fileRejections.length > 0 && onDropRejected) {\n onDropRejected(fileRejections, event);\n }\n\n if (acceptedFiles.length > 0 && onDropAccepted) {\n onDropAccepted(acceptedFiles, event);\n }\n });\n }\n\n dispatch({\n type: 'reset'\n });\n }, [multiple, accept, minSize, maxSize, maxFiles, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected, noDragEventsBubbling]);\n\n var composeHandler = function composeHandler(fn) {\n return disabled ? null : fn;\n };\n\n var composeKeyboardHandler = function composeKeyboardHandler(fn) {\n return noKeyboard ? null : composeHandler(fn);\n };\n\n var composeDragHandler = function composeDragHandler(fn) {\n return noDrag ? null : composeHandler(fn);\n };\n\n var stopPropagation = function stopPropagation(event) {\n if (noDragEventsBubbling) {\n event.stopPropagation();\n }\n };\n\n var getRootProps = useMemo(function () {\n return function () {\n var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref2$refKey = _ref2.refKey,\n refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,\n onKeyDown = _ref2.onKeyDown,\n onFocus = _ref2.onFocus,\n onBlur = _ref2.onBlur,\n onClick = _ref2.onClick,\n onDragEnter = _ref2.onDragEnter,\n onDragOver = _ref2.onDragOver,\n onDragLeave = _ref2.onDragLeave,\n onDrop = _ref2.onDrop,\n rest = _objectWithoutProperties(_ref2, [\"refKey\", \"onKeyDown\", \"onFocus\", \"onBlur\", \"onClick\", \"onDragEnter\", \"onDragOver\", \"onDragLeave\", \"onDrop\"]);\n\n return _objectSpread(_objectSpread(_defineProperty({\n onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),\n onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),\n onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),\n onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),\n onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),\n onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),\n onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb))\n }, refKey, rootRef), !disabled && !noKeyboard ? {\n tabIndex: 0\n } : {}), rest);\n };\n }, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);\n var onInputElementClick = useCallback(function (event) {\n event.stopPropagation();\n }, []);\n var getInputProps = useMemo(function () {\n return function () {\n var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref3$refKey = _ref3.refKey,\n refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,\n onChange = _ref3.onChange,\n onClick = _ref3.onClick,\n rest = _objectWithoutProperties(_ref3, [\"refKey\", \"onChange\", \"onClick\"]);\n\n var inputProps = _defineProperty({\n accept: accept,\n multiple: multiple,\n type: 'file',\n style: {\n display: 'none'\n },\n onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),\n autoComplete: 'off',\n tabIndex: -1\n }, refKey, inputRef);\n\n return _objectSpread(_objectSpread({}, inputProps), rest);\n };\n }, [inputRef, accept, multiple, onDropCb, disabled]);\n var fileCount = draggedFiles.length;\n var isDragAccept = fileCount > 0 && allFilesAccepted({\n files: draggedFiles,\n accept: accept,\n minSize: minSize,\n maxSize: maxSize,\n multiple: multiple,\n maxFiles: maxFiles\n });\n var isDragReject = fileCount > 0 && !isDragAccept;\n return _objectSpread(_objectSpread({}, state), {}, {\n isDragAccept: isDragAccept,\n isDragReject: isDragReject,\n isFocused: isFocused && !disabled,\n getRootProps: getRootProps,\n getInputProps: getInputProps,\n rootRef: rootRef,\n inputRef: inputRef,\n open: composeHandler(openFileDialog)\n });\n}\n\nfunction reducer(state, action) {\n /* istanbul ignore next */\n switch (action.type) {\n case 'focus':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: true\n });\n\n case 'blur':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: false\n });\n\n case 'openDialog':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFileDialogActive: true\n });\n\n case 'closeDialog':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFileDialogActive: false\n });\n\n case 'setDraggedFiles':\n /* eslint no-case-declarations: 0 */\n var isDragActive = action.isDragActive,\n draggedFiles = action.draggedFiles;\n return _objectSpread(_objectSpread({}, state), {}, {\n draggedFiles: draggedFiles,\n isDragActive: isDragActive\n });\n\n case 'setFiles':\n return _objectSpread(_objectSpread({}, state), {}, {\n acceptedFiles: action.acceptedFiles,\n fileRejections: action.fileRejections\n });\n\n case 'reset':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFileDialogActive: false,\n isDragActive: false,\n draggedFiles: [],\n acceptedFiles: [],\n fileRejections: []\n });\n\n default:\n return state;\n }\n}","import { Locale } from \"./locale\";\n/**\n * Below is a manually a list of likely subtags corresponding to Unicode\n * CLDR likelySubtags list.\n * This list is curated by the maintainers of Project Fluent and is\n * intended to be used in place of the full likelySubtags list in use cases\n * where full list cannot be (for example, due to the size).\n *\n * This version of the list is based on CLDR 30.0.3.\n */\nconst likelySubtagsMin = {\n \"ar\": \"ar-arab-eg\",\n \"az-arab\": \"az-arab-ir\",\n \"az-ir\": \"az-arab-ir\",\n \"be\": \"be-cyrl-by\",\n \"da\": \"da-latn-dk\",\n \"el\": \"el-grek-gr\",\n \"en\": \"en-latn-us\",\n \"fa\": \"fa-arab-ir\",\n \"ja\": \"ja-jpan-jp\",\n \"ko\": \"ko-kore-kr\",\n \"pt\": \"pt-latn-br\",\n \"sr\": \"sr-cyrl-rs\",\n \"sr-ru\": \"sr-latn-ru\",\n \"sv\": \"sv-latn-se\",\n \"ta\": \"ta-taml-in\",\n \"uk\": \"uk-cyrl-ua\",\n \"zh\": \"zh-hans-cn\",\n \"zh-hant\": \"zh-hant-tw\",\n \"zh-hk\": \"zh-hant-hk\",\n \"zh-gb\": \"zh-hant-gb\",\n \"zh-us\": \"zh-hant-us\",\n};\nconst regionMatchingLangs = [\n \"az\",\n \"bg\",\n \"cs\",\n \"de\",\n \"es\",\n \"fi\",\n \"fr\",\n \"hu\",\n \"it\",\n \"lt\",\n \"lv\",\n \"nl\",\n \"pl\",\n \"ro\",\n \"ru\",\n];\nexport function getLikelySubtagsMin(loc) {\n if (Object.prototype.hasOwnProperty.call(likelySubtagsMin, loc)) {\n return new Locale(likelySubtagsMin[loc]);\n }\n const locale = new Locale(loc);\n if (locale.language && regionMatchingLangs.includes(locale.language)) {\n locale.region = locale.language.toUpperCase();\n return locale;\n }\n return null;\n}\n","/* eslint no-magic-numbers: 0 */\nimport { getLikelySubtagsMin } from \"./subtags\";\nconst languageCodeRe = \"([a-z]{2,3}|\\\\*)\";\nconst scriptCodeRe = \"(?:-([a-z]{4}|\\\\*))\";\nconst regionCodeRe = \"(?:-([a-z]{2}|\\\\*))\";\nconst variantCodeRe = \"(?:-(([0-9][a-z0-9]{3}|[a-z0-9]{5,8})|\\\\*))\";\n/**\n * Regular expression splitting locale id into four pieces:\n *\n * Example: `en-Latn-US-macos`\n *\n * language: en\n * script: Latn\n * region: US\n * variant: macos\n *\n * It can also accept a range `*` character on any position.\n */\nconst localeRe = new RegExp(`^${languageCodeRe}${scriptCodeRe}?${regionCodeRe}?${variantCodeRe}?$`, \"i\");\nexport class Locale {\n /**\n * Parses a locale id using the localeRe into an array with four elements.\n *\n * If the second argument `range` is set to true, it places range `*` char\n * in place of any missing piece.\n *\n * It also allows skipping the script section of the id, so `en-US` is\n * properly parsed as `en-*-US-*`.\n */\n constructor(locale) {\n const result = localeRe.exec(locale.replace(/_/g, \"-\"));\n if (!result) {\n this.isWellFormed = false;\n return;\n }\n let [, language, script, region, variant] = result;\n if (language) {\n this.language = language.toLowerCase();\n }\n if (script) {\n this.script = script[0].toUpperCase() + script.slice(1);\n }\n if (region) {\n this.region = region.toUpperCase();\n }\n this.variant = variant;\n this.isWellFormed = true;\n }\n isEqual(other) {\n return this.language === other.language\n && this.script === other.script\n && this.region === other.region\n && this.variant === other.variant;\n }\n matches(other, thisRange = false, otherRange = false) {\n return (this.language === other.language\n || thisRange && this.language === undefined\n || otherRange && other.language === undefined)\n && (this.script === other.script\n || thisRange && this.script === undefined\n || otherRange && other.script === undefined)\n && (this.region === other.region\n || thisRange && this.region === undefined\n || otherRange && other.region === undefined)\n && (this.variant === other.variant\n || thisRange && this.variant === undefined\n || otherRange && other.variant === undefined);\n }\n toString() {\n return [this.language, this.script, this.region, this.variant]\n .filter(part => part !== undefined)\n .join(\"-\");\n }\n clearVariants() {\n this.variant = undefined;\n }\n clearRegion() {\n this.region = undefined;\n }\n addLikelySubtags() {\n const newLocale = getLikelySubtagsMin(this.toString().toLowerCase());\n if (newLocale) {\n this.language = newLocale.language;\n this.script = newLocale.script;\n this.region = newLocale.region;\n this.variant = newLocale.variant;\n return true;\n }\n return false;\n }\n}\n","/* eslint no-magic-numbers: 0 */\nimport { Locale } from \"./locale\";\n/**\n * Negotiates the languages between the list of requested locales against\n * a list of available locales.\n *\n * The algorithm is based on the BCP4647 3.3.2 Extended Filtering algorithm,\n * with several modifications:\n *\n * 1) available locales are treated as ranges\n *\n * This change allows us to match a more specific request against\n * more generic available locale.\n *\n * For example, if the available locale list provides locale `en`,\n * and the requested locale is `en-US`, we treat the available locale as\n * a locale that matches all possible english requests.\n *\n * This means that we expect available locale ID to be as precize as\n * the matches they want to cover.\n *\n * For example, if there is only `sr` available, it's ok to list\n * it in available locales. But once the available locales has both,\n * Cyrl and Latn variants, the locale IDs should be `sr-Cyrl` and `sr-Latn`\n * to avoid any `sr-*` request to match against whole `sr` range.\n *\n * What it does ([requested] * [available] = [supported]):\n *\n * ['en-US'] * ['en'] = ['en']\n *\n * 2) likely subtags from LDML 4.3 Likely Subtags has been added\n *\n * The most obvious likely subtag that can be computed is a duplication\n * of the language field onto region field (`fr` => `fr-FR`).\n *\n * On top of that, likely subtags may use a list of mappings, that\n * allow the algorithm to handle non-obvious matches.\n * For example, making sure that we match `en` to `en-US` or `sr` to\n * `sr-Cyrl`, while `sr-RU` to `sr-Latn-RU`.\n *\n * This list can be taken directly from CLDR Supplemental Data.\n *\n * What it does ([requested] * [available] = [supported]):\n *\n * ['fr'] * ['fr-FR'] = ['fr-FR']\n * ['en'] * ['en-US'] = ['en-US']\n * ['sr'] * ['sr-Latn', 'sr-Cyrl'] = ['sr-Cyrl']\n *\n * 3) variant/region range check has been added\n *\n * Lastly, the last form of check is against the requested locale ID\n * but with the variant/region field replaced with a `*` range.\n *\n * The rationale here laid out in LDML 4.4 Language Matching:\n * \"(...) normally the fall-off between the user's languages is\n * substantially greated than regional variants.\"\n *\n * In other words, if we can't match for the given region, maybe\n * we can match for the same language/script but other region, and\n * it will in most cases be preferred over falling back on the next\n * language.\n *\n * What it does ([requested] * [available] = [supported]):\n *\n * ['en-AU'] * ['en-US'] = ['en-US']\n * ['sr-RU'] * ['sr-Latn-RO'] = ['sr-Latn-RO'] // sr-RU -> sr-Latn-RU\n *\n * It works similarly to getParentLocales algo, except that we stop\n * after matching against variant/region ranges and don't try to match\n * ignoring script ranges. That means that `sr-Cyrl` will never match\n * against `sr-Latn`.\n */\nexport function filterMatches(requestedLocales, availableLocales, strategy) {\n const supportedLocales = new Set();\n const availableLocalesMap = new Map();\n for (let locale of availableLocales) {\n let newLocale = new Locale(locale);\n if (newLocale.isWellFormed) {\n availableLocalesMap.set(locale, new Locale(locale));\n }\n }\n outer: for (const reqLocStr of requestedLocales) {\n const reqLocStrLC = reqLocStr.toLowerCase();\n const requestedLocale = new Locale(reqLocStrLC);\n if (requestedLocale.language === undefined) {\n continue;\n }\n // 1) Attempt to make an exact match\n // Example: `en-US` === `en-US`\n for (const key of availableLocalesMap.keys()) {\n if (reqLocStrLC === key.toLowerCase()) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n // 2) Attempt to match against the available range\n // This turns `en` into `en-*-*-*` and `en-US` into `en-*-US-*`\n // Example: ['en-US'] * ['en'] = ['en']\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, false)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n // 3) Attempt to retrieve a maximal version of the requested locale ID\n // If data is available, it'll expand `en` into `en-Latn-US` and\n // `zh` into `zh-Hans-CN`.\n // Example: ['en'] * ['en-GB', 'en-US'] = ['en-US']\n if (requestedLocale.addLikelySubtags()) {\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, false)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n }\n // 4) Attempt to look up for a different variant for the same locale ID\n // Example: ['en-US-mac'] * ['en-US-win'] = ['en-US-win']\n requestedLocale.clearVariants();\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, true)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n // 5) Attempt to match against the likely subtag without region\n // In the example below, addLikelySubtags will turn\n // `zh-Hant` into `zh-Hant-TW` giving `zh-TW` priority match\n // over `zh-CN`.\n //\n // Example: ['zh-Hant-HK'] * ['zh-TW', 'zh-CN'] = ['zh-TW']\n requestedLocale.clearRegion();\n if (requestedLocale.addLikelySubtags()) {\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, false)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n }\n // 6) Attempt to look up for a different region for the same locale ID\n // Example: ['en-US'] * ['en-AU'] = ['en-AU']\n requestedLocale.clearRegion();\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, true)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n }\n return Array.from(supportedLocales);\n}\n","import { filterMatches } from \"./matches\";\n/**\n * Negotiates the languages between the list of requested locales against\n * a list of available locales.\n *\n * It accepts three arguments:\n *\n * requestedLocales:\n * an Array of strings with BCP47 locale IDs sorted\n * according to user preferences.\n *\n * availableLocales:\n * an Array of strings with BCP47 locale IDs of locale for which\n * resources are available. Unsorted.\n *\n * options:\n * An object with the following, optional keys:\n *\n * strategy: 'filtering' (default) | 'matching' | 'lookup'\n *\n * defaultLocale:\n * a string with BCP47 locale ID to be used\n * as a last resort locale.\n *\n *\n * It returns an Array of strings with BCP47 locale IDs sorted according to the\n * user preferences.\n *\n * The exact list will be selected differently depending on the strategy:\n *\n * 'filtering': (default)\n * In the filtering strategy, the algorithm will attempt to match\n * as many keys in the available locales in order of the requested locales.\n *\n * 'matching':\n * In the matching strategy, the algorithm will attempt to find the\n * best possible match for each element of the requestedLocales list.\n *\n * 'lookup':\n * In the lookup strategy, the algorithm will attempt to find a single\n * best available locale based on the requested locales list.\n *\n * This strategy requires defaultLocale option to be set.\n */\nexport function negotiateLanguages(requestedLocales, availableLocales, { strategy = \"filtering\", defaultLocale, } = {}) {\n const supportedLocales = filterMatches(Array.from(Object(requestedLocales)).map(String), Array.from(Object(availableLocales)).map(String), strategy);\n if (strategy === \"lookup\") {\n if (defaultLocale === undefined) {\n throw new Error(\"defaultLocale cannot be undefined for strategy `lookup`\");\n }\n if (supportedLocales.length === 0) {\n supportedLocales.push(defaultLocale);\n }\n }\n else if (defaultLocale && !supportedLocales.includes(defaultLocale)) {\n supportedLocales.push(defaultLocale);\n }\n return supportedLocales;\n}\n","/** @license React v17.0.1\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';require(\"object-assign\");var f=require(\"react\"),g=60103;exports.Fragment=60107;if(\"function\"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h(\"react.element\");exports.Fragment=h(\"react.fragment\")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};\nfunction q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=\"\"+k);void 0!==a.key&&(e=\"\"+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;\n","/** @license React v17.0.1\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=require(\"object-assign\"),n=60103,p=60106;exports.Fragment=60107;exports.StrictMode=60108;exports.Profiler=60114;var q=60109,r=60110,t=60112;exports.Suspense=60113;var u=60115,v=60116;\nif(\"function\"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w(\"react.element\");p=w(\"react.portal\");exports.Fragment=w(\"react.fragment\");exports.StrictMode=w(\"react.strict_mode\");exports.Profiler=w(\"react.profiler\");q=w(\"react.provider\");r=w(\"react.context\");t=w(\"react.forward_ref\");exports.Suspense=w(\"react.suspense\");u=w(\"react.memo\");v=w(\"react.lazy\")}var x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){if(null===a||\"object\"!==typeof a)return null;a=x&&a[x]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}function z(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;cDrag and drop some files here, or click to select files
\n *{'Hello, world!'}
\n *{'Hello, { $username }!'}
\n *\n * \n *
\n * )}\n * Drag 'n' drop some files here, or click to select files
\n *\n * \n *
\n * )\n * }\n * ```\n *\n * @function useDropzone\n *\n * @param {object} props\n * @param {string|string[]} [props.accept] Set accepted file types.\n * See https://github.com/okonet/attr-accept for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all.\n * See: https://github.com/react-dropzone/react-dropzone/issues/276\n * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files\n * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window\n * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog\n * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop\n * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents\n * @param {number} [props.minSize=0] Minimum file size (in bytes)\n * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)\n * @param {boolean} [props.disabled=false] Enable/disable the dropzone\n * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator\n * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection\n * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.\n * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs\n * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs\n * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.\n * If `multiple` is set to false and additional files are dropped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n * @param {dropAcceptedCb} [props.onDropAccepted]\n * @param {dropRejectedCb} [props.onDropRejected]\n *\n * @returns {DropzoneState}\n */\n\nexport function useDropzone() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n var _defaultProps$options = _objectSpread(_objectSpread({}, defaultProps), options),\n accept = _defaultProps$options.accept,\n disabled = _defaultProps$options.disabled,\n getFilesFromEvent = _defaultProps$options.getFilesFromEvent,\n maxSize = _defaultProps$options.maxSize,\n minSize = _defaultProps$options.minSize,\n multiple = _defaultProps$options.multiple,\n maxFiles = _defaultProps$options.maxFiles,\n onDragEnter = _defaultProps$options.onDragEnter,\n onDragLeave = _defaultProps$options.onDragLeave,\n onDragOver = _defaultProps$options.onDragOver,\n onDrop = _defaultProps$options.onDrop,\n onDropAccepted = _defaultProps$options.onDropAccepted,\n onDropRejected = _defaultProps$options.onDropRejected,\n onFileDialogCancel = _defaultProps$options.onFileDialogCancel,\n preventDropOnDocument = _defaultProps$options.preventDropOnDocument,\n noClick = _defaultProps$options.noClick,\n noKeyboard = _defaultProps$options.noKeyboard,\n noDrag = _defaultProps$options.noDrag,\n noDragEventsBubbling = _defaultProps$options.noDragEventsBubbling;\n\n var rootRef = useRef(null);\n var inputRef = useRef(null);\n\n var _useReducer = useReducer(reducer, initialState),\n _useReducer2 = _slicedToArray(_useReducer, 2),\n state = _useReducer2[0],\n dispatch = _useReducer2[1];\n\n var isFocused = state.isFocused,\n isFileDialogActive = state.isFileDialogActive,\n draggedFiles = state.draggedFiles; // Fn for opening the file dialog programmatically\n\n var openFileDialog = useCallback(function () {\n if (inputRef.current) {\n dispatch({\n type: 'openDialog'\n });\n inputRef.current.value = null;\n inputRef.current.click();\n }\n }, [dispatch]); // Update file dialog active state when the window is focused on\n\n var onWindowFocus = function onWindowFocus() {\n // Execute the timeout only if the file dialog is opened in the browser\n if (isFileDialogActive) {\n setTimeout(function () {\n if (inputRef.current) {\n var files = inputRef.current.files;\n\n if (!files.length) {\n dispatch({\n type: 'closeDialog'\n });\n\n if (typeof onFileDialogCancel === 'function') {\n onFileDialogCancel();\n }\n }\n }\n }, 300);\n }\n };\n\n useEffect(function () {\n window.addEventListener('focus', onWindowFocus, false);\n return function () {\n window.removeEventListener('focus', onWindowFocus, false);\n };\n }, [inputRef, isFileDialogActive, onFileDialogCancel]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone\n\n var onKeyDownCb = useCallback(function (event) {\n // Ignore keyboard events bubbling up the DOM tree\n if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {\n return;\n }\n\n if (event.keyCode === 32 || event.keyCode === 13) {\n event.preventDefault();\n openFileDialog();\n }\n }, [rootRef, inputRef]); // Update focus state for the dropzone\n\n var onFocusCb = useCallback(function () {\n dispatch({\n type: 'focus'\n });\n }, []);\n var onBlurCb = useCallback(function () {\n dispatch({\n type: 'blur'\n });\n }, []); // Cb to open the file dialog when click occurs on the dropzone\n\n var onClickCb = useCallback(function () {\n if (noClick) {\n return;\n } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()\n // to ensure React can handle state changes\n // See: https://github.com/react-dropzone/react-dropzone/issues/450\n\n\n if (isIeOrEdge()) {\n setTimeout(openFileDialog, 0);\n } else {\n openFileDialog();\n }\n }, [inputRef, noClick]);\n var dragTargetsRef = useRef([]);\n\n var onDocumentDrop = function onDocumentDrop(event) {\n if (rootRef.current && rootRef.current.contains(event.target)) {\n // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler\n return;\n }\n\n event.preventDefault();\n dragTargetsRef.current = [];\n };\n\n useEffect(function () {\n if (preventDropOnDocument) {\n document.addEventListener('dragover', onDocumentDragOver, false);\n document.addEventListener('drop', onDocumentDrop, false);\n }\n\n return function () {\n if (preventDropOnDocument) {\n document.removeEventListener('dragover', onDocumentDragOver);\n document.removeEventListener('drop', onDocumentDrop);\n }\n };\n }, [rootRef, preventDropOnDocument]);\n var onDragEnterCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (draggedFiles) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n dispatch({\n draggedFiles: draggedFiles,\n isDragActive: true,\n type: 'setDraggedFiles'\n });\n\n if (onDragEnter) {\n onDragEnter(event);\n }\n });\n }\n }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);\n var onDragOverCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event);\n\n if (event.dataTransfer) {\n try {\n event.dataTransfer.dropEffect = 'copy';\n } catch (_unused) {}\n /* eslint-disable-line no-empty */\n\n }\n\n if (isEvtWithFiles(event) && onDragOver) {\n onDragOver(event);\n }\n\n return false;\n }, [onDragOver, noDragEventsBubbling]);\n var onDragLeaveCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event); // Only deactivate once the dropzone and all children have been left\n\n var targets = dragTargetsRef.current.filter(function (target) {\n return rootRef.current && rootRef.current.contains(target);\n }); // Make sure to remove a target present multiple times only once\n // (Firefox may fire dragenter/dragleave multiple times on the same element)\n\n var targetIdx = targets.indexOf(event.target);\n\n if (targetIdx !== -1) {\n targets.splice(targetIdx, 1);\n }\n\n dragTargetsRef.current = targets;\n\n if (targets.length > 0) {\n return;\n }\n\n dispatch({\n isDragActive: false,\n type: 'setDraggedFiles',\n draggedFiles: []\n });\n\n if (isEvtWithFiles(event) && onDragLeave) {\n onDragLeave(event);\n }\n }, [rootRef, onDragLeave, noDragEventsBubbling]);\n var onDropCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [];\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (files) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n var acceptedFiles = [];\n var fileRejections = [];\n files.forEach(function (file) {\n var _fileAccepted = fileAccepted(file, accept),\n _fileAccepted2 = _slicedToArray(_fileAccepted, 2),\n accepted = _fileAccepted2[0],\n acceptError = _fileAccepted2[1];\n\n var _fileMatchSize = fileMatchSize(file, minSize, maxSize),\n _fileMatchSize2 = _slicedToArray(_fileMatchSize, 2),\n sizeMatch = _fileMatchSize2[0],\n sizeError = _fileMatchSize2[1];\n\n if (accepted && sizeMatch) {\n acceptedFiles.push(file);\n } else {\n var errors = [acceptError, sizeError].filter(function (e) {\n return e;\n });\n fileRejections.push({\n file: file,\n errors: errors\n });\n }\n });\n\n if (!multiple && acceptedFiles.length > 1 || multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles) {\n // Reject everything and empty accepted files\n acceptedFiles.forEach(function (file) {\n fileRejections.push({\n file: file,\n errors: [TOO_MANY_FILES_REJECTION]\n });\n });\n acceptedFiles.splice(0);\n }\n\n dispatch({\n acceptedFiles: acceptedFiles,\n fileRejections: fileRejections,\n type: 'setFiles'\n });\n\n if (onDrop) {\n onDrop(acceptedFiles, fileRejections, event);\n }\n\n if (fileRejections.length > 0 && onDropRejected) {\n onDropRejected(fileRejections, event);\n }\n\n if (acceptedFiles.length > 0 && onDropAccepted) {\n onDropAccepted(acceptedFiles, event);\n }\n });\n }\n\n dispatch({\n type: 'reset'\n });\n }, [multiple, accept, minSize, maxSize, maxFiles, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected, noDragEventsBubbling]);\n\n var composeHandler = function composeHandler(fn) {\n return disabled ? null : fn;\n };\n\n var composeKeyboardHandler = function composeKeyboardHandler(fn) {\n return noKeyboard ? null : composeHandler(fn);\n };\n\n var composeDragHandler = function composeDragHandler(fn) {\n return noDrag ? null : composeHandler(fn);\n };\n\n var stopPropagation = function stopPropagation(event) {\n if (noDragEventsBubbling) {\n event.stopPropagation();\n }\n };\n\n var getRootProps = useMemo(function () {\n return function () {\n var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref2$refKey = _ref2.refKey,\n refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,\n onKeyDown = _ref2.onKeyDown,\n onFocus = _ref2.onFocus,\n onBlur = _ref2.onBlur,\n onClick = _ref2.onClick,\n onDragEnter = _ref2.onDragEnter,\n onDragOver = _ref2.onDragOver,\n onDragLeave = _ref2.onDragLeave,\n onDrop = _ref2.onDrop,\n rest = _objectWithoutProperties(_ref2, [\"refKey\", \"onKeyDown\", \"onFocus\", \"onBlur\", \"onClick\", \"onDragEnter\", \"onDragOver\", \"onDragLeave\", \"onDrop\"]);\n\n return _objectSpread(_objectSpread(_defineProperty({\n onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),\n onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),\n onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),\n onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),\n onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),\n onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),\n onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb))\n }, refKey, rootRef), !disabled && !noKeyboard ? {\n tabIndex: 0\n } : {}), rest);\n };\n }, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);\n var onInputElementClick = useCallback(function (event) {\n event.stopPropagation();\n }, []);\n var getInputProps = useMemo(function () {\n return function () {\n var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref3$refKey = _ref3.refKey,\n refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,\n onChange = _ref3.onChange,\n onClick = _ref3.onClick,\n rest = _objectWithoutProperties(_ref3, [\"refKey\", \"onChange\", \"onClick\"]);\n\n var inputProps = _defineProperty({\n accept: accept,\n multiple: multiple,\n type: 'file',\n style: {\n display: 'none'\n },\n onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),\n autoComplete: 'off',\n tabIndex: -1\n }, refKey, inputRef);\n\n return _objectSpread(_objectSpread({}, inputProps), rest);\n };\n }, [inputRef, accept, multiple, onDropCb, disabled]);\n var fileCount = draggedFiles.length;\n var isDragAccept = fileCount > 0 && allFilesAccepted({\n files: draggedFiles,\n accept: accept,\n minSize: minSize,\n maxSize: maxSize,\n multiple: multiple,\n maxFiles: maxFiles\n });\n var isDragReject = fileCount > 0 && !isDragAccept;\n return _objectSpread(_objectSpread({}, state), {}, {\n isDragAccept: isDragAccept,\n isDragReject: isDragReject,\n isFocused: isFocused && !disabled,\n getRootProps: getRootProps,\n getInputProps: getInputProps,\n rootRef: rootRef,\n inputRef: inputRef,\n open: composeHandler(openFileDialog)\n });\n}\n\nfunction reducer(state, action) {\n /* istanbul ignore next */\n switch (action.type) {\n case 'focus':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: true\n });\n\n case 'blur':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: false\n });\n\n case 'openDialog':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFileDialogActive: true\n });\n\n case 'closeDialog':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFileDialogActive: false\n });\n\n case 'setDraggedFiles':\n /* eslint no-case-declarations: 0 */\n var isDragActive = action.isDragActive,\n draggedFiles = action.draggedFiles;\n return _objectSpread(_objectSpread({}, state), {}, {\n draggedFiles: draggedFiles,\n isDragActive: isDragActive\n });\n\n case 'setFiles':\n return _objectSpread(_objectSpread({}, state), {}, {\n acceptedFiles: action.acceptedFiles,\n fileRejections: action.fileRejections\n });\n\n case 'reset':\n return _objectSpread(_objectSpread({}, state), {}, {\n isFileDialogActive: false,\n isDragActive: false,\n draggedFiles: [],\n acceptedFiles: [],\n fileRejections: []\n });\n\n default:\n return state;\n }\n}","import { Locale } from \"./locale\";\n/**\n * Below is a manually a list of likely subtags corresponding to Unicode\n * CLDR likelySubtags list.\n * This list is curated by the maintainers of Project Fluent and is\n * intended to be used in place of the full likelySubtags list in use cases\n * where full list cannot be (for example, due to the size).\n *\n * This version of the list is based on CLDR 30.0.3.\n */\nconst likelySubtagsMin = {\n \"ar\": \"ar-arab-eg\",\n \"az-arab\": \"az-arab-ir\",\n \"az-ir\": \"az-arab-ir\",\n \"be\": \"be-cyrl-by\",\n \"da\": \"da-latn-dk\",\n \"el\": \"el-grek-gr\",\n \"en\": \"en-latn-us\",\n \"fa\": \"fa-arab-ir\",\n \"ja\": \"ja-jpan-jp\",\n \"ko\": \"ko-kore-kr\",\n \"pt\": \"pt-latn-br\",\n \"sr\": \"sr-cyrl-rs\",\n \"sr-ru\": \"sr-latn-ru\",\n \"sv\": \"sv-latn-se\",\n \"ta\": \"ta-taml-in\",\n \"uk\": \"uk-cyrl-ua\",\n \"zh\": \"zh-hans-cn\",\n \"zh-hant\": \"zh-hant-tw\",\n \"zh-hk\": \"zh-hant-hk\",\n \"zh-gb\": \"zh-hant-gb\",\n \"zh-us\": \"zh-hant-us\",\n};\nconst regionMatchingLangs = [\n \"az\",\n \"bg\",\n \"cs\",\n \"de\",\n \"es\",\n \"fi\",\n \"fr\",\n \"hu\",\n \"it\",\n \"lt\",\n \"lv\",\n \"nl\",\n \"pl\",\n \"ro\",\n \"ru\",\n];\nexport function getLikelySubtagsMin(loc) {\n if (Object.prototype.hasOwnProperty.call(likelySubtagsMin, loc)) {\n return new Locale(likelySubtagsMin[loc]);\n }\n const locale = new Locale(loc);\n if (locale.language && regionMatchingLangs.includes(locale.language)) {\n locale.region = locale.language.toUpperCase();\n return locale;\n }\n return null;\n}\n","/* eslint no-magic-numbers: 0 */\nimport { getLikelySubtagsMin } from \"./subtags\";\nconst languageCodeRe = \"([a-z]{2,3}|\\\\*)\";\nconst scriptCodeRe = \"(?:-([a-z]{4}|\\\\*))\";\nconst regionCodeRe = \"(?:-([a-z]{2}|\\\\*))\";\nconst variantCodeRe = \"(?:-(([0-9][a-z0-9]{3}|[a-z0-9]{5,8})|\\\\*))\";\n/**\n * Regular expression splitting locale id into four pieces:\n *\n * Example: `en-Latn-US-macos`\n *\n * language: en\n * script: Latn\n * region: US\n * variant: macos\n *\n * It can also accept a range `*` character on any position.\n */\nconst localeRe = new RegExp(`^${languageCodeRe}${scriptCodeRe}?${regionCodeRe}?${variantCodeRe}?$`, \"i\");\nexport class Locale {\n /**\n * Parses a locale id using the localeRe into an array with four elements.\n *\n * If the second argument `range` is set to true, it places range `*` char\n * in place of any missing piece.\n *\n * It also allows skipping the script section of the id, so `en-US` is\n * properly parsed as `en-*-US-*`.\n */\n constructor(locale) {\n const result = localeRe.exec(locale.replace(/_/g, \"-\"));\n if (!result) {\n this.isWellFormed = false;\n return;\n }\n let [, language, script, region, variant] = result;\n if (language) {\n this.language = language.toLowerCase();\n }\n if (script) {\n this.script = script[0].toUpperCase() + script.slice(1);\n }\n if (region) {\n this.region = region.toUpperCase();\n }\n this.variant = variant;\n this.isWellFormed = true;\n }\n isEqual(other) {\n return this.language === other.language\n && this.script === other.script\n && this.region === other.region\n && this.variant === other.variant;\n }\n matches(other, thisRange = false, otherRange = false) {\n return (this.language === other.language\n || thisRange && this.language === undefined\n || otherRange && other.language === undefined)\n && (this.script === other.script\n || thisRange && this.script === undefined\n || otherRange && other.script === undefined)\n && (this.region === other.region\n || thisRange && this.region === undefined\n || otherRange && other.region === undefined)\n && (this.variant === other.variant\n || thisRange && this.variant === undefined\n || otherRange && other.variant === undefined);\n }\n toString() {\n return [this.language, this.script, this.region, this.variant]\n .filter(part => part !== undefined)\n .join(\"-\");\n }\n clearVariants() {\n this.variant = undefined;\n }\n clearRegion() {\n this.region = undefined;\n }\n addLikelySubtags() {\n const newLocale = getLikelySubtagsMin(this.toString().toLowerCase());\n if (newLocale) {\n this.language = newLocale.language;\n this.script = newLocale.script;\n this.region = newLocale.region;\n this.variant = newLocale.variant;\n return true;\n }\n return false;\n }\n}\n","/* eslint no-magic-numbers: 0 */\nimport { Locale } from \"./locale\";\n/**\n * Negotiates the languages between the list of requested locales against\n * a list of available locales.\n *\n * The algorithm is based on the BCP4647 3.3.2 Extended Filtering algorithm,\n * with several modifications:\n *\n * 1) available locales are treated as ranges\n *\n * This change allows us to match a more specific request against\n * more generic available locale.\n *\n * For example, if the available locale list provides locale `en`,\n * and the requested locale is `en-US`, we treat the available locale as\n * a locale that matches all possible english requests.\n *\n * This means that we expect available locale ID to be as precize as\n * the matches they want to cover.\n *\n * For example, if there is only `sr` available, it's ok to list\n * it in available locales. But once the available locales has both,\n * Cyrl and Latn variants, the locale IDs should be `sr-Cyrl` and `sr-Latn`\n * to avoid any `sr-*` request to match against whole `sr` range.\n *\n * What it does ([requested] * [available] = [supported]):\n *\n * ['en-US'] * ['en'] = ['en']\n *\n * 2) likely subtags from LDML 4.3 Likely Subtags has been added\n *\n * The most obvious likely subtag that can be computed is a duplication\n * of the language field onto region field (`fr` => `fr-FR`).\n *\n * On top of that, likely subtags may use a list of mappings, that\n * allow the algorithm to handle non-obvious matches.\n * For example, making sure that we match `en` to `en-US` or `sr` to\n * `sr-Cyrl`, while `sr-RU` to `sr-Latn-RU`.\n *\n * This list can be taken directly from CLDR Supplemental Data.\n *\n * What it does ([requested] * [available] = [supported]):\n *\n * ['fr'] * ['fr-FR'] = ['fr-FR']\n * ['en'] * ['en-US'] = ['en-US']\n * ['sr'] * ['sr-Latn', 'sr-Cyrl'] = ['sr-Cyrl']\n *\n * 3) variant/region range check has been added\n *\n * Lastly, the last form of check is against the requested locale ID\n * but with the variant/region field replaced with a `*` range.\n *\n * The rationale here laid out in LDML 4.4 Language Matching:\n * \"(...) normally the fall-off between the user's languages is\n * substantially greated than regional variants.\"\n *\n * In other words, if we can't match for the given region, maybe\n * we can match for the same language/script but other region, and\n * it will in most cases be preferred over falling back on the next\n * language.\n *\n * What it does ([requested] * [available] = [supported]):\n *\n * ['en-AU'] * ['en-US'] = ['en-US']\n * ['sr-RU'] * ['sr-Latn-RO'] = ['sr-Latn-RO'] // sr-RU -> sr-Latn-RU\n *\n * It works similarly to getParentLocales algo, except that we stop\n * after matching against variant/region ranges and don't try to match\n * ignoring script ranges. That means that `sr-Cyrl` will never match\n * against `sr-Latn`.\n */\nexport function filterMatches(requestedLocales, availableLocales, strategy) {\n const supportedLocales = new Set();\n const availableLocalesMap = new Map();\n for (let locale of availableLocales) {\n let newLocale = new Locale(locale);\n if (newLocale.isWellFormed) {\n availableLocalesMap.set(locale, new Locale(locale));\n }\n }\n outer: for (const reqLocStr of requestedLocales) {\n const reqLocStrLC = reqLocStr.toLowerCase();\n const requestedLocale = new Locale(reqLocStrLC);\n if (requestedLocale.language === undefined) {\n continue;\n }\n // 1) Attempt to make an exact match\n // Example: `en-US` === `en-US`\n for (const key of availableLocalesMap.keys()) {\n if (reqLocStrLC === key.toLowerCase()) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n // 2) Attempt to match against the available range\n // This turns `en` into `en-*-*-*` and `en-US` into `en-*-US-*`\n // Example: ['en-US'] * ['en'] = ['en']\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, false)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n // 3) Attempt to retrieve a maximal version of the requested locale ID\n // If data is available, it'll expand `en` into `en-Latn-US` and\n // `zh` into `zh-Hans-CN`.\n // Example: ['en'] * ['en-GB', 'en-US'] = ['en-US']\n if (requestedLocale.addLikelySubtags()) {\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, false)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n }\n // 4) Attempt to look up for a different variant for the same locale ID\n // Example: ['en-US-mac'] * ['en-US-win'] = ['en-US-win']\n requestedLocale.clearVariants();\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, true)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n // 5) Attempt to match against the likely subtag without region\n // In the example below, addLikelySubtags will turn\n // `zh-Hant` into `zh-Hant-TW` giving `zh-TW` priority match\n // over `zh-CN`.\n //\n // Example: ['zh-Hant-HK'] * ['zh-TW', 'zh-CN'] = ['zh-TW']\n requestedLocale.clearRegion();\n if (requestedLocale.addLikelySubtags()) {\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, false)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n }\n // 6) Attempt to look up for a different region for the same locale ID\n // Example: ['en-US'] * ['en-AU'] = ['en-AU']\n requestedLocale.clearRegion();\n for (const [key, availableLocale] of availableLocalesMap.entries()) {\n if (availableLocale.matches(requestedLocale, true, true)) {\n supportedLocales.add(key);\n availableLocalesMap.delete(key);\n if (strategy === \"lookup\") {\n return Array.from(supportedLocales);\n }\n else if (strategy === \"filtering\") {\n continue;\n }\n else {\n continue outer;\n }\n }\n }\n }\n return Array.from(supportedLocales);\n}\n","import { filterMatches } from \"./matches\";\n/**\n * Negotiates the languages between the list of requested locales against\n * a list of available locales.\n *\n * It accepts three arguments:\n *\n * requestedLocales:\n * an Array of strings with BCP47 locale IDs sorted\n * according to user preferences.\n *\n * availableLocales:\n * an Array of strings with BCP47 locale IDs of locale for which\n * resources are available. Unsorted.\n *\n * options:\n * An object with the following, optional keys:\n *\n * strategy: 'filtering' (default) | 'matching' | 'lookup'\n *\n * defaultLocale:\n * a string with BCP47 locale ID to be used\n * as a last resort locale.\n *\n *\n * It returns an Array of strings with BCP47 locale IDs sorted according to the\n * user preferences.\n *\n * The exact list will be selected differently depending on the strategy:\n *\n * 'filtering': (default)\n * In the filtering strategy, the algorithm will attempt to match\n * as many keys in the available locales in order of the requested locales.\n *\n * 'matching':\n * In the matching strategy, the algorithm will attempt to find the\n * best possible match for each element of the requestedLocales list.\n *\n * 'lookup':\n * In the lookup strategy, the algorithm will attempt to find a single\n * best available locale based on the requested locales list.\n *\n * This strategy requires defaultLocale option to be set.\n */\nexport function negotiateLanguages(requestedLocales, availableLocales, { strategy = \"filtering\", defaultLocale, } = {}) {\n const supportedLocales = filterMatches(Array.from(Object(requestedLocales)).map(String), Array.from(Object(availableLocales)).map(String), strategy);\n if (strategy === \"lookup\") {\n if (defaultLocale === undefined) {\n throw new Error(\"defaultLocale cannot be undefined for strategy `lookup`\");\n }\n if (supportedLocales.length === 0) {\n supportedLocales.push(defaultLocale);\n }\n }\n else if (defaultLocale && !supportedLocales.includes(defaultLocale)) {\n supportedLocales.push(defaultLocale);\n }\n return supportedLocales;\n}\n","/** @license React v17.0.1\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';require(\"object-assign\");var f=require(\"react\"),g=60103;exports.Fragment=60107;if(\"function\"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h(\"react.element\");exports.Fragment=h(\"react.fragment\")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};\nfunction q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=\"\"+k);void 0!==a.key&&(e=\"\"+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;\n","/** @license React v17.0.1\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=require(\"object-assign\"),n=60103,p=60106;exports.Fragment=60107;exports.StrictMode=60108;exports.Profiler=60114;var q=60109,r=60110,t=60112;exports.Suspense=60113;var u=60115,v=60116;\nif(\"function\"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w(\"react.element\");p=w(\"react.portal\");exports.Fragment=w(\"react.fragment\");exports.StrictMode=w(\"react.strict_mode\");exports.Profiler=w(\"react.profiler\");q=w(\"react.provider\");r=w(\"react.context\");t=w(\"react.forward_ref\");exports.Suspense=w(\"react.suspense\");u=w(\"react.memo\");v=w(\"react.lazy\")}var x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){if(null===a||\"object\"!==typeof a)return null;a=x&&a[x]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}function z(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;cDrag and drop some files here, or click to select files
\n *\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return 
\n })\n } \n
\n )\n}\n\nexport default FrameChooser\n","import React from 'react'\nimport {\n Localized as LocalizedOriginal,\n // withLocalization,\n} from '@fluent/react'\n\nimport { FluentContext } from '../node_modules/@fluent/react/esm/context.js'\n\nconst Localized = props => (\n \n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n })\n }\n
\n )\n}\n\nexport default withLocalization(HashtagChooser)\n","import { useEffect, useRef, useState, useCallback } from 'react'\n\nimport Hammer from 'hammerjs'\nimport Hamster from 'hamsterjs'\n\nfunction updateRange(imageWidth, imageHeight, imageScale, containerWidth, containerHeight) {\n\n const rangeX = Math.max(0, (imageWidth * imageScale) - containerWidth)\n const rangeY = Math.max(0, (imageHeight * imageScale) - containerHeight)\n\n const rangeMaxX = (rangeX / 2)\n const rangeMinX = 0 - rangeMaxX\n\n const rangeMaxY = (rangeY / 2)\n const rangeMinY = 0 - rangeMaxY\n\n return {\n rangeMaxX,\n rangeMinX,\n rangeMaxY,\n rangeMinY,\n }\n}\n\nfunction clamp(value, min, max) {\n return Math.min(Math.max(min, value), max)\n}\n\n\n\nlet minScale = 1;\nlet maxScale = 8;\n\n\n\nfunction Editor({ onChange, backgroundURL, backgroundRatio, frameURL, hashtagURL }) {\n const editorRef = useRef(null)\n const backgroundImageRef = useRef(null)\n\n const [hammer_got_init, set_hammer_got_init] = useState(false)\n\n const [hammertime, set_hammertime] = useState(null)\n const [hamster, set_hamster] = useState(null)\n\n const [x, set_x] = useState(0)\n const [y, set_y] = useState(0)\n const [add_x, set_add_x] = useState(0)\n const [add_y, set_add_y] = useState(0)\n const [scale, set_scale] = useState(1)\n // const [add_scale, set_add_scale] = useState(0)\n\n const [photoWidth, setPhotoWidth] = useState(300)\n const [photoHeight, setPhotoHeight] = useState(300)\n const [editorWidth, setEditorWidth] = useState(300)\n const [editorHeight, setEditorHeight] = useState(300)\n\n const [rangeMinX, set_rangeMinX] = useState(0)\n const [rangeMinY, set_rangeMinY] = useState(0)\n const [rangeMaxX, set_rangeMaxX] = useState(0)\n const [rangeMaxY, set_rangeMaxY] = useState(0)\n\n useEffect(() => {\n if (!!onChange) {\n onChange({ x, y, scale})\n }\n }, [onChange, x, y, scale])\n\n useEffect(() => {\n if (!!editorRef && !!editorRef.current) {\n const new_editorWidth = editorRef.current.offsetWidth\n const new_editorHeight = editorRef.current.offsetHeight\n setEditorHeight(new_editorHeight)\n setEditorWidth(new_editorWidth)\n\n let new_photoWidth = 1\n let new_photoHeight = 1\n if (backgroundRatio < 1) {\n new_photoWidth = 1 / backgroundRatio\n } else if (backgroundRatio > 1) {\n new_photoHeight = 1 * backgroundRatio\n }\n\n setPhotoWidth(new_photoWidth)\n setPhotoHeight(new_photoHeight)\n }\n }, [backgroundRatio])\n\n useEffect(() => {\n const {\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n } = updateRange(photoWidth * editorWidth, photoHeight * editorHeight, scale, editorWidth, editorHeight)\n\n set_rangeMinX(rangeMinX)\n set_rangeMinY(rangeMinY)\n set_rangeMaxX(rangeMaxX)\n set_rangeMaxY(rangeMaxY)\n }, [\n photoWidth,\n photoHeight,\n editorWidth,\n editorHeight,\n scale,\n ])\n\n useEffect(() => {\n set_x(0)\n set_y(0)\n set_add_x(0)\n set_add_y(0)\n set_scale(1)\n }, [backgroundURL])\n\n const handleMove = useCallback(event => {\n const prev_x = event.target.dataset.x * 1\n const prev_y = event.target.dataset.y * 1\n\n const new_x = clamp(prev_x + event.deltaX, rangeMinX, rangeMaxX)\n const new_y = clamp(prev_y + event.deltaY, rangeMinY, rangeMaxY)\n\n if (event.isFinal) {\n set_x(new_x || 0)\n set_y(new_y || 0)\n set_add_x(0)\n set_add_y(0)\n }else{\n set_add_x(new_x - prev_x || 0)\n set_add_y(new_y - prev_y || 0)\n }\n }, [\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n ])\n\n const handleScale = useCallback((event, delta, deltaX, deltaY) => {\n event.preventDefault()\n\n const prev_scale = event.target.dataset.scale * 1\n const new_scale = clamp(prev_scale + delta / 200, minScale, maxScale)\n set_scale(new_scale || 1)\n\n const prev_x = event.target.dataset.x * 1\n const prev_y = event.target.dataset.y * 1\n set_x(clamp(prev_x, rangeMinX, rangeMaxX) || 0)\n set_y(clamp(prev_y, rangeMinY, rangeMaxY) || 0)\n }, [\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n ])\n\n useEffect(() => {\n if (!hammer_got_init && !!editorRef && !!editorRef.current) {\n const element = editorRef.current\n\n element.addEventListener('mousedown', event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchstart\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchend\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchmove\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n\n set_hammertime(new Hammer(element, {\n direction: 'DIRECTION_ALL',\n }))\n\n set_hamster(Hamster(element))\n\n set_hammer_got_init(true)\n }\n }, [editorRef, hammer_got_init])\n\n useEffect(() => {\n if (!!hammertime && !!hamster && hammer_got_init && !!editorRef && !!editorRef.current) {\n hammertime.on('pan', handleMove)\n hamster.wheel(handleScale)\n\n return function () {\n hammertime.off('pan', handleMove)\n hamster.unwheel()\n }\n }\n }, [editorRef, handleMove, handleScale, hammer_got_init, hammertime, hamster])\n\n return (\n Loading texts…
\n }\n\n return (\n \n 
\n\n
\n
\n
\n
\n {/*\n
\n )\n}\nconst AppLocalized = withLocalization(App)\n\n\nfunction AppWrapper() {\n return \n
\n\n \n
Edit your Photo:
\nYour can reposition the image and scale it. Use pinch-to-zoom or scroll to scale.
\n */}\n\n\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n })\n } \n
\n )\n}\n\nexport default FrameChooser\n","import React from 'react'\nimport {\n Localized as LocalizedOriginal,\n // withLocalization,\n} from '@fluent/react'\n\nimport { FluentContext } from '../node_modules/@fluent/react/esm/context.js'\n\nconst Localized = props => (\n \n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n })\n }\n
\n )\n}\n\nexport default withLocalization(HashtagChooser)\n","import { useEffect, useRef, useState, useCallback } from 'react'\n\nimport Hammer from 'hammerjs'\nimport Hamster from 'hamsterjs'\n\nfunction updateRange(imageWidth, imageHeight, imageScale, containerWidth, containerHeight) {\n\n const rangeX = Math.max(0, (imageWidth * imageScale) - containerWidth)\n const rangeY = Math.max(0, (imageHeight * imageScale) - containerHeight)\n\n const rangeMaxX = (rangeX / 2)\n const rangeMinX = 0 - rangeMaxX\n\n const rangeMaxY = (rangeY / 2)\n const rangeMinY = 0 - rangeMaxY\n\n return {\n rangeMaxX,\n rangeMinX,\n rangeMaxY,\n rangeMinY,\n }\n}\n\nfunction clamp(value, min, max) {\n return Math.min(Math.max(min, value), max)\n}\n\n\n\nlet minScale = 1;\nlet maxScale = 8;\n\n\n\nfunction Editor({ onChange, backgroundURL, backgroundRatio, frameURL, hashtagURL }) {\n const editorRef = useRef(null)\n const backgroundImageRef = useRef(null)\n\n const [hammer_got_init, set_hammer_got_init] = useState(false)\n\n const [hammertime, set_hammertime] = useState(null)\n const [hamster, set_hamster] = useState(null)\n\n const [x, set_x] = useState(0)\n const [y, set_y] = useState(0)\n const [add_x, set_add_x] = useState(0)\n const [add_y, set_add_y] = useState(0)\n const [scale, set_scale] = useState(1)\n // const [add_scale, set_add_scale] = useState(0)\n\n const [photoWidth, setPhotoWidth] = useState(300)\n const [photoHeight, setPhotoHeight] = useState(300)\n const [editorWidth, setEditorWidth] = useState(300)\n const [editorHeight, setEditorHeight] = useState(300)\n\n const [rangeMinX, set_rangeMinX] = useState(0)\n const [rangeMinY, set_rangeMinY] = useState(0)\n const [rangeMaxX, set_rangeMaxX] = useState(0)\n const [rangeMaxY, set_rangeMaxY] = useState(0)\n\n useEffect(() => {\n if (!!onChange) {\n onChange({ x, y, scale})\n }\n }, [onChange, x, y, scale])\n\n useEffect(() => {\n if (!!editorRef && !!editorRef.current) {\n const new_editorWidth = editorRef.current.offsetWidth\n const new_editorHeight = editorRef.current.offsetHeight\n setEditorHeight(new_editorHeight)\n setEditorWidth(new_editorWidth)\n\n let new_photoWidth = 1\n let new_photoHeight = 1\n if (backgroundRatio < 1) {\n new_photoWidth = 1 / backgroundRatio\n } else if (backgroundRatio > 1) {\n new_photoHeight = 1 * backgroundRatio\n }\n\n setPhotoWidth(new_photoWidth)\n setPhotoHeight(new_photoHeight)\n }\n }, [backgroundRatio])\n\n useEffect(() => {\n const {\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n } = updateRange(photoWidth * editorWidth, photoHeight * editorHeight, scale, editorWidth, editorHeight)\n\n set_rangeMinX(rangeMinX)\n set_rangeMinY(rangeMinY)\n set_rangeMaxX(rangeMaxX)\n set_rangeMaxY(rangeMaxY)\n }, [\n photoWidth,\n photoHeight,\n editorWidth,\n editorHeight,\n scale,\n ])\n\n useEffect(() => {\n set_x(0)\n set_y(0)\n set_add_x(0)\n set_add_y(0)\n set_scale(1)\n }, [backgroundURL])\n\n const handleMove = useCallback(event => {\n const prev_x = event.target.dataset.x * 1\n const prev_y = event.target.dataset.y * 1\n\n const new_x = clamp(prev_x + event.deltaX, rangeMinX, rangeMaxX)\n const new_y = clamp(prev_y + event.deltaY, rangeMinY, rangeMaxY)\n\n if (event.isFinal) {\n set_x(new_x || 0)\n set_y(new_y || 0)\n set_add_x(0)\n set_add_y(0)\n }else{\n set_add_x(new_x - prev_x || 0)\n set_add_y(new_y - prev_y || 0)\n }\n }, [\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n ])\n\n const handleScale = useCallback((event, delta, deltaX, deltaY) => {\n event.preventDefault()\n\n const prev_scale = event.target.dataset.scale * 1\n const new_scale = clamp(prev_scale + delta / 200, minScale, maxScale)\n set_scale(new_scale || 1)\n\n const prev_x = event.target.dataset.x * 1\n const prev_y = event.target.dataset.y * 1\n set_x(clamp(prev_x, rangeMinX, rangeMaxX) || 0)\n set_y(clamp(prev_y, rangeMinY, rangeMaxY) || 0)\n }, [\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n ])\n\n useEffect(() => {\n if (!hammer_got_init && !!editorRef && !!editorRef.current) {\n const element = editorRef.current\n\n element.addEventListener('mousedown', event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchstart\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchend\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchmove\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n\n set_hammertime(new Hammer(element, {\n direction: 'DIRECTION_ALL',\n }))\n\n set_hamster(Hamster(element))\n\n set_hammer_got_init(true)\n }\n }, [editorRef, hammer_got_init])\n\n useEffect(() => {\n if (!!hammertime && !!hamster && hammer_got_init && !!editorRef && !!editorRef.current) {\n hammertime.on('pan', handleMove)\n hamster.wheel(handleScale)\n\n return function () {\n hammertime.off('pan', handleMove)\n hamster.unwheel()\n }\n }\n }, [editorRef, handleMove, handleScale, hammer_got_init, hammertime, hamster])\n\n return (\n Loading texts…
\n }\n\n return \n \n\n
\n
\n
\n
\n {/*\n
\n )\n}\nconst AppLocalized = withLocalization(App)\n\n\nfunction AppWrapper() {\n const [userLocales, setUserLocales] = useState(navigator.languages)\n const [currentLocale, setCurrentLocale] = useState(null)\n\n const handleLanguageChange = useCallback(event => {\n setUserLocales([event.target.dataset.locale])\n }, [setUserLocales])\n\n const handleCurrentLocalesChange = useCallback(currentLocales => {\n setCurrentLocale(currentLocales.length > 0 ? currentLocales[0] : '')\n }, [setCurrentLocale])\n\n return \n
\n\n \n
Edit your Photo:
\nYour can reposition the image and scale it. Use pinch-to-zoom or scroll to scale.
\n */}\n\n\n {\n Object.entries(locales)\n .map(([locale, name]) => {\n return \n {name}\n \n })\n }\n
\n \n \n}\nexport default withLocalization(AppWrapper)\n\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n